/* ═══════════════════════════ 색상 토큰 ═══════════════════════════
   모든 색은 여기서만 정의한다. 아래 규칙들에는 하드코딩된 색이 없어야 한다.
   :root            = 다크 테마 (기본)
   [data-theme=...] = 사용자가 고른 테마가 무엇이든 이깁니다
   ================================================================= */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0b0e13;
  --canvas-bg: #090c11;
  --panel: #12161e;
  --panel-2: #171c26;
  --panel-3: #1d2431;
  --panel-4: #1f2734;

  --line: #232a37;
  --line-soft: #1c2230;
  --line-strong: #2e3747;

  --text: #e7ecf3;
  --text-dim: #97a2b5;
  --text-faint: #5f6b80;
  --text-ghost: #4e586b;
  --text-num: #8ea2c0;

  --accent: #4c8dff;
  --accent-on: #ffffff;
  --accent-glow: rgba(76, 141, 255, .25);
  --accent-soft-bg: #243049;
  --accent-soft-line: #3a5a8c;
  --accent-soft-text: #cfe0ff;

  --up: #2eb55f;
  --down: #d24b3d;
  --up-glow: rgba(46, 181, 95, .5);

  --topbar-a: #141923;
  --topbar-b: #10141c;
  --modal-head-a: #161b25;
  --modal-head-b: #12161e;

  --scrollbar: #2a3140;
  --scrollbar-hover: #3a4356;

  --chip-bg: #1e2836;
  --chip-text: #7e93b3;

  --checkbox-bg: #0e131c;
  --checkbox-line: #39435a;

  --overlay: rgba(9, 12, 17, .82);
  --float-bg: rgba(16, 20, 28, .93);
  --tooltip-bg: rgba(16, 20, 28, .97);
  --tooltip-line: #2b3444;
  --sep: #262f3e;
  --bar-track: #1c2431;

  --shadow-sm: 0 4px 16px rgba(0, 0, 0, .4);
  --shadow-md: 0 12px 34px rgba(0, 0, 0, .55);
  --shadow-lg: 0 26px 70px rgba(0, 0, 0, .6);
  --modal-veil: rgba(4, 6, 10, .72);

  --status-ok-bg: #16311f;      --status-ok-text: #4cc47a;
  --status-error-bg: #331b19;   --status-error-text: #e0745f;
  --status-idle-bg: #1e2430;    --status-idle-text: #7d8ba3;
  --status-off-bg: #1e2430;     --status-off-text: #5a6478;
  --warn-text: #e08a5a;         --warn-bg: #32261a;

  --badge-news-bg: #1b2e45;      --badge-news-text: #79b4f2;
  --badge-press-bg: #24303f;     --badge-press-text: #90b0d6;
  --badge-community-bg: #33282a; --badge-community-text: #e59a6a;
  --badge-filings-bg: #3a2f1c;   --badge-filings-text: #e0b357;

  --surge: #ffc24a;
  --surge-strong: #ffd479;
  --surge-tint: rgba(255, 162, 26, .12);
  --surge-line: rgba(255, 162, 26, .30);
  --surge-row-a: rgba(255, 109, 44, .13);
  --surge-row-b: rgba(255, 109, 44, .03);
  --surge-row-line: rgba(255, 122, 44, .22);
  --surge-row-hover: rgba(255, 122, 44, .20);
  --surge-inner-edge: #2a1a08;

  --filing: #e0b357;
  --filing-strong: #ffd479;

  --tile-stroke: #0b0e13;
  --tile-hover-stroke: #ffffff;
  --tile-text: #ffffff;
  --tile-text-2: rgba(255, 255, 255, .85);
  --tile-text-3: rgba(255, 255, 255, .55);
  --tile-shadow: rgba(0, 0, 0, .55);
  --tile-null: #2b3038;
  --tile-null-line: #3a414d;

  --axis: #252d3c;
  --grid: #1d2432;

  --sector-fill: rgba(255, 255, 255, .035);
  --sector-line: #303a4c;
  --sector-text: #9fb0c9;

  --legend-gradient: linear-gradient(90deg,
      #b31f1f, #d24b3d, #8a4a46, #4a4f5c, #46855c, #2eb55f, #19c46b);

  --radius: 10px;
  --sidebar-w: 268px;
  --topbar-h: 66px;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f3f5f9;
  --canvas-bg: #e9edf3;
  --panel: #ffffff;
  --panel-2: #f6f8fb;
  --panel-3: #eaeff6;
  --panel-4: #e4eaf3;

  --line: #dde3ec;
  --line-soft: #e9edf4;
  --line-strong: #c9d3e0;

  --text: #161e2b;
  --text-dim: #57657a;
  --text-faint: #8792a3;
  --text-ghost: #a3adbb;
  --text-num: #46586f;

  --accent: #2f6fe0;
  --accent-on: #ffffff;
  --accent-glow: rgba(47, 111, 224, .22);
  --accent-soft-bg: #e3ecfd;
  --accent-soft-line: #a8c6f5;
  --accent-soft-text: #1c4fa8;

  --up: #17843b;
  --down: #c0392b;
  --up-glow: rgba(23, 132, 59, .35);

  --topbar-a: #ffffff;
  --topbar-b: #f7f9fc;
  --modal-head-a: #fbfcfe;
  --modal-head-b: #ffffff;

  --scrollbar: #cbd4e0;
  --scrollbar-hover: #b3bfd0;

  --chip-bg: #e8eef7;
  --chip-text: #5b6d87;

  --checkbox-bg: #ffffff;
  --checkbox-line: #b8c3d3;

  --overlay: rgba(240, 243, 248, .86);
  --float-bg: rgba(255, 255, 255, .96);
  --tooltip-bg: rgba(255, 255, 255, .98);
  --tooltip-line: #d3dbe6;
  --sep: #e6eaf1;
  --bar-track: #e6eaf1;

  --shadow-sm: 0 4px 14px rgba(24, 40, 72, .10);
  --shadow-md: 0 12px 30px rgba(24, 40, 72, .16);
  --shadow-lg: 0 24px 60px rgba(24, 40, 72, .20);
  --modal-veil: rgba(28, 38, 54, .38);

  --status-ok-bg: #dcf3e5;      --status-ok-text: #16713b;
  --status-error-bg: #fbe2dd;   --status-error-text: #b03c28;
  --status-idle-bg: #e8ecf3;    --status-idle-text: #6a7686;
  --status-off-bg: #e8ecf3;     --status-off-text: #8b95a5;
  --warn-text: #b4632c;         --warn-bg: #fdeedd;

  --badge-news-bg: #e2edfb;      --badge-news-text: #24619f;
  --badge-press-bg: #e7ecf5;     --badge-press-text: #435a7c;
  --badge-community-bg: #fbeade; --badge-community-text: #a45a23;
  --badge-filings-bg: #fbf1d9;   --badge-filings-text: #8a6416;

  --surge: #c9740a;
  --surge-strong: #a85f04;
  --surge-tint: rgba(255, 162, 26, .16);
  --surge-line: rgba(214, 132, 18, .40);
  --surge-row-a: rgba(255, 145, 40, .16);
  --surge-row-b: rgba(255, 145, 40, .05);
  --surge-row-line: rgba(214, 132, 18, .30);
  --surge-row-hover: rgba(255, 145, 40, .26);
  /* 라이트에서는 밝은 타일 위에 얹히므로 안쪽 경계를 짙게 */
  --surge-inner-edge: #6b3d05;

  --filing: #b07d16;
  --filing-strong: #8a6416;

  --tile-stroke: #ffffff;
  --tile-hover-stroke: #161e2b;
  --tile-text: #ffffff;
  --tile-text-2: rgba(255, 255, 255, .92);
  --tile-text-3: rgba(255, 255, 255, .70);
  --tile-shadow: rgba(0, 0, 0, .45);
  --tile-null: #b9c1cc;
  --tile-null-line: #a2acba;

  --axis: #ccd4e0;
  --grid: #e6eaf1;

  --sector-fill: rgba(22, 30, 43, .05);
  --sector-line: #c2ccda;
  --sector-text: #46586f;

  /* 흰 배경에서도 단계가 구분되도록 중간톤을 어둡게 유지한다 */
  --legend-gradient: linear-gradient(90deg,
      #a11a1a, #d0453a, #b8736d, #868f9e, #6f9e79, #2ea44f, #17843b);
}

* { box-sizing: border-box; }

/* [hidden] 은 브라우저 기본 스타일이라 작성자 스타일의 display 지정에 항상 밀린다.
   오버레이/팝업이 hidden 인데도 계속 보이는 사고를 막기 위해 강제로 이기게 둔다.
   (가시성 자체는 .is-open 클래스로 제어하므로 이건 2중 안전장치다) */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "IBM Plex Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* 테마 전환을 부드럽게. 첫 페인트 때는 .theme-booting 이 붙어 있어 깜빡이지 않는다. */
body:not(.theme-booting) .topbar,
body:not(.theme-booting) .sidebar,
body:not(.theme-booting) .canvas,
body:not(.theme-booting) .modal,
body:not(.theme-booting) .modal-head,
body:not(.theme-booting) .chart-card,
body:not(.theme-booting) .map-legend,
body:not(.theme-booting) .coverage-note,
body:not(.theme-booting) .periods,
body:not(.theme-booting) .lang-switch,
body:not(.theme-booting) .icon-btn,
body:not(.theme-booting) .seg-btns button,
body:not(.theme-booting) .quick-btns button,
body:not(.theme-booting) html,
body:not(.theme-booting) {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

button { font-family: inherit; cursor: pointer; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }

.app { display: flex; flex-direction: column; height: 100%; }

/* ───────────────────────── 상단 바 ───────────────────────── */
.topbar {
  height: var(--topbar-h);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 18px;
  background: linear-gradient(180deg, var(--topbar-a), var(--topbar-b));
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }

.brand-mark {
  width: 30px; height: 30px;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  grid-template-rows: 1.6fr 1fr;
  gap: 2px;
  flex: 0 0 auto;
}
.brand-mark span { border-radius: 2px; }
.brand-mark span:nth-child(1) { background: var(--up); }
.brand-mark span:nth-child(2) { background: var(--down); }
.brand-mark span:nth-child(3) { background: var(--text-faint); }
.brand-mark span:nth-child(4) { background: var(--up); opacity: .65; }

.brand-text h1 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  white-space: nowrap;
}
.brand-text p {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
}

.periods {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.periods button {
  border: 0;
  background: transparent;
  color: var(--text-dim);
  padding: 7px 15px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.periods button:hover { background: var(--panel-3); color: var(--text); }
.periods button.active {
  background: var(--accent);
  color: var(--accent-on);
  font-weight: 600;
  box-shadow: 0 2px 10px var(--accent-glow);
}

.periods.topn button { padding: 7px 11px; font-size: 12px; }
.periods.topn .topn-label {
  align-self: center;
  padding: 0 7px 0 4px;
  font-size: 10.5px;
  color: var(--text-faint);
  letter-spacing: .4px;
  white-space: nowrap;
}

.topbar-meta { margin-left: auto; display: flex; align-items: center; gap: 18px; }

.stat { text-align: right; line-height: 1.15; }
.stat b { display: block; font-family: var(--mono); font-size: 17px; font-weight: 600; }
.stat small { color: var(--text-faint); font-size: 10.5px; }

.refresh { text-align: right; line-height: 1.3; }
.refresh-line { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 12px; color: var(--text-dim); }
.refresh-sub { font-size: 10.5px; color: var(--text-faint); }
.refresh-sub b { font-family: var(--mono); color: var(--text-dim); }

.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--up);
  animation: pulse 2.4s infinite;
}
.dot.loading { background: var(--accent); }
.dot.error { background: var(--down); animation: none; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 var(--up-glow); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.lang-switch {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.lang-switch button {
  border: 0;
  background: transparent;
  color: var(--text-faint);
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.lang-switch button:hover { background: var(--panel-3); color: var(--text); }
.lang-switch button.active { background: var(--panel-4); color: var(--text); font-weight: 600; }

/* 테마 토글 (해/달) */
#themeToggle .theme-icon { display: inline-block; line-height: 1; }
:root[data-theme="light"] #themeToggle .icon-moon { display: none; }
:root:not([data-theme="light"]) #themeToggle .icon-sun { display: none; }

.coverage-note {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--float-bg);
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow-sm);
  max-width: calc(100% - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 소급 수집 구간은 기준이 다르므로 눈에 띄게 */
.coverage-note.is-backfill {
  border-color: var(--surge-line);
  color: var(--surge);
  background: var(--float-bg);
}

.icon-btn {
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1;
  transition: .15s;
}
.icon-btn:hover { background: var(--panel-3); color: var(--text); border-color: var(--line-strong); }
.icon-btn.spin { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ───────────────────────── 레이아웃 ───────────────────────── */
.main { flex: 1 1 auto; display: flex; min-height: 0; }

/* ───────────────────────── 사이드바 ───────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.side-block { padding: 14px 14px 12px; border-bottom: 1px solid var(--line-soft); }
.side-title {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 9px;
}

.quick-btns { display: flex; gap: 5px; }
.quick-btns button {
  flex: 1;
  padding: 6px 4px;
  font-size: 11.5px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text-dim);
  transition: .15s;
}
.quick-btns button:hover { background: var(--panel-4); color: var(--text); border-color: var(--line-strong); }

.surge-block { border-bottom: 1px solid var(--line-soft); }
.surge-list { display: flex; flex-direction: column; gap: 3px; max-height: 168px; overflow-y: auto; }
.surge-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border-radius: 7px;
  border: 1px solid var(--surge-row-line);
  background: linear-gradient(90deg, var(--surge-row-a), var(--surge-row-b));
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.surge-row:hover { background: var(--surge-row-hover); border-color: var(--surge-line); }
.surge-row .flame { font-size: 12px; line-height: 1; }
.surge-row .sym { font-family: var(--mono); font-size: 12.5px; font-weight: 700; }
.surge-row .ratio { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--surge); font-weight: 600; }
.surge-row.out-of-view .sym { opacity: .72; }
.surge-empty { font-size: 11px; color: var(--text-faint); padding: 4px 2px; }

.asset-list { display: flex; flex-direction: column; gap: 2px; }
.asset-list .source-item { padding: 7px 8px; }
.asset-badge {
  margin-left: auto;
  font-size: 9.5px;
  font-family: var(--mono);
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--chip-bg);
  color: var(--chip-text);
  align-self: center;
}

.side-scroll { flex: 1 1 auto; overflow-y: auto; padding: 4px 0 10px; min-height: 0; }
.side-loading { padding: 16px 14px; color: var(--text-faint); font-size: 12px; }

.cat-group { padding: 12px 14px 4px; }
.cat-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 600; color: var(--text-dim);
  margin-bottom: 8px;
}
.cat-head .cat-chip {
  font-size: 9.5px; padding: 2px 6px; border-radius: 4px;
  background: var(--chip-bg); color: var(--chip-text); font-family: var(--mono);
}

.source-item {
  display: flex;
  gap: 9px;
  padding: 8px 9px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s;
  user-select: none;
}
.source-item:hover { background: var(--panel-2); }
.source-item.disabled { opacity: .42; cursor: not-allowed; }

.source-item input { display: none; }
.checkbox {
  width: 15px; height: 15px;
  flex: 0 0 15px;
  margin-top: 2px;
  border-radius: 4px;
  border: 1.5px solid var(--checkbox-line);
  background: var(--checkbox-bg);
  position: relative;
  transition: .12s;
}
.source-item.checked .checkbox { background: var(--accent); border-color: var(--accent); }
.source-item.checked .checkbox::after {
  content: "";
  position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid var(--accent-on); border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}

.source-meta { min-width: 0; flex: 1; }
.source-name { font-size: 12.5px; font-weight: 500; color: var(--text); }
.source-sub { font-size: 10.5px; color: var(--text-faint); margin-top: 2px; line-height: 1.35; }
.source-sub .num { font-family: var(--mono); color: var(--text-num); }
.source-sub .src-err { color: var(--warn-text); }

.src-status {
  margin-left: 6px;
  font-size: 9px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  vertical-align: 1px;
}
.src-status.ok       { background: var(--status-ok-bg);    color: var(--status-ok-text); }
.src-status.error    { background: var(--status-error-bg); color: var(--status-error-text); }
.src-status.idle     { background: var(--status-idle-bg);  color: var(--status-idle-text); }
.src-status.disabled { background: var(--status-off-bg);   color: var(--status-off-text); }
/* 한도에 걸려 그 소스만 잠시 멈춘 상태 (오류와 구분한다) */
.src-status.limited  { background: var(--warn-bg);         color: var(--warn-text); }
/* 게시판 구조가 바뀌어 파싱이 실패한 상태. 고칠 곳이 선택자라는 뜻이고
   다른 소스는 멀쩡하므로 일반 오류와 구분해서 보여준다. */
.src-status.stale    { background: var(--warn-bg);         color: var(--warn-text); }
/* 상대가 접근을 막아 둔 상태(레딧이 특정 서브레딧을 계속 403/429 로 거절).
   코드를 고쳐서 될 일이 아니고 나머지 하위 소스는 정상이라 오류와 구분한다. */
.src-status.restricted { background: var(--warn-bg);       color: var(--warn-text); }

/* 오늘 할당량 사용률. 남은 여유가 한눈에 보이도록 가는 막대를 붙인다. */
.src-quota {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-faint);
  font-size: 10px;
}
.src-quota.mid  { color: var(--warn-text); }
.src-quota.high { color: var(--status-error-text); }
.src-quota .q-bar {
  display: inline-block;
  width: 42px;
  height: 3px;
  border-radius: 2px;
  background: var(--line-soft);
  overflow: hidden;
}
.src-quota .q-bar i {
  display: block;
  height: 100%;
  background: currentColor;
  border-radius: 2px;
}

.legend-block { border-top: 1px solid var(--line-soft); border-bottom: 0; }
.side-note { font-size: 10.5px; color: var(--text-faint); line-height: 1.6; margin: 0; }

/* 좌우 분할 토글 (색상 기준 / 타일 표시 / 보기 방식) */
.seg-btns { display: flex; gap: 4px; flex-wrap: wrap; }
.seg-btns button {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 6px;
  font-size: 11px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text-dim);
  white-space: nowrap;
  transition: .15s;
}
.seg-btns button:hover { background: var(--panel-4); color: var(--text); }
.seg-btns button.active {
  background: var(--accent-soft-bg);
  border-color: var(--accent-soft-line);
  color: var(--accent-soft-text);
  font-weight: 600;
}

.wide-btn {
  width: 100%;
  padding: 8px 6px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text-dim);
  transition: .15s;
}
.wide-btn:hover { background: var(--panel-4); color: var(--text); border-color: var(--line-strong); }
.wide-btn.active {
  background: var(--accent-soft-bg);
  border-color: var(--accent-soft-line);
  color: var(--accent-soft-text);
}

/* 타임랩스 재생 바 */
.timelapse {
  position: absolute;
  left: 50%; bottom: 44px;
  transform: translateX(-50%);
  z-index: 6;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  width: min(680px, calc(100% - 28px));
  border-radius: 22px;
  background: var(--float-bg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  font-size: 11px;
  color: var(--text-dim);
}
.timelapse.is-open { display: flex; }

.tl-play, .tl-exit {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  font-size: 12px;
  line-height: 1;
  transition: .15s;
}
.tl-play:hover, .tl-exit:hover { background: var(--panel-4); border-color: var(--line-strong); }
.tl-exit { border-radius: 8px; color: var(--text-faint); }

.tl-time {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text);
  min-width: 96px;
}
.tl-frame { flex: 0 0 auto; font-family: var(--mono); color: var(--text-faint); font-size: 10.5px; }

.tl-slider {
  flex: 1 1 auto;
  min-width: 0;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--bar-track);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}
.tl-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--panel);
  cursor: pointer;
}
.tl-slider::-moz-range-thumb {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--panel);
  cursor: pointer;
}

