/* =========================================================================
   세금계산서 매니저 - 디자인 시스템
   - Bootstrap 5.3 위에 토큰/레이아웃/컴포넌트를 얹는다.
   - 매출 = 파랑(--c-sales), 매입 = 빨강(--c-purchase) 으로 전 화면 통일.
   - 금액은 항상 .num (고정폭 숫자, 우측 정렬) 사용.
   ========================================================================= */

:root {
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Malgun Gothic", "맑은 고딕", "Noto Sans KR", system-ui, sans-serif;

  --c-bg: #f4f6f9;
  --c-surface: #ffffff;
  --c-surface-2: #f8fafc;
  --c-border: #e3e7ee;
  --c-border-strong: #cfd6e1;
  --c-text: #111827;
  --c-text-2: #4b5563;
  --c-muted: #8a94a6;

  --c-primary: #2952e3;
  --c-primary-600: #1f43c4;
  --c-primary-50: #eef2fe;

  --c-sales: #2563eb;
  --c-sales-50: #e8f0fe;
  --c-purchase: #dc3545;
  --c-purchase-50: #fdecee;
  --c-review: #b45309;
  --c-review-50: #fff4e0;
  --c-ok: #0f9d58;
  --c-ok-50: #e6f6ee;

  --c-console: #6d4aff;
  --c-console-50: #f1edff;
  --c-console-side: #12131a;
  --c-console-side-2: #1c1e28;

  --radius: 10px;
  --radius-sm: 7px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --sidebar-w: 248px;
  --topbar-h: 58px;

  --bs-body-font-family: var(--font-sans);
  --bs-body-color: var(--c-text);
  --bs-body-bg: var(--c-bg);
  --bs-border-color: var(--c-border);
  --bs-primary: var(--c-primary);
  --bs-primary-rgb: 41, 82, 227;
  --bs-link-color: var(--c-primary);
  --bs-link-color-rgb: 41, 82, 227;
  --bs-link-hover-color: var(--c-primary-600);
  --bs-border-radius: var(--radius-sm);
}

