/* ============================================================
   桜光 디자인 토큰  v2 — 잉크 & 종이
   프로필 이미지가 흑백 하프톤 만화 선화라 팔레트를 모노크롬으로
   전면 교체했다. 무지개 그라디언트는 폐기.
   색은 딱 한 곳에서만 쓴다: --accent.
   ============================================================ */

:root {
  /* ── 표면 (종이) ────────────────────────────────────────
     순백 금지. 만화 원고지의 살짝 따뜻한 흰색. */
  --bg:        #f6f6f4;
  --surface:   #ffffff;
  --surface-2: #eeeeeb;
  --surface-3: #e2e2de;

  /* ── 텍스트 (잉크) ────────────────────────────────────── */
  --text:        #131316;
  --text-muted:  #56565e;
  --text-subtle: #6c6c76;

  --hairline:      rgba(19, 19, 22, 0.10);
  --hairline-firm: rgba(19, 19, 22, 0.18);

  /* ── 액센트 ────────────────────────────────────────────
     흑백 선화에 어울리는 단 하나의 색: 인주 빨강.
     한국·일본 증시에서 빨강은 상승이라 투자 블로그와도 맞다.
     흰 배경 대비 5.90:1 → AA 통과.
     이 색이 마음에 안 들면 여기 세 줄만 바꾸면 사이트 전체가 따라온다. */
  --accent:      #b8342a;
  --accent-weak: rgba(184, 52, 42, 0.10);
  --accent-on:   #ffffff;

  /* ── 하프톤 (프로필 아트의 점묘를 옮긴 텍스처) ──────────
     아주 얕게만 쓴다. 넓은 면적에 깔면 싸구려가 된다. */
  --halftone-dot:  rgba(19, 19, 22, 0.14);
  --halftone-size: 6px;

  /* ── 밤벚꽃 (히어로 전용) ───────────────────────────────
     桜光 = 벚꽃 + 빛. 이름 그대로 밤벚꽃에 등불이 켜진 장면에서 뽑았다.
     이 네 색은 히어로 밖으로 절대 나가지 않는다.
     UI 는 모노크롬으로 조용히 두고 색은 여기 한 곳이 다 짊어진다.
     라이트/다크 모드와 무관하게 고정 — 사진 위에 얹히는 값이라 반전시키면 안 된다. */
  --night-deep: #1a0d18;
  --night:      #3d1c33;
  --lantern:    #f0b34a;
  --petal:      #ff8fb0;

  /* ── 그림자 ────────────────────────────────────────────
     순수 검정 금지. 배경 색조를 띤 2겹 구조. */
  --shadow-1: 0 1px 2px rgba(19, 19, 22, 0.04),
              0 6px 18px rgba(19, 19, 22, 0.06);
  --shadow-2: 0 2px 4px rgba(19, 19, 22, 0.05),
              0 14px 32px rgba(19, 19, 22, 0.10);

  --inner-top: inset 0 1px 0 rgba(255, 255, 255, 0.7);

  /* ── 반경 (Shape Consistency Lock) ──────────────────────
     껍데기 lg / 안쪽 코어 md / 칩 sm / 인터랙티브 pill
     lg(20) - 껍데기 여백(6) = md(14) → 동심원 일치 */
  --r-lg:   20px;
  --r-md:   14px;
  --r-sm:   10px;
  --r-full: 999px;
  --bezel:  6px;

  /* ── 모션 ────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 0.18s;
  --t-base: 0.32s;
  --t-slow: 0.6s;

  /* ── 레이아웃 ──────────────────────────────────────────
     사이드바가 왼쪽으로 이동. 레퍼런스 배치를 따랐다. */
  --container:   1280px;
  --sidebar:     300px;
  --gutter:      28px;
  --page-pad:    20px;
  --topbar-h:    68px;
  --section-gap: clamp(2.75rem, 5vw, 4.5rem);

  /* ── 타이포 ────────────────────────────────────────────
     한글 본문 행간 1.7. 색을 뺀 만큼 무게 대비로 위계를 만든다. */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system,
               BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  --font-num:  "Pretendard Variable", ui-monospace, SFMono-Regular, monospace;

  /* 일본어 전용 명조. Shippori Mincho 에는 한글 글리프가 아예 없다.
     그래서 .jp 클래스가 붙은 일본어 요소에만 적용한다.
     한글에 이걸 쓰면 폴백 폰트로 떨어져서 오히려 지저분해진다. */
  --font-jp: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN",
             "Nanum Myeongjo", serif;

  /* 영문 전용 헤드라인. Stack Sans Headline 은 latin / latin-ext 만 있고
     한글·일본어 글리프가 없다. .en 클래스가 붙은 영문에만 적용한다. */
  --font-en: "Stack Sans Headline", "Pretendard Variable", system-ui, sans-serif;

  --fs-display: clamp(1.3rem, 1.15rem + 0.6vw, 1.55rem);
  --fs-h1:      clamp(1.7rem, 1.2rem + 1.8vw, 2.3rem);
  --fs-h2:      clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
  --fs-card:    1.0625rem;
  --fs-body:    1rem;
  --fs-meta:    0.8125rem;
  --fs-micro:   0.75rem;

  color-scheme: light;
}

/* ── 다크 모드 (잉크) ─────────────────────────────────────
   토큰 값만 교체한다. 컴포넌트 CSS는 한 줄도 다시 쓰지 않는다. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0d0d0f;
    --surface:   #151518;
    --surface-2: #1c1c20;
    --surface-3: #26262b;

    --text:        #f0f0ee;
    --text-muted:  #a0a0a8;
    --text-subtle: #8a8a94;

    --hairline:      rgba(255, 255, 255, 0.10);
    --hairline-firm: rgba(255, 255, 255, 0.18);

    /* 어두운 배경에서는 인주 빨강을 밝게 올려야 산다 (대비 5.38:1) */
    --accent:      #e8564a;
    --accent-weak: rgba(232, 86, 74, 0.14);
    --accent-on:   #1a0705;

    --halftone-dot: rgba(255, 255, 255, 0.13);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45),
                0 6px 18px rgba(0, 0, 0, 0.38);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.5),
                0 14px 32px rgba(0, 0, 0, 0.55);

    --inner-top: inset 0 1px 0 rgba(255, 255, 255, 0.055);

    color-scheme: dark;
  }
}

[data-theme="dark"] {
  --bg:        #0d0d0f;
  --surface:   #151518;
  --surface-2: #1c1c20;
  --surface-3: #26262b;

  --text:        #f0f0ee;
  --text-muted:  #a0a0a8;
  --text-subtle: #8a8a94;

  --hairline:      rgba(255, 255, 255, 0.10);
  --hairline-firm: rgba(255, 255, 255, 0.18);

  --accent:      #e8564a;
  --accent-weak: rgba(232, 86, 74, 0.14);
  --accent-on:   #1a0705;

  --halftone-dot: rgba(255, 255, 255, 0.13);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45),
              0 6px 18px rgba(0, 0, 0, 0.38);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.5),
              0 14px 32px rgba(0, 0, 0, 0.55);

  --inner-top: inset 0 1px 0 rgba(255, 255, 255, 0.055);

  color-scheme: dark;
}