/* 0.0.5 공개 화면(0.0.5/Frontend-xgboost-public/src/styles.css)의 레이아웃·버튼·간격을 그대로
   가져오고, 색만 공단 웹 CI(루트 DESIGN.md)로 바꿨다.
     --brand      = 공단 웹 헤더 보라 #5A5DBA
     --brand-2    = 그 어두운 단계(hover·press)
     --brand-soft = 보라 틴트 배경
     --accent     = 공단 지도 핀 주황. '사장님' 표시와 원금 상환 구간에만 쓴다.
   구조 규칙(한 줄에 하나인 선택지, 알약형 버튼, 48~58px 터치 높이, 640/344px 분기)은
   0.0.5에서 모바일 개선을 거친 값이라 손대지 않는다. */
/* ---------- 글꼴 ---------- */
/* 두 글꼴을 역할로 나눠 쓴다. 둘 다 **직접 서빙**한다(공단·CDN 자산을 실행 중에 참조하지
   않는다 — 그쪽 경로가 바뀌면 화면 글꼴이 같이 깨진다). 출처·라이선스는 `font/LICENSE.md`.
     제목·강조 = 나눔스퀘어 네오 (공단 웹과 같은 글꼴, 획이 굵고 각져서 제목에서 잘 버틴다)
     본문      = Pretendard    (소상공인365 본문 글꼴, 긴 문장에서 읽기 쉽다)
   굵기는 400/700만 싣고 사이 굵기는 브라우저 합성에 맡긴다(파일이 굵기당 750KB 안팎이다).
   `swap`: 글꼴이 늦게 와도 시스템 글꼴로 먼저 읽히게 한다. */
@font-face {
  font-family: "NanumSquareNeo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./font/NanumSquareNeo-Regular.woff") format("woff");
}
@font-face {
  font-family: "NanumSquareNeo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./font/NanumSquareNeo-Bold.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./font/Pretendard-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./font/Pretendard-Bold.woff2") format("woff2");
}

:root {
  --ink: #3A3A3A;
  --slate: #4A4A4A;
  --muted: #767676;
  --line: #E8E8E8;
  --bg: #FAFAFA;
  --panel: #FFFFFF;
  --brand: #5A5DBA;
  --brand-2: #4A4C99;
  /* --brand-soft는 **작은 요소**(단계 번호 원, 지표 바 트랙)에만 쓴다. 버튼·박스처럼 면적이
     있는 것은 선택 상태여도 채우지 않는다 — 테두리와 글자색으로 표시한다.
     안내문·결과 박스처럼 넓은 면은 --surface-1을 쓴다 — 소상공인365 내비게이션 면 값
     (#F7FAFF)이고, 진한 보라 제목과 함께 두면 배경이 앞으로 튀지 않는다. */
  --brand-soft: #E5E5F4;
  --brand-tint: #F2F2F9;
  --surface-1: #F7FAFF;

  --accent: #F18A00;
  --accent-text: #915300;
  --accent-soft: #FEF3E6;

  /* 상태 색은 글자·배지·테두리에만 쓴다. **면(배경)은 색을 빼고 연보라/그레이로 톤다운**한다
     — 분홍·주황 면이 카드를 지배하면 화면 전체가 경고문처럼 읽힌다. 표면 톤은 소상공인365
     (bigdata.sbiz.or.kr)의 카드 규칙(흰 바탕 + 연보라 테두리 + 아주 옅은 회청색 면)을 참고했다.
     색만으로 구분하지 않는다는 원칙은 그대로다 — 신호등 단어가 항상 함께 나온다. */
  --safe: #1E7B45;
  --safe-bg: #F5F7F9;
  --watch: #8A5A00;
  --watch-bg: #F7F6FA;
  --prep: #B3261E;
  --prep-bg: #F4F4F8;
  /* 면을 톤다운한 대신 상태를 알려주는 얇은 테두리 */
  --safe-edge: #CFE0D6;
  --watch-edge: #DCD7E8;
  --prep-edge: #D8D6E4;

  /* 제목·강조 글자색. 소상공인365 로그인 버튼 색(#2C1163)이다 — 연보라 바탕(--brand-soft)
     위에서도 제목이 또렷하게 읽힌다(대비 12.8:1). 본문 회색과 섞이지 않게 제목에만 쓴다. */
  --head: #2C1163;
  --font-head: "NanumSquareNeo", "Pretendard", -apple-system, "Apple SD Gothic Neo", sans-serif;
  --font-body: "Pretendard", "NanumSquareNeo", -apple-system, "Apple SD Gothic Neo", sans-serif;

  --radius: 14px;
  --shadow: 0 1px 3px rgba(45, 46, 93, 0.06), 0 8px 24px rgba(45, 46, 93, 0.06);
}

* { box-sizing: border-box; }
/* display를 지정한 요소에는 hidden 속성이 먹지 않는다 - 빈 박스가 그려지는 것을 막는다. */
[hidden] { display: none !important; }

/* 모바일 기본기(0.0.5와 동일):
   - text-size-adjust: 아이폰 가로회전 시 글자만 커지는 현상 방지.
   - touch-action/tap-highlight: 안드로이드 크롬의 탭 지연과 파란 하이라이트 제거.
     버튼이 많은 화면이라 이게 없으면 "눌렀는데 반응이 늦다"는 느낌이 남는다. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  /* 일반 텍스트는 Pretendard. **글자 크기·행간은 0.0.5 값 그대로** 둔다(모바일 개선을 거친 값). */
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--slate);
  -webkit-font-smoothing: antialiased;
  /* 한글 어절 단위 줄바꿈 - keep-all 단독 사용(overflow-wrap과 병용 금지). */
  word-break: keep-all;
  font-size: 17.5px;
  line-height: 1.72;
}

