/* ============================================================
   report.css — v8 건강리포트 이식본 (ai_health_report_print_v8.css)
   측정이력 > 상세리포트 탭에서 <link> 로 로드. 루트는 반드시 <div class="report">.

   이식 원칙
   - 셀렉터·시각 값(색·폰트·간격·라운드·그림자)은 v8 원본 그대로 유지
   - 모든 규칙을 `.report` 하위로 스코프 (다른 페이지로 스타일이 새지 않게)
   - v8 의 :root 토큰은 .report 스코프 변수로 이동
     (--line/--text/--blue/--purple 이 global.css 토큰과 이름이 겹침 → 리포트 안에서만 유효)
   - 원격 폰트 CDN 로드(pretendard)는 제거. 폰트는 시스템 스택 폴백
   - 추가한 것은 파일 하단 [반응형 보완] 구역뿐. 기존 값은 건드리지 않음

   폰트 규칙(R4)
   - v8 원본 clamp() 는 시각 값 보존을 위해 원형(vw 단독형) 그대로 둔다.
     예: clamp(11.5px, .87vw, 13px) → 1322px 이하 11.5px, 1494px 이상 13px
   - 이 파일에서 새로 추가하는 font-size 만 calc 가변식 + 기준 주석으로 쓴다.
   - [R4 예외 5건] v8 원본이 고정 px 로 둔 아래 선언은 시각 값 보존을 위해 그대로 둔다.
     clamp 로 바꾸면 폭에 따라 크기가 달라져 v8 과 결과가 달라지므로 임의 변경 금지.
       .subsection-index 11px
       .risk-card-icon 15px / .risk-score 9px / .risk-next span 8.5px
     (2026-08-18: .risk-card-stage span · .interpretation-index 는 해당 UI 가 사라져 목록에서 뺐다.
      새로 들어온 .rsb-step / .rsb-tail 은 clamp 가변식이라 이 예외 목록 대상이 아니다.)
     (이 요소들은 .page 의 zoom 배율로 함께 확대되므로 실사용상 문제 없음)

   구역 지도
   00. 루트 스코프 & v8 토큰
   01~35. v8 컴포넌트 (원본 순서 유지)
   M1~M5. 반응형 / 인쇄 (v8 원본)
          M1~M4 는 화면 전용(`@media screen and …`) — 인쇄 뷰포트가 A4 폭 793.7px 라
          폭 조건만 쓰면 인쇄에도 걸려 모바일 축소본이 인쇄된다.
          M5(인쇄)는 zoom 을 1 로 되돌려 "A4 한 장 = .page 한 개"를 유지한다.
   S1~S13. [반응형 보완] design-css 추가분
          (S7 = grid/flex 아이템 축소 허용, S8 = 상태 스트립 항목 수 무관 꽉 채우기,
           S9 = 화면 연속 문서 — 페이지 회색 카드 제거·라인 구분,
           S10 = 인쇄 압축(--print-scale·지면 여백), S11 = 전체 스케일 축소 기록,
           S12 = 측정값 확인 안내·추가 관리 항목,
           S13 = 지표 결과 카드 머리줄(아이콘/제목/배지)·혈압 카드 통합,
           S14 = 지면 글자 하한(본문 9pt) — **파일 맨 끝이어야 한다, 옮기지 말 것**)

   [2026-08-16 굵기 상한 700] 사용자 지시로 강조용 font-weight 는 700 을 넘지 않는다.
   새 규칙을 쓸 때도 800/900 을 쓰지 말 것. 이 파일에 남은 800/900 은 아래 5곳뿐이며
   전부 "문서 최상위 제목" 또는 "등급·단계 표시"라 예외로 남긴 것이다.
     .title-wrap h1 800        리포트 대제목("AI 건강리포트")
     .score-text .grade 800    종합 등급 문구("주의")
     .current-stage-badge 900  "현재 종합 3단계 · 주의"  (.continuation-badge 는 700 으로 되돌림)

   [2026-08-16 전체 스케일 축소] 여백·아이콘·고정 높이·글자를 한 단계씩 낮춰
   인쇄를 3장에서 2장으로 줄였다. 값을 그 자리에서 고쳤으므로 아래 "v8 원본 그대로"라는
   설명은 색·구조에만 해당한다 — 크기 값은 v8 과 다르다. 무엇을 얼마나 줄였는지는
   파일 끝 S11 주석에 정리돼 있다.
   ============================================================ */


/* ===== 00. 루트 스코프 & v8 토큰 ===== */
.report {
  /* v8 :root 토큰 (스코프 이동, 값 동일) */
  --bg: #eef3f8;
  --paper: #f4f7fb;
  --card: #ffffff;
  --line: #dadeeb;
  --text: #12233f;
  --muted: #69788e;
  --blue: #0f4fa1;
  --blue2: #1d67d4;
  --navy: #0b3177;
  --sky: #eaf4ff;
  --green: #5faf46;
  --greenbg: #edf7e9;
  --yellow: #da9b00;
  --yellowbg: #fff5d7;
  --orange: #ea6c32;
  --red: #d94545;
  --redbg: #ffe6e6;
  --purple: #8a5ada;
  --purplebg: #f0e8ff;
  --teal: #46a6b7;
  --tealbg: #e6f7fb;
  /* [2026-08-18 사용자 지시] 리포트에서 **그림자를 전부 없앤다**(화면·인쇄 모두).
     선언은 지웠지만 토큰은 none 으로 남긴다 — .report 안에 main.css 규칙으로 그려지는
     요소가 var(--shadow) 를 참조하면 바깥(:root) 값이 살아나 그림자가 되살아난다.
     여기서 none 으로 덮어 두면 리포트 안쪽에서는 어떤 경로로도 그림자가 생기지 않는다.
     카드 구분은 그림자 대신 **테두리 한 단계 진하게**(#b9c3d9)로 유지한다 — 지면에서
     이미 쓰던 방식과 같은 값이라 화면과 지면의 카드 인상이 오히려 하나로 맞춰졌다. */
  --shadow: none;

  /* ---- 판정 게이지 / 위험점수 막대 세그먼트 색 (2026-08-14 도입, 2026-08-16 블루 계열 개정) ----
     [2026-08-16 사용자 지시] "낮음·중간 단계는 같은 블루 톤으로, 높은 단계는 주황→적색."
     → 안전한 두 단계(0·1)를 한 색상(블루, 명도만 다름)으로 묶어 "괜찮음"을 한눈에 읽히게 하고,
       경고 두 단계(2·3)는 종전처럼 따뜻한 색(주황→적색)으로 남겨 방향(파랑=좋음 / 빨강=위험)을 만든다.

     흑백 인쇄 대응 명도 램프는 그대로 유지한다 — "좋음일수록 밝고, 위험할수록 어둡다".
     L* 는 CIE 명도(0=검정 100=흰색), gray 는 실제 grayscale 변환 후의 8bit 밝기.
     인접 단계 차가 17 L* 이상이라 색이 빠진 흑백 출력에서도 네 단계가 서로 구분된다.
       --seg-0  #D9E6F7  L* 90.8  gray 229  정상 / 좋음 / 표준     (아주 옅은 블루)
       --seg-1  #8DB4E2  L* 72.1  gray 177  경계 / 관찰 / 낮음     (중간 명도 블루)   ΔL* 18.7
       --seg-2  #C96A1E  L* 54.9  gray 131  위험 / 주의 / 높음     (짙은 주황)        ΔL* 17.2
       --seg-3  #A02C22  L* 36.7  gray  86  매우 위험 / 집중관리   (어두운 적색)      ΔL* 18.2
     세그먼트 아래 라벨(.legend)도 같은 계열의 진한 변형(-ink)을 쓴다.
     주의: --seg-2-ink 는 실천 우선도 "높음" 뱃지(.prio-level.is-high)와 공유하는 주황 잉크다. */
  /* [2026-08-17 감사 minor] --seg-0 이 #D9E6F7(L* 90.8, 흰 배경 대비 1.18:1)이라
     정상 구간이 "빈 막대"로 보였다 — 옅은 색이 곧 "값이 없다"로 읽히는 자리다.
     #C6DAF3(L* 86.1, 대비 1.37:1)로 한 단계 내렸다. 흑백 명도 램프는 그대로 유지된다
     (ΔL* 0→1 14.0 / 1→2 17.2 / 2→3 18.2 — 네 단계가 여전히 서로 구분된다). */
  --seg-0: #c6daf3;
  --seg-1: #8db4e2;
  --seg-2: #c96a1e;
  /* [2026-08-18 사용자 지시 "너무 진해, 빨간색으로 안 보여"] #a02c22(L* 36.7, 갈색빛 딥레드)
     → #c62f21: 명도는 조금만 올리고(L* 44) **채도를 크게 올려** 화면에서 선명한 빨강으로
     읽히게 했다. 흑백 명도 램프는 gray 131(주황) ↔ 91(적)로 40계조 차가 남아 구분 유지. */
  --seg-3: #c62f21;
  --seg-0-ink: #2b6bb0;
  --seg-1-ink: #1b4c8f;
  --seg-2-ink: #9d5a12;
  --seg-3-ink: #741c1c;

  /* ---- 종합점수 링 / 등급 문구 색 (2026-08-16) ----
     링은 면적이 작아 세그먼트용 옅은 색으로는 보이지 않는다 → 같은 색상(hue) 계열의
     채도 높은 변형을 단계별로 따로 둔다. 값은 흰 배경 대비 3:1 이상이라 링 옆
     등급 문구(.score-text .grade)에도 그대로 쓴다.
       --ring-1 #2F7AD1 정상    (블루,      대비 4.35)
       --ring-2 #17458A 관찰    (짙은 블루, 대비 9.31)
       --ring-3 #D2691E 주의    (주황,      대비 3.63)
       --ring-4 #C0392B 집중관리 (적색,      대비 5.44)
     링은 한 번에 한 색만 칠해지므로 흑백 단계 구분 대상이 아니다(가운데에 점수 숫자가 있다). */
  --ring-1: #2f7ad1;
  --ring-2: #17458a;
  --ring-3: #d2691e;
  --ring-4: #c0392b;
  --ring-track: #e8edf5;

  /* 현재 값 마커 — 어느 세그먼트 위에 와도 대비가 유지되도록 진한 남색 고정 */
  --marker-ink: #17233d;

  /* [2026-08-27 3차] 2차에서 두었던 --marker-pin(녹색 #22945a)은 지웠다 — 위험점수 막대의
     위치 표시가 녹색 지도핀에서 **흰 원 + 잉크 테두리**(아래 .score-arrow)로 바뀌면서 쓰는
     곳이 없어졌다. 리포트의 마커 색은 다시 --marker-ink 한 벌이다. */

  /* 세그먼트 사이 간격 — **JS(parts.jsx segLeft)와 공유하는 단 하나의 정본**.
     마커 좌표를 트랙 전폭 % 로만 계산하면 gap 누적만큼 어긋나 경계값에서 화살표가
     옆 칸에 앉는다(2026-08-17 감사 major). JS 는 calc() 안에서 이 변수를 그대로 참조하므로
     여기 값만 고치면 막대와 마커가 함께 움직인다 — 두 벌이 되지 않는다. */
  --seg-gap: 2px;

  /* 혈압 분류 그래프의 세로축(이완기) 폭 — 가로축 눈금 칸도 같은 값으로 들여쓴다 */
  --bp-yaxis-w: 26px;

  /* ---- 카드 안쪽 여백 사다리 (2026-08-18 사용자 지시 "9px → 15px, 다른 카드도 같은 배율") ----
     [무엇] 리포트 카드류의 안쪽 여백을 화면에서 **일괄 ×5/3** 로 넓힌다. 기준점은 사용자가
       직접 지정한 9px → 15px 이고, 8px·7px·10px … 도 같은 배율을 그대로 받는다
       (8→13 · 7→12 · 10→17 · 11→18 · 6→10 · 5→8 · 12→20). 카드마다 배율이 달라지면
       지금까지 맞춰 둔 카드 사이의 여백 위계가 흐트러진다.
     [왜 변수인가] 같은 배율을 30곳 가까이에 손으로 적으면 다음에 한 번 더 바꿀 때 반드시
       빠지는 곳이 생긴다. **옛 값을 이름으로 삼아**(--pad-9 = 9px 이던 자리) 어디가 무엇에서
       왔는지 파일만 보고 되짚을 수 있게 둔다.
     [반응형] 390px 에서 15px 는 카드 폭의 8% 를 여백으로 먹어 값이 두 줄로 꺾인다.
       clamp 로 **390px → 옛 값 +1px, 1366px 이상 → 목표값**이 되게 이었다
       (예: --pad-9 는 390px 10px / 1366px 15px). 좁은 화면일수록 종전에 가깝다.
     [인쇄 제외] 지면은 A4 3쪽이 하드 조건이라 이 확대를 받지 않는다. @media print 블록이
       모든 카드 여백을 종전 값으로 그대로 다시 못박는다(S10 · S15 · 아래 "화면 확대 차단").
       ※ 새 카드에 이 변수를 쓸 때는 인쇄 고정도 같이 넣을 것 — 안 넣으면 지면으로 새어 나간다. */
  --pad-5: clamp(6px, calc(5.2px + .205vw), 8px);
  --pad-6: clamp(7px, calc(5.8px + .307vw), 10px);
  --pad-7: clamp(8px, calc(6.4px + .41vw), 12px);
  --pad-8: clamp(9px, calc(7.4px + .41vw), 13px);
  --pad-9: clamp(10px, calc(8px + .512vw), 15px);
  --pad-10: clamp(11px, calc(8.6px + .615vw), 17px);
  --pad-11: clamp(12px, calc(9.6px + .615vw), 18px);
  --pad-12: clamp(13px, calc(10.2px + .717vw), 20px);

  /* v8 .report 원본 */
  width: min(1500px, 100%);
  max-width: 1500px;
  margin: 0 auto;
  background: transparent;

  /* v8 html,body 선언을 .report 로 이관 */
  color: var(--text);
  font-family: 'Pretendard', 'Pretendard Variable', system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif;
  font-size: clamp(11.5px, .87vw, 13px);
  /* v8 원본값 유지: 1322px 이하→11.5px, 1494px 이상→13px */
  line-height: 1.3;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.report * {
  box-sizing: border-box;
}

/* 리포트를 단독 페이지로 띄울 때만 v8 의 바깥 배경(#dfe6ef)을 재현한다.
   앱 셸 안(측정이력 탭)에서는 앱 배경을 그대로 쓴다. */
.report.is-standalone {
  background: #dfe6ef;
}

/* ===== 01. 페이지 프레임 ===== */

.report .page {
  position: relative;
  width: 100%;
  max-width: 943.4px;
  zoom: 1.59;
  padding: 10.8mm;
  background: linear-gradient(180deg, #f5f8fd 0%, #eef4fa 30%, #e9eff7 100%);
  margin-bottom: 80px;
  border-radius: 24px;
  overflow: hidden;
}

.report .page:last-child {
  page-break-after: auto;
  margin-bottom: 0;
}


/* ===== 02. 리포트 헤더 / 메타 ===== */

.report .header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
}

.report .eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #d2e4ff;
  color: var(--blue);
  font-size: clamp(10px, .73vw, 11px);
  font-weight: 700;
  letter-spacing: .05em;
  margin-bottom: 6px;
}

.report .title-wrap h1 {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #101827;
}

.report .title-wrap h1 .ai {
  color: var(--blue2);
}

.report .subtitle {
  margin-top: 4px;
  font-size: clamp(10.5px, .87vw, 12.5px);
  font-weight: 600;
  color: #576882;
}

/* [2026-08-21 사용자 지시] 이름을 왼쪽 열로 — 좌: 이름(세로 중앙) / 우: 정보 목록.
   종전에는 이름과 정보가 한 줄씩 세로로 쌓여 카드가 길쭉했다. 두 열로 나누면
   높이가 정보 줄 수(2~3줄)만으로 정해지고, 이름이 값들과 다른 축에 서서 먼저 읽힌다. */
.report .meta {
  display: flex;
  align-items: center;
  gap: var(--pad-9);
  min-width: 190px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: var(--pad-7) var(--pad-9);
}

.report .meta .name {
  flex: 0 0 auto;
  /* 이름과 정보 사이의 경계 — 테두리와 같은 선을 세로로 한 번만 쓴다(색면 추가 없음) */
  padding-right: var(--pad-9);
  border-right: 1px solid var(--line);
  font-size: clamp(15.5px, 1.27vw, 19px);
  font-weight: 700;
  color: #0b2454;
  letter-spacing: -.04em;
  word-break: keep-all;
}

/* 정보 목록 — 남는 폭을 쓰고, 좁아지면 줄 안에서 접힌다(.meta .row flex-wrap, M3) */
.report .meta .meta-rows {
  flex: 1 1 auto;
  min-width: 0;
}

/* 첫 줄 위 여백은 이름 열과 높이를 맞추기 위해 뺀다 */
.report .meta .meta-rows .row:first-child {
  margin-top: 0;
}

.report .meta .row {
  display: flex;
  justify-content: space-between;
  gap: 35px;
  margin-top: 4px;
  font-size: clamp(10px, .73vw, 11px);
  font-weight: 500;
  color: #56657b;
}


/* ===== 03. 8종 상태 요약 스트립 ===== */

.report .summary-strip {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  overflow: hidden;
}

.report .status-item {
  position: relative;
  padding: var(--pad-8) var(--pad-5) var(--pad-7);
  text-align: center;
  border-right: 1px solid var(--line);
}

.report .status-item:last-child {
  border-right: 0;
}

.report .status-icon {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  font-size: clamp(16px, 1.8vw, 26px);
  border: 1px solid #d7e2ef;
  background: #f4f8fe;
}

.report .status-item .label {
  font-size: clamp(11.5px, .87vw, 15px);
  font-weight: 700;
  color: #1d2e47;
  letter-spacing: -.03em;
}

.report .status-item .state {
  margin-top: 2px;
  font-size: clamp(9.5px, .67vw, 12.5px);
  font-weight: 700;
  color: #66758c;
}

.report .status-item.ok .state,
.report .status-item.info .state {
  color: var(--blue2);
}

.report .status-item.danger .state,
.report .status-item.warn .state,
.report .status-item.balance .state,
.report .status-item.sensory .state,
.report .status-item.neuro .state {
  color: var(--red);
}

.report .status-item.danger .status-icon {
  background: var(--redbg);
  border-color: #f0c6c6;
}

.report .status-item.warn .status-icon {
  background: var(--yellowbg);
  border-color: #f1dea7;
}

.report .status-item.ok .status-icon {
  background: var(--greenbg);
  border-color: #cde8c5;
}

.report .status-item.info .status-icon {
  background: #edf5ff;
  border-color: #d5e5ff;
}

.report .status-item.neuro .status-icon {
  background: var(--purplebg);
  border-color: #dfd0ff;
}

.report .status-item.balance .status-icon {
  background: #eef4ff;
  border-color: #d7e4ff;
}

.report .face-badge {
  position: absolute;
  right: -12px;
  bottom: -5px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(12px, 1vw, 18px);
  border: 2px solid #fff;
}

.report .face-badge.good {
  background: #dff1dc;
}

.report .face-badge.mid {
  background: #fff0c8;
}

.report .face-badge.bad {
  background: #ffd8d8;
}

.report .face-badge.neuro {
  background: #eadfff;
}

.report .status-item.sensory .status-icon {
  background: #e9f8ef;
  border-color: #cfe7d6;
}


/* ----- 미측정 항목 (계약 §5-4, 2026-08-17) -----
   state "none" 은 판정을 하지 않은 항목이다. 종전에는 이 값이 FACE 맵에 없어 ok 로 떨어져
   초록 배경 + 😊 로 그려졌다 — 재지도 않은 혈당·BMI가 "정상"으로 보이던 자리다.
   좋고 나쁨이 아니므로 색을 빼고(회색 계열) 표정도 무표정한 가로줄(–)로 바꾼다.
   회색은 "빠진 자리"로 읽혀야 하므로 라벨까지 흐리게 하지는 않는다(항목 이름은 그대로 진하게). */
.report .status-item.none .status-icon {
  background: #f1f3f6;
  border-color: #dfe4ea;
  filter: grayscale(1);
  opacity: .78;
}

.report .status-item.none .state {
  color: #8794a5;
}

.report .face-badge.none {
  background: #e6eaef;
  color: #7d8899;
  font-size: clamp(11px, .9vw, 13px);
  font-weight: 700;
  line-height: 1;
}

/* 문진 응답으로 판정한 항목 표식 (status_items[].source === "survey").
   판정 문구 앞 인라인 칩 — 줄을 새로 만들지 않아 스트립 높이가 그대로다(인쇄 2쪽 예산).
   "AI 분석" 류의 새 라벨이 아니라 근거 출처만 밝히는 최소 표시다. */
.report .status-item .src-tag {
  display: inline-block;
  margin-right: 3px;
  padding: 0 3px;
  border-radius: 4px;
  background: #eef2f8;
  color: #6b7c92;
  font-size: .88em;
  font-weight: 700;
  vertical-align: 1px;
}


/* ===== 04. 혈압 분류 그래프 =====
   [2026-08-16] 분류 그래프가 자기 패널을 갖지 않고 "혈압 결과" 카드의 오른쪽 영역이 되었다
   (S13 참조). 패널 전용이던 `.bp-class-card`(padding:0 / overflow:hidden)와 그 안쪽 제목
   패딩 규칙은 쓰이는 곳이 없어져 삭제했고, .bp-class-wrap 의 바깥 패딩도 걷어냈다 —
   이제 바깥 여백은 감싸는 .panel 이 준다. */

.report .bp-class-wrap {
  padding: 0;
}

/* [2026-08-17 감사 major] 세로축이 없어 "이완기 90 ↑" 가 가로축 줄에 얹혀 있었다 —
   가로축에 있으면서 세로를 뜻하는 라벨이라 읽는 사람이 축을 잘못 짚는다.
   세로축(이완기)을 왼쪽에 실제 칸으로 두고, 가로축 눈금은 그 폭만큼 들여쓴다. */
.report .bp-chart {
  display: grid;
  grid-template-columns: var(--bp-yaxis-w, 26px) minmax(0, 1fr);
  align-items: stretch;
}

.report .bp-yaxis {
  position: relative;
  font-size: clamp(9px, .68vw, 10px);
  font-weight: 700;
  color: #63738a;
}

/* 눈금은 띠 경계(top %)에 맞춰 절대배치한다 — 균등 배치하면 값과 무관해진다 */
.report .bp-ytick {
  position: absolute;
  right: 4px;
  transform: translateY(-50%);
  line-height: 1;
}

.report .bp-axis-name {
  color: #4a5c74;
}

/* 축 이름은 눈금이 없는 **아래쪽** 빈 구간에 세로로 세운다 —
   위쪽에 두면 가장 높은 눈금(이완기 100)과 겹친다(실측). */
.report .bp-yaxis .bp-axis-name {
  position: absolute;
  bottom: 2px;
  right: 3px;
  writing-mode: vertical-rl;
  letter-spacing: -.05em;
}

.report .bp-class-grid {
  position: relative;
  height: 142px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #d7deea;
  background: #fff;
}

/* 띠 개수는 서버 구간 수를 따른다(--bp-bands, JSX 인라인 = 기하값) */
.report .bp-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  font-size: clamp(11.5px, .87vw, 13px);
  font-weight: 700;
  color: #fff;
  height: calc(100% / var(--bp-bands, 4));
  white-space: nowrap;
}

/* 띠끼리 붙어 보이지 않게 얇은 흰 선 하나 — 인접한 두 구간의 색이 같아도 경계가 남는다 */
.report .bp-zone+.bp-zone {
  /* [2026-08-18] inset 그림자 → 실제 경계선. 띠와 띠 사이를 가르는 밝은 선이다. */
  border-top: 1px solid rgba(255, 255, 255, .55);
}

/* ----- 구간 라벨을 점의 반대쪽 끝으로 (2026-08-16 사용자 지시) -----
   [문제] 현재값 말풍선이 점(.dot) 바로 옆에 붙어 있고 구간 라벨은 띠 한가운데라, 수축기 130
   처럼 가운데쯤에 점이 오면 흰 말풍선이 "2단계 고혈압" 글자를 덮어 둘 다 못 읽었다.
   [해법] 라벨과 점을 서로 반대쪽 끝에 둔다: 점이 왼쪽 절반이면 라벨은 오른쪽, 오른쪽 절반이면 왼쪽.
   (말풍선은 2026-08-16 에 카드 제목줄로 뺐다가, 2026-08-17 사용자 지시로 점 **위**로 되돌렸다.
    세로로 쌓이므로 라벨과는 가로로 겹치지 않는다 — .bp-marker 참조.)
   판정은 JSX 가 .labels-left / .labels-right 로 준다. 점의 지름은 띠 폭의 10% 미만이라
   "반대쪽 끝"이면 어떤 값에서도 라벨과 겹치지 않는다(수축기 90~200 전 구간 실측).
   측정값이 없으면 클래스가 붙지 않아 라벨은 종전처럼 가운데 정렬로 남는다. */
.report .bp-class-grid.labels-left .bp-zone {
  justify-content: flex-start;
}

.report .bp-class-grid.labels-right .bp-zone {
  justify-content: flex-end;
}

/* 띠 색 — 좋은 쪽(b0)에서 나쁜 쪽(b4)으로 가는 5단계 램프. JSX 가 구간 순서대로 b0~b4.
   [2026-08-18 재조정 2회] ① b0 그린↔b1 황록이 같은 톤으로 보임(사용자) ② 노랑으로 가른 뒤
   흑백에서 정상(b0 gray 157)이 주의혈압(노랑 gray 189)보다 **더 진하게** 찍힘(사용자).
   색상환 순서(연두→노랑→주황→진주황→빨강)를 지키면서 **명도를 단조 감소**로 다시 짰다:
     b0 #b2e07c gray 199 · b1 #d4c526 gray 183 · b2 #ec9720 gray 163
     b3 #e56a35 gray 137 · b4 #d73939 gray 104  (인접 차 16 이상)
   b0~b2 는 밝아서 흰 글자가 안 읽힌다 — 진한 잉크로 갈고, b3~b4 만 흰 글자 유지. */
.report .bp-zone.b0 {
  background: #b2e07c;
  color: #2c4a10;
}

.report .bp-zone.b1 {
  background: #d4c526;
  color: #33400a;
}

.report .bp-zone.b2 {
  background: #ec9720;
  color: #4d2f00;
}

.report .bp-zone.b3 {
  background: #e56a35;
}

.report .bp-zone.b4 {
  background: #d73939;
}

/* [2026-08-17 사용자 지시] 현재값 알약을 점 바로 위로 되돌렸다(제목줄 → 마커 위).
   [중요] 마커 박스에는 **점만** 넣는다(18×18). 알약을 flex 흐름에 같이 넣었더니
   translate(-50%,-50%) 가 "알약+점" 전체를 중앙 정렬해 **점이 10px 밀리면서**
   이완기 82~85·96~99 구간에서 한 칸 아래 띠에 찍히고, 최상단에서는 점이 잘렸다(QA 실측).
   알약은 점 기준 absolute 로 띄워야 점 좌표가 top%/left% 그대로 유지된다. */
.report .bp-marker {
  position: absolute;
  left: 70%;
  top: 22%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* 현재값 알약 — 점 기준 absolute. 기본은 점 위, is-below 면 점 아래.
   좌우는 점 중앙 정렬이되, 그리드가 overflow:hidden 이라 양 끝에서는 잘린다 →
   JSX 가 bubble-left/right 로 기준점을 옮겨 카드 안에 머물게 한다.
   점과 같은 빨강이라 한 쌍으로 읽히고, 테두리는 흑백 인쇄용(배경이 회색으로 찍혀도 경계 유지).
   [2026-08-18] 오전에 지웠다가 같은 날 사용자 최종 결정으로 되살렸다 — 종전 스크린샷이
   정본이고, 점 + 수치 알약이 이 리포트의 "지금 여기" 표기 방식이다. 그림자는 쓰지 않는다
   (같은 날 "리포트 그림자 전부 삭제" 지시 — 이 알약은 원래도 테두리로만 그렸다). */
.report .bp-bubble {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1.5px solid #c33a3a;
  border-radius: 999px;
  padding: 2px 8px;
  color: #c33a3a;
  font-size: clamp(9.5px, .7vw, 10.5px);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
  white-space: nowrap;
}

/* 최상단 띠에 점이 놓이면 위로 띄울 자리가 없다 — 알약을 점 아래로 뒤집는다 */
.report .bp-marker.is-below .bp-bubble {
  bottom: auto;
  top: calc(100% + 4px);
}

/* 양 끝 — 중앙 정렬이면 알약 절반이 카드 밖으로 나가 잘린다. 기준점을 점의 좌/우로 옮긴다 */
.report .bp-marker.bubble-left .bp-bubble {
  left: -2px;
  transform: none;
}

.report .bp-marker.bubble-right .bp-bubble {
  left: auto;
  right: -2px;
  transform: none;
}

/* 점 — 흰 속 + 진한 테두리(과녁)라 어떤 띠 색 위에 놓여도 흑백 인쇄에서 형태가 산다.
   바깥 흰 링은 outline 이다(2026-08-18 그림자 삭제 지시 — 종전에는 box-shadow 였다). */
.report .bp-marker .dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 5px solid #660404;
  /* [2026-08-18 사용자 지시 "리포트 그림자 전부 삭제"] 흰 링을 box-shadow 로 그리던 것을
     outline 으로 바꿨다 — 그림자가 아니라 선이라 지면에서도 그대로 찍히고, 점이 어느 띠 색
     위에 놓여도 배경과 갈린다(이 링이 없으면 짙은 띠 위에서 점의 테두리가 배경에 먹힌다). */
  outline: 2px solid #fff;
}

