/* ==========================================================================
   공감공간 통합 플랫폼 — 디자인 토큰(정본)
   운영(PMS) · 협업(Work) 두 영역이 공유하는 하나의 룩앤필.

   색·글꼴·타이포·간격·반경·그림자·모션·레이어·테마·밀도의 값만 둔다. 컴포넌트·유틸리티
   클래스 규칙은 components.css에 있다(앱은 tokens.css → components.css 순서로 불러온다).
   Tailwind는 CSS 변수를 참조하고, 원시 색이 필요한 차트와 토큰 교환 파일은
   `pnpm tokens:build`로 생성한다.
   운영·변경 절차: docs/development/design-system-governance.md
   ========================================================================== */

/* Pretendard 가변 글꼴(45–920)을 저장소 의존성에서 직접 서빙한다. unicode-range 분할로 화면에 쓰인 글자 조각만 받는다. */

:root {
  /* Surfaces — 바탕(paper) → 작업 면(surface) → 안쪽 면(surface-2) 세 단계로 구분한다.
     밝은 면 다섯 가지가 명도 5 안에 몰려 구분을 1px 선에 기대던 것을 면의 차이로 옮긴다
     (바탕↔작업 면 1.16 → 1.21:1). surface-3 은 선택 상자·비활성 같은 컨트롤 면이다. */
  --paper: #dce3d8; /* 잇는 공간: 세이지 바탕 */
  /* 따뜻한 스톤색 작업 면. 2026-09-24 스톤(#f3f1e8)과 색상·채도는 같고 명도만 올렸다. */
  --surface: #f8f6ed;
  --surface-2: #ebece3;
  --surface-3: #d6dfd1;
  /* 전역 탐색은 기존 스톤 작업 면으로 본문의 세이지 바탕과 구분한다.
     브라우저 theme-color·WorkspacePreferenceEffects도 같은 면을 사용한다. */
  --shell-surface: var(--surface);
  /* 1단계 탐색(데스크톱 레일·폰 하단 탭)만 깊은 녹청 면이다. */
  --nav-surface: #243e36;
  --nav-hover: #304d43;
  --nav-selected: #456354;
  --nav-ink: #eff2e6;
  --nav-muted: #ced8cf; /* 현재 메뉴(nav-selected) 위에서도 4.5:1 */
  --nav-line: #3d554a;
  --nav-danger: #f2aca3;
  /* 서브메뉴(2단계 탐색)는 새 면을 만들지 않고 바탕 위에 둔다(A′, 2026-10-04 사용자 결정). 틀을 가볍게 해
     본문이 눈에 들어오게 하고, 작은 메뉴 글자를 밝은 바탕의 어두운 글자로 읽게 한다. 본문과는 오른쪽
     1px --line 으로 나눈다. 명도는 쉼(바탕) < hover < 현재 항목 순으로 한 단계씩 오른다: 라이트는
     hover 안쪽 면·현재 작업 면, 다크는 면의 명도 순서가 반대라 hover 작업 면·현재 안쪽 면이다.
     현재 항목은 면만으로 알리지 않고 굵기 600·brand-ink 글자·aria-current 를 함께 둔다. */
  --subnav-surface: var(--paper);
  --subnav-hover: var(--surface-2);
  --subnav-selected: var(--surface);
  /* 보기 전환(SegmentedControl): 테두리 없는 옅은 홈(글자색 7%를 깔아 바탕·카드 어디서나 한 단계 어둡다)
     위에 가장 밝은 칸이 떠서 지금 보기를 알린다. 다크는 작업 면이 어두워 한 단계 밝은 컨트롤 면을 띄운다. */
  --segmented-track: color-mix(in srgb, var(--ink) 7%, transparent);
  --segmented-thumb: var(--surface);
  --segmented-hover: color-mix(in srgb, var(--ink) 6%, transparent);
  --overlay: rgba(24, 28, 26, 0.44);

  /* Ink (텍스트) */
  --ink: #18332f;
  --ink-2: #46594e;
  /* WCAG AA(4.5:1) 충족 — 이전 #8a908b 는 흰 배경에서 3.26:1 로 미달이었다. */
  --ink-3: #516054;
  --on-brand: #ffffff;

  /* Lines */
  --line: #c4cfc1;
  --line-2: #adbfae;
  /* 입력·선택 상자처럼 테두리로 존재를 알리는 컨트롤의 경계. WCAG 1.4.11(비텍스트 3:1)을
     paper·surface·surface-2 위에서 모두 넘긴다(작업 면 3.89:1, 바탕 3.22:1). line-2(1.7:1)는 장식 구분선용이다.
     (Atlassian color.border.input, Fluent 2 NeutralStrokeAccessible 과 같은 역할 분리) */
  --control-border: #6d8072;

  /* Brand — 공통 브랜드(청록). 주 액션·활성 내비 */
  --brand: #125d50;
  --brand-ink: #104f44;
  --brand-hover: #0e4d42;
  --brand-tint: #dbe6d8;
  --brand-tint-2: #cbdacd;
  --surface-connected: var(--brand-tint-2);

  /* 영역 힌트 컬러 — 룩앤필은 공통, 위치 표식만 미세하게 */
  --work: var(--brand); /* 협업 */
  --pms: #b9701a; /* 운영(호스피털리티 앰버) */
  --personal: #5b5fbf; /* 개인 */

  /* Semantic */
  --amber: #b9701a;
  --amber-tint: #f6ecdd;
  --danger: #c0453b;
  --danger-tint: #f7e4e1;
  --success: #2e7d52;
  --success-tint: #e1f0e7;
  --info: #2c6bb3;
  --info-ink: #245b99;
  --info-tint: color-mix(in srgb, var(--info) 12%, var(--surface));
  --personal-ink: #5155a5;
  --personal-tint: color-mix(in srgb, var(--personal) 12%, var(--surface));
  --rose-ink: #9b3560;
  --rose-tint: #fceef4;
  --cyan-ink: #216574;
  --cyan-tint: #eaf6f8;
  --on-brand-hero: #ffffff;
  --brand-hero-glow: #12a08f;
  --brand-hero-shadow: #0a4a44;
  --media-overlay-surface: #303030;
  --media-overlay-line: rgba(255, 255, 255, 0.5);
  --security-watermark: rgba(45, 35, 90, 0.11);
  /* 차트와 브랜드 그래디언트도 같은 정본에서 생성한다. */
  --brand-gradient-start: #13a594;
  --chart-brand-1: #f2f7f5;
  --chart-brand-2: #cfe6df;
  --chart-brand-3: #8cc7b8;
  --chart-brand-4: #3f9b86;
  --chart-diverging-1: #2f6f97;
  --chart-diverging-2: #dfe7ec;
  --chart-diverging-mid: #ffffff;
  --chart-diverging-4: #f2dcd4;
  --on-danger: #ffffff;
  --on-success: #ffffff;
  --on-info: #ffffff;

  /* Layer order — 오버레이가 화면별 숫자 경쟁을 하지 않도록 한 축에서 관리한다. */
  --z-topbar: 5;
  --shell-topbar-height: max(56px, calc(2.75rem + var(--space-2)));
  /* 폰 하단 탭·행동 바가 화면 아래에서 차지하는 높이. 하단 슬롯을 그리는 AppShell 이 값을 바꾸고,
     토스트·시트는 이 높이 위에 놓인다. 하단 슬롯이 없으면 0이다. */
  --shell-bottom-chrome: 0px;
  --z-modal: 50;
  --z-overlay-scrim: 44;
  --z-overlay-panel: 46;
  --z-thread: 47;
  --z-popover: 95; /* 검색(60)·확인창(90) 안에서 열리는 셀렉트 목록도 위로 */
  --z-search: 60;
  --z-confirm: 90;
  --z-drag: 120;
  --z-upload: 1200;
  --z-security-shield: 30000;
  --z-security-watermark: 9000;
  --z-security-notice: 8999;
  --z-skip-link: 200;
  --z-toast: 2000;

  /*
    틴트 배경 위 "텍스트"로 쓰는 색.
    배지·칩은 연한 틴트 위에 semantic 색으로 글자를 얹는데, 원색 그대로는 대비가 4.5:1 에
    못 미친다(amber 3.33 / danger 4.12 / success 4.27). 배경·테두리는 원색을 유지하고
    글자만 이 변수를 쓴다 — 색감은 유지하면서 대비만 확보한다.
    앰버 글자는 바탕(paper) 위에서도 4.5:1 을 넘도록 #9c5a10(4.13:1)에서 한 단계 내렸다.
    조합별 기준은 scripts/design-token-contrast.test.mjs 가 검사한다.
  */
  --amber-ink: #8a5010;
  --danger-ink: #a8362d;
  --success-ink: #2a7049;
  --pms-ink: #9c5a10;

  /* Radius */
  --r-xs: 6px;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-room: 40px; /* 대표 업무/연결 영역에만 사용하는 심볼 유래 곡선 */
  --r-full: 999px;

  /* 기본 눈금과 용도별 간격을 분리한다. */
  --space-px: 1px;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-4-5: 18px;
  --space-5: 20px;
  --space-5-5: 22px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-14: 56px;
  --space-20: 80px;

  /* Shadow */
  --sh-1: 0 1px 2px rgba(20, 28, 24, 0.06), 0 1px 3px rgba(20, 28, 24, 0.05);
  --sh-2: 0 4px 12px rgba(20, 28, 24, 0.08), 0 2px 4px rgba(20, 28, 24, 0.05);
  --sh-3: 0 12px 32px rgba(20, 28, 24, 0.16), 0 4px 10px rgba(20, 28, 24, 0.08);

  /* 사용자 조작에만 쓰는 짧은 전환. 레이아웃·상시 레이어 승격은 하지 않는다.
     - feedback: 색·투명도 반응, press: 눌림(투명도·살짝 줄어듦), panel: 시트·드로어.
     - enter/exit: 떠 있는 층(메뉴·팝오버·대화상자·토스트)이 나타나고 사라질 때. 나갈 때를 더 짧게 해
       닫는 동작이 굼뜨게 느껴지지 않게 한다(@starting-style 진입 + 닫힘 상태 전환, 2026-10-06).
     - ease 는 표준, ease-enter 는 감속(들어와 멈춤), ease-exit 는 가속(빠르게 빠짐). */
  --motion-feedback: 120ms;
  --motion-press: 60ms;
  --motion-panel: 180ms;
  --motion-enter: 180ms;
  --motion-exit: 120ms;
  --motion-ease: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-enter: cubic-bezier(0, 0, 0, 1);
  --motion-ease-exit: cubic-bezier(0.3, 0, 1, 1);
  --motion-press-scale: 0.97;
  --motion-brand-loader: 3000ms;
  --motion-brand-loader-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Control density */
  --control-h-table: 32px;
  --control-h-search: 38px;
  --control-h-form: 44px;
  --control-h-hero: 48px;
  /* 폰 행동 바·홈 근무 카드의 주 버튼(출근·퇴근). 한 손으로 누르는 버튼이라 조밀 밀도에서도 줄이지 않는다. */
  --control-h-cta: 56px;
  --control-pad-x-table: 10px;
  --control-pad-x-search: 12px;
  --control-pad-x-form: 14px;
  --control-pad-x-hero: 16px;
  --control-focus: 0 0 0 3px var(--brand-tint);
  --control-focus-danger: 0 0 0 3px var(--danger-tint);
  /* 제품 터치 최소 히트영역 (44×44 CSS px).
     32/38px 컨트롤을 시각적으로 키우지 않고 히트영역만 넓히는 데 쓴다. */
  --control-touch-min: 44px;
  /* 표 칸 위아래 여백(DataGrid 행 높이). 조밀 밀도이면서 정밀 포인터일 때만 줄인다(아래 @media). */
  --table-cell-pad-y: 6px;

  /* ── 페이지 레이아웃 프로필 ──
     헤더(.phead) · 툴바(.toolbar) · 본문(.page-body)이 서로 다른
     좌우 여백(24/24/28px)을 갖고 있어, 같은 화면 안에서 제목과 본문 첫 글자가
     세로로 어긋났다. 셋을 하나의 거터 토큰으로 묶는다. */
  --page-pad-x: var(--space-6);
  --page-pad-y: var(--space-6);
  /* 페이지 제목·동작은 바탕 위에 묶고 아래 여백과 경계로 본문 시작을 알린다.
     본문의 여백은 계속 --page-pad-y 한 곳에서 소유한다. */
  --phead-pad-top: 16px;
  --phead-pad-bottom: var(--space-3);
  --toolbar-pad-y: 14px;
  /* 본문 블록 사이 세로 리듬 */
  --page-gap: var(--space-4);
  /* 독립 화면·본문 안 읽기/입력 폭. 앱의 페이지 바깥 영역은 항상 전체 폭이다. */
  --content-w-narrow: 900px;
  --content-w-default: 1120px;
  --content-w-overview: 1440px;
  --content-w-reading: 900px;
  --content-w-form: 720px;

  /* 액션 간격 — 화면마다 6/8/10/12px 이 섞여 있어 버튼 묶음의 리듬이 달랐다.
     묶음 안(--action-gap)과 묶음 사이(--action-gap-lg) 두 눈금만 쓴다. */
  --action-gap: var(--space-2);
  --action-gap-lg: var(--space-3);
  --form-section-gap: var(--space-6);
  --form-row-gap: var(--space-4);
  --form-field-gap: var(--space-1-5);

  /* Type */
  --font:
    "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont,
    system-ui, sans-serif;
  --font-size-display: 2rem;
  --font-size-h1: 1.5rem;
  --font-size-h2: 1.125rem;
  --font-size-h3: 0.9375rem;
  --font-size-body: 0.875rem;
  --font-size-sm: 0.8125rem;
  --font-size-xs: 0.75rem;
  /* 배지 숫자·단축키·레일 라벨·메뉴 묶음 제목 같은 11px 보조 글자. rem 이라 글자 확대를 따른다. */
  --font-size-2xs: 0.6875rem;
  /* 글자 입력칸(.input·.textarea·날짜·콤보박스·대화 입력)의 글자. 마우스·트랙패드에서는 본문과 같고,
     터치에서는 16px 이상이다(아래 @media (pointer: coarse)). */
  --font-size-control: var(--font-size-body);
  --line-height-display: 1.25;
  --line-height-h1: 1.3;
  --line-height-h2: 1.35;
  --line-height-h3: 1.4;
  --line-height-body: 1.55;
  --line-height-sm: 1.5;
  --line-height-xs: 1.45;

  /* Brandmark — 공감공간 공식 로고 심볼(AI 원본 벡터 추출). */
  --mark-symbol: url("/icons/gonggam-space-symbol.svg");
  --mark-surface: #ffffff; /* 공식 검정 심볼의 가시성은 테마에 따라 반전하지 않는다. */
  --mark-loader-size: 76px;
  --mark-loader-filter: none;
}

