/* ============================================================
   SALE 관 (/sale.php) — .v2sale- 스코프
   · 셀러 허브(seller-hub.css)와 같은 톤을 쓰되, SALE 축만 레드 액센트.
   · 셀러 카드(2026-09-18 세로형으로 전환): 큰 정사각 썸네일 위 + 글 아래.
     모바일 2열 / 태블릿 3열 / PC 4열 — 셀러 허브(seller-hub.css)와 같은 열 규칙.
     가로형(썸네일 왼쪽)일 때는 썸네일이 92~104px 라 세일 배너가 안 읽혔다.
   · [2026-09-18] 상품 그리드는 이 페이지에서 뺐다. 상품 목록의 정본은 /shop.php 다.
   ============================================================ */
.v2sale {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px 44px;
    box-sizing: border-box;
}
.v2sale * { box-sizing: border-box; }

.v2sale-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- 히어로 ---- */
.v2sale-hero {
    margin: 16px 0 18px;
    padding: 22px 18px;
    border-radius: 16px;
    background: linear-gradient(135deg, #1c1813 0%, #3a2420 55%, #7a2020 100%);
    color: #fff;
}
.v2sale-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; margin-bottom: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    font-size: 11px; font-weight: 800; letter-spacing: .08em;
}
.v2sale-hero h1 {
    margin: 0 0 8px;
    font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25;
}
.v2sale-hero p {
    margin: 0;
    font-size: 13.5px; line-height: 1.65; color: rgba(255,255,255,.82);
    word-break: keep-all;
}
.v2sale-hero-stat {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 14px;
}
.v2sale-hero-stat span {
    display: inline-flex; align-items: baseline; gap: 5px;
    padding: 7px 12px; border-radius: 10px;
    background: rgba(255,255,255,.12);
    font-size: 12px; font-weight: 600; color: rgba(255,255,255,.78);
}
.v2sale-hero-stat b { font-size: 15px; font-weight: 800; color: #fff; }

/* ---- 섹션 머리 ---- */
.v2sale-sec { margin-top: 26px; }
.v2sale-sec-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    margin: 0 0 12px;
}
.v2sale-sec-head h2 {
    margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: #1c1813;
}
 /* word-break:keep-all — 없으면 320px 에서 «…확인하세 / 요.» 처럼 낱말이 쪼개진다(실측) */
