/* Layout: 모바일 한 컬럼(최대 440px) 앱 셸. 캐릭터 없이 테스트별 썸네일 이미지가 얼굴 역할. 뼈대(카드·진행바·결과 레이아웃)는 공통, 테마(아이돌·사랑·궁합·공포·사주)가 배경·폰트·모서리·장식을 바꾸고, 테스트별 --t가 포인트 컬러를 정한다. */
:root{
  --bg:#F1F2F4; --card:#FFFFFF; --ink:#16171B; --muted:#6A6D78; --line:#E1E3E8; --chip:#E8EAEE;
  --villain:#8B3A62; --tee:#1E6A86; --love:#D9503F; --idol:#C93C86; --fave:#3552C9; --soon:#9A9DA6;
  --display:"Do Hyeon","Noto Sans KR",system-ui,sans-serif;
  --body:"Noto Sans KR",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --r:18px; --r2:22px; --rb:14px; --ro:14px; --dw:400; --ds:1; --decor:none;
  --horror:#C2201F; --match:#0E8C76; --match2:#E2663F; --saju:#B3261E; --ohaeng:#2F7A55;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#111215; --card:#1B1C21; --ink:#ECEDF1; --muted:#9A9DA8; --line:#2A2C33; --chip:#25272D;
  --villain:#C4709A; --tee:#4FA3C2; --love:#F07A6A; --idol:#EE80B6; --fave:#8DA0FF; --soon:#6B6E77; --horror:#E0403A; --match:#3FD1B4; --match2:#FF9A7A; --saju:#E0533F; --ohaeng:#5FBF8A; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#111215; --card:#1B1C21; --ink:#ECEDF1; --muted:#9A9DA8; --line:#2A2C33; --chip:#25272D;
  --villain:#C4709A; --tee:#4FA3C2; --love:#F07A6A; --idol:#EE80B6; --fave:#8DA0FF; --soon:#6B6E77; --horror:#E0403A; --match:#3FD1B4; --match2:#FF9A7A; --saju:#E0533F; --ohaeng:#5FBF8A; color-scheme:dark}

*{box-sizing:border-box}
body{background-color:var(--bg);background-image:var(--decor);background-attachment:fixed;color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.6;padding-inline:16px;padding-block:0 40px}
.app{max-width:440px;margin:0 auto}
.t-villain{--t:var(--villain)} .t-tee{--t:var(--tee)} .t-love{--t:var(--love)} .t-debut{--t:var(--idol)} .t-fave{--t:var(--fave)} .t-soon{--t:var(--soon)} .t-horror{--t:var(--horror)} .t-match{--t:var(--match);--t2:var(--match2)} .t-saju{--t:var(--saju)}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:3px solid var(--t,var(--ink));outline-offset:2px}

