/* LunaVend 플랫폼·대시보드 공통 스타일. 인라인 스타일을 쓰지 않으므로(CSP) 모든 모양은 이 파일의 클래스로 만든다. */
:root {
  --bg: #111214;
  --bg-2: #15171a;
  --panel: #191b1e;
  --panel-2: #202328;
  --line: #2a2d32;
  --line-2: #363a40;
  --text: #edebe6;
  --muted: #a29e95;
  --faint: #726e66;
  --primary: #f4b740;
  --primary-2: #ffc865;
  --primary-soft: rgba(244, 183, 64, .13);
  --accent: #3dd68c;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #38bdf8;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 18px 44px rgba(0, 0, 0, .38);
  /* 바탕에 따라 달라지는 글자·배경(라이트 모드가 아래에서 덧씌운다) */
  --btn-hover: #25282d;
  --ink-success: #86efac;
  --ink-danger: #fca5a5;
  --ink-warning: #fcd34d;
  --ink-info: #7dd3fc;
  --ink-primary: #ffd27a;
  --ink-alert-info: #bae6fd;
  --ink-alert-success: #bbf7d0;
  --ink-alert-warning: #fde68a;
  --ink-alert-danger: #fecaca;
  --on-active: #ffd27a;
  --on-primary: #1a1306;  /* 앰버를 칠한 곳의 글자(흰 글자는 대비가 모자라다) */
  --row-hover: rgba(255, 255, 255, .018);
  --tip-bg: rgba(25, 27, 30, .97);
  --tip-shadow: 0 12px 30px rgba(0, 0, 0, .45);
  --topbar-bg: rgba(17, 18, 20, .84);
  --toast-bg: #202328;
  --selection: rgba(244, 183, 64, .32);
  --switch-off: var(--line-2);
  --font: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, -apple-system, sans-serif;
  --mono: "D2Coding", "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  color-scheme: dark;
}
/* 콘솔(대시보드·관리자) 화면 모드: <html data-console-mode>는 쿠키로 서버가 정한다(blueprints/auth.console_mode).
   다크가 기본(위 값), 라이트는 아래 값으로 덧씌우고, '기기 설정 따르기'는 기기가 라이트일 때만 덧씌운다 */
:root[data-console-mode="light"] {
  --bg: #f3f2ee;
  --bg-2: #f8f7f4;
  --panel: #ffffff;
  --panel-2: #efeeea;
  --line: #e2e0da;
  --line-2: #d2cfc6;
  --text: #141517;
  --muted: #5c5e64;
  --faint: #85827b;
  --primary: #f2ae2e;
  --primary-2: #9a5a00;
  --primary-soft: rgba(242, 174, 46, .16);
  --accent: #0e8f50;
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
  --info: #0284c7;
  --shadow: 0 14px 34px rgba(23, 27, 39, .10);
  --btn-hover: #ebe9e3;
  --ink-success: #15803d;
  --ink-danger: #b91c1c;
  --ink-warning: #b45309;
  --ink-info: #0369a1;
  --ink-primary: #8a5000;
  --ink-alert-info: #075985;
  --ink-alert-success: #166534;
  --ink-alert-warning: #92400e;
  --ink-alert-danger: #991b1b;
  --on-active: #7a4600;
  --row-hover: rgba(23, 27, 39, .03);
  --tip-bg: rgba(255, 255, 255, .98);
  --tip-shadow: 0 12px 30px rgba(23, 27, 39, .16);
  --topbar-bg: rgba(248, 247, 244, .88);
  --toast-bg: #ffffff;
  --selection: rgba(242, 174, 46, .3);
  --switch-off: #8f8b82;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-console-mode="auto"] {
    --bg: #f3f2ee;
    --bg-2: #f8f7f4;
    --panel: #ffffff;
    --panel-2: #efeeea;
    --line: #e2e0da;
    --line-2: #d2cfc6;
    --text: #141517;
    --muted: #5c5e64;
    --faint: #85827b;
    --primary: #f2ae2e;
    --primary-2: #9a5a00;
    --primary-soft: rgba(242, 174, 46, .16);
    --accent: #0e8f50;
    --success: #16a34a;
    --warning: #d97706;
    --danger: #dc2626;
    --info: #0284c7;
    --shadow: 0 14px 34px rgba(23, 27, 39, .10);
    --btn-hover: #ebe9e3;
    --ink-success: #15803d;
    --ink-danger: #b91c1c;
    --ink-warning: #b45309;
    --ink-info: #0369a1;
    --ink-primary: #8a5000;
    --ink-alert-info: #075985;
    --ink-alert-success: #166534;
    --ink-alert-warning: #92400e;
    --ink-alert-danger: #991b1b;
    --on-active: #7a4600;
    --row-hover: rgba(23, 27, 39, .03);
    --tip-bg: rgba(255, 255, 255, .98);
    --tip-shadow: 0 12px 30px rgba(23, 27, 39, .16);
    --topbar-bg: rgba(248, 247, 244, .88);
    --toast-bg: #ffffff;
    --selection: rgba(242, 174, 46, .3);
    --switch-off: #8f8b82;
    color-scheme: light;
  }
}

/* 콘솔 화면 모양(11-09, 계정마다 users.console_theme·console_font → <html data-console-theme·data-console-font>).
   '바이올렛'은 11-08 앰버로 바꾸기 전 대시보드 색(46bea1e의 토큰 그대로, 라이트·다크·기기 설정 모두). 상점 색과는 따로다. */
:root[data-console-theme="violet"] {
  --bg: #090c15;
  --bg-2: #0d111d;
  --panel: #121828;
  --panel-2: #182036;
  --line: #222b44;
  --line-2: #2c3756;
  --text: #e7ebf6;
  --muted: #8f99b6;
  --faint: #5f6987;
  --primary: #7c5cff;
  --primary-2: #a28bff;
  --primary-soft: rgba(124, 92, 255, .14);
  --accent: #22d3ee;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #38bdf8;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 18px 44px rgba(0, 0, 0, .38);
  --btn-hover: #1d2742;
  --ink-success: #86efac;
  --ink-danger: #fca5a5;
  --ink-warning: #fcd34d;
  --ink-info: #7dd3fc;
  --ink-primary: #c4b5fd;
  --ink-alert-info: #bae6fd;
  --ink-alert-success: #bbf7d0;
  --ink-alert-warning: #fde68a;
  --ink-alert-danger: #fecaca;
  --on-active: #fff;
  --on-primary: #fff;
  --row-hover: rgba(255, 255, 255, .018);
  --tip-bg: rgba(22, 28, 46, .97);
  --tip-shadow: 0 12px 30px rgba(0, 0, 0, .45);
  --topbar-bg: rgba(9, 12, 21, .82);
  --toast-bg: #1a2238;
  --selection: rgba(124, 92, 255, .4);
  --switch-off: var(--line-2);
  color-scheme: dark;
}
:root[data-console-theme="violet"][data-console-mode="light"] {
  --bg: #f3f4f8;
  --bg-2: #f9fafc;
  --panel: #ffffff;
  --panel-2: #eef0f6;
  --line: #e2e5ee;
  --line-2: #d2d7e3;
  --text: #171b27;
  --muted: #586176;
  --faint: #7f889c;
  --primary: #6a4cf0;
  --primary-2: #5a3dd6;
  --primary-soft: rgba(106, 76, 240, .10);
  --accent: #0891b2;
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
  --info: #0284c7;
  --shadow: 0 14px 34px rgba(23, 27, 39, .10);
  --btn-hover: #eceff6;
  --ink-success: #15803d;
  --ink-danger: #b91c1c;
  --ink-warning: #b45309;
  --ink-info: #0369a1;
  --ink-primary: #5a3dd6;
  --ink-alert-info: #075985;
  --ink-alert-success: #166534;
  --ink-alert-warning: #92400e;
  --ink-alert-danger: #991b1b;
  --on-active: #3f28b5;
  --row-hover: rgba(23, 27, 39, .03);
  --tip-bg: rgba(255, 255, 255, .98);
  --tip-shadow: 0 12px 30px rgba(23, 27, 39, .16);
  --topbar-bg: rgba(255, 255, 255, .86);
  --toast-bg: #ffffff;
  --selection: rgba(106, 76, 240, .22);
  --switch-off: #8b93a7;
  color-scheme: light;
  --on-primary: #fff;
}
@media (prefers-color-scheme: light) {
  :root[data-console-theme="violet"][data-console-mode="auto"] {
    --bg: #f3f4f8;
    --bg-2: #f9fafc;
    --panel: #ffffff;
    --panel-2: #eef0f6;
    --line: #e2e5ee;
    --line-2: #d2d7e3;
    --text: #171b27;
    --muted: #586176;
    --faint: #7f889c;
    --primary: #6a4cf0;
    --primary-2: #5a3dd6;
    --primary-soft: rgba(106, 76, 240, .10);
    --accent: #0891b2;
    --success: #16a34a;
    --warning: #d97706;
    --danger: #dc2626;
    --info: #0284c7;
    --shadow: 0 14px 34px rgba(23, 27, 39, .10);
    --btn-hover: #eceff6;
    --ink-success: #15803d;
    --ink-danger: #b91c1c;
    --ink-warning: #b45309;
    --ink-info: #0369a1;
    --ink-primary: #5a3dd6;
    --ink-alert-info: #075985;
    --ink-alert-success: #166534;
    --ink-alert-warning: #92400e;
    --ink-alert-danger: #991b1b;
    --on-active: #3f28b5;
    --row-hover: rgba(23, 27, 39, .03);
    --tip-bg: rgba(255, 255, 255, .98);
    --tip-shadow: 0 12px 30px rgba(23, 27, 39, .16);
    --topbar-bg: rgba(255, 255, 255, .86);
    --toast-bg: #ffffff;
    --selection: rgba(106, 76, 240, .22);
    --switch-off: #8b93a7;
    color-scheme: light;
    --on-primary: #fff;
  }
}
/* '시스템 글꼴': Pretendard를 받지 않고 기기 글꼴(윈도 맑은 고딕·맥 애플 SD 고딕) — 11-08 이전 모습 */
:root[data-console-font="system"] { --font: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, -apple-system, sans-serif; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--primary-2); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
code, .mono { font-family: var(--mono); font-size: .92em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
::selection { background: var(--selection); }

.icon { width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: -3px; }
.icon-sm { width: 15px; height: 15px; }
.icon-lg { width: 24px; height: 24px; }

.container { width: min(1180px, 100% - 32px); margin-inline: auto; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.right { margin-left: auto; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.strong { font-weight: 700; }
.nowrap { white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.prewrap { white-space: pre-line; word-break: break-word; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 6px; } .mt-2 { margin-top: 12px; } .mt-3 { margin-top: 20px; } .mt-4 { margin-top: 32px; }
.mb-2 { margin-bottom: 12px; } .mb-3 { margin-bottom: 20px; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── 버튼 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .06s, box-shadow .15s;
}
.btn:hover { text-decoration: none; border-color: var(--line-2); background: var(--btn-hover); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--primary-2); outline-offset: 2px; }
.btn[disabled], .btn.disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn-primary { background: var(--primary); border-color: transparent; color: var(--on-primary); box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 28%, transparent); }
.btn-primary:hover { background: var(--primary-2); border-color: transparent; }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--panel); }
.btn-success { background: rgba(34, 197, 94, .14); border-color: rgba(34, 197, 94, .35); color: var(--ink-success); }
.btn-success:hover { background: rgba(34, 197, 94, .22); border-color: rgba(34, 197, 94, .5); }
.btn-danger { background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .32); color: var(--ink-danger); }
.btn-danger:hover { background: rgba(239, 68, 68, .2); border-color: rgba(239, 68, 68, .5); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; gap: 6px; }
.btn-xs { height: 28px; padding: 0 9px; font-size: 12.5px; border-radius: 7px; gap: 5px; }
.btn-lg { height: 50px; padding: 0 24px; font-size: 16px; border-radius: 12px; }
.btn-block { width: 100%; }
.btn-icon { width: 36px; padding: 0; }
.inline-form { display: inline; margin: 0; }

