/* 개정38: 리포트 판면 서체. @import 는 파일 맨 앞에 있어야 유효하다 */
@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&family=Noto+Serif+KR:wght@300;400;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* 개정36: .bars::before 삭제 — 라벨은 .viz-title 요소가 들고 다닌다 */
:root {
  --bg: #12100e; --panel: #1b1815; --line: #302b26;
  --ink: #efe9e0; --muted: #9a9088; --gold: #c9a24a; --gold-dim: #8a6f31;
  --warn: #e0b062; --err: #e07a6a;
  --e-목: #6fae72; --e-화: #d1706a; --e-토: #c2a05e; --e-금: #a9b3bd; --e-수: #6a8fc4;
  --w: 34rem;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body {
  font: 16px/1.7 -apple-system, "Segoe UI", "Noto Sans KR", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}
#app { max-width: var(--w); margin: 0 auto; padding: 1.5rem 1.1rem 4rem; }
h1 { font-size: 1.6rem; line-height: 1.35; margin: 0 0 .4rem; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; margin: 0 0 .5rem; }
p { margin: 0 0 .8rem; }
b, strong { color: var(--gold); font-weight: 600; }
.muted, .hint { color: var(--muted); }
.hint { font-size: .87rem; }
.note { font-size: .87rem; color: var(--muted); border-left: 2px solid var(--line); padding-left: .7rem; }
.warn { font-size: .87rem; color: var(--warn); background: #2a2318; border-radius: .4rem; padding: .6rem .8rem; }
.error { color: var(--err); font-size: .9rem; }
.lead { color: var(--muted); }

button { font: inherit; cursor: pointer; border-radius: .55rem; transition: .12s; }
.primary { width: 100%; padding: .85rem; margin-top: 1rem; border: 0;
  background: linear-gradient(180deg, var(--gold), var(--gold-dim)); color: #1a1510; font-weight: 700; }
.primary.lg { padding: 1rem; font-size: 1.02rem; }
.primary:hover { filter: brightness(1.08); }
.ghost { padding: .6rem .9rem; background: transparent; color: var(--ink);
  border: 1px solid var(--line); }
.ghost:hover { border-color: var(--gold-dim); }
.ghost.wide { width: 100%; margin-top: .5rem; }
.ghost.sm { padding: .35rem .7rem; font-size: .85rem; }
.ghost[disabled] { opacity: .35; cursor: default; }

.points { color: var(--muted); font-size: .93rem; padding-left: 1.1rem; margin: 1rem 0 1.6rem; }
.points li { margin: .35rem 0; }

/* 퍼널 */
.bar { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--gold); transition: width .25s; }
.step-meta { display: flex; justify-content: space-between; font-size: .8rem;
  color: var(--muted); margin: .5rem 0 1.4rem; }
.step { min-height: 16rem; }
.field { width: 100%; padding: .8rem; margin: .3rem 0; background: var(--panel);
  border: 1px solid var(--line); border-radius: .55rem; color: var(--ink); font: inherit; }
.field:focus { outline: 0; border-color: var(--gold-dim); }
.row { display: flex; gap: .5rem; }
.row .n { flex: 1; min-width: 0; }
.row .cal { flex: .75; min-width: 0; }
.toggle { display: flex; gap: .5rem; margin: .6rem 0; }
.toggle-btn { flex: 1; padding: .7rem; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); }
.toggle-btn.on { border-color: var(--gold); color: var(--gold); background: #241f18; }
.check { display: block; margin: .6rem 0; font-size: .93rem; }
.label { font-size: .87rem; color: var(--muted); margin: 1rem 0 .2rem; }
select.field { appearance: auto; }

/* 이름 + 성별 — 한 줄 (2026-08-14, 벤치마킹 화면과 동일한 레이아웃) */
.row.top { align-items: flex-start; }
.row.top > .field { flex: 1; min-width: 0; margin: 0; }
.row.top > .toggle { flex: none; margin: 0 0 0 .5rem; }
.row.top > .toggle .toggle-btn { flex: none; padding: .7rem 1rem; }
.city-list { display: flex; flex-direction: column; gap: .25rem; margin-top: .3rem; }
.city { text-align: left; padding: .6rem .8rem; background: var(--panel);
  border: 1px solid var(--line); color: var(--ink); }
.city:hover { border-color: var(--gold-dim); }
.picked { font-size: .87rem; color: var(--gold); margin-top: .8rem; }
.jisi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin: .6rem 0; }
.jisi { display: flex; flex-direction: column; gap: .1rem; padding: .6rem .3rem;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink); }
.jisi span { font-size: .74rem; color: var(--muted); }
.jisi.on { border-color: var(--gold); }
.jisi.on span { color: var(--gold); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }
.chip { padding: .4rem .8rem; background: var(--panel); border: 1px solid var(--line);
  color: var(--ink); border-radius: 999px; font-size: .88rem; }
.nav { margin-top: 1rem; }

/* 결과 */
.book-head { display: flex; align-items: center; gap: .6rem; padding-bottom: .8rem;
  border-bottom: 1px solid var(--line); margin-bottom: 1.2rem; }
.ch-title { flex: 1; font-size: .9rem; color: var(--muted); }
.pager { font-size: .8rem; color: var(--muted); }
.book-nav { display: flex; gap: .5rem; margin-top: 1.6rem; }
.book-nav > * { flex: 1; }
.kicker { font-size: .75rem; letter-spacing: .18em; color: var(--gold-dim);
  text-transform: uppercase; margin-bottom: .3rem; }
.echo { background: var(--panel); border: 1px solid var(--line); border-radius: .6rem;
  padding: .9rem 1rem; margin: 1rem 0 .6rem; font-size: .93rem; }
.echo p:last-child { margin-bottom: 0; }

/* 2026-08-19(4차): "입력하신 정보" — 성별·MBTI·결혼여부·직업·태어난/사는
   도시처럼 값이 있는 것만 되비추는 박스(result.js의 inputEcho()). */
.input-echo { margin: 1rem 0 .6rem; }
.input-echo .label { font-size: .78rem; color: var(--muted); margin-bottom: .4rem; }
.input-echo-list { display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem;
  margin: 0; padding: .8rem .9rem; background: var(--panel); border: 1px solid var(--line);
  border-radius: .6rem; font-size: .86rem; }
.input-echo-list dt { color: var(--muted); }
.input-echo-list dd { margin: 0; }

.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin: 1rem 0; }
.pillar { background: var(--panel); border: 1px solid var(--line); border-radius: .5rem;
  padding: .7rem .3rem; text-align: center; }
.pillar.me { border-color: var(--gold-dim); }
.plabel { display: block; font-size: .72rem; color: var(--muted); margin-bottom: .3rem; }
.gan, .ji { display: block; font-size: 1.5rem; line-height: 1.3; }
.gan { color: var(--gold); }
.pillars.mini .gan, .pillars.mini .ji { font-size: 1.15rem; }

.bars { margin: 1rem 0; }
.bar-row { display: grid; grid-template-columns: 1.6rem 1fr 1.6rem; align-items: center;
  gap: .5rem; margin: .35rem 0; }
.br { height: .6rem; background: var(--line); border-radius: 3px; overflow: hidden; }
.bf { height: 100%; }
.bn { font-size: .8rem; color: var(--muted); text-align: right; }
.e-목 { background: var(--e-목); } .e-화 { background: var(--e-화); }
.e-토 { background: var(--e-토); } .e-금 { background: var(--e-금); }
.e-수 { background: var(--e-수); }

.kv { width: 100%; border-collapse: collapse; font-size: .89rem; margin: .5rem 0; }
.kv th, .kv td { text-align: left; padding: .4rem .2rem; border-bottom: 1px solid var(--line); }
.kv th { color: var(--muted); font-weight: 400; width: 42%; }
.basis { margin: .9rem 0; background: var(--panel); border: 1px solid var(--line);
  border-radius: .5rem; padding: .6rem .8rem; }
.basis summary { cursor: pointer; font-size: .87rem; color: var(--gold); }
.bio-list { display: flex; flex-direction: column; gap: .5rem; margin: 1rem 0; }
.biorow { display: flex; justify-content: space-between; background: var(--panel);
  border: 1px solid var(--line); border-radius: .45rem; padding: .55rem .8rem; font-size: .89rem; }
.daeun { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin: 1rem 0; }
.du { background: var(--panel); border: 1px solid var(--line); border-radius: .45rem;
  padding: .5rem .2rem; text-align: center; }
.age { display: block; font-size: .72rem; color: var(--muted); }
.gz { display: block; font-size: 1rem; color: var(--gold); }

.toc h2 { margin-bottom: 1rem; }
.toc-item { display: block; width: 100%; text-align: left; padding: .7rem .8rem;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink); margin-bottom: .3rem; }
.toc-item.on { border-color: var(--gold); color: var(--gold); }
.toc-item.locked { color: var(--muted); display: flex; justify-content: space-between; }
.lock { opacity: .8; }
.paywall .locked-list { color: var(--muted); font-size: .93rem; padding-left: 1.1rem; }
.loading, .errbox { text-align: center; padding: 3rem 0; color: var(--muted); }

@media (min-width: 40rem) { .jisi-grid { grid-template-columns: repeat(4, 1fr); } }

/* 자정을 넘는 지시 · 자시 정책 */
.hint.sub { margin-top: 1rem; }
.jasi-policy { margin-top: .8rem; }
.policy { display: block; width: 100%; text-align: left; padding: .6rem .8rem;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  margin-bottom: .35rem; }
.policy.on { border-color: var(--gold); }
.policy b { display: block; font-size: .93rem; }
.pol-desc { display: block; font-size: .78rem; color: var(--muted); margin: .1rem 0 .25rem; }
.pol-result { display: block; font-size: .95rem; color: var(--gold); letter-spacing: .06em; }

/* 관계 묶음 */
.rel-group { background: var(--panel); border: 1px solid var(--line); border-radius: .5rem;
  padding: .6rem .8rem; margin-bottom: .4rem; }
.rel-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.rel-type { color: var(--gold); font-weight: 600; }
.rel-chars { font-size: 1.05rem; letter-spacing: .1em; }
.rel-where { font-size: .82rem; color: var(--muted); flex: 1; }
.rel-count { font-size: .78rem; color: var(--muted); }
.rel-detail { font-size: .8rem; color: var(--muted); margin-top: .35rem;
  padding-top: .35rem; border-top: 1px solid var(--line); }

.reading { margin: 1rem 0; }
.reading p { line-height: 1.85; }
.sub-h { font-size: .95rem; color: var(--muted); margin: 1.4rem 0 .4rem;
  padding-top: .8rem; border-top: 1px solid var(--line); }

/* 상품 목록 · 상세 */
.site-head { margin-bottom: 1.4rem; }
.brand { font-size: 1.3rem; letter-spacing: -.01em; margin: 0; }
.brand-sub { color: var(--muted); font-size: .88rem; margin: .2rem 0 0; }
.cats { display: flex; gap: .4rem; margin-bottom: 1rem; flex-wrap: wrap; }
.cat { padding: .45rem .85rem; background: var(--panel); border: 1px solid var(--line);
  color: var(--muted); font-size: .9rem; }
.cat.on { border-color: var(--gold); color: var(--gold); }
.cards { display: flex; flex-direction: column; gap: .5rem; }
.card { display: flex; flex-direction: column; gap: .3rem; text-align: left;
  padding: .85rem 1rem; background: var(--panel); border: 1px solid var(--line);
  color: var(--ink); }
.card:hover:not(.soon) { border-color: var(--gold-dim); }
.card.soon { opacity: .5; cursor: default; }
.card-name { font-weight: 600; }
.card-lead { font-size: .85rem; color: var(--muted); line-height: 1.5; }
.card-foot { display: flex; justify-content: space-between; align-items: baseline;
  margin-top: .2rem; }
.card-price { color: var(--gold); font-size: .92rem; }
.card-soon { color: var(--muted); font-size: .82rem; }
.card-by { font-size: .8rem; color: var(--muted); }
.card-by.draft { font-style: italic; opacity: .7; }

