/* ANTS 가이드 — 주제별 페이지 공유 스타일. 헤더·사이드바·이전/다음 페이저·라이트박스는
   guide-nav.js가 data-topic을 읽어 각 페이지에 주입한다(space 규약 계승). */
:root {
  --bg:#fbf6ee; --bg2:#f3ead9; --panel:#fffdf8; --line:#ece0cc; --line2:#e0d0b4;
  --ink:#3f2f22; --muted:#7c6a56; --dim:#a2917c;
  --accent:#e6883c; --accent2:#7cae5a; --sky:#bfe3ff; --link:#c26a1f;
  --nav-w:260px; --shadow:0 8px 26px rgba(120,90,50,.14);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); line-height:1.75;
  font-family:-apple-system,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif; }
body::before { content:""; position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(1100px 520px at 82% -8%, rgba(124,174,90,.18), transparent 60%),
    radial-gradient(900px 520px at -5% 0%, rgba(230,136,60,.14), transparent 60%),
    linear-gradient(180deg, var(--sky) 0%, var(--bg) 30%); }
a { color:var(--link); text-decoration:none; }
a:hover { text-decoration:underline; }

header.top { position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:14px;
  padding:12px 20px; background:rgba(255,253,248,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line); }
header.top .brand { font-weight:800; font-size:19px; letter-spacing:.3px; display:flex; align-items:center; gap:8px; }
header.top .brand .em { color:var(--accent); }
header.top .spacer { flex:1; }
header.top a.play { background:linear-gradient(120deg,#e6883c,#e2a24a); color:#fff; font-weight:700;
  font-size:14px; padding:9px 18px; border-radius:11px; box-shadow:var(--shadow); }
header.top a.play:hover { text-decoration:none; transform:translateY(-1px); }
header.top a.ghost { color:var(--muted); font-weight:600; font-size:14px; padding:9px 12px; }
header.top a.ghost:hover { text-decoration:none; color:var(--ink); }
.menubtn { display:none; background:var(--panel); color:var(--ink); border:1px solid var(--line2);
  border-radius:9px; padding:7px 11px; font-size:16px; cursor:pointer; }

.layout { display:grid; grid-template-columns:var(--nav-w) minmax(0,1fr); max-width:1240px; margin:0 auto; }
nav.side { position:sticky; top:58px; align-self:start; height:calc(100vh - 58px); overflow-y:auto;
  padding:22px 12px 60px 20px; border-right:1px solid var(--line); }
nav.side .glabel { font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--dim); margin:16px 8px 6px; }
nav.side a { display:block; padding:7px 11px; border-radius:9px; color:var(--muted); font-size:14px;
  border-left:2px solid transparent; }
nav.side a.sub { padding-left:22px; font-size:13px; }
nav.side a:hover { background:rgba(230,136,60,.08); text-decoration:none; color:var(--ink); }
nav.side a.active { color:var(--ink); background:rgba(230,136,60,.14); border-left-color:var(--accent); font-weight:600; }
nav.side a.here { color:var(--ink); }

