/* =============================================================
   bakery.css — Bakery Sales Calendar 전용 컴포넌트
   tokens.css 의 CSS 변수를 사용 (tokens.css 가 먼저 로드됨)
   모바일 퍼스트 / 하단 탭 내비게이션 / 13개 컴포넌트
   ============================================================= */

/* =============================================================
   1. 앱 셸 레이아웃
   ============================================================= */
.bk-app {
  min-height: 100vh;
  background: var(--bg-base);
  position: relative;
}

.bk-main {
  padding-top: 20px;
  padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  min-height: 100vh;
  -webkit-overflow-scrolling: touch;
}

/* 로그인/전체화면 페이지는 셸 패딩 제외 */
.bk-main--bare {
  padding-top: 0;
  padding-bottom: 0;
}

/* 콘텐츠 내부 패딩 래퍼 */
.bk-content { padding: 16px; }

/* =============================================================
   2. Top Bar
   ============================================================= */
.bk-topbar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.bk-topbar-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bk-topbar-date {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.bk-topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* =============================================================
   3. Bottom Tab Navigation
   ============================================================= */
.bk-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex;
  align-items: stretch;
  background: rgba(255,255,255,0.95);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border-top: 1px solid var(--border-subtle);
}
.bk-tab {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  text-decoration: none;
  transition: var(--transition-fast);
}
.bk-tab-icon {
  font-size: 22px;
  color: var(--text-muted);
  line-height: 1;
  transition: var(--transition-fast);
}
.bk-tab-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  transition: var(--transition-fast);
}
.bk-tab:hover .bk-tab-icon,
.bk-tab:hover .bk-tab-label { color: var(--text-secondary); }

.bk-tab.active .bk-tab-icon,
.bk-tab.active .bk-tab-label { color: var(--color-primary); }
.bk-tab.active::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

/* =============================================================
   4. 달력 그리드
   ============================================================= */
.bk-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 0 12px 12px;
}
.bk-cal-header {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 6px 0;
}
.bk-cal-header.sun { color: var(--color-danger); opacity: 0.75; }
.bk-cal-header.sat { color: var(--color-info);   opacity: 0.75; }

.bk-cal-cell {
  min-height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 4px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: var(--transition-fast);
}
.bk-cal-day {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.bk-cal-amount {
  font-size: 11px;
  color: var(--color-accent);
  font-weight: 700;
  margin-top: auto;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bk-cal-cell:hover { background: var(--glass-bg); }
.bk-cal-cell.has-data { cursor: pointer; }

.bk-cal-cell.today {
  background: var(--color-primary-glow);
  border: 1px solid rgba(14,165,233,0.3);
}
.bk-cal-cell.today .bk-cal-day { color: var(--color-primary); }

.bk-cal-cell.selected {
  background: var(--glass-strong);
  border: 1px solid var(--border-light);
}

.bk-cal-cell.other-month .bk-cal-day {
  color: var(--text-muted);
  opacity: 0.4;
}
.bk-cal-cell.other-month .bk-cal-amount { opacity: 0.4; }

/* =============================================================
   5. 달력 네비게이션
   ============================================================= */
.bk-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
}
.bk-cal-nav-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* =============================================================
   6. 납품/판매 상세 테이블 섹션
   ============================================================= */
.bk-detail-section {
  margin-top: 12px;
}
.bk-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
}
.bk-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.bk-section-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--color-primary-glow);
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.bk-table {
  width: 100%;
  border-collapse: collapse;
}
.bk-table thead th {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  padding: 10px 12px;
  text-align: left;
  white-space: nowrap;
}
.bk-table tbody td {
  padding: 12px;
  color: var(--text-primary);
  vertical-align: middle;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13px;
}
.bk-table tbody tr:hover { background: var(--glass-bg); }
.bk-table tbody tr:last-child td { border-bottom: none; }
.bk-table .num,
.bk-table .text-right { text-align: right; font-variant-numeric: tabular-nums; }

/* =============================================================
   7. FAB 버튼
   ============================================================= */
