/* ============================================================
   lazytube — 공통 디자인 (후보 C · 데이터 대시보드)
   색상 규약(의미 색상)은 docs/00_README.md 표와 정확히 일치시킨다.
   KPI 타일의 톤 색상은 "장식용 액센트"이며 배지 의미색과 별개다.
   ============================================================ */

:root {
  /* Primary / 배경 / 경계 */
  --c-primary: #1E2761;
  --c-primary-2: #2b357e;
  --c-primary-700: #171d4d;
  --c-primary-800: #141942;
  --c-bg: #F4F5F8;
  --c-card: #FFFFFF;
  --c-border: #E7EAF1;

  /* 활성·상시 (teal) */
  --c-teal: #0E9F87;
  --c-teal-soft: #E4F4F0;

  /* 이탈·라이브 (red) */
  --c-red: #D64545;
  --c-red-soft: #FAE9E9;

  /* 캠페인 (amber) */
  --c-amber: #B6820F;
  --c-amber-soft: #F7EFD9;

  /* 사실 배지 (blue) */
  --c-blue: #2F6FD0;
  --c-blue-soft: #E7F0FB;

  /* 단발·중립 (gray) */
  --c-gray: #9498A6;
  --c-gray-soft: #EEEFF2;

  /* 강조 (ice) */
  --c-ice: #CADCFC;

  --text-body: #181A22;
  --text-muted: #565C6B;
  --text-faint: #767C8B;

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 16px;

  --shadow-xs: 0 1px 2px rgba(30, 39, 97, 0.05);
  --shadow-card: 0 1px 3px rgba(30, 39, 97, 0.05), 0 8px 24px rgba(30, 39, 97, 0.07);
  --shadow-hover: 0 2px 6px rgba(30, 39, 97, 0.06), 0 18px 40px rgba(30, 39, 97, 0.12);
  --shadow-nav: 0 6px 20px rgba(20, 25, 66, 0.18);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--c-bg);
  color: var(--text-body);
  font-family: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo",
    "Malgun Gothic", system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.011em;
}

h1, h2, h3, h4, h5, h6 { letter-spacing: -0.02em; }
a { transition: color 0.15s var(--ease); }
::selection { background: var(--c-ice); color: var(--c-primary); }
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ---------- 상단 내비게이션 ---------- */
.app-navbar {
  background: linear-gradient(90deg, var(--c-primary), var(--c-primary-2));
  box-shadow: var(--shadow-nav);
  padding-block: 0.55rem;
}
.app-navbar .navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
}
.app-navbar .navbar-brand .mark { width: 30px; height: 30px; flex-shrink: 0; display: block; }
.app-navbar .navbar-brand b { color: var(--c-ice); font-weight: 800; }
.app-navbar .nav-link {
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
  font-size: 0.92rem;
  padding: 0.5rem 0.85rem;
  border-radius: 9px;
  transition: color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.app-navbar .nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.10); }
.app-navbar .nav-link.active { color: #fff; background: rgba(255, 255, 255, 0.16); font-weight: 600; }
.app-navbar .navbar-toggler { border-color: rgba(255, 255, 255, 0.25); }
.app-navbar .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(202, 220, 252, 0.35); }

/* ---------- 콘텐츠 / 푸터 ---------- */
.app-content { flex: 1 0 auto; padding-block: 1.75rem 3.5rem; }
.app-footer {
  background: #fff;
  border-top: 1px solid var(--c-border);
  color: var(--text-muted);
  font-size: 0.85rem;
  padding-block: 1.5rem;
}

/* 페이지 헤더 */
.page-head h1 { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.03em; }
.page-head p { color: var(--text-muted); font-size: 0.94rem; margin: 0.35rem 0 0; }
.section-title { color: var(--c-primary); font-weight: 700; letter-spacing: -0.02em; }

/* ---------- 카드 ---------- */
.ad2-card {
  /* stretched-link 기준: 카드 전체를 이 카드 범위로 클릭 가능하게 하려면 필수.
     빠지면 오버레이가 페이지 전체로 퍼져 카드 클릭이 상세로 넘어가지 않는다. */
  position: relative;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.ad2-card:has(a):hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: color-mix(in srgb, var(--c-primary) 22%, var(--c-border));
}