/* ----- 가로축(수축기) -----
   [2026-08-17 감사 major] 눈금 4개를 `space-between` 으로 균등 배치해 값과 실제 좌표가
   최대 28%p 어긋났다. 118/78 인 회원의 점이 "140" 눈금 옆에 찍혀 137 로 읽혔다.
   이제 눈금마다 실좌표(left %)를 인라인으로 받아 절대배치한다 — 띠 위 점과 같은 축이다.
   축 이름("수축기")은 눈금이 아니므로 왼쪽 고정 자리에 둔다. */
.report .bp-axis {
  /* 세로축과 같은 2열 격자 — 눈금 칸의 0%~100% 가 띠 그리드의 0%~100% 와 정확히 겹친다
     (절대배치의 % 는 padding 이 아니라 컨테이너 폭 기준이라, padding 으로는 맞출 수 없다) */
  display: grid;
  grid-template-columns: var(--bp-yaxis-w, 26px) minmax(0, 1fr);
  height: 15px;
  margin-top: 5px;
  font-size: clamp(9px, .68vw, 10px);
  font-weight: 700;
  color: #63738a;
}

.report .bp-xtrack {
  position: relative;
  min-width: 0;
}

/* 가로축 이름 — 마지막 눈금(160 = 축의 73%)보다 오른쪽, 눈금이 없는 자리 */
.report .bp-xtrack .bp-axis-name {
  position: absolute;
  right: 0;
  top: 0;
  white-space: nowrap;
}

.report .bp-xtick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  line-height: 1.2;
}

/* 눈금 머리에 짧은 눈금선 — 숫자만 떠 있으면 어느 지점인지 애매하다 */
.report .bp-xtick::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -4px;
  width: 1px;
  height: 3px;
  background: #b5c0d1;
}

/* [2026-08-18 사용자 지시 "보조 문구 크기 통일"]
   혈압 카드 아래에는 같은 성격의 말풍선이 좌우로 두 개 있다 — 왼쪽 AI 문장(.callout),
   오른쪽 판정 설명(이 블록). 그런데 오른쪽만 한 급 크고(12.5px) 한 급 굵어(700) 같은
   역할인데 다른 무게로 읽혔다. **왼쪽(.callout) 기준으로 맞춘다** — 크기 clamp(10.5,.77vw,11.5),
   굵기 600. 리포트 안의 "보조 설명 말풍선"은 이제 한 벌이다(.callout · .bp-info ·
   .risk-interpretation-panel .callout). 색·테두리·라운드는 각자 자리의 것 그대로 둔다. */
.report .bp-info {
  margin-top: 8px;
  border-left: 4px solid #24a7d7;
  background: #eef8fc;
  border-radius: 11px;
  padding: var(--pad-9) var(--pad-11);
  color: #184769;
  font-weight: 600;
  font-size: clamp(10.5px, .77vw, 11.5px);
}


/* ===== 05. 평형 좌표 라벨 ===== */

.report .balance-label {
  position: absolute;
  font-size: clamp(9.5px, .7vw, 10.5px);
  font-weight: 700;
  color: #8391a5;
}

.report .balance-label.top {
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
}

.report .balance-label.bottom {
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
}

.report .balance-label.left {
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.report .balance-label.right {
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.report .balance-point-info {
  position: absolute;
  right: 12px;
  top: 12px;
  background: #fff;
  border: 1px solid #dbe4f0;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: clamp(9.5px, .7vw, 10.5px);
  font-weight: 700;
  color: #2b5fa7;
}


/* ===== 06. 미니 카드 그리드 =====
   [2026-08-14 사용자 지시] 카드 5종 — 키·몸무게 / BMI / 혈압·심박 / 혈당(최신 1건) / 산소포화도.
   공복·식후 혈당은 한 시점에 하나만 측정되므로 두 칸을 1칸으로 합쳤다(6장 → 5장).
   5장을 3열에 그대로 넣으면 마지막 줄이 1칸만 차서 어색하다 → 6열 그리드 위에서
   1행 3장(span 2) + 2행 2장(span 3)으로 "3 + 2" 배치한다(두 줄 다 폭이 꽉 찬다).
   태블릿(M3) 2열, 모바일(M4) 1열은 기존 규칙 그대로 이어받는다(span 은 그 구간에서 해제). */

.report .info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}

/* 데스크톱·인쇄 — 한 줄 5열 (2026-08-16 사용자 지시 "미니카드 요약 1줄로").
   종전 3+2 두 줄(6열 그리드 위 span 2 / span 3)은 한 줄 분량(카드 높이 + gap)을 더 썼다.
   장수와 무관하게 auto-fit 이 아니라 고정 5열을 쓴다 — 5장 구성이 계약(계약 §5 미니카드 5종)이고,
   한 칸이라도 비면 폭이 흐트러지기 때문. 카드가 좁아진 만큼 06번 블록에서 이모지·수치를 줄였다. */
@media screen and (min-width: 1024px),
print {
  .report .info-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.report .mini-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: var(--pad-9);
  /* 1줄 5열이 되면서 높이를 맞출 다음 줄이 없다 — 내용 높이로 둔다 (2026-08-16) */
  min-height: 0;
}

.report .mini-card .top {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.report .mini-card .emoji {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: #edf4ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(14px, 1.2vw, 18px);
  flex: 0 0 auto;
}

/* 라벨·값 묶음 — 이모지 타일 오른쪽. min-width:0 이라 값이 칸을 넘기면 줄어들 수 있다
   (설명줄은 이 묶음 밖으로 나가 카드 전폭을 쓴다 — parts.jsx MiniCard 주석 참조) */
.report .mini-card .mc-main {
  min-width: 0;
  flex: 1 1 auto;
}

.report .mini-card .k {
  font-size: clamp(9.5px, .67vw, 12.5px);
  font-weight: 700;
  color: #65738a;
}

.report .mini-card .v {
  font-size: clamp(14px, 1.13vw, 18px);
  font-weight: 700;
  color: #0b2454;
  letter-spacing: -.05em;
  line-height: 1.12;
  margin-top: 1px;
  /* [2026-08-18 인쇄 결함 수정 — 단위가 카드 밖으로 넘쳐 잘림]
     종전에는 여기에 white-space:nowrap 을 걸어 값과 단위를 통째로 묶었다(S11, 2026-08-16).
     그 뒤 S14 가 지면 글자 하한을 걸면서 단위가 9.5px → 12px(9pt) 로 26% 커졌고,
     "159.8 / 66.5" + "cm / kg" 가 칸을 20.4px 넘겼다 — 지면 실측으로 카드 오른쪽 경계
     130.1pt 인데 kg 이 131.5~141.2pt 에 찍혀 'g' 가 통째로 사라졌다(리포트 4/6 재현).
     nowrap 이 걸린 채로는 flex 항목의 자동 최소폭(min-content)이 값+단위 전체 폭이 되어
     칸에 맞춰 줄어들 수도 없다 — 그래서 넘친 만큼 그대로 잘려 나갔다.
     → 줄바꿈 지점을 "값과 단위 사이" 한 곳으로 못박는다.
         · 값 안쪽 공백은 컴포넌트가 NBSP 로 묶는다 (parts.jsx MiniCard)
         · 단위 안쪽 공백은 아래 .v span 의 nowrap 이 묶는다
       한 줄에 들어가면 종전과 한 픽셀도 다르지 않고, 넘칠 때만 단위가 다음 줄로 내려간다.
       화면(1366 / 768 / 390px)에서는 어느 카드도 넘치지 않아 전부 한 줄 그대로다. */
  white-space: normal;
}

.report .mini-card .v span {
  font-size: clamp(9.5px, .67vw, 10.5px);
  font-weight: 700;
  color: #4e6077;
  /* 단위는 그 자체로 한 덩어리 — "cm / kg" 가 "cm /" + "kg" 로 갈라지지 않게 */
  white-space: nowrap;
}

.report .mini-card .memo {
  font-size: clamp(9px, .63vw, 10px);
  color: #67768c;
  font-weight: 700;
  margin-top: 3px;
}


/* ===== 07. 배지 ===== */

/* [2026-08-16 사용자 지시] 판정 배지를 한 단계 키운다.
   자리가 "수치 왼쪽 아래"에서 "카드 머리줄 오른쪽 끝"(.vital-head)으로 바뀌면서, 종전 크기로는
   제목과 같은 줄에서 존재감이 죽었다. 높이 19→23px / 글자 상한 10.5→12px / 좌우 여백 8→10px.
   머리줄에서는 flex 정렬이 위치를 잡으므로 margin-top 은 .vital-head .badge 에서 0 으로 되돌린다.
   이 클래스를 쓰는 곳은 혈압·혈당·산소포화도 결과 카드 셋뿐이다(2026-08-16 확인). */
.report .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 23px;
  padding: 0 10px;
  border-radius: 999px;
  color: #fff;
  font-size: clamp(11px, .8vw, 12px);
  font-weight: 700;
  margin-top: 4px;
}

.report .badge.red {
  background: var(--red);
}

.report .badge.yellow {
  background: var(--yellow);
}

.report .badge.green {
  background: var(--green);
}

.report .badge.blue {
  background: var(--blue2);
}

.report .badge.purple {
  background: var(--purple);
}

.report .badge.gray {
  background: #7c8799;
}


/* ===== 08. 패널 / 섹션 타이틀 ===== */

.report .panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: var(--pad-9);
}

.report .section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 700;
  letter-spacing: -.05em;
  color: #092a51;
  margin: 0 0 6px;
}

.report .section-title .bar {
  width: 3px;
  height: 17px;
  border-radius: 4px;
  background: var(--blue2);
  display: inline-block;
}

/* ===== 제목 3단 위계 (2026-08-18 사용자 지시) =====
   그 전에는 급이 뒤섞여 있었다. "전문기관 연계 권고"는 실제로는 「01 AI 위험예측 리포트」
   **안의** 소분류인데 페이지 직계 대구획과 똑같은 세로바 제목(14~18px + 전폭 구분선)이라
   01 과 나란한 형제로 읽혔고, 「02 AI 개인맞춤형 건강가이드」 아래의 "오늘부터 바꿀 N가지" ·
   "맞춤 건강관리 실천 가이드"도 같은 이유로 02 에 속하는지 별개인지 화면에서 구분되지 않았다.

     ① 대구획   .ai-main-title (문서 최상위 · 밑줄) / .ai-subsection-title (01·02 번호 뱃지)
                / .page 직계 .section-title (체성분 · 체수분 결과, 혈압 · 혈당 결과 …)
                → 세로바 3×17, 14~18px, 앞에 전폭 구분선
     ② 소분류   .section-title.is-sub — ① 안에 딸린 묶음
                → 세로바 2×12(옅은 색), 12~14px, **전폭 구분선 없음** + 위 여백 축소
     ③ 카드 제목 .section-title.is-compact — .panel 안의 제목
                → 세로바 그대로, 13~15.5px, 구분선 대상 아님(페이지 직계가 아니다)

   ②가 ①과 갈리는 결정적 신호는 크기가 아니라 **전폭 구분선의 유무**다. 구분선은 "여기서
   앞 구획이 끝난다"는 뜻이라, 소속된 묶음에 그으면 소속이 끊겨 보인다. */
.report .ai-main-title {
  align-items: center;
  gap: 7px;
  padding-bottom: 7px;
  border-bottom: 1px solid #cbd8e8;
}

/* ② 소분류 — 대구획 안에 딸린 묶음의 제목.
   들여쓰기 9px 은 "이 제목은 자기 본문보다 한 칸 안쪽" 이라는 신호다. 본문(카드 그리드)은
   들여쓰지 않는다 — 페이지 안의 모든 카드 왼쪽 끝이 한 줄로 맞아 있는 것이 이 리포트의
   기본 정렬이라, 묶음마다 본문을 들이면 그 정렬이 무너진다. */
.report .section-title.is-sub {
  gap: 5px;
  margin: 12px 0 5px;
  padding-left: 9px;
  color: #2b4a72;
  /* ① 14~18px > ② 12.5~15px > ③ 11.5~13.5px — 세 급이 폭 어디서나 순서를 지킨다 */
  font-size: clamp(12.5px, 1vw, 16px);
  letter-spacing: -.04em;
}

.report .section-title.is-sub .bar {
  width: 2px;
  height: 12px;
  background: #8fa9c9;
}

.report .ai-main-title-en {
  margin-left: auto;
  color: #7890ad;
  font-size: clamp(9px, .67vw, 10px);
  font-weight: 700;
  letter-spacing: .08em;
}

.report .ai-subsection-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 8px 0 5px;
  color: #123a71;
  font-size: clamp(13.5px, 1.07vw, 16px);
  font-weight: 700;
  letter-spacing: -.04em;
}

.report .ai-subsection-title>div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.report .subsection-index {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: #0f4fa1;
  color: #fff;
  font-size: 9.5px;
  letter-spacing: .02em;
}

.report .current-stage-badge,
.report .continuation-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 7px;
  border: 1px solid #f0c8b3;
  border-radius: 999px;
  background: #fff4ed;
  color: #c55624;
  font-size: clamp(9px, .67vw, 10px);
  font-weight: 900;
  letter-spacing: -.01em;
}

/* 같은 규칙을 쓰지만 이쪽은 단계 표시가 아니라 "2 / 2" 같은 이어짐 안내다 —
   굵기 상한 700 규칙(2026-08-16)을 여기서 되돌린다. */
.report .continuation-badge {
  border-color: #cfe0f4;
  background: #eef6ff;
  color: #2860a0;
  font-weight: 700;
}


/* ===== 09. 위험도 요약 패널 / 단계 스케일 ===== */

/* [2026-08-18 사용자 지시 "65점·주의 3중 중복 정리"]
   왼쪽 186px 칸에 있던 점수 링(.risk-score-box: 링 65 + "3단계 · 주의")을 지웠다.
   같은 값이 1페이지 "AI 종합위험 등급" 링과 4페이지 "AI 종합 해석"에 또 있어 한 문서에
   대형 표기가 세 벌이었다 → 점수는 1페이지, **기준표는 여기**, 해석·순서는 종합 해석 패널.
   칸이 하나 남았으므로 2열 그리드와 가운데 세로 구분선을 함께 뺀다(구분할 것이 없다). */
.report .risk-summary-panel {
  padding: var(--pad-8) var(--pad-10);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
}

.report .risk-method {
  min-width: 0;
}

.report .risk-method-title {
  color: #213c60;
  /* [2026-08-18 사용자 지시] 소제목 소폭 상향 (상한 11 → 13px) */
  font-size: clamp(11.5px, .84vw, 13px);
  font-weight: 700;
  margin-bottom: 6px;
}

/* ----- 해석 기준 게이지 (2026-08-18 사용자 지시로 4칸 박스에서 교체) -----
   종전 `.risk-stage-scale` + `.risk-stage-item`(번호 원 + 이름 + 범위를 담은 상자 4개)은
   삭제했다. 네 상자를 나열하면 "네 가지 종류"로 읽히고 0~100 연속 축 위의 위치가 보이지 않는다.
   이제 이 자리는 리포트의 다른 여덟 장과 같은 <Gauge> 다 — 색 램프·현재 구간 안쪽선·현재 라벨
   밑줄·마커 좌표식이 전부 13번 블록 한 벌에서 온다. 여기서는 그 게이지를 이 패널에 앉히는
   여백만 잡는다.

   [is-bare] 값 알약을 쓰지 않는 게이지(showValue=false)라 트랙 위 여백을 점 크기에 맞춰 줄인다.
     종전 18px 은 알약(약 22px)이 들어갈 자리였다. 점만 남으면 그 여백이 통째로 빈 띠가 된다.
     10px + 마커 top 11px 이면 점(8px)의 중심이 트랙 중심(10 + 5 = 15px)과 정확히 맞는다. */
.report .gauge.is-bare .gauge-body {
  /* [2026-08-18 사용자 지시] 위 여백 10px → 0 — 트랙 위 빈 띠 제거 */
  padding-top: 0;
}

.report .gauge.is-bare .gauge-marker {
  /* 위 여백 0 이라 트랙 중심 y = 6px → top = 6 − 7 = −1px (트랙 12px·점 14px) */
  top: -1px;
}

/* 패널 제목 바로 아래에 붙는 게이지 — 카드 안 첫 요소라 위 여백을 게이지 기본값보다 좁게 */
.report .risk-scale-gauge {
  margin-top: 4px;
}

/* [2026-08-16 사용자 지시] 한 단계 축소. 상한 13px 은 리포트 본문(.report 13px)과 같은 크기라
   보조 설명인데도 본문급으로 읽혀 시선을 과하게 먹었다 → 바로 위 소제목(.risk-method-title
   상한 11px)을 넘지 않는 선까지 내린다. 문구는 한 글자도 바꾸지 않는다. */
.report .risk-method-note {
  margin: 6px 0 0;
  color: #6b7a8e;
  font-size: clamp(9px, .63vw, 11px);
  font-weight: 700;
}

/* 종합점수 산출 범위 안내 (계약 §5-4 overall_source.note) — 일부 영역이 미측정일 때만 붙는다.
   같은 문단의 앞머리를 진한 남색으로 띄워 "이 점수가 어디까지 본 것인지"를 먼저 읽게 한다.
   줄을 새로 만들지 않아 지면 예산에 영향이 없다. 굵기는 700 상한. */
.report .risk-scope-note {
  color: #1b4c8f;
  font-weight: 700;
}


/* ===== 10. 그리드 유틸 (2~6열) ===== */

.report .grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.report .grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.report .grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
}

.report .grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.report .grid-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
}


/* ===== 11. 노트 리스트 / 필 ===== */

.report .note-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 5px;
}

.report .note-list li {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  font-size: clamp(10.5px, .77vw, 12px);
}

/* 항목 앞 원형 체크 (2026-08-27 사용자 지시 "체크박스 넣어줘 각 리스트에").
   종전 표시는 ReportView 가 icon 으로 넘기던 텍스트 불릿 "•" 하나였고, 지면에서는 글리프가
   작아 사실상 보이지 않았다. 사용자가 올린 참고 이미지는 파란 링 + 체크다.
     · 도형은 parts.jsx 인라인 SVG(원 stroke + 체크 path). CSS 보더나 글리프는 .page zoom
       6종에서 선 두께가 device px 로 내림돼 배율마다 굵기가 달라진다(위험점수 마커 작업에서
       실측) — 벡터라야 화면·지면에서 같은 굵기로 나온다.
     · 크기 1em — 글줄(line-height 1.3)보다 작아 li 높이를 늘리지 않는다(실측: 목록 총 높이
       화면·지면 모두 불변). 위 여백 .15em = (1.3em − 1em)/2 로 아이콘 중심을 첫 줄 글자
       중심에 맞춘다. 지면에서는 본문 pt 를 따라 함께 줄어든다(em 기준).
     · li 의 flex 아이템이 [아이콘 | 텍스트] 둘 뿐이라, 두 줄로 접히는 항목의 둘째 줄은
       텍스트 칸 왼쪽 끝에 맞는다 = 아이콘 폭만큼 자동 들여쓰기(hanging indent).
     · 색은 팔레트 기존 토큰 --blue(#0f4fa1). 등급색(--ring-*·--seg-*-ink)은 상태를 뜻하므로
       중립 표시인 이 아이콘에는 쓰지 않았다. 흰 배경 대비 8.6:1, 흑백 gray 69 라 링과 체크가
       명도만으로 남는다. SVG 는 currentColor 로 그리므로 색의 정본은 여기 한 줄이다.
   [2026-08-27 추가 지시 "실천 가이드에도"] 같은 아이콘을 5페이지 실천 가이드 3카드(.action li)
   에서도 쓴다. 그래서 선택자를 .note-list 안이 아니라 **.report 안 어디서나**로 넓혔다 —
   도형(parts.jsx NoteCheckIcon)과 이 규칙 한 벌이 리포트의 체크 표시 정본이다. */
.report .note-check {
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  margin-top: .15em;
  color: var(--blue);
}

.report .note-list b {
  color: #0a417f;
}

/* 우선관리 라벨 — 칩 목록 맨 앞, 전폭 한 줄 (2026-08-20 사용자 지시 "항목 설명 필요") */
.report .pills-label {
  flex: 1 1 100%;
  display: flex;
  align-items: baseline;
  gap: 7px;
  color: #213c60;
  font-size: clamp(11px, .8vw, 12.5px);
  font-weight: 700;
}

.report .pills-hint {
  color: #7c8698;
  font-size: clamp(10px, .73vw, 11px);
  font-weight: 600;
}

.report .pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

/* [2026-08-18 사용자 지시] 순위 뱃지 + 항목명 두 조각 구성.
   위계는 **명도**로 준다 — 1위가 가장 진하고 3위 이하가 가장 옅다. 색을 빼도(흑백 인쇄)
   면의 진하기와 뱃지의 반전 여부로 순서가 남는다. 색 자체는 리포트의 블루 계열 안에서만 쓴다. */
.report .pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 3px;
  border-radius: 999px;
  background: #eef4fb;
  border: 1px solid #dae7f8;
  color: #294e78;
  font-size: clamp(10px, .73vw, 11px);
  font-weight: 700;
}

.report .pill-rank {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid currentColor;
  color: inherit;
  font-size: clamp(9px, .67vw, 10px);
  font-weight: 700;
  line-height: 1;
}

.report .pill-name {
  letter-spacing: -.02em;
}

/* 1위 — 진한 남색 면 + 흰 글자, 뱃지는 흰 원에 남색 숫자로 반전 */
.report .pill.rank-1 {
  background: #17457e;
  border-color: #17457e;
  color: #fff;
}

.report .pill.rank-1 .pill-rank {
  background: #fff;
  border-color: #fff;
  color: #17457e;
}

/* 2위 — 중간 톤 */
.report .pill.rank-2 {
  background: #d7e6f7;
  border-color: #a8c6e6;
  color: #17457e;
}

/* 3위 이하 — 가장 옅게(종전 톤) */
.report .pill.rank-3 {
  background: #f2f6fb;
  border-color: #dde7f2;
  color: #46617f;
}


/* ===== 12. 정보 테이블 — 삭제 (2026-08-14) =====
   "기본정보 및 문진 요약" 섹션(.info-table/.info-cell)이 사용자 지시로 리포트에서 빠졌다.
   해당 마크업을 쓰는 곳이 더 이상 없어 규칙도 함께 제거한다(반응형 M3/M4 override 포함). */


/* ===== 13. 게이지 / 트랙 =====
   [2026-08-14 사용자 지시] 그라데이션 fill + 값 알약(.value-pill) + 눈금(.tick) 구성을
   "구간 세그먼트 막대 + 현재 값 ▼ 화살표" 로 교체했다.
     - .track 은 flex 컨테이너, 각 .seg 는 구간 비율만큼 flex-grow (JSX 인라인 = 기하값만)
     - 구간 사이 2px gap 이 흰 간격을 만든다 → 단계 경계가 색 대비 없이도 보인다
     - 색은 --seg-0~3 명도 램프(00번 블록 주석 참조) — 흑백 인쇄에서도 단계가 구분된다
     - 구간 라벨은 종전과 같은 위치(.legend 행, 양끝 정렬)에 그대로 둔다 */

.report .gauge {
  margin-top: 5px;
}

/* [2026-08-21 사용자 지시] 판정 게이지가 여러 줄 이어질 때 행 사이 옅은 가로선.
   체중 / BMI / 체지방률 / 허리둘레가 간격만으로 나뉘어 있어 어디까지가 한 지표의
   막대·라벨인지 붙어 읽혔다. 카드 테두리(--line #dadeeb)보다 한 단계 옅은 선이라
   패널 안에서 테두리와 경쟁하지 않는다. 흑백 인쇄에서도 gray 240 정도의 실선이다.
   `+` 결합자라 **첫 행 위에는 선이 생기지 않는다**(제목 바로 아래 선 금지). */
.report .gauge+.gauge {
  margin-top: 9px;
  padding-top: 9px;
  /* 카드 테두리(--line #dadeeb)보다 한 단계 옅은 값. 더 옅게(#eaeff7) 잡았더니
     .page 의 zoom 때문에 실선이 0.7px 로 렌더돼 화면에서 사라졌다(실측). */
  border-top: 1px solid #e2e8f3;
}

.report .gauge-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 3px;
}

.report .gauge-name {
  font-size: clamp(11px, .8vw, 13px);
  font-weight: 700;
  color: #243750;
}

.report .gauge-range {
  font-size: clamp(9.5px, .7vw, 10.5px);
  color: #69788d;
  font-weight: 700;
}

/* ===== 현재 위치 마커 = 점 + 값 알약 (2026-08-18 사용자 최종 결정 — 원래 디자인 복구) =====
   [내력] 이날 오전 지시로 "▼ 위 숫자 제거 → ▼ 확대 → ▼ 를 예쁘게" 를 차례로 거쳤는데,
     사용자가 종전 스크린샷을 근거로 **그 실험 전체를 철회**하고 원래 구조로 되돌리라고 확정했다.
     원래 구조 = 게이지 바 위 **원형 점**(흰 링 + 진한 중심) + 그 위 **수치 알약**.
     혈압 분류 그래프의 점·말풍선과 같은 언어라, 리포트 안의 "지금 여기"가 한 가지 모양으로 읽힌다.

   [자리] 점은 트랙 **위에 얹힌다**(띄우지 않는다) — 어느 구간에 있는지가 좌표가 아니라
     겹침으로 바로 보인다. 세로 계산은 한 줄로 이어진다:
       트랙 위 여백 18px + 트랙 10px → 트랙 중심 y = 23px
       점 상자 14px(안쪽 8 + 흰 링 3×2) → 중심을 맞추려면 top = 23 − 7 = 16px
     알약은 점 상자 기준 absolute 라 **점을 밀지 않는다**(사용자가 못박은 조건).
     알약 아래끝을 점 위 2px 에 두면 알약(약 13px)의 위끝이 y=1px — 18px 여백 안에 들어간다.

   [그림자 없음] 같은 날 "리포트 그림자 전부 삭제" 지시가 유효하다. 점의 흰 링은 그림자가
     아니라 실제 테두리(border)이고, 바깥 잉크선은 outline 이라 지면에도 선으로 찍힌다. */
.report .gauge-body {
  position: relative;
  padding-top: 18px;
}

.report .gauge-marker {
  position: absolute;
  /* 점 중심 = 트랙 중심. 트랙은 .gauge-body 위 여백 18px 아래 12px 이므로 중심 y = 24px,
     점 지름 14px → top = 24 − 7 = 17px (2026-08-19 트랙 12px·점 14px 확정). */
  top: 17px;
  transform: translateX(-50%);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

/* 점 — 흰 링이 있어 어떤 구간 색 위에 놓여도 배경과 갈리고, 바깥 잉크선이 흰 구간
   (--seg-0 옅은 블루) 위에서도 윤곽을 남긴다. 흑백 인쇄에서 흰 링 + 진한 중심의
   과녁 모양은 명도만으로 형태가 산다. */
/* [2026-08-18 사용자 지시 "점이 잘 안 보인다"] 지름 8 → 12px, 흰 링 3 → 3.5px, 바깥 잉크선
   1 → 1.25px. 형태(원형 점 + 그 위 알약)는 사용자가 확정한 것이라 그대로 두고 크기·대비만 올렸다.
   주황·적색 띠 위에서도 흰 링이 먼저 눈에 걸리고, 안쪽 진한 원(지름 5px)이 위치를 짚는다.
   흑백에서는 흰 링 + 검은 중심의 과녁 모양이라 명도만으로 형태가 산다.
   ※ 점 상자는 border-box 라 지름이 곧 바깥 지름이다. 지름을 바꾸면 .gauge-marker 의 top 도
     함께 옮겨야 점 중심이 트랙 중심에 온다 — 아래 마커 블록의 계산 주석 참조. */
/* [2026-08-19 사용자 지시] 지름 12 → 15 → 14px (최종 확정), 흰 링 4px */
.report .marker-dot {
  display: block;
  width: 14px;
  height: 14px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--marker-ink);
  outline: 1.25px solid rgba(23, 35, 61, .5);
}

/* 값 알약 — 점 바로 위. absolute 라 점 위치에 영향을 주지 않는다.
   좌우로는 점 중앙 정렬이되, 트랙 양 끝에서는 알약 절반이 카드 밖으로 나가므로
   JSX 가 pill-left / pill-right 로 기준점을 점의 좌/우 끝으로 옮긴다(혈압 말풍선과 같은 규칙). */
.report .marker-value {
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 6px;
  border: 1px solid var(--marker-ink);
  border-radius: 999px;
  background: #fff;
  color: var(--marker-ink);
  font-size: clamp(9.5px, calc(9.06px + .113vw), 10.5px);
  /* 390px→9.5px, 1280px→10.5px */
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.3;
}

.report .gauge-marker.pill-left .marker-value {
  left: -3px;
  transform: none;
}

.report .gauge-marker.pill-right .marker-value {
  left: auto;
  right: -3px;
  transform: none;
}

.report .track {
  display: flex;
  gap: var(--seg-gap);
  /* [2026-08-19 사용자 지시] 10 → 13 → 12px (최종 확정) */
  height: 12px;
  background: transparent;
  border-radius: 999px;
}

.report .seg {
  flex: 1 1 0;
  min-width: 0;
  background: var(--seg-0);
}

.report .seg:first-child {
  border-radius: 999px 0 0 999px;
}

.report .seg:last-child {
  border-radius: 0 999px 999px 0;
}

.report .seg.lv-0 {
  background: var(--seg-0);
}

.report .seg.lv-1 {
  background: var(--seg-1);
}

.report .seg.lv-2 {
  background: var(--seg-2);
}

.report .seg.lv-3 {
  background: var(--seg-3);
}

