/* =====================================================
   메인 스타일시트
   ===================================================== */

/* =====================================================
   Reset & Base
   ===================================================== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    /* scroll-snap은 JS로 제어 */
}

body {
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    color: var(--color-white);
    background: var(--gradient-dark);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    text-decoration: none;
    color: inherit;
}

ul, ol {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* =====================================================
   Typography Classes
   ===================================================== */
.text-hero {
    font-family: var(--font-display);
    font-size: var(--font-size-hero);
    font-weight: var(--font-weight-black);
    line-height: var(--line-height-tight);
    letter-spacing: -0.02em;
}

.text-section-title {
    font-family: var(--font-primary);
    font-size: var(--font-size-section-title);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-normal);
}

.text-sub-title {
    font-family: var(--font-primary);
    font-size: var(--font-size-sub-title);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
}

.text-body-lg {
    font-size: var(--font-size-body-lg);
    line-height: var(--line-height-relaxed);
}

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

.text-caption {
    font-size: var(--font-size-caption);
    line-height: var(--line-height-relaxed);
}

/* =====================================================
   Button Classes
   ===================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 48px;
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-full);
    transition: all var(--duration-normal) var(--ease-default);
}

.btn-primary {
    background: var(--gradient-primary);
    color: var(--color-white);
    box-shadow: var(--shadow-glow);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow-strong);
}

.btn-secondary {
    background: transparent;
    color: var(--color-white);
    border: 2px solid var(--color-white);
}

.btn-secondary:hover {
    background: var(--color-white);
    color: var(--color-black);
}

/* =====================================================
   Layout
   ===================================================== */
.container {
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.main {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
}

/* =====================================================
   Section Base
   ===================================================== */
section {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* =====================================================
   Header
   ===================================================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    z-index: var(--z-navigation);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
}

/* 배경 이미지 */
.header__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://akcdn-yjoo0317pro.cafe24img.com/imges/header-container.png') center center / cover no-repeat;
    z-index: -1;
}

/* 좌측 영역 */
.header__left {
    display: flex;
    align-items: center;
    gap: 100px;
    margin-left: 100px;
}

/* 로고 */
.header__logo {
    display: flex;
    align-items: center;
}

.header__logo img {
    height: auto;
    width: auto;
}

/* 네비게이션 */
.header__nav {
    display: flex;
    align-items: center;
    gap: 55px;
}

/* 네비게이션 아이템 */
.header__nav-item {
    display: flex;
    align-items: center;
    position: relative;
}

.header__nav-item img {
    height: auto;
    width: auto;
}

/* 기본 이미지 표시, active 숨김 */
.header__nav-item .default {
    display: block;
}

.header__nav-item .active {
    display: none;
}

/* 호버 시 이미지 교체 */
.header__nav-item:hover .default {
    display: none;
}

.header__nav-item:hover .active {
    display: block;
}

/* 네비게이션 active 상태 (스크롤 위치 기반) */
.header__nav-item.is-active .default {
    display: none;
}

.header__nav-item.is-active .active {
    display: block;
}

/* 네비게이션 비활성화 상태 */
.header__nav-item--disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

/* 우측 영역 */
.header__right {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* 아이콘 그룹 */
.header__icons {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 개별 아이콘 */
.header__icon {
    display: flex;
    align-items: center;
    position: relative;
}

.header__icon img {
    height: auto;
    width: auto;
}

/* 아이콘 기본/호버 */
.header__icon .default {
    display: block;
}

.header__icon .active {
    display: none;
}

.header__icon:hover .default,
.header__icon.is-active .default {
    display: none;
}

.header__icon:hover .active,
.header__icon.is-active .active {
    display: block;
}

/* 게임 시작 버튼 */
.header__game-start {
    display: flex;
    align-items: center;
    position: relative;
}

.header__game-start img {
    height: auto;
    width: auto;
}

.header__game-start .default {
    display: block;
}

.header__game-start .active {
    display: none;
}

.header__game-start:hover .default {
    display: none;
}

.header__game-start:hover .active {
    display: block;
}

/* =====================================================
   Hero Section
   ===================================================== */
.hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: visible;
}

/* PC 버전 기본 표시, 모바일 버전 기본 숨김 */
.hero__pc {
    display: block;
    position: relative;
    width: 100%;
    min-height: 100vh;
}

.hero__mobile {
    display: none;
}

/* 배경 이미지 */
.hero__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-background);
    /* background-image: url('https://akcdn-yjoo0317pro.cafe24img.com/imges/webp/main1bg4.webp'); */
    background-image: url('https://akcdn-yjoo0317pro.cafe24img.com/imges/main1bg4.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* 태블릿 반응형 - Hero (세로 모드에서만 비율 유지) */
@media (min-width: 769px) and (max-width: 1400px) and (orientation: portrait) {
    .hero {
        min-height: auto;
        aspect-ratio: 1920/960;
    }

    .hero__pc {
        min-height: auto;
        aspect-ratio: 1920/960;
    }

    .hero__bg {
        background-size: contain;
        background-position: center top;
    }
}

/* 캐릭터 (중앙~우측, 텍스트 뒤 레이어) */
.hero__character {
    position: absolute;
    right: 10%;
    bottom: 0;
    z-index: 5; /* 배경보다 위, 콘텐츠보다 아래 */
    width: 42%; /* 1920px 기준 약 810px = 42% */
}

.hero__character img {
    width: 100%;
    height: auto;
    max-height: 95vh;
    object-fit: contain;
}

/* 콘텐츠 영역 - 배경 기준 absolute 배치 */
.hero__content {
    position: absolute;
    z-index: var(--z-content);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 로고 - 배경 기준 12% 위치 */
/* 1920px 기준 로고 250px = 약 13% */
.hero__logo {
    position: absolute;
    top: 15%;
    left: 33%;
    transform: translateX(-50%);
    width: 13%; /* 섹션 기준 비율 - 배경과 동일하게 축소 */
    z-index: 100;
}

.hero__logo img {
    width: 100%;
    height: auto;
}

/* 텍스트 - 배경 기준 28% 위치 */
/* 텍스트 이미지 원본 크기 기준으로 비율 조정 필요 */
.hero__text {
    position: absolute;
    top: -5%;
    left: 30.5%;
    transform: translateX(-50%);
    width: 51%; /* 섹션 기준 비율 - 필요시 조정 */
}

.hero__text img {
    width: 100%;
    height: auto;
}

/* 스크롤 인디케이터 */
/* 1920px 기준 스크롤 아이콘 약 96px = 5% */
.hero__scroll {
    position: absolute;
    bottom: 3%;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-content);
}

.hero__scroll img {
    width: 100%;
    height: auto;
    animation: scrollBounce 2s infinite;
}

@keyframes scrollBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(10px);
    }
    60% {
        transform: translateY(5px);
    }
}

/* =====================================================
   New Main Section (본편 메인)
   ===================================================== */
.new-main {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}

/* PC 버전 기본 표시 */
.new-main__pc {
    display: block;
    position: relative;
    width: 100%;
    min-height: 100vh;
}

/* 모바일 요소 기본 숨김 */
.new-main__mobile {
    display: none;
}

/* 태블릿 반응형 - New Main (세로 모드에서만 비율 유지) */
@media (min-width: 769px) and (max-width: 1400px) and (orientation: portrait) {
    .new-main {
        min-height: auto;
        aspect-ratio: 1920/960;
    }

    .new-main__pc {
        min-height: auto;
        aspect-ratio: 1920/960;
    }

    .new-main__bg {
        background-size: contain;
        background-position: center top;
    }
}

