/* GO기릿 지휘통제실 — PC 전용. 관제실 모니터 월을 흉내낸다.
   좁은 화면에서도 깨지지는 않지만, 설계 기준은 1280px 이상이다. */

:root{
  /* 2026-09-07 — **다크로 롤백**(사용자 지시: 「배경이 너무 밝아서 싫다」).
     v4 에서 하루 동안 밝은 지면이었다가 되돌렸다.
     ⚠️ 되돌린 것은 **색뿐이다.** 9월 6일의 모바일 우선 보정·터치 영역 40px·인라인 SVG 아이콘은
        그대로 살아 있다(파일 맨 아래). 다시 손댈 때 그 세 덩어리를 지우지 마라.
     ⚠️ 다시 밝게 만들 생각이라면 `.live2.css.bak-v4light-20260907` 에 그 판이 통째로 있다.
     ⚠️ 어두운 바탕에서는 골드가 **그대로 글자**다(#ffc857 on #06090f = 12:1).
        --gold-ink 를 어둡게(#8A6400) 두면 검은 화면에서 1.7:1 로 사라진다.
     ⚠️ --off 와 .cam 은 v3 원본 값(#3a4a5e, --tx3)이 **검은 화면에서 1.9~3.5:1 로 원래부터
        안 읽혔다.** 롤백하면서 그 두 개만은 읽히는 값으로 남긴다 — 되돌리지 마라. */
  color-scheme:dark;
  --bg:#06090f; --bg-2:#0a1018; --panel:#0c121b;
  --line:#1b2635; --line2:#243348;
  --tx:#dce9f5; --tx2:#8ba3bd;
  /* ⚠️ --tx3 는 v3 원본이 #5c748f 였는데 본문(#06090f) 위 4.13:1 로 **미달**이었다.
     시계·「ON AIR」·「N분 전 화면 기준」 같은 작은 글자가 전부 이 색이다.
     #7a92ad = 본문 6.2 · 알림바 6.0 · 패널 5.9 · 요약띠 5.2. 어둡게 되돌리지 마라. */
  --tx3:#7a92ad;
  --on:#22d3a6;      /* 방송중 — 검정 위 9.9:1 */
  --off:#8ba3bd;     /* 오프라인. v3 의 #3a4a5e 는 1.9:1 이라 안 읽혔다 */
  --rec:#ff4d5e;     /* 녹화중 램프 */
  --amber:#ffc857;   /* 브랜드 골드 */
  --gold-lo:#e0a838; --gold-ink:#ffc857;  /* 어두운 바탕에서는 골드가 곧 글자색이다 */
  --ink:#1a1204;     /* 골드 「면」 위에 얹는 글자색 */
  --char:#0c121b; --char-2:#243348; --char-text:#dce9f5; --char-muted:#8ba3bd;
  --inset:0 1px 2px rgba(0,0,0,.45);
  --lift:0 14px 30px -10px rgba(0,0,0,.6);
  --hud:52px; --foot:30px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--tx);
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Noto Sans KR",system-ui,sans-serif;
  font-size:14px; overflow-y:scroll;
}
b{font-variant-numeric:tabular-nums}

/* ══════════════════════════════════════════════════════════
   히어로 (2026-08-18) — sticky HUD 위에 얹는 랜딩 패널.
   ⚠️ 이미지를 자르지 않는다. width 만 제한하고 height:auto 로 둔다
      (object-fit:cover 를 쓰면 커맨드센터 다리·말풍선이 잘린다).
   ══════════════════════════════════════════════════════════ */
