/* =====================================================================
   tokens.css — MASHUP 새 판 디자인 변수 한 벌 (11/16 '가안' · 시안-2.html 의 :root 기준)
   ---------------------------------------------------------------------
   쓰는 법
   1) index.html 이 app.css 보다 먼저 읽어요.
   2) <html data-theme="light|dark" data-skin="cream|"> 로 테마를 정해요(index.html 스크립트).
      자동(auto)은 스크립트가 기기 설정을 보고 light / dark 를 넣어요.
   3) app.css 에는 #색을 직접 쓰지 않고 늘 var(--이름) 으로 써요.
   4) 어떤 칸이든 data-theme="dark" 를 붙이면 그 안만 다크가 돼요(손잡이 창처럼 '늘 어두운' 곳).

   대비(WCAG 공식으로 계산): 글자색 · 바탕 짝은 모두 4.5:1 이상이에요.
     화이트  --ink-3 #646973 : 흰 면 5.51 · 바탕 5.06 · 면2 4.80 · 연분홍 4.72 · 연노랑 4.93 · 연초록 4.85
             --accent #c8263f : 흰 면 5.52 · 연분홍 4.72      (11/16 다듬기: #6b7079 는 면2 · 연한 바탕 위에서 4.5 가 안 돼서 어둡게)
     크림    --ink-3 #635d53 : 면 6.27 · 바탕 5.55 · 면2 5.65 · 연분홍 5.42   흰 글씨 on --accent 5.52
     다크    --ink-3 #9a9ea6 : 면 6.36 · 면2 5.75         --accent #ff5a6e : 면 5.64 (그 위 글씨는 먹색 6.3)
   --line · --line-2 는 선(꾸밈)이라 글자에 쓰지 않아요.
   ===================================================================== */

/* ---------------------------------------------------------------------
   테마와 상관없는 값: 글꼴 · 글자 6단계 · 간격 · 모서리 · 크기 · 움직임
   --------------------------------------------------------------------- */
:root {
  --font-sans: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* 글자 6단계 (최소 12px · 본문 15px) */
  --fs-1: 12px;   /* 꼬리표 · 숫자 배지 · 아래 탭 글자 */
  --fs-2: 13px;   /* 보조 글 · 시간 · 구획 이름 */
  --fs-3: 15px;   /* 본문 · 단추 */
  --fs-4: 17px;   /* 형제 이름 · 물음 */
  --fs-5: 20px;   /* 카드 제목 · 방 이름 */
  --fs-6: 26px;   /* 화면 제목 · 큰 숫자 */

  --fw-1: 400; --fw-2: 600; --fw-3: 700; --fw-4: 800;
  --lh: 1.55;

  /* 간격 (4px 바탕) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px;
  --gutter: 16px;          /* 휴대폰 좌우 여백 */
  --gutter-pc: 28px;       /* PC 좌우 여백 */

  /* 모서리 */
  --r-xs: 6px;             /* 작은 꼬리표 */
  --r-sm: 10px;            /* 칸 안의 칸 · 첨부 그림 */
  --r-btn: 12px;           /* 단추 · 입력칸 */
  --r: 14px;               /* 카드 · 상자 */
  --r-lg: 18px;            /* 덮개 창 · 큰 판 */
  --r-pill: 999px;

  /* 크기 */
  --tap: 44px;             /* 누르는 곳 최소 */
  --w-side: 220px;         /* PC 왼쪽 메뉴 */
  --w-list: 420px;         /* PC 치트 목록 칸 */
  --w-read: 760px;         /* 글줄 최대 폭 */
  --w-sheet: 560px;        /* 덮개 창 최대 폭 */
  --av: 44px;              /* 형제 얼굴 */

  /* 움직임 */
  --t-fast: .15s;
  --t-mid: .22s;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
}

