/* 💻 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;
}