/* ============================================================
   store-os 디자인 시스템 (Toss-grade custom layer over Bootstrap 5)
   구조: 1.토큰 → 2.베이스·타이포 → 3.컴포넌트 → 4.레이아웃 셸 → 5.유틸·반응형
   ============================================================ */

/* ---------- 1. 디자인 토큰 ---------- */
:root {
  --gray-50:#F9FAFB; --gray-100:#F2F4F6; --gray-200:#E5E8EB; --gray-300:#D1D6DB;
  --gray-400:#B0B8C1; --gray-500:#8B95A1; --gray-600:#6B7684; --gray-700:#4E5968;
  --gray-800:#333D4B; --gray-900:#191F28;
  --blue-500:#3182F6; --blue-600:#1B64DA; --blue-50:#E8F3FF;
  --red-500:#F04452; --red-50:#FDEDEE;
  --green-500:#00C471; --green-50:#E5F9F1;
  --yellow-500:#FFB331; --yellow-50:#FFF4E0;
  --radius-card:16px; --radius-btn:10px;
  --shadow-1:0 1px 3px rgba(25,31,40,.06);
  --shadow-2:0 8px 24px rgba(25,31,40,.14);
  --sidebar-w:240px; --bottomtab-h:60px;

  /* Bootstrap bridge */
  --bs-primary:var(--blue-500); --bs-primary-rgb:49,130,246;
  --bs-body-bg:var(--gray-100); --bs-body-color:var(--gray-900);
  --bs-border-color:var(--gray-200);
  --bs-link-color:var(--blue-500); --bs-link-hover-color:var(--blue-600);
  --bs-border-radius:.8rem;
  --bs-danger:var(--red-500); --bs-danger-rgb:240,68,82;
  --bs-secondary-color:var(--gray-600);
}

/* ---------- 2. 베이스 · 타이포 ---------- */
body {
  font-family:"Pretendard", system-ui, -apple-system, sans-serif;
  font-size:15px;
  color:var(--gray-900);
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
}
.page-title { font-size:22px; font-weight:800; letter-spacing:-.02em; margin:.4rem 0 1.1rem; }
.section-title { font-size:17px; font-weight:700; letter-spacing:-.01em; margin-bottom:.75rem; }
.text-caption { font-size:12px; color:var(--gray-500); }
.num { text-align:right; white-space:nowrap; }
.amount { font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.neg { color:var(--red-500) !important; }
.pos { color:var(--blue-500) !important; }

/* 브레드크럼 */
.breadcrumb { --bs-breadcrumb-divider:'›'; font-size:.85rem; margin-bottom:.6rem; }
.breadcrumb-item a { color:var(--gray-600); text-decoration:none; font-weight:600; }
.breadcrumb-item a:hover { color:var(--blue-500); text-decoration:underline; }
.breadcrumb-item.active { color:var(--gray-900); font-weight:700; }
.breadcrumb-item + .breadcrumb-item::before { color:var(--gray-300); }

/* ---------- 3. 컴포넌트 ---------- */

/* 카드 */
.card {
  border:0;
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-1);
  background:#fff;
}
.card > .card-body { padding:20px; }

