/* 새봄 성장관리 — 공통 스타일.
   디자인 기준값(색·글꼴·간격·모서리·그림자)은 같은 병원 브랜드인 기존 에이전시 앱 static/shared/common.css(커밋 59c6285,
   제품 기획 §6에서 확인)의 기준을 따른다. 코드는 새로 썼다. 인라인 스타일·스크립트 없음(CSP). */
.dev-review-bar {
  position: static;
  box-sizing: border-box;
  max-width: 100%;
  padding: var(--space-1) var(--space-3);
  color: var(--ink-2);
  background: var(--accent-soft);
  font-family: var(--font);
  font-size: var(--text-caption);
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
}
:root {
  --canvas: #f4f7f7; --surface-1: #ffffff; --surface-2: #f7faf9; --surface-3: #eef4f3;
  --overlay: rgba(16, 34, 32, .42);
  --ink-1: #12302c; --ink-2: #3c5551; --ink-3: #5c716e; --ink-4: #8a9a98; --ink-inverse: #ffffff;   /* D179 ink-4 = 비활성·자리표시(3:1) */
  --line-1: #e3ebea; --line-2: #cfdcda; --line-3: #adc2bf;
  --accent: #094d45; --accent-hover: #073e37; --accent-soft: #e6f2f0; --accent-ink: #0b5e55;
  --success: #0b5e55; --success-soft: #e6f2f0;
  --warning: #8a5a00; --warning-soft: #fff6df;
  --danger: #9b2c2c; --danger-soft: #fdecec;
  --info: #2f5486; --info-soft: #e7effa;
  --focus-ring: #0b5e5540;
  /* 병원 브랜드(TO_CLAUDE_B_BRAND_PALETTE, 에이전시 앱 common.css·hospital/style.css 읽기 전용 참고값). 아래 셋은 짙은 녹색
     바탕 위 전용 — 흰 바탕의 글자·날짜에 쓰지 않는다. 지금 성장 앱 화면에는 짙은 탐색 영역이 없어 아직 쓰는 곳이 없다 */
  --brand: #094d45;                                    /* 헤더 브랜드 고정 녹색 — 아이 테마(핑크·하늘)가 바꾸지 않는다 */
  --brand-select: #0d5c53; --on-dark: #e4efed; --on-dark-2: #a9c6c2; --brand-gold: #ffd98a;
  --date-col: 8.8em;                                   /* D113 날짜 열 고정 폭 — 최장 형식 '2025년 12월 28일'(글자 200%에서도 em으로 같이 커짐) */
  --chart-bg-boy: #f5fafe; --chart-bg-girl: #fef7fa;   /* D82 도표 성별 배경(D88 ③ 더 연하게, 아이 테마와 별개 — 직원 화면에도 같은 값) */
  /* D179(DESIGN_SYSTEM_V2 §2-1) 글꼴 = Pretendard(자체 호스팅은 A-146 서버 뒤) — 그 전에는 같은 계열 대체 순서. 숫자는 본문 글꼴의 tabular-nums
     (고정폭 글꼴 0 — 차트 번호·키도 코드처럼 보이지 않게) */
  --font: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  --font-num: var(--font);
  /* D179 §2-2 크기 한 단계 키움(직원): 캡션 12 · 라벨 13 · 본문 14 · 행 제목 14 · 카드/구역 제목 17 · 화면 제목 22 */
  --text-caption: 12px; --text-label: 13px; --text-body: 14px; --text-body-lg: 14px;
  --text-title: 17px; --text-section: 17px; --text-page: 22px;
  /* D125 D-파도2 T1: 역할표(캡션 12/400·라벨 12/500·본문 13/400·행 제목 14/600·구역 제목 16/600·섹션 20/600·페이지 26/600) 밖에서
     쓰던 크기도 이름으로(값 그대로). 합치기(15→14/16, 17·18→하나, 브랜드 5→2 등)는 C 판정 뒤 이 줄만 고치면 전면 반영 */
  --text-chart-xs: 10px; --text-micro: 11px;           /* 도표 곡선 라벨 / 도표 눈금·Powered by·알림 숫자 */
  --text-control-lg: 14px;                             /* 큰 컨트롤(모드 버튼·밑줄 탭·골연령 입력)·보호자 강조 값 — D129 ⓒ 행 제목과 같게(16으로 바꾸려면 이 줄만) */
  --text-input: 16px;                                  /* 휴대폰 입력칸(아이폰 자동 확대 방지 — 16 미만 금지) */
  --text-value: 18px; --text-display: 22px;           /* D129 ⓑ 수치·이름·모바일 구역 제목·큰 값 하나(17·18 → 18) / 측정값·가입 제목 */
  --brand-desktop: 28px; --brand-mobile: 22px;         /* D129 ⓐ 브랜드 이름 — 넓은 화면 28 · 900px 이하 22(5종 → 2종) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px;
  /* D179 §2-4 모서리 sm 8 · md 12(버튼·입력) · lg 16(카드·대화상자) · pill — 그림자 3단(카드·떠 있는 바·대화상자) */
  --radius-sm: 8px; --radius-control: 12px; --radius-surface: 16px; --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(16, 40, 36, .04); --shadow-2: 0 4px 16px rgba(16, 40, 36, .08); --shadow-3: 0 16px 40px rgba(16, 40, 36, .18);
  --shadow-raised: var(--shadow-1); --shadow-overlay: var(--shadow-3);
  --control-sm: 32px; --control-md: 40px; --control-lg: 48px;      /* D179 버튼 3크기(폰에서는 누르는 곳 44 이상) */
  --motion-fast: 120ms; --ease: cubic-bezier(.2, .6, .3, 1);

  /* D125 D-파도1 토큰 수렴: 아래는 그동안 규칙 안에 흩어져 있던 값을 이름으로 모은 것(값은 그대로). 색 취향은 여기 한 줄로 바꾼다 */
  --radius-mark: 3px;                                  /* 도표 표식(막대·점수 칸) 전용 작은 반경 — 4번째 반경(C 승인, D125 round-45) */
  --z-base: 1; --z-raised: 3; --z-sticky: 10; --z-nav: 20; --z-overlay: 60; --z-toast: 120;   /* 쌓임 사다리 */
  --warning-ink: #754600; --warning-mark: #b86e00; --warning-line: #ecd9a8; --warning-wash: #fff4e5;   /* 엑스레이 예정 등 주황 계열 */
  --danger-line: #e7c4c4;                              /* 위험 버튼·폼 테두리 */
  --brand-line: #8fbfb7; --brand-wash: #d7ebe7;        /* '다시 불러오기' 버튼 테두리·눌림 */
  --tap-highlight: rgba(9, 77, 69, .12);              /* M-11 누름 반짝임(강조색 #094d45의 12%) — D-파도3 */
  --sex-m: #176b96; --sex-f: #a83e68;                  /* 성별 색(아이 테마 강조·산점도 같은 값) */
  --bmi-under: #5b7a99; --bmi-normal: #2f8f6b; --bmi-over: #c99a1c; --bmi-obese: #d0604f; --bmi-none: #a3b1ae;   /* D56 BMI 점 */
  --chart-muted: #8a9a98; --chart-label: #6b7c7a;      /* 도표 보조 선·글자(가정 점 테두리·초기 경로) */
  --flow-done: #E3EEEA;                                /* 가입 단계 완료 점 */
  --video-backdrop: rgba(8, 20, 18, .88); --media-bg: #000;   /* 영상 겹침 바탕·영상 틀(의도적 검정) */
  --join-canvas: #F6F8F7; --join-line: #D5DFDB;        /* 가입 화면 바탕·입력 테두리(에이전시 가입 화면 계승) */
  /* D159 접힌 칸 종류 색(7가지) — 측정·도표·약제·수면·운동·통계·기타(특이 사항·골연령·목록 등). 흰 바탕 위 4.5:1 이상 */
  --kind-measure: #0b6b5f; --kind-chart: #2a5ea8; --kind-meds: #8a3f8f; --kind-sleep: #4b4aa8; --kind-exercise: #3d7a1c;
  --kind-stats: #8f5a00; --kind-other: #586a67;
}
@media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0ms; } }

/* 아이별 테마(D31, Codex 선정안). 강조·옅은 바탕·화면 바탕·본문만 바꾸고 경고·오류·성공 의미 색은 그대로.
   대비: 강조색 흰 바탕 약 5.9:1, 옅은 강조 바탕 위 약 5.1:1(일반 글자 4.5:1 기준 충족) */
[data-child-theme="girl"] { --canvas: #fff7fa; --accent: var(--sex-f); --accent-hover: #8e3257; --accent-soft: #fce7ef;
  --accent-ink: var(--sex-f); --ink-1: #243746; --focus-ring: #a83e6840; }
[data-child-theme="boy"] { --canvas: #f3faff; --accent: var(--sex-m); --accent-hover: #125a7f; --accent-soft: #e0f2fe;
  --accent-ink: var(--sex-m); --ink-1: #243746; --focus-ring: #176b9640; }
/* 간호 화면처럼 목록 옆의 아이 영역만 테마일 때: 그 영역에 바탕을 깐다(목록은 중립) */
.stack[data-child-theme] { background: var(--canvas); border-radius: var(--radius-surface); padding: var(--space-3); }

* { box-sizing: border-box; }
html, body { margin: 0; }
.input::placeholder { color: var(--ink-3); opacity: 1; }   /* 흐린 예시 — 대비 4.5:1 이상(D77) */
body {
  font-family: var(--font); font-size: var(--text-body); line-height: 1.5; color: var(--ink-2);
  background: var(--canvas); -webkit-font-smoothing: antialiased;
  /* 한글은 띄어쓰기 단위로 줄바꿈('동의합니/다' 방지, C NEO-02). 한 단어가 폭보다 길 때만 안전하게 끊는다 */
  word-break: keep-all; overflow-wrap: anywhere;
}
/* 숫자·날짜는 중간에서 끊지 않는다(C R4-08) — 본문의 anywhere가 좁은 표에서 '2026-0/9-28'처럼 자르지 않게. 표 칸 전체를 한 줄로
   고정하지는 않는다(글자 200%에서 넘침 방지 — 필요한 곳은 기존 .nowrap) */
.num, time, .table td.num { overflow-wrap: normal; }
h1, h2, h3 { color: var(--ink-1); margin: 0; font-weight: 600; line-height: 1.25; }
h4, h5, h6, b, strong { font-weight: 600; }                            /* D125 굵기 3단계: 브라우저 기본 굵게(700)도 600으로 */
/* D125 D-파도2 타이포 역할표(CLAUDE_B_DESIGN_ROLES.md) — 새 화면은 이 역할 클래스나 같은 토큰 짝(크기/굵기)만 쓴다 */
.t-caption { font-size: var(--text-caption); font-weight: 400; }
.t-label { font-size: var(--text-label); font-weight: 500; }
.t-body { font-size: var(--text-body); font-weight: 400; }
.t-row { font-size: var(--text-body-lg); font-weight: 600; }
.t-title { font-size: var(--text-title); font-weight: 600; }
.t-section { font-size: var(--text-section); font-weight: 600; }
.t-page { font-size: var(--text-page); font-weight: 600; }
h1 { font-size: var(--text-page); letter-spacing: -0.01em; }          /* D179 17px 이상 제목 자간 */
h2 { font-size: var(--text-title); letter-spacing: -0.01em; }
h2.child-title { font-size: var(--text-page); }                      /* 트레이너 아이 화면 이름(제목 단계만 h2, 모양은 h1과 같게) */
h3 { font-size: var(--text-body-lg); }
p { margin: 0; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }                          /* D179 숫자 = 본문 글꼴 + 고정 폭 숫자(고정폭 글꼴 없음) */
.muted { color: var(--ink-3); }
.small { font-size: var(--text-label); }
.caption { font-size: var(--text-caption); color: var(--ink-3); }

/* ---- 버튼·입력 ---- */
button, input, select, textarea { font: inherit; color: inherit; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-md); padding: 0 var(--space-4); border-radius: var(--radius-control);
  border: 1px solid var(--line-2); background: var(--surface-1); color: var(--ink-1);
  font-weight: 500; cursor: pointer; white-space: nowrap;           /* D179 기본 = secondary md 40 */
  transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.btn:hover { border-color: var(--line-3); background: var(--surface-2); }
.btn:focus-visible, .input:focus-visible, .row:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--focus-ring); border-color: var(--accent);
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--ink-inverse); font-weight: 600; }
.btn.primary:hover { background: var(--accent-hover); }
.btn.quiet { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn.quiet:hover { background: var(--surface-3); }
.btn.danger { color: var(--danger); border-color: var(--danger-line); }
/* D179 §3-1 버튼 5변형(primary·secondary(기본)·tonal·quiet·danger) × 3크기(small 32 · 기본 40 · lg 48). 폰·터치는 누르는 곳 44 이상 */
.btn.tonal { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); font-weight: 600; }
.btn.tonal:hover { background: var(--brand-wash); }
.btn.small { min-height: var(--control-sm); padding: 0 var(--space-3); font-size: var(--text-body); }
.btn.lg { min-height: var(--control-lg); padding: 0 var(--space-5); font-size: var(--text-body-lg); font-weight: 600; }
.btn svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 900px), (pointer: coarse) { .btn, .btn.small { min-height: 44px; } }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.input, select.input, textarea.input {
  width: 100%; min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-control);
  border: 1px solid var(--line-2); background: var(--surface-1); font-size: var(--text-body-lg);
}   /* D179 입력 44(폰 48) */
@media (max-width: 900px), (pointer: coarse) { .input, select.input { min-height: 48px; } }
textarea.input { padding: var(--space-2) var(--space-3); min-height: 72px; resize: vertical; line-height: 1.5; }
.field { display: grid; gap: var(--space-1); }
.field > span { font-size: var(--text-label); font-weight: 500; color: var(--ink-2); }
.field .hint { font-size: var(--text-caption); color: var(--ink-3); }
.field.invalid .input { border-color: var(--danger); }
.field .error { font-size: var(--text-label); color: var(--danger); margin-top: 2px; }   /* 칸 바로 아래 6px(간격 4 + 2 — 노하우 §4) */

/* ---- 칩·배지 ---- */
.chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-pill);
  font-size: var(--text-caption); font-weight: 500; background: var(--surface-3); color: var(--ink-2); }   /* D179 상태 칩 24 · 12/500 */
.chip.accent { background: var(--accent-soft); color: var(--accent-ink); }
.chip.warning { background: var(--warning-soft); color: var(--warning); }
.chip.success { background: var(--success-soft); color: var(--success); }
.chip.danger { background: var(--danger-soft); color: var(--danger); }
.chip.info { background: var(--info-soft); color: var(--info); }
.count.zero { background: var(--surface-3); color: var(--ink-3); }
.count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); display: inline-flex;
  align-items: center; justify-content: center; font-size: var(--text-caption); font-weight: 500;
  background: var(--accent); color: var(--ink-inverse); }                     /* 건수 배지 20 · 12/500(D129 12/600 금지 — 유지) */

/* ---- 틀: 윗줄 + 본문 ---- */
.topbar { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--space-8);
  min-height: 88px; padding: var(--space-3) var(--space-6); background: var(--surface-1); border-bottom: 1px solid var(--line-1); }
/* 표시 브랜드(D34·D53): '187 성장 클리닉'은 헤더의 기준점(29/800), 둘째 줄은 작은 'Powered by'(12/400)와
   굵고 진한 '연세새봄의원'(17/700)을 나눈다. 둘 다 병원 녹색 고정(--brand). 병원명은 줄 중간에서 쪼개지 않는다 */
.brand { display: grid; gap: 6px; line-height: 1.1; white-space: nowrap; }
.brand-name { font-weight: 600; color: var(--brand); font-size: var(--brand-desktop); letter-spacing: -.01em; }
.brand-sub { display: flex; align-items: baseline; gap: 6px; color: var(--ink-3); }
.brand-by { font-size: var(--text-caption); font-weight: 400; letter-spacing: .01em; }
.brand-hospital { font-size: var(--text-value); font-weight: 600; color: var(--brand); white-space: nowrap; }
.who { display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
@media (max-width: 260px) { .who { flex-wrap: wrap; white-space: normal; max-width: 100%; } }   /* 320폭 글자 200%: 역할·로그아웃이 다음 줄로 */
/* 직원 헤더(TO_CLAUDE_B_HEADER_REDESIGN): 짙은 녹색 세 영역 — 브랜드(흰 187 성장 클리닉 / 작은 Powered by / 연세새봄의원) ·
   업무 메뉴(선택은 흰 글자 + 아래 2px 금색 선, 민트 상자 없음) · 계정(이름·역할 작게, 로그아웃은 보조). 보호자 화면은 그대로.
   대비(배경 #294F46): 흰 글자 9.6:1, 연한 중립 글자 6:1 이상 목표 — 브라우저에서 측정해 인계 */
.staff-top { --hdr-bg: #294F46; --hdr-ink: #FFFFFF; --hdr-soft: #C7D6D0; --hdr-line: #1D3B34; --hdr-gold: #D9B86C; --hdr-chip-line: rgba(255, 255, 255, .28); --hdr-divider: rgba(255, 255, 255, .14);
  background: var(--hdr-bg); border-bottom: 1px solid var(--hdr-line); color: var(--hdr-ink);
  min-height: 86px; padding: var(--space-3) 30px; gap: 44px; }
.staff-top .brand { gap: 4px; }
.staff-top .brand-name { color: var(--hdr-ink); font-size: var(--brand-desktop); font-weight: 600; letter-spacing: -.01em; }
.staff-top .brand-sub { color: var(--hdr-soft); }
.staff-top .brand-by { font-size: var(--text-micro); color: var(--hdr-soft); }
.staff-top .brand-hospital { color: var(--hdr-ink); font-size: var(--text-title); font-weight: 600; }
.staff-top #logout:focus-visible { outline: 2px solid var(--hdr-ink); outline-offset: 2px; }
.staff-top .who { margin-left: auto; }                                 /* D162 업무 메뉴가 머리 아래 탭 줄로 — 계정은 오른쪽 끝 그대로 */
.staff-top .who { gap: var(--space-2); }
.staff-top .who .name { color: var(--hdr-ink); font-size: var(--text-body-lg); font-weight: 600; }
.staff-top .who-role { font-size: var(--text-caption); color: var(--hdr-soft); padding: 1px 8px; border: 1px solid var(--hdr-chip-line); border-radius: var(--radius-pill); }
.staff-top #logout { margin-left: var(--space-4); min-height: var(--control-md); padding: 0 var(--space-2); background: none; border: 0; color: var(--hdr-soft); font-size: var(--text-body); }
.staff-top #logout:hover { color: var(--hdr-ink); text-decoration: underline; }
.main { padding: var(--space-5); max-width: 1440px; margin: 0 auto; }
/* 간호 화면 목록→아이(D75): 넓으면 나란히, 900px 이하는 한 번에 한 화면 + '← 아이 찾기' */
.nurse-back { display: none; }
@media (max-width: 900px) {
  .nurse-layout.show-detail > .nurse-list { display: none; }
  .nurse-layout:not(.show-detail) > .nurse-work { display: none; }
  .nurse-back { display: inline-flex; justify-self: start; }
}

/* 목록 + 작업 화면: 목록 약 34%(최소 280px), 작업 약 66%(D36 — 상세가 더 넓게) */
.layout { display: grid; grid-template-columns: minmax(280px, 34fr) minmax(0, 66fr); gap: var(--space-4); align-items: start; }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
/* 표의 최소 폭이 부모 열·패널로 번져 페이지 전체가 넓어지지 않게(Codex LIVE-01): 표는 .table-wrap 안에서만 가로 스크롤 */
.layout > *, .stack > *, .panel, .table-wrap { min-width: 0; }
.panel { background: var(--surface-1); border: 1px solid var(--line-1); border-radius: var(--radius-surface);
  box-shadow: var(--shadow-raised); }
.panel > header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line-1); }
.panel > .body { padding: var(--space-4); }
.panel > .body.flush { padding: 0; }
/* D179 상자 안 상자 금지: 카드 안에 접힘 칸 하나뿐이면 카드 면·테두리·그림자 없이 접힘 칸만 */
.panel:has(> .body > .disclose-box:only-child):not(:has(> header)) { background: none; border: 0; box-shadow: none; }
.panel:has(> .body > .disclose-box:only-child):not(:has(> header)) > .body { padding: 0; }

/* ---- 목록 ---- */
.list { list-style: none; margin: 0; padding: 0; }
.row { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-3) var(--space-4);
  border: 0; border-bottom: 1px solid var(--line-1); background: transparent; text-align: left; cursor: pointer; }
.list > li:last-child > .row { border-bottom: 0; }
.row:hover { background: var(--surface-2); }
.row[aria-current="true"] { background: var(--accent-soft); }
.row .grow { flex: 1; min-width: 0; }
.row .title { color: var(--ink-1); font-weight: 600; }
.row .meta { font-size: var(--text-label); color: var(--ink-3); }
/* 공통 환자 행(오늘 측정·가정 기록, TO_CLAUDE_B_MEASUREMENT_UI_BENCHMARK §3): 번호-이름 → 나이 → 수치·측정일 → 입력 이력.
   이름 17/700, Chart No. 14/400~500, 나이 14, 값 22/700(고정폭 숫자), 라벨 13/500, 단위·날짜 14, 이력 13. 좌우 20·상하 16(모바일 16).
   고정 높이·한 줄 강제·말줄임 없이 자연스럽게 줄바꿈 */
.row.prow { align-items: center; padding: var(--space-4) var(--space-5); }
.prow .grow { display: grid; gap: var(--space-1); }
.p-id { font-size: var(--text-body-lg); overflow-wrap: anywhere; }
.chart-no { font-weight: 500; color: var(--ink-2); }
.chart-label { color: var(--ink-3); font-weight: 400; }
.p-no { white-space: nowrap; font-variant-numeric: tabular-nums; }        /* 번호와 '-'를 한 줄에 — 줄바꿈되면 이름이 다음 줄 */
.chart-name { font-size: var(--text-value); font-weight: 600; color: var(--ink-1); white-space: nowrap; }
.stats-children .chart-name { white-space: normal; overflow-wrap: anywhere; }
.stats-children .row { min-height: 44px; }
.p-age { font-size: var(--text-body-lg); color: var(--ink-3); }
.measure-line { margin-top: var(--space-1); color: var(--ink-2); line-height: 1.35; }
.measure-line .m-item { display: inline-block; }                          /* 항목 단위로 줄바꿈, 날짜는 같은 항목 안에서 */
.measure-line .m-label { font-size: var(--text-body); font-weight: 500; color: var(--ink-2); }
.measure-line .m-value { font-size: var(--text-display); font-weight: 600; color: var(--ink-1); font-variant-numeric: tabular-nums; }
.measure-line .m-unit, .measure-line .m-sep { font-size: var(--text-body-lg); color: var(--ink-2); }
.measure-line .m-day { font-size: var(--text-body-lg); color: var(--ink-3); white-space: nowrap; }
.measure-line .m-value.small { font-size: var(--text-value); }
.measure-line .m-none, .measure-line.m-none { font-size: var(--text-body-lg); color: var(--ink-3); }
.p-history { font-size: var(--text-body); color: var(--ink-3); }
@media (max-width: 640px) { .row.prow { padding: var(--space-4); } }
/* D53 이후 좁은 화면의 헤더는 2~3줄(브랜드·계정·메뉴) — 고정하면 화면의 1/5을 가리므로 640px 이하에서는 함께 스크롤 */
@media (max-width: 640px) { .topbar { position: static; } }
@media (max-width: 359px) { .measure-line .m-day, .chart-name { white-space: normal; word-break: keep-all; } }   /* 200% 확대 등: 넘치지 않게 단어 단위 줄바꿈 */
.empty { padding: var(--space-8) var(--space-4); text-align: center; color: var(--ink-3); }   /* D179 §3-10 빈 상태: 제목 한 줄 + 도움 한 줄, 가운데 */
.empty strong { display: block; color: var(--ink-1); font-size: var(--text-body-lg); font-weight: 600; margin-bottom: var(--space-1); }
li.empty { list-style: none; }
/* D179 §5 간호 메인 오른쪽(아이 고르기 전): 빈 상태 부품을 칸 가운데쯤에 — 아이콘 타일(icons.js search 경로, 마스크라 강조색) + 제목 + 도움 */
.nurse-work > .stack > .empty:only-child { display: grid; justify-items: center; padding: 12vh var(--space-4) var(--space-8); }
.nurse-work > .stack > .empty:only-child::before { content: ''; grid-area: 1 / 1; margin-bottom: var(--space-4); width: 56px; height: 56px; border-radius: 50%; background: var(--accent-soft); }
.nurse-work > .stack > .empty:only-child::after { content: ''; grid-area: 1 / 1; margin-bottom: var(--space-4); align-self: center; width: 26px; height: 26px; background: var(--accent-ink);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='10.5' cy='10.5' r='6'/><path d='m15 15 5 5'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='10.5' cy='10.5' r='6'/><path d='m15 15 5 5'/></svg>") center / contain no-repeat; }
.thread .reply-bar { justify-content: flex-end; padding: var(--space-2) var(--space-3); border-top: 1px solid var(--line-1); }   /* 메모 답글 쓰기·전달(D-파도3) */

/* 누를 수 있는 아이 행의 › 표시 */
.row .chev { flex: none; color: var(--ink-3); font-size: var(--text-value); line-height: 1; margin-left: var(--space-1); }
.row:hover .chev { color: var(--accent-ink); }

/* ---- 관리 탭 섹션(D35): 제목(카테고리)과 아이 행(내용)의 위계 ---- */
.panel.section > header { align-items: flex-start; padding: var(--space-4); }
.panel.section > header h2 { font-size: var(--text-section); font-weight: 600; color: var(--ink-1); }
.section-desc { margin: 2px 0 0; font-size: var(--text-body); color: var(--ink-3); }
.count-label { font-size: var(--text-body-lg); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.panel.section .list .row { padding-left: var(--space-6); }
.panel.section .row .title { font-size: var(--text-title); }
.panel.section .row .meta { font-size: var(--text-body); }

/* ---- 숫자 카드 ---- */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.stat { padding: var(--space-3) var(--space-4); border-radius: var(--radius-surface); background: var(--surface-2);
  border: 1px solid var(--line-1); }
.stat .value { font-size: var(--text-section); font-weight: 600; color: var(--ink-1); }
.stat.warn .value { color: var(--warning); }

/* ---- 아이 화면 ---- */
.child-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.child-head > * { min-width: 0; max-width: 100%; }                  /* 기본 차트 머리: 글자 200%·320폭에서 칸 폭 안으로(가로 넘침 없음) */
.child-head h1, .child-head .child-title, .child-head .caption { overflow-wrap: anywhere; }
@media (max-width: 260px) { .chip { height: auto; min-height: 22px; } }   /* 글자 200%·아주 좁은 폭: 두 줄이 된 칩 글자가 바탕 밖으로 나가지 않게 */
.child-head h1, .child-head h2.child-title { font-size: var(--text-section); }
.child-head .facts { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin-top: var(--space-2); }
.id-label { font-size: var(--text-label); font-weight: 500; color: var(--ink-2); }   /* 식별자(차트 번호) 라벨체 — 상태 칩과 구분(D-파도2) */
.entry { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--space-3); align-items: end; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: var(--text-label); font-weight: 500; color: var(--ink-3);
  background: var(--surface-3); padding: var(--space-2) var(--space-3); }
.table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line-1); vertical-align: middle; }
/* 직원 표 본문은 14px(UI/UX 기준 3-2). 좁은 옆 칸의 작은 표(compact)는 그대로 */
.table:not(.compact) td { font-size: var(--text-body-lg); }
.table td.actions { text-align: right; white-space: nowrap; }
.table tr.today td { background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface-1)); }

/* ---- 메모(대화) ---- */
.thread { border: 1px solid var(--line-1); border-radius: var(--radius-surface); overflow: hidden; }
.thread + .thread { margin-top: var(--space-3); }
.thread > header { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3);
  background: var(--surface-2); border-bottom: 1px solid var(--line-1); }
.messages { display: grid; gap: var(--space-2); padding: var(--space-3); }
.msg { max-width: 82%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-surface);
  white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.guardian { background: var(--surface-3); justify-self: start; }
.msg.staff { background: var(--accent-soft); justify-self: end; }
/* 보호자 앱: 본인 글(by_me)만 오른쪽, 다른 보호자·병원 글은 왼쪽(PARENT-02) */
.msg.mine { background: var(--accent-soft); justify-self: end; }
.msg.other { background: var(--surface-3); justify-self: start; }
.msg .by { font-size: var(--text-caption); color: var(--ink-2); margin-bottom: 2px; }   /* A11Y-1: 옅은 강조 바탕 위 대비 4.5:1 이상(--ink-3은 4.41:1) */
.panel .body > .reply:first-child { border-top: 0; padding: 0 0 var(--space-4); }
.reply { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); padding: var(--space-3);
  border-top: 1px solid var(--line-1); align-items: end; }

/* ---- 알림·대화상자 ---- */
.notice { padding: var(--space-3) var(--space-4); border-radius: var(--radius-surface); background: var(--info-soft);
  color: var(--info); }
.notice.warning { background: var(--warning-soft); color: var(--warning); }
.notice.danger { background: var(--danger-soft); color: var(--danger); }
.notice.success { background: var(--success-soft); color: var(--success); }
.toast { position: fixed; bottom: var(--space-6); left: 50%; transform: translateX(-50%); z-index: var(--z-toast);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--ink-1); font-size: var(--text-body);
  color: var(--ink-inverse); box-shadow: var(--shadow-2); max-width: min(360px, calc(100vw - 32px)); }   /* D179 §3-11 */
.toast.error { background: var(--danger); }
.guardian-app .toast { bottom: calc(var(--tabbar-h, calc(61px + env(safe-area-inset-bottom))) + var(--space-2)); }   /* D123 M-5 탭바를 덮지 않게 — 실제 높이 */
dialog { border: 0; border-radius: var(--radius-surface); padding: 0; box-shadow: var(--shadow-overlay);
  width: min(460px, calc(100vw - 32px)); color: var(--ink-2); }