.tl-speeds { flex: 0 0 auto; display: flex; gap: 2px; }
.tl-speeds button {
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: 10.5px;
  padding: 3px 6px;
  border-radius: 5px;
  transition: .15s;
}
.tl-speeds button:hover { color: var(--text); background: var(--panel-3); }
.tl-speeds button.active {
  color: var(--accent-soft-text);
  background: var(--accent-soft-bg);
  border-color: var(--accent-soft-line);
}

/* 재생 중에는 범례를 조금 위로 올려 겹치지 않게 */
.timelapse.is-open ~ .map-legend { bottom: 10px; }

@media (max-width: 860px) {
  .timelapse { gap: 7px; padding: 6px 9px; }
  .tl-frame { display: none; }
  .tl-time { min-width: 74px; font-size: 10.5px; }
}

/* 트리맵 하단 범례 */
.map-legend {
  position: absolute;
  left: 50%; bottom: 10px;
  transform: translateX(-50%);
  z-index: 4;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--float-bg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-size: 10.5px;
  color: var(--text-dim);
  pointer-events: none;
  max-width: calc(100% - 24px);
}
.legend-caption { color: var(--text-faint); }
.legend-tick { font-family: var(--mono); font-size: 10.5px; }
.legend-gradient {
  width: 132px; height: 8px; border-radius: 4px;
  background: var(--legend-gradient);
}
.legend-null { display: flex; align-items: center; gap: 4px; color: var(--text-faint); }
.legend-null i {
  width: 9px; height: 9px; border-radius: 2px;
  background: var(--tile-null); border: 1px solid var(--tile-null-line);
  display: inline-block;
}

