/**
 * ============================================
 * 워크캠프 2026 리뉴얼 - 메인 페이지 스타일
 * ============================================
 */

/* ========== Hero Section ========== */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* 슬라이드 컨테이너 */
.hero__slides {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.hero__slide--active {
    opacity: 1;
}

/* 슬라이드 이미지 - 줌인 애니메이션 */
.hero__slide .hero__bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__slide--active .hero__bg-image {
    animation: heroZoom 8s ease-out forwards;
}

@keyframes heroZoom {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}

/* 히어로 오버레이: #8B3B00(15%) 0%, #FFDC9B(15%) 60%, #000548(60%) 100% */
.hero__bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(139, 59, 0, 0.15) 0%,
        rgba(255, 220, 155, 0.15) 60%,
        rgba(0, 5, 72, 0.6) 100%
    );
    z-index: 1;
}

.hero__content {
    position: relative;
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    padding-top: 200px;
    padding-bottom: 120px;
    text-align: center;
    color: var(--color-text-white);
    z-index: 2;
}

.hero__title {
    font-size: clamp(48px, 6vw, 80px);
    font-weight: var(--font-weight-extrabold);
    line-height: 1.2;
    color: var(--color-text-white);
    margin-bottom: var(--spacing-md);
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

.hero__title span {
    display: block;
}

.hero__subtitle {
    font-size: clamp(18px, 2vw, 24px);
    font-weight: var(--font-weight-extrabold);
    opacity: 0.95;
    margin-bottom: var(--spacing-2xl);
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

.hero__actions {
    display: flex;
    justify-content: center;
    margin-bottom: var(--spacing-3xl);
}

/* 버튼 화살표 */
.btn__arrow {
    margin-left: 8px;
    transition: transform var(--transition-fast);
}

.btn:hover .btn__arrow {
    transform: translateX(4px);
}

/* 성향테스트 링크 */
.hero__test-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    font-size: var(--font-size-base);
    color: var(--color-text-white);
    opacity: 0.9;
}

.hero__test-link span {
    display: inline;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero__test-btn {
    display: inline-block;
    padding: 8px 20px;
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text-white);
    background-color: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-full);
    text-decoration: none;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all var(--transition-base);
    backdrop-filter: blur(4px);
}

.hero__test-btn:hover {
    background-color: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.5);
}

/* ========== Stories Section (뜨거웠던 2주의 기록) ========== */
.stories-section {
    padding: 110px 0;
    background-color: var(--color-bg-white);
}

.stories-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: var(--spacing-2xl);
}

.stories-section .section-header__subtitle {
    font-size: 20px;
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    margin-bottom: 8px;
}

.stories-section .section-header__title {
    font-size: 40px;
    font-weight: var(--font-weight-extrabold);
    color: #000000;
    line-height: 1.3;
    text-shadow: none;
}

.stories-section .section-header__link {
    font-size: var(--font-size-sm);
    color: var(--color-text-body);
    text-decoration: none;
}

/* 스토리 그리드 레이아웃 */
.stories-grid {
    display: grid;
    grid-template-columns: 51% 48%;
    gap: var(--spacing-lg);
    align-items: start;
}

/* 오른쪽 영역 레이아웃 */
.stories-grid__right {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* 오른쪽 하단 2개 카드 - grid로 통일 */
.stories-grid__right-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
}

/* 공통 스토리 카드 */
.story-card {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    cursor: pointer;
}

.story-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.story-card:hover img {
    transform: scale(1.05);
}

.story-card__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--spacing-xl);
    color: var(--color-text-white);
    z-index: 2;
}

.story-card__quote {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-sm);
    text-shadow: 0 0 6px #000000;
}

/* 큰 텍스트 - 30px */
.story-card__quote--large {
    font-size: 30px;
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-xs);
}

/* 서브타이틀 - 20px */
.story-card__quote--subtitle {
    font-size: 20px;
    font-weight: var(--font-weight-medium);
    margin-bottom: 0;
}

/* 볼드 텍스트 - 20px */
.story-card__quote--bold {
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-sm);
}

