/* 💻 PC에서는 숨김 */ .menu-btn{ display:none !important; } .menu-btn{ display:none; font-size:28px; cursor:pointer; color:white; } body{ margin:0; font-family:-apple-system; background:black; color:white; } /* 헤더 */ header{ display:flex; justify-content:space-between; align-items:center; padding:20px 60px; background:rgba(0,0,0,0.6); backdrop-filter:blur(10px); } .logo img{ height:60px; } /* 메뉴 */ nav{ display:flex; } nav a{ display:inline-block; /* 🔥 추가 */ position:relative; margin-left:30px; /* 🔥 추가 */ color:white; text-decoration:none; transition:0.3s; } nav a:hover{ color:#FFFFFF; } nav a:active{ color:white; } /* hover 효과 */ nav a::after{ content:""; position:absolute; left:0; bottom:-5px; width:100%; height:2px; background:white; /* 🔥 핵심 */ transform:scaleX(0); transform-origin:left; transition:transform 0.3s ease; } nav a:hover::after{ transform:scaleX(1); } /* 히어로 */ .hero{ display:flex; justify-content:space-between; align-items:center; height:90vh; padding:0 80px; } .title{ font-size:100px; font-weight:800; background:linear-gradient(90deg,#fff,#888); -webkit-background-clip:text; color:transparent; } .subtitle{ margin-top:20px; opacity:0.7; } .hero img{ width:600px; border-radius:20px; } /* 버튼 */ .btn{ display:inline-block; margin-top:30px; padding:15px 40px; background:white; color:black; border-radius:30px; text-decoration:none; position:relative; overflow:hidden; } /* 버튼 반짝 */ .btn::after{ content:""; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(120deg,transparent,rgba(255,255,255,0.6),transparent); transition:0.6s; } .btn:hover::after{ left:100%; } /* 로고 페이지 */ .logoPage{ text-align:center; padding:200px; } .logoPage img{ width:400px; margin-bottom:30px; } /* 푸터 */ footer{ text-align:center; padding:30px; color:#FFFFFF; border-top:1px solid #444; margin-top:50px; } /* 애니메이션 */ .fade{ opacity:0; transform:translateY(60px); transition:1s; } .fade.show{ opacity:1; transform:translateY(0); } /* 마우스 움직임 */ .parallax{ transition:transform 0.4s cubic-bezier(0.25,0.8,0.25,1); } /* 📱 모바일 */ @media (max-width: 768px){ /* 햄버거 등장 */ .menu-btn{ display:block; } /* 메뉴 숨김 */ nav{ position:fixed; top:0; right:-100%; width:70%; height:100vh; background:rgba(0,0,0,0.9); backdrop-filter:blur(15px); display:flex; flex-direction:column; /* 🔥 여기 수정 */ justify-content:flex-start; align-items:flex-start; padding-top:100px; padding-left:30px; transition:0.4s; } /* 메뉴 열림 */ nav{ right:-100%; } nav.active{ right:0; } nav a{ font-size:22px; margin:20px 0; } /* 히어로 */ .hero{ flex-direction:column; text-align:left; padding:40px 20px; height:auto; } .title{ font-size:40px; } .subtitle{ font-size:14px; } .hero img{ width:90%; margin-top:30px; } .btn{ width:100%; text-align:center; } } .menu-btn{ display:block; } /* 기본 (PC) → 무조건 숨김 */ .close-btn{ display:none !important; } /* 📱 모바일에서만 보이게 */ @media (max-width: 768px){ .close-btn{ display:block !important; position:absolute; top:20px; right:20px; font-size:28px; cursor:pointer; color:white; } } @media (max-width: 768px){ .menu-btn{ display:block !important; } } /* 배경 */ .modal{ position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.4); backdrop-filter:blur(0px); display:flex; justify-content:center; align-items:center; opacity:0; pointer-events:none; transition:opacity 0.4s ease, backdrop-filter 0.4s ease; z-index:1000; } /* 열릴 때 */ .modal.active{ opacity:1; pointer-events:auto; backdrop-filter:blur(12px); /* 🔥 블러 */ } /* 박스 */ .modal-box{ background:rgba(20,20,20,0.9); padding:40px; border-radius:20px; text-align:center; transform:scale(0.8) translateY(30px); /* 🔥 시작 상태 */ opacity:0; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease; box-shadow:0 20px 60px rgba(0,0,0,0.6); } /* 열릴 때 */ .modal.active .modal-box{ transform:scale(1) translateY(0); opacity:1; } /* 버튼 */ .modal-box button{ margin-top:20px; padding:10px 20px; border:none; border-radius:12px; cursor:pointer; background:white; color:black; transition:0.3s; } /* 버튼 hover */ .modal-box button:hover{ transform:scale(1.05); } .modal-box{ width:600px; max-width:90%; padding:70px; transform:scale(0.85) translateY(40px); /* 시작 더 크게 */ } .modal-box p{ font-size:24px; font-weight:600; } nav{ display:flex; align-items:center; } header{ display:flex; align-items:center; } nav{ margin-left:auto; } .version{ margin-left:20px; font-size:12px; opacity:0.6; } header{ display:flex; align-items:center; } /* 기본 PC */ .logo{ flex:1; } .version{ display:none; /* PC에서는 숨김 */ } .menu-btn{ display:none; } .auth-area{ position:absolute; top:20px; right:20px; display:flex; align-items:center; gap:10px; z-index:1000; } #userName{ color:white; font-size:14px; font-weight:600; white-space:nowrap; } /* ✨ Glassmorphism 로그인 / 로그아웃 버튼 */ .login-btn, .logout-btn, #authBtn{ background:rgba(255,255,255,0.15); color:white; border:1px solid rgba(255,255,255,0.25); padding:10px 18px; border-radius:14px; cursor:pointer; font-weight:600; font-size:14px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 8px 24px rgba(0,0,0,0.25); transition:all 0.25s ease; } /* ✨ hover 효과 */ .login-btn:hover, .logout-btn:hover, #authBtn:hover{ background:rgba(255,255,255,0.22); border:1px solid rgba(255,255,255,0.35); transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,0.35); } /* ✨ 클릭 효과 */ .login-btn:active, .logout-btn:active, #authBtn:active{ transform:translateY(0); opacity:0.95; }