/* Otaro v3 — 밤하늘 + 리더별 포인트 컬러(--rc). 모바일 우선, 데스크톱에선 480px 폰 프레임. */
@font-face { font-family: Pretendard; src: url(../PretendardVariable.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #0d0b1a; --bg2: #161329; --bg3: #211c3b; --line: rgba(255,255,255,.09);
  --tx: #f4f1fb; --tx2: rgba(244,241,251,.68); --tx3: rgba(244,241,251,.42);
  --gold: #e8c27a; --rc: #e8c27a;
  --serif: 'Gowun Batang', 'Apple SD Gothic Neo', 'Noto Serif KR', serif;
  --ait-safe-top: 0px; --ait-safe-bottom: 0px;
  --r: 16px; --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: #07060f; overscroll-behavior: none; }
body { margin: 0; font: 15px/1.6 Pretendard, -apple-system, system-ui, sans-serif; color: var(--tx); background: #07060f; word-break: keep-all; overscroll-behavior-y: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
.shell { max-width: 480px; min-height: 100dvh; margin: 0 auto; background: var(--bg); position: relative; padding-bottom: calc(72px + var(--safe-b)); overflow-x: clip; }
@media (min-width: 520px) { .shell { box-shadow: 0 0 0 1px var(--line), 0 30px 80px rgba(0,0,0,.6); } }

.art { width: 100%; height: 100%; object-fit: cover; display: block; background: linear-gradient(160deg, var(--rc), #2a1f4d 70%); }
.eyebrow { display: block; font-size: 12px; letter-spacing: .02em; color: var(--rc); font-weight: 600; }
.center { text-align: center; }
.hint { color: var(--tx2); font-size: 13px; margin: 6px 0 0; }
.muted { color: var(--tx3); }
.empty { text-align: center; color: var(--tx2); padding: 60px 0; }
.empty a { color: var(--gold); text-decoration: underline; }

/* 상단 바 */
.bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; height: 54px; padding: 0 12px; background: rgba(13,11,26,.82); backdrop-filter: blur(14px); }
.bar-title { font-weight: 600; font-size: 15px; max-width: 65%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ico { width: 40px; height: 40px; display: grid; place-items: center; font-size: 22px; color: var(--tx2); border-radius: 12px; }
.logo { display: flex; align-items: center; gap: 7px; font-family: var(--serif); font-weight: 700; font-size: 20px; padding-left: 4px; }
.logo-txt { font-family: Pretendard, 'Apple SD Gothic Neo', sans-serif; font-weight: 800; font-size: 17px; letter-spacing: .14em; background: linear-gradient(90deg, #f6dfa8, #e8c27a 60%, #d2a24c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo-mark { width: 28px; height: 28px; border-radius: 8px; display: block; object-fit: cover; box-shadow: 0 0 0 1px rgba(232,194,122,.35); }

.chips { position: sticky; top: 54px; z-index: 19; display: flex; gap: 6px; overflow-x: auto; padding: 4px 16px 12px; background: rgba(13,11,26,.82); backdrop-filter: blur(14px); scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; padding: 7px 14px; border-radius: 99px; font-size: 13px; color: var(--tx2); background: var(--bg2); border: 1px solid var(--line); }
.chip.on { background: var(--tx); color: var(--bg); font-weight: 700; }

/* 하단 탭바 */
.tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px 0 calc(6px + var(--safe-b)); background: rgba(13,11,26,.92); backdrop-filter: blur(16px); border-top: 1px solid var(--line); }
.tabbar a { display: flex; flex-direction: column; align-items: center; gap: 1px; color: var(--tx3); font-size: 11px; padding: 4px 0; }
.tabbar b { font-size: 19px; line-height: 1.2; font-weight: 400; }
.tabbar a.on { color: var(--tx); }

/* 홈 */
.home { padding-bottom: 12px; }
.hero { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; scrollbar-width: none; margin: 0 16px; border-radius: 22px; }
.hero::-webkit-scrollbar { display: none; }
.hero-slide { position: relative; flex: 0 0 100%; aspect-ratio: 4 / 5; scroll-snap-align: start; overflow: hidden; border-radius: 22px; }
.hero-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(13,11,26,.92)); }
.hero-txt { position: absolute; left: 20px; right: 20px; bottom: 22px; z-index: 1; text-align: center; }
.hero-k { font-size: 12px; color: var(--rc); font-weight: 600; }
.hero-txt h2 { font-family: var(--serif); font-size: 32px; line-height: 1.2; margin: 6px 0 6px; text-shadow: 0 2px 20px rgba(0,0,0,.5); }
.hero-txt p { margin: 0; color: var(--tx2); font-size: 14px; }
.hero-n { position: absolute; top: 14px; right: 14px; z-index: 1; font-size: 11px; padding: 3px 9px; border-radius: 99px; background: rgba(0,0,0,.45); }

.daily-w { margin: 18px 16px 0; }
.daily-row { width: 100%; display: flex; gap: 16px; align-items: center; text-align: left; padding: 16px; border-radius: var(--r); background: linear-gradient(120deg, #241c45, #171330); border: 1px solid rgba(232,194,122,.25); }
.daily-row strong { display: block; font-size: 16px; margin: 2px 0; }
.daily-row p { margin: 0; color: var(--tx2); font-size: 13px; }
.daily-row small { color: var(--tx3); font-size: 12px; }

.sec { padding: 26px 16px 0; }
.sec h3 { display: flex; align-items: center; justify-content: space-between; font-size: 17px; margin: 0 0 12px; }
.sec h3 a, .sec h3 small { font-size: 12px; color: var(--tx3); font-weight: 400; }
.sample { font-size: 10px; padding: 2px 6px; border-radius: 6px; background: var(--bg3); color: var(--tx3); font-weight: 500; margin-left: 6px; margin-right: auto; }

.readers { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.readers a { flex: none; width: 72px; text-align: center; }
.readers .av { display: block; width: 68px; height: 68px; margin: 0 auto 6px; border-radius: 50%; overflow: hidden; border: 2px solid var(--rc); padding: 2px; }
.readers .av .art { border-radius: 50%; object-position: 50% 15%; }
.readers b { display: block; font-size: 13px; }
.readers small { display: block; font-size: 10px; color: var(--tx3); line-height: 1.3; }

.invite { display: flex; align-items: center; gap: 12px; margin: 22px 16px 0; padding: 14px 16px; border-radius: var(--r); background: linear-gradient(120deg, #3a2357, #2a1f4d); }
.invite > span { font-size: 24px; color: #f2a6b8; }
.invite div { flex: 1; } .invite strong { display: block; font-size: 15px; } .invite small { color: var(--tx2); font-size: 12px; }
.invite b { font-size: 22px; color: var(--tx3); font-weight: 400; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; }
.tile strong { display: block; font-size: 14px; margin-top: 8px; line-height: 1.35; }
.tile small { display: block; font-size: 12px; color: var(--tx3); line-height: 1.4; }
.tile-art { position: relative; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: var(--bg3); }
.tile-art .art { transition: transform .5s; }
.tile:active .tile-art .art { transform: scale(1.04); }
.tile-price { position: absolute; right: 8px; bottom: 8px; font-size: 10.5px; font-weight: 700; padding: 3px 7px; border-radius: 99px; background: rgba(7,6,15,.68); color: var(--gold); backdrop-filter: blur(4px); line-height: 1.3; }
.badge { position: absolute; top: 8px; left: 8px; font-size: 10px; font-weight: 800; padding: 3px 7px; border-radius: 6px; background: var(--rc); color: var(--bg); }
.tile-reader { position: absolute; bottom: 8px; left: 8px; font-size: 11px; padding: 2px 8px; border-radius: 99px; background: rgba(0,0,0,.5); backdrop-filter: blur(6px); }

.reviews { display: flex; gap: 10px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
.review { flex: 0 0 210px; padding: 14px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); }
.review b { font-size: 13px; } .review small { display: block; font-size: 11px; color: var(--gold); }
.review p { margin: 6px 0 0; font-size: 13px; color: var(--tx2); }

.reader-intro { display: flex; gap: 16px; align-items: center; margin: 8px 16px 0; padding: 16px; border-radius: 20px; background: var(--bg2); }
.reader-intro > .art { width: 110px; height: 146px; border-radius: 14px; flex: none; object-position: 50% 15%; }
.reader-intro h2 { font-family: var(--serif); margin: 2px 0 6px; font-size: 24px; line-height: 1.25; }
.bubble { margin: 0; font-size: 13px; color: var(--tx2); }

.foot { padding: 34px 16px 20px; font-size: 11px; color: var(--tx3); line-height: 1.7; }
.foot p { margin: 0 0 4px; } .foot a { text-decoration: underline; }

/* CTA */
.cta-dock { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; z-index: 40; padding: 12px 16px calc(14px + var(--safe-b)); background: linear-gradient(transparent, var(--bg) 30%); }
.cta { display: block; width: 100%; padding: 16px; border-radius: 14px; text-align: center; font-weight: 700; font-size: 16px; color: #1a1430; background: linear-gradient(135deg, var(--rc), color-mix(in srgb, var(--rc) 60%, #fff)); box-shadow: 0 10px 30px color-mix(in srgb, var(--rc) 35%, transparent); }
.cta:active { transform: scale(.98); }
.cta.ghost { background: transparent; color: var(--tx); border: 1px solid var(--line); box-shadow: none; margin-top: 8px; }

/* 상품 랜딩 */
.landing { padding-bottom: 90px; }
.landing .bar { position: absolute; width: 100%; background: transparent; backdrop-filter: none; }
.landing-art { aspect-ratio: 3 / 4; position: relative; }
.landing-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,11,26,.3), transparent 25%, transparent 55%, var(--bg)); }
.landing-txt { margin-top: -120px; position: relative; padding: 0 20px; text-align: center; }
.landing h1 { font-family: var(--serif); font-size: 34px; line-height: 1.2; margin: 6px 0; text-shadow: 0 2px 24px rgba(0,0,0,.6); }
.lead { color: var(--tx2); margin: 0 0 18px; }
.speech { display: flex; gap: 10px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); }
.speech p { margin: 0; font-size: 14px; }
.av { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: none; display: block; border: 1.5px solid var(--rc); }
.av .art { object-position: 50% 15%; }
.toc { margin: 22px 20px 0; padding: 18px; border-radius: var(--r); background: var(--bg2); }
.toc h3 { margin: 0 0 10px; font-size: 15px; }
.toc ol { margin: 0; padding-left: 20px; color: var(--tx2); }
.toc li { padding: 3px 0; } .toc li.more { list-style: none; color: var(--tx3); margin-left: -20px; }
.metric-tease { display: block; margin-top: 12px; padding: 10px 12px; border-radius: 10px; font-size: 13px; background: color-mix(in srgb, var(--rc) 14%, transparent); }
.metric-tease b { color: var(--rc); }

/* 입력 단계 */
.step { min-height: 100dvh; position: relative; }
.step-bg { position: absolute; inset: 0; opacity: .14; filter: blur(2px); pointer-events: none; }
.step .bar { background: transparent; }
.progress { height: 3px; margin: 0 20px; background: var(--line); border-radius: 3px; position: relative; }
.progress i { position: absolute; inset: 0 auto 0 0; background: var(--rc); border-radius: 3px; transition: width .4s; }
.step-body { position: relative; padding: 36px 20px; }
.step-body h2 { font-size: 23px; margin: 0; line-height: 1.35; }
.field { width: 100%; margin-top: 22px; padding: 14px 4px; font: inherit; font-size: 18px; color: var(--tx); background: transparent; border: 0; border-bottom: 2px solid var(--line); outline: none; resize: none; }
.field:focus { border-color: var(--rc); }
textarea.field { font-size: 16px; border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.opt { padding: 12px 16px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); font-size: 14px; }
.opt.on { border-color: var(--rc); background: color-mix(in srgb, var(--rc) 18%, var(--bg2)); font-weight: 600; }
.step-body .opts { flex-direction: column; } .step-body .opt { text-align: left; padding: 16px; }

/* 타로 카드 */
.tcard { --w: 120px; width: var(--w); aspect-ratio: 2 / 3; border-radius: calc(var(--w) * .08); position: relative; flex: none; }
.tcard .tc-in { position: absolute; inset: 5%; border-radius: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
/* 정통 */ .tcard.back { background: #0c0a09 url(../art/back-seer-a.jpg) center / cover no-repeat; border: 1px solid rgba(232,194,122,.5); overflow: hidden; }
.tcard.back .tc-in { inset: 0; border: 0; background: none; }
.tc-moon { display: none; }
/* 뒷면 그림은 확정본: 정통 = 눈 가린 예언자(back-seer-a), 댕댕이 = 큰 발바닥 크림·핑크(back-vpaw-a) */
[data-deck="puppy"] .tcard.back { background: #ffe9e4 url(../art/back-vpaw-a.jpg) center / cover no-repeat; border-color: rgba(196,128,150,.6); }

/* 앞면 — 자체 덱 일러스트(2:3). 역방향은 그림만 뒤집고 이름표는 바로 */
.tcard.face { background: #0a0b1a; border: 1.5px solid rgba(232,194,122,.75); overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.tc-img { position: absolute; inset: 0; }
.tc-img img, .tc-img video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tcard.rev .tc-img { transform: rotate(180deg); }
.tc-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 18% 4px 5%; text-align: center; font-family: var(--serif); font-weight: 700; font-size: max(10px, calc(var(--w) * .1)); color: #fff; background: linear-gradient(transparent, rgba(10,11,26,.88)); line-height: 1.2; }
.tcard.xs .tc-label { display: none; }
.tcard.sm { --w: 64px; } .tcard.xs { --w: 52px; } .tcard.mini { --w: 100%; }
.glow { animation: glow 2.4s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 24px rgba(232,194,122,.55); } }

/* 덱 전환 */
.deck-switch { display: flex; gap: 6px; justify-content: center; margin: 12px auto 0; padding: 4px; width: fit-content; border-radius: 99px; background: var(--bg2); border: 1px solid var(--line); }
.deck-switch button { padding: 7px 14px; border-radius: 99px; font-size: 13px; color: var(--tx2); }
.deck-switch button.on { background: var(--tx); color: var(--bg); font-weight: 700; }
.deck-pick .deck-switch { margin: 4px 0 0; }

/* 브랜드 한 줄 */
.brand { text-align: center; padding: 2px 16px 14px; }
.brand b { display: block; font-family: var(--serif); font-size: 19px; background: linear-gradient(90deg, #e8c27a, #f2a6b8, #c8b6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand small { color: var(--tx3); font-size: 12px; }

/* 댕댕이 덱 쇼케이스 */
.puppy { margin: 22px 16px 0; padding: 20px 0 18px; border-radius: 22px; background: linear-gradient(160deg, #3b2a55, #241a3d 60%, #1b1530); border: 1px solid rgba(242,166,184,.3); overflow: hidden; }
.puppy-head { padding: 0 20px; }
.puppy-head .eyebrow { color: #f2a6b8; }
.puppy-head h3 { font-family: var(--serif); font-size: 24px; line-height: 1.3; margin: 4px 0 6px; }
.puppy-head p { margin: 0; color: var(--tx2); font-size: 13px; }
.puppy-strip { display: flex; gap: 10px; overflow-x: auto; padding: 18px 20px 6px; scrollbar-width: none; }
.puppy-strip::-webkit-scrollbar { display: none; }
.puppy-strip img { flex: none; width: 104px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 10px; border: 1.5px solid rgba(232,194,122,.7); transform: rotate(calc((var(--i) - 3.5) * 1.2deg)); box-shadow: 0 8px 20px rgba(0,0,0,.4); }
.puppy-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 20px 0; font-size: 13px; color: var(--tx2); }
.puppy-foot .deck-switch { margin: 0; }

/* 상품 스토리 한 장면 */
.story { margin: 0 0 14px; padding: 14px 16px; border-radius: 14px; font-family: var(--serif); font-size: 15px; line-height: 1.6; text-align: left; color: var(--tx); background: color-mix(in srgb, var(--rc) 10%, var(--bg2)); border-left: 3px solid var(--rc); }

/* 뒤집기 */
.flip { position: relative; width: 120px; aspect-ratio: 2 / 3; perspective: 900px; flex: none; cursor: pointer; }
.flip.big { width: 200px; } .flip.big .tcard { --w: 200px; }
.flip .tcard { position: absolute; inset: 0; backface-visibility: hidden; transition: transform .7s cubic-bezier(.3,1.3,.5,1); }
.flip .tcard.face { transform: rotateY(180deg); }
.flip.on .tcard.back { transform: rotateY(-180deg); }
.flip.on .tcard.face { transform: rotateY(0); }

/* 카드 고르기 */
.draw { min-height: 100dvh; display: flex; flex-direction: column; background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--rc) 22%, transparent), transparent 60%), var(--bg); }
.draw-head { display: flex; gap: 10px; align-items: center; padding: 6px 20px; }
.draw-head p { margin: 0; font-size: 15px; font-weight: 600; white-space: pre-line; }
.slots { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 18px 16px 0; }
.slot { width: 58px; aspect-ratio: 2 / 3; border-radius: 8px; border: 1.5px dashed rgba(255,255,255,.2); display: grid; place-items: center; position: relative; transition: border-color .3s; }
.slot span { font-size: 10px; color: var(--tx3); text-align: center; line-height: 1.2; padding: 2px; }
.slot.filled { border-color: transparent; }
.slot.filled span { display: none; }
.slot .tcard { animation: drop .45s cubic-bezier(.3,1.4,.5,1); }
@keyframes drop { from { transform: translateY(160px) scale(1.4); opacity: 0; } }
.draw-count { text-align: center; color: var(--tx2); font-size: 13px; margin: 14px 0 0; }
.draw-count b { color: var(--rc); font-size: 18px; }

/* 로딩 */
.loading { position: relative; height: 100dvh; overflow: hidden; }
.loading > .art { position: absolute; inset: 0; animation: zoom 3s ease-out forwards; }
@keyframes zoom { to { transform: scale(1.08); } }
.loading::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgba(13,11,26,.95)); }
.loading-txt { position: absolute; bottom: 18%; left: 0; right: 0; z-index: 1; text-align: center; }
.loading-txt p { font-family: var(--serif); font-size: 18px; }
.orbit { width: 40px; height: 40px; margin: 0 auto; position: relative; animation: spin 1.4s linear infinite; }
.orbit i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--rc); left: 16px; top: 0; }
.orbit i:nth-child(2) { top: auto; bottom: 0; opacity: .6; } .orbit i:nth-child(3) { left: 0; top: 16px; opacity: .3; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 결과 */
.result { padding: 0 16px 20px; }
.r-top { position: relative; margin: 0 -16px; }
.r-art { height: 300px; position: relative; }
.r-art .art { object-position: 50% 18%; }
.r-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 35%, var(--bg)); }
.r-title { position: relative; margin-top: -80px; text-align: center; padding: 0 16px; }
.r-title h1 { font-family: var(--serif); font-size: 28px; margin: 4px 0 0; }
.q { color: var(--tx2); font-size: 13px; margin: 4px 0 0; }
.r-metric { margin-top: 18px; }
.gauge { width: 170px; height: 170px; margin: 0 auto; position: relative; }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.g-bg { fill: none; stroke: var(--line); stroke-width: 9; }
.g-fg { fill: none; stroke: var(--c); stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 0 8px var(--c)); }
.g-txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.g-txt small { font-size: 12px; color: var(--tx2); }
.g-txt b { font-family: var(--serif); font-size: 40px; color: var(--c); line-height: 1.1; }
.g-cap { text-align: center; margin: 8px 0 0; font-size: 14px; color: var(--tx2); }
.r-verdict { margin: 18px auto 0; width: fit-content; padding: 8px 22px; border-radius: 99px; font-weight: 800; font-size: 20px; background: color-mix(in srgb, var(--rc) 20%, transparent); color: var(--rc); }
.r-head { font-family: var(--serif); font-size: 21px; line-height: 1.5; text-align: center; margin: 22px 8px; }
.r-row { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px; }
.rcard { padding: 18px; border-radius: var(--r); background: var(--bg2); margin-bottom: 12px; border: 1px solid var(--line); }
.rcard p { margin: 10px 0 0; color: var(--tx2); font-size: 14.5px; line-height: 1.75; }
.rc-head .pos { font-size: 16px; font-weight: 800; color: var(--rc); letter-spacing: -.01em; }
.rc-body { display: flex; gap: 14px; align-items: center; margin-top: 10px; }
.rc-body .flip { width: 76px; } .rc-body .flip .tcard { --w: 76px; }
.rc-body h4 { margin: 0; font-family: var(--serif); font-size: 18px; }
.rc-body .cname { margin: 2px 0 0; font-size: 12px; color: var(--tx3); }
.bul { margin: 10px 0 0; padding-left: 18px; color: var(--tx2); font-size: 13.5px; }
.bul li { padding: 2px 0; }
.rcard.locked { position: relative; min-height: 110px; background: repeating-linear-gradient(-45deg, var(--bg2) 0 10px, #1a1631 10px 20px); }
.lock-body { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.lock-body span { font-size: 26px; } .lock-body p { margin: 0; }
.lock-body b { color: var(--tx); }
.unlock { text-align: center; padding: 22px 18px; border-radius: 20px; margin: 18px 0; background: linear-gradient(160deg, color-mix(in srgb, var(--rc) 22%, var(--bg2)), var(--bg2)); border: 1px solid color-mix(in srgb, var(--rc) 40%, transparent); }
.unlock h3 { margin: 0; font-family: var(--serif); font-size: 20px; }
.unlock p { color: var(--tx2); font-size: 13px; margin: 6px 0 16px; }
.unlock small { display: block; margin-top: 10px; color: var(--tx3); font-size: 12px; }
.r-sum, .r-luck { padding: 18px; border-radius: var(--r); background: var(--bg2); margin-top: 12px; }
.r-sum h3, .r-luck h3 { margin: 0 0 8px; font-size: 15px; color: var(--rc); }
.r-sum p { margin: 0; color: var(--tx2); line-height: 1.75; }
.r-adv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.r-adv div { padding: 14px; border-radius: 14px; background: var(--bg2); }
.r-adv b { font-size: 12px; color: var(--rc); } .r-adv p { margin: 4px 0 0; font-size: 13.5px; }
.r-luck div { display: flex; flex-wrap: wrap; gap: 6px; }
.r-luck span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: var(--bg3); font-size: 13px; }
.r-luck i { width: 12px; height: 12px; border-radius: 50%; }
.r-aff { text-align: center; font-family: var(--serif); font-size: 17px; margin: 26px 0 4px; }
.r-sign { text-align: center; color: var(--tx3); font-size: 13px; margin: 0; }

.share-box { margin-top: 26px; padding: 18px; border-radius: 20px; background: var(--bg3); text-align: center; }
.share-box h3 { margin: 0 0 12px; font-size: 16px; }
.share-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
.share-btns > * { padding: 12px 6px; border-radius: 12px; background: var(--bg2); font-size: 13px; font-weight: 600; text-align: center; }

/* 공유 착지 */
.shared { padding-bottom: 110px; }
.shared .bar { position: absolute; width: 100%; background: transparent; backdrop-filter: none; }
.shared-art { height: 260px; position: relative; }
.shared-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 20%, var(--bg)); }
.shared-card { margin: -90px 16px 0; position: relative; padding: 20px 16px; border-radius: 22px; background: rgba(22,19,41,.9); backdrop-filter: blur(10px); border: 1px solid var(--line); text-align: center; }
.shared-card .eyebrow { margin-bottom: 12px; }
.shared-cta { text-align: center; padding: 26px 20px 0; }
.shared-cta h2 { font-family: var(--serif); margin: 0; font-size: 24px; }
.shared-cta p { color: var(--tx2); }

/* 오늘의 카드 / 친구 */
.daily, .ask { padding: 10px 16px 30px; }
.ask { padding-bottom: 110px; }
.daily-hero { display: flex; justify-content: center; padding: 18px 0 16px; }
.daily h1 { font-family: var(--serif); margin: 4px 0 0; font-size: 28px; }
.ask h2 { font-family: var(--serif); font-size: 22px; margin: 6px 0; } .ask h2 b { color: var(--rc); }
.ask h3 { font-size: 15px; margin: 24px 0 0; }
.kw { color: var(--rc); font-weight: 700; margin: 0; }
.streak { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.streak i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: 12px; background: var(--bg2); color: var(--tx3); }
.streak i.on { background: var(--rc); color: var(--bg); font-weight: 800; }
.streak small { width: 100%; text-align: center; color: var(--tx3); font-size: 12px; }
.friends .reader-intro { margin: 8px 0 0; }
.friends { padding: 0 16px 20px; }
.friends .sec { padding: 26px 0 0; }
.field-row { display: flex; gap: 8px; align-items: flex-end; margin-top: 8px; }
.field-row .field { margin-top: 0; font-size: 16px; }
.field-row .cta { width: auto; flex: none; padding: 13px 16px; font-size: 14px; }
.letters { display: flex; flex-direction: column; gap: 8px; }
.letter { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: var(--bg2); }
.letter b { font-size: 14px; } .letter small { margin-left: 6px; color: var(--rc); font-size: 12px; }
.letter p { margin: 2px 0 0; font-size: 13px; color: var(--tx2); }

.vault { padding: 6px 16px; }
.vrow { display: flex; gap: 12px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.vrow div { flex: 1; } .vrow b { display: block; font-size: 15px; } .vrow small { color: var(--tx3); font-size: 12px; }
.vrow > span:last-child { color: var(--tx3); font-size: 20px; }

.toast { position: fixed; left: 50%; bottom: 110px; transform: translate(-50%, 20px); z-index: 200; padding: 11px 18px; border-radius: 99px; background: #f4f1fb; color: #1a1430; font-size: 14px; font-weight: 600; opacity: 0; transition: .25s; max-width: 90vw; text-align: center; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.r-row.big { gap: 8px; }
.daily-row .tcard.sm { --w: 70px; }

/* 상단: 로고 · 누적 타로 · 로그인 */
.bar.top { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; }
.counter { justify-self: center; display: flex; align-items: center; gap: 6px; }
.counter small { font-size: 11px; color: var(--tx3); white-space: nowrap; }
.digits { display: flex; gap: 2px; }
.digits i { font-style: normal; width: 17px; height: 24px; display: grid; place-items: center; border-radius: 5px; font: 700 14px/1 Pretendard, sans-serif; font-variant-numeric: tabular-nums; color: var(--gold); background: linear-gradient(#231c40, #17122c); border: 1px solid rgba(232,194,122,.3); }
.digits.tick i:last-child { animation: tick .5s; }
@keyframes tick { 40% { transform: translateY(-4px); color: #fff; } }
.login-btn { padding: 6px 12px; border-radius: 99px; font-size: 12px; font-weight: 700; background: var(--tx); color: var(--bg); white-space: nowrap; }
@media (max-width: 360px) { .counter small { display: none; } }

/* 말투 정책 표시 */
.rc-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.lucky { font-size: 11px; font-weight: 700; color: var(--gold); }
.tip { margin-top: 10px !important; padding: 10px 12px; border-radius: 10px; font-size: 13.5px !important; color: var(--tx) !important; background: color-mix(in srgb, var(--rc) 12%, var(--bg3)); }

/* 추가 질문 */
.chat { margin-top: 26px; padding: 18px 16px; border-radius: 20px; background: var(--bg2); border: 1px solid color-mix(in srgb, var(--rc) 35%, transparent); }
.chat h3 { margin: 0; font-size: 17px; }
.chat.locked { opacity: .75; }
.opt.sm { padding: 7px 11px; font-size: 12.5px; border-radius: 99px; }
.mood { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
.mood span { font-size: 12px; color: var(--tx3); margin-right: 2px; }
.thread { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.msg p { margin: 0; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.65; }
.msg.me { align-self: flex-end; max-width: 80%; }
.msg.me p { background: var(--rc); color: #1a1430; border-bottom-right-radius: 4px; font-weight: 600; }
.msg.them { display: flex; gap: 8px; align-items: flex-start; max-width: 94%; }
.msg.them .av { width: 32px; height: 32px; }
.msg.them p { background: var(--bg3); border-top-left-radius: 4px; }
.clar { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.clar small { font-size: 11px; color: var(--tx3); line-height: 1.4; } .clar b { color: var(--tx); }
.typing i { font-style: normal; animation: blink 1.2s infinite; } .typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 50% { opacity: .2; } }
.suggest { display: flex; gap: 6px; overflow-x: auto; margin: 14px -16px 0; padding: 0 16px; scrollbar-width: none; }
.suggest .opt { flex: none; }
.ask-row { display: flex; gap: 8px; margin-top: 10px; }
.ask-row input { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--tx); font: inherit; font-size: 15px; outline: none; }
.ask-row input:focus { border-color: var(--rc); }
.ask-row .cta { width: auto; padding: 12px 18px; font-size: 14px; }

/* 기억 패널 */
.memory { margin: 8px 0 14px; padding: 16px; border-radius: 16px; background: var(--bg2); }
.memory h3 { margin: 0; font-size: 16px; }
.memory ul { margin: 10px 0 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--tx2); }
.memory li { padding: 3px 0; } .memory li b { color: var(--tx); margin-right: 6px; }
.forget { margin-top: 10px; font-size: 12px; color: var(--tx3); text-decoration: underline; }

/* 우측 상단 — 이름만 금색 */
.me-name { font-size: 14px; font-weight: 800; color: var(--gold); white-space: nowrap; max-width: 96px; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 12px rgba(232,194,122,.35); }
.gold { color: var(--gold); }

/* 내 정보 */
.profile, .wallet { margin: 8px 0 14px; padding: 16px; border-radius: 16px; background: var(--bg2); }
.pf-head { display: flex; justify-content: space-between; align-items: center; }
.pf-head b { display: block; font-size: 20px; font-family: var(--serif); }
.btn-ghost { font-size: 12px; color: var(--tx3); text-decoration: underline; }
.profile .field-row, .wallet .field-row { margin-top: 12px; }
.w-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.w-stat { padding: 12px 10px; border-radius: 12px; background: var(--bg3); border: 1px solid var(--line); text-align: center; min-width: 0; }
.w-stat small { display: block; font-size: 12px; color: var(--tx3); margin-bottom: 2px; }
.w-stat b { font-size: 20px; color: var(--gold); font-variant-numeric: tabular-nums; }
.wallet .w-charge { margin-top: 12px; }
.w-top { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: center; }
.w-top small { display: block; font-size: 12px; color: var(--tx3); }
.w-top b { font-size: 24px; color: var(--gold); font-variant-numeric: tabular-nums; }
.w-top .cta { width: auto; padding: 12px 16px; font-size: 14px; }
.tx { margin-top: 14px; }
.tx ul { list-style: none; margin: 0; padding: 0; }
.tx li { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; }
.tx li small { display: block; color: var(--tx3); font-size: 11px; }
.tx .plus { color: #8fe0a8; } .tx .minus { color: var(--tx2); }
.me-sec { display: flex; align-items: center; gap: 6px; font-size: 16px; margin: 22px 0 4px; }
.me-sec small { color: var(--tx3); font-weight: 400; }

.deck-pref { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 8px 0 14px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(120deg, #3b2a55, #241a3d); border: 1px solid rgba(242,166,184,.3); }
.deck-pref b { display: block; font-size: 15px; }
.deck-pref small { color: var(--tx3); font-size: 12px; }
.deck-pref .deck-switch { margin: 0; flex: none; }

/* 카드 뽑기 — 상단 바·하단 '카드 종류' 바는 끝에 붙이고, 남는 세로 공간은 위쪽 내용 사이와 부채 영역에 고르게 나눈다 */
.draw-top { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-evenly; }
.draw-top > * { margin-top: 0; margin-bottom: 0; }
.draw-top .slots { padding-top: 0; }

/* 고정 화면(입력 단계·카드 뽑기·로딩) — 화면 높이에 딱 맞추고 스크롤 없음. 위아래 여백 때문에 흔들리지 않게 */
.shell.fixed { height: 100dvh; min-height: 0; padding-bottom: 0; overflow: hidden; }
.shell.fixed .step, .shell.fixed .draw, .shell.fixed .loading { height: 100dvh; min-height: 0; }
.shell.fixed .step { display: flex; flex-direction: column; }
.shell.fixed .step-body { flex: 1; overflow-y: auto; padding-bottom: 110px; }
.shell.fixed .draw .hint.center { margin: 4px 0 0; }
body:has(.shell.fixed) { overflow: hidden; }

/* 내 정보 — 로그인 방식 아이콘 · 이름 옆 변경 */
.pf-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pf-name b { font-size: 20px; font-family: var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-name .eyebrow { margin-right: 2px; }
.prov { width: 22px; height: 22px; flex: none; display: inline-grid; place-items: center; border-radius: 6px; overflow: hidden; background: #fff; }
.prov svg { width: 100%; height: 100%; display: block; }
.pf-edit { flex: none; padding: 4px 10px; border-radius: 99px; font-size: 12px; color: var(--tx2); border: 1px solid var(--line); }
.pf-edit:active { background: var(--bg3); }
.field-row[hidden] { display: none; }

.friends .ask-btn { margin-top: 12px; }

/* 스트릭 카드 (듀오링고식) */
.streak-card { margin: 8px 0 14px; padding: 18px 16px 16px; border-radius: 20px; background: linear-gradient(150deg, #3a2414, #24160e 55%, #1b1530); border: 1px solid rgba(255,150,60,.35); }
.streak-card.cold { background: var(--bg2); border-color: var(--line); }
.streak-card.risk { border-color: rgba(255,150,60,.6); animation: riskPulse 2.4s ease-in-out infinite; }
@keyframes riskPulse { 50% { box-shadow: 0 0 0 4px rgba(255,150,60,.12); } }
.sc-top { display: flex; align-items: center; gap: 12px; }
.sc-flame { font-size: 44px; line-height: 1; filter: drop-shadow(0 0 12px rgba(255,140,40,.6)); }
.streak-card.cold .sc-flame, .streak-card.risk .sc-flame { filter: grayscale(.85) opacity(.6); }
.streak-card.lit .sc-flame { animation: flicker 1.8s ease-in-out infinite; }
@keyframes flicker { 50% { transform: scale(1.08) rotate(-3deg); } }
.sc-n { display: block; font-size: 30px; line-height: 1.1; color: #ffb34d; font-variant-numeric: tabular-nums; }
.streak-card.cold .sc-n { color: var(--tx2); }
.sc-sub { font-size: 13px; color: var(--tx2); }
.sc-meta { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12px; color: var(--tx2); }
.sc-week { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.sc-week li { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sc-week span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; background: rgba(255,255,255,.06); }
.sc-week li.on span { background: linear-gradient(135deg, #ffb34d, #ff7a2f); box-shadow: 0 0 10px rgba(255,140,40,.45); }
.sc-week li.ice span { background: #7fc8ff33; }
.sc-week li.today span { border: 2px dashed #ffb34d; }
.sc-week li.future span { opacity: .4; }
.sc-week small { font-size: 11px; color: var(--tx3); }
.sc-msg { margin: 12px 0 0; font-size: 14px; text-align: center; }
.sc-go { margin-top: 10px; --rc: #ffb34d; }
.sc-goal { margin-top: 14px; }
.sc-bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.sc-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #ffb34d, #ff7a2f); }
.sc-goal small { display: block; margin-top: 6px; font-size: 12px; color: var(--tx2); }
.streak-link { display: block; margin-top: 16px; text-align: center; font-size: 13px; color: #ffb34d; }

/* 기념일 축하 */
.celebrate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(7,6,15,.78); backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s; }
.celebrate.on { opacity: 1; }
.cel-box { width: 100%; max-width: 340px; padding: 28px 22px 22px; border-radius: 24px; text-align: center; background: linear-gradient(160deg, #3a2414, #1b1530); border: 1px solid rgba(255,150,60,.5); transform: scale(.85); transition: transform .35s cubic-bezier(.3,1.5,.5,1); }
.celebrate.on .cel-box { transform: scale(1); }
.cel-flame { font-size: 72px; line-height: 1; animation: flicker 1.2s ease-in-out infinite; filter: drop-shadow(0 0 20px rgba(255,140,40,.7)); }
.cel-n { display: block; font-size: 64px; line-height: 1.1; color: #ffb34d; font-variant-numeric: tabular-nums; }
.cel-t { margin: 4px 0 0; font-size: 20px; font-weight: 800; }
.cel-s { margin: 8px 0 0; color: var(--tx2); font-size: 14px; }
.cel-r { margin: 10px 0 0; font-size: 14px; font-weight: 700; color: #ffd27a; }
.cel-r.muted { color: var(--tx3); font-weight: 400; font-size: 12px; }
.cel-box .cta { margin-top: 18px; --rc: #ffb34d; }

/* 카드 고르기 — 초기 Otaro 방식(겹친 부채 · 셔플 · 관성) + 큰 카드 · 하단 카드 종류 */
.draw-actions { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }
.pill { padding: 9px 18px; border-radius: 99px; font-size: 13px; color: var(--tx2); border: 1px solid rgba(255,255,255,.16); }
.pill.gold { color: var(--gold); border-color: rgba(232,194,122,.45); }
.pill:active { background: var(--bg3); }
.shuffle-hint { text-align: center; font-size: 12.5px; font-style: italic; color: #c8b6ff; margin: 8px 0 0; opacity: .9; transition: opacity .4s; }
.fan-zone { position: relative; flex: 2.5 1 260px; min-height: 200px; margin-top: 6px; overflow: hidden; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; --cw: 110px; --R: 660px; }
.fan-zone.grabbing { cursor: grabbing; }
.fan-arrow { position: absolute; top: 46%; z-index: 30; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; padding-bottom: 3px;
  font-size: 22px; color: var(--gold); border: 1px solid rgba(232,194,122,.35); background: rgba(13,11,26,.6); backdrop-filter: blur(4px); }
.fan-arrow.left { left: 8px; animation: nudgeL 2.4s ease-in-out infinite; }
.fan-arrow.right { right: 8px; animation: nudgeR 2.4s ease-in-out infinite; }
@keyframes nudgeL { 50% { transform: translateX(-4px); } }
@keyframes nudgeR { 50% { transform: translateX(4px); } }
.drag-hint { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); z-index: 30; font-size: 11.5px; color: #c8b6ff; opacity: .7; white-space: nowrap; pointer-events: none; }
.fan-origin { position: absolute; left: 50%; bottom: 14px; width: 0; height: 0; animation: fanRise .8s cubic-bezier(.22,1,.36,1) both; }
@keyframes fanRise { from { transform: translateY(60%); opacity: 0; } }
.fan-card { position: absolute; bottom: 0; left: calc(var(--cw) / -2); width: var(--cw); transform-origin: 50% var(--R);
  transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .35s; will-change: transform; }
.fan-origin.dragging .fan-card { transition: opacity .35s; }
.fan-card.lifting { transition: opacity .35s; z-index: 50; }
.fan-card.taken { opacity: 0; pointer-events: none; }
.fc-back { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .28s cubic-bezier(.22,1,.36,1); }
.fc-back .tcard { --w: var(--cw); box-shadow: -6px 0 18px rgba(0,0,0,.45); }
@media (hover: hover) { .fc-back:hover { transform: translateY(-30px); } }
.fc-back:focus-visible { transform: translateY(-30px); outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 10px; }
.fan-card.lifting .fc-back .tcard { box-shadow: -6px 8px 32px rgba(0,0,0,.5), 0 0 28px rgba(232,194,122,.35); }
.fan-card.shuffling .fc-back { animation: shuffleCard .8s cubic-bezier(.34,1.2,.64,1) both; }
@keyframes shuffleCard { 30% { transform: translateY(-52px) rotate(-8deg); } 65% { transform: translateY(10px) rotate(6deg); } }
.fan-fly { position: fixed; z-index: 300; pointer-events: none; margin: 0; padding: 0; border: 0; background: none; }
.fan-fly .tcard { --w: 100%; width: 100%; }
.deck-bar { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 16px calc(10px + var(--safe-b)); font-size: 13px; color: var(--tx2); }
.deck-bar .deck-switch { margin: 0; }
.slot { width: clamp(52px, 13vw, 64px); }

/* 베스트 후기 — 하단에서 천천히 흘러감(마케팅이 고른 텍스트만) */
.best-reviews { margin: 28px 0 0; overflow: hidden; }
.best-reviews h3 { margin: 0 16px 10px; font-size: 15px; color: var(--tx2); }
.br-track { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.br-row { display: flex; gap: 10px; width: max-content; animation: brScroll calc(var(--n) * 7s) linear infinite; }
.br-track:hover .br-row, .br-track:active .br-row { animation-play-state: paused; }
@keyframes brScroll { to { transform: translateX(-50%); } }
.br-item { flex: none; width: 240px; padding: 12px 14px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); }
.br-item p { margin: 0; font-size: 13.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.br-item small { display: block; margin-top: 6px; font-size: 11px; color: var(--tx3); }
@media (prefers-reduced-motion: reduce) { .br-track { overflow-x: auto; } }

/* 다시 온 사람 가이드 */
.welcome-back { margin: 4px 16px 12px; }
.wb { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: linear-gradient(120deg, color-mix(in srgb, var(--rc) 22%, var(--bg2)), var(--bg2)); border: 1px solid color-mix(in srgb, var(--rc) 40%, transparent); }
.wb strong { display: block; font-size: 15px; margin: 2px 0; }
.wb small { color: var(--tx2); font-size: 12px; }

/* 후기 작성 */
.review-box { margin-top: 22px; padding: 18px 16px; border-radius: 18px; background: var(--bg2); border: 1px solid var(--line); text-align: center; }
.review-box h3 { margin: 0; font-size: 17px; }
.review-box.done p { margin: 0; color: var(--tx2); }
.stars { display: flex; justify-content: center; gap: 6px; margin: 12px 0 4px; }
.stars button { width: 44px; height: 44px; font-size: 30px; color: rgba(255,255,255,.18); transition: transform .15s, color .15s; }
.stars button.on { color: var(--gold); }
.stars button:active { transform: scale(1.2); }
.review-box form { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.review-box textarea.field { margin-top: 0; text-align: left; }

/* 추가 질문 과금 */
.chat-quota { margin: 6px 0 0; font-size: 12px; color: var(--gold); }
.msg.paywall p { background: color-mix(in srgb, var(--gold) 14%, var(--bg3)); }
.cta.sm { width: auto; padding: 9px 14px; font-size: 13px; margin-top: 8px; display: inline-block; }

/* 충전 시트 */
.sheet { position: fixed; inset: 0; z-index: 120; display: flex; align-items: flex-end; justify-content: center; background: rgba(7,6,15,.7); backdrop-filter: blur(4px); }
.sheet-box { width: 100%; max-width: 480px; padding: 20px 16px calc(18px + var(--safe-b)); border-radius: 22px 22px 0 0; background: var(--bg); border: 1px solid var(--line); animation: sheetUp .3s cubic-bezier(.2,.9,.3,1); }
@keyframes sheetUp { from { transform: translateY(40%); opacity: 0; } }
.sheet-box h3 { margin: 0; font-size: 18px; } .sheet-box h3 small { font-size: 12px; color: var(--tx3); font-weight: 400; margin-left: 6px; }
.sheet-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sheet-bal { font-size: 13px; color: var(--tx3); } .sheet-bal b { color: var(--gold); font-size: 15px; }
.hint.tiny { font-size: 11px; color: var(--tx3); margin: 2px 0 10px; }
/* 충전 팩 — 위에서 아래로 한 줄씩: 왼쪽 루나(+보너스) · 오른쪽 가격 */
.packs { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 6px; }
.pack { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 13px 14px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); text-align: left; }
.pack:active { border-color: var(--gold); }
.pack-l { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 1px; }
.pack-l b { font-size: 16px; color: var(--gold); }
.pack-bonus { font-style: normal; font-size: 16px; font-weight: 700; color: #8fe0a8; }
.pack-l small { flex-basis: 100%; font-size: 11px; color: var(--tx3); }
.pack-r { display: flex; align-items: center; gap: 8px; }
.pack.picked { border-color: rgba(232,194,122,.55); background: linear-gradient(135deg, rgba(232,194,122,.10), var(--bg2) 60%); }
.pack-tag { flex-basis: 100%; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--gold); letter-spacing: .2px; margin-bottom: 2px; }
.pack-price { min-width: 76px; text-align: center; padding: 8px 10px; border-radius: 10px; background: var(--gold); color: var(--bg); font-weight: 800; font-size: 14px; }

/* 읽기 좋은 풀이 — 짧은 문단, 줄 끝 한 글자 방지 */
.prose .pr { margin: 0; text-wrap: pretty; line-height: 1.8; }
.prose .pr + .pr { margin-top: 9px; }
.rcard .prose { margin-top: 10px; color: var(--tx2); font-size: 14.5px; }
.r-sum .prose .pr { color: var(--tx2); }
.msg.them .prose { padding: 10px 13px; border-radius: 14px; border-top-left-radius: 4px; background: var(--bg3); font-size: 14px; }
.msg.them .prose .pr { line-height: 1.7; }
.msg.them .prose .pr + .pr { margin-top: 7px; }

.puppy-foot { margin: 0; padding: 10px 20px 0; font-size: 12.5px; color: var(--tx2); }
.deck-bar.locked { opacity: .45; }

/* 리더에게 더 물어보기 — 금색 테두리 + 은은하게 숨쉬는 금빛 */
.chat:not(.locked) { border: 1.5px solid rgba(232,194,122,.75); box-shadow: 0 0 0 1px rgba(232,194,122,.15), 0 0 22px rgba(232,194,122,.22); animation: goldBreath 3.2s ease-in-out infinite; }
.chat:not(.locked) h3 { color: var(--gold); text-shadow: 0 0 12px rgba(232,194,122,.35); }
@keyframes goldBreath { 50% { box-shadow: 0 0 0 1px rgba(232,194,122,.3), 0 0 34px rgba(232,194,122,.38); } }
@media (prefers-reduced-motion: reduce) { .chat:not(.locked) { animation: none; } }

/* 카드마다 '더 물어보기' — 눈에 확 띄게 */
.ask-card { display: block; width: 100%; margin-top: 12px; padding: 12px 14px; border-radius: 12px; font-size: 14px; font-weight: 700; color: #ffe2a8;
  background: linear-gradient(135deg, rgba(232,194,122,.22), rgba(232,194,122,.08)); border: 1.5px solid rgba(232,194,122,.85);
  box-shadow: 0 0 16px rgba(232,194,122,.28); animation: goldBreath 3.2s ease-in-out infinite; }
.ask-card:active { transform: scale(.98); }
.chat .suggest .opt { border-color: rgba(232,194,122,.6); color: #ffe2a8; background: rgba(232,194,122,.1); }
.chat.locked { opacity: 1; border: 1.5px solid rgba(232,194,122,.55); box-shadow: 0 0 18px rgba(232,194,122,.18); }
.chat.locked h3 { color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .ask-card { animation: none; } }

/* 친구 타로 — 짧은 해석 · 보내기 버튼은 글을 가리지 않게 본문 안에 · 보낸 뒤 오늘의 타로 착지 */
.rcard.brief { margin-top: 12px; }
.rcard.brief .prose { margin-top: 0; }
.ask-send { margin-top: 16px; padding-bottom: 24px; }
.sent-ok { text-align: center; color: #8fe0a8; font-weight: 700; margin: 0 0 14px; }
.today-land { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 18px; background: linear-gradient(120deg, color-mix(in srgb, var(--rc) 20%, var(--bg2)), var(--bg2)); border: 1px solid color-mix(in srgb, var(--rc) 45%, transparent); }
.tl-art { width: 96px; flex: none; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; }
.tl-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tl-txt strong { font-size: 16px; }
.tl-txt small { color: var(--tx2); font-size: 12.5px; line-height: 1.5; }
.tl-txt .cta.sm { align-self: flex-start; margin-top: 6px; }
.sub-link { display: block; text-align: center; margin-top: 14px; font-size: 13px; color: var(--tx2); }
.ask { padding-bottom: 120px; }

/* 앱인토스 WebView 는 토스 상단 바 아래에서 시작하고 하단은 env(safe-area-inset-bottom)이 이미 잡는다.
   SDK 안전영역(--ait-safe-*)을 더하면 위아래 여백이 두 번 생겨서 쓰지 않는다. */
/* 미니앱은 하단 안전영역도 토스가 처리한다 — 탭바·하단 버튼을 화면 맨 아래에 붙인다(사용자 지정 2026-10-27) */
:root.toss { --safe-b: 0px; }
/* 미니앱은 토스 내비게이션 바에 뒤로가기가 있다 — 자체 뒤로가기(‹)는 숨긴다(심사 반려 2026-10-27: 중복 버튼). 제목 가운데 정렬은 유지 */
:root.toss [data-act="back"] { visibility: hidden; pointer-events: none; }

/* 쿠팡 게이트 */
.unlock.gate .disclosure { display: block; margin-top: 10px; font-size: 10px; color: var(--tx3); line-height: 1.4; }

/* 생성형 AI 표시(앱인토스 정책) */
.ai-badge { display: inline-block; margin-top: 6px; font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--rc, var(--gold)); color: var(--rc, var(--gold)); }
.ai-note { font-size: 11.5px; color: var(--tx3); line-height: 1.5; margin: -2px 0 10px; }
.ai-note .ai-badge { margin: 0 2px; padding: 0 5px; }
.ai-consent { padding: 14px; border-radius: 14px; border: 1px solid var(--rc, var(--gold)); background: var(--bg2); display: flex; flex-direction: column; gap: 10px; }
.ai-consent p { margin: 0; font-size: 13.5px; line-height: 1.6; }

/* AI 풀이 대기 · 표시 */
.tabbar b { position: relative; }
.tab-dot { position: absolute; top: -4px; right: -12px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: #ff5a6e; color: #fff; font-size: 10px; font-style: normal; font-weight: 800; line-height: 16px; text-align: center; }
.help-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0; padding: 14px 16px; border-radius: 16px; background: var(--bg2); border: 1px solid var(--line); }
.help-box b { display: block; font-size: 14px; } .help-box small { color: var(--tx3); font-size: 12px; }
.help-box .cta { width: auto; flex: none; padding: 10px 16px; }
.inq .inq-cats { display: flex; gap: 6px; margin: 4px 0 10px; }
.inq textarea.field { width: 100%; resize: vertical; min-height: 110px; margin-bottom: 8px; font: inherit; }
.inq input.field { width: 100%; margin-bottom: 12px; }
.inq .cta + .cta { margin-top: 8px; }
.login-nudge { margin: 18px 0; padding: 16px; border-radius: 16px; background: linear-gradient(150deg, rgba(255,140,60,.14), var(--bg2) 60%); border: 1px solid rgba(255,160,90,.35); }
.login-nudge b { display: block; font-size: 15px; margin-bottom: 4px; }
.login-nudge p { margin: 0 0 12px; font-size: 13px; color: var(--tx2); line-height: 1.55; }
.chat-promise { margin: 4px 0 10px; font-size: 13.5px; font-weight: 600; color: var(--rc, var(--gold)); line-height: 1.5; }
.ai-skel { display: grid; gap: 8px; padding: 6px 0; }
.ai-skel i { display: block; height: 10px; border-radius: 6px; background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.12), rgba(255,255,255,.05)); background-size: 200% 100%; animation: skel 1.4s linear infinite; }
.ai-skel i:last-child { width: 62%; }
@keyframes skel { to { background-position: -200% 0; } }
.ai-wait { display: flex; align-items: center; gap: 10px; padding: 14px 4px; font-size: 13.5px; color: var(--tx3); }
.r-head .ai-wait { justify-content: center; font-style: normal; }
.ai-wait .dots { display: inline-flex; gap: 4px; }
.ai-wait .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--rc, var(--gold)); animation: aiDot 1.2s infinite ease-in-out; }
.ai-wait .dots i:nth-child(2) { animation-delay: .15s; } .ai-wait .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes aiDot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .ai-wait .dots i { animation: none; opacity: .7; } }
.ai-mark { text-align: center; margin: -6px 0 10px; }
.ai-first { margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--rc, var(--gold)); background: var(--bg2); display: flex; gap: 10px; align-items: center; }
.ai-first p { margin: 0; font-size: 12.5px; line-height: 1.55; flex: 1; }
.r-sign + .ai-note, .ai-note { font-size: 11.5px; color: var(--tx3); text-align: center; margin-top: 6px; }

/* 종합 해석 — 리더 일러스트 왼쪽 · 해석 오른쪽 · 끝에 더 물어보기 */
.r-sum .sum-body { display: flex; gap: 12px; align-items: flex-start; }
.r-sum .sum-art { border: 1.5px solid var(--rc); flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--bg3, rgba(255,255,255,.06)); }
.r-sum .sum-art img { width: 100%; height: 100%; object-fit: cover; }
.r-sum .sum-text { flex: 1; min-width: 0; }
.r-sum .sum-ask { margin-top: 14px; }
.r-sum .sum-ask .cta { width: 100%; }
.r-sum .sum-ask .chat-promise { margin: 8px 0 0; text-align: center; }

/* 상품 소개 — 이런 분께 추천해요 · 어떤 걸 알려주나요? */
.toc.guide h3 { color: var(--rc, var(--gold)); }
.toc.guide h3 + ul { margin: 0 0 16px; padding-left: 18px; color: var(--tx2); line-height: 1.6; }
.toc.guide ul:last-of-type { margin-bottom: 0; }
.toc.guide li::marker { color: var(--rc, var(--gold)); }

/* AI 풀이 대기 — 강조 박스(사용자 지정 2026-10-27) */
.r-head:has(.ai-wait) { position: sticky; top: 62px; z-index: 15; margin: 18px 0; }
.r-head .ai-wait { justify-content: flex-start; text-align: left; gap: 12px; padding: 12px 14px; border-radius: 16px;
  background: var(--bg2); border: 1.5px solid var(--rc, var(--gold)); color: var(--tx); font-family: Pretendard, -apple-system, system-ui, sans-serif;
  box-shadow: 0 6px 24px rgba(0,0,0,.35); animation: awGlow 1.6s ease-in-out infinite; }
.ai-wait .aw-av { flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: 1.5px solid var(--rc, var(--gold)); }
.ai-wait .aw-av img { width: 100%; height: 100%; object-fit: cover; }
.ai-wait .aw-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ai-wait .aw-txt b { font-size: 16px; font-weight: 800; color: var(--rc, var(--gold)); line-height: 1.35; }
.ai-wait .aw-txt small { font-size: 12.5px; color: var(--tx2); line-height: 1.4; }
.ai-wait .dots i { width: 7px; height: 7px; }
@keyframes awGlow { 0%, 100% { box-shadow: 0 6px 24px rgba(0,0,0,.35), 0 0 0 0 color-mix(in srgb, var(--rc, #e8c27a) 0%, transparent); }
  50% { box-shadow: 0 6px 24px rgba(0,0,0,.35), 0 0 18px 2px color-mix(in srgb, var(--rc, #e8c27a) 55%, transparent); } }
@media (prefers-reduced-motion: reduce) { .r-head .ai-wait { animation: none; } }

/* 추가 질문 — 남은 횟수(오른쪽 크게) · 잠금 버튼 (2026-10-27) */
.chat-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chat-top h3 { margin: 0; min-width: 0; }
.chat-left { flex: none; font-size: 13px; font-weight: 700; color: var(--tx2); white-space: nowrap; }
.chat-left b { font-size: 22px; font-weight: 900; color: var(--rc, var(--gold)); margin: 0 2px; }
#ask-area .lock-cta { width: 100%; margin-top: 10px; }

/* 내 결과 공유하기 — 링크 · 카카오톡 · 인스타 */
.share-btns.sns { grid-template-columns: repeat(3, 1fr); }
.share-btns.sns > button { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px; }
.share-btns.sns .sh-ic { width: 44px; height: 44px; display: block; }
.share-btns.sns .sh-ic svg { width: 100%; height: 100%; display: block; }

/* 내 정보 — 사용 내역 접기 · 페이지 번호 (2026-10-27) */
.tx-box { margin-top: 14px; }
.tx-box > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 12px 2px; font-size: 14px; font-weight: 700; color: var(--tx2); border-top: 1px solid var(--line); }
.tx-box > summary::-webkit-details-marker { display: none; }
.tx-box > summary::after { content: '▾'; font-size: 14px; transition: transform .2s; }
.tx-box[open] > summary::after { transform: rotate(180deg); }
.tx-box .tx { margin-top: 0; }
.pager { display: flex; justify-content: center; gap: 6px; margin: 14px 0 4px; flex-wrap: wrap; }
.pager button { min-width: 34px; height: 34px; padding: 0 8px; border-radius: 10px; background: var(--bg2); color: var(--tx2); font-size: 14px; font-weight: 700; }
.pager button.on { background: var(--gold); color: #1a1426; }
.sel { user-select: all; -webkit-user-select: all; color: var(--tx); }

/* 친구 카드 — 보내는 사람 이름 (2026-10-27) */
.from-box { margin: 16px 0 0; padding: 14px 16px; border-radius: var(--r); background: var(--bg2); display: flex; flex-direction: column; gap: 8px; }
.from-box label { font-size: 14px; font-weight: 800; color: var(--rc, var(--gold)); }
.from-box small { font-size: 12.5px; color: var(--tx3); }
.letter b small { font-size: 12px; font-weight: 500; color: var(--tx3); }

/* 내 정보 — 닉네임 표기 · 로그아웃은 맨 아래 작게 · 탈퇴 (2026-10-27) */
.pf-name .pf-label { font-size: 14px; color: var(--tx3); white-space: nowrap; }
.logout-link { display: block; margin: 28px auto 8px; padding: 6px 10px; font-size: 12.5px; color: var(--tx3); text-decoration: underline; text-underline-offset: 3px; background: none; }
.inq-quit { text-align: center; padding: 18px 4px 6px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.inq-quit[hidden] { display: none; }
.inq-quit p { margin: 0; font-size: 13.5px; color: var(--tx2); line-height: 1.6; }
.cta.danger { background: #e5484d; color: #fff; box-shadow: none; }

/* 친구 카드 보내기 — 마지막 문장이 '카드 보내기' 버튼 바로 위에서 끝나게(빈 공간까지 스크롤되지 않게, 2026-10-27) */
main.ask { padding-bottom: 24px; }

/* 친구들이 뽑아준 카드 — 카드 이름 · 보낸 사람 · 두 줄 설명 (2026-10-27) */
.letter { align-items: flex-start; }
.letter .lt-body { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.letter .lt-card { font-size: 15px; font-weight: 800; color: var(--tx); }
.letter .lt-from { font-size: 12px; color: var(--rc, var(--gold)); font-weight: 700; }
.letter .lt-from small { margin-left: 0; }
.letter .lt-desc { flex-basis: 100%; margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--tx2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }


/* 하단 고정 버튼(cta-dock)이 있는 화면 — 마지막 내용이 버튼 바로 위(약 12px)에서 끝나게(2026-10-27)
   셸 아래 여백(72px+안전영역) + 이 값 24px = 버튼 높이(84px+안전영역) + 12px */
.landing, .shared, main.ask, main.letter-view { padding-bottom: 24px; }
.shell.fixed .step-body { padding-bottom: calc(96px + var(--safe-b)); }

/* 오늘의 카드 탭 — 로그인 전 소개(2026-10-27) */
.login-gate { padding: 8px 20px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.login-gate .lg-art { position: relative; width: 200px; aspect-ratio: 3 / 4; max-width: 100%; border-radius: 22px; overflow: hidden; border: 1.5px solid var(--rc); box-shadow: 0 12px 40px color-mix(in srgb, var(--rc) 35%, transparent); }
.login-gate .lg-art img { width: 100%; height: 100%; object-fit: cover; }
.login-gate .lg-badge { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 5px 12px; border-radius: 999px; background: var(--rc); color: #1a1426; font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.login-gate h1 { margin: 20px 0 6px; font-size: 24px; line-height: 1.35; font-weight: 800; text-wrap: balance; }
.login-gate .lg-lead { margin: 0 0 18px; font-size: 14.5px; color: var(--rc); font-weight: 700; }
.login-gate .lg-list { list-style: none; margin: 0; padding: 6px 16px; width: 100%; border-radius: var(--r); background: var(--bg2); text-align: left; }
.login-gate .lg-list li { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.login-gate .lg-list li:last-child { border-bottom: 0; }
.login-gate .lg-list span { font-size: 22px; flex: none; width: 30px; text-align: center; }
.login-gate .lg-list b { display: block; font-size: 14.5px; }
.login-gate .lg-list small { display: block; font-size: 12.5px; color: var(--tx3); margin-top: 2px; }
.login-gate .lg-cta { width: 100%; margin-top: 18px; }

/* 웹 로그인 창 — 카카오 · 구글 · 이메일로 시작하기 */
.login-sheet .ls-head { text-align: center; margin-bottom: 16px; }
.login-sheet .ls-head .art { display: block; margin: 0 auto; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--gold); }
.login-sheet .ls-head h3 { margin: 10px 0 4px; font-size: 20px; }
.login-sheet .ls-head p { margin: 0; font-size: 13.5px; color: var(--tx2); line-height: 1.5; }
.ls-btns { display: flex; flex-direction: column; gap: 10px; }
.ls-btns[hidden], .ls-email[hidden] { display: none; }
.ls-btn { position: relative; display: flex; align-items: center; justify-content: center; height: 52px; border-radius: 14px; font-size: 15.5px; font-weight: 700; }
.ls-btn svg { position: absolute; left: 18px; width: 22px; height: 22px; }
.ls-btn.kakao { background: #FEE500; color: #191919; }
.ls-btn.google { background: #fff; color: #1f1f1f; }
.ls-btn.email { background: var(--bg2); color: var(--tx); border: 1px solid var(--line); }
.ls-email { display: flex; flex-direction: column; gap: 10px; }
.ls-sent { margin: 0; font-size: 14px; line-height: 1.6; text-align: center; }
.ls-terms { margin: 14px 0 4px; font-size: 11.5px; color: var(--tx3); text-align: center; }
.ls-terms a { color: var(--tx2); text-decoration: underline; }
.ls-close { display: block; margin: 6px auto 0; padding: 8px; font-size: 13px; color: var(--tx3); background: none; }
.ls-err { margin: -4px 2px 0; font-size: 12.5px; color: #ff8a8a; }
.ls-err[hidden] { display: none; }
#ls-send:disabled { opacity: .45; }
.ls-sent { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 6px 0; }
.ls-sent .ls-sent-ic { font-size: 34px; }
.ls-sent b { font-size: 15px; word-break: break-all; }
.ls-sent p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--tx2); }
.ls-sent small { font-size: 12px; color: var(--tx3); line-height: 1.5; }

/* 세로 모드 고정(2026-10-27) — 잠글 수 없는 브라우저에서 휴대폰을 가로로 돌리면 화면을 반대로 90° 돌려 세로 그대로 보여 준다.
   html.rot 은 platform.js holdPortrait 가 붙인다. 돌린 동안 body 는 고정, #app 이 스크롤을 맡는다(dvh 대신 100%). */
html.rot { overflow: hidden; }
html.rot body { position: fixed; top: 50%; left: 50%; width: 100vh; height: 100vw; overflow: hidden; transform: translate(-50%, -50%) rotate(-90deg); }
html.rot.rot-r body { transform: translate(-50%, -50%) rotate(90deg); }
html.rot #app { height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
html.rot .step, html.rot .draw { min-height: 100%; }
html.rot .loading, html.rot .shell.fixed .step, html.rot .shell.fixed .draw, html.rot .shell.fixed .loading { height: 100%; }
html.rot .sheet .sheet-box { max-height: 92vw; }

/* 팝업이 떠 있는 동안 배경 고정(2026-10-27) */
body.sheet-lock { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
.sheet { overscroll-behavior: contain; touch-action: none; }
.sheet .sheet-box { max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.ls-sent .ls-spam { margin-top: 4px; padding: 7px 12px; border-radius: 10px; background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold); font-size: 13px; font-weight: 700; }
.login-gate .lg-art.me { width: 120px; aspect-ratio: 1; border-radius: 50%; }
.ls-email input[hidden], .ls-links button[hidden] { display: none; }
.ls-links { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.ls-links button { background: none; padding: 4px 2px; font-size: 12.5px; color: var(--tx2); text-decoration: underline; text-underline-offset: 3px; }
.ai-wait .aw-txt small .dots { display: inline-flex; gap: 3px; margin-left: 5px; vertical-align: middle; }
.ai-wait .aw-txt small .dots i { width: 4px; height: 4px; }

/* 보내는 중 — 버튼 안 작은 스피너 (2026-10-27) */
.spin { display: inline-block; width: 15px; height: 15px; margin-right: 8px; vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2s; } }
.cta:disabled { opacity: .85; }

/* 친구 카드 설명 — 최대 3줄 (2026-10-27) */
.letter .lt-desc { -webkit-line-clamp: 3; }
.rcard.friend3 p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--tx2); text-align: center; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* 결제를 여는 중 — 오버레이 + 진행 막대 (2026-10-27) */
.pay-wait { position: fixed; inset: 0; z-index: 180; display: grid; place-items: center; background: rgba(7,6,15,.55); backdrop-filter: blur(2px); animation: fadeIn .15s; }
.pay-wait .pw-box { width: min(280px, 80vw); padding: 22px 20px 18px; border-radius: 18px; background: var(--bg2); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.pay-wait .spin { width: 22px; height: 22px; margin: 0 0 6px; color: var(--gold); }
.pay-wait b { font-size: 15.5px; }
.pay-wait small { font-size: 12.5px; color: var(--tx3); }
.pay-wait .pw-bar { width: 100%; height: 5px; margin-top: 10px; border-radius: 99px; background: var(--line); overflow: hidden; }
.pay-wait .pw-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--gold); animation: pwFill 4s cubic-bezier(.1,.7,.3,1) forwards; }
@keyframes pwFill { to { width: 92%; } }
@keyframes fadeIn { from { opacity: 0; } }

/* 내 정보 — 보유 루나 강조(금색 테두리 · 큰 숫자, 2026-10-27) */
.w-stats { grid-template-columns: 1fr 1fr; }
.w-stat.luna { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 18px 16px;
  border: 1.5px solid var(--gold); background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 16%, var(--bg3)), var(--bg3) 70%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 20%, transparent), 0 8px 28px color-mix(in srgb, var(--gold) 18%, transparent); }
.w-stat.luna .wl-ic { font-size: 30px; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--gold) 60%, transparent)); }
.w-stat.luna > div { text-align: left; }
.w-stat.luna small { color: var(--tx2); font-weight: 700; }
.w-stat.luna b { font-size: 30px; font-weight: 900; letter-spacing: -.01em; }
.w-stat.luna em { font-style: normal; margin-left: 4px; font-size: 14px; color: var(--gold); font-weight: 700; }

/* 광고 보고 무료 타로(24시간에 한 번 · 월 5회) */
.sheet .cta.ad { background: linear-gradient(135deg, #e8473c, #f07a3a); color: #fff; }
.sheet .cta.ad:disabled { background: var(--bg3); color: var(--tx3); border: 1px solid var(--line); opacity: 1; }
.sheet .ad-left { margin: -2px 0 8px; font-size: 13px; text-align: center; color: var(--tx2); } .sheet .ad-left b { color: var(--gold); }
.ad-notes { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--bg3); font-size: 12.5px; line-height: 1.55; color: var(--tx2); text-align: left; }
.ad-notes b { display: block; margin-bottom: 4px; font-size: 13px; color: var(--tx); }
.ad-notes ul { margin: 0; padding-left: 16px; } .ad-notes li + li { margin-top: 2px; }
.ad-notes small { display: block; margin-top: 6px; font-size: 11px; color: var(--tx3); }
.ad-stamps { margin-top: 12px; padding: 14px; border-radius: 12px; background: var(--bg3); border: 1px solid var(--line); }
.ad-stamps .as-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.ad-stamps .as-head b { font-size: 14px; } .ad-stamps .as-head small { font-size: 12.5px; color: var(--gold); }
.ad-stamps .as-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.ad-stamps .stamp { aspect-ratio: 1; max-width: 52px; justify-self: center; width: 100%; display: grid; place-items: center; border-radius: 50%;
  border: 2px dashed var(--line); color: var(--tx3); font-size: 14px; font-weight: 700; }
.ad-stamps .stamp.on { border: 2px solid var(--gold); background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold); transform: rotate(-8deg); }
.ad-stamps .hint { margin: 10px 0 0; font-size: 12px; text-align: center; }

/* 내 정보 상단(2026-10-27): 불꽃·연속일 작게 + 닉네임은 카드 오른쪽 안, 아래 보유 루나·질문권·무료 이용권 한 줄 */
.mypage .sc-flame { font-size: 30px; }
.mypage .sc-n { font-size: 22px; }
.mypage .sc-sub { font-size: 12px; }
.sc-nick { margin-left: auto; display: flex; align-items: center; gap: 6px; min-width: 0; }
.sc-nick b { font-size: 16px; font-family: var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 9em; }
.sc-nick .pf-edit { padding: 3px 8px; font-size: 11px; }
.streak-card .field-row { margin-top: 10px; }
.w-stats.row3 { grid-template-columns: repeat(3, 1fr); }
.w-stats.row3 .w-stat.luna { grid-column: auto; display: block; padding: 12px 8px; }
.w-stats.row3 .w-stat.luna b { font-size: 20px; }
.ad-stamps .as-notes { margin: 8px 0 0; padding-left: 16px; font-size: 11px; line-height: 1.5; color: var(--tx3); }
.ad-stamps .as-head { align-items: flex-start; gap: 8px; }
.ad-stamps .as-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.ad-stamps .as-go { padding: 5px 12px; border-radius: 99px; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #e8473c, #f07a3a); }
.ad-stamps .as-go:disabled { background: var(--bg2); color: var(--tx3); border: 1px solid var(--line); font-weight: 500; }
.ad-stamps .hint b { color: var(--gold); }

/* 내 정보 지갑(2026-10-27): 금색 테두리를 보유 루나 칸에서 지갑 카드 전체(보유 루나 ~ 사용 내역)로 옮기고 더 얇게 */
.mypage .wallet { border: 1px solid color-mix(in srgb, var(--gold) 70%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 10%, transparent), 0 6px 22px color-mix(in srgb, var(--gold) 12%, transparent); }
.mypage .w-stats.row3 .w-stat.luna { border: 1px solid var(--line); box-shadow: none; background: var(--bg3); }

/* 알림은 한 줄 알약(2026-10-27) */
.toast { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100vw - 32px); padding: 9px 16px; font-size: 13px; line-height: 1.3; }
/* 결제 창: 카드 장수 안내 · 광고 버튼 · 남은 횟수 사이 간격 */
.sheet .cta.ad { margin-top: 6px; }
.sheet .ad-left { margin: 10px 0 12px; }

/* 결과: 종합 해석 카드 금색 테두리 + 질문을 카드 안으로(2026-10-27) */
.r-sum.gold { border: 1.5px solid rgba(232,194,122,.75); box-shadow: 0 0 0 1px rgba(232,194,122,.15), 0 0 22px rgba(232,194,122,.18); }
.r-sum.gold h3 { color: var(--gold); }
.r-sum .sum-chat { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(232,194,122,.25); }
.r-sum .sum-chat .chat-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.r-sum .sum-chat .chat-promise { margin: 0; font-size: 13.5px; color: var(--tx); }
.r-sum .sum-chat .thread:not(:empty) { margin-top: 12px; }
.r-sum .sum-chat #ask-area { margin-top: 12px; }
.r-sum .sum-chat #ask-area .cta { width: 100%; }
/* 토스 배너 광고 자리(결과 화면 하단) */
.ad-banner { margin: 18px 0 0; border-radius: 16px; overflow: hidden; min-height: 60px; }