/* 파이낸셜 다이어리 — 디자인 토큰과 공통 컴포넌트 (SPEC §2·§3)
   색·글꼴·간격 값은 이 파일의 :root 에서만 정의한다. 다크모드는 1단계 제외. */

:root {
  /* 색 */
  --c-primary: #0C2340;   /* bluem-partners.com theme-color. 버튼·제목·로고 */
  --c-accent: #2F6FED;    /* 번호 배지·링크 화살표·D-day 배지에만 */
  --c-tint: #EEF3F9;      /* 결과 카드·섹션 배경 */
  --c-ink: #0F1A2B;       /* 본문 */
  --c-muted: #5B6B7F;     /* 라벨·보조 */
  --c-line: #D3DCE8;      /* 테두리·구분선 */
  --c-error: #C94F3D;     /* 입력 오류 전용 */
  --c-kakao: #FEE500;     /* 카카오 버튼 전용 (텍스트 ink) */
  --c-bg-soft: #F5F7FA;   /* 보조 배경 */
  --c-white: #FFFFFF;
  --c-disabled-bg: #E4E9F0;
  --c-disabled-ink: #5B6B7F;

  /* 글꼴 — 웹폰트 없음 */
  --font: 'Pretendard', 'Pretendard Variable', system-ui, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --fs-title: 22px;       /* 페이지 제목 / 700 */
  --fs-figure: 40px;      /* 결과 수치 / 800 — 한 화면 1개 */
  --fs-body: 16px;        /* 본문 16px 이상 */
  --fs-label: 13px;
  --fs-note: 12px;        /* 고지문 — 숨기지 않음 */
  --lh-body: 1.6;

  /* 간격·형태 */
  --gutter: 20px;         /* 콘텐츠 좌우 여백 */
  --gap-chip: 8px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --radius: 6px;
  --touch: 44px;          /* 최소 터치 영역 */
  --max-w: 640px;         /* 데스크톱 중앙 정렬 최대 폭 */
  --header-h: 56px;

  /* 운영자 화면(ops/) 전용 — 판정·하이라이트(SB-12: 1군 빨강, 2군 노랑, 근거 없음 주황) */
  --hl-1: #F6D3CD;
  --hl-2: #FBEFB8;
  --hl-ev: #F9DDBF;
  --c-ok: #2E7D4F;
  --c-warn: #8A6700;
  --c-ev: #B25A12;
}

/* ── 기본 ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--c-primary); }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.page { max-width: var(--max-w); margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.content { flex: 1; padding: var(--sp-5) var(--gutter) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-5); }

/* ── ① 헤더: 흰 배경 + 네이비 텍스트 로고 + 헤어라인 ─── */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-line);
}
.site-header__link {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: var(--header-h); padding: 0 var(--gutter);
  color: var(--c-primary); text-decoration: none;
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
}
.site-header__back { font-size: 20px; line-height: 1; }

/* ── 제목 ───────────────────────────────────────────── */
.page-title { font-size: var(--fs-title); font-weight: 700; line-height: 1.4; color: var(--c-ink); white-space: pre-line; letter-spacing: -0.01em; }
.page-sub { margin-top: var(--sp-2); font-size: 15px; color: var(--c-muted); }

/* ── 입력 필드 ──────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field__label { font-size: var(--fs-label); color: var(--c-muted); }
.field__input {
  width: 100%; min-height: 52px; padding: 0 var(--sp-4);
  border: 1px solid var(--c-line); border-radius: var(--radius);
  background: var(--c-white); font-size: 18px; letter-spacing: 0.02em;
}
.field__input::placeholder { color: var(--c-muted); opacity: 1; }
.field__input:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 2px var(--c-primary); }
.field__input[aria-invalid="true"] { border-color: var(--c-error); }
.field__error { min-height: 0; color: var(--c-error); font-size: 14px; }
.field__error:empty { display: none; }
.field__static {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-height: 52px; padding: 0 var(--sp-2) 0 var(--sp-4);
  border: 1px solid var(--c-line); border-radius: var(--radius);
}

/* ── 버튼 ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 52px; padding: 0 var(--sp-4);
  border: 1px solid transparent; border-radius: var(--radius);
  font-size: var(--fs-body); font-weight: 700; text-decoration: none; cursor: pointer;
}
.btn--primary { background: var(--c-primary); color: var(--c-white); }
.btn--outline { background: var(--c-white); color: var(--c-primary); border-color: var(--c-primary); }
.btn--kakao { background: var(--c-kakao); color: var(--c-ink); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--c-disabled-bg); color: var(--c-disabled-ink); border-color: transparent; cursor: not-allowed; }
.btn--block { width: 100%; }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

/* 보조 CTA: 텍스트 + 화살표 (→ 내부, ↗ 외부) */
.text-link {
  display: inline-flex; align-items: center; min-height: var(--touch);
  padding: 0 var(--sp-1); margin: 0 calc(-1 * var(--sp-1));
  background: none; border: 0; cursor: pointer;
  color: var(--c-primary); font-weight: 700; font-size: 15px; text-decoration: none;
}
.text-link:hover { text-decoration: underline; }

