/* =====================================================
   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; }

/* ── 이메일 미인증 배너 (2026-08-30) ──────────────────────────
   위치: 마이페이지 page-head 아래 · 서비스 카드 위
   ★ 경고색(빨강)을 쓰지 않는다. 오류가 아니라 안내다.
     빨강으로 하면 매번 사고처럼 보이고, 그러면 사용자가 무시하는 법을 배운다.
   ★ 닫기 버튼을 두지 않는다. 닫으면 잊고, 잊으면 아무도 인증하지 않는다.
   한 줄로 유지한다 — 매번 보는 자리라 크면 거슬린다. */
/* ── SSO 진입 실패 배너 (2026-08-31) ──────────────────────────
   verify-banner(안내·노랑)와 달리 이건 **실패**다 — 붉은 계열.
   플래시라 한 번만 보이므로 무뎌질 걱정이 없다 (매번 보는 배너가 아니다). */
.sso-error-banner {
    display:flex; align-items:center; gap:12px;
    padding:12px 16px; margin:0 0 20px;
    background:#fff5f5; border:1px solid #ffc9c9; border-radius:8px;
}
.sso-error-icon { color:#e03131; font-size:18px; flex:0 0 auto; }
.sso-error-text { flex:1 1 auto; font-size:14px; color:#c92a2a; line-height:1.5; }
@media (max-width:768px) {
    .sso-error-banner { align-items:flex-start; }
}

.verify-banner {
    display:flex; align-items:center; gap:12px;
    padding:12px 16px; margin:0 0 20px;
    background:#fff9db; border:1px solid #ffe066; border-radius:8px;
}
.verify-banner-icon { color:#f08c00; font-size:18px; flex:0 0 auto; }
.verify-banner-text { flex:1 1 auto; font-size:14px; color:#5c5f66; line-height:1.5; }
.verify-banner-btn {
    flex:0 0 auto; padding:8px 16px; white-space:nowrap;
    background:#f08c00; color:#fff; border:0; border-radius:6px;
    font-size:13px; font-weight:600; cursor:pointer;
}
.verify-banner-btn:hover:not(:disabled) { background:#e67700; }
.verify-banner-btn:disabled { background:#adb5bd; cursor:default; }

@media (max-width:640px) {
    .verify-banner { flex-wrap:wrap; }
    .verify-banner-text { flex:1 1 100%; order:2; }
    .verify-banner-btn  { order:3; width:100%; }
}