/* ============================================================
 *  화성특례시 지능형 행정 대시보드 — Theme & Animations
 * ============================================================ */
:root {
  --bg-0: #04060f;
  --bg-1: #070a1a;
  --bg-2: #0c1230;
  --bg-3: #131a40;
  --line: rgba(120, 170, 255, 0.12);
  --line-strong: rgba(120, 170, 255, 0.28);
  --text-1: #e8eeff;
  --text-2: #9aa6c9;
  --text-3: #6b7596;
  --neon-cyan: #00e5ff;
  --neon-blue: #2f8bff;
  --neon-mint: #39ffb0;
  --neon-violet: #b46bff;
  --neon-magenta: #ff4dd2;
  --neon-amber: #ffc23a;
  --neon-red: #ff5470;
  --glow-cyan: 0 0 24px rgba(0, 229, 255, 0.45), 0 0 60px rgba(0, 229, 255, 0.18);
  --glow-mint: 0 0 22px rgba(57, 255, 176, 0.45), 0 0 60px rgba(57, 255, 176, 0.18);
  --glow-red:  0 0 22px rgba(255, 84, 112, 0.55), 0 0 60px rgba(255, 84, 112, 0.20);
  --glow-amber:0 0 22px rgba(255, 194, 58, 0.55), 0 0 60px rgba(255, 194, 58, 0.18);
  --ease: cubic-bezier(.16,1,.3,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; }

/* 뷰포트 적응형 베이스 폰트 — 1rem = 12px ~ 16px (작은 사이니지 720h → 12px, 풀HD 1080h → 16px) */
html { font-size: clamp(12px, 1.4vh, 16px); }

body {
  font-family: 'Pretendard', 'Noto Sans KR', 'Segoe UI', Roboto, system-ui, sans-serif;
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(47, 139, 255, 0.18), transparent 60%),
    radial-gradient(900px 700px at 110% 10%, rgba(180, 107, 255, 0.16), transparent 60%),
    radial-gradient(1000px 800px at 50% 120%, rgba(0, 229, 255, 0.12), transparent 60%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1));
  color: var(--text-1);
  letter-spacing: -0.01em;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

#root { width: 100vw; height: 100vh; display: flex; flex-direction: column; }

/* ---------- Background grid + scanlines ---------- */
.bg-fx {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(120, 170, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 170, 255, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 90%);
}
.bg-scan {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
}
.bg-orb {
  position: fixed; width: 480px; height: 480px; border-radius: 50%;
  filter: blur(120px); opacity: 0.25; z-index: 0; pointer-events: none;
  animation: float 18s ease-in-out infinite;
}
.bg-orb.a { top: -120px; left: -120px; background: var(--neon-blue); }
.bg-orb.b { bottom: -160px; right: -180px; background: var(--neon-violet); animation-delay: -8s; }

/* ---------- Header ---------- */
.hd {
  position: relative; z-index: 5; display: flex; align-items: center;
  padding: clamp(4px, 0.8vh, 10px) clamp(10px, 1.4vw, 18px);
  gap: clamp(8px, 1.2vw, 14px);
  height: clamp(46px, 6.2vh, 64px); flex-shrink: 0;
  background: linear-gradient(180deg, rgba(7,10,26,0.85), rgba(7,10,26,0.4));
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.hd .brand { display: flex; align-items: center; gap: 12px; min-width: 320px; }
.hd .emblem {
  width: clamp(32px, 4.4vh, 44px); height: clamp(32px, 4.4vh, 44px);
  display: grid; place-items: center;
  border-radius: clamp(8px, 1vh, 12px); background: linear-gradient(135deg, #112063, #060a1f);
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 0 20px rgba(47,139,255,0.32);
  position: relative; cursor: pointer; transition: transform .4s var(--ease); flex-shrink: 0;
}
.hd .emblem:hover { transform: rotate(-12deg) scale(1.08); }
.hd .emblem svg { width: 60%; height: 60%; }
.hd .titles { line-height: 1.1; min-width: 0; }
.hd .titles .t1 { font-size: clamp(13px, 1.9vh, 19px); font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; }
.hd .titles .t1 .accent { color: var(--neon-cyan); text-shadow: 0 0 10px rgba(0,229,255,0.55); }
.hd .titles .t2 { font-size: clamp(8px, 1.1vh, 11px); color: var(--text-3); letter-spacing: 0.24em; text-transform: uppercase; margin-top: 2px; white-space: nowrap; }

.hd .clock {
  margin-left: auto; display: flex; align-items: baseline; gap: clamp(6px, 0.8vw, 12px);
  font-family: 'JetBrains Mono', 'Roboto Mono', ui-monospace, monospace;
  cursor: pointer; flex-shrink: 0;
}
.hd .clock .time {
  font-size: clamp(18px, 3vh, 28px); font-weight: 700; color: var(--text-1);
  text-shadow: 0 0 14px rgba(0,229,255,0.35); letter-spacing: 0.06em; line-height: 1;
}
.hd .clock .time .sep { color: var(--neon-cyan); animation: blink 1s steps(2) infinite; }
.hd .clock .date { font-size: clamp(10px, 1.3vh, 13px); color: var(--text-2); white-space: nowrap; }
.hd .clock .date .badge { color: var(--neon-mint); margin-left: 8px; }

.hd .pills { display: flex; gap: 6px; margin-left: 14px; }
.pill {
  display: flex; align-items: center; gap: 5px; padding: 4px 8px;
  border: 1px solid var(--line-strong); border-radius: 999px; font-size: 10px;
  background: rgba(10, 16, 40, 0.6); color: var(--text-2);
  transition: all .25s var(--ease); cursor: pointer; position: relative;
}
.pill:hover { color: var(--text-1); border-color: var(--neon-cyan); box-shadow: var(--glow-cyan); transform: translateY(-1px); }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--neon-mint); box-shadow: 0 0 8px var(--neon-mint); animation: pulseDot 1.6s ease-in-out infinite; }
.pill.warn .dot { background: var(--neon-amber); box-shadow: 0 0 10px var(--neon-amber); }
.pill.err .dot { background: var(--neon-red);  box-shadow: 0 0 10px var(--neon-red); }

.hd .alert-btn {
  margin-left: 6px; position: relative;
  width: clamp(32px, 4.4vh, 42px); height: clamp(32px, 4.4vh, 42px);
  display: grid; place-items: center; border-radius: clamp(6px, 1vh, 10px);
  border: 1px solid var(--line-strong); background: rgba(10,16,40,0.5);
  cursor: pointer; transition: all .25s var(--ease); flex-shrink: 0;
}
.hd .alert-btn:hover { border-color: var(--neon-amber); box-shadow: var(--glow-amber); }
.hd .alert-btn .count {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px; background: var(--neon-red); color: #fff; font-size: 10px; font-weight: 700;
  display: grid; place-items: center; box-shadow: 0 0 10px rgba(255,84,112,0.65);
  animation: badgePulse 1.4s ease-in-out infinite;
}

/* ---------- Tab Nav ---------- */
.tab-nav {
  position: relative; z-index: 4; display: flex; align-items: stretch; gap: 0;
  padding: clamp(4px, 0.6vh, 8px) clamp(10px, 1.4vw, 18px) 0; flex-shrink: 0;
  background: linear-gradient(180deg, rgba(7,10,26,0.85), rgba(7,10,26,0.0));
  border-bottom: 1px solid var(--line);
  height: clamp(32px, 4.6vh, 46px);
}
.tab {
  position: relative; background: transparent; border: 1px solid transparent;
  border-bottom: none; color: var(--text-3);
  font: 600 clamp(10px, 1.4vh, 13px)/1.2 inherit;
  letter-spacing: 0.04em;
  padding: clamp(4px, 0.6vh, 8px) clamp(10px, 1.4vw, 18px);
  cursor: pointer;
  border-radius: clamp(6px, 1vh, 10px) clamp(6px, 1vh, 10px) 0 0;
  display: flex; align-items: center; gap: 6px;
  transition: all .25s var(--ease);
}
.tab .badge {
  font-size: 9px; padding: 2px 6px; border-radius: 4px;
  background: rgba(255,255,255,0.06); color: var(--text-3); letter-spacing: 0.1em;
}
.tab:hover { color: var(--text-1); background: rgba(255,255,255,0.03); }
.tab.active {
  color: var(--neon-cyan); border-color: var(--line-strong);
  background: linear-gradient(180deg, rgba(0,229,255,0.10), rgba(7,10,26,0));
  text-shadow: 0 0 12px rgba(0,229,255,0.55);
}
.tab.active::after {
  content: ''; position: absolute; left: 6px; right: 6px; bottom: -1px;
  height: 2px; background: linear-gradient(90deg, var(--neon-cyan), var(--neon-violet));
  box-shadow: 0 0 12px rgba(0,229,255,0.6);
}
.tab.active .badge { background: rgba(0,229,255,0.16); color: var(--neon-cyan); }
.tab.live.active .badge { background: rgba(57,255,176,0.16); color: var(--neon-mint); }
.tab .ic { width: 16px; height: 16px; }

.tab-spacer { flex: 1; }
.tab-actions { display: flex; gap: 6px; align-items: center; padding-bottom: 4px; }
.tab-btn {
  background: rgba(10,16,40,0.5); border: 1px solid var(--line-strong);
  color: var(--text-2); padding: 5px 10px; border-radius: 8px; cursor: pointer;
  font-size: 11px; display: flex; align-items: center; gap: 5px; transition: all .25s;
}
.tab-btn:hover { color: var(--neon-cyan); border-color: var(--neon-cyan); box-shadow: var(--glow-cyan); }
.tab-btn .ic { width: 13px; height: 13px; }

/* Tab panes */
.tab-container { position: relative; flex: 1; min-height: 0; display: flex; }
.tab-pane { display: none; flex: 1; min-height: 0; flex-direction: column; animation: paneIn .5s var(--ease); }
.tab-pane.active { display: flex; }

/* Damoa platform embed */
.damoa-wrap {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  padding: clamp(6px, 1vh, 14px); gap: clamp(4px, 0.6vh, 8px);
  background: var(--bg-1);
}
.damoa-meta {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px; border-radius: 8px;
  background: rgba(0,229,255,0.06); border: 1px solid var(--line);
  font-size: clamp(11px, 1.4vh, 13px); flex-shrink: 0;
}
.damoa-meta .t { font-weight: 700; color: var(--text-1); }
.damoa-meta .sub { color: var(--text-3); font-family: 'JetBrains Mono', monospace; font-size: 0.85em; }
.damoa-meta .open-ext {
  margin-left: auto; color: var(--neon-cyan); text-decoration: none;
  padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line-strong);
  font-size: 0.9em; transition: all .25s;
}
.damoa-meta .open-ext:hover { background: rgba(0,229,255,0.1); border-color: var(--neon-cyan); }
.damoa-frame-box {
  flex: 1; min-height: 0; position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}
