/* =====================================================
   components.css - UI Components
   ===================================================== */

/* =====================================================
   CARD
   ===================================================== */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  gap: var(--space-4);
}

.card-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.card-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

.card-header-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

/* 입력 + 우측 버튼(돋보기 등) 조합 */
.input-with-btn { display: flex; gap: var(--space-2); }
.input-with-btn .form-control { flex: 1; min-width: 0; }
.input-with-btn .btn { flex-shrink: 0; padding-left: var(--space-3); padding-right: var(--space-3); }

/* 입력란 내부 우측에 붙는 돋보기/캘린더 아이콘 버튼(레퍼런스 방식) */
.input-search { position: relative; }
.input-search .form-control { padding-right: 40px; }
.input-search .input-search-btn {
  position: absolute; top: 1px; right: 1px; bottom: 1px; width: 36px;
  border: none; border-left: 1px solid var(--color-border); background: transparent;
  cursor: pointer; color: var(--color-text-muted);
  display: flex; align-items: center; justify-content: center;
  border-radius: 0 var(--radius-base) var(--radius-base) 0;
}
.input-search .input-search-btn:hover { color: var(--color-text); background: var(--color-bg); }

.card-body {
  padding: var(--space-6);
}

.card-body.p-0 {
  padding: 0;
}

.card-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-bg);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Stat Card */
.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  transition: border-color var(--transition-fast);
}

.stat-card:hover {
  border-color: var(--color-border-strong);
}

/* 무채색 아이콘 타일 — 파스텔 칩 제거(모노크롬 규율) */
.stat-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-base);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xl);
  flex-shrink: 0;
  background: var(--color-bg-secondary);
  color: var(--color-text);
}

.stat-icon.primary,
.stat-icon.success,
.stat-icon.warning,
.stat-icon.danger,
.stat-icon.info { background: var(--color-bg-secondary); color: var(--color-text); }

.stat-info {
  flex: 1;
  min-width: 0;
}

.stat-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

.stat-change {
  font-size: var(--font-size-xs);
  margin-top: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.stat-change.up   { color: var(--color-success); }
.stat-change.down { color: var(--color-danger);  }

/* =====================================================
   BUTTON
   ===================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 0.375rem 0.75rem;
  font-family: var(--font-family);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  border-radius: var(--radius-base);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast),
              box-shadow var(--transition-fast),
              transform var(--transition-fast);
  vertical-align: middle;
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled,
.btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Variants */
.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-white);
  box-shadow: 0 4px 12px rgba(24, 24, 27, 0.25);
}

.btn-secondary {
  background: var(--color-bg);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.btn-secondary:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text);
}

.btn-outline-primary {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-outline-primary:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* Destructive — 기본은 절제된 아웃라인, hover 시에만 채움(무채색 톤과 조화) */
.btn-danger {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  color: var(--color-danger);
}

.btn-danger:hover {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-white);
}

/* 강한 확정 액션(모달 확인 등)엔 solid 유지 */
.btn-danger-solid {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-white);
}
.btn-danger-solid:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  color: var(--color-white);
}

.btn-outline-danger {
  background: transparent;
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.btn-outline-danger:hover {
  background: var(--color-danger);
  color: var(--color-white);
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-secondary);
}

.btn-ghost:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

/* Sizes */
.btn-xs {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm);
}

.btn-sm {
  padding: 0.25rem 0.625rem;
  font-size: var(--font-size-xs);
}

.btn-lg {
  padding: var(--space-2) var(--space-5);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
}

.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--radius-base);
}

.btn-icon.btn-sm {
  width: 30px;
  height: 30px;
}

/* =====================================================
   FORM CONTROLS
   ===================================================== */
.form-group {
  margin-bottom: var(--space-5);
}

.form-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.form-label.required::after {
  content: ' *';
  color: var(--color-danger);
}

/* 검색영역 필수 표기 — 폼 라벨과 일관 */
.search-label.required::after {
  content: ' *';
  color: var(--color-danger);
}

/* =====================================================
   CODE SEARCH POPUP (돋보기 → 모달 그리드)
   ===================================================== */
