/* 전 페이지 모바일 스와이프 안내 통합 적용 - 2026-07-04
   적용 대상: 프리미엄 추천 / 지역 바로가기 / 업소 형태 */
@media (max-width: 900px){
  /* 공통: 가로 스크롤은 고객이 옆으로 넘길 수 있게 오른쪽을 살짝 남김 */
  .premium-slider,
  .site-region-inner,
  .type-nav-box{
    position: relative !important;
  }

  /* =========================
     프리미엄 추천 스와이프 표시
     ========================= */
  .premium-strip{
    overflow: hidden !important;
  }
  .premium-slider{
    overflow: hidden !important;
  }
  .premium-track{
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 31.5% !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 44px 4px 12px !important;
    scrollbar-width: none !important;
    -webkit-mask-image: linear-gradient(90deg,#000 0%,#000 calc(100% - 52px),rgba(0,0,0,.35) calc(100% - 20px),transparent 100%) !important;
            mask-image: linear-gradient(90deg,#000 0%,#000 calc(100% - 52px),rgba(0,0,0,.35) calc(100% - 20px),transparent 100%) !important;
  }
  .premium-track::-webkit-scrollbar{display:none !important;}
  .premium-card{
    scroll-snap-align: start !important;
  }
  .premium-arrow{display:none !important;}
  .premium-slider::before{
    content:'›' !important;
    position:absolute !important;
    right:8px !important;
    top:42% !important;
    transform:translateY(-50%) !important;
    z-index:20 !important;
    width:32px !important;
    height:46px !important;
    border-radius:999px !important;
    display:grid !important;
    place-items:center !important;
    color:#111 !important;
    font-size:27px !important;
    font-weight:1000 !important;
    background:linear-gradient(135deg,#ffe08a,#d59a2f) !important;
    box-shadow:0 10px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.18) inset !important;
    pointer-events:none !important;
    animation:swipeHintNudge 1.35s ease-in-out infinite !important;
  }
  .premium-slider::after{display:none !important; content:none !important;}
  .premium-swipe-hint{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:max-content !important;
    max-width:calc(100% - 24px) !important;
    margin:9px auto 0 !important;
    padding:7px 13px !important;
    border-radius:999px !important;
    color:#f7d27a !important;
    font-size:11.5px !important;
    font-weight:900 !important;
    letter-spacing:-.03em !important;
    background:rgba(247,210,122,.09) !important;
    border:1px solid rgba(247,210,122,.26) !important;
    box-shadow:0 10px 24px rgba(0,0,0,.22) !important;
  }

  /* =========================
     지역 바로가기 스와이프 표시
     ========================= */
  .site-region-nav{
    overflow:hidden !important;
  }
  .site-region-grid{
    display:flex !important;
    grid-template-columns:none !important;
    gap:8px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x mandatory !important;
    -webkit-overflow-scrolling:touch !important;
    padding:2px 44px 8px 0 !important;
    scrollbar-width:none !important;
    -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 calc(100% - 52px),rgba(0,0,0,.35) calc(100% - 20px),transparent 100%) !important;
            mask-image:linear-gradient(90deg,#000 0%,#000 calc(100% - 52px),rgba(0,0,0,.35) calc(100% - 20px),transparent 100%) !important;
  }
  .site-region-grid::-webkit-scrollbar{display:none !important;}
  .site-region-card{
    flex:0 0 calc((100% - 18px) / 3.15) !important;
    scroll-snap-align:start !important;
  }
  .site-region-inner::before{
    content:'›' !important;
    position:absolute !important;
    right:4px !important;
    top:calc(50% + 18px) !important;
    transform:translateY(-50%) !important;
    z-index:20 !important;
    width:30px !important;
    height:43px !important;
    border-radius:999px !important;
    display:grid !important;
    place-items:center !important;
    color:#111 !important;
    font-size:25px !important;
    font-weight:1000 !important;
    background:linear-gradient(135deg,#ffe08a,#d59a2f) !important;
    box-shadow:0 10px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.18) inset !important;
    pointer-events:none !important;
    animation:swipeHintNudge 1.35s ease-in-out infinite !important;
  }
  .site-region-inner::after{display:none !important; content:none !important;}
  .site-region-swipe-hint{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:max-content !important;
    max-width:100% !important;
    margin:7px auto 0 !important;
    padding:7px 13px !important;
    border-radius:999px !important;
    color:#f2d27b !important;
    background:rgba(215,170,72,.11) !important;
    border:1px solid rgba(232,190,94,.27) !important;
    font-size:11.5px !important;
    font-weight:900 !important;
    letter-spacing:-.02em !important;
    box-shadow:0 8px 22px rgba(0,0,0,.20) !important;
  }

  /* =========================
     업소 형태 스와이프 표시
     ========================= */
  .type-nav-grid{
    display:flex !important;
    grid-template-columns:none !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    gap:9px !important;
    scroll-snap-type:x mandatory !important;
    -webkit-overflow-scrolling:touch !important;
    padding:2px 44px 8px 0 !important;
    scrollbar-width:none !important;
    -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 calc(100% - 52px),rgba(0,0,0,.35) calc(100% - 20px),transparent 100%) !important;
            mask-image:linear-gradient(90deg,#000 0%,#000 calc(100% - 52px),rgba(0,0,0,.35) calc(100% - 20px),transparent 100%) !important;
  }
  .type-nav-grid::-webkit-scrollbar{display:none !important;}
  .type-chip{
    flex:0 0 31% !important;
    min-width:31% !important;
    scroll-snap-align:start !important;
  }
  .type-nav-box::before{
    content:'›' !important;
    position:absolute !important;
    right:8px !important;
    top:62% !important;
    transform:translateY(-50%) !important;
    z-index:20 !important;
    width:30px !important;
    height:43px !important;
    border-radius:999px !important;
    display:grid !important;
    place-items:center !important;
    color:#111 !important;
    font-size:25px !important;
    font-weight:1000 !important;
    background:linear-gradient(135deg,#ffe08a,#d59a2f) !important;
    box-shadow:0 10px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.18) inset !important;
    pointer-events:none !important;
    animation:swipeHintNudge 1.35s ease-in-out infinite !important;
  }
  .type-nav-swipe-hint{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:max-content !important;
    max-width:100% !important;
    margin:9px auto 0 !important;
    padding:7px 13px !important;
    border-radius:999px !important;
    color:#f2d27b !important;
    background:rgba(215,170,72,.11) !important;
    border:1px solid rgba(232,190,94,.27) !important;
    font-size:11.5px !important;
    font-weight:900 !important;
    letter-spacing:-.02em !important;
    box-shadow:0 8px 22px rgba(0,0,0,.20) !important;
  }
}

@media (max-width: 430px){
  .premium-track{grid-auto-columns:32% !important; gap:7px !important; padding-right:40px !important;}
  .site-region-card{flex-basis:calc((100% - 16px) / 3.08) !important;}
  .type-chip{flex-basis:31.5% !important; min-width:31.5% !important;}
}
@media (max-width: 360px){
  .premium-track{grid-auto-columns:33% !important; gap:6px !important;}
  .site-region-card{flex-basis:calc((100% - 14px) / 3.02) !important;}
  .type-chip{flex-basis:32.5% !important; min-width:32.5% !important;}
  .premium-swipe-hint,.site-region-swipe-hint,.type-nav-swipe-hint{font-size:10.5px !important; padding:6px 10px !important;}
}
@media (min-width: 901px){
  .premium-swipe-hint,
  .site-region-swipe-hint,
  .type-nav-swipe-hint{display:none !important;}
}
@keyframes swipeHintNudge{
  0%,100%{transform:translateY(-50%) translateX(0);opacity:.92;}
  50%{transform:translateY(-50%) translateX(5px);opacity:1;}
}