@media (max-width: 860px) {
  .legend-caption { display: none; }
  .legend-gradient { width: 90px; }
}

.side-foot { padding: 11px 14px 13px; border-top: 1px solid var(--line-soft); }
.side-foot p { margin: 0; font-size: 10px; line-height: 1.55; color: var(--text-ghost); }

/* ───────────────────────── 트리맵 ───────────────────────── */
.canvas { flex: 1 1 auto; position: relative; min-width: 0; background: var(--canvas-bg); }
#treemap { display: block; width: 100%; height: 100%; }

/* 섹터별 보기: 섹터 테두리와 헤더 */
.sector { pointer-events: none; }
.sector .sector-frame {
  fill: var(--sector-fill);
  stroke: var(--sector-line);
  stroke-width: 1;
}
.sector .sector-name {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .3px;
  fill: var(--sector-text);
}
.sector .sector-meta {
  font-size: 10px;
  font-family: var(--mono);
  font-weight: 600;
  fill: var(--sector-text);
}

.cell rect { stroke: var(--tile-stroke); stroke-width: 1; transition: filter .1s; }
.cell { cursor: pointer; }
.cell:hover rect { filter: brightness(1.18); stroke: var(--tile-hover-stroke); stroke-width: 1.4; }
.cell text { pointer-events: none; fill: var(--tile-text); }
.cell .t-sym { font-weight: 700; letter-spacing: -0.3px; text-shadow: 0 1px 3px var(--tile-shadow); }
.cell .t-cnt { font-family: var(--mono); fill: var(--tile-text-2); text-shadow: 0 1px 3px var(--tile-shadow); }
.cell .t-extra { font-family: var(--mono); fill: var(--tile-text-3); text-shadow: 0 1px 3px var(--tile-shadow); }