.bk-fab {
  position: fixed;
  bottom: 75px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 210;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  font-size: 22px;
  box-shadow: 0 4px 16px var(--color-primary-glow), 0 2px 8px rgba(0,0,0,0.15);
  transition: var(--transition);
}
.bk-fab:hover {
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 10px 28px var(--color-primary-glow), 0 6px 14px rgba(0,0,0,0.15);
}
.bk-fab:active { transform: translateX(-50%) scale(0.93); }

/* =============================================================
   8. 판매 입력 시트
   ============================================================= */
.bk-sale-sheet {
  padding: 4px 0;
}
.bk-sale-item {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-card);
  transition: var(--transition-fast);
}
.bk-sale-item-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.bk-sale-item-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.bk-sale-item-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--glass-bg);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.bk-sale-item-price {
  font-size: 13px;
  color: var(--color-accent);
  font-weight: 700;
  margin: 6px 0 12px;
  font-variant-numeric: tabular-nums;
}
.bk-qty-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.bk-qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bk-qty-row label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
}
.bk-qty-input {
  width: 64px;
  text-align: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 6px;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: var(--transition-fast);
  outline: none;
}
.bk-qty-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-glow);
}
.bk-qty-input.has-value {
  border-color: rgba(6,214,160,0.5);
  color: var(--color-accent);
}

/* 잔량 초과 */
.bk-sale-item.over-limit {
  border-color: rgba(239,68,68,0.5);
}
.bk-sale-item.over-limit::before {
  content: '';
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 0;
  width: 3px;
  border-radius: var(--radius-full);
  background: var(--color-danger);
}

/* 판매 시트 — 정가 / 할인율 입력 행 */
.bk-sale-body-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
.bk-sale-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.bk-group-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.bk-group-unit {
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.bk-pct-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.bk-pct-select {
  width: 68px;
  text-align: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  padding: 6px 18px 6px 6px;
  font-size: 12px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  transition: var(--transition-fast);
  -webkit-appearance: none;
  appearance: none;
}
.bk-pct-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-glow);
  color: var(--text-primary);
}
.bk-pct-select option { background: var(--bg-card); }
.bk-pct-caret {
  position: absolute;
  right: 5px;
  font-size: 10px;
  color: var(--text-muted);
  pointer-events: none;
}

/* 금액 미리보기 */
.bk-sale-preview {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-variant-numeric: tabular-nums;
}
.bk-sale-preview strong { color: var(--color-accent); font-weight: 800; }

/* =============================================================
   9. 제품 카드
   ============================================================= */
.bk-product-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.bk-product-thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  object-fit: contain;
  background: var(--bg-elevated);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 20px;
}
.bk-product-body { flex: 1; min-width: 0; }
/* Row 1: 제품명(좌) + 가격(우) */
.bk-product-row1 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.bk-product-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bk-product-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  white-space: nowrap;
}
/* Row 2: 맛특징(좌) + 버튼(우) */
.bk-product-row2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 5px;
}
.bk-product-note {
  font-size: 12px;
  color: var(--text-secondary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bk-product-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* =============================================================
   10. 통계 탭 세그먼트 컨트롤
   ============================================================= */
.bk-seg-control {
  display: inline-flex;
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 3px;
}
.bk-seg-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 8px 20px;
  border-radius: calc(var(--radius-md) - 2px);
  font-size: 13px;
  font-weight: 600;
  transition: var(--transition-fast);
  white-space: nowrap;
}
.bk-seg-btn.active {
  background: var(--color-primary-glow);
  color: var(--color-primary);
}

/* =============================================================
   11. 빈 상태
   ============================================================= */
.bk-empty-state {
  padding: 48px 24px;
  text-align: center;
}
.bk-empty-icon {
  font-size: 48px;
  color: var(--text-muted);
  opacity: 0.4;
  margin-bottom: 16px;
  line-height: 1;
}
.bk-empty-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.bk-empty-desc {
  font-size: 13px;
  color: var(--text-muted);
}

/* =============================================================
   12. 잔량 표시 배지
   ============================================================= */
.bk-remaining-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  letter-spacing: 0.02em;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.bk-remaining-badge.ok    { background: rgba(16,185,129,0.15); color: var(--color-success); }
.bk-remaining-badge.warn  { background: rgba(245,158,11,0.15); color: var(--color-warning); }
.bk-remaining-badge.empty { background: rgba(239,68,68,0.15);  color: var(--color-danger); }

/* =============================================================
   13. 납품 입력 폼
   ============================================================= */
.bk-delivery-form {
  padding: 4px 0;
}
.bk-form-date-picker {
  width: 100%;
  background: var(--glass-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  padding: 10px 14px;
  font-size: 14px;
  transition: var(--transition-fast);
  outline: none;
  font-variant-numeric: tabular-nums;
}
.bk-form-date-picker:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--color-primary-glow);
}
.bk-form-date-picker::-webkit-calendar-picker-indicator { opacity: 0.6; }

