/* ===================================================================
   story.css - 스토리 페이지 전용 스타일
   =================================================================== */

/* ===================================================================
   인터랙션 애니메이션 (공간 소개 페이지와 동일한 체계)
   =================================================================== */

/* 텍스트 애니메이션 키프레임 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(var(--spacing-5)); /* 20px */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================================================================
   히어로 섹션 인터랙션
   =================================================================== */

/* 히어로 영역 요소들 초기 상태 (JavaScript로 제어) */
.story-hero__title,
.story-hero__description,
.story-hero__bottom-area {
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: none; /* JavaScript로 제어하므로 기본 애니메이션 비활성화 */
}

/* 히어로 영역 요소들 애니메이션 트리거 시 */
.story-hero__title.animated {
    animation: fadeInUp 0.8s ease-out forwards;
    animation-delay: 0.1s; /* 첫 번째 요소 */
}

.story-hero__description.animated {
    animation: fadeInUp 0.8s ease-out forwards;
    animation-delay: 0.3s; /* 두 번째 요소 */
}

.story-hero__bottom-area.animated {
    animation: fadeInUp 0.8s ease-out forwards;
    animation-delay: 0.5s; /* 세 번째 요소 */
}

/* ===================================================================
   히스토리 섹션 - 반응형 플렉서블 레이아웃
   =================================================================== */

.story-history {
    padding: var(--spacing-40) 0;
}

.story-history .container {
    padding: 0 var(--spacing-10); /* 좌우 40px - 데스크탑 */
}

.history-wrapper {
    width: 100%;
    margin: 0 auto;
}

/* 히스토리 아이템 간격 및 레이아웃 - 피그마 디자인 반영 */
.history-item {
    /* 피그마 디자인 비율 기반 유동적 2열 레이아웃 */
    display: grid;
    grid-template-columns: 1fr 1fr; /* 피그마 디자인: 동일한 비율 (50/50) */
    column-gap: var(--spacing-30); /* 피그마 디자인: 120px 간격 */
    position: relative;
    align-items: start; /* 그리드 아이템 상단 정렬 */
    /* 그리드 컬럼이 내용에 맞춰 늘어나지 않도록 강제 */
    grid-auto-columns: minmax(0, 1fr);
    /* 아이템 간격 및 애니메이션 */
    margin-bottom: var(--spacing-40);
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    /* 스크롤 트리거 시 애니메이션 실행 */
    animation: none; /* JavaScript로 제어하므로 기본 애니메이션 비활성화 */
}