.code-popup-backdrop {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.4);
}
.code-popup {
  display: flex; flex-direction: column;
  width: 680px; max-width: 94vw; max-height: 84vh;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.code-popup-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.code-popup-title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--color-text); }
.code-popup-x {
  border: none; background: transparent; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--color-text-muted); padding: 0 4px;
}
.code-popup-x:hover { color: var(--color-text); }
.code-popup-body { padding: var(--space-4) var(--space-5); overflow-y: auto; min-height: 0; flex: 1; }
/* 검색 필터 영역(다열 지원) */
.code-popup-filter {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-base);
  background: var(--color-bg); margin-bottom: var(--space-3);
}
.cpf-fields { flex: 1; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; }
.cpf-field { display: flex; align-items: center; gap: var(--space-2); }
.cpf-label { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-text); white-space: nowrap; }
.cpf-field .form-control { width: 180px; }
.cpf-field select.form-control { width: 130px; }
.cpf-search { flex-shrink: 0; }
/* 목록 헤더 [총 N건] + 엑셀 */
.code-popup-listhead {
  display: flex; align-items: baseline; gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.cp-list-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text); }
.cp-count { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.code-popup-listhead .btn-excel-icon { margin-left: auto; align-self: center; }
.code-popup-grid .grid-table { font-size: var(--font-size-sm); }
.code-popup-grid tr.grid-row { cursor: pointer; }
/* 선택/닫기 — 가운데 정렬 */
.code-popup-foot {
  display: flex; justify-content: center; gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
}

.form-control {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
}

.form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.form-control::placeholder {
  color: var(--color-text-muted);
}

.form-control:disabled {
  background-color: var(--color-bg);
  cursor: not-allowed;
  opacity: 0.7;
}

.form-control.is-invalid {
  border-color: var(--color-danger);
}

.form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

textarea.form-control {
  resize: vertical;
  min-height: 100px;
}

select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-8);
  cursor: pointer;
}

.form-text {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

.form-error {
  font-size: var(--font-size-xs);
  color: var(--color-danger);
  margin-top: var(--space-1);
}

/* Input Group */
.input-group {
  display: flex;
  align-items: stretch;
}

.input-group .form-control {
  border-radius: 0;
  flex: 1;
}

.input-group .form-control:first-child {
  border-radius: var(--radius-base) 0 0 var(--radius-base);
}

.input-group .form-control:last-child {
  border-radius: 0 var(--radius-base) var(--radius-base) 0;
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  white-space: nowrap;
}

.input-group-text:first-child {
  border-right: none;
  border-radius: var(--radius-base) 0 0 var(--radius-base);
}

.input-group-text:last-child {
  border-left: none;
  border-radius: 0 var(--radius-base) var(--radius-base) 0;
}

/* Search Bar */
/* 검색영역: [검색 필드영역(좌)] + [버튼영역(우)] 2단으로 분리 → 필드가 버튼 침범 안 함 */
.search-bar {
  display: flex;
  align-items: center;   /* 버튼영역을 필드영역(여러 줄)에 대해 세로 가운데 */
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
}
/* 좌: 검색 필드들(라벨+입력 묶음, 통째로 줄바꿈) */
.search-fields {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) var(--space-4);
  flex: 1 1 auto; min-width: 0;
}
/* 라벨+입력 한 덩어리 — 라벨 자리가 남아도 사이에서 안 꺾이고 통째로 다음 줄로 */
.search-field { display: inline-flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.search-field > .search-label { flex-shrink: 0; }
.search-field .cal-sep { color: var(--color-text-muted); }
/* 우: 버튼 영역(고정) */
.search-actions { display: flex; align-items: center; gap: var(--space-1); flex-shrink: 0; }
.search-actions .btn { padding: 0.25rem 0.625rem; font-size: var(--font-size-xs); }

.search-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  white-space: nowrap;
}
.search-bar .form-control {
  padding: 0.25rem 0.5rem;          /* 상세영역 입력과 동일한 컴팩트 사이즈 */
  font-size: var(--font-size-xs);   /* placeholder 글자 크기도 축소 */
  height: auto;
}
.search-field input[type="text"].form-control:not([style*="width"]) { width: 200px; }
.search-field input.date-input { width: 130px; cursor: pointer; caret-color: transparent; }

