/* [디자인 값 · 모든 화면] 색·글자 크기·간격·모서리·누르는 칸 크기(토큰). 값은 여기서만 바꿈.
   고치면 → 앱 전체 모양. 어두운 화면 색도 이 파일 안에 같이 있음. */
/* =====================================================================
   설계사 도구 v1 — tokens.css (디자인 시스템 v4에서 복사 + 마디아 규격서 1031 '토큰과 다른 값' 고침)
   고친 곳(규격서 표 번호): #1 --line-input 새로(밝은) · #2 --line-input(어두운) · a --measure · b --header-h
   + 직접 쓰던 px를 토큰 이름으로(--chip-h·--switch-*·--th-h·--area-h·--art·--mgroup-h·--mcard-min·--side-w·--main-max)
   컨셉: "흰 종이 위에 큰 숫자 하나, 다음 할 일 하나."
   키워드: 또렷 · 하나 · 사람      기준 문서: 리모델링_빌드\자료\디자인기준_v4_초안_1030.md
   규칙: 화면·부품은 이 파일의 var(--…)만 씀. hex·px 직접 쓰기 금지(부품 파일 포함).
   글꼴: Pretendard v1.3.9 고정(jsDelivr) → Apple SD Gothic Neo → 맑은 고딕 → 시스템.
         불러오기: <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css">

   대비 검증 표 (WCAG 2.x 계산값, 글자/바탕, 기준 4.5:1 — 10/30 파이썬으로 직접 계산)
   ── 밝은 화면
   t1 #191F28 / #FFFFFF  16.56 ✓      t2 #333D4B / #FFFFFF  11.00 ✓
   t3 #4E5968 / #FFFFFF   7.11 ✓      t3 / fill #F2F4F6      6.45 ✓     t3 / bg-sub #F9FAFB 6.81 ✓
   t4 #8B95A1 / #FFFFFF   3.04 ✗ → 비활성 전용(읽는 글 금지)
   흰 글자 / blue #1B64DA 5.41 ✓      흰 글자 / blue-press #1957C2 6.60 ✓
   blue / 흰 5.41 ✓                   blue / blue-fill #E8F3FF 4.82 ✓
   흰 글자 / blue-mark #3182F6 3.71 ✗ → 막대·진행 표시 전용(글자 금지)
   red #C42129 / 흰 5.84 ✓ · / red-fill 5.20 ✓       warn #AC4200 / 흰 5.94 ✓ · / warn-fill 5.34 ✓
   ok #0E7A3A / 흰 5.44 ✓ · / ok-fill 4.85 ✓         t1 / red-fill 14.76 ✓     t2 / fill 9.97 ✓
   ── 어두운 화면
   t1 #ECEEF1 / card #202027 13.93 ✓  t2 #C3C8CF 9.62 ✓   t3 #9EA6B0 6.58 ✓ (fill 위 5.62 ✓)
   blue #4C9AFF / card 5.68 ✓ · / fill 4.85 ✓     주 버튼 글자 #17171C / #4C9AFF 6.27 ✓
   red #FF7A7A 6.41 ✓ (red-fill 위 5.79 ✓)  warn #FFB35C 9.14 ✓  ok #4CC38A 7.31 ✓
   t4 #6B7280 / card 3.35 ✗ → 비활성 전용
   ===================================================================== */

