/* 매트핏 — 사진 중심, 흰 바탕, 로고 색(네이비·주황)만 */
:root {
  --bg: #F7F5F1;
  --card: #FFFFFF;
  --ink: #1B2A4A;
  --ink-2: #4A5468;
  --ink-3: #7A8191;
  --line: #ECE8E1;
  --soft: #F1EEE8;
  --accent: #E39B5B;
  --accent-ink: #A35A22;
  --select-bg: #EEF1F7;
  --spine: #8FB2FF;
  --ring: #FF6B4A;
  --font: 'SUIT Variable', 'SUIT', system-ui, -apple-system, 'Apple SD Gothic Neo', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; word-break: keep-all; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }
#app { max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.btn-primary { width: 100%; display: flex; align-items: center; justify-content: center; height: 58px; border: none; border-radius: 16px; background: var(--ink); color: #fff; font-size: 17px; font-weight: 700; text-decoration: none; }
.btn-primary:active { transform: scale(.99); }
.btn-secondary { display: flex; align-items: center; justify-content: center; height: 52px; border: none; border-radius: 14px; background: var(--soft); color: var(--ink-2); font-size: 15px; font-weight: 700; }
.icon-btn { width: 44px; height: 44px; border: none; background: none; padding: 0; display: flex; align-items: center; justify-content: center; color: inherit; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.brand strong { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }

/* ---------- 시작 ---------- */
.start { flex: 1; display: flex; flex-direction: column; }
.top-bar { height: 60px; padding: 0 20px; display: flex; align-items: center; }
.hero-photo { position: relative; margin: 4px 16px 0; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 5; background: #D9D3C8; }
.hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10,16,30,0) 40%, rgba(10,16,30,.62) 100%); }
.hero-copy { position: absolute; left: 22px; right: 22px; bottom: 24px; z-index: 1; color: #fff; }
.hero-copy small { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 600; opacity: .9; }
.hero-copy h1 { margin: 0; font-size: 30px; font-weight: 800; line-height: 1.3; letter-spacing: -0.03em; }
.facts { margin: 18px 20px 0; padding: 0; list-style: none; display: flex; gap: 6px; flex-wrap: wrap; }
.facts li { font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--card); border: 1px solid var(--line); padding: 7px 12px; border-radius: 999px; }
.pair-note { margin: 16px 20px 0; padding: 14px 16px; border-radius: 14px; background: var(--select-bg); font-size: 14px; line-height: 1.55; color: var(--ink); }
.start-cta { position: sticky; bottom: 0; margin-top: auto; padding: 20px 20px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(to bottom, rgba(247,245,241,0), var(--bg) 30%); }