/* 무료운세 — 이름만 적힌 작은 칩. 15종을 큰 카드로 늘어놓지 않는다 */
.cards-compact { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip-card { padding: .5rem .85rem; background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; color: var(--ink); font-size: .88rem; cursor: pointer; }
.chip-card:hover:not(.soon) { border-color: var(--gold-dim); }
.chip-card.soon { opacity: .45; cursor: default; }
.chip-soon { margin-left: .4rem; font-size: .75rem; color: var(--muted); }

.product .back { margin-bottom: 1rem; }
.p-name { font-size: 1.45rem; margin: 0 0 .8rem; }
.p-persona { display: flex; gap: .7rem; align-items: center; padding: .7rem .9rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: .5rem;
  margin-bottom: .9rem; }
.p-avatar { width: 2.4rem; height: 2.4rem; border-radius: 50%; flex: none;
  background: linear-gradient(160deg, var(--gold), var(--gold-dim));
  color: #1a1510; display: grid; place-items: center; font-weight: 700; font-size: 1.1rem; }
.p-persona-name { font-weight: 600; font-size: .95rem; }
.p-persona-tag { font-size: .82rem; color: var(--muted); }
.p-length { font-size: .85rem; color: var(--gold-dim); margin-bottom: .8rem; }
.p-lead { line-height: 1.75; }
.p-body { color: var(--muted); font-size: .93rem; line-height: 1.8; }
.p-h { font-size: 1rem; margin: 1.6rem 0 .5rem; padding-top: 1rem;
  border-top: 1px solid var(--line); }
.p-sections { list-style: none; padding: 0; margin: 0; }
.p-sections li { padding: .5rem .7rem; background: var(--panel);
  border: 1px solid var(--line); border-radius: .4rem; margin-bottom: .3rem;
  font-size: .92rem; display: flex; justify-content: space-between; }
.tag-free { font-size: .74rem; color: var(--gold); border: 1px solid var(--gold-dim);
  border-radius: 999px; padding: 0 .45rem; }
.p-notes { color: var(--muted); font-size: .88rem; padding-left: 1.1rem; line-height: 1.8; }
.p-buy { display: flex; align-items: center; gap: .8rem; margin-top: 1.6rem; }
.p-price { font-size: 1.2rem; color: var(--gold); flex: none; }
.p-buy .primary { margin-top: 0; }

/* 위저드 퍼널 (2026-08-19, 3차 — storyFlow 파일럿 상품 전용) —
   한 화면에 다 보여주는 기존 .funnel과 달리 질문 하나당 화면 하나씩
   넘어간다. 클래스는 기존 .field/.toggle-btn/.primary 등을 재사용하지 않고
   wz- 접두어로 분리해, 다른 38개 상품이 쓰는 .funnel 스타일에 전혀 영향을
   주지 않는다. */
.wz-bar { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.wz-bar-fill { height: 100%; background: var(--gold); transition: width .25s; }
.wz-meta { display: flex; justify-content: space-between; align-items: center;
  font-size: .8rem; color: var(--muted); margin: .5rem 0 1.1rem; }
.wz-tag { font-size: .74rem; color: var(--gold); border: 1px solid var(--gold-dim);
  border-radius: 999px; padding: .15rem .55rem; }

.wz-bubble { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: 1.3rem; }
.wz-avatar { width: 2.6rem; height: 2.6rem; border-radius: 50%; flex: none; object-fit: cover; }
.wz-avatar-mark { background: linear-gradient(160deg, var(--gold), var(--gold-dim));
  color: #1a1510; display: grid; place-items: center; font-weight: 700; font-size: .82rem;
  letter-spacing: -.02em; }
.wz-speech { background: var(--panel); border: 1px solid var(--line); border-radius: .7rem;
  padding: .8rem .95rem; flex: 1; }
.wz-speech p { margin: 0 0 .3rem; font-size: .95rem; line-height: 1.6; }
.wz-speech p:last-child { margin-bottom: 0; color: var(--muted); font-size: .85rem; }

.wz-step { min-height: 13rem; }
.wz-input { width: 100%; padding: .8rem; margin: .3rem 0; background: var(--panel);
  border: 1px solid var(--line); border-radius: .55rem; color: var(--ink); font: inherit; }
.wz-input:focus { outline: 0; border-color: var(--gold-dim); }
.wz-toggle { display: flex; gap: .5rem; margin: .6rem 0; }
.wz-big { flex: 1; padding: 1rem .7rem; font-size: 1rem; }

/* 2026-08-19(6차): 생년월일 숫자 6자리 입력 — 참고화면(할마카세)처럼 크고
   자간이 넓은 한 칸. */
.wz-date-digits { text-align: center; font-size: 1.6rem; font-weight: 700;
  letter-spacing: .35em; padding: 1rem .6rem 1rem 1rem; }
.linklike { background: none; border: 0; padding: 0; margin: 0; color: var(--gold);
  text-decoration: underline; font: inherit; font-size: .84rem; cursor: pointer; }
.linklike:hover { color: var(--warn); }

.wz-nav { display: flex; gap: .6rem; margin-top: 1.4rem; }
.wz-nav > .ghost { flex: none; }
.wz-primary { flex: 1; margin-top: 0; }
.wz-primary[disabled] { opacity: .4; cursor: default; }

.mbti-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin: .8rem 0; }
.mbti-cell { padding: .6rem .2rem; font-size: .82rem; background: var(--panel);
  border: 1px solid var(--line); color: var(--ink); border-radius: .45rem; }
.mbti-cell.on { border-color: var(--gold); color: var(--gold); background: #241f18; }
@media (min-width: 26rem) { .mbti-grid { grid-template-columns: repeat(4, 1fr); } }

/* 위저드 전체화면 오버레이 (2026-08-19, 4차) — "화면이 통째로 바뀌어야
   한다"(대표님 지시)에 따라, product.php의 2단 커머스 레이아웃(정보/구매
   카드)이나 헤더와 무관하게 뷰포트 전체를 덮는다. DOM상 어디에 붙어 있어도
   position:fixed + inset:0이 화면 전체를 차지한다 — 배경·글자색은 여기서
   직접 지정해, 바깥 페이지(saju-backend)가 html/body에 라이트 테마를
   강제(!important)해 두어도 이 오버레이 자체는 흔들리지 않는다. */
.wz-launch { width: 100%; }
.wz-fullscreen { position: fixed; inset: 0; z-index: 2000; background: var(--bg); color: var(--ink);
  overflow-y: auto; -webkit-overflow-scrolling: touch; }
.wz-fullscreen-inner { max-width: var(--w); margin: 0 auto; padding: 3.2rem 1.1rem 4rem; }
.wz-fullscreen-close { position: absolute; top: 1rem; right: 1.1rem; width: 2.2rem; height: 2.2rem;
  border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  font-size: 1.3rem; line-height: 1; display: grid; place-items: center; z-index: 1; }
.wz-fullscreen-close:hover { border-color: var(--gold-dim); }
body.wz-fullscreen-open { overflow: hidden; }

/* 2026-08-19(9차): 사주풀이 인트로 챕터 — "조선의 욕쟁이 할머니" 페르소나
   레퍼런스를 참고한 도입부 리빌 연출. 기존 표지(cover) 챕터를 그대로
   확장한 것이라 새 챕터 타입을 추가하지 않았다 — 항상 무료·항상 첫 챕터. */
.intro-cover .intro-scene { margin-bottom: 1.6rem; }
.intro-line { opacity: 0; transform: translateY(8px);
  animation: ol-intro-in .55s ease forwards; }
@keyframes ol-intro-in { to { opacity: 1; transform: translateY(0); } }
.intro-whisper { color: var(--muted); font-size: .92rem; letter-spacing: .04em; }
.intro-poem { font-size: 1.02rem; line-height: 1.9; }
.intro-quote { font-style: italic; color: var(--ink); background: var(--panel);
  border-left: 2px solid var(--gold-dim); border-radius: 0 .5rem .5rem 0;
  padding: .8rem 1rem; margin: 0 0 1rem; line-height: 1.75; }
.intro-note-line { font-size: .87rem; color: var(--muted); }
.intro-reveal { text-align: center; background: var(--panel); border: 1px solid var(--line);
  border-radius: .8rem; padding: 1.6rem 1rem; margin: 1.4rem 0; }
.intro-hanja { display: block; font-size: 3.4rem; line-height: 1; color: var(--gold);
  margin-bottom: .6rem; }
.intro-hanja-label { display: block; font-size: .82rem; color: var(--muted); }
.intro-flavor { color: var(--muted); font-size: .9rem; margin-top: -.4rem; }
.intro-divider { text-align: center; color: var(--gold-dim); margin: 1.8rem 0 1rem; letter-spacing: .3em; }
.intro-h2 { font-size: 1.15rem; text-align: center; margin: 0 0 .6rem; }
.intro-h3 { font-size: .98rem; margin: 1.4rem 0 .5rem; padding-top: .9rem;
  border-top: 1px solid var(--line); }
.intro-pillar-notes { color: var(--muted); font-size: .88rem; padding-left: 1.1rem;
  line-height: 1.85; margin: 0 0 1rem; }
@media (prefers-reduced-motion: reduce) {
  .intro-line { opacity: 1; transform: none; animation: none; }
}

/* 2026-08-21(19차): 무료 기본사주 뒤에 나오는 페이월에 가격+전체보기 CTA 추가
   ("상품폼에 금액을 빼주세요 — 할마카세처럼 무료사주가 끝나면 보여준다"). */
.paywall-buy { margin: 1.2rem 0; padding: 1.1rem; background: var(--panel);
  border: 1px solid var(--gold-dim); border-radius: .8rem; text-align: center; }
.paywall-price { font-size: 1.5rem; font-weight: 700; color: var(--gold); margin-bottom: .7rem; }
.paywall-buy .primary.wide { width: 100%; }

/* 2026-08-21(19차 개정3): 페이월 전환 장치 — 봉인 챕터 카드 + 가격 앵커
   (할마카세 벤치마크. 가짜 리뷰·가짜 결제 카운터는 넣지 않는다). */
.locked-cards { display: flex; flex-direction: column; gap: .45rem; margin: 1rem 0; }
.locked-card { display: flex; align-items: center; gap: .6rem; background: var(--panel);
  border: 1px solid var(--line); border-left: 3px solid #a33; border-radius: .5rem;
  padding: .6rem .8rem; font-size: .92rem; color: var(--muted); }
.locked-seal { flex: none; width: 1.5rem; height: 1.5rem; border-radius: .3rem;
  background: #a33; color: #fff; font-size: .72rem; display: flex;
  align-items: center; justify-content: center; }
.price-anchor { margin: 1.2rem 0 0; padding: 1rem 1.1rem; background: var(--panel);
  border: 1px solid var(--line); border-radius: .8rem; }
.price-anchor .pa-title { font-size: .85rem; color: var(--muted); margin-bottom: .6rem;
  text-align: center; }
.price-anchor .pa-row { display: flex; justify-content: space-between; font-size: .9rem;
  color: var(--muted); padding: .3rem 0; border-bottom: 1px dashed var(--line); }
.price-anchor .pa-row.pa-us { color: var(--gold); font-weight: 700; border-bottom: none; }
.price-anchor .pa-note { font-size: .76rem; color: var(--muted); margin-top: .5rem;
  text-align: center; }

/* ============================================================
   2026-08-21(19차 개정4): 해석 리포트 비주얼 리디자인
   대표님 지시 "리포트 형태로 이미지와 프레임 처리 … 10년차 웹디자인
   전문가급 … 지금은 책읽는 느낌 … 중요한 텍스트의 강조를 색연필 효과로".
   외부 이미지 없이(자급자족 원칙) CSS 그라데이션·인라인 SVG 데이터URI로
   한지 질감·전통 프레임·낙관 도장·색연필 하이라이트를 구현한다.
   ============================================================ */

/* ── 챕터 페이지 = 한지 리포트 카드 ── */
.report-page {
  position: relative;
  background:
    radial-gradient(130% 80% at 50% 0%, rgba(201,162,74,.07), rgba(0,0,0,0) 52%),
    linear-gradient(180deg, #201b16, #181410);
  border: 1px solid #3b332a;
  border-radius: 16px;
  padding: 2rem 1.6rem 1.8rem;
  box-shadow: 0 14px 44px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.035);
}
.report-page::before {           /* 이중 내부 프레임 */
  content: ""; position: absolute; inset: 9px; pointer-events: none;
  border: 1px solid rgba(201,162,74,.22); border-radius: 10px;
}
.report-page::after {            /* 네 모서리 금장 브래킷 */
  content: ""; position: absolute; inset: 4px; pointer-events: none;
  background:
    linear-gradient(var(--gold), var(--gold)) left 0 top 0 / 18px 2px,
    linear-gradient(var(--gold), var(--gold)) left 0 top 0 / 2px 18px,
    linear-gradient(var(--gold), var(--gold)) right 0 top 0 / 18px 2px,
    linear-gradient(var(--gold), var(--gold)) right 0 top 0 / 2px 18px,
    linear-gradient(var(--gold), var(--gold)) left 0 bottom 0 / 18px 2px,
    linear-gradient(var(--gold), var(--gold)) left 0 bottom 0 / 2px 18px,
    linear-gradient(var(--gold), var(--gold)) right 0 bottom 0 / 18px 2px,
    linear-gradient(var(--gold), var(--gold)) right 0 bottom 0 / 2px 18px;
  background-repeat: no-repeat; opacity: .8;
}
@media (max-width: 480px) { .report-page { padding: 1.5rem 1.05rem 1.4rem; } }

/* ── 챕터 히어로(장 도장·제목·역술인·구분선) ── */
.rp-hero { text-align: center; margin-bottom: 1.5rem; }
.rp-seal {
  display: inline-block; font-family: "Noto Serif KR", serif;
  font-size: .82rem; font-weight: 700; letter-spacing: .3em; text-indent: .3em;
  color: #e06b52; border: 2px solid rgba(224,107,82,.75); border-radius: 5px;
  padding: .3rem .55rem .25rem; transform: rotate(-3deg);
  background: rgba(179,64,47,.09);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
  margin-bottom: .8rem;
}
.rp-title {
  font-family: "Noto Serif KR", serif; font-size: 1.55rem; line-height: 1.35;
  margin: 0 0 .55rem; letter-spacing: -.01em;
  background: linear-gradient(180deg, #f4e3bd, #cfa552);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #e8cf9a;
}
.rp-teller {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .82rem; color: var(--muted);
  background: rgba(255,255,255,.03); border: 1px solid var(--line);
  border-radius: 999px; padding: .25rem .8rem .25rem .3rem; margin-bottom: .4rem;
}
.rp-teller-img { width: 1.7rem; height: 1.7rem; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--gold-dim); }
.rp-divider { display: flex; align-items: center; gap: .7rem; margin: .9rem auto 0; max-width: 16rem; }
.rp-div-line { flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim)); }
.rp-div-line:last-child { background: linear-gradient(90deg, var(--gold-dim), transparent); }
.rp-div-star { color: var(--gold); font-size: .8rem; }

/* ── 본문 타이포 ── */
.rp-body .reading p, .rp-body .ai-reading p { line-height: 1.95; font-size: .96rem;
  color: #e6ded2; margin-bottom: 1rem; }
.rp-body > .reading:first-child { margin-top: 0; }

/* ── 소제목: 금장 번호 리본 ── */
.report-page .sub-h {
  font-family: "Noto Serif KR", serif; font-size: 1.08rem; font-weight: 700;
  color: #f0e2c4; border-top: none; padding: .5rem .9rem; margin: 1.9rem 0 .9rem;
  background: linear-gradient(90deg, rgba(201,162,74,.14), rgba(201,162,74,.02) 70%, transparent);
  border-left: 3px solid var(--gold); border-radius: 0 .5rem .5rem 0;
}

/* ── 색연필(형광 마커) 하이라이트 ── */
.report-page .ai-reading strong, .report-page .ai-reading b,
.report-page .reading strong, .report-page .reading b {
  color: #ffedc8; font-weight: 600;
  padding: .06em .3em .1em; margin: 0 .04em;
  background-image: linear-gradient(100deg,
    rgba(216,163,64,0) 0%, rgba(216,163,64,.34) 4%, rgba(224,172,74,.42) 22%,
    rgba(216,163,64,.38) 65%, rgba(210,155,58,.30) 92%, rgba(216,163,64,0) 100%);
  border-radius: .45em .9em .5em .85em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ── 원국 기운 차트 = 데이터 카드 ── */
.report-page .bars {
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  border: 1px solid var(--line); border-radius: .8rem;
  padding: 1rem 1.1rem .8rem; margin: 0 0 1.4rem;
}
.report-page .bars .note { border-left: none; padding-left: 0; margin-bottom: .6rem;
  font-size: .8rem; }
.report-page .br { height: .72rem; border-radius: 999px; background: #141110; }
.report-page .bf { border-radius: 999px;
  box-shadow: 0 0 8px rgba(201,162,74,.25); }
.report-page .bl { font-size: .85rem; color: #d9d0c2; }

/* ── 상단 툴바·페이지 내비 다듬기 ── */
.book-head { border-bottom: none; padding-bottom: 0; margin-bottom: 1rem; }
.book-head .pager { background: rgba(255,255,255,.04); border: 1px solid var(--line);
  border-radius: 999px; padding: .15rem .7rem; color: var(--gold); font-weight: 600; }
.book-nav .ghost { border-radius: .6rem; }

/* ── 표지 챕터는 프레임만 공유(히어로 없음) ── */
.rp-cover { padding-top: 2.2rem; }

/* ============================================================
   2026-08-21(19차 개정5): ② 리포트 폭 확대 ③ 다이나믹 로딩
   ⑤⑥ 이벤트 페이월(히어로 이미지·부드러운 전환)
   ============================================================ */

/* ── ② 리포트/로딩은 넓게 (위저드 입력은 기존 34rem 유지) ── */
.wz-fullscreen-inner.ol-wide { max-width: 47rem; }

/* ── ③ 다이나믹 로딩 ── */
.ol-loading { text-align: center; padding: 3.2rem 0 4rem; }
.ol-load-bubble { display: flex; gap: .7rem; align-items: flex-start;
  text-align: left; max-width: 30rem; margin: 0 auto 2.4rem; }
.ol-load-avatar { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover;
  flex: none; border: 2px solid var(--gold-dim);
  animation: olAvatarGlow 2.4s ease-in-out infinite; }
@keyframes olAvatarGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,162,74,.0); }
  50% { box-shadow: 0 0 18px 2px rgba(201,162,74,.45); } }
.ol-load-speech { background: var(--panel); border: 1px solid var(--line);
  border-radius: .8rem; padding: .8rem 1rem; flex: 1; }
.ol-load-name { margin: 0 0 .25rem; font-size: .8rem; color: var(--muted); }
.ol-load-msg { margin: 0; font-size: .98rem; font-weight: 600; color: var(--ink);
  animation: olMsgIn .5s ease; }
@keyframes olMsgIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }

.ol-load-track { height: 4px; max-width: 30rem; margin: 0 auto 3rem;
  background: rgba(255,255,255,.06); border-radius: 999px; overflow: hidden; }
.ol-load-fill { height: 100%; width: 40%; border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--gold), #f0d795, var(--gold), transparent);
  animation: olTrack 1.6s linear infinite; }