main { padding:28px 46px 120px; min-width:0; }
main section { scroll-margin-top:74px; padding-top:16px; }
main h1 { font-size:clamp(30px,4.5vw,44px); margin:8px 0 6px; letter-spacing:-.5px; }
main .lede { font-size:17px; color:var(--muted); max-width:760px; }
main h2 { font-size:25px; margin:14px 0 10px; padding-bottom:8px; border-bottom:1px solid var(--line); color:#33251a; }
main h3 { font-size:17px; margin:22px 0 6px; color:#4a3626; }
main p, main li { color:#5a4636; }
main ul, main ol { padding-left:22px; }
main li { margin:5px 0; }
main strong { color:#2f2115; }
code { background:#f3ead9; border:1px solid var(--line2); border-radius:5px; padding:1px 6px;
  font:13px ui-monospace,Menlo,monospace; color:#a85417; }
.kbd { display:inline-block; min-width:22px; text-align:center; background:#fff; border:1px solid var(--line2);
  border-bottom-width:2px; border-radius:6px; padding:2px 8px; font:12px ui-monospace,Menlo,monospace; color:#4a3626; }
figure { margin:18px 0; }
figure img { width:100%; border-radius:14px; border:1px solid var(--line2); box-shadow:var(--shadow); display:block; }
figcaption { font-size:13px; color:var(--dim); margin-top:8px; text-align:center; }
.note { border:1px solid var(--line2); border-left:3px solid var(--accent2); border-radius:10px;
  background:var(--panel); padding:12px 16px; margin:16px 0; font-size:14.5px; color:#5a4636; box-shadow:var(--shadow); }
.note .t { font-weight:700; color:#33251a; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin:16px 0; }
.card { border:1px solid var(--line2); border-radius:14px; padding:15px 16px; background:var(--panel); box-shadow:var(--shadow); }
.card h4 { margin:0 0 6px; font-size:15px; color:#33251a; display:flex; align-items:center; gap:7px; }
.card p { margin:0; font-size:13.5px; color:var(--muted); }
table.t { width:100%; border-collapse:collapse; margin:14px 0; font-size:14px; background:var(--panel);
  border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }
table.t th, table.t td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); }
table.t th { background:#f3ead9; color:#33251a; font-weight:700; }
table.t tr:last-child td { border-bottom:0; }

/* 이전 / 다음 페이지 페이저 (각 주제 페이지 하단) */
.pager { display:flex; gap:12px; margin:36px 0 8px; flex-wrap:wrap; }
.pager a { flex:1 1 220px; display:flex; flex-direction:column; gap:3px; padding:14px 18px;
  border:1px solid var(--line2); border-radius:14px; background:var(--panel); box-shadow:var(--shadow); }
.pager a:hover { text-decoration:none; transform:translateY(-1px); border-color:var(--accent); }
.pager a.pager-next { text-align:right; align-items:flex-end; }
.pager .pager-dir { font-size:12px; color:var(--dim); font-weight:600; }
.pager .pager-title { font-size:15px; color:#33251a; font-weight:700; }

footer.foot { max-width:1240px; margin:0 auto; padding:22px 46px 60px; color:var(--dim); font-size:13px; border-top:1px solid var(--line); }
footer.foot a { color:var(--link); }

.backtop { position:fixed; right:18px; bottom:18px; z-index:35; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line2); background:var(--panel); color:var(--ink); font-size:18px; cursor:pointer;
  box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .2s; }
.backtop.show { opacity:1; pointer-events:auto; }

.scrim { display:none; position:fixed; inset:0; z-index:38; background:rgba(30,20,10,.35); }
.scrim.on { display:block; }

@media (max-width:860px) {
  .layout { grid-template-columns:1fr; }
  nav.side { position:fixed; top:0; left:0; width:82%; max-width:320px; height:100vh; z-index:40;
    background:var(--panel); transform:translateX(-102%); transition:transform .2s; box-shadow:var(--shadow); }
  nav.side.open { transform:none; }
  .menubtn { display:inline-block; }
  main { padding:22px 20px 100px; }
}

/* 스크린샷 클릭 확대(라이트박스) */
#lightbox { position:fixed; inset:0; background:rgba(22,15,10,.9); display:none; align-items:center;
  justify-content:center; z-index:9999; cursor:zoom-out; padding:22px; }
#lightbox.on { display:flex; }
#lightbox img { max-width:96vw; max-height:90vh; border-radius:12px; box-shadow:0 14px 54px rgba(0,0,0,.55); }
#lightbox .lb-cap { position:absolute; left:0; right:0; bottom:16px; text-align:center; color:#fff;
  font-size:14px; opacity:.86; padding:0 20px; }
#lightbox .lb-x { position:absolute; top:14px; right:20px; color:#fff; font-size:30px; opacity:.8; line-height:1; }
main img { cursor:zoom-in; }