/* ---------- 글꼴·색의 역할 분담 ---------- */
/* 제목과 강조는 나눔스퀘어 네오 + 진한 보라(--head), 일반 텍스트는 Pretendard + 회색.
   화면 어디서나 이 두 규칙으로만 정한다 — 카드마다 다르게 잡으면 톤이 흩어진다.
   진한 보라는 소상공인365 로그인 버튼 색으로, 연보라 바탕 위에서도 대비 12.3:1이다
   (이전 헤더 보라 #5A5DBA는 같은 바탕에서 4.54로 제목이 묻혔다). */
h1, h2, h3,
.hero-title, .hero-fund-title, .intro-title, .intro-meta,
.chat-progress, .chat-ask, .chat-answer, .opt-label,
.result-head-title, .block-title, .verdict-badge, .verdict-head, .verdict-line b,
.metric-label, .stat-value, .whatif-text b, .next-title, .next-tel,
.proc-title, .proc-num, .proc-inputs-title, .proc-hi, .fund-label, .fund-name,
.check-title, .control-title, .control-value, .sig-chip, .btn-ghost, .callout b {
  font-family: var(--font-head);
}
h1, h2, h3,
.intro-title, .result-head-title, .block-title, .verdict-head, .next-title,
.proc-title, .proc-inputs-title, .proc-hi, .fund-label, .fund-name, .check-title,
.next-tel, .control-value, .stat-value {
  color: var(--head);
}
/* 강조 텍스트(굵은 글씨)도 같은 규칙을 따른다. 상태색·흰 글자를 쓰는 자리는 아래에서 되돌린다. */
strong, .intro-list b, .intro-caution b, .verdict-line b, .whatif-text b, .callout b {
  font-family: var(--font-head);
}

/* ---------- 히어로 ---------- */
.hero {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  color: #fff;
  padding: 44px 24px 60px;
}
.hero-inner { max-width: 860px; margin: 0 auto; }
/* 보라 바탕 위 글자는 흰색을 유지한다(위 제목 색 규칙을 되돌린다). */
.hero-title, .hero-fund-title { color: #fff; }
.hero-eyebrow {
  display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: 0.04em;
  background: #fff; color: var(--brand); padding: 5px 14px; border-radius: 100px;
  margin-bottom: 14px;
}
.sim-tag {
  display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 100px;
  font-size: 13px; font-weight: 800; background: rgba(58, 58, 58, 0.08);
  color: var(--slate); vertical-align: 2px; white-space: nowrap;
}
/* 히어로는 보라 바탕이라 제목 색을 흰색으로 되돌린다(위 규칙보다 뒤에 와야 한다). */
.hero-title { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 10px; color: #fff; }
.hero-fund-title { color: #fff; }
.hero-sub {
  font-size: 17px; color: rgba(255, 255, 255, 0.92); line-height: 1.7;
  max-width: 620px; margin: 0;
}
.hero-fund {
  margin: 14px 0 14px; padding: 14px 16px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.22);
  max-width: 620px;
}
.hero-fund-title { font-size: 16px; font-weight: 800; color: #fff; margin-bottom: 5px; }
.hero-fund-desc { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.92); }
.hero-fund-list { margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; }
.hero-fund-list > div { display: flex; gap: 8px; align-items: baseline; }
.hero-fund-list dt {
  flex: none; padding: 1px 9px; border-radius: 100px; background: rgba(255, 255, 255, 0.9);
  color: var(--brand); font-size: 13px; font-weight: 800;
}
.hero-fund-list dd { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.95); }

.page { max-width: 860px; margin: -34px auto 60px; padding: 0 20px; }

/* ---------- 카드 ---------- */
.card {
  background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 24px; margin-bottom: 18px;
}

/* ---------- 첫 화면 안내 ---------- */
.intro { background: var(--surface-1); border: 1px solid var(--line); border-radius: 12px; padding: 18px 18px 16px; margin-bottom: 18px; }
.intro-title { font-size: 18px; font-weight: 800; color: var(--head); margin-bottom: 8px; letter-spacing: -0.01em; }
.intro-lead { margin: 0 0 12px; font-size: 16.5px; color: var(--ink); line-height: 1.7; }
.intro-list { margin: 0 0 12px; padding-left: 18px; }
.intro-list li { font-size: 16px; color: var(--ink); margin: 7px 0; line-height: 1.65; }
.intro-list b { color: var(--head); }
.intro-caution { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 15px; color: var(--slate); line-height: 1.65; }
.intro-caution b { color: var(--prep); }   /* 주의 문구는 상태색 유지 */
.intro-meta { margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--muted); }
.intro-compact {
  background: var(--surface-1); border: 1px solid var(--line); border-radius: 100px; padding: 9px 16px;
  font-size: 13.5px; color: var(--slate); margin-bottom: 16px; text-align: center;
}

/* ---------- 대화형 문답 ---------- */
/* 질문은 왼쪽, 사장님 답은 오른쪽 알약. 답한 질문은 흐리게 접혀 위로 쌓인다. */
.chat { padding-bottom: 20px; }
.chat-turn { margin-bottom: 16px; }
.chat-turn.current { border-top: 1px solid var(--line); padding-top: 18px; margin-bottom: 4px; scroll-margin-top: 14px; }
.chat-progress { font-size: 14px; font-weight: 800; color: var(--brand); letter-spacing: 0.04em; margin-bottom: 6px; }
.chat-ask { font-size: 21px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; line-height: 1.45; }
.chat-ask.done { font-size: 15.5px; font-weight: 700; color: var(--muted); }
.chat-hint { font-size: 15.5px; color: var(--muted); margin-top: 7px; line-height: 1.6; }
.chat-answer {
  display: flex; align-items: center; gap: 10px; margin: 6px 0 0 auto;
  padding: 10px 16px; border-radius: 100px 100px 4px 100px;
  border: none; background: var(--brand); color: #fff;
  font-family: inherit; font-size: 16.5px; font-weight: 700; cursor: pointer; min-height: 48px;
}
.chat-answer:hover { background: var(--brand-2); }
/* 잠긴 답(업력 1년 미만의 매출 질문). 누를 수 없으므로 버튼처럼 보이지 않게 둔다. */
.chat-answer.locked { background: var(--brand-soft); color: var(--head); cursor: default; }
.chat-lock { font-size: 12px; font-weight: 700; color: var(--brand-2); opacity: 0.9;
  border-left: 1px solid rgba(0, 0, 0, 0.15); padding-left: 10px; }
