/* ───────── 토큰 ───────── */
:root {
  --bg: #F6F3EE;
  --surface: #FCFAF7;
  --ink: #24211F;
  --ink-2: #57524C;
  --ink-3: #807970;
  --line: #E2DCD3;
  --line-strong: #CFC7BC;
  --accent: #7A2433;
  --accent-hover: #651C29;
  --accent-soft: #F3E9E9;
  --accent-ink: #FFFFFF;
  --danger: #8A2A1E;
  --radius: 14px;
  --radius-sm: 10px;
  --wrap: 640px;
  --gutter: 20px;
  --bar-h: 76px;
  --serif: "Noto Serif KR", "Nanum Myeongjo", serif;
  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.35; }
p { margin: 0; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 50; background: var(--ink); color: #fff;
  padding: 8px 14px; border-radius: 8px; text-decoration: none;
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.page:focus, [tabindex="-1"]:focus { outline: none; }

/* ───────── 레이아웃 ───────── */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.page > .content { flex: 1; }
.has-bar .content { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + 24px); }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px var(--gutter); max-width: var(--wrap); margin: 0 auto; width: 100%;
}
.brand { font-family: var(--serif); font-size: 17px; text-decoration: none; letter-spacing: -0.01em; }
.topbar .link-btn { font-size: 14px; }

.eyebrow { font-size: 13px; letter-spacing: .08em; color: var(--accent); font-weight: 600; }
.serif { font-family: var(--serif); }
.muted { color: var(--ink-2); }
.small { font-size: 14px; }
.tiny { font-size: 12.5px; color: var(--ink-3); }
.stack > * + * { margin-top: var(--gap, 16px); }
.divider { height: 1px; background: var(--line); border: 0; margin: 32px 0; }

/* ───────── 버튼 ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: 16px; text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn-secondary:hover { border-color: var(--ink-2); }
.btn[disabled], .btn[aria-disabled="true"] { background: #D9D3CB; color: #7d776f; border-color: transparent; cursor: not-allowed; }
.btn-block { width: 100%; }
.link-btn {
  background: none; border: 0; padding: 6px 2px; color: var(--ink-2); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong);
}
.link-btn:hover { color: var(--ink); }

/* 하단 고정 행동 영역 — 안전 영역 고려, 본문은 .has-bar 패딩으로 가려지지 않음 */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
}
.bar-inner { max-width: calc(var(--wrap) - 2 * var(--gutter)); margin: 0 auto; display: flex; gap: 10px; }
.bar-inner .btn { flex: 1; }
.bar-inner .btn-secondary { flex: 0 0 auto; min-width: 96px; }

/* ───────── 랜딩 ───────── */
.hero { padding: 28px 0 8px; }
.hero h1 { font-family: var(--serif); font-size: clamp(30px, 8.4vw, 44px); letter-spacing: -0.02em; line-height: 1.32; }
.hero .sub { margin-top: 18px; color: var(--ink-2); font-size: 17px; }
.hero-art { margin: 28px auto 8px; width: min(280px, 78%); color: var(--accent); }
.hero-cta { margin-top: 28px; }
.hero-note { margin-top: 14px; font-size: 14px; color: var(--ink-2); text-align: center; }

.section { padding: 40px 0 0; }
.section h2 { font-family: var(--serif); font-size: 22px; letter-spacing: -0.01em; }
.domain-list { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--line); }
.domain-list li { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.domain-list strong { font-weight: 600; }
.domain-list span { color: var(--ink-2); }
.steps { list-style: none; counter-reset: s; margin: 20px 0 0; padding: 0; }
.steps li { counter-increment: s; position: relative; padding: 0 0 18px 40px; color: var(--ink-2); }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--accent); color: var(--accent); font-size: 13px; display: grid; place-items: center; font-weight: 600;
}
.steps strong { color: var(--ink); display: block; font-weight: 600; }

