/* Link to Tellby — 겉모습을 정하는 단 하나의 자리
 *
 * 값은 앱의 frontend/constants/theme.ts 에서 **그대로** 가져왔다.
 * 여기서 새로 만들지 않는다. 앱과 이 웹이 달라 보이면 안 된다.
 *
 * 쓰는 법
 *   <link rel="stylesheet" href="/static/theme.css">
 *   <script src="/static/theme.js"></script>   ← 낮/밤을 정한다
 *
 * 채널 지도(build_youtube_map.py)는 이 파일을 **만들 때 읽어 박는다.**
 * 공유하는 HTML 은 통째로 하나여야 밖에서 열어도 안 깨지기 때문이다.
 * 그러니 값을 베껴 두는 곳은 어디에도 없다.
 */

:root {
  /* ── 낮 (LightPalette) ── */
  --bg:#FCFAF8;  --surface:#FFFFFF;  --card:#FFFFFF;  --border:#E5E5E5;
  --txt:#0F172A; --sub:#475569;      --dim:#94A3B8;
  --accent:#ff6933; --accent-text:#FFFFFF; --accent-bg:rgba(255,105,51,.08);
  --outline:#111111;
  --shadow:rgba(0,0,0,.10);
  /* 홈에 박혀 있던 것들. 낮에도 뜻이 통하게 두 벌을 다 준다. */
  --raise:#F1EDE9;      /* 카드보다 한 겹 올라온 것(고르는 칸·칩) */
  --sink:#F7F4F1;       /* 한 겹 들어간 것(입력 칸 안쪽) */
  --rail:#CFC9C3;       /* 스크롤 막대 */
  --land:#D8DEE6;       /* 세계 그림의 땅 */
  --danger:#c0392b;     /* 지우기 */
  --danger-soft:#b5432f;/* 지우기 글씨(바탕 위) */
  /* 지도 타일을 밤에 어둡게 뒤집는 값. 낮에는 아무것도 안 한다. */
  --tile-filter:none;

  /* ── 낮밤이 같은 것 ── */
  --ok:#10b981; --err:#ef4444; --warn:#f59e0b;
  --r-sm:8px; --r-md:12px; --r-card:14px; --r-lg:16px; --r-xl:24px;
  /* ★ 앱은 1.5 다(실측: colors.outline 과 같이 쓴 곳 113군데가 1.5).
       웹도 1.5 였는데 **더 얇아 보였다.** 같은 숫자가 같은 두께가 아니기
       때문이다 — 폰은 1dp 가 물리 3픽셀이라 1.5 가 4.5픽셀로 또렷하고,
       보통 모니터는 1.5px 가 물리 1.5픽셀이라 반쪽이 흐려져 1px 처럼 보인다.
       그래서 **화면 밀도로 가른다.** 촘촘한 화면은 앱과 같은 1.5,
       성긴 화면은 2 — 눈에 닿는 두께를 같게 맞추는 것이 목적이다.
       여기 하나만 고치면 전 화면에 퍼진다(카드·칩·말풍선·점 세 개). */
  --bw:2px;
  --font:"Inter",-apple-system,"Apple SD Gothic Neo",system-ui,sans-serif;

  /* ── 글자 크기 ── 앱 Typography 그대로. 눈대중으로 정하지 않는다. */
  --t-display:48px; --t-h1:26px; --t-h2:20px;
  --t-body:16px;    --t-small:14px; --t-micro:12px;
  --lh-body:1.4;                  /* getTypography 의 16×1.4 */

  /* ── 사이 간격 ── 부품에서 실제로 쓰인 값만 둔다 */
  --pad-card:16px;                /* OutlineCard */
  --pad-pill-x:18px; --pad-pill-y:10px;   /* PillButton */
  --pad-chip-x:14px; --pad-chip-y:8px;    /* Chip */
  --pad-badge-x:8px; --pad-badge-y:3px;   /* Badge */
  --r-chip:10px;                  /* Chip·Badge 는 10 (Radius 표에 없는 값) */
  --touch:44px;                   /* 누를 수 있는 최소 크기 */

  /* ── 옛 이름 ── 두 화면이 서로 다른 말을 쓰고 있었다. 갈아끼우는
     동안 깨지지 않게 이어 둔다. 새 규칙은 위의 이름만 쓴다. */
  --panel:var(--surface); --muted:var(--sub); --soft:var(--border);
  --line:var(--outline);

  color-scheme: light;
}

/* 촘촘한 화면(폰·레티나)에서는 앱과 **같은 숫자**로 돌아간다.
   여기서는 1.5 가 물리 3픽셀 이상이라 이미 또렷하다. */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  :root { --bw:1.5px; }
}

