/* =====================================================================
   KAI ERP · Unified Content Design System  (erp-unified.css v1.0)
   ---------------------------------------------------------------------
   · 참조 디자인: kai-taxinvoice-issue.html (전자세금계산서 발행 화면)
   · 적용 범위  : .main .content 내부 + 모달 오버레이 ONLY
       └ .sidebar / .topbar 는 절대 건드리지 않음 (선택자 금지)
   · 로드 순서  : header.php 의 <link> 목록 "가장 마지막" 에 배치
   · 표준 치수  : 아래 :root 토큰 외의 임의 px 사용 금지
       입력/셀렉트 높이  34px      버튼 기본       34px
       버튼 소형        28px      버튼 대형(주요)  38px
       카드 패딩        12px 16px  섹션 간격       12px
       페이지 패딩      18px 24px  라운딩          10px / 7px
   ===================================================================== */

:root {
  /* ── 컬러 토큰 ─────────────────────────────── */
  --u-paper:      #F4F5F7;   /* 페이지 배경 */
  --u-card:       #FFFFFF;   /* 카드/패널 */
  --u-card-soft:  #FAFBFC;   /* 테이블 헤더, 보조면 */
  --u-field-calc: #F7F8FA;   /* 계산/읽기전용 셀 */
  --u-line:       #E3E6EB;   /* 기본 보더 */
  --u-line-2:     #D3D8DF;   /* 입력 보더 */
  --u-line-soft:  #EEF0F3;   /* 행 구분선 */

  --u-ink:        #141B26;   /* 본문 */
  --u-ink-2:      #4B5563;   /* 보조 */
  --u-ink-3:      #8B94A1;   /* 힌트/레이블 */
  --u-placeholder:#AFB6C0;

  --u-navy:       #0E2A4A;   /* 주 액션(선택 pill, 강조) */
  --u-navy-hover: #123659;
  --u-focus:      #2E6BD6;   /* 포커스링 · Primary 버튼 */
  --u-focus-hover:#3B7AE8;

  --u-red:        #B23A2B;   /* 공급자 적색 · 위험 */
  --u-red-deep:   #8F2E22;
  --u-red-tint:   #FBF3F1;
  --u-red-line:   #E8CFC9;
  --u-blue:       #1F4E9E;   /* 공급받는자 청색 · 정보 */
  --u-blue-deep:  #173C7B;
  --u-blue-tint:  #F0F4FB;
  --u-blue-line:  #C9D6EC;
  --u-green:      #16864B;   /* 성공 */
  --u-green-tint: #EAF6EF;
  --u-amber:      #B25E09;   /* 경고 */
  --u-amber-tint: #FCF3E4;

  /* ── 구조 토큰 ─────────────────────────────── */
  --u-radius:     10px;
  --u-radius-s:   7px;
  --u-shadow:     0 1px 2px rgba(20,27,38,.05), 0 4px 16px rgba(20,27,38,.05);
  --u-gap:        12px;      /* 섹션(카드) 사이 표준 간격 */

  /* ── 컴포넌트 표준 치수 ─────────────────────── */
  --u-field-h:    34px;
  --u-btn-h:      34px;
  --u-btn-h-sm:   28px;
  --u-btn-h-lg:   38px;
}

/* 다크 테마 토글(탑바 버튼) 대응 — 콘텐츠 영역 토큰만 리맵 */
body.theme-dark {
  --u-paper:#101722; --u-card:#18202D; --u-card-soft:#1D2634;
  --u-field-calc:#1D2634; --u-line:#28313F; --u-line-2:#333E4E; --u-line-soft:#222B38;
  --u-ink:#E9EDF3; --u-ink-2:#B4BECB; --u-ink-3:#7D8898; --u-placeholder:#5D6878;
  --u-navy:#2E6BD6; --u-navy-hover:#3B7AE8;
  --u-red-tint:rgba(178,58,43,.14); --u-red-line:rgba(178,58,43,.35);
  --u-blue-tint:rgba(31,78,158,.16); --u-blue-line:rgba(31,78,158,.4);
  --u-green-tint:rgba(22,134,75,.16); --u-amber-tint:rgba(178,94,9,.16);
  --u-shadow:0 1px 2px rgba(0,0,0,.25), 0 4px 16px rgba(0,0,0,.25);
}

/* =====================================================================
   1. 콘텐츠 프레임
   ===================================================================== */
