/* =========================================================
   web_list.css - 웹 전용 페이지 레벨 오버라이드
   list_page.css 를 기반으로 웹(.is-web)에 맞게 크기/레이아웃 조정

   NOTE: 상품 아이템 스타일은 item-list.css, item-tsnow.css 에서 관리
   ========================================================= */

/* ====== 컨테이너 ====== */
.is-web .tt-container {
  width: 1100px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

/* ====== 탭 영역 (웹: GNB에 1뎁스 포함 → 대부분 숨김, 액티비티/키즈만 표시) ====== */
.is-web .tt-tabs {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden !important;
}

/* 액티비티/키즈: 2뎁스 탭 표시 — 전폭 배경, 왼쪽 정렬 */
.is-web .tt-tabs.tt-tabs--sub {
  display: block !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: visible !important;
  position: relative;
  top: auto;
  background-color: #f8f7f6;
  border-bottom: 1px solid #f2f2f2 !important;
  box-shadow: none;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  padding-left: calc(50vw - 50%) !important;
  padding-right: calc(50vw - 50%) !important;
}

.is-web .tt-tabs--sub .tt-tabs-swiper {
  padding: 0;
}

.is-web .tt-tabs--sub .tt-tab {
  font-size: 0.9375rem;
  padding: 1rem 0.5rem;
}

.is-web .tt-tabs--sub .tt-tab.is-active {
  color: #000;
  font-weight: 700;
}

.is-web .tt-tabs--sub .tt-tab.is-active::after {
  display: none;
}
.is-web .tt-tabs--sub .tt-tab::before {
  display: none;
}

/* ====== 필터 영역 ====== */
.is-web .tt-filters,
.is-web .tt-filters--timesale {
  position: relative;
  top: auto;
  margin-top: 0;
  padding: 1.25rem 0 0;
  gap: 0.75rem;
  box-shadow: none;
  border-bottom: none;
}
.is-web .tt-chip {
  padding: 0.5rem 1rem;
}
.is-web .tt-caret {
  width: 0.4375rem;
  height: 0.4375rem;
  border-width: 1.5px;
}

.is-web .tt-chip {
  padding: 0.625rem 1.125rem;
  font-size: 0.875rem;
  border-radius: 1.5rem;
}

.is-web .tt-badge {
  min-width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.625rem;
  font-size: 0.75rem;
  line-height: 1.25rem;
}

.is-web .tt-sort {
  font-size: 0.875rem;
  padding: 0.5rem 0;
}

.is-web .tt-icon--sort {
  width: 1.125rem;
  height: 1.125rem;
}

/* ====== 배너 ====== */
.is-web .tt-banner {
  margin-top: 1.25rem;
  border-radius: 0.75rem;
  overflow: hidden;
}

.is-web .tt-banner:empty {
  display: none;
  margin: 0;
}
.is-web .tt-banner--bottom {
  margin: 0 0 1.5rem;
}

.is-web .tt-banner img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.75rem;
}

.is-web .tt-banner > div:not(.tt-banner-tsnow) {
  line-height: 0;
}

/* ====== 바텀시트 - 웹에서는 중앙 모달 ====== */
.is-web .tt-sheet__panel {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: auto;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 30rem;
  max-height: 80vh;
  border-radius: 1rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0,0,0,.2);
}

.is-web .tt-sheet.open .tt-sheet__panel {
  transform: translate(-50%, -50%);
}

.is-web .tt-sheet[aria-hidden="true"] .tt-sheet__panel {
  transform: translate(-50%, -40%);
  opacity: 0;
}

.is-web .tt-sheet__title {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.is-web .tt-chip-cell {
  padding: 0.75rem 1.125rem;
  font-size: 0.9375rem;
  border-radius: 1.5rem;
}

.is-web .tt-chip-grid {
  gap: 0.75rem;
}

.is-web .tt-btn-primary {
  padding: 1.125rem;
  font-size: 1rem;
  border-radius: 0.75rem;
}

/* ====== 캘린더 웹 스타일 (TTDatepicker) ====== */
.is-web #ttCalendar .tt-dp { max-width: 100%; }
.is-web #ttCalendar .tt-dp-cell {
  width: 2.25rem;
  height: 2.25rem;
  line-height: 2.25rem;
  font-size: 0.9375rem;
}

/* ====== 스크롤 업 버튼 ====== */
.is-web .scroll-up {
  right: calc((100vw - 1100px) / 2 - 5rem);
  bottom: 2.5rem;
  width: 3.125rem;
  height: 3.125rem;
}

.is-web .scroll-up img {
  width: 100%;
  height: 100%;
}