/* ── 밤 (DarkPalette) ──
   ★ 고르는 것은 스크립트다(theme.js). 여기서 prefers-color-scheme 을
     보지 않는다 — 요청은 **기기 설정이 아니라 그 사람 시계**를 따르는
     것이었다. 두 곳에서 정하면 서로 어긋난다. */
:root[data-theme="dark"] {
  --bg:#0B0B0D;  --surface:#111111;  --card:#1D1D1D;  --border:#2A2A2A;
  --txt:#FFFFFF; --sub:#C0C0C0;      --dim:#999999;
  --accent:#ff6933; --accent-text:#111111; --accent-bg:rgba(255,105,51,.08);
  --outline:#FFFFFF;
  --shadow:rgba(0,0,0,.55);
  --raise:#26262e; --sink:#101014; --rail:#4a4a55; --land:#3A3A44;
  --danger:#c0392b; --danger-soft:#e97b6d;
  /* 지도 타일은 늘 밝다. 검은 화면에 흰 지도가 뜨면 눈이 아프다.
     뒤집고 색을 되돌린다 — 글씨는 읽히고 바다는 파랗게 남는다. */
  --tile-filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(1.06);

  color-scheme: dark;
}

/* 색이 바뀔 때 화면이 튀지 않게. 움직임을 싫어하는 사람에게는 안 한다. */
@media (prefers-reduced-motion: no-preference) {
  body, .card, .top, .foot { transition: background-color .18s, color .18s, border-color .18s; }
}

/* 지도 타일에만 건다. 표시·열지도는 타일 판 밖이라 색이 안 뒤집힌다. */
.leaflet-tile-pane { filter: var(--tile-filter); }

/* ── 낮밤 단추 ── 세 화면 같은 모양, 같은 자리 */
.themebtn {
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; flex:none; cursor:pointer;
  background:var(--surface); color:var(--txt);
  border:var(--bw) solid var(--border); border-radius:var(--r-sm);
}
.themebtn:hover { border-color:var(--accent); color:var(--accent); }
.themebtn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }


/* ══════════════════════════════════════════════════════════════════
   Bold-Outline — 앱의 생김새
   ★ 이것이 Tellby 의 얼굴이다. 카드도 단추도 칩도 **1.5px 진한 테두리**
     (낮 #111 · 밤 #fff)를 두른다. 연한 회색 테두리(--border)가 아니다.
     처음 옮길 때 이 둘을 헷갈려 홈의 카드가 흐릿해졌다.
     근거: components/common/{OutlineCard,PillButton,Chip,Badge}.tsx
   ══════════════════════════════════════════════════════════════════ */

/* 카드 — OutlineCard.tsx */
.o-card {
  background:var(--surface);
  border:var(--bw) solid var(--outline);
  border-radius:var(--r-card);
  padding:var(--pad-card);
}

/* 단추 — PillButton.tsx. 기본은 테두리만, filled 는 주황 채움 */
.o-pill {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--touch);
  padding:var(--pad-pill-y) var(--pad-pill-x);
  border:var(--bw) solid var(--outline);
  border-radius:var(--r-md);
  background:transparent; color:var(--txt);
  font:600 var(--t-body)/1 var(--font);
  cursor:pointer;
}
.o-pill.filled { background:var(--accent); color:var(--accent-text); }
.o-pill:disabled { opacity:.4; cursor:default; }
.o-pill:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* 칩 — Chip.tsx. 고르면 주황으로 찬다 */
.o-chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:var(--pad-chip-y) var(--pad-chip-x);
  border:var(--bw) solid var(--outline);
  border-radius:var(--r-chip);
  background:transparent; color:var(--txt);
  font:500 var(--t-small)/1 var(--font);
  cursor:pointer;
}
.o-chip[aria-selected="true"] { background:var(--accent); color:var(--accent-text); }

/* 딱지 — Badge.tsx */
.o-badge {
  display:inline-flex; align-items:center;
  padding:var(--pad-badge-y) var(--pad-badge-x);
  border:var(--bw) solid var(--outline);
  border-radius:var(--r-chip);
  background:transparent; color:var(--txt);
  font:500 var(--t-micro)/1 var(--font);
}
.o-badge.accent { background:var(--accent); color:var(--accent-text); }

/* 글자 층 — 앱 Typography */
.t-display { font:700 var(--t-display)/1.1 var(--font); }
.t-h1      { font:700 var(--t-h1)/1.25 var(--font); }
.t-h2      { font:700 var(--t-h2)/1.3 var(--font); }
.t-body    { font:400 var(--t-body)/var(--lh-body) var(--font); }
.t-small   { font:400 var(--t-small)/1.45 var(--font); }
.t-micro   { font:500 var(--t-micro)/1.4 var(--font); }

.themebtn { border-color:var(--outline); }