/* =====================================================================
 * 서비스 퀵메뉴 — 홈 상단 가로 스트립 + 하단 네비 '전체' 시트 공용
 *
 * 전에는 이 CSS 가 index.php 안에 인라인으로 박혀 있어서 홈에서만 살아 있었다.
 * 서비스 11개가 홈을 떠나는 순간 사라지던 원인이라 파일로 빼내
 * 어느 페이지에서나 시트로 꺼내 쓸 수 있게 했다.
 * 마크업은 inc/service-labels.php 의 nz_render_service_menu_item() 하나가 그린다.
 * ===================================================================== */

/* ---------- 공용: 항목 ---------- */

.quick-menu-container {
    position: relative;
    margin: 1px 0 15px 0;
    /* Clip right side so the peek effect gives clear visual cue */
    overflow: hidden;
    padding-right: 0;
}

.quick-menu {
    display: flex;
    overflow-x: scroll;
    gap: 10px;
    padding: 4px 36px 0 4px;
    /* Extra right padding so last visible item peeks clearly */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x proximity;
    scroll-padding-left: 4px;
    touch-action: pan-x;
}

.quick-menu::-webkit-scrollbar {
    display: none;
}

.quick-menu-item {
    text-decoration: none;
    text-align: center;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    transition: transform 0.2s;
    /* 4 items fully visible + ~half of 5th creates peek cue:
       (containerWidth - 4*gap) / 4.5 items ≈ 20vw per item */
    flex: 0 0 calc(20vw - 4px);
    min-width: 60px;
    max-width: 80px;
    scroll-snap-align: start;
}

.quick-menu-item:hover {
    transform: translateY(-2px);
}

.icon-box {
    width: 39px;
    height: 39px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
    border: none;
    box-shadow: none;
}

.icon-box svg {
    width: 32px;
    height: 32px;
    stroke-width: 2;
}

.icon-box.market {
    color: var(--primary-color);
}

.icon-box.group-buy {
    color: #1c7ed6;
}

.icon-box.community {
    color: #0ca678;
}

.icon-box.business {
    color: #7950f2;
}

.icon-box.car {
    color: #f08c00;
}

.icon-box.job {
    color: #fa5252;
}

.icon-box.hobby {
    color: #e64980;
}

.icon-box.lesson {
    color: #cc5de8;
}

.icon-box.rent-flat {
    color: #20c997;
}

.icon-box.produce {
    color: #40c057;
}

.icon-box.brand {
    color: #0b7285;
}

/* 한국직송 — 비행기. 공구(파랑)와 나란히 서므로 남색 계열로 구분 */
.icon-box.korea-direct {
    color: #364fc7;
}

/* 동네소식(시트) — community 와 같은 초록 계열 */
.icon-box.news {
    color: #0ca678;
}

/* 시트 전용으로 새로 들어온 두 개 */
.icon-box.special {
    color: #f76707;
}

.icon-box.desk {
    color: #495057;
}

.quick-menu-item:hover .icon-box {
    transform: translateY(-4px) scale(1.1);
}

.quick-menu-item:hover .icon-box.market {
    color: #e65f00;
}

.quick-menu-item:hover .icon-box.group-buy {
    color: #1864ab;
}

.quick-menu-item:hover .icon-box.community {
    color: #099268;
}

.quick-menu-item:hover .icon-box.business {
    color: #6741d9;
}

.quick-menu-item:hover .icon-box.car {
    color: #e67700;
}

.quick-menu-item:hover .icon-box.job {
    color: #e03131;
}

.quick-menu-item:hover .icon-box.hobby {
    color: #d6336c;
}

.quick-menu-item:hover .icon-box.lesson {
    color: #ae3ec9;
}

.quick-menu-item:hover .icon-box.rent-flat {
    color: #12b886;
}

.quick-menu-item:hover .icon-box.produce {
    color: #2f9e44;
}

.quick-menu-item:hover .icon-box.brand {
    color: #095c6b;
}

.quick-menu-item:hover .icon-box.korea-direct {
    color: #2b3fa3;
}

.quick-menu-item:hover .icon-box.news {
    color: #099268;
}

.quick-menu-item:hover .icon-box.special {
    color: #e8590c;
}