dialog::backdrop { background: var(--overlay); }
dialog form { display: grid; gap: var(--space-4); padding: var(--space-5); }
dialog .actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
/* D124 모바일 파도3: 낮은 화면(가로 휴대폰·키보드)에서는 대화상자 전체가 스크롤되고 버튼 줄만 아래에 붙는다 — 확인 버튼이 화면 밖으로 밀리지 않게 */
dialog { max-height: calc(100dvh - var(--space-6)); overflow: auto; }
@media (max-height: 480px) {
  dialog form { padding-bottom: 0; }
  dialog .actions { position: sticky; bottom: 0; margin: 0 calc(-1 * var(--space-5)); padding: var(--space-3) var(--space-5);
    background: var(--surface-1); border-top: 1px solid var(--line-1); }
}
.split { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.gap { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

/* ---- 로그인 ---- */
.auth { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--space-5); }   /* D123 M-9 iOS 주소창 */
.auth .card { width: min(420px, 100%); display: grid; gap: var(--space-5); padding: var(--space-8) var(--space-6);
  background: var(--surface-1); border: 1px solid var(--line-1); border-radius: var(--radius-surface);
  box-shadow: var(--shadow-raised); }
.auth .card h1 { font-size: var(--text-page); margin: var(--space-4) 0 var(--space-1); }   /* D179 §5-1 브랜드 블록 ↔ 제목 24 이상, 제목 22 */
/* D179 로그인 첫인상(C W2 ①): 브랜드색 원형 마크(icons.js chart 경로 — 새 로고 아님) → 브랜드(D53) → 32 → 제목 → 15 보조색 설명.
   입력·주 버튼 48. 폰(≤480)은 카드 테두리·그림자 없이 화면 전체. 개발용 빠른 로그인은 구분선 아래 작은 보조 버튼 */
.login-page .brand::before { content: ''; width: 48px; height: 48px; margin-bottom: var(--space-3); border-radius: 50%;
  background: var(--brand) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 4.5v15h15'/><path d='m7.5 14.5 3.5-4 3 2.5 4.5-5.5'/></svg>") center / 26px no-repeat; }
.login-page .card h1 { margin-top: var(--space-8); }
.login-page { --text-body-lg: 15px; }   /* 로그인 설명 15 — 보호자 화면 크기 단계와 같은 값(지역 단계, 보호자 앱과 같은 방식) */
.login-page #subtitle { font-size: var(--text-body-lg); color: var(--ink-3); }
.login-page .input { min-height: var(--control-lg); }
.login-page #demo { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.login-page #demo[hidden] { display: none; }
.login-page .demo-grid .btn { font-size: var(--text-label); font-weight: 500; }
.login-page #demo-buttons { grid-template-columns: 1fr; gap: var(--space-3); }
.login-page .login-demo-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.login-page .login-demo-label { padding: 0; margin-bottom: var(--space-1); color: var(--ink-2); font-size: var(--text-label); font-weight: 500; }
.login-page .login-demo-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); font-size: var(--text-label); }
.login-page .login-demo-options .btn { min-width: 0; min-height: max(44px, var(--control-lg)); white-space: normal; overflow-wrap: anywhere; }
.login-page .login-demo-empty { margin: 0; }
.login-page .login-providers { display: grid; gap: var(--space-2); min-width: 0; }
.login-page .login-provider { width: 100%; min-width: 0; min-height: 48px; justify-content: center; gap: 12px; white-space: normal; overflow-wrap: anywhere; }
.login-page .login-provider[hidden], .login-page #oauth-pending[hidden] { display: none; }
.login-page .login-google { background: #fff; color: #1f1f1f; border: 1px solid #747775; font-size: 14px; font-weight: 500; padding: 10px 12px; }
.login-page .login-google img { flex: 0 0 20px; }
.login-page .login-kakao { background: #fee500; color: #000; border: 0; border-radius: 12px; padding: 1px 0; }
.login-page .login-kakao img { display: block; width: 112px; max-width: 100%; height: auto; }
.login-page .login-privacy, .login-page #subtitle { color: var(--ink-2); }
.login-page #oauth-pending p { margin: 0 0 var(--space-2); }
.login-page #keep-row { min-height: 44px; align-items: center; }
.login-page button { min-width: 0; min-height: 44px; white-space: normal; overflow-wrap: anywhere; }
.login-page .input[aria-invalid="true"] { border-color: var(--danger); }
.login-page .card, .login-page .field, .login-page form, .login-page .input, .login-page .brand { min-width: 0; }
.login-page .brand-sub { flex-wrap: wrap; }
.login-page .brand-name { max-width: 100%; overflow-wrap: anywhere; }
.login-page form, .login-page .field, .login-page .brand { grid-template-columns: minmax(0, 1fr); }
.login-page .brand, .login-page .brand-name, .login-page .brand-sub { white-space: normal; }
@media (max-width: 359px) {
  .login-page .login-demo-options { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  body:has(> .login-page) { background: var(--surface-1); }
  .auth.login-page { place-items: start stretch; padding: var(--space-8) var(--space-4) var(--space-6); }
  .login-page .card { width: 100%; padding: var(--space-4) 0; border: 0; border-radius: 0; box-shadow: none; }
}
.auth form { display: grid; gap: var(--space-3); }
@media (max-width: 640px), (pointer: coarse) { .auth .input, .auth .btn, .auth .btn.small, .auth label.check { min-height: 44px; } }   /* 로그인·가입·측정 화면도 휴대폰·터치 44px */
.divider { display: flex; align-items: center; gap: var(--space-3); color: var(--ink-3); font-size: var(--text-label); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line-1); }
.demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9.5em, 100%), 1fr)); gap: var(--space-2); }
.demo-grid .btn { white-space: normal; min-width: 0; }                /* 개발용 빠른 로그인: 좁은 폭에서 카드 밖으로 넘치지 않게(한 열로) */

@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .main { padding: var(--space-3); }
  /* 좁은 화면: 첫 줄 브랜드·계정·로그아웃, 둘째 줄 화면 메뉴(로그아웃이 화면 밖으로 밀리지 않게, D34) */
  .topbar { min-height: 0; flex-wrap: wrap; gap: var(--space-2); row-gap: var(--space-2); padding: var(--space-3); }
  .brand-name { font-size: var(--brand-mobile); }                                          /* 모바일 23 / 병원명 14 — 자르거나 숨기지 않음 */
  .brand-hospital { font-size: var(--text-body-lg); }
  .topbar .who { margin-left: auto; }
  .staff-top { padding: var(--space-3) var(--space-4); gap: var(--space-2); }
  .staff-top #logout { margin-left: var(--space-1); }
  .staff-top .brand-name { font-size: var(--brand-mobile); }                              /* 모바일: 브랜드 줄에 계정이 함께 들어가게 */
  .staff-top .brand-hospital { font-size: var(--text-body-lg); }
  .who .name { display: none; }
  .panel.section > header h2 { font-size: var(--text-value); }
  .panel.section .list .row { padding-left: var(--space-5); }
  .stats { grid-template-columns: 1fr 1fr; }
  .entry { grid-template-columns: 1fr 1fr; }
  .entry .btn { grid-column: 1 / -1; }
  .table-wrap .table { min-width: 560px; }
  .table-wrap .table.stack-sm { min-width: 0; }
  .reply { grid-template-columns: 1fr; }
  .reply .gap { justify-content: flex-end; }
  .msg { max-width: 92%; }
}

/* ---- 의사 화면: 목록 → 아이 상세 ---- */
/* 주 작업 : 보조 ≈ 62 : 38(1.618 : 1, D36). 내용이 눌리면 한 열로 */
.home-grid { display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.home-grid > .stack { gap: var(--space-6); }
.home-grid .panel > header { padding: var(--space-4) var(--space-5); }
.home-grid .panel > header h2 { font-size: var(--text-section); font-weight: 600; color: var(--ink-1); }
/* 카테고리 제목 아이콘: 20px, 선 1.9(24 기준), 제목과 8px, 브랜드 녹색. 장식(aria-hidden) */
h2.with-icon, h3.with-icon { display: inline-flex; align-items: center; gap: var(--space-2); }
/* 아이 찾기 한 줄: 제목은 내용 폭, 입력은 남은 폭(44px). 구분선 없음. 결과 목록이 있으면 그 위에만 선 */
.search-card .search-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.search-card .search-row h2 { flex: none; white-space: nowrap; }
.search-card .search-row .input { flex: 1 1 auto; min-width: 0; height: 44px; min-height: 44px; }
.search-card .list:not(:empty) { border-top: 1px solid var(--line-1); }
.home-grid .search-card .search-row { padding: var(--space-3) var(--space-5); }
/* 의사 메인 세로 줄이기: 검색(한 줄) → 오늘 측정 | 가정 기록 두 열(1000px 이상) → 답변 대기. 행 위아래 여백 조금 줄임 */
.doctor-main { gap: var(--space-5); width: 100%; max-width: 1200px; margin-inline: auto; }    /* D179 §5-1 내용 폭 최대 1200 가운데 */
.main:has(.doctor-workspace) { max-width: 1840px; }
.doctor-workspace { display: grid; grid-template-columns: 34fr 66fr; gap: var(--space-5); align-items: stretch;
  width: min(100%, 1800px); margin-inline: auto; overflow-anchor: none;
  height: calc(100dvh - var(--doctor-workspace-top, 0px) - var(--space-5)); min-height: 0; }
.doctor-master, .doctor-detail { position: relative; min-width: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.doctor-master .doctor-main { max-width: none; }
.doctor-master-controls { position: sticky; top: 0; z-index: var(--z-raised); display: grid; gap: var(--space-2);
  padding-bottom: var(--space-2); background: var(--canvas); }
.doctor-detail > [data-state="empty"], .doctor-detail[data-state="empty"] { align-content: center; }
.doctor-workspace .chip { height: auto; min-height: 24px; max-width: 100%; white-space: normal; }
@media (min-width: 1280px) {
  .doctor-workspace { --text-caption: 13px; --text-label: 14px; --text-body: 15px; --text-body-lg: 15px;
    --text-title: 18px; --text-section: 18px; --text-page: 23px; font-size: 15px; }
}
.doctor-section-host { margin-top: var(--space-2); }
.doctor-section-nav { display: grid; gap: var(--space-1); }
@media (min-width: 1100px) and (max-height: 700px) {
  .doctor-section-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.doctor-section-button { min-height: 44px; width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid transparent;
  border-radius: var(--radius-control); background: transparent; color: var(--ink-2); text-align: left; font: inherit; font-weight: 600; cursor: pointer; }
.doctor-section-button:hover { background: var(--surface-2); }
.doctor-section-button[aria-current="true"] { border-color: var(--line-2); background: var(--accent-soft); color: var(--accent-strong); }
.doctor-section-content { min-width: 0; display: grid; gap: var(--space-4); }
.doctor-section-title { margin: 0; font-size: var(--text-section); color: var(--ink-1); }
/* The workspace section heading supplies the visible title; keep duplicate card
   headings available to assistive technology and preserve their controls. */
.doctor-detail .doctor-section-content[data-section="doctor-notes"] > .group > .doctor-notes { position: relative; }
.doctor-detail .doctor-section-content[data-section="doctor-notes"] > .group > .doctor-notes > header,
.doctor-detail .doctor-section-content[data-section="notes"] > .group > .panel:first-child > header > h2 {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.doctor-detail .doctor-section-content[data-section="notes"] > .group > .panel:first-child > header { justify-content: flex-end; }
@media (max-width: 480px) {
  .doctor-detail .sleep-facts { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .doctor-detail .sleep-facts dd { margin-bottom: var(--space-2); }
}
.doctor-mobile-section { display: none; }
.doctor-section-trigger { min-height: 44px; width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--line-2);
  border-radius: var(--radius-control); background: var(--surface-1); color: var(--ink-1); font: inherit; font-weight: 700; text-align: left; }
.doctor-picker-overlay { position: fixed; inset: 0; z-index: var(--z-overlay); display: grid; align-items: start; padding: max(72px, 12vh) var(--space-4) var(--space-4);
  background: rgba(16, 40, 36, .28); }
.doctor-picker-overlay[hidden] { display: none; }
.doctor-picker-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); width: min(100%, 520px);
  margin-inline: auto; padding: var(--space-3); border: 1px solid var(--line-1); border-radius: var(--radius-surface); background: var(--surface-1); box-shadow: var(--shadow-raised); }
.doctor-picker-option { min-height: 48px; min-width: 0; padding: var(--space-2); border: 1px solid var(--line-1); border-radius: var(--radius-control);
  background: var(--surface-1); color: var(--ink-2); font: inherit; font-weight: 600; overflow-wrap: anywhere; }
.doctor-picker-option[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
@media (min-width: 1100px) {
  .doctor-detail { align-content: start; --sticky-top: 0px; scroll-padding-top: calc(var(--child-head-h, 0px) + var(--space-2)); }
  .doctor-detail > .crumbs, .doctor-detail > div:first-child > .crumbs { display: none; }
  .doctor-detail > div:first-child:has(> .crumbs) { display: none; }
}
@media (max-width: 1099px) {
  .doctor-detail .doctor-section-content[data-section="growth"] .cards-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 6em), 1fr)); }
  .doctor-workspace { display: block; height: auto; min-height: 0; }
  .doctor-master, .doctor-detail { overflow: visible; }
  .doctor-workspace[data-view="list"] > .doctor-detail,
  .doctor-workspace[data-view="detail"] > .doctor-master { display: none; }
  .doctor-section-host { display: none; }
  .doctor-mobile-section { display: block; position: sticky; top: calc(var(--sticky-top) + var(--child-head-h, 0px) + var(--space-2));
    z-index: var(--z-raised); margin-bottom: var(--space-3); background: var(--canvas); }
  .doctor-detail { width: 100%; max-width: 100%; overflow-x: clip; }
  .doctor-detail > .crumbs, .doctor-detail > div:first-child > .crumbs { margin-bottom: var(--space-2); }
  .doctor-detail .child-bar-main { display: grid; gap: var(--space-1); width: 100%; }
  .doctor-detail .child-bar-main > .child-identity { min-width: 0; }
  .doctor-detail .child-bar-main > .facts { position: relative; min-width: 0; margin-top: 0; max-height: 1.6em; overflow: hidden; white-space: nowrap; }
  .doctor-section-content, .doctor-section-content > .group { min-width: 0; max-width: 100%; }
}
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.page-head .page-title { margin: 0; }
.doctor-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; }
@media (min-width: 1000px) { .doctor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Doctor child-linked documents: one ordinary fold after the growth/clinical group. */
.doctor-surveys { min-width: 0; border-top: 1px solid var(--line-1); padding-top: var(--space-3); }
.doctor-surveys button { min-height: var(--control-lg); }
.doctor-surveys .disclose-sum { white-space: normal; overflow-wrap: anywhere; }
.doctor-survey-body, .doctor-survey-detail { min-width: 0; }
.doctor-survey-body p { margin: 0; overflow-wrap: anywhere; }
.doctor-survey-detail h4 { margin: 0; font-size: var(--text-body); }
.doctor-survey-raw-text { margin: 0; font-family: var(--font); font-size: var(--text-body); line-height: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.doctor-survey-choice { width: 100%; justify-content: flex-start; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.doctor-survey-cell, .doctor-survey-interpretation { display: grid; gap: var(--space-1); padding: var(--space-2) 0; border-bottom: 1px solid var(--line-1); min-width: 0; }
.doctor-survey-cell-header, .doctor-survey-cell-value, .doctor-survey-literal, .doctor-survey-interpretation > div { white-space: pre-wrap; overflow-wrap: anywhere; }
.doctor-survey-cell-header { font-size: var(--text-label); color: var(--ink-2); }
.doctor-survey-warning { color: var(--warning-ink); }
.doctor-main .panel > header { padding: var(--space-4) var(--space-5); }
.doctor-main .panel > header h2 { font-size: var(--text-section); font-weight: 600; color: var(--ink-1); }
.doctor-main .search-card .search-row { padding: var(--space-3) var(--space-5); }
.doctor-main .row.prow { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.waiting-jump { color: var(--accent-ink); font-weight: 600; }
/* 다시 불러오기(TO_CLAUDE_B_DOCTOR_REFRESH_BUTTONS): 링크처럼 보이지 않는 버튼형 — 밝은 녹색 바탕·녹색 테두리·진한 녹색 글자,
   새로고침 아이콘 16px + 13px/600, 높이 38(모바일 44), 모서리 8, '불러오는 중…'에도 폭이 튀지 않게 최소 폭 */
.btn.refresh { min-width: 132px; gap: 6px; background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); font-weight: 600; }   /* D179 = tonal */
.btn.refresh:hover { background: var(--brand-wash); }
.btn.refresh[disabled] { opacity: .75; cursor: progress; }
.btn.refresh .cat-icon { width: 16px; height: 16px; color: currentColor; }
.panel.reloadable > header { align-items: flex-start; }
.card-title { display: grid; gap: 2px; min-width: 0; }
.card-title h2 .count { margin-left: var(--space-2); }
.card-error { margin: var(--space-3) var(--space-5) 0; }
.panel.reloadable > header { flex-wrap: wrap; row-gap: var(--space-2); }                 /* 좁으면 버튼이 제목 아래 줄로 */
.card-title { flex: 1 1 200px; }
.panel h2, .measure-line, .p-history { word-break: keep-all; }                       /* 한국어 단어 중간에서 끊지 않음 */
.cat-icon { width: 20px; height: 20px; flex: none; color: var(--accent); }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
/* D179 셰브런 아이콘(행 끝) · 로딩 막대 */
.cat-icon.chev { width: 18px; height: 18px; flex: none; color: var(--ink-3); }
.loading-block { display: grid; gap: var(--space-2); padding: var(--space-4); list-style: none; animation: sk-show 0ms 200ms both; }
.sk-bar { display: block; height: 12px; border-radius: var(--radius-sm); background: var(--surface-3); animation: sk-pulse 1.2s var(--ease) infinite alternate; }
.sk-bar.short { width: 60%; }
@keyframes sk-show { from { visibility: hidden; } to { visibility: visible; } }
@keyframes sk-pulse { from { opacity: 1; } to { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .sk-bar { animation: none; } }
.pair > * { min-width: 0; }
/* D94 직원 복귀 버튼: ← + 아이콘 + 글자, 테두리·바탕(글자만인 버튼보다 눈에 띄게), 44px */
.btn.back { min-height: 44px; max-width: 100%; white-space: normal; gap: 6px; border: 1px solid var(--line-2); color: var(--ink-1); font-weight: 500; }   /* D179 W4 = secondary 그대로(글자 ink-1·500, 아이콘만 강조색) · D94 44 */
.btn.back:hover { background: var(--accent-soft); }
.btn.back svg { width: 18px; height: 18px; flex: none; color: var(--accent-ink); }
/* D92·D93 접고 펼치기 */
.disclose-box { display: grid; gap: var(--space-2); }   /* 버튼(.btn.disclose)과 이름을 나눔 */
/* D104 접기 버튼: 아이콘 + 제목(건수) + '펼치기/접기' + 회전 화살표, 테두리·바탕·44px(D94 복귀 버튼과 같은 모양) */
/* D179 §3-2(정정 701386c — D104 유지): 앱 전체 한 모양 = 옅은 면(surface-2) + 얇은 선(line-1) + md 모서리 + 48px, 종류 아이콘은 28px 타일,
   보이는 '펼치기/접기' 글자와 회전 셰브런 그대로, 펼치면 accent-soft. 색 섞은 바탕·진한 테두리 없음 */
.btn.disclose { justify-content: flex-start; gap: var(--space-3); width: 100%; min-height: 48px; padding: var(--space-1) var(--space-3);
  border: 1px solid var(--line-1); background: var(--surface-2); color: var(--ink-1); font-weight: 600; white-space: normal; text-align: left; }
.btn.disclose:hover { background: var(--surface-3); border-color: var(--line-2); }
.btn.disclose[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent-soft); }
.btn.disclose > svg:first-child:not(.disclose-chev) { flex: none; width: 28px; height: 28px; padding: 5px; border-radius: var(--radius-sm);
  background: var(--surface-1); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--line-1); }
.disclose-badge { flex: none; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--danger); color: var(--ink-inverse);
  font-size: var(--text-micro); font-weight: 600; line-height: 20px; white-space: nowrap; }   /* D158 접힌 칸 새 소식 '새 n' */
.disclose-label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* D159 칸 종류별 색(7가지 — 아이콘 + 글자 이름과 함께, 색만으로 구분하지 않음). 접힘 = 옅은 면 + ▼, 펼침 = 칸 색 테두리·조금 진한 면 + ▲,
   펼친 내용 왼쪽 칸 색 띠. 글자는 본문 색(명암 4.5:1 이상), 칸 색은 아이콘·테두리·띠·'펼치기' 글자에만(모두 흰 바탕 위 4.5:1 이상) */
.disclose-box[data-kind] { --k: var(--kind-other); }
.disclose-box[data-kind="measure"] { --k: var(--kind-measure); } .disclose-box[data-kind="chart"] { --k: var(--kind-chart); }
.disclose-box[data-kind="meds"] { --k: var(--kind-meds); } .disclose-box[data-kind="sleep"] { --k: var(--kind-sleep); }
.disclose-box[data-kind="exercise"] { --k: var(--kind-exercise); } .disclose-box[data-kind="stats"] { --k: var(--kind-stats); }
.disclose-box[data-kind="bone"] { --k: var(--kind-other); }
.disclose-box[data-kind] > .btn.disclose > svg:first-child:not(.disclose-chev) { color: var(--k); }   /* D159 종류 색은 아이콘 타일·펼친 띠에만 */
.disclose-box[data-kind] > .disclose-body:not([hidden]) { border-left: 3px solid var(--k); padding-left: var(--space-3); }
.disclose-sum { flex: 0 1 auto; color: var(--ink-1); font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.predicted-bar { margin: 0; padding: 0 var(--space-1); color: var(--ink-2); }   /* D161 간호 아이 바 아래 예상키 한 줄 */
/* D179 간호 아이 머리 카드 하나(C W2 ②): 고정 바(D153 sticky — 카드로 감싸면 고정이 풀려 감싸지 않음) + 바로 아래 칸을 이어 붙인다.
   둘째 줄 = 예상키 · 치료 상태 칩 · 치료 재개/이력(quiet) · 생년월일(오른쪽) */
.child-bar:has(+ .child-sub) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.child-bar.stuck:has(+ .child-sub) { border-radius: var(--radius-surface); }
.child-bar + .child-sub { margin-top: calc(-1 * var(--space-4)); border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: none; }
.child-sub > .body { padding: var(--space-2) var(--space-4) var(--space-3); }
.child-sub .child-head { align-items: center; row-gap: var(--space-1); }
.child-sub-main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-width: 0; }
.child-sub-main > .predicted-bar { padding: 0; }
.child-sub-main > .ts-box { margin-top: 0; }
.child-detail-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-2); }
.disclose-all { display: flex; flex-wrap: wrap; gap: var(--space-1); }
@media (max-width: 260px) { .btn.disclose { flex-wrap: wrap; padding-top: 6px; padding-bottom: 6px; } }
/* D179 좁은 폭: 요약이 이름 칸을 눌러 '수/면'처럼 쪼개지 않게 요약은 이름 아래 둘째 줄(아이콘 타일 폭만큼 들여 이름과 맞춤) */
@media (max-width: 480px) {
  button.disclose:has(> .disclose-sum) { flex-wrap: wrap; row-gap: 2px; padding-top: var(--space-2); padding-bottom: var(--space-2); }
  button.disclose > .disclose-sum { order: 9; flex: 1 0 100%; text-align: left; font-weight: 500; color: var(--ink-2); }
  button.disclose > svg:first-child:not(.disclose-chev) ~ .disclose-sum { padding-left: calc(28px + var(--space-3)); }
}   /* 글자 200%·아주 좁은 폭: '펼치기'가 다음 줄로 */
.nurse-list .nurse-surveys { border-top: 1px solid var(--line-1); padding-top: var(--space-3); min-width: 0; }
.nurse-list .nurse-surveys > .disclose-body:not([hidden]) { border-left: 0; padding-left: 0; }
.nurse-list .nurse-surveys .disclose { flex-wrap: wrap; }
.nurse-list .nurse-surveys .disclose-sum { order: 9; flex: 1 1 100%; text-align: left; padding-left: calc(28px + var(--space-3)); }
.nurse-list .intake-entry > .body > [role="status"]:empty { display: none; }
.nurse-list .nurse-intake-entry > header:has(.intake-entry-trigger) { padding: 0; }
.nurse-list .nurse-intake-entry > header > h2 { width: 100%; }
.nurse-list .nurse-intake-entry .intake-entry-trigger { width: 100%; min-height: 44px; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: 0; text-align: left; font: inherit; color: inherit; }
.nurse-list .nurse-intake-entry .intake-entry-indicator { margin-left: auto; transform: rotate(90deg); }
.nurse-list .nurse-intake-entry .intake-entry-trigger[aria-expanded="true"] .intake-entry-indicator { transform: rotate(-90deg); }
.nurse-list .nurse-intake-entry:not(.intake-entry-open) > .body > .nurse-surveys { border-top: 0; padding-top: 0; }
.nurse-followup-panel > .body > .follow-note { margin: 0; padding: var(--space-3) var(--space-4); }
/* Automatic raw observations remain subordinate to the existing survey disclosure. */
.survey-inbox .collection-title { font-size: var(--text-body); margin: 0; }
.intake-collection { min-width: 0; padding-bottom: var(--space-3); border-bottom: 1px solid var(--line-1); }
.intake-collection p { margin: 0; overflow-wrap: anywhere; }
.intake-collection .collection-observation { min-height: var(--control-lg); justify-content: flex-start; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.collection-raw-detail { border-top: 1px solid var(--line-1); padding-top: var(--space-3); min-width: 0; }
.collection-raw-detail h4 { font-size: var(--text-body); margin: 0; }
.collection-cell { display: grid; gap: var(--space-1); border-bottom: 1px solid var(--line-1); padding: var(--space-2) 0; min-width: 0; }
.collection-header, .collection-value { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.collection-header { font-size: var(--text-label); color: var(--ink-2); }
.nurse-list .survey-inbox-embedded { min-width: 0; }
.nurse-list .survey-inbox-row { white-space: normal; overflow-wrap: anywhere; text-align: left; }
.disclose-state { flex: none; font-size: var(--text-label); font-weight: 500; color: var(--accent-ink); }
/* D122 펼침/접힘 화살표 한 규칙(사용자 확정): 접힘 = ▼(아래로 열림) · 펼침 = ▲(접기) — 모든 펼침 버튼이 aria-expanded를 따라 */
svg.disclose-chev { flex: none; width: 16px; height: 16px; transform: rotate(90deg); transition: transform var(--motion-fast) var(--ease); }
[aria-expanded="true"] > svg.disclose-chev { transform: rotate(-90deg); }
.expand-toggle { gap: var(--space-1); }
.expand-toggle > svg.disclose-chev { width: 14px; height: 14px; }
/* D106 추가 버튼: + 아이콘 + 글자, 강조색 테두리·옅은 바탕, 44px */
.btn.add { gap: 6px; background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); font-weight: 600; }   /* D179 = tonal */
.btn.add:hover { background: var(--brand-wash); }
.btn.add svg { width: 18px; height: 18px; flex: none; }
.btn.quiet.small svg { width: 16px; height: 16px; flex: none; }
.ex-summary { margin: 0; }
/* 현재 위치(D38): '← 의사 메인 › 환자 차트' */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: 0 0 var(--space-2) calc(-1 * var(--space-3));
  font-size: var(--text-body); color: var(--ink-3); }
.crumbs .crumb-sep { color: var(--ink-3); }
.crumbs [aria-current="page"] { color: var(--ink-2); font-weight: 600; }
.page-title { font-size: var(--text-section); margin: 0 0 var(--space-1); }
.end { text-align: right; }
.row.static { cursor: default; flex-wrap: wrap; }
.row.static:hover { background: transparent; }
/* 골연령 판독 줄: 윗줄 정보·결과, 아랫줄 표시·버튼(좁은 옆 칸에서 제목이 세로로 깨지지 않게) */
.row.reading { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-2); }
.row.reading > .gap { grid-column: 1 / -1; justify-content: flex-end; }
.row.reading > .gap:empty { display: none; }
/* 요약 카드: 줄마다 남는 칸 없이 채운다(D36 — 한 장만 외따로 남지 않게). 넓은 화면 한 줄 4장, 좁은 화면 2열 */
.cards { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.cards > .card { flex: 1 1 180px; }
.card { min-width: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-surface); background: var(--surface-1);
  border: 1px solid var(--line-1); box-shadow: var(--shadow-raised); }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 26px; }
.card .label { font-size: var(--text-label); color: var(--ink-3); }
.card .value { font-size: var(--text-title); font-weight: 600; color: var(--ink-1); margin-top: 2px;
  font-family: var(--font); font-variant-numeric: tabular-nums; }
.card .sub { font-size: var(--text-caption); color: var(--ink-3); margin-top: 2px; }
.card.warning { border-color: var(--warning-line); background: var(--warning-soft); }
.card.danger { border-color: var(--danger-line); background: var(--danger-soft); }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(320px, 1fr); gap: var(--space-5); align-items: start; }
.detail-grid > * { min-width: 0; }
/* D179 §5-1 의사 차트 넓은 화면: 오른쪽 칸(특이 사항)이 스크롤을 따라온다 — 고정 아이 바 아래 */
@media (min-width: 1101px) { .detail-grid > :last-child { position: sticky; top: calc(var(--sticky-top, 0px) + var(--child-head-h, 0px) + var(--space-3)); } }
.start-line { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-3);
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--line-1); }
.checks { display: grid; gap: 0; margin-bottom: var(--space-3); }   /* D179 선택 묶음 — 줄 사이 간격 없이 얇은 선 */
/* D179 §3-6 선택 묶음: 한 묶음(얇은 선·lg 모서리) 안에 줄 44(폰 48) + 얇은 구분선. 줄마다 따로 상자 없음 */
.check { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: 0 var(--space-4);
  border: 1px solid var(--line-1); border-top-width: 0; border-radius: 0; background: var(--surface-1); cursor: pointer; }
