/* 홈(서재) · 입력 3단계 · 상담 신청 · 궁합 고르기 · 설정 시트 · 확인 창 */

/* 시트(설정·확인) */
.sheet { position:fixed; inset:0; z-index:90; display:flex; align-items:flex-end; justify-content:center; }
.sheet-bg { position:absolute; inset:0; background:rgba(40,30,20,.45); }
.sheet-box { position:relative; width:min(100%,520px); max-height:80vh; overflow:auto; padding:16px 16px calc(18px + env(safe-area-inset-bottom)); border-radius:24px 24px 0 0 !important; }
.sheet-box h3 { margin:0 0 10px; font:700 24px var(--hand, sans-serif); }
.sheet-box .acts { display:flex; gap:8px; margin-top:12px; }
.sheet .acts.col { display:flex; flex-direction:column; gap:8px; }
.btn.danger { color:#b4412a; border-color:#d9a79b; }
#ask p { margin:0 0 4px; font-size:14px; line-height:1.55; }
#ask .acts .btn { flex:1; }
.srow { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); font:500 14.5px var(--sans); }
.srow:last-child { border-bottom:0; }
.sgrp { margin:14px 2px 4px; font:600 11.5px var(--sans); letter-spacing:.06em; color:var(--mute); }

/* 앱바 */
.gear { border:0; background:transparent; color:var(--ink); width:42px; height:42px; border-radius:50%; display:inline-grid; place-items:center; cursor:pointer; opacity:.75; }
.gear:active { opacity:1; background:var(--tint); }
.back { display:inline-block; margin:2px 20px 0; padding:6px 0; border:0; background:transparent; font:500 13.5px var(--sans); color:var(--mute); cursor:pointer; }

/* 진행 막대 */
.pbar { height:8px; background:var(--line); border-radius:99px; overflow:hidden; margin:6px 0 0; }
.pbar i { display:block; height:100%; background:var(--terra); border-radius:99px; transition:width .4s; }

/* 비어 있는 첫 화면 */
.empty { text-align:center; padding:12vh 28px 0; }
.empty h1 { margin:0 0 12px; font:700 28px/1.35 var(--serif, serif); }
.empty p { margin:0 0 26px; color:var(--mute); font:400 14.5px/1.7 var(--sans); }
.empty .btn { padding:14px 30px; font-size:16px; }
.empty p b { color:var(--ink); font-weight:700; }
.empty .topics { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:0 0 26px; }
.empty .topics i { font:600 12.5px var(--sans); font-style:normal; padding:5px 12px; border-radius:99px; background:var(--tint); color:var(--terra-d, var(--terra)); }
.empty .lnk2 { display:block; margin:16px auto 0; border:0; background:transparent; color:var(--terra-d, var(--terra)); font:700 14px var(--sans); cursor:pointer; padding:6px 10px; }
.empty .foot2 { margin-top:22px; font:400 12px/1.6 var(--sans); color:var(--mute); }