/* 현재 값이 속한 구간 — 안쪽 테두리로 한 번 더 짚어준다(흑백에서도 보인다) */
.report .seg.is-current {
  /* [2026-08-18] inset 그림자 → 안쪽 아웃라인. 모양·두께가 같고 그림자가 아니다.
     현재 구간을 짚어 주는 유일한 표시라 없앨 수 없어 선으로 옮겼다. */
  outline: 1.5px solid rgba(23, 35, 61, .55);
  outline-offset: -1.5px;
}

/* 라벨 칸은 세그먼트와 같은 gap·비율을 써서 각 구간 바로 아래에 오게 한다.
   [2026-08-18 사용자 지시] **모든 라벨이 자기 구간 중앙**이다 — 양 끝만 바깥 정렬하던
   규칙(:first-child left / :last-child right)을 없앴다. 끝 라벨이 트랙 끝에 붙어 있으면
   "표준이하"가 축의 왼쪽 끝을 가리키는 것처럼 읽혀 어느 구간의 이름인지 흐려졌다. */
.report .legend {
  display: flex;
  gap: var(--seg-gap);
  font-size: clamp(9.5px, .7vw, 10.5px);
  font-weight: 700;
  color: #7c8698;
  /* [2026-08-18 사용자 지시] 트랙-라벨 간격 2→6px. 지면은 아래 print 블록이 2px 로 되돌려
     쪽 예산을 지킨다(사용자 조건 "프린트에 지장 없게"). */
  margin-top: 6px;
}

@media print {
  .report .legend {
    margin-top: 2px;
  }
}


/* ===== 13-1. 게이지 캡션 (.gauge-comment) — 2026-09-02 사용자 지시 · 계약 §5-11 ===== */
/* 2p 체성분 게이지 4종 아래에 붙는 룰 캡션 한 줄. 서버가 지표별로 만들어 내려보내고
   (metric_comments), 프론트가 .gauge-body 안 .legend **다음**에 <p> 로 넣는다.
   자리 근거(frontend 확정): .gauge 직계로 두면 그 flex 열이 [머리 | 본문 | 캡션] 3열이 되어
   트랙이 눌린다. .gauge-body 안에 두면 마커·트랙·라벨과 같은 흐름에 얹혀 막대 폭이 불변이다.

   [톤] 리포트의 기존 캡션 언어를 그대로 따른다 — 바로 위 .legend(9.5~10.5px / #7c8698)가
   같은 게이지 안의 보조 글줄이고, 캡션은 문장이라 한 급만 크게(10~11.5px) 두되 색은 같은
   계열의 한 단계 진한 중성(#69788d — .gauge-range 와 같은 값)을 쓴다. 라벨보다 뒤로 물러나면
   문장이 읽히지 않고, 앞으로 나오면 게이지 이름·수치와 경쟁한다.
   weight 는 600 — .legend 가 700 이라 같은 굵기면 두 줄이 한 덩어리로 붙어 보인다.

   [수식자] ok 는 무수식(중성)이고 warn/danger 만 상태색 잉크로 올린다. 값은 v8 세그먼트
   램프의 --seg-2(짙은 주황) / --seg-3(선명한 적)으로, 바로 위 트랙에서 그 구간을 칠하는 색과
   **같은 값**이다 — 캡션이 어느 구간을 말하는지 색으로 이어진다(등급 4색 토큰을 새로 끌어오면
   같은 지면에 두 벌의 경고색이 생긴다).
   흰 지면 대비: #c96a1e 4.19:1 · #c62f21 6.28:1 — 10~11.5px 본문이라 AA(4.5:1) 기준에서
   danger 는 통과, warn 은 0.31 모자라지만 v8 램프 색을 바꿀 수 없는 자리라 굵기를 700 으로
   올려 획을 굵혀 보완한다(색 자체는 트랙과 일치해야 한다).

   [지면] 인쇄에서도 읽혀야 하므로 크기를 줄이지 않는다. 위 여백만 6 → 3px 로 좁혀
   쪽 예산에 보태고(같은 블록의 .legend margin-top 2px 과 같은 취지), 줄바꿈은 허용한다. */
.report .gauge-comment {
  margin-top: 6px;
  font-size: clamp(10px, .78vw, 11.5px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: #69788d;
}

.report .gauge-comment.is-warn {
  font-weight: 700;
  color: var(--seg-2);
}

.report .gauge-comment.is-danger {
  font-weight: 700;
  color: var(--seg-3);
}

@media print {
  .report .gauge-comment {
    margin-top: 3px;
  }
}

/* [2026-08-18 사용자 지시 "라벨을 한 줄로, 그만큼 높이를 줄여라"]
   그 전에는 자기 칸 안에서 접히게 두었다(white-space:normal + keep-all + anywhere).
   그러면 "공복혈당장애(경계)"(필요 폭 74px)가 82px 칸에서도 꺾여 legend 행이 14px → 27px 이
   되고, 게이지 한 장이 통째로 13px 씩 커졌다(실측: 1366px 에서 혈압·혈당 두 게이지).
   지금은 전부 한 줄이다. 칸을 넘치는 라벨은 칸 밖으로 삐져나가되, 겹치는 것은
   JSX(parts.jsx Gauge "라벨 겹침 정리")가 **자리를 옮겨** 푼다 — 글자를 지우거나 줄이지 않는다.
   line-height 1.15 는 그대로라 한 줄 높이(14px)가 legend 행 높이가 된다. */
.report .legend>span {
  /* min-width:max-content — 겹침을 푸는 핵심 한 줄.
     칸 폭은 종전처럼 구간 비율(flex-grow)로 나누되, **자기 라벨 한 줄 폭 아래로는 줄지 않는다**.
     칸은 flex 아이템이라 서로 밀어낼 뿐 겹치지 않으므로, 좁은 구간의 긴 라벨(34px 칸의
     "고혈압 전단계" 58px)이 옆 라벨을 덮던 문제가 구조적으로 사라진다.
     남는 자리는 종전대로 구간 비율로 나눠 가지므로 라벨은 여전히 자기 구간 쪽에 붙어 있다.
     실측(인쇄): 게이지별 라벨 폭 합 55~252px < 트랙 332~379px — 어떤 게이지도 넘치지 않는다. */
  flex: 1 1 0;
  min-width: max-content;
  text-align: center;
  white-space: nowrap;
  line-height: 1.15;
}

/* 현재 값이 놓인 구간의 이름 — 판정 문구와 같은 이름이라 여기만 한 번 더 짚어 준다.
   좁은 구간(저혈당 <54 등)은 라벨이 자기 칸을 넘어가는데, JSX(Gauge)가 양옆 라벨을
   비워 두므로 겹치지 않는다 — parts.jsx "라벨 솎아내기" 주석 참조. */
.report .legend>span.is-current {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* [2026-08-18] 양 끝 라벨의 바깥 정렬 규칙을 제거했다 — 위 .legend>span 의 중앙 정렬이
   전 구간에 그대로 걸린다. 잘림 걱정은 없다: 칸이 min-width:max-content 라 글자가 자기 칸을
   넘지 않고, 칸끼리는 flex 로 서로 밀어낼 뿐 겹치지 않는다(겹침 0 은 구조로 보장된다). */

.report .legend .lv-0 {
  color: var(--seg-0-ink);
}

.report .legend .lv-1 {
  color: var(--seg-1-ink);
}

.report .legend .lv-2 {
  color: var(--seg-2-ink);
}

.report .legend .lv-3 {
  color: var(--seg-3-ink);
}


/* ----- 이름 · 막대 한 행 배치 (2026-08-18 사용자 지시 "높이 절약") -----
   그 전에는 [이름 한 줄] 위 / [막대 + 구간 라벨] 아래로 세로 스택이었다. 이름 줄은 글자
   한 줄인데도 게이지 한 장당 18.6px(이름 15.6 + 아래 여백 3)을 먹었고, 리포트에는 게이지가
   8장(체성분 4 · 혈압 2 · 혈당 1 · 산소포화도 1) 있어 합 149px — A4 한 장의 13% 다.
   태블릿 이상에서는 이름을 막대 왼쪽에 붙여 그 149px 를 통째로 없앤다.

   [왜 고정 폭인가] 이름 폭에 맞춰 흘리면(auto) 같은 카드 안에서도 막대 시작점이 어긋나
   ("체중" 21px / "허리둘레" 42px) 두 게이지를 위아래로 비교할 수 없다. 라벨 칸을 고정해
   막대의 0 점을 맞춘다.

   [폭 근거 — 실측] 이름 자연폭 최댓값은 "수축기 혈압" 이다. 지면은 이름이 본문급(9pt)이라
   논리 14px 글자 → 약 70px, 화면(1024px~)은 11~12px 글자 → 약 63px. 78px 칸에 둘 다 한 줄이다.
   막대가 그만큼 좁아져도 구간 라벨은 넘치지 않는다 — 라벨 자연폭 합의 최댓값은 수축기 혈압
   5구간이고, 지면 실측으로 트랙 313px 대 라벨 252px, 1366px 화면에서 트랙 412px 대 라벨 226px
   (모두 zoom 적용 후 실측치). 라벨은 13번 위 주석대로 min-width:max-content 라 칸이 좁아지면
   넘치므로, 이 여유가 이 배치의 성립 조건이다.

   [마커 좌표] 값 알약·점의 left 는 .gauge-body 기준 % + var(--seg-gap) 식이라 막대 폭이
   바뀌어도 식 그대로다(JSX 에 px 이 없다). 좌우 끝 보정(pill-left/right, 12%)도 트랙
   최솟값 300px 기준 36px > 알약 절반(약 23px) 이라 그대로 성립한다.

   [왜 1024px 부터인가 — 768px 이 아니다] 이 리포트는 `.page` 에 zoom 을 걸어 화면 폭마다
   배율이 다르다(M1~M4). 그래서 "뷰포트가 넓다 = 게이지가 넓다" 가 성립하지 않는다.
   실측(768px 뷰포트, M3 zoom 1.45, 체성분 2열): 게이지 한 장의 논리 폭이 224px 로,
   같은 게이지가 390px 휴대폰(1열, zoom 1.2)에서 갖는 290px 보다 오히려 **좁다**.
   그 224px 는 구간 라벨(수축기 혈압 224px)이 이미 다 쓰고 있어 이름 칸을 떼면 라벨이
   카드 밖으로 넘친다(실측 +78px 넘침). 768~1023px 은 종전 세로 스택을 유지한다.
   지면은 zoom 0.86 이라 논리 폭이 넉넉해(게이지 448px) 화면 데스크톱과 같이 한 행이다.

   [모바일] 767px 이하도 종전 세로 스택 그대로다. */
@media screen and (min-width: 1024px),
print {
  .report .gauge {
    display: flex;
    align-items: flex-start;
    column-gap: 8px;
    /* 세로 스택일 때는 이름 줄(18.6px)이 위 게이지와의 사이를 벌려 주었다. 그 줄이 없어지면서
       값 알약이 게이지 상자 위로 삐져나온 만큼(지면 실측 8.1px — 알약 22.1px 중 트랙 위
       여백에 담기지 못한 몫) 위 게이지의 구간 라벨과 겹쳤다(실측: BMI "88.9" ↔ 체중 "표준이상").
       종전 5px 이던 사이 여백을 10px 로 벌려 알약이 항상 빈 자리 위에 뜨게 한다.
       그래도 게이지 한 장은 56.2 → 38 + 5 = 43px 라 절약분은 그대로 남는다. */
    margin-top: 10px;
  }

  /* 카드 안 첫 게이지도 같은 규칙 — 위의 큰 수치(138/93 mmHg)와 알약이 겹치지 않게 */
  .report .vital-value+.gauge {
    margin-top: 10px;
  }

  .report .gauge-head {
    display: block;
    flex: 0 0 78px;
    width: 78px;
    margin-bottom: 0;
    /* 트랙 중심에 이름 한 줄의 중심을 맞춘다:
       .gauge-body 위 여백 18px + 트랙 12px 의 절반 = 24px, 이름 줄 높이 16px → 24 − 8 = 16px */
    padding-top: 16px;
  }

  .report .gauge-name {
    /* 칸을 넘치는 이름이 생기면 어절 단위로 접는다(글자를 지우지 않는다) */
    word-break: keep-all;
    line-height: 1.15;
  }

  .report .gauge-body {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* 화면은 이름 글자가 11~12px 이라 줄 높이가 지면(14px)보다 낮다 — 1px 만 내려 중심을 맞춘다 */
@media screen and (min-width: 1024px) {
  .report .gauge-head {
    padding-top: 16px;
  }
}


/* ===== 14. 종합 점수 링 / 위험 행 ===== */

.report .score-box {
  display: flex;
  gap: 11px;
  align-items: center;
}

.report .score-ring {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: conic-gradient(var(--ring, var(--ring-3)) 0 72%, var(--ring-track) 72% 100%);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.report .score-ring b {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  color: #183f92;
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 700;
}

/* 등급 문구는 링과 한 덩어리로 읽힌다 — 링과 같은 단계 색을 쓴다.
   (v8 원본은 #df5e21 고정이라 "정상" 등급에도 주황 글씨가 나왔다) */
.report .score-text .grade {
  font-size: clamp(18px, 1.47vw, 24px);
  font-weight: 800;
  color: var(--ring, var(--ring-3));
  letter-spacing: -.05em;
}

.report .score-text .sub {
  font-size: clamp(10px, .73vw, 11.5px);
  color: #67768c;
  font-weight: 500;
  margin-top: 3px;
}

.report .risk-rows {
  display: grid;
  /* [2026-08-27 3차] 10 → 5px 로 되돌린다. 2차의 10px 는 트랙 위로 13px 솟던 지도핀 자리였는데,
     3차 마커는 트랙에 걸터앉는 원(지름 13px)이라 트랙 위로 나오는 높이가 2.5px 뿐이다.
     실측(390·744·1484px): 앞 행 마커 아래끝 ↔ 이 행 마커 위끝 5.0px — 종전 간격으로 충분하다.
     2차에서 늘었던 블록 25px(지면 5.2mm)도 함께 회수된다. */
  gap: 5px;
  /* [2026-08-24 사용자 확정값] 7 → 12px */
  margin-top: 12px;
}

.report .risk-row {
  display: grid;
  grid-template-columns: 76px 1fr 36px;
  gap: 6px;
  align-items: center;
}

.report .risk-row .name {
  font-size: clamp(10px, .73vw, 12px);
  font-weight: 700;
  color: #22354e;
}

.report .risk-row .score {
  text-align: right;
  font-size: clamp(10px, .73vw, 11px);
  font-weight: 700;
  color: #0b2f61;
}

/* 미측정 영역 행 (계약 §5-4) — 막대·점수 자리를 근거 라벨 하나로 대신한다.
   0점 막대를 그리면 "재 보니 정상"으로 읽히므로 막대 자체를 내지 않는다.
   행을 지우지 않는 이유는 무엇을 아직 안 쟀는지가 보여야 재측정으로 이어지기 때문. */
.report .risk-row.is-none .risk-none {
  grid-column: 2 / -1;
  padding: 2px 6px;
  border: 1px dashed #d7dee8;
  border-radius: 6px;
  background: #f7f9fc;
  color: #8794a5;
  font-size: clamp(9.5px, .67vw, 10.5px);
  font-weight: 700;
  text-align: center;
}

/* 위험점수(0~100) 막대 — 게이지와 같은 원리 (2026-08-14 사용자 지시).
   그라데이션 채움 대신 4단계 세그먼트 + 현재 점수 ▼ 마커.

   [2026-08-17 감사 major] 컷이 두 벌이었다: 여기 폭(30/20/25/25 → 컷 30·50·75)과
   코드 stageOf(70)가 서로 달라 70점이 1페이지 3칸 / 4페이지 4칸으로 갈렸다.
   이제 폭은 **서버 등급 컷(criteria.grades)에서 만든 flex-grow 인라인**이 정본이며,
   아래 nth-child 값은 그 값을 주지 않는 구버전 리포트 폴백으로만 남는다. */
.report .score-bar {
  position: relative;
  /* [2026-08-24 사용자 지시 "미들 정렬"] ▼ 자리(padding-top 6px)가 셀 높이에 포함돼
     막대 중심이 이름·수치 글줄 중심보다 6px 아래로 밀렸다 — 화살표를 흐름 밖(절대,
     top:-6px)으로 빼서 셀 = 막대 8px 만 남긴다. 행의 align-items:center 가 세 열을
     같은 중심선에 놓는다. */
  padding-top: 0;
}

.report .score-track {
  display: flex;
  gap: var(--seg-gap);
  height: 8px;
  border-radius: 999px;
}

.report .score-track .seg:nth-child(1) {
  flex-grow: 30;
}

.report .score-track .seg:nth-child(2) {
  flex-grow: 20;
}

.report .score-track .seg:nth-child(3) {
  flex-grow: 25;
}

.report .score-track .seg:nth-child(4) {
  flex-grow: 25;
}

/* 위험점수 막대의 ▼ — 종전(2026-08-17) 크기 그대로다.
   [왜 게이지처럼 점 + 알약이 아닌가] 이 막대는 한 행이 "영역 이름 · 막대 · 점수"로 되어 있어
   **점수 숫자가 막대 바로 옆에 이미 있다**. 알약을 얹으면 같은 숫자가 한 뼘 안에 두 번 나오고,
   6행 × 알약 높이만큼 1페이지가 통째로 밀린다. 게이지(값이 그림 안에만 있는 자리)와 사정이 다르다.
   2026-08-18 오전에 이 화살표도 9px 로 키웠다가, 마커 복구 결정과 함께 원래 5px 로 되돌렸다.

   [2026-08-27 사용자 지시 "▼가 막대와 떨어져 떠 있다"] 형태를 **지도핀**(둥근 머리 + 아래로
   뾰족한 꼬리)으로 바꾸고 꼬리 끝이 트랙 윗면을 짚게 한다. 도형은 parts.jsx 의 인라인 SVG —
   보더 삼각형은 zoom 배율에서 테두리 폭이 정수로 내림돼(1.45배에서 4px→5px, 8px 폭이 10px로)
   좌우 비대칭이 생겼고, 둥근 머리는 보더로 만들 수 없다. SVG 는 벡터라 zoom·인쇄에서 형태가 산다.
     · 좌표 기준을 top → bottom 으로 바꿨다. .score-bar 높이 = 트랙 8px 이므로 bottom:calc(100% - 1px)
       는 핀 상자 아래끝을 트랙 윗면보다 1px 아래에 둔다 → 잉크 꼬리 끝(상자 아래끝 0.5px 위)이
       트랙 윗면을 0.5px 물어 "떠 있는" 간격이 사라진다. 핀 크기를 바꿔도 이 관계는 유지된다.
     · 절대배치·흐름 밖은 종전 그대로 — 셀 높이는 여전히 막대 8px 이고 행 높이·정렬은 불변이다.

   [2026-08-27 2차 — "별로 바뀐 게 없다, 올린 그래프 현재 위치 모양처럼"] 1차의 7.2×9px 는
   종전 ▼(8×5px)와 면적 차가 작아 화면에서 바뀐 티가 나지 않았다. 두 가지를 함께 바꾼다.
     · 크기 7.2×9 → **12×15px**. 트랙 8px 의 약 2배 높이라 핀이 행의 주인공으로 읽힌다.
       머리 지름도 4.8 → 9.9px 로 커져 흰 구멍이 보이고 "지도핀"으로 한눈에 읽힌다.
     · 색 --marker-ink → **--marker-pin(녹색)**. 레퍼런스 마커 색이고 사용자가 두 번 요구했다.
       흰 테두리는 그대로 유지 — 세그먼트 2·3(주황·적) 위 대비와 흑백 인쇄 형태를 이게 만든다.
     · 트랙에 무는 깊이 1 → 2px(bottom: calc(100% - 2px)). 핀이 커진 만큼 꼬리가 막대에 확실히
       꽂혀 보이게 하고, 트랙 위로 올라가는 높이를 13px 로 눌러 위 여유를 아낀 것이기도 하다.
     · 세로 자리: 행 높이 = 이름 글줄(폰트 clamp 최솟값 10px × line-height 1.3 = 13px)이라
       트랙 위 자리는 (13-8)/2 + gap + (13-8)/2 다. 핀 13px 이 들어가려면 gap 5px(자리 10px)
       로는 모자라 .risk-rows gap 을 10px 로 올렸다(자리 15px → 여유 2px). 행 높이 자체와
       이름·점수 열은 건드리지 않았다 — 핀은 여전히 흐름 밖이다.

   [2026-08-27 3차 — "흰색 배경에 검은색 동그라미 테두리로"] 녹색 지도핀을 철회하고 **흰 원 +
   잉크 테두리 + 잉크 중심점**(과녁)으로 간다. 사용자가 올린 참고 이미지가 막대에 걸터앉은
   원형 마커다. 게이지 .marker-dot(잉크 원 + 흰 링)의 배색을 뒤집은 형제 도형이라 리포트
   안에서 "지금 여기"의 언어가 하나로 유지된다.
     · 위치를 **막대 위가 아니라 막대 위에 겹쳐** 놓는다. .score-bar 높이 = 트랙 8px 이므로
       top:50% + translateY(-50%) 는 원 중심을 트랙 중심에 정확히 올린다(게이지 점이 트랙에
       얹히는 것과 같은 원리 — 좌표가 아니라 겹침이 위치를 말한다). 이제 마커는 위아래로
       (13-8)/2 = 2.5px 씩만 삐져나온다.
     · 지름 13px — 게이지 점(14px)과 형제로 보이는 크기. 테두리 2단위(1.63px)·중심점
       4단위(3.25px)는 viewBox 16 기준 값이라 배율이 바뀌어도 비율이 유지된다.
     · 도형은 SVG 를 유지한다. 순수 CSS 원(border-radius + border)도 형태는 나오지만 테두리
       폭이 device px 로 내림돼(1차에서 실측: 배율 1.45 에서 4px 보더가 5px 로) 배율마다
       링 두께가 2.0/2.4/2.9px 로 들쭉날쭉해진다 — 지름 13px 짜리 도형에서는 눈에 띈다.
       SVG stroke 는 연속 스케일이라 6종 배율에서 링 두께가 균일하다.
     · gap 은 5px 로 복귀(위 .risk-rows 주석) — 마커가 트랙 위로 2.5px 밖에 안 나온다.
     ※ 클래스 이름 .score-arrow 는 ▼ 시절의 이름이지만 그대로 둔다(JSX·CSS 양쪽을 건드릴
       만한 이득이 없다). 이름이 아니라 이 주석이 현재 도형의 정본이다. */
.report .score-arrow {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 13px;
  height: 13px;
}

.report .score-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}


/* ===== 15. 위험 상세 카드 ===== */

.report .risk-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 10px;
}

.report .risk-detail-card {
  position: relative;
  min-width: 0;
  padding: var(--pad-7) var(--pad-8) var(--pad-6);
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid #8ca1b8;
  border-radius: 12px;
}

.report .risk-detail-card.level-2 {
  border-top-color: #c2a92d;
}

.report .risk-detail-card.level-3 {
  border-top-color: #e28a2e;
}

.report .risk-detail-card.level-4 {
  border-top-color: #d94d49;
}

.report .risk-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.report .risk-card-head>div:first-child {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 6px;
}

.report .risk-card-icon {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  background: #eef5fd;
  font-size: 12.5px;
  line-height: 1;
}

.report .risk-card-head h3 {
  margin: 0;
  color: #092a51;
  font-size: clamp(11.5px, .87vw, 14px);
  font-weight: 700;
  letter-spacing: -.04em;
}

.report .risk-score {
  display: flex;
  align-items: baseline;
  gap: 2px;
  white-space: nowrap;
  color: #6e7f93;
  font-size: 9px;
  font-weight: 700;
}

.report .risk-score b {
  color: #0b2454;
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 700;
  line-height: 1;
}

/* ===== 카드 단계 표시 = 이름 한 줄 + 4칸 세그먼트 바 (2026-08-18 사용자 지시로 재설계) =====
   [무엇을 걷어냈나]
     · 1-2-3-4 동그라미 스텝퍼(.risk-card-stage) — done 과 active 가 같은 색면(#eaf2fc)이라
       **지금 어느 칸인지가 구분되지 않았다**. 단계색은 active 에만 있었지만 done 과 채도가
       비슷해 흑백 인쇄에서는 사실상 넷이 같은 모양이었다.
     · "현재 판정 / 주의 · 관리 필요"(.risk-card-status) — 바로 위 스텝퍼가 이미 말한 것을
       글자로 다시 말하는 줄. 테두리까지 있어 카드 안에 가로선이 두 벌 생겼다.
     · "근거 …"(.risk-basis) — 사용자 지시로 삭제.
   [지금 구조] 단계 이름이 먼저 크게 오고(단계색), 그 아래 4칸 바가 현재 칸만 채운다.
     칸 = 게이지의 .track/.seg 와 같은 언어라 리포트 전체에서 "지금 여기"의 모양이 하나다.
   [흑백 인쇄] 지난 칸 옅은 회색 채움 / 현재 칸 진한 채움 + 2px 더 두꺼움 / 남은 칸 흰 바탕 +
     윤곽선. 색을 모두 빼도 채움·윤곽·두께 세 가지로 갈린다.
   [높이] 스텝퍼 23px + 판정 줄 19px + 근거 줄 24px = 66px 이던 자리가 26px 로 줄었다
     (카드 6장 × 40px = 240px, A4 지면 예산의 5분의 1장). 지면 3쪽 조건에 그만큼 여유가 생긴다. */

.report .risk-stage-bar {
  margin: 5px 0 6px;
}

.report .rsb-head {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
}

/* 단계 번호 — 이름과 같은 색, 한 급 작게. "3단계" 가 먼저 읽히고 이름이 뒤를 받는다 */
.report .rsb-step {
  flex: 0 0 auto;
  color: var(--rsb-ink);
  font-size: clamp(10px, .73vw, 11px);
  font-weight: 700;
  letter-spacing: -.03em;
}

.report .rsb-name {
  min-width: 0;
  color: var(--rsb-ink);
  font-size: clamp(11.5px, .87vw, 13px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.15;
}

/* 관리 강도("관리 필요")는 판정이 아니라 그 다음 말이라 한 톤 낮춘다 */
.report .rsb-tail {
  margin-left: auto;
  flex: 0 0 auto;
  color: #7a899b;
  font-size: clamp(9px, .67vw, 10px);
  font-weight: 700;
  white-space: nowrap;
}

.report .rsb-track {
  display: flex;
  align-items: center;
  gap: 3px;
  /* [2026-08-19 사용자 지시] 7/5(현재 9/7) → 9/7px — 그래프 살짝 굵게 */
  height: 9px;
  margin-top: 4px;
}

.report .rsb-track span {
  flex: 1 1 0;
  min-width: 0;
  height: 7px;
  border: 1px solid var(--rsb-line);
  border-radius: 999px;
  background: #fff;
}

.report .rsb-track span.is-passed {
  background: var(--rsb-soft);
}

.report .rsb-track span.is-current {
  height: 9px;
  border-color: var(--rsb-ink);
  background: var(--rsb-ink);
}

/* 단계색 — 카드 윗변 색(.risk-detail-card.level-N border-top)과 같은 계열의 잉크값.
   기본값(단계 미상)은 종전 회색 윗변과 짝이 맞는 남회색이다. */
.report .risk-detail-card {
  --rsb-ink: #4a6a8c;
  --rsb-soft: #e2e9f1;
  --rsb-line: #c8d2df;
}

.report .risk-detail-card.level-1 {
  --rsb-ink: #1a5799;
  --rsb-soft: #dceaf9;
  --rsb-line: #c0d5ea;
}

.report .risk-detail-card.level-2 {
  --rsb-ink: #8d7809;
  --rsb-soft: #f6ecc0;
  --rsb-line: #ddd0a0;
}

.report .risk-detail-card.level-3 {
  --rsb-ink: #be5728;
  --rsb-soft: #fbe2cc;
  --rsb-line: #e8c4a8;
}

.report .risk-detail-card.level-4 {
  --rsb-ink: #b03430;
  --rsb-soft: #fadad7;
  --rsb-line: #eebab6;
}

.report .risk-detail-card p {
  min-height: 0;
  margin: 4px 0 5px;
  color: #184769;
  font-size: clamp(10.5px, .67vw, 11px);
  font-weight: 500;
  line-height: 1.34;
}

.report .risk-detail-card p b {
  color: #183f78;
  font-weight: 700;
}

.report .risk-next {
  padding: 5px 6px;
  border-radius: 7px;
  background: #f4f8fc;
  color: #345674;
  font-size: clamp(10.5px, .63vw, 11px);
  font-weight: 700;
  line-height: 1.3;
}

.report .risk-next span {
  display: block;
  margin-bottom: 2px;
  color: #6b8198;
  font-size: 8.5px;
  font-weight: 700;
}


/* ----- 미측정 카드 (계약 §5-4, 2026-08-17) -----
   점수·4단계 마커·"현재 판정"이 없는 카드다. 색으로 위험 단계를 말하지 않게 윗변을 회색으로
   두고 바탕을 한 톤 낮춘다 — 옆의 산출된 카드와 한눈에 구분되어야 "안 잰 것"이 읽힌다.
   카드를 숨기지 않고 남기는 것이 요점이므로 크기는 그대로 두고 내용만 비운다. */
.report .risk-detail-card.is-unmeasured {
  border-top-color: #c3ccd8;
  background: #fafbfd;
}

/* 점수 자리에 들어가는 근거 라벨 — 서버 basis_label("미측정") 그대로 */
.report .risk-none-tag {
  flex: none;
  align-self: center;
  padding: 2px 7px;
  border: 1px dashed #cfd7e2;
  border-radius: 999px;
  background: #fff;
  color: #78869a;
  font-size: clamp(9px, .63vw, 10px);
  font-weight: 700;
  white-space: nowrap;
}

.report .risk-detail-card.is-unmeasured p {
  color: #5d6f85;
}

/* 문진 신호 — 점수가 아니라 참고 표시다(계약 §5-4). 위험도로 읽히지 않게 색을 쓰지 않고
   목록 앞에 "문진 참고" 라벨을 못 박는다. 측정 안 한 영역에 문진 이력이 있다는 사실이
   바로 재측정 근거가 되므로 미측정 카드에서만 노출한다. */
.report .risk-signals {
  margin-top: 4px;
  padding: 4px 6px;
  border-radius: 7px;
  background: #f2f5f9;
}

.report .risk-signals>span {
  display: block;
  margin-bottom: 2px;
  color: #77879b;
  font-size: 8.5px;
  font-weight: 700;
}

.report .risk-signals ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.report .risk-signals li {
  color: #46596f;
  font-size: clamp(10px, .63vw, 10.5px);
  font-weight: 700;
  line-height: 1.32;
}


/* ===== 16. 위험 우선순위 / 해석 패널 ===== */

.report .risk-priority-grid {
  margin-top: 10px;
}

.report .risk-priority-grid .panel {
  padding: var(--pad-8);
}

.report .risk-interpretation-panel {
  background: linear-gradient(180deg, #fff 0%, #f7fbff 100%);
}

/* [2026-08-18 사용자 지시 "3중 중복 정리"]
   65 원형 뱃지(.interpretation-index)와 그 옆 "3단계 주의" 대제목을 소형 한 줄로 내렸다.
   이 패널의 본체는 아래 **관리 순서 + AI 문장**이고, 점수 표기는 1페이지 링이 맡는다.
   값을 지우지는 않았다 — 몇 점을 두고 하는 해석인지가 필요해 "종합 65점 · 3단계 주의"로 남긴다. */
.report .interpretation-main {
  min-width: 0;
}

.report .interpretation-score {
  display: block;
  margin-bottom: 3px;
  color: #bc4d27;
  font-size: clamp(9.5px, .7vw, 12.5px);
  font-weight: 700;
  letter-spacing: -.02em;
}

.report .interpretation-main p {
  margin: 2px 0 0;
  color: #4a5d74;
  font-size: clamp(9.5px, .7vw, 12px);
  font-weight: 600;
}

.report .interpretation-rule {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid #e1e9f2;
  color: #75869a;
  font-size: clamp(9px, .67vw, 11px);
  font-weight: 700;
}

.report .interpretation-rule b {
  color: #28578c;
  font-size: clamp(10px, .67vw, 12px);
  text-align: right;
}

/* [2026-08-18] 이 패널의 콜아웃만 10px 로 따로 줄여 두었던 규칙을 뺐다 — 같은 역할의
   말풍선은 한 크기라는 위 규칙에 합류시킨다(지면은 종전부터 두 곳 모두 --pt-body 로 같았다).
   안쪽 여백만 반쪽 폭 패널에 맞춰 좁게 남긴다. */
.report .risk-interpretation-panel .callout {
  margin-top: 7px;
  padding: var(--pad-6) var(--pad-8);
}


/* ===== 17. 표 ===== */

/* [2026-08-14] 인쇄 넘침 수정.
   .table-scroll(S1)이 표에 min-width:380px 를 주는데, 인쇄에서는 S6 가 overflow:visible 로
   풀기 때문에 표가 패널(인쇄 폭 기준 약 325px) 밖으로 55px 튀어나왔다.
   → table-layout:fixed 로 열 폭을 고정하고, 앞 두 열에 상한을 주어 지면 안에 들어오게 한다.
     한글은 어절 단위(keep-all)로 접고, 어절이 칸보다 길면 그때만 강제 분리한다. */
/* [2026-08-18 사용자 지시] 표의 둥근 모서리를 없앤다 — 외곽·헤더 모두 직각.
   리포트에서 표는 이 클래스 하나뿐이라(집중관리 우선순위) 여기서 끝난다.
   overflow:hidden 은 라운드를 위해 있던 것이 아니라 셀 배경이 테두리를 넘지 않게 하는
   안전장치라 그대로 둔다. 감싸는 .table-scroll 의 라운드도 같이 0 이다(S1 블록). */
.report .table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background: #fff;
  border-radius: 0;
  overflow: hidden;
  font-size: clamp(10px, .77vw, 11.5px);
}

.report .table th {
  background: linear-gradient(90deg, #0b5ba4, #1c71b1);
  color: #fff;
  padding: 7px 6px;
  text-align: left;
  font-weight: 700;
}

.report .table td {
  border: 1px solid #e1e8f1;
  padding: 6px;
  vertical-align: top;
}

.report .table th,
.report .table td {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 우선순위(숫자) / 관리 항목 — em 기준이라 폰트 크기와 함께 줄어든다 */
.report .table th:first-child,
.report .table td:first-child {
  width: 6em;
}

.report .table th:nth-child(2),
.report .table td:nth-child(2) {
  width: 7.5em;
}

.report .table tr:nth-child(even) td {
  background: #f8fbff;
}


/* ===== 18. 스몰 카드 / 세그먼트 / 콜아웃 ===== */

/* 아이콘 타일 + 본문 2열 (2026-08-16 사용자 지시 "텍스트 위주라 아이콘을 섞어 달라").
   미니카드(.mini-card .emoji)와 같은 결의 옅은 파랑 타일이되, 이 카드가 더 작으므로
   타일도 한 단계 작게 잡았다. 아이콘은 장식이라 JSX 에서 aria-hidden 이다. */
.report .small-card {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: var(--pad-8);
}

.report .small-card .sc-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: clamp(24px, 1.85vw, 28px);
  height: clamp(24px, 1.85vw, 28px);
  border-radius: 9px;
  background: #eaf2fd;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1;
}

/* [2026-08-21 사용자 지시 "결과값 우측 정렬로 카드 높이를 줄여라"]
   왼쪽 본문(제목+설명)은 남는 폭을 다 쓰고, 값은 오른쪽 끝에 고정폭으로 선다.
   종전에는 값이 본문 안 두 번째 줄이라 카드가 3줄 높이였다(6장 × 한 줄 = 지면 한 구획). */
.report .small-card .sc-body {
  flex: 1 1 auto;
  min-width: 0;
}

.report .small-card h4 {
  margin: 0;
  font-size: clamp(11.5px, .87vw, 14px);
  font-weight: 700;
  color: #0b4f97;
  /* 값 열이 폭을 가져가면서 왼쪽 열이 좁아졌다 — 한글이 낱자로 쪼개지지 않게
     ("하루 최소 소 / 모") 어절 단위로만 접는다. */
  word-break: keep-all;
}

/* ----- 체성분 지표 카드의 값·설명 (2026-08-16 사용자 지시 "라벨과 수치를 시각적으로 분리") -----
   v8 원본은 이 두 줄을 인라인 style 로만 줬고(.v 22px/900/#0b2454, .v span 13px/#55667f),
   React 이식 때 인라인이 빠지면서 클래스도 안 만들어져 값·제목·설명이 전부 본문 크기로
   나왔다(1366px 실측 — "체수분 / 55 % / 수분 균형 지표"가 한 덩어리로 읽힘).
   여기서 클래스로 되살린다. 크기는 v8 원본이 아니라 S11 축소 비율(약 0.7배)에 맞춘 값이라
   지면 2쪽 예산을 건드리지 않는다: 22→15px / 13→10px. 색은 v8 원본 그대로다. */
/* 값 — 카드의 오른쪽 끝. nowrap 이라 줄지 않고, 왼쪽 본문이 대신 줄어든다. */
.report .small-card .v {
  flex: 0 0 auto;
  margin-left: auto;
  text-align: right;
  color: #0b2454;
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.15;
  white-space: nowrap;
}

.report .small-card .v span {
  margin-left: 2px;
  color: #55667f;
  font-size: clamp(9.5px, .67vw, 10.5px);
  font-weight: 700;
  letter-spacing: 0;
}

.report .small-card .memo {
  margin-top: 1px;
  color: #67768c;
  font-size: clamp(9.5px, .67vw, 10.5px);
  font-weight: 700;
  word-break: keep-all;
}

/* 미측정 카드 (2026-08-17 감사 major) — 값이 없으면 "- %" 대신 "미측정".
   숫자 칸의 강조를 빼고 아이콘도 흐리게 해, 판정이 있는 카드와 한눈에 구분되게 한다.
   1페이지 미니카드의 미측정 표현과 같은 계열이다. */
.report .small-card.is-none {
  background: #fafbfd;
}

.report .small-card.is-none .sc-icon {
  opacity: .45;
  filter: grayscale(1);
}

.report .small-card.is-none .v {
  color: #8b98ac;
  font-size: clamp(11.5px, .85vw, 13px);
  letter-spacing: -.02em;
}

.report .segment {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: var(--pad-8) var(--pad-6);
  text-align: center;
}

.report .segment .part {
  font-size: clamp(10px, .73vw, 11px);
  font-weight: 700;
  color: #173a7a;
  margin-bottom: 4px;
}

.report .segment .kg {
  font-size: clamp(12.5px, 1vw, 15px);
  font-weight: 700;
  color: #0b2454;
}

.report .segment .tag {
  display: inline-block;
  margin-top: 4px;
  padding: 3px 7px;
  border-radius: 6px;
  font-size: clamp(8px, .6vw, 9px);
  font-weight: 700;
  color: #fff;
  background: #1d20df;
}

.report .segment .tag.gray {
  background: #6d7687;
}

.report .segment .tag.gold {
  background: #f3c300;
  color: #17223d;
}

.report .segment .note {
  margin-top: 4px;
  font-size: clamp(9px, .67vw, 10px);
  color: #68798f;
  font-weight: 700;
}

.report .callout {
  margin-top: 7px;
  border-left: 4px solid #1aa9d1;
  background: #eef8fc;
  border-radius: 10px;
  padding: var(--pad-7) var(--pad-9);
  color: #184769;
  font-weight: 600;
  font-size: clamp(10.5px, .77vw, 12.5px);
}


/* ===== 19. 평형 도넛 / 좌표 플롯 ===== */

.report .balance-wrap {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 12px;
  align-items: start;
}

.report .balance-donut {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: conic-gradient(#1c63cf 0 82%, #e9edf3 82% 100%);
  display: grid;
  place-items: center;
  margin: 2px auto 0;
}

.report .balance-donut b {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 700;
  color: #114ea5;
}

.report .balance-text .title {
  font-size: clamp(13.5px, 1.13vw, 17px);
  font-weight: 700;
  color: #0d4c98;
  line-height: 1.2;
  letter-spacing: -.04em;
}

.report .balance-text .desc {
  margin-top: 4px;
  font-size: clamp(10.5px, .77vw, 11.5px);
  font-weight: 700;
  color: #50617a;
  line-height: 1.34;
}

.report .balance-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.report .balance-tags span {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: clamp(9.5px, .67vw, 10.5px);
  font-weight: 700;
}

.report .balance-tags .g {
  background: #e8f7e8;
  color: #2d9f39;
  border: 1px solid #d0ebd0;
}

.report .balance-tags .y {
  background: #fff3d7;
  color: #c48000;
  border: 1px solid #f1dfb2;
}

.report .balance-plot {
  width: 100%;
  margin: 8px auto 0;
  height: 106px;
  border: 1px solid #d6deea;
  border-radius: 14px;
  background: #f9fbfe;
  position: relative;
  overflow: hidden;
  max-width: 500px;
}

.report .balance-plot:before,
.report .balance-plot:after {
  content: "";
  position: absolute;
  background: #cad5e4;
}

.report .balance-plot:before {
  left: 24px;
  right: 24px;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
}

.report .balance-plot:after {
  top: 14px;
  bottom: 14px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
}

.report .balance-point {
  position: absolute;
  left: 57%;
  top: 48%;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 4px solid #5fa0f3;
  background: #fff;
  transform: translate(-50%, -50%);
}

.report .balance-point:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1f64cf;
  transform: translate(-50%, -50%);
}


/* ===== 20. 신경계 바 ===== */

.report .brain-bars {
  display: grid;
  gap: 7px;
}

.report .brain-row {
  display: grid;
  grid-template-columns: 74px 1fr 34px;
  gap: 6px;
  align-items: center;
}

.report .brain-row .lab {
  font-size: clamp(10px, .73vw, 11px);
  font-weight: 700;
  color: #22354e;
}

.report .brain-row .sc {
  text-align: right;
  font-size: clamp(10px, .73vw, 11px);
  font-weight: 700;
  color: #0b2454;
}


/* ===== 21. 태그 ===== */

.report .tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: clamp(9px, .63vw, 10px);
  font-weight: 700;
  color: #fff;
}

.report .tag.red {
  background: var(--red);
}

.report .tag.yellow {
  background: var(--yellow);
  color: #513700;
}

.report .tag.green {
  background: var(--green);
}

.report .tag.blue {
  background: var(--blue2);
}

.report .tag.purple {
  background: var(--purple);
}

.report .tag.gray {
  background: #7a8697;
}


/* ===== 22. 특징 그리드 ===== */

.report .feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.report .feature {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: var(--pad-9);
}

.report .feature .icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #edf5ff;
  color: #1263d1;
  font-size: clamp(15px, 1.33vw, 20px);
  flex: 0 0 auto;
}

.report .feature h3 {
  margin: 0 0 4px;
  font-size: clamp(12.5px, 1vw, 15px);
  font-weight: 700;
  color: #0b3f95;
  line-height: 1.12;
  letter-spacing: -.04em;
}

.report .feature p {
  margin: 0;
  font-size: clamp(10.5px, .77vw, 11.5px);
  color: #2d4059;
  font-weight: 700;
}


/* ===== 23. 액션 카드 ===== */

.report .action-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.report .action {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: var(--pad-9);
}

.report .action h3 {
  margin: 0 0 5px;
  font-size: clamp(12px, 1vw, 14.5px);
  font-weight: 700;
  color: #0b3f95;
  letter-spacing: -.04em;
}

/* [2026-08-27 사용자 지시 "실천 가이드에도 체크 아이콘"] 종전에는 ul 기본 마커(disc)를
   padding-left:14px 자리에 찍었다. 마커를 없애고 핵심 판정 요약(.note-list)과 **같은 원형 체크**
   를 항목마다 단다 — 도형은 parts.jsx NoteCheckIcon, 크기·색·정렬은 위 .note-check 한 벌이다.
   들여쓰기 자리는 목록 padding(14px)에서 [아이콘 1em + gap 6px] 로 옮겨간 것이라 본문 시작
   위치가 거의 그대로고(실측: 카드 폭 안에서 줄바꿈 지점 변화 없음), li 가 flex 라 두 줄로
   접히는 항목의 둘째 줄은 텍스트 칸 왼쪽에 맞는다(hanging indent). */
.report .action ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.report .action li {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  font-size: clamp(10px, .73vw, 11.5px);
  color: #273a54;
  font-weight: 600;
}


/* ===== 24. 타임라인 ===== */

.report .timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.report .timeline-step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: var(--pad-8);
  min-height: 86px;
}

.report .timeline-step .num {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #0d59a9;
  color: #fff;
  font-size: clamp(11px, .83vw, 12.5px);
  font-weight: 700;
  margin-bottom: 6px;
}

.report .timeline-step h4 {
  margin: 0 0 4px;
  font-size: clamp(11.5px, .9vw, 13.5px);
  font-weight: 700;
  color: #0b3f95;
}

.report .timeline-step p {
  margin: 0;
  font-size: clamp(10px, .73vw, 11px);
  color: #32445d;
  font-weight: 700;
}


/* ===== 25. KPI ===== */

/* [2026-08-17 감사 minor] 네 칸이 고정이라 회원에게 해당하지 않는 권고도 늘 떴다.
   JSX 가 해당하는 칸만 만들므로 열 수도 그에 맞춰 늘어난다(4칸 이하면 그만큼만 나눠 갖는다). */
.report .kpi-grid {
  display: grid;
  /* 열 수를 4로 고정하지 않고 항목 수만큼 만든다 (auto-fit + 1fr 은 문법상 불가) */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
}

/* 위험 단계가 높은 영역의 권고 — 같은 칸 안에서 색으로만 한 번 더 짚는다 */
.report .kpi.is-strong {
  border-color: #f0c9c2;
  background: #fff7f5;
}

.report .kpi.is-strong .v {
  color: #9e2b1c;
}

.report .kpi {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: var(--pad-8);
}

.report .kpi .k {
  font-size: clamp(10.5px, .8vw, 11.5px);
  color: #64748a;
  font-weight: 700;
}

.report .kpi .v {
  margin-top: 4px;
  font-size: clamp(12px, .93vw, 13.5px);
  color: #0b2454;
  font-weight: 700;
}


/* ===== 26. 푸터 / 페이지 번호 (화면에서 숨김) ===== */

.report .footer-note {
  display: none;
}

/* 제공자 표기 — 화면에서는 숨기고 인쇄 문서 맨 끝에만 (면책 문구와 같은 규칙) */
.report .provider-note {
  display: none;
}

.report .page-num {
  display: none;
}


/* ===== 27. 스펙트럼 카드 ===== */

.report .spectrum-card {
  margin-top: 8px;
  border: 1px solid #dce5f1;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  padding: var(--pad-8);
}

.report .spectrum-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  color: #0b4f97;
  font-size: clamp(11px, .8vw, 12px);
  font-weight: 700;
}

.report .spectrum-head span {
  font-size: clamp(9.5px, .7vw, 10.5px);
  color: #69788d;
  font-weight: 700;
}

.report .dot-left,
.report .dot-right {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 0 4px 0 8px;
}

.report .dot-left {
  background: #2f65ad;
}

.report .dot-right {
  background: #e85b71;
}

.report .spectrum-panel {
  position: relative;
  border: 1px solid #e0e6ef;
  border-radius: 10px;
  background: #fff;
  margin-top: 6px;
  padding: 6px 5px 3px;
}

.report .spectrum-title {
  position: absolute;
  left: 8px;
  top: 7px;
  font-size: clamp(10px, .73vw, 11px);
  font-weight: 700;
  color: #233650;
}

.report .spectrum-panel svg {
  width: 100%;
  height: 70px;
  display: block;
}

.report .spectrum-note {
  margin-top: 6px;
  border-left: 4px solid #1aa9d1;
  background: #eef8fc;
  border-radius: 10px;
  padding: var(--pad-7) var(--pad-8);
  color: #184769;
  font-size: clamp(10px, .77vw, 11.5px);
  font-weight: 700;
}


/* ===== 28. 가이드 히어로 ===== */

.report .guide-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.report .guide-visual-card {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: var(--pad-9);
}

.report .guide-visual-card .big-icon {
  width: 39px;
  height: 39px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #edf5ff;
  font-size: clamp(19px, 1.8vw, 27px);
  flex: 0 0 auto;
}

.report .guide-visual-card h3 {
  margin: 0 0 4px;
  color: #0b3f95;
  font-size: clamp(12.5px, 1vw, 15px);
  font-weight: 700;
  letter-spacing: -.04em;
}

.report .guide-visual-card p {
  margin: 0;
  font-size: clamp(10.5px, .77vw, 12px);
  color: #2d4059;
  font-weight: 500;
}


/* ===== 29. 퀵 카드 ===== */

.report .quick-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.report .quick-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: var(--pad-8);
  text-align: center;
}

