/* ══════════════════════════════════════════════════════════════
   v507 — 📣 네이버 광고 통합 관리 (#/naverad) — 시안 naverad.css (클래스 접두사 na-*)
   토큰 · 페이지 헤더는 category.css 의 #catmap 셸을 그대로 쓴다 (루트 <div id="catmap"><div id="naverad">)
   ══════════════════════════════════════════════════════════════ */
#naverad { --warn-line:#ecd9a8; --warn-bg:#faf1dc; }
#naverad .na-wrap { max-width:1440px; margin:0 auto; padding:14px 16px 40px; display:flex; flex-direction:column; gap:12px; }
#naverad .na-err { border:1px solid var(--warn-line); background:var(--warn-bg); color:var(--warn-fg); font-size:11.5px; font-weight:700; padding:8px 12px; }
#naverad .na-empty { border:1px dashed var(--line); background:#fff; padding:18px 20px; display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
#naverad .na-empty b { font-size:13.5px; } #naverad .na-empty p { margin:0; font-size:12px; line-height:1.6; color:var(--text-mid); }

/* KPI */
#naverad .na-kpis { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
@media (max-width:1100px) { #naverad .na-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:600px) { #naverad .na-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } }
#naverad .na-kpi { border:1px solid var(--line); background:#fff; padding:10px 12px; min-width:0; }
#naverad .na-kpi__l { display:block; font-size:10.5px; font-weight:800; color:var(--sub); }
#naverad .na-kpi__v { display:block; font-size:22px; font-weight:800; letter-spacing:-.5px; font-variant-numeric:tabular-nums; margin-top:2px; }
#naverad .na-kpi__v small { font-size:12px; font-weight:700; color:var(--sub); margin-left:2px; }
#naverad .na-kpi__d { display:block; font-size:10.5px; color:var(--sub); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#naverad .na-kpi.is-warn { border-color:var(--warn-line); background:var(--warn-bg); }
#naverad .na-kpi.is-warn .na-kpi__v { color:var(--warn-fg); }
#naverad .na-bar { height:5px; background:var(--panel-alt); margin-top:6px; }
#naverad .na-bar > i { display:block; height:100%; background:var(--accent); }
#naverad .na-bar.is-hi > i { background:var(--warn-fg); }

/* 패널 */
#naverad .na-cols { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:12px; align-items:start; }
@media (max-width:1100px) { #naverad .na-cols { grid-template-columns:minmax(0,1fr); } }
#naverad .na-panel { border:1px solid var(--line); background:#fff; min-width:0; }
#naverad .na-panel__h { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:9px 12px; border-bottom:1px solid var(--line-soft); background:var(--panel-sub); }
#naverad .na-panel__h b { font-size:12.5px; }
#naverad .na-panel__h span { font-size:10.5px; color:var(--sub); }
#naverad .na-panel__f { display:flex; align-items:center; gap:7px; flex-wrap:wrap; padding:9px 12px; border-top:1px solid var(--line-soft); background:var(--panel-sub); }
#naverad .na-panel__f > span:first-child { flex:1 1 200px; font-size:10.5px; color:var(--sub); }

/* 필터 */
#naverad .na-seg { display:inline-flex; border:1px solid var(--line); }
#naverad .na-seg button { border:0; background:#fff; font:inherit; font-size:11px; font-weight:700; color:var(--sub); padding:4px 10px; cursor:pointer; }
#naverad .na-seg button + button { border-left:1px solid var(--line); }
#naverad .na-seg button.is-on { background:var(--accent); color:#fff; }

/* 표 */
#naverad .na-tb { width:100%; border-collapse:collapse; }
#naverad .na-tb th { text-align:left; font-size:10.5px; font-weight:800; color:var(--sub); background:var(--panel-alt); padding:7px 10px; border-bottom:1px solid var(--line-soft); white-space:nowrap; }
#naverad .na-tb th i { font-style:normal; font-weight:700; color:var(--sub); }
#naverad .na-tb td { font-size:12px; padding:8px 10px; border-bottom:1px solid var(--line-faint); vertical-align:middle; }
#naverad .na-tb tr:hover td { background:var(--panel-sub); }
#naverad .na-tb tr.is-off td { color:var(--faint); }
#naverad .na-r { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
#naverad .na-mono { font-family:'SFMono-Regular',Menlo,monospace; font-weight:700; }
#naverad .na-name { display:block; font-size:10.5px; color:var(--sub); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:240px; }
#naverad .na-roas { font-size:14px; font-weight:800; }
#naverad .na-roas.up { color:#15803d; } #naverad .na-roas.dn { color:var(--warn-fg); }
#naverad .na-trend { font-size:10px; font-weight:800; margin-left:4px; }
#naverad .na-trend.up { color:#15803d; } #naverad .na-trend.dn { color:var(--warn-fg); }
#naverad .na-2 { line-height:1.3; }
#naverad .na-2 i { display:block; font-style:normal; font-size:10.5px; color:var(--sub); }
#naverad .na-lo { color:var(--warn-fg); font-weight:800; }
#naverad .na-store { font-size:11.5px; font-weight:700; white-space:nowrap; color:var(--text-mid); }

/* 한도 조정 */
#naverad .na-cap { display:flex; align-items:center; gap:4px; }
#naverad .na-cap button { width:24px; height:26px; border:1px solid var(--line); background:#fff; font:inherit; font-size:13px; font-weight:800; color:var(--sub); cursor:pointer; padding:0; }
#naverad .na-cap button:hover { background:var(--panel-alt); color:var(--text); }
#naverad .na-cap button:disabled { color:var(--faint); cursor:default; background:var(--panel-alt); }
#naverad .na-cap input { width:84px; height:26px; border:1px solid var(--line); text-align:right; font:inherit; font-size:12px; font-weight:800; font-variant-numeric:tabular-nums; padding:0 6px; box-sizing:border-box; }
#naverad .na-cap input.is-chg { border-color:var(--accent); background:var(--accent-bg-2); }
#naverad .na-use { display:flex; flex-direction:column; gap:3px; min-width:64px; }
#naverad .na-use span { font-size:10.5px; color:var(--sub); font-variant-numeric:tabular-nums; }

/* 추천 */
#naverad .na-rec { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:800; padding:2px 7px; white-space:nowrap; }
#naverad .na-rec--up { background:#e7f6ec; color:#15803d; }
#naverad .na-rec--dn { background:var(--warn-bg); color:var(--warn-fg); }
#naverad .na-rec--keep { background:var(--panel-alt); color:var(--sub); }
#naverad .na-apply { border:1px solid var(--line); background:#fff; font:inherit; font-size:10.5px; font-weight:700; color:var(--accent-fg); padding:2px 7px; cursor:pointer; margin-left:4px; }
#naverad .na-apply:hover { background:var(--accent-bg-2); }

/* 스위치 */
#naverad .na-sw { width:30px; height:16px; border:1px solid var(--line); background:var(--panel-alt); position:relative; cursor:pointer; padding:0; }
#naverad .na-sw::after { content:''; position:absolute; top:1px; left:1px; width:12px; height:12px; background:#fff; border:1px solid var(--line); }
#naverad .na-sw.is-on { background:var(--accent); border-color:var(--accent); }
#naverad .na-sw.is-on::after { left:15px; border-color:var(--accent); }
#naverad .na-sw:disabled { opacity:.55; cursor:default; }

/* 규칙 · 비즈머니 */
#naverad .na-rule { padding:10px 12px; border-top:1px solid var(--line-faint); display:flex; flex-direction:column; gap:6px; }
#naverad .na-rule__h { display:flex; align-items:center; gap:8px; }
#naverad .na-rule__h b { flex:1; font-size:12px; }
#naverad .na-rule p { margin:0; font-size:11px; line-height:1.6; color:var(--text-mid); }
#naverad .na-rule input { width:56px; border:1px solid var(--line); text-align:right; font:inherit; font-size:11.5px; font-weight:800; padding:2px 5px; }
#naverad .na-goal { display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line-faint); font-size:11.5px; flex-wrap:wrap; }
#naverad .na-goal input { width:70px; border:1px solid var(--line); text-align:right; font:inherit; font-size:12px; font-weight:800; padding:4px 6px; }
#naverad .na-biz { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 8px; padding:10px 12px; border-bottom:1px solid var(--line-faint); }
#naverad .na-biz__h { grid-column:1 / -1; display:flex; align-items:baseline; gap:8px; }
#naverad .na-biz__h b { font-size:12px; } #naverad .na-biz__h span { margin-left:auto; font-size:10px; color:var(--sub); }
#naverad .na-biz__v { font-size:18px; font-weight:800; font-variant-numeric:tabular-nums; }
#naverad .na-biz__v small { font-size:11px; font-weight:700; color:var(--sub); margin-left:2px; }
#naverad .na-biz__d { grid-column:1; font-size:10.5px; color:var(--sub); }
#naverad .na-biz .na-btn { grid-column:2; grid-row:2 / span 2; align-self:center; }
#naverad .na-biz.is-low { background:var(--warn-bg); }
#naverad .na-biz.is-low .na-biz__v, #naverad .na-biz.is-low .na-biz__d { color:var(--warn-fg); }

/* 버튼 */
#naverad .na-btn, .na-setup .na-btn { display:inline-flex; align-items:center; border:1px solid var(--line,#dcd8c0); background:#fff; font:inherit; font-size:11.5px; font-weight:700; color:var(--text-mid,#3a4030); padding:6px 11px; cursor:pointer; white-space:nowrap; text-decoration:none; line-height:1.2; }
#naverad .na-btn:hover, .na-setup .na-btn:hover { background:var(--panel-alt,#f6f5ec); }
#naverad .na-btn--pri, .na-setup .na-btn--pri { border-color:var(--accent-hover,#4d5434); background:var(--accent,#5a6636); color:#f2eeda; font-weight:800; }
#naverad .na-btn--pri:hover, .na-setup .na-btn--pri:hover { background:var(--accent-hover,#4d5434); }
#naverad .na-btn:disabled, .na-setup .na-btn:disabled { color:var(--faint,#c6c8b4); background:var(--panel-alt,#f6f5ec); cursor:default; }
#naverad .na-btn--sm, .na-setup .na-btn--sm { padding:4px 9px; font-size:11px; }

/* ⚙ API 연결 설정 창 */
.na-setup { padding:6px 0 0; display:flex; flex-direction:column; gap:9px; font-size:12px; }
.na-acct { display:grid; grid-template-columns:minmax(150px,1.2fr) minmax(110px,.8fr) minmax(160px,1.4fr) minmax(140px,1.2fr) auto; gap:6px; align-items:center; padding:8px 10px; border:1px solid var(--line-faint,#edebdb); background:var(--panel-sub,#fbfaf2); }
.na-acct input { min-width:0; padding:6px 8px; border:1px solid var(--line,#dcd8c0); font:inherit; font-size:12px; box-sizing:border-box; background:#fff; }
.na-acct__b { display:inline-flex; gap:4px; }
.na-acct__m { grid-column:1 / -1; font-size:10.5px; color:var(--sub,#6b7160); }
.na-foot { display:flex; align-items:center; gap:8px; }
@media (max-width:900px) { .na-acct { grid-template-columns:1fr 1fr; } .na-acct__b { grid-column:1 / -1; } }

/* ── v510 — 상세 설정 창(캠페인 · 광고그룹 · 소재 · 키워드) · 캠페인 목록 ── */
#naverad .na-gname { display:block; font-size:12px; }
#naverad .na-sub { font-size:10.5px; color:var(--sub); }
#naverad .na-camp { display:flex; align-items:center; gap:8px; width:100%; padding:9px 12px; border:0; border-bottom:1px solid var(--line-faint); background:#fff; font:inherit; text-align:left; cursor:pointer; }
#naverad .na-camp:hover { background:var(--accent-bg-2); }
#naverad .na-camp__n { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
#naverad .na-camp__n b { font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#naverad .na-camp__n i, #naverad .na-camp__v i { font-style:normal; font-size:10.5px; color:var(--sub); }
#naverad .na-camp__v { display:flex; flex-direction:column; align-items:flex-end; font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; }
#naverad .na-camp__v small { font-size:10px; font-weight:700; color:var(--sub); margin-left:2px; }
.nd { padding:6px 0 0; display:flex; flex-direction:column; gap:10px; font-size:12px; }
.nd-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:900px) { .nd-grid { grid-template-columns:1fr; } }
.nd-box { border:1px solid var(--line-faint,#edebdb); background:var(--panel-sub,#fbfaf2); padding:10px 12px; display:flex; flex-direction:column; gap:7px; }
.nd-box h4 { margin:0 0 2px; font-size:12.5px; font-weight:800; } .nd-box h4 span { font-size:10.5px; font-weight:700; color:var(--sub,#6b7160); margin-left:6px; }
.nd-f { display:flex; align-items:center; gap:7px; min-width:0; font-size:11.5px; }
.nd-f > span { flex:none; min-width:84px; color:var(--sub,#6b7160); font-weight:700; }
.nd-f input { padding:5px 8px; border:1px solid var(--line,#dcd8c0); font:inherit; font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; box-sizing:border-box; background:#fff; min-width:0; }
.nd-f input.is-chg, .nd-bid.is-chg input { border-color:var(--accent,#5a6636); background:var(--accent-bg-2,#f5f4e7); }
.nd-f i { font-style:normal; font-size:11px; color:var(--sub,#6b7160); } .nd-f i.is-chg { color:var(--accent-fg,#4d5434); font-weight:800; }
.nd-f em { font-style:normal; font-size:11px; color:var(--sub,#6b7160); }
.nd-row { display:flex; gap:14px; flex-wrap:wrap; }
.nd-hint { margin:2px 0 0; font-size:10.5px; color:var(--sub,#6b7160); line-height:1.5; }
.nd .na-sw { width:30px; height:16px; border:1px solid var(--line,#dcd8c0); background:var(--panel-alt,#f6f5ec); position:relative; cursor:pointer; padding:0; flex:none; }
.nd .na-sw::after { content:''; position:absolute; top:1px; left:1px; width:12px; height:12px; background:#fff; border:1px solid var(--line,#dcd8c0); }
.nd .na-sw.is-on { background:var(--accent,#5a6636); border-color:var(--accent,#5a6636); } .nd .na-sw.is-on::after { left:15px; border-color:var(--accent,#5a6636); }
.nd .na-sw:disabled { opacity:.55; cursor:default; }
.nd-tabs { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.nd-tabs > button[data-tab] { border:1px solid var(--line,#dcd8c0); background:#fff; font:inherit; font-size:11.5px; font-weight:800; color:var(--sub,#6b7160); padding:5px 12px; cursor:pointer; }
.nd-tabs > button[data-tab].is-on { background:var(--accent,#5a6636); color:#fff; border-color:var(--accent,#5a6636); }
.nd-q { flex:1 1 200px; min-width:120px; padding:5px 9px; border:1px solid var(--line,#dcd8c0); font:inherit; font-size:12px; }
.nd-bulk { display:inline-flex; gap:4px; } .nd-period { margin-left:auto; font-size:10.5px; color:var(--sub,#6b7160); }
.nd-tb { max-height:52vh; overflow:auto; border:1px solid var(--line,#dcd8c0); }
.nd-tb .na-tb { width:100%; border-collapse:collapse; }
.nd-tb .na-tb th { position:sticky; top:0; z-index:1; text-align:left; font-size:10.5px; font-weight:800; color:var(--sub,#6b7160); background:var(--panel-alt,#f6f5ec); padding:6px 9px; border-bottom:1px solid var(--line-soft,#e8e5d1); white-space:nowrap; }
.nd-tb .na-tb th i { font-style:normal; font-weight:700; }
.nd-tb .na-tb td { font-size:11.5px; padding:6px 9px; border-bottom:1px solid var(--line-faint,#edebdb); vertical-align:middle; }
.nd-tb .na-tb tr.is-off td { color:var(--faint,#c6c8b4); } .nd-tb .na-tb tr.is-off td .nd-prod b { color:var(--faint,#c6c8b4); }
.nd-tb .na-r { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.nd-tb .na-2 { line-height:1.3; } .nd-tb .na-2 i { display:block; font-style:normal; font-size:10px; color:var(--sub,#6b7160); }
.nd-tb .na-mono { font-family:'SFMono-Regular',Menlo,monospace; font-weight:700; } .nd-tb .na-sub { font-size:10.5px; color:var(--sub,#6b7160); }
.nd-prod { display:flex; align-items:center; gap:8px; min-width:220px; }
.nd-prod img, .nd-noimg { width:34px; height:34px; object-fit:contain; background:#fff; border:1px solid var(--line-faint,#edebdb); flex:none; }
.nd-noimg { display:inline-flex; align-items:center; justify-content:center; font-size:9.5px; color:var(--muted,#98a08a); }
.nd-prod > span { min-width:0; display:flex; flex-direction:column; gap:1px; }
.nd-prod b { font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:320px; }
.nd-prod i { font-style:normal; font-size:10px; color:var(--sub,#6b7160); } .nd-prod a { color:var(--accent-fg,#4d5434); }
.nd-insp { font-size:10px; font-weight:800; padding:1px 6px; border:1px solid var(--line-soft,#e8e5d1); background:#fff; color:var(--sub,#6b7160); white-space:nowrap; }
.nd-insp--APPROVED { color:#2f6b3a; border-color:#bcd5c0; background:#eef6ef; } .nd-insp--DENIED { color:var(--danger,#a8442a); }
.nd-bid { display:inline-flex; align-items:center; gap:5px; }
.nd-bid label { display:inline-flex; align-items:center; gap:3px; font-size:10.5px; color:var(--sub,#6b7160); white-space:nowrap; }
.nd-bid input { width:74px; padding:4px 6px; border:1px solid var(--line,#dcd8c0); font:inherit; font-size:11.5px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; }
.nd-bid input[readonly] { background:var(--panel-alt,#f6f5ec); color:var(--sub,#6b7160); }
.nd-foot { display:flex; align-items:center; gap:8px; } .nd-foot > span { flex:1; font-size:11px; color:var(--muted,#98a08a); }