.main { background: var(--u-paper); }
.main .content {
  padding: 18px 24px 28px !important;
  max-width: 1400px;
  background: var(--u-paper);
  color: var(--u-ink);
  font-size: 14px;
  letter-spacing: -0.01em;
}

/* ── 페이지 헤더 (모든 페이지 동일 규격) ── */
.main .content .page-head,
.main .content .page-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin: 0 0 14px; padding: 0; border: 0; min-height: 0;
}
.main .content .page-head .eyebrow {
  font-size: 11.5px; font-weight: 600; color: var(--u-ink-3);
  letter-spacing: 0; text-transform: none; margin-bottom: 5px;
}
.main .content .page-head h1,
.main .content .page-head h2 {
  font-size: 21px; font-weight: 750; letter-spacing: -0.02em;
  line-height: 1.25; color: var(--u-ink); margin: 0;
}
.main .content .page-head p,
.main .content .page-head .desc {
  margin: 3px 0 0; font-size: 12.5px; color: var(--u-ink-3); max-width: 760px;
}
.main .content .page-head .button-row { margin-left: auto; }

/* =====================================================================
   2. 카드 · 섹션 (표준 여백: 카드 사이 12px)
   ===================================================================== */
.main .content .card,
.main .content section.card,
.main .content .misc .box,
.main .content .items-card,
.main .content .opt-bar,
.main .content .doc-bar,
.main .content .settle {
  background: var(--u-card);
  border: 1px solid var(--u-line) !important;
  border-radius: var(--u-radius) !important;
  box-shadow: var(--u-shadow) !important;
  overflow: hidden;
}
.main .content .card + .card,
.main .content section + section,
.main .content .card + section,
.main .content section + .card { margin-top: var(--u-gap); }
.main .content .mb { margin-bottom: var(--u-gap) !important; }

/* 카드 헤더 */
.main .content .card > .hd,
.main .content .card > .card-header,
.main .content .items-head,
.main .content .section-header {
  display: flex; align-items: center; gap: 10px;
  min-height: 0; padding: 11px 16px;
  background: var(--u-card);
  border-bottom: 1px solid var(--u-line);
}
.main .content .card .hd h6,
.main .content .card .card-header h6,
.main .content .items-head h2 {
  font-size: 13.5px; font-weight: 750; color: var(--u-ink); letter-spacing: -0.01em;
}
.main .content .card .hd .sub { font-size: 11.5px; color: var(--u-ink-3); margin-top: 1px; font-weight: 500; }
.main .content .card .hd .ic {
  width: 26px; height: 26px; border-radius: var(--u-radius-s) !important;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--u-blue-tint); color: var(--u-blue); font-size: 13px; flex: 0 0 auto;
}
.main .content .card .hd .ic.ic-primary { background: var(--u-blue-tint); color: var(--u-blue); }
.main .content .card .hd .ml-auto,
.main .content .items-head > :last-child { margin-left: auto; }

/* 카드 바디 */
.main .content .card > .bd,
.main .content .card > .card-body { padding: 13px 16px; }
.main .content .card .bd form,
.main .content .card .card-body form,
.main .content .card form { padding: 0; }
.main .content .card > .bd.p0, .main .content .card > .bd.no-pad { padding: 0; }

/* =====================================================================
   3. 폼 요소 (표준 높이 34px · 라벨 12px)
   ===================================================================== */
.main .content input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="range"]),
.main .content select,
.main .content .input {
  width: 100%; height: var(--u-field-h) !important; min-height: 0 !important;
  padding: 0 10px; background: var(--u-card);
  border: 1px solid var(--u-line-2) !important;
  border-radius: var(--u-radius-s) !important;
  font-size: 13.5px; color: var(--u-ink);
  transition: border-color .12s, box-shadow .12s;
}
.main .content textarea {
  width: 100%; min-height: 76px; padding: 8px 10px;
  background: var(--u-card); border: 1px solid var(--u-line-2) !important;
  border-radius: var(--u-radius-s) !important; font-size: 13.5px; line-height: 1.5;
}
.main .content input::placeholder,
.main .content textarea::placeholder { color: var(--u-placeholder); }
.main .content input:focus,
.main .content select:focus,
.main .content textarea:focus {
  outline: none !important;
  border-color: var(--u-focus) !important;
  box-shadow: 0 0 0 3px rgba(46,107,214,.13) !important;
}
.main .content input[readonly], .main .content textarea[readonly],
.main .content .field-readonly, .main .content .cell-calc {
  background: var(--u-field-calc); color: var(--u-ink);
}
.main .content input:disabled, .main .content select:disabled, .main .content textarea:disabled {
  background: var(--u-field-calc); color: var(--u-ink-3); opacity: 1;
}
.main .content input.num, .main .content input[data-num] {
  text-align: right; font-variant-numeric: tabular-nums;
}
.main .content select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%234B5563' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px;
}