/* ---------- KPI 카드 ---------- */
.ad2-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ad2-kpi {
  display: block;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow-card);
  color: inherit; text-decoration: none;
  transition: border-color 0.12s var(--ease), box-shadow 0.12s var(--ease), transform 0.12s var(--ease);
}
a.ad2-kpi:hover {
  border-color: var(--c-primary);
  box-shadow: 0 4px 10px rgba(30, 39, 97, 0.08), 0 12px 32px rgba(30, 39, 97, 0.10);
  transform: translateY(-2px);
}
a.ad2-kpi:hover .ad2-kpi__l { color: var(--c-primary); }
.ad2-kpi__ico {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: grid; place-items: center;
  margin-bottom: 16px;
}
.ad2-kpi__ico svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.ad2-kpi__v { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--text-body); }
.ad2-kpi__l { font-size: 0.88rem; color: var(--text-muted); margin-top: 7px; }
.ad2-kpi__d { font-size: 0.8rem; font-weight: 600; margin-top: 9px; color: var(--text-faint); }
.i-blue  { background: var(--c-blue-soft);  color: var(--c-blue); }
.i-teal  { background: var(--c-teal-soft);  color: var(--c-teal); }
.i-red   { background: var(--c-red-soft);   color: var(--c-red); }
.i-amber { background: var(--c-amber-soft); color: var(--c-amber); }

/* 인라인 라인 아이콘 (패널 제목·시청자수 등) — KPI 아이콘과 동일한 스트로크 규약 */
.ad2-hico {
  width: 18px; height: 18px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--text-faint); vertical-align: -3px; margin-right: 8px;
}
.ad2-iico {
  width: 14px; height: 14px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -2px; opacity: 0.7;
}
/* 순위 번호(메달 이모지 대체) — 상위 3위 강조 */
.ad2-rank { width: 1.9rem; text-align: center; font-weight: 700; color: var(--text-faint); }
.ad2-rank--top { color: var(--c-primary); }

/* ---------- 패널 (목록/요약 컨테이너) ---------- */
.ad2-panel {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.ad2-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--c-border);
}
.ad2-panel__head h2 { font-size: 1.05rem; font-weight: 700; margin: 0; }
.ad2-panel__head a { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; text-decoration: none; }
.ad2-panel__head a:hover { color: var(--c-primary); }
.ad2-panel__body { padding: 6px 0; }

/* 채널 행 */
.ad2-crow {
  /* 3번째(라이브 배지) 컬럼은 고정 폭으로 예약해, 배지 유무와 무관하게
     2번째(총 조회수) 컬럼이 항상 같은 위치에 오게 한다(정렬 어긋남 방지). */
  display: grid; grid-template-columns: 1.8fr 1fr 4.5rem;
  gap: 16px; align-items: center; padding: 15px 22px;
  transition: background 0.12s var(--ease); text-decoration: none; color: inherit;
}
.ad2-crow + .ad2-crow { border-top: 1px solid var(--c-border); }
.ad2-crow:hover { background: #F7F9FC; }
.ad2-crow__ch { display: flex; align-items: center; gap: 13px; min-width: 0; }
.ad2-avatar {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  object-fit: cover; background: var(--c-gray-soft);
}
.ad2-crow__nm { font-weight: 700; font-size: 1rem; color: var(--c-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad2-crow__hd { font-size: 0.82rem; color: var(--text-muted); margin-top: 1px; }
.ad2-bar { height: 7px; border-radius: 6px; background: var(--c-gray-soft); overflow: hidden; margin-bottom: 6px; }
.ad2-bar > i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--c-primary), var(--c-blue)); }
.ad2-mini__l { font-size: 0.78rem; color: var(--text-faint); }
.ad2-mini__n { font-size: 0.82rem; font-weight: 700; color: var(--text-muted); }

