/* ─────────────────────────────────────────────
   AMTI 일반인(시니어) 버전 스타일
   따뜻한 크림/베이지 배경 · 큰 글씨 · 넉넉한 여백
   ───────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* 따뜻한 색상 팔레트 */
  --bg:          #FDF8F2;
  --bg-card:     #FFFCF8;
  --bg-muted:    #F5EFE6;
  --border:      #E8DDD0;
  --border-soft: #F0E8DE;

  /* 텍스트 */
  --text:        #2C2118;
  --text-sub:    #6B5A4A;
  --text-muted:  #9A8878;

  /* 강조색 */
  --primary:     #C17A2A;
  --primary-dk:  #9E6018;
  --primary-lt:  #F5E6CC;

  /* 신호등 */
  --fit:         #2E8B57;
  --fit-lt:      #E8F5ED;
  --caution:     #D4A017;
  --caution-lt:  #FFF8E1;
  --risk:        #D4631A;
  --risk-lt:     #FFF0E8;
  --critical:    #C0392B;
  --critical-lt: #FEECEB;

  /* 글씨 크기 (fontScale 1.35 기준) */
  --fs-xs:   15px;
  --fs-sm:   17px;
  --fs-base: 20px;
  --fs-md:   23px;
  --fs-lg:   28px;
  --fs-xl:   34px;
  --fs-2xl:  44px;
  --fs-3xl:  60px;

  /* 간격 */
  --sp-xs: 8px;
  --sp-sm: 14px;
  --sp-md: 24px;
  --sp-lg: 40px;
  --sp-xl: 60px;

  /* 반경 */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
}

html { font-size: var(--fs-base); scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Apple SD Gothic Neo', '맑은 고딕', 'Malgun Gothic', sans-serif;
  line-height: 1.7;
  min-height: 100vh;
}

/* ── 헤더 ── */
.sr-header {
  background: var(--bg-card);
  border-bottom: 2px solid var(--border);
  padding: var(--sp-sm) var(--sp-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
}
.sr-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}
.sr-brand-icon { font-size: 28px; }
.sr-brand-text { display: flex; flex-direction: column; }
.sr-brand-name {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--primary);
  line-height: 1.2;
}
.sr-brand-sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.sr-nav-expert {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-decoration: none;
  border: 1.5px solid var(--border);
  padding: 6px 14px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: background 0.2s;
}
.sr-nav-expert:hover { background: var(--bg-muted); }

/* ── 메인 컨테이너 ── */
.sr-main {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--sp-md);
}

/* ── 스테이지 표시/숨기기 ── */
.sr-stage { display: none; }
.sr-stage[data-active] { display: block; }

/* ── 환영 화면 ── */
.sr-welcome {
  text-align: center;
  padding: var(--sp-xl) var(--sp-md);
}
.sr-welcome-icon {
  font-size: 72px;
  display: block;
  margin-bottom: var(--sp-md);
}
.sr-welcome h1 {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: var(--sp-md);
}
.sr-welcome h1 strong {
  color: var(--primary);
  display: block;
}
.sr-welcome-lede {
  font-size: var(--fs-md);
  color: var(--text-sub);
  margin-bottom: var(--sp-lg);
  line-height: 1.8;
}
.sr-reassure {
  background: var(--fit-lt);
  border: 1.5px solid #A8D5B5;
  border-radius: var(--r-md);
  padding: var(--sp-md) var(--sp-lg);
  font-size: var(--fs-sm);
  color: var(--fit);
  margin-bottom: var(--sp-lg);
  line-height: 1.9;
}
.sr-reassure strong { font-weight: 700; }

/* ── 진행 표시바 ── */
.sr-progress {
  background: var(--bg-muted);
  border-radius: var(--r-lg);
  padding: var(--sp-md) var(--sp-lg);
  margin-bottom: var(--sp-lg);
  display: flex;
  align-items: center;
  gap: var(--sp-md);
}
.sr-progress-track {
  flex: 1;
  height: 10px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
}
.sr-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 99px;
  transition: width 0.4s ease;
}
.sr-progress-label {
  font-size: var(--fs-sm);
  color: var(--text-sub);
  white-space: nowrap;
  font-weight: 600;
}

/* ── 질문 카드 ── */
.sr-question-card {
  background: var(--bg-card);
  border: 2px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-lg);
  margin-bottom: var(--sp-lg);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.sr-question-no {
  font-size: var(--fs-sm);
  color: var(--primary);
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: var(--sp-sm);
}
.sr-question-text {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: var(--sp-xs);
}
.sr-question-hint {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: var(--sp-md);
}

