button {
	margin-top: 30px;
	margin-left: -15px;
}

h2 {
	text-shadow: 1px 1px 2px #666666;
}

.card {
	padding: 20px;
	margin-top: 20px;
	box-shadow: 2px 2px 8px #666666;
}


/* ══════════════════════════════════════════════
   Smart SYNCWORKS 퍼블리싱 — 디자인 토큰
   피그마 "SyncWorks 대시보드 시안 4종" 실측 (2026-08-26)
   ══════════════════════════════════════════════ */
:root {
	--brand: #2c7fdf;
	--brand-2: #034bb4;
	--nav: #445475;
	--orange: #ff7802;
	--pos: #38acba;
	--neg: #ff4040;
	--g01: #f3f4f6; --g02: #eaebed; --g03: #d9dadc;
	--g05: #a7a8aa; --g08: #545557;
	--ink: #111111;
	--surface: #ffffff;
	--tint-blue: #e7f0fb; --tint-teal: #e6f5f7;
	--tint-orange: #fff1e3; --tint-red: #fff5f5;
	--nav-muted: #8e9ab0; --on-nav: #c7ceda;
	--pos-fill: #38acba;   /* 게이지·바·도트 fill (텍스트용 --pos와 분리) */
	--chart-aux: #38acba;  /* 차트 보조 시리즈 — 전 테마 공통 teal */
	--chart-soft: #8cb8ee; /* 차트 연한 시리즈 */
	--radius: 12px;
	--shadow-pop: 0 16px 48px rgba(0,0,0,.22);
}

/* ── 테마: 맑은물에 그린 (?theme=malgeunmule) ──
   피그마 확정 레시피(2631:223): 본문 그린 + LNB 차콜, teal은 차트 보조로 유지 */
/* ── 테마: 다크 관제 (모니터링 계열, D 키 토글 — demo.js) ──
   토큰 재정의만으로 전 컴포넌트 전환. 차트 인라인 색도 var 기반이라 함께 따라옴 */
[data-theme="darkops"] {
	--surface: #171a20;
	--g01: #101318; --g02: #262b34; --g03: #39404c;
	--g05: #6f7684; --g08: #b4bac6;
	--ink: #eceef2;
	--nav: #0d1015; --nav-muted: #667082; --on-nav: #a8b0be;
	--tint-blue: #1a2b48; --tint-teal: #0f3138;
	--tint-orange: #3b2a14; --tint-red: #3b1d1d;
	--chart-soft: #3d5a85;
}

[data-theme="malgeunmule"] {
	--brand: #4a9e2f;
	--brand-2: #35761f;
	--nav: #38393b;
	--nav-muted: #8a8b8d; --on-nav: #c5c6c8;
	--pos: #4a9e2f;        /* positive 텍스트·칩 글자 */
	--pos-fill: #4dd18c;   /* 게이지·진행바 fill */
	--tint-blue: #eaf6e4;  /* 브랜드 틴트 → 그린 틴트 */
	--tint-teal: #e4f8ee;  /* pos 틴트 → 민트 틴트 */
	--chart-soft: #a8d695;
}

/* ── 테마: 맑은물에 바이올렛 (?theme=violet) ──
   피그마 "맑은물에 대시보드 시안 (Violet)" 스타일 팔레트 실측 (2026-09-08)
   primary #7631FF · 강조 라인은 블루(#2C7FDF)로 역할 교체 */
[data-theme="violet"] {
	--brand: #7631ff;
	--brand-2: #3d00b7;
	--nav: #38393b;
	--nav-muted: #8a8b8d; --on-nav: #c5c6c8;
	--orange: #2c7fdf;     /* 목표선·강조 라인 — 오렌지 역할을 블루가 대체 */
	--pos: #691eff;        /* positive 텍스트·칩 글자 */
	--pos-fill: #916dd9;   /* 게이지·진행바 fill */
	--tint-blue: #f1eaff;  /* 브랜드 틴트 → 연보라 */
	--tint-teal: #e7e9ff;  /* pos 틴트 → 라벤더 */
	--tint-orange: #e7f1ff; /* 블루 틴트 */
	--chart-soft: #d1baff;
}
/* ── 목업 캡처 모드 (?mock=1 — theme.js가 data-mock 세팅) ──
   온보딩 비컨·데모 토스트 숨김, AI 플로팅 버튼은 GNB 아래 우상단으로 */
