:root {
  --bg: #eceff1;
  --bg-panel: #ffffff;
  --bg-elevated: #f8f9fa;
  --border: #dadce0;
  --text: #202124;
  --text-muted: #5f6368;
  --cat-tab-muted: #5f6368;
  --cat-section-bg: #ffffff;
  --cat-section-border: #dadce0;
  --primary: #005DF5;
  --primary-hover: #0050D4;
  --success: #059669;
  --danger: #dc2626;
  --accent: #38bdf8;
  --touch-min: 48px;
  --topbar-height: 62px;
  --radius: 12px;
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  /* 테이블 플로어 기본 (밝은 모드) */
  --table-floor-bg: #eceff1;
  --table-floor-table-bg: #ffffff;
  --table-floor-border: #dadce0;
  --table-floor-empty-border: #dadce0;
  --table-floor-name-color: #202124;
  /* 상단바 · 설정 좌측 메뉴 (밝은 모드) */
  --topbar-bg: #ffffff;
  --topbar-border: #dadce0;
  --topbar-fg: #202124;
  --topbar-fg-muted: #5f6368;
  --topbar-badge-bg: #f1f3f4;
  --topbar-hover: rgba(0, 0, 0, 0.06);
  --settings-nav-bg: #ffffff;
  --settings-nav-border: #dadce0;
  --settings-nav-fg: #202124;
  --settings-nav-fg-muted: #5f6368;
  --settings-nav-hover: rgba(0, 0, 0, 0.05);
  --settings-nav-section: #80868b;
  /* 10.1" 태블릿 최소 (800×1280 세로 / 1280×800 가로) */
  --pos-min-width: 800px;
  --pos-bp-narrow: 799px;
  --pos-cart-min: 248px;
  --pos-cart-max: 320px;
  /* 주방 상태 (테이블·KDS 공통) */
  --kitchen-preparing-bg: #e3f2fd;
  --kitchen-preparing-border: #1565c0;
  --kitchen-preparing-text: #0d47a1;
  --kitchen-preparing-hover: #bbdefb;
  --kitchen-cooking-bg: #fff3e0;
  --kitchen-cooking-border: #ef6c00;
  --kitchen-cooking-text: #e65100;
  --kitchen-cooking-hover: #ffe0b2;
  --kitchen-done-bg: #e8f5e9;
  --kitchen-done-border: #2e7d32;
  --kitchen-done-text: #1b5e20;
  --kitchen-done-hover: #c8e6c9;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  min-width: var(--pos-min-width);
}

html,
body {
  margin: 0;
  height: 100%;
  min-height: 100%;
  min-width: var(--pos-min-width);
  font-family: "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

.hidden {
  display: none !important;
}

/* Offline & Toast */
.offline-bar {
  background: var(--danger);
  color: #fff;
  text-align: center;
  padding: 8px;
  font-size: 0.85rem;
}
.offline-bar.offline-sale-active {
  background: #b45309;
}

.pwa-install-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: #1e40af;
  color: #fff;
  font-size: 0.9rem;
}

.pwa-install-banner.hidden {
  display: none;
}

.pwa-install-banner-text {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pwa-install-banner-text strong {
  font-weight: 600;
}

.pwa-install-banner-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.pwa-install-banner .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}

.toast-host {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
}

/* 설정 화면: 좌측 네비(220px)와 겹치지 않도록 콘텐츠 영역 쪽에 표시 */
body:has(#view-settings.active) .toast-host {
  left: 236px;
}

.toast {
  padding: 12px 18px;
  border-radius: var(--radius);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  animation: slideIn 0.25s ease;
  pointer-events: auto;
  max-width: 320px;
}

.toast.ok {
  border-left: 4px solid var(--success);
}

.toast.err {
  border-left: 4px solid var(--danger);
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
}

/* 상단바 + 주문 오버레이 영역 */
.topbar-zone {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  height: var(--topbar-height);
  overflow: visible;
  z-index: 1200;
}

/* Topbar — 밝은 헤더 (어두운 모드는 pos-theme.css) */
.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  box-sizing: border-box;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-border);
  color: var(--topbar-fg);
}

.btn-topbar-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  border-radius: 0;
  background: transparent;
  color: var(--topbar-fg);
  cursor: pointer;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.btn-topbar-menu svg {
  display: block;
  width: 30px;
  height: 30px;
}

.btn-topbar-mark {
  display: block;
  width: 43px;
  height: 43px;
  border-radius: 10px;
  object-fit: contain;
  pointer-events: none;
}

.btn-topbar-menu:hover .btn-topbar-mark {
  filter: brightness(1.08);
}

.btn-topbar-menu:active .btn-topbar-mark {
  filter: brightness(0.92);
}

.btn-topbar-menu:hover {
  background: var(--topbar-hover);
  color: var(--topbar-fg);
}

.btn-topbar-menu:active {
  transform: scale(0.96);
  background: var(--topbar-hover);
  color: var(--topbar-fg-muted);
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 1024px), (max-height: 800px) {
  :root {
    --topbar-height: 52px;
  }

  .topbar .brand {
    display: none !important;
  }

  .topbar {
    gap: 8px;
    padding: 6px 10px;
  }

  .btn-topbar-menu {
    width: 48px;
    height: 48px;
  }

  .btn-topbar-mark {
    width: 36px;
    height: 36px;
  }
}

.topbar .logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.logo-wordmark-img {
  display: block;
  height: 26px;
  width: auto;
  max-width: 115px;
  object-fit: contain;
  flex-shrink: 0;
  background: transparent;
  border-radius: 5px;
  padding: 0;
}

.logo-wordmark-text,
.pos-text-wordmark,
.pos-device-register-wordmark-text {
  display: inline-block;
  font-family: "Montserrat", "Segoe UI", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #111827;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.logo-wordmark-text {
  font-size: 1.18rem;
}

.logo-wordmark-text .accent,
.pos-text-wordmark .accent,
.pos-device-register-wordmark-text .accent {
  color: #005df5;
}

.logo {
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--accent);
}

.topbar .badge {
  font-size: 0.84rem;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--topbar-badge-bg);
  color: var(--topbar-fg-muted);
  white-space: nowrap;
}

.topbar-clock-group {
  flex-shrink: 0;
  margin-left: 2px;
}

.topbar-datetime-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}

.topbar-datetime-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 11px;
  column-gap: 5px;
  align-items: center;
}

.topbar-datetime-line {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--topbar-fg);
  white-space: nowrap;
  line-height: 1.25;
  text-align: right;
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  min-width: 0;
}

.topbar-business-day-label.open {
  color: #137333;
}

.topbar-business-day-label.pending {
  color: #b06000;
}

.topbar-business-day-label.closed {
  color: #c5221f;
}

.topbar .badge.status-dot {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  min-width: 11px;
  padding: 0;
  border-radius: 50%;
  font-size: 0;
  line-height: 0;
  color: transparent;
  border: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14);
  cursor: default;
  justify-self: center;
}

.badge {
  font-size: 0.7rem;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--bg-elevated);
  white-space: nowrap;
}

.topbar .badge.ok {
  background: #065f46;
  color: #6ee7b7;
}

.topbar .badge.hq-sync-badge.closed {
  background: rgba(239, 68, 68, 0.35);
  color: #fecaca;
  border: 1px solid #f87171;
}

.topbar .badge.hq-sync-badge.pending {
  background: rgba(59, 130, 246, 0.25);
  color: #bfdbfe;
  border: 1px solid #60a5fa;
}

.topbar .badge.status-dot.ok,
.topbar .badge.status-dot.closed,
.topbar .badge.status-dot.pending,
.topbar .badge.status-dot.subtle {
  width: 11px;
  height: 11px;
  min-width: 11px;
  padding: 0;
  border-radius: 50%;
  font-size: 0;
  color: transparent;
}

.topbar .badge.status-dot.is-green,
.topbar .badge.status-dot.ok.is-green,
.topbar .badge.status-dot.pending.is-green {
  background: #22c55e;
  box-shadow: 0 0 0 1px rgba(21, 128, 61, 0.35);
}

.topbar .badge.status-dot.is-red,
.topbar .badge.status-dot.closed.is-red {
  background: #ef4444;
  box-shadow: 0 0 0 1px rgba(185, 28, 28, 0.35);
}

.topbar .badge.status-dot.is-neutral,
.topbar .badge.status-dot.subtle.is-neutral {
  background: #9ca3af;
  box-shadow: 0 0 0 1px rgba(75, 85, 99, 0.35);
}

.badge.ok {
  background: #065f46;
  color: #6ee7b7;
}

.topbar .badge.subtle {
  background: #374151;
  color: #d1d5db;
}

.badge.subtle {
  color: var(--text-muted);
}

.badge.closed {
  background: rgba(239, 68, 68, 0.25);
  color: #fecaca;
  border: 1px solid #ef4444;
}

.badge.pending {
  background: rgba(245, 158, 11, 0.2);
  color: #fde68a;
  border: 1px solid #f59e0b;
}

.badge.open {
  background: rgba(16, 185, 129, 0.2);
  color: #a7f3d0;
  border: 1px solid #10b981;
}

.tabs {
  display: flex;
  gap: 4px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.topbar .tab {
  min-height: 48px;
  min-width: 77px;
  padding: 0 17px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--topbar-fg-muted);
  cursor: pointer;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 7px;
}

.topbar .tab:hover:not(.active) {
  color: var(--topbar-fg);
  background: var(--topbar-hover);
}

.topbar .tab.active {
  background: var(--primary);
  color: #fff;
}

.tab-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #005df5;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
}

.tab-count-badge.hidden {
  display: none;
}

.topbar .tab.active .tab-count-badge {
  background: rgba(255, 255, 255, 0.95);
  color: #005df5;
}

.tab {
  min-height: var(--touch-min);
  min-width: 64px;
  padding: 0 14px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.tab.active {
  background: var(--primary);
  color: #fff;
}

.topbar-window-ctrl {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  padding-left: 4px;
  margin-left: 4px;
}

.topbar .btn-topbar-minimize,
.topbar .btn-topbar-exit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  min-width: 62px;
  min-height: 62px;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  border-radius: 0;
  background: transparent;
  color: var(--topbar-fg);
  box-shadow: none;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.topbar .btn-topbar-func {
  min-height: 41px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--topbar-fg-muted);
  font-size: 0.94rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.btn-topbar-func {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.topbar .btn-topbar-func:hover {
  background: var(--bg-panel);
  border-color: var(--text-muted);
  color: var(--topbar-fg);
}

.btn-topbar-func:hover {
  background: var(--bg-panel);
  border-color: var(--text-muted);
}

.topbar .btn-topbar-minimize svg,
.topbar .btn-topbar-exit svg {
  display: block;
  width: 30px;
  height: 30px;
}

.topbar .btn-topbar-minimize {
  padding: 0;
}

.topbar .btn-topbar-exit {
  padding: 0;
}

.topbar .btn-topbar-minimize:hover,
.topbar .btn-topbar-exit:hover {
  background: var(--topbar-hover);
  color: var(--topbar-fg);
  border: none;
  box-shadow: none;
}

.topbar .btn-topbar-minimize:focus,
.topbar .btn-topbar-exit:focus,
.topbar .btn-topbar-menu:focus {
  outline: none;
  box-shadow: none;
}

.topbar .btn-topbar-minimize:focus-visible,
.topbar .btn-topbar-exit:focus-visible,
.topbar .btn-topbar-menu:focus-visible {
  outline: 2px solid rgba(0, 93, 245, 0.45);
  outline-offset: 2px;
}

.btn-topbar-minimize,
.btn-topbar-exit {
  min-width: 34px;
  padding: 0 10px;
  background: transparent;
  border-color: var(--border);
  color: var(--text);
  line-height: 1;
  font-weight: 700;
}

.btn-topbar-minimize {
  font-size: 1.1rem;
  letter-spacing: -0.05em;
}

.btn-topbar-exit {
  font-size: 1.15rem;
}

.topbar .btn-topbar-minimize:active,
.topbar .btn-topbar-exit:active {
  transform: scale(0.96);
  background: transparent;
  color: #d1d5db;
}

.btn-topbar-minimize:hover,
.btn-topbar-exit:hover {
  background: var(--bg-elevated);
  border-color: var(--text-muted);
  color: var(--text);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.topbar-store-pos {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar-store-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.topbar-store-flag {
  position: absolute;
  left: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 15px;
  pointer-events: none;
}

.topbar-store-flag.hidden {
  display: none;
}

.topbar-store-flag-img {
  display: block;
  width: 20px;
  height: 15px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.topbar-store-label {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 14px 0 38px;
  border-radius: 10px;
  border: 1px solid var(--topbar-border);
  background: #ffffff;
  color: #202124;
  font-size: 1rem;
  white-space: nowrap;
}

.topbar-store-select-wrap.is-single-store .topbar-store-label {
  max-width: none;
}

.topbar-store-select-wrap .touch-select {
  padding-left: 38px;
  padding-right: 12px;
  min-width: 9rem;
  max-width: min(22rem, 34vw);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: none;
}

.topbar-store-select-wrap .touch-select::-ms-expand {
  display: none;
}

.topbar-store-select-wrap.is-single-store .touch-select {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.topbar-pos-no {
  font-size: 1.14rem;
  font-weight: 700;
  color: var(--topbar-fg);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.topbar-pos-staff {
  font-size: 16px;
  font-weight: 700;
  color: var(--topbar-fg);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;
}

.btn-topbar-notify {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--topbar-fg-muted);
  cursor: pointer;
}

.btn-topbar-notify:hover {
  background: var(--topbar-hover);
  color: var(--topbar-fg);
}

.topbar-notify-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.topbar-system-menu-anchor {
  position: relative;
}

.btn-topbar-system {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--topbar-fg-muted);
  cursor: pointer;
}

.btn-topbar-system:hover,
.btn-topbar-system.active {
  background: var(--topbar-hover);
  color: var(--topbar-fg);
}

.topbar-system-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 3000;
  width: 286px;
  padding: 14px 12px 12px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18);
}

.topbar-system-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 6px;
}

.topbar-system-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.topbar-system-item:hover .topbar-system-icon {
  background: #eceff3;
}

.topbar-system-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: var(--bg);
}

.topbar-system-icon-refresh {
  color: #34a853;
}

.topbar-system-icon-restart {
  color: #4285f4;
}

.topbar-system-icon-exit {
  color: #ea4335;
}

.topbar-system-icon-neutral {
  color: #5f6368;
}

.topbar-system-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #3c4043;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.topbar .touch-select,
.topbar .btn-icon {
  min-height: 48px;
  border-radius: 10px;
  border: 1px solid var(--topbar-border);
  background: #ffffff;
  color: #202124;
}

.topbar .btn-icon {
  min-width: 40px;
  font-size: 1.05rem;
}

.topbar .touch-select:hover,
.topbar .btn-icon:hover {
  background: var(--topbar-hover);
  border-color: var(--border);
}

.touch-select,
.touch-input {
  min-height: var(--touch-min);
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
}

.touch-input[readonly]:not([type="checkbox"]) {
  background: #f1f5f9;
  color: var(--muted, #64748b);
  cursor: default;
}

.touch-input.search {
  width: 100%;
  margin-bottom: 8px;
}

.btn-icon {
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  font-size: 1.1rem;
}

/* Views */
.view {
  display: none;
  height: calc(100dvh - var(--topbar-height));
  height: calc(100vh - var(--topbar-height));
  overflow: hidden;
}

.view.active {
  display: flex;
}

#view-cashier.active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#view-cashier.active.mode-prepaid .cashier-order-flow,
#view-cashier.active.mode-postpaid-order .cashier-order-flow,
#view-cashier.active.mode-quick-order .cashier-order-flow {
  display: grid;
  grid-template-columns: 1fr minmax(var(--pos-cart-min), var(--pos-cart-max));
  grid-template-rows: 1fr;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  gap: 0;
  padding: 0;
  background: var(--bg);
}

#view-cashier.active.mode-prepaid > .cashier-order-flow:not(.hidden),
#view-cashier.active.mode-postpaid-order > .cashier-order-flow:not(.hidden),
#view-cashier.active.mode-quick-order > .cashier-order-flow:not(.hidden) {
  display: grid !important;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  align-self: stretch;
}

#view-cashier.active.mode-postpaid-floor {
  display: flex;
}

#view-cashier.active.mode-postpaid-floor .cashier-table-floor {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.cashier-table-floor {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 8px 10px 8px 12px;
  overflow: hidden;
  background: var(--table-floor-bg, #eceff1);
}

.table-floor-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 10px;
  width: 100%;
}

.table-floor-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.table-floor-sidebar {
  flex-shrink: 0;
  width: 108px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.table-floor-sidebar:has(#tableFloorStatus:not(.hidden)) {
  gap: 4px;
}

.table-floor-sidebar::-webkit-scrollbar {
  display: none;
}

.table-floor-sidebar-group {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  gap: 4px;
}

.table-floor-sidebar-divider {
  flex-shrink: 0;
  height: 2px;
  margin: 0 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.12);
}

.table-floor-status {
  margin: 0;
  padding: 6px 4px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  flex-shrink: 0;
}

.table-floor-status.hidden {
  display: none;
}

.sale-order-member-anchor {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}

.sale-member-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.sale-member-toolbar:not(.hidden) {
  display: flex;
}

.table-floor-member-btn {
  min-width: 44px;
  width: 44px;
  min-height: 52px;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  border-radius: 8px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: var(--text);
}

.table-floor-member-btn:hover {
  background: var(--bg-elevated);
  border-color: var(--text-muted);
}

.table-floor-member-clear {
  font-size: 14px;
  font-weight: 700;
}

.sale-guest-count-btn {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-shrink: 0;
}

.sale-guest-count-icon {
  font-size: 20px;
  line-height: 1;
}

.sale-guest-count-badge {
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
}

.sale-guest-count-btn.has-count .sale-guest-count-badge {
  color: #2e7d32;
}

.sale-order-member-anchor .sale-member-badge {
  max-width: 140px;
  font-size: 11px;
}

.table-floor-func-btn {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  padding: 6px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  word-break: keep-all;
  border-radius: 8px;
  border-width: 2px;
  border-style: solid;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, filter 0.12s, opacity 0.12s;
  color: #fff;
}

.table-floor-func-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.2);
}

.table-floor-func-open {
  background: #00897b;
  border-color: #00695c;
}

.table-floor-func-open:hover:not(:disabled) {
  background: #009688;
  filter: brightness(1.05);
}

.table-floor-func-shift {
  background: #546e7a;
  border-color: #37474f;
}

.table-floor-func-shift:hover:not(:disabled) {
  background: #607d8b;
  filter: brightness(1.05);
}

.table-floor-func-close {
  background: #c62828;
  border-color: #b71c1c;
}

.table-floor-func-close:hover:not(:disabled) {
  background: #d32f2f;
  filter: brightness(1.05);
}

.table-floor-func-drawer {
  background: #6d4c41;
  border-color: #4e342e;
}

.table-floor-func-drawer:hover:not(:disabled) {
  background: #795548;
  filter: brightness(1.05);
}

.table-floor-func-drawer:active:not(:disabled) {
  filter: brightness(0.95);
}

.table-floor-func-cash-move {
  background: #0d9488;
  border-color: #115e59;
}

.table-floor-func-cash-move:hover:not(:disabled) {
  background: #14b8a6;
  filter: brightness(1.05);
}

.table-floor-func-cash-move:active:not(:disabled) {
  filter: brightness(0.95);
}

.table-floor-func-move {
  background: #1976d2;
  border-color: #0d47a1;
}

.table-floor-func-move:hover {
  background: #1e88e5;
  filter: brightness(1.05);
}

.table-floor-func-move.active {
  background: #0d47a1;
  border-color: #002171;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.table-floor-func-merge {
  background: #ef6c00;
  border-color: #e65100;
}

.table-floor-func-merge:hover {
  background: #f57c00;
  filter: brightness(1.05);
}

.table-floor-func-merge.active {
  background: #e65100;
  border-color: #bf360c;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.table-floor-func-unmerge {
  background: #f9a825;
  border-color: #f57f17;
}

.table-floor-func-unmerge:hover {
  background: #fbc02d;
  filter: brightness(1.05);
}

.table-floor-func-unmerge.active {
  background: #f57f17;
  border-color: #ef6c00;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.table-floor-merge-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #ff6f00;
  color: #fff;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
  white-space: nowrap;
}

.table-floor-merge-badge-compact {
  display: block;
  margin: 2px 0 0;
  font-size: 0.62rem;
  padding: 0 4px;
}

.table-floor-btn.is-merge-main:not(.has-order) {
  border-color: #ff6f00;
  box-shadow: inset 0 0 0 2px rgba(255, 111, 0, 0.35);
}

.table-floor-btn.is-merge-sub {
  opacity: 0.72;
  border-style: dashed;
  border-color: #ff6f00;
}

.table-floor-btn.is-merge-sub .table-floor-label {
  color: #ff6f00;
}

.table-floor-merge-link {
  display: inline-block;
  margin-left: 4px;
  color: #ff6f00;
  font-size: 0.78em;
  font-weight: 700;
}

.table-floor-func-receipt {
  background: #5e35b1;
  border-color: #4527a0;
}

.table-floor-func-receipt:hover {
  background: #673ab7;
  filter: brightness(1.05);
}

.table-floor-func-receipt:active {
  filter: brightness(0.95);
}

.table-floor-func-sales-flash {
  background: #00838f;
  border-color: #006064;
}

.table-floor-func-sales-flash:hover {
  background: #0097a7;
  filter: brightness(1.05);
}

.table-floor-func-sales-flash:active {
  filter: brightness(0.95);
}

.table-floor-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.table-floor-tab {
  min-width: 72px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, filter 0.12s;
}

.table-floor-tab:hover:not(.is-active) {
  background: var(--bg-elevated);
  border-color: var(--text-muted);
}

.table-floor-tab.is-active {
  background: #005df5;
  border-color: #0046c0;
  color: #fff;
}

.table-floor-tab.is-active:hover {
  background: #1a6ef7;
  filter: brightness(1.05);
}

.table-floor-tab:active {
  filter: brightness(0.95);
}

.table-floor-overview {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 2px 6px 0;
  background: var(--table-floor-bg, #eceff1);
}

.table-floor-overview-section {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 10px;
  padding: 8px 8px 10px;
  box-sizing: border-box;
}

.table-floor-overview-title {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  margin: 0 0 8px;
  padding-bottom: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--table-floor-name-color, #202124);
  letter-spacing: -0.01em;
  border-bottom: 1px solid var(--border);
}

.table-floor-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 4px;
  width: 100%;
}

.table-floor-overview-grid .table-floor-btn-mini {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  min-height: 30px;
  height: auto;
  width: 100%;
  min-width: 0;
  padding: 4px 7px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text);
  font-size: 0.7rem;
  font-weight: 700;
  gap: 4px;
  box-sizing: border-box;
}

.table-floor-overview-grid .table-floor-btn-mini.has-order {
  background: #cbd5e1;
  border-color: #94a3b8;
  color: #1e293b;
}

.table-floor-overview-grid .table-floor-btn-mini.has-order.table-kitchen-preparing,
.table-floor-overview-grid .table-floor-btn-mini.has-order.table-kitchen-cooking,
.table-floor-overview-grid .table-floor-btn-mini.has-order.table-kitchen-done {
  background: #cbd5e1;
  border-color: #94a3b8;
  color: #1e293b;
}

.table-floor-overview-grid .table-floor-btn-mini:hover,
.table-floor-overview-grid .table-floor-btn-mini:active {
  filter: brightness(0.97);
}

.table-floor-overview-grid .table-floor-btn-mini.has-order:hover,
.table-floor-overview-grid .table-floor-btn-mini.has-order:active {
  background: #b8c4d4;
  border-color: #64748b;
}

.table-floor-mini-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
  min-width: 0;
}

.table-floor-overview-grid .table-floor-btn-mini .table-floor-label {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-floor-overview-grid .table-floor-btn-mini .table-floor-guest-count {
  font-size: 0.62rem;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
  flex-shrink: 0;
}

.table-floor-overview-grid .table-floor-btn-mini .guest-count-icon {
  font-size: 0.58rem;
}

.table-floor-overview-grid .table-floor-slot-empty-mini {
  min-height: 28px;
  height: 28px;
  border-radius: 6px;
}

.table-floor-overview-grid .table-floor-btn-mini.table-floor-shape-circle {
  border-radius: 6px;
  aspect-ratio: auto;
  max-width: none;
  justify-self: stretch;
}

.store-info-floor-hint {
  grid-column: 1 / -1;
  margin: -4px 0 0;
}

.store-info-floor-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  gap: 12px 16px;
  flex-wrap: wrap;
}

.store-info-floor-mode-field {
  flex: 0 0 auto;
  margin: 0;
  min-width: 108px;
}

.store-info-floor-row .store-info-floor-names {
  grid-column: auto;
  flex: 1 1 240px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: flex-end;
  margin: 0;
}

.store-info-floor-names {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.store-info-floor-name-field {
  margin: 0;
}

.store-info-floor-name-hint {
  grid-column: 1 / -1;
  margin: 0;
}

.store-info-floor-count {
  max-width: 120px;
}

.settings-table-floor-tabs {
  margin-bottom: 8px;
}

.settings-table-floor-hint {
  margin: 0 0 12px;
}

.settings-table-floor-badge {
  grid-column: 1 / -1;
  font-size: 0.78rem;
  font-weight: 700;
  color: #475569;
  margin-bottom: 2px;
}

.settings-table-card-head {
  margin: 0 0 2px;
}

.settings-table-card-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: #1e293b;
  line-height: 1.2;
}

.settings-table-field-floor {
  margin-top: 4px;
}

.table-floor-grid {
  display: grid;
  gap: 10px;
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  align-content: stretch;
  justify-content: stretch;
}

.table-floor-grid .table-floor-btn {
  min-height: 0;
  height: 100%;
  width: 100%;
}

.table-floor-slot-empty {
  min-height: 54px;
  height: 100%;
  width: 100%;
  border-radius: var(--radius);
  border: 1px dashed var(--table-floor-empty-border, transparent);
  background: transparent;
  pointer-events: none;
}

.table-floor-grid.table-floor-grid-placement {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  height: auto;
  aspect-ratio: var(--placement-view-cols, 8) / var(--placement-view-rows, 8);
  align-self: center;
  margin: 0 auto;
  gap: clamp(4px, 0.8vmin, 10px);
}

.table-floor-grid-placement .table-floor-slot-empty {
  min-height: 0;
  border: none;
  background: transparent;
}

.table-floor-grid-placement .table-floor-btn {
  min-height: 0;
  padding: clamp(4px, 1.2vmin, 12px) clamp(6px, 1.5vmin, 14px);
  font-size: clamp(0.65rem, 1.8vmin, 1rem);
}

.table-floor-grid-placement .table-floor-label {
  font-size: var(--table-floor-name-font-size, clamp(0.65rem, 1.8vmin, 1rem));
}

.table-floor-grid-placement .table-floor-head,
.table-floor-grid-placement .table-floor-body,
.table-floor-grid-placement .table-floor-detail,
.table-floor-grid-placement .table-floor-kitchen-status {
  font-size: clamp(0.55rem, 1.4vmin, 0.85rem);
}

.table-floor-grid-placement .table-floor-foot {
  row-gap: 2px;
}

.table-floor-grid-placement .table-floor-amount {
  font-size: clamp(0.72rem, 2vmin, 1.05rem);
}

.table-floor-grid .table-floor-btn,
.table-floor-grid-placement .table-floor-btn {
  container-type: size;
  container-name: table-floor-card;
}

.table-floor-grid .table-floor-head,
.table-floor-grid-placement .table-floor-head {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.table-floor-grid .table-floor-body,
.table-floor-grid-placement .table-floor-body {
  margin-top: 0;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
}

.table-floor-grid .table-floor-items,
.table-floor-grid-placement .table-floor-items {
  flex: 0 1 auto;
  min-height: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.25;
}

.table-floor-grid-placement .table-floor-items {
  -webkit-line-clamp: 1;
}

@container table-floor-card (max-height: 100px) {
  .table-floor-items {
    display: none;
  }
}

@supports not (container-type: size) {
  .table-floor-grid-placement .table-floor-items {
    display: none;
  }
}

.table-floor-grid .table-floor-foot,
.table-floor-grid-placement .table-floor-foot {
  flex-shrink: 0;
}

.table-floor-shape-circle.table-floor-slot-empty {
  border-radius: 50%;
  aspect-ratio: 1;
  height: auto;
  max-height: 100%;
  width: auto;
  max-width: 100%;
  justify-self: center;
  align-self: center;
}

.table-floor-grid .table-floor-btn.table-floor-shape-circle {
  border-radius: 50%;
  aspect-ratio: 1;
  height: 100%;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  justify-self: center;
  align-self: center;
  padding: 12px 14px;
  box-sizing: border-box;
}

.table-floor-grid .table-floor-btn.table-floor-shape-circle .table-floor-body,
.table-floor-grid .table-floor-btn.table-floor-shape-circle .table-floor-detail,
.table-floor-grid .table-floor-btn.table-floor-shape-circle .table-floor-foot {
  width: 100%;
  align-items: center;
  text-align: center;
}

.table-floor-grid .table-floor-btn.table-floor-shape-circle .table-floor-foot {
  grid-template-columns: 1fr;
  justify-items: center;
}

.table-floor-grid .table-floor-btn.table-floor-shape-circle .table-floor-order-time,
.table-floor-grid .table-floor-btn.table-floor-shape-circle .table-floor-dwell,
.table-floor-grid .table-floor-btn.table-floor-shape-circle .table-floor-amount {
  text-align: center;
  grid-column: 1;
}

.table-floor-grid .table-floor-btn.table-floor-shape-circle .table-floor-label,
.table-floor-grid .table-floor-btn.table-floor-shape-circle .table-floor-items,
.table-floor-grid .table-floor-btn.table-floor-shape-circle .table-floor-amount {
  text-align: center;
  width: 100%;
}

.table-floor-grid .table-floor-btn.table-floor-shape-circle .table-floor-kitchen-status {
  margin-left: 0;
}

.table-floor-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 54px;
  border: 1px solid var(--table-floor-border, var(--border));
  border-radius: 8px;
  background: var(--table-floor-table-bg, var(--bg-panel));
  color: var(--table-floor-name-color, var(--text));
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.1s;
  padding: 12px 14px;
  text-align: left;
  font-weight: 600;
}

/* 주문 테이블 — 주방 상태 색상 */
.table-floor-btn.has-order.table-kitchen-preparing {
  background: var(--kitchen-preparing-bg);
  border-color: var(--kitchen-preparing-border);
  color: var(--kitchen-preparing-text);
}

.table-floor-btn.has-order.table-kitchen-preparing:hover {
  background: var(--kitchen-preparing-hover);
  border-color: var(--kitchen-preparing-border);
}

.table-floor-btn.has-order.table-kitchen-cooking {
  background: var(--kitchen-cooking-bg);
  border-color: var(--kitchen-cooking-border);
  color: var(--kitchen-cooking-text);
}

.table-floor-btn.has-order.table-kitchen-cooking:hover {
  background: var(--kitchen-cooking-hover);
  border-color: var(--kitchen-cooking-border);
}

.table-floor-btn.has-order.table-kitchen-done {
  background: var(--kitchen-done-bg);
  border-color: var(--kitchen-done-border);
  color: var(--kitchen-done-text);
}

.table-floor-btn.has-order.table-kitchen-done:hover {
  background: var(--kitchen-done-hover);
  border-color: var(--kitchen-done-border);
}

.table-floor-body,
.table-floor-detail {
  margin-top: 6px;
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
}

.table-floor-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 4px;
  width: 100%;
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
  color: #546e7a;
}

.table-floor-order-time {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-floor-dwell {
  grid-column: 2;
  grid-row: 1;
  text-align: right;
  flex-shrink: 0;
}

.table-floor-foot .table-floor-amount {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 0;
}

.table-floor-time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  margin-top: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
  color: #546e7a;
}

.table-floor-order-time,
.table-floor-dwell {
  white-space: nowrap;
}

.table-floor-dwell {
  color: #1565c0;
  font-variant-numeric: tabular-nums;
}

.table-kitchen-preparing .table-floor-dwell {
  color: #6a4f00;
}

.table-kitchen-cooking .table-floor-dwell {
  color: #b45309;
}

.table-kitchen-done .table-floor-dwell {
  color: #166534;
}

.table-floor-items {
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.35;
  color: #37474f;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.table-floor-amount {
  font-size: 1.05rem;
  font-weight: 800;
  text-align: right;
  width: 100%;
  line-height: 1.15;
}

.table-kitchen-preparing .table-floor-amount {
  color: var(--kitchen-preparing-border);
}

.table-kitchen-cooking .table-floor-amount {
  color: var(--kitchen-cooking-border);
}

.table-kitchen-done .table-floor-amount {
  color: var(--kitchen-done-border);
}

.table-floor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
  min-width: 0;
  margin-bottom: 2px;
}

.table-floor-label {
  display: block;
  font-size: var(--table-floor-name-font-size, 1.15rem);
  font-weight: 700;
  color: var(--table-floor-name-color, #000000);
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-floor-kitchen-status {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid;
  white-space: nowrap;
}

.table-kitchen-status-preparing {
  background: #fff;
  border-color: var(--kitchen-preparing-border);
  color: var(--kitchen-preparing-text);
}

.table-kitchen-status-cooking {
  background: #fff;
  border-color: var(--kitchen-cooking-border);
  color: var(--kitchen-cooking-text);
}

.table-kitchen-status-done {
  background: #fff;
  border-color: var(--kitchen-done-border);
  color: var(--kitchen-done-text);
}

.table-floor-btn:hover,
.table-floor-btn:active {
  background: var(--table-floor-hover-bg, #f8fafc);
  border-color: var(--table-floor-hover-border, transparent);
  transform: scale(1.01);
}

.table-floor-btn.is-pick {
  background: #fff3e0;
  border-color: #e65100;
}

.table-floor-btn.is-pick-second {
  background: #e8f5e9;
  border-color: #2e7d32;
}

.cashier-order-flow {
  --toast-sale-header-h: 60px;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

/* POS2026 판매 패널 (좌) */
.sale-panel-left {
  --order-line-h: 40px;
  --order-thead-h: 34px;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
  box-sizing: border-box;
}

.sale-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sale-panel-footer {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;
  padding-top: 4px;
}

.order-lines-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg-panel);
  border-radius: 4px;
  margin-bottom: 4px;
}

.order-lines-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--bg-panel);
  color: var(--text);
}

.order-lines-table th {
  background: var(--bg-elevated);
  color: var(--text);
  font-weight: 700;
  padding: 6px 4px;
  border: 1px solid var(--border);
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 1;
  height: var(--order-thead-h);
  box-sizing: border-box;
}

.order-lines-table td {
  border: 1px solid var(--border);
  padding: 4px;
  vertical-align: middle;
  height: var(--order-line-h);
  box-sizing: border-box;
  color: var(--text);
}

.order-lines-table .col-no {
  width: 44px;
  text-align: center;
}

.order-lines-table .col-qty {
  width: 52px;
  text-align: center;
  font-weight: 700;
}

.order-lines-table .col-price,
.order-lines-table .col-disc,
.order-lines-table .col-amt {
  width: 72px;
  text-align: right;
  font-weight: 700;
}

.order-lines-table tr.cart-line.selected td {
  background: #ffdab9;
}

.order-lines-table tr.cart-line-new td,
.order-lines-table tr.cart-line-new .line-product-name {
  color: #000;
}

.order-lines-table tr.cart-line-kitchen-done td,
.order-lines-table tr.cart-line-kitchen-done .line-product-name {
  color: #1565c0;
  font-weight: 700;
}

.order-lines-table tr.cart-line-kitchen-done .line-product-meta {
  color: #1976d2;
}

.order-lines-table tr.cart-line-kitchen-done.selected td {
  background: #ffdab9;
  color: #0d47a1;
}

.order-lines-table tr.cart-line.placeholder td {
  background: #fafbfc;
  color: transparent;
  user-select: none;
  pointer-events: none;
  height: var(--order-line-h);
}

.order-lines-table .line-no-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 4px;
  min-width: 32px;
}

.order-lines-table .line-product-name {
  font-weight: 600;
}

.order-lines-table .line-product-meta {
  font-size: 11px;
  color: #616161;
  margin-top: 2px;
}

.sale-status-bar {
  display: flex;
  gap: 6px;
  align-items: stretch;
  background: #eceff1;
  border-radius: 6px;
  padding: 4px 6px;
  margin-bottom: 4px;
  flex-shrink: 0;
}

.sale-status-label {
  font-size: 11px;
  color: #546e7a;
  display: block;
  margin-bottom: 2px;
}

.sale-status-message {
  margin: 0;
  font-size: 12px;
  color: #37474f;
  line-height: 1.35;
}

.sale-status-text {
  flex: 1;
  min-width: 0;
}

.sale-order-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-shrink: 0;
  font-size: 13px;
}

.sale-order-meta-label {
  color: #546e7a;
}

.sale-order-meta-table {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.sale-order-meta-table strong {
  font-size: 13px;
}

.table-floor-guest-count {
  margin-left: 4px;
  font-size: 0.75em;
  font-weight: 600;
  color: #546e7a;
  white-space: nowrap;
}

.table-floor-guest-count .guest-count-icon {
  margin-right: 2px;
}

.table-floor-btn.has-order .table-floor-guest-count {
  opacity: 0.95;
}

.guest-count-modal-content {
  max-width: 360px;
}

.guest-count-modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.guest-count-table-hint {
  margin: 0;
  font-size: 13px;
  color: #546e7a;
  text-align: center;
}

.guest-count-seat-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.guest-count-seat-info {
  font-size: 14px;
  font-weight: 700;
  color: #37474f;
  padding: 6px 12px;
  background: #f5f7f8;
  border: 1px solid #cfd8dc;
  border-radius: 8px;
}

.guest-count-seat-step-btn {
  min-width: 44px;
  min-height: 40px;
  padding: 0 12px;
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 700;
  color: #1565c0;
  background: #e3f2fd;
  border: 2px solid #90caf9;
  border-radius: 8px;
  cursor: pointer;
}

.guest-count-seat-step-btn:active:not(:disabled) {
  background: #bbdefb;
  border-color: #1565c0;
}

.guest-count-seat-step-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.guest-count-display {
  font-size: 2.5rem;
  font-weight: 800;
  text-align: center;
  padding: 12px;
  background: #eceff1;
  border-radius: 8px;
  border: 2px solid #cfd8dc;
  line-height: 1.2;
}

.guest-count-pad button {
  min-height: 52px;
  font-size: 1.25rem;
  font-weight: 700;
  border: 2px solid #cfd8dc;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.guest-count-pad button:active {
  background: #e3f2fd;
  border-color: #1565c0;
}

.guest-count-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.guest-count-pad .guest-pad-clear {
  color: #c62828;
  background: #ffebee;
  border-color: #ef9a9a;
}

.guest-count-pad .guest-pad-clear:active {
  background: #ffcdd2;
  border-color: #e57373;
}

.guest-count-modal-footer {
  display: flex;
  gap: 8px;
  justify-content: stretch;
  align-items: stretch;
}

.guest-count-modal-footer .btn-ghost,
.guest-count-modal-footer .btn-primary {
  flex: 1;
  min-height: 35px;
  height: 35px;
  padding: 0 12px;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sale-func-top {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 3px;
  flex-shrink: 0;
}

.sale-func-top-btn {
  min-height: 32px;
  padding: 4px 2px;
  font-size: 11px;
  font-weight: 600;
  background: #fff;
  color: #263238;
  border: 1px solid #cfd8dc;
  border-radius: 4px;
  cursor: pointer;
}

.sale-func-top-btn.sale-func-symbol {
  font-size: 20px;
  font-weight: 700;
}

.sale-func-top-btn.sale-func-hold.active-hold {
  background: #c62828;
  border-color: #b71c1c;
  color: #fff;
}

.sale-summary-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 0;
  flex-shrink: 0;
}

.sale-summary-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.sale-summary-card {
  background: #fff;
  border: 1px solid #cfd8dc;
  border-radius: 6px;
  padding: 5px 6px;
}

.sale-summary-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 11px;
  color: #546e7a;
}

.sale-summary-line:last-child {
  margin-bottom: 0;
}

.sale-summary-line strong {
  font-size: 12px;
  color: #263238;
}

.sale-summary-due .summary-due-value {
  font-size: 16px;
}

.text-discount {
  color: #c62828 !important;
}

.sale-func-bottom {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, minmax(40px, auto));
  gap: 4px;
  flex-shrink: 0;
}

.sale-func-bottom-btn {
  min-height: 40px;
  padding: 4px 2px;
  font-size: 11px;
  font-weight: 600;
  background: #1565c0;
  color: #fff;
  border: 1px solid #0d47a1;
  border-radius: 4px;
  cursor: pointer;
}

.sale-func-bottom-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sale-func-bottom-btn.sale-pay-btn {
  background: #1565c0;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.sale-func-bottom-btn.sale-order-btn {
  background: #2e7d32;
  color: #fff;
  border-color: #1b5e20;
  font-size: 14px;
  font-weight: 700;
}

.sale-func-bottom-btn.sale-func-accent {
  background: #1565c0;
}

.sale-outline-btn {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
  background: #eceff1;
  color: #37474f;
  border: 2px solid #90a4ae;
  border-radius: 4px;
  cursor: pointer;
}

.sale-panel-right {
  background: #e8f0ed;
  border: 1px solid #b8c9c2;
  border-radius: 4px;
}

.cashier-order-flow .menu-toolbar {
  flex-wrap: wrap;
  gap: 8px;
}

#backToTablesBtn {
  flex-shrink: 0;
}

#view-kds.active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 8px 10px 10px;
  min-height: 0;
}

#view-kds .panel-toolbar {
  flex-shrink: 0;
  margin-bottom: 8px;
  gap: 8px;
}

#view-kds .panel-toolbar h2 {
  font-size: 1.15rem;
}

#view-kds .kds-status-bar {
  flex-shrink: 0;
}

#view-kds .kds-layout {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#view-kds #kdsBoard {
  flex: 1 1 0;
  min-height: 100px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 4px 8px;
}

#view-kds #kdsBoard.kds-columns {
  overflow: hidden;
}

#view-kds .kds-summary-bar {
  flex: 0 0 auto;
  max-height: min(22vh, 168px);
  overflow-y: auto;
  margin: 0 4px 6px;
}

#view-kds .kds-footer-bar {
  flex-shrink: 0;
  padding: 2px 8px 4px;
}

#view-kds .kds-footer-bar .hint {
  font-size: 0.72rem;
}

#view-did.active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 8px 10px 10px;
  min-height: 0;
}

#view-did .did-toolbar {
  flex-shrink: 0;
  margin-bottom: 8px;
  gap: 8px;
}

#view-did .did-toolbar h2 {
  font-size: 1.15rem;
}

#view-did .did-clock-label {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

#view-did .did-board {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  overflow: hidden;
}

#view-did .did-column {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
}

#view-did .did-col-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  font-weight: 800;
  flex-shrink: 0;
}

#view-did .did-col-NEW .did-col-header {
  background: var(--kitchen-preparing-bg);
  border-bottom: 2px solid var(--kitchen-preparing-border);
  color: var(--kitchen-preparing-text);
}

#view-did .did-col-COOKING .did-col-header {
  background: var(--kitchen-cooking-bg);
  border-bottom: 2px solid var(--kitchen-cooking-border);
  color: var(--kitchen-cooking-text);
}

#view-did .did-col-READY .did-col-header {
  background: var(--kitchen-done-bg);
  border-bottom: 2px solid var(--kitchen-done-border);
  color: var(--kitchen-done-text);
}

#view-did .did-col-title {
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  letter-spacing: -0.02em;
}

#view-did .did-count {
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

#view-did .did-col-body {
  flex: 1;
  min-height: 0;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 10px;
  overflow-y: auto;
}

#view-did .did-col-empty {
  width: 100%;
  text-align: center;
  color: var(--text-muted);
  padding: 32px 8px;
  margin: 0;
  font-size: 1.25rem;
}

#view-did .did-tile {
  flex: 1 1 calc(50% - 10px);
  min-width: 120px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 12px;
  border-radius: 12px;
  border: 2px solid transparent;
  text-align: center;
}

#view-did .did-tile.status-NEW {
  background: var(--kitchen-preparing-bg);
  border-color: var(--kitchen-preparing-border);
  color: var(--kitchen-preparing-text);
}

#view-did .did-tile.status-COOKING {
  background: var(--kitchen-cooking-bg);
  border-color: var(--kitchen-cooking-border);
  color: var(--kitchen-cooking-text);
}

#view-did .did-tile.status-READY {
  background: var(--kitchen-done-bg);
  border-color: var(--kitchen-done-border);
  color: var(--kitchen-done-text);
}

#view-did .did-tile-label {
  font-size: clamp(0.7rem, 1.2vw, 0.85rem);
  font-weight: 700;
  opacity: 0.75;
  letter-spacing: 0.02em;
}

#view-did .did-tile-number {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

#view-did .did-tile-type {
  font-size: clamp(0.75rem, 1.4vw, 0.95rem);
  font-weight: 600;
  opacity: 0.85;
}

@media (max-width: 720px) {
  #view-did .did-board {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  #view-did .did-column {
    min-height: 200px;
  }
}

#view-settings.active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

#view-settings.active .settings-work-layout {
  flex: 1;
  min-height: 0;
}

#view-xreport.active,
#view-zreport.active {
  display: block;
  overflow: auto;
  padding: 12px;
}

.settings-work-panel[data-settings-panel="inventory"] .inventory-settings-body {
  padding: 0;
  overflow: auto;
  min-height: 0;
  flex: 1;
}

.inventory-table-wrap {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px 16px;
}

.inventory-list-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: calc(0.86rem + 2px);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}

.inventory-list-table th,
.inventory-list-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  vertical-align: middle;
}

.inventory-list-table th.num,
.inventory-list-table td.num {
  text-align: right;
  white-space: nowrap;
}

.inventory-list-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc;
  font-size: calc(0.78rem + 2px);
  color: #475569;
  font-weight: 700;
  border-bottom: 1px solid #dbe3ee;
}

.inventory-list-table tbody tr {
  cursor: pointer;
}

.inventory-list-table tbody tr:hover {
  background: #f8fafc;
}

.inventory-list-row.is-selected {
  background: #eff6ff !important;
  box-shadow: inset 3px 0 0 #2563eb;
}

.inventory-list-row.is-selected.is-low {
  background: #fef2f2 !important;
  box-shadow: inset 3px 0 0 #dc2626;
}

.inventory-list-row.is-updating {
  opacity: 0.65;
  pointer-events: none;
}

.inventory-list-row.is-low {
  background: #fff7f7;
}

.inventory-list-row.is-low:hover {
  background: #feecec;
}

.inventory-list-name {
  font-weight: 700;
  color: #111827;
  min-width: 140px;
}

.inventory-list-qty strong {
  font-size: calc(0.95rem + 2px);
  font-variant-numeric: tabular-nums;
}

.inventory-list-qty.is-negative strong {
  color: #dc2626;
}

.inventory-list-updated {
  color: #6b7280;
  font-size: calc(0.8rem + 2px);
  white-space: nowrap;
}

.inventory-list-actions {
  white-space: nowrap;
}

.inventory-list-actions .inventory-list-btn + .inventory-list-btn {
  margin-left: 6px;
}

.inventory-empty-hint {
  margin: 24px 16px;
  text-align: center;
  color: #9ca3af;
  font-size: 0.92rem;
}

.inventory-loading-cell {
  text-align: center;
  color: #6b7280;
  padding: 28px 12px !important;
}

.settings-work-panel[data-settings-panel="reports"] {
  background: #f8fafc;
}

.settings-work-panel[data-settings-panel="reports"] .settings-work-panel-title {
  font-size: 16px;
}

.settings-work-panel[data-settings-panel="reports"] .reports-settings-body {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.settings-work-panel[data-settings-panel="reports"] .sales-report-layout {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.settings-work-panel[data-settings-panel="reports"] .sales-report-nav-item {
  justify-content: center;
  width: auto;
  white-space: nowrap;
}

.settings-work-panel[data-settings-panel="reports"] .sales-report-main {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.settings-work-panel[data-settings-panel="reports"] .report-panel {
  padding: 16px 24px 24px;
}

.settings-work-panel[data-settings-panel="reports"] .reports-panel-toolbar .btn-primary,
.settings-work-panel[data-settings-panel="reports"] .reports-panel-toolbar .btn-ghost {
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 14px;
  line-height: 1;
}

.settings-work-panel[data-settings-panel="reports"] .reports-panel-toolbar .btn-lookup,
.settings-work-panel[data-settings-panel="reports"] .reports-panel-toolbar .btn-refresh,
.settings-work-panel[data-settings-panel="reports"] .reports-panel-toolbar .btn-action-close {
  gap: 0.3rem;
}

.settings-work-panel[data-settings-panel="reports"] .reports-excel-btn {
  font-weight: 700;
}

.settings-work-panel[data-settings-panel="reports"] .sales-report-nav-item,
.settings-work-panel[data-settings-panel="reports"] .product-analysis-tab,
.settings-work-panel[data-settings-panel="reports"] .product-analysis-sort,
.settings-work-panel[data-settings-panel="reports"] .product-analysis-query-btn,
.settings-work-panel[data-settings-panel="reports"] .btn-lookup-action {
  box-sizing: border-box;
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.settings-work-panel[data-settings-panel="reports"] .product-analysis-date-input,
.settings-work-panel[data-settings-panel="reports"] .sales-detail-date-input {
  box-sizing: border-box;
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 10px;
  font-size: 0.82rem;
}

.sales-report-layout {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #f8fafc;
}

.sales-report-top-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 20px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.sales-report-top-nav-label {
  font-size: 0.88rem;
  font-weight: 800;
  color: #111827;
  white-space: nowrap;
}

.sales-report-sidebar {
  display: none;
}

.sales-report-sidebar-title {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 800;
  color: #111827;
}

.sales-report-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.sales-report-main {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
}

.sales-report-nav-item {
  text-align: center;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font-size: 0.88rem;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
}

.sales-report-nav-item:hover {
  background: var(--bg);
}

.sales-report-nav-item.active {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #005df5;
}

.sales-report-excel-btn {
  margin-top: auto;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: #005df5;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.sales-report-feedback-btn {
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  font-size: 0.85rem;
  color: #6b7280;
  cursor: pointer;
}

.sales-report-mobile-hint {
  margin: 0;
  font-size: 0.75rem;
  color: #9ca3af;
  text-align: center;
}

.sales-report-main {
  min-height: 0;
  overflow: auto;
}

.report-panel {
  padding: 20px 24px 32px;
}

.report-panel.hidden {
  display: none !important;
}

.product-analysis-head {
  margin-bottom: 12px;
}

.product-analysis-top-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

.product-analysis-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.product-analysis-stats {
  display: flex;
  gap: 28px;
  flex-shrink: 0;
}

.product-analysis-chart-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex-shrink: 0;
}

.product-analysis-stat-val {
  font-size: 1.15rem;
  font-weight: 800;
  color: #111827;
}

.product-analysis-donut {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  flex-shrink: 0;
}

.product-analysis-date-range {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.product-analysis-date-sep {
  color: #6b7280;
  font-weight: 600;
}

.product-analysis-date-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.product-analysis-date-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: #374151;
  white-space: nowrap;
}

.product-analysis-date-input {
  min-width: 148px;
}

.product-analysis-filters .btn-lookup-action {
  gap: 0.3rem;
}

.product-analysis-asof {
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: #9ca3af;
  width: 100%;
}

.product-analysis-stat-label {
  display: block;
  font-size: 0.82rem;
  color: #6b7280;
  margin-bottom: 2px;
}

.product-analysis-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.product-analysis-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 160px;
}

.product-analysis-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.82rem;
}

.product-analysis-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.product-analysis-legend-name {
  flex: 1;
  color: #374151;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
}

.product-analysis-legend-pct {
  font-weight: 700;
  color: #111827;
}

.product-analysis-tabs {
  display: flex;
  gap: 4px;
}

.product-analysis-tab {
  padding: 8px 16px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-size: 0.9rem;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
}

.product-analysis-tab.active {
  color: #005df5;
  border-bottom-color: #005df5;
}

.product-analysis-sort {
  min-width: 140px;
}

.product-analysis-table-wrap {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

.product-analysis-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.product-analysis-table th,
.product-analysis-table td {
  box-sizing: border-box;
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 12px;
  text-align: left;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
  line-height: 1.2;
}

.product-analysis-table td.num,
.product-analysis-table th.num,
.product-analysis-table tfoot td.num {
  text-align: right;
  white-space: nowrap;
}

.product-analysis-table th.num {
  font-variant-numeric: tabular-nums;
}

.product-analysis-table td.num {
  font-variant-numeric: tabular-nums;
}

.product-analysis-table th {
  background: #f9fafb;
  font-weight: 700;
  color: #374151;
}

.product-analysis-table tfoot td {
  font-weight: 800;
  background: #f9fafb;
}

.product-analysis-name {
  font-weight: 600;
}

.product-analysis-empty-cell {
  text-align: center;
  color: #9ca3af;
  padding: 24px !important;
}

.report-panel-detail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  overflow: auto;
}

.sales-detail-head {
  margin-bottom: 14px;
}

.sales-detail-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.sales-detail-date-range {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sales-detail-date-sep {
  color: #6b7280;
  font-weight: 600;
}

.sales-detail-date-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.sales-detail-date-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: #374151;
  white-space: nowrap;
}

.sales-detail-date-input {
  min-width: 148px;
}

.sales-detail-filters .btn-lookup-action {
  gap: 0.3rem;
}

.sales-detail-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sales-detail-card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  padding: 14px 16px;
}

.sales-detail-net-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f3f4f6;
}

.sales-detail-net-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #374151;
}

.sales-detail-net-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: #111827;
}

.sales-detail-breakdown {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sales-detail-breakdown > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  min-height: 35px;
  height: 35px;
  padding: 0;
  border-bottom: 1px solid #f9fafb;
  font-size: 0.9rem;
  color: #374151;
}

.sales-detail-breakdown-item {
  flex-direction: column;
  align-items: stretch !important;
  height: auto;
  min-height: 35px;
}

.sales-detail-expand-btn {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  min-height: 35px;
  height: 35px;
  border: none;
  background: transparent;
  padding: 0;
  font-size: 0.9rem;
  color: #374151;
  cursor: pointer;
  text-align: left;
}

.sales-detail-expand-val {
  margin-left: auto;
  margin-right: 8px;
  font-weight: 600;
}

.sales-detail-chevron {
  color: #9ca3af;
  font-size: 0.75rem;
}

.sales-detail-expand-btn.is-open .sales-detail-chevron {
  transform: rotate(180deg);
}

.sales-detail-sub {
  list-style: none;
  margin: 0 0 4px;
  padding: 0 0 0 12px;
  font-size: 0.82rem;
  color: #6b7280;
}

.sales-detail-sub li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  min-height: 35px;
  height: 35px;
  padding: 0;
}

.sales-detail-card-counts,
.sales-detail-card-refund {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.sales-detail-count-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sales-detail-count-row span {
  font-size: 0.82rem;
  color: #6b7280;
}

.sales-detail-count-row strong {
  font-size: 1.1rem;
  font-weight: 800;
  color: #111827;
}

.sales-detail-split-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.sales-detail-card-channel {
  margin-top: 12px;
}

.sales-detail-share {
  color: #6b7280;
  font-size: 0.85em;
  margin-left: 4px;
}

.receipt-service-tag {
  display: inline-block;
  font-size: 0.85em;
  color: #6b7280;
  margin-right: 2px;
}

.sales-detail-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.sales-detail-card-head h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
}

.sales-detail-col-hint {
  font-size: 0.75rem;
  color: #9ca3af;
}

.sales-detail-pay-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sales-detail-pay-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #f9fafb;
  font-size: 0.88rem;
}

.sales-detail-pay-item.is-child {
  padding-left: 20px;
}

.sales-detail-pay-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sales-detail-pay-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sales-detail-pay-icon.cash {
  background: #fde047;
}

.sales-detail-pay-icon.card {
  background: #93c5fd;
  border-radius: 4px;
}

.sales-detail-pay-icon.online {
  background: #fbcfe8;
}

.sales-detail-pay-amt {
  font-weight: 700;
  color: #111827;
}

.sales-detail-deposit-body {
  min-height: 80px;
}

.sales-detail-deposit-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  color: #9ca3af;
  font-size: 0.88rem;
}

.sales-detail-deposit-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sales-detail-deposit-list li {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #f9fafb;
  font-size: 0.88rem;
}

@media (max-width: 799px) {
  .sales-detail-split-row {
    grid-template-columns: 1fr;
  }
}

.report-panel-settlement {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  overflow: auto;
}

.settlement-head {
  margin-bottom: 14px;
}

.settlement-mode-tabs {
  display: inline-flex;
  gap: 6px;
  margin-bottom: 10px;
}

.settlement-mode-tab {
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 700;
  font-size: 0.9rem;
}

.settlement-mode-tab.active {
  background: #1e3a5f;
  border-color: #1e3a5f;
  color: #fff;
}

.settlement-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.settlement-date-filters {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.settlement-date-sep {
  color: #6b7280;
  font-weight: 600;
}

.settlement-date-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.settlement-date-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: #374151;
  white-space: nowrap;
}

.settlement-date-input {
  min-width: 148px;
}

.settlement-hint {
  margin: 0;
  font-size: 0.82rem;
  color: #6b7280;
}

.settlement-period-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.settlement-period-summary-item {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
}

.settlement-period-summary-item .label {
  font-size: 0.78rem;
  color: #6b7280;
  font-weight: 600;
}

.settlement-period-summary-item .value {
  font-size: 1.05rem;
  font-weight: 800;
  color: #111827;
  margin-top: 4px;
}

.settlement-period-table-wrap {
  overflow: auto;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
}

.settlement-period-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.settlement-period-table th,
.settlement-period-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f3f4f6;
  text-align: left;
}

.settlement-period-table th.num,
.settlement-period-table td.num {
  text-align: right;
  white-space: nowrap;
}

.settlement-period-table tbody tr {
  cursor: pointer;
}

.settlement-period-table tbody tr:hover {
  background: #f8fafc;
}

.settlement-period-table tbody tr.is-selected {
  background: #eff6ff;
}

.settlement-period-table tfoot td {
  font-weight: 800;
  background: #f9fafb;
}

.settlement-daily-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.settlement-daily-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.settlement-daily-date {
  font-size: 1.05rem;
  font-weight: 800;
  color: #111827;
}

.settlement-daily-status {
  font-size: 0.82rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e5e7eb;
  color: #374151;
}

.settlement-daily-status.is-open {
  background: #dcfce7;
  color: #166534;
}

.settlement-daily-status.is-closed {
  background: #fee2e2;
  color: #991b1b;
}

.settlement-summary-cards {
  margin-bottom: 14px;
}

.settlement-section {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.settlement-section h3 {
  margin: 0 0 10px;
  font-size: 0.95rem;
}

.settlement-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.settlement-table th,
.settlement-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #f3f4f6;
}

.settlement-table th.num,
.settlement-table td.num {
  text-align: right;
}

.settlement-cash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 0;
}

.settlement-cash-grid > div {
  border: 1px solid #f3f4f6;
  border-radius: 8px;
  padding: 8px 10px;
}

.settlement-cash-grid dt {
  font-size: 0.78rem;
  color: #6b7280;
  font-weight: 600;
}

.settlement-cash-grid dd {
  margin: 4px 0 0;
  font-size: 1rem;
  font-weight: 800;
  color: #111827;
}

.settlement-empty-cell {
  text-align: center;
  color: #9ca3af;
  padding: 24px !important;
}

.report-panel-calendar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.sales-calendar-head {
  margin-bottom: 12px;
}

.sales-calendar-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.sales-calendar-range {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sales-calendar-month-label {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #111827;
  min-width: 7.5rem;
  text-align: center;
}

.sales-calendar-nav-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  font-size: 1.1rem;
  color: #6b7280;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.sales-calendar-nav-btn:hover {
  color: #111827;
}

.sales-calendar-total-line {
  margin: 0 0 0 12px;
  font-size: 0.92rem;
  color: #374151;
  white-space: nowrap;
}

.sales-calendar-total-line strong {
  color: #111827;
  font-weight: 800;
}

.sales-calendar-metric-toggle {
  display: flex;
  gap: 14px;
  font-size: 0.86rem;
  color: #374151;
}

.sales-calendar-metric-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-weight: 500;
}

.sales-calendar-metric-opt input {
  accent-color: #005df5;
}

.sales-calendar-grid {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  background: #fff;
}

.sales-calendar-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.8rem;
}

.sales-calendar-table th,
.sales-calendar-table td {
  border: 1px solid #ececec;
  vertical-align: top;
  padding: 0;
}

.sales-calendar-table th {
  background: #f7f7f7;
  font-weight: 600;
  color: #6b7280;
  padding: 10px 4px;
  text-align: center;
}

.sales-calendar-table th.sun {
  color: #dc2626;
}

.sales-calendar-table th.sales-calendar-week-col {
  background: #f3f4f6;
  color: #6b7280;
}

.sales-calendar-week-total {
  background: #fafafa;
  vertical-align: middle;
  text-align: center;
}

.sales-calendar-week-total-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  padding: 10px 4px;
  min-height: 76px;
}

.sales-calendar-week-label {
  font-size: 0.78rem;
  color: #6b7280;
  font-weight: 600;
}

.sales-calendar-week-total-amt {
  color: #dc2626;
  font-weight: 800;
  font-size: 0.88rem;
}

.sales-calendar-week-total-amt.is-zero {
  color: #9ca3af;
  font-weight: 600;
}

.sales-calendar-day {
  min-height: 76px;
  height: 76px;
  background: #fff;
}

.sales-calendar-day.other-month {
  background: #fff;
}

.sales-calendar-day-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 76px;
  padding: 8px 6px 10px;
  box-sizing: border-box;
}

.sales-calendar-day-top {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.sales-calendar-day-num {
  font-size: 0.82rem;
  font-weight: 600;
  color: #374151;
  line-height: 1.2;
}

.sales-calendar-day.sun .sales-calendar-day-num {
  color: #dc2626;
}

.sales-calendar-day.other-month .sales-calendar-day-num {
  color: #d1d5db;
  font-weight: 500;
}

.sales-calendar-day-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #005df5;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
}

.sales-calendar-day-peak {
  font-size: 0.72rem;
  font-weight: 700;
  color: #dc2626;
  line-height: 1;
}

.sales-calendar-day-amt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  padding-top: 4px;
}

.sales-calendar-day-amt.is-zero {
  color: #9ca3af;
  font-weight: 500;
}

.sales-calendar-day-amt.has-value {
  color: #dc2626;
}

.sales-calendar-day-amt.is-peak {
  color: #dc2626;
  font-weight: 800;
  font-size: 0.95rem;
}

.sales-calendar-day.other-month .sales-calendar-day-amt {
  visibility: hidden;
}

.report-panel-status {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  overflow: auto;
}

.sales-status-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.sales-status-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
}

.sales-status-subtitle {
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: #9ca3af;
}

.sales-status-head-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sales-status-print-btn {
  padding: 8px 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  font-size: 0.85rem;
  cursor: pointer;
}

.sales-status-date-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sales-status-nav-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.sales-status-date-label {
  font-weight: 700;
  min-width: 9rem;
  text-align: center;
}

.sales-status-period-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #e5e7eb;
}

.sales-status-period-tab {
  padding: 10px 18px;
  border: none;
  background: transparent;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}

.sales-status-period-tab.active {
  color: #005df5;
  border-bottom-color: #005df5;
}

.sales-status-banner {
  margin: 0;
  padding: 12px 14px;
  background: #eff6ff;
  border-radius: 10px;
  color: #1e40af;
  font-size: 0.9rem;
}

.sales-status-metrics-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
}

.sales-status-metrics-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.sales-status-metric-label {
  display: block;
  font-size: 0.82rem;
  color: #6b7280;
  margin-bottom: 4px;
}

.sales-status-metric-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: #111827;
}

.sales-status-metric-delta {
  display: block;
  margin-top: 4px;
  font-size: 0.82rem;
  color: #dc2626;
}

.sales-status-metrics-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 100px;
  padding-left: 16px;
  border-left: 1px solid #f0f0f0;
}

.sales-status-side-item span {
  display: block;
  font-size: 0.78rem;
  color: #9ca3af;
}

.sales-status-side-item strong {
  font-size: 0.95rem;
}

.sales-status-chart-section {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px;
  background: #fff;
}

.sales-status-chart-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.sales-status-chart-tabs {
  display: flex;
  gap: 4px;
}

.sales-status-chart-tab {
  padding: 6px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 0.85rem;
}

.sales-status-chart-tab.active {
  background: #005df5;
  color: #fff;
  border-color: #005df5;
}

.sales-status-chart-tab.is-static {
  cursor: default;
  pointer-events: none;
}

.sales-status-chart-tab.is-static:disabled {
  opacity: 1;
}

.sales-status-chart-unit {
  font-size: 0.75rem;
  color: #9ca3af;
}

.sales-status-chart-legend {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
}

.sales-status-legend-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sales-status-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.sales-status-legend-muted {
  color: #9ca3af;
  font-size: 0.72rem;
}

.sales-status-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  min-height: 160px;
  padding-top: 8px;
  overflow-x: auto;
}

.sales-status-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 38px;
  flex-shrink: 0;
}

.sales-status-bar-group {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  width: 100%;
  max-width: 48px;
  min-height: 2px;
}

.sales-status-bar {
  width: 100%;
  max-width: 48px;
  background: #bfdbfe;
  border-radius: 4px 4px 0 0;
  min-height: 2px;
  transition: height 0.2s;
}

.sales-status-bar.is-current,
.sales-status-bar.is-anchor {
  background: #005df5;
}

.sales-status-bar-group .sales-status-bar {
  flex: 1;
  max-width: 22px;
}

.sales-status-bar.is-compare {
  background: #bfdbfe;
}

.sales-status-chart-tab.hidden {
  display: none;
}

.sales-status-bar-label {
  font-size: 0.72rem;
  color: #6b7280;
  white-space: pre-line;
  text-align: center;
  line-height: 1.25;
}

.sales-status-widgets-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.sales-status-widget {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px;
  background: #fff;
}

.sales-status-widget-title {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 800;
}

.sales-status-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.sales-status-widget-head .sales-status-widget-title {
  margin: 0;
}

.sales-status-more-btn {
  border: none;
  background: transparent;
  color: #6b7280;
  font-size: 0.82rem;
  cursor: pointer;
}

.sales-status-type-donut {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 0 auto 10px;
  background: conic-gradient(#005df5 0deg, #005df5 360deg);
}

.sales-status-type-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
}

.sales-status-type-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.sales-status-type-swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: #005df5;
}

.sales-status-grade-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sales-status-grade-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f3f4f6;
  font-size: 0.88rem;
}

.sales-status-grade-item:last-child {
  border-bottom: none;
}

.sales-status-grade-bar-wrap {
  flex: 1;
  margin: 0 12px;
  height: 8px;
  background: #f3f4f6;
  border-radius: 4px;
  overflow: hidden;
}

.sales-status-grade-bar {
  height: 100%;
  background: #93c5fd;
  border-radius: 4px;
}

.sales-status-ranking {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px;
  background: #fff;
}

.sales-status-ranking-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.sales-status-rank-tab {
  padding: 6px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.sales-status-rank-tab.active {
  border-color: #005df5;
  color: #005df5;
  font-weight: 700;
}

.sales-status-ranking-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.sales-status-ranking-table th,
.sales-status-ranking-table td {
  padding: 10px 8px;
  border-bottom: 1px solid #f0f0f0;
  text-align: left;
}

.sales-status-ranking-table th {
  background: #f9fafb;
  font-weight: 700;
  color: #6b7280;
}

.sales-status-ranking-table th.num,
.sales-status-ranking-table td.num {
  text-align: right;
}

.sales-status-rank-tab:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.sales-status-rank-delta {
  display: block;
  font-size: 0.75rem;
  color: #dc2626;
}

.sales-status-empty-cell {
  text-align: center;
  color: #9ca3af;
  padding: 20px !important;
}

#view-orders.active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  min-height: 0;
}

#view-cashmove.active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  min-height: 0;
}

#view-cashmove.view-cashmove-brand {
  background: #f0f2f5;
}

.cash-move-page {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

.cash-move-page-header {
  flex-shrink: 0;
  background: var(--primary);
  color: #fff;
  padding: 0.85rem 1.25rem;
  box-shadow: 0 4px 14px rgba(0, 93, 245, 0.18);
}

.cash-move-page-header-row {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 0.65rem 1rem;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}

.cash-move-page-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  flex-shrink: 0;
}

.cash-move-page-subtitle {
  font-size: 0.88rem;
  opacity: 0.92;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cash-move-page-date {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  flex-shrink: 0;
}

.cash-move-page-date-label {
  font-size: 0.78rem;
  opacity: 0.82;
}

#cashMoveBusinessDate {
  font-size: 0.92rem;
  font-weight: 700;
}

.payhist-layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(300px, 380px) 1fr;
  background: var(--bg);
}

.payhist-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #fff;
  border-right: 1px solid #e5e7eb;
}

.payhist-sidebar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 14px 10px;
  border-bottom: 1px solid #f0f0f0;
}

.payhist-sidebar-tools {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  flex-shrink: 0;
}

.payhist-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 14px 10px;
  border-bottom: 1px solid #f0f0f0;
}

.payhist-mode-tab {
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
  font-size: 0.88rem;
  font-weight: 700;
  color: #6b7280;
  cursor: pointer;
}

.payhist-mode-tab.active {
  border-color: #005df5;
  background: #eff6ff;
  color: #0050d4;
}

.payhist-item-row--cancelled .payhist-item-name strong {
  color: #9ca3af;
  text-decoration: line-through;
}

.payhist-item-cancel-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #fee2e2;
  color: #dc2626;
  font-size: 0.72rem;
  font-weight: 700;
  vertical-align: middle;
  text-decoration: none;
}

.payhist-item-price.negative {
  color: #dc2626;
}

.payhist-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  color: #111827;
}

.payhist-subtitle {
  margin: 2px 0 0;
  font-size: 0.82rem;
  color: #9ca3af;
}

.payhist-card-btn {
  flex-shrink: 0;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
}

.payhist-search-wrap {
  padding: 8px 14px;
}

.payhist-search-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.88rem;
}

.payhist-date-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 12px;
  border-bottom: 1px solid #f0f0f0;
}

.payhist-date-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.payhist-date-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.88rem;
  background: #f9fafb;
}

.payhist-date-text {
  font-size: 0.8rem;
  font-weight: 600;
  color: #6b7280;
}

.payhist-detail-search-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  border: none;
  border-radius: 8px;
  background: #005df5;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}

.payhist-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
}

.payhist-list-empty {
  padding: 24px 12px;
  text-align: center;
  color: #9ca3af;
  font-size: 0.9rem;
}

.payhist-list-item {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.payhist-list-item:hover {
  border-color: #93c5fd;
  background: #f8fafc;
}

.payhist-list-item.active {
  border-color: #3b82f6;
  background: #eff6ff;
  box-shadow: inset 0 0 0 1px #3b82f6;
}

.payhist-list-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.payhist-list-method {
  font-size: 0.95rem;
  font-weight: 700;
  color: #111827;
}

.payhist-list-amount {
  flex: 1;
  font-size: 1.05rem;
  font-weight: 800;
  color: #111827;
  text-align: right;
}

.payhist-list-status {
  font-size: 0.78rem;
  font-weight: 700;
  color: #6b7280;
}

.payhist-list-status.done {
  color: #005df5;
}

.payhist-list-status.cancelled {
  color: #b42318;
}

.payhist-list-amount.negative {
  color: #b42318;
}

.payhist-payment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.payhist-payment-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 0.15rem 0.75rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  background: #f6f7f9;
  font-size: 0.9rem;
}

.payhist-payment-row--selectable {
  cursor: pointer;
  border: 2px solid transparent;
}

.payhist-payment-row--selectable:hover {
  background: #eef2f7;
}

.payhist-payment-row--selectable.active {
  border-color: #005df5;
  background: #eff6ff;
}

.payhist-item-seat {
  display: inline-block;
  margin-right: 0.35rem;
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  background: #dbeafe;
  color: #0050d4;
  font-size: 0.75rem;
  font-weight: 700;
  vertical-align: middle;
}

.payhist-payment-row--voided {
  opacity: 0.65;
  text-decoration: line-through;
}

.payhist-payment-row.reversal .payhist-payment-amount {
  color: #b42318;
}

.payhist-payment-label {
  grid-column: 1;
}

.payhist-payment-amount {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

.payhist-payment-time {
  grid-column: 1;
  font-size: 0.78rem;
  color: #6b7280;
}

.toast-employee-select {
  max-width: 5.8rem;
  min-width: 4.6rem;
  font-size: 0.66rem;
  padding: 0.15rem 0.25rem;
  min-height: 26px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  background: #fff;
}

.view-cashier.tip-policy-direct .toast-employee-select {
  border-color: #005df5;
}

.view-cashier.tip-policy-pooled .toast-employee-select {
  border-color: #d1d5db;
}

.toast-employee-select.interim-operator-prompt {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25);
  outline: none;
}

.staff-tip-pooled-total {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: #0050d4;
}

.staff-shift-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #065f46;
  background: #d1fae5;
}

.staff-inactive-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  background: var(--bg);
}

.staff-list-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.staff-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.staff-list-table {
  width: max-content;
  min-width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  font-size: 0.84rem;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.staff-list-table th,
.staff-list-table td {
  padding: 0.5rem 0.65rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.staff-list-table th.num,
.staff-list-table td.num {
  text-align: right;
}

.staff-list-table thead th {
  background: #f1f5f9;
  font-size: 0.76rem;
  color: #475569;
  font-weight: 600;
}

.staff-list-table tbody tr {
  line-height: 1.25;
}

.staff-list-table tbody tr:last-child td {
  border-bottom: none;
}

.staff-list-row:hover {
  background: #f8fbff;
}

.staff-row-active-pos {
  background: #eff6ff;
}

.staff-name-cell strong {
  font-weight: 700;
}

.staff-code,
.staff-login-id {
  font-size: 0.82rem;
  color: #475569;
  background: #f1f5f9;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}

.staff-cred-set {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #047857;
  background: #d1fae5;
}

.staff-cred-empty {
  color: #94a3b8;
}

.staff-role-badge {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  max-width: none;
}

.staff-role-admin {
  background: #ede9fe;
  color: #5b21b6;
}

.staff-role-manager {
  background: #dbeafe;
  color: #0050d4;
}

.staff-role-cashier {
  background: #d1fae5;
  color: #047857;
}

.staff-role-part_timer {
  background: #fef3c7;
  color: #b45309;
}

.staff-status-cell {
  white-space: nowrap;
}

.staff-status-idle {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  background: #f1f5f9;
}

.staff-pos-badge {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #0050d4;
  background: #dbeafe;
}

.staff-actions-cell {
  width: 1%;
}

.staff-row-actions {
  display: inline-flex;
  gap: 4px;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
}

.staff-row-actions .touch-sm {
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 10px;
  font-size: 0.76rem;
  line-height: 1;
  white-space: nowrap;
}

.settings-work-panel[data-settings-panel="staff"] .staff-panel-toolbar .btn-primary,
.settings-work-panel[data-settings-panel="staff"] .staff-panel-toolbar .btn-ghost {
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 14px;
  line-height: 1;
}

.settings-work-panel[data-settings-panel="staff"] .staff-row-actions .btn-primary,
.settings-work-panel[data-settings-panel="staff"] .staff-row-actions .btn-ghost {
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 10px;
  line-height: 1;
}

.settings-work-panel[data-settings-panel="staff"] .staff-settings-body {
  padding: 0;
}

.settings-work-panel[data-settings-panel="members"] .members-settings-body {
  padding: 12px 16px 16px;
  overflow: auto;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.settings-work-panel[data-settings-panel="members"] .member-panel-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.settings-work-panel[data-settings-panel="members"] .member-panel-toolbar .btn-primary,
.settings-work-panel[data-settings-panel="members"] .member-panel-toolbar .btn-ghost {
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 14px;
  line-height: 1;
}

.settings-work-panel[data-settings-panel="members"] .crm-filter-field .touch-input,
.settings-work-panel[data-settings-panel="members"] .crm-filter-bar .btn-primary,
.settings-work-panel[data-settings-panel="members"] .crm-filter-bar .btn-ghost,
.settings-work-panel[data-settings-panel="members"] .crm-pagination .btn-ghost,
.settings-work-panel[data-settings-panel="members"] .crm-batch-bar .btn-primary,
.settings-work-panel[data-settings-panel="members"] .crm-batch-bar .btn-ghost,
.settings-work-panel[data-settings-panel="members"] .crm-member-table .btn-ghost {
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 10px;
  line-height: 1;
  box-sizing: border-box;
}

.settings-work-panel[data-settings-panel="members"] .crm-filter-bar .btn-primary,
.settings-work-panel[data-settings-panel="members"] .crm-filter-bar .btn-ghost,
.settings-work-panel[data-settings-panel="members"] .crm-pagination .btn-ghost,
.settings-work-panel[data-settings-panel="members"] .crm-batch-bar .btn-primary,
.settings-work-panel[data-settings-panel="members"] .crm-batch-bar .btn-ghost {
  padding: 0 14px;
}

.settings-work-panel[data-settings-panel="admin"] .admin-settings-body {
  padding: 12px 16px 16px;
  overflow: auto;
  min-height: 0;
  flex: 1;
}

.settings-work-panel[data-settings-panel="admin"] .admin-panel-toolbar .btn-ghost,
.settings-work-panel[data-settings-panel="admin"] .admin-card .btn-ghost,
.settings-work-panel[data-settings-panel="admin"] .admin-card .btn-danger {
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 14px;
  line-height: 1;
  box-sizing: border-box;
}

.settings-work-panel[data-settings-panel="staff"] .staff-list-panel {
  margin: 0;
}

.staff-empty-cell {
  text-align: center;
  color: var(--text-muted);
  padding: 1.5rem;
}

.staff-list-table.staff-hide-tip-col .staff-tip-col {
  display: none;
}

.staff-row-inactive {
  opacity: 0.72;
}

.staff-row-inactive .staff-assign-btn:disabled,
.staff-row-inactive .staff-clock-btn:disabled {
  opacity: 0.45;
  pointer-events: none;
}

@media (max-width: 799px) {
  .staff-list-table {
    font-size: 0.8rem;
  }

  .staff-list-table th,
  .staff-list-table td {
    padding: 0.42rem 0.5rem;
  }

  .staff-row-actions .touch-sm {
    padding: 0.28rem 0.45rem;
    font-size: 0.72rem;
  }
}

.supervisor-select-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.staff-tip-summary {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
}

.staff-tip-title {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}

.staff-tip-list {
  margin: 0;
  padding-left: 1.1rem;
}

.staff-tip-list li {
  margin: 0.2rem 0;
}

/* ── X-Report (중간 점검) ── */
#view-xreport.view-xreport-brand {
  background: linear-gradient(180deg, #eff6ff 0%, #f8fafc 120px);
  padding: 0;
  overflow-x: auto;
}

#view-zreport.view-zreport-brand {
  background: linear-gradient(180deg, #fff7ed 0%, #fef2f2 140px, #f8fafc 280px);
  padding: 0;
}

.zreport-layout {
  max-width: 920px;
  margin: 0 auto;
  padding: 12px 14px 24px;
}

.zreport-header {
  background: linear-gradient(135deg, #c2410c 0%, #dc2626 100%);
  color: #fff;
  border-radius: 14px;
  padding: 1rem 1.15rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 16px rgba(220, 38, 38, 0.28);
}

.zreport-header-top {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  margin-bottom: 0.45rem;
}

.zreport-title {
  margin: 0;
  font-size: 1.45rem;
  letter-spacing: 0.06em;
}

.zreport-subtitle {
  font-size: 0.88rem;
  opacity: 0.92;
}

.zreport-warning {
  margin: 0 0 0.75rem;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  font-size: 0.84rem;
  font-weight: 600;
}

.zreport-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 1rem;
  margin: 0;
}

.zreport-meta-grid dt {
  margin: 0;
  font-size: 0.72rem;
  opacity: 0.85;
}

.zreport-meta-grid dd {
  margin: 0.1rem 0 0;
  font-size: 0.92rem;
  font-weight: 600;
}

.zreport-section {
  background: #fff;
  border: 1px solid #fecaca;
  border-radius: 12px;
  padding: 0.9rem 1rem 1rem;
  margin-bottom: 0.85rem;
  box-shadow: 0 1px 2px rgba(127, 29, 29, 0.06);
}

.zreport-section-title {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
  color: #b45309;
}

.zreport-section-hint {
  margin: -0.35rem 0 0.65rem;
}

.zreport-cash-count-body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.25rem;
}

.zreport-cash-count-fields {
  flex: 1 1 22rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.zreport-cash-keypad {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 3.1rem);
  gap: 0.35rem;
  align-content: start;
}

.zreport-key {
  height: 2.9rem;
  border: 1px solid #e5e7eb;
  border-radius: 9px;
  background: #fff;
  color: #1f2937;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background 0.12s, border-color 0.12s, transform 0.05s;
}

.zreport-key:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.zreport-key:active {
  transform: scale(0.96);
  background: #f3f4f6;
}

.zreport-key-clear {
  color: #dc2626;
  border-color: #fecaca;
  background: #fef2f2;
}

.zreport-key-clear:hover {
  background: #fee2e2;
}

.zreport-key-back {
  color: #6b7280;
}

.zreport-denom-grid {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  max-width: 26rem;
}

.zreport-denom-row {
  display: grid;
  grid-template-columns: minmax(4.5rem, auto) 1.25rem 7.75rem minmax(8.5rem, max-content);
  align-items: center;
  column-gap: 0.65rem;
  row-gap: 0.35rem;
  width: 100%;
  max-width: 26rem;
  font-size: 0.88rem;
}

.zreport-denom-label {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.zreport-denom-mult {
  text-align: center;
  color: var(--text-muted, #6b7280);
}

.zreport-denom-input {
  text-align: right;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-variant-numeric: tabular-nums;
}

.zreport-denom-input.zreport-denom-qty {
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 36px;
  padding: 4px 8px;
  font-size: 0.9rem;
  line-height: 1.2;
}

.zreport-denom-input.zreport-denom-qty::-webkit-outer-spin-button,
.zreport-denom-input.zreport-denom-qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.zreport-denom-subtotal {
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
  color: #374151;
  font-variant-numeric: tabular-nums;
  padding-left: 0.25rem;
  min-width: 8.5rem;
}

.modal-content.business-open-modal {
  overflow: hidden;
  max-height: calc(100vh - 24px);
}

.business-open-modal {
  width: min(400px, 94vw);
  max-height: calc(100vh - 24px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.business-open-modal .modal-header {
  padding: 10px 12px;
  flex-shrink: 0;
}

.business-open-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

.business-open-header h3 {
  margin: 0;
  font-size: 1.05rem;
  white-space: nowrap;
}

.business-open-datetime {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}

.business-open-modal .btn-close {
  min-width: 40px;
  min-height: 40px;
  font-size: 1.4rem;
}

.business-open-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem 12px 12px;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

.business-open-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25rem 0.5rem;
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.business-open-meta-row {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  font-size: 0.72rem;
  min-width: 0;
}

.business-open-meta-row strong {
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.business-open-meta-row .label {
  color: var(--text-muted);
}

.business-open-date-input {
  width: 100%;
  min-width: 0;
  padding: 4px 6px;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  color: #111827;
}

.business-open-meta-row-date {
  min-width: 0;
}

.business-open-prefill {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.25;
  flex-shrink: 0;
}

.business-open-amount-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0.1rem 0 0;
  flex-shrink: 0;
}

.business-open-amount-display {
  font-size: 1.45rem;
  font-weight: 700;
  text-align: right;
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #1e3a8a;
  min-height: 44px;
  flex-shrink: 0;
}

.business-open-numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  flex: 1;
  min-height: 0;
  align-content: start;
}

.business-open-numpad .member-numpad-key {
  min-height: 0;
  height: clamp(36px, 7.5vh, 48px);
  font-size: 1.05rem;
  padding: 0;
}

.business-open-actions {
  display: grid;
  grid-template-columns: 1fr 0.85fr 1.15fr;
  gap: 0.35rem;
  flex-shrink: 0;
  padding-top: 0.15rem;
}

.business-open-actions .touch {
  min-height: 42px;
  padding: 0.35rem 0.4rem;
  font-size: 0.82rem;
}

.business-open-actions .btn-primary {
  min-width: 0;
}

.zreport-coin-row {
  display: grid;
  grid-template-columns: minmax(4.5rem, auto) 1.25rem 7.75rem minmax(8.5rem, max-content);
  align-items: center;
  column-gap: 0.65rem;
  row-gap: 0.35rem;
  width: 100%;
  max-width: 26rem;
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px dashed #e5e7eb;
  font-size: 0.88rem;
}

.zreport-coin-row > span:first-child {
  grid-column: 1 / 3;
  text-align: left;
}

.zreport-coin-row .zreport-denom-input {
  grid-column: 3;
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 36px;
  padding: 4px 8px;
  font-size: 0.9rem;
}

.zreport-actual-cash-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.75rem;
  padding: 0.7rem 0.8rem;
  border-radius: 10px;
  background: #fff7ed;
  font-weight: 600;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.zreport-actual-cash-row strong {
  font-size: clamp(0.95rem, 2.5vw, 1.2rem);
  color: #c2410c;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.zreport-system-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin-bottom: 0.75rem;
}

.zreport-system-card {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 0.6rem 0.7rem;
}

.zreport-system-card .label {
  font-size: 0.74rem;
  color: #92400e;
}

.zreport-system-card .value {
  font-size: 1.05rem;
  font-weight: 800;
  color: #78350f;
}

.zreport-payment-breakdown {
  font-size: 0.88rem;
  line-height: 1.65;
  color: #374151;
}

.zreport-payment-breakdown li {
  list-style: none;
  padding: 0.15rem 0;
  border-bottom: 1px dashed #f3f4f6;
}

.zreport-variance-grid {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.zreport-variance-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
}

.zreport-expected-detail {
  margin: 0 0 0.25rem;
}

.zreport-variance-box {
  margin-top: 0.5rem;
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
}

.zreport-variance-box.is-balanced {
  background: #ecfdf5;
  border: 1px solid #6ee7b7;
  color: #047857;
}

.zreport-variance-box.is-short {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #b91c1c;
}

.zreport-variance-box.is-over {
  background: #eff6ff;
  border: 1px solid #93c5fd;
  color: #0050d4;
}

.zreport-staff-tip-list {
  margin: 0;
  padding-left: 1.1rem;
}

.zreport-footer {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 0 0.25rem;
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, transparent, #fff7ed 40%);
}

.zreport-footer > button {
  flex: 0 0 auto;
  width: auto;
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 12px;
  font-size: 0.82rem;
  line-height: 1;
  white-space: nowrap;
}

.zreport-close-main-btn {
  min-width: 10rem;
  font-weight: 700;
}

.view-zreport-brand.is-day-closed .zreport-cash-count-section input,
.view-zreport-brand.is-day-closed .zreport-cash-keypad .zreport-key,
.view-zreport-brand.is-day-closed .zreport-close-main-btn {
  pointer-events: none;
  opacity: 0.55;
}

.zclose-modal {
  max-width: 420px;
  border: 2px solid #f87171;
}

.zclose-modal-header {
  background: #fef2f2;
}

.zclose-warning-text {
  margin: 0 0 1rem;
  line-height: 1.5;
  color: #7f1d1d;
}

.zclose-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.zclose-hold-btn {
  position: relative;
  width: 100%;
  min-height: 3rem;
  border: none;
  border-radius: 10px;
  background: #dc2626;
  color: #fff;
  font-weight: 700;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  touch-action: none;
}

.zclose-hold-label {
  position: relative;
  z-index: 1;
}

.zclose-hold-progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: #991b1b;
  transition: width 0.05s linear;
  pointer-events: none;
}

.unsettled-tables-modal {
  max-width: 440px;
  border: 2px solid #f59e0b;
}

.unsettled-tables-modal .modal-header {
  background: #fffbeb;
}

.unsettled-tables-lead {
  margin: 0 0 12px;
  color: #92400e;
  font-size: 0.92rem;
  line-height: 1.45;
}

.unsettled-tables-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(50vh, 320px);
  overflow-y: auto;
}

.unsettled-tables-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #fde68a;
  border-radius: 10px;
  background: #fff;
}

.unsettled-tables-name {
  font-weight: 700;
  color: #0f172a;
}

.unsettled-tables-due {
  font-size: 0.9rem;
  color: #b45309;
  white-space: nowrap;
}

.zreport-print {
  position: fixed;
  left: -9999px;
  top: 0;
}

.zreport-print-paper {
  box-sizing: border-box;
}

.zreport-print-title,
.xreport-print-title {
  margin: 0 0 4px;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.zreport-print-meta,
.xreport-print-meta {
  margin: 0 0 6px;
  font-size: 11px;
  line-height: 1.45;
}

.zprint-rule {
  width: 100%;
  margin: 5px 0;
  height: 0;
  border: none;
  border-top: 1px dashed #000;
  overflow: hidden;
}

.receipt-line.is-total {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
}

.zprint-center {
  text-align: center;
  margin: 4px 0;
  font-size: 9px;
}

.zprint-variance-ok {
  font-weight: 700;
}

.zprint-variance-bad {
  font-weight: 700;
}

.xreport-layout {
  width: 100%;
  max-width: min(98vw, 1280px);
  margin: 0 auto;
  padding: 12px 14px 24px;
  box-sizing: border-box;
}

.xreport-header {
  background: #005df5;
  color: #fff;
  border-radius: 14px;
  padding: 1rem 1.15rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 14px rgba(0, 93, 245, 0.22);
}

.xreport-header-top {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}

.xreport-title {
  margin: 0;
  font-size: 1.45rem;
  letter-spacing: 0.06em;
}

.xreport-subtitle {
  font-size: 0.88rem;
  opacity: 0.92;
}

.xreport-meta-grid {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 0.65rem 1.25rem;
  margin: 0;
  min-width: 0;
}

.xreport-meta-grid div {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0;
  flex-shrink: 0;
}

.xreport-meta-grid dt {
  margin: 0;
  font-size: 0.78rem;
  opacity: 0.82;
  flex-shrink: 0;
  white-space: nowrap;
}

.xreport-meta-grid dd {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
}

.xreport-section {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 0.9rem 1rem 1rem;
  margin-bottom: 0.85rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.xreport-section-title {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  color: #1e40af;
}

.xreport-summary-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 0.5rem;
}

@media (min-width: 800px) {
  .xreport-summary-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.xreport-summary-item {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 0;
}

.xreport-summary-item.is-primary {
  grid-column: span 2;
}

@media (min-width: 800px) {
  .xreport-summary-item.is-primary {
    grid-column: span 1;
  }
}

.xreport-summary-card-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xreport-summary-item.is-primary .xreport-summary-card-label {
  color: #374151;
}

.xreport-summary-card {
  height: 50px;
  min-height: 50px;
  max-height: 50px;
  box-sizing: border-box;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 0 0.65rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
  color: #111827;
}

.xreport-summary-item.is-primary .xreport-summary-card {
  background: #f3f4f6;
  border-color: #e5e7eb;
  color: #111827;
}

.xreport-summary-card .value {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.xreport-summary-card .value.is-negative {
  color: #ef4444;
}

.xreport-summary-card:has(.sub) .value {
  font-size: 1.05rem;
  line-height: 1.05;
}

.xreport-summary-card .sub {
  margin: 0.1rem 0 0;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.05;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.xreport-summary-item.is-primary .xreport-summary-card .sub {
  color: #6b7280;
}

.xreport-table-wrap {
  overflow-x: auto;
}

.xreport-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.xreport-table th,
.xreport-table td {
  padding: 0.5rem 0.55rem;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
}

.xreport-table th.num,
.xreport-table td.num {
  text-align: right;
  white-space: nowrap;
}

.xreport-table tbody tr.is-tip td {
  background: #fffbeb;
}

.xreport-table tfoot td {
  font-weight: 700;
  border-top: 2px solid #cbd5e1;
  background: #f8fafc;
}

.xreport-cash-grid {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.xreport-cash-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0;
  border-bottom: 1px dashed #e5e7eb;
  font-size: 0.88rem;
}

.xreport-cash-row.is-readonly strong {
  font-size: 1rem;
  color: #111827;
}

.xreport-cash-input {
  max-width: 9rem;
  text-align: right;
}

.xreport-cash-total {
  margin-top: 0.35rem;
  padding: 0.65rem 0.75rem;
  border: none;
  border-radius: 10px;
  background: #eff6ff;
  font-weight: 600;
}

.xreport-cash-total strong {
  font-size: 1.15rem;
  color: #0050d4;
}

.xreport-cash-movements {
  list-style: none;
  margin: 0.65rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.xreport-cash-move-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.35rem 0.65rem;
  align-items: center;
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  background: #f9fafb;
  font-size: 0.82rem;
}

.xreport-cash-move-meta {
  grid-column: 1 / -1;
  color: #6b7280;
  font-size: 0.76rem;
}

.xreport-cash-move-type {
  color: #374151;
}

.xreport-cash-move-amount {
  font-size: 0.92rem;
  color: #111827;
}

.xreport-cash-move-item.is-deposit .xreport-cash-move-amount {
  color: #047857;
}

.xreport-cash-move-item.is-withdraw .xreport-cash-move-amount {
  color: #b45309;
}

.xreport-staff-tip-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
}

.xreport-staff-tip-list li {
  margin: 0.25rem 0;
}

.xreport-unsettled-lead {
  margin: 0 0 10px;
}

.xreport-unsettled-table td.num.is-due strong,
.xreport-unsettled-table tfoot td.num.is-due {
  color: #b45309;
}

.xreport-settlement-history-section {
  margin-bottom: 0.85rem;
}

.xreport-settlement-history-section .xreport-shift-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.xreport-settlement-item {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 0.75rem 0.85rem;
  background: #fff;
}

.xreport-footer {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 0 0.25rem;
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, transparent, #f8fafc 35%);
}

.xreport-footer > button {
  flex: 0 0 auto;
  width: auto;
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 12px;
  font-size: 0.82rem;
  line-height: 1;
  white-space: nowrap;
}

.xreport-interim-close-btn {
  font-weight: 800;
  padding-inline: 14px;
}

.xreport-print {
  position: fixed;
  left: -9999px;
  top: 0;
}

.xreport-shift-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0.5rem 0 1rem;
}

.xreport-shift-item {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  padding: 0.9rem 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.xreport-shift-item.is-current {
  border-color: #93c5fd;
  background: #f8fbff;
}

.xreport-shift-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.xreport-shift-title {
  display: block;
  font-size: 1rem;
}

.xreport-shift-meta {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.82rem;
  color: #6b7280;
}

.xreport-shift-badge {
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}

.xreport-shift-badge.done {
  background: #ecfdf5;
  color: #047857;
}

.xreport-shift-badge.current {
  background: #eff6ff;
  color: #0050d4;
}

.xreport-shift-metrics {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem 0.75rem;
}

.xreport-shift-metrics li {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-size: 0.82rem;
}

.xreport-shift-metrics strong {
  font-size: 0.95rem;
}

.xreport-shift-breakdown {
  margin: 0 0 0.5rem;
  padding-left: 1rem;
  color: #4b5563;
  font-size: 0.84rem;
}

.xreport-shift-staff {
  margin: 0.35rem 0 0;
  padding-left: 1rem;
  font-size: 0.84rem;
  color: #374151;
}

.xreport-shift-foot {
  margin-top: 0.25rem;
}

.payhist-list-summary {
  margin: 6px 0 0;
  font-size: 0.82rem;
  color: #6b7280;
  line-height: 1.35;
}

.payhist-list-meta {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: #9ca3af;
}

.payhist-detail {
  min-height: 0;
  overflow-y: auto;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.payhist-detail > .payhist-detail-head {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 16px;
  margin: 0;
  border-bottom: 1px solid #f0f0f0;
}

.payhist-detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}

.payhist-detail-ops {
  display: flex;
  align-items: center;
  gap: 8px;
}

.payhist-detail-ops.hidden {
  display: none;
}

.payhist-detail-amount-wrap.hidden {
  display: none;
}

.payhist-detail-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  color: #9ca3af;
  font-size: 0.95rem;
}

.payhist-detail-panel {
  padding: 0 24px 32px;
}

.payhist-detail-amount {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.02em;
}

.payhist-detail-customer {
  margin: 6px 0 0;
  font-size: 0.88rem;
  color: #9ca3af;
}

.payhist-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  min-height: 35px;
  padding: 0 16px;
  border: none;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
}

.payhist-icon-btn:active:not(:disabled) {
  background: var(--primary-hover);
}

.payhist-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  min-height: 35px;
  padding: 0 16px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  color: #374151;
  cursor: pointer;
  box-sizing: border-box;
}

.payhist-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  height: 35px;
  min-height: 35px;
  padding: 0 14px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  color: #374151;
  cursor: pointer;
  box-sizing: border-box;
  flex-shrink: 0;
}

.payhist-action-cancel {
  border-color: #fecaca;
  background: #fef2f2;
  color: #dc2626;
}

.payhist-detail-body {
  padding-top: 8px;
}

.payhist-section {
  padding: 16px 0;
  border-bottom: 1px solid #f3f4f6;
}

.payhist-section-title {
  margin: 0 0 12px;
  font-size: 1.1rem;
  font-weight: 800;
  color: #111827;
}

.payhist-kv {
  display: grid;
  gap: 8px;
  margin: 0;
}

.payhist-kv > div {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 12px;
  font-size: 0.92rem;
}

.payhist-kv dt {
  margin: 0;
  color: #6b7280;
  font-weight: 500;
}

.payhist-kv dd {
  margin: 0;
  color: #111827;
  font-weight: 600;
}

.payhist-points-link {
  margin-top: 8px;
  padding: 0;
  border: none;
  background: none;
  color: #005df5;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.payhist-totals {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.payhist-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.95rem;
  color: #374151;
}

.payhist-total-row strong {
  font-size: 1.05rem;
  color: #111827;
}

.payhist-total-row--grand strong {
  color: #0050d4;
}

.payhist-total-row--discount strong {
  color: #dc2626;
}

.payhist-total-row--tip strong {
  color: #005df5;
}

.payhist-item-discount {
  margin-top: 4px;
  font-size: 0.82rem;
  color: #dc2626;
}

.payhist-item-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.payhist-item-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
}

.payhist-item-name strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: #111827;
}

.payhist-item-pack {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  background: #dbeafe;
  color: #0050d4;
  font-size: 0.75rem;
  font-weight: 700;
}

.payhist-item-price {
  flex-shrink: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #111827;
}

.payhist-item-empty {
  padding: 12px 0;
  color: #9ca3af;
}

@media (max-width: 799px) {
  .payhist-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .payhist-sidebar {
    max-height: 42vh;
  }
}

/* Side panel */
.side-panel {
  padding: 12px;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  overflow-y: auto;
}

.side-panel h2 {
  margin: 0 0 10px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.table-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.table-btn {
  min-height: 52px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}

.table-btn.active {
  border-color: var(--accent);
  background: rgba(56, 189, 248, 0.15);
}

.order-type {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.chip {
  min-height: var(--touch-min);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.95rem;
}

.chip.active {
  border-color: var(--primary);
  background: rgba(0, 93, 245, 0.2);
  color: var(--text);
  font-weight: 600;
}

.member-quick {
  margin-top: 16px;
}

.member-quick label {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.member-quick input {
  width: 100%;
  margin: 6px 0;
}

.member-badge {
  padding: 8px;
  border-radius: 8px;
  background: rgba(5, 150, 105, 0.15);
  font-size: 0.85rem;
  margin-top: 6px;
}

/* Menu */
.menu-panel {
  position: relative;
  padding: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.menu-toolbar {
  flex-shrink: 0;
}

.category-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
}

.cat-tab {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.cat-tab.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.cat-tab[data-cat-color] {
  padding-left: 12px;
}

.cat-tab[data-cat-color]::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cat-color);
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.cat-tab[data-cat-color].active {
  background: var(--cat-color);
  border-color: var(--cat-color);
  color: #fff;
}

.product-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  align-content: start;
}

.product-card {
  position: relative;
  min-height: 96px;
  padding: 12px 14px;
  border: none;
  border-radius: 12px;
  color: #fff;
  text-align: left;
  cursor: pointer;
  user-select: none;
  transition: transform 0.1s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.product-card.has-image {
  padding: 0;
  overflow: hidden;
  display: block;
}

.product-card-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.06);
}

.product-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card-text {
  position: relative;
  z-index: 1;
}

.product-card.has-image .product-card-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.52) 38%, rgba(0, 0, 0, 0.72) 100%);
}

.product-card.has-image .name,
.product-card.has-image .price {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.product-card:not(.has-image) .product-card-text {
  display: contents;
}

.product-card:active {
  transform: scale(0.96);
}

.product-card.product-sold-out {
  cursor: not-allowed;
}

.product-card.product-sold-out::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.product-card .name {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.3;
  position: relative;
  z-index: 1;
}

.product-card .price {
  color: rgba(255, 255, 255, 0.95);
  font-size: 1.1rem;
  font-weight: 700;
  margin-top: 8px;
  position: relative;
  z-index: 1;
}

.product-sold-out-badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(30, 30, 30, 0.88);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}

.form-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin-bottom: 12px;
}

.form-checkbox-label input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--accent);
}

.settings-product-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.settings-product-swatch {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.settings-sold-out-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--text-muted);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  vertical-align: middle;
}

/* Cart */
.cart-panel {
  display: flex;
  flex-direction: column;
  padding: 12px;
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
}

.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-header h2 {
  margin: 0;
  font-size: 1rem;
}

.cart-list {
  flex: 1;
  list-style: none;
  margin: 10px 0;
  padding: 0;
  overflow-y: auto;
  min-height: 80px;
}

.cart-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.qty-controls button {
  min-width: 40px;
  min-height: 40px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 1.2rem;
  cursor: pointer;
}

.cart-summary {
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  color: var(--text-muted);
}

.summary-row.total {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text);
}

.mini-input {
  width: 80px;
  padding: 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  text-align: right;
}

.cart-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Buttons */
.touch-lg {
  min-height: 56px;
  font-size: 1.05rem;
}

.touch-sm {
  min-height: 40px;
  padding: 0 12px;
}

.btn-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.btn-refresh-icon {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
  color: #005df5;
}

.btn-refresh-icon svg {
  display: block;
}

.btn-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.btn-save-icon {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
  color: #fff;
}

.btn-save-icon svg {
  display: block;
}

.btn-action-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  color: #4a4a4a;
  border: 1px solid #c8c8c8;
  border-radius: var(--radius);
  background: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.btn-action-close-icon {
  font-size: 0.82rem;
  line-height: 1;
}

.btn-action-close:active {
  color: #005df5;
  border-color: #005df5;
  background: #eff6ff;
}

.btn-primary {
  border: none;
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.btn-primary:hover:not(:disabled) {
  background: var(--primary-hover);
}

.btn-success {
  border: none;
  border-radius: var(--radius);
  background: var(--success);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.btn-danger {
  border: none;
  border-radius: var(--radius);
  background: var(--danger);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  min-height: var(--touch-min);
  padding: 0 16px;
}

.btn-ghost {
  min-height: var(--touch-min);
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.btn-ghost.btn-action-close {
  color: #4a4a4a;
  border-color: #c8c8c8;
  background: #fff;
  font-weight: 600;
}

.btn-ghost.btn-action-close:active {
  color: #005df5;
  border-color: #005df5;
  background: #eff6ff;
}

.btn-ghost.btn-refresh.touch,
.btn-ghost.btn-refresh.touch-sm,
.btn-ghost.btn-action-close.touch,
.btn-ghost.btn-action-close.touch-sm,
.btn-ghost.btn-action-close.touch-lg {
  height: 35px;
  min-height: 35px;
  padding: 0 0.75rem;
  font-size: 0.88rem;
  line-height: 1;
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Panel toolbar */
.panel-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.panel-toolbar h2 {
  margin: 0;
  flex: 1;
  min-width: 120px;
}

.toolbar-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.check-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text-muted);
  min-height: var(--touch-min);
}

/* KDS · DID — 본문·라벨 글자색 통일 */
#view-kds,
#view-did,
#kdsDetailModal {
  --kds-ink: #111;
  color: var(--kds-ink);
}

#view-did .did-toolbar h2,
#view-did .did-clock-label,
#view-did .did-col-empty {
  color: var(--kds-ink);
}

#view-kds .panel-toolbar h2,
#view-kds .toolbar-right,
#view-kds .check-label,
#kdsDetailModal h3,
#kdsDetailModal .btn-close,
#view-kds .kds-status-bar-label,
#view-kds .kds-clock-label,
#view-kds .kds-status-filter,
#view-kds .kds-status-bar .btn-ghost,
#view-kds .kds-summary-bar,
#view-kds .kds-summary-label,
#view-kds .kds-summary-chip,
#view-kds .kds-summary-empty,
#view-kds .kds-footer-bar,
#view-kds .kds-footer-bar .hint,
#view-kds .kds-col-header,
#view-kds .kds-col-empty,
#view-kds .kds-order-card,
#view-kds .kds-order-card.status-NEW,
#view-kds .kds-order-card.status-COOKING,
#view-kds .kds-order-card.status-READY,
#view-kds .kds-type-row,
#view-kds .kds-type-row.type-dine-in,
#view-kds .kds-type-row.type-takeout,
#view-kds .kds-type-row.type-delivery,
#view-kds .kds-qty,
#view-kds .kds-order-time,
#view-kds .kds-elapsed-label,
#view-kds .kds-elapsed,
#kdsDetailModal .kds-qty,
#kdsDetailModal .kds-detail-order-time,
#view-kds .kds-server,
#view-kds .kds-mod,
#view-kds .kds-course,
#view-kds .kds-lines-more-label,
#view-kds .kds-pay-pill,
#view-kds .kds-pay-pill.pay-paid,
#view-kds .kds-pay-pill.pay-not-paid,
#view-kds .kds-pay-pill.pay-online,
#view-kds .kds-order-card .status-pill,
#view-kds .kds-pill-NEW,
#view-kds .kds-pill-COOKING,
#view-kds .kds-pill-READY,
#view-kds .kds-actions-row > button,
#view-kds .btn-release,
#view-kds .kds-allergy,
#kdsDetailModal .kds-detail-modal-sub,
#kdsDetailModal .kds-detail-elapsed,
#kdsDetailModal .kds-type-row,
#kdsDetailModal .kds-server,
#kdsDetailModal .kds-mod,
#kdsDetailModal .kds-line-main,
#kdsDetailModal .kds-line-main strong,
#kdsDetailModal .kds-seat,
#kdsDetailModal .kds-item-station,
#kdsDetailModal .kds-item-status-pill,
#kdsDetailModal .kds-detail-item-actions button,
#kdsDetailModal .kds-allergy,
#kdsDetailModal .kds-actions-row > button {
  color: var(--kds-ink);
}

#view-kds .kds-status-filter.active,
#view-kds .kds-status-bar .btn-ghost.active {
  background: #005df5;
  border-color: #0046c0;
  color: #fff;
}

#view-kds .kds-status-filter.active .kds-filter-dot {
  background: #fff;
}

#view-kds .kds-status-filter.active .kds-count {
  color: #111827;
  background: #fff;
}

.kds-status-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0 4px 8px;
}

.kds-sort-divider {
  width: 1px;
  height: 28px;
  background: var(--border);
  margin: 0 4px;
}

.kds-sort-check {
  font-weight: 600;
}

.kds-status-bar-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-right: 4px;
}

.kds-status-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 7.75rem;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 999px;
  border: 2px solid var(--border);
  background: var(--bg-panel);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  user-select: none;
  color: var(--text);
  font-family: inherit;
}

.kds-status-filter.active {
  border-color: #0046c0;
  background: #005df5;
  color: #fff;
  box-shadow: none;
  transform: none;
}

.kds-status-filter.dimmed {
  opacity: 1;
}

.kds-status-bar .btn-ghost.active {
  border-color: #0046c0;
  background: #005df5;
  color: #fff;
  font-weight: 700;
  box-shadow: none;
}

.kds-status-filter.status-NEW.active,
.kds-status-filter.status-COOKING.active,
.kds-status-filter.status-READY.active,
.kds-status-filter.status-CANCELLED.active {
  border-color: #0046c0;
  background: #005df5;
  color: #fff;
}

.kds-status-filter.active .kds-filter-dot {
  background: #fff;
}

.kds-status-filter.active .kds-count {
  color: #111827;
  background: #fff;
}

.kds-status-filter.status-NEW {
  border-color: var(--kitchen-preparing-border);
}

.kds-status-filter.status-COOKING {
  border-color: var(--kitchen-cooking-border);
}

.kds-status-filter.status-READY {
  border-color: var(--kitchen-done-border);
}

.kds-filter-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.kds-status-filter.status-NEW .kds-filter-dot {
  background: var(--kitchen-preparing-border);
}

.kds-status-filter.status-COOKING .kds-filter-dot {
  background: var(--kitchen-cooking-border);
}

.kds-status-filter.status-READY .kds-filter-dot {
  background: var(--kitchen-done-border);
}

.kds-status-filter.status-CANCELLED .kds-filter-dot {
  background: #dc2626;
}

.kds-count {
  display: inline-block;
  min-width: 1.4em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-elevated);
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
}

.kds-board {
  gap: 10px;
}

.kds-board.kds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  align-items: stretch;
}

.kds-layout {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.kds-clock-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 8px;
}

.kds-order-card {
  --kds-card-height: 23.5rem;
  --kds-lines-slot-h: 9.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px 10px;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  background: var(--bg-panel);
  overflow: hidden;
  color: var(--kds-ink, #111);
  height: var(--kds-card-height);
  min-height: var(--kds-card-height);
  max-height: var(--kds-card-height);
  box-sizing: border-box;
}

.kds-card-head {
  flex-shrink: 0;
}

.kds-card-bottom {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
  padding-top: 2px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.kds-order-card-no-actions .kds-card-bottom {
  gap: 0;
}

.kds-order-card-no-actions .kds-card-foot {
  padding-bottom: 2px;
}

.kds-order-card-expandable {
  cursor: pointer;
}

.kds-order-card-expandable .kds-actions-row > .btn-cook,
.kds-order-card-expandable .kds-actions-row > .btn-bump,
.kds-order-card-expandable .kds-actions-row > .btn-back {
  cursor: pointer;
}

.kds-lines-wrap {
  flex: 1 1 0;
  min-height: var(--kds-lines-slot-h);
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}

.kds-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  min-height: 0;
  flex: 1 1 0;
  scrollbar-width: none;
}

.kds-lines::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.kds-lines.kds-lines-slot {
  min-height: calc(var(--kds-lines-slot-h) - 1.5rem);
  max-height: calc(var(--kds-lines-slot-h) - 1.5rem);
  overflow: hidden;
}

.kds-lines-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-height: 1.35rem;
  padding: 2px 2px 0;
}

.kds-lines-footer-spacer {
  visibility: hidden;
  pointer-events: none;
}

.kds-lines-more-label {
  font-size: 0.82rem;
  font-weight: 700;
  opacity: 0.9;
}

.kds-order-card.status-NEW {
  background: var(--kitchen-preparing-bg);
  border-color: var(--kitchen-preparing-border);
}

.kds-order-card.status-COOKING {
  background: var(--kitchen-cooking-bg);
  border-color: var(--kitchen-cooking-border);
}

.kds-order-card.status-READY {
  background: var(--kitchen-done-bg);
  border-color: var(--kitchen-done-border);
}

.kds-order-card.kds-card-flash {
  animation: kdsCardFlash 1.2s ease;
}

.kds-age-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--kitchen-preparing-border);
}

.kds-order-card.status-COOKING .kds-age-bar {
  background: var(--kitchen-cooking-border);
}

.kds-order-card.status-READY .kds-age-bar {
  background: var(--kitchen-done-border);
}

.kds-age-bar.kds-age-warn,
.kds-order-card.kds-age-warn .kds-age-bar {
  background: #f59e0b;
}

.kds-age-bar.kds-age-late,
.kds-order-card.kds-age-late .kds-age-bar {
  background: #ef4444;
  animation: kdsLatePulse 1s ease infinite;
}

.kds-order-card.kds-age-late:not(.status-READY) {
  border-color: #ef4444;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.35);
}

.kds-order-card.kds-age-warn:not(.status-READY) {
  border-color: #f59e0b;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.35);
}

.kds-order-card.status-READY.kds-age-late,
.kds-order-card.status-READY.kds-age-warn {
  border-color: var(--kitchen-done-border);
  box-shadow: none;
}

.kds-order-card.status-READY.kds-age-late .kds-age-bar,
.kds-order-card.status-READY.kds-age-warn .kds-age-bar {
  background: var(--kitchen-done-border);
  animation: none;
}

@keyframes kdsLatePulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

.kds-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-weight: 700;
  gap: 8px;
}

.kds-card-top-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.kds-card-top-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.kds-ticket-no {
  font-size: 1.05rem;
  line-height: 1.2;
}

.kds-order-time {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.2;
}

.kds-elapsed-label {
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0.75;
  line-height: 1;
}

.kds-elapsed {
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  line-height: 1.2;
}

.kds-detail-order-time {
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.kds-line-main strong {
  font-size: 1rem;
}

.kds-type-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.95rem;
}

.kds-type-row.type-dine-in,
.kds-type-row.type-takeout,
.kds-type-row.type-delivery {
  color: var(--kds-ink, #111);
}

.kds-location {
  margin-left: auto;
  font-size: 0.9rem;
}

.kds-server {
  font-size: 0.8rem;
  opacity: 0.85;
  line-height: 1.25;
}

.kds-order-card.status-NEW .kds-server,
.kds-order-card.status-COOKING .kds-server,
.kds-order-card.status-READY .kds-server {
  color: inherit;
}

.kds-allergy {
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.25);
  border: 2px solid #ef4444;
  color: var(--kds-ink, #111);
  font-weight: 800;
  font-size: 0.85rem;
}

.kds-line {
  padding-left: 4px;
  border-left: 3px solid transparent;
}

.kds-line-held {
  opacity: 0.45;
  border-left-color: var(--text-muted);
}

.kds-order-card.status-NEW .kds-line-main,
.kds-order-card.status-COOKING .kds-line-main,
.kds-order-card.status-READY .kds-line-main {
  color: inherit;
}

.kds-order-card.status-NEW .kds-mod,
.kds-order-card.status-COOKING .kds-mod,
.kds-order-card.status-READY .kds-mod {
  color: inherit;
  opacity: 0.85;
}

.kds-line-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}

.kds-seat {
  display: inline-block;
  min-width: 2em;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-elevated);
  font-size: 0.75rem;
  font-weight: 700;
}

.kds-course {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--kds-ink, #111);
  font-weight: 700;
}

.kds-mod {
  margin-left: 2.2em;
  color: var(--kds-ink, #111);
  font-weight: 700;
  font-size: 0.85rem;
}

.kds-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.kds-order-card .kds-card-foot .status-pill {
  font-size: 0.85rem;
  font-weight: 800;
  padding: 4px 12px;
  min-width: 3.25rem;
  text-align: center;
}

.kds-pay-pill {
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}

.kds-pay-pill.pay-paid {
  background: rgba(34, 197, 94, 0.2);
}

.kds-pay-pill.pay-not-paid {
  background: rgba(239, 68, 68, 0.2);
}

.kds-pay-pill.pay-online {
  background: rgba(56, 189, 248, 0.2);
}

.kds-summary-bar {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 12px 8px;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-panel);
}

.kds-summary-label {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  white-space: nowrap;
  padding-top: 4px;
}

.kds-summary-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
}

.kds-summary-chip {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--bg-elevated);
  font-size: 0.85rem;
  font-weight: 600;
}

.kds-summary-empty {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.kds-footer-bar {
  padding: 8px 12px 12px;
  text-align: center;
}

.btn-release {
  margin-top: 4px;
  margin-left: 2.2em;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font-size: 0.8rem;
  cursor: pointer;
}

.cart-tag {
  font-size: 0.75rem;
  color: var(--accent);
  font-weight: 600;
}

.cart-opt-btn {
  min-width: 36px;
  padding: 0 8px;
}

.kds-board.kds-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  min-height: 0;
  flex: 1 1 auto;
  height: 100%;
  overflow: hidden;
}

.kds-board.kds-columns.kds-filter-single {
  grid-template-columns: 1fr;
}

.kds-board.kds-columns.kds-filter-double {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#view-kds .kds-chrome-hidden {
  display: none !important;
}

.kds-daily-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface-2, #f8fafc);
  border-bottom: 1px solid var(--border, #e2e8f0);
  position: relative;
  z-index: 2;
}

.kds-daily-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.kds-daily-date-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.kds-daily-nav-btn {
  min-width: 36px;
  font-size: 1.2rem;
  line-height: 1;
}

.kds-daily-date-input {
  min-width: 148px;
}

.kds-daily-date-label {
  font-size: 0.92rem;
  color: var(--text-muted, #64748b);
  white-space: nowrap;
}

.kds-daily-search-wrap {
  flex: 1 1 180px;
  min-width: 160px;
  max-width: 280px;
}

.kds-daily-search-input {
  width: 100%;
}

.kds-daily-sort-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.kds-daily-calendar-popover {
  position: absolute;
  top: calc(100% + 4px);
  left: 12px;
  z-index: 20;
  width: min(320px, calc(100vw - 24px));
  padding: 12px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 8px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.kds-daily-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.kds-daily-cal-month {
  font-weight: 600;
}

.kds-daily-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
  font-size: 0.78rem;
  color: var(--text-muted, #64748b);
  text-align: center;
}

.kds-daily-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.kds-daily-cal-cell {
  min-height: 36px;
}

.kds-daily-cal-day {
  border: none;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.kds-daily-cal-day:hover {
  background: var(--surface-hover, #f1f5f9);
}

.kds-daily-cal-day.is-selected {
  background: var(--primary, #2563eb);
  color: #fff;
}

.kds-daily-cal-day.is-today:not(.is-selected) {
  box-shadow: inset 0 0 0 2px var(--primary, #2563eb);
}

.kds-board.kds-daily-list {
  display: block;
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
}

.kds-daily-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.kds-daily-list-header {
  display: flex;
  align-items: center;
  padding: 4px 2px;
}

.kds-daily-list-count {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted, #64748b);
}

.kds-daily-list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  background: var(--surface, #fff);
  border-radius: var(--radius, 8px);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.kds-daily-list-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2, #f1f5f9);
}

.kds-daily-list-table th,
.kds-daily-list-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border, #e2e8f0);
  vertical-align: middle;
}

.kds-daily-list-table th {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-muted, #64748b);
  white-space: nowrap;
}

.kds-daily-row {
  cursor: pointer;
  transition: background 0.12s ease;
}

.kds-daily-row:hover {
  background: var(--surface-hover, #f8fafc);
}

.kds-daily-no strong {
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

.kds-daily-items {
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kds-daily-type .kds-type-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.82rem;
  background: var(--surface-2, #f1f5f9);
}

.kds-column {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  overflow: hidden;
}

.kds-column.kds-col-hidden {
  display: none;
}

.kds-column.kds-col-active {
  box-shadow: 0 0 0 2px var(--accent);
}

.kds-column.kds-col-focus {
  animation: kdsColPulse 1.2s ease;
}

.kds-card.kds-card-flash {
  animation: kdsCardFlash 1.2s ease;
}

@keyframes kdsColPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.6);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(56, 189, 248, 0);
  }
}

@keyframes kdsCardFlash {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
  }
}

.kds-col-NEW .kds-col-header {
  background: var(--kitchen-preparing-bg);
  border-bottom: 2px solid var(--kitchen-preparing-border);
}

.kds-col-COOKING .kds-col-header {
  background: var(--kitchen-cooking-bg);
  border-bottom: 2px solid var(--kitchen-cooking-border);
}

.kds-col-READY .kds-col-header {
  background: var(--kitchen-done-bg);
  border-bottom: 2px solid var(--kitchen-done-border);
}

.kds-col-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  font-weight: 700;
}

.kds-col-header .kds-col-title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.kds-col-body {
  flex: 1;
  min-height: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

.kds-col-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 24px 8px;
  margin: 0;
  font-size: 0.9rem;
}

.kds-meta {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.kds-pill-NEW {
  background: rgba(21, 101, 192, 0.15);
  border: 1px solid var(--kitchen-preparing-border);
}

.kds-pill-COOKING {
  background: rgba(239, 108, 0, 0.15);
  border: 1px solid var(--kitchen-cooking-border);
}

.kds-pill-READY {
  background: rgba(46, 125, 50, 0.15);
  border: 1px solid var(--kitchen-done-border);
}

.kds-card {
  padding: 16px;
  border-radius: var(--radius);
  background: var(--bg-panel);
  border-left: 5px solid var(--bg-elevated);
}

.kds-card.status-NEW {
  background: var(--kitchen-preparing-bg);
  border-left-color: var(--kitchen-preparing-border);
}

.kds-card.status-COOKING {
  background: var(--kitchen-cooking-bg);
  border-left-color: var(--kitchen-cooking-border);
}

.kds-card.status-READY {
  background: var(--kitchen-done-bg);
  border-left-color: var(--kitchen-done-border);
  opacity: 0.95;
}

.kds-card .kds-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 1.1rem;
}

.kds-actions {
  margin-top: 0;
  flex-shrink: 0;
}

.kds-actions-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}

.kds-detail-modal.modal-content {
  display: flex;
  flex-direction: column;
  max-height: min(90vh, 720px);
  overflow: hidden;
}

.kds-detail-modal .modal-header {
  align-items: flex-start;
  flex-shrink: 0;
}

.kds-detail-modal-sub {
  margin: 4px 0 0;
  font-size: 0.9rem;
  font-weight: 600;
}

.kds-detail-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.kds-detail-modal-body-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kds-detail-modal-body-inner .kds-detail-lines {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.kds-detail-empty {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 0.95rem;
  color: var(--text-muted);
}

.kds-detail-lines {
  gap: 12px;
}

.kds-detail-lines .kds-line-main {
  font-size: 1.1rem;
}

.kds-detail-lines .kds-line-main strong {
  font-size: 1.2rem;
}

.kds-qty {
  display: inline-block;
  min-width: 2.2em;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.08);
  font-size: 0.95em;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.kds-detail-lines .kds-qty {
  font-size: 1.05rem;
  min-width: 2.5em;
  text-align: center;
}

.kds-detail-lines .kds-mod {
  font-size: 1rem;
  margin-left: 0;
  margin-top: 4px;
}

.kds-detail-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 10px;
  border: 2px solid var(--border);
  background: var(--bg-elevated);
}

.kds-detail-item.status-NEW {
  border-color: var(--kitchen-preparing-border);
  background: var(--kitchen-preparing-bg);
}

.kds-detail-item.status-COOKING {
  border-color: var(--kitchen-cooking-border);
  background: var(--kitchen-cooking-bg);
}

.kds-detail-item.status-READY {
  border-color: var(--kitchen-done-border);
  background: var(--kitchen-done-bg);
}

.kds-detail-item-held {
  opacity: 0.55;
}

.kds-detail-item-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.kds-detail-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.kds-item-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.kds-item-status-pill.kds-pill-NEW {
  background: var(--kitchen-preparing-border);
  color: var(--kds-ink, #111);
}

.kds-item-status-pill.kds-pill-COOKING {
  background: var(--kitchen-cooking-border);
  color: var(--kds-ink, #111);
}

.kds-item-status-pill.kds-pill-READY {
  background: var(--kitchen-done-border);
  color: var(--kds-ink, #111);
}

.kds-item-station {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
}

.kds-detail-item-actions .btn-item-cook,
.kds-detail-item-actions .btn-item-bump,
.kds-detail-item-actions .btn-release {
  min-height: 44px;
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  color: var(--kds-ink, #111);
}

.kds-detail-item-actions .btn-item-cook {
  background: var(--kitchen-cooking-border);
}

.kds-detail-item-actions .btn-item-bump {
  background: var(--kitchen-done-border);
}

.kds-detail-item-actions .btn-release {
  background: var(--bg-panel);
  border: 1px solid var(--border);
}

.kds-detail-ticket-label {
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.kds-detail-elapsed {
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.kds-detail-modal-footer {
  flex-direction: column;
  align-items: stretch;
  flex-shrink: 0;
}

.kds-detail-actions {
  margin-top: 0;
}

.kds-detail-actions button {
  min-height: 52px;
  font-size: 1.05rem;
}

.kds-board .kds-actions-row > button {
  min-height: 48px;
  border: none;
  border-radius: 8px;
  background: var(--bg-elevated);
  color: var(--kds-ink, #111);
  cursor: pointer;
  font-weight: 700;
  font-size: 0.9rem;
  font-family: inherit;
}

.kds-actions-row .btn-cook,
.kds-actions-row .btn-bump,
.kds-actions-row .btn-back {
  flex: 1 1 auto;
  width: 100%;
}

.kds-actions-row .btn-cook {
  background: var(--kitchen-cooking-border);
}

.kds-actions-row .btn-bump,
.kds-actions-row .btn-ready {
  background: var(--kitchen-done-border);
}

.kds-actions-row .btn-back {
  background: var(--kitchen-preparing-border);
}

.kds-detail-actions .kds-actions-row {
  width: 100%;
}

.kds-detail-actions .kds-actions-row > button {
  min-height: 52px;
  font-size: 1.05rem;
}

@media (max-width: 799px) {
  .kds-board.kds-columns {
    grid-template-columns: 1fr;
  }
}

/* Data table */
.data-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.data-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  background: var(--bg-panel);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  cursor: pointer;
}

.data-row:hover {
  border-color: var(--accent);
}

.data-row .meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.data-row .actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.data-row.low-stock {
  border-left: 4px solid var(--danger);
}

.status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.status-pill.PAID,
.status-pill.OPEN {
  background: rgba(0, 93, 245, 0.2);
}

.status-pill.CLOSED {
  background: rgba(100, 116, 139, 0.3);
}

/* Reports */
.report-view-hint {
  margin: 0 16px 12px;
}
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.report-card {
  padding: 18px;
  background: var(--bg-panel);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.report-card .label {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.report-card .value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--accent);
}

.report-detail {
  background: var(--bg-panel);
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: auto;
  max-height: 360px;
  font-size: 0.9rem;
  color: var(--text);
  margin: 12px 0 0;
}

.report-detail-list {
  margin: 8px 0 0;
  padding-left: 1.2rem;
  line-height: 1.5;
}

.code-block {
  background: var(--bg-panel);
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: auto;
  max-height: 360px;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
}

.chart-wrap {
  margin-bottom: 16px;
}

.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 160px;
  padding: 12px;
  background: var(--bg-panel);
  border-radius: var(--radius);
}

.bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
}

.bar-fill {
  width: 100%;
  max-width: 48px;
  background: var(--primary);
  border-radius: 6px 6px 0 0;
  min-height: 4px;
}

.bar-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 4px;
  text-align: center;
}

/* 설정업무 */
#view-settings,
#view-settings * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#view-settings *::-webkit-scrollbar:vertical {
  width: 0;
  display: none;
}

.settings-work-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  height: 100%;
  background: var(--bg);
}

.settings-work-nav {
  flex-shrink: 0;
  width: 220px;
  display: flex;
  flex-direction: column;
  background: var(--settings-nav-bg);
  border-right: 1px solid var(--settings-nav-border);
  color: var(--settings-nav-fg);
}

.settings-work-nav-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 14px 14px;
  border-bottom: 1px solid var(--settings-nav-border);
}

.settings-work-nav-brand {
  flex: 1;
  min-width: 0;
}

.settings-work-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: var(--bg-elevated);
  color: var(--settings-nav-fg);
  cursor: pointer;
}

.settings-work-close-btn:hover {
  background: var(--settings-nav-hover);
}

.settings-work-close-btn:active {
  transform: scale(0.96);
}

.settings-work-nav-label {
  margin: 0 0 4px;
  font-size: 0.72rem;
  color: var(--settings-nav-fg-muted);
  font-weight: 600;
}

body.settings-sub-device-only .settings-work-menu-item:not([data-sub-device-item]) {
  display: none !important;
}

body.settings-sub-device-only .settings-work-menu-section:not([data-sub-device-section]) {
  display: none !important;
}

.device-conn-scan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 4px;
}

.device-conn-manual-com {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 12px;
  margin: 8px 0 10px;
}

.device-conn-manual-com-input {
  width: 7rem;
  text-transform: uppercase;
}

.device-pos-summary-card {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  background: var(--surface-elevated, #f8fafc);
}

.device-pos-summary-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
}

.device-pos-summary-label {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  min-width: 96px;
}

.device-pos-summary-value {
  font-size: 15px;
  color: #0f172a;
  word-break: break-all;
}

.device-pos-summary-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.device-pos-stat-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: #e2e8f0;
  color: #334155;
}

.device-pos-terminals-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
}

.device-pos-terminals-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.device-pos-terminals-table th,
.device-pos-terminals-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
}

.device-pos-terminals-table th {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  background: #f8fafc;
}

.device-pos-terminals-table tr.is-current td {
  background: #eff6ff;
}

.device-pos-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.device-pos-badge.role-main {
  background: #dbeafe;
  color: #1d4ed8;
}

.device-pos-badge.role-sub {
  background: #f1f5f9;
  color: #475569;
}

.device-pos-badge.reg-yes {
  background: #dcfce7;
  color: #15803d;
}

.device-pos-badge.reg-no {
  background: #ffedd5;
  color: #c2410c;
}

.device-pos-badge.use-online {
  background: #dcfce7;
  color: #15803d;
}

.device-pos-badge.use-offline {
  background: #f1f5f9;
  color: #64748b;
}

.device-pos-badge.use-unregistered {
  background: #fef2f2;
  color: #b91c1c;
}

.device-pos-badge.current {
  margin-left: 6px;
  background: #2563eb;
  color: #fff;
}

.settings-work-store-name {
  display: block;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--settings-nav-fg);
  word-break: break-word;
}

.settings-work-menu {
  display: flex;
  flex-direction: column;
  padding: 6px 0 12px;
  gap: 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  color: var(--settings-nav-fg);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

.settings-work-menu::-webkit-scrollbar {
  width: 6px;
}

.settings-work-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.28);
  border-radius: 999px;
}

.settings-work-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  border: none;
  background: transparent;
  color: var(--settings-nav-fg);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.25;
}

.settings-work-menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  opacity: 0.95;
}

.settings-work-menu-icon svg {
  width: 20px;
  height: 20px;
}

.settings-work-menu-label {
  flex: 1;
  min-width: 0;
  color: inherit;
}

.settings-work-menu-section {
  margin: 10px 14px 4px;
  padding: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--settings-nav-section);
}

.settings-work-menu-section:first-child {
  margin-top: 4px;
}

.settings-work-menu-item:hover:not(.active) {
  background: var(--settings-nav-hover);
}

.settings-work-menu-item.active {
  background: var(--primary);
  color: #fff;
}

.settings-country-options-nav {
  margin: 0 0 6px 0;
  padding: 4px 0 6px 34px;
  border-left: 2px solid var(--settings-nav-border);
  margin-left: 22px;
}

.settings-store-ops-group.is-collapsed .settings-country-options-nav {
  display: none;
}

.settings-country-options-nav.hidden {
  display: none;
}

.settings-store-ops-group {
  display: flex;
  flex-direction: column;
}

.settings-store-ops-toggle {
  position: relative;
}

.settings-store-ops-chevron {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: #4da3ff;
  cursor: pointer;
  border-radius: 4px;
}

.settings-store-ops-chevron:hover {
  background: var(--settings-nav-hover);
}

.settings-store-ops-group.is-collapsed .settings-store-ops-chevron svg {
  transform: rotate(-90deg);
}

.settings-store-ops-chevron svg {
  display: block;
  transition: transform 0.15s ease;
}

.settings-country-options-nav-section {
  margin: 2px 0 6px 10px;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--settings-nav-fg-muted);
  line-height: 1.3;
}

.settings-country-options-menu {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.settings-country-option-item {
  min-height: 34px;
  padding: 6px 10px 6px 8px;
  font-size: 0.86rem;
  gap: 8px;
  color: var(--settings-nav-fg);
}

.settings-country-option-bullet {
  width: 14px;
  flex-shrink: 0;
  text-align: center;
  font-size: 0.45rem;
  line-height: 1;
  opacity: 0.85;
  color: var(--settings-nav-fg-muted);
}

.settings-country-option-item .settings-work-menu-icon {
  display: none;
}

.settings-country-option-item.active {
  background: var(--primary);
  color: #fff;
}

.store-ops-countryopts-panel {
  max-width: 920px;
}

.receipt-bir-header {
  text-align: center;
  margin-bottom: 4px;
}

.receipt-bir-title {
  font-weight: 700;
  font-size: 1.05em;
  margin: 0 0 4px;
}

.receipt-bir-footer {
  margin-top: 8px;
  font-size: 0.72em;
  line-height: 1.35;
  text-align: center;
}

.settings-work-panel[data-settings-panel^="countryopt-"] .store-ops-panel-toolbar .btn-primary,
.settings-work-panel[data-settings-panel^="countryopt-"] .store-ops-panel-toolbar .btn-ghost {
  box-sizing: border-box;
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  min-width: auto;
  width: auto;
  padding: 0 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.settings-work-panel[data-settings-panel^="countryopt-"] .store-ops-panel-toolbar .btn-save-action {
  gap: 0.3rem;
}

.settings-work-panel[data-settings-panel="master"] {
  display: none;
  flex-direction: column;
}

.settings-work-panel[data-settings-panel="master"].active {
  display: flex;
}

.settings-master-tabs {
  display: flex;
  gap: 0;
  flex-shrink: 0;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
}

.settings-master-tab {
  padding: 14px 18px;
  border: none;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

.settings-master-tab.active {
  color: var(--accent, #005df5);
  border-bottom-color: var(--accent, #005df5);
}

.settings-master-pane {
  display: none;
  flex: 1;
  min-height: 0;
  flex-direction: column;
}

.settings-master-pane.active {
  display: flex;
}

.settings-work-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 48px 24px;
  text-align: center;
}

.settings-work-placeholder h2 {
  margin: 0;
  font-size: 1.35rem;
}

.settings-work-panel[data-settings-panel="sales"] {
  background: #f0f2f5;
}

.sales-flash-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.sales-flash-header {
  flex-shrink: 0;
  background: var(--primary);
  color: #fff;
  padding: 1rem 1.25rem;
  box-shadow: 0 4px 14px rgba(0, 93, 245, 0.18);
}

.sales-flash-header-top {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}

.sales-flash-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
}

.sales-flash-subtitle {
  font-size: 0.88rem;
  opacity: 0.92;
}

.sales-flash-meta-line {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.75rem 1.25rem;
  margin: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sales-flash-meta-line::-webkit-scrollbar {
  display: none;
}

.sales-flash-meta-line div {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

.sales-flash-meta-line div:not(:last-child)::after {
  content: "·";
  margin-left: 0.9rem;
  opacity: 0.72;
  font-weight: 400;
}

.sales-flash-meta-line dt {
  margin: 0;
  font-size: 0.78rem;
  opacity: 0.88;
  font-weight: 500;
}

.sales-flash-meta-line dd {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
}

.sales-flash-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px 12px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sales-flash-body::-webkit-scrollbar {
  display: none;
}

.sales-flash-empty {
  margin: 48px 16px;
  text-align: center;
  color: #6b7280;
  font-size: 0.95rem;
  line-height: 1.5;
}

.sales-flash-content {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.sales-flash-section {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 0.9rem 1rem 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.sales-flash-section-title {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  color: #1e40af;
  font-weight: 700;
}

.sales-flash-summary-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

@media (min-width: 800px) {
  .sales-flash-summary-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.sales-flash-summary-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.75rem 0.85rem;
}

.sales-flash-summary-card.is-primary {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.sales-flash-summary-card .label {
  font-size: 0.72rem;
  color: #64748b;
  margin-bottom: 0.25rem;
}

.sales-flash-summary-card .value {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
}

.sales-flash-summary-card .sub {
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: #64748b;
}

.sales-flash-table-wrap {
  overflow-x: auto;
}

.sales-flash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.sales-flash-table th,
.sales-flash-table td {
  padding: 0.55rem 0.45rem;
  border-bottom: 1px solid #eef2f7;
  text-align: left;
}

.sales-flash-table th.num,
.sales-flash-table td.num {
  text-align: right;
  white-space: nowrap;
}

.sales-flash-table tfoot td {
  font-weight: 700;
  border-top: 2px solid #dbeafe;
  border-bottom: none;
}

.sales-flash-table tr.is-tip td {
  color: #64748b;
}

.sales-flash-top-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.sales-flash-top-item {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  gap: 0.65rem;
  align-items: center;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  background: #f8fafc;
}

.sales-flash-top-rank {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--primary);
  text-align: center;
}

.sales-flash-top-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: #111827;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-flash-top-meta {
  font-size: 0.72rem;
  color: #6b7280;
}

.sales-flash-top-amount {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
}

.sales-flash-footer {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 20px 16px;
  border-top: 1px solid #e5e7eb;
  background: #fff;
}

.settings-work-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.settings-work-panel {
  display: none;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-panel);
  overflow: hidden;
}



.settings-work-panel.active {
  display: flex;
}

.settings-work-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: 20px 24px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text);
}



.settings-work-panel-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
}

.settings-work-panel-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 24px 24px;
}

.store-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

.store-info-span-all {
  grid-column: 1 / -1;
}

.store-info-row-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 18px;
}

.store-info-grid .settings-field {
  margin: 0;
}

.store-info-grid .settings-field > span {
  font-weight: 700;
}

.store-info-field-required > span {
  color: #dc2626;
}

.store-info-inline {
  display: flex;
  gap: 8px;
}

.store-info-inline .touch-input {
  flex: 1;
}

.store-info-logo-field {
  grid-column: 2 / 3;
}

.store-info-logo-preview {
  width: 220px;
  height: 150px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.84rem;
  overflow: hidden;
}

.store-info-logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.store-ops-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

/* 매장운영설정 — 표 형태 */
.store-ops-table-wrap {
  overflow-x: auto;
}

.store-ops-hq-sync-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.store-ops-hq-sync-pending-hint {
  font-size: 12px;
  color: var(--accent, #2563eb);
  font-weight: 600;
}

#opsHqSyncSendBtn.store-ops-hq-sync-pending {
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35);
  animation: store-ops-hq-sync-pulse 1.4s ease-in-out infinite;
}

@keyframes store-ops-hq-sync-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.45);
  }
}

.store-ops-row.store-ops-row-muted .store-ops-radio-inline {
  opacity: 0.72;
}

/* 매장운영 — 국가 선택과 동일한 컨트롤 크기 */
.settings-work-panel[data-settings-panel="storeops"] .store-ops-table-wrap .touch-select,
.settings-work-panel[data-settings-panel="storeops"] .store-ops-table-wrap .settings-field .touch-input,
.settings-work-panel[data-settings-panel="storeops"] .store-ops-table-wrap .store-ops-field-compact .touch-select,
.settings-work-panel[data-settings-panel="storeops"] .store-ops-table-wrap .store-ops-field-compact .touch-input,
.settings-work-panel[data-settings-panel="storeops"] .store-ops-store-info-block .touch-select,
.settings-work-panel[data-settings-panel="storeops"] .store-ops-store-info-block .touch-input,
.settings-work-panel[data-settings-panel="storeops"] .store-info-pos-auth-section .touch-input {
  box-sizing: border-box;
  width: var(--store-ops-control-w);
  min-width: var(--store-ops-control-w);
  max-width: 100%;
  min-height: var(--store-ops-control-h);
  height: var(--store-ops-control-h);
  padding: 0 8px;
  font-size: var(--store-ops-control-fs);
  border-radius: var(--store-ops-control-radius);
  line-height: 1.2;
}

.settings-work-panel[data-settings-panel="storeops"] .store-ops-table-wrap .store-info-inline .touch-input,
.settings-work-panel[data-settings-panel="storeops"] .store-ops-table-wrap .store-info-inline input[type="time"] {
  width: 76px;
  min-width: 76px;
  flex: 0 0 76px;
}

/* 국가·로케일 — 입력 박스 높이 35px 통일 */
.locale-hub-body .touch-select,
.locale-hub-body .touch-input:not([type="checkbox"]):not([type="radio"]) {
  box-sizing: border-box;
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 10px;
  line-height: 1.2;
}

.settings-work-panel[data-settings-panel="storeops"] .store-ops-table-wrap .settings-field,
.settings-work-panel[data-settings-panel="storeops"] .store-ops-table-wrap .store-ops-field-compact {
  margin-bottom: 0;
  gap: 4px;
  align-items: flex-start;
}

.settings-work-panel[data-settings-panel="storeops"] .store-ops-table-wrap .settings-field > span,
.settings-work-panel[data-settings-panel="storeops"] .store-ops-table-wrap .store-ops-field-compact > span {
  font-size: var(--store-ops-control-fs);
  color: #64748b;
  font-weight: 400;
}

.settings-work-panel[data-settings-panel="storeops"] .store-ops-table-wrap .store-ops-expand-btn {
  min-height: var(--store-ops-control-h);
  height: var(--store-ops-control-h);
  padding: 0 10px;
  font-size: var(--store-ops-control-fs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.settings-work-panel[data-settings-panel="storeops"] .store-ops-table-wrap .store-ops-radio-pill {
  min-height: var(--store-ops-control-h);
  height: auto;
  padding: 4px 10px;
  font-size: var(--store-ops-control-fs);
  min-width: 0;
}

.settings-work-panel[data-settings-panel="storeops"] .store-ops-table-wrap .store-ops-preset-btn {
  min-height: var(--store-ops-control-h);
  height: var(--store-ops-control-h);
  padding: 0 12px;
  font-size: var(--store-ops-control-fs);
}

.store-ops-table {
  width: 100%;
  min-width: 560px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #cbd5e1;
  background: #fff;
  font-size: 0.84rem;
}

.store-ops-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.store-ops-table-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1e293b;
}

.store-ops-table-toolbar-actions {
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
}

.store-ops-caption-btn {
  box-sizing: border-box;
  min-height: var(--store-ops-control-h, 34px);
  height: var(--store-ops-control-h, 34px);
  font-size: var(--store-ops-control-fs, 0.78rem);
  font-weight: 600;
  padding: 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: var(--store-ops-control-radius, 8px);
  background: #f8fafc;
  color: #475569;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

.store-ops-caption-btn:hover {
  background: #e2e8f0;
}

.store-ops-inline-triple {
  flex-wrap: wrap;
}

.store-ops-locale-country-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

.store-ops-locale-presets {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.store-ops-locale-presets-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
}

.store-ops-preset-btn {
  box-sizing: border-box;
  min-height: var(--store-ops-control-h, 34px);
  height: var(--store-ops-control-h, 34px);
  font-size: var(--store-ops-control-fs, 0.78rem);
  font-weight: 600;
  padding: 0 12px;
  border: 1px solid #93c5fd;
  border-radius: 999px;
  background: #eff6ff;
  color: #0050d4;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

.store-ops-preset-btn:hover {
  background: #dbeafe;
}

.store-ops-preset-panel {
  margin-top: 10px;
}

.store-ops-preset-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.store-ops-preset-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 2px 4px 2px 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: inherit;
}

.store-ops-preset-toggle .store-ops-expand-chevron {
  width: 0.85rem;
  font-size: 0.65rem;
  color: #64748b;
}

.store-ops-preset-panel-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
}

.store-ops-preset-panel-body {
  margin-top: 6px;
}

.store-ops-preset-table-wrap {
  display: inline-block;
  max-width: 100%;
  width: max-content;
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.store-ops-preset-table {
  width: auto;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.72rem;
}

.store-ops-preset-col-name {
  width: 88px;
}

.store-ops-preset-col-type {
  width: 34px;
}

.store-ops-preset-col-value {
  width: 72px;
}

.store-ops-preset-col-use {
  width: 54px;
}

.store-ops-preset-col-actions {
  width: 46px;
}

.store-ops-preset-table th,
.store-ops-preset-table td {
  padding: 4px 6px;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
  vertical-align: middle;
}

.store-ops-preset-table th {
  background: #f1f5f9;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
}

.store-ops-preset-table td:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.store-ops-preset-table tbody tr:last-child td {
  border-bottom: none;
}

.store-ops-preset-table .store-ops-preset-enabled {
  min-width: 0;
  width: 100%;
  max-width: 54px;
  min-height: var(--store-ops-control-h, 34px);
  height: var(--store-ops-control-h, 34px);
  padding: 0 4px;
  font-size: 0.68rem;
  border-radius: var(--store-ops-control-radius, 8px);
  box-sizing: border-box;
  line-height: 1.2;
}

.store-ops-preset-table .settings-menu-actions {
  white-space: nowrap;
  vertical-align: middle;
}

.store-ops-preset-table .settings-menu-actions .btn-ghost,
.store-ops-preset-table .settings-menu-actions .btn-ghost.touch-sm {
  min-height: var(--store-ops-control-h, 34px);
  height: var(--store-ops-control-h, 34px);
  padding: 0 8px;
  font-size: 0.68rem;
  line-height: 1.2;
  border-radius: var(--store-ops-control-radius, 8px);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.store-ops-locale-preview {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f1f5f9;
  font-size: 0.78rem;
  color: #334155;
  font-weight: 600;
}

.store-ops-lang-pack {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #cbd5e1;
}

.store-ops-lang-pack-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.store-ops-lang-pack-title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: #1e293b;
}

.store-ops-lang-pack-actions {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

.store-ops-lang-pack-hint {
  margin: 8px 0 10px;
  font-size: 0.72rem;
  color: #64748b;
}

.store-ops-lang-pack-toolbar {
  margin: 0 0 10px;
}

.lang-pack-search {
  width: 100%;
  max-width: 360px;
  font-size: 0.78rem;
}

.lang-pack-save-btn {
  min-height: 32px;
  padding: 0 14px;
  font-size: 0.78rem;
}

.store-ops-lang-pack-table-wrap {
  max-height: 360px;
  overflow: auto;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
}

.store-ops-lang-pack-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
}

.store-ops-lang-pack-table thead th {
  position: sticky;
  top: 0;
  background: #e0f2fe;
  color: #0f172a;
  font-weight: 700;
  padding: 6px 8px;
  border-bottom: 1px solid #bae6fd;
  white-space: nowrap;
}

.store-ops-lang-pack-table tbody td {
  padding: 5px 8px;
  border-bottom: 1px solid #e2e8f0;
  vertical-align: top;
}

.store-ops-lang-pack-table tbody tr:nth-child(even) td {
  background: #f8fafc;
}

.store-ops-lang-pack-table tbody td:first-child {
  font-family: ui-monospace, monospace;
  color: #475569;
  white-space: nowrap;
}

.lang-pack-row {
  cursor: pointer;
}

.lang-pack-row.is-selected td {
  background: #dbeafe !important;
}

.lang-pack-row.is-selected td:first-child {
  box-shadow: inset 3px 0 0 #2563eb;
}

.lang-pack-col-key {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lang-pack-col-lang {
  min-width: 110px;
}

.lang-pack-cell-input {
  width: 100%;
  min-width: 96px;
  font-size: 0.72rem;
  padding: 4px 6px;
}

.lang-pack-empty {
  text-align: center;
  color: #64748b;
  padding: 16px 8px !important;
}

.store-ops-row.is-dirty > .store-ops-col-label::after,
.store-ops-row.is-dirty > th.store-ops-col-label::after {
  content: " · 변경됨";
  font-size: 0.72rem;
  font-weight: 600;
  color: #d97706;
}

#saveStoreOpsBtn.is-dirty {
  box-shadow: 0 0 0 2px #fbbf24;
}

.store-ops-table thead th {
  position: sticky;
  top: 0;
  z-index: 12;
  background: #6ca4d8;
  color: #fff;
  font-weight: 600;
  padding: 8px 10px;
  border: 1px solid #5a94c8;
  text-align: center;
  box-shadow: 0 1px 0 #5a94c8;
}

.store-ops-table tbody th,
.store-ops-table tbody td {
  border: 1px solid #e2e8f0;
  padding: 8px 10px;
  vertical-align: middle;
}

.store-ops-table tbody th {
  background: #f8fafc;
  font-weight: 700;
  color: #334155;
  text-align: left;
  white-space: nowrap;
}

.store-ops-table thead .store-ops-col-no {
  color: #fff;
  background: #6ca4d8;
  z-index: 14;
}

.store-ops-table thead .store-ops-col-label {
  text-align: center;
  z-index: 13;
}

.store-ops-col-no {
  width: 52px;
  min-width: 52px;
  max-width: 52px;
  text-align: center;
  font-weight: 700;
  color: #475569;
  background: #f1f5f9;
}

.store-ops-table tbody .store-ops-col-no {
  position: sticky;
  left: 0;
  z-index: 6;
  box-shadow: 1px 0 0 #e2e8f0;
}

.store-ops-col-label {
  width: 148px;
  min-width: 148px;
  max-width: 148px;
}

.store-ops-table tbody .store-ops-col-label {
  position: sticky;
  left: 52px;
  z-index: 5;
  box-shadow: 1px 0 0 #e2e8f0;
}

.store-ops-row-expandable.is-expanded .store-ops-col-rowspan {
  vertical-align: top;
}

.store-ops-row-expandable.is-expanded .store-ops-col-no.store-ops-col-rowspan {
  position: sticky;
  left: 0;
  z-index: 8;
}

.store-ops-row-expandable.is-expanded .store-ops-col-label.store-ops-col-rowspan {
  position: sticky;
  left: 52px;
  z-index: 7;
}

.store-ops-row-detail .store-ops-col-detail-body {
  padding: 10px 12px;
}

.store-ops-col-action {
  width: 72px;
  text-align: center;
  white-space: nowrap;
}

.store-ops-row-detail td {
  background: #fafbfc;
  padding: 10px 12px;
}

.store-ops-row-detail[hidden] {
  display: none;
}

.store-ops-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, max-content));
  gap: 10px 14px;
}

.store-ops-countryopts-sections {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.store-ops-countryopts-block {
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}

.store-ops-countryopts-title {
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #334155;
}

.store-ops-field-wide {
  grid-column: 1 / -1;
}

.store-ops-radio-inline--spaced {
  margin-top: 8px;
}

.store-ops-inline-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
}

.store-ops-inline-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.store-ops-inline-field > span {
  font-size: 0.78rem;
  color: #64748b;
  white-space: nowrap;
}

.store-ops-inline-field-region .touch-select,
.store-ops-inline-triple .store-ops-inline-field .touch-select {
  flex: 0 0 var(--store-ops-control-w, 168px);
  width: var(--store-ops-control-w, 168px);
  min-width: var(--store-ops-control-w, 168px);
  max-width: var(--store-ops-control-w, 168px);
  min-height: var(--store-ops-control-h, 34px);
  height: var(--store-ops-control-h, 34px);
  padding: 0 8px;
  font-size: var(--store-ops-control-fs, 0.78rem);
  border-radius: var(--store-ops-control-radius, 8px);
  line-height: 1.2;
}

.store-ops-inline-field .touch-select {
  flex: 1;
  min-width: 120px;
}

.store-ops-table-view-inline {
  align-items: center;
}

.store-ops-table-view-hint {
  flex: 1 0 100%;
  margin: 8px 0 0;
}

.store-ops-radio-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.store-ops-radio-inline--spaced {
  margin-top: 10px;
}

.store-ops-inline-label {
  font-weight: 700;
  color: #475569;
  margin-right: 4px;
}

.store-ops-radio-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  padding: 4px 10px;
  border: none;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
}

.store-ops-radio-pill:has(input:checked) {
  border: none;
  background: transparent;
  color: #005df5;
  font-weight: 700;
}

.store-ops-radio-pill input {
  margin: 0;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  accent-color: #005df5;
  cursor: pointer;
}

.store-ops-row-hint {
  margin: 6px 0 0;
  font-size: 0.75rem;
  color: #64748b;
}

.store-ops-field-muted {
  opacity: 0.45;
}

.store-ops-row-summary {
  font-size: 0.78rem;
  color: #475569;
}

.store-ops-table-always-expanded .store-ops-row-summary {
  display: none;
}

.store-ops-store-info-title {
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
}

.store-ops-expand-btn {
  border: 1px solid #94a3b8;
  border-radius: 6px;
  background: #fff;
  color: #334155;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 8px;
  cursor: pointer;
  white-space: nowrap;
}

.store-ops-expand-btn:hover {
  background: #f1f5f9;
}

.store-ops-field-compact {
  margin: 0;
  max-width: none;
}

.settings-work-panel[data-settings-panel="storeops"] {
  --store-ops-control-w: 168px;
  --store-ops-control-h: 35px;
  --store-ops-control-fs: 0.78rem;
  --store-ops-control-radius: 8px;
}

.settings-work-panel[data-settings-panel="storeops"] .store-ops-panel-toolbar .btn-primary,
.settings-work-panel[data-settings-panel="storeops"] .store-ops-panel-toolbar .btn-ghost {
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  min-width: auto;
  width: auto;
  padding: 0 14px;
  line-height: 1;
}

.settings-work-panel[data-settings-panel="storeops"] .store-ops-panel-toolbar .btn-save {
  gap: 0.3rem;
}

.settings-work-panel[data-settings-panel="storeops"] .store-ops-table-toolbar button,
.settings-work-panel[data-settings-panel="storeops"] .settings-work-panel-head button,
.settings-work-panel[data-settings-panel="storeops"] .store-ops-table-wrap button,
.settings-work-panel[data-settings-panel="storeops"] .store-ops-store-info-block button,
.settings-work-panel[data-settings-panel="storeops"] .store-ops-lang-pack button {
  box-sizing: border-box;
  min-height: var(--store-ops-control-h);
  height: var(--store-ops-control-h);
  padding: 0 12px;
  font-size: var(--store-ops-control-fs);
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--store-ops-control-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.settings-work-panel[data-settings-panel="storeops"] .store-ops-pos-work-toggle,
.settings-work-panel[data-settings-panel="storeops"] .store-ops-store-info-toggle,
.settings-work-panel[data-settings-panel="storeops"] .store-ops-preset-toggle {
  min-height: 0;
  height: auto;
  padding: 0;
  font-weight: 700;
  display: inline-flex;
}

.settings-work-panel[data-settings-panel="storeops"] #saveStoreInfoBtn {
  min-width: var(--store-ops-control-w);
  width: var(--store-ops-control-w);
}

.settings-work-panel[data-settings-panel="storeops"] .store-ops-pos-work-head #refreshPosAuthBtn,
.settings-work-panel[data-settings-panel="storeops"] .store-info-pos-auth-head #refreshPosAuthBtn,
.settings-work-panel[data-settings-panel="storeops"] .store-ops-store-info-head #saveStoreInfoBtn {
  min-width: 72px;
  width: auto;
}

.settings-work-panel[data-settings-panel="storeops"] .store-ops-preset-panel-head .btn-ghost.touch-sm,
.settings-work-panel[data-settings-panel="storeops"] .store-ops-preset-table .settings-menu-actions .btn-ghost {
  min-width: 56px;
  width: auto;
  padding: 0 10px;
}

.settings-work-panel[data-settings-panel="storeops"] .settings-work-panel-body {
  padding-top: 4px;
}

.store-ops-pos-work-block {
  margin-top: 14px;
}

.store-ops-pos-work-head,
.store-ops-store-info-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  box-sizing: border-box;
  min-height: 34px;
  height: 34px;
  padding: 0 12px;
  background: #6ca4d8;
  border-radius: 8px;
}

.store-ops-collapsible-block.is-expanded .store-ops-pos-work-head,
.store-ops-collapsible-block.is-expanded .store-ops-store-info-head {
  border-radius: 8px 8px 0 0;
}

.store-ops-pos-work-toggle,
.store-ops-store-info-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 0;
  height: auto;
}

.store-ops-expand-chevron {
  display: inline-block;
  width: 1rem;
  font-size: 0.72rem;
  line-height: 1;
  text-align: center;
}

.store-ops-expand-label {
  font-size: 0.78rem;
}

.store-ops-pos-work-head .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}

.store-ops-pos-work-block .pos-auth-card,
.store-ops-store-info-block .store-info-pos-auth-section {
  max-width: none;
  margin: 0;
  border-radius: 0;
  border-top: 1px solid var(--border, #e2e8f0);
}

.store-info-pos-auth-section {
  padding: 12px;
  background: #f8fafc;
}

.store-info-pos-auth-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
}

.store-info-pos-auth-title {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: #1e293b;
}

.store-ops-store-info-block {
  margin-top: 14px;
}

.store-ops-store-info-detail .store-ops-store-info-hint {
  margin: 0;
  padding: 10px 12px 0;
}

.settings-work-panel[data-settings-panel="storeops"] .store-ops-store-info-detail .store-info-grid {
  margin-bottom: 0;
}

@media (max-width: 720px) {
  .store-ops-detail-grid {
    grid-template-columns: 1fr;
  }

  .store-ops-col-label {
    width: 100px;
    min-width: 88px;
    font-size: 0.78rem;
  }
}

.store-ops-card {
  border: 1px solid #d9dee3;
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.store-ops-card h3 {
  margin: -10px -12px 4px;
  padding: 7px 10px;
  font-size: 0.85rem;
  color: #fff;
  background: #6ca4d8;
  border-radius: 8px 8px 0 0;
}

.store-ops-card-collapsible {
  padding-top: 0;
  gap: 0;
}

.store-ops-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -10px -12px 0;
  padding: 7px 10px;
  background: #6ca4d8;
  border-radius: 8px 8px 0 0;
}

.store-ops-card-collapsible.is-collapsed .store-ops-card-head {
  border-radius: 8px;
  margin-bottom: -10px;
}

.store-ops-card-head h3 {
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  background: transparent;
  border-radius: 0;
}

.store-ops-card-head-summary {
  flex: 1;
  min-width: 0;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: none;
}

.store-ops-card-collapsible.is-collapsed .store-ops-card-head-summary {
  display: block;
}

.store-ops-collapse-btn {
  flex-shrink: 0;
  box-sizing: border-box;
  min-height: var(--store-ops-control-h, 34px);
  height: var(--store-ops-control-h, 34px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--store-ops-control-radius, 8px);
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: var(--store-ops-control-fs, 0.78rem);
  font-weight: 600;
  padding: 0 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

.store-ops-collapse-btn:hover {
  background: rgba(255, 255, 255, 0.28);
}

.store-ops-card-collapsible-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
}

.store-ops-card-collapsible.is-collapsed .store-ops-card-collapsible-body {
  display: none;
}

.store-ops-card-wide {
  grid-column: 1 / -1;
}

.store-ops-card-hint {
  margin: 0 0 4px;
  font-size: 0.78rem;
  color: #64748b;
}

.store-ops-subsection-label {
  margin: 10px 0 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: #334155;
}

.store-ops-pos-sale-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}

.store-ops-pos-sale-col .store-ops-subsection-label {
  margin-top: 0;
}

.store-ops-card .settings-option-cards-in-card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  padding: 0;
  margin: 6px 0 0;
  overflow: hidden;
}





/* 매장 운영 스타일을 다른 설정 패널에도 공통 적용 */
.settings-work-panel[data-settings-panel="operation"] .settings-work-panel-body,
.settings-work-panel[data-settings-panel="storeops"] .settings-work-panel-body,
.settings-work-panel[data-settings-panel="smartorder"] .settings-work-panel-body,
.settings-work-panel[data-settings-panel="architecture"] .settings-work-panel-body {
  background: #eef2f5;
}



.settings-work-panel[data-settings-panel="operation"] .settings-work-section-title,
.settings-work-panel[data-settings-panel="smartorder"] .settings-work-section-title {
  margin: 0;
  padding: 8px 12px;
  font-size: 0.9rem;
  color: #fff;
  background: #6ca4d8;
  border-radius: 8px 8px 0 0;
}

.settings-work-panel[data-settings-panel="operation"] {
  --store-ops-control-w: 168px;
  --store-ops-control-h: 35px;
  --store-ops-control-fs: 0.78rem;
  --store-ops-control-radius: 8px;
}

.settings-work-panel[data-settings-panel="operation"] .table-settings-panel-toolbar .btn-primary,
.settings-work-panel[data-settings-panel="operation"] .table-settings-panel-toolbar .btn-ghost {
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  min-width: auto;
  width: auto;
  padding: 0 14px;
  line-height: 1;
}

.settings-work-panel[data-settings-panel="operation"] .table-settings-panel-toolbar .btn-save {
  gap: 0.3rem;
}

.settings-work-panel[data-settings-panel="operation"] button:not(.settings-placement-cell):not(.table-settings-panel-toolbar button):not(.settings-hub-tile):not(.settings-hub-back-btn) {
  box-sizing: border-box;
  min-height: var(--store-ops-control-h);
  height: var(--store-ops-control-h);
  padding: 0 12px;
  font-size: var(--store-ops-control-fs);
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--store-ops-control-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.settings-table-work-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 12px;
}

.settings-table-work-tab-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-table-work-tab {
  border: 1px solid #c5d0da;
  background: #fff;
  color: #334155;
  cursor: pointer;
}

.settings-table-work-tab.active {
  background: #005df5;
  border-color: #005df5;
  color: #fff;
}

.settings-table-work-save {
  margin-left: auto;
  background: #005df5;
  border-color: #005df5;
  color: #fff;
  font-weight: 600;
}

.settings-master-pane[data-master-pane="menu"] {
  --menu-settings-control-h: 34px;
  --menu-settings-control-fs: 0.78rem;
  --menu-settings-control-radius: 8px;
}

.settings-master-pane[data-master-pane="menu"] .settings-menu-work-tabs {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: var(--menu-settings-control-h);
}

.settings-master-pane[data-master-pane="menu"] .settings-menu-work-tabs .settings-table-work-tab-group {
  margin-left: 0;
}

.settings-master-pane[data-master-pane="menu"] .settings-menu-work-tabs .settings-table-work-save {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0;
  flex-shrink: 0;
}

.settings-master-pane[data-master-pane="menu"] .settings-menu-work-tabs .settings-table-work-tab,
.settings-master-pane[data-master-pane="menu"] .settings-menu-work-tabs .settings-table-work-save {
  box-sizing: border-box;
  min-height: var(--menu-settings-control-h);
  height: var(--menu-settings-control-h);
  min-width: 5.5rem;
  padding: 0 12px;
  font-size: var(--menu-settings-control-fs);
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--menu-settings-control-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.settings-master-pane[data-master-pane="menu"] .settings-menu-work-tabs .settings-table-work-save {
  min-width: 72px;
}

#settingsMenuPlacementSection .settings-menu-placement-toolbar .touch-select,
#settingsMenuPlacementSection .settings-menu-placement-toolbar button,
#settingsMenuPlacementSection .settings-placement-actions button {
  box-sizing: border-box;
  min-height: var(--menu-settings-control-h, 34px);
  height: var(--menu-settings-control-h, 34px);
  padding: 0 12px;
  font-size: var(--menu-settings-control-fs, 0.78rem);
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--menu-settings-control-radius, 8px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#settingsMenuPlacementSection .settings-menu-placement-toolbar .settings-field-compact {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 0;
}

#settingsMenuPlacementSection .settings-menu-placement-page-label {
  line-height: var(--menu-settings-control-h, 34px);
}

.settings-work-panel[data-settings-panel="operation"]
  .settings-work-panel-body:has(#settingsTablePlacementSection:not(.hidden)) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#settingsTablePlacementSection {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

#settingsTablePlacementSection.hidden {
  display: none;
}

#settingsTablePlacementSection .settings-work-section-title {
  flex-shrink: 0;
}

.settings-placement-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  border: 1px solid #d9dee3;
  border-radius: 0 0 8px 8px;
  background: #fff;
  padding: 12px;
  margin-bottom: 14px;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}

.settings-placement-column {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.settings-placement-column-title {
  margin: 0 0 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #475569;
  flex-shrink: 0;
}

.settings-placement-grid {
  display: grid;
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  gap: 1px;
  background: #cbd5e1;
  border: 1px solid #94a3b8;
  border-radius: 4px;
  overflow: hidden;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  aspect-ratio: 1;
  align-self: center;
}

.settings-placement-pool {
  display: grid;
  flex: 1;
  min-height: 0;
  width: 100%;
  height: 100%;
  gap: 1px;
  background: #cbd5e1;
  border: 1px solid #94a3b8;
  border-radius: 4px;
  overflow: hidden;
  grid-template-columns: repeat(var(--placement-cols, 4), minmax(0, 1fr));
  grid-template-rows: repeat(var(--placement-rows, 4), minmax(0, 1fr));
}

.settings-placement-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  height: 100%;
  width: 100%;
  padding: clamp(1px, 0.4vmin, 4px);
  background: #fff;
  border: none;
  font-size: clamp(0.5rem, 1.6vmin, 0.82rem);
  font-weight: 600;
  color: #1e293b;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-placement-grid .settings-placement-cell.is-compose-zone {
  box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.45);
  background: #fffbfb;
}

.settings-placement-grid .settings-placement-cell.is-compose-zone.is-placed {
  background: #fef2f2;
}

.settings-placement-cell:hover:not(:disabled) {
  background: #f1f5f9;
}

.settings-placement-cell.is-selected {
  outline: 2px solid #005df5;
  outline-offset: -2px;
  z-index: 1;
}

.settings-placement-cell.is-placed {
  background: #dbeafe;
  color: #0050d4;
}

.settings-placement-grid .settings-placement-cell.is-placed {
  cursor: grab;
}

.settings-placement-grid .settings-placement-cell.is-placed.is-dragging {
  opacity: 0.45;
  cursor: grabbing;
}

.settings-placement-grid .settings-placement-cell.is-drop-target {
  outline: 2px solid #005df5;
  outline-offset: -2px;
  background: #eff6ff;
  z-index: 1;
}

.settings-placement-grid .settings-placement-cell.is-placed:active {
  cursor: grabbing;
}

.settings-placement-cell.is-used {
  background: #e2e8f0;
  color: #94a3b8;
  cursor: not-allowed;
}

.settings-placement-cell:disabled {
  cursor: not-allowed;
}

.settings-menu-placement-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: 12px;
}

.settings-menu-placement-page-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-menu-placement-page-label {
  min-width: 48px;
  text-align: center;
  font-weight: 600;
}

.settings-menu-placement-hint {
  flex: 1 1 100%;
  margin: 0;
}

.settings-menu-placement-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(4, 52px);
  gap: 6px;
  flex: 0 0 auto;
  width: min(100%, 420px);
  min-width: 300px;
  height: auto;
  align-self: start;
  padding: 8px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  box-sizing: border-box;
  overflow: visible;
}

.settings-menu-placement-grid .settings-menu-placement-cell,
.settings-menu-placement-grid .settings-menu-placement-grid-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  height: 52px;
  max-height: 52px;
  width: 100%;
  padding: 4px;
  font-size: 0.82rem;
  line-height: 1.15;
  word-break: break-word;
  text-align: center;
  border-radius: 6px;
  border: 1px dashed #e2e8f0;
  background: #fafafa;
  cursor: pointer;
  overflow: hidden;
  box-sizing: border-box;
}

.settings-menu-placement-grid .settings-menu-placement-cell.is-empty:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.settings-menu-placement-grid .settings-menu-placement-cell.is-empty.is-selected {
  background: #eff6ff;
  border: 2px solid #005df5;
  outline: none;
}

.settings-menu-placement-grid .settings-menu-placement-cell.is-placed {
  background: #dbeafe;
  color: #0050d4;
  border: 1px solid #93c5fd;
  border-style: solid;
  cursor: grab;
}

.settings-menu-placement-grid .settings-menu-placement-cell.is-placed.is-dragging {
  opacity: 0.45;
  cursor: grabbing;
}

.settings-menu-placement-grid .settings-menu-placement-cell.is-drop-target {
  border: 2px solid #005df5;
  background: #eff6ff;
  border-style: solid;
}

.settings-menu-placement-grid .settings-menu-placement-cell.is-placed:active {
  cursor: grabbing;
}

#settingsMenuPlacementSection.settings-work-panel-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 16px;
}

#settingsMenuPlacementSection .settings-menu-work-tabs {
  flex-shrink: 0;
}

#settingsMenuPlacementSection .settings-menu-placement-toolbar {
  flex-shrink: 0;
}

#settingsMenuPlacementSection .settings-placement-board {
  grid-template-columns: minmax(300px, 420px) minmax(200px, 1fr);
  align-items: start;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#settingsMenuPlacementSection .settings-placement-column:first-child {
  min-width: 300px;
  overflow: visible;
  align-self: start;
}

#settingsMenuPlacementSection .settings-placement-column:last-child {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

#settingsMenuPlacementSection .settings-placement-actions {
  flex-shrink: 0;
}

.settings-menu-placement-pool {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-rows: 48px;
  gap: 5px;
  align-content: start;
  flex: 1;
  min-height: 0;
  width: 100%;
  padding: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}

.settings-menu-placement-pool-cell {
  box-sizing: border-box;
  min-height: 48px;
  height: 48px;
  max-height: 48px;
  padding: 3px 4px;
  margin: 0;
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #fff;
  color: #1e293b;
  cursor: pointer;
  overflow: hidden;
  word-break: keep-all;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  -webkit-box-pack: center;
  white-space: normal;
}

.settings-menu-placement-pool-cell:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.settings-menu-placement-pool .settings-menu-placement-pool-cell.is-used {
  opacity: 0.45;
}

.settings-menu-placement-pool .hint {
  grid-column: 1 / -1;
  margin: 0;
  padding: 8px 4px;
  font-size: 0.85rem;
}

.settings-menu-placement-cell {
  font-size: 0.82rem;
  line-height: 1.15;
  word-break: break-word;
}


.toast-cat-tabs .cat-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.toast-cat-tabs .cat-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  color: inherit;
  font-size: 0.78em;
  font-weight: 700;
  line-height: 1.2;
}

.toast-cat-tabs .cat-tab.active .cat-tab-count {
  background: color-mix(in srgb, var(--cat-tab-color, #202124) 18%, transparent);
}

.settings-menu-placement-toolbar select {
  min-width: 12rem;
  min-height: var(--menu-settings-control-h, 34px);
  height: var(--menu-settings-control-h, 34px);
}

.settings-placement-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  flex-shrink: 0;
}

@media (max-width: 799px) {
  .settings-placement-board {
    grid-template-columns: 1fr;
  }
}

.settings-work-panel[data-settings-panel="operation"] .settings-option-cards,
.settings-work-panel[data-settings-panel="operation"] .settings-table-layout-compact,
.settings-work-panel[data-settings-panel="operation"] .settings-grid-inputs,
.settings-work-panel[data-settings-panel="operation"] .settings-table-shape-bar,
.settings-work-panel[data-settings-panel="operation"] .settings-table-list,
.settings-work-panel[data-settings-panel="smartorder"] .smart-order-grid,
.settings-work-panel[data-settings-panel="smartorder"] .smart-order-fields,
.settings-work-panel[data-settings-panel="smartorder"] .smart-order-links-bar,
.settings-work-panel[data-settings-panel="smartorder"] .smart-order-qr-list,
.settings-work-panel[data-settings-panel="storeops"] .store-info-grid,
.settings-work-panel[data-settings-panel="architecture"] .architecture-panel {
  border: 1px solid #d9dee3;
  border-radius: 0 0 8px 8px;
  background: #fff;
  padding: 12px;
  margin-bottom: 14px;
}



.settings-work-panel[data-settings-panel="smartorder"] .smart-order-links-bar {
  margin-top: 0;
}

.settings-work-panel[data-settings-panel="architecture"] .architecture-panel {
  max-width: none;
}

.settings-work-panel .settings-work-placeholder {
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
}

.settings-work-panel .settings-work-placeholder h2 {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px 8px 0 0;
  background: #6ca4d8;
  color: #fff;
  font-size: 0.95rem;
}

.settings-work-panel .settings-work-placeholder .hint {
  margin: 0;
  padding: 12px;
  border: 1px solid #d9dee3;
  border-top: none;
  border-radius: 0 0 8px 8px;
  background: #fff;
}







.settings-work-section-title {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 700;
  color: #37474f;
}

.screen-setup-panel {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.screen-setup-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.screen-btn-order-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.screen-btn-order-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #eef2f7;
  background: #fff;
  cursor: grab;
  touch-action: none;
}

.screen-btn-order-item:last-child {
  border-bottom: none;
}

.screen-btn-order-item.is-dragging {
  opacity: 0.55;
  background: #eff6ff;
}

.screen-btn-order-item.is-drop-target {
  background: #dbeafe;
}

.screen-btn-order-handle {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #f3f4f6;
  color: #64748b;
  font-size: 1rem;
  line-height: 1;
  user-select: none;
}

.screen-btn-order-label {
  font-size: 0.92rem;
  font-weight: 700;
  color: #111827;
}

.screen-btn-order-actions {
  display: inline-flex;
  gap: 6px;
}

.screen-btn-order-move {
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #374151;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

.screen-btn-order-move:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.screen-setup-reset-btn {
  align-self: flex-start;
}

.settings-option-cards {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 24px;
}



.settings-option-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid #eeeeee;
  cursor: pointer;
  background: #fff;
}

.settings-option-card:last-child {
  border-bottom: none;
}



.settings-option-card:has(input:checked) {
  background: #f5f9ff;
}



.settings-option-card input {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.settings-option-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-option-card-body strong {
  font-size: 1rem;
  color: #212121;
}



.settings-option-card-body span {
  font-size: 0.85rem;
  color: #757575;
}



.smart-order-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.smart-order-toggle {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.smart-order-fields {
  margin-bottom: 12px;
}

.smart-order-links-bar {
  margin: 20px 0 12px;
}

.smart-order-link-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.smart-order-link-label {
  flex: 0 0 auto;
  min-width: 4.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
}

.smart-order-link-code {
  flex: 1 1 200px;
  min-width: 0;
  font-size: 0.78rem;
  word-break: break-all;
  background: var(--bg-elevated);
  padding: 8px 10px;
  border-radius: 8px;
}

.smart-order-qr-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.smart-order-qr-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-panel);
}

.smart-order-qr-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.smart-order-qr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.smart-order-qr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.architecture-panel {
  max-width: 720px;
}

.architecture-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 16px 0 20px;
}

.architecture-step {
  flex: 1 1 120px;
  min-width: 120px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-panel);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.architecture-step strong {
  font-size: 0.95rem;
}

.architecture-step span:last-child {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.architecture-tag {
  display: inline-block;
  width: fit-content;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 999px;
  color: #fff;
}

.architecture-tag.foh {
  background: #005df5;
}

.architecture-tag.boh {
  background: #ea580c;
}

.architecture-tag.back {
  background: #059669;
}

.architecture-arrow {
  color: var(--text-muted);
  font-weight: 700;
  flex-shrink: 0;
}

.architecture-map {
  margin: 0 0 16px;
  padding-left: 1.2rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.architecture-map strong {
  color: var(--text);
}

.settings-form {
  margin-bottom: 12px;
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.settings-field span {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.settings-field-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.settings-field-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.settings-payment-mode {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 0 0 12px;
}

.settings-payment-mode legend {
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 0 4px;
}

.settings-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  cursor: pointer;
  font-size: 0.95rem;
}

.settings-table-list {
  display: grid;
  gap: 16px;
  max-height: min(700px, 76vh);
  overflow-y: auto;
  overflow-x: hidden;
  align-content: start;
  padding: 20px 12px;
  border-radius: 10px;
  background: #000;
}

.settings-grid-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 8px;
}

.settings-grid-inputs.settings-table-grid-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 12px 16px;
}

.settings-table-grid-row .settings-field-compact {
  flex: 0 0 auto;
  margin-bottom: 0;
  min-width: 88px;
}

.settings-table-grid-row .settings-field-compact .touch-input {
  width: 4.25rem;
  min-width: 0;
}

.settings-table-layout-compact {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 0.75rem;
  overflow-x: auto;
  padding-bottom: 2px;
}

.settings-table-layout-compact .settings-field-compact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  flex: 0 0 auto;
}

.settings-table-layout-compact .settings-field-compact span {
  font-size: 0.75rem;
  white-space: nowrap;
}

.settings-table-layout-compact .settings-field-compact .touch-input {
  width: 3.25rem;
  min-height: 28px;
  padding: 4px 6px;
  font-size: 0.75rem;
}

.settings-table-inline-sep {
  flex: 0 0 1px;
  align-self: stretch;
  min-height: 22px;
  margin: 0 2px;
  background: #d9dee3;
}

.settings-table-inline-sep-end {
  margin-left: auto;
}

.settings-table-layout-compact .settings-table-shape-label {
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  flex: 0 0 auto;
}

.settings-table-layout-compact .settings-shape-option {
  font-size: 0.75rem;
  gap: 4px;
  flex: 0 0 auto;
  white-space: nowrap;
}

.settings-table-layout-compact .settings-shape-option input {
  width: 14px;
  height: 14px;
}

.settings-table-prefix-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.settings-table-prefix-field span {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.settings-table-prefix-input {
  width: 3.75rem;
  min-height: 28px;
  padding: 4px 6px;
  font-size: 0.75rem;
}

.settings-table-fontsize-input {
  width: 3.25rem;
  min-height: 28px;
  padding: 4px 6px;
  font-size: 0.75rem;
  text-align: center;
}

.settings-table-name-color-field input[type="color"] {
  width: 2rem;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  cursor: pointer;
}

.settings-table-color-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: end;
  margin: 0 0 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
}

.settings-table-color-actions {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.settings-color-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-color-field span {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
}

.settings-color-field input[type="color"] {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  cursor: pointer;
}

.settings-table-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--settings-table-bg, #fff);
  border: 1px solid var(--settings-table-border, transparent);
  box-shadow: none;
  color: #37474f;
}

.settings-table-row-off {
  opacity: 0.58;
  filter: grayscale(0.25);
}

.settings-table-field-row-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.settings-table-field-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(72px, 0.7fr) minmax(0, 1fr);
  gap: 10px;
}

.settings-table-field-seats .settings-table-seats-input {
  text-align: center;
}

.settings-table-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-table-field > span {
  font-size: 0.7rem;
  line-height: 1.2;
  font-weight: 700;
  color: #64748b;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.settings-table-use {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  box-sizing: border-box;
  min-height: 34px;
  height: 34px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  min-width: 0;
}

.settings-table-use input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  margin: 0;
}

.settings-table-use-inline {
  flex: 1 1 auto;
  justify-content: flex-start;
  min-width: 0;
  min-height: 34px;
  height: 34px;
  padding: 0 2px;
  border: none;
  background: transparent;
  font-size: 0.78rem;
}

.settings-table-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}

.settings-table-no-input,
.settings-table-seats-input {
  box-sizing: border-box;
  min-height: 34px;
  height: 34px;
  padding: 0 8px;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
}

.settings-table-row .touch-input.settings-table-name {
  box-sizing: border-box;
  min-height: 34px;
  height: 34px;
  min-width: 0;
  padding: 0 10px;
  font-size: var(--table-floor-name-font-size, 0.82rem);
  font-weight: 700;
  color: var(--table-floor-name-color, #000000);
  text-align: left;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
}

.settings-table-shape {
  box-sizing: border-box;
  flex: 0 0 auto;
  min-width: 5.5rem;
  min-height: 34px;
  height: 34px;
  padding: 0 8px;
  font-size: 0.75rem;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #0f172a;
}

.settings-table-bottom {
  display: flex;
  justify-content: flex-end;
}

.settings-table-shape-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-panel);
}

.settings-table-shape-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
}

.settings-shape-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.settings-shape-option input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.settings-product-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: none;
  overflow: visible;
}

.settings-work-panel-body .settings-product-list {
  max-height: none;
}

.settings-product-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
}

.settings-product-info strong {
  display: block;
}

.settings-product-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* 설정 — 메뉴 관리 그리드 */
.settings-menu-grid-wrap {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
}

.settings-menu-grid {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 0.88rem;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact) {
  --settings-menu-color-col-width: calc(11 * 18px + 10 * 3px + 6px);
  --settings-menu-sort-col-width: 2.75rem;
  table-layout: fixed;
  min-width: 0;
  width: 100%;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-full {
  --menu-full-w-sort: 4%;
  --menu-full-w-name: 16%;
  --menu-full-w-icon: 6%;
  --menu-full-w-color: 5%;
  --menu-full-w-price: 5%;
  --menu-full-w-cat: 6%;
  --menu-full-w-yn: 4%;
  --menu-full-w-fontsize: 5%;
  --menu-full-w-mods: 7%;
  --menu-full-w-set: 7%;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  table-layout: fixed;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-full .settings-menu-sort-col {
  width: var(--menu-full-w-sort);
  min-width: 0;
  max-width: none;
  position: static;
  box-shadow: none;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-full .settings-menu-name-col {
  width: var(--menu-full-w-name);
  min-width: 0;
  max-width: none;
  overflow: hidden;
  position: static;
  box-shadow: none;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-full .settings-menu-image-col {
  width: var(--menu-full-w-icon);
  min-width: 0;
  max-width: none;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-full .settings-menu-color-col,
.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-full .settings-menu-color-popover-cell {
  width: var(--menu-full-w-color);
  min-width: 0;
  max-width: none;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-full .settings-menu-price-col {
  width: var(--menu-full-w-price);
  min-width: 0;
  max-width: none;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-full .settings-menu-cat-col {
  width: var(--menu-full-w-cat);
  min-width: 0;
  max-width: none;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-full .settings-menu-yn-col {
  width: var(--menu-full-w-yn);
  min-width: 0;
  max-width: none;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-full .settings-menu-fontsize-col {
  width: var(--menu-full-w-fontsize);
  min-width: 0;
  max-width: none;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-full .settings-menu-mods-col {
  width: var(--menu-full-w-mods);
  min-width: 0;
  max-width: none;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-full .settings-menu-set-col {
  width: var(--menu-full-w-set);
  min-width: 0;
  max-width: none;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-full .settings-menu-mods-col .btn-menu-action,
.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-full .settings-menu-set-col .btn-menu-action {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  height: 100%;
  max-height: 40px;
  padding: 2px 4px;
  font-size: 0.62rem;
  box-sizing: border-box;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-full .settings-menu-cell-input,
.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-full select.settings-menu-cell-input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-full .settings-menu-name-col .settings-menu-cell-input.settings-menu-name {
  text-overflow: ellipsis;
  overflow: hidden;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-full .settings-menu-image-cell {
  gap: 2px;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-full .settings-menu-image-thumb {
  width: min(100%, 36px);
  height: 36px;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-compact {
  --menu-compact-w-sort: 5%;
  --menu-compact-w-name: 24%;
  --menu-compact-w-icon: 9%;
  --menu-compact-w-color: 7%;
  --menu-compact-w-price: 8%;
  --menu-compact-w-cat: 14%;
  --menu-compact-w-yn: 7%;
  --menu-compact-w-mods: 10%;
  --menu-compact-w-set: 9%;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  table-layout: fixed;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-compact .settings-menu-sort-col {
  width: var(--menu-compact-w-sort);
  min-width: 0;
  max-width: none;
  position: static;
  box-shadow: none;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-compact .settings-menu-name-col {
  width: var(--menu-compact-w-name);
  min-width: 0;
  max-width: none;
  overflow: hidden;
  position: static;
  box-shadow: none;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-compact .settings-menu-image-col {
  width: var(--menu-compact-w-icon);
  min-width: 0;
  max-width: none;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-compact .settings-menu-color-col,
.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-compact .settings-menu-color-popover-cell {
  width: var(--menu-compact-w-color);
  min-width: 0;
  max-width: none;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-compact .settings-menu-price-col {
  width: var(--menu-compact-w-price);
  min-width: 0;
  max-width: none;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-compact .settings-menu-cat-col {
  width: var(--menu-compact-w-cat);
  min-width: 0;
  max-width: none;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-compact .settings-menu-yn-col {
  width: var(--menu-compact-w-yn);
  min-width: 0;
  max-width: none;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-compact .settings-menu-mods-col {
  width: var(--menu-compact-w-mods);
  min-width: 0;
  max-width: none;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-compact .settings-menu-set-col {
  width: var(--menu-compact-w-set);
  min-width: 0;
  max-width: none;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-compact .settings-menu-mods-col .btn-menu-action,
.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-compact .settings-menu-set-col .btn-menu-action {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  height: 100%;
  max-height: 40px;
  padding: 2px 4px;
  font-size: 0.62rem;
  box-sizing: border-box;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-compact .settings-menu-mods-col .btn-menu-action-label {
  display: inline;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-compact .settings-menu-cell-input,
.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-compact select.settings-menu-cell-input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-compact .settings-menu-name-col .settings-menu-cell-input.settings-menu-name {
  text-overflow: ellipsis;
  overflow: hidden;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-compact .settings-menu-image-cell {
  gap: 2px;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-compact .settings-menu-image-thumb {
  width: min(100%, 36px);
  height: 36px;
}

#settingsMenuGridWrap:has(.settings-menu-grid-view-compact),
#settingsMenuGridWrap:has(.settings-menu-grid-view-full) {
  overflow-x: hidden;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-compact [data-menu-col-tier="detail"] {
  display: none;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact) .settings-menu-sort-col {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg-panel);
  box-shadow: 1px 0 0 var(--border);
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact) thead th.settings-menu-sort-col {
  z-index: 4;
  background: var(--bg-elevated);
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact) .settings-menu-name-col {
  position: sticky;
  left: var(--settings-menu-sort-col-width, 2.75rem);
  z-index: 2;
  background: var(--bg-panel);
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.04);
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact) thead th.settings-menu-name-col {
  z-index: 4;
  background: var(--bg-elevated);
}

.settings-menu-name-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 1px 2px 1px 1px;
  min-width: 0;
}

.settings-menu-name-cell.is-sold-out .settings-menu-name {
  text-decoration: line-through;
  opacity: 0.65;
}

.settings-menu-row-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.menu-grid-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.1rem;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
}

.menu-grid-badge-mods {
  background: rgba(0, 93, 245, 0.15);
  color: #0050d4;
}

.menu-grid-badge-set {
  background: rgba(0, 0, 0, 0.12);
  color: var(--text);
}

.menu-grid-badge-off {
  background: rgba(239, 68, 68, 0.15);
  color: #b91c1c;
}

.settings-menu-yn-toggle {
  display: flex;
  gap: 2px;
  justify-content: center;
  align-items: center;
  padding: 4px 2px;
}

.settings-menu-yn-btn {
  min-width: 26px;
  min-height: 26px;
  padding: 0 4px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.settings-menu-yn-btn:hover {
  border-color: var(--accent, #005df5);
}

.settings-menu-yn-btn.is-on[data-yn-value="Y"] {
  background: rgba(34, 197, 94, 0.18);
  border-color: #22c55e;
  color: #15803d;
}

.settings-menu-yn-btn.is-on[data-yn-value="N"] {
  background: rgba(148, 163, 184, 0.2);
  border-color: #94a3b8;
  color: #475569;
}

.settings-menu-yn-toggle.semantic .settings-menu-yn-btn.is-on[data-yn-value="N"] {
  background: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
  color: #b91c1c;
}

.settings-menu-actions-group {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 3px;
  padding: 3px 2px;
  align-items: center;
  justify-content: center;
}

.btn-menu-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 24px;
  min-width: 0;
  padding: 2px 5px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.btn-menu-action:hover {
  border-color: var(--accent, #005df5);
  background: rgba(0, 93, 245, 0.06);
}

.btn-menu-action.has-mods {
  border-color: rgba(0, 93, 245, 0.45);
  color: #0050d4;
}

.btn-menu-action.is-set {
  border-color: rgba(0, 0, 0, 0.35);
  font-weight: 800;
}

.btn-menu-action-del {
  color: #b91c1c;
  font-size: 0.95rem;
  min-height: 24px;
  padding: 2px 4px;
}

.btn-menu-action-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1rem;
  height: 1rem;
  padding: 0 3px;
  border-radius: 999px;
  background: rgba(0, 93, 245, 0.2);
  font-size: 0.58rem;
  font-weight: 800;
}

#settingsMenuGridWrap.settings-menu-grid-wrap {
  width: 100%;
  overflow-x: auto;
}

.settings-menu-grid thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 7px 5px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  font-size: 0.78rem;
  line-height: 1.2;
}

.settings-menu-grid tbody td {
  padding: 0;
  border: 1px solid var(--border);
  vertical-align: middle;
  background: var(--bg-panel);
}

.settings-menu-grid-row:hover td {
  background: rgba(0, 0, 0, 0.02);
}



.settings-menu-cell-input,
.settings-menu-grid select.settings-menu-cell-input {
  width: 100%;
  min-height: 38px;
  padding: 6px 8px;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  box-sizing: border-box;
}

.settings-menu-cell-input:focus,
.settings-menu-grid select.settings-menu-cell-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: var(--bg);
}

.settings-menu-num {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.settings-menu-name {
  text-align: left;
}

.settings-menu-grid .settings-menu-name-col {
  width: auto;
  min-width: var(--settings-menu-name-col-width, 6rem);
  max-width: none;
  box-sizing: border-box;
}

.settings-menu-grid-row:hover td.settings-menu-sort-col,
.settings-menu-grid-row:hover td.settings-menu-name-col {
  background: rgba(0, 0, 0, 0.02);
}

.settings-menu-grid-row-dirty td.settings-menu-sort-col,
.settings-menu-grid-row-dirty td.settings-menu-name-col {
  background: rgba(250, 204, 21, 0.12);
}

.settings-menu-grid-row-off td.settings-menu-sort-col,
.settings-menu-grid-row-off td.settings-menu-name-col {
  background: var(--bg-panel);
  opacity: 0.72;
}

.settings-menu-name-col .settings-menu-cell-input.settings-menu-name {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 4px 6px;
  white-space: nowrap;
}

.settings-menu-yn,
.settings-menu-cat {
  text-align: center;
  cursor: pointer;
}

.settings-menu-color-cell,
.settings-menu-color-col {
  text-align: left;
  white-space: nowrap;
  width: var(--settings-menu-color-col-width, calc(11 * 20px + 10 * 4px + 8px));
  min-width: var(--settings-menu-color-col-width, calc(11 * 20px + 10 * 4px + 8px));
  max-width: var(--settings-menu-color-col-width, calc(11 * 20px + 10 * 4px + 8px));
  overflow: visible;
  padding: 0 4px;
  box-sizing: border-box;
}

.tile-color-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.tile-color-field-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.tile-color-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tile-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 320px;
}

.tile-color-swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.tile-color-swatch.is-white {
  border: 1px solid #ccc;
  color: #3b5998;
}

.tile-color-swatch.active {
  box-shadow: 0 0 0 2px var(--bg-panel, #fff), 0 0 0 4px #3b5998;
}

.tile-color-picker-compact .tile-color-swatches {
  flex-wrap: nowrap;
  max-width: none;
  gap: 4px;
}

.tile-color-swatch-compact {
  width: 20px;
  height: 20px;
  font-size: 0.55rem;
}

.settings-menu-color-cell .tile-color-picker-compact {
  padding: 4px 0;
  overflow: visible;
}

.settings-menu-grid .settings-menu-color-popover-cell {
  width: 2.75rem;
  min-width: 2.75rem;
  max-width: 2.75rem;
  text-align: center;
  overflow: visible;
  padding: 0 2px;
}

.tile-color-picker-popover {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 4px 0;
}

.tile-color-trigger {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.tile-color-trigger.is-white {
  border: 1px solid #ccc;
  color: #3b5998;
}

.tile-color-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.tile-color-popover {
  padding: 8px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

.tile-color-picker-popover .tile-color-swatches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  max-width: none;
  flex-wrap: nowrap;
}

.tile-color-picker-popover .tile-color-swatch-compact {
  width: 26px;
  height: 26px;
  font-size: 0.62rem;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact) .settings-menu-cat-col {
  width: 5.75rem;
  min-width: 5.75rem;
  max-width: 7.5rem;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact) .settings-menu-cat-col .settings-menu-cat {
  min-height: 34px;
  padding: 4px 2px;
  font-size: 0.78rem;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact) .settings-menu-yn-col {
  width: 3.5rem;
  min-width: 3.5rem;
  max-width: 3.75rem;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact) .settings-menu-yn-col .settings-menu-yn {
  min-height: 34px;
  height: 100%;
  max-height: 40px;
  padding: 0 4px;
  font-size: 0.78rem;
  text-align: center;
  text-align-last: center;
  cursor: pointer;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact) .settings-menu-spacer-col {
  width: auto;
  min-width: 0;
  padding: 0;
  border-left: none;
  border-top-color: transparent;
  border-bottom-color: transparent;
  background: transparent;
}

.settings-menu-actions-col,
.settings-menu-mods-col,
.settings-menu-set-col {
  text-align: center;
  padding: 0;
  vertical-align: middle;
}

.settings-menu-mods-col .btn-menu-action,
.settings-menu-set-col .btn-menu-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.settings-menu-actions-col {
  width: 4.25rem;
  min-width: 4.25rem;
  max-width: 4.25rem;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact) .settings-menu-actions-col {
  width: 7.5rem;
  min-width: 7.5rem;
  max-width: 7.5rem;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-compact .settings-menu-row-badges {
  display: none;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-compact .settings-menu-cell-input {
  min-height: 32px;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-compact .settings-menu-name-col .settings-menu-cell-input.settings-menu-name {
  min-height: 30px;
}

.settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact).settings-menu-grid-view-compact .settings-menu-image-clear {
  width: 18px;
  height: 18px;
  font-size: 0.78rem;
}

.settings-menu-actions-col .btn-del-product-grid {
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
}

.settings-menu-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
}

.settings-menu-th-sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.settings-menu-th-sortable:hover {
  background: rgba(0, 0, 0, 0.04);
}



.settings-menu-th-sortable.settings-menu-th-active {
  background: rgba(0, 93, 245, 0.12);
  color: var(--accent, #005df5);
}

.settings-menu-sort-order {
  min-width: 0;
  width: 100%;
  padding: 8px 2px;
  font-size: 0.85rem;
}

.settings-menu-grid th.settings-menu-sort-col,
.settings-menu-grid td.settings-menu-sort-col {
  width: 2.75rem;
  max-width: 3rem;
  min-width: 2.5rem;
  padding: 0;
  text-align: center;
  font-size: 0.82rem;
}

.settings-menu-sort-col .settings-menu-cell-input {
  min-height: 38px;
  padding: 6px 1px;
}

.settings-menu-grid th.settings-menu-yn-col,
.settings-menu-grid td.settings-menu-yn-col {
  width: 3.25rem;
  min-width: 3.25rem;
  max-width: 3.5rem;
  text-align: center;
  padding: 0;
}

.settings-menu-grid-category .settings-menu-yn-col .settings-menu-yn {
  min-height: 34px;
  padding: 4px 2px;
  font-size: 0.78rem;
}

.settings-menu-grid th.settings-menu-num-col,
.settings-menu-grid td.settings-category-count {
  width: 3.75rem;
  max-width: 4rem;
  min-width: 3.5rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);
  padding: 0;
}

.settings-menu-grid th.settings-menu-fontsize-col,
.settings-menu-grid td.settings-menu-fontsize-col {
  width: 4rem;
  min-width: 4rem;
  max-width: 4rem;
  text-align: center;
}

.settings-menu-grid th.settings-menu-image-col,
.settings-menu-grid td.settings-menu-image-col {
  width: 4.5rem;
  min-width: 4.5rem;
  max-width: 4.5rem;
  text-align: center;
}

.settings-menu-image-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.settings-menu-image-picker {
  display: inline-flex;
  cursor: pointer;
}

.settings-menu-image-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
  overflow: hidden;
}

.settings-menu-image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.settings-menu-image-placeholder {
  font-size: 1.2rem;
  font-weight: 700;
  color: #94a3b8;
  line-height: 1;
}

.settings-menu-image-clear {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 999px;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.settings-menu-image-clear.hidden {
  display: none;
}

.settings-menu-fontsize-col .settings-menu-fontsize-input {
  width: 100%;
  min-width: 0;
  padding-left: 4px;
  padding-right: 4px;
  text-align: center;
}

.settings-menu-grid-compact .settings-menu-fontsize-col {
  width: 3.75rem;
  min-width: 3.75rem;
  max-width: 3.75rem;
}

.settings-category-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 3rem;
  min-height: 32px;
  padding: 4px 6px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #334155;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.settings-category-expand-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

.settings-category-expand-btn.is-expanded {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #0050d4;
}

.settings-category-expand-icon {
  font-size: 0.62rem;
  line-height: 1;
}

.settings-category-products-row td {
  padding: 0 4px 8px;
  border-top: none;
  background: rgba(148, 163, 184, 0.06);
}

.settings-category-products-indent {
  width: var(--menu-category-w-sort, 7%);
  min-width: 0;
  max-width: none;
  padding: 0;
  border-top: none;
  background: rgba(148, 163, 184, 0.06);
}

.settings-category-products-cell {
  padding: 0 4px 8px 0;
  vertical-align: top;
  width: auto;
}

.settings-category-product-panel {
  margin: 0;
  padding: 4px 0 2px;
  width: 100%;
  min-width: 0;
}

.settings-category-product-grid-wrap {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: auto;
  max-height: min(340px, 42vh);
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-panel);
}

.settings-category-products-cell .settings-menu-grid-compact.settings-menu-grid-nested {
  --settings-menu-color-col-width: 2.75rem;
  width: 100%;
  min-width: 980px;
  max-width: none;
  table-layout: fixed;
}

.settings-category-products-cell .settings-menu-grid-compact.settings-menu-grid-nested thead th,
.settings-category-products-cell .settings-menu-grid-compact.settings-menu-grid-nested tbody td {
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 2px;
  box-sizing: border-box;
  vertical-align: middle;
}

.settings-category-products-cell .settings-menu-grid-compact.settings-menu-grid-nested .settings-menu-sort-col {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg-panel);
  box-shadow: 1px 0 0 var(--border);
}

.settings-category-products-cell .settings-menu-grid-compact.settings-menu-grid-nested thead th.settings-menu-sort-col {
  z-index: 4;
  background: var(--bg-elevated);
}

.settings-category-products-cell .settings-menu-grid-compact.settings-menu-grid-nested .settings-menu-cell-input,
.settings-category-products-cell .settings-menu-grid-compact.settings-menu-grid-nested select.settings-menu-cell-input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 4px;
  box-sizing: border-box;
}

.settings-category-products-cell .settings-menu-grid-compact.settings-menu-grid-nested .settings-menu-name-col .settings-menu-cell-input.settings-menu-name {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.settings-category-products-cell .settings-menu-grid-compact.settings-menu-grid-nested .settings-menu-name-cell {
  flex-direction: row;
  align-items: center;
  height: 35px;
  max-height: 35px;
  padding: 0 2px;
  gap: 0;
  box-sizing: border-box;
}

.settings-category-products-cell .settings-menu-grid-compact.settings-menu-grid-nested .settings-menu-row-badges {
  display: none;
}

.settings-category-products-cell .settings-menu-grid-compact.settings-menu-grid-nested .settings-menu-color-col,
.settings-category-products-cell .settings-menu-grid-compact.settings-menu-grid-nested .settings-menu-color-popover-cell,
.settings-category-products-cell .settings-menu-grid-compact.settings-menu-grid-nested .settings-menu-color-cell {
  text-align: center;
  overflow: visible;
  padding: 0 2px;
  white-space: nowrap;
}

.settings-category-products-cell .settings-menu-grid-compact.settings-menu-grid-nested .tile-color-picker-popover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  max-height: 35px;
  padding: 0;
}

.settings-category-products-cell .settings-menu-grid-compact.settings-menu-grid-nested .tile-color-trigger {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  flex-shrink: 0;
  font-size: 0.68rem;
}

.settings-category-products-cell .settings-menu-grid-compact.settings-menu-grid-nested .settings-menu-image-thumb {
  width: min(100%, 30px);
  height: 30px;
}

.settings-category-products-cell .settings-menu-grid-compact.settings-menu-grid-nested .settings-menu-yn-col .settings-menu-yn {
  width: 100%;
  min-width: 0;
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0;
  font-size: 0.68rem;
  box-sizing: border-box;
}

.settings-category-products-cell .settings-menu-grid-compact.settings-menu-grid-nested .settings-menu-mods-col,
.settings-category-products-cell .settings-menu-grid-compact.settings-menu-grid-nested .settings-menu-set-col {
  width: 4.5rem;
  min-width: 4.5rem;
  max-width: 4.5rem;
  text-align: center;
  padding: 0 1px;
}

.settings-category-products-cell .settings-menu-grid-compact.settings-menu-grid-nested .settings-menu-mods-col .btn-menu-action,
.settings-category-products-cell .settings-menu-grid-compact.settings-menu-grid-nested .settings-menu-set-col .btn-menu-action {
  width: 100%;
  min-width: 0;
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 2px 4px;
  font-size: 0.64rem;
  box-sizing: border-box;
}

.settings-category-products-cell .settings-menu-grid-compact.settings-menu-grid-nested .btn-menu-action-label {
  display: inline;
}

.settings-menu-grid-category {
  --menu-category-w-sort: 6%;
  --menu-category-name-display-em: 12;
  --menu-category-w-color: 3rem;
  --menu-category-w-fontsize: 9%;
  --menu-category-w-yn: 7%;
  --menu-category-w-menu: 9%;
  --menu-category-w-actions: 7%;
  --settings-menu-color-col-width: 3rem;
  table-layout: fixed;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  font-size: 0.82rem;
}

.settings-menu-grid-category thead th {
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 4px;
  font-size: 0.74rem;
  box-sizing: border-box;
  vertical-align: middle;
}

.settings-menu-grid-category > tbody > tr.settings-menu-grid-row > td {
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 4px;
  box-sizing: border-box;
  vertical-align: middle;
}

.settings-menu-grid-category .settings-menu-cell-input,
.settings-menu-grid-category select.settings-menu-cell-input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 35px;
  height: 35px;
  max-height: 35px;
  padding: 0 6px;
  font-size: 0.78rem;
  box-sizing: border-box;
}

.settings-menu-grid-category .settings-menu-sort-col {
  width: var(--menu-category-w-sort);
  min-width: 0;
  max-width: none;
}

.settings-menu-grid-category .settings-menu-name-col {
  width: calc(var(--menu-category-name-display-em) * 1em);
  min-width: 6rem;
  max-width: calc(var(--menu-category-name-display-em) * 1em);
  overflow: hidden;
}

.settings-menu-grid-category .settings-menu-name-col .settings-menu-cell-input.settings-menu-name {
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.settings-menu-grid-category .settings-menu-spacer-col {
  width: 0;
  min-width: 0;
  max-width: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: transparent;
}

.settings-menu-grid-category .settings-category-products-row .settings-menu-spacer-col,
.settings-menu-grid-category .settings-category-products-row td:last-child {
  border-top: none;
}

.settings-menu-grid-category .settings-menu-color-col,
.settings-menu-grid-category .settings-menu-color-popover-cell,
.settings-menu-grid-category .settings-menu-color-cell {
  width: var(--menu-category-w-color);
  min-width: var(--menu-category-w-color);
  max-width: var(--menu-category-w-color);
  text-align: center;
  overflow: visible;
  padding: 0;
  white-space: nowrap;
}

.settings-menu-grid-category thead th.settings-menu-color-col,
.settings-menu-grid-category thead th.settings-menu-color-popover-cell {
  text-align: center;
  padding: 0;
}

.settings-menu-grid-category td.settings-menu-color-cell {
  text-align: center;
  vertical-align: middle;
}

.settings-menu-grid-category .tile-color-picker-popover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 35px;
  max-height: 35px;
  padding: 0;
  margin: 0 auto;
}

.settings-menu-grid-category .tile-color-trigger {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  flex-shrink: 0;
  font-size: 0;
  line-height: 0;
  color: transparent;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.settings-menu-grid-category .settings-menu-fontsize-col {
  width: var(--menu-category-w-fontsize);
  min-width: 0;
  max-width: none;
}

.settings-menu-grid-category .settings-menu-yn-col {
  width: var(--menu-category-w-yn);
  min-width: 0;
  max-width: none;
}

.settings-menu-grid-category .settings-menu-yn-col .settings-menu-yn {
  min-height: 35px;
  height: 35px;
  max-height: 35px;
  padding: 0;
  font-size: 0.74rem;
}

.settings-menu-grid-category .settings-category-count {
  width: var(--menu-category-w-menu);
  min-width: 0;
  max-width: none;
}

.settings-menu-grid-category .settings-menu-actions-col {
  width: var(--menu-category-w-actions);
  min-width: 0;
  max-width: none;
}

.settings-menu-grid-category .settings-category-expand-btn {
  width: 100%;
  min-width: 0;
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 4px;
  font-size: 0.76rem;
  box-sizing: border-box;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text);
}

.settings-menu-grid-category .settings-category-expand-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  border: none;
}

.settings-menu-grid-category .settings-category-expand-btn.is-expanded {
  background: rgba(0, 80, 212, 0.08);
  border: none;
  color: #0050d4;
}

.settings-menu-grid-category .btn-del-category-grid {
  width: 35px;
  min-width: 35px;
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0;
  font-size: 1.1rem;
  box-sizing: border-box;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
}

.settings-menu-grid-category .btn-del-category-grid:hover {
  background: rgba(220, 38, 38, 0.08);
  border: none;
  color: #b91c1c;
}

.settings-menu-grid-category .tile-color-trigger.is-white {
  border: 1px solid #cbd5e1;
  box-shadow: none;
}

.settings-menu-grid-category .tile-color-swatch-compact {
  width: 17px;
  height: 17px;
  font-size: 0.48rem;
}

.settings-menu-grid-category .tile-color-picker-compact .tile-color-swatches {
  gap: 2px;
  justify-content: flex-start;
}

#settingsCategoryGridWrap.settings-menu-grid-wrap {
  width: 100%;
  overflow-x: hidden;
}

.settings-menu-grid-compact {
  --settings-menu-color-col-width: calc(11 * 18px + 10 * 4px + 8px);
  min-width: 0;
  width: 100%;
  max-width: 100%;
  font-size: 0.76rem;
  table-layout: fixed;
}

.settings-menu-grid-compact thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 5px 4px;
  font-size: 0.68rem;
  line-height: 1.2;
}

.settings-menu-grid-compact tbody td {
  padding: 0;
}

.settings-menu-grid-compact .settings-menu-cell-input,
.settings-menu-grid-compact select.settings-menu-cell-input {
  min-height: 32px;
  padding: 4px 5px;
  font-size: 0.74rem;
}

.settings-menu-grid-compact .settings-menu-sort-col {
  width: 2.75rem;
  min-width: 2.75rem;
  max-width: 2.75rem;
}

.settings-menu-grid-compact .settings-menu-color-col {
  width: var(--settings-menu-color-col-width);
  min-width: var(--settings-menu-color-col-width);
  max-width: var(--settings-menu-color-col-width);
}

.settings-menu-grid-compact .settings-menu-yn-col {
  width: 2.85rem;
  min-width: 2.85rem;
  max-width: 2.85rem;
}

.settings-menu-grid-compact .settings-menu-cat-col {
  width: 5rem;
  min-width: 5rem;
  max-width: 6.5rem;
}

.settings-menu-grid-compact .settings-menu-color-cell {
  overflow: visible;
  padding: 0 3px;
}

.settings-menu-grid-compact .settings-menu-price-col {
  width: 5.5ch;
  min-width: 5.5ch;
}

.settings-menu-grid-compact .settings-menu-actions-col {
  width: 7rem;
  min-width: 7rem;
  max-width: 7rem;
}

.settings-menu-grid-compact .settings-menu-actions-col .btn-del-product-grid {
  min-width: 30px;
  min-height: 30px;
  font-size: 1.1rem;
}

.settings-menu-grid-compact .tile-color-picker-compact {
  padding: 1px 0;
}

.settings-menu-grid-compact .tile-color-swatch-compact {
  width: 18px;
  height: 18px;
}

/* 분류 펼침 중첩 메뉴: compact 전역 열 너비 충돌 방지 */
.settings-category-products-cell .settings-menu-grid-compact.settings-menu-grid-nested .settings-menu-sort-col {
  width: 3rem;
  min-width: 3rem;
  max-width: 3rem;
}

.settings-category-products-cell .settings-menu-grid-compact.settings-menu-grid-nested .settings-menu-name-col {
  width: auto;
  min-width: 0;
  max-width: none;
  overflow: hidden;
}

.settings-category-products-cell .settings-menu-grid-compact.settings-menu-grid-nested .settings-menu-image-col {
  width: 3rem;
  min-width: 3rem;
  max-width: 3rem;
}

.settings-category-products-cell .settings-menu-grid-compact.settings-menu-grid-nested .settings-menu-color-col,
.settings-category-products-cell .settings-menu-grid-compact.settings-menu-grid-nested .settings-menu-color-popover-cell,
.settings-category-products-cell .settings-menu-grid-compact.settings-menu-grid-nested .settings-menu-color-cell {
  width: 2.75rem;
  min-width: 2.75rem;
  max-width: 2.75rem;
}

.settings-category-products-cell .settings-menu-grid-compact.settings-menu-grid-nested .settings-menu-price-col {
  width: 4.25rem;
  min-width: 4.25rem;
  max-width: 4.25rem;
}

.settings-category-products-cell .settings-menu-grid-compact.settings-menu-grid-nested .settings-menu-cat-col {
  width: 7rem;
  min-width: 7rem;
  max-width: 7rem;
}

.settings-category-products-cell .settings-menu-grid-compact.settings-menu-grid-nested .settings-menu-cat-col .settings-menu-cat {
  padding: 0 16px 0 3px;
  font-size: 0.66rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.settings-category-products-cell .settings-menu-grid-compact.settings-menu-grid-nested .settings-menu-yn-col {
  width: 2.5rem;
  min-width: 2.5rem;
  max-width: 2.5rem;
}

.settings-category-products-cell .settings-menu-grid-compact.settings-menu-grid-nested .settings-menu-fontsize-col {
  width: 3.25rem;
  min-width: 3.25rem;
  max-width: 3.25rem;
}

.settings-menu-grid th.settings-menu-price-col,
.settings-menu-grid td.settings-menu-price-col {
  width: 7ch;
  max-width: 7.5ch;
  min-width: 6.5ch;
  padding: 0;
  text-align: center;
  font-size: 0.82rem;
}

.settings-menu-price-col .settings-menu-price-input {
  min-width: 0;
  width: 100%;
  padding: 8px 2px;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.settings-menu-grid-row-off td {
  opacity: 0.55;
  background: rgba(0, 0, 0, 0.03);
}

.settings-menu-grid-row-dirty td {
  background: rgba(251, 191, 36, 0.12);
}



.settings-menu-save-hint {
  margin: 0 0 10px;
}

/* SET 메뉴 구성 */
.set-product-modal.modal-content {
  width: min(560px, calc(100vw - 24px));
  max-height: min(92vh, 860px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.set-product-modal.modal-content[data-option-cols="3"] {
  width: min(780px, calc(100vw - 24px));
}

.set-product-modal.modal-content[data-option-cols="4"] {
  width: min(980px, calc(100vw - 24px));
}

.set-product-modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(calc(92vh - 148px), 680px);
  overflow-x: hidden;
  overflow-y: auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

.set-config-modal-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-height: min(70vh, 720px);
  overflow: auto;
}

.set-product-modal-sub {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.set-product-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.set-product-group-head {
  font-size: 0.92rem;
  font-weight: 700;
}

.set-product-option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.set-product-modal .set-product-group {
  gap: 8px;
}

.set-product-modal .set-product-group-head {
  font-size: 0.88rem;
  color: #334155;
}

.set-product-modal .set-product-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
}

.set-product-modal[data-option-cols="3"] .set-product-option-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.set-product-modal[data-option-cols="4"] .set-product-option-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.set-product-modal[data-option-cols="1"] .set-product-option-grid {
  grid-template-columns: 1fr;
}

.set-product-option-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 92px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-panel);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.set-product-modal .set-product-option-card {
  min-height: 0;
  padding: 8px 10px;
  gap: 6px;
}

.set-product-option-title-row {
  line-height: 1.35;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.set-product-modal .set-product-option-title-row {
  font-size: 0.84rem;
}

.set-product-modal .set-product-option-name {
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
}

.set-product-modal .set-product-option-delta {
  margin-left: 2ch;
  font-size: 0.92em;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.set-product-modal .set-product-option-card.is-selected {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: inset 0 0 0 2px #2563eb;
}

.set-product-modal .set-product-select-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  height: 30px;
  font-size: 0.8rem;
  margin-top: 2px;
  width: 100%;
  text-align: center;
}

.set-product-option-card.is-selected {
  border-color: #2563eb;
  box-shadow: inset 0 0 0 2px #2563eb;
  background: #eff6ff;
}

.set-product-option-name {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.3;
}

.set-product-option-delta {
  font-size: 0.78rem;
  color: var(--muted);
}

.set-product-select-btn,
.set-product-qty-btn {
  min-height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  font-weight: 700;
}

.set-product-option-card.is-selected .set-product-select-btn {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.set-product-modal .set-product-option-card.is-selected .set-product-select-btn {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #fff;
}

.set-product-qty-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.set-product-qty-btn {
  width: 34px;
  padding: 0;
}

.set-product-qty-value {
  min-width: 1.5rem;
  text-align: center;
  font-weight: 700;
}

.set-product-modal-footer.modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: 12px 16px;
}

.set-product-modal-footer .set-product-modal-total {
  flex: 0 0 auto;
  text-align: left;
  font-size: 1.25rem;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
}

.set-product-modal-footer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
}

.set-product-modal-footer .set-product-modal-action-btn {
  flex: 0 0 auto !important;
  width: 112px;
  min-width: 112px;
  max-width: 112px;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding: 0 12px;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  box-sizing: border-box;
}

.set-product-modal-total {
  font-size: 1.1rem;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .set-product-modal.modal-content {
    width: min(520px, calc(100vw - 48px));
  }

  .set-product-modal.modal-content[data-option-cols="3"] {
    width: min(720px, calc(100vw - 48px));
  }

  .set-product-modal.modal-content[data-option-cols="4"] {
    width: min(calc(100vw - 48px), 920px);
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .set-product-modal.modal-content[data-option-cols="3"],
  .set-product-modal.modal-content[data-option-cols="4"] {
    width: min(640px, calc(100vw - 24px));
  }

  .set-product-modal[data-option-cols="3"] .set-product-option-grid,
  .set-product-modal[data-option-cols="4"] .set-product-option-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 479px) {
  .set-product-modal.modal-content,
  .set-product-modal.modal-content[data-option-cols="3"],
  .set-product-modal.modal-content[data-option-cols="4"] {
    width: min(100%, calc(100vw - 16px));
    max-height: 94vh;
  }

  .set-product-modal-body {
    overflow: auto;
    max-height: min(calc(94vh - 140px), 520px);
  }

  .set-product-modal .set-product-option-grid,
  .set-product-modal[data-option-cols="3"] .set-product-option-grid,
  .set-product-modal[data-option-cols="4"] .set-product-option-grid {
    grid-template-columns: 1fr;
  }
}

.set-config-group {
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent, #005df5);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-panel);
}

.set-config-group-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 800;
  color: #1e3a5f;
  letter-spacing: -0.01em;
}

.set-config-group-head {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(4rem, 0.6fr)) auto;
  gap: 8px;
  align-items: end;
}

.set-config-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.set-config-field-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.01em;
}

.set-config-group-head label:not(.set-config-field) {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
}

.set-config-group-head .set-config-group-name {
  width: 100%;
  min-width: 0;
}

.set-config-items-head {
  display: grid;
  grid-template-columns: 1.6fr 6rem 4rem auto;
  gap: 8px;
  padding: 2px 0 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
}

.set-config-items-head span:nth-child(2),
.set-config-items-head span:nth-child(3) {
  text-align: center;
}

.set-config-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.set-config-items-empty {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f8fafc;
}

.set-config-item-row {
  display: grid;
  grid-template-columns: 1.6fr 6rem 4rem auto;
  gap: 8px;
  align-items: center;
  padding: 4px 0 4px 8px;
  border: none;
  border-radius: 0;
  background: transparent;
}

.set-config-item-row.is-new {
  padding-left: 5px;
  background: #eff6ff;
  border-radius: 6px;
  box-shadow: inset 3px 0 0 #2563eb;
}

.set-config-item-product.is-placeholder {
  color: #64748b;
  font-weight: 600;
}

.set-config-item-row.is-new .set-config-item-product {
  border-color: #2563eb;
  background: #fff;
}

.set-config-item-add {
  align-self: flex-start;
  color: #2563eb !important;
  border-color: #2563eb !important;
  background: #eff6ff !important;
  font-weight: 700;
}

.set-config-item-add:hover,
.set-config-item-add:focus-visible {
  background: #dbeafe !important;
  border-color: #1d4ed8 !important;
  color: #1d4ed8 !important;
}

.set-config-item-default-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.set-config-item-delta {
  text-align: right;
}

.btn-set-config-product {
  min-height: 32px;
  padding: 0 8px;
  font-size: 0.78rem;
}

.product-card.is-set-product::after {
  content: "SET";
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
}

.product-card.is-set-product {
  position: relative;
}

.settings-menu-grid .btn-set-config-edit {
  min-width: 42px;
  min-height: 32px;
  padding: 0 6px;
  font-size: 0.72rem;
}

.settings-set-layout {
  display: grid;
  grid-template-columns: minmax(400px, 540px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.settings-set-list-wrap {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  max-height: min(72vh, 760px);
}

.settings-set-list {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  table-layout: auto;
}

.settings-set-list tbody td,
.settings-set-list thead th {
  white-space: nowrap;
}

.settings-set-list-display,
.settings-set-list-name {
  font-weight: 700;
  white-space: normal;
  word-break: keep-all;
  overflow: visible;
  text-overflow: unset;
  line-height: 1.3;
}

.settings-set-list-display {
  font-weight: 600;
  color: #475569;
}

.settings-set-col-display,
.settings-set-col-name {
  width: auto;
}

.settings-set-col-price {
  width: 4.8rem;
}

.settings-set-col-num {
  width: 2.4rem;
}

.settings-set-col-yn {
  width: 2.2rem;
}

.settings-set-list-price,
.settings-set-list-num,
.settings-set-list-yn {
  text-align: center;
  white-space: nowrap;
  width: 1%;
}

.settings-set-list thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 7px 6px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
  font-size: 0.74rem;
  white-space: nowrap;
}

.settings-set-list tbody td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.settings-set-list-row {
  cursor: pointer;
}

.settings-set-list-row:hover td {
  background: rgba(0, 0, 0, 0.02);
}

.settings-set-list-row.is-selected td {
  background: rgba(0, 93, 245, 0.1);
}

.settings-set-editor-wrap {
  min-width: 0;
}

.settings-set-editor-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  padding: 12px;
}

.settings-set-editor-head h3 {
  margin: 0;
  font-size: 1rem;
  flex-shrink: 0;
  white-space: nowrap;
}

.settings-set-editor-top {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  width: 100%;
}

.settings-set-basic-fields {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  margin-top: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.settings-set-basic-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
}

.settings-set-basic-field--inline {
  flex: 1 1 auto;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.settings-set-basic-field--inline span {
  flex-shrink: 0;
  white-space: nowrap;
}

.settings-set-basic-field--name {
  flex: 2 1 10rem;
  min-width: 0;
}

.settings-set-basic-field--name .settings-set-basic-input {
  min-width: 0;
}

.settings-set-basic-field--price {
  flex: 0 0 auto;
  min-width: 0;
}

.settings-set-basic-input--price {
  width: calc(9ch + 1.25rem);
  min-width: calc(9ch + 1.25rem);
  max-width: calc(9ch + 1.25rem);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.settings-set-basic-field--category {
  flex: 1.5 1 15rem;
  min-width: 15rem;
}

.settings-set-display-category {
  flex: 1 1 auto;
  min-width: 9.5rem;
  width: 100%;
  padding-right: 28px;
}

.settings-set-basic-input {
  width: 100%;
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  box-sizing: border-box;
  font-size: 0.92rem;
  font-weight: 600;
}

.settings-set-editor-head .hint {
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: #64748b;
}

.menu-concept-panel {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(37, 99, 235, 0.06);
  border: 1px solid rgba(37, 99, 235, 0.15);
}

.menu-concept-title {
  margin: 0 0 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #1e40af;
}

.menu-concept-list {
  margin: 0;
  padding-left: 18px;
  font-size: 0.78rem;
  color: #374151;
  line-height: 1.45;
}

.set-pricing-summary {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}

.set-pricing-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.set-pricing-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 2px;
}

.set-pricing-summary-grid strong {
  font-size: 0.95rem;
  color: #0f172a;
}

.set-pricing-savings {
  color: #059669;
}

.btn-menu-action-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.settings-set-editor-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.settings-set-delete-btn {
  margin-left: auto;
  height: 35px;
  min-height: 35px;
  padding: 0 14px;
  border: 1px solid #fecaca;
  border-radius: 10px;
  background: #fef2f2;
  color: #dc2626;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}

.settings-set-delete-btn:hover {
  background: #fee2e2;
}

.settings-set-delete-btn.hidden {
  display: none;
}

.settings-mods-editor-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings-mods-options-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.settings-mods-options-table th,
.settings-mods-options-table td {
  padding: 6px 4px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.settings-mods-options-table th {
  font-size: 0.74rem;
  text-align: left;
}

.settings-mods-options-table .touch-input {
  width: 100%;
  min-width: 0;
}

.settings-mods-drag-col {
  width: 32px;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}

.settings-mods-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-height: 32px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1;
  letter-spacing: -0.12em;
  cursor: grab;
  touch-action: none;
}

.settings-mods-drag-handle:hover {
  background: var(--bg-elevated);
  color: var(--text);
}

.settings-mods-drag-handle:active {
  cursor: grabbing;
}

.settings-mods-option-row.is-dragging {
  opacity: 0.55;
}

.settings-mods-option-row.is-drop-target td {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.settings-mods-section-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-elevated) 35%, transparent);
}

.settings-mods-section-presets-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
}

.settings-mods-sections {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings-mods-sections.set-config-editor {
  gap: 12px;
}

.settings-mods-sections.set-config-editor .settings-mods-section {
  border: none;
  padding: 0;
  background: transparent;
}

.settings-mods-sections.set-config-editor .settings-mods-item-row label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  white-space: nowrap;
}

.settings-mods-section {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px 12px;
  background: var(--bg-panel);
}

.settings-mods-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.settings-mods-section-name {
  flex: 1;
  min-width: 0;
  font-weight: 700;
}

.settings-mods-section-limit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.settings-mods-section-limit select {
  min-width: 88px;
  padding: 4px 8px;
  font-size: 0.82rem;
}

.settings-mods-section-limit-hint {
  font-size: 0.76rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.settings-mods-section .btn-mods-add-option-in-section {
  margin-top: 8px;
}

.settings-mods-sections-empty {
  margin: 0;
}

.modifier-catalog-group {
  margin-bottom: 12px;
}

.modifier-catalog-group-order:last-child {
  margin-bottom: 0;
}

.modifier-catalog-group-title {
  font-weight: 700;
  font-size: 0.88rem;
  margin-bottom: 6px;
  color: var(--text);
}

.modifier-catalog-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.modifier-catalog-options-chips {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}

.modifier-catalog-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  cursor: pointer;
}

.modifier-catalog-option input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

#settingsSetEditorBody.set-config-modal-body {
  max-height: min(52vh, 560px);
  overflow: auto;
}

.settings-master-pane[data-master-pane="set"] .settings-work-panel-head,
.settings-master-pane[data-master-pane="mods"] .settings-work-panel-head,
.settings-master-pane[data-master-pane="menu"] .settings-work-panel-head,
.settings-master-pane[data-master-pane="category"] .settings-work-panel-head {
  flex-wrap: nowrap;
  gap: 16px;
}

.settings-work-panel[data-settings-panel="master"] .settings-work-panel-title,
.settings-master-pane[data-master-pane="set"] .settings-work-panel-title,
.settings-master-pane[data-master-pane="menu"] .settings-work-panel-title,
.settings-master-pane[data-master-pane="category"] .settings-work-panel-title {
  flex-shrink: 0;
}

.settings-menu-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.settings-menu-toolbar #settingsMenuSearch,
.settings-menu-toolbar #settingsCategorySearch,
.settings-menu-toolbar .touch-input.search {
  width: min(240px, 32vw);
  min-width: 120px;
  max-width: 280px;
  margin-bottom: 0;
  flex: 0 1 auto;
}

.settings-menu-toolbar .btn-primary,
.settings-menu-toolbar .btn-ghost {
  flex-shrink: 0;
  min-height: var(--touch-min);
  padding: 0 16px;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 10px;
  white-space: nowrap;
  box-sizing: border-box;
}

.settings-menu-toolbar .btn-ghost {
  color: var(--text);
}

.settings-menu-toolbar .btn-action-close.master-panel-close-btn,
.settings-work-panel-close-btn {
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 14px;
  line-height: 1;
}

.settings-work-panel[data-settings-panel="paymentmethods"] .settings-menu-toolbar .btn-primary,
.settings-work-panel[data-settings-panel="paymentmethods"] .settings-menu-toolbar .btn-ghost {
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 14px;
  line-height: 1;
  box-sizing: border-box;
}

.payment-methods-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.payment-methods-layout {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  width: 100%;
}

.payment-methods-main {
  flex: 1 1 360px;
  min-width: 0;
  max-width: 560px;
}

.payment-methods-side-panel {
  flex: 0 0 min(380px, 42vw);
  width: min(380px, 42vw);
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-panel);
  box-shadow: var(--shadow);
  padding: 0;
}

.payment-methods-side-panel.hidden {
  display: none;
}

.payment-methods-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.payment-methods-side-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.payment-methods-side-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.payment-methods-side-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--border);
}

@media (max-width: 900px) {
  .payment-methods-layout {
    flex-direction: column;
  }

  .payment-methods-main {
    max-width: none;
    width: 100%;
  }

  .payment-methods-side-panel {
    width: 100%;
    flex-basis: auto;
  }
}

.payment-methods-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.payment-methods-add-input {
  flex: 1;
  min-height: 42px;
}

.payment-methods-add-btn {
  min-width: 72px;
  min-height: 42px;
}

.payment-methods-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border);
}

.payment-methods-list.is-order-edit .payment-method-card {
  cursor: grab;
}

.payment-method-card {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
  background: transparent;
}

.payment-method-card.is-order-edit {
  grid-template-columns: auto auto auto minmax(0, 1fr) auto;
}

.payment-method-card-use {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
}

.payment-method-card-use input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.payment-method-card.is-disabled {
  opacity: 0.45;
}

.payment-method-card-handle {
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  user-select: none;
}

.payment-method-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #e8f1ff;
  color: #2f6fed;
  flex-shrink: 0;
}

.payment-method-card-body {
  min-width: 0;
}

.payment-method-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.payment-method-card-subtitle {
  margin-top: 4px;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.payment-method-card-link {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-align: right;
  white-space: nowrap;
  padding: 4px 0;
}

.payment-method-card-link:hover {
  color: var(--primary);
}

.payment-method-card-order-actions {
  display: flex;
  gap: 4px;
}

.payment-method-order-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.payment-method-order-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.payment-methods-foot {
  padding-top: 4px;
}

.payment-methods-order-btn.active {
  border-color: var(--primary);
  color: var(--primary);
}

.payment-methods-empty {
  padding: 20px 4px;
  color: var(--text-muted);
}

/* VAN 연동 설정 */
.van-settings-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 560px;
}

.van-settings-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.van-settings-form {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px 16px;
}

.van-settings-field-wide {
  grid-column: 1 / -1;
}

.van-signpad-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin: 0;
  cursor: pointer;
}

.van-signpad-toggle input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
}

.van-signpad-toggle strong {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.van-signpad-toggle small {
  display: block;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.van-settings-actions {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  padding-top: 4px;
}

.payment-method-card.is-dragging {
  opacity: 0.55;
}

.payment-method-card.is-drop-target {
  outline: 2px dashed var(--primary);
  outline-offset: -2px;
}

.settings-work-panel[data-settings-panel="smartorder"] .smart-order-panel-toolbar .btn-primary,
.settings-work-panel[data-settings-panel="smartorder"] .smart-order-panel-toolbar .btn-ghost {
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 14px;
  line-height: 1;
  box-sizing: border-box;
}

.settings-master-pane[data-master-pane="mods"] .settings-menu-toolbar #settingsModsSearch,
.settings-master-pane[data-master-pane="mods"] .settings-field .touch-input,
.settings-master-pane[data-master-pane="mods"] .set-config-group-head .touch-input,
.settings-master-pane[data-master-pane="mods"] .set-config-item-row .touch-input:not([type="checkbox"]) {
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 10px;
  line-height: 1;
  box-sizing: border-box;
}

.settings-master-pane[data-master-pane="mods"] .settings-menu-toolbar .btn-primary,
.settings-master-pane[data-master-pane="mods"] .settings-menu-toolbar .btn-ghost:not(.master-panel-close-btn),
.settings-master-pane[data-master-pane="mods"] .settings-set-list .btn-ghost,
.settings-master-pane[data-master-pane="mods"] .settings-set-editor-actions .btn-ghost,
.settings-master-pane[data-master-pane="mods"] .settings-mods-section-presets .btn-ghost,
.settings-master-pane[data-master-pane="mods"] .set-config-group-head .btn-ghost,
.settings-master-pane[data-master-pane="mods"] .set-config-item-row .btn-ghost,
.settings-master-pane[data-master-pane="mods"] .btn-mods-add-option-in-section {
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 14px;
  line-height: 1;
  box-sizing: border-box;
}

.settings-master-pane[data-master-pane="mods"] .settings-set-list thead th,
.settings-master-pane[data-master-pane="mods"] .settings-set-list tbody td {
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding: 0 6px;
  box-sizing: border-box;
  vertical-align: middle;
}

.settings-master-pane[data-master-pane="set"] .settings-menu-toolbar #settingsSetSearch {
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 10px;
  line-height: 1;
  box-sizing: border-box;
}

.settings-master-pane[data-master-pane="set"] .settings-menu-toolbar .btn-primary,
.settings-master-pane[data-master-pane="set"] .settings-menu-toolbar .btn-ghost:not(.master-panel-close-btn),
.settings-master-pane[data-master-pane="set"] .settings-set-list .btn-ghost {
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 14px;
  line-height: 1;
  box-sizing: border-box;
}

.settings-master-pane[data-master-pane="set"] .settings-set-list thead th,
.settings-master-pane[data-master-pane="set"] .settings-set-list tbody td {
  height: 35px;
  min-height: 35px;
  max-height: none;
  padding: 0 8px;
  box-sizing: border-box;
  vertical-align: middle;
}

.settings-master-pane[data-master-pane="set"] .settings-set-list tbody td.settings-set-list-display,
.settings-master-pane[data-master-pane="set"] .settings-set-list tbody td.settings-set-list-name {
  height: auto;
  min-height: 35px;
  padding-top: 6px;
  padding-bottom: 6px;
  white-space: normal;
}

.settings-master-pane[data-master-pane="set"] .settings-set-list thead th {
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  background: #f8fafc;
}

.settings-master-pane[data-master-pane="set"] .settings-set-list-name {
  font-size: 0.88rem;
}

.settings-master-pane[data-master-pane="set"] .settings-set-list-display {
  font-size: 0.82rem;
}

.settings-master-pane[data-master-pane="set"] .settings-set-list-price {
  font-weight: 700;
  color: #0f172a;
}

.settings-master-pane[data-master-pane="set"] .settings-set-basic-input,
.settings-master-pane[data-master-pane="set"] .set-config-group-head .touch-input,
.settings-master-pane[data-master-pane="set"] .set-config-item-row .touch-input:not([type="checkbox"]) {
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 10px;
  line-height: 1.2;
  box-sizing: border-box;
}

.settings-master-pane[data-master-pane="set"] .settings-set-editor-actions .btn-ghost,
.settings-master-pane[data-master-pane="set"] .settings-set-delete-btn,
.settings-master-pane[data-master-pane="set"] .set-config-group-head .btn-ghost,
.settings-master-pane[data-master-pane="set"] .set-config-item-row .btn-ghost,
.settings-master-pane[data-master-pane="set"] .set-config-group-del {
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 12px;
  line-height: 1;
  box-sizing: border-box;
}

.settings-master-pane[data-master-pane="set"] .set-config-item-add {
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 14px;
  line-height: 1;
  box-sizing: border-box;
  color: #2563eb !important;
  border-color: #2563eb !important;
  background: #eff6ff !important;
  font-weight: 700;
}

.settings-master-pane[data-master-pane="set"] .set-config-item-row .set-config-item-del {
  width: 35px;
  min-width: 35px;
  padding: 0;
  font-size: 1.1rem;
}

.settings-master-pane[data-master-pane="set"] .set-config-group-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 8px;
  overflow-x: auto;
}

.settings-master-pane[data-master-pane="set"] .set-config-group-head .set-config-field {
  flex: 1 1 auto;
  min-width: 0;
}

.settings-master-pane[data-master-pane="set"] .set-config-group-head .set-config-field--narrow {
  flex: 0 0 4.2rem;
  min-width: 4.2rem;
}

.settings-master-pane[data-master-pane="set"] .set-config-group-head .set-config-group-del {
  flex: 0 0 auto;
  white-space: nowrap;
}

.settings-master-pane[data-master-pane="set"] #settingsSetEditorBody.set-config-modal-body {
  gap: 12px;
}

.settings-master-pane[data-master-pane="category"] .settings-menu-toolbar #settingsCategorySearch {
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 10px;
  line-height: 1;
  box-sizing: border-box;
}

.settings-master-pane[data-master-pane="category"] .settings-menu-toolbar .btn-primary,
.settings-master-pane[data-master-pane="category"] .settings-menu-toolbar .btn-ghost:not(.master-panel-close-btn) {
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 14px;
  line-height: 1;
  box-sizing: border-box;
}

.settings-master-pane[data-master-pane="category"] #settingsCategoryGridWrap .settings-menu-grid-category .settings-menu-color-cell {
  text-align: center;
  vertical-align: middle;
  height: 35px;
  max-height: 35px;
  padding: 0;
}

.settings-master-pane[data-master-pane="category"] #settingsCategoryGridWrap .settings-menu-grid-category .tile-color-picker-popover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  max-height: 35px;
  padding: 0;
  vertical-align: middle;
}

.settings-master-pane[data-master-pane="menu"] .settings-menu-toolbar #settingsMenuSearch {
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 10px;
  line-height: 1;
  box-sizing: border-box;
}

.settings-master-pane[data-master-pane="menu"] .settings-menu-toolbar .btn-primary,
.settings-master-pane[data-master-pane="menu"] .settings-menu-toolbar .btn-ghost:not(.master-panel-close-btn) {
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 14px;
  line-height: 1;
  box-sizing: border-box;
}

.settings-master-pane[data-master-pane="menu"] #settingsMenuGridWrap .settings-menu-grid thead th,
.settings-master-pane[data-master-pane="menu"] #settingsMenuGridWrap .settings-menu-grid tbody td {
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  box-sizing: border-box;
  vertical-align: middle;
}

.settings-master-pane[data-master-pane="menu"] #settingsMenuGridWrap .settings-menu-grid thead th {
  padding: 0 5px;
}

.settings-master-pane[data-master-pane="menu"] #settingsMenuGridWrap .settings-menu-cell-input,
.settings-master-pane[data-master-pane="menu"] #settingsMenuGridWrap .settings-menu-grid select.settings-menu-cell-input,
.settings-master-pane[data-master-pane="menu"] #settingsMenuGridWrap .settings-menu-sort-col .settings-menu-cell-input {
  min-height: 40px;
  height: 40px;
  max-height: 40px;
  padding: 0 8px;
  box-sizing: border-box;
}

.settings-master-pane[data-master-pane="menu"] #settingsMenuGridWrap .settings-menu-sort-col .settings-menu-cell-input {
  padding: 0 1px;
}

#settingsMenuGridWrap .settings-menu-row-badges {
  display: none;
}

.settings-master-pane[data-master-pane="menu"] #settingsMenuGridWrap .settings-menu-name-cell {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  height: 40px;
  max-height: 40px;
  padding: 0 2px;
  box-sizing: border-box;
}

.settings-master-pane[data-master-pane="menu"] #settingsMenuGridWrap .settings-menu-name-col .settings-menu-cell-input.settings-menu-name {
  min-height: 0;
  height: 100%;
  max-height: 40px;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  padding: 0 6px;
  white-space: nowrap;
}

.settings-master-pane[data-master-pane="menu"] #settingsMenuGridWrap .settings-menu-grid-view-compact .settings-menu-cell-input,
.settings-master-pane[data-master-pane="menu"] #settingsMenuGridWrap .settings-menu-grid-view-compact .settings-menu-name-col .settings-menu-cell-input.settings-menu-name,
.settings-master-pane[data-master-pane="menu"] #settingsMenuGridWrap .settings-menu-grid-view-full .settings-menu-cell-input,
.settings-master-pane[data-master-pane="menu"] #settingsMenuGridWrap .settings-menu-grid-view-full .settings-menu-name-col .settings-menu-cell-input.settings-menu-name {
  min-height: 40px;
  height: 40px;
  max-height: 40px;
}

.settings-master-pane[data-master-pane="menu"] #settingsMenuGridWrap .settings-menu-grid-view-compact .settings-menu-name-col .settings-menu-cell-input.settings-menu-name,
.settings-master-pane[data-master-pane="menu"] #settingsMenuGridWrap .settings-menu-grid-view-full .settings-menu-name-col .settings-menu-cell-input.settings-menu-name {
  text-overflow: ellipsis;
  overflow: hidden;
}

.settings-master-pane[data-master-pane="menu"] #settingsMenuGridWrap .settings-menu-grid-view-compact .settings-menu-name-cell,
.settings-master-pane[data-master-pane="menu"] #settingsMenuGridWrap .settings-menu-grid-view-full .settings-menu-name-cell {
  flex-direction: column;
  gap: 0;
}

.settings-master-pane[data-master-pane="menu"] #settingsMenuGridWrap .settings-menu-image-thumb,
.settings-master-pane[data-master-pane="menu"] #settingsMenuGridWrap .settings-menu-grid-view-compact .settings-menu-image-thumb {
  width: 36px;
  height: 36px;
  border-radius: 8px;
}

.settings-master-pane[data-master-pane="menu"] #settingsMenuGridWrap .settings-menu-grid:not(.settings-menu-grid-category):not(.settings-menu-grid-compact) .settings-menu-yn-col .settings-menu-yn {
  min-height: 40px;
  height: 40px;
  max-height: 40px;
  padding: 0 4px;
  width: 100%;
  text-align: center;
  text-align-last: center;
  font-size: 0.82rem;
  cursor: pointer;
}

.settings-master-pane[data-master-pane="menu"] #settingsMenuGridWrap .settings-menu-mods-col .btn-menu-action,
.settings-master-pane[data-master-pane="menu"] #settingsMenuGridWrap .settings-menu-set-col .btn-menu-action {
  width: 100%;
  min-height: 40px;
  height: 40px;
  max-height: 40px;
  box-sizing: border-box;
}

.settings-work-panel[data-settings-panel="screensetup"] .screen-setup-panel-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}

#settingsSaveMenuBtn:disabled,
#settingsSaveCategoryBtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.settings-menu-toolbar .btn-menu-reset {
  color: var(--danger);
  font-weight: 700;
}

.settings-menu-toolbar .btn-menu-reset:hover {
  background: rgba(220, 38, 38, 0.08);
}



@media (max-width: 720px) {
  .settings-work-panel[data-settings-panel="master"] .settings-work-panel-head,
  .settings-master-pane[data-master-pane="menu"] .settings-work-panel-head,
  .settings-master-pane[data-master-pane="category"] .settings-work-panel-head {
    flex-wrap: wrap;
  }

  .settings-master-pane[data-master-pane="set"] .settings-work-panel-head {
    flex-wrap: wrap;
  }

  .settings-set-layout {
    grid-template-columns: 1fr;
  }

  .settings-set-list-panel {
    max-height: 280px;
  }

  .settings-menu-toolbar {
    flex-wrap: wrap;
    width: 100%;
    justify-content: stretch;
  }

  .settings-menu-toolbar #settingsMenuSearch,
  .settings-menu-toolbar #settingsCategorySearch,
  .settings-menu-toolbar .touch-input.search {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
  }

  .settings-menu-toolbar .btn-primary,
  .settings-menu-toolbar .btn-ghost {
    flex: 1 1 calc(50% - 4px);
  }

  .settings-table-color-bar {
    grid-template-columns: 1fr 1fr;
  }

  .settings-table-color-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .settings-table-color-actions .btn-ghost {
    flex: 1 1 calc(50% - 4px);
  }
}

@media (max-width: 1100px) {
  .store-info-grid {
    grid-template-columns: 1fr;
  }

  .store-info-row-3 {
    grid-template-columns: 1fr;
  }

  .store-info-logo-field {
    grid-column: auto;
  }

  .store-ops-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 799px) {
  .store-ops-grid {
    grid-template-columns: 1fr;
  }

  .store-ops-pos-sale-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 799px) {
  .settings-work-layout {
    flex-direction: column;
  }

  .settings-work-nav {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #434648;
    max-height: none;
  }

  .settings-work-menu {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 8px;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .settings-work-menu-item {
    width: auto;
    flex: 0 0 auto;
    padding: 10px 12px;
    border-radius: 8px;
  }

  .settings-work-menu-label {
    white-space: nowrap;
  }
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.admin-card {
  padding: 16px;
  background: var(--bg-panel);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.admin-card.full {
  grid-column: 1 / -1;
}

.admin-card h3 {
  margin: 0 0 12px;
}

.mini-list {
  margin-top: 10px;
  font-size: 0.9rem;
}

.mini-list div {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.empty-msg {
  padding: 32px;
  text-align: center;
  color: var(--text-muted);
}

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.modal-content {
  position: relative;
  width: min(420px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: var(--bg-panel);
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.modal-lg {
  width: min(520px, 100%);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 {
  margin: 0;
}

.btn-close {
  min-width: 44px;
  min-height: 44px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 1.6rem;
  cursor: pointer;
}

.modal-body {
  padding: 16px;
}

.modal-body label {
  display: block;
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.modal-body label input {
  width: 100%;
  margin-top: 6px;
}

#formModal .modal-body label input.touch-input:not([type="checkbox"]),
#formModal .modal-body label select.touch-input {
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  box-sizing: border-box;
  padding: 0 12px;
  line-height: 1.2;
}

#formModal .reset-sales-password-field input.touch-input {
  height: auto;
  min-height: var(--touch-min, 44px);
  max-height: none;
  cursor: text;
  background: var(--bg);
  color: var(--text);
}

.employee-login-id-field {
  display: grid;
  gap: 6px;
}

.employee-login-id-label {
  font-size: 0.92rem;
}

.employee-login-id-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.employee-login-id-input {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0 !important;
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  box-sizing: border-box;
  padding: 0 12px;
  line-height: 1.2;
}

.employee-login-id-check-btn {
  flex: 0 0 auto;
  min-width: 88px;
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  box-sizing: border-box;
  padding: 0 10px;
  line-height: 1.2;
  white-space: nowrap;
}

.employee-login-id-check-status {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.35;
}

.employee-login-id-check-status.is-ok {
  color: #15803d;
}

.employee-login-id-check-status.is-err {
  color: #b91c1c;
}

.modal-footer {
  display: flex;
  gap: 10px;
  padding: 16px;
  border-top: 1px solid var(--border);
}

.modal-footer button {
  flex: 1;
}

.modal-content.exit-confirm-modal {
  width: min(360px, 90vw);
  padding: 28px 24px 22px;
  border-radius: 20px;
  text-align: center;
}

.exit-confirm-title {
  margin: 4px 0 22px;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text, #1f2937);
  line-height: 1.4;
}

.exit-confirm-actions {
  display: flex;
  gap: 12px;
}

.exit-confirm-btn {
  flex: 1;
  min-height: 52px;
  border: none;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.08s ease;
}

.exit-confirm-btn:active {
  transform: scale(0.97);
}

.exit-confirm-cancel {
  background: #eceef1;
  color: #6b7280;
}

.exit-confirm-cancel:hover {
  background: #e2e5e9;
}

.exit-confirm-ok {
  background: #f0454a;
  color: #fff;
}

.exit-confirm-ok:hover {
  background: #dc2626;
}

.pay-amount strong {
  font-size: 1.5rem;
  color: var(--accent);
}

.pay-member-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 4px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}

.pay-member-section {
  margin: 12px 0 4px;
}

.pay-member-action-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.pay-member-action-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  border: 1px solid #005df5;
  border-radius: var(--radius);
  background: #fff;
  color: #0050d4;
  font-size: 0.88rem;
  font-weight: 700;
}

.pay-member-employee-btn,
.pay-member-customer-btn {
  display: flex;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
}

.pay-member-customer-trigger {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.pay-member-customer-text {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.pay-member-lookup-tag {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: #005df5;
  white-space: nowrap;
}

.pay-member-customer-btn .pay-member-clear-btn {
  flex: 0 0 32px;
  min-width: 32px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-left: 1px solid #bfdbfe;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.pay-member-customer-btn .pay-member-clear-btn:not(.hidden) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pay-member-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.pay-member-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
}

.pay-member-badge {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pay-member-badge.is-connected {
  color: var(--primary);
}

.pay-member-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.pay-modal-employee-select {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #0050d4;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0 10px;
  text-align: center;
  text-align-last: center;
}

.pay-member-clear-btn {
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  color: var(--text-muted);
}

.pay-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0;
}

.pay-method {
  min-height: 56px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
}

.pay-method.active {
  border-color: var(--primary);
  background: rgba(0, 93, 245, 0.15);
  color: var(--text);
  font-weight: 700;
}

.pay-method.is-disabled,
.pay-method:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.quick-cash {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.quick-cash button {
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}

.pay-methods-empty {
  width: 100%;
  margin: 0;
  font-size: 0.85rem;
}

.payment-method-enabled-row {
  align-items: center;
}

.payment-method-enabled-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

/* Receipt — 3인치(80mm) 감열 영수증 */
.receipt-print {
  position: fixed;
  left: -9999px;
  top: 0;
}

.receipt-paper,
.zreport-print-paper,
.xreport-print-paper {
  box-sizing: border-box;
  width: 80mm;
  max-width: 80mm;
  padding: 2mm 2.5mm 3mm;
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Consolas", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.4;
  background: #fff;
  color: #000;
}

.receipt-rule {
  width: 100%;
  margin: 5px 0;
  height: 0;
  border: none;
  border-top: 1px dashed #000;
  overflow: hidden;
}

.receipt-rule::before {
  content: none;
  display: none;
}

.receipt-item-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7.5ch 4.5ch 8.5ch;
  column-gap: 1mm;
  align-items: baseline;
  font-size: 11px;
  line-height: 1.4;
}

.receipt-items-head {
  font-weight: bold;
  font-size: 11px;
}

.receipt-col-name {
  white-space: normal;
  word-break: break-all;
  line-height: 1.25;
}

.receipt-col-amt {
  text-align: right;
  white-space: nowrap;
}

.receipt-set-child {
  font-size: 10px;
  line-height: 1.3;
  color: #333;
}

.receipt-set-child .receipt-col-name {
  grid-column: 1 / -1;
  padding-left: 3mm;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

.receipt-set-child span:not(.receipt-col-name) {
  display: none;
}

.receipt-kr-card-title {
  font-weight: bold;
  text-align: center;
  margin: 2px 0 4px;
}

.receipt-service-included {
  text-align: center;
  font-size: 11px;
  margin: 4px 0 2px;
}

.receipt-gu-footer {
  text-align: center;
  line-height: 1.45;
}

.receipt-gu-footer p {
  margin: 2px 0;
}

.receipt-signature-line {
  margin-top: 6px;
}

.store-ops-service-charge-fields {
  display: grid;
  gap: 8px;
  margin: 8px 0 12px;
  padding: 10px 12px;
  border: 1px dashed var(--border, #ccc);
  border-radius: 8px;
}

.receipt-disc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8.5ch;
  column-gap: 1mm;
  font-size: 11px;
  line-height: 1.4;
  margin-top: 1px;
}

.receipt-line {
  display: flex;
  justify-content: space-between;
  gap: 2mm;
  margin: 2px 0;
  font-size: 12px;
  line-height: 1.4;
}

.receipt-line > span:first-child {
  flex: 1;
  min-width: 0;
}

.receipt-line > span:last-child {
  flex-shrink: 0;
  white-space: nowrap;
  text-align: right;
}

.receipt-line-sub {
  font-size: 11px;
  color: #555;
  padding-left: 4px;
}

.receipt-meta {
  margin: 1px 0;
  color: #000;
  font-size: 12px;
  word-break: keep-all;
}

.receipt-total {
  display: flex;
  justify-content: space-between;
  gap: 2mm;
  font-weight: bold;
  font-size: 13px;
  line-height: 1.4;
}

.receipt-total > span:first-child {
  flex: 1;
  min-width: 0;
}

.receipt-total > span:last-child {
  flex-shrink: 0;
  white-space: nowrap;
  text-align: right;
}

.receipt-thanks {
  text-align: center;
  margin-top: 8px;
  font-size: 12px;
}

.modal-content.receipt-preview-modal {
  width: min(440px, 94vw);
  max-width: 440px;
  height: min(calc(100dvh - 32px), 820px);
  max-height: calc(100dvh - 32px);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.modal-content.receipt-preview-modal .modal-header {
  min-height: 0;
}

.receipt-preview-body {
  min-height: 0;
  overflow: hidden;
  background: #e2e8f0;
  padding: 16px;
}

.receipt-preview-mount {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.receipt-preview-paper {
  box-sizing: border-box;
  width: min(380px, 100%);
  height: 100%;
  max-height: 100%;
  min-height: 0;
  padding: 20px 18px 24px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.14);
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Consolas", "Courier New", monospace;
  font-size: 16px;
  line-height: 1.5;
  color: #000;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.receipt-preview-paper::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.receipt-preview-paper .receipt-item-grid {
  grid-template-columns: minmax(0, 1fr) 9ch 5ch 11ch;
  column-gap: 8px;
  font-size: 15px;
  font-family: inherit;
}

.receipt-preview-paper .receipt-set-child .receipt-col-name {
  font-size: 13px;
}

.receipt-preview-paper .receipt-items-head {
  font-size: 15px;
  font-family: inherit;
}

.receipt-preview-paper .receipt-disc-row {
  font-size: 14px;
  font-family: inherit;
}

.receipt-preview-paper .receipt-line,
.receipt-preview-paper .receipt-meta {
  font-size: 16px;
  font-family: inherit;
}

.receipt-preview-paper .receipt-line-sub {
  font-size: 14px;
  font-family: inherit;
}

.receipt-preview-paper .receipt-total {
  font-size: 20px;
  margin-top: 4px;
  font-family: inherit;
}

.receipt-preview-paper .receipt-thanks {
  font-size: 15px;
  margin-top: 12px;
  font-family: inherit;
}

.receipt-preview-paper .receipt-rule {
  margin: 8px 0;
}

.receipt-preview-paper .zreport-print-title,
.receipt-preview-paper .xreport-print-title {
  margin: 0 0 8px;
  text-align: center;
  font-size: 18px;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.receipt-preview-paper .zreport-print-meta,
.receipt-preview-paper .xreport-print-meta {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.45;
}

.modal-content.receipt-preview-modal .receipt-preview-footer {
  min-height: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 16px 20px max(16px, env(safe-area-inset-bottom, 0px));
}

.modal-content.receipt-preview-modal .receipt-preview-footer button {
  flex: 0 0 auto;
  min-width: 96px;
  width: auto;
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 14px;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1;
  box-sizing: border-box;
}

.modal-content.receipt-preview-modal .receipt-preview-print-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.modal-content.receipt-preview-modal .receipt-preview-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background: #fff;
  color: #374151;
  cursor: pointer;
}

@media print {
  @page {
    size: 80mm auto;
    margin: 0;
  }

  body::before,
  body::after {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
  }

  body * {
    visibility: hidden;
  }

  .receipt-print.hidden,
  .xreport-print.hidden,
  .zreport-print.hidden {
    display: none !important;
    visibility: hidden !important;
  }

  body.print-receipt .receipt-print:not(.hidden),
  body.print-receipt .receipt-print:not(.hidden) *,
  body.print-xreport .xreport-print:not(.hidden),
  body.print-xreport .xreport-print:not(.hidden) *,
  body.print-zreport .zreport-print:not(.hidden),
  body.print-zreport .zreport-print:not(.hidden) * {
    visibility: visible;
  }

  html,
  body {
    width: 80mm;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.print-receipt .receipt-print:not(.hidden),
  body.print-xreport .xreport-print:not(.hidden),
  body.print-zreport .zreport-print:not(.hidden) {
    position: absolute;
    left: 0;
    top: 0;
    display: block !important;
    width: 80mm;
  }

  .receipt-paper,
  .xreport-print-paper,
  .zreport-print-paper {
    width: 80mm;
    max-width: 80mm;
    padding: 2mm 2.5mm 3mm;
    margin: 0;
    box-shadow: none;
  }

  .receipt-rule {
    border-top: 1px dashed #000;
  }

  .receipt-rule::before {
    content: none;
    display: none;
  }

  .zprint-rule::before,
  .xreport-print-paper .zprint-rule::before {
    content: "----- ----- ----- ----- ----- ----- ----- ----- -----";
  }
}

@media (max-width: 799px) {
  #view-cashier.active.mode-prepaid .cashier-order-flow,
  #view-cashier.active.mode-postpaid-order .cashier-order-flow,
  #view-cashier.active.mode-quick-order .cashier-order-flow {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    overflow-y: auto;
  }

  .table-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .sale-panel-left {
    min-height: 320px;
    max-height: none;
  }

  .sale-panel-right {
    min-height: 40vh;
  }
}

@media (max-width: 600px) {
  .topbar {
    flex-wrap: wrap;
    height: auto;
    min-height: 52px;
  }

  .view {
    height: calc(100vh - 80px);
  }
}

/* ═══ 예약 달력 (참고 UI) ═══ */
#view-reservations.active {
  display: flex;
  flex-direction: column;
  position: relative;
  background: #fff;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
  min-height: 0;
  overflow: hidden;
}

.reservation-layout {
  display: grid;
  grid-template-columns: minmax(188px, 220px) minmax(0, 1fr);
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}

.reservation-sidebar {
  background: #fafafa;
  border-right: 1px solid #e8e8e8;
  padding: 20px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}

.reservation-mini-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.88rem;
}

.res-nav-arrow {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: #666;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.res-nav-arrow:hover {
  color: #333;
}

.res-mini-month-label {
  font-weight: 600;
  color: #333;
  white-space: nowrap;
}

.res-today-link {
  border: none;
  background: transparent;
  color: #4285f4;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0 2px;
}

.res-mini-calendar {
  flex: 0 0 auto;
}

.res-mini-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 6px;
}

.res-mini-head .res-weekday {
  font-size: 0.72rem;
  font-weight: 500;
  text-align: center;
  color: #888;
  padding: 2px 0;
}

.res-mini-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 2px;
}

.res-mini-body .res-day-cell {
  aspect-ratio: 1;
  border: none;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.res-mini-day {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 500;
  color: #333;
}

.res-mini-body .res-day-cell.other-month .res-mini-day {
  color: #ccc;
}

.res-mini-body .res-day-cell.sun:not(.other-month) .res-mini-day {
  color: #e53935;
}

.res-mini-body .res-day-cell.sat:not(.other-month) .res-mini-day {
  color: #4285f4;
}

.res-mini-body .res-day-cell.today .res-mini-day {
  background: #4285f4;
  color: #fff;
  font-weight: 700;
}

.res-mini-body .res-day-cell.selected:not(.today) .res-mini-day {
  background: #e8f0fe;
  color: #1967d2;
}

.res-feedback-btn {
  margin-top: auto;
  width: 100%;
  min-height: 44px;
  border: 1px solid #e0e0e0;
  border-radius: 22px;
  background: #fff;
  color: #555;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}

.res-feedback-btn:hover {
  background: #f5f5f5;
}

.reservation-main {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  background: #fff;
  position: relative;
  padding-bottom: 64px;
}

.reservation-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: clamp(10px, 1.2vh, 16px) clamp(12px, 2vw, 24px) clamp(8px, 1vh, 12px);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.reservation-toolbar-center {
  flex: 1;
  min-width: 180px;
  max-width: 320px;
}

.res-search-input {
  width: 100%;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
  color: #333;
  font-size: 0.9rem;
}

.res-search-input:focus {
  outline: none;
  border-color: #4285f4;
  box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.15);
}

.reservation-toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.res-month-summary {
  font-size: 1.05rem;
  font-weight: 600;
  color: #333;
  min-width: 120px;
  text-align: center;
}

.reservation-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.res-view-select {
  min-height: 36px;
  padding: 0 28px 0 12px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
  color: #333;
  font-size: 0.9rem;
  cursor: pointer;
}

.res-settings-btn {
  width: 36px;
  height: 36px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
  color: #666;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.res-month-grid {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 clamp(8px, 1.2vw, 18px) 4px;
}

.res-month-head {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid #e8e8e8;
  flex-shrink: 0;
}

.res-month-head .res-weekday {
  text-align: center;
  font-size: clamp(0.78rem, 1.1vw, 0.92rem);
  font-weight: 600;
  color: #666;
  padding: clamp(6px, 1vh, 12px) 0;
}

.res-month-head .res-weekday.sun {
  color: #e53935;
}

.res-month-head .res-weekday.sat {
  color: #4285f4;
}

.res-month-body {
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
  border-left: 1px solid #e8e8e8;
}

.res-month-body .res-day-cell {
  border: none;
  border-right: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  background: #fff;
  padding: clamp(6px, 1.1vh, 12px) clamp(6px, 0.9vw, 12px);
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(2px, 0.4vh, 6px);
  cursor: pointer;
  min-height: 0;
  overflow: hidden;
}

.res-month-body .res-day-cell:hover {
  background: #fafafa;
}

.res-month-body .res-day-cell.other-month {
  background: #fafafa;
}

.res-month-body .res-day-cell.other-month .res-day-top,
.res-month-body .res-day-cell.other-month .res-holiday-label {
  opacity: 0.45;
}

.res-day-top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
}

.res-day-num {
  font-size: clamp(0.82rem, 1.35vw, 1.05rem);
  font-weight: 600;
  color: #333;
  line-height: 1.2;
}

.res-month-body .res-day-cell.sun:not(.other-month) .res-day-num {
  color: #e53935;
}

.res-month-body .res-day-cell.sat:not(.other-month) .res-day-num {
  color: #4285f4;
}

.res-day-today-tag {
  font-size: clamp(0.72rem, 1vw, 0.85rem);
  font-weight: 600;
  color: #4285f4;
}

.res-holiday-label {
  font-size: clamp(0.68rem, 0.95vw, 0.8rem);
  font-weight: 500;
  color: #e53935;
  line-height: 1.3;
  word-break: keep-all;
}

.res-day-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  margin-top: auto;
}

.res-day-chip {
  display: block;
  width: 100%;
  padding: 2px 0;
  font-size: clamp(0.68rem, 1vw, 0.82rem);
  font-weight: 500;
  color: #4285f4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.res-day-chip.is-cancelled {
  color: #d93025;
  text-decoration: line-through;
}

.res-day-more {
  font-size: 0.7rem;
  color: #888;
}

.res-fab {
  position: absolute;
  right: 28px;
  bottom: 28px;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  background: #4285f4;
  color: #fff;
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(66, 133, 244, 0.4);
  cursor: pointer;
  z-index: 5;
}

.res-fab:hover {
  background: #3367d6;
}

/* 예약 일 단위 타임라인 */
.res-day-grid,
.res-week-grid,
.res-list-grid {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 16px 72px;
}

.res-day-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.res-day-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.res-day-timeline {
  position: relative;
  padding-bottom: 24px;
}

.res-day-hour-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #e8e8e8;
  box-sizing: border-box;
}

.res-day-hour-label {
  width: 76px;
  flex-shrink: 0;
  padding: 4px 8px 0 0;
  font-size: 0.72rem;
  font-weight: 500;
  color: #888;
  text-align: right;
  box-sizing: border-box;
}

.res-day-hour-track {
  flex: 1;
  position: relative;
  border-left: 1px solid #e8e8e8;
  min-height: 100%;
}

.res-day-half-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px dashed #ececec;
}

.res-day-events {
  position: absolute;
  left: 76px;
  right: 0;
  top: 0;
  pointer-events: none;
}

.res-day-event-block {
  position: absolute;
  left: 8px;
  right: 12px;
  border: none;
  border-radius: 8px;
  background: #e8f0fe;
  border-left: 3px solid #4285f4;
  padding: 6px 8px;
  text-align: left;
  pointer-events: auto;
  cursor: pointer;
  overflow: hidden;
  box-sizing: border-box;
}

.res-day-event-block strong {
  display: block;
  font-size: 0.78rem;
  color: #1967d2;
  margin-bottom: 2px;
}

.res-day-event-block span {
  display: block;
  font-size: 0.72rem;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.res-day-event-block.is-cancelled {
  background: #fce8e6;
  border-left-color: #d93025;
  opacity: 0.85;
}

.res-day-event-block.is-cancelled strong,
.res-day-event-block.is-cancelled span {
  color: #d93025;
  text-decoration: line-through;
}

.res-day-now-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 2px solid #4285f4;
  pointer-events: none;
  z-index: 2;
}

.res-day-now-badge {
  position: absolute;
  left: -68px;
  top: -10px;
  min-width: 44px;
  padding: 2px 6px;
  border-radius: 10px;
  background: #4285f4;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  text-align: center;
}

.res-day-closed-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 600;
  color: #bdbdbd;
}

/* 예약 주간 보기 */
.res-week-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid #e8e8e8;
  flex-shrink: 0;
}

.res-week-head-cell {
  border: none;
  background: #fff;
  padding: 10px 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.res-week-head-cell.selected {
  background: #e8f0fe;
}

.res-week-head-cell.today .res-week-date {
  color: #4285f4;
  font-weight: 800;
}

.res-week-dow {
  font-size: 0.72rem;
  color: #888;
}

.res-week-date {
  font-size: 1rem;
  font-weight: 700;
  color: #333;
}

.res-week-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-left: 1px solid #e8e8e8;
}

.res-week-col {
  border-right: 1px solid #e8e8e8;
  padding: 8px 6px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.res-week-closed {
  margin: auto;
  color: #bdbdbd;
  font-size: 0.82rem;
}

.res-week-item {
  border: none;
  border-radius: 6px;
  background: #e8f0fe;
  color: #1967d2;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 4px 6px;
  text-align: left;
  cursor: pointer;
}

.res-week-item.is-cancelled {
  background: #fce8e6;
  color: #d93025;
  text-decoration: line-through;
}

/* 예약 목록 보기 */
.res-list-table {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.res-list-head,
.res-list-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(72px, 0.7fr) minmax(120px, 1.2fr) minmax(90px, 0.9fr) minmax(72px, 0.55fr) minmax(64px, 0.45fr);
  gap: 12px;
  align-items: center;
  padding: 0 14px;
}

.res-list-head {
  flex-shrink: 0;
  min-height: 44px;
  background: #eef3fc;
  border-bottom: 1px solid #d8e3f7;
  font-size: 0.82rem;
  font-weight: 700;
  color: #5f6368;
}

.res-list-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.res-list-empty {
  padding: 40px 16px;
  text-align: center;
}

.res-list-row {
  width: 100%;
  min-height: 52px;
  border: none;
  border-bottom: 1px solid #eee;
  background: #fff;
  text-align: left;
}

.res-list-row .res-list-col:not(.res-list-col-actions) {
  cursor: pointer;
}

.res-list-row:hover {
  background: #fafafa;
}

.res-list-row-cancelled {
  background: #fff8f8;
}

.res-list-row-cancelled:hover {
  background: #fff3f3;
}

.res-list-row-cancelled .res-list-col:not(.res-list-col-actions) {
  text-decoration: line-through;
  text-decoration-color: #d93025;
  color: #d93025;
}

.res-list-col-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  text-decoration: none !important;
  color: inherit !important;
  cursor: default;
}

.res-list-edit-btn,
.res-list-cancel-btn,
.res-list-delete-btn {
  min-width: 52px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.res-list-edit-btn {
  border: 1px solid #c2d7f5;
  background: #fff;
  color: #1967d2;
}

.res-list-edit-btn:hover {
  background: #e8f0fe;
}

.res-list-cancel-btn {
  border: 1px solid #f5c2c7;
  background: #fff;
  color: #d93025;
}

.res-list-cancel-btn:hover {
  background: #fce8e6;
  border-color: #d93025;
}

.res-list-delete-btn {
  border: 1px solid #dadce0;
  background: #fff;
  color: #5f6368;
}

.res-list-delete-btn:hover {
  background: #f1f3f4;
}

.res-list-col {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.84rem;
  color: #333;
}

.res-list-head .res-list-col {
  color: #5f6368;
}

.res-list-col-date {
  font-weight: 600;
  color: #333;
}

.res-list-col-status {
  color: #666;
}

.res-customer-memo {
  margin-top: 8px;
}

.reservation-modal .modal-body {
  max-height: min(70vh, 640px);
  overflow-y: auto;
}

.res-form-section {
  margin-bottom: 18px;
}

.res-form-section h4 {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 800;
}

.res-form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.res-form-row-datetime {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.res-date-input {
  min-width: 150px;
}

.res-time-sep {
  color: #6b7280;
  font-weight: 700;
}

.res-check-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.88rem;
  cursor: pointer;
}

.res-guest-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.res-guest-btn {
  min-width: 52px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  font-weight: 700;
  cursor: pointer;
}

.res-guest-btn.active {
  border-color: #4285f4;
  background: #e8f0fe;
  color: #1967d2;
}

.res-guest-custom {
  margin-top: 8px;
  max-width: 120px;
}

.res-product-total {
  font-weight: 600;
  color: #6b7280;
  font-size: 0.85rem;
}

.res-add-product-btn {
  width: 100%;
  min-height: 44px;
  border: 1px dashed #d1d5db;
  border-radius: 10px;
  background: #f9fafb;
  color: #9ca3af;
  font-weight: 700;
  cursor: not-allowed;
}

.res-memo {
  width: 100%;
  resize: vertical;
}

.reservation-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.res-modal-footer-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.res-modal-edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.res-modal-action-btn {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.res-modal-cancel-btn {
  border: 1px solid #f5c2c7;
  background: #fff;
  color: #d93025;
}

.res-modal-cancel-btn:hover {
  background: #fce8e6;
}

.res-modal-delete-btn {
  border: 1px solid #dadce0;
  background: #fff;
  color: #5f6368;
}

.res-modal-delete-btn:hover {
  background: #f1f3f4;
}

@media (min-width: 1200px) {
  .reservation-layout {
    grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
  }

  .res-month-summary {
    font-size: clamp(1rem, 1.2vw, 1.15rem);
  }
}

@media (max-width: 799px) {
  .reservation-layout {
    grid-template-columns: 1fr;
  }

  .reservation-sidebar {
    display: none;
  }
}

/* 예약 설정 모달 */
.res-settings-modal {
  max-width: 520px;
  width: min(520px, 94vw);
  border-radius: 16px;
  overflow: hidden;
}

.res-settings-header {
  padding: 20px 20px 12px;
  border-bottom: none;
}

.res-settings-header h3 {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0;
}

.res-settings-tabs {
  display: flex;
  gap: 0;
  padding: 0 20px;
  border-bottom: 1px solid #e8e8e8;
}

.res-settings-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 12px 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #888;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.res-settings-tab.active {
  color: #111;
  border-bottom-color: #111;
}

.res-settings-body {
  padding: 8px 20px 16px;
  max-height: min(62vh, 520px);
  overflow-y: auto;
}

.res-settings-block {
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
}

.res-settings-block:last-child {
  border-bottom: none;
}

.res-settings-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.res-settings-block-head h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
}

.res-toggle {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.res-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.res-toggle-track {
  width: 44px;
  height: 26px;
  border-radius: 13px;
  background: #ccc;
  transition: background 0.15s;
  position: relative;
}

.res-toggle-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.res-toggle input:checked + .res-toggle-track {
  background: #4285f4;
}

.res-toggle input:checked + .res-toggle-track::after {
  transform: translateX(18px);
}

.res-temp-closed-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.res-temp-closed-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  background: #fff;
}

.res-temp-closed-row input[type="date"] {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 0.9rem;
  font-weight: 600;
  color: #333;
  min-height: 28px;
}

.res-temp-closed-label {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 600;
  color: #333;
}

.res-temp-closed-remove {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: #f3f4f6;
  color: #888;
  font-size: 1rem;
  cursor: pointer;
  flex-shrink: 0;
}

.res-add-link {
  border: none;
  background: transparent;
  color: #4285f4;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 0;
}

.res-freq-segment {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-bottom: 14px;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  overflow: hidden;
  background: #f5f5f5;
}

.res-freq-btn {
  border: none;
  background: transparent;
  padding: 10px 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #666;
  cursor: pointer;
}

.res-freq-btn.active {
  background: #fff;
  color: #111;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.res-weekday-picker {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.res-weekday-btn {
  min-height: 36px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  background: #f5f5f5;
  color: #666;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.res-weekday-btn.active {
  background: #4285f4;
  border-color: #4285f4;
  color: #fff;
}

.res-month-body .res-day-cell.is-closed {
  background: #fafafa;
}

.res-month-body .res-day-cell.is-closed .res-closed-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  font-weight: 500;
  color: #bdbdbd;
}

.res-month-body .res-day-cell.is-closed {
  position: relative;
}

.res-closed-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #9ca3af;
}

/* ═══ Toast 스타일 판매 화면 ═══ */
.toast-menu-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
  border-right: 1px solid var(--border);
}

.toast-menu-panel.menu-panel {
  padding: 0;
}

.toast-menu-header {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  padding: 0 8px 0 0;
  background: var(--cat-section-bg);
  border-bottom: 1px solid var(--cat-section-border);
  height: var(--toast-sale-header-h, 60px);
  min-height: var(--toast-sale-header-h, 60px);
  max-height: var(--toast-sale-header-h, 60px);
  overflow: hidden;
  box-sizing: border-box;
}

.toast-cat-strip {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0;
  height: 100%;
}

.toast-cat-scroll {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.toast-cat-tabs-row {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: 0;
  height: 100%;
}

.toast-cat-tabs-row #menuCategoryEditBtn.hidden {
  display: none;
}

.toast-cat-scroll::-webkit-scrollbar {
  display: none;
}

.toast-cat-tabs,
.toast-cat-tabs.category-tabs {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: 0;
  padding-left: 4px;
  padding-top: 0;
  padding-bottom: 0;
  height: 100%;
}

.toast-menu-header-tools {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0 8px 0 4px;
  background: var(--cat-section-bg);
  box-sizing: border-box;
}

.toast-menu-header .toast-cat-arrow {
  width: 44px;
  height: 44px;
  font-size: 1.45rem;
  -webkit-text-stroke: 0.55px currentColor;
  paint-order: stroke fill;
}

.toast-menu-search-bar {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 10px;
  background: var(--cat-section-bg);
  border-top: 1px solid var(--cat-section-border);
}

.toast-menu-search-bar.hidden {
  display: none;
}

.toast-search-close {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #6b7280;
  font-size: 1rem;
  cursor: pointer;
}

.toast-cat-empty {
  padding: 12px 16px;
  font-size: 0.85rem;
}

.toast-cat-tabs .cat-tab-add {
  color: #6b7280;
  font-weight: 600;
}

.toast-cat-tabs .cat-tab-add:hover,
.cat-tab-add-fixed:hover {
  color: #374151;
}

.cat-tab-add-fixed {
  flex: 0 0 auto;
  align-self: center;
  white-space: nowrap;
  min-height: 44px;
  height: 44px;
  padding: 0 14px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #6b7280;
  font-size: 0.9rem;
  font-weight: 600;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  box-sizing: border-box;
}

.toast-cat-tabs.toast-cat-tabs--fill .cat-tab {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  width: 100%;
  padding: 0 8px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toast-cat-tabs:not(.toast-cat-tabs--fill) .cat-tab {
  flex: 0 1 auto;
  min-width: 3.5rem;
  max-width: 22%;
  padding: 0 12px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toast-cat-tabs .cat-tab {
  min-height: 44px;
  height: 44px;
  padding: 0 12px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--cat-tab-muted, #5f6368);
  font-size: var(--cat-tab-font-size, 0.9rem);
  font-weight: 600;
  border-bottom: 3px solid transparent;
  margin-bottom: 0;
  white-space: nowrap;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.toast-cat-tabs .cat-tab.active {
  color: var(--cat-tab-color, #005df5);
  font-weight: 800;
  background: color-mix(in srgb, var(--cat-tab-color, #005df5) 10%, #fff);
  border-bottom-color: var(--cat-tab-color, #005df5);
  border-bottom-width: 3px;
}

.toast-cat-tabs .cat-tab:active {
  background: color-mix(in srgb, var(--cat-tab-color, #005df5) 14%, #fff);
}

.toast-cat-tabs .cat-tab.active:active {
  background: color-mix(in srgb, var(--cat-tab-color, #005df5) 18%, #fff);
}

.toast-cat-tabs .cat-tab[data-cat-color]::before {
  display: none;
}

.toast-cat-arrow,
.toast-page-arrow {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-panel);
  color: var(--text);
  font-size: 1.65rem;
  line-height: 1;
  cursor: pointer;
}

.toast-cat-arrow:hover:not(:disabled),
.toast-page-arrow:hover:not(:disabled) {
  background: var(--bg);
}

.toast-cat-arrow:disabled,
.toast-page-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.toast-menu-search {
  flex: 1;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.85rem;
  background: var(--bg-panel);
  color: var(--text);
}

.toast-icon-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: transparent;
  font-size: 1.1rem;
  cursor: pointer;
}

.toast-icon-btn:hover {
  background: var(--bg);
}

.favorite-menu-section {
  flex-shrink: 0;
  padding: 8px 8px 0;
  background: #eef2f7;
  border-bottom: 1px solid #d5dbe3;
}

.favorite-menu-section.hidden {
  display: none;
}

.favorite-menu-head {
  margin: 0 0 6px 2px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  letter-spacing: -0.01em;
}

.favorite-product-grid {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 0 8px;
  scrollbar-width: thin;
}

.favorite-product-grid .product-card {
  flex: 0 0 auto;
  width: clamp(96px, 10vw, 132px);
  min-height: 72px;
  border-radius: 8px;
  padding: 10px 10px 8px;
  border: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  text-align: left;
  cursor: pointer;
}

.favorite-product-grid .product-card .name {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.favorite-product-grid .product-card .price {
  font-size: 0.78rem;
  font-weight: 700;
  margin-top: 4px;
}

.toast-product-grid {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(var(--menu-grid-cols, 6), minmax(0, 1fr));
  grid-template-rows: repeat(var(--menu-grid-rows, 4), minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  align-content: stretch;
  background: var(--bg);
  box-sizing: border-box;
}

.toast-product-grid .product-card {
  min-width: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 8px;
  padding: clamp(8px, 1.2vw, 14px);
  border: 2px solid transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  text-align: center;
  font: inherit;
  overflow: hidden;
  gap: 6px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease, border-color 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}

.toast-product-grid .product-card:active:not(.product-sold-out),
.toast-product-grid .product-card.is-pressed:not(.product-sold-out) {
  transform: scale(0.97);
  filter: brightness(0.9);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.92),
    0 0 0 3px #005df5,
    0 4px 14px rgba(0, 93, 245, 0.35);
  border-color: #005df5;
  z-index: 1;
}

@media (hover: hover) {
  .toast-product-grid .product-card:hover:not(.product-sold-out) {
    filter: brightness(1.04);
    box-shadow:
      0 0 0 2px rgba(0, 93, 245, 0.35),
      0 3px 10px rgba(0, 0, 0, 0.12);
  }
}

.toast-product-grid .product-card.has-image {
  padding: 0;
  gap: 0;
  display: block;
  background-color: #e5e7eb !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.toast-product-grid .product-card.has-image:active:not(.product-sold-out),
.toast-product-grid .product-card.has-image.is-pressed:not(.product-sold-out) {
  filter: brightness(0.86);
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, 0.95),
    0 0 0 3px #005df5,
    0 4px 14px rgba(0, 93, 245, 0.35);
}

.toast-product-grid .product-card.has-image.is-light-tile {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  background-color: #e5e7eb !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.toast-product-grid .product-card.has-image .product-card-text {
  text-align: center;
}

.toast-product-grid .product-card.has-image .price {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.96);
}

.toast-product-grid .product-card.is-light-tile {
  color: #374151;
  text-shadow: none;
  background-color: #fff !important;
  box-shadow: inset 0 0 0 1px #d1d5db;
}

.toast-product-grid .product-card.is-light-tile:active:not(.product-sold-out),
.toast-product-grid .product-card.is-light-tile.is-pressed:not(.product-sold-out) {
  background-color: #eef4ff !important;
  filter: none;
  box-shadow:
    inset 0 0 0 2px #005df5,
    0 0 0 3px rgba(0, 93, 245, 0.28);
  border-color: #005df5;
}

.toast-product-grid .product-card:not(.has-image) .product-card-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  padding: 2px 4px;
  box-sizing: border-box;
}

.toast-product-grid .product-card .name {
  flex: 1 1 auto;
  min-height: 0;
  font-size: var(--menu-name-font-size, clamp(0.72rem, 0.95vw, 0.92rem));
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

.toast-product-grid .product-card .price {
  flex: 0 0 auto;
  font-size: var(--menu-price-font-size, clamp(0.78rem, 1vw, 1rem));
  font-weight: 800;
  text-align: center;
  width: 100%;
  margin-top: 0;
}

/* 10.1" 태블릿(800~1280px, 높이 801px+) 판매 화면: 메뉴 타일은 이름만, 11px */
@media (min-width: 800px) and (max-width: 1280px) and (min-height: 801px) {
  .toast-product-grid .product-card .price {
    display: none;
  }

  .toast-product-grid .product-card:not(.has-image) .product-card-text {
    gap: 0;
  }

  .toast-product-grid .product-card .name {
    flex: 1 1 auto;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    font-size: 11px;
  }
}

/* 10" 태블릿 가로 1024×768 — 판매·테이블 화면 높이 보정 */
@media (max-width: 1024px) and (max-height: 800px) {
  :root {
    --toast-sale-header-h: 52px;
    --pos-cart-min: 220px;
    --pos-cart-max: 272px;
  }

  #view-cashier.active.mode-prepaid .cashier-order-flow,
  #view-cashier.active.mode-postpaid-order .cashier-order-flow,
  #view-cashier.active.mode-quick-order .cashier-order-flow {
    height: 100%;
    max-height: 100%;
    min-height: 0;
  }

  .toast-menu-panel,
  .toast-cart-panel {
    min-height: 0;
    max-height: 100%;
    height: 100%;
  }

  .toast-menu-header {
    min-height: var(--toast-sale-header-h, 52px);
    max-height: none;
    height: auto;
    overflow: visible;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  .toast-cat-strip {
    min-width: 0;
    overflow: hidden;
  }

  .toast-cat-tabs-row {
    min-width: 0;
    overflow: hidden;
  }

  .toast-cat-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .toast-cat-tabs.toast-cat-tabs--scroll {
    flex: 0 0 auto;
    width: max-content;
    max-width: none;
    min-width: 0;
    gap: 0;
  }

  .toast-cat-tabs.toast-cat-tabs--scroll .cat-tab,
  .toast-cat-tabs:not(.toast-cat-tabs--fill) .cat-tab {
    flex: 0 0 auto;
    min-width: auto;
    max-width: none;
    width: auto;
    overflow: hidden;
    padding: 0 12px;
    border-right: 1px solid #d5dbe3;
  }

  .toast-cat-tabs.toast-cat-tabs--scroll .cat-tab:last-child,
  .toast-cat-tabs:not(.toast-cat-tabs--fill) .cat-tab:last-child {
    border-right: none;
  }

  .toast-cat-tabs.toast-cat-tabs--fill .cat-tab {
    flex: 0 0 auto;
    min-width: auto;
    max-width: none;
    width: auto;
    overflow: hidden;
  }

  .toast-cat-tabs .cat-tab {
    min-height: 44px;
    height: 44px;
    padding: 0 12px;
    font-size: 0.82rem;
    flex-shrink: 0;
  }

  .toast-cat-tabs .cat-tab-name {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    max-width: none;
  }

  .toast-cat-tabs .cat-tab-count {
    flex-shrink: 0;
    margin-left: 4px;
  }

  .toast-menu-header .toast-cat-arrow {
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-size: 1.4rem;
    -webkit-text-stroke: 0.5px currentColor;
  }

  .toast-product-grid {
    min-height: 200px;
    --menu-grid-rows: 5;
  }

  .toast-product-grid .product-card:not(.has-image) .product-card-text {
    gap: 2px;
    overflow: visible;
    justify-content: center;
  }

  .toast-product-grid .product-card .name {
    flex: 1 1 auto;
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    -webkit-box-orient: unset;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;
    font-size: 10px;
    line-height: 1.2;
  }

  .toast-product-grid .product-card .price {
    display: block;
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.15;
    opacity: 0.95;
  }

  .toast-product-grid .product-card.has-image .product-card-text .price {
    display: block;
  }

  .toast-menu-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 4px 8px;
    padding: 4px 8px;
    min-width: 0;
    position: relative;
    z-index: 2;
  }

  .toast-menu-footer-left {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .toast-menu-footer-left::-webkit-scrollbar {
    display: none;
  }

  .toast-menu-footer-center {
    grid-column: 1;
    grid-row: 2;
    flex: unset;
    justify-content: flex-start;
    min-width: 0;
  }

  .toast-menu-footer-right {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    flex-shrink: 0;
  }

  .toast-page-arrow {
    width: 36px;
    height: 36px;
    font-size: 1.35rem;
    border-radius: 10px;
  }

  .toast-page-label {
    min-width: 38px;
    font-size: 0.82rem;
  }

  .toast-page-arrow:disabled {
    opacity: 0.5;
  }

  .toast-menu-footer .toast-employee-select {
    max-width: 7.5rem;
    min-width: 5rem;
  }

  .toast-menu-foot-btn {
    font-size: 0.78rem;
    padding: 4px 6px;
    white-space: nowrap;
  }

  .toast-quick-options {
    padding: 4px 8px 6px;
  }

  .toast-quick-order-btn {
    min-height: 40px;
    padding: 2px 4px;
    font-size: 0.68rem;
  }

  .toast-menu-footer-action {
    min-height: 32px;
    padding: 0 10px;
    font-size: 0.76rem;
  }

  .cashier-table-floor {
    padding: 4px 8px 4px 10px;
  }

  .table-floor-tabs {
    margin-bottom: 4px;
    gap: 4px;
  }

  .table-floor-tab {
    min-height: 32px;
    padding: 0 10px;
    font-size: 0.82rem;
  }

  .table-floor-grid.table-floor-grid-placement {
    aspect-ratio: unset;
    width: 100%;
    height: 100%;
    max-height: 100%;
    align-self: stretch;
  }

  .table-floor-sidebar {
    width: 96px;
  }

  .table-floor-func-btn {
    font-size: 11px;
    padding: 4px 2px;
  }
}


.toast-menu-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: var(--cat-section-bg);
  border-top: 1px solid var(--cat-section-border);
}

.toast-menu-footer-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.toast-menu-footer-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.toast-menu-footer-action {
  flex-shrink: 0;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-panel);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.toast-menu-footer-action:hover {
  border-color: #005df5;
  color: #0050d4;
}

.toast-menu-footer .seat-order-seat-bar {
  padding: 0;
  border: none;
  background: transparent;
  flex: 1;
  min-width: 0;
  justify-content: flex-end;
}

.toast-menu-footer .seat-order-seat-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  max-width: min(42vw, 520px);
  padding-bottom: 2px;
}

.toast-menu-footer .toast-employee-select {
  max-width: 10rem;
  min-width: 6.5rem;
  flex: 1 1 auto;
  font-size: 0.78rem;
  padding: 0 0.45rem;
  min-height: 32px;
  border-radius: 8px;
  position: relative;
  z-index: 2;
  cursor: pointer;
}

.toast-menu-foot-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 8px;
}

.toast-menu-footer-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.toast-page-label {
  font-size: 0.9rem;
  color: var(--text-muted);
  min-width: 44px;
  text-align: center;
  font-weight: 700;
}

.toast-quick-options {
  flex-shrink: 0;
  padding: 8px 12px 10px;
  background: var(--cat-section-bg);
  border-top: 1px solid var(--cat-section-border);
}

.toast-quick-options-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.toast-quick-clear-group {
  display: flex;
  flex-shrink: 0;
  margin-left: auto;
}

.toast-quick-clear-group .toast-quick-order-btn {
  flex: none;
  min-width: 4.25rem;
}

.toast-quick-order-buttons {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  align-items: stretch;
}

.toast-quick-order-buttons .toast-quick-order-btn {
  flex: 1 1 0;
  min-width: 4.25rem;
}

.toast-quick-kitchen-group {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
}

.toast-quick-side-group {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  flex-shrink: 0;
}

.toast-quick-side-group .toast-quick-order-btn {
  min-width: 4.5rem;
}

.toast-quick-kitchen-group .toast-quick-order-btn {
  flex: 1 1 0;
  min-width: 4.25rem;
}

.toast-quick-options-actions.hidden {
  display: none;
}

.toast-quick-order-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  padding: 4px 6px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
  color: #374151;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.toast-quick-order-btn.hidden {
  display: none;
}

.toast-quick-order-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.toast-quick-order-btn:not(:disabled):active {
  background: #eef2ff;
  border-color: #93c5fd;
}

.toast-quick-tip-btn.has-tip {
  background: rgba(59, 130, 246, 0.12);
  border-color: #3b82f6;
  color: #0050d4;
}

.toast-quick-kitchen-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1.1;
}

.toast-quick-kitchen-icon {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
}

.toast-quick-kitchen-icon.hold {
  background: #dc2626;
  color: #fff;
}

.toast-quick-kitchen-icon.clear-all {
  background: #64748b;
  color: #fff;
}

.toast-quick-kitchen-icon.release {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
}

.toast-quick-kitchen-icon.stay,
.toast-quick-kitchen-icon.send,
.toast-quick-kitchen-icon.table {
  background: #eab308;
  color: #1f2937;
}

.toast-cart-kitchen-action-btn {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 14px;
  line-height: 1.1;
}

.toast-cart-action-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid #ffd600;
  border-radius: 50%;
  color: #ffd600;
  background: transparent;
}

.toast-cart-table-btn .toast-cart-action-icon {
  border-color: #fff;
  color: #fff;
}

.toast-plane-icon {
  width: 14px;
  height: 14px;
  display: block;
}

.toast-plane-icon--send {
  transform: none;
}

.toast-plane-icon--table {
  transform: rotate(180deg);
}

.toast-cart-kitchen-action-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
}

.toast-quick-clear-btn {
  border-color: #fca5a5;
  color: #dc2626;
  background: #fef2f2;
}

.toast-quick-clear-btn:not(:disabled):active {
  background: #fee2e2;
  border-color: #f87171;
}

.toast-cart-action-bar {
  flex-shrink: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 8px 12px;
  background: var(--cat-section-bg);
  border-top: 1px solid var(--cat-section-border);
}

.toast-cart-action-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 0 10px;
  border: none;
  border-radius: 10px;
  background: #005df5;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
}

.toast-cart-action-btn.toast-cart-clear-btn {
  color: #fff;
}

.toast-cart-action-btn.toast-cart-clear-btn:not(:disabled):active {
  background: #0046c0;
}

.toast-cart-action-btn.toast-cart-table-btn .toast-cart-kitchen-action-label {
  color: #fff;
}

.toast-cart-action-btn.toast-cart-table-btn .toast-cart-action-icon {
  border-color: #fff;
  color: #fff;
}

.toast-cart-action-btn.toast-cart-table-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  color: rgba(255, 255, 255, 0.7);
}

.toast-cart-action-btn.toast-cart-table-btn:disabled .toast-cart-action-icon {
  border-color: rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.7);
}

.toast-cart-action-btn.toast-cart-table-btn:not(:disabled):active {
  background: #0046c0;
}

.toast-cart-action-btn.toast-cart-send-btn {
  flex: 1.2 1 0;
}

.toast-cart-action-btn.toast-cart-send-btn .toast-cart-action-icon {
  border-color: #ffd600;
  color: #ffd600;
}

.toast-cart-action-btn.toast-cart-send-btn .toast-cart-kitchen-action-label {
  color: #fff;
}

.toast-cart-action-btn.toast-cart-send-btn:not(:disabled):active {
  background: #0046c0;
}

.toast-cart-action-btn.hidden {
  display: none;
}

.toast-cart-action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.toast-guest-btn.has-count .sale-guest-count-badge {
  color: #005df5;
}

.toast-cart-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-panel);
}

.toast-cart-top {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--cat-section-border);
  box-sizing: border-box;
}

.toast-cart-row-primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px 0;
}

.toast-cart-row-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 8px;
  font-size: 0.74rem;
}

.toast-cart-row-meta-end {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}

.sale-order-member-anchor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#view-cashier.mode-postpaid-order .toast-cart-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  height: var(--toast-sale-header-h, 60px);
  min-height: var(--toast-sale-header-h, 60px);
  max-height: var(--toast-sale-header-h, 60px);
  padding: 0 12px 0 4px;
  overflow: hidden;
  box-sizing: border-box;
}

#view-cashier.mode-postpaid-order .toast-order-type {
  padding: 2px;
}

#view-cashier.mode-postpaid-order .toast-type-btn {
  min-height: 44px;
  height: 44px;
  padding: 0 14px;
}

#view-cashier.mode-postpaid-order .toast-receipt-print-btn {
  min-height: 44px;
  height: 44px;
  width: 44px;
}

#view-cashier.mode-postpaid-order .toast-guest-btn {
  height: 44px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 8px;
  border-radius: 10px;
  font-size: 1rem;
}

#view-cashier.mode-postpaid-order .sale-guest-count-icon {
  font-size: 1.15rem;
}

#view-cashier.mode-postpaid-order .sale-guest-count-badge {
  font-size: 1rem;
}

#view-cashier.mode-postpaid-order .toast-cart-row-primary,
#view-cashier.mode-postpaid-order .toast-cart-row-meta {
  display: contents;
}

#view-cashier.mode-postpaid-order .toast-cart-row-primary .toast-cart-actions {
  display: none;
}

#view-cashier.mode-postpaid-order .toast-cart-meta-label {
  display: none;
}

#view-cashier.mode-postpaid-order .toast-cart-table {
  font-size: 1.44rem;
  font-weight: 800;
  line-height: 1;
}

#view-cashier.mode-postpaid-order .toast-cart-row-meta-end {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}

#view-cashier.mode-postpaid-order .toast-member-toolbar {
  display: none !important;
}

#view-cashier.mode-prepaid .toast-cart-top {
  border-bottom: none;
}

#view-cashier.mode-prepaid .toast-cart-row-primary {
  height: var(--toast-sale-header-h, 60px);
  min-height: var(--toast-sale-header-h, 60px);
  max-height: var(--toast-sale-header-h, 60px);
  box-sizing: border-box;
  padding: 0 12px;
  border-bottom: 1px solid #f3f4f6;
}

#view-cashier.mode-prepaid .toast-cart-row-meta {
  display: none;
}

#view-cashier.mode-prepaid #saleOrderBtn {
  display: none !important;
}

#view-cashier.mode-quick-order .toast-cart-top {
  border-bottom: none;
}

#view-cashier.mode-quick-order .toast-cart-row-primary {
  height: var(--toast-sale-header-h, 60px);
  min-height: var(--toast-sale-header-h, 60px);
  max-height: var(--toast-sale-header-h, 60px);
  box-sizing: border-box;
  padding: 0 12px;
  border-bottom: 1px solid #f3f4f6;
}

#view-cashier.mode-quick-order .toast-cart-row-meta {
  display: none;
}

#view-cashier.mode-quick-order #saleOrderBtn {
  display: none !important;
}

#view-cashier.mode-quick-order .seat-order-seat-bar {
  display: none !important;
}

.toast-cart-footer {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
}

.toast-cart-checkout {
  background: var(--cat-section-bg);
  color: var(--text);
  border-top-color: var(--cat-section-border);
  --toast-cart-muted-text: var(--cat-tab-muted, #5f6368);
}

.toast-kitchen-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.toast-kitchen-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 74px;
  padding: 8px 4px;
  border: 1px solid #3d4659;
  border-radius: 10px;
  background: #252b3a;
  color: #f3f4f6;
  cursor: pointer;
}

.toast-kitchen-action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.toast-kitchen-action-btn:not(:disabled):active {
  background: #2f3647;
}

.toast-kitchen-action-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
}

.toast-kitchen-action-icon.hold {
  background: #dc2626;
  color: #fff;
}

.toast-kitchen-action-icon.stay,
.toast-kitchen-action-icon.send {
  background: #eab308;
  color: #1f2937;
}

.toast-kitchen-action-label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.toast-checkout-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 2px 2px;
}

.toast-checkout-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.92rem;
}

.toast-checkout-line.hidden {
  display: none;
}

.toast-checkout-label {
  color: var(--text-muted);
  font-weight: 600;
}

.toast-checkout-label-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.toast-checkout-value {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.toast-checkout-negative {
  color: #fca5a5;
}

.toast-checkout-remove {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid #4b5563;
  border-radius: 6px;
  background: transparent;
  color: #9ca3af;
  font-size: 0.72rem;
  line-height: 1;
  cursor: pointer;
}

.toast-checkout-pay-row {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 10px;
}

.toast-checkout-pay-row-single {
  grid-template-columns: 1fr;
}

.toast-checkout-secondary-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.toast-checkout-secondary-btns.hidden {
  display: none;
}

.toast-checkout-secondary-btn {
  min-height: 44px;
  border: 1px solid #4b5563;
  border-radius: 10px;
  background: #252b3a;
  color: #e5e7eb;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}

.toast-checkout-secondary-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.toast-checkout-secondary-btn:not(:disabled):active {
  background: #2f3647;
}

.toast-tip-secondary-btn {
  border-color: #3b82f6;
  color: #93c5fd;
}

.toast-tip-secondary-btn.has-tip {
  background: rgba(59, 130, 246, 0.18);
  box-shadow: inset 0 0 0 1px #3b82f6;
}

.toast-checkout-discount-btn {
  min-height: 52px;
  border: 2px solid #3b82f6;
  border-radius: 12px;
  background: transparent;
  color: #60a5fa;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
}

.toast-checkout-discount-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.toast-checkout-discount-btn:not(:disabled):active {
  background: rgba(59, 130, 246, 0.12);
}

.toast-checkout-pay-btn {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  border: none;
  border-radius: 12px;
  background: #005df5;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 93, 245, 0.35);
  overflow: hidden;
}

.toast-checkout-pay-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.toast-checkout-pay-btn .toast-pay-amount-num {
  font-size: clamp(1.15rem, 5vw, 1.55rem);
  color: #fff;
}

.toast-checkout-pay-btn .toast-pay-amount-prefix,
.toast-checkout-pay-btn .toast-pay-amount-currency {
  color: #fff;
}

.toast-cart-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #f3f4f6;
}

.toast-order-type {
  display: inline-flex;
  padding: 4px;
  background: var(--bg-elevated);
  border-radius: 12px;
  gap: 2px;
  flex-shrink: 0;
}

.toast-type-btn {
  min-height: 47px;
  padding: 0 16px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #6b7280;
  font-size: 1.08rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.toast-type-btn[data-order-type="dine_in"]:not(.active),
.toast-type-btn[data-order-type="takeout"]:not(.active) {
  color: #9ca3af;
}

.toast-type-btn[data-order-type="dine_in"].active {
  background: #005df5;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 93, 245, 0.35);
}

.toast-type-btn[data-order-type="takeout"].active {
  background: #dc2626;
  color: #fff;
  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.35);
}

.toast-receipt-print-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 47px;
  width: 47px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: #e5e9f0;
  color: #4b5563;
  cursor: pointer;
  flex-shrink: 0;
}

.toast-receipt-print-btn.is-on {
  background: #dbe3f1;
  color: #3f4854;
}

.toast-receipt-print-btn.is-off {
  background: #eceef1;
  color: #8a909a;
}

.toast-receipt-print-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
}

.toast-receipt-print-icon svg {
  width: 100%;
  height: 100%;
}

.toast-cart-actions {
  display: flex;
  gap: 4px;
}

.toast-cart-meta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 0.99rem;
  border-bottom: 1px solid #f3f4f6;
}

.toast-cart-meta-label {
  color: #111827;
  font-weight: 800;
  font-size: 0.99rem;
}

.toast-cart-table {
  font-size: 1.44rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}

.toast-cart-back {
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  padding: 6px 12px;
  font-size: 0.82rem;
  font-weight: 800;
  color: #111827;
  cursor: pointer;
  white-space: nowrap;
}

.toast-guest-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--bg-panel);
  padding: 0 11px;
  height: 58px;
  min-height: 58px;
  min-width: 58px;
  box-sizing: border-box;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
}

.sale-guest-count-icon {
  font-size: 1.26rem;
  line-height: 1;
}

.sale-guest-count-badge {
  min-width: 1ch;
  font-size: 1.08rem;
  font-weight: 800;
  color: #005df5;
}

.toast-guest-btn.has-count .sale-guest-count-badge {
  color: #005df5;
}

.toast-member-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* 하단 버튼 바(주방·할인·삭제)에 배치된 회원 버튼 */
.toast-quick-order-buttons .toast-quick-member-host {
  display: contents;
}

.toast-quick-order-buttons .toast-quick-member-host .toast-member-toolbar {
  display: flex;
  flex: 1 1 0;
  min-width: 4.25rem;
  align-items: stretch;
  gap: 4px;
}

.toast-quick-order-buttons .toast-quick-member-host .toast-member-toolbar.hidden {
  display: none !important;
}

.toast-quick-member-btn {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1 1 0;
  min-width: 0;
}

.toast-quick-member-btn .toast-quick-member-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.toast-quick-member-btn.has-member {
  background: rgba(59, 130, 246, 0.12);
  border-color: #3b82f6;
  color: #0050d4;
}

.toast-quick-member-clear {
  flex: 0 0 auto;
  min-width: 30px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  color: #b91c1c;
  font-weight: 800;
  cursor: pointer;
}

.toast-quick-order-buttons .sale-member-badge {
  align-self: center;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.toast-member-toolbar:not(.hidden) {
  display: inline-flex;
}

.toast-member-toolbar.hidden {
  display: none !important;
}

.toast-cart-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: var(--bg-panel);
}

.toast-cart-list::-webkit-scrollbar {
  display: none;
}

.toast-cart-empty {
  margin: 24px 16px;
  text-align: center;
  color: #9ca3af;
  font-size: 0.9rem;
}

.toast-cart-item {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  background: var(--bg-panel);
}

.toast-cart-item.selected {
  background: #eff6ff;
}

.toast-cart-item.cart-line-unsent,
.toast-cart-item.cart-line-pending-add {
  background: #eff6ff;
  border-left: 3px solid #005df5;
}

.toast-cart-item.cart-line-unsent.selected,
.toast-cart-item.cart-line-pending-add.selected {
  background: #dbeafe;
}

.toast-cart-item.cart-line-unsent .toast-cart-item-name,
.toast-cart-item.cart-line-unsent .toast-cart-item-price,
.toast-cart-item.cart-line-pending-add .toast-cart-item-name,
.toast-cart-item.cart-line-pending-add .toast-cart-item-price {
  color: #0050d4;
}

.toast-cart-item.cart-line-unsent .toast-cart-item-qty-label,
.toast-cart-item.cart-line-pending-add .toast-cart-item-qty-label {
  color: #3b82f6;
}

.toast-cart-item.cart-line-sent {
  background: var(--bg-panel);
  border-left: none;
}

.toast-cart-item.cart-line-sent .toast-cart-item-name,
.toast-cart-item.cart-line-sent .toast-cart-item-price {
  color: var(--text);
}

.toast-cart-item-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.toast-cart-line-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(5.5rem, auto) minmax(4.25rem, auto);
  column-gap: 0.1px;
  row-gap: 4px;
  align-items: center;
  width: 100%;
}

.toast-cart-line-grid.has-seat-col {
  grid-template-columns: 2rem minmax(0, 1fr) minmax(5.5rem, auto) minmax(4.25rem, auto);
}

.toast-cart-seat-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 2rem;
}

.toast-cart-col-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

.toast-cart-col-unitqty {
  text-align: right;
  white-space: nowrap;
}

.toast-cart-col-deduction {
  text-align: right;
  font-size: 0.82rem;
  font-weight: 700;
  color: #ef4444;
  white-space: nowrap;
}

.toast-cart-col-amount {
  text-align: right;
  font-size: 0.92rem;
  font-weight: 800;
  color: #111827;
  white-space: nowrap;
}

.toast-cart-col-amount.is-discount {
  color: #ef4444;
}

.toast-cart-col-amount.is-original {
  text-decoration: line-through;
  text-decoration-color: #9ca3af;
  text-decoration-thickness: 1.5px;
  color: #9ca3af;
  font-weight: 700;
}

.toast-cart-discount-label-col {
  gap: 6px;
}

.toast-cart-item-head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

.toast-cart-item-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toast-cart-item-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.toast-cart-item-unit-qty {
  font-size: 0.82rem;
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
}

.toast-cart-item-unit {
  font-size: 0.82rem;
  font-weight: 600;
  color: #6b7280;
}

.toast-cart-item-inline-badges {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.toast-cart-item-qty-label {
  color: #6b7280;
  font-weight: 600;
  font-size: 0.82rem;
}

.toast-cart-item-price {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 0.92rem;
  font-weight: 800;
  color: #111827;
  white-space: nowrap;
}

.toast-cart-badge {
  display: inline-flex;
  align-items: center;
  margin-top: 0;
  padding: 2px 8px;
  border-radius: 6px;
  background: #dbeafe;
  color: #005df5;
  font-size: 0.72rem;
  font-weight: 700;
}

.kds-item-pack-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 4px;
  background: #dbeafe;
  color: #005df5;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

.toast-cart-item-meta {
  margin-top: 4px;
  font-size: 0.75rem;
  color: #6b7280;
}

.toast-cart-item-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.toast-qty-btn {
  width: 36px;
  height: 36px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
}

.toast-qty-val {
  min-width: 24px;
  text-align: center;
  font-size: 1rem;
  font-weight: 800;
}

.toast-qty-change-btn {
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background: #fff;
  color: #374151;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.toast-cart-del {
  margin-left: auto;
  min-height: 36px;
  padding: 0 14px;
  border: none;
  border-radius: 10px;
  background: #fee2e2;
  color: #dc2626;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.toast-cart-del-cancel {
  background: #eff6ff;
  color: #005df5;
}

.toast-cart-del-cancel:active {
  background: #dbeafe;
}

.toast-cart-item.cart-line-sent.cart-line-kitchen-done .toast-cart-item-name {
  color: #111827;
}

.toast-cart-item.cart-line-cancelled .toast-cart-item-name,
.toast-cart-item.cart-line-cancelled .toast-cart-item-qty-label,
.toast-cart-item.cart-line-cancelled .toast-cart-item-price {
  text-decoration: line-through;
  text-decoration-color: #dc2626;
  text-decoration-thickness: 2px;
  color: #9ca3af;
}

.toast-cart-badge-cancel {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.toast-cart-badge-pending-add {
  background: #005df5;
  color: #fff;
}

.kds-line-cancelled .kds-line-main strong,
.kds-detail-item-cancelled .kds-line-main strong {
  text-decoration: line-through;
  text-decoration-color: #ef4444;
  text-decoration-thickness: 2px;
  color: #9ca3af;
}

.kds-cancel-tag {
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 800;
  background: #fee2e2;
  color: #b91c1c;
}

.kds-order-card.status-CANCELLED {
  border-color: #f87171;
  opacity: 0.92;
}

.kds-order-card.status-CANCELLED .kds-age-bar {
  background: #dc2626;
}

.kds-pill-CANCELLED {
  background: #fee2e2;
  color: #b91c1c;
}

.kds-actions .btn-ack-cancel,
.kds-detail-item-actions .btn-ack-cancel-item {
  background: #dc2626;
  color: #fff;
  border: none;
  font-weight: 700;
}

.kds-actions .btn-ack-cancel:hover,
.kds-detail-item-actions .btn-ack-cancel-item:hover {
  background: #b91c1c;
}

.kds-actions .btn-ack-served,
.kds-detail-actions .btn-ack-served {
  background: var(--kitchen-done-border, #2e7d32);
  color: #fff;
  border: none;
  font-weight: 700;
}

.kds-actions .btn-ack-served:hover,
.kds-detail-actions .btn-ack-served:hover {
  filter: brightness(0.92);
}

.kds-actions-row-ready {
  flex-wrap: wrap;
  gap: 6px;
}

.kds-col-CANCELLED .kds-col-header {
  border-bottom-color: #f87171;
}

.toast-cart-status {
  flex-shrink: 0;
  margin: 0;
  padding: 6px 14px;
  font-size: 0.78rem;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
}

.toast-cart-adjust-rows {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 12px 8px;
}

.toast-cart-adjust-rows.hidden {
  display: none;
}

.toast-cart-adjust-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 0.85rem;
}

.toast-cart-adjust-row.hidden {
  display: none;
}

.toast-cart-adjust-label-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.toast-cart-order-discount-row {
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.toast-cart-order-discount-row strong {
  font-weight: 800;
  color: #dc2626;
  white-space: nowrap;
}

.toast-cart-tip-row {
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #0050d4;
}

.toast-cart-tip-row strong {
  font-weight: 800;
  color: #005df5;
  white-space: nowrap;
}

.tip-modal-title {
  margin: 0 0 12px;
  font-size: 1.05rem;
  font-weight: 800;
  color: #111827;
}

.discount-btn-confirm.tip-confirm-btn {
  background: #005df5;
  border-color: #005df5;
}

.discount-btn-confirm.tip-confirm-btn:hover {
  background: #0050d4;
}

.toast-cart-footer-btns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.toast-cart-footer-btns:has(#backToTablesBtn:not(.hidden)) {
  grid-template-columns: repeat(3, 1fr);
}

.toast-cart-footer-primary-btns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.toast-cart-footer-primary-btns .toast-clear-all-btn {
  grid-column: 1 / -1;
}

#view-cashier.mode-prepaid .toast-cart-footer-primary-btns {
  grid-template-columns: repeat(3, 1fr);
}

.toast-secondary-btn {
  min-height: 44px;
  padding: 0 6px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  color: #374151;
  font-size: clamp(0.78rem, 2.2vw, 0.88rem);
  font-weight: 700;
  cursor: pointer;
}

.toast-secondary-btn.toast-tip-btn {
  border-color: #005df5;
  background: #005df5;
  color: #fff;
}

.toast-secondary-btn.toast-tip-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.toast-secondary-btn.toast-tip-btn.has-tip {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45);
}

.toast-header-accent-btn {
  flex-shrink: 0;
}

.toast-cart-row-meta .toast-header-accent-btn.toast-tip-btn {
  width: 32px;
  height: 32px;
  min-height: 32px;
  min-width: 32px;
  padding: 0;
  border-radius: 10px;
  font-size: 0.58rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.toast-primary-btn {
  min-height: 48px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  color: #374151;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
}

.toast-primary-btn.toast-cancel-btn {
  color: #dc2626;
}

.toast-primary-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.toast-pay-btn {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  border: none;
  border-radius: 14px;
  background: #005df5;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 93, 245, 0.32);
  overflow: hidden;
}

.toast-pay-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.toast-pay-amount {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  max-width: 100%;
  line-height: 1;
}

.toast-pay-amount-num {
  font-size: clamp(1.5rem, 7.5vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.toast-pay-amount-prefix {
  font-size: clamp(1.15rem, 5.5vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.toast-pay-amount-currency {
  margin-left: 2px;
  font-size: clamp(0.78rem, 2.6vw, 0.92rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.sale-legacy-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.toast-cart-panel .sale-func-hold {
  position: relative;
  width: 56px;
  height: 56px;
  font-size: 1.7rem;
  line-height: 1;
  border-radius: 12px;
}

.toast-cart-panel .sale-func-hold .parked-hold-badge {
  top: 2px;
  right: 2px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  font-size: 1rem;
  line-height: 24px;
}

.parked-hold-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}

.parked-orders-modal {
  width: min(480px, 96vw);
  max-height: min(85vh, 560px);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.parked-orders-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 18px 12px;
  overflow: auto;
}

.parked-orders-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.parked-order-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  text-align: left;
  cursor: pointer;
}

.parked-order-row:hover {
  border-color: #93c5fd;
  background: #eff6ff;
}

.parked-order-label {
  font-size: 0.92rem;
  color: #0f172a;
}

.parked-order-meta {
  font-size: 0.78rem;
  color: #64748b;
}

.toast-cart-panel .sale-func-hold.active-hold {
  background: #fee2e2;
  border-radius: 10px;
}

/* 할인 모달 */
.discount-modal {
  width: min(760px, 96vw);
  max-width: 760px;
  max-height: min(90vh, 700px);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.discount-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 0;
  border-bottom: none;
  flex-shrink: 0;
}

.discount-modal-tabs {
  display: flex;
  gap: 20px;
}

.discount-tab {
  border: none;
  background: transparent;
  padding: 0 0 12px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #9ca3af;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}

.discount-tab.active {
  color: #111827;
  font-weight: 800;
  border-bottom-color: #111827;
}

.discount-modal-body {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 0;
  flex: 1;
  min-height: 0;
}

.discount-mandatory-panel {
  grid-column: 1 / -1;
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fafafa;
  border-bottom: 1px solid #e5e7eb;
  overflow-y: auto;
}

.discount-mandatory-hint {
  margin: 0;
  font-size: 0.82rem;
  color: #4b5563;
  line-height: 1.45;
}

.discount-mandatory-type-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.discount-mandatory-type-btn {
  flex: 1 1 calc(50% - 4px);
  min-width: 120px;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}

.discount-mandatory-id-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* 법정 할인 탭: 화면 확대 + 할인종류 1줄 + 이름/ID 1줄 + 키패드 축소 */
.discount-modal.discount-modal--mandatory {
  width: min(900px, 96vw);
  max-width: 900px;
  max-height: min(94vh, 880px);
}

.discount-modal-body--mandatory .discount-mandatory-type-row {
  flex-wrap: nowrap;
}

.discount-modal-body--mandatory .discount-mandatory-type-btn {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  padding: 10px 6px;
  font-size: 0.82rem;
}

.discount-modal-body--mandatory .discount-keypad {
  border: none;
  gap: 7px;
  overflow: visible;
  padding: 4px 2px 2px;
  flex: none;
}

.discount-modal-body--mandatory .discount-key {
  min-height: 40px;
  font-size: 1rem;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}

.discount-modal-body--mandatory .discount-key:nth-child(3n),
.discount-modal-body--mandatory .discount-key:nth-last-child(-n + 3) {
  border: 1px solid #ddd;
}

.discount-modal-body--mandatory .discount-key:hover {
  background: #f3f6fc;
  border-color: #c7d2fe;
}

.discount-mandatory-type-btn.active {
  border-color: var(--primary);
  background: rgba(37, 99, 235, 0.08);
  color: var(--primary);
}

.discount-mandatory-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #374151;
}

.discount-mandatory-field .touch-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.95rem;
}

.discount-mandatory-count-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.discount-mandatory-note {
  margin: 0;
  font-size: 0.75rem;
  color: #6b7280;
  line-height: 1.4;
}

.discount-mandatory-check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.82rem;
  color: #374151;
  line-height: 1.4;
}

.discount-mandatory-solo-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.discount-mandatory-clear {
  align-self: flex-start;
  padding: 8px 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}

.screen-setup-reset-btn {
  margin-top: 8px;
}

.printer-settings-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.printer-settings-block {
  padding-bottom: 8px;
}

.printer-settings-meta {
  margin: 6px 0 10px;
}

.device-conn-subtitle {
  margin: 16px 0 8px;
  font-size: 0.95rem;
  font-weight: 600;
}

.kitchen-printer-settings-block {
  margin: 0 0 12px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
}

.kitchen-printer-settings-label {
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
}

.printer-assign-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
  margin-bottom: 10px;
}

.printer-assign-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
}

.printer-assign-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 2px;
}

.printer-assign-card-title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  flex: 1 1 auto;
  min-width: 0;
}

.printer-assign-use {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
}

.printer-assign-use input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  cursor: pointer;
}

.printer-slip-template-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: flex-end;
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
}

.printer-slip-template-bar .settings-field-compact {
  min-width: 160px;
  margin: 0;
}

.printer-assign-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

.printer-assign-card .settings-field-compact {
  gap: 3px;
  margin: 0;
}

.printer-assign-card .settings-field-compact > span {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.2;
}

.printer-assign-input.touch-input,
.printer-assign-card select.printer-assign-input {
  min-height: 35px;
  height: 35px;
  padding: 4px 8px;
  font-size: 0.8rem;
  line-height: 1.2;
}

.printer-assign-test-btn {
  width: 100%;
  min-height: 35px;
  height: 35px;
  margin-top: 2px;
  padding: 4px 8px;
  font-size: 0.8rem;
}

.printer-selected-templates-block {
  margin-top: 8px;
  padding: 16px;
  border: 1px solid var(--border, #d8dee9);
  border-radius: 12px;
  background: #fff;
}

.printer-selected-tpl-root {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.printer-selected-tpl-all {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}

.printer-selected-tpl-item {
  display: flex;
  flex-direction: column;
  flex: 1 1 280px;
  min-width: 240px;
  max-width: 340px;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border, #d8dee9);
  border-radius: 10px;
  background: #f8fafc;
}

.printer-selected-tpl-item-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  flex-shrink: 0;
}

.printer-selected-tpl-item-head:hover {
  color: #0f172a;
}

.printer-selected-tpl-item-variant strong {
  color: #0f172a;
  font-weight: 700;
}

.printer-selected-tpl-preview-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  max-height: min(68vh, 680px);
  padding: 8px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #fff;
}

.printer-selected-tpl-preview {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.printer-selected-tpl-preview .receipt-ph-paper,
.printer-selected-tpl-preview .slip-paper-preview {
  margin: 0 auto;
}

.printer-selected-tpl-change-btn {
  align-self: flex-start;
}

.output-tpl-options {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border, #d8dee9);
  border-radius: 10px;
  background: #f8fafc;
  flex-shrink: 0;
}

.output-tpl-options-summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.95rem;
  color: #0f172a;
}

.output-tpl-options-hint {
  margin: 8px 0 0;
}

.output-tpl-options-fields {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.output-tpl-opt-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
  color: #334155;
}

.output-tpl-opt-field-check {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.output-tpl-opt-field-check input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--primary, #005df5);
}

.output-tpl-options-save {
  margin-top: 12px;
}

.printer-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
}

.device-conn-form {
  max-width: 520px;
}

.device-conn-scan-block .device-conn-subtitle:first-of-type {
  margin-top: 12px;
}

.device-conn-scan-below-actions {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.device-conn-scan-below-actions .settings-work-section-title {
  margin-top: 0;
}

.printer-port-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.printer-port-item {
  display: grid;
  grid-template-columns: minmax(72px, 120px) minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
}

.printer-port-loading {
  grid-template-columns: 1fr;
  color: #6b7280;
}

.printer-port-name {
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.92rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.printer-port-desc {
  font-size: 0.84rem;
  color: #4b5563;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.printer-port-status {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #059669;
}

.printer-port-type {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
}

.printer-port-type-usb {
  background: #ecfdf5;
  color: #047857;
}

.printer-port-type-serial {
  background: #eff6ff;
  color: #1d4ed8;
}

.printer-port-type-network {
  background: #fef3c7;
  color: #b45309;
}

.printer-network-manual-grid {
  margin-top: 12px;
}

.kds-settings-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.kds-settings-block {
  padding-bottom: 8px;
}

.kds-display-ip-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0 12px;
}

.kds-display-ip-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  align-items: end;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
}

.kds-settings-server-field {
  margin-top: 12px;
}

.kds-settings-server-preview {
  margin-top: 8px;
  word-break: break-all;
}

.kds-settings-actions {
  margin-top: 4px;
}

.settings-work-menu-sub {
  margin-left: 10px;
  opacity: 0.92;
}

@media (max-width: 720px) {
  .kds-display-ip-row {
    grid-template-columns: 1fr;
  }
}

.printer-settings-empty,
.printer-settings-error {
  margin-top: 8px;
}

.printer-settings-error {
  color: #b91c1c;
}

.printer-settings-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 16px;
  margin-top: 8px;
}

@media (max-width: 1400px) {
  .printer-assign-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .printer-assign-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .printer-port-item {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

.receipt-ph-mandatory {
  margin: 4px 0 6px;
  padding: 6px 0;
  border-top: 1px dashed #ccc;
  border-bottom: 1px dashed #ccc;
}

.receipt-ph-mandatory .receipt-meta {
  font-weight: 600;
}

.receipt-tpl-ph .receipt-ph-paper {
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  line-height: 1.35;
}

.receipt-ph-header .receipt-ph-store-name {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  margin: 0 0 2px;
}

.receipt-ph-section-title {
  text-align: center;
  font-weight: 700;
  font-size: 10px;
  margin: 4px 0;
  letter-spacing: 0.02em;
}

.receipt-ph-guest-line,
.receipt-ph-sc-note {
  font-size: 10px;
}

.receipt-ph-official {
  font-weight: 700;
  font-size: 10px;
  margin-top: 4px;
}

.receipt-ph-item-line span:first-child {
  flex: 1;
  padding-right: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.receipt-ph-item-line span:last-child {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.receipt-tpl-ph .receipt-total-upper {
  font-weight: 700;
  text-transform: uppercase;
}

.discount-modal-body--mandatory {
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr) auto;
}

.discount-modal-body--mandatory .discount-modal-right {
  border-top: 1px solid #e5e7eb;
}

.discount-modal-left {
  padding: 12px 16px 14px;
  border-right: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  overflow: hidden;
  background: #fafafa;
}

.discount-preset-list-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 2px 2px 8px;
}

.discount-preset-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-content: start;
}

.discount-preset-list.cols-2 {
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
}

.discount-preset-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
  background: #fafafa;
}

.discount-preset-btn {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.discount-preset-btn.selected {
  border-color: #005df5;
  background: #eff6ff;
  box-shadow: 0 0 0 1px rgba(0, 93, 245, 0.15);
}

.discount-preset-label {
  flex: 1;
  min-width: 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: #374151;
  line-height: 1.25;
}

.discount-preset-list.cols-2 .discount-preset-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discount-preset-radio {
  width: 18px;
  height: 18px;
  border: 2px solid #d1d5db;
  border-radius: 999px;
  flex-shrink: 0;
}

.discount-preset-btn.selected .discount-preset-radio {
  border-color: #005df5;
  box-shadow: inset 0 0 0 4px #005df5;
}

.discount-add-preset {
  flex: 1;
  min-width: 0;
  min-height: 42px;
  border: 1px dashed #cbd5e1;
  border-radius: 999px;
  background: #fff;
  color: #64748b;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}

.discount-edit-presets {
  flex-shrink: 0;
  min-width: 72px;
  min-height: 42px;
  padding: 0 20px;
  border: none;
  border-radius: 999px;
  background: #eff6ff;
  color: #005df5;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
}

.discount-preset-form-modal {
  --store-ops-control-w: 168px;
  --store-ops-control-h: 34px;
  --store-ops-control-fs: 0.78rem;
  --store-ops-control-radius: 8px;
  width: min(420px, 94vw);
  max-width: 420px;
  border-radius: 16px;
  overflow: hidden;
}

.discount-preset-form-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px 8px;
}

.discount-preset-form-modal .modal-body label.discount-preset-form-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 0;
  font-size: inherit;
  color: inherit;
}

.discount-preset-form-modal .modal-body label.discount-preset-form-row input:not([type="checkbox"]) {
  margin-top: 0;
}

.discount-preset-form-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.discount-preset-form-label {
  flex: 0 0 auto;
  font-size: var(--store-ops-control-fs);
  font-weight: 400;
  color: #64748b;
}

.discount-preset-form-control:not(input) {
  flex: 0 0 var(--store-ops-control-w);
  width: var(--store-ops-control-w);
  max-width: var(--store-ops-control-w);
  min-width: 0;
  margin-left: auto;
}

.discount-preset-form-row > input.discount-preset-form-control.touch-input {
  box-sizing: border-box;
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: none;
  margin-left: 0;
  min-height: var(--store-ops-control-h);
  height: var(--store-ops-control-h);
  padding: 0 8px;
  font-size: var(--store-ops-control-fs);
  border-radius: var(--store-ops-control-radius);
  line-height: 1.2;
}

.discount-preset-form-row .discount-unit-toggle {
  justify-content: stretch;
  box-sizing: border-box;
  width: 100%;
  height: var(--store-ops-control-h);
  padding: 2px;
}

.discount-preset-form-modal .discount-unit-btn {
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 0 8px;
  font-size: var(--store-ops-control-fs);
  font-weight: 600;
  border-radius: calc(var(--store-ops-control-radius) - 2px);
}

.discount-preset-value-display {
  box-sizing: border-box;
  min-height: var(--store-ops-control-h);
  height: var(--store-ops-control-h);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 8px;
  background: #eceff1;
  border: 1px solid #cfd8dc;
  border-radius: var(--store-ops-control-radius);
  font-size: var(--store-ops-control-fs);
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}

.discount-preset-form-body .discount-keypad {
  margin-top: 4px;
}

.discount-preset-form-footer {
  justify-content: space-between;
  align-items: center;
}

.discount-preset-form-footer-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.discount-preset-form-footer .discount-btn-cancel,
.discount-preset-form-footer .discount-btn-confirm,
.discount-preset-form-footer .discount-btn-delete {
  box-sizing: border-box;
  min-width: 72px;
  min-height: var(--store-ops-control-h, 34px);
  height: var(--store-ops-control-h, 34px);
  padding: 0 16px;
  font-size: var(--store-ops-control-fs, 0.78rem);
  font-weight: 600;
  border-radius: var(--store-ops-control-radius, 8px);
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.discount-btn-delete {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #fecaca;
  border-radius: 10px;
  background: #fef2f2;
  color: #dc2626;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}

.discount-preset-form-footer .discount-btn-delete {
  min-width: auto;
  width: auto;
  padding: 0 12px;
}

.discount-btn-delete.hidden {
  display: none;
}

.discount-modal-right {
  padding: 12px 16px 14px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: #fff;
}

.discount-direct-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.discount-direct-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: #111827;
}

.discount-unit-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 8px;
  background: var(--bg);
}

.discount-unit-btn {
  min-width: 44px;
  min-height: 32px;
  padding: 0 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #6b7280;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.discount-unit-btn.active {
  background: #374151;
  color: #fff;
}

.discount-direct-display {
  min-height: 52px;
  padding: 10px 4px 14px;
  font-size: 1.75rem;
  font-weight: 800;
  color: #111827;
  text-align: right;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.discount-keypad {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 4px;
  align-content: start;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

.discount-key {
  min-height: 54px;
  border: none;
  border-right: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
  font-size: 1.25rem;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
}

.discount-key:nth-child(3n) {
  border-right: none;
}

.discount-key:nth-last-child(-n + 3) {
  border-bottom: none;
}

.discount-key:hover {
  background: #f9fafb;
}

.discount-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 16px 16px;
  border-top: 1px solid #e5e7eb;
  flex-shrink: 0;
  background: #fff;
}

.discount-btn-cancel {
  min-width: 88px;
  min-height: 44px;
  border: none;
  border-radius: 10px;
  background: #f3f4f6;
  color: #374151;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.discount-btn-confirm {
  min-width: 88px;
  min-height: 44px;
  border: none;
  border-radius: 10px;
  background: #005df5;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.toast-discount-remove {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: none;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.toast-discount-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 700;
  color: #ef4444;
}

.toast-discount-amount {
  margin-left: auto;
  font-size: 0.82rem;
  font-weight: 800;
  color: #ef4444;
}

/* ═══ 공지사항 패널 ═══ */
.notice-panel {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  justify-content: flex-end;
}

.notice-panel.hidden {
  display: none;
}

.notice-panel-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

.notice-panel-sheet {
  position: relative;
  z-index: 1;
  width: min(760px, 100vw);
  height: 100%;
  background: #fff;
  color: #333;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);
}

.notice-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 28px 12px;
  flex-shrink: 0;
}

.notice-panel-head h2 {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 800;
  color: #333;
}

.notice-panel-close {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #666;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.notice-tabs {
  display: flex;
  gap: 22px;
  padding: 0 28px;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}

.notice-tab {
  position: relative;
  padding: 12px 0 14px;
  border: none;
  background: transparent;
  color: #888;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.notice-tab.active {
  color: #333;
  font-weight: 800;
}

.notice-tab.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: #333;
  border-radius: 2px 2px 0 0;
}

.notice-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 28px;
  flex-shrink: 0;
}

.notice-store-filter {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: #eef3fc;
  color: #1967d2;
  font-size: 0.82rem;
  font-weight: 700;
}

.notice-toolbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.notice-mark-all {
  border: none;
  background: transparent;
  color: #666;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.notice-mark-all:hover {
  color: #333;
}

.notice-unread-only {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #666;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.notice-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 28px;
}

.notice-empty {
  padding: 48px 0;
  text-align: center;
  color: #888;
  font-size: 0.9rem;
}

.notice-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 96px;
  gap: 16px;
  align-items: center;
  width: 100%;
  padding: 18px 0;
  border: none;
  border-bottom: 1px solid #f0f0f0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.notice-row:hover {
  background: #fafafa;
}

.notice-row.unread .notice-row-title {
  font-weight: 700;
  color: #111;
}

.notice-row-cat {
  font-size: 0.84rem;
  color: #666;
}

.notice-row-title {
  font-size: 0.92rem;
  color: #333;
  line-height: 1.45;
}

.notice-row-date {
  font-size: 0.84rem;
  color: #999;
  text-align: right;
  white-space: nowrap;
}

.notice-load-more-wrap {
  display: flex;
  justify-content: center;
  padding: 18px 0 28px;
  flex-shrink: 0;
}

.notice-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid #ddd;
  border-radius: 999px;
  background: #fff;
  color: #666;
  cursor: pointer;
}

.notice-load-more:hover {
  background: #f5f5f5;
  border-color: #bbb;
}

/* ── CRM / 회원관리 ── */
.member-toolbar {
  flex-wrap: wrap;
  gap: 10px;
}

.member-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.member-search-input {
  min-width: 200px;
  max-width: 260px;
}

.crm-summary-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 1rem;
}

@media (min-width: 900px) {
  .crm-summary-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.crm-summary-card {
  background: #f8fbff;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  padding: 0.75rem 0.85rem;
}

.crm-summary-card.is-primary {
  background: linear-gradient(135deg, #005df5 0%, #005df5 100%);
  border-color: #0050d4;
  color: #fff;
}

.crm-summary-card .label {
  font-size: 0.76rem;
  color: #64748b;
  margin-bottom: 0.25rem;
}

.crm-summary-card.is-primary .label {
  color: rgba(255, 255, 255, 0.88);
}

.crm-summary-card .value {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
}

.crm-summary-card .sub {
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: #64748b;
}

.crm-summary-card.is-primary .sub {
  color: rgba(255, 255, 255, 0.9);
}

.crm-filter-bar {
  margin-bottom: 12px;
  padding: 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
}

.crm-filter-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: flex-end;
  min-width: max-content;
}

.crm-filter-search-field {
  flex: 1 1 180px;
  min-width: 150px;
  max-width: 220px;
}

.crm-search-input {
  width: 100%;
  margin: 0;
}

.crm-filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.crm-filter-field .touch-input {
  min-width: 96px;
  width: 100%;
}

.crm-filter-date-field .touch-input {
  min-width: 132px;
}

.crm-filter-page-field .touch-input {
  min-width: 72px;
}

.crm-filter-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: flex-end;
}

.crm-filter-bar .btn-primary,
.crm-filter-bar .btn-ghost {
  flex-shrink: 0;
  min-height: var(--touch-min);
  min-width: 72px;
  padding: 0 16px;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 10px;
  white-space: nowrap;
  box-sizing: border-box;
}

.crm-filter-bar .btn-primary {
  border: 1px solid var(--primary);
}

.crm-list-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.crm-select-all-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.crm-table-wrap {
  overflow-x: auto;
  margin-bottom: 12px;
}

.crm-member-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.crm-member-table th,
.crm-member-table td {
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.crm-member-table th.num,
.crm-member-table td.num {
  text-align: right;
}

.crm-member-table thead th {
  background: #f1f5f9;
  font-size: 0.78rem;
  color: #475569;
  white-space: nowrap;
}

.crm-member-table tbody tr:last-child td {
  border-bottom: none;
}

.crm-member-row {
  cursor: pointer;
}

.crm-member-row:hover {
  background: #f8fbff;
}

.crm-col-check {
  width: 42px;
  text-align: center;
}

.crm-empty-cell {
  text-align: center;
  color: var(--text-muted);
  padding: 1.5rem;
}

.crm-tier-badge {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.crm-tier-basic {
  background: #f1f5f9;
  color: #475569;
}

.crm-tier-vip {
  background: #dbeafe;
  color: #0050d4;
}

.crm-tier-vvip {
  background: #fef3c7;
  color: #b45309;
}

.crm-member-cards {
  display: none;
  flex-direction: column;
  gap: 10px;
}

.crm-member-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.crm-card-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.crm-card-title {
  font-weight: 700;
}

.crm-card-meta,
.crm-card-dates {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.crm-card-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.crm-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 72px;
}

.crm-page-info {
  font-size: 0.88rem;
  color: var(--text-muted);
}

.crm-batch-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: #0f172a;
  color: #fff;
  border-radius: var(--radius);
  box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.25);
}

.crm-batch-bar.hidden {
  display: none;
}

.crm-batch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.crm-batch-bar .btn-ghost {
  color: #e2e8f0;
  border-color: rgba(255, 255, 255, 0.25);
}

@media (max-width: 799px) {
  .crm-member-table {
    display: none;
  }

  .crm-member-cards {
    display: flex;
  }
}

.member-list-hint {
  margin: 0 0 10px;
  padding: 0 4px;
}

.member-data-table .member-list-row {
  cursor: pointer;
}

.member-list-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.member-lookup-modal {
  width: min(480px, 96vw);
}

.member-lookup-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.member-lookup-phone-display {
  font-size: 1.35rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.08em;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.member-numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.member-numpad-key {
  min-height: 52px;
  font-size: 1.2rem;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  transition: background 0.08s ease, border-color 0.08s ease, color 0.08s ease, transform 0.08s ease;
}

.member-numpad-key:active,
.member-numpad-key.is-pressed {
  background: #e8eef8;
  border-color: #005df5;
  color: #005df5;
  transform: scale(0.96);
}

.member-lookup-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.member-lookup-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
}

.member-lookup-result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  background: #fafafa;
  text-align: left;
}

.member-lookup-result:hover {
  border-color: #bbb;
  background: #f2f2f2;
}

.member-lookup-result-name {
  font-weight: 700;
  font-size: 1.05rem;
}

.member-lookup-result-meta {
  color: #666;
  font-size: 0.92rem;
}

.member-lookup-empty {
  text-align: center;
  padding: 12px 0;
}

.member-detail-modal {
  width: min(720px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}

.member-detail-body {
  overflow-y: auto;
}

.member-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.member-detail-section {
  border: 1px solid #ececec;
  border-radius: 10px;
  padding: 12px 14px;
  background: #fafafa;
}

.member-detail-section h4 {
  margin: 0 0 10px;
  font-size: 0.95rem;
}

.member-detail-dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.member-detail-dl > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.92rem;
}

.member-detail-dl dt {
  color: #666;
  margin: 0;
}

.member-detail-dl dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

.member-point-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.member-point-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e8e8e8;
  font-size: 0.85rem;
  color: #666;
}

.member-point-card strong {
  font-size: 1.1rem;
  color: #222;
}

.member-point-card.primary {
  border-color: #3b82f6;
  background: #eff6ff;
}

.member-point-card.primary strong {
  color: #0050d4;
}

.member-favorites-title {
  margin: 10px 0 6px;
  font-size: 0.88rem;
  color: #666;
}

.member-favorites-list {
  margin: 0;
  padding-left: 18px;
}

.member-favorites-list li {
  margin-bottom: 4px;
}

.member-detail-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid #ececec;
}

.member-withdraw-btn {
  margin-left: auto;
  color: #b91c1c;
}

.member-purchase-section {
  margin-top: 14px;
}

.member-purchase-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.member-purchase-row {
  padding: 10px 12px;
  border: 1px solid #ececec;
  border-radius: 8px;
  background: #fff;
}

.member-purchase-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.member-coupon-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.member-coupon-row {
  padding: 8px 10px;
  border: 1px solid #ececec;
  border-radius: 8px;
  background: #fff;
}

@media (max-width: 640px) {
  .member-detail-grid {
    grid-template-columns: 1fr;
  }

  .member-point-cards {
    grid-template-columns: 1fr;
  }
}

.pos-device-register {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: #f3f4f6;
}

.pos-device-register.hidden {
  display: none;
}

body.pos-device-register-open .topbar-zone,
body.pos-device-register-open main.view,
body.pos-device-register-open .pos-login-gate {
  visibility: hidden;
  pointer-events: none;
}

.pos-device-register-shell {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
}

.pos-device-register-brand {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px 56px;
  color: #fff;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.08), transparent 45%),
    linear-gradient(160deg, #1a2744 0%, #0f172a 55%, #111827 100%);
}

.pos-device-register-brand-inner {
  max-width: 420px;
}

.pos-device-register-brand-kicker {
  margin: 0 0 20px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.pos-device-register-brand-title {
  margin: 0 0 18px;
  font-size: clamp(1.8rem, 3vw, 2.35rem);
  line-height: 1.25;
  font-weight: 700;
}

.pos-device-register-brand-copy {
  margin: 0 0 24px;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
}

.pos-device-register-brand-list {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 10px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

.pos-device-register-brand-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
}

.pos-device-register-main {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}

.pos-device-register-card {
  position: relative;
  width: min(440px, 100%);
  padding: 36px 32px 28px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.pos-device-register-actions-primary {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.pos-device-register-actions-primary #posDeviceRegisterBtn {
  flex: 1 1 auto;
}

.pos-device-register-actions-primary .pos-device-register-exit {
  flex: 0 0 auto;
  min-width: 96px;
}

.pos-device-register-quit {
  position: absolute;
  top: 12px;
  right: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  color: #64748b;
  font-size: 0.85rem;
  padding: 6px 10px;
  cursor: pointer;
}

.pos-device-register-quit:hover {
  background: #f8fafc;
  color: #334155;
}

.pos-device-register-logo {
  display: block;
  margin: 0 0 24px;
}

.pos-device-register-brandmark {
  display: flex;
  align-items: center;
  margin: 0 0 24px;
  line-height: 0;
}

.pos-device-register-wordmark-img {
  display: block;
  height: 44px;
  width: auto;
  max-width: 100%;
  border-radius: 6px;
}

.pos-device-register-wordmark-text {
  font-size: 2.2rem;
}

.pos-device-register-card h1 {
  margin: 0 0 20px;
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
}

body.pos-store-installer-portal .pos-device-register-main {
  background: #f3f4f6;
}

body.pos-store-installer-portal .pos-device-register-brandmark {
  justify-content: center;
  margin-bottom: 12px;
}

body.pos-store-installer-portal .pos-device-register-wordmark-img {
  height: 24px;
  border-radius: 0;
}

body.pos-store-installer-portal .pos-device-register-wordmark-text {
  font-size: 1.5rem;
}

body.pos-store-installer-portal .pos-device-register-quit {
  display: inline-flex;
}

.pos-device-register-lead {
  margin: 0 0 20px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #64748b;
}

.pos-device-store-preview {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #ecfdf5;
  color: #047857;
  font-size: 0.86rem;
  line-height: 1.45;
}

.pos-device-store-preview.hidden {
  display: none;
}

.pos-device-store-preview.is-error {
  background: #fef2f2;
  color: #b91c1c;
}

.pos-device-register-form {
  display: grid;
  gap: 14px;
}

.pos-device-register-server-mode {
  display: grid;
  gap: 10px;
}

.pos-device-register-section-label {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}

.pos-device-register-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 4px;
  border-radius: 10px;
  background: #f1f5f9;
}

.pos-device-register-mode-tab {
  border: 0;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.pos-device-register-mode-tab.active {
  color: #0f172a;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.pos-device-register-target {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.pos-device-register-target.hidden {
  display: none;
}

.pos-device-register-target-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}

.pos-device-register-target strong {
  font-size: 15px;
  color: #0f172a;
}

.pos-device-register-target input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 15px;
  background: #fff;
}

.pos-device-register-target-hint {
  font-size: 12px;
  color: #64748b;
}

.pos-device-main-ip-status {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
}

.pos-device-main-ip-status.is-ok {
  color: #15803d;
}

.pos-device-main-ip-status.is-error {
  color: #b91c1c;
}

.pos-device-main-ip-open {
  font-size: 13px;
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
}

.pos-device-main-ip-open:hover {
  text-decoration: underline;
}

.pos-device-store-preview.is-neutral {
  color: #475569;
  background: #f8fafc;
  border-color: #e2e8f0;
}

.pos-device-register-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.pos-device-register-field-float {
  position: relative;
}

.pos-device-register-field-float input {
  width: 100%;
  padding: 18px 14px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 15px;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pos-device-register-field-float input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.pos-device-register-label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 4px;
  font-size: 0.95rem;
  color: #64748b;
  pointer-events: none;
  transition: top 0.15s ease, transform 0.15s ease, font-size 0.15s ease, color 0.15s ease;
  background: #fff;
}

.pos-device-register-field-float input:focus + .pos-device-register-label,
.pos-device-register-field-float input:not(:placeholder-shown) + .pos-device-register-label {
  top: 0;
  transform: translateY(-50%);
  font-size: 0.72rem;
  color: #2563eb;
}

.pos-standalone-admin-fields {
  display: grid;
  gap: 14px;
  margin: 0;
}

.pos-standalone-admin-hint {
  margin: 0 0 10px;
  font-size: 0.82rem;
  line-height: 1.45;
}

.pos-standalone-admin-fields.hidden {
  display: none;
}

body.pos-local-standalone-register #posDeviceStoreCodeField,
body.pos-local-standalone-register .pos-device-register-auth-field {
  display: none !important;
}

.pos-device-register-field input {
  width: 100%;
  padding: 14px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font-size: 14px;
}

.pos-device-register-error {
  margin: 14px 0 0;
  color: #dc2626;
  font-size: 14px;
}

.pos-device-register-error.hidden {
  display: none;
}

.pos-device-trial-hint {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #eff6ff;
  color: #0050d4;
  font-size: 0.82rem;
  line-height: 1.45;
}

.pos-device-trial-hint.hidden,
.pos-device-trial-expired.hidden {
  display: none;
}

.pos-device-trial-expired {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 0.82rem;
  line-height: 1.45;
}

.pos-device-register-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pos-device-register-actions-primary {
  margin-top: 18px;
  flex-direction: row;
  align-items: stretch;
}

.pos-device-register-actions-primary .pos-device-register-submit {
  width: auto;
  flex: 1 1 0;
  min-width: 0;
}

.pos-device-register-actions-primary .pos-device-register-exit {
  flex: 0 0 96px;
}

.pos-device-register-actions-download {
  margin-top: 14px;
}

.pos-device-register-submit {
  width: 100%;
  min-height: 48px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.pos-register-btn-icon {
  flex: 0 0 auto;
}

.pos-register-exit-icon {
  color: #e11d0e;
}

.pos-device-register-actions .btn-secondary,
.pos-device-register-download {
  background: #fff;
  color: #111827;
  border: 1.5px solid #e2e8f0;
  box-shadow: none;
}

.pos-device-register-actions .btn-secondary:hover,
.pos-device-register-download:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.pos-installer-platform {
  margin-top: 22px;
  display: grid;
  gap: 10px;
}

.pos-installer-platform .pos-device-register-section-label {
  text-align: center;
}

.pos-installer-platform-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 4px;
  border-radius: 10px;
  background: #f1f5f9;
}

.pos-installer-platform-tabs .pos-device-register-mode-tab {
  padding: 0.55rem 0.35rem;
  font-size: 0.82rem;
  min-height: 40px;
}

.pos-installer-platform-hint {
  margin: 2px 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #64748b;
  text-align: center;
}

.pos-device-register-later {
  width: 100%;
  min-height: 42px;
  border-radius: 8px;
}

.pos-device-register-footnote {
  margin: 18px 0 0;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #64748b;
}

.pos-device-register-footnote a {
  color: #2563eb;
  font-weight: 600;
  text-decoration: none;
}

.pos-device-register-footnote a:hover {
  text-decoration: underline;
}

.pos-register-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.pos-register-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.pos-register-btn-icon svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 900px) {
  .pos-device-register-shell {
    flex-direction: column;
  }

  .pos-device-register-brand {
    flex: 0 0 auto;
    padding: 28px 24px;
  }

  .pos-device-register-brand-list {
    display: none;
  }

  .pos-device-register-main {
    padding: 16px 16px 32px;
  }

  .pos-device-register-card {
    box-shadow: none;
    padding: 24px 20px;
  }
}

.pos-auth-card {
  max-width: 720px;
  padding: 20px 22px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
}

.pos-auth-network-block {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e2e8f0;
}

.pos-auth-network-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.pos-auth-network-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
}

.pos-auth-network-hint {
  margin: 0 0 12px;
}

.pos-auth-network-url-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.pos-auth-network-url-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}

.pos-auth-network-url-meta {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pos-auth-network-url-label {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
}

.pos-auth-network-url-value {
  min-width: 0;
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: #0050d4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pos-auth-network-copy-btn {
  flex-shrink: 0;
}

.pos-auth-network-empty {
  margin: 8px 0 0;
}

.pos-auth-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
  margin: 16px 0 0;
}

.pos-auth-info-row {
  display: grid;
  gap: 6px;
}

.pos-auth-info-row-wide {
  grid-column: 1 / -1;
}

.pos-auth-info-row dt {
  font-size: 13px;
  color: #64748b;
}

.pos-auth-info-row dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  word-break: break-all;
}

.pos-auth-key-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.pos-auth-value-list {
  display: grid;
  gap: 12px;
  margin: 0;
}

.pos-auth-value-item {
  display: grid;
  gap: 6px;
}

.pos-auth-value-item dt {
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
}

.pos-auth-value-item dd {
  margin: 0;
  font-weight: 500;
}

.pos-auth-value-code {
  display: inline-block;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-family: ui-monospace, monospace;
  font-size: 13px;
  word-break: break-all;
}

.pos-auth-value-item-key dd {
  font-weight: 600;
}

.pos-auth-key-value {
  flex: 1 1 280px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-family: ui-monospace, monospace;
  font-size: 13px;
  font-weight: 500;
  word-break: break-all;
}

.pos-auth-expired {
  color: #dc2626 !important;
}

.seat-order-seat-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--border, #e5e7eb);
  background: #f8fafc;
}

.seat-order-seat-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #64748b;
  flex-shrink: 0;
}

.seat-order-seat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.seat-order-seat-tab {
  border: 1px solid #cbd5e1;
  background: #fff;
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 1.07rem;
  min-height: calc(1.07rem + 10px);
  cursor: pointer;
}

.seat-order-seat-tab.active {
  background: #005df5;
  border-color: #005df5;
  color: #fff;
}

.toast-cart-badge-seat {
  background: #dbeafe;
  color: #0050d4;
}

.pay-split-panel {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #e5e7eb;
}

.modal-xl {
  width: min(96vw, 920px);
  max-width: 920px;
}

.cash-move-page .cash-move-layout {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  overflow: hidden;
}

.cash-move-panel-title {
  margin: 0 0 0.65rem;
  font-size: 0.92rem;
  color: #374151;
}

.cash-move-form-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
  max-height: 100%;
  padding: 0.85rem;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
}

.cash-move-type-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}

.cash-move-type-tab {
  min-height: 44px;
  border-radius: 10px;
  border: 2px solid #d1d5db;
  background: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  color: #374151;
  cursor: pointer;
}

.cash-move-type-tab.active[data-type="deposit"] {
  border-color: #059669;
  background: #ecfdf5;
  color: #047857;
}

.cash-move-type-tab.active[data-type="withdraw"] {
  border-color: #d97706;
  background: #fffbeb;
  color: #b45309;
}

.cash-move-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.88rem;
}

.cash-move-amount-field {
  flex-shrink: 0;
}

.cash-move-amount-pad-wrap {
  flex-shrink: 0;
}

.cash-move-amount-pad-wrap.hidden {
  display: none;
}

.cash-move-amount-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.cash-move-amount-pad .cash-move-pad-key {
  min-height: 44px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

.cash-move-amount-pad .cash-move-pad-key:active {
  background: #e3f2fd;
  border-color: #1565c0;
}

.cash-move-amount-pad .cash-move-pad-clear {
  background: #fff7ed;
  border-color: #fdba74;
  color: #c2410c;
}

.cash-move-amount-pad .cash-move-pad-confirm {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #fff;
  font-size: 0.92rem;
}

.cash-move-amount-pad .cash-move-pad-confirm:active {
  background: #1d4ed8;
}

.cash-move-amount-input,
.cash-move-note-input {
  -webkit-user-select: text;
  user-select: text;
  touch-action: manipulation;
}

.cash-move-amount-input {
  height: 35px;
  min-height: 35px;
  padding: 0 0.65rem;
  font-size: 1.05rem;
  font-weight: 700;
  text-align: right;
  cursor: pointer;
}

.cash-move-amount-input[readonly] {
  background: #fff;
  color: #111827;
}

.cash-move-note-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.cash-move-keyboard-btn {
  min-width: 35px;
  height: 28px;
  padding: 0 0.45rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}

.cash-move-keyboard-btn:active {
  background: #e3f2fd;
  border-color: #1565c0;
}

.cash-move-note-field {
  flex: 1 1 auto;
  min-height: 160px;
  display: flex;
  flex-direction: column;
}

.cash-move-note-input {
  flex: 1 1 auto;
  min-height: 160px;
  height: auto;
  padding: 0.55rem 0.65rem;
  line-height: 1.35;
  resize: none;
}

.cash-move-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin-top: auto;
}

.cash-move-action-btn {
  height: 35px;
  min-height: 35px;
  padding: 0 0.75rem;
  font-size: 0.88rem;
  line-height: 1;
}

.cash-move-list-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0.85rem;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.cash-move-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex-shrink: 0;
}

.cash-move-list-head .cash-move-panel-title {
  margin: 0;
}

.cash-move-list-head-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.cash-move-empty {
  margin: 0.5rem 0;
  padding: 1rem;
  text-align: center;
  color: #6b7280;
  background: #f9fafb;
  border-radius: 8px;
  flex-shrink: 0;
}

.cash-move-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  border: 1px solid #eef2f7;
  border-radius: 8px;
}

.cash-move-list-summary {
  flex-shrink: 0;
  margin-top: 0.55rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
}

.cash-move-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.cash-move-table th,
.cash-move-table td {
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid #eef2f7;
  text-align: left;
  vertical-align: middle;
}

.cash-move-table th.num,
.cash-move-table td.num {
  text-align: right;
  white-space: nowrap;
}

.cash-move-table th.cash-move-note-col,
.cash-move-table td.cash-move-note-col {
  max-width: 40ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cash-move-note-cell {
  display: inline-block;
  max-width: 40ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

.cash-move-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f3f4f6;
  font-size: 0.78rem;
  color: #6b7280;
}

.cash-move-table tbody tr.is-deposit td.num strong {
  color: #047857;
}

.cash-move-table tbody tr.is-withdraw td.num strong {
  color: #b45309;
}

.cash-move-foot-grid {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1.2fr;
  gap: 0.75rem 1rem;
  align-items: center;
  font-size: 0.84rem;
}

.cash-move-foot-label {
  font-weight: 700;
  color: #374151;
  white-space: nowrap;
}

.cash-move-foot-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.cash-move-foot-item-label {
  font-size: 0.74rem;
  font-weight: 600;
  color: #6b7280;
}

.cash-move-foot-item strong {
  font-size: 0.95rem;
  white-space: nowrap;
}

.cash-move-foot-item.is-deposit strong {
  color: #047857;
}

.cash-move-foot-item.is-withdraw strong {
  color: #b45309;
}

.cash-move-foot-item.is-net strong {
  color: #1d4ed8;
}

@media (max-width: 760px) {
  .cash-move-foot-grid {
    grid-template-columns: 1fr 1fr;
  }

  .cash-move-foot-label {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .cash-move-page .cash-move-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(220px, 1fr);
  }
}

#payModal.modal {
  padding: 8px;
}

#payModal .pay-modal {
  width: min(98vw, 720px);
  max-width: 720px;
  height: min(96vh, 900px);
  max-height: 96vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#payModal .pay-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 24px;
}

#payModal .pay-modal-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
}

#payModal .pay-modal-footer button {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  height: 55px;
  min-height: 55px;
  padding: 0 20px;
  font-size: 0.95rem;
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

#payModal .pay-modal-footer .btn-ghost {
  min-height: 55px;
  padding: 0 20px;
}

#payModal .pay-modal-footer button.is-busy {
  opacity: 0.72;
  cursor: wait;
}

#payModal .pay-breakdown {
  padding: 12px 14px;
  font-size: 0.92rem;
}

.pay-modal-kr-meta {
  margin: 10px 0 4px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.pay-card-meta-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  margin: 0 0 8px;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #1f2937;
}

.pay-card-meta-pair {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  white-space: nowrap;
}

.pay-card-meta-label {
  font-weight: 700;
  color: #111827;
}

.pay-card-meta-colon {
  font-weight: 700;
  color: #111827;
}

.pay-card-meta-value {
  font-weight: 500;
  color: #374151;
  min-width: 0.5em;
}

.pay-card-meta-value:empty::after {
  content: "\00a0";
}

#payModalCashReceiptMeta {
  margin-top: 8px;
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.pay-modal-cash-receipt-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.pay-modal-cash-receipt-fields {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) minmax(12rem, 2fr);
  gap: 8px 12px;
  align-items: center;
}

#payModalCashReceiptMeta .pay-modal-kr-title {
  margin: 0;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 0.88rem;
  font-weight: 700;
  color: #111827;
}

#payModalCashReceiptMeta .pay-modal-kr-check {
  margin: 0;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 0.84rem;
  gap: 6px;
}

#payModalCashReceiptMeta .pay-modal-kr-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--primary);
}

#payModalCashReceiptMeta .pay-modal-kr-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 0.82rem;
  color: #4b5563;
}

#payModalCashReceiptMeta .pay-modal-kr-field > span {
  flex-shrink: 0;
  white-space: nowrap;
}

#payModalCashReceiptMeta .pay-modal-kr-field .touch-select,
#payModalCashReceiptMeta .pay-modal-kr-field .touch-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 10px;
  margin-top: 0;
  font-size: 0.88rem;
  font-weight: 500;
  box-sizing: border-box;
}

.pay-modal-kr-title {
  margin: 0 0 10px;
  font-size: 0.92rem;
  font-weight: 700;
  color: #111827;
}

.pay-modal-kr-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.pay-modal-kr-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  color: #4b5563;
}

.pay-modal-kr-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 0.9rem;
}

.pay-van-btn {
  margin-top: 8px;
}

.receipt-kr-header .receipt-store-name {
  font-weight: 700;
}

.receipt-kr-card-title {
  font-weight: 700;
}

#payModal .pay-breakdown-inline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
  overflow-x: auto;
}

#payModal .pay-breakdown-inline-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex: 0 0 auto;
  white-space: nowrap;
}

#payModal .pay-breakdown-inline-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #64748b;
}

#payModal .pay-breakdown-inline-label::after {
  content: ":";
}

#payModal .pay-breakdown-inline-stat strong {
  font-size: 0.98rem;
  font-weight: 800;
  color: #0f172a;
}

#payModal .pay-breakdown-inline-stat.pay-breakdown-paid strong {
  color: #005df5;
}

#payModal .pay-breakdown-inline-stat.pay-breakdown-total strong {
  font-size: 1.12rem;
  color: #005df5;
}

#payModal .pay-breakdown-total strong,
#payModal .pay-breakdown-total span:last-child {
  font-size: 1.35rem;
}

#payModal .pay-methods {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
  margin: 16px 0;
}

#payModal .pay-method {
  flex: 1 1 0;
  min-width: 0;
  min-height: 56px;
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#payModal .pay-amount-pad {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 6px;
  margin-bottom: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.pay-amount-pad {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
}

.pay-amount-pad button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 52px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 700;
  touch-action: manipulation;
}

.pay-amount-pad button:active {
  background: #e3f2fd;
  border-color: #1565c0;
}

.pay-amount-pad .pay-pad-exact {
  flex: 1.15 1 0;
  min-width: 0;
  font-size: 0.95rem;
}

.pay-amount-pad .pay-pad-clear {
  color: #c62828;
  background: #ffebee;
  border-color: #ef9a9a;
}

.pay-amount-pad .pay-pad-clear:active {
  background: #ffcdd2;
}

#payModal .pay-modal-header {
  align-items: flex-start;
  gap: 12px;
}

.pay-modal-header-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 10px;
  min-width: 0;
  flex: 1;
}

.pay-modal-header-main h3 {
  flex-shrink: 0;
}

.pay-modal-order-info-wrap {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  min-width: 0;
}

.pay-modal-order-info-paren {
  color: #64748b;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
}

#payModal .pay-modal-order-info {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin: 0;
  font-size: 0.85rem;
}

.pay-modal-order-info-part {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.pay-modal-order-info-label {
  color: #64748b;
  font-weight: 600;
  white-space: nowrap;
}

.pay-modal-order-info-sep {
  color: #64748b;
}

.pay-modal-order-info-value {
  color: #0f172a;
  font-weight: 700;
}

.pay-modal-order-info-mode {
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 600;
}

#payModal .pay-amount-pad button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 52px;
  padding: 0 6px;
  font-size: 1.05rem;
}

#payModal .pay-amount-pad .pay-pad-exact {
  flex: 1.15 1 0;
  min-width: 0;
  font-size: 0.95rem;
}

#payModal .modal-body label {
  font-size: 1rem;
}

#payModal .modal-body label input:not([type="checkbox"]) {
  min-height: 52px;
  font-size: 1.25rem;
  font-weight: 700;
}

#payModal .pay-member-section {
  margin: 10px 0 8px;
}

#payModal .pay-member-action-row {
  gap: 8px;
}

#payModal .pay-member-action-btn {
  min-height: 44px;
  font-size: 0.88rem;
}

#payModal .pay-modal-employee-select,
#payModal .pay-member-customer-trigger {
  min-height: 44px;
  font-size: 0.88rem;
}

#payModal .pay-modal-employee-select {
  padding: 0 10px;
}

#payModal.tip-policy-pooled .pay-member-employee-btn {
  display: none;
}

#payModal.tip-policy-pooled .pay-member-customer-btn {
  flex: 1 1 auto;
}

#splitBillModal.modal {
  padding: 8px;
}

#splitBillModal .split-bill-modal {
  width: min(98vw, 100%);
  max-width: none;
  height: 96vh;
  max-height: 96vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#splitBillModal .split-bill-modal-body {
  flex: 1 1 auto;
  min-height: 0;
}

.split-bill-modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: min(82vh, 720px);
  overflow: hidden;
}

#splitBillModal .split-bill-modal-body {
  max-height: none;
}

.split-bill-cards-scroll {
  flex: 1 1 auto;
  min-height: 200px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

#splitBillModal .split-bill-cards-scroll {
  min-height: 0;
  overflow-x: auto;
  overflow-y: auto;
}

.split-bill-order-info {
  flex: 0 0 auto;
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: #475569;
  white-space: nowrap;
}

.split-bill-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-shrink: 0;
  flex-wrap: nowrap;
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  overflow-x: auto;
}

.split-bill-toolbar {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-shrink: 0;
  flex-wrap: nowrap;
}

.split-bill-amount-pad,
#splitBillModal .split-bill-amount-pad {
  flex: 1 1 auto;
  overflow: hidden;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
}

#splitBillModal .split-bill-amount-pad button {
  min-height: 48px;
  font-size: 0.82rem;
}

#splitBillModal .split-bill-amount-pad .pay-pad-digit {
  font-size: 0.78rem;
  font-weight: 800;
}

#splitBillModal .split-bill-amount-pad .pay-pad-exact {
  font-size: 0.76rem;
}

#splitBillModal .split-bill-amount-pad .pay-pad-back,
#splitBillModal .split-bill-amount-pad .pay-pad-clear {
  font-size: 0.82rem;
}

.split-bill-pay-method-panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}

.split-bill-pay-method-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}

.split-bill-pay-method-label {
  flex: 0 0 auto;
  font-size: 0.85rem;
  font-weight: 700;
  color: #64748b;
  white-space: nowrap;
}

.split-bill-pay-method-current {
  flex: 0 0 auto;
  font-size: 0.9rem;
  color: #0050d4;
  white-space: nowrap;
}

.split-bill-pay-methods {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0;
  min-width: 0;
}

.split-bill-pay-methods .pay-method {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 0 6px;
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.split-bill-order-amounts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  flex-wrap: nowrap;
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  overflow-x: auto;
}

.split-bill-top-bar .split-bill-amount-inline {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex: 0 0 auto;
  white-space: nowrap;
}

.split-bill-amount-inline {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex: 0 0 auto;
  white-space: nowrap;
}

.split-bill-amount-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: #64748b;
  white-space: nowrap;
}

.split-bill-amount-label::after {
  content: ":";
}

.split-bill-amount-inline strong {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
}

#splitBillRemainingAmount {
  color: #b45309;
}

.split-bill-tabs {
  flex-shrink: 0;
}

.split-bill-full-hint {
  padding: 16px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  color: #475569;
  font-size: 0.9rem;
}

.split-bill-full-hint p {
  margin: 0;
}

.split-bill-amount-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  flex-shrink: 0;
}

.split-bill-amount-bar strong {
  font-size: 1.25rem;
  color: #15803d;
}

.split-bill-modal-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
}

#splitBillModal .split-bill-modal-footer button {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  height: 55px;
  min-height: 55px;
  padding: 0 20px;
  font-size: 0.95rem;
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

#splitBillModal .split-bill-modal-footer .btn-ghost {
  min-height: 55px;
  padding: 0 20px;
}

.pay-split-receipt-list {
  display: flex;
  gap: 12px;
  width: 100%;
}

#paySplitSeatPick.pay-split-receipt-list--seats {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  width: max-content;
  min-width: 100%;
  overflow: visible;
}

#paySplitSeatPick.pay-split-receipt-list--seats .pay-split-receipt {
  flex: 0 0 280px;
  width: 280px;
  max-width: 280px;
  cursor: pointer;
}

#paySplitEqualPick.pay-split-receipt-list--equal {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  width: max-content;
  min-width: 100%;
  overflow: visible;
}

#paySplitEqualPick.pay-split-receipt-list--equal .pay-split-receipt {
  flex: 0 0 280px;
  width: 280px;
  max-width: 280px;
  cursor: pointer;
}

.pay-split-receipt-list--seats {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
}

.pay-split-receipt-list--seats .pay-split-receipt {
  flex: 0 0 280px;
  width: 280px;
  max-width: 280px;
  cursor: pointer;
}

.pay-split-receipt-list--equal {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
}

.pay-split-receipt-list--equal .pay-split-receipt {
  flex: 0 0 280px;
  width: 280px;
  max-width: 280px;
  cursor: pointer;
}

.pay-split-tabs,
.pay-split-pick:not(#paySplitSeatPick):not(#paySplitEqualPick) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#paySplitSeatPick,
#paySplitEqualPick {
  display: flex;
  gap: 12px;
}

.pay-split-tab,
.pay-split-equal-btn {
  border: 1px solid #cbd5e1;
  background: #fff;
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
}

.pay-split-tab.active,
.pay-split-equal-btn.active {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}

.pay-split-check {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  font-size: 0.9rem;
}

.pay-split-receipt {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.pay-split-receipt.is-selected {
  border-color: #16a34a;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.15);
}

.pay-split-receipt.is-paid {
  border-color: #cbd5e1;
  background: #f8fafc;
  cursor: default;
  opacity: 0.92;
}

.pay-split-receipt-head--done {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: #ecfdf5;
  border-bottom: 1px solid #bbf7d0;
}

.pay-split-receipt-done {
  font-size: 0.85rem;
  font-weight: 800;
  color: #15803d;
  letter-spacing: 0.02em;
}

.pay-split-receipt-row--done {
  color: #15803d;
}

.pay-split-receipt-row--done strong {
  color: #15803d;
}

.pay-split-receipt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.pay-split-receipt-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  cursor: pointer;
  font-size: 0.95rem;
}

.pay-split-receipt-share {
  font-size: 0.8rem;
  color: #64748b;
  font-weight: 600;
}

.pay-split-receipt-body {
  padding: 10px 12px 12px;
}

.pay-split-receipt-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #e2e8f0;
}

.pay-split-receipt-item-main {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.88rem;
}

.pay-split-receipt-item-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  color: #334155;
}

.pay-split-receipt-item-price {
  font-weight: 700;
  white-space: nowrap;
}

.pay-split-receipt-item-meta {
  font-size: 0.78rem;
  color: #64748b;
  margin-top: 2px;
}

.pay-split-receipt-disc {
  color: #dc2626;
}

.pay-split-receipt-empty {
  margin: 0;
  font-size: 0.85rem;
  color: #94a3b8;
  text-align: center;
  padding: 8px 0;
}

.pay-split-receipt-totals {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pay-split-receipt-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.85rem;
  color: #475569;
}

.pay-split-receipt-row--due {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid #e2e8f0;
  font-size: 0.92rem;
  color: #0f172a;
}

.pay-split-receipt-row--due strong {
  color: #16a34a;
}

#paySplitSeatPick.pay-split-pick,
#paySplitEqualPick.pay-split-pick {
  width: auto;
  min-width: 100%;
}

.modifier-modal-body { display: grid; gap: 12px; }
.modifier-product-name { font-weight: 700; margin: 0; }
.modifier-chip-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.modifier-chip-grid.modifier-catalog-picker {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 14px;
}
.modifier-chip {
  border: 1px solid #cbd5e1;
  background: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
}
.modifier-chip.active {
  background: #005df5;
  border-color: #005df5;
  color: #fff;
}
.modifier-selected-list { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; }
.modifier-selected-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.85rem;
}
.modifier-remove-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.pay-breakdown {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 0.92rem;
}
.pay-breakdown-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.pay-breakdown-line span:first-child {
  color: #64748b;
  font-weight: 600;
}
.pay-breakdown-line span:last-child,
.pay-breakdown-line strong {
  font-weight: 700;
  color: #0f172a;
  text-align: right;
}
.pay-breakdown-discount span:last-child {
  color: #dc2626;
}
.pay-breakdown-paid span:last-child {
  color: #005df5;
  font-weight: 700;
}
.pay-breakdown-subtotal span:last-child {
  font-weight: 800;
}
.pay-breakdown-total {
  font-weight: 800;
  border-top: 1px solid #e2e8f0;
  padding-top: 8px;
  margin-top: 4px;
}
.pay-breakdown-total span:first-child {
  color: #0f172a;
  font-size: 0.98rem;
}
.pay-breakdown-total strong {
  font-size: 1.35rem;
  color: var(--accent, #005df5);
}
.kds-serving-banner {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  margin: 6px 0 8px;
}
.kds-smart-order-badge {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #dbeafe;
  color: #0050d4;
  font-size: 0.75rem;
  font-weight: 600;
}

.pos-login-gate {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px));
  background: linear-gradient(160deg, #0f172a 0%, #1e293b 100%);
}
.pos-login-gate.hidden { display: none; }

.pos-login-gate.is-interim-relogin {
  z-index: 10050;
}

.interim-operator-gate {
  z-index: 10050;
}

.interim-operator-card {
  width: min(480px, 94vw);
  max-height: min(calc(100dvh - 24px), 720px);
  display: flex;
  flex-direction: column;
  text-align: left;
}

.interim-operator-card h2,
.interim-operator-card .pos-login-hint {
  text-align: center;
}

.interim-operator-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 16px;
  max-height: min(52vh, 420px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
}

.interim-operator-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 72px;
  padding: 14px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
  color: #0f172a;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}

.interim-operator-btn strong {
  font-size: 1.05rem;
  line-height: 1.2;
}

.interim-operator-btn span {
  font-size: 0.85rem;
  color: #64748b;
}

.interim-operator-btn:hover,
.interim-operator-btn:focus-visible {
  border-color: #005df5;
  background: #eff6ff;
  outline: none;
}

.interim-operator-btn:active {
  transform: scale(0.98);
}

.business-open-login-card {
  width: min(440px, 94vw);
  max-height: min(calc(100dvh - 24px), 820px);
  text-align: left;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 20px 20px 16px;
  margin: auto;
}

.business-open-login-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
}

.business-open-login-card .pos-login-logo {
  margin-bottom: 10px;
}

.business-open-login-card h2 {
  margin-bottom: 10px;
  font-size: 1.2rem;
}

.business-open-login-sys-time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
  padding: 0 12px;
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  box-sizing: border-box;
  border-radius: 8px;
  background: #f1f5f9;
  font-size: 0.82rem;
  color: #475569;
}

.business-open-login-sys-time strong {
  font-size: 0.88rem;
  color: #0f172a;
}

.business-open-login-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.device-unregister-gate {
  z-index: 10060;
}

.device-unregister-card {
  width: min(420px, 94vw);
  text-align: left;
}

.device-unregister-card h2,
.device-unregister-card .pos-login-hint {
  text-align: center;
}

.device-unregister-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.device-unregister-actions button {
  flex: 1;
}

.business-open-login-credentials {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: end;
}

.business-open-login-confirm-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.business-open-login-field-spacer {
  display: block;
  height: 1.05rem;
}

.business-open-login-pin-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 8px;
}

.business-open-login-pin-row #businessOpenLoginPinDisplay {
  flex: 1 1 auto;
  margin-bottom: 0;
}

.business-open-auth-confirm-btn {
  flex: 0 0 auto;
  min-width: 64px;
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 14px;
  box-sizing: border-box;
  border: none;
  border-radius: 8px;
  background: #005df5;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}

.business-open-auth-confirm-btn:active {
  background: #0047c2;
}

.business-open-login-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: #475569;
}

.business-open-login-field .touch-input {
  width: 100%;
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 0.55rem;
  box-sizing: border-box;
}

.business-open-login-card .business-open-amount-label {
  margin-top: 2px;
  font-size: 0.78rem;
}

.business-open-login-card .business-open-amount-display {
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  margin-bottom: 10px;
  padding: 0 0.65rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 1.05rem;
  border-radius: 8px;
}

.business-open-login-card .business-open-numpad {
  margin-bottom: 8px;
}

.business-open-login-card .business-open-numpad .member-numpad-key {
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0;
  box-sizing: border-box;
  font-size: 0.95rem;
  border-radius: 8px;
}

.business-open-login-card .pos-login-error {
  margin-bottom: 6px;
}

.business-open-login-card .pos-login-method-tabs {
  margin-bottom: 8px;
}

.business-open-login-card .pos-login-method-tab {
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 8px;
  box-sizing: border-box;
  border-radius: 8px;
  font-size: 0.78rem;
}

.business-open-numpad-target {
  width: 100%;
  cursor: pointer;
  font: inherit;
}

.business-open-numpad-target.is-numpad-active {
  border-color: #005df5;
  box-shadow: 0 0 0 2px rgba(0, 93, 245, 0.18);
}

.business-open-login-card #businessOpenLoginPinDisplay {
  margin-bottom: 8px;
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 0.65rem;
  box-sizing: border-box;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  line-height: 1;
}

.business-open-login-card .pos-login-primary {
  width: 100%;
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0;
  box-sizing: border-box;
  margin-top: 0;
  flex-shrink: 0;
  border-radius: 8px;
  font-size: 0.92rem;
}

.pos-login-card {
  width: min(420px, 92vw);
  background: #fff;
  border-radius: 20px;
  padding: 28px 24px 24px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
}
.pos-login-logo { margin: 0 auto 16px; display: block; }
.pos-login-logo.pos-text-wordmark {
  font-size: 1.65rem;
}
.pos-login-card h2 { margin: 0 0 8px; font-size: 1.35rem; }
.pos-login-method-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
}
.pos-login-method-tab {
  flex: 1 1 0;
  min-height: 36px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  color: #475569;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.pos-login-method-tab.active {
  border-color: #005df5;
  background: #eff6ff;
  color: #0050d4;
}
.pos-login-method-panel.hidden {
  display: none;
}
.pos-login-id-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
  text-align: left;
}
.pos-login-id-field span {
  font-size: 0.82rem;
  font-weight: 600;
  color: #64748b;
}
.pos-login-id-field .touch-input {
  width: 100%;
  min-height: 42px;
}
.pos-login-hint { margin: 0 0 16px; color: #64748b; font-size: 0.92rem; }
.pos-login-pin-display {
  font-size: 2rem;
  letter-spacing: 0.35em;
  min-height: 2.5rem;
  margin-bottom: 12px;
  color: #0f172a;
}
.pos-login-error { color: #dc2626; font-size: 0.9rem; margin: 0 0 8px; }
.pos-login-pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.pos-login-pad-key {
  min-height: 52px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  color: #0f172a;
  font-size: 1.25rem;
  font-weight: 600;
  cursor: pointer;
}
.pos-login-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pos-login-secondary {
  width: 100%;
  min-height: 44px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  color: #64748b;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
.pos-login-secondary:hover {
  background: #f8fafc;
}
.pos-login-primary {
  width: 100%;
  min-height: 52px;
  border: none;
  border-radius: 12px;
  background: #005df5;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
}
.pos-mode-actions { display: grid; gap: 12px; margin-top: 16px; }
.pos-mode-btn {
  display: grid;
  gap: 4px;
  text-align: left;
  padding: 16px 18px;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
}
.pos-mode-btn strong { font-size: 1.05rem; color: #0f172a; }
.pos-mode-btn span { font-size: 0.88rem; color: #64748b; }
.pos-mode-btn:hover { border-color: #005df5; background: #eff6ff; }
.special-request-input { width: 100%; min-height: 120px; resize: vertical; }

.kitchen-memo-modal .discount-modal-header {
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
}

.kitchen-memo-modal-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
}

.kitchen-memo-modal-body {
  min-height: 320px;
}

.kitchen-memo-preset-hint {
  margin: 0 0 8px;
  padding: 0 2px;
  font-size: 0.82rem;
}

.kitchen-memo-direct {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.kitchen-memo-textarea {
  flex: 1;
  min-height: 180px;
  width: 100%;
  resize: vertical;
}

.kitchen-memo-form-text {
  min-height: 88px;
  resize: vertical;
}

.kitchen-memo-preset-form-modal {
  width: min(440px, 94vw);
  max-width: 440px;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.kitchen-memo-preset-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid #eef2f7;
}

.kitchen-memo-preset-form-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: #111827;
}

.kitchen-memo-preset-form-body {
  padding: 14px 18px 18px;
}

.kitchen-memo-preset-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.kitchen-memo-preset-form-head-label {
  font-size: 0.92rem;
  font-weight: 700;
  color: #374151;
}

.kitchen-memo-preset-form-use {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: #374151;
  cursor: pointer;
}

.kitchen-memo-preset-form-use input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: #005df5;
}

.kitchen-memo-preset-form-textarea {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 132px;
  padding: 12px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #111827;
  resize: vertical;
}

.kitchen-memo-preset-form-textarea:focus {
  outline: none;
  border-color: #005df5;
  box-shadow: 0 0 0 3px rgba(0, 93, 245, 0.12);
}

.kitchen-memo-preset-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px 16px;
  border-top: 1px solid #eef2f7;
}

.kitchen-memo-preset-form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.kitchen-memo-preset-form-cancel,
.kitchen-memo-preset-form-save,
.kitchen-memo-preset-form-delete {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}

.kitchen-memo-preset-form-cancel {
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
}

.kitchen-memo-preset-form-save {
  border: 1px solid #005df5;
  background: #005df5;
  color: #fff;
}

.kitchen-memo-preset-form-delete {
  border: 1px solid #fecaca;
  background: #fff;
  color: #dc2626;
}

.toast-menu-footer-action.has-kitchen-memo {
  border-color: #005df5;
  background: #eff6ff;
  color: #0050d4;
  font-weight: 700;
}

/* ═══ 10.1" 태블릿 최소 (800px+) 레이아웃 ═══ */
@media (min-width: 800px) and (max-width: 1280px) {
  .topbar {
    gap: 10px;
    padding: 8px 12px;
  }

  .topbar .tab {
    padding: 8px 10px;
    font-size: 0.82rem;
  }

  .table-floor-sidebar {
    width: 96px;
  }

  .table-floor-func-btn {
    font-size: 11px;
    padding: 5px 3px;
  }

  .sales-status-metrics-main {
    gap: 14px;
  }

  .sales-status-widgets-row {
    gap: 10px;
  }

  .sales-status-bar-group,
  .sales-status-bar {
    max-width: 34px;
  }

  .sales-status-bar-group .sales-status-bar {
    max-width: 16px;
  }

  .settings-work-panel[data-settings-panel="reports"] .report-panel {
    padding: 12px 14px 18px;
  }

  .sales-report-top-nav {
    padding: 8px 14px;
    gap: 10px;
  }

  .store-ops-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 799px) and not print {
  body::before {
    content: "TABLO POS는 10.1인치(800px) 이상 화면에 최적화되어 있습니다.\A가로 모드 또는 더 큰 화면에서 사용해 주세요.";
    white-space: pre-wrap;
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 24px;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.55;
    color: #fff;
    background: rgba(15, 23, 42, 0.94);
    pointer-events: all;
  }
}

/* Receipt template settings */
.settings-work-panel[data-settings-panel="receipt-template"] .settings-work-panel-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.receipt-template-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: auto;
}

.receipt-template-panel > .hint {
  flex-shrink: 0;
  margin: 0;
}

.receipt-template-panel > .receipt-tpl-settings-root,
#localeHubSectionReceipt .receipt-tpl-settings-root {
  flex: 1 1 auto;
  min-height: 0;
}

.receipt-tpl-settings-root {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: auto;
}

.receipt-tpl-country-label {
  flex-shrink: 0;
  margin: 0;
  font-size: 0.95rem;
  color: #475569;
}

.receipt-tpl-country-label strong {
  color: #0f172a;
}

.receipt-tpl-country-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
}

.receipt-tpl-country-tab {
  padding: 8px 14px;
  border: 1px solid var(--border, #d8dee9);
  border-radius: 999px;
  background: #fff;
  font-size: 0.92rem;
  cursor: pointer;
}

.receipt-tpl-country-tab.active {
  background: var(--primary, #005df5);
  border-color: var(--primary, #005df5);
  color: #fff;
  font-weight: 600;
}

.receipt-tpl-samples-scroll {
  flex: 1 1 auto;
  min-height: min(420px, 52vh);
  min-width: 0;
  overflow: auto;
}

.receipt-tpl-samples {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 16px;
  overflow-x: auto;
  overflow-y: visible;
  padding: 2px 4px 12px;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 4px;
  -webkit-overflow-scrolling: touch;
}

.receipt-tpl-samples::-webkit-scrollbar {
  height: 8px;
}

.receipt-tpl-samples::-webkit-scrollbar-track {
  background: #e2e8f0;
  border-radius: 999px;
}

.receipt-tpl-samples::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 999px;
}

.receipt-tpl-samples::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

.receipt-tpl-sample-card {
  flex: 0 0 300px;
  width: 300px;
  max-width: min(300px, 78vw);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  min-height: 360px;
  border: 2px solid var(--border, #d8dee9);
  border-radius: 12px;
  padding: 12px;
  background: #f8fafc;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.receipt-tpl-sample-card:hover {
  border-color: #94a3b8;
}

.receipt-tpl-sample-card.is-selected {
  border-color: var(--primary, #005df5);
  box-shadow: 0 0 0 1px var(--primary, #005df5);
}

.receipt-tpl-sample-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  cursor: pointer;
  user-select: none;
}

.receipt-tpl-sample-check {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 18px;
  accent-color: var(--primary, #005df5);
  cursor: pointer;
}

.receipt-tpl-sample-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
}

.receipt-tpl-sample-preview {
  flex: 1 1 auto;
  overflow: auto;
  min-height: 180px;
  max-height: min(360px, 42vh);
  background: #e2e8f0;
  border-radius: 8px;
  padding: 12px;
}

.receipt-tpl-sample-preview .receipt-paper {
  margin: 0 auto;
  width: 100%;
  max-width: 272px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.receipt-store-name {
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  margin: 0 0 4px;
}

.receipt-meta-center {
  text-align: center;
  font-weight: 600;
}

.receipt-meta-grid {
  font-size: 11px;
  line-height: 1.45;
}

.receipt-meta-grid-row {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin: 1px 0;
}

.receipt-meta-grid-row > span {
  flex: 1 1 50%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.receipt-footer-msg {
  text-align: center;
  font-size: 11px;
  margin: 6px 0;
  white-space: pre-wrap;
}

.receipt-tip-note {
  font-size: 10px;
  line-height: 1.35;
}

.receipt-tpl-hint {
  flex-shrink: 0;
  margin: 0;
}

.receipt-tpl-cut-feed-bar {
  flex-shrink: 0;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border, #d8dee9);
}

.receipt-tpl-cut-feed-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0;
}

.receipt-tpl-cut-feed-label {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text, #0f172a);
  white-space: nowrap;
}

.receipt-tpl-cut-feed-input {
  width: 72px;
  min-height: 35px;
  text-align: center;
}

.receipt-tpl-cut-feed-hint {
  margin: 0;
  flex: 1 1 180px;
}

.output-tpl-section-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
}

.output-tpl-section-tab {
  padding: 10px 18px;
  border: 1px solid var(--border, #d8dee9);
  border-radius: 999px;
  background: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.output-tpl-section-tab.active {
  background: var(--primary, #005df5);
  border-color: var(--primary, #005df5);
  color: #fff;
}

.output-tpl-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-height: min(480px, 58vh);
}

.output-tpl-section.hidden {
  display: none;
}

.output-tpl-section-desc {
  margin: 0;
  flex-shrink: 0;
}

.slip-paper-preview {
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  padding: 12px 10px;
  background: #fff;
  border: 1px dashed #cbd5e1;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px #f1f5f9;
}

.slip-paper-preview-lg .slip-paper-text {
  font-size: 0.72rem;
  line-height: 1.45;
}

.slip-paper-preview-kitchen .slip-paper-text {
  font-size: 0.7rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.slip-paper-text {
  margin: 0;
  font-family: "Consolas", "Courier New", monospace;
  font-size: 0.68rem;
  line-height: 1.3;
  white-space: pre;
  word-break: normal;
  overflow-x: auto;
  color: #0f172a;
}

.receipt-tpl-us-restaurant .receipt-store-centered,
.receipt-tpl-us-restaurant .receipt-meta-centered,
.receipt-tpl-us-cafe .receipt-store-centered,
.receipt-tpl-us-cafe .receipt-meta-centered,
.receipt-tpl-us-modern .receipt-store-centered,
.receipt-tpl-us-modern .receipt-meta-centered {
  text-align: center;
}

.receipt-rule-bold::before {
  content: "===========================================";
  display: block;
  font-size: 10px;
  letter-spacing: -0.5px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
}

.receipt-tpl-us-restaurant .receipt-rule-bold,
.receipt-tpl-us-cafe .receipt-rule-bold,
.receipt-tpl-us-modern .receipt-rule-bold {
  margin: 4px 0;
  height: auto;
  border: none;
  background: none;
}

.receipt-tpl-us-restaurant .receipt-rule-bold::after,
.receipt-tpl-us-cafe .receipt-rule-bold::after,
.receipt-tpl-us-modern .receipt-rule-bold::after {
  display: none;
}

.receipt-us-item-line {
  display: grid;
  grid-template-columns: 1.4em 1fr auto;
  gap: 0 4px;
  align-items: start;
  font-size: 11px;
  line-height: 1.35;
  margin: 2px 0;
}

.receipt-us-item-qty {
  text-align: right;
}

.receipt-us-item-name {
  word-break: break-word;
}

.receipt-us-item-amt {
  text-align: right;
  white-space: nowrap;
}

.receipt-us-mod-line {
  font-size: 10px;
  line-height: 1.35;
  margin: 0 0 2px;
  padding-left: 1.4em;
  color: inherit;
}

.receipt-us-mod-priced {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 4px;
  padding-left: 1.4em;
  align-items: start;
}

.receipt-us-mod-text {
  word-break: break-word;
}

.receipt-us-mod-amt {
  text-align: right;
  white-space: nowrap;
}

.receipt-paid-line > span:first-child {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
}

.receipt-total-upper {
  font-weight: 700;
  text-transform: uppercase;
}

.receipt-footer-website {
  font-weight: 600;
}

.receipt-merchant-title {
  font-weight: 700;
  margin: 4px 0;
}

.receipt-tip-guide {
  font-size: 10px;
  margin: 2px 0 6px;
}

.receipt-tax-note {
  font-size: 10px;
  font-style: italic;
  margin: 0 0 4px;
}

.receipt-blank-line {
  margin: 4px 0;
  font-size: 11px;
}

/* POS boot shield — covers UI until locale + settings are ready */
.pos-boot-shield {
  background: var(--bg, #f1f5f9);
}

.pos-boot-shield-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.pos-boot-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #cbd5e1;
  border-top-color: var(--primary, #005df5);
  border-radius: 50%;
  animation: pos-boot-spin 0.75s linear infinite;
}

@keyframes pos-boot-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Locale hub — country + common settings on one panel */
.settings-work-panel[data-settings-panel="locale-hub"] .store-ops-panel-toolbar .btn-primary,
.settings-work-panel[data-settings-panel="locale-hub"] .store-ops-panel-toolbar .btn-ghost {
  box-sizing: border-box;
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  min-width: auto;
  width: auto;
  padding: 0 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.settings-work-panel[data-settings-panel="locale-hub"] .store-ops-panel-toolbar .btn-save-action {
  gap: 0.3rem;
}

.settings-work-panel[data-settings-panel="locale-hub"] .settings-work-panel-body.locale-hub-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.locale-hub-country-label {
  margin: 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: #f1f5f9;
  color: #334155;
  font-size: 0.95rem;
  font-weight: 600;
}

.locale-hub-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 4px 0 8px;
  background: var(--bg, #fff);
}

.locale-hub-nav-btn {
  padding: 6px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #fff;
  color: #475569;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.locale-hub-nav-btn:hover {
  border-color: var(--primary, #005df5);
  color: var(--primary, #005df5);
}

.locale-hub-readonly-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid #fcd34d;
  border-radius: 10px;
  background: #fffbeb;
  color: #92400e;
  font-size: 0.9rem;
  line-height: 1.45;
}

.locale-hub-readonly-notice::before {
  content: "ⓘ";
  font-size: 1rem;
  line-height: 1.3;
}

.locale-hub--readonly #localeHubSectionBase {
  opacity: 0.7;
}

.locale-hub-sections {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.locale-hub-section {
  scroll-margin-top: 72px;
}

.locale-hub-section-title {
  margin: 0 0 12px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
}

.locale-hub-country-options {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.locale-hub-country-section.hidden,
.locale-hub-nav-btn.hidden {
  display: none !important;
}

.locale-hub-section .settings-work-panel-body {
  padding: 0;
  overflow: visible;
}

.locale-hub-section .store-ops-lang-pack {
  margin-top: 0;
}

/* 설정업무 패널 입력 박스·버튼 높이 35px 일괄 통일 */
.settings-work-panel .touch-select,
.settings-work-panel .touch-input:not([type="checkbox"]):not([type="radio"]):not(textarea) {
  box-sizing: border-box;
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 10px;
  line-height: 1.2;
}

.settings-work-panel .kds-settings-actions .btn-primary,
.settings-work-panel .kds-settings-actions .btn-ghost,
.settings-work-panel .kds-settings-actions .btn-danger,
.settings-work-panel .kds-settings-actions .btn-action-close,
.settings-work-panel .printer-settings-actions .btn-primary,
.settings-work-panel .printer-settings-actions .btn-ghost,
.settings-work-panel .printer-settings-actions .btn-danger,
.settings-work-panel .printer-settings-actions .btn-action-close,
.settings-work-panel .printer-settings-form .btn-primary,
.settings-work-panel .printer-settings-form .btn-ghost,
.settings-work-panel .device-conn-form .btn-primary,
.settings-work-panel .device-conn-form .btn-ghost,
.settings-work-panel .device-conn-scan-actions .btn-primary,
.settings-work-panel .device-conn-scan-actions .btn-ghost,
.settings-work-panel .device-conn-scan-below-actions .btn-primary,
.settings-work-panel .device-conn-scan-below-actions .btn-ghost,
.settings-work-panel[data-settings-panel="screensetup"] .screen-setup-panel-toolbar .btn-primary,
.settings-work-panel[data-settings-panel="screensetup"] .screen-setup-panel-toolbar .btn-ghost,
.settings-work-panel[data-settings-panel="screensetup"] .screen-setup-panel-toolbar .btn-action-close,
.settings-work-panel .settings-menu-toolbar .btn-primary,
.settings-work-panel .settings-menu-toolbar .btn-ghost {
  box-sizing: border-box;
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 14px;
  line-height: 1;
}

.menu-i18n-hub-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.menu-i18n-hub-section-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
}

.menu-i18n-hub-enable {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}

.menu-i18n-hub-lang-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 8px;
}

.menu-i18n-hub-lang-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.menu-i18n-hub-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}

.menu-i18n-hub-tabs {
  display: inline-flex;
  gap: 6px;
}

.menu-i18n-hub-tab {
  border: 1px solid var(--border, #d0d7de);
  background: #fff;
  border-radius: 8px;
  padding: 6px 14px;
  cursor: pointer;
}

.menu-i18n-hub-tab.active {
  background: var(--accent, #1a73e8);
  border-color: var(--accent, #1a73e8);
  color: #fff;
}

.menu-i18n-hub-search {
  min-width: 200px;
  max-width: 320px;
  flex: 1;
}

.menu-i18n-hub-table-wrap {
  overflow: auto;
  border: 1px solid var(--border, #d0d7de);
  border-radius: 8px;
  min-height: 200px;
}

.menu-i18n-hub-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.menu-i18n-hub-row {
  cursor: pointer;
}

.menu-i18n-hub-row.is-selected td {
  background: #dbeafe !important;
}

.menu-i18n-hub-row.is-selected td:first-child {
  box-shadow: inset 3px 0 0 #2563eb;
}

.menu-i18n-hub-table th,
.menu-i18n-hub-table td {
  border-bottom: 1px solid var(--border, #e8eaed);
  padding: 8px 10px;
  vertical-align: middle;
}

.menu-i18n-hub-table th {
  position: sticky;
  top: 0;
  background: #f8f9fa;
  z-index: 1;
  text-align: left;
  white-space: nowrap;
}

.menu-i18n-col-base {
  min-width: 140px;
  max-width: 220px;
}

.menu-i18n-base-name {
  font-weight: 600;
}

.menu-i18n-cell-input {
  width: 100%;
  min-width: 120px;
}

.menu-i18n-hub-actions {
  margin-top: 10px;
}

.menu-i18n-col-context {
  min-width: 120px;
  max-width: 180px;
  color: #5f6368;
  font-size: 12px;
}

.menu-i18n-hub-empty {
  padding: 24px 16px;
  text-align: center;
}

.settings-work-panel[data-settings-panel="menu-i18n-hub"] .store-ops-panel-toolbar .btn-primary,
.settings-work-panel[data-settings-panel="menu-i18n-hub"] .store-ops-panel-toolbar .btn-ghost {
  box-sizing: border-box;
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 0 14px;
  line-height: 1;
}