/* ── 입력 */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; min-width: 0; }
.field > label, .label { font-size: 13px; font-weight: 600; color: var(--muted); }
.input, .select, .textarea {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line); color: var(--text);
  border-radius: var(--radius-sm); padding: 10px 12px; font: inherit; font-size: 14.5px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.select { appearance: none; padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.textarea.mono, .input.mono { font-family: var(--mono); font-size: 13px; }
.textarea.tall { min-height: 260px; }
.input-color { width: 48px; height: 40px; padding: 4px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; }
.input-group { display: flex; align-items: stretch; }
.input-group .addon { display: flex; align-items: center; padding: 0 12px; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); font-size: 13.5px; white-space: nowrap; }
.input-group .addon:first-child { border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-group .addon:last-child { border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.input-group .input:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group .input:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.hint { font-size: 12.5px; color: var(--faint); }
.error-text { font-size: 12.5px; color: var(--ink-danger); }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: rgba(239, 68, 68, .65); }
/* 체크박스·라디오: 기본 모양 대신 직접 그린 모양. 크기·여백은 각 자리 규칙(.check input 등)이 정하도록 특정도를 낮게 둔다.
   토글 스위치(.switch)와 글자 단추로 숨겨 쓰는 입력칸(.seg-radio·.swatch)은 그대로. 고대비 모드는 기본 모양으로 */
:where(input[type="checkbox"], input[type="radio"]):not(:where(.switch, .seg-radio, .swatch) input) {
  appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; flex: none; display: inline-grid; place-content: center;
  vertical-align: -4px; border: 1.5px solid var(--faint); border-radius: 5px; background: var(--bg-2); color: #fff; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
:where(input[type="radio"]):not(:where(.switch, .seg-radio, .swatch) input) { border-radius: 50%; }
:where(input[type="checkbox"], input[type="radio"]):not(:where(.switch, .seg-radio, .swatch) input)::before {
  content: ""; width: 10px; height: 10px; background: currentColor; transform: scale(0); transition: transform .16s cubic-bezier(.2, .8, .3, 1.35);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
:where(input[type="radio"]):not(:where(.switch, .seg-radio, .swatch) input)::before { width: 8px; height: 8px; border-radius: 50%; clip-path: none; }
:where(input[type="checkbox"]):not(:where(.switch, .seg-radio, .swatch) input):indeterminate::before { width: 9px; height: 2px; border-radius: 2px; clip-path: none; transform: scale(1); }
:where(input[type="checkbox"], input[type="radio"]):not(:where(.switch, .seg-radio, .swatch) input):checked,
:where(input[type="checkbox"]):not(:where(.switch, .seg-radio, .swatch) input):indeterminate {
  background: var(--primary); border-color: var(--primary); }
:where(input[type="checkbox"], input[type="radio"]):not(:where(.switch, .seg-radio, .swatch) input):checked::before { transform: scale(1); }
:where(input[type="checkbox"], input[type="radio"]):not(:where(.switch, .seg-radio, .swatch) input):not(:disabled):hover,
label:hover > :where(input[type="checkbox"], input[type="radio"]):not(:where(.switch, .seg-radio, .swatch) input):not(:disabled) { border-color: var(--primary-2); }
:where(input[type="checkbox"], input[type="radio"]):not(:where(.switch, .seg-radio, .swatch) input):focus-visible {
  outline: 2px solid var(--primary-2); outline-offset: 2px; border-color: var(--primary-2); }
:where(input[type="checkbox"], input[type="radio"]):not(:where(.switch, .seg-radio, .swatch) input):disabled { opacity: .45; cursor: not-allowed; }
@media (forced-colors: active) {
  :where(input[type="checkbox"], input[type="radio"]):not(:where(.switch, .seg-radio, .swatch) input) { appearance: auto; -webkit-appearance: auto; }
  :where(input[type="checkbox"], input[type="radio"]):not(:where(.switch, .seg-radio, .swatch) input)::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  :where(input[type="checkbox"], input[type="radio"]):not(:where(.switch, .seg-radio, .swatch) input),
  :where(input[type="checkbox"], input[type="radio"]):not(:where(.switch, .seg-radio, .swatch) input)::before { transition: none; }
}
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--primary); flex: none; }
.check .check-text { display: flex; flex-direction: column; gap: 2px; }
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; font-weight: 600; }
.switch input { appearance: none; width: 42px; height: 24px; border-radius: 999px; background: var(--switch-off); position: relative; cursor: pointer; transition: background .18s; margin: 0; flex: none; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .18s; }
.switch input:checked { background: var(--primary); }
.switch input:checked::after { transform: translateX(18px); }
.grid-2, .grid-3, .grid-4 { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 8px; }

