:root {
  --navy: #08162b;
  --navy-2: #10294c;
  --ink: #14213a;
  --muted: #60708a;
  --line: #dce4ee;
  --paper: #f5f7fa;
  --white: #ffffff;
  --gold: #c99a55;
  --gold-soft: #f7eddc;
  --blue: #2475e8;
  --blue-dark: #124aab;
  --danger: #c54040;
  font-family: "SUIT", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: var(--ink);
  background: var(--navy);
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: var(--paper); }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.skip-link { position: fixed; z-index: 20; left: 16px; top: -60px; padding: 10px 14px; border-radius: 10px; background: var(--white); color: var(--navy); font-weight: 800; transition: top .16s ease; }
.skip-link:focus { top: 14px; }
.help-app { min-height: 100dvh; background: radial-gradient(80rem 42rem at 88% -15%, #1d4c85 0%, transparent 54%), var(--navy); color: var(--white); }
.app-header { height: max(68px, env(safe-area-inset-top)); padding: max(16px, env(safe-area-inset-top)) clamp(20px, 5vw, 64px) 16px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; gap: 9px; align-items: center; color: var(--white); text-decoration: none; font-size: 14px; font-weight: 800; letter-spacing: -.02em; }
.brand-mark { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(255,255,255,.3); border-radius: 8px; background: linear-gradient(145deg, #dcb879, #9b6c32); color: var(--navy); font-family: Georgia, serif; font-weight: 900; }
.header-note { color: #bdcce0; font-size: 13px; }
.screen { min-height: calc(100dvh - 68px); }
.start-screen { max-width: 1260px; margin: 0 auto; padding: clamp(28px, 6vh, 80px) clamp(20px, 5vw, 64px) clamp(34px, 7vh, 92px); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .7fr); gap: clamp(38px, 8vw, 120px); align-items: center; }
.start-copy { max-width: 690px; }
.eyebrow { margin: 0 0 13px; color: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: .13em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 22px; color: #fff; font-size: clamp(42px, 5.2vw, 76px); line-height: 1.12; letter-spacing: -.065em; }
h1 em { color: #efce95; font-style: normal; }
.lead { max-width: 610px; margin-bottom: 30px; color: #d0dbeb; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.75; word-break: keep-all; }
.primary-action, .secondary-action { min-height: 56px; padding: 14px 20px; border: 0; border-radius: 15px; cursor: pointer; font-size: 16px; font-weight: 800; letter-spacing: -.02em; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.primary-action { background: linear-gradient(135deg, #428df6, #1b61ca); color: #fff; box-shadow: 0 12px 28px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255,255,255,.26); }
.primary-action:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.26); }
.primary-action:disabled { cursor: wait; opacity: .64; transform: none; }
.primary-action span { margin-left: 10px; }
.trust-row { display: flex; flex-wrap: wrap; gap: 8px 17px; margin-top: 22px; color: #b9c8dd; font-size: 13px; }
.trust-row span::before { content: "•"; margin-right: 7px; color: var(--gold); }
.start-panel { padding: clamp(25px, 4vw, 42px); border: 1px solid rgba(217, 228, 244, .18); border-radius: 28px; background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.035)); box-shadow: 0 28px 70px rgba(0,0,0,.25); backdrop-filter: blur(14px); }
.panel-kicker { margin-bottom: 22px; color: #d9e5f5; font-size: 13px; font-weight: 700; }
.start-panel ol { margin: 0 0 24px; padding: 0; list-style: none; display: grid; gap: 17px; }
.start-panel li { display: flex; gap: 14px; align-items: center; color: #fff; font-size: 15px; font-weight: 700; }
.start-panel b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(201,154,85,.18); color: #f3cf92; font-size: 11px; }
.start-panel p { margin: 0; padding-top: 19px; border-top: 1px solid rgba(255,255,255,.13); color: #c2cfdf; font-size: 13px; line-height: 1.65; word-break: keep-all; }
.wizard-screen, .result-screen { background: linear-gradient(135deg, #edf1f6, #f9fafb); color: var(--ink); }
.wizard-shell, .result-shell { width: min(100%, 850px); min-height: calc(100dvh - 68px); margin: 0 auto; padding: clamp(28px, 6vh, 64px) clamp(18px, 4vw, 44px) calc(28px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; justify-content: center; }
.progress-area { display: flex; gap: 24px; align-items: end; justify-content: space-between; margin-bottom: clamp(24px, 4vh, 38px); }
.progress-area h2 { margin: 0; font-size: clamp(20px, 3vw, 28px); letter-spacing: -.04em; }
.progress-meta { width: min(38vw, 200px); color: var(--muted); font-size: 12px; font-weight: 800; text-align: right; }
.progress-track { height: 5px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: #d8e0ea; }
.progress-track span { display: block; width: 16.6%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), #67a8ff); transition: width .28s ease; }
.question-card { padding: clamp(24px, 5vw, 40px); border: 1px solid var(--line); border-radius: 24px; background: var(--white); box-shadow: 0 16px 42px rgba(22, 42, 69, .09); }
.question-card.is-active { animation: enter .25s ease both; }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.question-kicker { margin-bottom: 12px; color: var(--blue); font-size: 12px; font-weight: 900; letter-spacing: .1em; }
.question-card h3 { margin-bottom: 10px; font-size: clamp(25px, 4vw, 35px); line-height: 1.3; letter-spacing: -.055em; word-break: keep-all; }
.question-help { margin-bottom: 25px; color: var(--muted); font-size: 15px; line-height: 1.65; word-break: keep-all; }
.number-field, .phone-field { display: flex; align-items: center; gap: 11px; padding: 4px 16px; border: 1px solid var(--line); border-radius: 16px; background: #fafcff; color: var(--muted); font-weight: 800; }
.number-field:focus-within, .phone-field:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(36,117,232,.12); }
.number-field input, .phone-field input { width: 100%; min-height: 56px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 20px; font-weight: 800; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choice-grid.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice-grid.single { grid-template-columns: 1fr; }
.choice-grid button { min-height: 54px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 15px; background: #fff; color: var(--ink); cursor: pointer; font-size: 15px; font-weight: 750; letter-spacing: -.02em; transition: border .15s ease, background .15s ease, color .15s ease, transform .15s ease; }
.choice-grid button:hover { border-color: #8db8f5; background: #f4f8ff; transform: translateY(-1px); }
.choice-grid button.is-selected { border-color: var(--blue); background: #eaf3ff; color: var(--blue-dark); box-shadow: inset 0 0 0 1px var(--blue); }
.text-action { margin-top: 17px; padding: 6px 0; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.wizard-nav { display: flex; gap: 10px; margin-top: 18px; }
.wizard-nav .primary-action { flex: 1; }
.secondary-action { min-width: 94px; border: 1px solid #b8c6d7; background: #fff; color: var(--ink); }
.secondary-action:hover { background: #f4f7fb; }
.form-status { min-height: 22px; margin: 14px 0 0; color: var(--danger); font-size: 14px; font-weight: 700; }
.phone-field { display: grid; gap: 4px; padding: 13px 16px 4px; }
.phone-field > span { color: var(--muted); font-size: 13px; }
.answer-summary { margin: 16px 0; padding: 13px 15px; border-radius: 13px; background: var(--gold-soft); color: #76501d; font-size: 13px; font-weight: 700; line-height: 1.55; }
.consent-row { display: flex; gap: 10px; align-items: flex-start; margin-top: 13px; color: var(--ink); font-size: 14px; line-height: 1.55; cursor: pointer; }
.consent-row input { width: 19px; height: 19px; margin: 1px 0 0; accent-color: var(--blue); flex: 0 0 auto; }
.consent-row b { margin-right: 5px; color: var(--blue); font-size: 12px; }
.health-consent { margin-top: 13px; padding: 3px 14px 13px; border: 1px solid #f0d8b2; border-radius: 14px; background: #fffbf4; }
.health-consent p, .privacy-copy { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; word-break: keep-all; }
.privacy-copy a { color: var(--blue-dark); }
.result-shell { align-items: flex-start; }
.result-shell h2 { margin-bottom: 14px; color: var(--ink); font-size: clamp(36px, 5vw, 54px); line-height: 1.17; letter-spacing: -.065em; }
.result-lead { max-width: 640px; color: var(--muted); font-size: 16px; line-height: 1.7; word-break: keep-all; }
.result-list { width: 100%; margin: 26px 0 18px; padding: 0; display: grid; gap: 10px; list-style: none; }
.result-list li { display: flex; gap: 15px; padding: 18px; border: 1px solid var(--line); border-radius: 17px; background: var(--white); box-shadow: 0 6px 18px rgba(26,43,68,.05); }
.result-number { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; background: #eaf3ff; color: var(--blue-dark); font-size: 12px; font-weight: 900; flex: 0 0 auto; }
.result-list strong { display: block; margin-bottom: 5px; font-size: 16px; letter-spacing: -.025em; }
.result-list p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; word-break: keep-all; }
.result-note { width: 100%; margin-bottom: 16px; padding: 14px 15px; border-left: 3px solid var(--gold); background: #fffaf2; color: #76501d; font-size: 13px; line-height: 1.6; }
.consult-action { width: 100%; }
.submit-status { min-height: 22px; margin: 14px 0 0; color: #176842; font-size: 14px; font-weight: 700; line-height: 1.6; }
.restart-action { align-self: center; color: var(--muted); }
:focus-visible { outline: 3px solid #6ca6f6; outline-offset: 3px; }
@media (max-width: 760px) {
  .app-header { padding-left: 20px; padding-right: 20px; }
  .header-note { display: none; }
  .screen { min-height: calc(100dvh - 58px); }
  .start-screen { min-height: calc(100dvh - 58px); grid-template-columns: 1fr; gap: 30px; padding-top: 30px; }
  .start-panel { padding: 24px; }
  .wizard-shell, .result-shell { min-height: calc(100dvh - 58px); justify-content: flex-start; }
  .choice-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .progress-area { gap: 14px; }
  .progress-meta { width: 130px; }
}
@media (max-width: 380px), (max-height: 700px) {
  .app-header { height: 58px; }
  .start-screen { padding-top: 18px; padding-bottom: 22px; }
  h1 { font-size: 38px; margin-bottom: 14px; }
  .lead { margin-bottom: 19px; font-size: 15px; }
  .start-panel { padding: 18px; }
  .start-panel ol { gap: 11px; margin-bottom: 17px; }
  .wizard-shell, .result-shell { padding-top: 20px; padding-bottom: 20px; }
  .question-card { padding: 22px; }
  .question-card h3 { font-size: 24px; }
  .question-help { margin-bottom: 17px; }
  .choice-grid button { min-height: 48px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Customer landing refresh: editorial trust, not product pressure. */
.landing-screen { min-height: 100%; background: #f6f4ef; color: #0b1c31; }
.landing-main { overflow: clip; background: #f6f4ef; }
.landing-hero { position: relative; isolation: isolate; overflow: hidden; min-height: min(840px, calc(100dvh - 68px)); padding: clamp(56px, 9vw, 126px) max(24px, calc((100vw - 1220px) / 2)) clamp(48px, 8vw, 100px); background: linear-gradient(135deg, #06172c 0%, #0b2747 62%, #102e4d 100%); color: #f8f4eb; }
.landing-hero::before { position: absolute; z-index: -1; inset: 0; content: ''; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, black, transparent 76%); }
.landing-orb { position: absolute; z-index: -1; border-radius: 999px; filter: blur(2px); pointer-events: none; opacity: .8; }
.landing-orb-a { top: -140px; right: -72px; width: 460px; height: 460px; background: radial-gradient(circle at 30% 30%, rgba(236,196,123,.48), rgba(201,154,85,.08) 62%, transparent 71%); animation: landing-drift 13s ease-in-out infinite alternate; }
.landing-orb-b { bottom: -230px; left: 30%; width: 600px; height: 420px; background: radial-gradient(ellipse, rgba(62,133,209,.29), transparent 67%); animation: landing-drift 16s ease-in-out -4s infinite alternate-reverse; }
.landing-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr); gap: clamp(44px, 7vw, 108px); align-items: center; width: min(100%, 1220px); margin: 0 auto; }
.landing-copy { max-width: 720px; }
.eyebrow, .section-kicker { margin: 0; color: #bcd3ef; font-size: 12px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid rgba(188,211,239,.24); border-radius: 999px; background: rgba(7,25,46,.18); backdrop-filter: blur(10px); }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: #ecc47b; box-shadow: 0 0 0 5px rgba(236,196,123,.12); }
.landing-copy h1 { max-width: 650px; margin: 25px 0 22px; color: #fffdf9; font-size: clamp(45px, 6.4vw, 78px); line-height: 1.08; letter-spacing: -.078em; word-break: keep-all; }
.landing-copy h1 em, .landing-final h2 em { color: #eac178; font-style: normal; }
.landing-lead { max-width: 615px; margin: 0; color: #d4e0ef; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.78; letter-spacing: -.025em; word-break: keep-all; }
.landing-action-row { display: flex; align-items: center; margin-top: 34px; }
.landing-action-slot { width: min(100%, 330px); }
.landing-primary-action { display: inline-flex; justify-content: center; align-items: center; gap: 11px; width: 100%; min-height: 58px; padding: 14px 22px; border: 1px solid rgba(255,255,255,.24); border-radius: 17px; background: #f5cc81; color: #0b1c31; box-shadow: 0 14px 33px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.55); cursor: pointer; font-size: 16px; font-weight: 900; letter-spacing: -.035em; transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, background .2s ease; }
.landing-primary-action:hover { transform: translateY(-3px); background: #ffe0a0; box-shadow: 0 19px 38px rgba(0,0,0,.31), inset 0 1px rgba(255,255,255,.62); }
.landing-primary-action:active { transform: translateY(0) scale(.985); }
.landing-cta-note { margin: 14px 0 0; color: #b9cce1; font-size: 13px; font-weight: 650; }
.landing-trust-list { display: flex; flex-wrap: wrap; gap: 9px 20px; margin: 27px 0 0; padding: 0; list-style: none; color: #d5e1ef; font-size: 13px; font-weight: 700; }
.landing-trust-list li { display: flex; align-items: center; gap: 7px; }
.landing-trust-list span { color: #eac178; font-size: 10px; letter-spacing: .08em; }
.hero-proof { position: relative; padding: clamp(19px, 3vw, 30px); border: 1px solid rgba(255,255,255,.21); border-radius: 29px; background: linear-gradient(145deg, rgba(255,255,255,.17), rgba(255,255,255,.055)); box-shadow: 0 35px 80px rgba(0,0,0,.26); backdrop-filter: blur(18px); transform: rotate(1.5deg); }
.hero-proof::after { position: absolute; right: 30px; bottom: -23px; width: 138px; height: 45px; border: 1px solid rgba(234,193,120,.62); border-top: 0; border-radius: 0 0 60px 60px; content: ''; opacity: .8; }
.proof-topline, .social-top, .social-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.proof-topline { color: #e8eef7; font-size: 12px; font-weight: 800; }
.proof-live { display: inline-flex; align-items: center; gap: 6px; color: #c9d8ea; font-size: 11px; }
.proof-live i { width: 7px; height: 7px; border-radius: 50%; background: #75dfa5; box-shadow: 0 0 0 4px rgba(117,223,165,.14); }
.proof-question { display: flex; gap: 17px; align-items: flex-start; margin: 29px 0 21px; }
.proof-index { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 12px; background: #eac178; color: #112845; font-size: 12px; font-weight: 900; }
.proof-question p { margin: 0; color: #f9fbff; font-size: clamp(21px, 2.2vw, 28px); line-height: 1.34; letter-spacing: -.05em; word-break: keep-all; }
.proof-question strong { color: #e9c47f; }
.proof-scan { position: relative; height: 118px; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 18px; background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.025)); }
.proof-scan::before, .proof-scan::after { position: absolute; content: ''; }
.proof-scan::before { top: 23px; right: 23px; bottom: 23px; left: 23px; border-radius: 11px; background: repeating-linear-gradient(to bottom, transparent 0 15px, rgba(210,224,240,.28) 16px 18px); }
.proof-scan::after { top: 21px; left: 23px; width: 39%; height: 18px; border-radius: 7px; background: rgba(234,193,120,.75); }
.proof-scan span { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 2px; background: #f7d995; box-shadow: 0 0 22px 4px rgba(247,217,149,.72); animation: proof-scan 3.8s cubic-bezier(.35,.04,.24,.98) infinite; }
.proof-result { display: flex; align-items: center; gap: 11px; margin-top: 17px; padding: 14px; border-radius: 16px; background: rgba(4,18,35,.47); }
.proof-check { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #77dca4; color: #082139; font-weight: 900; }
.proof-result div { display: grid; gap: 2px; flex: 1; }.proof-result b { color: #fff; font-size: 13px; }.proof-result small { color: #bdcde0; font-size: 11px; }.proof-arrow { color: #eac178; font-size: 19px; }
.proof-foot { margin: 18px 1px 0; color: #bed0e4; font-size: 12px; line-height: 1.65; word-break: keep-all; }
.landing-scroll-cue { position: absolute; bottom: 24px; left: 50%; display: inline-flex; gap: 9px; color: #b7cae0; font-size: 12px; font-weight: 800; text-decoration: none; transform: translateX(-50%); }.landing-scroll-cue span { color: #eac178; animation: scroll-nudge 1.8s ease-in-out infinite; }
.landing-principle { display: grid; grid-template-columns: 1fr minmax(250px, .66fr); gap: clamp(28px, 8vw, 150px); align-items: end; width: min(100% - 48px, 1120px); margin: 0 auto; padding: clamp(72px, 10vw, 134px) 0; }.landing-principle .section-kicker, .tour-heading .section-kicker, .flow-head .section-kicker, .landing-final .section-kicker { color: #5b7696; }.landing-principle h2, .tour-heading h2, .landing-flow h2, .landing-final h2 { margin: 14px 0 0; color: #0a1b31; font-size: clamp(31px, 4.6vw, 56px); line-height: 1.18; letter-spacing: -.068em; word-break: keep-all; }.landing-principle > p { margin: 0; color: #4b6078; font-size: 17px; line-height: 1.85; letter-spacing: -.025em; word-break: keep-all; }
.platform-tour { padding: clamp(65px, 9vw, 112px) max(24px, calc((100vw - 1220px) / 2)); background: #e8eff5; }.tour-heading { display: grid; grid-template-columns: 1fr minmax(260px, .57fr); gap: clamp(28px, 8vw, 120px); align-items: end; width: min(100%, 1220px); margin: 0 auto; }.tour-heading > p { margin: 0 0 5px; color: #50657c; font-size: 16px; line-height: 1.78; word-break: keep-all; }.tour-tabs { display: flex; width: min(100%, 1220px); gap: 8px; margin: 46px auto 22px; border-bottom: 1px solid #cbd8e7; }.tour-tab { display: inline-flex; gap: 9px; align-items: center; min-height: 52px; padding: 0 15px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: #70839a; cursor: pointer; font-size: 14px; font-weight: 800; transition: color .18s ease, border-color .18s ease, background .18s ease; }.tour-tab b { font-size: 11px; }.tour-tab:hover, .tour-tab.is-active { border-color: #0f5bc1; color: #0a3978; }.tour-tab.is-active { background: rgba(255,255,255,.42); }.tour-stage { width: min(100%, 1220px); margin: 0 auto; }.tour-slide { display: grid; grid-template-columns: minmax(0, .95fr) minmax(280px, .75fr); gap: clamp(36px, 8vw, 138px); align-items: center; min-height: 460px; }.tour-slide.is-active { animation: tour-enter .38s cubic-bezier(.22,.8,.24,1) both; }.social-card { width: min(100%, 455px); justify-self: center; overflow: hidden; border: 1px solid rgba(12,41,73,.16); border-radius: 27px; box-shadow: 0 24px 48px rgba(23,57,91,.16); transform: rotate(-2.2deg); }.social-card-blue { background: linear-gradient(155deg, #1268ca, #1e9fe0 112%); color: #f8fbff; }.social-card-ink { background: linear-gradient(155deg, #07192f, #173a5e); color: #f8fbff; }.social-card-cream { background: #fff8e7; color: #0a203a; }.social-top { padding: 17px 19px; border-bottom: 1px solid rgba(255,255,255,.17); font-size: 12px; }.social-card-cream .social-top, .social-card-cream .social-footer { border-color: rgba(10,32,58,.12); }.social-avatar { display: grid; place-items: center; width: 32px; height: 32px; margin-right: -3px; border-radius: 11px; background: #f5cc81; color: #0b2949; font-weight: 950; }.social-avatar-gold { background: #e5b867; }.social-avatar-ink { background: #0b2949; color: #f5cc81; }.social-top div { display: grid; flex: 1; gap: 2px; }.social-top b { font-size: 12px; }.social-top small { opacity: .7; font-size: 10px; }.social-more { letter-spacing: 2px; }.social-body { min-height: 292px; padding: 35px 28px; }.social-label { margin: 0 0 17px; opacity: .75; font-size: 12px; font-weight: 800; }.social-body h3 { margin: 0; font-size: clamp(31px, 4vw, 43px); line-height: 1.17; letter-spacing: -.07em; word-break: keep-all; }.social-body h3 strong { color: #f9dc9e; }.social-card-cream .social-body h3 strong { color: #1268ca; }.social-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 26px; }.social-pills span, .social-quote { padding: 8px 10px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: rgba(0,23,55,.13); font-size: 11px; font-weight: 700; }.social-body-list ol { display: grid; gap: 13px; margin: 22px 0 0; padding: 0; list-style: none; }.social-body-list li { display: flex; gap: 11px; align-items: center; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.16); font-size: 16px; font-weight: 800; }.social-body-list li span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; background: #eac178; color: #0b2747; font-size: 10px; }.social-quote { display: inline-block; margin-top: 25px; border-radius: 13px; border-color: rgba(10,32,58,.12); background: #fff; color: #24486f; }.social-footer { padding: 15px 19px; border-top: 1px solid rgba(255,255,255,.17); font-size: 11px; font-weight: 750; }.tour-copy { max-width: 430px; }.tour-number { display: inline-grid; place-items: center; width: 37px; height: 37px; border-radius: 12px; background: #d7e7fb; color: #0755b2; font-size: 12px; font-weight: 900; }.tour-copy h3 { margin: 19px 0 13px; color: #0a1b31; font-size: clamp(28px, 3vw, 39px); line-height: 1.24; letter-spacing: -.065em; word-break: keep-all; }.tour-copy p { margin: 0; color: #4e627a; font-size: 16px; line-height: 1.77; word-break: keep-all; }.tour-note { display: inline-block; margin-top: 22px !important; padding: 10px 12px; border-left: 3px solid #d39d48; background: rgba(255,255,255,.58); color: #765120 !important; font-size: 13px !important; font-weight: 750; }
.landing-flow { width: min(100% - 48px, 1120px); margin: 0 auto; padding: clamp(74px, 10vw, 130px) 0; }.flow-head { max-width: 620px; }.landing-flow ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 48px 0 0; padding: 0; list-style: none; }.landing-flow li { min-height: 216px; padding: 23px; border: 1px solid #d8e1ea; border-radius: 20px; background: #fafbfc; }.landing-flow li span { color: #0f63c5; font-size: 12px; font-weight: 900; }.landing-flow li h3 { margin: 41px 0 9px; font-size: 21px; letter-spacing: -.045em; }.landing-flow li p { margin: 0; color: #596c82; font-size: 14px; line-height: 1.62; word-break: keep-all; }
.landing-final { position: relative; overflow: hidden; padding: clamp(80px, 11vw, 135px) 24px; background: #0a1d34; color: #fff; text-align: center; }.landing-final::before { position: absolute; top: -175px; left: 50%; width: 680px; height: 420px; border-radius: 50%; background: radial-gradient(ellipse, rgba(235,190,114,.21), transparent 67%); content: ''; transform: translateX(-50%); }.landing-final > * { position: relative; }.landing-final .section-kicker { color: #c5d9ee; }.landing-final h2 { color: #fbfcff; }.landing-final > p:not(.section-kicker) { max-width: 560px; margin: 22px auto 0; color: #c6d5e6; font-size: 17px; line-height: 1.7; word-break: keep-all; }.landing-final-action { width: min(100%, 330px); margin: 31px auto 0; }.landing-final small { display: block; margin-top: 17px; color: #a9bdd3; font-size: 12px; }
.reveal-up { opacity: 0; transform: translateY(18px); transition: opacity .56s ease, transform .56s cubic-bezier(.22,.8,.24,1); }.reveal-up.is-visible { opacity: 1; transform: none; }.landing-hero .reveal-up { animation: landing-enter .64s cubic-bezier(.22,.8,.24,1) both; opacity: 1; transform: none; }.hero-proof { animation-delay: .12s !important; }
@keyframes landing-enter { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } @keyframes landing-drift { from { transform: translate3d(-10px,-4px,0) scale(.96); } to { transform: translate3d(18px,14px,0) scale(1.05); } } @keyframes proof-scan { 0%, 12% { transform: translateY(0); opacity: 0; } 20%, 76% { opacity: 1; } 88%, 100% { transform: translateY(116px); opacity: 0; } } @keyframes scroll-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } @keyframes tour-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 780px) { .landing-hero { min-height: auto; padding-top: 56px; }.landing-grid, .landing-principle, .tour-heading, .tour-slide { grid-template-columns: 1fr; }.landing-grid { gap: 47px; }.landing-copy h1 { font-size: clamp(42px, 12vw, 61px); }.landing-trust-list { display: grid; gap: 9px; }.hero-proof { width: min(100%, 480px); margin: 0 auto; }.landing-scroll-cue { position: static; display: flex; justify-content: center; width: max-content; margin: 38px auto 0; transform: none; }.landing-principle, .tour-heading { gap: 21px; }.tour-heading > p { max-width: 530px; }.tour-tabs { overflow-x: auto; scrollbar-width: none; }.tour-tabs::-webkit-scrollbar { display: none; }.tour-tab { flex: 0 0 auto; }.tour-stage { margin-top: 28px; }.tour-slide { gap: 36px; min-height: 0; }.social-card { transform: none; }.tour-copy { max-width: 550px; }.landing-flow ol { grid-template-columns: 1fr; gap: 10px; margin-top: 34px; }.landing-flow li { display: grid; grid-template-columns: 42px 1fr; column-gap: 13px; min-height: 0; padding: 20px; }.landing-flow li h3 { margin: 0; align-self: end; }.landing-flow li p { grid-column: 2; margin-top: 6px; }.landing-final h2 { font-size: clamp(32px, 9vw, 50px); } }
@media (max-width: 410px) { .landing-hero, .platform-tour, .landing-final { padding-right: 18px; padding-left: 18px; }.landing-principle, .landing-flow { width: min(100% - 36px, 1120px); }.landing-copy h1 { font-size: 41px; }.landing-lead { font-size: 16px; }.landing-primary-action { min-height: 56px; }.hero-proof { padding: 18px; }.proof-question p { font-size: 22px; }.social-body { min-height: 267px; padding: 29px 23px; } }
@media (prefers-reduced-motion: reduce) { .landing-orb, .proof-scan span, .landing-scroll-cue span { animation: none !important; }.reveal-up, .landing-hero .reveal-up { opacity: 1; transform: none; transition: none; }.tour-slide.is-active { animation: none; } }
#screen-start.landing-screen { display: block; min-height: 0; padding: 0; }

/* One-screen premium intro: preserve the original Help screen underneath. */
#screen-start.landing-screen { background: #eef2f6; color: var(--ink); }
.premium-intro { position: relative; isolation: isolate; overflow: hidden; min-height: min(720px, calc(100dvh - 68px)); padding: clamp(48px, 7vw, 86px) max(24px, calc((100vw - 1220px) / 2)) 24px; background: radial-gradient(circle at 76% 31%, rgba(58,115,173,.16), transparent 27%), linear-gradient(132deg, #071625 0%, #0a1e35 61%, #102b46 100%); color: #fff; font-family: "Noto Sans KR", "Apple SD Gothic Neo", sans-serif; }
.premium-gridline { position: absolute; z-index: -2; inset: 0; background-image: linear-gradient(rgba(183,211,244,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(183,211,244,.045) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, black, transparent 88%); }
.premium-glow { position: absolute; z-index: -1; border-radius: 999px; filter: blur(2px); pointer-events: none; }.premium-glow-a { top: -230px; right: -180px; width: 560px; height: 560px; background: radial-gradient(circle, rgba(242,202,127,.42), rgba(242,202,127,.08) 52%, transparent 72%); animation: premium-ambient 13s ease-in-out infinite alternate; }.premium-glow-b { bottom: -310px; left: 26%; width: 700px; height: 430px; background: radial-gradient(ellipse, rgba(36,119,215,.37), transparent 68%); animation: premium-ambient 17s ease-in-out -4s infinite alternate-reverse; }
.premium-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .78fr); gap: clamp(42px, 8vw, 120px); align-items: center; width: min(100%, 1220px); min-height: 500px; margin: 0 auto; }.premium-copy { max-width: 650px; }.premium-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 7px 11px; border: 1px solid rgba(217,232,249,.2); border-radius: 999px; background: rgba(6,26,48,.2); color: #c4d4e4; font-size: 11px; font-weight: 700; letter-spacing: .08em; }.premium-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: #d8b978; box-shadow: 0 0 0 4px rgba(216,185,120,.11); }.premium-copy h1 { margin: 24px 0 21px; color: #f8f7f3; font-size: clamp(40px, 5vw, 64px); font-weight: 600; line-height: 1.13; letter-spacing: -.075em; word-break: keep-all; }.premium-copy h1 em { color: #d9bb7e; font-style: normal; font-weight: 500; }.premium-lead { max-width: 560px; margin: 0; color: #c3d2e1; font-size: clamp(15px, 1.35vw, 17px); line-height: 1.82; letter-spacing: -.02em; word-break: keep-all; }.premium-action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 29px; }.premium-start { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 20px; border: 1px solid rgba(255,255,255,.25); border-radius: 14px; background: #e7c47f; color: #0a1a2d; box-shadow: 0 12px 28px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.48); cursor: pointer; font-size: 15px; font-weight: 850; letter-spacing: -.035em; transition: transform .19s cubic-bezier(.2,.8,.2,1), box-shadow .19s ease, background .19s ease; }.premium-start:hover { transform: translateY(-2px); background: #f2d394; box-shadow: 0 16px 32px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.58); }.premium-start:active { transform: translateY(0) scale(.985); }.premium-secondary { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: #b8cadb; font-size: 13px; font-weight: 700; text-decoration: none; }.premium-secondary:hover { color: #fff; text-decoration: underline; text-underline-offset: 5px; }.premium-secondary span { color: #dfbd78; }.premium-safe { margin: 13px 0 0; color: #a8bfd5; font-size: 12px; font-weight: 650; }.premium-proof-list { display: flex; flex-wrap: wrap; gap: 9px 18px; margin: 22px 0 0; padding: 0; list-style: none; color: #b8cbdc; font-size: 12px; font-weight: 650; }.premium-proof-list li { display: flex; align-items: center; gap: 7px; }.premium-proof-list b { color: #d8b978; font-size: 9px; letter-spacing: .08em; }
.premium-visual { width: min(100%, 450px); justify-self: end; }.preview-caption { display: flex; align-items: center; justify-content: space-between; margin: 0 0 15px; color: #b5c9df; font-size: 11px; font-weight: 850; letter-spacing: .09em; }.preview-status { display: inline-flex; align-items: center; gap: 6px; color: #d5e2f0; letter-spacing: 0; }.preview-status i { width: 7px; height: 7px; border-radius: 50%; background: #7ae2ad; box-shadow: 0 0 0 4px rgba(122,226,173,.13); }.preview-stack { position: relative; height: 365px; }.preview-card { position: absolute; width: 100%; border: 1px solid rgba(255,255,255,.22); border-radius: 25px; box-shadow: 0 26px 65px rgba(0,0,0,.23); transition: transform .42s cubic-bezier(.22,.8,.24,1), opacity .32s ease; }.preview-card-back { top: 18px; left: -16px; padding: 23px; background: linear-gradient(140deg, rgba(66,135,208,.5), rgba(23,73,126,.29)); color: #d8e9fb; transform: rotate(-7deg); }.preview-card-mid { top: 16px; right: -13px; padding: 23px; background: linear-gradient(140deg, rgba(224,180,100,.42), rgba(115,79,30,.29)); color: #f8e5bb; transform: rotate(6deg); }.preview-card-back span, .preview-card-mid span { display: block; margin-bottom: 35px; font-size: 11px; font-weight: 800; }.preview-card-back b, .preview-card-mid b { font-size: 15px; }.preview-card-front { z-index: 2; top: 48px; padding: 20px; background: rgba(246,249,252,.97); color: #0a213c; }.preview-card-head { display: flex; align-items: center; gap: 9px; color: #446079; font-size: 11px; font-weight: 850; }.preview-card-head i { margin-left: auto; color: #6e8298; font-style: normal; letter-spacing: 2px; }.preview-mark { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 10px; background: #0b2d50; color: #f0ca7e; font-size: 15px; font-weight: 950; }.preview-label { margin: 23px 0 14px; color: #173756; font-size: 17px; font-weight: 900; letter-spacing: -.04em; }.preview-card-front ol { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }.preview-card-front li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #e3eaf2; color: #294965; font-size: 13px; font-weight: 750; }.preview-card-front li b { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 8px; background: #e6f0fb; color: #0e62c0; font-size: 10px; }.preview-card-front li span { flex: 1; }.preview-card-front li i { color: #6c8aac; font-size: 11px; font-style: normal; }.preview-card-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; padding: 12px; border-radius: 13px; background: #fff4da; color: #765421; font-size: 11px; font-weight: 750; }.preview-card-foot strong { color: #17467e; }.preview-signal { display: flex; justify-content: center; gap: 7px; margin-top: 20px; }.preview-signal span { width: 34px; height: 3px; border-radius: 99px; background: rgba(203,221,239,.35); }.preview-signal span:first-child { background: #f0ca7e; }
.preview-stack[data-active='1'] .preview-card-front { transform: translateY(-8px) rotate(1deg); }.preview-stack[data-active='1'] .preview-card-mid { transform: translate(-22px, 9px) rotate(-3deg); }.preview-stack[data-active='2'] .preview-card-front { transform: translateY(-8px) rotate(-1deg); }.preview-stack[data-active='2'] .preview-card-back { transform: translate(20px, 10px) rotate(4deg); }
.premium-tour { display: grid; grid-template-columns: 150px 1fr minmax(260px, .74fr); gap: 18px; align-items: center; width: min(100%, 1220px); margin: 43px auto 0; padding-top: 20px; border-top: 1px solid rgba(213,229,246,.16); }.premium-tour > p:first-child { margin: 0; color: #9bb5d0; font-size: 11px; font-weight: 900; letter-spacing: .1em; }.premium-tour-track { display: flex; gap: 8px; }.tour-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 39px; padding: 0 11px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: #adbed0; cursor: pointer; font-size: 12px; font-weight: 800; transition: color .18s ease, background .18s ease, border-color .18s ease; }.tour-pill b { color: #e7be72; font-size: 10px; }.tour-pill:hover, .tour-pill.is-active { border-color: rgba(224,238,252,.18); background: rgba(255,255,255,.09); color: #fff; }.premium-tour-message { margin: 0; color: #c4d4e5; font-size: 13px; line-height: 1.55; text-align: right; word-break: keep-all; }.legacy-start-stage { scroll-margin-top: 20px; }
.premium-reveal { opacity: 0; transform: translateY(16px); transition: opacity .56s ease, transform .56s cubic-bezier(.22,.8,.24,1); }.premium-reveal.is-visible { opacity: 1; transform: none; }.premium-visual.is-visible { transition-delay: .12s; }
@keyframes premium-ambient { from { transform: translate3d(-12px,-10px,0) scale(.94); } to { transform: translate3d(18px,15px,0) scale(1.05); } }
@media (max-width: 860px) { .premium-intro { min-height: auto; padding-top: 55px; }.premium-wrap { grid-template-columns: 1fr; gap: 42px; min-height: 0; }.premium-copy { max-width: 680px; }.premium-visual { justify-self: start; width: min(100%, 460px); }.premium-tour { grid-template-columns: 1fr; gap: 12px; margin-top: 38px; }.premium-tour-message { text-align: left; }.premium-copy h1 { font-size: clamp(44px, 9.6vw, 70px); } }
@media (max-width: 550px) { .premium-intro { padding-right: 20px; padding-left: 20px; }.premium-copy h1 { font-size: clamp(40px, 11.7vw, 57px); }.premium-lead { font-size: 16px; }.premium-action-row { align-items: stretch; }.premium-start { width: 100%; }.premium-secondary { justify-content: center; }.premium-proof-list { display: grid; gap: 8px; }.premium-visual { width: 100%; }.preview-stack { height: 335px; }.preview-card-front { top: 42px; }.premium-tour-track { width: 100%; overflow-x: auto; scrollbar-width: none; }.premium-tour-track::-webkit-scrollbar { display: none; }.tour-pill { flex: 0 0 auto; }.premium-tour-message { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .premium-glow { animation: none; }.premium-reveal { opacity: 1; transform: none; transition: none; }.preview-card { transition: none; } }

/* Never make the first message wait for a reveal animation. */
.premium-reveal { opacity: 1; transform: none; transition: none; }
.premium-visual .preview-card-front { animation: premium-card-breathe 5.6s ease-in-out 1s infinite; }
@keyframes premium-card-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { .premium-visual .preview-card-front { animation: none; } }

/* Editorial product preview: one quiet object, with supporting layers kept subordinate. */
.premium-intro { min-height: min(700px, calc(100dvh - 68px)); padding-top: clamp(42px, 5.7vw, 68px); padding-bottom: 30px; font-family: "SUIT", "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; }
.premium-wrap { grid-template-columns: minmax(0, 1fr) minmax(320px, 410px); gap: clamp(36px, 6.4vw, 92px); min-height: 472px; }
.premium-copy { max-width: 650px; }
.premium-copy h1 { margin-top: 20px; font-size: clamp(42px, 5.2vw, 68px); line-height: 1.09; letter-spacing: -.07em; }
.premium-lead { max-width: 580px; color: #c9d7e5; font-size: clamp(15px, 1.25vw, 17px); line-height: 1.75; }
.premium-visual { width: min(100%, 410px); align-self: center; }.preview-caption { margin-bottom: 13px; color: #a9bfd3; font-size: 10px; letter-spacing: .07em; }.preview-status { color: #c9d8e6; font-size: 10px; }.preview-stack { height: 335px; }.preview-card { border-color: rgba(255,255,255,.18); border-radius: 21px; box-shadow: 0 22px 50px rgba(0,0,0,.22); }.preview-card-back { top: 17px; left: -11px; padding: 20px; background: linear-gradient(140deg, rgba(64,126,190,.39), rgba(25,69,116,.22)); }.preview-card-mid { top: 15px; right: -9px; padding: 20px; background: linear-gradient(140deg, rgba(201,161,91,.32), rgba(105,75,36,.2)); }.preview-card-front { top: 41px; padding: 18px; background: #f4f4f1; }.preview-label { margin: 21px 0 12px; color: #203b58; font-size: 16px; }.preview-card-front li { padding: 8px 0; color: #2f4d69; font-size: 12px; }.preview-card-foot { margin-top: 14px; padding: 10px; font-size: 10px; }
.premium-tour { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; width: min(100%, 610px); margin-top: 27px; padding-top: 15px; border-top-color: rgba(213,229,246,.18); }.premium-tour > p:first-child { grid-column: 1 / -1; color: #8da7c0; font-size: 10px; letter-spacing: .08em; }.premium-tour-track { min-width: 0; }.tour-pill { min-height: 34px; padding: 0 10px; color: #afc1d2; font-size: 11px; }.premium-tour-message { align-self: center; color: #b9cadd; font-size: 11px; text-align: right; }
#screen-start.is-existing-check-target .premium-tour { display: none; }

/* The check screen is a deliberate second act, not a second competing hero. */
.legacy-start-stage { position: relative; width: 100%; max-width: none; min-height: max(628px, 100dvh); margin: 0; padding: clamp(70px, 8vw, 104px) max(24px, calc((100vw - 1220px) / 2)) clamp(78px, 9vw, 116px); background: linear-gradient(135deg, #071a30 0%, #0a2747 68%, #0e3356 100%); color: #fff; scroll-margin-top: 0; }
.legacy-start-stage::before { position: absolute; inset: 0; pointer-events: none; content: ''; background: radial-gradient(circle at 77% 28%, rgba(61,137,220,.16), transparent 30%), linear-gradient(rgba(202,223,246,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(202,223,246,.045) 1px, transparent 1px); background-size: auto, 64px 64px, 64px 64px; }
.legacy-start-stage > * { position: relative; z-index: 1; }
.legacy-start-stage .start-copy { max-width: 650px; }
.legacy-start-stage #startTitle { max-width: 660px; margin: 0 0 24px; color: #fffdf8; font-family: "SUIT", "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; font-size: clamp(40px, 5.2vw, 66px); font-weight: 760; line-height: 1.09; letter-spacing: -.07em; word-break: keep-all; text-wrap: balance; font-kerning: normal; text-rendering: optimizeLegibility; }
.legacy-start-stage #startTitle em { color: #f0ca7e; font-style: normal; font-weight: 760; }
.legacy-start-stage .lead { max-width: 580px; margin-bottom: 29px; color: #cbd9e9; font-size: clamp(15px, 1.25vw, 16px); line-height: 1.75; letter-spacing: -.02em; word-break: keep-all; }
.legacy-start-stage .eyebrow { color: #f0ca7e; }
.legacy-start-stage .trust-row { color: #c7d7e9; font-size: 12px; }
.legacy-start-stage #startWizard { min-height: 54px; padding: 0 20px; border-radius: 14px; font-size: 15px; }
.legacy-start-stage .start-panel { width: min(100%, 410px); justify-self: end; align-self: center; padding: clamp(28px, 3vw, 32px); border-color: rgba(217,228,244,.22); border-radius: 22px; background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.055)); box-shadow: 0 30px 68px rgba(0,0,0,.28); }
.legacy-start-stage .start-panel ol { gap: 15px; }
.legacy-start-stage .start-panel li { font-size: 14px; }
.legacy-start-stage .start-panel p { color: #cbd9e9; font-size: 12px; line-height: 1.7; }
@media (max-width: 960px) { .legacy-start-stage { column-gap: 48px; }.legacy-start-stage .start-panel { width: min(100%, 410px); } }
@media (max-width: 1100px) { .legacy-start-stage { grid-template-columns: minmax(0, 1fr); gap: 36px; }.legacy-start-stage .start-panel { width: min(100%, 520px); justify-self: start; } }
@media (max-width: 1100px) { .premium-intro { min-height: auto; }.premium-wrap { grid-template-columns: minmax(0, 1fr); gap: 36px; min-height: 0; }.premium-visual { justify-self: start; }.legacy-start-stage { grid-template-columns: minmax(0, 1fr); gap: 36px; }.legacy-start-stage .start-panel { width: min(100%, 520px); justify-self: start; } }
@media (max-width: 760px) { .premium-wrap { gap: 34px; min-height: 0; }.premium-tour { width: 100%; }.premium-tour-message { grid-column: 1 / -1; text-align: left; }.legacy-start-stage { min-height: calc(100dvh - 58px); padding: 58px 20px 68px; }.legacy-start-stage .start-panel { width: 100%; max-width: 520px; justify-self: start; } }
@media (max-width: 430px) { .premium-tour { grid-template-columns: 1fr; gap: 8px; }.premium-tour > p:first-child { grid-column: auto; }.premium-tour-message { grid-column: auto; }.premium-tour-track { overflow-x: auto; padding-bottom: 2px; }.legacy-start-stage #startTitle { font-size: clamp(34px, 10vw, 43px); } }

/* Final premium visual pass: shared type, spacing, and container rules for the first two landing acts. */
#screen-start.landing-screen {
  --landing-bg: #111316;
  --landing-bg-2: #1b211d;
  --landing-bg-3: #2b261d;
  --landing-ivory: #fbf7ec;
  --landing-muted: #d4d8d0;
  --landing-soft: #aeb8ae;
  --landing-brass: #d8b76e;
  --landing-brass-strong: #f1d28b;
  --landing-card: rgba(250, 247, 237, .105);
  --landing-card-line: rgba(251, 247, 236, .2);
  background: #f2efe7;
}

.premium-intro,
.legacy-start-stage {
  overflow: hidden;
  min-height: calc(100dvh - 68px);
  padding: clamp(54px, 7vw, 88px) max(24px, calc((100vw - 1160px) / 2));
  background:
    radial-gradient(circle at 80% 19%, rgba(216, 183, 110, .22), transparent 28%),
    radial-gradient(circle at 30% 86%, rgba(98, 130, 110, .2), transparent 34%),
    linear-gradient(135deg, var(--landing-bg) 0%, var(--landing-bg-2) 58%, var(--landing-bg-3) 100%);
  color: var(--landing-ivory);
  font-family: "Pretendard", "SUIT", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

.premium-gridline,
.legacy-start-stage::before {
  background-image:
    linear-gradient(rgba(251,247,236,.052) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251,247,236,.052) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, black, transparent 92%);
}

.premium-glow {
  display: none;
}

.premium-wrap,
.legacy-start-stage {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(330px, 420px);
  gap: clamp(38px, 5.4vw, 72px);
  align-items: center;
  width: min(100%, 1160px);
  margin: 0 auto;
}

.premium-wrap {
  min-height: 0;
}

.premium-copy,
.legacy-start-stage .start-copy {
  max-width: 560px;
}

.premium-eyebrow,
.legacy-start-stage .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 30px;
  margin: 0 0 18px;
  padding: 6px 12px;
  border: 1px solid rgba(216, 183, 110, .34);
  border-radius: 999px;
  background: rgba(251, 247, 236, .065);
  color: var(--landing-brass-strong);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

.premium-eyebrow i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--landing-brass);
  box-shadow: 0 0 0 5px rgba(216, 183, 110, .12);
}

.premium-copy h1,
.legacy-start-stage #startTitle {
  max-width: 560px;
  margin: 0 0 24px;
  color: var(--landing-ivory);
  font-size: clamp(44px, 4.75vw, 62px);
  font-weight: 780;
  line-height: 1.18;
  letter-spacing: 0;
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: balance;
}

.premium-copy h1 em,
.legacy-start-stage #startTitle em {
  color: var(--landing-brass-strong);
  font-style: normal;
  font-weight: 780;
}

.premium-lead,
.legacy-start-stage .lead {
  max-width: 545px;
  margin: 0 0 28px;
  color: var(--landing-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.78;
  letter-spacing: 0;
  word-break: keep-all;
}

.premium-action-row {
  gap: 14px 18px;
  margin-top: 0;
}

.premium-start,
.legacy-start-stage #startWizard {
  min-height: 56px;
  padding: 0 22px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 14px;
  background: linear-gradient(135deg, #f3d58d, #cda04f);
  color: #15130e;
  box-shadow: 0 16px 34px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.5);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0;
}

.premium-secondary {
  color: var(--landing-muted);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0;
}

.premium-safe {
  margin: 14px 0 0;
  color: var(--landing-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

.premium-proof-list,
.legacy-start-stage .trust-row {
  gap: 10px 20px;
  margin-top: 22px;
  color: var(--landing-muted);
  font-size: 12px;
  font-weight: 720;
  letter-spacing: 0;
}

.premium-proof-list b,
.legacy-start-stage .trust-row span::before {
  color: var(--landing-brass-strong);
}

.premium-tour {
  grid-template-columns: auto 1fr;
  gap: 10px 16px;
  width: min(100%, 560px);
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid rgba(251,247,236,.15);
}

.premium-tour > p:first-child {
  grid-column: 1 / -1;
  color: var(--landing-soft);
  font-size: 11px;
  letter-spacing: 0;
}

.tour-pill {
  min-height: 36px;
  border-color: transparent;
  color: var(--landing-muted);
  font-size: 11px;
  letter-spacing: 0;
}

.tour-pill b {
  color: var(--landing-brass-strong);
}

.tour-pill:hover,
.tour-pill.is-active {
  border-color: rgba(251,247,236,.18);
  background: rgba(251,247,236,.1);
}

.premium-tour-message {
  color: var(--landing-muted);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0;
}

.premium-visual,
.legacy-start-stage .start-panel {
  width: min(100%, 420px);
  justify-self: end;
}

.preview-caption {
  color: var(--landing-soft);
  font-size: 11px;
  letter-spacing: 0;
}

.preview-stack {
  height: 330px;
}

.preview-card {
  border-radius: 18px;
  border-color: rgba(251,247,236,.18);
}

.preview-card-back,
.preview-card-mid {
  color: rgba(251,247,236,.86);
}

.preview-card-back {
  background: linear-gradient(140deg, rgba(106, 122, 100, .52), rgba(50, 61, 52, .24));
}

.preview-card-mid {
  background: linear-gradient(140deg, rgba(216, 183, 110, .34), rgba(89, 69, 36, .22));
}

.preview-card-front {
  background: #f7f3e9;
  color: #1b1d18;
}

.preview-mark {
  background: #1b211d;
  color: var(--landing-brass-strong);
}

.preview-label {
  color: #22261e;
  letter-spacing: 0;
}

.preview-card-front li {
  color: #42493d;
  letter-spacing: 0;
}

.preview-card-front li b {
  background: #eee5d2;
  color: #766031;
}

.preview-card-foot {
  background: #efe3c9;
  color: #514423;
}

.preview-card-foot strong {
  color: #1f3327;
}

.preview-signal span:first-child {
  background: var(--landing-brass-strong);
}

.legacy-start-stage {
  max-width: none;
  width: 100%;
  scroll-margin-top: 0;
}

.legacy-start-stage::before {
  background:
    radial-gradient(circle at 78% 30%, rgba(216,183,110,.16), transparent 32%),
    linear-gradient(rgba(251,247,236,.052) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251,247,236,.052) 1px, transparent 1px);
  background-size: auto, 72px 72px, 72px 72px;
}

.legacy-start-stage .start-panel {
  padding: 30px;
  border-color: var(--landing-card-line);
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(251,247,236,.13), rgba(251,247,236,.055));
  box-shadow: 0 28px 62px rgba(0,0,0,.3);
}

.legacy-start-stage .panel-kicker {
  color: var(--landing-muted);
  font-size: 13px;
  letter-spacing: 0;
}

.legacy-start-stage .start-panel li {
  color: var(--landing-ivory);
  font-size: 14px;
  letter-spacing: 0;
}

.legacy-start-stage .start-panel b {
  background: rgba(216,183,110,.18);
  color: var(--landing-brass-strong);
}

.legacy-start-stage .start-panel p {
  color: var(--landing-muted);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0;
}

@media (max-width: 1050px) {
  .premium-wrap,
  .legacy-start-stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 42px;
    align-items: start;
  }

  .premium-copy,
  .legacy-start-stage .start-copy {
    max-width: 650px;
  }

  .premium-copy h1,
  .legacy-start-stage #startTitle {
    max-width: 650px;
  }

  .premium-visual,
  .legacy-start-stage .start-panel {
    justify-self: start;
    width: min(100%, 520px);
  }
}

@media (max-width: 760px) {
  .premium-intro,
  .legacy-start-stage {
    min-height: auto;
    padding: 48px 20px 64px;
  }

  .premium-copy h1,
  .legacy-start-stage #startTitle {
    font-size: clamp(38px, 10.8vw, 50px);
    line-height: 1.2;
  }

  .premium-lead,
  .legacy-start-stage .lead {
    font-size: 15px;
    line-height: 1.72;
  }

  .premium-action-row {
    align-items: stretch;
  }

  .premium-start {
    width: 100%;
  }

  .premium-tour {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .premium-tour-message {
    text-align: left;
  }

  .premium-visual,
  .legacy-start-stage .start-panel {
    width: 100%;
  }
}

/* Final flow polish: keep the question and result screens in the same premium system. */
.brand {
  min-height: 44px;
  padding: 8px 0;
}

.wizard-screen,
.result-screen {
  background:
    radial-gradient(circle at 78% 18%, rgba(216,183,110,.18), transparent 30%),
    radial-gradient(circle at 24% 86%, rgba(98,130,110,.16), transparent 35%),
    linear-gradient(135deg, #111316 0%, #1b211d 58%, #2b261d 100%);
  color: #fbf7ec;
}

.wizard-screen::before,
.result-screen::before {
  position: fixed;
  inset: 68px 0 0;
  pointer-events: none;
  content: "";
  background-image:
    linear-gradient(rgba(251,247,236,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251,247,236,.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, black, transparent 90%);
}

.wizard-shell,
.result-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 740px);
  padding-top: clamp(34px, 7vh, 72px);
  padding-bottom: calc(clamp(34px, 7vh, 72px) + env(safe-area-inset-bottom));
}

.progress-area {
  align-items: center;
}

.progress-area h2,
.result-shell h2 {
  color: #fbf7ec;
  font-weight: 780;
  letter-spacing: 0;
  text-wrap: balance;
}

.progress-meta {
  color: #d4d8d0;
}

.progress-track {
  background: rgba(251,247,236,.16);
}

.progress-track span {
  background: linear-gradient(90deg, #f1d28b, #b98b3f);
}

.question-card,
.result-list li {
  border-color: rgba(251,247,236,.18);
  background: #f7f3e9;
  box-shadow: 0 22px 54px rgba(0,0,0,.24);
}

.question-kicker,
.result-number {
  color: #766031;
}

.question-card h3,
.result-list strong {
  color: #1b1d18;
  letter-spacing: 0;
}

.question-help,
.result-lead,
.result-list p,
.phone-field > span,
.health-consent p,
.privacy-copy {
  color: #596153;
}

.number-field,
.phone-field {
  border-color: #ded3bb;
  background: #fffaf1;
  color: #596153;
}

.number-field:focus-within,
.phone-field:focus-within {
  border-color: #cda04f;
  box-shadow: 0 0 0 4px rgba(216,183,110,.16);
}

.number-field input,
.phone-field input {
  color: #1b1d18;
}

.choice-grid button {
  min-height: 56px;
  border-color: #ded3bb;
  background: #fffaf1;
  color: #25291f;
  letter-spacing: 0;
}

.choice-grid button:hover {
  border-color: #cda04f;
  background: #fbf0d5;
}

.choice-grid button.is-selected {
  border-color: #b98b3f;
  background: #efe3c9;
  color: #1f3327;
  box-shadow: inset 0 0 0 1px #b98b3f;
}

.choice-grid.has-error {
  outline: 2px solid #a64435;
  outline-offset: 4px;
  border-radius: 18px;
}

.wizard-nav .primary-action,
.result-screen .primary-action {
  background: linear-gradient(135deg, #f3d58d, #cda04f);
  color: #15130e;
  box-shadow: 0 16px 34px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.5);
}

.wizard-nav .primary-action:hover,
.result-screen .primary-action:hover {
  background: linear-gradient(135deg, #ffe0a0, #d7aa59);
}

.secondary-action {
  min-height: 56px;
  border-color: rgba(251,247,236,.22);
  background: rgba(251,247,236,.1);
  color: #fbf7ec;
}

.secondary-action:hover {
  background: rgba(251,247,236,.16);
}

.text-action {
  min-height: 44px;
  padding: 10px 8px;
  color: #d4d8d0;
}

.question-card .text-action {
  color: #596153;
}

.form-status {
  color: #f3d58d;
}

.answer-summary,
.result-note {
  border-left-color: #cda04f;
  background: #efe3c9;
  color: #514423;
}

.health-consent {
  border-color: #ded3bb;
  background: #fffaf1;
}

.consent-row b,
.privacy-copy a {
  color: #766031;
}

.consent-row input {
  accent-color: #b98b3f;
}

.result-shell {
  align-items: center;
}

.result-shell > .eyebrow,
.progress-area .eyebrow {
  border-color: rgba(216,183,110,.34);
  background: rgba(251,247,236,.065);
  color: #f1d28b;
}

.result-shell h2,
.result-lead {
  width: 100%;
  max-width: 660px;
}

.result-list,
.result-note,
.consult-cta-panel {
  max-width: 660px;
}

.choice-note {
  margin: 14px 0 0;
  color: #686255;
  font-size: 13px;
  line-height: 1.55;
}

.consult-cta-panel {
  width: 100%;
  margin-top: 8px;
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid rgba(216, 183, 110, .38);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(251, 247, 236, .12), rgba(205, 160, 79, .08));
  box-shadow: 0 22px 54px rgba(0, 0, 0, .25);
}

.consult-cta-kicker {
  margin: 0 0 11px;
  color: #f1d28b;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
}

.consult-cta-panel .consult-action {
  width: 100%;
  min-height: 66px;
  font-size: clamp(15px, 2vw, 18px);
}

.consult-cta-note {
  margin: 11px 0 0;
  color: #cfd2ca;
  font-size: 12px;
  line-height: 1.55;
}

/* A single laptop-height hero replaces the former stacked intro and entry screens. */
.landing-screen .legacy-start-stage {
  display: none !important;
}

.landing-screen .premium-intro {
  min-height: min(680px, calc(100dvh - 68px));
  padding-top: clamp(36px, 5vw, 60px);
  padding-bottom: clamp(28px, 4vw, 48px);
}

.landing-screen .premium-wrap {
  min-height: 0;
}

.result-number {
  background: #eee5d2;
}

.restart-action {
  margin-top: 10px;
  color: #d4d8d0;
}

@media (max-width: 760px) {
  .wizard-screen::before,
  .result-screen::before {
    inset-top: 58px;
  }

  .wizard-shell,
  .result-shell {
    padding: 28px 20px calc(40px + env(safe-area-inset-bottom));
  }

  .progress-area h2,
  .result-shell h2 {
    line-height: 1.14;
  }

  .result-shell h2 {
    font-size: clamp(32px, 9vw, 38px);
  }

  .result-lead {
    font-size: 14px;
    line-height: 1.72;
  }

  .progress-area {
    align-items: flex-start;
    gap: 18px;
  }

  .question-card,
  .result-list li {
    border-radius: 20px;
  }

  .result-list li {
    gap: 12px;
    padding: 16px;
  }

  .result-shell {
    align-items: flex-start;
  }

  .landing-screen .premium-intro {
    min-height: auto;
  }

  .consult-cta-panel {
    border-radius: 20px;
  }
}

@media (max-width: 380px), (max-height: 760px) {
  .result-shell {
    padding-top: 22px;
  }

  .result-shell h2 {
    margin-bottom: 10px;
    font-size: clamp(30px, 8.4vw, 34px);
    line-height: 1.1;
  }

  .result-lead {
    font-size: 13px;
    line-height: 1.58;
  }

  .result-list {
    gap: 8px;
    margin: 17px 0 12px;
  }

  .result-list li {
    gap: 10px;
    padding: 12px;
  }

  .result-number {
    width: 27px;
    height: 27px;
    border-radius: 9px;
  }

  .result-list strong {
    margin-bottom: 3px;
    font-size: 14px;
  }

  .result-list p {
    font-size: 12px;
    line-height: 1.48;
  }

  .result-note {
    margin-bottom: 12px;
    padding: 11px 12px;
    font-size: 12px;
    line-height: 1.45;
  }

  .consult-action {
    min-height: 52px;
    font-size: 14px;
  }
}