/* sub04 페이지 CSS */

/* 공통 상시 루프 라이브러리 (v-float/v-wobble 등) */
@import url("./vweb-anim.css");

/* content.php .container 래퍼 무력화 */
.sub04 .container { display: none !important; }

/* sub-hero 타이틀 = Montserrat (library.css 수정금지 → 페이지서 바인딩) */
.sub-hero__title {
    font-family: var(--font-montserrat);
    font-weight: 800;
}

/* sticky 탭바 동작용 — 조상 overflow:hidden 체인 해제 (이 페이지 한정, 스크롤러=html).
   ★ !important 필수: basic_css.php 인라인 <style> 의 body/#content_wrap{overflow:hidden} 을 이기기 위함(특히 모바일). */
.sub04,
#content_wrap,
body {
    overflow: visible !important;
}

/* ===== CON01: 매장 찾기 (카카오맵 + 리스트 + 팝업) ===== */
.con01 {
    box-sizing: border-box;
    height: 121rem;
    padding-top: 16rem;
    background: #fff;

    & * { box-sizing: border-box; }

    & .con01__title {
        font-size: var(--displayS);
        letter-spacing: -0.03em;
        line-height: 1.15;
        color: #000;
    }
    & .con01__title--sub { color: #0d0e28; }
    & .con01__title-dot {
        top: -4.2rem;
        left: 21.3rem;
        width: 2.6rem;
        height: 2.6rem;
        border-radius: 50%;
        background: #ffcd30;
    }

    & .con01__sub {
        width: 46.2rem;
        height: 4.1rem;
        margin-top: 1.4rem;
        border-radius: 0.5rem;
        background: #0d0e28;
        letter-spacing: -0.06em;
        color: #fff;
    }

    & .con01__search {
        width: 58.3rem;
        margin-top: 8.4rem;
        padding-bottom: 1.5rem;
        padding-left: 3.3rem;
        border-bottom: 1px dashed rgba(0, 0, 0, 0.25);
    }
    & .con01__search-input {
        flex: 1;
        letter-spacing: -0.05em;
        line-height: 1.3;
        color: #000;
        &::placeholder { color: #999; }
    }
    & .con01__search-icon {
        width: 3.5rem;
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    & .con01__search-btn:hover .con01__search-icon { transform: scale(1.18) rotate(-8deg); }

    & .con01__map-wrap {
        margin-top: 6.2rem;
        min-height: 0; /* ★ 부모(con01 flex-col)의 flex item — min-height:auto면 리스트 100개 콘텐츠가 map-wrap을 늘려 con01 넘침. 0으로 flex:1 높이에 가둠 */
        border-top: 1px solid #0d0e28;
        background: #393332;
        overflow: hidden;
        flex: 1;
    }

    & .con01__list {
        width: 47.9rem;
        flex-shrink: 0; /* 매장 多여도 패널 폭 고정 */
        min-height: 0; /* ★ flex item min-height:auto 해제 — 없으면 콘텐츠가 높이 강제해 overflow-y 무효(휠 스크롤 안 됨) */
        padding-top: 7.4rem;
        overflow-y: auto;
        background: #fff;
        border-right: 1px solid #0d0e28;
    }
    & .con01__empty {
        padding: 6rem 2rem;
        font-size: var(--bodyL);
        letter-spacing: -0.06em;
        color: #888;
    }
    & .con01__item {
        padding-left: 6.9rem;
        padding-bottom: 5.9rem;
        border-bottom: 1px solid rgba(13, 14, 40, 0.1);
        cursor: pointer;
        &:not(:first-child) { margin-top: 5rem; }
    }
    & .con01__item-name {
        letter-spacing: -0.05em;
        line-height: 1.2;
        color: #000;
    }
    & .con01__item-addr {
        margin-top: 2.8rem;
        letter-spacing: -0.05em;
        line-height: 1.47;
        color: #000;
    }
    & .con01__naver-btn {
        margin-top: 2.2rem;
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        &:hover { transform: translateY(-0.4rem) scale(1.04); }
    }
    & .con01__plus-btn {
        top: 11.9rem;
        right: 6.2rem;
        width: 4.5rem;
        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
        &:hover { transform: rotate(180deg) scale(1.12); }
    }

    /* 우 지도 (stacking context 격리) */
    & .con01__map {
        flex: 1;
        height: 72.6rem;
        z-index: 1;
    }
    & .con01__map-inner {
        width: 100%;
        height: 100%;
    }
    /* ★ height 명시 필수 — 핀 content=img 라 로드 전 offsetHeight=0 이면 CustomOverlay yAnchor:1 보정이 0 → 첫 표시 때 핀이 좌표 아래로 처져 말풍선과 겹침(다음 클릭 재draw 때 정정). 89×89 정사각
       ★ display:block 필수 — inline 이면 baseline leading 여백이 붙어 래퍼 높이가 89→96 이 되고, yAnchor:1 이 그 하단을 좌표에 맞춰 핀 끝이 좌표보다 위로 뜸(폰트 크기 종속이라 모바일서 어긋남) */
    & .con01__marker img { display: block; width: 6rem; height: 6rem; }

    /* 기본 숨김 = opacity/visibility (display:none 이면 트랜지션 불가). 표시 = .is-open (JS 토글) */
    & .con01__popup {
        z-index: 100;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        background: rgba(55, 55, 55, 0.8);
        transition: opacity 0.3s ease, visibility 0.3s ease;
        &.is-open {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }
    }
    & .con01__popup-card {
        width: 85rem;
        height: 36rem;
        padding: 3.1rem 2.8rem;
        gap: 6.1rem;
        border-radius: 3rem;
        border: 1px solid #c3c4e5;
        background: #fff;
        transform: translateY(2rem) scale(0.98);
        transition: transform 0.3s ease;
    }
    & .con01__popup.is-open .con01__popup-card {
        transform: translateY(0) scale(1);
    }
    & .con01__popup-photo {
        width: 36.1rem;
        height: 30rem;
        border-radius: 3rem;
        overflow: hidden;
        flex-shrink: 0;
    }
    & .con01__popup-photo img {
        width: 100%;
        height: 100%;
    }
    & .con01__popup-info {
        flex: 1;
        padding-top: 5.6rem;
    }
    & .con01__popup-name {
        letter-spacing: -0.05em;
        line-height: 1.2;
        color: #000;
    }
    & .con01__popup-divider {
        width: 33.9rem;
        height: 1px;
        margin-top: 1.9rem;
        background: rgba(13, 14, 40, 0.15);
    }
    & .con01__popup-addr {
        margin-top: 3.2rem;
        letter-spacing: -0.05em;
        line-height: 1.55;
        color: #000;
    }
    & .con01__popup-close {
        top: 3.1rem;
        right: 3.1rem;
        width: 4.6rem;
    }
}

/* ===== CON02: 신규 오픈 매장 ===== */
.con02 {
    box-sizing: border-box;
    min-height: 139.2rem;
    padding-top: 11.8rem;
    background: #fff8e4;

    & * { box-sizing: border-box; }

    & .con02__inner { width: 125rem; }

    & .con02__head { margin-left: 44.4rem; }
    & .con02__dot {
        width: 2.2rem;
        height: 2.2rem;
        margin-left: 17rem;
        margin-bottom: 1.9rem;
        border-radius: 50%;
        background: var(--c-yellow);
    }
    & .con02__title {
        font-size: var(--displayS);
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1.15;
        color: #0d0e28;
    }
    & .con02__title--sub { color: #000; }
    & .con02__desc {
        margin-top: 0.7rem;
        font-size: var(--bodyXL);
        letter-spacing: -0.06em;
        line-height: 1.3;
        color: #000;
    }

    & .con02__list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 3rem;
        row-gap: 3.4rem;
        margin-top: 5.5rem;
    }

    & .con02__empty {
        margin-top: 5.5rem;
        font-size: var(--bodyXL);
        letter-spacing: -0.06em;
        color: #888;
    }

    & .con02__pagination { margin-top: 5.7rem; }
    & .con02__page {
        width: 3.3rem;
        height: 3.3rem;
        font-size: var(--bodyXL);
        letter-spacing: -0.06em;
        line-height: 1.3;
        color: #000;
        text-decoration: none;
        border-radius: 50%;
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease;
        &:hover { transform: scale(1.25); background: #ffe07a; }
    }
    & .con02__page--active {
        border-radius: 50%;
        background: #0d0e28;
        color: #fff;
    }
}

/* 공통 카드 블록 (con02 / con03 재사용) */
.store-card {
    border-radius: 2rem;
    overflow: hidden;
    padding-bottom: 2.3rem;
    background: #fff;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;

    &:hover {
        transform: translateY(-1.2rem);
        box-shadow: 0 18px 40px rgba(13, 14, 40, 0.16);
    }
    &:hover .store-card__thumb img { transform: scale(1.06); }

    /* 썸네일 = 고정높이 박스 — 게시판 큰 이미지 들어와도 레이아웃 안 깨짐(object-fit cover 크롭) */
    & .store-card__thumb {
        height: 25.1rem;
    }
    & .store-card__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* ImgResize 는 data-resized로 skip, 크기는 CSS가 관리 */
        transition: transform 0.45s ease;
    }
    /* 점명/설명 = 1줄 …처리 — 게시판 긴 제목 들어와도 카드 넘침 방지 */
    & .store-card__name {
        margin-top: 3.4rem;
        padding: 0 2rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: var(--headS);
        font-weight: 700;
        letter-spacing: -0.06em;
        line-height: 1.18;
        color: #000;
    }
    & .store-card__note {
        margin-top: 1.7rem;
        padding: 0 2rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: var(--bodyM);
        letter-spacing: -0.06em;
        line-height: 1.53;
        color: #000;
    }
}

/* ===== CON03: 우수 매장 운영 사례 ===== */
.con03 {
    box-sizing: border-box;
    min-height: 140.4rem;
    padding-top: 8.45rem;
    background: #fff;

    & * { box-sizing: border-box; }

    & .con03__inner { width: 125.1rem; }

    /* 엠블럼 wrap: W/H CSS 명시 안함(ImgResize 자연크기 처리) */
    & .con03__title {
        margin-top: 2.4rem;
        font-size: var(--displayS);
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1.15;
        color: #0d0e28;
    }
    & .con03__desc {
        margin-top: 1.15rem;
        font-size: var(--bodyXL);
        letter-spacing: -0.06em;
        line-height: 1.3;
        color: #000;
    }

    & .con03__list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 3rem;
        row-gap: 3.2rem;
        margin-top: 5.15rem;
    }

    /* con02 와 디자인 상이 — 공통 .store-card 의 카드레벨 라운드/클립/흰배경 무효화하고 썸네일에 직접 부여 */
    & .store-card {
        border-radius: 0;
        overflow: visible;
        padding-bottom: 0;
        background: transparent;

        & .store-card__thumb {
            border-radius: 2rem;
            overflow: hidden;
        }
    }

    & .con03__empty {
        margin-top: 5.15rem;
        font-size: var(--bodyXL);
        letter-spacing: -0.06em;
        color: #888;
    }

    & .con03__pagination { margin-top: 5.7rem; }
    & .con03__page {
        width: 3.3rem;
        height: 3.3rem;
        font-size: var(--bodyXL);
        letter-spacing: -0.06em;
        line-height: 1.3;
        color: #000;
        border-radius: 50%;
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease;
        &:hover { transform: scale(1.25); background: #ffe07a; }
    }
    & .con03__page--active {
        border-radius: 50%;
        background: #0d0e28;
        color: #fff;
    }
}

.store-card__note--flank {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: #7c7c7c;

    &::before,
    &::after {
        content: "";
        flex: 1;
        border-top: 1px dashed rgba(13, 12, 36, 0.1);
    }
}

/* ── sticky tabnav = 탭 전환 (앵커 스크롤 아님). 클릭 패널만 노출 ── */
.con01.is-hidden,
.con02.is-hidden,
.con03.is-hidden {
    display: none;
}
.tabnav__link {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}
/* dot 인디케이터 = active 탭에만 (library .tabnav__dot) */
.tabnav__dot {
    display: none;
}
.tabnav__item--active .tabnav__dot {
    display: block;
}

/* ============================================================
   지도 모바일 터치 잠금 오버레이 (JS setupMobileMapTouchLock 생성)
   좌표/크기는 JS 가 지도 컨테이너 실측해 inline 주입
   ============================================================ */
.map-touch-lock-parent {
    position: relative;
}
.map-touch-lock {
    position: absolute;
    z-index: 30;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    color: #fff;
    background: rgba(0, 0, 0, 0.58);
    border: 0;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: pan-y;
}
.map-touch-lock-text {
    display: block;
    padding: 0 2rem;
    font-size: var(--bodyM);
    font-weight: 700;
    line-height: 1.35;
    word-break: keep-all;
}
.is-map-touch-unlocked .map-touch-lock {
    opacity: 0;
    pointer-events: none;
}

/* ============================================================
   모바일 (≤599px) — 폰트 토큰은 library 자동 재매핑, 간격/치수만 vw 재정의
   ============================================================ */
@media screen and (max-width:599px) {

    /* ===== con01: 좌 리스트 / 우 지도 → 상하 스택 ===== */
    .sub04 .con01 {
        height: auto;
        padding-top: 18vw;
        padding-bottom: 16vw;
    }
    /* 타이틀 노란 dot = .pc-flex 유틸이 모바일 숨김 토글 (중앙정렬 시 좌표 어긋남) */
    .sub04 .con01__sub {
        width: auto;
        max-width: 86vw;
        height: auto;
        padding: 2vw 5vw;
        margin-top: 4vw;
    }

    .sub04 .con01__search {
        width: 88vw;
        margin-top: 9vw;
        padding-left: 4vw;
        padding-bottom: 2.5vw;
    }
    .sub04 .con01__search-icon { width: 6vw; }
    .sub04 .con01__search-icon img { width: 6vw !important; height: auto !important; }

    /* 맵 래퍼: 좌우 → 상하 (지도 위/리스트 아래 = column-reverse) */
    .sub04 .con01__map-wrap {
        flex-direction: column-reverse;
        height: auto;
        margin-top: 9vw;
    }
    .sub04 .con01__list {
        width: 100%;
        max-height: 130vw;
        padding-top: 5vw;
        border-right: none;
        border-top: 1px solid #0d0e28;
    }
    .sub04 .con01__item {
        padding-left: 6vw;
        padding-bottom: 6vw;
    }
    .sub04 .con01__item:not(:first-child) { margin-top: 6vw; }
    .sub04 .con01__item-addr { margin-top: 3vw; }
    .sub04 .con01__naver-btn { margin-top: 3vw; }
    .sub04 .con01__naver-btn img { width: 28vw !important; height: auto !important; }
    .sub04 .con01__plus-btn {
        top: 1vw;
        right: 4vw;
        width: 7vw;
    }
    .sub04 .con01__plus-btn img { width: 7vw !important; height: auto !important; }

    /* 지도: 풀폭 + 비율 높이 (PC flex:1 해제 — column에서 flex-basis 0%면 height 0됨) */
    .sub04 .con01__map {
        flex: none;
        width: 100%;
        height: 90vw;
    }

    .sub04 .con01__popup-card {
        flex-direction: column;
        width: 90vw;
        height: auto;
        padding: 6vw 5vw;
        gap: 5vw;
    }
    .sub04 .con01__popup-photo {
        width: 100%;
        height: 55vw;
    }
    .sub04 .con01__popup-info { padding-top: 0; }
    .sub04 .con01__popup-divider { width: 100%; margin-top: 3vw; }
    .sub04 .con01__popup-addr { margin-top: 4vw; }
    .sub04 .con01__popup .con01__naver-btn img { width: 32vw !important; height: auto !important; }
    .sub04 .con01__popup-close {
        top: 4vw;
        right: 4vw;
        width: 7vw;
    }
    .sub04 .con01__popup-close img { width: 7vw !important; height: auto !important; }

    /* ===== con02: 신규 오픈 (3열 → 2열) ===== */
    .sub04 .con02 {
        min-height: 0;
        padding-top: 16vw;
        padding-bottom: 16vw;
    }
    .sub04 .con02__inner {
        width: 100%;
        padding-left: 6vw;
        padding-right: 6vw;
    }
    .sub04 .con02__head {
        margin-left: 0;
        align-items: center;
        text-align: center;
    }
    .sub04 .con02__dot { margin-left: 0; margin-bottom: 3vw; }
    .sub04 .con02__desc { margin-top: 2vw; white-space: normal; }
    .sub04 .con02__list {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 3vw;
        row-gap: 4vw;
        margin-top: 8vw;
    }
    .sub04 .con02__pagination { margin-top: 9vw; }
    .sub04 .con02__page { width: 6vw; height: 6vw; }

    /* ===== con03: 우수 매장 (3열 → 2열) ===== */
    .sub04 .con03 {
        min-height: 0;
        padding-top: 16vw;
        padding-bottom: 16vw;
    }
    .sub04 .con03__inner {
        width: 100%;
        padding-left: 6vw;
        padding-right: 6vw;
    }
    .sub04 .con03__emblem img { width: 30vw !important; height: auto !important; }
    .sub04 .con03__title { margin-top: 3vw; }
    .sub04 .con03__desc { margin-top: 2vw; white-space: normal; }
    .sub04 .con03__list {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 3vw;
        row-gap: 4vw;
        margin-top: 8vw;
    }
    .sub04 .con03__pagination { margin-top: 9vw; }
    .sub04 .con03__page { width: 6vw; height: 6vw; }

    /* ===== store-card 공통 (con02/con03): 썸네일 높이 모바일 비율 ===== */
    .sub04 .store-card__thumb { height: 28vw; }
    .sub04 .store-card__name { margin-top: 4vw; }
    .sub04 .store-card__note { margin-top: 2vw; }
}