/* PC 배경 이미지 */
.new-main__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* background-image: url('https://akcdn-yjoo0317pro.cafe24img.com/imges/main1-1bg.jpg'); */
    background-image: url('https://akcdn-yjoo0317pro.cafe24img.com/imges/main1-1bg2.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* 타이포 이미지 (중상단) */
.new-main__typo {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.new-main__typo img {
    width: auto;
    height: auto;
    max-width: 80vw;
}

/* 스크롤 인디케이터 */
.new-main__scroll {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-content);
}

.new-main__scroll img {
    width: 100%;
    height: auto;
    animation: scrollBounce 2s infinite;
}

/* =====================================================
   Story Section (Section 2)
   ===================================================== */
.story {
    position: relative;
    width: 100%;
    height: 100vh; /* 풀페이지 스크롤 - 한 화면 */
    overflow: hidden;
}

/* 모바일 요소 기본 숨김 */
.story__mobile {
    display: none;
}

/* 배경 이미지 */
.story__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.story__bg.is-visible {
    opacity: 1;
}

.story__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 텍스트 콘텐츠 영역 */
.story__content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.story__content.is-visible {
    opacity: 1;
}

/* 텍스트 컨테이너 - 우측에서 좌측으로 배치 */
.story__text-container {
    display: flex;
    flex-direction: row-reverse; /* 우측부터 시작 */
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    clip-path: inset(0% 0% 100% 0%); /* 초기 상태 - 위에서 아래로 드러남 */
}

/* 텍스트 그룹 - 세로쓰기 (위에서 아래로 한 줄) */
.story__text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    display: flex;
    flex-direction: row; /* 세로쓰기에서 row = 위→아래 방향 */
    gap: 5px;
}

/* 텍스트 내부에 이미지가 보이는 효과 - 한 글자씩 */
.story__char {
    background-image: url('https://akcdn-yjoo0317pro.cafe24img.com/imges/main2-text-bg.jpg');
    background-size: cover;
    background-position: center;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-family: var(--font-display);
    font-size: clamp(16px, 1.5vw, 28px); /* 반응형 폰트 크기 */
    font-weight: var(--font-weight-black);
    line-height: 1.5;
    opacity: 1; /* 줄 단위 애니메이션이므로 글자는 항상 보임 */
    display: inline-block;
}

/* 띄어쓰기 */
.story__space {
    display: inline-block;
    width: 0.3em;
}

/* 스크롤 인디케이터 */
.story__scroll {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    opacity: 1;
}

.story__scroll img {
    height: auto;
    width: auto;
    animation: scrollBounce 2s infinite;
}

/* =====================================================
   Brand Video Section (Section 3)
   ===================================================== */
.brand-video {
    position: relative;
    width: 100%;
    aspect-ratio: 1920/960;
    overflow: hidden;
}

/* PC 버전 기본 표시, 모바일 버전 기본 숨김 */
.brand-video__pc {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

.brand-video__mobile {
    display: none;
}

/* 배경 이미지 - CSS background-image 사용 */
.brand-video__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-image: url('https://akcdn-yjoo0317pro.cafe24img.com/imges/webp/section3bg.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* 캐릭터 공통 */
.brand-video__character {
    position: absolute;
    /* bottom: -55px; */
    z-index: 3;
    width: 51%; /* 섹션 기준 비율 */
}

.brand-video__character img {
    width: 100%;
    height: auto;
}

/* 좌측 캐릭터 */
.brand-video__character--left {
    left: 0;
}

/* 우측 캐릭터 */
.brand-video__character--right {
    right: 0;
    bottom: 0%;
    width: 81%; /* 섹션 기준 비율 */
}

/* 콘텐츠 영역 (중앙) - absolute */
.brand-video__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0; /* 초기 상태 - GSAP 애니메이션으로 표시 */
    visibility: hidden; /* 깜빡임 방지 */
}

/* 비디오 프레임 */
.brand-video__frame {
    position: relative;
}

/* 프레임+썸네일 합친 이미지 */
.brand-video__frame-img {
    width: auto;
    height: auto;
}

/* 재생 버튼 (중앙) */
.brand-video__play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.brand-video__play-btn img {
    height: auto;
    width: auto;
}

/* 재생 버튼 호버 효과 */
.brand-video__play-btn .default {
    display: block;
}

.brand-video__play-btn .active {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.brand-video__frame:hover .brand-video__play-btn .default {
    opacity: 0;
}

.brand-video__frame:hover .brand-video__play-btn .active {
    opacity: 1;
}

/* 스크롤 인디케이터 */
.brand-video__scroll {
    position: absolute;
    bottom: 3%;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-content);
}

.brand-video__scroll img {
    width: 100%;
    height: auto;
    animation: scrollBounce 2s infinite;
}

/* =====================================================
   Kakao Event Section (Section 4)
   ===================================================== */
.kakao-event {
    position: relative;
    width: 100%;
    aspect-ratio: 1920/960;
    overflow: hidden;
}

/* 배경 이미지 - CSS background-image 사용 */
.kakao-event__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-image: url('https://akcdn-yjoo0317pro.cafe24img.com/imges/webp/section3bg.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* 캐릭터 공통 */
.kakao-event__character {
    position: absolute;
    z-index: 3;
}

.kakao-event__character img {
    width: 100%;
    height: auto;
}

/* 우측 캐릭터 */
.kakao-event__character--right {
    right: 11.2%; /* 215px / 1920px */
    bottom: 0;
    width: 27%; /* 캐릭터 비율 */
    z-index: 10;
}

/* 좌측 하단 캐릭터 */
.kakao-event__character--left-bottom {
    left: 8.9%; /* 110px / 1920px */
    bottom: -8%;
    width: 28%;
    z-index: 10;
}

/* 좌측 상단 캐릭터 */
.kakao-event__character--left-top {
    left: 2%;
    top: 13%;
    width: 22%;
}

/* 콘텐츠 영역 (중앙) - absolute */
.kakao-event__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 35%; /* 콘텐츠 영역 너비 */
    opacity: 0; /* 초기 상태 - GSAP 애니메이션으로 표시 */
    visibility: hidden; /* 깜빡임 방지 */
    max-height: 90%;
}

/* SD 캐릭터 */
.kakao-event__sb {
    position: relative;
    z-index: 101;
    margin-bottom: 2%;
    width: 35%;
}

.kakao-event__sb img {
    width: 100%;
    height: auto;
}

/* 텍스트 공통 */
.kakao-event__typo {
    margin-bottom: 1%;
}

.kakao-event__typo--2 {
    width: 100%;
}

.kakao-event__typo--3 {
    width: 86%;
}

.kakao-event__typo--4 {
    width: 78%;
}

.kakao-event__typo img {
    width: 100%;
    height: auto;
}

/* 이벤트 박스 */
.kakao-event__box {
    margin: 3% 0;
    width: 100%;
    margin-top: 1%;
}

.kakao-event__box img {
    width: 100%;
    height: auto;
}

/* 카카오톡 버튼 */
.kakao-event__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -3%;
    position: relative;
    width: 60%;
}

.kakao-event__btn img {
    width: 100%;
    height: auto;
}

/* 버튼 호버 효과 */
.kakao-event__btn .default {
    display: block;
}