/* ── 카드 ───────────────────────────────────────────── */
.card { background: var(--c-tint); border-radius: var(--radius); padding: var(--sp-4) var(--sp-4); }
.card__title { font-size: var(--fs-body); font-weight: 700; color: var(--c-ink); }
.bullets { margin-top: var(--sp-2); display: flex; flex-direction: column; gap: 2px; }
.bullets li { position: relative; padding-left: 14px; font-size: 15px; color: var(--c-ink); }
.bullets li::before { content: '·'; position: absolute; left: 2px; color: var(--c-muted); }

/* ③ 고지문 — 접지 않는다 */
.disclaimer {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-bg-soft);
  font-size: var(--fs-note); line-height: 1.6; color: var(--c-muted);
}
.notice { font-size: var(--fs-note); line-height: 1.6; color: var(--c-muted); }

/* D-day 배지 (accent) */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 32px; padding: 0 var(--sp-4); border-radius: 999px;
  background: var(--c-accent); color: var(--c-white); font-size: 15px; font-weight: 700;
}

/* 초안 배지 — 운영자 확정 전 데이터 표시 */
.badge--draft { min-height: 24px; padding: 0 var(--sp-2); background: var(--c-white); color: var(--c-error); border: 1px solid var(--c-error); font-size: var(--fs-label); }

/* 칩(단일 선택 라디오) */
.chips { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.chips__grid { display: grid; gap: var(--gap-chip); }
.chips__grid--3 { grid-template-columns: repeat(3, 1fr); }
.chips__grid--2 { grid-template-columns: repeat(2, 1fr); }
.chip { position: relative; display: block; cursor: pointer; }
.chip__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.chip__face { display: flex; align-items: center; justify-content: center; min-height: var(--touch); padding: 0 var(--sp-2); border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-white); color: var(--c-ink); font-size: var(--fs-body); }
.chip__input:checked + .chip__face { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); font-weight: 700; }
.chip__input:focus-visible + .chip__face { outline: 3px solid var(--c-accent); outline-offset: 2px; }

/* 탭 (도구 공통) */
.tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--sp-1); padding: var(--sp-1); background: var(--c-bg-soft); border-radius: var(--radius); }
.tab { min-height: var(--touch); border: 0; border-radius: var(--radius); background: transparent; color: var(--c-muted); font-size: var(--fs-body); cursor: pointer; }
.tab[aria-selected="true"] { background: var(--c-white); color: var(--c-primary); font-weight: 700; box-shadow: 0 1px 2px rgba(15, 26, 43, 0.12); }

/* 체크박스 행 */
.check { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--touch); cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 0; accent-color: var(--c-primary); }

/* 결과 요약 줄 + ⓘ 버튼 (도구 공통) */
.cal-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: 14px; color: var(--c-muted); }
.cal-summary .text-link { font-size: 15px; }
.info-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--touch); height: var(--touch); margin: -10px -8px -10px -4px; border: 0; background: none; color: var(--c-accent); cursor: pointer; }
.info-btn svg { width: 18px; height: 18px; }

/* ⑥ 푸터 */
.site-footer {
  padding: var(--sp-4) var(--gutter) var(--sp-5);
  background: var(--c-bg-soft); border-top: 1px solid var(--c-line);
  font-size: var(--fs-note); color: var(--c-muted); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
}
.site-footer__links { display: flex; gap: var(--sp-4); flex-wrap: wrap; justify-content: center; }
.site-footer a { display: inline-flex; align-items: center; min-height: var(--touch); color: var(--c-muted); font-size: var(--fs-note); }

/* 바텀시트 */
.sheet { border: 0; padding: 0; margin: auto 0 0; width: 100%; max-width: 100%; background: transparent; }
.sheet::backdrop { background: rgba(15, 26, 43, 0.45); }
.sheet__panel {
  max-width: var(--max-w); margin: 0 auto; padding: var(--sp-5) var(--gutter) calc(var(--sp-5) + env(safe-area-inset-bottom));
  background: var(--c-white); border-radius: var(--radius) var(--radius) 0 0;
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.sheet__title { font-size: 18px; font-weight: 700; }
.sheet__panel p { white-space: pre-line; } /* 원문 여러 문장을 줄바꿈으로 구분 */

/* 오프라인 안내 줄 (SB-13) */
.offline-banner { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-bg-soft); font-size: 14px; color: var(--c-ink); }

/* 스켈레톤(로딩 표시 — 스피너 금지) */
.skeleton { background: var(--c-bg-soft); border-radius: var(--radius); }

@media (prefers-reduced-motion: no-preference) {
  .btn, .field__input { transition: background-color .15s, border-color .15s, box-shadow .15s; }
}