[data-mock="1"] .swtr-bcn,
[data-mock="1"] .swtr-pop,
[data-mock="1"] .swdm-toast { display: none !important; }
[data-mock="1"] .swai-fab { bottom: auto !important; top: 8px !important; right: 150px !important; width: 40px !important; height: 40px !important; font-size: 12px !important; }

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
	font-family: 'Pretendard', -apple-system, 'Apple SD Gothic Neo', sans-serif;
	background: var(--g01); color: var(--ink); font-size: 13px;
	-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

/* ── GNB ─────────────────────────────── */
.gnb {
	height: 56px; background: var(--surface); border-bottom: 1px solid var(--g02);
	display: flex; align-items: center; padding: 0 20px; gap: 0;
	position: sticky; top: 0; z-index: 50;
}
.gnb .logo { line-height: 1.1; margin-right: 48px; }
.gnb .logo em { display: block; font-size: 10px; font-weight: 600; color: var(--brand); font-style: normal; }
.gnb .logo b { font-size: 16px; font-weight: 800; letter-spacing: -.2px; }
.gnb nav { display: flex; gap: 34px; flex: 1; }
.gnb nav a { font-size: 13px; font-weight: 500; color: var(--g08); white-space: nowrap; }
.gnb nav a.on { color: var(--brand); font-weight: 600; }
.gnb .user { font-size: 12px; color: var(--g08); }

/* ── 레이아웃 ─────────────────────────── */
.app { display: flex; min-height: calc(100vh - 56px); }
.lnb { width: 220px; background: var(--nav); padding: 24px 12px; flex-shrink: 0; }
.lnb .grp { font-size: 11px; font-weight: 600; color: var(--nav-muted); padding: 0 12px; margin: 18px 0 10px; }
.lnb .grp:first-child { margin-top: 0; }
.lnb a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--on-nav); margin-bottom: 2px; }
.lnb a.on { background: var(--brand); color: #fff; font-weight: 600; }
.lnb a:hover:not(.on) { background: rgba(255,255,255,.06); }
.main { flex: 1; padding: 24px; min-width: 0; }

/* ── 페이지 헤더 ──────────────────────── */
.page-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; }
.page-head h1 { font-size: 24px; font-weight: 700; }
.page-head .sub { font-size: 12px; color: var(--g05); font-weight: 500; }
.page-head .actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* ── 버튼 ─────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	height: 36px; padding: 0 18px; border-radius: 8px; font-family: inherit;
	font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid transparent; background: none; white-space: nowrap; }
