/* 생수공 통합 관리 — 디자인 값 파일 v0.603 (S4-2 · 휴대폰 화면 값 더함 — theme_v0_312 전체 복사 · PC 값은 그대로)
   [0.603] --fs-input = 휴대폰 입력칸 글자(16px 미만이면 아이폰 사파리가 누를 때 화면을 확대하고 안 돌아옴 · 옛 선생님 휴대폰 웹앱 L-1)
           --tap = 손가락으로 누르는 단추 높이 · --m-w = 휴대폰 화면 내용 최대 너비 · 안전 여백은 env(safe-area-inset-*) 를 화면이 씀
   (이하 0.312)
/* 생수공 통합 관리 — 디자인 값 파일 v0.312 (W-2 · 원장님 10/25 WD-2 · WD-3 · WD-4)
   ★ 색 · 글꼴 · 글자 크기 · 둥글기 · 줄 높이 · 간격 · 그림자는 이 파일에만 둔다.
     다른 화면 파일(app_*.css · js)은 var(--…) 만 쓴다 — 격리검사가 색 값 · 글자 크기 직접 쓰기를 막는다.
   ★ 디자인을 바꿀 때 = 이 파일 새 판(theme_v0_3xx.css) 하나 + index 의 링크 한 줄.
   본보기: web/시안/생수공_화면시안_v3.html (A 느낌 + B 구성 · 화면설계원칙 v6 15절)
   사람별 화면 설정(셸이 <html> 에 붙임): data-theme = light | dark | auto · data-font = pretendard | malgun ·
   data-fs = 13 | 14 | 15 | 16 · data-density = normal | wide
   색의 뜻(화면설계원칙 6절): ok 초록 = 정상·저장됨 · warn 주황 = 확인 필요 · bad 빨강 = 문제 · yel 노란 띠 = 연결 끊김 · purple 보라 = 개발 DB */

@font-face {
  font-family: "Pretendard Variable";
  src: url("lib/fonts/PretendardVariable_1_3_9.woff2") format("woff2-variations");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- 왼쪽 메뉴 막대(지금 모양 유지) */
  --nav: #1b2540; --nav-sel: #34447a; --nav-hover: #26325a; --nav-fg: #c9d2ee; --nav-dim: #8390b5; --nav-strong: #ffffff;
  /* ---- 바탕 · 글자 */
  --bg: #f3f5f9; --panel: #ffffff; --line: #e3e7ef; --fg: #141a28; --dim: #545d72;
  --accent: #3a5bd9; --accent-soft: #e8edfc; --on-accent: #ffffff;
  /* ---- 색의 뜻 */
  --ok: #1f9d55; --ok-soft: #e4f5ea; --warn: #d9822b; --warn-soft: #fdf0e1; --bad: #d64545; --bad-soft: #fbe7e7;
  --gray-soft: #eef0f4; --yel: #8a6a00; --yel-bg: #fdf3c4; --yel-line: #f0d66b; --purple: #7c4dce; --orange: #d9822b;
  --scrim: rgba(15, 20, 35, .38);
  --shadow: 0 1px 2px rgba(20, 30, 60, .06), 0 4px 14px rgba(20, 30, 60, .05);
  --shadow-pop: 0 10px 40px rgba(20, 30, 60, .22);
  --focus: 0 0 0 2px var(--accent-soft);

  /* ---- 글꼴 · 글자 크기(기본 14px — 나머지는 이 값에서 계산) */
  --font: "Pretendard Variable", "Pretendard", "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
  --fs: 14px;
  --fs-xs: calc(var(--fs) - 2px);
  --fs-sm: calc(var(--fs) - 1.5px);
  --fs-md: calc(var(--fs) + 1px);
  --fs-lg: calc(var(--fs) + 2px);
  --fs-h1: calc(var(--fs) + 4px);
  --fs-num: calc(var(--fs) + 6px);
  --fs-hero: calc(var(--fs) + 12px);
  --fw-strong: 600; --fw-bold: 700;
  --lh: 1.45; --tracking: -0.01em;

  /* ---- 둥글기 · 크기 · 간격 */
  --r: 10px; --r-sm: 6px; --r-pill: 999px;
  --row: 36px; --pad: 12px; --gap: 10px;
  --sp1: 4px; --sp2: 6px; --sp3: 8px; --sp4: 12px; --sp5: 16px; --sp6: 20px; --sp7: 28px;
  --nav-w: 180px; --nav-w-compact: 64px; --detail-w: 280px; --top-h: 52px;
  --field-h: 34px; --btn-pad: 6px 13px; --chip-pad: 4px 11px; --dialog-w: 440px; --login-w: 380px;
  --line-w: 1px;
  /* ---- [0.603] 휴대폰 */
  --fs-input: 16px; --tap: 44px; --m-w: 480px;
}

/* ---- 다크(직접 고름) */
:root[data-theme="dark"] {
  --bg: #12161f; --panel: #1a2030; --line: #2a3245; --fg: #eef1f8; --dim: #aab4c8;
  --accent: #7d9bff; --accent-soft: #25305a; --on-accent: #0d1220;
  --ok: #4cc77f; --ok-soft: #183626; --warn: #f0a050; --warn-soft: #3a2a17; --bad: #f07070; --bad-soft: #3d1d1f;
  --gray-soft: #232a3a; --yel: #f3d36a; --yel-bg: #3a3214; --yel-line: #6b5a1d; --purple: #a682ec;
  --nav: #0f1424; --nav-sel: #2a3866; --nav-hover: #1a2340;
  --scrim: rgba(0, 0, 0, .55);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-pop: 0 10px 40px rgba(0, 0, 0, .55);
  color-scheme: dark;
}
/* ---- 다크(윈도우 설정 따라감) */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg: #12161f; --panel: #1a2030; --line: #2a3245; --fg: #eef1f8; --dim: #aab4c8;
    --accent: #7d9bff; --accent-soft: #25305a; --on-accent: #0d1220;
    --ok: #4cc77f; --ok-soft: #183626; --warn: #f0a050; --warn-soft: #3a2a17; --bad: #f07070; --bad-soft: #3d1d1f;
    --gray-soft: #232a3a; --yel: #f3d36a; --yel-bg: #3a3214; --yel-line: #6b5a1d; --purple: #a682ec;
    --nav: #0f1424; --nav-sel: #2a3866; --nav-hover: #1a2340;
    --scrim: rgba(0, 0, 0, .55);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-pop: 0 10px 40px rgba(0, 0, 0, .55);
    color-scheme: dark;
  }
}

/* ---- 글꼴 고르기(WD-3 · 프리텐다드가 기본 · 맑은 고딕 = 윈도우 기본 글꼴) */
:root[data-font="malgun"] { --font: "Malgun Gothic", "맑은 고딕", system-ui, sans-serif; --tracking: 0; }

/* ---- 글자 크기 고르기 */
:root[data-fs="13"] { --fs: 13px; }
:root[data-fs="14"] { --fs: 14px; }
:root[data-fs="15"] { --fs: 15px; }
:root[data-fs="16"] { --fs: 16px; }

/* ---- 촘촘함 고르기(기본 = 시안 v3 · 넓게 = 줄 44px) */
:root[data-density="wide"] { --row: 44px; --pad: 16px; --gap: 14px; --field-h: 40px; --btn-pad: 9px 16px; --chip-pad: 6px 14px; }