/* 홈 순위 미니 행 · 편성/종료 행 (이슈 40) */
.ad2-rrow { padding: 8px 22px; color: inherit; transition: background 0.12s var(--ease); }
.ad2-rrow + .ad2-rrow { border-top: 1px solid var(--c-border); }
.ad2-rrow:hover { background: #F7F9FC; }
.ad2-lrow { padding: 10px 22px; }
.ad2-lrow + .ad2-lrow { border-top: 1px solid var(--c-border); }

/* 요약 행 (관계/상태 분포) */
.ad2-srow { padding: 14px 22px; }
.ad2-srow + .ad2-srow { border-top: 1px solid var(--c-border); }
.ad2-srow__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ad2-srow__n { font-weight: 800; font-size: 1.05rem; color: var(--c-primary); }

/* ---------- stat (숫자 + 라벨) ---------- */
.ad2-stat__value {
  font-size: 1.65rem; font-weight: 700; line-height: 1.1;
  color: var(--c-primary); letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
.ad2-stat__label { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.15rem; }

/* 채널 상세 지표 — 낱개 숫자 나열 대신, 구분되는 타일 그리드로 가독성 확보(이슈 03) */
.ad2-statgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 0.75rem;
}
.ad2-statgrid .ad2-stat {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.95rem;
  text-align: center;
}
.ad2-statgrid .ad2-stat__value { font-size: 1.45rem; }
.ad2-statgrid .ad2-stat__label { margin-top: 0.25rem; }

/* ---------- 배지 ---------- */
.ad2-badge {
  display: inline-flex; align-items: center; gap: 0.3em;
  font-size: 0.74rem; font-weight: 600; line-height: 1;
  padding: 0.42em 0.72em; border-radius: 999px; white-space: nowrap;
  letter-spacing: 0.01em;
}
.ad2-badge--solid-teal  { background: var(--c-teal);  color: #fff; }
.ad2-badge--solid-amber { background: var(--c-amber); color: #fff; }
.ad2-badge--solid-blue  { background: var(--c-blue);  color: #fff; }
.ad2-badge--solid-red   { background: var(--c-red);   color: #fff; }
.ad2-badge--solid-gray  { background: var(--c-gray);  color: #fff; }
.ad2-badge--soft-teal   { background: var(--c-teal-soft);  color: var(--c-teal); }
.ad2-badge--soft-red    { background: var(--c-red-soft);   color: var(--c-red); }
.ad2-badge--soft-amber  { background: var(--c-amber-soft); color: var(--c-amber); }
.ad2-badge--soft-blue   { background: var(--c-blue-soft);  color: var(--c-blue); }
.ad2-badge--soft-gray   { background: var(--c-gray-soft);  color: #5b6072; }
.ad2-badge--live {
  background: var(--c-teal); color: #fff;
  animation: ad2-live-pulse 2s var(--ease) infinite;
}
.ad2-badge--live .dot { font-size: 0.7em; line-height: 1; color: #fff; }
@keyframes ad2-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(14, 159, 135, 0.45); }
  70%  { box-shadow: 0 0 0 6px rgba(14, 159, 135, 0); }
  100% { box-shadow: 0 0 0 0 rgba(14, 159, 135, 0); }
}
@media (prefers-reduced-motion: reduce) { .ad2-badge--live { animation: none; } }

/* ---------- filter pill ---------- */
.ad2-pill {
  display: inline-flex; align-items: center; gap: 0.35em;
  font-size: 0.85rem; font-weight: 600;
  padding: 0.45em 0.95em; border-radius: 999px;
  border: 1px solid var(--c-border); background: #fff; color: var(--text-muted);
  text-decoration: none; cursor: pointer;
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease),
    color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.ad2-pill:hover { border-color: var(--c-primary); color: var(--c-primary); box-shadow: 0 2px 8px rgba(30, 39, 97, 0.08); }
.ad2-pill.active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

/* ---------- tab bar ---------- */
.ad2-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--c-border); }
.ad2-tabs a {
  padding: 0.65rem 1.05rem; font-weight: 600; color: var(--text-muted);
  text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.ad2-tabs a:hover { color: var(--c-primary); border-bottom-color: var(--c-border); }
.ad2-tabs a.active { color: var(--c-primary); border-bottom-color: var(--c-primary); }

/* 실시간 동접 값 앞 눈 아이콘(이모지 대신 인라인 SVG — 플랫폼 렌더 일관성). */
.rank-eye { vertical-align: -2px; opacity: 0.5; margin-right: 1px; }

/* 섹션별 더보기: 기본은 상위 20행만 노출하고, 더보기로 최대 100행까지 스크롤 영역에서 펼친다. */
.rank-list { position: relative; }
/* 접힘: 초과 행(21번째~) 숨김 — 자연 높이로 20행만 노출. */
.rank-list[data-collapsed="true"] .rank-row-extra { display: none; }
/* 펼침: 전체 행 노출 + 스크롤 영역(최대 100행을 스크롤로 열람). */
.rank-list[data-collapsed="false"] .rank-scroll { max-height: 1200px; overflow-y: auto; }
.rank-more-wrap { text-align: center; margin-top: 0.6rem; }
.rank-more {
  border: 1px solid var(--c-border); background: var(--c-card, #fff); color: var(--text-muted);
  font-weight: 600; font-size: 0.85rem; padding: 0.35rem 1.1rem; border-radius: 999px;
  cursor: pointer; transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.rank-more:hover { color: var(--c-primary); border-color: var(--c-primary); }
.rank-more-count { opacity: 0.7; font-weight: 500; }

/* ---------- 순위 페이지: 세로 분할(데스크톱) / 탭(모바일) ---------- */
/* 숨은 라디오로 모바일 탭 상태를 관리한다(JS 불필요). 라디오·탭바·섹션은 형제 관계. */
.rank-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* 탭 바 라벨을 ad2-tabs 링크와 동일하게 보이도록(라벨은 <a> 가 아니므로 명시). */
.rank-tabs .rank-tab {
  padding: 0.65rem 1.05rem; font-weight: 600; color: var(--text-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.rank-tabs .rank-tab:hover { color: var(--c-primary); border-bottom-color: var(--c-border); }

/* 모바일(<992px): 활성 섹션 1개만 노출, 나머지 숨김. 활성 탭 라벨 강조. */
.rank-section { display: none; }
#rt-subscribers:checked ~ .rank-sections #sec-subscribers,
#rt-live:checked ~ .rank-sections #sec-live,
#rt-peak:checked ~ .rank-sections #sec-peak { display: block; }
#rt-subscribers:checked ~ .rank-tabs .rank-tab[for="rt-subscribers"],
#rt-live:checked ~ .rank-tabs .rank-tab[for="rt-live"],
#rt-peak:checked ~ .rank-tabs .rank-tab[for="rt-peak"] {
  color: var(--c-primary); border-bottom-color: var(--c-primary);
}

/* 데스크톱(≥992px): 탭 바 숨김, 세 섹션을 가로 3열로 나란히. */
@media (min-width: 992px) {
  .rank-tabs { display: none; }
  .rank-sections { display: flex; gap: 1.25rem; align-items: flex-start; }
  .rank-section { display: block; flex: 1 1 0; min-width: 0; margin: 0; }
  /* 열 폭이 좁으므로 보조 컬럼(총 조회수·방송 수·구독자·라이브 방송)은 접는다. */
  .rank-sections .rank-extra { display: none !important; }
  /* 안내문을 한 줄로 말줄임 → 세 열의 표 상단 정렬.
     말줄임은 안쪽 span 이 담당한다(바깥 p 는 overflow:visible 이라 아래 툴팁이 잘리지 않음). */
  .rank-sections .rank-note { position: relative; cursor: help; }
  .rank-sections .rank-note__txt {
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* 커서를 올리면 잘린 전체 문구를 커스텀 툴팁으로 표시(레이아웃 밀림 없음, 오버레이). */
  .rank-sections .rank-note:hover::after {
    content: attr(data-note);
    position: absolute; left: 0; top: 100%; z-index: 20;
    width: max-content; max-width: 100%;
    margin-top: 0.35rem; padding: 0.55rem 0.7rem;
    white-space: normal; font-size: 0.8rem; line-height: 1.45; color: #fff;
    background: var(--c-text, #1f2937); border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  }
}

/* ---------- empty state ---------- */
.ad2-empty { text-align: center; padding: 3.5rem 1rem; color: var(--text-muted); }
.ad2-empty__icon { font-size: 2.75rem; opacity: 0.4; }
.ad2-empty__icon svg {
  width: 44px; height: 44px; opacity: 1;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; color: var(--text-faint);
}

/* ---------- 버튼 ---------- */
.btn {
  --bs-btn-border-radius: 10px;
  --bs-btn-font-weight: 600;
  transition: transform 0.12s var(--ease), box-shadow 0.15s var(--ease),
    background-color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  --bs-btn-bg: var(--c-primary);
  --bs-btn-border-color: var(--c-primary);
  --bs-btn-hover-bg: var(--c-primary-700);
  --bs-btn-hover-border-color: var(--c-primary-700);
  --bs-btn-active-bg: var(--c-primary-800);
  --bs-btn-active-border-color: var(--c-primary-800);
  box-shadow: 0 4px 14px rgba(30, 39, 97, 0.22);
}
.btn-light { --bs-btn-color: var(--c-primary); --bs-btn-hover-color: var(--c-primary); font-weight: 700; }

/* ---------- 맨 위로 가기 버튼 ---------- */
.back-to-top {
  position: fixed; right: 1.5rem; bottom: 1.5rem;
  width: 46px; height: 46px; border-radius: 50%; border: none;
  background: var(--c-primary); color: #fff; font-size: 1.2rem; line-height: 1;
  box-shadow: 0 6px 18px rgba(30, 39, 97, 0.32); cursor: pointer;
  display: none; align-items: center; justify-content: center; z-index: 1050;
  opacity: 0; transform: translateY(8px) scale(0.9);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), background-color 0.15s var(--ease);
}
.back-to-top.is-visible { display: flex; opacity: 1; transform: translateY(0) scale(1); }
.back-to-top:hover { background: var(--c-primary-700); }
.back-to-top:focus-visible { outline: 3px solid var(--c-ice); outline-offset: 2px; }

/* ---------- 채널 탐색 카드 (이슈 02) ---------- */
.ad2-chcard .ad2-stat__value { font-size: 1.2rem; }
.ad2-chcard .ad2-stat__label { font-size: 0.74rem; }
.ad2-chcard .ad2-recent { min-height: 1.5rem; }
/* stretched-link 위에서도 최근 광고 배지에 마우스가 얹히면 툴팁이 뜨도록 */
.ad2-chcard .ad2-recent .ad2-badge { position: relative; z-index: 2; }

/* ---------- 광고 제품(브랜드) 카드 (이슈 25) ---------- */
/* 제품명 — 한 줄 …로 잘리면 긴 한글 이름을 읽을 수 없다. 최대 2줄까지 보이도록
   line-clamp 하고, 카드 제목으로서 또렷하게 읽히도록 크기·굵기·자간을 키운다. */
.ad2-brandcard__title {
  font-size: 1.05rem; font-weight: 700; line-height: 1.35;
  letter-spacing: -0.01em; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  /* 2줄 높이를 확보해 이름 길이가 달라도 카드 안 지표 줄이 나란히 정렬된다. */
  min-height: calc(1.05rem * 1.35 * 2);
}

/* 제품 아바타 — 실제 이미지가 없으므로 제품명 첫 글자를 색상 타일로 보여
   카드마다 시각적 앵커를 준다. 색상(--0~--5)은 PHP 에서 제품명 해시로 고정 선택. */
.ad2-brandcard__avatar {
  flex-shrink: 0;
  width: 2.75rem; height: 2.75rem;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.2rem; line-height: 1;
  letter-spacing: -0.02em;
}
.ad2-brandcard__avatar--0 { background: var(--c-primary-800); color: #fff; }
.ad2-brandcard__avatar--1 { background: var(--c-teal-soft);  color: #0B7D6A; }
.ad2-brandcard__avatar--2 { background: var(--c-blue-soft);  color: #2559A8; }
.ad2-brandcard__avatar--3 { background: var(--c-amber-soft); color: #8A6209; }
.ad2-brandcard__avatar--4 { background: var(--c-red-soft);   color: #B33636; }
.ad2-brandcard__avatar--5 { background: #EDE9FB;             color: #5A3FB0; }

/* ---------- 검수 큐 (이슈 09) ---------- */
/* 확신도 막대 — 낮을수록 붉게(low), 중간(mid), 높음(high). */
.ad2-conf { display: flex; align-items: center; gap: 0.5rem; }
.ad2-conf__bar { width: 60px; height: 7px; border-radius: 6px; background: var(--c-gray-soft); overflow: hidden; flex-shrink: 0; }
.ad2-conf__bar > i { display: block; height: 100%; border-radius: 6px; }
.ad2-conf__num { font-size: 0.85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ad2-conf--low  .ad2-conf__bar > i { background: var(--c-red); }
.ad2-conf--mid  .ad2-conf__bar > i { background: var(--c-amber); }
.ad2-conf--high .ad2-conf__bar > i { background: var(--c-teal); }
.ad2-conf--low  .ad2-conf__num { color: var(--c-red); }
.ad2-conf--mid  .ad2-conf__num { color: var(--c-amber); }
.ad2-conf--high .ad2-conf__num { color: var(--c-teal); }

/* 근거(raw_snippet) — 여러 줄 허용하되 과도하게 길면 잘라 표시. */
.ad2-review__snippet {
  font-size: 0.9rem; color: var(--c-primary-800); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* 판정 버튼 — 확정(teal) / 기각(red 아웃라인). */
.ad2-btn-confirm {
  --bs-btn-bg: var(--c-teal); --bs-btn-border-color: var(--c-teal); --bs-btn-color: #fff;
  --bs-btn-hover-bg: #0b8a75; --bs-btn-hover-border-color: #0b8a75; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #0a7d6a; --bs-btn-active-border-color: #0a7d6a;
  font-weight: 700;
}
.ad2-btn-reject {
  --bs-btn-color: var(--c-red); --bs-btn-border-color: var(--c-red);
  --bs-btn-hover-bg: var(--c-red); --bs-btn-hover-border-color: var(--c-red); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--c-red); --bs-btn-active-border-color: var(--c-red);
  font-weight: 700;
}

/* 상세 검수 패널(설명 전문 + 제품 추가) — 접히는 행. */
.ad2-review__detail > td { background: var(--c-gray-soft); border-top: 0; }
/* 영상 설명 전문 — 스크롤 박스로 넘침 처리(줄바꿈 보존). */
.ad2-review__desc {
  font-size: 0.9rem; color: var(--c-primary-800); line-height: 1.55;
  max-height: 15rem; overflow-y: auto; white-space: pre-wrap; word-break: break-word;
  background: #fff; border: 1px solid var(--c-border); border-radius: 8px; padding: 0.6rem 0.75rem;
}
/* 추가한 제품 칩 목록. */
.ad2-prod-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: #fff; border: 1px solid var(--c-teal); color: var(--c-primary-800);
  border-radius: 999px; padding: 0.15rem 0.35rem 0.15rem 0.6rem; font-size: 0.85rem;
}
.ad2-prod-chip__txt { font-weight: 600; }
.ad2-prod-chip__del {
  border: 0; background: transparent; color: var(--c-red); cursor: pointer;
  line-height: 1; font-size: 1.05rem; padding: 0 0.15rem;
}
.ad2-prod-chip__del:hover { color: #fff; background: var(--c-red); border-radius: 999px; }
/* 제품 링크(이슈 21) — product_url 이 http/https 일 때 새 탭 링크(🔗). */
.ad2-prod-chip__link { line-height: 1; font-size: 0.95rem; padding: 0 0.15rem; filter: grayscale(0.15); }
.ad2-prod-chip__link:hover { filter: none; }

/* 대상 채널 관리(이슈 11) — 수집 오류(last_error, 읽기 전용) 펼침 박스. */
.ad2-target__error {
  font-size: 0.82rem; line-height: 1.5;
  max-height: 10rem; overflow-y: auto; white-space: pre-wrap; word-break: break-word;
  background: var(--c-red-soft); border-radius: 6px; padding: 0.4rem 0.55rem;
}

/* ---------- 협찬 검수 큐 (이슈 27) ---------- */
/* 영상 단위 일괄 처리 바(전체 승인/반려). */
.ad2-qbulk {
  background: var(--c-blue-soft); border: 1px solid var(--c-border);
  border-radius: 8px; padding: 0.5rem 0.75rem;
}
/* 탐지 블록(근거 스니펫 + 추출 제품) 구분. */
.ad2-qdet { border-left: 3px solid var(--c-blue); padding-left: 0.85rem; }
/* 수기 추가 제품 섹션 — 자동추출과 시각적으로 분리(상단 점선). */
.ad2-qmanual { border-top: 1px dashed var(--c-border); }
/* 제품 검수 행 — 승인/반려 결정 상태를 좌측 색 띠로 표시. */
.ad2-qprod {
  border: 1px solid var(--c-border); border-left-width: 3px; border-radius: 8px;
  padding: 0.5rem 0.6rem; margin-bottom: 0.5rem; background: #fff;
}
.ad2-qprod--approved { border-left-color: var(--c-teal); }
.ad2-qprod--rejected { border-left-color: var(--c-red); opacity: 0.72; }

/* 말머리 그룹(이슈 09 확장) — 그룹 요약 섹션을 살짝 들여 구분. */
.ad2-review__group {
  border-left: 3px solid var(--c-teal);
  padding-left: 0.85rem;
}
/* 말머리 칩을 재사용(ad2-prod-chip). 삭제 링크는 a 로도 쓰이므로 색만 맞춘다. */
a.ad2-prod-chip__del { color: var(--c-red); }

/* ---------- 반응형 ---------- */
@media (max-width: 880px) {
  .ad2-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ad2-crow { grid-template-columns: 1.4fr auto; }
  .ad2-crow__mini { display: none; }
}

/* ---------- 관리자 사이드바 쉘 (#78) ---------- */
.admin-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.admin-main { min-width: 0; }

.admin-sidebar {
  position: sticky;
  top: 5rem; /* sticky 네비(app-navbar) 아래로 고정 */
  align-self: start;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  padding: 0.75rem;
}
.admin-sidebar__home {
  display: block;
  font-weight: 700;
  color: var(--c-primary);
  text-decoration: none;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
}
.admin-sidebar__home:hover { background: var(--c-gray-soft); }
.admin-sidebar__home.active { background: var(--c-ice); }

.admin-sidebar__group { margin-top: 0.9rem; }
.admin-sidebar__title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 0 0.6rem;
  margin-bottom: 0.3rem;
}
.admin-sidebar__list { list-style: none; margin: 0; padding: 0; }
.admin-sidebar__link {
  display: block;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.92rem;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
}
.admin-sidebar__link:hover { background: var(--c-gray-soft); color: var(--c-primary); }
.admin-sidebar__link.active {
  background: var(--c-ice);
  color: var(--c-primary);
  font-weight: 600;
}

/* 관리자 홈 허브 카드 */
.admin-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.admin-hub__card {
  display: block;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  padding: 1.1rem 1.2rem;
  text-decoration: none;
  color: var(--text-body);
  transition: box-shadow 0.15s, border-color 0.15s;
}
.admin-hub__card:hover { border-color: var(--c-primary); box-shadow: var(--shadow-hover); }
.admin-hub__name { font-weight: 700; color: var(--c-primary); margin-bottom: 0.25rem; }
.admin-hub__desc { font-size: 0.86rem; color: var(--text-muted); }
.admin-hub__stat { font-size: 1.6rem; font-weight: 800; color: var(--c-primary); letter-spacing: -0.02em; }
.admin-hub__stat .u { font-size: 0.8rem; font-weight: 600; color: var(--text-faint); margin-left: 0.15rem; }

@media (max-width: 880px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; top: auto; }
  .admin-sidebar__list { display: flex; flex-wrap: wrap; gap: 0.25rem; }
  .admin-sidebar__link { font-size: 0.86rem; }
}