/* ── 급등 종목: 불타는 듯한 테두리 ─────────────────────────────
   opacity 만 애니메이션한다(합성 단계에서 처리 → 타일이 많아도 부드럽다).
   두 겹의 위상을 어긋나게 둬서 테두리를 따라 흐르는 것처럼 보이게 한다. */
.cell .surge-glow { fill: none; pointer-events: none; opacity: 0; }
.cell.surge .surge-glow-a { opacity: .55; animation: surgeGlowA 2.8s ease-in-out infinite; }
.cell.surge .surge-glow-b { opacity: .18; animation: surgeGlowB 2.8s ease-in-out infinite; }

@keyframes surgeGlowA {
  0%, 100% { opacity: .38; }
  50%      { opacity: .92; }
}
@keyframes surgeGlowB {
  0%, 100% { opacity: .26; }
  45%      { opacity: .06; }
}

.cell.surge-2 .surge-glow-a { animation-duration: 2.3s; }
.cell.surge-2 .surge-glow-b { animation-duration: 2.3s; opacity: .26; }
.cell.surge-3 .surge-glow-a { animation-duration: 1.9s; }
.cell.surge-3 .surge-glow-b { animation-duration: 1.9s; opacity: .34; }

/* 빨간 타일(다크)·밝은 타일(라이트) 위에서도 구분되도록 안쪽 경계를 한 겹 둔다 */
.cell.surge rect:first-of-type { stroke: var(--surge-inner-edge); }