/* 필드 + 라벨 */
.main .content .form-field,
.main .content .f {
  display: flex; flex-direction: column; gap: 4px; margin: 0;
}
.main .content .form-field > label,
.main .content .f > label {
  font-size: 12px; font-weight: 650; color: var(--u-ink-2); letter-spacing: 0;
}
.main .content .form-field > label .req,
.main .content .f > label .req,
.main .content label .required { color: var(--u-red); margin-left: 2px; }
.main .content .form-hint, .main .content .help-text {
  font-size: 11.5px; color: var(--u-ink-3);
}

/* 검색/필터 그리드 — 카드 상단 배치 표준 */
.main .content .search-grid,
.main .content .filter-grid,
.main .content .form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 12px; align-items: end;
  padding: 13px 16px;
}
.main .content .card > .search-grid,
.main .content .card > .filter-grid { border-bottom: 1px solid var(--u-line); background: var(--u-card); }
.main .content .form-actions,
.main .content .button-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.main .content .search-grid .form-actions,
.main .content .filter-grid .form-actions { align-self: end; }

/* =====================================================================
   4. 버튼 (전 페이지 동일 규격 — 기본 34 / 소형 28 / 대형 38)
   ===================================================================== */
.main .content .btn,
.ui-modal .btn, .modal .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--u-btn-h) !important; padding: 0 14px !important;
  border-radius: var(--u-radius-s) !important;
  border: 1px solid transparent;
  font-size: 13px; font-weight: 650; letter-spacing: -0.01em;
  cursor: pointer; transition: background .13s, border-color .13s, color .13s;
  white-space: nowrap; text-decoration: none; box-shadow: none !important;
}
.main .content .btn-sm,
.ui-modal .btn-sm, .modal .btn-sm {
  height: var(--u-btn-h-sm) !important; padding: 0 10px !important; font-size: 12px;
}
.main .content .btn-lg { height: var(--u-btn-h-lg) !important; padding: 0 20px !important; font-size: 13.5px; }

