/* =============================================================
 * hermes.css — Hermes 공용 디자인 시스템 (라이트 모던)
 *
 * 사용: 각 페이지 <head>의 페이지별 <style> "뒤"에 링크한다.
 *   <link rel="stylesheet" href="/hermes/hermes.css">
 * 나중에 로드되므로 같은 특이도의 페이지 규칙을 덮어쓴다.
 *
 * ⚠️ 인쇄 양식(.form, table.info, table.items, 견적/명세 출력 영역)은
 *    절대 건드리지 않는다 — 모든 규칙은 화면(UI) 요소에 한정.
 * ============================================================= */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

:root {
  --hx-bg: #f6f7f9;
  --hx-surface: #ffffff;
  --hx-border: #e5e7eb;
  --hx-border-strong: #d1d5db;
  --hx-text: #1a202c;
  --hx-muted: #64748b;
  --hx-primary: #2563eb;
  --hx-primary-dark: #1d4ed8;
  --hx-primary-soft: #eff6ff;
  --hx-green: #059669;
  --hx-red: #dc2626;
  --hx-amber: #d97706;
  --hx-purple: #7c3aed;
  --hx-teal: #0d9488;
  --hx-radius: 12px;
  --hx-radius-sm: 8px;
  --hx-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --hx-shadow-lg: 0 4px 6px -2px rgba(16, 24, 40, .05), 0 12px 24px -4px rgba(16, 24, 40, .12);
  --hx-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
             "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

/* ───── 베이스 ───── */
body {
  font-family: var(--hx-font);
  background: var(--hx-bg);
  color: var(--hx-text);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}
h1 { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }

/* ───── 상단 네비게이션 (hermes-ui.js가 주입) ───── */
.hx-nav {
  position: sticky; top: 0; z-index: 900;
  display: flex; align-items: center; gap: 2px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hx-border);
  padding: 0 14px; height: 50px;
  margin: 0 0 16px 0;
  overflow-x: auto; white-space: nowrap;
  font-family: var(--hx-font);
}
.hx-nav .hx-logo {
  font-size: 15px; font-weight: 800; color: var(--hx-text);
  text-decoration: none; margin-right: 14px; letter-spacing: -0.02em;
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.hx-nav .hx-logo .hx-dot { color: var(--hx-primary); }
.hx-nav a.hx-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--hx-muted);
  text-decoration: none; transition: background .12s, color .12s;
  flex-shrink: 0;
}
.hx-nav a.hx-link:hover { background: #f1f5f9; color: var(--hx-text); }
.hx-nav a.hx-link.active { background: var(--hx-primary-soft); color: var(--hx-primary); }
.hx-nav .hx-spacer { flex: 1; min-width: 60px; }

/* auth-guard 사용자 배지 — 네비게이션 높이에 맞춤 */
#hermes-user-badge {
  top: 9px !important; right: 12px !important;
  background: #f1f5f9 !important; color: #334155 !important;
  box-shadow: none !important; border: 1px solid var(--hx-border) !important;
}
#hermes-user-badge button { background: #334155 !important; }
/* 기존 "← Hermes 홈" 링크는 네비게이션으로 대체 */
a[data-hermes-home] { display: none !important; }

/* ───── 패널 / 카드 ───── */
.panel {
  background: var(--hx-surface);
  border: 1px solid var(--hx-border);
  border-radius: var(--hx-radius);
  box-shadow: var(--hx-shadow);
}

/* ───── 버튼 (페이지의 색상 클래스는 그대로 우선됨) ───── */
button {
  font-family: var(--hx-font);
  border-radius: var(--hx-radius-sm);
  font-weight: 600;
  transition: filter .12s, transform .05s;
}
button:hover { filter: brightness(.96); }
button:active { transform: translateY(1px); }

