/* =========================================================
   별빛사주 디자인 시스템 (첨부 디자인 시트 기반)
   팔레트: #0C1022 #1A1F3A #2E3360 #7B6CF6 #BDA97A #F4EBD2 #FFFFFF
   서체: Pretendard (제목/본문), Gowun Dodum (포인트)
   타깃: 50대 이상 여성 → 큰 글자, 높은 대비, 큰 터치 영역
   ========================================================= */
/* 글꼴은 '쓰는 글자 묶음만' 받는 방식(dynamic subset) — 통째로 받으면 굵기 다섯 개에 3.8MB, 이 방식은 화면에 나온 글자가 든 조각만 받는다 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css');
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Gowun+Batang:wght@400;700&display=swap');

:root {
  --navy-900: #0C1022; --navy-800: #1A1F3A; --navy-700: #2E3360; --navy-600: #3d4380;
  --violet: #7B6CF6; --violet-dark: #5a4bd6; --gold: #BDA97A; --gold-light: #E8D6A0; --gold-dark: #9c8a5c;
  --cream: #F4EBD2; --white: #FFFFFF; --muted: #A9AEC9; --danger: #ff7b7b; --ok: #7fd8a5;
  --grad-gold: linear-gradient(135deg, #E8D6A0 0%, #BDA97A 55%, #a8935f 100%);
  --grad-violet: linear-gradient(135deg, #8a7cff 0%, #5f50d8 100%);
  --grad-card: linear-gradient(180deg, rgba(46,51,96,.75) 0%, rgba(26,31,58,.95) 100%);
  --radius: 16px; --radius-lg: 22px; --shadow: 0 10px 30px rgba(0,0,0,.35);
  --fs: 17px; --maxw: 480px; --nav-h: 66px;
  --font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-point: 'Gowun Dodum', 'Gowun Batang', 'Nanum Myeongjo', serif;
}
/* 오행 색 (0 목 · 1 화 · 2 토 · 3 금 · 4 수) — 전통 오방색을 보석빛으로 가라앉힌 색.
   목 비취 · 화 연지 · 토 황금 · 금 백자 · 수 쪽빛. 수는 전통 색이 검정이지만 어두운 화면에서는 보이지 않아 쪽빛으로 둔다.
   --elN 채움의 위쪽 · --elN-d 아래쪽 · --elN-ink 채움 위의 글자 · --elN-t 어두운 바탕 위에 글자로 쓸 때 · --el-line 금빛 테두리 */
:root {
  --el0: #2B8F6C; --el0-d: #155E46; --el0-ink: #FAF3E0; --el0-t: #63D1A6;
  --el1: #C6463D; --el1-d: #952729; --el1-ink: #FFF5EA; --el1-t: #F28A80;
  --el2: #EBC466; --el2-d: #C5932A; --el2-ink: #2B1D06; --el2-t: #F0CD74;
  --el3: #FCF9F1; --el3-d: #D8D1C0; --el3-ink: #1A1F3A; --el3-t: #FBF7EC;
  --el4: #3D66BA; --el4-d: #213B80; --el4-ink: #F3F6FF; --el4-t: #88ABF2;
  --el-line: rgba(232,214,160,.62); --el-sh-l: 0 1px 2px rgba(0,0,0,.35); --el-sh-d: 0 1px 0 rgba(255,255,255,.5); --el-tag-l: rgba(0,0,0,.2); --el-tag-d: rgba(255,255,255,.42);
}
html.big { --fs: 19.5px; }
html.big .btn { min-height: 62px; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: var(--fs); scroll-behavior: smooth; -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; }
/* 카카오톡·네이버 등 앱 안 브라우저: 앱의 글자 크기 설정(텍스트 줌)이 끼어들어 글자만 작아지는 일이 있어, 글자 크기를 화면 폭 기준으로 다시 잡는다 */
html.inapp { -webkit-text-size-adjust: none !important; text-size-adjust: none !important; }
html.inapp.big { --fs: 19.5px; }
body { margin: 0; font-family: var(--font); color: var(--white); background: var(--navy-900); line-height: 1.6; word-break: keep-all; overflow-x: hidden; }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; background:
  radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,.75) 50%, transparent 51%),
  radial-gradient(1px 1px at 78% 8%, rgba(255,255,255,.65) 50%, transparent 51%),
  radial-gradient(1.2px 1.2px at 40% 45%, rgba(244,235,210,.7) 50%, transparent 51%),
  radial-gradient(1px 1px at 88% 62%, rgba(255,255,255,.55) 50%, transparent 51%),
  radial-gradient(1.8px 1.8px at 25% 80%, rgba(189,169,122,.8) 50%, transparent 51%),
  radial-gradient(1px 1px at 60% 92%, rgba(255,255,255,.5) 50%, transparent 51%),
  radial-gradient(1.4px 1.4px at 95% 30%, rgba(255,255,255,.6) 50%, transparent 51%),
  radial-gradient(1px 1px at 8% 55%, rgba(255,255,255,.5) 50%, transparent 51%),
  radial-gradient(ellipse at 50% -10%, #2E3360 0%, var(--navy-900) 60%); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; font-size: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 1rem; }
h1, h2, h3 { margin: 0; line-height: 1.3; }
p { margin: 0 0 .9em; }
small { font-size: .82em; color: var(--muted); }
.app { max-width: var(--maxw); margin: 0 auto; min-height: 100vh; padding-bottom: calc(var(--nav-h) + 24px); position: relative; }
.app.no-nav { padding-bottom: 32px; }
.container { padding: 0 18px; }
.point { font-family: var(--font-point); }
.gold { color: var(--gold-light); }
.violet { color: #a99dff; }
.muted { color: var(--muted); }
.center { text-align: center; }
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}.mb8{margin-bottom:8px}.mb16{margin-bottom:16px}.mb24{margin-bottom:24px}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: rgba(12,16,34,.85); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(189,169,122,.25); }
.logo { display: flex; align-items: center; gap: 8px; font-family: var(--font-point); font-size: 1.35rem; color: var(--gold-light); letter-spacing: .5px; }
.logo .moon { width: 28px; height: 28px; flex: none; }
.logo span { white-space: nowrap; }
.topbar .logo.sub { font-size: 1.15rem; }
.topbar .actions { display: flex; gap: 8px; align-items: center; }
.icon-btn { background: transparent; border: 1px solid rgba(189,169,122,.5); color: var(--gold-light); border-radius: 999px; padding: 8px 14px; font-size: .9rem; min-height: 40px; display: inline-flex; align-items: center; gap: 6px; }
.icon-btn.active { background: rgba(189,169,122,.2); }
.back-btn { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(232,214,160,.6); background: rgba(232,214,160,.12); color: var(--gold-light); display: inline-flex; align-items: center; justify-content: center; padding: 0; margin-right: 2px; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.back-btn svg { width: 20px; height: 20px; }
.back-btn:active { background: rgba(232,214,160,.28); }
.topbar .left { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
.topbar .logo { min-width: 0; }
.topbar .logo span { overflow: hidden; text-overflow: ellipsis; }
.topbar .actions { flex: none; }
.icon-btn { white-space: nowrap; flex: none; }
.icon-btn .nm { display: block; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 58px; padding: 14px 20px; border-radius: 14px; border: 0; font-weight: 700; font-size: 1.1rem; letter-spacing: .2px; transition: transform .12s, box-shadow .2s, opacity .2s; text-align: center; }
.btn:active { transform: scale(.985); }
.btn-primary { background: var(--grad-gold); color: var(--navy-900); box-shadow: 0 8px 24px rgba(189,169,122,.35); }
.btn-secondary { background: var(--grad-violet); color: var(--white); border: 1px solid rgba(232,214,160,.6); box-shadow: 0 8px 24px rgba(123,108,246,.3); }
.btn-ghost { background: transparent; color: var(--gold-light); border: 1.5px solid var(--gold); }
.btn-dark { background: var(--navy-700); color: var(--cream); border: 1px solid rgba(189,169,122,.3); }
.btn-sm { min-height: 44px; padding: 8px 16px; font-size: .95rem; width: auto; border-radius: 10px; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }
.btn .arrow { font-size: 1.2em; }
.btn-text { background: transparent; border: 0; color: var(--gold-light); text-decoration: underline; text-underline-offset: 4px; padding: 10px; font-size: 1rem; }

/* ---------- Cards / Frames ---------- */
.card { background: var(--grad-card); border: 1px solid rgba(189,169,122,.35); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow); position: relative; }
.card.tight { padding: 14px 16px; }
.frame { position: relative; border: 1.5px solid var(--gold); border-radius: 18px; padding: 22px 18px; background: rgba(12,16,34,.55); }
.frame::before, .frame::after { content: '✦'; position: absolute; color: var(--gold-light); font-size: .85rem; background: var(--navy-900); padding: 0 4px; }
.frame::before { top: -10px; left: 16px; } .frame::after { bottom: -10px; right: 16px; }
.frame-title { font-family: var(--font-point); color: var(--gold-light); font-size: 1.25rem; text-align: center; margin-bottom: 12px; letter-spacing: 1px; }
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); margin: 22px 0; }
.section { padding: 28px 18px 8px; }
.section-title { font-size: 1.45rem; font-weight: 800; color: var(--cream); margin-bottom: 6px; }
.section-title .point { color: var(--gold-light); font-weight: 400; }
.section-sub { color: var(--muted); font-size: 1rem; margin-bottom: 16px; }
.badge { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: .8rem; font-weight: 700; background: rgba(123,108,246,.25); color: #c7bfff; border: 1px solid rgba(123,108,246,.5); }
.badge.gold { background: rgba(189,169,122,.2); color: var(--gold-light); border-color: rgba(189,169,122,.6); }
.badge.red { background: rgba(255,123,123,.18); color: #ffb3b3; border-color: rgba(255,123,123,.5); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px; border: 1.5px solid rgba(189,169,122,.5); color: var(--cream); background: rgba(46,51,96,.5); font-size: 1rem; min-height: 46px; }
.chip.on { background: var(--grad-gold); color: var(--navy-900); border-color: transparent; font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; border-radius: 0 0 28px 28px; min-height: 580px; display: flex; flex-direction: column; justify-content: flex-end; }
.hero img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 8%; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,16,34,.15) 0%, rgba(12,16,34,.55) 45%, rgba(12,16,34,.97) 100%); }
.hero .content { position: relative; z-index: 2; padding: 22px 20px 26px; }
.hero h1 { font-family: var(--font-point); font-size: 2.1rem; color: var(--cream); text-shadow: 0 2px 12px rgba(0,0,0,.6); line-height: 1.25; }
.hero h1 .gold { color: var(--gold-light); }
.hero .lead { font-size: 1.08rem; color: #e6e2f5; margin: 12px 0 18px; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.hero .note { text-align: center; color: var(--muted); font-size: .92rem; margin-top: 10px; }
.hero .tag { position: absolute; top: 14px; left: 16px; z-index: 3; }

/* ---------- Character dialog ---------- */
.speech { display: flex; gap: 12px; align-items: flex-start; }
.speech .avatar { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--gold); object-fit: cover; flex: none; box-shadow: 0 0 0 4px rgba(189,169,122,.15); }
.speech .bubble { background: rgba(244,235,210,.96); color: var(--navy-900); border-radius: 4px 18px 18px 18px; padding: 14px 16px; font-size: 1.02rem; line-height: 1.55; position: relative; flex: 1; }
.speech .bubble b { color: var(--violet-dark); }
.speech .who { font-size: .82rem; color: var(--gold-light); margin-bottom: 4px; font-family: var(--font-point); }
.speech.dark .bubble { background: rgba(46,51,96,.85); color: var(--cream); border: 1px solid rgba(189,169,122,.35); }
.speech.dark .bubble b { color: var(--gold-light); }

/* ---------- Product cards ---------- */
.product-list { display: grid; gap: 14px; }
.product { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; background: var(--grad-card); border: 1px solid rgba(189,169,122,.35); border-radius: var(--radius-lg); padding: 14px; box-shadow: var(--shadow); }
.product img { width: 96px; height: 120px; object-fit: cover; border-radius: 12px; border: 1px solid rgba(189,169,122,.5); }
.product h3 { font-size: 1.15rem; color: var(--cream); margin-bottom: 4px; }
.product p { font-size: .92rem; color: var(--muted); margin: 0 0 8px; }
.product .price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.product .price del { color: var(--muted); font-size: .9rem; }
.product .price b { color: var(--gold-light); font-size: 1.2rem; }
.product .price .off { color: var(--danger); font-size: .9rem; font-weight: 700; }
.product .go { color: var(--gold-light); font-size: .95rem; margin-top: 6px; display: inline-block; }
.product.featured { grid-template-columns: 1fr; border: 1.5px solid var(--gold); background: linear-gradient(180deg, rgba(123,108,246,.25), rgba(26,31,58,.95)); }
.product.featured img { width: 100%; height: 190px; object-position: center 15%; }

/* ---------- Ticker / social proof ---------- */
.ticker { background: rgba(46,51,96,.6); border: 1px solid rgba(189,169,122,.3); border-radius: 12px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; font-size: .95rem; color: var(--cream); overflow: hidden; }
.ticker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); flex: none; animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
.ticker .msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proof-row { display: flex; justify-content: space-around; text-align: center; padding: 14px 0; }
.proof-row b { display: block; font-size: 1.4rem; color: var(--gold-light); font-family: var(--font-point); }
.proof-row span { font-size: .85rem; color: var(--muted); }

