/* ─────────────────────────────────────────────────────────────
   평강프라자 — 상품 카드 (타일, pk-card) · PC·모바일·목록·시뮬레이터 공용
   시안: docs/design/card-trend-draft.html A안 (2026-09-16 확정 "타일") · 마크업 extend/pk.card.php
   이전(2026-09-15 쇼룸 카드: 흰 카드 + 1px 링 + 12px + hairline 가격 줄 + 블루 칩·블루 숫자)은 문성 파스텔 카드와 뼈대가 같아 교체.
   가이드 ⑧ 공식파트너 원형 플래그 / ⑨ 제품명·컬러·스펙·SKU·금액·최대혜택가·포인트 / ⑩ 플래그 하단 최대 2개.
   문법: 카드 테두리 없음. 사진 타일(16px, 콘크리트)만 둥글고 정보는 페이지 바탕에 그대로 얹는다.
   플래그는 사진 위 반투명 유리 칩. 가격은 검정 Sharp Sans 큰 숫자("월 49,170 원"), 블루는 혜택 한 줄(카드 아이콘)에만.
   SKU·포인트는 맨 아래 작은 줄. 호버 = 타일이 4px 떠오르고 그림자, 사진 살짝 확대.
   ───────────────────────────────────────────────────────────── */
.pk-card{display:block;position:relative;text-decoration:none !important;color:var(--pk-ink);font-family:var(--pk-kr);line-height:1.33;background:transparent;border:0;box-sizing:border-box}
.pk-card *{box-sizing:border-box}
.pk-card,.pk-card span,.pk-card i,.pk-card b,.pk-card em,.pk-card small{text-indent:0}   /* 모바일 테마 text-indent 상속 차단 */
.pk-card span{display:block}
.pk-card:hover{color:var(--pk-ink)}
.pk-card:focus-visible{outline:2px solid var(--pk-blue);outline-offset:4px;border-radius:16px}
/* 카드를 담는 솔루션 li 의 테두리·배경 제거 + 테두리 없는 카드는 간격이 곧 구분선이라 sop-main.css 20px → 24px 이상 */
.bestca li:has(> .pk-card),.pr_desc li:has(> .pk-card),.pr_slide li:has(> .pk-card),.pr_slide .prli:has(> .pk-card),.sop-goods-grid li:has(> .pk-card){border:0 !important;background:transparent !important}
.pr_desc ul:has(> li > .pk-card),.bestca ul:has(> li > .pk-card){gap:36px 24px}
.pr_slide .prli:has(> .pk-card){height:auto !important;padding:0 12px}   /* 테마 .prli 460px 고정 → 카드 하단 잘림 방지 · 슬라이드 칸 간격 24px */

