/* ════════════════════════════════════════════════════════════
   ★ POSAI Toss Design System — 2026-05-27 사장 명시 완전 재설계
   ★ 기존 pos.css 를 토스 스타일로 override (베이스는 pos.css 가 유지)
   ════════════════════════════════════════════════════════════ */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

:root {
  --toss-primary:        #3182f6;
  --toss-primary-hover:  #1b64da;
  --toss-primary-light:  #e8f3ff;
  --toss-bg:             #f9fafb;
  --toss-card:           #ffffff;
  --toss-text:           #191f28;
  --toss-text-sub:       #6b7684;
  --toss-text-mute:      #8b95a1;
  /* ★ 2026-05-27 사장 명시: 테두리 그린톤 (mint) — 명확히 보이도록 */
  --toss-border:         #6dd99c;       /* 진한 mint — 카드 외곽 */
  --toss-border-light:   #c8f5db;       /* 옅은 mint — 표 row 구분 */
  --toss-success:        #1aa260;
  --toss-warning:        #ff9500;
  --toss-danger:         #f04452;
  --toss-shadow-sm:      0 1px 3px rgba(26,162,96,0.06);
  --toss-shadow:         0 4px 12px rgba(26,162,96,0.08);
  --toss-shadow-lg:      0 8px 24px rgba(26,162,96,0.10);
  --toss-radius-sm:      8px;
  --toss-radius:         12px;
  --toss-radius-lg:      16px;
  --toss-radius-xl:      20px;
}

/* ─── 글로벌 (body.pos 만 — 로그인 페이지 등 일반 body 제외) ─── */
body.pos, body.admin, .pos, .app, .admin-app {
  font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif !important;
  background: var(--toss-bg) !important;
  color: var(--toss-text) !important;
  letter-spacing: -0.02em !important;
}
html { font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif; }
body { font-size: 14px !important; line-height: 1.5 !important; }

/* 스크롤바 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--toss-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--toss-text-mute); }

/* ─── Header ─── */
.header, .admin-header {
  background: var(--toss-card) !important;
  color: var(--toss-text) !important;
  border-bottom: 2px solid var(--toss-border) !important;
  height: 56px !important;
  padding: 0 20px !important;
  gap: 16px !important;
  box-shadow: 0 1px 3px rgba(26,162,96,0.06) !important;
}
/* ★ 토스 풍 로고 — 그라데이션 + 큰 라운드 + 약간의 그림자 (2026-05-27 사장 명시) */
.header .logo, .admin-header .logo {
  background: linear-gradient(135deg, #3182f6 0%, #1aa260 100%) !important;
  color: #fff !important;
  width: 36px !important; height: 36px !important;
  border-radius: 12px !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  letter-spacing: -0.5px !important;
  display: inline-grid !important;
  place-items: center !important;
  box-shadow: 0 4px 10px rgba(26,162,96,0.25) !important;
  position: relative !important;
  overflow: hidden;
}
/* 토스풍 광택 효과 (좌상단 highlight) */
.header .logo::before, .admin-header .logo::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0));
  pointer-events: none;
}
.header .brand, .admin-header .brand {
  font-weight: 800 !important;
  font-size: 16px !important;
  color: var(--toss-text) !important;
  letter-spacing: -0.04em !important;
  background: linear-gradient(135deg, #191f28 0%, #1aa260 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.header .info, .admin-header .info {
  font-size: 12px !important;
  color: var(--toss-text-sub) !important;
  gap: 16px !important;
}
.header .info b, .admin-header .info b {
  color: var(--toss-text) !important;
  font-weight: 700 !important;
  margin-left: 4px;
}
.header .actions { gap: 6px !important; align-items: center !important; }
.header .actions button,
.header .actions .link-btn,
.admin-header .actions button,
.admin-header .actions .link-btn {
  background: var(--toss-bg) !important;
  color: var(--toss-text) !important;
  border: 0 !important;
  border-radius: var(--toss-radius-sm) !important;
  padding: 7px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  letter-spacing: -0.02em !important;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  box-shadow: none !important;
  text-decoration: none !important;
}
.header .actions button:hover,
.header .actions .link-btn:hover { background: var(--toss-border-light) !important; }
.header .actions button:active { transform: scale(0.97); }

/* ★ 관리 헤더 nav — 밝은 토스 헤더에서 흰 글씨가 안 보이던 것 수정 (2026-06-19) */
.admin-header .nav a {
  color: var(--toss-text-sub) !important;
  font-weight: 700 !important;
  border-radius: var(--toss-radius-sm) !important;
  padding: 7px 12px !important;
  letter-spacing: -0.02em !important;
}
.admin-header .nav a:hover { background: var(--toss-border-light) !important; color: var(--toss-text) !important; }
.admin-header .nav a.active { background: #e8f3ff !important; color: #3182f6 !important; }

.view-mode-toggle {
  display: flex !important;
  background: var(--toss-bg) !important;
  border-radius: var(--toss-radius-sm) !important;
  padding: 2px !important;
  gap: 2px !important;
}
.view-mode-toggle button {
  background: transparent !important;
  padding: 5px 10px !important;
  font-size: 11px !important;
}
.view-mode-toggle button.active,
.view-mode-toggle button[id^="vm_"][style*="background"] {
  background: var(--toss-card) !important;
  box-shadow: var(--toss-shadow-sm) !important;
}

/* ─── Main grid ─── */
.main {
  background: var(--toss-bg) !important;
  gap: 16px !important;
  padding: 16px !important;
}
.left, .right {
  background: transparent !important;
  display: flex; flex-direction: column; gap: 12px;
  border: 0 !important;
  padding: 0 !important;
}

/* ─── Cart table ─── */
.cart {
  background: var(--toss-card) !important;
  border-radius: var(--toss-radius-lg) !important;
  border: 1.5px solid var(--toss-border) !important;
  box-shadow: var(--toss-shadow) !important;
  overflow: hidden;
}
.cart thead th {
  background: var(--toss-bg) !important;
  color: var(--toss-text-sub) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--toss-border-light) !important;
  letter-spacing: -0.01em;
}
.cart tbody td {
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--toss-border-light) !important;
  color: var(--toss-text) !important;
  font-size: 13px !important;
}
.cart tbody tr:hover { background: var(--toss-bg) !important; cursor: pointer; }
.cart tbody tr.selected,
.cart tbody tr.active {
  background: var(--toss-primary-light) !important;
}

