/* 사주백수 확장 컴포넌트 v5 — style.css 다음에 로드. 토큰·모서리·색은 style.css를 그대로 따른다.
   규칙: border-radius 0, 그라디언트 0, 신규 색 0, 표는 가로 구분선만, 강조 면은 표당 1행. */

/* ── 줄바꿈 — 뜻 단위로 끊고, 마지막 줄에 외톨이 어절을 남기지 않는다 ── */
p.sub,a.test-card .d,.quip,.sec p,.label-hero .big,.label-hero .sub2,
.duo-row p,.epitaph,table.spec td,.notice,.daymark .d{word-break:keep-all;text-wrap:pretty}

/* ── 스펙표 (나 사용설명서) ───────────────────────────── */
table.spec{width:100%;margin-top:16px;border-collapse:collapse;table-layout:fixed;border-top:2px solid var(--navy)}
table.spec th,table.spec td{padding:14px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;word-break:keep-all}
table.spec th{width:96px;padding-right:14px;color:var(--navy);font-family:"Gowun Batang",serif;font-size:13px;font-weight:700;letter-spacing:.02em;line-height:1.5}
table.spec td{color:var(--ink);font-size:14px;line-height:1.68}
table.spec tr.mark th,table.spec tr.mark td{padding-right:12px;padding-left:12px;background:var(--ivory)}
table.spec tr.mark th{width:108px}
table.spec tr:last-child th,table.spec tr:last-child td{border-bottom:2px solid var(--navy)}

