@charset "utf-8";

/* ============================================================
   intro 페이지 — Tailwind로 처리하기 어려운 보조 스타일
   ============================================================ */

/* 관리자 편집 버튼 숨김 */
.ctt_admin {
    display: none;
}

/* ------------------------------------------------------------
   진료시간 — 카드 좌(요일·뱃지) / 우(시간) 가로 배치
   Tailwind flex-col / md:flex-row 충돌·p 태그 block 영향 방지
   ------------------------------------------------------------ */
.sh-intro-hours-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.sh-intro-hours-card__meta {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    min-width: 0;
}

.sh-intro-hours-card__time {
    margin: 0;
    width: auto;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .sh-intro-hours-card {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
    }
}

/* ------------------------------------------------------------
   스카힐 둘러보기 — 갤러리 슬라이드
   - 비활성 300px / 활성 450px / 간격 30px (PC) — scale 미사용, 겹침 없음
   - 슬라이드·이미지 너비는 JS progress 보간 (width transition 없음 → 중앙 정렬 유지)
   - overlay opacity만 transition 적용
   - 중앙 슬라이드(.is-center)만 클릭 가능
   - 전환 중 recenter/slideTo 호출 금지 → 이동 후 튀는 현상 방지
   - loop 점프는 transitionEnd에서만 처리
   ------------------------------------------------------------ */

.sh-intro-gallery-stage {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

.sh-intro-gallery-swiper {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}

.sh-intro-gallery-swiper .swiper-wrapper {
    align-items: center;
}

/* 모바일 — 기본(비활성) 크기, 트랙 높이 220px */
.sh-intro-gallery-swiper .swiper-slide {
    width: 180px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.sh-intro-gallery-swiper .swiper-slide .sh-intro-gallery-btn {
    width: 180px;
    height: 180px;
    flex-shrink: 0;
}

.sh-intro-gallery-swiper .swiper-slide .sh-intro-gallery-overlay {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sh-intro-gallery-swiper .swiper-slide:not(.is-center) .sh-intro-gallery-btn {
    pointer-events: auto;
    cursor: pointer;
}

.sh-intro-gallery-swiper .swiper-slide.is-center {
    z-index: 2;
}

.sh-intro-gallery-swiper .swiper-slide.is-center .sh-intro-gallery-btn {
    pointer-events: auto;
    cursor: pointer;
}

/* 태블릿 */
@media (min-width: 768px) {
    .sh-intro-gallery-swiper .swiper-slide {
        width: 240px;
        height: 320px;
    }

    .sh-intro-gallery-swiper .swiper-slide .sh-intro-gallery-btn {
        width: 240px;
        height: 240px;
    }
}

/* PC — 기본 300px, 활성 450px (JS 보간) */
@media (min-width: 1024px) {
    .sh-intro-gallery-swiper .swiper-slide {
        width: 300px;
        height: 450px;
    }

    .sh-intro-gallery-swiper .swiper-slide .sh-intro-gallery-btn {
        width: 300px;
        height: 300px;
    }
}

/* ------------------------------------------------------------
   오시는 길 — 카카오맵
   ------------------------------------------------------------ */
.sh-intro-location-map {
    width: 100%;
    min-height: 240px;
    overflow: hidden;
}

@media (min-width: 768px) {
    .sh-intro-location-map {
        min-height: 300px;
    }
}

@media (min-width: 1024px) {
    .sh-intro-location-map {
        min-height: 377px;
    }
}

.sh-intro-location .root_daum_roughmap,
.sh-intro-location .root_daum_roughmap_landing {
    width: 100% !important;
}

.sh-intro-location .root_daum_roughmap_landing .wrap_map {
    width: 100% !important;
}

/* 로드뷰·길찾기·지도크게보기, 주소·전화 영역 숨김 */
.sh-intro-location .root_daum_roughmap_landing .wrap_controllers,
.sh-intro-location .root_daum_roughmap_landing .cont {
    display: none !important;
}