/* noriter — 디자인 토큰 정본 (3단계, designer, 2026-10-14)
   이 파일과 _design/tokens.json 은 같은 표에서 함께 만들었다 — 값을 고치면 둘 다 고친다.
   층 둘: ① 원색 층(--color-teal-700 처럼 색 이름) — 화면은 쓰지 않는다 ② 의미 층(--color-surface · --color-primary …, Material 3 이름) — 화면은 이것만 쓴다.
   선언은 :root 에 둔다(브라우저는 @theme 블록을 읽지 않는다, lessons #73). 테마: 해시·localStorage 가 html[data-theme] 를 정하고, 없으면 prefers-color-scheme. */

/* ① 원색 층 */
:root {
  --color-gray-0: #ffffff;
  --color-gray-25: #f5f7f8;
  --color-gray-50: #eef1f3;
  --color-gray-100: #e3e7ea;
  --color-gray-400: #848d95;
  --color-gray-450: #7b858e;
  --color-gray-600: #59626b;
  --color-gray-850: #24292e;
  --color-gray-900: #191d21;
  --color-night-950: #17191b;
  --color-night-900: #1f2225;
  --color-night-880: #222528;
  --color-night-850: #272b2f;
  --color-night-800: #30353a;
  --color-night-600: #737d86;
  --color-night-550: #7f8992;
  --color-night-300: #a2abb3;
  --color-night-100: #e6e9ec;
  --color-night-50: #f3f5f6;
  --color-teal-50: #e2f3f3;
  --color-teal-300: #45c4cb;
  --color-teal-700: #06737b;
  --color-teal-950: #163638;
  --color-teal-990: #0d1f20;
  --color-ember-50: #fdeee6;
  --color-ember-300: #ff8b52;
  --color-ember-700: #b9400b;
  --color-ember-950: #3a2418;
  --color-red-50: #fdecee;
  --color-red-300: #ff6b7a;
  --color-red-700: #c8243a;
  --color-red-950: #3d1d22;
  --color-red-990: #2a0d11;
  --color-green-50: #e8f4ea;
  --color-green-300: #62cc7f;
  --color-green-700: #27753b;
  --color-green-950: #183022;
  --color-amber-50: #fbf1dc;
  --color-amber-300: #f0b24d;
  --color-amber-700: #8f5a00;
  --color-amber-950: #352a14;
}

/* ② 의미 층 — 라이트(기본) */
:root {
  color-scheme: light;
  --color-surface: #ffffff; /* 쪽 바탕 · 목록 행 */
  --color-surface-container-low: #f5f7f8; /* 섹션 띠 8 · 입력 칸 · 유틸 띠 · 코드 블록 · 공지 행 */
  --color-surface-container: #eef1f3; /* 눌린 행 · 지금 보는 글 · 뼈대 */
  --color-surface-overlay: #ffffff; /* 시트 · 대화상자 · 말풍선 */
  --color-on-surface: #191d21; /* 제목 · 본문 */
  --color-on-surface-variant: #59626b; /* 메타 13 · 읽은 제목 · 보조 글 */
  --color-icon: #7b858e; /* 아이콘 · 비활성 아닌 회색 표식(비글자 3:1) */
  --color-outline: #848d95; /* 입력 칸 테두리 · 보조 단추 테두리(비글자 3:1) */
  --color-outline-variant: #e3e7ea; /* 구분선 1px */
  --color-primary: #06737b; /* 선택 탭 · 링크 · 주 단추 · 초점 링 · 공식 딱지 글자 */
  --color-on-primary: #ffffff; /* 주 단추 글자 */
  --color-primary-container: #e2f3f3; /* 선택 칩 · 고른 웃김 점수 · 공식 딱지 면 · 찾은 말 */
  --color-on-primary-container: #06737b; /* 위 면 위의 글자 */
  --color-tertiary: #b9400b; /* 열기 — 댓글 수 [n] · +n · 새 글 N · 안 읽음 점 · 순위 상승 */
  --color-tertiary-container: #fdeee6; /* 베스트 댓글 딱지 · HOT 딱지 면 */
  --color-on-tertiary-container: #b9400b; /* 위 면 위의 글자 */
  --color-error: #c8243a; /* 입력 오류 · 파괴 단추 면 */
  --color-on-error: #ffffff; /* 파괴 단추 글자 */
  --color-error-container: #fdecee; /* 오류 배너 면 */
  --color-success: #27753b; /* 규칙 충족 · 활성 점 */
  --color-success-container: #e8f4ea; /* 성공 배너 면 */
  --color-warning: #8f5a00; /* 점검 · 정지 · 한도 경고 글자 */
  --color-warning-container: #fbf1dc; /* 경고 배너 면 · 정지 딱지 면 */
  --color-inverse-surface: #24292e; /* 토스트 면 */
  --color-inverse-on-surface: #f3f5f6; /* 토스트 글 */
  --color-inverse-primary: #45c4cb; /* 토스트 정보 아이콘 · 실행 취소 글자 */
  --color-inverse-error: #ff6b7a; /* 토스트 오류 아이콘 */
  --color-inverse-success: #62cc7f; /* 토스트 성공 아이콘 */
  --color-inverse-warning: #f0b24d; /* 토스트 경고 아이콘 */
  --color-scrim: rgb(13 16 19 / 0.48);
  --shadow-overlay: 0 8px 24px rgb(16 20 24 / 0.12), 0 1px 2px rgb(16 20 24 / 0.08);
}

/* ② 의미 층 — 다크(짙은 회색, 순검정 아님). 같은 값이 두 번 — 아래 미디어 블록은 JS 가 없을 때를 위한 것이다. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-surface: #17191b;
  --color-surface-container-low: #1f2225;
  --color-surface-container: #272b2f;
  --color-surface-overlay: #222528;
  --color-on-surface: #e6e9ec;
  --color-on-surface-variant: #a2abb3;
  --color-icon: #7f8992;
  --color-outline: #737d86;
  --color-outline-variant: #30353a;
  --color-primary: #45c4cb;
  --color-on-primary: #0d1f20;
  --color-primary-container: #163638;
  --color-on-primary-container: #45c4cb;
  --color-tertiary: #ff8b52;
  --color-tertiary-container: #3a2418;
  --color-on-tertiary-container: #ff8b52;
  --color-error: #ff6b7a;
  --color-on-error: #2a0d11;
  --color-error-container: #3d1d22;
  --color-success: #62cc7f;
  --color-success-container: #183022;
  --color-warning: #f0b24d;
  --color-warning-container: #352a14;
  --color-inverse-surface: #e6e9ec;
  --color-inverse-on-surface: #1f2225;
  --color-inverse-primary: #06737b;
  --color-inverse-error: #c8243a;
  --color-inverse-success: #27753b;
  --color-inverse-warning: #8f5a00;
  --color-scrim: rgb(0 0 0 / 0.62);
  --shadow-overlay: 0 8px 24px rgb(0 0 0 / 0.48), 0 0 0 1px #30353a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-surface: #17191b;
    --color-surface-container-low: #1f2225;
    --color-surface-container: #272b2f;
    --color-surface-overlay: #222528;
    --color-on-surface: #e6e9ec;
    --color-on-surface-variant: #a2abb3;
    --color-icon: #7f8992;
    --color-outline: #737d86;
    --color-outline-variant: #30353a;
    --color-primary: #45c4cb;
    --color-on-primary: #0d1f20;
    --color-primary-container: #163638;
    --color-on-primary-container: #45c4cb;
    --color-tertiary: #ff8b52;
    --color-tertiary-container: #3a2418;
    --color-on-tertiary-container: #ff8b52;
    --color-error: #ff6b7a;
    --color-on-error: #2a0d11;
    --color-error-container: #3d1d22;
    --color-success: #62cc7f;
    --color-success-container: #183022;
    --color-warning: #f0b24d;
    --color-warning-container: #352a14;
    --color-inverse-surface: #e6e9ec;
    --color-inverse-on-surface: #1f2225;
    --color-inverse-primary: #06737b;
    --color-inverse-error: #c8243a;
    --color-inverse-success: #27753b;
    --color-inverse-warning: #8f5a00;
    --color-scrim: rgb(0 0 0 / 0.62);
    --shadow-overlay: 0 8px 24px rgb(0 0 0 / 0.48), 0 0 0 1px #30353a;
  }
}

/* 글자 — px 로 정한다(sp/pt 1:1). 서체는 한 가족(Pretendard) + 코드만 JetBrains Mono */
:root {
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-display: var(--font-sans);
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;
  --text-caption: 12px; --text-caption--line-height: 16px; /* 딱지 · 아래 탭 글자 · 진행 표시 */
  --text-meta: 13px; --text-meta--line-height: 18px; /* 메타 줄 · 꼬리 · 유틸 띠 */
  --text-label: 14px; --text-label--line-height: 20px; /* 토글 · 단추 작은 글 · 댓글 수 [n] */
  --text-body-sm: 15px; --text-body-sm--line-height: 22px; /* 설정 행 · 문서 조항 */
  --text-row: 16px; --text-row--line-height: 22px; /* 목록 제목(글자 크기 단계로 바뀜) */
  --text-body: 16px; --text-body--line-height: 26px; /* 댓글 · 쪽지 · UI 문단 */
  --text-reading: 17px; --text-reading--line-height: 29px; /* 글 본문(글자 크기 단계로 바뀜) */
  --text-title-sm: 18px; --text-title-sm--line-height: 26px; /* 구역 머리 */
  --text-title: 20px; --text-title--line-height: 28px; /* 모바일 글 제목 · 쪽 h1 */
  --text-headline: 24px; --text-headline--line-height: 32px; /* 데스크톱 글 제목 */
  --text-display: 32px; --text-display--line-height: 40px; /* 가이드 h1 */
  --text-code-display: 56px; --text-code-display--line-height: 60px; /* 오류 코드 숫자(3자) */
  --text-code: 14px; --text-code--line-height: 22px; /* 코드 블록(JetBrains Mono) */
  --tracking-tight: -0.01em; /* 18 이상 제목만 */
}
/* 글자 크기 4단계(설정 · #text=) — 앱 동적 글꼴과 같은 단계 이름: 작게 s · 보통 m · 크게 l · 아주 크게 xl */
:root[data-text="s"] { --text-row: 15px; --text-row--line-height: 21px; --text-reading: 15px; --text-reading--line-height: 26px; }
:root[data-text="l"] { --text-row: 17px; --text-row--line-height: 24px; --text-reading: 19px; --text-reading--line-height: 32px; }
:root[data-text="xl"] { --text-row: 18px; --text-row--line-height: 25px; --text-reading: 21px; --text-reading--line-height: 35px; }

