/* 온에어 — 기본 테마. 디자인 조사 후 :root 변수만 바꿔도 전체가 따라온다. */
:root {
  --bg: #05070d;
  --bg-grad: radial-gradient(ellipse at 50% 40%, #0b1426 0%, #05070d 65%);
  --surface: rgba(14, 20, 34, 0.72);
  --surface-solid: #0e1422;
  --surface-hi: rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.09);
  --text: #e8edf6;
  --text-dim: #93a0b8;
  --text-faint: #5f6b82;
  --radio: #ff9a5c;     /* 지구본 위 방송국 점 — 온에어 고유색(아이콘의 코랄). 라디오 가든의 초록과 구별 */
  --news: #ff4d6d;
  --news-hi: #ff8fa3;
  --accent: #4cc9ff;
  --danger: #ff6b6b;
  --live: #3df2c5;      /* 재생 중인 방송국 */
  --radius: 14px;
  --radius-sm: 10px;
  --blur: blur(18px) saturate(140%);
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  --font: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: 16px;
  --player-h: 68px;
  /* 아래 여백 = 기기 안전영역 + 앱 무료판 광고 배너 높이(앱이 --ad-h 를 잰다, 웹은 0) */
  --sab: calc(env(safe-area-inset-bottom) + var(--ad-h, 0px));
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg) var(--bg-grad);
  color: var(--text);
  font: 15px/1.5 var(--font);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--accent); }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .45; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

#globe { position: fixed; inset: 0; }
body.no-globe #globe { display: none; }

/* 시작 화면 */
.boot { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--text-dim); z-index: 50; background: var(--bg) var(--bg-grad); }
.boot[hidden] { display: none; }
.boot-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--radio); box-shadow: 0 0 0 0 rgba(255, 154, 92, .6); animation: pulse 1.4s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 18px rgba(255, 154, 92, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 154, 92, 0); } }

/* 상단 */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: calc(env(safe-area-inset-top) + 12px) var(--gutter) 12px;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.brand { display: flex; align-items: baseline; gap: 8px; background: none; border: 0; padding: 4px 2px; }
.brand-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); align-self: center; box-shadow: 0 0 10px var(--danger); animation: blink 2.4s infinite; }
@keyframes blink { 50% { opacity: .35; } }
.brand-name { font-weight: 800; letter-spacing: .12em; font-size: 17px; }
.brand-sub { color: var(--text-dim); font-size: 13px; }

.search { position: relative; z-index: 3; flex: 1 1 260px; max-width: 420px; }   /* 휴대폰에서 검색 결과가 아래 칩 줄에 가려지지 않게 */
.search input {
  width: 100%; height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); font: inherit;
}
.search input::placeholder { color: var(--text-faint); }
.q-results {
  position: absolute; top: 46px; left: 0; right: 0; max-height: min(60vh, 460px); overflow: auto;
  background: var(--surface-solid); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px;
}
.q-row { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 9px 10px; color: var(--text); }
.q-row:hover, .q-row:focus-visible { background: var(--surface-hi); }
.q-row span { color: var(--text-dim); font-size: 13px; }
.q-row.cc b { color: var(--accent); }

.tools { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.chip {
  height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text-dim); font-size: 13px; display: inline-flex; align-items: center; gap: 6px;
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.chip.on { color: var(--text); border-color: rgba(255,255,255,.22); }
.chip.icon { width: 34px; justify-content: center; padding: 0; }
.sw { width: 9px; height: 9px; border-radius: 50%; opacity: .35; }
.chip.on .sw { opacity: 1; }
.sw-radio { background: var(--radio); }
.sw-news { background: var(--news); }

/* 패널 */
.panel {
  position: fixed; z-index: 15; right: var(--gutter); top: calc(var(--top-h, 66px) + 8px);   /* 버튼 줄이 두 줄로 접혀도 패널 머리가 가려지지 않게(JS 가 잰다) */ bottom: calc(var(--player-h) + 28px);
  width: min(400px, calc(100vw - 2 * var(--gutter)));
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--shadow);
}
.panel[hidden] { display: none; }
.panel-head { display: flex; justify-content: space-between; gap: 10px; padding: 16px 16px 10px; border-bottom: 1px solid var(--line); }
.panel-kicker { margin: 0; font-size: 12px; color: var(--text-dim); }
.panel-title { margin: 2px 0 0; font-size: 20px; line-height: 1.3; word-break: keep-all; }
.panel-sub { margin: 4px 0 0; font-size: 13px; color: var(--text-dim); }
.panel-body { overflow: auto; padding: 8px; overscroll-behavior: contain; min-height: 0; flex: 1 1 auto; }
.x { border: 0; background: var(--surface-hi); width: 32px; height: 32px; border-radius: 50%; font-size: 20px; line-height: 1; flex: none; }

.list { display: flex; flex-direction: column; gap: 2px; }
.row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: 0; border-radius: var(--radius-sm); padding: 10px; }
.row:hover, .row:focus-visible { background: var(--surface-hi); }
.row-ic { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: rgba(255,154,92,.12); color: var(--radio); }
.row.playing .row-ic { background: var(--radio); color: #021018; }
.row.playing .row-title { color: var(--radio); }
.row-main { display: flex; flex-direction: column; min-width: 0; }
.row-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-meta { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.more, .link-btn {
  display: block; width: 100%; margin: 8px 0 4px; padding: 11px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface-hi); color: var(--text); text-align: center; text-decoration: none; font-size: 14px;
}
.radio-cta { border-color: rgba(255,154,92,.35); color: var(--radio); }
.empty { color: var(--text-dim); padding: 14px 10px; margin: 0; }
.fail p { color: var(--text-dim); padding: 0 8px; }

.day { font-size: 12px; color: var(--text-faint); margin: 14px 10px 4px; letter-spacing: .05em; }
.news { padding: 11px 10px; border-radius: var(--radius-sm); border-left: 3px solid transparent; }
.news.main { border-left-color: var(--news-hi); background: rgba(255,77,109,.05); }
.news-title { color: var(--text); text-decoration: none; font-weight: 600; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; }
.news-title:hover { text-decoration: underline; }
.news-meta { margin: 4px 0 0; font-size: 12px; color: var(--text-dim); }
.news-basis { margin: 3px 0 0; font-size: 12px; color: var(--text-faint); }
.news-orig { margin: 3px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--text-dim); overflow-wrap: anywhere; }

