/* naver-ad-monitor 디자인 시스템 이식 */
:root {
  --green: #03c75a;       /* 네이버 그린 */
  --green-dark: #02a64c;
  --bg: #f5f6f8;
  --card: #ffffff;
  --border: #e3e6ea;
  --text: #1c1e21;
  --muted: #8b95a1;
  --pc: #2f6fed;
  --topbar-h: 56px;
  /* 채널 색 (차트/도트) */
  --smartstore: #2a78d6;
  --coupang: #eb6834;
  --cafe24: #1baf7a;
  --st11: #e63946;
  --toss: #3182f6;
  --kakao: #f2b900;
  --gmarket: #00a05a;
  --auction: #ff5b00;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Pretendard", -apple-system, "Malgun Gothic", sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* ── 레이아웃: 탑바 + 좌측 사이드바 ─────────────────── */
#layout { display: flex; flex-direction: column; min-height: 100vh; }
#content-row { display: flex; flex: 1; min-height: 0; }
#main-col { flex: 1; min-width: 0; }

#topbar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between;
  height: var(--topbar-h); padding: 0 20px; background: var(--card); border-bottom: 1px solid var(--border); }
.topbar-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topbar-left #page-title { font-size: 15px; line-height: 24px; margin: 0; font-weight: 700; white-space: nowrap; }
.topbar-divider { width: 1px; height: 18px; background: var(--border); flex-shrink: 0; margin: 0 2px; }
.header-right { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.header-right button { font-size: 13px; }
#hamburger { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border: none; background: none; padding: 0; line-height: 1; color: var(--text); flex-shrink: 0; }
#hamburger svg { display: block; width: 18px; height: 18px; }
#hamburger:hover { background: var(--bg); border-radius: 6px; }
.side-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.brand-logo { width: 24px; height: 24px; flex-shrink: 0; }
.brand-text { color: #1d3f8f; }
.user-sep { width: 1px; height: 20px; background: var(--border); margin: 0 2px; }
.user-chip { font-size: 13px; color: #445; font-weight: 600; }
/* 앱 전환(⋮⋮⋮) + 로그인 표시(아바타) — 게이트·애드리포트 공통 (2026-09-11 지시 "앱 간의 이동으로 저런 형태") */
.appbar { position: relative; display: flex; align-items: center; gap: 6px; }
.app-launch { width: 36px; height: 36px; border-radius: 50%; border: none; background: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; color: #5f6368; cursor: pointer; }
.app-launch:hover { background: #EEF1F4; }
.app-launch svg { width: 20px; height: 20px; fill: currentColor; }
.avatar { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 2px #19448C;
  background: #19448C; color: #fff; font-weight: 700; font-size: 13px; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.avatar.big { width: 56px; height: 56px; font-size: 22px; margin: 4px auto 8px; cursor: default; }
.app-pop { position: absolute; top: 44px; right: 0; z-index: 200; background: #fff; border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 6px 18px rgba(16, 24, 40, .12); padding: 14px; width: 440px; max-width: calc(100vw - 32px); min-width: 0; box-sizing: border-box; }
.app-pop-title { font-size: 12px; color: var(--muted); font-weight: 600; margin: 0 4px 8px; }
/* 앱 전환 타일 — 게이트 배너와 같은 브랜드 모양(남색 면 + 엠블럼 + 영문 이름 + 한글 이름) (2026-09-11 지시 "이미지는 업그레이드") */
.app-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 4px; }
.app-ico svg { width: 28px; height: 28px; }
.app-tile { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 4px 10px; border-radius: 10px;
  text-decoration: none; color: var(--text); }
.app-tile:hover { background: #F2F5F9; }
.app-tile.cur { background: #EEF3FB; }
.app-ico { width: 52px; height: 52px; border-radius: 13px; background: var(--c-sidebar, #153A77); margin-bottom: 5px;
  display: flex; align-items: center; justify-content: center; }
.app-ico img { height: 32px; display: block; }
.app-tile:hover .app-ico { background: var(--c-primary, #19448C); }
.app-tile.cur .app-ico { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c-secondary, #379BC1); }
.app-brand { font-size: 11px; font-weight: 800; letter-spacing: .02em; color: #10213F; white-space: nowrap; }
.app-kr { font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.user-pop { width:240px; min-width:0; text-align:center; }
.user-pop .up-name { font-weight: 700; font-size: 14px; }
.user-pop .up-mail { font-size: 12px; color: var(--muted); margin-top: 2px; }
/* 게이트가 불러 쓰는 설정 화면 — 사이드바·탑바 없이 (?embed=gate) */
body.embed #sidebar, body.embed #topbar { display: none !important; }
/* 솔루션 게이트 (/gate) */
.gate-body { background: var(--bg); min-height: 100vh; margin: 0; }
.gate-top { display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 24px;
  background: #fff; border-bottom: 1px solid var(--border); }
.gate-brand { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.gate-brand b { color: #19448C; letter-spacing: .5px; }
.gate-sub { color: var(--muted); font-size: 13px; }
.gate-mark { width: 32px; height: 32px; border-radius: 8px; background: var(--c-sidebar, #153A77);
  display: inline-flex; align-items: center; justify-content: center; }
.gate-mark img { height: 22px; display: block; }
.gate-logo { height: 26px; width: auto; display: block; }
.gate-brand .gate-sub { padding-left: 10px; margin-left: 2px; border-left: 1px solid #DFDFDF; line-height: 18px; }
.gate-main { max-width: 1320px; margin: 0 auto; padding: 36px 24px 60px; }
.gate-back { display: inline-block; margin-bottom: 14px; font-size: 13px; font-weight: 700; color: var(--c-primary, #19448C);
  text-decoration: none; }
.gate-back:hover { text-decoration: underline; }
.gate-title { font-size: 26px; margin: 0 0 6px; color: #10213F; }
/* 솔루션 3 + 설정 1 = 넓은 화면에서 한 줄 4개 (2026-09-11) */
.gate-banners { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin: 22px 0 36px; }
/* 솔루션 배너 — 각 앱 사이드바 브랜드 블록(남색 면 + 엠블럼 + 영문 앱 이름 + 한글 부제, theme.css .side-brand-block)을
   크게 옮긴 모양 (2026-09-11 지시 "첨부와 같은 스타일로"). 단색 남색 면 — 그라데이션·장식 블록 없음 */
.gate-banner { display: flex; flex-direction: column; gap: 16px; padding: 26px 26px 22px; min-height: 200px;
  background: var(--c-sidebar, #153A77); border-radius: 16px; text-decoration: none; color: #fff; }
.gate-banner:hover { background: var(--c-primary, #19448C); }
.gb-brand { display: flex; align-items: center; gap: 12px; }
.gb-logo { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gb-logo img { height: 44px; display: block; }
.gb-name { color: #fff; font-size: 22px; font-weight: 800; letter-spacing: .02em; line-height: 1.2; white-space: nowrap; }
.gb-sub { display: block; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .62);
  letter-spacing: -.01em; margin-top: 3px; }
.gb-desc { font-size: 13.5px; color: rgba(255, 255, 255, .82); line-height: 1.55; flex: 1; margin: 0; }
.gb-go { font-size: 13px; font-weight: 700; color: #fff; align-self: flex-start; padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; }
.gate-banner:hover .gb-go { background: rgba(255, 255, 255, .12); }
.gate-set-head h2 { font-size: 18px; margin: 0 0 4px; color: #10213F; }
#gate-frame { width: 100%; height: 78vh; border: 1px solid var(--border); border-radius: 14px; background: #fff; margin-top: 12px; }
.gate-login { max-width: 460px; margin: 60px auto; text-align: center; background: #fff; border: 1px solid var(--border);
  border-radius: 16px; padding: 36px 28px; }
.gate-login-btn { display: inline-block; margin: 18px 0 8px; padding: 12px 22px; border-radius: 10px; background: #00C73C;
  color: #fff; font-weight: 700; text-decoration: none; }

#sidebar {
  width: 232px; flex-shrink: 0; background: var(--card);
  border-right: 1px solid var(--border); display: flex; flex-direction: column;
  position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h));
  overflow-y: auto; transition: width .15s ease; padding-top: 8px;
}

/* 브랜드 선택 블록 (naver의 광고주 블록) */
.side-adv { margin: 4px 12px 12px; padding: 12px; border-radius: 10px;
  background: linear-gradient(135deg, var(--green), var(--green-dark)); display: flex; flex-direction: column; gap: 8px; }
.side-adv select { width: 100%; border: none; border-radius: 6px; padding: 8px 10px; font-size: 13px; background: #fff; color: var(--text); }
.side-adv > *:last-child { margin-bottom: 0; }

/* 네비게이션 */
.side-nav { display: flex; flex-direction: column; gap: 2px; padding: 4px 8px; }
.nav-parent { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: none; background: none;
  border-radius: 8px; color: var(--text); font-size: 14px; font-weight: 600; text-align: left; }
.nav-parent:hover { background: var(--bg); }
.nav-ico { width: 22px; text-align: center; flex-shrink: 0; font-size: 16px; }
.nav-label { flex: 1; white-space: nowrap; }
.nav-caret { font-size: 11px; color: var(--muted); transition: transform .15s ease; }
.nav-group.open > .nav-parent .nav-caret { transform: rotate(180deg); }
.nav-children { display: none; flex-direction: column; gap: 1px; padding: 2px 0 6px; }
.nav-group.open > .nav-children { display: flex; }
.nav-children button { width: 100%; text-align: left; border: none; background: none; border-left: 3px solid transparent;
  padding: 8px 12px 8px 44px; color: var(--muted); font-size: 13px; border-radius: 0 6px 6px 0; }
.nav-children button:hover { background: var(--bg); color: var(--text); }
.nav-children button.active { color: var(--green-dark); background: #eef9f1; border-left-color: var(--green); font-weight: 600; }
/* 3단계 메뉴(상위 메뉴의 하위 항목) — 들여쓰기 + 트리 표시 */
/* 하위 묶음 라벨(보고서 설정 등) — 클릭되지 않는 소제목.
   일반 메뉴 항목(광고주 관리 등)과 같은 서체·크기·여백(2026-09-01 지시) */
.nav-children .nav-grouplabel { padding: 8px 12px 8px 44px; font-size: 13px;
  font-weight: 600; color: rgba(255, 255, 255, 0.72);
  border-left: 3px solid transparent; }   /* 버튼과 같은 좌측 시작점(3px 보더 몫) */
.nav-children button.nav-sub { padding-left: 60px; font-size: 12.5px; position: relative; }
.nav-children button.nav-sub::before { content: "└"; position: absolute; left: 44px; color: #c3cbd4; font-size: 11px; }
.nav-children button.nav-sub.active::before { color: var(--green); }

#sidebar.collapsed { width: 60px; }
#sidebar.collapsed .side-adv,
#sidebar.collapsed .nav-label,
#sidebar.collapsed .nav-caret,
#sidebar.collapsed .nav-children { display: none; }
#sidebar.collapsed .nav-parent { justify-content: center; padding: 12px 0; }

.badge { background: #eef2f7; color: #445; border-radius: 12px; padding: 3px 10px; font-size: 13px; }
.badge.mock { background: #fff4e5; color: #b06a00; }
.muted { color: var(--muted); font-size: 13px; }

button { cursor: pointer; border: 1px solid var(--border); background: #fff; border-radius: 6px; padding: 7px 12px; font-size: 13px; font-family: inherit; }
button.primary { background: var(--green); color: #fff; border-color: var(--green); }
button.primary:hover { background: var(--green-dark); }
button.danger { background: #fdecec; color: #b00020; border-color: #f0c0c0; }
select, input, textarea { font-family: inherit; }
select, input { border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; font-size: 13px; background: #fff; color: var(--text); }

main { padding: 18px 22px 60px; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* 카드 */
.cards { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 6px; }
/* 카드 7장 이상(통합 대시보드 커머스형, #570) — 4열 격자(7장 = 4+3). flex로는 6+1로 한 장만 떨어진다 */
.cards.cards-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cards.cards-grid4 .card { min-width: 0; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; flex: 0 0 auto; min-width: 210px; }
.card .label { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.card .value { font-size: 24px; font-weight: 700; margin-top: 6px; white-space: nowrap; }
.card .sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.mom { font-weight: 600; }
/* 증감 색은 한국 증시 관례를 따른다 — 오르면 빨강, 내리면 파랑(2026-08-25 지시).
   모든 화면이 이 두 클래스를 쓰므로 여기만 바꾸면 전부 따라온다. */
.mom.up { color: #d12b2b; }
.mom.down { color: #1b64da; }

/* 블록/표 (kw-block 스타일) */
.kw-block { background: var(--card); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 14px; overflow: hidden; }
.kw-block h3 { margin: 0; padding: 12px 16px; background: #fafbfc; border-bottom: 1px solid var(--border); font-size: 15px; display: flex; justify-content: space-between; align-items: center; }
.kw-block h3 .ts { font-size: 12px; color: var(--muted); font-weight: 400; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
/* 정렬 규칙(전 화면 공통): 컬럼명·데이터 모두 가운데 정렬 */
th, td { text-align: center; padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
/* 컬럼명은 스크롤해도 붙어 있게 한다(2026-08-25 지시) — 표가 길어지면 지금 보는
   숫자가 어느 열인지 알 수 없다. 세로 스크롤이 있는 표(.table-wrap 에 max-height)
   에서만 실제로 붙고, 짧은 표는 그대로다. 배경은 불투명해야 밑줄이 비치지 않는다. */
th { background: #fafbfc; color: #556; font-weight: 600;
     position: sticky; top: 0; z-index: 2; }
/* 합계 줄이 헤더 바로 아래에 있는 표는 그 줄도 함께 붙인다 — 스크롤 중에도
   전체 합계를 옆에 두고 개별 행을 읽을 수 있다. */
.table-wrap tr.sum-top td { position: sticky; top: var(--sum-top, 33px); z-index: 1; }
/* 붙는 자리 = 머리글의 **실제 높이** (#468, 2026-09-28) — 열 이름이 두 줄로 꺾이면 머리글이 33px보다 높아져
   합계 줄이 그 밑에 깔려 숫자 윗부분만 보였다(상품 관리 항목수 「17,513」이 「3」만). 높이는 app.js
   `syncSumTop`이 머리글 줄을 재어 표의 `--sum-top`에 넣는다. 재기 전·스크립트가 안 붙는 표는 33px 그대로다.
   합계 숫자는 좁은 칸에서도 한 줄 — 셀 규칙(white-space:normal·overflow-wrap:anywhere)이 ID 선택자라
   셀이 아니라 숫자를 감싼 <b>에 건다(상속을 끊는다). */
tr.sum-top b { white-space: nowrap; font-variant-numeric: tabular-nums; }
tr:hover td { background: #fafdff; }
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: center; font-variant-numeric: tabular-nums; }
/* 전 메뉴 표는 컬럼명·내용 모두 가운데 정렬 (2026-09-02 지시 — .left도 덮는다) */
th, td, th.left, td.left { text-align: center; }
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--border); border-radius: 10px; }
/* 빈 결과 안내 행 (2026-10-05 "알림이 짤리네") — 한 줄 전체를 쓰는 colspan 안내 칸의 내용을 app.js
   wrapEmptyCells가 .tbl-empty로 감싼다. 블록 폭 = 그 .table-wrap의 보이는 폭(--tbl-vis-w, ResizeObserver 실측)이고
   왼쪽에 붙어(sticky) 표를 가로로 밀어도 따라오며, 좁으면 줄바꿈한다. 표가 넘치지 않으면 칸 폭과 같아 예전처럼 가운데다.
   max-width:100%는 반올림·ID 선택자 패딩이 있어도 칸을 넘겨 가로 스크롤을 만들지 않게 하는 안전판. 좌우 여백은 블록이 갖는다. */
.table-wrap td:has(> .tbl-empty) { padding-left: 0; padding-right: 0; }
.tbl-empty { position: sticky; left: 0; display: block; box-sizing: border-box;
  width: var(--tbl-vis-w, 100%); max-width: 100%; padding: 0 12px;
  white-space: normal; word-break: keep-all; overflow-wrap: anywhere; text-align: inherit; }
/* 토스페이 [프로모션별 월 요약] — 이 표만 16열이다(형제 매체 개요 9열 · 같은 화면 일자별 13열).
   예산·소진율·기본 ROAS·발행수·PV/UV가 계약 단위 값이라 뺄 수 없어, 폭을 줄여 **리포트 축
   (광고비·전환수·전환매출)이 1400px 안에** 들어오게 한다 (2026-09-21 오스카 레이아웃 판정).
   ① 좌우 여백 12 → 8px(#dom-table과 같은 선례) ② 열 이름의 괄호 보조어는 작은 글씨
   ③ 프로모션 이름은 190px에서 …으로 줄이고 전체 이름은 title(마우스)로. 값은 하나도 감추지 않는다. */
table.tp-promo th, table.tp-promo td { padding-left: 8px; padding-right: 8px; }
table.tp-promo th .sub { display: block; font-size: 11px; font-weight: 400; color: var(--muted); }
table.tp-promo td.tp-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
/* 열 이름이 두 줄이라 머리글이 그만큼 높다 — 붙어 있는 합계 줄의 자리도 같이 내린다(기본 33px) */
.table-wrap table.tp-promo tr.sum-top td { top: var(--sum-top, 48px); }

.section-title { margin: 28px 0 10px; font-size: 16px; border-top: 1px solid var(--border); padding-top: 20px; }
.cov-controls { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.cov-controls label { font-size: 13px; color: var(--muted); }
.cov-controls select, .cov-controls input { margin-left: 4px; }
.ctl-label { font-size: 13px; color: var(--muted); }

/* 차트 */
.chart-box { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px; margin: 12px 0; position: relative; }
/* 넓은 모니터에서 차트가 화면을 다 채워 과하게 커 보이지 않도록 폭을 묶는다.
   viewBox 비율이 유지되므로 폭을 제한하면 높이도 함께 줄어든다(표는 전체 폭 그대로). */
/* 차트는 보이는 화면 폭을 그대로 쓴다 (2026-08-05 지시 — 1080px 고정폭 제거) */
.legend { display: flex; gap: 16px; font-size: 12px; color: #556; margin-bottom: 8px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
#tooltip, #so-tooltip { position: absolute; pointer-events: none; display: none; z-index: 5;
  background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.12); min-width: 150px; }
#tooltip .t, #so-tooltip .t { font-weight: 700; margin-bottom: 4px; }
#tooltip .row, #so-tooltip .row { display: flex; justify-content: space-between; gap: 12px; color: #556; }
#tooltip .row b { color: var(--text); font-variant-numeric: tabular-nums; }

/* 상태 뱃지 */
.status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.status .ic { font-size: 11px; }
.status.good { color: var(--green-dark); }
.status.warn { color: #b06a00; }
.status.crit { color: #b00020; }
.chip { display: inline-block; font-size: 12px; padding: 3px 10px; border-radius: 12px; background: #eef2f7; color: #445; margin-right: 6px; }
.chip.warn { background: #fff4e5; color: #b06a00; }
.chip.crit { background: #fdecec; color: #b00020; }
/* 주문을 어디서 받아왔는지 — 마켓 이름 옆에 작게 덧붙인다 */
.chip.src { font-size: 11px; padding: 2px 7px; background: transparent; border: 1px solid var(--border); color: #778; }
/* 카페24 마켓연동으로 들어온 주문 — 직접 연동 마켓과 색으로 구분한다 */
.chip.via24 { background: #eef4ff; color: #3a63c8; }
/* 게이트 플랫폼 연결 — 권한 칩 켜고 끄기(2026-09-29). 꺼진 권한은 흐리게 + 취소선 */
button.chip.gl-scope { border: 1px solid transparent; cursor: pointer; font-family: inherit; line-height: 1.4; margin: 2px 6px 2px 0; }
button.chip.gl-scope:hover { border-color: var(--border); }
button.chip.gl-scope.off { background: transparent; border-color: var(--border); color: #aab; text-decoration: line-through; }
/* 공통 기본 권장으로 자동 매칭된 UTM 값 (2026-09-21) — 사람이 정한 값(진한 칩)과 **한눈에** 갈리게
   바탕을 비우고 점선 테두리를 쓴다. 「기본」은 값 이름의 일부로 읽히지 않게 배지로 떼어 둔다. */
.chip.chip-def { background: #fbfcfe; color: #6b7280; border: 1px dashed #c7d2e0; }
.chip.chip-def .def-tag { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 8px;
  background: #e7ecf3; color: #5b6676; font-size: 10.5px; font-weight: 600; vertical-align: 1px; }

/* 로그인 */
.login-overlay { position: fixed; inset: 0; background: var(--bg); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.login-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 32px; width: 100%; max-width: 380px; box-shadow: 0 4px 24px rgba(0,0,0,.06); }
.login-card h2 { margin: 0 0 6px; font-size: 20px; }
.login-card label { display: block; font-size: 13px; color: #445; margin: 14px 0 0; }
.login-card input { width: 100%; margin-top: 5px; padding: 9px 10px; }
.login-card button { margin-top: 20px; width: 100%; padding: 11px; }
.login-error { color: #b00020; font-size: 13px; min-height: 18px; margin: 10px 0 0; }
.hint { font-size: 12px; color: var(--muted); margin-top: 8px; }

/* 로그인이 필요한 매체 팝업(app.js extLoginReminder) — 줄마다의 [로그인하러 가기]가 이 팝업의 주 실행 버튼이다
   (2026-09-20 지시 "열기 버튼을 더 눈에 띄게 크게 만들어주고 들어가야 하는 버튼의 느낌으로"). 색은 기존
   button.primary(--green)를 그대로 쓰고 여기서는 크기·자리만 키운다 — 새 색·새 컴포넌트를 만들지 않는다. */
.exl-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.exl-row { display: flex; align-items: center; gap: 14px; padding: 11px 12px 11px 14px;
  border: 1px solid var(--border); border-radius: 10px; background: #FAFBFC; }
.exl-txt { flex: 1 1 auto; min-width: 0; line-height: 1.5; }
.exl-txt b { font-size: 14px; }
.exl-why { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.exl-go { flex: 0 0 auto; font-size: 14px; font-weight: 700; padding: 11px 18px; border-radius: 8px; white-space: nowrap; }
.exl-go .exl-arrow { margin-left: 6px; font-weight: 400; }

/* 모달 */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; z-index: 1100; }

/* 원본 미리보기 — 받기 전에 화면에서 먼저 본다. 모달보다 위(z-index)에 둔다:
   업로드 실패 안내 모달에서 원본을 열어 볼 수 있어야 한다. */
.fpv { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex;
  align-items: center; justify-content: center; z-index: 1200; padding: 24px; }
.fpv-card { background: #fff; border-radius: 10px; width: min(1040px, 100%);
  height: min(88vh, 100%); display: flex; flex-direction: column; overflow: hidden; }
.fpv-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px 8px 14px;
  border-bottom: 1px solid #e7e9ec; }
.fpv-name { font-size: 13px; font-weight: 600; color: #333d4b; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.fpv-btn { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 6px; border: 1px solid #dfe3e8;
  background: #fff; color: #4b5563; cursor: pointer; padding: 0; }
.fpv-btn:hover { background: #f2f4f6; color: #111; }
.fpv-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fpv-body { flex: 1; min-height: 0; background: #f5f6f8; }
.fpv-body iframe { width: 100%; height: 100%; border: 0; display: block; }
.fpv-body img { max-width: 100%; max-height: 100%; display: block; margin: 0 auto; }
.modal-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 22px; width: 100%; max-width: 420px; max-height: 88vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,.18); }
/* 상세 표 팝업이 좁아 가로 스크롤이 생겼다(2026-08-26 지시) — 화면의 94%까지 쓴다 */
.modal-card.wide { max-width: min(1180px, 94vw); }
.modal-card.mid { max-width: min(760px, 94vw); }  /* 표 3~4열 팝업 (2026-09-02) */
/* 키워드 상세(캠페인·그룹 + 실적 9열 + 순위) — 12열이 1,180px에 안 들어가 잘렸다(2026-09-08 지적). 96vw까지, 표 글자 축소 */
.modal-card.xwide { max-width: min(1560px, 96vw); }
.modal-card.xwide .sakw-wrap table { font-size: 12.5px; }
.modal-card.xwide .sakw-wrap th, .modal-card.xwide .sakw-wrap td { padding: 7px 8px; white-space: nowrap; }
.modal-card { position: relative; }

/* 설정 팝업 공통 — 구역 나누기 + 목록형 체크 (2026-09-10 지시 "레이아웃 좀 이쁘게").
   ※ 선택자에 .modal-card를 반드시 붙인다 — 위의 `.modal-card label{display:block}`,
     `.modal-card input{width:100%}`가 (0,2,1)이라 그냥 `.cfg-list > label`로는 눌린다
     (실제로 체크박스가 폭 315px로 늘어나 이름이 오른쪽 끝으로 밀려났다). */
.cfg-sec { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--border); }
.cfg-sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.cfg-sec > h4 { margin: 0 0 5px; font-size: 14px; font-weight: 700; color: var(--primary); }
.cfg-sec > .hint { margin: 0 0 11px; }
/* 목록형 체크 리스트 (2026-09-10 지시 "매체통합과 보여줄 컬럼은 리스트형태가 좋을거 같은데") —
   한 줄에 하나씩, 이름은 왼쪽·부가 정보는 오른쪽 끝. 고른 줄은 브랜드 틴트로 표시한다. */
.cfg-list { border: 1px solid var(--border); border-radius: 10px; background: #fff;
  overflow: hidden; }
.modal-card .cfg-list > label { display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 9px 13px; font-size: 13px; color: var(--text); font-weight: 400;
  cursor: pointer; white-space: nowrap; min-width: 0;
  border-top: 1px solid #EEF1F5; transition: background .12s; }
.modal-card .cfg-list > label:first-child { border-top: 0; }
.modal-card .cfg-list > label:hover { background: #F7F9FD; }
.modal-card .cfg-list input { width: auto; margin: 0; padding: 0; flex: 0 0 auto; }
.cfg-list .nm { overflow: hidden; text-overflow: ellipsis; }
.cfg-list .sub { margin-left: auto; flex: 0 0 auto; color: var(--muted); font-size: 11.5px;
  padding-left: 10px; }
.modal-card .cfg-list > label:has(input:checked) { background: #EEF3FB;
  color: var(--primary); font-weight: 600; }
.modal-card .cfg-list > label:has(input:checked) .sub { color: #6B87B8; }
/* 구역 제목 우측의 전체선택/해제 */
.cfg-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 5px; }
.cfg-head h4 { margin: 0; font-size: 14px; font-weight: 700; color: var(--primary); }
.cfg-head .act { margin-left: auto; font-size: 12px; white-space: nowrap; }
.cfg-head .act a { color: var(--muted); text-decoration: none; }
.cfg-head .act a:hover { color: var(--primary); text-decoration: underline; }
/* 설정 항목이 많아 두 단으로 나눈다 (2026-09-10 지시 "변경항목들이 많으니 레이아웃과
   디자인에 신경 좀 써줘") — 좁은 화면에서는 한 단으로 접힌다. */
.cfg-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; align-items: start; }
.cfg-col > .cfg-sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 820px) { .cfg-cols { grid-template-columns: 1fr; } }
/* 목록이 길면 구역 안에서만 스크롤 — 팝업 전체가 길어지지 않게 */
.cfg-list.scroll { max-height: 272px; overflow-y: auto; }
/* 딸린 항목 — 위 체크를 켜야 쓸 수 있다 */
.modal-card .cfg-list > label.sub-item { padding-left: 32px; }
.modal-card .cfg-list > label.off { opacity: .45; cursor: default; }
.modal-card .cfg-list > label.off:hover { background: transparent; }
/* 팝업 아래 폭 전체 버튼 */
.cfg-wide-btn { width: 100%; }
/* 상품 관리 소구포인트 칸 (2026-09-10 지시) — page 값 + 그 번호의 랜딩 배너 썸네일.
   글자만 보면 소구점이 뭔지 알 수 없어 작은 그림을 함께 둔다. 누르면 크게 본다.
   ※ 칩이 세로로 쌓이면 한 줄이 300px까지 길어져 표를 못 읽는다("보기가 너무 힘들어") —
     가로로 흘러 감싸도록 두고 썸네일도 작게. 유입수는 칩에서 빼고 툴팁으로 옮겼다. */
/* 2026-09-11 "사용자가 보기 편하게" — 썸네일을 키우고(28×18 → 40×26) 칩 사이를 벌렸다.
   소구포인트명이 붙은 칩은 이름을 앞에, 값(N)을 옅게 뒤에 두고 넓어지지 않게 170px에서 자른다. */
.dom-pars { display: flex; flex-wrap: wrap; gap: 4px 5px; align-items: center; }
.dom-par { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px 2px 2px;
  border: 1px solid var(--border); border-radius: 6px; background: #fff;
  font-size: 11.5px; line-height: 1.2; white-space: nowrap; max-width: 170px; }
.dom-par:hover { border-color: #A9BEDE; background: #F7F9FD; }
.dom-par b { font-variant-numeric: tabular-nums; }
.dom-par.named { border-color: #C9D7EC; background: #F7F9FD; color: var(--primary); }
.dom-par .lab { overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.dom-par .val { color: #98a2b3; font-size: 10.5px; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.dom-ban { width: 40px; height: 26px; object-fit: cover; border-radius: 3px;
  border: 1px solid #E2E8F0; background: #F3F5F8; cursor: zoom-in; display: block;
  flex: 0 0 auto; }
.dom-ban:hover { border-color: var(--primary); }
/* 상품 관리 표 — 한 화면에 상품이 최대한 많이 보이게 (2026-09-10 지시).
   ① table-layout:fixed — 지정한 폭을 지킨다. 예전에는 URL 칸이 남는 폭을 전부 먹어
      900px까지 벌어졌다("URL 컬럼만 너무 길어보이네"). 소구포인트도 최소 폭을 지정해
      좁은 화면에서 칩보다 작게 눌리지 않게 한다.
   ② 행 높이는 칸 안의 줄 수가 정한다 — URL 한 줄·상품명 두 줄로 묶고 세로 여백을 줄였다.
   min-width를 주어 좁은 화면에서는 칸을 눌러 짜지 말고 가로로 스크롤한다. */
#dom-table { table-layout: fixed; width: 100%; min-width: 0; }
#dom-table td { padding-top: 4px; padding-bottom: 4px; vertical-align: middle;
  white-space: normal; overflow-wrap: anywhere; }
/* 광고주 유형과 무관하게 긴 매체/상품명은 자기 셀 안에서만 흐른다. */
#tab-domains .table-wrap { min-width: 0; max-width: 100%; }
#dom-table .dom-sources { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; min-width: 0; }
#dom-table .dom-source, #dom-table .dom-sources .ch-tag { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
#dom-table .dom-media { font-size: 12px; line-height: 1.4; }
#dom-table .dom-pars { justify-content: center; }
#dom-table .dom-par { max-width: 100%; }
#dom-table .dom-par .lab { min-width: 0; }
#dom-table td, #dom-table th { padding-left: 8px; padding-right: 8px; }
/* 컬럼명 줄 높이는 건드리지 않는다 — 합계 줄이 `top:33px`로 그 아래에 붙어 있다 */
#dom-table td.dom-url { font-size: 12px; }
#dom-table td.dom-code { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* 상품코드(2026-10-01) — 한 줄 고정(사용자 "긴 코드 줄바꿈도 같이 고쳐줘": CA-BWNLDE0650EW가 끝 글자 W만 다음 줄로 떨어졌다). 폭은 app.js domColumns code w — 그래도 넘치면 말줄임, 전체는 툴팁 */
/* 상품 URL은 **전부 보이게** (2026-09-14 지시 "상품 URL이 한눈에 다 들어올 수 있게 열 사이즈를 조정").
   ① URL 칸 폭 230 → 350px — AIA 상품 URL(https://sales.hr.aia.co.kr/event/aia_xxxxx.jsp, 45자 안팎)이 한 줄에 들어간다.
      app.js가 th에 인라인 width를 주므로 여기서 !important로 덮는다(다른 세션이 app.js를 편집 중이라 CSS만 고쳤다).
   ② 그보다 긴 URL은 …로 자르지 않고 두 줄로 꺾는다. 줄어든 폭은 소구포인트 칸(폭 미지정)에서 나온다.
   모바일은 mobile.css가 한 줄 말줄임으로 되돌린다. */
#dom-table th.dom-url-h { width: auto; }   /* 열 순서가 바뀌어도(페이지 현황 추가 2026-09-15) URL 칸만 — 예전 nth-child(3)은 페이지 현황을 넓혔다 */   /* 2026-09-14 재점검: direct.aia.co.kr/DMD/webin/… 도 한 줄 */
#dom-table td.dom-url a { display: block; white-space: normal; overflow-wrap: anywhere; word-break: break-all;
  line-height: 1.35; }
/* 상품명은 단어 단위로 끊고 두 줄까지. 클램프는 안쪽 span에 건다 —
   td에 display:-webkit-box를 주면 셀이 table-cell을 잃어 표가 무너진다. */
/* 열이 11개인 조합(스토어+소구포인트+매체 수집)만 — 1,140px 본문에서 관리 버튼·합계 숫자가 눌린다.
   값을 좁히는 대신 .table-wrap 안에서 가로로 민다 (2026-09-23 오스카).
   좁은 화면(≤1000px)은 아래 같은 파일의 미디어쿼리가 카드 레이아웃과 함께 이 최소 폭을 푼다. */
#dom-table.dom-wide { min-width: 1300px; }
#dom-table td.dom-title { white-space: normal; }
#dom-table td.dom-title span.t { display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all;
  font-size: 13px; line-height: 1.35; }
#dom-table td button { padding: 2px 8px; font-size: 11px; }

/* UTM 생성 ② 소구포인트 고르기 (2026-09-10 지시) — 상품 URL을 고르면 그 URL의 page 값이
   랜딩 캐러셀 배너 그림으로 늘어선다. 글자(page=3)만으로는 어느 소구점인지 알 수 없다. */
.ug-asps { display: flex; flex-wrap: wrap; gap: 8px; }
.modal-card button.ug-asp { display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: auto; padding: 5px 5px 4px; border: 1px solid var(--border); border-radius: 8px;
  background: #fff; cursor: pointer; font-size: 11px; line-height: 1; color: #344054; }
.modal-card button.ug-asp:hover { border-color: #A9BEDE; background: #F7F9FD; }
.modal-card button.ug-asp.on { border-color: var(--primary); background: #EDF3FC;
  box-shadow: inset 0 0 0 1px var(--primary); color: var(--primary); font-weight: 700; }
.ug-asp img, .ug-asp .ug-asp-none { width: 72px; height: 46px; border-radius: 4px;
  border: 1px solid #E2E8F0; object-fit: cover; display: block; }
.ug-asp .ug-asp-none { display: flex; align-items: center; justify-content: center;
  background: #F3F5F8; color: #98a2b3; font-size: 11px; }

/* UTM 생성 2단계 — 파워컨텐츠 글 목록 (2026-09-28 #460). 글 제목·캠페인명이 길어 칸이 늘어나지 않게 줄바꿈한다. */
.ug-pwc-table td { vertical-align: top; }
.ug-pwc-table td.ug-pwc-title { min-width: 180px; max-width: 360px; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
.ug-pwc-table td.ug-pwc-prod { min-width: 150px; max-width: 240px; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
.ug-pwc-unreg { color: #C0392B; font-weight: 600; font-size: 12px; }

/* 이미지 미리보기 팝업 (2026-09-10 지시 "레이아웃 좀 신경써줘") — 도구줄 한 줄 + 뷰어 영역.
   이미지를 그냥 max-width:100%로 두면 팝업이 한없이 길어져 표가 있는 뒤 화면까지 밀린다.
   회색 무대 안에서만 스크롤하고, [원본 크기]로 글자를 키워 볼 수 있게 한다. */
.imgview-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 12px; }
.imgview-bar .seg { display: inline-flex; gap: 3px; }
.imgview-bar .seg button { font-size: 12.5px; padding: 7px 12px; }
.imgview-note { color: var(--muted); font-size: 12px; margin-left: auto;
  text-align: right; }
.imgview-stage { background: #EEF1F5; border: 1px solid var(--border);
  border-radius: 10px; padding: 14px; max-height: 66vh; overflow: auto;
  text-align: center; }
.imgview-stage img { display: inline-block; background: #fff;
  border: 1px solid #D9DEE6; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.imgview-stage img.fit { max-width: 100%; height: auto; }
.imgview-stage img.raw { max-width: none; }

/* 구역 제목 옆 설정 버튼 — 자주 쓰는 입구라 눈에 띄게 (2026-09-10 지시) */
.cfg-btn { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px;
  padding: 6px 14px; font-size: 12.5px; font-weight: 600; vertical-align: middle;
  box-shadow: 0 1px 3px rgba(25,68,140,.28); }
.cfg-btn svg { flex: 0 0 auto; }
.cfg-btn:hover { box-shadow: 0 2px 7px rgba(25,68,140,.36); }
/* 라벨 + 스위치 한 줄 (부가세·마크업) */
.cfg-row { display: flex; align-items: center; gap: 12px; margin: 9px 0; }
.cfg-row > .lb { flex: 0 0 52px; color: #4B5563; font-size: 13px; }
.cfg-row .seg { display: inline-flex; gap: 3px; flex-wrap: wrap; }
.cfg-row .seg button { font-size: 12.5px; padding: 7px 11px; }
/* 시각 추가 한 줄 — 셀렉트가 남는 폭을 먹고 버튼은 제 크기 */
.cfg-add { display: flex; gap: 8px; align-items: center; }
.modal-card .cfg-add select { flex: 1; width: auto; min-width: 0; margin-top: 0; }
.cfg-add button { flex: 0 0 auto; }
.cfg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 11px; }
/* 모든 팝업 우측 상단 × 닫기 (2026-09-09 지시) */
.modal-x { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; padding: 0; border: none; background: transparent;
  color: #6b7280; font-size: 22px; line-height: 30px; border-radius: 8px; cursor: pointer; }
.modal-x:hover { background: var(--bg); color: var(--text); }
.modal-card h3 { margin: 0 0 12px; font-size: 16px; padding-right: 34px; }
.modal-card label { display: block; font-size: 13px; color: #445; margin: 10px 0 0; }
.modal-card input, .modal-card select { width: 100%; margin-top: 5px; padding: 9px 10px; }
.modal-card .chk { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: #445; }
.modal-card .chk input { width: auto; margin: 0; }

/* 선택형 팝업(다운로드·업로드 선택 등) — 라디오 + 설명 + 보조 버튼 한 줄 */
.io-options { display: flex; flex-direction: column; gap: 8px; }
.modal-card label.io-option {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-weight: 400;
}
.modal-card label.io-option:hover { background: #fafdff; }
.modal-card label.io-option input[type="radio"] { width: 16px; height: 16px; flex: 0 0 16px; margin: 0; }
.io-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; line-height: 1.45; }
.io-text b { font-size: 13.5px; color: var(--text); }
.io-text .muted { font-size: 12px; white-space: normal; }
.modal-card .io-side { flex: 0 0 auto; width: auto; margin: 0; font-size: 12px; padding: 6px 10px; }
/* 큰 선택 배너 — 팝업을 열면 먼저 두 갈래를 고른다(월 목표: 엑셀 업로드 / 직접 입력, 2026-09-11 지시) */
.pick-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pick-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left;
  margin: 0; padding: 22px 20px; min-height: 172px; border: 1.5px solid var(--border); border-radius: 12px;
  background: #fff; cursor: pointer; font-weight: 400; color: var(--text, #222);
}
.pick-card:hover, .pick-card:focus-visible { border-color: #19448C; background: #f5f9ff; outline: none; }
.pick-card .pk-ico { width: 34px; height: 34px; color: #19448C; }
.pick-card .pk-title { font-size: 17px; font-weight: 700; color: #19448C; }
.pick-card .pk-desc { font-size: 12.5px; line-height: 1.55; color: #555; }
.pick-card .pk-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }
/* 글자색을 직접 준다 — 부모의 color를 물려받으면 흰 바탕에 흰 글자가 되는 경우가 있었다(2026-09-11 미리보기에서 확인) */
.modal-card .pick-card .pk-foot button {
  width: auto; margin: 0; font-size: 12px; padding: 5px 10px;
  color: #19448C; background: #fff; border: 1px solid #C9D7EC; font-weight: 600;
}
.modal-card .pick-card .pk-foot button:hover { background: #DFE8F5; }
@media (max-width: 480px) { .pick-cards { grid-template-columns: 1fr; } .pick-card { min-height: 0; } }
/* 월 목표 — DB 목표 [월 목표 | 일목표] · 일목표 달력 입력 · CPL 자동 (2026-09-11 지시) */
.goal-conv-head { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 6px; font-size: 13px; }
.goal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.goal-days .gd-h { font-size: 11px; font-weight: 700; color: #19448C; text-align: center; }
.goal-days .gd-h.sun, .goal-days .gd.sun span { color: #C0392B; }
.goal-days .gd-h.sat, .goal-days .gd.sat span { color: #064EC8; }
.modal-card .goal-days label.gd { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: 11.5px; font-weight: 400; }
.goal-days label.gd:first-of-type { grid-column-start: var(--start, 1); }
.modal-card .goal-days input { width: 100%; margin: 0; padding: 5px 6px; font-size: 12.5px; }
.goal-auto {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 0;
  padding: 10px 12px; background: #F8F9FA; border: 1px solid var(--border); border-radius: 8px; font-size: 13px;
}
@media (max-width: 480px) {
  .goal-days { grid-template-columns: repeat(3, 1fr); }
  .goal-days .gd-h { display: none; }
  .goal-days label.gd:first-of-type { grid-column-start: auto; }
}
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.modal-error { color: #b00020; font-size: 13px; min-height: 16px; margin: 8px 0 0; }
.modal-card p.msg { margin: 0; font-size: 14px; line-height: 1.6; white-space: pre-line; }

/* 토스트 알림 (confirm/alert 대체) */
#toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(12px);
  background: #1c1e21; color: #fff; font-size: 13px; padding: 10px 18px;
  border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.25);
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
  z-index: 1200; max-width: 80vw;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 온보딩(브랜드 없을 때) */
.onboarding { display: flex; justify-content: center; padding: 60px 20px; }
.onboarding-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 32px; width: 100%; max-width: 520px; box-shadow: 0 4px 24px rgba(0,0,0,.06); }
.onboarding-card h2 { margin: 0 0 6px; }
.onboarding-card label { display: block; font-size: 13px; color: #445; margin: 12px 0 0; }
.onboarding-card input { width: 100%; margin-top: 5px; }
.onboarding-card button { margin-top: 20px; width: 100%; padding: 11px; }

/* 사용자 관리 행 (naver 스타일) */
/* 페이지 레이아웃 통일(2026-08-05): 상품별 정산내역처럼 플랫하게 —
   카드 박스 래퍼를 없애고 섹션 구분은 제목·여백으로만 한다 */
.manage-section { background: transparent; border: none; border-radius: 0; padding: 0; margin-bottom: 24px; }
.manage-section > h3 { margin: 0 0 4px; font-size: 15px; }
.manage-section > .muted { margin-bottom: 12px; }
.row-toolbar { display: flex; gap: 8px; align-items: center; margin: 12px 0; flex-wrap: wrap; }
/* 판매중지 상품 — 목록에서 흐리게 두어 판매중과 한눈에 구분되게 한다 */
tr.off-sale td { opacity: .55; }
tr.off-sale td:first-child, tr.off-sale td button { opacity: 1; }

/* 주문의 상품 한 줄 — 이름 아래에 수량·금액을 작게 붙인다 */
.item-line { padding: 2px 0; }
.item-line + .item-line { border-top: 1px dashed var(--border); margin-top: 4px; padding-top: 5px; }
.item-line .muted { display: block; font-size: 11.5px; }

/* 표 바로 위에 붙는 조회 기간 안내 — 첫 컬럼과 나란히 보이도록 왼쪽 정렬 */
.list-meta { padding: 2px 4px 6px; font-size: 12px; }

/* 페이지 넘김 — 목록이 한 화면을 넘어가는 곳에서 공통으로 쓴다 */
.pager { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 12px 6px 4px; border-top: 1px solid var(--border); margin-top: 6px; }
.pager .pg-info { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.pager .pg-info b { color: var(--text); font-weight: 600; }
.pager .pg-nav { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.pager button { min-width: 32px; height: 30px; padding: 0 9px; font-size: 12.5px; line-height: 28px; border-radius: 6px; }
.pager button.pg-edge { padding: 0 10px; color: var(--muted); }
.pager button.pg-edge:not(:disabled):hover { color: var(--text); }
.pager button:disabled { opacity: .35; cursor: default; }
.pager .pg-ell { color: var(--muted); padding: 0 2px; font-size: 12px; }
/* 설정 화면의 입력 폼 — 라벨 위, 입력 아래. 모달 폼과 같은 글꼴·크기를 쓴다 */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; margin: 14px 0 4px; max-width: 900px; }
.form-grid label { display: block; font-size: 13px; color: #445; margin: 0; }
/* textarea 를 빼면 기본 inline 크기(20칸)로 라벨 옆에 붙어 버린다 — 네이버웍스 봇의
   Private Key(PEM) 칸이 그랬다. 다른 입력칸과 같은 폭·같은 자리로 맞춘다. */
.form-grid input, .form-grid select, .form-grid textarea {
  width: 100%; margin-top: 5px; padding: 9px 10px; }
.form-grid textarea { display: block; resize: vertical; min-height: 76px; }
.form-grid .chk { display: flex; align-items: center; gap: 8px; align-self: end; padding-bottom: 8px; }
.form-grid .chk input { width: auto; margin: 0; }
.form-grid .hint { grid-column: 1 / -1; margin: 0; }
/* 기간 빠른 선택(오늘·어제·최근 7일·최근 30일·이번 달·저번 달) — 기간 입력 옆 셀렉트 */
.preset-select { min-width: 108px; }
.user-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 13px 10px; border-bottom: 1px solid var(--border); transition: background .12s; }
.user-row:last-child { border-bottom: none; }
/* 모달 목록의 체크박스 — `.modal-card input{width:100%}`에 눌려 20×13px로 찌그러진다 (2026-09-16 오스카, 같은 함정 3번째) */
.modal-card .pick-list input[type="checkbox"], .modal-card #m-kkacc-list input[type="checkbox"] {
  width: 16px; height: 16px; margin: 0; padding: 0; }
/* 팝업 안 목록은 줄을 바꿔 가로 스크롤을 만들지 않는다 (2026-09-16 오스카: 1280px 모달 420px에 표 491px) */
#m-kkacc-list td { white-space: normal; word-break: keep-all; }
/* 마우스를 올린 사용자 줄 음영 (2026-09-15 지시 "사용자 라인에 마우스 커서를 가리키면 음영을 표시해줘") */
.user-row:hover { background: #F2F6FC; }
.user-row .who { flex: 1; min-width: 200px; }
.user-row .who b { font-size: 14px; }
.user-row .who .meta { color: var(--muted); font-size: 12.5px; }
.user-row button { font-size: 12px; padding: 5px 10px; }

.rank-badge { display: inline-block; min-width: 22px; text-align: center; background: var(--green); color: #fff; border-radius: 5px; padding: 2px 6px; font-weight: 700; }
.ded-link { color: var(--pc); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.ded-link:hover { color: #1c53b8; }
.warn-banner { background: #fff4e5; border: 1px solid #f0d8b0; border-radius: 8px;
  padding: 12px 16px; margin-bottom: 12px; font-size: 13px; color: #7a5200; line-height: 1.9; }
.warn-banner button { font-size: 12px; padding: 3px 10px; margin: 0 3px; }
.tag-link { cursor: pointer; text-decoration: none; }
.tag-link:hover .ch-tag { text-decoration: underline; text-underline-offset: 3px; }

/* 채널 태그 */
.ch-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }

/* ── 멀티 셀렉트 드롭다운 (브랜드 복수 선택) ─────────── */
.msel { position: relative; }
.msel-btn { width: 100%; text-align: left; background: #fff; border: 1px solid var(--border);
  border-radius: 6px; padding: 8px 28px 8px 10px; font-size: 13px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; }
.msel-btn::after { content: "▾"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: var(--muted); }
.msel.open .msel-btn { border-color: var(--green); }
.msel-panel { display: none; position: absolute; z-index: 120; top: calc(100% + 4px); left: 0; right: 0;
  min-width: 180px; background: #fff; border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 260px; overflow-y: auto; padding: 6px; }
.msel.open .msel-panel { display: block; }
.msel-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px;
  font-size: 13px; cursor: pointer; user-select: none; }
.msel-item:hover { background: var(--bg); }
.msel-item input { margin: 0; accent-color: var(--green); }
.msel-all { border-bottom: 1px solid var(--border); margin-bottom: 4px; font-weight: 600; }

/* ── 상태/진단 (naver-ad-monitor 이식) ──────────────── */
.diag-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.diag-ok { color: #02a64c; }
.diag-warn { color: #e06b00; }
.diag-err { color: #d8000c; }
.diag-banner { display: flex; align-items: center; gap: 8px; border-radius: 10px; padding: 14px 16px;
  font-size: 15px; margin-bottom: 14px; border: 1px solid var(--border); background: var(--card); }
.diag-banner .diag-dot { font-size: 16px; }
.diag-banner.diag-ok { background: #eefaf2; border-color: #bfe9cf; }
.diag-banner.diag-warn { background: #fff6ec; border-color: #ffd9ad; }
.diag-banner.diag-err { background: #fdeced; border-color: #f3c0c4; }
.diag-comp { background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; margin-bottom: 8px; display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.diag-comp b { margin-left: 4px; }
.diag-comp-detail { color: var(--muted); font-size: 13px; margin-top: 6px; flex-basis: 100%; }
.diag-pill { display: inline-block; border-radius: 12px; padding: 2px 10px; font-size: 12px;
  font-weight: 700; border: 1px solid currentColor; }
.diag-pill.diag-ok { background: #eefaf2; }
.diag-pill.diag-warn { background: #fff6ec; }
.diag-pill.diag-err { background: #fdeced; }
.diag-event { border: 1px solid var(--border); border-left-width: 4px; border-radius: 8px;
  background: var(--card); padding: 10px 14px; margin-bottom: 8px; }
.diag-event.diag-ok-row { border-left-color: #03c75a; }
.diag-event.diag-err-row { border-left-color: #d8000c; }
.diag-event-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.diag-time { color: var(--muted); }
.diag-event-msg { margin-top: 6px; font-size: 14px; }
.section-title { font-size: 15px; margin: 20px 0 10px; }

/* 표 하단 합계 행 — 본문과 구분되게 옅은 배경 + 윗선 */
tr.sum-row td { background: #f7f9fa; border-top: 2px solid #d6dae0; }
/* 컬럼명 바로 아래에 붙는 합계 행 — 음영으로 구분(2026-08-05 지시) */
tr.sum-top td { background: #eef3f0; border-bottom: 2px solid #d6dae0; font-weight: 600; }

/* 재고 현황 상단 차트 (품절 예상 · 출고 상위) — 2026-08-05 */
.inv-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
@media (max-width: 1100px) { .inv-charts { grid-template-columns: 1fr; } }
.hbar-row { display: flex; align-items: center; gap: 8px; margin: 5px 0; }
.hbar-label { flex: 0 0 240px; text-align: left; font-size: 12.5px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.hbar-label b { margin-right: 4px; }
.hbar-track { flex: 1; background: #f1f3f5; border-radius: 4px; height: 16px; overflow: hidden; }
.hbar-fill { height: 100%; border-radius: 4px; min-width: 2px; }
.hbar-val { flex: 0 0 84px; font-size: 12px; text-align: left; white-space: nowrap; }

/* 개요: 추이 + 전월 동기간 비교 나란히 (2026-08-05) */
.ov-charts { display: grid; grid-template-columns: 2fr 1fr; gap: 0 14px; align-items: stretch; }
.ov-charts > div { min-width: 0; }
.ov-charts .chart-box { height: calc(100% - 46px); }
@media (max-width: 1250px) { .ov-charts { grid-template-columns: 1fr; } }
/* 동기간 성과 비교(최근 3개월) 표 — 월 그룹을 밴드 색·경계선으로 나누고 합계 행을
   강조한다(2026-08-31 "보기 쉽게" 지시). 증감은 별도 그룹이 아니라 각 값 아래
   "(7월 대비 ▲1.7%)" 서브라인으로 붙는다. 전체 폭을 쓰므로 가로 스크롤이 없어야 정상. */
.cmp-table th, .cmp-table td { padding: 10px 13px; }
/* 차트 hover 커서 밴드 (차트 가이드 §7.5 — recharts 커서 관례) */
.ct-band:hover { fill: rgba(25, 68, 140, 0.06); }

/* 월 그룹 3개의 폭을 균등하게(2026-09-02 지시) — colgroup과 함께 동작 */
.cmp-table { table-layout: fixed; width: 100%; }
.cmp-table td, .cmp-table th { overflow: hidden; text-overflow: ellipsis; }
/* 월 그룹 헤더 — mplanit 차트 템플릿(2026-09-02 지시): 상태색(초록/빨강/노랑)
   대신 최신 달 = 브랜드 틴트, 이전 달 = 무채색 단계로 시간 축을 표현한다 */
.cmp-table th.grp-m0 { background: #DFE8F5; color: #19448C; font-size: 13.5px; }
.cmp-table th.grp-m1 { background: #F1F5F9; color: #334155; font-size: 13.5px; }
.cmp-table th.grp-m2 { background: #F8FAFC; color: #64748B; font-size: 13.5px; }
.cmp-table .grp-start { border-left: 2px solid #D5DBE3; }
.cmp-table .cmp-sub { display: block; font-size: 11px; color: var(--muted);
  font-weight: 400; margin-top: 2px; white-space: nowrap; }
.cmp-table .cmp-sub .mom { font-size: 11px; }
.cmp-table tr.total td { background: #EEF3FB; color: #19448C; font-weight: 700;
  border-top: 2px solid #C9D7EC; }
.cmp-table tr.total:hover td { background: #EEF3FB; }
.cmp-chart-title { font-size: 13.5px; font-weight: 700; color: #334; margin-bottom: 12px; }

/* 광고주 추가 모달 — 유형 아이콘 카드 + 세부 유형 칩 (2026-08-31 지시, 이모지 금지 → SVG) */
.fld-title { font-size: 13px; color: var(--muted); margin: 12px 0 6px; }
.type-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.type-card { display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 10px 13px; background: #fff; border: 1.5px solid var(--border);
  border-radius: 10px; cursor: pointer; font: inherit; color: #556; }
.type-card svg { width: 30px; height: 30px; }
.type-card b { font-size: 14px; color: var(--text); }
.type-card span { font-size: 11.5px; color: var(--muted); }
.type-card:hover { border-color: #9FB4D6; }
.type-card.on { border-color: #19448C; background: #EEF3FB; color: #19448C; }
.type-card.on b, .type-card.on span { color: #19448C; }
.subtype-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.st-chip { padding: 7px 16px; border: 1.5px solid var(--border); border-radius: 999px;
  background: #fff; font: inherit; font-size: 13px; cursor: pointer; color: #556; }
.st-chip:hover { border-color: #9FB4D6; }
.st-chip.on { border-color: #19448C; background: #19448C; color: #fff; font-weight: 600; }
/* 채널별 비중 원그래프 — 달마다 하나씩, 표와 같은 채널 구성을 색으로 잇는다 */
.pie-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px 24px; }
.pie-cell { text-align: center; min-width: 0; }
.pie-cell .pie-month { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.pie-legend { display: flex; flex-direction: column; gap: 3px; margin-top: 10px;
  font-size: 12px; text-align: left; align-items: center; }
.pie-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pie-legend b { font-variant-numeric: tabular-nums; }
.mom-grp { margin: 10px 0 14px; }
.mom-head { font-size: 13px; font-weight: 600; margin-bottom: 4px; display: flex;
  align-items: center; gap: 6px; }
.mom-grp .hbar-label { flex: 0 0 70px; }
.mom-grp .hbar-val { flex: 0 0 90px; }

/* 필터 정렬 규칙(.flt) — 라벨 폭을 고정해 단마다 입력칸 시작을 맞추고,
   버튼은 각 단의 오른쪽 끝에 둔다 (2026-08-05, 배송대행 주문에 먼저 적용) */
.row-toolbar.flt { gap: 18px; margin: 6px 0; }
.row-toolbar.flt .ctl-label { display: inline-flex; align-items: center; gap: 7px; margin: 0; }
/* 각 단의 첫 라벨만 폭을 고정해 입력칸 시작 세로선을 맞춘다 —
   중간 라벨(국가·마켓 등)은 글자 폭 그대로 붙여 빈 공간이 생기지 않게 한다 */
.row-toolbar.flt .cap { flex: 0 0 auto; font-weight: 600; color: #4b5563; }
.row-toolbar.flt .ctl-label:first-child .cap { flex: 0 0 3.6em; }
.row-toolbar.flt input[type="date"], .row-toolbar.flt select, .row-toolbar.flt input { height: 34px; }

/* 필터 박스 — 필터 묶음을 연한 배경으로 감싸 표와 시각적으로 분리한다 */
.flt-box { background: #f7f9fa; border: 1px solid var(--border, #e3e6ea);
  border-radius: 10px; padding: 12px 16px; margin: 10px 0 14px; }
.flt-box .row-toolbar.flt { margin: 4px 0; }
.flt-box .row-toolbar.flt:first-child { margin-top: 0; }
.flt-box .row-toolbar.flt:last-child { margin-bottom: 0; }
/* 단 우측 버튼 묶음 — 화면이 좁아도 묶음째 우측 정렬을 유지한 채 내려온다 */
.flt .flt-actions { margin-left: auto; display: inline-flex; gap: 8px; white-space: nowrap; }

/* 사업자별·브랜드별 정산 표 — 컬럼 구성이 같으므로 고정 레이아웃 + 첫 컬럼 폭 통일로
   두 표의 세로줄을 나란히 맞춘다 (2026-08-07 지시). 나머지 10개 숫자 컬럼은 균등 분배 */
#settle-biz-table, #settle-brand-table { table-layout: fixed; width: 100%; }
#settle-biz-table th:first-child, #settle-brand-table th:first-child { width: 190px; }
#settle-biz-table td, #settle-brand-table td,
#settle-biz-table th, #settle-brand-table th { overflow-wrap: break-word; }

/* 전역 로딩 표시 — 화면 가운데 원형 게이지. 12시 방향에서 시계방향으로 0→100%.
   모든 화면이 api()를 거치므로 한 곳에서 켜고 끈다. 짧은 조회는 깜빡임을 막으려고
   잠깐 기다렸다 띄운다(app.js LOAD_DELAY). 부속 섹션·폴링은 링을 켜지 않는다(api silent).
   blur 제거·배경 옅게 (2026-09-15 로딩 개선) — 화면 전체가 흐려져 멈춘 것처럼 보였다. */
#load-ring { position: fixed; inset: 0; z-index: 10000; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(255, 255, 255, .38); }
body.is-loading #load-ring { display: flex; }

#load-ring .ring-box { position: relative; width: 104px; height: 104px;
  background: rgba(255, 255, 255, .94); border-radius: 50%; box-shadow: 0 2px 12px rgba(15, 23, 42, .12); }
#load-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }  /* 12시에서 시작 */
#load-ring circle { fill: none; stroke-width: 8; stroke-linecap: round; }
#load-ring .track { stroke: #e6eaee; }
#load-ring .bar { stroke: var(--green, #16a34a);
  stroke-dasharray: 263.9; stroke-dashoffset: 263.9;
  transition: stroke-dashoffset .18s linear; }
#load-ring .pct { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 20px; font-weight: 700; color: #1c1e21;
  font-variant-numeric: tabular-nums; }
#load-ring .ring-label { font-size: 13px; color: #4b5563; letter-spacing: .01em;
  background: rgba(255, 255, 255, .94); border-radius: 999px; padding: 3px 12px; }

/* 표·카드 자리에 넣는 뼈대(스켈레톤) — 값이 오기 전 빈 화면 대신 보여준다 */
.skel { background: linear-gradient(90deg, #eef1f4 25%, #f7f9fa 37%, #eef1f4 63%);
  background-size: 400% 100%; animation: skel 1.2s ease-in-out infinite;
  border-radius: 6px; height: 14px; margin: 9px 0; }
@keyframes skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ── 네이버웍스 로그인 버튼 ────────────────────────────
   공식 버튼 이미지가 공개 배포되지 않아(로고는 네이버클라우드 소유, 임의 변형 금지)
   로고를 흉내 내지 않고 브랜드 그린 위에 워드마크를 얹은 형태로 만든다.
   공식 에셋을 받으시면 .nw-mark 자리에 <img>만 갈아끼우면 된다. */
.nw-login {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 16px; margin-top: 0;
  background: #03C75A; color: #fff; border: 0; border-radius: 8px;
  font-size: 15px; font-weight: 700; letter-spacing: -.2px;
  text-decoration: none; cursor: pointer;
  transition: background .15s ease, transform .05s ease;
}
.nw-login:hover { background: #02B350; }
.nw-login:active { transform: translateY(1px); }
.nw-login .nw-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 5px;
  background: #fff; color: #03C75A; font-size: 13px; font-weight: 900;
  line-height: 1; flex: 0 0 auto;
}
.nw-login .nw-word { font-weight: 800; }
/* 로그인 버튼 아래 구분선("또는") + SSO 배너 + 안내 한 줄 */
.login-or { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; color: var(--muted); font-size: 12px; }
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.login-sso-hint { margin: 10px 0 0; font-size: 12px; color: var(--muted); text-align: center; line-height: 1.5; }

/* ── 내 알림 설정 — 채널 카드 + 토글 스위치 (2026-08-26 지시) ── */
.nf-list { max-width: 680px; }
.nf-item {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  border: 1px solid var(--c-border, #e3e6ec); border-radius: 12px;
  margin-bottom: 10px; background: #fff; transition: box-shadow .15s;
}
.nf-item:hover { box-shadow: 0 2px 8px rgba(20, 40, 90, .08); }
.nf-ico {
  width: 40px; height: 40px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; background: #eef2fb;
}
.nf-body { flex: 1; min-width: 0; }
.nf-title { font-weight: 700; }
.nf-title .chip { margin-left: 6px; font-size: 10px; vertical-align: 1px; }
.nf-desc { font-size: 12px; color: #7a8194; margin-top: 2px; }
/* 토글 스위치 — 체크박스를 시각만 바꾼다(id·동작은 그대로) */
.tgl { position: relative; display: inline-block; width: 44px; height: 24px; flex: none; }
.tgl input { opacity: 0; width: 0; height: 0; }
.tgl .knob {
  position: absolute; inset: 0; cursor: pointer; border-radius: 24px;
  background: #cdd3df; transition: background .15s;
}
.tgl .knob::before {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  left: 3px; top: 3px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform .15s;
}
.tgl input:checked + .knob { background: var(--accent, #2f5fd8); }
.tgl input:checked + .knob::before { transform: translateX(20px); }
.tgl input:focus-visible + .knob { outline: 2px solid var(--accent, #2f5fd8); outline-offset: 2px; }
.nf-warn {
  display: flex; gap: 8px; align-items: flex-start; max-width: 680px;
  background: #fff7ed; border: 1px solid #f5d9b0; color: #8a5a1e;
  border-radius: 10px; padding: 10px 14px; font-size: 12.5px;
}

/* 제휴 형태 카드 3열 — 하단 설명이 줄바꿈으로 깨지지 않게 (2026-09-01 지시) */
#m-pt-kinds { grid-template-columns: repeat(3, 1fr); gap: 8px; }
#m-pt-kinds .type-card { padding: 13px 8px 11px; gap: 5px; }
#m-pt-kinds .type-card svg { width: 26px; height: 26px; }
#m-pt-kinds .type-card b { font-size: 13px; word-break: keep-all; line-height: 1.35; text-align: center; }
#m-pt-kinds .type-card span { font-size: 11px; line-height: 1.5; word-break: keep-all; text-align: center; }

/* 하단 사업자정보 (2026-09-02 지시 — mplanit.co.kr 푸터 기준) */
.biz-footer { margin: 28px 0 8px; padding: 14px 6px 0; border-top: 1px solid #E3E6EA;
  color: #8b95a1; font-size: 11.5px; line-height: 1.7; text-align: center; }
.biz-footer span { display: block; margin-top: 2px; font-size: 11px; color: #a5adb8; }

/* 로그인 화면에도 사업자정보 (2026-09-02 지시) — 오버레이 하단 고정 */
.login-overlay .biz-footer { position: absolute; bottom: 14px; left: 16px; right: 16px;
  border-top: none; margin: 0; padding: 0; }

/* 상품 관리 — 운영중/운영중지 토글 (2026-09-02 지시) */
button.act-on { color: #1E7A46; border-color: #1E7A46; }
button.act-off { color: #C0392B; border-color: #C0392B; }
tr.dom-off td { opacity: .55; }

/* 외부(광고주) 사용자 화면 제한 (2026-09-04 지시) — body.ext:
   리포트 메뉴만 노출, 수집·설정·매핑·목표 입력·스냅샷 등 운영 요소 숨김 */
body.ext .nav-group[data-group="data"],
body.ext .nav-group[data-group="media"],
body.ext .nav-group[data-group="settings"],
body.ext #btn-collect,
body.ext #tm-refresh,
body.ext #tm-snap-config,
body.ext #tm-snap-section,
body.ext #tm-db-cut,
body.ext [data-camp-map],
body.ext [data-goal-edit],
body.ext [data-un-detail],
body.ext #dom-rec { display: none !important; }

/* 소계 행 (2026-09-07 지시 — 실시간 현황 BS/SA · DA · Affiliate 묶음) */
tr.sum-sub td { background: #F3F6FB; border-top: 1px solid #d6dae0; font-weight: 600; color: #19448C; }

/* 헤더 정렬 (2026-09-07 지시) — 광고비·전환·전환단가 / 광고비·전환매출액·ROAS */
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { background: #d3dff2; }
.sort-ind { font-size: 10px; color: #064EC8; }
.sort-hint { color: #9aa8bd; }
th.sortable:hover .sort-hint { color: #064EC8; }

/* ── 매체 메뉴 2단 아코디언 (2026-09-07 지시) ── */
.nav-children button.nav-media-parent { display: flex; align-items: center; gap: 6px; }
.nav-media-parent .nav-lbl { flex: 1; min-width: 0; }
.nav-media-parent .nav-sub-count { font-size: 10.5px; line-height: 16px; padding: 0 6px; border-radius: 9px;
  background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .78); }
.nav-media-parent .nav-sub-caret { width: 18px; text-align: center; font-size: 11px;
  color: rgba(255, 255, 255, .6); border-radius: 5px; transition: transform .15s ease; }
.nav-media-parent .nav-sub-caret:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.nav-media-parent.expanded .nav-sub-caret { transform: rotate(90deg); }
.nav-media-parent.expanded .nav-sub-count { display: none; }
.nav-children button.nav-sub.nav-folded { display: none; }

/* 크롬 확장 설치 강제 팝업 (2026-09-07 지시) — 닫을 수 없는 전면 게이트 */
#ext-gate { position: fixed; inset: 0; z-index: 9999; background: rgba(15, 25, 45, .72); display: flex; align-items: center; justify-content: center; padding: 20px; }
#ext-gate .ext-card { box-sizing: border-box; overflow-wrap: anywhere; max-height: calc(100vh - 40px); overflow-y: auto; background: #fff; border-radius: 12px; max-width: 560px; width: 100%; padding: 26px 28px; box-shadow: 0 12px 40px rgba(0,0,0,.25); font-size: 14px; line-height: 1.6; }
#ext-gate h2 { margin: 0 0 10px; font-size: 18px; color: var(--c-primary, #19448C); }
#ext-gate ol { margin: 10px 0 0 18px; padding: 0; } #ext-gate li { margin: 4px 0; }
#ext-gate code { background: #eef2f7; padding: 1px 6px; border-radius: 4px; font-size: 13px; }
#ext-gate .ext-actions { display: flex; gap: 10px; margin-top: 18px; align-items: center; flex-wrap: wrap; }
#ext-gate .ext-btn { display: inline-block; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--border, #DFDFDF); background: #fff; color: var(--text, #1d2433); font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
#ext-gate .ext-btn.primary { background: var(--c-primary, #19448C); border-color: var(--c-primary, #19448C); color: #fff; }
#ext-gate .ext-warn { background: #fdecea; color: #C0392B; padding: 8px 12px; border-radius: 6px; }

/* [분석] 소재 분석 — BEST/WORST 카드 (2026-09-07 지시) */
.cr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .cr-grid { grid-template-columns: 1fr; } }
.cr-cards { display: flex; flex-direction: column; gap: 8px; }
.cr-card { display: flex; gap: 12px; align-items: stretch; background: #fff; border: 1px solid var(--border, #DFDFDF); border-radius: 10px; padding: 10px 12px; position: relative; }
.cr-card .cr-rank { width: 30px; flex: 0 0 30px; display: flex; align-items: center; justify-content: center; font-weight: 700; border-radius: 8px; font-size: 14px; }
.cr-card.best .cr-rank { background: #e8f7ee; color: #1E7A46; }
.cr-card.worst .cr-rank { background: #fdecea; color: #C0392B; }
.cr-card .cr-img { width: 96px; height: 96px; flex: 0 0 96px; border-radius: 8px; overflow: hidden; background: #f1f3f6; border: 1px solid var(--border, #DFDFDF); }
.cr-card .cr-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cr-card .cr-img.noimg img { display: none; }
.cr-card .cr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cr-card .cr-name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-card .cr-name a { color: var(--c-primary, #19448C); text-decoration: none; }
.cr-card .cr-utm { font-size: 12px; color: #3a4556; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-card .cr-camp { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-card .cr-metrics { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: 12.5px; }
.cr-card .cr-metrics em { font-style: normal; color: var(--muted, #667085); font-size: 11px; margin-right: 4px; }
/* 키워드 BEST/WORST 표는 12열이라 두 표를 나란히 두려면 1,800px 이상이 필요 — 노트북(1,500px 안팎)에서는
   WORST가 잘렸다(2026-09-07 지적). 그 아래 폭에서는 위아래로 쌓고, 표 자체도 가로 스크롤을 허용한다 */
/* 키워드 BEST/WORST는 항상 위아래로(전체 폭) — 13열·ON/OFF 스위치가 스크롤 없이 한 화면에 보여야 한다(2026-09-08 지시).
   50행도 표 안 세로 스크롤 없이 그대로 펼친다(index.html의 table-wrap max-height 제거) */
.an-grid { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
.an-grid > div, .cr-grid > div { min-width: 0; }
.an-grid .table-wrap { overflow-x: auto; }

/* [분석] 강조·확대·ON/OFF·색상 (2026-09-07 지시): 광고비·DB·CVR 빨강 볼드, 소재 클릭 확대,
   소재 BEST 빨강 계열 / WORST 파랑 계열, 키워드 BEST 50 표 헤더 빨강 계열(WORST는 기본 유지) */
.cr-card .hi { color: #C0392B; font-weight: 700; }
.cr-card .cr-img, .cr-thumb { cursor: zoom-in; }
.cr-card.best .cr-rank { background: #fdecea; color: #C0392B; }
.cr-card.worst .cr-rank { background: #e8f0fb; color: #19448C; }
.cr-card.best { border-color: #f3c7c2; }
.cr-card.worst { border-color: #c9d7ec; }
.cr-grid > div:first-child .section-title { color: #C0392B; }
.cr-grid > div:last-child .section-title { color: #19448C; }
#kw-best-table th { background: #fdecea; color: #C0392B; border-color: #f3c7c2; }
.an-grid > div:first-child .section-title { color: #C0392B; }
.tgl.adsw { width: 38px; height: 20px; vertical-align: middle; }
.tgl.adsw .knob::before { width: 14px; height: 14px; }
.tgl.adsw input:checked + .knob { background: #1E7A46; }
/* 외부 사용자 — 상태만 보이고 바꿀 수 없다 (2026-10-01, app.js adSwitch) */
.tgl.adsw.ro { cursor: not-allowed; opacity: .55; }
.tgl.adsw.ro .knob { cursor: not-allowed; }
.tgl.adsw input:checked + .knob::before { transform: translateX(18px); }
.cr-card .cr-metrics .tgl.adsw { margin-left: 2px; }
/* 성과 알림 툴바의 광고주별 알림 스위치(#376) — 상태 문구는 스위치 왼쪽, 폭을 고정해 ON↔OFF로 행이 흔들리지 않게 */
#pa-advon { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
#pa-advon .pa-advon-st { display: inline-block; min-width: 4.4em; text-align: right; }
#pa-advon input:disabled + .knob { cursor: wait; opacity: .6; }
.cr-card .cr-metrics .sw-right { margin-left: auto; }   /* ON/OFF 스위치 우측 정렬 (2026-09-08 지시) */

/* 운영 스위치 — 토글·[정지 확인]·[설정]이 행마다 같은 자리에 오게 (2026-09-23 지시 "스위칭버튼 레이아웃
   수정해줘. 공통사항이야"). [매체 및 마크업 설정]·[제휴 설정]이 같은 컴포넌트를 쓴다.
   오른쪽 묶음이 margin-left:auto로 오른쪽 정렬이라, 토글 x를 고정하려면 **토글 오른쪽** 요소의 폭이
   행마다 같아야 한다 — 그래서 [정지 확인]은 숨어도 자리를 지킨다. 결과 문구는 토글 왼쪽이고,
   [매체 수정]·[삭제]처럼 토글 왼쪽에 붙는 버튼은 위치에 영향이 없다. */
.op-sw { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.op-sw .op-msg { max-width: 320px; white-space: normal; text-align: right; }
.op-sw .op-msg:empty { display: none; }        /* 빈 문구가 gap만 남기지 않게 */
.op-sw .op-check { flex: none; }
/* hidden 속성의 display:none을 덮어 자리만 지킨다 — 접근성 트리에서는 hidden이 그대로 제외하므로
   보이지 않는 버튼이 읽히지 않는다(배분 현황 [저장] .ds-save.off와 같은 방식). */
.op-sw .op-check[hidden] { display: inline-flex; visibility: hidden; pointer-events: none; }
/* 키워드 분석 캠페인·그룹 칸 — 여러 줄로 쪼개지지 않게 한 줄 말줄임(전체 이름은 툴팁) (2026-09-08) */
#kw-best-table td.cg, #kw-worst-table td.cg { white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }

/* 매체 및 마크업 설정 팝업 표 (2026-09-14 지적 "레이아웃이 이상한 건 수정") — 모달 공통 규칙(.modal-card input{margin-top:5px},
   label{display:block;margin-top:10px})이 표 안에서 입력칸·스위치를 들뜨게 하고 고정 px 폭이 placeholder를 잘랐다. */
.modal-card .mfm table { width: 100%; table-layout: fixed; }
.modal-card .mfm th, .modal-card .mfm td { vertical-align: middle; padding: 8px 8px; }
.modal-card .mfm td:first-child { text-align: left; white-space: normal; }
.modal-card .mfm input, .modal-card .mfm select { width: 100%; margin-top: 0; box-sizing: border-box; min-width: 0; }
.modal-card .mfm input[type="number"] { text-align: right; }
.modal-card .mfm label.tgl { display: inline-flex; margin: 0; }
/* 모달 안 스위치 공통 (2026-09-28 지적 "스위치명과 스위치가 정렬도 안맞고") — 위 모달 공통 규칙이 label에 margin-top 10px,
   숨은 체크박스에 margin-top 5px·padding을 얹어 스위치가 옆 상태 문구보다 아래로 내려앉았다. 광고주 수정의 [광고주 코드] 등 */
.modal-card label.tgl { display: inline-block; margin: 0; }
.modal-card .tgl input { position: absolute; width: 0; height: 0; margin: 0; padding: 0; border: 0; }
.modal-card .sw-row { display: flex; align-items: center; gap: 10px; min-height: 24px; }
.modal-card .sw-row .sw-txt { font-size: 13px; color: #445; line-height: 20px; }
/* 모달 안 한 줄(flex) 행 공통 (2026-09-28 팝업 전수 점검) — 모달 공통 input/select의 margin-top 5px이 한 줄 행에서
   입력칸만 3~5px 아래로 처지게 했고(SMTP 테스트 메일·매체 형태 행·실시간 수집 시각 추가·계약 기간 날짜), 옆 버튼은 입력칸보다 낮았다.
   인라인 display:flex 행을 속성 선택자로 잡는다 — 템플릿마다 클래스를 새로 붙이지 않고 앞으로 생길 행도 같이 맞춘다. 세로(column) 행은 제외. */
.modal-card :is([style*="display:flex"], [style*="display: flex"]):not([style*="column"]) > :is(input, select),
.modal-card .cfg-add > :is(input, select) { margin-top: 0; }
/* 여러 줄로 감기는(flex-wrap) 행은 늘리지 않는다 — 칩이 여러 줄이면 버튼이 칩 영역 높이(85px)로 세로 알약이 됐다 (오스카 게이트) */
.modal-card :is([style*="display:flex"], [style*="display: flex"]):not([style*="column"]):not([style*="wrap"]):has(> :is(input:not([type="checkbox"]):not([type="radio"]), select)) > button,
.modal-card .cfg-add > button { align-self: stretch; }
/* label 캡션 아래 한 줄 행(계약·실적 기간 날짜 범위)은 입력칸 대신 행이 5px 띄운다 — 옆 label의 캡션-입력칸 간격과 같게 */
.modal-card label > :is([style*="display:flex"], [style*="display: flex"]) { margin-top: 5px; }
/* 체크박스·라디오는 입력칸 규칙(width:100%·padding)에서 뺀다 — 같은 함정이 이미 세 번 개별 규칙으로 막혔다(.pick-list·.cfg-list·.chk).
   :where로 우선순위를 공통 규칙과 같게 두어 개별 규칙이 있으면 그쪽이 이긴다. */
.modal-card input:where([type="checkbox"], [type="radio"]) { width: auto; padding: 0; }

/* [설정 > 리포트 설정 > 전환수집 설정]의 개별전환 컬럼 — GA4 이벤트 키 셀 (2026-09-16 지적 "폰트가 이상한데")
   GA4 이벤트명은 한글이 흔한데(바로렌탈완료·상담신청_전환) <code>는 브라우저 기본 스타일이 monospace라
   한글이 대체 글꼴(굴림·돋움 계열)로 떨어져 같은 표에서 이 열만 다른 글꼴로 보였다 — 오른쪽 [열 이름] 입력칸은
   같은 문자열을 앱 글꼴(Paperlogy)로 그린다. 디자인 기준은 Paperlogy 단일(DESIGN-SYSTEM.md §3)이므로
   글꼴은 본문을 따르게 하고, '값이 아니라 키'라는 표시는 옅은 칩 배경으로 남긴다(#ext-gate code와 같은 톤).
   ASCII만 담는 다른 <code>(API 경로·커밋 해시·chrome://extensions 안내)는 그대로 monospace다. */
#cs-split-events code {
  font-family: inherit; letter-spacing: inherit; font-size: inherit;
  background: #eef2f7; padding: 1px 6px; border-radius: 4px;
}

/* UTM 관리 · NT 관리: 긴 값은 태그 안에서, 여러 값은 셀 안에서 줄바꿈한다.
   [NT 관리]의 두 표(#ntdef-src-table·#ntdef-med-table)는 [UTM 관리] 매칭 표와 **열 구성이 같다**
   (이름 / 값 칩 / 수치 / 설정) — 그래서 같은 규칙을 그대로 받는다 (2026-09-23 #264, 오스카 게이트 반려 ①).
   **표를 새로 만들면 이 목록에 넣을 것** — 안 넣으면 375px에서 값과 수치가 겹치고 [설정] 열이 화면 밖으로 밀린다.
   다른 것은 3열 머리글 하나뿐이다(UTM은 '최근 전환수', NT는 '유입 / 결제' — 아래 600px 블록). */
:is(#tab-utmdef, #tab-ntdef) .manage-section,
:is(#tab-utmdef, #tab-ntdef) .table-wrap { min-width:0; max-width:100%; }
:is(#utmdef-ch-table, #utmdef-src-table, #ntdef-src-table, #ntdef-med-table, #ntdef-store-table) { table-layout:fixed; width:100%; }
:is(#utmdef-ch-table, #utmdef-src-table, #ntdef-src-table, #ntdef-med-table, #ntdef-store-table) .utm-match-name { width:180px; }
:is(#utmdef-ch-table, #utmdef-src-table, #ntdef-src-table, #ntdef-med-table, #ntdef-store-table) .utm-match-count { width:112px; }
:is(#utmdef-ch-table, #utmdef-src-table, #ntdef-src-table, #ntdef-med-table, #ntdef-store-table) .utm-match-action { width:76px; }
:is(#utmdef-ch-table, #utmdef-src-table, #ntdef-src-table, #ntdef-med-table, #ntdef-store-table) :is(th, td) {
  white-space:normal; overflow-wrap:anywhere; text-align:left; padding:12px;
}
:is(#utmdef-ch-table, #utmdef-src-table, #ntdef-src-table, #ntdef-med-table, #ntdef-store-table) :is(th, td):nth-child(3) {
  text-align:right; font-variant-numeric:tabular-nums;
}
:is(#utmdef-ch-table, #utmdef-src-table, #ntdef-src-table, #ntdef-med-table, #ntdef-store-table) :is(th, td):last-child { text-align:center; }
.utm-match-tags { display:flex; flex-wrap:wrap; gap:6px; align-items:center; min-width:0; }
:is(#tab-utmdef, #tab-ntdef) .utm-match-tags .chip,
:is(#tab-utmdef, #tab-ntdef) :is(#utmdef-ch-unmatched, #utmdef-src-unmatched, #ntdef-src-unmatched, #ntdef-med-unmatched) .chip {
  max-width:100%; min-width:0; white-space:normal; overflow-wrap:anywhere;
  height:auto; line-height:1.6; text-align:left; margin:0;
}
:is(#tab-utmdef, #tab-ntdef) :is(#utmdef-ch-unmatched, #utmdef-src-unmatched, #ntdef-src-unmatched, #ntdef-med-unmatched) .hint {
  display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:10px 0; line-height:1.7;
}
@media (max-width:900px) {
  :is(#utmdef-ch-table, #utmdef-src-table, #ntdef-src-table, #ntdef-med-table, #ntdef-store-table) .utm-match-name { width:140px; }
  :is(#utmdef-ch-table, #utmdef-src-table, #ntdef-src-table, #ntdef-med-table, #ntdef-store-table) :is(th, td) { padding:10px 8px; }
}
@media (max-width:600px) {
  :is(#utmdef-ch-table, #utmdef-src-table, #ntdef-src-table, #ntdef-med-table, #ntdef-store-table) colgroup { display:none; }
  :is(#utmdef-ch-table, #utmdef-src-table, #ntdef-src-table, #ntdef-med-table, #ntdef-store-table) :is(tbody, tr, td) { display:block; }
  :is(#utmdef-ch-table, #utmdef-src-table, #ntdef-src-table, #ntdef-med-table, #ntdef-store-table) tr:first-child { display:none; }
  :is(#utmdef-ch-table, #utmdef-src-table, #ntdef-src-table, #ntdef-med-table, #ntdef-store-table) tr:not(:first-child) {
    display:grid; grid-template-columns:minmax(0,1fr) 72px; padding:12px; gap:8px;
    border-bottom:1px solid var(--border);
  }
  :is(#utmdef-ch-table, #utmdef-src-table, #ntdef-src-table, #ntdef-med-table, #ntdef-store-table) tr:last-child { border-bottom:0; }
  :is(#utmdef-ch-table, #utmdef-src-table, #ntdef-src-table, #ntdef-med-table, #ntdef-store-table) td {
    width:auto!important; min-width:0; padding:0; border:0; align-self:center;
  }
  :is(#utmdef-ch-table, #utmdef-src-table, #ntdef-src-table, #ntdef-med-table, #ntdef-store-table) td:first-child { grid-column:1; grid-row:1; }
  :is(#utmdef-ch-table, #utmdef-src-table, #ntdef-src-table, #ntdef-med-table, #ntdef-store-table) td:nth-child(2) { grid-column:1 / -1; grid-row:2; }
  :is(#utmdef-ch-table, #utmdef-src-table, #ntdef-src-table, #ntdef-med-table, #ntdef-store-table) td:nth-child(3) { grid-column:1 / -1; grid-row:3; text-align:left; }
  :is(#utmdef-ch-table, #utmdef-src-table) td:nth-child(3)::before { content:"최근 전환수  "; color:var(--muted); font-size:12px; }
  /* NT 관리의 3열은 전환수가 아니라 스토어 관측 유입·결제다 — 이름표만 다르다 */
  :is(#ntdef-src-table, #ntdef-med-table, #ntdef-store-table) td:nth-child(3)::before { content:"유입 / 결제  "; color:var(--muted); font-size:12px; }
  :is(#utmdef-ch-table, #utmdef-src-table, #ntdef-src-table, #ntdef-med-table, #ntdef-store-table) td:last-child { grid-column:2; grid-row:1; text-align:right; }
  :is(#utmdef-ch-table, #utmdef-src-table, #ntdef-src-table, #ntdef-med-table, #ntdef-store-table) td button { min-height:38px; }
}

/* 광고주 코드 실적: 설명 열을 줄바꿈하고 수치 열까지 화면 안에 표시한다. */
#cpf-codes { width:100%; min-width:0; table-layout:fixed; }
#cpf-codes th, #cpf-codes td { min-width:0; padding:9px 5px; white-space:normal; overflow-wrap:anywhere; line-height:1.5; }
#cpf-codes th { font-size:11px; }
#cpf-codes td { font-size:12px; font-variant-numeric:tabular-nums; }
#cpf-codes td:nth-child(n+7) { text-align:right; }
@media(max-width:1100px) {
  #cpf-codes colgroup, #cpf-codes tr:first-child { display:none; }
  #cpf-codes, #cpf-codes tbody { display:block; width:100%; }
  #cpf-codes tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 12px; padding:12px; border-bottom:1px solid #D5DBE3; }
  #cpf-codes td { display:block; width:auto!important; border:0; padding:0; text-align:left; }
  #cpf-codes td::before { content:attr(data-label); display:block; font-size:11px; color:var(--muted); margin-bottom:3px; }
  #cpf-codes td:nth-child(3), #cpf-codes td:nth-child(4), #cpf-codes td:nth-child(5), #cpf-codes td:nth-child(6), #cpf-codes td[colspan] { grid-column:1 / -1; }
  #cpf-codes .sum-top td:not([colspan]) { grid-column:auto; }
}

/* 계정 사용자: 행 버튼 하나, 사용자/역할/상태를 분리하고 모바일은 행 안에서 배치한다. */
#user-list .account-user-row{display:grid;grid-template-columns:minmax(160px,1fr) 120px 90px 64px;gap:12px;align-items:center;}
#user-list .who{min-width:0;overflow-wrap:anywhere;}
#user-list .who .meta{display:block;white-space:normal;}
/* 사용자 관리 팝업 (2026-09-30 개편) — 사용자 카드 · 역할 카드 · 메뉴 타일 · 제외 구역 · 최고관리자 접힘 구역.
   `.modal-card label{display:block}`·`.modal-card input{width:100%}`에 눌리지 않게 선택자에 .modal-card를 붙인다. */
.account-user-card{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--c-card,#E9F0F2);border-radius:10px;}
.account-user-avatar{flex:0 0 40px;height:40px;border-radius:50%;background:var(--c-primary,#19448C);color:#fff;display:grid;place-items:center;font-weight:700;font-size:16px;}
.account-user-id{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;}
.account-user-id b{font-size:14px;}
.account-user-id .account-user-email{font-size:14px;font-weight:600;color:var(--c-text,#111);}
.account-user-id b+.account-user-email{font-size:12.5px;font-weight:400;color:var(--c-text-sub,#5A5A5A);}
.account-user-tags{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;}
.account-user-tags .chip{margin:0;background:#fff;white-space:nowrap;}
.account-scope-note{margin:10px 2px 0;font-size:12.5px;color:var(--c-text-sub,#5A5A5A);line-height:1.5;}
.account-scope-note b{color:var(--c-primary,#19448C);}
.account-sec{margin-top:18px;}
.account-sec h4{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--c-text,#111);}
.account-sec .hint{margin:6px 2px 0;}
.account-role-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.modal-card label.account-role-card{position:relative;display:flex;flex-direction:column;gap:3px;margin:0;padding:11px 12px 11px 36px;border:1px solid var(--c-border,#DFDFDF);border-radius:8px;cursor:pointer;color:var(--c-text,#111);}
.modal-card label.account-role-card input{position:absolute;left:12px;top:12px;width:16px;height:16px;margin:0;padding:0;accent-color:var(--c-primary,#19448C);}
.account-role-card b{font-size:13.5px;}
.account-role-card span,.account-role-fixed span{font-size:12px;color:var(--c-text-sub,#5A5A5A);line-height:1.45;}
.modal-card label.account-role-card:hover{border-color:var(--c-secondary,#379BC1);}
.modal-card label.account-role-card:has(input:checked){border-color:var(--c-primary,#19448C);background:#EEF3FB;box-shadow:inset 0 0 0 1px var(--c-primary,#19448C);}
.account-role-fixed{display:flex;flex-direction:column;gap:3px;padding:11px 12px;border:1px solid var(--c-border,#DFDFDF);border-radius:8px;background:var(--c-bg,#F8F9FA);}
.account-role-fixed b{font-size:13.5px;}
.account-ctl-sec .account-role-fixed b .chip{margin-left:6px;font-size:11.5px;vertical-align:1px;}
.account-menu-options{border:0;margin:0;padding:0;min-width:0;}
.account-menu-options legend{display:flex;align-items:baseline;justify-content:space-between;width:100%;padding:0;margin:0 0 8px;font-size:13px;font-weight:700;color:var(--c-text,#111);}
.account-menu-options legend em{font-style:normal;font-weight:600;color:var(--c-text-sub,#5A5A5A);margin-left:4px;}
.modal-card .account-menu-options .link-btn{border:0;background:none;padding:0;min-height:0;font-size:12.5px;font-weight:600;color:var(--c-link,#2576C1);cursor:pointer;}
.account-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.modal-card label.account-menu-tile{display:flex;align-items:center;gap:9px;margin:0;padding:10px 12px;border:1px solid var(--c-border,#DFDFDF);border-radius:8px;cursor:pointer;font-size:13px;color:var(--c-text,#111);}
.modal-card label.account-menu-tile input{width:16px;height:16px;margin:0;padding:0;flex:0 0 16px;accent-color:var(--c-primary,#19448C);}
.modal-card label.account-menu-tile:hover{border-color:var(--c-secondary,#379BC1);}
.modal-card label.account-menu-tile:has(input:checked){border-color:var(--c-table-border,#C9D7EC);background:#F4F7FC;}
.account-menu-empty{margin:8px 2px 0;font-size:12.5px;color:var(--c-danger,#C0392B);}
.account-changes{margin-top:14px;padding:10px 12px;border-radius:8px;background:var(--c-thead-bg,#DFE8F5);color:var(--c-primary,#19448C);font-size:12.5px;line-height:1.6;}
.account-danger{display:flex;align-items:center;gap:12px;margin-top:20px;padding:12px 14px;border:1px solid #F0CFCB;border-radius:10px;background:var(--c-danger-bg,#FBEDEB);}
.account-danger>div:first-child{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;}
.account-danger>div:first-child b{font-size:13px;color:var(--c-danger,#C0392B);}
.account-danger>div:first-child span{font-size:12px;color:var(--c-text-sub,#5A5A5A);line-height:1.45;}
.account-member-actions{display:flex;gap:6px;flex:0 0 auto;}
.account-member-actions button{white-space:nowrap;background:#fff;}
.account-global-actions{margin-top:14px;border:1px solid var(--c-border,#DFDFDF);border-radius:10px;overflow:hidden;}
.account-global-actions summary{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;list-style:none;background:var(--c-bg,#F8F9FA);}
.account-global-actions summary::-webkit-details-marker{display:none;}
.account-global-actions summary::after{content:"";margin-left:auto;width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);color:var(--c-text-sub,#5A5A5A);transition:transform .15s;}
.account-global-actions[open] summary::after{transform:rotate(-135deg);}
.account-global-actions summary span{display:flex;flex-direction:column;gap:1px;}
.account-global-actions summary b{font-size:13px;}
.account-global-actions summary small{font-size:11.5px;color:var(--c-text-sub,#5A5A5A);font-weight:400;}
.account-global-note{margin:0;padding:10px 14px;font-size:12px;line-height:1.5;color:var(--c-warn,#8A6D1A);background:var(--c-warn-bg,#FBF4DE);border-top:1px solid var(--c-border,#DFDFDF);}
.account-global-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:12px 14px 14px;}
.account-global-grid button{width:100%;text-align:left;}
.account-global-grid button.danger:last-child:nth-child(odd){grid-column:1/-1;}
.account-candidates{margin-top:12px;}
@media(max-width:600px){
 #tab-user-admin .row-toolbar{flex-wrap:wrap;}
 #tab-user-admin .row-toolbar input{flex-basis:100%!important;max-width:none!important;min-width:0;}
 #user-list .account-user-row{grid-template-columns:minmax(0,1fr) auto;gap:8px;}
 #user-list .account-user-row .who{grid-column:1/-1;}
 #user-list .account-user-row button{grid-column:2;grid-row:2/4;min-height:38px;}
 .account-role-grid,.account-menu-grid,.account-global-grid{grid-template-columns:1fr;}
 .account-danger{flex-direction:column;align-items:stretch;}
 .account-member-actions button{flex:1;min-height:38px;}
 .account-user-tags{display:none;}
}

body.ext.account-scoped .nav-group[data-group="data"]:not(.perm-hide),
body.ext.account-scoped .nav-group[data-group="media"]:not(.perm-hide){display:block!important;}
body.account-scoped #btn-collect,body.account-scoped #tm-refresh,
body.account-scoped #tm-snap-config,body.account-scoped #tm-snap-section,
body.account-scoped #tm-db-cut,body.account-scoped [data-camp-map],
body.account-scoped [data-goal-edit],body.account-scoped #dom-rec{display:none!important;}
/* 상품 관리: 식별 정보·소구포인트에 폭을 배분하고 좁은 화면은 카드로 표시. */
#dom-table th { white-space: normal; }
#dom-table td { padding: 10px 8px; }
/* 모든 열 가운데 (2026-09-28 지시 "모든 컬럼 가운데 정렬해줘. 공통사항이야" — 전 광고주 공통).
   예전에는 URL 왼쪽·유입/DB 오른쪽·소구포인트 칩 왼쪽 몰림이었다. 카드 레이아웃(≤1000px)은 아래 미디어쿼리가 따로 정한다. */
#dom-table td.dom-number { font-variant-numeric: tabular-nums; }
/* 숫자 칸은 한 줄 (#468) — 위 `#dom-table td`의 overflow-wrap:anywhere가 「17,513」을 세 줄로 꺾었다.
   카드 레이아웃(≤1000px)은 아래 미디어쿼리의 !important가 다시 푼다(칸이 넓어 꺾일 일이 없다). */
#dom-table td.dom-number, #dom-table td.dom-count { white-space: nowrap; overflow-wrap: normal; font-variant-numeric: tabular-nums; }
#dom-table .dom-pars { justify-content: center; gap: 6px; }
#dom-table .dom-par { max-width: 170px; }
#dom-table td:last-child { white-space: normal !important; }
#dom-table td:last-child button { margin: 2px; }
@media (max-width: 1000px) {
  #dom-table, #dom-table tbody { display: block; width: 100%; min-width: 0; }
  #dom-table.dom-wide { min-width: 0; }   /* 카드 레이아웃이라 넓은 표(11열) 최소 폭을 푼다 (2026-09-23) */
  #dom-table colgroup, #dom-table tr:has(th) { display: none; }
  #dom-table tr { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); border-bottom: 1px solid var(--border); padding: 8px; }
  #dom-table td { display: block; min-width: 0; border: 0; text-align: left; white-space: normal !important; }
  #dom-table td:first-child { max-width: none; }
  #dom-table td::before { content: attr(data-label); display: block; font-size: 11px; color: #667085; margin-bottom: 4px; }
  #dom-table td.dom-title, #dom-table td.dom-url, #dom-table td:has(.dom-pars) { grid-column: 1 / -1; }
  #dom-table .sum-top { position: static; }
  #dom-table .sum-top td:empty { display: none; }
  #dom-table .sum-top td:first-child::before { display: none; }
}
/* 카드 레이아웃의 합계 카드 — 상품 관리(#dom-table ≤1000px)·광고주 코드 실적(#cpf-codes ≤1100px) 공통 (2026-10-05 "여기도 레이아웃이 이상하네").
   카드가 되어도 합계 칸들은 위 `.table-wrap tr.sum-top td`의 sticky(top 33px)와 칸마다 배경을 그대로 가져, 머리글이 숨은
   카드에서는 칸마다 다른 만큼 밀려 내려가 «합계»·유입수가 계단 모양으로 겹치고 둘째 줄 DB 칸의 라벨을 덮었다.
   카드에서는 붙일 머리글이 없으니 sticky를 풀고, 배경은 카드(줄) 하나에 준다. «합계»는 일반 카드의 상품명처럼 전체 폭 한 줄,
   숫자 칸은 일반 카드와 같은 라벨 + 값. 두 표의 카드 전환 폭이 달라 미디어쿼리만 둘이고 선언은 같다 — 고칠 때 같이 고친다. */
@media (max-width: 1000px) {
  #dom-table tr.sum-top { background: #eef3f0; border-bottom: 2px solid #d6dae0; }
  #dom-table tr.sum-top td { position: static; background: transparent; box-shadow: none; }
  #dom-table tr.sum-top td:first-child { grid-column: 1 / -1; padding-bottom: 0; }
}
@media (max-width: 1100px) {
  #cpf-codes tr.sum-top { background: #eef3f0; border-bottom: 2px solid #d6dae0; }
  #cpf-codes tr.sum-top td { position: static; background: transparent; box-shadow: none; }
}

/* Shared multi-select filters: panel overlays without expanding the toolbar. */
.multi-filter {position:relative;min-width:120px;max-width:260px;font-weight:400;}
.multi-filter summary {list-style:none;cursor:pointer;background:#fff;border:1px solid #d7dde5;border-radius:8px;padding:8px 28px 8px 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.multi-filter summary::after {content:"▾";position:absolute;right:10px;}
/* 형태가 하나로 정해진 현황의 광고형태 — 고를 수 없는 고정 칸 (2026-09-28, app.js renderAdFilters oneFmt) */
.multi-filter.fmt-fixed {display:inline-block;box-sizing:border-box;background:#f4f6f9;border:1px solid #d7dde5;border-radius:8px;padding:8px 12px;color:#475569;cursor:default;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.multi-filter-panel {position:absolute;z-index:100;top:calc(100% + 4px);left:0;min-width:240px;max-width:min(340px,85vw);background:white;border:1px solid #d7dde5;border-radius:10px;box-shadow:0 6px 20px #163b7026;padding:10px;}
.multi-filter-options {max-height:280px;overflow:auto;display:flex;flex-direction:column;gap:3px;}
.multi-filter-options label {display:flex;align-items:center;gap:8px;padding:6px;white-space:normal;cursor:pointer;}
.row-toolbar .multi-filter-options input {width:16px;height:16px;flex:none;}
.multi-filter-actions {display:flex;justify-content:space-between;gap:8px;padding-top:10px;border-top:1px solid #eef1f5;margin-top:6px;}
/* 공통 인증 / 광고주 계정 연결: 설정 범위와 다음 행동을 구분한다. */
.api-settings-intro{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.api-settings-intro h3{margin:0 0 6px}.api-settings-intro p{margin:0;color:var(--c-text-sub,#5A5A5A);line-height:1.6;max-width:800px}
.api-settings-link{font-size:13px;white-space:nowrap}.api-setup-steps{list-style:none;padding:0;margin:0 0 18px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.api-setup-steps li{padding:12px;border:1px solid var(--c-border,#DFDFDF);border-radius:8px;background:#fff}.api-setup-steps b,.api-setup-steps span{display:block}.api-setup-steps span{margin-top:5px;color:var(--c-text-sub,#5A5A5A);font-size:12px;line-height:1.6}
.api-settings-notice{padding:12px;background:var(--c-card,#E9F0F2);border-radius:8px;line-height:1.6}.api-settings-help{margin-top:16px;color:var(--c-text-sub,#5A5A5A);font-size:13px;line-height:1.7}.api-settings-help summary{cursor:pointer;font-weight:600}.api-settings-help p{margin:8px 0}
#ml-table,#media-api-table{table-layout:fixed;width:100%;min-width:780px}#ml-table th,#ml-table td,#media-api-table th,#media-api-table td{white-space:normal;overflow-wrap:anywhere;vertical-align:top;padding:12px}
.api-service-note{font-size:12px;color:var(--c-text-sub,#5A5A5A);line-height:1.5;margin-top:6px}.api-row-actions{display:flex;flex-wrap:wrap;gap:6px}.api-row-actions button{white-space:normal;text-align:left}
/* 눌러도 안 되는 버튼은 눌러도 안 되게 보인다 — 상태를 못 받은 줄의 [계정 연결]이 멀쩡해 보이면
   사용자가 이미 연결된 계정을 또 등록한다 (2026-09-21 매체 연결 무한 로딩). .pager의 규칙과 같은 태도. */
.api-row-actions button:disabled,.api-account-actions button:disabled{opacity:.45;cursor:not-allowed}
.api-linked-account+.api-linked-account{border-top:1px solid var(--c-border,#DFDFDF);margin-top:10px;padding-top:10px}.api-account-name{font-weight:600;line-height:1.5}.api-account-meta{margin-top:4px}.api-account-meta:empty{display:none}.api-account-meta .chip,#ml-table td .chip{white-space:normal;overflow-wrap:anywhere;max-width:100%}.api-account-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}.api-account-actions button{font-size:12px}.api-account-actions .api-unlink{color:var(--c-text-sub,#5A5A5A)}.api-empty-account{color:var(--c-text-sub,#5A5A5A);font-size:13px}.api-empty-account span{display:block;margin-top:5px;font-size:12px}
@media(max-width:820px){.api-setup-steps{grid-template-columns:1fr;gap:8px}.api-settings-intro{gap:10px}#tab-media-links .table-wrap,#tab-ad-api .table-wrap{max-width:100%;overflow-x:auto}.api-row-actions button,.api-account-actions button{min-height:38px}}
/* 브랜드검색 로그인 자격 목록 (#563) — 한 광고계정에 마스터·개인 카카오 아이디. 긴 이메일은 줄바꿈, 375px에서도 삭제 버튼이 밀려나지 않게 */
.kbs-logins{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}.kbs-login{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:6px;font-size:12px;line-height:1.5}.kbs-login .chip{margin:0;min-width:4.6em;text-align:center;box-sizing:border-box}.kbs-login-body{min-width:0}.kbs-login-email{font-weight:600;overflow-wrap:anywhere;margin-right:6px}.kbs-login-meta{display:inline-block;max-width:100%;font-size:11.5px;overflow-wrap:anywhere}.kbs-login-del{font-size:11.5px;padding:2px 8px;color:var(--c-text-sub,#5A5A5A)}
@media(max-width:820px){.kbs-login-del{min-height:32px}}

.api-settings-search{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;font-weight:600;margin:0 0 12px}.api-settings-search input{width:320px;max-width:100%;min-width:0}.api-settings-search input::placeholder{font-weight:400}#ml-table tr[hidden],#media-api-table tr[hidden]{display:none}

#ml-table th,#ml-table td,#media-api-table th,#media-api-table td{text-align:left}

/* 전환 표시: 기존 설정 표와 같은 제목·간격, 하나의 저장 범위. */
#cs-split .cs-section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
#cs-split .cs-section-head .section-title { margin:0; padding:0; border:0; }
#cs-split .cs-description { margin:0 0 12px; line-height:1.6; }
#cs-split .cs-group-section { margin-top:24px; }
#cs-split .cs-edit-table { table-layout:fixed; width:100%; }
#cs-split .cs-edit-table td { white-space:normal; overflow-wrap:anywhere; vertical-align:middle; }
#cs-split .cs-edit-table input[type=text], #cs-split input[data-cg-name] { width:100%; max-width:360px; min-width:0; box-sizing:border-box; }
#cs-split .cs-event-options { display:flex; gap:8px 16px; flex-wrap:wrap; padding:4px 0; }
#cs-split .cs-event-options label { display:inline-flex; align-items:flex-start; gap:6px; margin:0; text-align:left; }
#cs-split .cs-event-options input { flex:none; margin:2px 0 0; }
#cs-split .cs-row-actions { display:flex; gap:4px; justify-content:center; }
#cs-split .cs-row-actions button { padding:5px 7px; }
#cs-split .cs-empty { padding:24px 12px; text-align:center; }
#cs-split .cs-save-actions { display:flex; justify-content:flex-end; align-items:center; gap:12px; flex-wrap:wrap; padding:16px 0 24px; }
@media(max-width:900px) {
 #cs-split .cs-edit-table { min-width:600px; }
 #cs-split .table-wrap { max-width:100%; overflow-x:auto; }
 #cs-split button { min-height:38px; }
}
@media(max-width:480px) {
 #cs-split .cs-save-actions { align-items:stretch; flex-direction:column; }
 #cs-split .cs-section-head { gap:8px; }
}

/* 계정관리 단순 폼: 공통 기본 모달 폭, 좁은 화면에서도 검색 버튼 유지. */
.modal-card .account-candidate-search-row { display:flex; align-items:center; gap:8px; min-width:0; }
.modal-card .account-candidate-search-row input { flex:1 1 0; width:0; min-width:0; margin:0; }
.modal-card .account-candidate-search-row button { flex:0 0 auto; white-space:nowrap; }
.account-candidates .user-row { min-width:0; gap:10px; }
.account-candidates .who { flex:1 1 0; min-width:0; overflow-wrap:anywhere; }
.account-candidates .who .meta { display:block; white-space:normal; overflow-wrap:anywhere; }
.account-candidates button { flex:0 0 auto; white-space:nowrap; }

.account-user-email { overflow-wrap:anywhere; }

/* Monthly product eligibility follows the existing compact settings rows. */
.gi-operation-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:8px}
.gi-operation-item{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--c-border,#DFDFDF);border-radius:8px;padding:10px 12px;min-width:0;background:#fff;font-size:13px}
.gi-operation-item>span{min-width:0;overflow-wrap:anywhere}
.gi-operation-control{display:flex!important;align-items:center;gap:8px;white-space:nowrap;margin:0!important;flex:none}
.gi-operation-control input{appearance:none;width:32px!important;height:18px!important;min-height:18px!important;flex:none!important;border:0;border-radius:12px;background:#CBD3E0;cursor:pointer;position:relative;margin:0}
.gi-operation-control input:checked{background:var(--c-good,#1E7A46)}
.gi-operation-control input:before{content:"";position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:white}
.gi-operation-control input:checked:before{left:17px}
.gi-operation-control input:focus-visible{outline:2px solid var(--c-primary,#19448C);outline-offset:3px}

/* ── 월 청구 환율 칸 (2026-09-21) — [매체 연결] 계정 수정 팝업. 월 · 환율 · [적용] 한 줄.
   `auto`인 버튼이 줄 끝에 붙고 입력 두 칸이 남은 폭을 나눈다. 좁은 폭 규칙은 mobile.css에 있다
   (인라인 style로는 미디어 쿼리를 못 건다 — 375px에서 [적용]이 잘렸다). ── */
.fx-bill-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
.fx-bill-row > label { margin: 0; min-width: 0; }
.fx-bill-row > label input { margin-top: 4px; }
.fx-bill-row > button { margin-bottom: 2px; white-space: nowrap; }

/* ── [상품 관리] 툴바 (2026-09-22 지시 "기준 매체수집 / URL 수집 기준 / 접속 확인 버튼 > 디자인/레이아웃") —
   왼쪽 = 필터·요약, 오른쪽 = 「URL 기준 ▾」 셀렉트 + 실행 버튼 묶음. 셀렉트는 옆 버튼과 같은 높이·글자 크기이고
   버튼 묶음은 세로선으로 설정과 갈라 '고르는 것'과 '누르는 것'이 한눈에 나뉜다. ── */
#tab-domains .dom-src-ctl { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; flex: 0 0 auto; }
#tab-domains .dom-src-ctl select { padding: 6px 8px; min-width: 128px; font-size: 13px; }
#tab-domains .dom-src-ctl select:disabled { color: var(--text); opacity: .75; cursor: default; }
#tab-domains .dom-actions { display: inline-flex; align-items: center; gap: 6px; padding-left: 12px; border-left: 1px solid var(--border); }

/* ── 담당 광고주 없음 (2026-09-27 #277) — 관리자가 아닌데 담당 광고주가 0개면 메뉴·광고주 이동창·화면을 숨기고
   안내 한 장만 보인다. 서버도 광고주 데이터 API를 403으로 막는다(main._unassigned_blocked). ── */
body.no-adv .side-nav, body.no-adv .side-adv, body.no-adv #btn-collect,
body.no-adv main > .tab-panel { display: none !important; }
.unassigned-notice { max-width: 560px; margin: 48px auto; }
.unassigned-notice .chart-box p { margin: 8px 0 0; line-height: 1.6; font-size: 14px; }

/* ── 제휴 매체 수정 팝업 — 보종별 단가 (#454) ── */
.pt-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 10px 0 4px; font-size: 13px; }
.pt-mode .pt-mode-cap { color: var(--muted); }
.pt-mode label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 500; }
.pt-mode input[type=radio] { width: auto; margin: 0; }
.pt-mode .hint { flex-basis: 100%; margin: 0; font-size: 12px; color: var(--muted); }
.pt-mode .hint:empty { display: none; }
#m-pt-prod table { width: 100%; }
#m-pt-prod td, #m-pt-prod th { vertical-align: middle; }
#m-pt-prod td.left, #m-pt-prod th.left { text-align: left; }
#m-pt-prod input[type=checkbox] { width: auto; margin: 0; }
.pt-prod-table .pt-prod-price { width: 100%; min-width: 90px; text-align: right; }
.pt-prod-table .pt-prod-name[title] { text-decoration: underline dotted #aab; text-underline-offset: 3px; cursor: help; }
.pt-prod-table .pt-prod-camps, .pt-map-table td.left { white-space: normal; }
.pt-camp { word-break: break-all; display: inline; line-height: 1.9; -webkit-box-decoration-break: clone; box-decoration-break: clone; margin: 1px 4px 1px 0; padding: 1px 7px; border-radius: 10px; background: #eef2f7; font-size: 12px; overflow-wrap: anywhere; }
.pt-camp small { color: var(--muted); font-size: 10px; }
.pt-map-table code { font-family: inherit; letter-spacing: 0; font-size: 12px; overflow-wrap: anywhere;
  background: #eef2f7; padding: 1px 6px; border-radius: 4px; }  /* 고정폭 글꼴 + 본문 자간 -0.02em이면 'actua l'처럼 벌어졌다(#454 오스카) — #cs-split-events code 선례 */
.pt-map-table select { min-width: 110px; }
.pt-map-table tr.pt-map-bad td { background: #fffaf2; }
.pt-map-sug { display: block; margin-top: 4px; padding: 2px 8px; font-size: 12px; }
.pt-map-warn { margin: 0 0 6px; padding: 6px 10px; border-radius: 6px; background: #fff4e5; color: #b06a00; font-size: 12px; }
.pt-map-add { display: flex; gap: 6px; margin: 8px 0 2px; }
.pt-map-add input { flex: 1 1 160px; width: auto; min-width: 0; }
.pt-map-add select { flex: 0 0 auto; width: auto; }
.pt-map-add button { flex: 0 0 auto; white-space: nowrap; }
.pt-dup-note { margin: 10px 0 2px; font-size: 12px; color: var(--muted); }
.pt-dup-warn { display: block; margin-top: 2px; color: #b06a00; font-size: 12px; }