/* ============================================================
   report-theme.css — 광고주 보고서 디자인 통일 (미리보기 시안 기반, v6.1)
   styles.css 다음에 로드되어 보고서 관련 클래스를 덮어씀.
   문제 발생 시 index.html에서 이 파일 link 한 줄만 제거하면 원복.
   ============================================================ */

:root {
  --rt-ind: #4f46e5; --rt-pur: #9333ea; --rt-ink: #0f172a; --rt-sub: #64748b;
  --rt-line: #e8edf3; --rt-bg: #f1f5f9;
  --rt-ok: #16a34a; --rt-okbg: #dcfce7; --rt-est: #d97706; --rt-estbg: #fef3c7;
}

/* 배경 톤 통일 */
body { background: var(--rt-bg); }

/* ===== 미리보기형 섹션 제목: 보라 밑줄 제거 + 컴팩트 아이콘 ===== */
.section-line { display: none !important; }
.section-subtitle { display: block !important; font-size: 12px; color: var(--rt-sub); margin: 2px 0 14px; }
.section-title { font-size: 16px !important; font-weight: 800 !important; gap: 9px !important; margin-bottom: 12px !important; }
.section-title .icon {
  width: 32px !important; height: 32px !important; border-radius: 10px !important;
  font-size: 16px !important;
  background: linear-gradient(135deg, #eef2ff, #e0e7ff) !important;
}

/* ===== 미리보기형 카드 내부 헤더(.rt-h3) ===== */
.rt-h3 { margin: 0 0 4px; font-size: 15.5px; font-weight: 800; color: var(--rt-ink); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.rt-hic { width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #eef2ff, #e0e7ff); font-size: 16px; }
.rt-desc { color: var(--rt-sub); font-size: 12px; margin: 2px 0 14px; }

/* ===== 미리보기형 KPI ===== */
.rt-kpi { background: linear-gradient(135deg, #f8fafc, #f1f5f9); border: 1px solid #e8edf3; border-radius: 14px; padding: 15px; }
.rt-kpi-k { font-size: 12px; color: var(--rt-sub); font-weight: 700; margin-bottom: 7px; display: flex; align-items: center; flex-wrap: wrap; }
.rt-kpi-v { font-size: 27px; font-weight: 900; letter-spacing: -1px; color: var(--rt-ink); }
.rt-kpi-v small { font-size: 13px; font-weight: 700; color: var(--rt-sub); margin-left: 2px; }

/* ===== 카드: 더 둥글고 부드러운 그림자 ===== */
.card {
  border-radius: 18px !important;
  border: 1px solid var(--rt-line) !important;
  box-shadow: 0 4px 18px rgba(15,23,42,.05) !important;
  padding: 20px 22px;
}
.card:hover {
  border-color: var(--rt-line) !important;
  box-shadow: 0 6px 22px rgba(15,23,42,.08) !important;
  transform: none !important;
}

/* ===== 표 스타일 통일 ===== */
.section table { border-collapse: collapse; }
/* 전역 thead(보라 그라데이션) 제거 → 회색 헤더 글자가 보이도록 (플랫 디자인 통일) */
.section table thead,
.section table thead tr { background: none !important; }
.section table th {
  color: var(--rt-sub); font-size: 11px; font-weight: 800;
  border-bottom: 2px solid #e2e8f0; text-transform: none;
  background: none !important;
}
.section table tbody tr:hover { background: #fafbff; }
/* 보고서 전체 표 헤더 — 보라 그라데이션 제거 + 회색 글자 가독성 보장 (.card 등 .section 밖 표까지 커버) */
.report-main thead,
.report-main thead tr { background: none !important; }
.report-main table th { color: var(--rt-sub) !important; background: none !important; }
/* 표 스크롤 영역 — 약 10행만 보이고 나머지는 스크롤, 헤더 고정 */
.report-main .rt-scroll { max-height: 440px; overflow-y: auto; border: 1px solid #eef2f7; border-radius: 10px; margin-top: 18px; }
.report-main .rt-scroll table { margin-top: 0 !important; }
.report-main .rt-scroll thead th { position: sticky; top: 0; background: #fff !important; z-index: 2; box-shadow: inset 0 -2px 0 #e2e8f0; }

/* ===== 배지 유틸 (실측/추정/AI) ===== */
.badge { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; vertical-align: middle; display: inline-block; }
.b-ok  { background: var(--rt-okbg);  color: var(--rt-ok); }
.b-est { background: var(--rt-estbg); color: var(--rt-est); }
.b-ai  { background: #ede9fe;         color: #7c3aed; }

/* ===== 노트 콜아웃 ===== */
.note { font-size: 12px; color: #475569; margin-top: 22px; background: #f8fafc; border-left: 3px solid var(--rt-ind); padding: 13px 16px; border-radius: 0 9px 9px 0; line-height: 1.7; clear: both; }
.note.est { border-left-color: var(--rt-est); }
.note.ok  { border-left-color: var(--rt-ok); }

/* ===== 앵커 네비(목차): 미리보기 톤의 둥근 알약 + 상단 고정 ===== */
.anchor-nav-wrap {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rt-line);
  position: sticky; top: 0; z-index: 40;
  box-shadow: 0 2px 10px rgba(15,23,42,.04);
}
.anchor-btn {
  border-radius: 999px !important;
  font-weight: 700 !important;
  color: #475569 !important;
}
.anchor-btn:hover { background: #eef2ff !important; color: var(--rt-ind) !important; }
.anchor-btn.active { background: var(--rt-ind) !important; color: #fff !important; }

/* 섹션 스크롤 여백(고정 네비 높이만큼) */
[id^="sec-"] { scroll-margin-top: 130px; }

/* ===== 보고서 표지(광고주 정보) 카드 — 미리보기 스타일 ===== */
.report-cover {
  background: linear-gradient(120deg, #fff, #f5f3ff);
  border: 1px solid #e0e7ff; border-radius: 16px; padding: 18px 22px; margin: 16px 0;
  box-shadow: 0 4px 18px rgba(15,23,42,.05);
}
.report-cover-head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.report-cover .rc-ic { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #eef2ff, #e0e7ff); font-size: 16px; }
.report-cover .rc-title { font-size: 16px; font-weight: 900; color: #0f172a; }
.report-cover .rc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.report-cover .rc-field { background: #f8fafc; border: 1px solid #eef2f7; border-radius: 12px; padding: 12px 14px; min-width: 0; }
.report-cover .rc-k { font-size: 11px; color: #94a3b8; font-weight: 700; margin-bottom: 5px; }
.report-cover .rc-v { font-size: 15px; font-weight: 800; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-cover .rc-url { font-size: 11px; font-weight: 500; color: #64748b; }
@media (max-width: 900px) { .report-cover .rc-grid { grid-template-columns: 1fr 1fr; } }

/* 섹션 구분선 기본 폭(모바일/일반) */
.report-divider { max-width: 1200px; margin: 28px auto 14px; padding: 0 24px; }

/* ===== 보고서 레이아웃: 좌측 목차 + 본문 ===== */
.report-shell { display: block; }
.report-toc { display: none; }
.report-main { min-width: 0; }

@media (min-width: 1100px) {
  .report-shell {
    display: flex; align-items: flex-start; gap: 24px;
    max-width: 1260px; margin: 0 auto; padding: 16px 24px 0;
  }
  .report-toc {
    display: block; position: sticky; top: 96px; width: 214px; flex: none;
    background: #fff; border: 1px solid var(--rt-line); border-radius: 16px;
    padding: 12px; box-shadow: 0 6px 24px rgba(15,23,42,.06);
    max-height: calc(100vh - 120px); overflow-y: auto;
  }
  .report-toc-title { font-size: 11px; font-weight: 800; color: #94a3b8; letter-spacing: .08em; padding: 4px 10px 8px; }
  .report-toc-link {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 9px 11px; border-radius: 10px; color: #475569;
    font-size: 13px; font-weight: 700; margin-bottom: 2px; text-decoration: none;
  }
  .report-toc-link:hover { background: #eef2ff; color: var(--rt-ind); }
  .report-toc-n { width: 22px; height: 22px; border-radius: 7px; background: #eef2ff; color: var(--rt-ind); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
  .report-toc-legend { border-top: 1px solid var(--rt-line); margin: 10px 4px 2px; padding: 10px 8px 2px; font-size: 11px; color: #64748b; line-height: 2; }
  .report-main { flex: 1; min-width: 0; }
  .report-main .anchor-nav-wrap { display: none; }
  .report-main .section > .container { max-width: 100%; padding: 0; }
  .report-main .report-divider { max-width: 100%; margin: 28px 0 14px; padding: 0; }
}

/* ============================================================
   시안 색상 변수 별칭 — 컴포넌트들이 시안 그대로 var(--ok/--pur/...)를
   쓰는데 실제 앱엔 --rt-* 만 있어 색이 안 먹던 문제 해결.
   .report-main 범위로만 정의(관리자 UI 변수와 충돌 방지).
   ============================================================ */
.report-main {
  --ind: #4f46e5; --pur: #9333ea; --ink: #0f172a; --sub: #64748b;
  --line: #e8edf3; --bg: #f1f5f9;
  --ok: #16a34a; --okbg: #dcfce7; --est: #d97706; --estbg: #fef3c7;
  --red: #ef4444; --blue: #2563eb;
}

/* ============================================================
   미리보기 시안 유틸리티 클래스 (v6.2) — 시안 <style> 1:1 이식.
   .report-main 범위로 한정해 관리자 UI(.track/.note 등)와 충돌 방지.
   각 컴포넌트가 인라인 스타일 대신 이 클래스를 쓰면 시안과 픽셀 일치.
   ============================================================ */

/* 그리드 */
.report-main .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.report-main .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.report-main .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
/* 반응형: 태블릿에서 4열→2열 (모바일 폭에서 카드 깨짐·겹침 방지), 좁은 폰에서 1열 */
@media (max-width: 1024px) {
  .report-main .grid4 { grid-template-columns: repeat(2, 1fr); }
  .report-main .grid3 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .report-main .grid2, .report-main .grid3, .report-main .grid4 { grid-template-columns: 1fr; }
}

/* KPI (시안 .kpi) */
.report-main .kpi { background: linear-gradient(135deg, #f8fafc, #f1f5f9); border: 1px solid #e8edf3; border-radius: 14px; padding: 15px; }
.report-main .kpi .k { font-size: 12px; color: var(--rt-sub); font-weight: 700; margin-bottom: 7px; }
.report-main .kpi .v { font-size: 22px; font-weight: 900; letter-spacing: -1px; color: var(--rt-ink); }
.report-main .kpi .v small { font-size: 13px; font-weight: 700; color: var(--rt-sub); margin-left: 2px; }

/* 서브 카드 */
.report-main .sub-card { background: #f8fafc; border: 1px solid #eef2f7; border-radius: 13px; padding: 14px 16px; margin-top: 12px; }
.report-main .sub-card .st { font-size: 13.5px; font-weight: 800; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; color: var(--rt-ink); }

/* 점수 막대 */
.report-main .scorebar { margin: 9px 0; }
.report-main .scorebar .lbl { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 5px; }
.report-main .scorebar .lbl b { color: var(--rt-ink); }
.report-main .scorebar .lbl .w { color: #94a3b8; font-weight: 500; font-size: 11px; }
.report-main .track { height: 9px; background: #eef2f7; border-radius: 6px; overflow: hidden; }
.report-main .track > i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--rt-ind), var(--rt-pur)); }

/* 체크리스트 */
.report-main .check { font-size: 12.5px; padding: 5px 0; display: flex; gap: 9px; align-items: flex-start; }
.report-main .check .y { color: var(--rt-ok); font-weight: 900; }
.report-main .check .n { color: #ef4444; font-weight: 900; }

/* 키워드 칩 */
.report-main .kwchip { display: inline-flex; align-items: center; gap: 6px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 9px; padding: 7px 9px; margin: 4px 6px 0 0; font-size: 12.5px; font-weight: 700; }
.report-main .kwchip .rk { background: #16a34a; color: #fff; border-radius: 6px; padding: 2px 7px; font-size: 11px; }
.report-main .kwchip.warn { background: #fffbeb; border-color: #fde68a; }
.report-main .kwchip.warn .rk { background: #d97706; }
.report-main .kwchip.off { background: #f8fafc; border: 1px solid #e8edf3; color: #94a3b8; font-weight: 500; }

/* 미니 막대 / 태그 */
.report-main .minibar { height: 7px; border-radius: 5px; background: #eef2f7; overflow: hidden; display: inline-block; width: 80px; vertical-align: middle; margin-right: 6px; }
.report-main .minibar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--rt-ind), var(--rt-pur)); }
.report-main .tag2 { display: inline-block; background: #eef2ff; color: #4338ca; border-radius: 999px; padding: 4px 11px; font-size: 12px; margin: 3px 4px 0 0; font-weight: 700; }

/* 시즌 카드 / 비율 카드 */
.report-main .seasoncard { border: 1px solid #e8edf3; border-radius: 14px; padding: 14px; text-align: center; }
.report-main .seasoncard.peak { border-color: #fdba74; background: linear-gradient(135deg, #fff7ed, #ffedd5); }
.report-main .ratecard { text-align: center; border: 1px solid #e8edf3; border-radius: 13px; padding: 12px; }

/* 알약 탭 */
.report-main .pill-tabs { display: flex; gap: 6px; margin: 6px 0 14px; flex-wrap: wrap; }
.report-main .pill-tabs button { border: 1px solid var(--rt-line); background: #fff; border-radius: 999px; padding: 7px 15px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.report-main .pill-tabs button.on { background: var(--rt-ind); color: #fff; border-color: var(--rt-ind); }

/* 점수 칩 (실측/추정/중립) */
.report-main .ps { font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px; margin-left: 4px; }
.report-main .ps-g { background: var(--rt-okbg); color: var(--rt-ok); }
.report-main .ps-r { background: #fee2e2; color: #b91c1c; }
.report-main .ps-n { background: #eef2f7; color: #64748b; }

/* 경쟁 밴드 / 격차 막대 / 전략 카드 / 심각도 */
.report-main .band { position: relative; height: 12px; border-radius: 7px; background: linear-gradient(90deg, #22c55e, #eab308, #ef4444); margin: 16px 0 6px; }
.report-main .band .mk { position: absolute; top: -6px; width: 4px; height: 24px; background: #0f172a; border-radius: 2px; }
.report-main .gapbar { margin: 10px 0; }
.report-main .gapbar .row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.report-main .gapbar .nm { width: 90px; color: var(--rt-sub); font-weight: 600; }
.report-main .gapbar .b { flex: 1; height: 22px; background: #eef2f7; border-radius: 7px; position: relative; overflow: hidden; }
.report-main .gapbar .b .me { position: absolute; left: 0; top: 0; height: 100%; background: linear-gradient(90deg, #4f46e5, #9333ea); border-radius: 7px; }
.report-main .gapbar .b .cp { position: absolute; top: 0; height: 100%; border-left: 2px dashed #ef4444; }
.report-main .strat { border: 1px solid #e8edf3; border-radius: 14px; padding: 14px; margin-top: 10px; }
.report-main .strat.high { border-left: 4px solid #ef4444; }
.report-main .strat.med { border-left: 4px solid var(--rt-est); }
.report-main .strat.low { border-left: 4px solid var(--rt-ok); }
.report-main .sev { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.report-main .sev.high { background: #fee2e2; color: #b91c1c; }
.report-main .sev.med { background: #fef3c7; color: #b45309; }
.report-main .sev.low { background: #dcfce7; color: #15803d; }

/* 차트 박스 */
/* 절대 높이 금지 — 차트박스는 내부 차트(ChartCanvas 자체 height) 높이만큼 자동으로 늘어남 → 아래 노트와 겹침 방지 */
/* 차트 위/아래 넉넉한 여유 — 어떤 상황에서도 아래 노트/표와 답답하지 않게 */
.report-main .chartbox { position: relative; margin: 10px 0 26px; }
.report-main .chartbox.sm { margin: 8px 0 20px; }
/* 차트박스 안 이미지(다운로드 변환본)는 항상 박스 너비에 맞춰 비율 유지 */
.report-main .chartbox img { display: block; width: 100%; height: auto; }

/* ===== 평면 표(시안 톤): 그라데이션 헤더 → 회색 평면 헤더 ===== */
.report-main .rt-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
.report-main .rt-table th, .report-main .rt-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid #eef2f7; }
.report-main .rt-table th { color: var(--rt-sub); font-size: 11px; font-weight: 800; border-bottom: 2px solid #e2e8f0; text-transform: none; background: none; }
.report-main .rt-table thead tr { background: none !important; }
.report-main .rt-table tbody tr:hover { background: #fafbff; }

/* ===== 시안 원본 클래스명 별칭 (.card>h3 / .hic) — rt-h3/rt-hic와 동일 스타일 =====
   일부 컴포넌트가 시안 HTML의 클래스명을 그대로 사용해도 깨지지 않도록 보강 */
.report-main .card > h3 { margin: 0 0 4px; font-size: 15.5px; font-weight: 800; color: var(--rt-ink); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.report-main .hic { width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #eef2ff, #e0e7ff); font-size: 16px; flex: none; }
.report-main .card > .desc { color: var(--rt-sub); font-size: 12px; margin: 2px 0 14px; }

/* ratecard 라벨(노출/미노출/노출률 등)을 진한 색으로 — 연한 회색 가독성 개선 */
.report-main .ratecard .k { color: #334155; font-weight: 800; font-size: 14.5px; margin-top: 6px; }

/* ===== 모바일 가독성 — 카드 패딩/숫자 마진 엄격 통제 (카톡 등 모바일 열람 시 숫자 오인 방지) ===== */
@media (max-width: 640px) {
  .report-main .card, .report-main .section .card { padding: 16px 14px !important; }
  .report-main .kpi { padding: 13px 12px; }
  .report-main .kpi .v { font-size: 20px !important; }   /* 폭 좁을 때 숫자 줄바꿈/겹침 방지 */
  .report-main .rt-h3, .report-main .card > h3 { font-size: 14.5px; }
  .report-main table { font-size: 12px; }
  .report-main .rt-scroll { max-height: 360px; }
}

/* ===== 인쇄 / PDF 저장 — 광고주 제출용: 시스템 버튼·유틸 영역 숨김 ===== */
@media print {
  /* 화면 전용 UI(상단바·목차·앵커네비) + 액션 영역(업체저장/보고서내보내기/알림설정) + 모든 버튼·입력 숨김 */
  .topbar, .anchor-nav, .report-toc,
  #sec-save-client, #sec-report, #sec-notify,
  .action-container, .btn-group, .action-buttons, .no-export,
  button, .btn, .btn-search, .dlbtn,
  input, select, textarea { display: none !important; }
  /* 배경색·그라데이션 유실 방지 */
  html, body { -webkit-print-color-adjust: exact; print-color-adjust: exact; background: #fff !important; }
  .report-shell, .report-main { display: block !important; max-width: 100% !important; margin: 0 !important; }
  /* 카드가 페이지 경계에서 잘리지 않게 + 인쇄 시 그림자 제거(잉크 절약·깔끔) */
  .report-main .card, .report-main .section, .seasoncard, .sub-card { break-inside: avoid; page-break-inside: avoid; box-shadow: none !important; }
}