.kakao-event__btn .active {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.kakao-event__btn:hover .default {
    opacity: 0;
}

.kakao-event__btn:hover .active {
    opacity: 1;
}

/* 우측 하단 안내 텍스트 */
.kakao-event__notice {
    position: absolute;
    bottom: 5%;
    right: 2%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.kakao-event__notice img {
    width: auto;
    height: auto;
    display: block;
}

/* 모바일 버전 - PC에서 숨김 */
.kakao-event__mobile {
    display: none;
}

/* =====================================================
   Collab Event Section (Section 5)
   ===================================================== */
.collab-event {
    position: relative;
    width: 100%;
    aspect-ratio: 1920/960;
    overflow: hidden;
}

/* 배경 이미지 - CSS background-image 사용 */
.collab-event__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-image: url('https://akcdn-yjoo0317pro.cafe24img.com/imges/webp/section3bg.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* 캐릭터 공통 */
.collab-event__character {
    position: absolute;
    z-index: 3;
}

.collab-event__character img {
    width: 100%;
    height: auto;
}

/* 좌측 캐릭터 */
.collab-event__character--left {
    left: -0.4%; /* 50px / 1920px */
    bottom: -6%;
    width: 35%;
    z-index: 10;
}

/* 말풍선 */
.collab-event__bubble {
    position: absolute;
    top: 4%;
    right: 17%;
    width: 22%;
}

.collab-event__bubble img {
    width: 100%;
    height: auto;
}

/* 우측 캐릭터 */
.collab-event__character--right {
    right: 2.7%; /* 90px / 1920px */
    bottom: 0;
    width: 34%;
    z-index: 10;
}

/* 콘텐츠 영역 (중앙) - absolute */
.collab-event__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 35%;
    opacity: 0; /* 초기 상태 - GSAP 애니메이션으로 표시 */
    visibility: hidden; /* 깜빡임 방지 */
    max-height: 90%;
}

/* SD 캐릭터 */
.collab-event__sb {
    position: relative;
    z-index: 101;
    margin-bottom: 2%;
    width: 35%;
}

.collab-event__sb img {
    width: 100%;
    height: auto;
}

/* 텍스트 공통 */
.collab-event__typo {
    margin-bottom: 1%;
}

.collab-event__typo img {
    width: 100%;
    height: auto;
}

/* 이벤트 박스 */
.collab-event__box {
    position: relative;
    margin: 3% 0;
    width: 100%;
    margin-top: 1%;
}

.collab-event__box img {
    width: 100%;
    height: auto;
}

/* 박스 내부 아이템 */
.collab-event__box-inner {
    position: absolute;
    top: 2%;
    left: 6%;
    transform: translate(-50%, -50%);
    width: 22%;
}

.collab-event__box-inner img {
    width: 100%;
    height: auto;
}

/* 버튼 */
.collab-event__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -3%;
    position: relative;
    width: 60%;
}

.collab-event__btn img {
    width: 100%;
    height: auto;
}

/* 버튼 호버 효과 */
.collab-event__btn .default {
    display: block;
}

.collab-event__btn .active {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.collab-event__btn:hover .default {
    opacity: 0;
}

.collab-event__btn:hover .active {
    opacity: 1;
}

/* 우측 하단 안내 텍스트 */
.collab-event__notice {
    position: absolute;
    bottom: 5%;
    right: 2%;
    z-index: 10;
}

.collab-event__notice img {
    width: auto;
    height: auto;
}

/* 모바일 버전 - PC에서 숨김 */
.collab-event__mobile {
    display: none;
}

/* =====================================================
   Coming Soon Section (Section 6)
   ===================================================== */
.coming-soon {
    position: relative;
    width: 100%;
    aspect-ratio: 1920/960;
    overflow: hidden;
}

/* 배경 이미지 - CSS background-image 사용 */
.coming-soon__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-image: url('https://akcdn-yjoo0317pro.cafe24img.com/imges/webp/section3bg.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* 캐릭터 공통 */
.coming-soon__character {
    position: absolute;
    z-index: 3;
}

.coming-soon__character img {
    width: 100%;
    height: auto;
}

/* 좌측 캐릭터 */
.coming-soon__character--left {
    left: 5.6%; /* 80px / 1920px */
    bottom: -7%;
    width: 28%;
    z-index: 10;
}

/* 우측 캐릭터 */
.coming-soon__character--right {
    right: 2.3%; /* 64px / 1920px */
    bottom: -4%;
    width: 34%;
    z-index: 10;
}

/* 말풍선 */
.coming-soon__bubble {
    position: absolute;
    top: -2%;
    right: -7%;
    width: 27.5%;
    z-index: 11;
}

.coming-soon__bubble img {
    width: 100%;
    height: auto;
}

/* 콘텐츠 영역 (중앙) - absolute */
.coming-soon__content {
    position: absolute;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 35%;
    opacity: 0; /* 초기 상태 - GSAP 애니메이션으로 표시 */
    visibility: hidden; /* 깜빡임 방지 */
    max-height: 90%;
}

/* SD 캐릭터 */
.coming-soon__sb {
    position: relative;
    z-index: 101;
    margin-bottom: 2%;
    width: 35%;
}

.coming-soon__sb img {
    width: 100%;
    height: auto;
}

/* 텍스트 공통 */
.coming-soon__typo {
    margin-bottom: 1%;
    width: 70%;
}

.coming-soon__typo--2 {
    width: 68%;
}


.coming-soon__typo img {
    width: 100%;
    height: auto;
}

/* 이벤트 박스 */
.coming-soon__box {
    position: relative;
    margin: 3% 0;
    width: 110%;
    margin-top: 1%;
}

.coming-soon__box > img {
    width: 100%;
    height: auto;
}

/* Coming Soon 텍스트 (박스 중앙) */
.coming-soon__box-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
}

.coming-soon__box-text img {
    width: 100%;
    height: auto;
}

/* 복주머니 아이템 (박스 좌측 하단) */
.coming-soon__box-inner {
    position: absolute;
    bottom: -14%;
    left: -3%;
    width: 29%;
}

.coming-soon__box-inner img {
    width: 100%;
    height: auto;
}

/* 버튼 */
.coming-soon__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -3%;
    position: relative;
    width: 60%;
}

.coming-soon__btn img {
    width: 100%;
    height: auto;
}

.coming-soon__btn .default {
    display: block;
}

.coming-soon__btn .active {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.coming-soon__btn:hover .default {
    opacity: 0;
}

.coming-soon__btn:hover .active {
    opacity: 1;
}

/* 모바일 버전 - PC에서 숨김 */
.coming-soon__mobile {
    display: none;
}

/* =====================================================
   Coming Soon 2 Section (Section 7)
   ===================================================== */
.coming-soon-2 {
    position: relative;
    width: 100%;
    aspect-ratio: 1920/960;
    overflow: hidden;
}

/* 배경 이미지 */
.coming-soon-2__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-image: url('https://akcdn-yjoo0317pro.cafe24img.com/imges/webp/section3bg.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* 캐릭터 공통 */
.coming-soon-2__character {
    position: absolute;
    z-index: 3;
}

.coming-soon-2__character img {
    width: 100%;
    height: auto;
}

/* 좌측 캐릭터 */
.coming-soon-2__character--left {
    left: 3.3%; /* 80px / 1920px */
    bottom: -10.5%;
    width: 33%;
    z-index: 10;
}

/* 우측 캐릭터 */
.coming-soon-2__character--right {
    right: 1.3%; /* 64px / 1920px */
    bottom: -4%;
    width: 47%;
    z-index: 1;
}

/* 콘텐츠 영역 (중앙) - absolute */
.coming-soon-2__content {
    position: absolute;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 35%;
    opacity: 0; /* 초기 상태 - GSAP 애니메이션으로 표시 */
    visibility: hidden; /* 깜빡임 방지 */
    max-height: 90%;
}

/* SD 캐릭터 */
.coming-soon-2__sb {
    position: relative;
    z-index: 101;
    margin-bottom: 2%;
    width: 35%;
}

.coming-soon-2__sb img {
    width: 100%;
    height: auto;
}

/* 텍스트 공통 */
.coming-soon-2__typo {
    margin-bottom: 1%;
    width: 70%;
}

.coming-soon-2__typo img {
    width: 100%;
    height: auto;
}

/* 이벤트 박스 */
.coming-soon-2__box {
    position: relative;
    margin: 3% 0;
    width: 110%;
}

.coming-soon-2__box > img {
    width: 100%;
    height: auto;
}

/* Coming Soon 텍스트 (박스 중앙) */
.coming-soon-2__box-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
}

.coming-soon-2__box-text img {
    width: 100%;
    height: auto;
}

/* 엽전 아이템 (박스 좌측 상단) */
.coming-soon-2__box-inner {
    position: absolute;
    top: 8%;
    left: 11%;
    transform: translate(-50%, -50%);
    width: 22.4%;
}

.coming-soon-2__box-inner img {
    width: 100%;
    height: auto;
}

/* 말풍선 */
.coming-soon-2__bubble {
    position: absolute;
    top: 0%;
    right: 9%;
    width: 23.4%;
    z-index: 11;
}

.coming-soon-2__bubble img {
    width: 100%;
    height: auto;
}

/* 모바일 버전 - PC에서 숨김 */
.coming-soon-2__mobile {
    display: none;
}

/* =====================================================
   Video Modal (YouTube 팝업)
   ===================================================== */
.video-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
}

.video-modal.active {
    display: flex;
}

/* 검은 배경 오버레이 */
.video-modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
}

