/* 디자인 토큰 — 브랜드 색(teal/deep)은 삼덕회계법인 사이트에서 추출해
   고정한 값을 그대로 유지한다(정체성). 2026-08 리디자인에서 --radius-sig
   (기존 대각 비대칭 30px 0 30px 0 컷)와 --radius 핀은 해제됐다 — 낡아
   보인다는 평가에 따라 부드러운 통일 라운드로 바꿨다. 색상 5종은
   여전히 tests/test_design_tokens.py 가 고정한다.

   v2-11(2026-08 WAT 리디자인) — "ui 우리 wat툴 참고해서 만들자"는 지시에
   따라 C:\Claude\WAT\src\index.html 의 토큰 체계(캔버스·헤어라인·라운드·
   컨테이너 폭·이징)를 그대로 들여온다. WAT 는 --accent 로 블루(#2B5FD9)를
   쓰지만 이 사이트는 삼덕회계법인의 실제 브랜드색(teal/deep)을 그대로
   accent 자리에 넣는다 — 캔버스·헤어라인·라운드·간격 리듬·이징만
   WAT 체계를 따르고, 색 정체성은 바꾸지 않는다. --wrap·--radius-sig 두
   값도 이번에 WAT 값(--maxw:1120px, --radius:16px)에 맞춰 좁히고 낮췄다 —
   pinned 값이므로 tests/test_design_tokens.py 도 같이 갱신한다. */
:root {
  --brand: #00b9bb;
  --brand-deep: #00303b;
  --brand-mid: #335b63;
  --brand-pale: #cbf2f1;

  --ink: #00303b;
  --ink-2: #425156;
  --ink-3: #85868c;

  --line: #cdd5d8;
  --line-soft: #ededed;

  --bg: #ffffff;
  --bg-soft: #f7fafa;
  --danger: #c0392b;
  --danger-pale: #fdecea;   /* 경고 배지 배경 */

  --on-brand: #ffffff;      /* 브랜드 배경 위 텍스트 */

  /* WAT --maxw:1120px 를 그대로 따른다 — 기존 1300px 보다 좁혀
     본문 한 줄 길이가 편안해지고 카드 그리드도 조밀해 보인다.
     pinned(tests/test_design_tokens.py) — 값을 바꾸면 그 핀도 갱신한다. */
  --wrap: 1120px;

  /* 시그니처 라운드. 2026-08 이전에는 대각 비대칭 컷(30px 0 30px 0)이었다 —
     카드·주요 버튼·이미지가 전부 같은 방향으로 잘려나가 2010년대 회계법인
     사이트 느낌을 냈다. v2-11 에서 WAT 의 --radius:16px 값을 그대로
     받아 카드·주요 버튼·이미지 전용 "시그니처" 라운드를 다시 한 번
     통일했다(20px→16px, WAT 의 .tcard 라운드와 동일). pinned. */
  --radius-sig: 16px;
  /* 입력 필드·보조 버튼용 — 이전엔 3px(거의 각짐)였다. --radius-sig 보다는
     작지만 여전히 둥글게 보이도록 올렸다. .field input 등에는 여전히
     --radius-sig 를 쓰지 않는다(tests/test_design_tokens.py 가 고정). */
  --radius: 10px;
  /* 필수 표시 배지·자동완성 태그·상태 배지 등 알약형 라운드. */
  --radius-pill: 999px;

  /* 증명사진 등 작은 썸네일 이미지 최대 폭. 리터럴을 템플릿·앱별 CSS 에
     직접 적지 않기 위한 토큰이다(색·폭·라운드는 항상 var(--token)). */
  --w-photo-thumb: 200px;

  /* WAT 의 --accent-soft·--accent-line — 브랜드색을 흰색과 oklab 공간에서
     섞어 "옅은 틴트"를 계산해서 낸다(WAT 가 블루에 쓰는 것과 같은 기법).
     --brand-pale 같은 고정 hex 팔레트 항목을 대체하지는 않는다(그쪽은
     기존 화면들이 이미 참조·테스트하는 값이라 그대로 둔다) — 새로
     추가하는 hover 테두리·은은한 배경 등에서 이 두 토큰을 쓴다. */
  --accent-soft: color-mix(in oklab, var(--brand) 8%, #fff);
  --accent-line: color-mix(in oklab, var(--brand) 22%, #fff);

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2.5rem;
  --sp-6: 4rem;
  /* 큰 리듬 전용(헤더~본문, 인쇄 화면 상단 등) — sp-6 보다 한 단 더 크다. */
  --sp-7: 6rem;

  /* 타입 스케일 — 기존엔 h1(2rem)·h2(1.375rem)만 있고 h3·본문 대비 위계가
     없었다. "제목이 본문보다 겨우 커 보인다"는 평가에 맞춰 단계를 늘리고
     상하 간격을 넓혔다. */
  --fs-xs: 0.8125rem;    /* 13px — 힌트·글자수 카운터 */
  --fs-sm: 0.9375rem;    /* 15px — 보조 문구 */
  --fs-md: 1.125rem;     /* 18px — h3, 카드 소제목 */
  --fs-lg: 1.375rem;     /* 22px — 이전 h2 크기, 소분류 제목에 재사용 */
  --fs-xl: 1.75rem;      /* 28px — h2 */
  --fs-2xl: 2.25rem;     /* 36px — h1 */
  --lh-tight: 1.15;

  /* 표면 고도 — 평평한 1px 테두리 대신 그림자로 켜켜이 쌓인 느낌을 낸다.
     색은 브랜드 잉크(--brand-deep = #00303b)를 낮은 불투명도로 써서 순수
     검정 그림자보다 브랜드 톤과 어울리게 한다. */
  --shadow-sm: 0 1px 2px rgba(0, 48, 59, 0.05), 0 2px 6px rgba(0, 48, 59, 0.06);
  --shadow-md: 0 6px 16px rgba(0, 48, 59, 0.10), 0 2px 4px rgba(0, 48, 59, 0.06);
  --shadow-lg: 0 16px 32px rgba(0, 48, 59, 0.14), 0 4px 10px rgba(0, 48, 59, 0.08);

  /* 전환 속도 — 카드 호버·스티키 네비 등 여러 규칙이 같은 속도를 쓰게
     한다(하나씩 값을 흩어놓지 않기 위해). 곡선(ease)도 WAT 의
     --ease 를 그대로 받아 "탄력 있게 멈추는" 느낌을 통일한다 —
     기본 CSS ease 보다 시작은 빠르고 끝은 더 부드럽게 감속한다. */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --motion-fast: 120ms var(--ease);
  --motion-base: 200ms var(--ease);
}