/* ==========================================================================
   ZZAPS 상세페이지 전용 스타일
   --------------------------------------------------------------------------
   소유       : 상세 전담 세션
   적용 범위  : 판매글·구매희망 상세 (products.show) 한 곳
   로드 방식  : products/show.blade.php 의 @push('head') 에서만 link
                (vite 엔트리·공통 app.css 를 건드리지 않는다)

   규칙
     - 모든 선택자는 .zz-detail-page 하위로 스코프한다.
     - div / a / img / button / h1 같은 전역 요소 선택자를 쓰지 않는다.
     - body · html · .container · .shell 등 공통 래퍼를 재정의하지 않는다.
     - 공통 헤더/하단내비 선택자는 "숨김" 목적 1건 외에는 건드리지 않는다.
     - !important 는 공통 스타일과 확실히 충돌하는 최소 지점에만 쓴다.
     - 색은 공통 테마 변수(--surface 등)를 읽기만 한다. 새 전역 변수를 만들지 않는다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   공통 헤더 숨김 — 이 파일에서 공통 선택자를 참조하는 유일한 지점

   상세는 대표 이미지를 화면 최상단까지 끌어올리고 그 위에 뒤로가기·공유·
   신고 버튼을 얹는다. 그래서 공통 헤더가 있으면 이미지가 밀려 내려간다.
   레이아웃 파일을 고치는 대신 이미 있는 body_class 훅으로 이 페이지에서만 감춘다.
   다른 페이지에는 .zz-detail-page 가 붙지 않으므로 영향이 없다.
   -------------------------------------------------------------------------- */
.zz-detail-page .site-header { display: none; }

/* 헤더가 사라진 만큼 본문 상단 여백을 되돌린다 */
.zz-detail-page main { padding-top: 0; }

/* ==========================================================================
   1. 갤러리 + 오버레이 액션
   ========================================================================== */

.zz-detail-gallery {
    position: relative;
    /* 좌우 여백을 없애 화면 폭을 꽉 채운다. PC 에서도 셸 폭 안에서 같은 모양이다. */
    margin: 0 calc(var(--shell-pad) * -1);
    background: var(--surface-2);
}

.zz-detail-gallery-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.zz-detail-gallery-track::-webkit-scrollbar { display: none; }

.zz-detail-gallery-item {
    flex: 0 0 100%;
    scroll-snap-align: center;
    aspect-ratio: 1 / 1;
    background: var(--surface-3);
}
.zz-detail-gallery-item > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 판매완료 매물은 사진을 눌러 어둡게 */
.zz-detail-gallery.is-dim .zz-detail-gallery-item > img { opacity: .45; }

.zz-detail-gallery-empty {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    font-size: 14px;
}

/* --- 오버레이 상단 액션 (공통 헤더를 대신한다) --- */
.zz-detail-overlay {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 10px;
    /* 사진이 밝아도 아이콘이 보이도록 위쪽만 살짝 어둡게 깐다 */
    background: linear-gradient(to bottom, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
    pointer-events: none;
}
.zz-detail-overlay > * { pointer-events: auto; }
.zz-detail-overlay-spacer { flex: 1; }

.zz-detail-obtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .42);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.zz-detail-obtn:hover { background: rgba(0, 0, 0, .58); }
.zz-detail-obtn:active { transform: translateY(1px); }
.zz-detail-obtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.zz-detail-obtn[disabled] { opacity: .6; cursor: default; }

/*
   관심(하트) — 대표사진 위.
   담기 전에는 흰 테두리 하트, 담고 나면 포인트색으로 채운다.
   상태가 한눈에 갈리도록 채움(fill)까지 바꾼다.
*/
.zz-detail-obtn--fav[aria-pressed="true"] {
    background: rgba(229, 72, 77, .92);
    color: #fff;
}
.zz-detail-obtn--fav[aria-pressed="true"] svg { fill: currentColor; }

/* 사진 장수 표시 */
.zz-detail-gallery-count {
    position: absolute;
    right: 12px; bottom: 12px;
    z-index: 5;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* 여러 장일 때 위치 점 */
.zz-detail-gallery-dots {
    position: absolute;
    left: 0; right: 0; bottom: 12px;
    z-index: 5;
    display: flex;
    justify-content: center;
    gap: 6px;
}
.zz-detail-gallery-dots > span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
    transition: background .15s, width .15s;
}
.zz-detail-gallery-dots > span.is-on { background: #fff; width: 16px; border-radius: var(--r-pill); }

/* ==========================================================================
   2. 판매자 한 줄 (대표이미지 바로 아래)

   카드로 감싸지 않는다. 아래쪽 실선 하나로만 본문과 나눈다.
   줄 전체가 판매자 페이지 링크다.
   ========================================================================== */

.zz-detail-seller {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    color: inherit;
}

.zz-detail-seller-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-3);
    flex: 0 0 auto;
}

