/* 포지 헤더 — 기존 워프 사이트 방식 (2026-09-20 사용자 결정)
   site.css 의 지코 헤더 위에 덮어쓴다. 로드 순서: site.css → header.css.

   body[data-header]
     hero   히어로 사진 위에 투명하게 얹힘. 흰 로고·흰 글자. 스크롤하면 흰 바로 바뀜
     solid  처음부터 흰 바. 첫 화면이 글인 페이지(블로그·목록 등)

   흰 바일 때는 파란 심볼 + 잉크 글씨 로고, 투명일 때는 흰 로고. 이미지 두 벌을
   같이 넣고 CSS 로 하나만 보인다. 스크롤 전환은 site.js 가 .is-scrolled 를 붙인다. */

/* 고도체 — 로고 글씨. NHN커머스 무료 배포(상업·로고·재배포 허용, 눈누 안내). 자체 호스팅.
   워드마크 PNG(800x200, 여백 42%) 대신 글자로 쓴다. 크기·색을 CSS 로 자유롭게 바꿀 수 있다. */
@font-face {
  font-family: 'Godo'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('/assets/fonts/GodoB.woff2') format('woff2');
}
@font-face {
  font-family: 'Godo'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('/assets/fonts/GodoM.woff2') format('woff2');
}

:root { --pz-topbar-h: 34px; }   /* 나머지 토큰은 tokens.css */

/* ---- 상단 얇은 줄 (전화 · 메일 | SNS) ---- */
.pz-topbar {
  background: var(--pz-ivory); color: var(--pz-body);
  font-size: 12.5px; letter-spacing: -0.01em;
}
.pz-topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  width: min(calc(100% - 40px), 1240px); margin: 0 auto; min-height: var(--pz-topbar-h);
}
.pz-topbar__contact { display: flex; gap: 18px; margin: 0; padding: 0; list-style: none; }
.pz-topbar__contact a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.pz-topbar__contact svg { width: 13px; height: 13px; fill: var(--pz-blue); }
.pz-topbar__social { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pz-topbar__social a {
  display: inline-flex; width: 24px; height: 24px; border-radius: 50%;
  align-items: center; justify-content: center;
  background: var(--pz-white); color: var(--pz-blue); border: 1px solid var(--pz-line);
  font-size: 10px; font-weight: 800; text-decoration: none;
}
.pz-topbar__social a:hover { background: var(--pz-blue); color: var(--pz-white); }
@media (max-width: 900px) { .pz-topbar__social { display: none; } .pz-topbar__contact { gap: 14px; } }

/* ---- 헤더 바 ---- */
.rk-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--pz-white); color: var(--pz-ink);
  border-bottom: 1px solid rgba(23, 33, 43, 0.08);
  box-shadow: 0 1px 0 rgba(23, 33, 43, 0.04);
  transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.rk-header__inner { min-height: var(--pz-header-h); }

/* 로고: 심볼 + 글씨. 두 벌(light/dark) 중 배경에 맞는 것만 보인다 */
.rk-header__brand { gap: 10px; }
.rk-header__symbol { width: 36px; height: 36px; margin: 0; }
.rk-header__mark {
  font-family: var(--pz-font-logo); font-weight: 700;
  font-size: 26px; letter-spacing: -0.01em; line-height: 1; color: var(--pz-ink);
  white-space: nowrap;
}
.rk-header .pz-logo--light { display: none; }
.rk-header .pz-logo--dark { display: block; }

.rk-header__nav a { color: var(--pz-ink); font-size: 14px; padding: 26px 0; }
.rk-header__nav a:hover { color: var(--pz-blue); }
.rk-nav__sub {
  background: var(--pz-white); border-top: 2px solid var(--pz-blue);
  box-shadow: 0 14px 30px rgba(23, 33, 43, 0.14);
}
.rk-nav__sub a { color: var(--pz-ink); padding: 10px 16px; }
.rk-nav__sub a:hover { background: var(--pz-ivory); }

/* 오른쪽: 전화(테두리) + 계산기(채움). 버튼 자체는 components.css 의 .pz-btn. 헤더에선 작게 */
.pz-header__actions { display: flex; align-items: center; gap: 10px; margin-left: clamp(14px, 2vw, 28px); }
.pz-header__actions .pz-btn { min-height: 40px; padding: 0 16px; font-size: 13.5px; font-weight: 700; }
.pz-header__actions .pz-btn svg { width: 14px; height: 14px; }
.rk-header__cta { display: none; }   /* 지코 버튼은 안 쓴다 */

.rk-header__toggle span:not(.rk-sr) { background-color: var(--pz-ink); }
.rk-header__mobile { background: var(--pz-white); border-top: 1px solid rgba(23, 33, 43, 0.08); }
.rk-header__mobile a { color: var(--pz-ink); }
.rk-header__mobile-sub a { color: var(--pz-body); }
.rk-header__mobile-tel a { color: var(--pz-blue); }