.main .content .btn-primary, .ui-modal .btn-primary, .modal .btn-primary {
  background: var(--u-focus); color: #fff;
}
.main .content .btn-primary:hover, .ui-modal .btn-primary:hover, .modal .btn-primary:hover {
  background: var(--u-focus-hover); color: #fff;
}
.main .content .btn-outline, .main .content .btn-secondary,
.ui-modal .btn-outline, .ui-modal .btn-secondary,
.modal .btn-outline, .modal .btn-secondary {
  background: var(--u-card); border-color: var(--u-line-2); color: var(--u-ink-2);
}
.main .content .btn-outline:hover, .main .content .btn-secondary:hover,
.ui-modal .btn-outline:hover, .modal .btn-outline:hover {
  border-color: var(--u-ink-3); color: var(--u-ink); background: var(--u-card);
}
.main .content .btn-ghost, .ui-modal .btn-ghost, .modal .btn-ghost {
  background: transparent; color: var(--u-ink-3);
}
.main .content .btn-ghost:hover { color: var(--u-ink); background: var(--u-line-soft); }
.main .content .btn-danger, .ui-modal .btn-danger, .modal .btn-danger {
  background: var(--u-red-tint); color: var(--u-red); border-color: var(--u-red-line);
}
.main .content .btn-danger:hover { background: var(--u-red); color: #fff; border-color: var(--u-red); }
.main .content .btn-navy { background: var(--u-navy); color: #fff; }
.main .content .btn-navy:hover { background: var(--u-navy-hover); }
.main .content .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(46,107,214,.25) !important; }
.main .content .btn:disabled { opacity: .45; cursor: not-allowed; }

/* 조회(룩업) 결합 버튼 — 입력과 같은 34px */
.main .content .f-lookup { display: flex; gap: 6px; }
.main .content .f-lookup input { flex: 1; }
.main .content .btn-lookup {
  flex-shrink: 0; height: var(--u-field-h) !important; padding: 0 12px;
  border-radius: var(--u-radius-s) !important;
  border: 1px solid var(--u-blue); background: var(--u-card); color: var(--u-blue);
  font-size: 12.5px; font-weight: 700; cursor: pointer; transition: .13s; white-space: nowrap;
}
.main .content .btn-lookup:hover { background: var(--u-blue); color: #fff; }

/* 점선 추가 버튼(행 추가 등) */
.main .content .btn-add {
  height: var(--u-btn-h-sm) !important; padding: 0 12px;
  border-radius: var(--u-radius-s) !important; border: 1px dashed var(--u-ink-3);
  background: var(--u-card); font-size: 12.5px; font-weight: 650; color: var(--u-ink-2);
  cursor: pointer; transition: .13s;
}
.main .content .btn-add:hover { border-color: var(--u-navy); color: var(--u-navy); border-style: solid; }

/* =====================================================================
   5. 세그먼트 탭 · 필 라디오 (참조 디자인 시그니처)
   ===================================================================== */
.main .content .invoice-tabs,
.main .content .seg,
.main .content .tab-strip {
  display: inline-flex; background: #E8EAEE; border-radius: 11px !important;
  padding: 3px; gap: 2px; margin-bottom: var(--u-gap); border: 0;
}
body.theme-dark .main .content .invoice-tabs,
body.theme-dark .main .content .seg,
body.theme-dark .main .content .tab-strip { background: #222B38; }
.main .content .invoice-tabs a,
.main .content .seg button,
.main .content .tab-strip a, .main .content .tab-strip button {
  border: 0; background: transparent; padding: 7px 16px; border-radius: 8px !important;
  font-size: 13px; font-weight: 600; color: var(--u-ink-2);
  cursor: pointer; transition: .14s; text-decoration: none; line-height: 1.2;
}
.main .content .invoice-tabs a.active,
.main .content .seg button.on,
.main .content .tab-strip .active {
  background: var(--u-card); color: var(--u-ink); font-weight: 700;
  box-shadow: 0 1px 4px rgba(20,27,38,.12);
}
.main .content .invoice-tabs a:not(.active):hover,
.main .content .seg button:not(.on):hover { color: var(--u-ink); }

.main .content .pill { position: relative; }
.main .content .pill input { position: absolute; opacity: 0; pointer-events: none; }
.main .content .pill label {
  display: inline-flex; align-items: center; height: 29px; padding: 0 12px;
  border: 1px solid var(--u-line-2); border-radius: 99px !important;
  font-size: 12.5px; font-weight: 550; color: var(--u-ink-2);
  cursor: pointer; background: var(--u-card); transition: .13s; user-select: none;
}
.main .content .pill label:hover { border-color: var(--u-ink-3); }
.main .content .pill input:checked + label {
  background: var(--u-navy); border-color: var(--u-navy); color: #fff; font-weight: 650;
}
.main .content .pill input:focus-visible + label { box-shadow: 0 0 0 3px rgba(46,107,214,.25); }

/* =====================================================================
   6. 테이블 (목록 페이지 표준)
   ===================================================================== */
.main .content .table-wrap {
  width: 100%; overflow-x: auto; border: 0; border-radius: 0 !important;
  background: var(--u-card); box-shadow: none;
}
.main .content .card .table-wrap { border-top: 0; }
.main .content table.list-table,
.main .content table.data-table,
.main .content table.tbl,
.main .content .table-wrap > table {
  width: 100%; min-width: 720px; border-collapse: collapse; border-spacing: 0;
}
.main .content table.list-table thead th,
.main .content table.data-table thead th,
.main .content table.tbl thead th,
.main .content .table-wrap > table thead th {
  height: 36px; padding: 7px 12px;
  background: var(--u-card-soft);
  border: 0; border-bottom: 1px solid var(--u-line);
  color: var(--u-ink-3); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0; text-transform: none; text-align: left; white-space: nowrap;
}
.main .content table.list-table tbody td,
.main .content table.data-table tbody td,
.main .content table.tbl tbody td,
.main .content .table-wrap > table tbody td {
  height: 42px; padding: 8px 12px;
  border: 0; border-bottom: 1px solid var(--u-line-soft);
  background: var(--u-card); color: var(--u-ink-2);
  font-size: 13px; line-height: 1.45; vertical-align: middle;
}
.main .content table tbody tr:last-child td { border-bottom: 0; }
.main .content table tbody tr:hover td { background: var(--u-card-soft); }
.main .content table tbody td:first-child { font-weight: 650; color: var(--u-ink); }
.main .content table th.num, .main .content table td.num,
.main .content table th.r, .main .content table td.r {
  text-align: right; font-variant-numeric: tabular-nums;
}
.main .content table td.num { font-weight: 600; color: var(--u-ink); }
.main .content .empty-cell,
.main .content .ui-empty-state {
  text-align: center; color: var(--u-ink-3); font-size: 13px; padding: 28px 16px;
}
.main .content .ui-empty-state p { margin-bottom: 10px; }

/* 계산 셀(읽기전용 합계) */
.main .content .cell-calc {
  height: 32px; display: flex; align-items: center; justify-content: flex-end;
  padding: 0 10px; border: 1px solid transparent; border-radius: var(--u-radius-s) !important;
  font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; color: var(--u-ink);
}
.main .content .cell-calc.tax { color: var(--u-blue-deep); }

/* =====================================================================
   7. 배지 · 요약바 · 페이지네이션
   ===================================================================== */
.main .content .badge, .main .content .chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 9px; border-radius: 99px !important;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  background: var(--u-card-soft); color: var(--u-ink-3); border: 1px solid var(--u-line);
}
.main .content .badge.ACTIVE, .main .content .badge.ISSUED, .main .content .badge.APPROVED,
.main .content .badge.COMPLETED, .main .content .badge.SUCCESS, .main .content .chip.g {
  background: var(--u-green-tint); color: var(--u-green); border-color: transparent;
}
.main .content .badge.INACTIVE, .main .content .badge.EXPIRED, .main .content .badge.REVOKED,
.main .content .badge.FAILED, .main .content .badge.CANCELED, .main .content .badge.REJECTED,
.main .content .chip.r {
  background: var(--u-red-tint); color: var(--u-red); border-color: transparent;
}
.main .content .badge.PENDING, .main .content .badge.DRAFT, .main .content .badge.WAITING,
.main .content .chip.w {
  background: var(--u-amber-tint); color: var(--u-amber); border-color: transparent;
}
.main .content .badge.SYNCED, .main .content .badge.INFO, .main .content .chip.b {
  background: var(--u-blue-tint); color: var(--u-blue); border-color: transparent;
}

.main .content .summary-bar {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: baseline;
  background: var(--u-card); border: 1px solid var(--u-line);
  border-radius: var(--u-radius) !important; padding: 10px 16px;
  font-size: 12.5px; color: var(--u-ink-2); box-shadow: var(--u-shadow);
}
.main .content .summary-bar b, .main .content .summary-bar strong {
  font-variant-numeric: tabular-nums; color: var(--u-ink); font-weight: 700;
}

.main .content .pagination { display: flex; align-items: center; gap: 6px; padding: 12px 16px; }
.main .content .pagination a, .main .content .pagination button {
  min-width: 30px; height: 30px; padding: 0 9px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--u-line-2); border-radius: var(--u-radius-s) !important;
  background: var(--u-card); color: var(--u-ink-2); font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: .12s; text-decoration: none;
}
.main .content .pagination .active,
.main .content .pagination [aria-current="page"] {
  background: var(--u-navy); border-color: var(--u-navy); color: #fff;
}

/* =====================================================================
   8. KPI · 메트릭 카드 · 퀵액션 (대시보드)
   ===================================================================== */
.main .content .kpi-strip { gap: var(--u-gap); margin-bottom: var(--u-gap); }
.main .content .kpi-strip .kpi-card,
.main .content .ui-metric-card {
  min-height: 0; padding: 12px 16px; gap: 5px;
  background: var(--u-card); border: 1px solid var(--u-line) !important;
  border-radius: var(--u-radius) !important; box-shadow: var(--u-shadow) !important;
}
.main .content .ui-metric-label,
.main .content .kpi-strip .kpi-card span {
  font-size: 11.5px; font-weight: 650; color: var(--u-ink-3); text-transform: none; letter-spacing: 0;
}
.main .content .ui-metric-value,
.main .content .kpi-strip .kpi-card strong {
  font-family: inherit; font-variant-numeric: tabular-nums;
  font-size: 21px; font-weight: 750; color: var(--u-ink); letter-spacing: -0.02em;
}
.main .content .ui-metric-sub { font-size: 11.5px; color: var(--u-ink-3); }
.main .content .ui-metric-card.clickable:hover { border-color: var(--u-focus) !important; }
.main .content .ui-metric-grid { gap: var(--u-gap); }

.main .content .quick-action-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px;
}
.main .content .quick-action {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  border: 1px solid var(--u-line-2); border-radius: var(--u-radius-s) !important;
  background: var(--u-card); transition: .13s; text-decoration: none;
}
.main .content .quick-action:hover { border-color: var(--u-focus); }
.main .content .quick-action i { font-size: 17px; color: var(--u-blue); flex: 0 0 auto; }
.main .content .quick-action strong { display: block; font-size: 13px; font-weight: 700; color: var(--u-ink); }
.main .content .quick-action small { display: block; font-size: 11.5px; color: var(--u-ink-3); margin-top: 1px; }

