/* PressureCare 디자인 토큰 (docs/M3-UI.md §1-2) — 색은 이 파일에서만 정의한다.
   구성: 1) 테마 무관 고정값  2) 밝게(기본)  3) 어둡게(시스템 설정 / data-theme="dark")  4) 표시 크기(data-density)
   어두운 테마는 순검정이 아니라 잉크색, 큰 면적의 채도 높은 색을 쓰지 않는다. 그림자 대신 1px 밝은 테두리. */

/* ───────── 1) 테마 무관 ───────── */
:root {
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Noto Sans Mono", monospace;

  /* 글자 크기: 12 / 13 / 14(기본) / 16 / 20 / 24 / 32 / 44 — rem 이라 「표시 크기」를 따라 함께 바뀐다 */
  --fs-12: .75rem; --fs-13: .8125rem; --fs-14: .875rem; --fs-16: 1rem; --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-32: 2rem; --fs-44: 2.75rem;
  /* 3m 가독성 요소 전용(본문 배율과 무관): 스테이션 시계·침대 번호·큰 숫자 */
  --fs-display: 2.75rem;   /* 44px 시계 */
  --fs-bed: 1.5rem;        /* 침대 번호 24px (22–28 범위) */
  --fs-bed-lg: 1.75rem;    /* 큰 타일 28px */
  --fs-kpi: 1.75rem;       /* KPI 숫자 28px */
  --lh: 1.45; --lh-tight: 1.2; --tracking-title: -.01em;

  /* 간격 4px 눈금: 4 8 12 16 20 24 32 40 56 */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-7: 2rem; --s-8: 2.5rem; --s-9: 3.5rem;
  /* 모서리: 6 칩 · 10 입력·단추 · 14 카드 · 20 큰 패널 */
  --r-chip: .375rem; --r-ctl: .625rem; --r-card: .875rem; --r-panel: 1.25rem; --r-full: 999px;
  /* 높이 */
  --h-sm: 2rem; --h-md: 2.5rem; --h-lg: 3rem; --row-h: 2.75rem;
  --strip-h: 1.5rem; --topbar-h: 3.5rem; --rail-w: 14.5rem; --rail-w-collapsed: 4rem; --tabbar-h: 3.75rem; --drawer-w: 32.5rem;

  /* 움직임 */
  /* 길이는 모두 --motion-scale(관리자 「움직임 길이 배율」, public/js/motion.js)을 곱한다 — 화면 CSS·JS 는 이 토큰만 쓴다 */
  --motion-scale: 1;
  --d-fast: calc(120ms * var(--motion-scale)); --d-base: calc(220ms * var(--motion-scale)); --d-slow: calc(400ms * var(--motion-scale));
  --d-posture: calc(1600ms * var(--motion-scale)); --d-pulse: calc(1200ms * var(--motion-scale));
  --d-exit: calc(160ms * var(--motion-scale));      /* 나갈 땐 더 짧게 */
  --d-count: calc(700ms * var(--motion-scale));     /* 숫자 롤링 */
  --d-heat: calc(650ms * var(--motion-scale));      /* 히트맵 값 보간 */
  --d-bump: calc(900ms * var(--motion-scale));      /* 값 바뀜·새 항목 잠깐 강조 */
  --d-breath: calc(3600ms * var(--motion-scale));   /* 연결·정상 아주 느린 호흡 */
  --d-blink: calc(1400ms * var(--motion-scale));    /* 연결 중 점 */
  --d-ripple: calc(1800ms * var(--motion-scale));   /* 근접 물결 */
  --d-beat: calc(1000ms * var(--motion-scale));     /* 소리 켜짐 박동 */
  --d-spin: 1600ms; --d-loader: 1150ms;             /* 진행 표시(배율·끔과 무관하게 돈다) */
  --stagger: calc(40ms * var(--motion-scale));      /* 목록 등장 간격 */
  --loop: infinite;                                 /* 장식용 반복(호흡·맥동). 「차분하게」면 3 */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.6, 0, .2, 1);

  --z-base: 1; --z-sticky: 100; --z-rail: 150; --z-strip: 200; --z-alarm: 300; --z-menu: 500; --z-drawer: 900; --z-dialog: 1000; --z-toast: 1100; --z-glow: 1200;

  /* 예전 이름(기존 화면 호환) */
  --sp-1: var(--s-1); --sp-2: var(--s-2); --sp-3: var(--s-3); --sp-4: var(--s-4); --sp-5: var(--s-6); --sp-6: var(--s-7); --sp-7: var(--s-8); --sp-8: var(--s-9);
  --r-1: var(--r-chip); --r-2: var(--r-ctl); --r-3: var(--r-card); --r-4: var(--r-panel);
  --fs-xs: var(--fs-12); --fs-sm: var(--fs-13); --fs-md: var(--fs-14); --fs-lg: var(--fs-16); --fs-xl: var(--fs-20); --fs-2xl: var(--fs-24); --fs-3xl: var(--fs-32);
  --fs-station-sm: var(--fs-20); --fs-station-md: var(--fs-bed-lg); --fs-station-lg: var(--fs-32); --fs-station-xl: var(--fs-display); --fs-station-2xl: var(--fs-display);
  --lh-base: var(--lh);
  --dur-fast: var(--d-fast); --dur-base: var(--d-base); --dur-slow: var(--d-slow);
  --ease-out: var(--ease); --ease-spring: cubic-bezier(.34, 1.3, .5, 1); --ease-exit: cubic-bezier(.4, 0, 1, 1);
  --banner-h: var(--strip-h); --header-h: var(--topbar-h);
  --z-banner: var(--z-strip);
}

