/* ==========================================================================
   ZZAPS 한 줄 목록 (list row) — 공용 스타일
   --------------------------------------------------------------------------
   적용 범위  : .zzp-list 로 감싼 한 줄 목록
                공개 프로필 탭(profile.show) · MY 내 판매글/구매요청(mypage.products)
   로드 방식  : 쓰는 화면의 @push('head') 에서 link
                (공통 app.css 를 건드리지 않는다 — 다른 세션이 편집 중인 파일이다)

   무엇이 바뀌었나
     같은 목록인데 화면마다 모양이 달랐다.
       프로필 판매상품 · 판매완료 → 큰 사진 격자
       프로필 거래후기            → 카드 더미
       MY 내 판매글               → .grid-products (스타일이 아예 없어 맨 블록으로 쌓임)
     전부 한 줄 목록으로 맞추고, 사진이 있는 줄에만 왼쪽에 썸네일을 붙인다.
     한 줄이라 스크롤 한 번에 더 많이 보이고, 화면을 옮겨도 눈이 같은 자리를 읽는다.

   규칙
     - 모든 선택자는 .zzp-list / .zzp-list-wrap 하위로 스코프한다.
       (zzp- 접두사는 이 목록만 쓰므로 화면 클래스에 매이지 않는다 —
        예전에는 .zz-profile-page 로 묶여 있어 MY 화면에서 재사용할 수 없었다)
     - 전역 요소 선택자(div · a · span · img)를 쓰지 않는다.
     - 색·모서리는 공통 테마 변수를 읽기만 한다.
     - min-width 미디어쿼리를 쓰지 않는다 (앱 폭 정책 그대로).
   ========================================================================== */

.zzp-list-wrap { margin-top: 16px; }

.zzp-list {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg, 14px);
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   한 줄
   -------------------------------------------------------------------------- */

.zzp-list .zzp-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    /* 손가락으로 누르는 곳은 44px 아래로 내려가지 않는다 */
    min-height: 44px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-soft);
    color: inherit;
}

.zzp-list .zzp-row:last-child { border-bottom: 0; }
.zzp-list .zzp-row:hover { background: var(--surface-2); }

/* --------------------------------------------------------------------------
   썸네일 — 사진이 있는 줄에만 붙는다 (없으면 아예 그리지 않는다)
   -------------------------------------------------------------------------- */

.zzp-list .zzp-thumb {
    flex: 0 0 auto;
    display: block;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface-3);
}

.zzp-list .zzp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 판매완료된 상품은 사진을 눌러 둔다 */
.zzp-list .zzp-thumb.is-dim img { opacity: .5; }

/* --------------------------------------------------------------------------
   본문
   -------------------------------------------------------------------------- */

.zzp-list .zzp-body {
    flex: 1 1 auto;
    /* 이것이 없으면 긴 제목이 날짜와 썸네일을 화면 밖으로 밀어낸다 */
    min-width: 0;
}

/* 첫 줄 : 배지 · 제목 · 날짜 */
.zzp-list .zzp-line {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.zzp-list .zzp-title {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    /* 제목이 길어도 줄을 늘리지 않는다. 목록 높이가 들쭉날쭉해지지 않게. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zzp-list .zzp-when {
    flex: 0 0 auto;
    color: var(--text-dim);
    font-size: 11.5px;
}

.zzp-list .zzp-line .pill { flex: 0 0 auto; }

/* 둘째 줄 : 가격 · 지역 · 작성자 등 */
.zzp-list .zzp-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    min-width: 0;
    color: var(--text-muted);
    font-size: 12px;
}

.zzp-list .zzp-price {
    flex: 0 0 auto;
    color: var(--text);
    font-weight: 700;
}

.zzp-list .zzp-note {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 후기 작성자는 눌러서 작성자 시트를 열 수 있다 */
.zzp-list .zzp-sub .author-trig-avatar { width: 20px; height: 20px; }
.zzp-list .zzp-sub .author-trig-name { font-size: 12px; font-weight: 700; }

/* --------------------------------------------------------------------------
   후기 태그
   -------------------------------------------------------------------------- */

.zzp-list .zzp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.zzp-list .zzp-tag {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: var(--r-pill, 999px);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}