/* 사이드바에서 급등 종목을 클릭했을 때 잠깐 강조 */
.cell.flash .surge-glow-a { animation: none; opacity: 1; }
@keyframes flashPulse { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.cell.flash rect:first-of-type { animation: flashPulse .45s ease-in-out 3; }

@media (prefers-reduced-motion: reduce) {
  .cell.surge .surge-glow-a,
  .cell.surge .surge-glow-b,
  .cell.flash rect:first-of-type { animation: none; }
  .cell.surge .surge-glow-a { opacity: .8; }
}

/* 최근 8-K 공시가 있는 종목 */
.cell.has-filing rect { stroke: var(--filing); stroke-width: 1.8; }
.cell.has-filing:hover rect { stroke: var(--filing-strong); stroke-width: 2.2; }
.cell .t-filing {
  font-family: var(--mono);
  font-weight: 700;
  fill: var(--filing-strong);
  letter-spacing: -0.2px;
  text-shadow: 0 1px 3px var(--tile-shadow);
}

.canvas-state {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; background: var(--overlay); z-index: 5;
}
.canvas-state.is-open { display: flex; }
.canvas-state p { margin: 0; color: var(--text-dim); font-size: 13px; text-align: center; line-height: 1.7; }
.spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid var(--line); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
.canvas-state.no-spinner .spinner { display: none; }

/* 짧은 알림 */
.toast {
  position: fixed;
  left: 50%; bottom: 28px;
  transform: translateX(-50%);
  z-index: 70;
  padding: 9px 16px;
  border-radius: 22px;
  background: var(--float-bg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  color: var(--text);
  font-size: 12px;
  pointer-events: none;
  animation: toastIn .18s ease;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 6px); } }

