/* 공통 헤더(2026-09-10) — 메인 디자인(ex_main/Claim_Guard.html)의 "3. Header & Top Banner" 원문을 모든 화면이 공유한다.
   layout.html 은 app.css 뒤에, index.html 은 landing.css 앞에 읽는다. 헤더 안(.site-header) 으로 범위를 좁혀 앱 화면의 다른 .btn 과 섞이지 않게 한다. */

/* Pretendard — 자체 호스팅(CSP font-src 'self'; 디자인 원본은 jsdelivr CDN). 가변 폰트 하나로 100~900 전 굵기를 덮는다. */
@font-face {
  font-family: 'Pretendard';
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/PretendardVariable.woff2') format('woff2-variations');
}

:root {
  --color-main: #070f54;
  --color-main-light: #122199;
  --color-accent: #da2828;
  --color-surface: #f9faff;
  --text-dark: #1e293b;
  --text-muted: #64748b;
  --border-light: rgba(7, 15, 84, 0.12);
}

/* ---- 원문 그대로 ---- */
.top-banner {
  background-color: var(--color-accent);
  color: #ffffff;
  text-align: center;
  padding: 12px 20px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-family: 'Pretendard', sans-serif;
}

.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-light);
  transition: all 0.3s ease;
  height: auto;
  font-family: 'Pretendard', sans-serif;
}
.site-header .inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; width: 100%; display: flex; justify-content: space-between; align-items: center; height: 72px; gap: 0; box-sizing: border-box; }

.site-header .brand { font-size: 1.4rem; font-weight: 900; color: var(--color-main); letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; text-decoration: none; }
.site-header .brand:hover { text-decoration: none; color: var(--color-main); }
/* 로고 마크: 디자인의 파란 사각형 대신 기존 슬래시 마크 유지(사용자 지정, 2026-09-09) */
.site-header .brand-mark { width: 10px; height: 22px; background: var(--color-main); border-radius: 0; transform: skewX(-14deg); display: inline-block; flex-shrink: 0; }

.site-header .site-nav { display: flex; align-items: center; gap: 32px; font-weight: 600; font-size: 0.95rem; margin-left: 0; }
/* 원본의 `.site-nav a` 는 color·transition 만 지정한다. app.css 에서 오던 링크 스타일(배경·여백·최소 높이)을 되돌리는 리셋은
   **내비 직계의 비버튼 링크에만** 적용한다 — 자손 전체(`.site-nav a`)에 걸면 특성(0,2,1)이 버튼 규칙(0,2,0)을 이겨
   회원가입 버튼의 배경·여백이 사라지고, 계정 메뉴 안 링크까지 납작해진다(2026-09-10 수정). */
.site-header .site-nav > a { color: var(--color-main); transition: 0.2s; text-decoration: none; }
.site-header .site-nav > a:not(.btn) { background: transparent; padding: 0; min-height: 0; border-radius: 0; font-weight: 600; font-size: 0.95rem; white-space: nowrap; }
.site-header .site-nav > a:not(.btn):hover { color: #3b82f6; background: transparent; }
.site-header .site-nav > a[aria-current="page"]:not(.btn) { color: var(--color-main); font-weight: 800; }

.site-header .btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 28px; font-weight: 700; font-size: 1rem; cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); border-radius: 8px; border: none; min-height: 0; margin: 0;
  line-height: 1.6; /* 원본은 body(1.6)를 상속 — 앱 화면 base.css 값에 흔들리지 않게 명시(2026-09-10) */
  white-space: nowrap; flex-shrink: 0; /* 모바일에서 헤더가 좁아질 때 버튼 글자가 두 줄로 접히지 않게(2026-09-10) */
}
.site-header .btn-main {
  background: linear-gradient(135deg, var(--color-main), var(--color-main-light));
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(7, 15, 84, 0.2);
}
.site-header .btn-main:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(7, 15, 84, 0.4); }
.site-header .btn-sm { padding: 8px 20px; font-size: 0.9rem; }

