/* 별담 랜딩 — 밤하늘 테마 (2026-10-30)
   앱 디자인 토큰(fortune 앱 lib/design/bd_theme.dart)을 그대로 옮겼다: 밤하늘 남색 바탕, 강조색은 달빛 금색 하나,
   버튼은 별빛 보라 하나, 제목은 명조(Noto Serif KR)·본문은 Pretendard. 운세 앱은 밤에 많이 열려 페이지 전체를 어둡게 둔다.
   home.css·landing.css 위에 body.bd 범위로만 덮는다(모아·스튜디오 랜딩에는 영향 없음). 생성기: scripts/landing/build_app_landings.py */
body.bd {
  --night: #0F1226; --night-deep: #080A18; --card: #1A1E3A; --card-2: #242A52;
  --gold: #E9C46A; --gold-soft: #F6E3B4; --violet: #7B6CF6; --violet-deep: #5B4BD6; --lavender: #BDB6F5;
  --c-spring: #9FD9C3; --c-summer: #F2A1B5; --c-autumn: #F5C39B; --c-winter: #8CC7F0;
  --serif: "Noto Serif KR", "Nanum Myeongjo", "AppleMyungjo", "Batang", serif;
  /* home.css 토큰을 어둡게 */
  --ink: #F3EFE6; --ink-2: #D8D5CF; --muted: #A3A5C0;
  --line: rgba(189, 182, 245, .14); --line-strong: rgba(189, 182, 245, .30);
  --bg: #0F1226; --bg-soft: #12162F; --cream: #0C0F22; --navy: #080A18;
  --shadow-md: 0 10px 30px rgba(0, 0, 0, .35); --shadow-lg: 0 24px 60px rgba(0, 0, 0, .45);
  --radius: 18px; --radius-lg: 22px;
  background: var(--night); color: var(--ink); color-scheme: dark;
}
.bd [hidden] { display: none !important; }
.bd :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
.bd h1, .bd h2, .bd .pillar h3, .bd .sd h3, .bd .try-result h3, .bd .download h2 { font-family: var(--serif); letter-spacing: -0.01em; }
.bd .section-head h2 { font-weight: 700; line-height: 1.3; }
.bd .section-head p { color: var(--muted); }
.bd .kicker { color: var(--gold); letter-spacing: .14em; }
.bd .section-link { color: var(--gold); }

/* 버튼 — 보라 하나 */
.bd .btn-primary { background: var(--violet-deep); color: #fff; box-shadow: 0 8px 24px rgba(91, 75, 214, .38); }
.bd .btn-primary:hover { background: #4E3FC4; }
.bd .store-soon { border-color: rgba(255, 255, 255, .28); color: rgba(255, 255, 255, .72); }

/* 헤더 */
.bd .site-header::before { background: rgba(15, 18, 38, .80); }
.bd .nav-link:hover { background: rgba(255, 255, 255, .06); }
.bd .nav-link, .bd .app-crumb { white-space: nowrap; }
.bd .brand { flex: none; }
@media (min-width: 1024px) and (max-width: 1199px) { .bd .nav-link { padding: 10px 9px; font-size: 15px; } .bd .nav-desktop .nav-link:last-child { display: none; } }
.bd .nav-mobile { background: var(--night); }
.bd .app-crumb { color: var(--ink); }

/* ── 히어로 ─────────────────────────────── */
.bd .app-hero h1 { font-weight: 700; line-height: 1.28; letter-spacing: -0.02em; font-size: clamp(32px, 5vw, 54px); }
.bd .app-hero h1 .accent { color: var(--gold); }
.bd .app-hero .lead { color: rgba(243, 239, 230, .78); }
.bd .hero-try { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin-top: 14px; padding: 0 18px; border-radius: 999px;
  border: 1.5px solid rgba(233, 196, 106, .45); color: var(--gold-soft); font-weight: 700; font-size: 15.5px; background: rgba(233, 196, 106, .06); transition: background .15s ease, border-color .15s ease; }
.bd .hero-try:hover { background: rgba(233, 196, 106, .14); border-color: var(--gold); }
.bd .hero-try svg { width: 18px; height: 18px; color: var(--gold); }
/* 그림은 가장자리가 남색으로 사라지게 그렸다 — 상자·그림자 없이 바탕에 녹인다 */
.bd .hero-stage .art { background: transparent; box-shadow: none; border-radius: 0; overflow: visible;
  -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 62%, transparent 100%); }
.bd .hero-stage .phone { box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(189, 182, 245, .18); }
/* 휴대폰 목업은 오른쪽 산 위에 — 가운데 계절 고리를 가리지 않게 */
.bd .hero-stage .phone { right: -2%; width: 30%; }
@media (max-width: 599px) { .bd .hero-stage .phone { right: 0; width: 31%; } }

/* ── 내 계절 (태어난 해) ───────────────────── */
.bd-try { background: radial-gradient(900px 420px at 50% 0%, rgba(123, 108, 246, .14), transparent 70%); }
.try-card { display: grid; gap: 22px; padding: 22px; border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--card), #151933);
  border: 1px solid rgba(233, 196, 106, .22); box-shadow: 0 0 0 1px rgba(255, 255, 255, .02), 0 30px 80px rgba(0, 0, 0, .35); }