/* ───────────────────────── 툴팁 ───────────────────────── */
.tooltip {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  min-width: 186px;
  max-width: 268px;
  padding: 10px 12px;
  background: var(--tooltip-bg);
  border: 1px solid var(--tooltip-line);
  border-radius: 9px;
  box-shadow: var(--shadow-md);
  font-size: 12px;
  color: var(--text);
}
.tt-head { display: flex; align-items: baseline; gap: 8px; }
.tt-sym { font-family: var(--mono); font-size: 15px; font-weight: 700; }
.tt-chg { margin-left: auto; font-family: var(--mono); font-weight: 600; font-size: 12.5px; }
.tt-name { color: var(--text-dim); font-size: 11px; margin: 3px 0 8px; line-height: 1.35; }
.tt-row { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; color: var(--text-dim); font-size: 11.5px; }
.tt-row b { font-family: var(--mono); color: var(--text); font-weight: 600; }
.tt-sep { height: 1px; background: var(--sep); margin: 7px 0; }
/* 툴팁 안 소제목 ("대중 관심도" 처럼 몇 줄을 묶어 주는 자리) */
.tt-section {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 1px 0 3px;
}
.tt-price { display: flex; align-items: baseline; gap: 8px; padding: 1px 0 3px; }
.tt-price .px { font-family: var(--mono); font-size: 14px; font-weight: 600; }
.tt-price .rt { font-family: var(--mono); font-size: 12px; font-weight: 600; margin-left: auto; }
.tt-price .win { font-size: 9.5px; color: var(--text-faint); }
.tt-noprice { font-size: 11px; color: var(--text-faint); padding: 2px 0 3px; }
.tt-surge {
  font-size: 11px;
  font-weight: 600;
  color: var(--surge);
  background: var(--surge-tint);
  border: 1px solid var(--surge-line);
  border-radius: 6px;
  padding: 4px 7px;
  margin: 5px 0 6px;
  line-height: 1.35;
}
.tt-crypto {
  font-size: 9.5px; font-weight: 600; letter-spacing: .4px;
  padding: 1px 5px; border-radius: 3px;
  background: var(--badge-filings-bg); color: var(--badge-filings-text);
}
.tt-src { font-size: 11px; color: var(--text-dim); display: flex; justify-content: space-between; padding: 2px 0; }
.tt-src span:last-child { font-family: var(--mono); color: var(--text-num); }
.tt-bar { height: 5px; border-radius: 3px; display: flex; overflow: hidden; margin: 6px 0 7px; background: var(--bar-track); }
.tt-bar i { display: block; height: 100%; }
.tt-hint { margin-top: 8px; font-size: 10px; color: var(--text-faint); text-align: center; }
.tt-spark { display: flex; align-items: flex-end; gap: 7px; margin: 7px 0 2px; }
.tt-spark svg { flex: 1 1 auto; height: 22px; display: block; }
.tt-spark span { flex: 0 0 auto; font-size: 9.5px; color: var(--text-faint); font-family: var(--mono); }

/* ───────────────────────── 모달 ───────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: var(--modal-veil);
  backdrop-filter: blur(3px);
  display: none;
  align-items: center; justify-content: center;
  padding: 26px;
}
.modal-backdrop.is-open { display: flex; animation: fade .16s ease; }
@keyframes fade { from { opacity: 0; } }

.modal {
  width: min(940px, 100%);
  max-height: 100%;
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: rise .18s cubic-bezier(.2,.8,.3,1);
}
@keyframes rise { from { transform: translateY(10px); opacity: .4; } }

.modal-head {
  display: flex; align-items: center; gap: 18px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--modal-head-a), var(--modal-head-b));
}
.modal-head h2 { margin: 0; font-family: var(--mono); font-size: 24px; font-weight: 700; letter-spacing: -0.5px; }
.modal-head p { margin: 3px 0 0; color: var(--text-dim); font-size: 12px; }
.modal-head-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.modal-kpi { text-align: right; line-height: 1.2; }
.modal-kpi b { display: block; font-family: var(--mono); font-size: 18px; font-weight: 600; }
.modal-kpi small { font-size: 10px; color: var(--text-faint); }

.modal-body {
  padding: 16px 18px 18px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.chart-card {
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 12px 13px 8px;
  min-width: 0;
}
.chart-title { font-size: 11px; font-weight: 600; color: var(--text-dim); margin-bottom: 8px; letter-spacing: .3px; }
.chart-title .muted { color: var(--text-faint); font-weight: 400; }
.chart-card svg { display: block; width: 100%; }
.links-card { grid-column: 1 / -1; }

.links { max-height: 230px; overflow-y: auto; margin: 0 -4px; }
.link-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px;
  border-radius: 7px;
  text-decoration: none;
  color: var(--text);
  transition: background .12s;
}
.link-row:hover { background: var(--panel-3); }
.link-badge {
  flex: 0 0 auto;
  font-size: 10px; padding: 3px 7px; border-radius: 4px;
  font-weight: 600;
  background: var(--chip-bg); color: var(--chip-text);
}
.link-badge.news      { background: var(--badge-news-bg);      color: var(--badge-news-text); }
.link-badge.press     { background: var(--badge-press-bg);     color: var(--badge-press-text); }
.link-badge.community { background: var(--badge-community-bg); color: var(--badge-community-text); }
.link-badge.filings   { background: var(--badge-filings-bg);   color: var(--badge-filings-text); }
.link-host { flex: 1; min-width: 0; font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-host b { color: var(--text); font-weight: 500; }
.link-time { flex: 0 0 auto; font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); }
.link-arrow { flex: 0 0 auto; color: var(--text-faint); font-size: 12px; }
.links-empty, .chart-empty { padding: 22px 0; text-align: center; color: var(--text-faint); font-size: 12px; }

.axis text { fill: var(--text-faint); font-size: 10px; font-family: var(--mono); }
.axis line, .axis path { stroke: var(--axis); }
.grid line { stroke: var(--grid); }

/* ───────────────────────── 로그인 영역 ───────────────────────── */
.auth-area { display: flex; align-items: center; gap: 7px; }
.signin-btn {
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-on);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: .15s;
}
.signin-btn:hover { filter: brightness(1.08); }
.settings-link {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.user-button { display: flex; align-items: center; min-width: 32px; }

/* ───────────────────── 관심 종목 (사이드바) ───────────────────── */
.watch-block .side-title { display: flex; align-items: center; gap: 8px; }
.watch-toggle {
  margin-left: auto;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text-faint);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: 2px 7px;
  border-radius: 5px;
  transition: .15s;
}
.watch-toggle:hover { color: var(--text); background: var(--panel-4); }
.watch-toggle.active {
  background: var(--accent-soft-bg);
  border-color: var(--accent-soft-line);
  color: var(--accent-soft-text);
}
.watch-list { display: flex; flex-wrap: wrap; gap: 4px; max-height: 132px; overflow-y: auto; }
.watch-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 7px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: .12s;
}
.watch-chip:hover { background: var(--panel-4); border-color: var(--line-strong); }
.watch-chip .x { color: var(--text-faint); font-size: 11px; }
.watch-chip .x:hover { color: var(--down); }
.watch-empty { font-size: 10.5px; color: var(--text-faint); line-height: 1.5; }

