/* =========================================================
   「내가 결혼하고 싶어 만든 웨딩플래너」 Design Tokens v0.1
   - Font: Pretendard Variable (jsDelivr dynamic subset)
   - 대비 기준: 본문 텍스트 4.5:1 이상, UI 그래픽 3:1 이상
   ========================================================= */
/* Pretendard Variable v1.3.9 dynamic subset — jsDelivr 원본을 vendor/에 동봉(오프라인·외부요청 0), OFL-1.1 */
@import url("../vendor/pretendard/pretendard-dynamic-subset.css");

:root {
  /* ---------- Color: Base ---------- */
  --bg:            #FBF8F3;  /* warm ivory – 앱 배경 */
  --bg-sunken:     #F4EFE7;  /* 키패드·섹션 바닥 */
  --surface:       #FFFFFF;  /* 카드 */
  --line:          #ECE6DC;  /* 카드 테두리(기본) */
  --line-strong:   #DCD4C7;

  /* ---------- Color: Ink (신뢰감 네이비) ---------- */
  --ink:           #1B2340;  /* 제목·본문  14.6:1 on bg */
  --ink-2:         #4A5168;  /* 보조 본문   7.4:1 */
  --ink-3:         #5F6578;  /* 캡션·힌트 (ivory·sunken·rose-soft 위 4.5:1 이상) */
  --ink-disabled:  #B4B7C2;  /* 비활성 (텍스트 정보 전달 금지) */

  /* ---------- Color: Primary (soft rose / coral) ---------- */
  --primary:        #D23852; /* CTA 배경 – 흰 글자 4.7:1 */
  --primary-press:  #B82E47;
  --primary-strong: #B32A44; /* 밝은 배경 위 강조 텍스트 6.3:1 */
  --primary-soft:   #FDEEF0; /* 선택 카드 배경 */
  --primary-tint:   #F8D5DB; /* 선택 카드 테두리 보조 */
  --blush:          #F6E3DC; /* 일러스트·장식 */

  /* ---------- Color: Gauge (판정) ----------
     fill  = 게이지·도트 등 그래픽 전용
     text  = 라벨 텍스트 전용 (흰/연한 배경 4.5:1 이상)
     soft  = 배지 배경                                   */
  --ok:        #16A34A;  --ok-text:   #13753A;  --ok-soft:   #EAF7EE;  /* 적정 */
  --warn:      #EAB308;  --warn-text: #8A5300;  --warn-soft: #FEF6DC;  /* 조금 높음 */
  --bad:       #DC2626;  --bad-text:  #B91C1C;  --bad-soft:  #FDECEC;  /* 높음 */
  --info:      #2F5BD3;  --info-soft: #EDF2FD;

  /* ---------- Radius ---------- */
  --r-xs: 6px;  --r-sm: 10px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 28px;  --r-pill: 999px;

  /* ---------- Spacing (4pt grid) ---------- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
  --gutter: 20px;          /* 화면 좌우 여백 */
  --tap-min: 44px;         /* 최소 터치 영역 */

  /* ---------- Shadow (따뜻한 잉크 기반, 아주 옅게) ---------- */
  --sh-1: 0 1px 2px rgba(27,35,64,.05), 0 1px 1px rgba(27,35,64,.03);
  --sh-2: 0 4px 14px rgba(27,35,64,.07), 0 1px 3px rgba(27,35,64,.05);
  --sh-3: 0 12px 32px rgba(27,35,64,.10), 0 2px 6px rgba(27,35,64,.06);
  --sh-primary: 0 8px 20px rgba(210,56,82,.28);

  /* ---------- Type scale (Pretendard) ---------- */
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --t-display: 700 32px/1.3 var(--font);  /* 결과 판정 문구 */
  --t-h1:      700 26px/1.38 var(--font); /* 질문 타이틀 */
  --t-h2:      700 20px/1.4 var(--font);
  --t-h3:      650 17px/1.45 var(--font);
  --t-body:    500 16px/1.55 var(--font);
  --t-body-s:  500 14px/1.5 var(--font);
  --t-caption: 500 12.5px/1.45 var(--font);
  --t-num-xl:  750 44px/1.1 var(--font);  /* 키패드 입력 숫자 */
  --ls-tight: -0.02em;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(.2,.8,.2,1);
  --dur: 160ms;
}

/* =================== Base =================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  letter-spacing: var(--ls-tight);
  word-break: keep-all;            /* 한글 단어 단위 줄바꿈 */
  overflow-wrap: anywhere;
  font-feature-settings: "tnum" 0;
}
.num { font-variant-numeric: tabular-nums; }
button { font: inherit; color: inherit; letter-spacing: inherit; }

/* =================== Typography helpers =================== */
.t-display { font: var(--t-display); letter-spacing: -0.03em; }
.t-h1 { font: var(--t-h1); letter-spacing: -0.03em; }
.t-h2 { font: var(--t-h2); letter-spacing: -0.025em; }
.t-h3 { font: var(--t-h3); }
.t-body { font: var(--t-body); }
.t-body-s { font: var(--t-body-s); }
.t-caption { font: var(--t-caption); color: var(--ink-3); }
.t-sub { color: var(--ink-2); }

