/* ── 쎄롬케어 AI 예상 비용 계산기 ─────────────────────────────────
   7단계 흐름: 인트로 → 위치 → 상태 → 건물 → 보험 → 계산 → 결과

   반응형 전략
   · 스텝 엔진(.viewport/.track/.screen)은 모든 폭에서 동일 — translateX 트랙 유지
   · 브레이크포인트에서 바뀌는 건 셸(.page-main/.app)의 박스뿐이라 JS 분기가 없음
   · <768  모바일 풀스크린 (/onboard/ 와 동일한 느낌)
   · ≥768  루트 랜딩 헤더/푸터 + 가운데 카드

   ⚠️ 루트 styles.css 를 함께 로드하지 않습니다 (.btn/.toast/.dot 정의가 충돌).
      스텝 버튼 규칙은 `.app .btn` 으로 스코프해 헤더의 .btn-brand 와 분리했습니다.
   ───────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════
   0. 토큰 · 리셋 · 타이포
   토큰은 styles.css:6-24 (루트 랜딩) + onboard/styles.css:5-21 의 합집합
   ══════════════════════════════════════════════════════════════ */
:root {
  --brand: #ED7F1A;
  --brand-hover: #D8700F;
  --brand-press: #C9650A;
  --brand-600: #C9650A;
  --amber: #F6A24A;
  --ink: #191D24;
  --ink-2: #5B616E;
  --ink-3: #797F8A;
  --ink-4: #9AA0AA;
  --dark: #17120D;
  --footer: #0A0D12;
  --surface: #F5F6F8;
  --surface-2: #EEF0F3;
  --bg: #EDEEF0;
  --line: #E6E8EB;
  --line-2: #D5D7DA;
  --soft: #FAFAFA;
  --accent-bg: #FFF6ED;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }
::-webkit-scrollbar { width: 0; height: 0; }

body {
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: var(--ink);
  scrollbar-width: none;
}
a { text-decoration: none; color: inherit; }
img { display: block; }
button { font-family: inherit; border: none; background: none; }
[hidden] { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   1. 스텝 엔진 (모든 폭 공통)
   ══════════════════════════════════════════════════════════════ */
.app {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow: clip;
}

.viewport {
  flex: 1;
  /* clip(스크롤 컨테이너 미생성)으로 포커스-스크롤에 의한 가로 밀림 방지 */
  overflow: hidden;
  overflow: clip;
  /* clip 은 스크롤 컨테이너를 만들지 않아 flex 자동 최소 크기가 0으로 떨어지지
     않습니다. 이게 없으면 내용이 긴 화면(결과)에서 .viewport 가 .app 높이를
     넘어 늘어나고 카드 하단 CTA 가 잘려 나갑니다. */
  min-height: 0;
  position: relative;
}

.track {
  display: flex;
  height: 100%;
  transition: transform .5s cubic-bezier(.4, 0, .1, 1);
  will-change: transform;
}

.screen {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* ══════════════════════════════════════════════════════════════
   2. 컴포넌트 (모든 폭 공통)
   ══════════════════════════════════════════════════════════════ */

/* ── 스텝 버튼 — .app 안에서만 적용 ────────────────────────────── */
.app .btn {
  flex: none;
  width: 100%;
  font-family: inherit;
  border: none;
  cursor: pointer;
}
.app a.btn { display: flex; align-items: center; justify-content: center; }

.app .btn-primary {
  height: 56px;
  border-radius: 16px;
  background: var(--brand);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(237, 127, 26, .30);
  transition: background .15s;
}
.app .btn-primary:hover { background: var(--brand-hover); }
.app .btn-primary:active { background: var(--brand-press); }
.app .btn-primary:disabled,
.app .btn-primary:disabled:hover,
.app .btn-primary:disabled:active {
  background: var(--line);
  color: #AFB4BC;
  box-shadow: none;
  cursor: not-allowed;
}

.app .btn-text {
  height: 50px;
  margin-top: 6px;
  background: none;
  color: var(--ink-3);
  font-size: 15px;
  font-weight: 600;
}
.app .btn-text:hover { color: var(--ink-2); }

.app .btn-link {
  height: 38px;
  background: none;
  color: var(--ink-4);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.app .btn-link:hover { color: var(--ink-3); }

/* 키보드 포커스 링 (onboard 에는 없음 — 데스크탑 키보드 사용 대응) */
.app .btn:focus-visible,
.opt:focus-visible,
.pick:focus-visible,
.back:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ── 인트로 ────────────────────────────────────────────────────── */
.brand { display: flex; align-items: center; gap: 8px; flex: none; }
.brand-mark { width: 28px; height: 28px; }
.brand-nm { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }

.intro-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }

.chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--accent-bg);
  color: var(--brand-press);
  font-size: 12.5px;
  font-weight: 700;
}
.chip svg { width: 14px; height: 14px; flex: none; }

.intro-h {
  margin-bottom: 18px;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -.035em;
}
.accent { color: var(--brand); }
.intro-sub { font-size: 16px; line-height: 1.65; color: var(--ink-2); font-weight: 500; }

/* ── 화면 공통 헤더 ────────────────────────────────────────────── */
.scr-head { display: flex; align-items: center; gap: 12px; height: 36px; flex: none; }
.back {
  cursor: pointer;
  padding: 4px;
  margin-left: -8px;
  color: var(--ink);
  display: flex;
  border-radius: 6px;
}
.back svg { width: 22px; height: 22px; }

.progress { flex: 1; height: 4px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.progress span { display: block; height: 100%; border-radius: 999px; background: var(--brand); transition: width .35s ease; }

.scr-h { margin: 22px 0 6px; font-size: 25px; font-weight: 800; letter-spacing: -.03em; }
.scr-sub { margin-bottom: 20px; font-size: 15px; color: var(--ink-4); font-weight: 500; }

/* ── 2×2 아이콘 그리드 (위치 다중선택 · 건물 단일선택) ──────────── */
.opt-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-content: start;
  padding-top: 4px;
}
.opt-cell { display: flex; flex-direction: column; align-items: center; gap: 10px; }

.opt {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  background: var(--surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, box-shadow .15s;
}
.opt:hover { background: var(--surface-2); }
.opt.is-selected { background: var(--accent-bg); box-shadow: inset 0 0 0 2px var(--brand); }

.opt-ic { width: 46px; height: 46px; }

.opt-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--brand);
  display: none;
  align-items: center;
  justify-content: center;
}
.opt-check svg { width: 13px; height: 13px; }
.opt.is-selected .opt-check { display: flex; }

