/* 앱 공통 페이지 배경 - 모든 탭(L1~L8, 더보기 안 탭)이 body 배경을 공유한다. 흰 카드/패널 배경은 그대로. */
:root {
  --page-bg: #F4F2EE;
  /* 본문 최대 폭 + 좌우 패딩. 헤더/탭 바/안내 띠는 배경을 전폭으로 두고 안쪽 여백(--content-gutter)만 같은 폭에 맞춰
     안쪽 콘텐츠가 본문(#main-content) 좌우 끝과 정렬된다. 1680px보다 좁은 화면에서는 그냥 24px 여백(기존 동작). */
  --content-max: 1680px; --content-pad: 24px;
  --content-gutter: max(var(--content-pad), calc((100% - var(--content-max)) / 2 + var(--content-pad)));
  --header-h: 48px;
  /* 상단 헤더/탭 바(짙은 남색, 채도 낮춤) */
  --hdr-bg: #16263D; --hdr-logo-bg: #2D4A70; --hdr-text-sub: #A9B6C8;
  --nav-bg: #1D3350; --nav-text: #A9B6C8; --nav-underline: #8FB0D6;
  --nav-num-bg: rgba(255,255,255,0.14); --nav-num-text: #E5EAF1; --nav-menu-text: #E5EAF1; --nav-menu-hover: #26426A;
  --focus-dark: #8FB0D6;   /* 어두운 영역(헤더/탭/드롭다운) 포커스 윤곽선 */
  --focus-light: #1F3B5C;  /* 밝은 영역 포커스 윤곽선 */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif; background: var(--page-bg); color: #1e2a3a; font-size: 14px; }

/* 헤더: 배경 전폭, 안쪽 콘텐츠(로고·제목·새로고침·상태 텍스트)는 본문과 같은 폭/패딩으로 정렬 */
.app-header { background: var(--hdr-bg); color: #fff; height: var(--header-h); padding: 0 var(--content-gutter); display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 200; }
.app-logo { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 6px; background: var(--hdr-logo-bg); color: #fff; font-size: 14px; font-weight: 700; line-height: 24px; text-align: center; user-select: none; }
.app-header h1 { font-size: 17px; font-weight: 700; color: #fff; }
.app-refresh { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.28); color: #fff; border-radius: 4px; padding: 4px 10px; cursor: pointer; font-size: 13px; font-family: inherit; margin-left: 4px; }
.app-refresh:hover { background: rgba(255,255,255,0.16); }
.app-refresh:disabled { cursor: default; opacity: 0.7; }
.app-header button:focus-visible { outline: 2px solid var(--focus-dark); outline-offset: 2px; }
#data-status { font-size: 11px; color: var(--hdr-text-sub); margin-left: auto; }
#last-updated { font-size: 11px; color: var(--hdr-text-sub); margin-left: 8px; }

.nav-tabs { background: var(--nav-bg); display: flex; overflow-x: auto; padding: 0 var(--content-gutter); position: sticky; top: var(--header-h); z-index: 190; }
.nav-tabs::-webkit-scrollbar { height: 3px; }
.nav-tab { padding: 11px 15px; color: var(--nav-text); cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; font-size: 12px; user-select: none; }
.nav-tab:hover { color: #fff; }
.nav-tab.active { color: #fff; font-weight: 700; border-bottom-color: var(--nav-underline); }
.nav-tab:focus-visible, .nav-more-item:focus-visible { outline: 2px solid var(--focus-dark); outline-offset: -2px; }
/* 메인 탭 번호 뱃지(표시 순서 1~4, 내부 레벨 번호와 무관) - "L1." 같은 접두어 대신 둥근 칩 */
.nav-tabs > .nav-tab[data-level] { display: flex; align-items: center; gap: 6px; }
.nav-num { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--nav-num-bg); color: var(--nav-num-text); font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.nav-tab:hover .nav-num { color: #fff; }
.nav-tab.active .nav-num { background: var(--nav-underline); color: var(--hdr-bg); }

/* 더보기(숨김 탭) 드롭다운 - position:fixed 사용 이유: .nav-tabs가 overflow-x:auto라서
   (CSS 스펙상 overflow-x가 visible이 아니면 overflow-y도 강제로 auto가 되는 규칙 때문에)
   position:absolute로 붙이면 탭바 바깥으로 나가는 부분이 그대로 잘려서 안 보임 - 열릴 때
   JS(toggleNavMore)에서 버튼 위치를 계산해 top/left를 직접 지정한다. */
.nav-more { position: relative; }
.nav-more-btn { display: flex; align-items: center; gap: 3px; }
.nav-more-dd { display: none; position: fixed; background: var(--nav-bg); border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,0.3); min-width: 180px; z-index: 500; overflow: hidden; }
.nav-more-dd.open { display: block; }
.nav-more-item { padding: 9px 14px; font-size: 12px; color: var(--nav-menu-text); cursor: pointer; white-space: nowrap; user-select: none; }
.nav-more-item:hover { background: var(--nav-menu-hover); }
.nav-more-item.active { background: var(--nav-menu-hover); color: #fff; font-weight: 700; }
/* 더보기 항목의 "업데이트 예정" 뱃지(L2/L4/L5/L6) - 탭 이름 오른쪽 작은 알약 */
.nav-more-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nav-soon { flex: none; padding: 2px 7px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.28); background: rgba(255,255,255,0.08); color: var(--nav-menu-text); font-size: 11px; font-weight: 400; line-height: 1.3; }

/* 본문(#main-content): 최대 폭 1680px, 가운데 정렬, 좌우 패딩 24px(box-sizing:border-box라 1680 안에 포함). 1680px보다 좁은 화면은 기존처럼 화면 폭을 그대로 씀. */
.main { padding: 16px var(--content-pad); max-width: var(--content-max); margin: 0 auto; }

/* 전 탭 공통 안내 문구(nav-tabs 아래, main 위 한 곳) */
.data-notice { padding: 6px var(--content-gutter); font-size: 11px; color: #5B6B7F; background: #EFEDE7; border-bottom: 1px solid #E3DFD6; }

/* Cards */
.card { background: #fff; border-radius: 8px; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.card-title { font-size: 13px; font-weight: 700; color: #1a4f8a; margin-bottom: 12px; }

/* Filter bar */
.filter-bar { background: #fff; border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.filter-group { position: relative; }
.filter-label { font-size: 10px; color: #888; margin-bottom: 3px; }
.filter-btn { background: #f0f4f8; border: 1px solid #d0dae6; border-radius: 4px; padding: 5px 10px; cursor: pointer; font-size: 12px; color: #1e2a3a; display: flex; align-items: center; gap: 4px; min-width: 90px; white-space: nowrap; }
.filter-btn:hover { border-color: #4a9eff; }
.filter-btn .caret { margin-left: auto; font-size: 10px; }

.filter-dropdown { position: absolute; top: calc(100% + 2px); left: 0; z-index: 300; background: #fff; border: 1px solid #d0dae6; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,0.13); min-width: 200px; padding: 8px; display: none; }
.filter-dropdown.open { display: block; }
.filter-search { width: 100%; border: 1px solid #d0dae6; border-radius: 4px; padding: 4px 8px; font-size: 12px; margin-bottom: 5px; outline: none; }
.filter-search:focus { border-color: #4a9eff; }
.filter-actions { display: flex; gap: 8px; margin-bottom: 5px; }
.filter-action-btn { font-size: 11px; color: #2563eb; cursor: pointer; background: none; border: none; padding: 0; }
.filter-action-btn:hover { text-decoration: underline; }
.filter-options { max-height: 180px; overflow-y: auto; }
.filter-option { display: flex; align-items: center; gap: 6px; padding: 3px 0; cursor: pointer; font-size: 12px; }
.filter-option input[type=checkbox] { cursor: pointer; accent-color: #2563eb; }

/* Grids */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.mb14 { margin-bottom: 14px; }

/* Tables */
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table th { background: #f0f4f8; padding: 7px 10px; text-align: left; font-weight: 600; color: #1a4f8a; border-bottom: 2px solid #d0dae6; white-space: nowrap; }
.data-table td { padding: 6px 10px; border-bottom: 1px solid #f0f0f0; }
.data-table tr:hover td { background: #f7faff; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* 데일리 성과(L7) 상세 표 - 지표 10개라 좁은 화면에서는 표만 가로 스크롤(페이지 전체는 스크롤 안 됨), 셀 줄바꿈 없음 */
.l7-tbl-wrap { overflow-x: auto; }
.l7-tbl-wrap .data-table td { white-space: nowrap; }

/* Progress bar */
.prog-wrap { display: flex; align-items: center; gap: 6px; }
.prog-bar { background: #e0e8f0; border-radius: 4px; height: 7px; width: 110px; overflow: hidden; flex-shrink: 0; }
.prog-fill { height: 100%; border-radius: 4px; transition: width 0.3s; }
.prog-pct { font-size: 11px; font-weight: 600; }

/* Editable input */
/* =====================================================================
   L1 — 채널별 KPI (툴바 → 요약 타일 → SUMMARY → 전환/트래픽 섹션(밴드 + 카드 그리드 + KPI 미설정 각주))
   상태 3색(초과달성=초록/정상범위=회색/미달=빨강)은 배지, 눈금 바, 표 셀 글자색, 줄글 상태 구절이 같은 변수를 공유.
   KPI 미설정 채널/지표는 이 3색 체계를 아예 안 쓰고 별도의 중립 "KPI 미설정" 태그로 구분.
   글자 크기는 12px 미만을 쓰지 않는다. 보조 텍스트는 흰 배경 대비 4.5:1 이상(--l1-muted, --l1-neutral).
   ===================================================================== */
/* L1 색 변수 - 대시보드에는 기존 CSS 변수가 없어 L1용으로 신설. 대시보드 전체가 밝은 배경 고정(다크 모드 없음)이라
   다크 오버라이드는 두지 않음 - 다크 테마를 도입하면 이 변수만 덮어쓰면 됨. */
:root {
  /* 상태 글자색 / 보조 텍스트 */
  --l1-good: #2A7553;      /* 초과달성 글자(톤다운) */
  --l1-neutral: #5B6B7F;   /* 정상범위 글자 */
  --l1-bad: #A8443F;       /* 미달 글자(톤다운) */
  --l1-muted: #5b6b7f;     /* 보조 텍스트/라벨 (흰 배경 5.4:1, 회색 블록 위 5.1:1) */
  --l1-text: #1e2a3a;      /* 기본 텍스트 - 눈금 색 */
  --l1-text-sub: #33475b;
  /* 진행바 - 상태별 기본색 / 진한색(KPI 눈금을 넘은 부분) / 연한색(눈금까지 부족분) */
  --l1-bar-track: #E7E5DF;
  --l1-bar-over: #3E8F6E;    --l1-bar-over-strong: #1F5C43;    --l1-bar-over-light: #DCEBE4;
  --l1-bar-normal: #8A97A8;  --l1-bar-normal-strong: #5B6B7F;  --l1-bar-normal-light: #E2E6EB;
  --l1-bar-under: #B85450;   --l1-bar-under-strong: #8A2F2B;   --l1-bar-under-light: #F0D9D7;
  /* 상태 배지 배경/글자 */
  --l1-badge-over-bg: #E3EFE9;   --l1-badge-over-text: #1F5C43;
  --l1-badge-normal-bg: #E8EBEF; --l1-badge-normal-text: #3F4B5B;
  --l1-badge-under-bg: #F4E3E1;  --l1-badge-under-text: #8A2F2B;
  /* L1 카드/패널 테두리 - 미색 페이지 배경(--page-bg)에 어울리는 따뜻한 회색. 다른 탭의 테두리는 바꾸지 않는다. */
  --l1-border: #E3DFD6;
  /* 섹션 밴드(어두운 배경 + 밝은 글자). SUMMARY 칩은 밴드와 분리해 옅은 톤(--l1-*-chip-*) */
  --l1-conv-bg: #1F3B5C;    --l1-conv-accent: #8FB0D6;    --l1-conv-title: #FFFFFF;    --l1-conv-sub: #CED4DB;
  --l1-traffic-bg: #2D3339; --l1-traffic-accent: #A7B0BC; --l1-traffic-title: #FFFFFF; --l1-traffic-sub: #D0D4D9;
  --l1-conv-chip-bg: #DCE5EF;    --l1-conv-chip-text: #1F3B5C;
  --l1-traffic-chip-bg: #E4E6E9; --l1-traffic-chip-text: #2D3339;
}

/* 공통 카드(패널) 스타일 - 툴바, 요약 타일, SUMMARY가 같은 프레임을 쓴다 */
.l1-panel { background: #fff; border: 1px solid var(--l1-border); border-radius: 10px; box-shadow: 0 1px 3px rgba(20,40,70,0.05); padding: 16px 18px; margin-bottom: 14px; }

/* 툴바: 왼쪽 월 선택, 오른쪽 "선택 기간 [라벨]" */
.filter-bar.l1-toolbar { justify-content: flex-start; align-items: flex-end; flex-wrap: wrap; gap: 8px 20px; border: 1px solid var(--l1-border); border-radius: 10px; box-shadow: 0 1px 3px rgba(20,40,70,0.05); }
.l1-toolbar .filter-label { font-size: 12px; color: var(--l1-muted); }
.l1-toolbar .filter-btn .caret, .l1-toolbar .filter-action-btn { font-size: 12px; } /* 전역 스타일(10/11px)을 L1 툴바 안에서만 12px로 */
.l1-toolbar-period { font-size: 13px; color: var(--l1-text-sub); padding-bottom: 5px; }
.l1-toolbar-period b { color: #1a4f8a; font-weight: 700; margin-left: 4px; }

/* 요약 타일: 하나의 카드 안 7칸, 칸 사이 1px 세로 구분선. 순서 = 전체 채널 수 · 달성 n/m 2개 · 평균 4개(DA 전환/SA 전환/SS/DA 트래픽).
   1300px 미만은 "개수 3칸 / 평균 4칸" 두 줄, 900px 미만은 3 + 2 + 2, 500px 이하는 1 + 2 + 2 + 2. */
.l1-tiles { display: grid; grid-template-columns: repeat(7, 1fr); padding: 14px 0; }
.l1-stat { display: flex; flex-direction: column; justify-content: space-between; gap: 4px; padding: 2px 18px; min-width: 0; }
.l1-stat + .l1-stat { border-left: 1px solid #e3e9f1; }
.l1-stat-lbl { font-size: 12px; color: var(--l1-muted); }
.l1-stat-note { display: block; font-size: 12px; color: var(--l1-muted); }
/* 타일 제목 옆 (i) 정보 아이콘 - 터치 영역 22px(아이콘 14px), 툴팁은 body의 #l1-tip(position:fixed, JS가 화면 안으로 배치) */
.l1-info { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: -4px 0 -4px 2px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--l1-muted); cursor: help; vertical-align: middle; }
.l1-info:hover, .l1-info:focus-visible { color: var(--l1-text); }
.l1-info:focus-visible { outline: 2px solid var(--focus-light); outline-offset: 0; }
.l1-tip { position: fixed; z-index: 600; max-width: min(280px, calc(100vw - 16px)); padding: 8px 10px; border-radius: 6px; background: #1E2A3A; color: #fff; font-size: 12px; line-height: 1.5; word-break: keep-all; box-shadow: 0 4px 12px rgba(17,24,39,0.18); pointer-events: none; }
.l1-tip[hidden] { display: none; }
.l1-stat-val { font-size: 22px; font-weight: 800; color: #1a4f8a; font-variant-numeric: tabular-nums; line-height: 1.2; }
@media (max-width: 1299px) { /* 3칸 + 4칸 */
  .l1-tiles { grid-template-columns: repeat(12, 1fr); row-gap: 12px; }
  .l1-stat { grid-column: span 4; }
  .l1-stat:nth-child(n+4) { grid-column: span 3; border-top: 1px solid #e3e9f1; padding-top: 12px; }
  .l1-stat:nth-child(4) { border-left: none; }
}
@media (max-width: 899px) { /* 3칸 + 2칸 + 2칸 */
  .l1-stat:nth-child(n+4) { grid-column: span 6; }
  .l1-stat:nth-child(6) { border-left: none; }
}
@media (max-width: 500px) { /* 1칸(전폭) + 2칸 × 3 */
  .l1-tiles { grid-template-columns: repeat(2, 1fr); }
  .l1-stat, .l1-stat:nth-child(n+4) { grid-column: auto; }
  .l1-stat:nth-child(1) { grid-column: span 2; }
  .l1-stat:nth-child(even) { border-left: none; }
  .l1-stat:nth-child(odd):not(:first-child) { border-left: 1px solid #e3e9f1; }
  .l1-stat:nth-child(n+2) { border-top: 1px solid #e3e9f1; padding-top: 12px; }
}

/* SUMMARY(줄글 코멘트) - 다른 섹션과 같은 카드 스타일. 채널·목표당 한 문단 */
.l1-summary-title { font-size: 16px; font-weight: 800; letter-spacing: 0.04em; color: #1a4f8a; margin: 0 0 12px; }
.l1-insight-list { display: flex; flex-direction: column; gap: 14px; }
.l1-insight-p { font-size: 14px; color: var(--l1-text-sub); line-height: 1.8; margin: 0; }
.l1-insight-empty { font-size: 14px; color: var(--l1-muted); }
/* 단어 중간 줄바꿈 방지(좁은 화면에서 "달/성률"처럼 끊기던 것) - 한글은 어절 단위로만 줄바꿈 */
.l1-summary { word-break: keep-all; overflow-wrap: break-word; }
/* SUMMARY 제목 줄 - 섹션 밴드(.l1-band)와 같은 flex 구조: 제목 왼쪽, 범례 오른쪽, 좁아지면 범례가 아래로 줄바꿈 */
.l1-summary-hd { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 12px; }
.l1-summary-hd .l1-summary-title { margin: 0; }
/* 범례는 .l1-band-legend 재사용 - 흰 카드 위라 옅은 블루그레이 알약(카드 상세 블록과 같은 #f3f6fa) + 보조 회색 글자(--l1-muted, 5.1:1) */
.l1-summary-hd .l1-band-legend-plain { background: #f3f6fa; border: 1px solid #e3e9f1; padding: 4px 10px; border-radius: 999px; color: var(--l1-muted); }
/* 좁은 화면에서 범례가 여러 줄로 감기면 완전한 알약 모양 대신 둥근 사각형 */
@media (max-width: 699px) { .l1-summary-hd .l1-band-legend-plain { border-radius: 10px; } }
/* 문장 끝 "(달성률 N.N%)" - 보조 회색, 괄호 안에서 줄바꿈 안 함 */
.l1-insight-rate { color: var(--l1-muted); white-space: nowrap; }
/* SUMMARY 품목·매체 이름 한 덩어리는 줄바꿈하지 않음 */
.l1-nw { white-space: nowrap; }
/* "전환"/"트래픽" 단어 칩(인라인 배경색, 굵게) - 밴드와 분리된 옅은 톤 변수(--l1-*-chip-*) */
.l1-tag { display: inline-block; padding: 0 6px; border-radius: 4px; font-weight: 700; line-height: 1.5; }
.l1-tag-conv { background: var(--l1-conv-chip-bg); color: var(--l1-conv-chip-text); }
.l1-tag-traffic { background: var(--l1-traffic-chip-bg); color: var(--l1-traffic-chip-text); }
/* 상태 색 - 줄글의 상태 구절, 카드 헤드라인 차이, 표 셀이 같은 변수를 쓴다 */
.l1-st-over { color: var(--l1-good); }
.l1-st-normal { color: var(--l1-neutral); }
.l1-st-under { color: var(--l1-bad); }

/* 섹션 + 헤더 밴드(어두운 배경 + 밝은 글자, 높이 약 44px, 제목과 부제를 한 줄에). 900px 미만에서는 부제가 아래로 줄바꿈. */
.l1-section { margin-bottom: 22px; }
.l1-band { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; border-radius: 10px; padding: 8px 14px 8px 22px; min-height: 44px; margin-bottom: 12px; }
.l1-band::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; }
.l1-band-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 14px; min-width: 0; }
.l1-band-title { font-size: 17px; font-weight: 800; margin: 0; line-height: 1.3; }
.l1-band-sub { font-size: 12px; }
@media (max-width: 899px) { .l1-band-main { flex-direction: column; align-items: flex-start; gap: 0; } }
.l1-band-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 12px; color: #1F2937; background: rgba(255,255,255,0.92); border-radius: 999px; padding: 4px 12px; }
.l1-band-conv { background: var(--l1-conv-bg); }
.l1-band-conv::before { background: var(--l1-conv-accent); }
.l1-band-conv .l1-band-title { color: var(--l1-conv-title); }
.l1-band-conv .l1-band-sub { color: var(--l1-conv-sub); }
.l1-band-traffic { background: var(--l1-traffic-bg); }
.l1-band-traffic::before { background: var(--l1-traffic-accent); }
.l1-band-traffic .l1-band-title { color: var(--l1-traffic-title); }
.l1-band-traffic .l1-band-sub { color: var(--l1-traffic-sub); }
.l1-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 3px; }
.l1-dot-over { background: var(--l1-good); }
.l1-dot-normal { background: var(--l1-neutral); }
.l1-dot-under { background: var(--l1-bad); }

/* 전체 가로폭을 쓰는 반응형 카드 그리드 - auto-fill(빈 트랙 유지)이라 전환/트래픽 두 섹션이 같은 열 폭을 씀. 데스크톱 3~4열, 좁은 화면은 자연스럽게 1열.
   최소 폭 320px: 카드 표 열(값+차이)이 줄바꿈 없이 들어가도록. align-items:start - 펼친 카드만 늘어나고 다른 카드는 유지. */
.l1-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; margin-bottom: 10px; align-items: start; }
.l1-sa-eyebrow { font-size: 12px; font-weight: 700; color: var(--l1-muted); margin-bottom: 2px; }

/* 카드 네 구역: ① 헤더 ② 헤드라인+바 ③ 상세(회색 블록) ④ 하단(순위 토글) */
.l1-card { background: #fff; border: 1px solid var(--l1-border); border-radius: 12px; padding: 16px 12px 14px; box-shadow: 0 1px 2px rgba(17,24,39,0.06); }
.l1-card-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.l1-card-id { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; min-width: 0; }
.l1-ch-name { font-size: 16px; font-weight: 800; color: var(--l1-text); margin: 0; }
.l1-hd-label { font-size: 12px; color: var(--l1-muted); }
.l1-headline { margin-top: 10px; }
.l1-metric-lead { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.l1-metric-main { font-size: 28px; font-weight: 800; color: #12263f; line-height: 1.1; font-variant-numeric: tabular-nums; }
.l1-metric-cap { font-size: 12px; font-weight: 700; color: var(--l1-muted); }
.l1-metric-diff { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.l1-cpc-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 10px; font-size: 13px; color: var(--l1-text-sub); }
.l1-cpc-lbl { font-size: 12px; font-weight: 700; color: var(--l1-muted); }
.l1-cpc-val { font-size: 16px; font-weight: 800; color: #12263f; font-variant-numeric: tabular-nums; }

/* KPI 눈금 진행바 - 축 0~150%, KPI 눈금 66.67% 고정 */
.l1-bar-wrap { position: relative; padding-top: 22px; margin-top: 2px; }
.l1-bar-kpi-lbl { position: absolute; top: 0; transform: translateX(-50%); font-size: 12px; font-weight: 600; color: var(--l1-text); white-space: nowrap; }
.l1-bar { position: relative; height: 8px; border-radius: 4px; background: var(--l1-bar-track); }
.l1-bar-fills { position: absolute; inset: 0; border-radius: 4px; overflow: hidden; }
.l1-bar-overflow .l1-bar-fills { border-radius: 4px 0 0 4px; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%); }
.l1-bar-seg { position: absolute; top: 0; bottom: 0; }
.l1-bar-over { background: var(--l1-bar-over); }       .l1-bar-over-strong { background: var(--l1-bar-over-strong); }       .l1-bar-over-light { background: var(--l1-bar-over-light); }
.l1-bar-normal { background: var(--l1-bar-normal); }   .l1-bar-normal-strong { background: var(--l1-bar-normal-strong); }   .l1-bar-normal-light { background: var(--l1-bar-normal-light); }
.l1-bar-under { background: var(--l1-bar-under); }     .l1-bar-under-strong { background: var(--l1-bar-under-strong); }     .l1-bar-under-light { background: var(--l1-bar-under-light); }
.l1-bar-tick { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--l1-text); border-radius: 1px; }

.l1-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.l1-badge-over   { background: var(--l1-badge-over-bg); color: var(--l1-badge-over-text); }
.l1-badge-normal { background: var(--l1-badge-normal-bg); color: var(--l1-badge-normal-text); }
.l1-badge-under  { background: var(--l1-badge-under-bg); color: var(--l1-badge-under-text); }
.l1-badge-nodata { background: #f1f3f6; color: var(--l1-muted); }
.l1-badge-kpi-unset { background: #eef1f5; color: var(--l1-muted); }

/* ③ 상세: 옅은 회색 블록 안에 표(기간 합계 + 월별 토글 + 월 행) */
.l1-detail { margin-top: 12px; background: #f3f6fa; border-radius: 8px; padding: 8px 10px; }
.l1-ctbl { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
.l1-ctbl th, .l1-ctbl td { padding: 5px 3px; white-space: nowrap; }
.l1-ctbl thead th { font-size: 12px; font-weight: 700; color: var(--l1-text-sub); text-align: right; vertical-align: bottom; padding-bottom: 5px; }
.l1-ctbl th.l1-ct-lbl { text-align: left; width: 56px; padding-left: 0; font-weight: 600; color: var(--l1-muted); }
.l1-ctbl thead th.l1-ct-lbl { font-weight: 700; }
.l1-kpi-sub { font-size: 12px; font-weight: 400; color: var(--l1-muted); margin-top: 1px; }
.l1-ctbl td { text-align: right; font-variant-numeric: tabular-nums; }
.l1-ctbl tbody tr:not(.l1-total-row):not(.l1-toggle-row) th, .l1-ctbl tbody tr:not(.l1-total-row):not(.l1-toggle-row) td { border-bottom: 1px solid #e1e7ef; }
.l1-total-row th, .l1-total-row td { font-weight: 800; border-top: 1px solid #c3cfdd; border-bottom: 1px solid #c3cfdd; }
.l1-total-row th.l1-ct-lbl { color: #12263f; }
.l1-cv { font-weight: 700; }
.l1-cd { font-size: 12px; font-weight: 600; }
.l1-ctbl td.l1-cell-wide { padding-left: 0; padding-right: 0; }
.l1-cell-wide .l1-cv { font-size: 12px; } /* 네 자리 이상 값(예: 1,053%)도 줄바꿈 없이 열 폭 안에 들어가도록(글자 12px, 셀 좌우 여백 0) */
.l1-cell-wide .l1-cv, .l1-cell-wide .l1-cd { letter-spacing: -0.02em; } /* 카드가 가장 좁은 4열 구간(뷰포트 약 1350~1450px)에서 "1,053% +753" 같은 값이 2px 넘치던 것을 자간으로 흡수 */
.l1-cell-na { color: var(--l1-muted); font-weight: 400; }
.l1-toggle-row td { text-align: left; padding: 4px 0; }
.l1-months-toggle { background: none; border: none; padding: 2px 0; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700; color: #3b5578; display: inline-flex; align-items: center; gap: 4px; }
.l1-months-toggle:hover { color: #1a4f8a; }

/* ④ 하단: 위쪽 구분선 + 품목·매체 순위 줄 - 접힘: 이름만, 펼침: 수치 포함 + 범례 */
.l1-foot { margin-top: 12px; border-top: 1px solid #e3e9f1; padding-top: 8px; }
.l1-rank + .l1-rank { margin-top: 2px; }
.l1-rank-toggle { width: 100%; background: none; border: none; padding: 3px 0; cursor: pointer; font-family: inherit; font-size: 13px; color: var(--l1-text-sub); display: flex; align-items: baseline; gap: 8px; text-align: left; }
.l1-rank-toggle:hover .l1-rank-txt { color: #1a4f8a; }
.l1-rank-toggle:focus-visible, .l1-months-toggle:focus-visible, .l1-chip:focus-visible { outline: 2px solid var(--focus-light); outline-offset: 2px; border-radius: 4px; }
.l1-rank-lbl { font-size: 12px; font-weight: 700; color: var(--l1-muted); min-width: 28px; flex-shrink: 0; }
.l1-rank-txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.l1-rank-full { font-variant-numeric: tabular-nums; }
.l1-rank-legend { font-size: 12px; color: var(--l1-muted); padding: 0 0 2px 36px; }
.l1-rank-short[hidden], .l1-rank-full[hidden], .l1-rank-legend[hidden], .l1-ctbl tbody[hidden] { display: none; }
.l1-chevron { color: var(--l1-muted); transition: transform 0.15s; display: inline-block; }
.l1-chevron.open { transform: rotate(180deg); }

/* 트래픽 격자의 남는 칸을 채우는 "KPI 미설정 채널" 카드(2칸 span, 점선 테두리). 열이 1개인 좁은 화면에서는 전폭. */
.l1-nokpi-card { grid-column: span 2; border: 1px dashed #b8c4d4; background: transparent; box-shadow: none; display: flex; flex-direction: column; gap: 8px; align-self: start; }
@media (max-width: 720px) { .l1-nokpi-card { grid-column: 1 / -1; } }
/* SUMMARY 2열(1200px 이상): 왼쪽 전환 문단, 오른쪽 트래픽 문단. 한쪽이 비면 전폭, 1200px 미만은 1열. */
.l1-insight-cols { display: grid; grid-template-columns: 1fr; gap: 16px 40px; }
.l1-insight-col-hd { margin-bottom: 8px; font-size: 13px; }
/* 전환/트래픽 구분선(두 열이 다 있을 때만): 1200px 미만(위아래)은 가로선, 이상(나란히)은 열 간격 가운데 세로선 */
.l1-insight-cols:not(.l1-insight-cols-single) .l1-insight-col-traffic { border-top: 1px solid #e3e9f1; padding-top: 16px; }
@media (min-width: 1200px) {
  .l1-insight-cols:not(.l1-insight-cols-single) { grid-template-columns: 1fr 1fr; }
  .l1-insight-cols:not(.l1-insight-cols-single) .l1-insight-col-traffic { border-top: none; padding-top: 0; border-left: 1px solid #e3e9f1; padding-left: 20px; margin-left: -20px; }
}
/* KPI 미설정 채널 - 전환 섹션 맨 아래 점선 테두리 각주 행 + 중립 회색 칩(초록/빨강/배지/달성률 없음).
   칩 클릭 시 바로 아래에 상세 패널이 열림(섹션당 하나). 좁은 화면에서는 칩이 줄바꿈된다. */
.l1-nokpi-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: transparent; border: 1px dashed #b8c4d4; border-radius: 8px; padding: 8px 12px; }
.l1-nokpi-strip-lbl { font-size: 12px; font-weight: 700; color: var(--l1-muted); white-space: nowrap; }
.l1-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.l1-chip { display: inline-flex; align-items: center; gap: 6px; background: #eef1f5; border: 1px solid #dde3ec; border-radius: 999px; padding: 4px 11px; cursor: pointer; font-family: inherit; font-size: 12px; color: var(--l1-text-sub); }
.l1-chip:hover { border-color: #b8c4d4; }
.l1-chip.active { background: #e2e8f0; border-color: #a9b6c8; }
.l1-chip-name { font-weight: 700; }
.l1-chip-metric { font-size: 12px; color: var(--l1-muted); }
.l1-chip-val { font-variant-numeric: tabular-nums; color: var(--l1-neutral); }
.l1-chip-na { color: var(--l1-muted); }
.l1-chip-detail { margin-top: 8px; }
.l1-sub-metrics { display: flex; gap: 10px; }
.l1-sub-item { flex: 1; display: flex; flex-direction: column; gap: 2px; background: #f7faff; border-radius: 6px; padding: 6px 8px; }
.l1-sub-lbl { font-size: 12px; color: var(--l1-muted); }
.l1-sub-val { font-size: 13px; font-weight: 700; color: var(--l1-text-sub); font-variant-numeric: tabular-nums; }
.l1-chip-detail .l1-sub-metrics { margin-bottom: 8px; }
/* 상세 패널은 전체 폭이라 표가 지나치게 벌어져 읽기 어려우므로 폭을 제한 */
.l1-chip-detail .l1-sub-metrics, .l1-chip-detail .l1-mtbl-wrap { max-width: 640px; }
.l1-monthly-empty { font-size: 12px; color: var(--l1-muted); padding: 4px 0; }
.l1-mtbl-wrap { overflow-x: auto; }
.l1-mtbl { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--l1-text-sub); }
.l1-mtbl th { text-align: left; font-size: 12px; font-weight: 700; color: var(--l1-muted); padding: 4px 6px; border-bottom: 1px solid #e3e9f1; white-space: nowrap; }
.l1-mtbl td { padding: 5px 6px; border-bottom: 1px solid #f1f4f8; white-space: nowrap; }
.l1-mtbl td.num { font-variant-numeric: tabular-nums; }
.l1-mtbl tfoot td { font-weight: 800; color: #12263f; border-top: 1px solid #c7d2e0; border-bottom: none; background: #f7faff; }

/* 네이버SA 연동 전 통합 카드 - 다른 카드와 같은 프레임(.l1-card) */
.l1-sa-goals { list-style: none; display: flex; flex-direction: column; gap: 4px; margin-top: 10px; padding: 0; }
.l1-sa-goals li { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--l1-muted); }
.l1-sa-goal-val { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 넓은 화면(1600px 이상)에서만 글자 크기를 +1px 안팎으로 키운다. 1600px 미만은 위의 기본 값 그대로(984px 표 셀 넘침 재발 방지). */
@media (min-width: 1600px) {
  .l1-toolbar .filter-label, .l1-toolbar .filter-btn, .l1-toolbar .filter-btn .caret, .l1-toolbar .filter-action-btn { font-size: 13px; }
  .l1-toolbar-period { font-size: 14px; }
  .l1-stat-lbl, .l1-stat-note { font-size: 13px; }
  .l1-stat-val { font-size: 26px; }
  .l1-summary-title { font-size: 17px; }
  .l1-insight-p, .l1-insight-empty { font-size: 15px; }
  .l1-band-title { font-size: 20px; }
  .l1-band-sub, .l1-band-legend { font-size: 13px; }
  .l1-ch-name { font-size: 17px; }
  .l1-metric-main { font-size: 32px; }
  .l1-bar-kpi-lbl { font-size: 13px; }
  .l1-ctbl { font-size: 14px; }
  .l1-ctbl thead th, .l1-kpi-sub { font-size: 13px; }
  .l1-ctbl th.l1-ct-lbl { width: 68px; } /* 확대된 글자(14px 굵게)의 "기간 합계"가 열 폭 안에 들어가도록 */
  .l1-months-toggle { font-size: 14px; }
  .l1-rank-toggle { font-size: 14px; }
  .l1-rank-lbl, .l1-rank-legend { font-size: 13px; }
}

/* Delta */
.delta-pos { color: #16a34a; font-weight: 600; }
.delta-neg { color: #dc2626; font-weight: 600; }

/* Toggle group */
.toggle-group { display: flex; border: 1px solid #d0dae6; border-radius: 4px; overflow: hidden; }
.toggle-btn { padding: 5px 13px; font-size: 12px; cursor: pointer; background: #f0f4f8; border: none; color: #555; }
.toggle-btn.active { background: #2563eb; color: #fff; font-weight: 600; }

/* Slider */
.slider-wrap { display: flex; align-items: center; gap: 8px; }
.slider-wrap input[type=range] { flex: 1; accent-color: #2563eb; height: 4px; }
.slider-lbl { font-size: 11px; color: #555; min-width: 82px; text-align: center; background: #f0f4f8; border-radius: 3px; padding: 2px 5px; }

/* Creative cards */
.creative-cards { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; }
.creative-card { background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); width: 210px; overflow: hidden; position: relative; }
.rank-badge { position: absolute; top: 0; left: 0; background: #1a4f8a; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 0 0 6px 0; z-index: 1; }
.creative-img-wrap { width: 100%; height: 130px; background: #e8edf5; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; cursor: pointer; }
.creative-img-wrap img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.15); }
.play-icon-svg { width: 44px; height: 44px; fill: rgba(255,255,255,0.92); filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4)); }
.creative-info { padding: 10px 11px 11px; }
.creative-name { font-size: 11px; color: #666; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creative-metrics { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.cm { font-size: 11px; }
.cm .lbl { color: #999; }
.cm .val { font-weight: 700; color: #1a4f8a; }
.no-img { font-size: 11px; color: #bbb; }

/* Collapsible */
.collapsible-btn { background: #f0f4f8; border: 1px solid #d0dae6; border-radius: 4px; padding: 5px 12px; cursor: pointer; font-size: 12px; color: #1a4f8a; margin-bottom: 8px; display: block; }

/* L3 heatmap */
.heat-table { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.heat-table th, .heat-table td { padding: 8px; text-align: center; }
.heat-table th.heat-row-th { text-align: left; background: #f0f4f8; color: #1a4f8a; font-weight: 700; width: 110px; }
.heat-th { cursor: pointer; background: #f0f4f8; color: #1a4f8a; font-weight: 600; user-select: none; border-bottom: 2px solid #d0dae6; }
.heat-th:hover { background: #e2eaf3; }
.heat-cell { border-radius: 6px; padding: 10px 6px; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.heat-main { font-size: 14px; font-weight: 700; }
.heat-sub { font-size: 10px; opacity: 0.85; margin-top: 2px; }
.heat-empty { color: #b9c2cd; font-size: 12px; }
.heat-total-row td { border-top: 2px solid #94a3b8; padding-top: 12px; }
.heat-total-row td.heat-row-th { background: #f4f6f8; color: #333; font-weight: 800; }
.heat-total-cell { background: #f4f6f8 !important; }
.heat-total-cell .heat-main { font-weight: 800; color: #1e2a3a; }
.heat-total-cell .heat-sub { color: #5b6b7f; }
.l3-cat-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }

/* L3 channel cards (section 3) */
.ch-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.ch-card { padding: 12px 14px; }
.ch-card-hd { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; margin: -12px -14px 8px; border-left: 4px solid; border-radius: 8px 8px 0 0; }
.ch-card-hd .ch-name { font-size: 13px; font-weight: 700; }
.ch-card-hd .ch-cost { font-size: 12px; color: #666; font-weight: 600; }
.sc-group-title { font-size: 11px; font-weight: 700; color: #5b6b7f; background: #f4f7fb; border-top: 2px solid #d7e3f0; padding: 4px 8px; margin: 10px 0 3px; border-radius: 0 0 4px 4px; }
.sc-row { display: grid; grid-template-columns: 190px 1fr 1fr 90px; gap: 10px; align-items: center; padding: 3px 0; font-size: 12px; }
.sc-row .sc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-header-row { font-size: 11px; color: #1a4f8a; font-weight: 700; border-bottom: 2px solid #d7e3f0; padding-bottom: 5px; margin-bottom: 4px; }
.sc-bar-wrap { display: flex; align-items: center; gap: 6px; }
.sc-bar-wrap .prog-bar { width: 100%; max-width: 72px; flex-shrink: 0; }
.sc-bar-wrap .sc-pct { flex-shrink: 0; white-space: nowrap; min-width: 40px; text-align: right; font-size: 11px; }
.sc-metric { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: #1a4f8a; white-space: nowrap; }

/* Chart containers */
.chart-wrap { position: relative; }

/* Loading / Error */
.loading, .error-box { text-align: center; padding: 50px 20px; }
.error-box { color: #dc2626; }
.error-box .err-title { font-size: 18px; margin-bottom: 8px; }
.error-box .err-sub { font-size: 13px; color: #666; }
.error-box code { background: #f0f0f0; padding: 2px 6px; border-radius: 3px; font-size: 12px; }
.retry-btn { margin-top: 16px; padding: 8px 22px; background: #2563eb; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 13px; }

@media (max-width: 900px) {
  .grid-2, .grid-3, .ch-cards { grid-template-columns: 1fr; }
  .creative-card { width: calc(50% - 7px); }
}
@media (max-width: 560px) {
  .creative-card { width: 100%; }
}