/* =====================================================
   컬러 팔레트 (70% 흰색 / 20% 검정 / 10% 액센트)
   ===================================================== */
:root {
    /* 70% - 흰색/밝은 배경 */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #fafafa;
    --color-bg-tertiary: #f5f5f5;
    
    /* 20% - 검정/다크 (텍스트, 다크 섹션) */
    --color-text-primary: #111111;
    --color-text-secondary: #333333;
    --color-text-muted: #666666;
    --color-dark-bg: #0e0e0e;
    --color-dark-surface: #1a1a1a;
    
    /* 10% - 액센트 (시안-청록 그라데이션) */
    --color-accent: #00D4FF;
    --color-accent-secondary: #00E5C7;
    --color-accent-dark: #00B4D8;
    --color-gradient: linear-gradient(135deg, #00D4FF 0%, #00E5C7 100%);
    --color-gradient-reverse: linear-gradient(135deg, #00E5C7 0%, #00D4FF 100%);
    
    /* 그림자 */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
    
    /* ===== 버튼 디자인 토큰 ===== */
    /* 모양 */
    --btn-radius: 10px;
    --btn-radius-pill: 50px;
    
    /* 크기별 패딩 */
    --btn-padding-sm: 0.5rem 1.25rem;
    --btn-padding-md: 0.875rem 1.75rem;
    --btn-padding-lg: 1.125rem 2.25rem;
    --btn-padding-xl: 1.5rem 3rem;
    
    /* 폰트 크기 */
    --btn-font-sm: 1rem;
    --btn-font-md: 1rem;
    --btn-font-lg: 1.125rem;
    
    /* 호버 효과 */
    --btn-hover-lift: translateY(-2px);
    --btn-hover-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    --btn-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-home .user-content,
.user-content:has(.home-hero) {
    background-color: transparent;
}

.menu-home .user-content {
    padding: 0;
    background: transparent;
    margin-top: 0; /* 메인페이지에서는 헤더와 히어로 섹션 간격 제거 */
}

body.menu-home {
    scroll-snap-type: y proximity;
    overflow-x: hidden;
    /* overflow-y는 기본값(visible) 유지하여 sticky가 작동하도록 */
    overflow-y: auto;
}

/* 모바일에서 헤더 sticky와 오른쪽 여백 문제 해결 */
@media (max-width: 767px) {
    /* html 레벨에서 오른쪽 여백 방지 */
    html {
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
        /* html이 스크롤 컨테이너가 되지 않도록 */
        height: 100%;
    }
    
    /* body가 명확한 스크롤 컨테이너가 되도록 설정 - sticky의 기준점 */
    body.menu-home {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        width: 100% !important;
        max-width: 100vw !important;
        height: 100% !important;
        /* 스크롤 컨테이너로 명확히 설정 */
        position: relative;
        /* body가 스크롤 가능하도록 */
        -webkit-overflow-scrolling: touch;
        /* 모바일에서 scroll-snap 비활성화 (스크롤 문제 해결) */
        scroll-snap-type: none;
    }
    
    /* user-wrapper는 스크롤 컨테이너가 아니어야 함 - sticky가 작동하려면 */
    .user-wrapper {
        overflow: visible !important;
        width: 100%;
        max-width: 100vw;
        /* flex 컨테이너에서 sticky가 작동하도록 높이 제한 없음 */
        min-height: 100vh;
        /* 스크롤 컨테이너가 아니도록 명확히 설정 */
        position: relative;
        /* flex 컨테이너 유지 */
        display: flex;
        flex-direction: column;
    }
    
    /* user-content도 스크롤 컨테이너가 아니어야 함 */
    .user-content {
        overflow: visible !important;
        width: 100%;
        max-width: 100vw;
        /* flex: 1이 sticky를 방해하지 않도록 */
        flex: 1;
    }
    
    /* 헤더는 항상 뷰포트 전체 너비 유지하고 sticky 작동 보장 */
    .user-header {
        /* sticky 설정 - body를 기준으로 작동 */
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
        /* sticky가 작동하도록 flex-shrink 방지 */
        flex-shrink: 0 !important;
        /* flex 컨테이너 내에서도 sticky가 작동하도록 */
        align-self: stretch;
    }
    
    /* 모바일에서 최초에는 투명하게 유지 (히어로 섹션에 있을 때) - user-header.css의 모바일 스타일 오버라이드 */
    .user-header.is-home:not(.has-submenu-open):not(.scrolled) {
        background-color: transparent !important;
        box-shadow: none !important;
    }
    
    /* 스크롤 시 배경색 표시 */
    .user-header.is-home.scrolled:not(.has-submenu-open) {
        background-color: #1a1a1a !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    }
    
    /* 서브메뉴가 열렸을 때는 배경색 유지 - position: relative가 sticky를 방해하지 않도록 */
    .user-header.is-home.has-submenu-open {
        background-color: #1a1a1a !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
        /* 서브메뉴가 열렸을 때도 sticky 유지 */
        position: sticky !important;
    }
    
    /* .home-hero의 헤더 겹침 기능 유지 */
    .home-hero {
        overflow: visible !important;
    }
}

/* 데스크톱에서도 헤더 스크롤 시 배경색 적용 */
.user-header.is-home.scrolled:not(.has-submenu-open) {
    background-color: #1a1a1a !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

body.menu-home .home-section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* 모바일에서 home-review 섹션의 scroll-snap 비활성화 (스크롤 문제 해결) */
@media (max-width: 767px) {
    body.menu-home .home-review {
        scroll-snap-align: none;
        scroll-snap-stop: normal;
    }
    
    /* home-review 섹션이 스크롤을 방해하지 않도록 */
    .home-review.is-visible {
        /* 스크롤이 부드럽게 작동하도록 */
        will-change: auto;
    }
    
    /* review-carousel-placeholder가 스크롤을 방해하지 않도록 */
    .review-carousel-placeholder {
        /* 모바일에서 스크롤 문제 해결 */
        contain: layout style;
    }
}

.home {
    color: var(--color-text-primary);
    position: relative;
}

.home-section {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    padding: 11rem 0;
}

.home-section-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.home-section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.4;
    margin-bottom: 2.5rem;
}

.home-hero {
    position: relative;
    padding: 0;
    overflow: visible;
    background: var(--color-dark-bg);
    min-height: 95vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: calc(-1 * var(--header-height));
    padding-top: var(--header-height);
    z-index: 0;
    width: 100%;
}

.home-hero-carousel {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 95vh;
    overflow: visible;
}

.hero-carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 95vh;
    overflow: visible;
}

.hero-slide {
    position: absolute;
    top: calc(-1 * var(--header-height));
    left: 0;
    width: 100%;
    height: calc(100% + var(--header-height));
    min-height: calc(95vh + var(--header-height));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
    /* 화면 전환 효과를 네모 모양으로 중앙에서 넓어지게 적용 (헤더 위치까지 포함) */
    clip-path: inset(50% 50% 50% 50%);
    /* 기본 상태: transition 없음 (active가 제거될 때 즉시 숨김) */
    transition: none;
    opacity: 1;
}

.hero-slide.active {
    z-index: 1;
    clip-path: inset(0% 0% 0% 0%);
    /* active 상태: transition 적용 (새 슬라이드가 나타날 때만 전환 효과, 헤더 위치까지 포함) */
    transition: clip-path 0.5s cubic-bezier(0.6, 1.0, 1.0, 1);
}

/* 임시 고정: 마지막 슬라이드가 처음부터 바로 표시되도록 전환 효과 제거 */
.hero-slide-headline.active {
    transition: none !important; /* 전환 효과 완전 제거 */
}

/* 마지막 슬라이드도 다른 슬라이드와 동일한 clip-path 전환 효과 사용 */

.hero-slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: var(--color-dark-bg);
    z-index: 0;
    transform: none;
    opacity: 1;
}

/* 상단 그라데이션 오버레이 */
.hero-slide-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
    z-index: 1;
    pointer-events: none;
}

.hero-slide-bg-solid {
    /* 마지막 슬라이드: 검정 배경 고정(별/그라데이션 자동 배경 방지) */
    background-image: none !important;
    background-color: var(--color-dark-bg);
    opacity: 1;
    animation: none;
}

/* 검정 배경 슬라이드에는 그라데이션 제거 */
.hero-slide-bg-solid::after {
    display: none;
}

/* ===== 마지막 슬라이드 (Final) 개선 스타일 ===== */
.hero-slide-bg-final {
    background: 
        linear-gradient(180deg, #0a0a0a 0%, #0e0e0e 50%, #111 100%);
    background-size: 100% 100%;
    /* 하얀 점 날아다니는 효과(starryNight) 제거 */
    animation: none !important;
    background-position: 0% 0% !important;
}

.hero-slide-bg-final::after {
    display: none;
}

/* 마지막 슬라이드 장식 요소 - 동그란 글로우 효과 */
.hero-final-deco {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    z-index: 1;
}

.hero-slide-headline.active .hero-final-deco {
    opacity: 1;
    transition: opacity 1s ease 0.3s;
}

.hero-final-deco-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.2) 0%, transparent 70%);
    top: -200px;
    left: -200px;
    animation: floatFinal 8s ease-in-out infinite;
}

