body { font-family: 'Pretendard', sans-serif; word-break: keep-all; }


.gap-30 { gap: 10em; }

/* 로그인 페이지 전용 배경 */
.login-page-main {
    background: 
        /* 상단 그라데이션 오버레이 */
        linear-gradient(135deg, rgba(15, 49, 134, 0.95) 0%, rgba(23, 37, 84, 0.98) 100%),
        /* 기하학적 패턴 */
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 30px,
            rgba(255, 255, 255, 0.02) 30px,
            rgba(255, 255, 255, 0.02) 60px
        ),
        /* 원형 그라데이션 포인트 */
        radial-gradient(ellipse at 20% 20%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(15, 49, 134, 1) 0%, rgba(23, 37, 84, 1) 100%);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 100vh;
}

/* 메인 페이지 배경 */
.main-hero-bg {
    background: 
        linear-gradient(180deg, rgba(15, 49, 134, 0.9) 0%, rgba(23, 37, 84, 0.95) 100%),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-size: cover, 60px 60px;
}

/* 배너 배경 (진로체험활동 등) */
.banner-bg {
    background: 
        linear-gradient(135deg, rgba(15, 49, 134, 0.92) 0%, rgba(30, 64, 175, 0.88) 50%, rgba(23, 37, 84, 0.95) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-size: cover, 100px 100px;
}

/* 섹션 배경 그라데이션 */
.section-gradient {
    background: linear-gradient(180deg, #f8fafc 0%, #eff6ff 50%, #f8fafc 100%);
}

/* 부드럽게 움직이는 배경 블롭 (이미 login.php에서 사용 중인 클래스 확장) */
.bg-blob {
    filter: blur(40px);
    opacity: 0.65;
}

.animate-blob {
    animation: blobMove 18s ease-in-out infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

@keyframes blobMove {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    25% {
        transform: translate3d(20px, -10px, 0) scale(1.05);
    }
    50% {
        transform: translate3d(-10px, 10px, 0) scale(1.08);
    }
    75% {
        transform: translate3d(-20px, -15px, 0) scale(1.03);
    }
}

/* 위아래 잔잔한 플로팅 애니메이션 */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}

/* 지도 SVG 스타일 */
.map-path {
    fill: #ffffff;
    stroke: #cbd5e1; /* 연한 회색 라인 */
    stroke-width: 1.5;
    transition: all 0.3s ease;
    cursor: pointer;
    stroke-linejoin: round;
    stroke-linecap: round;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05));
}
.map-path:hover {
    fill: #eff6ff;     /* 호버시 아주 연한 블루 */
    stroke: #2563eb;   /* 호버시 진한 블루 라인 */
    stroke-width: 2;
    transform: translateY(-3px);
    filter: drop-shadow(0 6px 12px rgba(37, 99, 235, 0.2));
    z-index: 20;
}
/* 클릭(Active) 상태 스타일 */
.map-path.active {
    fill: #2563eb !important; /* 선택시 진한 블루 */
    stroke: #1e40af !important;
    transform: translateY(-3px);
    filter: drop-shadow(0 4px 15px rgba(37, 99, 235, 0.5));
    z-index: 30;
}

.map-label {
    font-size: 13px;
    fill: #64748b;     /* 텍스트 컬러 */
    pointer-events: none;
    font-weight: 700;
    text-anchor: middle;
    transition: all 0.3s;
    text-shadow: 1px 1px 0px #fff, -1px -1px 0px #fff, 1px -1px 0px #fff, -1px 1px 0px #fff;
}

.map-wrapper.has-active .map-path:not(.active) {
    opacity: 0.6;
}
.map-path.active + .map-label {
    fill: #1e3a8a;
    font-weight: 900;
    font-size: 14px;
    z-index: 40;
}

/* 리스트 아이템 애니메이션 */
@keyframes slideUpFade {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.list-animate li {
    animation: slideUpFade 0.4s ease-out forwards;
    opacity: 0;
}
.list-animate li:nth-child(1) { animation-delay: 0.1s; }
.list-animate li:nth-child(2) { animation-delay: 0.2s; }
.list-animate li:nth-child(3) { animation-delay: 0.3s; }

/* 커스텀 스크롤바 */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-track { background: #f1f5f9; }