@charset "utf-8";
/* =====================================================================
 * sublist_grid.css — 상품 목록(sublist.html) 카드 그리드 개편 (2026-08)
 * 기존 layout.css의 .prd_* 클래스와 완전히 분리된 신규 스타일.
 * 필터 영역: .plist_*  /  카드: .pcard_*
 * ===================================================================== */

/* 구 장식 배경(주황 도넛+점 패턴, layout_common.css:28 bg_contents.gif) 제거 */
#sub_contents{background:none}

/* ---------- 타이틀 ---------- */
.plist_head{padding:30px 0 0}
.plist_title{font-size:40px;font-weight:700;color:#111;line-height:1.3;letter-spacing:-0.5px}
.plist_title_eng{font-size:16px;font-weight:400;color:#a8b0bd;margin-left:10px;letter-spacing:0}

/* ---------- 알약(하위 카테고리) ---------- */
.plist_pills{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 0}
.plist_pill{display:inline-block;padding:11px 22px;border:0;border-radius:999px;
  font-size:17px;line-height:1.5;letter-spacing:0;color:#333;background:#f4f5f7;text-decoration:none;transition:background .15s,color .15s}
.plist_pill:hover{background:#e8eaee;color:#111;text-decoration:none}
.plist_pill:focus-visible{outline:2px solid #1a1a1a;outline-offset:2px}
.plist_pill.on{background:#1a1a1a;color:#fff;font-weight:600}

/* ---------- 체크박스 필터(그 아래 단계) ---------- */
.plist_filters{display:flex;flex-wrap:wrap;gap:12px 42px;margin-top:24px;padding:24px 28px;
  background:#f4f5f7;border-radius:14px}
.plist_filters label{font-size:17px;line-height:1.5;letter-spacing:0;color:#222;cursor:pointer;display:inline-flex;align-items:center;gap:9px}
/* 체크박스 커스텀: 기본형 대신 직접 그림 — 체크 시 검정 배경 + 흰 체크 */
.plist_filters input[type=checkbox]{
  -webkit-appearance:none;appearance:none;
  width:19px;height:19px;margin:0;cursor:pointer;
  border:1.5px solid #d4d8de;border-radius:5px;background:#fff;
  transition:background .12s,border-color .12s;
}
.plist_filters input[type=checkbox]:hover{border-color:#aab2bd}
.plist_filters input[type=checkbox]:checked{
  background:#1a1a1a url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
  border-color:#1a1a1a;
}

/* ---------- 정렬 툴바 (좌: 상품 수 / 우: "추천순 ⌄" — 화살표는 별도 요소, 열리면 180° 회전) ---------- */
.plist_toolbar{display:flex;justify-content:space-between;align-items:center;margin:20px 0 16px}
.plist_count{font-size:16px;line-height:1.5;color:#6f6f6f}
/* 필터 초기화 버튼 — 체크 1개 이상일 때만 JS로 노출 */
.plist_reset{margin-left:auto;border:0;background:none;padding:0;font-size:15px;line-height:1.5;letter-spacing:0;color:#6b7684;
  text-decoration:underline;cursor:pointer}
.plist_reset:hover{color:#333}
.plist_sort_wrap{position:relative;display:inline-flex;align-items:center}
.plist_sort_wrap:after{
  content:"";position:absolute;right:1px;top:50%;width:13px;height:13px;margin-top:-6px;
  background:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/13px no-repeat;
  transition:transform .15s ease;pointer-events:none;
}
.plist_sort_wrap.open:after{transform:rotate(180deg)}
.plist_sort{
  -webkit-appearance:none;appearance:none;
  border:0;border-radius:0;height:auto;background:transparent;
  padding:4px 19px 4px 4px;
  width:-moz-fit-content;width:fit-content;
  font-size:16px;line-height:1.5;letter-spacing:0;font-weight:600;color:#222;cursor:pointer;
}
.plist_sort:focus{outline:none}

/* ---------- 카드 그리드 (1200px 전폭 3열) ---------- */
.pcard_grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 24px}

/* min-width:0 — 그리드 트랙 기본 최소폭(auto)이 이미지 등 내용물의 고유 크기를 못 줄여서
   원본 이미지가 크면 트랙이 밀려 그리드 전체가 깨지는 문제 방지 */
.pcard{display:flex;flex-direction:column;min-width:0;color:inherit;text-decoration:none;border-radius:20px}
.pcard:hover{text-decoration:none}
.pcard:focus-visible{outline:2px solid #1a1a1a;outline-offset:4px}

.pcard_thumb{position:relative;flex-shrink:0;width:100%;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:#eef1f5}
.pcard_thumb img{width:100%;height:100%;max-width:100%;object-fit:cover;display:block;transition:transform .25s ease}
.pcard:hover .pcard_thumb img{transform:scale(1.04)}

/* 찜하기 버튼 — 이번엔 미구현: 마크업에서 display:none 인라인 처리. 구현 시 인라인만 제거 */
.pcard_wish{position:absolute;bottom:10px;right:10px;width:40px;height:40px;border:0;border-radius:50%;
  background:rgba(255,255,255,.92);color:#555;font-size:20px;line-height:40px;text-align:center;
  cursor:pointer;padding:0;box-shadow:0 1px 6px rgba(0,0,0,.08)}
.pcard_wish:hover{color:#f04034}
.pcard_wish.on{color:#f04034}

.pcard_title{font-size:19px;font-family:'NotoKR-Medium',sans-serif;line-height:1.5;letter-spacing:0;color:#333;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:3em}

/* 뱃지 — 배경 없는 회색 글씨 + 아이콘 (SVG: images/pcard/ico_*.svg)
   회색은 흰 배경 대비 WCAG AA(4.5:1) 충족값 #6b7684 사용 (시니어 가독) */
.pcard_badges{display:flex;flex-wrap:nowrap;gap:5px 10px;margin-top:15px;overflow:hidden}
.pcard_badge{display:inline-flex;align-items:center;gap:4px;font-size:18px;line-height:1.5;letter-spacing:0;font-weight:500;color:#6b7684;white-space:nowrap;flex-shrink:0}
.pcard_badge img{width:16px;height:16px;display:block;object-fit:contain;flex-shrink:0}
.pcard_badge--shrink{flex-shrink:1;min-width:0}
.pcard_badge_txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

.pcard_price{margin-top:auto;padding-top:14px;font-size:16px;line-height:1.5;letter-spacing:0;color:#6f6f6f;text-align:right}
.pcard_price b{font-size:23px;line-height:1.4;letter-spacing:0;color:#111;font-weight:700;margin-left:2px}

/* 해시태그 — 알약(pill) 칩. 특가·마감·임박 태그만 강조색(.on, AA 충족 진초록) */
.pcard_tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.pcard_tags span{display:inline-block;padding:5px 12px;border-radius:999px;background:#f1f4f8;color:#556;font-size:16px;line-height:1.5;letter-spacing:0}
.pcard_tags span.on{background:#0b7a55;color:#fff;font-weight:500}
.pcard_tags .pcard_badge--accent{background:#e0fff9;color:#556}

/* ---------- 결과 없음 ---------- */
.pcard_empty{grid-column:1/-1;padding:90px 0;text-align:center;color:#8892a0;font-size:16px;line-height:1.5}
.pcard_empty button{margin-top:14px;height:36px;padding:0 18px;border:1px solid #ddd;border-radius:6px;
  background:#fff;font-size:14px;line-height:1.5;letter-spacing:0;color:#333;cursor:pointer}
.pcard_empty button:hover{border-color:#aaa}