.check:first-of-type { border-top-width: 1px; border-top-left-radius: var(--radius-surface); border-top-right-radius: var(--radius-surface); }
.check:last-of-type { border-bottom-left-radius: var(--radius-surface); border-bottom-right-radius: var(--radius-surface); }
.check input { width: 20px; height: 20px; flex: none; accent-color: var(--accent); }
.check:has(input:checked) { background: var(--accent-soft); color: var(--accent-ink); font-weight: 500; }
@media (max-width: 900px), (pointer: coarse) { .check { min-height: 48px; } }
.check:has(input:disabled) { cursor: default; }
.panel .body > .gap { margin-bottom: var(--space-3); }
/* 치료 상태(아이 이름 아래 작은 표시) */
.ts-box { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.child-head .ts-box:first-child { margin-top: 0; }                   /* D167 후속(C P3): 아이 머리 아래 칸 맨 위 빈 공간 없이 */
.ts-history { flex-basis: 100%; list-style: none; margin: 0; padding: var(--space-2) var(--space-3); display: grid; gap: var(--space-2);
  border: 1px solid var(--line-1); border-radius: var(--radius-control); background: var(--surface-2); }
.ts-history li { display: grid; gap: 2px; }
.ts-history li .what { color: var(--ink-1); font-weight: 500; }
.ts-history li .memo { white-space: pre-wrap; overflow-wrap: anywhere; }
.ts-history li.cancelled .what { text-decoration: line-through; color: var(--ink-3); }
.ts-history li .btn { justify-self: start; }
.note-body { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-1); margin-bottom: var(--space-2); }
/* 골연령 상시 입력 폼(D33) */
.panel > .body.form-strip { border-bottom: 1px solid var(--line-1); background: var(--surface-2); }
.bone-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.bone-form .field { min-width: 0; gap: 6px; }
.bone-form .field > span { font-size: var(--text-body-lg); font-weight: 600; color: var(--ink-1); line-height: 1.3; }
.bone-form input[type=date] { width: 160px; max-width: 100%; min-width: 0; }
.bone-form .field { max-width: 100%; }                               /* 글자 200%·아주 좁은 폭: 촬영일 칸도 칸 폭 안으로 */
@media (max-width: 260px) { .bone-form .field { flex: 1 1 100%; } .bone-form input[type=date] { width: 100%; } }
/* 같은 입력 행의 입력·저장 높이 44px, 모서리 8px, 글자 15px. 단위는 입력 옆 세로 가운데 */
.bone-form .input, .bone-form .btn { height: 44px; min-height: 44px; border-radius: var(--radius-control); font-size: var(--text-control-lg); }
.bone-form .btn { padding: 0 var(--space-4); }
.bone-age { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.bone-age .unit { font-size: var(--text-control-lg); color: var(--ink-2); margin-right: 4px; }
@media (max-width: 640px) { .bone-form .btn { flex-basis: 100%; } }            /* 좁으면 촬영일 → 골연령 → 저장(한 줄 너비) */
.input.short { width: 56px; text-align: center; padding: 0 var(--space-1); }
.bone-form .form-error { flex-basis: 100%; margin: 0; color: var(--danger); font-size: var(--text-label); }
/* Server-provided month reference, inside the existing reading panel; no control sizing. */
.panel > .body.xray-months { padding: var(--space-2) var(--space-4); min-width: 0; font-size: var(--text-body); }
.xray-month-pairs { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); margin: 0; }
.xray-month-pair { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-width: 0; max-width: 100%; }
.xray-month-pair dt, .xray-month-pair dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.xray-month-pair dt { font-weight: 400; color: var(--ink-2); }
.xray-month-pair dd { font-weight: 500; color: var(--ink-1); }
.xray-month-caption { margin: var(--space-1) 0 0; font-size: var(--text-caption); font-weight: 400; color: var(--ink-2); }
.xray-legacy-label { display: block; margin-bottom: var(--space-1); font-weight: 400; color: var(--ink-2); }
/* 엑스레이 예정 전달·예정 달의 병원 측정 행(D32) — 테마와 무관한 의미 색(Codex 선정: 주황) */
.table tr.xray-prev td, .table tr.xray-due td { background: var(--warning-wash); color: var(--warning); }
.table tr.xray-prev td:first-child, .table tr.xray-due td:first-child { box-shadow: inset 3px 0 0 var(--warning-mark); }
.row-mark { display: block; font-family: var(--font); font-size: var(--text-caption); font-weight: 500; color: var(--warning);
  white-space: normal; min-width: 7em; }
/* 좁은 표에서 날짜·나이가 글자 단위로 쪼개지지 않게(Codex UI-BATCH-01): 날짜는 한 줄, 안내는 날짜 아래 따로 줄바꿈 */
.table td.nowrap-first { white-space: nowrap; }
.table td.nowrap-first .row-mark { white-space: normal; }
.xray-note { margin: 0; padding: var(--space-2) var(--space-3); font-size: var(--text-label); color: var(--warning); background: var(--warning-wash); }
/* 예상키 카드 안의 엑스레이 안내(D37): 다음 달·이번 달 = 주황, 지남 = 적색 글자, 그 뒤 = 보조 글자 */
.xray-inline { margin-top: var(--space-2); padding: 4px var(--space-2); border-radius: var(--radius-control); font-size: var(--text-label);
  font-weight: 500; }
.xray-inline.next, .xray-inline.this { background: var(--warning-wash); color: var(--warning); box-shadow: inset 3px 0 0 var(--warning-mark); }
.xray-inline.overdue { background: var(--danger-soft); color: var(--danger); }
.xray-inline .xray-sub { display: block; font-weight: 400; color: var(--ink-2); }
.xray-inline.later { padding: 0; font-weight: 400; color: var(--ink-3); }
.more-box { padding: var(--space-2) var(--space-4); border-top: 1px solid var(--line-1); text-align: center; }
/* 보호자 가정 측정 입력(/measure, D40) — 휴대폰에서 한 손으로 */
.measure-card .measure-child { font-size: var(--text-title); color: var(--ink-1); }
.measure-card .input { min-height: 48px; font-size: var(--text-input); }             /* 16px: 휴대폰 확대 방지 */
.measure-card .btn.lg { min-height: 48px; }
body.measure-app #measure-back { margin-top: var(--space-4); }
.choose-child { justify-content: flex-start; width: 100%; }
.auth.measure-page { place-items: start center; padding-top: var(--space-6); }
/* 측정 날짜 + 시각 두 칸: 넓으면 나란히, 좁으면 위아래(글자 200%·좁은 폭 넘침 없음) */
.measure-when .when-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.measure-when .when-row .input { flex: 1 1 8.5em; min-width: 0; max-width: 100%; }
@media (max-width: 260px) {                                             /* 날짜 칸 최소 폭(약 140px)이 카드 안에 들도록 좌우 여백만 줄임 */
  .auth.measure-page { padding-left: var(--space-2); padding-right: var(--space-2); }
  .auth.measure-page .measure-card { padding-left: var(--space-3); padding-right: var(--space-3); }
}
.child-entry { border: 1px solid var(--line-1); border-radius: var(--radius-control); padding: var(--space-3); display: grid; gap: var(--space-3); margin: 0; }
.child-entry legend { padding: 0 var(--space-1); font-weight: 600; color: var(--ink-1); }
/* 가입 절차 그래픽(D73·D74): 같은 크기 원(32px) + 선 아이콘(20px) + 얇은 연결선, 라벨 13px, 세 항목 균등 폭.
   지금 = 진한 녹색 채움, 끝남 = 옅은 녹색 + ✓, 간호 확인 대기 = 녹색 테두리, 예정 = 중립 회색 */
.join-flow { --flow-ink: #294F46; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.join-flow li { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; font-size: var(--text-body); color: var(--ink-3); line-height: 1.3; word-break: keep-all; }
.join-flow li + li::before { content: ''; position: absolute; top: 16px; right: 50%; width: calc(100% - 40px); margin-right: 20px; height: 1px; background: var(--line-1); }
.join-flow .flow-dot { position: relative; z-index: var(--z-base); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--line-1); background: var(--surface-1); color: var(--ink-3); font-weight: 600; }
.join-flow .flow-dot .cat-icon { width: 18px; height: 18px; color: inherit; }   /* 지금 단계(진한 원)에서는 흰 선 */
.join-flow .flow-now { color: var(--ink-1); font-weight: 600; }
.join-flow .flow-now .flow-dot { background: var(--flow-ink); border-color: var(--flow-ink); color: var(--ink-inverse); }
.join-flow .flow-done { color: var(--ink-2); }
.join-flow .flow-done .flow-dot { background: var(--flow-done); border-color: var(--flow-done); color: var(--flow-ink); }
.join-flow .flow-wait { color: var(--ink-1); font-weight: 600; }
.join-flow .flow-wait .flow-dot { border-color: var(--flow-ink); color: var(--flow-ink); }
/* D75 모바일은 세로(이전 가로 3등분 대체): 원 + 라벨을 한 줄씩, 연결선은 원 아래로 */
@media (max-width: 480px) {
  .join-flow { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .join-flow li { grid-template-columns: 32px minmax(0, 1fr); justify-items: start; align-items: center; column-gap: var(--space-3); text-align: left; font-size: var(--text-body-lg); }
  .join-flow li + li::before { top: calc(-1 * var(--space-3)); left: 16px; right: auto; width: 1px; height: var(--space-3); margin: 0; }
}
.join-nav { display: flex; gap: var(--space-2); align-items: center; }
.join-nav .btn.primary { flex: 1; }
.join-account { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.join-status-head { display: flex; justify-content: flex-end; }
.join-status-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.join-kid { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3);
  border: 1px solid var(--line-1); border-radius: var(--radius-control); }
/* 아이 연결 신청 단일 선택 ✓(성별·관계): 바로 펼친 선택 칸, 고르면 ✓·테두리·배경. 44px, 좁으면 줄바꿈(가로 스크롤 없음) */
.choice-group { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--space-1); }
.child-entry .choice-group legend { padding: 0; margin-bottom: var(--space-1); font-size: var(--text-label); font-weight: 500; color: var(--ink-2); }   /* 다른 입력칸 이름과 같게 */
.choices { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.choice { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--space-4) 0 var(--space-3);
  border: 1px solid var(--line-2, var(--line-1)); border-radius: var(--radius-control); background: var(--surface-1); cursor: pointer; font-weight: 500; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.choice-mark { width: 1.1em; text-align: center; color: transparent; font-weight: 600; }
.choice:has(input:checked) { border-color: var(--brand); background: var(--accent-soft); color: var(--ink-1); font-weight: 600; }
.choice:has(input:checked) .choice-mark { color: var(--brand); }
.choice:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 2px; }
.choice-error { margin: 0; font-size: var(--text-body); color: var(--danger); }
.child-entry .remove-child { justify-self: end; margin-top: calc(-1 * var(--space-2)); }
a.btn { text-decoration: none; }
.form-error { margin: 0; color: var(--danger); font-size: var(--text-body); }
/* 특이 사항 항목(D30) */
.note-items { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; }
/* 특이 사항: 카드 안 상자 대신 구분선. 고정은 왼쪽 3px 선 + '위에 고정' 작은 글자, 해결은 흐린 글자 + '해결됨' */
.note-item { display: grid; gap: var(--space-1); padding: var(--space-3) 0 var(--space-3) var(--space-3); border-bottom: 1px solid var(--line-1);
  border-left: 3px solid transparent; min-width: 0; }
.note-item:last-child { border-bottom: 0; }
.note-item .note-body { font-size: var(--text-control-lg); line-height: 1.6; }
.note-tag { justify-self: start; font-size: var(--text-label); font-weight: 500; color: var(--accent-ink); }
.note-item.resolved .note-tag { color: var(--ink-3); }
.note-actions { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin-top: var(--space-1); }
.note-actions .btn { min-height: 36px; padding: 0 var(--space-3); color: var(--ink-2); }
.note-count { font-size: var(--text-body-lg); font-weight: 600; color: var(--ink-3); }
@media (max-width: 640px), (pointer: coarse) { .note-actions .btn { min-height: 44px; } }
.note-item.pinned { border-left-color: var(--brand); }
.note-item.resolved .note-body { color: var(--ink-3); }
.note-item .note-body { margin: 0; }
.note-item-history { list-style: none; margin: 0; padding: var(--space-2) 0 0; border-top: 1px dashed var(--line-2); display: grid; gap: var(--space-2); }
.note-item-history .note-body { margin: 2px 0 0; }
.note-history { display: grid; gap: var(--space-2); margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--line-1); }
.table.compact td, .table.compact th { padding: 6px var(--space-2); }
.nowrap { white-space: nowrap; }
@media (max-width: 480px) { .sub-sep { display: none; } .sub-pct { display: block; } }   /* D179 좁은 카드: '병원 날짜' / '백분위 n%' 두 줄(구분점 줄머리 없음) */
.table th.mark { text-align: center; }
.table td.mark { text-align: center; color: var(--accent-ink); font-weight: 600; }
.table tr.carried td { color: var(--ink-3); }
.table tr[aria-current="true"] td { background: var(--accent-soft); }
.btn.link, button.link { border: 0; background: none; padding: 0; color: var(--accent-ink); text-decoration: underline;
  text-underline-offset: 2px; cursor: pointer; font: inherit; }
.month-field { max-width: 200px; margin-bottom: var(--space-3); }
/* 월별 약제 입력(TO_CLAUDE_B_MONTHLY_MEDS_SPACING): 기록 월 → 16 → 체크(항목 사이 8) → 12 → 안내 → 16 → 저장. 이 폼에만 적용 */
.meds-form { display: grid; justify-items: start; }
.meds-form .month-field { gap: 6px; margin: 0 0 var(--space-4); }
.meds-form .month-field > span { font-size: var(--text-body-lg); font-weight: 600; color: var(--ink-1); }
.meds-form .checks { display: grid; gap: var(--space-2); width: 100%; margin: 0; }
.meds-form .meds-status { margin: var(--space-3) 0 0; font-size: var(--text-body); line-height: 1.55; color: var(--ink-2); }
.meds-form .meds-actions { margin-top: var(--space-4); }
.meds-form .meds-save { min-height: 40px; padding: 0 var(--space-4); font-size: var(--text-body-lg); font-weight: 600; }
@media (max-width: 640px) { .meds-form .meds-save { min-height: 44px; } }
.table tr.carried td.mark { color: var(--ink-3); font-weight: 400; }

/* ---- 성장도표 ---- */
.chart { margin: 0; display: grid; gap: var(--space-3); }
.chart-wrap { width: 100%; position: relative; }
/* D136 출처: 그래프 영역 안 오른쪽 아래, 10px 한 줄(명암 4.5:1 이상 — --ink-3은 도표 배경 위 약 4.9:1). 점을 가리지 않게 누름 통과.
   원문이 넘치면 줄인 표기(chart.js가 실측해 is-short), 원문은 aria-label */
.chart-source { position: absolute; margin: 0; padding: 0 4px 3px; font-size: var(--text-chart-xs); line-height: 1.3; font-weight: 400;
  color: var(--ink-3); text-align: right; white-space: nowrap; overflow: hidden; pointer-events: none; }
.chart-source .short, .chart-source.is-short .full { display: none; }
.chart-source.is-short .short { display: inline; }
.growth-chart { display: block; width: 100%; height: auto; }
.growth-chart .grid line { stroke: var(--line-1); stroke-width: 1; }
.growth-chart .grid line.major { stroke: var(--line-2); }
.growth-chart .grid line.minor { stroke: var(--line-1); stroke-dasharray: 2 3; }
.growth-chart .axis { font-size: var(--text-micro); fill: var(--ink-3); }
.growth-chart .curve { fill: none; stroke: var(--line-3); stroke-width: 1; }
.growth-chart .curve.mid { stroke: var(--ink-3); stroke-width: 1.4; }
.growth-chart .curve-label { font-size: var(--text-chart-xs); fill: var(--ink-3); }
.growth-chart .pt { fill: var(--accent); stroke: var(--surface-1); stroke-width: 1.2; }
.growth-chart .pt-hit { fill: transparent; cursor: pointer; }
/* D56 BMI 상태 점 색(서버가 같은 기록에 준 상태만) — 저체중 청회색·정상 녹색·과체중 황색·비만 코랄. 색만이 아니라 범례·상세에 상태명 */
.growth-chart .pt.bmi-underweight { fill: var(--bmi-under); } .growth-chart .pt.bmi-normal { fill: var(--bmi-normal); }
.growth-chart .pt.bmi-overweight { fill: var(--bmi-over); } .growth-chart .pt.bmi-obese { fill: var(--bmi-obese); }
.lg.pt.bmi-underweight { background: var(--bmi-under); } .lg.pt.bmi-normal { background: var(--bmi-normal); }
.lg.pt.bmi-overweight { background: var(--bmi-over); } .lg.pt.bmi-obese { background: var(--bmi-obese); }
.growth-chart .pt.bmi-none { fill: var(--bmi-none); } .lg.pt.bmi-none { background: var(--bmi-none); }
.bmi-legend strong { color: var(--ink-2); font-weight: 600; }
.growth-chart .pt.selected { stroke: var(--ink-1); stroke-width: 2.4; r: 6; }
.growth-chart .pt.home { fill: var(--surface-1); stroke: var(--chart-muted); stroke-width: 1.5; }
.growth-chart .pt-label { font-size: var(--text-micro); font-weight: 600; fill: var(--accent-ink); }
/* D87 골연령 짝: 실제 나이·골연령 두 점 같은 모양(속 빈 고리) + 잇는 실선, 최근 판독에 '골연령' 글자 */
.growth-chart .ba-pair-link { stroke: var(--info); stroke-width: 1.6; }
.growth-chart .ba-pair { fill: none; stroke: var(--info); stroke-width: 2; }
.growth-chart .ba-label { font-size: var(--text-micro); font-weight: 600; fill: var(--info); }
.growth-chart .path.hidden-pred { stroke-dasharray: 2 4; opacity: .7; }
.growth-chart .path { fill: none; stroke-width: 1.8; stroke-dasharray: 6 4; }
.growth-chart .path.initial { stroke: var(--chart-muted); }
.growth-chart .path.latest { stroke: var(--accent); }
.growth-chart .path.other { stroke: var(--line-3); stroke-width: 1.2; }
.growth-chart .pred.initial { fill: var(--surface-1); stroke: var(--chart-muted); stroke-width: 2; }
.growth-chart .pred.latest { fill: var(--accent); stroke: var(--surface-1); stroke-width: 1.2; }
.growth-chart .pred.other { fill: var(--surface-1); stroke: var(--line-3); stroke-width: 1.5; }
.growth-chart .pred-label { font-size: var(--text-label); font-weight: 500; }
.growth-chart .pred-label.initial { fill: var(--chart-label); }
.growth-chart .pred-label.latest { fill: var(--accent-ink); }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--text-label); color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
/* 범례 표식은 i 요소로 한정 — 버튼 크기 .btn.lg와 이름이 겹치지 않게 */
i.lg { display: inline-block; flex: none; }
i.lg.pt { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
i.lg.home { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--chart-muted); background: var(--surface-1); }
i.lg.ba-pair { width: 22px; height: 9px; background: linear-gradient(var(--info), var(--info)) center / 100% 2px no-repeat; position: relative; }
i.lg.ba-pair::before, i.lg.ba-pair::after { content: ''; position: absolute; top: 0; width: 9px; height: 9px; box-sizing: border-box; border: 2px solid var(--info); border-radius: 50%; background: var(--surface-1); }
i.lg.ba-pair::before { left: 0; } i.lg.ba-pair::after { right: 0; }
i.lg.path { width: 20px; border-top: 2px dashed var(--accent); }
i.lg.init { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--chart-muted); background: var(--surface-1); }
i.lg.latest { width: 9px; height: 9px; background: var(--accent); transform: rotate(45deg); }
i.lg.curve { width: 20px; border-top: 1px solid var(--line-3); }

@media (max-width: 1100px) {
  .detail-grid, .home-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .pair { grid-template-columns: minmax(0, 1fr); }
  .cards > .card { flex-basis: 140px; }
  .card .value { font-size: var(--text-body-lg); }
  /* 모든 도표는 화면 폭에 맞춰 그린다(직원 도표도 chartWidth) — 최소 폭·상자 안 가로 밀기 없음(모바일 세로 우선) */
  .table-wrap .table.compact { min-width: 0; }
}

/* 터치 화면: 주요 조작 44px 이상(제품 목표 — WCAG AA 최소 24px보다 여유, UI/UX 기준 2장) */
@media (pointer: coarse) {
  .btn, .btn.small, .btn.lg { min-height: 44px; }
  .staff-top #logout { min-height: 44px; }
  .btn.quiet.small { padding: 0 var(--space-3); }
  .input, select.input { min-height: 44px; }
  .check { min-height: 44px; }
  .row { min-height: 52px; }
  button.link { min-height: 44px; }
}

/* ---- 보호자 앱(/guardian): 아래 고정 메뉴 성장·생활·메시지·일정 ---- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.guardian-main { max-width: 720px; padding-bottom: calc(var(--tabbar-h, 61px) + var(--space-8)); }   /* 탭바 실제 높이(guardian.js) + 여백 */
/* D132 보호자 화면 톤(고급·전문·완벽 — GUARDIAN_PREMIUM_LIFE_HANDOFF.md §1): body.guardian-app 범위 토큰 묶음만(직원 화면 영향 0 — 계산 스타일
   탐침으로 확인). D151(사용자 결정 2026-10-02, 시안 B): 따뜻한 미색 바탕 #f8f6f1 — 아이 테마색(D31 여아 핑크·남아 하늘)은 '오늘 할 일' 면·
   버튼·강조에만. 상자 안 머리줄 + 선 대신 카드 밖 구역 제목(16/600, 아이콘 16 옅게), 카드는 흰 면 + 그림자(테두리 없음, 둥글기 18),
   카드 안 2차 행동은 글자 버튼(강조색 + ›), 숫자가 주인공(키·몸무게 30, 수면 시각 26 — 라벨 작고 옅게), 머리 여백 넓게, 알림 배지 9+
   (guardian.js), 움직임 180ms ease-out(움직임 줄이기 설정이면 0) */
body.guardian-app {
  --canvas: #f8f6f1;                                   /* 아이 테마 바탕([data-child-theme])보다 우선 — 선택자 무게 */
  --line-1: #e7edeb;
  --radius-surface: 16px;                              /* D179 카드 16 하나 */
  --shadow-1: 0 1px 2px rgba(20, 38, 35, .04), 0 8px 24px rgba(20, 38, 35, .06);
  --shadow-2: 0 2px 4px rgba(20, 38, 35, .05), 0 12px 28px rgba(20, 38, 35, .08);
  --shadow-raised: var(--shadow-1);
  /* D179 §2-2 보호자 폰: 캡션·라벨 13 · 본문·행 제목 15 · 큰 수치 24 · 대표 수치 32 */
  --text-caption: 13px; --text-label: 13px; --text-body: 15px; --text-body-lg: 15px;
  --text-metric: 32px;                                 /* 보호자 대표 수치(최근 키·몸무게·예상키) */
  --motion: 180ms; --ease-out: cubic-bezier(.16, 1, .3, 1);
}
@media (prefers-reduced-motion: reduce) { body.guardian-app { --motion: 0ms; } }
body.guardian-app .guardian-main > .stack { gap: var(--space-6); }
body.guardian-app .topbar { padding-top: var(--space-4); padding-bottom: var(--space-4); }
/* 구역 제목은 카드 밖, 카드는 흰 면만 */
body.guardian-app .panel { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
body.guardian-app .panel > header { padding: 0 var(--space-1) var(--space-2); border-bottom: 0; }
body.guardian-app .panel > header h2 { font-size: var(--text-title); font-weight: 600; color: var(--ink-1); letter-spacing: -0.01em; }
body.guardian-app .panel > header h2 svg { width: 16px; height: 16px; opacity: .55; }
body.guardian-app .panel > .body, body.guardian-app .card, body.guardian-app .thread {
  background: var(--surface-1); border: 0; border-radius: var(--radius-surface); box-shadow: var(--shadow-1); }
body.guardian-app .panel > .body.flush { overflow: hidden; }
body.guardian-app .panel .card { background: var(--surface-2); box-shadow: none; }   /* 카드 안 카드(예상키)는 옅은 면 */
body.guardian-app .nudge-card > .body { background: color-mix(in srgb, var(--accent) 7%, var(--surface-1)); }   /* 오늘 할 일 = 첫 카드만 */
/* 카드 안 20px은 420px 이상에서 — 폰 세로(320~414)는 16px 그대로(기록 줄의 날짜·병원 배지·값·백분위가 한 줄에 들어가게 — 어긋남 0 우선) */
@media (min-width: 420px) {
  body.guardian-app .panel > .body { padding: var(--space-5); }
  body.guardian-app .panel > .body.flush { padding: 0; }
  body.guardian-app .card { padding: var(--space-4) var(--space-5); }
}
/* 카드 안 2차 행동 = 글자 버튼(강조색 + ›) — 채움 버튼은 화면의 대표 행동 하나, 위험·조용한 버튼·펼침은 제외 */
body.guardian-app .panel .btn.block:not(.primary):not(.quiet):not(.danger), body.guardian-app .reply .btn:not(.primary) {
  border-color: transparent; background: transparent; box-shadow: none; color: var(--accent-ink); font-weight: 600; }
/* D179 글자 기호 대신 같은 모양 셰브런(icons.js chevron 경로) — 마스크라 색은 글자색 그대로 */
body.guardian-app .panel .btn.block:not(.primary):not(.quiet):not(.danger)::after { content: ''; flex: none; width: 16px; height: 16px; margin-left: var(--space-1);
  background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M9 5.5l6.5 6.5L9 18.5'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M9 5.5l6.5 6.5L9 18.5'/></svg>") center / contain no-repeat; }
body.guardian-app .panel .btn.block:not(.primary):not(.quiet):not(.danger):hover, body.guardian-app .reply .btn:not(.primary):hover { background: var(--accent-soft); }
body.guardian-app .panel > header .btn.quiet { color: var(--accent-ink); }
body.guardian-app .btn.disclose:not([aria-expanded="true"]) { background: var(--surface-2); }   /* D179 W4 테두리는 공용(line-1) — 접힘 머리 한 벌 */
/* 숫자가 주인공 — 값 크게, 라벨·단위 작고 옅게 */
body.guardian-app .card .value { font-size: var(--text-metric); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
body.guardian-app .card .value .unit { font-size: var(--text-body-lg); font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
body.guardian-app .card .label { font-size: var(--text-body); font-weight: 500; color: var(--ink-3); }
body.guardian-app .sleep-facts dt { font-size: var(--text-caption); font-weight: 500; }
body.guardian-app .sleep-facts dd { font-size: var(--text-page); letter-spacing: -0.02em; line-height: 1.2; }
body.guardian-app .nudge-line { font-size: var(--text-title); }
body.guardian-app .week-dot .dot { font-size: var(--text-display); }
body.guardian-app .btn { transition: background var(--motion) var(--ease-out), border-color var(--motion) var(--ease-out),
  color var(--motion) var(--ease-out), box-shadow var(--motion) var(--ease-out); }
body.guardian-app .btn.primary { box-shadow: var(--shadow-1); }
body.guardian-app .btn.primary:hover { box-shadow: var(--shadow-2); }
.guardian-top .who { margin-left: auto; }
/* D118 보호자 설정: 계정 칸(로그아웃·탈퇴 신청) — 버튼 44px, 탈퇴는 위험 색 테두리(글자 병기), 안내 목록 */
.account-panel .body > .btn { justify-self: start; min-height: 44px; max-width: 100%; white-space: normal; }
.withdraw-form { padding: var(--space-3); border: 1px solid var(--danger-line); border-radius: var(--radius-surface); background: var(--surface-2); }
.withdraw-facts { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-1); color: var(--ink-2); }
.withdraw-form .btn, .withdraw-form .check { min-height: 44px; }
.notif-to-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0; }
.notif-to-settings .btn { min-height: 44px; }
/* D118-1 아이 보관·해제(직원 아이 머리) · 원장 파기 예정 목록 */
.child-head-side { display: grid; justify-items: end; gap: var(--space-2); }
.archive-notice { display: grid; gap: 2px; }
.archive-since { font-size: var(--text-caption); color: var(--ink-2); }
.archive-form { padding: var(--space-3); border: 1px solid var(--line-2); border-radius: var(--radius-surface); background: var(--surface-2); }
.archive-reasons { border: 0; margin: 0; padding: 0; display: grid; gap: 0; min-width: 0; }
.archive-reasons legend { font-weight: 600; margin-bottom: var(--space-1); }
.archive-form .check, .archive-form .btn { min-height: 44px; }
.row-side { display: grid; justify-items: end; gap: 2px; }
.search-limit { padding: var(--space-2) var(--space-4); }          /* A-107 아이 찾기 20명 넘음 안내 */
.due-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2) var(--space-4); }
.due-row .chip { white-space: normal; }
/* D142 단계별 빌더: 위 진행 표시줄(① 루틴 → … → ✓ 완성)·아래 저장 줄은 스크롤해도 보이게(붙음). 지금 단계는 강조, 지난 단계는 ✓.
   추가 버튼은 누르면 '추가됨 ✓'(색 + 글자) */
.builder-steps { list-style: none; margin: 0; padding: var(--space-2) 0; display: flex; flex-wrap: wrap; gap: var(--space-1);
  position: sticky; top: 0; z-index: var(--z-raised); background: var(--surface-1); border-bottom: 1px solid var(--line-1); }
