/* LiveLlike — common/tokens.css
 *
 * 디자인 토큰 단일 출처 (CLAUDE.md §4). 화면 CSS 는 색·간격·글자를 여기서만 읽는다.
 *
 * v3 — 어두운 몰입형. 공고판의 구조는 두되, 톤은 캐릭터 채팅 앱처럼 그림이 앞에 서고
 * 크롬(버튼·선·글자)은 뒤로 물러난다. 색은 **라일락 하나**다 — '살아보기' · 선택 ·
 * 립톤(화폐)에만 쓴다. 나머지는 잉크와 흰빛의 명암으로만 가른다.
 *
 * 다크지만 검정이 아니다 (§4): 페이지 L*≈7 · 카드 L*≈10 · 떠 있는 면 L*≈14 · 입력 L*≈17.
 * 밝은 곳에서도 카드와 바탕이 한 덩어리로 뭉치지 않게 단을 벌리고, 경계는 흰 막(hairline)이 맡는다.
 * 대비는 값 옆에 적었다 (페이지 #121216 기준).
 */

:root {
  color-scheme: dark;

  /* ── 표면 ── */
  --ll-bg: #121216;
  --ll-bg-rgb: 18, 18, 22;
  /* 바탕보다 한 단 깊은 유리 — 그림 위에 얹는 버튼 · 탭바 · 머리가 쓴다. 표면을 바꾸면 이것도 같이 바꾼다 */
  --ll-deep-rgb: 14, 14, 18;
  --ll-bg-0: #121216;          /* 안드로이드 windowBackground · capacitor backgroundColor 와 짝 */
  --ll-surface: #1a1a20;       /* 카드 */
  --ll-surface-rgb: 26, 26, 32;
  --ll-surface-2: #23232a;     /* 떠 있는 면 · 시트 안 카드 */
  --ll-surface-3: #2c2c34;     /* 입력 · 눌림 */
  --ll-sheet: #1c1c22;         /* 시트 패널 */
  --ll-line: rgba(255, 255, 255, 0.07);
  --ll-line-strong: rgba(255, 255, 255, 0.13);

  /* ── 글자 ── */
  --ll-fg: #f4f2ee;            /* 16.9:1 */
  --ll-fg-mid: #b9b6b0;        /* 8.8:1 */
  --ll-fg-dim: #908d88;        /* 5.65:1 (페이지) · 4.72:1 (--ll-surface-2) — 표면을 올리면 여기부터 AA 아래로 떨어진다 */
  --ll-fg-faint: #75726d;      /* 입력칸의 예시 글자(placeholder) — 본문이 아니다. 누르면 사라지는 자리 */
  --ll-ink: #15112b;           /* 라일락 위 글자 — 8.4:1 (흰 글자는 라일락 위 2.1:1 이라 못 쓴다) */

  /* ── 키 컬러: 라일락 (2026-10 — 앰버가 촌스럽다는 피드백. 거의 검정인 면 위에서 차갑게 뜨고, 따뜻한 직업 사진과 겹치지 않는다) ── */
  --ll-key: #b3a4ff;           /* 채움 · 글자 겸용 (페이지 위 8.6:1 · surface-2 위 7.2:1) */
  --ll-key-rgb: 179, 164, 255;
  --ll-key-hi: #d2c8ff;        /* 그라디언트 위쪽 */
  --ll-key-lo: #9583ff;        /* 그라디언트 아래쪽 · 눌림 */
  --ll-key-soft: rgba(179, 164, 255, 0.13);
  --ll-key-line: rgba(179, 164, 255, 0.38);

  --ll-good: #5ad08a;
  --ll-bad: #ff6b6b;           /* 글자 겸용 5.9:1 */
  --ll-bad-soft: rgba(255, 107, 107, 0.12);

  /* 호환 이름 — 옛 규칙 · 문서 오버레이가 읽는다 */
  --ll-brand: var(--ll-key);
  --ll-brand-text: var(--ll-key);
  --ll-accent: var(--ll-key);
  --ll-accent-text: var(--ll-key);
  --ll-accent-ink: var(--ll-ink);

  /* ── 채팅 ── */
  --ll-bub-me: var(--ll-key);
  --ll-bub-me-fg: var(--ll-ink);
  --ll-bub-them: rgba(28, 28, 34, 0.78);
  --ll-bub-them-fg: var(--ll-fg);
  --ll-narr-fg: rgba(244, 242, 238, 0.72);   /* 어두운 막 위 8:1 안팎 */

  /* ── 글자 크기 ── */
  /* 끝에 `sans-serif` 를 두지 않는다. 웹 글꼴 뒤의 일반 계열은 **글꼴 설명(굵기 × 크기 × 자간)마다**
     한 번씩 시스템에 다시 묻는다 — 첫 화면 하나에 2044번이었고, 처음 여는 화면마다 330~950ms
     (CPU 4배 · `_measure-nav.mjs`)가 거기서 나갔다. `system-ui` 는 한 번만 묻는다 (지금 2번 · 49~208ms). */
  --ll-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
             "Noto Sans KR", "Malgun Gothic", system-ui;
  --ll-t-display: 780 28px/1.26 var(--ll-font);
  --ll-t-h1: 740 22px/1.34 var(--ll-font);
  --ll-t-h2: 700 18px/1.4 var(--ll-font);
  --ll-t-h3: 660 16px/1.45 var(--ll-font);
  --ll-t-body: 420 15px/1.62 var(--ll-font);
  --ll-t-meta: 500 13px/1.5 var(--ll-font);
  --ll-t-tag: 600 12px/1.4 var(--ll-font);
  --ll-t-micro: 700 10.5px/1.2 var(--ll-font);   /* 영문 대문자 눈금 (자간을 넓혀 쓴다) */
  --ll-t-narr: 420 14.5px/1.7 var(--ll-font);
  --ll-track-tight: -0.028em;
  --ll-track-micro: 0.16em;

  /* ── 간격 ── */
  --ll-sp-1: 4px;  --ll-sp-2: 8px;  --ll-sp-3: 12px; --ll-sp-4: 16px;
  --ll-sp-5: 20px; --ll-sp-6: 24px; --ll-sp-8: 32px; --ll-sp-10: 40px;

  /* ── 모서리 · 그림자 ── */
  --ll-r-sm: 10px; --ll-r-md: 14px; --ll-r-lg: 18px; --ll-r-xl: 24px; --ll-r-full: 999px;
  --ll-shadow-1: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 1px 2px rgba(0, 0, 0, 0.4);
  --ll-shadow-2: 0 12px 32px rgba(0, 0, 0, 0.42), 0 2px 8px rgba(0, 0, 0, 0.3);
  --ll-shadow-3: 0 24px 64px rgba(0, 0, 0, 0.6);
  --ll-glass: saturate(1.4) blur(18px);

  /* ── 움직임 ── */
  --ll-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ll-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ll-d-fast: 0.16s;
  --ll-d: 0.26s;
  --ll-d-slow: 0.42s;

  /* ── 틀 ── */
  --ll-app-w: 600px;
  --ll-wide-w: 1120px;
  --ll-tab-h: 64px;
  --ll-top-h: 56px;
}

/* ── 바탕 ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--ll-bg); }
html, body { margin: 0; padding: 0; }
body {
  background: var(--ll-bg);
  color: var(--ll-fg);
  font: var(--ll-t-body);
  font-family: var(--ll-font);
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  word-break: keep-all;
  overflow-wrap: anywhere;
  min-height: 100vh;
  min-height: 100dvh;
}
button, input, textarea, select { font: inherit; color: inherit; font-family: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
::selection { background: rgba(var(--ll-key-rgb), 0.35); color: var(--ll-fg); }
.ll-num { font-variant-numeric: tabular-nums; }
.ll-micro { font: var(--ll-t-micro); letter-spacing: var(--ll-track-micro); text-transform: uppercase; }
.ll-sr {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  --ll-wide-ok: 1;
}

/* 포커스 링은 여기 한 곳에서만 정한다 (§6 — 화면 CSS 에 outline:none 금지) */
button:focus-visible,
a[href]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ll-key);
  outline-offset: 2px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
}