/* ================================================================
   크레딧박스 공용 스킨 — 아이폰 느낌 + 고급 마감.
   각 화면의 기존 규칙 위에 덧입히는 층이라 기능(표시/숨김/배치)은 그대로 둔다.
   dashboard.html은 자체 스킨을 갖고 있고, 이 파일은 나머지 화면용이다.
   ================================================================ */

@font-face {
  font-family: "Pretendard Variable";
  src: url("/frontend/assets/fonts/PretendardVariable.woff2") format("woff2-variations");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

:root {
  --ios-blue: #007AFF;
  --ios-blue-deep: #0A66D0;
  --ios-green: #34C759;
  --ios-orange: #FF9500;
  --ios-red: #FF3B30;
  --ios-indigo: #5856D6;
  --ios-purple: #AF52DE;
  --ios-teal: #30B0C7;
  --ios-brown: #A2845E;
  --ios-bg: #F2F2F7;
  --ios-label: #1C1C1E;
  --ios-label-2: #48484A;
  --ios-muted: #8E8E93;
  --ios-fill: rgba(120, 120, 128, 0.10);
  --ios-fill-strong: rgba(120, 120, 128, 0.16);
  --ios-sep: rgba(60, 60, 67, 0.10);
  --ios-glass: rgba(248, 248, 250, 0.85);
  /* 예전 변수 갈아끼우기 */
  --brand: var(--ios-blue);
  --brand-dark: var(--ios-blue-deep);
  --admin-blue: #F8F8FA;
  --admin-blue-hover: rgba(120, 120, 128, 0.10);
  --admin-blue-active: rgba(120, 120, 128, 0.16);
  --line: #E5E5EA;
  --line-strong: #D1D1D6;
  --text: var(--ios-label-2);
  --text-strong: var(--ios-label);
  --muted: var(--ios-muted);
  --bg: var(--ios-bg);
  --panel: #FFFFFF;
  --danger: var(--ios-red);
  --success: #248A3D;
  --warning: #C93400;
  --shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 18px 44px rgba(15, 23, 42, 0.10);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.03), 0 10px 30px rgba(15, 23, 42, 0.07);
}