/* 모바일: 검색바를 세로 스택 + 입력 전체폭 → 입력이 버튼 영역을 침범하지 않게 */
@media (max-width: 640px) {
  /* 필드 블록과 버튼 블록 사이는 넉넉히(space-4), 필드끼리는 컴팩트(space-2) */
  .search-bar { flex-direction: column; align-items: stretch; gap: var(--space-4); }
  .search-fields { flex-direction: column; align-items: stretch; width: 100%; gap: var(--space-2); }
  .search-field { display: flex; width: 100%; }
  .search-field > .search-label { min-width: 60px; }
  /* 인라인 width(200px/140px/120px 등) + form-control-narrow(max-width)까지 덮어써 전체폭으로 */
  .search-field > .form-control { flex: 1 1 auto; width: auto !important; max-width: none; min-width: 0; }
  .search-field input.date-input { flex: 1 1 auto; width: auto !important; }
  .search-actions { width: 100%; justify-content: flex-end; }
}

.search-input-wrapper {
  flex: 1 1 240px;
  min-width: 0;
}

.filter-form {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.filter-form .form-control {
  flex: 1 1 220px;
  min-width: 0;
}

.filter-form .form-control[style*="max-width"],
.filter-form select.form-control[style*="max-width"] {
  flex: 0 1 auto;
}

.search-bar-icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
  width: 16px;
  height: 16px;
}

/* Checkbox & Radio — 전역 무채색(블랙) accent */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--color-primary);
}

.form-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

.form-check-input {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.form-check-label {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  cursor: pointer;
}

/* =====================================================
   TABLE
   ===================================================== */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.table {
  width: 100%;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  border-collapse: separate;
  border-spacing: 0;
}

.table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table th {
  padding: var(--space-3) var(--space-4);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  background: transparent;
  border-bottom: 1px solid var(--color-border-strong);
  white-space: nowrap;
  text-align: left;
}

.table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table tbody tr {
  transition: background-color var(--transition-fast);
}

.table tbody tr:hover {
  background-color: var(--color-bg);
}

.table td .btn + .btn,
.table td a.btn + .btn,
.table td .btn + a.btn,
.table td a.btn + a.btn {
  margin-left: var(--space-2);
}

.table tr[style*="cursor:pointer"] {
  cursor: pointer;
}

.table-striped tbody tr:nth-child(even) {
  background-color: rgba(243, 244, 246, 0.5);
}

.table-center th,
.table-center td {
  text-align: center;
}

/* Table Actions */
.table-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: center;
}

/* No Data */
.table-empty {
  text-align: center;
  padding: var(--space-12);
  color: var(--color-text-muted);
}

.table-empty-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-3);
}

.table-empty-text {
  font-size: var(--font-size-sm);
}

/* =====================================================
   BADGE
   ===================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
  white-space: nowrap;
  line-height: 1.4;
}

.badge-primary { background: var(--color-primary-pale); color: var(--color-primary-dark); }
.badge-success { background: var(--color-success-pale); color: #065f46; }
.badge-warning { background: var(--color-warning-pale); color: #92400e; }
.badge-danger  { background: var(--color-danger-pale);  color: #991b1b; }
.badge-info    { background: var(--color-info-pale);    color: var(--color-info); }
.badge-secondary,
.badge-gray    { background: var(--color-bg-secondary); color: var(--color-text-secondary); }

/* Dot Badge */
.badge-dot {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.badge-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}

/* =====================================================
   PAGINATION
   ===================================================== */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-4) 0;
  flex-wrap: wrap;
}

.page-item,
.pagination > a,
.pagination > span,
.pagination > button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
}

.page-item:hover,
.pagination > a:hover,
.pagination > span:hover,
.pagination > button:hover {
  background: var(--color-bg);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.page-item.active,
.pagination > .active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: 0 2px 8px rgba(24, 24, 27, 0.25);
}

.page-item.disabled,
.pagination > .disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Pagination Info */
.pagination-info {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-align: center;
  margin-top: var(--space-2);
}

