/* =========================================================
   위키 토끼굴 — 테마 레이어 (이 파일 위쪽 = 테마, 아래 = 컴포넌트)
   테마: "서재 / 오래된 백과사전"

   이 도구는 **긴 글을 오래 읽는** 도구다. 그래서 다른 도구와 달리
   본문에 명조(Nanum Myeongjo)를 쓴다 — 화면에서도 장문 독서에는 세리프가
   덜 피로하고, '백과사전을 펼친' 느낌이 주제와 맞는다.
   UI 라벨·버튼은 Pretendard 로 남긴다(작은 글씨는 고딕이 또렷하다).

   ⚠️ 구현 방식: 공유 style.css 를 구동하는 토큰을 재정의한다. 이 페이지에서만 로드.
   ========================================================= */
:root{
  --paper:#F4F0E6;        /* 책장 종이 */
  --surface:#FBF8F1;
  --surface-2:#E8E2D3;
  --line:#DDD5C3;--line-strong:#BEB39B;
  --ink:#241F17;          /* 활자 먹 */
  --muted:#5F5849;--faint:#8C8474;
  --accent:#2F6F4E;       /* 굴 초록 */
  --accent-2:#3E8A63;
  --accent-ink:#245840;
  --soft:#E2EDE5;--warm:#F6EBD5;--warm-ink:#8A6510;
  --good:#2F6F4E;--good-bg:#E2EDE5;--warn:#8A6510;--warn-bg:#F6EBD5;--bad:#A83A2E;--bad-bg:#F7E7E4;
  --shadow:0 1px 2px rgba(36,31,23,.05),0 8px 24px rgba(36,31,23,.09);
  --r:8px;--r-sm:6px;
  --wr-serif:'Nanum Myeongjo',serif;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#16130E;--surface:#1F1B14;--surface-2:#2A251B;
  --line:#382F22;--line-strong:#52462F;
  --ink:#F0E9DA;--muted:#B4A992;--faint:#8A8070;
  --accent:#68B98D;--accent-2:#84CBA3;--accent-ink:#9BD8B6;
  --soft:#16281E;--warm:#2A2413;--warm-ink:#DCBB5A;
  --good:#68B98D;--good-bg:#16281E;--warn:#DCBB5A;--warn-bg:#2A2413;--bad:#E08175;--bad-bg:#2B1714;
}}
:root[data-theme="dark"]{
  --paper:#16130E;--surface:#1F1B14;--surface-2:#2A251B;
  --line:#382F22;--line-strong:#52462F;
  --ink:#F0E9DA;--muted:#B4A992;--faint:#8A8070;
  --accent:#68B98D;--accent-2:#84CBA3;--accent-ink:#9BD8B6;
  --soft:#16281E;--warm:#2A2413;--warm-ink:#DCBB5A;
  --good:#68B98D;--good-bg:#16281E;--warn:#DCBB5A;--warn-bg:#2A2413;--bad:#E08175;--bad-bg:#2B1714;
}
:root[data-theme="light"]{
  --paper:#F4F0E6;--surface:#FBF8F1;--surface-2:#E8E2D3;
  --line:#DDD5C3;--line-strong:#BEB39B;
  --ink:#241F17;--muted:#5F5849;--faint:#8C8474;
  --accent:#2F6F4E;--accent-2:#3E8A63;--accent-ink:#245840;
  --soft:#E2EDE5;--warm:#F6EBD5;--warm-ink:#8A6510;
  --good:#2F6F4E;--good-bg:#E2EDE5;--warn:#8A6510;--warn-bg:#F6EBD5;--bad:#A83A2E;--bad-bg:#F7E7E4;
}

/* nav = 책등(spine) 느낌의 가는 초록 띠 */
.nav{background:var(--surface);border-bottom:1px solid var(--line);box-shadow:inset 0 -3px 0 -1px var(--accent)}

/* ---------- 읽기 화면 = 책 페이지 ---------- */
.wr-body{font-family:var(--wr-serif);font-size:16.5px;line-height:1.95}
/* ⚠️ text-align:justify 를 쓰지 말 것. 한글은 단어가 길어서 양끝맞춤을 하면
   줄마다 어절 간격이 크게 벌어져 오히려 읽기 나빠진다(2026-08-04 실제로
   적용해봤다가 되돌림). 왼끝맞춤 + keep-all 이 한글 장문에 맞다. */
