/* ==========================================================================
   tokens.css — help.textory.com 새 판 · 토큰 (B0 · DESIGN 3절 · 3-9 이름 그대로)
   - 운영판(W1 · 10/19): 위 띠가 없어 --band-h = 0(셸 · 쪽 CSS 의 calc 가 그대로 돎).
     --notes · --notes-bg 는 system.css(디자인 시스템 문서 쪽)만 씀 — 사이트 쪽에선 0.
   - 테마는 html[data-theme="light|dark"] 하나로만 고른다(prefers-color-scheme 미디어 쿼리 직접 사용 0
     — 4-1 head 스크립트가 기기 설정을 읽어 첫 그림 전에 data-theme 를 단다).
   - 폭 미디어 쿼리(--head-h · --band-h)는 된다 — 「미디어 쿼리 0」은 색 테마 얘기(3-9).
   - 다른 빌더는 이 이름만 쓴다. 값이 실제 폭에서 안 맞으면 자기 파일에서 덮고 「판단:」 주석.
   ========================================================================== */

/* 글꼴 — Pretendard Variable 서브셋 하나(U4 · 11절). 쪽 head 에 preload 가 있다(4-1).
   판단(10/19 통합 · 총괄 ④ · B8 HE-glyphs): 2단계 다시 굽기 뒤에도 남는 「⋮」(운영 본문 · 유튜브 장 이름 「삼성 메시지 ⋮」) ·
   「◉」(역 ⑤ 그림 속 앱 화면 글자 「◉ 즉시 발송」) · 「日本語」(언어 메뉴)는 Pretendard 원본에도 없는 글자라 서브셋에 넣을 수 없다 →
   시스템 글꼴로 그려지는 그대로 둠(운영 · 앱 · 언어 이름 글자를 바꾸면 새 문구 · 그림 속 글자 = 실제 화면 글자 원칙 1-4 ④).
   「▾」 · 「☰」 는 화면에 쓰지 않음(core.css 주석에만 — SVG 아이콘). */
@font-face{
  font-family:"Pretendard Variable";
  src:url("/assets/fonts/PretendardVariable.subset.woff2") format("woff2-variations"),
      url("/assets/fonts/PretendardVariable.subset.woff2") format("woff2");
  font-weight:45 920;
  font-style:normal;
  font-display:swap;
}

:root{
  /* ── 3-1 사이트 색(라이트) ── */
  --bg:#F4F1EA;            /* 크림 바탕 */
  --bg-2:#ECE7DE;          /* 칩 · 제품 3칸 트랙 · 바닥글 — 위에 --accent 글자 · 의미 있는 선 0 */
  --surface:#FFFFFF;       /* 판 · 카드 · 질문 칸 · 답 카드 */
  --surface-2:#FAF8F4;     /* 판 안쪽 칸 · 열린 역 패널 */
  --ink:#2C3A42;           /* 제목 · 본문 — 크림 10.39 */
  --ink-2:#4F5A62;         /* 보조 — 크림 6.27 · 바탕2 5.74 */
  --ink-3:#5F676E;         /* 작은 보조 · 시각 숫자 — 크림 5.10 · 바탕2 4.67 */
  --line:#E2DCD1;          /* 칸 나눔(장식) */
  --line-2:#D3CBBE;        /* 칩 테두리 */
  --line-strong:#857E72;   /* 입력칸 · 단추 테두리(비글자 3:1) */
  --accent:#FA4A20;        /* 점 · 선 · 아이콘 · WCAG 큰 글자만(--bg · --surface 위) */
  --accent-ink:#BF340D;    /* 작은 주황 글자(크림 5.01 · 바탕2 4.59 · 흰 5.66) · ≤600 강조 낱말 */
  --focus:#D8390F;         /* 초점 고리 3px */
  --btn:#2C3A42; --btn-ink:#FFFFFF;                 /* 주 단추(「Textory 열기」 · 「다음」) */
  --launcher:#2B6CB0; --launcher-dot:#C9CED6;      /* 런처만 — 사이트 색과 무관 · 다크도 같음 */
  --notes:#4F43C9; --notes-bg:#EEEBFF;              /* 디자인 시스템 문서 쪽 전용 — 사이트 안에 쓰지 않음 */

  /* ── 3-6 그림자(라이트 · 차콜 계열) ── */
  --sh-1:0 1px 2px rgba(44,58,66,.06), 0 2px 8px rgba(44,58,66,.05);
  --sh-2:0 2px 6px rgba(44,58,66,.07), 0 14px 32px rgba(44,58,66,.10);
  --sh-3:0 4px 14px rgba(44,58,66,.06), 0 30px 80px rgba(44,58,66,.13);
  --sh-launcher:0 4px 12px rgba(0,0,0,.18);

  /* ── 3-6 모서리 ── */
  --r-board:24px;          /* 히어로 판 · 역 패널 · 도식 판 */
  --r-card:18px;           /* 카드 · 플레이어(sm 14) */
  --r-btn:12px;            /* 단추 */
  --r-chip:999px;          /* 칩 · 알약 */
  --r-rec:12px;            /* 그림 속 기록 */
  --r-figrect:6px;         /* 그림 강조 상자 */
  --r-answer:0 24px 24px 24px;   /* 답 카드(+ 「답」 꼬리표 12 12 0 0) */
  --r-qfield:20px;   /* 질문 칸 — 「질문」 꼬리표 없앰(사용자 10/20) · 네 모서리 둥글게 */

  /* ── 크기 · 자리 ── */
  --chat-lane:84px;        /* 런처 + 8px 금지 구역(3-8) */
  --lane-cut:0px;          /* ≤1023 「채팅 길」: 조작 · 글자 줄은 max-width:calc(100% - var(--lane-cut)) → 오른쪽 84 에서 끝남(md 52 · sm 68) */
  --font:"Pretendard Variable",system-ui,sans-serif;
  /* 끈끈한 칸 오프셋 — 빌더 점검 Q1 · H23 (이 셋 말고 머리글 높이를 따로 계산하지 않음) */
  --band-h:0px; --head-h:64px; --sticky-top:calc(var(--band-h) + var(--head-h)); --chipbar-h:52px;
  --prodbar-h:44px;        /* ≤1279 머리글 아래 제품 3칸 줄(끈끈하지 않음 · H23) */
  --wrap:min(1240px, 100% - 200px);   /* ≥1024 본문 틀 → 오른쪽 끝 ≤ W−100(H14) */
  --section-gap:96px;      /* 칸 사이(≥1024 96 · ≤1023 64 — 3-5) */

  /* ── 3-7 z-index ── */
  --z-chipbar:20; --z-header:30; --z-ghost:35; --z-launcher:70; --z-notes:90; --z-mockband:100;

  /* ── 5-2 움직임 토큰(CSS 쪽 — 스프링은 motion.js) ── */
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ui-fast:160ms;         /* 올림 · 누름 120~200ms */

  /* ── 3-2 다시 그린 제품 화면(--ui-* · ui-kit 전용 · 사이트 길잡이 색으로 쓰지 않음) ──
     글자/바탕 짝은 --ui-x(글자) · --ui-x-bg(바탕) 이름으로 둔다. */
  --ui-msg:#2F67AE;  --ui-msg-bg:#E8F1FC;    /* 필터 칩 「메시지」 · 수신 아이콘 원 (5.02) */
  --ui-call:#287346; --ui-call-bg:#E6F5EC;   /* 「통화」 (5.13) */
  --ui-note:#9A5608; --ui-note-bg:#FCF1DC;   /* 「기록」 (5.06) */
  --ui-in:#0F7B67;                           /* 「수신」 on 흰 5.19 */
  --ui-missed:#C13F2A;                       /* 「부재중 전화」 on 흰 5.23 */
  --ui-memo:#FCF6D2; --ui-memo-ink:#2C3A42;  /* 메모 노랑 바탕 · 글자 --ink */
  --ui-new:#4E5DDB;  --ui-new-bg:#EEF0FD;    /* 「★NEW」 (4.73) */
  --ui-orange:#F0781E;                       /* 선 · 테두리 · 아이콘 · 활성 막대 — 글자색 · 흰 글자 채움 0 */
  --ui-orange-fill:#D8390F;                  /* 흰 글자가 얹히는 주 단추 채움(흰 4.65 · H29) */
  --ui-orange-text:#D8390F;                  /* 그림 속 주황 글자(흰 판 위 4.65) */
  --ui-indigo:#484BE1;                       /* 「약속 만들기」 저장 · 소요시간 선택 */
  --ui-pc-top:#2A3042; --ui-pc-rail:#424260; --ui-pc-side:#303048;   /* 웹 맨 위 바 · 레일 · 사이드 */
  --ui-phone-bg:#D4E8F8;                     /* 앱 스토리 연하늘 */
  /* 아바타(흰 이니셜 · 모두 4.5 이상) — data-c 이름과 짝 */
  --ui-av-green:#3B7A62; --ui-av-blue:#2F59BD; --ui-av-purple:#8A4FB0; --ui-av-brown:#B4532A; --ui-av-teal:#2C6E8F;

  color-scheme:light;
}

