/* =================================================================
   LIVE BUSAN - FINAL CLEAN STYLE
   Updated: Organized Structure & Mobile Video Fix
================================================================= */

/* --- [1] 기본 초기화 --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    font-family: 'Pretendard', sans-serif; 
    overflow-x: hidden !important; /* ★ 가로 스크롤 아예 생성 금지 */
    width: 100%;
    background-color: #f4f4f4; 
    color: #333; 
}
a { text-decoration: none; color: inherit; }
li { list-style: none; }

/* --- [2] PC 기준 기본 패널 설정 --- */
html { scroll-snap-type: y proximity; } 
.panel {
    height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex; justify-content: center; align-items: center;
    position: relative; width: 100%; padding: 0 5%;
}

/* =========================================
   [긴급 수정] 프로젝트 섹션 높이 제한 해제
   - 사진이 많아져서 내용이 길어졌으므로 
     100vh(화면 1개 높이) 제한을 풀고 auto로 변경
========================================= */
.project-section {
    height: auto !important; /* 높이 제한 해제 (내용만큼 길어짐) */
    min-height: 100vh;       /* 최소한 화면 꽉 차게 */
    padding-top: 120px;      /* 상단 여백 확보 */
    padding-bottom: 120px;   /* 하단 여백 확보 */
}

/* [선택 사항] 스크롤이 너무 강제적으로 딱딱 붙는 느낌이 싫다면 
   html 태그의 설정을 mandatory -> proximity로 바꾸세요.
   (파일 맨 위 html 태그 찾아서 수정)
*/
html {
    scroll-snap-type: y mandatory; /* proximity -> mandatory 로 변경 */
}