.bk-delivery-lines {
  margin-top: 14px;
}
.bk-delivery-line {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.bk-delivery-line:last-child { border-bottom: none; }
.bk-delivery-line .bk-dl-product { flex: 1; min-width: 0; }
.bk-delivery-line .bk-dl-qty { width: 80px; flex-shrink: 0; }
.bk-delivery-line .bk-dl-price {
  width: 80px;
  flex-shrink: 0;
  text-align: right;
  color: var(--color-accent);
  font-weight: 600;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.bk-delivery-line .bk-dl-amount {
  width: 100px;
  flex-shrink: 0;
  text-align: right;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* =============================================================
   공통 폼 그룹 (로그인 등)
   ============================================================= */
.form-group { margin-bottom: 16px; }

/* =============================================================
   로그인 페이지 보강
   ============================================================= */
.login-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.login-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.logo-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #fff;
  font-size: 24px;
  box-shadow: 0 6px 20px var(--color-primary-glow);
}
.login-logo-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1.2;
  white-space: nowrap;
}
.login-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.login-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}
.login-btn {
  width: 100%;
  margin-top: 4px;
  padding: 13px 20px;
}

/* =============================================================
   반응형 — 최대 420px 미세 조정
   ============================================================= */
@media (max-width: 420px) {
  .bk-content { padding: 12px; }
  .bk-calendar { gap: 3px; padding: 0 10px 10px; }
  .bk-cal-cell { min-height: 58px; padding: 5px 2px; }
  .bk-cal-day { font-size: 13px; }
  .bk-cal-amount { font-size: 10px; }
  .bk-cal-nav-title { font-size: 17px; }
  .bk-topbar-title { font-size: 16px; }
  .bk-sale-item { padding: 14px; }
  .bk-seg-btn { padding: 8px 16px; }
  .bk-delivery-line .bk-dl-qty { width: 64px; }
  .bk-delivery-line .bk-dl-price { width: 64px; }
  .bk-delivery-line .bk-dl-amount { width: 84px; }
}

/* 초소형 (360px 이하) */
@media (max-width: 360px) {
  .bk-cal-amount { font-size: 9px; }
  .bk-qty-input { width: 56px; }
}

/* =============================================================
   14. 제품 관리 (products.js)
   ============================================================= */
.bk-form-label {
  color: var(--text-secondary);
  font-size: .8rem;
  margin-bottom: 6px;
  font-weight: 500;
}

/* 등록 모달 사진 미리보기 박스 */
.bk-photo-thumb-preview {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

/* 테이블 썸네일 */
.bk-product-thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: contain;
  display: block;
}
.bk-product-thumb--placeholder {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 1.2rem;
}

/* 맛의 특징 — 2줄 클램프 */
.bk-taste-note {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: .78rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* pb-20: 바닥 탭바 + 여유 공간 */
.pb-20 {
  padding-bottom: 5rem !important;
}

/* =============================================================
   15. 페이지 전환 애니메이션
   ============================================================= */
@keyframes bk-page-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bk-page-enter {
  animation: bk-page-in 0.22s var(--ease-out) both;
}

/* =============================================================
   16. 스켈레톤 로딩
   ============================================================= */
@keyframes bk-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.bk-skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-elevated) 25%,
    var(--bg-hover)    50%,
    var(--bg-elevated) 75%
  );
  background-size: 200% 100%;
  animation: bk-shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}
