/* ══ 웹폰트 (2026-08-21) ══════════════════════════════════════════
   마루부리 · 네이버/네이버문화재단. 무료·상업사용 가능, 재배포 가능.
   원본 v2.000 → https://hangeul.naver.com/font/maruburi (5종 굵기)
   여기 실린 건 서브셋 woff2: 라틴 18KB · 한글 KS상용 2,350자 143KB.
   ⚠️ 마루부리엔 한자가 한 자도 없다 → 한자 넉 자(情茶荷匙)만
      Noto Serif KR(OFL) 3KB를 같은 이름에 얹어 메운다.
   다시 만들려면: fonts/build-fonts.sh
   ────────────────────────────────────────────────────────────── */
@font-face{font-family:MaruBuriWeb;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/maruburi-400-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+2460-2473,U+3001-3002,U+300C-300D}
@font-face{font-family:MaruBuriWeb;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/maruburi-400-ko.woff2) format("woff2");
  unicode-range:U+1100-11FF,U+3130-318F,U+AC00-D7A3}
@font-face{font-family:MaruBuriWeb;font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/maruburi-600-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+2460-2473,U+3001-3002,U+300C-300D}
@font-face{font-family:MaruBuriWeb;font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/maruburi-600-ko.woff2) format("woff2");
  unicode-range:U+1100-11FF,U+3130-318F,U+AC00-D7A3}
@font-face{font-family:MaruBuriWeb;font-style:normal;font-weight:200 900;font-display:swap;
  src:url(fonts/hanja-notoserifkr.woff2) format("woff2");
  unicode-range:U+5319,U+60C5,U+8336,U+8377}

:root{
  --paper:#f7f5f1; --ink:#1f1c19; --soft:#7c746a; --faint:#a49b90;
  --line:#e4ded4; --band:#efe9df;

  /* ── 글씨체 (2026-08-21) ── 한 줄만 바꾸면 전체가 바뀐다 */
  --maru:"MaruBuriWeb","MaruBuri","마루 부리";
  --latin:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman";
  /* ㄱ) 전부 마루부리 */
  --face:var(--maru),var(--latin),serif;
  /* 이탤릭 전용 — 마루부리엔 이탤릭 자체가 없다(가짜 기울임 방지) */
  --face-it:var(--latin),var(--maru),serif;
  /* ㄴ) 한글만 마루부리, 영문은 세리프 → 아래 줄을 살리고 위 줄을 지운다
  --face:var(--latin),var(--maru),serif; */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--face);
  font-size:17px; line-height:1.8; letter-spacing:.004em;
}
a{color:inherit}
i,.sec-note,.slot{font-family:var(--face-it)}
.wrap{max-width:940px;margin:0 auto;padding:0 28px}
.narrow{max-width:620px;margin:0 auto}

/* ── nav ── */
nav{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;padding:30px 0 0;
}
nav .id{font-size:12.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink);text-decoration:none}
nav .id em{display:block;font-style:normal;letter-spacing:.02em;text-transform:none;font-size:12px;color:var(--faint);margin-top:5px}
nav ul{list-style:none;display:flex;gap:26px;margin:0;padding:0}
nav a.m{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);text-decoration:none;padding-bottom:3px;border-bottom:1px solid transparent}
nav a.m:hover{color:var(--ink);border-bottom-color:var(--line)}
nav a.m.on{color:var(--ink);border-bottom-color:var(--ink)}

/* ── type ── */
.q{
  font-size:clamp(25px,4.4vw,37px);font-weight:400;line-height:1.34;
  letter-spacing:-.012em;margin:0;text-wrap:balance;
}
.kicker{font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--faint);margin:0 0 16px}
h2.sec{
  font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;font-weight:600;color:var(--soft);
  margin:0 0 4px;
}
.sec-note{font-size:14px;color:var(--soft);margin:0 0 26px;font-style:italic}
.rule{border:0;border-top:1px solid var(--line);margin:64px 0}
p{margin:0 0 1.3em}
.lede p{font-size:18.5px;line-height:1.8}
.small{font-size:14px;color:var(--soft)}

/* ── fair band ── */
.fair{
  margin:0;padding:15px 20px;background:var(--band);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  text-align:center;font-size:12.5px;letter-spacing:.13em;line-height:1.9;color:var(--ink);
}
.fair b{letter-spacing:.2em;text-transform:uppercase;font-weight:600}
.sep{color:var(--faint);padding:0 .55em}