/* ── 카드·배지·알림 */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; min-width: 0; }
.card-tight { padding: 16px; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.card-title { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.card-sub { color: var(--muted); font-size: 13px; margin-top: 3px; }
.card-foot { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.cards-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.badge-success { background: rgba(34, 197, 94, .12); color: var(--ink-success); border-color: rgba(34, 197, 94, .3); }
.badge-warning { background: rgba(245, 158, 11, .12); color: var(--ink-warning); border-color: rgba(245, 158, 11, .3); }
.badge-danger { background: rgba(239, 68, 68, .12); color: var(--ink-danger); border-color: rgba(239, 68, 68, .3); }
.badge-info { background: rgba(56, 189, 248, .12); color: var(--ink-info); border-color: rgba(56, 189, 248, .3); }
.badge-primary { background: var(--primary-soft); color: var(--ink-primary); border-color: color-mix(in srgb, var(--primary) 35%, transparent); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--faint); }
.dot-success { background: var(--success); box-shadow: 0 0 0 4px rgba(34, 197, 94, .15); }
.dot-warning { background: var(--warning); }
.dot-danger { background: var(--danger); }
.alert { display: flex; gap: 10px; align-items: flex-start; border-radius: 12px; padding: 12px 14px; border: 1px solid var(--line); background: var(--panel-2); font-size: 14px; }
.alert .icon { margin-top: 2px; }
.alert-info { background: rgba(56, 189, 248, .08); border-color: rgba(56, 189, 248, .3); color: var(--ink-alert-info); }
.alert-success { background: rgba(34, 197, 94, .08); border-color: rgba(34, 197, 94, .3); color: var(--ink-alert-success); }
.alert-warning { background: rgba(245, 158, 11, .08); border-color: rgba(245, 158, 11, .3); color: var(--ink-alert-warning); }
.alert-danger { background: rgba(239, 68, 68, .08); border-color: rgba(239, 68, 68, .3); color: var(--ink-alert-danger); }
.kbd { font-family: var(--mono); font-size: 12px; padding: 1px 6px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--line-2); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); font-size: 12.5px; color: var(--muted); cursor: pointer; }
.chip:hover { color: var(--text); border-color: var(--line-2); }
.code-box { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bg-2); border: 1px dashed var(--line-2); border-radius: var(--radius-sm); padding: 10px 12px; font-family: var(--mono); font-size: 13.5px; word-break: break-all; }
.code-box + .code-box { margin-top: 8px; }
.kv { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px 16px; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; min-width: 0; word-break: break-word; }

/* ── 표 */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 700; padding: 11px 14px; background: var(--bg-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; word-break: keep-all; overflow-wrap: anywhere; }
/* 좁은 화면: 칸을 찌그러뜨리지 않고 표를 가로로 밀어 본다 */
.table .mono, .table .nowrap { white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 760px) { .table-wrap > .table { min-width: 680px; } }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--row-hover); }
.table .actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.table .thumb { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--panel-2); }
.table .thumb-empty { width: 44px; height: 44px; border-radius: 10px; background: var(--panel-2); display: grid; place-items: center; color: var(--faint); }

/* ── 통계 */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.stat-label { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.stat-value { font-size: 25px; font-weight: 800; margin-top: 6px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat-sub { font-size: 12.5px; color: var(--faint); margin-top: 2px; }
.bars { --bar-gap: 10px; position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--bar-gap); align-items: end; height: 160px; padding-top: 8px; }
.bar-col { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; border-radius: 10px; -webkit-tap-highlight-color: transparent; }
.bar-col:focus { outline: none; }
.bar { width: 100%; max-width: 46px; min-height: 4px; height: 4px; border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, var(--primary-2), var(--primary));
  transition: height .5s cubic-bezier(.2, .8, .2, 1), opacity .15s ease, filter .15s ease, box-shadow .15s ease; }
.bar-label { font-size: 11.5px; line-height: 15px; min-height: 15px; color: var(--faint); transition: color .15s ease; }  /* 날짜를 비운 칸도 같은 높이(막대 바닥선이 들쭉날쭉하지 않게) */
/* 막대 툴팁(app.js data-chart-tips): 칸 전체(빈 위쪽·사이 틈 절반씩)가 마우스 대상이고, 올린 막대는 밝아지고 나머지는 흐려진다 */
.bar-col::before { content: ""; position: absolute; z-index: -1; inset: -4px calc(var(--bar-gap) / -2) -3px; border-radius: 10px;
  background: rgba(162, 139, 255, .08); opacity: 0; transition: opacity .15s ease; }
.bar-col.is-active::before { opacity: 1; }
.bar-col:focus-visible { outline: 2px solid var(--primary-2); outline-offset: 3px; }
.bar-col:focus-visible::before { opacity: 1; }
.bars.has-active .bar-col:not(.is-active) .bar { opacity: .5; }
.bar-col.is-active .bar { filter: brightness(1.18) saturate(1.08); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink-primary) 50%, transparent), 0 8px 20px -6px color-mix(in srgb, var(--primary) 65%, transparent); }
.bar-col.is-active .bar-label { color: var(--text); }
.chart-tip { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; display: flex; flex-direction: column; gap: 1px;
  padding: 8px 12px 9px; border-radius: 10px; background: var(--tip-bg); border: 1px solid var(--line-2);
  box-shadow: var(--tip-shadow); white-space: nowrap; opacity: 0; transition: opacity .12s ease; }
.chart-tip.show { opacity: 1; }
.chart-tip strong { font-size: 15px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.chart-tip span { font-size: 12px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .bar, .bar-col::before, .bar-label, .chart-tip { transition: none; } }
.progress { height: 8px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.progress > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: inherit; transition: width .5s; }
.checklist { display: flex; flex-direction: column; gap: 8px; }
.checklist a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); color: var(--text); }
.checklist a:hover { border-color: var(--line-2); text-decoration: none; }
.checklist .done { color: var(--success); }
.checklist .todo { color: var(--faint); }

