/* 기본 설정 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Pretendard', sans-serif; overflow-x: hidden; background-color: #ffffff; }

/* 1. 인트로 화면 스타일 */
#intro-screen {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100vh;
    /* 배경을 조금 더 깊이감 있는 남색으로 변경 */
    background: radial-gradient(circle at center, #1b2735 0%, #090a0f 100%);
    display: flex; justify-content: center; align-items: center;
    z-index: 1000; transition: opacity 1s ease-out;
    overflow: hidden; /* 별이 화면 밖으로 나가지 않게 */
}

/* [중요] 기존 .stars의 box-shadow 방식은 삭제하고 아래 코드로 교체합니다 */
.stars {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
}

/* JavaScript가 생성할 개별 별의 스타일 */
.star {
    position: absolute;
    background: white;       /* 백그라운드 색을 변경하면 다르게 보임   */
    border-radius: 50%;
    opacity: 0;
   /* 별 주위에 은은한 빛 효과 추가 (선택 사항) */
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
    /* JS에서 설정한 --duration 변수에 따라 제각각 반짝임 */
    animation: twinkle var(--duration) infinite ease-in-out;
}

@keyframes twinkle {
    0%, 100% { 
	      opacity: 0.3; 
		  transform: scale(1); }
    50% { 
	      opacity: 1; 
           /* 50% 시점에 1.5배로 커지게 설정 (더 키우고 싶으면 2.0 등으로 변경) */
/*		  transform: scale(1.2);    기존 사이즈 */
		  transform: scale(1.5); }
}

/* 인트로 로고 이미지 스타일 */
.intro-logo {
    width: 500px;         /* 로고의 가로 크기 (필요에 따라 조절하세요) */
    height: auto;         /* 가로 세로 비율 유지 */
    display: block;
    opacity: 0;           /* 처음엔 숨김 */
    
    /* 서서히 나타나며 위로 살짝 떠오르는 애니메이션 */
    animation: fadeInIntro 1.5s ease-out forwards;
    
    /* 로고 뒤에 은은한 후광 효과 (선택 사항) */
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.3));
}

@keyframes fadeInIntro {
    from {
        opacity: 0;
        transform: translateY(20px); /* 20px 아래에서 시작 */
    }
    to {
        opacity: 1;
        transform: translateY(0);    /* 제자리로 이동 */
    }
}

/* 별들이 로고를 가리지 않도록 위치 고정 */
.logo-container {
    position: relative;
    z-index: 10; 
}

/* --- 이후 메인 페이지 스타일은 동일합니다 --- */

/* 2. 메인 페이지 스타일 */
#main-content { opacity: 0; transition: opacity 1s; }
#main-content.show { opacity: 1; }
.hidden { display: none; }

/* 헤더 & 네비게이션 */
header { border-bottom: 1px solid #eee; padding: 20px 5%; }
.navbar { display: flex; justify-content: space-between; align-items: center; max-width: 1500px; margin: 0 auto; }

/*로고 영역 */
.logo {
    display: flex;
    align-items: center;
    text-decoration: none; /* 링크 밑줄 제거 */
}

.logo img {
    height: 55px; /* 로고 높이를 원하는 크기로 조절하세요 */
    width: auto;  /* 가로 세로 비율 유지 */
    display: block;
}


/* 메인 메뉴 스타일 */
/* 메인 메뉴 스타일 */
.nav-menu {
    list-style: none;
    display: flex;
    gap: 40px;
}

.nav-menu > li {
    position: relative; /* 하위 메뉴의 기준점 */
    padding-bottom: 10px; /* 마우스 오버 유지를 위한 여백 */
}

.nav-menu > li > a {
    text-decoration: none;
    color: #333;
    font-size: 1.1rem;
    font-weight: 800; /* 텍스트 굵기를 더 굵게 설정 (700~800) */
    transition: color 0.3s ease;
}

/* 마우스 오버 시 색상 변경 (파란색) */
.nav-menu > li:hover > a {
    color: #007AFF;
}

/* 하위 메뉴 스타일 (기본적으로 숨김) */
.sub-menu {
    list-style: none;
    position: absolute;
    top: 100%; /* 상위 메뉴 바로 아래 위치 */
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffffff;
    min-width: 120px;
    padding: 10px 0;
    border: 1px solid #eee;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border-radius: 8px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 100;
}

/* 상위 메뉴에 마우스 올리면 하위 메뉴 표시 */
.nav-menu > li:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    top: 110%; /* 살짝 아래로 내려오며 나타나는 효과 */
}

/* 하위 메뉴 내부 링크 스타일 */
.sub-menu li a {
    display: block;
    padding: 8px 20px;
    text-decoration: none;
    color: #666;
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}

.sub-menu li a:hover {
    background-color: #f5f5f5;
    color: #007AFF;
}



/* 슬라이드 배너 */
.banner-section { width: 100%; display: flex; justify-content: center; margin: 40px 0; }
.banner-slider { width: 95%; max-width: 1500px; height: 1024px; background: #f0f0f0; border-radius: 15px; overflow: hidden; }
.banner-slider img { width: 100%; height: 100%; object-fit: cover; }

/* 철학 섹션 */
.philosophy-section { padding: 100px 5%; text-align: center; background: #fafafa; }
.philosophy-text { font-size: 3.5rem; font-weight: 800; line-height: 1.2; color: #111; word-break: keep-all; }
.philosophy-text span { color: #007AFF; }



.footer .section-inner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 50px 0;
    display: flex;
    justify-content: space-between;
}






/* 반응형 (Mobile) */
@media (max-width: 768px) {
    .nav-menu { display: none; }
    .banner-slider { height: 300px; }
    .philosophy-text { font-size: 2rem; }

    .logo img {
        height: 30px; /* 모바일에서는 조금 더 작게 설정 */
    }


}