.builder-step[aria-current="step"] { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-soft); font-weight: 600; }
.builder-step.done { color: var(--success); background: var(--success-soft); border-color: var(--success); }
.builder-next { align-self: flex-end; }
.builder-final { display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line-1); }
.builder-final .sub-title { margin: 0; }
.builder-final-group { display: grid; gap: var(--space-1); }
.builder-final-group .rec-title { font-size: var(--text-body-lg); }
/* D-파도3 최종 운동 리스트: 운동 한 줄씩(번호·이름 ×) + 위·아래 44px 칸 — 순서 버튼이 줄마다 같은 자리(D142 — 단계 묶음 안에서) */
.builder-chips { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.builder-chip { display: grid; grid-template-columns: minmax(0, 1fr) 44px 44px; align-items: center; gap: var(--space-1); min-width: 0; }
.builder-chip .builder-chip-remove { white-space: normal; text-align: left; justify-content: flex-start; min-width: 0; }
.builder-move { padding: 0; min-width: 44px; }
svg.move-chev { width: 16px; height: 16px; transform: rotate(-90deg); }   /* chevron(→)을 돌려 위 */
svg.move-chev.down { transform: rotate(90deg); }
/* D165 자세 문제 목록 순서: 좁으면 위로·아래로를 왼쪽에 세로로(이름 | 이름 바꾸기·보관 두 줄 옆), 넓으면 한 줄 */
.lib-row.movable { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "move name" "move acts"; column-gap: var(--space-3); row-gap: 0; }
.lib-row.movable > .label-move { grid-area: move; display: flex; flex-direction: column; gap: var(--space-1); }
.lib-row.movable > .grow { grid-area: name; }
.lib-row.movable > .label-actions { grid-area: acts; display: flex; flex-wrap: wrap; gap: var(--space-2); }
@media (min-width: 640px) {
  .lib-row.movable { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "move name acts"; }
  .lib-row.movable > .label-move { flex-direction: row; }
}
.builder-savebar { position: sticky; bottom: 0; z-index: var(--z-raised); background: var(--surface-1); padding: var(--space-2) 0; border-top: 1px solid var(--line-1); display: grid; gap: var(--space-2); }
.builder-save-btn { width: 100%; min-height: 44px; }
.builder-name { display: grid; gap: var(--space-2); }
.builder-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-1) 0; }   /* D-파도3 추천·목록 줄 간격(버튼 사이 8px 유지) */
.builder-row > .grow { min-width: 0; overflow-wrap: anywhere; }
.builder-add[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-soft); }
.builder-presets { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.builder-preset { border: 1px solid var(--line-1); border-radius: var(--radius-surface); padding: var(--space-3); display: grid; gap: var(--space-2); min-width: 0; }
.builder-row .builder-add { margin-left: auto; }                     /* 담기는 줄 오른쪽 끝(훑어 누르기 쉽게) */
@media (max-width: 640px), (pointer: coarse) { .builder .btn, .builder .btn.small, .builder .input { min-height: 44px; } }
/* D118-2 로그인 화면의 탈퇴 유예 안내 — 버튼 글자가 카드 폭을 넓히지 않게(카드 = 한 열 격자) */
.auth .card > * { min-width: 0; }
.withdrawal-pending .btn { white-space: normal; max-width: 100%; }
.child-switch select { min-height: 36px; padding: 0 var(--space-2); font-size: var(--text-body-lg); }
.guardian-child { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.guardian-child h1 { font-size: var(--text-section); }
.btn.block { width: 100%; }
/* D179 W4 부품 한 벌: 큰 버튼(lg)은 터치·보호자 화면에서도 48(44로 줄지 않음), 접힘 머리는 어디서나 48(보호자 44 규칙보다 우선) */
body.guardian-app button.btn.lg { min-height: var(--control-lg); }
@media (pointer: coarse) { button.btn.lg { min-height: var(--control-lg); } }
body.guardian-app button.disclose { min-height: var(--control-lg); }
/* D82 성장도표: 남아 연한 파랑·여아 연한 핑크 배경(참조 곡선·BMI 점 색 대비 유지하게 아주 연하게), 아이의 실제 변화 곡선 */
.growth-chart .plot-bg { fill: transparent; }
.growth-chart.sex-m .plot-bg { fill: var(--chart-bg-boy); }
.growth-chart.sex-f .plot-bg { fill: var(--chart-bg-girl); }
.growth-chart .actual { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; opacity: .75; }
.legend .lg.actual { width: 18px; height: 0; border-top: 2px solid var(--accent); border-radius: 0; background: none; vertical-align: middle; }
.src-badge { display: inline-flex; align-items: center; height: 20px; margin-left: var(--space-2); padding: 0 8px; border-radius: var(--radius-pill);   /* D179 W4 배지 20 한 벌 */
  background: var(--accent-soft); color: var(--accent-ink); font-family: var(--font); font-size: var(--text-caption); font-weight: 500;
  vertical-align: 1px; }
.info-row { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; cursor: pointer;
  font: inherit; text-align: left; min-height: 44px; }                 /* 보호자 '병원 새 답변 n건' — 44px(역할 점검 P3-1, 43.x px였음) */
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--radius-pill); overflow: hidden; margin-bottom: var(--space-3); }
.seg button { border: 0; background: var(--surface-1); padding: 6px var(--space-4); min-height: 36px; cursor: pointer; font: inherit; }
.seg button[aria-selected="true"] { background: var(--accent); color: var(--ink-inverse); font-weight: 600; }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav); display: grid;
  grid-template-columns: repeat(auto-fit, minmax(3.2em, 1fr));          /* D124 파도3: 칸 최소 3.2em — 글자를 크게 키우면 두 줄(빈틈없이 채움) */
  background: var(--surface-1); border-top: 1px solid var(--line-1);
  padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }   /* D123 M-6 viewport-fit=cover와 함께 */
.tabbar button { min-height: 60px; border: 0; background: transparent; font: inherit; font-size: var(--text-body);
  color: var(--ink-3); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.tabbar button .cat-icon { width: 22px; height: 22px; color: currentColor; }
/* 메뉴 이름은 한 줄(글자 200%·195px에서도 '메시/지'로 나뉘지 않게 — 글자를 줄이지 않고 기본 좌우 여백만 줄임, D75) */
.tabbar button { padding: 0 2px; }
/* D123 M-6(모바일 노하우 v1.1 §2): 홈 막대 안전 영역은 바가 아니라 버튼 안쪽 여백으로 — 바 아래쪽을 낮게 눌러도 버튼이 받는다 */
.tabbar button { padding-bottom: env(safe-area-inset-bottom); min-height: calc(60px + env(safe-area-inset-bottom)); }
.tabbar .nav-label { white-space: nowrap; overflow-wrap: normal; }
.tabbar button[aria-current="page"] { color: var(--accent-ink); font-weight: 600; box-shadow: inset 0 3px 0 var(--accent); }
/* UI_UX_DESIGN_PRINCIPLES 44px 제품 목표: 보호자 앱은 휴대폰 우선이라 기기 종류와 관계없이 주요 조작을 44px 이상으로
   (WCAG AA 최소 24px와 구분되는 앱 목표). 키보드 초점이 아래 고정 메뉴에 가리지 않게 스크롤 여백을 둔다 */
.guardian-app .btn, .guardian-app .btn.small, .guardian-app .btn.lg, .guardian-app .child-switch select, .guardian-app .seg button { min-height: 44px; }
.guardian-app .seg button { min-width: 64px; }
/* 작은 밑줄 탭(공용 underlineTabs): 배경·외곽선 없음, 15px, 선택 650 + 2px 병원 녹색 선, 비선택 500. 누르는 곳은 44px */
.u-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line-1); margin-bottom: var(--space-3); }
.u-tabs button { min-height: 44px; padding: 0 2px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none;
  font: inherit; font-size: var(--text-control-lg); font-weight: 500; color: var(--ink-3); cursor: pointer; }
.u-tabs button[aria-selected="true"] { color: var(--ink-1); font-weight: 600; border-bottom-color: var(--brand); }
.u-tabs button:hover { color: var(--ink-1); }
.u-tabs button { min-width: 44px; }                                   /* 화면 점검 U-2: 두 글자 탭('추천')도 누름 폭 44 */
.u-tabs button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-control); }
/* 성장 그래프 탭 옆 최근 실측값: 두 탭 균등 폭, 이름 보통·값 굵게·단위 작게, 아래 줄 측정일·병원 */
.u-tabs.u-tabs-values { gap: 12px; }
.u-tabs.u-tabs-values button { flex: 1 1 0; min-width: 0; text-align: left; padding: 6px 2px 8px; }
.tab-value { display: grid; gap: 2px; }
.tab-line { overflow-wrap: anywhere; }                               /* 좁으면 탭 안에서 줄바꿈(값·단위 묶음은 붙여 둠) */
.tab-num { white-space: nowrap; }
.tab-name { font-weight: 500; }
.u-tabs button[aria-selected="true"] .tab-name { font-weight: 600; }   /* 선택 탭: 밑줄 + 굵은 이름 */
.tab-sub .src-badge.home { background: var(--surface-3); color: var(--ink-2); }
.tab-value b { font-size: var(--text-value); font-weight: 600; color: var(--ink-1); }
.tab-unit { font-size: var(--text-body); }
.tab-sub { display: flex; align-items: center; gap: 4px; font-size: var(--text-caption); font-weight: 400; color: var(--ink-3); }
.tab-sub .src-badge { margin-left: 0; }
/* 도표 아래 선택 상세와 세로 기록 목록(표 대신 — 가로 스크롤 없음) */
.point-detail { display: grid; gap: 2px; margin: var(--space-2) 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--surface-2); color: var(--ink-2); }
.point-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-1); }
/* D194: 날짜·장소 / 값·백분위 두 줄을 키·몸무게와 화면 폭에 관계없이 같은 열에 둔다. */
.point-row { display: grid; gap: 2px; width: 100%; min-height: 44px; padding: 4px var(--space-1); border: 0;
  border-bottom: 1px solid var(--line-1); background: none; font: inherit; color: var(--ink-2); text-align: left; cursor: pointer; }
.point-row[aria-pressed="true"] { background: var(--accent-soft); }
.point-meta { display: flex; align-items: center; min-width: 0; gap: var(--space-2); }
.point-meta .src-badge { flex: none; margin-left: 0; white-space: nowrap; }
.point-values { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-2); min-width: 0; }
.point-values > .caption { text-align: right; white-space: nowrap; }
.guardian-app .input, .guardian-app .check { min-height: 44px; }
/* 키·몸무게 입력 넛지(TO_CLAUDE_B_PARENT_MEASURE_CTA): 전체 폭 52px, 17px/700, 모서리 12, 병원 짙은 녹색(아이 테마와 무관).
   안내 두 줄은 버튼 밖에 짧게. 보조 행동은 약한 글자 버튼. 이 넛지에만 적용 */
/* 아이 기록하기(TO_CLAUDE_B_PARENT_HOME_RECORDING): 한 카드에 세 행동을 세로로. 줄 전체가 누름 영역(56px), 같은 선 아이콘·굵은 행동명·
   D184: 보조 설명 없이 공통 상태 열·이동 표시, 오늘 완료만 병원 녹색으로 강조 */
.record-lead { margin: 0 0 var(--space-3); font-size: var(--text-body-lg); color: var(--ink-2); line-height: 1.5; }
/* Growth entry: all three existing editors are open; styles stay inside this card. */
.guardian-inline-record .inline-record-section { min-width: 0; border: 1px solid var(--line-1); border-radius: var(--radius-surface); }
.guardian-inline-record .inline-record-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.guardian-inline-record .inline-record-heading h3 { margin: 0; font-size: var(--text-body-lg); }
.guardian-app .guardian-inline-record .inline-record-heading .record-badge { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 10px; line-height: 20px; max-width: 100%; white-space: normal; }
.guardian-app .guardian-inline-record .inline-record-heading .record-badge .cat-icon { width: 16px; height: 16px; display: block; flex: none; margin: 0; color: inherit; }
.guardian-inline-record .inline-record-body, .guardian-inline-record .field, .guardian-inline-record .input { min-width: 0; max-width: 100%; }
.guardian-inline-record .sleep-times { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--space-3); }
.guardian-inline-record .q-top { flex-wrap: wrap; }
.guardian-inline-record .inline-exercise > .body { padding: 0; }
.guardian-inline-record .record-complete > .inline-record-heading { color: var(--brand); }
.record-rows { display: grid; border: 1px solid var(--line-1); border-radius: var(--radius-surface); overflow: hidden; }
.record-row { display: grid; grid-template-columns: 22px 6em minmax(0, 1fr) 12px; align-items: center; gap: var(--space-2); min-height: 56px;
  padding: var(--space-2) var(--space-3); border: 0; background: var(--surface-1); color: var(--ink-1); font: inherit; text-align: left;
  text-decoration: none; cursor: pointer; width: 100%; }
.record-row + .record-row { border-top: 1px solid var(--line-1); }
.record-row:hover { background: var(--surface-2); }
.record-row:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }
.record-row .cat-icon { width: 22px; height: 22px; color: var(--brand); }
.record-text { min-width: 0; word-break: keep-all; }
.record-text b { font-size: var(--text-body-lg); }
.record-state { font-size: var(--text-body); color: var(--ink-2); text-align: left; min-width: 0; word-break: keep-all; overflow-wrap: break-word; }
.record-row.record-complete { background: var(--success-soft); box-shadow: inset 0 0 0 1px var(--brand-line); }
.record-row.record-complete:hover { background: var(--brand-wash); }
.record-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: var(--radius-pill);
  background: var(--brand); color: var(--surface-1); font-weight: 700; white-space: nowrap; }
.record-medal { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface-1); color: var(--brand); }
.record-medal .cat-icon { width: 16px; height: 16px; }
.record-row .chev { color: var(--ink-3); width: 12px; height: 12px; }
@media (max-width: 360px) {
  .record-row { gap: 6px; padding-left: var(--space-2); padding-right: var(--space-2); }
}
/* 오늘 운동 체크(exercise.js): 항목 한 줄 전체가 누름 영역, 저장된 ✓만 '했어요' */
.ex-items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.ex-item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-height: 52px;
  padding: var(--space-2) var(--space-3); border: 1px solid var(--line-1); border-radius: var(--radius-control); cursor: pointer; }
.ex-item input { width: 22px; height: 22px; accent-color: var(--brand); }
.ex-item:has(input:checked) { background: var(--accent-soft); border-color: transparent; }
.ex-item.ex-saved { background: var(--success-soft); border-color: var(--brand-line); }
.ex-item.ex-confirmed { animation: exercise-confirm 200ms var(--ease); }
.exercise-completion { margin: 0; padding: var(--space-3); border-radius: var(--radius-control); background: var(--success-soft);
  border: 1px solid var(--brand-line); color: var(--success); font-weight: 700; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: var(--space-2); }
.exercise-completion[hidden] { display: none; }
.exercise-completion-icon { width: 28px; height: 28px; flex: 0 0 28px; }
.exercise-finish-box { display: grid; gap: var(--space-1); }
.exercise-finish-box p { margin: 0; text-align: center; }
@keyframes exercise-confirm { 0% { transform: scale(.985); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ex-item.ex-confirmed { animation: none; } }
.ex-text { display: grid; gap: 2px; min-width: 0; }
.ex-state { font-size: var(--text-body); color: var(--ink-3); white-space: nowrap; }
.ex-state.done { color: var(--ink-1); font-weight: 600; }
/* 직원 운동 칸: 지금 계획·날짜별 체크(수행률 없음), 트레이너 계획 편집 줄 */
.ex-plan-items, .ex-days { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.ex-days li { border-top: 1px solid var(--line-1); padding-top: var(--space-2); }
.ex-day { font-weight: 600; color: var(--ink-1); }
.ex-day-items { display: flex; flex-wrap: wrap; gap: 4px var(--space-3); margin-top: 2px; font-size: var(--text-body-lg); color: var(--ink-3); }
.ex-chip.on { color: var(--ink-1); }
.window-ex { margin: 0; font-weight: 600; color: var(--ink-1); }
.life-exercise { border-top: 1px solid var(--line-1); padding-top: var(--space-3); display: grid; gap: var(--space-1); }
.life-exercise p { margin: 0; }
.ex-edit-rows { margin: 0; padding-left: var(--space-4); display: grid; gap: var(--space-2); }
/* D78 ▶ 영상: 작은 글자, 누름 영역 44px(아이콘을 키우지 않음). 보호자 체크 줄에서는 라벨 옆(밖) */
.video-link { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 var(--space-2); color: var(--accent-ink); font-size: var(--text-body-lg); font-weight: 600; text-decoration: none; }
.video-link:hover { text-decoration: underline; }
.video-link > svg { width: 18px; height: 18px; flex: none; margin-right: 4px; }   /* ▶ 글자 대신 기하 아이콘(이모지로 안 바뀜) */
.video-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-control); }
/* D97 앱 안 영상 재생: 버튼 모양은 기존 '▶ 영상'과 같게, 겹침 화면은 가로·세로 모두 16:9가 화면 안에 */
button.video-link { border: 0; background: none; font-family: inherit; cursor: pointer; }
body.video-open { overflow: hidden; }
.video-overlay { position: fixed; inset: 0; z-index: var(--z-overlay); display: grid; place-items: center; padding: var(--space-3); background: var(--video-backdrop); }
.video-sheet { display: grid; gap: var(--space-2); width: min(100%, 960px, calc((100dvh - 150px) * 16 / 9)); }   /* 제목 줄 + 안내 줄 자리 */
.video-head { display: flex; align-items: center; gap: var(--space-3); color: var(--ink-inverse); }
.video-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn.video-close { flex: none; min-height: 44px; min-width: 64px; }
.video-box { width: 100%; aspect-ratio: 16 / 9; background: var(--media-bg); border-radius: var(--radius-control); overflow: hidden; }
.video-frame { display: block; width: 100%; height: 100%; border: 0; }
.video-help { margin: 0; color: var(--on-dark); font-size: var(--text-body); }            /* 어두운 겹침 위 안내(C P2 — 재생 안 될 때) */
/* D80 세트 카드(직원)·세트 소제목(보호자) */
.ex-set { display: grid; gap: var(--space-1); padding: var(--space-3) 0; border-bottom: 1px solid var(--line-1); }
.ex-set-title { margin: 0; }
/* D18 병원 공지 */
.records-older, .records-none { padding: var(--space-2) var(--space-4); margin: 0; }   /* D100 지난 기록 접기(여백 없는 표 칸 안) */
.records-monthly .weight-from { white-space: nowrap; }
/* D138 의사 ↔ 트레이너 메모: 항목 카드(지시·특이 사항), 확인할 지시는 주황 선 + '확인할 지시' 글자(색만으로 구분하지 않음), 완료 지시는 옅게 */
.care-list { gap: var(--space-2); }
.care-item { border: 1px solid var(--line-1); border-radius: var(--radius-surface); padding: var(--space-3); display: grid; gap: var(--space-2); min-width: 0; }
.care-item.attention { border-color: var(--warning-line); border-left: 4px solid var(--warning-mark); background: var(--warning-wash); }
.care-item.done .care-body { color: var(--ink-3); }
.care-head { align-items: center; }
.care-body { margin: 0; }
.care-replies { list-style: none; margin: 0; padding: 0 0 0 var(--space-3); border-left: 2px solid var(--line-1); display: grid; gap: var(--space-2); }
.care-reply .care-new { margin-left: var(--space-1); }
.care-panel.has-attention { border-color: var(--warning-line); }
/* D139 §3·D145 의사에게 온 질문: 카드 한 줄(질문 앞부분 2줄까지), 전달 메모는 옅은 바탕(병원 내부 — 보호자 비공개), 펼치면 그 자리에서 대화 */
.dq-list { list-style: none; margin: 0; padding: 0; }
.dq-item { border-bottom: 1px solid var(--line-1); }
.dq-card { align-items: flex-start; }
.dq-card .stack-tight { display: grid; gap: 2px; min-width: 0; }
.dq-excerpt { margin: 0; color: var(--ink-1); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.dq-handoff, .dq-waited { margin: 0; }
.dq-memo { margin: 0; padding: var(--space-1) var(--space-2); background: var(--surface-2); border-radius: var(--radius-control); color: var(--ink-2);
  overflow-wrap: anywhere; white-space: pre-wrap; }
.dq-thread { padding: 0 var(--space-4) var(--space-3); }
.thread-handoff { display: grid; gap: 2px; margin: var(--space-1) 0; }
.forward-memo { margin-top: var(--space-2); }                /* D137 몸무게가 키와 다른 측정이면 '· 가정 9/12' */
/* D60 치료 경과 분석 */
.progress-controls { flex-wrap: wrap; align-items: flex-end; justify-content: space-between; }
.progress-controls .btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-soft); }
.progress-sort { min-width: 12em; }
.progress-controls .btn, .progress-sort select { min-height: 44px; }   /* 필터·정렬 누르는 곳 44px */
.progress-child { min-height: 44px; padding: 0 var(--space-1); font-weight: 600; color: var(--ink-1); white-space: normal; text-align: left; }
.progress-table td { vertical-align: top; }
/* D109 검색 조건 줄: 검색 칸 한 줄 + 성별·상태 버튼 묶음·기간·정렬(좁으면 줄바꿈), 누르는 곳 44px */
.progress-filters { padding: var(--space-3); border-radius: var(--radius-surface); background: var(--surface-2); border: 1px solid var(--line-1); }
.progress-q .input { width: 100%; max-width: 28em; min-height: 44px; }
.progress-filters .progress-controls > * { min-width: 0; max-width: 100%; }       /* 글자 200%·좁은 폭에서 줄바꿈(가로 넘침 없음) */
.progress-filters .progress-sort { min-width: min(12em, 100%); }
.progress-filters .progress-sort select { width: 100%; }
.progress-seg { flex-wrap: wrap; gap: var(--space-1); }
.progress-seg .btn { min-height: 44px; min-width: 44px; border: 1px solid var(--line-2); background: var(--surface-1); }   /* 누를 수 있는 모양(테두리) */
.progress-seg .btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-ink); font-weight: 600; }   /* 색 + 테두리 + 굵기 */
.progress-controls > .btn { align-self: flex-end; }
/* 기간 구간 5단계: 이름 | 인원(오른쪽 정렬, 고정폭 숫자) */
.progress-buckets { flex-basis: 220px; }
/* D128 집단별 예상키 증가: 축마다 작은 표 — 넓으면 나란히, 좁으면 아래로(아주 좁으면 stack-xs 카드) */
/* C R-D157: 넓으면(1100px 이상) 두 칸 두 줄 — 위 성별·치료 시작 나이, 아래 약제 남아·여아(약제 이름 열이 한 줄에 들도록 칸 넓게).
   그보다 좁으면 표를 한 칸씩 쌓는다(이름 한 줄이 칸을 넘치지 않게). 목록형(640 이하) 순서는 그대로 */
.progress-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@media (min-width: 1100px) { .progress-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.progress-group-box.pg-sex { order: 1; } .progress-group-box.pg-start_age { order: 2; }
.progress-group-box.pg-meds_m { order: 3; } .progress-group-box.pg-meds_f { order: 4; }
.pg-meds_m .progress-group td:first-child, .pg-meds_f .progress-group td:first-child { white-space: nowrap; }
.progress-group caption { text-align: left; font-size: var(--text-body-lg); font-weight: 600; color: var(--ink-1); padding-bottom: var(--space-1); }
.progress-group th, .progress-group td.num { white-space: nowrap; }
/* D140 집단별 예상키 증가 — 폰 세로(640px 이하)는 표 대신 목록형(이름 | 평균 큰 숫자 + 'n명 · 범위'), 넓은 폭은 표 */
.progress-groups-narrow { display: none; }
.progress-group-list .pg-title { margin: 0 0 var(--space-1); font-size: var(--text-body-lg); font-weight: 600; color: var(--ink-1); }
.progress-group-list .pg-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; }
.progress-group-list .pg-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.progress-group-list .pg-val { flex: 0 1 auto; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.progress-group-list .pg-avg { font-size: var(--text-value); font-variant-numeric: tabular-nums; white-space: nowrap; }
.progress-group-list .pg-avg.muted { font-size: var(--text-body-lg); }        /* 0명 '기록 없음'은 숫자보다 조용하게 */
.progress-group-list .pg-sub { white-space: nowrap; }                       /* 'n명 · 범위'는 한 줄(구분점이 줄 끝에 남지 않게 — 이름 쪽이 줄바꿈) */
.progress-group-list .pg-sub .num { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .progress-groups { display: none; }
  .progress-groups-narrow { display: grid; gap: var(--space-4); }
}
.progress-list { margin-top: var(--space-2); }   /* 머리글·아이 수는 한 줄(평균·범위는 좁으면 '~' 앞뒤에서 줄바꿈 — 320·가로에서 넘치지 않게) */
.bucket-list { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: grid; gap: 2px; }
.bucket-list li { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-body); color: var(--ink-2); }
.bucket-list b { font-variant-numeric: tabular-nums; color: var(--ink-1); }
/* 표 우선 + 행 펼침(D104 모양 — 작은 '세부' 버튼) */
.progress-table td.actions { width: 1%; white-space: nowrap; }
.btn.disclose.progress-more { width: auto; min-height: 48px; white-space: nowrap; }   /* D179 W4 접힘 머리 높이 48 하나 */
.progress-more .disclose-state { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.progress-detail > td { background: var(--surface-2); padding: var(--space-3) var(--space-4); }
.pd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15em), 1fr)); gap: var(--space-2) var(--space-4); }
.pd-item { display: grid; gap: 2px; min-width: 0; }
.pd-label { font-size: var(--text-label); color: var(--ink-3); }
.pd-value { overflow-wrap: anywhere; }
.progress-row.hit > td { background: var(--accent-soft); }
@media (max-width: 640px) {                                        /* 세로 카드(stack-sm): 강조는 카드 전체, '세부' 칸도 줄 너비 */
  .progress-table td.actions { width: auto; }
  .progress-row.hit { background: var(--accent-soft); }
  .progress-row.hit > td { background: none; }
}
/* 산점도: 성별 = 색 + 모양(남 ● 파랑, 여 ▲ 자주), 누름 영역 12px 반지름(보이지 않음), 고른 점은 굵은 테두리 */
.progress-plot { max-width: 760px; }
.progress-scatter { display: block; max-width: 100%; height: auto; }
.progress-scatter .sc-bg { fill: var(--surface-2); }
.progress-scatter .sc-grid line { stroke: var(--line-1); stroke-width: 1; }
.progress-scatter .sc-grid line.sc-zero { stroke: var(--line-3); stroke-width: 1.5; }
.progress-scatter .sc-tick { font-size: var(--text-micro); fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.progress-scatter .sc-title { font-size: var(--text-label); fill: var(--ink-2); font-weight: 500; }
.progress-scatter .sc-m { fill: var(--sex-m); fill-opacity: .8; }
.progress-scatter .sc-f { fill: var(--sex-f); fill-opacity: .8; }
.progress-scatter .sc-hit { fill: transparent; cursor: pointer; }
.progress-scatter .sc-point.on .sc-pt { stroke: var(--ink-1); stroke-width: 2.5; fill-opacity: 1; }
.sc-legend { font-size: var(--text-body); color: var(--ink-2); }
.sc-key { display: inline-flex; align-items: center; gap: 6px; }
.sc-key i { display: inline-block; width: 10px; height: 10px; }
.sc-key.m i { border-radius: 50%; background: var(--sex-m); }
.sc-key.f i { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid var(--sex-f); }
/* D91 ④ 앱 내 알림 */
.btn.bell { position: relative; min-width: 44px; min-height: 44px; padding: 0 var(--space-2); }
.btn.bell svg { width: 22px; height: 22px; }
.bell-badge { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill);   /* 아이콘 위 배지 — 종을 가리지 않게 18 그대로(D179 W4 예외) */
  background: var(--danger); color: var(--ink-inverse); font-size: var(--text-micro); font-weight: 600; line-height: 18px; text-align: center; }
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-row { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 56px; padding: var(--space-2) var(--space-1);
  border: 0; border-bottom: 1px solid var(--line-1); background: none; color: var(--ink-2); font: inherit; text-align: left; cursor: pointer; }
.notif-row.unread { color: var(--ink-1); font-weight: 600; background: var(--accent-soft); }
.notif-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.notif-icon svg { width: 22px; height: 22px; color: var(--accent-ink); flex: none; }
.notif-text { flex: 1 1 auto; display: grid; gap: 2px; min-width: 0; }
.notif-time { font-weight: 400; }
.notif-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); }
.notif-switch { min-height: 48px; }
.notif-switch-state { font-weight: 600; color: var(--accent-ink); }
.notice-list { list-style: none; margin: 0; padding: 0; }
.notice-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line-1); }
.notice-row:last-child { border-bottom: 0; }
.notice-main { flex: 1 1 16em; gap: var(--space-1); min-width: 0; }
.notice-title { color: var(--ink-1); }
.notice-body { margin: 0; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.notice-actions { flex-wrap: wrap; }
.notice-card-box { display: grid; gap: var(--space-2); }
.notice-card { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 48px; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-2); border-radius: var(--radius-surface); background: var(--surface-1); color: var(--ink-1); font: inherit; text-align: left; cursor: pointer; }
.notice-card:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); border-color: var(--accent); }
.notice-card svg { flex: none; width: 20px; height: 20px; color: var(--accent-ink); }
.notice-card-label { flex: none; font-weight: 600; color: var(--accent-ink); }
.notice-card-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice-card .chev { flex: none; color: var(--ink-3); }
.notice-card > svg.disclose-chev { width: 18px; height: 18px; }
/* D179 공지 띠 펼침(보호자 성장 탭): 띠가 카드 머리가 되고 아래 본문과 카드 하나로 — '병원 공지'·제목·날짜가 두 번 보이지 않게.
   펼친 칸의 '병원 공지' 제목은 화면 읽기용으로만 남김(모양만 — 구조·동작 그대로) */
.notice-card-box:has(> .notice-card[aria-expanded="true"]) { gap: 0; border-radius: var(--radius-surface); box-shadow: var(--shadow-1); }
.notice-card[aria-expanded="true"] { border: 0; border-radius: var(--radius-surface) var(--radius-surface) 0 0; }
.notice-card[aria-expanded="true"] > .notice-card-title, .notice-card[aria-expanded="true"] > .caption { display: none; }
.notice-card[aria-expanded="true"] > .notice-card-label { flex: 1 1 auto; }
.notice-card-box > .notice-full > header { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.guardian-app .notice-card-box > .notice-full > .body { border-top: 1px solid var(--line-1); border-radius: 0 0 var(--radius-surface) var(--radius-surface); box-shadow: none; }
/* D95 생활 습관 통계 막대(HTML — 글자 확대에 따라 커짐) */
.stat-part { gap: var(--space-2); min-width: 0; }
.life-stats .stack, .life-stats [role="tabpanel"], .life-stats > .body { min-width: 0; }   /* 막대 칸이 패널 폭을 넘겨 늘지 않게 */
.stat-bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; align-items: end; padding-top: var(--space-1); min-width: 0;
  container-type: inline-size; }
