/* ===== 관리자 셸 ===== */
.shell { display:flex; min-height:100vh; }
.sidebar { width:220px; background:var(--bg-surface); border-right:1px solid var(--border);
  position:fixed; top:0; bottom:0; left:0; padding:18px 12px; z-index:30; }
.brand { font-size:20px; font-weight:800; padding:8px 10px 4px; }
.brand span, .brand-lg span { color:var(--primary); }
.brand-sub { margin:0 10px 16px; padding:3px 10px; border-radius:6px;
  background:#949cb2; color:#fff; font-size:13px; font-weight:700;
  text-align:center; letter-spacing:.2px; word-break:break-all; }
.nav-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px;
  color:var(--text-secondary); font-weight:500; margin-bottom:2px; }
.nav-item svg { width:18px; height:18px; }
.nav-item:hover { background:var(--bg-elevated); color:var(--text-primary); }
.nav-item.is-active { background:var(--primary); color:#fff; }
.main { flex:1; margin-left:220px; display:flex; flex-direction:column; min-width:0; }
.topbar { height:56px; display:flex; align-items:center; gap:12px; padding:0 20px;
  border-bottom:1px solid var(--border); background:var(--bg-surface); position:sticky; top:0; z-index:20; }
.topbar .spacer { flex:1; }
.hamburger { display:none; background:none; border:none; color:var(--text-primary); font-size:20px; cursor:pointer; }
.account { display:flex; align-items:center; gap:12px; }
.account .who { font-size:13px; color:var(--text-secondary); }
.account .who small { display:block; font-size:11px; color:var(--text-disabled); }
.theme-form { margin:0; }
.icon-btn { background:none; border:1px solid var(--border); border-radius:6px; cursor:pointer;
  color:var(--text-secondary); padding:5px 8px; font-size:14px; }
.icon-btn:hover { background:var(--bg-elevated); }
.content { padding:24px; max-width:1440px; width:100%; }

/* ===== 공통 ===== */
.page-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; gap:12px; }
.page-head h1 { font-size:22px; font-weight:700; margin:0; }
.page-head h1 small.muted { font-size:13px; color:var(--text-secondary); font-weight:400; margin-left:8px; }
.head-actions { display:flex; gap:8px; }
.muted { color:var(--text-secondary); }
.mono { font-family:ui-monospace, Menlo, Consolas, monospace; }
.mini { font-size:12px; color:var(--text-secondary); }

.card { background:var(--bg-surface); border:1px solid var(--border); border-radius:12px; margin-bottom:20px; }
.card-pad { padding:20px 22px; }
.card-head { padding:16px 20px; border-bottom:1px solid var(--border); }
.card-head h2 { font-size:15px; font-weight:600; margin:0; }
.sec-title { font-size:15px; font-weight:600; margin:0 0 16px; }

/* KPI */
.kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px; }
.kpi-card { background:var(--bg-surface); border:1px solid var(--border); border-radius:12px; padding:18px 20px; }
.kpi-label { font-size:13px; color:var(--text-secondary); margin-bottom:8px; }
.kpi-num { font-size:30px; font-weight:700; font-variant-numeric:tabular-nums; }
.kpi-num small { font-size:16px; color:var(--text-secondary); }

.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.grid-form { display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; margin-bottom:14px; }

/* 테이블 */
.table-wrap { overflow-x:auto; }
.data-table { width:100%; border-collapse:collapse; font-size:13px; }
.data-table th { text-align:left; padding:11px 14px; color:var(--text-secondary); font-weight:600;
  border-bottom:1px solid var(--border); white-space:nowrap; }
.data-table td { padding:11px 14px; border-bottom:1px solid var(--border); }
.data-table tbody tr:hover { background:var(--bg-elevated); }
.data-table .num { text-align:right; font-variant-numeric:tabular-nums; }
.data-table .empty { text-align:center; color:var(--text-secondary); padding:36px; }
/* 관리 컬럼: td 는 일반 테이블 셀로 유지(행 경계선 정렬), 내부 요소만 가로 정렬 */
.actions { white-space:nowrap; vertical-align:middle; }
.actions > * { display:inline-flex; vertical-align:middle; }
.actions > * + * { margin-left:6px; }
.inline { display:inline-flex; align-items:center; margin:0; }