.talk-note { margin: 2px 10px 8px; font-size: 12px; color: var(--text-dim); }
.talk-note .link-plain { font-size: 12px; color: var(--radio); }

/* 세계 헤드라인 */
.world-note { margin: 0 0 10px; font-size: 12px; color: var(--text-faint); line-height: 1.5; }
.world-cc { display: flex; align-items: baseline; gap: 8px; width: 100%; margin: 14px 0 2px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.world-cc:hover .world-name { text-decoration: underline; }
.world-flag { font-size: 18px; }
.world-name { font-weight: 700; }
.world-src { margin-left: auto; font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.world-snip { margin-top: 14px; padding-top: 4px; border-top: 1px solid var(--line); }
.world-acts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; }
.news-basis.clickable { cursor: pointer; color: var(--news); }

/* 플레이어 */
.player {
  position: fixed; z-index: 25; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--sab) + 14px);
  width: min(640px, calc(100vw - 2 * var(--gutter))); height: var(--player-h);
  display: flex; align-items: center; gap: 10px; padding: 0 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--shadow);
}
.pl-btn { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; background: var(--text); color: #05070d; display: grid; place-items: center; font-size: 18px; }
.pl-btn svg { width: 20px; height: 20px; fill: currentColor; }
.pl-btn.ghost { background: none; color: var(--text-dim); width: 36px; height: 36px; font-size: 20px; }
.pl-btn.ghost.on { color: var(--danger); }
.pl-btn.accent { background: var(--surface-hi); color: var(--text); }
.ic-pause { display: none; }
.player[data-state="playing"] .ic-play, .player[data-state="loading"] .ic-play { display: none; }
.player[data-state="playing"] .ic-pause, .player[data-state="loading"] .ic-pause { display: block; }
.pl-info { flex: 1; min-width: 0; }
.pl-name { margin: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-meta { margin: 0; font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player[data-state="error"] .pl-meta { color: var(--danger); }
.player[data-state="loading"] .pl-meta::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--radio); animation: blink 1s infinite; }
#pl-vol { width: 90px; accent-color: var(--radio); }

.eq { display: none; align-items: flex-end; gap: 2px; height: 18px; }
.player[data-state="playing"] .eq { display: flex; }
.eq i { width: 3px; background: var(--radio); border-radius: 2px; animation: eq 0.9s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.3s; } .eq i:nth-child(3) { animation-delay: -.6s; } .eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 18px; } }

/* 지구본 툴팁(globe.gl 이 만드는 요소 안) */
.tip { background: var(--surface-solid); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: 13px/1.4 var(--font); color: var(--text); max-width: 260px; }
.tip b { display: block; }
.tip span { color: var(--text-dim); }

/* 소개 */
.about {
  width: min(560px, calc(100vw - 2 * var(--gutter))); max-height: 85vh; overflow: auto;
  background: var(--surface-solid); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 18px; box-shadow: var(--shadow);
}
.about::backdrop { background: rgba(0,0,0,.55); }
.about form { float: right; }
.about h2 { margin: 0 0 8px; }
.about h3 { margin: 18px 0 6px; font-size: 15px; }
.about ul { margin: 0; padding-left: 18px; color: var(--text-dim); font-size: 14px; }
.about li { margin: 4px 0; }
.about .fine { margin-top: 18px; font-size: 12px; color: var(--text-faint); }
.t-radio { color: var(--radio); } .t-news { color: var(--news); } .t-live { color: var(--live); }
.about .dim { color: var(--text-dim); font-size: 14px; margin: 4px 0 8px; }
.about .small { font-size: 12px; }
.about code { background: var(--surface-hi); padding: 1px 6px; border-radius: 6px; font-size: 12.5px; user-select: all; }
.tag { font-size: 11px; font-weight: 600; color: var(--text-dim); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; margin-left: 6px; vertical-align: 2px; }

