/* ===== MOBILE PRODUCT LIST PAGE — 768px 이하 전용 =====
   product_list_new.html 에서만 로드
   ======================================================= */

/* 데스크탑에서 숨김 */
.pls-m-catalog-wrap,
.pls-m-detail,
.pls-mobile-view,
.pls-mobile-sheet-overlay,
.pls-mobile-sheet { display: none; }

/* ─── 모바일 상세 패널 (전체화면 오버레이) ───────────────────────────────── */

.pls-m-detail {
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; right: 0;
  bottom: calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom));
  z-index: 250;
  background: #fff;
  overflow: hidden;
}
.pls-m-detail[hidden] { display: none !important; }

.pls-m-detail__head {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--mobile-topbar-height);
  padding: 0 var(--space-3);
  border-bottom: none;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  background: #fff;
}
.pls-m-detail__title {
  margin-left: auto;
  font-size: var(--font-size-main);
  font-weight: var(--font-weight-strong);
  color: var(--text-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 var(--space-1);
  text-align: right;
}
.pls-m-detail__actions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.pls-m-detail__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}

.pls-m-detail__foot {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-top: none;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  background: #fff;
  padding-bottom: env(safe-area-inset-bottom);
}

.pls-m-detail__tabs {
  display: flex;
  border-right: 1px solid rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
}

.pls-m-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  width: 66px;
  height: 54px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--font-size-sub);
  font-weight: var(--font-weight-strong);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.12s, background 0.12s;
  padding: 0;
}
.pls-m-tab:first-child { border-right: 1px solid rgba(0, 0, 0, 0.04); }
.pls-m-tab.is-active { color: #1b2a4a; background: rgba(0, 0, 0, 0.03); }
.pls-m-tab:active { background: rgba(0, 0, 0, 0.05); }

.pls-m-detail__actions {
  flex: 1;
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  align-items: center;
}

/* 모바일 상세 갤러리 */
.pls-m-gallery {
  width: 100%;
  aspect-ratio: 4/3;
  background: #0f172a;
  overflow: hidden;
  flex-shrink: 0;
}
.pls-m-gallery .catalog-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* chat iframe */
.pls-m-detail__body--chat {
  padding: 0;
}
.pls-m-chat-frame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.pls-m-action-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  height: 54px;
  border: none;
  border-radius: var(--m-radius-lg);
  font-size: var(--font-size-main);
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--transition-fast);
}
.pls-m-action-btn:active { opacity: 0.75; }
.pls-m-action-btn svg { flex-shrink: 0; }

.pls-m-action-btn--chat {
  background: #eff6ff;
  color: #1b2a4a;
}
.pls-m-action-btn--share {
  background: rgba(0, 0, 0, 0.05);
  color: #334155;
}
.pls-m-action-btn--contract {
  background: #1b2a4a;
  color: #fff;
}

