/* ═══════════════════════════════════════════════════════════════
   압도마케팅 — 애플 디자인 오버레이 (고객 + 관리자 공통)
   base.html에서 style.css 뒤에 항상 로드됨. 덮어쓰기 전용 파일.
   (2026-08-14 admin-apple.css로 관리자만 적용 → 같은 날 고객까지 확대하며 개명)
   근거: apple-design 스킬(WWDC Designing Fluid Interfaces 등).
   핵심 적용 원칙:
   §1 응답성(누르는 순간 피드백) · §7 공간 일관성 · §12 반투명 재질
   §13 피드백 절제 · §14 모션 축소 대응 · §15 타이포(자간·숫자 정렬)
   ═══════════════════════════════════════════════════════════════ */

/* ── 0) 토큰: 애플 시스템 컬러 + 소재(헤어라인+부드러운 그림자) ── */
:root {
  --blue: #007aff;            /* iOS system blue */
  --blue-dark: #0064d2;
  --blue-soft: #eaf3ff;
  --red: #ff3b30;             /* iOS system red */
  --hairline: rgba(0, 19, 43, 0.08);
  --material: rgba(255, 255, 255, 0.72);
  /* 그림자: 얇은 링(헤어라인) + 낮은 접촉 그림자 + 넓고 옅은 앰비언트 */
  --shadow: 0 0 0 1px rgba(0, 19, 43, 0.04), 0 1px 2px rgba(0, 19, 43, 0.04), 0 8px 24px rgba(0, 19, 43, 0.05);
  --shadow-hover: 0 0 0 1px rgba(0, 19, 43, 0.05), 0 2px 6px rgba(0, 19, 43, 0.06), 0 16px 40px rgba(0, 19, 43, 0.10);
}
:root[data-theme="dark"] {
  --blue: #0a84ff;
  --blue-dark: #409cff;
  --blue-soft: #16283f;
  --red: #ff453a;
  --hairline: rgba(255, 255, 255, 0.09);
  --material: rgba(18, 22, 30, 0.72);
  --shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 2px 10px rgba(0, 0, 0, 0.45);
  --shadow-hover: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 8px 28px rgba(0, 0, 0, 0.6);
}

/* ── 1) 타이포 — §15: 큰 글자는 자간 음수, 숫자는 자릿수 고정폭 ── */
.admin-section h2, .list-section h2 { letter-spacing: -0.022em; }
.rev-value, .ov-num, .stat-value, .credit-value,
.count-pill, .tab-pill, .ledger-amt,
.dep-log-table td.amt, .rev-day-amt, .rev-rank-amt,
.deposit-expect .amt, .detail-grid b.money, .fld-deposit-total,
.modal-amount b,
/* 고객: 결제 금액·패키지 가격·잔여 건수 */
.amt-row b, .amt-total, .amt-account > b, .pkg-price, .pkg-original, .pkg-count,
.info-amt-rows b, .credit-badge, .tracking-no {
  font-variant-numeric: tabular-nums;
}
.rev-value { letter-spacing: -0.02em; }

/* ── 2) 상단바 — §12: 반투명 재질 + 헤어라인(굵은 경계선 대신) ── */
.topnav {
  background: var(--material);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: none;
  box-shadow: 0 1px 0 var(--hairline);
}
:root[data-theme="dark"] .topnav { background: var(--material); }

/* ── 3) 관리자 탭 — 애플 세그먼트 컨트롤 스타일 ──
   (파란 채움 → 회색 트랙 위에 떠 있는 흰 세그먼트) */
