/* 별사주 — "한밤의 관측소". 먹빛 하늘 · 금빛 선 · 붉은 낙관(도장).
   모양 규칙: 누르는 것은 알약(999px), 판은 22px, 판 속 칸은 14px. 움직임은 transform·opacity만. */
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }
:root {
  --bg: #07070D; --bg2: #0D0D17; --card: rgba(18, 18, 30, .72); --card2: rgba(255, 255, 255, .035);
  --line: rgba(233, 196, 106, .18); --line2: rgba(255, 255, 255, .08);
  --ink: #F2EBDD; --ink2: #BDB6A9; --ink3: #8A847A;
  --gold: #E9C46A; --gold2: #F7E2A6; --seal: #D94A2B;
  --wood: #6CC08B; --fire: #F0643C; --earth: #DDB054; --metal: #D5DAE2; --water: #5B8DEF;
  --r: 22px; --r2: 14px;
  --ease: cubic-bezier(.22, 1, .36, 1); --ease-io: cubic-bezier(.77, 0, .175, 1);
  --serif: "Hahmlet", "Nanum Myeongjo", "Batang", serif;
  --sans: "SUIT Variable", "SUIT", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  color-scheme: dark;
}
[data-el="목"], [data-el="木"] { --e: var(--wood); } [data-el="화"], [data-el="火"] { --e: var(--fire); } [data-el="토"], [data-el="土"] { --e: var(--earth); }
[data-el="금"], [data-el="金"] { --e: var(--metal); } [data-el="수"], [data-el="水"] { --e: var(--water); }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; min-height: 100vh; background: radial-gradient(120% 80% at 70% -10%, #1A1530 0%, transparent 55%), radial-gradient(90% 60% at 0% 30%, #0F1A2E 0%, transparent 60%), var(--bg);
  color: var(--ink); font: 400 17px/1.75 var(--sans); letter-spacing: -.01em; word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
::selection { background: rgba(233, 196, 106, .35); color: #fff; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
a { color: inherit; text-underline-offset: .22em; }
img, svg { display: block; max-width: 100%; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 60; padding: 8px 14px; border-radius: 999px; background: var(--gold); color: #111; }
.skip:focus { left: 12px; }
.sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }
.grain { position: fixed; inset: -50%; z-index: -1; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 2%); } }

/* ── 머리띠 ── */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 18px; height: 68px; padding: 0 clamp(16px, 3.5vw, 48px);
  background: linear-gradient(to bottom, rgba(7, 7, 13, .85), rgba(7, 7, 13, .45)); backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid var(--line2); }
.brand { display: flex; align-items: center; gap: 10px; font: 800 20px var(--serif); letter-spacing: -.02em; text-decoration: none; }
.seal { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--seal); color: #FBE9DF; font: 800 17px var(--serif);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18), 0 6px 18px -6px rgba(217, 74, 43, .8); transform: rotate(-4deg); }
.seal.sm { width: 24px; height: 24px; font-size: 13px; border-radius: 6px; }
/* 메뉴 8개 + 펼침 */
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav-i { position: relative; }
.nav-i > a { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; font-weight: 700; font-size: 15px; color: var(--ink2); text-decoration: none; white-space: nowrap; transition: color .25s var(--ease), background .25s var(--ease); }
.nav-i > a span { font-size: 14px; }
.nav-i > a:hover, .nav-i:focus-within > a { color: var(--ink); background: var(--card2); }
.nav-i.on > a { color: #16120A; background: var(--gold); }
.drop { position: absolute; left: 50%; top: 100%; padding-top: 10px; translate: -50% 0; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s .22s; z-index: 40; }
.drop-in { display: grid; min-width: 168px; padding: 8px; border-radius: 16px; background: rgba(16, 15, 26, .96); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -20px rgba(0, 0, 0, .9); }
.drop a { padding: 9px 12px; border-radius: 10px; font-size: 14.5px; font-weight: 650; color: var(--ink2); text-decoration: none; white-space: nowrap; }
.drop a:hover, .drop a:focus-visible, .drop a[aria-current] { color: var(--ink); background: rgba(233, 196, 106, .1); }
@media (hover: hover) { .nav-i:hover .drop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } }
.nav-i:focus-within .drop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* ── 공통 글자 ── */
.kicker { margin: 0 0 16px; font-weight: 700; font-size: 14px; letter-spacing: .12em; color: var(--gold); text-transform: uppercase; }
.kicker::before { content: ""; display: inline-block; width: 22px; height: 1px; margin-right: 10px; vertical-align: middle; background: var(--gold); }
.title { margin: 0; font: 800 clamp(40px, 6.2vw, 88px)/1.08 var(--serif); letter-spacing: -.04em; }
.title.sm { font-size: clamp(34px, 4.8vw, 64px); }
.title em { font-style: normal; background: linear-gradient(100deg, var(--gold2), var(--gold) 40%, #F29B5B); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ln { display: block; overflow: hidden; padding-bottom: .06em; }
.ln > span { display: inline-block; }
.js .ln > span { transform: translateY(105%); animation: lnUp 1.1s var(--ease) forwards; }
.js .ln:nth-child(2) > span { animation-delay: .12s; }
@keyframes lnUp { to { transform: none; } }
.lede { margin: 22px 0 0; max-width: 46ch; font-size: clamp(17px, 1.35vw, 19.5px); color: var(--ink2); line-height: 1.7; }
.js .rise { opacity: 0; transform: translateY(14px); animation: rise .9s var(--ease) forwards; animation-delay: .35s; }
.js .rise:nth-of-type(3) { animation-delay: .45s; } .js .rise:nth-of-type(4) { animation-delay: .55s; }
@keyframes rise { to { opacity: 1; transform: none; } }
.js [data-r] { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-r].in { opacity: 1; transform: none; }
.sec-t { margin: 0 0 28px; font: 800 clamp(26px, 3vw, 40px)/1.2 var(--serif); letter-spacing: -.03em; }
.fine { color: var(--ink3); font-size: 14px; line-height: 1.7; }
.fine a { color: var(--gold); }

/* ── 버튼 ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 56px; padding: 0 28px; border: 0; border-radius: 999px; font: 800 17px var(--sans);
  text-decoration: none; cursor: pointer; transition: transform .18s var(--ease), box-shadow .3s var(--ease); position: relative; overflow: hidden; }
.btn i { font-style: normal; transition: transform .3s var(--ease); }
.btn:active { transform: scale(.97); }
.btn.gold { color: #1A1406; background: linear-gradient(120deg, var(--gold2), var(--gold) 55%, #E3A548); box-shadow: 0 14px 34px -14px rgba(233, 196, 106, .75); }
.btn.gold::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-120%); }
@media (hover: hover) { .btn.gold:hover::after { transform: translateX(120%); transition: transform .9s var(--ease); } .btn:hover i { transform: translateX(4px); } }
.btn.ghost { color: var(--ink); background: var(--card2); box-shadow: inset 0 0 0 1px var(--line2); }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ── 첫 화면 ── */
.hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, 470px); gap: clamp(28px, 4vw, 64px); align-items: center;
  max-width: 1360px; margin: 0 auto; padding: clamp(36px, 6vw, 88px) clamp(16px, 3.5vw, 48px) clamp(40px, 5vw, 72px); min-height: min(calc(100vh - 68px), 880px); }