/* =====================================================================
   9. 상세 페이지 dl 그리드
   ===================================================================== */
.main .content .detail-grid,
.main .content .detail-list {
  display: grid; grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);
  gap: 0; margin: 0;
}
.main .content .detail-grid > dt,
.main .content .detail-list > dt {
  margin: 0; padding: 10px 16px; border-bottom: 1px solid var(--u-line-soft);
  background: var(--u-card-soft); color: var(--u-ink-2); font-size: 12.5px; font-weight: 650;
}
.main .content .detail-grid > dd,
.main .content .detail-list > dd {
  min-width: 0; margin: 0; padding: 10px 16px; border-bottom: 1px solid var(--u-line-soft);
  color: var(--u-ink); font-size: 13px;
}
.main .content .detail-grid > dt:last-of-type,
.main .content .detail-grid > dd:last-of-type,
.main .content .detail-list > dt:last-of-type,
.main .content .detail-list > dd:last-of-type { border-bottom: 0; }

/* =====================================================================
   10. 모달 (body 직속 렌더 — content 밖이므로 별도 스코프)
   ===================================================================== */
.ui-modal-backdrop, .modal-backdrop {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(14,27,44,.5); backdrop-filter: blur(2px);
}
.ui-modal-backdrop.hidden, .modal-backdrop[hidden] { display: none !important; }
.ui-modal, .modal {
  width: min(640px, 100%); max-height: calc(100vh - 48px); overflow: auto;
  background: var(--u-card); border: 1px solid var(--u-line);
  border-radius: var(--u-radius) !important; box-shadow: 0 12px 40px rgba(20,27,38,.22);
  padding: 0; color: var(--u-ink);
}
.ui-modal-header, .modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; margin: 0; border-bottom: 1px solid var(--u-line);
}
.ui-modal-header h2, .modal-header h2 { font-size: 15px; font-weight: 750; margin: 0; }
.ui-modal-body, .modal-body { padding: 14px 16px; }
.ui-modal-footer, .modal-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 16px; border-top: 1px solid var(--u-line);
}
.modal-close, .ui-modal .modal-close {
  width: 28px; height: 28px; border: 0; border-radius: var(--u-radius-s) !important;
  background: transparent; color: var(--u-ink-3); cursor: pointer; font-size: 14px;
}
.modal-close:hover { background: var(--u-line-soft); color: var(--u-ink); }