.chat-edit {
  font-size: 13px; font-weight: 700; color: #fff; opacity: 0.78;
  border-left: 1px solid rgba(255, 255, 255, 0.45); padding-left: 10px;
}

/* 선택지 - 한 줄에 하나, 손가락으로 누르기 쉬운 크기 */
.opt-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
/* 지역처럼 라벨이 짧고 개수가 많은 질문만 가로로 흘린다(세로로 두면 17줄이 된다). */
.opt-list.wrap { flex-direction: row; flex-wrap: wrap; }
.opt-list.wrap .opt-btn { flex: 0 0 auto; min-width: 92px; align-items: center; }
.opt-btn {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 14px 18px; border-radius: 12px; border: 2px solid var(--line);
  background: #fff; cursor: pointer; font-family: inherit; min-height: 58px;
  transition: border-color 0.15s, background 0.15s;
}
.opt-btn:hover { border-color: var(--brand-2); }
/* 선택된 버튼은 **면을 채우지 않고** 테두리(2px 보라)와 라벨 색으로 표시한다. 진한 틴트로
   채우면 '바꾸기'로 되돌아왔을 때 그 버튼만 화면에서 튀어 보인다. */
.opt-btn.active { border-color: var(--brand); background: var(--surface-1); }
.opt-btn.skip { border-style: dashed; }
.opt-label { font-size: 18px; font-weight: 800; color: var(--ink); }
.opt-btn.active .opt-label { color: var(--head); }
.opt-desc { font-size: 14.5px; color: var(--muted); line-height: 1.5; }
/* 업종은 43개라 목록 버튼으로 두면 화면을 다 잡아먹는다 - 같은 생김새의 선택 상자로 둔다. */
select.opt-btn { font-size: 17px; font-weight: 700; color: var(--ink); min-height: 58px; width: 100%; }

/* ---------- 공용 버튼 ---------- */
.btn-ghost {
  padding: 14px 22px; border-radius: 100px; border: 2px solid var(--line); cursor: pointer;
  background: #fff; color: var(--slate); font-family: inherit;
  font-size: 16.5px; font-weight: 700; min-height: 54px;
}
.btn-ghost:hover { border-color: var(--brand-2); color: var(--brand); }
.btn-ghost.small { min-height: 48px; padding: 11px 16px; font-size: 15.5px; }
.btn-ghost.small.active { border-color: var(--brand); background: var(--surface-1); color: var(--head); }
.restart-row { display: flex; justify-content: center; margin: 0 0 18px; }

/* ---------- 결과 ---------- */
.result-head { margin-bottom: 18px; }
.result-head-title { font-size: 21px; font-weight: 800; color: var(--head); letter-spacing: -0.01em; }
.result-head-sub { font-size: 15.5px; color: var(--muted); margin-top: 3px; }
.result-block { margin-bottom: 20px; }
.block-title { font-size: 17px; font-weight: 800; color: var(--head); margin-bottom: 10px; }
.note-line { font-size: 14.5px; color: var(--muted); margin: 12px 0; line-height: 1.65; }

.sig-chip { display: inline-flex; align-items: center; padding: 4px 13px; border-radius: 100px; font-size: 15px; font-weight: 800; white-space: nowrap; }
.sig-chip { border: 1px solid var(--line); }
.sig-chip.sig-safe { background: var(--safe-bg); color: var(--safe); border-color: var(--safe-edge); }
.sig-chip.sig-watch { background: var(--watch-bg); color: var(--watch); border-color: var(--watch-edge); }
.sig-chip.sig-manage { background: var(--prep-bg); color: var(--prep); border-color: var(--prep-edge); }

/* 등급 카드. 왼쪽 색상 띠(border-left 4px)는 뺐다 — 색 띠로 상태를 알리는 관행이 화면 전체
   톤과 맞지 않았다. 색은 배지 하나에만 남기고, 배지와 제목을 한 줄에 둔다. */
.verdict {
  border-radius: 12px; padding: 18px 20px; margin-bottom: 20px;
  border: 1px solid var(--line);
}
.verdict.sig-safe { background: var(--safe-bg); border-color: var(--safe-edge); }
.verdict.sig-watch { background: var(--watch-bg); border-color: var(--watch-edge); }
.verdict.sig-manage { background: var(--prep-bg); border-color: var(--prep-edge); }
/* 등급 배지와 판정문을 **한 문장처럼** 잇는다. flex + wrap 이던 때는 좁은 화면에서 배지가
   혼자 한 줄을 차지해 실제보다 크게 보였다(단계 머리에서 고친 것과 같은 문제). */