@keyframes olTrack { from { transform: translateX(-110%); } to { transform: translateX(320%); } }

.ol-load-ring { width: 4.4rem; height: 4.4rem; margin: 0 auto 1.4rem;
  border-radius: 50%; position: relative;
  background: conic-gradient(from 0deg, transparent 0 70%, var(--gold) 92%, #f4e3bd 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  animation: olSpin 1.1s linear infinite; }
@keyframes olSpin { to { transform: rotate(360deg); } }
.ol-load-caption { font-family: "Noto Serif KR", serif; font-size: 1.02rem;
  color: var(--gold); letter-spacing: .04em; animation: olPulse 2.2s ease-in-out infinite; }
@keyframes olPulse { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }

/* ── ⑥ 페이월 부드러운 등장 ── */
.pw-anim { animation: pwIn .6s cubic-bezier(.2, .7, .3, 1); }
@keyframes pwIn { from { opacity: 0; transform: translateY(26px) scale(.985); }
  to { opacity: 1; transform: none; } }

/* ── ⑤ 이벤트 히어로 이미지·뱃지 ── */
.pw-hero { width: 100%; max-height: 16rem; object-fit: cover; border-radius: .9rem;
  border: 1px solid var(--gold-dim); margin-bottom: 1.1rem; display: block;
  animation: pwHeroIn .8s ease; }
@keyframes pwHeroIn { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; } }
.pw-badge { display: inline-block; font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; color: #1a1510;
  background: linear-gradient(180deg, var(--gold), var(--gold-dim));
  border-radius: 999px; padding: .3rem .95rem; margin-bottom: .8rem; }
.pw-teller-wrap { text-align: center; margin-bottom: 1.1rem; }
.pw-teller-big { width: 5.4rem; height: 5.4rem; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--gold-dim); box-shadow: 0 0 26px rgba(201,162,74,.35);
  animation: pwHeroIn .8s ease; }

