/* 슬롭툰 — 시안 A '호수 목차' 확정판
   화면 성격: Explore(보관함) + 읽기. 랜딩 아님: 히어로·기능 카드·그라데이션 없음.
   종이 #F2EEE5 / 먹 #17171A / 강조 주홍 #B4432C 하나. 제목 Hahmlet, 본문 IBM Plex Sans KR, 번호 Plex Mono. */
:root{
  --paper:#F2EEE5; --paper-2:#EAE5D9; --ink:#17171A; --ink-2:#3A3934; --muted:#736D65;
  --rule:#D6CFBF; --rule-strong:#17171A; --accent:#B4432C;
  --serif:"Hahmlet",serif; --sans:"IBM Plex Sans KR",sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
  --col:min(1120px, 100% - 48px); --gut:168px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;word-break:keep-all;overflow-wrap:anywhere}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
[hidden]{display:none!important}

/* 제호 */
.mast{width:var(--col);margin:0 auto;padding:26px 0 0}
.mast-top{display:flex;justify-content:space-between;gap:16px;font:500 12px/1 var(--mono);letter-spacing:.03em;color:var(--muted);padding-bottom:14px;border-bottom:3px solid var(--rule-strong)}
.mast h1{font:800 clamp(52px,8vw,104px)/.9 var(--serif);letter-spacing:-.04em;padding:18px 0 0}
.lede{font:400 15px/1.6 var(--sans);color:var(--ink-2);margin:16px 0 22px;max-width:30em}
.mast-bar{display:flex;align-items:center;gap:28px;border-top:1px solid var(--rule-strong);border-bottom:1px solid var(--rule-strong);min-height:44px;font:500 14px/1 var(--sans)}
.mast-bar .sect{display:flex;gap:22px}
.mast-bar .sect a[aria-current]{color:var(--accent)}
.mast-bar .sect a:hover{color:var(--accent)}
.genres{display:flex;gap:4px;flex-wrap:wrap}
.genres button{padding:6px 10px;font-size:13px;color:var(--ink-2);border-radius:2px}
.genres button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.genres button:hover:not([aria-pressed="true"]){color:var(--accent)}
.count{margin-left:auto;font:400 12px/1 var(--mono);color:var(--muted)}

/* 목차 */
.index{width:var(--col);margin:0 auto 104px}
.day{display:grid;grid-template-columns:var(--gut) 1fr;gap:0 40px;padding-top:44px}
.day-h{font:700 15px/1.3 var(--serif);position:sticky;top:22px;align-self:start}
.day-h b{display:block;font:800 44px/1 var(--serif);letter-spacing:-.035em;margin-bottom:8px}
.day-h .n{display:block;font:400 12px/1 var(--mono);color:var(--muted);margin-top:10px}
.list{list-style:none;border-top:1px solid var(--rule-strong)}
.entry{border-bottom:1px solid var(--rule)}
.entry a{display:grid;grid-template-columns:1fr 132px;gap:32px;padding:24px 0 26px;align-items:start}
.no{font:500 12px/1 var(--mono);color:var(--muted);display:flex;gap:12px;flex-wrap:wrap}
.no{color:var(--ink)}
.no span{color:var(--muted)}
.t{font:700 25px/1.28 var(--serif);letter-spacing:-.02em;margin-top:12px;text-wrap:balance;transition:color .15s}
.h{margin-top:8px;color:var(--ink-2);font-size:15px;line-height:1.55;max-width:34em;text-wrap:pretty}
.meta{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px 16px;font:400 12px/1 var(--mono);color:var(--muted)}
.meta .rec{color:var(--accent)}
.thumb{aspect-ratio:4/5;overflow:hidden;background:#fff;border:1px solid var(--rule)}
.thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 0;filter:saturate(.9) contrast(.98);transition:filter .2s}
.entry a:hover .t{color:var(--accent)}
.entry a:hover .thumb img{filter:none}
/* 그날의 머리기사: 크게, 그러나 목록 문법 안에서 */
.entry.lead a{grid-template-columns:1fr 340px;gap:40px;padding:28px 0 32px}
.entry.lead .t{font-size:clamp(30px,3.2vw,40px);line-height:1.16;letter-spacing:-.03em}
.entry.lead .h{font-size:17px;margin-top:12px}
.entry.lead .thumb{aspect-ratio:17/13}
.more{padding:36px 0 0 calc(var(--gut) + 40px);font:600 15px/1 var(--sans)}
.more a{border-bottom:1px solid currentColor;padding-bottom:3px}
.more a:hover{color:var(--accent)}

/* 월별 보관함 */
.months{display:grid;grid-template-columns:var(--gut) 1fr;gap:0 40px;padding-top:44px}
.mlist{list-style:none;border-top:1px solid var(--rule-strong)}
.mlist a{display:flex;justify-content:space-between;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--rule)}
.mlist b{font:700 26px/1 var(--serif);letter-spacing:-.02em}
.mlist span{font:400 13px/1 var(--mono);color:var(--muted)}
.mlist a:hover b{color:var(--accent)}