/* 타일의 관심 종목 별표 */
.cell .t-star {
  font-size: 11px;
  fill: var(--surge-strong);
  cursor: pointer;
  pointer-events: auto;
  text-shadow: 0 1px 3px var(--tile-shadow);
}
.cell .t-star.off { fill: rgba(255, 255, 255, .32); }
.cell:hover .t-star.off { fill: rgba(255, 255, 255, .7); }
:root[data-theme="light"] .cell .t-star.off { fill: rgba(255, 255, 255, .55); }

/* 관심 종목만 보기일 때 나머지를 흐리게 */
.cell.dimmed { opacity: .22; }

/* ───────────────────────── 검색 ───────────────────────── */
.searchbox { position: relative; display: flex; align-items: center; }
.searchbox input {
  width: 168px;
  padding: 7px 30px 7px 26px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font-family: inherit;
  font-size: 12.5px;
  outline: none;
  transition: border-color .15s, width .18s;
}
.searchbox input:focus { border-color: var(--accent); width: 214px; }
.searchbox input::-webkit-search-cancel-button { display: none; }
.search-icon {
  position: absolute; left: 9px;
  color: var(--text-faint); font-size: 14px; pointer-events: none;
}
.search-kbd {
  position: absolute; right: 8px;
  font-family: var(--mono); font-size: 10px;
  color: var(--text-faint);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 1px 5px;
  pointer-events: none;
}
.searchbox input:focus ~ .search-kbd { display: none; }

.search-results {
  position: absolute;
  top: calc(100% + 6px); left: 0;
  min-width: 214px; max-height: 296px;
  overflow-y: auto;
  z-index: 40;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: var(--shadow-md);
  padding: 4px;
}
.search-row {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
}
.search-row:hover, .search-row.active { background: var(--panel-3); }
.search-row .sym { font-family: var(--mono); font-weight: 700; }
.search-row .nm { color: var(--text-dim); font-size: 11.5px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.search-row .cnt { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--text-faint); }
.search-empty { padding: 12px 10px; color: var(--text-faint); font-size: 12px; }

/* ───────────────────────── 스켈레톤 ───────────────────────── */
.skeleton {
  position: absolute; inset: 0; z-index: 3;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 1fr;
  gap: 2px;
  padding: 2px;
  background: var(--canvas-bg);
}
.skeleton i {
  display: block;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--panel) 25%, var(--panel-3) 50%, var(--panel) 75%);
  background-size: 300% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
}
@keyframes shimmer { to { background-position: -300% 0; } }
.skeleton i:nth-child(1) { grid-column: span 3; grid-row: span 3; }
.skeleton i:nth-child(2) { grid-column: span 2; grid-row: span 2; }
.skeleton i:nth-child(3) { grid-column: span 1; grid-row: span 2; }
.skeleton i:nth-child(4) { grid-column: span 2; grid-row: span 2; }
.skeleton i:nth-child(5) { grid-column: span 1; }
.skeleton i:nth-child(6) { grid-column: span 2; }
@media (prefers-reduced-motion: reduce) { .skeleton i { animation: none; } }

/* ───────────────────────── 하단 상태 바 ───────────────────────── */
.statusbar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  height: 28px;
  padding: 0 14px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  font-size: 10.5px;
  color: var(--text-faint);
  overflow: hidden;
  white-space: nowrap;
}
.sb-spacer { flex: 1 1 auto; }
.sb-sep { opacity: .5; }
.sb-sources { display: flex; align-items: center; gap: 7px; overflow: hidden; }
.sb-src { display: inline-flex; align-items: center; gap: 4px; }
.sb-src i {
  width: 6px; height: 6px; border-radius: 50%;
  display: inline-block; flex: 0 0 auto;
}
.sb-src.ok i    { background: var(--up); }
.sb-src.error i { background: var(--down); }
.sb-src.idle i  { background: var(--text-faint); }
.sb-src.disabled i { background: var(--line-strong); }
.sb-item.muted { color: var(--text-ghost); }