.v2sale-sec-head p { margin: 4px 0 0; font-size: 12.5px; color: #8a8378; word-break: keep-all; }
/* 문단 속 링크가 아니라 «독립 이동 링크» 라 터치 영역 기준(44px)을 지켜야 한다.
   글자 크기·위치를 바꾸지 않으려고 padding 으로 넓히고 같은 값의 음수 margin 으로
   레이아웃을 되돌린다(높이 15px → 43px, 보이는 모습은 종전과 동일). */
.v2sale-more {
    flex: none;
    display: inline-flex; align-items: center;
    padding: 14px 4px; margin: -14px -4px;
    font-size: 12.5px; font-weight: 700; color: #6b655c; text-decoration: none;
    white-space: nowrap;
}
.v2sale-more:hover { color: #1c1813; text-decoration: underline; }

/* ---- 셀러 카드 ---- */
/* 모바일 2열이 기본. 320px 에서도 2열을 유지한다(요구사항) —
   그래서 카드 안쪽 여백·글자를 좁은 폭 기준으로 잡았다. */
.v2sale-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0; padding: 0; list-style: none;
}
/* 세로형 — 썸네일(정사각) 위, 글 아래. 같은 줄의 카드는 grid 기본값(stretch)으로
   높이가 맞춰지고, 버튼은 .v2sale-acts 의 margin-top:auto 로 바닥에 정렬된다. */
.v2sale-card {
    position: relative;
    display: flex; flex-direction: column; gap: 10px;
    padding: 10px;
    border: 1px solid #e8e3db; border-radius: 14px; background: #fff;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.v2sale-card:hover { border-color: rgba(0,0,0,.18); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.07); }
.v2sale-card:focus-within { border-color: #1c1813; box-shadow: 0 8px 20px rgba(0,0,0,.07); }

/* 카드 폭 전체 + 1:1 고정 → 어떤 화면에서도 카드 높이가 흔들리지 않는다.
   (aspect-ratio 는 셀러 허브 .v2sl-thumb 가 이미 쓰는 방식이다) */
.v2sale-thumb {
    position: relative; flex: none;
    width: 100%; aspect-ratio: 1 / 1; height: auto;
    overflow: hidden; border-radius: 10px; background: #f4f2ee;
}
.v2sale-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 확대 가능한 썸네일 — <button> 이라 브라우저 기본 스타일을 지운다.
   크기·모서리·배경은 위 .v2sale-thumb 규칙을 그대로 물려받는다(중복 정의 금지). */
.v2sale-thumb--zoom {
    padding: 0; border: 0; margin: 0;
    font: inherit; color: inherit;
    cursor: zoom-in;
    -webkit-appearance: none; appearance: none;
}
.v2sale-thumb--zoom:focus-visible { outline: 2px solid #1c1813; outline-offset: 2px; }
/* 돋보기 배지 — «누르면 커진다» 를 알린다. 터치에는 hover 가 없으므로 항상 보인다. */
.v2sale-zoomic {
    position: absolute; right: 6px; bottom: 6px;
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 7px;
    background: rgba(28,24,19,.62); color: #fff;
    transition: background-color .16s ease;
}
.v2sale-zoomic svg { width: 15px; height: 15px; }
.v2sale-thumb--zoom:hover .v2sale-zoomic { background: rgba(28,24,19,.88); }

/* ---- 이미지 확대 오버레이 ---- */
.v2sale-lb {
    position: fixed; inset: 0;
    /* 12000 = 이 사이트의 «전체화면 모달» 층(사진검색 모달 #v2ImageModal 과 같은 값).
       고정 헤더(1000)·팝업(8700) 위로 올라온다. */
    z-index: 12000;
    display: flex; align-items: center; justify-content: center;
    padding: 24px 16px;
    background: rgba(8, 6, 4, .965);   /* 하단 내비(흰 알약)가 비쳐 보여 92%→96.5% */
    cursor: zoom-out;
}
.v2sale-lb[hidden] { display: none; }
.v2sale-lb-img {
    max-width: min(94vw, 1200px); max-height: 86vh;
    width: auto; height: auto;
    object-fit: contain;
    border-radius: 8px;
    cursor: default;
}
.v2sale-lb-close {
    position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px;
    /* 터치 영역 최소 기준(WCAG 2.5.8) */
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: rgba(255,255,255,.14); color: #fff;
    font-size: 26px; line-height: 1; cursor: pointer;
}
.v2sale-lb-close:hover { background: rgba(255,255,255,.26); }
.v2sale-lb-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.v2sale-noimg {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 34px; font-weight: 800; color: #b9b1a2;
    background: linear-gradient(180deg,#f7f5f1 0%,#efece5 100%);
}
/* 할인율 배지 — 썸네일 좌상단 */
.v2sale-pct {
    position: absolute; top: 0; left: 0;
    padding: 4px 9px;
    border-radius: 10px 0 10px 0;
    background: #b32424; color: #fff;
    font-size: 13px; font-weight: 800; line-height: 1.2;
    letter-spacing: -.02em;
}

.v2sale-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding: 0 2px 2px; }
.v2sale-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 5px; }
/* 11px — 태그(10.5px)보다 한 단계 크게. NEW·D-3 은 «지금 사야 하나» 를 결정짓는
   정보라 보조 태그와 같은 크기로 두면 모바일에서 묻힌다. */
.v2sale-badge {
    display: inline-block; padding: 3px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 800; line-height: 1.4;
    background: #f4f2ee; color: #6b655c;
}
.v2sale-badge--new  { background: #eef4ff; color: #2f5fbd; }
.v2sale-badge--time { background: #f4f2ee; color: #6b655c; }
.v2sale-badge--urgent { background: #fdecec; color: #b32424; }

.v2sale-name { margin: 0; font-size: 13.5px; font-weight: 800; line-height: 1.32; letter-spacing: -.01em; }
.v2sale-name a, .v2sale-name span {
    color: #1c1813; text-decoration: none;
    /* 2줄 — 2열 카드는 폭이 좁아 «샤넬 (단풍)» 같은 이름도 한 줄에 안 들어간다 */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; word-break: keep-all; overflow-wrap: anywhere;
}
/* 셀러명 링크도 앨범으로 간다 — 글자는 20px 한 줄이라 터치 영역이 모자란다.
   padding 으로 넓히고 같은 값의 음수 margin 으로 흐름을 되돌린다(카드 높이·글자 위치 불변,
   실측으로 확인). 카드에 44px «앨범 보기» 버튼이 이미 있어 WCAG 등가 예외에도 해당하지만,
   이름을 누르는 사람이 더 많아 실사용에서 의미가 있다. */
.v2sale-name a { padding: 12px 0; margin: -12px 0; }
.v2sale-name a:focus-visible { outline: 2px solid #1c1813; outline-offset: 2px; }

.v2sale-headline {
    margin: 5px 0 0;
    font-size: 12.5px; font-weight: 700; line-height: 1.45; color: #b32424;
    word-break: keep-all; overflow-wrap: anywhere;
}
/* 조건 안내 — 자르지 않는다.
   [2026-09-18 수정] 처음엔 2줄 clamp 였는데, 실제 운영 데이터가 들어오니
   «교환·환불 불가 · 배송비 별도 · 충전 잔액 결제 불가» 같은 구매 조건이
   잘려서 고객에게 안 보였다. 안내 자체가 이 카드의 핵심 정보라 전문을 보여준다.
   pre-line : 관리자가 줄 단위로 입력한 조건이 한 덩어리로 뭉치지 않게 한다
              (연속 공백은 접고 줄바꿈만 살린다 → 붙여넣기 공백에 강하다).
   길이는 원장에서 250자로 이미 제한돼 있어 무한정 길어지지 않는다.
   같은 행의 카드는 CSS grid 기본값(stretch)으로 높이가 함께 맞춰진다. */
.v2sale-note {
    margin: 4px 0 0;
    font-size: 11.5px; line-height: 1.5; color: #8a8378;
    white-space: pre-line;
    word-break: keep-all; overflow-wrap: anywhere;
}

/* ── 조건 안내 접기/펼치기 (CSS 만, JS 없음) ────────────────────────────
   세로형 2열 카드에서 조건이 11줄이면 카드 하나가 700px 가 된다(실측).
   기본 3줄 → 누르면 전문. «잘라서 버리는» 게 아니라 «접어 두는» 것이므로
   교환·환불·배송비 같은 구매 조건이 사라지지 않는다.
   체크박스는 화면에서 숨기되 display:none 을 쓰지 않는다 — 그러면 키보드 포커스와
   스크린리더에서 통째로 사라진다. 1px 클립 방식으로 접근성을 유지한다. */
.v2sale-noteck {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.v2sale-note.is-clamp {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
}
.v2sale-noteck:checked ~ .v2sale-note.is-clamp {
    display: block; -webkit-line-clamp: unset; overflow: visible;
}
.v2sale-notetg {
    align-self: flex-start;
    display: inline-flex; align-items: center;
    /* 터치 영역 확보 — padding 으로 넓히고 음수 margin 으로 흐름을 되돌린다 */
    min-height: 44px; padding: 0 4px; margin: -10px -4px 0;
    font-size: 11.5px; font-weight: 700; color: #6b655c;
    text-decoration: underline; text-underline-offset: 2px;
    cursor: pointer;
}
.v2sale-notetg::after { content: "조건 전체보기"; }
.v2sale-noteck:checked ~ .v2sale-notetg::after { content: "접기"; }
.v2sale-noteck:focus-visible ~ .v2sale-notetg { outline: 2px solid #1c1813; outline-offset: 2px; }
.v2sale-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.v2sale-tag {
    display: inline-block; padding: 3px 8px; border-radius: 999px;
    background: #f4f2ee; color: #6b655c;
    font-size: 10.5px; font-weight: 700; line-height: 1.4;
}
.v2sale-tag-cate { background: #efeae0; color: #6b5c3c; }
.v2sale-tag-more { background: transparent; color: #9a927f; }

/* margin-top:auto — 글 길이가 달라도 같은 줄 카드의 버튼이 같은 높이에 선다 */
.v2sale-acts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 10px; }
.v2sale-btn {
    position: relative; z-index: 1;
    /* 세로형 카드에선 버튼이 «앨범 보기» 하나뿐이라 카드 폭을 꽉 채운다. */
    flex: 1 1 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    /* 터치 영역 최소 기준(WCAG 2.5.8 / 사이트 --g-tap 44px) */
    min-height: 44px; padding: 0 12px;
    border: 1px solid #b32424; border-radius: 10px;
    background: #b32424; color: #fff;
    font-size: 12.5px; font-weight: 700; text-decoration: none; text-align: center;
    transition: background-color .16s ease;
}
.v2sale-btn:hover { background: #952020; }
.v2sale-btn--ghost { background: #fff; color: #1c1813; border-color: #dcd6cc; }
.v2sale-btn--ghost:hover { background: #f7f5f1; }
.v2sale-btn--off { background: #f2efe9; color: #8a8378; border-color: #e2ddd5; cursor: default; }
.v2sale-btn--off:hover { background: #f2efe9; }
.v2sale-btn:focus-visible { outline: 2px solid #1c1813; outline-offset: 2px; }

/* ---- 빈 결과 / 안내 ---- */
.v2sale-empty {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 46px 18px; border: 1px solid #e8e3db; border-radius: 14px; background: #fff;
    text-align: center;
}
.v2sale-empty strong { font-size: 14px; color: #1c1813; }
.v2sale-empty span { font-size: 12.5px; color: #8a8378; word-break: keep-all; }
.v2sale-empty a { margin-top: 6px; font-size: 13px; font-weight: 700; color: #1c1813; }

.v2sale-guide { margin-top: 26px; padding: 18px 16px; border: 1px solid #e8e3db; border-radius: 14px; background: #fdfcfa; }
.v2sale-guide h2 { margin: 0 0 8px; font-size: 15px; font-weight: 800; color: #1c1813; }
.v2sale-guide p { margin: 0 0 8px; font-size: 13px; line-height: 1.7; color: #6b655c; word-break: keep-all; }
.v2sale-guide p:last-of-type { margin-bottom: 0; }
.v2sale-guide a { color: #1c1813; font-weight: 700; }
.v2sale-guide-links { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px !important; }
.v2sale-guide-links a {
    display: inline-flex; align-items: center;
    padding: 12px 4px; margin: -12px -4px;      /* 20px → 44px (보이는 모습 불변) */
    font-size: 13px; text-decoration: none;
}
.v2sale-guide-links a:hover { text-decoration: underline; }

/* ---- 반응형 ---- */
/* ── 반응형 ──────────────────────────────────────────────────────
   열 규칙은 셀러 허브(seller-hub.css)와 같다: 모바일 2 / 태블릿 3 / PC 4.
   세로형 카드라 4열(카드 ≈296px)에서도 썸네일이 크고 글이 안 눌린다 —
   가로형일 때 4열을 못 썼던 이유(본문 150px)가 사라졌다. */
@media (max-width: 359px) {
    /* 320px 급에서도 2열을 유지하되(요구사항) 여백·간격만 더 줄인다 */
    .v2sale { padding: 0 12px 40px; }
    .v2sale-grid { gap: 8px; }
    .v2sale-card { padding: 8px; gap: 8px; }
    .v2sale-name { font-size: 12.5px; }
    .v2sale-btn { font-size: 11.5px; padding: 0 6px; }
}
@media (min-width: 600px) {
    .v2sale-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}
@media (min-width: 768px) {
    .v2sale { padding: 0 24px 48px; }
    .v2sale-hero { padding: 30px 26px; }
    .v2sale-hero h1 { font-size: 30px; }
    .v2sale-sec-head h2 { font-size: 19px; }
    .v2sale-card { padding: 12px; }
    .v2sale-name { font-size: 15px; }
    .v2sale-headline { font-size: 13.5px; }
    .v2sale-note { font-size: 12px; line-height: 1.55; }
}
@media (min-width: 1024px) {
    .v2sale-hero h1 { font-size: 34px; }
    .v2sale-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
    .v2sale-card { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .v2sale-card, .v2sale-btn, .v2sale-zoomic, .v2sale-lb-close { transition: none; }
    .v2sale-card:hover { transform: none; }
}