.opt-label { font-size: 15px; font-weight: 700; }

/* ── 단일선택 행 (상태 · 보험) ─────────────────────────────────── */
.picks { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.pick {
  flex: none;
  text-align: left;
  width: 100%;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--surface);
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
}
.pick:hover { background: var(--surface-2); }
.pick.is-selected { background: var(--accent-bg); box-shadow: inset 0 0 0 2px var(--brand); }
.pick-t { display: block; font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.pick-d { display: block; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); font-weight: 500; }

/* ── 계산 중 ───────────────────────────────────────────────────── */
.screen--calc { align-items: center; justify-content: center; text-align: center; }
.calc-mark { position: relative; width: 88px; height: 88px; flex: none; }
.calc-mark img { width: 88px; height: 88px; animation: srPop .5s ease both; }
.calc-mark::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 999px;
  border: 2px solid rgba(237, 127, 26, .35);
  animation: srPulse 1.6s ease-out infinite;
}
.calc-h { margin: 26px 0 10px; font-size: 23px; font-weight: 800; letter-spacing: -.03em; }
.calc-line {
  font-size: 14.5px;
  color: var(--ink-3);
  font-weight: 500;
  min-height: 22px;
  transition: opacity .18s ease;
}
.calc-line.is-fade { opacity: 0; }

