/* === Search Hero: 추천 검색어 칩 === */
/* 색 토큰 (없으면 fallback로 사용) */
:root{
  --wm-accent: #FF3D57;
  --wm-chip-bg: rgba(255,255,255,.06);
  --wm-chip-bd: rgba(255,255,255,.16);
  --wm-chip-hover: rgba(255,255,255,.12);
  --wm-text: rgba(255,255,255,.92);
  --wm-text-weak: rgba(255,255,255,.72);
}

/* 히어로 영역 아래 추천칩 컨테이너 */
.search-hero .suggest{margin-top:10px}
.search-hero .chips{
  display:flex; gap:8px; flex-wrap:wrap;
  list-style:none; padding:0; margin:8px 0 0;
}

/* 칩 기본 */
.search-hero .chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:999px;
  border:1px solid var(--wm-chip-bd);
  background:var(--wm-chip-bg);
  color:var(--wm-text-weak);
  font-size:13px; line-height:1; letter-spacing:.1px;
  cursor:pointer; user-select:none; white-space:nowrap;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .05s;
}
.search-hero .chip:hover{ background:var(--wm-chip-hover); color:var(--wm-text) }
.search-hero .chip:active{ transform:translateY(1px) }
/* 선택/활성 상태 */
.search-hero .chip.is-active,
.search-hero .chip[aria-pressed="true"]{
  background:var(--wm-accent); color:#fff; border-color:transparent;
}

/* 키보드 포커스 */
.search-hero .chip:focus-visible{
  outline:2px solid var(--wm-accent); outline-offset:2px;
}

/* 모바일: 가로 스크롤 칩 */
@/* 상위가 overflow:hidden이면 스크롤이 막힐 수 있어 명시적으로 풀어줌 */
.search-hero,
.search-hero .container,
.search-hero .suggest{ overflow: visible; }

/* 모바일 스크롤: 스크롤 컨테이너를 chips → chips-wrap 으로 이동 */
@media (max-width: 768px){
  .search-hero .chips-wrap{
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;                 /* 수평 제스처 허용 */
    overscroll-behavior-x: contain;      /* 바운스 전파 방지 */
    scroll-snap-type: x proximity;
    padding-bottom: 2px;
    margin-right: -12px;                 /* 오른쪽 살짝 여유 */
  }
  .search-hero .chips-wrap::-webkit-scrollbar{ display:none }

  /* 내용이 줄바꿈 없이 가로로 '길어지도록' 강제 */
  .search-hero .chips{
    display: inline-flex;
    gap: 8px;
    min-width: max-content;              /* ✅ 핵심: 총 너비를 내용 합계로 */
    white-space: nowrap;
  }
  .search-hero .chip{
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* 가장자리 페이드 힌트 (선택) */
  .search-hero .chips-wrap::before,
  .search-hero .chips-wrap::after{
    content:"";
    position:absolute; top:0; bottom:0; width:24px;
    pointer-events:none;
    background:linear-gradient(90deg, rgba(12,15,19,1), rgba(12,15,19,0));
  }
  .search-hero .chips-wrap::before{ left:0 }
  .search-hero .chips-wrap::after{ right:0; transform:scaleX(-1) }
}

/* === 클릭 보장: 스택 컨텍스트를 위로 올려 오버레이 간섭 제거 === */
.search-hero{ position:relative; z-index:20; }
.search-hero .suggest{ position:relative; z-index:21; }
.search-hero .chips,
.search-hero .chip{
  position: relative;
  z-index: 22;
  pointer-events: auto;
}

/* (있다면) 히어로 오버레이가 클릭을 가로채지 않도록 */
.site-hero::before,
.top::before{ pointer-events:none; }