/* ---------------------------------------------------------------------
   화이트 (기본) — 따뜻한 회색 바탕 + 흰 면 + 먹색 글자 + 빨강 하나
   --------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  color-scheme: light;
  accent-color: var(--accent);

  /* 면 */
  --bg: #f6f5f2;           /* 페이지 바탕 */
  --surface: #ffffff;      /* 카드 · 머리 · 메뉴 · 입력줄 */
  --surface-2: #f1efea;    /* 칸 안의 칸 · 얼굴 바탕 · 마우스 올림 */
  --line: #e3e1dc;         /* 카드 · 줄 사이 선 */
  --line-2: #cfccc5;       /* 단추 · 입력칸 테두리 */
  --scrim: rgba(22, 23, 26, .45);   /* 덮개 창 뒤 막 */

  /* 글자 */
  --ink: #16171a;          /* 제목 · 본문 (흰 면 17.9:1) */
  --ink-2: #4a4f57;        /* 보통 글자 (8.4:1) */
  --ink-3: #646973;        /* 보조 글자 (흰 면 5.51 · 바탕 5.06 · 면2 4.80 · 연한 상태 바탕 4.72 이상) — 11/16 다듬기 */
  --on-ink: #ffffff;       /* 먹색 바탕(고른 칸 · 내 말) 위 글자 */

  /* 포인트 빨강 하나: 답 필요 · 안 읽은 수 · 보내기 · 초점 */
  --accent: #c8263f;
  --accent-ink: #ffffff;   /* 빨강 위 글자 (5.52:1) */
  --accent-soft: #fbe9ec;  /* 연분홍 바탕 (빨강 글자 4.73:1) */
  --accent-line: #efb9c3;

  /* 상태 글자 (흰 면 4.5:1 이상) */
  --ok: #17703f;  --ok-soft: #e8f3ec;  --ok-line: #b9d8c5;     /* 일하는 중 · 완료 */
  --wait: #9a5b00; --wait-soft: #fbf1e1; --wait-line: #ecd2a6;  /* 늦음 · 막힘 · 아껴 쓰기 */

  /* 그림자 — 거의 안 써요(1px 선 위주). 떠 있는 것(알림 글 · 덮개 창)에만 */
  --shadow-pop: 0 10px 30px rgba(22, 23, 26, .18);

  /* 날씨 그림 색 (11/16 다듬기: app.js wicon 안의 #값을 여기로 옮겼어요) — 꾸밈 그림이라 글자 대비와 상관없어요 */
  --wx-ray: #ffb020;          /* 해 빛살 */
  --wx-sun: #ffc229;          /* 해 · 번개 */
  --wx-moon: #ffd25e;
  --wx-cloud-partly: #c9d3de; /* 해 + 구름 의 구름 */
  --wx-cloud-back: #dce3ea;   /* 흐림: 뒤 구름 */
  --wx-cloud: #b4c0cc;        /* 흐림: 앞 구름 · 안개 줄 */
  --wx-cloud-rain: #a9b6c3;
  --wx-rain: #3b8beb;
  --wx-cloud-snow: #b9c5d1;
  --wx-snow: #7cc4f5;
  --wx-cloud-storm: #8794a3;

  /* 미세먼지 8단계 색 (좋음 → 최악) — 글자가 아니라 점 · 막대 · 왼쪽 띠에만 */
  --dust-0: #2f6fed; --dust-1: #1aa3e8; --dust-2: #12b5a6; --dust-3: #2ba84a;
  --dust-4: #f5a20b; --dust-5: #ef6c2a; --dust-6: #e03131; --dust-7: #22242a;
}

/* ---------------------------------------------------------------------
   크림 — 바탕 · 면만 따뜻하게, 포인트는 같은 빨강
   --------------------------------------------------------------------- */
[data-skin="cream"] {
  --bg: #f3ecdf;
  --surface: #fffaf1;
  --surface-2: #f6eedf;
  --line: #e4dccb;
  --line-2: #cfc4ae;
  --ink: #1d1a16;
  --ink-2: #4a443b;
  --ink-3: #635d53;        /* 크림 바탕 5.55:1 (크림 면에 맞춘 따뜻한 회색이라 따로) */
  --accent-soft: #f9e6e3;
  --ok-soft: #eaf1e2;
  --wait-soft: #f8ecd6;
}

/* ---------------------------------------------------------------------
   다크 — 바탕 #111214 · 면 #1b1c1f · 글자 #f2f2f3, 빨강은 어둠에서 읽히는 #ff5a6e
   --------------------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;
  accent-color: var(--accent);

  --bg: #111214;
  --surface: #1b1c1f;
  --surface-2: #242529;
  --line: #2c2e33;
  --line-2: #3d4047;
  --scrim: rgba(0, 0, 0, .6);

  --ink: #f2f2f3;          /* 면 16.1:1 */
  --ink-2: #c4c6cb;        /* 10.6:1 */
  --ink-3: #9a9ea6;        /* 면 6.36 · 면2 5.75 */
  --on-ink: #111214;       /* 다크의 '먹색 칸'은 밝은 칸 + 검은 글자 */

  --accent: #ff5a6e;
  --accent-ink: #111214;   /* 밝은 빨강 위에는 검은 글자 (흰 글자는 3.0 이라 모자라요) */
  --accent-soft: rgba(255, 90, 110, .14);
  --accent-line: rgba(255, 90, 110, .45);

  --ok: #5ccf8f;  --ok-soft: rgba(92, 207, 143, .12);  --ok-line: rgba(92, 207, 143, .4);
  --wait: #e8a84a; --wait-soft: rgba(232, 168, 74, .12); --wait-line: rgba(232, 168, 74, .4);

  --shadow-pop: 0 12px 32px rgba(0, 0, 0, .55);

  /* 날씨 그림 · 미세먼지 다크 값 (11/16 다듬기): 구름은 어둔 면에서 덜 눈부시게, '최악'(먹색)은 어둠에 묻혀서 밝은 회색으로 */
  --wx-ray: #f5a623;
  --wx-sun: #ffc23d;
  --wx-moon: #ffd76e;
  --wx-cloud-partly: #9aa5b1;
  --wx-cloud-back: #6c7682;
  --wx-cloud: #8b97a4;
  --wx-cloud-rain: #7f8b98;
  --wx-rain: #5aa2ff;
  --wx-cloud-snow: #8e9aa7;
  --wx-snow: #8fd0ff;
  --wx-cloud-storm: #6a7684;

  --dust-0: #5b8ff5; --dust-1: #3fb6f0; --dust-2: #2cc7b7; --dust-3: #45bf63;
  --dust-4: #f5b02e; --dust-5: #f2834a; --dust-6: #f05252; --dust-7: #c9ccd3;
}

/* 예전 이름을 쓰는 곳(화면 코드 안 몇 곳)을 위한 별명 — 새 코드에서는 위 이름을 써요 */
:root, [data-theme] {
  --text: var(--ink);
  --text-2: var(--ink-2);
  --text-3: var(--ink-3);
}

/* 움직임을 줄인 기기 */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0s; --t-mid: 0s; }
}