/* 사진 타일 */
.pk-card .im{position:relative;aspect-ratio:1/1;background:var(--pk-tile,#fff);border-radius:16px;overflow:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease}
/* 카테고리 색을 깐 칸에만 1px 링 (2026-09-22) — 흰 배경이면 --pk-tile-line 이 없어 투명.
   테두리 대신 :after 링인 이유: 둥근 모서리에 border 를 주면 이미지 클리핑 곡선과 어긋난다 */
.pk-card .im:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px var(--pk-tile-line,transparent)}
.pk-card .im img{position:relative;width:100% !important;height:100% !important;object-fit:cover;margin:0;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.pk-card:hover .im{transform:translateY(-4px);box-shadow:0 16px 36px rgba(17,18,20,.12)}
.pk-card:hover .im img{transform:scale(1.04)}
.pk-card .im.cut img{width:76% !important;height:76% !important;margin:12%;object-fit:contain;mix-blend-mode:multiply}
.pk-card .im .noimg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:var(--pk-sand)}
.pk-card .im .noimg small{font-size:12px;color:var(--pk-mute)}   /* 사진 없는 상품 */
/* ⑧ 공식파트너 플래그: 원형, 왼쪽 위 (스마트스토어 상품 이미지 오른쪽 위에 배지가 박혀 있어 겹침 회피. 현재 전 상품 미노출) */
.pk-card .pk-partner{position:absolute;top:12px;left:12px;width:64px;height:64px;border-radius:50%;background:var(--pk-blue);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:11px;line-height:1.33;font-weight:700;letter-spacing:-.3px;white-space:nowrap;z-index:2}
.pk-card .pk-partner i,.pk-card .pk-partner b{display:block;width:auto !important;min-width:0;max-width:none;height:auto !important;margin:0;padding:0;border:0;background:transparent;border-radius:0;font-style:normal;text-align:center;line-height:1.33;color:#fff}   /* 모바일 테마가 b/i 에 폭을 주는 규칙 무력화 */
.pk-card .pk-partner b{font-size:11px;margin-top:0}
/* ⑩ 플래그: 사진 위 반투명 유리 칩, 왼쪽 아래, 최대 2개 */
.pk-card .pk-flags{position:absolute;left:12px;bottom:12px;display:flex;gap:6px;z-index:2}
.pk-card .pk-flags span{height:26px;padding:0 10px;display:inline-flex;align-items:center;font-size:12px;font-weight:700;border-radius:999px;background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--pk-ink);border:1px solid rgba(255,255,255,.6);white-space:nowrap}
.pk-card .pk-flags span.sale{background:rgba(20,40,160,.88);color:#fff;border-color:rgba(255,255,255,.2)}

/* 정보: 타일 폭 그대로 페이지 바탕에 */
.pk-card .bd{padding:14px 2px 0;text-align:left;border:0 !important}   /* 솔루션 basic.css 전역 .bd{border:1px solid #ddd !important} 무력화 — 테두리 없는 카드라 드러남 (2026-09-16) */
.pk-card .nm{font-size:14px;font-weight:700;line-height:1.33;min-height:37px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--pk-ink);letter-spacing:-.2px}
.pk-card .mt{margin-top:6px;font-size:12px;color:var(--pk-mute);display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:16px}
.pk-card .mt i{width:10px;height:10px;border-radius:50%;border:1px solid var(--pk-line);display:inline-block;flex:none}
.pk-card .mt em{font-style:normal;display:inline}
.pk-card .mt em + em:before{content:'·';margin-right:6px;color:var(--pk-line)}
/* 가격: "월" 12 · 숫자 22 Sharp Sans 검정 · "원" 12, 아래 줄에 기간·케어 */
.pk-card .pr{margin-top:12px;display:flex;align-items:baseline;gap:4px;flex-wrap:wrap}
.pk-card .pr .l{font-size:12px;font-weight:700;color:var(--pk-ink);margin-right:2px}
.pk-card .pr .v{font-family:var(--pk-en);font-size:22px;line-height:1.33;color:var(--pk-ink)}
.pk-card .pr .u{font-size:12px;font-weight:700;color:var(--pk-ink)}
.pk-card .pr .term{width:100%;font-size:12px;color:var(--pk-mute);margin-top:-2px}
.pk-card .pr .v.soon{font-family:inherit;font-size:14px;color:var(--pk-mute)}
/* 최대혜택가: 블루 한 줄 + 카드 아이콘 */
.pk-card .bn{margin-top:8px;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--pk-blue)}
.pk-card .bn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none;display:inline-block}
.pk-card .bn b{font-family:var(--pk-en);font-weight:700;color:var(--pk-blue);display:inline}
.pk-card .bn b .kr{font-family:var(--pk-kr);display:inline}
.pk-card .cond{margin-top:3px;font-size:12px;color:var(--pk-mute)}
/* 맨 아래: SKU 왼쪽 · 포인트 오른쪽 */
.pk-card .ft{margin-top:8px;font-size:12px;color:var(--pk-mute);display:flex;justify-content:space-between;align-items:baseline;gap:8px;min-height:16px}
.pk-card .ft .sku{font-family:var(--pk-en);letter-spacing:.08em;display:inline}
.pk-card .ft .pt{display:inline;text-align:right}

@media (max-width:860px){
  .pr_desc ul:has(> li > .pk-card),.bestca ul:has(> li > .pk-card){gap:24px 12px}
  .pk-card .bd{padding:10px 0 0}
  .pk-card .pr .v{font-size:20px}
  .pk-card .pk-partner{width:56px;height:56px;font-size:10px;top:8px;left:8px}
  .pk-card .pk-partner b{font-size:10px}
  .pk-card .pk-flags{left:8px;bottom:8px}
  .pk-card .pk-flags span{height:24px;padding:0 8px}
}
@media (prefers-reduced-motion:reduce){
  .pk-card .im,.pk-card .im img{transition:none}
  .pk-card:hover .im,.pk-card:hover .im img{transform:none}
}