/* ═══════════════════════════════════════════════════════════════════════════
   PB 디자인 토큰 — api.picoberry.ai 단일 소스
   ───────────────────────────────────────────────────────────────────────────
   정본은 `picoberry-app/src/styles/globals.css` 다. 이 파일은 그 토큰을 정적
   사이트에서 쓸 수 있게 **미러**한 것이고, 값은 반드시 정본과 같아야 한다.

   왜 별도 파일인가 — 이 사이트는 랜딩 4벌(en/ko/ja/zh)이 각자 인라인 <style>,
   문서 84페이지가 docs.css 로 **팔레트를 5벌 중복 보유**했다. 그래서 PB 가
   `#FF005C` 로 갈 동안 여기는 `#ff4f8b` 에 남는 드리프트가 났다(2026-08-21 감사).
   토큰을 한 파일로 모아 두면 다음 팔레트 변경 때 고칠 곳이 하나다.

   ⚠️ 이 파일에 컴포넌트 스타일을 넣지 말 것 — 토큰 · 폰트 · 기본 타이포만.
   ⚠️ 값을 여기서 "조정" 하지 말 것. 정본이 바뀌면 정본을 먼저 바꾸고 옮겨 적는다.

   정본 대조표 (globals.css)
     --pb-surface-*      → 랜딩 서피스 램프 그대로
     --pb-accent*        → `--pb-accent` / `--primary` (dark) = #FF005C
     --pb-cta-gradient   → 155.056deg 팰린드롬 그라디언트 그대로
     --pb-text           → `--teaser-text`        #F4F4FF
     --pb-text-muted     → `--teaser-text-muted`  #B3B3B3
     --pb-text-dim       → 랜딩 관용구 `text-white/45`
     --pb-line/-strong   → 랜딩 관용구 `border-white/10` · `/15`
     --pb-success        → `--success` (dark)     #66EDC7
     --pb-warning        → `--warning` (dark)     #ECB33C
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 폰트 ────────────────────────────────────────────────────────────────────
   picoberry.ai 가 next/font 로 self-host 하는 것과 **같은 woff2 바이트**를 그대로
   복사해 왔다(파일명의 해시는 내용 해시 — main.ts 가 이 경로에만 immutable 캐시를
   준다). CDN 을 쓰지 않는 이유: /zh 로케일이 있고 jsdelivr 이 중국에서 자주 막힌다.

   fallback 패밀리의 metric override 수치는 next/font 가 생성한 값을 그대로 옮긴
   것이다 — 스왑 전후 폭이 같아야 헤드라인 줄바꿈이 튀지 않는다.

   🔴 **Pretendard 는 3분할해서 서빙한다** (2026-08-21). 통짜 2.0MB 를 `swap` 으로
   내리니 실측 **1.45초** 동안 폴백이 보이다가 바뀌어서, 영문 히어로의 굵기가 눈에
   띄게 튀었다. 2MB 의 대부분은 **한글 음절 11,172자**이고 이 사이트 본문은 거의
   라틴이다 — 그래서 Google/next-font 와 같은 경계로 latin / latin-ext / rest 로 쪼갰다.
     latin      56KB   ← 영문 페이지가 기다리는 건 이것뿐 (36배 작다)
     latin-ext  84KB
     rest      1.96MB  ← 한글·기호. 한국어 페이지에서만 받는다
   pyftsubset 로 만들었고 wght 45–930 가변축과 gvar 델타는 그대로다.

   ⚠️ Orbitron 은 가져오지 않는다. picoberry.ai 가 로드는 하지만 랜딩에서
   `font-heading` 사용처가 0 이고(레거시 teaser 페이지 전용), 여기서 쓰면 오히려
   PB 본체에 없는 인상이 생긴다. (2026-08-21 실측) */
