/* ========================================================================== METADEXTER — HEADER / GNB (전 페이지 공통 단일 소스) 파일 위치: mockups/css/header.css 로딩: 각 HTML 에서 (_layout.html · home.html · about.html · contact.html 4곳) ※ @import 쓰지 않음. 항상 맨 뒤 — styles.css 뒤(홈은 styles.css → home.css 뒤)에 둘 것. 2026-10-15 피지컬 AI 개편 2단계 — 어두운 단일 헤더 (_design/physical-ai/hero-preview.html · subpage-preview.html 4절, hero-impl-notes.md 8-1): · 모든 페이지에서 navy-950 불투명 + 하단 1px 선. 글자는 흰색. · 홈도 2026-10-30부터 같은 남색 헤더(투명 오버레이 변형 규칙 삭제 — 사진이 헤더 뒤로 올라오지 않는다). home.html 의 header_overlay 플래그·#hdrSentinel·js/header-scroll.js 는 남아 .site-header--overlay·.is-scrolled 클래스를 붙이지만, 이 파일에 그 클래스 규칙이 없으므로 화면에는 영향이 없다(템플릿 정리는 별도 결정). · 메뉴 6개 영문(app.py GNB_ITEMS label_en). [문의하기] 버튼 제거(10-15) — 우측은 ≤960 햄버거만(.header-actions). 모바일 패널 하단(.gnb-foot)에 Contact 강조 버튼. (그 자리에 있던 "XR × AI → Physical AI" 문구 .hdr-tag 는 2026-10-28 임원회의 요청으로 마크업·규칙 모두 삭제) · 로고(2026-10-21 mdt-logo 교체): assets/brand/mdt-logo.webp(618×88, 표시 44px → 폭 309px) / <400px는 워드마크 mdt-logo-wordmark.webp(421×60, 표시 30px → 폭 211px). 이 파일이 소유하는 선택자(경계): .site-header .header-inner .logo .logo-img .gnb .gnb-foot .header-actions .hamburger .hdr-sentinel + GNB 활성 표시 + 모바일 메뉴(.gnb 패널 / .gnb-overlay / body 잠금) + 하위 메뉴(.gnb-item .gnb-toggle .gnb-caret .gnb-sub .gnb-l2 .gnb-l2-toggle .gnb-l3 — I절, 2026-10-28) 소유하지 않는 것: .btn / .btn-primary / .container → 전역(styles.css) 유지 ⚠ 이 파일을 넣을 때 삭제한 기존 사본 (중복되면 캐스케이드가 꼬인다) · mockups/styles.css 구 헤더 8개 규칙·활성 표시 블록·@media 960 안의 .gnb/.hamburger · mockups/home.html 구 인라인 헤더 규칙 · industry-*.html 3개는 보관 페이지라 범위 밖. 자체 헤더를 그대로 두며, header.css를 링크하지 않으므로 그 3페이지의 햄버거는 지금처럼 동작하지 않는다. 토큰 의존성 (styles.css :root): --brand-700 --brand-600 --brand-400 --brand-100 --navy-950 --white --sp-2 --sp-3 --sp-4 --sp-5 --sp-6 --radius-sm ========================================================================== */ :root{ /* 헤더 높이 토큰. 76px이 헤더 높이·패널 최대높이·오버레이 시작점 3곳에 쓰인다. 로고 44px + 상하 16px. styles.css :target{scroll-margin-top:100px}도 이 값을 전제한다. */ --header-h:76px; /* 어두운 헤더 토큰 (시안 1절) */ --hdr-bg:rgba(11,18,32,.92); /* 채워진 상태 = navy-950 92% (+blur) */ --hdr-line:rgba(255,255,255,.12); /* 하단 1px 경계선 */ --hdr-fg:rgba(255,255,255,.86); /* 비활성 메뉴 글자. navy-950 위 ≈13.9:1 */ --hdr-fg-dim:rgba(255,255,255,.70); /* "XR × AI →" 흐린 글자. navy-950 위 ≈9.6:1 */ --hdr-row-line:rgba(255,255,255,.08); /* 모바일 패널 행 구분선 */ } /* ========================================================================== A. 데스크톱 기본 — 어두운 헤더 ========================================================================== */ /* IntersectionObserver 기준점(= 스크롤 80px). home.html 첫 줄에만 있다. 문서 좌표 top:80px의 1×1px 상자가 화면 밖으로 나가면 헤더를 채운다(js/header-scroll.js). */ .hdr-sentinel{position:absolute; top:80px; left:0; width:1px; height:1px; pointer-events:none;} .site-header{ position:sticky; top:0; z-index:100; background:var(--navy-950); color:var(--white); border-bottom:1px solid var(--hdr-line); transition:background-color .2s ease, border-color .2s ease; } /* (2026-10-30 삭제) 홈 전용 .site-header--overlay 변형(투명 + 음수 하단 마진, .is-scrolled·.menu-open 에서 채움) — 홈 헤더도 위 기본 규칙(남색 불투명)을 그대로 쓴다. */ .header-inner{ display:flex; align-items:center; justify-content:space-between; height:var(--header-h); gap:var(--sp-5); } .logo{display:flex; align-items:center; flex:none;} /* 는 inline 요소라 flex 아이템이 되면 줄 높이 여백이 생긴다 → 상자 없이 자식(img)만 노출 */ .logo picture{display:contents;} /* ⚠ .logo-img → .site-header .logo-img 로 스코프를 좁혀 둔다. 이유: .logo-img 는 헤더 로고와 "고객사 로고 그리드"(.logo-cell > .logo-img, logo-grid.js가 생성)가 같은 클래스명을 공유한다(styles.css 로고 그리드 규칙 .logo-img{max-width:100%; max-height:100%; width:auto; height:auto; …}). 헤더 안으로만 한정(0,2,0)해 그리드 규칙은 손대지 않는다. 로고 파일: mdt-logo 618×88 → 44px일 때 폭 309px (옛 header-logo-physicalai 242px보다 67px 넓다). (<400px에서는 가 워드마크 mdt-logo-wordmark 421×60으로 바꾼다 → 30px일 때 폭 211px, 아래 ≤399px 규칙) */ .site-header .logo-img{height:44px; width:auto; display:block;} /* 2026-10-21 새 로고(44px → 폭 309)는 옛 로고(242)보다 67px 넓어 961~1003px에서 헤더 한 줄이 뷰포트를 넘쳤다. 실측(Pretendard 로드 상태): 로고 309 + 갭 24 + GNB 481.4 + 갭 24 + "XR × AI → Physical AI" 141.6 = 980 → 좌 패딩 24 포함 1004px. 1004~1023px는 넘치진 않지만 우측 패딩 안으로 파고들어 여유 0~19px. 그래서 961~1023px 구간만 로고를 36px(폭 253)로 줄인다 — 자연폭 924 + 24 = 948 ≤ 961, 여유 13px. 메뉴·문구·간격은 손대지 않는다. 1024px 이상은 44px 그대로, ≤960은 햄버거 레이아웃(E절)이라 해당 없음. (2026-10-28 문구 141.6px 삭제 후에는 44px로도 넘치지 않지만, 이 구간 로고 크기는 그대로 둔다.) */ @media (min-width:961px) and (max-width:1023px){ .site-header .logo-img{height:36px;} } .gnb{display:flex; gap:var(--sp-6); font-weight:600; font-size:15px; color:var(--hdr-fg);} .gnb a:hover{color:var(--brand-400);} /* 데스크톱(≥961)에서는 햄버거만 담은 빈 상자라 숨긴다 — 남겨 두면 space-between이 GNB를 오른쪽 끝에서 띄운다(2026-10-28 문구 삭제 후 약 215px). ≤960은 E절에서 다시 flex. */ .header-actions{display:none;} .hamburger{display:none; background:none; border:none; cursor:pointer;} /* 패널 하단(Contact 버튼) — 데스크톱에서는 숨김. 링크 한 벌 원칙은 유지한다: Contact는 GNB 항목이 아니라 패널 푸터이므로 aria-current 계산에 들어가지 않는다. */ .gnb-foot{display:none;} /* ========================================================================== B. GNB 현재 페이지 표시 (데스크톱) ========================================================================== ⚠ 이 블록은 반드시 위 .gnb a:hover 뒤에 와야 한다. 두 선택자의 명시도가 (0,2,1)로 동일해서, 순서가 바뀌면 활성 항목의 흰 글자가 hover 규칙에 먹힌다. 선택자는 .gnb a[aria-current="page"] 하나로 고정한다 — 접근성 속성과 시각 표시를 한 훅으로 묶어, 마크업에 aria-current가 빠지면 표시도 함께 사라지게 해서 둘이 어긋나지 않도록 한다. [바 위치] 텍스트 바로 아래가 아니라 76px 헤더의 하단 레일에 붙인다. [레이아웃 불변] font-weight는 600 유지. 바는 흐름에서 빠지는 절대배치 ::after. [지오메트리] 앵커를 헤더 높이만큼 늘려 bottom:-1px이 항상 레일에 떨어지게 한다. [대비] 흰 86% on navy-950 ≈13.9:1, 활성 흰 100% 18.7:1, brand-400 바 on navy-950 7.10:1. 홈 투명 상태에서는 히어로가 상단 스크림(home.css .hero-glow 영역이 아니라 사진/남색 배경) 위라 같은 수준이 유지된다. [색맹] 활성(흰)과 비활성(흰 86%)은 색만으로 구별되지 않는다 — 2px 바가 유일한 형태 신호이므로 제거하지 말 것. (모바일 세로 목록에서도 같은 이유로 좌측 바를 쓴다 — E절) -------------------------------------------------------------------------- */ .gnb{ align-self:stretch; align-items:stretch; } .gnb a{ position:relative; display:flex; align-items:center; white-space:nowrap; } .gnb a[aria-current="page"]{ color:var(--white); font-weight:600; /* 상속값과 동일 — 폭 변동 방지용 명시적 고정 */ } .gnb a[aria-current="page"]::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; /* -1px: 헤더 1px 보더를 덮어 레일과 flush */ height:2px; background:var(--brand-400); } /* hover는 비활성 항목과 같은 brand-400 — 활성 항목 위에서도 "눌릴 수 있다"는 피드백만 준다 */ .gnb a[aria-current="page"]:hover{ color:var(--brand-400); } .gnb a:focus-visible{ outline:2px solid var(--brand-400); outline-offset:-4px; border-radius:2px; } /* ========================================================================== C. 모바일 전용 요소의 데스크톱 기본값 (= 숨김) ========================================================================== 이 규칙은 미디어쿼리 "밖"에 둔다. 그래야 JS가 .menu-open을 남겨 둔 채 961px로 리사이즈돼도 CSS만으로 완전히 데스크톱 상태로 복귀한다. -------------------------------------------------------------------------- */ .gnb-overlay{ display:none; } /* body 스크롤 잠금 클래스도 ≤960px 안에서만 효력을 갖는다 → G절 */ /* ========================================================================== D. 햄버거 버튼 — 44×44 터치 타깃 + ☰↔✕ CSS 모프 ========================================================================== [왜 글리프(☰/✕)를 버렸나] · 텍스트 글리프는 실제 터치 타깃이 약 22×26px로 WCAG 2.5.8(24×24 최소) / 모바일 관례(44×44)에 못 미친다. · ☰ 와 ✕ 는 폰트마다 굵기·베이스라인·폭이 달라 전환 시 아이콘이 튄다. · 텍스트 글리프는 스크린리더가 "삼선" 따위로 읽는다. 아래 구조는 bars를 aria-hidden 처리하고 버튼에 aria-label을 주므로 읽힘이 깨끗하다. [구조] 요소 1개(.hamburger-bars)로 3줄: 자기 배경 = 가운데 줄, ::before/::after = 위/아래 줄. 열리면 가운데는 투명, 위/아래가 ✕로 회전. -------------------------------------------------------------------------- */ .hamburger{ width:44px; height:44px; padding:0; place-items:center; /* display는 미디어쿼리에서 grid로 켠다 */ border-radius:var(--radius-sm); color:var(--white); /* 3선이 currentColor를 따라간다 — 어두운 헤더라 흰색 */ -webkit-tap-highlight-color:transparent; } .hamburger:focus-visible{ outline:2px solid var(--brand-400); outline-offset:-4px; /* .gnb a와 같은 관례 */ } .hamburger-bars{ position:relative; display:block; width:20px; height:2px; border-radius:1px; background:currentColor; transition:background-color .12s ease .1s; /* 닫힐 때 회전이 끝난 뒤 가운데 줄이 돌아옴 */ } .hamburger-bars::before, .hamburger-bars::after{ content:''; position:absolute; left:0; width:20px; height:2px; border-radius:1px; background:currentColor; transition:transform .22s cubic-bezier(.4,0,.2,1); } .hamburger-bars::before{ top:-6px; } .hamburger-bars::after { top:6px; } /* 열린 상태의 훅은 클래스가 아니라 aria-expanded 다 — B절의 aria-current와 같은 원칙(접근성 속성 = 스타일 훅). JS가 속성을 빠뜨리면 아이콘도 안 바뀌므로 시각 상태와 보조기술 상태가 어긋날 수 없다. */ .hamburger[aria-expanded="true"] .hamburger-bars{ background:transparent; transition-delay:0s; } .hamburger[aria-expanded="true"] .hamburger-bars::before{ transform:translateY(6px) rotate(45deg); } .hamburger[aria-expanded="true"] .hamburger-bars::after { transform:translateY(-6px) rotate(-45deg); } /* ========================================================================== E. 모바일 (≤960px) — 전체폭 드롭다운 패널 (어두운 테마) ========================================================================== [형태 결정: 전체폭 드롭다운 · 우측 드로어 아님] 1) 항목이 6개 + 하단 Contact 뿐이라 360px 폭에서도 6×52px + 푸터 ≈ 440px. 360×640 기기의 헤더 아래 가용 높이 564px에 스크롤 없이 들어간다. 2) 햄버거가 제자리에 남는다 — 연 버튼과 닫을 버튼이 같은 좌표. 3) 전체폭은 각 행이 화면 폭 전체라 터치 타깃이 가장 넉넉하다. 4) 구현: .site-header가 position:sticky(=포지션드) 이므로 패널을 position:absolute; top:100% 로 붙이면 헤더를 따라다닌다. 홈의 --overlay 변형도 sticky 그대로라 같은 계산이 맞는다(열리면 .menu-open이 헤더를 채운다). [마크업 공유] 패널은 별도