.verdict-line-head { display: block; }
.verdict-line-head .verdict-head { display: inline; }
/* 판정 배지는 상태색 바탕 + 흰 글자다. */
.verdict-badge { color: #fff !important; }
.verdict-badge { display: inline-block; padding: 4px 12px; border-radius: 100px; font-size: 15px;
  font-weight: 800; color: #fff; white-space: nowrap; margin-right: 8px; vertical-align: 2px; }
.verdict.sig-safe .verdict-badge { background: var(--safe); }
.verdict.sig-watch .verdict-badge { background: var(--watch); }
.verdict.sig-manage .verdict-badge { background: var(--prep); }
.verdict-head { font-family: var(--font-head); font-size: 19px; font-weight: 800; color: var(--head); }
.verdict-line { font-size: 17px; color: var(--ink); line-height: 1.65; }
.verdict-line b { font-size: 19px; }
.verdict.sig-safe .verdict-line b { color: var(--safe); }
.verdict.sig-watch .verdict-line b { color: var(--watch); }
.verdict.sig-manage .verdict-line b { color: var(--prep); }
.verdict-fine { font-size: 14px; color: var(--muted); margin-top: 10px; line-height: 1.6; }

/* 내 위치 바 */
.pos-wrap { padding: 18px 6px 0; }
/* **왼쪽이 준비 필요, 오른쪽이 안전**이다. 아래 지표별 막대와 방향을 맞췄다 — 한 화면에서
   축 방향이 서로 다르면 사장님이 매번 범례를 다시 읽어야 한다(0.0.5는 왼쪽이 안전이었다). */
.pos-bar { position: relative; height: 12px; border-radius: 100px; background: linear-gradient(90deg, var(--prep) 0%, #B8A23A 45%, var(--safe) 100%); }
.pos-marker { position: absolute; top: -7px; transform: translateX(-50%); text-align: center; }
.pos-marker-dot { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 5px solid var(--ink); margin: 0 auto; }
.pos-marker-label { font-size: 13.5px; font-weight: 800; color: var(--ink); margin-top: 3px; white-space: nowrap; }
.pos-marker.at-left .pos-marker-label { transform: translateX(calc(50% - 13px)); }
.pos-marker.at-right .pos-marker-label { transform: translateX(calc(-50% + 13px)); }
.pos-ends { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); margin-top: 30px; }

/* 지표별 위치 - 위 위치 바와 같은 문법(오른쪽이 안전한 쪽)으로 둔다. */
.metric { margin-top: 16px; }
.metric-label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 15.5px; color: var(--ink); font-weight: 700; }
/* 지표 라벨 안의 '같은 업종 중간 …'은 본문 글꼴로 되돌린다. 제목 글꼴을 400으로 쓰면
   나눔 Regular(726KB)를 통째로 더 받게 되는데, 이 한 줄 때문에 받을 이유가 없다. */
.metric-peer { font-size: 14px; font-weight: 400; color: var(--muted); font-family: var(--font-body); }
.metric-track { position: relative; height: 10px; border-radius: 100px; background: var(--brand-soft); margin-top: 8px; }
.metric-me { position: absolute; top: -4px; width: 6px; height: 18px; border-radius: 3px; background: var(--accent); }
.metric-mid { position: absolute; top: -1px; width: 2px; height: 12px; background: var(--muted); }
.metric-ends { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--muted); margin-top: 8px; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--muted); margin-top: 12px; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* 단계 머리 — **태그를 제목 문장 안에 흐르게 둔다.**
   flex + wrap 이던 때는 태그와 제목이 별개 덩어리라, 제목이 길면 통째로 다음 줄로 내려갔다.
   그래서 1·3단계는 "태그 / 제목" 두 줄, 2단계는 "태그 제목" 한 줄에 'AI 예측' 태그만 내려가
   단계마다 모양이 달랐다(모바일 375px). 인라인으로 두면 한 문장처럼 이어지고 줄바꿈도
   글자 단위로 일어난다. */
.step-line { display: block; }
.step-line .result-head-title { display: inline; }
.step-no {
  display: inline-block; font-size: 13px; font-weight: 800; color: #fff; background: var(--brand);
  border-radius: 100px; padding: 3px 11px; margin-right: 8px; vertical-align: 2px;
  white-space: nowrap;
}

/* 기여도 비중 — 무엇이 등급을 얼마나 움직였는지 숫자로 */
.share-group { padding: 14px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); }
.share-group.down { background: var(--prep-bg); border-color: var(--prep-edge); }
.share-group.up { background: var(--safe-bg); border-color: var(--safe-edge); }
.share-title { font-family: var(--font-head); font-size: 15px; font-weight: 800; margin-bottom: 10px; }
.share-title.down { color: var(--prep); }
.share-title.up { color: var(--safe); }
/* 두 묶음을 **카드형 2열**로 둔다. `align-items: stretch`(그리드 기본)라 두 카드의 높이가
   더 긴 쪽에 맞춰진다 — 항목 수가 다를 때 한쪽만 짧아 보이지 않는다. 좁은 화면에서는 한 열. */
.shares { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 20px; }
@media (min-width: 720px) { .shares { grid-template-columns: repeat(2, 1fr); } }
.share-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.share-label { font-size: 16px; font-weight: 700; color: var(--ink); }
.share-value { display: inline-flex; align-items: baseline; gap: 8px; }
.share-tag { font-size: 12.5px; font-weight: 800; padding: 2px 9px; border-radius: 100px; }
.share-tag.up { background: var(--safe-bg); color: var(--safe); border: 1px solid var(--safe-edge); }
.share-tag.down { background: var(--prep-bg); color: var(--prep); border: 1px solid var(--prep-edge); }
.share-num { font-size: 17px; font-weight: 800; color: var(--ink); min-width: 42px; text-align: right; }
.share-track { height: 10px; border-radius: 100px; background: var(--brand-soft); margin-top: 6px; overflow: hidden; }
.share-fill { height: 100%; border-radius: 100px; }
.share-row.up .share-fill { background: var(--safe); }
.share-row.down .share-fill { background: var(--prep); }