/* ── 2026-08-21(20차) 천문·심리명리 상담 화면 ─────────────────── */
.cm-screen{display:flex;flex-direction:column;gap:1rem}
.cm-qlist{display:flex;flex-direction:column;gap:.55rem;margin:.3rem 0}
.cm-qrow{display:flex;align-items:center;gap:.55rem}
.cm-qnum{flex:0 0 1.6rem;height:1.6rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.78rem;color:#c9a24a;border:1px solid rgba(201,162,74,.45);background:rgba(201,162,74,.08)}
.cm-qrow .cm-q,.cm-qrow .cm-fq{flex:1}
.cm-err{color:#e08a8a;font-size:.85rem;margin:.3rem 0 0}
.cm-add{align-self:flex-start}
.pm-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:.2rem 0 .6rem}
.pm-chip{padding:.42rem .85rem;border-radius:999px;border:1px solid rgba(201,162,74,.35);background:rgba(255,255,255,.03);color:#cbbfa9;font-size:.86rem;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.pm-chip.on{background:linear-gradient(135deg,rgba(201,162,74,.28),rgba(201,162,74,.14));border-color:#c9a24a;color:#ffedc8}
.pm-concerns{margin:.4rem 0 .8rem;padding-left:1.2rem;display:flex;flex-direction:column;gap:.45rem;color:#e8ddc8;font-size:.93rem;line-height:1.55}
.pm-story,.pm-add{width:100%}
.cm-followup{margin-top:1.6rem;padding:1.4rem 1.5rem}
.cm-fu-title{font-family:var(--ol-serif,serif);color:#e8c987;font-size:1.05rem;margin:0 0 .3rem}
.cm-fu-item{margin-top:1rem;padding-top:.9rem;border-top:1px dashed rgba(201,162,74,.25)}
.cm-fu-q{font-weight:700;color:#ffedc8;margin:0 0 .4rem}
.cm-fu-out{margin-top:.4rem}
@media print{.cm-followup{display:none}}

/* ── 2026-08-22(20차 개정11) 천문 개편 — 결제유도 CTA + 1문1답 채팅 + 결과 저장 바 ── */
.cm-cta{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.9rem;padding:.4rem 0}
.cm-cta-img{width:100%;max-width:26rem;aspect-ratio:4/3;object-fit:cover;border-radius:.7rem;border:1px solid rgba(201,162,74,.35)}
.cm-cta-face{width:6.4rem;height:6.4rem;border-radius:50%;object-fit:cover;border:2px solid rgba(201,162,74,.55)}
.cm-cta-title{font-family:var(--ol-serif,serif);color:#ffedc8;font-size:1.3rem;margin:.2rem 0 0;line-height:1.4}
.cm-cta-lead{color:#cbbfa9;font-size:.93rem;line-height:1.75;margin:0;max-width:30rem}
.cm-cta-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;width:100%;margin:.3rem 0}
.cm-cta-feat{background:rgba(255,255,255,.03);border:1px solid rgba(201,162,74,.25);border-radius:.55rem;padding:.8rem .7rem;text-align:center}
.cm-cta-feat strong{display:block;color:#e8c987;font-size:.88rem;margin-bottom:.35rem}
.cm-cta-feat p{margin:0;color:#a99a80;font-size:.78rem;line-height:1.6}
.cm-cta-price{display:flex;flex-direction:column;gap:.15rem;margin:.2rem 0}
.cm-cta-won{font-family:var(--ol-serif,serif);font-size:1.7rem;font-weight:700;color:#ffedc8}
.cm-cta-pnote{color:#a99a80;font-size:.8rem}
.cm-cta-btn{width:100%;max-width:24rem}
.cm-cta-foot{color:#8f8268;font-size:.8rem;line-height:1.6;margin:0}
@media (max-width:640px){.cm-cta-feats{grid-template-columns:1fr}.cm-cta-feat{display:flex;gap:.6rem;align-items:baseline;text-align:left}.cm-cta-feat strong{margin-bottom:0;flex:0 0 7.2rem}}
.cm-chat{max-width:38rem;margin:0 auto;width:100%}
.cm-thread{display:flex;flex-direction:column;gap:.7rem;margin-bottom:1rem}
.cm-msg{display:flex;gap:.55rem;align-items:flex-start;max-width:92%}
.cm-msg.me{align-self:flex-end;flex-direction:row-reverse}
.cm-msg-face{width:2.2rem;height:2.2rem;border-radius:50%;object-fit:cover;flex:none;border:1px solid rgba(201,162,74,.4)}
.cm-msg-body{padding:.7rem .95rem;border-radius:.8rem;font-size:.9rem;line-height:1.7}
.cm-msg.oki .cm-msg-body{background:rgba(255,255,255,.04);border:1px solid rgba(201,162,74,.28);color:#e8ddc8;border-top-left-radius:.2rem}
.cm-msg.me .cm-msg-body{background:linear-gradient(135deg,rgba(201,162,74,.32),rgba(201,162,74,.18));border:1px solid rgba(201,162,74,.45);color:#ffedc8;border-top-right-radius:.2rem}
.cm-msg-body p{margin:0 0 .55rem}
.cm-msg-body p:last-child{margin-bottom:0}
.cm-typing .spinner{width:1.4rem;height:1.4rem;margin:.3rem 0 0;border-width:2px}
.cm-chat-foot{display:flex;flex-direction:column;gap:.5rem}
.cm-askrow{display:flex;gap:.5rem;align-items:stretch}
/* 2026-08-27(개정50): 천문 첫 질문 예시 칩.
   육임 과전은 질문을 던진 시각으로 세우고 사건형 질문("될까/언제")에서 힘을 쓰는데,
   손님에게 그걸 알려 주는 안내가 없어 성향 질문이 들어오기 쉬웠다. 눌러서 고쳐 쓰는 예시. */
.cm-exq{margin-top:.7rem;display:flex;flex-wrap:wrap;gap:.4rem}
/* 2026-08-27(개정53): 풍수 방위 재는 법 — 각도 입력칸 옆 접이식 안내.
   각도가 틀리면 좌향이 바뀌어 진단 전체가 어긋나므로 입력 지점에 붙여 둔다. */
/* 2026-08-27(개정59): 천문 — 여러 질문을 한꺼번에 적는 모드.
   점사는 여전히 하나씩 순서대로 본다(육임 과전은 질문 시각으로 세우므로). */
/* 2026-08-27(개정60): 심리 상담 입력 화면의 위기 안내.
   눈에 띄되 고민을 적는 손님을 겁주지 않도록 차분한 톤으로. */
/* 2026-08-27(개정62): 결제 후 입력창을 닫았을 때 되돌아오는 버튼.
   원래 CTA 버튼을 재활용하되 "이어서 하기"임을 눈에 띄게 한다. */
.cm-resume{animation:cmResumePulse 2s ease-in-out 3}
@keyframes cmResumePulse{0%,100%{box-shadow:0 0 0 0 rgba(201,162,74,0)}
  50%{box-shadow:0 0 0 .5rem rgba(201,162,74,.18)}}
.pm-crisis{margin:.8rem 0 0;padding:.7rem .85rem;border-radius:.5rem;
  background:rgba(201,162,74,.07);border:1px solid rgba(201,162,74,.25);
  font-size:.82rem;line-height:1.7}
.pm-crisis b{color:var(--ol-accent,#c9a24a)}
.cm-batch{margin-top:.6rem}
.cm-batch-tgl{padding:0;font-size:.84rem;opacity:.9}
.cm-batch-body{margin-top:.5rem}
.cm-qbatch{width:100%;box-sizing:border-box;line-height:1.7;resize:vertical}
.cm-batch-body .cm-ask{margin-top:.5rem;width:100%}
.fs-how{margin:.5rem 0 .2rem}
.fs-how-btn{padding:0;font-size:.84rem;opacity:.9}
.fs-how-body{margin-top:.5rem;padding:.75rem .9rem;border-radius:.6rem;
  background:rgba(201,162,74,.07);border:1px solid rgba(201,162,74,.28)}
.fs-how-steps{margin:0 0 .5rem;padding-left:1.15rem;font-size:.85rem;line-height:1.75}
.fs-how-steps li{margin-bottom:.25rem}
.fs-how-body .hint{font-size:.82rem;margin:.35rem 0 0}
.fs-how-body .warn{font-size:.82rem;margin:.5rem 0 0;line-height:1.65}
/* 궁합 위저드 2단계 표시 */
.wz-gh-step{margin:0 0 .6rem;font-size:.9rem;opacity:.95}
.cm-exq>.hint{flex:0 0 100%;margin:0 0 .1rem;font-size:.8rem;opacity:.8}
.cm-exq>button{width:auto;flex:0 1 auto;margin:0;padding:.42rem .7rem;
  font-size:.82rem;line-height:1.35;border-radius:999px;white-space:normal;text-align:left}
.cm-askrow .cm-q{flex:1;min-width:0;margin:0}
.cm-askrow .cm-ask{width:auto;flex:none;margin-top:0;padding:.8rem 1.2rem;white-space:nowrap}
.cm-fin{align-self:center}
.cm-final{display:flex;flex-direction:column;gap:1rem}
.cm-dlbar{display:flex;align-items:center;justify-content:space-between;gap:.8rem;background:rgba(201,162,74,.08);border:1px solid rgba(201,162,74,.35);border-radius:.6rem;padding:.85rem 1rem}
.cm-dlbar p{margin:0;color:#e8ddc8;font-size:.85rem;line-height:1.6}
.cm-dlbar button{flex:none;width:auto;margin-top:0;white-space:nowrap;padding:.8rem 1.1rem}
.cm-dlbar-bottom{justify-content:center}
@media (max-width:640px){.cm-dlbar{flex-direction:column;align-items:stretch;text-align:center}}
@media print{.cm-dlbar{display:none}}

/* ── 2026-08-22(20차 개정12) 위저드 간이 MBTI 테스트 ── */
.wz-mbti-quiz{display:block;margin:.8rem auto 0;background:none;border:0;color:#c9a24a;font-size:.88rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:.3rem .2rem}
.wz-mbti-quiz:hover{color:#e8c987}
.wz-quiz-q{font-family:var(--ol-serif,serif);font-size:1.12rem;color:var(--ink,#f0ead9);margin:.6rem 0 1rem;line-height:1.6}
.wz-quiz-opts{display:flex;flex-direction:column;gap:.6rem}
.wz-quiz-opt{text-align:left;background:var(--panel,rgba(255,255,255,.03));border:1px solid var(--line,rgba(201,162,74,.3));border-radius:.6rem;padding:.95rem 1.05rem;color:var(--ink,#e8ddc8);font-size:.93rem;line-height:1.55;cursor:pointer;transition:border-color .15s,background .15s}
.wz-quiz-opt:hover{border-color:#c9a24a;background:rgba(201,162,74,.1)}
.wz-quiz-res{background:var(--panel,rgba(255,255,255,.03));border:1px solid rgba(201,162,74,.35);border-radius:.7rem;padding:1.2rem 1.1rem;text-align:center;margin:.5rem 0 .3rem}
.wz-quiz-type{font-family:var(--ol-serif,serif);font-size:2rem;font-weight:700;color:#e8c987;letter-spacing:.12em;margin:0 0 .5rem}
.wz-quiz-desc{color:var(--ink,#e8ddc8);font-size:.93rem;line-height:1.75;margin:0 0 .6rem}

/* ── 2026-08-22(20차 개정15) 자미두수 명반(다크 테마) ── */
.zw-wrap{overflow-x:auto}
.zw-grid{display:grid;grid-template-columns:repeat(4,minmax(7.2rem,1fr));gap:2px;border:1px solid rgba(201,162,74,.5);background:rgba(201,162,74,.5);min-width:30rem;border-radius:.4rem;overflow:hidden}
.zw-cell{background:var(--ol-dark-card,#1b1c26);min-height:6rem;padding:.4rem .5rem}
.zw-ming{background:rgba(201,162,74,.14)}
.zw-center{grid-column:2/4;grid-row:2/4;background:var(--ol-dark,#14151d);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:.7rem;gap:.25rem}
.zw-center p{margin:0;font-size:.84rem;color:#cbbfa9}
.zw-c-t{font-family:var(--ol-serif,serif);font-weight:700;color:#e8c987;font-size:1rem}
.zw-c-s{color:#e8ddc8}
.zw-c-n{font-size:.68rem;color:#8f8268}
.zw-head{display:flex;justify-content:space-between;gap:.3rem;font-size:.7rem;color:#c9a24a;margin-bottom:.3rem}
.zw-pname{font-weight:700;white-space:nowrap}
.zw-gz{color:#8f8268}
.zw-stars{display:flex;flex-wrap:wrap;gap:.15rem .5rem}
.zw-star{font-size:.78rem;color:#a99a80}
.zw-star.main{color:#ffedc8;font-weight:700}
.zw-star.none{color:#5c5546}
.zw-borrow{font-size:.68rem;color:#8f8268;width:100%}
@media print{.zw-cell{background:#fff}.zw-center{background:#faf7f0}}

/* ── 2026-08-22(20차 개정17) 풍수 진단 + 육임 과전 카드 ── */
.fs-form .field{margin:.25rem 0 .6rem}
.fs-saninfo{color:#e8c987;min-height:1.2em}
.fs-head{text-align:center;margin-bottom:.4rem}
.fs-guk{color:#e8c987;font-size:1rem;margin:.2rem 0 0}
.fs-wrap{overflow-x:auto}
.fs-caption{color:#8f8268;font-size:.76rem;margin:.2rem 0 .5rem;text-align:center}
.fs-grid{display:grid;grid-template-columns:repeat(3,minmax(6.5rem,1fr));gap:2px;border:1px solid rgba(201,162,74,.5);background:rgba(201,162,74,.5);max-width:26rem;margin:0 auto;border-radius:.4rem;overflow:hidden}
.fs-cell{background:var(--ol-dark-card,#1b1c26);padding:.5rem .4rem;text-align:center;min-height:4.8rem}
.fs-sit,.fs-face{background:rgba(201,162,74,.14);box-shadow:inset 0 0 0 1px #c9a24a}
.fs-dirline{display:flex;justify-content:space-between;font-size:.7rem;color:#c9a24a}
.fs-tag{font-weight:700;color:#ffedc8}
.fs-stars{display:flex;justify-content:center;gap:.55rem;align-items:baseline;margin:.35rem 0;font-family:var(--ol-serif,serif)}
.fs-mtn,.fs-wtr{font-size:1.15rem;color:#e8ddc8}
.fs-mtn.hot,.fs-wtr.hot{color:#ff8f7d;font-weight:700}
.fs-base{color:#8f8268;font-size:.85rem}
.fs-pal{font-size:.72rem;color:#a99a80}
.fs-pt{background:rgba(255,255,255,.03);border:1px solid rgba(201,162,74,.25);border-radius:.55rem;padding:.8rem .9rem;margin:.8rem 0}
.fs-chapters{display:flex;flex-direction:column;gap:1rem}
.fs-chap{padding:1.2rem 1.3rem}
.lr-card{background:rgba(255,255,255,.04);border:1px solid rgba(201,162,74,.3);border-radius:.5rem;padding:.55rem .7rem;margin:0 0 .6rem}
.lr-head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.3rem;font-size:.74rem;color:#c9a24a;margin-bottom:.4rem}
.lr-course{font-weight:700}
.lr-jeons{display:flex;gap:.5rem}
.lr-jeon{flex:1;text-align:center;background:rgba(0,0,0,.18);border-radius:.4rem;padding:.35rem .2rem}
.lr-jname{display:block;font-size:.66rem;color:#8f8268}
.lr-branch{display:block;font-family:var(--ol-serif,serif);font-size:1.2rem;color:#ffedc8;font-weight:700}
.lr-gen{display:block;font-size:.68rem;color:#a99a80}
@media (max-width:640px){.fs-grid{max-width:100%}.lr-head{font-size:.7rem}}

/* ── 2026-08-22(20차 개정18) 기문 택일 카드 ── */
.tg-list{display:flex;flex-direction:column;gap:.6rem;margin:.6rem 0}
.tg-card{display:flex;align-items:center;gap:.9rem;background:rgba(255,255,255,.03);border:1px solid rgba(201,162,74,.28);border-radius:.6rem;padding:.8rem 1rem;flex-wrap:wrap}
.tg-best{background:rgba(201,162,74,.12);border-color:#c9a24a}
.tg-rank{flex:none;font-weight:700;color:#e8c987;font-size:.9rem;min-width:4.2rem}
.tg-when{flex:none;font-family:var(--ol-serif,serif);font-size:1.02rem;color:#ffedc8;font-weight:700;min-width:10rem}
.tg-info{flex:1;display:flex;flex-wrap:wrap;gap:.2rem .8rem;font-size:.78rem;color:#a99a80;min-width:12rem}
.tg-dir{color:#e8c987}
.tg-score{flex:none;font-size:1.05rem;font-weight:700;color:#e8ddc8}
.tg-avoid{background:rgba(214,86,86,.06);border:1px solid rgba(214,86,86,.25);border-radius:.55rem;padding:.7rem .9rem;margin:.4rem 0 .8rem}
@media (max-width:640px){.tg-card{gap:.3rem .6rem}.tg-when{min-width:0}}

/* 2026-08-22(20차 개정20): 궁합 AI 심층 페이월 게이트 — 원국·관계 판정은
   무료로 보여준 뒤 이 게이트를 결과 아래에 붙인다(.paywall 계열 재사용). */
.gh-gate{margin-top:1.6rem}
.gh-gate .pw-teller-wrap{text-align:center}
.gh-gate h2{margin-top:.8rem}
@media print{.gh-gate{display:none}}

/* 2026-08-22(개정23): 리포트 시각화 확장 — 대운 타임라인·신강약 게이지.
   판정값을 그대로 그린다(AI 산출물 아님). */
.viz-wrap{margin:0 0 1.1rem}
.viz-cap{color:#8a7a5c;font-size:.78rem;margin:.35rem 0 0;line-height:1.5}
.viz-daeun{display:flex;gap:2px;overflow-x:auto;padding:.2rem 0}
.vd-cell{flex:1 0 3.2rem;min-width:3.2rem;text-align:center;background:rgba(201,162,74,.07);
  border:1px solid rgba(201,162,74,.25);border-radius:.35rem;padding:.45rem .2rem;position:relative}
.vd-cell.on{background:linear-gradient(160deg,rgba(201,162,74,.28),rgba(201,162,74,.12));
  border-color:var(--gold,#c9a24a);box-shadow:0 0 0 1px rgba(201,162,74,.4)}
.vd-age{display:block;font-size:.68rem;color:#8a7a5c}
.vd-gj{display:block;font-size:.95rem;font-weight:700;margin:.1rem 0}
.vd-tg{display:block;font-size:.72rem;color:#b89b5e}
.vd-now{position:absolute;top:-.55rem;left:50%;transform:translateX(-50%);
  background:var(--gold,#c9a24a);color:#241c0e;font-size:.62rem;font-weight:700;
  padding:.05rem .4rem;border-radius:.6rem;white-space:nowrap}
.viz-gauge{padding:.9rem 0 .1rem}
.vg-track{position:relative;height:.55rem;border-radius:.4rem;
  background:linear-gradient(90deg,#5a7fb8 0%,#8fae87 50%,#c96f4a 100%);opacity:.9}
.vg-marker{position:absolute;top:50%;transform:translate(-50%,-50%);text-align:center}
.vg-dot{display:block;width:.95rem;height:.95rem;border-radius:50%;background:#fff;
  border:3px solid var(--gold,#c9a24a);margin:0 auto;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.vg-v{position:absolute;top:-1.5rem;left:50%;transform:translateX(-50%);
  font-size:.78rem;font-weight:700;color:var(--gold,#c9a24a);white-space:nowrap}
.vg-labels{display:flex;justify-content:space-between;font-size:.72rem;color:#8a7a5c;margin-top:.4rem}
@media print{.vd-cell.on{box-shadow:none}}

/* ── 2026-08-25(20차 개정34) 다시보기 ─────────────────────────────
   책 UI 머리줄에 "다시보기 저장" 버튼이 하나 더 붙었다. .book-head는
   nowrap flex라 좁은 화면에서 셋이 서로를 눌러 글자가 뭉개진다
   (개정27에서 히어로 CTA로 같은 일을 겪었다) — 줄바꿈을 허용하고
   버튼이 스스로 줄어들지 않게 막는다. 넓은 화면은 지금과 똑같다. */
.book-head{flex-wrap:wrap;row-gap:.45rem}
.book-head>button{flex:0 0 auto;white-space:nowrap}
.book-head .ch-title{min-width:8rem}
@media (max-width:520px){
  .book-head .ch-title{flex:1 0 100%;order:-1}
  .book-head>button,.book-head .pager{font-size:.78rem}
}
/* 저장 결과 안내(열람번호)는 번들이 인라인 스타일로 그린다 — CSS 없이도 뜬다. */


/* ══════════ 20차 개정36 ══════════ */
/* ══════════════════════════════════════════════════════════════════════
 * 20차 개정36 — 리포트 시각화 CSS
 * style.css (루트 + ko/ 동일 배포)
 *
 * ⚠ 먼저 지울 것 — 기존 규칙 하나를 반드시 제거한다.
 *
 *     .bars::before { content: "원국 기운 분포"; ... }
 *
 *   이 규칙이 .bars 전체에 걸려 있어서, 십신 분포 차트(.viz-groupbars)에도
 *   "원국 기운 분포"라는 틀린 라벨이 찍히고 있었다. 제목은 이제 요소가
 *   직접 들고 다닌다(.viz-title). ::before는 지우되 나머지 .bars 규칙
 *   (배경·테두리·패딩)은 그대로 둔다.
 *
 *   인쇄 CSS(번들 Bo)에도 같은 .bars::before가 있다 — 거기서도 지우고
 *   아래 인쇄 절을 넣는다.
 *
 * 색은 전부 기존 팔레트 변수만 쓴다. 새 색을 하드코딩하지 않는다.
 * ══════════════════════════════════════════════════════════════════════ */

/* ── 공통 ─────────────────────────────────────────────────────────── */
.viz-title {
  font-size: .72rem; letter-spacing: .22em; color: var(--gold-dim);
  margin: 0 0 .6rem;
}
.viz-wrap {
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  border: 1px solid var(--line); border-radius: .8rem;
  padding: 1rem 1.1rem .8rem; margin: 0 0 1.4rem;
}
.vz-svg { display: block; width: 100%; max-width: 22rem; margin: .2rem auto .4rem; height: auto; }

/* ── 오행 상생상극 원형도 ─────────────────────────────────────────── */
.vz-saeng { fill: none; stroke: var(--line); stroke-width: 1.4; opacity: .85; }
.vz-keuk  { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 4; opacity: .55; }

.vz-node        { stroke: rgba(0,0,0,.35); stroke-width: 1; }
.vz-node.zero   { opacity: .28; }
.vz-node.on     { stroke: var(--gold); stroke-width: 2.5; }
/* 막대에서 쓰던 오행 색을 그대로 쓴다 — 두 그림의 색이 어긋나면 안 된다.
   프로젝트의 .bf.e-* 규칙과 같은 값을 유지할 것. */
.vz-node.e-목 { fill: var(--el-wood,  #6bbf7b); }
.vz-node.e-화 { fill: var(--el-fire,  #d97b78); }
.vz-node.e-토 { fill: var(--el-earth, #c8a86b); }
.vz-node.e-금 { fill: var(--el-metal, #c3ccd6); }
.vz-node.e-수 { fill: var(--el-water, #6b93cf); }

.vz-node-t { fill: #1b1b1b; font-size: 15px; font-weight: 700; text-anchor: middle;
             font-family: "Noto Serif KR", serif; }
.vz-node-n { fill: var(--gold-dim); font-size: 13px; text-anchor: middle; }

/* ── 십신 레이더 ──────────────────────────────────────────────────── */
.vz-grid  { fill: none; stroke: var(--line); stroke-width: 1; opacity: .6; }
.vz-axis  { stroke: var(--line); stroke-width: 1; opacity: .45; }
.vz-shape { fill: var(--gold); fill-opacity: .16; stroke: var(--gold); stroke-width: 1.8;
            stroke-linejoin: round; }
.vz-dot      { fill: var(--muted); }
.vz-dot.on   { fill: var(--gold); }
.vz-ax-t     { fill: var(--muted); font-size: 12.5px; text-anchor: middle; }
.vz-ax-t.on  { fill: var(--gold); font-weight: 700; }

/* ── 캡션 ─────────────────────────────────────────────────────────── */
.viz-cap { font-size: .78rem; color: var(--muted); line-height: 1.65; margin: .5rem 0 0; }

/* ── 좁은 화면 ────────────────────────────────────────────────────── */
@media (max-width: 420px) {
  .vz-svg    { max-width: 100%; }
  .vz-ax-t   { font-size: 13.5px; }
  .vz-node-t { font-size: 16px; }
}

/* ══════════════════════════════════════════════════════════════════════
 * 인쇄(PDF) — 번들 Bo의 PRINT_CSS 안에 넣는다.
 * SVG는 잉크를 많이 먹지 않으므로 색을 유지하되, 배경 카드만 흰색으로 눕힌다.
 * ══════════════════════════════════════════════════════════════════════ */
/*
  .viz-wrap { background: #fff !important; border: 1px solid #e2d9c8;
              border-radius: 2mm; padding: 4mm; margin: 0 0 5mm;
              break-inside: avoid; page-break-inside: avoid; }
  .viz-title { color: #8a6f31; font-size: 8pt; letter-spacing: .2em; }
  .viz-cap   { color: #666; font-size: 8.5pt; }
  .vz-svg    { max-width: 78mm; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .vz-saeng, .vz-keuk, .vz-grid, .vz-axis { stroke: #bbb !important; }
  .vz-shape  { fill: #e8c877 !important; fill-opacity: .35; stroke: #a8842c !important; }
  .vz-node-t { fill: #222 !important; }
  .vz-node-n, .vz-ax-t { fill: #666 !important; }
  .vz-ax-t.on, .vz-dot.on { fill: #a8842c !important; }
*/


/* ══════════ 20차 개정37 ══════════ */
/* ══════════════════════════════════════════════════════════════════════
 * 20차 개정37 — 원국 그리드 + 라벨 한글화 CSS
 * viz-patch.css 아래에 이어 붙인다. (루트 + ko/ 동일 배포)
 *
 * 원칙 — 한글이 크고 한자는 작다. 한자는 절대 혼자 서지 않는다.
 * ══════════════════════════════════════════════════════════════════════ */

/* ── 원국 그리드 ──────────────────────────────────────────────────── */
.pg-wrap  { padding-bottom: 1rem; }
.pg-grid  {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: .5rem; margin: .3rem 0 .2rem;
}
.pg-head {
  grid-row: 1; text-align: center;
  font-size: .68rem; letter-spacing: .18em; color: var(--gold-dim);
  padding-bottom: .1rem;
}
.pg-cell {
  display: grid; justify-items: center; align-content: center; gap: .1rem;
  padding: .7rem .3rem .55rem;
  border: 1px solid var(--line); border-radius: .5rem;
  background: rgba(255,255,255,.02);
  opacity: .34; transition: opacity .18s ease, background .18s ease;
}
.pg-cell.on {
  opacity: 1;
  background: linear-gradient(180deg, rgba(255,255,255,.965), rgba(244,238,226,.92));
  border-color: rgba(217,178,95,.5);
  box-shadow: 0 1px 0 rgba(217,178,95,.25);
}
.pg-ko {
  font-family: "Noto Serif KR", serif; font-weight: 700;
  font-size: 1.45rem; line-height: 1.15; color: var(--text);
}
.pg-cell.on .pg-ko { color: #1c1710; }
.pg-hj { font-size: .68rem; color: var(--muted); line-height: 1.1; }
.pg-cell.on .pg-hj { color: #6d6353; }
.pg-god {
  font-size: .64rem; letter-spacing: .04em; color: var(--muted);
  margin-top: .18rem;
}
.pg-cell.on .pg-god { color: #8a6f31; font-weight: 600; }

/* 켜진 칸의 글자에 오행 색을 얹는다 — 막대 색과 같은 변수를 쓴다 */
.pg-cell.on.e-목 .pg-ko { color: #2e6b3c; }
.pg-cell.on.e-화 .pg-ko { color: #a53b36; }
.pg-cell.on.e-토 .pg-ko { color: #8a6a2c; }
.pg-cell.on.e-금 .pg-ko { color: #52606d; }
.pg-cell.on.e-수 .pg-ko { color: #2f5286; }

/* ── 오행 막대 라벨 ──────────────────────────────────────────────── */
.bar-row .bl { display: flex; align-items: baseline; gap: .22rem; }
.bl-ko { font-weight: 700; font-size: .9rem; }
.bl-hj { font-size: .66rem; color: var(--muted); font-style: normal; }
.bl-ko.e-t-목 { color: var(--el-wood,  #6bbf7b); }
.bl-ko.e-t-화 { color: var(--el-fire,  #d97b78); }
.bl-ko.e-t-토 { color: var(--el-earth, #c8a86b); }
.bl-ko.e-t-금 { color: var(--el-metal, #c3ccd6); }
.bl-ko.e-t-수 { color: var(--el-water, #6b93cf); }

/* ── 십성 막대 ──────────────────────────────────────────────────── */
.tg-row {
  display: grid; grid-template-columns: 5.2rem 1fr 1.5rem;
  align-items: center; gap: .55rem; margin: .55rem 0 .1rem;
}
.tg-name { display: flex; align-items: baseline; gap: .22rem; font-size: .88rem; }
.tg-name b { font-weight: 700; color: var(--text); }
.tg-row .bf { background: var(--muted); }
.tg-row.on .bf { background: var(--gold); }
.tg-row.on .tg-name b { color: var(--gold); }
.tg-gloss {
  grid-column: 2 / 4; margin: .1rem 0 .5rem;
  font-size: .72rem; color: var(--muted); letter-spacing: .01em;
}

/* ── 좁은 화면 ───────────────────────────────────────────────────── */
@media (max-width: 420px) {
  .pg-grid { gap: .35rem; }
  .pg-cell { padding: .6rem .15rem .45rem; }
  .pg-ko   { font-size: 1.3rem; }
  .tg-row  { grid-template-columns: 4.6rem 1fr 1.4rem; }
}

/* ══════════════════════════════════════════════════════════════════════
 * 인쇄(PDF) — 번들 Bo의 PRINT_CSS에 넣는다
 * ══════════════════════════════════════════════════════════════════════ */
/*
  .pg-grid  { gap: 2mm; }
  .pg-cell  { border: .3mm solid #ded4c0; border-radius: 1.5mm; background: #fff;
              opacity: 1; padding: 2.5mm 1mm; break-inside: avoid; }
  .pg-cell:not(.on) { opacity: .3; }
  .pg-cell.on { background: #faf6ec !important; border-color: #d9b25f !important;
                print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .pg-ko    { font-size: 13pt; color: #1c1710 !important; }
  .pg-hj    { font-size: 6pt;  color: #7a7060 !important; }
  .pg-god   { font-size: 6pt;  color: #8a6f31 !important; }
  .pg-head  { font-size: 6.5pt; color: #8a6f31; }
  .bl-hj, .tg-gloss { color: #777 !important; }
*/


/* ══════════ 20차 개정38 ══════════ */
/* ══════════════════════════════════════════════════════════════════════
 * 20차 개정38 — 리포트 스킨 「한지 판면(韓紙 版面)」
 *
 * 어두운 배경을 버렸다. 이유 셋 —
 *   ① 4,000자를 검정 배경 흰 글씨로 읽으면 눈이 못 버틴다
 *   ② PDF 인쇄에서 어두운 배경은 무너진다
 *   ③ 경쟁사가 전부 검정+금색이다
 *
 * 팔레트는 오방색에서. 백(닥지) 흑(먹) 적(주묵) 청(쪽) 황(치자).
 * 적용: 리포트 컨테이너에 class="hj" 를 건다 (ol_reportStyleClass).
 * 다른 화면(위저드·상품 목록)은 기존 스킨 그대로 둔다.
 * ══════════════════════════════════════════════════════════════════════ */


.hj {
  --dakji:   #E7E1D0;
  --dakji-2: #F0EBDC;
  --meok:    #1F1C17;
  --meok-2:  #6B6455;
  --jumuk:   #A32B1E;
  --jjok:    #2B4A6F;
  --chija:   #C8A03C;
  --gwak:    rgba(31,28,23,.22);

  background: var(--dakji);
  color: var(--meok);
  font-family: "Noto Serif KR", serif;
  font-size: 16.5px;
  line-height: 1.95;
  letter-spacing: -.005em;
  max-width: 42rem;
  margin: 0 auto;
  padding: 0 0 4rem;
}
.hj *, .hj *::before, .hj *::after { box-sizing: border-box; }

.hj-myeon {
  background: var(--dakji-2);
  border-left: 1px solid var(--gwak);
  border-right: 1px solid var(--gwak);
  padding: 0 1.6rem;
}
@media (max-width: 480px) { .hj-myeon { padding: 0 1.15rem; } }

/* ── 표지 ────────────────────────────────────────────────── */
.hj-cover { padding: 3.2rem 0 2.6rem; text-align: center; }
.hj-brand { font-family: "IBM Plex Mono", monospace; font-size: .62rem;
  letter-spacing: .42em; color: var(--meok-2); margin: 0 0 2.2rem; }
.hj-title { font-family: "Gowun Batang", serif; font-weight: 700;
  font-size: clamp(2rem, 8vw, 2.9rem); line-height: 1.25; margin: 0 0 .5rem; letter-spacing: -.02em; }
.hj-title small { display: block; font-size: .38em; font-weight: 400;
  letter-spacing: .3em; color: var(--meok-2); margin-top: .9rem; }
.hj-who { font-family: "IBM Plex Mono", monospace; font-size: .74rem;
  color: var(--meok-2); margin: 1.6rem 0 0; line-height: 2; }

/* 원국 판 */
.hj-won { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin: 2.2rem 0 1.4rem; }
.hj-won-h { font-family: "IBM Plex Mono", monospace; font-size: .58rem;
  letter-spacing: .2em; color: var(--meok-2); text-align: center; }
.hj-cell { border: 1px solid var(--gwak); background: rgba(255,255,255,.42);
  padding: .8rem .2rem .6rem; display: grid; justify-items: center; gap: .05rem; }
.hj-cell.dim { opacity: .3; }
.hj-ko { font-family: "Gowun Batang", serif; font-weight: 700; font-size: 1.7rem; line-height: 1.1; }
.hj-hja { font-size: .62rem; color: var(--meok-2); }
.hj-god { font-size: .6rem; color: var(--jumuk); letter-spacing: .04em; margin-top: .2rem; }
.hj .e-mok  .hj-ko { color: #33612F; }
.hj .e-hwa  .hj-ko { color: #9B3327; }
.hj .e-to   .hj-ko { color: #856322; }
.hj .e-geum .hj-ko { color: #4A5560; }
.hj .e-su   .hj-ko { color: #274769; }

/* 진태양시 도장 — 우리만 찍을 수 있는 것 */
.hj-dojang { display: inline-grid; place-items: center; gap: .1rem;
  border: 2px solid var(--jumuk); color: var(--jumuk);
  padding: .45rem .7rem; margin-top: .4rem; transform: rotate(-2.5deg); }
.hj-dojang b { font-family: "Gowun Batang", serif; font-size: .82rem; letter-spacing: .1em; }
.hj-dojang span { font-family: "IBM Plex Mono", monospace; font-size: .58rem; letter-spacing: .06em; }

/* ── 장 머리 ─────────────────────────────────────────────── */
.hj-jang { padding: 2.8rem 0 0; }
.hj-jang + .hj-jang { border-top: 1px solid var(--gwak); }
.hj-panshim { display: flex; align-items: baseline; gap: .7rem; margin: 0 0 .2rem; }
.hj-su { font-family: "Gowun Batang", serif; font-weight: 700; font-size: 2.4rem;
  line-height: 1; color: var(--jumuk); opacity: .85; }
.hj-kind { font-family: "IBM Plex Mono", monospace; font-size: .58rem;
  letter-spacing: .2em; color: var(--meok-2);
  border: 1px solid var(--gwak); padding: .18rem .45rem; white-space: nowrap; }
.hj-kind.pd { color: var(--jjok); border-color: rgba(43,74,111,.4); }
.hj-jang-t { font-family: "Gowun Batang", serif; font-weight: 700;
  font-size: 1.5rem; line-height: 1.4; margin: .5rem 0 1.5rem; letter-spacing: -.015em; }

/* ── 본문 ────────────────────────────────────────────────── */
.hj-sub { font-family: "Gowun Batang", serif; font-weight: 700; font-size: 1.08rem;
  line-height: 1.6; margin: 2rem 0 1rem; padding-left: .8rem; border-left: 3px solid var(--jumuk); }
.hj p { margin: 0 0 1.15rem; }
.hj em.hi { font-style: normal; font-weight: 600;
  background: linear-gradient(transparent 64%, rgba(200,160,60,.42) 64%); }
.hj .lead { font-size: 1.12rem; line-height: 1.85; }
.hj-close { color: var(--meok-2); font-size: .82rem; border-top: 1px solid var(--gwak);
  padding-top: .9rem; margin-top: 1.3rem; }

/* 도깨비 말 — 리듬의 핵심 */
.hj-mal { border-top: 1px solid var(--gwak); border-bottom: 1px solid var(--gwak);
  padding: 1.1rem 0; margin: 1.6rem 0;
  font-family: "Gowun Batang", serif; font-size: 1.06rem; line-height: 1.8; }
.hj-mal::before { content: "도깨비 말"; display: block;
  font-family: "IBM Plex Mono", monospace; font-size: .58rem;
  letter-spacing: .24em; color: var(--jumuk); margin-bottom: .5rem; }

/* ── 괘 ──────────────────────────────────────────────────── */
.hj-gwae { border: 1px solid var(--gwak); padding: 1.2rem 1.1rem 1rem; margin: 1.6rem 0; text-align: center; }
.hj-gwae-sym { font-size: 2.5rem; line-height: 1.15; color: var(--meok); letter-spacing: .25em; }
.hj-gwae-nm { font-family: "Gowun Batang", serif; font-weight: 700; font-size: 1.15rem; margin: .5rem 0 .1rem; }
.hj-gwae-tri { font-family: "IBM Plex Mono", monospace; font-size: .62rem; letter-spacing: .12em; color: var(--meok-2); }
.hj-gwae-won { font-family: "Gowun Batang", serif; font-size: .95rem; color: var(--jumuk);
  margin: .9rem 0 .2rem; letter-spacing: .08em; }
.hj-gwae-tr { font-size: .82rem; color: var(--meok-2); margin: 0; }

/* ── 데이터 ──────────────────────────────────────────────── */
.hj-data { margin: 1.5rem 0 1.7rem; }
.hj-data-t { font-family: "IBM Plex Mono", monospace; font-size: .6rem;
  letter-spacing: .24em; color: var(--meok-2); margin: 0 0 .8rem; }
.hj-row { display: grid; grid-template-columns: 4.6rem 1fr 1.6rem; align-items: center; gap: .6rem; margin: .3rem 0; }
.hj-row .nm { display: flex; align-items: baseline; gap: .22rem; font-size: .86rem; }
.hj-row .nm b { font-weight: 600; }
.hj-row .nm i { font-style: normal; font-size: .62rem; color: var(--meok-2); }
.hj-track { height: .42rem; background: rgba(31,28,23,.09); position: relative; display: block; }
.hj-fill { height: 100%; display: block; }
.hj-row .vv { font-family: "IBM Plex Mono", monospace; font-size: .78rem; color: var(--meok-2); text-align: right; }
.hj-gloss { grid-column: 2 / 4; font-size: .7rem; color: var(--meok-2); margin: 0 0 .55rem; line-height: 1.6; }

/* 운명지수 */
.hj-idx { border: 1px solid var(--gwak); padding: 1.15rem 1.1rem .9rem; margin: 1.6rem 0; }
.hj-idx-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1rem; }
.hj-idx-top b { font-family: "Gowun Batang", serif; font-size: 2.1rem; color: var(--jjok); line-height: 1; }
.hj-idx-top span { font-family: "IBM Plex Mono", monospace; font-size: .6rem; letter-spacing: .2em; color: var(--meok-2); }
.hj-ax { display: grid; grid-template-columns: 5.2rem 1fr 2.6rem; align-items: center; gap: .55rem; margin: .38rem 0; font-size: .84rem; }
.hj-ax .pc { font-family: "IBM Plex Mono", monospace; font-size: .72rem; color: var(--meok-2); text-align: right; }
.hj-ax.top .lb { color: var(--jumuk); font-weight: 600; }
.hj-note { font-size: .72rem; color: var(--meok-2); line-height: 1.7; margin: .9rem 0 0; }
.hj-note a { color: var(--jjok); }

/* 대운 띠 */
.hj-flow { display: grid; grid-template-columns: repeat(8, 1fr); gap: .28rem; margin: 1.2rem 0 .6rem; }
.hj-dae { border: 1px solid var(--gwak); padding: .5rem .1rem .4rem; text-align: center; background: rgba(255,255,255,.35); }
.hj-dae.now { border-color: var(--jumuk); background: rgba(163,43,30,.07); }
.hj-dae .ag { font-family: "IBM Plex Mono", monospace; font-size: .55rem; color: var(--meok-2); display: block; }
.hj-dae .gz { font-family: "Gowun Batang", serif; font-weight: 700; font-size: .92rem; display: block; margin-top: .15rem; }
.hj-dae.yong .gz { color: #33612F; }

/* 열두 달 */
.hj-wol { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; margin: 1.3rem 0 .7rem; }
.hj-wol-c { border: 1px solid var(--gwak); background: rgba(255,255,255,.35); padding: .5rem .2rem .45rem; text-align: center; }
.hj-wol-c .mm { font-family: "IBM Plex Mono", monospace; font-size: .56rem; color: var(--meok-2); display: block; }
.hj-wol-c .gz { font-family: "Gowun Batang", serif; font-weight: 700; font-size: .9rem; display: block; margin: .12rem 0; }
.hj-wol-c .mk { font-size: .58rem; color: var(--meok-2); display: block; }
.hj-wol-c.on { border-color: #33612F; background: rgba(51,97,47,.08); }
.hj-wol-c.on .gz { color: #33612F; }
.hj-wol-c.gm { border-color: var(--jumuk); background: rgba(163,43,30,.06); }
.hj-wol-c.gm .gz { color: var(--jumuk); }

/* 처방 */
.hj-do { border-left: 3px solid var(--jjok); padding: .1rem 0 .1rem .9rem; margin: 1.2rem 0; }
.hj-do dt { font-family: "IBM Plex Mono", monospace; font-size: .58rem; letter-spacing: .2em; color: var(--jjok); }
.hj-do dd { margin: .2rem 0 1rem; font-size: .95rem; }
.hj-do dd:last-child { margin-bottom: .1rem; }

/* 낙관 */
.hj-nak { text-align: center; padding: 2.4rem 0 1rem; }
.hj-seal { display: inline-grid; place-items: center; width: 4.2rem; height: 4.2rem;
  border: 3px solid var(--jumuk); color: var(--jumuk);
  font-family: "Gowun Batang", serif; font-weight: 700; font-size: 1.05rem; line-height: 1.15;
  transform: rotate(-6deg); animation: hjStamp .5s cubic-bezier(.2,.9,.3,1) both; }
@keyframes hjStamp { from { opacity: 0; transform: rotate(-6deg) scale(1.6); } to { opacity: .9; transform: rotate(-6deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .hj-seal { animation: none; opacity: .9; } }
.hj-nak p { font-size: .8rem; color: var(--meok-2); margin: 1rem 0 0; }

/* 부록 */
.hj-appx { border-top: 1px solid var(--gwak); margin-top: 2.6rem; padding-top: 1.6rem;
  font-size: .8rem; color: var(--meok-2); line-height: 1.85; }
.hj-appx h4 { font-family: "IBM Plex Mono", monospace; font-size: .58rem; letter-spacing: .24em;
  color: var(--meok-2); margin: 1.3rem 0 .5rem; font-weight: 400; }
.hj-appx dl { display: grid; grid-template-columns: 4.2rem 1fr; gap: .1rem .7rem; margin: 0; }
.hj-appx dt { color: var(--meok); font-weight: 600; }
.hj-appx dd { margin: 0 0 .35rem; }

/* 접근성 — 조용한 바닥 */
.hj a:focus-visible, .hj button:focus-visible { outline: 2px solid var(--jumuk); outline-offset: 2px; }

/* ══════════════════════════════════════════════════════════════════════
 * 인쇄(PDF) — 화면과 같은 판면으로 나간다. 색을 바꾸지 않는다.
 * 번들 Bo의 PRINT_CSS를 이것으로 교체한다.
 * ══════════════════════════════════════════════════════════════════════ */
@media print {
  @page { size: A4; margin: 16mm 14mm; }
  .hj { background: #fff; max-width: none; font-size: 10.5pt; line-height: 1.85; padding: 0; }
  .hj-myeon { background: #fff; border: 0; padding: 0; }
  .hj-guide, .hj-nak .hj-seal { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .hj-jang { break-before: page; page-break-before: always; padding-top: 0; border-top: 0; }
  .hj-cover { break-after: page; page-break-after: always; }
  .hj-gwae, .hj-idx, .hj-won, .hj-wol, .hj-flow, .hj-mal, .hj-do,
  .hj-data, .hj-nak { break-inside: avoid; page-break-inside: avoid; }
  .hj-sub { break-after: avoid; page-break-after: avoid; }
  .hj-su { font-size: 20pt; }
  .hj-jang-t { font-size: 15pt; }
  .hj-ko { font-size: 13pt; }
  .hj-cell, .hj-dae, .hj-wol-c { background: #fff; }
  .hj-cell.on, .hj-wol-c.on, .hj-wol-c.gm, .hj-dae.now,
  .hj em.hi, .hj-fill, .hj-seal, .hj-dojang {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .hj-note a { color: inherit; text-decoration: none; }
  .hj-appx { break-before: page; page-break-before: always; }
}

/* ── 2026-08-28(개정75) 궁합·점술 AI 해설의 챕터 제목 ──────────────────
 * Gf()가 그리는 결과에 장 제목이 없어 상품구성과 맞춰볼 수 없었다.
 * 이 흐름(궁합·토정비결·주역)은 전체화면 어두운 스킨 위에 뜨므로
 * 같은 자리에서 쓰던 .cm-fu-title 과 같은 금색 계열로 맞춘다.
 * ⚠ 밝은 배경 화면에 이 흐름을 올리게 되면 색을 다시 봐야 한다. */
.ai-chap { margin: 0 0 1.7rem; padding-top: 1.1rem;
  border-top: 1px dashed rgba(201,162,74,.25); }
.ai-chap:first-of-type { border-top: none; padding-top: 0; }
.ai-chap-h { font-family: var(--ol-serif, serif); color: #e8c987;
  font-size: 1.12rem; letter-spacing: .02em; line-height: 1.4; margin: 0 0 .6rem; }
.ai-chap .ai-reading p { line-height: 1.9; margin: 0 0 .85rem; }
.ai-chap .ai-reading .sub-h { font-size: 1rem; color: #ffedc8; margin: 1.1rem 0 .5rem; }
.ai-miss { margin: 0 0 1.2rem; padding: .65rem .85rem; border-radius: .5rem;
  background: rgba(201,162,74,.12); border: 1px solid rgba(201,162,74,.3); }
.ai-miss p { margin: 0; font-size: .9rem; color: #e8c987; }
@media (max-width: 480px) { .ai-chap-h { font-size: 1.04rem; } }

/* ── 2026-08-28(개정78) 저장 바 안내 문구가 세로 한 줄로 짜부라지던 문제 ──
 * .cm-dlbar 는 가로 flex인데 줄바꿈이 없어, 개정54에서 공유 버튼이 늘어
 * 버튼이 4개가 되자 남은 폭이 0에 가까워졌다. 버튼은 flex:none 이라
 * 안 줄고 안내 <p>만 한 글자 폭으로 눌려 세로로 흘렀다(대표님 화면 실측).
 * 폭이 모자라면 안내가 아랫줄로 내려가게 한다. */
.cm-dlbar { flex-wrap: wrap; }
.cm-dlbar p { flex: 1 1 16rem; min-width: 12rem; }

/* ── 2026-08-28(개정79) 기다리는 동안의 화면 ────────────────────────
 * 대표님 지시 — "궁합보기를 누르면 가만히 있지 말고 지루하지 않게 하라."
 * 진행 막대 · 장별 골격 · 도착한 장이 부드럽게 나타나는 연출.
 * 이 흐름(궁합·토정비결·주역)은 전체화면 어두운 스킨 위에 뜬다. */
.ai-prog { margin: 0 0 1.4rem; }
.ai-prog-top { display: flex; align-items: baseline; justify-content: space-between;
  gap: .8rem; margin: 0 0 .5rem; }
.ai-prog-txt { margin: 0; font-size: .88rem; color: #e8ddc8; line-height: 1.5;
  transition: opacity .4s; }
.ai-prog-num { font-size: .82rem; color: #c9a24a; white-space: nowrap; letter-spacing: .03em; }
.ai-prog-bar { height: 4px; border-radius: 999px; overflow: hidden;
  background: rgba(201,162,74,.16); }
.ai-prog-fill { display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #a9824f, #e8c987);
  transition: width .5s ease; }
/* 아직 아무것도 안 왔을 때도 살아 있음을 보인다 */
.ai-prog:not(.done) .ai-prog-bar::after { content: ""; display: block; height: 100%;
  width: 32%; margin-top: -4px; border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(232,201,135,.5), transparent);
  animation: ol-sweep 1.9s linear infinite; }
.ai-prog.done .ai-prog-num, .ai-prog.done .ai-prog-txt { color: #e8c987; }
.ai-prog.part .ai-prog-num { color: #d99; }
@keyframes ol-sweep { from { transform: translateX(-120%) } to { transform: translateX(360%) } }

/* 장별 골격 — 글이 들어오기 전 자리 */
.ai-skel { display: block; }
.ai-skel span { display: block; height: .72rem; margin: 0 0 .6rem; border-radius: .3rem;
  background: linear-gradient(90deg, rgba(201,162,74,.10) 25%, rgba(201,162,74,.22) 50%, rgba(201,162,74,.10) 75%);
  background-size: 200% 100%; animation: ol-shimmer 1.6s linear infinite; }
.ai-skel span:nth-child(2) { width: 92%; animation-delay: .18s }
.ai-skel span:nth-child(3) { width: 68%; animation-delay: .36s }
@keyframes ol-shimmer { from { background-position: 200% 0 } to { background-position: -200% 0 } }

.ai-chap.waiting .ai-chap-h { opacity: .55; }
.ai-chap.in { animation: ol-rise .45s ease both; }
@keyframes ol-rise { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
.ai-chap.failed .ai-chap-h { opacity: .55; }
.ai-chap.failed .hint { color: #d9b0b0; font-size: .86rem; margin: 0; }

/* 움직임을 줄여 달라고 설정한 손님에게는 애니메이션을 끈다 */
@media (prefers-reduced-motion: reduce) {
  .ai-skel span, .ai-prog:not(.done) .ai-prog-bar::after { animation: none; }
  .ai-chap.in { animation: none; }
  .ai-prog-fill { transition: none; }
}

/* ── 2026-08-28(개정82) 궁합 리포트 디자인 ──────────────────────────
 * 대표님 지시 — "중요한 것을 색연필로 칠하고, 섹션별로 분리해 가독성을
 * 높이고, 시각화를 넣어라." 타사 프리미엄 양식의 시각 언어를 가져오되
 * 그리는 값은 전부 엔진 계산값만 쓴다(점수·등급 창작 금지). */

/* ① 형광펜 — AI가 **굵게** 표시한 핵심 문장을 색연필로 칠한 듯이 */
.ai-chap .ai-reading strong {
  font-weight: 700; color: #ffe9bd; padding: 0 .12em; border-radius: .15em;
  background: linear-gradient(transparent 52%, rgba(201,162,74,.34) 52%, rgba(201,162,74,.22) 100%);
  box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ② 장 카드 — 섹션별 분리. 번호 배지 + 금색 머리선 */
.ai-result { counter-reset: aichap; }
.ai-chap {
  counter-increment: aichap;
  background: rgba(255,255,255,.028);
  border: 1px solid rgba(201,162,74,.22);
  border-top: none; padding: 1.15rem 1.15rem 1rem; border-radius: .85rem;
  margin: 0 0 1.15rem; position: relative; overflow: hidden; }
.ai-chap::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, rgba(201,162,74,.65), rgba(201,162,74,.05)); }
.ai-chap:first-of-type { border-top: none; padding-top: 1.15rem; }
.ai-chap-h { display: flex; align-items: baseline; gap: .55rem; margin: 0 0 .7rem; }
.ai-chap-h::before { content: counter(aichap, decimal-leading-zero);
  font-family: var(--ol-serif, serif); font-size: .8rem; color: rgba(201,162,74,.85);
  border: 1px solid rgba(201,162,74,.45); border-radius: .35rem;
  padding: .1rem .38rem; letter-spacing: .06em; flex: none; }
.ai-chap .ai-reading h3.sub-h { border-left: 3px solid rgba(201,162,74,.55);
  padding-left: .55rem; margin: 1.15rem 0 .5rem; }

/* ③ 「두 사람 한눈에 보기」 시각 패널 */
.gh-viz { margin: 1.4rem 0 .4rem; padding: 1.05rem 1rem .8rem;
  border: 1px solid rgba(201,162,74,.3); border-radius: .85rem;
  background: rgba(201,162,74,.05); }
.gh-viz > .sub-h { margin: 0 0 .85rem; }
.gh-vs { display: flex; align-items: center; justify-content: space-between;
  gap: .7rem; margin: 0 0 1rem; }
.gh-dm { display: flex; flex-direction: column; align-items: center; gap: .18rem;
  min-width: 5.2rem; }
.gh-dm-dot { width: 2.1rem; height: 2.1rem; border-radius: 50%; display: block;
  box-shadow: 0 0 0 3px rgba(255,255,255,.08), 0 0 14px rgba(201,162,74,.25); }
.gh-dm b { font-size: .92rem; color: #f0ead9; }
.gh-dm span { font-size: .78rem; color: #bdb39a; }
.gh-vs-rel { flex: 1; text-align: center; }
.gh-vs-arrow { display: block; font-size: 1.25rem; color: #e8c987; line-height: 1; }
.gh-vs-rel em { font-style: normal; font-size: .82rem; color: #e8ddc8; line-height: 1.5;
  display: inline-block; margin-top: .25rem; }
.gh-gauges { margin: 0 0 1.05rem; }
.gh-g-scale { display: flex; justify-content: space-between; margin: 0 0 .25rem;
  font-size: .72rem; color: #9d9480; }
.gh-gauge { display: grid; grid-template-columns: 4.6rem 1fr 3.4rem;
  align-items: center; gap: .55rem; margin: 0 0 .5rem; }
.gh-g-name { font-size: .82rem; color: #e8ddc8; text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gh-g-bar { position: relative; height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(111,159,200,.4), rgba(201,162,74,.18), rgba(224,108,90,.4)); }
.gh-g-mark { position: absolute; top: 50%; width: 12px; height: 12px;
  border-radius: 50%; background: #e8c987; border: 2px solid #2a241a;
  transform: translate(-50%, -50%); }
.gh-g-verdict { font-size: .8rem; color: #e8c987; }
.gh-legend { display: flex; align-items: center; gap: .4rem; margin: 0 0 .55rem;
  font-size: .76rem; color: #bdb39a; }
.gh-legend i { width: .8rem; height: .8rem; border-radius: .2rem; display: inline-block; }
.gh-legend i.a, .gh-e-bar.a { background: linear-gradient(90deg, #a9824f, #e8c987); }
.gh-legend i.b, .gh-e-bar.b { background: linear-gradient(90deg, #4f7d74, #9ecfc0); }
.gh-legend i.b { margin-left: .6rem; }
.gh-e-row { display: grid; grid-template-columns: 1.6rem 1fr; align-items: center;
  gap: .55rem; margin: 0 0 .45rem; }
.gh-e-name { font-family: var(--ol-serif, serif); font-size: .95rem; text-align: center; }
.gh-e-bars { display: flex; flex-direction: column; gap: .18rem; }
.gh-e-bar { height: .86rem; min-width: 1.15rem; border-radius: .22rem;
  position: relative; transition: width .6s ease; }
.gh-e-bar b { position: absolute; right: .28rem; top: 50%; transform: translateY(-50%);
  font-size: .66rem; color: rgba(20,16,10,.85); font-weight: 700; }
.gh-viz .note { margin: .4rem 0 0; font-size: .74rem; }
@media (max-width: 480px) {
  .gh-vs { flex-direction: column; }
  .gh-vs-rel { order: 2; }
  .gh-gauge { grid-template-columns: 3.6rem 1fr 3rem; } }
@media (prefers-reduced-motion: reduce) { .gh-e-bar { transition: none; } }

/* ── 2026-08-28(개정83) 천년궁합 지수 ── */
.gh-idx { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center;
  margin: 0 0 1.1rem; }
.gh-idx-ring { position: relative; width: 6.4rem; height: 6.4rem; }
.gh-idx-svg, .gh-idx-svg svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gh-idx-num { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-family: var(--ol-serif, serif); font-size: 1.9rem;
  color: #ffe9bd; letter-spacing: .02em; }
/* 개정84 보정: 띠 문구가 링 원 밖으로 삐져나와(실측 스크린샷) 링 아래로 내림 */
.gh-idx-band { position: absolute; left: -1.5rem; right: -1.5rem; bottom: -1.15rem;
  text-align: center; font-size: .66rem; color: #c9a24a; letter-spacing: .02em;
  white-space: nowrap; }
.gh-idx-ring { margin-bottom: 1.15rem; }
.gh-idx-axes { display: flex; flex-direction: column; gap: .38rem; }
.gh-idx-row { display: grid; grid-template-columns: 4.2rem 1fr 1.7rem 2.4rem;
  align-items: center; gap: .45rem; }
.gh-idx-name { font-size: .78rem; color: #d9cfb6; }
.gh-idx-bar { height: 5px; border-radius: 999px; background: rgba(201,162,74,.14); overflow: hidden; }
.gh-idx-bar i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #a9824f, #e8c987); }
.gh-idx-score { font-size: .78rem; color: #ffe9bd; text-align: right; font-weight: 700; }
.gh-idx-star { font-size: .62rem; color: #c9a24a; letter-spacing: .08em; }
@media (max-width: 400px) { .gh-idx { grid-template-columns: 1fr; justify-items: center; }
  .gh-idx-axes { width: 100%; } }

/* ── 2026-08-28(개정84) 궁합 시각화 확장 ── */
.gh-radar { display: flex; justify-content: center; margin: .2rem 0 1rem; }
.gh-radar svg { width: min(15.5rem, 78vw); height: auto; }
.gh-mo { margin: .4rem 0 1rem; }
.gh-mo-row { display: grid; grid-template-columns: 3.4rem repeat(12, 1fr); gap: 2px;
  align-items: stretch; margin: 0 0 3px; }
.gh-mo-name { font-size: .72rem; color: #d9cfb6; align-self: center; text-align: right;
  padding-right: .35rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gh-mo-cell { display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: .22rem 0 .26rem; border-radius: .28rem;
  background: color-mix(in srgb, var(--gc, #c9a24a) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--gc, #c9a24a) 34%, transparent); }
.gh-mo-cell i { font-style: normal; font-size: .56rem; color: #9d9480; line-height: 1; }
.gh-mo-cell b { font-size: .6rem; color: #f0ead9; line-height: 1.1; letter-spacing: -.02em; }
.gh-mo-cell.same { box-shadow: 0 0 0 1px rgba(232,201,135,.75) inset; }
.gh-mo-cell.same::after { content: "◈"; font-size: .5rem; color: #e8c987; line-height: 1; }
.gh-mo-legend { display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: center;
  margin: .45rem 0 0; font-size: .7rem; color: #bdb39a; }
.gh-mo-lg { display: inline-flex; gap: .55rem; flex-wrap: wrap; }
.gh-mo-lg span { display: inline-flex; align-items: center; gap: .22rem; }
.gh-mo-lg i { width: .62rem; height: .62rem; border-radius: .16rem; display: inline-block; }
.gh-mo-samekey { color: #e8c987; }
.gh-e-row { grid-template-columns: 1.6rem 1fr 2.6rem; }
.gh-e-sum { font-size: .68rem; color: #c9a24a; text-align: right; white-space: nowrap; }
.gh-cards-wrap { margin: .3rem 0 .2rem; }
.gh-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.gh-card { border: 1px solid rgba(201,162,74,.28); border-radius: .6rem;
  padding: .6rem .65rem .55rem; background: rgba(255,255,255,.025); }
.gh-card-tag { display: block; font-size: .64rem; color: #c9a24a; margin: 0 0 .12rem;
  letter-spacing: .04em; }
.gh-card-t { display: block; font-family: var(--ol-serif, serif); font-size: .95rem;
  color: #ffe9bd; margin: 0 0 .3rem; }
.gh-card p { margin: 0; font-size: .76rem; color: #d9cfb6; line-height: 1.55; }
/* 장별 미니 시각화 */
.gh-cv { margin: 1rem 0 .2rem; padding: .8rem .8rem .6rem;
  border: 1px dashed rgba(201,162,74,.35); border-radius: .6rem;
  background: rgba(201,162,74,.05); }
.gh-cv-h { margin: 0 0 .55rem; font-size: .84rem; color: #e8c987; font-weight: 700; }
.gh-cv-row { display: grid; grid-template-columns: 4.6rem 1fr 1.7rem; gap: .5rem;
  align-items: center; margin: 0 0 .34rem; font-size: .76rem; color: #d9cfb6; }
.gh-cv-bar { height: 6px; border-radius: 999px; }
.gh-cv-bar.a { background: linear-gradient(90deg, #a9824f, #e8c987); }
.gh-cv-bar.b { background: linear-gradient(90deg, #4f7d74, #9ecfc0); }
.gh-cv-row b { text-align: right; color: #ffe9bd; }
.gh-cv .note { margin: .3rem 0 0; font-size: .7rem; }
.gh-dn-lane { display: flex; align-items: center; gap: 3px; margin: 0 0 .4rem;
  overflow-x: auto; padding-bottom: .15rem; }
.gh-dn-name { flex: none; width: 3.4rem; font-size: .72rem; color: #d9cfb6;
  text-align: right; padding-right: .3rem; overflow: hidden; white-space: nowrap; }
.gh-dn-seg { flex: 1 0 2.5rem; display: flex; flex-direction: column; align-items: center;
  gap: 1px; padding: .24rem 0; border-radius: .3rem;
  background: rgba(201,162,74,.1); border: 1px solid rgba(201,162,74,.3); }
.gh-dn-seg i { font-style: normal; font-size: .56rem; color: #9d9480; line-height: 1; }
.gh-dn-seg b { font-size: .64rem; color: #f0ead9; line-height: 1.1; }
.gh-dn-none { font-size: .74rem; color: #9d9480; }
@media (max-width: 420px) { .gh-cards { grid-template-columns: 1fr; }
  .gh-mo-row { grid-template-columns: 2.6rem repeat(12, 1fr); } }

/* ── 2026-08-28(개정89) 못 받은 장 되찾기 ── */
.ai-retry { margin: 1rem 0 .2rem; padding: .85rem .9rem .7rem; text-align: center;
  border: 1px dashed rgba(201,162,74,.4); border-radius: .6rem;
  background: rgba(201,162,74,.06); }
.ai-retry button { margin: 0 0 .35rem; }
.ai-retry button[disabled] { opacity: .6; cursor: default; }
.ai-retry .hint { margin: 0; font-size: .76rem; }
.ai-chap.failed { border-color: rgba(201,162,74,.16); }
.ai-chap.failed .hint { color: #bda98a; }

/* ── 2026-08-28(개정91) 팔택 궁합 매트릭스 8×8 ── */
.gh-mx { margin: 1.1rem 0 .4rem; }
.gh-mx-me { margin: 0 0 .5rem; font-size: .8rem; color: #e8c987; }
.gh-mx-grid { display: grid; grid-template-columns: 1.5rem repeat(8, 1fr); gap: 2px; }
.gh-mx-corner { }
.gh-mx-h { display: flex; align-items: center; justify-content: center;
  font-family: var(--ol-serif, serif); font-size: .72rem; color: #bdb39a; padding: .15rem 0; }
.gh-mx-c { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0; padding: .22rem 0 .26rem; border-radius: .22rem; position: relative;
  border: 1px solid transparent; }
.gh-mx-c.gil { background: rgba(201,162,74,.15); border-color: rgba(201,162,74,.24); }
.gh-mx-c.hyung { background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.07); }
.gh-mx-c b { font-size: .66rem; color: #f0ead9; line-height: 1.1; }
.gh-mx-c i { font-style: normal; font-size: .5rem; color: #9d9480; line-height: 1.1;
  letter-spacing: -.03em; }
.gh-mx-c.hit { background: rgba(232,201,135,.32); border-color: #e8c987;
  box-shadow: 0 0 0 1px #e8c987; }
.gh-mx-c.hit b { color: #fff4dc; font-weight: 700; }
.gh-mx-c.hit i { color: #e8c987; }
.gh-mx-out { display: flex; gap: .8rem; align-items: flex-start; margin: .75rem 0 0;
  padding: .7rem .75rem; border: 1px solid rgba(201,162,74,.3); border-radius: .55rem;
  background: rgba(201,162,74,.06); }
.gh-mx-score { font-family: var(--ol-serif, serif); font-size: 1.8rem; color: #ffe9bd;
  line-height: 1; flex: none; }
.gh-mx-head { margin: 0 0 .2rem; font-size: .84rem; color: #e8c987; font-weight: 700; }
.gh-mx-out p { margin: 0; font-size: .78rem; color: #d9cfb6; line-height: 1.55; }
@media (max-width: 420px) {
  .gh-mx-grid { grid-template-columns: 1.1rem repeat(8, 1fr); gap: 1px; }
  .gh-mx-c i { display: none; }
  .gh-mx-c b { font-size: .6rem; }
  .gh-mx-h { font-size: .62rem; } }

/* ── 2026-08-29(개정106) 오행 한 막대 · 매트릭스 읽는 법 · 주제 지수 ── */
.gh-e-track { height: 1.05rem; border-radius: .25rem; background: rgba(255,255,255,.05); }
.gh-e-stack { display: flex; height: 100%; border-radius: .25rem; overflow: hidden;
  min-width: 1.6rem; transition: width .6s ease; }
.gh-e-seg { display: flex; align-items: center; justify-content: center; min-width: 1.1rem; }
.gh-e-seg.a { background: linear-gradient(90deg, #a9824f, #e8c987); }
.gh-e-seg.b { background: linear-gradient(90deg, #4f7d74, #9ecfc0); }
.gh-e-seg.none { background: rgba(255,255,255,.07); flex: 1; }
.gh-e-seg b { font-size: .66rem; color: rgba(20,16,10,.85); font-weight: 700; }
.gh-e-seg.none b { color: #7a7263; }
.gh-mx-how { margin: .1rem 0 .8rem; padding: .7rem .8rem; border-radius: .5rem;
  background: rgba(255,255,255,.035); border: 1px solid rgba(201,162,74,.2); }
.gh-mx-how b { display: block; font-size: .8rem; color: #e8c987; margin: 0 0 .35rem; }
.gh-mx-how p { margin: 0 0 .35rem; font-size: .76rem; color: #d9cfb6; line-height: 1.65; }
.gh-mx-how p:last-child { margin-bottom: 0; }
.gh-topic { display: flex; gap: .75rem; align-items: center; margin: .7rem 0 0;
  padding: .65rem .7rem; border-radius: .5rem; background: rgba(201,162,74,.1);
  border: 1px solid rgba(201,162,74,.3); }
.gh-topic-score { font-family: var(--ol-serif, serif); font-size: 1.9rem; color: #ffe9bd;
  line-height: 1; flex: none; }
.gh-topic-band { margin: 0 0 .15rem; font-size: .84rem; color: #e8c987; font-weight: 700; }
.gh-topic .note { margin: 0; font-size: .72rem; }
@media (prefers-reduced-motion: reduce) { .gh-e-stack { transition: none; } }