/* ── 결과 ──────────────────────────────────────────────────────── */
.screen--result { overflow: hidden; }
.res-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-top: 4px; }
.res-actions { flex: none; padding-top: 14px; }
/* 보조 액션 2개를 한 줄로 — 세로로 쌓으면 결과 화면에서 48px 를 더 먹습니다 */
.res-sub-actions { display: flex; align-items: center; justify-content: center; gap: 14px; }
.res-sub-actions .btn { width: auto; margin-top: 0; height: 46px; }
.res-sep { width: 1px; height: 12px; background: var(--line); flex: none; }

/* 히어로 — 루트 랜딩 .ins-card(styles.css:202-209) 의 어휘를 계승 */
.res-hero {
  border-radius: 20px;
  background: linear-gradient(180deg, #241B12, #1B140D);
  border: 1px solid rgba(246, 162, 74, .22);
  padding: 22px 24px;
}
.res-k { font-size: 13px; font-weight: 700; color: var(--amber); letter-spacing: .02em; }
.res-old { margin-top: 13px; display: flex; align-items: center; gap: 12px; }
.res-old .strike {
  font-size: 19px; font-weight: 700; color: #8C8378;
  text-decoration: line-through; letter-spacing: -.02em;
}
.res-old svg { width: 20px; height: 20px; flex: none; }
.res-new { margin-top: 6px; display: flex; align-items: baseline; gap: 10px; }
.res-new .big { font-size: 52px; font-weight: 800; color: var(--brand); line-height: .95; letter-spacing: -.05em; }
.res-new .tag { font-size: 14px; font-weight: 700; color: var(--amber); }

/* 보험 없음 변형 — 0원 대신 범위 금액이 주인공 */
.res-hero--plain { display: flex; flex-direction: column; align-items: flex-start; }
.res-plain-big {
  margin-top: 10px;
  font-size: 33px; font-weight: 800; color: #fff;
  line-height: 1.15; letter-spacing: -.035em;
}
.res-chip {
  display: inline-flex; align-items: center; flex: none;
  padding: 4px 10px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-3);
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.res-chip--dark { margin-top: 13px; background: rgba(246, 162, 74, .14); color: var(--amber); }

.res-ins-line { margin: 12px 2px 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); font-weight: 500; }

.res-detail { margin-top: 16px; border-radius: 16px; background: var(--surface); padding: 16px 18px; }
.res-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.res-detail-k { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.res-detail-k em { font-style: normal; font-weight: 600; color: var(--ink-4); }

.res-rows { display: flex; flex-direction: column; gap: 9px; }
.res-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; }
.res-row .l { color: var(--ink-2); font-weight: 600; }
.res-row .v { color: var(--ink); font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }

.res-factors {
  margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.5; color: var(--ink-4); font-weight: 600;
}

.res-note { margin-top: 14px; }
.res-note p { font-size: 11.5px; line-height: 1.6; color: var(--ink-4); font-weight: 500; }
.res-note p + p { margin-top: 5px; }

/* ── 토스트 ────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: calc(36px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  padding: 14px 22px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  max-width: 88vw;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
}
.toast.show { animation: srToast .25s ease both; }

/* ══════════════════════════════════════════════════════════════
   3. 사이트 크롬 — 헤더 / 푸터 / 플로팅
      루트 styles.css:78-88, 242-279 에서 발췌.
      ⚠️ 셸 미디어 쿼리(4·5·6)보다 반드시 앞에 와야 합니다. 미디어 쿼리는
         특이도를 올려주지 않아서, 뒤에 오면 .fab-side{display:flex} 가
         모바일의 display:none 을 이겨 버립니다.
   ══════════════════════════════════════════════════════════════ */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
@media (min-width: 1101px) { .wrap { padding: 0 80px; } }

