/* ── 헤더·탭바 공용 스타일 ─────────────────────────────────────────────────────
   메인 앱(static/index.html)과 블로그(templates/_blog_chrome.html)가 같은 헤더를
   보여야 하는데 예전엔 CSS가 두 파일에 따로 있어 글자 크기·여백·애니메이션이 자주
   어긋났다(CLAUDE.md "헤더·탭바" 참고). 2026-08부터 이 파일 하나를 양쪽이 <link>로
   읽는다 — 헤더·탭바 모양을 바꿀 땐 여기만 고치면 된다.

   전제: 색상 변수(--header-bg, --border, --muted, --bright, --blue, --blue-rgb,
   --surface, --bg)는 각 페이지가 자기 <style>에서 정의한다(라이트/다크 값 동일).
   이 파일에 안 두는 것:
   로그인 링크(.login-entry-link — 글자 크기가 페이지별로 다름), 모바일 sticky 탭바(메인 전용).
   ───────────────────────────────────────────────────────────────────────── */

.site-header {
  background: var(--header-bg); border-bottom: 1px solid var(--border);
  padding: 12px 20px; display: flex; align-items: center; gap: 12px;
}
/* 로고: 심볼+워드마크 SVG를 인라인(fill="currentColor")으로 넣어 라이트=검정/다크=흰색을 color로 전환 */
.site-header .logo { display: flex; align-items: center; cursor: pointer; flex: none; color: var(--bright); }
.site-header .logo svg { display: block; height: 26px; width: auto; }
.site-header .sub { font-size: .75rem; color: var(--muted); line-height: 1.25; }
.site-header .header-links { margin-left: auto; display: flex; gap: 14px; font-size: .72rem; align-items: center; }
.site-header .header-links a { color: var(--muted); text-decoration: none; }
.site-header .header-links a:hover { color: var(--text); }
/* 인스타그램·쓰레드 아이콘 링크 */
.ig-link { display: inline-flex; align-items: center; color: var(--muted); }
.ig-link:hover { color: var(--blue); }
/* 화면에는 안 보이지만 스크린리더·검색엔진에는 읽히는 텍스트(로고가 이미지라 대체 텍스트 필요) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── 탭바 ── */
.tab-bar {
  display: flex; border-bottom: 1px solid var(--border);
  background: var(--header-bg); padding: 0 14px; flex-shrink: 0;
}
/* 메인은 <button>, 블로그는 <a>로 만들어져 있어 둘 다 같은 모양이 되도록
   font-family:inherit(버튼은 폰트를 상속하지 않음)·line-height(블로그 body는 1.7)·
   text-decoration/display(앵커)를 전부 명시한다. */
.tab-btn {
  padding: 7px 20px 6px; border: none; background: none;
  color: var(--muted); font-size: .92rem; cursor: pointer;
  font-family: inherit; line-height: 1.25; text-decoration: none; display: inline-block; text-align: center;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all .15s;
}
/* 탭 밑 한 단어 힌트(2026-09-02 A안): "지도대장·필터대장"이 처음 온 사람에게 안 읽혀서. 폰에선 숨김.
   위 padding 13→7/6으로 줄여 힌트 12px를 더해도 탭바 높이(≈46px)가 그대로다 — .bm-map-wrap 등이 이 높이를 전제로 한다 */
.tab-btn .tab-step { display: block; font-size: .62rem; font-weight: 400; color: var(--muted); line-height: 1.2; opacity: .85; letter-spacing: 0; }
.tab-btn.active .tab-step { color: var(--blue); opacity: 1; }
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--bright); border-bottom-color: var(--blue); font-weight: 700; }
/* 탭이 하나씩 부드럽게 나타나는 연출 */
@keyframes tabFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.tab-bar > * { animation: tabFadeIn .35s ease both; }
.tab-bar > *:nth-child(1) { animation-delay: 0s; }
.tab-bar > *:nth-child(2) { animation-delay: .05s; }
.tab-bar > *:nth-child(3) { animation-delay: .1s; }
.tab-bar > *:nth-child(4) { animation-delay: .15s; }
.tab-bar > *:nth-child(5) { animation-delay: .2s; }
.tab-bar > *:nth-child(6) { animation-delay: .25s; }
.tab-bar > *:nth-child(7) { animation-delay: .3s; }
.tab-bar > *:nth-child(8) { animation-delay: .35s; }

/* ── Contact/즐겨찾기/로그인 모달(헤더에서 띄움) ── */
.share-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 999; }
.share-modal { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 18px 20px; width: 420px; max-width: 90vw; }
.share-modal-title { font-size: .95rem; font-weight: 700; color: var(--bright); margin-bottom: 12px; }
.share-modal label { display: block; font-size: .72rem; color: var(--muted); margin: 10px 0 4px; }
.share-modal-row { display: flex; gap: 6px; }
.share-modal input, .share-modal textarea { flex: 1; background: var(--bg); border: 1px solid var(--border); color: var(--text); font-size: .74rem; padding: 6px 8px; border-radius: 4px; font-family: monospace; resize: none; min-width: 0; }
.share-copy-btn { background: rgba(var(--blue-rgb),.15); border: 1px solid var(--blue); color: var(--blue); font-size: .72rem; border-radius: 4px; padding: 0 10px; cursor: pointer; white-space: nowrap; }
.share-modal-close { margin-top: 14px; width: 100%; background: transparent; border: 1px solid var(--border); color: var(--muted); font-size: .78rem; padding: 6px; border-radius: 4px; cursor: pointer; }

/* ── 모바일(≤768px) ── */
@media (max-width: 768px) {
  .site-header { padding: 8px 12px; gap: 8px; }
  .site-header .sub { display: none; }
  .site-header .logo svg { height: 21px; }
  .site-header .header-links { font-size: .68rem; gap: 6px; }
  /* 인스타 아이콘이 White 버튼·로그인과 붙어 보여서 양옆에 숨통을 틔움 */
  .site-header .ig-link { margin: 0 5px; }
  /* 좁은 화면에선 핵심(테마/로그인)만 남기고 즐겨찾기·Contact는 숨김 */
  .site-header .hdr-extra { display: none; }
  .tab-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab-btn { padding: 9px 7px; font-size: .76rem; white-space: nowrap; flex-shrink: 0; }   /* 탭 6개(계산기 추가, 2026-09-02)가 390px 안에 들어가게 */
  .tab-btn .tab-step { display: none; }
}

/* 탭 이름의 "대장"은 작게 (2026-08-23: 지도대장·필터대장·차트대장·랭킹대장) */
.tab-btn small { font-size: .68em; font-weight: 500; margin-left: 1px; opacity: .7; }
.tab-btn.tab-core { font-weight: 700; }   /* 지도·필터·차트대장은 핵심 탭이라 굵게, 랭킹·블로그는 보통 */