/* 모달 콘텐츠 */
.video-modal__content {
    position: relative;
    z-index: 1;
    width: 80%;
    max-width: 1200px;
}

/* 닫기 버튼 */
.video-modal__close {
    position: absolute;
    top: -50px;
    right: 0;
    background: none;
    border: none;
    color: white;
    font-size: 36px;
    cursor: pointer;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.video-modal__close:hover {
    opacity: 0.7;
}

/* 비디오 플레이어 (16:9 비율) */
.video-modal__player {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    background: #000;
}

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

/* 프레임 클릭 가능 */
.brand-video__frame {
    cursor: pointer;
}

/* =====================================================
   Utility Classes
   ===================================================== */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =====================================================
   Mobile Header
   ===================================================== */
.header-mobile {
    display: none; /* 기본적으로 숨김, 모바일에서만 표시 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    z-index: 3000; /* 레프트 네비(2000)보다 위에 표시 */
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
}

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

.header-mobile__bg img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.header-mobile__burger {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    position: relative;
}

.header-mobile__burger img {
    width: 24px;
    height: auto;
}

.header-mobile__icons {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-mobile__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

.header-mobile__icon img {
    width: 100%;
    height: auto;
}

.header-mobile__icon .active {
    display: none;
}

.header-mobile__icon.is-active .default {
    display: none;
}

.header-mobile__icon.is-active .active {
    display: block;
}

/* =====================================================
   Left Navigation (Mobile)
   ===================================================== */
.left-nav {
    display: none; /* 기본적으로 숨김, 모바일에서만 표시 */
    position: fixed;
    top: 0; /* 화면 최상단부터 시작 */
    left: 0;
    width: 100%;
    height: 100vh; /* 폴백 */
    height: calc(var(--vh, 1vh) * 100); /* 사파리 대응 */
    z-index: 2000;
    pointer-events: none;
}

.left-nav.is-open {
    pointer-events: auto;
}

/* 오버레이 - 삭제됨 (전체화면 오버레이 사용 안함) */
.left-nav__overlay {
    display: none;
}

/* 네비게이션 패널 */
.left-nav__panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 56%;
    min-width: 180px;
    height: 100vh; /* 폴백 */
    height: calc(var(--vh, 1vh) * 100); /* 사파리 대응 */
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow: hidden;
}

.left-nav.is-open .left-nav__panel {
    transform: translateX(0);
}

/* 배경 이미지 */
.left-nav__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.left-nav__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 로고 */
.left-nav__logo {
    padding: 70px 15px 20px; /* 헤더(50px) 아래로 위치하도록 상단 패딩 증가 */
    text-align: center;
}

.left-nav__logo img {
    width: 65%;
    max-width: 120px;
    height: auto;
    margin: 0 auto;
}

/* 메뉴 리스트 */
.left-nav__divider {
    text-align: center;
    padding: 5px 0;
}

.left-nav__divider img {
    width: 100%;
    height: auto;
}

.left-nav__menu {
    display: flex;
    flex-direction: column;
    padding: 0 15px;
    gap: 8px;
    list-style: none;
    margin: 0;
}

.left-nav__item {
    text-align: center;
}

.left-nav__link {
    display: inline-block;
    padding: 8px 0;
    transition: opacity 0.2s ease;
}

.left-nav__link img {
    height: 15px;
    width: auto;
}

.left-nav__link .active {
    display: none;
}

.left-nav__link .default {
    display: block;
}

.left-nav__link:hover .default,
.left-nav__link.is-active .default {
    display: none;
}

.left-nav__link:hover .active,
.left-nav__link.is-active .active {
    display: block;
}

.left-nav__link--disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* =====================================================
   Responsive - Tablet Landscape (768px ~ 1400px, 가로 모드)
   태블릿 가로 모드 - PC 레이아웃 유지, 크기 조정
   ===================================================== */
@media (min-width: 769px) and (max-width: 1400px) and (orientation: landscape) {
    /* 모든 섹션 화면 꽉 차게 */
    .hero,
    .hero__pc,
    .new-main,
    .new-main__pc,
    .story,
    .brand-video,
    .kakao-event,
    .collab-event,
    .coming-soon,
    .coming-soon-2 {
        min-height: 100vh;
        height: 100vh;
        aspect-ratio: unset;
    }

    /* Hero 섹션 배경 조정 */
    .hero__bg {
        background-size: cover;
        background-position: center;
        height: 100%;
    }

    /* Hero 텍스트/로고 위치 - 태블릿 가로모드용 조정 */
    .hero__logo {
        top: 20%;
        left: 33%;
        width: 13%;
    }

    .hero__text {
        top: 6%;
        left: 30.5%;
        width: 51%;
    }

    .hero__character {
        right: 10%;
        width: 42%;
    }

    .hero__scroll {
        bottom: 3%;
    }

    /* 헤더 - 왼쪽 정렬 유지, 크기만 조정 */
    .header.header--pc {
        padding: 8px 20px;
        height: 50px;
        justify-content: space-between;
    }

    .header__left {
        gap: 30px;
    }

    .header__logo img {
        height: 30px;
        width: auto;
    }

    .header__nav {
        gap: 20px;
    }

    .header__nav-item img {
        height: 13px;
        width: auto;
    }

    .header__right {
        gap: 12px;
    }

    .header__icons {
        gap: 8px;
    }

    .header__icon img {
        height: 22px;
        width: auto;
    }

    .header__game-start img {
        height: 30px;
        width: auto;
    }

    /* Section 2: Story */
    .story__text-container {
        gap: 20px;
    }

    .story__char {
        font-size: clamp(18px, 2.5vw, 28px);
    }

    /* Section 3: Brand Video - PC와 동일하게 */
    .brand-video__character {
        width: 68%;
    }

    .brand-video__character--left {
        left: 0;
    }

    .brand-video__character--right {
        width: 121%;
        right: 0;
        bottom: 0%;
    }

    .brand-video__content {
        width: auto;
    }

    .brand-video__frame {
        width: 100%;
    }

    .brand-video__frame-img {
        max-height: 55vh;
        width: auto;
    }

    /* Section 4: Kakao Event - 태블릿용 */
    .kakao-event__character--right {
        right: 0%;
        bottom: 0;
        width: 34%;
    }

    .kakao-event__character--left-bottom {
        left: 5%;
        bottom: -10%;
        width: 36%;
    }

    .kakao-event__character--left-top {
        left: -2%;
        top: 10%;
        width: 28%;
    }

    /* Section 4: 중앙 콘텐츠 확대 */
    .kakao-event__content {
        width: 45%;
    }

    .kakao-event__sd-char {
        width: 65%;
    }

    .kakao-event__btn {
        width: 50%;
    }

    /* Section 5: Collab Event - 태블릿용 */
    .collab-event__box {
        margin-top: 4%;
    }

    .collab-event__character--left {
        left: -15%;
        width: 50%;
    }

    .collab-event__character--right {
        right: -14%;
        bottom: 0%;
        width: 50%;
    }

    /* Section 5: 중앙 콘텐츠 확대 */
    .collab-event__content {
        width: 45%;
    }

    .collab-event__sd-char {
        width: 65%;
    }

    .collab-event__btn {
        width: 50%;
    }

    /* Section 6: Coming Soon - 태블릿용 */
    .coming-soon__character--left {
        left: -7%;
        bottom: 0%;
        width: 38%;
    }

    .coming-soon__character--right {
        right: -8%;
        bottom: 0%;
        width: 42%;
    }

    /* Section 6: 중앙 콘텐츠 확대 */
    .coming-soon__content {
        width: 45%;
    }

    .coming-soon__sd-char {
        width: 65%;
    }

    .coming-soon__btn {
        width: 50%;
    }

    /* Section 7: Coming Soon 2 - 태블릿용 */
    .coming-soon-2__character--left {
        left: -8%;
        bottom: -3.5%;
        width: 43%;
    }

    .coming-soon-2__character--right {
        right: -8%;
        bottom: 0%;
        width: 57%;
    }

    /* Section 7: 중앙 콘텐츠 확대 */
    .coming-soon-2__content {
        width: 45%;
    }

    .coming-soon-2__sd-char {
        width: 65%;
    }

    .coming-soon-2__btn {
        width: 50%;
    }

    /* Footer */
    .footer {
        padding: 25px 15px;
    }

    .footer__logo img {
        height: 35px;
    }
}

/* =====================================================
   Responsive - Tablet Portrait (세로 방향 태블릿)
   768px ~ 1024px 너비, 세로가 더 긴 경우
   ===================================================== */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    /* 세로 방향 태블릿에서는 모바일 레이아웃 사용 */

    /* PC 헤더 숨김 */
    .header.header--pc {
        display: none !important;
    }

    /* 모바일 헤더 표시 */
    .header-mobile {
        display: flex !important;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
    }

    /* PC 버전 섹션들 숨김 */
    .hero__content,
    .hero__logo,
    .hero__title,
    .hero__subtitle,
    .hero__cta-container,
    .story__bg,
    .story__content,
    .brand-video__bg,
    .brand-video__character--left,
    .brand-video__character--right,
    .brand-video__content,
    .kakao-event__bg,
    .kakao-event__character--left-top,
    .kakao-event__character--left-bottom,
    .kakao-event__character--right,
    .kakao-event__content,
    .kakao-event__notice,
    .collab-event__bg,
    .collab-event__character--left,
    .collab-event__character--right,
    .collab-event__content,
    .collab-event__notice,
    .coming-soon__bg,
    .coming-soon__character--left,
    .coming-soon__character--right,
    .coming-soon__content,
    .coming-soon-2__bg,
    .coming-soon-2__character--left,
    .coming-soon-2__character--right,
    .coming-soon-2__content {
        display: none !important;
    }

    /* 모바일 버전 섹션들 표시 */
    .hero__mobile,
    .story__mobile,
    .brand-video__mobile,
    .kakao-event__mobile,
    .collab-event__mobile,
    .coming-soon__mobile,
    .coming-soon-2__mobile {
        display: block !important;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* Hero 섹션 - aspect-ratio 해제 */
    .hero {
        aspect-ratio: unset;
        min-height: 100vh;
        height: auto;
    }

    /* New Main 섹션 - aspect-ratio 해제 */
    .new-main {
        aspect-ratio: unset;
        min-height: 100vh;
        height: auto;
    }

    /* 모든 섹션 aspect-ratio 해제 */
    .story,
    .brand-video,
    .kakao-event,
    .collab-event,
    .coming-soon,
    .coming-soon-2 {
        aspect-ratio: unset;
        min-height: 100vh;
        height: auto;
    }

    /* Hero 모바일 */
    .hero__mobile-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('https://akcdn-yjoo0317pro.cafe24img.com/imges/mobile/main1bg.jpg');
        background-size: cover;
        background-position: center;
    }

    .hero__mobile-logo {
        position: absolute;
        top: 5%;
        left: 50%;
        transform: translateX(-50%);
        width: 12%;
        z-index: 10;
    }

    /* Story 모바일 */
    .story__mobile-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('https://akcdn-yjoo0317pro.cafe24img.com/imges/mobile/main2bg.jpg');
        background-size: cover;
        background-position: center;
    }

    .story__mobile-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
        gap: 25px;
        width: 90%;
        height: 60%;
        clip-path: inset(0% 0% 100% 0%); /* 초기 상태 - 위에서 아래로 드러남 */
    }

    .story__mobile-text {
        writing-mode: vertical-rl;
        text-orientation: mixed;
        display: flex;
        flex-direction: row;
        gap: 3px;
    }

    .story__mobile-char {
        font-family: 'YoonDokrip', serif;
        font-size: clamp(20px, 3vw, 28px);
        font-weight: 900;
        letter-spacing: 0.1em;
        line-height: 1.5;
        display: inline-block;
        background-image: url('https://akcdn-yjoo0317pro.cafe24img.com/imges/main2-text-bg.jpg');
        background-size: cover;
        background-position: center;
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        opacity: 1;
    }

    /* Brand Video 모바일 */
    .brand-video__mobile-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('https://akcdn-yjoo0317pro.cafe24img.com/imges/mobile/main3bg.jpg');
        background-size: cover;
        background-position: center;
    }

    .brand-video__mobile-video {
        position: absolute;
        top: 32%;
        left: 50%;
        transform: translateX(-50%);
        width: 70%;
        cursor: pointer;
    }

    .brand-video__mobile-scroll {
        position: absolute;
        bottom: 3%;
        left: 50%;
        transform: translateX(-50%);
        width: 5%;
        z-index: 10;
    }

    .brand-video__mobile-scroll img {
        width: 100%;
        height: auto;
        animation: scrollBounce 2s infinite;
    }

    /* Kakao Event 모바일 */
    .kakao-event__mobile-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('https://akcdn-yjoo0317pro.cafe24img.com/imges/mobile/main4bg.jpg');
        background-size: cover;
        background-position: center;
    }

    .kakao-event__mobile-btn {
        position: absolute;
        bottom: 30%;
        left: 50%;
        transform: translateX(-50%);
        width: 40%;
    }

    /* Collab Event 모바일 */
    .collab-event__mobile-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('https://akcdn-yjoo0317pro.cafe24img.com/imges/mobile/main5bg.jpg');
        background-size: cover;
        background-position: center;
    }

    .collab-event__mobile-btn {
        position: absolute;
        bottom: 34%;
        left: 50%;
        transform: translateX(-50%);
        width: 40%;
    }

    /* Coming Soon 모바일 */
    .coming-soon__mobile-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('https://akcdn-yjoo0317pro.cafe24img.com/imges/mobile/main6bg.jpg');
        background-size: cover;
        background-position: center;
    }

    .coming-soon__mobile-btn {
        bottom: 34%;
        width: 40%;
    }

    /* Coming Soon 2 모바일 */
    .coming-soon-2__mobile-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('https://akcdn-yjoo0317pro.cafe24img.com/imges/mobile/main7bg.jpg');
        background-size: cover;
        background-position: center;
    }

    /* 레프트 네비게이션 */
    .left-nav {
        display: block;
    }
}