/* 다모아 페이지는 데스크톱 1920×1080 캔버스 기준 — iframe 을 그 논리 크기로 렌더한 뒤
   transform: scale 로 컨테이너에 맞춰 축소해서 한 화면 안에 전체가 보이도록 한다.
   비율(scale)은 app.js#fitDamoaFrame() 가 컨테이너 크기 기준으로 동적 계산. */
#damoa-frame {
  position: absolute; top: 0; left: 0;
  width: 1920px; height: 1080px;
  border: 0; background: #fff;
  transform-origin: 0 0;
}
#damoa-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-1); color: var(--text-2);
}
#damoa-placeholder .ph-card {
  max-width: 480px; text-align: center; padding: 28px 32px;
  border: 1px dashed var(--line-strong); border-radius: 14px; background: rgba(78,184,255,0.06);
}
#damoa-placeholder .ph-card svg { color: var(--neon-cyan); margin-bottom: 10px; }
#damoa-placeholder .ph-title { color: var(--text-1); font-weight: 700; font-size: clamp(15px, 2vh, 18px); margin-bottom: 8px; }
#damoa-placeholder .ph-desc { color: var(--text-3); font-size: clamp(11px, 1.4vh, 13px); line-height: 1.5; }
@keyframes paneIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ============================================================
 * Tab ① — Daily Briefing (시장·구청장 집무실)
 *   임원용 — 스크롤 최소화. 모든 정보는 한 화면 안에 포함되어야 함.
 *   내부 위젯은 overflow:hidden + flex 비율 분배로 자동 fit.
 * ============================================================ */
.brief-wrap {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  padding: clamp(8px, 1.2vh, 14px); gap: clamp(6px, 0.8vh, 10px);
  background: var(--bg-1);
  /* 1280×720 에선 딱 맞아 스크롤이 안 생기지만, 더 작거나 비율이 다른 화면(데스크톱
   * 브라우저·랩톱)에서 내용이 안 들어가면 겹침 대신 세로 스크롤로 폴백. (CR: 데스크톱 깨짐) */
  overflow-x: hidden; overflow-y: auto;
}

/* 헤더 */
.brief-hd {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px; border-radius: 10px;
  background: rgba(78,184,255,0.08); border: 1px solid var(--line);
  flex-shrink: 0;
}
.brief-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.brief-title .t { font-weight: 700; color: var(--text-1); font-size: clamp(15px, 2vh, 18px); }
.brief-title .sep { color: var(--text-3); }
.brief-title .role { color: var(--neon-cyan); font-weight: 700; font-size: clamp(15px, 2vh, 18px); }
.brief-title .sub { color: var(--text-3); font-size: clamp(11px, 1.4vh, 13px); margin-left: 6px; letter-spacing: 0.15em; text-transform: uppercase; }
.brief-date { color: var(--text-2); font-family: 'JetBrains Mono', monospace; font-size: clamp(12px, 1.5vh, 14px); margin-left: auto; }
.brief-overall {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px; font-size: 11px; letter-spacing: 0.2em; font-weight: 700;
}
.brief-overall .dot { width: 9px; height: 9px; border-radius: 50%; }
.brief-overall[data-state="ok"] { color: var(--neon-mint); background: rgba(56,196,106,0.14); border: 1px solid rgba(56,196,106,0.40); }
.brief-overall[data-state="ok"] .dot { background: var(--neon-mint); box-shadow: 0 0 6px var(--neon-mint); }
.brief-overall[data-state="warn"] { color: var(--neon-amber); background: rgba(255,154,68,0.14); border: 1px solid rgba(255,154,68,0.40); }
.brief-overall[data-state="warn"] .dot { background: var(--neon-amber); box-shadow: 0 0 6px var(--neon-amber); }
.brief-overall[data-state="danger"] { color: var(--neon-red); background: rgba(232,91,88,0.14); border: 1px solid rgba(232,91,88,0.40); }
.brief-overall[data-state="danger"] .dot { background: var(--neon-red); box-shadow: 0 0 6px var(--neon-red); }
.brief-overall[data-state="off"] { color: var(--text-3); background: rgba(120,140,176,0.14); border: 1px solid var(--line-strong); }
.brief-overall[data-state="off"] .dot { background: var(--text-3); }
.brief-district {
  background: rgba(20,40,73,0.6); color: var(--text-1);
  border: 1px solid var(--line-strong); border-radius: 8px;
  padding: 6px 10px; font-size: clamp(11px, 1.3vh, 13px); cursor: pointer;
}
.brief-district:focus { outline: none; border-color: var(--neon-cyan); }

/* 카드 공통 */
.brief-card {
  background: linear-gradient(180deg, rgba(28,54,94,0.55), rgba(20,40,73,0.55));
  border: 1px solid var(--line); border-radius: 10px;
  padding: clamp(6px, 0.8vh, 10px) clamp(8px, 1vw, 14px);
  display: flex; flex-direction: column; gap: 6px; min-height: 0;
  overflow: hidden;
}
.brief-card-hd {
  display: flex; align-items: center; gap: 8px;
  font-size: clamp(10px, 1.3vh, 12px); color: var(--text-3); letter-spacing: 0.18em; text-transform: uppercase;
  flex-shrink: 0;
}
.brief-card-hd svg { color: var(--neon-cyan); }
.brief-attn-count { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: rgba(255,154,68,0.18); color: var(--neon-amber); font-weight: 700; }
.ai-tag { margin-left: 10px; font-size: 9px; color: var(--text-3); letter-spacing: 0.1em; padding: 1px 6px; border-radius: 4px; border: 1px dashed var(--line-strong); }

/* 상단 — HERO KPI + ATTENTION
 *   전문 시각화 가이드: F-pattern 좌상단을 HERO KPI 로 할애. 비율 1.7:1 (KPI 더 넓게).
 *   KPI 5종은 큰 폰트(clamp 상한 30) + tabular-nums 로 임원 시야 임팩트 ↑.
 */
.brief-top {
  display: grid; grid-template-columns: 1.75fr 1fr;
  gap: clamp(8px, 1vh, 14px);
  flex-shrink: 0;
  height: clamp(140px, 22vh, 200px);
}
.kpi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(6px, 0.7vw, 12px); }
.kpi-card {
  padding: clamp(8px, 1.2vh, 14px) clamp(10px, 0.9vw, 14px); border-radius: 10px; min-width: 0;
  background: rgba(10,24,52,0.5); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px; justify-content: center;
}
.kpi-card .kpi-ic { color: var(--neon-cyan); }
.kpi-card .kpi-nm {
  font-size: clamp(10px, 1.3vh, 12px); color: var(--text-3);
  letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
}
.kpi-card .kpi-v {
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--text-1); font-size: clamp(20px, 3.2vh, 30px); line-height: 1.05;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-card .kpi-u { font-size: clamp(9px, 1.1vh, 11px); color: var(--text-3); font-weight: 400; margin-left: 3px; }
.kpi-card .kpi-d { font-size: clamp(10px, 1.2vh, 12px); }
.kpi-card .d.up { color: var(--neon-mint); }
.kpi-card .d.down { color: var(--neon-red); }
.kpi-card .d.flat { color: var(--text-3); }
.kpi-card .d.ok { color: var(--neon-mint); }
.kpi-card .d.warn { color: var(--neon-amber); }
.kpi-card .d.danger { color: var(--neon-red); }
.kpi-card.kpi-warn { border-color: rgba(255,154,68,0.4); }
.kpi-card.kpi-danger { border-color: rgba(232,91,88,0.45); box-shadow: 0 0 14px rgba(232,91,88,0.18); }

/* ATTENTION */
.attn-list { display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; overflow: hidden; }
.attn-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  background: rgba(10,24,52,0.5); border-left: 3px solid;
}
.attn-row.attn-danger { border-left-color: var(--neon-red); }
.attn-row.attn-warn { border-left-color: var(--neon-amber); }
.attn-row.attn-info { border-left-color: var(--neon-cyan); }
.attn-row .attn-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.attn-row.attn-danger .attn-dot { background: var(--neon-red); box-shadow: 0 0 6px var(--neon-red); animation: pulseDot 1.2s ease-in-out infinite; }
.attn-row.attn-warn .attn-dot { background: var(--neon-amber); box-shadow: 0 0 6px var(--neon-amber); }
.attn-row.attn-info .attn-dot { background: var(--neon-cyan); }
.attn-row .t { color: var(--text-1); font-weight: 600; font-size: clamp(12px, 1.5vh, 14px); line-height: 1.3; }
.attn-row .sub { color: var(--text-3); font-size: clamp(10px, 1.2vh, 11px); margin-top: 2px; }
.attn-empty { color: var(--neon-mint); padding: 14px; text-align: center; font-size: clamp(12px, 1.5vh, 14px); }

