/* ================================================== GOODDAY – FINAL CSS (CLEAN) ✅ (ONE BLOCK) - Sticky transparent header -> orange on scroll (gd-scrolled) - Home hero behind header (.gd-hero) - Desktop dropdown orange/white - Mobile menu: LEFT slide drawer (Innofoods style) + clean alignment ================================================== */ /* ===== Root ===== */ :root{ --gd-header-h: 88px; --gd-orange: #f95300; } /* ===== Hero: Desktop / Mobile switch ===== */ .hero-desktop{ display:block; } .hero-mobile{ display:none; } @media (max-width:781px){ .hero-desktop{ display:none; } .hero-mobile{ display:block; } } /* ===== Product scroller arrow hint ===== */ .product-scroller{ position:relative; } .product-scroller::after{ content:"→"; position:absolute; right:14px; top:50%; transform:translateY(-50%); font-size:30px; font-weight:700; color:var(--gd-orange); opacity:.6; pointer-events:none; } @media (max-width:781px){ .product-scroller::after{ font-size:24px; right:10px; } } /* ===== Base rendering + typography ===== */ body{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-top:0 !important; padding-top: var(--gd-header-h) !important; } p{ font-weight:400; } h1,h2{ font-weight:500; } h3,h4{ font-weight:400; } /* ===== Admin bar ===== */ #wpadminbar{ position:fixed !important; } /* ===== Sticky overlay header ===== */ .site-header, header, .header{ position:fixed !important; top:0 !important; left:0 !important; right:0 !important; width:100% !important; z-index:99999 !important; background:transparent !important; transition:background-color 200ms ease, box-shadow 200ms ease; } body.gd-scrolled .site-header, body.gd-scrolled header, body.gd-scrolled .header{ background-color:var(--gd-orange) !important; box-shadow:0 10px 30px rgba(0,0,0,.12); } /* ===== Hero behind fixed header (ALL pages) ===== */ .gd-hero{ margin-top: calc(-1 * var(--gd-header-h)) !important; padding-top: var(--gd-header-h) !important; } /* ===== DESKTOP DROPDOWN (submenu) ===== */ .wp-block-navigation__submenu-container{ background: var(--gd-orange) !important; border:0 !important; box-shadow:0 12px 30px rgba(0,0,0,.18) !important; } .wp-block-navigation__submenu-container a{ color:#fff !important; } .wp-block-navigation__submenu-container a:hover{ opacity:.85; } /* ================================================== MOBILE MENU – REBUILD (MINIMAL + STABLE) 목표: 1) 왼쪽 슬라이드 드로어 2) 모든 메뉴 "왼쪽 정렬" 통일 3) Product 토글(∨ / +)이 글자 아래로 떨어지지 않게 한 줄 정렬 4) Product 하위만 들여쓰기 ================================================== */ @media (max-width: 781px){ /* (A) 메뉴 오픈 상태 전체 레이어(스크림) */ .wp-block-navigation__responsive-container.is-menu-open{ position: fixed !important; inset: 0 !important; z-index: 100000 !important; background: rgba(0,0,0,0.35) !important; } /* (B) 실제 패널(드로어) */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{ position: fixed !important; top: 0 !important; left: 0 !important; right: auto !important; height: 100vh !important; width: min(82vw, 360px) !important; max-width: 360px !important; background: var(--gd-orange) !important; box-shadow: 8px 0 30px rgba(0,0,0,0.25) !important; padding: 18px 18px !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; /* 테마가 가운데 정렬/변형 주는 것 방지 */ transform: none !important; margin: 0 !important; } /* (C) 닫기(X) 버튼 */ .wp-block-navigation__responsive-container-close{ position: absolute !important; top: 12px !important; right: 12px !important; z-index: 2 !important; color: #fff !important; fill: #fff !important; } /* (D) 메뉴 리스트 전체 */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{ display: flex !important; flex-direction: column !important; gap: 18px !important; margin-top: 44px !important; /* X 아래로 */ padding: 0 !important; align-items: stretch !important; /* ✅ 폭을 꽉 채워서 정렬 안정화 */ text-align: left !important; } /* (E) 상위 메뉴 아이템: 한 줄 레이아웃(글자 + 토글) */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{ width: 100% !important; text-align: left !important; } /* 핵심: item__content를 flex로 만들어서 "Product 글자"와 "∨ 토글"이 같은 줄 */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{ display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; width: 100% !important; } /* 링크(글자) */ .wp-block-navigation__responsive-container.is-menu-open a, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label{ color: #fff !important; font-weight: 600 !important; font-size: 18px !important; letter-spacing: 0.02em !important; text-decoration: none !important; } /* (F) 서브메뉴 토글 버튼(∨ / +) — 오른쪽 끝으로 */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle{ margin-left: auto !important; /* ✅ 오른쪽 끝 */ display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; padding: 0 !important; background: transparent !important; border: 0 !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon{ color: #fff !important; fill: #fff !important; width: 22px !important; height: 22px !important; } /* (G) ✅ 모바일에서는 서브메뉴 박스 스타일 제거 + 아래로 펼치기 */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{ position: static !important; inset: auto !important; transform: none !important; width: 100% !important; background: transparent !important; box-shadow: none !important; border: 0 !important; margin: 10px 0 0 !important; /* ✅ 하위만 들여쓰기 */ padding-left: 26px !important; /* 👈 여기 숫자만 조절하면 됨 */ border-left: 2px solid rgba(255,255,255,0.25) !important; text-align: left !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a{ display: block !important; padding: 10px 0 !important; font-size: 16px !important; font-weight: 500 !important; opacity: 0.95 !important; } }