/* 잘한 점 / 보완점 */
.factor-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.factor-col { border-radius: 12px; padding: 16px 18px; border: 1px solid var(--line); }
.factor-col.good { background: var(--safe-bg); border-color: var(--safe-edge); }
.factor-col.bad { background: var(--watch-bg); border-color: var(--watch-edge); }
.factor-col.good .block-title { color: var(--safe); }
.factor-col.bad .block-title { color: var(--watch); }
.factor-col ul { margin: 0; padding-left: 18px; }
.factor-col li { font-size: 16px; color: var(--ink); margin: 8px 0; line-height: 1.6; }

/* 만약에 */
.whatif-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.whatif-result { margin-top: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 10px; background: var(--surface-1); border: 1px solid var(--line); }
.whatif-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.whatif-arrow { font-weight: 800; color: var(--muted); }
.whatif-same { font-size: 14px; font-weight: 700; color: var(--muted); }
.whatif-text { font-size: 16px; color: var(--ink); line-height: 1.65; }
.whatif-result .btn-ghost.small { background: #fff; }

/* 다음 행동 */
.next-action { border: 2px solid var(--brand); border-radius: 12px; padding: 18px 20px; background: #fff; }
.next-title { font-size: 18px; font-weight: 800; color: var(--head); margin-bottom: 6px; }
.next-body { font-size: 16px; color: var(--ink); line-height: 1.65; }
.next-contact { margin-top: 14px; padding: 13px 15px; border-radius: 10px; background: var(--surface-1); border: 1px solid var(--line); color: var(--ink); font-size: 15.5px; line-height: 1.65; }
.next-tel { font-weight: 800; color: var(--head); white-space: nowrap; font-family: var(--font-head); }


/* ---------- 우리 동네·같은 업종 ---------- */
.local { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; }
/* 시도 지도. 진하기는 비중의 상대값(--tone)이고, 우리 동네는 색만으로 구분하지 않게
   테두리와 '우리 동네' 라벨을 함께 둔다. */
.korea-map { width: 100%; max-width: 300px; height: auto; display: block; margin: 0 auto 10px; }
.kr-region { fill: var(--brand); fill-opacity: var(--tone, 0.2); stroke: #fff; stroke-width: 2;
  cursor: pointer; transition: fill-opacity 120ms; }
/* **채움은 건드리지 않는다.** `:hover { fill-opacity: 1 }` 로 진하게 덮고 있었는데, 그러면
   그 칸의 진하기(=대출이 많은 순서)가 사라진다. 게다가 터치 기기에서는 탭 뒤에도 hover 가
   남아 "가장 진한 보라색으로 덮인" 상태로 보였다(2026-08-23 피드백). 강조는 **선(테두리)으로만**
   한다 — 마우스가 있는 기기에서만 hover 를 건다. */
@media (hover: hover) {
  .kr-region:hover { stroke: var(--head); stroke-width: 2.5; }
}
.kr-region:focus-visible { outline: none; stroke: var(--head); stroke-width: 3; }
.kr-region.me { fill: var(--accent); }
/* 고른 지역: 굵은 테두리 + 살짝 띄우기. 채움은 그 지역의 톤 그대로다. */
.kr-region.picked { stroke: var(--head); stroke-width: 3.5; paint-order: stroke;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); }

/* 지도 설명 묶음 — 줄이 여럿이라 카드로 묶고 글씨를 작게 둔다(본문보다 한 단계 아래). */
.map-guide { padding: 10px 12px; border-radius: 10px; background: var(--surface-1);
  border: 1px solid var(--line); margin: 4px 0 10px; }
.map-guide-line { font-size: 13px; color: var(--muted); line-height: 1.6; }
.map-guide-line + .map-guide-line { margin-top: 2px; }

/* 2행 2열: 지도가 왼쪽 두 행을 차지하고 오른쪽에 우리 지역(위)·비교 지역(아래)이 온다.
   **좁은 화면에서도 이 배치를 유지한다** — 세로로 쌓으면 지역을 눌러도 바뀐 값이 화면 밖에
   있어 보이지 않는다. 대신 지도를 줄인다. */
.local-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  grid-template-rows: auto auto; gap: 10px; align-items: start; margin: 4px 0 12px; }
.local-grid .map { grid-row: 1 / 3; }
.korea-map { width: 100%; max-width: 260px; height: auto; display: block; margin: 0 auto; }

.region-card { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel); }
.region-card.mine { background: var(--accent-soft); border-color: var(--accent); }
.region-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.region-name { font-family: var(--font-head); font-size: 16px; font-weight: 800; color: var(--head); }
.region-tag { font-size: 12px; font-weight: 700; color: var(--brand-2);
  background: var(--brand-tint); border-radius: 999px; padding: 2px 8px; }
.region-line { display: flex; justify-content: space-between; gap: 10px; font-size: 14px;
  padding: 3px 0; }
