/* 2026 띠별운세 서브앱 — 다크 미술관/족자 컨셉(확정 디자인).
   결제앱(tokens/components.css)과 독립된 자체 스타일시트. 인라인 style 미사용. */

:root{
  --bg:#101418;
  --bg-2:#15110d;
  --panel:#1a1712;
  --panel-2:#211c15;
  --line:rgba(200,162,75,.22);
  --line-strong:rgba(212,175,55,.42);
  --ink:#e9e3d8;
  --ink-soft:#bdb4a3;
  --ink-faint:#8a8170;
  --gold:#d4af37;
  --gold-2:#c8a24b;
  --gold-deep:#a8842f;
  --seal:#9c3b2e;
  --shadow:0 18px 50px rgba(0,0,0,.55);
  --frame-r:14px;
  --serif:"Noto Serif KR","Nanum Myeongjo","Batang",serif;
  --sans:"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --read:0;
}

/* Noto Serif KR — 이미 self-host(public/fonts) + CSP 'self'. tokens.css 와 동일 woff2 재사용. */
@font-face{ font-family:'Noto Serif KR'; font-style:normal; font-weight:400; font-display:swap; src:url('/unse/fonts/noto-serif-kr-latin-400.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'Noto Serif KR'; font-style:normal; font-weight:600; font-display:swap; src:url('/unse/fonts/noto-serif-kr-latin-600.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'Noto Serif KR'; font-style:normal; font-weight:400; font-display:swap; src:url('/unse/fonts/noto-serif-kr-korean-400.woff2') format('woff2'); unicode-range:U+1100-11FF,U+3000-309F,U+3130-318F,U+A960-A97F,U+AC00-D7AF,U+D7B0-D7FF,U+4E00-9FFF,U+3400-4DBF,U+FF00-FFEF; }
@font-face{ font-family:'Noto Serif KR'; font-style:normal; font-weight:600; font-display:swap; src:url('/unse/fonts/noto-serif-kr-korean-600.woff2') format('woff2'); unicode-range:U+1100-11FF,U+3000-309F,U+3130-318F,U+A960-A97F,U+AC00-D7AF,U+D7B0-D7FF,U+4E00-9FFF,U+3400-4DBF,U+FF00-FFEF; }

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 50% -8%, rgba(200,162,75,.10), transparent 60%),
    radial-gradient(900px 600px at 88% 6%, rgba(70,90,120,.14), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  background-attachment:fixed;
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  line-height:1.7;
  letter-spacing:.01em;
  word-break:keep-all;
}
.serif{ font-family:"Apple Garamond","Times New Roman","Nanum Myeongjo","Batang",serif; }
.myeongjo{ font-family:"Nanum Myeongjo","Batang",serif; }
a{ color:inherit; }
img{ display:block; max-width:100%; }
picture{ display:contents; }
p{ margin:0 0 .85em; }

/* 시각적 숨김(스크린리더 전용) */
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }

.wrap{
  margin:0 auto;
  padding:18px 18px max(72px, env(safe-area-inset-bottom));
}
.zlist .wrap{ max-width:1200px; }
.zdetail .wrap, .z404 .wrap{ max-width:920px; }

/* topbar / brand */
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.gallery-link{
  display:inline-flex; align-items:center; gap:7px;
  min-height:44px;
  font-size:.82rem; letter-spacing:.04em; text-decoration:none;
  color:var(--ink-soft); padding:7px 12px; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.015);
  transition:color .15s ease, border-color .15s ease;
}
.gallery-link:hover{ color:var(--gold); border-color:var(--line-strong); }
.gallery-link:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.brand{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin:16px 0 8px; flex-wrap:wrap; }
.brand .mark{ display:inline-flex; align-items:center; gap:11px; font-size:.96rem; letter-spacing:.06em; color:var(--ink-soft); text-decoration:none; }
.brand .mark .glyph{
  width:34px; height:34px; flex:0 0 auto; border-radius:9px;
  display:grid; place-items:center;
  background:radial-gradient(circle at 35% 25%, rgba(212,175,55,.30), rgba(168,132,47,.08));
  border:1px solid var(--line-strong);
  color:var(--gold); font-size:1.05rem;
  box-shadow:inset 0 0 12px rgba(212,175,55,.16);
}
.brand .mark b{ color:var(--ink); font-weight:600; }
.brand .mark span{ color:var(--gold-2); }
.brand-mini{ display:inline-flex; align-items:center; gap:9px; font-size:.86rem; color:var(--ink-soft); letter-spacing:.05em; text-decoration:none; }
.brand-mini b{ color:var(--ink); font-weight:600; }
.brand-mini .g{ color:var(--gold-2); }