.admin-tabs {
  background: rgba(120, 120, 128, 0.12);
  box-shadow: none;
  border-radius: 14px;
  padding: 4px;
  gap: 2px;
}
.admin-tab {
  border-radius: 11px;
  font-weight: 600;
  transition: background 0.18s ease-out, color 0.18s ease-out, transform 0.1s ease-out;
}
.admin-tab:hover { background: rgba(120, 120, 128, 0.10); color: var(--ink); }
.admin-tab:active { transform: scale(0.97); }   /* §1: 누르는 순간 반응 */
.admin-tab.is-active,
.admin-tab.is-active:hover {
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05), 0 3px 8px rgba(0, 0, 0, 0.10);
}
.admin-tab .tab-pill { background: rgba(120, 120, 128, 0.16); }
.admin-tab.is-active .tab-pill { background: var(--blue); color: #fff; }
:root[data-theme="dark"] .admin-tabs { background: rgba(120, 120, 128, 0.16); }
:root[data-theme="dark"] .admin-tab.is-active,
:root[data-theme="dark"] .admin-tab.is-active:hover {
  background: #2a3140;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 3px 8px rgba(0, 0, 0, 0.35);
}

/* 탭 전환 시 패널이 살짝 떠오르며 등장 (제스처 없는 전환이라 고정 커브 OK) */
.tab-panel.is-active { animation: panel-in 0.35s cubic-bezier(0.25, 1, 0.36, 1); }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ── 4) 지난 내역 서브탭·검색 — 같은 세그먼트 문법으로 통일(§7) ── */
.past-subtabs { background: rgba(120, 120, 128, 0.12); border-radius: 12px; }
.past-subtab { transition: background 0.18s ease-out, color 0.18s ease-out, transform 0.1s ease-out; }
.past-subtab:active { transform: scale(0.97); }
.past-search { transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out; }
.past-search:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3.5px rgba(0, 122, 255, 0.22);
}

/* ── 5) 버튼 — §1: pointer-down 즉시 피드백, 전부 통일 ── */
.btn-confirm, .btn-cancel, .btn-ghost, .btn-copy, .btn-photo, .btn-order,
.btn-bulk-done, .btn-roster-dl, .btn-revert, .btn-primary, .btn-danger,
.btn-expo, .btn-x, .btn-x-sm, .btn-done-sm, .btn-edit-sm, .btn-pay,
.name-edit button, .pw-reset-row button, .tax-save, .adjust-apply, .rev-nav-btn, .mn-btn {
  transition: background 0.15s ease-out, color 0.15s ease-out,
              border-color 0.15s ease-out, transform 0.1s ease-out,
              box-shadow 0.15s ease-out, filter 0.15s ease-out;
}
.btn-confirm:active, .btn-cancel:active, .btn-ghost:active, .btn-copy:active,
.btn-photo:active, .btn-order:active, .btn-bulk-done:active, .btn-roster-dl:active,
.btn-revert:active, .btn-primary:active, .btn-danger:active, .btn-expo:active,
.btn-done-sm:active, .btn-edit-sm:active, .btn-pay:active,
.name-edit button:active, .pw-reset-row button:active, .tax-save:active, .adjust-apply:active {
  transform: scale(0.96);
}
.btn-x:active, .btn-x-sm:active { transform: scale(0.88); }

/* 요약 카드(할 일 한눈에): 호버 부양 + 프레스 눌림 */
.ov-card { transition: transform 0.12s ease-out, box-shadow 0.15s ease-out, border-color 0.15s ease-out; }
.ov-card:active { transform: translateY(0) scale(0.98); }

/* ── 6) 카드 — 헤어라인 링이 포함된 새 그림자 토큰이 전체 적용됨.
   전달 전/완료 그룹 박스는 테두리를 얇게(1px) 정돈 ── */
.fwd-group { border-width: 1px; }
.subgroup-title { border-bottom-width: 1px; }

/* 표 행 호버 — 어디를 보고 있는지 조용히 알려줌 */
.dep-log-table tbody tr:hover td { background: rgba(120, 120, 128, 0.06); }

/* ── 7) 모달 — §12: 스크림에 블러(뒤를 밀어냄), 애플 시트 커브 등장 ── */
.modal-overlay {
  background: rgba(0, 0, 0, 0.32);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
}
.modal, .modal-box {
  animation: sheet-in 0.34s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 0 0 1px var(--hairline), 0 24px 80px rgba(0, 0, 0, 0.32);
}
@keyframes sheet-in {
  from { opacity: 0; transform: scale(0.94) translateY(10px); }
  to   { opacity: 1; transform: none; }
}
/* §13 절제: 확인 버튼의 무한 펄스 제거 — 과한 피드백은 신뢰를 깎음 */
.modal-actions .btn-primary { animation: none; }

