/* ═══════════════════════════════════════════════════
   스크롤 방향 연동 — 헤더 / 하단 네비 숨김·표시
═══════════════════════════════════════════════════ */

/* 헤더 영역 — height는 JS가 측정 후 주입, CSS는 transition만 담당
   padding-top/bottom도 함께 전환해야 height:0 후 공백이 남지 않음  */
.header-top,
.prod-search-bar {
    overflow: hidden;
    transition: height         0.26s cubic-bezier(0.4,0,0.2,1),
                padding-top    0.26s cubic-bezier(0.4,0,0.2,1),
                padding-bottom 0.26s cubic-bezier(0.4,0,0.2,1),
                opacity        0.2s  ease;
    will-change: height, opacity;
}

/* header-product-detail-bar: 인라인 height 없이 CSS로 직접 제어
   min-height:52px(head.php)와 동일하게 height도 52px 고정 → transition 가능 */
.header-product-detail-bar {
    overflow: hidden;
    height: 52px;
    transition: height  0.26s cubic-bezier(0.4,0,0.2,1),
                opacity 0.2s  ease;
    will-change: height, opacity;
}
.header {
    transition: box-shadow 0.2s ease;
}

/* ─ 스크롤 다운 상태 ─ */
body.sd-scroll-down .header-top,
body.sd-scroll-down .prod-search-bar,
body.sd-scroll-down .header-product-detail-bar {
    height:         0 !important;
    padding-top:    0 !important;
    padding-bottom: 0 !important;
    opacity:        0;
}
body.sd-scroll-down .prod-search-bar {
    margin-bottom: 0 !important;
}
body.sd-scroll-down .header-product-detail-bar {
    min-height: 0 !important;
}
body.sd-scroll-down .header {
    box-shadow: none;
}

/* ─ 하단 네비바 슬라이드 다운 ─ */
.bottom-nav {
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
}
body.sd-scroll-down .bottom-nav {
    transform: translateY(100%);
}

/* ─ 상품상세 전용 ─────────────────────────────────── */
/* 탭 네비: 헤더 숨김 시 top:0에 부드럽게 붙음 */
.prod-detail-tab-navigation {
    transition: top 0.26s cubic-bezier(0.4,0,0.2,1);
}
body.sd-scroll-down .prod-detail-tab-navigation {
    top: 0 !important;
}

/* sdCtn: prod-detail-bottom-action 위에 고정
   --sd-pda-h 는 JS가 측정 후 주입 (기본 68px)       */
body.product-detail-page #sdCtn {
    bottom: calc(var(--sd-pda-h, 68px) + 12px + env(safe-area-inset-bottom, 0px));
}
/* sd-scroll-down 상태에서도 같은 위치 유지 (겹침 방지) */
body.product-detail-page.sd-scroll-down #sdCtn {
    bottom: calc(var(--sd-pda-h, 68px) + 12px + env(safe-area-inset-bottom, 0px));
}
/* 옵션 시트 열림 → sdCtn 숨김 / 닫힘 → 복구
   body.prod-detail-option-open 은 sdOpenProductOptionSheet() 에서 토글   */
body.prod-detail-option-open #sdCtn {
    opacity: 0 !important;
    pointer-events: none !important;
}


/* ═══════════════════════════════════════════════════
   플로팅 CTN (카톡문의 / 전화문의 / TOP)
   — 메인·상품리스트·상품상세 전용, 스크롤 200px+ 노출
═══════════════════════════════════════════════════ */
#sdCtn {
    position: fixed;
    right:  14px;
    bottom: calc(60px + 12px + env(safe-area-inset-bottom, 0px));
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap: 8px;
    z-index: 9000;
    /* bottom-nav 숨겨질 때 내려옴 / 옵션시트 열릴 때 페이드아웃 */
    transition: bottom  0.28s cubic-bezier(0.4,0,0.2,1),
                opacity 0.2s  ease;
}
body.sd-scroll-down #sdCtn {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

.sd-ctn-btn {
    width:  50px;
    height: 50px;
    border-radius: 50%;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    gap: 1px;
    cursor:     pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.18);
    text-decoration: none;
    border:  none;
    outline: none;
    -webkit-tap-highlight-color: transparent;

    /* 초기 숨김 — 순차 등장을 위한 기본값 */
    opacity:       0;
    transform:     scale(0.72) translateY(6px);
    pointer-events: none;
    transition: opacity   0.22s ease,
                transform 0.22s ease,
                box-shadow 0.15s;
}
.sd-ctn-btn:active {
    transform:  scale(0.92) !important;
    box-shadow: 0 1px 5px rgba(0,0,0,0.15);
}
.sd-ctn-btn--kakao { background: #FEE500; color: #3A1D1D; }
.sd-ctn-btn--tel   { background: #2DB400; color: #fff;    }
.sd-ctn-btn--top   { background: #fff;    color: #333; border: 1.5px solid #e0e0e0; }

.sd-ctn-btn__icon  { font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.sd-ctn-btn__label { font-size: 9px; font-weight: 700; letter-spacing: -.3px; line-height: 1; white-space: nowrap; }

/* 스크롤 200px+ → #sdCtn.visible 추가 → 순차 등장
   순서: TOP(0ms) → 전화(120ms) → 카톡(240ms)          */
#sdCtn.visible .sd-ctn-btn {
    opacity:       1;
    transform:     none;
    pointer-events: auto;
}
#sdCtn.visible .sd-ctn-btn--top   { transition-delay: 0s;     }
#sdCtn.visible .sd-ctn-btn--tel   { transition-delay: 0.12s;  }
#sdCtn.visible .sd-ctn-btn--kakao { transition-delay: 0.24s;  }

/* Wrapper constraints for desktop/mobile hybrid */
.salonday-layout-wrapper {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    background-color: #fff;
    min-height: 100vh;
    box-shadow: 0 0 20px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    
}

/* Fix fixed elements to wrapper max-width */
.bottom-nav, .prod-detail-bottom-action {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 760px !important;
}

body.sd-scroll-down .bottom-nav {
    transform: translate(-50%, 100%) !important;
}

body.sd-scroll-down .prod-detail-bottom-action {
    transform: translate(-50%, 100%) !important;
}

/* 모달 열림 시 하단 고정 액션바 숨김 처리 (버튼 중복 노출 방지) */
body.prod-detail-option-open .prod-detail-bottom-action {
    display: none !important;
}