/* 타로의 그림 열쇠 — 화면.
   index.html 안 인라인 <style> 이던 것을 밖으로 뺐다(우리 사이트 CSP·캐시 정책).
   반입하며 고친 것: 좌측 컬러 보더 강조 제거 · 14px 미만 본문 3곳 · 본문 글꼴을 사이트 글꼴로. */
:root { --ink:#171718; --paper:#f5f0e6; --panel:#fffdf8; --line:#d8ccba; --gold:#9b6a2f; --navy:#202936; --muted:#6d685f; --shadow:0 16px 50px rgba(40,29,14,.10); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif; line-height:1.75; }
a { color:inherit; }
.hero { color:#f8f0df; background:radial-gradient(circle at 85% 10%,#4d3b28 0,transparent 32%),linear-gradient(135deg,#11151d,#252d38); padding:64px max(28px,calc((100vw - 1240px)/2)); border-bottom:5px solid var(--gold); }
.eyebrow { margin:0 0 12px; color:#d9b67f; letter-spacing:.16em; text-transform:uppercase; font-size:.875rem; font-weight:700; }
.hero h1 { max-width:900px; margin:0; font-family:Georgia,"Noto Serif KR",serif; font-size:clamp(2.3rem,6vw,5.2rem); font-weight:500; line-height:1.06; letter-spacing:-.035em; }
.hero .subtitle { max-width:760px; margin:22px 0 0; color:#d9d8d4; font-size:1.05rem; }
.stats { display:flex; flex-wrap:wrap; gap:9px; margin-top:28px; }
.stat { border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:7px 13px; color:#f7ead5; background:rgba(255,255,255,.06); font-size:.88rem; }
.controls-wrap { position:sticky; top:0; z-index:10; padding:12px max(18px,calc((100vw - 1240px)/2)); background:rgba(245,240,230,.94); border-bottom:1px solid var(--line); backdrop-filter:blur(16px); }
.controls { display:flex; gap:10px; align-items:center; max-width:1240px; margin:auto; }
.search { min-width:0; flex:1; border:1px solid #bfb19c; border-radius:10px; padding:11px 13px; color:var(--ink); background:#fffdfa; font:inherit; line-height:1.2; }
.mode { display:flex; gap:4px; border:1px solid #bfb19c; border-radius:10px; padding:3px; background:#fffdfa; }
.mode button { border:0; border-radius:7px; padding:8px 10px; background:transparent; color:#5e5549; cursor:pointer; font:inherit; font-size:.83rem; }
.mode button[aria-pressed="true"] { color:white; background:var(--navy); }
.result-count { min-width:76px; color:var(--muted); text-align:right; font-size:.83rem; }
.page { display:grid; grid-template-columns:280px minmax(0,1fr); gap:34px; max-width:1240px; margin:0 auto; padding:36px 20px 96px; }
.toc { position:sticky; top:82px; align-self:start; max-height:calc(100vh - 102px); overflow:auto; padding:18px 13px 24px; border-right:1px solid var(--line); }
.toc > h2 { margin:0 0 16px; font-family:Georgia,"Noto Serif KR",serif; font-size:1.25rem; }
.toc-group h2 { margin:21px 8px 7px; color:var(--gold); letter-spacing:.1em; font-size:.75rem; text-transform:uppercase; }
.toc-link { display:grid; grid-template-columns:36px 1fr; gap:4px; padding:7px 8px; border-radius:7px; text-decoration:none; font-size:.77rem; line-height:1.35; color:#504a41; }
.toc-link:hover { color:var(--ink); background:#ece3d4; }
.toc-link span { color:#9b8b72; font-variant-numeric:tabular-nums; }
.content { min-width:0; }
.reading-unit { scroll-margin-top:84px; margin:0 0 28px; padding:clamp(23px,4vw,48px); border:1px solid var(--line); border-radius:16px; background:var(--panel); box-shadow:var(--shadow); }
.unit-header { display:grid; grid-template-columns:48px 1fr; gap:14px; align-items:start; margin-bottom:28px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.ordinal { display:grid; place-items:center; width:43px; height:31px; border-radius:999px; color:white; background:var(--gold); font-size:.72rem; font-weight:800; font-variant-numeric:tabular-nums; }
.unit-header h2 { margin:-4px 0 2px; color:var(--navy); font-family:Georgia,"Noto Serif KR",serif; font-size:clamp(1.35rem,3vw,2rem); line-height:1.35; }
.heading-en { margin:0; color:var(--muted); font-family:Georgia,serif; font-size:.9rem; line-height:1.45; }
.language-label { margin-bottom:14px; color:var(--gold); letter-spacing:.1em; text-transform:uppercase; font-size:.72rem; font-weight:800; }
.translation p, .source-body p { margin:0 0 1em; }
.translation p:last-child, .source-body p:last-child { margin-bottom:0; }
.translation { font-size:1.01rem; }
.source { margin-top:26px; border-top:1px solid var(--line); }
.source summary { cursor:pointer; padding:16px 0 4px; color:#514c45; font-size:.86rem; font-weight:700; }
.source-body { margin-top:12px; padding:20px; border-radius:10px; color:#4c4945; background:#f0ece4; font-family:Georgia,"Noto Serif",serif; font-size:.9rem; line-height:1.62; }
.source-footnote { margin-left:1.2rem !important; color:#625c54; font-size:.875rem; }
.figure { margin:0 auto 28px; text-align:center; }
.figure img { display:block; width:auto; max-width:100%; height:auto; margin:auto; border-radius:6px; background:white; box-shadow:0 10px 32px rgba(32,24,13,.16); }
.card-plate img { max-height:470px; }
.diagram img { max-height:520px; }
figcaption { margin-top:9px; color:var(--muted); font-size:.875rem; line-height:1.5; }
.editor-note { margin:18px 0 0; padding:14px 16px; border:1px solid #d9c39a; border-radius:8px; color:#504a42; background:#f7f0e2; font-size:.9375rem; }
.empty { display:none; padding:70px 20px; color:var(--muted); text-align:center; }
.provenance { max-width:1240px; margin:0 auto 70px; padding:0 20px; color:#575147; font-size:.875rem; }
.provenance-inner { padding:24px; border:1px solid var(--line); border-radius:14px; background:#ebe1d1; }
body.mode-ko .source { display:none; }
body.mode-en .translation, body.mode-en .editor-note { display:none; }
body.mode-en .source { border-top:0; margin-top:0; }
body.mode-en .source summary { display:none; }
body.mode-en .source-body { margin-top:0; }
[hidden] { display:none !important; }
@media (max-width:900px) { .page { grid-template-columns:1fr; } .toc { position:static; max-height:280px; border:1px solid var(--line); border-radius:12px; background:#efe6d7; } }
@media (max-width:620px) { .hero { padding:48px 22px; } .controls { align-items:stretch; flex-wrap:wrap; } .search { flex-basis:100%; } .result-count { margin-left:auto; align-self:center; } .page { padding:22px 12px 70px; } .reading-unit { border-radius:12px; } .unit-header { grid-template-columns:1fr; } }
@media print { .hero { color:black; background:white; border-bottom:1px solid #777; } .controls-wrap,.toc { display:none; } .page { display:block; max-width:none; padding:0; } .reading-unit { break-inside:avoid; box-shadow:none; } .source { display:block !important; } }
  
.toc-link[aria-current="page"] { color:var(--ink); background:#e8decd; font-weight:700; }
.content-status { margin:0; padding:70px 20px; color:var(--muted); text-align:center; }
.unit-nav { display:grid; grid-template-columns:1fr auto 1fr; gap:10px; margin-top:22px; }
.unit-nav a, .unit-nav span { display:flex; align-items:center; min-height:48px; padding:9px 12px; border:1px solid var(--line); border-radius:9px; color:#504a41; background:#faf6ee; text-decoration:none; font-size:.82rem; line-height:1.35; }
.unit-nav .next { justify-content:flex-end; text-align:right; }
.unit-nav .index { justify-content:center; }
.unit-nav .disabled { visibility:hidden; }
@media (max-width:620px) { .unit-nav { grid-template-columns:1fr 1fr; } .unit-nav .index { grid-column:1 / -1; grid-row:1; } }

/* 본 사이트로 나가는 길 — 정적으로 얹은 페이지라 여기밖에 둘 자리가 없다 */
.site-nav { display:flex; flex-wrap:wrap; justify-content:center; gap:18px; margin-top:14px; }
.site-nav a { color:var(--gold); text-decoration:none; font-weight:700; }
.site-nav a:hover { text-decoration:underline; }

/* 쪽 페이지에서는 히어로 제목이 h1 이 아니다(쪽의 h1 은 그 쪽의 주제여야 한다) */
.hero .hero-title { max-width:900px; margin:0; font-family:Georgia,"Noto Serif KR",serif; font-size:clamp(2.3rem,6vw,5.2rem); font-weight:500; line-height:1.06; letter-spacing:-.035em; }
.unit-header h1 { margin:0; font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.25; letter-spacing:-.02em; }

/* 이북으로 가는 길 */
.hero-actions { margin:22px 0 0; }
.to-book {
  display:inline-block; padding:11px 20px; border:1px solid rgba(255,255,255,.34); border-radius:999px;
  color:#f8f0df; background:rgba(255,255,255,.08); text-decoration:none; font-weight:700;
}
.to-book:hover { background:rgba(255,255,255,.16); }