/* ═══════════════════════════════════════════════════════════
   전체 페이지 공통 헤더 (header.css)
   — 메뉴 내용은 js/header.js 에서 그림
   ═══════════════════════════════════════════════════════════ */
:root { --hd: 120px; }   /* 헤더 높이 — 페이지 배치도 이 값을 씀 */

header {
  position: fixed; top: 0; left: 0; right: 0; height: var(--hd); z-index: 10;
  display: flex; align-items: center; gap: 28px; padding: 0 40px;
  /* 채도 낮춘 회색빛 네이비, 살짝 반투명 + 뒤 배경 흐림 */
  background: linear-gradient(90deg, rgba(30,42,64,.86) 0%, rgba(42,56,82,.86) 55%, rgba(30,42,64,.86) 100%);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 18px rgba(20,28,45,.25);
}

/* 로고: 마크(톱니바퀴+잎) + 위 작은 문구 + 아래 에이원 */
.logo { display: flex; align-items: center; gap: 12px; color: #fff; flex-shrink: 0; }
.logo img { width: 92px; height: 92px; object-fit: contain; flex-shrink: 0;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.45)); }
.logo span { display: flex; flex-direction: column; line-height: 1; }
.logo small { font-size: 15px; font-weight: 600; color: rgba(255,255,255,.8); letter-spacing: .5px; }
.logo b { margin-top: 6px; font-size: 40px; font-weight: 900; letter-spacing: -1px; }

/* 아이콘 메뉴 — 디오라마 아이콘 + 이름 */
.inav { flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 2px; min-width: 0;
  overflow-x: auto; scrollbar-width: none; }
.inav::-webkit-scrollbar { display: none; }
.inav a { position: relative; flex-shrink: 0; width: 78px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 0; border-radius: 10px; transition: background .2s; }
.inav a.w { width: 104px; }   /* 6글자 이상 (살균기·교반기 등) — 칸 폭 고정이라 글꼴이 바뀌어도 아이콘이 안 움직임 */
.inav a:hover { background: rgba(255,255,255,.1); }
.inav img { width: 64px; height: 52px; object-fit: contain; display: block; transition: transform .2s;
  filter: contrast(1.25) saturate(1.45) brightness(.95) drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
.inav a:hover img { transform: translateY(-3px) scale(1.08); }
/* 지금 페이지 아이콘은 안 들썩이게 (누르고 넘어온 직후 마우스가 위에 있어도 튀지 않음) */
.inav a.on:hover img { transform: none; }
.inav span { font-size: 15px; font-weight: 700; color: #fff; white-space: nowrap; letter-spacing: -.3px; }
/* 지금 보고 있는 페이지 — 밝은 바탕 + 아래 밑줄 */
.inav a.on { background: rgba(255,255,255,.14); }
.inav a.on::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 1px; height: 3px; border-radius: 2px; background: #a9d4ff; }
/* 찜 버튼 자리 — 기계 페이지가 아니어도 같은 폭을 차지해서 메뉴가 안 밀림 */
.hd-slot { flex-shrink: 0; width: 76px; display: flex; justify-content: center; }
/* 페이지 넘길 때 헤더 고정 — 서버(로컬 호스팅 포함)로 열면 크롬·엣지가 헤더를 그대로 두고 아래만 바꿈 */
@view-transition { navigation: auto; }
header { view-transition-name: site-header; }
/* 그룹 구분선: 회사소개 | 기계 | 납품실적~오시는길 */
.inav i { flex-shrink: 0; width: 1px; height: 60px; margin: 0 8px; background: rgba(255,255,255,.25); }

/* 본문 바로가기 — 평소엔 숨어 있다가 키보드 Tab 첫 번째에 나타남 */
.skip { position: fixed; left: 12px; top: -80px; z-index: 100; padding: 10px 18px; border-radius: 10px;
  background: #ffe27a; color: #0b1f4b; font-size: 16px; font-weight: 800; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.skip:focus { top: 12px; }

@media (max-width: 1100px) {
  header { padding: 0 20px; gap: 16px; }
}
@media (max-width: 768px) {
  :root { --hd: 104px; }
  .logo b { font-size: 30px; }
  .logo img { width: 70px; height: 70px; }
  .inav img { width: 52px; height: 42px; }
}