.region-label { color: var(--muted); }
.region-value { color: var(--ink); font-weight: 700; text-align: right; }
.map-mine-tag { font-size: 12px; font-weight: 700; color: var(--accent-text);
  background: #fff; border-radius: 999px; padding: 2px 8px; }

/* ---------- 상환 부담 ---------- */
.control { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.control-title { font-size: 15.5px; font-weight: 800; color: var(--ink); flex: 0 0 84px; }
.control input[type="range"] { flex: 1 1 220px; accent-color: var(--brand); height: 28px; }
.control-value { font-size: 17px; font-weight: 800; color: var(--brand); min-width: 96px; }
.calendar { display: flex; gap: 3px; align-items: flex-end; height: 140px; margin-top: 14px; }
.cal-col { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.cal-principal { background: var(--accent); border-radius: 3px 3px 0 0; }
.cal-interest { background: var(--brand); opacity: 0.35; }
/* 원금 개시 안내: 면은 톤다운하고 주황은 왼쪽 테두리와 굵은 숫자에만 남긴다. */
/* 결론 박스. 왼쪽 색상 띠는 쓰지 않는다 — 등급 카드와 같은 이유로 화면 전체 톤과 맞지
   않는다. 강조는 배경과 굵은 숫자로만 한다. */
.callout { margin-top: 14px; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--brand-tint); font-size: 16px; color: var(--ink); line-height: 1.65; }
.callout b { color: var(--accent-text); }

/* ---------- 신청 자격 ---------- */
.check { list-style: none; margin: 0; padding: 0; }
.check li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.check li:first-child { border-top: none; padding-top: 2px; }
.check-mark { flex: none; width: 26px; height: 26px; border-radius: 50%; font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.check-mark.ok { background: var(--safe-bg); color: var(--safe); border: 1px solid var(--safe-edge); }
.check-mark.no { background: var(--prep-bg); color: var(--prep); border: 1px solid var(--prep-edge); }
.check-mark.ask { background: var(--watch-bg); color: var(--watch); border: 1px solid var(--watch-edge); }
.check-title { font-size: 16.5px; font-weight: 700; color: var(--head); }
.check-detail { font-size: 15px; color: var(--slate); line-height: 1.6; margin-top: 2px; }

/* 자격 미달로 문답을 멈춘 안내. 색만으로 구분하지 않고 ✗와 문구를 함께 둔다. */
.gate-card { border-color: var(--prep-edge); background: var(--prep-bg); }
.gate-title { font-family: var(--font-head); font-size: 18px; font-weight: 800; color: var(--head); margin-bottom: 12px; }
.gate-row { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }

/* 받으려는 원금 — 카드 자체가 선택 컨트롤이다. 선택은 테두리·글자와 '선택' 표시로 알리고
   면을 채우지 않는다(브랜드 톤 규칙). 모바일에서는 한 줄에 하나씩 쌓인다. */
.amount-list { display: grid; gap: 8px; margin: 4px 0 10px; }
/* 설명이 한 줄 문장이라 좁은 폭에서 3열로 쪼개면 줄이 잘게 끊긴다. 넉넉할 때만 3열. */
@media (min-width: 900px) { .amount-list { grid-template-columns: repeat(3, 1fr); } }
.amount-card { text-align: left; width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel); cursor: pointer;
  font-family: var(--font-body); transition: border-color 120ms, box-shadow 120ms; }
.amount-card:hover { border-color: var(--brand); }
.amount-card.active { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.amount-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.amount-short { font-family: var(--font-head); font-weight: 800; font-size: 15px; color: var(--head); }
.amount-value { font-family: var(--font-head); font-weight: 800; font-size: 17px; color: var(--ink); }
.amount-flag { font-size: 12px; font-weight: 700; color: var(--brand);
  border: 1px solid var(--brand-soft); border-radius: 999px; padding: 1px 7px; }
.amount-desc { font-size: 14.5px; color: var(--slate); margin-top: 5px; line-height: 1.5; }
.amount-burden { font-size: 13.5px; color: var(--muted); margin-top: 3px; }

/* 문제 발생 시점 곡선. 선이 그려지는 동안만 움직이고, 이후에는 정적으로 읽힌다.
   prefers-reduced-motion에서는 JS가 애니메이션을 걸지 않는다. */
.timing-svg { width: 100%; height: auto; display: block; margin: 2px 0 8px; }
.timing-grid { stroke: var(--line); stroke-width: 1; }
.timing-tick { font-size: 11px; fill: var(--muted); font-family: var(--font-body); }
.timing-tick.end { text-anchor: end; }
.timing-tick.mid { text-anchor: middle; }
.timing-axis-title { font-size: 11.5px; fill: var(--muted); font-family: var(--font-body); }
.timing-line { fill: none; stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: var(--len, none); stroke-dashoffset: 0;
  animation: timing-draw 1500ms cubic-bezier(.25,.6,.3,1) both; }
@keyframes timing-draw { from { stroke-dashoffset: var(--len, 0); } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .timing-line { animation: none; stroke-dasharray: none; }
}
.timing-line.industry { stroke: var(--brand); }
/* 전체 곡선은 비교 기준선이므로 점선으로 두고 그리기 애니메이션을 걸지 않는다.
   (점선 패턴과 그리기용 dasharray는 같은 속성을 써서 함께 쓸 수 없다.) */
.timing-line.overall { stroke: #A9A9B4; stroke-width: 1.6;
  stroke-dasharray: 5 5; animation: none; }
.timing-mark { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 3; }
.timing-mark-label { font-size: 11.5px; fill: var(--accent-text); font-family: var(--font-body); }
.timing-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 2px 0 6px; font-size: 14px; color: var(--slate); }
.timing-key { display: inline-flex; align-items: center; gap: 6px; }
.timing-swatch { width: 18px; height: 3px; border-radius: 2px; }
/* 범례 견본도 선 모양을 그대로 흉내낸다 — 점선을 실선 견본으로 두면 그래프와 짝이 안 맞는다. */
.timing-swatch.overall { border-radius: 0;
  background: repeating-linear-gradient(90deg, #A9A9B4 0 5px, transparent 5px 10px); }
.timing-swatch.industry { background: var(--brand); }


/* 연체 단계 띠. 문장 대신 기간만 보여준다. */
/* 세 칸의 **높이를 같게** 맞춘다 — 좁은 화면에서 '원금 상환 개시 1~6개월'처럼 이름이 두 줄로
   접히면 그 칸만 길어져 배수 비교가 아니라 칸 크기가 눈에 들어온다.
   `align-items: stretch`로 가장 큰 칸에 맞추고, 이름 자리를 아래로 밀어 막대를 같은
   높이에 둔다(`margin-top: auto`). */
.stage-strip { display: flex; gap: 6px; margin: 4px 0 10px; overflow-x: auto; align-items: stretch; }
.stage-cell { flex: 1 1 0; min-width: 82px; padding: 10px 8px; border-radius: 8px; background: var(--surface-1); border: 1px solid var(--line); text-align: center; display: flex; flex-direction: column; }
.stage-cell.last { background: var(--prep-bg); border-color: var(--prep-edge); }
.stage-days { font-family: var(--font-head); font-size: 15px; font-weight: 800; color: var(--head); margin-top: 4px; }
/* 상환 개시 구간별 월평균 위험률 막대. 세 값의 차이가 소수점만으로는 안 읽혀서 같이 그린다. */
.hazard-bar { margin-top: 7px; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.hazard-fill { height: 100%; border-radius: 3px; background: var(--muted); }
.hazard-fill.peak { background: var(--watch); }
.stage-name { font-size: 13px; color: var(--slate); margin-top: 0; line-height: 1.4; flex: 1 1 auto; }
.proc-share { font-size: 13.5px; font-weight: 600; color: var(--muted); margin-left: 8px; }

/* ---------- 신청 절차 안내(직접대출) ---------- */
.proc-list { list-style: none; margin: 0; padding: 0; }
.proc-step { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.proc-step:first-child { border-top: none; padding-top: 4px; }
.proc-num {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand); font-weight: 800; font-size: 15px;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.proc-body { flex: 1; min-width: 0; }
.proc-title { font-size: 17px; font-weight: 800; color: var(--head); }
.proc-desc { font-size: 15.5px; color: var(--slate); line-height: 1.65; margin-top: 3px; }
.proc-tip { margin-top: 9px; padding: 11px 13px; border-radius: 10px; background: var(--brand-tint); border: 1px solid var(--watch-edge); color: var(--ink); font-size: 15px; line-height: 1.6; }
.proc-tip-label { display: inline-block; margin-right: 5px; padding: 1px 9px; border-radius: 100px; background: var(--watch); color: #fff; font-size: 12.5px; font-weight: 800; vertical-align: 1px; white-space: nowrap; }
.proc-cautions { margin: 9px 0 0; padding-left: 20px; }
.proc-cautions li { font-size: 15.5px; color: var(--ink); line-height: 1.6; margin: 5px 0; }
.proc-hi { font-style: normal; font-weight: 800; color: var(--head); font-family: var(--font-head); }
.proc-carry { margin-top: 9px; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--primary-100, var(--brand-soft)); background: var(--surface-1); font-size: 15px; color: var(--ink); line-height: 1.6; }
.proc-inputs { margin-top: 10px; }
.proc-inputs ul { background: var(--surface-1); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px 10px 30px; }
.proc-inputs-title { font-size: 15px; font-weight: 800; color: var(--head); }
.proc-inputs ul { margin: 5px 0 0; padding-left: 20px; }
.proc-inputs li { font-size: 15px; color: var(--slate); line-height: 1.6; margin: 4px 0; }
.proc-inputs li b { color: var(--ink); }
.fund-label { font-size: 15px; font-weight: 800; color: var(--head); margin-bottom: 2px; }
/* "안심이 되려면?" — 축별 최소 변경. 단계가 적은 것이 위에 온다. */
.path-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px; }
.path-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel); }
.path-label { font-size: 15.5px; color: var(--ink); font-weight: 600; }
.path-target { display: inline-block; margin-left: 8px; font-size: 13.5px; font-weight: 700;
  color: var(--brand-2); background: var(--brand-tint); border-radius: 999px; padding: 2px 9px; }
.path-arrow { display: inline-flex; align-items: center; gap: 8px; }

/* 자금 카드 — 2행 2열. 좁은 화면에서는 한 줄에 하나로 쌓인다. */
.track-grid { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 4px 0 10px; }
@media (min-width: 720px) { .track-grid { grid-template-columns: repeat(2, 1fr); } }
.track { padding: 13px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); }
.track--out { opacity: 0.55; }
.track__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.track__name { font-family: var(--font-head); font-weight: 800; font-size: 16px; color: var(--head); }
.track__flag { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 1px 8px; }
.track__flag.ok { background: var(--safe-bg); color: var(--safe); border: 1px solid var(--safe-edge); }
.track__flag.ask { background: var(--watch-bg); color: var(--watch); border: 1px solid var(--watch-edge); }
.track__flag.no { background: var(--prep-bg); color: var(--prep); border: 1px solid var(--prep-edge); }
.track__when { font-size: 14px; color: var(--slate); margin-top: 6px; line-height: 1.55; }
.track__terms { font-family: var(--font-head); font-weight: 700; font-size: 14.5px; color: var(--ink); margin-top: 6px; }
.track__reason { font-size: 13.5px; color: var(--muted); margin-top: 5px; line-height: 1.5; }

.fund-table { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.fund-row { padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.fund-name { font-size: 15.5px; font-weight: 800; color: var(--head); }
.fund-when { font-size: 14px; color: var(--muted); margin-top: 1px; }
.fund-terms { font-size: 15px; color: var(--ink); font-weight: 700; margin-top: 4px; }

/* ---------- 기타 ---------- */
.error { background: var(--prep-bg); color: var(--prep); border-radius: 10px; padding: 14px 18px; font-size: 16px; margin-bottom: 18px; }
.error-line { margin-bottom: 10px; }
.share-name { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; min-width: 0; }
.share-assumed { font-size: 12.5px; font-weight: 500; color: var(--muted); opacity: 0.85;
  white-space: nowrap; }   /* 제목 옆 한 줄에 둔다 — 접히면 항목 이름과 떨어져 읽힌다 */
.block-note { font-size: 14.5px; color: var(--muted); margin: -4px 0 12px; }
.callout-sub { margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.footer { max-width: 860px; margin: 0 auto; padding: 0 20px 48px; font-size: 14px; color: var(--muted); line-height: 1.75; }

/* ---------- 모바일 (0.0.5 값 그대로) ---------- */
@media (max-width: 640px) {
  body { font-size: 17px; }
  .hero { padding: 28px 18px 48px; }
  .hero-title { font-size: 26px; }
  .hero-sub { font-size: 15.5px; }
  .hero-fund { padding: 13px 14px; margin: 12px 0; }
  .hero-fund-title { font-size: 15px; }
  .hero-fund-desc { font-size: 14.5px; }
  .hero-fund-list dd { font-size: 14px; }
  /* 보라 바탕 위 글자는 흰색을 유지한다(위 제목 색 규칙을 되돌린다). */
.hero-title, .hero-fund-title { color: #fff; }
.hero-eyebrow { font-size: 13px; padding: 5px 13px; margin-bottom: 12px; }
  .page { padding: 0 12px; }
  .card { padding: 18px 16px; }

  .intro { padding: 16px 15px 14px; }
  .intro-title { font-size: 17px; }
  .intro-lead { font-size: 16px; }
  .intro-list li { font-size: 15.5px; }
  .intro-caution { font-size: 14.5px; }
  .intro-compact { border-radius: 12px; font-size: 13px; }

  .chat-ask { font-size: 19.5px; }
  .chat-ask.done { font-size: 15px; }
  .opt-btn { min-height: 56px; padding: 14px 15px; }
  .opt-label { font-size: 17px; }
  .chat-answer { font-size: 16px; padding: 11px 15px; max-width: 100%; }

  .result-head-title { font-size: 19.5px; }
  /* 375px에서 '2단계 상환 위험을 진단합니다 AI 예측'이 9px 넘쳐 태그만 접혔다(실측:
     필요 328px / 가능 319px). 태그를 조금 줄여 한 줄에 들어오게 한다. */
  .step-no { padding: 3px 9px; margin-right: 6px; }
  .sim-tag { font-size: 12px; padding: 2px 8px; margin-left: 6px; }
  .factor-cols { grid-template-columns: 1fr; }
  .factor-col { padding: 14px 16px; }
  .verdict { flex-direction: column; gap: 10px; padding: 18px 16px; }
  /* 배지를 키우지 않는다 — 제목과 같은 줄에 있어야 무슨 카드인지 한눈에 읽힌다. */
  .verdict-badge { padding: 3px 10px; font-size: 14px; margin-right: 6px; }
  .verdict-head { font-size: 18px; }
  .verdict-line { font-size: 16.5px; }

  .pos-wrap { padding: 16px 2px 0; }
  .pos-marker-label { font-size: 13px; }
  .whatif-btns { flex-direction: column; }
  .btn-ghost.small { width: 100%; }
  /* 배치(2행 2열)는 유지하고 지도와 글자만 줄인다. */
  .korea-map { max-width: 150px; }
  .local-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 8px; }
  .region-card { padding: 10px 11px; }
  .region-name { font-size: 14.5px; }
  .region-line { font-size: 12.5px; }
  .map-guide { padding: 9px 10px; }
  .map-guide-line { font-size: 12px; }
  /* 거치기간처럼 선택지가 짧은 묶음은 모바일에서도 한 행에 나란히 둔다 — 세로로 쌓으면
     "0개월 / 12개월 / 24개월"이 서로 다른 항목처럼 보인다. 라벨만 윗줄로 내린다. */
  .control-title { flex: 1 1 100%; }
  .btn-ghost.small.tight { width: auto; flex: 1 1 0; min-width: 0; padding: 11px 4px; font-size: 15px; }
  .whatif-result { padding: 12px 14px; }
  .restart-row .btn-ghost { width: 100%; }
  .proc-step { gap: 10px; }
  .proc-num { width: 26px; height: 26px; font-size: 14px; }
  .proc-title { font-size: 16.5px; }
  .proc-desc { font-size: 15px; }
  .proc-tip { font-size: 14.5px; }
  .proc-cautions li { font-size: 15px; }
  .proc-carry { font-size: 14.5px; }
  .proc-inputs li { font-size: 14.5px; }
  .footer { padding: 0 14px 40px; }

  /* 새로 붙은 카드도 같은 원칙(좌우 스크롤 0, 한 화면에 한 덩어리) */
  .local { grid-template-columns: 1fr; }
  .control-title { flex: 0 0 100%; }
  .trend { gap: 14px; }
  .trend-bar { width: 38px; }
}

@media (max-width: 344px) {
  .chat-ask { font-size: 18px; }
  .hero-title { font-size: 23px; }
}

/* 결과 계산 중 안내. 처음 계산에만 쓰고, 다시 계산할 때는 `.recomputing`으로 이전 결과를
   흐리게 둔다(있던 내용이 사라졌다 나타나면 더 불안하다). */
.loading-card { display: flex; align-items: center; gap: 14px; }
.loading-spin { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--head); animation: loading-turn 800ms linear infinite; }
@keyframes loading-turn { to { transform: rotate(360deg); } }
.loading-title { font-family: var(--font-head); font-size: 17px; font-weight: 800; color: var(--head); }
.loading-sub { font-size: 14.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; }
#result.recomputing { opacity: 0.55; transition: opacity 120ms ease; }
@media (prefers-reduced-motion: reduce) {
  .loading-spin { animation: none; }
}