.quick-menu-item:hover .icon-box.desk {
    color: #212529;
}

.menu-label {
    font-size: 13px;
    font-weight: 600;
    color: #495057;
    letter-spacing: -0.3px;
}

/* 반응형 그리드 조정 */
@media (min-width: 768px) {
    .quick-menu-container {
        margin-bottom: 30px;
    }

    .quick-menu-wrapper {
        position: relative;
        display: flex;
        align-items: center;
    }

    .quick-menu-container .quick-menu {
        display: flex !important;
        gap: clamp(10px, 1.5vw, 25px) !important;
        overflow: hidden !important;
        /* 모든 스크롤 및 드래그 차단 */
        padding: 10px 0 !important;
        justify-content: space-evenly !important;
        /* 항상 균등 배분 */
        width: 100%;
    }

    /* 화살표 버튼 및 그림자 레이아웃에서 제거 */
    .nav-arrow,
    .quick-menu-wrapper::before,
    .quick-menu-wrapper::after {
        display: none !important;
    }

    .quick-menu-container .quick-menu-item {
        flex: 0 0 auto !important;
        min-width: 80px !important;
        max-width: 120px !important;
    }
}


/* =====================================================================
 * 하단 네비 '전체' 시트
 * 홈이 아닌 페이지에서도 전체 서비스로 갈 수 있는 유일한 상시 경로다.
 * ===================================================================== */

.nz-service-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.nz-service-sheet-backdrop.open {
    opacity: 1;
    visibility: visible;
}

.nz-service-sheet {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%) translateY(100%);
    width: 100%;
    max-width: 1200px;
    background: #fff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.15);
    z-index: 1999;
    /* 하단 네비(80px) 위로 올라오게 둔다 — 시트를 연 채로 다른 탭을 누를 수 있어야 한다 */
    padding: 8px 16px calc(88px + env(safe-area-inset-bottom, 0px));
    max-height: 76vh;
    overflow-y: auto;
    visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.28s;
}

.nz-service-sheet.open {
    transform: translateX(-50%) translateY(0);
    visibility: visible;
}

/* 손잡이 — 끌어내릴 수 있어 보이므로 실제 닫기 버튼으로 만든다.
   터치 목표를 넉넉히 주되(세로 20px) 보이는 막대는 4px 로 유지한다. */
.nz-service-sheet__grip {
    display: block;
    width: 60px;
    height: 20px;
    padding: 8px 10px;
    margin: 0 auto 8px;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.nz-service-sheet__grip::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: #dee2e6;
}

.nz-service-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 14px;
}

.nz-service-sheet__title {
    font-size: 15px;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 0 4px;
    letter-spacing: -0.3px;
}

.nz-service-sheet__close {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: #f1f3f5;
    color: #495057;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.nz-service-sheet__close svg {
    width: 18px;
    height: 18px;
}

.nz-service-sheet__close:hover,
.nz-service-sheet__close:focus-visible {
    background: #e9ecef;
    color: #1a1a2e;
}

/* 시트가 열리면 배경(1998)이 하단 네비(1000)를 덮어 '전체' 버튼을 다시 누를 수 없었다.
   열려 있는 동안만 네비를 배경 위로 올려, 토글로 닫거나 다른 탭으로 바로 이동할 수 있게 한다.
   (전역 z-index 를 건드리면 다른 페이지의 모달과 충돌하므로 이 상태에서만 적용한다.) */
body.nz-sheet-open .bottom-nav {
    z-index: 2000;
}

/* 시트 안에서는 가로 스크롤이 아니라 그리드로 편다 */
.nz-service-sheet .quick-menu {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px 8px;
    overflow: visible;
    padding: 0;
    touch-action: auto;
}

.nz-service-sheet .quick-menu-item {
    flex: none;
    min-width: 0;
    max-width: none;
}

@media (min-width: 480px) {
    .nz-service-sheet .quick-menu {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (min-width: 768px) {
    .nz-service-sheet .quick-menu {
        grid-template-columns: repeat(7, 1fr);
    }
}

/* 하단 네비의 '전체' 버튼 — .nav-item 과 같은 모양이어야 해서 button 기본값을 지운다 */
button.nav-item {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

button.nav-item.open {
    color: var(--primary-color);
}