@font-face {
  font-family: 'Pretendard Variable';
  src: url('/fonts/Pretendard-latin.f1d5eba8.woff2') format('woff2');
  font-weight: 45 920;
  font-display: swap;
  unicode-range:
    U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Pretendard Variable';
  src: url('/fonts/Pretendard-latin-ext.b70079c6.woff2') format('woff2');
  font-weight: 45 920;
  font-display: swap;
  unicode-range:
    U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Pretendard Variable';
  src: url('/fonts/Pretendard-rest.f2e63ec8.woff2') format('woff2');
  font-weight: 45 920;
  font-display: swap;
  unicode-range:
    U+02CD,U+02D8-02D9,U+02DB,U+0300-0303,U+0305-0307,U+0309-031E,U+0321-0328,U+032A-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03E1,U+03F0-049D,U+04A0-04FF,U+052F,U+0E3F,U+1DC0-1DF5,U+1DFC-1DFF,U+1EA0-1EF1,U+1F00-1F15,U+1F18-1F1D,U+1F20-1F45,U+1F48-1F4D,U+1F50-1F57,U+1F59,U+1F5B,U+1F5D,U+1F5F-1F7D,U+1F80-1FB4,U+1FB6-1FC4,U+1FC6-1FD3,U+1FD6-1FDB,U+1FDD-1FEF,U+1FF2-1FF4,U+1FF6-1FFE,U+2070-2071,U+2074-208E,U+2090-209C,U+20DB-20DE,U+20E8,U+20F0,U+2100-2101,U+2103,U+2105-2106,U+2109,U+2116-2117,U+211E-2121,U+2123,U+2126,U+212A-212B,U+212E,U+2132,U+213B,U+214D,U+214F,U+2153,U+215A-2188,U+2190,U+2192,U+2194-2199,U+21A9-21AA,U+21B0-21B1,U+21B3-21B5,U+21BA-21BB,U+21D0,U+21D2,U+21D4,U+21DE-21DF,U+21E4-21E5,U+21E7,U+21EA,U+2202,U+2205-2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+226A-226B,U+22EF,U+2303,U+2305,U+2318,U+2325-2327,U+2329-232B,U+2380,U+2387,U+238B,U+23CE-23CF,U+2423,U+2460-2473,U+24B6-24CF,U+24EA-24F4,U+24FF,U+25A0-25A2,U+25AA,U+25B2-25B3,U+25B6-25B7,U+25BA-25BD,U+25C0-25C1,U+25C4-25C7,U+25CA-25CB,U+25CF,U+25E6,U+25EF,U+2600,U+2605-2606,U+263C,U+2661,U+2665,U+266A,U+26A0,U+2713,U+2717,U+2756,U+2776-2789,U+27EF,U+27F5-27FA,U+2985-2986,U+2B06,U+2B12-2B13,U+2B1C,U+2DFF,U+2E18,U+3000-3003,U+3008-3011,U+3014-301F,U+3041-3094,U+3099-309E,U+30A1-30FE,U+3131-3164,U+318D,U+321C,U+3380-3384,U+3388-33CA,U+33CF-33D0,U+33D3,U+33D6,U+33D8,U+33DB-33DD,U+A69F,U+A92E,U+AC00-D7A3,U+E000,U+E002-E05E,U+E06A-E080,U+E093-E096,U+E0A5-E0E6,U+E0F3-E11C,U+E11E-E12A,U+E131-E147,U+E14E-E164,U+EE01-EE05,U+F000-F057,U+F6C3,U+FE20-FE2D,U+FF01-FF60,U+FFA1-FFBE,U+FFC2-FFC7,U+FFCA-FFCF,U+FFD2-FFD7,U+FFDA-FFDC,U+FFE0-FFE1,U+FFE5-FFE6,U+1F10B,U+1F12F-1F149,U+1F150-1F16B,U+1F170-1F189,U+1F850,U+1F852,U+F0000-F0002;
}
@font-face {
  font-family: 'Pretendard Fallback';
  src: local('Arial');
  /* 🔴 `font-weight` 를 반드시 범위로 준다. 없으면 이 face 가 400 하나로만 잡혀,
     히어로처럼 `font-weight: 800` 인 글자가 스왑 전에는 **합성 볼드**(가늘다)로
     그려지다가 진짜 800 로 바뀐다 — 굵기가 튀는 그 현상의 원인이다. */
  font-weight: 45 920;
  ascent-override: 93.76%;
  descent-override: 23.75%;
  line-gap-override: 0%;
  size-adjust: 101.55%;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/JetBrainsMono-latin.570751c5.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/JetBrainsMono-latin.570751c5.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/JetBrainsMono-latinext.e6155c5c.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/JetBrainsMono-latinext.e6155c5c.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono Fallback';
  src: local('Arial');
  ascent-override: 75.79%;
  descent-override: 22.29%;
  line-gap-override: 0%;
  size-adjust: 134.59%;
}