.wr-body p{word-break:keep-all}
/* 첫 문단 첫 글자를 키운다 — 펼친 책의 신호 */
.wr-body > p:first-of-type::first-letter{
  float:left;font-size:3.1em;line-height:.92;
  padding:2px 9px 0 0;color:var(--accent);font-weight:700;
}
#wr-title{font-family:var(--wr-serif)}

/* =========================================================
   위키 토끼굴 — 전용 스타일 (공유 style.css 뒤에 로드)
   테마: 굴속 — 깊은 초록 + 종이 베이지.
   ⚠️ 오버레이(position:absolute + display:flex)를 쓰지 않는다.
      map-archery 에서 그 패턴이 브라우저 기본 [hidden]{display:none} 을
      덮어써 요소가 겹쳐 보인 사고가 있었다. 여기서는 섹션 전환만 쓴다.
   ========================================================= */
:root{
  --wr-ink:#20301F; --wr-accent:#2F6F4E; --wr-line:#D7DFD3; --wr-muted:#6A7A68;
}
.hero.wr-theme h1{color:var(--wr-ink)}
.wr-card{border:1px solid var(--wr-line)}

.wr-row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.wr-input{flex:1;min-width:200px;font:inherit;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink)}
.wr-input:focus{outline:2px solid var(--wr-accent);outline-offset:1px}
.wr-row .cta{width:auto;padding:13px 22px;margin-top:0}

.wr-hit{display:block;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin-top:9px;cursor:pointer;font:inherit;color:var(--ink)}
.wr-hit:hover{border-color:var(--wr-accent)}
.wr-hit b{display:block;margin-bottom:3px}
.wr-hit span{font-size:13px;color:var(--muted);line-height:1.6}

.wr-bar{height:10px;background:var(--surface-2);border-radius:999px;overflow:hidden;margin:14px 0 8px}
.wr-bar-fill{height:100%;width:0;background:var(--wr-accent);border-radius:999px;transition:width .25s}
.wr-prog-text{font-size:13.5px;color:var(--muted);margin:0 0 10px}

/* 본문은 이제 문단·제목 엘리먼트로 그려진다(pre-wrap 아님 — wikiRenderBlocks 참고) */
.wr-body{line-height:1.85;font-size:15.5px;margin:14px 0;color:var(--ink)}
.wr-body p{margin:0 0 13px}
.wr-body .wr-h{margin:26px 0 10px;line-height:1.4;color:var(--wr-ink);border-bottom:1px solid var(--wr-line);padding-bottom:6px}
.wr-body h3.wr-h{font-size:18px}
.wr-body h4.wr-h{font-size:15.5px;border-bottom:none;padding-bottom:0;color:var(--wr-muted)}
.wr-body h5.wr-h{font-size:14.5px;border-bottom:none;padding-bottom:0;color:var(--wr-muted)}
.wr-source{font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px;margin-top:16px}
.wr-next-h{font-size:15px;margin:18px 0 4px}

.wr-next-btn{display:block;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin-top:9px;cursor:pointer;font:inherit;color:var(--ink)}
.wr-next-btn:hover{border-color:var(--wr-accent)}
.wr-next-btn b{display:block}
.wr-next-btn .wr-tag{font-size:11.5px;color:var(--wr-muted);display:block;margin-top:4px;line-height:1.55}
/* 안 받은 갈래 — 점선으로 "여기가 경계"임을 시각적으로 알린다 */
.wr-next-btn.missing{opacity:.62;border-style:dashed;cursor:default}
.wr-next-btn.missing:hover{border-color:var(--line)}

.wr-trail-list{padding-left:20px;line-height:2}
.wr-trail-list li{color:var(--ink)}

.wr-bundles{margin-top:18px}
.wr-bundle{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:9px}
.wr-bundle-open{flex:1;text-align:left;border:none;background:none;cursor:pointer;font:inherit;color:var(--ink);padding:0}
.wr-bundle-del{font:inherit;font-size:13px;background:none;border:1px solid var(--line);border-radius:8px;padding:6px 10px;cursor:pointer;color:var(--muted)}
.wr-bundle-del:hover{border-color:var(--bad);color:var(--bad)}