.hero{
  border-bottom:1px solid var(--line2);
  background:
    radial-gradient(120% 130% at 14% 0%, rgba(34,211,166,.09) 0%, transparent 55%),
    radial-gradient(110% 120% at 88% 10%, rgba(255,77,94,.10) 0%, transparent 52%),
    linear-gradient(180deg,#101927 0%,#080e16 100%);
}
.hero-in{
  max-width:1500px; margin:0 auto; padding:26px 20px 24px;
  display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr);
  align-items:center; gap:30px;
}
.hero-art{display:flex; justify-content:center}
.hero-art img{
  width:100%; max-width:380px; height:auto; display:block;
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.6));
}
.hero-tx{min-width:0}
.hero-rec{display:flex; align-items:center; gap:7px; font-size:12px; font-weight:900;
  color:var(--rec); letter-spacing:.16em; margin-bottom:10px}
.hero-rec i{width:9px; height:9px; border-radius:50%; background:var(--rec);
  animation:blink 1.6s infinite}
.hero h1{
  margin:0; font-size:clamp(26px, 4.4vw, 46px); font-weight:900;
  letter-spacing:-.03em; line-height:1.1; color:#fff;
}
.hero h1 em{color:var(--rec); font-style:normal}
.hero-sub{
  margin:9px 0 0; font-size:clamp(11.5px, 1.35vw, 16px); font-weight:600;
  color:var(--tx2); letter-spacing:.055em; line-height:1.45;
}
/* 스타크래프트 서플라이 패널 패러디 */
.hero-panel{
  /* 넓은 모니터에서 패널이 화면 끝까지 늘어나면 오른쪽이 텅 비어 보인다 */
  max-width:640px;
  margin:18px 0 0; padding:13px 16px;
  border:1px solid var(--line2); border-left:4px solid var(--on); border-radius:10px;
  background:rgba(6,11,18,.66);
  font-variant-numeric:tabular-nums;
}
.hero-panel div{display:flex; gap:8px; align-items:baseline;
  font-size:clamp(13px, 1.5vw, 18px); line-height:1.72}
