/* =============================================
   해모아 창호 AS 시스템 — 공통 테마
   업무용 남색/파랑/흰색 계열. 기능/마크업 구조 변경 없이 색상·스타일만 통일.
   ※ 페이지별 인라인 <style> 가 이후에 로드되어 우선하므로,
     이 파일은 (1) 브랜드 팔레트 변수 (2) 공통 컴포넌트 클래스(hm-*) 를 제공한다.
   ============================================= */

:root {
  --hm-navy: #1e3a8a;       /* 진한 남색 (강조/헤더) */
  --hm-navy-700: #1d4ed8;
  --hm-blue: #2563eb;       /* 기본 파랑 (주요 버튼) */
  --hm-blue-600: #2563eb;
  --hm-blue-500: #3b82f6;
  --hm-blue-50: #eff6ff;
  --hm-ink: #1f2937;        /* 본문 글자 */
  --hm-sub: #6b7280;        /* 보조 글자 */
  --hm-line: #e5e7eb;       /* 경계선 */
  --hm-bg: #f1f5f9;         /* 앱 배경 */
  --hm-surface: #ffffff;    /* 카드 표면 */
  --hm-header: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
  --hm-radius: 12px;

  /* 상태 색 */
  --hm-urgent-bg: #fee2e2;  --hm-urgent-fg: #b91c1c;
  --hm-unpaid-bg: #fef3c7;  --hm-unpaid-fg: #92400e;
  --hm-ok-bg: #d1fae5;      --hm-ok-fg: #065f46;
}

/* 브랜드 헤더 그라데이션 (보라 대체용) */
.hm-header-bg { background: var(--hm-header); color: #fff; }
.hm-app-bg { background: var(--hm-bg); }

/* 공통 버튼 */
.hm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; border-radius: var(--hm-radius); padding: 10px 16px;
  font-size: 14px; font-weight: 700; cursor: pointer; transition: .15s;
}
.hm-btn-primary { background: var(--hm-blue); color: #fff; }
.hm-btn-primary:hover { background: var(--hm-navy); }
.hm-btn-ghost { background: var(--hm-blue-50); color: var(--hm-navy); }
.hm-btn-gray { background: #e5e7eb; color: #374151; }
.hm-btn-danger { background: #dc2626; color: #fff; }
.hm-btn-lg { padding: 14px 18px; font-size: 16px; border-radius: 14px; }

/* 공통 카드 */
.hm-card {
  background: var(--hm-surface); border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08); padding: 16px;
}

/* 공통 입력 */
.hm-input {
  width: 100%; border: 1px solid var(--hm-line); border-radius: 10px;
  padding: 10px 14px; font-size: 14px; outline: none; background: #fff;
}
.hm-input:focus { border-color: var(--hm-blue); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }

/* 브랜드 로고 (파란 헤더 위 흰색 로고) — 제목 텍스트와 한 줄 정렬 */
.haemoa-logo { height: 40px; width: auto; display: block; flex-shrink: 0; }

/* 상태 배지 (긴급/잔금은 차분하게 — 깜빡임 없음) */
.hm-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 9999px; font-size: 11px; font-weight: 700;
  line-height: 1.4;
}
.hm-badge-urgent { background: var(--hm-urgent-bg); color: var(--hm-urgent-fg); }
.hm-badge-unpaid { background: var(--hm-unpaid-bg); color: var(--hm-unpaid-fg); }
.hm-badge-done   { background: var(--hm-ok-bg);     color: var(--hm-ok-fg); }