.btn-primary { background: var(--brand); color: #fff; font-weight: 600; }
.btn-primary:hover { background: var(--brand-2); }
.btn-outline { background: var(--surface); border-color: var(--g03); color: var(--g08); }
.btn-outline:hover { border-color: var(--g05); }
.btn-brand-line { background: var(--surface); border-color: var(--brand); color: var(--brand); font-weight: 600; }
.btn-sm { height: 28px; padding: 0 12px; font-size: 11px; border-radius: 6px; }

.ic-plus { width: 10px; height: 10px; stroke: currentColor; stroke-width: 1.7;
	stroke-linecap: round; fill: none; flex-shrink: 0; }

/* ── 셀렉트 룩 ────────────────────────── */
.sel { height: 32px; padding: 0 30px 0 14px; border: 1px solid var(--g03); border-radius: 8px;
	background: var(--surface) url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' stroke='%23a7a8aa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
	font-family: inherit; font-size: 12px; font-weight: 500; color: var(--g08);
	appearance: none; -webkit-appearance: none; cursor: pointer; }

/* ── KPI 카드 ─────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin-bottom: 20px; }
.kpi { background: var(--surface); border: 1px solid var(--g02); border-radius: var(--radius); padding: 14px 16px; }
.kpi .lb { font-size: 12px; font-weight: 500; color: var(--g08); }
.kpi .num { font-size: 22px; font-weight: 700; margin: 6px 0 4px; letter-spacing: -.3px; }
.kpi .num small { font-size: 13px; font-weight: 600; margin-left: 1px; }
.kpi .meta { font-size: 10px; color: var(--g05); }
.kpi .delta { font-size: 10px; font-weight: 600; margin-top: 4px; }
.kpi.tint-blue { background: var(--tint-blue); border-color: transparent; }
.kpi.tint-red { background: var(--tint-red); border-color: transparent; }
.kpi.tint-orange { background: var(--tint-orange); border-color: transparent; }
.t-brand { color: var(--brand) !important; } .t-pos { color: var(--pos) !important; }
.t-neg { color: var(--neg) !important; } .t-orange { color: var(--orange) !important; }
.t-mut { color: var(--g05) !important; }

/* ── 패널 ─────────────────────────────── */
.panel { background: var(--surface); border: 1px solid var(--g02); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 20px; }
.panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.panel-head h2 { font-size: 15px; font-weight: 700; }
.panel-head .meta { margin-left: auto; font-size: 11px; color: var(--g05); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-64 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; }
.grid-2 > .panel, .grid-64 > .panel { margin-bottom: 0; }
.row { display: grid; gap: 20px; margin-bottom: 20px; }
.row > *, .grid-2 > *, .grid-64 > * { min-width: 0; }

/* ── 배지 ─────────────────────────────── */
.badge { display: inline-block; padding: 4px 9px; border-radius: 11px; font-size: 10px; font-weight: 600; white-space: nowrap; }
.bg-blue { background: var(--tint-blue); color: var(--brand); }
.bg-teal { background: var(--tint-teal); color: var(--pos); }
.bg-orange { background: var(--tint-orange); color: var(--orange); }
.bg-red { background: var(--tint-red); color: var(--neg); }
.bg-gray { background: var(--g01); color: var(--g08); }

/* ── 표 ───────────────────────────────── */
table.grid { width: 100%; border-collapse: collapse; }
table.grid th { background: var(--g01); font-size: 11px; font-weight: 600; color: var(--g08);
	text-align: left; padding: 10px 12px; }
table.grid th:first-child { border-radius: 6px 0 0 6px; }
table.grid th:last-child { border-radius: 0 6px 6px 0; }
table.grid td { padding: 12px; font-size: 12px; border-bottom: 1px solid var(--g02); }
table.grid tr:last-child td { border-bottom: none; }
table.grid .r, table.grid th.r { text-align: right; }
table.grid .link { color: var(--brand); font-weight: 500; }
table.grid .more { color: var(--g05); font-size: 11px; }

/* ── 필터 바 ──────────────────────────── */
.filter-bar { background: var(--surface); border: 1px solid var(--g02); border-radius: 10px;
	padding: 10px 12px; display: flex; align-items: center; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.chip { height: 32px; padding: 0 14px; border-radius: 16px; border: 1px solid var(--g03);
	background: var(--surface); font-family: inherit; font-size: 12px; font-weight: 500; color: var(--g08);
	cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.chip.on { background: var(--tint-blue); border-color: var(--brand); color: var(--brand); font-weight: 600; }
.filter-bar .count { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--g08); }
.search { height: 32px; padding: 0 14px; border: 1px solid var(--g03); border-radius: 8px;
	font-family: inherit; font-size: 12px; width: 200px; }
.search::placeholder { color: var(--g05); }

/* ── 가로 바 (랭킹·재고) ───────────────── */
.hbar-row { display: grid; grid-template-columns: 90px 1fr 60px; gap: 12px; align-items: center; margin-bottom: 14px; }
.hbar-row .nm { font-size: 12px; font-weight: 500; color: var(--g08); }
.hbar-row .val { font-size: 12px; font-weight: 600; text-align: right; }
.hbar { height: 10px; background: var(--g01); border-radius: 5px; overflow: hidden; }
.hbar i { display: block; height: 100%; border-radius: 5px; background: var(--brand); }
.hbar i.pos { background: var(--pos-fill); } .hbar i.neg { background: var(--neg); } .hbar i.orange { background: var(--orange); }

/* ── 콤보 차트 ────────────────────────── */
.combo { position: relative; height: 300px; margin-top: 10px; }
.combo .grid-lines { position: absolute; inset: 0 0 26px 40px; }
.combo .grid-lines i { position: absolute; left: 0; right: 0; height: 1px; background: var(--g02); }
.combo .ylab { position: absolute; left: 0; width: 34px; text-align: right; font-size: 10px; color: var(--g05); transform: translateY(-50%); }
.combo .bars { position: absolute; inset: 0 0 26px 40px; display: flex; align-items: flex-end; gap: 4.5%; padding: 0 2%; }
.combo .bars i { flex: 1; background: var(--brand); border-radius: 3px 3px 0 0; }
.combo .bars i.miss { opacity: .45; }
.combo .xlab { position: absolute; left: 40px; right: 0; bottom: 0; display: flex; padding: 0 2%; gap: 4.5%; }
.combo .xlab span { flex: 1; text-align: center; font-size: 10px; color: var(--g05); }
.combo svg.line { position: absolute; inset: 0 0 26px 40px; width: calc(100% - 40px); height: calc(100% - 26px); overflow: visible; }
.legend { display: flex; gap: 18px; align-items: center; margin-top: 12px; font-size: 11px; color: var(--g08); }
.legend .sw { display: inline-block; width: 13px; height: 13px; border-radius: 3px; vertical-align: -2px; margin-right: 6px; }
.legend .ln { display: inline-block; width: 22px; height: 3px; border-radius: 2px; vertical-align: 3px; margin-right: 6px; }

/* ── 폼 ───────────────────────────────── */
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 16px; }
.form-grid .span2 { grid-column: span 2; }
.field label { display: block; font-size: 12px; font-weight: 500; color: var(--g08); margin-bottom: 7px; }
.field label b { color: var(--neg); font-weight: 600; }
.ctl { width: 100%; height: 40px; padding: 0 14px; border: 1px solid var(--g03); border-radius: 8px;
	font-family: inherit; font-size: 13px; font-weight: 500; color: var(--ink); background: var(--surface); }
select.ctl, .dd-block .dd-btn.ctl { appearance: none; -webkit-appearance: none; cursor: pointer;
	background: var(--surface) url("data:image/svg+xml,%3Csvg width='11' height='11' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' stroke='%23a7a8aa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center; }
.ctl[readonly], .ctl:disabled { background-color: var(--g01); border-color: transparent; color: var(--ink); }
.ctl:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--tint-blue); }
.line-items td .ctl { height: 36px; }
.add-row { background: var(--g01); border: none; border-radius: 8px; width: 100%; height: 40px;
	font-family: inherit; font-size: 12px; color: var(--g05); cursor: pointer; margin-top: 10px; }
.sum-bar { display: flex; align-items: center; gap: 20px; border-top: 1px solid var(--g02);
	margin-top: 16px; padding-top: 14px; font-size: 12px; color: var(--g08); }
.sum-bar .total { margin-left: auto; font-size: 15px; font-weight: 700; color: var(--brand); }
.note-banner { background: var(--tint-blue); color: var(--brand); border-radius: 10px;
	padding: 13px 16px; font-size: 13px; font-weight: 500; margin-bottom: 20px; }
.note-banner.warn { background: var(--tint-orange); color: var(--orange); }

/* ── 스파크라인·게이지 ─────────────────── */
.gauge { width: 100%; height: 10px; background: var(--g01); border-radius: 5px; overflow: hidden; }
.gauge i { display: block; height: 100%; background: var(--brand); border-radius: 5px; }

/* ── 페이지네이션 ─────────────────────── */
.paging { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 20px 0; font-size: 12px; color: var(--g08); }
.paging a { width: 30px; height: 30px; border: 1px solid var(--g03); border-radius: 8px;
	display: inline-flex; align-items: center; justify-content: center; background: var(--surface); }
.paging a.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.paging .nav { border: none; background: none; width: auto; padding: 0 8px; }

/* AF-10 기간 팝오버 (정본 패턴) */
.period-wrap { position: relative; }
.popover { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
	background: var(--surface); border-radius: 14px; padding: 16px;
	box-shadow: var(--shadow-pop); display: flex; gap: 16px; }
.popover[hidden] { display: none; }
.pop-presets { display: flex; flex-direction: column; gap: 2px; min-width: 130px;
	border-right: 1px solid var(--g02); padding-right: 14px; }
.pop-item { display: block; padding: 9px 12px; border-radius: 8px; font-size: 13px;
	color: var(--ink); cursor: pointer; white-space: nowrap; }
.pop-item:hover { background: var(--g01); }
.pop-item.on { background: var(--brand); color: #fff; font-weight: 600; }
.pop-cal { display: flex; flex-direction: column; gap: 10px; }
.cal-cols { display: flex; gap: 22px; }
.cal-col { display: flex; flex-direction: column; gap: 4px; }
.cal-label { font-size: 12.5px; color: var(--g08); padding: 2px 4px 6px; border-bottom: 1px solid var(--g02); }
.cal-label b { color: var(--ink); font-size: 13px; margin-left: 8px; }
.fp-cal-input { display: none; }
.cal-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px;
	border-top: 1px solid var(--g02); padding-top: 12px; }
.cal-note { font-size: 11px; color: var(--g05); }
.cal-actions { display: flex; gap: 8px; }
.pop-cal .flatpickr-calendar.inline { box-shadow: none; border: none; margin: 0 auto; }
.flatpickr-calendar { font-family: 'Pretendard', sans-serif; }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--brand); border-color: var(--brand); }
.flatpickr-day.today { border-color: var(--brand); }
.flatpickr-day:hover { background: var(--tint-blue); border-color: var(--tint-blue); }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: #c9ced6; }
.chip.period-on { background: var(--tint-blue); border-color: var(--brand); color: var(--brand); font-weight: 600; }