/* =====================================================
   MODAL
   ===================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(24, 24, 27, 0.44);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.modal-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
}

.modal {
  background: transparent;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.modal > .modal-backdrop {
  display: block;
  opacity: 1;
  visibility: visible;
  z-index: 0;
}

.modal > .modal-dialog,
.modal-backdrop > .modal {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  /* 레이어드 뉴트럴 그림자(beautiful shadows) — 뭉개지지 않는 깊이 */
  box-shadow:
    0 0 0 1px rgba(24, 24, 27, 0.04),
    0 8px 16px -6px rgba(24, 24, 27, 0.16),
    0 22px 44px -12px rgba(24, 24, 27, 0.26);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  /* 중앙에서 scale-in (Emil: 모달은 중앙 유지, 무에서 나타나지 않게 scale+opacity) */
  transform: scale(0.96);
  transition: transform 220ms cubic-bezier(0.2, 0, 0, 1);
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.modal[style*="display: flex"] > .modal-dialog,
.modal[style*="display:flex"] > .modal-dialog,
.modal-backdrop.active > .modal {
  transform: scale(1) translateY(0);
}

.modal-sm,
.modal-sm.modal-dialog { max-width: 360px; }
.modal-lg,
.modal-lg.modal-dialog { max-width: 720px; }
.modal-xl,
.modal-xl.modal-dialog { max-width: 1000px; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.modal-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.modal-close {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-base);
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-xl);
  line-height: 1;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}

.modal-close:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

.modal-body {
  padding: var(--space-6);
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

/* Confirm Modal — 컴팩트 */
.modal-backdrop > .modal.modal-confirm { max-width: 360px; }   /* .modal-backdrop>.modal(520) 특정성 이김 */

.modal-confirm-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin: 0 auto var(--space-3);
}

.modal-confirm-icon.danger  { background: var(--color-danger-pale);  color: var(--color-danger); }
.modal-confirm-icon.warning { background: var(--color-warning-pale); color: var(--color-warning); }
.modal-confirm-icon.info    { background: var(--color-info-pale);    color: var(--color-text-secondary); }

.modal-confirm-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  margin-bottom: var(--space-2);
  line-height: var(--line-height-normal);
  text-wrap: balance;
  letter-spacing: -0.01em;
}

.modal-confirm-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-align: center;
  line-height: var(--line-height-relaxed);
  text-wrap: pretty;
}

/* 확인 모달 — 아이콘/제목/설명 중앙 정렬 + 중앙 버튼(테두리 없는 푸터) */
.modal-confirm .modal-body { padding: var(--space-6) var(--space-5) var(--space-3); }
.modal-confirm-foot {
  justify-content: center;
  border-top: none;
  padding-top: var(--space-2);
  padding-bottom: var(--space-5);
}
.modal-confirm-foot .btn { min-width: 100px; justify-content: center; }

.stats-grid {
  display: grid;
  gap: var(--space-5);
}

.stats-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stats-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stats-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.content-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.content-actions.end {
  justify-content: flex-end;
}

.section-note {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.content-prose {
  min-height: 200px;
  line-height: 1.8;
  white-space: pre-wrap;
  padding: var(--space-2) 0;
}

.meta-list {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.file-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.file-list li + li {
  border-top: 1px solid var(--color-border);
}

.file-list a {
  color: var(--color-primary);
  text-decoration: none;
}

.surface-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.surface-panel.muted {
  background: var(--color-bg);
}

.surface-panel-body {
  padding: var(--space-4);
}

.tree-marker {
  color: var(--color-text-muted);
  margin-right: var(--space-1);
}

@media (max-width: 1024px) {
  .stats-grid-4,
  .stats-grid-3,
  .stats-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .stats-grid-4,
  .stats-grid-3,
  .stats-grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =====================================================
   TOAST
   ===================================================== */
.toast-container {
  position: fixed;
  top: calc(var(--header-height) + var(--space-4));
  right: var(--space-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 300px;
  max-width: 400px;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  transform: translateX(120%);
  opacity: 0;
  transition: transform var(--transition-slow), opacity var(--transition-slow);
}

.toast.show {
  transform: translateX(0);
  opacity: 1;
}

.toast.hide {
  transform: translateX(120%);
  opacity: 0;
}

.toast-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  flex-shrink: 0;
  margin-top: 1px;
}

.toast.success .toast-icon { background: var(--color-success-pale); color: var(--color-success); }
.toast.error   .toast-icon { background: var(--color-danger-pale);  color: var(--color-danger);  }
.toast.warning .toast-icon { background: var(--color-warning-pale); color: var(--color-warning); }
.toast.info    .toast-icon { background: var(--color-info-pale);    color: var(--color-info);    }

/* Left accent bar */
.toast.success { border-left: 3px solid var(--color-success); }
.toast.error   { border-left: 3px solid var(--color-danger);  }
.toast.warning { border-left: 3px solid var(--color-warning); }
.toast.info    { border-left: 3px solid var(--color-info);    }

.toast-content {
  flex: 1;
  min-width: 0;
}

.toast-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin-bottom: 2px;
}

.toast-message {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
}

.toast-close {
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.toast-close:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

/* =====================================================
   DROPDOWN
   ===================================================== */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  min-width: 180px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2) 0;
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--transition-fast),
              visibility var(--transition-fast),
              transform var(--transition-fast);
}

.dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}

.dropdown-item:hover {
  background: var(--color-bg);
}

.dropdown-item.danger {
  color: var(--color-danger);
}

.dropdown-item.danger:hover {
  background: var(--color-danger-pale);
}

.dropdown-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-1) 0;
}

/* =====================================================
   TABS
   ===================================================== */
.tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden; /* overflow-x:auto가 y축을 auto로 만들어 생기는 1px 유령 스크롤바 방지 */
}

.tab-item {
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  text-decoration: none;
}

.tab-item:hover {
  color: var(--color-text);
}

.tab-item.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* =====================================================
   ALERT
   ===================================================== */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--font-size-sm);
}

.alert-primary { background: var(--color-primary-pale); border-color: var(--color-border-strong); color: var(--color-primary-dark); }
.alert-success { background: var(--color-success-pale); border-color: #bbf7d0; color: #166534; }
.alert-warning { background: var(--color-warning-pale); border-color: #fde68a; color: #92400e; }
.alert-danger  { background: var(--color-danger-pale);  border-color: #fecaca; color: #991b1b; }
.alert-info    { background: var(--color-info-pale);    border-color: var(--color-border-strong); color: var(--color-info); }

/* =====================================================
   LOADING / SPINNER
   ===================================================== */
.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

.spinner-sm {
  width: 14px;
  height: 14px;
  border-width: 2px;
}

.spinner-lg {
  width: 36px;
  height: 36px;
  border-width: 3px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  z-index: 10;
}

/* =====================================================
   FILE UPLOAD
   ===================================================== */
.file-drop-zone {
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.file-drop-zone:hover,
.file-drop-zone.drag-over {
  border-color: var(--color-primary);
  background-color: var(--color-primary-pale);
}

.file-drop-icon {
  font-size: 2rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.file-drop-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.file-drop-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* Filter Bar */
.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-6);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

/* =====================================================
   UTILITY EXTENSIONS
   ===================================================== */

/* Full-width button */
.btn-block {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}

/* Alert icon wrapper */
.alert-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Login page */
.login-form .form-group {
  margin-bottom: var(--space-4);
}
.login-form .form-group:last-of-type {
  margin-bottom: var(--space-6);
}

/* Form option rows (radio / checkbox groups) */
.form-options {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.form-option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}
.form-option input[type="radio"],
.form-option input[type="checkbox"] {
  margin: 0;
}

/* Empty state */
.empty-state {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Muted / secondary text helpers */
.text-muted { color: var(--color-text-muted); }
.text-danger { color: var(--color-danger); }
.text-success { color: var(--color-success); }
.text-small { font-size: var(--font-size-xs); }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Generic meta table (detail pages) */
.meta-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-4);
}
.meta-table th,
.meta-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  text-align: left;
  vertical-align: top;
}
.meta-table th {
  width: 140px;
  background: var(--color-bg);
  color: var(--color-text-secondary);
  font-weight: 500;
}

/* Content box for read-only long text */
.content-box {
  padding: var(--space-5);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  white-space: pre-wrap;
  line-height: 1.7;
  color: var(--color-text);
  font-size: var(--font-size-sm);
}

/* Pinned indicator */
.pinned-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  background: var(--color-warning-pale);
  color: #92400e;
  font-size: var(--font-size-xs);
}

/* Indented menu tree */
.menu-tree-indent {
  display: inline-block;
  width: var(--space-8);
}

/* Table column widths (standardized) */
.table .col-num    { width: 60px; }
.table .col-date   { width: 160px; }
.table .col-status { width: 80px; }
.table .col-actions{ width: 220px; }
.table .col-id     { width: 70px; }

/* Table responsive wrapper */
.table-responsive {
  width: 100%;
  overflow-x: auto;
}
.table-responsive > table {
  width: 100%;
  border-collapse: collapse;
}

/* Card body with top border (for pagination area) */
.card-body-bordered {
  border-top: 1px solid var(--color-border);
}

/* Grid gap helpers */
.grid-gap-lg { gap: var(--space-6); align-items: start; }

/* Menu check list (role permission modal) */
.menu-check-list {
  max-height: 360px;
  overflow-y: auto;
  padding-right: var(--space-2);
}
.menu-check-group {
  margin-bottom: var(--space-3);
}
.menu-check-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}
.menu-check-parent {
  font-weight: 600;
  color: var(--color-text-secondary);
}
.menu-check-sub {
  padding-left: var(--space-6);
}

