/* ═══════════════════════════════════════════════════════════════════════════
   코스모스 셸의 **바닥** — 글꼴 · 리셋 · 디자인 토큰

   ★왜 파일로 뺐나★ (2026-08-28) 예전에는 이것이 `app.html`의 `<style>` 안에
   있었다. 화면이 하나뿐일 때는 그래도 됐지만, 로그인 게이트가 **두 번째 화면**으로
   생기면서 같은 토큰이 두 벌이 될 참이었다 — 그리고 두 벌이 되는 순간
   `test_design_tokens.py`가 지키던 *"색은 한 곳에서 온다"* 가 무너진다.

   그래서 화면이 아니라 **바닥**을 파일로 만든다. 화면이 몇 개가 되든 이 파일 하나를
   가리키면 된다(원칙 1 — 새 것을 더할 때 고칠 자리가 하나여야 한다).

   ⚠️ `DESIGN-TOKENS:BEGIN/END` 마커가 여기로 따라왔다. 그 안은 `palette.py`와
   **글자 하나까지** 대조당하는 자리다 — 파생값을 그 안에 적지 마라.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 글꼴 — ★저장소에 실은 것만 쓴다★(리뉴얼 함정 ④) ──────────────────────
   바깥(fonts.googleapis.com)에서 받아 오면 CSP `font-src`에 걸리고, 뚫어 준다
   해도 **오프라인에서 글꼴이 통째로 사라진다**. 그러면 화면이 시스템 산세리프로
   떨어져 리뉴얼이 없던 일이 된다. 가변 폰트라 굵기마다 파일을 받지 않는다.
   파일 목록의 진실원은 `cosmos/core/palette.py`의 `FONT_FILES`다. */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;
  font-display:swap;src:url(/fonts/space-grotesk-latin.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:'Space Grotesk';font-style:normal;font-weight:300 700;
  font-display:swap;src:url(/fonts/space-grotesk-latin-ext.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:100 800;
  font-display:swap;src:url(/fonts/jetbrains-mono-latin.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:100 800;
  font-display:swap;src:url(/fonts/jetbrains-mono-latin-ext.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}

*{box-sizing:border-box;margin:0;padding:0}
/* ── ★디자인 토큰 — 색의 단일 진실원★ (리뉴얼 2026-08-08) ──────────────────
   ⚠️ **여기 말고 어디에도 구조색을 적지 마라.** 값의 주인은
   `cosmos/core/palette.py`이고, 이 블록은 그 표를 CSS로 옮겨 적은 것이다 —
   `tests/test_design_tokens.py`가 둘을 대조해서 갈리면 운다.
   알파가 필요한 자리는 `rgba(var(--beam-rgb),.12)` 꼴로 쓴다(리터럴 금지).

   ★`--pri`/`--acc`는 **여기서 정하는 값이 아니다**★ 페르소나가 4초마다 방송해
   덮어쓴다(`shells/web/main.py` `_theme`). 여기 값은 그 첫 방송이 오기 전
   한두 프레임을 위한 것이고, 진짜 기본값은 `personas/default.yaml`에 있다. */
/* DESIGN-TOKENS:BEGIN */
:root{
  --void:#04060B;--abyss:#010309;
  --panel:#080E18;--panel-2:#070C15;--panel-3:#060911;--raise:#0C1421;
  --beam:#4FE3FF;--aurora:#8B7BFF;--aurora-lit:#C9C2FF;--signal:#56F0A0;
  --flare:#FFB35C;--ember:#FF8A5C;--alarm:#FF5C7A;
  --fg-hi:#EAF4FF;--fg:#D8E6F5;--fg-dim:#8FA5BC;--mut:#5C7086;--on-beam:#04060B;
  --void-rgb:4,6,11;--beam-rgb:79,227,255;--aurora-rgb:139,123,255;
  --signal-rgb:86,240,160;--flare-rgb:255,179,92;--alarm-rgb:255,92,122;
  /* 도크가 유리이려면 알파를 얹을 rgb가 필요하다(Sean 지적 2026-08-17) */
  --panel-rgb:8,14,24;
  --ease:cubic-bezier(.22,.9,.3,1);--dur:180ms;--dur-panel:260ms;--breath:3.2s;--drift:14s;
  --r-xs:6px;--r-sm:10px;--r-md:12px;--r-lg:16px;--r-xl:20px;
}
/* DESIGN-TOKENS:END */
:root{
  /* 파생 — 위 토큰에서만 만든다 */
  --bg:var(--void);
  --line:rgba(255,255,255,.08);          /* 중립 경계 */
  --line-2:rgba(255,255,255,.14);        /* 한 단계 또렷한 경계(호버·강조) */
  --line-beam:rgba(var(--beam-rgb),.16); /* 활동을 띤 면의 경계 */
  --line-beam-2:rgba(var(--beam-rgb),.30);
  --wash:rgba(var(--beam-rgb),.08);      /* 선택된 것의 옅은 채움 */
  --wash-2:rgba(var(--beam-rgb),.16);
  --glow:0 0 24px rgba(var(--beam-rgb),.35);
  /* 옛 이름. 값은 아래 사다리의 `--e-2`와 같아서 그쪽을 가리킨다 —
     두 벌로 적어 두면 언젠가 한쪽만 바뀐다. */
  --shadow:var(--e-2);
  --font-ui:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',
            'Noto Sans KR','Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,'SF Mono',Menlo,
              'Noto Sans Mono CJK KR',monospace;
  /* 첫 프레임용 — 곧 페르소나 방송이 덮는다(위 주석) */
  --pri:var(--beam);--acc:var(--flare);
}

/* ── ★ORBITAL 3.0 — 랜딩에서 올라온 층★ (2026-08-27) ────────────────────────
   `cosmos-landing/src/styles/tokens.css`의 B 블록이 여기 대응한다. 셋(앱·현관·
   랜딩)이 **같은 어휘**를 쓰게 하려는 것이다.

   ⚠️ **마커 밖이다.** 위 `DESIGN-TOKENS` 블록은 `palette.py`와 글자 하나까지
   대조당하는 자리라 파생값이 섞이면 그 검사가 어지러워진다.

   ★값은 베끼지 않았다 — **눈금을 다시 깎았다**★ 이것이 이 층의 핵심이다.
   랜딩은 **읽는 페이지**고 앱은 **계기판**이다. 실측하면 앱의 글자는 11px가
   112곳, 12px가 56곳, 10px가 31곳 — 랜딩의 `--t-body:16px`을 그대로 얹으면
   계기판이 읽을거리가 되고 한 화면에 담기던 것이 안 담긴다. 그래서 ★이름은
   같게, 눈금은 앱 밀도로★ 간다. 같은 이름이 다른 값을 갖는 것은 사고가 아니라
   결정이다.

   ★안 가져온 것과 이유★ 가져다 놓고 아무도 안 쓰면 다음 사람이 있는 줄 알고
   배선한다(함정 74). 그래서 지금 쓸 것만 옮겼다:
     · `--t-display-1/2`·`--t-h1/h2` — 앱의 가장 큰 글자가 18px다. 화면을 다시
       짜는 단계에서 제목이 생기면 그때 넣는다
     · `--sec-y`·`--shell`·`--gutter` — 스크롤하는 문서의 리듬이다. 앱엔 없다
     · `--horizon` — 섹션과 섹션 사이의 이음매. 앱엔 섹션이 없다
     · `--z-*` — 앱의 z는 0·1·20·25·28·30·35·36·38·40·60으로 흩어져 있는데,
       중간값들이 **무엇을 위한 층인지 아직 모른다**. 모르는 것에 이름을 붙이면
       그 이름이 거짓말을 시작한다 — 화면을 다시 짜면서 층을 세고 붙인다
   ─────────────────────────────────────────────────────────────────────────── */
:root{
  /* ── B-2. 유리와 그림자 — ★떠 있는 것들의 사다리★ ──────────────────────
     2.0에서 "떠 있음"은 도크 하나의 성질이었다. 지금은 헤더·도크·덮개 화면·
     메뉴가 한 화면에 함께 뜬다. 층에 이름이 없으면 섞이고, 섞이면 무엇이
     위인지 눈이 못 가른다. */
  --glass-1:rgba(var(--void-rgb),.55);   /* 헤더·푸터 — 배경이 비친다 */
  --glass-2:rgba(var(--panel-rgb),.62);  /* 도크·카드 — 한 겹 두껍다 */
  --glass-3:rgba(var(--panel-rgb),.88);  /* 덮개 화면 — 거의 불투명 */
  --blur-1:blur(14px);
  --blur-2:blur(22px);

  --e-1:0 2px 10px rgba(0,0,0,.30);
  --e-2:0 10px 34px rgba(0,0,0,.42);
  --e-3:0 28px 70px rgba(0,0,0,.55);
  --glow-lg:0 0 60px rgba(var(--beam-rgb),.28);
  --glow-aurora:0 0 48px rgba(var(--aurora-rgb),.30);
  --line-aurora:rgba(var(--aurora-rgb),.20);
  --wash-aurora:rgba(var(--aurora-rgb),.10);

  /* ── B-3. 글자 — ★앱 밀도의 눈금★ ────────────────────────────────────
     리뉴얼 전 이 파일에는 9·10·11·11.5·12·12.5·13·14·15·18px가 흩어져 있었다.
     열 개 중 셋(9·11.5·12.5)은 **뜻이 있어서 다른 것이 아니라** 그때그때 적힌
     값이고, 그런 값은 눈으로 찾을 수 없다. 일곱 칸으로 접는다.

     ★앱에는 등록(register)이 둘이다★ 그래서 랜딩보다 칸이 하나 더 있다:
       계기 — 10·11·12·13px. 라벨·값·목록·패널의 바닥
       읽는 것 — 14·15·18px. 대화 본문·입력칸·제목
     13과 14를 한 칸으로 접으면 둘 중 하나가 반드시 진다(대화가 줄거나 패널이
     불거나). 실측에서 13px는 다이얼로그 열 곳의 바닥이고 14px는 대화 본문이다. */
  --t-micro:10px;   /* 단위·눈금·아주 작은 라벨 */
  --t-xs:11px;      /* ★계기의 본문★ — 실측 112곳이 이미 이 크기다 */
  --t-sm:12px;      /* 한 단계 또렷한 줄 */
  --t-md:13px;      /* 패널·다이얼로그의 바닥 */
  --t-body:14px;    /* ★읽으라고 내놓는 것★ — 대화 본문·입력칸 */
  --t-h4:15px;      /* 작은 제목 */
  --t-h3:18px;      /* 화면의 제목 */

  --lh-head:1.18;
  --lh-body:1.6;    /* 한국어는 라틴보다 행간이 더 필요하다 */
  --lh-ui:1.4;
  --tr-head:-.018em;
  --tr-label:.16em; /* 마이크로 라벨은 반대로 벌린다 */

  /* ── B-4. 간격 — 4px 바닥의 사다리 ───────────────────────────────────── */
  --s-1:4px;   --s-2:8px;   --s-3:12px;  --s-4:16px;
  --s-5:20px;  --s-6:24px;  --s-8:32px;  --s-10:40px;
  --s-12:48px; --s-16:64px;

  /* ── B-5. 모션 — 2.0의 곡선에 길이만 더한다 ──────────────────────────── */
  --dur-slow:460ms;                          /* 큰 면이 드러날 때 */
  --ease-out:cubic-bezier(.16,1,.3,1);       /* 도착 */
  --ease-in-out:cubic-bezier(.62,0,.28,1);   /* 이동 */
}