/* ── 범위 버튼 그리드 ── */
.sr-range-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-sm);
}
.sr-range-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  background: var(--bg-muted);
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-md) var(--sp-lg);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  min-height: 64px;
  width: 100%;
}
.sr-range-btn:hover {
  background: var(--primary-lt);
  border-color: var(--primary);
}
.sr-range-btn[data-selected] {
  background: var(--primary-lt);
  border-color: var(--primary);
  color: var(--primary-dk);
}
.sr-range-btn:active { transform: scale(0.98); }
.sr-range-btn .sr-btn-icon { font-size: 28px; flex-shrink: 0; }
.sr-range-btn .sr-btn-label { display: flex; flex-direction: column; gap: 2px; }
.sr-range-btn .sr-btn-main { font-size: var(--fs-md); font-weight: 700; }
.sr-range-btn .sr-btn-sub { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 400; }
.sr-range-btn[data-selected] .sr-btn-sub { color: var(--primary); }

/* ── 시나리오 옵션 버튼 ── */
.sr-scenario-opts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-sm);
}
.sr-opt-btn {
  display: block;
  background: var(--bg-muted);
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-md) var(--sp-lg);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
  line-height: 1.6;
  min-height: 56px;
  width: 100%;
}
.sr-opt-btn:hover {
  background: var(--primary-lt);
  border-color: var(--primary);
}
.sr-opt-btn[data-selected] {
  background: var(--primary-lt);
  border-color: var(--primary);
  color: var(--primary-dk);
  font-weight: 700;
}

/* ── 네비게이션 버튼 ── */
.sr-nav-row {
  display: flex;
  gap: var(--sp-sm);
  justify-content: space-between;
  margin-top: var(--sp-md);
}
.sr-btn-primary {
  flex: 1;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  padding: var(--sp-md) var(--sp-lg);
  font-size: var(--fs-md);
  font-weight: 700;
  cursor: pointer;
  min-height: 60px;
  transition: background 0.2s, transform 0.1s;
}
.sr-btn-primary:hover { background: var(--primary-dk); }
.sr-btn-primary:active { transform: scale(0.98); }
.sr-btn-primary:disabled {
  background: var(--border);
  color: var(--text-muted);
  cursor: not-allowed;
}
.sr-btn-secondary {
  background: var(--bg-muted);
  color: var(--text-sub);
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-md) var(--sp-lg);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  min-height: 60px;
  transition: background 0.2s;
}
.sr-btn-secondary:hover { background: var(--border); }

/* ── 큰 시작 버튼 ── */
.sr-btn-start {
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--r-lg);
  padding: var(--sp-lg) var(--sp-xl);
  font-size: var(--fs-xl);
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
  box-shadow: 0 4px 20px rgba(193,122,42,0.3);
}
.sr-btn-start:hover {
  background: var(--primary-dk);
  box-shadow: 0 6px 28px rgba(193,122,42,0.4);
}
.sr-btn-start:active { transform: scale(0.97); }

/* ── 로딩 스피너 ── */
.sr-loading {
  text-align: center;
  padding: var(--sp-xl);
}
.sr-spinner {
  width: 64px; height: 64px;
  border: 6px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto var(--sp-md);
}
@keyframes spin { to { transform: rotate(360deg); } }
.sr-loading-text {
  font-size: var(--fs-md);
  color: var(--text-sub);
}

/* ── 결과 화면 ── */
.sr-result { padding-bottom: var(--sp-xl); }
.sr-result-hero {
  background: var(--bg-card);
  border: 2px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-lg) var(--sp-lg) var(--sp-xl);
  text-align: center;
  margin-bottom: var(--sp-md);
  box-shadow: 0 2px 16px rgba(0,0,0,0.05);
}
.sr-result-title {
  font-size: var(--fs-md);
  color: var(--text-sub);
  margin-bottom: var(--sp-sm);
}
.sr-ffs-score {
  font-size: var(--fs-3xl);
  font-weight: 900;
  line-height: 1;
  margin-bottom: var(--sp-xs);
}
.sr-ffs-label {
  font-size: var(--fs-xl);
  font-weight: 700;
  margin-bottom: var(--sp-md);
}
.sr-signal-bar {
  display: flex;
  justify-content: center;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-md);
}
.sr-signal-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  opacity: 0.25;
  transition: opacity 0.3s;
}
.sr-signal-dot.on { opacity: 1; }