/* ── 콘솔(대시보드·관리자) */
[data-soft-region]:focus { outline: none; }  /* 부드러운 이동 뒤 본문으로 옮긴 초점(화면 읽기용)은 테두리 없이 */
.console { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--bg-2); border-right: 1px solid var(--line); padding: 18px 14px 24px; display: flex; flex-direction: column; gap: 18px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; color: var(--text); letter-spacing: -.01em; }
.brand:hover { text-decoration: none; }
.brand img { width: 30px; height: 30px; }
.brand small { font-size: 11px; font-weight: 700; color: var(--faint); padding: 2px 7px; border: 1px solid var(--line); border-radius: 999px; }
.side-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; font-size: 13px; }
.side-card .between { gap: 6px; }
/* 문의 대화(5.5단계): 운영자 답변은 보라 줄, 관리진 메모는 노란 점선(구매자에게 안 보임), 자동 답변은 흐리게 */
.ticket-msg-staff { border-left: 3px solid var(--primary); }
.ticket-msg-note { border-left: 3px dashed var(--warning); background: rgba(245, 158, 11, .06); }
.ticket-msg-system { opacity: .8; }
/* 보안(2단계 인증) */
.totp-setup { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.totp-qr { background: #fff; border-radius: 12px; padding: 6px; }
.recovery-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.recovery-codes code { font-family: var(--mono); font-size: 14px; padding: 4px 8px; border-radius: 8px; background: var(--primary-soft); }
.nav-section { display: flex; flex-direction: column; gap: 2px; }
.nav-label { font-size: 11px; font-weight: 800; color: var(--faint); letter-spacing: .06em; padding: 4px 10px 6px; }
.nav-link { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--muted); font-weight: 600; font-size: 14px; }
.nav-link:hover { background: var(--panel); color: var(--text); text-decoration: none; }
.nav-link.active { background: var(--primary-soft); color: var(--on-active); }
.nav-link.active .icon { color: var(--primary-2); }
.nav-link .count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11.5px; font-weight: 800; display: inline-grid; place-items: center; }
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 12px 28px; background: var(--topbar-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.topbar .user { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--on-primary); font-weight: 800; font-size: 13px; }
.menu-btn { display: none; }
.content { padding: 26px 28px 70px; width: 100%; max-width: 1240px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-title { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.page-desc { color: var(--muted); margin-top: 4px; font-size: 14.5px; }
.crumb { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.tab { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 700; background: transparent; cursor: pointer; font-family: inherit; }
.tab:hover { color: var(--text); text-decoration: none; border-color: var(--line-2); }
.tab.active { background: var(--primary-soft); color: var(--on-active); border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.toolbar .input, .toolbar .select { width: auto; min-width: 220px; height: 38px; padding-top: 0; padding-bottom: 0; }
.empty { text-align: center; padding: 48px 16px; color: var(--muted); }
.empty .icon { width: 40px; height: 40px; color: var(--faint); margin: 0 auto 12px; display: block; }
.empty-title { color: var(--text); font-weight: 700; font-size: 16px; margin-bottom: 4px; }
.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.page-link { min-width: 36px; height: 36px; padding: 0 10px; display: inline-grid; place-items: center; border-radius: 9px; border: 1px solid var(--line); color: var(--muted); font-weight: 700; font-size: 13px; }
.page-link:hover { text-decoration: none; color: var(--text); border-color: var(--line-2); }
.page-link.active { background: var(--primary); color: var(--on-primary); border-color: transparent; }
.page-link.disabled { opacity: .4; pointer-events: none; }
.nav-backdrop { display: none; }

@media (max-width: 1080px) {
  .cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .console { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 276px; z-index: 60; transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--shadow); }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 55; }
  .menu-btn { display: inline-flex; }
  .content { padding: 20px 16px 70px; }
  .topbar { padding: 10px 16px; }
  .cards-2, .cards-3 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dt { margin-top: 8px; }
  .page-title { font-size: 21px; }
  .toolbar .input, .toolbar .select { min-width: 0; width: 100%; }
}

/* ── 토스트(알림) */
.toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 10px; z-index: 100; width: min(420px, calc(100vw - 36px)); }
.toast { display: flex; gap: 10px; align-items: flex-start; background: var(--toast-bg); border: 1px solid var(--line-2); border-left: 4px solid var(--info); border-radius: 12px; padding: 12px 12px 12px 14px; box-shadow: var(--shadow); font-size: 14px; animation: toast-in .25s ease; }
.toast-success { border-left-color: var(--success); }
.toast-error { border-left-color: var(--danger); }
.toast-warning { border-left-color: var(--warning); }
.toast .toast-text { flex: 1; min-width: 0; word-break: break-word; }
.toast-close { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 2px; }
.toast.leaving { opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── 공개 페이지 */
.public-nav { position: sticky; top: 0; z-index: 30; background: rgba(9, 12, 21, .72); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(34, 43, 68, .6); }
.public-nav .container { height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.public-nav .links { display: flex; gap: 6px; align-items: center; }
.public-nav .links a.plain { color: var(--muted); font-weight: 600; font-size: 14px; padding: 8px 10px; border-radius: 8px; }
.public-nav .links a.plain:hover { color: var(--text); text-decoration: none; }
.hero { position: relative; overflow: hidden; padding: 96px 0 80px; }
.hero::before { content: ""; position: absolute; inset: -40% -10% auto; height: 720px; background: radial-gradient(closest-side, color-mix(in srgb, var(--primary) 32%, transparent), transparent 70%), radial-gradient(closest-side at 70% 40%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%); pointer-events: none; }
.hero .container { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent); background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--ink-primary); font-size: 13px; font-weight: 700; }
.hero-title { font-size: clamp(34px, 5vw, 56px); font-weight: 900; letter-spacing: -.035em; line-height: 1.12; margin: 18px 0 16px; }
.gradient-text { background: linear-gradient(120deg, var(--ink-primary), var(--primary) 40%, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-desc { font-size: 18px; color: var(--muted); max-width: 560px; }
.hero-actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.hero-meta { display: flex; gap: 22px; margin-top: 28px; color: var(--muted); font-size: 14px; flex-wrap: wrap; }
.hero-meta strong { color: var(--text); }
.mock { background: linear-gradient(180deg, #151c30, #0f1424); border: 1px solid var(--line-2); border-radius: 20px; padding: 16px; box-shadow: 0 40px 80px rgba(0, 0, 0, .5); }
.mock-bar { display: flex; gap: 6px; margin-bottom: 14px; }
.mock-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.mock-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mock-card { border-radius: 12px; background: var(--panel-2); padding: 12px; border: 1px solid var(--line); }
.mock-thumb { height: 64px; border-radius: 9px; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 50%, transparent), color-mix(in srgb, var(--accent) 35%, transparent)); margin-bottom: 10px; }
.mock-line { height: 8px; border-radius: 6px; background: var(--line-2); margin-top: 6px; }
.mock-line.short { width: 55%; }
.mock-price { margin-top: 8px; font-weight: 800; font-size: 13px; }
.section { padding: 72px 0; }
.section-title { font-size: clamp(26px, 3.4vw, 36px); font-weight: 900; letter-spacing: -.025em; text-align: center; }
.section-desc { text-align: center; color: var(--muted); margin: 10px auto 36px; max-width: 620px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feature { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 22px; }
.feature .icon-wrap { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-2); margin-bottom: 14px; }
.feature h3 { font-size: 17px; margin-bottom: 6px; }
.feature p { color: var(--muted); font-size: 14.5px; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: step; }
.step { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 20px; position: relative; }
.step::before { counter-increment: step; content: counter(step); width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, var(--primary), var(--accent)); color: var(--on-primary); font-weight: 900; margin-bottom: 12px; }
.step h3 { font-size: 16px; margin-bottom: 4px; }
.step p { color: var(--muted); font-size: 14px; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; align-items: stretch; }
.plan { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 14px; position: relative; }
.plan.highlight { border-color: color-mix(in srgb, var(--primary) 60%, transparent); box-shadow: 0 24px 60px color-mix(in srgb, var(--primary) 18%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 10%, transparent), var(--panel) 40%); }
.plan-ribbon { position: absolute; top: -12px; right: 18px; padding: 4px 10px; border-radius: 999px; background: linear-gradient(135deg, var(--primary), var(--accent)); color: var(--on-primary); font-size: 12px; font-weight: 800; }
.plan-name { font-size: 18px; font-weight: 800; }
.plan-price { font-size: 32px; font-weight: 900; letter-spacing: -.03em; }
.plan-price small { font-size: 14px; color: var(--muted); font-weight: 600; }
.plan ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--muted); }
.plan li { display: flex; gap: 8px; align-items: flex-start; }
.plan li .icon { color: var(--success); width: 16px; height: 16px; margin-top: 3px; }
.plan li.off { color: var(--faint); text-decoration: line-through; }
.plan li.off .icon { color: var(--faint); }
.plan .btn { margin-top: auto; }
.faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq details { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 4px 18px; }
.faq summary { cursor: pointer; font-weight: 700; padding: 14px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq details p { color: var(--muted); padding-bottom: 16px; }
.cta { margin: 0 auto; max-width: 980px; border-radius: 24px; padding: 44px; text-align: center; background: radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--primary) 35%, transparent), transparent 50%), radial-gradient(circle at 90% 100%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 50%), var(--panel); border: 1px solid var(--line-2); }
.footer { border-top: 1px solid var(--line); padding: 32px 0 44px; color: var(--faint); font-size: 13px; margin-top: 40px; }
.footer .container { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer a { color: var(--muted); }
@media (max-width: 960px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero { padding: 60px 0 40px; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .feature-grid, .steps { grid-template-columns: 1fr; }
  .public-nav .links a.plain { display: none; }
  .cta { padding: 28px 18px; }
}

/* ── 로그인·가입 */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; position: relative; overflow: hidden; }
.auth-wrap::before { content: ""; position: absolute; width: 900px; height: 900px; top: -450px; left: 50%; transform: translateX(-50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--primary) 25%, transparent), transparent); pointer-events: none; }
.auth-card { position: relative; width: min(440px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 32px 28px; box-shadow: var(--shadow); }
.auth-card .brand { justify-content: center; margin-bottom: 18px; }
.auth-title { font-size: 22px; font-weight: 800; text-align: center; }
.auth-desc { color: var(--muted); text-align: center; margin: 6px 0 24px; font-size: 14.5px; }
.auth-foot { text-align: center; margin-top: 18px; color: var(--muted); font-size: 14px; }

/* ── 디자인 미리보기(샵 테마) */
/* 디자인 미리보기(테마 '머신'): 색은 app.js가 --mp-* 변수로 넣는다 */
.mp { --mp-bg: #111214; --mp-panel: #191B1E; --mp-window: #202328; --mp-line: #2C3035; --mp-ink: #EDEBE6; --mp-muted: #9A978F; --mp-disp: #08090A; --mp-disp-ink: #F2EFE8; --mp-disp-num: #FFC266; --mp-plate: #E9E6DF; --mp-plate-ink: #121315; --mp-accent: #F4B740; --mp-on-accent: #141517; --mp-led-ok: #3DD68C; --mp-led-low: #F5A524; --mp-led-off: #4A4F56; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-2); background: var(--mp-bg); color: var(--mp-ink); padding: 12px; display: flex; flex-direction: column; gap: 10px; font-size: 12px; }
.mp-head { display: flex; align-items: center; gap: 8px; }
.mp-head b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.mp-logo { width: 24px; height: 24px; border-radius: 7px; background: var(--mp-disp); color: var(--mp-accent); display: grid; place-items: center; font-family: ui-monospace, monospace; font-size: 10px; font-weight: 700; flex: none; }
.mp-balance { background: var(--mp-disp); color: var(--mp-disp-ink); border-radius: 7px; padding: 3px 8px; font-size: 10px; white-space: nowrap; }
.mp-balance i { font-style: normal; color: var(--mp-disp-num); font-family: ui-monospace, monospace; }
.mp-key, .mp-buy { background: var(--mp-accent); color: var(--mp-on-accent); border-radius: 7px; padding: 3px 9px; font-weight: 700; font-size: 10.5px; white-space: nowrap; }
.mp-notice { background: var(--mp-disp); color: var(--mp-disp-ink); border-radius: 8px; padding: 7px 10px; display: flex; gap: 8px; }
.mp-notice em { font-style: normal; color: var(--mp-accent); font-family: ui-monospace, monospace; font-weight: 700; font-size: 10px; }
.mp-title small { display: block; color: var(--mp-muted); font-family: ui-monospace, monospace; font-size: 10px; }
.mp-title b { font-size: 18px; letter-spacing: -.03em; }
.mp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mp-card { background: var(--mp-panel); border: 1px solid var(--mp-line); border-radius: 12px; padding: 7px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mp-row { display: flex; justify-content: space-between; align-items: center; }
.mp-plate { background: var(--mp-plate); color: var(--mp-plate-ink); border-radius: 4px; padding: 1px 5px; font-family: ui-monospace, monospace; font-size: 9.5px; font-weight: 700; }
.mp-led { width: 6px; height: 6px; border-radius: 50%; background: var(--mp-led-ok); }
.mp-led.low { background: var(--mp-led-low); }
.mp-led.off { background: var(--mp-led-off); }
.mp-window { aspect-ratio: 4 / 3; border-radius: 8px; background: var(--mp-window); border: 1px solid var(--mp-line); display: grid; place-items: center; font-family: ui-monospace, monospace; font-size: 18px; color: var(--mp-muted); }
.mp-card.off .mp-window { border-style: dashed; opacity: .7; }
.mp-name { font-weight: 600; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-foot { display: flex; gap: 4px; align-items: center; }
.mp-price { flex: 1; min-width: 0; background: var(--mp-disp); color: var(--mp-disp-num); border-radius: 6px; padding: 4px 6px; font-family: ui-monospace, monospace; font-size: 10.5px; white-space: nowrap; overflow: hidden; }
.mp-card.off .mp-price { color: var(--mp-muted); }
.mp-card.off .mp-buy { background: var(--mp-line); color: var(--mp-muted); }
.mp.fx-rich .mp-card { transition: transform .28s cubic-bezier(.2, .7, .2, 1); }
.mp.fx-rich .mp-card:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .mp * { transition: none !important; } }
/* 구간 라디오(화면 모드·움직임 단계 고르기) */
.seg-radio { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.seg-radio label { position: relative; cursor: pointer; }
.seg-radio input { position: absolute; opacity: 0; pointer-events: none; }
.seg-radio span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--muted); }
.seg-radio input:checked + span { background: var(--primary); color: var(--on-primary); }
.seg-radio input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.seg-radio.seg-sm span { min-height: 28px; padding: 0 10px; font-size: 12.5px; }
.sw-desc { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.section-list { display: flex; flex-direction: column; gap: 8px; }
.section-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); }
.section-item .section-no { width: 26px; height: 26px; border-radius: 7px; background: var(--panel-2); display: grid; place-items: center; font-family: ui-monospace, monospace; font-size: 12px; flex: none; }
.section-item .section-info { flex: 1; min-width: 0; }
.section-item .section-info b { display: block; }
.section-item .section-info span { display: block; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.section-item form { margin: 0; }
.block-item { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--bg-2); }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.swatch { position: relative; display: block; border: 1px solid var(--line); border-radius: 12px; padding: 10px; cursor: pointer; background: var(--bg-2); }
.swatch input { position: absolute; opacity: 0; pointer-events: none; }
.swatch .sw-colors { display: flex; height: 26px; border-radius: 7px; overflow: hidden; margin-bottom: 8px; }
.swatch .sw-colors i { flex: 1; }
.swatch .sw-name { font-size: 13px; font-weight: 700; }
.swatch:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.upload-box { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px dashed var(--line-2); border-radius: 12px; background: var(--bg-2); }
.upload-box img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.upload-box img.wide { width: 140px; height: 54px; }

/* ── 디스코드 미리보기(실제 디스코드 화면처럼) */
.dc-preview { background: #313338; color: #dbdee1; border-radius: 14px; padding: 16px 16px 18px; font-family: "gg sans", "Noto Sans KR", var(--font); font-size: 15px; line-height: 1.375; border: 1px solid #1e1f22; overflow: hidden; }
.dc-msg { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 14px; }
.dc-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #5865f2, var(--accent)); display: grid; place-items: center; color: #fff; font-weight: 800; overflow: hidden; }
.dc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dc-name { font-weight: 600; color: #f2f3f5; display: flex; align-items: center; gap: 6px; font-size: 15px; }
.dc-app { background: #5865f2; color: #fff; font-size: 10px; font-weight: 700; padding: 0 4px; border-radius: 3px; line-height: 15px; }
.dc-time { color: #949ba4; font-size: 12px; font-weight: 500; }
.dc-ephemeral { color: #949ba4; font-size: 12.5px; margin-top: 6px; display: flex; align-items: center; gap: 4px; }
.dc-body { min-width: 0; margin-top: 2px; }
.dc-embed { display: grid; max-width: 520px; background: #2b2d31; border-radius: 4px; border-left: 4px solid #5865f2; padding: 8px 16px 16px 12px; margin-top: 6px; grid-template-columns: minmax(0, 1fr) auto; gap: 0 16px; }
.dc-embed-main { min-width: 0; }
.dc-embed-title { font-weight: 600; color: #f2f3f5; margin-top: 8px; font-size: 16px; }
.dc-embed-desc { margin-top: 8px; font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.dc-embed-thumb { width: 80px; height: 80px; border-radius: 4px; object-fit: cover; margin-top: 8px; }
.dc-embed-image { grid-column: 1 / -1; margin-top: 16px; border-radius: 4px; max-height: 300px; object-fit: cover; width: 100%; }
.dc-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.dc-field { grid-column: 1 / -1; min-width: 0; }
.dc-field.inline { grid-column: auto; }
.dc-field-name { font-weight: 600; font-size: 14px; color: #f2f3f5; margin-bottom: 2px; }
.dc-field-value { font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.dc-footer { grid-column: 1 / -1; margin-top: 8px; font-size: 12px; color: #b5bac1; }
.dc-container { max-width: 520px; background: #393a41; border-radius: 8px; border-left: 4px solid #5865f2; padding: 16px; margin-top: 6px; display: flex; flex-direction: column; gap: 8px; }
.dc-text { white-space: pre-wrap; word-break: break-word; font-size: 15px; }
.dc-text h1 { font-size: 24px; color: #f2f3f5; margin: 4px 0; }
.dc-text h2 { font-size: 20px; color: #f2f3f5; margin: 4px 0; }
.dc-text h3 { font-size: 16px; color: #f2f3f5; margin: 4px 0; }
.dc-text .sub { font-size: 12px; color: #949ba4; }
.dc-text code { background: #2b2d31; padding: 1px 4px; border-radius: 4px; font-size: 13px; }
.dc-text pre { background: #2b2d31; border: 1px solid #1e1f22; border-radius: 4px; padding: 8px; margin: 4px 0; font-family: var(--mono); font-size: 13px; white-space: pre-wrap; }
.dc-text .spoiler { background: #1e1f22; color: transparent; border-radius: 3px; }
.dc-text .spoiler:hover { color: inherit; background: #2b2d31; }
.dc-text .mention { background: rgba(88, 101, 242, .3); color: #c9cdfb; border-radius: 3px; padding: 0 2px; }
.dc-sep { border-top: 1px solid #4e5058; margin: 4px 0; }
.dc-sep.blank { border-top-color: transparent; }
.dc-sep.large { margin: 10px 0; }
.dc-section { display: grid; grid-template-columns: minmax(0, 1fr) 85px; gap: 12px; align-items: start; }
.dc-section img { width: 85px; height: 85px; border-radius: 8px; object-fit: cover; }
.dc-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; border-radius: 8px; overflow: hidden; }
.dc-gallery.single { grid-template-columns: 1fr; }
.dc-gallery img { width: 100%; height: 100%; max-height: 260px; object-fit: cover; }
.dc-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.dc-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 8px; font-size: 14px; font-weight: 500; color: #fff; background: #4e5058; border: 0; cursor: default; font-family: inherit; }
.dc-btn.s1 { background: #5865f2; }
.dc-btn.s3 { background: #00a64f; }
.dc-btn.s4 { background: #da373c; }
.dc-btn.s5 { background: #4e5058; }
.dc-btn.off { opacity: .5; }
.dc-btn .ext { width: 13px; height: 13px; }
.dc-select { width: 100%; max-width: 400px; height: 40px; border-radius: 8px; background: #1e1f22; border: 1px solid #1e1f22; color: #949ba4; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; font-size: 14px; }
.dc-note { color: #949ba4; font-size: 12.5px; margin-top: 10px; }

/* ── 디스코드 디자인 편집기 */
.designer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 20px; align-items: start; }
.designer-preview { position: sticky; top: 76px; }
.block-list { display: flex; flex-direction: column; gap: 10px; }
.block-item { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.block-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-weight: 700; font-size: 13.5px; }
.block-head .tools { margin-left: auto; display: flex; gap: 4px; }
.block-add { display: flex; gap: 6px; flex-wrap: wrap; }
.var-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.var-chip { font-family: var(--mono); font-size: 11.5px; padding: 3px 8px; border-radius: 7px; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink-primary); cursor: pointer; }
.var-chip:hover { border-color: var(--primary); }
.button-row { display: grid; grid-template-columns: 22px 44px minmax(0, 1fr) 92px auto; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
/* 버튼 편집(11-08): 윗줄 보이기·이모지·글자·도구, 아랫줄 할 일·대상·색·줄 */
.button-row.v2 { grid-template-columns: 22px 44px minmax(0, 1fr) auto; }
.button-row.v2.is-off { opacity: .62; }
.button-tools { display: inline-flex; gap: 4px; align-items: center; }
.button-fields { grid-column: 2 / -1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) 104px 86px; gap: 8px; }
.button-fields.no-target { grid-template-columns: minmax(0, 1.4fr) 104px 86px; }
.button-label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.button-label .tiny { padding-left: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.button-row .input, .button-row .select { height: 34px; padding-top: 0; padding-bottom: 0; font-size: 13.5px; }
.button-row .emoji-input { text-align: center; padding: 0 4px; }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 76px 34px; gap: 8px; align-items: center; }
@media (max-width: 1180px) {
  .designer { grid-template-columns: 1fr; }
  .designer-preview { position: static; }
}
@media (max-width: 640px) {
  .button-row:not(.v2) { grid-template-columns: 22px 44px minmax(0, 1fr) auto; }
  .button-row:not(.v2) .select { grid-column: 2 / 4; grid-row: 2; }
  .button-fields, .button-fields.no-target { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .field-row { grid-template-columns: 1fr; }
}
button.nav-link { width: 100%; background: none; border: 0; font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.text-center { text-align: center; }
/* 테마 견본 색 */
.sw-amber-a { background: #F3F2EE; } .sw-amber-b { background: #141517; } .sw-amber-c { background: #F2AE2E; } .sw-amber-d { background: #111214; }
.sw-cobalt-a { background: #F4F4F1; } .sw-cobalt-b { background: #121417; } .sw-cobalt-c { background: #2347E8; } .sw-cobalt-d { background: #0E1013; }
.sw-sage-a { background: #DCE1D8; } .sw-sage-b { background: #17211B; } .sw-sage-c { background: #C9462A; } .sw-sage-d { background: #0F1612; }
.sw-original-a { background: #E9E7E2; } .sw-original-b { background: #171716; } .sw-original-c { background: #FF5B14; } .sw-original-d { background: #111214; }
/* 섹션 편집기 */
.grid-2-wide { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.radio-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); cursor: pointer; font-size: 14px; }
.radio-row input { margin-top: 3px; accent-color: var(--primary); }
.radio-row.disabled { opacity: .55; cursor: not-allowed; }
.radio-row.disabled input:disabled { opacity: 1; }  /* 줄 전체가 이미 흐려서 두 번 흐리지 않게 */
.radio-row:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.checkbox { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; cursor: pointer; }
.checkbox input { width: 17px; height: 17px; accent-color: var(--primary); margin: 0; }
.mb-1 { margin-bottom: 6px; }
@media (max-width: 900px) { .grid-2-wide { grid-template-columns: 1fr; } }
[hidden] { display: none !important; }

/* 4단계: 입금 자동 확인·입금함의 펼침 */
.card details > summary { cursor: pointer; color: var(--ink-primary); font-weight: 600; }
.card details[open] > summary { margin-bottom: 4px; }
.cand-list { display: flex; flex-direction: column; gap: 6px; }
.cand { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-2); }
.cand-main { min-width: 0; flex: 1 1 220px; }
.ignore-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ignore-form .input { flex: 1 1 200px; max-width: 360px; }

/* 알림 메일 미리보기·구매 기록 편집(5.5단계) */
.mail-preview { display: block; width: 100%; height: 680px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.input-sm { width: auto; min-width: 0; padding: 4px 8px; height: 30px; font-size: 13px; }

/* 직원·운영 기록(4단계) */
.table-compact th, .table-compact td { padding: 7px 10px; }
.table th.center, .table td.center, .center { text-align: center; }
.table td.center input[type="radio"] { width: 18px; height: 18px; accent-color: var(--primary); }
.card details.staff-row { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; }
.card details.staff-row > summary { color: inherit; font-weight: 400; list-style: none; gap: 12px; }
.card details.staff-row > summary::-webkit-details-marker { display: none; }
.card details.staff-row[open] > summary { padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.shop-switch { display: flex; gap: 6px; margin-top: 8px; }
.shop-switch .select { flex: 1 1 auto; min-width: 0; height: 30px; padding: 2px 8px; font-size: 13px; }
.audit-detail { max-width: 360px; }

/* 주문 거르기·일괄 처리(4단계 4c), 통계 막대(4d) */
.order-filters { flex: 1 1 100%; }
.order-filters > summary { cursor: pointer; color: var(--muted); font-size: 13px; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.order-filters > summary::-webkit-details-marker { display: none; }
.order-filters label { display: inline-flex; align-items: center; gap: 6px; }
.bulk-bar { padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: var(--radius-sm); }
/* 통계의 날마다 매출(7·30·90일): 막대 수만큼 한 줄로(예전엔 7칸 격자라 30·90일이 여러 줄로 쌓였다) */
.bars-wide { --bar-gap: 3px; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.bars-wide .bar-label { font-size: 10.5px; white-space: nowrap; }
.bars-dense { --bar-gap: 1px; }
/* 영업 시간 자동(11-08): 요일마다 여는 날·시각. 자동을 끄거나 요일을 빼면 흐리게 */
.hours-table { display: grid; gap: 6px; margin-top: 10px; transition: opacity .15s ease; }
.hours-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 12px minmax(0, 1fr); gap: 8px; align-items: center; }
.hours-row .check { align-items: center; font-weight: 600; }
.hours-row .input { height: 36px; padding-top: 0; padding-bottom: 0; font-variant-numeric: tabular-nums; }
.hours-box:has([data-hours-toggle]:not(:checked)) .hours-table { opacity: .5; }
.hours-row:has(.check input:not(:checked)) .input { opacity: .45; }
/* 문의 분류 편집기(11-08): 이모지·이름·설명을 한 줄씩, 옮기기·지우기 */
.cat-list { display: flex; flex-direction: column; gap: 6px; }
.cat-row { display: grid; grid-template-columns: 52px minmax(0, .9fr) minmax(0, 1.4fr) auto; gap: 6px; align-items: center; }
.cat-row .input { height: 36px; padding-top: 0; padding-bottom: 0; font-size: 13.5px; }
.cat-row .emoji-input { text-align: center; padding: 0 4px; }
.cat-tools { display: inline-flex; gap: 4px; }
.cat-tools .btn-icon { width: 28px; }
@media (max-width: 640px) {
  .cat-row { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .cat-row > .input:nth-of-type(3) { grid-column: 1 / -1; grid-row: 2; }
}
/* 약관·정책: 운영자가 더한 문서(11-08) */
.legal-doc { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px 4px; margin-bottom: 12px; background: var(--bg-2); scroll-margin-top: 80px; }
.legal-doc.is-over { border-style: dashed; opacity: .8; }
.legal-doc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.legal-doc-head strong { min-width: 0; flex: 1 1 160px; }
.legal-doc-tools { display: inline-flex; gap: 6px; align-items: center; margin-left: auto; }
.legal-doc-tools .btn-icon { width: 28px; }

/* 섹션 편집기: 블록(공지 카드·질문·후기) 칸 배치. half 칸은 넓은 화면에서 두 칸씩 */
.block-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
.block-fields > * { grid-column: 1 / -1; }
.block-fields > .field-half { grid-column: auto; }
.block-item .block-head .tools { align-items: center; }
.block-item .block-head .checkbox { margin-left: 6px; font-weight: 600; }
.block-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.block-name .muted { font-weight: 500; }
@media (max-width: 640px) { .block-fields > .field-half { grid-column: 1 / -1; } }

/* 확인 창(11-08, app.js vhConfirm): 브라우저 기본 confirm 대신. 위험한 일(지우기·멈추기 등)은 빨간 단추·느낌표 */
.vh-dialog { width: min(420px, calc(100vw - 32px)); padding: 22px 22px 18px; border: 1px solid var(--line-2); border-radius: 16px;
  background: var(--panel); color: var(--text); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.vh-dialog::backdrop { background: rgba(5, 8, 15, .55); backdrop-filter: blur(3px); }
.vh-dialog[open] { animation: vh-dialog-in .16s cubic-bezier(.2, .8, .2, 1); }
.vh-dialog[open]::backdrop { animation: vh-backdrop-in .16s ease; }
@keyframes vh-dialog-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes vh-backdrop-in { from { opacity: 0; } }
.vh-dialog-mark { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 12px; font-weight: 800; font-size: 20px; }
.vh-dialog-mark::before { content: "?"; }
.vh-dialog.tone-primary .vh-dialog-mark { background: var(--primary-soft); color: var(--primary-2); }
.vh-dialog.tone-danger .vh-dialog-mark { background: rgba(239, 68, 68, .14); color: var(--ink-danger); }
.vh-dialog.tone-danger .vh-dialog-mark::before { content: "!"; }
.vh-dialog-title { font-size: 17px; margin: 0 0 6px; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; }
.vh-dialog-text { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; white-space: pre-line; word-break: keep-all; overflow-wrap: anywhere; }
.vh-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.vh-dialog-actions button { height: 38px; padding: 0 16px; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text); }
.vh-dialog-actions button:hover { border-color: var(--muted); }
.vh-dialog .vh-dialog-ok { border-color: transparent; color: var(--on-primary); background: var(--primary); }
.vh-dialog.tone-danger .vh-dialog-ok { background: var(--danger); }
.vh-dialog-actions button:focus-visible { outline: 2px solid var(--primary-2); outline-offset: 2px; }
@media (max-width: 480px) { .vh-dialog-actions button { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .vh-dialog[open], .vh-dialog[open]::backdrop { animation: none; } }

/* 디스코드 디자인: '버튼 자리'마다 놓을 줄 고르기(designer.js) */
.slot-rows { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 2px 0 6px; }
.slot-rows .check:has(input:disabled) { opacity: .5; }

/* 확인 창 입력칸(vhAsk: 거절 사유처럼 넣어도 되고 비워도 되는 값) */
.vh-dialog-field { display: grid; gap: 6px; margin-top: 14px; }
.vh-dialog-field[hidden], .vh-dialog-field-hint[hidden], .vh-dialog-text[hidden] { display: none; }
.vh-dialog-field-label { font-size: 13px; font-weight: 700; color: var(--text); }
.vh-dialog-input { width: 100%; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--panel-2);
  color: var(--text); font: inherit; font-size: 14px; }
.vh-dialog-input:focus { outline: 2px solid var(--primary-2); outline-offset: 1px; }
.vh-dialog-field-hint { font-size: 12px; color: var(--muted); line-height: 1.5; }

/* 충전 신청: 결제 방식 표시와 처리 단추(한 줄, 오른쪽 맞춤) */
.method-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700;
  white-space: nowrap; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text); }
.method-badge.method-bank { color: var(--ink-success); border-color: color-mix(in srgb, var(--ink-success) 35%, transparent); }
.method-badge.method-coin { color: var(--ink-warning); border-color: color-mix(in srgb, var(--ink-warning) 35%, transparent); }
.method-badge.method-pg { color: var(--primary-2); border-color: color-mix(in srgb, var(--primary-2) 40%, transparent); }
.method-badge.method-gift { color: var(--ink-danger); border-color: color-mix(in srgb, var(--ink-danger) 30%, transparent); }
.charge-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.charge-buttons { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: nowrap; }
.charge-buttons .inline-form { margin: 0; }

/* 메일 보내기: 고른 길(라디오)에 맞는 칸만(스크립트 없이 :has). 지원하지 않는 옛 브라우저는 둘 다 보인다 */
.mode-panel { border: 1px solid var(--line-2); border-radius: 12px; padding: 14px; background: color-mix(in srgb, var(--panel-2) 60%, transparent); }
.mode-panel-head { display: flex; align-items: center; gap: 6px; font-weight: 800; margin-bottom: 10px; }
.mail-form:has(input[name="mode"][value="platform"]:checked) [data-mode-panel="smtp"],
.mail-form:has(input[name="mode"][value="smtp"]:checked) [data-mode-panel="platform"] { display: none; }
.mail-form [data-mode-panel] { animation: mode-panel-in .2s ease; }
@keyframes mode-panel-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .mail-form [data-mode-panel] { animation: none; } }
/* 두 길을 각자 카드로(고른 쪽만 강조). .radio-row의 '고르면 테두리'는 바깥 상자에 걸리지 않게 끈다 */
.radio-row.mode-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0; border: 0; background: none; cursor: default; }
.radio-row.mode-cards:has(input:checked) { border-color: transparent; box-shadow: none; }
.mode-cards .check { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--bg-2); cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease; }
.mode-cards .check:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.mode-cards .check:has(input:disabled) { opacity: .55; cursor: not-allowed; }
@media (max-width: 640px) { .radio-row.mode-cards { grid-template-columns: 1fr; } }

/* 입금 자동 확인: 연결 방법 고르기(라디오 탭 + :has로 고른 안내만, 옛 브라우저는 모두 보인다) */
.route-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.route-tab { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--bg-2); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.route-tab input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.route-tab:hover { border-color: var(--line-2); }
.route-tab:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.route-tab:has(input:focus-visible) { outline: 2px solid var(--primary-2); outline-offset: 2px; }
.route-tab-icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--primary-soft); color: var(--primary-2); }
.route-tab-text { display: grid; gap: 2px; font-size: 13.5px; min-width: 0; }
.route-tab-text > span { color: var(--muted); font-size: 12px; }
.route-guide:has(input[name="route_guide"]:checked) .route-panel { display: none; }
.route-guide:has(input[name="route_guide"][value="macrodroid"]:checked) [data-route-panel="macrodroid"],
.route-guide:has(input[name="route_guide"][value="pushbullet"]:checked) [data-route-panel="pushbullet"],
.route-guide:has(input[name="route_guide"][value="ios_app"]:checked) [data-route-panel="ios_app"],
.route-guide:has(input[name="route_guide"][value="ios_sms"]:checked) [data-route-panel="ios_sms"],
.route-guide:has(input[name="route_guide"][value="payaction"]:checked) [data-route-panel="payaction"] { display: block; animation: mode-panel-in .2s ease; }
.pb-box { border: 1px solid var(--line-2); border-radius: 12px; padding: 14px; background: color-mix(in srgb, var(--panel-2) 60%, transparent); }
.pb-status { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
@media (max-width: 960px) { .route-tabs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .route-tabs { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .route-guide .route-panel { animation: none !important; } }

/* 실시간 동기화(live.js): '새 내용이 있어요' 단추, 새로 생긴 줄 표시, 조용히 바꿔 끼우는 동안 들어오는 움직임 끄기 */
.vh-quiet *, .vh-quiet *::before, .vh-quiet *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition: none !important; }
.live-pill { position: fixed; left: 50%; bottom: 20px; z-index: 70; display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 700; box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  transform: translate(-50%, 16px); opacity: 0; transition: transform .22s cubic-bezier(.2, .8, .2, 1), opacity .22s ease; }
.live-pill.show { transform: translate(-50%, 0); opacity: 1; }
.live-pill[hidden] { display: none; }
.live-pill button { border: 0; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.live-new { animation: live-new 2.6s ease-out; }
@keyframes live-new { 0%, 25% { background-color: var(--live-new, color-mix(in srgb, var(--primary) 18%, transparent)); } 100% { background-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .live-pill { transition: none; } .live-new { animation: none; outline: 2px solid var(--live-new, color-mix(in srgb, var(--primary) 40%, transparent)); } }
.live-pill { background: var(--panel); color: var(--text); border: 1px solid var(--line-2); }
.live-pill button { background: var(--primary); color: var(--on-primary); }
.live-pill button:focus-visible { outline: 2px solid var(--primary-2); outline-offset: 2px; }

/* 페이지 사이 전환(11-08): 메인·약관·로그인·가입처럼 새로 여는 화면도 뚝 끊기지 않게 겹쳐 바꾼다(같은 출처, 지원하는
   브라우저). 콘솔은 console-nav.css가 메뉴·머리말을 두고 본문만 바꾸는 자기 규칙으로 덮는다. 동작 줄이기면 끈다 */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
:root:not([data-console-mode])::view-transition-old(root) { animation: vh-doc-out .16s ease both; }
:root:not([data-console-mode])::view-transition-new(root) { animation: vh-doc-in .3s cubic-bezier(.2, .8, .2, 1) both; }
::view-transition-group(lp-nav) { animation-duration: .25s; }
@keyframes vh-doc-out { to { opacity: 0; } }
@keyframes vh-doc-in { from { opacity: 0; transform: translateY(8px); } }

/* 선택지 여럿을 담은 .radio-row(받는 방법·보내는 길 등): 바깥 상자 대신 선택지마다 카드, 고른 것만 강조(11-08) */
.radio-row:has(> .check + .check) { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px;
  padding: 0; border: 0; background: none; cursor: default; }
.radio-row:has(> .check + .check):has(input:checked) { border-color: transparent; box-shadow: none; }
.radio-row:has(> .check + .check) > .check { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2);
  cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.radio-row:has(> .check + .check) > .check:hover { border-color: var(--line-2); }
.radio-row:has(> .check + .check) > .check:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.radio-row:has(> .check + .check) > .check:has(input:disabled) { opacity: .55; cursor: not-allowed; }

/* 새 신청 알림(종 단추·설정 창, live.js) */
.alert-menu { position: relative; }
.alert-menu > summary { list-style: none; cursor: pointer; }
.alert-menu > summary::-webkit-details-marker { display: none; }
.alert-bell.is-on { color: var(--primary-2); }
.alert-bell.is-on::after { content: ""; position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.alert-bell { position: relative; }
.alert-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 280px; display: grid; gap: 8px; padding: 14px;
  border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); }
.alert-panel p { margin: 0; }

/* 접속 보호 화면: 항목마다 묶음(요금제에 없으면 fieldset disabled로 흐리게) */
.protect-item { border: 0; margin: 0 0 6px; padding: 10px 0; min-width: 0; border-top: 1px solid var(--line); }
.protect-item:first-of-type { border-top: 0; }
.protect-item:disabled { opacity: .55; }
.warn-text { color: var(--ink-warning); display: flex; gap: 6px; align-items: center; }

/* 운영자 API 화면: 양식 묶음(요금제에 없으면 disabled로 흐리게), 권한 범위 칸, 폐기한 키, 끝점 목록 */
.plain-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.plain-fieldset:disabled { opacity: .55; }
fieldset.check-grid { border: 0; margin: 0 0 4px; padding: 0; min-width: 0; }
.field-label { font-size: 13px; font-weight: 600; color: var(--muted); padding: 0; margin-bottom: 6px; }
.card.is-muted { opacity: .7; }
.api-ref-table td:first-child, .api-ref-table td:nth-child(2) { white-space: nowrap; }

/* 디자인 화면: 테마 꾸러미 고르기(11-09) */
.pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pack { position: relative; display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-radius: 12px; padding: 10px; cursor: pointer; background: var(--bg-2); }
.pack input { position: absolute; opacity: 0; pointer-events: none; }
.pack:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.pack:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.pack-name { font-size: 13px; font-weight: 700; }
.pack-desc { font-size: 12px; color: var(--muted); line-height: 1.4; }
.pack-shot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; height: 38px; padding: 5px; border-radius: 8px; margin-bottom: 4px; }
.pack-shot i { border-radius: 4px; }
.pack-machine .pack-shot { background: #111214; } .pack-machine .pack-shot i { background: #191B1E; border: 1px solid #2C3035; box-shadow: inset 0 -9px 0 #08090A; }
.pack-catalog .pack-shot { background: #FFFFFF; border: 1px solid #E7E7E4; } .pack-catalog .pack-shot i { background: #F4F4F2; box-shadow: inset 0 -7px 0 #FFFFFF; }
.pack-night .pack-shot { background: #09090F; } .pack-night .pack-shot i { background: #11111B; border: 1px solid #5B3A8C; box-shadow: 0 0 8px rgba(180, 108, 255, .45); }
.sw-paper-a { background: #FFFFFF; } .sw-paper-b { background: #F4F4F2; } .sw-paper-c { background: #111111; } .sw-paper-d { background: #0F0F10; }
.sw-linen-a { background: #F6F1E9; } .sw-linen-b { background: #EFE7DA; } .sw-linen-c { background: #B4532A; } .sw-linen-d { background: #17120D; }
.sw-neon-a { background: #09090F; } .sw-neon-b { background: #5EEAD4; } .sw-neon-c { background: #B46CFF; } .sw-neon-d { background: #11111B; }
.sw-ember-a { background: #0D0907; } .sw-ember-b { background: #FFB347; } .sw-ember-c { background: #FF5F3A; } .sw-ember-d { background: #16100C; }
/* 미리보기 모양: 꾸러미마다 */
.mp.mp-t-catalog .mp-card { padding: 0; border: 0; background: transparent; gap: 4px; }
.mp.mp-t-catalog .mp-row { display: none; }
.mp.mp-t-catalog .mp-window { aspect-ratio: 1 / 1; border: 0; }
.mp.mp-t-catalog .mp-price { background: transparent; color: var(--mp-ink); font-family: inherit; font-weight: 700; padding: 0; }
.mp.mp-t-catalog .mp-buy { border-radius: 999px; }
.mp.mp-t-night .mp-card { border-color: color-mix(in srgb, var(--mp-accent) 35%, var(--mp-line)); box-shadow: 0 8px 20px -12px var(--mp-accent); }
.mp.mp-t-night .mp-price { text-shadow: 0 0 8px var(--mp-disp-num); }
.mp.mp-t-night .mp-led { box-shadow: 0 0 6px var(--mp-led-ok); }
.mp.mp-t-night .mp-title b { background: linear-gradient(100deg, var(--mp-ink) 35%, var(--mp-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* 종 패널: 좁은 화면에서는 화면 안에 붙인다(종 오른쪽에 이름·사진이 있어 왼쪽으로 넘치지 않게) */
@media (max-width: 600px) { .alert-panel { position: fixed; left: 16px; right: 16px; top: 64px; width: auto; } }
/* 입금 자동 확인 설정: '입금이 먼저 온 경우' 묶음 */
.late-link { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 6px; }
/* 섹션 조립: 꾸밀 페이지 고르기 */
.page-switch { display: flex; flex-wrap: wrap; gap: 6px; }
.page-switch .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); font-size: 13px; font-weight: 600; background: var(--bg-2); }
.page-switch .chip:hover { border-color: var(--muted); }
.page-switch .chip.active { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
/* 로그인 화면: '또는' 구분선(패스키) */
.auth-or { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; color: var(--muted); font-size: 12px; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
/* 코드 섹션 편집 칸 */
.code-input { font-size: 12.5px; line-height: 1.55; tab-size: 2; white-space: pre; overflow-wrap: normal; overflow-x: auto; }
/* 유료 테마 꾸러미: 잠금·구매 */
.pack.is-locked { opacity: .78; }
.pack-buy { margin-top: 6px; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.pack-studio .pack-shot { background: #F7F4EC; border: 1px solid #DDD5C6; } .pack-studio .pack-shot i { background: #EFEAE0; box-shadow: inset 0 -8px 0 #F7F4EC; border-radius: 0; }
.sw-ivory-a { background: #F7F4EC; } .sw-ivory-b { background: #EFEAE0; } .sw-ivory-c { background: #1F4D3A; } .sw-ivory-d { background: #141311; }
.sw-graphite-a { background: #F2F2F0; } .sw-graphite-b { background: #EAEAE7; } .sw-graphite-c { background: #2B2B2B; } .sw-graphite-d { background: #101010; }
.mp.mp-t-studio .mp-card { border-radius: 2px; background: transparent; border-color: transparent; padding: 0; }
.mp.mp-t-studio .mp-window { border-radius: 0; aspect-ratio: 4 / 5; }
.mp.mp-t-studio .mp-row { display: none; }
.mp.mp-t-studio .mp-price { background: transparent; color: var(--mp-accent); padding: 0; font-family: inherit; }
.mp.mp-t-studio .mp-title b { font-family: "Noto Serif KR", "Nanum Myeongjo", serif; font-weight: 600; letter-spacing: -.01em; }
/* 휴대폰 폭(11-09 점검): 긴 명령어·비밀값이 칸 밖으로 넘치지 않게. 명령어(pre)는 가로로 밀고, 한 줄 값은 아무 데서나 줄바꿈 */
pre.code-box { overflow-x: auto; max-width: 100%; }
code.code-box, .code-box > span { overflow-wrap: anywhere; word-break: break-all; min-width: 0; }
/* 코인 결제 대행 설정: 대행사마다 묶음 */
.gw-provider { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
.gw-provider .card-title { font-size: 15px; }

/* 바이올렛: 예전처럼 기본 단추·확인 단추는 보라→파랑 그라데이션에 흰 글자, 프로필 동그라미는 보라→청록 */
:root[data-console-theme="violet"] .btn-primary,
:root[data-console-theme="violet"] .vh-dialog .vh-dialog-ok { background: linear-gradient(135deg, var(--primary), #5d7bff); color: #fff; }
:root[data-console-theme="violet"] .btn-primary { box-shadow: 0 10px 24px rgba(124, 92, 255, .28); }
:root[data-console-theme="violet"] .btn-primary:hover { background: linear-gradient(135deg, #8b6dff, #6c88ff); }
:root[data-console-theme="violet"] .avatar { background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; }
/* 화면 모양 고르기의 색 점(고르는 값을 보여 주는 견본이라 색을 그대로 쓴다) */
.look-dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; vertical-align: -1px;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, currentColor 70%, transparent); }  /* 고른 칸(같은 색 바탕)에서도 보이게 */
.look-amber { background: #f4b740; }
.look-violet { background: linear-gradient(135deg, #7c5cff, #5d7bff); }
.look-form { display: grid; gap: 14px; }
/* 줄 앞 이름 칸 폭(인라인 style은 CSP style-src 'self'가 막는다) */
.label-w-sm { min-width: 3.5em; }
.label-w-md { min-width: 9em; }