/* 읽기 */
.r-bar{position:sticky;top:0;z-index:3;background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:1px solid var(--rule-strong)}
.r-bar{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;height:48px;padding:0 max(24px,(100% - 1120px)/2)}
.r-home{font:800 22px/1 var(--serif);letter-spacing:-.03em}
.r-back{font:500 13px/1 var(--sans);color:var(--ink-2)}
.r-back:hover,.r-home:hover{color:var(--accent)}
.r-head{width:min(760px,100% - 48px);margin:0 auto;padding:44px 0 30px}
.r-title{font:800 clamp(30px,4.4vw,52px)/1.12 var(--serif);letter-spacing:-.035em;margin-top:16px;text-wrap:balance}
.r-sub{margin-top:14px;font-size:18px;color:var(--ink-2);text-wrap:pretty}
.r-meta{margin-top:20px;padding-top:16px;border-top:1px solid var(--rule-strong);display:flex;flex-wrap:wrap;gap:8px 18px;font:400 12px/1 var(--mono);color:var(--muted)}
.r-meta a{margin-left:auto;color:var(--ink);font:600 13px/1 var(--sans);border-bottom:1px solid currentColor;padding-bottom:3px}
.r-meta a:hover{color:var(--accent)}
.strip{width:min(760px,100%);margin:0 auto;background:#fff;box-shadow:0 0 0 1px var(--rule)}
.strip img{width:100%;height:auto}
.r-foot{width:min(760px,100% - 48px);margin:56px auto 0;display:grid;grid-template-columns:1fr 1fr;border-top:3px solid var(--rule-strong)}
.r-foot a{padding:22px 0;display:block}
.r-foot a.newer{text-align:right;border-left:1px solid var(--rule);padding-left:24px;grid-column:2}
.r-foot small{display:block;font:500 12px/1 var(--mono);color:var(--muted);margin-bottom:10px}
.r-foot strong{font:700 19px/1.35 var(--serif);letter-spacing:-.015em}
.r-foot a:hover strong{color:var(--accent)}
.related{width:min(760px,100% - 48px);margin:8px auto 0;border-top:1px solid var(--rule-strong);padding-top:18px}
.related h2{font:500 12px/1 var(--mono);color:var(--muted);letter-spacing:.03em}
.related ul{list-style:none;margin-top:8px}
.related a{display:flex;gap:16px;padding:12px 0;border-bottom:1px solid var(--rule);font:600 16px/1.4 var(--sans)}
.related a span{font:400 12px/1.9 var(--mono);color:var(--muted);flex:none}
.related a:hover{color:var(--accent)}

.foot{width:var(--col);margin:72px auto 0;padding:22px 0 44px;border-top:1px solid var(--rule-strong);font:400 12px/1.7 var(--sans);color:var(--muted);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.reading .foot{width:min(760px,100% - 48px)}


/* ── 목록 도구: 갈래 / 정렬 / 보기 ─────────────────────────────── */
.tools{width:var(--col);margin:18px auto 0;display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap}
.tools .genres button{padding:6px 10px;font-size:13px;color:var(--ink-2);border-radius:2px}
.tools .genres button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.tools .genres button:hover:not([aria-pressed="true"]){color:var(--accent)}
.ctrl{display:flex;gap:10px;margin-left:auto}
.seg{display:flex;border:1px solid var(--rule-strong);border-radius:2px;overflow:hidden}
.seg button{padding:7px 12px;font:500 13px/1 var(--sans);color:var(--ink-2)}
.seg button+button{border-left:1px solid var(--rule-strong)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.seg button:hover:not([aria-pressed="true"]){color:var(--accent)}
html:not(.js) .tools{display:none}
/* 보기·정렬 선택: 빌드 때 네 가지 목록을 다 만들어 두고 하나만 보인다 */
.v-board,.by-rec{display:none}
html[data-view="board"] .v-article{display:none}
html[data-view="board"] .v-board{display:block}
html[data-sort="rec"] .by-new{display:none}
html[data-sort="rec"] .by-rec{display:block}
.no time{color:var(--muted)}

/* ── 게시판형: 디시 개념글 목록 문법 ───────────────────────────── */
.b-wrap{padding-top:28px}
.b-tabs{display:flex;align-items:flex-end;gap:12px;border-bottom:2px solid #3b4890}
.b-tabs .on{background:#3b4890;color:#fff;font:700 14px/1 var(--sans);padding:10px 16px 9px;border-radius:3px 3px 0 0}
.b-tabs .b-lab{margin-left:auto;font:400 12px/1 var(--mono);color:var(--muted);padding-bottom:8px}
.b-list{width:100%;border-collapse:collapse;table-layout:fixed;background:#fff;font:400 13px/1.4 var(--sans)}
.b-list col.c1{width:78px} .b-list col.c2{width:92px} .b-list col.c4{width:84px} .b-list col.c5{width:64px} .b-list col.c6{width:56px}
.b-list th{font:500 12px/1 var(--sans);color:#555;padding:11px 6px;border-bottom:1px solid #ccc;background:#fff;text-align:center}
.b-list th.b-tit{text-align:center}
.b-list td{padding:9px 6px;border-bottom:1px solid #eee;text-align:center;color:#555;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-list td.b-no,.b-list td.b-date,.b-list td.b-view,.b-list td.b-rec{font:400 12px/1.4 var(--mono)}
.b-list td.b-cat{color:#666;font-size:12px}
.b-list td.b-tit{text-align:left;color:#222}
.b-list td.b-tit a:hover{text-decoration:underline;text-underline-offset:2px}
.b-list td.b-tit a:visited{color:#770088}
.b-cmt{color:#3b4890;font:700 12px/1 var(--mono);margin-left:5px}
.b-m{display:none}
.b-list tr:hover td{background:#f8f8f8}

/* ── 읽기: 헤더 제목 등장, 게시판형 머리, 좌우 이전/다음 ─────────── */
.r-bar-t{min-width:0;font:700 15px/1.2 var(--serif);letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-align:center;opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease;pointer-events:none}
.past-title .r-bar-t{opacity:1;transform:none}
.b-head{display:none}
html[data-view="board"] .reading .a-head{display:none}
html[data-view="board"] .reading .b-head{display:block}
.b-head{width:min(760px,100% - 48px);margin:0 auto;padding:30px 0 0}
.b-title{font:700 20px/1.45 var(--sans);letter-spacing:-.02em;padding-bottom:10px;border-bottom:2px solid #3b4890}
.b-title span{color:#3b4890;font-weight:600}
.b-info{display:flex;flex-wrap:wrap;gap:6px 14px;padding:10px 0;border-bottom:1px solid #ddd;font:400 12px/1.4 var(--mono);color:#666}
.b-info .b-r{margin-left:auto;display:flex;gap:10px;align-items:center}
.b-info .b-r i{width:1px;height:10px;background:#ccc}
.b-src{padding:12px 0 20px;font:500 13px/1 var(--sans)}
.b-src a{color:#3b4890;border-bottom:1px solid currentColor;padding-bottom:2px}
html[data-view="board"] .reading{--paper:#fff}
html[data-view="board"] .reading .strip{box-shadow:none}

.r-foot time{display:block;margin-top:8px;font:400 12px/1 var(--mono);color:var(--muted)}
.related a span{min-width:78px}

.side{position:fixed;top:50%;z-index:2;width:56px;height:56px;display:none;align-items:center;justify-content:center;
  transform:translateY(-50%);font:400 34px/1 var(--serif);color:var(--ink-2);border-radius:50%;
  transition:opacity .3s ease,visibility .3s,color .15s,background .15s}
.side.prev{left:max(16px,(100% - 760px)/2 - 104px)}
.side.next{right:max(16px,(100% - 760px)/2 - 104px)}
.side:hover{color:var(--accent);background:var(--paper-2)}
@media (min-width:1000px){ .side{display:flex} }
.at-foot .side{opacity:0;visibility:hidden}

@media (max-width:860px){
  :root{--col:calc(100% - 36px)}
  .tools{margin-top:14px}
  .tools .genres{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;width:100%}
  .ctrl{margin-left:0;width:100%}
  .seg{flex:1}
  .seg button{flex:1}
  .r-bar{gap:12px}
  .r-bar-t{font-size:14px;text-align:left}
  .b-head{width:calc(100% - 36px);padding-top:18px}
  .b-title{font-size:17px}
  .b-list colgroup,.b-list thead{display:none}
  .b-list,.b-list tbody,.b-list tr{display:block;width:100%}
  .b-list tr{padding:11px 4px;border-bottom:1px solid #eee}
  .b-list td{display:none;border:0;padding:0}
  .b-list td.b-tit{display:block;white-space:normal;font-size:15px;line-height:1.45}
  .b-m{display:block;margin-top:5px;font:400 12px/1.3 var(--mono);color:#888}

  .mast{padding-top:18px}
  .mast-top span:last-child{display:none}
  .mast h1{font-size:64px;padding-top:14px}
  .lede{font-size:14px;margin:12px 0 18px}
  .mast-bar{gap:18px;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
  .count{display:none}
  .day,.months{grid-template-columns:1fr;padding-top:30px}
  .day-h{position:static;display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
  .day-h b{font-size:30px;margin:0}
  .day-h .n{margin:0}
  .entry a{grid-template-columns:1fr 92px;gap:16px;padding:18px 0 20px}
  .t{font-size:19px;margin-top:10px}
  .h{font-size:14px}
  .meta{margin-top:10px}
  .entry.lead a{grid-template-columns:1fr;gap:0}
  .entry.lead .thumb{order:-1;aspect-ratio:17/12;margin:0 0 16px}
  .entry.lead .t{font-size:26px}
  .entry.lead .h{font-size:15px}
  .more{padding-left:0}
  .r-bar{padding:0 18px}
  .r-head{width:calc(100% - 36px);padding:26px 0 22px}
  .r-sub{font-size:16px}
  .strip{box-shadow:none}
  .r-foot,.related,.reading .foot{width:calc(100% - 36px)}
  .r-foot{grid-template-columns:1fr}
  .r-foot a.newer{grid-column:1;grid-row:1;text-align:left;border-left:0;padding-left:0;border-bottom:1px solid var(--rule)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}