.report .quick-card .qicon {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  margin: 0 auto 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #edf5ff;
  font-size: clamp(15px, 1.33vw, 20px);
}

.report .quick-card h4 {
  margin: 0 0 4px;
  color: #0b3f95;
  font-size: clamp(11.5px, .87vw, 13px);
  font-weight: 700;
}

.report .quick-card p {
  margin: 0;
  font-size: clamp(10.5px, .8vw, 12px);
  color: #33455e;
  font-weight: 600;
}


/* ===== 30~31. 미니 미터 / 루틴 플로우 — 삭제 (2026-08-14 사용자 지시) =====
   .mini-meter  : 우선도 막대 전면 제거(가이드 히어로·퀵 카드) → 단계 텍스트(.prio-level)만 남는다.
   .routine-flow: "하루 실천 루틴" 섹션 삭제, 그 자리에 "맞춤 건강관리 실천 가이드"가 들어갔다.
   두 클래스 모두 쓰는 마크업이 없어 규칙도 함께 제거한다(M3/M4 override 포함). */


/* ===== 32. 액션 상단 / 액션 점수 ===== */

.report .action .action-top {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
}

.report .action .action-emoji {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #edf5ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(14px, 1.27vw, 19px);
}

.report .action-score {
  margin-top: 8px;
}

.report .action-score .label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: clamp(10px, .73vw, 11px);
  font-weight: 700;
  color: #65738a;
}


/* ===== 33~35. 비주얼 타임라인 / 미션 태그 / 체크 카드 — 삭제 (2026-08-14 사용자 지시) =====
   "4주 실행 계획"(.visual-timeline / .week-card / .week-progress / .mission-tags)과
   "추적관리 체크포인트"(.check-visual-grid / .check-card / .check-row / .check-dot)가
   다른 섹션과 중복이라 통째로 빠졌다. 쓰는 마크업이 없어 규칙도 함께 제거한다
   (M3/M4 override 포함). 24번 .timeline 은 별개 클래스라 그대로 둔다. */

/* ===== M1. 좁은 PC (1400~1529px) — zoom 하향 ===== */
/* [design-css 2026-08-14] M1~M4 는 전부 `screen and` 로 한정한다.
   인쇄 지면(A4 세로)의 레이아웃 뷰포트는 210mm = 793.7px 라, 폭 조건만 쓴 미디어쿼리는
   인쇄에도 매칭되어 화면 모바일 축소본이 그대로 인쇄됐다(M3 매칭 → 스트립 4칸·미니카드 2열).
   인쇄 구성은 M5 가 단독으로 잡는다. */
@media screen and (min-width: 1400px) and (max-width: 1529px) {
  .report {
    padding: 0 16px;
  }

  .report .page {
    zoom: 1.45;
  }
}

/* ===== M2. 좁은 PC (1024~1399px) =====
   [2026-08-18 사용자 지시] zoom: 1.25 삭제 — 이 구간은 원배율로 둔다.
   screen 전용 미디어라 인쇄(--print-scale 체계)에는 영향이 없다. */