/* ---- hero: 사진 위 투명 → 스크롤하면 흰 바 ---- */
body[data-header="hero"] .rk-header:not(.is-scrolled):not(.is-open) {
  position: absolute; left: 0; right: 0; top: var(--pz-topbar-h);
  background: transparent; border-bottom-color: transparent; box-shadow: none; color: var(--pz-white);
}
body[data-header="hero"] .pz-topbar ~ .rk-header:not(.is-scrolled) { top: var(--pz-topbar-h); }
body[data-header="hero"] .pz-topbar--off ~ .rk-header:not(.is-scrolled) { top: 0; }
body[data-header="hero"] .rk-header:not(.is-scrolled):not(.is-open) .pz-logo--light { display: block; }
body[data-header="hero"] .rk-header:not(.is-scrolled):not(.is-open) .pz-logo--dark { display: none; }
body[data-header="hero"] .rk-header:not(.is-scrolled):not(.is-open) .rk-header__mark { color: var(--pz-white); }
body[data-header="hero"] .rk-header:not(.is-scrolled):not(.is-open) .rk-header__nav a { color: var(--pz-white); }
body[data-header="hero"] .rk-header:not(.is-scrolled):not(.is-open) .rk-header__nav a:hover { color: var(--pz-lemon); }
body[data-header="hero"] .rk-header:not(.is-scrolled):not(.is-open) .pz-btn--ghost { color: var(--pz-white); border-color: rgba(255, 255, 255, 0.55); }
body[data-header="hero"] .rk-header:not(.is-scrolled):not(.is-open) .pz-btn--ghost:hover { border-color: var(--pz-white); }
body[data-header="hero"] .rk-header:not(.is-scrolled):not(.is-open) .rk-header__toggle span:not(.rk-sr) { background-color: var(--pz-white); }
/* 스크롤 뒤엔 fixed 흰 바. sticky 로 두면 absolute 자리에서 시작해 못 따라온다 */
body[data-header="hero"] .rk-header.is-scrolled,
body[data-header="hero"] .rk-header.is-open {
  position: fixed; left: 0; right: 0; top: 0;
  box-shadow: 0 2px 12px rgba(23, 33, 43, 0.10);
}
/* 히어로 안 글은 헤더 밑으로 들어가지 않게 위 여백 */
body[data-header="hero"] .pz-hero { padding-top: calc(var(--pz-topbar-h) + var(--pz-header-h) + 40px); }

@media (max-width: 900px) {
  :root { --pz-header-h: var(--pz-header-h-m); }
  .rk-header__symbol { width: 30px; height: 30px; }
  .rk-header__mark { font-size: 20px; }
  .pz-header__actions .pz-btn--ghost { display: none; }
  .pz-btn { padding: 9px 12px; font-size: 13px; }
}
@media (max-width: 480px) {
  .pz-header__actions { display: none; }   /* 폰에선 하단 고정 바가 맡는다 (나중) */
}

/* ---- 푸터 하단 줄의 SNS (상단 줄을 뺀 대신) ---- */
.pz-soc-wrap { display: inline-flex; gap: 6px; margin-left: 14px; vertical-align: middle; }
.pz-soc {
  display: inline-flex; width: 26px; height: 26px; border-radius: 50%;
  align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.22); color: var(--pz-white);
  font-size: 10px; font-weight: 800; text-decoration: none;
}
.pz-soc:hover { background: var(--pz-white); color: var(--pz-ink); }
/* 상단 줄이 없으면 투명 헤더는 맨 위에서 시작 */
body[data-header="hero"] .rk-header:not(.is-scrolled):not(.is-open) { top: 0; }
body[data-header="hero"] .pz-topbar ~ .rk-header:not(.is-scrolled):not(.is-open) { top: var(--pz-topbar-h); }
body[data-header="hero"] .pz-hero { padding-top: calc(var(--pz-header-h) + 48px); }
body[data-header="hero"] .pz-topbar ~ main .pz-hero { padding-top: calc(var(--pz-topbar-h) + var(--pz-header-h) + 40px); }
/* 폰에서도 전화는 한 번에. 계산기는 숨기고 전화 아이콘 버튼만 (하단 고정 바 전까지) */
@media (max-width: 480px) {
  .pz-header__actions { display: none; }   /* 폰에선 우측 하단 플로팅 버튼이 전화·계산기를 맡는다 */
}

/* 투명 헤더(hero) 상태에서도 드롭다운은 흰 바탕이다 — 위의 "메뉴 글자 흰색" 규칙이 하위 메뉴까지 먹어
   흰 바탕에 흰 글자가 됐었다. 하위 메뉴 글자는 항상 잉크. */
body[data-header="hero"] .rk-header:not(.is-scrolled):not(.is-open) .rk-nav__sub a { color: var(--pz-ink); }
body[data-header="hero"] .rk-header:not(.is-scrolled):not(.is-open) .rk-nav__sub a:hover { color: var(--pz-blue); }
/* 드롭다운: 줄바꿈 없이 한 줄, hover 는 어느 상태에서든 파랑(레몬은 흰 바탕에서 안 보인다) */
.rk-nav__sub { min-width: 220px; }
.rk-nav__sub a { white-space: nowrap; }
.rk-header .rk-nav__sub a:hover { color: var(--pz-blue); background: var(--pz-blue-soft); }

/* 뜬 페이지(시공분야 등)의 자체 CSS 가 링크 색을 !important 로 덮는다 → 드롭다운이 흰 바탕에 흰 글자가 됐다.
   셸의 헤더·푸터·플로팅은 본문 CSS 에 지지 않게 색을 못박는다. */
.rk-header .rk-nav__sub a { color: var(--pz-ink) !important; }
.rk-header .rk-nav__sub a:hover { color: var(--pz-blue) !important; }
.rk-header__mobile a { color: var(--pz-ink) !important; }
.rk-header__mobile-tel a { color: var(--pz-blue) !important; }