/* --- [3] 네비게이션 & 메뉴 --- */
.navigation {
    position: fixed; top: 0; left: 0; width: 100%; height: 60px;
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 40px; z-index: 1000;
    background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(5px);
    border-bottom: 1px solid #eee;
}
.logo { font-weight: bold; font-size: 20px; color: #333; transition: color 0.3s ease; cursor: pointer; }
.logo:hover { color: #007bff; }
.menu-btn { cursor: pointer; width: 24px; height: 18px; display: flex; flex-direction: column; justify-content: space-between; }
.menu-btn span { display: block; width: 100%; height: 2px; background: #333; border-radius: 2px; transition: all 0.3s; }

/* 메뉴 서랍 스타일 */
.menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000; visibility: hidden; transition: visibility 0.3s; }
.menu-overlay.active { visibility: visible; }
.menu-backdrop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.3s; }
.menu-overlay.active .menu-backdrop { opacity: 1; }
.menu-drawer { position: absolute; top: 0; right: 0; width: 300px; height: 100%; background: white; padding: 50px 40px; transform: translateX(100%); transition: transform 0.3s; display: flex; flex-direction: column; }
.menu-overlay.active .menu-drawer { transform: translateX(0); }
.close-btn { align-self: flex-end; font-size: 24px; cursor: pointer; margin-bottom: 60px; }

/* 메뉴 리스트 & 포트폴리오 스타일 */
.menu-list li { margin-bottom: 25px; }
.menu-list li a { font-size: 1.1rem; font-weight: 600; color: #333; transition: color 0.2s; }
/* PC(769px 이상)에서만 마우스 올렸을 때 파랗게 변함 */
@media (min-width: 769px) {
    .menu-list li a:hover { 
        color: #007bff; 
    }
}

/* 모바일에서는 눌렀을 때(active)만 잠깐 파랗게 변함 */
.menu-list li a:active {
    color: #007bff;
}

.menu-divider { width: 100%; height: 1px; background-color: #e0e0e0; margin: 15px 0; }
.portfolio-link { color: #007bff !important; font-weight: 800 !important; transition: color 0.3s ease; }
.portfolio-link:hover { color: #D81B60 !important; }

/* 메뉴 하단 정보 */
.menu-footer-info { margin-top: auto; padding-top: 30px; border-top: 1px solid #eee; }
.menu-footer-info h4 { font-size: 1.2rem; font-weight: 800; margin-bottom: 20px; }
.sns-links { display: flex; flex-direction: column; gap: 15px; margin-bottom: 25px; }
.sns-row { display: flex; align-items: center; justify-content: space-between; }
.sns-name { font-size: 1rem; font-weight: 600; }
.sns-icons { display: flex; gap: 13px; }
/* SNS 아이콘 감싸는 링크 버튼 */
.sns-icons a { 
    display: inline-block;
    padding: 3px; /* 클릭 영역 확보 */
    cursor: pointer;
}

/* ★ 핵심: 실제 아이콘(i)에 천천히 바뀌는 효과를 부여 */
.sns-icons a i {
    font-size: 1.4rem; 
    color: #888; /* 기본 회색 */
    transition: color 0.4s ease; /* 0.4초 동안 부드럽게 색상 변경 */
}

/* 마우스를 올렸을 때(Hover) 아이콘 색상 변경 */

/* 1. 유튜브: 부드러운 레드 */
.sns-icons a:hover .fa-youtube {
    color: #ff4b4b; 
}

/* 2. 인스타그램: 부드러운 핑크 */
.sns-icons a:hover .fa-instagram {
    color: #e4405f;
}
.email { font-size: 0.85rem; color: #999; margin-top: 10px; }

/* --- [4] PAGE 1: Hero Section --- */
.hero-section { 
    padding: 0; 
    width: 100%; /* 100vw 대신 100% 사용 권장 */
    height: 100vh; 
    display: flex; 
    overflow: hidden; /* ★ 자식 요소가 튀어나오면 잘라버림 */
    background-color: #000 !important;
}
/* --- [4] PAGE 1: Hero Section --- */
.hero-section { 
    display: flex; 
    width: 100%; 
    height: 100vh; 
    overflow: hidden;
    /* 틈새가 벌어져도 배경이 검정이라 티가 안 나게 보호 */
    background-color: #000 !important; 
}

.hero-col { 
    /* flex: 1 대신 개별 width 설정을 위해 해제 */
    height: 100%; 
    position: relative; 
    overflow: hidden; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    background: #000; 
}

/* ★ 비율 수동 조절 (33% / 34% / 33%) ★ */
/* 1. 왼쪽 기둥 (낭만) */
.hero-col:nth-child(1) { 
    width: 33%; 
}

/* 2. 가운데 기둥 (청춘) - 양옆보다 1% 더 넓게 설정 */
.hero-col:nth-child(2) { 
    width: 34%; 
    /* 미세하게 겹쳐서 빈틈을 물리적으로 가림 */
    margin-left: -1px; 
    margin-right: -1px; 
    z-index: 2; /* 양옆 기둥보다 위에 오도록 설정 */
}

/* 3. 오른쪽 기둥 (사랑) */
.hero-col:nth-child(3) { 
    width: 33%; 
}

/* 내부 비디오 및 텍스트 설정 (기존 유지) */
.hero-col video, .hero-col img { 
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    object-fit: cover; 
    z-index: 1; 
}

.overlay { 
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    background: rgba(0, 0, 0, 0.5); 
    z-index: 2; 
    transition: background 0.5s ease; 
}

.hero-col:hover .overlay { background: rgba(0, 0, 0, 0.1); }

.hero-text { 
    position: relative; 
    z-index: 10; 
    color: white; 
    font-size: 3.5rem; 
    font-weight: 700; 
    letter-spacing: 5px; 
    text-shadow: 0 5px 15px rgba(0,0,0,0.3); 
    pointer-events: none; 
}
/* --- [7] PAGE 4 & 5: Channel Section --- */
.channel-section { background: #f9f9f9; }
.channel-box { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 1100px; gap: 80px; margin: 0 auto; }
/* ... 기존 코드들 ... */
.video-note { font-size: 0.85rem; color: #999; margin-top: 8px; font-weight: 400; }

/* ▼▼▼ [여기 추가] 채고기록(#ch2)만 PC에서 좌우 반전시키기 ▼▼▼ */
#ch2-wrapper {
    flex-direction: row-reverse; 
}
/* 텍스트를 오른쪽 정렬하고 싶다면 아래 주석 해제 (선택사항) */
/* #ch2-wrapper .channel-text { text-align: right; } */

/* --- [5] PAGE 2: History Section --- */
.history-section { background: #fff !important; flex-direction: column; padding: 0; overflow: hidden; border: none; }
.history-wrapper { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0; background: #fff; }
.history-gallery-track { 
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important;
    width: 100%; gap: 20px; padding: 20px 20px 30px 20px; background: #fff;
    -ms-overflow-style: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; 
}
.history-gallery-track::-webkit-scrollbar { display: none; }
.history-item { 
    flex: 0 0 auto !important; width: 260px !important; height: 380px !important;
    border-radius: 15px; overflow: hidden; background: #fff; margin: 0; 
}
.history-item img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(20%); transition: filter 0.3s, transform 0.3s; }

@media (min-width: 769px) {
    .history-item:hover { transform: translateY(-10px); }
    .history-item:hover img { filter: grayscale(0%); transform: scale(1.05); }
}
.history-text-compact { text-align: center; z-index: 2; padding: 0 20px; margin-top: 50px; }
.compact-desc { font-size: 1.1rem; color: #444; line-height: 1.6; margin-bottom: 20px; word-break: keep-all; }
.compact-title { font-size: 2.5rem; font-weight: 800; color: #007bff; letter-spacing: 0.1em; margin: 0; }

/* --- [6] PAGE 3: About Section --- */
.about-section { overflow: hidden; position: relative; cursor: pointer; }
.about-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: #000; }
.bg-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 2.5s ease-in-out; }
.bg-img.active { opacity: 1; z-index: 1; }
.bg-img img { width: 100%; height: 100%; object-fit: cover; }
.white-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 2; pointer-events: none; }
.about-content { position: relative; z-index: 3; text-align: center; max-width: 900px; width: 90%; pointer-events: none; }
.about-sub { font-size: 1.5rem; font-weight: bold; color: #333; margin-bottom: 20px; }
.about-main { font-size: 3.5rem; font-weight: 900; color: #007bff; margin: 25px 0; line-height: 1.3; word-break: keep-all; }
.about-desc { font-size: 1.2rem; color: #333; line-height: 1.8; font-weight: 700; }

/* --- [7] PAGE 4 & 5: Channel Section --- */
.channel-section { background: #f9f9f9; }
.channel-box { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 1100px; gap: 80px; margin: 0 auto; }
.channel-img { flex: 1; max-width: 500px; position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.15); }
.channel-img img { width: 100%; display: block; transition: transform 0.5s; }
.channel-img:hover img { transform: scale(1.05); }
.channel-tag { position: absolute; bottom: 30px; left: 30px; background: rgba(0,0,0,0.7); color: white; padding: 10px 20px; border-radius: 30px; font-size: 0.9rem; font-weight: bold; }
.channel-text { flex: 1; text-align: left; max-width: 500px; }
.ch-title { font-size: 3rem; font-weight: 900; color: #007bff; margin-bottom: 15px; }
.ch-sub { font-size: 1.3rem; font-weight: bold; margin-bottom: 25px; color: #222; }
.ch-desc { font-size: 1rem; color: #555; line-height: 1.8; margin-bottom: 30px; }
.youtube-container { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 15px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); margin-top: 30px; }
.youtube-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.video-note { font-size: 0.85rem; color: #999; margin-top: 8px; font-weight: 400; }

/* --- [8] PAGE 6: Story Section --- */
.story-section-split { background: white; padding: 100px 5%; height: auto !important; min-height: 100vh; display: flex; justify-content: center; align-items: center; }
.story-split-container { width: 100%; max-width: 1300px; margin: 0 auto; display: flex; align-items: center; gap: 80px; }
.story-text-side { flex: 1; text-align: left; padding-left: 20px; }
.story-subtitle-small { font-size: 1.1rem; font-weight: 700; color: #007bff; margin-bottom: 20px; letter-spacing: 1px; }
.story-title-large { font-size: 3.2rem; font-weight: 900; color: #222; line-height: 1.25; margin-bottom: 25px; letter-spacing: -1px; }
.story-subtitle-main { font-size: 1.3rem; font-weight: 700; color: #444; margin-bottom: 40px; display: block; }
.story-desc-block p { font-size: 1.1rem; color: #555; line-height: 1.8; font-weight: 500; word-break: keep-all; margin-bottom: 20px; }
.story-image-side { flex: 1.2; height: 70vh; max-height: 750px; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.15); position: relative; cursor: pointer; background-color: #000; }
.slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; z-index: 0; transition: opacity 1.5s ease-in-out; }
.slide.active { opacity: 1; z-index: 1; }

/* --- [9] PAGE 7: Project Section (소프트 다크 모드) --- */
.project-section { 
    height: auto; 
    min-height: 100vh; 
    padding: 100px 5%; 
    background: #111 !important; /* ★ 완전 블랙(#111) -> 차콜(#222)로 변경 */
    display: block; 
}
.project-container { max-width: 1200px; margin: 0 auto; text-align: center; }

/* 메인 제목: 완전 흰색보다는 살짝 부드러운 흰색 */
.project-main-title { 
    font-size: 2.5rem; 
    font-weight: 900; 
    margin-bottom: 50px; 
    color: #f0f0f0 !important; /* 부드러운 화이트 */
    letter-spacing: -1px;
}

/* 그룹 제목: 차분한 회색 */
.group-title { 
    font-size: 2rem; 
    font-weight: 800; 
    margin-bottom: 30px; 
    color: #ccc !important; /* 연한 회색 */
}

/* 구분선 */
.project-divider { 
    border: 0; 
    height: 1px; 
    background: #444 !important; /* 배경보다 살짝 밝은 선 */
    margin: 60px 0; 
    width: 100%; 
}

/* 텍스트 카드(혹시 쓰신다면) 배경도 어둡게 */
.text-card { 
    background: #222 !important; /* 카드 배경 */
    box-shadow: none !important;
    border: 1px solid #333 !important;
}
.text-card h4 { color: #fff !important; }
.text-card p { color: #aaa !important; }
.plus-icon { color: #555 !important; }

/* =========================================
   [NEW] Project Section - 이미지 카드 스타일 (Plan A-Z st)
========================================= */

/* 그리드 레이아웃 */
.img-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* PC: 3열 */
    gap: 20px;
    margin-bottom: 30px;
}

/* 카드 기본 스타일 */
.img-card {
    position: relative;
    height: 300px; /* 카드 높이 */
    border-radius: 20px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: #333; /* 이미지 없을 때 기본색 */
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 카드 호버 효과 (살짝 떠오름) */
.img-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}

/* 검은색 오버레이 (글자 잘 보이게) */
.card-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4); /* 평소엔 은은하게 어둡게 */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* 글자를 아래로 */
    padding: 30px;
    transition: background 0.3s ease;
    text-align: left;
}

.img-card:hover .card-overlay {
    background: rgba(0, 0, 0, 0.7); /* 호버하면 더 어둡게 (집중) */
}

/* 텍스트 스타일 */
.card-overlay h4 {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.card-overlay p {
    color: #ddd;
    font-size: 1rem;
    line-height: 1.5;
    opacity: 0.9;
    font-weight: 400;
    /* 긴 글자 말줄임 처리 (선택사항) */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =========================================
   [Mobile] 모바일 반응형 (화면 줄어들면 1열로)
========================================= */
@media (max-width: 768px) {
/* [Mobile] Project Section: 와이드 슬림 스타일 (한 화면 3개 보기) */
    .img-card-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important; /* ★ 간격을 좁혀서(40px->15px) 오밀조밀하게 모음 */
        padding-bottom: 30px !important;
    }

    .img-card {
        width: 100% !important;
        height: 160px !important; /* ★ 높이를 확 줄임 (320px -> 160px) */
        box-shadow: 0 5px 15px rgba(0,0,0,0.6) !important; 
        margin-bottom: 0 !important;
    }
    
    /* 카드 높이가 줄어든 만큼, 글자도 작고 깔끔하게 조정 */
    .card-overlay {
        background: linear-gradient(to top, rgba(0,0,0,0.8), transparent) !important;
        padding: 20px !important; /* 패딩 축소 */
        justify-content: flex-end !important;
    }
    
    .card-overlay h4 { 
        font-size: 1.2rem !important; /* 제목 크기 축소 (1.5 -> 1.2) */
        margin-bottom: 5px !important; 
    }
        
    .card-overlay p { 
        font-size: 0.85rem !important; 
        line-height: 1.4 !important; /* 줄간격 살짝 여유 있게 */
        opacity: 0.9 !important;
    }
}

/* --- [10] PAGE 8: Vision & Footer --- */
.vision-section { background: white; text-align: center; display: flex; flex-direction: column; justify-content: space-between; padding: 0 !important; height: 100vh; }
.vision-inner-content { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 100px 5%; width: 100%; }
.vision-title { font-size: 2.5rem; font-weight: 900; color: #007bff; margin-bottom: 60px; line-height: 1.3; }
.vision-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; width: 100%; max-width: 1200px; }
.vision-card { background: #f8f9fa; padding: 50px 30px; border-radius: 20px; transition: transform 0.3s, box-shadow 0.3s; border: 1px solid #eee; }
.vision-card:hover { transform: translateY(-10px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); background: white; border-color: #007bff; }
.vision-num { display: block; font-size: 1.5rem; font-weight: 900; color: #ddd; margin-bottom: 20px; }
.vision-card:hover .vision-num { color: #007bff; }
.vision-name { font-size: 1.5rem; font-weight: bold; margin-bottom: 15px; color: #333; }
.vision-desc { font-size: 1rem; color: #666; line-height: 1.6; }
.final-footer-center { width: 100%; background: #1a1a1a; color: #ccc; padding: 40px 0; margin-top: auto; text-align: center; }
.footer-content-center { max-width: 1200px; margin: 0 auto; padding: 0 5%; display: flex; flex-direction: column; align-items: center; gap: 15px; }
.footer-logo-center { font-size: 1.5rem; font-weight: 900; color: #fff; letter-spacing: 1px; }
.copyright-center { font-size: 0.85rem; color: #888; }

/* =========================================
   [CSS 수정] 스크롤 유도 아이콘 (데스커 워케이션 스타일)
   - 위치: 화면 하단 중앙 정렬 (left 50%, translateX -50%)
   - 애니메이션: 부드럽게 둥둥 떠다니는(Float) 효과 적용
========================================= */

/* 부모 섹션에 기준점 설정 (필수!) */
.hero-section {
    position: relative !important; 
}

.scroll-indicator {
    position: absolute;
    bottom: 30px; /* 바닥에서 적당히 띄움 */
    left: 50%;
    transform: translateX(-50%); /* ★ 정가운데 정렬 핵심 코드 */
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    opacity: 0.8;
    
    /* 데스커처럼 부드러운 움직임 (2초간 반복) */
    animation: gentle-float 2.5s infinite ease-in-out; 
    pointer-events: none;
    cursor: default;
}

.scroll-text {
    font-size: 0.75rem; /* 글자는 작고 깔끔하게 */
    font-weight: 400;
    margin-bottom: 6px;
    letter-spacing: 1px;
    text-transform: lowercase; /* 소문자로 세련되게 */
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    font-family: 'Pretendard', sans-serif; /* 폰트 통일 */
}

.scroll-indicator i {
    font-size: 1rem; /* 화살표 크기 적당히 */
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* ★ 우아한 둥실둥실 애니메이션 (Bounce 대신 Float) ★ */
@keyframes gentle-float {
    0% {
        transform: translateX(-50%) translateY(0);
        opacity: 0.7;
    }
    50% {
        transform: translateX(-50%) translateY(8px); /* 살짝 아래로 */
        opacity: 1; /* 선명해짐 */
    }
    100% {
        transform: translateX(-50%) translateY(0);
        opacity: 0.7;
    }
}

/* =================================================================
   [★ FINAL COMPLETE FIX - Ver 20.0]
   1. [Story 사진 해결] 
      - 사진이 안 뜨던 이유(Opacity 누락)를 해결하기 위해 
        .slide와 .slide.active 스타일을 모바일 전용으로 강제 지정.
      - 높이 300px 고정, 사진은 order: 1로 텍스트보다 먼저 배치.
   2. [Story 폰트] 제목(1.5rem), 본문(0.95rem)으로 확실히 줄임.
   3. [전체 유지] 나머지 섹션(채널, 히어로 등) 디자인 100% 유지.
================================================================= */
@media (max-width: 768px) {
    /* [1] 기본 설정 */
    html, body { 
        overflow-y: auto !important; height: auto !important; 
        scroll-snap-type: none !important; 
        -webkit-text-size-adjust: none; text-size-adjust: none;
        overflow-x: hidden !important; 
    }
    .panel { 
        display: block !important; height: auto !important; min-height: auto !important;
        padding: 50px 20px !important; 
    }

    @media (max-width: 768px) {
    /* [수정] 모바일 히어로 섹션 전체 설정 */
    .hero-section { 
        display: flex !important; 
        flex-direction: column !important; /* 세로 배치 */
        height: 100vh !important; 
        padding: 60px 0 0 0 !important; 
        box-sizing: border-box !important;
        overflow: hidden !important;
        background: #000 !important; /* 배경을 블랙으로 메꿈 */
    }

    .hero-col { 
        width: 100% !important; /* 가로 꽉 채움 */
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #000;
    }

    /* ★ [핵심] 모바일 세로 비율 수동 조절 (33% / 34% / 33%) ★ */
    /* 1. 상단 (낭만) */
    .hero-col:nth-child(1) { 
        height: 33% !important; 
    }

    /* 2. 중단 (청춘) - 위아래 기둥을 1px씩 덮어서 선을 제거 */
    .hero-col:nth-child(2) { 
        height: 34% !important; 
        margin-top: -1px; 
        margin-bottom: -1px; 
        z-index: 2; /* 다른 기둥보다 위에 오도록 설정 */
    }

    /* 3. 하단 (사랑) */
    .hero-col:nth-child(3) { 
        height: 33% !important; 
    }

    /* 텍스트 크기 및 아이콘 위치 유지 */
    .hero-text { font-size: 2rem !important; }
    .scroll-indicator { bottom: 20px !important; }
}
    /* -----------------------------------------------------------
       [3] History & About 섹션
    ----------------------------------------------------------- */
    .history-section { padding: 50px 0 !important; }
    /* [Mobile & PC] 히스토리 트랙: 스크롤 기능 활성화 */
    .history-gallery-track { 
        display: flex !important; 
        flex-direction: row !important; 
        flex-wrap: nowrap !important; 
        
        /* ★ 핵심: 애니메이션 끄고, 스크롤을 허용해야 터치가 됨 */
        overflow-x: auto !important; 
        gap: 15px !important; 
        padding: 20px 20px 30px 20px; 
        background: #fff;
        
        /* 스크롤바 숨기기 (기능은 유지) */
        -ms-overflow-style: none; 
        scrollbar-width: none; 
    }
    .history-gallery-track::-webkit-scrollbar { 
        display: none; 
    }

    .history-item { 
        flex: 0 0 200px !important; 
        height: 300px !important; 
        /* ... 기존 스타일 유지 ... */
    }
    .history-item { flex: 0 0 200px !important; height: 300px !important; }
    .compact-title { font-size: 1.8rem !important; margin-top: 20px !important; }
    .compact-desc { font-size: 0.95rem !important; line-height: 1.6 !important; word-break: keep-all; }

    .about-section { display: flex !important; flex-direction: column; justify-content: center; align-items: center; min-height: 70vh !important; padding: 0 20px !important; }
    .about-bg .bg-img img { object-position: 50% 50% !important; }
    #about-mobile-group { width: 100% !important; margin: 0 auto !important; text-align: center !important; display: block !important; }
    #about-mobile-group .about-main { font-size: 1.5rem !important; line-height: 1.4 !important; margin: 20px 0 !important; color: #007bff !important; word-break: keep-all; }
    #about-mobile-group .about-sub { font-size: 1rem !important; margin-bottom: 10px !important; display: block !important; color: #333 !important; }
    #about-mobile-group .about-desc { font-size: 0.95rem !important; display: inline-block !important; color: #444 !important; }

    /* -----------------------------------------------------------
       [4] 채널 디자인 통합 (#ch1 & #ch2)
    ----------------------------------------------------------- */
    .channel-section { padding-top: 10px !important; padding-bottom: 10px !important; }
    #channel1 { margin-top: 60px !important; }

    #ch1-wrapper, #ch2-wrapper {
        display: block !important; position: relative !important; 
        margin-left: -20px !important; margin-right: -20px !important; width: calc(100% + 40px) !important;
        padding-top: 130px !important; padding-bottom: 30px !important; margin-bottom: 30px !important; 
        background: #fff !important; border-bottom: 1px solid #eee; 
    }

    #ch1-photo, #ch2-photo, #ch1-text-group, #ch2-text-group {
        position: static !important; display: block !important; overflow: visible !important;
    }
    
    #ch1-tag, #ch2-tag {
        position: absolute !important; top: 30px !important; left: 0 !important; width: 100% !important;
        text-align: center !important; color: #007bff !important; font-size: 1rem !important; font-weight: 800 !important;
        z-index: 50 !important; background: none !important; padding: 0 !important; margin: 0 !important;
    }

    #ch1-title, #ch2-title {
        display: block !important; position: absolute !important; top: 60px !important; left: 0 !important; width: 100% !important;
        text-align: center !important; color: #222 !important; font-size: 2rem !important; font-weight: 900 !important;
        z-index: 50 !important; margin: 0 !important; visibility: visible !important;
    }
    
    #ch1-photo, #ch2-photo {
        margin: 0 20px !important; height: 450px !important; z-index: 1;
    }
    #ch1-photo img, #ch2-photo img {
        width: 100% !important; height: 100% !important; object-fit: cover !important;
        border-radius: 25px !important; filter: brightness(0.7); box-shadow: 0 10px 25px rgba(0,0,0,0.15);
        transition: none !important; transform: none !important;
    }
    #ch1-photo:hover img, #ch2-photo:hover img { transform: none !important; }

    #ch1-text-group .ch-sub, #ch2-text-group .ch-sub {
        position: relative !important; z-index: 20 !important;
        margin-top: -200px !important; margin-bottom: 10px !important; padding: 0 40px !important; text-align: left !important;
        color: #FFD700 !important; font-size: 1.1rem !important; font-weight: 800 !important; text-shadow: 0 2px 5px rgba(0,0,0,0.8);
    }
    #ch1-text-group .ch-desc, #ch2-text-group .ch-desc { 
        position: relative !important; z-index: 20 !important; padding: 0 40px !important; text-align: left !important;
        color: #fff !important; font-size: 0.95rem !important; line-height: 1.6 !important; text-shadow: 0 2px 10px rgba(0,0,0,0.8); margin: 0 !important;
    }

    #ch1-video, #ch2-video {
        position: relative !important; z-index: 5 !important; margin-top: 150px !important; 
        width: auto !important; margin-left: 20px !important; margin-right: 20px !important;
        border-radius: 15px !important; box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    .video-note { margin-top: 20px !important; color: #888 !important; font-size: 0.85rem !important; text-align: center !important; display: block !important; width: 100% !important; }

    /* -----------------------------------------------------------
       [5] ★ Story 섹션 (사진 안 뜨는 문제 해결) ★
    ----------------------------------------------------------- */
    .story-section-split { padding: 50px 20px !important; height: auto !important; }
    .story-split-container { display: flex !important; flex-direction: column !important; gap: 30px !important; }
    
    /* 1. 사진 박스: 사진이 위치할 기준점 */
    .story-image-side { 
        display: block !important; 
        position: relative !important; /* 기준점 */
        order: 1 !important; /* 사진이 1번 (위) */
        width: 100% !important; 
        height: 300px !important; /* 높이 고정 */
        margin: 0 !important; 
        border-radius: 20px !important; 
        overflow: hidden !important;
        background-color: #f0f0f0; /* 배경색 */
    }
    
    /* 2. 내부 슬라이드 이미지: 겹치기 설정 (여기가 핵심!) */
    .story-image-side .slide {
        position: absolute !important; 
        top: 0 !important; left: 0 !important;
        width: 100% !important; height: 100% !important;
        object-fit: cover !important;
        opacity: 0; /* 기본적으로 숨김 */
        transition: opacity 0.5s ease-in-out; /* 부드럽게 */
        z-index: 1;
    }

    /* 활성화된 슬라이드만 보이게 */
    .story-image-side .slide.active {
        opacity: 1 !important; 
        z-index: 2;
    }

    /* 3. 텍스트 박스 (하단) */
    .story-text-side { order: 2 !important; width: 100% !important; padding: 0 !important; text-align: left !important; }
    
    .story-subtitle-small { font-size: 0.9rem !important; margin-bottom: 10px !important; color: #007bff !important; }
    
    /* 제목 폰트 축소 */
    .story-title-large { 
        font-size: 1.5rem !important; /* 더 작게 */
        line-height: 1.35 !important; 
        margin-bottom: 20px !important;
        word-break: keep-all; 
        color: #222 !important;
    }
    .story-subtitle-main { font-size: 1rem !important; margin-bottom: 20px !important; color: #555 !important; font-weight: 700 !important; }
    .story-desc-block p { font-size: 0.95rem !important; line-height: 1.7 !important; word-break: keep-all; color: #444 !important; }

/* [모바일] 프로젝트 섹션 (다크 모드 글자색 적용) */
    .project-main-title { 
        font-size: 1.8rem !important; 
        color: #f0f0f0 !important; /* ★ 흰색 확인! */
        margin-bottom: 30px !important;
    }
    
    .group-title {
        font-size: 1.4rem !important; 
        color: #ccc !important; /* ★ 연회색 확인! */
        margin-bottom: 20px !important;
    }
    /* =========================================
   [Mobile Only] Vision 섹션: 여백 줄이기 + 위로 당김
========================================= */
@media (max-width: 768px) {

    /* 1. 전체 틀 설정 */
    .vision-section { 
        position: relative !important; 
        height: auto !important; 
        min-height: 100vh !important; 
        
        /* ★ [수정] 위쪽 여백을 80px -> 50px로 줄여서 위로 당김 */
        padding: 50px 20px 0 20px !important; 
        
        /* 푸터가 겹치지 않게 하단 공간 확보 */
        padding-bottom: 120px !important; 
        
        display: block !important; 
        background: #fff !important;
    }

    .vision-inner-content { 
        padding: 0 !important; 
        margin-bottom: 0 !important; 
    }

    /* 2. 제목 여백 최적화 */
    .vision-title { 
        text-align: center !important;
        /* ★ [수정] 제목과 카드 사이 간격을 40px -> 20px로 좁힘 */
        margin-bottom: 20px !important; 
        word-break: keep-all; 
    }

    /* "우리의 목표는" */
    .vision-top {
        display: block !important;
        font-size: 1rem !important;
        color: #333 !important;
        font-weight: 700 !important;
        margin-bottom: 5px !important; /* 간격 최소화 */
        letter-spacing: 1px !important;
    }

    /* "당신의 다음 챕터가..." */
    .vision-bottom {
        display: block !important;
        font-size: 1.6rem !important;
        line-height: 1.3 !important;
        color: #007bff !important;
        font-weight: 900 !important;
    }

    /* 3. 카드 그리드 (세로 정렬) */
    .vision-grid { 
        display: flex !important; 
        flex-direction: column !important; 
        gap: 15px !important; /* 카드끼리 간격도 살짝 좁힘 (20->15) */
    }
    
    .vision-card { 
        background: #f8f9fa !important; 
        padding: 30px 20px !important; /* 카드 내부 여백도 살짝 슬림하게 */
        border-radius: 20px !important; 
        text-align: center !important; 
        border: 1px solid #eee !important;
        display: block !important;
    }

    .vision-num { 
        display: block !important;
        font-size: 1.3rem !important; 
        font-weight: 900 !important;
        color: #ddd !important; 
        margin-bottom: 10px !important; 
    }
    
    .vision-name { 
        font-size: 1.2rem !important; 
        margin-bottom: 8px !important; 
        color: #333 !important; 
    }
    
    .vision-desc { 
        font-size: 0.95rem !important; 
        line-height: 1.5 !important; 
        word-break: keep-all; 
        color: #666 !important; 
    }

    /* 4. 푸터 고정 (절대 위치) */
    .final-footer-center { 
        position: absolute !important; 
        left: 0 !important; 
        bottom: 0 !important; 
        width: 100% !important; 
        margin: 0 !important; 
        padding: 30px 0 25px 0 !important; 
        background: #1a1a1a !important;
        z-index: 10 !important;
    }
    
    .footer-content-center { 
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important; 
    }
    
    .footer-logo-center { font-size: 1.3rem !important; margin-bottom: 0 !important; }
    .copyright-center { font-size: 0.7rem !important; color: #666 !important; }
}
}