/* ───────── 2) 밝게 ───────── */
:root {
  color-scheme: light;
  --bg: #F6F7F9;
  --surface: #FFFFFF;
  --surface-2: #F1F3F6;
  --surface-3: #E9ECF1;
  --surface-raised: #FFFFFF;
  --border: #E4E7EC;
  --border-strong: #D0D5DD;
  --hairline: rgb(15 23 42 / .06);
  --text: #0F172A;
  --text-2: #475467;
  --text-3: #98A2B3;
  --text-on-strong: #FFFFFF;
  --overlay: rgb(15 23 42 / .40);
  --hover: rgb(15 23 42 / .04);
  --press: rgb(15 23 42 / .07);

  --brand: #0E8C85;
  --brand-hover: #0B7570;
  --brand-fg: #FFFFFF;
  --brand-soft: #E7F4F3;
  --brand-soft-fg: #0A6560;
  --focus-ring: #0E8C85;
  --link: #0B7570;

  /* 상태 8종: bg 칩 바탕 · fg 글자 · line 선·막대·점 */
  --st-critical-bg: #FDECEC; --st-critical-fg: #B42318; --st-critical-line: #D92D20;
  --st-delay-bg: #FEF0E6;    --st-delay-fg: #B54708;    --st-delay-line: #E8751A;
  --st-caution-bg: #F3EEFF;  --st-caution-fg: #6941C6;  --st-caution-line: #7F56D9;
  --st-active-bg: #EAF2FF;   --st-active-fg: #1D4ED8;   --st-active-line: #2E6BF0;
  --st-due-bg: #EEF4FA;      --st-due-fg: #2C5282;      --st-due-line: #7FA6D6;
  --st-done-bg: #E8F6F0;     --st-done-fg: #067647;     --st-done-line: #12B76A;
  --st-normal-bg: #F2F4F7;   --st-normal-fg: #344054;   --st-normal-line: #98A2B3;
  --st-empty-bg: transparent; --st-empty-fg: #667085;   --st-empty-line: #C3C9D2;

  --danger: #D92D20; --danger-hover: #B42318; --danger-fg: #FFFFFF;
  --success: #12B76A;

  --shadow-1: 0 1px 2px rgb(15 23 42 / .06), 0 1px 1px rgb(15 23 42 / .04);
  --shadow-2: 0 8px 24px rgb(15 23 42 / .10), 0 1px 2px rgb(15 23 42 / .06);
  --shadow-3: 0 24px 56px rgb(15 23 42 / .18), 0 4px 12px rgb(15 23 42 / .08);
  --skeleton-a: #EDF0F4; --skeleton-b: #F7F8FA;
  --glow-critical: rgb(217 45 32 / .55);
  --glow-critical-soft: rgb(217 45 32 / .16);
  --toast-bg: #0F172A; --toast-fg: #F8FAFC;

  /* 압력 히트맵 8단계(낮음 → 높음) — 밝게는 첫 칸만 밝은 회청 */
  /* 자세 그림 일러스트(figure/mini.js): 피부·머리·환자복·이불·그림자 — 밝은 화면 */
  --ill-skin: #E9C3A6; --ill-skin-hi: #F6DCC8; --ill-hair: #4A3B33; --ill-gown: #A9C7E2; --ill-gown-hi: #CFE1F1; --ill-gown-dot: #8DB2D4;
  --ill-blanket: #BCD5D0; --ill-blanket-hi: #DCEBE8; --ill-blanket-fold: #98BAB3; --ill-shadow: #0F1B2A; --ill-frame: #C9D1DA; --ill-frame-hi: #E6EBF0; --ill-rail: #9AA6B4; --ill-mat: #F7F9FB; --ill-quilt: #E3E8EE; --ill-pillow: #FFFFFF; --ill-pillow-sh: #DDE3EA;
  --heat-0: #EEF2F6; --heat-1: #1E4E79; --heat-2: #1E7C8C; --heat-3: #2FA37A; --heat-4: #C9B23A; --heat-5: #E58A2B; --heat-6: #E0512E; --heat-7: #C2261F;
  /* 구역 12색(센서 구성 평면도) */
  --zone-0: #6B7A8C; --zone-1: #2E6BF0; --zone-2: #1E88A8; --zone-3: #D92D20; --zone-4: #E8751A; --zone-5: #B8930C;
  --zone-6: #7F56D9; --zone-7: #B03A8E; --zone-8: #12B76A; --zone-9: #4C9A2A; --zone-10: #0E8C85; --zone-11: #8A5A2B;
  --plan-pad: #F6F7F9; --plan-grid: #E4E7EC; --plan-ink: #475467;
}