/* Cart actions */
.cart-actions {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 6px !important;
  background: var(--toss-card) !important;
  border-radius: var(--toss-radius-lg) !important;
  padding: 10px !important;
  box-shadow: var(--toss-shadow) !important;
  border: 1.5px solid var(--toss-border) !important;
}
.cart-actions button {
  background: var(--toss-bg) !important;
  color: var(--toss-text) !important;
  border: 0 !important;
  border-radius: var(--toss-radius-sm) !important;
  padding: 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  letter-spacing: -0.02em !important;
}
.cart-actions button:hover { background: var(--toss-border-light) !important; }
.cart-actions button:active { transform: scale(0.96); }
.cart-actions button.warn { background: #fff7e6 !important; color: #c87900 !important; }
.cart-actions button.danger { background: #ffeded !important; color: var(--toss-danger) !important; }

/* Barcode input */
.barcode-input {
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
}
.barcode-input input {
  width: 100% !important;
  height: 48px !important;
  background: var(--toss-card) !important;
  border: 2px solid var(--toss-border) !important;
  border-radius: var(--toss-radius) !important;
  padding: 0 16px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--toss-text) !important;
  font-family: inherit !important;
  letter-spacing: -0.01em !important;
  outline: none !important;
  box-shadow: var(--toss-shadow) !important;
  transition: border 0.15s, background 0.15s;
}
.barcode-input input::placeholder { color: var(--toss-text-mute) !important; font-weight: 500 !important; }
.barcode-input input:focus { border-color: var(--toss-success) !important; box-shadow: 0 0 0 3px rgba(26,162,96,0.12) !important; }

/* Totals */
.totals {
  background: var(--toss-card) !important;
  border-radius: var(--toss-radius-lg) !important;
  padding: 16px 18px !important;
  box-shadow: var(--toss-shadow) !important;
  border: 1.5px solid var(--toss-border) !important;
  display: flex; flex-direction: column; gap: 4px;
}
.totals > div {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 4px 0;
  font-size: 13px;
  border: 0 !important;
}
.totals > div > span { color: var(--toss-text-sub) !important; font-weight: 500 !important; }
.totals > div > b {
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--toss-text) !important;
  font-size: 13px !important;
}
.totals > div.big {
  margin-top: 8px; padding-top: 12px;
  border-top: 1px dashed var(--toss-border) !important;
  font-size: 16px;
}
.totals > div.big > span { color: var(--toss-text) !important; font-weight: 700 !important; }
.totals > div.big > b {
  color: var(--toss-danger) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
}

