/* ============================================================
   page1.css  —  style.css 위에 슬라이더 기능만 추가
   style.css 의 모든 스타일(.page-section, .desktop-bg,
   .mobile-image, .mobile-text, .main-title 등)을 그대로 사용
   ============================================================ */


/* ========================
   슬라이드 섹션 — 기존 .page-section 위에 position 보정
   ======================== */
.slide-section {
    /* style.css 의 .page-section 그대로 사용하되
       슬라이드 아이템이 absolute 로 쌓이므로 position: relative 확인 */
    padding: 0; /* 패딩은 각 슬라이드 안에서 처리 */
}


/* ========================
   슬라이드 트랙 — 섹션을 꽉 채우는 컨테이너
   ======================== */
.slide-track {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}


/* ========================
   슬라이드 아이템
   — 기본: 완전히 숨김
   — .active: 보임 (페이드 전환)
   ======================== */
.slide-item {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* 데스크탑: index.html 의 .page-section 과 동일한 flex 레이아웃 */
    display: flex;
    align-items: flex-end;
    padding: 0 0 50px 40px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.7s ease;
}

.slide-item.active {
    opacity: 1;
    pointer-events: auto;
}

/* slide-item 안의 desktop-bg 는 style.css .desktop-bg 그대로 */
/* slide-item 안의 mobile-image, mobile-text 는 style.css 그대로 */


/* ========================
   화살표
   ======================== */
.slide-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.55);
    font-size: 2.2rem;
    cursor: pointer;
    padding: 14px 18px;
    transition: color 0.3s, opacity 0.3s;
    line-height: 1;
    user-select: none;
}

.slide-arrow:hover { color: #fff; }
.slide-prev { left: 10px; }
.slide-next { right: 10px; }
.slide-arrow.hidden { opacity: 0; pointer-events: none; }


/* ========================
   점 인디케이터
   ======================== */
.slide-dots {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 100;
}

.slide-dot {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
}

.slide-dot.active {
    background: #fff;
    transform: scale(1.3);
}


/* ========================
   모바일 (768px 이하)
   — style.css 모바일 구조 그대로 사용
   — 슬라이드 트랙/아이템만 보정
   ======================== */
@media (max-width: 768px) {

    /* 슬라이드 섹션: height auto, static (style.css 와 동일하게) */
    .slide-section {
        position: static;
        height: auto;
        min-height: unset;
        display: block;
        overflow: hidden;
    }

    /* 트랙: absolute → static, 높이 auto */
    .slide-track {
        position: static;
        height: auto;
        width: 100%;
    }

    /* 슬라이드 아이템: absolute → static, 숨김은 display:none 으로 */
    .slide-item {
        position: static;
        display: none;           /* 기본 숨김 */
        flex-direction: column;  /* 이미지 위 / 텍스트 아래 */
        align-items: stretch;
        padding: 0;
        height: auto;
        opacity: 1;
        pointer-events: auto;
        transition: none;
    }

    .slide-item.active {
        display: flex;           /* active 만 보임 */
    }

    /* 화살표: 모바일에서는 텍스트 영역 오른쪽에 배치 */
    .slide-arrow {
        /* absolute 해제 — mobile-text 안으로 끌어당길 수 없으므로
           섹션 하단 텍스트 블록 위에 겹쳐서 우측에 배치 */
        position: absolute;
        top: auto;
        bottom: 0;               /* 텍스트 영역 기준으로 잡힘 */
        transform: none;
        font-size: 1.5rem;
        padding: 10px 14px;
        /* 섹션이 static이라 absolute 기준이 없음
           → relative wrapper 로 감싸는 대신 JS 로 처리 */
    }

    /* 모바일 화살표: 텍스트 블록 옆에 자연스럽게 붙이기
       .slide-section 을 relative 로 만들어 기준점 확보 */
    .slide-section {
        position: relative;
    }

    .slide-prev {
    left: auto;
    right: 60px;  /* < 버튼 위치 */
    bottom: 20px;
    top: auto;
    transform: none;
}

.slide-next {
    right: 20px;  /* > 버튼 위치 */
    bottom: 20px;
    top: auto;
    transform: none;
}

    /* 점 인디케이터: 텍스트 아래에 static 으로 */
    .slide-dots {
        position: static;
        transform: none;
        justify-content: center;
        padding: 12px 0 16px;
        background: #000;
    }
}