/* ====== 기본 레이아웃 ====== */
.tt-no-gap { height:3.25rem; }
a, button { -webkit-tap-highlight-color: rgba(0,0,0,0); outline:none; background:none; border:0; }
a:focus, a:active, button:focus, button:active { outline:none; box-shadow:none; }
img { -webkit-user-drag:none; user-select:none; }

/* ====== 상단 탭 영역 ====== */
.tt-tabs {
  position:sticky; top:3.25rem; z-index:60;
  background:#fff; border-bottom:1px solid #eee;
  box-shadow:0 -1px 0 0 #fff;
  transform:translateY(0); transition:transform .22s ease; will-change:transform;
}
.tt-tabs .tt-tabs-swiper { padding:0 1rem; }
.tt-tabs .swiper-wrapper { align-items:flex-end; }
.tt-tabs .swiper-slide { width:auto; }
.tt-tab {
  display:inline-block; padding:1rem 0.125rem;
  font-size:1rem; font-weight:600; color:#999;
  position:relative; text-decoration:none; border-radius:0.625rem;
}
.tt-tab.is-active { color:#111; }
.tt-tab.is-active::after {
  content:""; position:absolute; left:0; right:0; bottom:-1px;
  height:0.1875rem; background:#111; border-radius:0.1875rem;
}
.tt-tab::before {
  content:""; position:absolute;
  left:-0.625rem; right:-0.625rem; top:-0.375rem; bottom:-0.375rem;
  background:transparent; border-radius:0.75rem; pointer-events:none;
  transition:background-color .12s ease;
}
.tt-tab:active::before { background:rgba(0,0,0,.06); }

/* ====== 필터 바 영역 ====== */
.tt-filters, .tt-filters--timesale {
  position:sticky; top:6.25rem; z-index:50;
  display:flex; align-items:center; gap:0.5rem;
  margin-top:-1px; padding:0.75rem 1rem; border-bottom:1px solid #eee; background:#fff;
  box-shadow:0 -1px 0 0 #fff;
  transform:translateY(0); transition:transform .22s ease; will-change:transform;
}
.tt-chip {
  padding:0.5rem 0.875rem; border:1px solid #eee; border-radius:1.25rem;
  color:#666; background:#fff; font-size:0.875rem; line-height:1; position:relative;
}
.tt-chip.is-active { border-color:#ff4b4b; color:#ff4b4b; font-weight:700; }
.tt-badge {
  position:absolute; top:-0.375rem; right:-0.5rem;
  min-width:1.125rem; height:1.125rem; border-radius:0.5625rem;
  background:#ff4b4b; color:#fff; font-size:0.6875rem; line-height:1.125rem;
  text-align:center; padding:0 0.1875rem;
}
.tt-filters__spacer { flex:1; }
.tt-sort { display:flex; align-items:center; color:#777; font-size:0.875rem; padding:0.375rem 0; gap:0.125rem; }
.tt-view-toggle { width:1.75rem; height:1.75rem; display:inline-flex; align-items:center; justify-content:center; }
.tt-view-toggle img { width:1.25rem; height:1.25rem; }
.tt-caret {
  display:inline-block; width:0.5rem; height:0.5rem; margin-left:0.125rem;
  border-right:1.5px solid #666; border-bottom:1.5px solid #666;
  transform:rotate(45deg); transition:transform .24s ease;
}
.tt-icon--sort { width:1.0625rem; height:1.0625rem; display:inline-block; vertical-align:middle; }
.tt-filters--timesale .tt-filter-static {
  font-size:0.875rem; line-height:2; color:#777; white-space:nowrap;
}

/* ====== 상단 드롭다운 메뉴 ====== */
#btnTopDrop.is-open .tt-caret { transform:rotate(-135deg); }
.tt-topdrop-wrap { position:fixed; inset:0; z-index:80; pointer-events:none; }
.tt-topdrop-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.35); opacity:0; transition:opacity .24s; }
.tt-topdrop-panel {
  position:absolute; left:0; right:0; top:3.25rem;
  background:#fff; border-radius:0 0 1rem 1rem;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
  padding:1.25rem; max-height:70vh; overflow:auto;
  transform:translateY(-100%); visibility:hidden;
  transition:transform .24s cubic-bezier(.2,.8,.2,1), visibility .24s;
  -webkit-overflow-scrolling: touch;
}
.tt-topdrop-list { display:flex; flex-direction:column; gap:1.5rem; padding:0; margin:0; }
.tt-topdrop-item { font-size:1.125rem; color:#444; text-align:center; }
.tt-topdrop-wrap.open { pointer-events:auto; }
.tt-topdrop-wrap.open .tt-topdrop-backdrop { opacity:1; }
.tt-topdrop-wrap.open .tt-topdrop-panel { transform:translateY(0); visibility:visible; }

/* ====== 하단 바텀시트 ====== */
.tt-sheet {
  position:fixed; inset:0; z-index:90; pointer-events:none;
  will-change: transform; contain: layout paint;
}
.tt-sheet__backdrop { position:absolute; inset:0; background:rgba(0,0,0,.45); opacity:0; transition:opacity .25s; }
.tt-sheet__panel {
  position:absolute; left:0; right:0; bottom:0;
  background:#fff; border-radius:1rem 1rem 0 0;
  box-shadow:0 -10px 30px rgba(0,0,0,.12);
  transform:translateY(100%);
  transition:transform .26s cubic-bezier(.2,.9,.2,1);
  padding:1.375rem 1.25rem 1.5rem; max-height:78vh; overflow:auto;
  -webkit-overflow-scrolling: touch;
}
.tt-sheet.open { pointer-events:auto; }
.tt-sheet.open .tt-sheet__backdrop { opacity:1; }
.tt-sheet.open .tt-sheet__panel { transform:translateY(0); }
.tt-sheet__title { font-size:1.125rem; font-weight:700; margin-bottom:0.75rem; }
.tt-divider { height:1px; background:#eee; margin:0.625rem 0; }
.tt-chip-grid { display:flex; flex-wrap:wrap; gap:0.625rem; }
.tt-chip-cell {
  background:#fff; color:#333; border:1px solid #e5e5e5;
  border-radius:1.375rem; padding:0.625rem 0.875rem; font-size:0.9375rem;
}
.tt-chip-cell.is-selected {
  border-color:#ff4b4b; background:#ff4b4b; color:#fff; font-weight:700;
}
.tt-sheet__gap { height:1.125rem; }
.tt-sheet__footer {
  position:sticky; bottom:0; left:0; right:0;
  padding-top:0.75rem;
  background:linear-gradient(to top, #fff 80%, rgba(255,255,255,0));
}
.tt-btn-primary {
  width:100%; background:#ff4b4b; color:#fff;
  border:0; border-radius:0.75rem; padding:1rem;
  font-size:1rem; font-weight:700;
}

/* 닫힌 시트는 완전 숨김 + 추가 오프셋으로 안전하게 내리기 */
.tt-sheet[aria-hidden="true"] { visibility: hidden; }
.tt-sheet.open { visibility: visible; }
.tt-sheet[aria-hidden="true"] .tt-sheet__panel {
  transform: translateY(calc(100% + 3rem));
  box-shadow: none;
}

/* ====== 캘린더 (TTDatepicker 오버라이드) ====== */
#ttCalendar .tt-dp { max-width:37.5rem; margin:0 auto; padding:0; }
#ttCalendar .tt-dp-header { margin:0 0 1.375rem; padding:0; gap:0.5rem; }
#ttCalendar .tt-dp-title { color:#222; font-size:1.1875rem; }
#ttCalendar .tt-dp-prev,
#ttCalendar .tt-dp-next { flex:0 0 1.75rem; width:1.75rem; height:1.75rem; }
#ttCalendar .tt-dp-prev:hover,
#ttCalendar .tt-dp-next:hover { background:rgba(0,0,0,0.06); }
#ttCalendar .tt-dp-grid { min-height:14.25rem; }
#ttCalendar .tt-dp-grid th { color:#919191; font-size:0.875rem; padding:0 0 0.1875rem; }
#ttCalendar .tt-dp-grid td { padding-bottom:0.25rem; }
#ttCalendar .tt-dp-cell {
  width:1.875rem; height:1.875rem; line-height:1.875rem;
  font-size:0.9375rem; color:#333;
}
#ttCalendar .tt-dp-disabled .tt-dp-cell { opacity:0.4; }
#ttCalendar .tt-dp-today .tt-dp-cell::after { font-size:0.5625rem; }
/* 기본 selected 스타일 리셋 — is-picked 일 때만 하이라이트 */
#ttCalendar .tt-dp-cell.tt-dp-selected { background:none; color:#333; font-weight:400; }
#ttCalendar .tt-dp-sun .tt-dp-cell.tt-dp-selected { color:#ff4b4b; }
#ttCalendar .tt-dp-sat .tt-dp-cell.tt-dp-selected { color:#4b75ff; }
#ttCalendar.is-picked .tt-dp-cell.tt-dp-selected,
#ttCalendar.is-picked .tt-dp-sun .tt-dp-cell.tt-dp-selected,
#ttCalendar.is-picked .tt-dp-sat .tt-dp-cell.tt-dp-selected {
  background:#ff4b4b; color:#fff; font-weight:600;
}