/* 막대 칸이 글자에 비해 좁으면(좁은 폭·글자 확대 — em 기준) 막대 위 숫자는 날짜 글자가 있는 칸만. 모든 값은 아래 줄·구간별 수치 표에 글자로 */
@container (max-width: 21em) { .stat-top.minor { visibility: hidden; } }
.stat-col { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 96px auto; justify-items: center; gap: 2px; min-width: 0; }
.stat-col.empty { padding: 0; }
/* D176 원장님 메모(의사 → 보호자 한 방향): 날짜·작성 의사 작은 줄 + 본문(줄바꿈 그대로), 메모 사이 구분선 */
.dnote-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.dnote { padding: var(--space-3) 0; border-top: 1px solid var(--line-1); }
.dnote:first-child { border-top: 0; }
.dnote-body { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-1); }
.dnote-input { min-height: 88px; resize: vertical; }
.dnote-actions { align-items: center; justify-content: flex-end; }
.dnote-actions > .caption:first-child { flex: 1 1 14rem; }
.guardian-dnotes .count { margin-left: var(--space-2); }
/* D177·D178 치료 드랍: 사유 칩 여러 개·메모 한 줄, 폼의 메모 칸 */
.drop-reasons { margin-top: 4px; }
.drop-note { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.archive-note { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.archive-note-input { min-height: 64px; resize: vertical; }
/* D175 의사 측정 기록 월 표: 줄 끝 'n건 ▼' 단추(줄 어디를 눌러도 펼침), 펼친 달 바로 아래 그 달 행 단위 표 — 왼쪽 색 띠(D159 펼침과 같은 표시), ▲ */
.records-monthly .month-row { cursor: pointer; }
.records-monthly .month-row.open > td { background: var(--brand-wash); }
.records-monthly .month-more { width: 1%; text-align: right; white-space: nowrap; }
.month-toggle { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 var(--space-2); border: 1px solid var(--line-1);
  border-radius: var(--radius-pill); background: var(--surface-1); color: var(--ink-2); font: inherit; font-size: var(--text-caption); cursor: pointer; }
.month-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.month-toggle .month-chev { width: 14px; height: 14px; transform: rotate(90deg); transition: transform var(--motion-fast) var(--ease); }
.month-row.open .month-toggle { color: var(--ink-1); border-color: var(--kind-measure); }
.month-row.open .month-toggle .month-chev { transform: rotate(-90deg); }
.records-monthly .month-detail > td { padding: 0 0 var(--space-2) 0; box-shadow: inset 3px 0 0 var(--kind-measure); background: var(--surface-2); }
.records-monthly .month-detail .table-wrap { margin-left: var(--space-3); }
@media (max-width: 640px), (pointer: coarse) { .month-toggle { min-height: 44px; } }
@media (max-width: 640px) {                                          /* 세로 카드(stack-sm)에서도: 펼친 칸은 카드 전체 폭, 강조는 카드 전체 */
  .records-monthly tr.month-row.open { background: var(--brand-wash); }
  .records-monthly tr.month-row.open > td { background: none; }
  .records-monthly tr.month-row > td.month-more { grid-column: 1 / -1; }
  .records-monthly tr.month-detail { display: block; padding: 0 0 var(--space-2); }
  .records-monthly tr.month-detail[hidden] { display: none; }
  .records-monthly tr.month-detail > td { display: block; grid-column: 1 / -1; width: 100%; padding: 0; }
  .records-monthly .month-detail .table-wrap { margin-left: var(--space-2); }
}
/* D170 오늘 등록: 줄(누르면 아이 화면) 옆에 작은 단추(등록 취소·+ 오늘 등록) — 단추 속 단추 없이 나란히, 사유 고르기는 줄 아래 한 줄 */
.reg-item, .row-with-action { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-2); }
.reg-item > .row, .row-with-action > .row { flex: 1 1 14rem; min-width: 0; border-bottom: 0; }
.list > .reg-item, .list > .row-with-action { border-bottom: 1px solid var(--line-1); }   /* 구분선은 줄 전체(옆 단추 아래까지) */
.list > .reg-item:last-child, .list > .row-with-action:last-child { border-bottom: 0; }
.reg-item > .btn, .row-with-action > .reg-search-slot { flex: none; margin-right: var(--space-3); }
.reg-item > .reg-reason { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: 0 var(--space-4) var(--space-3); }
.reg-item.done .title { color: var(--ink-2); }
.reg-actions:not(:empty) { padding: var(--space-3) var(--space-4) 0; }
.reg-pad { margin: 0; padding: var(--space-2) var(--space-4); }
.reg-sub, .reg-note { margin: 0; padding: var(--space-3) var(--space-4) 0; }
.reg-status { margin-top: 4px; }
.chip.reg-chip { display: inline-block; height: auto; min-height: 22px; padding: 3px var(--space-2); line-height: 1.35; white-space: normal; border-radius: var(--radius-control); }   /* 값까지 든 긴 칩: 두 줄로 접혀도 바탕이 글자를 감싸게 */
.reg-summary { white-space: nowrap; }
/* D171 진료 완료: 의사 줄 옆 단추 / 완료 뒤 '완료 취소', 칩 줄에 '진료 완료'. 차트 고정 바 오른쪽 끝(폰 44px) */
.reg-item > .reg-consult-box { flex: none; display: inline-flex; align-items: center; gap: var(--space-1); margin-right: var(--space-3); }
.reg-status { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.child-bar .bar-consult { flex: none; display: inline-flex; align-items: center; }
.child-bar .bar-consult .reg-consult-box { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.child-bar .reg-consult-done { color: var(--success); font-weight: 600; font-size: var(--text-body-lg); }   /* D129 13/600 금지 → 14/600 */
@media (max-width: 640px), (pointer: coarse) { .child-bar .bar-consult .btn { min-height: 44px; } }
/* D174 의사 메인 '의사에게 온 질문' 접힘 칸: 안쪽 칸 머리(제목·건수)는 접힘 머리가 대신 */
.doctor-questions.in-fold { border: 0; box-shadow: none; background: none; }
.doctor-questions.in-fold > header { display: none; }                                        /* 공용 .empty(빈 상태 상자) 여백이 빈 구간 칸에 붙어 축 글자가 위로 뜨지 않게 */
.stat-top { font-size: var(--text-micro); color: var(--ink-1); white-space: nowrap; }
.stat-area { position: relative; width: 100%; height: 96px; border-bottom: 1px solid var(--line-2); }
.stat-track, .stat-fill { position: absolute; bottom: 0; left: 15%; right: 15%; border-radius: var(--radius-mark) var(--radius-mark) 0 0; }
.stat-track { background: var(--accent-soft); border: 1px solid var(--line-2); border-bottom: 0; }
.stat-fill { background: var(--accent); }
.stat-none { position: absolute; bottom: 0; left: 30%; right: 30%; border-bottom: 2px dotted var(--line-3); }
.stat-x { font-size: var(--text-micro); color: var(--ink-3); white-space: nowrap; min-height: 1.2em; }
.stat-line { margin: 0; color: var(--ink-2); }
.stat-quality { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.stat-table td, .stat-table th { white-space: nowrap; }
/* D169 보호자 기록 돌아보기: 큰 숫자 한 줄 + 작은 비교 글자, 기간 토글은 작게 */
.review-card { gap: var(--space-2); min-width: 0; }
.review-card + .review-card { border-top: 1px solid var(--line-1); padding-top: var(--space-3); }
.review-big { display: grid; gap: 2px; }
.review-big-label { color: var(--ink-2); }
.review-big-value { color: var(--ink-1); font-size: var(--text-metric); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.review-diff { margin: 0; color: var(--ink-2); }
.u-tabs.u-tabs-small { gap: 16px; margin-bottom: var(--space-2); }
.u-tabs.u-tabs-small button { font-size: var(--text-body); }
.review-sleep .sleep-row { padding-top: 6px; padding-bottom: 6px; }
@media (max-width: 640px) {
  .review-card .stat-table, .review-card .stat-table tbody, .review-card .stat-table tr { display: block; width: 100%; }
  .review-card .stat-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .review-card .stat-table tr { padding: var(--space-2) 0; border-bottom: 1px solid var(--line-1); }
  .review-card .stat-table td { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: 2px 0; border: 0; white-space: normal; text-align: right; }
  .review-card .stat-table td::before { content: attr(data-label); flex: 0 0 auto; color: var(--ink-3); font-weight: 500; text-align: left; }
}
/* D65 예약·일정 */
.appt-modes .btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-soft); }
.appt-day { display: grid; gap: var(--space-1); }
.appt-day.today > h3 { color: var(--accent-ink); }
.appt-list { list-style: none; margin: 0; padding: 0; }
.appt-row { display: grid; gap: var(--space-1); padding: var(--space-2) 0; border-bottom: 1px solid var(--line-1); }
.appt-row.cancelled .appt-main { color: var(--ink-3); }
.appt-main { display: flex; align-items: flex-start; gap: var(--space-3); }
.appt-main .grow { display: grid; gap: 2px; min-width: 0; }
.appt-time-text { flex: none; min-width: 4.5em; font-weight: 600; color: var(--ink-1); }
.appt-title { color: var(--ink-1); }
.appt-memo { white-space: pre-wrap; }
.appt-actions { flex-wrap: wrap; }
/* 기본 큐(접근성): 320폭 글자 200%(실효 160px)에서도 가로 넘침 없게 — 아주 좁을 때만 줄바꿈·최소 폭 풀기(넓은 화면 모양은 그대로) */
@media (max-width: 260px) {
  .search-card .search-row { flex-wrap: wrap; }
  .search-card .search-row .input { flex-basis: 100%; }
  .appt-main { flex-wrap: wrap; }
  .appt-main > * { min-width: 0; max-width: 100%; }
  .appt-list h3, .appt-date h3 { overflow-wrap: anywhere; }
  .reply { grid-template-columns: minmax(0, 1fr); }
  .reply .input, .reply textarea { min-width: 0; width: 100%; }
  .btn.refresh { min-width: 0; max-width: 100%; white-space: normal; }
}
.appt-extra:empty { display: none; }
.appt-form { padding: var(--space-3); border: 1px solid var(--line-1); border-radius: var(--radius-surface); background: var(--surface-2); }
.appt-time { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.appt-time .field { flex: 1 1 9em; }
.appt-undecided { min-height: 44px; }
.appt-pick { list-style: none; margin: 0; padding: 0; }
.appt-chosen { margin: 0; font-weight: 600; color: var(--ink-1); }
.appt-history { margin: 0; padding-left: 1.2em; display: grid; gap: 2px; font-size: var(--text-body); }
.appt-next { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: var(--space-2) 0 0; color: var(--ink-2); }
.appt-month .cal-day.has { background: var(--accent-soft); color: var(--ink-1); border-color: var(--accent-soft); }
.appt-month .cal-day.today { outline: 2px solid var(--accent); outline-offset: -2px; }
.appt-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.appt-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-1) var(--space-3);
  padding: var(--space-3); border: 1px solid var(--line-1); border-radius: var(--radius-surface); }
.appt-card-day { display: flex; flex-wrap: wrap; gap: var(--space-2); color: var(--ink-1); }
.appt-card-title { grid-column: 1; color: var(--ink-2); }
.appt-card .btn { grid-column: 2; grid-row: 1 / span 2; }
/* D90 보호자 운동 달력: 날짜 칸 = 숫자 + 단계 글자(색만으로 구분하지 않음), 칸 높이 48px */
.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.cal-title { margin: 0; text-align: center; }
.ex-cal { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.ex-cal .cal-week { text-align: center; font-size: var(--text-caption); color: var(--ink-3); }
.ex-cal .cal-wide { grid-column: 1 / -1; }
.cal-day { width: 100%; min-height: 48px; display: grid; align-content: center; justify-items: center; padding: 2px 0; border: 1px solid var(--line-1);
  border-radius: var(--radius-control); background: var(--surface-1); color: var(--ink-2); font: inherit; cursor: pointer; }
.cal-num { font-size: var(--text-body-lg); font-weight: 600; }
.cal-unit { display: none; }
.cal-stage { min-height: 1.2em; font-size: var(--text-micro); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cal-day.stage-none { background: var(--surface-2); color: var(--ink-3); }
.cal-day.stage-part { background: var(--accent-soft); color: var(--ink-1); border-color: var(--accent-soft); }
.cal-day.stage-full { background: var(--accent); color: var(--ink-inverse); border-color: var(--accent); }
/* B85-01: 날짜 칸 가로 44px 확보 — 420px 이하는 달력 칸 좌우 여백·간격을 줄이고, 그래도 모자란 370px 이하는 날짜 세로 목록(D75) */
@media (max-width: 420px) { .cal-panel > .body { padding-left: var(--space-2); padding-right: var(--space-2); } .ex-cal { gap: 2px; } }
@media (max-width: 370px) {
  .ex-cal { grid-template-columns: minmax(0, 1fr); }
  .ex-cal .cal-week, .ex-cal .cal-pad { display: none; }
  .cal-day { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 0 var(--space-3); }
  .cal-unit { display: inline; }
}
/* D85 보호자 소식: 긴 채널 제목(최대 150자)은 줄바꿈, ▶ 영상은 오른쪽 44px */
.news-list { list-style: none; margin: 0; padding: 0; }
.news-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--line-1); }
.news-row:last-child { border-bottom: 0; }
.news-row .grow { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.news-title { color: var(--ink-1); font-weight: 600; }
/* D96 소식 글: 본문 줄바꿈 유지, 사진은 칸 폭에 맞춤 */
.news-body { margin: 0; color: var(--ink-1); white-space: pre-wrap; overflow-wrap: anywhere; }
.news-row { align-items: flex-start; }
.news-image { display: block; width: 100%; max-width: 480px; height: auto; margin-top: var(--space-2); border-radius: var(--radius-control); }
.news-thumb { display: block; max-width: 160px; max-height: 120px; border-radius: var(--radius-control); border: 1px solid var(--line-1); }
.news-post-main { gap: var(--space-1); min-width: 0; }
.news-actions { flex-wrap: wrap; }
.news-row .video-link { flex: none; white-space: nowrap; }          /* 긴 제목 옆에서도 '▶ 영상' 한 줄 */
.ex-day-set { flex-basis: 100%; font-size: var(--text-body-lg); font-weight: 600; color: var(--ink-2); }
.ex-set-actions, .ex-set-tools { margin-top: var(--space-1); }
.predicted-line { margin: 0 0 var(--space-2); font-weight: 600; color: var(--ink-1); }
.ex-item-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); }   /* 좁으면 ▶ 영상이 아래 줄로(C B78-07) */
.ex-item-row > .ex-item { flex: 1 1 12rem; min-width: 0; }                       /* 좁으면 ▶ 영상이 아래 줄로 */
/* 좁은 폭·글자 200%(C B78-07): 상태('기록 없음')를 이름 아래 줄로 — 운동 이름이 눌리지 않게 */
@media (max-width: 360px) { .ex-item { grid-template-columns: 24px minmax(0, 1fr); } .ex-item .ex-state { grid-column: 2; } }
.ex-plan-items li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-1); }
/* 계획 편집기: 목록 운동 표시·목록에서 고르기·세트 불러오기 */
.ex-edit-tools { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ex-edit-row input[readonly] { background: var(--surface-2); color: var(--ink-1); }
.ex-picker { grid-column: 1 / -1; display: grid; gap: var(--space-1); padding: var(--space-2); border: 1px solid var(--line-1); border-radius: var(--radius-control); }
.ex-pick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 16rem; overflow-y: auto; }
.ex-pick-item { width: 100%; justify-content: flex-start; min-height: 44px; }
.ex-set-load { padding: var(--space-3); border: 1px solid var(--line-1); border-radius: var(--radius-control); }
/* 운동 목록·세트 관리 */
.trainer-nav { margin-bottom: var(--space-3); }
/* D162 역할별 큰 탭 한 줄(앱 머리 바로 아래, 본문과 같은 폭): 알약 모양 — 선택 = 브랜드 면 + 흰 글자, 나머지 옅은 면. 아이콘 18px, 높이 44px.
   넘치면(폰·겸직) 가로로 밀기 + 양끝 흐림으로 더 있음을 알림(아래 탭바 대신 — 보호자 앱 아래 탭바·간호 고정 바와 겹치지 않게) */
.role-tabs { position: relative; max-width: 1440px; margin: 0 auto; padding: var(--space-4) var(--space-5) 0; }
.role-tabs:empty { display: none; }
.role-tabs-row { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding: 2px; }
.role-tabs-row::-webkit-scrollbar { display: none; }
.role-tabs [role="tab"] { flex: none; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4);
  border: 1px solid var(--line-1); border-radius: var(--radius-pill); background: var(--surface-1); color: var(--ink-2);
  font: inherit; font-size: var(--text-body-lg); font-weight: 500; white-space: nowrap; cursor: pointer; }
.role-tabs [role="tab"] .cat-icon { width: 18px; height: 18px; flex: none; color: var(--accent); }
.role-tabs [role="tab"][aria-selected="true"] .cat-icon { color: currentColor; }
.role-tabs [role="tab"]:hover { color: var(--ink-1); border-color: var(--line-2); }
.role-tabs [role="tab"][aria-selected="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-dark); font-weight: 600; }
.role-tabs [role="tab"]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.role-tabs [role="tab"][aria-selected="true"] .count { background: var(--on-dark); color: var(--brand); }
.role-tabs.more-right .role-tabs-row { mask-image: linear-gradient(to right, var(--ink-1) 85%, transparent); }
.role-tabs.more-left .role-tabs-row { mask-image: linear-gradient(to left, var(--ink-1) 85%, transparent); }
.role-tabs.more-left.more-right .role-tabs-row { mask-image: linear-gradient(to right, transparent, var(--ink-1) 12%, var(--ink-1) 88%, transparent); }
@media (max-width: 900px) { .role-tabs { padding: var(--space-3) var(--space-4) 0; } .role-tabs [role="tab"] { padding: 0 var(--space-3); font-size: var(--text-body); } }
.lib-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--line-1); }
.lib-row .grow { flex: 1 1 12rem; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); }
.lib-edit { padding: var(--space-3); border: 1px solid var(--line-1); border-radius: var(--radius-control); }
.ex-edit-row.set-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }   /* 편집기 3열 규칙보다 우선(C B78-02) */
@media (max-width: 480px) { .ex-edit-row.set-row { grid-template-columns: minmax(0, 1fr); } .ex-edit-row.set-row .ex-edit-cell:nth-child(2) { grid-column: 1; } }
.set-row .set-row-tools { grid-column: 1 / -1; }
/* D77 편집기: 칸 제목은 흐린 예시가 대신하지 않는다 — 넓으면 목록 위 제목 줄(입력 칸과 같은 열), 좁으면 칸마다 작은 제목 */
.ex-edit-head, .ex-edit-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 4.5rem; gap: var(--space-2); align-items: center; }
.ex-edit-head { padding-left: var(--space-4); font-size: var(--text-body-lg); font-weight: 600; color: var(--ink-2); }
.ex-edit-cell { display: grid; gap: 2px; min-width: 0; }
.ex-edit-label { display: none; font-size: var(--text-label); font-weight: 500; color: var(--ink-2); }
.ex-edit-row .input { min-height: 44px; }
@media (max-width: 480px) {
  .ex-edit-head { display: none; }
  .ex-edit-label { display: block; }
  .ex-edit-row { grid-template-columns: minmax(0, 1fr) auto; padding-bottom: var(--space-2); border-bottom: 1px solid var(--line-1); }
  .ex-edit-row .ex-edit-cell:nth-child(2) { grid-column: 1; }
  .ex-edit-row > .btn { grid-row: 1; grid-column: 2; align-self: end; }
}
/* 측정 기록 세로 목록 */
.record-list { list-style: none; margin: 0; padding: 0; }
/* D88 ②: 날짜 칸 | 키·몸무게 칸 두 열 — 줄마다 날짜 길이(오늘·병원 표시)가 달라도 값 칸이 같은 자리. 좁은 폭은 날짜 아래 값 */
.record-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-1) var(--space-3);
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line-1); }
@media (max-width: 400px) { .record-list li { grid-template-columns: minmax(0, 1fr); } }
.record-list li:last-child { border-bottom: 0; }
.record-list li.today { background: var(--accent-soft); }
.record-day { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); color: var(--ink-2); }
/* D113: 날짜 칸 고정 폭(최장 형식 '2025년 12월 28일' — --date-col), 숫자 고정폭 → 올해·지난해 날짜가 섞여도 배지·값 열이 같은 자리 */
.date-col { flex: none; display: inline-block; min-width: min(var(--date-col), 100%); font-variant-numeric: tabular-nums; }   /* 아주 좁으면 칸 폭까지만 */
.history-older > .history-more { justify-self: start; min-height: 44px; }
/* D116 운동 종류 칩 3색(색 + 글자 — 색만으로 구분하지 않음): 성장판 자극 초록 · 자세 교정 파랑 · 기타 회색 테두리 */
.chip.cat { margin-left: var(--space-1); font-size: var(--text-label); font-weight: 500; }
.chip.cat-growth_plate { background: var(--success-soft); color: var(--success); }
.chip.cat-posture { background: var(--info-soft); color: var(--info); }
.chip.cat-routine { background: var(--surface-3); color: var(--ink-2); }   /* A-102 루틴 — 상태 칩은 채움(D-파도2 칩 3언어, 테두리형은 버튼 몫) */
/* D116 자세 평가 칸: 문제 칩 + 평가일·평가자 + 해제(44px), 메모 줄 */
.posture-card .body > div:empty, .posture-labels .body > div:empty, .lib-form:empty { display: none; }   /* 비어 있는 폼 자리는 틈을 만들지 않음 */
.posture-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.posture-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.posture-item .btn { min-height: 44px; margin-left: auto; }
.chip.posture-tag { height: auto; min-height: 24px; max-width: 100%; white-space: normal; }   /* D179 W4 기본 칩과 같은 모양(상태만 아래) */
.chip.posture-tag.on { background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-ink); }
.chip.posture-tag.archived { background: var(--surface-2); color: var(--ink-3); }   /* 보관된 문제: 옅은 채움 + '(보관된 문제)' 글자(D-파도2 — 상태 칩은 채움) */
.chip.level { background: var(--warning-soft); color: var(--warning); }
.posture-memo { display: grid; gap: 2px; padding-top: var(--space-2); border-top: 1px solid var(--line-1); }
.posture-memo .btn { justify-self: start; min-height: 44px; }
.posture-memo-text, .rec-memo { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.posture-history li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
/* D116 목록 필터 줄(운동 종류 버튼·프리셋 거르기 고르기), 프리셋 태그 */
.lib-filter { flex-wrap: wrap; gap: var(--space-1); }
.lib-filter .btn { min-height: 44px; min-width: 44px; border: 1px solid var(--line-2); background: var(--surface-1); }
.lib-filter .btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-ink); font-weight: 600; }
.lib-filter select { min-height: 44px; width: auto; max-width: 100%; }
.trainer-management > .trainer-presets { margin-top: 20px; }
.trainer-presets .btn { min-height: 44px; height: auto; max-width: 100%; white-space: normal; overflow-wrap: anywhere; padding-block: 10px; }
.trainer-management > .trainer-labels { margin-top: 24px; }
.exercise-category-filter { gap: 8px; }
.preset-filter { gap: 12px; }
.preset-catalog { min-width: 0; }
.preset-catalog > input[type="search"] { display: block; width: 100%; margin-top: 12px; }
.preset-catalog > .lib-list { margin-top: 20px; }
.preset-tag-fields { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.preset-tag-fields > .field { gap: 6px; width: 180px; min-width: 0; max-width: 100%; }
.preset-tag-fields select { width: 100%; min-height: 44px; }
.preset-reload.btn { min-height: 44px; height: auto; max-width: 100%; white-space: normal; overflow-wrap: anywhere; padding-block: 10px; border-color: var(--accent-ink); }
.preset-reload.btn .cat-icon { flex: none; }

.lib-tags { flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-1); }
.lib-tags .chip, .rec-tags .chip { height: auto; min-height: 24px; }
.preset-tags { border: 0; margin: 0; padding: var(--space-3) 0 0; border-top: 1px solid var(--line-1); }
.preset-tags legend { padding: 0; margin-bottom: var(--space-2); }
.tag-checks { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag-checks .tag-check { min-height: 36px; padding: 0 var(--space-3); border: 1px solid var(--line-2); border-radius: var(--radius-pill); }   /* D179 선택 칩 */
.tag-checks .tag-check:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
@media (max-width: 900px), (pointer: coarse) { .tag-checks .tag-check { min-height: 44px; } }
/* D116 세트 만들기 3단 추천: 단계 번호 원 + 제목, 프리셋 카드(겹침 배지), 운동 고르기 줄 44px */
.rec-step { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line-1); }
.recommend { min-width: 0; }
.recommend .btn { white-space: normal; text-align: left; }            /* 글자 200%·아주 좁은 폭: 버튼 글자 줄바꿈(가로 넘침 없음) */
.rec-title { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-title); }
.rec-num { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: var(--ink-inverse);
  font-size: var(--text-body-lg); font-weight: 600; flex: none; }
.rec-tags { flex-wrap: wrap; gap: var(--space-1); align-items: center; }
.rec-presets, .rec-pick { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.rec-preset { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--line-2); border-radius: var(--radius-surface); background: var(--surface-1); }
.rec-preset-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.rec-preset .btn { justify-self: start; min-height: 44px; }
.rec-match { font-weight: 600; }
.rec-pick-row { min-height: 44px; border: 1px solid var(--line-2); border-radius: var(--radius-control); }
.recommend .btn, .posture-card .lib-edit .btn, .posture-labels .lib-edit .btn { min-height: 44px; }   /* 추천·자세 평가 폼 누르는 곳 44px */
@media (max-width: 640px), (pointer: coarse) {                     /* 트레이너 목록·세트 카드의 작은 버튼도 휴대폰에서는 44px */
  .lib-row .btn, .ex-set-actions .btn, .ex-set-tools .btn { min-height: 44px; }
  /* 기본 큐(접근성, 헤드리스 점검): 직원 화면의 작은 버튼·입력도 휴대폰·터치에서는 44px — 넓은 화면(마우스) 모양은 그대로 */
  .staff-top ~ main .btn, .staff-top ~ main .input, .staff-top ~ main select { min-height: 44px; }
  .staff-top ~ main [role=tab] { min-height: 44px; }
}
/* D88 ②: 키·몸무게 칸 너비 고정 — 한쪽 값이 없는 날(—)도 줄마다 같은 자리에 오게 */
.record-values { display: grid; grid-template-columns: minmax(0, 7em) minmax(0, 8.5em); column-gap: var(--space-3); color: var(--ink-3); }
/* B85-02: 글자 확대로 폭이 모자라면 칸이 같이 줄고 값은 칸 안에서 줄바꿈(넘치지 않음, 줄끼리 같은 폭이라 정렬 유지) */
.record-values b { color: var(--ink-1); }                     /* 시각 칸·수면의 질 선택 줄(라벨 전체가 누르는 곳) */
/* D185 보호자 측정 목록만: 날짜/장소 메타 한 줄 + 같은 너비의 값 두 열. 일정 등 공통 목록은 유지. */
.measure-record-list li { grid-template-columns: minmax(0, 1fr); }
.measure-record-list .record-meta { flex-wrap: nowrap; align-items: baseline; }
.measure-record-list .date-col { min-width: 0; white-space: nowrap; }
.measure-record-list .src-badge, .measure-record-list .chip { flex-shrink: 0; white-space: nowrap; }
.measure-record-list .record-values { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; width: 100%; }
.measure-record-list .record-values > span { min-width: 0; word-break: keep-all; }
.measure-record-list .record-values > span + span { border-left: 1px solid var(--line-1); padding-left: var(--space-2); }
.guardian-measure-records .records-older { padding-left: 0; padding-right: 0; }
.guardian-measure-records .disclose-box > .disclose { margin-left: var(--space-4); margin-right: var(--space-4); width: calc(100% - 2 * var(--space-4)); }
.guardian-measure-records .disclose-box[data-kind] > .disclose-body:not([hidden]) { border-left: 0; padding-left: 0; box-shadow: inset 3px 0 0 var(--kind-measure); }
html:has(body.guardian-app) { scroll-padding-bottom: calc(var(--tabbar-h, calc(61px + env(safe-area-inset-bottom))) + 11px); scroll-padding-top: 8px; }

/* ---- 보호자 '생활' — 요즘 수면(sleep.js) ---- */
.sleep-summary { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: var(--space-4); align-items: center; }
.sleep-clock { display: block; width: 100%; max-width: 220px; height: auto; margin: 0 auto; }
.sleep-clock .face { fill: var(--surface-2); stroke: var(--line-2); stroke-width: 1.5; }
.sleep-clock .tick { stroke: var(--line-3); stroke-width: 1; } .sleep-clock .tick.major { stroke: var(--ink-3); stroke-width: 1.5; }
.sleep-clock .hour { font-size: var(--text-micro); fill: var(--ink-3); }
.sleep-clock .arc { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; opacity: .85; }
.sleep-clock .bed { fill: var(--ink-1); } .sleep-clock .wake { fill: var(--surface-1); stroke: var(--ink-1); stroke-width: 2; }
.sleep-clock .span { font-size: var(--text-value); font-weight: 600; fill: var(--ink-1); } .sleep-clock .span-note { font-size: var(--text-chart-xs); fill: var(--ink-3); }
.sleep-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-3); margin: 0; }
.sleep-facts dt { font-size: var(--text-body); color: var(--ink-3); } .sleep-facts dd { margin: 0; font-size: var(--text-value); font-weight: 600; color: var(--ink-1); }
.sleep-clock-box { display: flex; justify-content: center; }
/* D187 수면 입력 BAR: 시각·총 시간은 막대 위, 권장량은 아래. 손잡이 누름 영역 44px. */
.sleep-bar-input-box { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--line-1);
  border-radius: var(--radius-surface); background: var(--surface-1); box-shadow: var(--shadow-raised); }