.hero-final-deco-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 229, 199, 0.15) 0%, transparent 70%);
    bottom: -150px;
    right: -150px;
    animation: floatFinal 10s ease-in-out infinite reverse;
}

.hero-final-deco-3 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
    top: 30%;
    right: 10%;
    animation: floatFinal 6s ease-in-out infinite;
}

/* hero-final-glow 제거 - 동그란 글로우 효과만 유지 */
.hero-final-glow {
    display: none;
}

@keyframes floatFinal {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(30px, -30px) scale(1.05);
    }
}

/* 마지막 슬라이드에서 기존 home-headline 스타일을 '흰색'으로 오버라이드 */
.hero-slide-headline {
    background-color: transparent;
}

/* 마지막 슬라이드 라벨 */
.home-headline-label {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    color: var(--color-accent);
    margin-bottom: 1.5rem;
    padding: 0.6rem 1.5rem;
    border: 1px solid rgba(0, 212, 255, 0.4);
    border-radius: 50px;
    background: rgba(0, 212, 255, 0.08);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.hero-slide-headline.active .home-headline-label {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s; /* 전환 효과(0.5s) 완료 후 시작 */
}

.hero-slide-headline .home-headline-title {
    color: #fff;
    line-height: 1.3;
}

/* 텍스트 그라데이션 효과 */
.text-gradient {
    background: #00D4FF;
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shineText 3s linear infinite;
}

@keyframes shineText {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.hero-slide-headline .home-headline-desc {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.5rem;
    letter-spacing: 0.02em;
    line-height: 1.8;
}

/* 모바일용 텍스트는 데스크톱에서 숨김 */
.home-headline-desc-mobile {
    display: none;
}

/* 글로우 버튼 */
.home-btn-glow {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.125rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #00D4FF 0%, #00B4D8 100%);
    border: none;
    border-radius: 50px;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 4px 20px rgba(0, 212, 255, 0.4),
        0 0 40px rgba(0, 212, 255, 0.2);
}

.home-btn-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.home-btn-glow:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 
        0 8px 30px rgba(0, 212, 255, 0.5),
        0 0 60px rgba(0, 212, 255, 0.3);
}

.home-btn-glow:hover::before {
    left: 100%;
}

.home-btn-glow .btn-arrow {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.home-btn-glow:hover .btn-arrow {
    transform: translateX(4px);
}

/* clip-path 전환은 이제 .hero-slide에 적용됨 */

.hero-slide-bg:not([style*="background-image"]):not(.hero-slide-bg-final):not(.hero-slide-bg-solid) {
    background-image: 
        radial-gradient(2px 2px at 20% 30%, white, transparent),
        radial-gradient(2px 2px at 60% 70%, white, transparent),
        radial-gradient(1px 1px at 50% 50%, white, transparent),
        radial-gradient(1px 1px at 80% 10%, white, transparent),
        radial-gradient(2px 2px at 90% 60%, white, transparent),
        radial-gradient(1px 1px at 33% 80%, white, transparent),
        radial-gradient(1px 1px at 70% 20%, white, transparent),
        radial-gradient(2px 2px at 10% 50%, white, transparent),
        radial-gradient(1px 1px at 40% 10%, white, transparent),
        radial-gradient(1px 1px at 15% 70%, white, transparent);
    background-size: 200% 200%;
    background-position: 0% 0%;
    opacity: 0.8;
    animation: starryNight 20s linear infinite;
}

@keyframes starryNight {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

    .home-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    text-align: center;
    width: 100%;
}


.home-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0;
}

/* 슬라이드가 active일 때 텍스트 표시 */
.hero-slide.active .home-hero-copy {
    opacity: 1;
}

.home-hero-kicker {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(3rem, 6vw, 6.5rem);
    font-weight: 900;
    font-style: normal;
    color: #fff;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.6;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5),
                 0 4px 20px rgba(0, 0, 0, 0.3),
                 0 0 30px rgba(0, 0, 0, 0.2);
}

.home-headline {
    background: #fff;
    padding: 7rem 0;
    color: #111;
}

.home-headline-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    text-align: center;
}

/* 마지막 슬라이드의 텍스트 애니메이션 초기 상태 */
.hero-slide-headline .home-headline-title,
.hero-slide-headline .home-headline-desc,
.hero-slide-headline .home-headline-actions {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 마지막 슬라이드가 활성화될 때 애니메이션 */
.hero-slide-headline.active .home-headline-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.65s; /* 전환(0.5s) + label(0.15s) 후 */
}

.hero-slide-headline.active .home-headline-desc {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.85s; /* title 후 */
}

.hero-slide-headline.active .home-headline-actions {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.05s; /* desc 후 */
}

/* 임시 고정: 마지막 슬라이드의 텍스트 애니메이션도 즉시 표시 */
.hero-slide-headline.active .home-headline-title,
.hero-slide-headline.active .home-headline-desc,
.hero-slide-headline.active .home-headline-actions,
.hero-slide-headline.active .home-headline-label {
    transition: none !important;
    transition-delay: 0s !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* 임시 고정: 장식 요소도 즉시 표시 */
.hero-slide-headline.active .hero-final-deco {
    transition: none !important;
    opacity: 1 !important;
}

.home-headline-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.4;
    margin: 0 0 2.5rem;
    color: #111;
}

.home-headline-desc {
    font-size: 1.5rem;
    line-height: 1.8;
    margin: 0 0 3rem;
    color: #333;
}

.home-headline-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: var(--btn-padding-lg);
    border-radius: var(--btn-radius);
    border: none;
    text-decoration: none;
    font-weight: 600;
    font-size: var(--btn-font-lg);
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: var(--btn-transition);
}

.home-btn:hover {
    transform: var(--btn-hover-lift);
    box-shadow: var(--btn-hover-shadow);
}

.home-btn-primary {
    background: var(--color-gradient);
    color: var(--color-dark-bg);
    padding: var(--btn-padding-xl);
    font-size: 1.5rem;
}

.home-btn-primary:hover {
    background: var(--color-gradient-reverse);
}

.home-btn-ghost {
    border: 2px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

.home-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
}

.home-video {
    background: var(--color-bg-primary);
    padding: 8rem 0;
    position: relative;
    overflow: hidden;
}

/* 장식 요소들 - 민트/시안 글로우 */
.home-video-deco {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(60px);
}

.home-video-deco-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 229, 199, 0.25) 0%, rgba(0, 212, 255, 0.15) 40%, transparent 70%);
    top: -200px;
    left: -200px;
    animation: floatDeco 8s ease-in-out infinite;
}

.home-video-deco-2 {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.2) 0%, rgba(0, 229, 199, 0.1) 40%, transparent 70%);
    bottom: -150px;
    right: -150px;
    animation: floatDeco 10s ease-in-out infinite reverse;
}

.home-video-deco-3 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(0, 229, 199, 0.15) 0%, transparent 70%);
    top: 50%;
    right: 10%;
    animation: floatDeco 6s ease-in-out infinite;
}

@keyframes floatDeco {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(20px, -20px) scale(1.1);
    }
}

    .home-video-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
}

/* 섹션 헤더 */
.home-video-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 4rem;
}

.home-video-label {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--color-accent-dark);
    margin-bottom: 1rem;
    padding: 0.5rem 1.25rem;
    border: 1px solid rgba(0, 180, 216, 0.3);
    border-radius: 30px;
    background: rgba(0, 180, 216, 0.08);
}

.home-video-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.4;
    color: var(--color-text-primary);
    margin: 0 0 1rem;
    position: relative;
    display: inline-block;
    cursor: default;
}

.home-video-title .title-text {
    position: relative;
    display: inline-block;
    transition: color 0.4s ease;
}