/* 헤더 */
.hdr {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, .86); backdrop-filter: blur(12px);
  border-bottom: 1px solid #E9EAEB;
}
.hdr-in { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.hdr-logo img { height: 28px; width: auto; }
.hdr-nav { display: flex; gap: 36px; white-space: nowrap; margin-left: auto; margin-right: 8px; }
.hdr-nav a { font-size: 15px; font-weight: 500; color: var(--ink-2); }
.hdr-nav a:hover { color: var(--ink); }

.hdr .btn {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  border-radius: 8px; font-weight: 600; cursor: pointer; transition: background .15s;
}
.hdr .btn-brand {
  height: 44px; padding: 0 18px; font-size: 15px; color: #fff; background: var(--brand);
  box-shadow: 0 1px 2px 0 rgba(10, 13, 18, .05), inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.hdr .btn-brand:hover { background: var(--brand-hover); }
.hdr .dot { width: 7px; height: 7px; border-radius: 9px; background: #fff; }

/* 푸터 */
.foot { background: var(--footer); color: #fff; padding: 72px 0 40px; }
.foot-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(255, 255, 255, .10); }
.foot-logo { height: 30px; width: auto; margin-bottom: 20px; }
.foot-desc { max-width: 380px; font-size: 15px; line-height: 1.7; color: #94979C; font-weight: 500; }
.foot-phone { margin-top: 24px; display: inline-flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; color: var(--brand); letter-spacing: -.01em; }
.foot-phone svg { width: 22px; height: 22px; }
.foot-col h4 { margin-bottom: 16px; font-size: 13px; font-weight: 600; color: var(--ink-4); letter-spacing: .02em; }
.foot-col a { display: block; font-size: 15px; color: #CECFD2; font-weight: 500; margin-bottom: 13px; }
.foot-col a:hover { color: #fff; }
.foot-biz { font-size: 13.5px; line-height: 1.85; color: #94979C; font-weight: 500; }
.foot-bottom { padding-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot-links { display: flex; align-items: center; gap: 20px; font-size: 13.5px; }
.foot-links a { color: #CECFD2; }
.foot-links a:hover { color: #fff; }
.foot-links .sep { width: 1px; height: 12px; background: rgba(255, 255, 255, .18); }
.foot-copy { font-size: 13.5px; color: var(--ink-3); font-weight: 500; }

@media (max-width: 900px) {
  .foot-top { grid-template-columns: 1fr; gap: 32px; }
}

/* 플로팅 */
.fab-side { position: fixed; right: 32px; bottom: 32px; z-index: 40; display: flex; flex-direction: column; gap: 12px; }
.fab-round {
  width: 56px; height: 56px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: #fff;
  box-shadow: 0 8px 20px -6px rgba(10, 13, 18, .34);
}
.fab-round:hover { background: #000; }
.fab-round svg { width: 24px; height: 24px; }

/* ══════════════════════════════════════════════════════════════
   4. 모바일 셸 (<768) — /onboard/ 와 동일한 풀스크린
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  html, body { height: 100%; }
  body { display: flex; justify-content: center; background: var(--bg); }

  .page-main { width: 100%; max-width: 480px; height: 100vh; height: 100dvh; }
  .app { width: 100%; height: 100%; background: #fff; }

  .screen {
    padding: max(14px, env(safe-area-inset-top)) 28px calc(28px + env(safe-area-inset-bottom));
  }
  .screen--intro { padding-top: max(28px, env(safe-area-inset-top)); }
  .screen--calc { padding: 32px 28px; }

  .hdr, .foot, .fab-side, .page-head { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   5. 데스크탑 셸 (≥768) — 헤더/푸터 + 가운데 카드

   카드 높이는 뷰포트에서 크롬(헤더 72 + 상하 패딩 + 페이지 헤드)을 뺀 값으로
   잡습니다. 고정 높이로 두면 1440×900 같은 흔한 화면에서 카드 하단의 기본
   CTA("이 조건으로 기사 부르기")가 접히는 선 아래로 내려갑니다.
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  body { background: var(--soft); }

  .page-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 40px 48px;
  }

  .page-head { max-width: 620px; text-align: center; margin-bottom: 22px; }
  .page-head .eyebrow { font-size: 14px; font-weight: 700; color: var(--brand-600); margin-bottom: 8px; }
  .page-head h1 { font-size: 28px; line-height: 1.28; letter-spacing: -.03em; font-weight: 800; }
  .page-head .lead { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); font-weight: 500; }

  /* --chrome = 헤더 + 상하 패딩 + 페이지 헤드가 차지하는 세로 공간 */
  :root { --chrome: 305px; }

  .app {
    width: 100%;
    max-width: 560px;
    height: clamp(500px, calc(100vh - var(--chrome)), 700px);
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 24px 48px -12px rgba(10, 13, 18, .14), 0 0 0 1px var(--line);
  }

  .screen { padding: 26px 34px 30px; }
  .fab-side { display: none; }
  .toast { bottom: 40px; }

  /* 카드가 모바일보다 넓어서 aspect-ratio:1/1 을 유지하면 2×2 그리드가
     카드 높이를 넘겨 "다음" 버튼이 잘립니다. 남는 세로 공간에 맞춰 늘리도록 전환. */
  /* stretch 라 그리드가 남는 높이를 다 먹으므로 CTA 와 붙지 않게 여백을 둠 */
  .opt-grid { align-content: stretch; grid-auto-rows: minmax(92px, 1fr); gap: 12px; margin-bottom: 16px; }
  .opt-cell { min-height: 0; }
  .opt { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; border-radius: 18px; }
  .opt-ic { width: 40px; height: 40px; }
  .opt-label { font-size: 14.5px; }

  /* 카드 높이가 모바일 풀스크린보다 짧으므로 세로 리듬을 조금 좁힘 */
  .scr-h { margin: 18px 0 5px; font-size: 24px; }
  .scr-sub { margin-bottom: 16px; }
  .picks { gap: 9px; }
  .pick { padding: 14px 17px; }
  .pick-t { font-size: 15.5px; }
  .app .btn-text { height: 46px; }
}

/* ══════════════════════════════════════════════════════════════
   6. 넓은 데스크탑 (≥1024)
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .page-main { padding: 40px 80px 56px; }
  .page-head { margin-bottom: 26px; }
  .page-head h1 { font-size: 32px; }
  :root { --chrome: 345px; }
  .app { max-width: 600px; height: clamp(520px, calc(100vh - var(--chrome)), 720px); }
  .screen { padding: 28px 36px 32px; }
  .fab-side { display: flex; }
}

/* ── 낮은 데스크탑 화면 (노트북 등) ─────────────────────────────
   1440×900 / 1280×800 처럼 흔한 크기에서 페이지 헤드가 카드를 접힘선
   아래로 밀어냅니다. 헤드를 한 줄로 줄여 카드 전체가 화면 안에 들어오게 함. */
@media (min-width: 768px) and (max-height: 940px) {
  .page-head { margin-bottom: 18px; }
  .page-head .eyebrow, .page-head .lead { display: none; }
  .page-head h1 { font-size: 25px; }
  .page-head h1 br { display: none; }
  :root { --chrome: 226px; }
}

/* ══════════════════════════════════════════════════════════════
   7. 키프레임 · 모션 감소
   ══════════════════════════════════════════════════════════════ */
@keyframes srPop {
  0% { transform: scale(.5); opacity: 0; }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes srToast {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes srPulse {
  0% { transform: scale(.92); opacity: .9; }
  100% { transform: scale(1.22); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .track { transition: none; }
  .calc-mark img { animation: none; }
  .calc-mark::after { animation: none; opacity: .35; }
  .calc-line { transition: none; }
  .progress span { transition: none; }
  .toast.show { animation: none; opacity: 1; }
}