/* Member info */
.member-info {
  background: linear-gradient(135deg, #ecfdf5, #fff) !important;
  border: 1.5px solid var(--toss-border) !important;
  border-radius: var(--toss-radius-lg) !important;
  padding: 14px 16px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
.member-info > div {
  display: flex !important; flex-direction: column !important; gap: 3px;
  border: 0 !important;
}
.member-info > div > span { color: var(--toss-text-sub) !important; font-size: 11px !important; font-weight: 600 !important; }
.member-info > div > b {
  color: var(--toss-text) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  font-variant-numeric: tabular-nums !important;
}

/* Category tabs */
.category-tabs {
  background: var(--toss-bg) !important;
  border-radius: var(--toss-radius) !important;
  padding: 4px !important;
  display: flex !important; gap: 4px !important;
  border: 0 !important;
  overflow-x: auto;
}
.category-tabs button {
  background: transparent !important;
  color: var(--toss-text-sub) !important;
  border: 0 !important;
  border-radius: var(--toss-radius-sm) !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  cursor: pointer;
  letter-spacing: -0.02em !important;
  flex-shrink: 0;
  transition: all 0.15s;
}
.category-tabs button.active {
  background: var(--toss-card) !important;
  color: var(--toss-primary) !important;
  box-shadow: var(--toss-shadow-sm) !important;
}

.sub-tabs {
  display: flex !important; gap: 6px !important;
  flex-wrap: wrap;
  margin-top: 4px;
}
.sub-tabs button {
  background: var(--toss-card) !important;
  border: 1px solid var(--toss-border) !important;
  padding: 6px 12px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer;
  font-family: inherit !important;
  color: var(--toss-text-sub) !important;
  transition: all 0.15s;
}
.sub-tabs button.active {
  background: var(--toss-primary) !important;
  color: #fff !important;
  border-color: var(--toss-primary) !important;
}

/* Shortcut grid */
.shortcut-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
  gap: 8px !important;
  padding: 4px !important;
  background: transparent !important;
  flex: 1; overflow-y: auto; min-height: 0;
}
.shortcut-grid .card,
.shortcut-grid > div,
.shortcut-grid > button {
  background: var(--toss-card) !important;
  border: 1px solid var(--toss-border) !important;
  border-radius: var(--toss-radius) !important;
  padding: 12px !important;
  cursor: pointer;
  transition: all 0.15s;
  display: flex !important; flex-direction: column !important;
  gap: 4px !important;
  font-family: inherit !important;
  color: var(--toss-text) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: -0.02em !important;
  text-align: left !important;
}
.shortcut-grid .card:hover,
.shortcut-grid > div:hover,
.shortcut-grid > button:hover {
  border-color: var(--toss-primary) !important;
  transform: translateY(-1px);
  box-shadow: var(--toss-shadow);
}

/* Bottom menu */
.bottom-menu {
  background: var(--toss-card) !important;
  border-top: 2px solid var(--toss-border) !important;
  padding: 12px 16px 16px !important;
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 8px !important;
  box-shadow: 0 -1px 3px rgba(26,162,96,0.06) !important;
}
.bottom-menu button {
  background: var(--toss-bg) !important;
  color: var(--toss-text) !important;
  border: 0 !important;
  border-radius: var(--toss-radius) !important;
  padding: 14px 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  letter-spacing: -0.02em !important;
  cursor: pointer;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px;
  transition: all 0.15s;
}
.bottom-menu button:hover { background: var(--toss-border-light) !important; }
.bottom-menu button.primary,
.bottom-menu button[data-role="pay-main"] {
  background: var(--toss-primary) !important;
  color: #fff !important;
}
.bottom-menu button.primary:hover { background: var(--toss-primary-hover) !important; }
.bottom-menu button.warning,
.bottom-menu button[data-role="bank"] {
  background: var(--toss-warning) !important;
  color: #fff !important;
}
.bottom-menu button.danger { background: var(--toss-danger) !important; color: #fff !important; }
.bottom-menu button .icon { font-size: 18px !important; }

/* ─── Modal (기존 모달 토스화) ─── */
.modal,
.modal-content,
.overlay > div {
  border-radius: var(--toss-radius-xl) !important;
  box-shadow: var(--toss-shadow-lg) !important;
  border: 0 !important;
  font-family: inherit !important;
}
.modal-header { border-bottom: 1px solid var(--toss-border-light) !important; padding: 16px 20px !important; }
.modal-header h2, .modal-header h3 {
  font-weight: 800 !important; color: var(--toss-text) !important;
  letter-spacing: -0.02em !important;
}
.modal-body { padding: 20px !important; }
.modal input, .modal select, .modal textarea {
  background: var(--toss-bg) !important;
  border: 2px solid transparent !important;
  border-radius: var(--toss-radius) !important;
  padding: 12px 14px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  color: var(--toss-text) !important;
  outline: none;
  transition: border 0.15s, background 0.15s;
}
.modal input:focus, .modal select:focus, .modal textarea:focus {
  background: var(--toss-card) !important;
  border-color: var(--toss-primary) !important;
}

/* ─── Generic buttons (modal action 등) ─── */
button.primary, button[type="submit"] {
  background: var(--toss-primary) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--toss-radius) !important;
  padding: 12px 20px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  letter-spacing: -0.02em !important;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
button.primary:hover, button[type="submit"]:hover { background: var(--toss-primary-hover) !important; }
button.primary:active { transform: scale(0.97); }

/* ─── 일반 카드/패널 ─── */
.card, .panel, .section-card, .info-card {
  background: var(--toss-card) !important;
  border-radius: var(--toss-radius-lg) !important;
  box-shadow: var(--toss-shadow) !important;
  border: 1.5px solid var(--toss-border) !important;
}

/* PIP CCTV mini */
#camMini {
  border-radius: var(--toss-radius) !important;
  box-shadow: var(--toss-shadow-lg) !important;
  bottom: 90px !important;
}

/* admin 페이지 공통 */
.admin-content, .admin-main, main.content {
  background: var(--toss-bg) !important;
  padding: 16px !important;
}
.admin-content table, main.content table {
  background: var(--toss-card) !important;
  border-radius: var(--toss-radius-lg) !important;
  box-shadow: var(--toss-shadow) !important;
  overflow: hidden;
  border-collapse: separate !important;
  border-spacing: 0;
  border: 0 !important;
  width: 100%;
}
.admin-content table th {
  background: var(--toss-bg) !important;
  color: var(--toss-text-sub) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--toss-border-light) !important;
}
.admin-content table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--toss-border-light) !important;
  font-size: 13px;
}