/* 도메인 상태 — 1행 6열 (한눈에 6개 도메인). small-multiples 패턴. */
.brief-domains { flex-shrink: 0; }
.domain-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(6px, 0.6vw, 10px); }
.domain-row {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 10px; border-radius: 8px;
  background: rgba(10,24,52,0.5); border: 1px solid var(--line);
  min-width: 0;
}
.domain-row .domain-head { display: flex; align-items: center; gap: 6px; }
.domain-row .domain-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.domain-row.domain-ok .domain-dot { background: var(--neon-mint); box-shadow: 0 0 5px var(--neon-mint); }
.domain-row.domain-warn .domain-dot { background: var(--neon-amber); box-shadow: 0 0 5px var(--neon-amber); }
.domain-row.domain-danger .domain-dot { background: var(--neon-red); box-shadow: 0 0 5px var(--neon-red); animation: pulseDot 1.2s ease-in-out infinite; }
.domain-row .nm { color: var(--text-1); font-weight: 700; font-size: clamp(12px, 1.5vh, 14px); letter-spacing: 0.05em; }
.domain-row .desc { color: var(--text-2); font-size: clamp(10px, 1.2vh, 12px); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 하단 — 트렌드 + 일정 (트렌드:일정 = 1.4:1, sparkline 충분히 크게) */
.brief-bot { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(8px, 1vh, 12px); flex: 1; min-height: 0; }
.trend-list { display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; overflow: hidden; }
.trend-row {
  display: grid; grid-template-columns: 82px 1fr auto; align-items: center; gap: 12px;
  padding: 6px 12px; border-radius: 8px;
  background: rgba(10,24,52,0.4); border: 1px solid var(--line);
  min-height: 0; flex: 1;
}
.trend-row .nm { color: var(--text-2); font-size: clamp(11px, 1.3vh, 13px); font-weight: 600; letter-spacing: 0.05em; }
.trend-row .chart .spark { width: 100%; height: clamp(26px, 4vh, 40px); display: block; }
.trend-row .v {
  color: var(--text-1); font-family: 'JetBrains Mono', monospace;
  font-size: clamp(12px, 1.6vh, 15px); font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sched-list { display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; overflow: hidden; }
.sched-row {
  display: grid; grid-template-columns: 60px 1fr; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: 8px;
  background: rgba(10,24,52,0.4); border: 1px solid var(--line);
  min-height: 0; flex: 1;
}
.sched-row .t {
  color: var(--neon-cyan); font-family: 'JetBrains Mono', monospace;
  font-weight: 700; font-size: clamp(13px, 1.7vh, 16px); font-variant-numeric: tabular-nums;
}
.sched-row .title { color: var(--text-1); font-size: clamp(11px, 1.4vh, 13px); line-height: 1.4; }
.sched-row .loc { color: var(--text-3); font-size: clamp(9px, 1.1vh, 11px); margin-left: 4px; }

/* AI 일일 브리핑 — 1~2줄 핵심 요약, 임팩트 위주 */
.brief-ai { flex-shrink: 0; }
.ai-body {
  color: var(--text-1); font-size: clamp(11px, 1.4vh, 13px); line-height: 1.5;
  padding: 8px 12px; border-radius: 8px;
  background: rgba(10,24,52,0.4); border: 1px dashed var(--line-strong);
  overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* ============================================================
 *  화성특례시 행복지수 — 메인 히어로 (시장 집무실 WOW 포인트)
 *  히어로가 남는 세로 공간을 모두 차지(flex:1). 종합 점수는 초대형,
 *  부문 바는 두껍게, 글로우·카운트업으로 임팩트. 하단은 내용 높이만.
 * ============================================================ */
.brief-happy {
  /* min-content 로 내용보다 작게 줄지 않게 → 바가 제시안 줄과 겹치는 현상 차단.
   * 공간이 남으면 flex:1 로 채워 WOW 유지, 부족하면 brief-wrap 이 스크롤. */
  flex: 1 1 auto; min-height: min-content;
  display: flex; flex-direction: column; gap: clamp(8px, 1.6vh, 18px);
  padding: clamp(12px, 2vh, 24px) clamp(16px, 2vw, 32px);
  border-radius: 18px;
  background:
    radial-gradient(120% 150% at 10% 0%, rgba(0,229,255,0.16), transparent 55%),
    radial-gradient(120% 150% at 100% 100%, rgba(180,107,255,0.16), transparent 55%),
    linear-gradient(180deg, rgba(28,54,94,0.60), rgba(14,28,55,0.60));
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 18px 50px rgba(2,5,16,0.50);
}
/* 타이틀 바 */
.happy-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0; }
.happy-ttl { display: flex; align-items: center; gap: 10px; color: var(--text-1); font-size: clamp(17px, 2.6vh, 26px); font-weight: 600; }
.happy-ttl svg { color: var(--neon-cyan); filter: drop-shadow(0 0 6px rgba(0,229,255,0.55)); }
.happy-ttl b { color: var(--neon-cyan); text-shadow: 0 0 16px rgba(0,229,255,0.45); }
.happy-badge {
  margin-left: 4px; font-size: clamp(10px, 1.3vh, 13px); font-weight: 700; letter-spacing: 0.12em;
  padding: 3px 10px; border-radius: 6px; vertical-align: middle;
  color: var(--neon-amber); background: rgba(255,154,68,0.16); border: 1px dashed rgba(255,154,68,0.55);
}
.happy-titleright { display: flex; align-items: center; gap: 14px; }
.happy-srclbl { color: var(--text-3); font-size: clamp(10px, 1.3vh, 12px); letter-spacing: 0.06em; }
.happy-delta { font-size: clamp(13px, 1.8vh, 17px); font-weight: 700; font-variant-numeric: tabular-nums; padding: 4px 13px; border-radius: 999px; white-space: nowrap; }
.happy-delta.up { color: var(--neon-mint); background: rgba(56,196,106,0.16); }
.happy-delta.down { color: var(--neon-red); background: rgba(232,91,88,0.16); }
.happy-delta.flat { color: var(--text-3); background: rgba(120,140,176,0.12); }

/* 본문 — 좌 초대형 게이지 / 우 부문 바 */
.happy-main {
  flex: 1; min-height: 0; display: grid;
  /* 게이지 칼럼을 고정 폭으로 묶어 와이드 화면에서 링이 가운데로 뜨지 않게 함.
   * (이전 0.9fr 은 2560px 같은 화면에서 칼럼이 ~850px 로 벌어져 링이 떠 보였음) */
  grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
  gap: clamp(16px, 2.6vw, 44px); align-items: center;
}
.happy-gauge { display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1.6vh, 16px); }
.happy-ring { position: relative; width: clamp(150px, 30vh, 232px); aspect-ratio: 1; }
.happy-ring svg { width: 100%; height: 100%; display: block; }
.happy-ring .ring-bg { fill: none; stroke: rgba(120,140,176,0.20); stroke-width: 8; }
.happy-ring .ring-fill {
  fill: none; stroke: var(--neon-mint); stroke-width: 8; stroke-linecap: round;
  stroke-dasharray: 327; stroke-dashoffset: 327;
  transition: stroke-dashoffset 1.1s var(--ease), stroke .4s var(--ease);
  filter: drop-shadow(0 0 9px currentColor);
}
.happy-ring .ring-fill.rf-ok { stroke: var(--neon-mint); }
.happy-ring .ring-fill.rf-mid { stroke: var(--neon-cyan); }
.happy-ring .ring-fill.rf-warn { stroke: var(--neon-amber); }
.happy-ring .ring-fill.rf-danger { stroke: var(--neon-red); }
.happy-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.happy-num #happy-score {
  font-family: 'JetBrains Mono', monospace; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--text-1); font-size: clamp(44px, 9vh, 78px); text-shadow: 0 0 24px rgba(0,229,255,0.35);
}
.happy-num .happy-max { color: var(--text-3); font-size: clamp(11px, 1.5vh, 15px); margin-top: 6px; letter-spacing: 0.06em; }
/* 등급 — 타이틀 줄 우측(전일比 옆)에 배치. 게이지 아래 띄움 → 상단 인라인으로 이동 */
.happy-grade { font-size: clamp(13px, 1.7vh, 18px); font-weight: 800; letter-spacing: 0.04em; padding: 4px 15px; border-radius: 999px; white-space: nowrap; }
.happy-grade.happy-ok { color: var(--neon-mint); background: rgba(56,196,106,0.16); box-shadow: 0 0 20px rgba(56,196,106,0.25); }
.happy-grade.happy-mid { color: var(--neon-cyan); background: rgba(0,229,255,0.14); box-shadow: 0 0 20px rgba(0,229,255,0.22); }
.happy-grade.happy-warn { color: var(--neon-amber); background: rgba(255,154,68,0.16); box-shadow: 0 0 20px rgba(255,154,68,0.22); }
.happy-grade.happy-danger { color: var(--neon-red); background: rgba(232,91,88,0.16); box-shadow: 0 0 20px rgba(232,91,88,0.22); }
.happy-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.happy-chips .chip { font-size: clamp(11px, 1.4vh, 13px); color: var(--text-2); padding: 4px 12px; border-radius: 8px; background: rgba(10,24,52,0.5); border: 1px solid var(--line); }
.happy-chips .chip b { color: var(--text-3); font-weight: 600; margin-right: 5px; }

/* 부문 바 — 두껍고 크게 (라벨 / 트랙 / 점수) */
/* 8개 부문 — 4행×2열 그리드로 분할(열-우선: 좌열 안전~교육, 우열 교통~경제정주).
 *   행 수를 8→4 로 줄여 각 행 높이를 확보 → 라벨·점수 폰트를 크게(원거리 사이니지 가독성). */
