/* Q-22 웹 퍼널 시제품 — 기존 리포트 톤 유지 (남색 #141428 · 금색 #E8C66A) · 새 무드 창작 없음 */
:root{
  --bg:#141428; --card:#1E1F3D; --hi:#26284D; --line:#34365F;
  --gold:#E8C66A; --ivory:#F3EEDF; --dim:#B9B4CC; --faint:#8A86A3; --warn:#E8A86A;
  --r:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ivory);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
  word-break:keep-all;overflow-wrap:anywhere;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
a{color:var(--gold)}
button{font:inherit;color:inherit}
.proto{background:#2A2440;color:var(--faint);font-size:11px;text-align:center;padding:3px 8px;letter-spacing:.5px}
.top{display:flex;justify-content:space-between;align-items:center;max-width:560px;margin:0 auto;padding:10px 16px}
.brand{color:var(--gold);font-weight:700;letter-spacing:1px;font-size:14px}
.back{font-size:13px;text-decoration:none;color:var(--dim)}
.lang{display:flex;gap:4px}
.lang button{background:none;border:1px solid var(--line);border-radius:8px;padding:3px 8px;font-size:12px;color:var(--faint);cursor:pointer}
.lang button.on{border-color:var(--gold);color:var(--gold)}
.wrap{max-width:560px;margin:0 auto;padding:4px 16px 48px}
h1{font-size:26px;line-height:1.3;margin:14px 0 6px}
h2.sec{font-size:13px;letter-spacing:1px;color:var(--faint);margin:26px 0 8px;font-weight:600}
.lead{color:var(--dim);margin:0 0 20px}
.badge{display:inline-block;margin:14px 0 0;padding:3px 11px;border:1px solid var(--gold);border-radius:999px;color:var(--gold);font-size:12.5px;line-height:1.4}
.badge+h1{margin-top:10px}
.c-diff{margin:-4px 0 14px;font-size:13.5px}
.fld{display:block;margin:0 0 16px}
.fld>span{display:block;font-size:13px;color:var(--faint);margin:0 0 6px}
.inp{width:100%;background:var(--card);border:1px solid var(--line);border-radius:12px;color:var(--ivory);
  padding:13px 14px;font:16px/1.3 inherit;-webkit-appearance:none;appearance:none;min-height:50px;color-scheme:dark}
.inp.big{font-size:20px;min-height:58px}
.inp:focus{outline:2px solid var(--gold);outline-offset:1px}
.cta{display:block;width:100%;text-align:center;text-decoration:none;background:var(--gold);color:#1B1C33;border:0;border-radius:var(--r);
  padding:16px;font-weight:700;font-size:17px;cursor:pointer;margin:6px 0 14px}
.ghost{display:block;width:100%;background:none;border:1px solid var(--gold);color:var(--gold);border-radius:var(--r);padding:12px;cursor:pointer;margin:8px 0}
.ghost.sm{display:inline-block;width:auto;white-space:nowrap;flex:none;padding:7px 12px;font-size:13px;margin:0}
.link{background:none;border:0;color:var(--gold);cursor:pointer;font-size:13px;padding:0 4px}
.err{color:var(--warn);font-size:14px;margin:4px 0 10px}
.fine{color:var(--faint);font-size:12.5px;margin:10px 0}
.dim{color:var(--dim);font-size:14px}
.center{text-align:center}
.more{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin:6px 0 14px}
.more summary{cursor:pointer;color:var(--dim);font-size:14px}
.more[open] summary{margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{background:var(--hi);border:1px solid var(--line);border-radius:11px;padding:9px 13px;font-size:14.5px;cursor:pointer;color:var(--ivory)}
.chip.on{border-color:var(--gold);color:var(--gold);background:#2E2F60;font-weight:600}
.chip small{display:block;font-size:11px;color:var(--faint);font-weight:400}
.bands{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:9px}
.bands .chip{text-align:center;padding:9px 4px}
.sugg{margin-top:6px}
.opt{display:block;width:100%;text-align:left;background:var(--hi);border:1px solid var(--line);color:var(--ivory);
  border-radius:11px;padding:11px 13px;margin:6px 0 0;font-size:14.5px;cursor:pointer}
.opt.on{border-color:var(--gold);background:#2E2F60;color:var(--gold);font-weight:600}
.opt.skip{background:none;color:var(--faint);font-size:13.5px}
.picked{font-size:14px;color:var(--dim);margin:8px 0 0}
.picked b{color:var(--ivory)}
.given{margin:0;font-size:16px}
#tmBody{margin-top:9px}
.notice{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 14px;font-size:14px;color:var(--dim);margin:10px 0}
.notice.warn{border-color:var(--warn);color:var(--ivory)}
.chk{display:flex;gap:10px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:8px 0;font-size:14.5px;cursor:pointer}
.chk input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--gold)}
.chk[hidden]{display:none}
.ask h3{font-size:13px;letter-spacing:1px;color:var(--faint);margin:18px 0 2px}
.qq{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:13px;margin:10px 0}
.qq .p{font-weight:600;margin:0 0 4px}
/* A — 멈추고 입력 */
.scr-a h1{font-size:30px;margin-top:28px}
/* B — 오늘 한 줄이 주인공 */
.date{color:var(--faint);font-size:13px;margin:16px 0 0;letter-spacing:1px}
.hero{padding:18px 0 6px}
.hero .k,.card .k,.pair .k,.share-card .k{display:block;font-size:11.5px;letter-spacing:1.5px;color:var(--faint);margin-bottom:4px}
.scr-b .hero h1{font-size:34px;color:var(--gold);margin:0}
.body{font-size:18px;line-height:1.75;margin:6px 0 18px}
.day-line{font-size:14px;color:var(--dim);margin:-8px 0 18px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0 0 12px}
.pair div,.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.card{margin:0 0 12px}
.card p{margin:0}
.card.soft{background:#22233F}
.hint{color:var(--faint);font-size:13px;margin:4px 0 14px}
.share-card{border:1px solid var(--gold);border-radius:18px;padding:18px;margin:18px 0 6px;background:linear-gradient(160deg,#1E1F3D,#141428)}
.share-card b{display:block;color:var(--gold);font-size:20px;margin-bottom:4px}
.share-card p{margin:0;color:var(--dim);font-size:14.5px}
.bridge{display:block;text-decoration:none;background:var(--hi);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:16px 0 8px;color:var(--ivory)}
.bridge b{display:block;color:var(--gold);font-size:17px}
.bridge span{color:var(--dim);font-size:14px}
/* C — 궁금증 */
.scr-c .hero h1{font-size:32px;color:var(--gold);margin:0}
.kw{font-size:17px;color:var(--gold);font-weight:600}
.bars{display:grid;gap:6px;margin-top:4px}
.bar{display:grid;grid-template-columns:44px 1fr 36px;align-items:center;gap:8px;font-size:13.5px}
.bt{height:8px;background:var(--hi);border-radius:4px;overflow:hidden}
.bt i{display:block;height:100%;background:var(--gold);border-radius:4px}
.bn{color:var(--faint);text-align:right}
.glance{padding-left:20px;margin:12px 0}
.glance li{margin:0 0 8px}
.glance b{color:var(--gold);margin-right:4px}
.toc{list-style:none;padding:0;margin:0 0 8px}
.toc li{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:10px 2px;color:var(--dim)}
.toc .no{color:var(--faint);font-size:12px;min-width:46px}
.toc .lock{margin-left:auto;font-size:12px;opacity:.6}
/* E — 신뢰(정보 위계) */
.row2{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.gold{color:var(--gold);font-size:20px}
.consents{margin:14px 0 4px}
/* F */
.wait{text-align:center;padding:80px 0}
.spin{width:36px;height:36px;border:3px solid var(--line);border-top-color:var(--gold);border-radius:50%;margin:0 auto 14px;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
/* G — 리포트 */
.rhead{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:9px 12px;margin:10px 0 6px;font-size:13px;color:var(--dim)}
.rhead p{margin:0}
.report .cover{padding:18px 0 4px;border-bottom:1px solid var(--line)}
.report .cover h1{color:var(--gold)}
.report .compass{color:var(--dim);font-size:14.5px}
.report .ch{padding:14px 0 6px;border-bottom:1px solid var(--line)}
.report h2{font-size:19px;margin:10px 0 10px;line-height:1.4}
.report h2 .no{color:var(--faint);font-size:13px;margin-right:8px}
.report h2 .core{font-size:11px;background:var(--gold);color:#1B1C33;border-radius:5px;padding:1px 6px;margin-right:6px;vertical-align:2px}
.report p{line-height:1.8;margin:0 0 12px}
.report .con{font-size:17.5px;font-weight:600;color:var(--ivory)}
.report .why,.report .scene,.report .todo,.report .box,.report .note{background:var(--card);border-left:3px solid var(--faint);border-radius:0 10px 10px 0;padding:9px 13px;margin:0 0 12px;font-size:15px}
.report .scene{border-left-color:#7A8CC8}
.report .todo{border-left-color:var(--gold)}
.report .why b,.report .scene b,.report .todo b,.report .box b{display:block;font-size:11.5px;letter-spacing:1px;color:var(--faint);margin-bottom:2px}
.report .why p,.report .scene p,.report .todo p,.report .box p{margin:0}
.report em{font-style:normal;color:var(--gold)}
.report table{width:100%;border-collapse:collapse;font-size:13.5px;margin:0 0 14px;table-layout:fixed}
.report th{color:var(--faint);font-weight:500;text-align:left;border-bottom:1px solid var(--line);padding:6px 5px}
.report td{border-bottom:1px solid var(--line);padding:7px 5px;vertical-align:top}
.report table.pil td,.report table.pil th{text-align:center}
.report table.pil td{font-size:16px}
.report table.pil small{font-size:11px;color:var(--faint)}
.report tr.now td{background:#2A2B55}
.report .nowtag{font-size:10.5px;background:var(--gold);color:#1B1C33;border-radius:4px;padding:0 5px}
.report .items{padding-left:18px}
.report .items li{margin:0 0 8px}
.report .items b{color:var(--gold)}
.report .kw{margin:0 0 8px}
.report .sum ol{padding-left:20px}
.report .sum li{margin:0 0 8px}
.report .sum b{color:var(--gold);margin-right:4px}
.report dl{margin:0;font-size:14px}
.report dt{color:var(--gold);margin-top:8px}
.report dd{margin:0;color:var(--dim)}
.report .foot{padding:16px 0;color:var(--dim);font-size:14px}
/* [Q-28] 생년월일 선택 상자 · 총운 · 미리보기 카드 · 풀이 3줄 · C 목차 접기 */
.dsel{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:7px}
.dsel select{font-size:17px;min-height:54px;padding:10px 8px}
.total{margin:4px 0 12px}
.total h2.sec{margin:14px 0 6px}
.total p{font-size:16px;line-height:1.85;margin:0}
.peek{display:block;text-decoration:none;color:var(--ivory);background:var(--hi);border:1px solid var(--gold);border-radius:var(--r);padding:14px;margin:10px 0 16px}
.peek .k{display:block;font-size:11px;letter-spacing:1px;color:var(--faint);margin:2px 0 3px}
.peek .pk-name{display:block;font-size:20px;color:var(--gold);margin-bottom:8px}
.peek .pk-fact{margin:8px 0 10px;font-size:14px;color:var(--dim)}
.peek .pk-go{display:block;text-align:center;background:var(--gold);color:#1B1C33;border-radius:11px;padding:11px;font-weight:700}
.why3 ol{padding-left:18px;margin:0 0 12px}
.why3 li{margin:0 0 7px;font-size:14.5px;line-height:1.7}
.tocbox{margin:16px 0 8px}
.tocbox summary{cursor:pointer;color:var(--dim);font-size:14px;padding:8px 0}
/* [Q-32] 목차 접기·펼치기 = 결제 버튼보다 약한 보조 버튼 모양 (테두리 · 전체 폭 · ▼) */
.tocbox summary.tocbtn{list-style:none;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:11px;padding:12px 14px;color:var(--ivory);font-size:14.5px;font-weight:600;background:transparent}
.tocbox summary.tocbtn::-webkit-details-marker{display:none}
.tocbox summary.tocbtn:hover{border-color:var(--gold)}
.tocbox .to-close{display:none}
.tocbox[open] .to-open{display:none}
.tocbox[open] .to-close{display:inline}
.tocbox .to-ar{font-style:normal;font-size:11px;color:var(--faint);transition:transform .15s}
.tocbox[open] .to-ar{transform:rotate(180deg)}
.tocbox[open] .toc{margin-top:10px}
.r-toc{margin:16px 0 8px}   /* [Q-75 ⑤] R 화면 목차 — 펼친 채 · 접기 없음 */
.r-toc[hidden],.r-buyers:empty{display:none}
.r-toc .k{display:block;font-size:11.5px;letter-spacing:1.5px;color:var(--faint);margin-bottom:4px}
/* [Q-29] C 키워드 이름표 · B 맨 아래 버튼 */
.kws{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}
.kwi{background:var(--hi);border-radius:10px;padding:8px 6px;text-align:center}
.kwi small{display:block;font-size:10.5px;color:var(--faint);margin-bottom:3px;letter-spacing:.3px}
.kwi b{font-size:15.5px;color:var(--gold)}
.peek-btn{margin-top:4px}
.pair .num{grid-column:1/-1}
.charm{margin:18px 0 12px}
.charm .tag{display:inline-block;font-size:11.5px;color:var(--faint);border:1px solid var(--line);border-radius:999px;padding:2px 10px;margin:0 0 8px}
.charm .ct{margin:0 0 8px;font-size:16px;color:var(--gold)}
.charm ul{margin:0 0 10px;padding-left:18px;color:var(--dim);font-size:14.5px}
.charm .cb{margin:0 0 12px;font-size:13.5px}
/* [Q-26] B 확장 — 일진 카드(나란히) · 영역 4칸 · 시간대 · 7일 흐름 */
.iljin{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 4px}
.iljin>div{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:11px 12px}
.iljin .k{display:block;font-size:11px;letter-spacing:1px;color:var(--faint);margin-bottom:3px}
.iljin b{display:block;font-size:15.5px;color:var(--gold);line-height:1.35}
.iljin p{margin:4px 0 0;font-size:13px;line-height:1.55;color:var(--dim)}
.areas{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}
.area{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:11px 12px}
.area .k{display:block;font-size:11.5px;letter-spacing:1px;color:var(--gold);margin-bottom:4px}
.area p{margin:0;font-size:14px;line-height:1.6}
/* [Q-71] 영역 별 · 살필 점 · 총운 점수 · 시간대별 흐름 */
.area .stars{font-style:normal;letter-spacing:1px;margin-left:6px;color:var(--gold)}
.area p.watch{margin-top:7px;padding-top:7px;border-top:1px dashed var(--line);font-size:13.5px;color:var(--dim)}
@media (max-width:520px){ .areas{grid-template-columns:1fr} }
.total .score{display:flex;align-items:baseline;gap:6px;margin:0 0 2px}
.total .score .k{font-size:11.5px;letter-spacing:1px;color:var(--faint);margin-right:4px}
.total .score b{font-size:30px;color:var(--gold);line-height:1.1}
.total .score .of{font-size:13px;color:var(--faint)}
.total p.snote{font-size:12.5px;line-height:1.5;color:var(--faint);margin:0 0 8px}
.flow3 ul{list-style:none;padding:0;margin:0 0 6px}
.flow3 li{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;margin:0 0 8px}
.flow3 li.fit{border-color:var(--gold)}
.flow3 .fh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.flow3 .fh b{color:var(--gold);font-size:14.5px}
.flow3 .ft{font-size:12.5px;color:var(--faint)}
.flow3 p{margin:4px 0 0;font-size:14px;line-height:1.6}
.flow3 p.ffit{font-size:12.5px;color:var(--gold)}
.flow3 .fnote{font-size:12px;color:var(--faint);margin:2px 0 12px}
.card.hours b{display:block;font-size:16px;color:var(--ivory)}
.card.hours p{font-size:13px;color:var(--dim);margin-top:2px}
.week ul{list-style:none;padding:0;margin:0 0 6px}
.week li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding:9px 2px;font-size:14px}
.week .wd{color:var(--faint)} .week .wl{color:var(--ivory);text-align:right}
.week li.now .wl{color:var(--gold)} .week em{font-style:normal;font-size:11px;background:var(--hi);border-radius:5px;padding:1px 6px;color:var(--gold)}
/* [Q-25] 영어 C — 소개 블록 · 내 네 기둥(오방색을 옅게: 목 청 · 화 적 · 토 황 · 금 백 · 수 흑) */
.intro{margin:14px 0 22px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.intro h2{font-size:22px;margin:6px 0 8px;color:var(--gold)}
.intro p{font-size:15px;color:var(--ivory);margin:0 0 10px}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:14px 0 10px}
.pcol{display:grid;gap:6px;align-content:start}
.ph{font-size:11.5px;letter-spacing:1px;color:var(--faint);text-align:center}
.pcell{border:1px solid var(--line);border-radius:10px;text-align:center;padding:9px 2px 7px;min-height:62px}
.pcell b{display:block;font-size:26px;font-weight:600;line-height:1.2;color:#F3EEDF}
.pcell small{display:block;font-size:11px;color:var(--dim);margin-top:2px}
.pcell.wood{background:rgba(74,128,176,.28)}
.pcell.fire{background:rgba(196,76,64,.28)}
.pcell.earth{background:rgba(204,172,76,.26)}
.pcell.metal{background:rgba(244,240,228,.20)}
.pcell.water{background:rgba(8,8,22,.65);border-color:#4A4D7A}
.pcell.none{display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--faint);min-height:130px;border-style:dashed}
/* [Q-36] 00장 원국 그림 — 오방색(목 청 · 화 적 · 토 황 · 금 백 · 수 흑)만 의미 색 · 그림자·그라데이션 0 */
:root{--o-wood:rgba(74,128,176,.30);--o-fire:rgba(196,76,64,.30);--o-earth:rgba(204,172,76,.28);--o-metal:rgba(244,240,228,.20);--o-water:rgba(8,8,22,.70);
  --d-wood:#5B93C6;--d-fire:#D0594C;--d-earth:#D2B256;--d-metal:#F4F0E4;--d-water:#0B0B1C}
.report .wonguk-figs{margin:4px 0 14px}
.report .fig{margin:0 0 12px;break-inside:avoid}
.report .fig figcaption{font-size:12px;letter-spacing:1px;color:var(--faint);margin:0 0 6px}
.report table.wonguk{table-layout:fixed;margin:0}
.report table.wonguk th{text-align:center;font-size:12px;padding:4px 2px}
.report table.wonguk th.rh{width:46px;text-align:left;font-size:11.5px;line-height:1.3}
.report table.wonguk th.rh small{display:block;font-size:10px;color:var(--faint)}
.report table.wonguk td{text-align:center;padding:6px 2px 7px;border:1px solid var(--line);vertical-align:top;line-height:1.25;position:relative}
.report table.wonguk td .hz{display:block;font-size:30px;font-weight:600;line-height:1.15;color:var(--ivory)}
.report table.wonguk td .ko{display:block;font-size:15px;color:var(--ivory)}
.report table.wonguk td .el{display:block;font-size:11.5px;color:var(--dim);margin-top:1px}
.report table.wonguk td .role{display:block;font-size:10.5px;color:var(--ivory);margin-top:5px;padding-top:4px;border-top:1px dashed var(--line);word-break:keep-all}
.report table.wonguk td .metag{position:absolute;top:3px;right:4px;font-size:10.5px;border:1px solid var(--gold);color:var(--gold);border-radius:6px;padding:0 4px;line-height:1.5}
.report table.wonguk td.none{vertical-align:middle;color:var(--faint);font-size:12px;border-style:dashed}
.report table.wonguk td .seattag{display:inline-block;font-size:10.5px;border:1px solid var(--gold);color:var(--gold);border-radius:6px;padding:0 4px;line-height:1.5;margin-bottom:2px;white-space:nowrap}   /* [Q-37 ⑥] 날 기둥 아래 = 내 자리 */
.report .figkey{font-size:12.5px;color:var(--dim);margin:6px 0 0;text-align:center}   /* [Q-37 ⑥] 표 아래 한 줄 뜻 · 범례 */
.report .cover .bline{font-size:14px;color:var(--dim);margin:6px 0 0}   /* [Q-37 ③] 해외 출생지 머리 줄 */
.report td.el-wood{background:var(--o-wood)} .report td.el-fire{background:var(--o-fire)} .report td.el-earth{background:var(--o-earth)}
.report td.el-metal{background:var(--o-metal)} .report td.el-water{background:var(--o-water)}
.report .duo{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
@media (max-width:480px){ .report .duo{grid-template-columns:1fr} .report .duo svg{max-width:300px;display:block;margin:0 auto} }
.report svg.penta,.report svg.scale{width:100%;height:auto;display:block}
.report svg .ring{fill:none;stroke:var(--line);stroke-width:1.2} .report svg .ring.in{stroke-dasharray:3 3}
.report svg .area{fill:rgba(243,238,223,.12);stroke:var(--ivory);stroke-width:1.4}
.report svg .dot{stroke:var(--ivory);stroke-width:1}
.report svg .dot.el-wood{fill:var(--d-wood)} .report svg .dot.el-fire{fill:var(--d-fire)} .report svg .dot.el-earth{fill:var(--d-earth)}
.report svg .dot.el-metal{fill:var(--d-metal)} .report svg .dot.el-water{fill:var(--d-water)}
.report svg text{fill:var(--ivory);font-size:13px} .report svg .vc{font-weight:700} .report svg .pl{font-size:12px;fill:var(--dim)}
.report svg .beam{stroke:var(--ivory);stroke-width:2.2;stroke-linecap:round} .report svg .pivot{fill:var(--ivory)}
.report svg .post{fill:none;stroke:var(--faint);stroke-width:1.4} .report svg .pan{fill:none;stroke:var(--ivory);stroke-width:1.6}
.report .figline{font-size:14px;color:var(--ivory);margin:4px 0 0;text-align:center}
@media (max-width:380px){ .report table.wonguk td .hz{font-size:26px} .report table.wonguk td .role{font-size:10px} .report table.wonguk th.rh{width:38px} }
/* [Q-47] 천간 아이콘 — 색 = 감싼 칸·카드의 오행 색(기존 변수) · 00장 표 위 칸 18px · 01장 일간 카드 48px */
.report .el-wood .st-ic{color:var(--d-wood)} .report .el-fire .st-ic{color:var(--d-fire)} .report .el-earth .st-ic{color:var(--d-earth)}
.report .el-metal .st-ic{color:var(--d-metal)} .report .el-water .st-ic{color:var(--dim)}   /* 화면 = 어두운 배경에서 --d-water 가 안 보여 기존 --dim 재사용 · 인쇄는 아래 1색 규칙 */
.report table.wonguk td .st-ic{display:block;width:18px;height:18px;margin:0 auto 1px}
.report .stem-card{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin:2px 0 14px;break-inside:avoid}
.report .stem-card .st-ic{width:48px;height:48px;flex:none}
.report .stem-card .hz{font-size:30px;font-weight:600;line-height:1;color:var(--ivory);flex:none}
.report .stem-card .sc-t{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.report .stem-card .sc-n{font-size:15px;color:var(--ivory);white-space:nowrap}
.report .stem-card .sc-l{font-size:13px;color:var(--dim);white-space:nowrap}
@media (max-width:380px){ .report table.wonguk td .st-ic{width:16px;height:16px} .report .stem-card{gap:10px;padding:10px 12px} .report .stem-card .hz{font-size:26px} }
/* [Q-48] 열두 달 띠(12장) · 10년 타임라인(13장) — 톤 3단: up = 금색 면 · mid = 테두리만 · down = 흐린 면 (새 색 값 0) */
.report .band-m,.report .band-d{margin:22px 0 12px;break-inside:avoid}
.report .bm-row,.report .band-d{display:flex;gap:3px}
.report .bm-c,.report .bd-c{position:relative;flex:1 1 0;min-width:0;border-radius:calc(var(--r) / 2);border:1px solid var(--line);text-align:center;color:var(--ivory)}
.report .bm-c{display:flex;flex-direction:column;justify-content:flex-end;padding:3px 0 5px;font-size:11px;line-height:1.3;min-height:38px}
.report .bm-c small,.report .bd-c small{display:block;min-height:12px;font-size:9.5px;color:var(--dim)}
.report .bm-c.up,.report .bd-c.up{border-color:var(--gold);background:rgba(232,198,106,.25)}
.report .bm-c.down,.report .bd-c.down{border-color:var(--dim);background:rgba(185,180,204,.12)}
.report .bm-c.now,.report .bd-c.now{border-width:2px}
.report .nw{position:absolute;top:-15px;left:50%;transform:translateX(-50%);font-style:normal;font-size:10px;color:var(--gold);white-space:nowrap}
.report .bm-leg{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:7px;font-size:12px;color:var(--dim)}
.report .bm-leg .lg{display:inline-flex;align-items:center;gap:5px}
.report .bm-leg .bm-c{display:inline-block;flex:none;width:14px;height:14px;min-height:0;padding:0;border-radius:4px}
.report .bd-c{display:flex;flex-direction:column;align-items:center;padding:5px 2px 6px;gap:3px}
.report .bd-c b{font-weight:500;font-size:12px;line-height:1.35;overflow-wrap:anywhere;word-break:keep-all}
.report .band-d.dense .bd-c b{font-size:11px}
.report .band-d.en.dense .bd-c b{display:none}   /* [Q-52 ④ 운영자 결정] 영어 dense(블록 8개 이상)는 모든 폭에서 연도만 — 단어가 칸보다 넓다 · 같은 말이 표에 있다 */
@media (max-width:480px){ .report .band-d.dense .bd-c b{display:none} }   /* [Q-54 운영자 결정] 국문도 폰 폭에서 블록 8개 이상이면 연도만 — 영어 dense 와 같은 방식 · 같은 말이 표에 있다 */
@media (max-width:380px){ .report .bd-c b{display:none} .report .bm-c{font-size:10px} }
.report .band-m.dense .bm-row{gap:2px}   /* [Q-75 ④] 13~15칸(다음 해 12월까지) — 칸이 좁아져 글자를 한 단계 줄인다 */
@media (max-width:480px){ .report .band-m.dense .bm-c{font-size:9.5px;letter-spacing:-.3px} .report .band-m.dense .bm-c small{font-size:8px;letter-spacing:-.4px} }
/* [Q-50 ③] 13장 블록 글자 — 단어 중간에서 끊지 않는다(영어 development 등) · 영어는 12.5px */
.report .band-d.en .bd-c b{overflow-wrap:normal;word-break:normal;hyphens:none}   /* [Q-53 ①] 영어 한정 — 국문은 위 keep-all 기본 */
.report .band-d.en:not(.dense) .bd-c b{font-size:12.5px}   /* dense(블록 8개 이상)는 기존 11px 규칙 그대로 */
/* [Q-52] 10·11장 해 글자 카드 — 생 = 실선 · 극 = 점선 · 같음 = 화살촉 없는 실선 (03장 바퀴와 같은 문법) */
.report .yearfig{max-width:340px;margin:12px auto 8px;break-inside:avoid}
.report svg.yearsvg{width:100%;height:auto;display:block}
.report svg .yl{fill:none;stroke:var(--dim);stroke-width:1.5} .report svg .yl.d{stroke-dasharray:4 3} .report svg .yr-ar{fill:var(--dim)}
.report svg .yc rect{fill:var(--card);stroke-width:2}
.report svg .yc.el-wood rect{stroke:var(--d-wood)} .report svg .yc.el-fire rect{stroke:var(--d-fire)} .report svg .yc.el-earth rect{stroke:var(--d-earth)}
.report svg .yc.el-metal rect{stroke:var(--d-metal)} .report svg .yc.el-water rect{stroke:var(--dim)} .report svg .yc.me rect{stroke:var(--gold)}
.report svg .yc.me rect{stroke-width:2.5;fill:rgba(232,198,106,.25)}   /* [Q-53 ②] 나 카드 구별 — 굵은 금 테두리 + Q-48 up 톤 면(새 색 0) */
.report svg .yc text.yh{font-size:22px;font-weight:600;text-anchor:middle;fill:var(--ivory)} .report svg .yc text.yh.br{font-size:30px}
/* [Q-51] 00장 상생 화살표(1겹) · 05장 다섯 자리 */
.report svg .sg{fill:none;stroke:var(--dim);stroke-width:1.2} .report svg .pn-ar{fill:var(--dim)}
.report .needfig{max-width:340px;margin:12px auto 8px}
.report svg.needsvg{width:100%;height:auto;display:block}
.report svg .nd circle{stroke:var(--ivory);stroke-width:1}
.report svg .nd.el-wood circle{fill:var(--d-wood)} .report svg .nd.el-fire circle{fill:var(--d-fire)} .report svg .nd.el-earth circle{fill:var(--d-earth)}
.report svg .nd.el-metal circle{fill:var(--d-metal)} .report svg .nd.el-water circle{fill:var(--d-water)}
.report svg .nd.z circle{fill:none;stroke:var(--dim);stroke-dasharray:3 3}
.report svg .nd.on circle{stroke:var(--gold);stroke-width:2;stroke-dasharray:none} .report svg .nd .tri{fill:var(--gold)}
.report svg .nd text{font-size:12px;text-anchor:middle;fill:var(--ivory)} .report svg .nd .vc{font-weight:700}
/* [Q-50 ①] 03장 관계 바퀴 — 생 = 실선 · 극 = 점선 · 오행 5색 = 기존 --d-* */
.report .wheel{margin:14px auto 10px;max-width:340px;break-inside:avoid;text-align:center}
.report svg.wheel-svg{width:100%;height:auto;display:block}
.report svg .wl{fill:none;stroke:var(--dim);stroke-width:1.5} .report svg .wl.d{stroke-dasharray:4 3}
.report svg .wh-ar{fill:var(--dim)}
.report svg .ring0{fill:var(--card);stroke:var(--gold);stroke-width:2}
.report svg .wo circle{stroke:var(--ivory);stroke-width:1}
.report svg .wo.el-wood circle{fill:var(--d-wood)} .report svg .wo.el-fire circle{fill:var(--d-fire)} .report svg .wo.el-earth circle{fill:var(--d-earth)}
.report svg .wo.el-metal circle{fill:var(--d-metal)} .report svg .wo.el-water circle{fill:var(--d-water)}
.report svg text.wn{font-size:11px;font-weight:600;text-anchor:middle}
.report svg text.wn.el-earth,.report svg text.wn.el-metal{fill:#1B1B2A}
.report svg text.wt{font-size:12px;fill:var(--dim)}
.report .wheel-leg{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 16px;margin-top:6px;font-size:12px;color:var(--dim)}
.report .wheel-leg .lg{display:inline-flex;align-items:center;gap:6px}
.report .wheel-leg .lg::before{content:"";width:28px;border-top:1.5px solid var(--dim)} .report .wheel-leg .lg.d::before{border-top-style:dashed}   /* 범례 견본 = 선 모양(실선/점선) */
/* PDF 저장(브라우저 인쇄) — 밝은 종이 */
@media print{
  :root{--o-wood:#DCE8F3;--o-fire:#F6DCD8;--o-earth:#F5ECCF;--o-metal:#FFFFFF;--o-water:#CFD0DA;--d-metal:#FFFFFF;--d-water:#1B1B2A}
  .report .wonguk-figs,.report .wonguk-figs *{-webkit-print-color-adjust:exact;print-color-adjust:exact}   /* 배경 그래픽을 끈 인쇄에서도 칸 색 유지 — 꺼져도 글자는 검정이라 읽힌다 */
  .report table.wonguk td{border-color:#999}
  .report table.wonguk td .role{border-top-color:#bbb}
  .report svg .dot{stroke:#333} .report svg .area{fill:rgba(0,0,0,.06);stroke:#333} .report svg .ring{stroke:#bbb}
  .report .duo{grid-template-columns:1fr 1fr}
  .report .wonguk-figs{break-inside:avoid}
  :root{--bg:#fff;--card:#f6f4ee;--hi:#eee;--line:#ddd;--ivory:#111;--dim:#333;--faint:#666;--gold:#8a6a10}
  body{background:#fff;color:#111;font-size:11.5pt;padding:0}
  .proto,.top,.rhead .ghost,.fine{display:none!important}
  .rhead{border:1px solid #ccc}
  .wrap{max-width:none;padding:0}
  .report .ch{break-inside:auto;border-color:#ddd}
  .report h2{break-after:avoid}
  .report .why,.report .scene,.report .todo,.report .box{break-inside:avoid}
  .report .nowtag,.report h2 .core{color:#fff}
  .report :is(.el-wood,.el-fire,.el-earth,.el-metal,.el-water) .st-ic{color:#1B1B2A}   /* [Q-47] 인쇄 = 글자색 1색(--d-metal 이 흰색이 되어 흰 칸에서 사라지는 것 방지) · 흑백에서도 형태로 구별 */
  .report .stem-card{border-color:#ccc}
  .report :is(.bm-c,.bd-c){color:#111;border-color:#888;background:#fff;-webkit-print-color-adjust:exact;print-color-adjust:exact}   /* [Q-48] 인쇄 = 명도 3단: up 진한 회색 면 · mid 흰 면 · down 흰 면 + 점선 */
  .report :is(.bm-c,.bd-c).up{background:#D9D9E0}
  .report :is(.bm-c,.bd-c).down{border-style:dashed}
  .report .nw{color:#111}
  .report svg .wl{stroke:#111} .report svg .wh-ar{fill:#111}   /* [Q-50] 인쇄 = 1색 · 실선/점선 구별 유지 · 나(가운데)만 2.5 */
  .report svg .ring0{fill:#fff;stroke:#111;stroke-width:2.5}
  .report svg .wo circle{fill:#fff!important;stroke:#111}
  .report svg text.wn,.report svg text.wn.el-earth,.report svg text.wn.el-metal,.report svg text.wt{fill:#111}
  .report .wheel-leg{color:#111} .report .wheel-leg .lg::before{border-top-color:#111}
  .report svg .sg{stroke:#333} .report svg .pn-ar{fill:#333}   /* [Q-51] 인쇄 */
  .report svg .yl{stroke:#333} .report svg .yr-ar{fill:#333} .report svg .yc rect{fill:#fff;stroke:#111!important} .report svg .yc.me rect{stroke-width:2.5;fill:#fff} .report svg .yc text.yh{fill:#111}   /* [Q-52] 인쇄 = 흰 면 · 1색 · 실선/점선 유지 */
  .report svg .nd circle{fill:#D9D9E0!important;stroke:#333} .report svg .nd.z circle{fill:#fff!important} .report svg .nd.on circle{stroke:#111;stroke-width:2.5} .report svg .nd .tri{fill:#111} .report svg .nd text{fill:#111}
}

/* [Q-45] 예시 리포트 — 메뉴 링크 · C/E 진입 · 예시 페이지 띠와 버튼 (리포트 본문 스타일은 건드리지 않는다) */
.lang{align-items:center}
.menu-sample{font-size:12px;color:var(--dim);text-decoration:none;margin-right:6px;white-space:nowrap}
.ghost.sample-btn{text-align:center;text-decoration:none}
.sample-line{text-align:center}
.sample-band{position:sticky;top:0;z-index:5;background:var(--hi);border:1px solid var(--gold);border-radius:12px;color:var(--ivory);
  font-size:13px;line-height:1.55;padding:9px 12px;margin:8px 0 6px}
.report .sample-cta{margin:14px 0}
.report p.sample-price{margin:-6px 0 14px;text-align:center;font-size:12.5px;line-height:1.4;color:var(--faint)}   /* [Q-102 ④] 버튼 아래 보조 글자 — 버튼보다 작고 흐리게 */
@media print{.sample-band,.sample-cta,.sample-price{display:none}}

/* [Q-46] 이메일 화면(M) · F 고민 카드 */
.cn-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.cn-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;text-align:left;cursor:pointer;min-height:104px;display:flex;flex-direction:column;gap:4px}
.cn-card b{color:var(--gold);font-size:15px}
.cn-card .cn-ex{color:var(--dim);font-size:12.5px;line-height:1.45}
.cn-card.on{border-color:var(--gold);background:var(--hi)}
.cta:disabled{opacity:.45;cursor:default}
textarea.inp{min-height:72px;resize:vertical;font-family:inherit}
/* [Q-64] A 화면 양력·음력 + 윤달 · 리포트 머리 정보 블록(화면·인쇄 둘 다) */
.calrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 8px}
.calrow .chk.leap{margin:0;padding:8px 12px}
.report .cover .binfo{margin:8px 0 0}
.report .cover .binfo p{font-size:13.5px;color:var(--dim);margin:2px 0;line-height:1.5}
.report .cover .binfo p.b1{font-size:14.5px;color:var(--ivory)}

/* [Q-68] 약관·방침 페이지 · 푸터 · [운영자 입력] 칸 표시 */
.op{background:#FFE66B;color:#1B1C33;border-radius:3px;padding:0 3px;font-weight:600}
.lnk.strong{font-weight:700}
.chk .lnk{text-decoration:underline}
.site-foot{max-width:560px;margin:0 auto;padding:18px 16px 40px;border-top:1px solid var(--line);color:var(--faint);font-size:11.5px;line-height:1.6}
.site-foot p{margin:4px 0}
.legal h1{font-size:23px}
.legal h2{font-size:15.5px;margin:26px 0 6px;color:var(--gold)}
.legal p{margin:8px 0;font-size:14.5px}
.legal p.sub{margin-left:16px;color:var(--dim)}
.legal ul{margin:6px 0 8px;padding-left:20px;font-size:14.5px}
.legal .tbl{overflow-x:auto;margin:10px 0}
.legal table{border-collapse:collapse;width:100%;font-size:13px;min-width:0}
.legal th,.legal td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
.legal th{background:var(--card);color:var(--dim)}
.legal-nav{margin-top:28px!important}
@media print{ .site-foot{display:none!important} }
/* [Q-83] 검색용 정적 페이지(무료 만세력) · A 화면 만세력 링크 */
.manse-link{margin:8px 0 0;font-size:13px}
.manse-link .link{padding:0;text-decoration:underline}
.seo-page .tool{margin:0 0 22px}
.manse-out{margin:18px 0 6px;padding-top:6px;border-top:1px solid var(--line)}
.manse-out .ms-h{font-size:19px;margin:12px 0 10px}
.manse-out .ms-day .k,.manse-out .ms-daeun .k{display:block;font-size:12px;letter-spacing:1px;color:var(--faint);margin:0 0 6px}
.manse-out .ms-daeun{margin:4px 0 16px}
.manse-out .cta{margin-top:10px}
.seo-body{border-top:1px solid var(--line);padding-top:6px;margin-top:10px}
.seo-body h2{font-size:18px;margin:18px 0 8px;line-height:1.4}
.seo-body p{line-height:1.8;color:var(--ivory);margin:0 0 12px}
.seo-next{margin:22px 0 4px}
.seo-next h2{font-size:15px;color:var(--dim);margin:0 0 10px}
.seo-next .seo-next-btn{text-align:center;text-decoration:none;box-sizing:border-box}
/* [Q-85] 용어 사전 · 가이드 글 */
.seo-body a.gl{color:var(--ivory);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.seo-body .gl-index{line-height:2;color:var(--dim);word-break:keep-all}
.seo-body .gl-index a{color:var(--ivory);text-decoration:none;white-space:nowrap;margin-right:2px}
.seo-body .term{border-top:1px solid var(--line);padding-top:10px;margin-top:10px;scroll-margin-top:12px}
.seo-body .term h3{font-size:16px;margin:0 0 4px;line-height:1.4}
.seo-body .term .gl-han{font-size:13px;color:var(--dim);font-weight:400;margin-left:4px}
.seo-body .term .gl-def{color:var(--ivory);font-weight:600;margin-bottom:6px}
.seo-body .term p:last-child{margin-bottom:6px;color:var(--dim)}
.seo-body .term:target{background:rgba(255,255,255,.04);border-radius:var(--r);padding-left:8px;padding-right:8px}
.seo-guides{margin:22px 0 4px}
.seo-guides h2{font-size:15px;color:var(--dim);margin:0 0 8px}
.seo-guides ul{list-style:none;margin:0 0 10px;padding:0}
.seo-guides li{padding:6px 0;border-top:1px solid var(--line)}
.seo-guides a{color:var(--ivory);text-decoration:none}
.seo-guides p{color:var(--dim);font-size:14px;line-height:1.7;margin:6px 0 0}
.seo-guides p a{text-decoration:underline}
/* [Q-93] 가이드 목록 페이지 · 퍼널 무료 도구 묶음 */
.seo-guide-list{list-style:none;margin:6px 0 18px;padding:0}
.seo-guide-list li{border-top:1px solid var(--line);padding:12px 0}
.seo-guide-list a{color:var(--ivory);text-decoration:none;font-size:16px}
.seo-guide-list span{display:block;color:var(--dim);font-size:14px;line-height:1.65;margin-top:3px}
.seo-guides .guide-all{text-decoration:underline;color:var(--dim)}
.free-tools{margin:26px 0 4px;padding-top:14px;border-top:1px solid var(--line)}
.free-tools h2{font-size:14px;color:var(--dim);margin:0 0 8px;font-weight:600}
.free-tools ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px}
.free-tools li{font-size:14px}
.free-tools a{color:var(--ivory);text-decoration:underline;text-underline-offset:3px}
/* [Q-84] B 화면 이번 주 | 이번 달 탭 · 달력 · 2027 한 줄 카드 · 2027 검색 페이지 */
.wm-tabs{display:flex;gap:7px;margin:18px 0 10px}
.wm-tabs .chip{flex:1;text-align:center}
.mcal h2{margin:0 0 6px}
.mcal .mnote{font-size:12.5px;color:var(--faint);margin:0 0 10px}
.mcal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.mcal-grid .mh{font-size:11px;color:var(--faint);text-align:center;padding:2px 0}
.mcal-grid .md{position:relative;background:var(--hi);border:1px solid var(--line);border-radius:9px;padding:6px 0 11px;min-height:44px;font-size:13.5px;color:var(--ivory);text-align:center;cursor:pointer}
.mcal-grid .md.on{border-color:var(--gold)}
.mcal-grid .md.now b{color:var(--gold)}
.mcal-grid .md .dot{position:absolute;left:50%;bottom:5px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--faint);opacity:.45}
.mcal-grid .md.high .dot{background:var(--gold);opacity:1}
.mcal-grid .md.mid .dot{background:var(--dim);opacity:.9}
.mcal-grid .md .st{position:absolute;right:3px;top:1px;font-size:10px;color:var(--gold)}
.mcal-leg{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--faint);margin:10px 0 0;padding:0;list-style:none}
.mcal-leg .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;background:var(--faint);opacity:.45}
.mcal-leg .high .dot{background:var(--gold);opacity:1} .mcal-leg .mid .dot{background:var(--dim);opacity:.9}
.mcal-pick{margin:10px 0 0;padding:10px 12px;background:var(--card);border:1px solid var(--line);border-radius:11px;font-size:14px}
.mcal-pick b{color:var(--gold);display:block;margin-bottom:3px}
.year-card{margin:18px 0 12px}
.year-card .yh{margin:0 0 8px}
.year-card .yl{margin:0 0 10px;color:var(--ivory);line-height:1.7}
.year-card .yb{margin:0 0 12px;font-size:13.5px}
.year-out{margin:18px 0 6px;padding-top:6px;border-top:1px solid var(--line)}
/* [Q-88] 한국 이름 도구 — 결과는 한 번에 0.25초 페이드(꾸민 대기 없음) */
.fld small{color:var(--faint);font-weight:400}
.kn-out{margin:18px 0 6px;padding-top:6px;border-top:1px solid var(--line);animation:knfade .25s ease-out}
@keyframes knfade{from{opacity:0}to{opacity:1}}
.kn-h{font-size:17px;margin:10px 0 10px}
.kn-steps{list-style:none;margin:0 0 14px;padding:0}
.kn-steps li{padding:9px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.6;color:var(--dim)}
.kn-steps li b{display:block;color:var(--ivory);font-size:14.5px}
.kn-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 14px;margin:0 0 14px}
.kn-name{display:flex;flex-direction:column;gap:2px}
.kn-ko{font-size:38px;font-weight:700;color:var(--ivory);line-height:1.2;word-break:keep-all}
.kn-rr{font-size:17px;color:var(--gold);font-weight:600}
.kn-mean{margin:8px 0 10px;color:var(--dim);font-size:14.5px;font-style:italic}
.kn-btns{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.kn-btns .ghost.sm[hidden]{display:none}
.kn-why-h{font-size:14px;color:var(--faint);margin:12px 0 6px}
.kn-why{list-style:none;margin:0;padding:0}
.kn-why li{padding:8px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.65;color:var(--dim)}
.kn-why li b{display:block;color:var(--ivory);font-size:13px;margin-bottom:1px}
.kn-chart{width:100%;table-layout:fixed;border-collapse:collapse;text-align:center;margin:0 0 6px}
.kn-chart th{font-size:12px;color:var(--faint);font-weight:400;padding:4px 0}
.kn-chart td{padding:6px 2px;border:1px solid var(--line);background:var(--hi)}
.kn-chart .h{display:block;font-size:24px;color:var(--ivory);line-height:1.3}
.kn-chart td small{display:block;font-size:11px;color:var(--faint)}
.kn-note,.kn-six{margin:6px 0}

/* ============ [Q-97] 새 디자인 ① — 태어난 시각 선택칸(A·D) · 홈(A) · 점 로딩 ============
 * 시안 = assets/사주패스_히어로시안_1017/시안소스(홈 · 로딩) · 홈만 어두운 바탕(#06050D) · 다른 화면 색·배치는 그대로
 * 장식 한자 = 시스템 명조 글꼴(새로 받는 글꼴 0) · 움직임 줄이기 = 모든 모션 0 */
.tsel{display:grid;grid-template-columns:1.6fr 1fr;gap:8px}
.tsel label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--faint)}
.tsel select{font-size:16px;min-height:50px;padding:10px 8px}
.tsel select:disabled{opacity:.5}
.scr-d .tsel{margin-top:9px}

body.home{background:#141428;--cy:#3DF5FF;--gd:#F2C94C;--hz:"Noto Serif KR","Noto Serif CJK KR","Source Han Serif K","Batang","바탕","AppleMyungjo","Songti SC",serif;
  --hud:"Chakra Petch","Segoe UI","Roboto Mono",ui-monospace,monospace}
body.home::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:40;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0,rgba(255,255,255,.028) 1px,transparent 1px,transparent 3px)}   /* 주사선 */
body.home .proto{background:#120F22}
.top.wide{max-width:1160px;padding:12px 20px;gap:12px}
.top.wide .brand-wrap{display:flex;align-items:baseline;gap:10px;min-width:0}
.top.wide .brand{font-size:21px;letter-spacing:.02em;color:var(--gd);white-space:nowrap}
.top.wide .brand-en{font-family:var(--hud);font-size:12px;font-weight:600;letter-spacing:.28em;color:var(--cy)}
.top.wide .lang{align-items:center;gap:6px}
.top.wide .lang .menu-sample{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;color:#C9C6E8;text-decoration:none;font-size:14.5px;white-space:nowrap}
.top.wide .lang button{min-width:46px;min-height:44px;border-radius:2px;font-family:var(--hud);font-weight:600;font-size:13.5px;border-color:#39355F;color:#C9C6E8}
.top.wide .lang button.on{background:var(--cy);border-color:var(--cy);color:#06050D}
.wrap.scr-a{max-width:1160px;padding:4px 20px 48px;overflow:hidden}
.scr-a :is(a,button,summary,select):focus-visible{outline:2px solid var(--cy);outline-offset:2px}

.hm-hero{position:relative;display:flex;flex-wrap:wrap-reverse;align-items:center;gap:48px;padding:20px 0 96px;isolation:isolate}
.hm-main{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:20px;animation:hmRise .8s ease-out both}
.hm-side{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:16px;animation:hmRise .8s ease-out .3s both}
.hm-badges{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.scr-a .hm-badges .badge{margin:0;border-radius:0;border-color:var(--gd);color:var(--gd);padding:6px 14px;font-size:13.5px;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.hm-scan{font-family:var(--hud);font-size:12.5px;letter-spacing:.18em;color:var(--cy);white-space:nowrap}
.hm-type{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;max-width:30ch;animation:hmType 2.2s steps(20) .5s both}
.hm-caret{animation:hmBlink 1s steps(1) infinite}
.scr-a h1.hm-title{position:relative;margin:0;font-size:clamp(40px,6vw,70px);line-height:1.12;font-weight:700;letter-spacing:-.02em;color:#F4F2FF;max-width:9.5em}
.hm-title::before,.hm-title::after{content:attr(data-t);position:absolute;left:0;top:0;width:100%;mix-blend-mode:screen;pointer-events:none;animation:hmGlitch 5s steps(1) infinite}
.hm-title::before{color:var(--cy)}
.hm-title::after{color:#FF3D9A;animation-delay:.12s}
.scr-a .lead{margin:0;font-size:18px;line-height:1.6;color:#B9B5DA}
.hm-box{position:relative;background:rgba(14,12,32,.82);border:1px solid rgba(61,245,255,.22);padding:22px;display:flex;flex-direction:column;gap:12px;animation:hmRise .8s ease-out .15s both}
.hm-cn{position:absolute;width:16px;height:16px;border:0 solid var(--cy)}
.hm-cn.tl{left:-1px;top:-1px;border-left-width:2px;border-top-width:2px}
.hm-cn.tr{right:-1px;top:-1px;border-right-width:2px;border-top-width:2px}
.hm-cn.bl{left:-1px;bottom:-1px;border-left-width:2px;border-bottom-width:2px}
.hm-cn.br{right:-1px;bottom:-1px;border-right-width:2px;border-bottom-width:2px}
.hm-box>.fld{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 10px;margin:0}
.hm-box>.fld>span{margin:0;font-size:14.5px;color:#C9C6E8}
.hm-box>.fld>.calrow{margin:0;justify-content:flex-end}
.hm-box>.fld>.dsel{grid-column:1/-1}
.hm-box .chip{border-radius:2px;background:transparent;border-color:#39355F;color:#B9B5DA;min-height:40px}
.hm-box .chip.on{border-color:var(--cy);background:rgba(61,245,255,.14);color:var(--cy)}
.hm-box .inp{background:#0B0A1A;border-color:#2F2B58;border-radius:2px}
.hm-box .inp:focus{outline-color:var(--cy)}
.hm-box .err{margin:0}
.scr-a .hm-box .cta{margin:2px 0 0;border-radius:0;background:var(--gd);color:#170F00;font-size:18px;padding:17px 16px;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);animation:hmGlow 2.8s ease-in-out infinite}
.scr-a .hm-box .cta:hover{filter:brightness(1.08)}
.hm-box .more{margin:0;background:transparent;border-color:#2A2650;border-radius:0;padding:0 14px}
.hm-box .more summary{padding:13px 0;color:#C9C6E8;min-height:44px;box-sizing:border-box}
.hm-box .more[open] summary{margin-bottom:4px}
.hm-box .more .fld>span{color:#8F8BB5}
.hm-box .fine{margin:0;color:#8F8BB5}
.hm-paid{display:flex;align-items:center;gap:14px;min-height:66px;padding:10px 18px 10px 10px;border:1px solid rgba(242,201,76,.55);background:rgba(19,17,43,.72);
  text-decoration:none;color:#F4F2FF;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);animation:hmRise .8s ease-out .3s both}
.hm-paid:hover{border-color:var(--gd);background:rgba(30,26,60,.8)}
.hm-paid>svg{flex:none;color:var(--gd)}
.hm-face{position:relative;width:46px;height:46px;border-radius:50%;overflow:hidden;border:1px solid rgba(242,201,76,.7);flex:none}
.hm-face img{position:absolute;width:230px;height:auto;left:-92px;top:-42px;max-width:none}
.hm-paid-t{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.hm-paid-t b{font-size:17px;color:var(--gd)}
.hm-paid-t span{font-size:13px;color:#B9B5DA;line-height:1.45}
/* [Q-106] 유료 꼬리표(무료 딱지 .ft-free 와 같은 크기 · 금색) · 홈 = 무료 버튼 바로 아래 · B = 오늘의 한 줄 아래·맨 아래 */
.hm-paid{position:relative}
.hm-paid-tag{position:absolute;top:6px;right:8px;font-size:12px;font-weight:700;line-height:1.5;color:#06050D;background:var(--gd);padding:2px 8px}
.hm-box .hm-paid{margin:2px 0 0}
.scr-b .hm-paid{margin:20px 0}
.r-price{display:flex;flex-direction:column;gap:3px;margin:10px 0 4px}   /* [Q-106 ②] R 맨 위 가격 줄 */
.r-price b{font-size:18px;color:var(--gd)}
.r-price span{font-size:13.5px;color:#B9B5DA}
.hm-vis{position:relative;width:400px;max-width:100%;aspect-ratio:4/5}
.hm-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:transparent;
  -webkit-mask-image:radial-gradient(ellipse 66% 70% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 66% 70% at 50% 50%,#000 62%,transparent 100%)}
.hm-hud{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;font-family:var(--hud);font-size:12px;letter-spacing:.16em;color:#8F8BB5}
.hm-hud b{color:#EDEBFF;font-weight:600}
.hm-floor{position:absolute;left:-30%;right:-30%;bottom:-40px;height:300px;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(61,245,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(61,245,255,.16) 1px,transparent 1px);background-size:48px 48px;
  transform:perspective(380px) rotateX(64deg);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(to top,#000 30%,transparent);mask-image:linear-gradient(to top,#000 30%,transparent);
  animation:hmGrid 2.4s linear infinite}
.hm-tick{position:relative;margin:0 -20px;border-top:1px solid rgba(61,245,255,.25);border-bottom:1px solid rgba(61,245,255,.25);background:#0A0918;overflow:hidden;padding:13px 0;pointer-events:none}
.hm-tick-in{display:flex;width:max-content;gap:44px;font-family:var(--hud);font-size:15px;font-weight:600;letter-spacing:.2em;white-space:nowrap;animation:hmTicker 26s linear infinite}

/* 무료 도구 카드 (홈) — 목록 꼴(B·안내 화면)은 위 .free-tools 그대로 */
.free-tools.ft-cards{border-top:0;margin:0;padding:72px 0 8px}
.ft-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 24px}
.free-tools.ft-cards h2{margin:0;font-size:clamp(28px,4vw,38px);font-weight:700;color:#F4F2FF}
.ft-always{display:inline-block;border:1px solid var(--cy);color:var(--cy);padding:5px 12px;font-size:14px;font-weight:600;box-shadow:0 0 14px rgba(61,245,255,.3);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.ft-hud{font-family:var(--hud);font-size:12px;letter-spacing:.26em;color:#8F8BB5}
.free-tools.ft-cards ul.ft-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.free-tools.ft-cards li{font-size:inherit;min-width:0}
.free-tools.ft-cards a.ft-card{--c:61,245,255;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:22px;height:100%;box-sizing:border-box;
  padding:24px 22px 20px;min-height:250px;border:1px solid rgba(var(--c),.45);background:linear-gradient(160deg,rgba(var(--c),.10),rgba(14,12,32,.85) 55%);
  box-shadow:0 0 0 1px rgba(var(--c),.08),0 0 34px rgba(var(--c),.10) inset;text-decoration:none;color:#EDEBFF;
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);transition:transform .25s ease,filter .25s ease}
.free-tools.ft-cards a.ft-card.c2{--c:242,201,76}.free-tools.ft-cards a.ft-card.c3{--c:74,222,128}.free-tools.ft-cards a.ft-card.c4{--c:255,107,139}.free-tools.ft-cards a.ft-card.c5{--c:230,232,242}
.free-tools.ft-cards a.ft-card:hover{transform:translateY(-4px);filter:brightness(1.12)}
.ft-bar{position:absolute;left:0;right:0;top:0;height:3px;background:rgb(var(--c));box-shadow:0 0 14px rgb(var(--c))}
.ft-hz{position:absolute;right:-6px;bottom:-28px;font-family:var(--hz);font-weight:900;font-size:160px;line-height:1;color:rgb(var(--c));opacity:.13;pointer-events:none}
.ft-sweep{position:absolute;top:0;bottom:0;left:-45%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.08),transparent);animation:hmSweep 6s ease-in-out var(--d) infinite;pointer-events:none}
.ft-top,.ft-bot{position:relative;display:flex;justify-content:space-between;gap:12px}
.ft-top{align-items:flex-start}.ft-bot{align-items:flex-end}
.ft-ic{display:flex;align-items:center;justify-content:center;width:62px;height:62px;border:1px solid rgba(var(--c),.6);background:rgba(var(--c),.10);
  box-shadow:0 0 22px rgba(var(--c),.35);color:rgb(var(--c));animation:hmBob 3.4s ease-in-out var(--d) infinite}
.ft-tag{font-family:var(--hud);font-size:11px;letter-spacing:.22em;color:#8F8BB5;text-align:right}
.ft-txt{display:flex;flex-direction:column;gap:9px;min-width:0}
.ft-free{align-self:flex-start;font-size:12px;font-weight:700;color:#06050D;background:rgb(var(--c));padding:2px 8px}
.ft-name{font-size:23px;font-weight:700;line-height:1.3;color:#F4F2FF}
.ft-go{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border:1px solid rgba(var(--c),.6);color:rgb(var(--c))}
.scr-a .manse-link{margin:14px 0 0;font-size:14px}
.scr-a .manse-link .link{color:#9FFBFF;font-size:14px;display:inline-block;padding:10px 0}

/* 인생 전체 사주 칸 (홈) — 한복 안내자 + 표지 카드 */
.hm-report{display:flex;flex-wrap:wrap;align-items:center;gap:40px;padding:56px 0 24px}
.hm-rp-txt{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:18px}
.hm-eye{font-family:var(--hud);font-size:12px;letter-spacing:.26em;color:var(--cy)}
.hm-rp-txt h2{margin:0;font-size:clamp(28px,4vw,42px);line-height:1.2;font-weight:700;color:#F4F2FF}
.hm-rp-txt p{margin:0;font-size:17px;line-height:1.7;color:#B9B5DA}
.hm-sample{align-self:flex-start;display:inline-flex;align-items:center;min-height:52px;padding:0 22px;border:1px solid var(--cy);color:var(--cy);font-size:16.5px;font-weight:600;text-decoration:none;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.hm-sample:hover{background:rgba(61,245,255,.08);color:#9FFBFF}
.hm-rp-vis{flex:1 1 320px;min-width:0;position:relative;max-width:400px;aspect-ratio:4/5;margin:0 auto}
.hm-rp-vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:radial-gradient(ellipse 64% 68% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 64% 68% at 50% 50%,#000 60%,transparent 100%)}
.hm-cover{position:absolute;right:0;bottom:8%;width:164px;height:212px;box-sizing:border-box;padding:16px;display:flex;flex-direction:column;justify-content:space-between;
  border:1px solid rgba(242,201,76,.7);background:rgba(19,17,43,.9);box-shadow:0 0 40px rgba(242,201,76,.18);animation:hmFloat 5.5s ease-in-out infinite}
.hm-cv-top{display:flex;justify-content:space-between;font-family:var(--hud);font-size:10.5px;letter-spacing:.2em;color:#8F8BB5}
.hm-cv-mid{display:flex;flex-direction:column;gap:6px}
.hm-cv-hz{font-family:var(--hz);font-weight:900;font-size:40px;line-height:1;color:var(--gd);text-shadow:0 0 16px rgba(242,201,76,.45)}
.hm-cv-mid b{font-size:15px;color:#F4F2FF;line-height:1.35}
.hm-cv-bot{display:flex;flex-direction:column;gap:6px;font-family:var(--hud);font-size:10.5px;letter-spacing:.2em;color:var(--cy)}
.hm-cv-bar{height:3px;background:#2A2650}
.hm-cv-bar i{display:block;height:3px;width:62%;background:var(--cy);box-shadow:0 0 10px var(--cy);animation:hmPulse 2.6s ease-in-out infinite}
body.home .site-foot{max-width:1160px;border-top-color:#1E1B3D;color:#8F8BB5}

@keyframes hmRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes hmType{from{max-width:0}to{max-width:30ch}}
@keyframes hmBlink{50%{opacity:0}}
@keyframes hmGlitch{0%,90%,100%{clip-path:inset(0 0 100% 0);transform:none}91%{clip-path:inset(8% 0 62% 0);transform:translate(-4px,0)}93%{clip-path:inset(54% 0 18% 0);transform:translate(4px,0)}95%{clip-path:inset(30% 0 44% 0);transform:translate(-2px,0)}97%{clip-path:inset(70% 0 6% 0);transform:translate(3px,0)}}
@keyframes hmGlow{0%,100%{box-shadow:0 0 0 1px rgba(242,201,76,.55),0 0 18px rgba(242,201,76,.25)}50%{box-shadow:0 0 0 1px rgba(242,201,76,.95),0 0 34px rgba(242,201,76,.5)}}
@keyframes hmGrid{from{background-position:0 0}to{background-position:0 48px}}
@keyframes hmTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes hmSweep{0%,70%{left:-45%}100%{left:120%}}
@keyframes hmBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes hmFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes hmPulse{0%,100%{opacity:.45}50%{opacity:1}}

/* 점 로딩 — 화면 전체를 덮었다가 걷힌다(아래에는 이미 결과가 그려져 있다) */
.ld{position:fixed;inset:0;z-index:60;background:#141428;color:#EDEBFF;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:16px;transition:opacity .26s ease}
.ld.out{opacity:0}
.ld-cv{display:block;max-width:100%}
.ld-txt{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;max-width:360px}
.ld-hud{font-family:"Chakra Petch","Segoe UI","Roboto Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.26em;color:#8F8BB5}
.ld-msg{margin:0;min-height:56px;font-size:19px;line-height:1.5;font-weight:500;color:#F4F2FF}
.ld-bar{display:block;width:220px;height:3px;background:#1E1B3D}
.ld-bar i{display:block;height:3px;width:0;background:#3DF5FF;box-shadow:0 0 10px #3DF5FF;transition:width .9s linear}

@media (max-width:600px){
  .top.wide{padding:8px 16px;gap:8px}
  .top.wide .brand-en{display:none}
  .top.wide .brand{font-size:19px}
  .top.wide .lang{gap:4px}
  .top.wide .lang .menu-sample{padding:0 6px;font-size:14px}
  .wrap.scr-a{padding:0 16px 40px}
  .hm-hero{gap:12px;padding:0 0 64px}
  .hm-main{gap:13px}
  .hm-side{gap:0}
  .hm-vis{width:100%;aspect-ratio:auto;height:230px}
  .hm-video{object-position:50% 62%}
  .hm-hud{display:none}
  .hm-scan{font-size:11px;letter-spacing:.14em}
  .scr-a h1.hm-title{font-size:34px;max-width:none}
  .scr-a .lead{font-size:16px;line-height:1.55}
  .hm-box{padding:16px;gap:10px}
  .hm-box .dsel select{min-height:50px}
  .scr-a .hm-box .cta{padding:15px 14px;font-size:17.5px}
  .free-tools.ft-cards{padding-top:48px}
  .ft-head{margin-bottom:18px}
  .free-tools.ft-cards ul.ft-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .free-tools.ft-cards ul.ft-grid.n5 li:last-child{grid-column:1/-1}
  .free-tools.ft-cards a.ft-card{min-height:184px;padding:16px 12px 12px;gap:12px}
  .ft-name{font-size:16px}
  .ft-hz{font-size:104px;bottom:-14px}
  .ft-tag{display:none}
  .ft-ic{width:46px;height:46px}.ft-ic svg{width:26px;height:26px}
  .ft-go{width:34px;height:34px}
  .hm-report{gap:24px;padding-top:40px}
  .hm-cover{width:146px;height:190px;padding:13px}
}
@media (prefers-reduced-motion:reduce){
  .scr-a *,.scr-a *::before,.scr-a *::after,.ld,.ld *{animation:none!important;transition:none!important}
  .hm-type{max-width:none}
  .hm-title::before,.hm-title::after{display:none}
}

/* ============ [Q-98] 새 디자인 ② — 홈 밖 화면 사이버 틀(body.cy) · 결과 B·C 모션 · 안내자 얼굴 · 문의하기 · 다시 받기 · FAQ ============
 * 시안 = assets/사주패스_히어로시안_1017/시안소스/시안_결과_Result · ★전부 화면(@media screen)에만★ — 인쇄·서버 PDF 꼴은 그대로
 * 리포트 본문(.report)은 고르지 않는다(G 는 머리줄·문의·다시 받기만) · 모션 = 처음 1번만 · 움직임 줄이기 = 0 */
@media screen{
body.cy{background:#141428;--cy:#3DF5FF;--gd:#F2C94C;--hz:"Noto Serif KR","Noto Serif CJK KR","Source Han Serif K","Batang","바탕","AppleMyungjo","Songti SC",serif;
  --hud:"Chakra Petch","Segoe UI","Roboto Mono",ui-monospace,monospace}
body.cy.rep{background:#141428}   /* [Q-99 ①] 리포트 화면(G)·예시 리포트 = Q-98 전 남색 */
body.cy::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:40;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0,rgba(255,255,255,.028) 1px,transparent 1px,transparent 3px)}   /* 주사선 */
body.cy .proto{background:#120F22}
body.cy .top{gap:8px}
body.cy .top .brand{color:var(--gd);font-size:17px;letter-spacing:.02em;white-space:nowrap}
body.cy .top .back{display:inline-flex;align-items:center;min-height:44px;color:#C9C6E8;font-size:14px}
body.cy .top .lang{gap:4px}
body.cy .top .lang .menu-sample{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:#C9C6E8;font-size:13px}
body.cy .top .lang button{min-width:44px;min-height:44px;border-radius:2px;font-family:var(--hud);font-weight:600;font-size:13px;border-color:#39355F;color:#C9C6E8}
body.cy .top .lang button.on{background:var(--cy);border-color:var(--cy);color:#06050D}
body.cy .top .alt-lang{display:inline-flex;align-items:center;min-height:44px;color:#9FFBFF}
body.cy .wrap:not(.scr-g) :is(a,button,summary,select,input,textarea):focus-visible{outline:2px solid var(--cy);outline-offset:2px}
body.cy .wrap:not(.scr-g) h1{color:#F4F2FF}
body.cy .wrap:not(.scr-g) h2.sec{font-family:var(--hud);letter-spacing:.2em;color:#8F8BB5}
body.cy .wrap:not(.scr-g) .lead{color:#B9B5DA}
body.cy .wrap:not(.scr-g) .badge{border-radius:0;border-color:var(--gd);color:var(--gd);padding:5px 12px;font-size:13px;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
body.cy .wrap:not(.scr-g) :is(.card,.pair>div,.area,.iljin>div,.flow3 li,.notice,.chk,.qq,.cn-card,.more,.bridge,.mcal-pick,.kwi,.week li.now){border-radius:2px;background:rgba(14,12,32,.82);border-color:#2A2650}
body.cy .wrap:not(.scr-g) .notice.warn{border-color:var(--gd)}
body.cy .wrap:not(.scr-g) :is(.chip,.opt,.mcal-grid .md){border-radius:2px;background:transparent;border-color:#39355F;color:#C9C6E8}
body.cy .wrap:not(.scr-g) :is(.chip.on,.opt.on,.cn-card.on,.mcal-grid .md.on){border-color:var(--cy);background:rgba(61,245,255,.12);color:var(--cy)}
body.cy .wrap:not(.scr-g) .inp{background:#0B0A1A;border-color:#2F2B58;border-radius:2px}
body.cy .wrap:not(.scr-g) .inp:focus{outline-color:var(--cy)}
body.cy .wrap:not(.scr-g) .cta{border-radius:0;background:var(--gd);color:#170F00;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);box-shadow:0 0 0 1px rgba(242,201,76,.55),0 0 18px rgba(242,201,76,.25)}
body.cy .wrap:not(.scr-g) .ghost,body.cy .scr-g .rhead .ghost{border-radius:0;border-color:var(--cy);color:#9FFBFF;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
body.cy .wrap:not(.scr-g) .peek{border-radius:2px;background:linear-gradient(160deg,rgba(242,201,76,.10),rgba(14,12,32,.88) 55%);border-color:rgba(242,201,76,.45)}
body.cy .wrap:not(.scr-g) .peek .pk-go{border-radius:0;background:var(--gd);color:#170F00}
body.cy .wrap:not(.scr-g) .share-card{border-radius:2px;background:linear-gradient(160deg,rgba(61,245,255,.08),rgba(14,12,32,.9) 55%);border-color:rgba(61,245,255,.45)}
body.cy .wrap:not(.scr-g) .bt{background:#1A1835;border-radius:0}
body.cy .wrap:not(.scr-g) .bt i{border-radius:0}
body.cy .wrap:not(.scr-g) :is(.toc li,.week li){border-bottom-color:#1E1B3D}
body.cy .wrap:not(.scr-g) .tocbox summary.tocbtn{border-radius:0;border-color:#39355F}
body.cy .wrap:not(.scr-g) .spin{border-color:#1E1B3D;border-top-color:var(--cy)}
body.cy .scr-g .rhead{border-radius:2px;background:rgba(14,12,32,.82);border-color:rgba(61,245,255,.22)}
body.cy .site-foot{border-top-color:#1E1B3D;color:#8F8BB5}

/* 안내자 얼굴 — 확정 그림(1080×1350)을 원 안에 잘라 보인다 · --s = 지름 · 고양이 = 무료(시안) · 한복 = 유료(금) */
.gd-face{--s:44px;position:relative;display:inline-block;width:var(--s);height:var(--s);border-radius:50%;overflow:hidden;flex:none;vertical-align:middle;background:#0B0A1A}
.gd-face img{position:absolute;max-width:none;height:auto}
.gd-face.cat{border:1px solid rgba(61,245,255,.7);box-shadow:0 0 12px rgba(61,245,255,.3)}
.gd-face.cat img{width:calc(var(--s) * 4.45);left:calc(var(--s) * -1.66);top:calc(var(--s) * -1.56)}
.gd-face.hb{border:1px solid rgba(242,201,76,.7);box-shadow:0 0 12px rgba(242,201,76,.25)}
.gd-face.hb img{width:calc(var(--s) * 5);left:calc(var(--s) * -2);top:calc(var(--s) * -0.91)}
.gd-top{display:flex;align-items:center;gap:12px;margin:14px 0 6px}
.gd-top h1{margin:0}
.wrap .hero .gd-top{margin:0}
.scr-b .b-badge{position:relative;margin-left:46px;clip-path:none!important}
.scr-b .b-badge .gd-face{--s:38px;position:absolute;left:-46px;top:50%;margin-top:-19px}
.top-face{display:flex;justify-content:flex-end;min-width:44px}
.top-face .gd-face{--s:36px}

/* 결과 B·C — 링 · 오늘의 한 줄 · 게이지 · 신호 칸 · 오행 막대 · 타임라인 */
.ring{position:relative;display:block;width:76px;height:76px;margin:8px auto 6px}
.ring .ring-d{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(61,245,255,.6);animation:cySpin 2.4s cubic-bezier(.2,.8,.2,1) .2s 1 both}
.ring .ring-i{position:absolute;inset:8px;border-radius:50%;border:1px solid rgba(61,245,255,.2)}
.ring .ring-hz{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--hz);font-weight:900;font-size:26px;color:var(--cy);text-shadow:0 0 14px rgba(61,245,255,.6)}
.ring.gd .ring-d{border-color:rgba(242,201,76,.6)}
.ring.gd .ring-i{border-color:rgba(242,201,76,.2)}
.ring.gd .ring-hz{font-size:32px;color:#E6E8F2;text-shadow:0 0 14px rgba(230,232,242,.5)}
.scr-c .hero .ring{margin:8px 0 6px}
body.cy .iljin>div{position:relative;overflow:hidden;animation:cyRise .7s ease-out both}
body.cy .iljin>div.ij-c{border-color:rgba(61,245,255,.3)}
body.cy .iljin>div.ij-m{border-color:rgba(242,201,76,.35);animation-delay:.12s}
body.cy .iljin>div>b{color:var(--gd)}
.scr-b .hero .hud{display:block;font-family:var(--hud);font-size:11px;letter-spacing:.26em;color:var(--cy);margin-bottom:2px}
body.cy .scr-b .hero{animation:cyRise .7s ease-out .24s both}
body.cy .scr-b .hero h1{font-size:38px;line-height:1.15;color:var(--gd);text-shadow:0 0 22px rgba(242,201,76,.35)}
body.cy .scr-c .hero h1{color:var(--gd);text-shadow:0 0 18px rgba(242,201,76,.3)}
.total .score{display:grid;grid-template-columns:124px minmax(0,1fr);grid-template-rows:auto auto;column-gap:16px;align-items:center;border:1px solid #2A2650;background:rgba(14,12,32,.7);padding:14px;margin:0 0 12px}
.total .score .gauge{grid-column:1;grid-row:1/3;width:124px;height:124px;transform:rotate(-90deg)}
.gauge circle{fill:none;stroke-width:8}
.gauge .g-bg{stroke:#1E1B3D}
.gauge .g-fg{stroke:var(--cy,#3DF5FF);filter:drop-shadow(0 0 6px #3DF5FF);animation:cyDraw 1.6s cubic-bezier(.2,.8,.2,1) .3s both}
.total .score b{grid-column:1;grid-row:1/3;justify-self:center;align-self:center;margin-top:-14px;font-family:var(--hud);font-size:38px;line-height:1;color:#F4F2FF}
.total .score .of{grid-column:1;grid-row:1/3;justify-self:center;align-self:center;margin-top:34px;font-family:var(--hud);font-size:12px;color:#8F8BB5}
.total .score .k{grid-column:2;grid-row:1;align-self:end;margin:0;font-size:16px;font-weight:700;letter-spacing:0;color:#EDEBFF}
.total .score p.snote{grid-column:2;grid-row:2;align-self:start;margin:6px 0 0;font-size:13px;color:#B9B5DA}
.stars.sig{display:inline-flex;align-items:center;gap:3px;margin-left:8px;vertical-align:middle;letter-spacing:0}
.stars.sig .sg-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.stars.sig .sg{display:block;width:14px;height:10px;background:#1E1B3D}
.stars.sig .sg.on{background:var(--cy,#3DF5FF);box-shadow:0 0 6px rgba(61,245,255,.7);transform-origin:left center;animation:cyGrow .5s cubic-bezier(.2,.8,.2,1) calc(.4s + var(--i) * .08s) both}
.bar.e0{--ec:#4ADE80}.bar.e1{--ec:#FF5A5F}.bar.e2{--ec:#F2C94C}.bar.e3{--ec:#E6E8F2}.bar.e4{--ec:#3D8BFF}
.bar[class*=" e"] .bt i{background:var(--ec);box-shadow:0 0 8px var(--ec);transform-origin:left center;animation:cyGrow 1.1s cubic-bezier(.2,.8,.2,1) .4s both}
.flow3 ul.tl{position:relative;padding-left:20px}
.flow3 ul.tl::before{content:"";position:absolute;left:5px;top:12px;bottom:14px;width:1px;background:rgba(61,245,255,.35)}
.flow3 ul.tl li{position:relative}
.flow3 .fdot{position:absolute;left:-20px;top:15px;width:11px;height:11px;border-radius:50%;background:#6E6A96}
.flow3 li.fit .fdot{background:var(--cy,#3DF5FF);box-shadow:0 0 10px #3DF5FF;animation:cyPulse 1.4s ease-in-out .6s 1 both}
body.cy .flow3 li.fit{border-color:rgba(242,201,76,.55)}

/* 문의하기 · 메일 다시 받기 */
.contact{display:flex;flex-direction:column;align-items:center;gap:6px;margin:24px 0 6px;text-align:center}
.contact-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:160px;padding:0 22px;border:1px solid #3DF5FF;color:#9FFBFF;font-weight:600;text-decoration:none;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.contact-btn:hover{background:rgba(61,245,255,.08)}
.contact-sub{font-size:12.5px;color:#8F8BB5}
.resend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px;margin:10px 0}
.resend .ghost.sm{min-height:44px}
.resend .rs-msg{margin:0;font-size:13.5px}
.scr-g .resend{justify-content:flex-start}

/* 자주 묻는 질문 (정적 페이지) */
.faq-list{margin:6px 0 10px}
.faq-q{border:1px solid #2A2650;background:rgba(14,12,32,.82);margin:0 0 10px;padding:0 14px}
.faq-q summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:12px 0;cursor:pointer;font-weight:600;color:#F4F2FF}
.faq-q summary::-webkit-details-marker{display:none}
.faq-q summary::after{content:"+";font-family:var(--hud);font-size:18px;color:var(--cy,#3DF5FF);flex:none}
.faq-q[open] summary::after{content:"−"}
.faq-q[open]{border-color:rgba(61,245,255,.35)}
.faq-a{margin:0 0 14px;line-height:1.75;color:#C9C6E8}
.faq-a .lnk{color:#9FFBFF}
body.cy .seo-page .seo-body{border-top-color:#1E1B3D}

@keyframes cySpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes cyDraw{from{stroke-dashoffset:326.73}}
@keyframes cyGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cyPulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes cyRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}
@media screen and (max-width:380px){
  .total .score{grid-template-columns:104px minmax(0,1fr);column-gap:12px}
  .total .score .gauge{width:104px;height:104px}
  .total .score b{font-size:32px}
}
@media (prefers-reduced-motion:reduce){
  body.cy *,body.cy *::before,body.cy *::after{animation:none!important;transition:none!important}
}
@media print{
  .contact,.resend,.gd-face,.top-face{display:none!important}
}