.story-card__desc {
    font-size: var(--font-size-sm);
    opacity: 0.9;
    text-shadow: 0 0 6px #000000;
}

/* 중간 텍스트 - 16px */
.story-card__desc--medium {
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-sm);
    display: block;
}

/* 작은 텍스트 - 14px */
.story-card__desc--small {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    display: block;
}

.story-card__arrow {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 18px;
    line-height: 1;
    width: 18px;
    height: 17px;
    color: var(--color-text-white);
    z-index: 2;
}

/* 텍스트 카드는 검정 화살표 */
.story-card--text .story-card__arrow {
    color: var(--color-text-dark);
}

/* 메인 스토리 카드 (왼쪽 큰 카드) - #00058B(36%) */
.story-card--main {
    width: 100%;
    aspect-ratio: 620 / 484;
    border: 1px solid #707070;
    box-sizing: border-box;
}

.story-card--main::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 5, 139, 0.7) 0%,
        rgba(0, 5, 139, 0.36) 50%,
        transparent 100%
    );
    z-index: 1;
}

/* 메인 카드 텍스트 - 하단에서 더 위로 (60px) */
.story-card--main .story-card__content {
    bottom: 60px;
}

/* 오렌지 스토리 카드 (오른쪽 상단) - #FF4E00(60%) */
.story-card--orange {
    width: 100%;
    aspect-ratio: 590 / 230;
    border: 1px solid #707070;
    box-sizing: border-box;
}

.story-card--orange::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 78, 0, 0.6);
    z-index: 1;
}

/* 오렌지 카드 텍스트 - 상단에 배치 */
.story-card--orange .story-card__content {
    justify-content: flex-start;
    padding-top: var(--spacing-xl);
}

/* 비디오 스토리 카드 (오른쪽 하단 왼쪽) - #000000(25%) */
.story-card--video {
    width: 100%;
    aspect-ratio: 282 / 230;
    border: 1px solid #707070;
    box-sizing: border-box;
}

.story-card--video::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 1;
}

.story-card--video .story-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: var(--radius-full);
    z-index: 3;
}

.story-card--video .story-card__play svg {
    width: 24px;
    height: 24px;
    color: var(--color-text-dark);
    margin-left: 4px;
}

.story-card--video .story-card__caption {
    position: absolute;
    bottom: var(--spacing-md);
    left: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-white);
    z-index: 2;
}

/* 텍스트 스토리 카드 (오른쪽 하단 오른쪽) - 흰 배경 */
.story-card--text {
    background-color: var(--color-bg-white);
    width: 100%;
    aspect-ratio: 282 / 230;
    border: 1px solid #707070;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: var(--spacing-xl);
    position: relative;
}

.story-card--text .story-card__quote {
    color: var(--color-text-dark);
    font-size: var(--font-size-lg);
    text-shadow: none;
}

.story-card--text .story-card__desc {
    color: var(--color-text-dark);
    opacity: 1;
    text-shadow: none;
}

.story-card--text .story-card__meta {
    margin-top: var(--spacing-lg);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.story-card--text .story-card__arrow {
    position: static;
    margin-top: auto;
    align-self: flex-end;
    color: var(--color-text-body);
}

/* ========== Experience Section (국경과 나이를 넘어, 경험의 폭을 넓히다) ========== */
.experience-section {
    padding: 110px 0;
    background-color: #FCFCFC;
}

.experience-section .section-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.experience-section .section-header__subtitle {
    font-size: 20px;
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    margin-bottom: 8px;
}

.experience-section .section-header__title {
    font-size: 40px;
    font-weight: var(--font-weight-extrabold);
    color: #000000;
    line-height: 1.3;
}

/* 프로그램 카드 그리드 - 3개 카드, 1px 간격 */
.program-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    justify-content: center;
    max-width: 1240px;
    margin: 0 auto;
}

/* 프로그램 카드 */
.program-card {
    position: relative;
    height: 490px;
    overflow: hidden;
    text-decoration: none;
    display: block;
    box-sizing: border-box;
}

/* 선택적 border-radius */
.program-card:first-child {
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
}

.program-card:nth-child(2) {
    border-radius: 0;
}

.program-card:last-child {
    border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
}