.bk-skeleton-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px;
}
.bk-skeleton-line {
  height: 14px;
  border-radius: var(--radius-sm);
}
.bk-skeleton-line.w-full  { width: 100%; }
.bk-skeleton-line.w-3-4   { width: 75%; }
.bk-skeleton-line.w-1-2   { width: 50%; }
.bk-skeleton-line.w-1-4   { width: 25%; }
.bk-skeleton-line.h-tall  { height: 20px; }
.bk-skeleton-line.h-short { height: 10px; }

/* 달력 셀 스켈레톤 */
.bk-cal-cell.skeleton {
  pointer-events: none;
}
.bk-cal-cell.skeleton .bk-cal-day {
  width: 20px;
  height: 16px;
  border-radius: var(--radius-xs);
}

/* =============================================================
   17. 버튼 ripple 효과 (탭 터치 피드백)
   ============================================================= */
.bk-tab { overflow: hidden; }
.bk-tab::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(14,165,233,0.15), transparent 70%);
  opacity: 0;
  transition: opacity 0.15s;
  border-radius: inherit;
}
.bk-tab:active::before { opacity: 1; }

/* =============================================================
   18. 납품 / 판매 달력 월 합계 바
   ============================================================= */
.bk-cal-monthly-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--glass-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin: 0 12px 12px;
}
.bk-cal-monthly-total .label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}
.bk-cal-monthly-total .value {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

/* 최근 목록 (캘린더 아래) */
.bk-recent-list {
  margin: 0 12px 16px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
}
.bk-recent-header {
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-subtle);
}
.bk-recent-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: var(--transition-fast);
}
.bk-recent-item:last-child { border-bottom: none; }
.bk-recent-item:hover { background: var(--glass-bg); }
.bk-recent-date {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.bk-recent-amount {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}
.bk-recent-chevron {
  font-size: 11px;
  color: var(--text-muted);
}

/* =============================================================
   19. 판매 시트 하단 합계 (sticky)
   ============================================================= */
.bk-sheet-total {
  position: sticky;
  bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  background: var(--bg-surface);
  border-top: 1px solid var(--border-light);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 50;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.bk-sheet-total .label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}
.bk-sheet-total .total-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

/* =============================================================
   20. 달력 도트 (납품=파랑, 판매=초록)
   ============================================================= */
.bk-cal-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-bottom: 4px;
  flex-shrink: 0;
}
.bk-cal-dot.delivery { background: var(--color-primary); }
.bk-cal-dot.sale     { background: var(--color-accent); }

/* =============================================================
   21. 입고 목록 카드 (inbound.js)
   ============================================================= */
.bk-inbound-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: var(--transition-fast);
  box-shadow: var(--shadow-card);
}
.bk-inbound-card:hover,
.bk-inbound-card:focus-visible {
  border-color: var(--border-light);
  background: var(--bg-elevated);
}
.bk-inbound-card:active { transform: scale(0.99); }
.bk-inbound-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-primary-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: 20px;
  flex-shrink: 0;
}
.bk-inbound-card-body { flex: 1; min-width: 0; }
.bk-inbound-date {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.bk-inbound-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.bk-inbound-amount {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* =============================================================
   22. 모달 다크 오버라이드 (Bootstrap 5)
   ============================================================= */
.modal-content {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--text-primary) !important;
}
.modal-header {
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: 16px 20px !important;
}
.modal-footer {
  border-top: 1px solid var(--border-subtle) !important;
  padding: 12px 20px !important;
}
.modal-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}
.btn-close {
  opacity: 0.5 !important;
}
.btn-close:hover { opacity: 0.8 !important; }
.modal-backdrop { background: rgba(15,23,42,0.5) !important; }

