/* 사주가챠: 토큰 · 부품 · 글꼴은 demo/emigrate/style.css(이민 가챠 = 같은 Fun 묶음)와 같은 값. 휴대폰(320 · 390) 먼저, 961px 부터의 왼쪽 줄은
   모든 단독 페이지가 같이 쓰는 src/navigation/standalone.css(LAYOUT)가 정한다(이 파일은 정하지 않는다). 1280px 부터 칸 오른쪽에 빈 광고 자리 #ad-rail-right.
   몸통(body) · 하단 독에는 bottom / padding-bottom 을 인라인으로 쓰지 않는다(광고 런타임만 하단 앵커 높이만큼 올린다). */
@font-face{font-family:'KDot';src:local('Apple SD Gothic Neo'),local('AppleSDGothicNeo-Regular'),local('Noto Sans KR'),local('NotoSansKR-Regular'),local('Malgun Gothic');unicode-range:U+00B7}
:root{
  /* 밝은 테마(2026-10-30 오너: 밝은 바탕, 결과는 어둡게 — research/2026-10-30-light-theme/PALETTE.md). 예전 어두운 값은 아래 [data-theme="dark"] 블록 */
  --bg:#F5F6F9;--surface:#FFFFFF;--surface-2:#EFF1F6;
  --glass:rgba(255,255,255,.88);--glass-b:rgba(28,38,56,.11);
  --border:rgba(28,38,56,.10);
  --text:#161B26;--muted:#5B6476;--faint:#667185;
  --inv:#202735;--inv-text:#FFFFFF;--ring:#B52464;
  --shadow-1:0 1px 2px rgba(28,38,56,.03),0 4px 12px rgba(28,38,56,.04);
  --top-bg:rgba(255,255,255,.91);
  /* 밝은 바탕 위의 Fun 금색 글자 · 제목 그라디언트(네온 금색은 채움 · 단추에만), 옅은 채움 · 시트 · 막 · 그림자 */
  --fun-ink:#936100;--fun-grad:linear-gradient(90deg,#936100,#BC471D 60%,#BF245D);
  --tint:rgba(28,38,56,.04);--sheet:#FFFFFF;--soft:#3B4456;--soft-2:#3B4456;--ph:#8A93A6;--unk:#5B6476;--cell-k:#5B6476;--hold-ink:#161B26;
  --ov:rgba(22,29,43,.42);--sheet-sh:0 2px 6px rgba(28,38,56,.03),0 12px 34px rgba(28,38,56,.07);--img-sh:0 10px 30px rgba(28,38,56,.18);
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6476' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --stage-sh:0 4px 14px rgba(28,38,56,.10),0 24px 60px rgba(28,38,56,.18);
  --fun-rgb:255,200,61;
  --fun2-rgb:255,61,138;
  --f-display:'KDot','Sora','Noto Sans KR',system-ui,-apple-system,sans-serif;
  --f-body:'KDot','Instrument Sans','Noto Sans KR',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-han:'Noto Sans KR','Noto Sans TC','Apple SD Gothic Neo','PingFang TC',serif;
  /* 오행 색: 목 · 화 · 토 · 금 · 수. 밝은 바탕(자세히 보기)에서는 진한 값, 어두운 무대 · 카드 안은 card.js EL 과 같은 값(아래 블록) */
  --e0:#087D69;--e1:#D0362A;--e2:#936100;--e3:#5B6476;--e4:#2464B7;
  color-scheme:light;
}
/* 어두운 값: 다음 테마 전환(:root[data-theme="dark"]) + 지금도 어둡게 두는 두 곳 — 결과 무대 .lk-card(머리 줄 · 첫 화면 공유 줄 · 사주 카드:
   가챠 막의 착지 장면이 그대로 내려앉는 자리라 막과 같은 바탕이어야 한다)와 가챠 막 .spin. 그 안의 모든 것은 예전 그대로 그려진다 */