.hero-panel dt{margin:0; color:var(--tx2); font-weight:600}
.hero-panel dd{margin:0; font-weight:900; color:var(--tx)}
.hero-panel .v-on{color:var(--on)}
.hero-panel .v-am{color:var(--amber)}
.hero-panel .v-rd{color:#ff6b7a; letter-spacing:-.01em}

.hero-act{display:flex; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap}
.hero-btn{
  min-height:42px; padding:9px 18px; border-radius:10px; cursor:pointer;
  border:1px solid #2f5f78; background:linear-gradient(135deg,#12303a,#0d2029);
  color:#5eead4; font-family:inherit; font-size:14px; font-weight:800;
}
.hero-btn:hover{border-color:#4a8aa8}
.hero-btn:disabled{opacity:.5; cursor:default}
.hero-age{font-size:12px; color:var(--tx3)}

/* ── 상단 HUD ── */
.hud{
  position:sticky; top:0; z-index:40; height:var(--hud);
  display:flex; align-items:center; gap:16px; padding:0 14px;
  background:linear-gradient(180deg,#0d141e,#080d14);
  border-bottom:1px solid var(--line2);
}
.hud-l{display:flex;align-items:center;gap:10px}
.brand{color:var(--tx);text-decoration:none;font-weight:900;font-size:16px;letter-spacing:-.02em;
  white-space:nowrap}
.brand i{color:var(--rec);font-style:normal}
.brand em{color:var(--rec);font-style:normal}
/* ⚠️ nowrap 이 없으면 좁은 화면에서 「GO / 기 / 릿」처럼 글자마다 줄바꿈된다. */
.title{font-size:14px;font-weight:800;color:var(--tx2);letter-spacing:.14em;white-space:nowrap}
.rec{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:900;
  color:var(--rec);letter-spacing:.1em}
.rec i{width:7px;height:7px;border-radius:50%;background:var(--rec);animation:blink 1.6s infinite}
@keyframes blink{0%,45%{opacity:1}55%,100%{opacity:.15}}

.hud-c{display:flex;align-items:center;gap:14px;margin:0 auto}
.stat{display:flex;align-items:baseline;gap:6px}
.stat b{font-size:19px;font-weight:900;color:var(--on)}
.stat small{font-size:10px;color:var(--tx3);letter-spacing:.1em;font-weight:700}
.stat:nth-child(3) b{color:var(--tx)}
.stat:nth-child(5) b{color:var(--amber)}
.sep{width:1px;height:20px;background:var(--line2)}

.hud-r{display:flex;align-items:center;gap:10px}
.audio-now{font-size:11.5px;color:var(--tx3);max-width:230px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.audio-now.on{color:var(--amber);font-weight:700}
.chk{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--tx2);cursor:pointer;user-select:none}
.chk input{accent-color:var(--on);cursor:pointer}
.hbtn{background:#16202d;border:1px solid var(--line2);color:var(--tx2);border-radius:7px;
  padding:6px 10px;font-size:12px;font-family:inherit;cursor:pointer}
.hbtn:hover{border-color:#3a5170;color:var(--tx)}
.clock{font-size:12.5px;color:var(--tx3);font-variant-numeric:tabular-nums;min-width:64px;text-align:right}

/* ── 알림 바 ── */
.bar{padding:7px 14px;font-size:12px;color:var(--tx2);background:#0a1018;
  border-bottom:1px solid var(--line)}
/* 경고는 색만으로 알리지 않는다 — 왼쪽에 골드 띠를 하나 세워 둔다 */
.bar.warn{color:var(--gold-ink);font-weight:700;box-shadow:inset 3px 0 0 var(--gold-lo)}

/* ── 모니터 월 ── */
.wall{
  display:grid; gap:10px; padding:12px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
@media (min-width:1600px){ .wall{grid-template-columns:repeat(5,1fr)} }
@media (min-width:1280px) and (max-width:1599px){ .wall{grid-template-columns:repeat(4,1fr)} }
@media (min-width:980px) and (max-width:1279px){ .wall{grid-template-columns:repeat(3,1fr)} }
@media (min-width:620px) and (max-width:979px){ .wall{grid-template-columns:repeat(2,1fr)} }
@media (max-width:619px){ .wall{grid-template-columns:1fr;gap:8px;padding:8px} }

/* ── 타일 ──
   2026-08-20 2단 구조: 위 = 16:9 영상박스(.scr), 아래 = 「지금 뭐하는 중」 띠(.now).
   ⚠️ cap·ctl·tt·off-scr·iframe 의 absolute 는 전부 .scr(relative) 기준이다 —
      .tile 에 직접 두면 띠까지 덮는다. */
.tile{
  position:relative; border:1px solid var(--line2); border-radius:9px; overflow:hidden;
  background:#000; display:flex; flex-direction:column;
  transition:border-color .15s, box-shadow .15s;
}
.tile .scr{position:relative; aspect-ratio:16/9; background:#000; flex:0 0 auto; min-height:0}
.tile.live{border-color:#1d4a41}
.tile.wait{border-color:#4a3d1b}
.tile.hot{border-color:var(--amber);box-shadow:0 0 0 2px rgba(255,200,87,.28)}
.tile .scr iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* 오프라인 화면 */
.off-scr{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:9px;background:#000;text-align:center}
.off-scr img{width:44px;height:44px;border-radius:50%;filter:grayscale(1);opacity:.35}
/* ⚠️ 구 --off(#3A3A46)는 검은 화면 위 1.9:1 로 원래부터 안 보였다. 밝은 회색으로 뒤집었다 */
.off-scr .msg{font-size:13px;color:var(--off);font-weight:700;letter-spacing:.03em}
.off-scr .noise{position:absolute;inset:0;opacity:.05;pointer-events:none;
  background-image:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 3px)}

/* 상단 라벨 */
.cap{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;align-items:center;gap:7px;
  padding:7px 9px;font-size:12px;
  background:linear-gradient(180deg,rgba(0,0,0,.82),transparent);pointer-events:none}
/* ⚠️ v3 원본은 --tx3(#5c748f) 이었는데 검은 화면 위 3.4:1 이라 안 읽혔다. --tx2 로 남긴다. */
.cam{font-size:9.5px;font-weight:900;color:var(--tx2);letter-spacing:.08em;
  background:rgba(0,0,0,.55);padding:1px 5px;border-radius:3px}
.who{font-weight:800;color:#fff;text-shadow:0 1px 3px #000;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:44%}
.badge{margin-left:6px;display:flex;align-items:center;gap:4px;font-size:10.5px;
  font-weight:900;letter-spacing:.06em;padding:2px 7px;border-radius:4px}
/* ⚠️ 배지 바탕은 --rec(#ff4d5e)보다 **깊은 빨강**이다. --rec 를 그대로 쓰면 흰 글자가 3.2:1 로
   미달한다(11px 이라 4.5 가 필요하다). --rec 는 램프 점과 글자색 자리에만 쓴다. */
.badge.on{background:#e02437;color:#fff}
.badge.on i{width:5px;height:5px;border-radius:50%;background:#fff;animation:blink 1.6s infinite}
.badge.off{background:rgba(255,255,255,.10);color:var(--off)}
.badge.on,.badge.off,.badge.wait{margin-left:auto}
.badge.wait{background:rgba(255,200,87,.16);color:var(--amber)}
/* 임시 타일(크루 아님) — var/live2-extra.json 으로 잠깐 얹은 채널.
   위 경고와 같은 이유로 바탕을 짙게 깐다: #ffd977 on #5a4708 = 7.3:1. */
.badge.temp{margin-left:auto;background:#5a4708;color:#ffd977}
.badge.temp+.badge{margin-left:5px}
/* 외부 재생이 막힌 라이브 — OFF 와 헷갈리면 안 된다(방송은 하고 있다). 붉게 물린다. */
.off-scr.noembed{background:radial-gradient(120% 90% at 50% 40%,rgba(224,36,55,.14),transparent 70%)}
.off-scr.noembed .msg{color:#ffd2d6}
.off-scr.noembed .msg b{color:#fff}
.tbtn.hot{background:#e02437;color:#fff;border-color:#e02437}
.eyes{font-size:11px;color:#fff;font-weight:800;text-shadow:0 1px 3px #000;
  background:rgba(0,0,0,.5);padding:1px 6px;border-radius:4px}

/* 하단 컨트롤 */
.ctl{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;gap:6px;
  padding:9px 8px 8px;background:linear-gradient(transparent,rgba(0,0,0,.85))}
.tbtn{flex:1;min-width:0;white-space:nowrap;min-height:31px;border:1px solid rgba(255,255,255,.16);border-radius:6px;
  background:rgba(10,16,24,.78);color:#dbe7f3;font-size:11.5px;font-weight:700;
  font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px;
  text-decoration:none;backdrop-filter:blur(3px)}
.tbtn:hover{background:rgba(30,45,64,.9);border-color:rgba(255,255,255,.3)}
.tbtn.audio-on{background:var(--amber);color:var(--ink);border-color:transparent}
.ctl a.tbtn{flex:0 0 44px}
.ctl a.tbtn:only-child{flex:1}
/* 오프라인·대기 타일의 버튼은 글자 버튼뿐이라 전폭으로 나눈다 (44px 고정이면 글자가 잘린다) */
.ctl.off a.tbtn{flex:1}
/* ⚠️ 기본값은 「항상 보임」이다. 터치 기기에는 hover 가 없어서, hover 로만 꺼내면
   휴대폰에서 소리·채팅 버튼을 **영원히 못 누른다**(2026-08-18 실측으로 확인).
   마우스가 있는 기기에서만 아래 미디어쿼리로 숨긴다. */
.ctl{opacity:1}

.tt{position:absolute;left:9px;right:9px;bottom:46px;z-index:2;font-size:11px;color:#b9cbdd;
  text-shadow:0 1px 3px #000;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (hover:hover) and (pointer:fine){
  .tile .ctl{opacity:0;transition:opacity .15s}
  .tile:hover .ctl, .tile.hot .ctl{opacity:1}
  .tile .tt{opacity:0;transition:opacity .15s}
  .tile:hover .tt{opacity:1}
}

.stale{position:absolute;right:8px;top:32px;z-index:3;font-size:9.5px;color:var(--amber);
  background:rgba(0,0,0,.6);padding:1px 5px;border-radius:3px}

/* ── 채팅 드로어 ── */
.chat{position:fixed;right:0;top:var(--hud);bottom:0;width:390px;z-index:45;
  background:var(--panel);border-left:1px solid var(--line2);display:flex;flex-direction:column}
/* ⚠️ display:flex 가 [hidden] 의 display:none 을 이긴다. 이 줄이 없으면 채팅 드로어가
   페이지 로드 직후부터 열린 채로 뜨고, 오른쪽 열 타일이 그 밑에 깔린다. */
.chat[hidden]{display:none}
.chat-h{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--char-2)}
.chat-h b{font-size:13.5px;color:var(--char-text)}
.chat-open{margin-left:auto;font-size:11.5px;color:var(--char-muted);text-decoration:none}
.chat-open:hover{color:var(--char-text)}
.chat-x{background:none;border:0;color:var(--char-muted);font-size:16px;cursor:pointer;padding:0 2px;font-family:inherit}
.chat-x:hover{color:var(--char-text)}
.chat-b{flex:1;position:relative;background:#0f0f0f}
.chat-b iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.chat-b .note{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:24px;text-align:center;font-size:13px;line-height:1.7;color:var(--char-muted);background:var(--char)}
body.chat-open .wall{padding-right:402px}

/* ── 푸터 ── */
.foot{display:flex;gap:16px;align-items:center;padding:8px 14px 18px;
  font-size:11px;color:var(--tx3);border-top:1px solid var(--line2)}
/* ⚠️ v3 원본 #3f5470 은 2.6:1 이라 사실상 안 보였다 — --tx3 로 올린다 */
.foot .dim{margin-left:auto;color:var(--tx3)}
.foot code{background:#111a25;color:var(--tx2);padding:1px 4px;border-radius:3px;font-size:10.5px}

/* ══════════════════════════════════════════════════════════
   모바일 대응 (2026-08-18)
   설계 기준은 여전히 PC 관제실이지만, 현장에서 휴대폰으로도 봐야 한다.
   ⚠️ 안전영역(safe-area)은 iPhone 노치·홈바용. viewport-fit=cover 와 짝이다.
   ══════════════════════════════════════════════════════════ */

@media (max-width:900px){
  /* 히어로 — 이미지를 위로 쌓고 폭을 줄인다. 세로로 화면을 다 먹으면 타일이 안 보인다. */
  .hero-in{
    grid-template-columns:1fr; gap:14px; padding:18px 14px 18px;
    justify-items:center; text-align:center;
  }
  .hero-art{order:-1}
  .hero-art img{max-width:min(260px, 62vw)}
  .hero-rec{justify-content:center}
  .hero-panel{
    width:100%; text-align:left; margin-top:14px;
    padding:12px 14px;
  }
  .hero-panel div{justify-content:space-between; gap:12px}
  .hero-act{justify-content:center; width:100%}

  /* HUD 를 2단으로 접는다. 고정 높이(var(--hud))를 풀지 않으면 내용이 잘린다. */
  .hud{
    height:auto; flex-wrap:wrap; gap:7px 10px;
    padding:8px max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left));
  }
  .hud-l{width:100%; gap:8px}
  .brand{font-size:17px}
  .title{font-size:13px; letter-spacing:.1em}
  .rec{margin-left:auto}

  /* 통계는 왼쪽으로 붙인다 — margin:0 auto 를 안 풀면 한쪽으로 쏠린다 */
  .hud-c{margin:0; gap:10px; flex:1 1 auto}
  .stat b{font-size:17px}
  .sep{height:16px}

  .hud-r{gap:8px; flex:0 0 auto}
  .clock{display:none}          /* 휴대폰엔 이미 시계가 있다 */
  .audio-now{
    order:9; width:100%; max-width:none;
    padding-top:2px; border-top:1px solid var(--line);
  }
  .audio-now:not(.on){display:none}   /* 음소거 상태면 줄만 차지한다 */

  .bar{padding:7px 12px; line-height:1.5}

  /* 터치 타깃 — 31px 은 손가락에 작다 */
  .tbtn{min-height:40px; font-size:12.5px}
  .hbtn{min-height:36px; padding:7px 11px}
  .chk{min-height:36px}

  /* 컨트롤이 상시 노출이라 바탕을 조금 더 진하게 깔아야 글자가 읽힌다 */
  .ctl{padding:14px 8px 8px; background:linear-gradient(transparent,rgba(0,0,0,.9)); gap:5px}
  .tbtn{font-size:12px; padding:8px 6px}
  .ctl a.tbtn{flex:0 0 40px}
  .ctl a.tbtn:only-child{flex:1}
  /* 컨트롤이 항상 떠 있으므로 방송 제목을 그 위로 올린다 (겹침 방지) */
  .tt{bottom:64px}

  /* 채팅은 드로어가 아니라 전체 화면으로 덮는다. 390px 짜리 사이드바는 화면을 다 먹는다. */
  .chat{
    inset:0; top:0; width:auto; z-index:60;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .chat-h{padding:12px 14px}
  .chat-x{font-size:22px; padding:0 6px; min-width:40px; min-height:40px}
  body.chat-open{overflow:hidden}
  body.chat-open .wall{padding-right:8px}   /* 사이드바가 아니므로 밀 필요가 없다 */

  .foot{flex-direction:column; align-items:flex-start; gap:5px;
        padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  .foot .dim{margin-left:0}
}

/* 아주 좁은 화면 — 통계 라벨이 줄바꿈되며 헤더를 무너뜨리는 구간 */
@media (max-width:400px){
  .hero-art img{max-width:min(210px, 58vw)}
  .hero-in{padding:14px 12px 16px}
  .hero-panel div{font-size:12.5px}
  .hud-c{gap:8px}
  .stat{gap:4px}
  .stat b{font-size:16px}
  .stat small{font-size:9px; letter-spacing:.04em}
  .title{font-size:12px}
  .rec{font-size:9.5px}
  .hbtn{padding:7px 9px; font-size:11.5px}
  .cap{padding:6px 7px; gap:5px}
  .who{max-width:38%}
}

/* 가로로 눕힌 휴대폰 — 세로 공간이 없으므로 헤더를 한 줄로 되돌린다 */
@media (max-width:900px) and (orientation:landscape) and (max-height:520px){
  .hero-in{grid-template-columns:minmax(0,190px) minmax(0,1fr); text-align:left;
           justify-items:stretch; padding:12px 14px; gap:16px}
  .hero-art img{max-width:190px}
  .hero-rec{justify-content:flex-start}
  .hero-panel{margin-top:10px; padding:9px 12px}
  .hero-panel div{line-height:1.5; justify-content:flex-start}
  .hud{flex-wrap:nowrap; height:46px}
  .hud-l{width:auto}
  .audio-now{display:none}
  .wall{grid-template-columns:repeat(2,1fr)}
}

/* ── 「지금 뭐하는 중」 AI 한 줄 요약 띠 (2026-08-20 가독성 개편) ──
   영상 위 오버레이가 아니라 **영상박스 아래 전용 띠**다(사용자 지시 — 오버레이는 묻혀서 안 보인다).
   라이브 타일에만 있고, 항상 보인다 — hover 게이트 금지(터치 기기 규칙). */
.tile .now{display:flex;align-items:center;gap:8px;min-height:38px;padding:7px 12px;
  background:linear-gradient(180deg,#131e2c,#0b131d);border-top:1px solid var(--line2);
  font-size:12.5px;color:var(--tx2);white-space:nowrap;overflow:hidden}
.tile .now b{color:var(--amber);font-weight:900;font-size:15px;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis}
.tile .now .dot{width:7px;height:7px;border-radius:50%;background:var(--on);flex:0 0 auto;
  animation:blink 1.6s infinite}
.tile .now .dot.idle{background:var(--tx3);animation:none}
.tile .now .pend{color:var(--tx3)}
.tile .now .nage{margin-left:auto;flex:0 0 auto;font-size:10px;color:var(--tx3)}

/* ══════════════════════════════════════════════════════════
   시청자 추이 (2026-08-22) — 푸터 위 텔레메트리 패널.
   canvas 는 live2.js 가 DPR 보정으로 직접 그린다 (CSP 라 차트 라이브러리 없음).
   ══════════════════════════════════════════════════════════ */
.hist{max-width:1500px;margin:18px auto 6px;padding:0 14px}
.hist-h{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.hist-t{font-weight:900;letter-spacing:.08em;font-size:12.5px;color:var(--tx2)}
.hist-t small{font-weight:600;letter-spacing:0;color:var(--tx3)}
.hist-rng{margin-left:auto;display:flex;gap:4px}
.hist-rng button{
  background:var(--panel);border:1px solid var(--line2);color:var(--tx2);
  font:inherit;font-size:11.5px;padding:3px 10px;border-radius:4px;cursor:pointer}
.hist-rng button:hover{color:var(--tx);border-color:var(--tx3)}
.hist-rng button.on{border-color:var(--on);color:var(--on);background:rgba(34,211,166,.10)}
/* 그래프 선은 live2.js 가 canvas 에 직접 그린다(CSP 라 차트 라이브러리 없음).
   10색 계열이 **어두운 배경 기준**으로 고른 밝은 색이라 판도 어두워야 한다. */
.hist-c{position:relative;background:var(--panel);border:1px solid var(--line2);
  border-radius:10px 10px 0 0;padding:8px 6px 4px}
.hist-c canvas{display:block;width:100%}
.hist-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--tx3);font-size:12.5px;text-align:center;padding:0 16px}
/* ⚠️ display:flex 가 hidden 속성의 UA display:none 을 이긴다 — 명시로 되돌린다 */
.hist-empty[hidden]{display:none}
.hist-lg{display:flex;flex-wrap:wrap;gap:6px 16px;padding:9px 10px 10px;
  background:var(--panel);border:1px solid var(--line2);border-top:0;
  border-radius:0 0 10px 10px;font-size:11.5px;color:var(--tx2)}
.hist-li{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.hist-li i{width:10px;height:3px;border-radius:2px;flex:0 0 auto}

@media (max-width:640px){
  .hist{padding:0 10px}
  .hist-h{flex-wrap:wrap}
  .hist-rng{margin-left:0}
}


/* ══ v3 (2026-09-06) — 모바일 우선 보정 ══
   접근 로그 14일 기준 이 화면이 방문 1위인데 PC 기준으로 짜여 있었다.
   390px 에서 상단 아트가 첫 화면의 절반을 먹고 정작 방송 타일은 접혀 있었다. */
@media (max-width:760px){
  /* 아트를 글자 아래로 내리고 크기를 절반으로. 지우지는 않는다 — 이 화면의 정체성이다. */
  .hero-in{grid-template-columns:1fr; gap:14px; padding:16px 14px 18px}
  .hero-art{order:2}
  .hero-art img{max-width:200px}
  .hero-tx{order:1}
  .hero h1{font-size:clamp(23px,6.4vw,30px)}
  .hero-sub{font-size:11.5px; letter-spacing:.04em}
  .hero-panel{padding:11px 13px; font-size:13px}
  /* 터치 영역 하한 */
  .hero-btn{min-height:44px}
}
/* 골드 「면」 위 글자는 잉크 — 본체와 같은 규칙 */
.tile.hot .badge.on, .hero-btn.gold{color:var(--ink)}
/* 요약이 없으면 띠를 아예 없앤다 — live2.js nowInner() 가 빈 문자열을 돌려준다 */
.tile .now:empty{display:none}


/* ── 터치 영역 하한 (2026-09-06 v4 실측) ──
   380px 에서 24~36px 이던 조작 요소를 40px 로 올린다. 보이는 크기는 그대로 두고
   패딩으로만 키운다 — HUD 줄 높이가 늘면 타일이 한 줄 밀린다. */
.hbtn{min-height:40px}
.hist-rng button{min-height:40px; padding-top:9px; padding-bottom:9px}
.brand{display:inline-flex; align-items:center; min-height:40px}

/* 인라인 SVG 아이콘 — 이모지를 걷어내며 들어왔다(2026-09-06).
   글자 크기를 따라가고 색은 currentColor 라 버튼 상태색을 그대로 받는다. */
.ic{width:1.05em; height:1.05em; flex:0 0 auto; vertical-align:-.16em}
.tbtn, .audio-now, .eyes{display:inline-flex; align-items:center; gap:5px}

/* ── GO기릿 코인 홍보 버튼(2026-09-27) — 금색 알약. 모바일에선 첫 줄 오른쪽 끝 ── */
.coin-promo{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 12px 0 10px;margin-left:6px;border-radius:999px;
  background:linear-gradient(135deg,#FFC300,#FF9F1C);color:#131418;text-decoration:none;white-space:nowrap;
  box-shadow:0 0 0 1px rgba(255,195,0,.35),0 4px 14px rgba(255,160,0,.25);transition:transform .15s ease-out,box-shadow .15s ease-out}
.coin-promo b{font-size:13px;font-weight:900;letter-spacing:-.01em}
.coin-promo small{font-size:11px;font-weight:700;opacity:.75}
.coin-promo i{width:8px;height:8px;border-radius:50%;background:#131418;box-shadow:0 0 0 3px rgba(19,20,24,.18);animation:coinPing 1.6s ease-out infinite}
.coin-promo:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(255,195,0,.5),0 6px 18px rgba(255,160,0,.35)}
.coin-promo:focus-visible{outline:2px solid #fff;outline-offset:2px}
@keyframes coinPing{0%{box-shadow:0 0 0 0 rgba(19,20,24,.45)}100%{box-shadow:0 0 0 7px rgba(19,20,24,0)}}
@media (prefers-reduced-motion:reduce){.coin-promo i{animation:none}}
@media (max-width:900px){ .coin-promo{margin-left:auto;min-height:36px} }
@media (max-width:400px){ .coin-promo small{display:none} }

.coin-strip{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:8px 14px;flex-wrap:wrap;
  background:linear-gradient(90deg,#FFC300,#FF9F1C);color:#131418;text-decoration:none;font-size:14px;text-align:center}
.coin-strip .cs-tag{font-size:11px;font-weight:900;letter-spacing:.08em;padding:2px 7px;border-radius:4px;background:#131418;color:#FFC300}
.coin-strip .cs-tx b{font-weight:900}
.coin-strip .cs-go{display:inline-flex;align-items:center;gap:4px;font-weight:900;padding:5px 12px;border-radius:999px;background:#131418;color:#fff;white-space:nowrap}
.coin-strip:hover .cs-go{background:#000}
.coin-strip:focus-visible{outline:2px solid #fff;outline-offset:-4px}
@media (max-width:480px){ .coin-strip{font-size:13px;gap:6px 8px} }
.foot .foot-help{margin-left:auto;color:inherit;opacity:.8;text-decoration:underline;text-underline-offset:3px}.foot .foot-help:hover{opacity:1}