/* 호버 시 그라데이션 텍스트 효과 */
.home-video-title:hover .title-text {
    background: linear-gradient(135deg, #00D4FF 0%, #00E5C7 50%, #00D4FF 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shineTitle 2s linear infinite;
}

@keyframes shineTitle {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* 밑줄 효과 */
.home-video-title .title-underline {
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #00D4FF, #00E5C7);
    border-radius: 2px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.home-video-title:hover .title-underline {
    width: 100%;
}

/* 스크롤 트리거 애니메이션 - 초기 상태 */
[data-animate-on-scroll] .animate-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* 스크롤 트리거 애니메이션 - 활성화 상태 */
[data-animate-on-scroll].is-visible .animate-item {
    opacity: 1;
    transform: translateY(0);
}

/* 순차적 딜레이 */
[data-animate-on-scroll].is-visible .animate-item:nth-child(1) {
    transition-delay: 0s;
}

[data-animate-on-scroll].is-visible .animate-item:nth-child(2) {
    transition-delay: 0.15s;
}

[data-animate-on-scroll].is-visible .animate-item:nth-child(3) {
    transition-delay: 0.3s;
}

.home-video-subtitle {
    font-size: 1.15rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.6;
}

/* 데스크톱용 텍스트는 표시, 모바일용은 숨김 */
.home-video-subtitle-desktop {
    display: inline;
}

.home-video-subtitle-mobile {
    display: none;
}

.home-video-player {
    margin-bottom: 3rem;
}

/* 비디오 확장 애니메이션 - 초기 상태 (좁게) */
[data-video-expand] {
    transform: scaleX(0.7);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.6s ease;
}

/* 비디오 확장 애니메이션 - 활성화 상태 (넓게) */
[data-video-expand].is-visible {
    transform: scaleX(1);
    opacity: 1;
}

.video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 600px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 
        0 8px 60px rgba(0, 212, 255, 0.2),
        0 4px 30px rgba(0, 229, 199, 0.15),
        0 0 0 1px rgba(0, 212, 255, 0.1);
    background: var(--color-dark-bg);
}

/* 스크롤 시 iframe이 휠 이벤트를 가로채지 않도록 오버레이 */
.video-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    cursor: pointer;
}

/* 활성화 상태에서는 오버레이 제거하여 영상 조작 가능 */
.video-wrapper.is-active::after {
    display: none;
}

@media (min-width: 1200px) {
    .video-wrapper {
        min-height: 700px;
    }
}

@media (min-width: 1600px) {
    .video-wrapper {
        min-height: 800px;
    }
}

.youtube-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* CTA 버튼 영역 */
.home-video-actions {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.home-video-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: var(--btn-padding-lg);
    border-radius: var(--btn-radius);
    border: none;
    font-size: var(--btn-font-md);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: var(--btn-transition);
}

.home-video-btn-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.home-video-btn-primary {
    background: var(--color-text-primary);
    color: #ffffff;
    box-shadow: var(--shadow-md);
}

.home-video-btn-primary:hover {
    transform: var(--btn-hover-lift);
    box-shadow: var(--btn-hover-shadow);
    background: var(--color-text-secondary);
    color: #ffffff;
}

.home-video-btn-secondary {
    background: transparent;
    color: var(--color-text-primary);
    border: 2px solid var(--color-text-primary);
}

.home-video-btn-secondary:hover {
    transform: var(--btn-hover-lift);
    background: var(--color-text-primary);
    color: #ffffff;
    border-color: var(--color-text-primary);
}

.home-imweb-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    border-top: 1px solid #e0e0e0;
    flex-wrap: wrap;
    gap: 1rem;
}

.imweb-footer-left {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.imweb-footer-btn {
    background: var(--color-gradient);
    color: var(--color-dark-bg);
    padding: 0.5rem 1.5rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.2s, filter 0.2s;
}

.imweb-footer-btn:hover {
    filter: brightness(1.1);
}

.imweb-footer-link {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.imweb-footer-link:hover {
    color: var(--color-accent);
}

.home-category {
    background: var(--color-bg-secondary);
    position: relative;
    overflow: visible;
    padding: 0;
    --category-card-width: 500px;
    --category-card-hover-width: 700px;
    --category-intro-width: 520px;
    --category-card-count: 5;
    --category-card-gap: 8px;
    --card-scale-default: 1;
    --card-scale-hover: 1.08;
    --card-scale-sibling: 0.96;
}


.home-category-spacer {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    /* 기본 상태 카드가 100vh를 꽉 채운 상태에서 hover scaleY 시 아래로 overflow 되더라도
       섹션 밖(하단)으로 흰 배경이 보이지 않도록, 뷰포트 스티키 영역에서만 세로 overflow를 클리핑 */
    overflow: hidden;
}

.home-category-header {
    display: none;
}

.home-category-main-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.4;
    color: var(--color-text-primary);
    margin: 0 0 1.5rem;
}

.home-category-subtitle {
    font-size: 1.4rem;
    color: var(--color-text-muted);
    margin: 0 0 0.5rem;
}

.home-category-title {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.4;
    color: var(--color-text-primary);
    margin: 0 0 1.5rem;
}

.home-category-description {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-muted);
    margin: 0;
    letter-spacing: -0.01em;
}
.home-category-description-strong{
    font-weight: 700;
}

.home-category-intro {
    flex: 0 0 auto;
    width: min(520px, 78vw);
    height: 100%;
    padding: 0 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--color-bg-secondary);
    cursor: default; /* intro에서는 grab 포인터 금지 */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.home-category-intro * {
    cursor: default; /* 텍스트/하위 요소도 포인터 변경 금지 */
}

.home-cards-scroll {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow-x: auto;
    /* 세로 방향으로는 스티키 영역(100vh) 밖으로 나가지 않게 */
    overflow-y: hidden;
    scroll-behavior: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    align-items: center;
    padding-right: 2rem;
    box-sizing: border-box;
}

.home-cards-scroll::-webkit-scrollbar {
    display: none;
}

.home-cards-container {
    display: flex;
    align-items: stretch;
    height: 100vh;
    flex: 0 0 auto;
    width: auto; /* JS에서 총폭(=400*카드수 + gap)을 px로 고정 */
    overflow: visible; /* 확대된 카드가 잘리지 않도록 */
}

.home-card {
    --scaleX: 1;
    --scaleY: 1;
    --translateY: 0px;
    --card-flex: 1;
    --card-header-ratio: 0.08;
    --card-image-ratio: 4 / 3;
    --card-info-ratio: 0.50;
    /* 레이아웃 기준값(버튼/넘버 정렬 기준) */
    --home-card-header-h: calc(100% * var(--card-header-ratio));
    --home-card-info-h: calc(100% * var(--card-info-ratio));
    /* 버튼/넘버를 "이미지 영역 중앙"에 정확히 맞추기 위한 공통 Y 좌표 */
    --home-card-overlay-top: calc(
        var(--home-card-header-h) +
        ((100% - var(--home-card-info-h) - var(--home-card-header-h)) / 2)
    );
    /* 기본 폭/호버 폭은 JS에서 --card-basis로 px 단위 지정 */
    --card-basis: var(--category-card-width);
    flex: 0 0 var(--card-basis);
    width: var(--card-basis);
    min-width: 0;
    max-width: none;
    height: 102%;
    position: relative;
    scroll-snap-align: start;
    transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                flex-basis 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                z-index 0s;
    will-change: width;
    overflow: hidden;
}

.home-cards-scroll.is-hovering .home-card {
    /* 폭은 JS에서 재분배하므로 여기선 변형만 살짝 줄임 */
    --scaleX: 1;
    --scaleY: 1;
}

.home-cards-scroll.is-hovering .home-card.is-hovered {
    z-index: 1;
}

.home-card-link {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    border-radius: 0;
    padding: 0;
    text-decoration: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: relative;
    box-shadow: var(--shadow-md);
    transition: box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                border-radius 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top center;
    transform: none;
    will-change: width;
    /* 카드 높이 고정 - transform으로 확대되어도 레이아웃 높이는 변하지 않음 */
    box-sizing: border-box;
    filter: brightness(0.70);
}

.home-card.is-hovered .home-card-link {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    border-radius: 0;
    /* 레이아웃으로만 커지도록 변환 제거 */
    transform: none;
    filter: brightness(1);
}

.home-card-header {
    width: 100%;
    height: var(--home-card-header-h);
    flex-shrink: 0;
    box-sizing: border-box;
    position: relative;
    z-index: 5;
    pointer-events: none;
    border-radius: 0;
    transition: border-radius 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.home-card.is-hovered .home-card-header {
    border-radius: 0;
}

.home-card-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--color-bg-primary);
}

/* 카드 헤더에 시안-청록 그라데이션 액센트 적용 */
.home-card-header-1 {
    background: linear-gradient(135deg, #00D4FF 0%, #00B4D8 100%);
}

.home-card-header-2 {
    background: linear-gradient(135deg, #00C9B7 0%, #00E5C7 100%);
}

.home-card-header-3 {
    background: linear-gradient(135deg, #00E5D0 0%, #00D4FF 100%);
}

.home-card-header-4 {
    background: linear-gradient(135deg, #00B4D8 0%, #00C9B7 100%);
}

.home-card-header-5 {
    background: linear-gradient(135deg, #00E5C7 0%, #00D4FF 100%);
}

.home-card-header .home-card-date {
    font-size: 0.9rem;
    font-weight: 500;
    flex-shrink: 0;
}

.home-card-header .home-card-name {
    font-size: 1.5rem;
    font-weight: 700;
    flex: 1;
    text-align: center;
}

.home-card-header .home-card-school {
    font-size: 0.9rem;
    font-weight: 500;
    flex-shrink: 0;
    text-align: right;
}

.home-card-image {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: var(--card-image-ratio);
    min-height: 250px;
    overflow: hidden;
    background: #000;
    flex-shrink: 0;
    margin-top: 0;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

    .home-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
        /* 이미지가 확대되어도 잘리지 않도록 object-fit 조정 */
        object-position: center;
        display: block;
    }

    /* 모바일에서 호버 시 이미지 확대 효과 */
    @media (max-width: 767px) {
        .home-card-link:hover .home-card-image img,
        .home-card-link:active .home-card-image img {
            transform: scale(1.05);
        }
    }

.home-card-graphic {
    width: 100%;
    height: 100%;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 카드 그래픽 - 시안-청록 그라데이션 */
.home-card-graphic-1 {
    background: 
        radial-gradient(circle at 50% 50%, rgba(0, 212, 255, 0.8) 0%, rgba(0, 180, 216, 0.6) 50%, rgba(10, 10, 10, 0.9) 100%);
}

.home-card-graphic-2 {
    background: 
        linear-gradient(135deg, rgba(0, 229, 199, 0.8) 0%, rgba(0, 201, 183, 0.6) 50%, rgba(10, 10, 10, 0.9) 100%);
}

.home-card-graphic-3 {
    background: 
        linear-gradient(135deg, rgba(0, 229, 208, 0.8) 0%, rgba(0, 212, 255, 0.6) 50%, rgba(10, 10, 10, 0.9) 100%);
}

.home-card-graphic-4 {
    background: 
        linear-gradient(135deg, rgba(0, 180, 216, 0.8) 0%, rgba(0, 201, 183, 0.6) 50%, rgba(10, 10, 10, 0.9) 100%);
}

.home-card-graphic-5 {
    background: 
        linear-gradient(135deg, rgba(0, 201, 183, 0.8) 0%, rgba(0, 229, 199, 0.6) 50%, rgba(10, 10, 10, 0.9) 100%);
}

.home-card-number {
    position: absolute;
    /* home-card-button은 .home-card-image(=header 아래 영역) 기준으로 중앙 정렬됨
       number도 동일한 Y 위치(이미지 중앙)로 맞춤 */
    top: var(--home-card-overlay-top);
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    transform-origin: 50% 50%;
    backface-visibility: hidden;
    will-change: transform;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: transparent;
    border: 0;
    box-shadow: inset 0 0 0 1px #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 1.1rem;
    color: #fff;
    z-index: 10; /* button(20) 아래, 이미지 위 */
    pointer-events: none; /* hover/click은 a태그가 받도록 */
    opacity: 0.7;
}

/* home-card-number는 a태그 밖(스케일 트리 밖)으로 이동 -> 호버 확대 영향 없음 */

.home-card-button {
    position: absolute;
    /* number와 완전히 동일한 위치(이미지 중앙) */
    top: var(--home-card-overlay-top);
    left: 50%;
    --button-offset-x: 0px;
    --button-offset-y: 0px;
    transform: translate(calc(-50% + var(--button-offset-x)), calc(-50% + var(--button-offset-y))) scale(0);
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1), 
                opacity 0.3s ease,
                box-shadow 0.3s ease;
    pointer-events: none; /* 버튼은 시각 요소로만(클릭/호버는 a가 처리) */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    z-index: 20;
    will-change: transform;
}

.home-card.is-hovered .home-card-button {
    transform: translate(calc(-50% + var(--button-offset-x)), calc(-50% + var(--button-offset-y))) scale(1);
    opacity: 1;
    transition: transform 0.15s cubic-bezier(0.2, 0, 0.2, 1), 
                opacity 0.3s ease,
                box-shadow 0.3s ease;
}

/* apply-section에서는 포인터(커서) 변경 금지 */
.home-card-apply-section,
.home-card-apply-section * {
    cursor: default;
}

.home-card-button-text {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
}

.home-card-button-arrow {
    font-size: 2.0rem;
    color: var(--color-text-primary);
    line-height: 1;
}

.home-card-info {
    padding: 1.5rem;
    /* display: flex; */
    align-items: center;
    /* justify-content: space-between;
    gap: 1rem; */
    color: #fff;
    flex-shrink: 0;
    height: var(--home-card-info-h);
    box-sizing: border-box;
    border-radius: 0;
    transition: border-radius 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(var(--info-offset, 0px));
}

.home-card.is-hovered .home-card-info {
    border-radius: 0;
}

/* 카드 info - 헤더와 동일한 시안-청록 그라데이션 */
.home-card-info-1 {
    background: linear-gradient(135deg, #00D4FF 0%, #00B4D8 100%);
}

.home-card-info-2 {
    background: linear-gradient(135deg, #00C9B7 0%, #00E5C7 100%);
}

.home-card-info-3 {
    background: linear-gradient(135deg, #00E5D0 0%, #00D4FF 100%);
}

.home-card-info-4 {
    background: linear-gradient(135deg, #00B4D8 0%, #00C9B7 100%);
}

.home-card-info-5 {
    background: linear-gradient(135deg, #00E5C7 0%, #00D4FF 100%);
}

.home-card-info-content {
    display: flex;
    flex-direction: column;
    gap: 3.0rem;
}

.home-card-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

.home-card-info-date {
    font-size: 1.2rem;
    font-weight: 500;
    flex-shrink: 0;
}

.home-card-info-name {
    font-size: 2.0rem;
    font-weight: 700;
    flex: 1;
    text-align: center;
}

.home-card-info-school {
    font-size: 1.2rem;
    font-weight: 500;
    flex-shrink: 0;
    text-align: right;
}

.home-card-apply-section {
    flex: 0 0 auto;
    width: 500px;
    min-width: 500px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-secondary);
    padding: 2rem;
    box-sizing: border-box;
}

.home-card-apply-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: var(--btn-padding-xl);
    background: transparent;
    color: var(--color-bg-secondary);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--btn-font-lg);
    /* border: 2px solid var(--color-accent); */
    border-radius: var(--btn-radius);
    position: relative;
    overflow: hidden;
    z-index: 1;
    cursor: pointer;
    transition: var(--btn-transition);
    background-color: #2c2c2c;
}

.home-card-apply-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-gradient);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

.home-card-apply-btn:hover {
    color: var(--color-dark-bg);
    transform: var(--btn-hover-lift);
    box-shadow: var(--btn-hover-shadow);
}

.home-card-apply-btn:hover::before {
    transform: scaleX(1);
}

.home-card-apply-arrow {
    font-size: 1.25rem;
    transition: transform 0.3s ease;
}

.home-card-apply-btn:hover .home-card-apply-arrow {
    transform: translateX(5px);
}

.home-review {
    background: var(--color-bg-primary); /* 초기: 흰색 배경 */
    transition: background-color 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 10% 이상 진입 시 어두운 배경으로 전환 */
.home-review.is-visible {
    background: var(--color-dark-bg);
}

.home-review-header {
    margin-bottom: 6rem;
    text-align: center;
}

.home-review-subtitle {
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    line-height: 1.4;
    color: var(--color-text-primary); /* 초기: 어두운 텍스트 */
    margin: 0 0 0.75rem;
    transition: color 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.home-review.is-visible .home-review-subtitle {
    color: #fff; /* 전환 후: 흰색 텍스트 */
}

.home-review .home-section-title {
    color: var(--color-text-primary); /* 초기: 어두운 텍스트 */
    transition: color 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.home-review.is-visible .home-section-title {
    color: #fff; /* 전환 후: 흰색 텍스트 */
}

.home-review-subjects {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.review-subject-btn {
    padding: var(--btn-padding-md);
    border: 2px solid rgba(0, 0, 0, 0.15); /* 초기: 어두운 테두리 */
    background: rgba(0, 0, 0, 0.03); /* 초기: 밝은 배경 */
    color: var(--color-text-secondary); /* 초기: 어두운 텍스트 */
    border-radius: var(--btn-radius);
    cursor: pointer;
    font-size: var(--btn-font-md);
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: var(--btn-transition);
}

.home-review.is-visible .review-subject-btn {
    border: 2px solid rgba(255, 255, 255, 0.2); /* 전환 후: 밝은 테두리 */
    background: rgba(255, 255, 255, 0.05); /* 전환 후: 어두운 배경 */
    color: rgba(255, 255, 255, 0.8); /* 전환 후: 밝은 텍스트 */
}

.review-subject-btn:hover {
    border-color: var(--color-accent);
    background: rgba(0, 212, 255, 0.1);
    color: var(--color-accent);
    transform: var(--btn-hover-lift);
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.2);
}

.review-subject-btn.active {
    background: var(--color-gradient);
    color: var(--color-dark-bg);
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(0, 212, 255, 0.3);
}

.home-review-carousel {
    margin-bottom: 2rem;
    position: relative;
    width: 100%;
}

.review-carousel-placeholder {
    position: relative;
    overflow: hidden;
    min-height: 400px;
    width: 100%;
    background: var(--color-bg-secondary); /* 초기: 밝은 배경 */
    border-radius: var(--btn-radius);
    padding: 3rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: background-color 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.home-review.is-visible .review-carousel-placeholder {
    background: var(--color-dark-bg); /* 전환 후: 어두운 배경 */
    /* border: 1px solid rgba(0, 212, 255, 0.1); 전환 후: 밝은 테두리 */
}

.review-carousel-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
}

.review-card {
    background: var(--color-dark-surface);
    border: 1px solid rgba(0, 212, 255, 0.15);
    border-radius: var(--btn-radius);
    padding: 2.5rem;
    width: 500px;
    height: 400px; /* 고정 높이 */
    min-height: 400px;
    max-height: 400px;
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -250px;
    margin-top: -200px; /* 높이 변경에 맞춰 조정 */
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.6s ease, 
                filter 0.6s ease,
                box-shadow 0.6s ease,
                border-color 0.6s ease;
    transform-origin: center center;
    opacity: 0.4;
    transform: scale(0.85);
    filter: blur(3px);
    z-index: 5;
    pointer-events: none;
    overflow: hidden; /* 내용이 넘치면 숨김 */
}

.review-card.active {
    opacity: 1 !important;
    transform: scale(1) translateX(0) !important;
    filter: blur(0) !important;
    z-index: 10 !important;
    border-color: rgba(0, 212, 255, 0.3) !important;
    box-shadow: 0 8px 32px rgba(0, 212, 255, 0.2), var(--shadow-lg) !important;
    pointer-events: auto;
}

.review-card-content {
    font-size: 1.4rem;
    line-height: 1.8;
    color: #fff;
    margin-bottom: 1.5rem;
    flex: 1;
    overflow: hidden;
    white-space: normal;
    word-break: keep-all;
    display: -webkit-box;
    line-clamp: 6;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    min-height: 0; /* flex 아이템이 부모 높이에 맞춰지도록 */
}

.review-card-author {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: auto;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 212, 255, 0.2);
    flex-shrink: 0;
}

.review-carousel-placeholder p {
    text-align: center;
    color: var(--color-text-muted); /* 초기: 어두운 텍스트 */
    padding: 4rem 2rem;
    transition: color 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.home-review.is-visible .review-carousel-placeholder p {
    color: rgba(255, 255, 255, 0.5); /* 전환 후: 흰색 텍스트 */
}

.home-faq {
    background: #fff;
}

.home-faq-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 2rem;
    align-items: start;
}

.home-faq-left {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.home-faq-accordion .accordion-item {
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.25s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.home-faq-accordion .accordion-item + .accordion-item {
    margin-top: 0.9rem;
}

.home-faq-accordion .accordion-item.active {
    border-color: #283560;
}

.home-faq-accordion .accordion-header {
    width: 100%;
    padding: 1.25rem 1.5rem;
    background-color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    transition: background-color 0.2s ease;
}

.home-faq-accordion .accordion-header:hover {
    background-color: #f8f9fa;
}

.home-faq-accordion .accordion-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 650;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    line-height: 1.4;
    color: #111;
}

.home-faq-accordion .accordion-icon {
    font-size: 1.25rem;
    color: #666;
    font-weight: 300;
    line-height: 1;
}

.home-faq-accordion .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.home-faq-accordion .accordion-item.active .accordion-content {
    max-height: 500px;
}

.home-faq-accordion .accordion-body {
    padding: 0 1.5rem 1.25rem;
    color: #555;
    font-size: 1.15rem;
    line-height: 1.75;
}

.home-faq-write-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: var(--btn-padding-md);
    background: var(--color-text-primary);
    color: #fff;
    border: none;
    border-radius: var(--btn-radius);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--btn-font-md);
    cursor: pointer;
    width: fit-content;
    transition: var(--btn-transition);
}

.home-faq-write-btn:hover {
    background: var(--color-text-secondary);
    transform: var(--btn-hover-lift);
    box-shadow: var(--btn-hover-shadow);
}

.home-faq-contact {
    background: var(--color-dark-bg);
    color: #fff;
    border-radius: var(--btn-radius);
    padding: 3.5rem;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid rgba(0, 212, 255, 0.15);
    box-shadow: var(--shadow-lg);
    position: sticky;
    top: calc(var(--header-height) + 2rem);
    align-self: start;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.home-faq-contact:hover {
    border-color: rgba(0, 212, 255, 0.3);
    box-shadow: 0 12px 40px rgba(0, 212, 255, 0.15);
    transform: translateY(-2px);
}

.home-faq-contact-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: -0.02em;
    line-height: 1.4;
    margin: 0 0 0.75rem;
    color: #fff;
}

.home-faq-contact-desc {
    margin: 0 0 2rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
    font-size: 1.1rem;
}

.home-faq-tel {
    display: inline-block;
    color: var(--color-accent);
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: -0.01em;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.home-faq-tel:hover {
    color: var(--color-accent-secondary);
    transform: translateX(4px);
}

.home-faq-tel::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-gradient);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.home-faq-tel:hover::after {
    width: 100%;
}

.home-faq-contact-graphic {
    position: absolute;
    bottom: -30px;
    right: -30px;
    width: 200px;
    height: 200px;
    background: 
        radial-gradient(circle at 30% 30%, rgba(0, 212, 255, 0.25) 0%, rgba(0, 229, 199, 0.15) 50%, transparent 100%);
    border-radius: 50%;
    opacity: 0.6;
    animation: floatGraphic 8s ease-in-out infinite;
}

@keyframes floatGraphic {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(-20px, -20px) scale(1.1);
    }
}

/* +more 버튼은 모바일에서만 표시 */
.home-cards-more-text {
    display: none;
}

/* 태블릿 가로 (1024px ~ 1199px) */
@media (max-width: 1199px) {
    .home-hero,
    .home-hero-carousel,
    .hero-carousel-track,
    .hero-slide {
        min-height: 85vh;
    }

    .home-category-intro {
        width: min(480px, 85vw);
        padding: 0 1.75rem;
    }

    .home-category-main-title {
        font-size: 2.75rem;
        letter-spacing: -0.02em;
        line-height: 1.4;
    }

    .home-cards-container {
        width: calc(100vw - 480px - 280px - 1.75rem);
        min-width: 550px;
    }
}

/* 태블릿 세로 (768px ~ 1023px) */
@media (max-width: 1023px) {
    .home-hero,
    .home-hero-carousel,
    .hero-carousel-track,
    .hero-slide {
        min-height: 80vh;
    }

    .home-category {
        min-height: 100vh;
        height: 100vh;
    }

    .home-category-layout {
        display: block;
    }

    .home-category-intro {
        width: min(450px, 85vw);
        padding: 0 1.5rem;
    }

    .home-category-main-title {
        font-size: 2.5rem;
        letter-spacing: -0.02em;
        line-height: 1.4;
    }

    .home-cards-container {
        height: 85vh;
        width: calc(100vw - 450px - 280px - 1.5rem);
        min-width: 500px;
    }

    .home-cards-scroll.is-hovering .home-card {
        --card-flex: 0.9;
    }

    .home-cards-scroll.is-hovering .home-card.is-hovered {
        --card-flex: 1.3;
    }

    .home-card-apply-section {
        width: 280px;
        min-width: 280px;
    }

    .home-faq-grid {
        grid-template-columns: 1fr;
    }

    .home-imweb-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* 모바일 중형 (480px ~ 767px) */
@media (max-width: 767px) {
    /* 모바일에서 오른쪽 여백 방지 - .home-hero는 헤더 겹침을 위해 overflow-x: visible 유지 */
    .home {
        width: 100%;
        max-width: 100%;
        /* overflow-x는 body에서 처리하므로 여기서는 제거하여 헤더 겹침 기능 유지 */
        box-sizing: border-box;
    }

    .home-hero {
        padding-top: 110px;
        min-height: 70vh;
        width: 100%;
        max-width: 100%;
        /* 헤더 겹침 기능을 위해 overflow: visible 유지 */
        overflow: visible;
        box-sizing: border-box;
    }

    .home-hero-carousel,
    .hero-carousel-track,
    .hero-slide {
        min-height: 70vh;
        width: 100%;
        max-width: 100%;
        /* 헤더 겹침 기능을 위해 overflow-x: visible 유지 */
        overflow-x: visible;
        box-sizing: border-box;
    }

    .home-hero-kicker {
        font-size: clamp(2rem, 7vw, 3rem);
        font-weight: 900;
        line-height: 1.5;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5),
                     0 3px 15px rgba(0, 0, 0, 0.3),
                     0 0 20px rgba(0, 0, 0, 0.2);
    }

    .home-section {
        padding: 4rem 0;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .home-section-inner {
        padding: 0 1rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .home-hero-inner {
        padding: 0 1rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .home-video-inner {
        padding: 0 1rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .home-section-title {
        font-size: 2rem;
        letter-spacing: -0.02em;
        line-height: 1.4;
        margin-bottom: 1rem;
    }

    .home-headline {
        padding: 4rem 0;
    }

    .home-headline-title {
        font-size: 2.5rem;
        letter-spacing: -0.02em;
        line-height: 1.4;
    }

    .home-headline-desc {
        font-size: 1.1rem;
        line-height: 1.75;
    }

    /* 마지막 화면 모바일 스타일 */
    .home-headline-label {
        font-size: 0.75rem;
        padding: 0.5rem 1rem;
        margin-bottom: 1rem;
    }

    /* 모바일에서 데스크톱용 텍스트 숨기기 */
    .home-headline-desc-desktop {
        display: none;
    }

    /* 모바일에서 모바일용 텍스트 표시 */
    .home-headline-desc-mobile {
        display: block;
    }

    .hero-slide-headline .home-headline-desc {
        font-size: 1.3rem;
        line-height: 1.8;
        letter-spacing: 0.01em;
    }

    /* 모바일에서 전체적으로 글자 크기 키우기 */
    .hero-slide-headline .home-headline-title {
        font-size: clamp(2.5rem, 8vw, 3.5rem);
        line-height: 1.3;
        margin-bottom: 2rem;
    }

    .home-btn-glow {
        padding: 1rem 2rem;
        font-size: 1rem;
    }

    .hero-final-deco-1 {
        width: 300px;
        height: 300px;
        top: -100px;
        left: -100px;
    }

    .hero-final-deco-2 {
        width: 250px;
        height: 250px;
    }

    .hero-final-deco-3 {
        display: none;
    }

    .home-video {
        padding: 4rem 0;
    }

    .home-video-header {
        margin-bottom: 2.5rem;
    }

    .home-video-title {
        font-size: 2.5rem;
        letter-spacing: -0.02em;
        line-height: 1.4;
    }

    .home-video-subtitle {
        font-size: 1.1rem;
        line-height: 1.6;
    }

    /* 모바일에서 데스크톱용 텍스트 숨김, 모바일용 텍스트 표시 */
    .home-video-subtitle-desktop {
        display: none;
    }

    .home-video-subtitle-mobile {
        display: inline;
    }

    .home-video-player {
        margin-bottom: 2rem;
    }

    .video-wrapper {
        min-height: 300px;
    }

    .home-video-btn {
        padding: var(--btn-padding-md);
        font-size: var(--btn-font-sm);
    }

    .home-video-deco-1 {
        width: 250px;
        height: 250px;
    }

    .home-video-deco-2 {
        width: 200px;
        height: 200px;
    }

    .home-video-deco-3 {
        display: none;
    }

    .home-review-subjects {
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .review-subject-btn {
        padding: 0.55rem 1rem;
        font-size: 0.95rem;
    }

    .home-review {
        padding: 4rem 0;
    }

    .home-review-header {
        margin-bottom: 1.5rem;
    }

    .home-review-subtitle {
        font-size: 1rem;
        line-height: 1.5;
    }

    .home-review .home-section-title {
        font-size: 1.75rem;
        margin-bottom: 1.5rem;
    }

    .home-review-carousel {
        margin-bottom: 1.5rem;
    }

    .review-carousel-placeholder {
        min-height: 300px;
        padding: 2rem 1rem;
        border-radius: 12px;
        /* 모바일에서 카드가 잘리지 않도록 */
        overflow: visible;
    }

    .review-carousel-wrapper {
        min-height: 300px;
        /* 모바일에서 카드가 잘리지 않도록 */
        overflow: visible;
    }

    .review-card {
        width: 90%;
        max-width: 400px;
        height: 320px; /* 고정 높이 */
        min-height: 320px;
        max-height: 320px;
        padding: 1.5rem;
        /* 모바일에서 카드 중앙 정렬 (transform 사용) */
        margin-left: 0;
        margin-top: calc(-160px); /* 높이 변경에 맞춰 조정 */
        transform: translateX(-50%);
        overflow: hidden; /* 내용이 넘치면 숨김 */
    }
    
    /* 모바일에서 active 카드도 중앙 정렬 유지 */
    .review-card.active {
        transform: translateX(-50%) scale(1) !important;
    }
    
    /* 모바일에서 비활성 카드도 중앙 기준으로 이동 */
    .review-card:not(.active) {
        transform: translateX(-50%) scale(0.85);
    }

    .review-card-content {
        font-size: 1.1rem;
        line-height: 1.7;
        -webkit-line-clamp: 5;
        line-clamp: 5;
    }

    .review-card-author {
        font-size: 1rem;
    }

    .home-category {
        min-height: auto;
        height: auto;
        padding: 3rem 0;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        margin-top: 0;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .home-category-spacer {
        position: static;
        height: auto;
    }

    .home-cards-scroll {
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: visible;
        height: auto;
        padding-right: 0;
        align-items: stretch;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .home-category-intro {
        width: 100%;
        padding: 0 1rem 2rem;
        text-align: center;
        height: auto;
        flex: 0 0 auto;
        order: 1;
        box-sizing: border-box;
        max-width: 100%;
    }

    .home-category-main-title {
        font-size: 2.5rem;
        letter-spacing: -0.02em;
        line-height: 1.4;
    }

    .home-category-subtitle {
        font-size: 1.1rem;
    }

    .home-category-title {
        font-size: 1.75rem;
        letter-spacing: -0.02em;
        line-height: 1.4;
    }

    .home-category-description {
        font-size: 0.9rem;
        line-height: 1.6;
        margin-top: 1rem;
    }

    .home-cards-container {
        height: auto;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
        padding: 0 1rem;
        align-items: stretch;
        flex: 0 0 auto;
        order: 2;
        box-sizing: border-box;
    }

    /* 모바일에서 6번째 카드부터 숨기기 (5개만 표시) */
    .home-cards-container .home-card:nth-child(n+6) {
        display: none;
    }

    /* show-all 클래스가 추가되면 모든 카드 표시 (인라인 스타일보다 우선) */
    .home-cards-container.show-all .home-card {
        display: block !important;
    }

    /* +more 텍스트 스타일 (모바일에서만 표시) */
    .home-cards-more-text {
        display: inline-block !important;
        margin-top: 1.5rem;
        padding: 0;
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--color-accent);
        cursor: pointer;
        text-align: center;
        border: none;
        background: transparent;
        transition: color 0.3s ease, opacity 0.3s ease;
        order: 2;
        width: 100%;
        text-decoration: none;
    }

    .home-cards-more-text:hover {
        color: var(--color-accent-secondary);
        opacity: 0.8;
    }

    .home-cards-container.show-all ~ .home-cards-more-text,
    .home-cards-more-text[style*="display: none"] {
        display: none !important;
    }

    .home-card-apply-section {
        width: 100%;
        padding: 2rem 1rem 0;
        margin-top: 1rem;
        flex: 0 0 auto;
        order: 3;
    }

    .home-card {
        flex: none;
        width: 100%;
        --card-basis: 100%;
        aspect-ratio: 1;
        position: relative;
    }

    .home-card-link {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        border-radius: 12px;
        overflow: hidden;
        position: relative;
        filter: brightness(1) !important; /* 모바일에서 어두워지는 효과 제거 */
    }

    .home-card-header {
        display: none;
    }

    .home-card-image {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1;
        pointer-events: none;
    }

    /* 모바일에서 호버/터치 시 이미지가 완전히 보이고 info는 숨김 */
    .home-card-link:hover .home-card-image,
    .home-card-link:active .home-card-image,
    .home-card-link:focus .home-card-image {
        opacity: 1;
        z-index: 4;
    }

    .home-card-link:hover .home-card-info,
    .home-card-link:active .home-card-info,
    .home-card-link:focus .home-card-info {
        opacity: 0;
        z-index: 1;
    }

    .home-card-info {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1.5rem;
        border-radius: 12px;
        height: 100%;
        position: relative;
        z-index: 3;
        transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .home-card-info-content {
        gap: 1rem;
        text-align: center;
        width: 100%;
    }

    .home-card-info-row {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .home-card-info-date,
    .home-card-info-school {
        font-size: 1.8rem; /* 두 배로 증가 (0.9rem * 2) */
        color: rgba(255, 255, 255, 0.9);
        font-weight: 500;
    }

    .home-card-info-name {
        font-size: 2.5rem; /* 두 배로 증가 (1.25rem * 2) */
        text-align: center;
        color: #fff;
        font-weight: 700;
    }

    .home-card-number {
        display: none;
    }

    .home-card-button {
        display: none;
    }

    .home-card-apply-btn {
        width: 100%;
        padding: var(--btn-padding-md);
        font-size: var(--btn-font-md);
    }

    .home-faq-grid {
        gap: 1.5rem;
    }

    .home-faq-left {
        gap: 1.25rem;
    }

    .home-faq-accordion .accordion-item + .accordion-item {
        margin-top: 0.75rem;
    }

    .home-faq-accordion .accordion-header {
        padding: 1rem 1.25rem;
    }

    .home-faq-accordion .accordion-title {
        font-size: 1.5rem;
        letter-spacing: -0.02em;
        line-height: 1.4;
        font-weight: 600;
    }

    .home-faq-accordion .accordion-icon {
        font-size: 1.1rem;
    }

    .home-faq-accordion .accordion-body {
        padding: 0 1.25rem 1rem;
        font-size: 1rem;
        line-height: 1.7;
    }

    .home-faq-contact {
        padding: 2rem;
        min-height: 300px;
        border-radius: 12px;
        top: calc(var(--header-height) + 1.5rem);
    }

    .home-faq-contact-title {
        font-size: 1.2rem;
    }

    .home-faq-contact-desc {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .home-faq-tel {
        font-size: 1.75rem;
    }

    .home-faq-contact-graphic {
        width: 150px;
        height: 150px;
        bottom: -20px;
        right: -20px;
    }
}

/* 모바일 소형 (320px ~ 479px) */
@media (max-width: 479px) {
    /* 모바일 소형에서도 오른쪽 여백 방지 - .home-hero는 헤더 겹침을 위해 overflow-x: visible 유지 */
    .home {
        width: 100%;
        max-width: 100%;
        /* overflow-x는 body에서 처리하므로 여기서는 제거하여 헤더 겹침 기능 유지 */
        box-sizing: border-box;
    }

    .home-hero {
        padding-top: 110px;
        min-height: 55vh;
        width: 100%;
        max-width: 100%;
        /* 헤더 겹침 기능을 위해 overflow: visible 유지 */
        overflow: visible;
        box-sizing: border-box;
    }

    .home-hero-carousel,
    .hero-carousel-track,
    .hero-slide {
        min-height: 55vh;
        width: 100%;
        max-width: 100%;
        /* 헤더 겹침 기능을 위해 overflow-x: visible 유지 */
        overflow-x: visible;
        box-sizing: border-box;
    }

    .home-hero-kicker {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
        line-height: 1.5;
    }

    .home-section {
        padding: 3rem 0;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .home-section-inner {
        padding: 0 0.75rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .home-hero-inner {
        padding: 0 0.75rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .home-video-inner {
        padding: 0 0.75rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .home-section-title {
        font-size: 1.75rem;
        letter-spacing: -0.02em;
        line-height: 1.4;
        margin-bottom: 0.5rem;
    }

    .home-headline {
        padding: 3rem 0;
    }

    .home-headline-title {
        font-size: 2rem;
        letter-spacing: -0.02em;
        line-height: 1.4;
    }

    .home-headline-desc {
        font-size: 1rem;
        line-height: 1.7;
    }

    /* 마지막 화면 소형 모바일 스타일 */
    .home-headline-label {
        font-size: 0.7rem;
        padding: 0.4rem 0.9rem;
        letter-spacing: 0.2em;
    }

    /* 소형 모바일에서도 데스크톱용 텍스트 숨기기 */
    .home-headline-desc-desktop {
        display: none;
    }

    /* 소형 모바일에서도 모바일용 텍스트 표시 */
    .home-headline-desc-mobile {
        display: block;
    }

    .hero-slide-headline .home-headline-desc {
        font-size: 1.2rem;
        line-height: 1.8;
        letter-spacing: 0.01em;
    }

    /* 소형 모바일에서도 전체적으로 글자 크기 키우기 */
    .hero-slide-headline .home-headline-title {
        font-size: clamp(2rem, 8vw, 3rem);
        line-height: 1.3;
        margin-bottom: 1.75rem;
    }

    .home-btn-glow {
        padding: 0.875rem 1.75rem;
        font-size: 0.95rem;
        gap: 0.5rem;
    }

    .home-btn-glow .btn-arrow {
        width: 16px;
        height: 16px;
    }

    .hero-final-deco-1,
    .hero-final-deco-2 {
        width: 200px;
        height: 200px;
    }

    .home-btn {
        padding: var(--btn-padding-md);
        font-size: var(--btn-font-sm);
    }

    .home-video {
        padding: 3rem 0;
    }

    .home-video-header {
        margin-bottom: 2rem;
    }

    .home-video-label {
        font-size: 0.75rem;
        padding: 0.4rem 1rem;
    }

    .home-video-title {
        font-size: 2rem;
        letter-spacing: -0.02em;
        line-height: 1.4;
    }

    .home-video-subtitle {
        font-size: 1rem;
        line-height: 1.6;
    }

    .home-video-player {
        margin-bottom: 1.5rem;
    }

    .video-wrapper {
        min-height: 220px;
        border-radius: 12px;
    }

    .home-video-actions {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    .home-video-btn {
        width: 100%;
        max-width: 280px;
        justify-content: center;
        padding: var(--btn-padding-sm);
        font-size: var(--btn-font-sm);
    }

    .home-video-deco-1,
    .home-video-deco-2,
    .home-video-deco-3 {
        display: none;
    }

    .home-review-subjects {
        gap: 0.4rem;
    }

    .review-subject-btn {
        padding: var(--btn-padding-sm);
        font-size: var(--btn-font-sm);
    }

    .home-review {
        padding: 3rem 0;
    }

    .home-review-header {
        margin-bottom: 1.25rem;
    }

    .home-review-subtitle {
        font-size: 0.95rem;
        line-height: 1.5;
    }

    .home-review .home-section-title {
        font-size: 1.5rem;
        margin-bottom: 1.25rem;
    }

    .home-review-carousel {
        margin-bottom: 1.25rem;
    }

    .review-carousel-placeholder {
        min-height: 280px;
        padding: 1.5rem 0.75rem;
        border-radius: 8px;
        /* 모바일에서 카드가 잘리지 않도록 */
        overflow: visible;
    }

    .review-carousel-wrapper {
        min-height: 280px;
        /* 모바일에서 카드가 잘리지 않도록 */
        overflow: visible;
    }

    .review-card {
        width: 95%;
        max-width: 350px;
        height: 300px; /* 고정 높이 */
        min-height: 300px;
        max-height: 300px;
        padding: 1.25rem;
        /* 모바일에서 카드 중앙 정렬 (transform 사용) */
        margin-left: 0;
        margin-top: calc(-150px); /* 높이 변경에 맞춰 조정 */
        transform: translateX(-50%);
        overflow: hidden; /* 내용이 넘치면 숨김 */
    }
    
    /* 모바일에서 active 카드도 중앙 정렬 유지 */
    .review-card.active {
        transform: translateX(-50%) scale(1) !important;
    }
    
    /* 모바일에서 비활성 카드도 중앙 기준으로 이동 */
    .review-card:not(.active) {
        transform: translateX(-50%) scale(0.85);
    }

    .review-card-content {
        font-size: 1rem;
        line-height: 1.6;
        -webkit-line-clamp: 4;
        line-clamp: 4;
    }

    .review-card-author {
        font-size: 0.95rem;
    }

    .home-category {
        padding: 2rem 0;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .home-category-intro {
        padding: 0 0.75rem 1.5rem;
        order: 1;
    }

    .home-category-main-title {
        font-size: 1.75rem;
        letter-spacing: -0.02em;
        line-height: 1.4;
    }

    .home-category-subtitle {
        font-size: 0.95rem;
        line-height: 1.4;
    }

    .home-category-title {
        font-size: 1.5rem;
        letter-spacing: -0.02em;
        line-height: 1.4;
    }

    .home-category-description {
        font-size: 1rem;
        line-height: 1.6;
        margin-top: 0.75rem;
    }

    .home-cards-container {
        gap: 0.75rem;
        padding: 0 0.75rem;
        order: 2;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .home-card-apply-section {
        order: 3;
    }

    .home-card {
        aspect-ratio: 1;
    }

    .home-card-info {
        padding: 1.25rem;
    }

    .home-card-info-name {
        font-size: 1.8rem; /* 두 배로 증가 (1.1rem * 2) */
    }

    .home-card-info-date,
    .home-card-info-school {
        font-size: 1.2rem; /* 두 배로 증가 (0.85rem * 2) */
    }

    .home-card-apply-section {
        padding: 1.5rem 0.75rem 0;
    }

    .home-card-apply-btn {
        padding: var(--btn-padding-sm);
        font-size: var(--btn-font-sm);
    }

    .home-faq-grid {
        gap: 1.25rem;
    }

    .home-faq-left {
        gap: 1rem;
    }

    .home-faq-accordion .accordion-item {
        border-radius: 10px;
    }

    .home-faq-accordion .accordion-item + .accordion-item {
        margin-top: 0.625rem;
    }

    .home-faq-accordion .accordion-header {
        padding: 0.875rem 1rem;
    }

    .home-faq-accordion .accordion-title {
        font-size: 1.25rem;
        letter-spacing: -0.02em;
        line-height: 1.4;
        font-weight: 600;
    }

    .home-faq-accordion .accordion-icon {
        font-size: 1rem;
    }

    .home-faq-accordion .accordion-body {
        padding: 0 1rem 0.875rem;
        font-size: 0.9rem;
        line-height: 1.65;
    }

    .home-faq-contact {
        padding: 1.5rem;
        min-height: 280px;
        border-radius: 10px;
        top: calc(var(--header-height) + 1rem);
    }

    .home-faq-contact-title {
        font-size: 1.5rem;
        letter-spacing: -0.02em;
        line-height: 1.4;
    }

    .home-faq-contact-desc {
        font-size: 0.9rem;
        margin-bottom: 1.25rem;
        line-height: 1.6;
    }

    .home-faq-tel {
        font-size: 1.5rem;
    }

    .home-faq-contact-graphic {
        width: 120px;
        height: 120px;
        bottom: -15px;
        right: -15px;
    }
}

/* 모바일 초소형 (360px 너비, 700px 높이 기준) */
@media (max-width: 360px) and (max-height: 700px) {
    /* 360x700 화면에서 오른쪽 여백 방지 */
    .home {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .home-hero {
        padding-top: 110px;
        min-height: 50vh;
        width: 100%;
        max-width: 100%;
        overflow: visible;
        box-sizing: border-box;
    }

    .home-hero-carousel,
    .hero-carousel-track,
    .hero-slide {
        min-height: 50vh;
        width: 100%;
        max-width: 100%;
        overflow-x: visible;
        box-sizing: border-box;
    }

    .home-hero-kicker {
        font-size: clamp(1.5rem, 7vw, 2.25rem);
        line-height: 1.4;
    }

    .home-section {
        padding: 2.5rem 0;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .home-section-inner {
        padding: 0 0.625rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .home-hero-inner {
        padding: 0 0.625rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .home-video-inner {
        padding: 0 0.625rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .home-section-title {
        font-size: 1.5rem;
        letter-spacing: -0.02em;
        line-height: 1.3;
        margin-bottom: 0.5rem;
    }

    .home-headline {
        padding: 2.5rem 0;
    }

    .home-headline-title {
        font-size: 1.75rem;
        letter-spacing: -0.02em;
        line-height: 1.3;
    }

    .home-headline-desc {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    /* 마지막 화면 360x700 스타일 */
    .home-headline-label {
        font-size: 0.65rem;
        padding: 0.35rem 0.8rem;
        letter-spacing: 0.15em;
    }

    .home-headline-desc-desktop {
        display: none;
    }

    .home-headline-desc-mobile {
        display: block;
    }

    .hero-slide-headline .home-headline-desc {
        font-size: 1.1rem;
        line-height: 1.7;
        letter-spacing: 0.01em;
    }

    .hero-slide-headline .home-headline-title {
        font-size: clamp(1.75rem, 7vw, 2.75rem);
        line-height: 1.2;
        margin-bottom: 1.5rem;
    }

    .home-btn-glow {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
        gap: 0.5rem;
    }

    .home-btn-glow .btn-arrow {
        width: 14px;
        height: 14px;
    }

    .hero-final-deco-1,
    .hero-final-deco-2 {
        width: 150px;
        height: 150px;
    }

    .home-btn {
        padding: var(--btn-padding-sm);
        font-size: var(--btn-font-sm);
    }

    .home-video {
        padding: 2.5rem 0;
    }

    .home-video-header {
        margin-bottom: 1.75rem;
    }

    .home-video-label {
        font-size: 0.7rem;
        padding: 0.35rem 0.9rem;
    }

    .home-video-title {
        font-size: 1.75rem;
        letter-spacing: -0.02em;
        line-height: 1.3;
    }

    .home-video-subtitle {
        font-size: 0.95rem;
        line-height: 1.5;
    }

    .home-video-player {
        margin-bottom: 1.25rem;
    }

    .video-wrapper {
        min-height: 200px;
        border-radius: 10px;
    }

    .home-video-actions {
        flex-direction: column;
        align-items: center;
        gap: 0.625rem;
    }

    .home-video-btn {
        width: 100%;
        max-width: 260px;
        justify-content: center;
        padding: var(--btn-padding-sm);
        font-size: var(--btn-font-sm);
    }

    .home-video-deco-1,
    .home-video-deco-2,
    .home-video-deco-3 {
        display: none;
    }

    .home-review-subjects {
        gap: 0.35rem;
    }

    .review-subject-btn {
        padding: 0.4rem 0.875rem;
        font-size: 0.85rem;
    }

    .home-review {
        padding: 2.5rem 0;
    }

    .home-review-header {
        margin-bottom: 1rem;
    }

    .home-review-subtitle {
        font-size: 0.9rem;
        line-height: 1.4;
    }

    .home-review .home-section-title {
        font-size: 1.4rem;
        margin-bottom: 1rem;
    }

    .home-review-carousel {
        margin-bottom: 1rem;
    }

    .review-carousel-placeholder {
        min-height: 260px;
        padding: 1.25rem 0.625rem;
        border-radius: 8px;
        overflow: visible;
    }

    .review-carousel-wrapper {
        min-height: 260px;
        overflow: visible;
    }

    .review-card {
        width: 95%;
        max-width: 320px;
        height: 280px;
        min-height: 280px;
        max-height: 280px;
        padding: 1.125rem;
        margin-left: 0;
        margin-top: calc(-140px);
        transform: translateX(-50%);
        overflow: hidden;
    }
    
    .review-card.active {
        transform: translateX(-50%) scale(1) !important;
    }
    
    .review-card:not(.active) {
        transform: translateX(-50%) scale(0.85);
    }

    .review-card-content {
        font-size: 0.95rem;
        line-height: 1.5;
        -webkit-line-clamp: 4;
        line-clamp: 4;
    }

    .review-card-author {
        font-size: 0.9rem;
    }

    .home-category {
        padding: 1.75rem 0;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .home-category-intro {
        padding: 0 0.625rem 1.25rem;
        order: 1;
    }

    .home-category-main-title {
        font-size: 1.5rem;
        letter-spacing: -0.02em;
        line-height: 1.3;
    }

    .home-category-subtitle {
        font-size: 0.9rem;
        line-height: 1.3;
    }

    .home-category-title {
        font-size: 1.35rem;
        letter-spacing: -0.02em;
        line-height: 1.3;
    }

    .home-category-description {
        font-size: 0.95rem;
        line-height: 1.5;
        margin-top: 0.625rem;
    }

    .home-cards-container {
        gap: 0.625rem;
        padding: 0 0.625rem;
        order: 2;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .home-card-apply-section {
        order: 3;
    }

    .home-card {
        aspect-ratio: 1;
    }

    .home-card-info {
        padding: 1.125rem;
    }

    .home-card-info-name {
        font-size: 1.6rem;
    }

    .home-card-info-date,
    .home-card-info-school {
        font-size: 1.1rem;
    }

    .home-card-apply-section {
        padding: 1.25rem 0.625rem 0;
    }

    .home-card-apply-btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }

    .home-faq-grid {
        gap: 1rem;
    }

    .home-faq-left {
        gap: 0.875rem;
    }

    .home-faq-accordion .accordion-item {
        border-radius: 8px;
    }

    .home-faq-accordion .accordion-item + .accordion-item {
        margin-top: 0.5rem;
    }

    .home-faq-accordion .accordion-header {
        padding: 0.75rem 0.875rem;
    }

    .home-faq-accordion .accordion-title {
        font-size: 1.15rem;
        letter-spacing: -0.02em;
        line-height: 1.3;
        font-weight: 600;
    }

    .home-faq-accordion .accordion-icon {
        font-size: 0.95rem;
    }

    .home-faq-accordion .accordion-body {
        padding: 0 0.875rem 0.75rem;
        font-size: 0.85rem;
        line-height: 1.6;
    }

    .home-faq-contact {
        padding: 1.25rem;
        min-height: 260px;
        border-radius: 8px;
        top: calc(var(--header-height) + 0.75rem);
    }

    .home-faq-contact-title {
        font-size: 1.35rem;
        letter-spacing: -0.02em;
        line-height: 1.3;
    }

    .home-faq-contact-desc {
        font-size: 0.85rem;
        margin-bottom: 1rem;
        line-height: 1.5;
    }

    .home-faq-tel {
        font-size: 1.4rem;
    }

    .home-faq-contact-graphic {
        width: 100px;
        height: 100px;
        bottom: -10px;
        right: -10px;
    }
}