/* ---------- 질문 ---------- */
.quiz { flex: 1; display: flex; flex-direction: column; padding: 8px 20px 28px; }
.quiz-top { height: 52px; display: flex; align-items: center; gap: 8px; }
.quiz-top .icon-btn { margin-left: -10px; }
.bar { flex: 1; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--ink); border-radius: 3px; transition: width .3s ease; }
.count { min-width: 34px; text-align: right; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.quiz h1 { margin: 32px 0 8px; font-size: 26px; font-weight: 800; line-height: 1.35; letter-spacing: -0.03em; }
.hint { margin: 0; font-size: 15px; color: var(--ink-3); }
.options { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; }
.option { min-height: 64px; padding: 0 20px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink); font-size: 17px; font-weight: 700; text-align: left; display: flex; align-items: center; justify-content: space-between; transition: border-color .12s ease, background .12s ease; }
.option[aria-pressed="true"] { border-color: var(--ink); background: var(--select-bg); }
@media (hover: hover) { .option:hover { border-color: #C9CEDA; } }
.size-note { margin-top: auto; padding-top: 28px; font-size: 12px; color: var(--ink-3); text-align: center; }

/* ---------- 로딩 ---------- */
.loading { flex: 1; padding: 140px 24px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.loading p { margin: 0; font-size: 20px; font-weight: 800; }
.spinner { width: 40px; height: 40px; border-radius: 50%; border: 4px solid var(--line); border-top-color: var(--ink); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 결과: 상단 ---------- */
.hero { background: var(--ink); color: #fff; padding: 8px 0 22px; display: flex; flex-direction: column; gap: 16px; border-radius: 0 0 28px 28px; }
.hero-nav { padding: 0 20px; height: 52px; display: flex; align-items: center; justify-content: space-between; }
.hero-nav .back { margin-left: -10px; color: #fff; }
.hero-nav .right { display: flex; align-items: center; gap: 2px; }
.hero-nav .retry { font-size: 14px; font-weight: 700; padding: 12px 8px; color: #C9CEDA; background: none; border: none; }
.hero-nav .share { margin-right: -10px; color: #fff; }
.disclosure { margin: 0 20px; font-size: 13px; line-height: 1.6; color: #DCE1EC; background: rgba(255,255,255,.08); border-radius: 12px; padding: 10px 14px; }
.hero-head { padding: 12px 20px 0; display: flex; flex-direction: column; gap: 8px; }
.hero-head h1 { margin: 0; font-size: 34px; font-weight: 800; line-height: 1.28; letter-spacing: -0.03em; }
.hero-head h1 em { font-style: normal; color: var(--accent); }
.hero-head p { margin: 0; font-size: 15px; color: #C9CEDA; }
.figure { position: relative; margin: 4px 16px 0; border-radius: 18px; overflow: hidden; }
.figure img { display: block; width: 100%; height: auto; }
.figure svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.figure .tag { position: absolute; left: 12px; bottom: 10px; font-size: 13px; font-weight: 800; color: var(--ink); background: var(--spine); padding: 4px 10px; border-radius: 999px; }
.figure .tag.warn { background: var(--ring); }
.tabs { padding: 0 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tab { border: 1.5px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); border-radius: 14px; padding: 6px 6px 10px; display: flex; flex-direction: column; gap: 8px; color: #C9CEDA; text-align: left; }
.tab img { display: block; width: 100%; height: auto; border-radius: 9px; }
.tab .name { font-size: 13px; font-weight: 700; padding: 0 4px; }
.tab .sub { font-size: 11px; line-height: 1.4; padding: 0 4px; color: #9EA8BD; }
.tab[aria-checked="true"] { border-color: var(--accent); color: #fff; }
.tab .sub.mine { color: var(--accent); font-weight: 700; }
.figure-note { margin: 0 20px; font-size: 12px; color: #9EA8BD; }

@keyframes draw { 0%, 10% { stroke-dashoffset: 660 } 45%, 100% { stroke-dashoffset: 0 } }
@keyframes pop { 0%, 8% { transform: scale(0); opacity: 0 } 16%, 100% { transform: scale(1); opacity: 1 } }
@keyframes pop2 { 0%, 42% { transform: scale(0); opacity: 0 } 50%, 100% { transform: scale(1); opacity: 1 } }
@keyframes pulse { 0% { transform: scale(.55); opacity: 0 } 30% { opacity: .95 } 100% { transform: scale(1.15); opacity: 0 } }
.draw { animation: draw 3.2s cubic-bezier(.2,.8,.2,1) infinite alternate; }
.pop { transform-box: fill-box; transform-origin: center; animation: pop 3.2s ease-out infinite alternate; }
.pop2 { transform-box: fill-box; transform-origin: center; animation: pop2 3.2s ease-out infinite alternate; }
.pulse { transform-box: fill-box; transform-origin: center; animation: pulse 2.4s ease-out infinite; }
.late { animation-delay: 1.2s; }

/* ---------- 결과: 본문 ---------- */
.section { margin: 16px 16px 0; padding: 20px; background: var(--card); border-radius: 20px; display: flex; flex-direction: column; gap: 14px; }
.section h2 { margin: 0; font-size: 18px; font-weight: 800; }
.section-head { display: flex; justify-content: space-between; align-items: center; margin: -8px 0; }
.link-btn { height: 44px; margin-right: -8px; padding: 0 8px; border: none; background: none; font-size: 14px; font-weight: 700; color: var(--ink-3); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 13px; font-weight: 600; background: var(--soft); color: var(--ink-2); padding: 7px 12px; border-radius: 999px; }
.reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; counter-reset: r; }
.reasons li { position: relative; padding-left: 34px; font-size: 15px; line-height: 1.55; color: var(--ink-2); counter-increment: r; }
.reasons li::before { content: counter(r); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--soft); color: var(--ink); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.reasons li.last { color: var(--ink); font-weight: 700; }
.reasons li.last::before { background: var(--ink); color: #fff; }

.rail-gap { height: 8px; }
.list-head { padding: 28px 20px 14px; display: flex; flex-direction: column; gap: 4px; }
.list-head h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.list-head span { font-size: 13px; color: var(--ink-3); }
.list-head h3 { margin: 0; font-size: 18px; font-weight: 800; }
.pair-split-note { margin: 0 16px 10px; padding: 14px 16px; border-radius: 14px; background: var(--select-bg); font-size: 14px; line-height: 1.55; }

.products { padding: 0 16px; display: flex; flex-direction: column; gap: 10px; }
.product { position: relative; }
.product a { display: flex; text-decoration: none; color: inherit; background: var(--card); border-radius: 20px; }
.product.top a { flex-direction: column; gap: 10px; padding: 12px 12px 18px; }
.product.top .row1 { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 0 6px; }
.product.top .name { font-size: 18px; font-weight: 800; line-height: 1.4; }
.product.top .price { font-size: 15px; font-weight: 800; white-space: nowrap; }
.product.top .sub, .product.top .review, .product.top .label { padding: 0 6px; }
.product.top .go { margin: 6px 6px 0; height: 50px; border-radius: 14px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; }
.product.row a { align-items: flex-start; gap: 14px; padding: 12px; }
.product .info { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 2px; }
.product .label { font-size: 12px; font-weight: 800; color: var(--accent-ink); }
.product .label.muted { color: var(--ink-3); }
.product.row .name { font-size: 15px; font-weight: 700; line-height: 1.4; }
.product.row .price { font-size: 14px; font-weight: 800; }
.product .sub { font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.review { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.new-badge { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 800; color: #fff; background: var(--accent-ink); padding: 1px 6px; border-radius: 6px; vertical-align: 1px; }
.report-btn { display: block; width: 100%; height: 44px; margin-top: 6px; border-radius: 12px; border: 1.5px solid var(--ring); background: #FFF1EC; color: #A3301A; font-size: 14px; font-weight: 700; }

.thumb { flex: none; width: 80px; height: 80px; border-radius: 12px; overflow: hidden; background: var(--soft); position: relative; }
/* 파트너스 배너(240x480)에서 가운데 제품 사진만 보이게 자름 */
.thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; display: block; }
.thumb.big { width: 100%; height: 200px; border-radius: 14px; }
.thumb.big img { object-position: 50% 32%; }
.thumb.art { display: flex; align-items: center; justify-content: center; }
.thumb.art svg { width: 90%; height: auto; }
.art-cap { position: absolute; left: 10px; bottom: 8px; font-size: 12px; font-weight: 700; color: var(--ink-3); }

.list-foot { padding: 12px 20px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.list-foot span { font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.list-foot button { flex: none; height: 44px; border: none; background: none; padding: 0; font-size: 12px; font-weight: 700; color: var(--ink-3); text-decoration: underline; }
.soldout-note { margin: 0 16px 12px; padding: 14px 16px; border-radius: 14px; background: var(--card); display: flex; flex-direction: column; gap: 6px; }
.soldout-note .gone { font-size: 14px; font-weight: 700; text-decoration: line-through; color: var(--ink-3); }
.soldout-note p { margin: 0; font-size: 13px; line-height: 1.55; }

.empty { margin: 0 16px; padding: 22px 20px; background: var(--card); border-radius: 20px; display: flex; flex-direction: column; gap: 12px; }
.empty .title { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.4; }
.empty .body { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.empty .btn-primary { height: 52px; font-size: 16px; }

.pair-box { margin: 24px 16px 0; padding: 18px; background: var(--card); border-radius: 20px; display: flex; align-items: center; gap: 12px; }
.pair-box .txt { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.pair-box strong { font-size: 15px; }
.pair-box span { font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.pair-box button { flex: none; height: 44px; padding: 0 16px; border: none; border-radius: 12px; background: var(--soft); color: var(--ink); font-size: 14px; font-weight: 700; }

.result-spacer { flex: 1; min-height: 20px; }
.cta { position: sticky; bottom: 0; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; background: linear-gradient(to bottom, rgba(247,245,241,0), var(--bg) 26%); }
.cta span { font-size: 12px; color: var(--ink-3); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.error { padding: 80px 24px; display: flex; flex-direction: column; gap: 14px; }
.error .title { margin: 0; font-size: 22px; font-weight: 800; }
.error p { margin: 0; color: var(--ink-2); line-height: 1.6; }

.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--ink); color: #fff; font-size: 14px; padding: 12px 18px; border-radius: 12px; max-width: calc(100% - 32px); z-index: 10; box-shadow: 0 6px 20px rgba(0,0,0,.2); }

@media (prefers-reduced-motion: reduce) {
  .draw, .pop, .pop2, .pulse, .spinner { animation: none; stroke-dashoffset: 0; opacity: 1; transform: none; }
  .option, .bar span { transition: none; }
}

/* 배너 좌우 흰 여백이 보이지 않게 살짝 확대 */
.thumb img { transform: scale(1.14); }
.thumb.big img { transform: scale(1.1); }
/* 고정 버튼 위 안내 문구는 겹치므로 숨김 */
.cta span { display: none; }

/* ---------- 시작 화면: 인앱 메시지형 카드 ---------- */
.start .top-bar { flex: none; }
.iam { position: relative; margin: 0 16px 12px; border-radius: 28px; overflow: hidden; background: var(--card); box-shadow: 0 12px 32px rgba(27,42,74,.12); flex: 1; min-height: 560px; display: flex; flex-direction: column; }
.iam-meta { display: block; font-size: 12px; font-weight: 600; color: var(--ink-3); text-align: center; }
.iam-meta.out { margin: 0 0 20px; }
.iam .btn-primary { margin-top: 4px; }
.iam .pair-note { margin: 0; }

/* B: 사진 꽉 채움 + 위에 글·버튼 */
.iam-over img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.iam-over::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10,16,30,0) 42%, rgba(10,16,30,.3) 62%, rgba(10,16,30,.78) 100%); }
.iam-over-body { position: relative; z-index: 1; margin-top: auto; padding: 24px 20px 20px; display: flex; flex-direction: column; gap: 10px; color: #fff; }
.iam-kicker { align-self: flex-start; font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.18); backdrop-filter: blur(6px); }
.iam-over-body h1 { margin: 4px 0 0; font-size: 32px; font-weight: 800; line-height: 1.25; letter-spacing: -0.03em; }
.iam-over-body p { margin: 0 0 8px; font-size: 15px; opacity: .9; }
.iam-over .btn-primary { background: #fff; color: var(--ink); }
.iam-over .pair-note { background: rgba(255,255,255,.9); }

/* 사진 카드 안 로고 */
.start { padding-top: 0; }
.iam-meta.out { margin: 4px 0 20px; }
.iam-brand { position: absolute; z-index: 2; left: 20px; top: 20px; display: flex; align-items: center; gap: 7px; color: #fff; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }

/* 상단 로고: 토스처럼 사진 카드 위에 작게 */
.start .top-bar { height: 52px; padding: 0 22px; }
.start .brand { gap: 6px; }
.start .brand strong { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }

/* ================= PC (960px 이상) ================= */
@media (min-width: 960px) {
  body { background: var(--bg); }
  #app { max-width: 1120px; padding: 0 32px; }

  /* 시작: 가로형 카드 (왼쪽 사진, 오른쪽 글·버튼) */
  .scr-start .start { padding: 8px 0 40px; }
  .scr-start .top-bar { height: 72px; padding: 0 4px; }
  .scr-start .brand strong { font-size: 20px; }
  .scr-start .iam { margin: 0; min-height: 0; height: min(640px, calc(100vh - 150px)); flex: none; display: grid; grid-template-columns: 1.15fr 1fr; background: var(--card); }
  .scr-start .iam-over img { position: relative; inset: auto; width: 100%; height: 100%; object-position: 50% 22%; grid-column: 1; }
  .scr-start .iam-over::after { display: none; }
  .scr-start .iam-over-body { grid-column: 2; margin: 0; align-self: center; padding: 48px 56px; color: var(--ink); gap: 14px; }
  .scr-start .iam-kicker { background: var(--soft); color: var(--ink-2); backdrop-filter: none; }
  .scr-start .iam-over-body h1 { font-size: 44px; line-height: 1.22; }
  .scr-start .iam-over-body p { font-size: 17px; color: var(--ink-2); opacity: 1; margin-bottom: 16px; }
  .scr-start .iam-over .btn-primary { background: var(--ink); color: #fff; height: 60px; max-width: 360px; }
  .scr-start .iam-over .pair-note { background: var(--select-bg); }
  .scr-start .iam-meta.out { margin: 16px 0 0; }

  /* 질문·로딩: 가운데 좁은 칼럼 */
  .scr-quiz .quiz, .scr-loading .loading, .scr-loading .error { width: 100%; max-width: 560px; margin: 0 auto; }
  .scr-quiz .quiz { padding-top: 40px; }
  .scr-quiz .quiz h1 { font-size: 32px; }

  /* 결과: 왼쪽 결과 고정, 오른쪽 목록 */
  #app.scr-result { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-content: start; padding-top: 24px; padding-bottom: 24px; }
  .scr-result > * { grid-column: 2; }
  .scr-result > .hero { grid-column: 1; grid-row: 1 / span 30; position: sticky; top: 24px; align-self: start; border-radius: 28px; }
  .scr-result .section, .scr-result .products, .scr-result .empty, .scr-result .pair-box, .scr-result .soldout-note, .scr-result .pair-split-note { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  .scr-result .section, .scr-result .empty, .scr-result .pair-box { padding: 20px; }
  .scr-result .section:first-of-type { margin-top: 0; }
  .scr-result .list-head, .scr-result .list-foot { padding-left: 4px; padding-right: 4px; }
  .scr-result .cta { padding-left: 0; padding-right: 0; }
  .scr-result .thumb.big { height: 260px; }
}

/* 모바일 시작: 로고 없이 사진 카드가 화면을 채움 */
@media (max-width: 959px) {
  .scr-start .top-bar { display: none; }
  .scr-start .start { padding: 12px 0; }
  .scr-start .iam { margin: 0 12px; min-height: calc(100vh - 24px); min-height: calc(100dvh - 24px); }
}
/* 제목 아래 설명을 뺐으므로 버튼과 간격 확보 */
.iam-over-body h1 { margin-bottom: 14px; }

/* ===== 결과 상단: 시작 화면과 같은 밝은 톤 ===== */
.hero { background: var(--card); color: var(--ink); }
.hero-nav .back, .hero-nav .share { color: var(--ink); }
.hero-nav .retry { color: var(--ink-3); }
.disclosure { background: var(--soft); color: var(--ink-2); }
.hero-head p { color: var(--ink-3); }
.hero-head h1 em { color: #C46A2B; }
.figure .tag { color: #fff; background: var(--line-blue, #4F7BEA); }
.figure .tag.warn { background: #F0643C; }
.tab { background: var(--soft); border-color: transparent; color: var(--ink-2); }
.tab .sub { color: var(--ink-3); }
.tab[aria-checked="true"] { border-color: var(--ink); color: var(--ink); background: #fff; }
.tab .sub.mine { color: #C46A2B; }
.figure-note { color: var(--ink-3); }
.more-btn { display: block; margin: 10px 16px 0; height: 48px; width: calc(100% - 32px); border: 1.5px dashed #CFC8BC; border-radius: 14px; background: transparent; color: var(--ink-2); font-size: 14px; font-weight: 700; }
@media (min-width: 960px) { .scr-result .more-btn { margin-left: 0; margin-right: 0; width: 100%; } }

/* 이렇게 골랐어요: 사용자 답 + 방향 꼬리표 */
.reasons li.basis { display: flex; flex-direction: column; gap: 2px; color: var(--ink); }
.reasons li.basis strong { font-weight: 700; }
.reasons li.basis span { font-size: 13px; color: var(--ink-3); }
.reasons li.fact { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink); }
.reasons .dir { flex: none; font-style: normal; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.reasons .dir.soft { background: #FBEDE2; color: #A35A22; }
.reasons .dir.firm { background: #E7EDFB; color: #2F55B8; }

/* 번호 없이: 시작 줄, 답 줄, 결론 줄 */
.reasons { gap: 12px; }
.reasons li { padding-left: 0; }
.reasons li::before { content: none; display: none; }
.reasons li.basis { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.reasons li.last { margin-top: 2px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink); font-weight: 800; }
.reasons .dir.pick { background: var(--soft); color: var(--ink-2); }
.reasons .tags { flex: none; display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; max-width: 55%; }

/* 1순위 카드: 배너를 늘리지 않는 크기로 */
.product.top .top-row { display: flex; gap: 14px; align-items: flex-start; padding: 2px; }
.product.top .thumb.big { width: 128px; height: 128px; flex: none; border-radius: 14px; }
.product.top .thumb.big img { transform: scale(1.12); object-position: 50% 30%; }
.product.top .info { padding-top: 2px; gap: 4px; }
.product.top .info .name { font-size: 16px; font-weight: 800; line-height: 1.4; }
.product.top .info .price { font-size: 15px; font-weight: 800; }
.product.top .info .sub, .product.top .info .review, .product.top .info .label { padding: 0; }
@media (min-width: 960px) { .scr-result .product.top .thumb.big { width: 150px; height: 150px; } }
/* 시작 사진: 아래로 늘린 1024x1536 사진, 얼굴이 위쪽에 오도록 */
.scr-start .iam-over img { object-position: 50% 0%; }

/* 고르는 기준 안내 링크 */
.guide-link { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }

/* 내 결과가 아닌 단단함: 경고 대신 중립 톤 */
.figure .tag.other { background: rgba(255,255,255,.94); color: var(--ink); }

/* 단단함 게이지 */
.gauge { margin: 4px 16px 16px; padding: 40px 16px 12px; background: var(--soft); border-radius: 20px; }
.g-feed { height: 24px; margin-bottom: 28px; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--ink-2); overflow: hidden; white-space: nowrap; }
.g-feed .dir { flex: none; font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 999px; }
.g-feed .dir.soft { background: #FBEDE2; color: var(--accent-ink); }
.g-feed .dir.firm { background: #E7EDFB; color: #2E4A86; }
.g-track { position: relative; height: 12px; border-radius: 999px; background: linear-gradient(90deg, #F4C9AE 0 31.25%, #DCE3F3 31.25% 68.75%, #C3CCE3 68.75% 100%); }
.g-dot { position: absolute; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: var(--ink); border: 4px solid #fff; box-shadow: 0 2px 8px rgba(27,42,74,.35); transition: left .8s cubic-bezier(.22,.8,.3,1); }
.g-dot::after { content: '나'; position: absolute; top: -31px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 800; background: var(--ink); color: #fff; padding: 3px 7px; border-radius: 8px; }
.g-zones { position: relative; z-index: 3; display: flex; justify-content: space-between; margin-top: 4px; }
.g-zone { border: none; background: none; padding: 8px 0; font: inherit; font-size: 13px; font-weight: 700; color: var(--ink-3); text-decoration: underline dotted; text-decoration-color: #B8BCC6; text-underline-offset: 4px; cursor: pointer; transition: color .3s; }
.g-zone.on { color: var(--accent-ink); font-weight: 800; }
.g-tip { position: absolute; top: 38px; z-index: 5; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; padding: 8px 11px; border-radius: 10px; white-space: nowrap; box-shadow: 0 6px 16px rgba(27,42,74,.25); animation: gtip .18s ease-out; }
.g-tip::before { content: ''; position: absolute; top: -5px; left: var(--ax, 20px); width: 10px; height: 10px; background: var(--ink); transform: rotate(45deg); }
@keyframes gtip { from { opacity: 0; transform: translateY(-4px); } }
.g-pulls { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; }
.g-pull { display: flex; flex-direction: column; gap: 6px; max-width: 58%; }
.g-pull.f { align-items: flex-end; }
.g-pull span { font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 10px; opacity: 0; transform: translateY(-6px); transition: opacity .3s, transform .3s; }
.g-pull span.in { opacity: 1; transform: none; }
.g-pull.s span { background: #FBEDE2; color: var(--accent-ink); }
.g-pull.f span { background: #E7EDFB; color: #2E4A86; }
@media (prefers-reduced-motion: reduce) { .g-dot, .g-pull span { transition: none; } }

/* 하단 CTA: 하나로 정리, 주황색 + 위에 말풍선 */
.cta .cta-btn { position: relative; gap: 6px; height: 58px; border-radius: 16px; background: #C4561C; color: #fff; font-size: 17px; font-weight: 800; box-shadow: 0 8px 20px rgba(196,86,28,.35); transition: transform .12s ease, box-shadow .12s ease; }
.cta .cta-btn:active { transform: scale(.98); box-shadow: 0 4px 10px rgba(196,86,28,.3); }
.cta .cta-btn svg { flex: none; transition: transform .2s ease; }
.cta .cta-btn:hover svg { transform: translateX(3px); }
.cta .cta-bubble { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 800; color: var(--ink); background: #fff; padding: 7px 12px; border-radius: 999px; box-shadow: 0 4px 14px rgba(27,42,74,.16); animation: ctaBubble .5s cubic-bezier(.3,1.5,.5,1) .4s both; }
.cta .cta-bubble::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: #fff; transform: rotate(45deg); }
@keyframes ctaBubble { from { opacity: 0; transform: translate(-50%, 6px); } }
.cta { padding-top: 46px; }
.product.top .label { font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .cta .cta-bubble { animation: none; } }

/* CTA: 비스듬한 스티커 + 빛이 지나가는 버튼 (말풍선 대체) */
.cta .cta-bubble { display: none; }
.cta { padding-top: 30px; }
.cta .cta-btn { overflow: visible; isolation: isolate; }
.cta .cta-btn::before { content: ''; position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: -1; background: linear-gradient(100deg, transparent 0 40%, rgba(255,255,255,.42) 50%, transparent 60% 100%) no-repeat; background-size: 250% 100%; background-position: 160% 0; animation: ctaShine 3s ease-in-out 1s infinite; }
@keyframes ctaShine { 0%, 55% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
.cta .cta-sticker { position: absolute; left: 14px; top: -14px; z-index: 2; transform: rotate(-6deg); background: #FFE66B; color: var(--ink); font-size: 12px; font-weight: 900; padding: 6px 10px; border-radius: 9px; box-shadow: 0 3px 8px rgba(0,0,0,.15); animation: ctaWobble 2.8s ease-in-out 1.2s infinite; }
@keyframes ctaWobble { 0%, 80%, 100% { transform: rotate(-6deg); } 86% { transform: rotate(3deg) scale(1.06); } 92% { transform: rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) { .cta .cta-btn::before, .cta .cta-sticker { animation: none; } }

/* 첫 화면: 따뜻한 그라데이션 + 주황 버튼 (움직임 없음) */
.iam-over::after { background: linear-gradient(to bottom, rgba(40,28,20,0) 38%, rgba(52,36,26,.35) 58%, rgba(30,26,38,.86) 100%); }
.iam-over .btn-primary, .scr-start .iam-over .btn-primary { gap: 6px; height: 58px; border-radius: 16px; background: #C4561C; color: #fff; font-size: 17px; font-weight: 800; box-shadow: 0 10px 24px rgba(196,86,28,.4); }
.iam-over .btn-primary:active { transform: scale(.98); }
.iam-over .btn-primary svg { flex: none; }

/* 첫 화면 움직임: 햇살, 제목·버튼 등장, 버튼 위 빛 (사진 확대는 없음) */
.iam-over::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60% 40% at 80% 8%, rgba(255,220,170,.35), transparent 70%); animation: startSun 6s ease-in-out infinite alternate; }
@keyframes startSun { from { opacity: .4; } to { opacity: 1; } }
.iam-over-body h1 { animation: startUp .8s cubic-bezier(.2,.8,.3,1) .2s both; }
.iam-over .btn-primary { position: relative; overflow: hidden; animation: startUp .8s cubic-bezier(.2,.8,.3,1) .45s both; }
.iam-over .btn-primary::after { content: ''; position: absolute; top: 0; bottom: 0; width: 35%; left: -45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); animation: startShine 3s ease-in-out 1.2s infinite; }
@keyframes startShine { 0%, 55% { left: -45%; } 100% { left: 130%; } }
@keyframes startUp { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .iam-over::before, .iam-over-body h1, .iam-over .btn-primary, .iam-over .btn-primary::after { animation: none; } }
@media (min-width: 960px) { .scr-start .iam-over::before { display: none; } }