/* ===== M3. 태블릿 (~1023px) — 다열 grid 단계 축소 ===== */
@media screen and (max-width: 1023px) {
  .report .page {
    width: 100%;
    max-width: none;
    zoom: 1.45;
    padding: 24px 20px;
    margin-bottom: 40px;
    border-radius: 20px;
  }

  .report .summary-strip {
    grid-template-columns: repeat(4, 1fr);
  }

  /* 행 구분선은 "마지막 행만 빼기"(nth-last-child) 대신 "2행부터 위에 긋기"로 잡는다 —
     항목 수가 열 수의 배수가 아니어도(7종) 선이 어긋나지 않는다. */
  .report .status-item {
    border-bottom: 0;
  }

  .report .status-item:nth-child(n+5) {
    border-top: 1px solid var(--line);
  }

  .report .status-item:nth-child(4n) {
    border-right: 0;
  }

  .report .info-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .report .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .report .grid-5 {
    grid-template-columns: repeat(3, 1fr);
  }

  .report .grid-6 {
    grid-template-columns: repeat(3, 1fr);
  }

  .report .kpi-grid {
    /* 기본은 항목 수만큼 가로로 펼치지만(grid-auto-flow: column), 좁은 폭에서는 2열로 접는다 */
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
  }

  .report .quick-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .report .risk-detail-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .report .timeline {
    grid-template-columns: repeat(2, 1fr);
  }

  .report .action-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== M4. 모바일 (~767px) — 주요 grid 1열 전환 ===== */
@media screen and (max-width: 767px) {


  .report .page {
    zoom: 1.38;
    padding: 18px 14px;
    margin-bottom: 28px;
    border-radius: 16px;
  }

  .report .header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .report .meta {
    min-width: 0;
    width: 100%;
  }

  .report .summary-strip {
    grid-template-columns: repeat(3, 1fr);
    border-radius: 20px;
  }

  .report .summary-strip .status-item {
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  /* 3열 — 4번째 항목부터 위쪽에 행 구분선 (항목 수 무관) */
  .report .summary-strip .status-item:nth-child(n+4) {
    border-top: 1px solid var(--line);
  }

  .report .summary-strip .status-item:nth-child(3n),
  .report .summary-strip .status-item:last-child {
    border-right: 0;
  }

  .report .info-grid,
  .report .grid-2,
  .report .grid-3,
  .report .grid-4,
  .report .feature-grid,
  .report .guide-hero,
  .report .action-grid,
  .report .timeline,
  .report .kpi-grid {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  /* .body-split 의 모바일 스택은 파일 끝 블록에서 잡는다 —
     기본 선언(보조 블록)이 M4 보다 뒤에 있어 여기서 쓰면 같은 특정도로 밀린다 */

  .report .risk-detail-grid {
    grid-template-columns: 1fr;
  }

  .report .ai-main-title {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .report .ai-main-title-en {
    width: 100%;
    margin-left: 13px;
  }

  .report .ai-subsection-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .report .grid-5,
  .report .grid-6,
  .report .quick-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .report .balance-wrap {
    grid-template-columns: 1fr;
  }

  .report .balance-donut {
    margin: 0 auto;
  }

  .report .balance-text {
    text-align: center;
  }

  .report .balance-tags {
    justify-content: center;
  }

  .report .balance-plot {
    max-width: 100%;
  }

  .report .risk-row {
    grid-template-columns: 72px 1fr 36px;
  }

  .report .brain-row {
    grid-template-columns: 72px 1fr 36px;
  }

  .report .score-box {
    gap: 12px;
  }

  .report .score-ring {
    width: 58px;
    height: 58px;
  }

  .report .score-ring b {
    width: 41px;
    height: 41px;
  }

  .report .status-icon {
    width: 40px;
    height: 40px;
  }

  .report .face-badge {
    width: 24px;
    height: 24px;
  }

  .report .timeline-step {
    min-height: 0;
  }

  .report .mini-card {
    min-height: 0;
  }
}

/* ===== M5. 인쇄 (A4) — 연속 문서 + 인쇄 전용 축소 (사용자 지시 2026-08-14) =====
   [배경] v8 원본은 "A4 한 장 = .page 한 개" 설계였다(.page{width:210mm; min-height:297mm}).
   개편으로 섹션이 줄어 .page 4개 중 2·3번이 지면의 40~68% 만 쓰는데도 각자 한 장을 통째로
   차지해, 넘친 1페이지가 뒤로 밀리며 총 5장이 나왔다(실측). 크기만 줄여서는 4장 밑으로
   내려가지 않는 구조적 문제다.
   [전환] 인쇄를 화면과 같은 "연속 문서"로 바꾼다.
     · min-height 297mm 해제 → .page 는 그냥 문서의 한 구획, 콘텐츠가 이어 흐른다
     · 지면 여백은 .page 안쪽 패딩이 아니라 @page margin 이 담당한다
       (연속 흐름에서는 안쪽 패딩이 첫 장 위·끝 장 아래에만 걸려 2장부터 여백이 0 이 된다)
     · 전체 축소는 .page 의 zoom 한 곳에서만 건다 → S10 참조
   내용은 하나도 지우지 않는다. 열 구성은 미디어쿼리가 걸리지 않으므로 전부 데스크톱
   기본값이다(상태 스트립 7칸 · 미니카드 3열 · grid-2/3 다열 · 체성분 좌우 2열). */
/* ----- 카드 경계 보강 (2026-08-18 그림자 제거의 짝) -----
   v8 의 --line(#dadeeb)은 **그림자와 한 쌍으로** 고른 값이다. 그림자를 걷어내자 흰 카드가
   흰 배경 위에서 서로 붙어 보였다(체성분 6칸·미니카드 5칸처럼 카드가 여럿 붙는 자리에서 특히).
   지면에서 이미 쓰던 한 단계 진한 선(#b9c3d9)을 화면에도 그대로 준다 — 새 색을 만들지 않았고,
   이제 화면과 지면의 카드 경계가 같은 값이다.
   ※ 카드 전체 테두리가 --line 인 것만 바꾼다. 색으로 뜻을 나르는 테두리
     (.dq-notice 노랑 · .risk-detail-card 단계색 3px 윗선)는 건드리지 않는다. */
.report .panel,
.report .summary-strip,
.report .mini-card,
.report .meta,
.report .small-card,
.report .segment,
.report .feature,
.report .action,
.report .timeline-step,
.report .kpi,
.report .quick-card,
.report .guide-visual-card,
.report .spectrum-card,
.report .risk-summary-panel,
.report .extra-items,
.report .ck-summary {
  border-color: #b9c3d9;
}


@media print {
  .report {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    /* 연속 흐름이 되면서 장 끝에 남는 여백이 앱 배경(#EEF0F7)으로 보였다 — 지면은 흰색 */
    background: #fff;
  }

  .report .page {
    /* 화면용 확대(1.59/1.45/1.25/1.38)를 해제한 뒤 인쇄 전용 축소를 건다 — 값은 S10 */
    zoom: var(--print-scale, 0.79);
    /* 지면 폭은 @page margin 이 잡는다 — 여기서 210mm 를 다시 주면 zoom 배만큼 넘친다 */
    width: auto;
    max-width: none;
    /* 강제 한 장 점유 해제 = 연속 흐름의 핵심 */
    min-height: 0;
    padding: 0;
    margin: 0;
    /* 지면 배경은 흰색 — v8 회청색 그라데이션은 화면 전용, 잉크 절약·문서 인상
       (사용자 확정 2026-08-14). 내부 카드·미니카드 색은 그대로 인쇄된다. */
    background: #fff;
    border-radius: 0;
    /* .page 는 이제 여러 장에 걸쳐 쪼개져야 한다 — 잘림 방지는 S10 이 작은 카드에만 건다 */
    overflow: visible;
  }

  /* 인쇄도 화면과 같은 규칙 — 카드는 그림자 없이 진한 테두리로 구분 (2026-08-14) */
  .report .panel,
  .report .summary-strip,
  .report .mini-card,
  .report .meta {
    border-color: #B9C3D9;
  }

  @page {
    size: A4;
    /* v8 의 지면 여백 10.8mm 을 .page 패딩에서 @page 로 옮겼고, 2쪽 압축을 위해 9mm 로
       한 단계 좁혔다 (2026-08-16). 9mm 는 가정용·사무용 레이저/잉크젯의 인쇄 가능 영역 안이다. */
    margin: 9mm;
  }
}


/* ============================================================
   [반응형 보완] — design-css 추가분 (v8 원본에 없던 규칙만)
   원칙: 기존 셀렉터의 시각 값은 건드리지 않는다. 폭 대응만 더한다.
   ============================================================ */

/* ===== S1. 표 가로 스크롤 래퍼 =====
   JSX: <div class="table-scroll"><table class="table">…</table></div>
   좁은 폭에서 .table 이 페이지를 밀어내지 않도록 감싼다. */
.report .table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* [2026-08-18] 표 라운드 제거 지시에 따라 0 — 여기 값이 남아 있으면 가로 스크롤 상자의
     모서리만 둥글게 남아 표 머리(진한 파랑)가 잘려 보인다. */
  border-radius: 0;
}

.report .table-scroll .table {
  min-width: 380px;
}

/* ===== S2. value-pill 색 변형 — 삭제 (2026-08-14 사용자 지시) =====
   게이지의 값 알약(.value-pill)이 ▼ 화살표 마커(.gauge-marker)로 대체돼 쓰는 곳이 없다. */

/* ===== S3. 데이터 없는 섹션 축약 표시 (.panel 안에 들어감) ===== */
.report .data-pending {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: var(--pad-8);
  border: 1px dashed #cbd8e8;
  border-radius: 11px;
  background: #f7fafd;
  color: #69788e;
  font-size: clamp(10.5px, calc(9.72px + .202vw), 12.3px);
  /* 390px→10.5px, 1280px→12.3px */
  font-weight: 700;
  text-align: center;
}

.report .data-pending .pending-icon {
  font-size: clamp(13px, calc(11.24px + .449vw), 17px);
  /* 390px→13px, 1280px→17px */
  line-height: 1;
}

/* ===== S4. 초광폭 (1530px~) — 최대 폭 1500px 고정 ===== */
@media screen and (min-width: 1530px) {
  .report {
    width: 1500px;
    max-width: 1500px;
  }
}

/* ===== S5. 초소형 폭 (~430px) — 잔여 다열 grid 정리 =====
   430px 까지 잡는다. 이 구간이 M4(zoom 1.38)로 넘어가면 리포트 레이아웃 폭이
   오히려 좁아져(430px 기준 277px vs 390px 기준 292px) 줄바꿈이 더 심해진다. */
@media screen and (max-width: 430px) {
  .report {
    padding: 0 8px;
  }

  .report .page {
    zoom: 1.2;
    padding: 14px 12px;
    border-radius: 14px;
  }

  .report .summary-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .report .summary-strip .status-item:nth-child(3n) {
    border-right: 1px solid var(--line);
  }

  .report .summary-strip .status-item:nth-child(2n) {
    border-right: 0;
  }

  /* 2열 — 3번째 항목부터 위쪽에 행 구분선. 앞의 2개는 M4 의 n+4 규칙을 되돌린다 */
  .report .summary-strip .status-item:nth-child(n+3) {
    border-top: 1px solid var(--line);
  }

  .report .summary-strip .status-item:nth-child(-n+2) {
    border-top: 0;
  }

  .report .grid-5,
  .report .grid-6,
  .report .quick-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .report .meta .row {
    flex-wrap: wrap;
  }

  .report .risk-row,
  .report .brain-row {
    grid-template-columns: 62px 1fr 32px;
  }

  .report .balance-plot {
    height: 110px;
  }

  .report .spectrum-panel svg {
    height: 72px;
  }

  .report .table-scroll .table {
    min-width: 340px;
  }
}

/* ===== S6. 인쇄 보완 — 추가한 래퍼가 인쇄를 자르지 않게만 처리 ===== */
@media print {
  .report .table-scroll {
    overflow: visible;
  }

  /* [2026-08-14] "집중관리 우선순위" 표 인쇄 넘침 수정.
     화면에서는 좁은 폭에서 가로 스크롤을 쓰려고 표에 min-width:380px 를 주는데(S1),
     인쇄는 위에서 overflow 를 풀기 때문에 그 380px 가 그대로 패널(약 325px) 밖으로 삐져나왔다.
     인쇄에서는 스크롤이 불가능하므로 하한을 없애고 지면 폭에 맞춘다
     (열 폭 고정·줄바꿈은 17번 블록의 table-layout:fixed / keep-all 이 담당). */
  .report .table-scroll .table {
    min-width: 0;
    width: 100%;
  }

  .report.is-standalone {
    background: #fff;
  }

  /* ----- 면책 문구 + 제공자 표기 (2026-08-20 사용자 지적 "프린트에서 안 보임") -----
     보이게 하는 규칙이 @media screen 에만 있어 지면에서는 기본 display:none 이 그대로
     적용되고 있었다. 인쇄에도 같은 규칙을 둔다 — 문서 맨 끝(.page:last-child)에 한 번. */
  .report .page:last-child>.footer-note {
    display: block;
    margin-top: 14px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 8.5pt;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
  }

  .report .page:last-child>.provider-note {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 8pt;
    font-weight: 600;
    letter-spacing: .02em;
    text-align: center;
  }

}


/* ===== S7. 축소 허용 (grid/flex 아이템의 자동 최소 폭 해제) =====
   모바일 가로 잘림의 실제 원인. grid/flex 아이템의 기본 min-width 는 auto(=min-content)라
   1fr 트랙이 "내용의 최소 폭"까지 부풀어 부모 폭을 넘어선다. 390px 실측:
     .tab-panel-enter/.report 484px (뷰포트 390px) → .app-main 이 우측을 잘라냄
     .grid-2.risk-priority-grid 트랙 364px (여유 292px) → .page(overflow:hidden) 가 잘라냄
   min-width:0 은 "넘칠 때만" 개입하므로 여유가 있는 폭(데스크톱)에서는 결과가 바뀌지 않는다.
   시각 값(색·폰트·간격)은 전혀 손대지 않는다. */

/* 리포트 루트 — 측정이력 탭 래퍼(.tab-panel-enter)가 grid 라 이 한 줄이 바깥 넘침을 끊는다 */
.report {
  min-width: 0;
}

.report .summary-strip>*,
.report .info-grid>*,
.report .body-split>*,
.report .grid-2>*,
.report .grid-3>*,
.report .grid-4>*,
.report .grid-5>*,
.report .grid-6>*,
.report .track>*,
.report .score-track>*,
/* .legend>span 은 제외한다 — 13번에서 min-width:max-content 로 겹침을 막고 있고,
   여기서 0 으로 되돌리면 좁은 구간의 라벨이 다시 옆 라벨을 덮는다(2026-08-18).
   라벨 폭 합이 트랙보다 작다는 것은 실측으로 확인했다(13번 주석). */
.report .risk-detail-grid>*,
.report .risk-rows>*,
.report .risk-row>*,
.report .brain-bars>*,
.report .brain-row>*,
.report .balance-wrap>*,
.report .feature-grid>*,
.report .feature>*,
.report .guide-hero>*,
.report .guide-visual-card>*,
.report .action-grid>*,
.report .action>*,
.report .timeline>*,
.report .quick-grid>*,
.report .kpi-grid>*,
.report .score-box>*,
.report .risk-card-head>* {
  min-width: 0;
}

/* .table-scroll 은 grid 아이템이 아니라 블록 자식이라 표의 min-width(S1) 를 부모에게 그대로
   올려보낸다 — 내부 스크롤이 정본이므로 바깥 폭을 밀지 않게 잠근다. */
.report .table-scroll {
  min-width: 0;
  max-width: 100%;
}

/* 긴 수치·영문 토큰이 줄바꿈되지 않아 칸을 밀어내는 것 방지 (줄바꿈 지점만 허용) */
.report .rsb-name,
.report .interpretation-rule b,
.report .gauge-range,
.report .meta .row {
  overflow-wrap: anywhere;
}


/* ===== S8. 상태 스트립 항목 수 무관 꽉 채우기 (1024px~) =====
   v8 원본은 8종 기준 repeat(8, 1fr) 고정이라, status_items 가 7종인 지금은
   8번째 트랙이 빈 칸으로 남아 우측에 여백이 생겼다(실측 1500px: 트랙 107.55px 공백).
   auto-fit 은 아이템이 없는 트랙을 0 으로 접고 남은 폭을 1fr 들이 나눠 갖는다 →
   7종이면 7등분, 구버전 8키 리포트가 내려오면 8등분으로 자동 대응한다.
   min 80px 은 "한 줄에 몇 칸까지 만들지" 계산용 하한 — 1024px 에서도 스트립 내부 폭이
   686px 라 8트랙이 잡히므로 7종이 두 줄로 접히지 않는다.
   1023px 이하(M3 4열 / M4 3열 / S5 2열)는 그대로 두어 기존 반응형 단계를 유지한다.
   인쇄도 같은 구성을 쓴다 — 지면 뷰포트가 794px 라 min-width 조건에 걸리지 않으므로
   `, print` 를 더해 명시한다(스트립 내부 폭 712px → 8트랙까지 잡히고 7종이면 7등분). */
@media screen and (min-width: 1024px),
print {
  .report .summary-strip {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  }
}


/* ============================================================
   [frontend-dev] React 이식 보조 블록
   v8 원본이 인라인 style 로 처리하던 "색·폰트·여백"을 클래스로 승격한 것뿐.
   시각 값은 v8 원본과 동일하며, 동적 수치(width/left/top %)만 JSX 인라인으로 남긴다.
   ============================================================ */

/* v8 원본 style="margin-top:16px" / "margin-top:14px" 대체 (2026-08-16 전체 축소로 12px) */
.report .report-gap-top {
  margin-top: 10px;
}

/* ----- 체성분 페이지 좌우 2열 (2026-08-14 사용자 지시) -----
   "체성분 / 체수분 결과"(지표 카드 6장)와 "골격근·지방 분석"(판정 게이지)이 상하로 쌓여
   2페이지가 세로로 길었다 → 데스크톱·태블릿·인쇄에서 좌우 2열로 나란히 둔다.
   두 열 모두 같은 높이에서 .section-title 로 시작해 제목 줄이 맞는다.
   왼쪽 카드는 반쪽 폭이므로 2열 × 3행(.grid-6 override)으로 접는다 —
   `.report .body-split .grid-6` 은 M3/M4/S5 의 `.report .grid-6` 보다 특정도가 높아
   선언 순서와 무관하게 이긴다. 모바일(~767px)에서는 M4 가 다시 상하 스택으로 되돌린다. */
/* [2026-08-18 사용자 지시 "좌우 패널 높이를 맞춰라"]
   그 전에는 align-items:start 라 두 열이 각자 제 높이로 끝났다. 왼쪽(지표 카드 2×3)이
   오른쪽(판정 게이지)보다 길어 오른쪽 아래가 잘린 것처럼 비었고, 게이지 이름·막대를
   한 행으로 붙이면서(13번) 오른쪽이 더 짧아져 어긋남이 커졌다.
   이제 두 열이 같은 높이로 늘어나고(stretch), 열 안의 본문 상자(.grid-6 / .panel)가 남는
   세로를 가져간다. 늘어난 몫은 내용 사이 간격으로 나눠 준다 — 글자·카드를 늘리거나
   지우지 않는다. 행 높이 자체는 종전과 같다(원래도 긴 쪽이 행 높이였다). */
.report .body-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
}

.report .body-split-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* 제목 아래 본문 상자가 열의 남은 높이를 채운다 */
.report .body-split-col>.grid-6,
.report .body-split-col>.panel {
  flex: 1 1 auto;
}

/* 게이지 카드는 남는 세로를 게이지 사이로 고르게 벌린다 — 위에 몰아 두면 카드 아래쪽이
   빈 채로 남아 "높이만 맞춘" 티가 난다. 카드가 짧은 쪽일 때만 효과가 있다. */
.report .body-split-col>.panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.report .body-split .grid-6 {
  grid-template-columns: repeat(2, 1fr);
}

/* ----- 우선도 단계 텍스트 (2026-08-14 사용자 지시 — 우선도 막대 전면 제거) -----
   막대가 사라진 자리를 단계 텍스트가 대신하므로 색+연한 배경 칩으로 눈에 띄게 한다.
   색은 게이지와 같은 명도 램프를 따른다: 보통=회색(밝음) / 높음=주황(중간) / 매우 높음=빨강(어두움).
   글자색 L* 는 각각 약 47 / 44 / 33 이라 흑백 인쇄에서도 "매우 높음"이 가장 진하게 나온다. */
.report .prio-level {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid;
  font-size: clamp(10px, calc(9.12px + .225vw), 11px);
  /* 390px→10px, 1280px→11px (.meter-head / .action-score .label 과 동일) */
  font-weight: 700;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.report .prio-level.is-normal {
  background: #eff2f6;
  border-color: #d5dbe4;
  color: #5c6b80;
}

/* "높음"은 주황 뱃지다 — 2026-08-16 램프 개정으로 주황 잉크가 --seg-1-ink 에서
   --seg-2-ink 로 옮겨졌다(값 #9d5a12 동일, 뱃지 색은 변화 없음). */
.report .prio-level.is-high {
  background: #fdeee2;
  border-color: #f2ceb0;
  color: var(--seg-2-ink);
}

.report .prio-level.is-severe {
  background: #fbe3e3;
  border-color: #eebfbf;
  color: var(--seg-3-ink);
}

/* "실천 우선도 + 칩"은 한 줄 가운데 정렬 (사용자 지시 2026-08-18 — 종전 두 줄 쌓기 폐기) */
.report .quick-card .meter-head {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
}

/* v8 원본 style="border:none;box-shadow:none;padding:0" (panel 안의 small-card) 대체 —
   삭제 (2026-08-16). 쓰던 곳은 3페이지 혈압·혈당·산소포화도 결과 카드 셋뿐이었고,
   그 카드들이 .vital-head / .vital-value 구조(S13)로 바뀌면서 마크업에서 사라졌다. */

/* v8 원본 style="font-size:18px;margin-bottom:10px" (패널 내부 소제목) 대체.
   [2026-08-18 위계 정리] 13~15.5px 이던 것을 11.5~13.5px 로 내렸다. 소분류(②, 12.5~15px)보다
   카드 제목(③)이 오히려 커서 세 급의 순서가 뒤집혀 있었다 — 카드는 테두리가 이미 "여기부터
   한 덩어리"를 말하므로 글자까지 클 필요가 없다. 카드 본문(10.5~12px)보다는 확실히 크다. */
.report .section-title.is-compact {
  margin: 0 0 6px;
  /* [2026-08-24 사용자 확정값 — devtools 조정 반영] */
  font-size: clamp(12.5px, calc(11.7px + .219vw), 16px);
}

/* v8 원본 score-ring 은 conic-gradient 72% 고정 — 점수에 따라 채워지도록 변수화
   (비율은 JSX 의 style={{"--score": n}} = 기하값만 주입) */
.report .score-ring {
  background: conic-gradient(var(--ring, var(--ring-3)) 0 calc(var(--score, 72) * 1%), var(--ring-track) calc(var(--score, 72) * 1%) 100%);
}

/* [2026-08-16 사용자 지시] 링 색을 위험단계에 따라 바꾼다 — 좋은 상태는 블루.
   단계 클래스(stage-1~4)는 JSX 가 클래스만 붙이고 색은 여기서 고른다.
   --ring 은 .score-box 에 걸어 링(배경)과 등급 문구(글자색)가 같은 값을 보게 한다. */
.report .score-box.stage-1 {
  --ring: var(--ring-1);
}

.report .score-box.stage-2 {
  --ring: var(--ring-2);
}

.report .score-box.stage-3 {
  --ring: var(--ring-3);
}

.report .score-box.stage-4 {
  --ring: var(--ring-4);
}

/* v8 원본 mini-meter / action-score 위의 인라인 flex 헤더 대체
   (style="display:flex;justify-content:space-between;font-size:11px;font-weight:900;color:#65738a;…") */
/* 우선도 막대가 사라져(2026-08-14) 아래쪽 여백은 필요 없다 — 라벨 한 줄만 남는다 */
.report .meter-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  color: #65738a;
  font-size: clamp(10px, calc(9.12px + .225vw), 11px);
  /* 390px→10px, 1280px→11px (v8 고정 11px 상한 유지) */
  font-weight: 700;
}

/* 데이터 준비 중 블록이 callout 과 연달아 올 때 간격 */
.report .data-pending+.callout {
  margin-top: 8px;
}


/* ============================================================
   S9. 화면 = 연속 문서 (사용자 확정 지시 2026-08-13)
   "회색 카드 박스로 분류해 놓은 것을 삭제하고 각 분류는 라인으로 구분"

   - v8 의 페이지 카드(.page 의 회색 그라데이션 + 라운드 + 그림자 + 80px 간격)를 없애고,
     리포트 전체를 흰 카드 하나로 묶는다. 앱 배경(#EEF0F7)과는 그 카드 하나로 구분된다.
   - 페이지 경계와 페이지 안의 주요 분류(.page 직계 .section-title)는 1px var(--line) 라인으로 나눈다.
   - 전부 @media screen 안에만 둔다 → 인쇄(@media print, M5/S6)는 기존 A4 페이지 나눔 그대로.
   - v8 시각 값(색·폰트·간격)은 그대로. 바뀌는 것은 "박스 → 라인" 뿐이다.
   ============================================================ */

@media screen {

  /* ----- 감싸는 라운드 박스 없이 페이지 배경 위에 바로 (사용자 확정 2026-08-14) -----
     테두리·라운드·그림자·흰 배경을 모두 제거해 리포트 내용이 화면에 그대로 펼쳐진다.
     내부 흰 패널·미니카드가 배경(#EEF0F7)과의 대비를 만든다. */
  .report {
    background: transparent;
    border: 0;
    border-radius: 0;
    /* 하단 여백은 공통 셸(.app-main 24px)에 맡긴다 — 겹으로 주지 않는다 (2026-08-14) */
  }

  /* ----- 페이지 카드 해제 → 문서의 한 구획 ----- */
  .report .page {
    /* 감싸는 박스가 없어졌으므로(2026-08-14) 화면에서는 A4 고정 폭(943.4px)과
       내부 패딩(10.8mm)을 모두 풀어 리포트 폭(최대 1500px)을 콘텐츠가 그대로 채운다.
       인쇄는 @media print 가 원래 폭·패딩을 유지한다. */
    width: 100%;
    max-width: none;
    /* 좌우는 풀폭(0), 상·하는 원래 페이지 패딩 수치(10.8mm) 유지 (사용자 지시 2026-08-14) */
    padding: 0.8mm 0;
    margin-inline: auto;
    /* 다음 페이지 경계선까지의 여백 — 페이지 안 분류 경계와 같은 리듬.
       [2026-08-19 사용자 지시] 화면 구획 간격 확대(13→26px). 인쇄는 print 블록이 별도.
       마지막 페이지는 위(.report .page:last-child)에서 0 으로 유지된다. */
    margin-bottom: calc(26px - 0.8mm);
    background: transparent;
    border-radius: 0;
  }

  /* 페이지 경계 = 라인 */
  .report .page+.page {
    border-top: 1px solid var(--line);
  }

  /* 경계선 → 다음 페이지 첫 요소 = 20px
     (페이지 상단 패딩 0.8mm 포함. .page>.section-title 의 padding-top 20px 과 같은 값)
     첫 요소가 .section-title / .ai-main-title / .ai-subsection-title 무엇이든 같은 리듬을 준다. */
  .report .page+.page> :first-child {
    /* [2026-08-19] 11→22px — 구획 간격 확대의 짝(라인 → 첫 요소) */
    margin-top: calc(22px - 0.8mm);
  }

  /* 페이지 안의 주요 분류 경계 = 라인 — 문서 전체 기준 리듬 (2026-08-14)
     (.page 직계 .section-title 만. .panel 안의 .section-title 은 대상 아님)
     .page 좌우 패딩이 0 이므로 음수 마진 보정 없이 전체 폭 라인.
     .ai-main-title 은 자체 밑줄(border-bottom)을 가진 대제목이라 제외한다.
     이전 콘텐츠 → 라인 22px / 라인 → 제목 20px / 제목 → 콘텐츠 12px.
     페이지 경계선(.page+.page)도 위에서 같은 22/20 값을 쓴다. */
  .report .page>.section-title:not(:first-child):not(.ai-main-title):not(.is-sub) {
    /* [2026-08-19] 13/11 → 26/22 — 화면 구획 사이 숨통(인쇄는 print 블록 별도) */
    margin: 26px 0 10px;
    padding: 22px 0 0;
    border-top: 1px solid var(--line);
  }

  /* ----- 흰 바탕 위 카드 톤 정리 -----
     그림자 없이 테두리로만 구분한다 (사용자 지시 2026-08-14 — 그림자 제거, 테두리 진하게).
     v8 의 --line(#dadeeb)은 그림자와 함께 쓰던 값이라, 그림자를 빼면 경계가 흐려져
     한 단계 진한 선으로 올린다. */
  .report .panel,
  .report .summary-strip,
  .report .mini-card,
  .report .meta {
    border-color: #B9C3D9;
  }

  /* ----- 면책 문구 -----
     페이지 번호(n/6)는 연속 문서에서 의미가 없어 계속 숨긴다(26번 블록).
     면책 문구만 문서 맨 끝에 한 번 작게 노출한다. */
  .report .page:last-child>.footer-note {
    display: block;
    margin-top: 18px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: clamp(9px, calc(8.34px + .169vw), 10.5px);
    /* 390px→9px, 1280px→10.5px */
    font-weight: 600;
    line-height: 1.55;
    text-align: center;
  }

  /* 제공자 표기 — 면책 아래 마지막 줄, 한 단계 작고 옅게 (8pt — 7pt 하한 위) */
  .report .page:last-child>.provider-note {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 8pt;
    font-weight: 600;
    letter-spacing: .02em;
    text-align: center;
  }
}

/* 태블릿 이하 — M3/M4/S5 가 되돌려 놓는 값(margin-bottom·border-radius)을 다시 잡는다 */
@media screen and (max-width: 1023px) {
  .report {
    border-radius: 20px;
  }

  .report .page {
    /* 리듬 값(22/20/12)은 데스크톱과 동일 — 위 @media screen 블록이 그대로 적용된다 */
    border-radius: 0;
  }
}

/* 모바일 — 경계 리듬을 한 단계 좁힌다 (22/20/12 → 16/14/12), 문서 전체 동일 적용 */
@media screen and (max-width: 767px) {
  .report {
    border-radius: 16px;
  }

  .report .page {
    margin-bottom: calc(12px - 0.8mm);
    border-radius: 0;
  }

  .report .page+.page> :first-child {
    margin-top: calc(10px - 0.8mm);
  }

  .report .page>.section-title:not(:first-child):not(.ai-main-title):not(.is-sub) {
    margin: 12px 0 9px;
    padding: 10px 0 0;
  }

  /* [2026-08-14] 체성분 좌우 2열 → 상하 스택.
     기본 2열 선언이 M4 뒤(보조 블록)에 있어 되돌리는 규칙도 그보다 뒤인 여기에 둔다. */
  .report .body-split {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media screen and (max-width: 430px) {
  .report {
    border-radius: 14px;
  }

  .report .page {
    border-radius: 0;
  }
}

/* ============================================================
   S10. 인쇄 압축 — A4 5장 → 3장 (2026-08-14) → 2장 (2026-08-16) → **3장 · 본문 9pt** (2026-08-17)
   "내용은 하나도 지우지 말고, 전체 크기를 줄여서 3쪽 이내로." (2026-08-14)
   "화면 UI 자체를 줄여서 인쇄 2장으로." (2026-08-16 → S11 참조)
   "고령자가 읽는 문서다. 3쪽까지 허용하고 글자를 키워라 — 본문 최소 9pt." (2026-08-17)
   → 쪽수를 줄이는 것이 더 이상 최우선이 아니다. 이 구역의 여백 압축은 그대로 살아 있지만,
     **글자는 압축 대상에서 빠졌다**(블록 끝 "지면 글자 하한" 참조).

   [적용 순서]
   1) 구조 — M5 가 .page 의 min-height:297mm 를 풀어 연속 흐름으로 바꿨다.
      이것만으로 지면의 40~68% 만 쓰던 2·3번 구획의 빈 공간이 사라진다.
   2) 축소 — 아래 --print-scale 한 값으로 리포트 전체를 등비 축소한다.
      zoom 은 폰트·패딩·게이지 높이·테두리까지 한 번에 줄이므로 값들 사이의 비율,
      즉 v8 디자인의 리듬이 그대로 보존된다(개별 값을 손으로 줄이면 비율이 깨진다).
      zoom 배만큼 논리 폭이 넓어지므로 줄바꿈은 오히려 줄어든다.
   3) 리듬 — 한 장에 여러 구획이 담기게 되어, 구획 경계를 화면(S9)과 같은 1px 라인으로
      나눈다. 지면에서 "제목이 갑자기 튀어나오는" 인상을 막는다.
   4) 잘림 — 미니카드·지표 카드처럼 작은 단위에만 break-inside:avoid 를 건다.
      큰 패널에 걸면 통째로 다음 장으로 밀려 오히려 빈 지면이 생긴다.

   화면(@media screen)에는 한 줄도 관여하지 않는다.
   ============================================================ */

@media print {

  /* ----- 축소 배율 (유일한 조정 손잡이) -----
     1.00 = CSS 에 적힌 크기 그대로. M5 의 `.report .page { zoom: var(--print-scale) }` 가 읽는다.

     [2026-08-14] 3장 목표 — 0.79 채택 (그때의 CSS 기준 "3장에 드는 가장 큰 배율")
     [2026-08-16] 2장 목표 — S11 로 CSS 자체를 줄인 뒤 재측정. 홍길동 리포트(BMI 88.9) 실측,
       마지막 장 여유는 A4 세로(841.9pt) 대비 비율:
         0.84 → 3장          0.82 → 3장          0.80 → 3장
         0.78 → 2장, 여유  62.6pt ( 7.4%)   ※ 2장에 드는 가장 큰 배율이지만 빠듯하다
         0.76 → 2장, 여유  81.6pt ( 9.7%)
         0.74 → 2장, 여유 142.8pt (17.0% ≈ 50mm)  ← 채택
         0.73 → 2장, 여유 162.0pt (19.2%)
         0.72 → 2장, 여유 193.2pt (22.9%)
       0.78 이 아니라 0.74 를 고른 이유: 건강검진 결과 섹션이 아직 리포트에 없다.
       나중에 그 섹션이 들어오면 분량이 늘어나므로, 마지막 장에 한 구획이 더 들어갈
       여백(약 50mm)을 남겨 둔다. 건강검진 섹션이 붙은 뒤 다시 재면서 조정할 값이다.

     [배율과 글자 크기의 관계 — 오해하기 쉬운 부분]
     지면 뷰포트는 A4 폭 210mm(=793.7px)이라 모든 clamp() 의 vw 항이 하한 아래로 떨어진다.
     즉 인쇄 글자 크기는 항상 clamp 의 "최솟값 × --print-scale" 이다.
     따라서 배율만 올린다고 글자가 커지는 게 아니라, CSS 값과 배율의 곱이 실제 크기다.
       2026-08-14: 본문 하한 11.5px × 0.79 = 9.09px
       2026-08-16: 본문 하한 11.5px × 0.74 = 8.51px  (-6%)
     3장 분량을 2장에 담으면서 본문이 6% 밖에 줄지 않은 것은, S11 축소분의 대부분을
     글자가 아니라 여백·아이콘·고정 높이에서 뺐기 때문이다.

     [2026-08-16 재조정 0.74 → 0.72] AI 리포트 품질개선으로 리포트 맨 위에 측정값 확인
       안내(S12 `.dq-notice`)가 들어왔다. 이건 선택 섹션이 아니라 안전 안내라 값이 이상한
       리포트에서는 항상 붙는다. 테스터1 리포트(critical 1 + warn 2 = 3줄, 화면 높이 147px)로
       실측하니 0.74 에서 3장이 됐다. 지면 압축(S12 @media print)으로 39px 을 깎아도
       페이지가 넘어가는 지점을 못 넘겼다 — 쪼갤 수 없는 큰 블록 하나가 경계에 걸려 있어
       40px 안팎의 절감으로는 어느 쪽에 떨어지는지가 바뀌지 않는다. 배율 임계 실측:
         0.74 → 3장   0.735 → 3장   0.73 → 3장   0.728 → 3장
         0.725 → 2장 (임계)          0.72 → 2장  ← 채택 (임계에서 한 계단 여유)
       0.725 가 아니라 0.72 를 고른 이유: 안내 줄 수는 측정값에 따라 늘어난다(최대 8종).
       임계값에 딱 붙여 두면 안내가 한 줄만 늘어도 다시 3장이 된다.
       본문 하한 11.5px × 0.72 = 8.28px (0.74 대비 -2.7%).

     [2026-08-16 복귀 0.72 → 0.74] 사용자 지시로 측정값 확인 안내의 화면·지면 노출을 껐다
       (parts.jsx SHOW_DATA_QUALITY=false). 위 0.72 의 근거였던 안내 블록이 지면에서
       사라졌으므로 글자를 다시 키운다. 대신 "추가 관리 항목"이 접힘 해제로 항상 펼쳐지므로
       그 부담이 새로 들어왔다. 3개 리포트 실측(0.72 기준 2장 유지 상한):
         테스터1 75pt / 홍길동 129pt / 여준섭 282pt
       배율별 쪽수: 0.74~0.79 전부 2장, 0.792 부터 테스터1 3장.
       0.79(임계 바로 아래)가 아니라 0.74 를 고른 이유: 측정에 쓴 리포트의 extra_items 가
       1개뿐이라 접힘 해제의 부담이 거의 반영되지 않았다. 항목 1개당 약 38pt 를 더 먹으므로
       0.79 는 항목이 하나만 늘어도 3장이 된다. 0.74 면 테스터1 여유 55pt = 항목 1~2개분.
       안내를 다시 켜면(SHOW_DATA_QUALITY=true) 0.72 로 되돌려야 한다.

     [2026-08-17 사용자 결정 0.74 → 1.00 — "3쪽까지 허용하고 글자를 키운다"]
       감사 실측: 배율 0.74 에서 본문의 90% 가 7pt 미만, 게이지 라벨 4.7pt. 고령자용 문서에서
       읽히지 않는 크기다. 2쪽 목표를 접고 **3쪽 허용 · 본문 9pt 이상**으로 목표를 바꿨다.
       배율만으로는 못 푼다 — 본문 9pt(=12px)를 만들려면 배율 1.14 가 필요한데 아이콘·여백까지
       같이 커져 4쪽이 된다(실측 1.15 → 4쪽). 그래서 **글자는 따로 하한(--pt-body 9pt)**을 걸고
       배율은 3쪽에 드는 선까지만 올린다. 글자 하한을 건 뒤의 배율별 쪽수(리포트 4종 실측):
         0.80 → 3쪽    0.90 → 3쪽    0.95 → 3쪽    1.00 → 3쪽
         1.05 → 3쪽 (전부 3쪽인 가장 큰 배율)
         1.10 → 홍길동만 4쪽 (임계)
       1.05 가 아니라 1.00 을 고른 이유는 종전과 같다 — "추가 관리 항목"은 항목 1개당 약 38pt 를
       더 먹는데 측정에 쓴 리포트는 항목이 1~2개뿐이라, 임계 바로 아래 값은 항목이 하나만
       늘어도 4쪽이 된다. 1.00 은 임계에서 두 계단 아래다.
       ※ 배율이 1 을 넘어가면 논리 뷰포트가 794/배율 로 좁아진다(1.10 이면 722px). M1~M4 는
         `@media screen` 전용이라 인쇄에는 걸리지 않지만, 새 반응형 규칙을 screen 없이 쓰면
         지면이 모바일 레이아웃으로 떨어질 수 있다 — 화면용 미디어쿼리에는 screen 을 꼭 붙일 것.

     [2026-08-18 인쇄 결함 수정 1.00 → 0.92 — 혈압 카드를 통짜로 넘기기 위한 자리 확보]
       혈압 카드를 break-inside:avoid 로 묶자(아래 S10 목록) 카드가 통째로 2쪽으로 밀리면서
       1쪽 끝에 그만큼 빈 자리가 생기고, 그 밀린 높이가 뒤로 전가되어 6종 중 3종이 4쪽이 됐다
       (실측 1.00 → 신정례·테스터1·홍길동 4쪽). 배율을 낮추면 **글자는 그대로 두고**(S14 가
       pt 를 배율로 나누므로 인쇄 크기 불변) 아이콘·여백·게이지만 줄어 그 자리가 나온다.
       혈압 카드를 묶은 뒤의 배율별 쪽수(리포트 6종 전수 실측):
         0.91 → 3쪽    0.92 → 3쪽    0.93 → 3쪽
         0.94 → 홍길동만 4쪽 (임계)
         0.95 → 신정례·홍길동 4쪽    0.97 · 1.00 → 3종 4쪽
       0.93 이 아니라 0.92 를 고른 이유는 1.00 을 고른 이유와 같다 — 임계에서 두 계단 아래.
       마지막 장 여유도 0.92 가 더 크다(최소 21mm vs 0.93 의 14mm). 종전 1.00 의 최소 여유가
       10mm 였으니 여유는 오히려 두 배로 늘었다 = "추가 관리 항목" 1~2개를 더 받을 수 있다.
       ※ 배율을 낮추면 pt 하한이 걸리지 않은 글자(제목·값)는 같이 작아진다. 9pt 아래로
         내려가는 세 가지(.vital-name · .small-card .v · .guide-visual-card h3)는 S14 에서
         자기 pt 로 고정해 인쇄 크기를 종전 그대로 유지했다 — 실측 폰트 분포 변화 0.

     [2026-08-18 검진 개편 · 인쇄 간격 확대 → 0.92 에서 0.86 으로]
       이날 지면에 들어온 것과 나간 것이 함께 있다.
         나감  검진 전용 페이지(24행 표) 삭제 — §5-9
         들어옴 (1) 위험 도메인 6번째 `checkup` → 3열 카드가 5장 → 6장이라 한 줄 더 생긴다
                    (홍길동 실측 +117px). 1페이지 위험막대도 한 행 늘었다.
                (2) 1페이지 검진 요약 블록
                (3) 사용자 지시로 구획 경계를 위아래 16px 씩 벌렸다(아래 "구획 경계" 블록).
                    선 위 여백이 0.4pt 였던 것을 10.5pt 로 — 경계 4곳에 실측 +41pt.
       배율을 낮추면 **글자는 그대로 두고**(S14 가 pt 를 배율로 나눠 지면 9pt 를 고정한다)
       아이콘·여백·게이지만 줄어 밀린 카드가 앞 장으로 돌아온다.
       재생성 리포트 id=68(검진 반영) 포함 5종 + 검진 항목을 전부 이상으로 만든 극단값
       (질환의심 7 + 경계 10, 칩 5줄) 전수 실측:
         0.92 → 홍길동·극단값 4쪽
         0.90 → 홍길동·극단값 4쪽
         0.88 → 전부 3쪽 (마지막 장 여백 11.9mm) ← 임계 바로 아래
         0.86 → 전부 3쪽 (마지막 장 여백 15.1mm) ← 채택

     [2026-08-21 사용자 지시 "본문을 키워라" → 0.86 에서 0.78 로]
       같은 날 지면에 들어온 것과 나간 것:
         나감  "추가 관리 항목" 섹션(계약 §5-2 v3 폐지) · 체성분 카드 6장이 한 줄씩 낮아짐(지시 4)
         들어옴 오늘 행동 카드 4장째 · 검진 정상 항목 칩 줄(지시 1) · 게이지 행 구분선(지시 5)
                제목 확대(S16) · **본문 9pt → 10pt**(S14)
       본문을 키우면 배율은 반대로 내려야 한다 — 배율은 아이콘·여백만 줄이고 pt 로 못박은
       글자는 그대로이므로, 내린 만큼이 그대로 글자 자리가 된다. 홍길동 리포트 실측:
         0.86 → 4쪽    0.84 → 4쪽    0.82 → 4쪽
         0.80 → 3쪽 (마지막 장 여백 11.5mm) ← 3쪽에 드는 가장 큰 배율
         0.78 → 3쪽 (마지막 장 여백 13.8mm) ← 채택
         0.76 → 3쪽 (마지막 장 여백 16.0mm, 이모지가 6.8pt 로 작아진다)
       0.80 이 아니라 0.78 을 고른 이유는 종전과 같다 — 임계 바로 위 값은 AI 문장이 몇 줄만
       길어져도 4쪽이 된다. 0.76 까지 내리지 않은 것은 이모지(아이콘)가 7pt 아래로 내려가
       인쇄에서 형태가 뭉개지기 시작하는 지점이기 때문이다.
       지면 실측(배율 0.78): 3쪽 · 하단 여백 51.9 / 47.3 / 13.8mm · 본문 10pt 73% ·
       라벨 8.5pt 16% · **글자 7pt 미만 0%** (최솟값 7.9pt, 이모지 제외)
       임계(0.90) 바로 아래인 0.88 대신 0.86 을 고른 이유: 이 리포트에서 쪽이 넘어가는 단위는
       한 줄이 아니라 **통짜로 묶인 카드**(혈압 카드 등 break-inside:avoid)다. 0.88 의 여백
       11.9mm 는 그 카드 하나가 밀리면 그대로 4쪽이 되는 폭이고, AI 문장 길이는 회원마다 다르다.
       0.86 은 글자 손해가 사실상 없다 — 지면 본문은 어느 배율에서도 9pt 고정이고(S14),
       배율을 따라가는 것은 아이콘·여백뿐이다. 실측 분포: 9pt 81.6% · 7pt 미만 0% · 최솟값 7.74pt. */
  .report {
    --print-scale: 0.78;
  }

  /* ----- 구획 경계 = 라인 + 숨 쉴 여백 -----
     연속 흐름이 되면서 .page 사이 경계가 사라졌다. 라인이 경계를 대신한다.

     [2026-08-18 사용자 지시 — "인쇄할 때 각 섹션 간격이 너무 붙어버리네"]
     종전 값(경계 위 8px · 구획 안 제목 위 10+8px)은 2쪽 압축 시절에 "반 줄씩 새어나가는
     여백"을 끝까지 짜낸 값이다. 그 뒤 검진 전용 페이지가 사라져(§5-9) 지면 예산이 남았고,
     실제 인쇄물에서는 앞 구획의 마지막 카드와 다음 구획의 제목이 라인 하나를 사이에 두고
     붙어 한 덩어리로 읽혔다. 경계를 두 배 이상 벌린다.
       구획 경계        선 아래 8px → **선 위 16px · 선 아래 16px**
       구획 안 제목     위 10+8px → 16+12px  (라인 위아래가 대칭에 가까워진다)

     [2026-08-18 사용자 재지적 — 선이 아직도 카드에 붙는다]
     1차에서는 선 **아래**만 20px 로 벌렸다. 그랬더니 선은 앞 구획 마지막 카드 밑변에 그대로
     붙은 채 아래 여백만 늘어, 사용자 눈에는 "제목 라인이 위 카드와 겹친다"로 보였다
     (인쇄 실측 3지점 전부 카드밑변→선 **0.4pt**). 선 위에도 같은 폭을 준다:
       카드밑변→선  0.4pt → 10.5pt   선→제목  13.9pt → 9.6~14.4pt   (지면 실측, 배율 0.86)
     ※ 여기서 padding-top 은 쓸 수 없다 — border-top 은 padding 바깥이라 선이 카드에 붙은 채
       아래 여백만 늘어난다(1차 실패의 원인). 선을 내리려면 반드시 margin-top 이어야 한다.

     [3쪽 조건과의 관계 — 3쪽이 우선이다]
     늘어난 총량은 지면 실측 약 41pt(경계 4곳 × 10.5pt). 이 간격만으로 홍길동 리포트가
     4쪽이 됐고, --print-scale 을 0.92 → 0.86 으로 내려 그 자리를 만들었다(위 S10 배율 주석).
     즉 **간격을 벌린 대가는 글자가 아니라 아이콘·여백**이며, 지면 본문은 9pt 그대로다.
     이 값을 더 키우려면 반드시 배율 스윕(리포트 5종 + 검진 극단값 × 배율)을 다시 돌려
     3쪽을 확인할 것 — 그때는 게이지·아이콘이 읽기 어려워지는 쪽으로 먼저 손해가 난다. */
  .report .page+.page {
    margin-top: 16px;
    border-top: 1px solid var(--line);
  }

  .report .page+.page> :first-child {
    margin-top: 16px;
  }

  /* 구획 안의 주요 분류 경계도 화면과 동일하게 라인으로 (.page 직계 .section-title 만).
     .ai-main-title 은 자체 밑줄을 가진 대제목이라 제외한다. */
  .report .page>.section-title:not(:first-child):not(.ai-main-title):not(.is-sub) {
    margin: 16px 0 7px;
    padding: 12px 0 0;
    border-top: 1px solid var(--line);
  }

  /* ----- 페이지 경계에서의 잘림 방지 -----
     작은 단위에만 건다. .panel / .summary-strip 같은 큰 덩어리는 제외 — 통째로 밀리면
     그 앞에 반 장짜리 빈 지면이 생겨 압축이 도로 무산된다. */
  .report .mini-card,
  .report .small-card,
  .report .risk-detail-card,
  .report .action,
  .report .quick-card,
  .report .status-item,
  .report .kpi,
  .report .gauge,
  .report .callout,
  .report .note-list li,
  .report .table tr,
  /* [2026-08-16 추가] 아래는 "한 덩어리로 읽히는" 작은 블록인데 목록에서 빠져 있어
     경계에서 실제로 반 토막이 났다(1쪽 하단에 테두리 윗변만 남고 내용은 2쪽). */
  .report .risk-summary-panel,
  .report .summary-strip,
  .report .bp-chart,
  .report .balance-plot,
  .report .spectrum-card,
  .report .guide-visual-card,
  .report .timeline-step,
  .report .feature,
  .report .segment,
  .report .data-pending,
  /* [2026-08-18 추가] 지표 결과 카드(혈압·혈당·산소포화도).
     종전에는 "큰 덩어리는 제외" 원칙에 따라 일부러 빼 뒀는데, 혈압 2카드를 1카드로 합치면서
     (S13) 높이가 지면 잔여폭을 넘겨 6/6 전 리포트가 경계에 걸렸다. 실측한 그 모습은
     "머리줄 + 배지 + 138/93 mmHg + 분류 제목만 1쪽에 남고, 그 아래 18mm 가 빈 띠로 남은 채
     테두리 없이 지면 종료" 였다 — 안쪽 .gauge/.bp-chart 가 이미 avoid 라 통째로 2쪽으로
     건너뛰고 카드 배경만 지면 끝까지 칠해진 것이다. 즉 "빼 두면 빈 자리가 안 생긴다"는
     전제가 이 카드에서는 성립하지 않는다 — 빼 둬도 빈 자리는 똑같이 생기고, 껍데기만 남는다.
     통짜로 묶으면 그 빈 자리가 카드 밖(지면 끝 여백)으로 나가 정상적인 쪽 마무리가 된다.
     대신 밀린 높이만큼 자리가 필요해 --print-scale 을 1.00 → 0.92 로 내렸다(위 주석). */
  .report .vital-card,
  /* [2026-08-18 사용자 지시 · 인쇄 스크린샷] 2/3쪽 경계에서 "집중관리 우선순위" 표가 행 중간에
     찢어지고(1·2행 2쪽 / 3행 3쪽), 2단으로 나란한 "AI 종합 해석" 카드도 함께 잘렸다.
     `.table tr` 만 avoid 라 표는 "행 단위로는" 안 잘렸지만 표 자체는 두 쪽에 나뉘었고,
     머리(진한 파랑)와 남은 한 행이 갈라지면 표로 읽히지 않는다.
     → 혈압 카드(.vital-card) 때와 같은 통짜 규칙을 이 2단 행에 건다. 행 전체가 다음 쪽으로
       내려가는 편이 찢어지는 것보다 낫고, 표는 서버 priorities 상 최대 3행이라(§5-2)
       이 덩어리가 한 쪽을 넘길 수 없다 — 통짜로 묶어도 무한정 밀리지 않는다.
     같은 성격의 "한 행이 곧 한 덩어리"인 블록을 함께 넣는다:
       .kpi-grid       전문기관 연계 권고 4칸(한 행)
       .extra-items    추가 관리 항목 — 2열 1행 카드(지시 6 이후 더 낮아졌다) */
  .report .risk-priority-grid,
  .report .kpi-grid,
  .report .extra-items,
  .report .meta {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* 제목 바로 뒤에서 끊기지 않게 — 제목만 남고 내용이 넘어가는 모양을 막는다.
     [2026-08-16 원인 규명] 1쪽 맨 아래에 "AI 위험예측 및 개인맞춤형 건강가이드" 배너와
     "01 AI 위험예측 리포트" 소제목만 남고 본문이 2쪽으로 넘어가는 현상이 있었다.
     범인은 이 선언이 아니라 위 목록에서 빠져 있던 `.risk-summary-panel` 이다 —
     쪼개질 수 있는 블록이라 Chrome 이 "다음 장으로 미루기" 대신 "중간에서 자르기"를 골랐고,
     그러면 제목 뒤에 (반 토막 난) 내용이 붙어 있는 셈이라 break-after: avoid 가 개입할
     이유가 없어진다. 그 블록을 통짜로 만들자 제목도 함께 2쪽으로 따라갔다(실측 확인).
     → Chrome 은 break-after: avoid 를 지킨다. 제목이 홀로 남으면 원인은 대개 이 선언이
        아니라 "뒤따르는 블록이 쪼개진 것"이니 break-inside 목록부터 확인할 것. */
  .report .section-title,
  .report .ai-main-title,
  .report .ai-subsection-title {
    break-after: avoid;
    page-break-after: avoid;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* 표 헤더가 다음 장으로 넘어갈 때 반복 */
  .report .table thead {
    display: table-header-group;
  }

  /* ----- 여백 압축 (지면 전용) -----
     zoom 만으로 3장을 맞추려면 0.76 까지 내려가야 한다. 여백을 먼저 줄이면 같은 3장을
     더 큰 글자로 담을 수 있어(실측 0.76 → 0.79) 글자를 더 줄이는 대신 이쪽을 택했다.
     줄이는 것은 "카드 안쪽 패딩 · 카드 사이 간격 · 제목 아래 간격" 뿐이다 —
     원래 값의 약 0.7 배, 하한 8px. 색·폰트·테두리·라운드는 한 값도 건드리지 않는다.
     게이지(.gauge / .gauge-body / .gauge-marker)는 제외한다 — .gauge-body 의 padding-top
     21px 은 ▼ 마커(값 12px + 2px + 화살표 6px = 20px)가 들어갈 자리라 여유가 1px 뿐이다.
     zoom 은 마커와 자리를 같은 비율로 줄이므로 겹침 관계는 그대로 유지된다. */

  /* ----- [2026-08-18 사용자 지시] 지면 여백 한 단계 완화 -----
     지시 1(게이지 한 행)·3(위험카드)·6(추가항목 2열)·11(통짜 이동)으로 마지막 장 여유가
     13mm → 70mm 대로 늘었다. 그 여유를 "글자를 키우는" 대신 **숨 쉴 자리**로 돌린다 —
     카드 안쪽 패딩과 카드·구획 사이 간격을 아래에서 한 단계씩 올렸다(대략 +25~30%).
     상한은 3쪽이고, 쪽마다 아래 5mm 이상은 남긴다(AI 문장 길이 변동 대비). 실측은 파일 끝 기록. */

  /* 카드 안쪽 패딩 */
  .report .panel {
    padding: 10px;
  }

  .report .risk-priority-grid .panel {
    padding: 9px;
  }

  .report .mini-card {
    padding: 9px;
  }

  .report .small-card,
  .report .kpi,
  .report .quick-card {
    padding: 9px;
  }

  .report .action {
    padding: 10px;
  }

  .report .meta {
    padding: 9px 10px;
  }

  .report .status-item {
    padding: 9px 4px 8px;
  }

  .report .risk-summary-panel {
    padding: 9px 11px;
  }

  .report .risk-detail-card {
    padding: 8px 9px 7px;
  }

  .report .callout {
    margin-top: 7px;
    padding: 8px 9px;
  }

  /* ----- 화면 확대 차단 (2026-08-18 사용자 지시 "카드 패딩 ×5/3 은 화면에만") -----
     화면 기본값이 --pad-* 사다리로 넓어졌다. 위에서 이미 되돌려 놓은 카드
     (.panel · .mini-card · .small-card · .kpi · .quick-card · .action · .meta · .status-item ·
      .risk-summary-panel · .risk-detail-card · .callout)를 뺀 **나머지 전부**를 여기서
     확대 전 값으로 다시 못박는다. 한 곳이라도 빠지면 그만큼 지면이 늘어 3쪽이 깨진다.
     ※ 새 카드에 --pad-* 를 쓰면 이 목록에도 반드시 같이 넣을 것. */
  .report .feature,
  .report .guide-visual-card {
    padding: 11px;
  }

  .report .spectrum-card,
  .report .timeline-step,
  .report .data-pending {
    padding: 9px;
  }

  .report .segment {
    padding: 8px 6px;
  }

  .report .spectrum-note {
    padding: 7px 8px;
  }

  .report .criteria-note {
    padding: 5px 8px;
  }

  .report .bp-info {
    padding: 9px 11px;
  }

  .report .extra-items .ei-list li {
    padding: 9px 10px;
  }

  .report .risk-interpretation-panel .callout {
    padding: 8px 9px;
  }


  /* 카드 사이 간격 */
  .report .grid-2,
  .report .info-grid,
  .report .body-split {
    gap: 9px;
  }

  .report .grid-3,
  .report .action-grid,
  .report .guide-hero {
    gap: 8px;
  }

  .report .grid-6,
  .report .kpi-grid,
  .report .quick-grid,
  .report .risk-detail-grid {
    gap: 8px;
  }

  /* 제목·구획 아래 간격 */
  .report .header {
    margin-bottom: 7px;
  }

  .report .section-title {
    margin-bottom: 7px;
  }

  /* 소제목("01 AI 위험예측 리포트")도 같은 취지로 한 단계 벌린다 — 위쪽 여백만 키우고
     아래쪽은 그대로 둬서 제목이 자기 본문에 붙어 있는 관계는 유지한다. */
  .report .ai-subsection-title {
    margin: 15px 0 7px;
  }

  /* 소분류 제목 — 지면에서도 전폭선 없이 위 여백만으로 붙인다(대구획 16px 의 절반) */
  .report .page>.section-title.is-sub {
    margin: 11px 0 6px;
    padding: 0 0 0 9px;
    border-top: 0;
  }

  .report .info-grid,
  .report .risk-detail-grid,
  .report .risk-priority-grid,
  .report .report-gap-top {
    margin-top: 14px;
  }

  /* ----- 게이지 마커 겹침 방지 -----
     ▼ 마커와 수치는 게이지 막대 위쪽에 절대배치된다. zoom 은 마커와 막대를 같은 비율로
     줄이므로 겹침 관계는 원래대로 유지되지만, 축소된 글자가 서로 달라붙지 않도록
     숫자와 ▼ 사이 간격만 지면에서 확보한다(줄바꿈 금지 포함). */
  .report .gauge-marker {
    white-space: nowrap;
  }

}


/* ============================================================
   S11. 전체 스케일 축소 — 화면 UI 자체를 줄여 인쇄 2장으로 (사용자 지시 2026-08-16)
   "폰트·카드·아이콘·여백을 한 단계 낮춘다. 텍스트 내용은 한 글자도 줄이지 않는다."

   [이 구역에는 규칙이 없다 — 기록용 주석이다]
   축소는 별도 override 블록을 얹는 대신 위쪽 v8 컴포넌트 블록(01~35)과 M3/M4/S5/S9/S10 의
   값을 그 자리에서 직접 낮췄다. override 로 얹으면 M3/M4 의 반응형 분기(열 수·모바일 크기)를
   뒤에서 덮어써 모바일이 깨지고, 값이 두 곳에 흩어져 다음 사람이 어느 쪽이 정본인지 알 수 없다.

   [무엇을 얼마나 줄였나 — 대략의 비율]
     여백·간격 (padding / gap / margin)       -25 ~ -35%   ex) .panel 16→9, .grid-2 gap 14→8
     고정 크기 (아이콘·링·게이지·min-height)   -20 ~ -40%   ex) .status-icon 64→39, .score-ring 92→62,
                                                              .track 16→10, .mini-card min-height 118→0
     글자 크기 (clamp 최솟값 / 최댓값)          -4 ~ -23%   라벨·보조 설명 위주.
                                                            핵심 수치는 상대적으로 덜 줄였다
                                                              .mini-card .v  17→14 / 24→17
                                                              .score-text .grade 20→17 / 28→21
                                                            반면 라벨·단위는 더 줄였다
                                                              .mini-card .v span 12→9.5 / 14→10.5
     행간 (.report line-height)                1.45 → 1.30
     지면 여백 (@page margin)                  10.8mm → 9mm

   [미니카드 요약 = 한 줄 5열]
     종전은 6열 그리드 위에 span 2 / span 3 을 얹은 "3 + 2" 두 줄이었다(06번 블록).
     이를 repeat(5, minmax(0,1fr)) 한 줄로 바꿔 카드 한 줄 높이 + gap 을 통째로 없앴다.
     칸이 좁아진 만큼 이모지 48→30, 값 24→17px, 단위 14→10.5px 로 낮췄고,
     값이 단위와 갈라지지 않게 `.mini-card .v` 에 white-space:nowrap 을 걸었다.
     데스크톱 1366px / 인쇄 실측에서 "150 / 200 cm / kg" "125/60 mmHg" 모두 한 줄에 들어간다
     (칸 폭 262px 대 값 폭 93px). 태블릿 2열·모바일 1열은 M3/M4 규칙 그대로다.

   [실측 — 홍길동 리포트(BMI 88.9), A4 인쇄]
     축소 전: 3장, 마지막 장 여유 151.2pt (18.0%)
     축소 후: 2장, 마지막 장 여유 142.8pt (17.0% ≈ 50mm)   ※ --print-scale 0.79 → 0.74
     페이지 경계 잘림 수정 후(S10 break-inside 보강): 2장, 1쪽 여유 87.0pt(10.3%) ·
       2쪽 여유 99.4pt(11.8% ≈ 35mm). 쪼개지던 블록이 통째로 다음 장으로 넘어가면서
       여유가 재분배된 것이고, 문서 전체 여유는 186pt(≈66mm)로 오히려 늘었다.
       배율만 더 낮추면 여유가 커진다(실측 0.73→2쪽 12.9% / 0.72→14.0% / 0.71→25.7%).
       건강검진 섹션이 붙을 때 이 표를 보고 조정할 것.
     전체 흐름 높이(연속 배치 기준) 2143.8pt → 1476.7pt, 화면 문서 높이 6833px → 약 4700px
     인쇄 텍스트 총량은 축소 전후 동일(3610자) — 잘려 나간 내용 없음.

   [혈압 분류 카드 — 현재값 알약 위치 변경 (2026-08-16)]
     축소로 띠가 좁아지면서, 점 옆에 붙어 있던 현재값 말풍선이 구간 라벨을 덮었다.
     한 띠 안에서 라벨·점·말풍선 셋이 두 개의 끝을 두고 겨루는 구조라 폭 배분으로는 못 푼다
     (768px 실측: 띠 318px 안에 라벨 86 + 말풍선 109 + 점 26 → 수축기 117~121·142~153 구간 충돌).
     → 말풍선을 카드 제목줄 오른쪽으로 빼내고, 띠 안에서는 라벨을 점의 반대쪽 끝에 붙였다.
     수축기 90~200 × 화면 1366/768/390px 전 조합에서 겹침 0 을 실측했다.

   [혈압 카드 통합 후 재실측 (2026-08-16, --print-scale 0.74 유지)]
     A4 2장 유지. 마지막 장 여유는 종전보다 늘었다(카드 머리줄 1개 + 패널 안쪽 여백 1벌이
     사라진 만큼).  괄호 안은 이 변경 전 같은 배율에서의 기록값.
       테스터1  1쪽 여유 83.7pt(9.9%) · 2쪽 여유 67.9pt(8.1%)   (종전 2쪽 55pt)
       홍길동   1쪽 여유 83.7pt(9.9%) · 2쪽 여유 130.8pt(15.5%)  (종전 2쪽 129pt)
     1쪽 여유가 두 리포트 모두 같은 이유는 장이 넘어가는 지점이 같은 블록 경계
     (4페이지 "AI 위험예측 및 개인맞춤형 건강가이드" 배너)이기 때문이다.

   [건드리지 않은 것]
     색·테두리 색·명도 램프(--seg-0~3)·흑백 인쇄 구분·게이지 ▼ 마커 구조·문구.
     .gauge-body 의 padding-top(17px)은 마커 높이(값 11 + 간격 1 + 화살표 5)에 맞춘 값이라
     이보다 더 줄이면 숫자가 막대에 겹친다. 게이지를 손볼 때 같이 계산할 것.
   ============================================================ */


/* ============================================================
   S12. 측정값 확인 안내(data_quality) · 추가 관리 항목(extra_items) · 가변 퀵 카드
        (계약 §5-2 / §5-3, AI 리포트 품질개선 2026-08-16)

   [왜 새 블록인가]
   v8 원본에 대응하는 컴포넌트가 없는 신설 UI다. 01~35 블록은 v8 이식본의 정본이므로
   섞지 않고 뒤에 따로 쌓는다(파일 규약: 신규는 S 접두 보조 블록).

   [색 규칙]
   기존 토큰만 쓴다 — critical 은 --red/--redbg, warn 은 --yellow/--yellowbg 계열.
   게이지 명도 램프(--seg-*)는 "측정값이 어느 구간인가"를 뜻하므로 여기서는 쓰지 않는다.
   이 안내는 구간 판정이 아니라 "값 자체를 믿을 수 있는가"이기 때문이다.
   굵기는 700 상한(2026-08-16 규칙)을 지킨다.
   ============================================================ */

/* ----- 리포트 최상단 안내 -----
   AI 문장보다 먼저 읽히는 자리라 카드보다 한 단계 강한 색면을 쓰되, 경고색으로 지면 전체를
   물들이지 않도록 왼쪽 4px 띠 + 옅은 배경으로만 강조한다. */
.report .dq-notice {
  margin: 0 0 8px;
  padding: var(--pad-8) var(--pad-10) var(--pad-8) var(--pad-12);
  border: 1px solid #f0d9a8;
  border-left: 4px solid var(--yellow);
  border-radius: 12px;
  background: var(--yellowbg);
}

.report .dq-notice.is-severe {
  border-color: #f0bcbc;
  border-left-color: var(--red);
  background: var(--redbg);
}

.report .dq-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.report .dq-head-icon {
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.1;
  flex: 0 0 auto;
}

.report .dq-head-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 8px;
  min-width: 0;
}

.report .dq-head-text strong {
  color: #8a2b2b;
  font-size: clamp(12.5px, 1vw, 15px);
  font-weight: 700;
  letter-spacing: -.03em;
}

.report .dq-notice:not(.is-severe) .dq-head-text strong {
  color: #8a6410;
}

.report .dq-head-text span {
  color: #4a5568;
  font-size: clamp(10.5px, .8vw, 11.5px);
  font-weight: 600;
}

.report .dq-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 5px;
}

.report .dq-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: var(--pad-6) var(--pad-8);
  border: 1px solid #e6ddd0;
  border-radius: 9px;
  background: rgba(255, 255, 255, .78);
}

.report .dq-item p {
  margin: 0;
  min-width: 0;
  color: #2d3d54;
  font-size: clamp(10.5px, .8vw, 11.5px);
  font-weight: 600;
}

/* 심각도 라벨 — "재측정 필요" / "확인 권장". 진단이 아니라 다음 행동을 가리키는 말이다 */
.report .dq-level {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid;
  font-size: clamp(9.5px, .7vw, 10.5px);
  font-weight: 700;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.report .dq-item.is-critical .dq-level {
  border-color: #e2a5a5;
  background: #fff;
  color: #a92c2c;
}

.report .dq-item.is-warn .dq-level {
  border-color: #e2c58d;
  background: #fff;
  color: #8a6410;
}

/* ----- 지표 카드 제목 옆 칩 -----
   상단 안내와 같은 사실을 가리키는 표식이라 문구는 짧게. 색은 위 라벨과 같은 계열. */
.report .dq-chip {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid;
  font-size: clamp(9px, .67vw, 10px);
  font-weight: 700;
  letter-spacing: -.02em;
  white-space: nowrap;
  vertical-align: middle;
}

.report .dq-chip.is-critical {
  border-color: #e2a5a5;
  background: #fdecec;
  color: #a92c2c;
}

.report .dq-chip.is-warn {
  border-color: #e2c58d;
  background: #fdf4e0;
  color: #8a6410;
}

/* ----- 하단 참고(info) -----
   재측정을 요구하는 안내가 아니라 "이 값은 1회 측정입니다" 수준의 배경 설명이라
   푸터 톤(회색·작은 글씨)으로 낮춘다. */
.report .dq-info {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 7px;
  padding: var(--pad-6) var(--pad-9);
  border: 1px dashed #ccd6e4;
  border-radius: 9px;
  background: #f7fafd;
}

.report .dq-info-key {
  flex: 0 0 auto;
  color: #5b6b81;
  font-size: clamp(9.5px, .7vw, 10.5px);
  font-weight: 700;
}

.report .dq-info ul {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.report .dq-info li {
  color: #65738a;
  font-size: clamp(9.5px, .73vw, 10.5px);
  font-weight: 600;
}

/* ----- 퀵 카드 열 수 = 카드 수 (계약 §5-2 "빈 칸을 채우지 않는다") -----
   29번 블록의 repeat(5, 1fr) 은 v1 폴백(5장)의 값으로 남기고, 실제 카드 수가 5보다 적을 때만
   여기서 열 수를 줄인다. 3장을 5열 그리드에 넣으면 오른쪽 두 칸이 빈 채로 남아
   "채우다 만 화면"으로 읽히기 때문이다.
   [M3/M4/S5 와의 관계] 태블릿·모바일 규칙이 이 블록보다 앞에 있어 여기 선언이 이긴다
   → 같은 분기를 아래에서 다시 잡아 준다. */
.report .quick-grid.cols-1 {
  grid-template-columns: minmax(0, 1fr);
}

.report .quick-grid.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.report .quick-grid.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.report .quick-grid.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ----- 추가 관리 항목 (extra_items) — [2026-08-21 폐지] -----
   계약 §5-2 v3(오늘 행동 4개 한 벌)에서 이 섹션이 없어졌다. ReportGuide 는 더 이상
   .extra-items 를 렌더하지 않는다. 아래 규칙은 **구버전 스냅샷 라우트(/historybak)**
   에서만 쓰이므로 남겨 둔다 — 라이브 화면에는 이 클래스가 나오지 않는다.
   ----- (이하 종전 주석) 기본 접힘 -----
   <details>/<summary> 라 JS 없이 동작하고, 인쇄에서도 접힌 상태 그대로 나간다.
   요약줄은 시니어 터치 타깃 규칙(44px+)에 맞춰 min-height 44px 를 준다
   — 인쇄에서는 아래 @media print 가 다시 줄인다. */
.report .extra-items {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

/* 접기를 없애고 항상 펼친 머리줄로 (사용자 지시 2026-08-16) — 클릭 대상이 아니므로
   커서·caret 없이 제목 줄 역할만 한다. 높이도 44px 탭 타깃이 필요 없어 줄인다. */
.report .extra-items>.ei-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 12px;
  color: #123a71;
  font-size: clamp(11.5px, .87vw, 13px);
  font-weight: 700;
  letter-spacing: -.03em;
}

.report .extra-items .ei-hint {
  color: #7386a0;
  font-size: clamp(10px, .75vw, 11px);
  font-weight: 600;
}

/* .ei-caret 은 접기를 없애며 마크업에서 제거됐다 (2026-08-16) */

.report .extra-items .ei-list {
  list-style: none;
  margin: 0;
  padding: 0 12px 10px;
  display: grid;
  gap: 6px;
}

/* [2026-08-18 사용자 지시] 모바일보다 큰 화면에서는 두 개씩 나란히.
   항목 하나는 아이콘 + 제목 + 설명 + 우선도 뱃지가 한 줄이라 전폭을 다 쓰지 않는데,
   전폭 행으로 세로로만 쌓여 오른쪽이 비어 있었다. 2열로 접으면 두 항목이 한 행에 들어가
   그만큼 세로가 준다. 게이지(13번)와 달리 이쪽은 안 들어가면 설명이 다음 줄로 **접히기만**
   하고 넘치지 않으므로(내부가 flex-wrap) 768px 부터 바로 걸어도 안전하다.
   홀수 개면 마지막 항목은 반폭으로 한 칸만 차지한다 — 전폭으로 늘이면 행마다 폭이 달라
   목록이 아니라 서로 다른 블록으로 읽힌다. */
@media screen and (min-width: 768px),
print {
  .report .extra-items .ei-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.report .extra-items .ei-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--pad-7) var(--pad-9);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fbff;
}

.report .extra-items .ei-icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #edf5ff;
  font-size: clamp(13px, 1.07vw, 16px);
}

/* [2026-08-18 사용자 지시] 제목·설명·실천 우선도를 **한 줄에 나열**한다.
   종전에는 제목(block)과 설명(다음 줄)이 세로로 쌓여 항목 하나가 두 줄을 먹었다(실측 47.9px).
   가로로 눕히면 같은 글자를 그대로 담고도 항목당 한 줄 높이가 빠진다 — 글자는 한 자도
   줄이지 않고 배치만 바꾼 것이라 "내용 삭제 금지" 원칙과 어긋나지 않는다.
   제목은 눌리지 않고(0 0 auto) 설명만 남는 폭에서 줄어든다 — 좁아지면 설명이 먼저 접힌다. */
.report .extra-items .ei-text {
  min-width: 0;
}

.report .extra-items .ei-text strong {
  flex: 0 0 auto;
  color: #0b3f95;
  font-size: clamp(11px, .84vw, 12.5px);
  font-weight: 700;
}

.report .extra-items .ei-text p {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  color: #33455e;
  font-size: clamp(10.5px, .8vw, 11.5px);
  font-weight: 600;
}

/* ----- 반응형 (M3/M4/S5 와 같은 분기를 이 블록에서 다시 선언) ----- */
@media screen and (max-width: 1023px) {
  .report .quick-grid.cols-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media screen and (max-width: 767px) {

  .report .quick-grid.cols-3,
  .report .quick-grid.cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report .dq-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .report .dq-info {
    flex-direction: column;
    gap: 3px;
  }

  .report .extra-items .ei-list li {
    flex-wrap: wrap;
  }

  /* 390px 에서는 제목 + 설명이 한 줄에 들어가지 않는다 — 설명만 다음 줄 전폭으로 흘린다
     (사용자 지시: "모바일은 자연스럽게 줄바꿈 허용") */
  .report .extra-items .ei-text p {
    flex: 1 1 100%;
  }
}

/* ----- 인쇄 -----
   [판단] 추가 관리 항목은 인쇄에서도 **접힌 채로** 둔다. 계약 §5-2 가 "인쇄 시에도 접힌 상태를
   기본으로 한다(쪽수 예산에 포함되지 않는 전제)"로 못박았고, 본문 상한 1,395자 계산에도 이
   항목은 빠져 있다. 강제로 펼치면 2쪽 예산이 그만큼 흔들린다. 종이 리포트를 받는 시니어에게
   "오늘 할 일"이 한눈에 들어오는 것이 지침 §3 의 취지이기도 하다.
   대신 접힌 요약줄은 지면에도 남겨 "더 있다"는 사실 자체는 보이게 한다.

   [지면 압축] 안내 항목 하나하나를 흰 카드로 감싼 것은 화면용 장치다. 지면에서는 바깥
   `.dq-notice` 틀 하나로 이미 구분이 되므로 항목 카드의 테두리·배경·안쪽 여백을 걷어내고
   글자만 남긴다(항목당 약 12px 절감). 문구는 한 글자도 줄이지 않는다 — 안전 안내이고,
   길이는 서버가 확정한다. */
@media print {

  .report .dq-notice,
  .report .dq-item,
  .report .dq-info,
  .report .extra-items {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .report .dq-notice {
    margin-bottom: 4px;
    padding: 4px 7px 4px 9px;
  }

  .report .dq-head {
    gap: 6px;
  }

  /* 아이콘이 머리줄의 줄높이를 키우지 않게 (지면에서는 색면만으로도 충분히 눈에 띈다) */
  .report .dq-head-icon {
    font-size: 11px;
    line-height: 1;
  }

  .report .dq-list {
    margin-top: 3px;
    gap: 1px;
  }

  .report .dq-item {
    padding: 0;
    border: 0;
    background: none;
    gap: 6px;
  }

  .report .dq-info {
    margin-top: 5px;
    padding: 4px 7px;
  }

  .report .extra-items {
    margin-top: 5px;
  }

  .report .extra-items>.ei-head {
    min-height: 0;
    padding: 4px 9px;
  }
}


/* ============================================================
   S13. 지표 결과 카드 머리줄 · 혈압 카드 통합 (사용자 지시 2026-08-16)

   [무엇을 고쳤나]
   1) 판정 배지("경계 영역" / "정상 범위" / "고혈압 주의")를 수치 왼쪽 아래에서
      **카드 머리줄 오른쪽 끝**으로 옮기고 한 단계 키웠다(07번 블록 .badge).
   2) 머리줄을 아이콘 / 제목 / 품질 칩 / 배지 네 자리로 못박아, 390px 에서도 서로
      겹치거나 잘리지 않게 했다. 수치는 그 아래 독립 블록(라벨 한 줄 + 값 한 줄)이다.
   3) "혈압 결과"와 "혈압수치별 분류" 두 장을 한 장으로 합치고 가운데 세로 라인으로 나눴다.

   [왜 v8 컴포넌트 블록을 고치지 않고 새 블록인가]
   .mini-card 는 1페이지 요약 5장이 함께 쓰는 컴포넌트다. 3페이지 지표 카드만 바꾸려고
   .mini-card 를 손대면 1페이지 한 줄 5열 배치(S11)가 같이 흔들린다. 그래서 3페이지
   전용 클래스(.vital-*)를 새로 만들고 v8 블록은 그대로 뒀다.

   [색·굵기]
   새 색값을 만들지 않았다 — 제목은 .small-card h4 의 #0b4f97, 라벨·단위는 미니카드의
   #65738a·#4e6077, 값은 #0b2454 를 그대로 쓴다. 굵기 상한 700 규칙 유지.
   ============================================================ */

/* ----- 머리줄 : 아이콘 / 제목 / 칩 / 배지 -----
   제목만 flex-shrink 를 허용한다(0 1 auto + min-width:0). 아이콘·칩·배지는 0 0 auto 라
   폭이 줄어도 눌리지 않고, 남는 폭이 모자라면 제목이 두 줄로 접힌다 — 잘리지 않는다. */
.report .vital-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 7px;
  min-width: 0;
}

.report .vital-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: #edf4ff;
  font-size: clamp(13px, calc(11.9px + .281vw), 15.5px);
  /* 390px→13px, 1280px→15.5px (2026-08-18 이전 .section-title.is-compact 과 같던 기울기 —
     그쪽은 위계 정리로 한 급 내려갔고 이 아이콘 크기는 그대로 둔다) */
  line-height: 1;
}

.report .vital-name {
  flex: 0 1 auto;
  min-width: 0;
  color: #0b4f97;
  font-size: clamp(12px, calc(11.1px + .225vw), 15px);
  /* 390px→12px, 1280px→14px */
  font-weight: 700;
  letter-spacing: -.03em;
  overflow-wrap: anywhere;
}

/* 배지는 항상 오른쪽 끝. 07번 블록의 margin-top(수치 아래 배치용)은 여기서 되돌린다 */
.report .vital-head .badge {
  flex: 0 0 auto;
  margin-top: 0;
  margin-left: auto;
}

/* 품질 칩은 제목 바로 뒤 — 배지가 margin-left:auto 로 밀려나므로 사이가 벌어진다 */
.report .vital-head .dq-chip {
  flex: 0 0 auto;
  margin-left: 0;
}

/* ----- 수치 : 라벨 한 줄 + 값·단위 한 줄 -----
   머리줄과 옅은 선 하나로 끊어, 제목·아이콘·배지가 수치와 같은 덩어리로 읽히지 않게 한다. */
.report .vital-value {
  padding-top: 6px;
  border-top: 1px solid #e8edf5;
}

.report .vital-label {
  color: #65738a;
  font-size: clamp(10px, calc(9.12px + .225vw), 11px);
  /* 390px→10px, 1280px→11px (.mini-card .k 와 같은 급) */
  font-weight: 700;
}

.report .vital-num {
  margin-top: 1px;
  color: #0b2454;
  font-size: clamp(17px, calc(15.2px + .461vw), 21px);
  /* 390px→17px, 1280px→21px — 카드에서 가장 큰 글자(값) */
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: 1.12;
  /* "140 / 90 mmHg" 가 값과 단위로 갈라지지 않게 */
  white-space: nowrap;
}

.report .vital-unit {
  margin-left: 4px;
  color: #4e6077;
  font-size: clamp(10px, calc(9.12px + .225vw), 11px);
  /* 390px→10px, 1280px→11px */
  font-weight: 700;
  letter-spacing: 0;
}

/* 같은 시점에 함께 측정된 다른 값 (공복 + 식후 혈당, 계약 §5-1).
   [2026-08-17 감사 major] 그 전에는 최신 1건만 골라, 공복 104(경계)가 있어도 식후 104 만
   보여 주고 "정상 범위"라 했다. 이제 나쁜 쪽을 대표로 세우고 나머지를 이 줄에 적는다. */
.report .vital-sub {
  margin-top: 3px;
  color: #5c6c85;
  font-size: clamp(9.5px, .7vw, 10.5px);
  font-weight: 700;
}

/* 값 아래 첫 게이지가 붙지 않게 (종전 MiniCard 의 아래 여백을 대신한다) */
.report .vital-value+.gauge {
  margin-top: 7px;
}

/* 성별 미등록 안내 — 서버 gender_note 를 그대로 싣는다 (계약 §5-6).
   판정 결과가 아니라 "어느 기준으로 쟀는가"라는 메타 정보라, 게이지 아래 한 급 낮은 줄로 둔다. */
.report .criteria-note {
  margin-top: 7px;
  padding: var(--pad-5) var(--pad-8);
  border-radius: 8px;
  background: #f2f6fc;
  color: #55677f;
  font-size: clamp(9.5px, .7vw, 10.5px);
  font-weight: 700;
  line-height: 1.4;
}

/* ----- 혈압 카드 통합 : 좌 결과 / 우 분류, 가운데 세로 라인 -----
   두 열 모두 minmax(0,1fr) 이라 게이지·띠가 자기 열을 넘지 않는다.
   구분선은 오른쪽 열의 border-left 한 줄이고, gap 과 padding 을 같은 값으로 두어
   선이 두 열의 정확히 가운데 온다. */
.report .bp-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.report .bp-split-col {
  min-width: 0;
}

.report .bp-split-col+.bp-split-col {
  padding-left: 10px;
  border-left: 1px solid var(--line);
}

/* 오른쪽 영역 소제목 — 카드 제목이 이미 위에 있으므로 파란 막대 없이 한 급 낮춘 줄로 둔다.
   (2026-08-17 현재값 알약은 이 줄에서 마커 위로 옮겼다 — .bp-marker 참조) */
.report .bp-class-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  color: #123a71;
  font-size: clamp(11.5px, calc(10.6px + .225vw), 14.5px);
  /* 390px→11.5px, 1280px→13.5px */
  font-weight: 700;
  letter-spacing: -.03em;
}

/* 모바일 — 좌우 2열을 상하로 쌓고 구분선도 가로로 눕힌다 (사용자 지시) */
@media screen and (max-width: 767px) {
  .report .bp-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .report .bp-split-col+.bp-split-col {
    padding-left: 0;
    padding-top: 10px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* 인쇄 — 열 구성은 데스크톱 그대로(미디어쿼리가 걸리지 않는다). 여백만 한 단계 좁힌다.
   [2026-08-18 정정] 그 전 이 자리에는 ".vital-card 를 통짜로 묶지 않는다 — 안쪽 게이지가
   이미 avoid 라 반 토막 나는 곳은 없다"고 적혀 있었다. 틀린 판단이었다. 안쪽이 avoid 이면
   그 블록만 다음 장으로 건너뛰고 **카드 껍데기는 앞 장에 남는다** — 실제로 6/6 전 리포트가
   1쪽 하단에 머리줄·배지·수치만 남고 18mm 빈 띠로 끝났다. 지금은 S10 목록에서 .vital-card
   를 통짜로 묶는다. 그 근거와 배율 재조정(1.00 → 0.92)은 S10 주석에 적었다. */
@media print {
  .report .vital-head {
    margin-bottom: 5px;
  }

  .report .vital-value {
    padding-top: 5px;
  }

  .report .bp-split {
    gap: 8px;
  }

  .report .bp-split-col+.bp-split-col {
    padding-left: 8px;
  }

  .report .bp-class-title {
    margin-bottom: 5px;
  }
}


/* ============================================================
   S15. 국가건강검진 **1페이지 요약 블록** (계약 §5-9(2) · 2026-08-18 개편)
   ============================================================
   JSX: front/components/report/ReportCheckup.jsx

   [무엇이 바뀌었나]
   §5-8 초판은 결과통보서를 그대로 옮긴 24행 표였고, 이 블록에는 그 표의 열 폭·줄무늬·
   각주·범례·5단계 띠 규칙이 들어 있었다. 표 하나가 A4 한 장을 통째로 먹어 검진 있는
   회원만 4쪽이 나왔다(실측 홍길동 4쪽 / 무검진 3쪽). §5-9 로 표 섹션 자체를 없애고
   1페이지 요약 한 덩어리만 남겼으므로, 표 전용 규칙은 함께 지웠다.
   남긴 것은 **판정 칩과 색 램프**(.ck-chip / .ck-t0~t3 / .ck-mark) — 요약 블록이 그대로 쓴다.

   [색] 새 팔레트를 만들지 않는다. 게이지·위험막대와 같은 4단계 램프(--seg-0~3 / -ink)다.
     .ck-t0 옅은 블루(정상) · .ck-t1 중간 블루(경계) · .ck-t3 적(질환의심)
     흑백 명도(gray 229 / 177 / 86)가 살아 있어 색 없이도 세 단계가 갈리고,
     칩 안에 기호(✓ △ ▲)가 함께 들어가 색 + 모양 + 글자 3중 표기가 된다.

   [높이 예산] 1페이지 안에 들어가야 하므로 세로 리듬을 한 급 조인다 —
     머리줄 1줄 + 항목 줄 2~3줄. 칩은 흐름 배치라 항목이 늘면 줄만 늘고 카드가 겹치지 않는다.
     지면 글자 하한(9pt)은 S14 목록에 이 블록의 클래스를 함께 넣어 둔다.
   ============================================================ */

.report .ck-summary {
  margin-top: 8px;
  padding: var(--pad-8) var(--pad-10);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

/* ----- 머리줄 : 아이콘 / 제목 / 검진일 / 종합판정 배지 — 한 줄 -----
   제목·메타만 줄어들 수 있게 두고(min-width:0), 아이콘·배지는 눌리지 않는다. */
.report .ck-sum-head {
  display: flex;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
}

.report .ck-sum-icon {
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 1;
}

.report .ck-sum-title {
  flex: 0 0 auto;
  color: var(--navy);
  /* [2026-08-24 사용자 확정값] 카드 제목 3종(is-compact)과 같은 급 */
  font-size: clamp(12.5px, calc(11.6px + .225vw), 16px);
  font-weight: 700;
  letter-spacing: -.03em;
}

.report .ck-sum-meta {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  /* .ck-sum-foot 와 같은 이유로 --muted 대신 한 단계 진한 회색 (2026-08-18 대비 점검) */
  color: #5c6b80;
  font-size: clamp(9.5px, .7vw, 11px);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 종합판정 배지는 항상 오른쪽 끝. .badge 의 알약 모양을 쓰되 문구가 길어(최대 22자)
   고정 높이를 풀고 한 줄로 눕힌다 — 요약 블록에서는 머리줄이 두 줄이 되면 안 된다. */
.report .ck-summary .ck-badge {
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
  margin-top: 0;
  margin-left: auto;
  padding: 2px 9px;
  font-size: clamp(10.5px, .77vw, 11.5px);
  gap: 4px;
  line-height: 1.25;
  word-break: keep-all;
}

/* ----- 항목 줄 : 라벨 + 칩들 -----
   라벨은 고정 자리(align-self:start), 칩은 남는 폭에서 흐른다. 항목이 많아도 라벨은
   언제나 줄 맨 앞 같은 자리에 있어 "질환의심 / 경계 / 정상"이 세로로 정렬돼 읽힌다. */
/* [2026-08-18 사용자 지시 "덜 빽빽하게"] 머리줄 ↔ 본문, 행 ↔ 행 간격을 한 단계 벌렸다.
   1페이지는 인쇄 실측에서 아래 여백이 가장 많이 남는 쪽이라(50mm+) 이 정도는 흡수된다. */
.report .ck-sum-body {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid #e8edf5;
}

.report .ck-sum-row {
  display: flex;
  align-items: flex-start;
  gap: 4px 7px;
  min-width: 0;
}

.report .ck-sum-row+.ck-sum-row {
  margin-top: 10px;
}

/* 구분 라벨 — 칩과 같은 램프 색이되 배경 없이 글자·기호만. 색면이 두 겹으로 겹치면
   같은 줄에서 라벨과 칩이 서로를 덮어 어느 것이 항목인지 흐려진다. */
.report .ck-sum-key {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 5.6em;
  padding: 2px 0;
  background: none;
  /* [2026-08-18 사용자 지적] 크기를 적지 않아 .page 본문(13~14px)을 그대로 상속했고,
     한 줄짜리 요약 블록이 주변 카드 본문보다 커 보였다. 리포트 타이포 체계에 맞춰
     .note-list li(10.5~11.5px)와 같은 급으로 못박았다 — 이 블록은 카드 본문이지 제목이 아니다.
     [2026-08-18 재지시 "조금만 더 작게"] 한 급 더 내린다(10~10.5px). 칩(.ck-chip)과 한 벌로
     움직여야 라벨 · 칩이 같은 줄에서 어긋나지 않는다. 시니어 가독 하한을 생각해 10px 에서 멈춘다
     — 이 아래는 게이지 구간 라벨(9.5px) 급이라 판정 문구가 좌표 라벨처럼 읽힌다.
     지면은 아래 S14 가 두 선택자를 --pt-body(9pt) 로 다시 올리므로 7pt 규칙과 무관하다. */
  font-size: clamp(11px, .7vw, 13px);
  font-weight: 700;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.report .ck-sum-key.is-ok {
  color: var(--seg-0-ink);
}

.report .ck-sum-key.is-warn {
  color: var(--seg-1-ink);
}

/* 행 라벨도 칩과 같은 적색으로 (2026-08-18, 재지시로 #d13e30 — 흰 배경에서 4.73:1) */
.report .ck-sum-key.is-danger {
  color: #d13e30;
}

.report .ck-sum-chips {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 3px 5px;
  min-width: 0;
}

/* 판정 기준 출처 주석 — 블록 맨 아래 한 줄 (2026-08-21)
   [왜 옮겼나] 종전에는 이 문장이 정상 행 안에서 칩 자리를 차지하고 있었다. 정상 항목도
   이름 칩으로 그리게 되면서(계약 §5-9(2) normal_items) 그 자리를 칩에 내주고, 판정이
   아니라 각주인 이 문장은 블록 맨 아래로 내렸다. 구분선을 새로 긋지 않는다 —
   요약 블록에 가로선이 두 줄이 되면 한 덩어리로 읽히지 않는다. */
.report .ck-sum-foot {
  margin-top: 7px;
  /* [2026-08-18 대비 점검] --muted(#69788e)는 흰 배경에서 4.49:1 로 4.5 문턱에 딱 걸린다.
     이 문장은 이 블록에서 가장 작은 글자라 한 단계 진한 회색으로 못박는다(5.4:1). */
  color: #5c6b80;
  /* 판정이 아니라 기준 출처를 밝히는 보조 문장이라 본문보다 한 급 아래
     (.gauge-range · .legend 와 같은 급). 지면에서는 S14 가 9pt 로 올린다. */
  font-size: clamp(9.5px, .7vw, 10.5px);
  font-weight: 600;
  line-height: 1.35;
}

/* ----- 판정 칩 (요약 블록 전용 · 라벨 + 값 한 덩어리) ----- */
.report .ck-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  /* 행 라벨(.ck-sum-key)과 같은 급 — 칩은 "항목명 + 값" 한 덩어리라 라벨과 같은 크기가 맞다.
     [2026-08-18 재지시] 11.5 → 10.5px 상한으로 한 급 내렸다(라벨과 함께 움직인다).
     칩은 색면 위 글자라 같은 크기라도 흰 배경 글자보다 크게 읽힌다 — 이 급이 요약 한 줄의
     무게를 주변 카드와 맞춘다. 지면은 S14 가 --pt-body 로 올린다. */
  font-size: clamp(10px, .7vw, 10.5px);
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  word-break: keep-all;
}

.report .ck-chip b {
  font-weight: 700;
}

/* 값은 라벨과 **같은 잉크·같은 진하기**로 둔다.
   [2026-08-18 사용자 지적 "경계 칩 글자가 잘 안 보인다"] 그 전에는 opacity:.82 로 옅게 깔아
   "무엇 / 얼마"를 갈랐다. 경계 칩(.ck-t1, 배경 #8db4e2)에서 그 옅음이 대비를 3.5:1 까지
   떨어뜨렸다(실측 합성색 #2b5684). 흐리기로 위계를 만들면 대비를 잃는다 —
   위계는 **굵기**로 바꾼다(항목명 700 / 값 600). 대비는 아래 램프 색에서 확보한다. */
.report .ck-chip em {
  font-style: normal;
  font-weight: 600;
}

.report .ck-mark {
  font-size: .95em;
  line-height: 1;
}

/* 칩 글자색 — 램프 잉크(--seg-*-ink)를 그대로 쓰지 않고 **칩 배경 기준으로 다시 잡은 값**이다.
   [왜] --seg-0-ink · --seg-1-ink 는 legend 처럼 **흰 배경** 위에서 쓰라고 고른 색이다.
   같은 색을 자기 램프 **색면 위**에 얹으면 대비가 무너진다 (실측, WCAG 대비비):
     .ck-t0  #2b6bb0 on #c6daf3 → 3.84:1   .ck-t1  #1b4c8f on #8db4e2 → 3.94:1
   둘 다 4.5:1 아래라 사용자 눈에 "글자가 잘 안 보인다"로 잡혔다(2026-08-18 지적).
   같은 색상 계열에서 한 단계씩 더 내려 4.5:1 을 넘긴다 — 색 언어(정상 블루 / 경계 진한 블루 /
   질환의심 적색)는 그대로다:
     .ck-t0  #245c99 on #c6daf3 → 4.81:1   .ck-t1  #16416f on #8db4e2 → 4.83:1
   흑백 인쇄에서도 배경 gray 229 / 177 위의 gray 74 / 62 글자라 형태가 그대로 산다. */
.report .ck-t0 {
  background: var(--seg-0);
  color: #245c99;
}

/* 경계 — [2026-08-18 사용자 지시] "칩 텍스트 검은색을 흰색으로". 흰 글자를 얹으려면
   램프색(#8db4e2, 흰 글자 대비 2.16:1)이 너무 밝다 — 칩 배경만 같은 계열의 중간 블루로
   내린다(#3f74b5, 흰 글자 4.79:1 ✓). 게이지 램프(--seg-1)는 건드리지 않는다.
   흑백에서 경계(gray 107)·질환의심(gray 104) 칩 명도가 비슷해지지만, 행이 △/▲ 기호와
   구분 라벨로 이미 갈려 있어 칩 색만으로 구분할 일은 없다. */
.report .ck-t1 {
  background: #3f74b5;
  color: #fff;
}

.report .ck-t2 {
  background: var(--seg-2);
  color: #fff;
}

/* 질환의심 — [2026-08-18 사용자 지시] --seg-3(#a02c22, 딥레드)이 "너무 어둡고 무겁다".
   같은 팔레트 안에서 한 단계 밝고 선명한 적색인 --ring-4(#c0392b, 종합점수 링의 "집중관리"
   색)로 바꾼다. 새 색을 만들지 않았고, 리포트가 이미 위험을 말할 때 쓰는 적색이라 톤이 맞는다.
     대비   흰 글자 기준 5.44:1 (4.5 이상 ✓)
     흑백   gray 96 — 경계 칩 gray 177 · 정상 gray 229 와 명도가 확실히 갈린다
   게이지 구간(--seg-3)은 그대로 둔다: 그쪽은 4단 명도 램프의 맨 아래 칸이라 밝히면
   바로 위 칸(--seg-2 gray 131)과의 명도 차가 좁아져 흑백에서 두 구간이 붙는다. */
/* [2026-08-18 사용자 재지시] --ring-4(#c0392b)도 "너무 어두운 레드" — 한 단계 더 밝고
   선명한 #d13e30 으로 보완(흰 글자 4.73:1 ✓, 흑백 gray 104). 종합점수 링(--ring-4)은
   그대로 두고 검진 블록만 바꾼다. .ck-sum-key.is-danger 도 같은 값을 쓴다. */
.report .ck-t3 {
  background: #d13e30;
  color: #fff;
}

/* ----- 좁은 폭 -----
   390px 에서는 머리줄 한 줄에 제목 + 메타 + 배지가 들어가지 않는다(실측 배지만 210px).
   배지를 다음 줄 전폭으로 내리고, 항목 줄은 라벨 아래로 칩을 흘린다. */
@media screen and (max-width: 767px) {
  .report .ck-sum-head {
    flex-wrap: wrap;
  }

  .report .ck-summary .ck-badge {
    order: 3;
    width: 100%;
    margin-left: 0;
    justify-content: center;
  }

  .report .ck-sum-meta {
    flex: 1 1 100%;
    white-space: normal;
  }

  .report .ck-sum-row {
    flex-wrap: wrap;
  }

}

/* ----- 인쇄 -----
   1페이지 안에서 통째로 읽히는 한 덩어리다 — 지면 경계에서 쪼개지지 않게 묶는다.
   (블록 자체가 3~4줄이라 통짜로 묶어도 앞 장에 빈 자리가 생기지 않는다.) */
@media print {
  .report .ck-summary {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-top: 7px;
    padding: 6px 8px;
  }

  .report .ck-sum-body {
    margin-top: 5px;
    padding-top: 5px;
  }
}


/* ============================================================
   S14. 지면 글자 하한 — 본문 9pt (사용자 결정 2026-08-17)
   "고령자가 읽는 문서다. 3쪽까지 허용하고 글자를 키워라 — 본문 최소 9pt."
   ============================================================
   [그 전 상태 — 실측] 배율 0.74 에서 본문의 90% 가 7pt 미만이었고, 게이지 구간 라벨은 4.7pt 였다.
     인쇄물에서 7pt 는 고령자가 사실상 읽을 수 없는 크기다.

   [왜 배율(--print-scale)만으로는 못 푸나]
     지면 뷰포트가 A4 폭 793.7px 이라 대부분의 clamp() 가 최솟값으로 떨어진다. 본문 최솟값이
     10.5px 이므로 9pt(=12px)를 만들려면 배율이 1.14 는 되어야 하는데, 그러면 아이콘·여백·
     고정 높이까지 같은 비율로 커져 4쪽이 된다(실측 1.15 → 4쪽, 3쪽 허용 초과).

   [해법 — 배율과 글자를 분리한다]
     · 배율은 3쪽에 드는 선까지만 올린다(S10: 0.74 → 1.00)
     · 글자는 여기서 따로 하한을 건다 — 읽어야 하는 문장 9pt, 좌표·번호 라벨 8pt
     결과적으로 장식(아이콘·여백)이 상대적으로 줄고 본문이 커진다. 고령자용 문서에서
     원하는 교환이며, "텍스트는 한 글자도 줄이지 않는다"는 종전 원칙과도 어긋나지 않는다.

   [값 읽는 법] pt 로 적고 배율로 나눈다. .page 의 zoom 이 다시 배율을 곱하므로
     **여기 적힌 pt 가 곧 인쇄되는 크기**다. 배율을 바꿔도 글자 크기는 그대로 유지된다.

   [왜 파일 맨 끝인가 — 옮기지 말 것]
     같은 특정도(0-2-0)로 S10 안에 두었더니 파일 뒤쪽의 S12·S13 선언(.vital-label ·
     .ei-hint · .bp-class-title 등)이 소스 순서로 이겨 8.2pt·7.5pt 가 그대로 남았다(실측).
     그래서 (1) 파일의 **마지막** 구역에 두고, (2) `.report .page` 로 한 단계 높인 특정도(0-3-0)를
     쓴다 — `.report .risk-row.is-none .risk-none` 같은 0-3-0 선언과는 소스 순서로 이긴다.
     모든 리포트 내용은 .page 안에 있으므로 선택 범위는 달라지지 않는다.

   화면(@media screen)에는 한 줄도 관여하지 않는다.
   ============================================================ */

@media print {
  .report .page {
    /* [2026-08-21 사용자 지시 "9pt 는 최소였다 — 본문을 키워라"] 9pt → 9.5pt.
       쪽 하단에 남던 여백을 글자로 바꾼 것이며, 3쪽 하드 조건은 --print-scale 로 지킨다
       (배율은 아이콘·여백만 줄이고 여기 pt 는 배율로 나눠 두어 인쇄 크기가 고정된다). */
    --pt-body: calc(10pt / var(--print-scale));
    --pt-label: calc(8.5pt / var(--print-scale));
    /* 제목 4급 — 본문(9.5pt)과 확실히 갈리게 pt 를 따로 못박는다 (지시 6·8).
       ①대구획 12.5 > ②소분류 11 > ③카드제목 10.5 > 본문 9.5 */
    --pt-title-1: calc(12.5pt / var(--print-scale));
    --pt-title-2: calc(11pt / var(--print-scale));
    --pt-title-3: calc(10.5pt / var(--print-scale));
  }

  /* ----- 본문 9pt — 회원이 읽어야 하는 문장·판정 문구·수치 라벨 -----
     .report .page 에 걸면 font-size 를 따로 적지 않은 요소(푸터·문단·강조·리스트)까지
     함께 올라간다. 아래는 그보다 작은 값이 명시돼 있어 따로 끌어올려야 하는 것들이다. */
  .report .page,
  .report .page .subtitle,
  .report .page .eyebrow,
  .report .page .meta .row,
  .report .page .status-item .label,
  .report .page .status-item .state,
  .report .page .mini-card .k,
  .report .page .mini-card .memo,
  .report .page .mini-card .v span,
  .report .page .small-card h4,
  .report .page .small-card .memo,
  .report .page .small-card .v span,
  .report .page .small-card.is-none .v,
  .report .page .note-list li,
  .report .page .pill,
  .report .page .callout,
  .report .page .risk-interpretation-panel .callout,
  .report .page .score-text .sub,
  .report .page .risk-row .name,
  .report .page .risk-row .score,
  .report .page .risk-row.is-none .risk-none,
  .report .page .risk-method-title,
  .report .page .risk-method-note,
  .report .page .risk-detail-card h3,
  .report .page .risk-detail-card p,
  .report .page .rsb-name,
  .report .page .risk-score,
  .report .page .risk-next,
  .report .page .risk-signals li,
  .report .page .risk-none-tag,
  .report .page .continuation-badge,
  .report .page .interpretation-score,
  .report .page .interpretation-main p,
  .report .page .interpretation-rule,
  .report .page .interpretation-rule b,
  .report .page .table,
  .report .page .kpi .k,
  .report .page .kpi .v,
  .report .page .guide-visual-card p,
  .report .page .quick-card h4,
  .report .page .quick-card p,
  .report .page .action li,
  /* [2026-08-18 추가] 실천 가이드 카드 제목("1. 운동 관리"). clamp 최솟값이 12px 이라
     배율 1.00 에서는 우연히 정확히 9pt 였고, 배율을 0.92 로 내리자 8.28pt 로 떨어졌다.
     본문과 같은 등급이므로 여기에 넣어 못박는다. */
  .report .page .action-top h3,
  .report .page .extra-items .ei-label,
  .report .page .extra-items .ei-hint,
  .report .page .extra-items .ei-text strong,
  .report .page .extra-items .ei-text p,
  .report .page .meter-head,
  .report .page .prio-level,
  .report .page .gauge-name,
  .report .page .gauge-range,
  .report .page .vital-label,
  .report .page .vital-unit,
  .report .page .vital-sub,
  .report .page .criteria-note,
  .report .page .bp-class-title,
  .report .page .bp-zone,
  .report .page .bp-bubble,
  .report .page .bp-info,
  .report .page .badge,
  /* [2026-08-18 추가 · §5-9 개편으로 대상 교체] 국가건강검진 요약 블록(S15).
     칩·구분 라벨은 .page 에서 상속받아 이미 9pt 지만, 아래 둘은 화면용으로 clamp 최솟값
     10px 를 따로 적어 둔 자리라 배율 0.92 에서 8.3pt 아래로 내려간다.
     (표 섹션이 사라져 .ck-head-meta · .ck-step · .ck-op h4 · .ck-legend-note · .ck-notes 는
      선택자 자체가 없어졌으므로 목록에서 뺐다.) */
  .report .page .ck-sum-meta,
  .report .page .ck-sum-foot,
  .report .page .ck-sum-key,
  .report .page .ck-chip,
  .report .page .data-pending {
    font-size: var(--pt-body);
  }

  /* ----- 라벨 8pt — 문장이 아니라 좌표·번호·태그 -----
     본문보다 한 급 아래로 두되 8pt 는 지킨다. 게이지 구간 라벨(.legend)이 여기 속한다 —
     그 전 4.7pt 에서 8pt 가 되어 실제로 읽히는 크기가 됐다. */
  .report .page .legend,
  .report .page .marker-value,
  .report .page .bp-yaxis,
  .report .page .bp-axis,
  .report .page .status-item .src-tag,
  .report .page .risk-next span,
  .report .page .rsb-step,
  .report .page .rsb-tail,
  /* [2026-08-18] 우선관리 칩의 순위 원 — 화면용 clamp 최솟값 9px 를 따로 적어 둔 자리라
     지면 배율에서 5.8pt 까지 떨어졌다(실측). 라벨 등급(8pt)으로 못박는다. */
  .report .page .pill-rank,
  .report .page .risk-signals>span,
  .report .page .subsection-index,
  .report .page .ai-main-title-en,
  .report .page .tag {
    font-size: var(--pt-label);
  }

  /* ----- 본문보다 큰 글자 중, 배율에 딸려 9pt 아래로 내려가던 셋 (2026-08-18) -----
     이 셋은 clamp 최솟값이 12.5~13px 이라 배율 1.00 에서는 9.4~9.8pt 로 본문(9pt)보다 컸다.
     혈압 카드를 통짜로 묶느라 배율을 0.92 로 내리자 8.6~9.0pt 로 내려가, 카드 제목이 본문보다
     작아지는 위계 역전이 생겼다(실측). 그래서 위 두 등급과 같은 방식으로 **자기 pt 를 못박는다**
     — 배율을 다시 조정해도 인쇄 크기가 따라 움직이지 않는다. 값은 배율 1.00 때의 실측 인쇄
     크기 그대로라, 이 규칙을 넣기 전후로 지면 글자 크기 변화가 0 이다.
     ※ 같은 등급의 이모지(.risk-card-icon · .sc-icon · .ei-icon)는 일부러 뺐다 — 글자가 아니라
       아이콘이므로 여백·게이지와 함께 배율을 따라가는 쪽이 맞다. */
  .report .page .vital-name,
  /* 검진 요약 블록 제목(S15) — .vital-name 과 같은 급의 카드 제목이라 같은 값으로 맞춘다 */
  .report .page .ck-sum-title {
    font-size: calc(9.5pt / var(--print-scale));
  }

  /* :not(.is-none) — 미측정 카드의 "미측정" 문구는 판정값이 아니라 본문이라 9pt 그대로 둔다
     (위 본문 목록의 `.small-card.is-none .v` 와 같은 특정도라, 빼 두지 않으면 여기가 이긴다) */
  .report .page .small-card:not(.is-none) .v {
    font-size: calc(9.75pt / var(--print-scale));
  }

  .report .page .guide-visual-card h3 {
    font-size: calc(9.4pt / var(--print-scale));
  }
}

/* ============================================================
   S16. 지면 제목·머리글 확대 (사용자 지시 2026-08-21)
   "인쇄물에서 대제목·구획 제목·회원 이름이 너무 작다. 쪽 하단에 남는 여백을 써서 키워라."
   ============================================================
   [그 전 상태 — 지면 실측(배율 0.86)]
     문서 대제목 h1   24px × 0.86 = 15.5pt   (화면 38px 대비 40% — 문서 헤더로 보이지 않는다)
     부제 subtitle     S14 본문 목록에 들어 있어 9pt (대제목과 6.5pt 차이뿐)
     회원 이름         15.5px × 0.86 = 10.0pt (정보 줄 9pt 와 사실상 같은 급)
     ①대구획 제목      14px × 0.86 =  9.03pt  ← **본문과 0.03pt 차이**. 세로바만 다르고
                                              글자 크기로는 제목으로 읽히지 않았다.
     ②소분류          12.5px × 0.86 = 7.75pt  (본문보다 작다 — 위계가 뒤집혀 있었다)
     ③카드 제목       11.5px × 0.86 = 7.13pt
     ①번호 뱃지 제목  13.5px × 0.86 = 8.37pt

   [해법] S14 와 같은 방식 — **pt 로 적고 배율로 나눈다**. 배율(--print-scale)을 조정해
   3쪽을 맞춰도 여기 적힌 인쇄 크기는 변하지 않는다. 위계는 지시대로 ①>②>③>본문을 지킨다.
     대제목 19pt · 부제 11pt · 회원 이름 13pt
     ① 12.5pt · ② 11pt · ③ 10.5pt · 본문 9.5pt(S14)

   [왜 S14 뒤인가] 아래 선택자 중 .subtitle · .eyebrow · .section-title.is-sub 등은 S14 의
   본문 목록(9.5pt)에도 들어 있다. 특정도가 같으므로(0-3-0) **소스 순서가 뒤인 이쪽이 이긴다**.
   S14 목록에서 빼지 않고 여기서 덮는 이유는, 이 구역만 지우면 종전(본문 급)으로 정확히
   되돌아가기 때문이다 — 되돌리기 쉬운 형태를 유지한다.
   ============================================================ */

@media print {

  /* ----- 문서 머리글 ----- */
  .report .page .title-wrap h1 {
    font-size: calc(19pt / var(--print-scale));
  }

  .report .page .subtitle {
    font-size: calc(11pt / var(--print-scale));
  }

  /* 눈썹 태그(AI INTEGRATED HEALTH REPORT)는 제목이 아니라 라벨이라 본문 아래 급을 유지한다 */
  .report .page .eyebrow {
    font-size: var(--pt-label);
  }

  /* 회원 이름 — 정보 줄(9.5pt)보다 확실히 큰 사람 이름 (지시 7 ①) */
  .report .page .meta .name {
    font-size: calc(13pt / var(--print-scale));
  }

  /* ----- 구획 제목 3급 (지시 8) -----
     .is-sub · .is-compact 는 .section-title 과 같은 요소에 붙는 수식 클래스라
     특정도가 한 단계 높다(0-4-0) — 아래에서 서로를 덮지 않고 순서대로 적용된다. */
  .report .page .section-title,
  .report .page .ai-subsection-title {
    font-size: var(--pt-title-1);
  }

  .report .page .section-title.is-sub {
    font-size: var(--pt-title-2);
  }

  .report .page .section-title.is-compact {
    font-size: var(--pt-title-3);
  }

  /* 세로바는 글자 크기를 따라간다 — 제목만 커지고 바가 그대로면 머리가 무거워 보인다.
     em 이라 위 pt 값이 바뀌어도 비율이 유지된다. */
  .report .page .section-title .bar {
    height: 1.25em;
  }

  .report .page .section-title.is-sub .bar {
    height: 1.1em;
  }

  /* ----- 7pt 미만 0% 유지 (지시 9) -----
     아래 셋은 화면용 clamp 최솟값이 8.3~8.5px 이라 배율 0.86 에서 6.4~7.1pt 로 떨어져
     있었다(실측). 라벨 등급(8pt)으로 못박는다 — 문장이 아니라 보조 라벨이라 본문
     9.5pt 까지 올릴 자리는 아니지만, 인쇄 하한 7pt 는 넘어야 한다. */
  .report .page .pills-label,
  .report .page .pills-hint,
  /* 면책·제공자 줄은 `.page:last-child>` 로 특정도 0-4-0 이라 여기도 같은 형태로 적는다.
     [실측 결함] 그쪽은 `font-size: 8pt` 를 **배율로 나누지 않고** 적어 두어 지면 실측이
     8 × 0.86 = 6.88pt 였다(7pt 하한 위반). 면책 줄도 clamp 최솟값 8.5px → 7.31pt 였다.
     둘 다 라벨 등급(8pt 고정)으로 올린다. */
  .report .page:last-child>.footer-note,
  .report .page:last-child>.provider-note {
    font-size: var(--pt-label);
  }
}

/* ----- 국가건강검진 요약 — 지면 숨통 (2026-08-21 사용자 지시 "너무 붙어 복잡, 하단 여유로 높이 확대") -----
   화면은 그대로 두고 지면에서만 행 간격·칩 세로 패딩을 벌린다. 3쪽 여유(하단 30mm+) 안. */
@media print {
  .report .page .ck-sum-head {
    margin-bottom: 4px;
  }

  .report .page .ck-sum-body {
    margin-top: 12px;
    padding-top: 12px;
  }

  .report .page .ck-sum-row {
    row-gap: 7px;
  }

  .report .page .ck-sum-row+.ck-sum-row {
    margin-top: 13px;
  }

  .report .page .ck-chip {
    padding-top: 3.5px;
    padding-bottom: 3.5px;
  }

  .report .page .ck-sum-chips {
    row-gap: 7px;
  }

  .report .page .ck-sum-foot {
    margin-top: 12px;
  }

  /* 행 라벨(질환의심 N·경계 N·정상 N)·판정 칩 — 지면 가독 (2026-08-24 재지시 12pt.
     ※ 이 블록은 IDE 이전 버퍼 저장으로 한 번 지워진 적 있음 — 지우지 말 것) */
  .report .page .ck-sum-key {
    font-size: calc(12pt / var(--print-scale));
  }

  .report .page .ck-chip {
    /* [2026-08-24 재지시] 1px(≈0.75pt) 축소 — 10.5 → 9.75pt */
    font-size: calc(9.75pt / var(--print-scale));
  }
}

/* ----- 지면 머리 영역 가독 보강 (2026-08-21 사용자 지시 3건) -----
   ① 회원 카드 라벨↔값 사이 띄우기 ② 대제목 +20%·상태 스트립 항목명/아이콘/표정 확대
   ③ 체성분 스몰카드 아이콘 확대. 전부 지면 전용 — 화면 불변. */
@media print {

  /* ① "연령 / 성별   66세 / 남성" — 라벨·값을 양끝으로 벌린다(웹과 같은 구성).
     [2026-08-24 재지시] gap 만으로는 카드가 내용 폭으로 오그라들어 붙어 보였다 —
     정보 열에 최소 폭을 줘 space-between 이 실제로 벌어지게 한다. */
  .report .page .meta .row {
    column-gap: 24px;
  }

  .report .page .meta .meta-rows {
    min-width: 200px;
  }

  /* ①-2 이름 열 ↔ 정보 열 사이도 벌린다 (2026-08-21 재지시 — 지면에서 두 열이 붙어 보임).
     이름 오른쪽에 세로 구분감이 생기게 간격 + 옅은 경계선. */
  .report .page .meta {
    gap: 20px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .report .page .meta .name {
    padding-right: 16px;
    border-right: 1px solid var(--line);
  }

  /* ② 대제목 19pt → 23pt(+20%), 부제도 반 단계 */
  .report .page .title-wrap h1 {
    font-size: calc(23pt / var(--print-scale));
  }

  .report .page .subtitle {
    font-size: calc(11.5pt / var(--print-scale));
  }

  /* ② 상태 스트립 — 항목명·판정을 한 급 위로, 아이콘·표정 마크 확대 */
  .report .page .status-item .label {
    font-size: calc(11pt / var(--print-scale));
    font-weight: 700;
  }

  .report .page .status-item .state {
    font-size: calc(10.5pt / var(--print-scale));
  }

  /* 아이콘 원과 표정 뱃지는 화면 비율 그대로 확대한다(아이콘:뱃지 = 44:28, 오프셋 -12/-5).
     [2026-08-21 재지시] 뱃지만 34px 로 키웠더니 아이콘과 같은 크기가 되어 겹침이 어색했다. */
  .report .page .status-icon {
    /* [2026-08-21 재지시 "더 크게"] 56 → 66px, 뱃지·오프셋은 화면 비율(44:28:-12/-5) 유지 */
    width: 66px;
    height: 66px;
    font-size: calc(17pt / var(--print-scale));
  }

  .report .page .face-badge {
    /* [2026-08-21 재지시 "스마일 이모티콘도 더 크게"] 뱃지 46px·표정 16pt */
    width: 46px;
    height: 46px;
    right: -19px;
    bottom: -8px;
    font-size: calc(16pt / var(--print-scale));
  }

  /* 카드 제목 3종(AI 종합위험 등급·핵심 판정 요약·국가건강검진 요약) — 지면 동일 12pt
     (2026-08-24 사용자 지시 "3개 다 동일하게 좀 더 크게") */
  .report .page .section-title.is-compact,
  .report .page .ck-sum-title {
    font-size: calc(12pt / var(--print-scale));
  }

  /* 종합점수 링 숫자 — 지면 +3~4px (2026-08-24 사용자 지시. 압축 링 41px 안 중앙 유지) */
  .report .page .score-ring b {
    font-size: calc(14pt / var(--print-scale));
  }

  /* "주의 단계" 등급 제목 — 지면 +4px (2026-08-24 사용자 지시.
     종전엔 화면 clamp(≈24px)가 배율 0.78 로 줄어 실인쇄 약 14pt — 17pt 로 못박는다) */
  .report .page .score-text .grade {
    font-size: calc(17pt / var(--print-scale));
  }

  /* ④ 미니카드 수치(키/몸무게·BMI·혈압 등) — 한 급 확대 (2026-08-21 재지시).
     [재지시 2] 13pt 에서 "120/60 / mmHg / 94 bpm" 3줄로 꺾였다 — 값·단위를 한 줄로 묶고
     (nowrap) 12.5pt 로 반 급 내려 카드 폭 안에 담는다 → 값 1줄 + 메모(94 bpm) 1줄 = 2줄. */
  .report .page .mini-card .v {
    font-size: calc(12.5pt / var(--print-scale));
    white-space: nowrap;
  }

  /* ③ 체성분 스몰카드 아이콘 */
  .report .page .small-card .sc-icon {
    width: 34px;
    height: 34px;
    font-size: calc(12pt / var(--print-scale));
  }
}
/* ===== 13-2. 현재 위치 마커 펄스 (2026-09-03 사용자 지시) ===== */
/* "그래프에서 내 위치를 보여주는 곳에 현재 위치 파악이 용이하게 간단한 애니메이션".
   시니어 대상이라 깜빡임·색 변화는 금지 — **형태만** 움직인다. 마커 주위로 링 하나가
   1.8s 주기로 조용히 퍼지며 사라진다(확산 1.9배 + 불투명도 감쇠).

   [마크업 무수정] 링은 각 마커의 ::after 로 얹는다. 세 마커 모두 ::after 가 비어 있음을
   확인하고 골랐다(::before 는 게이지 마커 꼬리 등에 이미 쓰인다).
   기준 기하는 1px 도 건드리지 않는다 — 링은 absolute + translate(-50%,-50%) 로 마커 중심에
   얹히고 pointer-events:none 이라 흐름·좌표·클릭에 영향이 없다.
   [2026-09-04 사용자 지시 2차] "위험점수 막대(이미지1)처럼 나머지 그래프도 표시가 잘 나게 +
   색상은 블루 계열" — 링 색을 마커별 잉크에서 **리포트 블루(--blue) 한 벌**로 통일하고
   시작 불투명도 .5→.65, 두께 2→2.5px 로 올렸다. 마커 본체 색은 그대로다(링만 블루). */
@keyframes report-marker-pulse {
  0% {
    opacity: .65;
    transform: translate(-50%, -50%) scale(1);
  }

  70% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.9);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.9);
  }
}

/* 3p 게이지 마커 · 혈압 분류 그래프 점 · 위험점수 막대 마커 — 같은 keyframe 한 벌을 공유한다 */
.report .marker-dot::after,
.report .bp-marker .dot::after,
.report .score-arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  /* [2026-09-04 2차 보정] 2.5px 는 zoom 1.59 에서 2px 와 같은 3 device px 로 내림된다
     (QA 실측 — 보더 스냅). 실제로 굵어지는 최소값 3px(=4 device px)로 확정. */
  border: 3px solid var(--blue);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: report-marker-pulse 1.8s ease-out infinite;
}

/* 링의 기준 상자가 되려면 마커가 위치 기준이어야 한다. 점 2종은 종전 값이 static 이라
   relative 로만 올린다 — static→relative 는 자기 좌표를 바꾸지 않으므로 기하 불변이다.
   [2026-09-04 정정] .score-arrow 는 **여기 넣으면 안 된다** — 위험점수 마커는 이미
   `position: absolute; top: 50%; transform: translate(-50%,-50%)` 로 막대에 앉아 있어서(1750행대),
   같은 특이도의 relative 가 뒤에서 이기면 마커가 막대에서 떨어져 나간다. absolute 도
   ::after 의 위치 기준이 되므로 그대로 두면 된다. */
.report .marker-dot,
.report .bp-marker .dot {
  position: relative;
}

/* [2026-09-04 보강] 4p 위험 상세 카드의 단계 스테퍼 현재 칸(.rsb-track .is-current)도
   "내 위치" 표시다 — 칸이 원이 아니라 알약(999px)이라 원형 링(scale 1.9)을 그대로 쓰면
   가로로 과하게 퍼진다. 같은 리듬(1.8s)의 **필 전용 keyframe**(확산 1.35배)을 따로 둔다.
   색은 그 카드의 단계색(--rsb-ink)을 그대로 써 색 변화가 없다. */
@keyframes report-marker-pulse-pill {
  0% {
    opacity: .6;
    transform: translate(-50%, -50%) scale(1);
  }

  70% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.35);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.35);
  }
}