@media (max-width: 768px) {
  /* 사이드바/탑바 숨김 */
  .sidebar, .sidebar--new, .top-bar { display: none !important; }
  .sidebar-toggle-btn { display: none !important; }

  /* 데스크탑 테이블/패널 숨기고 카드 뷰 표시 */
  .product-list-page-shell .pls-grid-panel,
  .product-list-page-shell .pls-detail-panel { display: none !important; }

  .pls-m-catalog-wrap { display: block !important; }

  /* 상세 패널 표시 허용 + 상단바: 뒤로가기+타이틀 */
  .pls-m-detail:not([hidden]) { display: flex !important; }
  body:has(.pls-m-detail:not([hidden])) .mobile-topbar .m-search-bar { display: none !important; }
  body:has(.pls-m-detail:not([hidden])) .mobile-topbar .m-back-btn { display: flex !important; }

  /* 상품목록: 외부 패딩 제거 → 내부 그리드 패딩으로만 여백 관리 */
  body[data-page="상품목록"] .main-shell--new {
    padding: 0 !important;
  }

  /* 카탈로그 그리드 패딩 (탭바 높이 확보) */
  .pls-m-catalog-wrap .catalog-content {
    padding-bottom: calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom));
  }

  /* catalog.css의 80px 하단 패딩 중복 제거 (catalog-content가 이미 탭바 여백 확보) */
  .pls-m-catalog-wrap .catalog-grid {
    padding-bottom: var(--space-2);
  }

  /* 모바일 뷰 */
  .pls-mobile-view { display: flex; flex-direction: column; flex: 1; overflow: hidden; }

  /* 검색바 */
  .pls-mobile-search-wrap {
    position: relative;
    padding: var(--space-2) var(--space-3) var(--space-1);
    flex-shrink: 0;
  }
  .pls-mobile-search-icon {
    position: absolute;
    left: 26px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
  }
  .pls-mobile-search {
    width: 100%;
    height: 38px;
    padding: 0 var(--space-3) 0 32px;
    border: 1.5px solid transparent;
    border-radius: var(--m-radius-md);
    background: #f2f3f7;
    font-size: 13px !important;
    color: #0f172a;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease, background 0.15s ease;
  }
  .pls-mobile-search:focus {
    border-color: #1b2a4a;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(27, 42, 74, 0.08);
  }

  /* 메이커 필터 칩 */
  .pls-mobile-chips {
    display: flex;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3) var(--space-1);
    overflow-x: auto;
    flex-shrink: 0;
    scrollbar-width: none;
  }
  .pls-mobile-chips::-webkit-scrollbar { display: none; }

  .pls-mobile-chip {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 var(--space-2);
    border: none;
    border-radius: var(--m-radius-pill);
    background: rgba(0, 0, 0, 0.05);
    font-size: var(--font-size-main);
    color: var(--text-subtle);
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.12s, color 0.12s;
  }
  .pls-mobile-chip.is-active {
    background: rgba(27, 42, 74, 0.12);
    color: #1b2a4a;
    font-weight: 600;
  }

  /* 카운트 */
  .pls-mobile-count {
    padding: 0 var(--space-3) var(--space-1);
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
  }

  /* 카드 그리드 */
  .pls-mobile-grid {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    align-content: start;
    background: var(--m-divider, #f2f4f6);
  }

  /* 카드 */
  .pls-mobile-card {
    border-radius: 0;
    background: var(--m-card-bg, #fff);
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .pls-mobile-card__img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    background: #f2f3f7;
    overflow: hidden;
  }
  .pls-mobile-card__img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
  }
  .pls-mobile-card__no-img {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: #cbd5e1;
  }
  .pls-mobile-card__badge {
    position: absolute; top: var(--space-2); left: var(--space-2);
    height: 20px; padding: 0 var(--space-2);
    border-radius: var(--m-radius-pill);
    background: rgba(15, 23, 42, 0.6);
    color: #fff; font-size: var(--font-size-sub); font-weight: 600;
    display: inline-flex; align-items: center;
  }
  .pls-mobile-card__body {
    padding: 8px 10px 10px;
    display: flex; flex-direction: column; gap: 2px;
  }
  .pls-mobile-card__model {
    font-size: 13px; font-weight: 600; color: var(--m-text-primary, #0f172a);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .pls-mobile-card__sub {
    font-size: 11px; color: var(--m-text-tertiary, #8b95a1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .pls-mobile-card__price {
    font-size: 13px; font-weight: 700; color: var(--m-accent, #1b2a4a); margin-top: 3px;
  }
  .pls-mobile-card__price-inquiry {
    font-size: 12px; font-weight: 600; color: #3b82f6; margin-top: 3px;
  }

  /* 스켈레톤 */
  .pls-mobile-skeleton-wrap {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
  .pls-mobile-skeleton-card {
    height: 200px; border-radius: var(--m-radius-lg);
    background: linear-gradient(90deg, #f1f5f9 25%, #e9eef5 50%, #f1f5f9 75%);
    background-size: 400% 100%;
    animation: pls-shimmer 1.4s ease infinite;
  }
  @keyframes pls-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
  }

  /* 빈 상태 */
  .pls-mobile-empty {
    grid-column: 1/-1;
    padding: 48px 0;
    text-align: center;
    font-size: var(--font-size-lg); color: var(--text-muted);
  }

  /* ─── 바텀시트 (필터) ────────────────────────────────────────────────────── */

  .pls-mobile-sheet-overlay {
    display: block;
    position: fixed; inset: 0; z-index: 400;
    background: rgba(15, 23, 42, 0.45);
  }
  .pls-mobile-sheet-overlay[hidden] { display: none !important; }

  .pls-mobile-sheet {
    display: flex; flex-direction: column;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 401;
    background: #fff;
    border-radius: var(--m-radius-lg) var(--m-radius-lg) 0 0;
    max-height: 85dvh;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.1);
  }
  .pls-mobile-sheet[hidden] { display: none !important; }

  .pls-mobile-sheet__handle {
    width: 36px; height: 4px; border-radius: var(--m-radius-sm);
    background: rgba(0, 0, 0, 0.12); margin: var(--space-3) auto 0; flex-shrink: 0;
  }

  .pls-mobile-sheet__head {
    display: none;
  }
  .pls-mobile-sheet__title {
    flex: 1; font-size: 15px; font-weight: var(--font-weight-heavy); color: #0f172a;
  }
  .pls-mobile-sheet__close {
    width: 44px; height: 44px; border: none; border-radius: var(--m-radius-circle);
    background: rgba(0, 0, 0, 0.05); color: var(--text-subtle); cursor: pointer;
    display: flex; align-items: center; justify-content: center; padding: 0;
  }

  .pls-mobile-sheet__body {
    flex: 1; overflow-y: auto; padding: var(--space-4) 16px;
    -webkit-overflow-scrolling: touch;
  }

  /* 상세 정보 rows */
  .pls-mobile-detail-gallery {
    width: 100%; aspect-ratio: 16/10;
    border-radius: var(--m-radius-md); overflow: hidden;
    background: #0f172a; margin-bottom: var(--space-4); position: relative;
  }
  .pls-mobile-detail-gallery img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .pls-mobile-detail-gallery__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border: none; border-radius: var(--m-radius-circle);
    background: rgba(255, 255, 255, 0.8); color: #1e293b;
    cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
  }
  .pls-mobile-detail-gallery__nav--prev { left: 8px; }
  .pls-mobile-detail-gallery__nav--next { right: 8px; }
  .pls-mobile-detail-gallery__counter {
    position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
    height: 20px; padding: 0 var(--space-2); border-radius: var(--m-radius-pill);
    background: rgba(15, 23, 42, 0.55); color: #fff; font-size: var(--font-size-sub);
    display: inline-flex; align-items: center;
  }

  .pls-mobile-detail-row {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid rgba(0, 0, 0, 0.04); font-size: var(--font-size-main);
  }
  .pls-mobile-detail-label { color: var(--text-subtle); flex-shrink: 0; }
  .pls-mobile-detail-value { color: #0f172a; font-weight: var(--font-weight-strong); text-align: right; }

  .pls-mobile-detail-section { margin-top: var(--space-4); }
  .pls-mobile-detail-section-title {
    font-size: var(--font-size-sub); font-weight: 600; color: var(--text-muted);
    letter-spacing: 0.03em; margin-bottom: var(--space-2);
  }

  .pls-mobile-price-table { width: 100%; }
  .pls-mobile-price-table__head {
    display: grid; grid-template-columns: 70px 1fr 1fr;
    padding: var(--space-1) var(--space-2); background: rgba(0, 0, 0, 0.03); border-radius: var(--m-radius-sm);
    font-size: var(--font-size-sub); color: var(--text-muted); font-weight: 600; margin-bottom: 2px;
  }
  .pls-mobile-price-table__row {
    display: grid; grid-template-columns: 70px 1fr 1fr;
    padding: var(--space-2) var(--space-2); border-bottom: 1px solid rgba(0, 0, 0, 0.04); font-size: var(--font-size-main);
  }
  .pls-mobile-price-table__period { font-weight: 600; color: var(--text-subtle); }
  .pls-mobile-price-table__rent   { font-weight: var(--font-weight-heavy); color: #1b2a4a; }
  .pls-mobile-price-table__dep    { color: var(--text-subtle); }

  /* 하단 액션 버튼 */
  .pls-mobile-sheet__actions {
    display: flex; gap: var(--space-2);
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    border-top: none; box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.06); flex-shrink: 0;
  }
  .pls-mobile-sheet__btn {
    flex: 1; height: var(--mobile-topbar-height); border: none; border-radius: var(--m-radius-lg);
    font-size: var(--font-size-lg); font-weight: 600; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: var(--space-2);
    -webkit-tap-highlight-color: transparent;
  }
  .pls-mobile-sheet__btn--chat {
    background: #eff6ff; color: #1b2a4a;
  }
  .pls-mobile-sheet__btn--share {
    background: #1b2a4a; color: #fff;
  }

  /* ─── catalog-card 모바일 통일 규격 ─── */
  .catalog-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
    padding: 4px !important;
    background: var(--m-bg) !important;
  }
  .catalog-card {
    border-radius: var(--m-radius-sm) !important;
    box-shadow: none !important;
    background: var(--m-card-bg) !important;
    overflow: hidden !important;
  }
  .catalog-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  .catalog-card__image-wrap {
    height: auto !important;
    aspect-ratio: 4/3 !important;
  }
  .catalog-card__body {
    padding: 10px 12px 12px !important;
    gap: 2px !important;
  }
  .catalog-card__carno {
    font-size: var(--m-font-sub) !important;
    color: var(--m-text-tertiary) !important;
  }
  .catalog-card__model {
    font-size: var(--m-font-body) !important;
    font-weight: 600 !important;
    color: var(--m-text-primary) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .catalog-card__sub {
    font-size: var(--m-font-sub) !important;
    color: var(--m-text-tertiary) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .catalog-card__price {
    font-size: var(--m-font-body) !important;
    font-weight: 700 !important;
    color: var(--m-accent) !important;
  }
  .catalog-card__dep {
    font-size: var(--m-font-sub) !important;
    color: var(--m-text-tertiary) !important;
  }
  .catalog-card__provider { display: none !important; }
  .catalog-card__badge {
    font-size: 10px !important;
    height: 18px !important;
    padding: 0 6px !important;
  }
  .catalog-card__submodel {
    font-size: 12px !important;
    color: var(--m-text-secondary) !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .catalog-card__trim {
    font-size: 11px !important;
    color: var(--m-text-tertiary) !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .catalog-card__dep-row {
    font-size: 11px !important;
    color: var(--m-text-tertiary) !important;
    margin-top: 1px;
  }
  .catalog-card__specs {
    font-size: 11px !important;
    color: var(--m-text-tertiary) !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 4px;
  }
  .catalog-card__colors {
    font-size: 11px !important;
    color: var(--m-text-tertiary) !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}