/* Menu tree indent arrow */
.menu-tree-indent {
  display: inline-block;
  margin-right: var(--space-2);
}

/* Menu list table styling */
.menu-row-parent td {
  background: var(--color-bg);
}
.menu-cell-sub {
  padding-left: var(--space-8) !important;
}
.menu-tree-branch {
  color: var(--color-text-muted);
  margin-right: var(--space-1);
}

/* =====================================================
   EXTENDED UTILITIES (added in refactoring)
   ===================================================== */

/* Additional table columns */
.table .col-pin      { width: 40px; text-align: center; }
.table .col-author   { width: 120px; }
.table .col-views    { width: 80px; }
.table .col-email    { width: 180px; }
.table .col-category { width: 140px; }
.table .col-mini     { width: 50px; text-align: center; }
.table .col-method   { width: 80px; }
.table .col-ip       { width: 140px; }

/* Table link (makes <a> blend into table cell) */
.table-link {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
}
.table-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Hoverable table rows */
.table-hover tbody tr:hover {
  background: var(--color-bg);
}
.row-clickable {
  cursor: pointer;
}

/* Breadcrumb link */
.breadcrumb-link {
  color: inherit;
  text-decoration: none;
}
.breadcrumb-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Grid gap helpers */
.grid-gap-md { gap: var(--space-5); }

/* Inline lock icon for table rows */
.lock-icon {
  margin-right: var(--space-1);
}

/* Form action row (buttons on the right) */
.form-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-top: var(--space-6);
  flex-wrap: wrap;
}

/* Form help text */
.form-help {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
  margin-bottom: 0;
}

/* Form textarea (prevent horizontal resize) */
.form-textarea {
  resize: vertical;
  min-height: 120px;
}

/* Narrow form control (for order/status) */
.form-control-narrow {
  max-width: 140px;
}
.form-control-sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-xs);
  height: auto;
}

/* (구) 검색바 정렬 규칙 — 새 2단 구조(.search-fields/.search-actions)로 대체됨.
   input 좌정렬만 유지. */
.search-bar .form-control { text-align: left; }

/* Button group (inline buttons) */
.btn-group {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Detail page elements */
.detail-header {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
}
.detail-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}
.detail-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin: 0;
}
.detail-meta {
  display: flex;
  gap: var(--space-4);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  flex-wrap: wrap;
}
.detail-content {
  min-height: 200px;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere; /* 긴 URL·연속 문자열이 가로로 넘치지 않고 줄바꿈되도록 */
  padding: var(--space-2) 0;
}
.detail-attachments {
  margin-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}
.detail-attachments-title {
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.detail-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-top: var(--space-8);
  flex-wrap: wrap;
}

/* Attachment list */
.attachment-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.attachment-list li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}
.attachment-list li:last-child {
  border-bottom: none;
}
.attachment-link {
  color: var(--color-primary);
  text-decoration: none;
}
.attachment-link:hover {
  text-decoration: underline;
}
.attachment-size {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  margin-left: var(--space-2);
}