/* 배지/칩 */
.badge { display:inline-block; padding:2px 8px; border-radius:20px; font-size:11.5px; font-weight:600; color:#fff; }
.badge-sm { padding:1px 7px; border-radius:14px; font-size:10.5px; font-weight:700; letter-spacing:-.1px; }
.badge-success{background:var(--success)} .badge-warning{background:var(--warning)}
.badge-danger{background:var(--danger)} .badge-neutral{background:var(--neutral)} .badge-primary{background:var(--primary)}
/* 다중 상태 배지 묶음 */
.status-badges { display:inline-flex; flex-wrap:wrap; gap:4px; align-items:center; }
.chip { display:inline-block; padding:2px 8px; border-radius:6px; font-size:12px;
  background:var(--bg-elevated); color:var(--text-secondary); }

/* 버튼 */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer;
  border:1px solid transparent; border-radius:8px; padding:9px 16px; font-size:13px; font-weight:600;
  font-family:inherit; transition:background .12s; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-hover); color:#fff; }
.btn-secondary { background:transparent; border-color:var(--border); color:var(--text-primary); }
.btn-secondary:hover { background:var(--bg-elevated); }
.btn-ghost { background:transparent; color:var(--text-secondary); border-color:transparent; }
.btn-ghost:hover { background:var(--bg-elevated); color:var(--text-primary); }
.btn-danger { background:transparent; border-color:var(--danger); color:var(--danger); }
.btn-danger:hover { background:var(--danger); color:#fff; }

/* 클라이언트 폼 2단 그리드 */
.client-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
@media (max-width:860px){ .client-grid { grid-template-columns:1fr; } }
.form-panel { background:var(--bg-surface); border:1px solid var(--border); border-radius:12px; padding:18px 20px; }
.form-panel-head { display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:0 0 14px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.form-panel-head h2 { font-size:15px; font-weight:700; margin:0; }
.form-panel .field { margin-bottom:14px; }
.form-panel .radio-row { display:flex; gap:16px; align-items:center; margin-top:4px; }
.form-panel .pw-row { display:flex; gap:8px; align-items:center; }
.form-panel .pw-row input { flex:1; }
.perm-box { margin-top:4px; padding:12px 14px; border:1px dashed var(--border); border-radius:10px; background:var(--bg-elevated); }
.perm-box > span { font-weight:600; }

/* 리드 메모 이력 */
.memo-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.memo-item { border:1px solid var(--border); border-radius:8px; padding:10px 12px; background:var(--bg-surface); }
.memo-meta { display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.memo-time { font-size:12px; color:var(--text-secondary); }
.memo-body { white-space:pre-wrap; word-break:break-word; font-size:14px; line-height:1.5; }
.memo-add { margin-bottom:14px; }
.memo-add textarea { margin-bottom:8px; }

/* ── 리드 상세 ─────────────────────────────── */
.lead-hero { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:16px; padding:18px 22px; }
.lead-hero-main { display:flex; align-items:center; gap:14px; min-width:0; }
.lead-avatar { width:52px; height:52px; flex:0 0 52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:700;
  color:#fff; background:linear-gradient(135deg, var(--primary), var(--primary-hover)); }
.lead-name { font-size:19px; font-weight:700; line-height:1.2; }
.lead-phone { display:flex; align-items:center; gap:6px; margin-top:3px; }
.lead-phone a { font-size:15px; color:var(--text-secondary); }
.lead-phone a:hover { color:var(--primary); }
.lead-hero-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.lead-date { color:var(--text-secondary); }

.status-pill { display:inline-block; padding:6px 14px; border-radius:999px; font-size:12.5px;
  font-weight:700; color:#fff; line-height:1; }
.status-primary { background:var(--primary); }
.status-success { background:var(--success); }
.status-warning { background:var(--warning); }
.status-neutral { background:var(--neutral); }
.status-danger  { background:var(--danger); }

.info-list { display:flex; flex-direction:column; }
.info-row { display:grid; grid-template-columns:92px 1fr; gap:12px; align-items:start;
  padding:10px 0; border-bottom:1px solid var(--border); }
.info-row:last-child { border-bottom:0; }
.info-label { color:var(--text-secondary); font-size:13px; }
.info-value { font-size:13.5px; color:var(--text-primary); word-break:break-word; }
.consent-pills { display:flex; flex-wrap:wrap; gap:6px; }
.consent-pill { display:inline-flex; align-items:center; gap:3px; padding:3px 9px; border-radius:6px;
  font-size:12px; font-weight:600; }
.consent-pill.is-on  { color:var(--success); background:rgba(47,191,143,.14); }
.consent-pill.is-off { color:var(--text-disabled); background:var(--bg-elevated); }

.survey-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.survey-item { background:var(--bg-elevated); border:1px solid var(--border); border-radius:10px; padding:12px 14px; }
.survey-item.is-legacy { border-style:dashed; opacity:.85; }
.survey-q { display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600;
  color:var(--text-primary); margin-bottom:9px; }
.survey-no { flex:0 0 auto; min-width:20px; height:20px; padding:0 5px; border-radius:6px;
  display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;
  color:var(--primary); background:rgba(79,124,255,.16); }
.survey-a { display:flex; flex-wrap:wrap; gap:6px; }
.ans-chip { display:inline-block; padding:5px 11px; border-radius:7px; font-size:13px;
  background:var(--bg-surface); border:1px solid var(--border); color:var(--text-primary); }
.ans-empty { font-size:12.5px; color:var(--text-disabled); font-style:italic; }
.survey-empty { text-align:center; padding:30px 10px; }
.survey-empty-icon { font-size:30px; display:block; margin-bottom:8px; opacity:.7; }

.lead-manage { display:grid; grid-template-columns:240px 1fr; gap:26px; align-items:start; }
@media (max-width:860px){ .lead-manage { grid-template-columns:1fr; gap:20px; } }
.lead-manage-status .status-pill { margin-top:2px; }

.btn-sm { padding:5px 10px; font-size:12px; }
.btn-lg { padding:12px 28px; font-size:15px; }
.btn-block { width:100%; }

/* 폼 */
.field { display:block; margin-bottom:14px; }
.field > span { display:block; font-size:13px; color:var(--text-secondary); margin-bottom:6px; }
.field > span small { color:var(--text-disabled); font-weight:400; }
input[type=text], input[type=password], input[type=tel], input[type=number], input[type=date],
input[type=datetime-local], input[type=color], select, textarea {
  width:100%; background:var(--bg-input); border:1px solid var(--border); border-radius:8px;
  padding:9px 11px; color:var(--text-primary); font-size:14px; font-family:inherit; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--primary); outline-offset:-1px; border-color:var(--primary); }
textarea { resize:vertical; }
.hint { font-size:12px; color:var(--text-secondary); margin:6px 0 0; }
.check { display:inline-flex; align-items:center; gap:6px; font-size:13px; cursor:pointer; }
.check input { width:auto; }
.form-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }
.inline-controls { display:flex; align-items:center; gap:10px; }

/* 알림 */
.alert { padding:11px 16px; border-radius:8px; margin-bottom:16px; font-size:13px; font-weight:500; }
.alert-success { background:rgba(47,191,143,.14); color:var(--success); border:1px solid rgba(47,191,143,.3); }
.alert-error { background:rgba(226,85,99,.14); color:var(--danger); border:1px solid rgba(226,85,99,.3); }
.alert-info { background:rgba(86,130,235,.12); color:var(--primary); border:1px solid rgba(86,130,235,.3); }
.survey-legacy-note { font-weight:500; line-height:1.5; }

/* 로그인 */
.login-body { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-card { width:360px; background:var(--bg-surface); border:1px solid var(--border); border-radius:16px; padding:36px 32px; }
.brand-lg { font-size:28px; font-weight:800; text-align:center; }
.login-sub { text-align:center; color:var(--text-secondary); font-size:13px; margin:6px 0 24px; }

/* 캠페인 URL */
.url-cell { display:flex; align-items:center; gap:6px; }
.url-banner { display:flex; align-items:center; gap:12px; background:var(--bg-surface); border:1px solid var(--border);
  border-radius:10px; padding:12px 18px; margin-bottom:18px; flex-wrap:wrap; }
.url-banner span { color:var(--text-secondary); font-size:12px; }
.url-banner a { font-size:14px; word-break:break-all; }
.mini-select { padding:4px 6px; font-size:12px; width:auto; }

/* 마법사 */
.wizard section { margin-bottom:18px; }
.sticky-actions { position:sticky; bottom:0; background:var(--bg-base); padding:14px 0; border-top:1px solid var(--border);
  display:flex; justify-content:flex-end; }
.q-item { background:var(--bg-input); border:1px solid var(--border); border-radius:10px; padding:12px; margin-bottom:10px; }
.q-row { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.q-row .q-type { width:120px; }
.q-row .q-label { flex:1; }
.q-options { font-size:13px; }

/* 보기(옵션) 에디터 — 텍스트 + 이미지 */
.survey-mode { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.opt-editor { margin-top:8px; padding-left:4px; }
.opt-rows { display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.opt-row { display:flex; align-items:center; gap:8px; }
.opt-row .opt-label { flex:1; }
.opt-img-btn { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border:1px solid var(--border);
  border-radius:8px; cursor:pointer; background:var(--bg-surface); white-space:nowrap; font-size:12px; color:var(--text-secondary); }
.opt-img-btn:hover { background:var(--bg-elevated); }
.opt-thumb { width:32px; height:32px; object-fit:cover; border-radius:6px; }
.opt-thumb.is-empty { display:none; }

/* 필터 */
.filter-bar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:18px; }
.filter-bar select, .filter-bar input { width:auto; min-width:120px; }
.filter-bar .spacer { flex:1 1 auto; }

/* 통계 내보내기 버튼 (CSV / PNG) */
.export-actions { display:flex; gap:9px; }
.btn-export { display:inline-flex; align-items:center; gap:7px; padding:9px 17px; font-size:13px; font-weight:700;
  font-family:inherit; color:#fff; border:1px solid transparent; border-radius:10px; cursor:pointer; letter-spacing:.2px;
  box-shadow:0 2px 5px rgba(20,24,40,.18); transition:filter .12s, transform .06s, box-shadow .12s; }
.btn-export svg { width:17px; height:17px; }
.btn-export.is-csv { background:linear-gradient(180deg, #2FBF8F, #239d75); }
.btn-export.is-png { background:linear-gradient(180deg, #5682EB, #3f6bd6); }
.btn-export:hover { filter:brightness(1.07); box-shadow:0 4px 12px rgba(20,24,40,.26); }
.btn-export:active { transform:translateY(1px); box-shadow:0 1px 3px rgba(20,24,40,.2); }

/* 빠른 기간 선택 */
.period-bar { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:18px; }
.period-btn { padding:6px 13px; border-radius:999px; border:1px solid var(--border); background:var(--bg-surface);
  color:var(--text-secondary); font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit;
  transition:background .12s, border-color .12s, color .12s; }
.period-btn:hover { border-color:var(--primary); color:var(--text-primary); }
.period-btn.is-active { background:var(--primary); border-color:var(--primary); color:#fff; }
.period-custom { display:inline-flex; align-items:center; gap:6px; margin-left:6px; padding-left:10px;
  border-left:1px solid var(--border); flex-wrap:nowrap; flex-shrink:0; }
.period-date { padding:6px 9px; border:1px solid var(--border); border-radius:8px; background:var(--bg-surface);
  color:var(--text-primary); font-size:12.5px; font-family:inherit; line-height:1.2; width:148px; }
.period-tilde { color:var(--text-secondary); font-weight:700; }
.period-apply { background:var(--bg-elevated); flex-shrink:0; white-space:nowrap; }

/* 상태 다중 선택 (체크박스 그룹) */
.status-picker { display:flex; flex-direction:column; gap:12px; margin-bottom:14px; }
.status-group-title { font-size:11.5px; font-weight:700; color:var(--text-secondary); margin-bottom:6px; letter-spacing:.2px; }
.status-checks { display:flex; flex-wrap:wrap; gap:7px; }
.status-check { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:8px;
  border:1px solid var(--border); background:var(--bg-surface); cursor:pointer; font-size:13px; font-weight:600;
  color:var(--text-secondary); transition:border-color .12s, background .12s, color .12s; user-select:none; }
.status-check:hover { border-color:var(--primary); color:var(--text-primary); }
.status-check input { position:absolute; opacity:0; width:0; height:0; }
.status-dot { width:10px; height:10px; border-radius:50%; flex:none; box-shadow:0 0 0 2px rgba(255,255,255,.12) inset; }
.status-check:has(input:checked) { border-color:var(--primary); background:var(--bg-elevated); color:var(--text-primary); box-shadow:0 0 0 1px var(--primary) inset; }

/* 등록시기 (정식 시작일 대비 접수 경과) */
.reg-timing { font-size:12.5px; font-weight:700; white-space:nowrap; }
.reg-timing.reg-fresh { color:var(--success); }
.reg-timing.reg-warn { color:var(--warning); }
.reg-timing.reg-muted { color:var(--text-disabled); font-weight:500; }

/* 탭 */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:20px; }
.tab { padding:10px 16px; color:var(--text-secondary); font-weight:600; font-size:14px; border-bottom:2px solid transparent; }
.tab.is-active { color:var(--primary); border-bottom-color:var(--primary); }
.tabs button.tab { background:none; border:0; border-bottom:2px solid transparent; cursor:pointer; font-family:inherit; }
.tabs button.tab:hover { color:var(--text-primary); }
.tabs button.tab.is-active { color:var(--primary); border-bottom-color:var(--primary); }
.tab-panel { display:none; }
.tab-panel.is-active { display:block; }

/* UTM 추적 URL 빌더 */
.utm-builder { border:1px solid var(--border); border-radius:12px; padding:16px 18px; margin-bottom:18px;
  background:var(--bg-elevated); }
.utm-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:12px; }
@media (max-width:820px){ .utm-grid { grid-template-columns:1fr; } }
.utm-field > span small { color:var(--primary); font-weight:600; }
.utm-field .hint { line-height:1.6; }
.utm-field code, .utm-result code { background:var(--bg-input); border:1px solid var(--border); border-radius:4px;
  padding:1px 5px; font-family:ui-monospace, Menlo, Consolas, monospace; font-size:11.5px; color:var(--text-primary); }
.utm-result { margin-top:14px; padding-top:14px; border-top:1px dashed var(--border); }
.utm-result-label { display:block; font-size:13px; font-weight:600; color:var(--text-secondary); margin-bottom:6px; }
.utm-result-row { display:flex; gap:8px; align-items:center; }
.utm-result-row input { flex:1; background:var(--bg-input); }
.adv-block { margin:4px 0 18px; border:1px solid var(--border); border-radius:10px; padding:8px 14px; }
.adv-block summary { cursor:pointer; font-size:13px; font-weight:600; color:var(--text-secondary); }
.adv-block[open] summary { margin-bottom:4px; color:var(--text-primary); }

/* 픽셀 스크립트 안내 */
.pixel-guide { border:1px solid var(--border); border-left:3px solid var(--primary); border-radius:10px;
  background:var(--bg-elevated); padding:12px 16px; margin-bottom:14px; font-size:13px; line-height:1.6; }
.pixel-guide p { margin:0 0 8px; }
.pixel-guide ul { margin:0 0 8px; padding-left:18px; display:grid; grid-template-columns:repeat(2,1fr); gap:2px 16px; }
@media (max-width:820px){ .pixel-guide ul { grid-template-columns:1fr; } }
.pixel-guide li { font-size:12.5px; }
.pixel-tips { margin:8px 0 0 !important; padding-top:8px; border-top:1px dashed var(--border); color:var(--text-secondary); }
.pixel-guide code { background:var(--bg-input); border:1px solid var(--border); border-radius:4px;
  padding:1px 5px; font-family:ui-monospace, Menlo, Consolas, monospace; font-size:11.5px; color:var(--text-primary); }

/* KV */
.kv { display:grid; grid-template-columns:110px 1fr; gap:8px 14px; margin:0; font-size:13px; }
.kv dt { color:var(--text-secondary); }
.kv dd { margin:0; }

/* 페이저 */
.pager { display:flex; gap:6px; justify-content:center; }
.page-link { padding:7px 12px; border:1px solid var(--border); border-radius:8px; color:var(--text-secondary); }
.page-link.is-active { background:var(--primary); color:#fff; border-color:var(--primary); }

.chart { width:100%; }

/* billboard.js 테마 연동 — 다크/라이트 모두 텍스트 가독성 보장 */
.bb svg { font-family: inherit; }
.bb text,
.bb-axis text,
.bb-legend-item text,
.bb-texts text,
.bb-chart-arcs-title { fill: var(--chart-text) !important; }
.bb-axis .tick text { fill: var(--chart-text) !important; }
.bb-axis path.domain,
.bb-axis line,
.bb-grid line,
.bb-xgrid, .bb-ygrid { stroke: var(--chart-grid) !important; }
.bb-chart-arcs-title { font-weight: 700; }
/* 마우스 오버 툴팁 */
.bb-tooltip { background: var(--bg-elevated) !important; border: 1px solid var(--border) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.25) !important; color: var(--text-primary) !important; opacity: 1 !important; }
.bb-tooltip th { background: var(--bg-elevated) !important; color: var(--text-secondary) !important;
  border-bottom: 1px solid var(--border) !important; }
.bb-tooltip td { color: var(--text-primary) !important; border-left: none !important; }
.bb-tooltip td.value { color: var(--text-primary) !important; font-variant-numeric: tabular-nums; }
.bb-legend-item-hidden text { fill: var(--text-disabled) !important; }

/* 이미지 업로드 */
.img-upload { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.img-preview { width:80px; height:56px; object-fit:cover; border:1px solid var(--border); border-radius:8px; background:var(--bg-input); }
.img-preview.is-empty { display:none; }
.img-upload input[type=file] { font-size:12px; }

/* 슬라이스 에디터 */
.slice-toolbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.slice-status { font-size:12px; color:var(--success); margin-left:6px; }
.block-list { list-style:none; margin:0; padding:0; }
.block-empty { color:var(--text-secondary); padding:24px; text-align:center; border:1px dashed var(--border); border-radius:10px; }
.block-item { display:flex; align-items:center; gap:12px; background:var(--bg-input); border:1px solid var(--border);
  border-radius:10px; padding:8px 12px; margin-bottom:8px; }
.block-thumb { width:64px; height:44px; object-fit:cover; border-radius:6px; }
.block-icon { width:64px; height:44px; display:flex; align-items:center; justify-content:center;
  background:var(--bg-elevated); border-radius:6px; color:var(--text-secondary); }
.block-name { flex:1; font-weight:500; }
.block-actions { display:flex; gap:4px; }

/* 동의 항목 편집 */
.sub-title { font-size:14px; font-weight:600; margin:18px 0 12px; color:var(--text-primary); }
.consent-edit { border:1px solid var(--border); border-radius:10px; padding:14px 16px; margin-bottom:12px; background:var(--bg-input); }
.consent-edit-head { font-weight:600; margin-bottom:10px; display:flex; align-items:center; gap:10px; }
.consent-edit-head .check.inline { margin-left:auto; font-weight:400; }
.req-badge { font-size:11px; background:var(--danger); color:#fff; padding:2px 8px; border-radius:10px; }
.opt-badge { font-size:11px; background:var(--neutral); color:#fff; padding:2px 8px; border-radius:10px; }

/* PC 너비 선택 */
.width-pick { display:flex; flex-direction:column; gap:8px; }
.width-presets { display:flex; gap:6px; flex-wrap:wrap; }
.width-btn { padding:7px 12px; border:1px solid var(--border); background:var(--bg-input); color:var(--text-primary);
  border-radius:8px; cursor:pointer; font-size:13px; font-variant-numeric:tabular-nums; }
.width-btn:hover { background:var(--bg-elevated); }
.width-btn.is-active { background:var(--primary); color:#fff; border-color:var(--primary); }
.width-custom { display:flex; align-items:center; gap:8px; }
.width-custom input { width:100px; }
.width-hint { font-size:12px; color:var(--text-secondary); }

/* 색상 선택 UI */
.color-pick { display:flex; flex-direction:column; gap:10px; }
.color-swatches { display:flex; flex-wrap:wrap; gap:8px; }
.color-swatch { width:30px; height:30px; padding:0; border:1px solid var(--border); border-radius:8px;
  cursor:pointer; transition:transform .08s; }
.color-swatch:hover { transform:scale(1.1); }
.color-swatch.is-active { outline:2px solid var(--primary); outline-offset:2px; }
.color-current { display:flex; align-items:center; gap:10px; }
.color-pick .color-native { width:54px; height:40px; padding:3px; border-radius:8px; cursor:pointer; flex:0 0 auto; }
.color-pick .color-hex { width:110px; text-transform:uppercase; letter-spacing:.5px;
  font-family:ui-monospace, Menlo, Consolas, monospace; }

/* 24시간 일시 선택기 */
.dtpick { background:var(--bg-input); border:1px solid var(--border); border-radius:10px; padding:10px 12px; }
.dt-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.dt-row .dt-date { width:auto; flex:0 0 auto; }
.dt-row .dt-hour, .dt-row .dt-min { width:auto; min-width:64px; }
.dt-unit { color:var(--text-secondary); font-size:13px; }
.dt-label { margin-top:8px; font-size:12px; color:var(--text-secondary); }
.dt-label.is-set { color:var(--success); font-weight:600; }
/* 시작/종료일시 구분 색상 */
.field.dt-start .dt-title { color:var(--success); font-weight:700; }
.field.dt-end .dt-title { color:var(--danger); font-weight:700; }
.field.dt-start .dtpick { border-left:3px solid var(--success); }
.field.dt-end .dtpick { border-left:3px solid var(--danger); }

@media (max-width:1024px) {
  .sidebar { transform:translateX(-100%); transition:transform .2s; }
  .sidebar.open { transform:translateX(0); }
  .main { margin-left:0; }
  .hamburger { display:block; }
  .kpi-row { grid-template-columns:1fr 1fr; }
  .grid-2, .grid-form { grid-template-columns:1fr; }
}