/* 신호등 색 */
.sr-band-fit    { color: var(--fit);      }
.sr-band-caution{ color: var(--caution);  }
.sr-band-risk   { color: var(--risk);     }
.sr-band-critical{ color: var(--critical); }

.sr-band-bg-fit     { background: var(--fit-lt);      border-color: #A8D5B5; }
.sr-band-bg-caution { background: var(--caution-lt);  border-color: #F5D57A; }
.sr-band-bg-risk    { background: var(--risk-lt);      border-color: #F0B080; }
.sr-band-bg-critical{ background: var(--critical-lt); border-color: #F0A0A0; }

/* ── 핵심 수치 2개 ── */
.sr-money-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-md);
  margin-bottom: var(--sp-md);
}
@media (max-width: 500px) {
  .sr-money-grid { grid-template-columns: 1fr; }
}
.sr-money-card {
  background: var(--bg-card);
  border: 2px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: var(--sp-md);
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.sr-money-icon { font-size: 40px; display: block; margin-bottom: var(--sp-xs); }
.sr-money-label {
  font-size: var(--fs-sm);
  color: var(--text-sub);
  margin-bottom: var(--sp-xs);
  font-weight: 600;
}
.sr-money-amount {
  font-size: var(--fs-xl);
  font-weight: 900;
  color: var(--primary-dk);
  line-height: 1.2;
}
.sr-money-desc {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.5;
}

/* ── 조언 카드 ── */
.sr-advice-card {
  border: 2px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: var(--sp-md) var(--sp-lg);
  margin-bottom: var(--sp-md);
  background: var(--bg-card);
}
.sr-advice-title {
  font-size: var(--fs-md);
  font-weight: 700;
  margin-bottom: var(--sp-sm);
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
}
.sr-advice-text {
  font-size: var(--fs-base);
  color: var(--text-sub);
  line-height: 1.85;
}
.sr-advice-text strong { color: var(--text); }

/* ── 돈 성격 카드 ── */
.sr-type-card {
  background: var(--bg-muted);
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-md) var(--sp-lg);
  margin-bottom: var(--sp-md);
  text-align: center;
}
.sr-type-label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: 6px;
}
.sr-type-name {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--primary-dk);
}

/* ── 인쇄 버튼 ── */
.sr-action-row {
  display: flex;
  gap: var(--sp-sm);
  flex-wrap: wrap;
  margin-top: var(--sp-md);
}
.sr-btn-print {
  flex: 1;
  min-width: 160px;
  background: var(--bg-muted);
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  color: var(--text-sub);
  transition: background 0.2s;
  min-height: 52px;
}
.sr-btn-print:hover { background: var(--border); }
.sr-btn-restart {
  flex: 1;
  min-width: 160px;
  background: var(--primary);
  border: none;
  border-radius: var(--r-md);
  padding: var(--sp-md);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  color: #fff;
  transition: background 0.2s;
  min-height: 52px;
}
.sr-btn-restart:hover { background: var(--primary-dk); }

/* ── 하단 안심 문구 ── */
.sr-footer-note {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: var(--sp-md);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--border-soft);
  line-height: 1.7;
}

/* ── 인쇄 모드 ── */
@media print {
  .sr-header, .sr-btn-print, .sr-btn-restart, .sr-btn-primary,
  .sr-btn-secondary, .sr-progress, .sr-footer-note { display: none !important; }
  body { background: #fff; color: #000; font-size: 14pt; }
  .sr-ffs-score { font-size: 48pt; }
  .sr-ffs-label { font-size: 24pt; }
  .sr-money-amount { font-size: 22pt; }
  .sr-main { max-width: 100%; padding: 0; }
  .sr-stage[data-active] { display: block !important; }
  .sr-result-hero, .sr-money-card, .sr-advice-card { box-shadow: none; border: 1pt solid #ccc; }
}

/* ── 반응형 ── */
@media (max-width: 440px) {
  :root {
    --fs-xl:  28px;
    --fs-2xl: 36px;
    --fs-3xl: 50px;
  }
  .sr-welcome h1 { font-size: var(--fs-xl); }
  .sr-question-text { font-size: var(--fs-md); }
  .sr-range-btn { padding: var(--sp-sm) var(--sp-md); }
  .sr-main { padding: var(--sp-sm); }
}

/* ── 포커스 접근성 ── */
button:focus-visible, a:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}