/* ---------- Steps / Forms ---------- */
.progress { height: 8px; background: rgba(255,255,255,.12); border-radius: 999px; overflow: hidden; margin: 8px 0 20px; }
.progress > i { display: block; height: 100%; background: var(--grad-gold); border-radius: 999px; transition: width .4s; }
.step { display: none; animation: fade .35s ease; }
.step.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
.q { font-size: 1.5rem; font-weight: 800; color: var(--cream); margin: 6px 0 6px; line-height: 1.35; }
.q-sub { color: var(--muted); margin-bottom: 18px; font-size: 1rem; }
.label { display: block; font-size: 1rem; color: var(--gold-light); margin: 14px 0 6px; font-weight: 600; }
.input { width: 100%; min-height: 58px; padding: 12px 16px; border-radius: 14px; border: 1.5px solid rgba(189,169,122,.5); background: rgba(12,16,34,.6); color: var(--white); font-size: 1.15rem; outline: none; }
.input:focus { border-color: var(--gold-light); box-shadow: 0 0 0 3px rgba(189,169,122,.2); }
.input::placeholder { color: #6f759a; }
select.input { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.row3 { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt-grid.one { grid-template-columns: 1fr; }
.opt { min-height: 60px; border-radius: 14px; border: 1.5px solid rgba(189,169,122,.45); background: rgba(46,51,96,.5); color: var(--cream); font-size: 1.1rem; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; text-align: center; }
.opt small { display: block; font-weight: 400; color: var(--muted); font-size: .82rem; }
.opt.on { background: var(--grad-gold); color: var(--navy-900); border-color: transparent; }
.opt.on small { color: #3a3320; }
.seg { display: flex; border: 1.5px solid rgba(189,169,122,.5); border-radius: 12px; overflow: hidden; }
.seg button { flex: 1; min-height: 50px; border: 0; background: transparent; color: var(--cream); font-size: 1.05rem; font-weight: 600; }
.seg button.on { background: var(--grad-gold); color: var(--navy-900); }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 1rem; color: var(--cream); padding: 8px 0; line-height: 1.45; }
.check input { width: 24px; height: 24px; accent-color: var(--gold); flex: none; margin: 1px 0 0; }
.check > span { flex: 1; min-width: 0; }
.hint { font-size: .9rem; color: var(--muted); margin-top: 8px; }
.err { color: var(--danger); font-size: .95rem; margin-top: 8px; min-height: 1.2em; }
.step-nav { position: sticky; bottom: 0; padding: 14px 0 18px; background: linear-gradient(180deg, transparent, var(--navy-900) 30%); }

/* ---------- Loading ---------- */
.loading-wrap { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; }
.orb { width: 120px; height: 120px; margin: 0 auto 20px; border-radius: 50%; border: 2px solid var(--gold); position: relative; display: flex; align-items: center; justify-content: center; font-family: var(--font-point); font-size: 2.4rem; color: var(--gold-light); box-shadow: 0 0 40px rgba(189,169,122,.35), inset 0 0 30px rgba(123,108,246,.3); animation: spinGlow 3s linear infinite; }
@keyframes spinGlow { 0% { box-shadow: 0 0 30px rgba(189,169,122,.3), inset 0 0 30px rgba(123,108,246,.3) } 50% { box-shadow: 0 0 60px rgba(189,169,122,.6), inset 0 0 40px rgba(123,108,246,.5) } 100% { box-shadow: 0 0 30px rgba(189,169,122,.3), inset 0 0 30px rgba(123,108,246,.3) } }
.checklist { list-style: none; padding: 0; margin: 18px 0 0; }
.checklist li { padding: 8px 0; color: var(--muted); display: flex; gap: 10px; align-items: center; opacity: 0; transform: translateY(6px); transition: all .4s; }
.checklist li.show { opacity: 1; transform: none; color: var(--cream); }
.checklist li.done::before { content: '✓'; color: var(--ok); font-weight: 800; }
.checklist li.doing::before { content: '●'; color: var(--gold-light); animation: pulse 1s infinite; }
.pct-big { font-family: var(--font-point); font-size: 2rem; color: var(--gold-light); text-align: center; }

/* ---------- Saju table ---------- */
.saju-tbl { width: 100%; border-collapse: separate; border-spacing: 6px; table-layout: fixed; }
.saju-tbl th { font-size: .85rem; color: var(--muted); font-weight: 600; padding-bottom: 2px; }
.saju-tbl td { text-align: center; border-radius: 12px; padding: 8px 2px; background: rgba(12,16,34,.6); border: 1px solid rgba(189,169,122,.25); }
.saju-tbl .hj { font-family: 'Gowun Batang', serif; font-size: 2rem; line-height: 1.1; font-weight: 700; }
.saju-tbl .ko { font-size: .9rem; color: var(--cream); }
.saju-tbl .god { font-size: .8rem; color: var(--gold-light); margin-top: 2px; display: block; }
.saju-tbl .day-mark { font-size: .75rem; color: #ffd27a; }
.e0 { color: var(--el0-t) } .e1 { color: var(--el1-t) } .e2 { color: var(--el2-t) } .e3 { color: var(--el3-t) } .e4 { color: var(--el4-t) }
/* 오행 색으로 채운 칸 (원국표) */
.bg-e0 { --c: var(--el0); --cd: var(--el0-d); --ink: var(--el0-ink); --sh: var(--el-sh-l); --tag: var(--el-tag-l) } .bg-e1 { --c: var(--el1); --cd: var(--el1-d); --ink: var(--el1-ink); --sh: var(--el-sh-l); --tag: var(--el-tag-l) } .bg-e2 { --c: var(--el2); --cd: var(--el2-d); --ink: var(--el2-ink); --sh: var(--el-sh-d); --tag: var(--el-tag-d) } .bg-e3 { --c: var(--el3); --cd: var(--el3-d); --ink: var(--el3-ink); --sh: var(--el-sh-d); --tag: var(--el-tag-d) } .bg-e4 { --c: var(--el4); --cd: var(--el4-d); --ink: var(--el4-ink); --sh: var(--el-sh-l); --tag: var(--el-tag-l) }
.bg-e0, .bg-e1, .bg-e2, .bg-e3, .bg-e4 { background: linear-gradient(150deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,0) 40%), linear-gradient(180deg, var(--c) 0%, var(--cd) 100%) !important; color: var(--ink); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.saju-tbl td[class*="bg-e"] { border: 1px solid var(--el-line); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 -12px 20px rgba(0,0,0,.12), 0 6px 14px rgba(0,0,0,.4); }
.saju-tbl td[class*="bg-e"] .hj, .saju-tbl td[class*="bg-e"] .ko { color: var(--ink); text-shadow: var(--sh); }
.saju-tbl td[class*="bg-e"] .ko { font-weight: 700; }
.saju-tbl td[class*="bg-e"] .god { display: inline-block; margin: 2px 0; padding: 0 6px; border-radius: 999px; background: var(--tag); color: var(--ink); font-weight: 600; line-height: 1.55; white-space: nowrap; max-width: 100%; }
.saju-tbl td[class*="bg-e"] .day-mark { color: var(--ink); font-weight: 800; font-size: .72rem; }
.saju-tbl td.day-cell { outline: 2px solid var(--gold-light); outline-offset: 2px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 -12px 20px rgba(0,0,0,.12), 0 0 18px rgba(232,214,160,.5); }
/* 오행 색 조각: .hj-el 한자 한 글자 · .el 이름('목(木)' '목') · .el-legend 색 안내 */
.el0 { --c: var(--el0); --cd: var(--el0-d); --ink: var(--el0-ink); --sh: var(--el-sh-l); --tag: var(--el-tag-l) } .el1 { --c: var(--el1); --cd: var(--el1-d); --ink: var(--el1-ink); --sh: var(--el-sh-l); --tag: var(--el-tag-l) } .el2 { --c: var(--el2); --cd: var(--el2-d); --ink: var(--el2-ink); --sh: var(--el-sh-d); --tag: var(--el-tag-d) } .el3 { --c: var(--el3); --cd: var(--el3-d); --ink: var(--el3-ink); --sh: var(--el-sh-d); --tag: var(--el-tag-d) } .el4 { --c: var(--el4); --cd: var(--el4-d); --ink: var(--el4-ink); --sh: var(--el-sh-l); --tag: var(--el-tag-l) }
.hj-el, .el { display: inline-block; color: var(--ink) !important;   /* 타일 글자색은 바깥 글자색 규칙(후손 span 등)에 묻히면 안 된다 (2026-10-07) */ background: linear-gradient(150deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,0) 40%), linear-gradient(180deg, var(--c) 0%, var(--cd) 100%); font-weight: 700; font-style: normal; text-shadow: var(--sh); box-shadow: inset 0 0 0 1px var(--el-line), 0 1px 3px rgba(0,0,0,.4); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.hj-el { font-family: 'Gowun Batang', serif; min-width: 1.36em; padding: 0 .1em; margin: 0 .05em; border-radius: .3em; text-align: center; line-height: 1.34; }
.el { padding: 0 .46em; margin: 0 .08em; border-radius: .7em; line-height: 1.42; font-size: .95em; white-space: nowrap; }
.hj-grp { white-space: nowrap; }
.hj-par { font-style: normal; }
/* 표 안: 괄호는 감추고 조각을 조금 작게 — 색 조각 때문에 줄이 늘지 않게 */
.wolun-tbl .hj-par, .daeun-tbl .hj-par { display: none; }
.wolun-tbl .el, .daeun-tbl .el { padding: 0 .3em; margin: 0 .05em 0 0; font-size: .9em; }
.wolun-tbl .hj-par + .hj-el, .daeun-tbl td:not(.hj) .hj-par + .hj-el { margin-left: .22em; }
.wolun-tbl .hj-el, .daeun-tbl td:not(.hj) .hj-el { min-width: 1.14em; padding: 0; margin: 0 .03em; line-height: 1.24; border-radius: .26em; font-size: .94em; }
.el-legend { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; margin-top: 12px; font-size: .82rem; }
.el-legend .el { margin: 0; }
.el-legend small { flex-basis: 100%; text-align: center; color: var(--muted); font-size: .8rem; }
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 10px 0; }
.daeun-tbl, .wolun-tbl { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 320px; }
.daeun-tbl th, .wolun-tbl th { background: rgba(189,169,122,.15); color: var(--gold-light); padding: 8px 6px; text-align: left; font-weight: 700; }
.daeun-tbl td, .wolun-tbl td { padding: 8px 6px; border-bottom: 1px solid rgba(189,169,122,.2); vertical-align: top; color: var(--cream); }
.daeun-tbl tr.cur td { background: rgba(123,108,246,.22); }
.daeun-tbl .hj, .wolun-tbl .hj { font-family: 'Gowun Batang', serif; font-size: 1.15rem; }

/* ---------- Bars ---------- */
.bar-list { display: grid; gap: 10px; }
.bar { display: grid; grid-template-columns: 96px 1fr 46px; align-items: center; gap: 10px; font-size: .98rem; }
.bar .track { height: 12px; background: rgba(255,255,255,.1); border-radius: 999px; overflow: hidden; }
.bar .fill { height: 100%; background: var(--grad-gold); border-radius: 999px; width: 0; transition: width 1s ease; }
.bar .val { text-align: right; color: var(--gold-light); font-weight: 700; }
.bar .top { font-size: .72rem; color: var(--muted); display: block; }
.elem-bars { display: flex; gap: 8px; align-items: flex-end; height: 120px; padding-top: 10px; }
.elem-bars .eb { flex: 1; text-align: center; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.elem-bars .eb i { display: block; border-radius: 8px 8px 0 0; min-height: 4px; transition: height 1s; background: linear-gradient(150deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,0) 40%), linear-gradient(180deg, var(--c) 0%, var(--cd) 100%); box-shadow: inset 0 0 0 1px var(--el-line); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.elem-bars .eb span { font-size: .85rem; margin-top: 4px; }
.elem-bars .eb .el { margin: 6px 0 0; font-size: .85rem; }
.elem-bars .eb b { display: block; font-size: .92rem; color: var(--cream); margin-top: 2px; font-weight: 700; }

/* ---------- Locked ---------- */
.locked { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.locked .blur { filter: blur(6px); opacity: .55; user-select: none; pointer-events: none; }
.locked .lock-cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(180deg, rgba(12,16,34,.2), rgba(12,16,34,.85)); padding: 16px; text-align: center; }
.lock-cover { cursor: pointer; }
.lock-cover .lock-ic { position: relative; width: 66px; height: 66px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3c4 0%, #E8D6A0 30%, #BDA97A 70%, #8f7c4c 100%); color: var(--navy-900); display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 300; line-height: 1; font-family: var(--font-point); box-shadow: 0 0 0 4px rgba(12,16,34,.9), 0 0 0 6px rgba(232,214,160,.85), 0 10px 30px rgba(189,169,122,.55), inset 0 -3px 6px rgba(0,0,0,.25); animation: lockPulse 2.4s ease-in-out infinite; }
.lock-cover .lock-ic::before { content: ''; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(232,214,160,.5); border-style: dashed; animation: lockSpin 14s linear infinite; }
.lock-cover .lock-ic::after { content: '✦'; position: absolute; top: -18px; right: -6px; font-size: .8rem; color: var(--gold-light); }
.lock-cover .lock-lbl { font-family: var(--font-point); color: var(--gold-light); font-size: .85rem; letter-spacing: 2px; margin-top: 8px; }
.lock-cover:active .lock-ic { transform: scale(.95); }
@keyframes lockPulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(12,16,34,.9), 0 0 0 6px rgba(232,214,160,.85), 0 10px 30px rgba(189,169,122,.45), inset 0 -3px 6px rgba(0,0,0,.25) } 50% { box-shadow: 0 0 0 4px rgba(12,16,34,.9), 0 0 0 6px rgba(232,214,160,1), 0 10px 44px rgba(232,214,160,.85), inset 0 -3px 6px rgba(0,0,0,.25) } }
@keyframes lockSpin { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .lock-cover .lock-ic, .lock-cover .lock-ic::before { animation: none } }
.lock-cover h4 { font-family: var(--font-point); font-size: 1.15rem; letter-spacing: .5px; }
.cta-sticky .coupon-tag { display: inline-flex; align-items: center; gap: 5px; background: rgba(127,216,165,.18); color: #b8f0d0; border: 1px solid rgba(127,216,165,.55); border-radius: 999px; padding: 4px 10px; font-size: .82rem; font-weight: 700; }
.lock-cover h4 { margin: 4px 0 0; color: var(--cream); font-size: 1.1rem; }
.lock-list { list-style: none; padding: 0; margin: 10px 0 0; }
.lock-list li { display: flex; gap: 10px; align-items: center; padding: 11px 12px; border-bottom: 1px solid rgba(189,169,122,.2); color: var(--cream); font-size: 1rem; }
.lock-list li::before { content: ''; flex: none; width: 1em; height: 1em; background: var(--gold-light); opacity: .85; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3Crect x='5' y='10.5' width='14' height='9.5' rx='2'/%3E%3Ccircle cx='12' cy='15.2' r='1.3' fill='black' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3Crect x='5' y='10.5' width='14' height='9.5' rx='2'/%3E%3Ccircle cx='12' cy='15.2' r='1.3' fill='black' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat; }
.fade-out { position: relative; max-height: 220px; overflow: hidden; }
.fade-out::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(180deg, transparent, var(--navy-800)); }
.writing { text-align: center; color: var(--gold-light); font-family: var(--font-point); padding: 10px 0; }
.writing::after { content: '…'; animation: dots 1.4s infinite steps(4); }
.writing-end { text-align: center; padding: 12px 0 2px; color: var(--gold-light); font-family: var(--font-point); font-size: 1.02rem; border-top: 1px dashed rgba(232,214,160,.35); margin-top: 4px; }
.writing-end small { display: block; margin-top: 5px; color: var(--muted); font-family: var(--font-body, inherit); font-size: .86rem; }
.writing-end small b { color: var(--gold-light); }
@keyframes dots { 0% { content: '' } 25% { content: '.' } 50% { content: '..' } 75% { content: '...' } }

/* ---------- Sticky CTA ---------- */
.cta-sticky { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: var(--maxw); z-index: 60; padding: 10px 14px 14px; background: linear-gradient(180deg, rgba(12,16,34,0), rgba(12,16,34,.98) 35%); }
.cta-sticky .timer { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 7px; font-size: .92rem; color: var(--cream); padding: 2px 4px 12px; text-align: center; }
.cta-sticky .timer b { color: #ffd27a; font-variant-numeric: tabular-nums; }
.cta-sticky .btn { min-height: 62px; flex-direction: column; gap: 2px; line-height: 1.2; margin-top: 2px; }
.cta-sticky .btn .p { font-size: .95rem; font-weight: 500; display: flex; gap: 8px; align-items: baseline; }
.cta-sticky .btn .p del { opacity: .7; }
.cta-sticky .btn .p .off { color: #b3261e; font-weight: 800; }

/* ---------- Reviews ---------- */
.review-scroll { display: flex; gap: 12px; overflow-x: auto; padding: 4px 18px 14px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.review-card { flex: 0 0 82%; scroll-snap-align: start; background: rgba(244,235,210,.97); color: var(--navy-900); border-radius: 16px; padding: 16px; box-shadow: var(--shadow); }
.review-card .stars { color: #d4a017; letter-spacing: 1px; font-size: .95rem; }
.review-card .pay { font-size: .78rem; color: #6b6b7a; margin-left: 6px; }
.review-card p { font-size: 1rem; margin: 8px 0 10px; line-height: 1.5; }
.review-card .who { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: #4b4b60; }
.review-card .who i { width: 30px; height: 30px; border-radius: 50%; background: var(--navy-700); color: var(--cream); display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: .85rem; }
.review-card .tag { margin-left: auto; color: var(--violet-dark); font-weight: 700; }
.review-feed .item { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(189,169,122,.2); }
.review-feed .item i { width: 40px; height: 40px; border-radius: 50%; flex: none; background: var(--navy-700); color: var(--gold-light); display: flex; align-items: center; justify-content: center; font-style: normal; }
.review-feed .item .meta { font-size: .82rem; color: var(--muted); }
.review-feed .item p { margin: 4px 0 0; font-size: .98rem; color: var(--cream); }

/* ---------- FAQ ---------- */
.faq details { border-bottom: 1px solid rgba(189,169,122,.25); }
.faq summary { list-style: none; cursor: pointer; padding: 16px 4px; font-size: 1.05rem; font-weight: 600; color: var(--cream); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--gold-light); font-size: 1.4rem; }
.faq details[open] summary::after { content: '−'; }
.faq .a { padding: 0 4px 16px; color: var(--muted); font-size: 1rem; }

/* ---------- Comparison table ---------- */
.cmp { width: 100%; border-collapse: collapse; font-size: .98rem; }
.cmp th { background: rgba(189,169,122,.15); color: var(--gold-light); padding: 10px 8px; font-weight: 700; }
.cmp td { padding: 11px 8px; border-bottom: 1px solid rgba(189,169,122,.2); color: var(--cream); }
.cmp td:nth-child(2) { color: var(--muted); text-align: center; font-size: .9rem; }
.cmp td:nth-child(3) { text-align: center; color: var(--ok); font-weight: 700; }
.guarantee { display: grid; gap: 12px; }
.guarantee .g { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; }
.guarantee .g b.n { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--gold); color: var(--gold-light); display: flex; align-items: center; justify-content: center; font-family: var(--font-point); }
.guarantee .g h4 { margin: 4px 0 2px; color: var(--cream); font-size: 1.05rem; }
.guarantee .g p { margin: 0; color: var(--muted); font-size: .95rem; }
.info-list { display: grid; gap: 8px; }
.info-list .r { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed rgba(189,169,122,.25); }
.info-list .r span:first-child { color: var(--muted); }
.info-list .r span:last-child { color: var(--cream); font-weight: 600; text-align: right; }
.pay-box { background: #fff; border-radius: 14px; padding: 6px; color: #111; min-height: 60px; }
.demo-pay { display: grid; gap: 10px; }
.demo-pay .pm { display: flex; align-items: center; gap: 12px; border: 1.5px solid #ddd; border-radius: 12px; padding: 14px; font-size: 1.05rem; font-weight: 600; color: #222; background: #fff; cursor: pointer; }
.demo-pay .pm.on { border-color: #3182f6; background: #eef5ff; }
.demo-pay .pm i { width: 26px; height: 26px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: .8rem; color: #fff; }

/* ---------- Report ---------- */
.report-cover { text-align: center; padding: 36px 20px 20px; }
.report-cover .book { width: 180px; margin: 0 auto 16px; border-radius: 14px; border: 1.5px solid var(--gold); box-shadow: 0 20px 40px rgba(0,0,0,.5); }
.toc { list-style: none; padding: 0; margin: 0; }
.toc li a { display: flex; gap: 10px; padding: 12px 4px; border-bottom: 1px solid rgba(189,169,122,.2); color: var(--cream); font-size: 1.02rem; }
.toc li a b { color: var(--gold-light); font-family: var(--font-point); min-width: 30px; }
.toc .ch { color: var(--gold-light); font-family: var(--font-point); font-size: 1.1rem; padding: 16px 4px 4px; }
.rsec { padding: 28px 18px 4px; scroll-margin-top: 70px; }
.rsec .no { color: var(--gold-light); font-family: var(--font-point); font-size: .95rem; letter-spacing: 2px; }
.rsec h2 { font-size: 1.45rem; color: var(--cream); margin: 4px 0 14px; }
.rsec .body { font-size: 1.06rem; line-height: 1.75; color: #e9e6f5; }
.rsec .body b { color: var(--gold-light); }
.rsec .body p { margin-bottom: 1em; }
.lucky-list { padding-left: 0; list-style: none; display: grid; gap: 8px; margin: 0 0 1em; }
.lucky-list li { background: rgba(46,51,96,.5); border: 1px solid rgba(189,169,122,.3); border-radius: 10px; padding: 10px 12px; }

/* ---------- Bottom nav ---------- */
.bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--maxw); height: var(--nav-h); background: rgba(12,16,34,.96); border-top: 1px solid rgba(189,169,122,.3); display: flex; z-index: 70; backdrop-filter: blur(10px); padding-bottom: env(safe-area-inset-bottom); }
.bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); font-size: .8rem; }
.bottom-nav a svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.bottom-nav a.on { color: var(--gold-light); }

/* ---------- Toast / Modal / Sheet ---------- */
.toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + 20px); transform: translate(-50%, 20px); background: rgba(244,235,210,.97); color: var(--navy-900); padding: 12px 18px; border-radius: 12px; font-weight: 600; z-index: 100; opacity: 0; transition: all .3s; pointer-events: none; max-width: 90%; box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 90; display: flex; align-items: flex-end; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .25s; }
.modal-bg.show { opacity: 1; pointer-events: auto; }
.sheet { width: 100%; max-width: var(--maxw); background: var(--navy-800); border-radius: 24px 24px 0 0; border-top: 1.5px solid var(--gold); padding: 18px 18px 28px; transform: translateY(30px); transition: transform .3s; max-height: 88vh; overflow-y: auto; }
.modal-bg.show .sheet { transform: none; }
.sheet .handle { width: 44px; height: 5px; border-radius: 3px; background: rgba(189,169,122,.5); margin: 0 auto 14px; }
.sheet h3 { font-size: 1.3rem; color: var(--cream); margin-bottom: 6px; }
.coupon { text-align: center; }
.coupon .amt { font-family: var(--font-point); font-size: 2.4rem; color: var(--gold-light); margin: 6px 0; }
.coupon .amt small { font-size: 1rem; color: var(--cream); }

/* ---------- Footer ---------- */
.footer { padding: 30px 18px 20px; color: var(--muted); font-size: .82rem; line-height: 1.7; border-top: 1px solid rgba(189,169,122,.2); margin-top: 20px; }
.footer .links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 10px; color: var(--cream); font-size: .9rem; }
.footer .logo { font-size: 1.1rem; margin-bottom: 8px; }

/* ---------- Misc ---------- */
.notice { background: rgba(123,108,246,.15); border: 1px solid rgba(123,108,246,.4); border-radius: 12px; padding: 12px 14px; font-size: .95rem; color: #d9d4ff; }
.list-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.list-check li { display: flex; gap: 10px; color: var(--cream); font-size: 1.02rem; }
.list-check li::before { content: '✦'; color: var(--gold-light); }
.score-ring { width: 150px; height: 150px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; background: conic-gradient(var(--gold-light) calc(var(--v) * 1%), rgba(255,255,255,.1) 0); }
.score-ring::before { content: ''; position: absolute; inset: 12px; border-radius: 50%; background: var(--navy-800); }
.score-ring b { position: relative; font-family: var(--font-point); font-size: 2.6rem; color: var(--gold-light); }
.score-ring b small { font-size: 1rem; color: var(--cream); }
.mini-scores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.mini-scores div { background: rgba(46,51,96,.5); border: 1px solid rgba(189,169,122,.3); border-radius: 12px; padding: 10px 4px; }
.mini-scores b { display: block; font-size: 1.3rem; color: var(--gold-light); font-family: var(--font-point); }
.mini-scores span { font-size: .82rem; color: var(--muted); }
.saved-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 0; border-bottom: 1px solid rgba(189,169,122,.2); }
.saved-item .t { color: var(--cream); font-weight: 600; }
.saved-item .s { color: var(--muted); font-size: .88rem; }
.hero-mini { position: relative; border-radius: 20px; overflow: hidden; min-height: 200px; display: flex; align-items: flex-end; }
.hero-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.hero-mini::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,16,34,.1), rgba(12,16,34,.92)); }
.hero-mini .t { position: relative; z-index: 2; padding: 16px; }
.hero-mini h2 { font-family: var(--font-point); color: var(--cream); font-size: 1.6rem; }
@media (min-width: 560px) { .app { box-shadow: 0 0 80px rgba(0,0,0,.5); } }
@media print { .topbar, .bottom-nav, .cta-sticky, .no-print { display: none !important; } body { background: #fff; color: #111; } body::before { display: none; } .app { padding: 0; } .rsec .body { color: #222; } .rsec .body b, .rsec h2, .rsec .no { color: #5a4bd6; } }

/* =========================================================
   v2 · 폭스바니형 홈 / 시네마 온보딩 / 만세력 / 리포트 삽화
   ========================================================= */
/* ---------- Hero slider (주제별 운세카드) ---------- */
.hslider { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 14px 18px 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.hslider::-webkit-scrollbar { display: none; }
.hcard { flex: 0 0 86%; scroll-snap-align: center; position: relative; border-radius: 24px; overflow: hidden; height: 520px; border: 1.5px solid rgba(189,169,122,.45); box-shadow: var(--shadow); background: var(--navy-800); display: flex; flex-direction: column; justify-content: flex-end; }
.hcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hcard::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 58%; background: linear-gradient(180deg, rgba(12,16,34,0) 0%, rgba(12,16,34,.72) 45%, rgba(12,16,34,.98) 100%); }
.hcard .hc-body { position: relative; z-index: 2; padding: 18px 18px 20px; }
.hcard .hc-name { font-family: var(--font-point); color: var(--gold-light); font-size: 1.05rem; letter-spacing: 1px; margin-bottom: 4px; }
.hcard h2 { font-size: 1.55rem; color: var(--cream); line-height: 1.25; text-wrap: balance; }
.hcard p { color: #d9d6ea; font-size: .98rem; margin: 8px 0 14px; }
.hcard .btn { min-height: 52px; font-size: 1.05rem; }
.hcard .hc-tag { position: absolute; top: 14px; left: 14px; z-index: 2; }
.hcard .hc-price { position: absolute; top: 14px; right: 14px; z-index: 2; background: rgba(12,16,34,.7); border: 1px solid rgba(189,169,122,.5); border-radius: 999px; padding: 5px 11px; font-size: .82rem; color: var(--gold-light); }
.hnav { display: flex; align-items: center; justify-content: space-between; padding: 8px 18px 4px; }
.hnav .arrow { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(189,169,122,.6); background: rgba(46,51,96,.5); color: var(--gold-light); font-size: 1.3rem; display: flex; align-items: center; justify-content: center; }
.hnav .arrow:active { background: var(--grad-gold); color: var(--navy-900); }
.hnav .dots { display: flex; gap: 6px; align-items: center; }
.hnav .dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(189,169,122,.35); transition: all .25s; }
.hnav .dots i.on { width: 22px; border-radius: 4px; background: var(--gold-light); }
.hnav .cnt { font-family: var(--font-point); color: var(--gold-light); font-size: .95rem; min-width: 46px; text-align: center; }
.hhint { text-align: center; color: var(--muted); font-size: .9rem; padding: 2px 0 6px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.hhint .swipe { display: inline-block; width: 34px; height: 14px; position: relative; }
.hhint .swipe::before { content: ''; position: absolute; top: 5px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-light); animation: swipe 1.6s ease-in-out infinite; }
@keyframes swipe { 0%, 100% { left: 0; opacity: .4 } 50% { left: 24px; opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .hhint .swipe::before { animation: none } }

/* ---------- 2열 카드 그리드 ---------- */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gcard { display: flex; flex-direction: column; background: var(--grad-card); border: 1px solid rgba(189,169,122,.35); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.gcard .gimg { position: relative; aspect-ratio: 4 / 3.2; overflow: hidden; }
.gcard .gimg img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.gcard .gimg .badge { position: absolute; top: 8px; left: 8px; }
.gcard .gbody { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.gcard h3 { font-size: 1.02rem; color: var(--cream); line-height: 1.3; }
.gcard p { font-size: .84rem; color: var(--muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gcard .price { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; margin-top: auto; }
.gcard .price del { color: var(--muted); font-size: .78rem; }
.gcard .price b { color: var(--gold-light); font-size: 1.02rem; }
.gcard .price .off { color: var(--danger); font-size: .78rem; font-weight: 700; }
.gcard .go { color: var(--gold-light); font-size: .88rem; margin-top: 4px; }

/* ---------- Cinema (영상 온보딩) ---------- */
.cinema { position: fixed; inset: 0; z-index: 80; background: var(--navy-900); max-width: var(--maxw); margin: 0 auto; overflow: hidden; display: none; }
.cinema.show { display: block; }
.cinema video, .cinema .kb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.cinema .kb { display: none; }
.cinema.fallback video { display: none; }
.cinema.fallback .kb { display: block; }
.kb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: 0; transform: scale(1.02); transition: opacity 1.2s ease; }
.kb img.on { opacity: 1; animation: kenburns 9s ease-in-out forwards; }
@keyframes kenburns { 0% { transform: scale(1.02) translate(0, 0) } 100% { transform: scale(1.16) translate(-1.5%, -3%) } }
.kb .stars { position: absolute; inset: 0; pointer-events: none; width: 100%; height: 100%; }
.cinema .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,16,34,.55) 0%, rgba(12,16,34,0) 25%, rgba(12,16,34,0) 55%, rgba(12,16,34,.95) 100%); }
.cinema .top { position: absolute; top: 0; left: 0; right: 0; padding: 16px; display: flex; justify-content: space-between; align-items: center; z-index: 3; }
.cinema .live { background: rgba(12,16,34,.65); border: 1px solid rgba(189,169,122,.5); border-radius: 999px; padding: 6px 12px; font-size: .88rem; color: var(--cream); }
.cinema .sound { background: rgba(12,16,34,.65); border: 1px solid rgba(189,169,122,.5); border-radius: 999px; padding: 6px 12px; font-size: .82rem; color: var(--gold-light); display: inline-flex; gap: 6px; align-items: center; }
.cinema .skip { background: rgba(12,16,34,.65); border: 1px solid rgba(189,169,122,.5); border-radius: 999px; padding: 8px 14px; font-size: .9rem; color: var(--cream); }
.cinema .bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px 30px; z-index: 3; }
.cinema .logo-big { font-family: var(--font-point); color: var(--gold-light); font-size: 1.3rem; letter-spacing: 3px; text-align: center; margin-bottom: 10px; }
.cinema .caption { position: absolute; left: 0; right: 0; top: 40%; text-align: center; padding: 0 24px; z-index: 3; }
.cinema .caption { padding: 0 24px; }
/* 소개 영상 자막(2026-10-05 A안): 금빛 글자 + 글자 뒤에만 좁은 어두운 안개 — 밝은 장면(흰 옷·달빛)에서도 읽히게 */
/* 자막 뒤 타원형 어두운 안개는 2026-10-05 제거(어색하다는 피드백). 글자 그림자만으로 읽힌다 */
.cinema .caption span { display: block; position: relative; font-family: var(--font-point); font-size: 1.7rem; font-weight: 700; color: var(--gold-light); letter-spacing: .5px; text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 3px 18px rgba(0,0,0,.9), 0 0 30px rgba(0,0,0,.6); opacity: 0; transform: translateY(8px); transition: all .9s; }
.cinema .caption span:last-child { color: #fff3cf; font-size: 1.95rem; }
.cinema .caption span.on { opacity: 1; transform: none; }
.cinema .dlg { background: rgba(12,16,34,.72); border: 1px solid rgba(189,169,122,.55); border-radius: 18px; padding: 16px 18px; font-family: var(--font-point); font-size: 1.3rem; color: var(--cream); line-height: 1.5; min-height: 92px; margin-bottom: 14px; backdrop-filter: blur(6px); }
.cinema .dlg .who { font-size: .82rem; color: var(--gold-light); font-family: var(--font); margin-bottom: 4px; }
.cinema .choices { display: grid; gap: 10px; }
.cinema .progress-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.15); z-index: 4; }
.cinema .progress-bar i { display: block; height: 100%; width: 0; background: var(--grad-gold); transition: width .3s linear; }

/* ---------- 리포트 삽화·요소 ---------- */
.mulsang-fig { margin: 0 auto 18px; max-width: 240px; text-align: center; }
.mulsang-fig svg { width: 100%; height: auto; filter: drop-shadow(0 10px 30px rgba(189,169,122,.25)); }
.mulsang-fig figcaption { font-family: var(--font-point); color: var(--gold-light); font-size: .95rem; margin-top: 8px; }
.mulsang-fig.sm { max-width: 150px; margin-bottom: 8px; }
.need-list { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 8px; }
.need-list li { background: rgba(46,51,96,.45); border: 1px solid rgba(189,169,122,.3); border-radius: 12px; padding: 10px 12px; font-size: 1rem; }
.tag-miss { display: inline-block; background: rgba(255,123,123,.2); color: #ffb3b3; border-radius: 999px; padding: 2px 9px; font-size: .78rem; font-weight: 700; margin-left: 6px; }
.tag-strong { display: inline-block; background: rgba(189,169,122,.25); color: var(--gold-light); border-radius: 999px; padding: 2px 9px; font-size: .78rem; font-weight: 700; margin-left: 6px; }
.worry-q { margin: 0 0 1em; padding: 14px 16px; border-left: 3px solid var(--gold); background: rgba(189,169,122,.1); border-radius: 0 12px 12px 0; font-family: var(--font-point); font-size: 1.1rem; color: var(--cream); }
.year-list { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 8px; }
.year-list li { padding: 10px 12px; border-left: 3px solid var(--violet); background: rgba(123,108,246,.1); border-radius: 0 12px 12px 0; }
.money-box { text-align: center; border: 1.5px solid var(--gold); border-radius: 18px; padding: 16px; margin: 0 0 1em; background: rgba(12,16,34,.5); }
.money-box b { display: block; font-family: var(--font-point); font-size: 2rem; color: var(--gold-light); margin: 4px 0; }
.money-box small { display: block; color: var(--muted); }
.leak { border: 1px solid rgba(189,169,122,.35); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; background: rgba(46,51,96,.4); }
.leak > b { color: var(--gold-light); font-size: 1.08rem; display: block; margin-bottom: 4px; }
.leak p { margin: 0 0 6px; font-size: 1rem; }
.leak .fix { color: #d9d4ff; border-top: 1px dashed rgba(189,169,122,.3); padding-top: 6px; }
.rx-list { padding-left: 1.3em; margin: 0 0 1em; display: grid; gap: 8px; }
.rx-list li { padding-left: 4px; }
.rx-list li::marker { color: var(--gold-light); font-weight: 800; }
.hook-card { border: 1.5px solid var(--gold); border-radius: 20px; padding: 18px; background: linear-gradient(180deg, rgba(123,108,246,.18), rgba(12,16,34,.8)); position: relative; overflow: hidden; }
.hook-card h3 { font-family: var(--font-point); color: var(--gold-light); font-size: 1.35rem; margin-bottom: 8px; }
.hook-card .teaser { color: #e9e6f5; font-size: 1.05rem; line-height: 1.7; }
.hook-card .teaser.blur-tail::after { content: ' 그래서 지금은 아무리 애를 써도 같은 자리에서 같은 결과가 반복되는 것입니다. 이 문이 열리는 해는'; color: transparent; text-shadow: 0 0 8px rgba(233,230,245,.85); }

/* ---------- 만세력 (포스텔러형) ---------- */
.ms-head { display: flex; align-items: center; gap: 12px; padding: 4px 0 12px; }
.ms-head .mf { width: 64px; flex: none; }
.ms-head .mf svg { width: 64px; height: 64px; }
.ms-head .nm { font-size: 1.25rem; color: var(--cream); font-weight: 800; }
.ms-head .sub { color: var(--muted); font-size: .9rem; }
.ms-tbl { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.ms-tbl th { font-size: .8rem; color: var(--muted); font-weight: 600; text-align: center; }
.ms-tbl th.rh { text-align: left; width: 58px; color: var(--gold-light); font-size: .78rem; padding-left: 2px; white-space: nowrap; }
.ms-tbl td { text-align: center; border-radius: 10px; padding: 6px 2px; background: rgba(12,16,34,.55); border: 1px solid rgba(189,169,122,.2); font-size: .85rem; color: var(--cream); }
.ms-tbl td.cell { padding: 8px 2px 6px; }
.ms-tbl td.cell .hj { font-family: 'Gowun Batang', serif; font-size: 2.1rem; line-height: 1.05; font-weight: 700; }
.ms-tbl td.cell .k { font-size: .82rem; color: var(--cream); }
.ms-tbl td.f0 { --c: var(--el0); --cd: var(--el0-d); --ink: var(--el0-ink); --sh: var(--el-sh-l); --tag: var(--el-tag-l) } .ms-tbl td.f1 { --c: var(--el1); --cd: var(--el1-d); --ink: var(--el1-ink); --sh: var(--el-sh-l); --tag: var(--el-tag-l) } .ms-tbl td.f2 { --c: var(--el2); --cd: var(--el2-d); --ink: var(--el2-ink); --sh: var(--el-sh-d); --tag: var(--el-tag-d) } .ms-tbl td.f3 { --c: var(--el3); --cd: var(--el3-d); --ink: var(--el3-ink); --sh: var(--el-sh-d); --tag: var(--el-tag-d) } .ms-tbl td.f4 { --c: var(--el4); --cd: var(--el4-d); --ink: var(--el4-ink); --sh: var(--el-sh-l); --tag: var(--el-tag-l) }
.ms-tbl td.cell { background: linear-gradient(150deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,0) 40%), linear-gradient(180deg, var(--c) 0%, var(--cd) 100%); border: 1px solid var(--el-line); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 -12px 20px rgba(0,0,0,.12), 0 6px 14px rgba(0,0,0,.4); color: var(--ink); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.ms-tbl td.cell .hj, .ms-tbl td.cell .k { color: var(--ink); text-shadow: var(--sh); }
.ms-tbl td.cell .k { font-weight: 600; }
.ms-tbl td.cell .k b { font-weight: 800; }
.ms-tbl td.day-cell { outline: 2px solid var(--gold-light); outline-offset: 1.5px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 -12px 20px rgba(0,0,0,.12), 0 0 16px rgba(232,214,160,.5); }
.ms-tbl .jj { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px; }
.ms-tbl .jj .hj-el { font-size: .76rem; min-width: 1.22em; padding: 0; margin: 0; border-radius: 3px; line-height: 1.3; }
.ms-legend { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; font-size: .8rem; color: var(--muted); margin-top: 8px; }
.ms-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: middle; }
/* 대운·세운 칸: 천간과 지지를 색 조각으로 */
.daeun-tbl td.hj .hj-el, .wolun-tbl td.hj .hj-el { margin: 1px .04em; }
.daeun-tbl td.el-cur { background: rgba(232,214,160,.12); box-shadow: inset 0 0 0 1.5px rgba(232,214,160,.85); border-radius: 10px; }
.rel-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rel-chip { border-radius: 999px; padding: 7px 12px; font-size: .88rem; border: 1px solid rgba(189,169,122,.4); background: rgba(46,51,96,.5); color: var(--cream); }
.rel-chip.on { background: var(--grad-gold); color: var(--navy-900); font-weight: 700; border-color: transparent; }
.rel-chip.bad.on { background: linear-gradient(135deg, #ffb3b3, #ff7b7b); }
.rel-desc { margin-top: 10px; font-size: .95rem; color: #e9e6f5; }
.rel-desc b { color: var(--gold-light); }
.gauge { height: 14px; border-radius: 999px; background: linear-gradient(90deg, #7fb8ff, #a9aec9 50%, #ffb3b3); position: relative; margin: 10px 0 4px; }
.gauge i { position: absolute; top: -6px; width: 26px; height: 26px; border-radius: 50%; background: var(--gold-light); border: 3px solid var(--navy-900); transform: translateX(-50%); box-shadow: 0 0 10px rgba(189,169,122,.6); }
.gauge-lbl { display: flex; justify-content: space-between; font-size: .82rem; color: var(--muted); }
.pent { width: 100%; max-width: 280px; margin: 0 auto; display: block; }
.hour-tbl { width: 100%; border-collapse: collapse; font-size: .88rem; }
.hour-tbl td { padding: 6px 4px; border-bottom: 1px solid rgba(189,169,122,.2); color: var(--cream); }
.hour-tbl td:first-child { color: var(--gold-light); font-family: 'Gowun Batang', serif; white-space: nowrap; }
.hour-tbl td { padding-left: 3px; padding-right: 3px; }
.hour-tbl .hj-el { font-size: .8rem; min-width: 1.22em; padding: 0; margin: 0; line-height: 1.26; }

/* ---------- 고화질 삽화 ---------- */
.mulsang-fig img { width: 100%; height: auto; display: block; border-radius: 18px; border: 1px solid rgba(189,169,122,.55); box-shadow: 0 14px 40px rgba(0,0,0,.45), 0 0 0 5px rgba(12,16,34,.6), 0 0 0 6px rgba(189,169,122,.35); }
.mulsang-fig.wide { max-width: 100%; margin: 0 0 18px; }
.mulsang-fig.wide img { border-radius: 16px; }
.mulsang-fig.sm { max-width: 170px; }
.mulsang-fig.mini { max-width: 64px; margin: 0; }
.mulsang-fig.mini img { border-radius: 50%; box-shadow: 0 0 0 2px rgba(189,169,122,.6); }
.mulsang-fig .svg-fb svg { width: 100%; height: auto; }
.ms-head .mf figure { margin: 0; }

/* ---------- Hero nav v2 (폭스바니형) ---------- */
.hnav2 { padding: 10px 18px 0; }
.hnav2 .row { display: flex; align-items: center; gap: 10px; }
.hnav2 .arrow { width: 46px; height: 46px; flex: none; border-radius: 50%; border: 1.5px solid rgba(232,214,160,.7); background: radial-gradient(circle at 35% 30%, rgba(232,214,160,.25), rgba(46,51,96,.6)); color: var(--gold-light); font-size: 1.35rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.35); transition: transform .12s, background .2s; }
.hnav2 .arrow:active { transform: scale(.92); background: var(--grad-gold); color: var(--navy-900); }
.hnav2 .arrow[disabled] { opacity: .35; }
.hnav2 .track { flex: 1; display: flex; gap: 5px; align-items: center; }
.hnav2 .track i { flex: 1; height: 5px; border-radius: 3px; background: rgba(189,169,122,.28); position: relative; overflow: hidden; transition: background .3s; cursor: pointer; }
.hnav2 .track i.on::after { content: ''; position: absolute; inset: 0; background: var(--grad-gold); box-shadow: 0 0 10px rgba(232,214,160,.9); border-radius: 3px; animation: trackFill .45s ease-out; }
@keyframes trackFill { from { transform: scaleX(0); transform-origin: left } to { transform: none } }
.hnav2 .cnt { flex: none; min-width: 58px; text-align: center; font-family: var(--font-point); color: var(--navy-900); background: var(--grad-gold); border-radius: 999px; padding: 6px 12px; font-size: .95rem; font-weight: 700; box-shadow: 0 4px 14px rgba(189,169,122,.4); }
.hnav2 .cnt small { font-size: .78em; opacity: .75; }
.hnav2 .hint { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-size: .9rem; margin-top: 10px; }
.hnav2 .hint .chev { display: inline-flex; gap: 2px; color: var(--gold-light); }
.hnav2 .hint .chev i { font-style: normal; opacity: .3; animation: chev 1.4s infinite; }
.hnav2 .hint .chev i:nth-child(2) { animation-delay: .2s } .hnav2 .hint .chev i:nth-child(3) { animation-delay: .4s }
.hnav2 .hint .chev.l i { animation-direction: reverse; }
@keyframes chev { 0%, 100% { opacity: .25 } 50% { opacity: 1 } }
.htabs { display: flex; gap: 8px; overflow-x: auto; padding: 12px 18px 4px; scrollbar-width: none; }
.htabs::-webkit-scrollbar { display: none; }
.htabs button { flex: none; border-radius: 999px; padding: 8px 14px; font-size: .9rem; border: 1px solid rgba(189,169,122,.4); background: rgba(46,51,96,.45); color: var(--cream); white-space: nowrap; }
.htabs button.on { background: var(--grad-gold); color: var(--navy-900); font-weight: 700; border-color: transparent; }
@media (prefers-reduced-motion: reduce) { .hnav2 .hint .chev i, .hnav2 .track i.on::after { animation: none } }

/* ---------- 은혁 소개 카드 (폭스바니형 캐릭터 카드) ---------- */
.eun-card { position: relative; border-radius: 22px; padding: 18px 18px 16px; background: linear-gradient(160deg, rgba(46,51,96,.85) 0%, rgba(26,31,58,.95) 60%, rgba(12,16,34,.95) 100%); border: 1px solid rgba(189,169,122,.45); box-shadow: var(--shadow), inset 0 1px 0 rgba(232,214,160,.25); overflow: hidden; }
.eun-card::before { content: ''; position: absolute; top: -40px; right: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(123,108,246,.35), transparent 65%); pointer-events: none; }
.eun-card .head { display: flex; align-items: center; gap: 14px; }
.eun-card .avatar-wrap { position: relative; width: 74px; height: 74px; flex: none; }
.eun-card .avatar-wrap img { width: 74px; height: 74px; border-radius: 50%; object-fit: cover; object-position: center 20%; border: 2px solid var(--gold-light); box-shadow: 0 0 0 5px rgba(189,169,122,.18), 0 8px 24px rgba(0,0,0,.45); }
.eun-card .avatar-wrap::after { content: '✦'; position: absolute; right: -4px; bottom: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--grad-gold); color: var(--navy-900); font-size: .8rem; display: flex; align-items: center; justify-content: center; border: 2px solid var(--navy-900); }
.eun-card .who { display: flex; flex-direction: column; gap: 4px; }
.eun-card .who .role { font-size: .78rem; color: var(--muted); letter-spacing: 1px; }
.eun-card .who .name { font-family: var(--font-point); font-size: 1.45rem; color: var(--gold-light); line-height: 1.1; }
.eun-card .who .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.eun-card .who .tags span { font-size: .74rem; color: #c7bfff; background: rgba(123,108,246,.22); border: 1px solid rgba(123,108,246,.45); border-radius: 999px; padding: 2px 8px; }
.eun-card .quote { position: relative; margin-top: 14px; padding: 14px 16px; background: rgba(244,235,210,.96); color: var(--navy-900); border-radius: 16px; font-size: 1.04rem; line-height: 1.6; }
.eun-card .quote b { color: var(--violet-dark); }
.eun-card .stats { display: flex; gap: 6px; margin-top: 12px; }
.eun-card .stats div { flex: 1; text-align: center; background: rgba(12,16,34,.5); border: 1px solid rgba(189,169,122,.25); border-radius: 12px; padding: 8px 4px; }
.eun-card .stats b { display: block; font-family: var(--font-point); color: var(--gold-light); font-size: 1.05rem; }
.eun-card .stats span { font-size: .72rem; color: var(--muted); }
.eun-card .btn { margin-top: 12px; min-height: 50px; font-size: 1rem; }

/* ---------- Hero nav v3 (폭스바니형: 카드 안 카운터 + 미니 점) ---------- */
.hslider { padding: 12px 0 4px 18px; gap: 10px; }
.hslider::after { content: ''; flex: 0 0 8px; }
.hcard { flex: 0 0 76%; height: 420px; border-radius: 20px; scroll-snap-align: start; }   /* 2026-10-07: 조금 작게 */
.hcard .hc-cnt { position: absolute; top: 12px; right: 12px; z-index: 2; background: rgba(12,16,34,.62); backdrop-filter: blur(6px); color: #fff; font-size: .82rem; font-weight: 600; letter-spacing: 1px; padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); font-variant-numeric: tabular-nums; }
.hcard .hc-tag { top: 12px; left: 12px; }
.hcard .hc-name { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: .95rem; }
.hcard .hc-pr { font-family: var(--font); font-size: .82rem; color: var(--cream); font-weight: 700; }
.hcard .hc-pr del { color: var(--muted); font-weight: 400; margin-left: 2px; }
.hcard .hc-cta { display: inline-block; color: var(--gold-light); font-weight: 800; font-size: 1.08rem; padding: 4px 0; border-bottom: 2px solid rgba(232,214,160,.7); }
.hcard p { margin: 6px 0 12px; }
.hdots { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 10px 0 2px; }
.hdots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(189,169,122,.3); transition: width .25s, background .25s; }
.hdots i.on { width: 18px; background: var(--gold-light); }
.htabs { padding: 8px 18px 2px; gap: 6px; }
.htabs button { padding: 7px 12px; font-size: .86rem; background: rgba(46,51,96,.35); border-color: rgba(189,169,122,.28); color: var(--muted); }
.htabs button.on { background: rgba(232,214,160,.16); color: var(--gold-light); border-color: rgba(232,214,160,.6); font-weight: 700; }

/* ---------- Hero card v4 (폭스바니형 본문 구성) ---------- */
.hcard .hc-name { display: inline-block; font-family: var(--font); font-size: .8rem; font-weight: 700; color: var(--gold-light); background: rgba(232,214,160,.14); border: 1px solid rgba(232,214,160,.45); border-radius: 999px; padding: 4px 10px; margin-bottom: 10px; letter-spacing: 0; }
.hcard h2 { font-size: 1.5rem; }
.hcard p { color: #cfcbe0; font-size: .95rem; margin: 8px 0 14px; }
.hcard .hc-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hcard .hc-cta { border-bottom: 0; padding: 0; font-size: 1.08rem; white-space: nowrap; }
.hcard .hc-foot { flex-wrap: wrap; row-gap: 4px; }
.hcard .hc-pr { font-family: var(--font); font-size: .82rem; color: var(--cream); font-weight: 700; white-space: nowrap; }
.hcard .hc-pr del { color: var(--muted); font-weight: 400; margin-right: 2px; }

/* ---------- v2.6 fixes ---------- */
.speech:not(.dark) .bubble .who { color: var(--violet-dark); font-weight: 700; }
.locked { min-height: 380px; }
.locked .lock-cover { justify-content: center; padding: 30px 16px 18px; gap: 6px; }
.locked .lock-cover .lock-ic { margin-top: 6px; }
.locked .lock-cover .lock-list { margin-top: 6px; }
.locked .lock-cover .lock-list li { padding: 9px 10px; font-size: .96rem; }
/* 2열 카드: 이미지 전면 + 반투명·흐림 텍스트 패널 */
.gcard { position: relative; aspect-ratio: 3 / 4.6; display: block; }
.gcard .gimg { position: absolute; inset: 0; aspect-ratio: auto; }
.gcard .gimg img { object-position: center 12%; }
.gcard .gbody { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 12px 12px; background: linear-gradient(180deg, rgba(12,16,34,0) 0%, rgba(12,16,34,.55) 22%, rgba(12,16,34,.78) 100%);  border-top: 1px solid rgba(232,214,160,.18); }
.gcard.free { aspect-ratio: 3 / 3.4; }
.gcard h3 { font-size: 1rem; }
.gcard p { -webkit-line-clamp: 2; font-size: .8rem; color: #d3cfe3; }
/* 선생님 소개 가로 목록 */
.teachers { display: flex; gap: 12px; overflow-x: auto; padding: 4px 18px 10px; scrollbar-width: none; }
.teachers::-webkit-scrollbar { display: none; }
.teacher { flex: 0 0 132px; text-align: center; }
.teacher img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; margin: 0 auto 8px; border: 2px solid var(--gold-light); box-shadow: 0 0 0 5px rgba(189,169,122,.16); }
.teacher b { display: block; font-family: var(--font-point); color: var(--gold-light); font-size: 1.05rem; }
.teacher span { display: block; font-size: .78rem; color: var(--muted); line-height: 1.35; }
.char-hero { position: relative; border-radius: 22px; overflow: hidden; min-height: 300px; display: flex; align-items: flex-end; }
.char-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.char-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,16,34,0) 30%, rgba(12,16,34,.9) 100%); }
.char-hero .t { position: relative; z-index: 2; padding: 16px; }

/* ---------- v2.7 선생님(캐릭터) ---------- */
.teachers { margin-top: -6px; }
.teacher { text-decoration: none; }
.gcard .tch, .product .tch { display: block; font-size: .74rem; color: var(--gold-light); font-weight: 700; margin-bottom: 3px; letter-spacing: 0; }
.reco-teacher { display: flex; gap: 12px; align-items: center; background: linear-gradient(135deg, rgba(123,108,246,.16), rgba(46,51,96,.35)); border: 1px solid rgba(189,169,122,.35); border-radius: 18px; padding: 14px; text-decoration: none; color: var(--text); }
.reco-teacher img { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold-light); flex: 0 0 68px; }
.reco-teacher b { display: block; font-family: var(--font-point); font-size: 1.05rem; color: var(--cream); margin: 6px 0 2px; }
.reco-teacher p { font-size: .88rem; color: var(--muted); margin: 0 0 6px; }
.reco-teacher .go { color: var(--gold-light); font-weight: 700; font-size: .88rem; }
.report-teacher { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; background: rgba(12,16,34,.45); border: 1px solid rgba(189,169,122,.3); border-radius: 999px; padding: 4px 12px 4px 4px; font-size: .84rem; color: var(--muted); }
.report-teacher img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid var(--gold-light); }
.report-teacher b { color: var(--gold-light); }

/* ---------- v2.8 운세카드: 텍스트 밑 반투명·흐림, 캐릭터 노출 ---------- */
.hcard::after { height: 54%; background: linear-gradient(180deg, rgba(12,16,34,0) 0%, rgba(12,16,34,.42) 30%, rgba(12,16,34,.82) 100%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 38%); mask-image: linear-gradient(180deg, transparent 0%, #000 38%); }
.gcard { aspect-ratio: 3 / 5; }
.gcard .gbody { gap: 2px; padding: 34px 12px 12px; background: linear-gradient(180deg, rgba(12,16,34,0) 0%, rgba(12,16,34,.35) 25%, rgba(12,16,34,.7) 50%, rgba(12,16,34,.9) 100%); border-top: 0; }   /* 2026-10-13 A안: 블러 없이 아래서 위로 그라데이션 */
.gcard .gbody p { font-size: .8rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
.gcard .price { margin-top: 4px; }
.gcard .go { margin-top: 2px; }

/* ---------- v2.9 카드: 얼굴 상단 배치 · 텍스트 축소 · 가격 제거 ---------- */
.hcard img { height: var(--fs, 100%); top: var(--fy, 0); bottom: auto; object-position: center top; }
.hcard .hc-body { padding: 14px 18px 18px; }
.hcard h2 { font-size: 1.42rem; }
.hcard p { font-size: .9rem; margin: 6px 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hcard .hc-foot { justify-content: flex-start; }
.hcard::after { height: 48%; }
.gcard { aspect-ratio: 3 / 4.4; }
.gcard .gimg img { height: var(--fs, 100%); top: var(--fy, 0); position: absolute; left: 0; width: 100%; object-position: center top; }
.gcard .gbody { padding: 34px 12px 12px; gap: 2px; background: linear-gradient(180deg, rgba(12,16,34,0) 0%, rgba(12,16,34,.35) 25%, rgba(12,16,34,.7) 50%, rgba(12,16,34,.9) 100%); }
.gcard h3, .gcard .tch, .gcard .gprec, .gcard .go { text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.gcard .gbody .tch { font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gcard h3 { font-size: .98rem; line-height: 1.25; }
.gcard .gbody .go { margin-top: 4px; font-size: .84rem; }

/* v3.1.2 무료 카드도 세로 인물 카드 */
.gcard.free { aspect-ratio: 3 / 4.2; }
.gcard.free .gbody .tch { color: var(--muted); font-weight: 500; }
.teacher img { object-position: center 30%; }

/* ---------- 가독성 보정 (2026-09-14) ---------- */
/* 이미지 카드 좌상단 태그: 밝은 배경(달·조명) 위에서도 읽히도록 어두운 반투명 바탕 */
.gcard .gimg .badge, .hcard .hc-tag { background: rgba(12,16,34,.74); color: var(--cream); border: 1px solid rgba(232,214,160,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 2px 8px rgba(0,0,0,.35); text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.gcard .gimg .badge.gold, .hcard .hc-tag.gold { color: var(--gold-light); }
/* 밝은 말풍선 안의 강조·링크: 크림 배경에서 금색이 묻히므로 진한 색 + 밑줄 */
.speech:not(.dark) .bubble .gold, .speech:not(.dark) .bubble a { color: #7a5a12; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.speech:not(.dark) .bubble b { color: #3b2f8f; }

/* ---------- 리포트 미리보기 · 책 · 장식 버튼 (2026-09-14) ---------- */
.rp-head { text-align: center; padding: 6px 18px 0; }
.rp-head h2 { font-family: var(--font-point); font-size: 1.5rem; line-height: 1.35; color: var(--cream); margin: 0; }
.rp-head h2 b { color: var(--gold-light); font-size: 1.9rem; }
.rp-head h2 span { display: block; font-size: 1rem; color: var(--muted); margin-top: 6px; letter-spacing: 1px; }
.rp-head p { color: var(--muted); font-size: .95rem; margin: 10px 0 0; line-height: 1.5; }
.rp-strip { display: flex; gap: 12px; overflow-x: auto; padding: 18px 18px 8px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.rp-strip::-webkit-scrollbar { display: none; }
.rp-page { flex: none; width: 158px; aspect-ratio: 3 / 4.4; scroll-snap-align: start; background: linear-gradient(180deg, #fffdf7, #f4eddc); color: #2a2438; border-radius: 6px; padding: 12px 11px 0; box-shadow: 0 10px 28px rgba(0,0,0,.45), inset 0 0 0 1px rgba(189,169,122,.35); overflow: hidden; position: relative; }
.rp-page .no { font-size: .62rem; letter-spacing: 2px; color: #9c8a5c; font-weight: 700; }
.rp-page h4 { font-family: var(--font-point); font-size: .84rem; line-height: 1.3; margin: 4px 0 7px; color: #1a1f3a; min-height: 2.6em; }
.rp-page img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; margin-bottom: 7px; display: block; }
.rp-page .tx { font-size: .58rem; line-height: 1.6; color: #3b3650; filter: blur(.8px); word-break: break-all; }
.rp-page::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(180deg, rgba(244,237,220,0), #f4eddc 78%); }
.rp-cap { text-align: center; color: var(--gold-light); font-size: .85rem; letter-spacing: .5px; padding: 2px 18px 0; }
.rp-book-wrap { text-align: center; padding: 26px 18px 4px; }
.rp-book-wrap img.book { width: 100%; max-width: 340px; border-radius: 14px; display: block; margin: 0 auto; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.rp-book { position: relative; width: 212px; height: 298px; margin: 10px auto 0; perspective: 900px; }
.rp-book .cover { position: absolute; inset: 0; border-radius: 6px 12px 12px 6px; background: var(--bk, #1A1F3A); box-shadow: 0 24px 50px rgba(0,0,0,.55), inset 0 0 0 1px rgba(232,214,160,.5); transform: rotateY(-14deg) rotateX(3deg); transform-origin: left center; overflow: hidden; }
.rp-book .cover::before { content: ''; position: absolute; inset: 9px; border: 2px solid rgba(232,214,160,.85); border-radius: 4px 8px 8px 4px; box-shadow: inset 0 0 0 4px var(--bk, #1A1F3A), inset 0 0 0 5px rgba(232,214,160,.45); pointer-events: none; z-index: 2; }
.rp-book .cover img { position: absolute; left: 19px; top: 19px; width: calc(100% - 38px); height: 60%; object-fit: cover; object-position: center 10%; border-radius: 4px; filter: sepia(.12) contrast(1.05); }
.rp-book .cover .t { position: absolute; left: 0; right: 0; bottom: 30px; text-align: center; color: var(--gold-light); font-family: var(--font-point); font-size: 1.05rem; letter-spacing: 1px; text-shadow: 0 1px 2px rgba(0,0,0,.6); padding: 0 14px; line-height: 1.3; }
.rp-book .cover .t small { display: block; font-size: .66rem; letter-spacing: 3px; color: rgba(232,214,160,.8); margin-top: 4px; font-family: inherit; }
.rp-book .pages { position: absolute; top: 5px; bottom: 5px; right: -9px; width: 14px; background: repeating-linear-gradient(90deg, #f3ecd8 0 1px, #d9d0b8 1px 2px); border-radius: 0 4px 4px 0; transform: rotateY(-14deg) translateZ(-6px); transform-origin: left center; box-shadow: 4px 0 10px rgba(0,0,0,.4); }
.rp-book .tassel { position: absolute; left: -8px; top: -16px; width: 28px; height: 150px; z-index: 3; filter: drop-shadow(0 6px 8px rgba(0,0,0,.5)); }
.rp-book-cap { margin: 20px 0 0; font-family: var(--font-point); font-size: 1.35rem; color: var(--cream); line-height: 1.35; }
.rp-book-cap b { color: var(--gold-light); }
.btn-ornate { position: relative; display: block; width: 100%; padding: 20px 30px; margin-top: 20px; border-radius: 10px; border: 1px solid rgba(232,214,160,.75); background: linear-gradient(180deg, #2b2044, #140f22); color: var(--gold-light); font-family: var(--font-point); font-size: 1.28rem; letter-spacing: 1px; text-align: center; box-shadow: 0 0 0 4px #140f22, 0 0 0 5px rgba(232,214,160,.5), 0 14px 34px rgba(0,0,0,.55), inset 0 0 30px rgba(232,214,160,.08); overflow: hidden; cursor: pointer; }
.btn-ornate::before { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(232,214,160,.45); border-radius: 6px; pointer-events: none; }
.btn-ornate::after { content: ''; position: absolute; top: -50%; bottom: -50%; left: -40%; width: 36%; background: linear-gradient(100deg, transparent, rgba(255,240,200,.18), transparent); transform: skewX(-20deg); animation: ornShine 4s ease-in-out infinite; pointer-events: none; }
@keyframes ornShine { 0%, 55% { left: -40%; } 100% { left: 140%; } }
.btn-ornate .corner { position: absolute; width: 30px; height: 30px; color: var(--gold-light); pointer-events: none; }
.btn-ornate .corner.tl { left: 7px; top: 7px; } .btn-ornate .corner.tr { right: 7px; top: 7px; transform: scaleX(-1); } .btn-ornate .corner.bl { left: 7px; bottom: 7px; transform: scaleY(-1); } .btn-ornate .corner.br { right: 7px; bottom: 7px; transform: scale(-1); }
.btn-ornate .sub { display: block; font-family: var(--font-body, inherit); font-size: .88rem; color: rgba(244,235,210,.82); letter-spacing: 0; margin-top: 7px; font-weight: 500; }
.btn-ornate:active { transform: scale(.985); }
@media (prefers-reduced-motion: reduce) { .btn-ornate::after { animation: none; } }
.saved-item.slot-locked .t, .saved-item.slot-locked .s { opacity: .8; }
.saved-item .t .badge { font-size: .68rem; padding: 2px 8px; }
.badge.free { background: rgba(127,216,165,.15); color: #b8f0d0; border-color: rgba(127,216,165,.45); }
.saved-item .t { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.saved-item .info { flex: 1 1 auto; min-width: 0; }
.saved-item .s { line-height: 1.45; }
.saved-item .act { display: flex; align-items: center; gap: 6px; flex: none; }
.saved-item .act .btn { white-space: nowrap; min-height: 38px; padding: 6px 12px; font-size: .92rem; }
.saved-item .act .btn.x { width: 38px; padding: 0; color: var(--muted); }
.grp { display: flex; align-items: baseline; gap: 6px; color: var(--gold-light); font-family: var(--font-point); font-size: .95rem; padding: 12px 0 2px; }
.grp small { color: var(--muted); font-family: var(--font-body, inherit); font-size: .8rem; }
.grp b { color: var(--cream); }

/* ---------- 부부·연인 궁합 ---------- */
.cp-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4px; margin: 6px 0 10px; }
.cp-pair .mulsang-fig { max-width: 150px; margin: 0 auto; }
.cp-pair .mulsang-fig figcaption { font-size: .85rem; }
.cp-heart { color: var(--gold-light); font-size: 1.5rem; text-shadow: 0 0 14px rgba(232,214,160,.6); }
.cp-lead { color: var(--cream); font-size: 1.02rem; line-height: 1.65; margin: 4px 0 14px; }
.cp-scorebox { text-align: center; margin: 6px 0 4px; }
.cp-grade { font-family: var(--font-point); color: var(--gold-light); font-size: 1.2rem; margin-top: 10px; }
.cp-blur { filter: blur(5px); user-select: none; -webkit-user-select: none; pointer-events: none; }
.cp-mask { display: inline-block; background: rgba(189,169,122,.2); border-radius: 6px; padding: 0 6px; color: var(--gold-light); letter-spacing: 1px; }
.cp-lockbar .track, .cp-lockbar span:first-child { opacity: .55; }
.cp-lockbar .fill { filter: blur(3px); }
.cp-teaser { color: #e9e6f5; font-size: 1.05rem; line-height: 1.7; }
.cp-toc { list-style: none; padding: 0; margin: 0; }
.cp-toc li { display: flex; gap: 10px; padding: 11px 2px; border-bottom: 1px solid rgba(189,169,122,.2); color: var(--cream); font-size: 1rem; }
.cp-toc li b { color: var(--gold-light); font-family: var(--font-point); min-width: 26px; }
.cp-toc li span small { display: block; color: var(--muted); font-size: .86rem; margin-top: 2px; }
.cp-toc li:not(.ch)::after { content: ''; flex: none; margin-left: auto; width: .95em; height: .95em; align-self: center; background: var(--gold-light); opacity: .7; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3Crect x='5' y='10.5' width='14' height='9.5' rx='2'/%3E%3Ccircle cx='12' cy='15.2' r='1.3' fill='black' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3Crect x='5' y='10.5' width='14' height='9.5' rx='2'/%3E%3Ccircle cx='12' cy='15.2' r='1.3' fill='black' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat; }
.cp-toc li.ch { color: var(--gold-light); font-family: var(--font-point); font-size: 1.05rem; padding: 16px 2px 4px; border-bottom: 0; }
.cp-form .label { margin-top: 12px; }

/* ---------- 주제별 리포트 공용 (saju-kit.js) ---------- */
.tp-cal { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; margin: 4px 0 14px; }
.tp-cal-i { text-align: center; border: 1px solid rgba(189,169,122,.3); border-radius: 12px; padding: 7px 2px 6px; background: rgba(46,51,96,.4); }
.tp-cal-i small { display: block; color: var(--muted); font-size: .78rem; line-height: 1.2; }
.tp-cal-i b { display: block; font-size: 1.35rem; line-height: 1.3; }
.tp-cal-i span { display: block; font-size: .74rem; color: var(--cream); line-height: 1.25; }
.tp-cal-i.good { border-color: rgba(232,214,160,.75); background: rgba(232,214,160,.12); }
.tp-cal-i.storm { border-color: rgba(255,123,123,.55); background: rgba(255,123,123,.08); }
.tp-cal-i.cur { box-shadow: 0 0 0 2px var(--violet); }
.tp-cal-i.past { opacity: .55; }
.tp-verdict { text-align: center; border: 1.5px solid var(--gold); border-radius: 18px; padding: 16px 14px; margin: 0 0 1em; background: linear-gradient(180deg, rgba(123,108,246,.18), rgba(12,16,34,.6)); }
.tp-verdict small { display: block; color: var(--muted); font-size: .9rem; }
.tp-verdict b { display: block; font-family: var(--font-point); font-size: 1.7rem; color: var(--gold-light); margin: 4px 0; line-height: 1.3; }
.tp-verdict span { display: block; color: var(--cream); font-size: .95rem; }
.tp-check { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 6px; }
.tp-check li { position: relative; padding: 9px 12px 9px 38px; border: 1px solid rgba(189,169,122,.28); border-radius: 12px; background: rgba(46,51,96,.35); }
.tp-check li::before { content: '☐'; position: absolute; left: 12px; top: 8px; color: var(--gold-light); font-size: 1.1rem; }
.tp-quote { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 8px; }
.tp-quote li { border-left: 3px solid var(--gold); background: rgba(189,169,122,.1); border-radius: 0 12px 12px 0; padding: 10px 14px; }
.tp-quote li small { display: block; color: var(--muted); font-size: .85rem; }
.tp-quote li b { display: block; font-family: var(--font-point); font-size: 1.08rem; color: var(--cream); font-weight: 400; line-height: 1.55; }
.tp-quote li span { display: block; color: #d9d4ff; font-size: .92rem; margin-top: 2px; }
.tp-letter { border: 1px solid rgba(232,214,160,.5); border-radius: 16px; padding: 18px 16px; margin: 0 0 1em; background: rgba(244,235,210,.07); font-family: var(--font-point); line-height: 1.85; }
.tp-letter p { margin: 0 0 .8em; }
.tp-letter .sign { text-align: right; color: var(--gold-light); margin: 0; }
.tp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 1em; }
.tp-grid2 > div { border: 1px solid rgba(189,169,122,.3); border-radius: 12px; padding: 10px 10px 6px; background: rgba(46,51,96,.35); }
.tp-grid2 small { display: block; font-weight: 700; margin-bottom: 4px; }
.tp-grid2 .ok small { color: var(--ok); }
.tp-grid2 .no small { color: var(--danger); }
.tp-grid2 ul { margin: 0; padding-left: 1.1em; font-size: .95rem; }
.tp-grid2 li { margin-bottom: 4px; }
@media (max-width: 360px) { .tp-grid2 { grid-template-columns: 1fr; } }
.tp-graph { margin: 0 0 1em; text-align: center; }
.tp-graph svg { width: 100%; height: auto; border: 1px solid rgba(189,169,122,.3); border-radius: 14px; background: rgba(12,16,34,.45); }
.tp-graph figcaption { color: var(--muted); font-size: .88rem; margin-top: 6px; }
@media print { .tp-cal-i, .tp-check li, .tp-quote li, .tp-letter, .tp-grid2 > div, .tp-verdict { background: #fff !important; color: #222; } .tp-verdict b, .tp-quote li b { color: #5a4bd6; } }

/* 제목 앞 별자리 아이콘 (saju-kit.js constel) — 글자 크기를 따라가는 금빛 별자리 */
.tp-constel { display: inline-block; width: 1.7em; height: 1.7em; vertical-align: -0.5em; margin: -.4em .28em -.4em 0; /* 위아래 음수 여백: 두 줄 제목에서 줄 간격이 벌어지지 않게 */ color: var(--gold-light); overflow: visible; filter: drop-shadow(0 0 5px rgba(232,214,160,.6)); }
@media print { .tp-constel { filter: none; color: #9c8a5c; } }

/* ---------- PWA(홈 화면 앱) 하단 탭 보정: safe-area 를 높이에 더해 아이콘이 줄어들지 않게 ---------- */
.bottom-nav { height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); box-sizing: border-box; }
.bottom-nav a svg { flex: 0 0 auto; width: 26px; height: 26px; }
.bottom-nav a span { line-height: 1.1; white-space: nowrap; }
@media (display-mode: standalone) { .app { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 24px); } .toast { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 20px); } }
/* 홈 화면 앱(standalone)·iOS 반투명 상태바: 상단이 상태바 밑으로 들어가지 않게 (2026-10-13) */
@media (display-mode: standalone) { .topbar { padding-top: calc(12px + env(safe-area-inset-top, 0px)); } .cinema .top { padding-top: calc(14px + env(safe-area-inset-top, 0px)); } .cinema .skip { top: calc(14px + env(safe-area-inset-top, 0px)); } .form-wrap { padding-top: env(safe-area-inset-top, 0px); } }
/* 홈 화면 추가 안내 시트 */
.a2hs .head { display: flex; gap: 14px; align-items: center; }
.a2hs .head img { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.a2hs .head h3 { margin: 0; font-size: 1.15rem; color: var(--navy); }
.a2hs .head p { margin: 4px 0 0; color: #666; font-size: .92rem; }
.a2hs .step { display: flex; align-items: center; gap: 10px; background: #f4f2fb; border-radius: 12px; padding: 12px 14px; margin-top: 10px; color: #222; font-size: 1rem; }
.a2hs .step i { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: var(--violet); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-weight: 700; font-size: .9rem; }
.a2hs .step .ic { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: #e6e2fa; color: var(--violet-dark); margin: 0 2px; }
.a2hs .step .ic svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ---------- footer v2 (소셜 · 3열 링크 · 사업자 정보 접기) ---------- */
.footer { padding: 26px 18px 22px; }
.footer .social { display: flex; gap: 12px; margin-bottom: 22px; }
.footer .so { width: 48px; height: 48px; border-radius: 14px; background: rgba(46,51,96,.45); border: 1px solid rgba(189,169,122,.28); display: inline-flex; align-items: center; justify-content: center; color: var(--cream); transition: background .2s, transform .2s; }
.footer .so:hover { background: rgba(232,214,160,.18); transform: translateY(-1px); }
.footer .so svg { width: 22px; height: 22px; fill: currentColor; }
.footer .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; margin-bottom: 18px; }
.footer .cols h5 { margin: 0 0 8px; font-size: .92rem; color: var(--cream); font-weight: 700; }
.footer .cols a { display: block; color: var(--muted); font-size: .9rem; line-height: 1.3; padding: 5px 0; }
.footer .cols a:hover { color: var(--gold-light); }
.footer .biz { border-top: 1px solid rgba(189,169,122,.2); padding: 12px 0 4px; }
.footer .biz summary { list-style: none; cursor: pointer; color: var(--muted); font-size: .92rem; display: flex; align-items: center; gap: 6px; }
.footer .biz summary::-webkit-details-marker { display: none; }
.footer .biz summary i { font-style: normal; color: var(--gold-light); transition: transform .2s; display: inline-block; }
.footer .biz[open] summary i { transform: rotate(90deg); }
.footer .biz-body { padding: 10px 0 2px; font-size: .82rem; line-height: 1.75; color: var(--muted); }
.footer .fine { margin-top: 12px; font-size: .78rem; color: rgba(160,160,180,.8); line-height: 1.6; }

/* 후기 전체 보기 카드 · 후기 페이지 */
.review-card.more { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: linear-gradient(135deg, rgba(123,108,246,.25), rgba(46,51,96,.6)); color: var(--cream); border: 1px solid rgba(189,169,122,.35); gap: 8px; }
.review-card.more b { font-family: var(--font-point); font-size: 1.2rem; line-height: 1.35; color: var(--gold-light); }
.review-card.more span { font-size: .85rem; color: var(--muted); }
.rv-filters { display: flex; gap: 8px; overflow-x: auto; padding: 4px 18px 8px; scrollbar-width: none; }
.rv-filters::-webkit-scrollbar { display: none; }
.rv-filters button { flex: 0 0 auto; border: 1px solid rgba(189,169,122,.35); background: rgba(46,51,96,.35); color: var(--muted); border-radius: 999px; padding: 7px 13px; font-size: .88rem; }
.rv-filters button.on { background: rgba(232,214,160,.16); color: var(--gold-light); border-color: rgba(232,214,160,.6); font-weight: 700; }
.rv-list { padding: 4px 18px; display: grid; gap: 12px; }
.rv-list .review-card { flex: none; width: auto; }
.rv-summary { display: flex; align-items: baseline; gap: 10px; padding: 6px 18px 4px; color: var(--muted); font-size: .92rem; }
.rv-summary b { font-family: var(--font-point); font-size: 1.6rem; color: var(--gold-light); }

/* ---------- 정통 명리 프리미엄 컨셉 ---------- */
.creed { background: linear-gradient(160deg, rgba(26,31,58,.9), rgba(12,16,34,.9)); border: 1px solid rgba(189,169,122,.35); border-radius: 22px; padding: 20px 18px 16px; position: relative; overflow: hidden; }
.creed::before { content: '명'; position: absolute; right: -6px; top: -18px; font-family: 'Gowun Batang', serif; font-size: 8rem; color: rgba(232,214,160,.06); pointer-events: none; }
.creed-head h2 { font-family: var(--font-point); font-size: 1.45rem; color: var(--cream); margin: 10px 0 6px; }
.creed-head p { color: #cfcbe0; font-size: .95rem; line-height: 1.6; margin: 0; }
.creed-head p b { color: var(--gold-light); }
.creed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.creed-grid div { background: rgba(232,214,160,.06); border: 1px solid rgba(189,169,122,.2); border-radius: 12px; padding: 10px 12px; }
.creed-grid b { display: block; font-family: var(--font-point); color: var(--gold-light); font-size: 1rem; }
.creed-grid span { display: block; color: var(--muted); font-size: .8rem; line-height: 1.4; margin-top: 2px; }
.principles > div { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px dashed rgba(189,169,122,.2); }
.principles > div:last-child { border-bottom: 0; }
.principles > div > b { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--gold-light); color: var(--gold-light); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-point); }
.principles h4 { margin: 2px 0 4px; font-size: 1.02rem; color: var(--cream); }
.principles p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.cinema .logo-big small { display: block; font-family: var(--font); font-size: .78rem; letter-spacing: 2px; color: rgba(232,214,160,.75); margin-top: 6px; font-weight: 500; }

/* 소셜 아이콘: 실제 플랫폼 로고 + 브랜드 색 */
.footer .so { border: 0; color: #fff; }
.footer .so svg { width: 22px; height: 22px; fill: currentColor; }
.footer .so-tiktok { background: #010101; }
.footer .so-youtube { background: #ff0000; }
.footer .so-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.footer .so-blog { background: #03c75a; }
.footer .so-blog svg { width: 16px; height: 16px; }
.footer .so-naverclip { background: #6f4dce; color: #a2de73; }
.footer .so-naverclip svg { fill: none; }
.footer .so:hover { transform: translateY(-2px); filter: brightness(1.08); }

/* 날씨·자물쇠·주의 아이콘 (saju-kit.js iconize) — 글자 크기를 따라가는 금빛 선 아이콘 */
.tp-wx { display: inline-block; width: 1.18em; height: 1.18em; vertical-align: -.22em; color: var(--gold-light); overflow: visible; }
.tp-wx.calm { opacity: .85; }
.tp-wx.rough, .tp-wx.storm { color: var(--muted); }
.tp-wx.warn { color: #e9b96a; }
.tp-cal-i b .tp-wx { width: 1.05em; height: 1.05em; vertical-align: -.15em; }
.bar .val .tp-wx { width: 1.05em; height: 1.05em; vertical-align: -.18em; opacity: .8; }
@media print { .tp-wx { color: #6b5f3a; } .tp-wx.rough, .tp-wx.storm { color: #888; } }

/* 내 사주 결과 — 로그인 안내 카드 (my.html) */
.gate { padding: 36px 18px 30px; }
.gate-title { font-weight: 700; font-size: 1.08rem; margin: 0 0 18px; color: var(--text); }
.gate-btn { display: inline-flex; width: auto; min-width: 168px; padding-left: 28px; padding-right: 28px; }
.gate-sub { font-size: .85rem; line-height: 1.55; margin: 14px 0 0; }

/* 무료 결과 화면의 고정 결제 버튼: 맨 아래 가까이 내려오면 올라온다 (result.html) */
/* 테스트 모드 띠(승인된 기기에만) */
.tester-ribbon { position: sticky; top: 0; z-index: 120; max-width: var(--maxw); margin: 0 auto; padding: 7px 12px; text-align: center; font-size: .82rem; font-weight: 700; color: #2a2210; background: linear-gradient(90deg, #E8D6A0, #f3e7bd); box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.tester-ribbon a { color: #5a4bd6; margin-left: 6px; text-decoration: underline; }
@media print { .tester-ribbon { display: none; } }
.cta-sticky { transition: transform .45s ease, opacity .45s ease; }
.cta-sticky.wait { opacity: 0; pointer-events: none; transform: translate(-50%, 100%); }

/* 무료 결과 · 고민 응답 카드 */
.worry-ans .worry-q { margin: 10px 0 12px; white-space: pre-line; }
.worry-ans .wa-lead { color: #e9e6f5; font-size: 1.04rem; line-height: 1.75; margin: 0 0 10px; }
.worry-ans .wa-reason { color: var(--cream); font-size: 1.04rem; line-height: 1.75; margin: 0 0 12px; padding-left: 12px; border-left: 2px solid rgba(189,169,122,.45); }
.worry-ans .wa-key { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(12,16,34,.6); border: 1px dashed rgba(189,169,122,.5); color: var(--muted); font-size: .98rem; }
.worry-ans .wa-key b { color: var(--gold-light); font-family: var(--font-point); font-size: 1.15rem; letter-spacing: .04em; }
.worry-ans .wa-more { color: var(--muted); font-size: .95rem; margin: 10px 0 0; }

/* 무료 결과 · 강점부터 */
.praise-lead { color: #f3eedc; font-size: 1.08rem; line-height: 1.8; }
.praise-list { list-style: none; padding: 0; margin: 6px 0 12px; }
.praise-list li { position: relative; padding: 9px 0 9px 26px; color: var(--cream); line-height: 1.7; border-bottom: 1px dashed rgba(189,169,122,.25); }
.praise-list li::before { content: '✦'; position: absolute; left: 4px; top: 9px; color: var(--gold-light); }
.praise-tail { color: var(--gold-light); font-family: var(--font-point); font-size: 1.05rem; margin-bottom: 14px; }

/* 친구 초대 상자 */
.invite-box .inv-two { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 12px 0 10px; }
.invite-box .inv-two div { text-align: center; border: 1px solid rgba(189,169,122,.35); border-radius: 14px; padding: 10px 6px; background: rgba(12,16,34,.5); }
.invite-box .inv-two span { display: block; color: var(--muted); font-size: .82rem; }
.invite-box .inv-two b { display: block; color: var(--gold-light); font-family: var(--font-point); font-size: 1.3rem; margin: 2px 0; }
.invite-box .inv-two small { color: var(--muted); font-size: .78rem; }
.invite-box .inv-two i { color: var(--gold); font-style: normal; font-size: 1.2rem; }
.invite-box .inv-link { display: flex; gap: 6px; margin-top: 6px; }
.invite-box .inv-link input { flex: 1; min-width: 0; background: rgba(12,16,34,.6); border: 1px solid rgba(189,169,122,.35); border-radius: 10px; color: var(--muted); padding: 10px; font-size: .85rem; }

/* 특가 띠 · 특가 안내 — A안(2026-10-05) 금테 벨벳 카드 + 흐르는 빛, 낮은 높이 */
.promo-band { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 12px 2px; padding: 7px 14px; border-radius: 12px; white-space: nowrap; text-decoration: none; color: var(--cream); background: linear-gradient(180deg, #1c1830, #0e0c1c); border: 1px solid rgba(232,214,160,.55); box-shadow: 0 0 0 3px rgba(232,214,160,.08), 0 8px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); overflow: hidden; }
.promo-band::before { content: ''; position: absolute; inset: 3px; border: 1px solid rgba(232,214,160,.25); border-radius: 9px; pointer-events: none; }
.promo-band::after { content: ''; position: absolute; top: -40%; bottom: -40%; width: 70px; background: linear-gradient(100deg, transparent, rgba(255,240,200,.22), transparent); transform: skewX(-18deg); animation: pbShine 3s ease-in-out infinite; }
@keyframes pbShine { 0% { left: -90px } 55%, 100% { left: 120% } }
.promo-band .pb-left { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.promo-band .pb-left small { font-family: var(--font-point); font-size: .66rem; letter-spacing: 3px; color: var(--gold); line-height: 1.2; }
.promo-band .pb-left span { font-size: .92rem; font-weight: 700; color: #fff; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.promo-band .pb-right { flex: none; display: flex; align-items: baseline; gap: 6px; }
.promo-band del { color: var(--muted); font-size: .8rem; }
.promo-band b { font-family: var(--font-point); font-size: 1.35rem; color: var(--gold-light); line-height: 1.1; text-shadow: 0 0 18px rgba(232,214,160,.35); }
.promo-band i { font-style: normal; font-size: .7rem; color: #ff9f93; }
.promo-band .pb-all { font-style: normal; font-weight: 500; color: rgba(255,255,255,.75); }
@media (max-width: 420px) { .promo-band { margin: 6px 10px 2px; padding: 6px 12px; gap: 8px; } .promo-band .pb-left span { font-size: .9rem; } .promo-band .pb-all { display: none; } .promo-band del { font-size: .74rem; } .promo-band b { font-size: 1.22rem; } }
.promo-note { text-align: center; margin: 0 0 12px; padding: 10px 12px; border: 1px dashed rgba(232,214,160,.6); border-radius: 12px; color: var(--cream); font-size: .95rem; background: rgba(189,169,122,.08); }
.promo-note del { color: var(--muted); margin: 0 4px; }
.promo-note { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 10px; }   /* 2026-10-06: 가격 덩어리는 줄 가운데서 안 잘리게 */
.promo-note .pn-price { white-space: nowrap; }
.promo-note .pn-price small { color: var(--muted); font-size: .85rem; }

/* 친구 초대 · 자리 채우기 */
.invite-box .seats { display: flex; justify-content: center; gap: 14px; margin: 12px 0 6px; }
.invite-box .seat { width: 72px; text-align: center; font-size: .82rem; color: var(--muted); }
.invite-box .seat i { display: block; width: 54px; height: 54px; margin: 0 auto 6px; border-radius: 50%; border: 2px dashed rgba(189,169,122,.5); line-height: 50px; font-style: normal; font-size: 1.3rem; color: var(--gold); }
.invite-box .seat.me i { border: 2px solid var(--gold); background: rgba(189,169,122,.15); font-size: .95rem; color: var(--cream); }
.invite-box .seat.done i { border: 2px solid #7fd8a5; background: rgba(127,216,165,.15); color: #b8f0d0; }
.invite-box .bar { height: 10px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; margin: 10px 0 4px; }
.invite-box .bar i { display: block; height: 100%; background: linear-gradient(90deg, #c9b47d, #7fd8a5); transition: width .5s ease; }
.invite-box .barlbl { display: flex; justify-content: space-between; color: var(--muted); font-size: .8rem; }
.invite-box .btn.kakao { background: #FEE500; color: #191919; }

/* 재회운 · 단계 띠 */
.rn-tiers { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 10px 0 4px; }
.rn-tiers span { font-size: .78rem; color: var(--muted); border: 1px dashed rgba(189,169,122,.35); border-radius: 999px; padding: 3px 9px; }
.rn-tiers span.on { color: var(--gold-light); border-style: solid; border-color: var(--gold); background: rgba(189,169,122,.14); font-weight: 700; }

/* ===== 무료 결과 · 선생님 상담 연출 (saju-talk.js, 2026-10-05) ===== */
.talk-open, .talk-close { position: relative; overflow: hidden; margin: 0 0 6px; min-height: 92vh; min-height: 92svh; display: flex; flex-direction: column; justify-content: flex-end; background: var(--navy-900); }
.talk-close { min-height: 78vh; min-height: 78svh; margin-top: 10px; border-radius: 24px 24px 0 0; }
.talk-open .bg, .talk-close .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 12%; transform: scale(1.06); transition: transform 9s ease-out; }
.talk-open.on .bg, .talk-close.on .bg { transform: scale(1); }
.talk-open .shade, .talk-close .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,16,34,.35) 0%, rgba(12,16,34,0) 22%, rgba(12,16,34,.25) 48%, rgba(12,16,34,.93) 72%, rgba(12,16,34,.99) 100%); }
.talk-open .tag { position: absolute; top: 14px; left: 16px; z-index: 3; }
.talk-open .lines, .talk-close .lines { position: relative; z-index: 2; padding: 0 22px 18px; }
.talk-open .tl, .talk-close .tl { font-family: var(--font-point); font-size: 1.32rem; line-height: 1.5; color: var(--cream); text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 3px 16px rgba(0,0,0,.8); margin: 0 0 12px; opacity: 0; transform: translateY(10px); transition: opacity .8s ease, transform .8s ease; transition-delay: calc(var(--i) * .9s + .3s); }
.talk-open .tl b, .talk-close .tl b { color: var(--gold-light); }
.talk-open.on .tl, .talk-close.on .tl { opacity: 1; transform: none; }
.talk-open .tl.ilju { display: flex; align-items: center; gap: 12px; font-family: var(--font); font-size: .95rem; color: var(--gold); margin-top: 4px; }
.talk-open .tl.ilju > span { font-family: 'Gowun Batang', serif; font-size: 2rem; color: var(--gold-light); line-height: 1; }   /* > : 안쪽 오행 타일(.hj-el)은 제 바탕·제 글자색을 지킨다(금·토 타일에 금빛 글자가 묻히던 문제, 2026-10-07) */
.talk-close .tl.strong { color: #fff3cf; font-size: 1.45rem; }
.talk-open .hint { position: relative; z-index: 2; text-align: center; color: var(--muted); font-size: .85rem; padding: 0 0 18px; opacity: 0; transition: opacity 1s ease 4s; }
.talk-open.on .hint { opacity: 1; }
.talk-open .hint i { display: block; font-style: normal; color: var(--gold-light); font-size: 1.4rem; line-height: 1; animation: talkDown 1.6s ease-in-out infinite; }
@keyframes talkDown { 0%, 100% { transform: translateY(0); opacity: .6 } 50% { transform: translateY(6px); opacity: 1 } }
/* 한마디(말풍선): 섹션 사이에 선생님이 끼어드는 말 */
.talk-line { display: flex; gap: 12px; align-items: flex-start; padding: 6px 16px 14px; max-width: var(--maxw); margin: 0 auto; opacity: 0; transform: translateY(12px); transition: opacity .7s ease, transform .7s ease; }
.talk-line.on { opacity: 1; transform: none; }
.talk-line .face { width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--gold); object-fit: cover; object-position: center 15%; flex: none; box-shadow: 0 0 0 4px rgba(189,169,122,.14); }
.talk-line .bb { position: relative; flex: 1; background: rgba(28,24,48,.92); border: 1px solid rgba(232,214,160,.35); border-radius: 4px 18px 18px 18px; padding: 12px 15px; color: var(--cream); font-size: 1.02rem; line-height: 1.65; }
.talk-line .bb::before { content: ''; position: absolute; left: -7px; top: 14px; border: 7px solid transparent; border-right-color: rgba(232,214,160,.35); border-left: 0; }
.talk-line .who { font-family: var(--font-point); font-size: .8rem; color: var(--gold-light); margin-bottom: 4px; }
.talk-line .tx b { color: var(--gold-light); }
.talk-line.sad .bb { border-color: rgba(255,159,147,.45); background: rgba(44,24,36,.92); }
.talk-line.sad .who::after { content: ' · 마음이 쓰입니다'; color: #ff9f93; font-family: var(--font); font-weight: 500; }
.talk-line + .section { padding-top: 4px; }

/* 하단 탭 빨간 점(오늘 운세 안 봄) · 만세력 사주표 아래 버튼 (2026-10-06) */
.bottom-nav a { position: relative; }
.bottom-nav a.dot::after { content: ''; position: absolute; top: 7px; left: calc(50% + 9px); width: 8px; height: 8px; border-radius: 50%; background: #ff6b6b; box-shadow: 0 0 0 2px rgba(12,16,34,.96); }
.ms-acts { display: grid; gap: 8px; margin-top: 12px; }
.daily-quick { margin: 14px 18px 0; }
.daily-quick .today { text-align: center; padding: 16px 14px; border-radius: var(--radius-lg); background: rgba(46,51,96,.45); border: 1px solid rgba(189,169,122,.3); }
.daily-quick .today .hj { font-family: 'Gowun Batang', serif; font-size: 2.2rem; color: var(--gold-light); line-height: 1.1; }
.daily-quick .today .d { color: var(--muted); font-size: .92rem; margin-top: 4px; }
.daily-quick .today p { margin: 10px 0 0; color: #e9e6f5; font-size: 1.02rem; line-height: 1.7; }
.daily-quick .form { margin-top: 12px; }
.daily-quick .form label { display: block; color: var(--muted); font-size: .85rem; margin: 10px 0 4px; }
.daily-quick .seg { display: flex; gap: 6px; }
.daily-quick .seg button { flex: 1; min-height: 44px; border-radius: 12px; border: 1px solid rgba(189,169,122,.4); background: rgba(46,51,96,.5); color: var(--cream); font-size: 1rem; }
.daily-quick .seg button.on { background: var(--grad-gold); color: var(--navy-900); border-color: transparent; font-weight: 700; }
.daily-quick .err { color: #ff9f93; font-size: .9rem; min-height: 1.2em; margin-top: 6px; }

/* 홈 정밀 계산 배너 (2026-10-07) */
.prec-banner { display: block; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.45); border: 1px solid rgba(189,169,122,.35); }
.prec-banner img { display: block; width: 100%; height: auto; }

/* 정밀 배너: 특가 띠와 같은 폭(띠 margin 12px / ≤420px 10px) */
.prec-wrap { padding: 8px 12px 4px; }
@media (max-width: 420px) { .prec-wrap { padding: 8px 10px 4px; } }
.hcard .hc-prec { display: block; font-size: .82rem; color: var(--gold-light); opacity: .95; margin: -4px 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gcard .gprec { display: block; font-size: .74rem; color: var(--gold); margin: 2px 0 4px; line-height: 1.3; }

/* 고객센터 문의 보내기 (my.html #support · 2026-10-10) */
#support [hidden] { display: none !important; }   /* .btn 의 display 가 hidden 속성을 덮지 않게 */
.inq-box { margin-top: 18px; padding-top: 16px; border-top: 1px dashed rgba(189,169,122,.3); }
.inq-lead { margin: 0 0 4px; color: var(--muted); font-size: .95rem; line-height: 1.55; }
.inq-box textarea.input { min-height: 150px; resize: vertical; line-height: 1.6; padding-top: 14px; font-size: 1.05rem; }
.inq-domains { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.inq-domains button { min-height: 38px; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(189,169,122,.45); background: rgba(46,51,96,.5); color: var(--cream); font-size: .86rem; letter-spacing: -.1px; }
.inq-domains button:active { background: var(--grad-gold); color: var(--navy-900); border-color: transparent; }
.inq-count { text-align: right; margin-top: 6px; }
.inq-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.inq-box .check { margin-top: 10px; }
.inq-terms { margin: 2px 0 0 34px; font-size: .84rem; color: var(--muted); line-height: 1.55; }
.inq-box .err { margin: 10px 0 12px; }
.inq-box .err a { white-space: nowrap; margin-left: 4px; }
.inq-done { margin-top: 18px; padding: 20px 12px 6px; border-top: 1px dashed rgba(189,169,122,.3); text-align: center; }
.inq-done .ok-ico { width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem; font-weight: 800; color: var(--navy-900); background: var(--grad-gold); box-shadow: 0 8px 24px rgba(189,169,122,.3); }
.inq-done > b { display: block; font-size: 1.15rem; color: var(--cream); }
.inq-done p { margin: 8px 0 0; line-height: 1.6; }
.inq-done .inq-to { color: var(--cream); }
.inq-done .inq-spam { font-size: .86rem; color: var(--muted); }
.inq-box .err .btn-text { padding: 0 2px; font-size: .95rem; }
.inq-done .btn-text { margin-top: 6px; }
/* 점성술 배너 (2026-10-12, 홈) */
.astro-banner { position: relative; display: block; border-radius: 22px; overflow: hidden; min-height: 236px; border: 1.5px solid rgba(201,182,255,.45); box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 0 0 6px rgba(123,108,246,.08); background: #0c1022; text-decoration: none; }
.astro-banner .sky { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% 30%; }
.astro-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,11,30,.88) 0%, rgba(8,11,30,.72) 40%, rgba(8,11,30,.25) 62%, rgba(8,11,30,0) 78%); }
.astro-banner .tx { position: relative; z-index: 2; padding: 18px 16px 16px; width: 62%; }
.astro-banner .cap { display: block; font-size: .7rem; letter-spacing: 2px; color: #c9b6ff; margin-bottom: 6px; }
.astro-banner h3 { font-family: var(--font-point); font-size: 1.35rem; line-height: 1.3; color: #fff6d6; margin: 0 0 6px; font-weight: 500; }
.astro-banner p { font-size: .86rem; color: #e4e1f2; line-height: 1.5; margin: 0 0 10px; } .astro-banner p b { color: #fff6d6; }
.astro-banner .pills { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; } .astro-banner .pills span { font-size: .72rem; color: #dfe6ff; border: 1px solid rgba(223,230,255,.35); border-radius: 999px; padding: 3px 8px; background: rgba(12,16,34,.5); }
.astro-banner .foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.astro-banner .cta { font-weight: 700; color: #141a3f; background: linear-gradient(135deg, #fff6d6, #dfe6ff 60%, #c9b6ff); border-radius: 999px; padding: 9px 14px; font-size: .9rem; white-space: nowrap; display: inline-block; }
.astro-banner .pr { font-size: .8rem; color: #9aa3cc; } .astro-banner .pr del { margin-right: 4px; } .astro-banner .pr b { color: #fff6d6; font-size: .95rem; }
/* 풀이 원칙 2열 카드 (2026-10-12, B안) */
.pb { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pb > div { border: 1px solid rgba(189,169,122,.28); border-radius: 14px; padding: 11px 12px; background: rgba(232,214,160,.05); }
.pb b { display: block; font-family: var(--font-point); color: var(--gold-light); font-size: 1rem; margin-bottom: 3px; }
.pb small { color: var(--muted); font-size: .84rem; line-height: 1.45; display: block; }
.pb .n { color: rgba(232,214,160,.5); font-size: .72rem; letter-spacing: 1px; }
/* 글자 크기 버튼: 작은 가 › 큰 가 (2026-10-12, A안) · 한 버튼으로 토글 */
.font-btn { font-family: var(--font-point); gap: 2px; padding: 0 12px; }
.font-btn .fs { font-size: .78rem; opacity: .75; } .font-btn .fa { font-size: .68rem; opacity: .7; margin: 0 1px; } .font-btn .fb { font-size: 1.22rem; font-weight: 700; line-height: 1; }
.font-btn.active { background: var(--grad-gold); color: var(--navy-900); border-color: transparent; }
/* 2027 신년운세 배너 (2026-10-12, 홈) */
.year-banner { position: relative; display: block; border-radius: 22px; overflow: hidden; min-height: 300px; border: 1.5px solid rgba(232,214,160,.6); box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 0 0 6px rgba(232,214,160,.06); background: #0a0e24; text-decoration: none; }
.year-banner .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 40%; }
.year-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,9,26,.84) 0%, rgba(6,9,26,.66) 40%, rgba(6,9,26,.18) 62%, rgba(6,9,26,0) 78%), linear-gradient(180deg, rgba(6,9,26,0) 55%, rgba(6,9,26,.7) 100%); }
.year-banner .tx { position: relative; z-index: 2; padding: 18px 16px 16px; width: 66%; }
.year-banner .cap { display: block; font-size: .7rem; letter-spacing: 2px; color: var(--gold); margin-bottom: 4px; }
.year-banner .big { display: flex; align-items: baseline; gap: 8px; }
.year-banner .yr { font-family: var(--font-point); font-size: 3.2rem; line-height: 1; color: #fff1c9; letter-spacing: -1px; text-shadow: 0 0 22px rgba(255,220,150,.45), 0 2px 10px rgba(0,0,0,.7); }
.year-banner .hj { font-family: 'Gowun Batang', var(--font-point), serif; font-size: 1.1rem; color: rgba(232,214,160,.85); letter-spacing: 2px; }
.year-banner .ttl { font-family: var(--font-point); font-size: 1.55rem; line-height: 1.2; color: var(--cream); margin: 2px 0 8px; text-shadow: 0 2px 10px rgba(0,0,0,.7); } .year-banner .ttl b { color: var(--gold-light); font-weight: 600; }
.year-banner .hook { font-size: .95rem; color: #efeafb; margin: 0 0 8px; line-height: 1.45; text-shadow: 0 1px 6px rgba(0,0,0,.7); } .year-banner .hook b { color: #fff1c9; }
.year-banner .qs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; } .year-banner .qs span { font-size: .74rem; color: var(--cream); border: 1px solid rgba(232,214,160,.5); border-radius: 999px; padding: 4px 9px; background: rgba(6,9,26,.55); }
.year-banner .cta { display: inline-block; background: var(--grad-gold); color: var(--navy-900); font-weight: 700; border-radius: 999px; padding: 10px 16px; font-size: .92rem; white-space: nowrap; }
.year-banner .tx { width: 64%; }
@media (max-width: 420px) { .year-banner .tx { width: 66%; } .year-banner .cta { font-size: .86rem; padding: 9px 13px; } }
/* 신년운세 무료 화면 v2 (2026-10-12) */
.yr-open { border: 1.5px solid rgba(232,214,160,.55); border-radius: 22px; padding: 18px 16px; background: radial-gradient(600px 300px at 20% 0%, rgba(140,60,50,.35), transparent 60%), linear-gradient(180deg, rgba(42,36,112,.4), rgba(12,16,34,.85)); box-shadow: 0 16px 40px rgba(0,0,0,.4); }
.yr-top { display: flex; align-items: center; gap: 12px; } .yr-sym { font-size: 2.4rem; line-height: 1; }
.yr-big { font-family: var(--font-point); font-size: 2.2rem; line-height: 1; color: #fff1c9; text-shadow: 0 0 18px rgba(255,220,150,.35); } .yr-big small { font-family: 'Gowun Batang', serif; font-size: 1rem; color: rgba(232,214,160,.85); letter-spacing: 2px; margin-left: 4px; }
.yr-name { color: var(--gold-light); font-size: .92rem; margin-top: 4px; letter-spacing: .5px; }
.yr-kw { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 10px; } .yr-kw span { font-size: .8rem; color: #fff1c9; border: 1px solid rgba(232,214,160,.5); border-radius: 999px; padding: 4px 10px; background: rgba(140,60,50,.18); }
.yr-lead { color: var(--cream); font-size: 1rem; line-height: 1.7; margin: 0 0 12px; } .yr-lead b { color: var(--gold-light); }
.yr-lines > div { display: grid; grid-template-columns: 76px 1fr; gap: 10px; padding: 9px 0; border-top: 1px dashed rgba(232,214,160,.22); font-size: .92rem; line-height: 1.55; color: #d9d6ea; } .yr-lines b { font-family: var(--font-point); color: var(--gold-light); font-weight: 500; font-size: 1rem; } .yr-lines span b { color: var(--cream); font-family: inherit; font-size: inherit; }
.yr-world { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; } .yr-world span { font-size: .82rem; color: var(--muted); line-height: 1.5; }
.yr-cap { font-size: .7rem; letter-spacing: 2px; color: var(--gold); margin-bottom: 6px; }
.yr-touch { border: 1px solid rgba(189,169,122,.35); border-radius: 20px; padding: 16px; background: var(--grad-card); }
.yr-touch h3 { font-family: var(--font-point); font-size: 1.3rem; line-height: 1.35; color: var(--cream); margin: 0 0 10px; font-weight: 500; } .yr-touch h3 b { color: var(--gold-light); font-weight: 600; }
.yr-touch ul { list-style: none; margin: 0; padding: 0; } .yr-touch li { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px dashed rgba(189,169,122,.2); font-size: .93rem; line-height: 1.55; color: #d9d6ea; } .yr-touch li i { font-style: normal; flex: none; min-width: 58px; color: var(--gold-light); font-family: var(--font-point); } .yr-touch li b { color: var(--cream); }
.yr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .yr-chips span { font-size: .76rem; color: var(--cream); border: 1px solid rgba(189,169,122,.35); border-radius: 999px; padding: 4px 9px; background: rgba(12,16,34,.5); } .yr-chips b { color: var(--gold-light); }
.yr-three { margin: 10px 0 0; color: var(--muted); font-size: .9rem; } .yr-three b { color: var(--gold-light); }
.yr-months { border: 1px solid rgba(189,169,122,.35); border-radius: 20px; padding: 16px; background: var(--grad-card); } .yr-months p { margin: 10px 0 0; color: #d9d6ea; font-size: .92rem; line-height: 1.6; }
.tp-cal-i.pre { opacity: .7; } .tp-cal-i.pre small { color: var(--gold); }
.yr-seals { border: 1.5px solid rgba(232,214,160,.5); border-radius: 20px; padding: 16px; background: linear-gradient(180deg, rgba(123,108,246,.16), rgba(12,16,34,.7)); }
.yr-seal { display: flex; gap: 12px; padding: 10px 0; border-top: 1px dashed rgba(232,214,160,.25); } .yr-seal > b { flex: none; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #8a2d3a, #4d1620); color: #f3d6a6; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-point); font-size: .9rem; box-shadow: 0 3px 8px rgba(0,0,0,.5); }
.yr-seal h4 { margin: 2px 0 4px; font-size: 1rem; color: var(--cream); } .yr-seal p { margin: 0; color: #d9d6ea; font-size: .9rem; line-height: 1.55; } .yr-seal p b { color: var(--gold-light); }
.yr-keep { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(232,214,160,.3); color: var(--muted); font-size: .84rem; line-height: 1.5; }