/* 관측판은 입력 카드 뒤(오른쪽)에 둔다 — 제목 뒤에 두면 가운데 '星'이 글자와 겹친다 */
.hero-sky { position: absolute; right: clamp(-260px, -10vw, -60px); top: 50%; width: min(860px, 80vw); translate: 0 -50%; z-index: -1; opacity: .5; pointer-events: none;
  mask-image: radial-gradient(closest-side, #000 60%, transparent 100%); }
.hero .title { font-size: clamp(38px, 4.6vw, 72px); }
.proof { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 0; padding: 0; list-style: none; }
.proof li { padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 650; color: var(--ink2); background: var(--card2); box-shadow: inset 0 0 0 1px var(--line); }
.proof li::before { content: "✦ "; color: var(--gold); }

/* 아스트롤라베 */
.astro { width: 100%; height: auto; overflow: visible; }
.astro text { fill: var(--ink2); font-family: var(--serif); }
.a-line { fill: none; stroke: var(--line); stroke-width: 1; } .a-line.dim { stroke: var(--line2); }
.a-tick { stroke: rgba(233, 196, 106, .35); stroke-width: 1; } .a-tick2 { stroke: rgba(233, 196, 106, .6); stroke-width: 1.5; }
.a-term { fill: var(--ink3) !important; font-family: var(--sans) !important; font-weight: 600; letter-spacing: .08em; }
.a-branch { fill: var(--gold2) !important; font-weight: 700; } .a-stem { fill: var(--ink2) !important; }
.a-el { fill: var(--gold) !important; font-weight: 800; } .a-penta { fill: rgba(233, 196, 106, .04); stroke: rgba(233, 196, 106, .4); stroke-width: 1; }
.a-core { fill: var(--seal) !important; font-size: 60px; font-weight: 900; filter: drop-shadow(0 0 18px rgba(217, 74, 43, .6)); }
.a-planet { fill: var(--gold2); filter: drop-shadow(0 0 8px var(--gold)); } .a-planet.p2 { fill: var(--seal); }
.spin, .orbit { transform-origin: 50% 50%; transform-box: view-box; }
.s1 { animation: rot 240s linear infinite; } .s2 { animation: rot 160s linear infinite reverse; } .s3 { animation: rot 110s linear infinite; }
.s4 { animation: rot 80s linear infinite reverse; } .orbit { animation: rot 26s linear infinite; } .orbit.o2 { animation-duration: 14s; animation-direction: reverse; }
@keyframes rot { to { transform: rotate(360deg); } }
.astro.busy .s1 { animation-duration: 6s; } .astro.busy .s2 { animation-duration: 4s; } .astro.busy .s3 { animation-duration: 3s; } .astro.busy .s4 { animation-duration: 2s; }

/* ── 입력 카드 ── */
.card { position: relative; padding: clamp(22px, 2.4vw, 32px); border-radius: var(--r); background: var(--card); backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 0 0 1px var(--line2), 0 40px 80px -40px rgba(0, 0, 0, .8); }
.card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(233, 196, 106, .55), transparent 35%, transparent 65%, rgba(217, 74, 43, .4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.card-t { margin: 0 0 18px; font: 800 22px var(--serif); letter-spacing: -.02em; }
.bf { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 14px; }
.bf-t { padding: 0; margin: 0 0 4px; font: 800 20px var(--serif); }
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px var(--line2); width: fit-content; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: block; padding: 7px 16px; border-radius: 999px; font-weight: 700; font-size: 15px; color: var(--ink2); transition: background .25s var(--ease), color .25s var(--ease); }
.seg input:checked + span { background: var(--ink); color: #111; }
.seg input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.seg .leap { display: none; } .bf.lunar .seg .leap { display: block; }
.seg .leap input:checked + span { background: var(--gold); }
.seg.sm span { padding: 8px 14px; }
.row3 { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; } .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fld { display: grid; gap: 6px; min-width: 0; }
.fld > span { font-size: 13px; font-weight: 700; color: var(--ink3); letter-spacing: .02em; }
.fld input, .fld select { width: 100%; height: 48px; padding: 0 14px; border: 0; border-radius: 12px; background: rgba(0, 0, 0, .38); color: var(--ink); font: 650 16px var(--sans);
  box-shadow: inset 0 0 0 1px var(--line2); transition: box-shadow .2s var(--ease); appearance: none; -webkit-appearance: none; }
.fld select { background-image: linear-gradient(45deg, transparent 50%, var(--ink3) 50%), linear-gradient(135deg, var(--ink3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
.fld select option { background: #15151F; }
.fld input:focus, .fld select:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--gold); }
.fld input::placeholder { color: #5E5A54; }
.fld .seg { height: 48px; align-items: center; }
.adv { border-radius: 12px; background: rgba(0, 0, 0, .22); padding: 0 14px; box-shadow: inset 0 0 0 1px var(--line2); }
.adv summary { padding: 12px 0; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--ink2); list-style: none; }
.adv summary::-webkit-details-marker { display: none; }
.adv summary::before { content: "+ "; color: var(--gold); } .adv[open] summary::before { content: "− "; }
.adv .row2 { margin-bottom: 10px; }
.hint { margin: 0 0 14px; font-size: 13.5px; color: var(--ink3); line-height: 1.65; } .hint b { color: var(--ink2); }
.form-card .btn { width: 100%; margin-top: 18px; }
.err { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: rgba(217, 74, 43, .14); color: #FFB4A0; font-size: 15px; font-weight: 600; }
.bf .bad { box-shadow: inset 0 0 0 1.5px var(--seal) !important; animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* ── 60갑자 흐름 띠 ── */
.ganji-marq { overflow: hidden; border-block: 1px solid var(--line2); padding: 14px 0; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.ganji-marq > div { display: flex; gap: 30px; width: max-content; animation: marq 90s linear infinite; }
.ganji-marq span { font: 700 22px var(--serif); color: rgba(233, 196, 106, .45); letter-spacing: .1em; }
@keyframes marq { to { transform: translateX(-50%); } }

/* ── 구역 ── */
.band { max-width: 1280px; margin: 0 auto; padding: clamp(56px, 7vw, 110px) clamp(16px, 3.5vw, 48px) 0; }
.band.narrow { max-width: 860px; }
.feat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.feat-i { padding: 26px; border-radius: var(--r); background: var(--card2); box-shadow: inset 0 0 0 1px var(--line2); transition: background .3s var(--ease), transform .3s var(--ease); }
.feat-i:hover { background: rgba(233, 196, 106, .06); }
.feat-h { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; margin-bottom: 16px; font: 800 24px var(--serif); color: var(--gold); box-shadow: inset 0 0 0 1px var(--line); }
.feat-i h3 { margin: 0 0 6px; font: 800 20px var(--serif); } .feat-i p { margin: 0; color: var(--ink2); font-size: 15.5px; }
.promos { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 14px; }
.promo { position: relative; display: block; min-height: 300px; padding: 30px; border-radius: var(--r); text-decoration: none; overflow: hidden; isolation: isolate; box-shadow: inset 0 0 0 1px var(--line2); transition: transform .4s var(--ease); }
.promo::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .9; transition: transform .8s var(--ease); }
.p-gh::before { background: radial-gradient(80% 90% at 90% 110%, rgba(240, 100, 60, .55), transparent 60%), radial-gradient(60% 80% at 10% 0%, rgba(233, 196, 106, .25), transparent 60%), #150E14; }
.p-tr::before { background: radial-gradient(80% 90% at 100% 0%, rgba(91, 141, 239, .5), transparent 60%), #0C1020; }
.p-yr::before { background: radial-gradient(90% 90% at 0% 100%, rgba(217, 74, 43, .6), transparent 60%), #160B0A; }
.promo:hover { transform: translateY(-4px); } .promo:hover::before { transform: scale(1.08); }
.promo-k { font-size: 13px; font-weight: 800; letter-spacing: .12em; color: var(--gold); }
.promo h3 { margin: 12px 0 10px; font: 800 clamp(24px, 2.2vw, 30px)/1.25 var(--serif); letter-spacing: -.03em; }
.promo p { margin: 0; max-width: 34ch; color: var(--ink2); font-size: 15.5px; }
.promo > i { position: absolute; right: 26px; bottom: 22px; font-style: normal; font-size: 28px; color: var(--gold); transition: transform .3s var(--ease); }
.promo:hover > i { transform: translateX(6px); }
.ilgan-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.ig { position: relative; display: grid; gap: 2px; padding: 22px 20px; border-radius: var(--r2); text-decoration: none; background: var(--card2); box-shadow: inset 0 0 0 1px var(--line2); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.ig b { font: 900 46px/1 var(--serif); color: var(--e); text-shadow: 0 0 26px color-mix(in oklab, var(--e) 45%, transparent); }
.ig span { margin-top: 10px; font-weight: 800; } .ig small { color: var(--ink3); font-size: 13.5px; line-height: 1.5; }
.ig:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--e) 60%, transparent); }
.ilgan-grid.big .ig { padding: 28px 24px; } .ilgan-grid.big .ig b { font-size: 60px; }
.qa { border-bottom: 1px solid var(--line2); }
.qa summary { display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; cursor: pointer; font-weight: 750; font-size: 18px; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; color: var(--gold); font-size: 22px; line-height: 1; transition: transform .3s var(--ease); }
.qa[open] summary::after { transform: rotate(45deg); }
.qa p { margin: 0 0 22px; color: var(--ink2); max-width: 70ch; }
.faq { max-width: 900px; }
.cta-band { margin-top: 20px; padding: clamp(28px, 4vw, 48px); border-radius: var(--r); text-align: center; background: radial-gradient(90% 120% at 50% 0%, rgba(233, 196, 106, .14), transparent 60%), var(--card2); box-shadow: inset 0 0 0 1px var(--line); }
.cta-band h2 { margin: 0 0 10px; font: 800 clamp(24px, 2.6vw, 32px) var(--serif); } .cta-band p { margin: 0 auto 22px; max-width: 48ch; color: var(--ink2); }

/* ── 결과 ── */
.result { max-width: 1180px; margin: 0 auto; padding: 20px clamp(16px, 3.5vw, 48px) 40px; scroll-margin-top: 80px; }
.loading { display: grid; place-items: center; gap: 18px; padding: 60px 0; color: var(--ink2); font-weight: 700; }
.loading .astro { width: 180px; }
.res-head { text-align: center; padding: 30px 0 10px; }
.res-head .kicker::before { display: none; }
.res-head h2 { margin: 0; font: 800 clamp(28px, 4vw, 52px)/1.2 var(--serif); letter-spacing: -.035em; }
.res-head .one { margin: 12px 0 0; font-size: 19px; color: var(--ink2); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 0; padding: 0; }
.chips span { padding: 6px 13px; border-radius: 999px; font-size: 14px; font-weight: 700; background: var(--card2); box-shadow: inset 0 0 0 1px var(--line); color: var(--gold2); }
.meta-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 16px 0 0; color: var(--ink3); font-size: 14.5px; }
.meta-line b { color: var(--ink2); font-weight: 700; }
.pillars { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 12px; margin: 34px auto 0; max-width: 820px; }
.pillar { position: relative; display: grid; gap: 8px; padding: 18px 10px 16px; border-radius: 18px; text-align: center; background: var(--card); box-shadow: inset 0 0 0 1px var(--line2); }
.pillar.me { box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 50px -18px rgba(233, 196, 106, .6); }
.pillar .pl { font-size: 13px; font-weight: 800; color: var(--ink3); letter-spacing: .1em; }
.pillar.me .pl { color: var(--gold); }
.god { font-size: 13px; font-weight: 700; color: var(--ink2); }
.glyph { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 16px; background: color-mix(in oklab, var(--e) 16%, rgba(0, 0, 0, .4)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--e) 45%, transparent); }
.glyph b { font: 900 clamp(38px, 5.5vw, 62px)/1 var(--serif); color: var(--e); text-shadow: 0 0 30px color-mix(in oklab, var(--e) 50%, transparent); }
.glyph small { position: absolute; right: 8px; bottom: 6px; font-size: 12px; font-weight: 800; color: var(--ink2); }
.js .result .glyph { opacity: 0; transform: scale(1.5) rotate(-8deg); filter: blur(6px); }
.result.show .glyph { animation: stamp .7s var(--ease) forwards; animation-delay: calc(var(--d, 0) * 110ms + .1s); }
@keyframes stamp { 60% { opacity: 1; transform: scale(.94) rotate(1deg); filter: blur(0); } 100% { opacity: 1; transform: none; filter: none; } }
.hidden-st { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink3); }
.hidden-st i { font-style: normal; padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, .04); color: color-mix(in oklab, var(--e) 70%, var(--ink2)); }
.stage12 { font-size: 12.5px; color: var(--ink3); } .stage12 b { color: var(--ink2); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.panel { padding: clamp(20px, 2.4vw, 30px); border-radius: var(--r); background: var(--card); box-shadow: inset 0 0 0 1px var(--line2); min-width: 0; }
.panel h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 800 21px var(--serif); letter-spacing: -.02em; }
.panel h3 .ic { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; font-size: 16px; color: var(--gold); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--sans); }
.panel p { margin: 0 0 12px; color: var(--ink2); } .panel p:last-child { margin-bottom: 0; }
.sp-block { margin-top: 34px; }
.radar-wrap { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 20px; align-items: center; }
.radar .grid-l { fill: none; stroke: var(--line2); } .radar .shape { fill: rgba(233, 196, 106, .18); stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; }
.radar text { fill: var(--ink2); font: 800 14px var(--serif); }
.js .radar .shape { transform-origin: 50% 50%; transform-box: view-box; transform: scale(0); } .result.show .radar .shape { animation: pop 1.1s var(--ease) .5s forwards; }
@keyframes pop { to { transform: scale(1); } }
.bars { display: grid; gap: 10px; }
.bar { display: grid; grid-template-columns: 64px minmax(0, 1fr) 28px; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 700; }
.bar .track { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.bar .fill { display: block; height: 100%; width: calc(var(--v) * 1%); border-radius: inherit; background: var(--e, var(--gold)); transform-origin: 0 50%; }
.js .result .bar .fill { transform: scaleX(0); } .result.show .bar .fill { animation: grow 1s var(--ease) forwards; animation-delay: calc(var(--d, 0) * 90ms + .6s); }
@keyframes grow { to { transform: scaleX(1); } }
.bar small { color: var(--ink3); font-weight: 600; }
.bar .n { text-align: right; color: var(--ink); }
.gauge { position: relative; height: 12px; margin: 30px 0 34px; border-radius: 99px; background: linear-gradient(90deg, #4E7BD9, #6CC08B 35%, #E9C46A 55%, #F0643C); }
.gauge i { position: absolute; top: 50%; left: calc(var(--at) * 1%); width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 5px rgba(7, 7, 13, .9), 0 0 24px var(--gold); }
.js .result .gauge i { left: 50%; transition: left 1.4s var(--ease) .7s; } .result.show .gauge i { left: calc(var(--at) * 1%); }
.gauge-l { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink3); font-weight: 700; }
.gauge-l b { color: var(--gold); }
.yong { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; }
.orb { display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%; font: 900 44px var(--serif); color: #111;
  background: radial-gradient(circle at 35% 30%, #fff 0%, var(--e) 45%, color-mix(in oklab, var(--e) 50%, #000) 100%); box-shadow: 0 0 60px -6px var(--e); animation: breathe 4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.05); box-shadow: 0 0 80px 0 var(--e); } }
.lucky { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.lucky div { padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, .035); text-align: center; }
.lucky small { display: block; font-size: 12px; color: var(--ink3); font-weight: 700; } .lucky b { font-size: 15px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ss { padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--line2); }
.ss b { font: 800 17px var(--serif); } .ss em { margin-left: 6px; font-style: normal; font-size: 12.5px; color: var(--gold); } .ss p { margin: 6px 0 0; font-size: 14.5px; }
.ss-list { display: grid; gap: 10px; }
.rel { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 700; background: rgba(108, 192, 139, .12); color: #A6E3BD; }
.rel.clash { background: rgba(240, 100, 60, .13); color: #FFB39A; } .rel small { color: var(--ink3); font-weight: 600; }
.sec-card .top-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.sec-card h3 { margin: 0; }
.ring { --p: 0; position: relative; flex: none; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--gold) calc(var(--p) * 1%), rgba(255, 255, 255, .07) 0); transition: --p 1.6s var(--ease) .6s; }
.ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #11111B; }
.ring b { position: relative; font: 800 20px var(--serif); } .ring small { position: absolute; bottom: -20px; font-size: 11.5px; color: var(--ink3); white-space: nowrap; }
.result.show .ring { --p: var(--v); }
.why { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; } .why span { padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--gold2); background: rgba(233, 196, 106, .1); }
.years { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.yr { position: relative; overflow: hidden; }
.yr .gj { position: absolute; right: 14px; top: 6px; font: 900 76px/1 var(--serif); color: rgba(233, 196, 106, .09); pointer-events: none; }
.yr .theme { display: inline-block; margin-bottom: 10px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; color: #1A1406; background: var(--gold); }
.mini-scores { display: flex; gap: 14px; margin-top: 12px; font-size: 14px; color: var(--ink3); } .mini-scores b { color: var(--ink); }
.months { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.mo { position: relative; padding: 14px 10px; border-radius: 14px; text-align: center; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--line2); }
.mo b { display: block; font: 800 22px var(--serif); } .mo small { display: block; font-size: 12px; color: var(--ink3); }
.mo p { margin: 6px 0 0 !important; font-size: 12.5px !important; line-height: 1.45; }
.mo.good { box-shadow: inset 0 0 0 1.5px var(--gold); background: rgba(233, 196, 106, .07); }
.mo.good::after { content: "좋은 달"; position: absolute; top: -9px; left: 50%; translate: -50% 0; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; background: var(--gold); color: #111; }
.mo.care { box-shadow: inset 0 0 0 1px rgba(240, 100, 60, .5); }
.luck { display: flex; gap: 10px; overflow-x: auto; padding: 14px 2px 8px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.lk { flex: none; width: 96px; padding: 14px 8px; border-radius: 14px; text-align: center; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--line2); scroll-snap-align: start; }
.lk b { display: block; font: 800 26px/1.2 var(--serif); } .lk small { display: block; font-size: 12px; color: var(--ink3); }
.lk.now { background: rgba(233, 196, 106, .1); box-shadow: inset 0 0 0 1.5px var(--gold); } .lk.now small:first-child { color: var(--gold); font-weight: 800; }
.zodiac { display: flex; gap: 18px; align-items: center; }
.zodiac .zs { flex: none; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; font-size: 38px; color: var(--gold2); box-shadow: inset 0 0 0 1px var(--line), 0 0 40px -10px var(--gold); }
.res-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 40px 0 0; }
.disc { margin: 26px auto 0; max-width: 70ch; text-align: center; }

/* ── 서브 페이지 머리 ── */
.page-head { position: relative; max-width: 1100px; margin: 0 auto; padding: clamp(48px, 7vw, 100px) clamp(16px, 3.5vw, 48px) 20px; text-align: center; }
.page-head .kicker::before { display: none; } .page-head .lede { margin-inline: auto; }
.ph-astro { position: absolute; left: 50%; top: 50%; width: min(620px, 92vw); translate: -50% -50%; z-index: -1; opacity: .35; mask-image: radial-gradient(closest-side, #000 55%, transparent); }
.year-head .horse { display: flex; justify-content: center; gap: 12px; margin-bottom: 20px; }
.horse span { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 20px; font: 900 50px var(--serif); color: #FFE7DC; background: linear-gradient(145deg, #F0643C, #A12A12); box-shadow: 0 20px 60px -20px rgba(240, 100, 60, .9); animation: float 5s ease-in-out infinite; }
.horse span + span { animation-delay: -2.5s; }
@keyframes float { 50% { transform: translateY(-8px) rotate(2deg); } }
.tti-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tti { padding: 22px; border-radius: var(--r); background: var(--card2); box-shadow: inset 0 0 0 1px var(--line2); }
.tti header { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.tti header b { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; font: 900 28px var(--serif); color: var(--gold2); box-shadow: inset 0 0 0 1px var(--line); flex: none; }
.tti h2 { margin: 0; font: 800 21px var(--serif); } .tti header p { margin: 0; font-size: 13px; color: var(--ink3); }
.tti > p { margin: 0 0 12px; color: var(--ink2); font-size: 15px; } .tti small { color: var(--ink3); font-size: 12.5px; }
.tone { font-weight: 800; }
.t-good .tone, .t-hero .tone { color: var(--gold); } .t-good { background: rgba(233, 196, 106, .05); } .t-hero { box-shadow: inset 0 0 0 1.5px var(--seal); }
.t-move .tone, .t-care .tone { color: #FF9D7E; } .t-grow .tone { color: #A6E3BD; }
.how { display: grid; gap: 12px; padding-left: 22px; color: var(--ink2); } .how b { color: var(--ink); }

/* 궁합 */
.gh-form { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: center; max-width: 1080px; margin: 20px auto 0; padding: 0 clamp(16px, 3.5vw, 48px); }
.gh-mid span { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; font-size: 24px; color: var(--seal); box-shadow: inset 0 0 0 1px var(--line); animation: beat 1.6s ease-in-out infinite; }
@keyframes beat { 15% { transform: scale(1.15); } 30% { transform: scale(1); } 45% { transform: scale(1.1); } }
.gh-go { grid-column: 1 / -1; text-align: center; } .gh-go .btn { min-width: 260px; }
.gh-score { display: grid; place-items: center; margin: 20px auto 0; }
.gh-score .ring { width: 170px; height: 170px; } .gh-score .ring::before { inset: 10px; } .gh-score .ring b { font-size: 48px; }
.gh-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; max-width: 760px; margin: 30px auto 0; }
.gh-p { text-align: center; } .gh-p .glyph { width: 110px; margin: 0 auto 10px; } .gh-p b.nm { font: 800 19px var(--serif); } .gh-p small { display: block; color: var(--ink3); }
.pts { display: grid; gap: 10px; margin-top: 14px; }
.pt { padding: 14px 16px; border-radius: 14px; background: rgba(108, 192, 139, .08); box-shadow: inset 0 0 0 1px rgba(108, 192, 139, .25); color: var(--ink2); }
.pt.clash { background: rgba(240, 100, 60, .08); box-shadow: inset 0 0 0 1px rgba(240, 100, 60, .3); } .pt.care { background: rgba(233, 196, 106, .06); box-shadow: inset 0 0 0 1px var(--line); }

/* 타로 */
.tarot { max-width: 1180px; margin: 0 auto; padding: 10px clamp(16px, 3.5vw, 48px) 0; }
.spreads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.spreads label { position: relative; cursor: pointer; }
.spreads input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.spreads span { display: grid; gap: 2px; padding: 16px; border-radius: var(--r2); background: var(--card2); box-shadow: inset 0 0 0 1px var(--line2); text-align: center; transition: box-shadow .25s var(--ease), background .25s var(--ease); }
.spreads small { color: var(--ink3); font-size: 13px; }
.spreads input:checked + span { background: rgba(233, 196, 106, .1); box-shadow: inset 0 0 0 1.5px var(--gold); }
.spreads input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.fld.q { max-width: 640px; margin: 16px auto 0; }
.stage { position: relative; height: clamp(300px, 34vw, 400px); margin: 26px 0 0; perspective: 1400px; }
.deck { position: absolute; inset: 0; }
.stage.done { height: 0; margin: 0; overflow: hidden; transition: height .6s var(--ease); }
.stage-msg { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; text-align: center; color: var(--ink2); font-weight: 700; pointer-events: none; }
.tcard { --w: clamp(74px, 8.4vw, 112px); position: absolute; left: 50%; top: 42%; width: var(--w); aspect-ratio: 11 / 18; margin-left: calc(var(--w) / -2); translate: 0 -50%; border: 0; padding: 0; background: none; cursor: pointer;
  transform-style: preserve-3d; transition: transform .7s var(--ease), opacity .4s; will-change: transform; }
.tcard .face { position: absolute; inset: 0; border-radius: 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.tcard .back { background: #140F22; box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .5), 0 12px 30px -12px rgba(0, 0, 0, .9); }
.tcard .front { transform: rotateY(180deg); }
.tcard svg { width: 100%; height: 100%; }
.tcard:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 10px; }
.deck.fanned .tcard:hover { z-index: 200 !important; }
.tcard.gone { opacity: 0; pointer-events: none; }
.t-actions { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.slots { display: flex; justify-content: center; gap: clamp(12px, 3vw, 36px); margin-top: 30px; perspective: 1400px; }
.slot { width: clamp(120px, 15vw, 180px); text-align: center; }
.slot .sc { position: relative; width: 100%; aspect-ratio: 11 / 18; border-radius: 12px; outline: 1px dashed var(--line); transform-style: preserve-3d; transition: transform 1s var(--ease); }
.slot .sc.filled { outline-color: transparent; }
.slot .sc.flip { transform: rotateY(180deg); } .slot .sc.rev .front svg { transform: rotate(180deg); }
.slot .sc .face { position: absolute; inset: 0; border-radius: 12px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.slot .sc .back { background: #140F22; box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .5); } .slot .sc .front { transform: rotateY(180deg); box-shadow: 0 20px 60px -20px rgba(233, 196, 106, .5); }
.slot .sc svg { width: 100%; height: 100%; }
.slot p { margin: 12px 0 0; font-size: 14px; font-weight: 800; color: var(--gold); }
.slot .nm { margin: 2px 0 0; font-size: 15px; color: var(--ink); } .slot .nm small { color: var(--ink3); }
.reading { display: grid; gap: 14px; max-width: 880px; margin: 30px auto 0; }
.rd h3 small { font: 700 14px var(--sans); color: var(--ink3); }
.rd .kw { display: inline-block; margin-bottom: 10px; padding: 4px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 800; color: #1A1406; background: var(--gold); }
.rd .kw.r { background: #FF9D7E; }

/* 일간 백과 · 문서 */
.ilgan, .doc { max-width: 860px; margin: 0 auto; padding: clamp(40px, 6vw, 80px) clamp(16px, 3.5vw, 48px) 0; }
.il-head { position: relative; text-align: center; }
.il-glyph { font: 900 clamp(130px, 22vw, 230px)/1 var(--serif); color: var(--e); text-shadow: 0 0 80px color-mix(in oklab, var(--e) 55%, transparent); margin-bottom: 10px; animation: float 6s ease-in-out infinite; }
.il-head .lede { margin-inline: auto; } .il-head .kicker::before { display: none; }
.il-body h2, .doc h2 { margin: 44px 0 12px; font: 800 26px var(--serif); } .il-body p, .doc p { color: var(--ink2); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.box { padding: 20px 22px; border-radius: var(--r2); background: var(--card2); box-shadow: inset 0 0 0 1px var(--line2); }
.box h3 { margin: 0 0 8px; font: 800 18px var(--serif); } .box ul { margin: 0; padding-left: 18px; color: var(--ink2); }
.box.good h3 { color: #A6E3BD; } .box.care h3 { color: #FFB39A; }
.il-nav { display: flex; justify-content: space-between; gap: 10px; margin: 40px 0 0; padding-top: 20px; border-top: 1px solid var(--line2); }
.il-nav a { padding: 10px 16px; border-radius: 999px; text-decoration: none; font-weight: 750; background: var(--card2); }
.il-nav a:hover { background: rgba(233, 196, 106, .12); }

/* ── 카테고리 타일 ── */
.cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cat-t { --c: var(--gold); position: relative; padding: 22px 22px 20px; border-radius: var(--r); background: var(--card2); box-shadow: inset 0 0 0 1px var(--line2); overflow: hidden; isolation: isolate; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.cat-t::before { content: ""; position: absolute; inset: auto -30% -60% auto; width: 220px; height: 220px; border-radius: 50%; z-index: -1; background: radial-gradient(closest-side, color-mix(in oklab, var(--c) 40%, transparent), transparent); opacity: .5; transition: transform .8s var(--ease), opacity .4s; }
.cat-t:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 55%, transparent); } .cat-t:hover::before { transform: scale(1.3); opacity: .9; }
[data-cat="saju"] { --c: #E9C46A; } [data-cat="tarot"] { --c: #7FA8FF; } [data-cat="crush"] { --c: #FF8FB1; } [data-cat="gunghap"] { --c: #F0643C; }
[data-cat="breakup"] { --c: #9AA3B5; } [data-cat="reunion"] { --c: #FF7A45; } [data-cat="marriage"] { --c: #F7E2A6; } [data-cat="fortune"] { --c: #6CC08B; }
.cat-h { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.cat-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; font-size: 22px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px var(--line2); }
.cat-h h3 { margin: 0; font: 800 22px var(--serif); letter-spacing: -.02em; }
.cat-h i { margin-left: auto; font-style: normal; color: var(--c); transition: transform .3s var(--ease); } .cat-h:hover i { transform: translateX(4px); }
.cat-sub { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; }
.cat-sub a { padding: 5px 11px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--ink2); text-decoration: none; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px var(--line2); transition: color .2s, box-shadow .2s; }
.cat-sub a:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--c); }

/* ── 안내 카드 ── */
.gcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gcards.one { grid-template-columns: minmax(0, 1fr); margin-top: 12px; }
.gcard { position: relative; display: block; min-height: 160px; padding: 22px 22px 46px; border-radius: var(--r); text-decoration: none; background: linear-gradient(160deg, rgba(233, 196, 106, .07), transparent 55%), var(--card2); box-shadow: inset 0 0 0 1px var(--line2); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.gcard:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line), 0 24px 50px -30px rgba(233, 196, 106, .45); }
.gc-k { font-size: 12.5px; font-weight: 800; letter-spacing: .08em; color: var(--gold); }
.gcard h3 { margin: 8px 0 6px; font: 800 20px/1.3 var(--serif); letter-spacing: -.02em; }
.gcard p { margin: 0; font-size: 15px; color: var(--ink2); line-height: 1.55; }
.gcard > i { position: absolute; left: 22px; bottom: 16px; font-style: normal; color: var(--gold); transition: transform .3s var(--ease); } .gcard:hover > i { transform: translateX(5px); }
.gcard.wide { min-height: 0; }

/* ── 안내 페이지 ── */
.page-head.gh { padding-bottom: 0; }
.crumb { display: flex; justify-content: center; gap: 8px; margin-bottom: 18px; font-size: 14px; font-weight: 700; color: var(--ink3); }
.crumb a { color: var(--ink2); text-decoration: none; } .crumb a:hover { color: var(--gold); }
.title .q { font-size: .56em; font-weight: 700; letter-spacing: -.03em; color: var(--ink); line-height: 1.35; }
.page-head .lede + .lede { margin-top: 12px; }
.band.tight { padding-top: 28px; }
.tool-band { max-width: 1180px; }
.tool-saju { display: grid; justify-items: center; } .tool-saju .form-card { width: min(520px, 100%); }
.safe { margin: 12px 0 0; text-align: center; font-size: 13px; }
.sp-top { margin-top: 48px; }
.how li { padding-left: 4px; }
.spread-fixed { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; }
.spread-fixed span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: 15px; background: var(--card2); box-shadow: inset 0 0 0 1px var(--line); }
.spread-fixed b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; color: #111; background: var(--gold); }
.lean { text-align: center; background: radial-gradient(90% 140% at 50% 0%, rgba(233, 196, 106, .16), transparent 60%), var(--card); }
.lean h3 { justify-content: center; font-size: clamp(24px, 3vw, 32px); } .lean-k { margin: 0 0 6px !important; font-size: 13px; font-weight: 800; letter-spacing: .1em; color: var(--gold) !important; }
.lean.wait { background: radial-gradient(90% 140% at 50% 0%, rgba(127, 168, 255, .14), transparent 60%), var(--card); } .lean.wait .lean-k { color: #9DBBFF !important; }

/* ── 결과: 넓은 조각 · 해 · 일진 ── */
.one-col { margin-top: 14px; }
.focus-t { color: var(--gold2); }
.sub-t { margin: 20px 0 10px !important; font-weight: 800; color: var(--ink) !important; }
.yrow { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.yb { display: grid; gap: 2px; padding: 12px 6px; border-radius: 12px; text-align: center; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--line2); }
.yb b { font: 800 17px var(--serif); } .yb small { font-size: 11.5px; color: var(--ink3); } .yb i { font-style: normal; font-size: 11px; line-height: 1.35; color: var(--ink3); }
.yb.lv1 { background: rgba(233, 196, 106, .06); box-shadow: inset 0 0 0 1px var(--line); } .yb.lv1 i { color: var(--gold2); }
.yb.lv2 { background: linear-gradient(160deg, rgba(233, 196, 106, .28), rgba(233, 196, 106, .08)); box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 30px -10px var(--gold); } .yb.lv2 i { color: var(--gold2); font-weight: 700; }
.today { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 26px; align-items: center; }
.today .ring { width: 110px; height: 110px; } .today .ring b { font-size: 32px; }
.today-t { margin: 0 0 6px !important; font: 800 24px var(--serif); color: var(--ink) !important; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.dy { display: grid; gap: 6px; padding: 14px 8px; border-radius: 14px; text-align: center; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--line2); }
.dy small { font-size: 12px; color: var(--ink3); font-weight: 700; } .dy b { font: 800 22px var(--serif); }
.dy p { margin: 0 !important; font-size: 12.5px !important; line-height: 1.4; }
.dy .sc { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.dy .sc i { display: block; height: 100%; width: calc(var(--v) * 1%); background: linear-gradient(90deg, #5B8DEF, var(--gold)); border-radius: inherit; }
.dy.best { background: rgba(233, 196, 106, .1); box-shadow: inset 0 0 0 1.5px var(--gold); } .dy.low { opacity: .75; }
.toast { position: fixed; left: 50%; bottom: 28px; translate: -50% 0; z-index: 99; padding: 12px 18px; border-radius: 999px; background: var(--ink); color: #111; font-weight: 700; box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .7); }

/* ── 발 ── */
.foot-map { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 16px; margin: 26px 0 26px; padding-bottom: 26px; border-bottom: 1px solid var(--line2); }
.foot-map div { display: grid; gap: 6px; align-content: start; }
.foot-map a { color: var(--ink3); text-decoration: none; font-size: 13.5px; } .foot-map a:hover { color: var(--gold); }
.foot-map .fm-h { color: var(--ink); font-weight: 800; font-size: 14.5px; margin-bottom: 2px; }
.foot { margin-top: clamp(80px, 10vw, 140px); border-top: 1px solid var(--line2); background: rgba(0, 0, 0, .35); }
.foot-in { max-width: 1280px; margin: 0 auto; padding: 40px clamp(16px, 3.5vw, 48px) 50px; color: var(--ink3); font-size: 14px; }
.foot-brand { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 800 18px var(--serif); color: var(--ink); }
.foot-note { max-width: 70ch; } .foot-links { display: flex; flex-wrap: wrap; gap: 16px; } .foot-links a { color: var(--ink2); }
.foot-biz { margin-top: 18px; font-size: 13px; line-height: 1.8; } .foot-biz a { color: var(--ink2); }

/* ── 좁은 화면 ── */
@media (max-width: 1240px) {
  /* 메뉴 8개가 한 줄에 안 들어가면 가로로 민다. 펼침 메뉴는 허브 페이지의 카드가 대신한다. */
  .nav { overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .nav::-webkit-scrollbar { display: none; }
  .drop { display: none; }
  .nav-i > a { padding: 8px 11px; font-size: 14.5px; }
  .cats, .gcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-map { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .yrow { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero-sky { right: auto; left: 50%; top: 0; translate: -50% -18%; width: min(900px, 140vw); opacity: .35; }
  .promos { grid-template-columns: minmax(0, 1fr); } .promo { min-height: 220px; }
  .ilgan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tti-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  body { font-size: 16.5px; }
  .top { gap: 10px; height: 60px; } .brand span:last-child { display: none; } .nav a { padding: 7px 11px; font-size: 14.5px; }
  .feat, .grid2, .years, .two { grid-template-columns: minmax(0, 1fr); }
  .ilgan-grid, .ilgan-grid.big { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tti-grid { grid-template-columns: minmax(0, 1fr); }
  .spreads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .months { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .radar-wrap { grid-template-columns: minmax(0, 1fr); } .radar { max-width: 240px; margin: 0 auto; }
  .lucky { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gh-form { grid-template-columns: minmax(0, 1fr); } .gh-mid { justify-self: center; }
  .pillars { gap: 6px; } .pillar { padding: 12px 4px; border-radius: 14px; } .god { font-size: 11.5px; } .hidden-st { font-size: 11px; }
  .yong { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .slot { width: 30vw; }
  .cats, .gcards { grid-template-columns: minmax(0, 1fr); }
  .gcard { min-height: 0; }
  .foot-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .today { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .nav-i > a span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .ln > span, .js .rise, .js [data-r], .js .result .glyph, .js .radar .shape, .js .result .bar .fill { opacity: 1 !important; transform: none !important; filter: none !important; }
  .js .result .gauge i { left: calc(var(--at) * 1%); } .ring { --p: var(--v); }
  html { scroll-behavior: auto; }
}

/* ── 오픈 이벤트 띠 — 머리띠 바로 아래. 금빛이 천천히 흐른다 ── */
.event-bar { position: relative; z-index: 25; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; padding: 10px clamp(16px, 3.5vw, 48px);
  font-size: 14.5px; color: #1A1406; overflow: hidden;
  background: linear-gradient(100deg, #E3A548, var(--gold) 30%, var(--gold2) 50%, var(--gold) 70%, #E3A548); background-size: 220% 100%; animation: evflow 7s linear infinite; }
@keyframes evflow { to { background-position: -220% 0; } }
.event-bar b { font-weight: 900; } .event-bar span:not(.ev-badge) { font-weight: 600; }
.event-bar a { font-weight: 800; color: #1A1406; }
.ev-badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font: 900 11.5px var(--sans); letter-spacing: .12em; color: #FBE9DF; background: var(--seal); box-shadow: 0 0 0 3px rgba(217, 74, 43, .25); animation: evpulse 2.2s ease-in-out infinite; }
@keyframes evpulse { 50% { box-shadow: 0 0 0 7px rgba(217, 74, 43, 0); } }
.event-note { display: flex; gap: 14px; align-items: flex-start; margin: 20px 0; padding: 18px 20px; border-radius: var(--r2); background: rgba(233, 196, 106, .1); box-shadow: inset 0 0 0 1px var(--line); }
.event-note p { margin: 0; }
.btn s { opacity: .55; font-weight: 700; margin-right: 2px; }

/* ── 도구 아래 안내 ── */
.tool-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin: 14px 0 0; font-size: 14.5px; color: var(--ink2); }
.tool-links a, .linkish { color: var(--gold2); font: 700 14.5px var(--sans); text-decoration: underline; text-underline-offset: .22em; background: none; border: 0; padding: 0; cursor: pointer; }
.price-note { margin: 10px auto 0; max-width: 60ch; text-align: center; font-size: 12.5px; line-height: 1.6; color: var(--ink3); }
.price-note a { color: var(--ink2); }
.access { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: center; margin: 10px auto 0; max-width: 820px; padding: 12px 18px; border-radius: 14px; font-size: 14.5px; text-align: center; }
.access b { font-weight: 900; }
.access.sample { background: rgba(127, 168, 255, .12); box-shadow: inset 0 0 0 1px rgba(127, 168, 255, .4); color: #CFDDFF; }
.access.pass { background: rgba(233, 196, 106, .12); box-shadow: inset 0 0 0 1px var(--line); color: var(--gold2); }
.t-actions #t-again { order: -1; }

/* ── 결제 창 ── */
.paybox { width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; border: 0; border-radius: 24px; color: var(--ink); background: #11101B;
  box-shadow: inset 0 0 0 1px var(--line), 0 40px 100px -20px rgba(0, 0, 0, .9); overflow: auto; }
.paybox::backdrop { background: rgba(4, 4, 10, .72); backdrop-filter: blur(6px); }
.paybox[open] { animation: payin .35s var(--ease); } @keyframes payin { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.pay-in { position: relative; display: grid; gap: 14px; padding: 28px clamp(18px, 4vw, 30px) 24px; }
.pay-in h2 { margin: -8px 0 0; font: 800 26px var(--serif); } .pay-in .kicker { margin: 0; }
.pay-x { position: absolute; right: 14px; top: 12px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--card2); color: var(--ink2); font-size: 22px; cursor: pointer; }
.pay-plans { display: grid; gap: 8px; }
.pp { position: relative; cursor: pointer; }
.pp input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pp span { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--card2); box-shadow: inset 0 0 0 1px var(--line2); transition: box-shadow .2s, background .2s; }
.pp b { font-weight: 800; } .pp small { grid-column: 1; font-size: 13px; color: var(--ink3); } .pp em { grid-row: 1 / 3; grid-column: 2; font: 800 20px var(--serif); font-style: normal; color: var(--gold2); }
.pp.best span::after { content: "여러 명 볼 때"; position: absolute; top: -8px; right: 14px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; color: #111; background: var(--gold); }
.pp input:checked + span { background: rgba(233, 196, 106, .1); box-shadow: inset 0 0 0 1.5px var(--gold); }
.pp input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.pay-who { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .pay-who .wide { grid-column: 1 / -1; }
.pay-who i { font-style: normal; font-size: 11.5px; color: var(--seal); font-weight: 800; } .pay-who i.opt { color: var(--ink3); }
.pay-agree { display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px var(--line2); font-size: 13.5px; line-height: 1.55; color: var(--ink2); }
.pay-agree label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.pay-agree label:first-child { padding-bottom: 8px; border-bottom: 1px solid var(--line2); color: var(--ink); }
.pay-agree input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--gold); }
.pay-agree i { font-style: normal; font-weight: 800; color: var(--seal); margin-right: 2px; }
.pay-agree a { color: var(--gold2); }
.pay-go { width: 100%; } .pay-fine { margin: 0; text-align: center; font-size: 12px; }
@media (max-width: 520px) { .pay-who { grid-template-columns: minmax(0, 1fr); } }

/* ── 약관 문서 ── */
.doc h2 { margin: 40px 0 12px; font: 800 22px var(--serif); }
.doc ol, .doc ul { padding-left: 22px; color: var(--ink2); } .doc li { margin: 6px 0; }
.doc p { color: var(--ink2); } .doc b { color: var(--ink); }
.doc-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 26px; }
.doc-tabs a { padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--ink2); text-decoration: none; background: var(--card2); box-shadow: inset 0 0 0 1px var(--line2); }
.doc-tabs a[aria-current] { color: #16120A; background: var(--gold); box-shadow: none; }
.tbl { overflow-x: auto; margin: 14px 0; border-radius: var(--r2); box-shadow: inset 0 0 0 1px var(--line2); }
.tbl table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14.5px; }
.tbl th, .tbl td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line2); color: var(--ink2); }
.tbl th { color: var(--ink); font-weight: 800; background: rgba(255, 255, 255, .03); white-space: nowrap; }
.tbl tr:last-child td, .tbl tr:last-child th { border-bottom: 0; }
.biz-box { padding: 18px 20px; border-radius: var(--r2); background: var(--card2); box-shadow: inset 0 0 0 1px var(--line2); font-size: 14.5px; }
.biz-box p { margin: 4px 0; } .biz-box b { color: var(--ink); margin-right: 4px; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 24px 0; }
.plan { position: relative; padding: 24px 22px; border-radius: var(--r); background: var(--card2); box-shadow: inset 0 0 0 1px var(--line2); }
.plan small { font-size: 12.5px; font-weight: 800; letter-spacing: .08em; color: var(--gold); }
.plan h2 { margin: 6px 0 4px !important; font-size: 21px !important; } .plan > b { display: block; font: 800 30px var(--serif); color: var(--ink); } .plan p { font-size: 14.5px; margin: 10px 0 0; }
.plan.best { box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 50px -20px var(--gold); background: rgba(233, 196, 106, .06); }
.foot-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; } .foot-legal a { color: var(--ink); text-decoration: none; font-weight: 700; }
.foot-legal a:hover { color: var(--gold); }
@media (max-width: 760px) { .plans { grid-template-columns: minmax(0, 1fr); } .event-bar { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .event-bar, .ev-badge { animation: none !important; } }

/* 좁은 화면 보정(2026-09-29 휴대폰 캡처에서 발견) — 이벤트 배지가 한 글자씩 세로로 쪼개졌고, 띠가 세 줄을 차지했다 */
.ev-badge { flex: none; white-space: nowrap; }
@media (max-width: 560px) {
  .event-bar { gap: 8px; padding: 9px 14px; }
  .event-bar > span:not(.ev-badge) { display: none; }       /* 긴 설명은 [정가 보기] 페이지에서 */
  .event-note { flex-direction: column; gap: 10px; }
}

/* 첫 화면 관측판이 화면 밖으로 삐져나가 휴대폰에서 옆으로 밀리던 것(2026-09-29 전체 점검) —
   body 의 overflow-x:hidden 은 아이폰 사파리에서 옆 밀림을 못 막는다. html 에 clip 을 준다(clip 은 스크롤 상자를 만들지 않아 머리띠 고정이 그대로 된다). */
html { overflow-x: clip; }
@media (max-width: 1080px) { .hero { overflow: clip; } }

/* ── 모션 추가(2026-09-29 회원님 "모션그래픽 어디 좀 더 추가") ── 움직임은 transform·opacity 만, 줄이기 설정이면 전부 멈춘다 */
/* 1) 계산 중 단계가 차례로 켜진다 */
.load-steps { display: grid; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 15px; font-weight: 700; color: var(--ink3); }
.load-steps li { display: flex; align-items: center; gap: 10px; opacity: .35; animation: stepOn .35s var(--ease) forwards; animation-delay: calc(var(--i) * 170ms + 120ms); }
.load-steps i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line); position: relative; }
.load-steps li i::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--gold); transform: scale(0); animation: dotOn .3s var(--ease) forwards; animation-delay: inherit; }
.load-steps li { --d: 0; } .load-steps li i::after { animation-delay: calc(var(--i) * 170ms + 200ms); }
@keyframes stepOn { to { opacity: 1; color: var(--ink); } }
@keyframes dotOn { to { transform: scale(1); } }
/* 2) 읽는 위치 막대 */
.read-bar { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 50; background: linear-gradient(90deg, var(--seal), var(--gold) 40%, var(--gold2)); transform-origin: 0 50%; transform: scaleX(0); box-shadow: 0 0 12px rgba(233, 196, 106, .6); }
/* 3) 카드 기울기 + 따라오는 빛 */
/* 떠오르기(.js [data-r].in → transform:none)보다 우선해야 기울기가 먹는다 — 떠오른 뒤(.in)에만 건다 */
.js .gcard.in, .js .cat-t.in, .js .feat-i.in, .js .ig.in, .js .promo.in, .plan { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px)); transition: transform .35s var(--ease), box-shadow .35s var(--ease), opacity .8s var(--ease); transition-delay: 0s; }
.js .gcard.in:hover, .js .cat-t.in:hover, .js .ig.in:hover, .js .promo.in:hover, .plan:hover { --lift: -4px; }
.gcard::after, .cat-t::after, .feat-i::after, .plan::after, .ig::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease);
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(247, 226, 166, .12), transparent 60%); }
.gcard:hover::after, .cat-t:hover::after, .feat-i:hover::after, .plan:hover::after, .ig:hover::after { opacity: 1; }
.feat-i, .plan, .ig { position: relative; }

/* 4) "이렇게 봐요" 단계 — 번호가 뜨고 금색 선이 아래로 그어진다 */
.how { position: relative; list-style: none; counter-reset: st; padding-left: 0 !important; }
.how li { position: relative; counter-increment: st; padding: 0 0 18px 58px !important; }
.how li::before { content: counter(st); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font: 800 16px var(--serif); color: #1A1406; background: var(--gold); box-shadow: 0 0 0 6px rgba(233, 196, 106, .12); }
.how li::after { content: ""; position: absolute; left: 17px; top: 40px; bottom: 2px; width: 2px; background: linear-gradient(var(--gold), transparent); transform-origin: 50% 0; }
.how li:last-child::after { display: none; }
.js .how li::before { transform: scale(0); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--n, 0) * 160ms); }
.js .how li::after { transform: scaleY(0); transition: transform .6s var(--ease); transition-delay: calc(var(--n, 0) * 160ms + 200ms); }
.js .how.in li::before { transform: scale(1); } .js .how.in li::after { transform: scaleY(1); }
.how li:nth-child(2) { --n: 1; } .how li:nth-child(3) { --n: 2; } .how li:nth-child(4) { --n: 3; } .how li:nth-child(5) { --n: 4; }
/* 5) 타로 덱 — 섞기 전에는 숨 쉬듯 떠 있다 */
.deck:not(.fanned) { animation: deckFloat 3.6s ease-in-out infinite; }
@keyframes deckFloat { 50% { transform: translateY(-8px); } }
/* 6) 펼친 카드 — 앞면이 나오면 금빛이 한 번 스친다 */
.slot .sc.flip .front::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%); transform: translateX(-120%); animation: sheen 1.1s var(--ease) .55s forwards; pointer-events: none; }
@keyframes sheen { to { transform: translateX(120%); } }
/* 7) 결과 맨 위 "나" 기둥이 한 번 숨 쉬듯 빛난다 */
.result.show .pillar.me { animation: meGlow 2.4s ease-in-out 1.3s 2; }
@keyframes meGlow { 50% { box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 70px -6px rgba(233, 196, 106, .85); } }
@media (prefers-reduced-motion: reduce) {
  .load-steps li { opacity: 1; animation: none !important; } .load-steps li i::after { transform: scale(1); }
  .js .gcard.in, .js .cat-t.in, .js .feat-i.in, .js .ig.in, .js .promo.in, .plan { transform: none !important; }
  .js .how li::before, .js .how li::after { transform: none !important; }
  .read-bar { display: none; }
}

/* ── 풀이 저장·보내기 줄 (PDF · 카카오톡 · 링크) ── */
.keep { margin: 22px auto 0; max-width: 880px; }
.keep-in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.keep-b { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 0; border-radius: 16px; text-align: left; text-decoration: none; cursor: pointer; font: inherit; color: var(--ink);
  background: var(--card2); box-shadow: inset 0 0 0 1px var(--line2); transition: transform .2s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease); }
.keep-b:active { transform: scale(.97); }
.keep-b b { display: block; font-size: 15.5px; font-weight: 800; } .keep-b small { display: block; font-size: 12.5px; color: var(--ink3); }
.kb-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; font: 900 12px var(--sans); letter-spacing: .04em; }
.keep-b.pdf .kb-ic { color: #FBE9DF; background: var(--seal); }
.keep-b.kakao { background: #FEE500; color: #191600; box-shadow: none; } .keep-b.kakao small { color: #5A5100; }
.keep-b.kakao .kb-ic { background: rgba(0, 0, 0, .08); color: #191600; }
.keep-b.copy .kb-ic { background: rgba(255, 255, 255, .06); font-size: 18px; }
@media (hover: hover) { .keep-b:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line), 0 16px 34px -20px rgba(233, 196, 106, .6); } .keep-b.kakao:hover { box-shadow: 0 16px 34px -18px rgba(254, 229, 0, .6); } }
.keep-b.busy .kb-ic { animation: kbusy .9s ease-in-out infinite; } @keyframes kbusy { 50% { transform: scale(.88); opacity: .7; } }
.keep-note { margin: 10px 0 0; text-align: center; font-size: 12.5px; color: var(--ink3); }
.shared-head .kicker::before { display: none; }
.shared-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; }
@media (max-width: 760px) { .keep-in { grid-template-columns: minmax(0, 1fr); } }

/* 쿠폰 입력(2026-10-06) */
.pay-coupon { margin: 4px 0 2px; }
.cp-row { display: flex; gap: 8px; }
.cp-row input { flex: 1; }
.cp-go { flex: none; height: 48px; padding: 0 18px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .1); color: var(--gold2); font: 800 14px var(--sans); cursor: pointer; }
.cp-go:hover { background: rgba(255, 255, 255, .16); }
.cp-msg { margin: 6px 2px 0; font-size: 13px; font-weight: 700; }
.cp-msg.ok { color: #7fdc9c; } .cp-msg.no { color: #ff8f8f; }
.pp em s { margin-right: 6px; font: 600 13px var(--sans); color: var(--ink3); text-decoration: line-through; }

/* ── AI 사주 상담 ── */
.chatbox { margin-top: 18px; }
.chat-sub { margin: 6px 0 14px; color: var(--ink2); font-size: 15px; }
.chat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip-q { font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.chip-q:hover:not(:disabled) { border-color: var(--gold); } .chip-q:disabled { opacity: .5; cursor: default; }
.chat-log { display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto; padding: 4px 2px 10px; overscroll-behavior: contain; }
.chat-log .msg { max-width: 88%; padding: 11px 15px; border-radius: 18px; font-size: 15.5px; line-height: 1.65; }
.chat-log .msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-log .bot { align-self: flex-start; background: rgba(255, 255, 255, .07); border-top-left-radius: 6px; }
.chat-log .me { align-self: flex-end; background: linear-gradient(135deg, #f1d891, #e0a94d); color: #1b1305; border-top-right-radius: 6px; font-weight: 600; }
.chat-log .wait { opacity: .7; } .chat-log .err { color: #ff9b8a; }
.chat-form { display: flex; gap: 8px; margin-top: 8px; }
.chat-form input { flex: 1; min-width: 0; font: inherit; font-size: 16px; color: var(--ink); background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; padding: 12px 14px; }
.chat-form input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.chat-form .btn { flex: none; padding-inline: 18px; }
.chat-left { margin: 10px 0 0; }
.chat-log .me p { color: #1b1305; }
.chat-log .msg p + p { margin-top: 6px; } .chat-log .msg p.h { font-weight: 800; color: var(--ink); margin-top: 12px; } .chat-log .msg p.h:first-child { margin-top: 0; }
.chat-log .bot { max-width: 94%; } .chat-log .next { display: flex; flex-wrap: wrap; gap: 8px; }
/* ── 가족 풀이(2026-10-06) ── */
.fam-form { display: grid; gap: 14px; }
.fam-lede { text-align: center; color: var(--ink2); margin: 0; } .fam-lede small { color: var(--ink3); }
.fam-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.fam-m[hidden] { display: none; }
.fam-top { display: flex; gap: 10px; align-items: end; margin-bottom: 10px; } .fam-top .fld { flex: 1; min-width: 0; }
.fam-name[hidden] { display: none; }
.fam-del { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); background: transparent; color: var(--ink2); font-size: 18px; cursor: pointer; }
.fam-del[hidden], .fam-add[hidden] { display: none; }
.fam-add { justify-self: center; }
.fam-pair, .fam-kid { margin-top: 16px; }
.fp-k { margin: 0 0 8px; font-size: 13px; font-weight: 800; color: var(--gold); letter-spacing: .02em; }
.fp-score { display: flex; align-items: center; gap: 18px; margin-bottom: 10px; } .fp-one { font-size: 19px; font-weight: 800; color: var(--ink); margin: 0; }
.fam-pair .pt { margin: 6px 0; }
.fp-why summary { cursor: pointer; color: var(--ink3); font-size: 14px; } .fp-why ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink2); font-size: 14.5px; }
.fp-past { margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, rgba(124, 92, 255, .16), rgba(233, 196, 106, .1)); }
.fp-past p:last-child { margin: 0; }
.fm-meters { display: grid; gap: 6px; margin: 10px 0; } .fm-meter { display: flex; gap: 12px; align-items: center; } .fm-meter span { width: 56px; font-weight: 700; font-size: 14px; } .fm-meter i { font-style: normal; color: var(--gold); letter-spacing: 3px; }
.fam-name-r { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.nm-parts { display: flex; gap: 8px; } .nm-parts span { display: grid; place-items: center; width: 54px; padding: 8px 0; border-radius: 12px; background: rgba(255,255,255,.06); font-size: 20px; font-weight: 800; } .nm-parts small { font-size: 11.5px; color: var(--ink3); font-weight: 600; }
.fam-styles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; } .fam-styles b { font-size: 16.5px; }
.fam-best h3 em { font-style: normal; color: var(--gold); }
.fam-roles { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; } .fam-roles span { display: grid; gap: 2px; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.05); font-size: 14.5px; } .fam-roles small { color: var(--ink3); }
/* 타로 질문 필수 */
#t-q.need { outline: 2px solid #ff9b8a; outline-offset: 1px; }
.fld.q i { font-style: normal; color: var(--seal); font-weight: 800; font-size: 11.5px; }
.fam-best h3 { font-size: 19px; line-height: 1.45; } .fam-best h3 em { white-space: nowrap; } .fam-kid h3 small { display: block; font-size: 13.5px; color: var(--ink3); font-weight: 600; margin-top: 4px; }

/* ── 아이 작명(2026-10-07) ── */
.chips-c { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-c input { position: absolute; opacity: 0; pointer-events: none; }
.chip-c span { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); font-size: 14px; font-weight: 700; cursor: pointer; }
.chip-c input:checked + span { background: var(--gold); color: #1b1305; border-color: transparent; }
.chip-c input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.nm-wanted { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.nm-more { margin: 4px 0 14px; } .nm-more .fld { margin-top: 12px; }
.nm-big { font-size: clamp(34px, 7vw, 54px); margin: 4px 0; letter-spacing: -.03em; } .nm-big span { color: var(--gold); font-family: Hahmlet, serif; font-size: .7em; margin-left: 8px; }
.nm-score { font-size: 22px; font-weight: 800; margin: 0 0 10px; }
.nm-chars { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.nm-ch { display: grid; justify-items: center; gap: 2px; min-width: 92px; padding: 12px 10px; border-radius: 16px; background: rgba(255,255,255,.05); }
.nm-ch b { font-family: Hahmlet, serif; font-size: 34px; color: var(--gold); line-height: 1.1; } .nm-ch span { font-weight: 800; } .nm-ch small { color: var(--ink2); font-size: 13px; text-align: center; } .nm-ch i { font-style: normal; color: var(--ink3); font-size: 12px; }
.nm-ai { margin: 6px 0; color: var(--ink); }
.nm-parts { display: grid; gap: 6px; margin: 12px 0; } .nm-parts div { display: grid; grid-template-columns: 78px 1fr 52px; gap: 10px; align-items: center; font-size: 13.5px; }
.nm-parts i { display: block; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--gold) calc(var(--v) * 1%), rgba(255,255,255,.07) 0); } .nm-parts b { text-align: right; }
.nm-list { display: grid; gap: 8px; margin-top: 8px; }
.nm-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); color: var(--ink); font: inherit; cursor: pointer; text-align: left; }
.nm-row b { font-size: 18px; } .nm-hj { color: var(--gold); font-family: Hahmlet, serif; } .nm-s { margin-left: auto; font-weight: 800; } .nm-m { width: 34px; }
.nm-d { padding: 4px 6px 10px; }
.nm-more-list summary { cursor: pointer; margin-top: 12px; font-weight: 700; color: var(--ink2); }
.nm-check { padding: 12px 0; border-top: 1px solid rgba(255,255,255,.08); } .nm-check h3 b { color: var(--gold); margin-left: 6px; }
.nm-note { margin-top: 16px; }
.nm-parts div { grid-template-columns: 88px 1fr 50px; } .nm-parts span { white-space: nowrap; }
/* 숨긴 체크박스가 폭 100%로 커져 페이지를 가로로 밀던 문제(이름 검토 페이지가 왼쪽으로 쏠림) — 칩 안에 1px로 가둔다 */
.chip-c { position: relative; } .chip-c input { width: 1px; height: 1px; margin: 0; inset: 0; }