/* Bootstrap select/input inside modals */
.modal .form-select,
.modal .form-control {
  background-color: var(--bg-elevated) !important;
  border-color: var(--border-light) !important;
  color: var(--text-primary) !important;
}
.modal .form-select:focus,
.modal .form-control:focus {
  border-color: var(--border-focus) !important;
  box-shadow: 0 0 0 3px var(--color-primary-glow) !important;
}
.modal .form-select option { background: var(--bg-card); color: var(--text-primary); }

/* Bootstrap 버튼 오버라이드 */
.btn-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
  border-color: transparent !important;
  font-weight: 600 !important;
}
.btn-secondary {
  background: var(--glass-bg) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
}
.btn-secondary:hover {
  background: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}
.btn-danger {
  background: rgba(239,68,68,0.18) !important;
  border-color: rgba(239,68,68,0.3) !important;
  color: var(--color-danger) !important;
  font-weight: 600 !important;
}
.btn-danger:hover {
  background: rgba(239,68,68,0.28) !important;
}

/* =============================================================
   23. 납품 상세 모달 footer 합계행
   ============================================================= */
.bk-total-row td {
  font-weight: 800 !important;
  color: var(--color-accent) !important;
  border-top: 1px solid var(--border-light) !important;
  padding-top: 14px !important;
  font-variant-numeric: tabular-nums;
}

/* =============================================================
   24. 통계 요약 카드 hover
   ============================================================= */
.bk-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 14px;
  transition: var(--transition-fast);
}
.bk-stat-card:hover {
  border-color: var(--border-light);
  background: var(--bg-elevated);
}

/* =============================================================
   25. 매대관리 버튼
   ============================================================= */