.callout { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.callout-accent { border-left: 3px solid var(--accent); }

/* ───────── 설문 ───────── */
.progress { height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; }
/* 진행도는 하단 버튼 영역 위에 표시 */
.has-progress { --bar-h: 104px; }
.bar-progress { max-width: calc(var(--wrap) - 2 * var(--gutter)); margin: 0 auto 10px; display: flex; align-items: center; gap: 12px; }
.bar-progress .progress { flex: 1; }
.bar-count { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-count b { color: var(--ink); font-weight: 600; }
.progress > i { display: block; height: 100%; background: var(--accent); transition: width .3s var(--ease); }

.q { padding-top: 28px; }
.q fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.q legend { padding: 0; width: 100%; }
.q-title { font-family: var(--serif); font-size: clamp(21px, 5.6vw, 26px); letter-spacing: -0.015em; margin-top: 8px; line-height: 1.45; display: block; }
.q-num { color: var(--accent); margin-right: 2px; font-variant-numeric: tabular-nums; }
.q-title:focus { outline: none; }
.q-hint { margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.q-hint b { color: var(--accent); font-weight: 600; }

.options { margin-top: 24px; display: grid; gap: 10px; }
.opt { position: relative; display: block; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt-box {
  display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start;
  padding: 15px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s;
  min-height: 56px;
}
.opt-box:hover { border-color: var(--ink-3); }
.opt-mark {
  width: 22px; height: 22px; margin-top: 2px; border: 1.5px solid var(--ink-3); border-radius: 50%;
  display: grid; place-items: center; background: #fff;
}
.opt.multi .opt-mark { border-radius: 6px; }
.opt-mark svg { width: 14px; height: 14px; opacity: 0; color: #fff; }
.opt input:checked + .opt-box { border: 2px solid var(--accent); padding: 14px 15px; background: var(--accent-soft); }
.opt input:checked + .opt-box .opt-mark { background: var(--accent); border-color: var(--accent); }
.opt input:checked + .opt-box .opt-mark svg { opacity: 1; }
.opt input:focus-visible + .opt-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.opt input:disabled + .opt-box { opacity: .5; cursor: not-allowed; }
.opt-text { font-size: 16px; line-height: 1.55; }
.opt-key { font-size: 12px; color: var(--ink-3); margin-right: 6px; font-variant-numeric: tabular-nums; }

.q-enter { animation: qIn .22s var(--ease) both; }
@keyframes qIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }


/* ───────── 분석 중 ───────── */
.center-state { text-align: center; padding: 72px 0; }
.center-state h1 { font-family: var(--serif); font-size: 22px; margin-top: 24px; }
.center-state p { margin-top: 10px; color: var(--ink-2); }
.pulse { width: 96px; margin: 0 auto; color: var(--accent); }
.pulse circle { transform-origin: center; animation: breathe 2.4s ease-in-out infinite; }
.pulse circle:nth-child(2) { animation-delay: .6s; }
@keyframes breathe { 0%, 100% { opacity: .35; transform: scale(.94); } 50% { opacity: 1; transform: scale(1); } }

/* ───────── 결과 ───────── */
.result-head { padding: 24px 0 8px; }
.result-head .eyebrow { display: block; }
.type-name { font-family: var(--serif); font-size: clamp(27px, 7.6vw, 38px); letter-spacing: -0.02em; line-height: 1.35; margin-top: 12px; }
.perception { margin-top: 20px; padding: 18px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.perception small { display: block; font-size: 13px; color: var(--ink-2); }
.perception p { font-family: var(--serif); font-size: 19px; line-height: 1.6; margin-top: 6px; }

.cards { display: grid; gap: 12px; margin-top: 20px; }
@media (min-width: 560px) { .cards { grid-template-columns: 1fr 1fr; } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.card-label { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--ink-2); }
.card-label strong { color: var(--accent); font-weight: 600; }
.card h3 { font-family: var(--serif); font-size: 19px; margin-top: 10px; }
.card p { margin-top: 8px; color: var(--ink-2); font-size: 15px; }
.card.limited h3 { color: var(--ink-2); }
.tag-src { font-size: 12px; border: 1px solid var(--line-strong); padding: 0 8px; border-radius: 999px; white-space: nowrap; }

.evidence { margin: 12px 0 0; padding: 0; list-style: none; }
.evidence li { font-size: 13px; color: var(--ink-3); padding-left: 12px; position: relative; margin-top: 4px; line-height: 1.55; }
.evidence li::before { content: ""; position: absolute; left: 0; top: .7em; width: 5px; height: 1px; background: var(--ink-3); }
details.ev summary { font-size: 13px; color: var(--ink-2); cursor: pointer; margin-top: 12px; }

.charm { margin-top: 28px; }
.charm .card { border-color: var(--accent); }
.summary-text { margin-top: 12px; color: var(--ink); }
.notes { margin-top: 20px; }
.notes p { font-size: 13.5px; color: var(--ink-2); margin-top: 8px; padding-left: 14px; border-left: 2px solid var(--line-strong); }

.upsell { margin-top: 36px; padding: 24px 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.upsell h2 { font-family: var(--serif); font-size: 20px; }
.upsell ul { margin: 14px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 15px; }
.upsell li { margin-top: 4px; }
.price-line { margin-top: 16px; font-size: 15px; }
.price-line b { font-size: 19px; }
.badge { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--accent); color: var(--accent); font-weight: 600; vertical-align: 2px; }
.badge-warn { border-color: var(--danger); color: var(--danger); }

.actions { display: grid; gap: 10px; margin-top: 24px; }

/* 상세 결과 */
.detail-section { padding-top: 36px; }
.detail-section > h2 { font-family: var(--serif); font-size: 20px; display: flex; gap: 10px; align-items: baseline; }
.detail-section > h2 .num { font-size: 14px; color: var(--accent); font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums; }
.detail-section p + p { margin-top: 12px; }
.detail-section > p, .detail-section .body { margin-top: 14px; }
.item-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.item-list li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; }
.item-list b { display: block; font-size: 14px; color: var(--accent); font-weight: 600; }
.item-list span { display: block; margin-top: 4px; }
.domain-block { border-top: 1px solid var(--line); padding: 18px 0 4px; margin-top: 14px; }
.domain-block h3 { font-size: 16px; font-weight: 600; }
.domain-block h3 small { font-weight: 500; color: var(--accent); margin-right: 8px; font-size: 13px; }
.domain-block p { margin-top: 8px; color: var(--ink-2); }

/* ───────── 결제 ───────── */
.mock-banner { background: #FFF5D9; border: 1px dashed #A8892A; color: #5C4A0E; padding: 12px 16px; border-radius: var(--radius-sm); font-size: 14px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin-top: 16px; font-size: 15px; }
.kv dt { color: var(--ink-2); }
.kv dd { margin: 0; text-align: right; }
.code-box {
  margin-top: 16px; padding: 18px; text-align: center; border: 2px dashed var(--accent); border-radius: var(--radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 20px; letter-spacing: .06em; background: var(--surface);
}
.check { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 15px; cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--accent); flex: 0 0 auto; }
.field { display: block; margin-top: 16px; }
.field span { display: block; font-size: 14px; color: var(--ink-2); margin-bottom: 6px; }
.field input {
  width: 100%; min-height: 52px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: #fff; font-size: 17px;
}
.field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.field small { font-size: 13px; margin-left: 4px; }

/* ───────── 계정 ───────── */
.auth-box { margin-top: 24px; }
.btn-google { background: #fff; border-color: var(--line-strong); color: var(--ink); }
.btn-google:hover { border-color: var(--ink-2); }
.btn-google svg { flex: 0 0 auto; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0 4px; color: var(--ink-3); font-size: 13px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 20px; font-size: 14px; }
.auth-links a { color: var(--ink-2); text-underline-offset: 3px; }
.account { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.error-text { color: var(--danger); font-size: 14px; margin-top: 10px; }

/* ───────── 법적 고지 / 푸터 ───────── */
.legal h1 { font-family: var(--serif); font-size: 24px; padding-top: 16px; }
.legal h2 { font-size: 17px; margin-top: 28px; }
.legal p, .legal li { color: var(--ink-2); font-size: 15px; margin-top: 8px; }
.legal ul { padding-left: 18px; }
.todo { background: #FFF5D9; color: #5C4A0E; padding: 0 6px; border-radius: 4px; font-size: .92em; }
.footer { margin-top: 56px; border-top: 1px solid var(--line); padding: 24px 0 calc(32px + env(safe-area-inset-bottom)); font-size: 13px; color: var(--ink-3); }
.footer nav { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 12px; }
.footer a { color: var(--ink-2); text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.has-bar .footer { display: none; }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + 16px); transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 14px; z-index: 40;
  max-width: calc(100% - 32px);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}


/* 가볍고 선명한 서비스 디자인 */
:root {
  --bg: #FFFFFF; --surface: #FAFAF8; --ink: #242522; --ink-2: #656760; --ink-3: #7B7E75;
  --line: #E9EAE5; --line-strong: #D6D8D0;
  --accent: #B94B30; --accent-hover: #A84026; --accent-soft: #FCF0E9;
  --serif: var(--sans); --radius: 16px; --radius-sm: 12px;
}
body { letter-spacing: -.02em; }
h1, h2, h3 { font-weight: 650; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-size: 21px; font-weight: 750; letter-spacing: -.055em; }
.brand::before { content: '✳'; color: #E87750; font-size: 25px; line-height: 1; }
.btn { font-weight: 600; min-height: 54px; border-radius: 12px; }
.btn-primary { background: var(--ink); box-shadow: none; }
.btn-primary:hover { background: #41443B; }
.btn-primary:active { background: #171914; }
.btn[disabled], .btn[aria-disabled="true"] { box-shadow: none; transform: none; }
.eyebrow { letter-spacing: 0; font-size: 13px; font-weight: 750; }
.nav-account { border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px; text-decoration: none; font-size: 13px; font-weight: 650; background: white; }
.page-landing .topbar { max-width: 1120px; padding: 22px 32px; }
.casual-wrap { max-width: 1120px; padding: 0 32px; margin: auto; }
.landing-hero { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 60px; padding: 64px 0 76px; background: transparent; border-radius: 0; overflow: hidden; }
.hero-tag { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 12px; font-weight: 500; }
.hero-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #E87750; }
.landing-copy h1 { font-size: clamp(36px, 4.2vw, 54px); font-weight: 650; letter-spacing: -.065em; line-height: 1.35; margin-top: 21px; }
.landing-copy h1 em { color: var(--ink); font-style: normal; }
.landing-sub { color: var(--ink-2); font-size: 15px; line-height: 1.9; margin-top: 22px; }
.landing-action { margin-top: 28px; }
.landing-action .btn { width: 100%; max-width: 310px; gap: 35px; justify-content: space-between; }
.landing-action > p { font-size: 12px; color: var(--ink-2); margin: 13px 0 0; }
.portrait { width: 220px; max-width: 100%; margin: auto; }
.discovery { padding: 50px 0 64px; border-top: 1px solid var(--line); }
.section-heading { text-align: left; }
.section-tag { font-size: 13px; color: var(--accent); font-weight: 700; }
.section-heading h2, .preview-copy h2 { font-size: 29px; letter-spacing: -.045em; line-height: 1.5; margin-top: 9px; font-weight: 650; }
.perspective-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 28px; }
.perspective { border-radius: 14px; padding: 25px 20px; background: #F7F8F4; border: 1px solid var(--line); }
.perspective-1, .perspective-2, .perspective-3 { background: #F7F8F4; }
.perspective-icon { width: 43px; height: 43px; display: grid; place-items: center; font-size: 30px; font-weight: 500; color: var(--ink); margin-bottom: 18px; }
.perspective h3 { font-size: 18px; font-weight: 650; }
.perspective p { margin-top: 7px; font-size: 13px; color: var(--ink-2); }
.preview-section { display: grid; grid-template-columns: .85fr 1fr; align-items: center; gap: 9%; padding: 48px; background: #F7F8F4; border-radius: 20px; }
.preview-paper { position: relative; text-align: center; background: #FFFFFF; border: 1px solid var(--line); border-radius: 16px; padding: 24px; box-shadow: 0 12px 32px #24252207; }
.preview-label { font-size: 10px; color: var(--ink-2); }
.preview-paper .portrait { width: 160px; margin: 12px auto 0; }
.preview-type { font-size: 26px; font-weight: 700; line-height: 1.4; }
.preview-quote { font-size: 13px; line-height: 1.8; color: var(--ink-2); margin-top: 15px; }
.preview-copy > p:not(.section-tag) { font-size: 14px; color: var(--ink-2); margin-top: 17px; }
.casual-benefits { padding: 0; margin: 22px 0; list-style: none; display: grid; gap: 17px; }
.casual-benefits li { display: flex; gap: 12px; }
.casual-benefits li > span { display: grid; place-items: center; border-radius: 12px; background: #EEEEE8; color: var(--accent); width: 32px; height: 32px; flex: 0 0 32px; font-size: 11px; font-weight: 650; }
.casual-benefits h3 { font-size: 15px; }
.casual-benefits p { font-size: 12px; color: var(--ink-2); margin-top: 3px; }
.preview-copy .optional-note { font-size: 11px !important; }
.landing-closing { text-align: center; padding: 55px 20px 35px; }
.closing-spark { color: #FFAE8F; font-size: 45px; line-height: 1.2; }
.landing-closing h2 { font-size: 29px; margin-top: 14px; letter-spacing: -.045em; }
.landing-closing > p { color: var(--ink-2); font-size: 14px; margin-top: 10px; }
.landing-closing .btn { margin-top: 24px; gap: 40px; min-width: 260px; }
.landing-closing .closing-note { font-size: 11px; margin-top: 15px; }
.casual-disclaimer { font-size: 11px; line-height: 1.8; text-align: center; color: var(--ink-3); padding: 10px 0 0; }
.page-landing .footer .wrap { max-width: 1120px; padding: 0 32px; }
/* 결과도 편하게, 친구에게 보여주고 싶게 */
.page-report .topbar, .page-report .wrap { max-width: 820px; }
.report-intro { padding: 24px 0; }
.report-intro > p:last-child { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.result-cover { padding: 24px 34px; border-radius: 28px; background: #F5F5EF; border: 1px solid var(--line); text-align: center; }
.cover-top { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; font-weight: 650; color: var(--ink-2); }
.result-cover .portrait { width: 230px; margin: 16px auto 0; }
.cover-caption { font-size: 13px; color: var(--ink-2); margin: 0 0 10px; }
.result-cover .type-name { font-weight: 700; font-size: clamp(26px, 4vw, 36px); line-height: 1.45; letter-spacing: -.045em; margin: 0 auto; max-width: 540px; }
.cover-perception { max-width: 450px; margin: 17px auto 24px; font-size: 15px; color: var(--ink-2); line-height: 1.8; }
.cover-bottom { display: flex; justify-content: space-between; gap: 8px; padding-top: 18px; border-top: 1px solid var(--line-strong); font-size: 10px; color: var(--ink-2); }
.cover-bottom span:first-child { font-weight: 650; font-size: 13px; color: var(--accent); }
.cover-share { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0 18px; font-size: 12px; color: var(--ink-2); }
.report-section-title { margin-top: 20px; }
.report-section-title > span { font-size: 12px; color: var(--accent); font-weight: 700; }
.report-section-title h2 { font-size: 24px; margin-top: 6px; letter-spacing: -.04em; }
.report-section-title > p { font-size: 14px; color: var(--ink-2); margin-top: 7px; }
.page-report .cards { gap: 14px; }
.page-report .cards .card { border: 0; background: #F7F8F4; padding: 22px; }
.page-report .cards .card:nth-child(2) { background: #F7F8F4; }
.page-report .cards .card:nth-child(3) { background: #F7F8F4; }
.page-report .cards .card:nth-child(4) { background: #F7F8F4; }
.page-report .cards .card h3 { font-size: 21px; font-weight: 650; }
.page-report .cards .card p { font-size: 14px; line-height: 1.85; }
.page-report .charm { margin-top: 35px; }
.page-report .charm .card { background: #F9F0E8; border: 0; padding: 24px; }
.page-report .charm .card h3 { font-weight: 650; font-size: 23px; margin-top: 0; }
.page-report .summary-text { background: white; padding: 24px; border: 1px solid var(--line); border-radius: 22px; line-height: 1.95; }
.page-report .upsell { background: #F5F5EF; border: 0; padding: 28px; }
.page-report .upsell h2 { font-size: 25px; font-weight: 650; }
.page-report .upsell ul { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 23px; font-size: 13px; }
.page-detail .topbar, .page-detail .wrap { max-width: 780px; }
.detail-heading { padding: 28px 0; }
.detail-heading .type-name { font-size: 32px; font-weight: 700; }
.perception { border-top: 0; border-bottom: 0; border-radius: 20px; background: #F5F5EF; padding: 20px; }
.perception p { font-size: 17px; font-weight: 650; }
.report-contents { padding: 24px; border-radius: 22px; background: #F7F8F4; margin: 18px 0 6px; }
.report-contents > p { font-size: 17px; font-weight: 650; }
.report-contents > p span { display: block; font-size: 12px; color: var(--ink-2); font-weight: 400; margin-top: 5px; }
.report-contents ol { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.report-contents a { display: flex; gap: 10px; font-size: 13px; text-decoration: none; }
.report-contents a:hover { text-decoration: underline; color: var(--accent); }
.report-contents a span { color: var(--accent); font-weight: 750; }
.page-detail .detail-section { margin-top: 24px; padding-top: 25px; scroll-margin-top: 25px; }
.page-detail .detail-section > h2 { font-size: 23px; font-weight: 650; }
.page-detail .detail-section > h2 .num { display: inline-grid; place-items: center; background: #F0F1EB; padding: 4px 9px; border-radius: 9px; }
.page-detail .detail-section .body { line-height: 1.95; }
.page-detail .item-list li { background: #F7F8F4; border: 0; padding: 18px 20px; }
.auth .hero h1 { font-weight: 650; }
.auth .hero .sub { font-size: 15px; }
.save-result { text-align: center; padding-top: 65px; }
.save-result h1 { font-size: 31px; font-weight: 700; line-height: 1.55; margin: 20px 0; }
.save-result .actions { max-width: 380px; margin: 28px auto 20px; }
@media (min-width: 900px) { .auth { max-width: 520px; } }
@media (max-width: 700px) {
  .page-landing .topbar { padding: 18px 20px; }
  .casual-wrap { padding: 0 16px; }
  .landing-hero { grid-template-columns: 1fr; gap: 28px; padding: 28px 4px 40px; border-radius: 0; }
  .hero-tag { font-size: 10px; }
  .landing-copy h1 { font-size: clamp(32px, 9vw, 44px); margin-top: 18px; }
  .landing-sub { font-size: 13px; margin-top: 16px; }
  .landing-action { margin-top: 22px; }
  .landing-action .btn { max-width: none; }
  .landing-action > p { font-size: 10px; text-align: center; margin-top: 13px; }
  .discovery { padding: 38px 4px; }
  .section-tag { font-size: 11px; }
  .section-heading h2, .preview-copy h2 { font-size: 24px; }
  .perspective-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 21px; }
  .perspective { padding: 18px 16px; border-radius: 12px; }
  .perspective-icon { font-size: 27px; margin-bottom: 10px; }
  .perspective h3 { font-size: 17px; }
  .perspective p { font-size: 12px; margin-top: 6px; }
  .preview-section { grid-template-columns: 1fr; gap: 33px; padding: 30px 22px; border-radius: 16px; }
  .preview-paper { width: 90%; max-width: 290px; margin: auto; padding: 20px; }
  .preview-paper .portrait { width: 140px; }
  .preview-type { font-size: 24px; }
  .preview-quote { font-size: 12px; }
  .preview-copy > p:not(.section-tag) { font-size: 13px; }
  .landing-closing { padding: 36px 8px 25px; }
  .landing-closing h2 { font-size: 23px; }
  .landing-closing > p { font-size: 12px; }
  .casual-disclaimer { font-size: 10px; padding: 8px 4px 0; }
  .page-landing .footer .wrap { padding: 0 20px; }
  .result-cover { padding: 21px; }
  .result-cover .portrait { width: 205px; margin-top: 12px; }
  .cover-top { font-size: 10px; }
  .cover-perception { font-size: 14px; }
  .cover-share { font-size: 11px; flex-wrap: wrap; }
  .report-section-title h2 { font-size: 22px; }
  .page-report .upsell { padding: 24px 20px; }
  .page-report .upsell ul { grid-template-columns: 1fr; }
  .report-contents ol { grid-template-columns: 1fr; }
  .detail-heading .type-name { font-size: 28px; }
  .page-detail .detail-section > h2 { font-size: 21px; }
  .save-result { padding-top: 40px; }
  .save-result h1 { font-size: 28px; }
}

/* 심볼과 여백으로 표현하는 매력 */
.portrait { color: #E99570; }
.symbol-1 { color: #A8B4A1; }.symbol-2 { color: #B2A5C8; }.symbol-3 { color: #92ABA9; }
.symbol-cut { fill: #F5F5EF; }
.preview-paper .symbol-cut { fill: #FFFFFF; }
.charm-visual { position: relative; height: 380px; border-radius: 18px; background: #F2F3ED; padding: 22px; overflow: hidden; }
.visual-caption, .visual-baseline { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 9px; letter-spacing: .08em; color: #676F60; }
.visual-caption span:last-child { font-size: 18px; }
.visual-composition { position: absolute; inset: 60px 30px 62px; }
.shape-back { position: absolute; width: 175px; height: 220px; left: 6%; top: 0; background: #B8C2AD; border-radius: 90px 90px 15px 15px; transform: rotate(-22deg); }
.shape-front { position: absolute; width: 188px; height: 188px; right: 1%; bottom: 0; border: 48px solid #EE966B; border-radius: 50% 50% 12% 50%; transform: rotate(14deg); }
.visual-spark { position: absolute; top: 1px; right: 10px; font-size: 50px; color: #FDFDF9; }
.trait-chip { position: absolute; display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border: 1px solid #FFFFFFC0; border-radius: 9px; background: #FFFFFFE8; color: var(--ink); font-size: 12px; box-shadow: 0 5px 16px #24252206; }
.trait-chip > span { width: 6px; height: 6px; border-radius: 50%; background: #87947B; }
.chip-first { left: 18px; top: 124px; }
.chip-second { bottom: 83px; right: 14px; }.chip-second > span { background: #DA805A; }
.visual-baseline { position: absolute; bottom: 20px; left: 22px; right: 22px; letter-spacing: 0; font-size: 10px; }
.result-cover { border-radius: 18px; }
.page-report .cards .card { border: 1px solid var(--line); border-radius: 14px; }
.page-report .card-label strong { color: var(--ink-2); }
.page-report .upsell { border: 1px solid var(--line); }
.auth { max-width: 460px; }
.auth .hero { padding-top: 54px; }
.auth .hero h1 { letter-spacing: -.045em; font-weight: 650; }
.auth .eyebrow { color: var(--ink-2); font-weight: 500; font-size: 12px; }
.auth .hero .sub { font-size: 14px; line-height: 1.8; }
.auth .field span { font-size: 13px; font-weight: 550; color: var(--ink); }
.auth .field input { background: #FAFBF8; border-color: #E3E6DD; border-radius: 10px; font-size: 15px; }
.auth .actions { margin-top: 28px; }
.auth .auth-links { font-size: 12px; }
.auth-box { margin-top: 28px; }
.opt-box { border-color: #E0E3D9; background: #FFFFFF; }
.opt input:checked + .opt-box { background: #F5F6F0; border-color: var(--ink); }
.opt input:checked + .opt-box .opt-mark { background: var(--ink); border-color: var(--ink); }
@media (max-width: 700px) {
  .casual-wrap { padding: 0 20px; }
  .landing-copy h1 { font-weight: 650; font-size: clamp(34px, 9vw, 44px); }
  .hero-tag { font-size: 11px; }
  .landing-sub { font-size: 14px; }
  .landing-action > p { font-size: 11px; }
  .charm-visual { height: 280px; padding: 19px; }
  .visual-composition { inset: 51px 43px 47px; }
  .shape-back { width: 130px; height: 160px; left: 2%; }
  .shape-front { width: 140px; height: 140px; border-width: 36px; }
  .visual-spark { font-size: 36px; top: -10px; }
  .chip-first { top: 90px; left: 15px; }.chip-second { bottom: 60px; right: 14px; }
  .trait-chip { font-size: 10px; padding: 7px 10px; }
  .visual-baseline { font-size: 9px; bottom: 18px; left: 19px; right: 19px; }
  .discovery { padding: 35px 0 40px; }
  .preview-paper { width: 100%; }
  .result-cover .type-name { font-weight: 650; }
  .auth .hero { padding-top: 35px; }
}

/* Monochrome glass — 모바일을 기준으로 한 공통 테마 */
:root {
  color-scheme: dark;
  --bg: #101112; --surface: #202123;
  --ink: #F5F5F5; --ink-2: #B8BBBF; --ink-3: #969BA1;
  --line: rgba(255,255,255,.12); --line-strong: rgba(255,255,255,.24);
  --accent: #F2F2F2; --accent-hover: #DADDE0; --accent-ink: #141516;
  --accent-soft: rgba(255,255,255,.09); --danger: #E3E3E3;
  --glass: rgba(255,255,255,.055); --glass-border: rgba(255,255,255,.14);
  --radius: 22px; --radius-sm: 15px;
}
html { background: #101112; }
body {
  background: radial-gradient(ellipse 75% 470px at 90% 0%, #FFFFFF0B, transparent 80%),
    radial-gradient(ellipse 70% 600px at 0% 30%, #FFFFFF05, transparent 80%), #101112;
  min-width: 280px;
}
body::before { content: ''; position: fixed; z-index: -1; pointer-events: none; width: 320px; height: 320px; left: -150px; top: 210px; border: 1px solid #FFFFFF0B; border-radius: 50%; }
.brand { font-size: 20px; color: #F6F6F6; font-weight: 650; }
.brand::before { color: #D9DDE0; }
.btn { min-height: 54px; border-radius: 14px; transition: background .18s, border-color .18s, box-shadow .18s; }
.btn-primary { background: #F2F2F2; color: #141516; border-color: #FFFFFF; box-shadow: 0 1px 0 #FFFFFF66 inset, 0 4px 18px #00000016; }
.btn-primary:hover { background: #DADDE0; color: #141516; }
.btn-primary:active { background: #C9CDD1; }
.btn-secondary, .btn-google { background: rgba(255,255,255,.045); color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover, .btn-google:hover { background: rgba(255,255,255,.09); border-color: #FFFFFF55; }
.btn[disabled], .btn[aria-disabled="true"] { background: #303235; color: #A0A4AA; border-color: #3D4044; }
.nav-account { background: #FFFFFF08; border-color: var(--line); color: var(--ink); }
.topbar { padding-top: 24px; padding-bottom: 24px; }
.eyebrow, .section-tag { color: #BCC1C6; }
:is(.auth-box, .charm-visual, .perspective, .preview-section, .preview-paper, .result-cover, .page-report .cards .card, .page-report .charm .card, .page-report .summary-text, .page-report .upsell, .report-contents, .callout, .item-list li) {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 #FFFFFF09, 0 12px 32px #0000000D;
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}
/* 로그인: 설명과 입력을 한눈에, 터치 영역은 넉넉하게 */
.auth { max-width: 460px; }
.auth .hero { padding-top: 26px; }
.auth .hero::before { content: '↗'; display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 25px; color: #E7E9EB; border-radius: 15px; border: 1px solid #FFFFFF26; background: linear-gradient(140deg,#FFFFFF1C,#FFFFFF04); box-shadow: inset 0 1px 0 #FFFFFF18; font-size: 23px; }
.auth .hero h1 { color: #FAFAFA; font-size: 30px; }
.auth .eyebrow { color: #9CA1A8; }
.auth .hero .sub { color: #B8BBBF; font-size: 14px; }
.auth-box { padding: 23px; border-radius: 23px; margin-top: 28px; }
.auth-box form > .field:first-child { margin-top: 0; }
.auth .field span { color: #D6D9DC; font-weight: 500; }
.field input, .auth .field input { background: #FFFFFF06; border: 1px solid #FFFFFF24; border-radius: 12px; color: #F5F5F5; min-height: 54px; font-size: 16px; }
.field input:focus-visible, .auth .field input:focus-visible { outline: 2px solid #D8DCE0; outline-offset: 2px; border-color: transparent; background: #FFFFFF0A; }
.field input:-webkit-autofill { -webkit-text-fill-color: #F5F5F5; -webkit-box-shadow: 0 0 0 1000px #292B2E inset; caret-color: #FFFFFF; }
.auth .actions { margin-top: 25px; }
.auth-links { gap: 12px; }
.auth .auth-links a { color: #C6CBD0; }
.auth-divider { color: #AEB3BA; margin-top: 20px; }
.auth-divider + form { margin-top: 22px; }
.check input { accent-color: #DDE1E5; }
/* 랜딩의 유리 조형과 반투명 정보 패널 */
.hero-tag { color: #ADB3B9; }
.hero-tag::before { background: #D4D9DD; }
.landing-copy h1, .landing-copy h1 em { color: #F7F7F7; }
.landing-copy h1 { font-weight: 600; }
.landing-sub { color: #B5BAC0; }
.charm-visual { background: radial-gradient(ellipse at 70% 25%,#FFFFFF0C,transparent 65%),#FFFFFF04; border-radius: 24px; }
.visual-caption, .visual-baseline { color: #A9AFB6; }
.shape-back { background: linear-gradient(135deg,#FFFFFF5C,#FFFFFF12 60%,#FFFFFF22); border: 1px solid #FFFFFF55; box-shadow: inset 0 1px 18px #FFFFFF1A, 12px 20px 28px #00000022; }
.shape-front { border-color: #D8DDE3A6; background: transparent; box-shadow: inset -4px 1px 13px #00000066, 6px 14px 20px #00000026; }
.visual-spark { color: #FFFFFFA6; }
.trait-chip { background: #24272BAA; color: #E7E9EC; border: 1px solid #FFFFFF35; box-shadow: inset 0 1px 0 #FFFFFF0A, 0 8px 20px #00000020; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: 11px; }
.trait-chip > span, .chip-second > span { background: #D8DFE5; }
.perspective { border-radius: 18px; }
.perspective-icon { color: #E2E5E8; }
.preview-section { border-radius: 25px; }
.preview-paper { border-radius: 20px; }
.casual-benefits li > span { background: #FFFFFF0B; color: #C8CDD3; border: 1px solid #FFFFFF12; }
.portrait, .symbol-1, .symbol-2, .symbol-3 { color: #C9D0D6; filter: drop-shadow(0 8px 12px #00000012); }
.symbol-cut, .preview-paper .symbol-cut { fill: #202123; }
.landing-closing { padding-top: 60px; }
/* 설문: 선택 상태를 색 대신 밝기와 테두리로 구분 */
.opt-box { background: #FFFFFF04; border: 1px solid #FFFFFF22; box-shadow: inset 0 1px 0 #FFFFFF04; border-radius: 16px; }
.opt-box:hover { border-color: #FFFFFF55; background: #FFFFFF08; }
.opt-mark { border-color: #8F959C; background: transparent; }
.opt input:checked + .opt-box { border-color: #D9DDE1; background: #FFFFFF0D; }
.opt input:checked + .opt-box .opt-mark { background: #EEEEEE; border-color: #EEEEEE; }
.opt input:checked + .opt-box .opt-mark svg { color: #101112; }
.opt input:disabled + .opt-box { opacity: .6; }
.progress { background: #FFFFFF18; }.progress > i { background: #E3E6EA; }
.bar { background: #17191DEB; border-top-color: #FFFFFF20; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
.bar-inner { gap: 12px; }
.q-num { color: #E0E3E7; }
.q-hint b { color: #E0E3E7; }
.q-title { font-weight: 600; }
/* 결과와 상세 리포트 */
.result-cover { background: radial-gradient(ellipse at 70% 5%,#FFFFFF10,transparent 70%),#FFFFFF05; border-radius: 25px; }
.cover-top, .cover-caption, .cover-bottom { color: #AEB5BD; }
.cover-bottom { border-top-color: #FFFFFF1C; }
.cover-bottom span:first-child { color: #E3E6E9; }
.cover-perception { color: #BEC3CA; }
.page-report .card-label strong { color: #CAD0D7; }
.page-report .cards .card, .page-report .charm .card, .page-report .summary-text, .page-report .upsell { border-radius: 20px; }
.page-report .cards .card:nth-child(n), .page-report .charm .card { background: #FFFFFF05; }
.page-report .upsell { background: #FFFFFF08; }
.report-section-title > span { color: #ABB2BA; }
.tag-src { border-color: #FFFFFF24; color: #BBC1C7; }
.perception { background: #FFFFFF07; border: 1px solid var(--line); border-radius: 18px; }
.report-contents { border-radius: 20px; }
.report-contents a span { color: #C7CDD3; }
.page-detail .detail-section > h2 .num { background: #FFFFFF0B; color: #D8DDE1; }
.page-detail .item-list li { background: #FFFFFF06; border: 1px solid #FFFFFF12; }
.domain-block { border-color: var(--line); }
.mock-banner, .todo { background: #FFFFFF0D; color: #D4D9DE; border-color: #FFFFFF35; }
.badge-warn { border-color: #AEB4BB; color: #D0D5DA; }
.footer { background: #0000000D; border-top-color: #FFFFFF10; }
.footer p { font-size: 11px; line-height: 1.9; }.footer nav { font-size: 12px; }
.toast { background: #F1F1F1; color: #151617; }
.skip-link { background: #F5F5F5; color: #101112; }
@media (max-width: 700px) {
  .topbar, .page-landing .topbar { padding: 20px; }
  .landing-hero { padding-top: 22px; }
  .landing-copy h1 { font-size: clamp(33px,9vw,42px); }
  .auth .hero { padding-top: 20px; }
  .auth .hero::before { margin-bottom: 22px; }
  .auth .hero h1 { font-size: 28px; }
  .auth-box { padding: 20px; margin-top: 22px; border-radius: 22px; }
  .auth .auth-links { font-size: 11px; }
  .auth .hero .sub { font-size: 13px; }
  .field input, .auth .field input { min-height: 52px; }
  .charm-visual { border-radius: 22px; }
  .preview-section { border-radius: 22px; }
  .perspective { padding: 18px 15px; border-radius: 18px; }
  .result-cover { padding: 21px; }
  .page-report .cards .card { padding: 22px; }
  .page-report .summary-text { padding: 22px; }
  .footer { margin-top: 40px; }
}
@media (min-width: 701px) {
  .auth .hero { padding-top: 40px; }
  .auth-box { padding: 28px; }
}
@supports not (backdrop-filter: blur(1px)) {
  :is(.auth-box, .charm-visual, .perspective, .preview-section, .preview-paper, .result-cover, .page-report .cards .card, .page-report .charm .card, .page-report .summary-text, .page-report .upsell, .report-contents, .callout, .item-list li) { background: #222426; }
}
@media (prefers-reduced-transparency: reduce) {
  :is(.auth-box, .charm-visual, .perspective, .preview-section, .preview-paper, .result-cover, .page-report .cards .card, .page-report .charm .card, .page-report .summary-text, .page-report .upsell, .report-contents, .callout, .item-list li, .bar) { background: #222426; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* 모든 화면을 하나의 모바일 앱 폭으로 구성한다. */
:root { --wrap: 430px; --gutter: 20px; }
body { background: #0B0C0D; }
#app { width: 100%; max-width: 430px; margin: 0 auto; background: radial-gradient(ellipse 100% 430px at 100% 0,#FFFFFF07,transparent 80%), #101112; min-height: 100dvh; isolation: isolate; }
.page { width: 100%; }
.topbar, .page-landing .topbar, .page-report .topbar, .page-detail .topbar { max-width: 100%; padding: 18px 20px; min-height: 64px; }
.wrap, .auth, .page-report .wrap, .page-detail .wrap, .page-landing .footer .wrap { max-width: 100%; padding-left: 20px; padding-right: 20px; }
.brand { font-size: 19px; }.brand::before { font-size: 23px; }
.casual-wrap { width: 100%; max-width: 100%; padding: 0 20px; }
.landing-hero { grid-template-columns: minmax(0,1fr); gap: 24px; padding: 22px 0 32px; }
.landing-copy h1 { font-size: 34px; line-height: 1.35; font-weight: 600; margin-top: 17px; }
.hero-tag { font-size: 11px; }
.landing-sub { font-size: 13px; line-height: 1.85; margin-top: 16px; }
.landing-action { margin-top: 22px; }
.landing-action .btn { max-width: none; width: 100%; }
.landing-action > p { font-size: 11px; text-align: center; }
.charm-visual { height: 225px; padding: 18px; border-radius: 22px; }
.visual-caption { font-size: 8px; }
.visual-composition { inset: 42px 54px 41px; }
.shape-back { width: 112px; height: 135px; left: 0; }
.shape-front { width: 124px; height: 124px; border-width: 32px; right: 0; }
.visual-spark { font-size: 27px; top: -5px; }
.trait-chip { font-size: 10px; padding: 7px 9px; }
.chip-first { top: 75px; left: 14px; }.chip-second { bottom: 48px; right: 14px; }
.visual-baseline { font-size: 8px; bottom: 15px; left: 18px; right: 18px; }
.discovery { padding: 30px 0 35px; }
.section-heading h2, .preview-copy h2 { font-size: 23px; line-height: 1.5; }
.section-tag { font-size: 11px; }
.perspective-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 20px; }
.perspective { padding: 17px 14px; border-radius: 17px; }
.perspective-icon { font-size: 24px; width: 32px; height: 32px; margin-bottom: 10px; }
.perspective h3 { font-size: 16px; }.perspective p { font-size: 12px; }
.preview-section { grid-template-columns: minmax(0,1fr); gap: 28px; padding: 24px 20px; border-radius: 22px; }
.preview-paper { width: 100%; max-width: none; padding: 22px 18px; margin: 0; }
.preview-paper .portrait { width: 130px; }.preview-type { font-size: 23px; }.preview-quote { font-size: 12px; }
.preview-copy > p:not(.section-tag) { font-size: 13px; }
.casual-benefits { gap: 16px; }.casual-benefits h3 { font-size: 14px; }
.landing-closing { padding: 35px 0 25px; }.landing-closing h2 { font-size: 23px; }
.landing-closing > p { font-size: 12px; }.landing-closing .btn { width: 100%; min-width: 0; }
.casual-disclaimer { font-size: 10px; }
/* 첫 화면과 가입 폼은 한 손으로 누르기 편한 크기로 유지한다. */
.auth .hero { padding-top: 15px; }.auth .hero::before { width: 40px; height: 40px; border-radius: 13px; font-size: 21px; margin-bottom: 18px; }
.auth .hero h1 { font-size: 26px; line-height: 1.4; }.auth .hero .sub { font-size: 13px; }
.auth-box { margin-top: 20px; padding: 20px; border-radius: 22px; }
.auth .auth-links { font-size: 11px; gap: 12px; }.auth .actions { margin-top: 24px; }
.field input, .auth .field input { font-size: 16px; min-height: 52px; }
.btn { min-height: 52px; font-size: 15px; }
/* 설문과 결과는 넓은 화면에서도 한 열로 읽는다. */
.cards, .page-report .cards, .page-report .upsell ul, .report-contents ol { grid-template-columns: minmax(0,1fr); }
.report-intro { padding: 20px 0; }.report-intro > p:last-child { font-size: 12px; }
.result-cover { padding: 20px; }.result-cover .portrait { width: 180px; margin-top: 10px; }
.result-cover .type-name { font-size: 27px; font-weight: 600; }.cover-top { font-size: 10px; }
.cover-perception { font-size: 14px; }.cover-bottom { font-size: 9px; }
.cover-share { font-size: 11px; gap: 8px; flex-wrap: wrap; }
.report-section-title h2 { font-size: 22px; }.report-section-title > p { font-size: 13px; }
.page-report .cards .card, .page-report .charm .card, .page-report .summary-text { padding: 21px; }
.page-report .upsell { padding: 23px 20px; }.page-report .upsell h2 { font-size: 23px; }
.detail-heading .type-name { font-size: 28px; }.report-contents { padding: 21px; }
.page-detail .detail-section > h2 { font-size: 21px; }.page-detail .detail-section .body { font-size: 15px; }
.q { padding-top: 20px; }.q-title { font-size: 23px; }.options { margin-top: 22px; }
.opt-text { font-size: 15px; }.opt-box { padding: 15px 14px; }
.opt input:checked + .opt-box { padding: 14px 13px; }
.bar { left: 50%; right: auto; width: 100%; max-width: 430px; transform: translateX(-50%); padding-left: 20px; padding-right: 20px; }
.bar-inner, .bar-progress { max-width: 100%; }
.save-result { padding-top: 35px; }.save-result h1 { font-size: 27px; }.save-result .actions { max-width: 100%; }
.footer { margin-top: 40px; padding-top: 22px; }.footer nav { gap: 8px 14px; font-size: 11px; }
.footer p { font-size: 10px; }.toast { max-width: min(390px,calc(100% - 32px)); }
@media (max-width: 350px) {
  :root { --gutter: 16px; }
  .wrap, .casual-wrap, .topbar, .page-landing .topbar, .page-report .topbar, .page-detail .topbar, .page-report .wrap, .page-detail .wrap, .page-landing .footer .wrap { padding-left: 16px; padding-right: 16px; }
  .landing-copy h1 { font-size: 30px; }.auth-box { padding: 16px; }
  .auth .auth-links { font-size: 10px; }.q-title { font-size: 21px; }
  .bar { padding-left: 16px; padding-right: 16px; }.bar-inner .btn-secondary { min-width: 75px; }
}

.archetype-image { width: 100%; max-width: 240px; height: auto; aspect-ratio: 1; object-fit: cover; margin: 20px auto 18px; border-radius: 22px; }
.personalized-name { margin-top: 14px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink-2); font-size: 12px; line-height: 1.7; }
.type-description { color: var(--ink-2); font-size: 13px; line-height: 1.8; margin: 12px auto 0; }
.type-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.type-gallery-card { padding: 12px; border: 1px solid var(--line); border-radius: 17px; background: #FFFFFF04; }
.type-gallery-card img { width: 100%; aspect-ratio: 1; border-radius: 12px; object-fit: cover; }
.type-gallery-card h3 { font-size: 13px; margin-top: 11px; }.type-gallery-card p { color: var(--ink-2); font-size: 11px; margin-top: 5px; }
.type-teaser { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 18px 0; }
.type-teaser img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 13px; border: 1px solid var(--line); }
.type-gallery-card img { height: auto; }

/* 모바일 유형 도감: 기본은 이미지와 설명을 함께 읽는 한 열 목록 */
.type-list-heading { padding-top: 20px; }.type-list-heading h1 { font-size: 27px; margin-top: 9px; }.type-list-heading > p:last-child { margin-top: 12px; font-size: 13px; }
.type-list-controls { margin-top: 22px; }.type-search { margin: 0; }.type-search input { width: 100%; min-height: 50px; padding: 0 15px; background: #FFFFFF05; }
.type-search input::placeholder { color: #A8AFB6; }
.type-view-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: #FFFFFF05; border: 1px solid var(--line); border-radius: 13px; padding: 4px; margin-top: 12px; }
.type-view-switch button { min-height: 42px; border: 1px solid transparent; border-radius: 9px; background: transparent; font-size: 12px; cursor: pointer; color: var(--ink-2); }
.type-view-switch button[aria-pressed="true"] { color: #F5F5F5; background: #FFFFFF0D; border-color: #FFFFFF12; }
#type-count { margin-top: 12px; }
.type-detail-list { display: grid; gap: 16px; margin-top: 16px; }
.type-detail-card { border: 1px solid var(--glass-border); background: var(--glass); border-radius: 22px; padding: 18px; scroll-margin-top: 20px; box-shadow: inset 0 1px 0 #FFFFFF08; }
.type-detail-top { display: grid; grid-template-columns: 100px minmax(0,1fr); align-items: center; gap: 15px; }
.type-detail-top img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 15px; }
.type-number { color: #9DA6AF; font-size: 9px; letter-spacing: .1em; }.type-detail-top h2 { font-size: 17px; line-height: 1.5; margin-top: 5px; }.type-detail-top p { font-size: 11px; color: var(--ink-2); margin-top: 5px; }
.type-keywords { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; list-style: none; margin: 17px 0 13px; }.type-keywords li { border: 1px solid #FFFFFF16; padding: 3px 8px; border-radius: 999px; font-size: 10px; color: #C8CDD3; background: #FFFFFF04; }
.type-about { font-size: 13px; line-height: 1.9; color: #CDD1D6; }.type-extra { border-top: 1px solid var(--line); margin-top: 17px; padding-top: 13px; }.type-extra summary { font-size: 11px; color: #CFD5DB; cursor: pointer; padding: 5px 0; }.type-extra h3 { font-size: 12px; margin-top: 16px; }.type-extra p { margin-top: 7px; font-size: 12px; color: var(--ink-2); line-height: 1.9; }
.type-gallery-card h2 { font-size: 13px; margin-top: 11px; }.type-gallery-card .link-btn { font-size: 11px; min-height: 40px; margin-top: 6px; }.type-empty { padding: 40px 16px; text-align: center; font-size: 13px; color: var(--ink-2); }
@media (max-width: 350px) { .type-detail-top { grid-template-columns: 82px minmax(0,1fr); gap: 12px; }.type-detail-card { padding: 15px; }.type-detail-top h2 { font-size: 16px; } }

/* 990원 검사 이용권 — 모바일 한 화면에서 상품과 금액 확인 */
.pass-page { padding-bottom: 28px; }.pass-heading { padding: 18px 0 22px; }.pass-heading h1 { font-size: 28px; margin: 9px 0 12px; font-weight: 600; }.pass-heading > p:last-child { font-size: 14px; color: var(--ink-2); line-height: 1.8; }
.payment-test-note { border: 1px solid #FFFFFF24; background: #FFFFFF08; border-radius: 12px; color: #D0D5DA; padding: 10px 13px; font-size: 11px; line-height: 1.7; margin-bottom: 15px; }
.pass-product { padding: 24px; border: 1px solid #FFFFFF27; border-radius: 24px; background: radial-gradient(ellipse at 100% 0,#FFFFFF10,transparent 70%), #FFFFFF05; box-shadow: inset 0 1px 0 #FFFFFF0F; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.pass-product-label { display: flex; align-items: center; justify-content: space-between; color: #A8AFB7; font-size: 9px; letter-spacing: .1em; }.pass-single { color: #E1E5E9; padding: 4px 10px; border: 1px solid #FFFFFF25; border-radius: 999px; font-size: 10px; letter-spacing: 0; }
.pass-symbol { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid #FFFFFF25; border-radius: 15px; background: linear-gradient(145deg,#FFFFFF19,#FFFFFF02); font-size: 23px; margin: 24px 0 18px; }.pass-product h2 { font-size: 20px; font-weight: 550; }
.pass-price { display: flex; gap: 12px; align-items: baseline; margin-top: 12px; flex-wrap: wrap; }.pass-price b { font-size: 40px; font-weight: 600; letter-spacing: -.055em; line-height: 1.25; }.pass-price span { color: #A9B0B8; font-size: 11px; }
.pass-features { list-style: none; padding: 20px 0 0; margin: 21px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }.pass-features li { display: flex; gap: 10px; color: #CCD1D7; font-size: 12px; }.pass-features li::before { content: '✓'; color: #E8ECF0; }
.pass-product-note { color: var(--ink-3); font-size: 10px; margin-top: 22px; }.pass-balance { display: flex; align-items: center; justify-content: space-between; padding: 20px 3px; border-bottom: 1px solid var(--line); margin-top: 10px; }.pass-balance > span { color: var(--ink-2); font-size: 13px; }.pass-balance b { font-size: 25px; font-weight: 550; }.pass-balance small { font-size: 12px; margin-left: 5px; color: var(--ink-2); }
.pass-notes { margin-top: 27px; }.pass-notes h2, .pass-history h2 { font-size: 15px; }.pass-notes p { color: var(--ink-2); font-size: 12px; margin-top: 10px; line-height: 1.85; }.pass-agreement { font-size: 12px; margin-top: 24px; line-height: 1.8; }.pass-login-note { margin-top: 18px; font-size: 12px; }
.pass-history { margin-top: 28px; }.pass-history > div { display: flex; align-items: center; justify-content: space-between; }.pass-history button { font-size: 11px; }.pass-history ul { list-style: none; padding: 0; margin: 12px 0 0; }.pass-history li { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding: 16px 0; font-size: 12px; }.pass-history li span { display: block; margin-top: 5px; color: var(--ink-3); font-size: 10px; }.pass-history li a { font-size: 11px; white-space: nowrap; }.pass-history > p { padding-top: 15px; font-size: 12px; }

/* Paid relationship report: a reading experience sized for mobile. */
.report-edition{display:flex;justify-content:space-between;gap:12px;padding:12px 0 20px;border-bottom:1px solid var(--line);font-size:9px;letter-spacing:.1em;color:var(--ink-2)}
.relationship-report .result-head{margin-top:24px}.report-cover-note{font-size:16px;line-height:1.8;text-align:center;margin:24px 0;color:var(--ink-2)}
.report-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:12px}.report-meta dt{font-size:10px;color:var(--ink-2);line-height:1.5}.report-meta dd{margin:8px 0 0;font-size:21px;font-weight:600}
.relationship-section{padding-top:30px;margin-top:38px}.report-section-label{font-size:10px;letter-spacing:.18em;color:var(--ink-2);margin-bottom:12px}.relationship-section h2{font-size:23px;line-height:1.5;scroll-margin-top:84px}.relationship-section>p{font-size:14px;line-height:1.95;margin-top:18px;color:var(--ink-2)}
.report-block{padding:22px 18px;margin-top:14px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(140deg,rgba(255,255,255,.065),rgba(255,255,255,.015));backdrop-filter:blur(18px)}.report-block h3{font-size:16px;line-height:1.65;margin-bottom:10px}.report-block p{font-size:14px;line-height:1.95;word-break:keep-all;overflow-wrap:anywhere;color:var(--ink-2)}.report-block p+p{margin-top:12px}.report-block .eyebrow{font-size:10px;margin-bottom:6px}.report-method{margin-top:38px}.report-method h2{font-size:16px;margin-bottom:14px}.report-method p{font-size:12px;line-height:1.9;margin-top:10px}.report-tools{margin:24px 0}
@media print{
 @page{size:A4;margin:18mm}
 html,body,#app,main,.content,.wrap,.relationship-report{background:#fff!important;color:#111!important;max-width:none!important;width:auto!important;margin:0!important;box-shadow:none!important;overflow:visible!important}
 body{font-size:11pt!important;padding:0!important}body:before,body:after,.topbar,footer,.footer,.report-tools,.bar,#toast,#announcer,.toast{display:none!important}
 *{text-shadow:none!important;backdrop-filter:none!important;color:#111!important;border-color:#ddd!important}
 .report-contents{break-after:page}.relationship-section{break-before:page;margin:0!important;padding-top:8mm!important}.report-block{background:none!important;break-inside:avoid;border-radius:5px}.report-block p,.relationship-section>p{font-size:10pt;line-height:1.75}.report-method{break-inside:avoid}.ev:not([open]){display:none}.result-head{break-inside:avoid}.report-contents a{text-decoration:none}.type-portrait,.result-portrait{max-width:200px!important;margin:auto!important}a[href]:after{content:none!important}
}

.preview-notice{margin-bottom:24px}.preview-notice p{font-size:12px;line-height:1.8;margin:10px 0}.preview-notice .link-btn{font-size:12px}

.draft-status{margin:14px 0;color:var(--ink-2);font-size:11px;line-height:1.7}.draft-status .link-btn{display:block;font-size:11px;margin-top:4px}

.style-code{font-size:26px;font-weight:600;letter-spacing:.22em;margin:12px 0;color:var(--ink)}.style-axes{margin:26px 0;padding:20px 0}.style-axes-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.style-axes-heading h2{font-size:19px}.style-axes-heading>b{font-size:16px;letter-spacing:.15em}.style-axis{padding:18px 0;border-bottom:1px solid var(--line)}.style-axis>div:first-child{display:flex;justify-content:space-between;gap:10px;align-items:center}.style-axis h3{font-size:13px}.style-axis>div:first-child>span{font-size:11px;color:var(--ink-2)}.style-poles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}.style-poles>span{padding:10px 8px;border:1px solid var(--line);border-radius:10px;font-size:10px;color:var(--ink-2)}.style-poles>span.active{background:#FFFFFF18;border-color:#FFFFFF75;color:var(--ink)}.style-poles b{font-size:15px;margin-right:4px}.style-axis p{font-size:12px;line-height:1.8;color:var(--ink-2)}.style-axis small{display:block;font-size:10px;color:var(--ink-3);margin-top:9px}
@media print{.style-axis{break-inside:avoid}.style-poles>span.active{background:#eee!important;border-color:#777!important}}

.character-label{font-size:10px!important;color:var(--ink-2);margin:6px 0!important;line-height:1.6}.type-teaser img{object-fit:cover}