/* Inquiry answer / content block */
.content-inline {
  white-space: pre-wrap;
  line-height: 1.7;
}

/* Visibility helpers */
.is-hidden { display: none !important; }
.mb-3 { margin-bottom: var(--space-3); }
.ml-2 { margin-left: var(--space-2); }
.font-italic { font-style: italic; }
.font-semibold { font-weight: 600; }
.text-primary { color: var(--color-primary); }
.text-warning { color: var(--color-warning); }
.text-break { word-break: break-all; }

/* Inner card inside modal */
.inner-card {
  padding: var(--space-4);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.inner-card-title {
  font-size: var(--font-size-md);
  font-weight: 600;
  margin-bottom: var(--space-3);
  margin-top: 0;
}

/* Card description helper (dashboard bokmark cards) */
.card-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

/* Stats filter bar */
.stats-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.stats-total {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.stats-total-value {
  color: var(--color-primary);
  font-size: var(--font-size-lg);
}

/* 차트 캔버스 래퍼 — maintainAspectRatio:false와 함께 높이를 고정한다 */
.chart-wrap {
  position: relative;
  height: 300px;
}

/* 대시보드 최근 현황 리스트 */
.dash-list { list-style: none; margin: 0; padding: 0; }
.dash-list li + li { border-top: 1px solid var(--color-border); }
.dash-list-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  text-decoration: none;
  transition: background var(--transition-fast);
}
.dash-list-link:hover { background: var(--color-bg); }
.dash-list-title {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.dash-list-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.dash-list-empty {
  padding: var(--space-8) var(--space-6);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}


/* =====================================================
   REDESIGN — 목록 툴바 · 폼 카드 · 파일 입력 · 빈 상태
   ===================================================== */

/* 목록: 검색/필터를 테이블 카드 상단 툴바로 통합 (이중 카드 제거) */
.card-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.card-toolbar > form,
.card-toolbar > .search-bar { width: 100%; margin: 0; }

/* 폼 페이지: 가독 폭 제한 (무제한 폭 방지) */
.form-card { max-width: 880px; }

/* 2열 폼 그리드 */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-5);
}
.form-grid .col-span-2 { grid-column: 1 / -1; }
/* fieldset을 form-grid로 쓸 때 기본 테두리/여백 제거 */
fieldset.form-grid { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.form-grid:disabled { opacity: 0.6; }
/* 라벨 아래 인라인 체크박스(활성 등) */
.check-inline { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); color: var(--color-text); cursor: pointer; padding: 6px 0; }
.check-inline input { width: 15px; height: 15px; }

/* =====================================================
   TABLE-STYLE FORM (라벨셀 + 값셀 격자) — 상세영역
   ===================================================== */
/* 상세 섹션: 제목(언더라인) + 테이블이 하나의 컴포넌트로 보이도록(reference: 학적기본정보/신상정보) */
.detail-section { margin-top: var(--space-6); }
.detail-section-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}
.detail-section-hint {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
}
/* 상세 섹션 헤더: 좌측 제목 + 우측 액션 버튼(저장/삭제) */
.detail-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.detail-section-head .detail-section-title { margin-bottom: 0; }

/* 반응형 col 시스템: 필드(라벨+입력)를 .ft-col로 묶고 col-25/50/75/100으로 폭(%) 지정.
   한 행의 col 합이 100이 되도록 구성. 폭은 100% 기준 비율이라 반응형으로 늘어남. */
