/* =====================================================
   component.css - 공통 컴포넌트 (버튼, 배지, 아이콘 등)
   ===================================================== */

/* ─── 아이콘 배경 클래스 ───────────────────────────── */
.bg-primary { background:var(--primary); }
.bg-red     { background:var(--color-red); }
.bg-orange  { background:var(--color-orange); }
.bg-blue    { background:var(--color-blue); }
.bg-teal    { background:var(--color-teal); }
.bg-indigo  { background:var(--color-indigo); }

/* ─── 텍스트 컬러 유틸 ─────────────────────────────── */
.text-primary { color:var(--primary); }
.text-red     { color:var(--color-red); }
.text-blue    { color:var(--color-blue); }
.text-muted   { color:var(--text-muted); }
.text-sub     { color:var(--text-sub); }

/* ─── 공통 버튼 ────────────────────────────────────── */
.btn-primary {
  background:var(--primary); color:var(--text-dark-hi);
  border:none; border-radius:6px; padding:7px 16px;
  font-size:13px; font-weight:600; cursor:pointer;
  transition:background .15s; font-family:var(--font-family);
}
.btn-primary:hover { background:var(--primary-dark); }

.btn-outline {
  background:var(--card-bg); color:var(--text-main);
  border:1px solid var(--border-color); border-radius:6px; padding:6px 14px;
  font-size:13px; font-weight:600; cursor:pointer;
  transition:all .15s; font-family:var(--font-family);
}
.btn-outline:hover { border-color:var(--primary); color:var(--primary); }

.btn-danger {
  background:var(--color-red); color:var(--text-dark-hi);
  border:none; border-radius:6px; padding:7px 16px;
  font-size:13px; font-weight:600; cursor:pointer;
  transition:background .15s; font-family:var(--font-family);
}
.btn-danger:hover { background:#e03e3e; }

/* ─── 상태 배지 ────────────────────────────────────── */
.badge {
  display:inline-block; padding:3px 8px; border-radius:20px;
  font-size:11px; font-weight:700; line-height:1.4;
}
.badge-success { background:var(--primary-light); color:var(--primary-dark); }
.badge-danger  { background:#ffebee; color:var(--color-red); }
.badge-warning { background:#fff3e0; color:var(--color-orange); }
.badge-info    { background:#e3f2fd; color:var(--color-blue); }
.badge-muted   { background:var(--border-inner); color:var(--text-sub); }

/* ─── 폼 컨트롤 ────────────────────────────────────── */
.form-input {
  width:100%; border:1px solid var(--border-color); border-radius:6px;
  padding:7px 12px; font-size:13px; color:var(--text-main);
  background:var(--card-bg); outline:none; transition:border-color .15s;
  font-family:var(--font-family);
}
.form-input:focus { border-color:var(--primary); }
.form-input::placeholder { color:var(--text-muted); }

.form-select {
  border:1px solid var(--border-color); border-radius:6px;
  padding:7px 10px; font-size:13px; color:var(--text-main);
  background:var(--card-bg); outline:none; cursor:pointer;
  font-family:var(--font-family);
}
.form-select:focus { border-color:var(--primary); }

/* ─── 테이블 기본 ──────────────────────────────────── */
.tbl {
  width:100%; border-collapse:collapse; font-size:13px;
}
.tbl thead th {
  background:var(--border-inner); color:var(--text-sub);
  font-weight:700; padding:9px 12px; text-align:left;
  border-bottom:1px solid var(--border-color); white-space:nowrap;
}
.tbl tbody td {
  padding:9px 12px; border-bottom:1px solid var(--border-row);
  color:var(--text-main); vertical-align:middle;
}
.tbl tbody tr:hover td { background:var(--primary-light); }
.tbl tbody tr:last-child td { border-bottom:none; }

/* ─── 페이지 타이틀 ────────────────────────────────── */
.page-title {
  font-size:16px; font-weight:800; color:var(--text-main);
  margin-bottom:16px; margin-top:5px;
  display:flex; align-items:center; gap:8px;
}

/* ─── 유틸 ────────────────────────────────────────── */
.info-icon { color:var(--text-muted); font-size:11px; cursor:pointer; margin-left:2px; }
.divider-v { width:1px; background:var(--border-color); align-self:stretch; margin:0 8px; }