:root{
  color-scheme: light;
  /* ── 색: 바탕·선 */
  --bg:#FFFFFF;          /* 폰 화면 바탕·카드 */
  --bg-sub:#F9FAFB;      /* PC 앱 바탕(카드 뒤) */
  --card:#FFFFFF;
  --fill:#F2F4F6;        /* 표 머리·이름칸·숫자 칸(면 1종만) */
  --line:#E5E8EB;        /* 카드 테두리·표 가로선(장식선) */
  --line-strong:#D1D6DB; /* 장식선·보조 버튼 테두리(누르는 것의 경계로는 쓰지 않음) */
  --line-input:#848E9A;  /* 규격 3-2·9-5: 입력칸·꺼진 스위치·진행 점 테두리 — 흰 3.32 · 회색 면 3.02 */
  /* ── 색: 글자 4단 */
  --t1:#191F28; --t2:#333D4B; --t3:#4E5968; --t4:#8B95A1; /* t4 = 비활성만 */
  /* ── 색: 행동 파랑 1색 (결정 ①) */
  --blue:#1B64DA; --blue-press:#1957C2; --blue-mark:#3182F6; --blue-fill:#E8F3FF; --on-blue:#FFFFFF;
  /* ── 색: 뜻 3색 (빨강=비어 있음 · 주황=확인 · 초록=충분) */
  --red:#C42129;  --red-fill:#FFEEEE;  --red-line:#F6E3E5;
  --warn:#AC4200; --warn-fill:#FEF3C7;
  --ok:#0E7A3A;   --ok-fill:#E5F6EC;
  --dot-red:#E42939; --dot-amber:#F59E0B; --dot-green:#13A867; /* 점·막대만, 글자 금지 */
  /* ── 예외 (결정 ⑥): 카톡 버튼 한 곳만 */
  --kakao:#FEE500; --on-kakao:#191F28; --kakao-bg:#B2C7DA;
  --hover:rgba(2,32,71,.05);  /* 투명도는 이것 하나만 */
  --scrim:rgba(0,12,30,.40);  /* 바텀시트 뒤 어둡게 */

  /* ── 글꼴 */
  --font:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",system-ui,sans-serif;
  /* ── 크기 단계 (12·13·반 픽셀 금지 / 설계사 최소 14·본문 15 / 고객 최소 15·본문 17) */
  --fs-num:32px;  --lh-num:1.25;   /* 화면 주인공 숫자(화면당 1곳) */
  --fs-t1:28px;   --lh-t1:1.3;     /* 고객 화면 제목 */
  --fs-t2:24px;   --lh-t2:1.35;    /* 설계사 화면 제목·숫자 카드 숫자 */
  --fs-t3:20px;   --lh-t3:1.4;     /* 카드·묶음 제목 */
  --fs-tab:16px;                   /* 탭 글자·폰 입력칸(아이폰 확대 방지) */
  --fs-body-l:17px;                /* 고객 본문·큰 버튼 */
  --fs-body:15px; --lh-body:1.6;   /* 설계사 본문·표 */
  --fs-cap:14px;  --lh-cap:1.5;    /* 라벨·표 머리·기준일(최소값) */
  /* 큰 숫자 옆 단위: 숫자 32 → 단위 20 · 숫자 24 → 17 · 본문 15 → 14 (약 0.7배, 반 픽셀 없이 단계 값으로) */
  --fw-r:400; --fw-m:600; --fw-b:700; /* 700은 화면당 1~2곳 */
  --ls-title:-0.02em;

  /* ── 간격 (4배수) · 묶음 안:밖 = 1:2 */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:32px; --s-8:48px;
  --gutter:var(--s-5);             /* 폰 좌우 20 */

  /* ── 모서리 4/8/12 (+999 상태 점·토글만) */
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-full:999px;
  /* ── 테두리 */
  --bw:1px; --bw-focus:2px;
  /* ── 그림자: 평소 0, 떠 있는 것만 1종 */
  --shadow-float:0 8px 16px rgba(0,27,55,.10);

  /* ── 누르는 칸 */
  --hit-pc:44px; --hit-m:48px; --hit-l:56px;

  /* ── 틀·부품 치수 (규격 10-2 머리 줄 56 · 2-3 한 줄 길이 · 4-12 작업 폭) */
  --header-h:56px;      /* 위 머리 줄 높이, 모든 화면 같은 틀 */
  --measure:36em;       /* 본문 한 줄 최대 폭(한글 약 35~40자) */
  --side-w:208px;       /* PC 왼쪽 메뉴 폭 */
  --main-max:1200px;    /* PC 본문 최대 폭(작업 폭 1280 안) */
  --chip-h:32px; --switch-w:48px; --switch-h:28px; --switch-knob:22px; --th-h:40px; --step:28px;
  --area-h:96px; --art:96px; --mgroup-h:64px; --mcard-min:280px;

  /* ── 움직임 (UI 0.3초 넘기 금지) */
  --t-fast:.1s; --t-mid:.2s; --t-num:.5s; --ease:cubic-bezier(.22,1,.36,1);
}

/* 어두운 화면: 설정 > 화면에서 켤 때 (data-theme="dark"), 또는 기기 설정 따라감 */
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#17171C; --bg-sub:#17171C; --card:#202027; --fill:#2C2C35; --line:#3A3A44; --line-strong:#4A4A55; --line-input:#767E8A;
  --t1:#ECEEF1; --t2:#C3C8CF; --t3:#9EA6B0; --t4:#6B7280;
  --blue:#4C9AFF; --blue-press:#6AACFF; --blue-mark:#4C9AFF; --blue-fill:#1E2A3D; --on-blue:#17171C;
  --red:#FF7A7A; --red-fill:#3A2226; --red-line:#4A2A30;
  --warn:#FFB35C; --warn-fill:#3A2E1C; --ok:#4CC38A; --ok-fill:#1C3328;
  --hover:rgba(255,255,255,.06); --scrim:rgba(0,0,0,.55);
  --shadow-float:0 8px 16px rgba(0,0,0,.40);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#17171C; --bg-sub:#17171C; --card:#202027; --fill:#2C2C35; --line:#3A3A44; --line-strong:#4A4A55; --line-input:#767E8A;
    --t1:#ECEEF1; --t2:#C3C8CF; --t3:#9EA6B0; --t4:#6B7280;
    --blue:#4C9AFF; --blue-press:#6AACFF; --blue-mark:#4C9AFF; --blue-fill:#1E2A3D; --on-blue:#17171C;
    --red:#FF7A7A; --red-fill:#3A2226; --red-line:#4A2A30;
    --warn:#FFB35C; --warn-fill:#3A2E1C; --ok:#4CC38A; --ok-fill:#1C3328;
    --hover:rgba(255,255,255,.06); --scrim:rgba(0,0,0,.55);
    --shadow-float:0 8px 16px rgba(0,0,0,.40);
  }
}
/* 고객 화면: <body class="is-customer"> 하나로 본문 17·최소 15·누르는 칸 48 */
.is-customer{ --fs-body:17px; --fs-cap:15px; --hit-pc:48px; }
@media (prefers-reduced-motion: reduce){ :root{ --t-fast:0s; --t-mid:0s; --t-num:0s; } }