.zz-detail-seller-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* 인증 배지 + 지역 : 닉네임 아래 한 줄 */
.zz-detail-seller-place {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 지역 이름만 줄어들게 한다 (배지는 잘리면 뜻을 잃는다) */
.zz-detail-seller-place > .trust-badge { flex: none; }
.zz-detail-seller-sep { flex: none; }

/* 매너 : 오른쪽 끝. 값 + 표정, 아래에 라벨 */
.zz-detail-seller-manner {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

/* ==========================================================================
   3. 하단 고정 액션바 (관심 · 가격제안 · 채팅 · 신고)
   ========================================================================== */

.zz-detail-actions {
    position: fixed;
    /* 화면 전체 폭이 아니라 공통 앱 컨테이너(.zz-app) 폭 안에서만 표시한다.
       변수는 app.css 가 정의하고 여기서는 읽기만 한다. */
    left: var(--zz-gutter, 0px); right: var(--zz-gutter, 0px);
    /* 공통 하단 내비 바로 위. 내비 높이는 공통 변수를 읽기만 한다. */
    bottom: var(--tabbar-total, 62px);
    z-index: 45;
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.zz-detail-actions-inner {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 10px var(--shell-pad);
    display: flex;
    align-items: center;
    gap: 8px;
}

.zz-detail-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 46px;
    padding: 0 14px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.zz-detail-act:hover { border-color: var(--border-strong); }

/* 관심(하트) — 눌린 상태를 색으로 구분한다 */
.zz-detail-act--fav { flex: 0 0 auto; width: 52px; padding: 0; flex-direction: column; gap: 1px; }
.zz-detail-act--fav .zz-detail-act-count { font-size: 11px; color: var(--text-muted); }
.zz-detail-act--fav[aria-pressed="true"] { color: var(--primary); border-color: var(--primary-line); background: var(--primary-dim); }
.zz-detail-act--fav[aria-pressed="true"] .zz-detail-act-count { color: var(--primary); }

/* 채팅 = 주요 행동 */
.zz-detail-act--primary {
    flex: 1;
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.zz-detail-act--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }

/* 가격제안 */
.zz-detail-act--offer { flex: 0 0 auto; }

/* 신고 — 항상 같은 자리에 둔다 */
.zz-detail-act--report {
    flex: 0 0 auto;
    width: 46px;
    padding: 0;
    color: var(--danger);
}

.zz-detail-act[disabled] { opacity: .5; cursor: not-allowed; }

/* 액션바에 본문이 가리지 않도록 하단 여백을 준다 */
.zz-detail-page main { padding-bottom: calc(var(--tabbar-total, 62px) + 76px); }

/* ==========================================================================
   4. 제목 · 가격 · 카테고리 영역
   ========================================================================== */

.zz-detail-page .detail-head { padding: 16px 0 14px; border-bottom: 0; }
.zz-detail-page .detail-title { font-size: 20px; font-weight: 700; line-height: 1.35; margin: 0 0 8px; }
.zz-detail-page .detail-price { font-size: 22px; font-weight: 800; margin: 0 0 6px; }
.zz-detail-page .detail-meta { font-size: 12.5px; color: var(--text-muted); margin: 0; }
.zz-detail-cat { color: var(--text-muted); }
.zz-detail-cat:hover { color: var(--text); text-decoration: underline; }
/* "의류 > 남성의류" 의 꺾쇠. 점(·) 구분자보다 옅게 둬서 두 단계가 한 덩어리로 읽히게 한다. */
.zz-detail-cat-sep { color: var(--text-dim); margin: 0 3px; }

/* ==========================================================================
   5. 내용
   ========================================================================== */

.zz-detail-desc { padding-top: 18px; }
/* 줄바꿈을 그대로 살린다 (본문은 순수 텍스트로 저장된다) */
.zz-detail-page .detail-body { white-space: pre-wrap; font-size: 15px; line-height: 1.75; }

/* 본문 아래에서 갤러리로 되돌아가는 버튼 */
.zz-detail-togallery {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    margin-top: 16px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.zz-detail-togallery:hover { color: var(--text); border-color: var(--border-strong); }

/* ==========================================================================
   6. 거래 희망 장소 (지도)
   ========================================================================== */

.zz-detail-place { padding: 20px 0 4px; }
.zz-detail-place-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.zz-detail-place-card {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--surface);
}
.zz-detail-place-card--empty { padding: 16px; }

.zz-detail-place-map {
    position: relative;
    height: 170px;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.zz-detail-place-fallback { color: var(--text-dim); font-size: 13px; }

.zz-detail-place-body { padding: 14px 16px 16px; }
.zz-detail-place-name { font-size: 15px; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.zz-detail-place-desc { font-size: 13px; color: var(--text-muted); margin: 0; }
.zz-detail-place-note { color: var(--text-dim); }
.zz-detail-place-more { font-size: 12.5px; color: var(--text-dim); margin: 6px 0 0; }

.zz-detail-place-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
}
.zz-detail-place-btn:hover { background: var(--surface-3); }

/* Leaflet 다크 보정. leaflet.css 가 뒤에 붙으므로 명시도를 한 단계 올린다. */
.zz-detail-place-map.leaflet-container { background: var(--surface-2); font: inherit; }
.zz-detail-place-map .leaflet-control-attribution {
    background: rgba(11, 11, 13, .72);
    color: var(--text-dim);
    font-size: 9.5px;
    padding: 1px 5px;
}
.zz-detail-place-map .leaflet-control-attribution a { color: var(--text-dim); }

/* ==========================================================================
   7. 통계 한 줄 · 신고 링크
   ========================================================================== */

.zz-detail-stats {
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.zz-detail-report { padding: 14px 0 4px; }
.zz-detail-report-link {
    display: inline-block;
    padding: 6px 0;
    font-size: 13px;
    color: var(--text-dim);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.zz-detail-report-link:hover { color: var(--danger); }

/* ==========================================================================
   8. 비슷한 물품 (가로 스크롤)
   ========================================================================== */

.zz-detail-related { margin-top: 24px; }
.zz-detail-related-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}
.zz-detail-related-title { font-size: 16px; font-weight: 700; color: var(--text); margin: 0; }
.zz-detail-related-more { font-size: 13px; color: var(--text-muted); }

/* 가로 스크롤. 좌우 여백 밖까지 흘려 보내 화면 끝에서 잘리지 않게 한다. */
.zz-detail-related-list {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    margin: 0 calc(var(--shell-pad) * -1);
    padding: 0 var(--shell-pad) 4px;
}
.zz-detail-related-list::-webkit-scrollbar { display: none; }

.zz-detail-rcard {
    flex: 0 0 auto;
    width: 132px;
    scroll-snap-align: start;
    color: inherit;
}
.zz-detail-rcard-thumb {
    position: relative;
    display: block;
    width: 132px;
    height: 132px;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
}
.zz-detail-rcard-thumb > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zz-detail-rcard-veil {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(11, 11, 13, .66);
    color: #fff; font-size: 12px; font-weight: 700;
}
.zz-detail-rcard-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text);
    word-break: break-all;
}
.zz-detail-rcard-price {
    display: block;
    margin-top: 3px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
}
.zz-detail-rcard-region {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zz-detail-empty {
    padding: 18px 0;
    color: var(--text-dim);
    font-size: 13.5px;
    text-align: center;
}

/* ==========================================================================
   5. 태블릿 · PC — 구조는 그대로, 크기만 키운다
   모바일과 같은 세로 한 칸 흐름을 유지한다. 좌우 분할하지 않는다.
   ========================================================================== */

/* 폭이 넓어졌다고 사진·버튼·글자를 키우지 않는다.
   사용자 화면은 모바일 UI 하나만 쓰므로 min-width 기반 확대 규칙을 두지 않는다.
   태블릿·PC 에서도 모바일과 같은 한 컬럼을 유지한다.

   예전에 여기 있던 max-width:520px 는 없앴다.
   그 규칙은 공통 셸(--shell)이 960~1040px 이던 시절, 상세만 휴대폰 폭으로
   묶어 두려고 넣은 것이다. 지금 --shell 은 앱 컨테이너 폭(--zz-app-w)을
   그대로 따르므로(모바일 430px / PC 660px) 이 상한이 남아 있으면
   PC 에서 상세만 520px 로 좁아져 다른 화면과 어긋난다.
   폭 정책은 app.css 의 --zz-app-w 한 곳에서만 정한다. */

/* 모션 최소화 설정 존중 */
@media (prefers-reduced-motion: reduce) {
    .zz-detail-gallery-track { scroll-behavior: auto; }
    .zz-detail-gallery-dots > span { transition: none; }
}

/* 비슷한 매물 타일의 지역 한 줄 (제목·가격과 같은 폭 안에서 말줄임) */
.zz-detail-rcard-region {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   거래 희망장소 미리보기 지도

   작은 미리보기라 Leaflet 기본 저작자 문구가 지도를 덮는다.
   지도 위에서는 감추고, 표시 의무는 카드 아래 "지도 출처" 링크로 지킨다.
   (JS 에서 attributionControl 을 끄지만, 다른 경로로 그려질 때를 대비해 CSS 로도 막는다)
   -------------------------------------------------------------------------- */
.zz-detail-place-map .leaflet-control-attribution,
.zz-detail-place-map .leaflet-control-container { display: none; }

.zz-detail-place-credit {
    display: block;
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-dim);
}
.zz-detail-place-credit a { color: inherit; text-decoration: underline; }