html { font-size: 15px; }
body {
  font-family: var(--font-sans);
  background: var(--c-bg);
  color: var(--c-text);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.btn, .nav-link, .dropdown-item, .page-link, .badge { text-decoration: none !important; }

/* ---------- 버튼 ---------- */
.btn { font-weight: 600; border-radius: var(--radius-sm); }
.btn-primary { --bs-btn-bg: var(--c-primary); --bs-btn-border-color: var(--c-primary);
  --bs-btn-hover-bg: var(--c-primary-600); --bs-btn-hover-border-color: var(--c-primary-600);
  --bs-btn-active-bg: var(--c-primary-600); --bs-btn-disabled-bg: var(--c-primary); --bs-btn-disabled-border-color: var(--c-primary); }
.btn-outline-primary { --bs-btn-color: var(--c-primary); --bs-btn-border-color: var(--c-primary);
  --bs-btn-hover-bg: var(--c-primary); --bs-btn-hover-border-color: var(--c-primary); --bs-btn-active-bg: var(--c-primary-600); }
.btn-light { --bs-btn-bg: #fff; --bs-btn-border-color: var(--c-border-strong); --bs-btn-hover-bg: var(--c-surface-2); --bs-btn-hover-border-color: var(--c-border-strong); }
.btn-icon { display: inline-flex; align-items: center; gap: .35rem; }

/* ---------- 앱 레이아웃 ---------- */
.app-shell { display: flex; min-height: 100vh; }
.app-sidebar {
  width: var(--sidebar-w);
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  display: flex; flex-direction: column;
}
.app-sidebar { --bs-offcanvas-bg: var(--c-surface); }
@media (min-width: 992px) {
  .app-sidebar { position: sticky; top: 0; height: 100vh; flex-shrink: 0; }
  .app-sidebar .offcanvas-body { overflow-y: auto; }
  /* Bootstrap 은 lg 이상에서 .offcanvas-lg 배경을 transparent !important 로 덮으므로 더 구체적인 선택자로 되살린다 */
  .app-sidebar.offcanvas-lg { background-color: var(--c-surface) !important; }
  .console .app-sidebar.offcanvas-lg { background-color: var(--c-console-side) !important; }
}
.app-brand {
  display: flex; align-items: center; gap: .6rem;
  height: var(--topbar-h); padding: 0 1.1rem;
  font-weight: 800; font-size: 1.05rem; color: var(--c-text);
  border-bottom: 1px solid var(--c-border);
}
.app-brand:hover { text-decoration: none; color: var(--c-text); }
.brand-mark {
  width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--c-primary), #5b7cfa);
  color: #fff; font-size: 1rem;
}
.side-nav { padding: .75rem .6rem 1.5rem; }
.side-nav .nav-section {
  font-size: .72rem; font-weight: 700; color: var(--c-muted);
  text-transform: uppercase; letter-spacing: .04em;
  padding: 1rem .7rem .35rem;
}
.side-nav .nav-link {
  display: flex; align-items: center; gap: .65rem;
  padding: .48rem .7rem; border-radius: var(--radius-sm);
  color: var(--c-text-2); font-weight: 500; font-size: .93rem;
}
.side-nav .nav-link i { font-size: 1.05rem; width: 1.2rem; text-align: center; color: var(--c-muted); }
.side-nav .nav-link:hover { background: var(--c-surface-2); color: var(--c-text); }
.side-nav .nav-link.active { background: var(--c-primary-50); color: var(--c-primary); font-weight: 700; }
.side-nav .nav-link.active i { color: var(--c-primary); }
.side-nav .nav-link .badge { margin-left: auto; }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-topbar {
  position: sticky; top: 0; z-index: 1020;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: .75rem;
  padding: 0 1.25rem;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--c-border);
}
.topbar-search { max-width: 420px; flex: 1; }
.topbar-search .form-control { background: var(--c-surface-2); border-color: transparent; padding-left: 2.2rem; }
.topbar-search .form-control:focus { background: #fff; border-color: var(--c-primary); }
.topbar-search .bi { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--c-muted); }
.tenant-switch .btn { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-content { padding: 1.5rem 1.5rem 3rem; max-width: 1480px; width: 100%; }
@media (max-width: 575.98px) { .app-content { padding: 1rem .75rem 2rem; } }

/* ---------- 페이지 헤더 ---------- */
.page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.page-title { font-size: 1.45rem; font-weight: 800; margin: 0; letter-spacing: -0.02em; }
.page-subtitle { color: var(--c-text-2); margin: .25rem 0 0; font-size: .92rem; }
.page-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.breadcrumb { font-size: .85rem; margin-bottom: .35rem; }

/* ---------- 카드 ---------- */
.card { border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card-header { background: transparent; border-bottom: 1px solid var(--c-border); padding: .85rem 1.1rem; font-weight: 700; }
.card-body { padding: 1.1rem; }
.card-title { font-weight: 700; font-size: 1rem; }
.section-title { font-size: 1.02rem; font-weight: 700; margin: 0 0 .75rem; }

/* KPI 타일 */
.kpi { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 1rem 1.1rem; height: 100%; box-shadow: var(--shadow-sm); }
.kpi-label { color: var(--c-text-2); font-size: .85rem; font-weight: 600; display: flex; align-items: center; gap: .4rem; }
.kpi-value { font-size: 1.55rem; font-weight: 800; letter-spacing: -0.02em; margin-top: .25rem; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: .8rem; color: var(--c-muted); margin-top: .15rem; }
.kpi.kpi-sales { border-top: 3px solid var(--c-sales); }
.kpi.kpi-purchase { border-top: 3px solid var(--c-purchase); }
.kpi.kpi-review { border-top: 3px solid var(--c-review); }
.kpi.kpi-ok { border-top: 3px solid var(--c-ok); }
.kpi.kpi-console { border-top: 3px solid var(--c-console); }
/* 한 칸에 KPI 여러 장을 세로로 쌓을 때: 칸 높이를 나눠 가진다(.kpi 의 height:100% 가 넘치지 않게) */
.kpi-stack { display: flex; flex-direction: column; gap: 1rem; }
.kpi-stack > .kpi { height: auto; flex: 1 1 0; }

/* ---------- 테이블 ---------- */
.table { --bs-table-bg: transparent; margin-bottom: 0; font-size: .9rem; }
.table > thead th {
  background: var(--c-surface-2); color: var(--c-text-2);
  font-weight: 700; font-size: .8rem; white-space: nowrap;
  border-bottom: 1px solid var(--c-border); padding: .6rem .75rem;
}
.table > tbody td { padding: .6rem .75rem; vertical-align: middle; border-color: var(--c-border); }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #f6f8fc; }
.table-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.table-card .table-responsive { margin: 0; }

/* 세금계산서 목록 — 모바일 카드형 (templates/invoices/list.html, <768px 에서만 보임) */
.inv-cards > li + li { border-top: 1px solid var(--c-border); }
.inv-card { display: block; padding: .75rem 1rem; color: inherit; text-decoration: none; }
.inv-card:active, .inv-card:hover { background: var(--c-surface-2, rgba(0, 0, 0, .025)); color: inherit; }
.inv-card .ic-top { display: flex; align-items: center; gap: .375rem; flex-wrap: wrap; font-size: .78rem; color: var(--c-muted); }
.inv-card .ic-date { font-variant-numeric: tabular-nums; margin-right: .125rem; }
.inv-card .ic-main { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-top: .25rem; }
.inv-card .ic-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-card .ic-amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv-card .ic-sub { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-top: .125rem; font-size: .8rem; color: var(--c-muted); }
.inv-card .ic-item { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-card .ic-bal { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.inv-card .ic-bal .small { font-size: .72rem; }
.inv-card.is-cancelled .ic-name, .inv-card.is-cancelled .ic-amount { color: var(--c-muted); text-decoration: line-through; }
.table tfoot td, .table tfoot th, .table tr.row-total > * { font-weight: 800; background: var(--c-surface-2); border-top: 2px solid var(--c-border-strong); }
.num, .table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86em; }
.row-link { cursor: pointer; }
.text-sales { color: var(--c-sales) !important; }
.text-purchase { color: var(--c-purchase) !important; }

/* ---------- 배지 ---------- */
.badge { font-weight: 700; border-radius: 6px; padding: .32em .55em; }
.badge-sales { background: var(--c-sales-50); color: var(--c-sales); }
.badge-purchase { background: var(--c-purchase-50); color: var(--c-purchase); }
.badge-review { background: var(--c-review-50); color: var(--c-review); }
.badge-ok { background: var(--c-ok-50); color: var(--c-ok); }
.badge-muted { background: #eef0f4; color: var(--c-text-2); }
.badge-console { background: var(--c-console-50); color: var(--c-console); }

/* ---------- 폼 / 필터 ---------- */
.form-label { font-weight: 600; font-size: .86rem; color: var(--c-text-2); margin-bottom: .3rem; }
.form-control, .form-select { border-color: var(--c-border-strong); border-radius: var(--radius-sm); }
.form-control:focus, .form-select:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(41, 82, 227, .15); }
.form-text { font-size: .8rem; color: var(--c-muted); }
.filter-bar { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: .9rem 1rem; margin-bottom: 1rem; box-shadow: var(--shadow-sm); }
.filter-bar .form-label { font-size: .78rem; margin-bottom: .2rem; }
.segmented { display: inline-flex; background: #eceff4; border-radius: 9px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.segmented a, .segmented button { border: 0; background: transparent; padding: .35rem .8rem; border-radius: 7px; font-weight: 600; font-size: .86rem; color: var(--c-text-2); }
.segmented a.active, .segmented button.active { background: #fff; color: var(--c-text); box-shadow: var(--shadow-sm); }
.segmented a:hover { text-decoration: none; color: var(--c-text); }

/* ---------- 업로드 드롭존 ---------- */
.dropzone {
  border: 2px dashed var(--c-border-strong); border-radius: 14px;
  background: var(--c-surface); padding: 2.5rem 1.5rem; text-align: center;
  transition: border-color .15s, background .15s; cursor: pointer;
}
.dropzone:hover, .dropzone.is-dragover { border-color: var(--c-primary); background: var(--c-primary-50); }
.dropzone .bi { font-size: 2.4rem; color: var(--c-primary); }

/* ---------- 빈 상태 ---------- */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--c-text-2); }
.empty-state .bi { font-size: 2.4rem; color: var(--c-muted); display: block; margin-bottom: .5rem; }

/* ---------- 정의 목록(상세 화면) ---------- */
.dl-grid { display: grid; grid-template-columns: 9rem 1fr; gap: .45rem 1rem; margin: 0; font-size: .92rem; }
.dl-grid dt { color: var(--c-muted); font-weight: 600; }
.dl-grid dd { margin: 0; word-break: break-all; }

/* 세금계산서 양식 느낌의 공급자/공급받는자 박스 */
.party-box { border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; height: 100%; }
.party-box .party-head { padding: .5rem .9rem; font-weight: 800; font-size: .88rem; }
.party-box.supplier .party-head { background: var(--c-purchase-50); color: var(--c-purchase); }
.party-box.buyer .party-head { background: var(--c-sales-50); color: var(--c-sales); }
.party-box .party-body { padding: .8rem .9rem; background: #fff; }

/* 공지 배너 */
.announce-bar { border-radius: 0; margin: 0; border-left: 0; border-right: 0; border-top: 0; padding: .55rem 1.25rem; font-size: .88rem; }

/* ---------- 공개/인증 화면 ---------- */
.public-wrap { min-height: 100vh; display: flex; flex-direction: column; background:
  radial-gradient(1200px 500px at 10% -10%, #e6ecff 0%, transparent 60%),
  radial-gradient(900px 400px at 110% 10%, #eaf7f1 0%, transparent 60%), var(--c-bg); }
.public-nav { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; max-width: 1180px; margin: 0 auto; width: 100%; }
.auth-card { max-width: 440px; width: 100%; margin: 2rem auto; background: #fff; border: 1px solid var(--c-border); border-radius: 16px; padding: 2rem; box-shadow: 0 10px 30px rgba(16, 24, 40, .06); }
.auth-card h1 { font-size: 1.4rem; font-weight: 800; }
.hero { max-width: 1180px; margin: 0 auto; padding: 3.5rem 1.5rem 2rem; }
.hero h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 900; letter-spacing: -0.035em; line-height: 1.25; }
.hero p.lead { color: var(--c-text-2); font-size: 1.1rem; }
.feature { background: #fff; border: 1px solid var(--c-border); border-radius: 14px; padding: 1.25rem; height: 100%; }
.feature .bi { font-size: 1.5rem; color: var(--c-primary); }
.feature h3 { font-size: 1.02rem; font-weight: 800; margin: .6rem 0 .3rem; }
.feature p { color: var(--c-text-2); font-size: .9rem; margin: 0; }

/* ---------- 운영자 콘솔 ---------- */
.console .app-sidebar { --bs-offcanvas-bg: var(--c-console-side); background: var(--c-console-side); border-right-color: #000; }
.console .app-brand { color: #fff; border-bottom-color: rgba(255, 255, 255, .08); }
.console .brand-mark { background: linear-gradient(135deg, var(--c-console), #a78bfa); }
.console .side-nav .nav-section { color: #6b7080; }
.console .side-nav .nav-link { color: #c3c6d1; }
.console .side-nav .nav-link i { color: #7d8294; }
.console .side-nav .nav-link:hover { background: var(--c-console-side-2); color: #fff; }
.console .side-nav .nav-link.active { background: rgba(109, 74, 255, .22); color: #fff; }
.console .side-nav .nav-link.active i { color: #b9a6ff; }
.console .btn-primary { --bs-btn-bg: var(--c-console); --bs-btn-border-color: var(--c-console);
  --bs-btn-hover-bg: #5a37ee; --bs-btn-hover-border-color: #5a37ee; --bs-btn-active-bg: #5a37ee; }
.console-flag { font-size: .7rem; font-weight: 800; padding: .2rem .45rem; border-radius: 5px; background: var(--c-console); color: #fff; letter-spacing: .03em; }

/* ---------- 차트 ---------- */
.chart-box { position: relative; height: 300px; }
.chart-box.sm { height: 220px; }

/* ---------- 인쇄 ---------- */
@media print {
  .app-sidebar, .app-topbar, .page-actions, .filter-bar, .no-print, .announce-bar, .pagination { display: none !important; }
  .app-content { padding: 0; max-width: none; }
  body { background: #fff; font-size: 11pt; }
  .card, .table-card, .kpi { box-shadow: none; border-color: #999; }
  a { color: inherit; }
}

/* HTMX 로딩 표시 */
.htmx-indicator { opacity: 0; transition: opacity .2s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }