/* ============================================================ GNB 공용 스타일 — 사이트 전체(랜딩·청첩장·FAQ·약관·마이페이지·에디터)의 단 하나뿐인 GNB 정의다. 기준은 메인 홈(website/index.html)이고, 여기만 고치면 모든 페이지에 그대로 반영된다. 마크업은 assets/gnb.js가 그려준다 — 페이지엔 만 둔다. 페이지가 고르는 건 두 가지뿐이다. ① 문서형(랜딩·FAQ·약관·청첩장 소개·마이페이지 홈) → : GNB를 화면 최상단에 fixed로 띄우고 본문을 68px 밀어준다. ② 앱셸형(마이페이지 대시보드·에디터 — body가 flex column이고 본문만 내부 스크롤) → 아무 클래스도 붙이지 않는다. GNB는 flex 첫 칸으로 그냥 놓인다. ============================================================ */ @view-transition{navigation:auto;} body > nav.gnb{view-transition-name:um-gnb; contain:layout;} ::view-transition-group(um-gnb){z-index:1000;} ::view-transition-old(um-gnb), ::view-transition-new(um-gnb){animation-duration:0s; mix-blend-mode:normal;} nav.gnb{ flex-shrink:0; z-index:50; background:rgba(253,252,250,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid rgba(0,0,0,.08); } /* 문서형 — position:fixed로 스크롤과 무관하게 항상 최상단 고정. (sticky는 body의 overflow-x:hidden과 겹치는 환경에서 고정이 풀리는 경우가 있어 fixed로 쓴다) */ body.gnb-fixed{padding-top:68px;} /* GNB가 fixed로 빠지는 만큼 본문을 밀어줌 (nav-in height와 동일) */ body.gnb-fixed > nav.gnb{position:fixed; top:0; left:0; right:0;} html{scroll-padding-top:68px;} /* 앵커 이동 시 고정 GNB에 안 가리도록 */ .gnb .nav-in{display:flex; align-items:center; justify-content:space-between; height:68px;} .gnb .wrap.nav-in{max-width:1200px; margin:0 auto; padding:0 24px;} /* GNB만 좌우 마진 축소 */ .gnb .logo{display:inline-flex; align-items:center; width:176px; height:34px; text-decoration:none;} .gnb .logo img{display:block; width:100%; height:auto;} /* 로고 이미지 로드 실패 시 폴백 — 기본은 숨겨뒀다가 onerror가 .logo에 logo-img-error를 붙이면 깨진 이미지 대신 브랜드 톤 텍스트로 교체한다 */ .gnb .logo-text-fallback{display:none;} .gnb .logo.logo-img-error{width:auto;} .gnb .logo.logo-img-error img{display:none;} .gnb .logo.logo-img-error .logo-text-fallback{ display:inline-flex; align-items:center; font-size:15px; font-weight:700; letter-spacing:.06em; color:var(--ink,#111); } /* .nav-right는 있어도 되고 없어도 된다 — 예전 페이지마다 한 겹 더 감싼 데가 있어 둘 다 받는다 */ .gnb .nav-right{display:flex; gap:26px; align-items:center; flex:1; margin-left:48px;} .gnb .nav-links{display:flex; align-items:center; justify-content:space-between; gap:40px; flex:1;} .gnb .nav-in > .nav-links{margin-left:48px;} .gnb .nav-left,.gnb .nav-actions{display:flex; align-items:center; gap:40px;} .gnb .nav-actions{gap:28px;} .gnb .nav-links a,.gnb .nav-links button.nav-login{ font-family:inherit; font-size:14px; font-weight:400; color:#111; text-decoration:none; line-height:normal; background:none; border:0; cursor:pointer; padding:0; white-space:nowrap; } .gnb .nav-links a:hover,.gnb .nav-links a.active,.gnb .nav-links button.nav-login:hover{color:#000;} .gnb .nav-links a.active{font-weight:700;} .gnb .nav-links a.nav-cta{ font-size:13px; font-weight:500; color:#fff !important; background:#111; padding:9px 18px; border-radius:99px; } /* 로그인 상태에선 「로그인」을 완전히 지운다 — 자리를 남겨두면 프로필(um-profile)이 그 빈 폭만큼 우측(마이페이지 쪽)으로 붙지 못하고 그대로 있는 것처럼 보인다. nav-actions는 우측 정렬(space-between)이라 display:none으로 폭을 아예 없애야 프로필이 마이페이지 쪽으로 자연스럽게 이동한다. */ html.um-authed .gnb a.nav-login{display:none;} /* 프로필(아바타+이름) — 대시보드처럼 로그인한 화면에서만 켠다 */ .gnb .um-profile{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft,#555);} .gnb .um-avatar{width:26px; height:26px; border-radius:50%; background:#eee; color:#111; flex:none; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:800;} .gnb .nav-toggle{display:none; width:34px; height:34px; border:none; background:none; padding:0; position:relative; cursor:pointer;} .gnb .nav-toggle span{position:absolute; left:6px; right:6px; height:2px; background:var(--ink,#111); border-radius:2px; transition:.25s;} .gnb .nav-toggle span:nth-child(1){top:11px;} .gnb .nav-toggle span:nth-child(2){top:17px;} .gnb .nav-toggle span:nth-child(3){top:23px;} .gnb .nav-toggle.open span:nth-child(1){top:17px; transform:rotate(45deg);} .gnb .nav-toggle.open span:nth-child(2){opacity:0;} .gnb .nav-toggle.open span:nth-child(3){top:17px; transform:rotate(-45deg);} /* 모바일 메뉴 열렸을 때 뒤 콘텐츠를 덮는 딤 — 하단 고정 가격바(z-index:80)까지 덮도록 그보다 위에 둔다 */ .nav-scrim{ position:fixed; inset:0; z-index:85; opacity:0; pointer-events:none; background:rgba(20,20,20,.32); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); transition:opacity .25s ease; } .nav-scrim.show{opacity:1; pointer-events:auto;} /* 메뉴가 열려있는 동안엔 GNB 자체를 불투명하게 — ① 평소엔 반투명이라 뒤 사진이 비쳐 메뉴 패널(불투명)과 색이 어긋나 보이고 ② backdrop-filter가 켜져 있으면 fixed 자손(.nav-scrim)의 필터 컨텍스트가 되어 뒷배경 블러가 안 먹는다 */ nav.gnb.menu-open{z-index:90; background:var(--paper,#fdfcfa); backdrop-filter:none; -webkit-backdrop-filter:none;} /* 880px에서 햄버거로 전환 — 데스크톱 메뉴 글자(모바일청첩장/무료 시안 만들기 등)가 nowrap이라 760~880px 구간에서 넘칠 수 있어, 그 전에 미리 모바일 레이아웃으로 접는다. 페이지 본문의 브레이크포인트(640/760/900)와는 별개로, GNB는 어디서나 880px 한 곳에서만 바뀐다. */ @media (max-width:880px){ .gnb .logo{width:148px;} .gnb .nav-toggle{display:block;} .gnb .nav-right{margin-left:0; flex:0 0 auto;} .gnb .nav-links,.gnb .nav-in > .nav-links{ position:absolute; top:100%; left:0; right:0; margin-left:0; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0; background:var(--paper,#fdfcfa); border-bottom:1px solid rgba(0,0,0,.08); max-height:0; overflow:hidden; padding:0 24px; transition:max-height .25s ease, padding .25s ease; } .gnb .nav-left,.gnb .nav-actions{flex-direction:column; align-items:stretch; gap:0; width:100%;} .gnb .nav-links.open{max-height:420px; padding:10px 24px 20px;} .gnb .nav-links a,.gnb .nav-links button.nav-login{ display:block; width:100%; padding:12px 0; font-size:15px; text-align:left; border-bottom:1px solid rgba(0,0,0,.06); } .gnb .nav-links a.nav-cta{ display:flex; justify-content:center; width:100%; box-sizing:border-box; border-bottom:none; margin-top:14px; padding:13px 18px; font-size:13px; font-weight:500; } .gnb .nav-links .um-profile{display:none;} /* 모바일 메뉴엔 프로필 미노출 */ } @media (prefers-reduced-motion:reduce){ .gnb .nav-links,.nav-scrim,.gnb .nav-toggle span{transition:none;} }