.history-item.animated {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* 그리드 컬럼이 내용에 맞춰 늘어나지 않도록 제한 (50/50 비율 유지) */
.history-year-section {
    min-width: 0; /* 그리드 컬럼이 내용에 맞춰 늘어나는 것을 방지 */
    max-width: 100%; /* 컬럼 너비를 넘지 않도록 제한 */
    box-sizing: border-box;
    overflow: hidden; /* 넘치는 내용 숨김 */
    /* 그리드 컬럼 내에서 정확히 50% 차지 */
    width: 100%;
}

.history-content-section {
    min-width: 0; /* 그리드 컬럼이 내용에 맞춰 늘어나는 것을 방지 */
    max-width: 100%; /* 컬럼 너비를 넘지 않도록 제한 */
    box-sizing: border-box;
    /* 그리드 컬럼 내에서 정확히 50% 차지 */
    width: 100%;
}

/* 히스토리 아이템 순차 애니메이션 */
.history-item[data-year="1420"] {
    animation-delay: 0.3s;
}

.history-item[data-year="1988"] {
    animation-delay: 0.5s;
}

.history-item[data-year="2019"] {
    animation-delay: 0.7s;
}

.history-item[data-year="2025"] {
    animation-delay: 0.9s;
}

.history-year-section {
    /* timeline-container 삭제됨 (닷과 라인만 삭제) */
    display: flex;
    flex-direction: column;
    gap: 0; /* 간격 제거 (상단 정렬을 위해) */
    align-items: flex-start;
    position: relative;
    justify-content: flex-start; /* 상단 정렬 */
    align-self: start; /* 그리드 아이템으로서 상단 정렬 */
    padding-top: 0; /* 상단 패딩 제거 */
    margin-top: 0; /* 상단 마진 제거 */
}

.year-number {
    /* 피그마: 320px 높이의 대형 연도 */
    color: var(--text-primary);
    white-space: nowrap;
    font-size: var(--font-size-20xl, 20rem);
    line-height: var(--line-height-none);
    letter-spacing: calc(var(--font-size-20xl, 20rem) * -0.03);
    height: var(--font-size-20xl, 20rem);
    display: flex;
    align-items: flex-start; /* 상단 정렬로 변경 */
    justify-content: flex-start; /* 좌측 정렬 */
    font-family: var(--font-family-regular);
    font-weight: var(--font-weight-normal);
    position: sticky;
    top: var(--spacing-24);
    width: 100%;
    max-width: 100%; /* 컬럼 너비를 넘지 않도록 제한 */
    box-sizing: border-box;
    overflow: hidden; /* 넘치는 텍스트 숨김 */
    /* 폰트 크기를 컬럼 너비에 맞게 조정 */
    font-size: clamp(8rem, 20vw, var(--font-size-20xl, 20rem));
    margin-top: 0 !important; /* 상단 마진 제거 (강제) */
    padding-top: 0 !important; /* 상단 패딩 제거 (강제) */
    margin-bottom: 0 !important; /* 하단 마진 제거 */
    padding-bottom: 0 !important; /* 하단 패딩 제거 */
}

.history-content-section {
    /* 플렉서블 콘텐츠 영역 */
    /* 반응형 상단 패딩: 태블릿 16px (769px) → 데스크탑 32px (1200px) 자동 계산 */
    padding-top: clamp(1rem, calc(1rem + 1 * (100vw - 48rem) / 26.875), 2rem); /* 16px → 32px */
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 상단 정렬 */
    align-items: flex-start;
    align-self: start; /* 그리드 아이템으로서 상단 정렬 */
    margin-top: 0; /* 상단 마진 제거 */
}

.content-summary {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

.content-title {
    color: var(--text-primary);
    margin: 0;
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: none; /* JavaScript로 제어 */
}

.content-title.animated {
    animation: fadeInUp 0.8s ease-out forwards;
    animation-delay: 0.1s; /* 히스토리 아이템 애니메이션 시작 후 약간의 지연 */
}

.content-description {
    color: var(--text-primary);
    margin: 0;
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: none; /* JavaScript로 제어 */
}

.content-description.animated {
    animation: fadeInUp 0.8s ease-out forwards;
    animation-delay: 0.2s; /* 타이틀 후 표시 */
}

.content-image {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: none; /* JavaScript로 제어 */
}

.content-image.animated {
    animation: fadeInUp 0.8s ease-out forwards;
    animation-delay: 0.3s; /* 설명 후 표시 */
}

.content-image .image {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 0; /* 라운드 제거 */
}

/* ================================
   철학(Philosophy) 섹션 - 반응형 플렉서블 레이아웃
   ================================ */
.philosophy-content {
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--spacing-10); /* 좌우 40px - 데스크탑 */
}

/* 중복 정의 제거 - 아래의 .philosophy-content와 충돌 방지 */

.philosophy-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-30); /* 120px 간격 */
    margin-bottom: var(--spacing-40);
}

.philosophy-row {
    /* 피그마 디자인 비율 기반 유동적 2열 레이아웃 */
    display: grid;
    grid-template-columns: 1fr 1fr; /* 1열과 2열 동일한 크기 보장 */
    column-gap: var(--spacing-30); /* 피그마 디자인: 120px 간격 */
    align-items: start;
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: none; /* JavaScript로 제어 */
}

.philosophy-row.animated {
    animation: fadeInUp 0.8s ease-out forwards;
}

.philosophy-row.animated:nth-child(1) {
    animation-delay: 0.5s;
}

.philosophy-row.animated:nth-child(2) {
    animation-delay: 0.7s;
}

.philosophy-row__header {
    /* 그리드 기반 헤더 영역 - 철학과 이름의 의미가 각각 절반씩 차지 */
    display: grid;
    grid-template-columns: 1fr 1fr; /* 철학과 이름의 의미 각각 절반 */
    gap: var(--spacing-6); /* 24px 간격 */
    align-items: start;
}

.philosophy-row__content {
    /* 플렉서블 콘텐츠 영역 */
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6); /* 24px 간격 */
}

.philosophy-row__headline {
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: none; /* JavaScript로 제어 */
}

.philosophy-row__headline.animated {
    animation: fadeInUp 0.8s ease-out forwards;
    animation-delay: 0.1s; /* philosophy-row 애니메이션 시작 후 약간의 지연 */
}

.philosophy-row__description {
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: none; /* JavaScript로 제어 */
}

.philosophy-row__description.animated {
    animation: fadeInUp 0.8s ease-out forwards;
    animation-delay: 0.2s; /* headline 후 표시 */
}

.philosophy-value {
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: none; /* JavaScript로 제어 */
}

.philosophy-value.animated {
    animation: fadeInUp 0.8s ease-out forwards;
}

.philosophy-value.animated:nth-child(1) {
    animation-delay: 0.1s; /* philosophy-row 애니메이션 시작 후 약간의 지연 */
}

.philosophy-value.animated:nth-child(2) {
    animation-delay: 0.2s;
}

.philosophy-value.animated:nth-child(3) {
    animation-delay: 0.3s;
}

.image-caption {
    font-family: var(--font-family-regular);
    font-size: var(--font-size-sm); /* 14px */
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-loose); /* 1.6 */
    letter-spacing: var(--letter-spacing-tight);
    color: var(--text-primary);
    margin: 0;
}


/* 스토리 아웃로 섹션 - 중복 제거됨 */

/* =================================================================
   철학 섹션 - 피그마 디자인에 맞게 수정
   ================================================================= */

.story-philosophy {
    padding: 0;
}

/* 스토리 아웃로 이미지 */
.story-outro-image {
    aspect-ratio: 16 / 6; /* 이미지 비율 16:6 유지 */
    overflow: hidden;
    position: relative;
    width: 100%;
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: none; /* JavaScript로 제어 */
}

.story-outro-image.animated {
    animation: fadeInUp 0.8s ease-out 0.3s forwards;
}

.story-outro-image .image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* .philosophy-content는 위에서 이미 정의됨 - 상하 패딩만 추가 */
.philosophy-content {
    padding-top: var(--spacing-40);
    padding-bottom: 0; /* 하단 패딩은 0 (section에서 관리) */
}

.philosophy-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-30); /* 120px */
    margin-bottom: var(--spacing-40);
}

/* 중복 제거됨 - 위의 .philosophy-row 규칙 사용 */

.philosophy-values {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

.philosophy-value {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.philosophy-value__title {
    color: var(--text-primary);
    margin: 0;
}

.philosophy-value__description {
    color: var(--text-primary);
    margin: 0;
}

/* =================================================================
   아웃로 섹션 - 반응형 플렉서블 레이아웃
   ================================================================= */

.story-outro {
    /* 피그마 디자인 비율 기반 유동적 2열 레이아웃 */
    display: grid;
    grid-template-columns: 1fr 1fr; /* 1열과 2열 동일한 크기 보장 */
    column-gap: var(--spacing-30); /* 피그마 디자인: 120px 간격 */
    padding: var(--spacing-40) 0;
    width: 100%;
    margin: 0 auto;
    align-items: stretch;
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: none; /* JavaScript로 제어 */
}

.story-outro.animated {
    animation: fadeInUp 0.8s ease-out 0.9s forwards;
}

.outro-header {
    /* 1열: 제목 영역 - 상단 정렬 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 상단 정렬 */
    gap: var(--spacing-6); /* 24px 간격 */
}

.outro-content {
    /* 2열: 버튼 영역 - 하단 정렬 */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* 하단 정렬 */
    gap: var(--spacing-6); /* 24px 간격 */
    align-items: flex-end; /* 우측 정렬 */
}

.outro-title {
    color: var(--text-primary);
    margin: 0;
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: none; /* JavaScript로 제어 */
}

.outro-title.animated {
    animation: fadeInUp 0.8s ease-out forwards;
    animation-delay: 0.1s; /* story-outro 애니메이션 시작 후 약간의 지연 */
}

.outro-content .outro-button {
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: none; /* JavaScript로 제어 */
}

.outro-content .outro-button.animated {
    animation: fadeInUp 0.8s ease-out forwards;
    animation-delay: 0.2s; /* outro-title 후 표시 */
}

/* 아웃로 버튼은 기본 버튼 컴포넌트 스타일 사용 */

/* ===================================================================
   반응형 디자인
   =================================================================== */

/* 태블릿 반응형 디자인 (769px ~ 1199px) */
@media (min-width: 769px) and (max-width: 1199px) {
    /* 스토리 히어로: 태블릿에서도 뷰포트 높이에 맞게 조정 */
    .story-hero {
        /* 신형 브라우저 우선: 주소창/바텀바가 보이는 상태 기준 */
        height: 100svh !important;
        min-height: 100dvh !important; /* Dynamic viewport height 폴백 */
        /* 구형 폴백: JS로 설정한 --vh 사용 */
        height: calc(var(--vh, 1vh) * 100) !important;
    }
    
    .story-history .container {
        padding-left: var(--spacing-8) !important; /* 32px - 태블릿 좌우 패딩 */
        padding-right: var(--spacing-8) !important; /* 32px - 태블릿 좌우 패딩 */
    }
    
    
    /* 철학 섹션: container 패딩 제거 (이중 패딩 방지) */
    .story-philosophy .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .philosophy-content {
        padding-left: var(--spacing-8) !important; /* 32px - 태블릿 좌우 패딩 */
        padding-right: var(--spacing-8) !important; /* 32px - 태블릿 좌우 패딩 */
    }
    
    /* 아웃로 섹션: 좌우 패딩 추가 */
    .story-outro {
        padding-left: var(--spacing-8) !important; /* 32px - 태블릿 좌우 패딩 */
        padding-right: var(--spacing-8) !important; /* 32px - 태블릿 좌우 패딩 */
    }
    
    /* 태블릿: 중간 화면 간격 축소 */
    .history-item,
    .philosophy-row,
    .story-outro {
        column-gap: var(--spacing-15); /* 60px */
    }
    
    .philosophy-row__header {
        gap: var(--spacing-4); /* 16px */
    }
    
    .outro-content {
        gap: var(--spacing-15); /* 60px */
    }
    
    /* 태블릿: 간격 축소 */
    .history-item {
        margin-bottom: var(--spacing-4xl); /* 96px 간격 */
    }
    
    .philosophy-content {
        padding: var(--spacing-4xl) 0; /* 상하 96px */
    }
    
    .philosophy-section {
        gap: var(--spacing-4xl); /* 96px 간격 */
        margin-bottom: var(--spacing-4xl); /* 96px */
    }
    
    .story-outro {
        padding: var(--spacing-4xl) 0; /* 상하 96px, 좌우 패딩 제거 */
    }
    
    /* 태블릿: 철학 섹션 이미지 데스크탑과 동일한 비율(16:6)로 와이드하게 */
    .story-outro-image {
        aspect-ratio: 16 / 6; /* 데스크탑과 동일한 비율 유지 */
    }
    
    /* 태블릿: 취향을 탐미하고... 텍스트(outro-title) 크기를 공간 소개 페이지 타이틀과 동일하게 조정 */
    .outro-title.heading-h2 {
        font-size: clamp(2rem, calc(2rem + 16 * (100vw - 48rem) / 42), 3rem) !important; /* 공간 소개 페이지 타이틀과 동일: 32px → 48px (769px ~ 1199px) */
    }
    
    /* 태블릿: 전시 둘러보기 버튼 텍스트 크기를 공간 소개 페이지 타이틀과 동일하게 조정 */
    .outro-button.btn--text {
        font-size: clamp(2rem, calc(2rem + 16 * (100vw - 48rem) / 42), 3rem) !important; /* 공간 소개 페이지 타이틀과 동일: 32px → 48px (769px ~ 1199px) */
        line-height: var(--line-height-normal) !important;
        letter-spacing: var(--letter-spacing-heading) !important;
        font-family: var(--font-family-regular) !important;
        font-weight: var(--font-weight-normal) !important;
        gap: var(--spacing-4) !important; /* 16px - 버튼 텍스트와 아이콘 간격 */
    }
    
    /* 태블릿: 버튼 아이콘 크기를 텍스트 크기에 맞게 조정 */
    .outro-button.btn--text .btn__icon {
        width: clamp(1.5rem, calc(1.5rem + 0.5 * (100vw - 48rem) / 42), 1.875rem) !important; /* 24px → 30px (텍스트 크기의 약 62.5%) */
        height: clamp(1.5rem, calc(1.5rem + 0.5 * (100vw - 48rem) / 42), 1.875rem) !important;
    }
    
    .outro-button.btn--text .btn__icon svg {
        width: 100% !important;
        height: 100% !important;
    }
}

/* 모바일 반응형 디자인 (max-width: 768px) */
@media (max-width: 768px) {
    /* Container 패딩 제거 (이중 패딩 방지) */
    .story-history .container,
    .story-philosophy .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* 히스토리 섹션 모바일 패딩 */
    .story-history {
        padding-top: var(--spacing-12); /* 48px */
        padding-bottom: var(--spacing-12); /* 48px */
    }
    
    .history-wrapper {
        padding-left: var(--spacing-5); /* 20px - 모바일 좌우 패딩 */
        padding-right: var(--spacing-5); /* 20px - 모바일 좌우 패딩 */
    }
    
    /* 철학 섹션 모바일 패딩 - container 패딩 제거 후 philosophy-content에만 적용 */
    /* utilities.css의 모바일 container 패딩도 제거 */
    .story-philosophy .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .story-philosophy .philosophy-content {
        padding-left: var(--spacing-5) !important; /* 20px - 모바일 좌우 패딩 */
        padding-right: var(--spacing-5) !important; /* 20px - 모바일 좌우 패딩 */
        padding-top: var(--spacing-12); /* 48px */
        padding-bottom: var(--spacing-12); /* 48px */
    }
    
    /* 모바일: 2열 레이아웃을 1열로 변경 */
    .history-item,
    .philosophy-row,
    .story-outro {
        grid-template-columns: 1fr !important; /* 모바일에서는 1열 */
        gap: var(--spacing-6); /* 24px */
    }
    
    .history-item {
        margin-bottom: var(--spacing-12); /* 48px 간격 */
    }
    
    .history-year-section {
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-5); /* 20px */
        width: 100%;
    }
    
    .year-number {
        font-size: var(--font-size-7-5xl, 7.5rem);
        letter-spacing: calc(var(--font-size-7-5xl, 7.5rem) * -0.03);
        height: auto;
    }
    
    .history-content-section {
        width: 100%;
        padding: var(--spacing-4) 0; /* 상하 16px */
    }
    
    .philosophy-section {
        gap: var(--spacing-12); /* 48px 간격 */
        margin-bottom: var(--spacing-12); /* 48px */
    }
    
    .philosophy-row__header {
        grid-template-columns: 1fr !important; /* 모바일에서는 세로 배치 */
        gap: var(--spacing-sm); /* 8px */
    }
    
    .story-outro {
        padding: var(--spacing-12) var(--spacing-5); /* 상하 48px, 좌우 20px */
        gap: var(--spacing-6); /* 24px */
    }
    
    .outro-content {
        flex-direction: column;
        align-items: flex-end; /* 모바일에서도 우측 정렬 */
        gap: var(--spacing-6); /* 24px */
    }
    
    /* 모바일: 철학 섹션 이미지 비율 16:10으로 변경 */
    .story-outro-image {
        aspect-ratio: 16 / 10 !important; /* 모바일에서 비율 16:10 */
    }
    
    /* 모바일: 취향을 탐미하고... 텍스트(outro-title) 크기를 공간 소개 페이지 타이틀과 동일하게 조정 */
    .outro-title.heading-h2 {
        font-size: clamp(1.75rem, calc(1.75rem + 8 * (100vw - 30rem) / 18), 2rem) !important; /* 공간 소개 페이지 타이틀과 동일: 28px → 32px (481px ~ 768px) */
    }
    
    /* 모바일: 전시 둘러보기 버튼 텍스트 크기를 공간 소개 페이지 타이틀과 동일하게 조정 */
    .outro-button.btn--text {
        font-size: clamp(1.75rem, calc(1.75rem + 8 * (100vw - 30rem) / 18), 2rem) !important; /* 공간 소개 페이지 타이틀과 동일: 28px → 32px (481px ~ 768px) */
        line-height: var(--line-height-normal) !important;
        letter-spacing: var(--letter-spacing-heading) !important;
        font-family: var(--font-family-regular) !important;
        font-weight: var(--font-weight-normal) !important;
        gap: var(--spacing-4) !important; /* 16px - 버튼 텍스트와 아이콘 간격 */
    }
    
    /* 모바일: 버튼 아이콘 크기를 텍스트 크기에 맞게 조정 */
    .outro-button.btn--text .btn__icon {
        width: clamp(1.25rem, calc(1.25rem + 0.5 * (100vw - 30rem) / 18), 1.5rem) !important; /* 20px → 24px (텍스트 크기의 약 71%) */
        height: clamp(1.25rem, calc(1.25rem + 0.5 * (100vw - 30rem) / 18), 1.5rem) !important;
    }
    
    .outro-button.btn--text .btn__icon svg {
        width: 100% !important;
        height: 100% !important;
    }
}

/* 작은 모바일 반응형 디자인 (max-width: 480px) */
@media (max-width: 480px) {
    .history-wrapper {
        padding-left: var(--spacing-5) !important; /* 20px - 작은 모바일 좌우 패딩 */
        padding-right: var(--spacing-5) !important; /* 20px - 작은 모바일 좌우 패딩 */
    }
    
    .philosophy-content {
        padding-left: var(--spacing-5) !important; /* 20px - 작은 모바일 좌우 패딩 */
        padding-right: var(--spacing-5) !important; /* 20px - 작은 모바일 좌우 패딩 */
    }
    
    .story-outro {
        padding-left: var(--spacing-5) !important; /* 20px - 작은 모바일 좌우 패딩 */
        padding-right: var(--spacing-5) !important; /* 20px - 작은 모바일 좌우 패딩 */
    }
    
    /* history-year-section 영역 삭제됨 */
    
    .history-item {
        margin-bottom: var(--spacing-8); /* 32px 간격 */
    }
    
    .philosophy-content {
        padding-top: var(--spacing-8); /* 32px */
        padding-bottom: var(--spacing-8); /* 32px */
    }
    
    .philosophy-section {
        gap: var(--spacing-8); /* 32px 간격 */
        margin-bottom: var(--spacing-8); /* 32px */
    }
    
    .story-outro {
        padding-top: var(--spacing-8); /* 32px */
        padding-bottom: var(--spacing-8); /* 32px */
    }
    
    .history-item,
    .philosophy-row,
    .story-outro {
        gap: var(--spacing-4); /* 16px */
    }
    
    /* 작은 모바일: 취향을 탐미하고... 텍스트(outro-title) 크기 조정 */
    .outro-title.heading-h2 {
        font-size: clamp(1.5rem, calc(1.5rem + 0.5 * (100vw - 22.5rem) / 27.5), 1.75rem) !important; /* 작은 모바일: 24px → 28px (360px ~ 480px) */
    }
    
    /* 작은 모바일: 전시 둘러보기 버튼 텍스트 크기를 공간 소개 페이지 타이틀과 동일하게 조정 */
    .outro-button.btn--text {
        font-size: clamp(1.5rem, calc(1.5rem + 0.5 * (100vw - 22.5rem) / 27.5), 1.75rem) !important; /* 작은 모바일: 24px → 28px (360px ~ 480px) */
        line-height: var(--line-height-normal) !important;
        letter-spacing: var(--letter-spacing-heading) !important;
        gap: var(--spacing-3) !important; /* 12px - 작은 모바일에서 간격 축소 */
    }
    
    /* 작은 모바일: 버튼 아이콘 크기를 텍스트 크기에 맞게 조정 */
    .outro-button.btn--text .btn__icon {
        width: clamp(1rem, calc(1rem + 0.25 * (100vw - 22.5rem) / 27.5), 1.25rem) !important; /* 16px → 20px (텍스트 크기의 약 67%) */
        height: clamp(1rem, calc(1rem + 0.25 * (100vw - 22.5rem) / 27.5), 1.25rem) !important;
    }
    
    .outro-button.btn--text .btn__icon svg {
        width: 100% !important;
        height: 100% !important;
    }
}