/* Form */
input[type="text"], input[type="number"], input[type="password"],
input[type="email"], input[type="tel"], input[type="search"],
select, textarea {
  background: var(--toss-card);
  border: 2px solid var(--toss-border-light);
  border-radius: var(--toss-radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--toss-text);
  letter-spacing: -0.01em;
  outline: none;
  transition: border 0.15s, background 0.15s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--toss-primary);
}

/* 로그인 페이지 (index.html) */
.login-wrap, .login-form, .login-card {
  background: var(--toss-card) !important;
  border-radius: var(--toss-radius-xl) !important;
  box-shadow: var(--toss-shadow-lg) !important;
  border: 0 !important;
}
.login-wrap input, .login-form input {
  background: var(--toss-bg) !important;
  border: 2px solid transparent !important;
  border-radius: var(--toss-radius) !important;
  height: 48px !important;
  padding: 0 16px !important;
  font-size: 15px !important;
}
.login-wrap input:focus, .login-form input:focus {
  background: var(--toss-card) !important;
  border-color: var(--toss-primary) !important;
}
.login-wrap button, .login-form button {
  background: var(--toss-primary) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--toss-radius) !important;
  height: 48px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  letter-spacing: -0.02em !important;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.login-wrap button:hover, .login-form button:hover { background: var(--toss-primary-hover) !important; }