/* ── plate (한 폭) ── */
.plate img{width:100%;height:auto;display:block}
.plate figcaption{margin-top:14px;font-size:13px;color:var(--soft);letter-spacing:.02em}
.pull{margin:34px 0 0;padding-left:22px;border-left:1px solid var(--line);font-size:19px;line-height:1.72}
.pull p{margin:0 0 .8em}
.pull cite{display:block;font-style:normal;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:12px}

/* ── grids ── */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:38px 26px;margin:0}
.grid.two{grid-template-columns:repeat(2,1fr);gap:44px 30px}
.item{margin:0}
.item a{text-decoration:none;display:block}
.item img{width:100%;aspect-ratio:3/5;object-fit:cover;display:block;background:#fff;
  filter:saturate(.97);transition:opacity .25s}
.item a:hover img{opacity:.82}
.item .t{margin-top:11px;font-size:15px}
.item .s{display:block;margin-top:3px;font-size:12px;line-height:1.6;color:var(--soft)}
.item .slot{color:var(--faint);font-style:italic}

/* ── writing cards ── */
.texts{display:grid;grid-template-columns:repeat(2,1fr);gap:0 44px}
.txt{padding:22px 0;border-top:1px solid var(--line)}
.txt .tt{font-size:20px;margin:0 0 5px;line-height:1.4}
.txt .td{margin:0;font-size:14.5px;color:var(--soft);line-height:1.68}
.txt .go{display:inline-block;margin-top:9px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);text-decoration:none}
.txt.live .go{color:var(--ink);border-bottom:1px solid var(--line)}
.txt.live .go:hover{border-bottom-color:var(--ink)}

/* ── doors ── */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;margin:0}
.door{padding:26px 0;border-top:1px solid var(--ink);text-decoration:none;display:block}
.door .dn{font-size:22px;display:block}
.door .dd{display:block;margin-top:6px;font-size:14px;color:var(--soft);line-height:1.65}
.door:hover .dn{font-style:italic}

footer{margin:92px 0 0;padding:24px 0 60px;border-top:1px solid var(--line);
  font-size:12.5px;letter-spacing:.05em;color:var(--soft);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
footer a{text-decoration:none;border-bottom:1px solid var(--line)}

/* ── note badges (시안 표시) ── */
.todo{background:#fff6e5;border:1px solid #e8d6ad;color:#7a5c1c;
  font-size:12px;line-height:1.6;padding:9px 12px;margin:14px 0;letter-spacing:.01em}
.todo b{letter-spacing:.08em}

@media (max-width:760px){
  body{font-size:16px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .texts,.doors{grid-template-columns:1fr}
  nav{flex-direction:column;gap:14px}
  nav ul{gap:18px}
}

p.slot{color:var(--faint);font-style:italic;margin-top:-.9em}
.kicker a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.doors .dd{font-size:12px;letter-spacing:.2em;color:var(--faint)}
.doors .dn{font-size:19px;margin-top:2px}
.plate img{border-radius:1px}
.stock{font-size:15px;line-height:2.05}

/* ── 층: 위아래가 아니라 나란히 (2026-08-21) ── */
.layers{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin:0 0 42px;
}
.lay-btn{
  appearance:none;background:none;border:0;border-left:1px solid var(--line);
  font-family:inherit;color:var(--soft);cursor:pointer;text-align:center;
  padding:15px 8px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  line-height:1.5;transition:color .2s,background .2s;
}
.lay-btn:first-child{border-left:0}
.lay-btn em{
  display:block;font-style:normal;text-transform:none;letter-spacing:.02em;
  font-size:11.5px;color:var(--faint);margin-top:4px;
}
.lay-btn:hover{color:var(--ink)}
.lay-btn.on{color:var(--ink);background:var(--band)}
.lay-btn.on em{color:var(--soft)}
.item .lay{
  display:block;margin-top:6px;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);
}

/* 시안 B — 세 층 이름을 세로 순서보다 먼저 나란히 */
.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.triad a{text-decoration:none;text-align:center;padding:15px 8px;
  border-left:1px solid var(--line);color:var(--soft)}
.triad a:first-child{border-left:0}
.triad a:hover{color:var(--ink);background:var(--band)}
.triad b{display:block;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.triad em{display:block;font-style:normal;font-size:11.5px;color:var(--faint);margin-top:4px;letter-spacing:.02em}

@media (max-width:760px){
  .layers{grid-template-columns:repeat(2,1fr)}
  .lay-btn:nth-child(3){border-left:0}
  .lay-btn:nth-child(n+3){border-top:1px solid var(--line)}
  .triad{grid-template-columns:1fr}
  .triad a{border-left:0;border-top:1px solid var(--line)}
  .triad a:first-child{border-top:0}
}