/* 자막 설정 */
.cc-admin-open { margin: 18px 0 0; text-align: right; }
.cc-admin-open[hidden] { display: none; }
.link-plain { border: 0; background: none; padding: 4px 0; font: 12px var(--font); color: var(--text-faint); cursor: pointer; }
.link-plain:hover { color: var(--text-dim); text-decoration: underline; }
.cc-form { display: grid; gap: 10px; margin-top: 8px; }
.cc-form label { display: grid; gap: 4px; font-size: 13px; color: var(--text-dim); }
.cc-form label.row-inline { display: flex; align-items: center; gap: 8px; }
.cc-form input[type="password"], .cc-form select {
  font: 15px var(--font); color: var(--text); background: var(--surface-hi); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 10px; min-width: 0;
}
.cc-form select option { background: var(--surface-solid); }
.cc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn { font: 600 14px var(--font); border: 0; border-radius: 999px; padding: 10px 16px; background: var(--live); color: #05241c; cursor: pointer; }
.btn.ghost { background: var(--surface-hi); color: var(--text); }
.btn:disabled { opacity: .5; cursor: default; }
.pl-btn.cc { font: 800 12px var(--font); letter-spacing: .02em; }
.pl-btn.cc.on { color: #fff; background: var(--live); width: 34px; height: 26px; border-radius: 6px; }

/* 자막 표시줄 — 플레이어 바로 위 */
.captions {
  position: fixed; z-index: 24; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--sab) + var(--player-h) + 24px);
  width: min(820px, calc(100vw - 2 * var(--gutter)));
  background: rgba(5, 7, 13, 0.86); border: 1px solid var(--line); border-radius: var(--radius);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--shadow); padding: 8px 14px 12px;
}
.captions[hidden] { display: none; }
.cap-head { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); }
#cap-status { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cap-head .x, .cap-size { flex: none; width: 30px; height: 30px; font-size: 18px; }
.cap-size { border: 0; border-radius: 8px; background: none; color: var(--text-dim); font-size: 16px; cursor: pointer; }
.cap-size:hover { background: var(--surface-hi); color: var(--text); }
#cap-status::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--live); margin-right: 6px; vertical-align: 1px; }
/* 기본: 최근 자막 3~4줄 / 크게(.big): 화면 절반 이상 */
.cap-lines { max-height: 16em; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1.6em); mask-image: linear-gradient(to bottom, transparent 0, #000 1.6em); }
.captions.big .cap-lines { max-height: calc(100dvh - var(--player-h) - 190px); }
.captions.big .cap-tr { font-size: 19px; }
.captions.big .cap-line.old .cap-tr { font-size: 16.5px; }
@media (max-width: 720px) {
  .captions { width: calc(100vw - 16px); padding: 6px 12px 10px; }
  .cap-lines { max-height: 13.5em; }
  .cap-tr { font-size: 16px; }
  .captions.big .cap-lines { max-height: calc(100dvh - var(--player-h) - 170px); }
  .captions.big .cap-tr { font-size: 18px; }
}
.cap-line { margin: 6px 0 0; }
.cap-tr { margin: 0; font-size: 17px; line-height: 1.45; font-weight: 600; word-break: keep-all; overflow-wrap: anywhere; }
.cap-src { margin: 2px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--text-dim); overflow-wrap: anywhere; }
.cap-line.old { opacity: .55; }
.cap-line.old .cap-tr { font-size: 15px; font-weight: 500; }
.captions.no-orig .cap-src.has-tr { display: none; }
/* 음악 구간: 지난 자막을 흐리게 해 '지금 말하는 내용'이 아님을 보여 준다 */
.captions.resting .cap-line { opacity: .35; }
.captions.resting #cap-status::before { background: var(--text-faint); }

.toast {
  position: fixed; z-index: 40; left: 50%; transform: translateX(-50%); bottom: calc(var(--sab) + var(--player-h) + 28px);
  background: var(--surface-solid); border: 1px solid var(--line); padding: 10px 16px; border-radius: 999px; font-size: 14px; box-shadow: var(--shadow); max-width: calc(100vw - 32px);
}
.toast[hidden] { display: none; }

/* 목록 모드(WebGL 불가) */
body.no-globe .panel { left: var(--gutter); right: var(--gutter); width: auto; margin: 0 auto; max-width: 640px; }