/* ───────── 3) 어둡게 ─────────
   같은 값을 두 번 쓴다: 시스템이 어둡게(수동 「밝게」 선택이 없을 때) + 수동 「어둡게」. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0B1117; --surface: #11181F; --surface-2: #17202A; --surface-3: #1E2935; --surface-raised: #151E27;
    --border: #223040; --border-strong: #2E3E50; --hairline: rgb(255 255 255 / .06);
    --text: #E6EDF3; --text-2: #9AA8B6; --text-3: #5F6E7D; --text-on-strong: #0B1117;
    --overlay: rgb(3 7 12 / .62); --hover: rgb(255 255 255 / .04); --press: rgb(255 255 255 / .07);
    --brand: #2CC5B8; --brand-hover: #4FD3C8; --brand-fg: #04211F; --brand-soft: rgb(44 197 184 / .12); --brand-soft-fg: #7FE3D9; --focus-ring: #2CC5B8; --link: #5FD6CB;
    --st-critical-bg: rgb(240 68 56 / .14); --st-critical-fg: #FDA29B; --st-critical-line: #F04438;
    --st-delay-bg: rgb(243 135 68 / .13);   --st-delay-fg: #F9B98A;    --st-delay-line: #F38744;
    --st-caution-bg: rgb(158 119 237 / .14); --st-caution-fg: #C3B1F7; --st-caution-line: #9E77ED;
    --st-active-bg: rgb(82 139 255 / .14);  --st-active-fg: #9DBDFF;   --st-active-line: #528BFF;
    --st-due-bg: rgb(127 166 214 / .12);    --st-due-fg: #AFC7E6;      --st-due-line: #7FA6D6;
    --st-done-bg: rgb(50 213 131 / .12);    --st-done-fg: #75E0A7;     --st-done-line: #32D583;
    --st-normal-bg: rgb(154 168 182 / .10); --st-normal-fg: #C3CDD8;   --st-normal-line: #66778A;
    --st-empty-bg: transparent;             --st-empty-fg: #6F7E8E;    --st-empty-line: #34475B;
    --danger: #F04438; --danger-hover: #F97066; --danger-fg: #FFFFFF; --success: #32D583;
    --shadow-1: none;
    --shadow-2: 0 0 0 1px rgb(255 255 255 / .06), 0 12px 32px rgb(0 0 0 / .45);
    --shadow-3: 0 0 0 1px rgb(255 255 255 / .07), 0 28px 64px rgb(0 0 0 / .6);
    --skeleton-a: #17202A; --skeleton-b: #1F2A36;
    --glow-critical: rgb(240 68 56 / .6); --glow-critical-soft: rgb(240 68 56 / .14);
    --toast-bg: #E6EDF3; --toast-fg: #0B1117;
    --ill-skin: #C79E82; --ill-skin-hi: #DDB89D; --ill-hair: #2A211C; --ill-gown: #5D7FA0; --ill-gown-hi: #7E9DBB; --ill-gown-dot: #4F6F8F;
    --ill-blanket: #3B5551; --ill-blanket-hi: #4D6A65; --ill-blanket-fold: #2C413E; --ill-shadow: #000000; --ill-frame: #2B3744; --ill-frame-hi: #3A4756; --ill-rail: #56657A; --ill-mat: #1E2833; --ill-quilt: #26323E; --ill-pillow: #3B4756; --ill-pillow-sh: #2A3440;
    --heat-0: #1B2A3A; --heat-1: #1E4E79; --heat-2: #1E7C8C; --heat-3: #2FA37A; --heat-4: #C9B23A; --heat-5: #E58A2B; --heat-6: #E0512E; --heat-7: #C2261F;
    --zone-0: #9AA8B8; --zone-1: #6FA1FF; --zone-2: #4FC3E0; --zone-3: #FF6B66; --zone-4: #FF9A4A; --zone-5: #E5C13A; --zone-6: #A88BF6; --zone-7: #E877C4; --zone-8: #3DCB7C; --zone-9: #8BD14F; --zone-10: #2CC5B8; --zone-11: #C99663;
    --plan-pad: #17202A; --plan-grid: #223040; --plan-ink: #9AA8B6;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B1117; --surface: #11181F; --surface-2: #17202A; --surface-3: #1E2935; --surface-raised: #151E27;
  --border: #223040; --border-strong: #2E3E50; --hairline: rgb(255 255 255 / .06);
  --text: #E6EDF3; --text-2: #9AA8B6; --text-3: #5F6E7D; --text-on-strong: #0B1117;
  --overlay: rgb(3 7 12 / .62); --hover: rgb(255 255 255 / .04); --press: rgb(255 255 255 / .07);
  --brand: #2CC5B8; --brand-hover: #4FD3C8; --brand-fg: #04211F; --brand-soft: rgb(44 197 184 / .12); --brand-soft-fg: #7FE3D9; --focus-ring: #2CC5B8; --link: #5FD6CB;
  --st-critical-bg: rgb(240 68 56 / .14); --st-critical-fg: #FDA29B; --st-critical-line: #F04438;
  --st-delay-bg: rgb(243 135 68 / .13);   --st-delay-fg: #F9B98A;    --st-delay-line: #F38744;
  --st-caution-bg: rgb(158 119 237 / .14); --st-caution-fg: #C3B1F7; --st-caution-line: #9E77ED;
  --st-active-bg: rgb(82 139 255 / .14);  --st-active-fg: #9DBDFF;   --st-active-line: #528BFF;
  --st-due-bg: rgb(127 166 214 / .12);    --st-due-fg: #AFC7E6;      --st-due-line: #7FA6D6;
  --st-done-bg: rgb(50 213 131 / .12);    --st-done-fg: #75E0A7;     --st-done-line: #32D583;
  --st-normal-bg: rgb(154 168 182 / .10); --st-normal-fg: #C3CDD8;   --st-normal-line: #66778A;
  --st-empty-bg: transparent;             --st-empty-fg: #6F7E8E;    --st-empty-line: #34475B;
  --danger: #F04438; --danger-hover: #F97066; --danger-fg: #FFFFFF; --success: #32D583;
  --shadow-1: none;
  --shadow-2: 0 0 0 1px rgb(255 255 255 / .06), 0 12px 32px rgb(0 0 0 / .45);
  --shadow-3: 0 0 0 1px rgb(255 255 255 / .07), 0 28px 64px rgb(0 0 0 / .6);
  --skeleton-a: #17202A; --skeleton-b: #1F2A36;
  --glow-critical: rgb(240 68 56 / .6); --glow-critical-soft: rgb(240 68 56 / .14);
  --toast-bg: #E6EDF3; --toast-fg: #0B1117;
  --ill-skin: #C79E82; --ill-skin-hi: #DDB89D; --ill-hair: #2A211C; --ill-gown: #5D7FA0; --ill-gown-hi: #7E9DBB; --ill-gown-dot: #4F6F8F;
  --ill-blanket: #3B5551; --ill-blanket-hi: #4D6A65; --ill-blanket-fold: #2C413E; --ill-shadow: #000000; --ill-frame: #2B3744; --ill-frame-hi: #3A4756; --ill-rail: #56657A; --ill-mat: #1E2833; --ill-quilt: #26323E; --ill-pillow: #3B4756; --ill-pillow-sh: #2A3440;
  --heat-0: #1B2A3A; --heat-1: #1E4E79; --heat-2: #1E7C8C; --heat-3: #2FA37A; --heat-4: #C9B23A; --heat-5: #E58A2B; --heat-6: #E0512E; --heat-7: #C2261F;
  --zone-0: #9AA8B8; --zone-1: #6FA1FF; --zone-2: #4FC3E0; --zone-3: #FF6B66; --zone-4: #FF9A4A; --zone-5: #E5C13A; --zone-6: #A88BF6; --zone-7: #E877C4; --zone-8: #3DCB7C; --zone-9: #8BD14F; --zone-10: #2CC5B8; --zone-11: #C99663;
  --plan-pad: #17202A; --plan-grid: #223040; --plan-ink: #9AA8B6;
}

/* 파생 토큰(테마를 따라 자동) + 예전 이름 호환. 상태별 묶음은 components.css 의 [data-st] 가 --st-bg/--st-fg/--st-line 으로 꺼내 쓴다. */
:root {
  --accent: var(--brand); --accent-hover: var(--brand-hover); --accent-fg: var(--brand-fg); --accent-soft: var(--brand-soft); --accent-soft-fg: var(--brand-soft-fg);
  --focus: var(--focus-ring);
  --lv-p1: var(--st-critical-line); --lv-p2: var(--st-delay-line); --lv-p3: var(--st-caution-line); --lv-p4: var(--st-normal-line);
}

/* ───────── 4) 표시 크기 ─────────
   본문 배율은 화면 폭으로 키우지 않는다(넓은 화면은 그림 영역만 넓어진다). 간호사실 대형 모니터는 사용자가 「크게」를 고른다. */
html { font-size: 100%; }
html[data-density="compact"] { font-size: 92%; }
html[data-density="large"] { font-size: 112%; }

@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 1ms; --d-base: 1ms; --d-slow: 1ms; --d-posture: 1ms; }
}