/* shared bits */
.eyebrow{ display:inline-block; font-size:.74rem; letter-spacing:.3em; color:var(--gold-2); text-transform:uppercase; margin:6px 0 10px; }
.sample-tag{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; letter-spacing:.03em; color:var(--ink-faint);
  padding:7px 14px; border-radius:999px;
  border:1px dashed var(--line-strong); background:rgba(0,0,0,.18);
}
.sample-tag b{ color:var(--gold-2); font-weight:600; }
.sec-head{ display:flex; align-items:baseline; gap:12px; margin:6px 4px 18px; }
.sec-head h2{ margin:0; font-weight:600; font-size:1.2rem; color:var(--ink); letter-spacing:.02em; text-wrap:balance; }
.sec-head .ko{ color:var(--ink-faint); font-size:.85rem; }
.sec-head::after{ content:""; flex:1; height:1px; align-self:center; background:linear-gradient(90deg, var(--line-strong), transparent); }

/* ===== LIST hero ===== */
.zlist .hero{
  margin:14px 0 30px; padding:38px 26px 34px;
  text-align:center; position:relative;
  border:1px solid var(--line); border-radius:20px;
  background:
    radial-gradient(620px 240px at 50% 0%, rgba(212,175,55,.10), transparent 70%),
    linear-gradient(180deg, rgba(33,28,21,.55), rgba(26,23,18,.30));
  box-shadow:var(--shadow);
  overflow:hidden;
}
.zlist .hero::before{
  content:""; position:absolute; left:24px; right:24px; top:14px;
  height:1px; background:linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
.zlist .hero h1{
  margin:0; font-weight:600; line-height:1.14;
  font-size:clamp(2.05rem, 7vw, 3.5rem); color:#f4efe4;
  text-shadow:0 2px 30px rgba(212,175,55,.14); text-wrap:balance;
}
.zlist .hero h1 .yr{ color:var(--gold); }
.zlist .hero .lead{ max-width:620px; margin:16px auto 0; color:var(--ink-soft); font-size:1.02rem; line-height:1.7; }
.hanja-row{ margin:20px auto 0; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; max-width:560px; }
.hanja-row span{ font-size:.82rem; color:var(--gold-2); opacity:.62; font-family:"Nanum Myeongjo","Batang",serif; }

/* ===== LIST grid of frames ===== */
.grid{
  display:grid; gap:clamp(16px, 2.2vw, 20px);
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  content-visibility:auto; contain-intrinsic-size:0 760px;
}
.frame{
  text-decoration:none; color:inherit; display:flex; flex-direction:column;
  border-radius:var(--frame-r); overflow:hidden;
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border:1px solid var(--line);
  box-shadow:0 10px 26px rgba(0,0,0,.42);
  transition:transform .18s ease, box-shadow .22s ease, border-color .2s ease;
  position:relative;
}
.frame:hover, .frame:focus-visible{
  transform:translateY(-4px); border-color:var(--line-strong);
  box-shadow:0 18px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(212,175,55,.16); outline:none;
}
.frame:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.plate{
  margin:10px 10px 0; padding:9px; border-radius:10px;
  background:radial-gradient(120% 90% at 50% 0%, rgba(212,175,55,.12), transparent 60%), #0c0a07;
  border:1px solid var(--line-strong);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5), inset 0 0 26px rgba(212,175,55,.10), 0 0 24px rgba(212,175,55,.05);
  position:relative;
}
.plate::after{ content:""; position:absolute; inset:9px; border-radius:5px; box-shadow:0 0 0 1px rgba(212,175,55,.30), 0 0 18px rgba(212,175,55,.10); pointer-events:none; }
.plate img{ width:100%; height:auto; aspect-ratio:384/341; object-fit:cover; border-radius:4px; display:block; filter:saturate(1.02) contrast(1.02); }
.caption{ padding:11px 12px 13px; text-align:center; display:flex; align-items:center; justify-content:center; gap:8px; }
.caption .name{ font-size:.95rem; color:var(--ink); font-weight:600; }
.caption .ji{ font-family:"Nanum Myeongjo","Batang",serif; font-size:.92rem; color:var(--gold-2); opacity:.85; }