/* 공통 헤더 */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:14px 10px}
.brand{font-family:var(--display);font-size:24px;letter-spacing:-.5px;background:none;border:0;padding:0}
.brand img{height:30px;width:auto;display:block}
.hero-logo{margin:4px 0 0}
.hero-logo img{width:100%;max-width:420px;height:auto;display:block;margin:0 auto}
.hero p{text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lg-dark{display:none!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lg-light{display:none!important}:root:not([data-theme="light"]) .lg-dark{display:block!important}}
:root[data-theme="dark"] .lg-light{display:none!important}
:root[data-theme="dark"] .lg-dark{display:block!important}
body.th-horror .lg-light,body.th-night .lg-light{display:none!important}
body.th-horror .lg-dark,body.th-night .lg-dark{display:block!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.th-saju .lg-light,:root:not([data-theme="light"]) body.th-love .lg-light{display:none!important}}
.path-unused{font-family:var(--mono);font-size:11px;color:var(--muted);background:var(--chip);padding:4px 8px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* 홈 */
.hero{padding-block:18px 8px}
.hero h1{font-family:var(--display);font-weight:400;font-size:34px;line-height:1.15;margin:0;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--villain)}
.hero p{color:var(--muted);margin:8px 0 0}
.chips{display:flex;gap:8px;overflow-x:auto;padding-block:14px;scrollbar-width:none}
.chip{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:6px 14px;font-size:13px;white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.sec-h{font-family:var(--display);font-weight:400;font-size:20px;margin:18px 0 10px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:0;text-align:left;overflow:hidden;display:flex;flex-direction:column}
.tcard .art{background:color-mix(in srgb,var(--t) 14%,var(--card));aspect-ratio:1/0.8;display:grid;place-items:center;max-width:100%}
.tcard .art svg{width:62%}
.tcard .meta{padding:10px 12px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.tcard .cat{font-size:11px;color:var(--t);font-weight:700;letter-spacing:.04em}
.tcard .name{font-family:var(--display);font-size:18px;line-height:1.25}
.tcard .sub{font-size:12px;color:var(--muted)}
.tcard.wide{grid-column:1/-1;flex-direction:row}
.tcard.wide .art{aspect-ratio:auto;width:42%;padding:14px}
.tcard.wide .meta{justify-content:center;flex:1}
.tcard .art.thumb{padding:0;display:block;overflow:hidden}
.tcard .art.thumb svg,.tcard .art.thumb img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .35s}
.tcard:hover .art.thumb svg,.tcard:hover .art.thumb img{transform:scale(1.04)}
.tcard.wide .art.thumb{width:46%;aspect-ratio:1/0.8;padding:0}
.intro-thumb{margin:16px -20px;aspect-ratio:16/10;overflow:hidden;max-width:none}
.intro-thumb svg,.intro-thumb img{width:100%;height:100%;display:block;object-fit:cover}
@media (prefers-reduced-motion:reduce){.tcard .art.thumb svg,.tcard .art.thumb img{transition:none}}
.tcard[disabled]{cursor:default;opacity:.62}
.badge{display:inline-block;font-size:10px;font-weight:700;background:var(--chip);color:var(--muted);padding:1px 6px;border-radius:4px;margin-top:4px;width:max-content}

/* 테스트 공통 */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:24px 20px;margin-top:6px}
.eyebrow{font-family:var(--mono);font-size:11px;color:var(--t);letter-spacing:.06em}
.big-title{font-family:var(--display);font-weight:var(--dw);font-size:32px;line-height:1.15;margin:6px 0 0;text-wrap:balance}
.big-title span{color:var(--t)}
.hook{color:var(--muted);margin:6px 0 0}
.intro-art{display:grid;place-items:center;padding-block:16px}
.intro-art svg{width:min(180px,55%)}
.facts{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.facts span{font-size:12px;background:var(--chip);border-radius:999px;padding:3px 10px;color:var(--muted)}
.btn{display:block;width:100%;border:0;border-radius:var(--rb);padding:16px;font-weight:700;font-size:16px;background:var(--t);color:#fff}
.btn.ghost{background:var(--chip);color:var(--ink)}
.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.btn-row .btn,.share .btn{font-size:14px;padding:15px 8px;word-break:keep-all}

.prog{display:flex;align-items:center;gap:10px;margin:6px 0 18px}
.bar{flex:1;height:8px;background:var(--chip);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--t);border-radius:99px;transition:width .3s}
.count{font-family:var(--mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.back{background:none;border:0;color:var(--muted);font-size:13px;padding:4px 0}
.q{font-family:var(--display);font-weight:var(--dw);font-size:25px;line-height:1.3;margin:0 0 22px;min-height:66px;text-wrap:balance}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{border:1.5px solid var(--line);background:var(--card);border-radius:var(--ro);padding:16px;text-align:left;font-size:15px;line-height:1.45;transition:border-color .15s,background .15s}
.opt:hover{border-color:var(--t)}
.opt.on{border-color:var(--t);background:color-mix(in srgb,var(--t) 12%,var(--card))}

/* 결과 */
.rcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;margin-top:6px}
.rhead{background:color-mix(in srgb,var(--t) 13%,var(--card));padding:20px 20px 16px;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}
.rthumb{width:96px;aspect-ratio:1;border-radius:var(--ro);overflow:hidden;box-shadow:0 6px 18px -8px rgba(0,0,0,.45);transform:rotate(3deg)}
.rthumb img,.rthumb svg{width:100%;height:100%;object-fit:cover;display:block}
.ph{width:100%;height:100%;display:grid;place-items:center;font-family:var(--display);font-size:48px;color:var(--muted);background:repeating-linear-gradient(135deg,var(--chip) 0 10px,transparent 10px 20px)}
.idx-label{font-size:13px;color:var(--muted);font-weight:500}
.idx{font-family:var(--display);font-size:72px;line-height:.95;color:var(--t);font-variant-numeric:tabular-nums}
.idx small{font-size:32px}
.gauge{height:10px;background:var(--chip);border-radius:99px;margin:0 20px;position:relative;top:-5px;overflow:hidden}
.gauge i{display:block;height:100%;background:var(--t)}
.rbody{padding:12px 20px 22px}
.rtype{font-family:var(--display);font-weight:var(--dw);line-height:1.2;font-size:28px;margin:4px 0 0}
.rline{font-weight:700;margin:4px 0 14px;color:var(--t)}
.rdesc{margin:0 0 18px;color:var(--ink)}
.mets{display:grid;gap:10px;border-top:1px dashed var(--line);padding-top:16px}
.met{display:grid;grid-template-columns:72px 1fr 34px;align-items:center;gap:10px;font-size:13px}
.met .bar{height:7px}
.met b{font-family:var(--mono);font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.stamp{font-family:var(--mono);font-size:10px;color:var(--muted);text-align:right;margin-top:14px}
.share{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.kakao{background:#FEE500;color:#191600}
.ad{border:1px dashed var(--line);border-radius:12px;padding:18px;text-align:center;font-size:12px;color:var(--muted);margin-top:16px;font-family:var(--mono)}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:13px;max-width:calc(100% - 32px)}
.match{margin:4px 0 16px;border:1.5px solid var(--t);border-radius:var(--ro);padding:14px 16px;display:grid;gap:4px}
.match .lab{font-size:12px;color:var(--muted)}
.match .grp{font-family:var(--display);font-size:26px;line-height:1.2;color:var(--t)}
.match .more{font-size:13px;color:var(--muted)}
.brag{position:relative;margin-top:14px;background:var(--card);border:1.5px solid var(--t);border-radius:var(--ro);padding:12px 16px 14px}
.brag::after{content:"";position:absolute;left:28px;bottom:-9px;width:14px;height:14px;background:var(--card);border-right:1.5px solid var(--t);border-bottom:1.5px solid var(--t);transform:rotate(45deg)}
.brag .lab{font-size:11px;color:var(--t);font-weight:700;letter-spacing:.04em}
.brag p{margin:2px 0 0;font-weight:700;font-size:16px;line-height:1.45;word-break:keep-all}
.brag + .share{margin-top:18px}
.cnt{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.cnt svg{width:12px;height:12px}
.c-night .newb,.t-star .newb,.t-today .newb{color:#0D1130}
.newb{font-size:10px;font-weight:800;letter-spacing:.06em;color:#fff;background:var(--t);padding:2px 7px;border-radius:999px}
.note{font-size:11px;color:var(--muted);margin-top:10px}
.foot{margin-top:28px;font-size:12px;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap}
.fade{animation:f .25s ease}
@keyframes f{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fade{animation:none}.bar i{transition:none}}
body.th-idol{--bg:#FFF2F9;--card:#FFFFFF;--ink:#2A1630;--muted:#86698B;--line:#F1D3E6;--chip:#FBE3F0;--decor:radial-gradient(circle at 12% 16%,#fff 0 1.6px,transparent 2.6px),radial-gradient(circle at 86% 9%,#fff 0 2.2px,transparent 3.2px),radial-gradient(circle at 74% 44%,#fff 0 1.4px,transparent 2.4px),radial-gradient(circle at 22% 70%,#fff 0 2px,transparent 3px),radial-gradient(circle at 90% 84%,#fff 0 1.6px,transparent 2.6px),linear-gradient(165deg,#FFDDF0 0%,#EFE3FF 55%,#FFF2F9 100%);--display:'Jua','Noto Sans KR',sans-serif;--r:24px;--r2:28px;--rb:999px;--ro:20px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.th-idol{--bg:#190F1D;--card:#25162A;--ink:#F7E8F3;--muted:#B898B6;--line:#3E2742;--chip:#33203A;--decor:radial-gradient(circle at 12% 16%,#ffffffaa 0 1.4px,transparent 2.4px),radial-gradient(circle at 86% 9%,#ffffffcc 0 2px,transparent 3px),radial-gradient(circle at 74% 44%,#ffffff88 0 1.2px,transparent 2.2px),radial-gradient(circle at 22% 70%,#ffffffaa 0 1.8px,transparent 2.8px),linear-gradient(165deg,#2C1233 0%,#1B1332 60%,#190F1D 100%);color-scheme:dark}}
:root[data-theme="dark"] body.th-idol{--bg:#190F1D;--card:#25162A;--ink:#F7E8F3;--muted:#B898B6;--line:#3E2742;--chip:#33203A;--decor:radial-gradient(circle at 12% 16%,#ffffffaa 0 1.4px,transparent 2.4px),radial-gradient(circle at 86% 9%,#ffffffcc 0 2px,transparent 3px),radial-gradient(circle at 74% 44%,#ffffff88 0 1.2px,transparent 2.2px),radial-gradient(circle at 22% 70%,#ffffffaa 0 1.8px,transparent 2.8px),linear-gradient(165deg,#2C1233 0%,#1B1332 60%,#190F1D 100%);color-scheme:dark}
body.th-love{--bg:#FFF1EE;--card:#FFFFFF;--ink:#3A1A1C;--muted:#956A66;--line:#F3D2CD;--chip:#FCE2DD;--decor:radial-gradient(60% 40% at 100% 0%,#FFD3D0 0%,transparent 70%),radial-gradient(50% 35% at 0% 100%,#FFE2D6 0%,transparent 70%);--display:'Gowun Batang',serif;--dw:700;--r:20px;--r2:26px;--rb:16px;--ro:16px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.th-love{--bg:#1D1112;--card:#2A1819;--ink:#F8E5E3;--muted:#BD9692;--line:#44292A;--chip:#3A2223;--decor:radial-gradient(60% 40% at 100% 0%,#4A1E22 0%,transparent 70%),radial-gradient(50% 35% at 0% 100%,#3A1D18 0%,transparent 70%);color-scheme:dark}}
:root[data-theme="dark"] body.th-love{--bg:#1D1112;--card:#2A1819;--ink:#F8E5E3;--muted:#BD9692;--line:#44292A;--chip:#3A2223;--decor:radial-gradient(60% 40% at 100% 0%,#4A1E22 0%,transparent 70%),radial-gradient(50% 35% at 0% 100%,#3A1D18 0%,transparent 70%);color-scheme:dark}
body.th-match{--bg:#EEF8F5;--card:#FFFFFF;--ink:#12302A;--muted:#5A7A73;--line:#CDE6DF;--chip:#DBF0EA;--decor:radial-gradient(55% 45% at 0% 10%,#C9F0E6 0%,transparent 70%),radial-gradient(55% 45% at 100% 30%,#FFE0D3 0%,transparent 70%);--display:'Gaegu','Noto Sans KR',sans-serif;--dw:700;--r:20px;--r2:24px;--rb:14px;--ro:14px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.th-match{--bg:#0F1B19;--card:#162624;--ink:#E2F3EE;--muted:#8DB1A9;--line:#24403A;--chip:#1D3531;--decor:radial-gradient(55% 45% at 0% 10%,#123A33 0%,transparent 70%),radial-gradient(55% 45% at 100% 30%,#3A2219 0%,transparent 70%);color-scheme:dark}}
:root[data-theme="dark"] body.th-match{--bg:#0F1B19;--card:#162624;--ink:#E2F3EE;--muted:#8DB1A9;--line:#24403A;--chip:#1D3531;--decor:radial-gradient(55% 45% at 0% 10%,#123A33 0%,transparent 70%),radial-gradient(55% 45% at 100% 30%,#3A2219 0%,transparent 70%);color-scheme:dark}
body.th-horror{--bg:#0B0909;--card:#151111;--ink:#EAE2DC;--muted:#8E807A;--line:#2C2120;--chip:#221A19;--decor:radial-gradient(70% 40% at 50% -5%,rgba(194,32,31,.30) 0%,transparent 70%),radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.75) 100%);--display:'Nanum Brush Script',cursive;--ds:1.32;--r:6px;--r2:6px;--rb:4px;--ro:4px;color-scheme:dark}
body.th-saju{--bg:#EFE6D3;--card:#FAF5EA;--ink:#1F1A15;--muted:#74685A;--line:#D8CAAE;--chip:#E7DCC6;--decor:repeating-linear-gradient(97deg,rgba(120,95,60,.035) 0 2px,transparent 2px 9px),repeating-linear-gradient(7deg,rgba(120,95,60,.03) 0 1px,transparent 1px 13px);--display:'Song Myung',serif;--r:3px;--r2:3px;--rb:3px;--ro:3px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.th-saju{--bg:#14120F;--card:#1D1A15;--ink:#ECE3D2;--muted:#A69880;--line:#3B3429;--chip:#2A251E;--decor:repeating-linear-gradient(97deg,rgba(255,240,210,.025) 0 2px,transparent 2px 9px);color-scheme:dark}}
:root[data-theme="dark"] body.th-saju{--bg:#14120F;--card:#1D1A15;--ink:#ECE3D2;--muted:#A69880;--line:#3B3429;--chip:#2A251E;--decor:repeating-linear-gradient(97deg,rgba(255,240,210,.025) 0 2px,transparent 2px 9px);color-scheme:dark}

/* ===== 테마별 분위기 ===== */
body.th-horror .big-title{font-size:calc(32px*var(--ds));animation:flicker 5s infinite}
body.th-horror .q{font-size:calc(25px*var(--ds))}
body.th-horror .rtype{font-size:calc(28px*var(--ds))}
body.th-horror .idx{font-size:calc(72px*1.15)}
body.th-horror .panel,body.th-horror .rcard{box-shadow:0 0 0 1px #3A1514,0 24px 60px -24px rgba(194,32,31,.45)}
body.th-horror .btn:not(.ghost):not(.kakao){letter-spacing:.08em}
body.th-horror .opt.on{box-shadow:inset 3px 0 0 var(--t)}
@keyframes flicker{0%,92%,100%{opacity:1}93%{opacity:.35}94%{opacity:1}96%{opacity:.6}97%{opacity:1}}
body.th-idol .panel,body.th-idol .rcard{border-color:transparent;box-shadow:0 14px 34px -16px color-mix(in srgb,var(--t) 55%,transparent)}
body.th-idol .big-title span{background:linear-gradient(90deg,var(--t),#9B6BFF);-webkit-background-clip:text;background-clip:text;color:transparent}
body.th-love .panel,body.th-love .rcard{box-shadow:0 12px 30px -18px color-mix(in srgb,var(--t) 50%,transparent)}
body.th-love .rline{font-family:'Gowun Batang',serif}
body.th-saju .panel,body.th-saju .rcard{border:3px double var(--line);box-shadow:none}
body.th-saju .eyebrow{font-family:'Song Myung',serif;letter-spacing:.2em;font-size:12px}
body.th-saju .gauge,body.th-saju .bar{border-radius:0}
body.th-saju .bar i{border-radius:0}
body.th-match .rhead{background:linear-gradient(90deg,color-mix(in srgb,var(--t) 16%,var(--card)),color-mix(in srgb,var(--t2) 18%,var(--card)))}
body.th-match .gauge i{background:linear-gradient(90deg,var(--t),var(--t2))}
@media (prefers-reduced-motion:reduce){body.th-horror .big-title{animation:none}}

/* 홈 카드에 테마 맛보기 */
.tcard.c-idol .name{font-family:'Jua',sans-serif}
.tcard.c-idol .art{background:linear-gradient(160deg,color-mix(in srgb,var(--t) 22%,var(--card)),color-mix(in srgb,#9B6BFF 16%,var(--card)))}
.tcard.c-love .name{font-family:'Gowun Batang',serif;font-weight:700;font-size:17px}
.tcard.c-match .name{font-family:'Gaegu',sans-serif;font-weight:700;font-size:20px}
.tcard.c-match .art{background:linear-gradient(90deg,color-mix(in srgb,var(--t) 18%,var(--card)),color-mix(in srgb,var(--t2) 20%,var(--card)))}
.tcard.c-horror{background:#151111;border-color:#2C2120;color:#EAE2DC}
.tcard.c-horror .art{background:radial-gradient(70% 60% at 50% 0%,rgba(194,32,31,.35),#0B0909)}
.tcard.c-horror .name{font-family:'Nanum Brush Script',cursive;font-size:24px;line-height:1.05}
.tcard.c-horror .sub{color:#8E807A}
.tcard.c-saju{border:3px double var(--line);border-radius:3px}
.tcard.c-saju .art{background:#EFE6D3}
.tcard.c-saju .name{font-family:'Song Myung',serif}

/* 사주 도장 / 입력 */
.seal{width:92px;height:92px;border:3px solid var(--t);color:var(--t);display:grid;place-items:center;font-family:'Song Myung',serif;font-size:54px;line-height:1;transform:rotate(-4deg);background:color-mix(in srgb,var(--t) 8%,transparent)}
.field{display:grid;gap:6px;text-align:left;margin-bottom:12px}
.field label{font-size:13px;color:var(--muted)}
.field input{font:inherit;font-size:16px;padding:14px;border:1.5px solid var(--line);border-radius:var(--ro);background:var(--card);color:var(--ink);width:100%}
.field input:focus{outline:none;border-color:var(--t)}
.fields2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pairname{font-family:var(--display);font-size:18px;color:var(--ink)}
/* ===== 밤하늘 테마 (별자리·오늘의 운세): 한 가지 밤 분위기로 고정 ===== */
body.th-night{--bg:#0D1130;--card:#151A3C;--ink:#EEF0FF;--muted:#A0A6CC;--line:#2A3164;--chip:#20265A;--display:'Gowun Batang',serif;--dw:700;--r:18px;--r2:22px;--rb:14px;--ro:14px;color-scheme:dark;
  --decor:radial-gradient(circle at 10% 12%,#fff 0 1px,transparent 2px),radial-gradient(circle at 78% 6%,#fff 0 1.4px,transparent 2.4px),radial-gradient(circle at 92% 40%,#ffffffaa 0 1px,transparent 2px),radial-gradient(circle at 30% 52%,#ffffff88 0 1px,transparent 2px),radial-gradient(circle at 60% 80%,#fff 0 1.2px,transparent 2.2px),radial-gradient(80% 50% at 50% 0%,#2A2466 0%,transparent 70%)}
body.th-night .btn:not(.ghost):not(.kakao){color:#0D1130}
body.th-night .panel,body.th-night .rcard{box-shadow:0 0 0 1px #2A3164,0 20px 50px -24px rgba(242,193,78,.35)}
.t-star,.t-today{--t:#F2C14E} .t-ohaeng{--t:var(--ohaeng)}
.tcard.c-night{background:#151A3C;border-color:#2A3164;color:#EEF0FF}
.tcard.c-night .name{font-family:'Gowun Batang',serif;font-weight:700}
.tcard.c-night .sub{color:#A0A6CC}

/* 결과 부속 */
.matches{display:grid;gap:8px;margin:0 0 18px}
.mrow{display:grid;grid-template-columns:auto 1fr;column-gap:10px;row-gap:2px;align-items:baseline;padding:10px 12px;border-radius:var(--ro);background:var(--chip)}
.mrow .mlab{font-size:12px;color:var(--muted);white-space:nowrap}
.mrow b{font-size:15px;color:var(--ink);min-width:0}
.mrow .mwhy{grid-column:1/-1;font-size:12px;color:var(--muted)}
.lucky{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 18px}
.lucky div{background:var(--chip);border-radius:var(--ro);padding:10px 8px;text-align:center;display:grid;gap:2px;min-width:0}
.lucky span{font-size:11px;color:var(--muted)}
.lucky b{font-size:15px;word-break:keep-all}
.glyph{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;font-size:52px;color:var(--t);border:2px solid var(--t);background:color-mix(in srgb,var(--t) 10%,transparent);font-family:'Noto Sans Symbols 2','Segoe UI Symbol',serif}
.seal2{grid-template-rows:1fr 1fr;font-size:38px;line-height:1}
.seal2 span{display:block}
.linkbox{font-family:var(--mono);font-size:12px;background:var(--chip);border-radius:var(--ro);padding:12px;margin:16px 0 4px;word-break:break-all;text-align:left}
.demo{margin-top:14px;font-size:13px}
.field select{font:inherit;font-size:16px;padding:14px;border:1.5px solid var(--line);border-radius:var(--ro);background:var(--card);color:var(--ink);width:100%}

.invite{background:var(--chip);border-radius:var(--ro);padding:14px;margin-bottom:14px;line-height:1.6}
.doc{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:24px 20px;margin-top:6px}
.doc h1{font-family:var(--display);font-weight:400;font-size:28px;margin:0 0 12px}
.doc h2{font-size:17px;margin:22px 0 6px}
.doc p,.doc li{color:var(--ink);font-size:14.5px}
.doc ul{padding-left:18px}
.doc .muted{color:var(--muted);font-size:13px}
.foot a{color:inherit;text-decoration:none}
.foot a:hover{text-decoration:underline}
/* 기본 리셋 (시안 환경이 넣어주던 것) */
html{-webkit-text-size-adjust:100%;color-scheme:light}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
a.brand{display:block}
.fallback{padding-block:24px;text-align:center}
.fallback h1{font-family:var(--display);font-weight:400;font-size:30px;margin:0 0 8px}