/* 간격 — 4/8 척도 + 이름 붙은 치수 */
:root {
  --spacing: 4px;
  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-0-5: 2px;
  --spacing-gutter-m: 12px; /* 모바일 바깥 여백 */
  --spacing-gutter-d: 24px; /* 태블릿 · 데스크톱 바깥 여백 */
  --spacing-row-y: 10px; /* 목록 셀 위아래 안쪽 */
  --spacing-band: 8px; /* 모바일 섹션 띠 */
  --spacing-touch: 48px; /* 최소 터치 타깃(44pt · 48dp 를 웹도 48) */
  --spacing-bar-m: 48px; /* 모바일 주 막대 · 게시판 탭 · 구역 머리 */
  --spacing-tabbar: 56px; /* 아래 탭 막대 · 행동 막대(+safe-area) */
  --spacing-utility: 32px; /* 데스크톱 유틸 띠 */
  --spacing-bar-d: 64px; /* 데스크톱 주 막대 */
  --spacing-thumb: 48px; /* 모바일 셀 썸네일 */
  --spacing-thumb-d: 64px; /* 데스크톱 셀 썸네일 폭(4:3 → 48 높이) */
  --spacing-avatar-s: 28px; /* 댓글 아바타 */
  --spacing-avatar-m: 40px; /* 행 아바타 */
  --spacing-avatar-l: 72px; /* 프로필 아바타 */
  --spacing-reading-col: 720px; /* 글 본문 · 문서 최대 폭 */
  --spacing-main: 860px; /* ≥1200 본문 칸 */
  --spacing-rail: 316px; /* ≥1200 레일 */
  --spacing-rail-narrow: 300px; /* 1024–1199 레일 */
  --spacing-page: 1200px; /* 최대 컨테이너 */
}

/* 모서리 · 그림자(오버레이에만) */
:root {
  --radius-xs: 4px; /* 딱지 · 키 표시 */
  --radius-sm: 6px; /* 썸네일 · 입력 칸 · 단추 */
  --radius-md: 8px; /* 본문 이미지 · 코드 블록 · 알림 아이콘 칸 */
  --radius-lg: 12px; /* 바텀 시트 위 모서리 · 대화상자 · 말풍선 */
  --radius-full: 9999px; /* 아바타 · 점 · 진행 점만 */
  --shadow-none: none;
}

/* 움직임 — 길이는 ms, 이징은 cubic-bezier 수치(Flutter Cubic · RN Easing.bezier 로 그대로) */
:root {
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); /* 나타남 — 빨리 시작 천천히 멈춤 */
  --ease-in: cubic-bezier(0.4, 0, 1, 1); /* 사라짐 */
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1); /* 바텀 시트(iOS 시트 결) */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* 제자리 변화 */
  --default-transition-duration: 140ms;
  --default-transition-timing-function: var(--ease-standard);
  --animate-toast-in: kf-rise 180ms var(--ease-out) both;
  --animate-toast-out: kf-fade 140ms var(--ease-in) reverse both;
  --animate-dialog-in: kf-scale-in 160ms var(--ease-out) both;
  --animate-sheet-in: kf-sheet 240ms var(--ease-sheet) both;
  --animate-sheet-out: kf-sheet 200ms var(--ease-in) reverse both;
  --animate-scrim-in: kf-fade 160ms var(--ease-out) both;
  --animate-skeleton: kf-pulse 1200ms var(--ease-standard) infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --animate-toast-in: none; --animate-toast-out: none; --animate-dialog-in: none;
    --animate-sheet-in: none; --animate-sheet-out: none; --animate-scrim-in: none; --animate-skeleton: none;
    --default-transition-duration: 0ms;
  }
}