/* 모든 UI 소비자가 같은 테마·밀도 값을 사용한다. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --mark-loader-filter: brightness(0) invert(1);
  /* 다크도 면 세 단계가 서로 붙지 않게 한 단계씩 띄운다(바탕↔작업 면 1.08 → 1.16:1). */
  --paper: #111513;
  --surface: #1e2420;
  --surface-2: #262d28;
  --surface-3: #313933;
  --shell-surface: var(--surface);
  --nav-surface: #162b23;
  --nav-hover: #294539;
  --nav-selected: #385644;
  --nav-line: #334d3e;
  /* 다크는 작업 면(#1e2420)이 안쪽 면(#262d28)보다 어두워, hover 가 현재 항목보다 밝아지지 않게 둘을 바꾼다. */
  --subnav-hover: var(--surface);
  --subnav-selected: var(--surface-2);
  --segmented-track: color-mix(in srgb, var(--ink) 6%, transparent);
  --segmented-thumb: var(--surface-3);
  /* 다크는 hover 와 고른 칸이 모두 밝아지는 쪽이라, hover 를 반만 밝혀 고른 칸과 헷갈리지 않게 한다. */
  --segmented-hover: color-mix(in srgb, var(--ink) 3%, transparent);
  --overlay: rgba(0, 0, 0, 0.7);
  --ink: #f1f4f2;
  --ink-2: #c4cbc6;
  --ink-3: #a9b2ac;
  --line: #323a35;
  --line-2: #465048;
  /* 다크의 선택 상자·입력 비활성 면(surface-3) 위에서도 3:1 을 넘는다(#6e7770 은 2.84:1). */
  --control-border: #7a847c;
  --brand: #58b9aa;
  --brand-ink: #8bd1c6;
  --brand-hover: #70c6b8;
  --brand-tint: #183b35;
  --brand-tint-2: #245047;
  --amber-tint: #3b2c1c;
  --danger-tint: #432522;
  --success-tint: #1e392a;
  --amber-ink: #efb96f;
  --danger-ink: #f1988e;
  --success-ink: #81c99d;
  --info-ink: #9dc7f0;
  --personal-ink: #b4b6ee;
  --rose-ink: #ed9cbc;
  --rose-tint: #3e2432;
  --cyan-ink: #8ed1df;
  --cyan-tint: #18363c;
  --security-watermark: rgba(210, 200, 255, 0.11);
  --on-brand: #0c1613;
  --sh-1: 0 1px 3px rgba(0, 0, 0, 0.25);
  --sh-2: 0 4px 14px rgba(0, 0, 0, 0.32);
  --sh-3: 0 14px 34px rgba(0, 0, 0, 0.45);
}