/* ── 2축 게이지 (플렉스 vs 존버) ─────────────────────── */
.duo{margin-top:16px;border-top:2px solid var(--navy)}
.duo-row{padding:18px 0;border-bottom:1px solid var(--line)}
.duo-row:last-child{border-bottom:2px solid var(--navy)}
.duo-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.duo-h span{color:var(--navy);font-family:"Gowun Batang",serif;font-size:16px;font-weight:700}
.duo-h b{color:var(--navy);font-family:"Gowun Batang",serif;font-size:30px;font-weight:700;line-height:1.1}
.duo-row.lead .duo-h b{color:var(--gold)}
.duo-bar{height:10px;margin-top:11px;border:1px solid var(--line)}
.duo-bar i{display:block;width:0;height:100%;background:var(--navy);transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.duo-row.lead .duo-bar{border-color:var(--navy)}
.duo-row.lead .duo-bar i{background:var(--gold)}
.duo-row p{margin-top:11px;color:var(--ink);font-size:14px;line-height:1.68;word-break:keep-all}

/* ── 연도 칩 (돈 붙는 해) ───────────────────────────── */
.years{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.years .yr{display:inline-block;padding:9px 13px;border:1px solid var(--navy);color:var(--navy);font-size:13px;white-space:nowrap}
.years .yr b{color:var(--gold);font-family:"Gowun Batang",serif;font-size:19px;font-weight:700}
.years .yr i{font-style:normal;opacity:.62}

/* ── 히어로 보조 줄 (전생 무대·직능 / 오늘 일진) ────────── */
.label-hero .sub2{max-width:360px;margin:10px auto 0;color:var(--ivory);font-size:14px;line-height:1.6;opacity:.82;word-break:keep-all}
.label-hero .seal{display:inline-block;margin-top:16px;padding:6px 12px;border:1px solid var(--gold);color:var(--gold);font-family:"Gowun Batang",serif;font-size:12px;letter-spacing:.1em}

/* ── 전생 최후 (한 줄 인용) ────────────────────────── */
.epitaph{margin-top:26px;padding:18px 16px;border-top:1px solid var(--navy);border-bottom:1px solid var(--navy);background:var(--ivory);color:var(--ink);font-family:"Gowun Batang",serif;font-size:15px;line-height:1.72;word-break:keep-all}

/* ── 순한맛·매운맛 토글 — 각진 2분할, 선택은 네이비 면(신규 강조색 없음) ── */
.spice{margin-bottom:18px}
.spice-tabs{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--navy)}
.spice-tabs button{min-height:46px;padding:12px 8px;border:0;background:#FFFFFF;color:var(--navy);cursor:pointer;font-family:"Gowun Batang",serif;font-size:15px;font-weight:700;letter-spacing:.02em;transition:background-color .14s ease,color .14s ease}
.spice-tabs button+button{border-left:1px solid var(--navy)}
.spice-tabs button:hover{background:var(--ivory)}
.spice-tabs button.on{background:var(--navy);color:var(--ivory)}
.spice-tabs button:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}
.spice-note{margin-top:8px;color:var(--ink);font-size:12px;line-height:1.6;opacity:.58;word-break:keep-all}
.spice-note.hot{color:var(--navy);opacity:.85;font-weight:700}

#r-wonguk p{margin-top:12px;color:var(--ink);font-size:15px;line-height:1.68;word-break:keep-all;text-wrap:pretty}
#r-wonguk p:first-child{margin-top:0}

/* ── 두 사람의 시그니처 (궁합) ─────────────────────── */
.sig p{margin-top:16px;color:var(--ink);font-size:15px;line-height:1.68;word-break:keep-all;text-wrap:pretty}
.sig p:first-child{margin-top:0}
.sig b{display:block;margin-bottom:4px;color:var(--navy);font-family:"Gowun Batang",serif;font-size:14px;font-weight:700}

/* 쪼개지면 안 되는 구(버튼명+조사 등)는 통째로 넘긴다 — 안티AI §4 */
.nb{white-space:nowrap}

/* ── 결과 위 안내(링크로 받은 결과) — 히어로와 붙지 않게 ─────── */
#result .notice{margin-top:6px;margin-bottom:20px}

/* ── 오늘의 운세 머리 ─────────────────────────────── */
.daymark{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:22px;padding-bottom:10px;border-bottom:2px solid var(--navy)}
.daymark .d{color:var(--navy);font-family:"Gowun Batang",serif;font-size:16px;font-weight:700}
.daymark .g{color:var(--ink);font-size:12px;opacity:.6}

/* ── 라인 배지 (허브에서 테스트 계열 구분) ──────────────── */
a.test-card .ln{display:inline-block;margin-right:7px;padding:1px 5px;border:1px solid var(--navy);color:var(--navy);font-family:"Noto Sans KR",sans-serif;font-size:10px;font-weight:700;letter-spacing:.02em;vertical-align:2px}
.tests h4{margin:26px 0 0;padding:14px 0 6px;border-bottom:1px solid var(--line);color:var(--ink);font-family:"Gowun Batang",serif;font-size:13px;font-weight:700;letter-spacing:.06em;opacity:.66}
.tests h4:first-child{margin-top:0}

@media (max-width:380px){
  table.spec th{width:84px}
  table.spec tr.mark th{width:94px}
  .duo-h b{font-size:26px}
}
@media (prefers-reduced-motion:reduce){
  .duo-bar i{transition:none}
}

/* ── 타로 챕터 (tarot.html 전용) ─────────────────────────
   신규 색 0 · border-radius 0 · 그라디언트 0. 골드는 카드와 선택 표시에만 쓴다. */

/* 모드·주제 고르기 — 순한맛 토글과 같은 각진 분할 언어 */
.tseg{display:grid;margin-top:8px;border:1px solid var(--navy)}
.tseg.c2{grid-template-columns:1fr 1fr}
.tseg.c3{grid-template-columns:1fr 1fr 1fr}
.tseg button{min-height:46px;padding:12px 6px;border:0;background:#FFFFFF;color:var(--navy);cursor:pointer;font-family:"Gowun Batang",serif;font-size:15px;font-weight:700;letter-spacing:.02em;transition:background-color .14s ease,color .14s ease}
.tseg button+button{border-left:1px solid var(--navy)}
.tseg button:hover{background:var(--ivory)}
.tseg button.on{background:var(--navy);color:var(--ivory)}
.tseg button:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}

/* 뒷면 카드 고르기 */
#pick{display:none;margin-top:12px}
#pick.on{display:block}
#pick h2{margin-top:6px;color:var(--navy);font-family:"Gowun Batang",serif;font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.4;word-break:keep-all}
.pickgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:20px}
.tback{position:relative;aspect-ratio:2/3;padding:0;border:1px solid var(--gold);background:var(--navy);cursor:pointer}
.tback::before{content:"";position:absolute;top:5px;right:5px;bottom:5px;left:5px;border:1px solid var(--gold);opacity:.5;transition:opacity .14s ease}
.tback::after{content:"";position:absolute;top:50%;left:50%;width:13px;height:13px;border:1px solid var(--gold);transform:translate(-50%,-50%) rotate(45deg)}
.tback:hover::before,.tback:focus-visible::before{opacity:1}
.tback:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.tback.on{outline:2px solid var(--gold);outline-offset:2px}
.tback .num{position:absolute;top:0;left:0;min-width:21px;padding:2px 0;background:var(--gold);color:var(--navy);font-family:"Gowun Batang",serif;font-size:12px;font-weight:700;line-height:1.3;text-align:center}
.tback:disabled{cursor:default;opacity:.34}
.pickfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-top:12px;border-top:1px solid var(--line)}
.pickfoot .cnt{color:var(--navy);font-family:"Gowun Batang",serif;font-size:14px;font-weight:700}
.pickfoot button{min-height:40px;padding:9px 14px;border:1px solid var(--navy);background:#FFFFFF;color:var(--navy);cursor:pointer;font-size:13px;font-weight:700}
.pickfoot button:hover,.pickfoot button:focus-visible{background:var(--navy);color:var(--ivory);outline:2px solid var(--navy);outline-offset:2px}

/* 카드 앞면 — 히어로 안의 네이비 면 + 골드 괘선 */
.label-hero .tframe{width:154px;margin:0 auto 18px;padding:15px 0;border:1px solid var(--gold)}
.label-hero .tframe .in{padding:13px 0;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);line-height:0}
.label-hero .tframe svg{width:74px;height:74px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);margin:0 auto 20px;border:1px solid var(--gold)}
.trio>div{padding:15px 5px 14px}
.trio>div+div{border-left:1px solid var(--gold)}
.trio .tp{color:var(--ivory);font-size:11px;letter-spacing:.06em;opacity:.7}
.trio .ta{margin:11px 0;line-height:0}
.trio .ta svg{width:50px;height:50px}
.trio .tn{color:var(--gold);font-family:"Gowun Batang",serif;font-size:14px;font-weight:700;line-height:1.4;word-break:keep-all;text-wrap:balance}

/* 자리 이름 뒤에 붙는 주제 표시 */
.sec h3 .pos{margin-left:7px;color:var(--ink);font-family:"Noto Sans KR",sans-serif;font-size:12px;font-weight:400;letter-spacing:.02em;opacity:.55}
#r-why p,#r-close p{color:var(--ink);font-size:15px;line-height:1.68;word-break:keep-all;text-wrap:pretty}

@media (max-width:380px){
  .pickgrid{gap:8px}
  .label-hero .tframe{width:138px}
  .label-hero .tframe svg{width:64px;height:64px}
  .trio>div{padding-right:3px;padding-left:3px}
  .trio .ta svg{width:42px;height:42px}
  .trio .tn{font-size:13px}
}