/* ───── 입력 요소 ───── */
input[type=text], input[type=date], input[type=number], input[type=password],
input[type=search], input[type=email], select, textarea {
  font-family: var(--hx-font);
  border: 1px solid var(--hx-border-strong);
  border-radius: var(--hx-radius-sm);
  background: #fff;
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--hx-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

/* ───── 모달 ───── */
.modal-bg { background: rgba(15, 23, 42, .45); backdrop-filter: blur(2px); }
.modal {
  border-radius: var(--hx-radius);
  box-shadow: var(--hx-shadow-lg);
  border: 1px solid var(--hx-border);
}

/* ───── 스크롤바 (Webkit) ───── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; border: 2px solid var(--hx-bg); }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
::-webkit-scrollbar-track { background: transparent; }

/* ───── 반응형 공용 레이어 (화면 전용) ─────
 * 폰 ≤640px / 태블릿 641~1024px / PC >1024px
 * 네비 높이는 50px 고정 유지 (hermes-ui.js sticky 보정과 일치) */
.hx-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

@media screen and (max-width: 1024px) {
  .hx-nav { padding: 0 10px; }
}

@media screen and (max-width: 640px) {
  .hx-nav { padding: 0 8px; gap: 0; margin-bottom: 12px; }
  .hx-nav .hx-logo { font-size: 14px; margin-right: 8px; }
  .hx-nav a.hx-link { padding: 6px 8px; font-size: 12px; gap: 4px; }
  #hermes-user-badge { right: 8px !important; font-size: 11px !important; }

  /* iOS Safari: 16px 미만 입력 포커스 시 화면 자동 확대 방지
   * 단, 표 안의 컴팩트 입력(상품관리·일괄 등)은 페이지 크기 유지 */
  input[type=text], input[type=date], input[type=number], input[type=password],
  input[type=search], input[type=email], select, textarea { font-size: 16px; }
  table input[type=text], table input[type=number], table select { font-size: inherit; }
}

/* ───── 인쇄: 네비·배지 숨김, 인쇄 양식은 페이지 규칙 그대로 ───── */
@media print {
  .hx-nav, #hermes-user-badge { display: none !important; }
  body { background: #fff; }
}

/* =============================================================
 * UI 테마(스킨) — 사용자별 선택 (auth-guard.js 가 html[data-hermes-theme] 설정)
 *   기본(default) = 위 :root 운영 셋팅 그대로.
 *   각 테마는 공용 --hx-* 와 페이지 로컬(--bg/--card/--primary/--text/--muted/--border)을
 *   함께 덮어써 전 페이지에 색감을 적용한다. (인쇄 양식은 위 @media print 보호 규칙으로 무관)
 *   ⚠️ html[data-hermes-theme] 는 :root 보다 특이도가 높고 페이지 <style> 보다 늦게 로드되어 우선 적용됨.
 * ============================================================= */

/* 클로드 — 따뜻한 오프화이트 + 테라코타 */
html[data-hermes-theme="claude"] {
  --hx-bg:#F9F8F6; --hx-surface:#ffffff; --hx-border:#E5E3D9; --hx-border-strong:#d9d5c7;
  --hx-text:#2D2B2B; --hx-muted:#8a857d; --hx-primary:#D97757; --hx-primary-dark:#C66547; --hx-primary-soft:#fbeee8;
  --hx-radius:16px; --hx-radius-sm:10px;
  --bg:#F9F8F6; --card:#ffffff; --surface:#ffffff; --border:#E5E3D9;
  --text:#2D2B2B; --muted:#8a857d; --primary:#D97757; --primary-dark:#C66547;
}
/* 애플 — 미니멀 화이트 + 시스템 블루 */
html[data-hermes-theme="apple"] {
  --hx-bg:#fbfbfd; --hx-surface:#ffffff; --hx-border:#e3e3e8; --hx-border-strong:#d2d2d7;
  --hx-text:#1d1d1f; --hx-muted:#6e6e73; --hx-primary:#0071e3; --hx-primary-dark:#0077ed; --hx-primary-soft:#e8f2fe;
  --hx-radius:18px; --hx-radius-sm:12px;
  --hx-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  --bg:#fbfbfd; --card:#ffffff; --surface:#ffffff; --border:#e3e3e8;
  --text:#1d1d1f; --muted:#6e6e73; --primary:#0071e3; --primary-dark:#0077ed;
}
/* 구글 — 화이트 카드 + 구글 블루 */
html[data-hermes-theme="google"] {
  --hx-bg:#ffffff; --hx-surface:#ffffff; --hx-border:#dadce0; --hx-border-strong:#c4c7cc;
  --hx-text:#202124; --hx-muted:#5f6368; --hx-primary:#1a73e8; --hx-primary-dark:#1b66c9; --hx-primary-soft:#e8f0fe;
  --hx-radius:8px; --hx-radius-sm:4px;
  --hx-font:"Google Sans",Roboto,"Noto Sans KR",Arial,sans-serif;
  --bg:#ffffff; --card:#ffffff; --surface:#ffffff; --border:#dadce0;
  --text:#202124; --muted:#5f6368; --primary:#1a73e8; --primary-dark:#1b66c9;
}
/* 트위터(X) — 다크 + X 블루 (실험적: 일부 흰색 고정 영역은 밝게 보일 수 있음) */
html[data-hermes-theme="x"] {
  --hx-bg:#15202B; --hx-surface:#192734; --hx-border:#38444D; --hx-border-strong:#46555f;
  --hx-text:#ffffff; --hx-muted:#8899A6; --hx-primary:#1D9BF0; --hx-primary-dark:#1A8CD8; --hx-primary-soft:#1c2f3f;
  --hx-radius:16px; --hx-radius-sm:9999px;
  --bg:#15202B; --card:#192734; --surface:#192734; --border:#38444D;
  --text:#ffffff; --muted:#8899A6; --primary:#1D9BF0; --primary-dark:#1A8CD8;
}