:root[data-density="compact"] {
  --control-h-table: 28px;
  --control-h-search: 34px;
  --control-h-form: 38px;
  --control-h-hero: 42px;
  --page-pad-x: 16px;
  --page-pad-y: 16px;
  --phead-pad-top: 12px;
  --phead-pad-bottom: var(--space-2);
  --toolbar-pad-y: 10px;
  --page-gap: 12px;
}

/* 마우스·트랙패드로 보는 조밀 표만 칸 여백을 줄인다. 터치는 조밀해도 누를 자리를 줄이지 않는다. */
@media (pointer: fine) {
  :root[data-density="compact"] {
    --table-cell-pad-y: 4px;
  }
}

/* 터치 입력 글자는 16px 아래로 내리지 않는다. iOS Safari 는 글자가 16px 보다 작은 입력칸에 포커스하면
   화면을 확대하고 되돌리지 않아 메뉴가 잘리고 하단 탭이 화면 밖으로 밀렸다(BR-0006, 1.14배).
   확대 자체(핀치)는 막지 않는다 — viewport 의 maximum-scale·user-scalable 로 해결하지 않는다.
   16px 은 iOS 의 기준(CSS px), 1rem 은 사용자의 글자 확대를 따른다. 조밀 밀도에서도 줄이지 않는다. */
@media (pointer: coarse) {
  :root,
  :root[data-density="compact"] {
    --font-size-control: max(16px, 1rem, var(--font-size-body));
  }
}