/* =====================================================
   Responsive - Foldable Phone (폴더블폰 펼침 상태)
   Galaxy Z Fold 펼침: 약 884x1104 CSS픽셀
   ===================================================== */
@media (min-width: 700px) and (max-width: 899px) and (orientation: portrait) {
    /* PC 헤더 숨김 */
    .header.header--pc {
        display: none !important;
    }

    /* 모바일 헤더 표시 */
    .header-mobile {
        display: flex !important;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
    }

    /* 헤더 좌측 여백 조정 */
    .header__left {
        margin-left: 15px;
    }

    /* PC 버전 섹션들 숨김 */
    .hero__content,
    .hero__logo,
    .hero__title,
    .hero__subtitle,
    .hero__cta-container,
    .story__bg,
    .story__content,
    .brand-video__bg,
    .brand-video__character--left,
    .brand-video__character--right,
    .brand-video__content,
    .kakao-event__bg,
    .kakao-event__character--left-top,
    .kakao-event__character--left-bottom,
    .kakao-event__character--right,
    .kakao-event__content,
    .kakao-event__notice,
    .collab-event__bg,
    .collab-event__character--left,
    .collab-event__character--right,
    .collab-event__content,
    .collab-event__notice,
    .coming-soon__bg,
    .coming-soon__character--left,
    .coming-soon__character--right,
    .coming-soon__content,
    .coming-soon-2__bg,
    .coming-soon-2__character--left,
    .coming-soon-2__character--right,
    .coming-soon-2__content {
        display: none !important;
    }

    /* 모바일 버전 섹션들 표시 */
    .hero__mobile,
    .story__mobile,
    .brand-video__mobile,
    .kakao-event__mobile,
    .collab-event__mobile,
    .coming-soon__mobile,
    .coming-soon-2__mobile {
        display: block !important;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* Hero 섹션 */
    .hero {
        aspect-ratio: unset;
        min-height: 100vh;
        height: auto;
    }

    /* New Main 섹션 */
    .new-main {
        aspect-ratio: unset;
        min-height: 100vh;
        height: auto;
    }

    /* 모든 섹션 aspect-ratio 해제 */
    .story,
    .brand-video,
    .kakao-event,
    .collab-event,
    .coming-soon,
    .coming-soon-2 {
        aspect-ratio: unset;
        min-height: 100vh;
        height: auto;
    }

    /* Hero 모바일 */
    .hero__mobile-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('https://akcdn-yjoo0317pro.cafe24img.com/imges/mobile/main1bg.jpg');
        background-size: cover;
        background-position: center;
    }

    .hero__mobile-logo {
        position: absolute;
        top: 8%;
        left: 50%;
        transform: translateX(-50%);
        width: 19%;
        z-index: 10;
    }

    /* Hero 텍스트 */
    .hero__mobile-text {
        width: 57%;
    }

    /* Hero 스크롤 인디케이터 */
    .hero__mobile-scroll {
        width: 6%;
    }

    /* Story 스크롤 인디케이터 */
    .story__mobile-scroll {
        width: 6%;
    }

    /* Story 모바일 */
    .story__mobile-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('https://akcdn-yjoo0317pro.cafe24img.com/imges/mobile/main2bg.jpg');
        background-size: cover;
        background-position: center;
    }

    .story__mobile-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
        gap: 30px;
        width: 85%;
        height: 55%;
        clip-path: inset(0% 0% 100% 0%);
    }

    .story__mobile-text {
        writing-mode: vertical-rl;
        text-orientation: mixed;
        display: flex;
        flex-direction: row;
        gap: 5px;
    }

    .story__mobile-char {
        font-family: 'YoonDokrip', serif;
        font-size: clamp(22px, 2.8vw, 32px);
        font-weight: 900;
        letter-spacing: 0.1em;
        line-height: 1.5;
        display: inline-block;
        background-image: url('https://akcdn-yjoo0317pro.cafe24img.com/imges/main2-text-bg.jpg');
        background-size: cover;
        background-position: center;
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
    }

    /* Brand Video 모바일 */
    .brand-video__mobile-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('https://akcdn-yjoo0317pro.cafe24img.com/imges/mobile/main3bg.jpg');
        background-size: cover;
        background-position: center;
    }

    .brand-video__mobile-video {
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translateX(-50%);
        width: 60%;
        cursor: pointer;
    }

    .brand-video__mobile-scroll {
        position: absolute;
        bottom: 3%;
        left: 50%;
        transform: translateX(-50%);
        width: 6%;
        z-index: 10;
    }

    .brand-video__mobile-scroll img {
        width: 100%;
        height: auto;
        animation: scrollBounce 2s infinite;
    }

    /* Brand Video 캐릭터 (폴더블폰용) */
    .brand-video__character {
        display: block !important;
        width: 85%;
        bottom: 0%;
    }

    .brand-video__character--right {
        display: block !important;
        width: 157%;
    }

    /* Kakao Event 모바일 */
    .kakao-event__mobile-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('https://akcdn-yjoo0317pro.cafe24img.com/imges/mobile/main4bg.jpg');
        background-size: cover;
        background-position: center;
    }

    .kakao-event__mobile-btn {
        position: absolute;
        bottom: 32%;
        left: 50%;
        transform: translateX(-50%);
        width: 35%;
    }

    /* Collab Event 모바일 */
    .collab-event__mobile-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('https://akcdn-yjoo0317pro.cafe24img.com/imges/mobile/main5bg.jpg');
        background-size: cover;
        background-position: center;
    }

    .collab-event__mobile-btn {
        position: absolute;
        bottom: 36%;
        left: 50%;
        transform: translateX(-50%);
        width: 35%;
    }

    /* Coming Soon 모바일 */
    .coming-soon__mobile-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('https://akcdn-yjoo0317pro.cafe24img.com/imges/mobile/main6bg.jpg');
        background-size: cover;
        background-position: center;
    }

    .coming-soon__mobile-btn {
        bottom: 36%;
        width: 35%;
    }

    /* Coming Soon 2 모바일 */
    .coming-soon-2__mobile-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('https://akcdn-yjoo0317pro.cafe24img.com/imges/mobile/main7bg.jpg');
        background-size: cover;
        background-position: center;
    }

    /* 레프트 네비게이션 */
    .left-nav {
        display: block;
    }
}