.bk-shelf-btn {
  background: linear-gradient(135deg, #16a34a, #15803d) !important;
  border-color: transparent !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: .78rem;
  border-radius: 20px !important;
  padding: 5px 12px !important;
  box-shadow: 0 2px 8px rgba(22,163,74,0.35);
}
.bk-shelf-btn:hover {
  box-shadow: 0 4px 14px rgba(22,163,74,0.5);
  filter: brightness(1.08);
}

/* =============================================================
   26. 매대관리 모달 — 제품 카드 with 토글
   ============================================================= */
.bk-shelf-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
  transition: border-color .18s;
}
.bk-shelf-card.is-on {
  border-color: #16a34a;
  background: rgba(22,163,74,0.06);
}
.bk-shelf-card-thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  object-fit: contain;
  background: var(--bg-elevated);
  flex-shrink: 0;
}
.bk-shelf-card-placeholder {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 1.5rem;
  flex-shrink: 0;
}
.bk-shelf-card-body {
  flex: 1;
  min-width: 0;
}
.bk-shelf-card-name {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bk-shelf-card-note {
  font-size: .74rem;
  color: var(--text-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bk-shelf-switch .form-check-input {
  width: 2.6em;
  height: 1.35em;
  cursor: pointer;
  background-color: var(--bg-elevated);
  border-color: var(--border-light);
}
.bk-shelf-switch .form-check-input:checked {
  background-color: #16a34a;
  border-color: #16a34a;
}
.bk-shelf-on-badge {
  font-size: .7rem;
  font-weight: 700;
  color: #16a34a;
  background: rgba(22,163,74,0.12);
  border-radius: 8px;
  padding: 1px 7px;
  margin-left: 6px;
}

/* =============================================================
   25. 모달 테이블 다크 테마 픽스 + 스크롤 보장
   ============================================================= */

/* Bootstrap .table 기본색(#212529)이 다크 배경 위에서 안 보이는 문제 수정 */
.modal .table {
  --bs-table-color: var(--text-primary);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--border-subtle);
  --bs-table-striped-bg: var(--glass-bg);
}
.modal .table > :not(caption) > * > * {
  color: var(--text-primary);
  white-space: nowrap;
}
.modal .table thead > tr > th {
  color: var(--text-secondary);
  background-color: var(--bg-elevated);
  border-bottom: 1px solid var(--border-light) !important;
  font-size: .73rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* 테이블 래퍼 — 가로 스크롤 허용 */
.table-dark-custom {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
.table-dark-custom tbody,
.table-dark-custom td,
.table-dark-custom tfoot,
.table-dark-custom th,
.table-dark-custom thead,
.table-dark-custom tr { border-style: unset; }

/* 납품 폼 소계 텍스트 줄바꿈 방지 */
.modal .bk-dl-sub { white-space: nowrap; }

/* modal-dialog-scrollable 세로 스크롤 보장 (dvh 미지원 브라우저 fallback 포함) */
.modal-dialog-scrollable .modal-content {
  max-height: calc(100vh  - 3.5rem) !important;
  max-height: calc(100dvh - 3.5rem) !important;
  overflow: hidden !important;
}
.modal-dialog-scrollable .modal-body {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* 납품 등록/수정 폼 — <form>이 modal-body+footer를 감싸
   Bootstrap scrollable 의 flex 체인이 끊기는 문제 수정:
   form을 flex 컨테이너로 만들어 modal-body만 세로 스크롤되게 함 */
#bk-del-form-modal .modal-content > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
#bk-del-form-modal .modal-content > form > .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* =============================================================
   반응형 보완
   ============================================================= */
@media (max-width: 420px) {
  .bk-inbound-card { padding: 12px; gap: 10px; }
  .bk-inbound-card-icon { width: 38px; height: 38px; font-size: 18px; }
  .bk-sheet-total .total-value { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .bk-page-enter { animation: none; }
  .bk-skeleton   { animation: none; }
}

/* =============================================================
   통계 차트 카드
   ============================================================= */
.bk-summary-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 14px;
}
.bk-summary-label {
  font-size: .75rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.bk-summary-value {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.bk-chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 16px 12px 12px;
  margin-bottom: 14px;
}
.bk-chart-label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: .03em;
  margin-bottom: 8px;
}

/* =============================================================
   16. 납품 폼 품목 카드
   ============================================================= */
.bk-del-item {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-card);
}
.bk-del-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.bk-del-item-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.bk-del-item-price {
  font-size: 12px;
  color: var(--color-accent);
  font-weight: 600;
  flex-shrink: 0;
  white-space: nowrap;
}
.bk-del-item-body {
  display: flex;
  align-items: center;
  gap: 6px;
}
.bk-del-body-label {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
  flex-shrink: 0;
}
.bk-del-body-unit {
  font-size: 11px;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.bk-del-item-body .bk-dl-sub {
  margin-left: auto;
  font-size: .85rem;
  color: var(--color-accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.form-control { padding:0.7rem !important; font-size:.82rem !important;}
.form-select-sm, .form-select { padding:0.7rem !important; font-size:.82rem !important;}

/* =============================================================
   27. 블로그 링크 카드 (stats 상단)
   ============================================================= */
.bk-blog-strip {
  padding: 0px 16px 4px;
}
.bk-blog-strip-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.bk-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.bk-blog-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 16px 8px 14px;
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, #fff9f3, #fdefd8);
  border: 1px solid rgba(224,138,60,.22);
  text-decoration: none;
  text-align: center;
  box-shadow: 0 2px 8px rgba(90,58,34,.07);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
}
.bk-blog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(90,58,34,.14);
  border-color: rgba(224,138,60,.5);
}
.bk-blog-card:active { transform: scale(.96); }
.bk-blog-card-icon { font-size: 24px; line-height: 1; }
.bk-blog-card-label {
  font-size: 12px;
  font-weight: 700;
  color: #5a3a22;
  letter-spacing: -.01em;
}
.bk-blog-card-sub {
  font-size: 10px;
  color: #b8977e;
  font-weight: 500;
  line-height: 1.3;
}

/* 바코드 모달 열릴 때 배경 흐림 (모달은 backdrop 위라 선명 유지) */
body.bk-modal-blur .modal-backdrop {
  background-color: rgba(15, 23, 42, .25);
  opacity: 1;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}