.report .rsb-track span.is-current {
  position: relative;
}

.report .rsb-track span.is-current::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  /* [2026-09-04 2차] 단계색(--rsb-ink) → 리포트 블루 — 다른 마커 링과 한 벌, 시인성 상향 */
  border: 2px solid var(--blue);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: report-marker-pulse-pill 1.8s ease-out infinite;
}

/* [무효화 1] 지면 — 애니메이션은 잔상·transform 흔적을 남길 수 있으므로 링 자체를 없앤다.
   display:none 이라 초기 프레임조차 그려지지 않아 기존 정적 마커 모양이 그대로 인쇄된다. */
@media print {

  .report .marker-dot::after,
  .report .bp-marker .dot::after,
  .report .score-arrow::after,
  .report .rsb-track span.is-current::after {
    display: none;
  }
}

/* [무효화 2] 움직임 최소화를 요청한 사용자 — 같은 이유로 링을 아예 띄우지 않는다 */
@media (prefers-reduced-motion: reduce) {

  .report .marker-dot::after,
  .report .bp-marker .dot::after,
  .report .score-arrow::after,
  .report .rsb-track span.is-current::after {
    display: none;
    animation: none;
  }
}


/* ===== 13-3. 인쇄 — 키/몸무게 값 줄바꿈 (2026-09-03 사용자 지시, 09-04 QA FAIL 교정) ===== */
/* 1p 미니카드 "키 / 몸무게"(PairValue)가 지면에서 카드 밖으로 넘쳤다(실측 9.7pt — 옆 BMI
   카드 3.7pt 침범).
   [1차 시도가 무효였던 이유 — QA] 12구역 인쇄 규칙 `.report .page .mini-card .v` 가
   `white-space: nowrap` 을 걸고 있어(혈압 117/72 + 85bpm 이 3줄로 꺾이던 회귀 방지, 5727행)
   소프트 랩 기회 자체가 없다 → overflow-wrap: anywhere 는 발동할 자리가 없었다.
   [교정 2차 — QA 재FAIL] 1차 교정(span.pair-value 래퍼 + :has())은 래퍼 span 이
   `.mini-card .v span` 공통 규칙(871행: 단위용 9.5px·회색·nowrap)에 잡혀 값 전체가 단위
   크기·색으로 축소되는 회귀를 만들었다. 훅을 **.v 컨테이너 자체**(MiniCard vClass="pair-value",
   키/몸무게 칸만)에 옮긴다 — 값 텍스트가 .v 직계 텍스트 노드로 남아 871행 영향권 밖이고,
   .v.pair-value(5클래스)가 선행 nowrap(4클래스)을 특이도로 이긴다.
   보통은 슬래시 뒤 공백에서 끊겨 `166.5cm /` + `82.2kg` 두 줄이 되고, 그마저 좁을 때만
   anywhere 가 덩어리를 쪼갠다. 화면은 종전 그대로 — 규칙이 @media print 안에만 있다. */
@media print {
  .report .page .mini-card .v.pair-value {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}