/* 모바일: 패널은 바텀시트, 툴은 한 줄 스크롤 */
@media (max-width: 720px) {
  :root { --player-h: 60px; }
  .brand-sub { display: none; }
  .topbar { gap: 8px; }
  .search { order: 3; flex-basis: 100%; max-width: none; }
  .tools { order: 4; flex: 1 1 100%; margin-left: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .tools::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
  /* 고정 높이(58vh)로 아래에 붙이면 짧은 화면에서 위 버튼 줄 밑으로 파고들어 닫기(×)가 가려졌다(10-13 사용자 제보)
     → 높이는 내용만큼, 단 '버튼 줄 아래 ~ 재생 막대 위' 를 넘지 않는다. 넘치는 내용은 패널 안에서 스크롤 */
  .panel { top: auto; left: var(--gutter); right: var(--gutter); width: auto; height: auto; bottom: calc(var(--sab) + var(--player-h) + 24px);
    max-height: min(64vh, 560px, calc(100dvh - var(--top-h, 150px) - var(--player-h) - var(--sab) - 36px)); }
  .panel-head { padding: 12px 14px 8px; }
  .panel-title { font-size: 18px; }
  .wl-card { padding: 11px 12px; }
  .wl-card h3 { font-size: 15px; }
  .wl-card p { font-size: 12.5px; margin-bottom: 8px; }
  .wl-acts .btn { padding: 8px 13px; font-size: 13px; }
  .wl-langs .chip { height: 30px; padding: 0 11px; font-size: 13px; }
  #pl-vol { display: none; }
  .player { padding: 0 8px; gap: 6px; }
  .pl-btn { width: 40px; height: 40px; }
}

/* hidden 속성이 .chip 등의 display 지정에 덮이지 않게(🔒 북한 버튼이 로그인 전에 보이던 결함) */
[hidden] { display: none !important; }
/* 위성사진(밝은 땅) 위에서도 글씨가 보이게 */
.brand, .brand-sub { text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 0 10px rgba(0,0,0,.6); }
.chip.nk { color: var(--danger); border-color: rgba(255,107,107,.35); }
/* 북한 자료(관리자 전용) */
.nk-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.nk-tabs .chip { height: 30px; }
.nk-tabs .chip.on { color: #fff; background: rgba(255,107,107,.18); border-color: rgba(255,107,107,.45); }
.nk-note { margin: 0 0 10px; font-size: 12px; color: var(--text-faint); line-height: 1.5; }
.nk-h { font-size: 13px; color: var(--text-dim); margin: 16px 10px 4px; }
.nk-sked { padding: 9px 10px; border-radius: var(--radius-sm); }
.nk-sked.now { background: rgba(61,242,197,.08); }
.nk-sked b { font-variant-numeric: tabular-nums; }
.nk-sked .live { color: var(--live); font-weight: 700; font-size: 12px; margin-left: 6px; }
.nk-sked p { margin: 2px 0 0; font-size: 12px; color: var(--text-dim); }
.nk-sked a { font-size: 12.5px; }
.nk-rx { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 10px 8px; font-size: 13px; color: var(--text-dim); }
.nk-rx select { max-width: 100%; font: inherit; color: var(--text); background: var(--surface-solid); border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; }
.nk-lock { margin-top: 18px; }
.map-credit { position: fixed; z-index: 4; left: var(--gutter); bottom: calc(var(--ad-h, 0px) + var(--player-h) + 22px); font-size: 10px; color: rgba(255,255,255,.55); text-decoration: none; text-shadow: 0 1px 2px #000; }
.map-credit:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* 📍 내 위치 단추 — 지구본 오른쪽 아래(패널이 열리면 패널 뒤로) */
.fab {
  position: fixed; z-index: 14; right: var(--gutter); bottom: calc(var(--sab) + var(--player-h) + 28px);
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center;
  background: var(--surface); color: var(--text); cursor: pointer; box-shadow: var(--shadow);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.fab svg { width: 22px; height: 22px; fill: currentColor; }
.fab:hover { color: #4da3ff; }
.fab.busy svg { animation: blink 1s infinite; color: #4da3ff; }
/* 확대했을 때 세부 점 툴팁 */
.hovertip { position: fixed; z-index: 30; pointer-events: none; }
/* 🌙 꺼짐 타이머 */
.pl-btn.sleep { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pl-btn.sleep.on { color: var(--accent); font-size: 13px; }
.sleep-menu {
  position: fixed; z-index: 30; left: 50%; transform: translateX(-50%); bottom: calc(var(--sab) + var(--player-h) + 24px);
  width: min(360px, calc(100vw - 2 * var(--gutter))); display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
  background: var(--surface-solid); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow);
}
.sleep-title { grid-column: 1 / -1; margin: 0 0 4px; font-size: 12.5px; color: var(--text-dim); }
.sleep-menu button { font: 600 14px var(--font); color: var(--text); background: var(--surface-hi); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px; cursor: pointer; }
.sleep-menu button:hover { border-color: var(--accent); }
.sleep-menu button.off { grid-column: 1 / -1; color: var(--text-dim); }
.about .stats { font-size: 14px; color: var(--text-dim); background: var(--surface-hi); border-radius: var(--radius-sm); padding: 10px 12px; line-height: 1.6; }
.about .stats b { color: var(--radio); }
@media (max-width: 720px) {
  .pl-btn.ghost { width: 32px; }
}
.pl-btn.sleep svg { width: 18px; height: 18px; fill: currentColor; }
/* 범례 — 방송(초록 원)·뉴스(주황 마름모)·재생 중(빨강)·내 위치(파랑) */
.legend { position: fixed; z-index: 4; left: var(--gutter); bottom: calc(var(--ad-h, 0px) + var(--player-h) + 40px); margin: 0; padding: 6px 10px; list-style: none;
  display: flex; gap: 10px; font-size: 11.5px; color: var(--text); background: rgba(5,7,13,.55); border-radius: 999px; backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.legend li { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.legend i { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(0,0,0,.8); }
.lg-radio { background: var(--radio); }
.lg-live { background: var(--live); }
.lg-news { background: var(--news); border-radius: 1px !important; transform: rotate(45deg) scale(.95); box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px rgba(0,0,0,.8) !important; }
.lg-me { background: #4da3ff; box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px rgba(0,0,0,.8) !important; }
body.no-globe .legend { display: none; }
/* 위성사진 출처 표기는 라이선스(CC BY-NC-SA) 조건이라 휴대폰에서도 숨기지 않는다 — 범례를 그 위에 */
@media (max-width: 720px) { .legend { bottom: calc(var(--sab) + var(--player-h) + 40px); gap: 8px; font-size: 11px; } }
/* ⏰ 알람·공유·화면 켜두기(🌙 메뉴 안) */
.alarm-row { grid-column: 1 / -1; display: flex; gap: 6px; }
.alarm-row input { flex: 1; min-width: 0; font: 600 16px var(--font); color: var(--text); background: var(--surface-hi); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; color-scheme: dark; }
.alarm-row button { flex: none; width: 76px; }
.sleep-menu button.on { border-color: var(--accent); color: var(--accent); }
.alarm-note { grid-column: 1 / -1; margin: 0; font-size: 12.5px; color: var(--text); }
.alarm-note.dim { color: var(--text-faint); font-size: 11.5px; line-height: 1.45; }
.sleep-menu button.wide { grid-column: 1 / -1; }
.sleep-menu { max-height: calc(100dvh - var(--player-h) - 120px); overflow: auto; }
.btn.alarm-go { font-size: 17px; padding: 14px 22px; margin: 8px 0; }

/* 🏛️ 나라 레이어·나라 정보 (보라 = 방송 초록·뉴스 주황과 겹치지 않는 색) */
:root { --country: #b48cff; }
.sw-country { background: var(--country); border-radius: 2px; }
.t-country { color: var(--country); }
.lg-country { background: var(--country); border-radius: 1px !important; box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px rgba(0,0,0,.8) !important; transform: scale(.85); }
.country-cta { border-color: rgba(180,140,255,.4); color: var(--country); }
.cc-card { display: flex; align-items: center; gap: 10px; width: 100%; margin: 2px 0 8px; padding: 10px 12px; text-align: left;
  border: 1px solid rgba(180,140,255,.38); border-radius: var(--radius-sm); background: rgba(180,140,255,.08); color: var(--text); }
.cc-card:hover { background: rgba(180,140,255,.15); }
.cc-card-flag { font-size: 22px; flex: none; }
.cc-card-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cc-card-main b { color: var(--country); font-size: 14px; }
.cc-card-main span { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-card-wx { flex: none; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ci { padding: 2px 2px 8px; }
.ci-acts { display: flex; gap: 6px; margin: 2px 0 10px; }
.ci-act { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 9px 4px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface-hi); color: var(--text); }
.ci-act b { font-size: 13.5px; white-space: nowrap; }
.ci-act span { font-size: 11.5px; color: var(--text-dim); white-space: nowrap; }
.ci-act.radio { border-color: rgba(255,154,92,.35); } .ci-act.radio b { color: var(--radio); }
.ci-act.news { border-color: rgba(255,77,109,.4); } .ci-act.news b { color: var(--news); }
.ci-act.head { border-color: rgba(76,201,255,.35); } .ci-act.head b { color: var(--accent); }
.ci-act:hover { background: rgba(255,255,255,.1); }
.ci-wx { margin: 0 0 6px; padding: 12px; border-radius: var(--radius-sm); background: linear-gradient(135deg, rgba(76,201,255,.12), rgba(180,140,255,.10)); border: 1px solid var(--line); }
.ci-wx-load { margin: 0; font-size: 13px; color: var(--text-dim); }
.ci-wx-now { display: flex; align-items: center; gap: 12px; }
.ci-wx-ic { font-size: 40px; line-height: 1; flex: none; }
.ci-wx-temp { margin: 0; font-size: 19px; font-weight: 700; }
.ci-wx-meta { margin: 1px 0 0; font-size: 12px; color: var(--text-dim); }
.ci-wx-days { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ci-wx-days li { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; border-radius: 8px; background: rgba(0,0,0,.18); font-size: 12px; font-variant-numeric: tabular-nums; }
.ci-wx-days b { font-size: 11.5px; color: var(--text-dim); font-weight: 600; }
.ci-wx-days .ci-ic { font-size: 18px; }
.ci-wx-days small { font-size: 10.5px; color: var(--accent); }
.ci-h { font-size: 13px; color: var(--text-dim); margin: 16px 4px 6px; font-weight: 700; }
.ci-facts { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 0; font-size: 13.5px; }
.ci-facts dt { color: var(--text-dim); padding: 7px 12px 7px 4px; border-top: 1px solid var(--line); white-space: nowrap; }
.ci-facts dd { margin: 0; padding: 7px 4px; border-top: 1px solid var(--line); min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
.ci-facts dd small { display: block; font-size: 11.5px; color: var(--text-faint); }
.ci-wiki-tx { margin: 0 4px; font-size: 14px; line-height: 1.65; color: var(--text); word-break: keep-all; overflow-wrap: anywhere; }
.ci-src { margin: 6px 4px 0; font-size: 11.5px; color: var(--text-faint); line-height: 1.5; }
.ci-src a { color: var(--text-dim); }

/* 재생 막대: 방송 이름 = 나라 정보 단추 */
button.pl-info { display: flex; flex-direction: column; align-items: stretch; text-align: left; background: none; border: 0; padding: 4px 6px; margin: 0; border-radius: 10px; color: var(--text); }
button.pl-info:hover { background: var(--surface-hi); }
button.pl-info .pl-name, button.pl-info .pl-meta { display: block; }

/* 🎲 고르는 방식 토글 — 두 칸을 위아래로 겹쳐 좁은 휴대폰 재생 막대에도 들어가게 */
.dice-mode { flex: none; display: flex; flex-direction: column; justify-content: center; gap: 2px; height: 44px; padding: 3px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(0,0,0,.25); }
.dice-mode span { display: block; padding: 1px 7px; border-radius: 8px; font-size: 10.5px; line-height: 1.5; font-weight: 600; color: var(--text-faint); white-space: nowrap; text-align: center; }
.dice-mode[data-mode="any"] span[data-m="any"], .dice-mode[data-mode="similar"] span[data-m="similar"] { background: var(--text); color: #05070d; }
.dice-mode:hover { border-color: rgba(255,255,255,.25); }
@media (max-width: 720px) { .dice-mode { height: 40px; } .dice-mode span { padding: 0 5px; font-size: 10px; } }

/* ───────── 색 구분(10-11): 종류마다 한 색 — 지구본 점·위 칩·패널·단추가 같은 색을 쓴다 ─────────
   라디오 초록 / 뉴스 주황 / 헤드라인 하늘 / 나라 보라 / 재생 중 빨강 / 내 위치 파랑 */
:root { --country: #c77dff; --head: #4cc9ff; }
.chip[data-kind="radio"] { --k: var(--radio); --k-bg: rgba(255,154,92,.14); --k-line: rgba(255,154,92,.55); }
.chip[data-kind="news"] { --k: var(--news); --k-bg: rgba(255,77,109,.16); --k-line: rgba(255,77,109,.6); }
.chip[data-kind="head"] { --k: var(--head); --k-bg: rgba(76,201,255,.14); --k-line: rgba(76,201,255,.55); }
.chip[data-kind="country"] { --k: var(--country); --k-bg: rgba(199,125,255,.16); --k-line: rgba(199,125,255,.6); }
.chip[data-kind].on, .chip[data-kind].act { color: var(--k); border-color: var(--k-line); background: linear-gradient(var(--k-bg), var(--k-bg)), var(--surface); font-weight: 600; }
.chip[data-kind]:not(.on):not(.act) { color: var(--text-faint); }
.chip[data-kind]:hover { border-color: var(--k-line); }
.sw-country { background: var(--country); }
.t-country { color: var(--country); }
.lg-country { background: var(--country); box-shadow: 0 0 0 1.5px rgba(0,0,0,.85) !important; transform: none; border-radius: 1px !important; }
.country-cta { border-color: rgba(199,125,255,.5); color: var(--country); }
.cc-card { border-color: rgba(199,125,255,.5); background: rgba(199,125,255,.1); }
.cc-card:hover { background: rgba(199,125,255,.18); }
.ci-act.head b { color: var(--head); }
/* 패널 윗변 색 띠 + 머리 글자 색 */
.panel[data-kind]:not([data-kind=""]) { border-top: 3px solid var(--k); }
.panel[data-kind="radio"] { --k: var(--radio); } .panel[data-kind="news"] { --k: var(--news); }
.panel[data-kind="head"] { --k: var(--head); } .panel[data-kind="country"] { --k: var(--country); } .panel[data-kind="nk"] { --k: var(--danger); }
.panel[data-kind] .panel-kicker { color: var(--k, var(--text-dim)); font-weight: 600; }

/* 지역 보기: 함께 / 라디오 / 소식 */
.seg { display: flex; gap: 4px; padding: 3px; margin: 0 0 8px; border-radius: 999px; background: rgba(0,0,0,.28); border: 1px solid var(--line); }
.seg-btn { flex: 1; min-width: 0; border: 0; border-radius: 999px; padding: 7px 6px; background: none; color: var(--text-dim); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg-btn.on { background: var(--text); color: #05070d; }
.seg-btn.radio.on { background: var(--radio); }
.seg-btn.news.on { background: var(--news); }
.mix-sec { margin: 4px 0 10px; padding-left: 8px; border-left: 3px solid var(--k, var(--line)); }
.mix-sec.radio { --k: rgba(255,154,92,.6); } .mix-sec.head { --k: rgba(76,201,255,.65); } .mix-sec.news { --k: rgba(255,77,109,.65); }
.mix-h { margin: 8px 4px 2px; font-size: 12.5px; font-weight: 700; }
.mix-sec.radio .mix-h { color: var(--radio); } .mix-sec.head .mix-h { color: var(--head); } .mix-sec.news .mix-h { color: var(--news); }
.mix-more { display: block; margin: 2px 10px 4px auto; font-size: 12.5px; color: var(--text-dim); }
.mix-sec.head .news { border-left: 0; }

/* ───────── 나라 정보 카드형(10-11) ───────── */
.ci { display: flex; flex-direction: column; gap: 10px; }
.ci > * { margin-top: 0; margin-bottom: 0; }
.ci-info { display: flex; flex-direction: column; gap: 10px; }
.ci-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ci-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px 12px 10px; border-radius: var(--radius-sm);
  background: rgba(199,125,255,.08); border: 1px solid rgba(199,125,255,.22); min-width: 0; }
.ci-stat-k { font-size: 11.5px; color: var(--text-dim); font-weight: 600; letter-spacing: .02em; }
.ci-stat-v { display: flex; align-items: baseline; gap: 3px; min-width: 0; }
.ci-stat-v b { font-size: 21px; line-height: 1.2; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-stat-v small { font-size: 12px; color: var(--text-dim); }
.ci-stat-s { font-size: 11px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-card { padding: 12px 14px; border-radius: var(--radius-sm); background: rgba(255,255,255,.035); border: 1px solid var(--line); }
.ci-card-h { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13.5px; font-weight: 700; color: var(--text); }
.ci-card dl { margin: 0; display: grid; grid-template-columns: 6.2em 1fr; column-gap: 12px; font-size: 14px; }
.ci-card dt { color: var(--text-dim); padding: 7px 0; font-size: 13px; }
.ci-card dd { margin: 0; padding: 7px 0; min-width: 0; word-break: keep-all; overflow-wrap: anywhere; line-height: 1.45; }
.ci-card dt:not(:first-of-type), .ci-card dd:not(:first-of-type) { border-top: 1px dashed rgba(255,255,255,.07); }
.ci-card dd small { display: block; font-size: 11.5px; color: var(--text-faint); margin-top: 1px; }
.ci-wiki-tx { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text); word-break: keep-all; overflow-wrap: anywhere; }
.ci-wiki-tx.clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; }
.ci-more { display: block; margin: 6px 0 0; padding: 4px 0; border: 0; background: none; color: var(--country); font-size: 13px; font-weight: 600; }
.ci-tag { font-size: 10.5px; font-weight: 600; color: var(--text-dim); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; }
.ci .ci-src { margin: 8px 0 0; }
.ci > .ci-src { margin: 2px 4px 4px; }
.ci-wx { margin: 0; }
.ci-acts { margin: 0; }

/* ───────── 장르·언어 고르기 · 낮밤 · 한 바퀴 · 여권 · 유튜브 · 경보 (10-11) ───────── */
:root { --sun: #ffd166; }
.chip[data-kind="sun"] { --k: var(--sun); --k-bg: rgba(255,209,102,.14); --k-line: rgba(255,209,102,.55); }
.sw-sun { background: linear-gradient(90deg, var(--sun) 50%, #1b2a4a 50%); border-radius: 50%; }
.flt-sheet { position: fixed; z-index: 22; top: calc(var(--top-h, 66px) + 8px); left: var(--gutter); width: min(520px, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100dvh - var(--top-h, 66px) - var(--player-h) - 48px); overflow: auto; overscroll-behavior: contain;
  background: var(--surface-solid); border: 1px solid var(--line); border-top: 3px solid var(--radio); border-radius: var(--radius); padding: 12px 14px 14px; box-shadow: var(--shadow); }
.flt-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.flt-top b { flex: 1; color: var(--radio); }
.flt-h { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 6px; font-size: 13px; color: var(--text); }
.flt-h small { font-size: 11px; color: var(--text-faint); font-weight: 500; }
.flt-row { display: flex; gap: 6px; }
.flt-row.wrap { flex-wrap: wrap; }
.flt-row > .flt-btn { flex: 1; }
.flt-row.wrap > .flt-btn { flex: 0 0 auto; }
.flt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.flt-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 11px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface-hi); color: var(--text); font-size: 13px; text-align: left; }
.flt-btn small { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.flt-btn:hover { border-color: rgba(255,154,92,.45); }
.flt-btn.on { background: rgba(255,154,92,.16); border-color: var(--radio); color: var(--radio); font-weight: 700; }
.flt-btn.on small { color: var(--radio); }
.flt-note { margin: 14px 0 0; font-size: 11.5px; color: var(--text-faint); line-height: 1.55; }
@media (max-width: 720px) { .flt-sheet { left: 8px; width: calc(100vw - 16px); } .flt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tour { display: flex; flex-direction: column; gap: 10px; }
.tour-dots { display: flex; gap: 6px; justify-content: center; }
.tour-dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-hi); border: 1px solid var(--line); }
.tour-dots span.done { background: rgba(76,201,255,.5); }
.tour-dots span.now { background: var(--head); box-shadow: 0 0 0 3px rgba(76,201,255,.25); }
.tour-bar { height: 4px; border-radius: 4px; background: var(--surface-hi); overflow: hidden; }
.tour-bar i { display: block; height: 100%; width: 0; background: var(--head); transition: width 1s linear; }
.tour-st { margin: 0; font-weight: 600; color: var(--radio); }
.tour-ctrl { display: flex; gap: 6px; }
.tour-ctrl .btn { flex: 1; padding: 9px 8px; font-size: 13px; }
.tour-ctrl .btn:not(.ghost) { background: var(--head); color: #04121c; }
.tour-done { font-size: 18px; font-weight: 700; margin: 6px 0; text-align: center; }

.pass { display: flex; flex-direction: column; gap: 10px; }
.pass-head { text-align: center; padding: 8px 0 2px; }
.pass-head b { font-size: 34px; color: var(--country); font-variant-numeric: tabular-nums; }
.pass-head span { color: var(--text-dim); }
.pass-conts { display: grid; gap: 6px; }
.pass-cont { display: grid; grid-template-columns: 6.5em 1fr 3.5em; align-items: center; gap: 8px; font-size: 12.5px; }
.pass-cont small { text-align: right; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.pass-bar { height: 6px; border-radius: 6px; background: var(--surface-hi); overflow: hidden; }
.pass-bar i { display: block; height: 100%; background: var(--country); }
.pass-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.pass-stamp { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 12px; border: 1.5px dashed rgba(199,125,255,.55);
  background: rgba(199,125,255,.06); color: var(--text); transform: rotate(-2deg); }
.pass-stamp:nth-child(2n) { transform: rotate(1.5deg); }
.pass-stamp:hover { background: rgba(199,125,255,.14); }
.pass-flag { font-size: 22px; }
.pass-stamp b { font-size: 12.5px; text-align: center; word-break: keep-all; }
.pass-stamp small { font-size: 10.5px; color: var(--country); font-variant-numeric: tabular-nums; }

.yt-box { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--radius-sm); background: rgba(255,48,64,.07); border: 1px solid rgba(255,70,80,.35); }
.yt-main { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
.yt-ic { flex: none; width: 42px; height: 30px; border-radius: 8px; background: #ff0033; color: #fff; display: grid; place-items: center; font-size: 13px; }
.yt-tx { display: flex; flex-direction: column; min-width: 0; }
.yt-tx b { font-size: 14.5px; }
.yt-tx small { font-size: 11.5px; color: var(--text-dim); }
.yt-main:hover b { text-decoration: underline; }
.yt-more { display: flex; flex-wrap: wrap; gap: 6px; }
.yt-chip { padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255,70,80,.35); color: var(--text); text-decoration: none; font-size: 12.5px; background: rgba(0,0,0,.2); }
.yt-chip:hover { background: rgba(255,48,64,.18); }

.ci-alert { padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid; display: flex; flex-direction: column; gap: 2px; }
.ci-alert small { font-size: 12px; color: var(--text-dim); }
.ci-alert.lv1 { border-color: rgba(76,160,255,.6); background: rgba(76,160,255,.1); } .ci-alert.lv1 b { color: #7cb8ff; }
.ci-alert.lv2 { border-color: rgba(255,209,102,.6); background: rgba(255,209,102,.1); } .ci-alert.lv2 b { color: var(--sun); }
.ci-alert.lv3 { border-color: rgba(255,90,90,.65); background: rgba(255,90,90,.12); } .ci-alert.lv3 b { color: #ff7b7b; }
.ci-alert.lv4 { border-color: #3df2c5; background: rgba(61,242,197,.2); } .ci-alert.lv4 b { color: #fff; }
.cc-card.region { border-color: rgba(199,125,255,.3); background: rgba(199,125,255,.05); }
.cc-card.region .cc-card-main b { color: #dcb8ff; }
.ci-act.country { border-color: rgba(199,125,255,.45); } .ci-act.country b { color: var(--country); }

/* 🎬 유튜브 두 단추(풍경·전통문화) + 현지어/한국어 전환 */
.yt-head { display: flex; align-items: center; gap: 8px; }
.yt-head b { flex: 1; font-size: 14px; }
.yt-logo { width: 26px; height: 18px; border-radius: 5px; background: #ff0033; color: #fff; display: grid; place-items: center; font-size: 9px; }
.yt-lang { display: flex; padding: 2px; border-radius: 999px; border: 1px solid rgba(255,70,80,.35); background: rgba(0,0,0,.25); }
.yt-lang span { padding: 2px 9px; border-radius: 999px; font-size: 11.5px; color: var(--text-dim); }
.yt-lang span.on { background: #ff0033; color: #fff; font-weight: 700; }
.yt-main2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.yt-btn { display: flex; align-items: center; gap: 9px; padding: 11px 10px; border-radius: 12px; text-decoration: none; color: var(--text);
  background: rgba(255,48,64,.12); border: 1px solid rgba(255,70,80,.45); min-width: 0; }
.yt-btn:hover { background: rgba(255,48,64,.22); }
.yt-btn .yt-ic { width: auto; height: auto; background: none; font-size: 22px; }
.yt-btn .yt-tx b { font-size: 14px; }
.yt-btn .yt-tx small { font-size: 10.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yt-note { margin: 0; font-size: 11px; color: var(--text-faint); }
.btn.tour-again { background: var(--head); color: #04121c; padding: 12px 16px; font-size: 15px; }
.tour-reroll { align-self: center; font-size: 12.5px; color: var(--head); }

.about-intro { font-size: 13.5px; color: var(--text-dim); margin: 6px 0 0; }
.about-intro a { color: var(--radio); font-weight: 700; }

/* ── 앱(네이티브) 전용 ── */
.chip.premium { color: #2a1206; background: var(--radio); border-color: var(--radio); font-weight: 800; }
.chip.premium.on { color: var(--radio); background: rgba(255,154,92,.1); }
.pm-plans { display: grid; gap: 10px; margin: 4px 0 14px; }
.pm-plan { padding: 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-hi); }
.pm-plan.pro { border-color: rgba(255,154,92,.5); background: rgba(255,154,92,.07); }
.pm-plan h3 { margin: 0 0 6px; font-size: 15px; }
.pm-plan ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text-dim); line-height: 1.7; }
.pm-buy { width: 100%; justify-content: center; font-size: 15px; padding: 12px; }
.pm-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pm-note { font-size: 11.5px; color: var(--text-faint); line-height: 1.6; margin: 12px 0 0; }
/* 안드로이드 작은 화면(PIP) — 재생 막대만 남긴다 */
body.pip .topbar, body.pip .legend, body.pip .map-credit, body.pip .fab, body.pip #panel, body.pip #flt-sheet, body.pip #globe { display: none !important; }
body.pip .player { left: 6px; right: 6px; top: 50%; bottom: auto; width: auto; transform: translateY(-50%); }
body.pip .player > :not(#pl-toggle):not(#pl-info) { display: none !important; }
.btn.pm-buy:not(.ghost) { background: var(--radio); color: #2a1206; font-weight: 800; }

/* ── ✨ 첫 화면 카드 ── */
.welcome { display: grid; gap: 12px; }
.wl-card { padding: 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-hi); }
.wl-card h3 { margin: 0 0 4px; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.wl-card p { margin: 0 0 10px; font-size: 13px; color: var(--text-dim); line-height: 1.55; }
.wl-card.trip { border-color: rgba(255,154,92,.45); background: linear-gradient(135deg, rgba(255,154,92,.14), rgba(255,111,97,.06)); }
.wl-card.learn { border-color: rgba(76,201,255,.4); background: linear-gradient(135deg, rgba(76,201,255,.12), rgba(76,201,255,.03)); }
.wl-ic { font-size: 20px; }
.wl-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.wl-go { background: var(--radio); color: #2a1206; font-weight: 800; }
.wl-langs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.wl-langs .chip { height: 32px; }
.wl-skip { justify-self: center; margin-top: 2px; }
.news-title.ev { display: block; margin: 0 0 4px; font-size: 14px; line-height: 1.5; color: var(--text); text-decoration: none; }
.news-title.ev:hover, .news-title.ev:active { color: var(--news); text-decoration: underline; }

/* 패널이 열려 있으면 버튼 줄(z 20)보다 위 — 겹쳐도 패널 닫기(×)가 눌린다 */
.panel:not([hidden]) { z-index: 21; }

/* ── ✨ 처음 화면 버튼 — 로고 옆에 늘 보이게(칩 줄 속에 있으면 휴대폰에서 옆으로 넘겨야 보였다) ── */
.home-pill { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 14px; border-radius: 999px;
  border: 0; cursor: pointer; font: 800 14px var(--font); color: #2a1206;
  background: linear-gradient(135deg, #ffc07a, var(--radio) 55%, #ff6f61);
  box-shadow: 0 4px 16px rgba(255,154,92,.45), inset 0 0 0 1px rgba(255,255,255,.25); }
.home-pill:hover { filter: brightness(1.06); }
.home-pill:active { transform: translateY(1px); }
@media (max-width: 720px) {
  .home-pill { order: 2; margin-left: auto; height: 32px; padding: 0 13px; font-size: 13.5px; }
}

/* ── 🏆 순위 ── */
.home-pill.chart { background: linear-gradient(135deg, #fff1a8, #ffd166 55%, #ffb547); color: #2a1a00; box-shadow: 0 4px 16px rgba(255,209,102,.4), inset 0 0 0 1px rgba(255,255,255,.3); }
@media (max-width: 720px) {
  .home-pill { padding: 0 11px; font-size: 13px; }
  .home-pill.chart { order: 2; margin-left: 6px; }
}
.wl-card.chart { border-color: rgba(255,209,102,.45); background: linear-gradient(135deg, rgba(255,209,102,.14), rgba(255,209,102,.03)); }
.ch-sel { width: 100%; height: 38px; margin: 2px 0 8px; padding: 0 10px; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--surface-solid); color: var(--text); font: 600 14px var(--font); }
.ch-seg { margin-bottom: 8px; }
.ch-head { margin: 4px 2px 6px; font-size: 13px; color: var(--text-dim); }
.ch-head b { color: var(--sun, #ffd166); }
.ch-note { margin: 6px 2px; font-size: 11.5px; color: var(--text-faint); line-height: 1.55; }
.ch-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 8px; border-radius: var(--radius-sm); border-bottom: 1px solid var(--line); }
.ch-row.top { background: rgba(255,209,102,.07); }
.ch-rank { flex: none; width: 28px; text-align: center; font: 900 17px var(--font); color: var(--text-dim); font-variant-numeric: tabular-nums; padding-top: 1px; }
.ch-row.top .ch-rank { color: #ffd166; }
.ch-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.ch-title { font-size: 14.5px; line-height: 1.35; overflow-wrap: anywhere; }
.ch-artist { font-size: 13px; color: var(--text-dim); overflow-wrap: anywhere; }
.ch-meta { font-size: 11.5px; color: var(--text-faint); }
.ch-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.ch-act { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface-hi); color: var(--text); font: 600 12px var(--font); text-decoration: none; cursor: pointer; }
.ch-act.radio { border-color: rgba(255,154,92,.45); color: var(--radio); }

/* 언어 단추(한/EN) */
.chip.icon.lang { font: 800 12px var(--font); letter-spacing: .02em; min-width: 38px; }

/* 🎚️ 필터 적용 중 띠 — 목록 맨 위, 그 자리에서 풀기 */
.flt-bar { display: flex; align-items: center; gap: 8px; margin: 2px 4px 8px; padding: 8px 10px; border-radius: var(--radius-sm);
  background: rgba(255,209,102,.1); border: 1px solid rgba(255,209,102,.4); }
.flt-bar-t { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text); line-height: 1.4; }
.flt-clear { flex: none; height: 30px; padding: 0 12px; border-radius: 999px; border: 0; cursor: pointer;
  background: #ffd166; color: #2a1a00; font: 800 12.5px var(--font); }
.flt-clear:hover { filter: brightness(1.05); }

/* 순위: 나라 칩(여러 개) */
.ch-ccs { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.ch-ccs .chip { height: 30px; font-size: 12.5px; }
.ch-more { max-height: 180px; overflow: auto; padding: 6px; border-radius: var(--radius-sm); border: 1px dashed var(--line); }
.ch-add { border-style: dashed; }

/* 사건 번역/원문 단추 */
.tr-toggle { border: 1px solid var(--line); background: var(--surface-hi); color: var(--head); border-radius: 999px; height: 22px; padding: 0 9px; font: 700 11.5px var(--font); cursor: pointer; }