.form-table {
  display: flex; flex-wrap: wrap; width: 100%;
  border: none;   /* fieldset 기본 groove 테두리(우/하단 음영) 제거 */
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  overflow: hidden;
  box-shadow: none;
}
fieldset.form-table { margin: 0; padding: 0; min-width: 0; }
/* 행 미선택 등 비활성 상태를 시각적으로도 구분 */
fieldset.form-table:disabled { opacity: 0.55; }
fieldset.form-table:disabled .form-control { cursor: not-allowed; }
/* 비활성(행 미선택) 시: 전체 흐림 대신 입력 컨트롤만 회색 음영 처리 */
.ft-value > .form-control:disabled,
.ft-value > .form-control[readonly] { background: var(--color-bg); color: var(--color-text-secondary); cursor: not-allowed; }
.ft-value .check-inline input:disabled { cursor: not-allowed; }
.ft-col { display: flex; align-items: stretch; box-sizing: border-box; min-height: 34px; min-width: 0; }
.col-25 { width: 25%; }
.col-50 { width: 50%; }
.col-75 { width: 75%; }
.col-100 { width: 100%; }
.ft-label {
  width: 92px; flex-shrink: 0;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  display: flex; align-items: center; justify-content: center;  /* 라벨 가운데 정렬 */
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
  color: var(--color-text); padding: 0 var(--space-2); gap: 2px; white-space: nowrap;
}
.ft-label .req { color: var(--color-danger); font-weight: var(--font-weight-bold); }
/* 값셀: 라운드된 input으로 '입력 영역'임을 명확히 */
.ft-value {
  flex: 1; min-width: 0;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  display: flex; align-items: center;
  padding: var(--space-1) var(--space-2);
}
.ft-value > .form-control {
  height: auto; width: 100%; padding: 0.2rem 0.5rem; font-size: var(--font-size-xs);
}
.ft-value > input[readonly].form-control { background: var(--color-bg); color: var(--color-text-secondary); }
.ft-value .check-inline { padding: 0; font-size: var(--font-size-xs); }
/* 모바일/태블릿: 상세영역을 세로로 쌓지 않고 가로 스크롤로(글자 줄바꿈 대신 스크롤) */
@media (max-width: 1024px) {
  .detail-section { overflow-x: auto; }
  .form-table { min-width: 640px; }
}
@media (max-width: 640px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* 네이티브 파일 입력 → 버튼 스타일 정렬 (무채색) */
input[type="file"].form-control {
  padding: calc(var(--space-2) - 1px) var(--space-3);
  line-height: 1.7;
  cursor: pointer;
}
input[type="file"].form-control::file-selector-button {
  margin-right: var(--space-3);
  padding: calc(var(--space-1) + 1px) var(--space-3);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}
input[type="file"].form-control::file-selector-button:hover {
  background: var(--color-bg-secondary);
}

/* 인라인 아이콘(SVG) — 텍스트와 수직 중앙 정렬 (베이스라인에 떠 보이는 문제 해결).
   flex/grid 컨테이너(.btn/.badge/.stat-icon 등)의 아이콘은 vertical-align 영향 없음 → 안전. */
.main-content svg { vertical-align: middle; }
/* 아이콘 + 라벨을 한 줄로 정렬 (상단 고정 등) */
.form-option span,
.detail-attachments-title { display: inline-flex; align-items: center; gap: var(--space-1); }

/* 대시보드 — 섹션 라벨 · 바로가기 카드 (헤더 보더 제거로 여백 정리) */
.section-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-3);
}
.quick-card { display: flex; flex-direction: column; height: 100%; }
.quick-card .card-body { display: flex; flex-direction: column; flex: 1; padding: var(--space-5); }
.quick-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.quick-card-head .card-title { font-size: var(--font-size-base); }
.quick-card .card-description { flex: 1; margin-bottom: var(--space-4); }

/* 빈 상태 — 테이블 셀 안에서도 특이도 확보하여 넉넉하게 */
.table td.empty-state,
.table td.table-empty {
  padding: var(--space-12) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .filter-bar {
    padding: var(--space-3) var(--space-4);
  }
  .page-content {
    padding: var(--space-4);
  }
  .modal-dialog {
    margin: var(--space-3);
    max-width: calc(100vw - var(--space-6));
  }
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive table {
    min-width: 640px;
  }
  .meta-table th {
    width: 96px;
  }
  .form-options {
    gap: var(--space-3);
  }
}

/* ─── 커스텀 셀렉트 드롭다운 ─── */
.cs-menu {
  position: fixed; z-index: 3000;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-lg);
  max-height: 260px; overflow-y: auto;
  padding: 4px; min-width: 120px;
}
.cs-item {
  padding: 6px 10px; font-size: var(--font-size-sm);
  color: var(--color-text); cursor: pointer; border-radius: var(--radius-sm);
  white-space: nowrap;
}
.cs-item:hover { background: var(--color-bg); }
.cs-item.is-selected { background: var(--color-primary); color: #fff; }