@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}

/* ---------- 필터 두 줄 묶음 (카테고리 / 세부 조건) ----------
   예전에는 알약 덩어리 아래에 회색 박스(#f4f5f7 + radius 14 + padding 24 28)가 한 겹 더 얹혀 있었다.
   알약 배경과 같은 회색이라 두 영역이 한 덩어리로 뭉쳐 보이면서 모양만 달라 어수선했고,
   두 줄이 부모-자식 관계라는 것도 화면에 드러나지 않았다.
   → 박스 배경을 걷어내고 회색은 알약 하나만 남긴다. 두 줄 사이는 얇은 선으로만 나누고,
     왼쪽 라벨로 역할을 밝힌다. 2026-09-08 */
.plist_rows{margin-top:20px}
.plist_row{display:flex;align-items:flex-start;gap:18px;padding:20px 0}
.plist_row + .plist_row{border-top:1px solid #eee}
/* 라벨은 한 줄 고정. line-height로 각 줄 첫 항목의 세로 중앙에 맞춘다
   (알약 높이 47.5px / 체크박스 라벨 높이 25.5px) */
.plist_row_label{flex:0 0 84px;white-space:nowrap;font-size:15px;letter-spacing:0;color:#6b7684;font-weight:600}
.plist_row--pills .plist_row_label{line-height:47px}
.plist_row--chk .plist_row_label{line-height:26px}
.plist_row_body{flex:1;min-width:0}

/* ---------- 알약(하위 카테고리) ---------- */
.plist_pills{display:flex;flex-wrap:wrap;gap:10px;margin:0}
/* 완전히 둥근 캡슐(radius 999px) → comty02.html 문의폼 테마 선택 박스와 같은 각진 사각 박스(radius 10px).
   회색 배경은 그대로 유지 — 모양만 박스로 바꾼다. 2026-09-09 */
.plist_pill{display:inline-block;padding:11px 22px;border:0;border-radius:10px;
  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}
/* 선택됨 표시를 검정 대신 사이트 메인 청록(#0fb598, header_new.html 검색바·hover와 동일 값)으로 통일. 2026-09-09 */
.plist_pill.on{background:#0fb598;color:#fff;font-weight:600}

/* ---------- 체크박스 필터(그 아래 단계) ---------- */
.plist_filters{display:flex;flex-wrap:wrap;align-items:center;gap:12px 42px;margin:0;padding:0}
.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;-moz-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;
}
/* common.css의 전역 input[type=checkbox]::before가 체크(✓) 글자를 자체로 그려서,
   우리가 :checked에 넣는 흰 체크 SVG 배경과 겹쳐 두 개로 보이던 문제.
   여기서는 그 글자를 아예 없앤다. */
.plist_filters input[type=checkbox]::before{content:none}
.plist_filters input[type=checkbox]:hover{border-color:#aab2bd}
.plist_filters input[type=checkbox]:checked{
  /* 검정 대신 알약 선택색과 같은 메인 청록(#0fb598) */
  background:#0fb598 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:#0fb598;
}

/* ---------- 정렬 툴바 (좌: 상품 수 / 우: "추천순 ⌄" — 화살표는 별도 요소, 열리면 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:20px;font-family:'NotoKR-Medium',sans-serif;line-height:1.4;letter-spacing:0;color:#333;margin-top:15px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}

/* 뱃지 — 배경 없는 회색 글씨 + 아이콘 (SVG: images/pcard/ico_*.svg)
   회색은 흰 배경 대비 WCAG AA(4.5:1) 충족값 #6b7684 사용 (시니어 가독) */
.pcard_badges{display:flex;flex-wrap:nowrap;gap:5px 10px;margin-top:5px;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}

/* 해시태그 — 썸네일 위 오버레이 뱃지.
   메인 s3 카드 뱃지(index_main_new.html의 .s3 .badge)와 같은 형태로 통일 —
   흰 반투명 + 검정 굵은 글씨, 모서리 6px. 메인에서 색상 프리셋을 걷어내고
   흰색으로 통일한 2026-09 결정을 상품목록에도 그대로 적용한다.
   본문에 두면 바로 위 .pcard_badges와 크기가 비슷한 메타 정보가 두 줄로 붙어 서로 묻히므로
   이미지 위로 올렸다. 태그 유무와 상관없이 본문은 항상 제목 → 뱃지 → 가격 3단으로 일정하다.
   왼쪽 정렬 — 오른쪽 위는 찜하기 버튼(.pcard_wish) 자리로 비워 둔다.
   특가만 예외로 강조색(.on, 흰 배경 대비 AA 충족 진초록) */
.pcard_tags{position:absolute;left:12px;top:12px;right:12px;z-index:2;display:flex;flex-wrap:nowrap;gap:6px;overflow:hidden}
.pcard_tags span{display:inline-block;flex-shrink:0;white-space:nowrap;padding:4px 12px;border-radius:6px;
  background:rgba(255,255,255,.8);color:#000;font-size:15px;font-weight:700;line-height:1.5;letter-spacing:0}
.pcard_tags span.on{background:#0b7a55;color:#fff}
.pcard_tags .pcard_badge--accent{background:#ff4900;color:#ffffff}

/* ---------- 결과 없음 ---------- */
.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}