/* ───────────────────── 모바일 정보 카드(하단 시트) ───────────────────── */
.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 65;
  display: none;
  flex-direction: column;
  background: var(--panel);
  border-top: 1px solid var(--line);
  border-radius: 16px 16px 0 0;
  box-shadow: var(--shadow-lg);
  padding: 8px 16px 20px;
  max-height: 62vh;
  overflow-y: auto;
  animation: sheetUp .2s cubic-bezier(.2,.8,.3,1);
}
.sheet.is-open { display: flex; }
@keyframes sheetUp { from { transform: translateY(16px); opacity: .5; } }
.sheet-grip {
  width: 38px; height: 4px; border-radius: 3px;
  background: var(--line-strong);
  margin: 2px auto 12px;
  flex: 0 0 auto;
}
.sheet-body .tt-hint { display: none; }

/* ───────────────────────── 설정 페이지 ───────────────────────── */
body.settings-page { overflow: auto; background: var(--bg); }
.settings-wrap { max-width: 760px; margin: 0 auto; padding: 26px 20px 72px; }

.settings-head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.settings-back { color: var(--text-dim); text-decoration: none; font-size: 13px; }
.settings-back:hover { color: var(--text); }
.settings-head-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.settings-wrap h1 { font-size: 26px; margin: 0 0 20px; letter-spacing: -.3px; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.card h2 {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; margin: 0 0 14px; font-weight: 600;
}
.card h2 .count { color: var(--text-faint); font-size: 11.5px; font-weight: 400; }
.badge-soon {
  font-size: 9.5px; font-weight: 600;
  padding: 2px 7px; border-radius: 4px;
  background: var(--chip-bg); color: var(--chip-text);
}
.card .hint { font-size: 11.5px; color: var(--text-faint); margin: 0 0 14px; line-height: 1.6; }
.card-actions { margin-top: 16px; display: flex; justify-content: flex-end; }

.signed-out { text-align: center; padding: 34px 20px; }
.signed-out p { color: var(--text-dim); margin: 0 0 18px; }

.profile-row { display: flex; gap: 18px; align-items: flex-start; }
.avatar {
  width: 64px; height: 64px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--panel-2);
  flex: 0 0 auto; object-fit: cover;
}
.profile-fields { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.profile-fields label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--text-dim); }
.profile-fields .hint { margin: -6px 0 0; }

.card input[type="text"], .card input[type="url"], .card select {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color .15s;
}
.card input:focus, .card select:focus { border-color: var(--accent); }
.card input:disabled { color: var(--text-faint); cursor: not-allowed; }

.link-btn {
  align-self: flex-start;
  border: 0; background: transparent; padding: 0;
  color: var(--accent); font-size: 12px; text-decoration: underline;
}
.save-btn {
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-on);
  font-size: 12.5px; font-weight: 600;
}
.save-btn:hover { filter: brightness(1.08); }

.pref-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.pref-item { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--text-dim); }

.watch-add { display: flex; gap: 8px; margin-bottom: 14px; }
.watch-add input { flex: 1 1 auto; text-transform: uppercase; }
.watch-add button {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  font-size: 12.5px; font-weight: 600;
}
.watch-add button:hover { background: var(--panel-4); border-color: var(--line-strong); }
.settings-page .watch-list { max-height: none; }

.switch-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-dim); }
.switch-row input { width: 16px; height: 16px; accent-color: var(--accent); }

@media (max-width: 560px) {
  .profile-row { flex-direction: column; }
  .pref-grid { grid-template-columns: 1fr; }
}

/* ───────────────────────── 반응형 ───────────────────────── */
@media (max-width: 1280px) {
  .searchbox input { width: 128px; }
  .searchbox input:focus { width: 188px; }
}
@media (max-width: 1100px) {
  .brand-text p { display: none; }
  .stat { display: none; }
  .search-kbd { display: none; }
}
@media (max-width: 860px) {
  :root { --sidebar-w: 220px; }
  .modal-body { grid-template-columns: 1fr; }
  .brand-text { display: none; }
}

/* ── 모바일: 사이드바를 하단 시트로, 트리맵을 세로로 ── */
@media (max-width: 720px) {
  .topbar {
    height: auto;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 12px;
    row-gap: 8px;
  }
  .topbar-meta { gap: 10px; width: 100%; justify-content: flex-end; }
  .periods { overflow-x: auto; max-width: 100%; }
  .periods button { padding: 6px 10px; font-size: 12px; }
  .searchbox { order: 5; width: 100%; }
  .searchbox input, .searchbox input:focus { width: 100%; }
  .refresh { display: none; }

  .main { flex-direction: column-reverse; }

  /* 사이드바 = 아래에서 올라오는 시트 */
  .sidebar {
    width: 100%;
    flex: 0 0 auto;
    max-height: 46vh;
    border-right: 0;
    border-top: 1px solid var(--line);
    overflow-y: auto;
  }
  .side-scroll { overflow: visible; }

  .canvas { flex: 1 1 auto; min-height: 52vh; }
  .map-legend { bottom: 8px; padding: 5px 9px; gap: 6px; }
  .timelapse { bottom: 40px; }
  .statusbar { font-size: 9.5px; gap: 6px; padding: 0 10px; }
  .sb-item.muted { display: none; }

  /* 모바일에서는 툴팁 대신 하단 정보 카드를 쓴다 */
  .tooltip { display: none !important; }
}