/* 이모작 (Emojak) — Aurora Ledger 토큰
 *
 * **정본은 design/design-tokens.css 다.** 뷰어는 Supabase Storage 에 올라가는
 * 정적 페이지라 저장소 밖에서 남의 폴더를 참조할 수 없으므로 여기 복제한다 —
 * 정본을 고칠 때 이 파일도 함께 고친다.
 *
 * 한 벌은 한 번만 적는다: 값은 light-dark() 한 줄에 두고,
 * 테마를 직접 고르는 자리는 color-scheme 만 못 박는다. */

:root {
  color-scheme: light dark;

  /* 원색 두 벌 — 테마마다 갈리는 값은 여기서 한 번만 적는다.
   *
   * light-dark() 는 **색**만 돌려준다. 퍼센트 자리에 쓰면(`... var(--text) light-dark(8%,12%) ...`)
   * 그 선언은 통째로 무효가 되고, 브라우저는 오류 없이 그냥 «없는 값»으로 넘어간다 —
   * 배경이 조용히 투명해질 뿐이라 눈으로 잡기 어렵다. 실제로 그렇게 당했다(2026-08-27):
   * 옅은 면과 상태 알약의 배경이 처음부터 하나도 그려지지 않고 있었다.
   * 그러니 «테마마다 다른 옅기»는 color-mix 를 **두 번 접어** light-dark 에 넣는다. */
  --ink-l: #21182D;  --ink-d: #FAF7FF;
  --pri-l: #7040D9;  --pri-d: #986CF4;

  /* ── Neutral — 라이트는 순수한 회색, 다크는 Dusk ──────────
   *
   * 바탕 · 파인 면 · 선 셋(#F8F8F8 · #F4F4F5 · #E7E5EA)은 **물들지 않는다.**
   * 이모작은 «일하는 자리»이기 때문이다 — 사람이 값을 넣고 답을 읽으러
   * 오므로 판은 물러나야 하고, «지금 누를 것» 하나만 색을 가져야 손이 그리로 간다.
   * 4% 짜리 보라도 화면 절반에 깔리면 브랜드가 아니라 화면의 «때»로 읽힌다.
   * (남보라를 머금은 회색은 «소개하는 자리» — 소개 화면 · 블로그 · 약관 — 의 것이다.)
   *
   * **잉크는 물든 채로 둔다.** 글자(--ink-l)와 그 불투명도 칸(--text-88…35)은
   * 넓은 면이 아니라 가는 획이라 같은 채도라도 때가 되지 않고, 오히려 그 온기가
   * 순수한 회색의 서늘함을 막아 준다. 그림자(--shadow-ink)도 남보라 먹 그대로다.
   * 걷은 것은 **넓게 깔리는 것**뿐이다.
   *
   * **다크는 걷지 않는다.** 밤의 보라는 넓은 면에서도 때로 읽히지 않는다. */
  --bg:             light-dark(#F7F6FB, #100D18);
  --surface:        light-dark(#FFFFFF, #1C1727);
  --surface-sunk:   light-dark(#F0EEF6, #15111E);  /* 파인 면 — 중성색 사다리 둘째 칸 */
  --text:           light-dark(var(--ink-l), var(--ink-d));

  /* 불투명도 사다리 — 88 / 70 / 50 / 35 / 20 / 8% */
  --text-88: color-mix(in srgb, var(--text) 88%, transparent);
  --text-70: color-mix(in srgb, var(--text) 70%, transparent);
  --text-50: color-mix(in srgb, var(--text) 50%, transparent);
  --text-35: color-mix(in srgb, var(--text) 35%, transparent);
  --line-20: light-dark(#E7E5EA, color-mix(in srgb, var(--ink-d) 20%, transparent));
  /* «옅은 면»만 라이트 8% · 다크 12% 로 갈린다 */
  --wash: light-dark(
    #F4F4F5,
    color-mix(in srgb, var(--ink-d) 12%, transparent));

  /* ── Brand ── */
  --primary: light-dark(var(--pri-l), var(--pri-d));  /* 채운 면 */
  --accent:  light-dark(#7040D9, #B79AFF);            /* 글자·아이콘·테두리 */
  --grad: linear-gradient(135deg, var(--primary), #8550E4); /* 채운 브랜드 면에만 */
  --primary-wash: light-dark(
    color-mix(in srgb, var(--pri-l)  8%, transparent),
    color-mix(in srgb, var(--pri-d) 12%, transparent));
  --accent-pink: light-dark(#E84D9B, #FF82C1);
  --accent-cyan: light-dark(#1E9AAE, #62D4E4);
  --accent-amber: light-dark(#E6842A, #FFB968);
  --hero-grad: linear-gradient(135deg, #6F3FE3 0%, #9B5AF0 52%, #EC69AB 100%);
  --canvas-glow: light-dark(rgba(112, 64, 217, .09), rgba(152, 108, 244, .12));

  /* ── Semantic — 옅은 면은 같은 법을 따른다 (라이트 10% · 다크 16%) ── */
  --danger:  light-dark(#B42318, #FF9B91);
  --warning: light-dark(#B45309, #FBBF24);
  /* ↩ 라이트의 성공색이 #16A34A 였다. 재 보니 흰 바탕에서 **3.30:1** — 12px 짜리
   * «저장했습니다» 가 WCAG AA(4.5:1)를 못 넘고 있었다. 셋 중 이것만 그랬는데,
   * 나란히 놓기 전에는 안 보인다: 초록은 같은 밝기에서 빨강·주황보다 밝게 읽힌다.
   * #15803D 는 5.02:1 로 **주의색과 같은 무게**다 — 셋이 한 화면에 설 때 하나만
   * 흐릿해 보이지 않는다. 다크(#4ADE80)는 10.20:1 이라 걷지 않았다. */
  --success: light-dark(#15803D, #4ADE80);
  --danger-wash: light-dark(
    color-mix(in srgb, #B42318 10%, transparent),
    color-mix(in srgb, #FF9B91 16%, transparent));
  --warning-wash: light-dark(
    color-mix(in srgb, #B45309 10%, transparent),
    color-mix(in srgb, #FBBF24 16%, transparent));
  --success-wash: light-dark(
    color-mix(in srgb, #15803D 10%, transparent),
    color-mix(in srgb, #4ADE80 16%, transparent));

  /* ── Radius — 11 / 14 / 18 / 24 · 알약은 한 줄이 통째로 둥근 것에만 ──
   * ↩ --radius-sm 이 0.625rem(10px), --radius-lg 가 1rem(16px) 이었다 — 위 주석이 적어 둔
   * 사다리(11/14/18/24)와 두 칸이 어긋나 있었다. 실제로 쓰는 값(md=14px·xl=24px)은
   * 사다리와 맞았는데 양 끝만 반 칸씩 밀려 있어 «11·14·18·24»라는 표가 거짓말을 하고 있었다.
   * 표를 따라 sm 을 11px, lg 를 18px 로 맞춘다. */
  --radius-sm: 0.6875rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.125rem;   /* 카드 */
  --radius-xl: 1.5rem;
  --radius-pill: 999px;

  /* ── Spacing ──────────────────────────────────────────────
   *
   * **8pt 는 판이 서는 리듬이고, 그 사이는 광학이다.** 카드의 안쪽 여백과 구획 사이는
   * 8의 배수로 서지만, 16px 글리프와 그 옆 글자 사이의 6px 은 리듬이 아니라 «눈에 맞는
   * 자리»다. 그 6px 을 8로 올리면 알약이 뚱뚱해지고 4로 내리면 글자가 글리프에 붙는다.
   *
   * 그래서 사다리를 **2px 바탕**으로 깔고 이름을 픽셀로 짓는다 — `--sp-6` 이 6px 인지
   * 여섯째 칸인지 묻지 않아도 되고, 표에 없는 값을 적을 자리도 없어진다.
   * 예전 이름(`--sp-1`…`--sp-7`)은 이 사다리의 별명으로 남는다: 목업이 그것을 부르고,
   * 지나간 이름을 고치는 것은 이 일의 값이 아니다. */
  --space-2:  0.125rem;
  --space-4:  0.25rem;
  --space-6:  0.375rem;
  --space-8:  0.5rem;
  --space-10: 0.625rem;
  --space-12: 0.75rem;
  --space-14: 0.875rem;
  --space-16: 1rem;
  --space-18: 1.125rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-28: 1.75rem;
  --space-32: 2rem;
  --space-36: 2.25rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-72: 4.5rem;
  --space-80: 5rem;
  --space-96: 6rem;

  /* 옛 이름 — 목업이 부른다. 값은 위 사다리를 가리킬 뿐 따로 살지 않는다 */
  --sp-1: var(--space-4);
  --sp-2: var(--space-8);
  --sp-3: var(--space-12);
  --sp-4: var(--space-16);
  --sp-5: var(--space-24);
  --sp-6: var(--space-32);
  --sp-7: var(--space-48);

  /* ── Semantic layout ────────────────────────────────────────
   * 컴포넌트가 숫자 사다리를 직접 고르지 않는다. 같은 역할은 언제나 같은 간격을 쓴다. */
  --layout-page-gap: var(--space-24);
  --layout-section-gap: var(--space-24);
  --layout-card-padding: var(--space-20);
  --layout-panel-padding: var(--space-24);
  --layout-header-padding: var(--space-24);
  --layout-feature-padding: var(--space-32);
  --layout-control-gap: var(--space-8);
  --layout-cluster-gap: var(--space-24);
  --layout-edge-inset: var(--space-24);
  --layout-content-x: clamp(var(--space-20), 4vw, var(--space-64));

  /* ── Typography — Pretendard · 굵기는 가진 넷(400·500·600·700)만 ── */
  --font: 'Pretendard Variable', Pretendard, 'Noto Sans KR', -apple-system,
          'Apple SD Gothic Neo', sans-serif;
  /* ↩ --fs-13(0.8125rem)·--fs-18(1.125rem) 이 있었다 — 사다리(11/12/14/16/20/24…)에
   * 없는 칸인데 셋이 부르고 있었다. 사다리 밖의 두 칸을 더 세우는 대신 부르던 자리를
   * 이웃 칸(12·14·16)으로 옮기고 이 둘은 걷는다 — 표에 없는 값은 «세게»가 아니라 우연이다. */
  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-36: 2.25rem;
  --fs-40: 2.5rem;
  /* 히어로 세 칸 — 첫 화면의 큰 글자만 여기 오른다. 본문으로 내려오지 않는다 */
  --fs-48: 3rem;
  --fs-60: 3.75rem;
  --fs-72: 4.5rem;

  /* 굵기 — **가진 넷만.** 실어 놓지 않은 굵기(650·750·760·780)를 부르면 브라우저가
   * 흉내 내거나 이웃 칸으로 스냅한다: «중간쯤»이라고 적어 둔 자리가 실제로는 아무 데도
   * 중간이 아니게 된다. 실제로 여덟 자리가 그렇게 서 있었다(2026-09-01).
   * 이름으로 부르면 표에 없는 값을 적을 자리가 없어진다. */
  --w-normal: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  /* ── Icon — 네 칸: 12 / 16 / 20 / 26 ──────────────────────
   *
   * 이 칸들은 CSS 가 아니라 **화면이 숫자로** 부른다(`size={ICON.md}`) — 아이콘 라이브러리가
   * 픽셀 수를 받기 때문이다. 그래서 같은 값이 두 곳(여기와 `lib/core/icons.ts`)에 산다.
   * 두 벌은 곧 갈리므로 기계가 센다: `sh .claude/checks/ladder.sh`
   *
   * 「그림이 없을 때 그 자리를 지키는 글리프」는 아이콘이 아니다 — 아이콘은 말을 거들지만
   * 이쪽은 **빈자리의 크기**를 말하므로 칸을 따라 커진다. 그래서 이름을 따로 둔다. */
  --icon-sm: 0.75rem;
  --icon-md: 1rem;
  --icon-lg: 1.25rem;
  --icon-xl: 1.625rem;
  --glyph-card: 2rem;
  --glyph-hero: 3rem;

  /* ── Elevation — 4 / 10 / 20 · 그림자는 남보라 먹 ── */
  --shadow-ink: light-dark(#2A1650, #000000);
  --shadow-1: 0 1px 3px color-mix(in srgb, var(--shadow-ink) 8%, transparent);
  --shadow-2: 0 8px 24px color-mix(in srgb, var(--shadow-ink) 9%, transparent);
  --shadow-3: 0 18px 48px color-mix(in srgb, var(--shadow-ink) 14%, transparent);
  --shadow-brand: 0 12px 30px color-mix(in srgb, var(--primary) 28%, transparent);
  /* 창·서랍을 덮는 어둠. 사이드바 스크림과 모달 백드롭이 다크에서 .55 와 .65 로 각자
   * 적혀 있었다 — 나란히 놓기 전엔 안 갈린다. 둘 다 이 한 칸을 본다 */
  --scrim: light-dark(rgba(33, 24, 45, .35), rgba(0, 0, 0, .6));

  /* ── Motion — 들어오는 것 / 나가는 것 ── */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 350ms;
  --curve-enter: cubic-bezier(.25, 1, .5, 1);
  --curve-exit:  cubic-bezier(.4, 0, 1, 1);

  /* ── 앱이 부르는 칸 ──────────────────────────────────────
   *
   * 목업은 이것들을 쓰지 않는다. 그래도 **여기** 사는 이유는 «앱 전용»이라서가
   * 아니라 사다리가 한 벌이어야 하기 때문이다 — 앱 쪽에 따로 두면 그 순간
   * 값이 둘이 되고, 둘은 곧 서로 달라진다. 실제로 그렇게 갈렸다(2026-08-31):
   * 앱의 보라가 #6D3DD3, 표의 보라가 #7040D9 였는데 아무도 몰랐다. */
  --text-muted:     light-dark(#746C80, #B1A8BF);   /* 잉크 사다리 가운데 */
  --hairline:       light-dark(#E5E1ED, rgba(250, 247, 255, .13));
  --primary-lit:    light-dark(#8550E4, #B696FF);   /* 그라데이션의 끝 색 */
  --on-primary:     #FFFFFF;
  --on-danger:      light-dark(#FFFFFF, #2A0B08);  /* 채운 위험 면 위의 글자 */

  /* ── 히어로 위 잉크 — 로그인의 채운 보라 위에 서는 흰 글자 ──────
   * 로그인은 `ui.module.css` 를 쓰지 않는 «문 앞» 화면이지만(그 파일 머리의 주석 참고),
   * 그 흰 글자도 사다리 밖을 걷지 않는다. rgba(255,255,255,…) 를 화면마다 눈대중으로
   * 적으면(.03·.045·.08·.11·.12·.16·.18·.2·.5·.72·.82 — 열한 가지가 실제로 그랬다)
   * 그중 어느 것도 사다리 칸이 아니게 된다. 여섯 칸(88/70/50/35/20/8%)으로 스냅한다. */
  --on-hero:        #FFFFFF;
  --on-hero-88:      color-mix(in srgb, var(--on-hero) 88%, transparent);
  --on-hero-dim:     color-mix(in srgb, var(--on-hero) 70%, transparent);
  --on-hero-mid:     color-mix(in srgb, var(--on-hero) 50%, transparent);
  --on-hero-faint:   color-mix(in srgb, var(--on-hero) 20%, transparent);
  --on-hero-wash:    color-mix(in srgb, var(--on-hero) 8%, transparent);
  --on-hero-accent:  #E3D4FF;  /* 히어로 위 강조 글자 — 본문 accent 와 다른 자리라 따로 둔다 */
  --ring: 0 0 0 3px light-dark(rgba(112, 64, 217, .18), rgba(152, 108, 244, .28));
  /* 지금 손이 가 있는 곳. 다섯 자리가 이 값을 각자 적고 있었다 —
   * 굵기를 하나 올리는 날 그중 넷만 굵어진다 */
  --outline: 2px solid var(--accent);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* 사이드바의 너비. **두 곳이 이 하나를 가리킨다** — 나무의 `width` 와 본문의
   * `margin-left`. 둘이 같은 숫자를 각자 들고 있었는데, 한쪽을 고치는 날 다른 쪽이
   * 조용히 어긋나 본문이 사이드바 밑으로 밀리거나 사이에 빈 띠가 생긴다.
   * 같아야 하는 것은 이름 하나를 둘이 가리키게 한다. */
  --sidebar-w: 17.5rem;

  /* ── 체크보드 — 투명한 그림은 이 무늬 위에서만 «투명하구나»가 보인다.
   * 세 곳(대표이미지 · 시리즈 사진 · 프레임 무대)이 같은 네 겹 그라데이션을 각자
   * 다시 그리고 있었다 — 한 곳을 고치면 나머지 둘은 조용히 남는다. */
  --checkerboard-image:
    linear-gradient(45deg, var(--hairline) 25%, transparent 25%),
    linear-gradient(-45deg, var(--hairline) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--hairline) 75%),
    linear-gradient(-45deg, transparent 75%, var(--hairline) 75%);
  --checkerboard-size: 16px 16px;
  --checkerboard-position: 0 0, 0 8px, 8px -8px, -8px 0;

  /* ── Scrollbar — 어디쯤인지를 말하는 물건, 브랜드색이 아니다 ── */
  scrollbar-width: thin;
  scrollbar-color: var(--line-20) transparent;
}

:root[data-theme='light'] { color-scheme: light; }
:root[data-theme='dark']  { color-scheme: dark; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line-20); border-radius: var(--radius-pill); }
::-webkit-scrollbar-track { background: transparent; }