:root{
  --rail-l: 280px;      /* 왼쪽 폭 */
  --rail-r: 220px;      /* 오른쪽 폭 */
  --max: 1200px;        /* 전체 최대폭 */
  --bg:#ffffff; --ink:#111; --muted:#6c6f73; --rule:#e5e7eb; --accent:#8b0030;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.7; font-size:16px;
}

/* ===== 3열 그리드 ===== */
#container.layout{
  display:grid;
  grid-template-columns: var(--rail-l) minmax(0,1fr) var(--rail-r);
  gap:24px;
  max-width:var(--max);
  margin:0 auto;
  min-height:100vh;          /* 페이지 스크롤 허용 */
  padding:16px;
}

/* ===== 왼쪽/오른쪽 레일: sticky + 자체 스크롤 ===== */
.left-rail, #tags{
  position: sticky; top:0; align-self:start;
  max-height:100vh; overflow:auto;
  padding:16px;
}
.left-rail{ background:#f7f7f7; border-right:1px solid var(--rule); }
#tags{ border-left:1px solid var(--rule); }

/* 가운데 본문 칼럼이 옆으로 밀리지 않도록 */
#content{ min-width:0; }

/* ===== 사이드: 목록/토글 ===== */
.site-title{ margin:.25rem 0 .75rem; font-size:1.5rem; }
details.year{ margin:.25rem 0 .75rem; }
details.year > summary{
  list-style:none; cursor:pointer;
  color:var(--muted); font-weight:700; padding:.25rem 0;
}
details.year > summary::-webkit-details-marker{ display:none; }

.year-list{ list-style:none; margin:.25rem 0 0; padding:0; }
.post-link{
  display:block; padding:.1rem 0; text-decoration:none;
  color:var(--accent);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.post-link .date{ font-family:"SFMono-Regular","Menlo","Consolas",monospace; color:#111; font-weight:700; }
.post-link .sep{ color:#111; }
.post-link .title{ color:var(--accent); }
.post-link:hover .title{ text-decoration:underline; }
.post-link.active{ background:rgba(139,0,48,.08); border-radius:6px; color:#000; }
.post-link.active .title{ color:#000; }

/* ===== 본문 ===== */
.post-title{ font-size:2.25rem; line-height:1.2; margin:.2rem 0 .6rem; text-wrap:balance; }
.post-meta{ color:var(--muted); margin:0 0 1rem; }
.prose{
  max-width:min(70ch, 92vw);
  margin:0 auto;
  font-size:1.0625rem; line-height:1.9;
  word-break:keep-all; line-break:loose; letter-spacing:-.003em;
}
.prose p{ margin:0 0 1.15em; }
.prose h2,.prose h3{ text-wrap:balance; line-height:1.3; margin:2rem 0 1rem; }
.prose img,.prose video{ display:block; max-width:100%; height:auto; border-radius:4px; }
.prose video{ width:100%; }

/* ===== 오른쪽 태그 ===== */
#tags h2{ margin:.25rem 0 .5rem; }
.tag-list{ display:flex; flex-direction:column; gap:.25rem; }
#tags .tag{ color:var(--accent); text-decoration:none; }
#tags .tag:hover{ text-decoration:underline; }

/* ===== 구분선/여백 (옵션) ===== */
.post + .selector-row{ margin-top:56px; }
hr{ border:0; border-top:1px solid var(--rule); margin:24px 0; }

/* ===== 반응형: 모바일 1단 ===== */
@media (max-width: 960px){
  #container.layout{ grid-template-columns: 1fr; gap:12px; padding:12px; }
  .left-rail,#tags{ position:static; max-height:none; overflow:visible; border:0; background:transparent; padding:8px 12px; }
  .post-title{ font-size:1.9rem; }
  .prose{ max-width: 100%; }
}

/* ===== 다크 모드(선호 설정) ===== */
@media (prefers-color-scheme: dark){
  :root{ --bg:#0b0c0d; --ink:#e9eaeb; --muted:#9aa0a6; --rule:#2b2f33; --accent:#ff5b9a; }
  .left-rail{ background:#121416; border-right:1px solid var(--rule); }
  #tags{ border-left:1px solid var(--rule); }
  .post-link.active{ background:rgba(255,91,154,.12); }
}
/* Floating title tooltip */
.tooltip{
  position: fixed; z-index: 9999; pointer-events: none;
  background: rgba(20,20,22,.95); color:#fff;
  font-size: .9rem; line-height: 1.4;
  padding: 8px 10px; border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0,0,0,.25);
  max-width: 42vw;
}
@media (prefers-color-scheme: light){
  .tooltip{ background:#111; color:#fff; }
}

/* (선택) 호버 시 한 줄 말고 감싸서 보여주기 — 툴팁 대신 쓸 때 */
.left-rail .post-link:hover,
.left-rail .post-link:focus{ white-space: normal; }

/* 가짜 태그(#portfolio) 표시 */
#tags .tag-extern::after{
  content:"↗";
  margin-left:.3em;
  font-size:.9em;
  opacity:.85;
}