/* ---- 앱 연동: 헤더 카운터(로고 오른쪽 — 비로그인 60초 폴링·로그인 웹소켓, app.js) ---- */
.site-header .quota { display: inline-flex; align-items: center; gap: 6px; margin-left: 16px; margin-right: auto; padding: 0 10px; min-height: 30px; border: 1px solid var(--border-light); border-radius: 6px; background: var(--color-surface); font-size: 13px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.site-header .quota b { color: var(--color-main); font-weight: 800; font-variant-numeric: tabular-nums; }
.site-header .quota.is-empty b { color: var(--color-accent); }
.site-header .quota.is-exhausted { border-color: var(--color-accent); }

/* ---- 앱 연동: 계정 메뉴(로그인 후) — 위치·펼침·색을 여기서 모두 갖는다.
   2026-09-11 수정: 위치·배경·여백이 app.css 에 있어 그 파일을 읽지 않는 메인 화면에서는 드롭다운이 흐름 안에 그대로 펼쳐졌다(사용자 지적).
   토큰이 없는 화면(메인·가입 등)에서도 같게 보이도록 var(--토큰, 앱 화면과 같은 값) 으로 적는다. ---- */
.site-header .acct { position: relative; }
.site-header .acct > summary { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--color-main), var(--color-main-light)); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; cursor: pointer; list-style: none; margin: 0; box-shadow: 0 4px 12px rgba(7, 15, 84, 0.2); }
.site-header .acct > summary::-webkit-details-marker { display: none; }
.site-header .acct .menu { position: absolute; right: 0; top: 44px; min-width: 200px; padding: 6px; z-index: 60; background: #fff;
  border: 1px solid var(--border-light); border-radius: 12px; box-shadow: 0 20px 40px -10px rgba(7, 15, 84, 0.2); }
.site-header .acct .menu .who { padding: 8px 10px 10px; border-bottom: 1px solid var(--border, #e5e7eb); margin-bottom: 6px; font-size: 13px; color: var(--text-muted); }
.site-header .acct .menu .who strong { display: block; font-size: 14px; font-weight: 600; color: var(--color-main); }
.site-header .acct .menu a, .site-header .acct .menu button {
  display: flex; width: 100%; min-height: 36px; align-items: center; padding: 0 10px; border: 0; border-radius: var(--radius-sm, 4px);
  background: none; cursor: pointer; text-align: left;
  color: var(--text-dark); font-weight: 600; font-size: 14px; font-family: 'Pretendard', sans-serif; }
.site-header .acct .menu a:hover, .site-header .acct .menu button:hover { background: var(--bg-soft, #f3f4f6); text-decoration: none; }

/* ---- 앱 화면(로그인 후): 상단 띠와 헤더를 함께 고정 — 검토 화면 등 높이 계산(--header-h)은 app.js 가 실제 높이로 기록 ---- */
body.is-app .site-top { position: sticky; top: 0; z-index: 1000; }
body.is-app .site-header { position: static; }

/* ---- 모바일(≤767px): 카운터가 들어갈 자리 — 헤더 안쪽 여백 16px·내비 간격 10px·버튼 여백 14px(데스크톱은 원본과 동일) ---- */
@media (max-width: 767px) {
  .site-header .quota .quota-label { display: none; }
  .site-header .quota { margin-left: 8px; padding: 0 6px; min-height: 28px; font-size: 12px; }
  .site-header .brand { white-space: nowrap; }
  .site-header .inner { padding: 0 16px; }
  .site-header .site-nav { gap: 10px; margin-left: 6px; }
  .site-header .btn-sm { padding: 8px 14px; }
}
/* 아주 좁은 화면(갤럭시 계열 360px): 브랜드만 한 단계 줄여 브랜드+카운터+내비가 한 줄에 들어가게(원본은 이 폭에서 헤더가 넘친다, 2026-09-10) */
@media (max-width: 380px) {
  .site-header .brand { font-size: 1.15rem; }
}