/* ========================================================= GILDONGSEKKI MOBILE MENU V2 모바일 전용 텍스트 메뉴 DESKTOP 영향 없음 ========================================================= */ @media (max-width:820px){ html{ zoom:1 !important; overflow-x:hidden !important; } body{ overflow-x:hidden !important; } /* ===================================================== HEADER ===================================================== */ .shared-site-header, .shared-home-header, .shared-sub-header, header.site-header{ position:sticky !important; top:0 !important; left:0 !important; right:0 !important; width:100% !important; height:68px !important; min-height:68px !important; z-index:10000 !important; overflow:visible !important; background: linear-gradient( 115deg, rgba(42,57,44,.95) 0%, rgba(55,67,49,.94) 52%, rgba(66,67,46,.93) 100% ) !important; border-bottom: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 5px 18px rgba(18,27,20,.15) !important; -webkit-backdrop-filter: blur(18px) saturate(110%) !important; backdrop-filter: blur(18px) saturate(110%) !important; } .shared-site-header::before, .shared-site-header::after, .shared-home-header::before, .shared-home-header::after, .shared-sub-header::before, .shared-sub-header::after, header.site-header::before, header.site-header::after{ display:none !important; } .shared-header-inner{ position:relative !important; width:100% !important; max-width:none !important; height:68px !important; margin:0 !important; padding: 5px 12px !important; display:flex !important; align-items:center !important; box-sizing:border-box !important; } /* ===================================================== ORIGINAL IMAGE NAV 모바일에서는 무조건 숨김 ===================================================== */ .shared-nav, .cinematic-nav, header.site-header nav, header.site-header .nav{ display:none !important; visibility:hidden !important; pointer-events:none !important; position:absolute !important; width:0 !important; height:0 !important; overflow:hidden !important; } /* 기존 모바일 메뉴 버튼도 제거 */ .shared-mobile-toggle, .shared-menu-toggle, .mobile-menu-toggle, .menu-toggle, .hamburger-menu{ display:none !important; } /* ===================================================== MAIN LOGO ===================================================== */ .shared-header-brand{ display:flex !important; align-items:center !important; margin:0 !important; flex:0 0 auto !important; } .shared-main-logo{ display:block !important; width:57px !important; height:57px !important; min-width:57px !important; max-width:57px !important; min-height:57px !important; max-height:57px !important; margin:0 !important; object-fit:contain !important; filter: drop-shadow( 0 3px 7px rgba(14,22,16,.20) ) !important; } /* ===================================================== LOGIN / USER ===================================================== */ .shared-header-actions, .shared-user-area, .shared-user{ position:absolute !important; right:61px !important; top:50% !important; transform: translateY(-50%) !important; display:flex !important; align-items:center !important; width:auto !important; margin:0 !important; gap:7px !important; z-index:4 !important; } .shared-login-button, .login-button, header.site-header .login-button{ display:flex !important; align-items:center !important; justify-content:center !important; width:auto !important; min-width:94px !important; height:40px !important; margin:0 !important; padding: 0 13px !important; border: 1px solid rgba(255,255,255,.30) !important; border-radius: 9px !important; background: rgba(255,255,255,.055) !important; color:#fff !important; font-size: 10px !important; font-weight: 800 !important; white-space: nowrap !important; box-shadow:none !important; } .shared-user-avatar{ width:35px !important; height:35px !important; min-width:35px !important; margin:0 !important; } .shared-user-text{ display:none !important; } .shared-logout-button{ display:none !important; } /* ===================================================== NEW HAMBURGER ===================================================== */ .gs-mobile-v2-toggle{ position:absolute !important; right:10px !important; top:50% !important; transform: translateY(-50%) !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; width:43px !important; height:43px !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius: 11px !important; background: rgba(255,255,255,.06) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important; z-index:5 !important; cursor:pointer !important; } .gs-mobile-v2-toggle span{ display:block; width:21px; height:2px; margin: 2.5px 0; border-radius: 10px; background: rgba(255,255,255,.95); transition: transform .18s ease, opacity .18s ease; } body.gs-mobile-v2-open .gs-mobile-v2-toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg); } body.gs-mobile-v2-open .gs-mobile-v2-toggle span:nth-child(2){ opacity:0; } body.gs-mobile-v2-open .gs-mobile-v2-toggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } /* ===================================================== NEW TEXT MENU ===================================================== */ .gs-mobile-v2-menu{ position:fixed !important; left:12px !important; right:12px !important; top:77px !important; display:none !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap:7px !important; padding: 12px !important; border: 1px solid rgba(255,255,255,.13) !important; border-radius: 18px !important; background: linear-gradient( 145deg, rgba(40,55,43,.975), rgba(59,64,45,.97) ) !important; box-shadow: 0 18px 45px rgba(13,22,16,.30) !important; -webkit-backdrop-filter: blur(22px) saturate(115%) !important; backdrop-filter: blur(22px) saturate(115%) !important; z-index:10020 !important; } body.gs-mobile-v2-open .gs-mobile-v2-menu{ display:grid !important; } .gs-mobile-v2-link{ position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; min-width:0; height:61px; padding: 0 15px; border: 1px solid rgba(255,255,255,.065); border-radius: 12px; background: rgba(255,255,255,.038); color:#fff; text-decoration:none; overflow:hidden; } .gs-mobile-v2-link::after{ content:""; position:absolute; left:0; top:13px; bottom:13px; width:2px; border-radius: 10px; background: transparent; } .gs-mobile-v2-link.active{ background: rgba(255,255,255,.095); border-color: rgba(255,255,255,.12); } .gs-mobile-v2-link.active::after{ background: #dbc482; } .gs-mobile-v2-link strong{ color:#fff; font-size: 14px; font-weight: 800; line-height: 1.2; } .gs-mobile-v2-link small{ display:block; margin-top: 4px; color: rgba(255,255,255,.48); font-size: 8px; font-weight: 700; letter-spacing: .10em; } /* ===================================================== BACKDROP ===================================================== */ .gs-mobile-v2-backdrop{ position:fixed; left:0; right:0; top:68px; bottom:0; display:none; background: rgba(16,23,18,.28); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); z-index:10010; } body.gs-mobile-v2-open .gs-mobile-v2-backdrop{ display:block; } body.gs-mobile-v2-open{ overflow:hidden !important; } /* ===================================================== MAIN HERO MOBILE CLEANUP ===================================================== */ body.gildong-home-separated{ padding-top:0 !important; } .cinematic-hero, .home-hero{ min-height: calc(100svh - 68px) !important; height:auto !important; overflow:hidden !important; background-position: 57% center !important; } .cinematic-hero-copy, .home-hero-content, .hero-copy{ width:100% !important; max-width:none !important; min-height: calc(100svh - 68px) !important; margin:0 !important; padding: 135px 25px 42px !important; display:flex !important; flex-direction:column !important; justify-content:flex-end !important; align-items:flex-start !important; box-sizing:border-box !important; } .cinematic-hero h1, .home-hero h1, .hero-title{ max-width:100% !important; margin: 0 0 8px !important; font-size: clamp(52px,14vw,68px) !important; line-height: .96 !important; letter-spacing: -.07em !important; white-space: nowrap !important; transform:none !important; } .cinematic-hero .hero-buttons, .home-hero .hero-buttons{ display:grid !important; grid-template-columns: 1fr 1fr !important; width:100% !important; max-width:350px !important; gap:8px !important; } .cinematic-hero .hero-buttons a, .cinematic-hero .hero-button, .home-hero .hero-buttons a{ width:100% !important; height:49px !important; min-height:49px !important; margin:0 !important; padding: 0 8px !important; border-radius: 8px !important; font-size: 11px !important; } /* ===================================================== CONTENT ===================================================== */ .functional-wrap{ width: calc(100% - 24px) !important; max-width:none !important; margin: 0 auto !important; } .functional-home-section{ padding: 33px 0 !important; } .poong-live-grid{ grid-template-columns: 1fr !important; } .poong-live-grid > *, .functional-home-section .poong-live-grid > *, .functional-home-section .poong-live-grid > :only-child{ width:100% !important; max-width:none !important; } /* ===================================================== SUBPAGE HERO ===================================================== */ .gs-depth-hero-card, .gs-subhero.gs-depth-hero-card{ width: calc(100% - 18px) !important; min-height:0 !important; margin: 10px auto 15px !important; padding: 28px 20px !important; border-radius: 18px !important; } .gs-depth-hero-card > .gs-subhero-visual{ display:none !important; } .gs-depth-hero-card h1{ margin: 7px 0 11px !important; font-size: 35px !important; line-height: 1.08 !important; } .gs-depth-hero-card p{ margin:0 !important; font-size: 12px !important; line-height: 1.65 !important; } .gs-depth-content-card{ width: calc(100% - 18px) !important; margin: 0 auto 13px !important; padding: 18px 13px !important; border-radius: 17px !important; } } /* ========================================================= VERY SMALL PHONE ========================================================= */ @media (max-width:380px){ .shared-main-logo{ width:52px !important; height:52px !important; min-width:52px !important; } .shared-login-button, .login-button{ min-width: 81px !important; height: 37px !important; padding: 0 9px !important; font-size: 9px !important; } .gs-mobile-v2-link{ height: 57px; padding: 0 12px; } .gs-mobile-v2-link strong{ font-size: 13px; } } /* ========================================================= DESKTOP MOBILE-MENU HARD HIDE V1 ========================================================= */ @media (min-width:821px){ .gs-mobile-v2-toggle, .gs-mobile-v2-menu, .gs-mobile-v2-backdrop{ display:none !important; visibility:hidden !important; pointer-events:none !important; } } /* /DESKTOP MOBILE-MENU HARD HIDE V1 */ /* ========================================================= MOBILE HEADER V12 실제 DOM 기준: [LOGO] [출석] [PROFILE] [MENU] ========================================================= */ @media(max-width:820px){ /* ===================================================== LEFT BRAND 실제 클래스는 shared-brand ===================================================== */ header.site-header .shared-header-inner > .shared-brand{ position:relative !important; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; transform:none !important; display:flex !important; align-items:center !important; justify-content:center !important; flex: 0 0 57px !important; width:57px !important; height:57px !important; min-width:57px !important; max-width:57px !important; margin:0 !important; padding:0 !important; overflow:visible !important; z-index:3 !important; } header.site-header .shared-header-inner > .shared-brand::before, header.site-header .shared-header-inner > .shared-brand::after{ content:none !important; display:none !important; } header.site-header .shared-brand .shared-main-logo{ position:static !important; display:block !important; width:57px !important; height:57px !important; min-width:57px !important; max-width:57px !important; min-height:57px !important; max-height:57px !important; margin:0 !important; transform:none !important; object-fit:contain !important; } /* * 혹시 desktop nav link가 JS/CSS 영향으로 * header-inner 직속에 남더라도 모바일에서는 제거. */ header.site-header .shared-header-inner > .shared-nav-link{ display:none !important; } /* ===================================================== RIGHT AUTH GROUP attendance + profile ===================================================== */ header.site-header .shared-auth{ position:absolute !important; right:62px !important; top:50% !important; transform: translateY(-50%) !important; display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-end !important; width:auto !important; height:auto !important; margin:0 !important; padding:0 !important; gap:7px !important; z-index:6 !important; } /* ===================================================== ATTENDANCE ===================================================== */ header.site-header .shared-attendance-button[hidden]{ display:none !important; } header.site-header .shared-attendance-button{ position:static !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:4px !important; width:auto !important; min-width:58px !important; height:35px !important; margin:0 !important; padding: 0 9px !important; border: 1px solid rgba(255,255,255,.22) !important; border-radius: 10px !important; background: rgba(255,255,255,.075) !important; color:#fff !important; font-family:inherit !important; font-size: 10px !important; font-weight: 800 !important; line-height:1 !important; white-space:nowrap !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important; transform:none !important; } header.site-header .shared-attendance-button.is-complete{ border-color: rgba(172,220,186,.34) !important; background: rgba(91,149,108,.25) !important; } header.site-header .shared-attendance-icon{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:15px !important; height:15px !important; font-size:11px !important; font-weight:900 !important; line-height:1 !important; } header.site-header .shared-attendance-label{ display:inline-block !important; font-size:10px !important; font-weight:800 !important; line-height:1 !important; } /* ===================================================== USER PROFILE ===================================================== */ header.site-header .shared-user-menu{ position:relative !important; left:auto !important; right:auto !important; top:auto !important; transform:none !important; display:flex !important; align-items:center !important; justify-content:center !important; width:35px !important; height:35px !important; margin:0 !important; padding:0 !important; flex: 0 0 35px !important; z-index:7 !important; } /* * 기존 CSS가 shared-user 자체에 absolute를 걸고 있었음. * 모바일에서는 반드시 해제. */ header.site-header .shared-user-menu > .shared-user{ position:static !important; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; transform:none !important; display:flex !important; align-items:center !important; justify-content:center !important; width:35px !important; height:35px !important; min-width:35px !important; margin:0 !important; padding:0 !important; gap:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; } header.site-header .shared-user-avatar{ position:static !important; display:block !important; width:35px !important; height:35px !important; min-width:35px !important; max-width:35px !important; min-height:35px !important; max-height:35px !important; margin:0 !important; border-radius:50% !important; object-fit:cover !important; transform:none !important; } header.site-header .shared-user-text, header.site-header .shared-user-arrow{ display:none !important; } /* ===================================================== HAMBURGER ===================================================== */ header.site-header .gs-mobile-v2-toggle{ position:absolute !important; right:10px !important; top:50% !important; transform: translateY(-50%) !important; width:43px !important; height:43px !important; margin:0 !important; z-index:8 !important; } } /* 아주 좁은 모바일 */ @media(max-width:380px){ header.site-header .shared-auth{ right:59px !important; gap:5px !important; } header.site-header .shared-attendance-button{ min-width:52px !important; padding: 0 7px !important; } } /* ========================================================= MOBILE V13 - REMOVE LEGACY SHARED MENU BUTTON 새 gs-mobile-v2-toggle만 사용 ========================================================= */ @media(max-width:820px){ header.site-header .shared-menu-button{ display:none !important; visibility:hidden !important; pointer-events:none !important; position:absolute !important; width:0 !important; height:0 !important; margin:0 !important; padding:0 !important; overflow:hidden !important; } } /* ========================================================= MOBILE HEADER V14 FINAL GUARD - legacy hamburger 완전 제거 - desktop image nav 모바일 완전 제거 - 새 mobile v2 menu만 허용 ========================================================= */ @media(max-width:820px){ /* ===================================================== OLD HAMBURGER - ABSOLUTELY OFF ===================================================== */ header.site-header .shared-menu-button, header.site-header .shared-mobile-toggle, header.site-header .shared-menu-toggle, header.site-header .mobile-menu-toggle, header.site-header .menu-toggle, header.site-header .hamburger-menu{ display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important; position:absolute !important; left:auto !important; right:auto !important; width:0 !important; height:0 !important; min-width:0 !important; min-height:0 !important; max-width:0 !important; max-height:0 !important; margin:0 !important; padding:0 !important; overflow:hidden !important; transform:none !important; } /* ===================================================== DESKTOP IMAGE NAV - ABSOLUTELY OFF 모바일 text menu는 gs-mobile-v2-*라 영향 없음 ===================================================== */ header.site-header .shared-nav, header.site-header .shared-nav-link, header.site-header .shared-nav-image, header.site-header .shared-nav-fallback, header.site-header .cinematic-nav{ display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important; } /* * 모바일에서 표시를 허용하는 햄버거는 * 이것 하나뿐. */ header.site-header .gs-mobile-v2-toggle{ display:flex !important; visibility:visible !important; opacity:1 !important; pointer-events:auto !important; } }