/* 카드 배경 이미지 - 전체 카드를 채움 */
.program-card__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.program-card:hover .program-card__bg {
    transform: scale(1.05);
}

/* 카드 오버레이 그라데이션 */
.program-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 47, 152, 0.2) 100%
    );
    z-index: 1;
}

/* inbound는 기본 오버레이와 동일하여 생략 */

.program-card--teenager .program-card__overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(172, 59, 0, 0.2) 100%
    );
}

.program-card--heritage .program-card__overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(117, 152, 0, 0.2) 100%
    );
}

/* 카드 콘텐츠 영역 - 이미지 위에 표시 */
.program-card__content {
    position: absolute;
    inset: 0;
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 2;
    color: #FFFFFF;
}

.program-card__label {
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-xs);
}

.program-card__title {
    font-size: 30px;
    font-weight: var(--font-weight-bold);
    color: #FFFFFF;
    line-height: 1.3;
    margin-bottom: var(--spacing-sm);
}

.program-card__desc {
    font-size: 18px;
    font-weight: var(--font-weight-medium);
    color: #FFFFFF;
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-md);
}

.program-card__divider {
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.5);
    border: none;
    margin: 0 0 var(--spacing-md) 0;
}

.program-card__link {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: #FFFFFF;
    transition: color var(--transition-fast);
}

.program-card:hover .program-card__link {
    color: var(--color-primary);
}


/* ========== Season Section (가장 완벽한 계절을 준비하는 시간) ========== */
.season-section {
    position: relative;
    padding: 110px 0;
    overflow: visible; /* 오른쪽으로 넘침 허용 */
    background-color: var(--color-bg-white);
}

.season-section .section-header {
    margin-bottom: var(--spacing-2xl);
    align-items: flex-end; /* 전체보기를 소제목(desc) 라인에 맞춤 */
}

.season-section .section-header__desc {
    font-size: 24px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-body);
}

.season-section .section-header__title {
    font-size: 40px;
    font-weight: var(--font-weight-extrabold); /* ExtraBold */
    color: #000000; /* 검정 */
    line-height: 1.3;
}

/* 시즌 캠프 슬라이더 래퍼 - 컨테이너 왼쪽 가장자리에서 시작, 오른쪽으로 브라우저 끝까지 */
.season-camps-wrapper {
    position: relative;
    overflow: hidden;
    /* 왼쪽 padding으로 1280 컨테이너 시작점에 맞춤 */
    padding-left: calc((100vw - var(--container-max-width)) / 2 + var(--container-padding));
}

@media (max-width: 1320px) {
    .season-camps-wrapper {
        padding-left: var(--container-padding);
    }
}

/* 시즌 캠프 슬라이더 */
.season-camps {
    display: flex;
    gap: var(--spacing-lg);
    padding: var(--spacing-md) 0;
    transition: transform 0.5s ease;
    -webkit-overflow-scrolling: touch;
}

/* 시즌 캠프 카드: 410x442px, 3개 보이고 4번째 일부 */
.season-camp-card {
    flex: 0 0 410px;
    height: 442px;
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    text-decoration: none;
}

.season-camp-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.season-camp-card:hover img {
    transform: scale(1.05);
}

/* 이미지 위 그라데이션 오버레이: 상단 #AAAAAA(투명) → 하단 #E27A00, overlay blend */
.season-camp-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(170, 170, 170, 0) 0%,
        rgba(170, 170, 170, 0) 40%,
        rgba(170, 170, 170, 0.5) 70%,
        #E27A00 100%
    );
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 1;
}

/* 테마 pill (상단) - 1개만, 흰 배경에 검정 보더 */
.season-camp-card__tag {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-dark);
    background-color: #FFFFFF;
    border: 1px solid #000000;
    border-radius: var(--radius-full);
    z-index: 3;
}

/* 하단 텍스트 (캠프 설명) */
.season-camp-card__info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-xl);
    color: var(--color-text-white);
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2;
}

/* 하단 메인 텍스트 (캠프 설명) - 프리텐다드 ExtraBold 24px */
.season-camp-card__title {
    font-size: 24px;
    font-weight: var(--font-weight-extrabold);
    line-height: 1.4;
    text-shadow: 0 0 6px #000000; /* x:0, y:0, blur:6 */
}

