/* daydrift 2판 — 디자인 시스템 정본 (3단계, 2026-10-02). 이름은 Tailwind 4 @theme 이름공간을 따르되 선언은 :root 에 둔다 —
   @theme {} 블록은 브라우저가 읽지 않는다(lessons #73). style.css 는 여기 변수만 쓴다.
   2판 = 손그림 월페이퍼 위에 뜬 개인 홈 창 하나. 글자 단계·행 높이는 4단계에서 Galmuri11 실측(12px 격자)으로 정정했다. 그림 위에 글자를 직접 얹지 않으므로 1판의 덮개(scrim·veil) 토큰은 없앴다. */
:root {
  /* ── 색: 그림 층 (1판 그대로 — 자리표시자·빛 층·아바타가 쓴다) ───────────────── */
  --color-bg: #8a6446;          /* 오후 목재 — 그림이 오기 전 바탕, 자리표시자 가운데 */
  --color-sky: #a9cfe3;         /* 유리 지붕 하늘 — 자리표시자 윗면 */
  --color-glow: #f3c98b;        /* 오후 빛 — 빛 줄기·먼지 */
  --color-wood: #6b4a33;        /* 그늘 바닥 — 자리표시자 아랫면 · 아바타 의자 그늘 */
  --color-shade: #2a1f18;       /* 그늘 고동 — 아바타 의자 윤곽 */

  /* ── 색: 창 층 ────────────────────────────────────────────────────────
     파랑 = 틀(옅은 제목 띠·현재 탭 선·이웃 이름·포커스). 주황 = "살아 있는 것" 세 곳(오늘 방문 숫자·BGM 재생 표시·새 글 점) — 면으로 쓰지 않는다. */
  --color-window: #fbfcfe;      /* 창 면 — 모든 글자의 바탕 */
  --color-ink: #1d2b44;         /* 남색 잉크 — 창 안 본문 전부 (창 면 위 13.81) */
  --color-ink-soft: #4a5b78;    /* 옅은 잉크 — 라벨(오늘·전체·BGM)·날짜·쪽지 꼬리 (창 면 6.69 · 제목 띠 5.50) */
  --color-blue: #2b5fc0;        /* 파랑 — 현재 탭 위 2px 선·이웃 이름 글자·포커스 링 (창 면 5.84) */
  --color-blue-tint: #dce7f7;   /* 옅은 파랑 — 제목 띠 면·쪽지 제목 띠 면·아바타 하늘 칸 */
  --color-blue-pale: #eef3fb;   /* 더 옅은 파랑 — 안 누른 탭·칩·BGM 상자·칩 바탕 */
  --color-frame: #4469a8;       /* 바깥 틀 1px 실선·탭 줄 아래 실선 — 창 면 5.34 · 밝은 그림(하늘 3.32 · 햇빛 3.53 · 흰 5.48) 위에서도 창 경계가 3:1. 어두운 마루 위에선 창 면(7.71)이 경계를 낸다 */
  --color-dot: #8ea9d4;         /* 1px 점선 — 칸 나누기 장식(경계는 면 색이 낸다) */
  --color-accent: #e8610f;      /* 주황 — 재생 ▶·소리 막대·새 글 점 (창 면 3.33 — 비글자 3:1) */
  --color-accent-ink: #a6420a;  /* 주황 글자 — 오늘 방문 숫자 (제목 띠 4.94 · 창 면 6.01) */

  /* ── 서체 ─────────────────────────────────────────────────────────── */
  --font-dot: "Galmuri11", "Pretendard Variable", Pretendard, monospace;   /* 창 전부 — 12의 배수 크기에서만 */
  --font-display: var(--font-dot);                                       /* display = 닉네임(Galmuri11 700) */
  --font-body: "Pretendard Variable", Pretendard, system-ui, sans-serif; /* 쪽지 본문만 */

  /* ── 글자 크기 ────────────────────────────────────────────────────────
     4단계 정정(2026-10-02): Galmuri11 은 unitsPerEm 1200 · 글자 폭이 100 단위(한글 1200 · 영문 800 · 띄어쓰기 500)라
     **본래 격자가 12px** 이다(한글 획 높이가 11점이라 이름이 11). 11px 에서는 점 하나가 0.917px 라 회색으로 번진다
     (.shots/daydrift/crisp-4x.png). 그래서 12 · 24 · 36 만 쓴다 — 이때 한글 12 · 영문 8 · 띄어쓰기 5 로 글자 위치가 전부 정수다.
     줄 높이: 글자 상자 = 크기 × 1400/1200(ascent 1200 + descent 200) = 14 · 28 · 42 → 반 행간이 정수가 되게 16 · 28 · 42.
     고지 두 줄만 읽는 글이라 18.
     rem 이 아니라 px 인 이유: 사용자 글자 크기 설정이 12의 배수를 깨면 도트가 뭉갠다. 브라우저 확대(줌)는 그대로 된다. */
  --text-dot: 12px;                     /* 창 안 거의 모든 글자 */
  --text-dot--line-height: 16px;
  --text-fine: 12px;                    /* 고지 두 줄 — 읽는 글이라 행간을 조금 */
  --text-fine--line-height: 18px;
  --text-dot-2: 24px;                   /* 닉네임 — 폰 구성 */
  --text-dot-2--line-height: 28px;
  --text-dot-3: 36px;                   /* 닉네임 — 넓은 구성. 화면에서 가장 큰 글자는 이것 하나 */
  --text-dot-3--line-height: 42px;
  --text-note: 0.9375rem;               /* 쪽지 본문 15px (Pretendard) */
  --text-note--line-height: 1.6;

  /* ── 간격 (행 높이는 글자 줄 16 + 짝수 여백 — 정수 px) ─────────────────────────── */
  --spacing: 0.25rem;                   /* 기본 단위(Tailwind) — 창 안에서는 아래 값을 쓴다 */
  --spacing-dot: 11px;                  /* 창 본문 여백·행 사이·아바타↔글 칸 */
  --spacing-dot-bar: 8px;               /* 제목 띠·고지 띠 좌우 여백, 32 행 위아래 (16 + 8 + 8 = 32) */
  --spacing-dot-inline: 5px;            /* 칩·BGM 상자 안 좌우 */
  --spacing-icon-gap: 4px;              /* 아이콘↔글자 */
  --spacing-row-bar: 32px;              /* 제목 띠 · 탭 줄 · BGM 막대 */
  --spacing-row-guest: 24px;            /* 방명록 한 줄 (16 + 4 + 4) */
  --spacing-row-profile: 66px;          /* 넓은 구성 프로필 = 닉네임 줄 42 + 8 + 소개 16 */
  --spacing-row-profile-sm: 44px;       /* 폰 구성 프로필 = 닉네임 줄 28 + 소개 16 */
  --spacing-avatar: 66px;               /* 픽셀 의자 11×11 격자 × 6 */
  --spacing-avatar-sm: 44px;            /* × 4 */
  --spacing-icon: 11px;                 /* 픽셀 아이콘 11×11 (칸 1px — 글자 격자와 따로 논다) */
  --spacing-button: 24px;               /* 단추의 보이는 상자 = 테두리 2 + 글자 줄 16 + 위아래 3 */
  --spacing-touch: 44px;                /* 누름 영역 — 보이는 상자보다 크면 의사 요소로 늘린다 */
  --spacing-win-w: 528px;               /* 넓은 구성 창 폭 상한 */
  --spacing-win-w-min: 377px;           /* 넓은 구성 하한 — 이보다 좁은 가로 화면 창은 폰 구성(닉네임 줄 276 + 101, NOTES) */
  --spacing-win-h: 279px;               /* 넓은 구성 창 높이 (NOTES 행 높이 표) */
  --spacing-win-h-sm: 257px;            /* 폰 구성 창 높이 */
  --spacing-win-gap: 11px;              /* 창 ↔ 주인공 상자 최소 간격 */
  --spacing-note-w: 286px;              /* 쪽지 폭 */
  --spacing-note-offset: 4px;           /* 쪽지 ↔ 탭 줄 */
  --spacing-press: 1px;                 /* 누르는 동안 단추가 내려가는 거리 */
  --spacing-edge: 16px;                 /* 화면 가장자리 — 아래 미디어 쿼리가 바꾼다. 안전 영역과 max() */

  /* ── 그림 자리 (1판 실측 + 2판 조정) ─────────────────────────────────────
     Tailwind 에 object-position 이름공간이 없어 컴포넌트 토큰으로 둔다. 비율은 납품 그림의 가로/세로. */
  --art-switch-ratio: 1.2;    /* 화면 비가 이보다 작으면 세로판 — 1판 1.0 → 1.2 (거의 정사각 가로 화면에서 창 자리가 없었다, wireframe 4-1) */
  --art-wide-ratio: 1.768;    /* wall-wide 2688×1520 */
  --art-wide-x: 0.6;
  --art-wide-y: 0.5;
  --art-wide-y-short: 1;      /* 높이 500 이하 가로 화면 — 지붕을 덜고 그림을 올린다 */
  --art-wide-hero-x: 0.52;    /* 가로판 주인공(작업대·의자) 왼변, 그림 비 — 창 폭 식이 쓴다 */
  --art-tall-ratio: 0.5655;   /* wall-tall 1520×2688 */
  --art-tall-x: 0.7;
  --art-tall-y: 0.5;          /* 1판 1 → 0.5: 창이 위(지붕)에 앉으니 가운데를 남긴다. 1 이면 393×660 에서 창이 의자에 6px 걸린다 */
  --art-tall-hero-y: 0.44;    /* 세로판 주인공 윗변, 그림 비 */

  /* ── 모서리 ───────────────────────────────────────────────────────── */
  --radius-window: 0px;       /* 창·탭·칩·쪽지·단추 전부 각진 모서리 — 도트에는 둥근 모서리가 계단으로 깨진다 */

  /* ── 그림자 (픽셀 — 번짐 0) ─────────────────────────────────────────── */
  --shadow-window: 3px 3px 0 rgb(29 43 68 / 0.28);   /* 창 · [창 다시 열기] 칩 */
  --shadow-note: 2px 2px 0 rgb(29 43 68 / 0.28);     /* 쪽지 */
  --shadow-button: 1px 1px 0 rgb(29 43 68 / 0.35);   /* 단추 — 누르는 동안 0 */
  --shadow-focus: 0 0 0 2px var(--color-window), 0 0 0 4px var(--color-blue); /* 이중 링: 창 면·그림 어디서나 보인다 */

  /* ── 이징·길이 ────────────────────────────────────────────────────────
     창 층은 계단(steps) — 도트의 결. 그림 층(빛·먼지·Crossfade)만 부드럽게. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);     /* 그림 Crossfade */
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);      /* 쪽지 닫기 */
  --ease-drift: cubic-bezier(0.37, 0, 0.63, 1);   /* 먼지·빛 반복 */
  --ease-step-2: steps(2, end);                   /* 쪽지 열기 · 방명록 넘김 */
  --ease-step-3: steps(3, end);                   /* 창 첫 등장 */
  --ease-step-4: steps(4, end);                   /* BGM 막대 · 창 내리기/열기 */
  --duration-image: 600ms;    /* 자리표시자 → 그림 */
  --duration-glow: 10s;       /* 빛 줄기 한 왕복 */
  --duration-win-in: 150ms;   /* 창 Pop in */
  --delay-win-in: 200ms;      /* 그림 뒤 창 */
  --delay-ticker: 400ms;      /* 창 뒤 방문자 수 +1 */
  --duration-note-in: 120ms;
  --duration-note-out: 100ms;
  --duration-minimize: 200ms; /* 창 ↔ 칩 */
  --duration-chip: 120ms;
  --duration-bars: 900ms;     /* BGM 막대 한 바퀴 */
  --duration-guest: 200ms;    /* 방명록 줄 바뀜 */
  --interval-guest: 6s;       /* 방명록 자동 넘김 간격 */
  --delay-guest: 8s;          /* 첫 넘김 — shoot 컷이 1/3 을 찍게 */
  --speed-marquee: 40;        /* 곡명 Marquee px/s (JS 가 길이로 시간을 계산) */
}

/* 가장자리 단계 — 창의 위치가 정수 px 에 앉게 고정 값으로(1판 clamp 를 버렸다) */
@media (min-width: 560px) { :root { --spacing-edge: 22px; } }
@media (min-width: 1100px) { :root { --spacing-edge: 33px; } }
@media (min-width: 1600px) { :root { --spacing-edge: 44px; } }