html, body {
  background:
    radial-gradient(1100px 700px at 88% -8%, rgba(0, 122, 255, 0.055), transparent 60%),
    radial-gradient(900px 640px at -6% 108%, rgba(88, 86, 214, 0.045), transparent 55%),
    linear-gradient(180deg, #F5F5F9 0%, #F1F2F7 100%) !important;
  background-attachment: fixed !important;
}

body {
  font-family: "Pretendard Variable", -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI Variable Text", "Segoe UI", "Malgun Gothic", sans-serif !important;
  color: var(--ios-label-2);
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- 유리 상단바 / 사이드바 ---------- */
.topbar {
  background: var(--ios-glass) !important;
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 1px 12px rgba(15, 23, 42, 0.04);
  color: var(--ios-label);
}

.brand { color: var(--ios-label) !important; letter-spacing: -0.03em; font-weight: 600; }

.welcome-chip {
  background: var(--ios-fill) !important;
  border: 0 !important;
  color: var(--ios-label-2) !important;
  font-weight: 600;
  font-size: 13.5px;
  box-shadow: none !important;
  letter-spacing: -0.01em;
}

.admin-sidebar, .admin-sidebar-controls, .admin-sidebar-brand-panel {
  background: var(--ios-glass) !important;
  background-color: var(--ios-glass) !important;
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
}
.admin-sidebar { border-right: 1px solid var(--ios-sep); }
.admin-sidebar-brand { background: transparent !important; }
.admin-sidebar-brand-panel { background: var(--ios-fill) !important; border-radius: 12px; }
.admin-sidebar-brand-text { color: var(--ios-label) !important; font-weight: 600; letter-spacing: -0.02em; }
.admin-sidebar-brand-glyph, .admin-sidebar-brand-compact { color: var(--ios-blue) !important; }

.admin-sidebar-menu-btn {
  background: var(--ios-fill) !important;
  color: var(--ios-label) !important;
  font-weight: 700;
}
.admin-sidebar-menu-btn:hover { background: var(--ios-fill-strong) !important; }

.admin-sidebar-toggle {
  color: var(--ios-label) !important;
  font-weight: 700;
  font-size: 14px;
  border-radius: 12px;
  letter-spacing: -0.01em;
  background: transparent !important;
}
.admin-sidebar-toggle:hover { background: var(--ios-fill) !important; }
.admin-sidebar-group:not(.is-collapsed) > .admin-sidebar-toggle { background: var(--ios-fill) !important; }
.admin-sidebar-toggle-icon { color: var(--ios-muted) !important; font-size: 12px; }

.admin-sidebar-submenu {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid var(--ios-sep);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 10px 26px rgba(15, 23, 42, 0.06);
}

/* 메뉴 이름은 한 줄로만 보이고, 길면 끝을 …으로 줄인다(전체 이름은 마우스를 올리면 보인다).
   그림(이모지)은 폭을 고정해 두어 글자 시작점이 세로로 딱 맞는다. */
.admin-nav-label { display:flex; align-items:center; min-width:0; flex:1 1 auto; text-align:left; }
.admin-nav-emoji { flex:0 0 18px; width:18px; margin-right:7px; text-align:center; font-size:13px; line-height:1; }
.admin-nav-text { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-nav-btn, .admin-sidebar-toggle { min-width:0; }
.admin-nav-meta { flex:0 0 auto; }

.admin-nav-btn {
  border-radius: 10px;
  color: var(--ios-label-2) !important;
  font-weight: 600;
  font-size: 13.5px;
}
.admin-nav-btn:hover { background: var(--ios-fill) !important; transform: none; }
.admin-nav-btn.active {
  background: color-mix(in srgb, currentColor 13%, transparent) !important;
  font-weight: 700;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 25%, transparent);
}
.admin-nav-meta { font-size: 12px; font-weight: 600; color: var(--ios-muted); }

/* 지금 보는 메뉴가 든 묶음 제목 강조 */
.admin-sidebar-group:has(.admin-nav-btn.active) > .admin-sidebar-toggle {
  color: var(--ios-blue) !important;
  font-weight: 600;
  background: rgba(0, 122, 255, 0.10) !important;
}
.admin-sidebar-group:has(.admin-nav-btn.active) > .admin-sidebar-toggle .admin-sidebar-toggle-icon {
  color: var(--ios-blue) !important;
}

/* 고객 상태 메뉴 색 */
.admin-nav-btn.customer-menu-new { color: var(--ios-blue) !important; }
.admin-nav-btn.customer-menu-docs-ready { color: var(--ios-teal) !important; }
.admin-nav-btn.customer-menu-in-progress { color: var(--ios-indigo) !important; }
.admin-nav-btn.customer-menu-ready { color: var(--ios-orange) !important; }
.admin-nav-btn.customer-menu-done { color: var(--ios-green) !important; }
.admin-nav-btn.customer-menu-hold { color: var(--ios-brown) !important; }
.admin-nav-btn.customer-menu-seal-making { color: #d6336c !important; }
.admin-nav-btn.customer-menu-cancel { color: var(--ios-red) !important; }
.admin-nav-btn.customer-menu-payment { color: var(--ios-purple) !important; }

/* ---------- 제목 ---------- */
.hero h1, h1 { color: var(--ios-label); font-weight: 600; letter-spacing: -0.035em; }
.hero p { color: var(--ios-muted); }

/* ---------- 카드 ---------- */
.card {
  background: linear-gradient(180deg, #FFFFFF 0%, #FCFCFE 100%) !important;
  border: 1px solid rgba(15, 23, 42, 0.055) !important;
  border-radius: 22px !important;
  box-shadow:
    0 1px 1px rgba(15, 23, 42, 0.03),
    0 4px 12px rgba(15, 23, 42, 0.035),
    0 18px 46px rgba(15, 23, 42, 0.055) !important;
}
.card-title { color: var(--ios-label); font-weight: 600; letter-spacing: -0.025em; }
.card-subtitle { color: var(--ios-muted); }
.card h2 { color: var(--ios-label); letter-spacing: -0.025em; }

/* ---------- 버튼 ---------- */
.btn {
  border: 0 !important;
  background: var(--ios-fill);
  color: var(--ios-blue);
  border-radius: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.22s cubic-bezier(0.22, 1, 0.36, 1), transform 0.12s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s;
}
.btn:hover { background: var(--ios-fill-strong); }
.btn:active { transform: scale(0.96); }
.btn.primary {
  background: linear-gradient(180deg, #2E96FF 0%, #007AFF 100%) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 2px rgba(0, 0, 0, 0.10), 0 7px 18px rgba(0, 122, 255, 0.32);
}
.btn.primary:hover { background: linear-gradient(180deg, #2790FF 0%, #0A74EE 100%) !important; }
.btn.success {
  background: linear-gradient(180deg, #46D368 0%, #2FB853 100%) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 16px rgba(52, 199, 89, 0.30);
}
.btn.warning {
  background: linear-gradient(180deg, #FFA426 0%, #F58E00 100%) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 16px rgba(255, 149, 0, 0.28);
}
.btn.danger {
  background: rgba(255, 59, 48, 0.12) !important;
  color: var(--ios-red) !important;
}
.btn.danger:hover { background: rgba(255, 59, 48, 0.2) !important; }
.btn.ghost { background: transparent; color: var(--ios-muted); }
.btn.ghost:hover { background: var(--ios-fill); }
.btn:disabled { cursor: not-allowed; opacity: 0.45; }

.logout-btn {
  border: 0 !important;
  background: rgba(0, 122, 255, 0.12) !important;
  color: var(--ios-blue) !important;
  font-weight: 600 !important;
}
.logout-btn:hover { background: rgba(0, 122, 255, 0.18) !important; }

/* ---------- 입력칸 ---------- */
input[type="text"], input[type="date"], input[type="password"], input[type="number"],
input[type="search"], input[type="tel"], input[type="file"], select, textarea {
  border: 1px solid transparent !important;
  background: var(--ios-fill) !important;
  border-radius: 12px !important;
  color: var(--ios-label) !important;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
input[type="text"]:focus, input[type="date"]:focus, input[type="password"]:focus,
input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus,
select:focus, textarea:focus {
  outline: none !important;
  background: #fff !important;
  border-color: rgba(0, 122, 255, 0.5) !important;
  box-shadow: 0 0 0 3.5px rgba(0, 122, 255, 0.18) !important;
}
::placeholder { color: var(--ios-muted); }
.field label { color: var(--ios-label); font-weight: 700; }
.hint { color: var(--ios-muted); }

/* ---------- 표 ---------- */
.table-wrap {
  border: 1px solid var(--ios-sep) !important;
  border-radius: 14px !important;
  background: #fff;
}

/* 표 감싸개는 반드시 스크롤이 살아 있어야 한다.
   hidden 으로 두면 둥근 모서리는 얻지만 넘친 부분에 손이 닿지 않는다.
   실제로 발급처 담당관리(346줄)에서 여덟 줄만 보이고 아래로 못 내려갔고,
   창을 조금만 줄이면 표 오른쪽 열이 그냥 잘려 나갔다.
   auto 도 모서리는 똑같이 깎아주고, 넘칠 때만 스크롤막대가 생긴다.
   감싸개 이름이 화면마다 달라 셋 다 적는다
   (.table-shell = 고정서류·최초출력, .issue-table-wrap = OCR 처리 화면).
   생김새는 각 화면 것을 그대로 두고 스크롤만 되살린다. */
.table-wrap,
.table-shell,
.issue-table-wrap {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
th {
  background: #F9F9FB !important;
  color: var(--ios-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--ios-sep) !important;
  padding: 9px 12px;
}
td {
  border-bottom: 1px solid var(--ios-sep) !important;
  color: var(--ios-label-2);
  font-size: 13.5px;
  padding: 9px 12px;
  font-variant-numeric: tabular-nums;
}
tbody tr { transition: background 0.12s ease; }
tbody tr:hover { background: rgba(120, 120, 128, 0.05); }
tbody tr:last-child td { border-bottom: 0 !important; }

/* ---------- 칩·배지·상태줄 ---------- */
.segment-chip, .tab-chip {
  border: 0 !important;
  background: var(--ios-fill) !important;
  color: var(--ios-label-2) !important;
  font-weight: 600 !important;
}
.segment-chip:hover, .tab-chip:hover { background: var(--ios-fill-strong) !important; }
.segment-chip.active, .tab-chip.active {
  background: var(--ios-label) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.badge, .mini-badge, .chip, .summary-chip { border-radius: 999px; font-weight: 600; }
.status-line.success { color: #248A3D !important; }
.status-line.error { color: var(--ios-red) !important; }

/* ---------- 모달 ---------- */
.modal-overlay, .customer-modal, .pay-modal {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.modal-card, .customer-modal-card, .pay-modal-box {
  border-radius: 22px !important;
  border: 1px solid rgba(60, 60, 67, 0.08) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 32px 90px rgba(0, 0, 0, 0.28) !important;
}

/* ---------- 스크롤바·선택 ---------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb {
  background: rgba(120, 120, 128, 0.28);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(120, 120, 128, 0.45); border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }
::selection { background: rgba(0, 122, 255, 0.18); }

/* ---------- 숫자 ---------- */
.stat-number, .summary-value { font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

/* ---------- 로그인 화면 전용 ---------- */
.submit-btn {
  background: linear-gradient(180deg, #2E96FF 0%, #007AFF 100%) !important;
  border: 0 !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 2px rgba(0, 0, 0, 0.10), 0 7px 18px rgba(0, 122, 255, 0.32);
  transition: transform 0.12s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s;
}
.submit-btn:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 1px 2px rgba(0,0,0,0.10), 0 9px 22px rgba(0, 122, 255, 0.40); }
.submit-btn:active { transform: scale(0.97); }

/* ---------- 메뉴 항목 고유색 ---------- */
.admin-nav-btn.menu-pink, .admin-nav-btn.menu-pink .nav-meta, .admin-nav-btn.menu-pink .admin-nav-meta { color: #E0246E !important; }
.admin-nav-btn.menu-pink .nav-meta, .admin-nav-btn.menu-pink .admin-nav-meta { background: rgba(255, 45, 85, 0.12) !important; border-radius: 999px; padding: 2px 8px; }
.admin-nav-btn.menu-cyan, .admin-nav-btn.menu-cyan .nav-meta, .admin-nav-btn.menu-cyan .admin-nav-meta { color: #0891B2 !important; }
.admin-nav-btn.menu-cyan .nav-meta, .admin-nav-btn.menu-cyan .admin-nav-meta { background: rgba(50, 173, 230, 0.14) !important; border-radius: 999px; padding: 2px 8px; }
.admin-nav-btn.menu-amber, .admin-nav-btn.menu-amber .nav-meta, .admin-nav-btn.menu-amber .admin-nav-meta { color: #B77400 !important; }
.admin-nav-btn.menu-amber .nav-meta, .admin-nav-btn.menu-amber .admin-nav-meta { background: rgba(255, 159, 10, 0.16) !important; border-radius: 999px; padding: 2px 8px; }
.admin-nav-btn.menu-red, .admin-nav-btn.menu-red .nav-meta, .admin-nav-btn.menu-red .admin-nav-meta { color: #E5342A !important; }
.admin-nav-btn.menu-red .nav-meta, .admin-nav-btn.menu-red .admin-nav-meta { background: rgba(255, 59, 48, 0.12) !important; border-radius: 999px; padding: 2px 8px; }
.admin-nav-btn.menu-purple, .admin-nav-btn.menu-purple .nav-meta, .admin-nav-btn.menu-purple .admin-nav-meta { color: #9D3FD4 !important; }
.admin-nav-btn.menu-purple .nav-meta, .admin-nav-btn.menu-purple .admin-nav-meta { background: rgba(175, 82, 222, 0.12) !important; border-radius: 999px; padding: 2px 8px; }
.admin-nav-btn.menu-teal, .admin-nav-btn.menu-teal .nav-meta, .admin-nav-btn.menu-teal .admin-nav-meta { color: #0E7490 !important; }
.admin-nav-btn.menu-teal .nav-meta, .admin-nav-btn.menu-teal .admin-nav-meta { background: rgba(48, 176, 199, 0.14) !important; border-radius: 999px; padding: 2px 8px; }
.admin-nav-btn.menu-green, .admin-nav-btn.menu-green .nav-meta, .admin-nav-btn.menu-green .admin-nav-meta { color: #238A44 !important; }
.admin-nav-btn.menu-green .nav-meta, .admin-nav-btn.menu-green .admin-nav-meta { background: rgba(52, 199, 89, 0.14) !important; border-radius: 999px; padding: 2px 8px; }
.admin-nav-btn.menu-brown, .admin-nav-btn.menu-brown .nav-meta, .admin-nav-btn.menu-brown .admin-nav-meta { color: #8C6D45 !important; }
.admin-nav-btn.menu-brown .nav-meta, .admin-nav-btn.menu-brown .admin-nav-meta { background: rgba(162, 132, 94, 0.16) !important; border-radius: 999px; padding: 2px 8px; }
.admin-nav-btn.menu-indigo, .admin-nav-btn.menu-indigo .nav-meta, .admin-nav-btn.menu-indigo .admin-nav-meta { color: #5856D6 !important; }
.admin-nav-btn.menu-indigo .nav-meta, .admin-nav-btn.menu-indigo .admin-nav-meta { background: rgba(88, 86, 214, 0.12) !important; border-radius: 999px; padding: 2px 8px; }
.admin-nav-btn.menu-orange, .admin-nav-btn.menu-orange .nav-meta, .admin-nav-btn.menu-orange .admin-nav-meta { color: #DD7D00 !important; }
.admin-nav-btn.menu-orange .nav-meta, .admin-nav-btn.menu-orange .admin-nav-meta { background: rgba(255, 149, 0, 0.14) !important; border-radius: 999px; padding: 2px 8px; }
.admin-nav-btn.menu-blue, .admin-nav-btn.menu-blue .nav-meta, .admin-nav-btn.menu-blue .admin-nav-meta { color: #007AFF !important; }
.admin-nav-btn.menu-blue .nav-meta, .admin-nav-btn.menu-blue .admin-nav-meta { background: rgba(0, 122, 255, 0.12) !important; border-radius: 999px; padding: 2px 8px; }