/* 하단 서브 텍스트 (국가/도시/날짜) */
.season-camp-card__meta {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    opacity: 0.9;
    text-shadow: 0 0 6px #000000;
}

.season-more {
    text-align: right;
    margin-top: var(--spacing-lg);
}

.season-more__link {
    color: var(--color-text-primary); /* 네이비 */
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.season-more__link:hover {
    color: var(--color-primary);
}

/* ========== Global Network Section (전 세계가 함께 만드는 안전한 네트워크) ========== */
.global-network-section {
    padding: 110px 0 80px 0;
    background-color: var(--color-bg-white);
}

/* 헤더: 좌우 배치 */
.global-network-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-2xl);
}

.global-network-header__left {
    flex: 1;
}

.global-network__title {
    font-size: 40px;
    font-weight: var(--font-weight-extrabold);
    color: #000000;
    line-height: 1.3;
    margin-bottom: var(--spacing-lg);
}

.global-network__desc {
    font-size: var(--font-size-base);
    color: var(--color-text-body);
    line-height: var(--line-height-relaxed);
}

/* 통계 영역: 오른쪽 배치 */
.global-network-header__right {
    flex-shrink: 0;
}

.global-network-stats {
    display: flex;
    align-items: center;
    gap: var(--spacing-2xl);
}

.network-stat {
    text-align: center;
}

.network-stat__number {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin-bottom: var(--spacing-xs);
}

.network-stat__value {
    font-size: 60px;
    font-weight: var(--font-weight-extrabold);
    color: #000000;
    line-height: 1;
}

.network-stat__unit {
    font-size: 20px;
    font-weight: var(--font-weight-medium);
    color: #000000;
    margin-left: 4px;
}

.network-stat__label {
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    letter-spacing: 0.05em;
}

.network-stat-divider {
    width: 1px;
    height: 60px;
    background-color: #E0E0E0;
}

/* 파트너 로고 슬라이더 - 상하단 라인 포함 */
.partner-logos-wrapper {
    border-top: 1px solid #E9E9E9;
    border-bottom: 1px solid #E9E9E9;
    margin-bottom: var(--spacing-2xl);
}

.partner-logos {
    overflow: hidden;
    padding: 0;
}

.partner-logos__track {
    display: flex;
    /* 18개 로고 × 200px = 3600px, 복제 포함 7200px */
    animation: partnerScroll 36s linear infinite;
}

@keyframes partnerScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        /* 18개 로고 × 200px = 3600px 이동 */
        transform: translateX(-3600px);
    }
}

.partner-logo-item {
    flex: 0 0 200px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
}

.partner-logo-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all var(--transition-base);
}

.partner-logo-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* 더보기 버튼 */
.partner-more {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.partner-more__btn {
    background: none;
    border: 1px solid #E0E0E0;
    padding: var(--spacing-sm) var(--spacing-xl);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    color: var(--color-text-body);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.partner-more__btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.partner-more__icon {
    font-size: 10px;
    transition: transform var(--transition-fast);
}

.partner-more__btn.active .partner-more__icon {
    transform: rotate(180deg);
}

/* 전체 파트너 그리드 */
.partner-grid {
    margin-top: var(--spacing-2xl);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--spacing-lg);
}

/* 한국워크캠프 협력기관 섹션 */
.cooperation-section {
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-2xl);
    border-top: 1px solid #e0e0e0;
}

.cooperation-section__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xl);
    text-align: center;
}

.cooperation-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
}

.cooperation-item {
    padding: 16px 12px;
    background-color: #f8f8f8;
    border: 1px solid #e5e5e5;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: #555;
    text-align: center;
    transition: all var(--transition-fast);
}

.cooperation-item:hover {
    background-color: #fff;
    border-color: var(--color-primary);
    color: var(--color-primary);
}

@media (max-width: 1024px) {
    .cooperation-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .cooperation-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cooperation-section__title {
        font-size: var(--font-size-lg);
    }
}

@media (max-width: 480px) {
    .cooperation-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-sm);
    }

    .cooperation-item {
        padding: 12px 8px;
        font-size: 13px;
    }
}

/* ========== Why Section (여행의 깊이를 바꾸는 3가지 결정적 차이) ========== */
.why-section {
    padding: 110px 0;
    background-color: #FCFCFC;
}

.why-section .section-header {
    text-align: left;
    margin-bottom: var(--spacing-2xl);
}

.why-section .section-header__subtitle {
    font-size: 20px;
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    margin-bottom: 8px;
}

.why-section .section-header__title {
    font-size: 40px;
    font-weight: var(--font-weight-extrabold);
    color: #000000;
    line-height: 1.3;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.why-item {
    text-align: left;
    padding: var(--spacing-xl);
    background-color: var(--color-bg-white);
    border-radius: var(--radius-lg);
    border: 1px solid #707070;
    box-sizing: border-box;
}

.why-item__icon {
    width: 65px;
    height: 65px;
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #EAF1FF;
    border-radius: var(--radius-md);
}

.why-item__icon img,
.why-item__icon svg {
    width: 32px;
    height: 32px;
}

.why-item__icon svg {
    stroke: var(--color-primary);
}

.why-item__title {
    font-size: 30px;
    font-weight: var(--font-weight-bold);
    color: #00058B;
    margin-bottom: var(--spacing-sm);
}

.why-item__subtitle {
    font-size: 20px;
    font-weight: var(--font-weight-extrabold);
    color: var(--color-text-body);
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.02em;
}

.why-item__desc {
    font-size: 18px;
    color: var(--color-text-light);
    line-height: var(--line-height-relaxed);
}

/* ========== Stats & CTA Section ========== */
.stats-cta-section {
    padding: 126px 0 var(--spacing-4xl); /* 상단 30px 추가 */
    background-color: var(--color-bg-dark);
}

.stats-cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3xl);
    align-items: center;
}

.stats-cta__content {
    color: var(--color-text-white);
}

.stats-cta__title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-white);
    margin-bottom: var(--spacing-xl);
    line-height: var(--line-height-tight);
}

.stats-cta__numbers {
    display: flex;
    gap: var(--spacing-3xl);
}

.stats-cta__numbers .stat-item {
    text-align: left;
    color: var(--color-text-white);
}

.stats-cta__numbers .stat-item__number {
    font-size: var(--font-size-6xl);
    font-weight: var(--font-weight-extrabold);
    line-height: 1;
    margin-bottom: var(--spacing-sm);
}

.stats-cta__numbers .stat-item__label {
    font-size: var(--font-size-base);
    opacity: 0.8;
}

/* ========== Floating Button (1:1 문의) ========== */
.floating-btn {
    position: fixed;
    bottom: 32px;
    right: 32px;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 14px 24px;
    background-color: var(--color-primary);
    color: var(--color-text-white);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-sticky);
    opacity: 0;
    transform: translateY(20px);
    transition: all var(--transition-base);
    pointer-events: none;
}

.floating-btn--visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.floating-btn:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

.floating-btn img {
    width: 24px;
    height: 24px;
}

/* Experience Card Tag */
.experience-card__tag {
    display: inline-block;
    padding: 4px 12px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    margin-bottom: var(--spacing-sm);
}

/* ========== Responsive ========== */

@media (max-width: 768px) {
    .hero__content {
        padding: 100px var(--container-padding) 60px;
        justify-content: flex-end;
    }

    .hero__bg-overlay {
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.15) 0%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 5, 72, 0.7) 100%
        );
    }

    .hero__title {
        font-size: clamp(32px, 9vw, 44px);
        word-break: keep-all;
        margin-top: 50px;
    }

    .hero__subtitle {
        font-size: var(--font-size-base);
    }

    .hero__actions {
        flex-direction: column;
        align-items: center;
    }

    /* 시즌 섹션 헤더 모바일 */
    .season-section {
        padding: 60px 0;
    }

    .season-section .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }

    .season-section .section-header__title {
        word-break: keep-all;
    }

    .season-section .section-header__desc {
        font-size: 18px;
    }

    /* 시즌 캠프 카드 내 텍스트 모바일 */
    .season-camp-card__title {
        font-size: 20px;
    }

    .season-camp-card__meta {
        font-size: 12px;
    }
}


/* Stories Section 반응형 */
@media (max-width: 1024px) {
    .stories-grid {
        grid-template-columns: 1fr;
    }

    .story-card--main {
        grid-row: span 1;
        min-height: 400px;
    }

    .program-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }

    .program-card:first-child,
    .program-card:last-child {
        border-radius: var(--radius-xl);
    }

    .program-card:nth-child(2) {
        border-radius: var(--radius-xl);
    }
}

@media (max-width: 768px) {
    .stories-section .section-header {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .stories-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .stories-grid__right-bottom {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-md);
    }

    .story-card--main {
        aspect-ratio: 3 / 4;
        min-height: 0;
    }

    .story-card--main .story-card__content {
        bottom: 0;
        padding-bottom: 40px;
    }

    .story-card--orange {
        aspect-ratio: 16 / 10;
        min-height: 0;
    }

    .story-card--orange .story-card__content {
        padding-bottom: 40px;
    }

    .story-card--video {
        aspect-ratio: 4 / 3;
        min-height: 0;
    }

    .story-card--text {
        aspect-ratio: 4 / 3;
        min-height: 0;
        padding: var(--spacing-lg);
    }

    .story-card__quote {
        font-size: var(--font-size-lg);
    }

    .story-card__quote--large {
        font-size: 22px;
    }

    .story-card__quote--bold {
        font-size: 16px;
    }

    .story-card__desc--medium {
        font-size: 14px;
    }

    /* 글로벌 네트워크 섹션 모바일 */
    .global-network-section {
        padding: 60px 0 40px;
    }

    .global-network-header {
        flex-direction: column;
        gap: var(--spacing-xl);
    }

    .global-network__title {
        font-size: 28px;
    }

    .global-network-stats {
        gap: var(--spacing-xl);
    }

    .network-stat__value {
        font-size: 40px;
    }

    .network-stat__unit {
        font-size: 16px;
    }

    .network-stat-divider {
        height: 40px;
    }

    .program-cards {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .program-card {
        height: auto;
        min-height: 400px;
    }

    .program-card:first-child,
    .program-card:nth-child(2),
    .program-card:last-child {
        border-radius: var(--radius-xl);
    }

    /* Why Section 반응형 */
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }

    /* Stats CTA 반응형 */
    .stats-cta-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-2xl);
        text-align: center;
    }

    .stats-cta__numbers {
        justify-content: center;
    }

    .stats-cta__numbers .stat-item {
        text-align: center;
    }

    .stats-cta__title {
        font-size: var(--font-size-3xl);
    }

    /* 플로팅 버튼 */
    .floating-btn {
        bottom: 20px;
        right: 20px;
        padding: 12px 20px;
    }

    /* 시즌 캠프 슬라이더 - 모바일 터치 스와이프 */
    .season-camps-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .season-camps-wrapper::-webkit-scrollbar {
        display: none;
    }

    .season-camps {
        transition: none;
    }

    .season-camp-card {
        flex: 0 0 280px;
        height: 360px;
    }
}

@media (max-width: 480px) {
    .why-grid {
        grid-template-columns: 1fr;
    }

    .stats-cta__numbers {
        flex-direction: column;
        gap: var(--spacing-xl);
    }

    .stats-cta__numbers .stat-item__number {
        font-size: var(--font-size-5xl);
    }

    .floating-btn span {
        display: none;
    }

    .floating-btn {
        padding: 14px;
        border-radius: var(--radius-full);
    }

    /* Stories - 하단 카드도 세로 배치 */
    .stories-grid__right-bottom {
        grid-template-columns: 1fr;
    }

    .story-card--main {
        min-height: 280px;
    }

    .story-card__quote--large {
        font-size: 20px;
    }

    /* 글로벌 네트워크 */
    .global-network__title {
        font-size: 24px;
    }

    .network-stat__value {
        font-size: 32px;
    }

    .season-camp-card {
        flex: 0 0 260px;
        height: 340px;
    }
}