/* ==========================================================================
   Design Tokens — design_media_insight/README.md "Design Tokens" 표 그대로
   ========================================================================== */
:root{
  --bg:#faf9f7;          /* 페이지 배경 */
  --surface:#ffffff;     /* 카드/버튼 표면 */
  --ink:#1a1614;         /* 잉크(본문·강조) */
  --ink-2:#4a443f;       /* 보조 텍스트 */
  --muted:#6f6862;       /* 뮤트 텍스트 */
  --micro:#9a938c;       /* 미세 텍스트 */
  --micro-2:#a9a29b;     /* 미세 텍스트(더 옅음) */
  --line:#e6e2dd;        /* 라인 */
  --fill:#efece7;        /* 채움/active 칩 */
  --hover:#f2efeb;       /* hover 배경 */
  --dot-off:#d8d3cd;     /* 저장 0개 점 */
  --accent:#3a6cc4;                 /* oklch 미지원 브라우저 fallback */
  --accent:oklch(0.56 0.15 250);    /* Accent — 저장 상태 표시에만 사용 */
  --warn:#b4543f;
  --ok:#4f8a5b;
  --overlay:rgba(26,22,20,0.82);      /* 배지 */
  --overlay-play:rgba(26,22,20,0.86); /* 재생 버튼 */
  --ph:repeating-linear-gradient(135deg, #efece7 0 7px, #f6f4f1 7px 14px); /* 자리표시자 */
  --ph-lg:repeating-linear-gradient(135deg, #e8e4de 0 9px, #f1eee9 9px 18px);
  --ph-sm:repeating-linear-gradient(135deg, #efece7 0 6px, #f6f4f1 6px 12px);
  --sans:'Noto Sans KR', system-ui, -apple-system, 'Malgun Gothic', sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, 'D2Coding', Consolas, monospace;
  --ease:.18s ease;
  /* 레이아웃 — 화면 폭을 꽉 채우고 여백만 화면 크기에 따라 늘린다 */
  --page-max:100%;
  --page-pad:clamp(16px, 2.6vw, 56px);
  --card-w:236px;          /* 카드 기본 폭 (모바일에서 좁아짐) */
  --hdr-h:120px;

  /* 상태/강조 — 하드코딩하지 않고 토큰으로 두어 다크모드에서 함께 바뀐다 */
  --live:#e0332f;          /* 실시간 표시 점, 1위 순위 */
  --rise:#d0342c;          /* 상승 */
  --fall:#3a6ea5;          /* 하락 */
  --up:#d93025;            /* 지표 증가 */
  --down:#2563eb;          /* 지표 감소 */
  --badge-ai:#2563eb;      /* AI STT 뱃지 */
  --on-accent:#ffffff;     /* 짙은 배경 위 글자 */
  --hdr-bg:rgba(250,249,247,0.92);   /* 헤더 반투명 배경 */
  --scrim:rgba(255,255,255,.72);     /* 로딩 가림막 */
  --modal-bg:#ffffff;                /* 모달 본문 */
  --modal-ink:#1a1614;
  --modal-scrim:rgba(18,18,18,.62);
  --warn-bg:#fbf3f0; --warn-line:#f0ddd6; --warn-ink:#8a3f2e;
  --save-off:#b6afa8;      /* 미저장 체크 */
  --player-label:#8d8680;

  /* 차트 카테고리 색 (dataviz 검증 통과: 인접쌍 CVD ΔE 9.1, 일반 19.6) */
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100;
  --s5:#e87ba4; --s6:#008300; --s7:#4a3aa7; --s8:#e34948;
  --aud-age-1:#ead7ff; --aud-age-2:#d4e5ff; --aud-age-3:#d1efeb;
  --aud-age-4:#dcefd3; --aud-age-5:#ffe8a8; --aud-age-6:#ffd8c2; --aud-age-7:#f8d1d9;
  --aud-female:#f7cfe2; --aud-male:#cfe0ff; --aud-other:#e1d6f2;
  /* 9번째부터는 새 색을 만들지 않고 순위 기반 단색 계열(밝기만 변화)로 처리한다 */
  --s-tail-h:230; --s-tail-c:0.045;
}

/* ── 다크 모드 ─────────────────────────────────────────────────────────
   OS 설정(prefers-color-scheme)과 사용자 토글(data-theme) 양쪽을 지원한다.
   :not([data-theme="light"]) 가드로 '밝게' 수동 선택이 OS 다크를 이긴다. */
:root[data-theme="dark"], 
:root:not([data-theme="light"]) {
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#161513; --surface:#1f1e1c;
    --ink:#f3f0ea; --ink-2:#d2ccc3; --muted:#a69f96; --micro:#877f76; --micro-2:#6f6960;
    --line:#34302b; --fill:#2a2724; --hover:#262320; --dot-off:#46423b;
    --accent:#5b93e8;
    --warn:#e0917c; --ok:#6fbf7f;
    --overlay:rgba(0,0,0,0.72); --overlay-play:rgba(0,0,0,0.78);
    --ph:repeating-linear-gradient(135deg, #2a2724 0 7px, #232120 7px 14px);
    --ph-lg:repeating-linear-gradient(135deg, #2d2a26 0 9px, #252321 9px 18px);
    --ph-sm:repeating-linear-gradient(135deg, #2a2724 0 6px, #232120 6px 12px);
    --hdr-bg:rgba(22,21,19,0.92); --scrim:rgba(22,21,19,.72);
  --modal-bg:#1f1e1c; --modal-ink:#f3f0ea; --modal-scrim:rgba(0,0,0,.7);
  --live:#f2665f; --rise:#f2665f; --fall:#7aa8e0; --up:#f2665f; --down:#7aa8e0;
    --badge-ai:#4b8ef0; --on-accent:#14130f;
    --warn-bg:#2f231f; --warn-line:#4a332c; --warn-ink:#f0b3a0;
    --save-off:#6f6960; --player-label:#8d8680;
    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
    --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767;
    --aud-age-1:#3d2b4d; --aud-age-2:#263957; --aud-age-3:#214442;
    --aud-age-4:#30452a; --aud-age-5:#4b4021; --aud-age-6:#4d3428; --aud-age-7:#4a2c34;
    --aud-female:#4b293b; --aud-male:#263a59; --aud-other:#393047;
    --s-tail-c:0.05;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#161513; --surface:#1f1e1c;
  --ink:#f3f0ea; --ink-2:#d2ccc3; --muted:#a69f96; --micro:#877f76; --micro-2:#6f6960;
  --line:#34302b; --fill:#2a2724; --hover:#262320; --dot-off:#46423b;
  --accent:#5b93e8;
  --warn:#e0917c; --ok:#6fbf7f;
  --overlay:rgba(0,0,0,0.72); --overlay-play:rgba(0,0,0,0.78);
  --ph:repeating-linear-gradient(135deg, #2a2724 0 7px, #232120 7px 14px);
  --ph-lg:repeating-linear-gradient(135deg, #2d2a26 0 9px, #252321 9px 18px);
  --ph-sm:repeating-linear-gradient(135deg, #2a2724 0 6px, #232120 6px 12px);
  --hdr-bg:rgba(22,21,19,0.92); --scrim:rgba(22,21,19,.72);
  --modal-bg:#1f1e1c; --modal-ink:#f3f0ea; --modal-scrim:rgba(0,0,0,.7);
  --live:#f2665f; --rise:#f2665f; --fall:#7aa8e0; --up:#f2665f; --down:#7aa8e0;
  --badge-ai:#4b8ef0; --on-accent:#14130f;
  --warn-bg:#2f231f; --warn-line:#4a332c; --warn-ink:#f0b3a0;
  --save-off:#6f6960; --player-label:#8d8680;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
  --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767;
  --aud-age-1:#3d2b4d; --aud-age-2:#263957; --aud-age-3:#214442;
  --aud-age-4:#30452a; --aud-age-5:#4b4021; --aud-age-6:#4d3428; --aud-age-7:#4a2c34;
  --aud-female:#4b293b; --aud-male:#263a59; --aud-other:#393047;
  --s-tail-c:0.05;
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; min-height:100vh; line-height:1.5;
  user-select:none; -webkit-user-select:none;
}
/* 입력창은 원래대로 글자를 고르고 커서를 쓸 수 있어야 한다 */
input, textarea, select, [contenteditable]{
  user-select:text; -webkit-user-select:text;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:var(--sans); cursor:pointer; }
h1,h2,h3,p{ margin:0; }
.mono{ font-family:var(--mono); }
.track::-webkit-scrollbar{ height:0; width:0; }
.track{ scrollbar-width:none; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.45 } }

/* ── Layout ─────────────────────────────────────────────────────────── */
main{ max-width:var(--page-max); margin:0 auto; padding:40px var(--page-pad) 96px; }
main.detail{ padding-top:32px; }

/* ── Header (공통, 68px sticky) ─────────────────────────────────────── */
.hdr{
  position:sticky; top:0; z-index:20;
  background:var(--hdr-bg); backdrop-filter:blur(12px);
  border-bottom:0;
}
.hdr-in{
  max-width:var(--page-max); margin:0 auto; padding:0 var(--page-pad); height:68px;
  display:flex; align-items:center; gap:clamp(14px, 2vw, 32px);
}
.hdr-tools{
  max-width:var(--page-max); margin:0 auto; min-height:52px; padding:8px var(--page-pad) 10px;
  display:flex; align-items:center; gap:12px; border-top:1px solid color-mix(in srgb, var(--line) 72%, transparent);
}
.wordmark{ display:flex; align-items:center; flex-shrink:0; }
.wordmark-logo{ display:block; width:auto; height:48px; transition:filter var(--ease); }

/* 원본 SVG의 남색은 어두운 배경에서 묻히므로 다크 테마에서만 밝은 CBS 블루로 표시한다. */
:root[data-theme="dark"] .wordmark-logo,
:root[data-theme="dark"] .auth-logo{
  filter:brightness(0) saturate(100%) invert(64%) sepia(79%) saturate(2265%) hue-rotate(178deg) brightness(104%) contrast(101%)
         drop-shadow(0 0 8px rgba(61,174,255,.18));
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .wordmark-logo,
  :root:not([data-theme="light"]) .auth-logo{
    filter:brightness(0) saturate(100%) invert(64%) sepia(79%) saturate(2265%) hue-rotate(178deg) brightness(104%) contrast(101%)
           drop-shadow(0 0 8px rgba(61,174,255,.18));
  }
}

.hdr-search{ position:relative; flex:0 1 360px; min-width:220px; }
.hdr-search input{
  width:100%; height:34px; padding:0 58px 0 30px;
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  font-family:var(--sans); font-size:13px; font-weight:700; color:var(--ink); outline:none;
  transition:border-color var(--ease);
}
.hdr-search .search-submit{
  position:absolute; right:4px; top:4px; height:26px; padding:0 9px;
  border:0; border-radius:999px; background:var(--ink); color:var(--on-accent); font-size:12px; font-weight:700;
}
.hdr-search input::placeholder{ color:var(--micro-2); }
.hdr-search input:focus{ border-color:var(--ink); }
.hdr-search .ico{
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  font-size:11px; color:var(--micro); pointer-events:none;
}

/* 기간 선택 */
.period-controls{
  display:flex; align-items:center; gap:5px; flex-shrink:0;
}
.period-presets{ display:flex; align-items:center; gap:4px; }
.period-preset{
  height:34px; padding:0 16px; border:1px solid var(--line); border-radius:999px;
  background:var(--surface); color:var(--muted); font-size:13px; font-weight:700; white-space:nowrap;
  transition:all var(--ease);
}
.period-preset:hover{ border-color:var(--ink); color:var(--ink); }
.period-preset[aria-selected="true"]{ background:var(--ink); border-color:var(--ink); color:var(--on-accent); }
.period-preset:disabled{ opacity:.4; cursor:not-allowed; border-color:var(--line); color:var(--micro); }
.datebox{ position:relative; flex-shrink:0; }
.date-btn{
  display:flex; align-items:center; justify-content:center; gap:6px; min-width:34px; height:34px; padding:0 9px;
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  color:var(--muted); font-size:13px; font-weight:700; transition:all var(--ease);
}
.date-btn:hover{ border-color:var(--ink); color:var(--ink); }
.date-btn.on{ background:var(--ink); border-color:var(--ink); color:var(--on-accent); }
.date-tag{ font-family:var(--mono); font-size:11px; }
.date-panel{
  position:absolute; top:calc(100% + 10px); left:0; z-index:40; width:290px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px;
}
.date-panel h3{ font-size:13px; font-weight:700; padding-bottom:12px; }
.date-panel .field{ flex:1; min-width:0; }
.date-panel .field input{ height:34px; }

.notif-box{ position:relative; }
.notif-btn{
  position:relative; font-size:15px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  /* 종 이모지는 글자체 안에서 아래쪽으로 그려져 있어, 옆 글자 높이에 맞추려면
     시각적으로 살짝 올려줘야 한다(레이아웃에는 영향 없게 transform 으로). */
  transform:translateY(-3px);
}
.notif-badge{
  position:absolute; top:-4px; right:-6px; min-width:16px; height:16px; padding:0 4px;
  border-radius:999px; background:var(--warn, #b42318); color:#fff;
  font-family:var(--mono); font-size:10px; line-height:16px; text-align:center; font-weight:700;
}
.notif-panel{
  position:absolute; top:calc(100% + 10px); right:0; z-index:40; width:320px; max-height:420px;
  overflow-y:auto; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px;
}
.notif-panel h3{ font-size:13px; font-weight:700; padding-bottom:10px; }
.notif-item{ padding:10px 0; border-top:1px solid var(--line); }
.notif-item:first-of-type{ border-top:none; }
.notif-item .sub{ font-size:11px; color:var(--muted); padding-bottom:4px; }
.notif-msg, .notif-reply{ font-size:13px; line-height:1.5; white-space:pre-wrap; }
.notif-reply{ color:var(--ink); font-weight:600; }
.notif-time{ font-family:var(--mono); font-size:11px; color:var(--muted); padding-top:4px; }
.notif-foot{ padding-top:10px; text-align:center; }

.tabs{ display:flex; gap:6px; }
.tab{
  padding:8px 16px; border-radius:999px; font-size:13px; font-weight:700;
  background:var(--surface); color:var(--ink); border:1px solid var(--micro);
  white-space:nowrap; transition:all var(--ease);
}
.tab:hover{ background:var(--hover); border-color:var(--ink); color:var(--ink); }
.tab[aria-selected="true"]{ background:var(--ink); color:var(--on-accent); border-color:var(--ink); }
.tab:focus-visible{ outline:3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset:2px; }
.tab.locked{ color:var(--muted); cursor:not-allowed; }
.tab.locked:hover{ background:var(--surface); border-color:var(--micro); color:var(--muted); }

.hdr-right{ display:flex; align-items:center; gap:14px; flex-shrink:0; margin-left:auto; }
.saved-btn{
  display:flex; align-items:center; gap:7px;
  background:none; border:1px solid var(--line); border-radius:999px; padding:8px 14px;
  font-family:var(--mono); font-size:12px; color:var(--ink-2);
  white-space:nowrap; transition:border-color var(--ease);
}
.saved-btn:hover{ border-color:var(--ink); }
.mediahub-btn{
  background:#1769d2; border-color:#1769d2; color:#fff;
  font-family:inherit; font-weight:700;
}
.mediahub-btn:hover{ background:#0f56b3; border-color:#0f56b3; color:#fff; }
.saved-dot{ width:7px; height:7px; border-radius:2px; background:var(--dot-off); display:inline-block; }
.saved-dot.on{ background:var(--accent); }
.hdr-link{
  font-family:var(--mono); font-size:12px; color:var(--muted);
  background:none; border:none; padding:0; transition:color var(--ease);
}
.hdr-link:hover{ color:var(--ink); }
.theme-btn{ white-space:nowrap; }
.nb{ white-space:nowrap; }   /* 날짜 구간 등 붙어 있어야 할 덩어리 */

/* ── 상태 배너 ──────────────────────────────────────────────────────── */
.banner{
  max-width:var(--page-max); margin:0 auto; padding:12px var(--page-pad);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11px; color:var(--ink-2);
}
.banner.warn{ background:var(--warn-bg); border-bottom:1px solid var(--warn-line); color:var(--warn-ink); }
.banner a{ text-decoration:underline; }
.load-progress{
  position:fixed; inset:0 0 auto 0; height:3px; z-index:1000;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size:45% 100%; animation:load-slide 1.1s linear infinite;
}
.stats-sync-progress{
  margin:0 0 18px; padding:16px 18px; border:1px solid var(--line);
  border-radius:12px; background:var(--surface);
}
.stats-sync-progress-head{
  display:flex; justify-content:space-between; gap:12px; align-items:center;
  margin-bottom:10px; font-size:12px; color:var(--muted);
}
.stats-sync-progress-head strong{ color:var(--ink); font-size:13px; }
.stats-sync-progress-track{
  height:10px; overflow:hidden; border-radius:999px; background:var(--fill);
}
.stats-sync-progress-fill{
  height:100%; min-width:2px; border-radius:inherit; background:var(--accent);
  transition:width .35s ease;
}
.stats-sync-progress.failed{ border-color:var(--warn); }
.stats-sync-progress.failed .stats-sync-progress-fill{ background:var(--warn); }
.load-overlay{
  position:fixed; inset:var(--hdr-h) 0 0; z-index:900; display:flex;
  align-items:flex-start; justify-content:center; padding-top:52px;
  background:var(--scrim); backdrop-filter:blur(2px);
}
.load-message{
  padding:13px 18px; border:1px solid var(--line); border-radius:8px;
  background:var(--modal-bg); box-shadow:0 8px 30px rgba(0,0,0,.08);
  font-size:13px; font-weight:700; color:var(--ink-2);
}
.load-spinner{
  display:inline-block; width:14px; height:14px; margin-right:9px;
  border:2px solid var(--line); border-top-color:var(--accent); border-radius:50%;
  vertical-align:-2px; animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes load-slide{ from{ background-position:-80% 0; } to{ background-position:180% 0; } }

/* ── 페이지 헤딩 블록 ───────────────────────────────────────────────── */
.page-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding-bottom:28px;
}
.page-head h1{ font-size:34px; font-weight:900; letter-spacing:-0.03em; line-height:1.15; }
.page-sub{ margin-top:8px; font-size:14px; font-weight:500; color:var(--ink-2); }
.content-title-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.content-title-row .chip{ padding:7px 12px; }
.chips{ display:flex; gap:6px; flex-shrink:0; }
.home-content-controls{ flex-wrap:wrap; justify-content:flex-end; }
.chip{
  padding:8px 15px; border-radius:6px; font-size:13px; font-weight:800;
  background:var(--surface); color:var(--ink); border:1px solid var(--micro);
  white-space:nowrap; transition:all var(--ease);
}
.chip:hover{ background:var(--hover); border-color:var(--ink); color:var(--ink); }
.chip[aria-selected="true"]{ background:var(--ink); color:var(--on-accent); border-color:var(--ink); }
.chip:focus-visible{ outline:3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset:2px; }
.channel-filter-select{
  min-width:150px; max-width:240px; height:32px; padding:0 32px 0 11px;
  border:1px solid var(--line); border-radius:6px; background:var(--surface);
  color:var(--ink-2); font:700 13px var(--sans); outline:none;
}
.channel-filter-select:focus{ border-color:var(--ink); }

.back{
  background:none; border:none; padding:0 0 20px;
  font-family:var(--mono); font-size:12px; color:var(--muted);
  transition:color var(--ease);
}
.back:hover{ color:var(--ink); }

/* ── Row (가로 스크롤 섹션) ─────────────────────────────────────────── */
.row{ padding:36px 0 0; border-top:1px solid var(--line); }
.row-head{ display:flex; align-items:center; gap:14px; padding-bottom:18px; flex-wrap:wrap; }
.row-head h2{ font-size:19px; font-weight:900; letter-spacing:-0.02em; }
.row-count{ font-family:var(--mono); font-size:11px; color:var(--micro); }
.trend-up{ color:var(--up) !important; }
.trend-down{ color:var(--down) !important; }
.trend-flat{ color:var(--muted); }
.row-nav{ margin-left:auto; display:flex; gap:6px; }
.arrow{
  width:30px; height:30px; border-radius:50%; background:var(--surface);
  border:1px solid var(--line); color:var(--muted); font-size:14px; line-height:1;
  transition:all var(--ease);
}
.arrow:hover:not(:disabled){ border-color:var(--ink); color:var(--ink); }
.arrow:disabled{ opacity:.35; cursor:default; }
.track{ display:flex; gap:20px; overflow-x:auto; scroll-behavior:auto; padding-bottom:8px; }

/* ── Video card ─────────────────────────────────────────────────────── */
.card{ animation:fadeUp .3s ease both; }
.track .card{ flex:0 0 var(--card-w); }
.thumb{
  position:relative; aspect-ratio:16/9; border-radius:10px; overflow:hidden;
  background:var(--ph); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.thumb-label{ font-family:var(--mono); font-size:9px; letter-spacing:0.1em; color:var(--micro-2); }
.rank{
  position:absolute; left:0; bottom:0; padding:2px 12px 0 10px;
  background:var(--ink); color:var(--on-accent);
  font-family:var(--mono); font-size:20px; font-weight:500;
  border-top-right-radius:10px;
}
.dur{
  position:absolute; right:8px; bottom:8px; padding:2px 6px; border-radius:4px;
  background:var(--overlay); color:var(--on-accent); font-family:var(--mono); font-size:10px;
}
.card-meta{ display:flex; gap:10px; padding-top:12px; }
.card-text{ flex:1; min-width:0; cursor:pointer; }
.card-title{ font-size:15px; font-weight:700; line-height:1.45; letter-spacing:-0.01em; text-wrap:pretty; }
.ai-available-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:17px; height:17px; margin-left:5px; border-radius:50%;
  background:var(--badge-ai); color:var(--on-accent); font-size:10px; font-weight:800;
  line-height:1; vertical-align:0.08em; box-shadow:0 0 0 1px rgba(37,99,235,.12);
}
.card-ch{ margin-top:5px; font-size:12px; color:var(--muted); }
.card-num{ margin-top:3px; font-family:var(--mono); font-size:11px; color:var(--micro); }
.save{
  flex:0 0 26px; height:26px; border-radius:50%; font-size:12px; line-height:1;
  background:transparent; color:var(--save-off); border:1px solid var(--line);
  transition:all var(--ease);
}
.save[aria-pressed="true"]{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }

/* ── Grid / Empty / Skeleton ────────────────────────────────────────── */
.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(var(--card-w), 1fr)); gap:24px; }
.channel-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:clamp(18px,2.2vw,32px);
}
.channel-card{
  position:relative; min-width:0; padding:22px 16px 18px; border:1px solid var(--line); border-radius:16px;
  background:var(--surface); text-align:center; transition:transform var(--ease), border-color var(--ease), box-shadow var(--ease);
}
.channel-card:hover{ transform:translateY(-3px); border-color:var(--ink); box-shadow:0 10px 30px rgba(26,22,20,.08); }
.channel-card.is-inactive{
  background:color-mix(in srgb, #8b9098 18%, var(--surface));
  border-color:color-mix(in srgb, #8b9098 42%, var(--line));
}
.channel-card.is-inactive .channel-thumb{ filter:grayscale(.78); opacity:.76; }
.channel-thumb{
  position:static;
  width:min(150px, 78%); aspect-ratio:1; margin:0 auto 16px; overflow:visible; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:var(--fill); border:1px solid var(--line);
  color:var(--muted); font-size:34px; font-weight:900;
}
.channel-thumb > img:not(.channel-award){ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.channel-award{
  position:absolute; top:8px; left:8px; z-index:3;
  width:36px; height:auto; object-fit:contain; pointer-events:none;
  border-radius:3px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.18));
}
.channel-card h2{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:17px; font-weight:900; }
.channel-subs{ margin-top:7px; color:var(--ink-2); font-family:var(--mono); font-size:13px; font-weight:600; }
.channel-subs-change{ margin-left:4px; font-weight:800; white-space:nowrap; }
.channel-latest{ margin-top:4px; display:flex; justify-content:center; gap:6px; color:var(--muted); font-size:11px; font-weight:700; }
.channel-latest time{ color:var(--ink-2); font-family:var(--mono); }
.channel-page-head{ align-items:flex-start; }
.channel-title-block{ flex:none; min-width:150px; }
.channel-filter-stack{ flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.channel-filter-row{ display:flex; align-items:center; gap:6px; min-width:0; overflow-x:auto; scrollbar-width:none; padding-bottom:1px; }
.channel-filter-row::-webkit-scrollbar{ height:0; }
.channel-filter-label{ flex:0 0 38px; font-size:12px; font-weight:900; color:var(--ink-2); }
.channel-filter-row .chip{ padding:7px 13px; border-radius:999px; font-size:12px; }
.channel-sort-group{
  flex:0 0 auto; display:flex; align-items:center; gap:6px; margin-left:auto;
  padding-left:14px; border-left:1px solid color-mix(in srgb, #3f91cf 42%, var(--line));
}
.channel-sort-label{ font-size:12px; font-weight:900; color:color-mix(in srgb, #287dbb 78%, var(--ink)); }
.channel-filter-row .channel-sort-btn{
  background:color-mix(in srgb, #68b5eb 15%, var(--surface));
  border-color:color-mix(in srgb, #4998d2 48%, var(--line)); color:color-mix(in srgb, #3c91ce 76%, var(--ink));
}
.channel-filter-row .channel-sort-btn:hover{ background:color-mix(in srgb, #68b5eb 26%, var(--surface)); border-color:#438fc8; }
.channel-filter-row .channel-sort-btn[aria-selected="true"]{ background:#2f83c4; border-color:#2f83c4; color:#fff; }
.channel-pager{ display:flex; align-items:center; justify-content:center; gap:10px; padding-top:32px; }
.empty{ padding:80px 0; text-align:center; border:1px dashed var(--line); border-radius:12px; }
.empty p{ font-size:14px; color:var(--muted); }
.empty .hint{ margin-top:6px; font-family:var(--mono); font-size:11px; color:var(--micro-2); }
.empty .mini{ margin-top:18px; }
.skel{ animation:pulse 1.2s ease-in-out infinite; }
.skel .bar{ height:12px; border-radius:4px; background:var(--fill); margin-top:8px; }
.skel .bar.short{ width:55%; }

/* ── Badge ──────────────────────────────────────────────────────────── */
.badge{
  display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:0.12em;
  padding:4px 9px; border-radius:4px; background:var(--ink); color:var(--on-accent); white-space:nowrap;
}
.badge.ghost{ background:transparent; color:var(--muted); border:1px solid var(--line); letter-spacing:0.06em; }
.state{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; color:var(--ink-2); }
.state::before{ content:''; width:7px; height:7px; border-radius:2px; background:var(--micro-2); }
.state.ok::before, .state.success::before{ background:var(--ok); }
.state.error::before, .state.failed::before{ background:var(--warn); }
.state.paused::before{ background:var(--dot-off); }
.state.running::before{ background:var(--accent); animation:pulse 1s ease-in-out infinite; }

/* ── Search 화면 ────────────────────────────────────────────────────── */
.search-layout{ display:grid; grid-template-columns:clamp(190px,15vw,260px) minmax(0,1fr); gap:clamp(20px,2.5vw,44px); align-items:start; }
.filters{ position:sticky; top:calc(var(--hdr-h) + 20px); }
.filter-group{ padding:0 0 24px; }
.filter-group h3{ font-family:var(--mono); font-size:10px; letter-spacing:0.12em; color:var(--micro); padding-bottom:10px; }
.filter-list{ display:flex; flex-direction:column; gap:2px; }
.filter-item{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:6px 8px; margin:0 -8px; border-radius:6px;
  background:none; border:none; font-size:13px; color:var(--ink-2); text-align:left;
  transition:background var(--ease);
}
.filter-item:hover{ background:var(--hover); }
.filter-item[aria-pressed="true"]{ background:var(--fill); color:var(--ink); font-weight:500; }
.filter-item .n{ font-family:var(--mono); font-size:10px; color:var(--micro); }
.result{ display:flex; gap:20px; padding:20px 0; border-bottom:1px solid var(--line); }
.result .thumb{ flex:0 0 clamp(200px, 22vw, 320px); }
.result-body{ flex:1; min-width:0; cursor:pointer; }
.result-title{ font-size:16px; font-weight:700; letter-spacing:-0.01em; line-height:1.4; text-wrap:pretty; }
.result-title mark{ background:var(--fill); color:inherit; padding:0 2px; border-radius:2px; }
.result-meta{ margin-top:8px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.result-desc{
  margin-top:10px; font-size:13px; line-height:1.65; color:var(--muted);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.result-side{ flex:0 0 26px; }

/* ── Detail 화면 ────────────────────────────────────────────────────── */
.detail-grid{ display:grid; grid-template-columns:minmax(0,1fr) clamp(300px,24vw,400px); gap:clamp(24px,2.5vw,44px); align-items:start; }
.player{
  position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden;
  background:var(--ph-lg); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.player iframe{ width:100%; height:100%; border:0; }
.player.audio{ flex-direction:column; gap:18px; padding:24px; }
.player.audio audio{ width:min(100%, 520px); }
.play-btn{
  width:62px; height:62px; border-radius:50%; background:var(--overlay-play); border:none;
  display:flex; align-items:center; justify-content:center;
  color:var(--on-accent); font-size:18px; padding-left:4px;
}
.player-label{ position:absolute; left:14px; top:14px; font-family:var(--mono); font-size:10px; letter-spacing:0.1em; color:var(--player-label); }
.detail-top{ display:flex; align-items:center; gap:10px; padding-top:22px; flex-wrap:wrap; }
.detail-num{ font-family:var(--mono); font-size:11px; color:var(--micro); }
.detail-grid h1{ margin-top:12px; font-size:28px; font-weight:900; letter-spacing:-0.03em; line-height:1.25; text-wrap:pretty; }
.channel-bar{
  display:flex; align-items:center; gap:16px; padding:20px 0; margin-top:16px;
  flex-wrap:wrap;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.avatar{ width:38px; height:38px; border-radius:50%; background:var(--fill); border:1px solid var(--line); flex-shrink:0; overflow:hidden; }
.avatar img{ width:100%; height:100%; object-fit:cover; }
.channel-bar .name{ font-size:14px; font-weight:700; }
.channel-bar .subs{ margin-top:2px; font-family:var(--mono); font-size:11px; color:var(--micro); }
.save-pill{
  border:1px solid var(--line); background:transparent; color:var(--ink-2);
  border-radius:999px; padding:9px 20px; font-size:13px; font-weight:500;
  transition:all var(--ease);
}
.save-pill:hover{ border-color:var(--ink); color:var(--ink); }
.save-pill[aria-pressed="true"]{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.desc{ margin-top:24px; font-size:14px; line-height:1.75; color:var(--ink-2); max-width:62ch; text-wrap:pretty; white-space:pre-wrap; }
.tag-line{ margin-top:20px; display:flex; gap:6px; flex-wrap:wrap; }
.tag{ font-size:12px; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:5px 12px; background:transparent; transition:all var(--ease); }
.tag:hover{ border-color:var(--ink); color:var(--ink); }
.origin{ margin-top:20px; display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; color:var(--muted); }
.origin:hover{ color:var(--ink); }
.ai-stt-btn{
  border:1px solid var(--accent); background:transparent; color:var(--accent);
  border-radius:999px; padding:9px 16px; font-size:12px; font-weight:700; white-space:nowrap;
}
.ai-stt-btn:hover{ background:var(--accent); color:var(--on-accent); }
.ai-stt-btn:disabled{ border-color:var(--line); color:var(--micro); cursor:not-allowed; background:transparent; }
.ai-keywords{ display:flex; align-items:flex-start; gap:10px; margin-top:14px; flex-wrap:wrap; }
.ai-keywords-label{ padding-top:5px; font-size:11px; font-weight:700; color:var(--muted); }
.ai-keyword{ font-size:12px; color:var(--ink-2); border:1px solid var(--line); border-radius:999px; padding:5px 11px; background:var(--surface); }
.ai-stt-overlay{
  position:fixed; inset:0; z-index:1000; padding:clamp(16px,4vw,48px);
  display:flex; align-items:center; justify-content:center; background:var(--modal-scrim);
}
.ai-stt-dialog{
  width:min(920px,100%); max-height:88vh; display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:16px; background:var(--surface); color:var(--ink);
  box-shadow:0 24px 80px rgba(0,0,0,.28); overflow:hidden;
}
.ai-stt-head{ display:flex; align-items:flex-start; gap:16px; padding:20px 22px; border-bottom:1px solid var(--line); }
.ai-stt-head h2{ flex:1; font-size:16px; line-height:1.4; }
.ai-stt-head .meta{ margin-top:5px; font-family:var(--mono); font-size:10px; color:var(--micro); }
.ai-stt-close{ border:0; background:transparent; color:var(--muted); font-size:24px; line-height:1; padding:0 3px; }
.ai-stt-body{ padding:22px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; background:var(--modal-bg); font-size:14px; line-height:1.8; color:var(--modal-ink); }
.ai-stt-empty{ padding:48px 22px; text-align:center; color:var(--muted); }

.comments{ margin-top:40px; padding-top:28px; border-top:1px solid var(--line); max-width:62ch; }
.comments h2{ font-size:13px; font-weight:700; letter-spacing:0.02em; }
.comment-form{ display:flex; gap:10px; padding:18px 0 24px; }
.comment-form textarea{
  flex:1; min-height:38px; resize:vertical; padding:10px 12px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  font-family:var(--sans); font-size:13px; line-height:1.5; color:var(--ink); outline:none;
  transition:border-color var(--ease);
}
.comment-form textarea:focus{ border-color:var(--ink); }
.comment-form button{
  align-self:flex-start; border:1px solid var(--line); background:transparent;
  border-radius:999px; padding:9px 18px; font-size:13px; font-weight:500; color:var(--ink-2);
  transition:all var(--ease);
}
.comment-form button:hover{ border-color:var(--ink); color:var(--ink); }
.comment{ display:flex; gap:12px; padding:14px 0; border-top:1px solid var(--line); }
.comment .avatar{ width:30px; height:30px; }
.comment .who{ font-size:13px; font-weight:700; }
.comment .when{ font-family:var(--mono); font-size:10px; color:var(--micro); }
.comment .body{ margin-top:5px; font-size:13px; line-height:1.65; color:var(--ink-2); white-space:pre-wrap; }
.comment .del{ margin-left:auto; background:none; border:none; padding:0; font-family:var(--mono); font-size:10px; color:var(--micro-2); }
.comment .del:hover{ color:var(--ink); }

aside h2{ font-size:13px; font-weight:700; letter-spacing:0.02em; padding-bottom:16px; }
.next-list{ display:flex; flex-direction:column; gap:16px; }
.next{ display:flex; gap:12px; cursor:pointer; padding:8px; margin:-8px; border-radius:10px; transition:background var(--ease); }
.next:hover{ background:var(--hover); }
.next .t{ position:relative; flex:0 0 116px; aspect-ratio:16/9; border-radius:7px; background:var(--ph-sm); border:1px solid var(--line); overflow:hidden; }
.next .t img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.next h3{ font-size:13px; font-weight:500; line-height:1.4; }
.next p{ margin-top:4px; font-family:var(--mono); font-size:10px; color:var(--micro); }

/* ── Admin ──────────────────────────────────────────────────────────── */
.admin-nav{ display:flex; gap:6px; padding-bottom:28px; flex-wrap:wrap; }
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:24px; padding-bottom:36px; }
.stat{ border:1px solid var(--line); border-radius:12px; padding:20px; background:var(--surface); }
.stat .k{ font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:0.08em; color:var(--ink-2); }
.stat .v{ margin-top:10px; font-family:var(--mono); font-size:30px; font-weight:700; letter-spacing:-0.03em; }
.stat .d{ margin-top:6px; font-size:12px; color:var(--muted); }
.statistics-page .stat .k{
  font-family:var(--sans); font-size:clamp(20px,1.35vw,25px); font-weight:900;
  letter-spacing:-0.035em; color:var(--ink);
}
.statistics-page .stat .v{ margin-top:7px; font-size:clamp(18px,1.25vw,22px); font-weight:900; }
.statistics-page .stat .d{ font-size:14px; font-weight:600; color:var(--ink-2); }

.table-wrap{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; min-width:720px; }
th{ text-align:left; padding:11px 12px; border-bottom:2px solid var(--line); background:var(--fill); font-family:var(--mono); font-size:12px; letter-spacing:0.05em; color:var(--ink); font-weight:800; }
td{ padding:15px 12px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:middle; }
th:first-child, td:first-child{ padding-left:0; }
th:last-child, td:last-child{ padding-right:0; text-align:right; }
td .sub{ margin-top:3px; font-family:var(--mono); font-size:11px; color:var(--micro); word-break:break-all; }
td .name{ font-weight:700; }
.mini{
  border:1px solid var(--line); background:transparent; border-radius:999px;
  padding:6px 12px; font-size:12px; color:var(--ink-2); white-space:nowrap;
  transition:all var(--ease);
}
.mini:hover{ border-color:var(--ink); color:var(--ink); }
.mini:disabled{ opacity:.4; cursor:default; }
.mini.danger:hover{ border-color:var(--warn); color:var(--warn); }
.mini.sync-stop{ background:#b42318; border-color:#b42318; color:#fff; font-weight:700; }
.mini.sync-stop:hover{ background:#8f1c13; border-color:#8f1c13; color:#fff; }
.mini.sync-start{ background:#175cd3; border-color:#175cd3; color:#fff; font-weight:700; }
.mini.sync-start:hover{ background:#1849a9; border-color:#1849a9; color:#fff; }
.sort-th{
  background:none; border:none; padding:0; display:inline-flex; align-items:center; gap:5px;
  font-family:var(--mono); font-size:11px; letter-spacing:0.08em; color:var(--ink-2); font-weight:700;
  transition:color var(--ease);
}
.sort-th:hover{ color:var(--ink); }
.sort-th .arrow-i{ font-size:8px; }
.mini + .mini{ margin-left:6px; }
.mini.on{ background:var(--ink); color:var(--on-accent); border-color:var(--ink); }
.pager-numbers{ display:flex; align-items:center; justify-content:center; gap:4px; padding-top:18px; flex-wrap:wrap; }
.pager-numbers .mini{ min-width:34px; }
.pager-ellipsis{ padding:0 4px; color:var(--muted); font-family:var(--mono); font-size:12px; }
.form-card{ border:1px solid var(--line); border-radius:12px; padding:24px; background:var(--surface); margin-bottom:36px; }
.form-row{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.field{ flex:1; min-width:180px; }
.field label{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:0.12em; color:var(--micro); padding-bottom:8px; }
.field input, .field select{
  width:100%; height:38px; padding:0 12px; background:var(--bg);
  border:1px solid var(--line); border-radius:8px;
  font-family:var(--sans); font-size:13px; letter-spacing:0; color:var(--ink); outline:none;
  transition:border-color var(--ease);
}
.field textarea{
  width:100%; min-height:76px; padding:10px 12px; background:var(--bg); resize:vertical;
  border:1px solid var(--line); border-radius:8px;
  font-family:var(--sans); font-size:13px; line-height:1.5; letter-spacing:0; color:var(--ink); outline:none;
  transition:border-color var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--ink); }
.form-note{ padding-top:14px; font-family:var(--mono); font-size:11px; color:var(--micro); line-height:1.7; }
.err{ font-family:var(--mono); font-size:11px; color:var(--warn); line-height:1.5; word-break:break-word; }
.tag-input{ width:100%; height:32px; padding:0 10px; background:var(--bg); border:1px solid var(--line); border-radius:6px; font-family:var(--sans); font-size:12px; color:var(--ink); outline:none; }
.tag-input:focus{ border-color:var(--ink); }

/* 로그인·회원가입 */
.auth-page{ min-height:100vh; display:grid; place-items:center; padding:32px 16px; }
.auth-card{ width:min(100%, 480px); background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:30px; }
.auth-logo{ display:block; width:min(100%, 360px); height:auto; margin:0 auto 24px; }
.auth-card h1{ font-size:24px; padding-bottom:8px; }
.auth-card .auth-sub{ color:var(--muted); font-size:13px; line-height:1.7; padding-bottom:22px; }
.auth-form{ display:grid; gap:13px; }
.auth-field{ display:grid; gap:6px; }
.auth-field label{ font-size:12px; font-weight:700; }
.auth-field input{ width:100%; height:42px; border:1px solid var(--line); border-radius:8px; padding:0 12px; font:13px var(--sans); }
.auth-field input:focus{ outline:none; border-color:var(--ink); }
.auth-email{ display:flex; align-items:center; }
.auth-email input{ border-radius:8px 0 0 8px; }
.auth-domain{ height:42px; display:flex; align-items:center; padding:0 11px; border:1px solid var(--line); border-left:0; border-radius:0 8px 8px 0; background:var(--bg); font:12px var(--mono); }
.auth-code-row{ display:grid; grid-template-columns:1fr auto; gap:7px; }
.auth-primary{ height:44px; border:0; border-radius:8px; background:var(--ink); color:var(--on-accent); font-weight:700; }
.auth-links{ display:flex; justify-content:center; gap:14px; padding-top:18px; font-size:12px; color:var(--muted); }
.auth-note{ margin-top:14px; padding:10px 12px; border-radius:8px; background:var(--bg); color:var(--muted); font-size:11px; line-height:1.6; }
.auth-alert-overlay{
  position:fixed; inset:0; z-index:1000; padding:16px;
  display:flex; align-items:center; justify-content:center; background:var(--modal-scrim);
}
.auth-alert-dialog{
  width:min(360px,100%); display:grid; gap:16px; padding:24px;
  border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--ink);
  box-shadow:0 24px 80px rgba(0,0,0,.28); text-align:center;
}
.auth-alert-dialog p{ font-size:14px; line-height:1.6; }
.auth-alert-dialog .auth-primary{ width:100%; }
.admin-body.collect{ display:flex; flex-direction:column; }
.admin-body.collect > *{ order:3; }
.admin-body.collect > .collect-summary{ order:0; }
.admin-body.collect > .quota-current{ order:1; }
.admin-body.collect > .quota-estimate{ order:2; }

/* ── 정책 ───────────────────────────────────────────────────────────── */
.role-select{ min-width:116px; height:32px; font-size:12.5px; }
/* 표 머리를 눌러 정렬한다. 글꼴·색은 th 를 그대로 물려받아 버튼처럼 보이지 않게. */
.sort-th{ all:unset; display:inline-flex; align-items:center; gap:2px; cursor:pointer;
  font:inherit; color:inherit; letter-spacing:inherit; white-space:nowrap; }
.sort-th:hover{ text-decoration:underline; }
.sort-th:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.sort-th.on{ color:var(--accent); }
.policy-notice{ margin:-8px 0 28px; padding:12px 16px; border:1px solid var(--line); border-radius:10px; background:var(--surface); font-size:13px; line-height:1.6; color:var(--ink-2); }
.policy-section{ padding-bottom:12px; }
.policy-sub{ font-size:13px; color:var(--muted); }
.policy-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; }
.policy-card{
  display:flex; flex-direction:column; gap:8px; min-width:0; text-align:left;
  padding:18px 18px 16px; border:1px solid var(--line); border-radius:14px;
  background:var(--surface); color:var(--ink); font:inherit;
  transition:border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.policy-card:hover{ border-color:var(--ink-2); transform:translateY(-1px); }
.policy-card:focus-visible{ outline:3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset:2px; }
.policy-card[aria-expanded="true"]{ border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.policy-card-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.policy-tag{ display:inline-block; padding:3px 9px; border-radius:999px; background:var(--fill); font-size:11.5px; font-weight:700; color:var(--ink-2); }
.policy-date{ font-family:var(--mono); font-size:11.5px; color:var(--muted); }
.policy-card-title{ font-size:17px; font-weight:800; letter-spacing:-0.02em; line-height:1.35; }
.policy-card-sum{ font-size:13px; line-height:1.6; color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.policy-card-more{ margin-top:auto; padding-top:6px; font-size:12px; font-weight:700; color:var(--accent); }
.policy-detail{
  margin-top:16px; padding:20px 22px; border:1px solid var(--line); border-radius:14px;
  background:var(--surface); animation:fadeUp .25s ease both; scroll-margin-top:calc(var(--hdr-h) + 16px);
}
.policy-detail-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding-bottom:14px; }
.policy-detail-head h3{ font-size:17px; font-weight:800; }
/* 전역 표 스타일(첫/끝 칸 여백 0, 끝 칸 우측 정렬)은 숫자 표 기준이라 정책 표에서는 되돌린다. */
.policy-table{ min-width:560px; }
.policy-table th, .policy-table td{ padding:12px 14px; text-align:left; vertical-align:top; line-height:1.55; }
.policy-table th:first-child, .policy-table td:first-child{ padding-left:14px; }
.policy-table th:last-child, .policy-table td:last-child{ padding-right:14px; text-align:left; }
.policy-table thead th{ font-family:var(--sans); font-size:13px; letter-spacing:0; }
.policy-table tbody th{ width:22%; background:transparent; border-bottom:1px solid var(--line); font-family:var(--sans); font-size:13.5px; font-weight:700; letter-spacing:0; color:var(--ink); }
.policy-table .policy-hl{ background:color-mix(in srgb, var(--accent) 9%, transparent); }
.policy-table thead .policy-hl{ color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, var(--fill)); }
.policy-table td.policy-hl{ font-weight:700; }
.policy-none{ color:var(--micro); }
.policy-note{ margin-top:12px; font-size:12.5px; line-height:1.65; color:var(--muted); }
.policy-sources{ margin-top:8px; font-size:12px; line-height:1.7; color:var(--muted); }
.policy-sources a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
@media (max-width:760px){
  .policy-grid{ grid-template-columns:1fr; }
  .policy-detail{ padding:16px 14px; }
  /* 모바일에서는 컬럼 수만큼만 폭을 잡아 3열 비교표의 '변경' 칸이 가로 스크롤 뒤로 숨지 않게 한다. */
  .policy-table{ min-width:calc(var(--policy-cols, 3) * 104px); }
  .policy-table th, .policy-table td{ padding:10px 8px; font-size:12.5px; }
  .policy-table th:first-child, .policy-table td:first-child{ padding-left:8px; }
  .policy-table th:last-child, .policy-table td:last-child{ padding-right:8px; }
  .policy-table tbody th{ width:auto; font-size:12.5px; }
}

/* ── 관리자: 정책 관리 ─────────────────────────────────────────────── */
.policy-watch-note{ padding:0 0 14px; }
.policy-cand-filter{ padding-bottom:14px; }
.policy-empty{ padding:40px 0; }
.policy-admin-section{ padding-top:26px; }
.policy-editor-slot{ scroll-margin-top:calc(var(--hdr-h) + 16px); }
.policy-editor{ margin:22px 0 8px; }
.policy-editor .policy-field{ padding-top:12px; }
.policy-editor textarea{
  display:block; width:100%; padding:8px 10px; background:var(--bg); border:1px solid var(--line); border-radius:8px;
  font-family:var(--sans); font-size:13px; line-height:1.5; color:var(--ink); outline:none; resize:vertical;
  transition:border-color var(--ease);
}
.policy-editor textarea:focus, .policy-edit-table input:focus{ border-color:var(--ink); }
.policy-narrow{ flex:0 0 120px; min-width:100px; }
.policy-slug{ flex:0 1 260px; }
.policy-check{ display:flex; align-items:center; gap:6px; height:38px; font-size:13px; color:var(--ink-2); white-space:nowrap; }
.policy-grid-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:16px 0 8px; }
.policy-grid-head > label{ font-family:var(--mono); font-size:10px; letter-spacing:0.12em; color:var(--micro); }
.policy-grid-tools{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.policy-tool-label{ font-size:12px; color:var(--muted); }
.policy-grid-tools select{ height:30px; padding:0 8px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); font:12px var(--sans); }
.policy-edit-table{ min-width:640px; }
.policy-edit-table th, .policy-edit-table td{ position:relative; padding:5px 4px; background:transparent; border-bottom:0; vertical-align:top; text-align:left; }
.policy-edit-table th:first-child, .policy-edit-table td:first-child{ padding-left:0; }
.policy-edit-table th:last-child, .policy-edit-table td:last-child{ width:34px; padding-right:0; text-align:center; }
.policy-edit-table input{
  width:100%; height:34px; padding:0 30px 0 10px; border:1px solid var(--line); border-radius:8px;
  background:var(--fill); font:700 13px var(--sans); color:var(--ink); outline:none;
}
.policy-edit-table textarea{ min-height:56px; }
.policy-x{ width:24px; height:24px; padding:0; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--muted); font-size:14px; line-height:1; }
.policy-x:hover{ color:var(--warn); border-color:var(--warn); }
.policy-edit-table th .policy-x{ position:absolute; right:10px; top:10px; }
.policy-editor-actions{ display:flex; gap:6px; padding-top:14px; }
.policy-cands{ display:grid; gap:10px; }
.policy-cand{ padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.policy-cand-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.policy-cand-title{ display:inline-block; margin-top:8px; font-size:15px; font-weight:800; color:var(--ink); }
.policy-cand-title:hover{ color:var(--accent); }
.policy-cand-excerpt{ margin-top:6px; font-size:13px; line-height:1.6; color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.policy-diff{ margin-top:8px; }
.policy-diff summary{ cursor:pointer; font-size:12px; font-weight:700; color:var(--accent); }
.policy-diff pre{ margin:8px 0 0; max-height:320px; overflow:auto; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--bg); font:12px/1.6 var(--mono); white-space:pre-wrap; word-break:break-word; }
.policy-diff .add{ color:var(--ok); }
.policy-diff .del{ color:var(--warn); text-decoration:line-through; }
.policy-cand-actions{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:12px; }
.policy-handled{ font-size:12px; color:var(--muted); }
.policy-rel.hi{ color:var(--on-accent, #fff); background:var(--accent); }
.policy-rel.mid{ color:var(--accent); }
.policy-rel.lo{ color:var(--muted); }
.policy-cand-ai{ margin-top:6px; font-size:12px; color:var(--muted); }
.policy-cand-ai.fail{ color:var(--warn); }
.policy-src-error{ max-width:280px; color:var(--warn); white-space:normal; }
.policy-source-form{ margin-top:18px; }

/* ── 수익 ───────────────────────────────────────────────────────────── */
.revenue-layout{ display:grid; grid-template-columns:212px minmax(0,1fr); gap:24px; align-items:start; }
.revenue-nav{ position:sticky; top:calc(var(--hdr-h) + 12px); display:flex; flex-direction:column; gap:2px; padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.revenue-nav-head{ padding:12px 10px 6px; font-family:var(--mono); font-size:10px; letter-spacing:0.1em; color:var(--micro); }
.revenue-nav-item{ display:flex; align-items:center; gap:6px; padding:8px 10px; border-radius:8px; font-size:13px; font-weight:600; color:var(--ink-2); transition:background var(--ease), color var(--ease); }
.revenue-nav-item:hover{ background:var(--hover); color:var(--ink); }
.revenue-nav-item.on{ background:var(--ink); color:var(--on-accent); }
.revenue-nav-item.faded{ color:var(--micro); }
.revenue-nav-item.faded.on{ color:var(--on-accent); }
.revenue-dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--warn); }
.revenue-body{ min-width:0; }
.revenue-head{ padding-bottom:16px; }
.revenue-head h1{ font-size:26px; }
.revenue-toolbar{ display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--surface); margin-bottom:16px; }
.revenue-field{ display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--muted); }
.revenue-field > span{ font-family:var(--mono); font-size:10px; letter-spacing:0.1em; color:var(--micro); }
.revenue-field input, .revenue-field select{ height:34px; min-width:120px; padding:0 10px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); font:13px var(--sans); outline:none; }
.revenue-field input:focus, .revenue-field select:focus{ border-color:var(--ink); }
.revenue-check{ display:flex; align-items:center; gap:6px; height:34px; font-size:12.5px; color:var(--ink-2); white-space:nowrap; }
.revenue-warning{ display:flex; align-items:center; gap:8px; padding:10px 14px; margin-bottom:16px; border:1px solid var(--warn-line); border-radius:10px; background:var(--warn-bg); color:var(--warn-ink); font-size:12.5px; }
.revenue-kpi{ gap:14px; padding-bottom:18px; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); }
.revenue-kpi .stat{ padding:16px; }
.revenue-kpi .stat .v{ font-family:var(--sans); font-size:22px; letter-spacing:-0.02em; }
.revenue-kpi .revenue-name{ font-size:16px; line-height:1.35; }
.revenue-muted{ opacity:.55; }
.revenue-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; padding-bottom:18px; }
.revenue-grid.one{ grid-template-columns:1fr; }
.revenue-grid > *{ min-width:0; }
.revenue-panel{ padding:18px 20px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.revenue-panel h2{ font-size:14px; font-weight:800; padding-bottom:14px; }
.revenue-table-panel{ padding:16px 18px; }
.revenue-bars{ display:flex; flex-direction:column; gap:9px; }
.revenue-bar-row{ display:grid; grid-template-columns:minmax(90px,150px) 1fr auto; align-items:center; gap:10px; font-size:12.5px; }
.revenue-bar-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2); }
.revenue-bar{ height:8px; border-radius:4px; background:var(--fill); overflow:hidden; }
.revenue-bar i{ display:block; height:100%; background:var(--accent); }
.revenue-bar-row em{ font:600 12px var(--mono); color:var(--ink-2); font-style:normal; }
.revenue-stack{ display:flex; height:14px; border-radius:7px; overflow:hidden; background:var(--fill); }
.revenue-stack i{ display:block; height:100%; }
.revenue-legend{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:6px 14px; padding-top:14px; font-size:12px; }
.revenue-legend > div{ display:flex; align-items:center; gap:6px; min-width:0; }
.revenue-legend span{ width:9px; height:9px; border-radius:3px; flex:0 0 auto; }
.revenue-legend b{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; color:var(--ink-2); }
.revenue-legend em{ font:600 11px var(--mono); color:var(--micro); font-style:normal; }
.revenue-legend .faded{ opacity:.5; }
.revenue-legend .missing b{ color:var(--warn); }
.series-1{ background:var(--s1); } .series-2{ background:var(--s2); } .series-3{ background:var(--s3); }
.series-4{ background:var(--s4); } .series-5{ background:var(--s5); } .series-6{ background:var(--s6); }
.series-7{ background:var(--s7); } .series-8{ background:var(--s8); }
.revenue-table{ min-width:760px; }
.revenue-table th, .revenue-table td{ padding:9px 10px; font-size:12.5px; text-align:right; white-space:nowrap; }
.revenue-table th:first-child, .revenue-table td:first-child{ padding-left:4px; text-align:left; }
.revenue-table th:nth-child(2), .revenue-table td:nth-child(2){ text-align:left; }
.revenue-table th:last-child, .revenue-table td:last-child{ padding-right:4px; }
.revenue-table thead th{ font-family:var(--sans); font-size:12px; letter-spacing:0; text-align:right; }
.revenue-table thead th:first-child, .revenue-table thead th:nth-child(2){ text-align:left; }
.revenue-table .name{ font-weight:600; }
.revenue-total-row td{ background:var(--fill); font-weight:800; }
.revenue-missing-col{ background:color-mix(in srgb, var(--warn) 10%, transparent); }
.revenue-title{ max-width:320px; overflow:hidden; text-overflow:ellipsis; text-align:left !important; }
.revenue-guide-table th, .revenue-guide-table td{ text-align:left !important; white-space:normal; }
.revenue-none{ color:var(--warn); }
.revenue-empty{ padding:28px 0; text-align:center; color:var(--muted); font-size:13px; }
@media (max-width:1100px){
  .revenue-layout{ grid-template-columns:1fr; }
  .revenue-nav{ position:static; flex-direction:row; flex-wrap:wrap; }
  .revenue-nav-head{ width:100%; padding:6px 4px 2px; }
  .revenue-grid{ grid-template-columns:1fr; }
}
.revenue-upload-table th, .revenue-upload-table td{ text-align:left !important; white-space:normal; }
.revenue-file-name{ max-width:320px; overflow-wrap:anywhere; }
.revenue-none-soft{ color:var(--micro); }
.revenue-picked td{ background:color-mix(in srgb, var(--accent) 5%, transparent); }
.revenue-job{ margin-bottom:16px; }
.revenue-job.done{ border-color:var(--ok); }
.revenue-job.failed{ border-color:var(--warn); }
.revenue-job-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.revenue-job-head h2{ padding-bottom:0; }
.revenue-job-current{ font-size:12.5px; color:var(--muted); }
.revenue-progress{ height:8px; margin:12px 0 0; border-radius:4px; background:var(--fill); overflow:hidden; }
.revenue-progress i{ display:block; height:100%; background:var(--accent); transition:width .3s ease; }
.revenue-job-log{ max-height:220px; margin:12px 0 0; padding:10px 12px; overflow:auto; border:1px solid var(--line); border-radius:8px; background:var(--bg); font:12px/1.7 var(--mono); white-space:pre-wrap; word-break:break-word; }
/* ── Toast ──────────────────────────────────────────────────────────── */
#toast{
  position:fixed; left:50%; bottom:32px; transform:translateX(-50%) translateY(12px);
  background:var(--ink); color:var(--on-accent); border-radius:999px; padding:11px 22px;
  font-family:var(--mono); font-size:12px; opacity:0; pointer-events:none;
  transition:all var(--ease); z-index:60; max-width:min(90vw, 720px); text-align:center;
}
#toast.on{ opacity:1; transform:translateX(-50%); }


/* ── 대시보드 (로그인 첫 화면) ──────────────────────────────────────── */
.dash-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-bottom:22px; }
.dash-head h1{ font-size:24px; font-weight:800; letter-spacing:-0.3px; }
.dash-sub{ margin-top:4px; font-size:13px; color:var(--micro); }
.dash-sub b{ color:var(--muted); font-weight:600; }
.live-pill{
  display:inline-flex; align-items:center; gap:6px; background:var(--surface);
  border:1px solid var(--line); padding:6px 12px 6px 10px; border-radius:999px;
  font-size:12px; font-weight:600; color:var(--ink);
}
.live-dot{ width:7px; height:7px; border-radius:50%; background:var(--live); animation:livepulse 1.6s ease-in-out infinite; }
@keyframes livepulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(.75);} }

.sec-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:34px 0 14px; }
.sec-head.rank-filter-head{ justify-content:flex-start; align-items:center; }
.sec-head:first-of-type{ margin-top:0; }
.sec-title{ font-size:18px; font-weight:900; display:flex; align-items:center; gap:8px; }
.sec-title .bar{ width:4px; height:14px; background:var(--ink); border-radius:2px; display:inline-block; }
.sec-note{ font-size:12px; color:var(--micro); }

.dash-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.dash-grid-four{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
/* 그리드 아이템은 기본 min-width:auto 라 내용이 넓으면 칸 밖으로 삐져나간다.
   0 으로 낮춰야 좁은 화면에서 패널이 제대로 줄어든다. */
.dash-grid > *{ min-width:0; }
.dash-panel{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px 22px 22px; }
.dash-panel-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:4px; flex-wrap:wrap; }
.dash-panel-title{ min-width:0; }
.dash-total{ min-width:0; }
.dash-panel-title{ font-size:14px; font-weight:700; }
.dash-panel-title small{ display:block; font-size:11px; font-weight:400; color:var(--micro); margin-top:2px; }
.dash-total{ text-align:right; }
.dash-total .num{ font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-0.4px; }
.dash-total .lbl{ font-size:11px; color:var(--micro); }

.donut-row{ display:flex; align-items:center; gap:22px; margin-top:10px; }
.donut-wrap{ position:relative; width:172px; height:172px; flex:none; max-width:100%; }
.donut-wrap svg{ max-width:100%; height:auto; }
.donut-center{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; }
.donut-center .val{ font-size:19px; font-weight:800; letter-spacing:-0.3px; }
.donut-center .cap{ font-size:10.5px; color:var(--micro); margin-top:1px; }
.dash-grid-four .donut-row{ flex-direction:column; align-items:stretch; gap:10px; }
.dash-grid-four .donut-wrap{ width:132px; height:132px; align-self:center; }
.dash-grid-four .donut-center .val{ font-size:16px; }
.audience-bars{ display:flex; flex-direction:column; gap:9px; margin-top:16px; }
.audience-bar{ display:grid; grid-template-columns:52px minmax(0,1fr) 42px; align-items:center; gap:8px; font-size:11px; }
.audience-bar .label{ color:var(--ink-2); font-weight:700; white-space:nowrap; }
.audience-track{ height:8px; overflow:hidden; border-radius:999px; background:var(--fill); }
.audience-fill{ display:block; height:100%; min-width:0; border-radius:inherit; background:var(--accent); }
.audience-value{ text-align:right; color:var(--ink-2); font:600 10.5px var(--mono); }
.audience-empty{ min-height:132px; display:grid; place-items:center; color:var(--micro); font-size:12px; text-align:center; }
.legend{ flex:1; display:flex; flex-direction:column; gap:9px; min-width:0; }
.legend-scroll{ max-height:230px; overflow-y:auto; padding-right:6px; }
.legend-row{ display:flex; align-items:center; gap:9px; font-size:12.5px; }
.legend-dot{ width:9px; height:9px; border-radius:3px; flex:none; }
.legend-name{ flex:1; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.legend-pct{ color:var(--ink-2); font-variant-numeric:tabular-nums; font-weight:600; width:44px; text-align:right; }
.legend-val{ color:var(--micro); font-variant-numeric:tabular-nums; width:60px; text-align:right; font-size:11.5px; }

.rank-panel{ background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow-x:auto; }
.rank-head, .rank-row{ display:grid; grid-template-columns:48px minmax(240px,1fr) 100px 92px 390px 190px 74px; column-gap:12px; align-items:center; min-width:1268px; }
.rank-head{ padding:11px 20px; font-size:11px; color:var(--ink-2); background:var(--fill); font-weight:800; border-bottom:2px solid var(--line); }
.rank-head span:nth-child(n+3){ text-align:right; }
.rank-head span.rk-subs-head{ text-align:center; }
.rank-head span.rk-audience-head{ text-align:center; padding-left:0; }
.rank-row{ padding:12px 20px; border-bottom:1px solid var(--line); cursor:pointer; transition:background-color var(--ease); }
.rank-row:last-child{ border-bottom:none; }
.rank-row:hover{ background:var(--hover); }
.statistics-page .rank-head, .statistics-page .rank-row{ grid-template-columns:48px minmax(240px,1fr) 100px 112px 92px 390px 190px 74px; min-width:1392px; }
.rk-now{ text-align:right; font-size:13px; font-weight:600; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.rk-now small{ display:block; margin-top:2px; font:10px var(--mono); color:var(--micro); white-space:nowrap; }
.rank-range-note b{ color:var(--ink-2); font-weight:700; }
.stats-schedule{ margin:-6px 0 20px; padding:0 16px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.stats-schedule summary{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 0; cursor:pointer; font-size:14px; font-weight:800; }
.stats-schedule[open] summary{ border-bottom:1px solid var(--line); }
.stats-schedule-table{ min-width:900px; }
.stats-schedule-table th, .stats-schedule-table td{ padding:10px 12px; font-size:13px; line-height:1.55; text-align:left; vertical-align:top; }
.stats-schedule-table th:first-child, .stats-schedule-table td:first-child{ padding-left:0; }
.stats-schedule-table th:last-child, .stats-schedule-table td:last-child{ text-align:left; }
.stats-schedule-table thead th{ font-family:var(--sans); letter-spacing:0; }
.stats-schedule-table tbody th{ background:transparent; border-bottom:1px solid var(--line); font-family:var(--sans); font-size:13px; font-weight:800; letter-spacing:0; white-space:nowrap; }
.stats-schedule-note{ padding:10px 0 14px; font-size:12.5px; line-height:1.65; color:var(--muted); }
.rk-num{ font-size:15px; font-weight:800; color:var(--micro); font-variant-numeric:tabular-nums; }
.rk-num.top1{ color:var(--live); }
.rk-num.top2, .rk-num.top3{ color:var(--ink); }
.rk-title-wrap{ display:flex; flex-direction:column; gap:3px; min-width:0; padding-right:12px; }
.rk-title{ font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rk-meta{ display:flex; align-items:center; gap:6px; }
.rk-chan{ font-size:10.5px; font-weight:700; color:var(--ink-2); background:var(--fill); border:1px solid var(--line); border-radius:5px; padding:1.5px 6px; }
.rk-views{ text-align:right; font-size:13.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.rk-subs{ text-align:center; font-size:12px; font-weight:700; color:var(--rise); font-variant-numeric:tabular-nums; }
.rk-audience{ min-width:0; text-align:center; }
.rk-audience-grid{ display:grid; gap:4px; }
.rk-audience-grid.age{ grid-template-columns:repeat(7, minmax(44px,1fr)); }
.rk-audience-grid.gender{ grid-template-columns:repeat(3, minmax(48px,1fr)); }
.rk-audience-item{ min-width:0; text-align:center; padding:4px 2px; border-radius:5px; background:var(--fill); }
.rk-audience-item.age-1{ background:var(--aud-age-1); }
.rk-audience-item.age-2{ background:var(--aud-age-2); }
.rk-audience-item.age-3{ background:var(--aud-age-3); }
.rk-audience-item.age-4{ background:var(--aud-age-4); }
.rk-audience-item.age-5{ background:var(--aud-age-5); }
.rk-audience-item.age-6{ background:var(--aud-age-6); }
.rk-audience-item.age-7{ background:var(--aud-age-7); }
.rk-audience-item.gender-female{ background:var(--aud-female); }
.rk-audience-item.gender-male{ background:var(--aud-male); }
.rk-audience-item.gender-other{ background:var(--aud-other); }
.rk-audience-item b{ display:block; font-size:9px; color:var(--muted); white-space:nowrap; }
.rk-audience-item span{ display:block; margin-top:2px; font:700 10px var(--mono); color:var(--ink-2); }
.rk-audience-na{ display:block; color:var(--micro); font-size:11px; text-align:center; }
.rk-move{ text-align:right; font-size:11.5px; font-weight:700; }
.rk-move.up{ color:var(--rise); }
.rk-move.down{ color:var(--fall); }
.rk-move.same{ color:var(--micro); font-weight:500; }
/* 문장이 들어가므로 flex 로 두면 <b> 하나하나가 별개 아이템이 되어 토막나 보인다.
   일반 문단으로 흘리고, 점은 인라인 마커로 붙인다. */
.foot-note{
  margin-top:10px; font-size:11.5px; color:var(--micro); padding:0 4px;
  line-height:1.7; word-break:keep-all; overflow-wrap:anywhere;
}
.foot-dot{ width:5px; height:5px; border-radius:50%; background:var(--micro);
  display:inline-block; margin-right:6px; vertical-align:middle; flex:none; }

@media (max-width:1180px){ .dash-grid-four{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:900px){ .dash-grid{ grid-template-columns:1fr; } }
@media (max-width:760px){
  .dash-head h1{ font-size:20px; }
  .donut-row{ flex-direction:column; align-items:stretch; gap:16px; }
  .donut-wrap{ align-self:center; }
  /* 좁은 화면: 패널 여백과 숫자 크기를 줄여 오른쪽이 잘리지 않게 한다 */
  .dash-panel{ padding:16px 14px 18px; }
  .dash-total{ text-align:right; }
  .dash-total .num{ font-size:17px; }
  .dash-total .lbl{ font-size:10px; }
  .dash-panel-title{ font-size:13px; }
  .legend{ gap:8px; }
  .legend-row{ gap:7px; font-size:12px; }
  .legend-pct{ width:40px; }
  .legend-val{ width:52px; font-size:11px; }
  .rank-head, .rank-row{ padding-left:14px; padding-right:14px; }
}

/* ── Responsive ─────────────────────────────────────────────────────── */
html, body{ overflow-x:hidden; }          /* 가로 스크롤 방지 */

/* 태블릿 — 사이드바/2단 구성을 1단으로 */
@media (max-width:1100px){
  .detail-grid{ grid-template-columns:minmax(0,1fr); }
  .search-layout{ grid-template-columns:minmax(0,1fr); gap:24px; }
  .filters{ position:static; }
  .filter-group{ padding-bottom:16px; }
  .filter-list{ flex-direction:row; flex-wrap:wrap; gap:6px; }
  .filter-item{ margin:0; border:1px solid var(--line); border-radius:999px; padding:6px 12px; }
}
@media (max-width:820px){
  .result{ flex-wrap:wrap; gap:14px; }
  .result .thumb{ flex:0 0 100%; }
  .result-side{ position:absolute; right:0; top:20px; }
  .result{ position:relative; }
}

/* 중간 폭에서도 메뉴와 검색·기간 행을 분리해 유지한다. */
@media (min-width:761px) and (max-width:1600px){
  :root{ --hdr-h:116px; }
  .hdr-in{ height:64px; gap:12px; }
  .wordmark-logo{ height:42px; }
  .tabs{ min-width:0; overflow-x:auto; scrollbar-width:none; }
  .tabs::-webkit-scrollbar{ height:0; }
  .hdr-right{ gap:9px; }
  .hdr-tools{ min-height:52px; }
  .hdr-search{ flex:1 1 260px; max-width:420px; }
  .period-controls{ min-width:0; overflow-x:auto; scrollbar-width:none; }
  .period-controls::-webkit-scrollbar{ height:0; }
}

@media (min-width:761px) and (max-width:1100px){
  :root{ --hdr-h:196px; }
  .hdr-in{ height:auto; flex-wrap:wrap; padding-top:8px; padding-bottom:8px; row-gap:7px; }
  .wordmark{ order:1; }
  .hdr-right{ order:2; }
  .tabs{ order:3; flex:1 1 100%; }
  .hdr-tools{ flex-wrap:wrap; }
  .hdr-search{ flex:1 1 100%; max-width:none; }
  .period-controls{ flex:1 1 100%; }
}

/* ── 모바일 (≤760px) ───────────────────────────────────────────────── */
@media (max-width:760px){
  :root{ --card-w:min(74vw, 260px); --page-pad:16px; --hdr-h:184px; }

  /* 헤더: 로고·계정 / 메뉴 / 검색 / 기간 순서로 고정한다. */
  .hdr-in{
    flex-wrap:wrap; height:auto; padding:10px var(--page-pad) 8px;
    row-gap:8px; column-gap:10px;
  }
  .wordmark{ order:1; }
  .wordmark-logo{ width:auto; height:42px; max-width:calc(100vw - 48px); }
  .hdr-right{ order:2; margin-left:auto; gap:10px; }
  .saved-btn{ padding:7px 11px; font-size:11px; }
  .hdr-link{ font-size:11px; }

  .tabs{
    order:3; flex:1 1 100%; margin-left:0; overflow-x:auto;
    scrollbar-width:none; padding-bottom:2px;
  }
  .tabs::-webkit-scrollbar{ height:0; }
  .tab{ padding:7px 13px; font-size:12px; }
  .hdr-tools{ flex-wrap:wrap; padding:8px var(--page-pad) 9px; gap:8px; }
  .hdr-search{ display:block; order:1; flex:1 1 100%; min-width:0; max-width:none; }
  .period-controls{
    order:2; flex:1 1 100%; overflow-x:auto; scrollbar-width:none; padding-bottom:2px;
  }
  .period-controls::-webkit-scrollbar{ height:0; }

  /* 기간 패널은 화면 폭에 맞춰 띄운다 */
  .date-panel{
    position:fixed; left:12px; right:12px; top:auto; width:auto;
    max-height:70vh; overflow-y:auto;
  }

  main{ padding-top:24px; padding-bottom:64px; }
  .page-head{ flex-direction:column; align-items:stretch; gap:14px; padding-bottom:20px; }
  .page-head h1{ font-size:24px; letter-spacing:-0.02em; }
  .page-sub{ font-size:13px; }
  .chips{ flex-wrap:wrap; }
  .home-content-controls{
    display:grid; grid-template-columns:auto auto repeat(3, minmax(0,1fr));
    align-items:center; width:100%; gap:4px;
  }
  .home-content-controls .chip{ padding:8px 9px; font-size:11px; }
  .home-content-controls .channel-filter-select{
    width:100%; min-width:0; max-width:none; height:32px;
    padding:0 18px 0 6px; font-size:11px; text-overflow:ellipsis;
  }

  /* 대시보드 제목이 채널 선택 영역에 눌려 한 글자씩 세로로 쌓이지 않게 분리한다. */
  .audience-filter-head{ flex-direction:column; align-items:stretch; }
  .audience-filter-head .sec-title{
    flex:none; min-width:0; white-space:nowrap; word-break:keep-all;
  }
  .audience-filter-head .chips{ width:100%; min-width:0; }
  .audience-filter-head .channel-filter-select{
    flex:1 1 180px; width:auto; min-width:0; max-width:none;
  }

  /* 통계 조회 범위는 2열 + 전체 폭 1열로 배치해 마지막 드롭다운 잘림을 막는다. */
  .stats-scope-filters{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    flex:1 1 100%; width:100%; min-width:0; gap:8px;
  }
  .stats-scope-filters .channel-filter-select{
    width:100%; min-width:0; max-width:none;
  }
  .stats-scope-filters .channel-filter-select:last-child{ grid-column:1 / -1; }

  .row{ padding-top:28px; }
  .row-head{ gap:10px; padding-bottom:14px; }
  .row-head h2{ font-size:17px; }
  .row-nav{ display:none; }               /* 손가락으로 밀면 되므로 화살표는 숨김 */
  .track{ gap:14px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
  .track .card{ scroll-snap-align:start; }

  .grid{ grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:16px; }
  .channel-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; }
  .channel-card{ padding:11px 4px 10px; border-radius:10px; }
  .channel-thumb{ width:min(64px, 88%); margin-bottom:9px; }
  .channel-award{ top:4px; left:4px; width:18px; border-radius:2px; }
  .channel-filter-stack{ width:100%; }
  .channel-card h2{ font-size:11.5px; line-height:1.35; }
  .channel-subs{ margin-top:4px; font-size:9px; white-space:nowrap; }
  .channel-subs-change{ display:block; margin:1px 0 0; }
  .channel-latest{ margin-top:3px; flex-direction:column; gap:0; font-size:8.5px; line-height:1.3; white-space:nowrap; }
  .card-title{ font-size:14px; }
  .card-ch, .card-num{ font-size:11px; }

  /* 상세 */
  .player{ border-radius:10px; }
  .detail-grid h1{ font-size:21px; margin-top:10px; }
  .detail-top{ padding-top:16px; }
  .channel-bar{ flex-wrap:wrap; gap:12px; padding:16px 0; }
  .channel-bar .save-pill{ width:100%; }
  .desc{ font-size:13px; margin-top:18px; }
  .comments{ margin-top:28px; }
  .comment-form{ flex-wrap:wrap; }
  .comment-form button{ width:100%; }
  .next .t{ flex:0 0 104px; }

  /* 관리자 — 표는 가로 스크롤, 폼은 세로로 */
  .admin-nav{ overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; padding-bottom:18px; }
  .admin-nav::-webkit-scrollbar{ height:0; }
  .admin-nav .chip{ flex:0 0 auto; }
  .stat-grid{ grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:12px; padding-bottom:24px; }
  .stat{ padding:14px; }
  .stat .v{ font-size:24px; }
  .statistics-page .stat .k{ font-size:18px; }
  .statistics-page .stat .v{ font-size:18px; }
  .statistics-page .stat .d{ font-size:12.5px; }
  .form-card{ padding:16px; }
  .form-row{ flex-direction:column; align-items:stretch; }
  .field{ min-width:0; }
  /* 표: 글자·여백을 화면 폭에 맞춰 줄여 한 화면에 최대한 담는다.
     그래도 넘치는 넓은 표(통계 8열 등)는 가로 스크롤로 넘긴다. */
  .table-wrap{ -webkit-overflow-scrolling:touch; }
  table{ min-width:520px; }
  th{ font-size:9px; letter-spacing:0.06em; padding:0 7px 8px; }
  td{ font-size:11.5px; padding:10px 7px; }
  td .sub{ font-size:10px; margin-top:2px; }
  td .name{ font-size:12px; }
  .mini{ padding:5px 9px; font-size:11px; }
  .mini + .mini{ margin-left:4px; }
  .tag-input{ height:28px; font-size:11px; }
  .state{ font-size:10px; }
  .err{ font-size:10px; }

  #toast{ left:12px; right:12px; transform:translateY(12px); max-width:none; }
  #toast.on{ transform:none; }
}

/* 아주 좁은 화면 — 메뉴는 지우지 않고 더 압축한다 */
@media (max-width:400px){
  :root{ --card-w:82vw; --page-pad:12px; }
  .grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .wordmark-logo{ width:auto; height:36px; max-width:calc(100vw - 32px); }
  .hdr-right{ gap:8px; }
  .saved-btn{ padding:6px 9px; }
  .saved-btn, .hdr-link{ font-size:10px; }
  .page-head h1{ font-size:21px; }
  .dash-panel{ padding:14px 12px 16px; }
  .dash-total .num{ font-size:16px; }
  .legend-row{ gap:6px; font-size:11.5px; }
  .legend-pct{ width:36px; font-size:11px; }
  .legend-val{ width:46px; font-size:10.5px; }
  table{ min-width:460px; }
  th{ font-size:8.5px; padding:0 5px 7px; }
  td{ font-size:11px; padding:9px 5px; }
  td .name{ font-size:11.5px; }
  td .sub{ font-size:9.5px; }
}