/* ============================================================
   ListControls — 리스트 화면 도구 (ListControls.jsx)
   ============================================================
   Party / Club 화면 공용 도구.
   섹션 순서
     1) ListBar        — 4개 세그먼트 버튼 (필터·정렬·지도·비교)
     2) Sheet          — 바텀시트 베이스
     3) FilterSheet    — 지역/장르 멀티 선택
     4) SortSheet      — 정렬 라디오
     5) MapView        — 라이트한 의사 지도
     6) CompareTray    — 하단 비교 트레이
     7) CompareSheet   — 풀스크린 비교 테이블
   ============================================================ */

/* ────────────────────────────────────────────────────
   1. ListBar
   ──────────────────────────────────────────────────── */
.cp-listbar {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 0 16px 14px;
  background: #15151E;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}
.cp-listbar__btn {
  all: unset;
  cursor: pointer;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 11px 0;
  border-radius: 11px;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  position: relative;
}
.cp-listbar__btn[data-active="true"] {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.cp-listbar__badge {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #FF1077;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  font-family: 'JetBrains Mono', monospace;
  margin-left: 2px;
}

/* ────────────────────────────────────────────────────
   2. Sheet — 바텀시트 베이스
   ──────────────────────────────────────────────────── */
.cp-sheet {
  position: absolute;
  inset: 0;
  z-index: 220;
}
.cp-sheet__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  animation: cp-fade-in 200ms ease-out;
}
.cp-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #0E0E14;
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-bottom: none;
  max-height: 85%;
  display: flex;
  flex-direction: column;
  animation: cp-slide-up 280ms cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.6);
}
.cp-sheet__grip-row {
  display: flex;
  justify-content: center;
  padding: 10px 0 0;
}
.cp-sheet__head {
  padding: 14px 20px 0;
}
.cp-sheet__eyebrow {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.cp-sheet__title {
  margin: 4px 0 0;
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.02em;
}
.cp-sheet__body {
  padding: 14px 20px 8px;
  overflow-y: auto;
  flex: 1;
}
.cp-sheet__foot {
  padding: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ────────────────────────────────────────────────────
   3. FilterSheet — 지역/장르 멀티
   ──────────────────────────────────────────────────── */
.cp-filter__chip {
  all: unset;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.cp-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cp-filter__group {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.cp-filter__group:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.cp-filter__group-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
}
.cp-filter__group-title {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  margin-top: 2px;
  margin-bottom: 10px;
}

.cp-filter__foot {
  display: flex;
  gap: 8px;
}
.cp-filter__foot-btn {
  all: unset;
  cursor: pointer;
  flex: 1;
  height: 50px;
  border-radius: 14px;
  text-align: center;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-sizing: border-box;
}
.cp-filter__foot-btn--reset {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}
.cp-filter__foot-btn--apply {
  flex: 2;
  background: linear-gradient(180deg, #5AE3FF 0%, #00B8E6 100%);
  color: #07070A;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 0 24px rgba(31, 210, 255, 0.45);
}

/* ────────────────────────────────────────────────────
   4. SortSheet
   ──────────────────────────────────────────────────── */
.cp-sort__option {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.cp-sort__option[data-on="true"] {
  background: rgba(255, 16, 119, 0.10);
  border-color: rgba(255, 16, 119, 0.5);
}
.cp-sort__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
}
.cp-sort__option[data-on="true"] .cp-sort__icon {
  background: #FF1077;
  color: #fff;
}
.cp-sort__body { flex: 1; min-width: 0; }
.cp-sort__label {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}
.cp-sort__hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 2px;
}
.cp-sort__check {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #FF1077;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ────────────────────────────────────────────────────
   5. MapView (라이트 의사 지도)
   ──────────────────────────────────────────────────── */
.cp-mapview {
  margin: 0 16px 14px;
  border-radius: 18px;
  height: 280px;
  overflow: hidden;
  position: relative;
  background: radial-gradient(circle at center, #15151E 0%, #07070A 70%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.cp-mapview__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}
.cp-mapview__you {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #1FD2FF;
  box-shadow: 0 0 0 4px rgba(31, 210, 255, 0.25), 0 0 0 10px rgba(31, 210, 255, 0.12);
}
.cp-mapview__you-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 24px));
  font-size: 9px;
  font-weight: 800;
  color: rgba(31, 210, 255, 0.95);
  letter-spacing: 0.16em;
}
.cp-mapview__pin {
  all: unset;
  cursor: pointer;
  position: absolute;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.cp-mapview__pin-label {
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(12, 12, 18, 0.94);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.cp-mapview__pin-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

/* ────────────────────────────────────────────────────
   6. CompareTray (하단 비교 스트립)
   ──────────────────────────────────────────────────── */
.cp-tray {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 84px;
  background: rgba(7, 7, 10, 0.96);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  padding: 12px 16px;
  z-index: 105;
}
.cp-tray__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.cp-tray__count {
  font-size: 11px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.08em;
}
.cp-tray__btn-link {
  all: unset;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}
.cp-tray__btn-clear { color: rgba(255, 255, 255, 0.5); }
.cp-tray__btn-close { color: #fff; font-weight: 800; }

.cp-tray__slots {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.cp-tray__slot--empty {
  flex: 1;
  height: 56px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.3);
  font-size: 11px;
  font-weight: 700;
}
.cp-tray__slot--filled {
  all: unset;
  cursor: pointer;
  flex: 1;
  position: relative;
  height: 56px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  border: 1px solid rgba(255, 16, 119, 0.4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}
.cp-tray__slot-title {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-tray__slot-sub {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-tray__slot-x {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(255, 16, 119, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.cp-tray__cta {
  all: unset;
  display: block;
  width: 100%;
  text-align: center;
  padding: 13px 0;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
  box-sizing: border-box;
}
.cp-tray__cta[data-disabled="true"] {
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.4);
}
.cp-tray__cta[data-disabled="false"] {
  cursor: pointer;
  background: linear-gradient(180deg, #FF3D96 0%, #E60068 100%);
  color: #fff;
}

/* ────────────────────────────────────────────────────
   7. CompareSheet (풀스크린 비교 그리드)
   ──────────────────────────────────────────────────── */
.cp-cmp__grid {
  display: grid;
  gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
}
.cp-cmp__col-head {
  padding: 10px;
  background: rgba(255, 255, 255, 0.04);
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}
.cp-cmp__col-head--first { border-left: none; }
.cp-cmp__col-title {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-cmp__col-sub {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px;
}
.cp-cmp__row-label {
  padding: 10px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.cp-cmp__row-label--alt { background: rgba(255, 255, 255, 0.02); }
.cp-cmp__cell {
  padding: 10px;
  font-size: 12px;
  color: #fff;
  font-weight: 700;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.cp-cmp__cell--alt { background: rgba(255, 255, 255, 0.02); }