/* 홈(서재): 사람 카드와 궁합 카드 */
.sec { display:flex; justify-content:space-between; align-items:baseline; padding:14px 20px 4px; }
.sec b { font:700 13px var(--sans); letter-spacing:.04em; color:var(--mute); }
.pcard { margin:8px 20px 0; padding:14px; display:grid; grid-template-columns:38px 1fr; gap:10px 12px; align-items:center; }
.pav { flex:none; width:38px; height:38px; border-radius:50%; border:1.8px solid var(--ink); background:var(--card); display:grid; place-items:center; font:900 17px var(--serif, serif); }
.pcard .pi { flex:1; min-width:0; }
.pcard .pi b { display:block; font:700 17px var(--sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pcard .pi small { display:block; color:var(--mute); font:400 12px/1.5 var(--sans); }
.pcard .pa { grid-column:1 / -1; display:flex; gap:6px; align-items:center; }
.pcard .pa .btn { flex:1; padding:11px 14px; font-size:15px; white-space:nowrap; }
.pcard .more { border:0; background:transparent; color:var(--mute); font-size:20px; padding:4px 6px; cursor:pointer; }
.pcard .pbar { margin-top:6px; }
.dash { display:block; width:calc(100% - 40px); margin:10px 20px 0; border:1.5px dashed var(--line2, var(--line)); background:transparent; border-radius:14px; padding:13px; text-align:center; font:600 13.5px var(--sans); color:var(--mute); cursor:pointer; }

/* 입력 3단계 */
.dots { display:flex; gap:6px; justify-content:center; padding:8px 20px 4px; }
.dots i { width:34px; height:4px; border-radius:99px; background:var(--line2); }
.dots i.on { background:var(--terra); }
.step { margin:10px 20px 0; padding:18px; }
.step h2 { margin:2px 0 4px; font:700 24px/1.3 var(--serif, serif); }
.step .sub { margin:0 0 14px; color:var(--mute); font:400 13.5px/1.6 var(--sans); }
.step .field { margin:0 0 14px; }
.step .field > label, .step .field > .lab { display:block; margin-bottom:5px; font:600 13px var(--sans); color:var(--mute); }
.step input[type=text], .step input[type=search], .step input[type=date], .step input[type=time] { width:100%; min-height:48px; }
.step .row2 { margin-bottom:6px; }
.step .acts { display:flex; gap:8px; margin-top:16px; }
.step .acts .btn { flex:1; padding:13px 8px; font-size:15px; }
.hint { display:block; margin-top:5px; font:400 12.5px var(--sans); color:var(--mute); }
.step .seg label { white-space:nowrap; padding:12px 4px; }
.err { min-height:1.2em; margin:8px 0 0; color:var(--terra-d, #a05434); font:500 13px var(--sans); }
.privacy { margin:12px 22px 0; color:var(--mute); font:400 12px/1.6 var(--sans); text-align:center; }

/* 상담 신청(구매 전): 질문으로 시작한다 */
.hook { padding:8px 22px 0; }
.hook small { display:block; color:var(--mute); font:500 12px var(--sans); letter-spacing:.04em; }
.hook h1 { margin:6px 0 8px; font:700 27px/1.38 var(--serif, serif); white-space:pre-line; word-break:keep-all; }
.hook p { margin:0 0 14px; color:var(--mute); font:400 13.5px/1.65 var(--sans); }
.qlist { margin:0 20px; padding:2px 14px; }
.qlist div { display:flex; gap:9px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--line); font:600 14.5px/1.45 var(--sans); }
.qlist div:last-child { border-bottom:0; color:var(--terra-d, var(--terra)); }
.qlist i { font-style:normal; flex:none; width:22px; height:22px; margin-top:-1px; border-radius:50%; display:grid; place-items:center; background:var(--c, var(--terra)); color:#fff; font:700 12px var(--serif, serif); }
.qlist u { margin-left:auto; text-decoration:none; font-size:12px; opacity:.6; }
.trust { margin:12px 24px 0; text-align:center; color:var(--mute); font:400 12.5px/1.6 var(--sans); }
.trust .lnk { border:0; background:transparent; padding:0; font:700 12.5px var(--sans); color:var(--terra-d, var(--terra)); cursor:pointer; }
.buybar { position:sticky; bottom:0; margin-top:16px; padding:12px 20px calc(14px + env(safe-area-inset-bottom)); background:linear-gradient(transparent, var(--paper) 28%); }
.buybar .btn { width:100%; padding:14px 8px; font-size:16px; }
.buybar small { display:block; margin-top:7px; text-align:center; color:var(--mute); font:400 12px var(--sans); }

/* 궁합 고르기 */
.picklist { margin:8px 20px 0; }
.pickrow { display:flex; align-items:center; gap:12px; width:100%; padding:11px 14px; margin-bottom:8px; text-align:left; background:var(--card); border:1.5px solid var(--line2); border-radius:14px; cursor:pointer; font:inherit; color:inherit; }
.pickrow.on { border-color:var(--terra); background:var(--tint); }
.pickrow[disabled] { opacity:.55; cursor:default; }
.pickrow .pi { flex:1; min-width:0; } .pickrow .pi b { display:block; font:700 15px var(--sans); } .pickrow .pi small { color:var(--mute); font:400 12px var(--sans); }
.pickrow .ck { width:22px; height:22px; border-radius:50%; border:1.8px solid var(--line2); display:grid; place-items:center; font-size:13px; color:#fff; }
.pickrow.on .ck { background:var(--terra); border-color:var(--terra); }
.pairhd { display:flex; align-items:center; justify-content:center; gap:10px; margin:12px 20px 0; font:700 16px var(--sans); }
.pairhd span.slot { min-width:84px; text-align:center; padding:8px 12px; border-radius:99px; border:1.5px dashed var(--line2); color:var(--mute); font-weight:600; }
.pairhd span.slot.f { border-style:solid; border-color:var(--terra); color:var(--ink); background:var(--tint); }
.relrow { margin:10px 20px 0; }

/* 위쪽 탭(내 사주 | 궁합): 처음부터 보여서, 궁합이 따로 있다는 것을 사주를 하나 입력하기 전부터 알 수 있다 */
/* 상단 탭: 큰 제목형. 탭이 곧 화면 제목이다 */
.toptabs { display:flex; align-items:baseline; gap:14px; margin:12px 22px 2px; padding:0; }
.toptabs[hidden] { display:none; }
html[data-skin="zen"] .toptabs .tab { flex:none; display:inline-flex; flex-direction:row; flex-wrap:nowrap; align-items:baseline; white-space:nowrap; gap:7px; position:relative; min-height:44px; padding:6px 0 12px; border:0; border-radius:0; background:none; box-shadow:none; color:#c4bdae; font:900 26px/1.15 var(--serif, serif); letter-spacing:-.01em; cursor:pointer; }
html[data-skin="zen"] .toptabs .tab.on { color:var(--ink); }
html[data-skin="zen"] .toptabs .tab.on::after { content:""; position:absolute; left:0; bottom:4px; width:22px; height:3px; border-radius:3px; background:var(--terra); }
.toptabs .sepx { font:400 20px var(--serif, serif); color:#c4bdae; }
.toptabs .tab i { font-style:normal; align-self:center; min-width:18px; padding:1px 6px; border-radius:99px; background:var(--terra); color:#fff; font:700 11px/1.5 var(--sans); }
.toptabs .tab i[hidden] { display:none; }
.toptabs .newdot { align-self:center; width:7px; height:7px; border-radius:50%; background:var(--fire); animation:breathe 1.6s ease-in-out infinite; }
.toptabs .newdot[hidden] { display:none; }
html[data-mode="dark"][data-skin="zen"] .toptabs .tab, html[data-mode="dark"] .toptabs .sepx { color:var(--mute); }
html[data-mode="dark"][data-skin="zen"] .toptabs .tab.on { color:var(--ink); }
@media (prefers-reduced-motion: reduce) { .toptabs .newdot { animation:none; } }
/* 궁합 탭의 안내 카드 */
.hintcard { display:flex; flex-direction:column; gap:6px; margin:12px 20px 0; padding:16px; background:linear-gradient(180deg,var(--tint),var(--card)); }
.hintcard[hidden] { display:none; }
.hintcard b { font:700 17px/1.4 var(--serif, serif); word-break:keep-all; }
.hintcard span { word-break:keep-all; }
.hintcard span { color:var(--mute); font:400 13.5px/1.65 var(--sans); }
.hintcard .btn { margin-top:8px; width:100%; padding:12px 8px; }
.hintcard.wait { background:var(--card); }

/* 오색(목화토금수): 기운을 뜻하는 곳에만 쓴다 — 진행 띠, 일간 아바타, 구매 질문. 색만으로 말하지 않고 한자를 같이 둔다. */
:root { --earth-d:#8a6a1c; --metal-d:#5f645d; --wood-d:#4d6b53; --fire-d:#9a4425; --water-d:#4f7088; }
.e-w { --c:var(--wood);  --ct:var(--wood-t);  --cd:var(--wood-d); }  .e-f { --c:var(--fire);  --ct:var(--fire-t);  --cd:var(--fire-d); }
.e-e { --c:var(--earth); --ct:var(--earth-t); --cd:var(--earth-d); } .e-m { --c:var(--metal); --ct:var(--metal-t); --cd:var(--metal-d); }
.e-s { --c:var(--water); --ct:var(--water-t); --cd:var(--water-d); }
html[data-skin="zen"] .pav.el, .pav.el { border:1.5px solid var(--c); background:var(--ct); color:var(--cd); }
.pcard .tz { grid-column:1 / -1; margin:-2px 0 0; padding:8px 11px; border-radius:12px; background:var(--ct); font:400 13px/1.45 var(--sans); color:var(--ink); }
.pcard .tz b { font:700 14px var(--serif, serif); color:var(--cd); margin-right:6px; }
.five { display:grid; grid-template-columns:repeat(5, 1fr); gap:4px; }
.five i { --c:var(--wood); position:relative; display:block; height:8px; border-radius:99px; background:color-mix(in srgb, var(--c) 18%, #fff); }
.five i.f { --c:var(--fire); } .five i.e { --c:var(--earth); } .five i.m { --c:var(--metal); } .five i.s { --c:var(--water); }
.five i::before { content:""; position:absolute; inset:0 auto 0 0; border-radius:99px; background:var(--c); width:clamp(0%, calc((var(--n, 0) - var(--k) * 20) * 5%), 100%); transition:width .8s cubic-bezier(.2,.8,.2,1); }
.five i.cur::after { content:""; position:absolute; top:50%; left:clamp(0%, calc((var(--n, 0) - var(--k) * 20) * 5%), 100%); width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border-radius:50%; background:var(--c); box-shadow:0 0 0 2.5px #fff; animation:breathe 1.6s ease-in-out infinite; }
html[data-mode="dark"] .five i { background:color-mix(in srgb, var(--c) 28%, transparent); } html[data-mode="dark"] .five i.cur::after { box-shadow:0 0 0 2.5px var(--card, #27241f); }
@keyframes breathe { 0%, 100% { transform:scale(.7); opacity:.6; } 50% { transform:scale(1.15); opacity:1; } }
/* 홈 카드의 진행 줄: 버튼이 아니라 카드 안의 진행 표시. 누르면 진행 화면으로 간다 */
.pcard .run { flex:1; display:block; border:0; background:transparent; padding:10px 0 2px; text-align:left; cursor:pointer; color:var(--ink); }
.pcard .run .rl { display:block; margin-top:7px; font:700 14px var(--sans); }
.big.five i { height:14px; } .big.five i.cur::after { width:18px; height:18px; margin:-9px 0 0 -9px; }
.hz { display:grid; grid-template-columns:repeat(5, 1fr); gap:4px; margin-top:6px; text-align:center; font:600 13px var(--serif, serif); color:var(--mute); } .hz .on { color:var(--ink); }
@media (prefers-reduced-motion: reduce) { .five i.cur::after { animation:none; } }
html[data-mode="dark"] .pav.el, html[data-mode="dark"] .pcard .tz b { color:var(--c); }

/* 추가하기 박스: 목록 맨 위에 둔다(맨 아래까지 내려가지 않아도 되도록) */
.dash.addbox { display:flex; align-items:center; gap:12px; margin:10px 20px 4px; padding:12px 14px; text-align:left; border:1.5px dashed var(--terra); border-radius:18px; background:var(--tint); color:var(--terra-d, var(--terra)); width:calc(100% - 40px); }
.dash.addbox[hidden] { display:none; }
.dash.addbox::before { content:"+"; flex:none; width:38px; height:38px; border-radius:50%; background:var(--terra); color:#fff; display:grid; place-items:center; font:500 24px/1 var(--sans); padding-bottom:2px; }
.dash.addbox b { display:block; font:700 16px var(--sans); }
.dash.addbox small { display:block; margin-top:1px; font:400 12px/1.4 var(--sans); color:var(--mute); }

/* ── 3D 양장본 운명의 책 & 온보딩 비주얼 ── */
.empty-badge { display:inline-flex; align-items:center; gap:6px; font:600 12px var(--sans); background:color-mix(in srgb, var(--terra) 12%, transparent); color:var(--terra-d, var(--terra)); padding:4px 12px; border-radius:99px; margin-bottom:12px; border:1px solid color-mix(in srgb, var(--terra) 22%, transparent); }
.empty-badge-dot { width:6px; height:6px; border-radius:50%; background:var(--terra); }
.empty .highlight { color:var(--sp-red, #c4593c); font-weight:900; }
.book-container { position:relative; width:195px; height:260px; margin:22px auto 26px; border-radius:4px 14px 14px 4px; background:linear-gradient(135deg, #24354a 0%, #1a2838 100%); color:#f7f3ea; box-shadow:-4px 0 10px rgba(0,0,0,.08), 8px 14px 28px rgba(43,41,38,.22), inset 3px 0 6px rgba(255,255,255,.18); cursor:pointer; transition:transform .25s ease, box-shadow .25s ease; user-select:none; }
.book-container:hover { transform:scale(1.03) translateY(-4px); box-shadow:-4px 0 12px rgba(0,0,0,.1), 10px 18px 34px rgba(43,41,38,.26); }
.book-container:active { transform:scale(.98); }
.book-spine { position:absolute; left:0; top:0; bottom:0; width:14px; background:#141f2b; box-shadow:inset -2px 0 5px rgba(0,0,0,.35); border-radius:4px 0 0 4px; }
.book-spine::after { content:""; position:absolute; left:14px; top:0; bottom:0; width:1px; background:rgba(255,255,255,.1); }
.book-inner { padding:22px 18px 18px 26px; height:100%; display:flex; flex-direction:column; text-align:left; box-sizing:border-box; }
.book-meta { display:block; font:600 9.5px var(--sans); letter-spacing:.22em; text-transform:uppercase; color:#d6b070; }
.book-title { margin-top:20px; font:900 24px/1.22 var(--serif); color:#f3e5ca; letter-spacing:-.03em; }
.book-sub { display:block; font:400 11px var(--serif); color:#a0b1c5; margin-top:4px; }
.book-foot { margin-top:auto; padding-top:14px; border-top:1px solid rgba(255,255,255,.14); display:flex; justify-content:space-between; align-items:flex-end; }
.book-owner { font:700 12px var(--serif); color:#fff; }
.book-seal { width:28px; height:28px; border-radius:4px; border:1px solid #c4593c; background:color-mix(in srgb, #c4593c 18%, transparent); color:#f0705f; display:grid; place-items:center; font:900 11px/1 var(--serif); }
.book-touch-hint { position:absolute; left:0; right:0; bottom:-24px; text-align:center; font:500 12px var(--sans); color:var(--mute); pointer-events:none; }
html[data-mode="dark"] .book-container { background:linear-gradient(135deg, #2b3a4e 0%, #17212d 100%); box-shadow:0 12px 30px rgba(0,0,0,.45); }

/* ── 서재 카드 고도화 (전각 도장 뱃지 & 오행 액센트) ── */
.pcard .pav { border-radius:12px; font-family:var(--serif); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.pcard .pav-stem { font:900 17px/1 var(--serif); }
.pcard .pav-sub { font:700 8.5px/1 var(--sans); margin-top:1px; opacity:.85; }
.pcard .pi-title { display:flex; align-items:center; gap:6px; }
.pcard .book-badge { display:inline-block; font:600 10.5px/1.4 var(--sans); padding:1px 6px; border-radius:4px; background:color-mix(in srgb, var(--terra) 14%, #fff); color:var(--terra-d, var(--terra)); border:1px solid color-mix(in srgb, var(--terra) 24%, transparent); }
.pcard .ic-book { display:inline-block; vertical-align:-2px; margin-right:4px; opacity:.9; }

/* ── 구매 전 11장 목차 & 블러 티저 ── */
.toc-card { margin-top:14px; padding:16px 18px; }
.toc-hd { display:flex; justify-content:space-between; align-items:center; padding-bottom:10px; border-bottom:1px solid var(--line); font:700 12px var(--sans); color:var(--mute); letter-spacing:.04em; }
.toc-vol { font-size:11px; color:var(--terra-d, var(--terra)); }
.toc-list { display:flex; flex-direction:column; }
.toc-item { display:flex; align-items:flex-start; gap:10px; padding:11px 0; border-bottom:1px dashed var(--line); font:500 13px var(--sans); }
.toc-num { flex:none; width:22px; font:900 14px var(--serif); color:var(--mute); }
.toc-item.open .toc-num { color:var(--terra); }
.toc-info { flex:1; min-width:0; }
.toc-info b { display:block; font:700 14px/1.35 var(--sans); color:var(--ink); }
.toc-info small { display:block; font:400 11.5px var(--sans); color:var(--mute); margin-top:2px; }
.toc-tag { font:700 10.5px var(--sans); color:var(--wood); background:var(--wood-t); padding:2px 7px; border-radius:4px; }
.toc-more { text-align:center; padding:12px 0 4px; font:500 12px var(--sans); color:var(--mute); }

/* 블러 티저 박스 */
.toc-blur-box { position:relative; margin-top:5px; padding:8px 10px; background:color-mix(in srgb, var(--line) 30%, transparent); border-radius:8px; overflow:hidden; }
.toc-blur-txt { display:block; font:400 11.5px/1.55 var(--serif); color:var(--ink); filter:blur(2.2px); opacity:.7; user-select:none; }
.toc-blur-lock { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:700 10.5px var(--sans); color:var(--ink); background:color-mix(in srgb, var(--card) 60%, transparent); backdrop-filter:blur(1px); }

/* 안심 소장 배지 그리드 */
.trust-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin:14px 20px 0; text-align:center; }
.trust-item { padding:10px 4px; border-radius:12px; background:var(--card); border:1px solid var(--line); }
.trust-item i { display:block; font-style:normal; font-size:16px; margin-bottom:2px; }
.trust-item b { display:block; font:700 11.5px var(--sans); color:var(--ink); }
.trust-item small { display:block; font:400 10px var(--sans); color:var(--mute); margin-top:1px; }

/* ── 진행 화면 오행 순환 궤도 연출 ── */
.book-craft { padding:24px 20px; }
.orbit-wrap { position:relative; width:150px; height:150px; margin:0 auto 10px; display:flex; align-items:center; justify-content:center; }
.orbit-ring { position:absolute; inset:0; border-radius:50%; border:1.6px dashed var(--line2); animation:orbitSpin 24s linear infinite; }
.orbit-arc { position:absolute; inset:0; width:100%; height:100%; }
.orbit-arc .trk { fill:none; stroke:transparent; }
.orbit-arc .arc { fill:none; stroke:var(--terra); stroke-width:3.2; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:calc(100 - var(--n, 0)); transition:stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1); }
.orbit-node { position:absolute; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%; display:grid; place-items:center; font:900 11px var(--serif); color:#fff; opacity:.3; transition:opacity .4s; }
.orbit-node.on { opacity:1; } .orbit-node.cur { opacity:1; animation:breathe 1.6s ease-in-out infinite; }
.orbit-node.node-w { left:50%; top:0; background:var(--wood); }
.orbit-node.node-f { left:97.5%; top:36%; background:var(--fire); }
.orbit-node.node-e { left:79.5%; top:90%; background:var(--earth); }
.orbit-node.node-m { left:20.5%; top:90%; background:var(--metal); }
.orbit-node.node-s { left:2.5%; top:36%; background:var(--water); }
.orbit-wrap .pct { position:relative; text-align:center; line-height:1; } .orbit-wrap .pct em { display:block; margin-top:5px; font:400 11px var(--sans); font-style:normal; color:var(--mute); }
.prog .pnote { margin:2px 0 0; font:400 13.5px/1.5 var(--sans); color:var(--mute); }
@keyframes orbitSpin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .orbit-ring, .orbit-node.cur { animation:none; } }


.pcard .pa .btn.pdf { flex:0 0 auto; padding:11px 16px; }
.toc-skel { display:grid; gap:5px; margin-top:6px; }
.toc-skel i { display:block; height:7px; border-radius:99px; background:color-mix(in srgb, var(--line) 80%, transparent); }
.toc-skel i:nth-child(2) { width:82%; } .toc-skel i:nth-child(3) { width:55%; }
.toc-tag.lnkx { border:0; cursor:pointer; font:700 10.5px var(--sans); }
.toc-lock { display:inline-block; margin-top:6px; font:700 10.5px var(--sans); color:var(--mute); }

/* ══ 쇼케이스(showcase.html)와 같은 모양 ══════════════════════════════════════════════════════════════
   종이 질감 배경 · 큰 제목 탭 · 서재 카드(오행 띠, 일간 도장) · 책 표지 · 차례 · 오행 궤도. 이 아래 규칙이 위의 같은 이름 규칙을 덮는다. */
html[data-skin="zen"] body { background-image:radial-gradient(rgba(133,126,112,.12) 1px, transparent 1px); background-size:14px 14px; }
html[data-skin="zen"][data-mode="dark"] body { background-image:radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* 탭: "내 사주"는 크게 + 밑줄, "궁합 1"은 작고 연하게 */
html[data-skin="zen"] .toptabs { align-items:baseline; gap:12px; margin:12px 22px 4px; }
html[data-skin="zen"] .toptabs .sepx { display:none; }
html[data-skin="zen"] .toptabs .tab { min-height:36px; padding:2px 0 3px; color:var(--mute); font:700 22px/1.3 var(--serif, serif); letter-spacing:0; }
html[data-skin="zen"] .toptabs .tab.on { color:var(--ink); font:900 22px/1.3 var(--serif, serif); border-bottom:2px solid var(--terra); }
html[data-skin="zen"] .toptabs .tab.on::after { display:none; }
html[data-skin="zen"] .toptabs .tab i { min-width:0; padding:0; background:none; color:inherit; font:inherit; align-self:auto; }
html[data-skin="zen"] .sec { padding:6px 22px 8px; } html[data-skin="zen"] .sec b { font:700 10px var(--sans); letter-spacing:.1em; color:#a8a29e; }

/* 추가하기 박스 */
.dash.addbox, .dash.addbox[hidden] { all:unset; }
.dash.addbox[hidden] { display:none; }
.dash.addbox { display:block; box-sizing:border-box; margin:0 16px 12px; width:calc(100% - 32px); padding:10px; border:1px dashed var(--line2); border-radius:12px; text-align:center; color:var(--mute); font:700 11.5px/1.4 var(--sans); cursor:pointer; }
.dash.addbox::before { display:none; }

/* 서재 카드 */
html[data-skin="zen"] .pcard { display:block; position:relative; overflow:hidden; margin:0 16px 12px; padding:14px 14px 14px 18px; background:var(--field); border:1px solid var(--line); border-radius:12px; box-shadow:0 1px 1px rgba(0,0,0,.03); }
.pcard .eb { display:none; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--c); }
.pcard[class*=" e-"] .eb { display:block; }
.pcard .pr1 { display:flex; align-items:flex-start; gap:10px; }
.pcard .tile { flex:none; width:42px; height:42px; border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--ct, #efe9db); color:var(--cd, var(--ink)); border:1px solid color-mix(in srgb, var(--c, var(--line2)) 35%, transparent); }
.pcard .tile b { font:900 17px/1 var(--serif, serif); } .pcard .tile small { margin-top:2px; font:700 8px/1 var(--sans); }
.pcard .tile.plain { background:var(--card); } .pcard .tile.plain b { font-size:16px; }
.pcard .pi { flex:1; min-width:0; } .pcard .pi-title { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pcard .pi-title b { font:700 15px var(--serif, serif); white-space:normal; overflow:visible; }
.pcard .bdg { font:500 9.5px/1.5 var(--sans); padding:0 6px; border-radius:4px; }
.pcard .bdg.ok { background:#ecfdf5; color:#047857; border:1px solid #a7f3d0; } .pcard .bdg.run { background:#fffbeb; color:#b45309; animation:breathe 1.8s ease-in-out infinite; }
html[data-mode="dark"] .pcard .bdg.ok { background:#12332a; color:#6ee7b7; border-color:#1f5a47; } html[data-mode="dark"] .pcard .bdg.run { background:#3a2f12; color:#fbbf24; }
.pcard .bt { margin:1px 0 0; font:400 11px/1.5 var(--sans); color:var(--mute); }
.pcard .eta { flex:none; font:400 11px var(--sans); color:var(--terra-d, var(--terra)); } .pcard .more { align-self:flex-start; }
.pcard .quote { margin:10px 0 0; padding:8px 10px; border-radius:6px; background:color-mix(in srgb, var(--line) 25%, transparent); border:1px solid var(--line); font:400 11.5px/1.5 var(--sans); color:var(--ink); }
.pcard .pa { margin:10px 0 0; gap:8px; }
.pcard .pa .btn { flex:1; padding:9px 10px; font-size:12px; border-radius:8px; } .pcard .pa .btn.pdf { flex:0 0 auto; padding:9px 14px; }
.pcard .run { display:block; width:100%; padding:10px 0 0; } .pcard .five { height:auto; }
.pcard .five i { height:6px; } .pcard .tz { display:none; }

/* 첫 화면 */
html[data-skin="zen"] #v-empty { display:flex; flex-direction:column; align-items:center; justify-content:space-between; text-align:center; min-height:calc(100svh - 128px); padding:6px 22px 18px; }
#v-empty[hidden] { display:none; }
#v-empty .empty-top { width:100%; } #v-empty .empty-badge { font:500 10.5px var(--sans); padding:3px 10px; }
#v-empty h1 { margin:10px 0 6px; font:700 30px/1.35 var(--serif, serif); } #v-empty .empty-top p.subt { margin:10px 0 8px; font:600 18px/1.5 var(--serif, serif); color:var(--ink); } #v-empty .empty-top p { margin:0; font:400 14.5px/1.7 var(--sans); color:var(--mute); }
#v-empty .book-container { width:170px; height:230px; margin:14px auto; zoom:1.18; } #v-empty .book-spine { width:10px; }
#v-empty .book-inner { padding:16px 14px 14px 20px; } #v-empty .book-meta { font-size:8.5px; } #v-empty .book-title { margin-top:auto; font-size:18px; }
#v-empty .book-sub { font-size:9.5px; } #v-empty .book-owner { font-size:10px; } #v-empty .book-seal { width:24px; height:24px; font-size:9px; }
#v-empty .empty-bottom { width:100%; } #v-empty .topics { margin:0 0 12px; gap:4px; }
#v-empty .topics i { font:500 10.5px var(--sans); padding:2px 8px; background:color-mix(in srgb, var(--line) 55%, transparent); color:var(--mute); }
#v-empty .btn.primary { width:100%; padding:13px; border-radius:12px; font-size:13px; }
#v-empty .lnk2 { margin-top:10px; font-size:12.5px; } #v-empty .foot2 { margin-top:8px; font-size:11px; }

/* 구매(차례 티저) */
.buy-top { display:flex; justify-content:space-between; align-items:center; padding:2px 20px 0; } .buy-top .back { margin:0; } .buy-ttl { font:700 12px var(--serif, serif); }
html[data-skin="zen"] .hook { padding:6px 22px 0; } html[data-skin="zen"] .hook h1 { margin:4px 0 4px; font:900 19px/1.35 var(--serif, serif); }
html[data-skin="zen"] .hook p { margin:0 0 12px; font:400 11.5px/1.6 var(--sans); }
html[data-skin="zen"] .toc-card { margin:6px 16px 0; padding:12px 14px; border-radius:12px; }
.toc-hd { font:700 10px var(--sans); letter-spacing:.08em; }
.toc-item { padding:9px 0; font-size:12px; } .toc-info b { font:700 12.5px/1.4 var(--sans); } .toc-info small { font-size:10.5px; color:var(--mute); }
.toc-num { width:20px; font:700 13px var(--serif, serif); } .toc-tag { font-size:9.5px; }
.toc-blur-box { margin-top:5px; padding:6px 8px; } .toc-blur-txt { font-size:10.5px; } .toc-blur-lock { font-size:9px; }
html[data-skin="zen"] .qlist { margin:12px 16px 0; }
html[data-skin="zen"] .trust-grid { margin:12px 16px 0; gap:6px; } .trust-item { padding:8px 4px; border-radius:8px; } .trust-item i { font-size:13px; margin:0; } .trust-item b { font-size:10px; }
.buy-cta { display:flex; align-items:center; justify-content:space-between; width:100%; padding:14px 16px; border:0; border-radius:12px; background:#c4593c; color:#fff; box-shadow:0 4px 12px rgba(196,89,60,.28); cursor:pointer; text-align:left; }
.buy-cta[disabled] { opacity:.7; } .buy-cta .bc-l small { display:block; font:400 10px var(--sans); opacity:.85; } .buy-cta .bc-l b { font:700 13px var(--sans); }
.buy-cta .bc-p { font:900 14px var(--serif, serif); background:rgba(255,255,255,.2); padding:3px 10px; border-radius:6px; }

/* 진행(오행 궤도) */
.prog-top { display:flex; justify-content:space-between; align-items:center; padding:6px 22px; font:400 12px var(--sans); color:var(--mute); }
.prog-top .prog-home { border:0; background:none; font:400 12px var(--sans); color:var(--terra-d, var(--terra)); cursor:pointer; }
.prog-body { display:flex; flex-direction:column; align-items:center; text-align:center; padding:34px 20px 6px; }
.prog-body .orbit-wrap { width:140px; height:140px; margin:0 0 10px; } .prog-body .orbit-node { width:20px; height:20px; margin:-10px 0 0 -10px; font-size:10px; }
.prog-body .orbit-wrap .pct { padding:14px; border-radius:50%; background:color-mix(in srgb, var(--field) 92%, transparent); box-shadow:0 1px 2px rgba(0,0,0,.06); }
.prog-body .pct #pn { font:900 26px/1 var(--serif, serif); } .prog-body .pct small { font-size:12px; color:var(--mute); } .prog-body .pct em { font-size:9px; }
.prog-body .orbit-arc .arc { stroke-width:2.4; opacity:.9; }
.prog-body .pstep { margin:14px 0 2px; font:700 16px/1.4 var(--serif, serif); }
.prog-body .pnote { margin:2px 0 0; font:400 11px/1.5 var(--sans); color:var(--mute); } .prog-body .pmeta, .prog-body #psub { margin:6px 0 0; font:400 11px var(--sans); color:var(--mute); }
.feed-card { margin:18px 20px 0; padding:12px; background:var(--field); border:1px solid var(--line); border-radius:12px; text-align:left; }
.feed-card .fd-k { display:flex; align-items:center; gap:5px; font:700 9.5px var(--sans); color:#059669; } .feed-card .fd-k i { width:6px; height:6px; border-radius:50%; background:#10b981; }
.feed-card .fd-t { margin-top:4px; font:700 13px var(--serif, serif); } .feed-card .fd-p { margin:2px 0 0; font:400 11px/1.55 var(--sans); color:var(--mute); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.prog-home-btn { display:block; width:calc(100% - 40px); margin:22px 20px 18px; padding:11px; border:1px solid var(--line2); border-radius:12px; background:transparent; color:var(--ink); font:700 12px var(--sans); cursor:pointer; }
.buybar .buy-cta small { margin:0; text-align:left; color:inherit; }
.prog-body .pct em { white-space:nowrap; }
.buy-cta .bc-p:empty { display:none; }
#appBanner { font:500 12.5px/1.5 var(--sans); padding:9px 12px !important; border-radius:10px; }

/* 앱(iOS)의 홈은 앱이 그린다: 웹의 홈 요소는 감추고 배경을 비워 아래의 앱 화면이 보이게 한다. 웹 시트·토스트는 그 위에 뜬다. */
html.nhtop .appbar, html.nhtop .toptabs, html.nhtop #appBanner, html.nhtop #v-empty, html.nhtop #v-home, html.nhtop #v-pairs { visibility:hidden; }
html.nhtop, html.nhtop body, html.nhtop .app { background:transparent !important; box-shadow:none !important; }
html.nhtop .app::before, html.nhtop .app::after { display:none !important; }

/* 앱(iOS)의 입력 화면도 앱이 그린다 */
html.nhinput .appbar, html.nhinput #v-input { visibility:hidden; }
html.nhinput, html.nhinput body, html.nhinput .app { background:transparent !important; box-shadow:none !important; }
html.nhinput .app::before, html.nhinput .app::after { display:none !important; }

/* 앱(iOS)의 상담 신청 화면도 앱이 그린다 */
html.nhbuy .appbar, html.nhbuy #v-buy { visibility:hidden; }
html.nhbuy, html.nhbuy body, html.nhbuy .app { background:transparent !important; box-shadow:none !important; }
html.nhbuy .app::before, html.nhbuy .app::after { display:none !important; }

/* 진행 띠 끝에서 숨 쉬던 점은 없앴다(띠만으로 충분하다) */
.five i.cur::after { display:none !important; }

/* 카드 왼쪽의 오행 색 띠는 없앴다(일간 타일이 오행을 보여 준다) */
.pcard .eb { display:none !important; }
html[data-skin="zen"] .pcard { padding-left:16px !important; }

/* 앱(iOS)의 진행(오행 궤도) 화면도 앱이 그린다 */
html.nhprog .appbar, html.nhprog #v-prog { visibility:hidden; }
html.nhprog, html.nhprog body, html.nhprog .app { background:transparent !important; box-shadow:none !important; }
html.nhprog .app::before, html.nhprog .app::after { display:none !important; }