/* ── 8) 떠 있는 UI(세로 탭·카드 이동 버튼) — 반투명 재질로 ── */
.side-tab {
  background: var(--material);
  color: var(--blue);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 0 0 1px var(--hairline), 0 8px 28px rgba(0, 0, 0, 0.14);
  transition: background 0.18s ease-out, color 0.18s ease-out, padding-left 0.18s ease-out;
}
.side-tab:hover { background: var(--blue); color: #fff; }
.card-nav-btn {
  background: var(--material);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: none;
  box-shadow: 0 0 0 1px var(--hairline), 0 8px 24px rgba(0, 0, 0, 0.16);
}

/* ── 9) 매출 현황 — 오늘 칸을 새 파랑으로 ── */
.rev-cell.today {
  background: linear-gradient(135deg, #007aff 0%, #3395ff 100%);
  box-shadow: 0 6px 18px rgba(0, 122, 255, 0.28);
}
:root[data-theme="dark"] .rev-cell.today {
  background: linear-gradient(135deg, #0a84ff 0%, #3f9bff 100%);
}

/* ── 10) 고객 신청·충전 화면 다듬기 ── */
/* 입력칸 초점: 테두리색만 → 부드러운 파란 링 추가 (지금 어디 쓰는지 또렷하게) */
.field input:focus, .field textarea:focus {
  box-shadow: 0 0 0 3.5px rgba(0, 122, 255, 0.18);
}
/* 결제방식 선택(잔여 차감/입금): 누르는 순간 눌림 + 선택 전환 부드럽게 */
.seg-item span { transition: background 0.15s ease-out, color 0.15s ease-out, border-color 0.15s ease-out, transform 0.1s ease-out; }
.seg-item:active span { transform: scale(0.98); }
/* 입금 확인 모달 체크박스 칸도 동일한 프레스 감각 */
.modal-check { transition: border-color 0.15s ease-out, background 0.15s ease-out, transform 0.1s ease-out; }
.modal-check:active { transform: scale(0.98); }
/* 파일 선택 칸 */
.file-input { transition: border-color 0.15s ease-out, background 0.15s ease-out, transform 0.1s ease-out; }
.file-input:active { transform: scale(0.99); }
/* 잔여 건수 히어로 — 새 파랑으로 통일(§7 일관성) */
.credit-hero {
  background: linear-gradient(135deg, var(--blue) 0%, #3395ff 100%);
  box-shadow: 0 8px 24px rgba(0, 122, 255, 0.28);
}
:root[data-theme="dark"] .credit-hero { background: linear-gradient(135deg, #0a84ff 0%, #3f9bff 100%); }
/* 카톡 문의 버튼 — 프레스 피드백 */
.kakao-fab-btn { transition: transform 0.12s ease-out; }
.kakao-fab:active .kakao-fab-btn { transform: scale(0.94); }

/* ── 11) 키보드 초점 — 어디에 있는지 항상 보이게 ── */
:where(button, a, input, select, textarea, summary):focus-visible {
  outline: 2.5px solid var(--blue);
  outline-offset: 2px;
}
/* 파란 hero 카드 안에서는 파란 테두리가 파란 배경에 묻힌다 → 흰 테두리로 */
.credit-hero :focus-visible { outline-color: #fff; }

/* ── 12) 접근성 — §14 ── */
/* 모션 축소: 이동·확대 대신 짧은 페이드만 */
@media (prefers-reduced-motion: reduce) {
  .tab-panel.is-active, .modal, .modal-box { animation: fade-only 0.2s ease; }
  @keyframes fade-only { from { opacity: 0; } to { opacity: 1; } }
  .admin-tab:active, .past-subtab:active, .ov-card:active,
  .btn-confirm:active, .btn-cancel:active, .btn-ghost:active, .btn-copy:active,
  .btn-photo:active, .btn-order:active, .btn-bulk-done:active, .btn-roster-dl:active,
  .btn-revert:active, .btn-primary:active, .btn-danger:active, .btn-expo:active,
  .btn-x:active, .btn-x-sm:active,
  .seg-item:active span, .modal-check:active, .file-input:active,
  .kakao-fab:active .kakao-fab-btn { transform: none; }
  .ov-card:hover { transform: none; }
}
/* 투명도 축소: 반투명 재질을 불투명하게 */
@media (prefers-reduced-transparency: reduce) {
  .topnav, .side-tab, .card-nav-btn {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--card);
  }
  .modal-overlay { -webkit-backdrop-filter: none; backdrop-filter: none; }
}