/* ── 폭에 따라 바뀌는 크기(색 테마와 무관) ── */
@media (max-width:1279.98px){ :root{ --head-h:56px; } }
@media (max-width:1023.98px){ :root{ --wrap:calc(100% - 64px); --section-gap:64px; --lane-cut:52px; } }
@media (max-width:600.98px){  :root{ --wrap:calc(100% - 32px); --lane-cut:68px; } }
/* 기본 배율: 큰 화면은 브라우저 90% 축소와 같게(사용자 10/20) */
@media (min-width:1024px){ html{ zoom:.9; } }

/* 앵커 이동 · TX.scrollTo 공용 오프셋(3-9) */
html{ scroll-padding-top:calc(var(--sticky-top) + 16px); }
html[data-page="hub"]{ scroll-padding-top:calc(var(--sticky-top) + var(--chipbar-h) + 16px); }

/* ── 3-1 · 3-2 · 3-6 다크 ── */
html[data-theme="dark"]{
  --bg:#15191C; --bg-2:#1D2125; --surface:#23282D; --surface-2:#1B2024;
  --ink:#EEEAE3; --ink-2:#C9C4BB; --ink-3:#A9A49C;
  --line:#30363C; --line-2:#3B4249; --line-strong:#737980;
  --accent:#FA4A20; --accent-ink:#FF7A52; --focus:#FF7A52;
  --btn:#EEEAE3; --btn-ink:#15191C;
  --notes:#C9C2FF; --notes-bg:#25213F;

  --sh-1:0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.35);
  --sh-2:0 2px 6px rgba(0,0,0,.45), 0 14px 32px rgba(0,0,0,.45);
  --sh-3:0 4px 14px rgba(0,0,0,.55), 0 30px 80px rgba(0,0,0,.55);

  --ui-msg:#8DB8F0;  --ui-msg-bg:#1E2A38;
  --ui-call:#7FD1A0; --ui-call-bg:#1C2C24;
  --ui-note:#F0C27A; --ui-note-bg:#2E2618;
  --ui-in:#5FD3B8; --ui-missed:#FF8A7A;
  --ui-memo:#3A3420; --ui-memo-ink:#EEEAE3;
  --ui-new:#AEB8FF;  --ui-new-bg:#262B4A;
  --ui-orange-fill:#C9370E;                  /* 흰 글자 5.20 */
  --ui-orange-text:#F0781E;                  /* 다크 판 위 5.24 */
  --ui-indigo:#7C80FF;
  --ui-phone-bg:#1F2A33;                     /* 같은 구조의 어두운 판(E8) */

  color-scheme:dark;
}

/* ── 3-3 앱 쪽 강조(body[data-product] 가 --accent* 를 덮음) ── */
body[data-product="voicenote"]{ --accent:#6366F1; --accent-ink:#4F46E5; --focus:#4F46E5; }
html[data-theme="dark"] body[data-product="voicenote"]{ --accent-ink:#A5B4FC; --focus:#A5B4FC; }
body[data-product="loela"]{ --accent:#FF6F61; --accent-ink:#B83A2E; --focus:#B83A2E; }   /* --accent 는 점 · 채움 장식만 */
html[data-theme="dark"] body[data-product="loela"]{ --accent-ink:#FF8A7E; --focus:#FF8A7E; }