* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── 핵심 색상 ── */
  --c-navy:          #0F2856;   /* 헤더·주요 버튼 */
  --c-navy-hover:    #0A1E42;
  --c-blue:          #1B5EB0;   /* 링크·포커스 */
  --c-blue-light:    #E8EFFA;   /* 포커스 링 */
  --c-gold:          #B8860B;   /* 헤더 포인트 */

  /* ── 배경 ── */
  --c-bg:            #EEF1F7;   /* 페이지 배경 */
  --c-surface:       #FFFFFF;
  --c-surface-2:     #F4F6FB;   /* 테이블 헤더·사이드바 헤더 */
  --c-surface-3:     #E8ECF4;   /* 강조 배경 */

  /* ── 경계선 ── */
  --c-border:        #C8CDD8;
  --c-border-dark:   #A8ADB9;
  --c-divider:       #D8DCE6;

  /* ── 텍스트 ── */
  --c-ink:           #12202F;
  --c-body:          #2D3A4C;
  --c-muted:         #5A6478;

  /* ── 상태 색상 ── */
  --c-danger:        #B91C1C;
  --c-danger-bg:     #FEE2E2;
  --c-success:       #116832;
  --c-success-bg:    #DCFCE7;
  --c-warn:          #92400E;
  --c-warn-bg:       #FEF3C7;

  /* ── 형태 ── */
  --r-sm:  3px;
  --r-md:  4px;
  --r-lg:  4px;

  /* ── 구 변수 호환 (기존 JS 참조 없음, CSS 내부 참조용) ── */
  --color-primary:        var(--c-navy);
  --color-primary-active: var(--c-navy-hover);
  --color-canvas:         var(--c-surface);
  --color-surface-soft:   var(--c-surface-2);
  --color-surface-strong: var(--c-surface-3);
  --color-surface-dark:   var(--c-navy);
  --color-hairline:       var(--c-border);
  --color-ink:            var(--c-ink);
  --color-body:           var(--c-body);
  --color-muted:          var(--c-muted);
  --color-link:           var(--c-blue);
  --color-coral:          var(--c-danger);
  --color-coral-light:    var(--c-danger-bg);
  --color-danger:         var(--c-danger);
  --color-success:        var(--c-success);
  --rounded-lg:           var(--r-lg);
  --rounded-md:           var(--r-md);
  --rounded-sm:           var(--r-sm);
}

body {
  font-family: "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  font-size: 14px;
  color: var(--c-body);
  line-height: 1.55;
  word-break: keep-all;
}

/* ═══════════════════════ 버튼 ═══════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 14px; font-weight: 600;
  padding: 8px 18px;
  font-family: inherit; white-space: nowrap; line-height: 1.4;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  letter-spacing: 0.01em;
}
.btn:disabled { opacity: 0.42; cursor: not-allowed; }

.btn-primary {
  background: var(--c-navy);
  color: #fff;
  border-color: var(--c-navy);
}
.btn-primary:not(:disabled):hover  { background: var(--c-navy-hover); border-color: var(--c-navy-hover); }
.btn-primary:not(:disabled):active { background: #060F24; }

.btn-secondary {
  background: var(--c-surface);
  color: var(--c-navy);
  border: 1.5px solid var(--c-navy);
}
.btn-secondary:not(:disabled):hover  { background: var(--c-blue-light); }
.btn-secondary:not(:disabled):active { background: #D3DFF5; }

.btn-danger {
  background: var(--c-danger);
  color: #fff;
  border-color: var(--c-danger);
}
.btn-danger:not(:disabled):hover  { background: #991B1B; }
.btn-danger:not(:disabled):active { background: #7F1D1D; }

.btn-success {
  background: var(--c-success);
  color: #fff;
  border-color: var(--c-success);
}
.btn-success:not(:disabled):hover  { background: #0D5329; }
.btn-success:not(:disabled):active { background: #0A3E20; }

.btn-warning {
  background: var(--c-warn);
  color: #fff;
  border-color: var(--c-warn);
}
.btn-warning:not(:disabled):hover  { background: #78340F; }

.btn-light {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.30);
}
.btn-light:not(:disabled):hover  { background: rgba(255,255,255,0.22); }
.btn-light:not(:disabled):active { background: rgba(255,255,255,0.32); }

.btn-sm { padding: 4px 10px; font-size: 12px; font-weight: 600; }

/* ═══════════════════════ 폼 ═══════════════════════ */
.form-control {
  width: 100%; height: 42px; padding: 0 12px;
  border: 1.5px solid var(--c-border-dark);
  border-radius: var(--r-sm);
  font-size: 14px; color: var(--c-ink);
  background: var(--c-surface);
  outline: none; font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus {
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px var(--c-blue-light);
}
select.form-control { height: 42px; }

/* ═══════════════════════ 유틸 ═══════════════════════ */
.hidden { display: none !important; }