:root {
  /* ── 서피스 램프 ── */
  --pb-surface-0: #05010D;
  --pb-surface-1: #0C0714;
  --pb-surface-2: #120C1B;
  --pb-surface-3: #1A1323;
  --pb-surface-4: #231C2E;
  --pb-surface-5: #322A3E;
  --pb-surface-6: #41394F;

  /* ── 액센트 ── */
  --pb-accent: #FF005C;
  --pb-accent-hover: #E11D48;
  --pb-accent-highlight: #FB7185;
  --pb-accent-support: #EC4899;
  --pb-accent-bg: #FF005C26;      /* 15% */
  --pb-accent-bg-hover: #FF005C33; /* 20% */
  /* 팰린드롬 A→B→A 라 pb-cta-flow 가 이음매 없이 돈다 */
  --pb-cta-gradient: linear-gradient(155.056deg, #EC4899 0%, #E11D48 50%, #EC4899 100%);

  /* ── 텍스트 3계조 ── */
  --pb-text: #F4F4FF;
  --pb-text-muted: #B3B3B3;
  --pb-text-dim: rgb(255 255 255 / .45);

  /* ── 라인 ── */
  --pb-line: rgb(255 255 255 / .10);
  --pb-line-strong: rgb(255 255 255 / .15);

  /* ── 시맨틱 ──
     🔴 **oklch 원문 그대로 적는다.** 정본(globals.css)이 oklch 로 선언하는 값을
     sRGB hex 로 환산해 옮기면 광색역 화면에서 두 사이트가 **다른 색**을 낸다.
     실제로 2026-08-21 감사에서 이 함정이 드러났다 — UModeler 의 브랜드 블루가
     `oklch(55% 0.3 250)` 인데 Tailwind 가 뱉는 sRGB 폴백 `#0072D9` 를 실제 값으로
     오독해 "브랜드 블루가 사라졌다" 로 진단했다. 진짜 렌더 값은 `#0062FF` 였다.
     danger 는 정본 `--destructive`, success/warning 은 정본 `.dark` 값과 동일하다. */
  --pb-success: oklch(0.86 0.13 172);
  --pb-warning: oklch(0.8 0.145 82);
  --pb-danger: oklch(0.577 0.245 27.325);
  --pb-violet: #6500FF;

  /* ── Radius ────────────────────────────────────────────────────────────
     이 사이트는 Tailwind 를 쓰지 않아 radius 가 손으로 적힌 px 리터럴 11종
     (3·4·5·6·8·9·10·12·14·15·20px) 58곳으로 흩어져 있었다 — 세 사이트 중 유일하게
     통제점이 없던 곳이다. picoberry.ai / unity 는 Tailwind 명명 스케일을 이미
     공유하므로 **이름을 맞추고 값은 이 사이트 것을 그대로** 쓴다(색과 같은 원칙).
     스냅 폭은 최대 2px 라 화면은 사실상 그대로다. */
  --pb-radius-sm: 4px;
  --pb-radius-md: 6px;
  /* 10px — picoberry.ai 헤더의 nav 링크·CTA 가 쓰는 값이다(`rounded-[10px]`).
     원래 9px 로 잡았다가, 헤더를 PB 와 치수까지 맞추면서 단계를 그쪽에 정렬했다.
     기존 8·9·10px 리터럴을 흡수하던 단계라 이동 폭은 최대 2px 다. */
  --pb-radius-lg: 10px;
  --pb-radius-xl: 12px;
  --pb-radius-2xl: 14px;
  --pb-radius-3xl: 20px;
  --pb-radius-full: 9999px;

  /* ── 폰트 스택 ──
     picoberry.ai 의 `body` (Pretendard) · `--font-mono` (JetBrains Mono) 와 동일 */
  --pb-font-sans: 'Pretendard Variable', 'Pretendard Fallback', -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --pb-font-mono: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace,
    SFMono-Regular, Menlo, Consolas, monospace;
}

/* ═══════════════════════════════════════════════════════════════════════════
   레거시 별칭 — 이 사이트가 이미 쓰던 변수명을 PB 토큰에 얹는다.
   기존 규칙 300여 개를 다시 쓰지 않고 팔레트만 갈아끼우기 위한 층이다.
   새 스타일을 쓸 때는 `--pb-*` 를 직접 참조할 것.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --bg: var(--pb-surface-0);
  --bg2: var(--pb-surface-1);
  --sidebar: var(--pb-surface-1);
  --surface: var(--pb-surface-2);
  --surface2: var(--pb-surface-3);

  --ink: var(--pb-text);
  --ink2: var(--pb-text-muted);
  --ink3: var(--pb-text-dim);

  --border: var(--pb-line);
  --border2: var(--pb-line-strong);

  --berry: var(--pb-accent);
  --berry-deep: var(--pb-accent-hover);
  --berry-soft: var(--pb-accent-highlight);
  /* 문서의 인라인 코드 · 파라미터명이 쓰는 "읽히는 로즈" — 어두운 서피스 위에서
     본문 대비를 확보해야 해서 accent 원색이 아니라 rose-400 을 쓴다.
     (PB 컴포넌트에서 가장 많이 쓰이는 로즈이기도 하다 — `text-rose-400` 72곳) */
  --berry-ink: var(--pb-accent-highlight);
  --berry-wash: var(--pb-accent-bg);

  /* HTTP 메서드 — PB 시맨틱 토큰에 맞춘다 */
  --get: var(--pb-success);
  --post: var(--pb-accent);
  --del: var(--pb-danger);
  --patch: var(--pb-warning);

  /* 코드 서피스. 랜딩 터미널은 페이지(surface-0) 위에 살짝 뜬 판,
     문서 코드블록은 카드(surface-2) 안에 파인 판 — 같은 값이 양쪽에서 성립한다. */
  --code-bg: var(--pb-surface-1);
  --code-ink: var(--pb-text);
  --code-mut: var(--pb-text-dim);
  --code-line: var(--pb-surface-3);

  /* 신택스 — PB 에는 전용 신택스 테마가 없어서, PB 컴포넌트가 실제로 쓰는
     액센트 4계열(rose / violet / amber / emerald)로 편성했다. */
  --tk-str: #FDA4AF; /* rose-300  */
  --tk-key: #C4B5FD; /* violet-300 */
  --tk-num: #FCD34D; /* amber-300 */
  --tk-com: rgb(255 255 255 / .35);
  --tk-fn: #6EE7B7;  /* emerald-300 */
  --tk-flag: var(--pb-accent-highlight);

  --sans: var(--pb-font-sans);
  --mono: var(--pb-font-mono);

  /* 중립 그림자. 예전엔 두 번째 레이어가 `rgb(255 0 92 / .28)` 로즈 틴트라
     코드카드·문서카드 밑에 핑크 후광이 깔렸다 — 제거 (CEO 2026-08-21). */
  --shadow: 0 2px 4px rgb(0 0 0 / .3), 0 24px 60px -30px rgb(0 0 0 / .55);
}

