/* ============================================================ header-styles.css — 헤더 레이아웃 변형 (data-hd) 효과관리(effect_settings.php) > 헤더 스타일 에서 선택. ------------------------------------------------------------ 설계 원칙: - LAYOUT 속성만 조정 (display/flex/order/position/padding/gap/ font-size). 색상(--variation-header-text 등)은 건드리지 않아 "흰/투명 헤더가 히어로 위" 대비가 그대로 유지됨. - classic = 무규칙(변형·팔레트·v5 기본 헤더 그대로). 기존 동작 보존. - center/split/minimal = 데스크탑(≥861px)에서만 override. 860px 이하는 기존 햄버거 수축 로직을 그대로 사용. - 모바일 헤더(#hd, mobile.css)는 별도 DOM이라 영향 없음. - 이 파일은 head.sub.php에서 가장 마지막에 로드되어 !important 동일 특이성 경쟁에서 우선. ============================================================ */ @media all and (min-width: 861px) { /* ---------- CENTER : 로고 중앙 상단 + GNB 하단 중앙 ---------- */ html[data-hd="center"] header .hd_wrap { flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 6px 0 !important; position: relative !important; } html[data-hd="center"] header .logo { order: 1 !important; text-align: center !important; padding-top: 14px !important; } html[data-hd="center"] header nav#gnb { order: 2 !important; width: 100% !important; } html[data-hd="center"] #gnb .gnb_wrap { justify-content: center !important; } html[data-hd="center"] #gnb #gnb_1dul { justify-content: center !important; } html[data-hd="center"] #gnb .gnb_1dli { padding: 14px 34px !important; } /* 전화번호는 우상단으로 빼서 중앙 정렬 방해 안 함 */ html[data-hd="center"] header .hd_wrap .hd_tel { position: absolute !important; right: 0 !important; top: 22px !important; } /* ---------- SPLIT : GNB 좌측 + 로고 중앙 + 전화 우측 ---------- */ /* 3열 그리드(메뉴 1fr / 로고 auto / 전화 1fr)로 각 요소가 자기 트랙을 차지 → 현장명 길이·팔레트와 무관하게 로고-메뉴 겹침 원천 차단. (기존 absolute 중앙 로고 방식은 넓은 메뉴가 로고 위로 포개져 겹침) */ html[data-hd="split"] header .hd_wrap { display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center !important; position: relative !important; } html[data-hd="split"] header nav#gnb { order: 1 !important; justify-self: start !important; } html[data-hd="split"] #gnb .gnb_wrap { margin: 0 !important; justify-content: flex-start !important; } html[data-hd="split"] #gnb #gnb_1dul { justify-content: flex-start !important; } html[data-hd="split"] header .logo { order: 2 !important; position: static !important; left: auto !important; transform: none !important; justify-self: center !important; text-align: center !important; z-index: 11 !important; } html[data-hd="split"] header .hd_wrap .hd_tel { order: 3 !important; justify-self: end !important; white-space: nowrap !important; } /* ---------- MINIMAL : 얇은 바 + 로고 좌 + 우측 컴팩트 메뉴/전화 ---------- */ html[data-hd="minimal"] header { padding: 0 28px !important; } html[data-hd="minimal"] header .hd_wrap { flex-direction: row !important; align-items: center !important; } html[data-hd="minimal"] header .logo { margin-right: auto !important; } html[data-hd="minimal"] header .logo img.site-logo-img { max-height: 34px !important; width: auto !important; } html[data-hd="minimal"] header nav#gnb { order: 2 !important; } html[data-hd="minimal"] #gnb #gnb_1dul { gap: 0 4px !important; } html[data-hd="minimal"] #gnb .gnb_1dli { padding: 16px 16px !important; } html[data-hd="minimal"] .gnb_1da { font-size: 1.05rem !important; } html[data-hd="minimal"] header .hd_wrap .hd_tel { order: 3 !important; margin-left: 14px !important; font-size: 1.2rem !important; } } /* /min-width 861 */