/* ============================================================ 공통 GNB (헤더 + 풀스크린 오버레이 메뉴) 모든 공개 페이지가 이 파일 하나만 쓴다. 페이지별 헤더 CSS를 두지 않는다. 토큰 높이 : padding 15px (상하) — 로고 높이에 따라 자동 로고 : 96px 메뉴 : 22px / weight 500 / gap 4px / 항목 padding 14px 0 CTA : 15px 22px / weight 700 / 15px 컬럼 : var(--col) — 페이지가 정의한 모바일 기준 컬럼을 그대로 따른다 좌우 : var(--pad) z-index: 헤더 130 / 메뉴 125 (페이지 콘텐츠보다 항상 위) 배경 규칙 — 전 페이지 동일 처음 : 투명 (히어로 위에 얹힌다) 24px 스크롤: 반투명 다크 + blur + 하단 실선 ============================================================ */ .gnb{position:fixed;top:0;left:50%;transform:translateX(-50%); width:100%;max-width:var(--col,430px);z-index:130; display:flex;align-items:center;justify-content:space-between;gap:12px; padding:15px var(--pad,30px); pointer-events:none; /* 히어로 위 투명 영역이 클릭을 막지 않도록 */ background:transparent;border-bottom:1px solid transparent; transition:background .35s ease,border-color .35s ease, -webkit-backdrop-filter .35s ease,backdrop-filter .35s ease, transform .35s cubic-bezier(.16,1,.3,1),opacity .25s ease;} .gnb.is-scrolled{background:rgba(14,22,38,.62); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); border-bottom-color:rgba(255,255,255,.08);} /* 몰입 구간 헤더 숨김 — 성공사례의 캐러셀 스토리처럼 화면을 가득 쓰는 구간에서 페이지 스크립트가 html.is-headhide를 켜면 헤더를 위로 밀어 감춘다. 숨김 상태를 GNB가 직접 들고 있어야 어느 페이지에 붙여도 동작이 같다. ※ translateX(-50%)는 가운데 정렬용이라 반드시 함께 써야 한다 — translateY만 쓰면 헤더가 사라지면서 왼쪽으로 튄다. */ html.is-headhide .gnb{transform:translateX(-50%) translateY(-100%);opacity:0;pointer-events:none;} .gnb__logo{pointer-events:auto;flex:none;display:inline-flex;align-items:center;line-height:0;cursor:pointer;} .gnb__logo img{width:96px;height:auto;display:block;transition:filter .35s ease;} .gnb__burger{pointer-events:auto;flex:none;width:34px;height:34px; display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px; background:none;border:0;cursor:pointer;padding:0;} .gnb__burger span{display:block;width:22px;height:2px;border-radius:2px;background:#F4F6FA; transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .25s ease;} /* 밝은 히어로 페이지용 테마 — 레이아웃·크기·간격은 그대로고 '투명일 때의 색'만 뒤집는다. 스크롤해서 어두운 바가 깔리거나 메뉴가 열리면 다시 흰색으로 돌아온다. */ body[data-gnb-theme="light"] .gnb:not(.is-scrolled) .gnb__burger span{background:#16181d;} body[data-gnb-theme="light"] .gnb:not(.is-scrolled) .gnb__logo img{filter:brightness(0);} body[data-gnb-theme="light"].gnb-open .gnb .gnb__burger span{background:#F4F6FA;} body[data-gnb-theme="light"].gnb-open .gnb .gnb__logo img{filter:none;} body.gnb-open .gnb__burger span:nth-child(1){transform:translateY(7px) rotate(45deg);} body.gnb-open .gnb__burger span:nth-child(2){opacity:0;transform:scaleX(0);} body.gnb-open .gnb__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} /* ---- 콘텐츠 시작 위치 보정 ---- GNB는 fixed라 자리를 차지하지 않는다. 히어로가 화면 맨 위부터 시작하는 페이지는 그게 맞지만(헤더가 히어로 위에 얹힘), 제목부터 시작하는 문서형 페이지는 글자가 헤더에 가린다. 그런 페이지는 을 달아 준다. 패딩은 body가 아니라 .device(컬럼 래퍼)에 준다 — body에 주면 헤더 뒤로 페이지 배경이 비쳐 색이 끊겨 보인다. .device 가 없는 페이지는 body로 폴백. */ body[data-gnb-offset] .device{padding-top:var(--gnb-offset,80px);} body[data-gnb-offset]:not(:has(.device)){padding-top:var(--gnb-offset,80px);} /* ---- 풀스크린 오버레이 메뉴 ---- */ body.gnb-open{overflow:hidden;} .gnbmenu{position:fixed;top:0;left:50%;transform:translateX(-50%); width:100%;max-width:var(--col,430px);height:100%;z-index:125; background:rgba(14,22,38,.98);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); display:flex;flex-direction:column; opacity:0;visibility:hidden;pointer-events:none; transition:opacity .4s ease,visibility .4s ease;} body.gnb-open .gnbmenu{opacity:1;visibility:visible;pointer-events:auto;} .gnbmenu__inner{flex:1;display:flex;flex-direction:column;padding:96px var(--pad,30px) 24px;} .gnbmenu__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;} .gnbmenu__list li{opacity:0;transform:translateY(16px);} body.gnb-open .gnbmenu__list li{animation:gnbMenuIn .55s cubic-bezier(.16,1,.3,1) forwards;} body.gnb-open .gnbmenu__list li:nth-child(1){animation-delay:.08s;} body.gnb-open .gnbmenu__list li:nth-child(2){animation-delay:.15s;} body.gnb-open .gnbmenu__list li:nth-child(3){animation-delay:.22s;} body.gnb-open .gnbmenu__list li:nth-child(4){animation-delay:.29s;} body.gnb-open .gnbmenu__list li:nth-child(5){animation-delay:.36s;} body.gnb-open .gnbmenu__list li:nth-child(6){animation-delay:.43s;} body.gnb-open .gnbmenu__list li:nth-child(7){animation-delay:.50s;} @keyframes gnbMenuIn{to{opacity:1;transform:translateY(0);}} .gnbmenu__link{display:flex;justify-content:flex-end;align-items:center;padding:14px 0; text-decoration:none;transition:transform .3s cubic-bezier(.16,1,.3,1);} .gnbmenu__link:hover{transform:translateX(-6px);} .gnbmenu__tx{font-size:22px;font-weight:500;letter-spacing:-.015em;color:#F4F6FA;line-height:1.2;} /* 현재 보고 있는 페이지 표시 */ .gnbmenu__link[aria-current="page"] .gnbmenu__tx{color:var(--point,#2E7BFF);} .gnbmenu__foot{margin-top:auto;display:flex;flex-direction:column;gap:12px;} .gnbmenu__cta{display:inline-flex;align-items:center;justify-content:center; padding:15px 22px;background:var(--point,#2E7BFF);color:#fff; font-size:15px;font-weight:700;letter-spacing:-.01em;text-decoration:none; transition:background .25s;} .gnbmenu__cta:hover{background:var(--point-deep,#1A5CD8);} .gnbmenu__contact{font-size:11.5px;line-height:1.4;color:rgba(255,255,255,.52); letter-spacing:-.01em;text-align:left;margin:0;} @media(prefers-reduced-motion:reduce){ .gnb,.gnbmenu,.gnbmenu__link{transition:opacity .3s ease;} /* 움직임을 줄이도록 설정한 경우 밀어 올리지 않고 사라지기만 한다(가운데 정렬은 유지) */ html.is-headhide .gnb{transform:translateX(-50%);} body.gnb-open .gnbmenu__list li{animation:none;opacity:1;transform:none;} }