/* ═══════════════════════════════════════════════════════════════════════════
   기본 타이포 — picoberry-app globals.css 의 body 규칙과 1:1
   ═══════════════════════════════════════════════════════════════════════════ */
body {
  font-family: var(--pb-font-sans);
  -webkit-font-smoothing: antialiased;
}

/* 한글은 단어 단위로 끊는다. CJK(ja/zh)에 keep-all 을 주면 공백이 없어 줄바꿈을
   아예 거부하고 가로로 넘치므로 normal 로 둔다. (globals.css 와 동일 규칙) */
:lang(ko) body {
  word-break: keep-all;
  overflow-wrap: break-word;
}
:lang(ja) body,
:lang(zh) body {
  word-break: normal;
  overflow-wrap: break-word;
}

/* 지역별 자형 — Pretendard 에는 CJK 통합한자가 없어서, 이 스택이 없으면 일본어
   한자가 한국어 자형으로 렌더된다(Han-unification). globals.css 와 동일.
   `:lang(zh)` 는 "zh-Hans" 도 매칭한다(하이픈 접두 규칙). */
:lang(ja) body {
  font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', YuGothic,
    Meiryo, 'Noto Sans JP', 'Noto Sans CJK JP', var(--pb-font-sans);
  line-break: strict;
}
:lang(zh) body {
  font-family: 'PingFang SC', 'Microsoft YaHei', '微软雅黑', 'Noto Sans SC',
    'Noto Sans CJK SC', 'Source Han Sans SC', var(--pb-font-sans);
}

code, pre, kbd, samp { font-family: var(--pb-font-mono); }

/* ── PB 주 CTA ──────────────────────────────────────────────────────────────
   picoberry.ai `PrimaryFlowButton` 과 같은 재질: 팰린드롬 그라디언트가 5초로
   흐르고, hover 는 그라디언트 교체가 아니라 글로우로만 신호한다.
   (`transition` 프로퍼티 목록에 background-image 가 없어 스왑은 0ms 스냅이 된다) */
@keyframes pb-cta-flow {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
}