/* MITO 세라믹쇼핑몰 — 통일 헤더 v1.0 (2026-08-27 대표 지시: 일반쇼핑몰과 헤더 통일)
   일반쇼핑몰 헤더와 동일 구조·톤: 로고 좌(세리프 워드마크) / 영문 메뉴 중앙 / 우측 유틸
   (쇼핑몰 구분 축소 링크 + 아이콘). 자체 완결(변수 미사용) — ceramic.css 뒤 또는 홈(raw)에서 단독 로드.
   ceramic.css의 구 헤더 규칙은 로드 순서(뒤)로 덮어쓴다. */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
}
.site-header .container {
  position: relative;
  max-width: 1800px;
  margin: 0 auto;
  padding-inline: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  gap: 16px;
}
.site-header .brand-slot { flex: 1 0 0; } /* 폭 확보는 래퍼 — 앵커 클릭 영역은 워드마크로 한정 */
.site-header .brand {
  font-family: "Noto Serif KR", "Noto Serif", Georgia, serif;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: #111111;
  text-decoration: none;
}
.site-header .nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 78px;
}
.site-header .nav a {
  font-family: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #111111;
  text-decoration: none;
  transition: opacity 350ms cubic-bezier(0.4, 0, 0.2, 1);
}
.site-header .nav a:hover { opacity: 0.7; }
.site-header .nav [aria-current="page"] {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-color: #111111;
}
.header-utils { flex: 1 0 0; display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.site-header .track-nav { display: flex; align-items: center; gap: 10px; padding-right: 14px; border-right: 1px solid #E5E5E5; }
.site-header .track-nav a {
  font-family: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-size: 12px;
  text-decoration: none;
  color: #666666;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 350ms cubic-bezier(0.4, 0, 0.2, 1);
}
.site-header .track-nav a:hover { color: #111111; }
.site-header .track-nav [aria-current="true"] {
  color: #111111;
  font-weight: 600;
  border-bottom-color: #111111;
}
.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: #111111;
  border-radius: 50%;
  transition: background-color 350ms cubic-bezier(0.4, 0, 0.2, 1);
}
.icon-btn:hover { background: #F0F0F0; }
.icon-btn svg { width: 21px; height: 21px; }
.icon-btn[aria-current="page"] { background: #F0F0F0; }

@media (max-width: 1360px) {
  .site-header .container { height: auto; flex-wrap: wrap; padding-block: 10px; row-gap: 6px; }
  .site-header .brand-slot { flex: 0 0 auto; order: 1; }
  .header-utils { flex: 0 0 auto; order: 2; margin-left: auto; }
  .site-header .nav { order: 3; width: 100%; gap: 36px; }
}
@media (max-width: 768px) {
  .site-header .container { padding-inline: 20px; }
  .site-header .brand { font-size: 18px; }
  .site-header .nav { gap: 16px; flex-wrap: wrap; row-gap: 4px; }
  .site-header .nav a { font-size: 12px; letter-spacing: 0.12em; }
  .site-header .track-nav a { font-size: 11px; }
  .header-utils { gap: 10px; }
  .site-header .track-nav { padding-right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .nav a, .site-header .track-nav a, .icon-btn { transition: none; }
}

/* == 오버레이 변형 (2026-08-27 대표 지시): 히어로 위 레이어 — 최상단 투명, 스크롤 시 유리 반투명 ==
   다크 홈 전용: 텍스트는 항상 밝은 톤(투명 상태에서 다크 히어로 위 가독) */
.site-header--overlay {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  background: transparent;
  border-bottom-color: transparent;
  transition: background-color 350ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 350ms cubic-bezier(0.4, 0, 0.2, 1);
}
.site-header--overlay .brand,
.site-header--overlay .nav a,
.site-header--overlay .icon-btn { color: #FFFFFF; }
.site-header--overlay .track-nav a { color: rgba(255, 255, 255, 0.72); }
.site-header--overlay .track-nav a:hover,
.site-header--overlay .track-nav [aria-current="true"] { color: #FFFFFF; }
.site-header--overlay .track-nav [aria-current="true"] { border-bottom-color: #FFFFFF; } /* 다크 위 가시성 */
.site-header--overlay .track-nav { border-right-color: rgba(255, 255, 255, 0.28); }
.site-header--overlay .icon-btn:hover { background: rgba(255, 255, 255, 0.14); }
/* 스크롤: 유리 재질 — 반투명 다크 + 블러 */
.site-header--overlay.scrolled {
  background: rgba(17, 17, 17, 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(255, 255, 255, 0.14);
}
@media (prefers-reduced-motion: reduce) {
  .site-header--overlay { transition: none; }
}
/* == v1.1 (2026-08-27 대표 지시: 세라믹 헤더를 일반쇼핑몰과 같은 구조로) ==
   일반몰 shop/styles.css의 SHOP 메가 메뉴·견적함 배지를 세라믹에 이식.
   header-unified.css는 CSS 변수를 쓰지 않는 자체 완결 파일이라 값은 리터럴로 둔다. */
.nav-item { display: flex; align-items: center; }
.has-mega { height: 76px; } /* 링크~패널 사이 호버 공백 제거 */
.mega {
  position: fixed;
  left: 0;
  right: 0;
  top: 76px;
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid #E5E5E5;
  padding-block: 48px 40px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 350ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 350ms;
  z-index: 9;
}
.has-mega:hover .mega,
.has-mega:focus-within .mega {
  opacity: 1;
  visibility: visible;
  transition: opacity 350ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* 주의: .container를 겸용하면 .site-header .container(플렉스·76px 고정)가 이겨 열 정렬이 깨진다 */
.mega-inner {
  display: grid;
  grid-template-columns: repeat(4, 160px);
  justify-content: center;
  align-items: start;
  column-gap: 80px;
  row-gap: 8px;
  padding-inline: 48px;
}
.mega-col { min-width: 0; }
.mega-head {
  font-family: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  margin: 0 0 12px;
  color: #111111;
}
.mega-head a { font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; text-decoration: none; color: #111111; }
.mega-head a:hover { text-decoration: underline; text-underline-offset: 4px; }
.mega-col > a {
  display: block;
  font-family: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #666666;
  text-decoration: none;
  padding-block: 5px;
  transition: color 350ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mega-col > a:hover { color: #111111; text-decoration: underline; text-underline-offset: 4px; }
.mega-note {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 20px;
  font-family: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-size: 12px;
  color: #666666;
}
/* SHOP 호버 중에는 헤더도 스크롤 상태와 같은 유리 재질 (일반몰과 동일 동작) */
.site-header:has(.has-mega:hover),
.site-header:has(.has-mega:focus-within) {
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: #E5E5E5;
}
/* 견적함 배지 — 일반몰과 같은 위치·형태 */
.cart-badge {
  position: absolute;
  top: 0;
  right: -2px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: #111111;
  color: #FFFFFF;
  font-family: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  padding-inline: 4px;
}

/* 오버레이(다크 홈·제품목록) 변형 — 흰 유리 대신 다크 유리로 뒤집는다 */
.site-header--overlay .mega {
  background: rgba(17, 17, 17, 0.72);
  border-bottom-color: rgba(255, 255, 255, 0.14);
}
.site-header--overlay .mega-head,
.site-header--overlay .mega-head a { color: #FFFFFF; }
.site-header--overlay .mega-col > a { color: rgba(255, 255, 255, 0.72); }
.site-header--overlay .mega-col > a:hover { color: #FFFFFF; }
.site-header--overlay .mega-note { color: rgba(255, 255, 255, 0.6); }
.site-header--overlay .cart-badge { background: #FFFFFF; color: #111111; }
.site-header--overlay:has(.has-mega:hover),
.site-header--overlay:has(.has-mega:focus-within) {
  background: rgba(17, 17, 17, 0.55);
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

@media (max-width: 1360px) {
  .mega { display: none; } /* 랩 레이아웃·터치 환경 — 카테고리는 제품 목록에서 */
  .has-mega { height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .mega { transition: none; }
}