.happy-bars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, 1fr);
  grid-auto-flow: column;
  gap: clamp(8px, 1.6vh, 18px) clamp(18px, 2.4vw, 40px);
  align-content: center; align-self: stretch; width: 100%;
}
.hb-row { display: grid; grid-template-columns: clamp(92px, 8vw, 130px) minmax(0, 1fr) clamp(40px, 3vw, 54px); align-items: center; gap: clamp(8px, 1vw, 14px); }
.hb-label { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hb-name { color: var(--text-1); font-size: clamp(13px, 1.9vh, 17px); font-weight: 700; white-space: nowrap; }
.hb-name .hb-w { color: var(--neon-cyan); font-style: normal; font-weight: 700; font-size: clamp(10px, 1.3vh, 12px); margin-left: 6px; }
.hb-src { color: var(--text-3); font-size: clamp(9px, 1.15vh, 11px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-track { height: clamp(16px, 2.6vh, 26px); border-radius: 999px; background: rgba(8,18,40,0.7); border: 1px solid var(--line); overflow: hidden; }
.hb-fill { height: 100%; border-radius: 999px; transition: width 1.1s var(--ease); box-shadow: 0 0 12px currentColor; background-image: linear-gradient(90deg, rgba(255,255,255,0.14), transparent); }
.hb-fill.hb-ok { background-color: var(--neon-mint); color: var(--neon-mint); }
.hb-fill.hb-mid { background-color: var(--neon-cyan); color: var(--neon-cyan); }
.hb-fill.hb-warn { background-color: var(--neon-amber); color: var(--neon-amber); }
.hb-fill.hb-danger { background-color: var(--neon-red); color: var(--neon-red); }
.hb-score { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-1); font-size: clamp(18px, 2.6vh, 26px); text-align: right; }

/* 제시안 코멘트 — 슬림 1줄 */
.brief-happy-note {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 5px 14px; border-radius: 8px;
  background: rgba(255,154,68,0.06); border: 1px dashed rgba(255,154,68,0.35);
  color: var(--text-3); font-size: clamp(10px, 1.2vh, 12px); line-height: 1.35;
}
.brief-happy-note svg { color: var(--neon-amber); flex-shrink: 0; }
.brief-happy-note span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brief-happy-note b { color: var(--text-2); font-weight: 700; }

/* 하단 — 내용 높이만 (여백 제거) ATTENTION+AI (상) / 도메인 (하) */
.brief-low { display: flex; flex-direction: column; gap: clamp(6px, 0.8vh, 10px); flex: 0 0 auto; }
.brief-low-top { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(8px, 1vw, 14px); }
.brief-low .brief-card { padding: clamp(6px, 0.8vh, 9px) clamp(10px, 1vw, 14px); }
.brief-low .attn-list { gap: 5px; }
.brief-low .attn-row { padding: 6px 10px; }
.brief-low .ai-body { -webkit-line-clamp: 3; }

/* ?mode=brief 풀스크린 모드 — 헤더·탭·티커 숨김 */
body[data-brief-fs="1"] .hd,
body[data-brief-fs="1"] .tab-nav,
body[data-brief-fs="1"] .ticker { display: none !important; }
body[data-brief-fs="1"] .tab-pane#pane-brief { display: flex !important; }
body[data-brief-fs="1"] .tab-pane:not(#pane-brief) { display: none !important; }

/* ---------- Grid layout ---------- */
.grid {
  position: relative; z-index: 2;
  display: grid;
  gap: clamp(6px, 1vh, 14px);
  padding: clamp(6px, 1vh, 14px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  flex: 1; min-height: 0;
}
.grid > .w { min-height: 0; min-width: 0; }
.w-traffic   { grid-column: 2 / 3; grid-row: 1 / 2; }
.w-air       { grid-column: 1 / 2; grid-row: 1 / 2; }
.w-bus       { grid-column: 3 / 4; grid-row: 1 / 2; }
.w-safety    { grid-column: 1 / 2; grid-row: 2 / 3; }
.w-insight   { grid-column: 2 / 3; grid-row: 2 / 3; }
.w-subway    { grid-column: 3 / 4; grid-row: 2 / 3; }

/* Tab 1 (자사 솔루션) grid placements */
.w-crowd-ai  { grid-column: 2 / 3; grid-row: 1 / 2; }
.w-local-env { grid-column: 1 / 2; grid-row: 1 / 2; }
.w-device    { grid-column: 3 / 4; grid-row: 1 / 2; }
.w-voice     { grid-column: 1 / 2; grid-row: 2 / 3; }
.w-ai-deck   { grid-column: 2 / 3; grid-row: 2 / 3; }
.w-signage   { grid-column: 3 / 4; grid-row: 2 / 3; }

/* ---------- Widget card ---------- */
.w {
  position: relative; display: flex; flex-direction: column;
  background:
    linear-gradient(180deg, rgba(18,26,68,0.55), rgba(8,12,32,0.65));
  border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 20px 50px rgba(2,5,16,0.55);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  animation: cardIn .7s var(--ease) both;
}
.w::before {
  content: ''; position: absolute; inset: -1px; border-radius: 16px; padding: 1px;
  background: linear-gradient(135deg, rgba(0,229,255,0.5), transparent 35%, transparent 65%, rgba(180,107,255,0.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.7; pointer-events: none;
}
.w:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.w-traffic { animation-delay: .05s; } .w-air { animation-delay: .12s; }
.w-bus { animation-delay: .19s; } .w-safety { animation-delay: .26s; }
.w-insight { animation-delay: .33s; } .w-subway { animation-delay: .4s; }

.w-head {
  display: flex; align-items: center; gap: clamp(6px, 1vw, 10px);
  padding: clamp(6px, 1vh, 12px) clamp(10px, 1.2vw, 16px);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  flex-shrink: 0;
}
.w-head .ic {
  width: clamp(22px, 3vh, 30px); height: clamp(22px, 3vh, 30px);
  display: grid; place-items: center; border-radius: 8px;
  background: rgba(0,229,255,0.08); color: var(--neon-cyan); flex-shrink: 0;
}
.w-head .ic svg { width: 65%; height: 65%; }
.w-head .t  { font-weight: 700; font-size: clamp(12px, 1.7vh, 16px); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-head .sub{ font-size: clamp(9px, 1.3vh, 12px); color: var(--text-3); margin-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.w-head .live { margin-left: auto; font-size: 10px; letter-spacing: 0.2em; color: var(--neon-mint); display: flex; align-items: center; gap: 6px; }
.w-head .live .ld { width: 7px; height: 7px; border-radius: 50%; background: var(--neon-mint); box-shadow: 0 0 8px var(--neon-mint); animation: pulseDot 1.4s ease-in-out infinite; }

/* status badges per widget */
.w-status {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 9px; letter-spacing: 0.18em; padding: 3px 8px; border-radius: 6px;
  font-weight: 700; cursor: help;
}
.w-status .ld { width: 6px; height: 6px; border-radius: 50%; }
.w-status.live,
.w-status.online {
  color: var(--neon-mint); background: rgba(57,255,176,0.14);
  border: 1px solid rgba(57,255,176,0.45);
  box-shadow: 0 0 18px rgba(57,255,176,0.18);
}
.w-status.live .ld,
.w-status.online .ld {
  background: var(--neon-mint); box-shadow: 0 0 10px var(--neon-mint);
  animation: pulseDot 1.0s ease-in-out infinite;
}
.w-status.online::before {
  content: ''; position: absolute; inset: -1px; border-radius: 6px;
  border: 1px solid rgba(57,255,176,0.4); animation: onlineRing 2s ease-in-out infinite;
  pointer-events: none;
}
.w-status { position: relative; }
@keyframes onlineRing {
  0%, 100% { box-shadow: 0 0 0 0 rgba(57,255,176,0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(57,255,176,0); }
}
.w-status.demo { color: var(--neon-amber); background: rgba(255,194,58,0.10); border: 1px solid rgba(255,194,58,0.32); }
.w-status.demo .ld { background: var(--neon-amber); box-shadow: 0 0 6px var(--neon-amber); }

/* OFFLINE — 키 보유 + 호출 일시 실패. 도드라진 코랄 (DEMO 노랑과 명확 구분) */
.w-status.offline {
  color: #ff7849;
  background: linear-gradient(135deg, rgba(255,120,73,0.18), rgba(255,84,112,0.08));
  border: 1px solid rgba(255,120,73,0.55);
  box-shadow: 0 0 14px rgba(255,120,73,0.25), inset 0 0 8px rgba(255,120,73,0.08);
  text-shadow: 0 0 6px rgba(255,120,73,0.45);
}
.w-status.offline .ld {
  background: #ff7849; box-shadow: 0 0 10px #ff7849;
  animation: offlinePulse 1.4s ease-in-out infinite;
}
@keyframes offlinePulse {
  0%, 100% { transform: scale(1);   opacity: 0.95; }
  50%      { transform: scale(0.5); opacity: 0.35; }
}
.w-status.proxy { color: var(--neon-cyan); background: rgba(0,229,255,0.10); border: 1px solid rgba(0,229,255,0.32); }
.w-status.proxy .ld { background: var(--neon-cyan); box-shadow: 0 0 6px var(--neon-cyan); animation: pulseDot 1.2s ease-in-out infinite; }
.w-status.error { color: var(--neon-red); background: rgba(255,84,112,0.12); border: 1px solid rgba(255,84,112,0.35); }
.w-status.error .ld { background: var(--neon-red); box-shadow: 0 0 8px var(--neon-red); animation: pulseDot 0.8s ease-in-out infinite; }
.w-status.loading { color: var(--text-3); background: rgba(255,255,255,0.04); border: 1px solid var(--line-strong); }
.w-status.loading .ld { background: var(--text-3); animation: pulseDot 0.6s ease-in-out infinite; }
.w-head .expand { background: transparent; border: 1px solid var(--line-strong); color: var(--text-2); width: 26px; height: 26px; border-radius: 6px; cursor: pointer; margin-left: 8px; display: grid; place-items: center; transition: all .25s var(--ease); }
.w-head .expand:hover { color: var(--neon-cyan); border-color: var(--neon-cyan); box-shadow: var(--glow-cyan); }

.w-body {
  flex: 1; min-height: 0;
  padding: clamp(8px, 1.2vh, 14px) clamp(10px, 1.2vw, 16px);
  display: flex; flex-direction: column;
  gap: clamp(6px, 1vh, 12px);
  overflow: hidden;
}

/* ---------- Traffic widget ---------- */
.traffic-wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(8px, 1vw, 14px); flex: 1; min-height: 0; min-width: 0; }
.traffic-map {
  position: relative; border-radius: 12px; overflow: hidden;
  background: radial-gradient(ellipse at center, rgba(0,80,160,0.25), rgba(4,8,24,0.85));
  border: 1px solid var(--line);
}
.traffic-map svg { width: 100%; height: 100%; }
.traffic-map .legend {
  position: absolute; top: 8px; left: 10px; display: flex; gap: 10px; font-size: 10px;
  background: rgba(4,8,24,0.7); padding: 6px 10px; border-radius: 8px; backdrop-filter: blur(6px);
  border: 1px solid var(--line);
}
.traffic-map .legend span { display: flex; align-items: center; gap: 4px; color: var(--text-2); }
.traffic-map .legend i { width: 10px; height: 4px; border-radius: 2px; display: inline-block; }

.road { fill: none; stroke-width: 4; stroke-linecap: round; transition: stroke .4s ease, stroke-width .4s ease; filter: drop-shadow(0 0 4px currentColor); }
.road.lvl1 { stroke: var(--neon-mint); color: var(--neon-mint); }
.road.lvl2 { stroke: #ffe14a; color: #ffe14a; }
.road.lvl3 { stroke: #ff9d3e; color: #ff9d3e; }
.road.lvl4 { stroke: var(--neon-red); color: var(--neon-red); stroke-width: 5; }
.road-flow { fill: none; stroke: rgba(255,255,255,0.95); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 6 16; animation: flowDash 1.6s linear infinite; opacity: .8; }

.car-dot { fill: #fff; filter: drop-shadow(0 0 6px var(--neon-cyan)); }

.pulse-marker {
  fill: var(--neon-cyan); opacity: 0.9;
}
.pulse-ring { fill: none; stroke: var(--neon-cyan); stroke-width: 1.5; transform-origin: center; animation: ringPulse 2.2s ease-out infinite; }

.traffic-list { display: flex; flex-direction: column; gap: 8px; overflow: hidden; min-height: 0; }
.traffic-list .lbl { font-size: 11px; color: var(--text-3); letter-spacing: 0.15em; }
.traffic-items { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; }
.traffic-row {
  display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center;
  padding: clamp(5px, 0.8vh, 9px) clamp(8px, 1vw, 12px); background: rgba(255,255,255,0.025); border-radius: 8px;
  border: 1px solid transparent; transition: all .25s var(--ease); cursor: pointer;
  animation: rowIn .6s var(--ease) both; flex-shrink: 0;
}
.traffic-row:hover { border-color: var(--line-strong); background: rgba(0,229,255,0.06); }
.traffic-row .bar { width: 5px; height: clamp(20px, 3vh, 30px); border-radius: 3px; }
.traffic-row.lvl1 .bar { background: var(--neon-mint); box-shadow: 0 0 8px var(--neon-mint); }
.traffic-row.lvl2 .bar { background: #ffe14a; box-shadow: 0 0 8px #ffe14a; }
.traffic-row.lvl3 .bar { background: #ff9d3e; box-shadow: 0 0 8px #ff9d3e; }
.traffic-row.lvl4 .bar { background: var(--neon-red); box-shadow: 0 0 8px var(--neon-red); animation: glow 1.6s ease-in-out infinite; }
.traffic-row .name { font-size: clamp(11px, 1.5vh, 13px); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.traffic-row .name small { display: block; color: var(--text-3); font-size: clamp(9px, 1.2vh, 11px); margin-top: 1px; }
.traffic-row .speed { font-family: 'JetBrains Mono', monospace; font-size: clamp(14px, 2vh, 18px); font-weight: 700; color: var(--text-1); text-align: right; min-width: 58px; line-height: 1.1; }
.traffic-row .speed small { font-size: clamp(9px, 1.1vh, 11px); color: var(--text-3); font-weight: 400; margin-left: 2px; }

.crowd-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(5px, 0.8vh, 8px); flex-shrink: 0; }
.crowd-card {
  padding: clamp(5px, 0.9vh, 9px) clamp(6px, 0.8vw, 10px); background: rgba(255,255,255,0.025); border-radius: 8px;
  border: 1px solid var(--line); position: relative; overflow: hidden; min-width: 0;
}
.crowd-card .name { font-size: clamp(10px, 1.3vh, 12px); color: var(--text-2); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crowd-card .row { display: flex; align-items: baseline; gap: 5px; }
.crowd-card .v { font-family: 'JetBrains Mono', monospace; font-size: clamp(14px, 2.1vh, 18px); font-weight: 700; line-height: 1.1; }
.crowd-card .c { font-size: clamp(9px, 1.2vh, 11px); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crowd-card .tr { position: absolute; top: 8px; right: 10px; font-size: 11px; }
.crowd-card .tr.up { color: var(--neon-red); }
.crowd-card .tr.down { color: var(--neon-mint); }
.crowd-card .tr.flat { color: var(--text-3); }
.crowd-card .gauge { height: 4px; background: rgba(255,255,255,0.05); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.crowd-card .gauge i { display: block; height: 100%; background: linear-gradient(90deg, var(--neon-mint), var(--neon-amber), var(--neon-red)); border-radius: 2px; transition: width .6s var(--ease); }

/* ---------- Air quality ---------- */
.air-top { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(6px, 0.8vw, 10px); flex-shrink: 0; }
.aq-card {
  position: relative; padding: clamp(6px, 1vh, 10px) clamp(8px, 1vw, 12px); border-radius: 10px;
  border: 1px solid var(--line); background: rgba(255,255,255,0.025); min-width: 0;
}
.aq-card.local { border-color: rgba(0,229,255,0.35); box-shadow: 0 0 0 1px rgba(0,229,255,0.12) inset; }
.aq-card .src { font-size: clamp(9px, 1.1vh, 11px); color: var(--text-3); letter-spacing: 0.18em; }
.aq-card .nm { font-size: clamp(11px, 1.6vh, 14px); color: var(--text-1); margin-top: 2px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aq-card .nm small { color: var(--text-3); font-weight: 400; margin-left: 6px; font-size: clamp(9px, 1.2vh, 11px); }
.aq-card .khai { display: flex; align-items: baseline; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
.aq-card .khai .v { font-family: 'JetBrains Mono', monospace; font-size: clamp(20px, 3vh, 28px); font-weight: 700; color: var(--text-1); line-height: 1.1; }
.aq-card .khai .l { font-size: clamp(9px, 1.3vh, 12px); padding: 2px 6px; border-radius: 6px; }
.grade-좋음 { background: rgba(57,255,176,0.15); color: var(--neon-mint); }
.grade-보통 { background: rgba(0,229,255,0.12); color: var(--neon-cyan); }
.grade-나쁨 { background: rgba(255,194,58,0.15); color: var(--neon-amber); }
.grade-매우나쁨 { background: rgba(255,84,112,0.18); color: var(--neon-red); }

.aq-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(4px, 0.6vw, 8px); flex-shrink: 0; }
.aq-met { padding: clamp(4px, 0.8vh, 8px) clamp(3px, 0.4vw, 6px); border-radius: 8px; background: rgba(255,255,255,0.025); border: 1px solid var(--line); text-align: center; min-width: 0; }
.aq-met .nm { font-size: clamp(9px, 1.1vh, 11px); color: var(--text-3); }
.aq-met .v  { font-family: 'JetBrains Mono', monospace; font-size: clamp(12px, 1.8vh, 16px); font-weight: 700; margin-top: 2px; line-height: 1.1; }
.aq-met .u  { font-size: clamp(8px, 1vh, 10px); color: var(--text-3); margin-left: 1px; }

.aq-chart {
  flex: 1 1 0; min-height: clamp(60px, 9vh, 100px);
  max-height: clamp(80px, 14vh, 160px);
  border-radius: 10px; border: 1px solid var(--line);
  background: rgba(0,0,0,0.25); padding: 6px 10px;
  display: flex; flex-direction: column; min-width: 0;
}
.aq-chart .tt { font-size: 11px; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.aq-chart .tt .lg { display: flex; gap: 10px; margin-left: auto; }
.aq-chart .tt .lg span { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text-3); }
.aq-chart .tt .lg i { width: 10px; height: 3px; border-radius: 2px; }
.aq-chart svg { flex: 1; width: 100%; height: 100%; }

.aq-alert {
  padding: clamp(5px, 0.8vh, 8px) clamp(7px, 1vw, 10px); border-radius: 8px; background: rgba(255,194,58,0.08); border: 1px solid rgba(255,194,58,0.3);
  display: flex; align-items: center; gap: 6px; font-size: clamp(10px, 1.4vh, 12px); color: var(--neon-amber); flex-shrink: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aq-alert .ic { animation: shake 2.2s ease-in-out infinite; }

/* ---------- Bus ---------- */
.bus-stop { display: flex; align-items: center; gap: 6px; padding: clamp(5px, 0.8vh, 8px) clamp(7px, 1vw, 10px); background: rgba(0,229,255,0.06); border-radius: 8px; border: 1px solid rgba(0,229,255,0.18); flex-shrink: 0; }
.bus-stop .ic { color: var(--neon-cyan); flex-shrink: 0; }
.bus-stop .nm { font-weight: 700; font-size: clamp(11px, 1.5vh, 13px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bus-stop .id { color: var(--text-3); font-size: clamp(9px, 1.2vh, 11px); white-space: nowrap; flex-shrink: 0; }

.bus-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: clamp(4px, 0.6vh, 7px); }
.bus-row {
  display: grid; grid-template-columns: clamp(52px, 7vw, 68px) 1fr auto; gap: 8px; align-items: center;
  padding: clamp(6px, 0.9vh, 10px); background: rgba(255,255,255,0.025); border-radius: 10px;
  border: 1px solid var(--line); transition: all .3s var(--ease); cursor: pointer; position: relative; overflow: hidden;
  animation: rowIn .6s var(--ease) both; flex-shrink: 0;
}
.bus-row::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; transition: background .3s;
}
.bus-row.imminent { border-color: var(--neon-red); background: rgba(255,84,112,0.08); animation: imminent 1.2s ease-in-out infinite; }
.bus-row.imminent::after { background: var(--neon-red); box-shadow: 0 0 8px var(--neon-red); }
.bus-row.soon { border-color: rgba(255,194,58,0.4); }
.bus-row.soon::after { background: var(--neon-amber); box-shadow: 0 0 8px var(--neon-amber); }
.bus-row:hover { transform: translateX(2px); border-color: var(--line-strong); }

.bus-num { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: clamp(13px, 1.9vh, 17px); padding: clamp(4px, 0.6vh, 7px) 0; text-align: center; border-radius: 8px; line-height: 1; }
.bus-num.광역급행, .bus-num.광역 { background: linear-gradient(135deg, #b46bff, #6b4eff); color: #fff; box-shadow: 0 0 12px rgba(180,107,255,0.4); }
.bus-num.직행좌석 { background: linear-gradient(135deg, #ff4dd2, #b04cff); color: #fff; box-shadow: 0 0 12px rgba(255,77,210,0.35); }
.bus-num.일반 { background: linear-gradient(135deg, #2f8bff, #00b7ff); color: #fff; box-shadow: 0 0 12px rgba(47,139,255,0.35); }
.bus-num.마을 { background: linear-gradient(135deg, #39ffb0, #00cc88); color: #051a14; box-shadow: 0 0 12px rgba(57,255,176,0.35); }
.bus-num small { display: block; font-size: 8px; font-weight: 600; opacity: 0.85; letter-spacing: 0.1em; margin-top: 2px; }

.bus-info { min-width: 0; }
.bus-info .dest { font-size: clamp(11px, 1.6vh, 14px); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bus-info .meta { font-size: clamp(9px, 1.3vh, 12px); color: var(--text-3); display: flex; gap: 6px; align-items: center; margin-top: 2px; flex-wrap: wrap; }
.bus-info .crowd { padding: 1px 6px; border-radius: 5px; font-size: 10px; }
.bus-info .crowd.low    { background: rgba(57,255,176,0.13); color: var(--neon-mint); }
.bus-info .crowd.medium { background: rgba(255,194,58,0.15); color: var(--neon-amber); }
.bus-info .crowd.high   { background: rgba(255,84,112,0.18); color: var(--neon-red); }
.bus-info .low-floor { color: var(--neon-cyan); }

.bus-eta { text-align: right; min-width: clamp(60px, 8vw, 80px); flex-shrink: 0; }
.bus-eta .e1 { font-family: 'JetBrains Mono', monospace; font-size: clamp(16px, 2.6vh, 22px); font-weight: 800; color: var(--text-1); line-height: 1; }
.bus-eta .e1.flash { color: var(--neon-red); text-shadow: 0 0 12px rgba(255,84,112,0.7); animation: flashRed 0.8s ease-in-out infinite; }
.bus-eta .e1 small { font-size: 11px; font-weight: 600; color: var(--text-3); margin-left: 2px; }
.bus-eta .e1.arrived { color: var(--neon-mint); text-shadow: 0 0 12px rgba(57,255,176,0.65); }
.bus-eta .e2 { font-size: 10px; color: var(--text-3); font-family: 'JetBrains Mono', monospace; margin-top: 2px; }

/* ---------- Safety ---------- */
.safety-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(4px, 0.8vh, 8px); flex-shrink: 0; }
.safe-card {
  padding: clamp(5px, 0.9vh, 10px); border-radius: 10px; background: rgba(255,255,255,0.025);
  border: 1px solid var(--line); position: relative; cursor: pointer;
  transition: all .3s var(--ease); min-width: 0;
}
.safe-card:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.safe-card .top { display: flex; justify-content: space-between; align-items: center; }
.safe-card .nm { font-size: clamp(10px, 1.4vh, 12px); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.safe-card .tr { font-size: clamp(9px, 1.2vh, 11px); font-family: 'JetBrains Mono', monospace; white-space: nowrap; }
.safe-card .tr.up { color: var(--neon-red); }
.safe-card .tr.down { color: var(--neon-mint); }
.safe-card .ring { position: relative; width: clamp(40px, 6vh, 60px); height: clamp(40px, 6vh, 60px); margin: 3px auto 2px; }
.safe-card .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.safe-card .ring .bg { fill: none; stroke: rgba(255,255,255,0.07); stroke-width: 6; }
.safe-card .ring .fg { fill: none; stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset .8s var(--ease), stroke .4s; }
.safe-card .ring .vv { position: absolute; inset: 0; display: grid; place-items: center; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: clamp(13px, 1.9vh, 17px); }
.safe-card.safe   .fg { stroke: var(--neon-mint); }
.safe-card.caution .fg { stroke: var(--neon-amber); }
.safe-card.warn   .fg { stroke: var(--neon-red); filter: drop-shadow(0 0 6px var(--neon-red)); }
.safe-card .desc { font-size: clamp(9px, 1.2vh, 11px); color: var(--text-3); line-height: 1.35; margin-top: 3px; text-align: center; min-height: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.region-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; flex-shrink: 0; min-height: 0; }
.region-cell {
  aspect-ratio: 1.4; border-radius: 5px; position: relative; cursor: pointer;
  display: grid; place-items: center; font-size: clamp(8px, 1.1vh, 10px); text-align: center; color: rgba(255,255,255,0.85);
  border: 1px solid transparent; transition: all .2s var(--ease);
}
.region-cell:hover { transform: scale(1.1); z-index: 2; border-color: var(--neon-cyan); box-shadow: var(--glow-cyan); }
.region-cell .lbl { font-size: clamp(7px, 1vh, 9px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.region-cell .sc  { font-family: 'JetBrains Mono', monospace; font-size: clamp(10px, 1.4vh, 12px); font-weight: 800; line-height: 1.1; }

.voice-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: clamp(3px, 0.4vh, 5px); }
.voice-row {
  display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: center;
  padding: clamp(4px, 0.6vh, 7px) 8px; border-radius: 6px; background: rgba(255,255,255,0.02);
  font-size: clamp(10px, 1.3vh, 12px); flex-shrink: 0;
}
.voice-row .lv { width: 8px; height: 8px; border-radius: 50%; }
.voice-row.info  .lv { background: var(--neon-cyan); box-shadow: 0 0 6px var(--neon-cyan); }
.voice-row.caution .lv { background: var(--neon-amber); box-shadow: 0 0 6px var(--neon-amber); }
.voice-row.warn  .lv { background: var(--neon-red); box-shadow: 0 0 6px var(--neon-red); animation: pulseDot 1.2s ease-in-out infinite; }
.voice-row .tm { color: var(--text-3); font-family: 'JetBrains Mono', monospace; font-size: 10px; }
.voice-row .ds { color: var(--text-1); }
.voice-row .ds .rg { color: var(--neon-cyan); margin-right: 4px; font-size: 10px; }

/* ---------- Insights / Weather (center bottom) ---------- */
.insight-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; flex: 1; min-height: 0; }
.weather-pane {
  border-radius: 12px; padding: clamp(8px, 1.2vh, 12px); border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(47,139,255,0.10), rgba(8,12,32,0.55));
  display: flex; flex-direction: column; gap: clamp(6px, 1vh, 10px);
  overflow-y: auto; min-height: 0;
}
.weather-now { display: flex; align-items: center; gap: clamp(8px, 1vw, 12px); flex-shrink: 0; }
.weather-now .ic { width: clamp(40px, 7vh, 64px); height: clamp(40px, 7vh, 64px); color: var(--neon-amber); filter: drop-shadow(0 0 12px rgba(255,194,58,0.35)); flex-shrink: 0; }
.weather-now .temp { font-family: 'JetBrains Mono', monospace; font-size: clamp(28px, 5vh, 44px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.weather-now .temp small { font-size: clamp(13px, 2vh, 18px); font-weight: 600; color: var(--text-3); margin-left: 2px; }
.weather-now .sky { font-size: 12px; color: var(--text-2); }
.weather-now .meta { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.weather-now .meta span { color: var(--text-1); margin-left: 2px; font-family: 'JetBrains Mono', monospace; }

.weather-hourly {
  display: flex; gap: clamp(4px, 0.6vw, 6px); overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: none; flex-shrink: 0;
}
.weather-hourly::-webkit-scrollbar { display: none; }
.wh-item {
  flex-shrink: 0; padding: clamp(4px, 0.8vh, 8px) clamp(4px, 0.5vw, 7px); border-radius: 8px;
  background: rgba(255,255,255,0.025); border: 1px solid var(--line); text-align: center;
  min-width: clamp(42px, 5vw, 54px);
}
.wh-item .h  { font-size: clamp(9px, 1.1vh, 10px); color: var(--text-3); }
.wh-item .ic { font-size: 16px; margin: 3px 0; color: var(--neon-cyan); }
.wh-item .t  { font-family: 'JetBrains Mono', monospace; font-size: clamp(11px, 1.5vh, 13px); font-weight: 700; }
.wh-item .p  { font-size: clamp(8px, 1vh, 10px); color: var(--neon-cyan); }

.weather-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; flex-shrink: 0; }
.ww-item { padding: clamp(4px, 0.6vh, 6px) 3px; border-radius: 6px; background: rgba(255,255,255,0.02); text-align: center; min-width: 0; }
.ww-item .d { font-size: clamp(9px, 1.1vh, 10px); color: var(--text-3); }
.ww-item .t { font-size: clamp(10px, 1.3vh, 11px); font-family: 'JetBrains Mono', monospace; }
.ww-item .t .h { color: var(--neon-red); } .ww-item .t .l { color: var(--neon-cyan); }

.weather-adv { display: flex; gap: 6px; }
.adv-pill { padding: 4px 8px; border-radius: 6px; font-size: 11px; display: flex; align-items: center; gap: 4px; }
.adv-pill.warn    { background: rgba(255,84,112,0.12); color: var(--neon-red); border: 1px solid rgba(255,84,112,0.3); }
.adv-pill.caution { background: rgba(255,194,58,0.10); color: var(--neon-amber); border: 1px solid rgba(255,194,58,0.3); }

/* AI insights pane */
.ai-pane { border-radius: 12px; padding: 12px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(180,107,255,0.10), rgba(8,12,32,0.55)); display: flex; flex-direction: column; gap: 6px; }
.ai-pane .tt { font-size: 11px; color: var(--neon-violet); letter-spacing: 0.18em; display: flex; align-items: center; gap: 6px; }
.ai-pane .tt .tag { background: rgba(180,107,255,0.18); color: var(--neon-violet); padding: 2px 6px; border-radius: 4px; font-size: 9px; }
.ai-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: clamp(3px, 0.4vh, 5px); }
.ai-row {
  display: grid; grid-template-columns: clamp(38px, 5vw, 50px) clamp(46px, 6vw, 60px) 1fr; gap: clamp(5px, 0.8vw, 8px); align-items: center;
  padding: clamp(4px, 0.6vh, 7px) clamp(6px, 1vw, 10px); border-radius: 8px; background: rgba(255,255,255,0.025);
  font-size: clamp(10px, 1.3vh, 12px); animation: slideIn .55s var(--ease) both; flex-shrink: 0;
}
.ai-row .tm { color: var(--text-3); font-family: 'JetBrains Mono', monospace; }
.ai-row .tg { font-size: 9px; padding: 2px 4px; border-radius: 4px; text-align: center; font-weight: 700; letter-spacing: 0.05em; }
.tg-CROSS    { background: rgba(0,229,255,0.16);  color: var(--neon-cyan); }
.tg-PREDICT  { background: rgba(180,107,255,0.16); color: var(--neon-violet); }
.tg-ANOMALY  { background: rgba(255,84,112,0.18);  color: var(--neon-red); }
.tg-SENSOR   { background: rgba(57,255,176,0.16);  color: var(--neon-mint); }
.tg-SAFETY   { background: rgba(255,194,58,0.16);  color: var(--neon-amber); }
.tg-TRAFFIC  { background: rgba(255,77,210,0.16);  color: var(--neon-magenta); }
.tg-WEATHER  { background: rgba(47,139,255,0.18);  color: var(--neon-blue); }
.ai-row .tx { color: var(--text-1); }

/* ---------- Subway ---------- */
.subway-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: clamp(6px, 1vh, 10px); overflow-y: auto; }
.subway-station { padding: clamp(6px, 1vh, 10px); border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,0.025); flex-shrink: 0; }
.subway-station .nm { display: flex; align-items: center; gap: 6px; font-size: clamp(11px, 1.6vh, 14px); font-weight: 700; margin-bottom: 4px; }
.subway-station .nm .line { font-size: 10px; padding: 2px 6px; border-radius: 4px; color: #fff; background: linear-gradient(135deg, var(--neon-blue), var(--neon-violet)); }
.subway-train {
  display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center;
  padding: clamp(4px, 0.6vh, 7px) 8px; background: rgba(0,0,0,0.25); border-radius: 6px;
  font-size: clamp(10px, 1.3vh, 12px); margin-top: 3px;
  border-left: 3px solid var(--neon-cyan);
  transition: all .3s var(--ease);
}
.subway-train.arr  { border-color: var(--neon-mint); background: rgba(57,255,176,0.08); }
.subway-train.appr { border-color: var(--neon-amber); background: rgba(255,194,58,0.06); }
.subway-train .dir { color: var(--text-2); font-size: 10px; }
.subway-train .dst { color: var(--text-1); font-weight: 600; }
.subway-train .tp  { padding: 1px 5px; border-radius: 4px; font-size: 9px; background: rgba(180,107,255,0.18); color: var(--neon-violet); }
.subway-train .eta { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: clamp(12px, 1.7vh, 15px); color: var(--text-1); min-width: clamp(46px, 6vw, 60px); text-align: right; }
.subway-train.arr .eta { color: var(--neon-mint); }
.subway-train.appr .eta { color: var(--neon-amber); }

/* ---------- Ticker ---------- */
.ticker {
  flex-shrink: 0; height: clamp(28px, 4vh, 40px); position: relative; z-index: 5;
  background: linear-gradient(90deg, rgba(7,10,26,0.95), rgba(7,10,26,0.7));
  border-top: 1px solid var(--line); display: flex; align-items: center; overflow: hidden;
  backdrop-filter: blur(10px);
}
.ticker .lab {
  padding: 0 clamp(10px, 1.4vw, 16px); height: 100%; display: grid; place-items: center;
  font-size: clamp(10px, 1.3vh, 12px); letter-spacing: 0.22em; color: #fff;
  background: linear-gradient(135deg, var(--neon-red), #b04cff); flex-shrink: 0;
  box-shadow: 0 0 20px rgba(255,84,112,0.4);
}
.ticker .tape { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
/* 티커 스크롤 속도 — 일반 방송 자막 가독성 기준 120s/loop (이전 60s 대비 2배 느림). */
.ticker .move { display: inline-flex; gap: 48px; padding-left: 100%; animation: marquee 120s linear infinite; white-space: nowrap; }
.ticker .move span { font-size: clamp(11px, 1.5vh, 14px); color: var(--text-1); }
.ticker .move span .tg { color: var(--neon-cyan); margin-right: 4px; }
.ticker:hover .move { animation-play-state: paused; }

/* ---------- 설정 모달 «표시 설정» 섹션 — 토글 스위치 ---------- */
.pref-group { margin: 14px 0 20px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(10,24,52,0.45); }
.pref-group-hd { color: var(--neon-cyan); font-size: clamp(11px, 1.3vh, 13px); font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 10px; }
.pref-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 6px; border-top: 1px solid var(--line);
  cursor: pointer; user-select: none;
}
.pref-row:first-of-type { border-top: none; }
.pref-info { flex: 1; min-width: 0; }
.pref-nm { color: var(--text-1); font-size: clamp(12px, 1.4vh, 14px); font-weight: 600; }
.pref-desc { color: var(--text-3); font-size: clamp(10px, 1.2vh, 12px); margin-top: 2px; line-height: 1.4; }
.pref-tg {
  display: inline-flex; align-items: center; gap: 8px;
  width: 76px; height: 30px; padding: 3px;
  border-radius: 999px; cursor: pointer; transition: all .25s var(--ease);
  background: rgba(120,140,176,0.18); border: 1px solid var(--line-strong);
  position: relative;
}
.pref-tg .knob {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--text-3);
  transition: all .25s var(--ease);
  position: absolute; left: 3px;
}
.pref-tg .lbl { position: absolute; right: 10px; font-size: 9px; font-weight: 700; letter-spacing: 0.1em; color: var(--text-2); }
.pref-tg.on { background: rgba(56,196,106,0.28); border-color: rgba(56,196,106,0.55); }
.pref-tg.on .knob { left: calc(100% - 25px); background: var(--neon-mint); box-shadow: 0 0 8px var(--neon-mint); }
.pref-tg.on .lbl { left: 10px; right: auto; color: var(--neon-mint); }
.pref-tg.off .lbl { color: var(--text-3); }
kbd { background: rgba(78,184,255,0.14); color: var(--neon-cyan); border: 1px solid var(--line-strong); padding: 1px 6px; border-radius: 4px; font-size: 0.85em; font-family: 'JetBrains Mono', monospace; }

/* ---------- Toasts ---------- */
.toasts { position: fixed; top: 88px; right: 22px; z-index: 50; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast {
  pointer-events: auto;
  min-width: 280px; max-width: 360px;
  padding: 12px 14px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(18,26,68,0.95), rgba(8,12,32,0.95));
  border: 1px solid var(--line-strong);
  display: flex; gap: 10px; align-items: flex-start;
  box-shadow: 0 16px 40px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05);
  animation: toastIn .55s var(--ease), toastOut .5s var(--ease) 6s forwards;
}
.toast.info    { border-left: 3px solid var(--neon-cyan); }
.toast.warn    { border-left: 3px solid var(--neon-amber); }
.toast.success { border-left: 3px solid var(--neon-mint); }
.toast .ic { width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,0.05); }
.toast.info    .ic { color: var(--neon-cyan); box-shadow: 0 0 12px rgba(0,229,255,0.25); }
.toast.warn    .ic { color: var(--neon-amber); box-shadow: 0 0 12px rgba(255,194,58,0.25); }
.toast.success .ic { color: var(--neon-mint); box-shadow: 0 0 12px rgba(57,255,176,0.25); }
.toast .ti { font-size: 12px; font-weight: 700; }
.toast .ms { font-size: 11px; color: var(--text-2); margin-top: 2px; line-height: 1.4; }
.toast .cl { background: transparent; border: 0; color: var(--text-3); cursor: pointer; padding: 0 2px; }

/* ---------- Modal (expand) ---------- */
.modal-mask {
  position: fixed; inset: 0; background: rgba(2,4,12,0.55); backdrop-filter: blur(6px);
  z-index: 80; display: grid; place-items: center; padding: 40px;
  animation: fadeIn .3s ease;
}
.modal {
  width: min(1400px, 92vw); height: min(840px, 86vh);
  background: var(--bg-3);        /* var → 라이트 테마에선 흰색, 다크엔 어두운 색 자동 */
  color: var(--text-1);
  border: 1px solid var(--line-strong); border-radius: 18px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.45);
  display: flex; flex-direction: column; overflow: hidden;
  animation: modalIn .4s var(--ease);
}
.modal-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--text-1);
}
.modal-head .t { font-size: 16px; font-weight: 700; color: var(--text-1); }
.modal-head .x { margin-left: auto; background: transparent; border: 1px solid var(--line-strong); color: var(--text-2); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; }
.modal-head .x:hover { color: var(--neon-red); border-color: var(--neon-red); }
.modal-body { flex: 1; padding: 18px; overflow: auto; color: var(--text-1); font-size: 12px; line-height: 1.7; background: var(--bg-3); }

/* ---------- Settings (API key + UIUX) ---------- */
.settings-tabs {
  display: flex; gap: 6px; padding: 6px 14px 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.stab {
  background: transparent; border: 1px solid transparent; border-bottom: none;
  color: var(--text-2); font: 600 12px/1.2 inherit; letter-spacing: 0.04em;
  padding: 7px 14px; cursor: pointer;
  border-radius: 8px 8px 0 0; display: inline-flex; align-items: center; gap: 6px;
  transition: all .2s var(--ease);
}
.stab:hover { color: var(--text-1); background: var(--bg-3); }
.stab.active {
  color: var(--neon-cyan);
  background: var(--bg-3);
  border-color: var(--line-strong);
}

.settings-form { display: flex; flex-direction: column; gap: 10px; max-width: 760px; margin: 0 auto; }
.lbl-block { font-size: 11px; color: var(--text-3); letter-spacing: 0.18em; text-transform: uppercase; margin-top: 6px; }

/* UIUX 템플릿 목록 */
.tpl-list { display: flex; flex-direction: column; gap: 8px; }
.tpl-row {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: 10px; background: var(--bg-2);
  border: 1px solid var(--line);
}
.tpl-row.active { border-color: var(--neon-cyan); background: var(--bg-3); box-shadow: inset 3px 0 0 var(--neon-cyan); }
.tpl-nm { font-size: 13px; font-weight: 700; color: var(--text-1); }
.tpl-ver { font-size: 11px; color: var(--text-3); margin-left: 6px; font-family: 'JetBrains Mono', monospace; }
.tpl-mode { font-size: 9px; padding: 2px 6px; border-radius: 4px; margin-left: 6px; letter-spacing: 0.08em; font-weight: 600; }
.tpl-mode-dark  { background: rgba(120,170,255,0.15); color: var(--neon-cyan); }
.tpl-mode-light { background: rgba(255,194,58,0.15); color: var(--neon-amber); }
.tpl-tags { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.tpl-tag {
  font-size: 9px; padding: 2px 6px; border-radius: 4px;
  background: rgba(180,107,255,0.14); color: var(--neon-violet);
  letter-spacing: 0.08em;
}
.tpl-desc { font-size: 11px; color: var(--text-2); margin-top: 4px; line-height: 1.4; }
.tpl-actions { display: flex; align-items: center; gap: 6px; }

/* (신규 템플릿 요청 폼은 v1.0.5 에서 제거됨 — 템플릿은 UIUX/templet{N}/ 디렉터리 직접 추가 방식) */
.settings-intro { color: var(--text-2); font-size: 12px; line-height: 1.7; }
.settings-intro b { color: var(--neon-cyan); }
.settings-intro a { color: var(--neon-mint); text-decoration: none; border-bottom: 1px dashed var(--neon-mint); }
.api-row {
  display: grid; grid-template-columns: 200px 1fr auto; gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: 10px; background: var(--bg-2);
  border: 1px solid var(--line);
}
.api-row .lbl { display: flex; flex-direction: column; gap: 2px; }
.api-row .lbl .nm { font-size: 12px; color: var(--text-1); font-weight: 600; }
.api-row .lbl .src { font-size: 10px; color: var(--text-3); }
.api-row .lbl .src a { color: var(--neon-mint); text-decoration: none; }
.api-row input {
  background: var(--bg-0); border: 1px solid var(--line-strong); color: var(--text-1);
  padding: 8px 10px; border-radius: 6px; font-family: 'JetBrains Mono', monospace; font-size: 11px;
  width: 100%; outline: none; transition: border-color .2s;
}
.api-row input:focus { border-color: var(--neon-cyan); box-shadow: 0 0 10px rgba(0,229,255,0.25); }
.api-row .st { font-size: 9px; padding: 3px 8px; border-radius: 5px; font-weight: 700; letter-spacing: 0.12em; white-space: nowrap; }
.api-row .st.live, .api-row .st.online { background: rgba(57,255,176,0.16); color: var(--neon-mint); }
.api-row .st.offline { background: rgba(255,157,62,0.14); color: #ff9d3e; }
.api-row .st.demo { background: rgba(255,194,58,0.14); color: var(--neon-amber); }
.api-row .st.error { background: rgba(255,84,112,0.18); color: var(--neon-red); }
.settings-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 6px; }
.btn {
  padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 600;
  border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--text-1);
  transition: all .25s; display: inline-flex; align-items: center; gap: 6px;
}
.btn:hover { border-color: var(--neon-cyan); box-shadow: var(--glow-cyan); }
.btn.primary { background: linear-gradient(135deg, var(--neon-cyan), var(--neon-blue)); color: #04060f; border-color: transparent; }
.btn.primary:hover { box-shadow: 0 0 24px rgba(0,229,255,0.55); }
.btn.danger { color: var(--neon-red); border-color: rgba(255,84,112,0.4); }

/* ---------- Tab 1 widgets ---------- */
.local-env-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(5px, 0.8vh, 8px); flex-shrink: 0; }
.le-card {
  padding: clamp(5px, 0.9vh, 10px); border-radius: 10px; background: rgba(255,255,255,0.03);
  border: 1px solid var(--line); position: relative; min-width: 0;
}
.le-card.local {
  background: linear-gradient(180deg, rgba(57,255,176,0.10), rgba(255,255,255,0.02));
  border-color: rgba(57,255,176,0.35);
}
.le-card .src { font-size: clamp(8px, 1.1vh, 10px); letter-spacing: 0.18em; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.le-card .src.brand { color: var(--neon-mint); }
.le-card .nm { font-size: clamp(10px, 1.4vh, 12px); font-weight: 600; margin-top: 2px; }
.le-card .v  { font-family: 'JetBrains Mono', monospace; font-size: clamp(16px, 2.5vh, 22px); font-weight: 800; margin-top: 3px; line-height: 1.1; }
.le-card .v small { font-size: clamp(9px, 1.3vh, 11px); color: var(--text-3); margin-left: 2px; }
.le-card .delta { font-size: clamp(9px, 1.2vh, 11px); color: var(--neon-mint); margin-top: 2px; font-family: 'JetBrains Mono', monospace; }

.device-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(5px, 0.8vh, 8px); flex-shrink: 0; }
.dev-card {
  padding: clamp(5px, 0.9vh, 10px); border-radius: 10px; background: rgba(255,255,255,0.025);
  border: 1px solid var(--line); position: relative; cursor: pointer; transition: all .25s; min-width: 0;
}
.dev-card:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.dev-card .nm { font-size: clamp(10px, 1.3vh, 11px); color: var(--text-2); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.dev-card .nm .ic { width: clamp(11px, 1.5vh, 14px); height: clamp(11px, 1.5vh, 14px); color: var(--neon-cyan); flex-shrink: 0; }
.dev-card .v { font-family: 'JetBrains Mono', monospace; font-size: clamp(18px, 2.8vh, 26px); font-weight: 800; line-height: 1.1; margin-top: 3px; }
.dev-card .meta { font-size: clamp(9px, 1.2vh, 11px); color: var(--text-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dev-card .gauge { height: 4px; background: rgba(255,255,255,0.05); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.dev-card .gauge i { display: block; height: 100%; border-radius: 2px; transition: width .6s var(--ease); }
.dev-card.ok .gauge i { background: linear-gradient(90deg, var(--neon-mint), var(--neon-cyan)); }
.dev-card.warn .gauge i { background: var(--neon-amber); }

.signage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(5px, 0.8vh, 8px); flex-shrink: 0; }
.sg-card {
  padding: clamp(5px, 0.9vh, 10px); border-radius: 10px; background: rgba(255,255,255,0.025);
  border: 1px solid var(--line); min-width: 0;
}
.sg-card .nm { font-size: clamp(9px, 1.2vh, 11px); color: var(--text-3); letter-spacing: 0.1em; display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.sg-card .v { font-family: 'JetBrains Mono', monospace; font-size: clamp(15px, 2.4vh, 22px); font-weight: 800; margin: 3px 0; line-height: 1.1; }
.sg-card .v small { font-size: clamp(9px, 1.3vh, 12px); color: var(--text-3); font-weight: 600; margin-left: 2px; }
.sg-card .slider {
  height: 6px; background: rgba(255,255,255,0.05); border-radius: 3px; position: relative; overflow: hidden;
}
.sg-card .slider i {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--neon-blue), var(--neon-cyan), var(--neon-mint));
  transition: width .8s var(--ease);
}
.sg-card .auto { font-size: 9px; padding: 1px 5px; border-radius: 4px; background: rgba(0,229,255,0.15); color: var(--neon-cyan); letter-spacing: 0.1em; }

.signage-state {
  padding: clamp(6px, 1vh, 10px); border-radius: 10px; background: rgba(0,0,0,0.3);
  border: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(4px, 0.6vh, 8px);
  flex: 1; min-height: 0; overflow-y: auto; align-content: start;
}
.sg-state-row { display: flex; align-items: center; gap: 4px; font-size: clamp(10px, 1.3vh, 12px); min-width: 0; }
.sg-state-row .k { color: var(--text-3); white-space: nowrap; flex-shrink: 0; }
.sg-state-row .v { color: var(--text-1); font-family: 'JetBrains Mono', monospace; margin-left: auto; font-weight: 700; font-size: clamp(9px, 1.2vh, 11px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-state-row .v.ok { color: var(--neon-mint); }
.sg-state-row .v.busy { color: var(--neon-amber); }

.deck-now {
  padding: clamp(7px, 1.1vh, 12px); border-radius: 12px;
  background: linear-gradient(180deg, rgba(180,107,255,0.12), rgba(8,12,32,0.55));
  border: 1px solid rgba(180,107,255,0.25); flex-shrink: 0;
}
.deck-now .tag { font-size: clamp(9px, 1.2vh, 11px); letter-spacing: 0.16em; color: var(--neon-violet); }
.deck-now .ttl { font-size: clamp(12px, 1.7vh, 15px); font-weight: 700; margin: 3px 0 2px; }
.deck-now .ds { font-size: clamp(10px, 1.4vh, 12px); color: var(--text-2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.deck-now .actions { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
.deck-now .act { padding: 3px 8px; border-radius: 6px; font-size: clamp(9px, 1.1vh, 11px); background: rgba(180,107,255,0.18); color: var(--neon-violet); border: 1px solid rgba(180,107,255,0.32); cursor: pointer; white-space: nowrap; }

/* ---------- Help overlay ---------- */
.help {
  position: fixed; bottom: 60px; right: 22px; z-index: 70;
  width: 320px; padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(18,26,68,0.97), rgba(8,12,32,0.97));
  border: 1px solid var(--line-strong);
  box-shadow: 0 20px 60px rgba(0,0,0,0.65);
  animation: toastIn .35s var(--ease);
}
.help h4 { margin: 0 0 8px; font-size: 13px; color: var(--neon-cyan); letter-spacing: 0.12em; }
.help .kbd { display: inline-block; padding: 1px 6px; border-radius: 4px; background: rgba(255,255,255,0.08); border: 1px solid var(--line-strong); font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--neon-cyan); margin-right: 4px; }
.help .row { font-size: 11px; color: var(--text-2); margin: 5px 0; }

/* ---------- Tooltip ---------- */
.tip {
  position: fixed; z-index: 90; pointer-events: none; padding: 6px 10px; border-radius: 8px;
  font-size: 11px; background: rgba(8,12,32,0.95); color: var(--text-1);
  border: 1px solid var(--line-strong); box-shadow: 0 10px 24px rgba(0,0,0,0.6);
  transform: translate(-50%, -120%); white-space: nowrap; transition: opacity .15s;
}

/* ---------- Anims ---------- */
@keyframes cardIn   { from { opacity: 0; transform: translateY(14px) scale(.985);} to { opacity: 1; transform: none; } }
@keyframes rowIn    { from { opacity: 0; transform: translateX(-8px);} to { opacity: 1; transform: none; } }
@keyframes slideIn  { from { opacity: 0; transform: translateX(-12px);} to { opacity: 1; transform: none; } }
@keyframes pulseDot { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.4); opacity: .5; } }
@keyframes blink    { 50% { opacity: 0.3; } }
@keyframes float    { 0%,100% { transform: translate(0,0); } 50% { transform: translate(40px, -30px); } }
@keyframes glow     { 0%,100% { filter: drop-shadow(0 0 4px currentColor);} 50% { filter: drop-shadow(0 0 14px currentColor);} }
@keyframes flowDash { to { stroke-dashoffset: -200; } }
@keyframes ringPulse{ 0% { r: 6; opacity: 0.7; } 100% { r: 22; opacity: 0; } }
@keyframes badgePulse { 0%,100% { box-shadow: 0 0 10px rgba(255,84,112,0.65); } 50% { box-shadow: 0 0 18px rgba(255,84,112,0.95); } }
@keyframes flashRed { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes imminent { 0%,100% { box-shadow: inset 0 0 0 1px rgba(255,84,112,0.3); } 50% { box-shadow: 0 0 20px rgba(255,84,112,0.45), inset 0 0 0 1px rgba(255,84,112,0.5); } }
@keyframes marquee  { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes toastIn  { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(20px); } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn  { from { opacity: 0; transform: scale(.95);} to { opacity: 1; transform: none; } }
@keyframes shake    { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-8deg); } 60% { transform: rotate(8deg); } }
@keyframes numberPop { 0% { transform: translateY(-6px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }

.num-pop { animation: numberPop .35s var(--ease); }

/* Scrollbar hide where not needed */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(120,170,255,0.18); border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
 *  모바일 대응 (≤820px) — 가로 사이니지 레이아웃을 세로 스택·스크롤로 전환.
 *  홍보 링크를 폰으로 여는 케이스 대응. 1280×720 KTC 사이니지에는
 *  영향 없음(미디어쿼리로 격리). index.html 에 viewport meta 이미 존재.
 * ============================================================ */
@media (max-width: 820px) {
  /* 고정 100vh 무스크롤 → 세로 스크롤 허용 */
  html, body { overflow-x: hidden; overflow-y: auto; height: auto; }
  html { font-size: 14px; }                       /* vh 기반 베이스폰트 → 모바일 고정 */
  #root { height: auto; min-height: 100vh; }
  .tab-container { display: block; flex: none; }
  .tab-pane { min-height: 0; }

  /* 헤더 — 핵심만(엠블럼·제목·시계). 상태 pills·영문부제·업타임 숨김 */
  .hd { height: auto; flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
  .hd .brand { min-width: 0; flex: 1 1 auto; }
  .hd .titles .t1 { font-size: 15px; white-space: normal; }
  .hd .titles .t2 { display: none; }
  .hd .pills { display: none; }
  .hd .clock .time { font-size: 20px; }
  .hd .clock .date { display: none; }
  .hd .alert-btn { width: 36px; height: 36px; }

  /* 탭 내비 — 가로 스크롤(스와이프). 배지·설정/도움 숨김 */
  .tab-nav { height: auto; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding: 4px 8px 0; }
  .tab-nav::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; white-space: nowrap; }
  .tab .badge { display: none; }
  .tab-spacer, .tab-actions { display: none; }

  .ticker .move span { font-size: 12px; }

  /* ---------- 메인(행복지수) 브리핑 ---------- */
  .brief-wrap { overflow: visible; height: auto; flex: none; padding: 10px; gap: 10px; }
  .brief-hd { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .brief-date { margin-left: 0; }

  /* 히어로 — 게이지/바 세로 스택, 폭(vw) 기준 크기 */
  .brief-happy { flex: none; padding: 14px; }
  .happy-titlebar { flex-wrap: wrap; gap: 8px; }
  .happy-titleright { width: 100%; justify-content: flex-start; gap: 10px; }
  .happy-srclbl { display: none; }   /* 폰에선 출처 라벨 숨겨 등급·전일比만 깔끔히 */
  .happy-ttl { font-size: 18px; }
  .happy-main { grid-template-columns: 1fr; gap: 18px; }
  .happy-ring { width: clamp(150px, 46vw, 210px); }
  .happy-num #happy-score { font-size: clamp(42px, 15vw, 64px); }
  .happy-bars { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; gap: 10px; }  /* 폰: 1열 스택 */
  .hb-row { grid-template-columns: minmax(92px, 34vw) 1fr 44px; gap: 10px; }
  .hb-track { height: 18px; }
  .hb-score { font-size: 18px; }

  /* 제시안 코멘트 — 모바일은 줄바꿈 허용(정보 손실 방지) */
  .brief-happy-note { white-space: normal; align-items: flex-start; }
  .brief-happy-note span { white-space: normal; }

  /* 하단 — 세로 스택 + 도메인 3열 */
  .brief-low-top { grid-template-columns: 1fr; }
  .domain-list { grid-template-columns: repeat(3, 1fr); }

  /* ---------- ③ 자사 솔루션 / ④ 공공 LIVE 그리드 — 1열 스택 ---------- */
  .grid { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: minmax(280px, auto); flex: none; height: auto; padding: 10px; gap: 10px; }
  .grid > .w { grid-column: 1 / -1 !important; grid-row: auto !important; }

  /* ---------- ② 다모아 임베드 ---------- */
  .damoa-meta { flex-wrap: wrap; gap: 6px; }
  .damoa-meta .open-ext { margin-left: 0; }
  .damoa-frame-box { height: 78vh; min-height: 460px; }

  /* 오버레이 — 화면 폭에 맞춤 */
  .toasts { right: 10px; left: 10px; top: 70px; }
  .toast { min-width: 0; max-width: none; }
  .help { left: 10px; right: 10px; width: auto; bottom: 50px; }
}

/* 초소형(≤480px) 추가 축소 */
@media (max-width: 480px) {
  .domain-list { grid-template-columns: repeat(2, 1fr); }
  .happy-ttl { font-size: 16px; }
  .hb-name { font-size: 12px; }
  .hb-src { font-size: 9px; }
  .brief-title .role { font-size: 14px; }
}

/* ============================================================
 *  초와이드/고해상도 데스크톱 (≥1700px) — 1280×720 설계 비율이 과하게
 *  늘어나 링이 뜨고 바가 길어지는 것 방지. 최대폭으로 가운데 정렬(letterbox).
 *  KTC 사이니지(1280) 및 일반 데스크톱(<1700)에는 영향 없음.
 * ============================================================ */
@media (min-width: 1700px) {
  #root { max-width: 1680px; margin-inline: auto; border-inline: 1px solid var(--line); }
}