/* ============================================================
   ===== DETAIL — 모바일 퍼스트 "古書/두루마리 미술관" (작업2 재설계) =====
   base=모바일, 데스크탑은 min-width 확장. 컴포넌트 클래스는 ContentStructurer 출력.
   ============================================================ */
.zdetail h1, .zdetail h2, .zdetail h3, .zdetail h4{ font-family:var(--serif); font-weight:700; }

/* 스크롤 진행 게이지(장식) — JS 가 CSSOM 으로 --read 주입(인라인 style 아님) */
.read-progress{ position:fixed; left:0; top:0; height:2px; z-index:50; width:calc(var(--read) * 100%); background:linear-gradient(90deg, var(--gold-deep), var(--gold)); box-shadow:0 0 8px rgba(212,175,55,.5); transition:width .12s linear; pointer-events:none; }

/* HERO (모바일: copy-first + 와이드 배너) */
.zdetail .hero{ position:relative; display:grid; gap:18px; align-items:center; grid-template-columns:1fr; margin:8px 0 24px; padding:22px 18px; border:1px solid var(--line); border-radius:20px; background:radial-gradient(700px 280px at 22% 0%, rgba(212,175,55,.12), transparent 70%), linear-gradient(180deg, rgba(33,28,21,.62), rgba(20,16,12,.42)); box-shadow:var(--shadow); overflow:hidden; }
.zdetail .hero::before{ content:""; position:absolute; left:20px; right:20px; top:12px; height:1px; background:linear-gradient(90deg,transparent,var(--line-strong),transparent); }
.hero-copy{ order:0; }
.hero-art{ order:1; }
.hero-art .frame{ margin:0; padding:9px; border-radius:14px; position:relative; background:radial-gradient(140% 120% at 50% -10%, rgba(212,175,55,.16), transparent 60%), #0b0907; border:1px solid var(--line-strong); box-shadow:inset 0 0 0 1px rgba(0,0,0,.55), inset 0 0 26px rgba(212,175,55,.08); }
.hero-art .frame::after{ content:""; position:absolute; inset:9px; border-radius:8px; box-shadow:0 0 0 1px rgba(212,175,55,.32), 0 0 22px rgba(212,175,55,.1); pointer-events:none; }
.hero-art .frame img{ width:100%; height:auto; border-radius:7px; aspect-ratio:16/9; object-fit:cover; object-position:50% 28%; filter:saturate(1.05) contrast(1.04); }
.zdetail .hero h1{ margin:0; font-weight:700; line-height:1.18; color:#f6efe2; text-wrap:balance; font-size:clamp(1.9rem,7vw,2.6rem); text-shadow:0 2px 30px rgba(212,175,55,.16); }
.zdetail .hero h1 .h1-main{ display:block; }
.zdetail .hero h1 .h1-years{ display:block; margin-top:9px; font-family:var(--sans); font-weight:400; font-size:.84rem; letter-spacing:.03em; color:var(--gold-2); opacity:.82; }
.hero-lead{ margin:14px 0 0; color:var(--ink-soft); font-size:.98rem; font-family:var(--serif); }

/* 사주풀이 CTA — 총운(첫 섹션) 위 유료 카테고리 안내 */
.saju-cta{ margin:0 0 20px; padding:18px; border:1px solid var(--line-strong); border-radius:16px; background:radial-gradient(420px 160px at 18% 0%, rgba(212,175,55,.16), transparent 70%), linear-gradient(180deg, rgba(40,33,22,.6), rgba(22,18,13,.42)); box-shadow:0 12px 34px rgba(0,0,0,.3); }
.saju-cta-head{ display:flex; flex-direction:column; gap:4px; margin:0 0 14px; }
.saju-cta-eyebrow{ font-size:.82rem; letter-spacing:.03em; color:var(--ink-soft); }
.saju-cta-title{ font-family:var(--serif); font-weight:700; font-size:clamp(1.18rem,4.6vw,1.42rem); color:#f4efe3; letter-spacing:.01em; text-wrap:balance; }
.saju-cta-links{ display:grid; grid-template-columns:1fr; gap:9px; }
.saju-cta-link{ display:flex; align-items:center; gap:10px; min-height:48px; padding:0 16px; border:1px solid var(--line); border-radius:12px; background:rgba(0,0,0,.22); color:var(--ink); text-decoration:none; font-size:.96rem; transition:border-color .18s, background .18s, color .18s, transform .18s; }
.saju-cta-link:hover, .saju-cta-link:active{ border-color:var(--gold); background:rgba(212,175,55,.08); color:var(--gold); transform:translateY(-2px); }
.saju-cta-link:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.saju-cta-label{ flex:1 1 auto; font-family:var(--serif); }
.saju-cta-arrow{ flex:0 0 auto; font-size:1.05rem; color:var(--gold-2); }
@media(min-width:560px){ .saju-cta-links{ grid-template-columns:1fr 1fr; gap:10px; } }

/* LAYOUT + 하단 점프바(.toc) */
.layout{ display:block; }
.flow{ min-width:0; padding-bottom:60px; counter-reset:sec; }
.rail{ position:fixed; left:0; right:0; bottom:0; z-index:40; margin:0; pointer-events:none; }
.toc{ pointer-events:auto; display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0; border:none; border-top:1px solid var(--line-strong); border-radius:0; background:linear-gradient(180deg, rgba(13,16,20,.9), rgba(13,16,20,.98)); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 -10px 30px rgba(0,0,0,.5); padding:9px max(16px,env(safe-area-inset-left)) calc(9px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-right)); scrollbar-width:none; }
.toc::-webkit-scrollbar{ display:none; }
.toc-head{ display:none; }
.toc a{ position:relative; flex:0 0 auto; white-space:nowrap; min-height:44px; display:flex; align-items:center; gap:7px; padding:0 14px; border-radius:999px; background:rgba(0,0,0,.35); border:1px solid var(--line); color:var(--ink-soft); text-decoration:none; }
.toc a:hover, .toc a:active{ background:rgba(212,175,55,.1); color:var(--gold); }
.toc a:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.toc-ja{ display:none; }
.toc-no{ font-family:var(--serif); font-size:.74rem; color:var(--gold-deep); }
.toc-label{ font-size:.86rem; }
.toc a.is-current{ background:linear-gradient(180deg,rgba(212,175,55,.24),rgba(168,132,47,.08)); border-color:var(--line-strong); color:var(--gold); }
.toc a.is-current .toc-no{ color:var(--gold); }

/* SECTION */
.sec{ position:relative; counter-increment:sec; margin:0 0 16px; padding:20px 18px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(180deg, rgba(33,28,21,.5), rgba(24,20,15,.32)); box-shadow:0 12px 34px rgba(0,0,0,.3); scroll-margin-top:14px; }
.sec-bar{ position:relative; display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin:0 0 16px; padding-bottom:13px; border-bottom:1px solid var(--line); }
.sec-bar .seal{ flex:0 0 auto; width:38px; height:38px; border-radius:9px; display:grid; place-items:center; font-family:var(--serif); font-size:1.18rem; color:#f4ead8; background:linear-gradient(180deg, var(--seal), #8f2f23); box-shadow:0 4px 12px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.1), inset 0 -6px 14px rgba(0,0,0,.25); }
.sec-bar h2, .sec-bar .sec-label{ flex:1 1 auto; margin:0; font-family:var(--serif); font-weight:700; font-size:clamp(1.28rem,5.2vw,1.58rem); color:#f4efe3; letter-spacing:.01em; text-wrap:balance; border:none; padding:0; }
.sec-bar .en{ order:3; flex:0 0 100%; margin:2px 0 0; padding-left:50px; font-family:var(--sans); font-size:.62rem; font-weight:500; letter-spacing:.18em; color:var(--ink-faint); }
.sec-bar::before{ content:counter(sec, decimal-leading-zero); position:absolute; top:-2px; right:0; font-family:var(--serif); font-size:.72rem; letter-spacing:.12em; color:var(--gold-deep); opacity:.7; }
.sec:target .sec-bar{ animation:zLand 1.4s ease-out; }
@keyframes zLand{ 0%{ box-shadow:0 6px 22px rgba(212,175,55,0); } 30%{ box-shadow:0 0 0 1px var(--line-strong), 0 8px 26px rgba(212,175,55,.22); } 100%{ box-shadow:none; } }

/* sec-body 산문 + 하위 헤딩/리스트/표 */
.sec-body{ max-width:68ch; }
.sec-body p{ margin:0 0 .95em; color:var(--ink); font-size:1rem; line-height:1.74; }
.sec-body p:last-child{ margin-bottom:0; }
.sec.overview .sec-body p:first-of-type::first-letter{ float:left; font-family:var(--serif); font-size:3.1em; line-height:.7; padding:.02em .1em 0 0; color:var(--gold); font-weight:700; }
.sec-body h3{ margin:24px 0 10px; font-family:var(--serif); font-weight:700; font-size:1.1rem; color:var(--gold-2); }
.sec-body ul, .sec-body ol{ margin:0 0 1.1em; padding-left:1.2em; color:var(--ink); }
.sec-body li{ margin:0 0 .5em; line-height:1.7; }
.sec-body strong, .sec-body b{ color:#f3ecdd; font-weight:600; }
.sec-body blockquote{ margin:18px 0; padding:14px 18px; border-left:3px solid var(--gold-deep); background:rgba(0,0,0,.18); border-radius:0 10px 10px 0; color:var(--ink-soft); }
.sec-body table{ width:100%; border-collapse:separate; border-spacing:0; font-size:.88rem; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.sec-body th, .sec-body td{ border-bottom:1px solid var(--line); padding:9px 8px; text-align:center; white-space:nowrap; }
.sec-body th:not(:last-child), .sec-body td:not(:last-child){ border-right:1px solid var(--line); }
.sec-body tbody tr:last-child td{ border-bottom:none; }
.sec-body thead th{ background:linear-gradient(180deg,#241f17,#1d1810); color:var(--gold-2); font-family:var(--serif); font-weight:700; }
.sec-body td{ color:var(--ink-soft); }
.sec-body td:first-child{ color:#f1e9da; font-family:var(--serif); }
.sec-body tbody tr:nth-child(even){ background:rgba(255,255,255,.02); }

/* 월별 = 가로 두루마리(모바일).
   ⚠️ `.sec-body` 하위로 스코프 — classify() 가 월별 섹션에 class="sec months" 를 붙이므로
   bare `.months` 로 두면 inner 카드 래퍼뿐 아니라 SECTION 자체에도 매칭돼 섹션이 flex/grid 로
   변해 헤더·본문이 칼럼으로 쪼개진다(회귀 2026-06-02). cohorts 도 동일 스코프. */
.sec-body .months{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; margin:0 -18px; padding:2px 18px 12px; scroll-padding-left:18px; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%); mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%); }
.sec-body .months::-webkit-scrollbar{ display:none; }
.mo{ flex:0 0 86%; scroll-snap-align:start; display:flex; flex-direction:column; gap:11px; padding:16px; border:1px solid var(--line); border-radius:13px; background:rgba(0,0,0,.18); position:relative; overflow:hidden; }
.mo::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,var(--gold),transparent); opacity:.5; }
.mo-head{ display:flex; align-items:center; gap:11px; }
.mo-h{ margin:0; font-family:var(--serif); font-size:.86rem; font-weight:600; color:var(--gold-2); line-height:1.3; }
.mo-no{ flex:0 0 auto; width:46px; height:46px; border-radius:11px; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; background:radial-gradient(circle at 35% 25%, rgba(212,175,55,.26), rgba(168,132,47,.05)); border:1px solid var(--line-strong); }
.mo-no b{ font-family:var(--serif); font-size:1.28rem; color:var(--gold); }
.mo-no span{ font-size:.58rem; color:var(--ink-faint); margin-top:2px; letter-spacing:.1em; }
.mo-tx{ font-size:.95rem; color:var(--ink); line-height:1.62; }
.mo-tx p{ margin:0 0 .6em; }
.mo-tx p:last-child{ margin-bottom:0; }

/* 출생연도별 = 아코디언(<details>). `.sec-body` 스코프 이유는 위 월별 주석 참고. */
.sec-body .cohorts{ display:grid; gap:9px; grid-template-columns:1fr; }
.cohort{ border:1px solid var(--line); border-radius:13px; overflow:hidden; background:linear-gradient(180deg, rgba(38,32,23,.5), rgba(0,0,0,.18)); }
.cohort[open]{ border-color:var(--line-strong); }
.cohort-h{ list-style:none; cursor:pointer; display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:12px; padding:11px 13px; }
.cohort-h::-webkit-details-marker{ display:none; }
.cohort-h .yr{ display:flex; align-items:center; justify-content:center; padding:6px 11px; border-radius:10px; background:#0b0907; border:1px solid var(--line-strong); box-shadow:inset 0 0 16px rgba(212,175,55,.1); }
.cohort-h .yr b{ font-family:var(--serif); font-size:1.18rem; color:var(--gold); }
.cohort-label{ min-width:0; display:flex; flex-direction:column; gap:1px; }
.cohort-h3{ margin:0; font-family:var(--serif); font-size:.96rem; font-weight:600; color:#f1e9da; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cohort-label .gapja{ font-family:var(--serif); font-size:.78rem; color:var(--gold-2); }
.cohort-agept{ flex:0 0 auto; font-size:.74rem; color:var(--gold-2); padding:5px 10px; border-radius:999px; border:1px solid var(--line-strong); background:rgba(0,0,0,.25); white-space:nowrap; }
.cohort-chev{ width:20px; height:20px; position:relative; flex:0 0 auto; }
.cohort-chev::before{ content:""; position:absolute; left:4px; top:5px; width:8px; height:8px; border-right:2px solid var(--gold-deep); border-bottom:2px solid var(--gold-deep); transform:rotate(45deg); transition:transform .2s ease; }
.cohort[open] .cohort-chev::before{ transform:rotate(-135deg); top:8px; }
.cohort-tx{ padding:13px 14px 15px; border-top:1px solid var(--line); }
.cohort-tx p{ margin:0 0 .7em; font-size:.95rem; color:var(--ink-soft); line-height:1.64; }
.cohort-tx p:last-child{ margin-bottom:0; }

/* 궁합 = 요약 콜아웃 + 1열 컴팩트 행(모바일) */
.compat-summary{ display:grid; gap:12px; grid-template-columns:1fr; margin-bottom:16px; }
.cs{ position:relative; padding:16px 16px 14px; border-radius:14px; border:1px solid var(--line); background:rgba(0,0,0,.2); }
.cs.best{ border-color:rgba(212,175,55,.5); background:radial-gradient(400px 160px at 0% 0%, rgba(212,175,55,.12), transparent 70%), rgba(0,0,0,.2); }
.cs.warn{ border-color:rgba(168,58,44,.5); background:radial-gradient(400px 160px at 0% 0%, rgba(168,58,44,.14), transparent 70%), rgba(0,0,0,.2); }
.cs-tag{ display:inline-block; font-size:.72rem; padding:4px 11px; border-radius:999px; margin-bottom:8px; font-weight:700; }
.cs.best .cs-tag{ color:#1a1308; background:linear-gradient(180deg,var(--gold),var(--gold-deep)); }
.cs.warn .cs-tag{ color:#f6e6e2; background:linear-gradient(180deg,var(--seal),#8f2f23); }
.cs-h{ margin:0 0 8px; font-family:var(--serif); font-size:1.02rem; color:#f2ecdf; }
.cs p{ margin:0; font-size:.92rem; color:var(--ink-soft); line-height:1.7; }
.compat-grid{ display:grid; gap:9px; grid-template-columns:1fr; }
.pair{ position:relative; display:flex; flex-direction:row; align-items:flex-start; gap:12px; padding:11px 13px 11px 14px; border:1px solid var(--line); border-radius:12px; background:rgba(0,0,0,.18); overflow:hidden; }
.pair::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:transparent; }
.pair.best::before{ background:var(--gold); }
.pair.warn::before{ background:var(--seal); }
.pair-th{ flex:0 0 auto; width:46px; height:46px; border-radius:9px; overflow:hidden; background:#0b0907; border:1px solid var(--line-strong); }
.pair-th img{ width:100%; height:100%; object-fit:cover; }
.pair-b{ min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; font-size:.84rem; line-height:1.6; color:var(--ink-soft); }
.pair-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.pair-h{ margin:0; font-family:var(--serif); font-size:.95rem; font-weight:600; color:#f2ecdf; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rate{ flex:0 0 auto; font-size:.72rem; padding:3px 10px; border-radius:999px; font-weight:700; line-height:1; }
.rate.best{ color:#1a1308; background:linear-gradient(180deg,var(--gold),var(--gold-deep)); }
.rate.ok{ color:var(--gold-2); border:1px solid var(--line-strong); background:rgba(212,175,55,.06); }
.rate.warn{ color:#f3ddd6; background:rgba(168,58,44,.4); border:1px solid rgba(168,58,44,.6); }
.pair p{ margin:0; }

/* 삼재 = 연도 배지 리스트(무손실) */
.sec.samjae .sec-body ul{ list-style:none; margin:0 0 1em; padding:0; display:flex; gap:9px; flex-wrap:wrap; }
.sec.samjae .sec-body li{ margin:0; font-size:.86rem; color:#e6b3aa; padding:8px 14px; border-radius:10px; border:1px solid rgba(168,58,44,.42); background:rgba(168,58,44,.1); }

/* 총평 = 클로징 플로리시 */
.sec.verdict{ background:radial-gradient(640px 240px at 50% 0%, rgba(212,175,55,.1), transparent 70%), linear-gradient(180deg, rgba(33,28,21,.6), rgba(18,14,10,.5)); border-color:var(--line-strong); }
.sec.verdict .sec-body p{ font-family:var(--serif); font-size:1.04rem; line-height:1.78; color:#f1ebde; }

/* ===== DETAIL 데스크탑 확장 ===== */
@media(min-width:560px){
  .compat-summary{ grid-template-columns:1fr 1fr; }
  .compat-grid{ grid-template-columns:1fr 1fr; }
  .sec-body table{ font-size:.94rem; }
  .sec-body th, .sec-body td{ padding:13px 14px; }
  /* 월별: 모바일 가로 캐러셀 → 태블릿/PC 1칼럼 세로 스택(1행당 1개). */
  .sec-body .months{ display:grid; grid-template-columns:1fr; overflow:visible; scroll-snap-type:none; margin:0; padding:0; -webkit-mask-image:none; mask-image:none; }
  .mo{ flex-direction:column; }
}
/* 출생연도별: 1칼럼 유지(1행당 1개). base 가 이미 1fr 라 다칼럼 규칙 없음. */
@media(min-width:780px){
  .zdetail .hero{ grid-template-columns:300px 1fr; gap:38px; margin:8px 0 30px; padding:30px clamp(20px,3vw,40px); }
  .hero-copy{ order:1; }
  .hero-art{ order:0; }
  .hero-art .frame{ padding:13px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.55), inset 0 0 44px rgba(212,175,55,.1), 0 0 46px rgba(212,175,55,.06); }
  .hero-art .frame::after{ inset:13px; }
  .hero-art .frame img{ aspect-ratio:384/341; object-position:50% 50%; max-height:480px; }
  .hero-lead{ max-width:46ch; font-size:1.02rem; }
  .sec-body p{ font-size:1.02rem; line-height:1.9; margin:0 0 1.05em; }
  .sec{ padding:clamp(22px,3vw,32px) clamp(20px,3vw,32px); margin:0 0 22px; }
  .sec-bar{ flex-wrap:nowrap; margin:0 0 22px; padding-bottom:16px; gap:14px; }
  .sec-bar .seal{ width:42px; height:42px; font-size:1.32rem; }
  .sec-bar .en{ order:0; flex:0 0 auto; margin:0 0 0 auto; padding-left:0; font-size:.7rem; letter-spacing:.22em; }
  .sec-bar::before{ top:-6px; }
}
@media(min-width:940px){
  html{ scroll-padding-bottom:0; }
  .read-progress{ display:none; }
  .layout{ display:grid; grid-template-columns:200px 1fr; gap:34px; align-items:start; }
  .flow{ padding-bottom:0; }
  /* align-self:stretch — rail 을 레이아웃 행 높이(=flow 높이)만큼 늘려 sticky 가 움직일 범위를 준다.
     layout 이 align-items:start 라 기본은 rail 높이=toc 높이가 되어 sticky 가 붙지 않고 스크롤로 사라졌다. */
  .rail{ position:relative; left:auto; right:auto; bottom:auto; margin:0; pointer-events:auto; align-self:stretch; }
  .toc{ position:sticky; top:18px; flex-direction:column; gap:2px; overflow:visible; margin:0; padding:18px 14px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(180deg, rgba(33,28,21,.55), rgba(22,18,14,.4)); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 12px 34px rgba(0,0,0,.36); }
  .toc-head{ display:flex; align-items:center; gap:9px; font-family:var(--serif); font-size:.94rem; color:var(--gold-2); letter-spacing:.06em; padding:2px 6px 12px; margin-bottom:8px; border-bottom:1px solid var(--line); }
  .toc-head .toc-ja{ display:inline; font-size:1.1rem; color:var(--gold); }
  .toc a{ min-height:0; padding:9px 8px; border-radius:9px; background:none; border:none; gap:10px; align-items:flex-start; white-space:normal; }
  .toc a:hover{ background:rgba(212,175,55,.08); transform:translateX(3px); }
  .toc a .toc-ja{ display:inline; flex:0 0 auto; margin-top:1px; font-family:var(--serif); color:var(--ink-faint); font-size:.84rem; }
  /* 라벨이 좁은 사이드바(200px)를 넘으면 잘리지 않고 최대 2줄로 줄바꿈(말줄임). */
  .toc a .toc-label{ min-width:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.3; }
  .toc a .toc-no{ flex:0 0 auto; margin-top:1px; }
  .toc a.is-current{ background:rgba(212,175,55,.1); }
  .toc a.is-current::before{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:2px; border-radius:2px; background:var(--gold); }

  /* PC 본문 폭 확장(920→1120). 산문은 sec-body 68ch 로 유지하고, 1칼럼 그리드(월별/출생연도별)만
     cap 을 풀어 넓은 카드로 전체 폭을 쓰게 한다. */
  .zdetail .wrap{ max-width:1120px; }
  .sec.months .sec-body, .sec.cohorts .sec-body{ max-width:none; }
}
@media(min-width:1140px){ .compat-grid{ grid-template-columns:1fr 1fr 1fr; } }

/* 준비 중(콘텐츠 미도착) */
.nocontent{
  margin:0 0 18px; padding:40px 26px; text-align:center; border-radius:16px;
  border:1px dashed var(--line-strong);
  background:linear-gradient(180deg, rgba(33,28,21,.4), rgba(26,23,18,.28));
}
.nocontent h2{ margin:0 0 10px; font-size:1.2rem; color:#f2ecdf; font-weight:600; }
.nocontent p{ margin:0 auto; max-width:520px; color:var(--ink-soft); }

/* ===== zodiac nav strip (detail) ===== */
.znav{ margin:34px 0 0; }
.zgrid{ display:grid; gap:clamp(10px, 1.6vw, 12px); grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); }
@media(max-width:559px){
  .zgrid{ display:flex; grid-template-columns:none; overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; padding-bottom:6px; }
  .zgrid .zchip{ flex:0 0 44%; scroll-snap-align:start; }
}
.zchip{
  text-decoration:none; color:inherit; text-align:center; min-height:44px;
  border:1px solid var(--line); border-radius:11px; overflow:hidden;
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  transition:transform .16s ease, border-color .18s ease, box-shadow .18s ease;
}
.zchip:hover, .zchip:focus-visible{ transform:translateY(-3px); border-color:var(--line-strong); box-shadow:0 12px 26px rgba(0,0,0,.5); outline:none; }
.zchip:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.zchip .mini{ margin:7px 7px 0; padding:5px; border-radius:7px; background:#0c0a07; border:1px solid var(--line-strong); }
.zchip .mini img{ width:100%; height:auto; aspect-ratio:384/341; object-fit:cover; border-radius:3px; }
.zchip .lab{ padding:7px 4px 9px; font-size:.78rem; color:var(--ink-soft); display:flex; align-items:center; justify-content:center; gap:5px; }
.zchip .lab .ji{ font-family:"Nanum Myeongjo","Batang",serif; color:var(--gold-2); opacity:.8; }
.zchip.cur{ border-color:var(--gold); }
.zchip.cur .lab{ color:var(--gold); }
.zchip.cur .mini{ box-shadow:inset 0 0 22px rgba(212,175,55,.22); }

/* bottom links */
.bottom-links{ margin:34px 0 0; padding-bottom:max(0px, env(safe-area-inset-bottom)); display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; min-height:44px;
  font-size:.9rem; font-weight:600; letter-spacing:.02em; padding:12px 20px; border-radius:999px;
  border:1px solid var(--line-strong); color:var(--ink); background:rgba(0,0,0,.2);
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.btn:hover{ color:var(--gold); border-color:var(--gold); }
.btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.btn.primary{ color:#1a1712; background:linear-gradient(180deg, var(--gold), var(--gold-deep)); border-color:var(--gold); }
.btn.primary:hover{ color:#1a1712; filter:brightness(1.06); }

footer.foot{ margin-top:42px; padding-top:20px; color:var(--ink-faint); font-size:.83rem; line-height:1.7; text-align:center; border-top:1px solid var(--line); }
footer.foot b{ color:var(--ink-soft); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .frame:hover, .frame:focus-visible, .zchip:hover, .zchip:focus-visible{ transform:none; }
}