.sleep-bar-input { display: grid; gap: var(--space-3); }
.sleep-input-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.sleep-input-times > span { display: grid; gap: 3px; color: var(--ink-2); font-weight: 500; }
.sleep-input-times > span:last-child { text-align: right; }
.sleep-input-times b { color: var(--ink-1); font-size: clamp(var(--text-title), 5vw, var(--text-value)); font-variant-numeric: tabular-nums; }
.sleep-input-total { display: grid; justify-items: center; gap: 2px; padding-top: var(--space-1); color: var(--ink-2); text-align: center; }
.sleep-input-total-compare { display: flex; align-items: baseline; justify-content: center; gap: var(--space-2); }
.sleep-input-total-value { min-height: 1.2em; color: var(--info); font-size: var(--text-title); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sleep-input-recommended { color: var(--ink-2); font-size: var(--text-caption); font-weight: 600; white-space: nowrap; }
.sleep-midnight-note { margin: var(--space-1) 0 0; color: var(--warning-ink); font-size: var(--text-label); text-align: center; }
.sleep-input-rail { position: relative; min-height: 52px; touch-action: none; user-select: none; }
.sleep-input-track { position: absolute; left: 0; right: 0; top: 20px; height: 12px; overflow: hidden; border-radius: var(--radius-pill); background: var(--info-soft); }
.sleep-input-track::before, .sleep-input-track::after { content: ''; position: absolute; inset-block: 0; width: 1px; background: var(--line-2); }
.sleep-input-track::before { left: 25%; } .sleep-input-track::after { left: 75%; }
.sleep-input-fill { position: absolute; top: 1px; height: 10px; background: var(--info); }
.sleep-input-track.unset .sleep-input-fill { display: none; }
.sleep-input-handle { position: absolute; top: 4px; translate: -50% 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: grab; outline: none; z-index: 1; }
.sleep-input-handle::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--surface-1); border: 2px solid var(--info); box-shadow: var(--shadow-1); }
.sleep-input-handle.unset::after { border-style: dashed; border-color: var(--line-3); }
.sleep-input-handle:focus-visible::after { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.sleep-handle-icon.cat-icon { position: relative; z-index: 2; width: 22px; height: 22px; color: var(--info); }
.sleep-input-handle.unset .sleep-handle-icon { color: var(--ink-3); }
.sleep-bar-input .sleep-axis { color: var(--ink-3); font-size: var(--text-caption); font-variant-numeric: tabular-nums; }
@media (max-width: 360px) {
  .sleep-bar-input-box { padding: var(--space-3); }
  .sleep-input-times b { font-size: var(--text-title); }
}
/* D134 보호자 생활: 오늘 할 일(넛지 카드) — 줄마다 아이콘 + 짧은 상태, 한 것은 ✓ 색(글자에도 ✓), 대표 행동 하나. 최근 7일 점 */
.nudge-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.nudge-line { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-1); }
.nudge-line.done { color: var(--ink-2); }
.nudge-line svg { flex: 0 0 auto; color: var(--accent); }
.nudge-celebration { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: var(--space-2); padding: var(--space-2);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line-1)); border-radius: var(--radius-control); background: color-mix(in srgb, var(--accent) 10%, var(--surface-1)); }
.nudge-celebration-check { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-pill); background: var(--accent); color: var(--surface-1); }
.nudge-celebration-check svg { width: 24px; height: 24px; color: var(--surface-1); }
.nudge-celebration-title, .nudge-celebration-sub { margin: 0; }
.nudge-celebration-title { color: var(--accent-ink); font-weight: 600; }
.nudge-celebration-sub { margin-top: 2px; color: var(--ink-2); font-size: var(--text-caption); }
.nudge-celebration.is-new .nudge-celebration-check { animation: nudge-check-in 210ms ease-out; }
.nudge-card.is-newly-done > .body { animation: nudge-card-done 210ms ease-out; }
@keyframes nudge-check-in { 0% { transform: scale(.72); } 70% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes nudge-card-done { 0% { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 38%, transparent); } 100% { box-shadow: inset 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .nudge-celebration.is-new .nudge-celebration-check, .nudge-card.is-newly-done > .body { animation: none; } }
.nudge-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }   /* D164 두 버튼 나란히 */
.nudge-actions .btn { white-space: normal; text-align: center; }
.nudge-actions .btn.done { color: var(--accent-ink); }
@media (max-width: 340px) { .nudge-actions { grid-template-columns: minmax(0, 1fr); } }
.exercise-plan { display: grid; gap: var(--space-1); }
.exercise-plan-title { margin: 0; color: var(--ink-2); font-weight: 600; }
.exercise-plan-list { list-style: none; display: grid; gap: 0; margin: 0; padding: 0; border-top: 1px solid var(--line-1); }
.exercise-plan-list li { min-width: 0; padding: 6px var(--space-1) 6px calc(var(--space-1) + 14px); border-bottom: 1px solid var(--line-1); color: var(--ink-1); overflow-wrap: anywhere; position: relative; }
.exercise-plan-list li::before { content: ''; position: absolute; left: var(--space-1); top: 14px; width: 5px; height: 5px; border-radius: var(--radius-pill); background: var(--accent); }
.exercise-plan-more { margin: 0; }
.week-dots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-1); text-align: center; }
.week-dot { display: grid; justify-items: center; gap: 2px; }
.week-status-mark { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--accent); border-radius: var(--radius-pill); background: var(--surface-1); flex: 0 0 auto; }
.week-status-mark.done { background: var(--accent); }
.week-status-mark.part { background: linear-gradient(to right, var(--accent) 50%, var(--surface-1) 50%); }
.week-status-mark.none { border-color: var(--line-3); background: var(--surface-1); }
.week-dot.today .caption { color: var(--ink-1); font-weight: 600; }
.week-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; }
.week-legend-item { display: inline-flex; align-items: center; gap: var(--space-1); }
/* 수면의 질 5단계 막대(D59): 같은 너비 다섯 칸, 두께 12px·간격 4px, 고른 한 칸만 병원 녹색 + 테두리(진행률처럼 채우지 않음) */
.q-view, .q-input { display: grid; gap: 6px; min-width: 0; }
/* D67·D68: 왼쪽(자주 깨고 설쳐요) 얇게 → 오른쪽(깊게 잘 자요) 두껍게, 같은 너비·아래 기준선. 비선택은 모두 같은 중립색 */
.q-bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; align-items: end; }
.q-cell { position: relative; display: flex; align-items: flex-end; height: 18px; }
.q-seg { display: block; width: 100%; border-radius: var(--radius-mark); background: var(--surface-3); border: 1px solid var(--line-2); }
.q-cell.h0 .q-seg { height: 6px; } .q-cell.h1 .q-seg { height: 9px; } .q-cell.h2 .q-seg { height: 12px; }
.q-cell.h3 .q-seg { height: 15px; } .q-cell.h4 .q-seg { height: 18px; }
.q-cell.on .q-seg, .q-opt:has(input:checked) .q-seg { background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--brand); }
/* 선택 표식: 고른 칸 막대 위 작은 삼각형(▼) — 아래쪽 양끝 라벨과 막대 사이를 벌리지 않게 */
.q-cell.on::after, .q-opt:has(input:checked)::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--brand); border-bottom: 0; }
.q-cell.on::after { top: -10px; }
.q-view .q-bar { margin-top: 12px; }
.q-ends { margin-top: 5px; }                                            /* 양끝 라벨은 보이는 막대 바로 아래 */
/* D103 점수 줄(1~5): 칸 아래 가운데, 고른 칸은 강조색·굵게. 고른 단계는 '4점' 알약 + 문구 */
.q-nums { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-top: 4px; text-align: center;
  font-size: var(--text-label); font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.q-nums .on { color: var(--brand); font-weight: 600; font-size: var(--text-body-lg); }
.q-score { display: inline-block; padding: 0 8px; border-radius: var(--radius-pill); background: var(--brand); color: var(--ink-inverse); font-size: var(--text-body-lg); font-weight: 600; }
fieldset.quality.q-input { gap: 0; }                                          /* fieldset.quality의 8px 간격보다 우선 */
.q-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.q-title { font-weight: 600; color: var(--ink-1); }
.q-choice { font-size: var(--text-body-lg); color: var(--ink-3); }
.q-choice.on { font-size: var(--text-control-lg); font-weight: 600; color: var(--ink-1); }
.time-hint { font-size: var(--text-body); color: var(--ink-3); }
.q-ends { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--text-caption); color: var(--ink-3); word-break: keep-all; }
.q-ends span:last-child { text-align: right; }
.q-value { font-size: var(--text-control-lg); font-weight: 600; color: var(--ink-1); }
.sleep-facts dd .q-value { font-size: var(--text-title); }
/* 입력: 칸 전체가 누르는 곳(44px), 보이는 막대는 얇게. 라디오는 보이지 않지만 키보드·화면낭독기로 쓸 수 있게 남김 */
.q-opt { position: relative; display: flex; align-items: flex-end; height: 44px; min-height: 44px; padding-bottom: 0; cursor: pointer; border-radius: var(--radius-control); }
.q-opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.q-opt .q-seg { width: 100%; }
.q-opt:has(input:checked)::after { top: 4px; }
.q-opt:hover .q-seg { border-color: var(--brand); }
.q-opt:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.sleep-times .field { flex: 1 1 140px; }
fieldset.quality { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
fieldset.quality legend { font-weight: 600; color: var(--ink-1); margin-bottom: var(--space-2); }
.sub-title { font-size: var(--text-title); color: var(--ink-1); margin: var(--space-2) 0 0; }
.sleep-list .sleep-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--line-1); flex-wrap: wrap; }
.sleep-day { font-weight: 600; color: var(--ink-1); display: flex; gap: var(--space-2); align-items: center; }
.sleep-history { border-top: 1px solid var(--line-1); padding-top: var(--space-3); }
.sleep-history.cancelled .sleep-day { color: var(--ink-3); }
.sleep-clinic { border-top: 1px solid var(--line-1); padding-top: var(--space-3); }   /* D58 병원(의사) 입력 — 보호자 보고와 따로, 보기만 */
.sleep-clinic .sub-title { margin-top: 0; }
/* D62 지난 병원 측정일 이후 생활 기록: 기준 날짜 줄 → 수면 요약 → 이 기간 목록(펼침) → 전체 기록(펼침) */
.window-basis { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--surface-2); color: var(--ink-1); font-weight: 600; }
.life-window .sub-title { margin: var(--space-2) 0 0; }
.window-list summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--ink-2); font-weight: 600; }
.window-reports { margin: 0; padding-left: var(--space-4); display: grid; gap: 4px; }
.window-reports .muted { color: var(--ink-3); }
.window-outside { margin: 0; }
.sleep-full-toggle { border-top: 1px solid var(--line-1); padding-top: var(--space-2); }
.sleep-changes { margin: var(--space-1) 0 0; padding-left: var(--space-4); color: var(--ink-2); }
.sleep-kind { font-weight: 600; color: var(--ink-1); }
/* D110 → D166 수면 기록 한 줄(고정 열): 날짜(YYYY-MM-DD 고정폭 — 변경 이력은 종류) | 24시간 막대 | '9시간 20분 · 수면의 질 4' |
   작성 구분(아래 줄). 좁은 칸(컨테이너 30em 미만·폰 480px 이하)은 날짜 + 길이·질 한 줄 위, 막대는 아래 줄 전체 폭 — 겹침 없음, 줄여 쓰지 않음 */
.sleep-rec { display: grid; grid-template-columns: 6.6em minmax(5em, 1fr) 6.4em 10.4em; align-items: center; gap: 4px var(--space-3);
  grid-template-areas: "lead bar sum q" "by by by by"; min-width: 0; }
.rec-list, .sleep-changes, .sleep-list { container-type: inline-size; }
.sleep-rec .rec-lead { grid-area: lead; font-weight: 600; color: var(--ink-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sleep-rec .rec-bar { grid-area: bar; min-width: 0; }
.sleep-rec .rec-sum { grid-area: sum; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.sleep-rec .rec-q { grid-area: q; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--ink-2); }
.sleep-rec .rec-q:empty { display: none; }
.sleep-rec .rec-by { grid-area: by; overflow-wrap: anywhere; }
/* D173 수면의 질 작은 5칸 막대(입력 막대 D68과 같은 모양 단계: 6·8·10·12·14px, 아래 맞춤) — 채움 = 브랜드 색 */
.q-mini { display: inline-grid; grid-template-columns: repeat(5, 8px); gap: 2px; align-items: end; height: 14px; flex: none; }
.q-mini-cell { position: relative; display: block; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--radius-mark); background: var(--surface-3); }
.q-mini-cell.h0 { height: 6px; } .q-mini-cell.h1 { height: 8px; } .q-mini-cell.h2 { height: 10px; } .q-mini-cell.h3 { height: 12px; } .q-mini-cell.h4 { height: 14px; }
.q-mini-fill { position: absolute; top: 0; bottom: 0; left: 0; background: var(--brand); }
.q-mini-text { font-size: var(--text-caption); }
.sleep-rec .rec-by:empty { display: none; }
.sleep-rec.cancelled .rec-lead { color: var(--ink-3); }
.sleep-axis-row { display: grid; grid-template-columns: 6.6em minmax(5em, 1fr) 6.4em 10.4em; grid-template-areas: ". axis . ."; column-gap: var(--space-3);
  list-style: none; padding: 0; border: 0; }
.sleep-axis-row > .sleep-axis { grid-area: axis; }
@container (min-width: 30.01em) {
  .doctor-sleep-history .sleep-rec { grid-template-columns: 17fr 40fr 18fr 25fr; }
  .doctor-sleep-history .sleep-axis-row { grid-template-columns: 17fr 40fr 18fr 25fr; }
}
.q-chip { display: inline-block; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-ink);
  font-size: var(--text-body-lg); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
@container (max-width: 30em) {
  .sleep-rec { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "lead sum" "bar bar" "q q" "by by"; }
  .sleep-rec .rec-sum { white-space: normal; }
  .sleep-axis-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "axis"; }
}
@media (max-width: 480px) {                                         /* 컨테이너 질의가 없는 곳(요약 칸·접힘 제목)도 좁은 폭은 두 줄 */
  .sleep-rec { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "lead sum" "bar bar" "q q" "by by"; }
  .sleep-rec .rec-sum { white-space: normal; }
  .sleep-axis-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "axis"; }
}
.window-reports.rec-list, ul.sleep-changes { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: grid; gap: 0; }
.window-reports.rec-list > li, ul.sleep-changes > li { padding: 6px 0; border-bottom: 1px solid var(--line-1); }
details.sleep-history > summary .sleep-rec { display: inline-grid; width: calc(100% - 1.4em); vertical-align: middle; }
.sleep-list .sleep-row > .sleep-rec { flex: 1 1 18em; }
@media (max-width: 480px) { .sleep-summary { grid-template-columns: minmax(0, 1fr); } }

/* 월별 약제 확인 한 목록(TO_CLAUDE_B_MEDS_INLINE_HISTORY·MONTHLY_MEDS_VISUAL_REDESIGN): 한글 월 · 약제 · 상태, 펼친 행 안에서 편집.
   중립 배경·얇은 구분선, 분홍 외곽선 상자·밑줄 월 링크·좁은 약어 표 없음. 넓으면 한 줄, 좁으면 세로 */
.med-months { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-1); }
.med-row { border-bottom: 1px solid var(--line-1); }
/* ✓ 표: 넓은 카드는 기록 월 | 약제별 ✓(같은 크기·가운데) | 상태. 약제 이름은 열 제목에만(2줄까지 줄바꿈).
   카드 폭 기준(container query) — 의사 차트 오른쪽처럼 좁은 칸도 알맞게. 좁으면 월·상태 한 줄 + 약제별 '✓ 이름' 세로 줄 */
.med-matrix { container-type: inline-size; }
.med-head, .med-row-head { display: grid; align-items: center; gap: var(--space-2); }
.med-matrix.n2 .med-head, .med-matrix.n2 .med-row-head { grid-template-columns: 6.6rem repeat(2, minmax(0, 1fr)) 5.2rem; }
.med-matrix.n3 .med-head, .med-matrix.n3 .med-row-head { grid-template-columns: 6.6rem repeat(3, minmax(0, 1fr)) 5.2rem; }
.med-head { padding: 0 var(--space-1) var(--space-2); font-size: var(--text-label); font-weight: 500; color: var(--ink-2); }
.med-head .med-col { text-align: center; line-height: 1.3; word-break: keep-all; display: grid; justify-items: center; }
.med-col-total { font-size: var(--text-label); font-weight: 500; color: var(--ink-1); }                    /* 누적 개월: 숫자 선명, 이름은 기본 */
.med-totals { display: none; margin: 0 0 var(--space-2); font-size: var(--text-body-lg); color: var(--ink-2); }   /* 좁은 카드에서만(열 제목 대신) */
.med-totals b { color: var(--ink-1); }
.med-row-head { min-height: 48px; padding: var(--space-2) var(--space-1); color: var(--ink-2); }
.med-month { font-weight: 600; color: var(--ink-1); }
.med-cell { text-align: center; }
/* D76 직접 ✓/— 칸(의사): 칸 자체가 버튼 — 44×44 이상, 누르면 바로 저장. 저장 중에는 표 전체 잠금(aria-disabled — 초점 유지), 저장 중인 행은 흐리게 */
.med-toggle { min-width: 44px; min-height: 44px; border: 0; border-radius: var(--radius-control); background: none; font: inherit; cursor: pointer; justify-self: center; }
.med-toggle:hover { background: var(--surface-2); }
.med-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.meds-panel.saving .med-toggle, .meds-panel.saving .med-none { cursor: progress; }
.meds-panel.saving .med-toggle:hover { background: none; }
.med-row.saving .med-row-head { opacity: .55; }
.med-state.changed { color: var(--ink-1); }
.med-row-extra { padding: 0 var(--space-1) var(--space-2); }
.med-row-error { margin: 0 var(--space-1) var(--space-2); }
.med-cell .mark { display: inline-block; width: 1.2em; font-size: var(--text-value); font-weight: 600; color: var(--ink-3); }
.med-cell.on .mark { color: var(--brand); }
.med-cell-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.med-state { font-size: var(--text-body-lg); font-weight: 600; line-height: 1.3; word-break: keep-all; }
.med-state.carry { color: var(--ink-3); font-weight: 500; }            /* 이어짐 — 누락 경고가 아님 */
.med-state.none { color: var(--ink-3); }
.med-foot { padding-top: var(--space-2); }
.med-foot .caption { margin: 2px 0; }
@container (max-width: 400px) {
  .med-head { display: none; }
  .med-totals { display: block; }
  .med-matrix.n2 .med-row-head, .med-matrix.n3 .med-row-head { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .med-row-head .med-month { grid-column: 1; grid-row: 1; }
  .med-row-head .med-state { grid-column: 2; grid-row: 1; }
  .med-row-head .med-cell { grid-column: 1 / -1; text-align: left; display: flex; align-items: center; gap: 6px; font-size: var(--text-body-lg); }
  .med-row-head .med-toggle { justify-self: stretch; padding: 0 var(--space-1); }   /* 좁으면 줄 전체가 누름 영역 */
  .med-cell-name { position: static; width: auto; height: auto; clip: auto; overflow: visible; }
}
.med-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-top: var(--space-3); }
.med-find { display: flex; gap: var(--space-2); align-items: center; }
.med-find .input { min-height: 44px; }

/* D74 연결 신청 검토(linkreview.js, 간호·관리 공용): 보호자 정보 → 연결할 병원 아이 → 관계 → 거절|승인. 좁으면 세로, 누름 영역 44px */
.link-review .body { gap: var(--space-3); }
/* 신청 카드(D83③): 차트 번호 한 줄, 배지는 아래 줄에 모아 줄바꿈 */
.link-row .chart-num { white-space: nowrap; overflow-wrap: normal; font-variant-numeric: tabular-nums; }
.link-row .row-badges { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-1); }
.link-review .sub-title { margin: var(--space-2) 0 0; }
.link-review .body > .stack:empty { display: none; }                  /* 비슷한 번호 경고가 없을 때 빈 칸 간격 없음 */
.kv { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--space-2) var(--space-3); margin: 0; }
.kv dt { color: var(--ink-2); font-size: var(--text-body-lg); }
.kv dd { margin: 0; color: var(--ink-1); overflow-wrap: anywhere; }
.kv dd a { color: var(--accent-ink); display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }   /* 누름 영역 44px, 줄 간격은 그대로 */
.link-child { padding: var(--space-3); border: 1px solid var(--line-2); border-radius: var(--radius-surface); background: var(--surface-2); display: grid; gap: var(--space-1); }
.link-child .p-id { font-size: var(--text-title); }
.link-tools, .link-find .gap { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.link-find .input { max-width: 14rem; min-height: 44px; }
.link-register { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--line-1); border-radius: var(--radius-surface); }
.link-register .input { min-height: 44px; }
.link-review .check { min-height: 44px; }
.link-review .btn { min-height: 44px; }
.dup-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--line-1); }
.dup-row .grow { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.link-actions { gap: var(--space-2); }
@media (max-width: 480px) {
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .kv dd { margin-bottom: var(--space-2); }
  .link-actions { flex-direction: column-reverse; align-items: stretch; }
  .link-actions .btn { width: 100%; }
}

/* 측정 기록 표 → 좁은 화면 세로 카드(TO_CLAUDE_B_MOBILE_VERTICAL_UX_RESEARCH): 날짜 줄 → 칸 이름·값 줄 → 행동. 가로 스크롤 없음,
   값은 줄이거나 말줄임하지 않는다. 넓은 화면은 기존 표(비교용) 그대로 */
@media (max-width: 640px) {
  .table.stack-sm, .table.stack-sm tbody, .table.stack-sm tr { display: block; width: 100%; }
  .table.stack-sm thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table.stack-sm tr { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line-1); }
  .table.stack-sm td { display: flex; align-items: baseline; gap: var(--space-3); padding: 2px 0; border: 0; white-space: normal; }
  .table.stack-sm td[data-label]::before { content: attr(data-label); flex: 0 0 6.8em; font-size: var(--text-body); font-weight: 500; color: var(--ink-3); }
  .table.stack-sm td:first-child { font-weight: 600; color: var(--ink-1); }
  .table.stack-sm td.actions { justify-content: flex-start; gap: var(--space-2); padding-top: var(--space-2); }
  .table.stack-sm td.actions:empty { display: none; }
}
@media (max-width: 400px) { .table.compact:not(.stack-sm) th, .table.compact:not(.stack-sm) td { padding-left: 6px; padding-right: 6px; } }
/* 글자 200% 확대(390 폭 → 195px 상당) 같은 아주 좁은 폭: 작은 표도 세로 카드, 브랜드·병원명은 줄바꿈 허용(자르거나 숨기지 않음) */
@media (max-width: 300px) {
  .table.stack-xs, .table.stack-xs tbody, .table.stack-xs tr { display: block; width: 100%; }
  .table.stack-xs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table.stack-xs tr { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line-1); }
  .table.stack-xs td { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); padding: 2px 0; border: 0; white-space: normal; }
  .table.stack-xs td[data-label]::before { content: attr(data-label); flex: 0 0 5.5em; font-size: var(--text-body); font-weight: 500; color: var(--ink-3); }
  .table.stack-xs td:first-child { font-weight: 600; color: var(--ink-1); }
  .table.stack-xs caption { display: block; }                    /* 세로 카드가 된 표의 제목이 좁은 칸에 갇혀 쌓이지 않게(D128 집단 표) */
  /* D140 집단 목록: 글자 200% 등 아주 좁으면 이름 위·값 아래(이름이 눌려 쌓이지 않게) */
  .progress-group-list .pg-row { flex-direction: column; align-items: stretch; gap: 2px; }
  .progress-group-list .pg-val { align-items: flex-start; text-align: left; }
  .progress-group-list .pg-sub { white-space: normal; }
  .brand, .brand-hospital { white-space: normal; }
  .brand-sub { flex-wrap: wrap; }
  .brand-name { word-break: keep-all; overflow-wrap: anywhere; }   /* 한글은 띄어쓰기에서 줄바꿈 */
  .bone-age { flex-wrap: wrap; white-space: normal; }
  .panel > header { flex-wrap: wrap; }
  .panel > header .btn { white-space: normal; text-align: left; }
  .point-row { padding-top: var(--space-1); padding-bottom: var(--space-1); }
  .record-values { grid-template-columns: minmax(0, 1fr); }   /* 아주 좁은 폭: 키 아래 몸무게(칸 정렬 유지) */
  .cal-nav { flex-wrap: wrap; justify-content: center; }        /* 이전 달·제목·다음 달이 폭 안에 */
  .notice-card { flex-wrap: wrap; }                              /* D18 공지 카드: 제목은 다음 줄로(폭 안에) */
  .notice-card-title { flex-basis: 100%; order: 5; white-space: normal; }
  .sleep-facts { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }   /* 수면 요약: 이름 아래 값(질 막대·양끝 라벨이 폭 안에) */
  .sleep-facts dd { margin-bottom: var(--space-2); }
}   /* 4칸 작은 표는 320px에서도 폭 안에 */
/* D-파도3 4년치 차트 밀도(P3-③ — 그래프는 그대로, 여백·간격만): 폭이 되는 휴대폰(375~640)에서 카드형 표는 두 칸씩(6줄 → 4줄),
   메모 대화는 사이 간격 겹침 없앰·답글 칸은 평소 낮게(48px) 쓰거나 글이 있으면 96px */
@media (min-width: 375px) and (max-width: 640px) {
  .table.stack-sm:not(.progress-table) tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-3); }
  .table.stack-sm:not(.progress-table) td { gap: var(--space-2); }
  .table.stack-sm:not(.progress-table) td[data-label]::before { flex-basis: auto; }
  .table.stack-sm:not(.progress-table) td.actions { justify-content: flex-end; align-self: center; padding-top: 0; }   /* 행동은 마지막 줄 오른쪽 칸(입력 옆) */
}
@media (max-width: 640px) {                                         /* 직원 화면만(보호자 메시지는 그대로 — 대화가 적고 쓰기가 주 동작) */
  body:not(.guardian-app) .stack > .thread + .thread { margin-top: 0; }
  body:not(.guardian-app) .thread .reply { padding: var(--space-2); }
  body:not(.guardian-app) .thread .reply textarea.input { min-height: 48px; }
  body:not(.guardian-app) .thread .reply textarea.input:focus,
  body:not(.guardian-app) .thread .reply textarea.input[placeholder]:not(:placeholder-shown) { min-height: 96px; }
}

/* 가입 화면 시각 정돈(TO_CLAUDE_B_JOIN_VISUAL_REFINEMENT) — .join-page에만(다른 화면 크기 안 바꿈).
   옅은 중립 배경, 모바일은 큰 둥근 카드·이중 테두리 없이 본문만(최대 440px), 브랜드 26/700 + 병원명 15/650, 제목 22/650,
   입력 48px·16px·10px 모서리, 성별 2열·관계 3열 같은 폭, 한 아이일 때 바깥 상자 없음, 큰 파란 상자 없음 */
.join-page { background: var(--join-canvas); }
.join-page .card.measure-card { width: min(440px, 100%); gap: var(--space-6); }
.join-page .brand-name { font-weight: 600; color: var(--brand); }   /* 크기는 .brand-name(28 · 900px 이하 22 — D129 ⓐ) */
.join-page .brand-by { font-size: var(--text-micro); }
.join-page .brand-hospital { font-size: var(--text-control-lg); font-weight: 600; color: var(--brand); }
.join-page h1#title { font-size: var(--text-display); font-weight: 600; margin: var(--space-6) 0 0; }
.join-page .field > span { font-size: var(--text-body-lg); font-weight: 500; }
.join-page .input { min-height: 48px; font-size: var(--text-input); border-radius: var(--radius-control); border-color: var(--join-line); }
.join-page form.stack, .join-page .stack { gap: var(--space-5); }
.join-page .choice-group.n2 .choices, .join-page .choice-group.n3 .choices { display: grid; gap: 8px; }
.join-page .choice-group.n2 .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.join-page .choice-group.n3 .choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.join-page .choice { min-height: 48px; justify-content: center; padding: 0 var(--space-2); font-size: var(--text-body-lg); white-space: nowrap; }
/* ✓는 칸 왼쪽 위 모서리에(공간을 미리 잡아 두어 선택 때 글자가 밀리지 않음) — 320px 3열에서도 '기타 보호자' 한 줄 */
.join-page .choice-mark { position: absolute; top: 4px; left: 7px; width: auto; font-size: var(--text-body); }
.join-page .child-entry { border: 0; padding: 0; }
.join-page .child-entry > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.join-page .join-kids.many .child-entry { border-top: 1px solid var(--line-1); padding-top: var(--space-4); }
.join-page .join-kids.many .child-entry > legend { position: static; width: auto; height: auto; clip: auto; font-weight: 600; padding: 0; }
.join-page .btn.lg { min-height: 48px; }
/* JOIN-UX06: 작은 행동(다시 불러오기·아이 추가 신청·← 신청 현황·+ 아이 추가·바꾸기)도 누름 높이 44px — 글자 크기는 그대로 */
.join-page .btn { min-height: 44px; }                                   /* 가입 화면 모든 버튼(확인 코드 받기 포함, C B-R2-07) */
/* 동의 원문 보기(C NEO-01): 체크 줄 아래 작은 버튼, 펼치면 같은 화면에서 읽기 쉬운 폭·단계 제목. 표는 행마다 '칸 이름: 값' */
.consent-item { display: grid; gap: 2px; }
.consent-item .consent-more { justify-self: start; }
.consent-note { margin: 0; padding: var(--space-2) 0; color: var(--ink-2); }   /* 체크 없는 안내 줄(보호자 계정 기본정보) */
.consent-draft { padding: var(--space-3); border-left: 3px solid var(--line-2); background: var(--surface-2); border-radius: 0 var(--radius-control) var(--radius-control) 0;
  font-size: var(--text-body-lg); color: var(--ink-2); display: grid; gap: var(--space-2); }
.consent-draft p { margin: 0; }
.consent-doc { font-size: var(--text-control-lg); color: var(--ink-1); margin: var(--space-2) 0 0; }
.consent-title { font-size: var(--text-body-lg); color: var(--ink-1); margin: var(--space-1) 0 0; font-weight: 600; }
.consent-row { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 2px var(--space-2); margin: 0; padding: var(--space-2) 0; border-top: 1px solid var(--line-1); }
.consent-row dt { color: var(--ink-3); font-weight: 500; }
.consent-row dd { margin: 0; }
@media (max-width: 360px) { .consent-row { grid-template-columns: minmax(0, 1fr); } }
.join-page .join-back { min-height: 0; }
/* 한 화면 가입(D74): 보호자·아이·동의 구역 — 구역 안 칸 사이 20px, 구역 사이 32px, 구역 제목 17/700 */
.join-page .join-form { gap: var(--space-6); }
.join-page .join-section { display: grid; gap: var(--space-5); }
.join-page .join-h { margin: 0; font-size: var(--text-value); font-weight: 600; color: var(--ink-1); }
.join-page .join-kids { display: grid; gap: var(--space-5); }
.join-page .child-entry { display: grid; gap: var(--space-5); }
.join-page .join-back-btn { margin: var(--space-4) 0 0 calc(-1 * var(--space-2)); padding: 0 var(--space-2); font-size: var(--text-body-lg); }
.join-page .join-kid { border: 0; border-bottom: 1px solid var(--line-1); border-radius: 0; padding: var(--space-3) 0; }
.join-page .join-kid b { word-break: keep-all; }
@media (max-width: 480px) {
  .join-page.auth { padding: var(--space-4) 20px; }
  .join-page .card.measure-card { border: 0; box-shadow: none; background: transparent; padding: var(--space-2) 0; }
}
@media (max-width: 340px) { .join-page.auth { padding: var(--space-4) 16px; } }
/* D151 확산(C 배정 2026-10-02): 측정(/measure — 보호자 QR 입구. 직원 측정 입력은 staff.js라 무관)·가입(/join) 화면도 시안 B 톤.
   각 화면 body 클래스(measure-app·join-app) 범위 — 직원 화면 영향 0. 미색 바탕(아이 테마 바탕보다 우선 — 선택자 무게), 카드는 흰 면 +
   부드러운 그림자(테두리 없음, 둥글기 18), 키·몸무게 입력 값은 크게, 조용한 버튼은 강조색 글자. 가입 화면 휴대폰(480px 이하)은 가입 정돈안
   그대로 카드 없이 본문만(320px 관계 3칸 한 줄 유지) */