@media (min-width: 900px) { .try-card { grid-template-columns: 360px 1fr; gap: 32px; padding: 32px; align-items: start; } }
.try-form label { display: block; font-size: 14px; font-weight: 700; color: var(--muted); margin-bottom: 10px; }
.try-row { display: flex; flex-wrap: wrap; gap: 10px; }
.try-input { flex: 1 1 160px; display: flex; align-items: center; gap: 8px; height: 60px; padding: 0 18px; border-radius: 16px; background: var(--night-deep); border: 1.5px solid var(--line-strong); }
.try-input:focus-within { border-color: var(--gold); }
.try-input input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 700 26px/1 var(--serif); letter-spacing: .02em; outline: none; -moz-appearance: textfield; }
.try-input input::-webkit-outer-spin-button, .try-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.try-input input::placeholder { color: rgba(163, 165, 192, .55); font-weight: 600; }
.try-input .unit { color: var(--muted); font-weight: 700; }
.try-row .btn { flex: 1 1 140px; min-height: 60px; border-radius: 16px; font-size: 16.5px; }
@media (max-width: 520px) { .try-input, .try-row .btn { flex-basis: 100%; } }
.try-err { margin-top: 10px; color: var(--c-summer); font-size: 14px; font-weight: 600; }
.try-note { margin-top: 14px; font-size: 13px; color: var(--muted); }
.try-empty { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.try-empty li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.try-empty img { width: 56px; height: 56px; margin-bottom: 6px; }
.try-empty b { font-family: var(--serif); font-size: 18px; }
.try-empty span { font-size: 13px; color: var(--muted); }
.try-result { animation: bd-rise .35s ease both; }
.tr-top { display: flex; gap: 16px; align-items: center; }
.tr-top img { width: 88px; height: 88px; flex: none; }
.tr-label { font-size: 12.5px; font-weight: 800; letter-spacing: .1em; color: var(--muted); }
.try-result h3 { margin-top: 4px; font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; line-height: 1.3; color: var(--ink); }
.tr-mine { margin-top: 4px; font-size: 14px; color: var(--muted); }
.tr-body { margin-top: 16px; font-size: 16.5px; line-height: 1.7; color: var(--ink-2); }
.tr-bar { position: relative; display: flex; gap: 3px; margin-top: 18px; height: 14px; }
.tr-bar .seg { flex: 1; border-radius: 6px; opacity: .28; }
.tr-bar .seg.on { opacity: 1; }
.tr-bar #tr-mark { position: absolute; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--gold-soft); border: 3px solid var(--night); box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(233, 196, 106, .8); transition: left .5s cubic-bezier(.2, .8, .2, 1); }
.tr-ticks { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 8px; font-size: 12px; color: var(--muted); text-align: center; }
.tr-note { margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.tr-next { margin-top: 18px; padding: 16px 18px; border-radius: 16px; background: rgba(123, 108, 246, .10); border: 1px solid rgba(189, 182, 245, .2); }
.tr-next b { font-size: 14.5px; color: var(--lavender); }
.tr-next ul { margin-top: 10px; display: grid; gap: 8px; }
.tr-next li { display: flex; gap: 8px; font-size: 14.5px; color: var(--ink-2); }
.tr-next li svg { flex: none; width: 16px; height: 16px; margin-top: 4px; color: var(--gold); }
.try-result .store-row { margin-top: 18px; }
.tr-bar .s0 { background: var(--c-spring); }
.tr-bar .s1 { background: var(--c-summer); }
.tr-bar .s2 { background: var(--c-autumn); }
.tr-bar .s3 { background: var(--c-winter); }
@keyframes bd-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── 네 기둥 ─────────────────────────────── */
.pillars { display: grid; gap: 16px; }
@media (min-width: 760px) { .pillars { grid-template-columns: 1fr 1fr; gap: 20px; } }
.pillar { overflow: hidden; border-radius: var(--radius-lg); background: linear-gradient(180deg, #171B3A, #141831); border: 1px solid var(--line); transition: border-color .2s ease, transform .2s ease; }
.pillar:hover { border-color: rgba(233, 196, 106, .35); transform: translateY(-2px); }
.pillar img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.pillar-body { padding: 4px 24px 26px; }
.pillar-no { font: 700 13px/1 var(--serif); color: var(--gold); letter-spacing: .1em; }
.pillar h3 { margin-top: 8px; font-size: 22px; font-weight: 700; color: var(--ink); }
.pillar p { margin-top: 8px; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }
.pillar .fnote { margin-top: 12px; padding-left: 10px; border-left: 2px solid var(--gold); font-size: 13px; color: var(--muted); }

/* ── 12운성 ──────────────────────────────── */
.bd-stages { background: linear-gradient(180deg, transparent, rgba(123, 108, 246, .07) 40%, transparent); }
.stages { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .stages { grid-template-columns: minmax(300px, 420px) 1fr; gap: 48px; } }
.ring-wrap { max-width: 420px; width: 100%; margin: 0 auto; }
.ring { width: 100%; height: auto; display: block; overflow: visible; }
.ring .seg { opacity: .32; cursor: pointer; stroke: var(--night); stroke-width: 1; transition: opacity .2s ease; }
.ring .seg.s0 { fill: var(--c-spring); } .ring .seg.s1 { fill: var(--c-summer); } .ring .seg.s2 { fill: var(--c-autumn); } .ring .seg.s3 { fill: var(--c-winter); }
.ring .seg:hover { opacity: .55; }
.ring .seg.on { opacity: 1; stroke: var(--gold-soft); stroke-width: 2.5; filter: drop-shadow(0 0 10px rgba(233, 196, 106, .55)); }
.ring-labels text { fill: var(--ink); font: 700 14px/1 var(--serif); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.ring-core { fill: var(--card); stroke: rgba(233, 196, 106, .45); stroke-width: 1.5; }
.ring-hanja { fill: var(--gold); font: 700 40px/1 var(--serif); text-anchor: middle; dominant-baseline: central; }
.ring-name { fill: var(--ink-2); font: 600 15px/1 var(--font); text-anchor: middle; dominant-baseline: central; }
.stage-detail { min-height: 150px; padding: 22px 24px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); }
.sd-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: var(--night); }
.sd-tag.s0 { background: var(--c-spring); } .sd-tag.s1 { background: var(--c-summer); } .sd-tag.s2 { background: var(--c-autumn); } .sd-tag.s3 { background: var(--c-winter); }
.sd h3 { margin-top: 12px; font-size: 26px; font-weight: 700; color: var(--ink); }
.sd h3 span { color: var(--gold); margin-left: 6px; }
.sd p { margin-top: 8px; font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.stage-groups { display: grid; gap: 12px; margin-top: 18px; }
.stage-group { display: grid; grid-template-columns: 36px 52px 1fr; align-items: center; gap: 10px; }
.stage-group img { width: 36px; height: 36px; }
.sg-name { font: 700 15px/1 var(--serif); color: var(--ink-2); }
.sg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.stage-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line-strong); color: var(--ink-2); font-weight: 700; font-size: 14.5px; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.stage-chip small { font: 600 12.5px/1 var(--serif); color: var(--muted); }
.stage-chip:hover { border-color: var(--gold); }
.stage-chip[aria-pressed="true"] { background: rgba(233, 196, 106, .14); border-color: var(--gold); color: var(--gold-soft); }
.stage-chip[aria-pressed="true"] small { color: var(--gold); }

/* ── 운세 탭 ─────────────────────────────── */
.readings { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 640px) { .readings { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .readings { grid-template-columns: repeat(5, 1fr); gap: 14px; } }
.readings li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 20px 12px 18px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); transition: transform .2s ease, border-color .2s ease; }
.readings li:hover { transform: translateY(-3px); border-color: rgba(189, 182, 245, .35); }
.readings img { width: 72px; height: 72px; margin-bottom: 6px; }
.readings b { font-size: 15.5px; font-weight: 800; color: var(--ink); }
.readings span { font-size: 13px; line-height: 1.45; color: var(--muted); }
.more-row { display: flex; gap: 14px; align-items: flex-start; margin-top: 14px; padding: 18px 20px; border-radius: var(--radius); background: rgba(123, 108, 246, .08); border: 1px solid rgba(189, 182, 245, .18); }
.more-row .ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(189, 182, 245, .14); color: var(--lavender); }
.more-row .ic svg { width: 20px; height: 20px; }
.more-row b { font-size: 15.5px; }
.more-row p { margin-top: 2px; font-size: 14.5px; color: var(--ink-2); }

/* ── 공용 섹션을 밤하늘로 ─────────────────────── */
.bd .phone { box-shadow: 0 24px 60px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.bd .step, .bd .plan, .bd .faq details, .bd .app-card { background: var(--card); border-color: var(--line); }
.bd .step .num { background: rgba(233, 196, 106, .12); color: var(--gold); font-family: var(--serif); border: 1px solid rgba(233, 196, 106, .3); }
.bd .plan.pro { border-color: rgba(233, 196, 106, .6); background: linear-gradient(160deg, #1F2347 0%, #2A2552 100%); }
.bd .plan .plan-name { font-family: var(--serif); }
.bd .plan .plan-name .tag { background: var(--gold); color: var(--night); }
.bd .plan li svg { color: var(--gold); }
.bd .faq summary::after { background: rgba(255, 255, 255, .06); color: var(--gold-soft); }
.bd .notice { background: rgba(255, 255, 255, .03); }
.bd .app-card:hover { border-color: var(--line-strong); }
.bd .app-icon { background: var(--card-2); box-shadow: none; }
.bd .site-footer { background: var(--night-deep); border-top-color: var(--line); }

/* 다운로드 띠 — 달과 산 그림 위에 */
.bd .download { background: linear-gradient(90deg, rgba(15, 18, 38, .95) 0%, rgba(15, 18, 38, .7) 42%, rgba(15, 18, 38, .05) 100%), url(art-band.webp) 70% 50% / cover no-repeat, var(--night); }
@media (max-width: 899px) { .bd .download { background: linear-gradient(180deg, rgba(15, 18, 38, .2) 0%, rgba(15, 18, 38, .92) 55%), url(art-band-sm.webp) 75% 0% / auto 260px no-repeat, var(--night); }
  .bd .download-inner { padding-top: 170px; } }
.bd .download h2 { font-weight: 700; }
.bd .download .icon-big { border-radius: 30px; box-shadow: 0 0 0 1px rgba(233, 196, 106, .3), 0 20px 60px rgba(0, 0, 0, .5); }

/* ── 하단 받기 띠 (좁은 화면, 히어로를 지나면) ───────── */
.bd-sticky { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 90;
  display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 20px;
  background: rgba(26, 30, 58, .92); border: 1px solid rgba(233, 196, 106, .25); box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transform: translateY(150%); visibility: hidden; transition: transform .28s ease, visibility 0s linear .28s; }
.bd-sticky.is-on { transform: none; visibility: visible; transition: transform .28s ease; }
.bd-sticky img { width: 44px; height: 44px; border-radius: 12px; flex: none; }
.bd-sticky .st-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bd-sticky b { font-family: var(--serif); font-size: 16px; color: var(--ink); }
.bd-sticky span { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-sticky .btn { flex: none; min-height: 44px; padding: 0 16px; font-size: 14.5px; }
@media (max-width: 899px) { body.bd { padding-bottom: 84px; } }
@media (min-width: 900px) { .bd-sticky { display: none; } }

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