/* =====================================================================
   11. 알림 · 토스트 · 폼 에러
   ===================================================================== */
.main .content .alert, .toast {
  padding: 10px 14px; border-radius: var(--u-radius-s) !important;
  font-weight: 600; font-size: 12.5px; margin-bottom: var(--u-gap);
  border: 1px solid var(--u-line); background: var(--u-card-soft); color: var(--u-ink-2);
}
.main .content .alert.success, .toast.success { background: var(--u-green-tint); color: var(--u-green); border-color: transparent; }
.main .content .alert.danger,  .toast.danger  { background: var(--u-red-tint);   color: var(--u-red);   border-color: transparent; }
.main .content .alert.warning, .toast.warning { background: var(--u-amber-tint); color: var(--u-amber); border-color: transparent; }
.main .content .field-error { font-size: 11.5px; color: var(--u-red); font-weight: 600; }
.main .content input.is-invalid, .main .content select.is-invalid, .main .content textarea.is-invalid {
  border-color: var(--u-red) !important;
}

/* =====================================================================
   12. 반응형 · 접근성
   ===================================================================== */
@media (max-width: 1024px) {
  .main .content { padding: 14px 16px 24px !important; }
  .main .content .page-head { flex-wrap: wrap; align-items: flex-start; }
  .main .content .detail-grid, .main .content .detail-list { grid-template-columns: 1fr; }
  .main .content .detail-grid > dt, .main .content .detail-list > dt { border-bottom: 0; padding-bottom: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .main .content *, .ui-modal *, .modal * { transition: none !important; animation: none !important; }
}