body.measure-app, body.join-app {
  --canvas: #f8f6f1; --join-canvas: #f8f6f1;
  --radius-surface: 16px;
  --shadow-1: 0 1px 2px rgba(20, 38, 35, .04), 0 8px 24px rgba(20, 38, 35, .06);
  --shadow-raised: var(--shadow-1);
}
body.measure-app .card.measure-card, body.join-app .card.measure-card { border: 0; box-shadow: var(--shadow-1); }
@media (max-width: 480px) { body.join-app .card.measure-card { box-shadow: none; } }
body.measure-app .measure-card .input[inputmode="decimal"] { font-size: var(--text-display); font-weight: 600; }   /* 숫자가 주인공(22 — 16 이상이라 휴대폰 확대 없음) */
body.measure-app .measure-card .btn.quiet, body.join-app .measure-card .btn.quiet { color: var(--accent-ink); font-weight: 600; }
body.measure-app .btn.primary, body.join-app .btn.primary { box-shadow: var(--shadow-1); }

/* ---------- D123 모바일 환경 개선 1차(측정 CLAUDE_B_MOBILE_CHECK.md, C 승인) ---------- */
/* M-7 작은 버튼을 빠르게 두 번 눌러도 확대되지 않게(손가락 확대·스크롤은 그대로) */
html { touch-action: manipulation; -webkit-tap-highlight-color: var(--tap-highlight); }   /* M-11 누름 반짝임: 회색 기본 대신 병원 녹색 옅게(토큰) */
/* M-6 가로 모드 노치: 본문 좌우를 안전 영역만큼(세로·넓은 화면은 0이라 그대로) */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
/* M-1 휴대폰·터치에서 입력 글꼴 16px — iOS가 칸을 누를 때 화면을 자동 확대하지 않게(가정 측정 칸과 같은 규칙) */
@media (max-width: 640px), (pointer: coarse) {
  .input, select.input, textarea.input, input[type=search], input[type=text], input[type=email], input[type=time], input[type=date], textarea { font-size: var(--text-input); }
}
/* M-4·M-8 높이가 낮은 화면(키보드가 화면을 줄인 경우·가로 모드): 구성 화면 위 바구니·아래 저장 줄은 붙이지 않고(입력 칸을 가리지 않게),
   머리 줄도 붙이지 않는다. 탭바는 조금 낮게(44px 이상 유지) */
@media (max-height: 560px) {
  .builder-steps, .builder-savebar { position: static; }
  .topbar { position: static; }
  .tabbar button { min-height: calc(48px + env(safe-area-inset-bottom)); gap: 2px; }
  .guardian-app .toast { bottom: calc(var(--tabbar-h, calc(49px + env(safe-area-inset-bottom))) + var(--space-2)); }
}

/* ---------- 화면 점검 즉시 묶음(CLAUDE_B_UI_AUDIT.md U-1·U-3·U-5·U-6·U-7, C 승인) — 노하우 §9 flex basis 0 쌓임 처방 ---------- */
/* U-1 밑줄 탭(값 탭 제외): 이름은 한 줄, 폭이 모자라면 다음 줄로(글자가 한 자씩 세로로 쌓이지 않게) */
.u-tabs:not(.u-tabs-values) { flex-wrap: wrap; column-gap: 22px; row-gap: 4px; }   /* 둘째 줄이 첫 줄 아래 1px(밑줄 겹침 여백)을 덮지 않게 */
.u-tabs:not(.u-tabs-values) button { white-space: nowrap; }
/* U-6 가정 측정 아이 고르기 버튼: 이름 옆 설명이 좁은 폭에서 줄바꿈(버튼 밖으로 넘치지 않게) */
.choose-child { white-space: normal; flex-wrap: wrap; }
@media (max-width: 260px) {
  .u-tabs:not(.u-tabs-values) { column-gap: 12px; }
  /* U-3 수면의 질 1~5: 다섯 칸 한 줄이면 한 칸 25px — 44px 칸이 들어가는 만큼씩 줄을 나눔 */
  .q-bar { grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); row-gap: 8px; }
  /* U-5 보호자 '아이 기록하기' 줄: 아이콘·간격이 글자 칸을 49px로 줄여 한두 자씩 쌓임 — 아이콘을 빼고 간격을 줄임 */
  .record-row { grid-template-columns: minmax(0, 1fr) 12px; gap: var(--space-2); padding-left: var(--space-2); padding-right: var(--space-2); }
  .record-row .cat-icon { display: none; }
  .record-state { grid-column: 1; }
  .record-row .chev { grid-column: 2; }
  /* U-7 세로 카드 표(진료 통계 치료 경과 등): 이름표 6.8em 고정이 값을 45px로 굶김 — 이름표를 값 위로 */
  .table.stack-sm td { display: block; }
  .table.stack-sm td[data-label]::before { display: block; }
}

/* ---- D124 모바일 파도2: 한국어 조판·폭 예산(노하우 §3) ----
   글자 규칙(구분점 앞 줄바꿈 없는 공백·낱말 잇기·숫자+단위)은 api.js typesetText. 여기서는 좁은 칸이 글자를 세로로 쌓지 않게 폭을 나눈다:
   칩·시각이 한 줄에 다 못 들면 다음 줄로(글자를 쪼개 쌓지 않음), 겹겹 여백은 아주 좁은 폭에서 줄여 본문에 폭을 준다.
   표 칸은 break-word(노하우 §3): anywhere는 칸의 최소 폭을 글자 하나로 줄여, 옆 칸이 넓어지면 이름이 '송서/아'로 갈린다. */
.table th, .table td { overflow-wrap: break-word; }
.thread > header { flex-wrap: wrap; row-gap: var(--space-1); }          /* 메모 머리: 칩·시각이 다음 줄로(칩 글자 세로 쌓임 방지) */
@media (max-width: 480px) {
  .sleep-facts dt:has(+ dd .q-view), .sleep-facts dd:has(.q-view) { grid-column: 1 / -1; }   /* 수면의 질 막대·양끝 문구는 줄 전체 폭 */
}
@media (max-width: 260px) {                                             /* 글자 200%·아주 좁은 폭: 바깥 여백을 줄이고 칸은 줄을 나눠 쓴다 */
  .main { padding-left: var(--space-2); padding-right: var(--space-2); }
  .panel > header, .panel > .body { padding-left: var(--space-3); padding-right: var(--space-3); }
  .nurse-followup-panel > header { padding-left: var(--space-4); padding-right: var(--space-4); }
  .thread > header { padding-left: var(--space-2); padding-right: var(--space-2); }
  .messages { padding: var(--space-2); }
  .msg { max-width: 100%; }
  .row { flex-wrap: wrap; }
  .row .grow { flex: 1 1 8em; }                                         /* 이름·설명 칸 최소 8em — 칩·값·버튼은 다음 줄로 */
  .appt-card { grid-template-columns: minmax(0, 1fr); }
  .appt-card .btn { grid-column: 1; grid-row: auto; justify-self: start; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .row.reading { grid-template-columns: minmax(0, 1fr); }               /* 골연령 판독: 예상키·버튼은 판독 이름 아래 줄로 */
  .stat-bars { padding-left: var(--space-2); padding-right: var(--space-2); }   /* 월 글자(10월 등)가 좁은 막대 칸 밖으로 나와도 화면 안에 */
  h2.with-icon, h3.with-icon { display: block; }                        /* 아이콘 뒤 제목이 낱말 단위로 이어서 줄바꿈 */
  h2.with-icon > svg, h3.with-icon > svg { display: inline-block; vertical-align: -3px; margin-right: var(--space-2); }
}
/* ---- D148 부모님과의 메모: 카카오톡형 대화 목록 → 대화방(threads.js, 직원 화면 — 간호·의사 차트·의사 질문 칸) ----
   목록 한 줄 = 종류 표식 · 제목(상대 · 종류 + 칩) · 미리보기 한 줄 · 오른쪽 시각과 안 읽은 수 원형 배지(빨강 계열 + 숫자).
   대화방 = 머리(상대·종류·⋯ 메뉴) · 글 영역(스크롤, 보호자 왼쪽 흰 말풍선 / 직원 오른쪽 브랜드 옅은 말풍선, 날짜 알약, 회색 기록 줄) ·
   아래 입력창(자라는 칸 최대 5줄 + 둥근 보내기 44px). 이 묶음은 파일 끝에 둔다(좁은 화면 메모 칸 규칙보다 뒤) */
.thread-list { display: grid; }
/* D150 간호·상담 아이 화면 아래 '상세 기록' — 작은 구역 제목 + 접힘 버튼들(childdetail.js). 펼치면 그 칸(패널)이 버튼 아래에 */
.child-detail { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.child-detail > .section-label { margin: var(--space-2) var(--space-1) 0; color: var(--ink-2); font-size: var(--text-body-lg); font-weight: 600; }
.child-detail .disclose-body > .panel, .child-detail .disclose-body > .stack { margin-top: var(--space-2); }
.thread-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; width: 100%;
  min-height: 64px; padding: var(--space-3) var(--space-2); border: 0; border-bottom: 1px solid var(--line-1); background: transparent;
  color: var(--ink-2); text-align: left; cursor: pointer; }
.thread-row:last-child { border-bottom: 0; }
.thread-row:hover { background: var(--surface-2); }
.thread-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.thread-kind { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--info-soft); color: var(--info); }
.thread-kind.memo { background: var(--brand-wash); color: var(--brand); }
.thread-kind svg { width: 20px; height: 20px; }
.thread-main { display: grid; gap: 2px; min-width: 0; }
.thread-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); color: var(--ink-1); font-size: var(--text-body-lg); }
.thread-preview { overflow: hidden; color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }
.thread-side { display: grid; justify-items: end; gap: var(--space-1); align-self: start; }
.thread-time { white-space: nowrap; }
.unread-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--danger); color: var(--ink-inverse);   /* D179 W4 '새 n' 배지와 같은 20 · 12/500 */
  font-size: var(--text-caption); font-weight: 500; line-height: 20px; text-align: center; }
.new-memo { display: grid; gap: var(--space-2); padding: 0; border-top: 0; }
.new-memo .gap { justify-content: flex-end; }
.btn.new-memo-open { justify-self: start; }
.thread-list-view > .thread-list { border: 1px solid var(--line-1); border-radius: var(--radius-surface); }
.thread-list-view > .thread-list:empty { display: none; }

.chat-room { display: grid; grid-template-columns: minmax(0, 1fr); }   /* 머리 칩이 칸 폭을 넓히지 않게 */
.chat-room > .room-head { flex-wrap: nowrap; padding-top: var(--space-1); padding-bottom: var(--space-1); }
.room-title { display: flex; flex: 1 1 0; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); min-width: 0; color: var(--ink-1); }
.room-title .chip { white-space: nowrap; }                          /* 좁은 화면: 칩은 통째로 다음 줄 */
.room-menu-box { position: relative; margin-left: auto; }
.btn.room-back { flex: none; padding: 0 var(--space-2); }
.btn.room-menu { min-width: 44px; min-height: 44px; font-size: var(--text-value); line-height: 1; }
.room-menu-list { position: absolute; top: 100%; right: 0; z-index: var(--z-raised); min-width: 13em; padding: var(--space-1);
  border: 1px solid var(--line-2); border-radius: var(--radius-control); background: var(--surface-1); box-shadow: var(--shadow-overlay); }
.room-menu-item { display: block; width: 100%; min-height: 44px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-control);
  background: transparent; color: var(--ink-1); text-align: left; cursor: pointer; }
.room-menu-item:hover, .room-menu-item:focus-visible { outline: none; background: var(--surface-3); }
.chat-room > .forward-memo { margin: 0; padding: var(--space-3); border-bottom: 1px solid var(--line-1); background: var(--surface-2); }
.chat-scroll { position: relative; }
.chat-log { display: grid; align-content: start; gap: var(--space-1); min-height: 200px; max-height: min(60vh, 560px); overflow-y: auto;
  overscroll-behavior: contain; padding: var(--space-3); background: var(--surface-2); }
.chat-earlier { justify-self: center; }
.chat-day { display: flex; justify-content: center; margin: var(--space-2) 0 var(--space-1); }
.chat-day span { padding: 2px var(--space-3); border-radius: var(--radius-pill); background: var(--surface-3); color: var(--ink-2); font-size: var(--text-caption); }
.chat-note { justify-self: center; max-width: 92%; margin: var(--space-1) 0; color: var(--ink-3); font-size: var(--text-caption); text-align: center; }
.msg-row { display: grid; gap: 2px; max-width: 82%; }
.msg-row.first { margin-top: var(--space-2); }
.msg-row.left { justify-self: start; justify-items: start; }          /* 왼쪽 = 상대(직원 화면은 보호자, 보호자 화면은 병원 — D152) */
.msg-row.right { justify-self: end; justify-items: end; }
.msg-row .by { color: var(--ink-2); font-size: var(--text-caption); }
.msg-line { display: flex; align-items: flex-end; gap: var(--space-1); max-width: 100%; }
.msg-row.left .msg-line { padding-left: 6px; }
.msg-row.right .msg-line { flex-direction: row-reverse; }
.msg-row.right .msg-line { padding-right: 6px; }
.bubble { min-width: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-surface); color: var(--ink-1);
  white-space: pre-wrap; overflow-wrap: anywhere; position: relative; isolation: isolate; }
.bubble::after { content: ""; position: absolute; bottom: 5px; width: 10px; height: 10px; background: inherit;
  transform: rotate(45deg); z-index: var(--z-base); }
.msg-row.left .bubble::after { left: -4px; border-bottom: 1px solid var(--line-1); border-left: 1px solid var(--line-1); }
.msg-row.right .bubble::after { right: -4px; }
.msg-row.left .bubble { border: 1px solid var(--line-1); background: var(--surface-1); }
.msg-row.right .bubble { background: var(--brand-wash); }
body.guardian-app .msg-row.right .bubble { background: var(--accent-soft); }   /* 보호자 화면: 내 글은 아이 테마 옅은 색 */
body.guardian-app .msg-row.left.co .bubble { border-color: transparent; background: var(--surface-3); }   /* 함께 보는 보호자 글: 옅은 회색(병원 글은 흰 면) */
body.guardian-app .msg-row.left.co .bubble::after { border: 0; }
body.guardian-app .thread-list-view > .thread-list { border: 0; background: var(--surface-1); box-shadow: var(--shadow-1); }   /* 시안 B 흰 면 */
body.guardian-app .new-question > .chat-compose { border: 0; border-radius: var(--radius-surface); box-shadow: var(--shadow-1); }   /* 새 질문 입력줄도 흰 면 */
.new-question-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--ink-1); }
.msg-time { flex: none; color: var(--ink-3); font-size: var(--text-micro); white-space: nowrap; }
.chat-new { position: absolute; bottom: var(--space-3); left: 50%; min-height: 44px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-pill);
  background: var(--ink-1); color: var(--ink-inverse); box-shadow: var(--shadow-overlay); transform: translateX(-50%); cursor: pointer; }
.chat-compose { padding: var(--space-2) var(--space-3); border-top: 1px solid var(--line-1); background: var(--surface-1); }
.reply.composer { display: flex; align-items: flex-end; gap: var(--space-2); padding: 0; border-top: 0; }
.chat-compose textarea.chat-input { flex: 1 1 auto; min-height: 44px; max-height: 8.5em; overflow-y: auto; resize: none; line-height: 1.5; }
.chat-send { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--accent);
  color: var(--ink-inverse); cursor: pointer; }
.chat-send[disabled] { background: var(--line-2); cursor: not-allowed; }
.chat-send[aria-busy="true"] { background: var(--accent); opacity: .68; }
.chat-send svg { width: 20px; height: 20px; color: currentColor; }
.chat-failed { margin-bottom: var(--space-2); color: var(--danger); }
.chat-readonly { padding: var(--space-3); }
@media (max-width: 640px) {
  .chat-log { max-height: calc(100dvh - 240px); }
  .msg-row { max-width: 92%; }
  body:not(.guardian-app) .chat-room .reply textarea.input.chat-input,
  body:not(.guardian-app) .chat-room .reply textarea.input.chat-input:focus,
  body:not(.guardian-app) .chat-room .reply textarea.input.chat-input[placeholder]:not(:placeholder-shown) { min-height: 44px; }
}
/* ---- D153·D154·D155 직원 아이 화면: 고정 아이 바·간호 넓은 화면 칸별 스크롤·성별 아이콘(pinned.js) ----
   --topbar-h = 앱 머리 실제 높이, --sticky-top = 바가 붙는 위치(넓으면 앱 머리 아래, 640px 이하는 앱 머리가 따라오지 않아 0),
   --child-head-h = 바 높이 — 차트 안 이동·입력 초점이 바에 가리지 않게 스크롤 여백으로 */
:root { --sticky-top: var(--topbar-h, 0px); --shadow-pinned: 0 8px 14px -10px rgba(16, 40, 36, .28); }
@media (max-width: 640px) { :root { --sticky-top: 0px; } }
html:has(.pinned-head) { scroll-padding-top: calc(var(--sticky-top) + var(--child-head-h, 0px) + var(--space-2)); }
.child-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4); border: 1px solid var(--line-1); border-radius: var(--radius-surface); background: var(--surface-1); }
.child-bar-main { display: grid; gap: var(--space-1); min-width: 0; }
.child-bar h1, .child-bar h2.child-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-section);
  overflow-wrap: anywhere; }
.child-identity .child-name { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.child-identity .child-age { flex: none; color: var(--ink-2); font-size: var(--text-body); font-weight: 600; line-height: 1.35; white-space: nowrap; }
.child-bar .facts { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.child-bar-main { flex: 1 1 0; }                                       /* D167 사실이 길어도 보관 단추는 오른쪽에(아래 줄로 밀리지 않게) */
.child-bar .facts .fact { color: var(--ink-2); }                        /* D167 의사 요약 줄: 골연령 · 예상키 변화(글자 사실, 칩 아님) */
.child-bar .facts .fact b { color: var(--ink-1); font-weight: 600; }
@media (max-width: 480px) { .child-bar .facts .fact-basis { display: none; } }
.child-bar .facts .fact-gain { white-space: nowrap; }                  /* '예상키 +6.1 cm'는 한 덩어리 */
.cards.cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* D167 현재 키 · 예상키 · 몸무게 한 줄(폰도 세 칸) */
@media (max-width: 480px) { .cards.cards-3 { gap: var(--space-2); } .cards.cards-3 > .card { padding: var(--space-3); } }
.xray-inline.xray-below-cards { display: none; margin-top: 0; }
@media (max-width: 480px) { .xray-inline.xray-in-card { display: none; } .xray-inline.xray-below-cards { display: block; } }
.pinned-head { position: sticky; top: var(--sticky-top); z-index: var(--z-raised); transition: box-shadow var(--motion-fast) var(--ease); }
.pinned-head.stuck { box-shadow: var(--shadow-pinned); }
.sex-icon { display: inline-flex; flex: none; }
.sex-icon svg { width: 18px; height: 18px; }
.row .title > .sex-icon { margin-left: var(--space-1); vertical-align: -3px; }   /* D179 목록 행 이름 옆 성별 아이콘(트레이너 오늘 내원) — 이름에 붙지 않게 */
.row .title > .sex-icon svg { width: 16px; height: 16px; }
.sex-icon.boy { color: var(--sex-m); }
.sex-icon.girl { color: var(--sex-f); }
@media (min-width: 901px) {
  /* 간호 넓은 화면: 목록 | 아이 칸이 각자 스크롤 — 페이지(body)는 움직이지 않음(높이 = 화면 − 배치 위쪽 − 아래 여백) */
  .nurse-layout { height: calc(100vh - var(--cols-top, 0px) - var(--space-5)); height: calc(100dvh - var(--cols-top, 0px) - var(--space-5)); align-items: stretch; }
  .nurse-layout > .nurse-list, .nurse-layout > .nurse-work { min-height: 0; overflow-y: auto; overscroll-behavior: contain; align-content: start; }
  .nurse-layout > .nurse-work { --sticky-top: 0px; scroll-padding-top: calc(var(--child-head-h, 0px) + var(--space-2)); }
}
/* D156 파기 대기 목록 화면: 설명 줄 여백(카드 본문이 flush), 관리 화면의 '파기 대기 … n명 ›' 한 줄 */
.waiting-panel .waiting-desc { padding: var(--space-3) var(--space-4) 0; }
.waiting-line { margin-top: var(--space-2); border-top: 1px solid var(--line-1); }
.due-row:has(> .row) { padding: 0; }                                  /* D156 행 전체가 버튼이면 바깥 여백 없이(버튼이 행 여백) */
.due-row > .row { flex: 1 1 100%; }
/* D166 수면 기록 표시 = 24시간 가로 막대(정오 → 다음 날 정오, sleep.js bar). 줄 = 날짜 | 막대 | '9시간 20분 · 질 4', 여러 줄은 같은 축 */
.sleep-bar { display: block; width: 100%; height: 12px; }
.sleep-bar.big { height: 18px; }
.sleep-bar .track { fill: var(--surface-3); }
.sleep-bar .tick { stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sleep-bar .tick.mid { stroke: var(--line-3); }
.sleep-bar .fill { fill: var(--kind-sleep); }
/* 눈금 글자는 막대 눈금 자리(0·25·50·75·100%)에 — 양 끝은 안쪽 정렬(겹침·넘침 없음) */
.sleep-axis { position: relative; height: 1.3em; color: var(--ink-3); font-size: var(--text-micro); font-variant-numeric: tabular-nums; }
.sleep-axis > span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.sleep-axis > span:nth-child(1) { left: 0; transform: none; } .sleep-axis > span:nth-child(2) { left: 25%; }
.sleep-axis > span:nth-child(3) { left: 50%; } .sleep-axis > span:nth-child(4) { left: 75%; }
.sleep-axis > span:nth-child(5) { left: 100%; transform: translateX(-100%); }
.sleep-bar-summary { display: grid; gap: var(--space-1); }
.sleep-bar-len { margin: 0; color: var(--ink-1); font-size: var(--text-value); font-weight: 600; }
.sleep-summary { grid-template-columns: minmax(0, 1fr); }

/* The compact child/note area scrolls away; the three measured menus stay usable. */
.doctor-child-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--space-3); align-items: start; min-width: 0; }
.doctor-child-summary > * { min-width: 0; margin: 0; }
.doctor-child-summary .child-bar { align-items: start; }
.doctor-group-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); position: sticky; top: var(--sticky-top); z-index: var(--z-raised); background: var(--canvas); padding-block: var(--space-2); }
.doctor-group-nav .doctor-section-button { min-width: 0; border-color: var(--line-1); overflow-wrap: anywhere; text-align: center; background: var(--surface-1); }
.doctor-group-nav .doctor-section-button[aria-current="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.doctor-detail { --child-head-h: 0px; scroll-padding-top: calc(var(--doctor-nav-h, 0px) + var(--space-2)); }
.doctor-task, .doctor-top-note { scroll-margin-top: var(--space-2); }
.doctor-task { min-width: 0; display: grid; gap: var(--space-3); }
.doctor-task-title { margin: 0; font-size: var(--text-section); color: var(--ink-1); }
.doctor-top-note { min-width: 0; position: relative; }
.doctor-note-preview { white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 0; }
.doctor-note-body { white-space: pre-wrap; overflow-wrap: anywhere; padding-block: var(--space-3); }
.doctor-note-full summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--accent-strong); }
.doctor-global-notice { display: flex; justify-content: flex-end; margin-bottom: var(--space-2); }
.doctor-care-inbox { width: min(38rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto; padding: var(--space-4); border: 1px solid var(--line-1); border-radius: var(--radius-surface); background: var(--surface-1); color: var(--ink-1); }
.doctor-care-inbox .chart-name { white-space: normal; overflow-wrap: anywhere; }
.doctor-care-inbox .count, .doctor-care-inbox .chip { flex: none; white-space: nowrap; }
.doctor-care-inbox::backdrop { background: rgba(16, 40, 36, .28); }
.doctor-inbox-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.doctor-inbox-head h2 { font-size: var(--text-section); }
.doctor-workspace .child-identity { overflow-wrap: anywhere; min-width: 0; }
.doctor-workspace .chart-name { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 1099px) {
  html:has(#pane-doctor:not([hidden]) .doctor-workspace[data-view="detail"]) { scroll-padding-top: calc(var(--sticky-top) + var(--doctor-nav-h, 0px) + var(--space-2)); }
}
.special-note-document .body { min-width: 0; }
.special-note-preview { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.special-note-body { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.special-note-body p { margin: .25rem 0 .75rem; }
.special-note-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--ink-2); }
.special-note-row-meta .gap { margin-left: auto; }
.special-note-date { font-size: var(--text-caption); }
.special-note-read-block.completed p { text-decoration: line-through; color: var(--ink-2); }
.special-note-editor-block.completed textarea { text-decoration: line-through; }
.special-note-dialog { width: min(52rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto; padding: var(--space-4); border: 1px solid var(--line-1); border-radius: var(--radius-surface); background: var(--surface-1); color: var(--ink-1); }
.special-note-dialog::backdrop { background: rgba(16, 40, 36, .35); }
.special-note-dialog-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.special-note-dialog-head h2 { margin: 0; font-size: var(--text-section); }
.special-note-status { color: var(--ink-3); font-size: .85rem; }
.special-note-editor { border: 1px solid var(--line-1); border-radius: var(--radius-surface); padding: .75rem; background: var(--surface-1); }
.special-note-editor-block + .special-note-editor-block { margin-top: .75rem; }
.special-note-editor textarea.special-note-input { display: block; width: 100%; box-sizing: border-box; border: 0; border-radius: 0; resize: none; overflow: hidden; min-height: 72px; line-height: 1.6; background: transparent; }
.special-note-editor textarea.special-note-input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.special-note-actions { display: flex; flex-wrap: wrap; align-items: start; gap: .5rem; margin-block: .75rem; }
.special-note-actions .btn, .special-note-full summary, .special-note-history-row { min-height: 44px; }
.special-note-full { flex: 1 1 100%; min-width: 0; }
.special-note-full summary { cursor: pointer; display: flex; align-items: center; text-decoration: underline; }
.special-note-comparison > div { padding: .75rem; margin-block: .5rem; border: 1px solid var(--line-1); }
.special-note-history-list { display: grid; gap: .5rem; }
.special-note-history-row { white-space: normal; text-align: left; overflow-wrap: anywhere; }
.special-note-message:empty { display: none; }

/* Trainer assessment and explicit program steps. */
.posture-card header { flex-wrap: wrap; gap: var(--space-2); }
.posture-checks, .posture-summary { display: grid; gap: var(--space-2); min-width: 0; }
.posture-check { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); align-items: center; gap: var(--space-2); min-height: 44px; padding: var(--space-2); border: 1px solid var(--line-1); border-radius: var(--radius-control); overflow-wrap: anywhere; cursor: pointer; }
.posture-check input { width: 1.25rem; height: 1.25rem; margin: 0; }
.posture-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); }
.posture-item .chip, .posture-summary .chip { white-space: normal; overflow-wrap: anywhere; justify-self: start; }
.posture-item .btn { margin-left: 0; min-height: 44px; }
.posture-summary-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); }
.posture-edit, .builder-stage, .builder-final-group { min-width: 0; }
.builder-step { min-height: 44px; white-space: normal; overflow-wrap: anywhere; }
.builder-next { min-height: 44px; justify-self: start; }
.builder-final-group { padding: var(--space-3); border: 1px solid var(--line-1); border-radius: var(--radius-surface); background: var(--surface-1); }
.builder-final-group + .builder-final-group { margin-top: var(--space-3); }
.builder-final-group .rec-title { margin: 0; }
.builder-final-group .builder-chip-remove { white-space: normal; overflow-wrap: anywhere; text-align: left; }
.builder-chip-remove .caption { display: block; margin-top: var(--space-1); }
.builder-outside { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.builder-chip > .builder-move { grid-row: 1; }
.builder-chip > .builder-move:nth-last-child(2) { grid-column: 2; }
.builder-chip > .builder-move:last-child { grid-column: 3; }
.builder-row .grow, .builder-preset, .builder-final-group .muted { overflow-wrap: anywhere; min-width: 0; }
.tag-check { min-height: 44px; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .posture-item { grid-template-columns: minmax(0, 1fr) auto; }
  .posture-item > .caption { grid-column: 1; grid-row: 2; }
  .posture-item > .btn { grid-column: 2; grid-row: 1 / 3; }
  .posture-summary-row { grid-template-columns: minmax(0, 1fr); }
  .builder-steps, .builder-savebar { position: static; }
  .builder-step { flex: 1 1 40%; }
}

.builder .btn.builder-step, .builder .btn.builder-next, .builder .btn.builder-move, .posture-card .posture-item .btn { min-height: 44px; height: auto; }

.posture-card .btn { white-space: normal; overflow-wrap: anywhere; height: auto; min-height: 44px; }
.posture-card fieldset, .posture-card .field, .preset-tags { min-width: 0; }

.builder .builder-chip-remove { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; min-height: 44px; height: auto; }
.builder-chip-text { min-width: 0; display: grid; gap: var(--space-1); }
.builder .builder-savebar { position: static; }

/* SG-TRAINER-BUILDER-HIERARCHY: context, stage workspace, selected result. */
.builder { container-type: inline-size; }
.builder .builder-context { padding: var(--space-3); border: 1px solid var(--line-1); border-radius: var(--radius-surface); background: var(--surface-2); display: grid; gap: var(--space-2); }
.builder .builder-child-context { font-size: var(--text-body-lg); font-weight: 600; margin: 0; overflow-wrap: anywhere; }
.builder .builder-selection-summary { justify-content: space-between; align-items: center; flex-wrap: wrap; }
.builder .builder-selected-count { font-weight: 600; color: var(--accent-ink); }
.builder .builder-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); }
.builder .builder-steps li { min-width: 0; display: flex; }
.builder .builder-step { width: 100%; min-height: 64px; padding: var(--space-2); text-align: left; justify-content: flex-start; border: 1px solid var(--line-2); border-radius: var(--radius-control); line-height: 1.5; }
.builder .builder-step[aria-current="step"] { border: 2px solid var(--accent); box-shadow: inset 0 -3px var(--accent); }
.builder .builder-step.skipped { color: var(--ink-2); background: var(--surface-2); border-style: dashed; border-color: var(--line-2); }
.builder .builder-step.skipped[aria-current="step"] { border-color: var(--accent); }
.builder .builder-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.builder .builder-candidates, .builder .builder-result { min-width: 0; }
.builder .builder-stage-title { font-size: var(--text-section); padding-bottom: var(--space-2); border-bottom: 2px solid var(--accent); }
.builder .builder-source-section { border: 1px solid var(--line-1); border-radius: var(--radius-surface); padding: var(--space-3); background: var(--surface-1); display: grid; gap: var(--space-2); min-width: 0; }
.builder .builder-source-section > .rec-title { margin: 0; }
.builder .builder-result { padding: var(--space-3); border: 2px solid var(--accent-soft); border-radius: var(--radius-surface); background: var(--surface-2); }
.builder .builder-result .builder-final { border-top: 0; padding-top: 0; }
.builder .builder-result .builder-basket-title { scroll-margin-top: 11rem; }
.builder .builder-result .builder-final-group { padding: var(--space-2) 0; border-bottom: 1px solid var(--line-1); }
.builder .builder-savebar { margin-top: var(--space-3); padding-top: var(--space-3); }
.builder .builder-result .btn, .builder .builder-preset header { white-space: normal; overflow-wrap: anywhere; }
.builder .builder-preset header { flex-wrap: wrap; }
@container (min-width: 58rem) {
  .builder .builder-workspace { grid-template-columns: minmax(0, 1.6fr) minmax(20rem, 1fr); }
}
@media (max-width: 600px), (max-height: 600px) {
  .builder .builder-steps { position: static; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); }
  .builder .builder-result .builder-basket-title { scroll-margin-top: var(--space-3); }
}

/* The integrated trainer panel has less room than the standalone builder.
   Keep names above the two 44px reorder controls on narrow screens. */
@media (max-width: 600px) {
  #pane-trainer .builder .btn { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
  #pane-trainer .builder-chip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "item item" "outside outside" "up down"; }
  #pane-trainer .builder-chip > .builder-chip-remove { grid-area: item; }
  #pane-trainer .builder-chip > .builder-outside { grid-area: outside; }
  #pane-trainer .builder-chip > .builder-move:nth-last-child(2) { grid-area: up; }
  #pane-trainer .builder-chip > .builder-move:last-child { grid-area: down; }
}
@media (max-width: 480px) {
  #pane-trainer .sleep-facts { grid-template-columns: minmax(0, 1fr); }
  #pane-trainer .sleep-facts dd { margin-bottom: var(--space-2); }
}
@media (max-width: 360px) {
  #pane-trainer .u-tabs-values { flex-wrap: wrap; }
  #pane-trainer .u-tabs-values button { flex-basis: 100%; }
  #pane-trainer .sleep-rec { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lead" "sum" "bar" "q" "by"; }
  #pane-trainer .sleep-rec .rec-sum { text-align: left; }
}

.builder-preset-item { display: grid; gap: var(--space-1); min-width: 0; overflow-wrap: anywhere; }
.builder-preset-item .chip { justify-self: start; white-space: normal; height: auto; }

/* Trainer overview: finite visible rows, explicit unknown states, no fixed text clipping. */
.trainer-bundle-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.trainer-bundle-compare-card, .trainer-bundle-tools, .builder-preset-intent { min-width: 0; overflow-wrap: anywhere; }
.trainer-bundle-compare-card { border: 1px solid var(--line, #d9e1df); padding: 12px; border-radius: 8px; }
.trainer-bundle-items > li { min-width: 0; overflow-wrap: anywhere; }
.trainer-bundle-tools .btn, .builder-preset-intent .btn { min-height: 44px; }
@media (max-width: 599px) { .trainer-bundle-compare { grid-template-columns: minmax(0, 1fr); } .lib-row:has(.trainer-bundle-tools) { flex-wrap: wrap; } .trainer-bundle-tools { flex-basis: 100%; } }
.trainer-overview, .trainer-program-workspace, .trainer-day-detail { min-width: 0; }
.trainer-overview { container-type: inline-size; }
.trainer-overview-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; min-width: 0; }
.trainer-exercise-overview, .trainer-sleep-overview { container-type: inline-size; min-width: 0; }
.trainer-overview button, .trainer-overview button.btn, .trainer-bundle-compare button, .trainer-bundle-items button { min-height: 44px; }
.trainer-overview .caption { font-size: 14px; line-height: 1.55; }
@container (max-width: 899px) { .trainer-overview-cards { grid-template-columns: minmax(0, 1fr); } }
.trainer-month-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.trainer-month-nav .btn, .trainer-program-controls .btn, .trainer-count-day, .trainer-sleep-pick { min-height: 44px; }
.trainer-count-bars { display: flex; align-items: stretch; gap: 4px; padding: 0; margin: 0; list-style: none; }
.trainer-count-bars > li { flex: 1; min-width: 44px; }
.trainer-count-day { display: flex; flex-direction: column; align-items: stretch; width: 100%; min-width: 44px; border: 1px solid var(--line, #d9e1df); border-radius: 6px; background: transparent; padding: 4px; color: inherit; cursor: pointer; }
.trainer-count-day:focus-visible { outline: 3px solid #12665b; outline-offset: 2px; }
.trainer-count-day[aria-pressed="true"] { background: #e7f1ec; border-color: #12665b; box-shadow: inset 0 -3px #12665b; }
.trainer-sleep-report.is-selected { background: #e7f1ec; border-left: 3px solid #12665b; padding-left: 8px; }
.trainer-sleep-pick[aria-pressed="true"] { font-weight: 700; color: #12665b; }
.trainer-bar-space { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 160px; border-bottom: 1px solid #75857e; background: repeating-linear-gradient(to top, transparent 0, transparent calc(25% - 1px), #e4eae7 calc(25% - 1px), #e4eae7 25%); }
.trainer-count-fill { display: block; width: 65%; background: #29796c; border-radius: 3px 3px 0 0; }
.trainer-bar-symbol { align-self: center; font-size: 20px; }
.trainer-bar-date { font-weight: 700; padding-top: 6px; }
.trainer-bar-count { overflow-wrap: anywhere; font-size: 14px; line-height: 1.5; }
.trainer-sleep-latest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.trainer-latest-source { min-width: 0; padding: 12px; background: #f3f7f5; border-radius: 8px; }
.trainer-sleep-ranges { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.trainer-sleep-report { display: grid; grid-template-columns: minmax(140px, 180px) minmax(0, 1fr); column-gap: 12px; border-bottom: 1px solid #e4eae7; padding-bottom: 8px; min-width: 0; }
.trainer-sleep-report > .caption { grid-column: 2; margin: 2px 0; overflow-wrap: anywhere; }
.trainer-sleep-range { position: relative; min-height: 28px; align-self: center; background: #edf2ef; border-radius: 4px; margin: 0 4px; }
.trainer-sleep-month-graph { display: block; width: 100%; height: 216px; background: #f5f8f6; }
.trainer-sleep-chart { display: grid; grid-template-columns: 48px minmax(0, 1fr); }
.trainer-sleep-clock-axis { position: relative; height: 216px; font-size: 14px; }
.trainer-sleep-clock-axis span { position: absolute; left: 0; transform: translateY(-50%); }
.trainer-sleep-month > .trainer-month-day-axis { margin-left: 48px; }
.trainer-sleep-month-graph .trainer-sleep-report { display: inline; cursor: pointer; }
.trainer-sleep-month-graph .is-selected .trainer-sleep-hit { stroke: #174e45; stroke-width: 2; vector-effect: non-scaling-stroke; }
.trainer-sleep-month-graph .trainer-sleep-report:focus-visible .trainer-sleep-hit { stroke: #174e45; stroke-width: 3; }
.trainer-month-day-axis { position: relative; height: 24px; font-size: 14px; }
.trainer-month-day-axis span { position: absolute; transform: translateX(-50%); }
.trainer-date-select, .trainer-report-select { min-height: 44px; width: 100%; min-width: 0; }
.trainer-count-bars { gap: 1px; }
.trainer-count-bars > li { min-width: 0; }
.trainer-count-day { min-width: 0; padding: 0; border-radius: 2px; }
.trainer-count-day[data-state="zero"] .trainer-bar-space { border-bottom: 3px solid #29796c; }
.trainer-count-day[data-state="no_plan"] .trainer-bar-space, .trainer-count-day[data-state="empty_plan"] .trainer-bar-space { background: #f3f1ec; }
.posture-inline { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; min-width: 0; width: 100%; }
.posture-inline-choices { display: flex; flex-wrap: wrap; gap: 6px; flex: 0 0 auto; width: max-content; min-width: 0; max-width: 100%; }
.posture-inline .btn, .posture-inline input { min-height: 44px; }
.posture-inline .btn { white-space: normal; overflow-wrap: anywhere; max-width: 100%; padding-block: 10px; }
.posture-inline-date-save { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; flex: 1 1 min-content; min-width: 0; max-width: 100%; }
.posture-inline-date { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; max-width: 100%; }
.posture-inline-date > span { white-space: nowrap; }
.posture-inline-date input { width: 160px; min-width: 0; max-width: 100%; flex: 0 0 auto; }
.posture-inline-secondary { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; flex-basis: 100%; min-width: 0; }
.posture-inline-state { flex-basis: 100%; min-width: 0; }
.posture-inline-choice[aria-pressed="true"] { border-color: #12665b; background: #e7f1ec; box-shadow: inset 0 -3px #12665b; }
.posture-inline .gap { display: flex; flex-wrap: wrap; gap: 8px; }
.posture-inline .gap > * { min-width: 0; max-width: 100%; }
.builder-save-state, .builder-change-review { padding: 8px; background: #f3f7f5; overflow-wrap: anywhere; }
.builder-chip .input { width: 100%; min-width: 0; grid-column: 1 / -1; min-height: 44px; }
.trainer-bar-space { height: 180px; }
.trainer-bar-count { display: none; }
.trainer-bar-date { display: none; }
.trainer-month-day-axis span { white-space: nowrap; }
.builder-target { grid-column: 1 / -1; }
.trainer-finite-rows > li, .trainer-day-item { overflow-wrap: anywhere; }
@media (max-width: 599px) {
  .trainer-sleep-latest { grid-template-columns: minmax(0, 1fr); }
  .trainer-sleep-report { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .trainer-sleep-report > .caption { grid-column: 1; }
  .trainer-sleep-range { width: auto; min-height: 32px; }
}
@container (max-width: 599px) {
  .trainer-sleep-latest { grid-template-columns: minmax(0, 1fr); }
  .trainer-sleep-report { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .trainer-sleep-report > .caption { grid-column: 1; }
}

/* Requirement v3 revise1: report-day rows, horizontal clocks and explicit percentage scale. */
.trainer-sleep-chart { grid-template-columns: 40px minmax(0, 1fr); gap: 0 8px; }
.trainer-sleep-clock-axis { position: relative; height: 24px; font-size: 14px; }
.trainer-sleep-clock-axis span { position: absolute; top: 0; left: auto; transform: translateX(-50%); white-space: nowrap; }
.trainer-sleep-clock-axis span:first-child { transform: none; }
.trainer-sleep-clock-axis span:last-child { transform: translateX(-100%); }
.trainer-sleep-date-axis { position: relative; font-size: 14px; }
.trainer-sleep-date-axis span { position: absolute; right: 4px; transform: translateY(-50%); }
.trainer-count-chart { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; align-items: start; }
.trainer-count-percent-axis { height: 180px; display: flex; flex-direction: column; justify-content: space-between; font-size: 14px; line-height: 1; }
.trainer-count-chart .trainer-count-bars { margin: 0; }
.trainer-count-plot > .trainer-month-day-axis { margin-left: 48px; }
.trainer-count-legend { font-size: 14px; line-height: 1.6; }
.trainer-zero-symbol { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); font-size: 12px; line-height: 1; }
/* Hospital publishing surfaces: preserve text at narrow widths and natural text zoom. */
.news-summary .body, .news-detail .body, .promo-management .body { min-width: 0; }
.news-title, .promo-snapshot, .promo-state, .promo-conflict { overflow-wrap: anywhere; }
.news-summary .news-body { margin: 0; white-space: pre-wrap; }
.news-summary .btn, .news-detail .btn, .promo-management .btn, .notice-card-box > .btn { min-height: 44px; height: auto; white-space: normal; }
.promo-list { list-style: none; padding: 0; margin: 0; }
.promo-row { padding: 16px 0; border-bottom: 1px solid var(--line-1); min-width: 0; }
.promo-snapshot { padding: 12px; border: 1px solid var(--line-1); border-radius: 12px; }
.promo-snapshot h4 { margin: 0; }
.promo-actions { align-items: stretch; }
.promo-management input, .promo-management textarea, .promo-management select { max-width: 100%; min-width: 0; }
.news-media { min-width: 0; }
.promo-reviewer-entry, .promo-reviewer-back, .promo-reviewers .btn { min-height: 44px; height: auto; white-space: normal; }
.promo-reviewers .body, .promo-reviewer-row, .promo-reviewer-actions { min-width: 0; }
.promo-reviewer-list { padding: 0; margin: 0; list-style: none; }
.promo-reviewer-row { padding: 16px 0; border-bottom: 1px solid var(--line-1); overflow-wrap: anywhere; }
.promo-reviewer-row h3, .promo-reviewer-row p { margin: 0; }
.promo-reviewer-actions { align-items: stretch; }
.promo-reviewer-state:focus, .promo-reviewer-entry:focus-visible, .promo-reviewer-back:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Trainer final result: full names and goals beside separately named actions. */
.builder .builder-result { container-type: inline-size; }
.builder .builder-result .builder-final-row,
#pane-trainer .builder .builder-result .builder-final-row { grid-template-columns: 2rem minmax(0, 1fr) auto; grid-template-areas: none; align-items: start; gap: var(--space-2); }
.builder .builder-result .builder-final-number { padding-top: var(--space-1); }
.builder .builder-result .builder-final-main { display: grid; gap: var(--space-2); min-width: 0; }
.builder .builder-result .builder-final-name { font-weight: 600; overflow-wrap: anywhere; }
.builder .builder-result .builder-target { min-width: 0; margin: 0; gap: var(--space-1); }
.builder .builder-result .builder-target input { min-width: 0; width: 100%; }
.builder .builder-result .builder-outside { grid-column: auto; grid-row: auto; min-width: 0; overflow-wrap: anywhere; }
.builder .builder-result .builder-final-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-1); min-width: 0; }
.builder .builder-result .builder-final-actions .btn { min-width: 44px; min-height: 44px; height: auto; }
.builder .builder-result .builder-final-actions .builder-chip-remove { display: inline-flex; padding: var(--space-1) var(--space-2); }
.builder .builder-result .builder-edit-feedback,
.builder .builder-result .builder-save-state,
.builder .builder-result .builder-keep-notice,
.builder .builder-result .builder-savebar,
.builder .builder-result .builder-name { min-width: 0; overflow-wrap: anywhere; }
.builder .builder-result .builder-name > .gap { flex-wrap: wrap; }
@container (max-width: 36rem) {
  .builder .builder-result .builder-final-row,
  #pane-trainer .builder .builder-result .builder-final-row { grid-template-columns: auto minmax(0, 1fr); }
  .builder .builder-result .builder-final-actions { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .builder .builder-result .builder-final-row,
  #pane-trainer .builder .builder-result .builder-final-row { grid-template-columns: auto minmax(0, 1fr); }
  .builder .builder-result .builder-final-actions { grid-column: 1 / -1; }
}

/* Guardian compact slice: preserve input flow, secondary public estimates and existing chrome. */
.guardian-app .guardian-top { position: sticky; top: 0; flex-wrap: wrap; gap: var(--space-2); }
body.guardian-app .guardian-top { min-height: 0; padding: var(--space-2) var(--space-3); }
.guardian-app .guardian-top .who { display: grid; grid-template-columns: minmax(0, 1fr) 44px auto; flex: 1 1 20rem; min-width: 0; gap: var(--space-1); }
.guardian-app .guardian-top .child-switch { min-width: 0; max-width: 100%; }
.guardian-app .guardian-top #child-select { min-width: 0; max-width: 100%; }
.guardian-app .guardian-child { position: sticky; top: var(--guardian-topbar-h, 0px); z-index: calc(var(--z-sticky) - 1); }
.guardian-app .guardian-child .child-name { white-space: normal; }
html:has(body.guardian-app) { scroll-padding-top: calc(var(--guardian-topbar-h, 0px) + var(--guardian-child-h, 0px) + var(--space-2)); scroll-padding-bottom: calc(var(--tabbar-h, 0px) + var(--space-2)); }
.guardian-app .guardian-main :is(input, select, textarea, button, [tabindex], section) { scroll-margin-top: var(--space-2); }
.guardian-app .guardian-main { font-size: 16px; line-height: 1.5; }
.guardian-app .guardian-main .t-page, .guardian-app .guardian-child h1 { font-size: 24px; line-height: 1.3; }
.guardian-app .guardian-main .t-section { font-size: 20px; line-height: 1.35; }
.guardian-app .guardian-main .t-row { font-size: 16px; line-height: 1.4; }
.guardian-app .guardian-main .t-label { font-size: 14px; }
.guardian-app .guardian-main .t-caption, .guardian-app .guardian-inline-record .record-lead { font-size: 13px; line-height: 1.5; }
.guardian-app .guardian-main .t-caption { color: var(--ink-3); }
body.guardian-app .guardian-value-card .label { font-size: 14px; }
body.guardian-app .guardian-value-card .value { font-size: 26px; line-height: 1.3; }
body.guardian-app .guardian-value-card .value .unit { font-size: 14px; }
.guardian-app .cards > .guardian-height-card { flex: 2 1 20rem; }
.guardian-app .guardian-prediction-summary { display: grid; gap: var(--space-2); min-width: 0; overflow-wrap: anywhere; }
/* Shared label/value/date rows align both metrics; font-relative minima let whole groups stack on text enlargement. */
.guardian-app .guardian-height-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7em), 1fr)); column-gap: var(--space-4); row-gap: var(--space-1); }
.guardian-app .guardian-height-metric { display: grid; grid-template-rows: subgrid; grid-row: span 3; min-width: 0; }
.guardian-app .guardian-height-values { display: flex; flex-wrap: wrap; align-items: baseline; align-self: start; gap: var(--space-1) var(--space-2); min-width: 0; }
.guardian-app .guardian-height-values .value { display: inline-flex; align-items: baseline; white-space: nowrap; }
.guardian-app .guardian-height-values .unit { white-space: pre; }
.guardian-app .guardian-prediction-initial { white-space: nowrap; font-weight: 400; }
.guardian-app .guardian-main .guardian-prediction-caution { color: var(--ink-2); }
.guardian-app .guardian-inline-record .inline-record-section { padding: var(--space-4); }
.guardian-app .guardian-inline-record .inline-record-heading { justify-content: flex-start; gap: var(--space-2); }
.guardian-app .guardian-inline-record .inline-record-body, .guardian-app .guardian-inline-record form { gap: var(--space-2); }
.guardian-app .guardian-inline-record .measure-inline-field { display: grid; gap: var(--space-1); min-width: 0; }
.guardian-app .guardian-inline-record .measure-inline-field .field { margin: 0; }
.guardian-app .guardian-inline-record .field > span { font-size: 14px; }
.guardian-app .guardian-inline-record .btn.lg { min-height: 44px; height: auto; padding: var(--space-2) var(--space-3); font-size: 16px; }
.guardian-app .guardian-inline-record .with-icon { align-items: baseline; }
.account-panel .account-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-2); align-items: stretch; }
.account-panel .account-actions .btn { min-height: 44px; height: auto; white-space: normal; overflow-wrap: anywhere; padding: var(--space-2) var(--space-3); }
.account-panel .account-actions .account-logout { color: var(--ink-2); background: var(--surface-1); border-color: var(--line-2); }
.account-panel .account-actions .account-withdraw { color: var(--danger); background: var(--danger-soft); border-color: var(--line-2); }
.account-panel .account-actions .account-withdraw:hover { color: var(--danger); background: var(--danger-soft); }
@media (max-width: 600px) {
  .guardian-app .guardian-child { padding: var(--space-2); }
  .guardian-app .guardian-child h1.t-page { font-size: 20px; line-height: 1.35; }
}

/* First measured heading slice: leave shared tokens, local roles and nonheading values intact. */
.nurse-list .panel > header h2.with-icon,
.nurse-list .search-row > h2.with-icon { font-size: 18px; }
.promo-management > header > h2 { font-size: 18px; }
#pane-admin .card-title h2,
#pane-admin .panel.section > header .section-head h2 { font-size: 18px; }
.builder > h3.sub-title { font-size: 16px; }
.builder h3.builder-basket-title { font-size: 18px; }
.builder h4.builder-stage-title { font-size: 16px; }
.builder-savebar > h4.rec-title { font-size: 16px; }

/* Secondary news and editor headings: preserve input priority and protected states. */
body.guardian-app .news-summary > header h2 { font-size: 18px; }
body.guardian-app .news-summary h3.news-title,
body.guardian-app .news-detail h3.news-title { font-size: 16px; }
.promo-management .promo-editor .lib-edit > h3 { font-size: 16px; }


/* First spacing slice: local text controls; leave shared control tokens intact. */
body.guardian-app .news-summary .btn,
body.guardian-app .news-detail .btn,
.withdrawal-pending .btn {
  padding-block: 8px;
  height: auto;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.withdrawal-pending .btn:not(.lg) { min-height: 44px; }
.promo-management .btn,
.promo-reviewer-entry,
.promo-reviewer-back,
.promo-reviewers .btn,
#pane-trainer .builder-savebar > .builder-save-btn,
#pane-trainer .builder-savebar > .builder-keep-notice > .btn,
#pane-trainer .builder-savebar > .builder-name > .gap > .btn {
  padding-block: 6px;
  height: auto;
  min-height: 44px;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* Native date and numeric geometry require the separate served visual gate. */
@media (max-width: 640px), (pointer: coarse) {
  .bone-form input.input {
    font-size: var(--text-input);
    line-height: 1.4;
    height: auto;
    min-height: 44px;
    padding-block: 6px;
  }
}
/* Half the inherited first-line height minus half the existing SVG (h2 guardian16, others20).
   em tracks each role's font size; the <=260 inline wrapping fallback stays intact. */
@media (min-width: 261px) {
  body.guardian-app .guardian-inline-record > header > h2.with-icon,
  body.guardian-app .guardian-inline-record .inline-record-heading > h3.with-icon,
  .nurse-list .panel > header h2.with-icon,
  .nurse-list .search-row > h2.with-icon,
  #pane-admin .card-title h2.with-icon,
  .doctor-main .card-title h2.with-icon { align-items: flex-start; }
  .nurse-list .panel > header h2.with-icon > .cat-icon,
  .nurse-list .search-row > h2.with-icon > .cat-icon,
  #pane-admin .card-title h2.with-icon > .cat-icon,
  .doctor-main .card-title h2.with-icon > .cat-icon {
    margin-block-start: calc(0.625em - 10px);
  }
  body.guardian-app .guardian-inline-record > header > h2.with-icon > .cat-icon {
    margin-block-start: calc(0.675em - 8px);
  }
  body.guardian-app .guardian-inline-record .inline-record-heading > h3.with-icon > .cat-icon {
    margin-block-start: calc(0.7em - 10px);
  }
}
.card-title h2.with-icon .count { margin-left: 0; }

/* SG-INTAKE-MANUAL-B-20261019: local entry and trainer navigation boundaries. */
.intake-entry .field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.intake-entry input:not([type="checkbox"]), .intake-entry select { width: 100%; min-width: 0; max-width: 100%; min-height: 44px; font: inherit; }
.intake-entry .actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.intake-entry .btn { min-height: 44px; white-space: normal; overflow-wrap: anywhere; }
.intake-entry p, .intake-entry label { overflow-wrap: anywhere; }
.role-tabs:has(.trainer-home-entry) { display: flex; align-items: flex-start; gap: var(--space-2); }
.role-tabs:has(.trainer-home-entry) .role-tabs-row { min-width: 0; flex: 1; }
.role-tabs .trainer-home-entry { order: -1; flex: none; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font: inherit; font-size: var(--text-body-lg); }
.role-tabs .trainer-home-entry .cat-icon { width: 18px; height: 18px; flex: none; }
.role-tabs .trainer-home-entry[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: var(--on-dark); }
.trainer-measured summary { min-height: 44px; padding: var(--space-3); cursor: pointer; }
@media (max-width: 900px) { .role-tabs .trainer-home-entry { font-size: var(--text-body); } }
.role-tabs .trainer-home-entry[aria-current="page"] .cat-icon { color: currentColor; }
/* Manual survey source remains readable at narrow widths and large native zoom. */
.survey-detail, .survey-composer, .survey-inbox { min-width: 0; }
.survey-detail > h2, .survey-composer > h2 { padding: 1rem 1rem 0; }
.survey-detail > .btn, .survey-detail > .actions, .survey-detail > p { margin: .5rem 1rem; }
.survey-verbatim { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; font: inherit; margin: 0; }
.survey-response-group, .survey-raw-cell, .survey-link, .survey-cell-input { min-width: 0; padding: .75rem; border: 1px solid var(--line, #dbe4e0); border-radius: .5rem; }
.survey-response-group > summary, .survey-interpretation > summary, .survey-event > summary { cursor: pointer; overflow-wrap: anywhere; padding: .4rem 0; }
.survey-meta, .survey-linked, .survey-evidence, .survey-inbox-row { overflow-wrap: anywhere; word-break: break-word; }
.survey-inbox-row { text-align: start; white-space: normal; height: auto; }
.survey-detail .field, .survey-composer .field { min-width: 0; }
.survey-detail .input, .survey-composer .input { width: 100%; min-width: 0; box-sizing: border-box; }
.survey-detail .actions, .survey-composer .actions, .survey-inbox .actions { flex-wrap: wrap; }
.survey-detail .survey-raw-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; min-width: 0; }
.survey-detail .survey-raw-heading h4 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.survey-detail .survey-question-source, .survey-detail .survey-question-reference-note { font-size: var(--text-caption, 12px); color: var(--ink-2, #3c5551); white-space: normal; overflow-wrap: anywhere; }
.survey-detail .survey-question-reference-note { margin: 0; }
.promo-management, .promo-editor, .promo-row, .promo-snapshot { min-width: 0; }
.promo-management .btn { min-height: 44px; white-space: normal; overflow-wrap: anywhere; }
.promo-edit-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.promo-edit-state, .promo-state, .promo-snapshot, .promo-history { overflow-wrap: anywhere; word-break: break-word; }
.promo-history > summary { min-height: 44px; box-sizing: border-box; padding: .65rem 0; cursor: pointer; }
.promo-edit .field, .promo-edit .input { min-width: 0; }
.prediction-help-trigger { display:block; width:100%; min-width:0; min-height:44px; padding:8px 2px; border:0; border-radius:6px; background:transparent; color:#52696b; font:inherit; font-size:var(--text-caption,12px); line-height:1.6; text-align:left; white-space:normal; overflow-wrap:anywhere; cursor:pointer; }
.prediction-help-trigger:hover { text-decoration:underline; }
.prediction-help-trigger:focus-visible,.prediction-help-close:focus-visible { outline:3px solid #35796b; outline-offset:3px; }
dialog.prediction-help-dialog { width:min(570px,calc(100% - 32px)); max-width:calc(100% - 32px); min-width:0; max-height:85vh; max-height:85dvh; padding:20px; overflow:auto; overscroll-behavior:contain; color:#173f43; background:#fff; }
.prediction-help-dialog::backdrop { background:rgba(21,61,54,.4); }
.prediction-help-head { display:flex; align-items:flex-start; gap:12px; position:sticky; top:-20px; padding-top:12px; padding-bottom:12px; background:#fff; z-index:1; }
.prediction-help-head h2 { flex:1; min-width:0; margin:0; line-height:1.4; overflow-wrap:anywhere; }
.prediction-help-close { flex-shrink:0; min-width:44px; min-height:44px; }
.prediction-help-dialog h3 { margin:20px 0 10px; line-height:1.5; }
.prediction-help-dialog ul { padding-left:22px; }
.prediction-help-dialog li { margin:8px 0; overflow-wrap:anywhere; }
.prediction-help-end { margin-top:20px; padding-top:14px; border-top:1px solid #dfe8e4; color:#52696b; line-height:1.6; }
.first-center-detail, .first-center-queue, .first-center-today { min-width:0; }
.first-center-detail { padding:12px 0; border-block:1px solid var(--line,#dfe8e4); }
.first-center-detail h3, .first-center-detail p { margin:8px 0; overflow-wrap:anywhere; }
.first-center-state { font-weight:650; }
.first-center-actions, .first-center-tabs { display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
.first-center-detail .btn, .first-center-detail .input, .first-center-queue .btn, .first-center-queue .input, .first-center-tabs button { min-height:44px; min-width:44px; max-width:100%; white-space:normal; overflow-wrap:anywhere; }
.first-center-detail label { display:grid; gap:6px; min-width:0; }
.first-center-detail .input { box-sizing:border-box; width:100%; }
.first-center-correction > summary, .first-center-history > summary { min-height:44px; box-sizing:border-box; padding:12px 0; cursor:pointer; overflow-wrap:anywhere; }
.first-center-correction[open] { display:grid; gap:8px; }
.first-center-tabs button { border:0; border-bottom:3px solid transparent; padding:8px 12px; background:transparent; font:inherit; color:inherit; cursor:pointer; }
.first-center-tabs button[aria-selected="true"] { border-bottom-color:var(--accent,#23796a); font-weight:650; }
.first-center-tabs button:focus-visible, .first-center-detail :focus-visible, .first-center-queue :focus-visible { outline:3px solid #35796b; outline-offset:2px; }
.first-center-row { width:100%; text-align:left; overflow-wrap:anywhere; }
.first-center-history li { overflow-wrap:anywhere; }
@media (max-width:480px) { .first-center-actions { align-items:stretch; } .first-center-date { flex:1 1 100%; } }