.fp-date { cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.5' y='3' width='13' height='11.5' rx='2' stroke='%23a7a8aa' stroke-width='1.4'/%3E%3Cline x1='1.5' y1='7' x2='14.5' y2='7' stroke='%23a7a8aa' stroke-width='1.4'/%3E%3Cline x1='5' y1='1' x2='5' y2='4' stroke='%23a7a8aa' stroke-width='1.4' stroke-linecap='round'/%3E%3Cline x1='11' y1='1' x2='11' y2='4' stroke='%23a7a8aa' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 13px center; padding-right: 38px; }

/* ── 커스텀 드롭다운 (ui.js) ───────────── */
.dd { position: relative; display: inline-block; vertical-align: middle; }
.dd-block { display: block; width: 100%; }
.dd-hidden { display: none !important; }
.dd-btn { text-align: left; cursor: pointer; width: 100%;
	background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' stroke='%23a7a8aa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.dd:not(.dd-block) .dd-btn { width: auto; }
.dd.open .dd-btn { border-color: var(--brand); box-shadow: 0 0 0 3px var(--tint-blue); }
.dd-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%;
	background: var(--surface); border: 1px solid var(--g02); border-radius: 10px;
	box-shadow: 0 10px 30px rgba(10, 20, 40, .14); padding: 6px; z-index: 70;
	display: none; max-height: 264px; overflow-y: auto; }
.dd.open .dd-menu { display: block; }
.dd-item { padding: 9px 12px; border-radius: 7px; font-size: 12.5px; font-weight: 500;
	color: var(--ink); cursor: pointer; white-space: nowrap; }
.dd-item:hover { background: var(--g01); }
.dd-item.on { background: var(--tint-blue); color: var(--brand); font-weight: 600; }

/* ── 반응형 ───────────────────────────── */
@media (max-width: 1080px) {
	.grid-2, .grid-64 { grid-template-columns: 1fr; }
	.row { grid-template-columns: 1fr !important; }
}
@media (max-width: 820px) {
	/* GNB: 가로 스크롤 메뉴 */
	.gnb { padding: 0 14px; gap: 12px; }
	.gnb .logo { margin-right: 8px; }
	.gnb .logo b { font-size: 14px; }
	.gnb nav { overflow-x: auto; gap: 22px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.gnb nav::-webkit-scrollbar { display: none; }
	.gnb .user { display: none; }

	/* LNB → 상단 가로 스크롤 바 */
	.app { display: block; }
	.lnb { width: 100%; display: flex; align-items: center; gap: 6px;
		padding: 10px 12px; overflow-x: auto; scrollbar-width: none; }
	.lnb::-webkit-scrollbar { display: none; }
	.lnb .grp { display: none; }
	.lnb a { flex-shrink: 0; margin-bottom: 0; padding: 8px 14px; font-size: 12px; white-space: nowrap; }

	.main { padding: 16px 14px; }
	.page-head { flex-wrap: wrap; gap: 8px 12px; margin-bottom: 14px; }
	.page-head h1 { font-size: 20px; }
	.page-head .actions { margin-left: 0; width: 100%; flex-wrap: wrap; }

	/* 그리드 전부 1열 · KPI 2열 (인라인 스타일 덮어쓰기) */
	.row, .grid-2, .grid-64, .form-grid { grid-template-columns: 1fr !important; gap: 14px; }
	.panel { overflow-x: auto; }
	table.grid:not(.fit) { min-width: 640px; }
	.kpis { grid-template-columns: 1fr 1fr; }
	.form-grid .span2 { grid-column: auto; }
	.kpis { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; margin-bottom: 14px; }
	.kpi { padding: 12px 14px; }
	.kpi .num { font-size: 19px; }

	/* 표: 패널 안에서 가로 스크롤 */
	.panel { padding: 14px; overflow-x: auto; }
	table.grid { min-width: 620px; }
	.panel table.grid.fit { min-width: 0; }

	/* 가로 바: 라벨 윗줄 · 바 아랫줄 재배치 (인라인 컬럼 덮어쓰기) */
	.hbar-row { grid-template-columns: 1fr auto auto !important; row-gap: 6px; gap: 8px; margin-bottom: 16px; }
	.hbar-row .nm { grid-area: 1 / 1; }
	.hbar-row .badge { grid-area: 1 / 2; }
	.hbar-row .val { grid-area: 1 / 3; }
	.hbar-row .hbar, .hbar-row svg { grid-area: 2 / 1 / 3 / 4; width: 100%; }

	/* 차트 */
	.combo { height: 220px; }
	.legend { flex-wrap: wrap; gap: 10px; }

	/* 필터 바 */
	.filter-bar { padding: 8px 10px; }
	.search { flex: 1; min-width: 140px; }
	.filter-bar .count { width: 100%; text-align: right; }

	/* 기간 팝오버: 화면 고정 + 세로 스택 (AF-10 모바일 규칙) */
	.popover { position: fixed !important; left: 14px; right: 14px; top: 64px;
		max-height: calc(100vh - 84px); overflow-y: auto; flex-direction: column; z-index: 90; }
	.pop-presets { flex-direction: row; flex-wrap: wrap; border-right: none;
		border-bottom: 1px solid var(--g02); padding: 0 0 10px; min-width: 0; }
	.cal-cols { flex-direction: column; gap: 12px; }
	.cal-foot { flex-wrap: wrap; }

	.sum-bar { flex-wrap: wrap; gap: 8px 16px; }
	.note-banner { font-size: 12px; }
}