/* 휴대폰 체험장 목록 — 브런치식 줄 목록 (2026-09-13, 사장님 선택 + 어드바이저 4명 합의H).
   브런치 코드·사진 없음 — 잰 구성(상자 없는 줄 · 1px 구분선 · 왼쪽 글 · 오른쪽 작은 사진)만 새로 만들었다.
   listing.html 전용(body.pg-listing). 639px 이하만 — PC·태블릿 무변화.
   기존 카드 마크업(listing.html cardHTML)을 그대로 두고 배치만 바꾼다.
   🔴 cardHTML의 인라인 style(전화 버튼 width·padding, 사진 칸 position 등)을 !important로 덮는 곳이 있다 —
      cardHTML 인라인 값을 바꾸면 휴대폰에는 이 파일 값이 이긴다. 함께 볼 것.

   한 줄의 배치:
     왼쪽  : [업장 제공 칩] 분야 · 지역(회색 한 줄) / 이름(두 줄까지) / (유료 소개) / 전화 버튼
     오른쪽: 사진 112px(비율 토큰) — 계절 배지·저장 하트는 원래 크기·위치 / 그 밑 시설 아이콘·인원 */
@media (max-width: 639px) {
  .pg-listing .card-grid { gap: 0; }

  .pg-listing .card-grid > .exp-card:not(.banner-inline) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    column-gap: 16px;
    align-items: start;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    padding: 16px 0;
  }
  .pg-listing .card-grid > .exp-card:not(.banner-inline):first-child { padding-top: 4px; }

  /* 글 묶음을 풀어 그 안의 조각을 줄의 칸에 직접 놓는다(역할 없는 div라 읽기 순서는 그대로) */
  .pg-listing .exp-card:not(.banner-inline) .exp-card-body { display: contents; }

  /* 오른쪽: 사진. 저장 하트(32px·안쪽 8px·누르는 영역 44px)는 원래 값 그대로 둔다(합의H C) */
  .pg-listing .exp-card:not(.banner-inline) .exp-card-photo {
    grid-column: 2; grid-row: 1 / span 4;
    width: 112px;
    border-radius: 4px;
    margin-top: 2px;
  }
  .pg-listing .exp-card:not(.banner-inline) .exp-card-photo .tag-season {
    top: 4px !important; left: 4px !important;
    font-size: 11px; padding: 1px 6px;
  }

  /* 왼쪽 1: 분야 · 지역 — 회색 글자 한 줄, 지역이 길면 말줄임 */
  .pg-listing .exp-card:not(.banner-inline) .exp-tags {
    grid-column: 1; grid-row: 1;
    gap: 0; margin: 0 0 4px; flex-wrap: nowrap; min-width: 0; white-space: nowrap;
  }
  .pg-listing .exp-card:not(.banner-inline) .exp-card-body .exp-tag {
    background: none; padding: 0; border-radius: 0;
    font-size: 12px; font-weight: 400; color: var(--muted);
    flex-shrink: 0;
  }
  .pg-listing .exp-card:not(.banner-inline) .exp-card-body .exp-tag + .exp-tag::before { content: "·"; margin: 0 5px; }
  .pg-listing .exp-card:not(.banner-inline) .exp-card-body .tag-region {
    flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  }
  /* 유료 '업장 제공' — 잘리지 않게 칩 모양 그대로 맨 앞(합의H D, '광고' 라벨 유지 결정) */
  .pg-listing .exp-card:not(.banner-inline) .exp-card-body .exp-tag.paid-tag {
    order: -1; flex-shrink: 0; overflow: visible;
    background: rgba(26, 26, 26, 0.04); padding: 1px 6px; border-radius: var(--radius-badge);
    font-size: 11px; font-weight: 500; margin-right: 6px;
  }
  .pg-listing .exp-card:not(.banner-inline) .exp-card-body .exp-tag.paid-tag::before { content: none; }

  /* 왼쪽 2: 이름(두 줄까지) */
  .pg-listing .exp-card:not(.banner-inline) .exp-name {
    grid-column: 1; grid-row: 2;
    font-size: 17px; line-height: 1.45; margin: 0; min-width: 0;
    white-space: normal !important; word-break: keep-all;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  /* 왼쪽 3: 유료 소개(유료 0곳이면 없음) */
  .pg-listing .exp-card:not(.banner-inline) .paid-intro { grid-column: 1; grid-row: 3; margin: 4px 0 0; min-width: 0; }

  /* 왼쪽 4: 전화 버튼 — 토마토·44px 그대로, 폭만 번호에 맞춤 */
  .pg-listing .exp-card:not(.banner-inline) .card-phone-btn,
  .pg-listing .exp-card:not(.banner-inline) .card-phone-empty {
    grid-column: 1; grid-row: 4 / span 2;
    justify-self: start;
    width: auto !important;
    padding: 0 14px !important;
    margin-top: 10px;
  }
  .pg-listing .exp-card:not(.banner-inline) .card-phone-empty { min-height: 36px; }

  /* 오른쪽 아래: 인원·시설 아이콘 — 점선 없이 사진 밑에 */
  .pg-listing .exp-card:not(.banner-inline) .exp-meta-row {
    grid-column: 2; grid-row: 5;
    margin: 6px 0 0; padding: 0; border-top: 0;
    flex-wrap: wrap; justify-content: flex-start !important; gap: 2px 8px !important;
    font-size: 12px; min-width: 0;
  }
  .pg-listing .exp-card:not(.banner-inline) .exp-meta-row .card-cap { font-size: 12px !important; }
  .pg-listing .exp-card:not(.banner-inline) .exp-facilities { font-size: 13px !important; gap: 6px; }
}