/* 채널 분석 전용 스타일. 공통 테마 변수(--accent 등)를 그대로 씁니다. 인라인 스타일은 쓰지 않습니다. */
:root{
  --dash-grad:linear-gradient(135deg,var(--accent-2,#ec4899),var(--accent,#7c3aed));
  --dash-card:#fff;
  --dash-up:#1a8f5f;
  --dash-down:#c9320f;
}
.dash{padding:28px 0 72px;background:
  radial-gradient(760px 320px at 8% -8%,#f6efff 0%,rgba(255,255,255,0) 60%),
  radial-gradient(680px 320px at 96% -4%,#ffe9f5 0%,rgba(255,255,255,0) 55%),var(--bg,#fff)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.head-nav .is-current{color:var(--accent-ink,#6d28d9);font-weight:700}
.dash-who{align-self:center;font-size:.88rem;color:var(--ink-3,#6b7280)}

.dash-top{display:flex;gap:20px;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;margin-bottom:18px}
.dash-title{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:.3em}
.dash-title em{font-style:normal;background:var(--dash-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.dash-state{font-size:.85rem;color:var(--ink-3,#6b7280);background:#fff;border:1px solid var(--line,#e7e8ec);border-radius:12px;padding:10px 14px;box-shadow:var(--shadow)}
.dash-state b{color:var(--ink,#15171c)}

.dash-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line,#e7e8ec);margin:10px 0 18px}
.dash-tab{border:0;background:transparent;font:inherit;font-size:.96rem;font-weight:650;color:var(--ink-3,#6b7280);padding:10px 14px;border-radius:12px 12px 0 0;cursor:pointer;border-bottom:2px solid transparent}
.dash-tab:hover{color:var(--accent-ink,#6d28d9);background:#faf7ff}
.dash-tab.is-on{color:var(--accent-ink,#6d28d9);background:#f7f1ff;border-bottom-color:var(--accent,#7c3aed)}

.dash-panel{display:none}
.dash-panel.is-on{display:block}
.panel-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:6px 0 14px}
.panel-head h2{margin:0;font-size:1.2rem}
.panel-head-sub{margin-top:34px}
.dash-msg{border-radius:12px;padding:10px 14px;font-size:.92rem;border:1px solid var(--line,#e7e8ec);background:#fff}
.dash-msg.is-bad{border-color:#f3c9bd;background:#fdf3f0;color:#8c2a0e}
.dash-msg.is-ok{border-color:#bfe6d4;background:#f1fbf6;color:#136e49}
.hint{font-size:.86rem;color:var(--ink-3,#6b7280);margin:10px 0 0}
.empty{border:1px dashed var(--line,#e7e8ec);border-radius:14px;padding:28px;text-align:center;color:var(--ink-3,#6b7280);background:#fff}

/* 카드 */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.ch-card{position:relative;border:1px solid var(--line,#e7e8ec);border-radius:16px;background:var(--dash-card);padding:16px;box-shadow:var(--shadow);cursor:pointer;transition:border-color .15s ease,transform .12s ease}
.ch-card:hover{border-color:var(--accent,#7c3aed);transform:translateY(-1px)}
.ch-card.is-on{border-color:var(--accent,#7c3aed);box-shadow:0 0 0 2px #efe6ff}
.ch-card .ch-top{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.ch-avatar{width:42px;height:42px;border-radius:50%;background:var(--dash-grad);flex:none;object-fit:cover}
.ch-name{font-weight:700;line-height:1.3}
.ch-handle{font-size:.82rem;color:var(--ink-3,#6b7280)}
.badge{display:inline-block;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:999px;background:#f3efff;color:var(--accent-ink,#6d28d9);margin-left:6px}
.badge.is-ok{background:#eafaf2;color:#136e49}
.badge.is-wait{background:#fff5e6;color:#8a5a00}
.ch-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center;border-top:1px solid var(--line,#e7e8ec);padding-top:12px}
.ch-stats b{display:block;font-size:1.05rem}
.ch-stats span{font-size:.76rem;color:var(--ink-3,#6b7280)}
.ch-actions{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.btn-mini{font-size:.8rem;padding:5px 12px;border-radius:999px;border:1px solid var(--line,#e7e8ec);background:#fff;color:var(--ink-2,#3c4149);cursor:pointer;font-family:inherit}
.btn-mini:hover{border-color:var(--accent,#7c3aed);color:var(--accent-ink,#6d28d9)}
.btn-mini.is-primary{background:var(--dash-grad);color:#fff;border-color:transparent}
.ch-add{display:flex;align-items:center;justify-content:center;border:1px dashed var(--line,#e7e8ec);border-radius:16px;color:var(--ink-3,#6b7280);min-height:150px;background:#fff}

.delta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:18px 0}
.delta{border:1px solid var(--line,#e7e8ec);border-radius:16px;background:#fff;padding:16px 18px;box-shadow:var(--shadow)}
.delta .k{font-size:.8rem;color:var(--ink-3,#6b7280)}
.delta .v{font-size:1.7rem;font-weight:800;letter-spacing:-.03em}
.up{color:var(--dash-up)}
.down{color:var(--dash-down)}

/* 차트 */
.chart-box{border:1px solid var(--line,#e7e8ec);border-radius:16px;background:#fff;padding:14px;margin:8px 0 10px;box-shadow:var(--shadow)}
.chart-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.seg{display:flex;gap:4px;flex-wrap:wrap}
.seg-btn{border:1px solid transparent;background:#f6f6f9;color:var(--ink-2,#3c4149);font:inherit;font-size:.84rem;padding:6px 12px;border-radius:999px;cursor:pointer}
.seg-btn.is-on{background:var(--dash-grad);color:#fff}
.seg-sm .seg-btn{font-size:.8rem;padding:5px 10px}
.chart svg{width:100%;height:260px;display:block}
.chart .grid-line{stroke:#eceef2;stroke-width:1}
.chart .axis-text{fill:#9aa0ab;font-size:11px}
.chart .line{fill:none;stroke:url(#dashGrad);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.chart .area{fill:url(#dashFill);opacity:.5}
.chart .dot{fill:var(--accent,#7c3aed)}
.chart .g-a{stop-color:var(--accent-2,#ec4899)}
.chart .g-b{stop-color:var(--accent,#7c3aed)}
.chart .f-a{stop-color:var(--accent-soft,#d9c7ff)}
.chart .f-b{stop-color:#ffffff}

/* 필터 */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.filters label{display:flex;flex-direction:column;gap:4px;font-size:.78rem;color:var(--ink-3,#6b7280)}
.filters select,.add-row input,.add-row select{font:inherit;font-size:.92rem;padding:8px 12px;border:1px solid var(--line,#e7e8ec);border-radius:10px;background:#fff;color:var(--ink,#15171c)}
.filters select:focus,.add-row input:focus{outline:2px solid #d9c9ff;outline-offset:1px}
.add-row{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 0}
.add-row input{flex:1;min-width:240px}

/* 영상 목록 */
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.v-card{border:1px solid var(--line,#e7e8ec);border-radius:14px;background:#fff;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.v-thumb{position:relative;aspect-ratio:16/9;background:#f1f1f4;display:block}
.v-thumb img{width:100%;height:100%;object-fit:cover}
.v-thumb .ph{display:flex;align-items:center;justify-content:center;height:100%;color:#b9bcc4;font-size:.8rem}
.v-flag{position:absolute;left:8px;top:8px;background:rgba(20,22,27,.78);color:#fff;font-size:.72rem;padding:2px 8px;border-radius:999px}
.v-mut{position:absolute;right:8px;top:8px;background:var(--dash-grad);color:#fff;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:999px}
.v-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.v-title{font-size:.9rem;font-weight:650;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.v-meta{font-size:.78rem;color:var(--ink-3,#6b7280);display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}

/* 그룹 */
.group-box{border:1px solid var(--line,#e7e8ec);border-radius:16px;background:#fff;padding:16px;margin-bottom:14px;box-shadow:var(--shadow)}
.group-box h3{margin:0 0 10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.spike-row{display:flex;gap:12px;align-items:center;border:1px solid var(--line,#e7e8ec);border-radius:14px;background:#fff;padding:12px 14px;margin-bottom:10px}
.spike-score{font-weight:800;font-size:1.1rem;background:var(--dash-grad);-webkit-background-clip:text;background-clip:text;color:transparent;min-width:56px}

.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.info-grid .delta{min-height:92px}
.dash-foot{margin-top:0;padding:18px 0;border-top:1px solid var(--line,#e7e8ec)}
.dash-foot .foot-copy{font-size:.84rem;color:var(--ink-3,#6b7280);margin:0}

@media (max-width:760px){
  .dash-tabs{overflow-x:auto;flex-wrap:nowrap}
  .dash-tab{white-space:nowrap}
  .chart svg{height:220px}
}