/* =====================================================
   Responsive - Mobile
   ===================================================== */
@media (max-width: 768px) {
    :root {
        --font-size-hero: 36px;
        --font-size-section-title: 28px;
        --font-size-sub-title: 20px;
        --font-size-body-lg: 16px;
        --font-size-body: 14px;
        --font-size-caption: 12px;
    }

    /* PC 헤더 숨김 */
    .header--pc {
        display: none;
    }

    /* 모바일 헤더 표시 */
    .header-mobile {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }

    /* 레프트 네비게이션 표시 (기본은 닫힘) */
    .left-nav {
        display: block;
    }

    /* =====================================================
       Mobile New Main Section (본편 메인)
       ===================================================== */
    .new-main {
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
        min-height: calc(var(--vh, 1vh) * 100);
    }

    .new-main__pc {
        display: none;
    }

    .new-main__mobile {
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    .new-main__mobile-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-image: url('https://akcdn-yjoo0317pro.cafe24img.com/imges/mobile/main1-1bg.jpg');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

    .new-main__mobile-typo {
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        width: 90%;
        text-align: center;
    }

    .new-main__mobile-typo img {
        width: 100%;
        height: auto;
    }

    .new-main__mobile-scroll {
        position: absolute;
        bottom: 3%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        width: 10%;
    }

    .new-main__mobile-scroll img {
        width: 100%;
        height: auto;
        animation: scrollBounce 2s infinite;
    }

    /* =====================================================
       Mobile Hero Section
       ===================================================== */
    /* hero 섹션 높이 (사파리 대응) */
    .hero {
        height: 100vh; /* 폴백 */
        height: calc(var(--vh, 1vh) * 100); /* 사파리 대응 */
        min-height: calc(var(--vh, 1vh) * 100);
    }

    /* PC 숨김, 모바일 표시 */
    .hero__pc {
        display: none;
    }

    .hero__mobile {
        display: block;
        position: relative;
        width: 100%;
        height: 100%; /* 부모(.hero)에 맞춤 */
    }

    /* 모바일 배경 이미지 */
    .hero__mobile-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-image: url('https://akcdn-yjoo0317pro.cafe24img.com/imges/mobile/main1bg.jpg');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

    /* 우측 상단 로고 */
    .hero__mobile-logo {
        position: absolute;
        top: 12%;
        right: 5%;
        z-index: 10;
        width: 25%;
    }

    .hero__mobile-logo img {
        width: 100%;
        height: auto;
    }

    /* 중하단 텍스트 */
    .hero__mobile-text {
        position: absolute;
        bottom: 18%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        width: 90%;
        text-align: center;
    }

    .hero__mobile-text img {
        width: 100%;
        height: auto;
    }

    /* 스크롤 인디케이터 */
    .hero__mobile-scroll {
        position: absolute;
        bottom: 3%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        width: 10%;
    }

    .hero__mobile-scroll img {
        width: 100%;
        height: auto;
        animation: scrollBounce 2s infinite;
    }

    /* =====================================================
       Mobile Story Section (Section 2)
       ===================================================== */
    .story {
        height: 100vh; /* 폴백 */
        height: calc(var(--vh, 1vh) * 100); /* 사파리 대응 */
        min-height: calc(var(--vh, 1vh) * 100);
        overflow: hidden;
    }

    /* PC 요소 숨김 */
    .story__bg,
    .story__content,
    .story__scroll {
        display: none;
    }

    /* 모바일 요소 표시 */
    .story__mobile {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* 모바일 배경 */
    .story__mobile-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-image: url('https://akcdn-yjoo0317pro.cafe24img.com/imges/mobile/main2bg.jpg');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

    /* 모바일 텍스트 컨테이너 */
    .story__mobile-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        display: flex;
        flex-direction: row-reverse; /* 오른쪽부터 시작 (PC와 동일) */
        justify-content: center;
        gap: 8px;
        width: 90%;
        height: 60%;
        clip-path: inset(0% 0% 100% 0%); /* 초기 상태 - 위에서 아래로 드러남 */
    }

    /* 세로 텍스트 열 */
    .story__mobile-text {
        writing-mode: vertical-rl;
        text-orientation: mixed;
        display: flex;
        flex-direction: row;
        gap: 3px;
    }

    /* 각 글자 스타일 */
    .story__mobile-char {
        font-family: 'YoonDokrip', serif;
        font-size: clamp(18px, 5vw, 28px);
        font-weight: 900;
        letter-spacing: 0.1em;
        line-height: 1.5;
        display: inline-block;
        /* 텍스트 내부에 이미지가 보이는 효과 */
        background-image: url('https://akcdn-yjoo0317pro.cafe24img.com/imges/main2-text-bg.jpg');
        background-size: cover;
        background-position: center;
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        /* 줄 단위 애니메이션이므로 글자는 항상 보임 */
        opacity: 1;
    }

    /* 띄어쓰기 */
    .story__mobile-space {
        display: inline-block;
        width: 0.3em;
    }

    /* 모바일 스크롤 인디케이터 */
    .story__mobile-scroll {
        position: absolute;
        bottom: 3%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        width: 10%;
    }

    .story__mobile-scroll img {
        width: 100%;
        height: auto;
        animation: scrollBounce 2s infinite;
    }

    /* =====================================================
       Mobile Brand Video Section (Section 3)
       ===================================================== */
    .brand-video {
        aspect-ratio: auto;
        height: 100vh; /* 폴백 */
        height: calc(var(--vh, 1vh) * 100); /* 사파리 대응 */
        min-height: calc(var(--vh, 1vh) * 100);
    }

    /* PC 숨김, 모바일 표시 */
    .brand-video__pc {
        display: none;
    }

    .brand-video__mobile {
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    /* 통합 배경: main3bg.jpg */
    .brand-video__mobile-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-image: url('https://akcdn-yjoo0317pro.cafe24img.com/imges/mobile/main3bg.jpg');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

    /* 비디오 썸네일 컨테이너 */
    .brand-video__mobile-video {
        position: absolute;
        top: 46%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        z-index: 4;
        cursor: pointer;
    }

    .brand-video__mobile-video img {
        width: 100%;
        height: auto;
    }

    /* 재생 버튼 */
    .brand-video__mobile-play {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 20%;
        pointer-events: none; /* 클릭이 부모(video)로 전달되도록 */
    }

    .brand-video__mobile-play img {
        width: 100%;
        height: auto;
    }

    .brand-video__mobile-play .default {
        display: block;
    }

    .brand-video__mobile-play .active {
        display: none;
    }

    .brand-video__mobile-video:active .brand-video__mobile-play .default {
        display: none;
    }

    .brand-video__mobile-video:active .brand-video__mobile-play .active {
        display: block;
    }

    /* 스크롤 인디케이터 */
    .brand-video__mobile-scroll {
        position: absolute;
        bottom: 3%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        width: 8%;
    }

    .brand-video__mobile-scroll img {
        width: 100%;
        height: auto;
        animation: scrollBounce 2s infinite;
    }

    /* =====================================================
       Mobile Kakao Event Section (Section 4)
       ===================================================== */
    .kakao-event {
        height: 100vh; /* 폴백 */
        height: calc(var(--vh, 1vh) * 100); /* 사파리 대응 */
        min-height: calc(var(--vh, 1vh) * 100);
        overflow: hidden;
    }

    /* PC 요소 숨김 */
    .kakao-event__pc {
        display: none;
    }

    /* 모바일 요소 표시 */
    .kakao-event__mobile {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* 통합 배경 이미지: main4bg.jpg */
    .kakao-event__mobile-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-image: url('https://akcdn-yjoo0317pro.cafe24img.com/imges/mobile/main4bg.jpg');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

    /* 카카오톡 버튼 */
    .kakao-event__mobile-btn {
        position: absolute;
        bottom: 30%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        display: block;
        width: 47%;
    }

    .kakao-event__mobile-btn img {
        width: 100%;
        height: auto;
    }

    .kakao-event__mobile-btn .default {
        display: block;
    }

    .kakao-event__mobile-btn .active {
        display: none;
    }

    .kakao-event__mobile-btn:active .default {
        display: none;
    }

    .kakao-event__mobile-btn:active .active {
        display: block;
    }

    /* =====================================================
       Mobile Collab Event Section (Section 5)
       ===================================================== */
    .collab-event {
        height: 100vh; /* 폴백 */
        height: calc(var(--vh, 1vh) * 100); /* 사파리 대응 */
        min-height: calc(var(--vh, 1vh) * 100);
        overflow: hidden;
    }

    /* PC 요소 숨김 */
    .collab-event__pc {
        display: none;
    }

    /* 모바일 요소 표시 */
    .collab-event__mobile {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* 통합 배경 이미지: main5bg.jpg */
    .collab-event__mobile-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-image: url('https://akcdn-yjoo0317pro.cafe24img.com/imges/mobile/main5bg.jpg');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

    /* 버튼 */
    .collab-event__mobile-btn {
        position: absolute;
        bottom: 34%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        display: block;
        width: 47%;
    }

    .collab-event__mobile-btn img {
        width: 100%;
        height: auto;
    }

    .collab-event__mobile-btn .default {
        display: block;
    }

    .collab-event__mobile-btn .active {
        display: none;
    }

    .collab-event__mobile-btn:active .default {
        display: none;
    }

    .collab-event__mobile-btn:active .active {
        display: block;
    }

    /* =====================================================
       Mobile Section 6: Coming Soon
       ===================================================== */

    .coming-soon {
        height: 100vh; /* 폴백 */
        height: calc(var(--vh, 1vh) * 100); /* 사파리 대응 */
        min-height: calc(var(--vh, 1vh) * 100);
        overflow: hidden;
    }

    /* PC 버전 숨기기 */
    .coming-soon__bg,
    .coming-soon__character,
    .coming-soon__content {
        display: none;
    }

    /* 모바일 버전 표시 */
    .coming-soon__mobile {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* 통합 배경 이미지: main6bg.jpg */
    .coming-soon__mobile-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-image: url('https://akcdn-yjoo0317pro.cafe24img.com/imges/mobile/main6bg.jpg');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

    /* 버튼 */
    .coming-soon__mobile-btn {
        position: absolute;
        bottom: 34%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        display: block;
        width: 47%;
    }

    .coming-soon__mobile-btn img {
        width: 100%;
        height: auto;
    }

    .coming-soon__mobile-btn .default {
        display: block;
    }

    .coming-soon__mobile-btn .active {
        display: none;
    }

    .coming-soon__mobile-btn:active .default {
        display: none;
    }

    .coming-soon__mobile-btn:active .active {
        display: block;
    }

    /* =====================================================
       Mobile Section 7: Coming Soon 2
       ===================================================== */

    .coming-soon-2 {
        height: 100vh; /* 폴백 */
        height: calc(var(--vh, 1vh) * 100); /* 사파리 대응 */
        min-height: calc(var(--vh, 1vh) * 100);
        overflow: hidden;
    }

    /* PC 버전 숨기기 */
    .coming-soon-2__bg,
    .coming-soon-2__character,
    .coming-soon-2__content {
        display: none;
    }

    /* 모바일 버전 표시 */
    .coming-soon-2__mobile {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* 통합 배경 이미지: main7bg.jpg */
    .coming-soon-2__mobile-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-image: url('https://akcdn-yjoo0317pro.cafe24img.com/imges/mobile/main7bg.jpg');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }
}

/* =====================================================
   추가 모바일 브레이크포인트 (반응형 미세 조정)
   ===================================================== */

/* 중간 모바일 (iPhone 13/14/15, 갤럭시 S 시리즈 등 - 390~430px) */
@media (max-width: 430px) {
    /* Section 3 (브랜드 비디오) - 스크롤 인디케이터 */
    .brand-video__mobile-scroll {
        width: 10%;
    }
}

/* 작은 모바일 (iPhone SE, 갤럭시 A 시리즈 등) */
@media (max-width: 375px) {
    /* Left Nav 조정 */
    .left-nav__logo {
        padding: 60px 15px 15px;
    }

    .left-nav__logo img {
        width: 55%;
        max-width: 100px;
    }

    .left-nav__link img {
        max-height: 22px;
    }

    /* Section 1~3 조정 */
    .hero__mobile-logo {
        width: 18%;
    }

    .hero__mobile-text {
        width: 85%;
    }

    .story__mobile-content {
        gap: 5px;
    }

    .story__mobile-text {
        font-size: clamp(14px, 4.5vw, 18px);
    }

    .brand-video__mobile-video {
        width: 95%;
    }

    .brand-video__mobile-scroll {
        width: 12%;
    }
}

/* =====================================================
   Footer
   ===================================================== */
.footer {
    width: 100%;
    background-color: #090907;
    padding: 30px 20px;
}

.footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.footer__company {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #888;
    margin-bottom: 10px;
}

.footer__info {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #666;
    line-height: 1.6;
}

/* PC에서 모바일 버전 숨김 */
.footer__info--mobile {
    display: none;
}

/* 모바일 푸터 */
@media screen and (max-width: 768px) {
    .footer {
        padding: 25px 15px;
    }

    .footer__company {
        font-size: 12px;
        margin-bottom: 8px;
    }

    /* PC 버전 숨김 */
    .footer__info--pc {
        display: none;
    }

    /* 모바일 버전 표시 */
    .footer__info--mobile {
        display: block;
    }

    .footer__info--mobile p {
        font-family: 'Noto Sans KR', sans-serif;
        font-size: 10px;
        font-weight: 400;
        color: #666;
        line-height: 1.8;
        margin-bottom: 2px;
    }
}


/* 큰 모바일 / 작은 태블릿 (iPhone Plus/Max, 갤럭시 노트 등) */
@media (min-width: 429px) and (max-width: 768px) {
    /* Section 1~3 */
    .hero__mobile-logo {
        width: 15%;
    }

    .hero__mobile-text {
        width: 70%;
    }

    .story__mobile-text {
        font-size: clamp(18px, 4vw, 24px);
    }

    .brand-video__mobile-video {
        width: 85%;
    }

    .brand-video__mobile-scroll {
        width: 7%;
    }
}

/* =====================================================
   Phase2: 2/12 오후 2시 이후 이미지 교체
   ===================================================== */

/* 모바일 Section6 배경 - Phase2 */
.coming-soon__mobile-bg--phase2 {
    background-image: url('https://akcdn-yjoo0317pro.cafe24img.com/imges/mobile/main6bg-2.jpg') !important;
}

/* [SOLDOUT] 솔드아웃 시 아래 클래스로 교체 */
/*
.coming-soon__mobile-bg--phase2-soldout {
    background-image: url('https://akcdn-yjoo0317pro.cafe24img.com/imges/mobile/main6bg-2-soldout.jpg') !important;
}
*/