/* 버튼 */
.btn {
  font-weight:700; font-size:.95rem;
  border-radius:var(--radius-btn);
  padding:.55rem 1rem;
  transition:background-color .15s ease, color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.btn:active { transform:scale(.98); }
.btn-sm { padding:.4rem .75rem; font-size:.875rem; border-radius:8px; }
.btn-primary {
  --bs-btn-bg:var(--blue-500); --bs-btn-border-color:var(--blue-500);
  --bs-btn-hover-bg:var(--blue-600); --bs-btn-hover-border-color:var(--blue-600);
  --bs-btn-active-bg:var(--blue-600); --bs-btn-active-border-color:var(--blue-600);
}
/* 토스식 세컨더리: 회색 배경 채움 (outline류 흡수) */
.btn-secondary, .btn-outline-secondary, .btn-light {
  --bs-btn-bg:var(--gray-100); --bs-btn-border-color:var(--gray-100);
  --bs-btn-color:var(--gray-800);
  --bs-btn-hover-bg:var(--gray-200); --bs-btn-hover-border-color:var(--gray-200);
  --bs-btn-hover-color:var(--gray-900);
  --bs-btn-active-bg:var(--gray-200); --bs-btn-active-border-color:var(--gray-200);
  --bs-btn-active-color:var(--gray-900);
}
.btn-outline-primary {
  --bs-btn-bg:var(--blue-50); --bs-btn-border-color:var(--blue-50);
  --bs-btn-color:var(--blue-600);
  --bs-btn-hover-bg:#DBEBFF; --bs-btn-hover-border-color:#DBEBFF; --bs-btn-hover-color:var(--blue-600);
  --bs-btn-active-bg:#DBEBFF; --bs-btn-active-border-color:#DBEBFF; --bs-btn-active-color:var(--blue-600);
}
.btn-danger {
  --bs-btn-bg:var(--red-500); --bs-btn-border-color:var(--red-500);
  --bs-btn-hover-bg:#D93A47; --bs-btn-hover-border-color:#D93A47;
}
.btn-outline-danger {
  --bs-btn-bg:var(--red-50); --bs-btn-border-color:var(--red-50);
  --bs-btn-color:var(--red-500);
  --bs-btn-hover-bg:#FBDCDF; --bs-btn-hover-border-color:#FBDCDF; --bs-btn-hover-color:var(--red-500);
  --bs-btn-active-bg:#FBDCDF; --bs-btn-active-border-color:#FBDCDF; --bs-btn-active-color:var(--red-500);
}
.btn-success {
  --bs-btn-bg:var(--green-500); --bs-btn-border-color:var(--green-500);
  --bs-btn-hover-bg:#00A05C; --bs-btn-hover-border-color:#00A05C;
}
.btn-outline-success {
  --bs-btn-bg:var(--green-50); --bs-btn-border-color:var(--green-50);
  --bs-btn-color:#00A05C;
  --bs-btn-hover-bg:#D2F5E5; --bs-btn-hover-border-color:#D2F5E5; --bs-btn-hover-color:#00794A;
  --bs-btn-active-bg:#D2F5E5; --bs-btn-active-border-color:#D2F5E5; --bs-btn-active-color:#00794A;
}
.btn-warning, .btn-outline-warning {
  --bs-btn-bg:var(--yellow-50); --bs-btn-border-color:var(--yellow-50);
  --bs-btn-color:#B26A00;
  --bs-btn-hover-bg:#FFE9C2; --bs-btn-hover-border-color:#FFE9C2; --bs-btn-hover-color:#B26A00;
  --bs-btn-active-bg:#FFE9C2; --bs-btn-active-border-color:#FFE9C2; --bs-btn-active-color:#B26A00;
}

/* 표 */
.table { font-size:.925rem; font-variant-numeric:tabular-nums; --bs-table-hover-bg:var(--gray-50); word-break:keep-all; }
.table > thead th {
  font-size:12.5px; font-weight:600; color:var(--gray-500);
  background:transparent; border-bottom:1px solid var(--gray-200);
  padding:.55rem .5rem; white-space:nowrap;
}
.table > tbody td { padding:.75rem .5rem; border-color:var(--gray-100); vertical-align:middle; }
.table > tbody tr:hover { background:var(--gray-50); }
.table > tfoot td {
  border-top:2px solid var(--gray-300); border-bottom:0;
  font-weight:700; padding:.7rem .5rem;
}
/* 긴 표: 스크롤 + 헤더 고정 */
.table-scroll { overflow:auto; max-height:72vh; border-radius:12px; }
.table-scroll thead th { position:sticky; top:0; background:#fff; z-index:2; }

/* 폼 */
.form-control, .form-select { font-size:.95rem; border-color:var(--gray-200); border-radius:10px; min-height:44px; }
.form-control-sm, .form-select-sm { min-height:auto; border-radius:8px; }
.form-control:focus, .form-select:focus {
  border-color:var(--blue-500);
  box-shadow:0 0 0 3px var(--blue-50);
}
.form-control::placeholder { color:var(--gray-400); opacity:1; }
.form-label { font-size:13px; font-weight:600; color:var(--gray-600); margin-bottom:.35rem; }

/* 배지 (상태 pill) */
.badge { font-weight:700; border-radius:999px; padding:.35em .75em; font-size:.78rem; }
.badge-blue   { background:var(--blue-50);   color:var(--blue-600); }
.badge-red    { background:var(--red-50);    color:var(--red-500); }
.badge-green  { background:var(--green-50);  color:#00A05C; }
.badge-yellow { background:var(--yellow-50); color:#B26A00; }
.badge-gray   { background:var(--gray-100);  color:var(--gray-600); }
/* 기존 bootstrap 배지 색도 pill 톤으로 (bg-*, text-bg-* 모두) */
.badge.bg-success, .badge.text-bg-success { background:var(--green-50) !important; color:#00A05C !important; }
.badge.bg-secondary, .badge.text-bg-secondary,
.badge.bg-light, .badge.text-bg-light { background:var(--gray-100) !important; color:var(--gray-600) !important; }
.badge.bg-warning, .badge.text-bg-warning { background:var(--yellow-50) !important; color:#B26A00 !important; }
.badge.bg-danger, .badge.text-bg-danger { background:var(--red-50) !important; color:var(--red-500) !important; }
.badge.bg-primary, .badge.bg-info,
.badge.text-bg-primary, .badge.text-bg-info { background:var(--blue-50) !important; color:var(--blue-600) !important; }

/* 알림 */
.alert {
  border:0; border-left:4px solid transparent; border-radius:12px;
  box-shadow:var(--shadow-1); font-size:.925rem;
}
.alert-warning { background:var(--yellow-50); border-left-color:var(--yellow-500); color:#7A5200; }
.alert-danger  { background:var(--red-50); border-left-color:var(--red-500); color:#B22833; }
.alert-success { background:var(--green-50); border-left-color:var(--green-500); color:#00794A; }
.alert-info, .alert-primary { background:var(--blue-50); border-left-color:var(--blue-500); color:var(--blue-600); }

/* 드롭다운 */
.dropdown-menu {
  border:0; border-radius:14px; box-shadow:var(--shadow-2);
  padding:.4rem; font-size:.925rem;
}
.dropdown-item { border-radius:8px; padding:.5rem .75rem; font-weight:500; }
.dropdown-item:hover { background:var(--gray-50); }

/* ---------- 4. 레이아웃 셸 ---------- */

/* 사이드바 (데스크탑) */
.app-sidebar {
  position:fixed; top:0; bottom:0; left:0; width:var(--sidebar-w);
  background:#fff; border-right:1px solid var(--gray-200);
  display:flex; flex-direction:column;
  padding:20px 12px 16px; overflow-y:auto; z-index:1030;
}
.sidebar-brand {
  font-size:18px; font-weight:800; letter-spacing:-.02em;
  color:var(--gray-900); text-decoration:none;
  padding:2px 12px 12px; display:block;
}
.sidebar-store { padding:0 8px 4px; }
.nav-group-label {
  font-size:11px; font-weight:700; color:var(--gray-400);
  letter-spacing:.04em; padding:16px 12px 6px;
}
.side-link {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px;
  color:var(--gray-700); font-size:14.5px; font-weight:600;
  text-decoration:none; transition:background-color .15s ease, color .15s ease;
}
.side-link:hover { background:var(--gray-50); color:var(--gray-900); }
.side-link.active { background:var(--blue-50); color:var(--blue-600); }
.side-link svg { width:20px; height:20px; flex:none; }
.sidebar-footer { margin-top:auto; border-top:1px solid var(--gray-100); padding-top:10px; }

/* 본문 */
.app-main { min-height:100vh; }
.app-sidebar ~ .app-main { margin-left:var(--sidebar-w); }
.app-content { max-width:1140px; margin:0 auto; padding:28px 32px 48px; }

/* 모바일 헤더 */
.mobile-header {
  position:sticky; top:0; z-index:1020;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:#fff; border-bottom:1px solid var(--gray-200);
  padding:12px 16px;
}
.mobile-header .brand { font-size:17px; font-weight:800; letter-spacing:-.02em; color:var(--gray-900); text-decoration:none; }

/* 하단 탭바 (모바일) */
.bottom-tab {
  position:fixed; left:0; right:0; bottom:0; z-index:1030;
  display:flex; background:#fff; border-top:1px solid var(--gray-200);
  padding-bottom:env(safe-area-inset-bottom);
}
.tab-item {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:8px 0 7px; font-size:11px; font-weight:600;
  color:var(--gray-500); text-decoration:none; border:0; background:none;
}
.tab-item svg { width:22px; height:22px; }
.tab-item.active { color:var(--blue-500); }

/* 더보기 바텀시트 */
.more-sheet { --bs-offcanvas-height:auto; border-radius:20px 20px 0 0; height:auto; max-height:75vh; }
.more-sheet .offcanvas-body { padding:8px 20px 28px; }
.quick-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.quick-tile {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:16px 6px; border-radius:14px;
  background:var(--gray-50); color:var(--gray-800);
  font-size:12.5px; font-weight:600; text-decoration:none; text-align:center;
  transition:background-color .15s ease;
}
.quick-tile:hover { background:var(--gray-100); color:var(--gray-900); }
.quick-tile svg { width:24px; height:24px; color:var(--blue-500); }

/* 히어로 카드 (대시보드) */
.hero-card { padding:24px; }
.hero-caption { font-size:13px; color:var(--gray-500); margin-bottom:4px; }
.hero-value { font-size:28px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.hero-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
  margin-top:20px; padding-top:16px; border-top:1px solid var(--gray-100);
}
.hero-grid .k { font-size:12px; color:var(--gray-500); margin-bottom:2px; }
.hero-grid .v { font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }

/* ---------- 5. 유틸 · 반응형 ---------- */

/* 손익 리포트 월 컬럼 줄바꿈 방지 */
#report-table td:first-child, #report-table th:first-child { white-space:nowrap; }

/* 날짜 그리드 (매출·근태) 첫 열 고정 + 일자 헤더 nowrap */
.grid-table td:first-child, .grid-table th:first-child { white-space:nowrap; min-width:72px; }
.grid-table th { white-space:nowrap; }

/* 숫자 입력: 스피너 제거 — 입력은 키보드로만 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
input[type="number"] { -moz-appearance:textfield; appearance:textfield; }

/* 모바일 (<992px) */
@media (max-width: 991.98px) {
  .app-sidebar { display:none !important; }
  .app-sidebar ~ .app-main { margin-left:0; }
  .app-content { padding:16px 16px calc(var(--bottomtab-h) + env(safe-area-inset-bottom) + 24px); }
  .page-title { font-size:20px; }
  .hero-grid { grid-template-columns:repeat(2,1fr); }
  .quick-grid { grid-template-columns:repeat(4,1fr); }
}
@media (min-width: 992px) {
  .mobile-header, .bottom-tab { display:none !important; }
}

/* 반응형 카드형 표 (모바일 ≤767.98px) */
@media (max-width: 767.98px) {
  table.card-table,
  table.card-table tbody,
  table.card-table tfoot { display:block; width:100%; }
  table.card-table thead { display:none; }
  table.card-table tbody tr {
    display:block; border:1px solid var(--gray-200);
    border-radius:12px; margin-bottom:.6rem; padding:.5rem .8rem; background:#fff;
  }
  table.card-table tbody tr:hover { background:#fff; }
  table.card-table tbody td {
    display:flex; justify-content:space-between; align-items:center; gap:.75rem;
    border:0; padding:.35rem 0; text-align:right;
  }
  table.card-table tbody td::before {
    content:attr(data-label); font-weight:600; color:var(--gray-500);
    text-align:left; white-space:nowrap; font-size:.85rem;
  }
  table.card-table tfoot td { text-align:right; }
}

/* 인쇄 */
@media print {
  .app-sidebar, .bottom-tab, .mobile-header { display:none !important; }
  .app-sidebar ~ .app-main { margin-left:0; }
  .app-content { padding:0; }
  .card { box-shadow:none; border:1px solid var(--gray-200); }
}