/* =================== Progress bar =================== */
.progress { display: flex; gap: 4px; padding: 0 var(--gutter); }
.progress__seg { flex: 1; height: 4px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.progress__seg.is-done { background: var(--ink); }
.progress__seg.is-current { background: linear-gradient(90deg, var(--primary) var(--p, 50%), var(--line) 0); }
.progress__label { display: flex; justify-content: space-between; padding: 10px var(--gutter) 0; font: var(--t-caption); color: var(--ink-3); }
.progress__label b { color: var(--primary-strong); font-weight: 700; }

/* =================== Card button (한 화면 한 질문) =================== */
.card-btn {
  position: relative; display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 76px; padding: 16px 18px;
  text-align: left; background: var(--surface);
  border: 1.5px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); cursor: pointer;
  transition: transform var(--dur) var(--ease), border-color var(--dur), background var(--dur), box-shadow var(--dur);
}
.card-btn__icon { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--bg-sunken); color: var(--ink); }
.card-btn__body { flex: 1; min-width: 0; }
.card-btn__title { font: 700 17px/1.4 var(--font); }
.card-btn__desc { font: var(--t-body-s); color: var(--ink-3); margin-top: 2px; }
.card-btn__check { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; color: transparent; }
/* pressed */
.card-btn:active, .card-btn.is-pressed { transform: scale(.98); background: var(--bg-sunken); box-shadow: none; }
/* selected – 색 + 체크 아이콘 + 굵은 테두리 (색만으로 구분하지 않음) */
.card-btn.is-selected, .card-btn[aria-pressed="true"] {
  border: 2px solid var(--primary); padding: 15.5px 17.5px;
  background: var(--primary-soft); box-shadow: 0 0 0 4px rgba(210,56,82,.08);
}
.card-btn.is-selected .card-btn__icon { background: #fff; color: var(--primary-strong); }
.card-btn.is-selected .card-btn__title { color: var(--primary-strong); }
.card-btn.is-selected .card-btn__check { background: var(--primary); border-color: var(--primary); color: #fff; }
.card-btn:focus-visible { outline: 3px solid var(--info); outline-offset: 2px; }

/* =================== Primary CTA =================== */
.cta {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; height: 56px; border: 0; border-radius: var(--r-md);
  background: var(--primary); color: #fff; font: 700 17px/1 var(--font);
  box-shadow: var(--sh-primary); cursor: pointer;
  transition: transform var(--dur) var(--ease), background var(--dur);
}
.cta:active { transform: scale(.98); background: var(--primary-press); }
.cta:disabled { background: var(--line-strong); color: #fff; box-shadow: none; }
.cta--ink { background: var(--ink); box-shadow: 0 8px 20px rgba(27,35,64,.22); }
.cta--ghost { background: transparent; color: var(--ink-2); box-shadow: none; height: 48px; font-weight: 600; font-size: 15px; }
.bottom-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px var(--gutter) 34px; background: linear-gradient(180deg, rgba(251,248,243,0) 0, var(--bg) 22px); }

/* =================== Chips =================== */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px;
  border-radius: var(--r-pill); border: 1.5px solid var(--line); background: var(--surface);
  font: 600 15px/1 var(--font); color: var(--ink-2); white-space: nowrap;
}
.chip.is-selected { border-color: var(--ink); background: var(--ink); color: #fff; }
.chip--sm { height: 28px; padding: 0 10px; font-size: 13px; border-width: 1px; }
.tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--r-xs); font: 700 11.5px/1 var(--font); letter-spacing: 0; }
.tag--sample { background: #EEF0F4; color: var(--ink-2); }      /* '예시' 데이터 라벨 */
.tag--ok   { background: var(--ok-soft);   color: var(--ok-text); }
.tag--warn { background: var(--warn-soft); color: var(--warn-text); }
.tag--bad  { background: var(--bad-soft);  color: var(--bad-text); }
.tag--rose { background: var(--primary-soft); color: var(--primary-strong); }

/* =================== Status pill (판정: 색 + 아이콘 + 텍스트) =================== */
.status { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 8px; border-radius: var(--r-pill); font: 700 13px/1 var(--font); letter-spacing: -0.01em; white-space: nowrap; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status--ok   { background: var(--ok-soft);   color: var(--ok-text); }
.status--warn { background: var(--warn-soft); color: var(--warn-text); }
.status--warn::before { border-radius: 1px; width: 0; height: 0; background: none; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid var(--warn); }
.status--bad  { background: var(--bad-soft);  color: var(--bad-text); }
.status--bad::before { border-radius: 2px; transform: rotate(45deg); width: 7px; height: 7px; background: var(--bad); }

/* =================== Checklist row (추가금) =================== */
.check-row {
  display: flex; align-items: flex-start; gap: 14px; min-height: 64px; padding: 14px 16px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md);
}
.check-row__box { flex: none; width: 26px; height: 26px; margin-top: 1px; border-radius: 8px; border: 1.75px solid var(--line-strong); display: grid; place-items: center; color: transparent; background: #fff; }
.check-row__body { flex: 1; min-width: 0; }
.check-row__title { font: 650 16px/1.4 var(--font); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.check-row__hint { font: var(--t-caption); color: var(--ink-3); margin-top: 2px; }
.check-row.is-checked { border-color: var(--ink); }
.check-row.is-checked .check-row__box { background: var(--ink); border-color: var(--ink); color: #fff; }
.amount-field { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; height: 44px; padding: 0 14px; border-radius: var(--r-sm); background: var(--bg-sunken); font: 700 16px/1 var(--font); }
.amount-field small { font: 500 13px/1 var(--font); color: var(--ink-3); }

/* =================== Gauge (반원 3구간) =================== */
.gauge { position: relative; width: 280px; height: 156px; margin: 0 auto; }
.gauge svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gauge__labels { display: flex; justify-content: space-between; width: 300px; margin: 6px auto 0; font: 600 12.5px/1 var(--font); color: var(--ink-3); }
.gauge__verdict { text-align: center; }

/* =================== Misc =================== */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.divider { height: 1px; background: var(--line); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }