/* ==========================================================================
   1. 공통 초기화 및 변수 선언 (Design System)
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {        
    --text-dark: #1E1E1E;    
    --text-pale: #E2E8F0;
    --bg-dark: #1E1E1E;    
    --bg-white: #ffffff;
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 100 900;
	src: url('assets/fonts/PretendardVariable.woff2') format('woff2-variations');
	font-display: swap;
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
    font-family: "Pretendard Variable", "Pretendard", system-ui, sans-serif;
    color: var(--text-pale);
    overflow-x: hidden;
    line-height: 1.6;
    background: var(--bg-dark);    
    overscroll-behavior-y: none;
}
button {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    background: none;
    border: 0;
    border-radius: 0;
}

/* ==========================================================================
   2. 오프닝 및 글로벌 고정 UI 컴포넌트
   ========================================================================== */
/* 로딩 스크린 */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-dark);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10002;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95);
}

.loader {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.loader-circle {
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    animation: loaderBounce 1.4s infinite ease-in-out both;
}

.loader-circle:nth-child(1) { animation-delay: -0.32s; }
.loader-circle:nth-child(2) { animation-delay: -0.16s; }

.loading-text {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0.2rem;
    color: white;
    opacity: 0;
    filter: blur(4px);
    transform: translateY(8px);
    animation: loadingFadeIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes loaderBounce {
    0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

@keyframes loadingFadeIn {
    to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

.slider-prev { left: 0; background-image: url(assets/images/ico-arrow-l.svg); opacity: .8; }
.slider-next { right: 0; background-image: url(assets/images/ico-arrow-r.svg); opacity: .8; }

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #0966c5, #009cf8);
    z-index: 10001;
    transition: width 0.1s ease;
}

.top-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 1.5rem 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;    
}

.header-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    pointer-events: auto;
}

.header-logo img {
    height: 38px;
    width: auto;
    display: block;
}

.nav-container {
    display: flex;    
    align-items: center;
    max-width: 1140px;    
    padding: 1.2rem 2rem;
}

.nav-links {
    display: flex;
    gap: 3rem;
}

.nav-item {
    position: relative;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 8px 0;
    transition: color 0.3s ease;
}

.nav-item:hover { color: #ffffff; }
.nav-item.active { color: var(--text-pale); font-weight: 700; }

.nav-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #5e53eb, #009cf8);
    transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1), left 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.nav-item.active::after { width: 100%; left: 0; }

/* ==========================================================================
   3. 풀스크린 Sticky 스티키 고정 프레임 구조
   ========================================================================== */
.section {
    position: sticky;
    top: 0;
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    perspective: 1200px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    isolation: isolate;
}

#hero { z-index: 1; }
#brand-film { z-index: 2; }
#history { z-index: 3; }
#events { z-index: 4; }

/* [변경] 인사이드는 Sticky 락에서 완전 제외시켜 일반 페이지처럼 길어지게 설계 */
.normal-scroll-section {
    position: relative;
    display: block;
    width: 100%;
    height: auto; /* 내용물이 추가됨에 따라 유연하게 확장 */
    min-height: 100vh;
    overflow: visible;
    background: var(--bg-white);
    padding-top: 12rem;
    padding-bottom: 8rem;
    z-index: 5;
}

.content-wrapper {
    max-width: 1140px;
    margin: 0 auto;
    padding: 6rem 2rem;
    width: 100%;
    position: relative;
    z-index: 2;
}

.mbn-section-header {
    text-align: center;
    margin-bottom: 3.5rem;
}

.section-en {
    font-size: clamp(1.5rem, 1.6vw, 1.8rem);
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    color: rgba(226, 232, 240, 0.6);
}

.section-title {
    word-break: keep-all;
    font-size: clamp(3.2rem, 3.8vw, 4.6rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.26;    
    color: var(--text-pale);   
}

.mbn-section-header, 
.history-panel, 
.event-slider, 
.insight-card, 
.brand-film-player {
    opacity: 0;
}

.enter-pop {
    animation: fadeInUp 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   4. INTRO (#hero) 인트로 및 인터랙션 모자이크 스크룹 (슬라이딩 핏 적용)
   ========================================================================== */
.hero-section {
    background: url('assets/images/bg-intro.png') no-repeat center center / cover;
    color: var(--text-pale);
    position: relative;
    overflow: hidden;
}

.hero-floor {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;    
    pointer-events: none;
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-section.hero-split .hero-floor {
    opacity: 1;
    z-index: 2;
}

.hero-mosaic {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 4px; 
    padding: 4px;
    background: #080d18;
    z-index: 1;
    opacity: 1;
    transition: opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1), filter 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.hero-mosaic::after {
    content: '';
    position: absolute;
    inset: 0;    
    background-image: radial-gradient(circle at 50% 40%, rgba(10, 12, 16, 0.2) 0%, rgba(10, 12, 16, 0.9) 100%);
    z-index: 10;
}

.hero-section.hero-split .hero-mosaic {    
    opacity: 0.2; 
    filter: grayscale(100%) blur(5px); 
}

.hero-mosaic-cell {
    position: relative;
    overflow: hidden;
    background: #0f172a;
    will-change: transform, opacity;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);

    /* 2. 뒷면 잔상 제거 및 렌더링 안정화 */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    
    /* 3. 이미지 왜곡 방지 및 부드러운 픽셀 보간 */
    image-rendering: -webkit-optimize-contrast;
}
.hero-mosaic-cell.active {  
    transform: scale(1.05) translateZ(0); 
    opacity: 1;
}   

.hero-mosaic.mosaic-active .hero-mosaic-cell {
    animation: trendySlotIn 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(var(--i) * 0.09s); 
}

.hero-mosaic-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transform: scale(1.05);
    filter: brightness(0.7);
}

.hero-mosaic.mosaic-active .hero-mosaic-cell img {
    animation: mosaicSlotIn 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: calc(var(--i) * 0.12s);
}

@keyframes trendySlotIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes mosaicSlotIn {
    from { opacity: 0; transform: scale(1.05); filter: brightness(0.7); }
    to { opacity: 1; transform: scale(1); filter: brightness(1); }
}

.cell-mo-only {
    display: none !important;
}

.hero-stage {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr 0fr;
    align-items: center;
    width: 100%;
    max-width: 1800px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 6rem 8% 5rem;
    transition: grid-template-columns 1.3s cubic-bezier(0.25, 1, 0.5, 1), gap 1.3s cubic-bezier(0.25, 1, 0.5, 1), padding 1.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.hero-section.hero-split .hero-stage {
    grid-template-columns: minmax(280px, 2fr) minmax(0, 3fr);
    gap: 4rem;    
}

.hero-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    position: absolute; 
    top: 50%;
    left: 50%;    
    translate: -50% -50%; 
    width: 100%;
    max-width: 1000px;
    z-index: 3;
    transition: left 1.3s cubic-bezier(0.25, 1, 0.5, 1), translate 1.3s cubic-bezier(0.25, 1, 0.5, 1);   
    opacity: 0;    
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.hero-section.hero-split .hero-content {
    left: 10%; 
    translate: 0 -50%; 
}

.hero-content.first-load-in {
    /* 기존 translateY 대신 3D 레이어 가속(translate3d)을 받는 고성능 키프레임 호출 */
    animation: heroFirstFadeInSafari 3s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
}

/* [해결] translate 속성과 충돌하지 않도록 온전한 3D 가속(translate3d)만 독립적으로 처리하는 고정 프레임 키프레임 */
@keyframes heroFirstFadeInSafari {
    from {
        opacity: 0;
        transform: translate3d(0, 25px, 0); /* 정렬용 translate와 레이어 분리 */
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);    /* 부드러운 60fps+ 연산 완료 */
    }
}

.hero-symbol { 
    width: 15vw;
    max-width: 248px;
    aspect-ratio: 1 / 1;
}
.hero-symbol img { 
    width: 100%; 
    height: auto;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.4)) 
            drop-shadow(0 15px 50px rgba(0, 0, 0, 0.25));
}
.hero-slogan { 
    font-size: clamp(1.8rem, 2.2vw, 3rem); 
    color: rgba(226, 232, 240, 0.75); 
    margin-bottom: 1.25rem; 
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 
                 0 10px 40px rgba(0, 0, 0, 0.25);
}
.hero-brand { 
    font-size: clamp(3.2rem, 3.8vw, 5rem); 
    font-weight: 700; 
    color: var(--text-pale); 
    line-height: 1.15; 
    text-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), 
                 0 15px 60px rgba(0, 0, 0, 0.35);
}
.mo { display: none; }

#particles-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    transition: opacity 0.8s ease;
}
.hero-section.hero-split #particles-canvas { opacity: 0.25; }

.hero-slider-wrap {
    grid-column: 2;
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-section.hero-split .hero-slider-wrap {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.9s ease 0.65s, transform 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.65s;
}

.hero-slider {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    pointer-events: none;
}
.hero-section.hero-split .hero-slider { pointer-events: auto; }

.hero-slider-viewport {
    flex: 1;
    overflow: hidden;
    border-radius: 4px;                          
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55);  
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);  
    position: relative;
    aspect-ratio: 16 / 10;
}

.hero-slider-track {
    display: block; 
    width: 100%;
    height: 100%;
    position: relative;
}

.hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s;
    z-index: 0;
}

.hero-slide.active { opacity: 1; visibility: visible; z-index: 1; }

.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.05);
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}
.hero-slide.active img { transform: scale(1); }

.hero-slider-btn {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    width: 60px;
    height: 60px;        
    background-repeat: no-repeat;
    background-position: center;    
    cursor: pointer;    
    visibility: hidden;
    z-index: 50;
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), visibility 0s linear 0.6s, background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.hero-slider-btn.slider-prev:hover { transform: translateY(-50%) translateX(-3px); }
.hero-slider-btn.slider-next:hover { transform: translateY(-50%) translateX(3px); }

.hero-section.hero-split .hero-slider-btn {
    opacity: .8;
    visibility: visible;
    transition-delay: 0s, 0s; 
}

/* ==========================================================================
   5. 하단 서브 섹션 공통 100% Pure CSS 패럴랙스 우주 배경막 
   ========================================================================== */
.brand-film-section,
.history-section,
.events-section,
.insight-section {    
    color: var(--text-pale);
    min-height: 100vh;  /* fallback */
    min-height: calc(var(--vh, 1vh) * 100); /* [해결] 100lvh 기반 정적 높이 적용 */
}

.section:not(#hero) {    
    background-image:
        radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.5) 0, transparent 3px),
        radial-gradient(circle at 75% 45%, rgba(255, 255, 255, 0.4) 0, transparent 2px),
        radial-gradient(circle at 15% 70%, rgba(255, 255, 255, 0.3) 0, transparent 2.5px),
        radial-gradient(circle at 85% 85%, rgba(197, 160, 89, 0.5) 0, transparent 4px),
        radial-gradient(circle at 30% 35%, rgba(0, 137, 255, 0.3) 5%, transparent 50%),
        radial-gradient(circle at 70% 65%, rgba(88, 24, 168, 0.4) 5%, transparent 50%),
        linear-gradient(to bottom, #000000, #000000);
    background-blend-mode: screen;    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;       
    background-attachment: fixed;
}

.brand-film-section .content-wrapper,
.insight-section .content-wrapper {
    padding: 0 5% 0 5%;
    max-width: 1200px;
}

.brand-film-player {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: calc(var(--vh, 1vh) * 7) auto 0;    
    aspect-ratio: 16 / 9;
    max-height: calc(calc(var(--vh, 1vh) * 100) - 17rem); /* vh 오차 방지 */
    background: #000;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 
        0 30px 60px -15px rgba(0, 0, 0, 0.95),
        0 0 40px -5px rgba(48, 93, 225, 0.15);
}

.brand-film-player video {
    width: 100%;
    height: 100%;
    display: block;    
    object-fit: cover;    
    vertical-align: bottom;
}

/* ==========================================================================
   6. HISTORY 연혁 가로-세로 락킹 슬라이더 구역
   ========================================================================== */
.history-section {
    height: calc(var(--vh, 1vh) * 100);      /* height 고정 */
    min-height: calc(var(--vh, 1vh) * 100);  /* min-height 동기화 */
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
}

.history-inner {
    position: relative;
    z-index: 2;
    width: 96vw;
    max-width: 1500px;
    height: 100%;
    margin: 0 auto;
    padding: calc(var(--vh, 1vh) * 15) 5% calc(var(--vh, 1vh) * 10) 5%; /* padding 흔들림 제어 */
    display: flex;
    flex-direction: column;
}

.history-slide-viewport {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
        to bottom, 
        transparent 0%, 
        black 10%, 
        black 100%, 
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom, 
        transparent 0%, 
        black 10%, 
        black 100%, 
        transparent 100%
    );
}

.history-slide-track {
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.history-panel {
    display: grid;
    grid-template-columns: 80% 1fr;
    gap: 0;
    align-items: center;
    flex: 0 0 100%;
    height: 100%;
    min-height: 0;    
}

.history-panel-img {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    aspect-ratio: 1;
    width: 100%;
    max-height: min(calc(var(--vh, 1vh) * 60), 620px); /* 오차 제거 */
    padding: calc(var(--vh, 1vh) * 6) 4rem;             /* 오차 제거 */
    overflow: hidden;    
    -webkit-mask-image: linear-gradient(to right, black 30%, transparent 100%);
    mask-image: linear-gradient(to right, black 30%, transparent 100%);
    filter: drop-shadow(5px 12px 15px rgba(0, 0, 0, 0.85));
}

.history-panel-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.history-panel-text { 
    position: relative;
    margin-left: -20%;
    z-index: 1;
}

.history-subtitle {
    display: none;
    font-size: clamp(1.6rem, 1.7vw, 1.8rem);
    color: rgba(226, 232, 240, 0.8);    
}

.history-era {
    font-size: clamp(3rem, 3.6vw, 4.4rem);
    font-weight: 700;    
    margin-bottom: 1.5rem;
}

.history-list { list-style: none; }
.history-list li {
    font-size: clamp(1.5rem, 1.6vw, 1.7rem);
    line-height: 1.85;
    padding: 0.1rem 0;
}
.history-list li em {
    color: var(--text-pale);
    font-style: normal;
    font-weight: 700;
    margin-right: 0.65rem;
}

.history-pagination {
    display: flex;
    justify-content: center;
    gap: 0.55rem;
    margin-top: 1.25rem;
    flex-shrink: 0;
}

.history-pagination-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(226, 232, 240, 0.35);
    cursor: pointer;
    transition: transform 0.25s ease, background 0.25s ease;
}
.history-pagination-dot.active {
    background: var(--bg-white);
    transform: scale(1.25);
}

/* ==========================================================================
   7. FORUM & EVENTS 포럼 슬라이더 리스트 구역
   ========================================================================= */
.events-section .content-wrapper {
    width: 96vw;
    max-width: 1500px;
    padding: 0 4rem;
}

.events-section .event-slider {
    display: flex;
    align-items: center;
    margin-top: 2rem;
    gap: 2rem;
    width: 100%;
    height: calc(var(--vh, 1vh) * 50); /* 고정 높이 적용 */
}

.events-section .event-track-wrapper {
    flex: 1;
    padding: 2rem 0;
    overflow: hidden;
}

.events-section .event-track {
    display: flex;
    gap: 2rem;
}

.events-section .event-card {
    width: calc(33.333% - 1.333rem);    
    flex-shrink: 0;
    text-align: center;    
    box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.85);    
}

.events-section .event-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px;
    display: block;    
}

.events-section .event-card figcaption {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.events-section .slider-btn {
    width: 60px;
    height: 60px;                  
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), visibility 0s linear 0.6s, background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;    
}

.events-section .event-prev:hover { transform: translateX(-3px); }
.events-section .event-next:hover { transform: translateX(3px); }

.btn-more {
    display: block;
    width: 150px;
    margin: 3rem auto;
    padding: 10px 19px;
    text-align: center;
    font-size: 1.6rem;
    color: rgb(255 255 255 / 75%);
    border: 1px solid rgb(255 255 255 / 30%);
    border-radius: 30px;
    text-decoration: none;    
    transition: color 0.25s ease;
    opacity: 0;
}
.btn-more:hover { color: var(--bg-white); }

/* ==========================================================================
   8. SPECIAL INSIGHT 뉴스기사 및 푸터 구조
   ========================================================================== */
.insight-section .section-en { 
    color: rgb(0 0 0 / 60%);
}
.insight-section .section-title { 
    color: var(--text-dark);
}
.insight-grid {
    display: flex;
    flex-direction: column;    
    padding: 2vh 0 0;
}
.insight-card {    
    position: relative;
    margin-bottom: 1.5rem;        
    background: var(--bg-white);
    overflow: hidden;    
    transition: box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1); 
}

.insight-card:hover {             
    box-shadow: 0 24px 48px rgba(8, 13, 24, 0.08), 
                0 6px 16px rgba(48, 93, 225, 0.04);
}


.insight-card:last-child { 
    margin-bottom: 0;    
}

.insight-card a { 
    display: flex;
    flex-direction: row;
    align-items: stretch;
    text-decoration: none;
    color: inherit;   
}

/* [추가] 초기 숨김 상태의 확장 뉴스 카드 스타일링 및 부드러운 전개 */
.insight-card.data-more-card {
    display: none;
    opacity: 0;
    transform: translateY(30px);
}

.insight-card.data-more-card.is-visible {
    display: block;
    animation: insightCardFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes insightCardFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.insight-thumb {
    flex: 0 0 234px;
    aspect-ratio: 16 / 10;     
    background: #2a2a2a;
    overflow: hidden;
}

.insight-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 110px;
    object-fit: cover;    
}

.insight-body {
    flex: 1;
    min-width: 0;    
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
    border: 1px solid #eee; 
    border-right: none;
    transition: border-color 0.45s ease;
}

.insight-body h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: .5rem;
    font-size: 2rem;    
    color: var(--text-dark);
    overflow: hidden;    
}

.insight-body p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    line-height: 1.6;
    color: #707070;
    overflow: hidden;
}

.insight-body time { font-size: 1.4rem; color: #707070; }

.insight-more-btn {    
    border: 1px solid #ddd;    
    color: #555;
    cursor: pointer;
}
.insight-more-btn:hover { color: var(--text-dark); }

.footer {
    background: #141414;
    padding: 5rem 2rem;
    text-align: center;
    position: relative;
    width: 100%;
    z-index: 6;    
    min-height: auto; 
}

.footer-copy { 
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.5);
}

#footer {
    width: 100%;
    scroll-snap-align: end;
}

/* ==========================================================================
   9. RESPONSIVE MEDIA QUERY
   ========================================================================== */

@media (max-width: 1280px) {     
    .hero-section.hero-split .hero-content { 
        left: 0;
    }
}

@media (max-width: 768px) {
    html { scroll-snap-type: none; }   
    .top-header { padding: 1rem 1.5rem; }
    .header-logo img { height: 35px; }
    .nav-container { display: none; }
    .content-wrapper { padding: 4rem 1.5rem; }
    .nav-links { gap: 1rem; font-size: 0.85rem; }
    .section-en { 
        letter-spacing: 0.1em;
    }
    .btn-more { 
        margin: 2rem auto;
    }

    .hero-mosaic { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(5, 1fr); }        
    .cell-mo-only {
        display: block !important;
    }
    .hero-stage { 
        display: block;
        padding: 6rem 1.5rem 4rem;

    }
    .mo { display: block; }
    .hero-symbol { width: 160px;}    
    .hero-slogan { margin-bottom: 1rem; }
    .hero-content {     
        position: unset;           
        gap: 2rem;        
        justify-content: center;
        flex-direction: column;           
        text-align: center;    
        max-width: 100%;
        translate: unset;
        margin-bottom: 2rem;
    }    
    .hero-section.hero-split .hero-content {
        translate: unset;
    }
    

    .hero-slider-wrap, .hero-section.hero-split .hero-slider-wrap { grid-column: 1; width: 100%; max-width: 100%; }
    .hero-slider-btn { display: none; }    

    .mbn-section-header { 
        display: flex;
        flex-direction: column;
        justify-content: center;        
        margin-bottom: 2.5rem;
    }

    /* BRAND FILM 극장식 시네마 레일 */
    .brand-film-section { 
        display: block;
        height: 100%;
        min-height: 100vh;  /* fallback */
        min-height: calc(var(--vh, 1vh) * 100); /* [해결] 모바일에서도 일관된 vh 사용 */
        padding: 8rem 0 2rem;
    }

    .history-section .mbn-section-header { 
        height: 22vh;        
    }

    .brand-film-player { 
        max-height: calc(100vh - 14rem); 
        margin: calc(var(--vh, 1vh) * 10) auto 0;
    }
    .brand-film-section .content-wrapper, .insight-section .content-wrapper { padding: 0 2rem; }
    

    .history-inner { padding: 8rem 2rem 2rem; width: 100%; }
    .history-slide-viewport { 
        flex: unset; 
        
        /* -webkit- 접두사는 구형 크롬, 사파리 브라우저 호환성을 위해 필요합니다 */
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 7%, black 100%, transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0%, black 7%, black 100%, transparent 100%); 
    }
    .history-panel { grid-template-columns: 1fr; gap: 1.25rem; align-content: flex-start; }    
    .history-panel-img { 
        max-height: calc(var(--vh, 1vh) * 40); /* 모바일 높이 고정 */
        padding: calc(var(--vh, 1vh) * 6) 0;  /* 모바일 패딩 고정 */
        mask-image: linear-gradient(to right, black -30%, transparent 100%); 
    }
    .history-panel-text { margin-left: auto; margin-top: -160px; }
    .history-era { margin-bottom: 1rem; }

    

    .events-section .content-wrapper { width: 100%; padding: 0 2rem; }
    .events-section .event-track-wrapper { 
        overflow: visible;
    }
    .events-section .event-track {
        gap: 1.5rem; 
    }
    .events-section .event-card { 
        width: 84% !important; 
        min-width: 84% !important; 
    }
    .events-section .slider-btn { display: none; }

    .insight-section { padding-top: 8rem; padding-bottom: 10rem;}
    .insight-grid { padding: 0; }
    .insight-card a { flex-direction: column; }
    .insight-thumb { order: 1; width: 100%; }
    .insight-body { order: 2; padding: 1rem 1.5rem; border-right: 1px solid #eeee; }
    .insight-body p { display: none; }

    .normal-scroll-section {
        padding-top: 8rem;
        padding-bottom: 6rem;
    }
    .insight-card.data-more-card.is-visible {
        display: flex;
    }

    .footer { padding: 3rem 2rem; }
    .footer-copy { font-size: 1.3rem; }
}