:root[data-theme="dark"],.lk-card,.spin{
  --bg:#0B0D12;--surface:#12151E;--surface-2:#191D29;
  --glass:rgba(255,255,255,.05);--glass-b:rgba(255,255,255,.10);
  --border:rgba(255,255,255,.08);
  --text:#F2F4F8;--muted:#A3A9BA;--faint:#858CA0;
  --inv:#F5F6FA;--inv-text:#0B0D12;--ring:#F5F6FA;
  --shadow-1:0 1px 2px rgba(0,0,0,.45),0 8px 24px rgba(0,0,0,.35);
  --top-bg:rgba(11,13,18,.72);
  --fun-ink:rgb(255,200,61);--fun-grad:linear-gradient(90deg,rgb(255,200,61),#FF9A3D 60%,rgb(255,61,138));
  --tint:rgba(255,255,255,.05);--sheet:#141925;--soft:#C9CED8;--soft-2:#D6DAE3;--ph:#4a5163;--unk:#4a5163;--cell-k:#858CA0;--hold-ink:#FFE7A3;
  --ov:rgba(4,5,9,.66);--sheet-sh:0 20px 60px #000a;--img-sh:0 10px 40px #0009;
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3A9BA' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --e0:#3DD68C;--e1:#FF6A5C;--e2:#E8B04A;--e3:#E9EDF5;--e4:#5CA8FF;
  color-scheme:dark;color:var(--text);
}
:root[data-theme="dark"]{--stage-sh:0 30px 90px rgba(0,0,0,.55)}
html:lang(ja){--f-display:'KDot','Sora','Noto Sans JP',system-ui,-apple-system,sans-serif;--f-body:'KDot','Instrument Sans','Noto Sans JP',system-ui,-apple-system,'Segoe UI',sans-serif;--f-han:'Noto Sans JP','Hiragino Sans',serif}
html:lang(zh){--f-display:'KDot','Sora','Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif;--f-body:'KDot','Instrument Sans','Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif;--f-han:'Noto Sans TC','PingFang TC',serif}
html:lang(th){--f-display:'KDot','Sora','Noto Sans Thai','Leelawadee UI','Thonburi',sans-serif;--f-body:'KDot','Instrument Sans','Noto Sans Thai','Leelawadee UI','Thonburi',sans-serif;--f-han:'Noto Sans TC','PingFang TC','Hiragino Sans',serif}
html:lang(en){--f-display:'KDot','Sora',system-ui,-apple-system,sans-serif;--f-body:'KDot','Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;--f-han:'Noto Sans TC','PingFang TC','Hiragino Sans',serif}
html:lang(ja) body,html:lang(zh) body{word-break:normal}
html:lang(ja) .hero h1 em,html:lang(zh) .hero h1 em{white-space:nowrap}
html:lang(en) .hero h1{font-size:clamp(28px,8.4vw,50px)}
html:lang(th) .hero h1{font-size:clamp(28px,8.6vw,50px);line-height:1.25}
*{box-sizing:border-box}
html,body{background:var(--bg);color:var(--text)}
body{margin:0;font:400 15px/1.5 var(--f-body);-webkit-font-smoothing:antialiased;padding-bottom:40px;word-break:keep-all;overflow-wrap:break-word}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
p{margin:0}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
[hidden]{display:none!important}

/* ---------- top bar · footer (운영 페이지에서는 릴리스 레인이 사이트 머리 · 메뉴로 바꾼다) ---------- */
.top{position:sticky;top:0;z-index:40;background:var(--top-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.top-in{max-width:1040px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:56px;gap:8px;padding:0 14px}
.brand{display:inline-flex;align-items:center;gap:9px;font:700 16px/1 var(--f-display);letter-spacing:-.01em;text-decoration:none;white-space:nowrap;color:var(--text)}
.mark{display:inline-block;width:18px;height:18px;border-radius:50%;background:conic-gradient(from 210deg,#3DE8C6,#FFC83D,#FF7A45,#FF3D8A,#3DE8C6);-webkit-mask:radial-gradient(circle,transparent 38%,#000 43%);mask:radial-gradient(circle,transparent 38%,#000 43%);flex:none}
.top-back{display:inline-flex;align-items:center;height:40px;padding:0 14px;border-radius:12px;background:var(--glass);border:1px solid var(--glass-b);font:600 12.5px/1 var(--f-body);color:inherit;text-decoration:none;white-space:nowrap}
.foot{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;max-width:720px;margin:28px auto 0;padding:18px 16px 8px;border-top:1px solid var(--glass-b);font:500 12.5px/1.4 var(--f-body);color:var(--muted)}
.foot a{color:inherit;text-decoration:none}.foot a:hover{color:var(--text,#fff)}

/* ---------- page ---------- */
.wrap{width:100%;max-width:720px;margin:0 auto;padding:16px 20px 0;display:flex;flex-direction:column;gap:16px}
.eyebrow{font:600 12px/1.2 var(--f-body);letter-spacing:.02em;color:var(--fun-ink)}
h1{font:800 clamp(27px,7.2vw,38px)/1.2 var(--f-display);letter-spacing:-.03em;margin:0;text-wrap:balance}
.center{text-align:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 20px;border-radius:14px;font:600 15px var(--f-body);text-decoration:none;white-space:nowrap;border:1px solid transparent}
.btn svg{width:19px;height:19px;flex:none}
.btn-secondary{background:var(--glass);border-color:var(--glass-b);color:var(--text)}
.btn-fun{background:linear-gradient(100deg,rgb(var(--fun-rgb)),#FF9A3D);color:#1d1300;box-shadow:0 8px 28px rgba(var(--fun-rgb),.22);font-weight:700;height:54px;font-size:16px}
.btn.block{width:100%}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:12px}
.hint{font-size:12.5px;line-height:1.55;color:var(--faint)}

/* ---------- hero + form ---------- */
.hero{display:flex;flex-direction:column;gap:12px;padding-top:6px}
.hero .spec{height:4px;border-radius:4px;background:linear-gradient(90deg,rgb(var(--fun-rgb)),rgb(var(--fun2-rgb)));width:96px}
.hero h1{font-size:clamp(32px,9.6vw,50px);line-height:1.12;letter-spacing:-.04em}
.hero h1 em{font-style:normal;background:var(--fun-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ask{gap:16px;margin-top:6px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field label,.field .lbl{font:700 15px/1.3 var(--f-body)}
.dob{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);gap:8px}
select{width:100%;min-width:0;height:52px;padding:0 14px;border-radius:15px;background:var(--surface-2);border:1px solid var(--glass-b);font:700 16px/1 var(--f-body);color:var(--text);outline:none}
select{-webkit-appearance:none;appearance:none;padding-right:34px;background-image:var(--chev);background-repeat:no-repeat;background-position:right 12px center;background-size:16px;text-overflow:ellipsis}
select:invalid{color:var(--faint)}
select option{color:var(--text);background:var(--surface-2)}
select:focus-visible,.tin:focus-visible{border-color:rgba(var(--fun-rgb),.7);box-shadow:0 0 0 3px rgba(var(--fun-rgb),.15)}
/* 이름(선택): 다른 칸과 같은 높이의 글 칸 */
.nin{width:100%;min-width:0;height:52px;padding:0 14px;border-radius:15px;background:var(--surface-2);border:1px solid var(--glass-b);font:700 16px/1 var(--f-body);color:var(--text);outline:none}
.nin::placeholder{color:var(--ph);font-weight:600}
.nin:focus-visible{border-color:rgba(var(--fun-rgb),.7);box-shadow:0 0 0 3px rgba(var(--fun-rgb),.15)}
/* 시각: 숫자만 치는 큰 칸(2026-10-22 오너 — 시계 고르개 없음, ':' 은 app.js 가 넣는다) + US · CA 는 AM/PM 두 단추 + '모름' 칩. 좁으면 칩이 다음 줄로 */
.time-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tin{flex:1 1 96px;min-width:92px;height:56px;padding:0 16px;border-radius:15px;background:var(--surface-2);border:1px solid var(--glass-b);font:800 24px/1 var(--f-display);letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--text);outline:none}
.tin::placeholder{color:var(--ph)}
.tin.bad{border-color:#FF7A45;box-shadow:0 0 0 3px rgba(255,122,69,.18)}
.time-row .chip{height:56px;padding:0 14px;border-radius:15px;font-size:14.5px}
.ampm{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:4px;height:56px;padding:4px;border-radius:15px;background:var(--tint);border:1px solid var(--glass-b)}
.ampm button{min-width:46px;padding:0 6px;border:0;border-radius:11px;background:none;font:700 15px var(--f-body);color:var(--muted)}
.ampm [aria-pressed="true"]{background:var(--inv);color:var(--inv-text)}
.h12 .tin{flex-basis:84px;min-width:84px;padding:0 12px;font-size:22px}   /* US · CA 390px: 시각 · AM/PM · Don't know 가 한 줄에 */
.h12 .ampm button{min-width:42px}
.h12 .chip{padding:0 12px}
.chip{flex:none;border:1px solid var(--glass-b);background:var(--glass);border-radius:999px;height:44px;padding:0 16px;font:600 14px var(--f-body);color:var(--muted);white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--inv);color:var(--inv-text);border-color:var(--inv)}

/* ---------- 티어 색(사이트 직업 카드 data-tier 와 같은 변수: --tc · --tc-rgb · --tc2-rgb) ----------
   SSS · SS · S 금(맞은편 청록), A 청록, B 금, C 회색, D 주황, F 분홍. 카드 귀퉁이 빛 · 알약 · 큰 숫자 빛이 이 색을 쓴다. card.js TIER_LOOK 과 같은 값 */
.tc-SSS,.tc-SS,.tc-S,.t-SSS,.t-SS,.t-S{--tc:#FFC83D;--tc-rgb:255,200,61;--tc2-rgb:61,232,198}
.tc-A,.t-A{--tc:#3DE8C6;--tc-rgb:61,232,198;--tc2-rgb:92,184,255}
.tc-B,.t-B{--tc:#FFC83D;--tc-rgb:255,200,61;--tc2-rgb:255,122,69}
.tc-C,.t-C{--tc:#AEB6C6;--tc-rgb:174,182,198;--tc2-rgb:92,184,255}
.tc-D,.t-D{--tc:#FF7A45;--tc-rgb:255,122,69;--tc2-rgb:255,61,138}
.tc-F,.t-F{--tc:#FF3D8A;--tc-rgb:255,61,138;--tc2-rgb:255,122,69}

/* ---------- result ---------- */
#result{display:flex;flex-direction:column;gap:14px;scroll-margin-top:64px;width:100%;max-width:560px}
/* AMENDMENTS A7: the result's two parts lay out as #result's own children; an empty ad host takes no room (no extra gap), and host
   101 keeps 150px from the buttons once a slot is in it (--yn-host-gap, set by app.js hostGap). The empty host stays in the layout
   at no height (the ad runtime fills only a host that is laid out: src/ads/place/engine.js host(); display:none would keep it
   empty for good) and its -14px margin takes back #result's 14px gap */
#result>.lk-part{display:contents}
#result>.yn-ad-host:empty{margin-top:-14px}
#result>.yn-ad-host[data-host="101"]:not(:empty){margin-top:var(--yn-host-gap,0px)}
.res-k{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 10px;padding:6px 2px 0;font:600 12px/1.3 var(--f-body);color:var(--faint)}
.res-k .kick{color:var(--fun-ink)}
.res-k-r{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:0 10px;margin-left:auto;text-align:right}
.res-k .who{color:var(--muted)}
.res-link{min-height:31px;margin:-8px 0;padding:4px 0 4px 2px;border:0;background:none;color:var(--faint);font:500 12px/1.3 var(--f-body);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.res-link:hover{color:var(--text)}

/* ---------- 결과(2026-10-22 오너 round 4~6): 결과 = 가챠 막의 착지 장면을 페이지에 둔 것 ----------
   무대(.lk-stage) 하나: 가챠 막과 같은 바탕(#0B0D12 · 18px 격자 · 왼쪽 위 분홍 · 오른쪽 아래 청록 번짐) + 아주 옅게 천천히 반짝이는 별.
   위 줄(내 운세 · 생일 · 생일 바꾸기 | 금빛 알약) → 분홍 머리글 → 머리 줄 h1 하나('민지님의 10월 운은 / 83억 명 중 상위 12% [S]') → 사주 카드(아래).
   무대 밑: '이번 달의 흐름' 점 줄(상자 없이). 휴대폰은 화면 폭 가득, 600px 부터 가운데 560px 의 떠 있는 카드. 정확한 세계 순위는 자세히 보기에만 */
.lk-card{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:10px;margin:0 -20px;padding:14px 20px 22px;overflow:hidden;background-color:#0B0D12}
.lk-card::before,.lk-card::after,.st .g1,.st .g2{content:'';position:absolute;z-index:-2;border-radius:50%;filter:blur(40px);opacity:.55;pointer-events:none}
.lk-card::before{width:420px;height:420px;left:-170px;top:-190px;background:radial-gradient(circle,#FF3D8A 0%,transparent 70%);opacity:.6;filter:blur(36px)}
.lk-card::after{width:460px;height:460px;right:-200px;bottom:-220px;background:radial-gradient(circle,#3DE8C6 0%,transparent 70%);opacity:.5;filter:blur(36px)}
.lk-card .stars,.st .grid{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:18px 18px}
/* 별: 두 겹의 점 무늬(97 · 131px 바둑판에 몇 개씩)를 서로 다른 박자로 아주 옅게 — 투명도만 움직인다 */
.lk-card .stars::before,.lk-card .stars::after{content:'';position:absolute;inset:0;opacity:.2;animation:twinkle 7s ease-in-out infinite alternate}
.lk-card .stars::before{background:radial-gradient(circle at 23px 31px,rgba(255,255,255,.9) 0 .8px,transparent 1.4px),radial-gradient(circle at 71px 9px,rgba(255,255,255,.7) 0 .7px,transparent 1.3px),radial-gradient(circle at 52px 77px,rgba(255,233,176,.95) 0 1px,transparent 1.8px);background-size:97px 97px}
.lk-card .stars::after{background:radial-gradient(circle at 11px 63px,rgba(255,255,255,.85) 0 .8px,transparent 1.4px),radial-gradient(circle at 88px 25px,rgba(207,250,240,.95) 0 1px,transparent 1.8px),radial-gradient(circle at 120px 104px,rgba(255,255,255,.6) 0 .7px,transparent 1.3px);background-size:131px 131px;animation-duration:9s;animation-delay:-4.5s}
@keyframes twinkle{from{opacity:.12}to{opacity:.55}}
.lk-card .res-k{flex-wrap:nowrap;align-items:flex-start;padding:2px 0 4px}
.res-k-l{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;min-width:0}
.res-k-l .res-k-r{margin-left:0;justify-content:flex-start;text-align:left}
.lk-card .st-kind{flex:none;margin-left:auto}
.lk-sec{margin:0 0 4px;font:700 12.5px/1.2 var(--f-body);letter-spacing:.02em;color:var(--muted)}
.lk-kick{margin:0;font:700 14px/1.35 var(--f-display);letter-spacing:-.01em;color:#FF3D8A;overflow-wrap:anywhere}
.lk-note{margin:4px 0 0;font:500 12px/1.4 var(--f-body);color:var(--muted)}
.lk-hook{margin:0 0 6px;padding:0;font:900 clamp(30px,9.2vw,40px)/1.16 var(--f-display);letter-spacing:-.04em;color:var(--text);overflow-wrap:anywhere}
.lk-hook .l1,.lk-hook .l2{display:block}
.lk-hook .l2{white-space:nowrap}
.lk-hook.wrap .l2{white-space:normal}
.hk-ans,.hk-top{white-space:nowrap}
/* 머리 줄 끝의 티어 패: 릴스의 금빛 답(그라디언트) — 둥근 패, 티어 색 빛 */
.tier.hk-t{display:inline-grid;height:1.12em;min-width:0;padding:0 .26em;margin-left:.08em;border-radius:.24em;font:800 .9em/1 'Sora',var(--f-display);letter-spacing:-.02em;vertical-align:.04em;box-shadow:0 0 22px rgba(var(--tc-rgb),.55),0 0 0 1px rgba(255,255,255,.2) inset}
.card{position:relative;overflow:hidden;isolation:isolate;border-radius:28px;background:#0F121A;color:var(--text);border:1px solid rgba(255,255,255,.10);box-shadow:0 2px 6px rgba(0,0,0,.4),0 24px 64px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.16)}
.card-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(70% 60% at 100% 0%,rgba(var(--tc-rgb),.44) 0%,rgba(var(--tc-rgb),.12) 42%,transparent 72%),radial-gradient(60% 50% at 0% 100%,rgba(var(--tc2-rgb),.22) 0%,transparent 70%),linear-gradient(180deg,#151A27,#0F121A)}
.card-in{position:relative;padding:20px 20px 18px}
.lk-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px}
.lk-hd{display:flex;flex-direction:column;gap:2px;min-width:0}
.lk-item{font:800 22px/1.15 var(--f-display);letter-spacing:-.03em;overflow-wrap:anywhere}
.lk-hd small{font:600 12px/1.3 var(--f-body);color:var(--muted)}
/* 티어 알약(릴스 .badge): 옅은 티어 색 바탕 + 테두리 + 빛나는 점. SSS · SS · S 는 글자가 청록 → 금 */
.tier.pill{display:inline-flex;align-items:center;gap:6px;min-width:0;height:28px;padding:0 11px;border-radius:999px;background:rgba(var(--tc-rgb),.14);border:1.5px solid rgba(var(--tc-rgb),.6);color:var(--tc);font:800 13px/1 'Sora',var(--f-display);letter-spacing:.02em;flex:none}
.tier.pill i{width:7px;height:7px;border-radius:50%;background:var(--tc);box-shadow:0 0 9px var(--tc);flex:none}
.tier.pill.big{height:36px;padding:0 14px;gap:8px;font-size:17px}
.tier.pill.big i{width:9px;height:9px}
.pill.t-SSS b,.pill.t-SS b,.pill.t-S b{background:linear-gradient(90deg,#3DE8C6,#FFC83D);-webkit-background-clip:text;background-clip:text;color:transparent}
.lk-lbl{margin-top:16px;font:500 14px/1.3 var(--f-body);color:var(--muted)}
.lk-big{display:flex;align-items:baseline;gap:8px;margin-top:4px;white-space:nowrap;font-variant-numeric:tabular-nums;overflow:hidden}
.lk-big b{font:800 clamp(54px,17.5vw,76px)/1 'Sora',var(--f-display);letter-spacing:-.05em;text-shadow:0 0 30px rgba(var(--tc-rgb),.55),0 0 90px rgba(var(--tc-rgb),.3)}
.lk-big small{font:700 17px/1 var(--f-display);color:var(--muted);letter-spacing:-.01em}
.lk-dl{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:20px;padding-top:14px;border-top:1px solid rgba(255,255,255,.10);font:700 13px/1.3 var(--f-display);color:var(--muted)}
.lk-dl .sep{color:var(--faint)}
.ilju{display:inline-flex;align-items:center;gap:1px;font-weight:700;color:var(--soft-2)}
.ilju i{font:900 15px/1 var(--f-han);font-style:normal}
.ilju i+i{margin-right:5px}
/* 티어 패(자세히 보기의 세계 순위): 한 모양, 꽉 찬 색 */
.tier{display:inline-grid;place-items:center;min-width:38px;height:26px;padding:0 8px;border-radius:8px;font:800 13px/1 'Sora',var(--f-display);letter-spacing:.03em;white-space:nowrap}
.t-SSS,.t-SS,.t-S{background:linear-gradient(100deg,#3DE8C6,#FFC83D);color:#0B0D12}
.t-A{background:#3DE8C6;color:#05231c}
.t-B{background:#FFC83D;color:#1d1300}
.t-C{background:#AEB6C6;color:#14171d}
.t-D{background:#FF7A45;color:#1f0b02}
.t-F{background:#FF3D8A;color:#2a0414}
.e0{color:var(--e0)}.e1{color:var(--e1)}.e2{color:var(--e2)}.e3{color:var(--e3)}.e4{color:var(--e4)}
.mr-t td.unk{color:var(--unk)}
/* 항목별 운: 같은 카드 문법의 짧은 줄 — 이름(왼쪽) · 큰 티어 알약(오른쪽) / 까닭 한 줄 · 상위/하위 %(알약 아래) */
/* ---------- 사주 카드(= 결과 카드, 2026-10-22 오너 round 6 "사주 컨셉으로 … 신비롭게, 테마는 그대로"): 카드 몸은 그대로(어두운 유리 · 티어 색 귀퉁이 빛),
   위 명식(시 · 일 · 월 · 연 네 기둥, 천간 위 지지, 오행 색 세리프 한자가 천천히 숨 쉬듯 빛남 · 작은 읽기 · 일주는 금빛 테두리 '나'),
   뒤에 아주 옅게 도는 오행 고리(lane F), 이번 달 월운 꼬리표 + 원국에 닿는 합 · 충 · 형/해 표, 네 귀퉁이 금빛 부적 장식(lane F).
   아래: 운세 · '83억 명 중 상위 12%' + 티어 도장 · 금 선 · 분야별 운세 · 달 · 일주. 움직임(숨 · 고리 · 별)은 줄인 움직임 설정이면 멈춘다 ---------- */
:root{--f-hz:'Noto Serif KR','Noto Serif TC',var(--f-han)}
html:lang(ja){--f-hz:'Noto Serif JP','Noto Serif TC',var(--f-han)}
html:lang(zh),html:lang(en),html:lang(th){--f-hz:'Noto Serif TC',var(--f-han)}
.hz{font-family:var(--f-hz);font-weight:900;font-style:normal}
.sj-wrap{position:relative;margin-top:6px}
.saju>.card-in{padding:22px 18px 36px}
.cn{position:absolute;z-index:2;width:30px;height:30px;pointer-events:none;opacity:.8}
.cn svg{display:block;width:100%;height:100%}
.cn-tl{left:7px;top:7px}.cn-tr{right:7px;top:7px;transform:scaleX(-1)}.cn-bl{left:7px;bottom:7px;transform:scaleY(-1)}.cn-br{right:7px;bottom:7px;transform:scale(-1)}
.myeong{position:relative;padding:6px 4px 0}
.myeong .ring{position:absolute;left:50%;top:44%;width:290px;height:290px;margin:-145px 0 0 -145px;opacity:.09;pointer-events:none;animation:ring-rot 80s linear infinite}
.myeong .ring svg{display:block;width:100%;height:100%}
@keyframes ring-rot{to{transform:rotate(360deg)}}
.cols{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.cols.one{grid-template-columns:minmax(0,96px);justify-content:center}
.col{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0 8px;border-radius:14px;transition:box-shadow .3s,background .3s}
.col.me{background:rgba(255,200,61,.06);box-shadow:0 0 0 1.5px rgba(255,200,61,.75) inset,0 0 18px rgba(255,200,61,.16)}
.clab{font:600 11px/1.2 var(--f-body);color:var(--faint);letter-spacing:.04em;white-space:nowrap}
.me-k{position:absolute;top:-8px;right:-4px;padding:2px 7px;border-radius:999px;background:#FFC83D;color:#1d1300;font:800 10px/1.3 var(--f-body);transition:opacity .25s}
.cell{position:relative;display:block;width:100%;height:58px;overflow:hidden}
.cell>.hz,.cell .reel .hz{display:grid;place-items:center;height:58px;font-size:44px;line-height:1}
.cell>.hz{text-shadow:0 0 14px currentColor;animation:hz-breathe 4.2s ease-in-out infinite alternate}
.cell.b>.hz{animation-delay:-2.1s}
@keyframes hz-breathe{from{text-shadow:0 0 6px rgba(255,255,255,.08)}to{text-shadow:0 0 16px currentColor}}
.cell.unk{color:#4a5163}
.cell.unk>.hz{animation:none;text-shadow:none}
.cell.hit::after{content:'';position:absolute;right:6px;top:6px;width:7px;height:7px;border-radius:50%;background:var(--rc);box-shadow:0 0 8px var(--rc)}
.r-hp{--rc:#3DE8C6}.r-ch{--rc:#FF3D8A}.r-pn{--rc:#FF7A45}
.rd{min-height:14px;font:600 10.5px/1.3 var(--f-body);color:var(--muted);text-align:center;overflow-wrap:anywhere;padding:0 2px}
/* 이번 달 월운 꼬리표 + 원국에 닿는 관계 */
.wol{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 8px;margin:12px 0 2px}
.wol-y{margin-top:6px}
.wol-k{padding:4px 10px;border-radius:999px;border:1.5px solid rgba(255,200,61,.7);color:#FFC83D;font:700 11.5px/1.2 var(--f-body)}
.wol>.hz{display:inline-flex;gap:1px;font-size:20px;line-height:1}
.wol>.hz i{font-style:normal}
.rel{padding:3px 8px;border-radius:999px;border:1px solid var(--rc);color:var(--rc);background:rgba(11,13,18,.55);font:700 11px/1.2 var(--f-body);white-space:nowrap}
.links{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.links line{stroke:var(--rc);stroke-width:1.6;stroke-linecap:round;opacity:0;stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.links line.r-hp{--rc:#3DE8C6}.links line.r-ch{--rc:#FF3D8A}.links line.r-pn{--rc:#FF7A45}
.links line.on{animation:link-draw .7s ease-out forwards}
@keyframes link-draw{0%{opacity:1;stroke-dashoffset:var(--len)}55%{opacity:1;stroke-dashoffset:0}100%{opacity:.28;stroke-dashoffset:0}}
.lower-in{padding-top:14px}
.saju .lk-head{min-height:0}
.saju .lk-item{font-size:17px;color:var(--muted)}
.standing{display:flex;align-items:center;gap:16px;margin-top:6px}
.st-v{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-width:0}
.standing small{font:600 14px/1.2 var(--f-body);color:var(--muted);text-wrap:balance}
.standing b{font:800 clamp(30px,9.4vw,40px)/1.05 'Sora',var(--f-display);letter-spacing:-.03em;white-space:nowrap;text-shadow:0 0 22px rgba(var(--tc-rgb),.45)}
/* 티어 도장: 그 티어 색 타일, 큰 Sora 800 글자, 티어 색 빛(천천히 숨 쉼) */
.tier.seal{flex:none;display:grid;place-items:center;min-width:86px;height:86px;padding:0 14px;border-radius:22px;font:800 62px/1 'Sora',var(--f-display);letter-spacing:-.03em;box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 10px 30px rgba(0,0,0,.45),0 0 34px rgba(var(--tc-rgb),.55)}
.tier.seal[data-n="2"]{font-size:54px}
.tier.seal[data-n="3"]{font-size:48px;padding:0 12px}
.slip-div{height:1px;margin:18px 0 14px;border:0;background:linear-gradient(90deg,transparent,rgba(255,200,61,.55) 20%,rgba(255,200,61,.55) 80%,transparent)}
.lk-items{display:flex;flex-direction:column;gap:6px}
/* 쪽지 줄: 이름 · 점선 · 알약 · % / 아래 작은 까닭. 칸은 목록이 정하고 줄은 subgrid(2026-10-23 오너: 줄마다 따로 그리드면 넓은 알약일수록 왼쪽에서
   시작한다) — 알약 칸 = 가장 넓은 알약, % 칸 = 가장 긴 %, 둘 다 왼쪽 맞춤. 이름 칸 안에서 점선이 이름 바로 뒤부터 알약 앞까지 */
.lk-rows{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:8px}
.cr{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center;padding:8px 0}
.cr .tier.pill{justify-self:start}
/* subgrid 가 없는 브라우저: 줄마다 그리드에 고정 너비 — 가장 넓은 알약(SSS 65.6px) · 언어마다 가장 긴 %(ko '상위 0.88%' 56.5 · en 'Bottom 0.01%' 77.3 ·
   th 'ท้ายแถว 0.01%' 75.1 · ja · zh 56.1px, 2026-10-23 Chrome 실제 글꼴) */
@supports not (grid-template-columns:subgrid){
  .lk-rows{display:flex;flex-direction:column;--pill-w:66px;--pct-w:58px}
  :lang(en) .lk-rows{--pct-w:78px}
  :lang(th) .lk-rows{--pct-w:76px}
  .cr{grid-template-columns:minmax(0,1fr) var(--pill-w) var(--pct-w);column-gap:8px}
}
.cr+.cr{border-top:1px solid rgba(255,255,255,.06)}
/* 직장·사업운 묶음(2026-10-22 오너): 묶음 이름 아래 두 줄(직장운 · 사업운), 왼쪽 가는 금 선으로 묶는다 */
.cr .it{min-width:0;display:flex;align-items:center;gap:8px}
.cr .it b{flex:none;font:800 15px/1.2 var(--f-display);letter-spacing:-.02em;white-space:nowrap}
.cr .ld{flex:1 1 14px;min-width:14px;height:0;margin-top:3px;border-bottom:1.5px dotted rgba(255,255,255,.22)}
.cr .why{grid-column:1/-1;margin-top:4px;font:500 14px/1.55 var(--f-body);color:var(--muted);overflow-wrap:anywhere;text-wrap:pretty}
/* 운세 카드의 풀이 문단(% 줄 아래): 분야별 줄과 같은 글씨 */
.ov-why{margin:12px 0 0;font:500 14.5px/1.6 var(--f-body);color:var(--soft);text-wrap:pretty}
.cr .why:empty{display:none}
.cr .tier.pill{height:28px;padding:0 10px;font-size:15px}
.cr .pct{justify-self:start;text-align:left;font:600 12px/1 var(--f-body);color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
/* 이번 달의 흐름(쪽지 안): 상자 없는 글 줄, 앞에 작은 빛나는 점 — 그달 문장은 분홍, 사건은 청록 */
.lk-why{display:flex;flex-direction:column;gap:8px}
.lk-why h2{margin:0;font:700 12.5px/1.2 var(--f-body);letter-spacing:.02em;color:var(--muted)}
.lk-why ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.lk-why .w{position:relative;padding-left:16px;font:500 14px/1.6 var(--f-body);color:var(--soft-2)}
.lk-why .w::before{content:'';position:absolute;left:2px;top:.66em;width:6px;height:6px;border-radius:50%;background:#FF3D8A;box-shadow:0 0 6px #FF3D8A}
.lk-why .w.e::before{background:#3DE8C6;box-shadow:0 0 6px #3DE8C6}
.lk-why .w.y::before{background:#FFC83D;box-shadow:0 0 6px #FFC83D}
.lk-why .yr-h{margin:6px 0 0;font:700 12.5px/1.2 var(--f-body);letter-spacing:.02em;color:var(--fun-ink)}
.lk-why h2.yr-h{margin:0}
.saju .lk-dl{margin-top:16px}
/* 쪽지 머리의 티어 알약이 천천히 숨 쉬듯 빛난다(페이지만) */
.lk-card .saju .tier.seal{animation:breathe 3.6s ease-in-out infinite alternate}
@keyframes breathe{from{box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 10px 30px rgba(0,0,0,.45),0 0 18px rgba(var(--tc-rgb),.35)}to{box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 10px 30px rgba(0,0,0,.45),0 0 46px rgba(var(--tc-rgb),.85)}}

/* ---------- 가챠 막(#spin): 릴스 무대 그대로 — 휴대폰은 화면 가득, 600px 부터 가운데 9:16 무대(최대 480px) + 뒤 페이지 흐림 ---------- */
.spin{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(4,5,9,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .25s ease}
/* 구글 하단 앵커 광고(휴대폰): 광고 런타임이 잰 높이(html{--yn-anchor}, 손잡이 + 16px)만큼 무대 아래를 비운다. 막은 화면 전체를 덮는다 */
.spin{padding-bottom:var(--yn-anchor,0px)}
.spin>.st{height:calc(100dvh - var(--yn-anchor,0px))}
@media (min-width:600px){.spin>.st{width:min(480px,calc((100dvh - 48px - var(--yn-anchor,0px))*9/16));height:auto}}
.spin.out{opacity:0}
/* 넘겨주기(휴대폰): 무대 바탕 · 번짐 · 격자 · 위 줄 · 여섯 줄이 걷히고, 머리글 · 머리 줄 · 카드는 페이지의 같은 자리로 옮겨 간다(app.js) */
.spin.hand{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.spin.hand .st{background-color:transparent;transition:background-color .22s .06s ease}
.st .g1,.st .g2,.st .grid,.st-top,.sp-skip{transition:opacity .22s .06s ease}
.spin.hand .st .g1,.spin.hand .st .g2,.spin.hand .st .grid,.spin.hand .st-top,.spin.hand .sp-skip{opacity:0}
.st{position:relative;isolation:isolate;width:100%;height:100%;height:100dvh;overflow:hidden;background-color:#0B0D12;display:flex;flex-direction:column;padding:14px 20px 12px;transition:background-color .25s ease}
.st .g1{width:420px;height:420px;left:-170px;top:-190px;background:radial-gradient(circle,#FF3D8A 0%,transparent 70%);opacity:.6;filter:blur(36px)}
.st .g2{width:460px;height:460px;right:-200px;bottom:-220px;background:radial-gradient(circle,#3DE8C6 0%,transparent 70%);opacity:.5;filter:blur(36px)}
.st-top{display:flex;align-items:center;justify-content:space-between;gap:10px;height:34px;flex:none}
.st-brand{display:inline-flex;align-items:center;gap:8px;font:800 14px/1 'Sora',sans-serif;letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap}
.st-brand .mark{width:16px;height:16px;border-radius:50%;background:conic-gradient(from 210deg,#3DE8C6,#FFC83D,#FF7A45,#FF3D8A,#3DE8C6);-webkit-mask:radial-gradient(circle,transparent 38%,#000 41%);mask:radial-gradient(circle,transparent 38%,#000 41%);flex:none}
.st-kind{font:700 11.5px/1 var(--f-body);color:#FFC83D;padding:7px 11px;border:1.5px solid rgba(255,200,61,.75);border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.st-body{position:relative;flex:1;min-height:0;overflow:hidden;padding-top:14px}
.st-in{display:flex;flex-direction:column;gap:10px;transform-origin:50% 0}
.sp-skip{flex:none;margin:6px 0 0;text-align:center;font:500 11.5px/1.4 var(--f-body);color:var(--faint)}
/* 0.0 머리 줄: ? 가 금빛으로 뛴다 → 착지에 티어 패가 찍힌다 */
.st .lk-kick,.st .lk-hook{animation:st-in .35s ease-out both}
.st .lk-hook{animation-delay:.06s}
.hk-slot{position:relative}
.hk-ans{display:none}
.hk-q{color:#FFC83D;text-shadow:0 0 24px rgba(255,200,61,.6);animation:q-pulse .7s ease-in-out infinite alternate}
.st.land .hk-q,.st.measure .hk-q{display:none}
.st.land .hk-ans,.st.measure .hk-ans{display:inline}
.st.land .hk-ans .hk-top{display:inline-block;animation:st-in .3s ease-out both}
.st.land .hk-ans .hk-t{animation:stamp .42s .08s cubic-bezier(.2,1.4,.4,1) both}
@keyframes q-pulse{from{transform:scale(1);opacity:.85}to{transform:scale(1.14);opacity:1}}
@keyframes stamp{0%{transform:scale(1.9) rotate(-8deg);opacity:.35}40%{opacity:1}100%{transform:none;opacity:1}}
@keyframes st-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* 팔자 뽑기(2026-10-22 오너 round 6): 카드가 떠오르고(.c-on), 여덟 칸이 슬롯처럼 돌다(.spinning: 세로 잔상) 차례로 멈추며(.lock) 오행 색으로 번진다 */
.st .saju{opacity:0;transform:translateY(26px) scale(.97);transition:opacity .35s ease-out,transform .5s cubic-bezier(.2,.9,.3,1)}
.st.c-on .saju{opacity:1;transform:none}
.st .cell .reel{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;will-change:transform}
.st .cell .reel .hz{color:rgba(245,246,250,.75)}
.st .cell .reel .fin{color:inherit}
.st .cell.spinning .reel .hz{text-shadow:0 -9px 0 rgba(245,246,250,.22),0 9px 0 rgba(245,246,250,.22)}
.st .cell.lock{animation:cell-lock .34s cubic-bezier(.2,1.6,.4,1)}
.st .cell.lock .fin{animation:bloom .7s ease-out forwards}
@keyframes cell-lock{0%{transform:scale(1.22)}100%{transform:none}}
@keyframes bloom{0%{text-shadow:0 0 0 currentColor}30%{text-shadow:0 0 22px currentColor,0 0 44px currentColor}100%{text-shadow:0 0 12px currentColor}}
.st .col.me{background:none;box-shadow:none}
.st .col.me.done{background:rgba(255,200,61,.06);box-shadow:0 0 0 1.5px rgba(255,200,61,.75) inset,0 0 22px rgba(255,200,61,.3)}
.st .col .me-k{opacity:0}.st .col.me.done .me-k{opacity:1}
.st .rd{opacity:0;transition:opacity .3s}.st .col.done .rd{opacity:1}
.st .myeong .ring{animation:none;opacity:0;transition:opacity .6s}.st.c-on .myeong .ring{opacity:.09}
.st .wol{opacity:0;transform:translateY(-16px)}
.st .wol.on{opacity:1;transform:none;transition:opacity .25s,transform .4s cubic-bezier(.2,1.5,.4,1)}
.st .wol .rel{opacity:0;transform:scale(.7)}.st .wol .rel.on{opacity:1;transform:none;transition:opacity .2s,transform .3s cubic-bezier(.2,1.5,.4,1)}
.st .lower{height:0;overflow:hidden;transition:height .36s cubic-bezier(.2,.9,.3,1)}
.sj-status{position:absolute;left:0;right:0;top:100%;margin:12px 0 0;text-align:center;font:700 13px/1.3 var(--f-body);color:var(--muted);letter-spacing:.02em;transition:opacity .25s}
.st.land .sj-status{opacity:0}
/* 희귀도(착지): SSS · SS · S 빛살 + 반짝이 + 섬광, A · B 그 색 빛, C · D 조용히, F 분홍 연기 + 흔들림 — 명식 가운데에서 */
.sj-fx{position:absolute;left:50%;top:100px;width:0;height:0;z-index:3;pointer-events:none}
.sj-fx .rays{position:absolute;left:-300px;top:-300px;width:600px;height:600px;border-radius:50%;opacity:0;background:repeating-conic-gradient(from 0deg,rgba(255,200,61,.40) 0 7deg,transparent 7deg 20deg);-webkit-mask:radial-gradient(closest-side,#000 22%,transparent);mask:radial-gradient(closest-side,#000 22%,transparent)}
.sj-fx .puff{position:absolute;left:-150px;top:-120px;width:300px;height:240px;border-radius:50%;opacity:0;background:radial-gradient(closest-side,rgba(255,61,138,.55),rgba(255,61,138,.18) 55%,transparent)}
.sparks{position:absolute;left:0;top:0;width:0;height:0;z-index:3;pointer-events:none}
.sparks i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;opacity:0;background:#FFE08A;filter:drop-shadow(0 0 6px rgba(255,200,61,.9));clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.st.r-top .sj-fx .rays{animation:rays 1.1s ease-out forwards}
.st.r-top .sparks i{animation:spark 1s var(--d) cubic-bezier(.15,.8,.3,1) forwards}
.st.r-top .sparks i:nth-child(3n){background:#3DE8C6}
.st.r-mid .sj-fx .rays{background:radial-gradient(closest-side,rgba(var(--tc-rgb),.45),transparent 70%);-webkit-mask:none;mask:none;animation:halo .8s ease-out forwards}
.st.r-f .sj-fx .puff{animation:puff .7s ease-out forwards}
.st.r-f .saju{animation:glitch .42s steps(2,end)}
.st.r-f .hk-t{text-shadow:2px 0 #3DE8C6,-2px 0 #FF3D8A}
@keyframes rays{0%{opacity:0;transform:scale(.4) rotate(0)}25%{opacity:1}100%{opacity:0;transform:scale(1.15) rotate(32deg)}}
@keyframes halo{0%{opacity:0;transform:scale(.5)}30%{opacity:1}100%{opacity:0;transform:scale(1.1)}}
@keyframes puff{0%{opacity:0;transform:scale(.4)}25%{opacity:1}100%{opacity:0;transform:scale(1.3)}}
@keyframes spark{0%{opacity:0;transform:translate(0,0) scale(.3)}15%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(var(--s)) rotate(120deg)}}
@keyframes glitch{0%{transform:translate(0)}15%{transform:translate(-6px,2px) skewX(-4deg)}30%{transform:translate(5px,-2px)}45%{transform:translate(-4px,1px) skewX(3deg)}60%{transform:translate(3px,0)}80%{transform:translate(-2px,0)}100%{transform:translate(0)}}
/* 착지 섬광: 무대 전체가 한 번 번쩍(희귀도마다 세기 · 색) */
.st-flash{position:absolute;inset:0;z-index:5;pointer-events:none;background:#fff;opacity:0}
.st.r-top .st-flash{animation:st-flash .45s ease-out;background:radial-gradient(70% 50% at 50% 42%,#FFF6D8,rgba(255,200,61,.35) 60%,transparent)}
.st.r-mid .st-flash{animation:st-flash-s .4s ease-out;background:radial-gradient(70% 50% at 50% 42%,rgba(var(--tc-rgb),.7),transparent 70%)}
.st.r-f .st-flash{animation:st-flash-s .35s steps(3,end);background:linear-gradient(180deg,rgba(255,61,138,.5),rgba(61,232,198,.2))}
@keyframes st-flash{0%{opacity:0}18%{opacity:.85}100%{opacity:0}}
@keyframes st-flash-s{0%{opacity:0}20%{opacity:.4}100%{opacity:0}}
/* 쪽지: 막대가 누운 자리에서 아래로 펼쳐지고(app.js scaleY), 줄(.prt)이 한 줄씩 찍힌다 — 왼쪽에서 오른쪽으로 드러남 */
/* 아래쪽 줄(.prt)은 한 줄씩 찍힌다 — 왼쪽에서 오른쪽으로 드러남 */
.st .prt{opacity:0;clip-path:inset(0 100% 0 0)}
.st .prt.on{opacity:1;clip-path:inset(0 0 0 0);transition:opacity .12s,clip-path .26s ease-out}
.spin.hand .sj-fx,.spin.hand .sj-status{opacity:0;transition:opacity .2s}
@media (min-width:600px){
  .st{width:min(480px,calc((100dvh - 48px)*9/16));height:auto;aspect-ratio:9/16;border-radius:28px;box-shadow:0 30px 90px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08)}
  #result{margin-inline:auto}
  .lk-card{margin:0;border-radius:28px;padding:18px 22px 24px;border:1px solid rgba(255,255,255,.08);box-shadow:var(--stage-sh)}
}

/* 자세히 보기의 풀이: 일주 긴 글 · 강약과 용신(원소는 문장에만, 앞에는 그 색 점) · 이번 달 사건 목록 */
.mr>p{margin:0 0 6px;font-size:13.5px;line-height:1.65;color:var(--soft)}
.mr>p:last-child{margin-bottom:0}
.rd-ilju p.short{font-weight:700;color:var(--text)}
.mr>p .dot{display:inline-block;width:9px;height:9px;margin:0 8px 1px 1px;border-radius:50%;vertical-align:middle}
.ev-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.ev-list li{position:relative;padding-left:14px;font-size:13.5px;line-height:1.55;color:var(--soft)}
.ev-list li::before{content:'';position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:50%;background:rgb(var(--fun-rgb))}
/* 자세히 보기의 세계 순위(정확한 등수는 여기에만) */
.rank-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rank-list li{display:grid;grid-template-columns:minmax(0,auto) auto minmax(0,1fr);align-items:center;gap:8px;font-size:13.5px;line-height:1.4;color:var(--soft)}
.rank-list b{font-weight:700;color:var(--text);white-space:nowrap}
.rank-list span:last-child{text-align:right;font-variant-numeric:tabular-nums}

.acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.acts.one{grid-template-columns:minmax(0,1fr)}
.acts .btn{height:52px;padding:0 8px;font-size:14.5px;font-weight:700;white-space:normal;line-height:1.2;text-align:center}
/* 첫 화면 공유 줄(viral-fun 2026-10-29): 머리 줄(티어) 바로 밑 — 공유하기 · 인증서 저장, 친구 결과는 '내 생일로도 뽑아 보기' 하나 */
.lk-top-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:-2px 0 2px}
.lk-top-acts.one{grid-template-columns:minmax(0,1fr)}
.lk-top-acts .btn{height:50px;padding:0 8px;font-size:14.5px;font-weight:700;white-space:normal;line-height:1.2;text-align:center}
/* 친구와 비교 줄(viral-fun fix 7): 친구 결과에서 '내 생일로도'를 눌러 뜬 내 결과 — 친구 티어 vs 내 티어 + 내 결과 보내기 */
.lk-vs{display:grid;gap:8px;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.lk-vs .vs-k{font:700 12px/1.2 var(--f-body);letter-spacing:.02em;color:var(--muted)}
.lk-vs .vs-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px}
.lk-vs .vs-side{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.lk-vs .vs-side.me{align-items:flex-end;text-align:right}
.lk-vs .vs-side small{font:600 12.5px/1.2 var(--f-body);color:var(--muted)}
.lk-vs .vs-t{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
.lk-vs .vs-side.me .vs-t{justify-content:flex-end}
.lk-vs .vs-side b{font:700 13px/1.2 var(--f-body);color:var(--text);white-space:nowrap}
.lk-vs .vs-x{font:800 12px/1 'Sora',var(--f-display);color:var(--faint);text-transform:uppercase}
.lk-vs .vs-reply{height:44px;font-size:14px;font-weight:700}
/* 공유 창: 카카오톡(한국) · X 단추 줄, 앱 안 브라우저의 '길게 눌러 저장' 안내 */
.share-nets{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
.share-nets .btn{height:48px;padding:0 8px;font-size:14.5px;font-weight:700}
.share-nets .btn svg{width:16px;height:16px}
.net-kakao{background:#FEE500;border-color:#FEE500;color:#191919}
.net-x{background:#000;border-color:rgba(255,255,255,.22);color:#fff}
.share-hold{display:grid;gap:8px;padding:12px 14px;border-radius:14px;background:rgba(255,200,61,.10);border:1px solid rgba(255,200,61,.45);text-align:center}
.share-hold p{margin:0;font:700 14px/1.4 var(--f-body);color:var(--hold-ink)}
.share-hold small{font:500 12px/1.45 var(--f-body);color:var(--muted)}
.share-hold .btn{height:44px;font-size:14px;font-weight:700}
.share-hold.flash{animation:hold-flash .9s ease-out}
/* 줄이 늘어도(카카오톡 · X 줄, 저장 안내) 그림이 단추 밑으로 깔리지 않게: 줄은 줄지 않고 창이 스크롤된다. 앱 안에서는 그림을 조금 작게 */
.share-b>*{flex-shrink:0}
.share-hold:not([hidden])~.share-prev img{max-height:46vh}
@keyframes hold-flash{0%{box-shadow:0 0 0 0 rgba(255,200,61,.75)}100%{box-shadow:0 0 0 14px rgba(255,200,61,0)}}
/* 가챠 막의 빈 칸: 넘겨주기 때 페이지의 공유 줄만큼 자란다(app.js page()) — 그 전에는 자리를 차지하지 않는다(flex gap 상쇄) */
.st .st-ph{flex:none;height:0;margin-top:-10px}
.next{text-align:center;font:600 12.5px/1.4 var(--f-body);color:var(--faint)}

/* ---------- 자세히 보기(사이트 declutter 와 같은 생김새: research/2026-10-20-declutter SPEC 1.1) ---------- */
.yn-more{margin-top:2px}
.yn-more>summary{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:8px 14px;border:1px solid var(--border);border-radius:12px;color:var(--muted);font:600 13px/1.3 var(--f-body);list-style:none;cursor:pointer}
.yn-more>summary::-webkit-details-marker{display:none}
.yn-more>summary::after{content:'+';font-size:16px}
.yn-more[open]>summary::after{content:'−'}
.yn-more>summary:focus-visible{outline:2px solid var(--ring);outline-offset:3px}
.yn-more-b{display:flex;flex-direction:column;gap:14px;padding-top:14px}
.mr{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:14px}
.mr h3{margin:0 0 10px;font:800 15px/1.3 var(--f-display);letter-spacing:-.01em}
.mr-t{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:4px;margin:-4px}
.mr-t th{font:600 11px/1.3 var(--f-body);color:var(--faint);text-align:center}
.mr-t tbody th{text-align:left;width:52px}
.mr-t td{text-align:center;padding:6px 2px;border-radius:9px;background:var(--surface-2);font:600 12px/1.3 var(--f-body);color:var(--soft-2)}
.mr-t tr.gz td b{display:block;font:900 24px/1.15 var(--f-han)}
.mr-t tr.gz td small{display:block;font:600 10.5px/1.3 var(--f-body);color:var(--cell-k)}
.el-bars{display:flex;flex-direction:column;gap:8px}
.el-row{display:grid;grid-template-columns:72px minmax(0,1fr) 44px;align-items:center;gap:10px}
.el-k{display:inline-flex;align-items:baseline;gap:6px;font:700 13px/1.2 var(--f-body)}
.el-k b{font:900 18px/1 var(--f-han)}
.el-bar{height:10px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.el-bar i{display:block;height:100%;border-radius:99px;min-width:3px}
.bg0{background:var(--e0)}.bg1{background:var(--e1)}.bg2{background:var(--e2)}.bg3{background:var(--e3)}.bg4{background:var(--e4)}
.el-n{font:600 12px/1 var(--f-body);color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.mr h3 .rk-of{font:600 12px/1.2 var(--f-body);letter-spacing:0;color:var(--muted)}

/* ---------- 비슷한 것 ---------- */
.similar{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.similar h2{margin:0 0 2px;font:800 18px/1.35 var(--f-display);letter-spacing:-.02em}
.sim{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 14px 16px;border:1px solid var(--border);border-radius:16px;background:var(--sheet);color:inherit;text-decoration:none}
.sim:hover,.sim:focus-visible{border-color:rgba(var(--fun-rgb),.45)}
.sim>span{min-width:0;display:flex;flex-direction:column;gap:3px}
.sim b{font:700 14.5px/1.35 var(--f-body)}
.sim small{font:500 12px/1.4 var(--f-body);color:var(--muted)}
.sim svg{flex:none;width:16px;height:16px;color:var(--muted)}

/* ---------- sheets ---------- */
.scrim{position:fixed;inset:0;z-index:55;background:var(--ov);display:flex;align-items:flex-end}
/* 구글 하단 앵커 광고(휴대폰)는 모든 막 위에 뜬다: 시트는 그 위에 선다(html{--yn-anchor}, AMENDMENTS A3) */
.scrim{padding-bottom:var(--yn-anchor,0px)}
.scrim .sheet{max-height:calc(90vh - var(--yn-anchor,0px))}
.sheet{width:100%;max-width:560px;margin:0 auto;max-height:90vh;display:flex;flex-direction:column;border-radius:26px 26px 0 0;background:var(--sheet);border:1px solid var(--glass-b);box-shadow:var(--sheet-sh);overflow:hidden}
.sheet-h{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 13px;border-bottom:1px solid var(--border)}
.sheet-h b{font:800 19px/1.1 var(--f-body);letter-spacing:-.02em}
.x{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--glass-b);background:none;padding:0}
.x svg{width:17px;height:17px;color:var(--muted)}
.sheet-b{padding:14px 14px 20px;overflow:auto}
.other-b{display:flex;flex-direction:column;gap:16px}
.share-sheet{max-height:94vh}
.share-b{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:14px;background:var(--tint);border:1px solid var(--glass-b)}
/* 인증서 '생일 가리기'(2026-10-22 오너, 부자력 측정기 '금액 가리기'와 같은 꼴): 형식 고르기 옆 켜고 끄는 단추 */
.share-opts{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.hide-birth{height:48px;padding:0 14px;border-radius:14px;border:1px solid var(--glass-b);background:var(--tint);font:700 14px var(--f-body);color:var(--muted);white-space:nowrap}
.hide-birth[aria-pressed="true"]{background:var(--inv);color:var(--inv-text);border-color:var(--inv)}
.seg button{height:40px;border:0;border-radius:10px;background:none;font:700 14px var(--f-body);color:var(--muted);white-space:nowrap}
.seg [aria-pressed="true"]{background:var(--inv);color:var(--inv-text)}
.share-prev{display:grid;place-items:center;min-height:200px}
.share-prev img{display:block;max-width:100%;max-height:58vh;border-radius:14px;box-shadow:var(--img-sh);background:#0B0D12;transition:opacity .2s}
.share-prev img.busy{opacity:.35}
.share-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.share-acts.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.share-acts .btn{height:52px;padding:0 8px;font-size:14.5px;font-weight:700}
.toast{position:fixed;left:50%;bottom:24px;z-index:70;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--inv);color:var(--inv-text);font:600 13px var(--f-body);padding:10px 14px;border-radius:12px;transition:.25s;max-width:calc(100% - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:359px){
  .dob{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.9fr);gap:6px}
  select{padding:0 26px 0 10px;background-position:right 8px center;font-size:15px}
  .cr .it b{font-size:14px}
  /* 좁은 폰(320): 가장 긴 이름(en 'Work & business')과 알약 · % 가 한 줄에 들게 — 점선은 없어질 수 있고, 칸 사이 · 알약 안쪽 · % 글씨를 조금 줄인다.
     그래도 모자라면(가장 넓은 알약과 가장 긴 % 가 한 쪽에 같이 나올 때) 이름이 두 줄로 접힌다(알약 · % 를 덮지 않게) */
  .lk-rows{column-gap:6px}
  .cr .it{gap:6px}
  .cr .ld{min-width:0}
  .cr .it b{flex:0 1 auto;white-space:normal;line-height:1.15}
  .cr .tier.pill{padding:0 8px;gap:5px}
  .cr .pct{font-size:11.5px}
  .acts .btn svg,.lk-top-acts .btn svg,.lk-vs .vs-reply svg{display:none}   /* 좁은 폰: '인증서 발급받기'가 한 줄에 들게 아이콘을 뺀다 */
  .lk-dl{font-size:12px}
}
/* 1280px 부터: 칸(680) 오른쪽 24px 뒤 300px 가 광고 자리 #ad-rail-right(빈 칸 — 아무것도 그리지 않는다). 이민 가챠와 같은 상자 */
#ad-rail-right{display:none}
@media (min-width:1280px){
  main.wrap{position:relative;width:1024px;max-width:none;padding-right:324px}
  #ad-rail-right{display:block;position:absolute;top:16px;right:0;bottom:0;width:300px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}