/* ===== 보유 스킨 전체보기 페이지 (products/list.php) ===== */
.pl-section {background: #0a0a0a;padding: var(--area-sapce);color: #fff;min-height: 70vh;}
.pl-inner {max-width: 1600px;margin: 0 auto;padding-top: 80px;}

/* ---- 히어로 ---- */
.pl-hero {margin-bottom: 56px;}
.pl-eyebrow {display: flex;align-items: center;gap: 10px;margin-bottom: 24px;}
.pl-dot {width: 8px;height: 8px;background: var(--color-green);border-radius: 50%;display: inline-block;}
.pl-eyebrow span:last-child {font-size: 13px;letter-spacing: .14em;color: var(--color-green);font-weight: 700;text-transform: uppercase;}
.pl-title {font-size: var(--title-size);line-height: 1.2;font-weight: 800;letter-spacing: -0.02em;margin: 0 0 20px;}
.pl-desc {font-size: 16px;line-height: 1.7;color: #9a9a9a;margin: 0;max-width: 560px;}

/* ---- 필터 영역 ---- */
.pl-filters {border: 1px solid #222;background: #101010;padding: 28px 28px 32px;margin-bottom: 32px;}
.pl-filter-row {display: flex;flex-wrap: wrap;gap: 10px;}
.pl-filter-row + .pl-filter-row {margin-top: 24px;padding-top: 24px;border-top: 1px solid #1e1e1e;}
.pl-filter-label {font-size: 12px;letter-spacing: .04em;color: #777;font-weight: 700;text-transform: uppercase;margin-bottom: 12px;}

/* 카테고리 탭 */
.pl-tab-btn {padding: 10px 20px;border: 1px solid #333;background: transparent;color: #9a9a9a;font-size: 14px;font-weight: 700;cursor: pointer;transition: border-color .2s ease, color .2s ease, background .2s ease;}
.pl-tab-btn:hover {border-color: #555;color: #fff;}
.pl-tab-btn.is-active {background: var(--color-green);border-color: var(--color-green);color: #0a0a0a;}

/* 하단 필터 줄: 가격 / 색감 / 초기화 */
.pl-filter-bottom {align-items: flex-start;justify-content: space-between;gap: 40px;flex-wrap: wrap;}
.pl-price {flex: 1 1 320px;min-width: 260px;}
.pl-price-values {font-size: 14px;font-weight: 700;color: var(--color-green);margin-bottom: 16px;}
.pl-price-slider {position: relative;height: 20px;}
.pl-price-track {position: absolute;top: 50%;left: 0;right: 0;height: 4px;background: #2a2a2a;transform: translateY(-50%);border-radius: 2px;}
.pl-price-range {position: absolute;top: 50%;height: 4px;background: var(--color-green);transform: translateY(-50%);border-radius: 2px;}
.pl-price-slider input[type="range"] {position: absolute;top: 50%;left: 0;width: 100%;transform: translateY(-50%);-webkit-appearance: none;appearance: none;background: none;margin: 0;pointer-events: none;height: 20px;}
.pl-price-slider input[type="range"]::-webkit-slider-runnable-track {background: none;}
.pl-price-slider input[type="range"]::-webkit-slider-thumb {pointer-events: auto;-webkit-appearance: none;appearance: none;width: 18px;height: 18px;border-radius: 50%;background: var(--color-green);border: 3px solid #0a0a0a;box-shadow: 0 0 0 1px var(--color-green);cursor: pointer;margin-top: 0;}
.pl-price-slider input[type="range"]::-moz-range-track {background: none;border: none;}
.pl-price-slider input[type="range"]::-moz-range-thumb {pointer-events: auto;width: 18px;height: 18px;border-radius: 50%;background: var(--color-green);border: 3px solid #0a0a0a;box-shadow: 0 0 0 1px var(--color-green);cursor: pointer;}

/* 색감 스와치 */
.pl-colors {flex: 1 1 360px;min-width: 260px;}
.pl-color-list {display: flex;gap: 10px;flex-wrap: wrap;}
.pl-color-btn {padding: 9px 16px;border: 1px solid #333;background: transparent;color: #9a9a9a;font-size: 13px;font-weight: 700;cursor: pointer;transition: border-color .2s ease, color .2s ease, background .2s ease;}
.pl-color-btn:hover {border-color: #555;color: #fff;}
.pl-color-btn.is-active {background: var(--color-green);border-color: var(--color-green);color: #0a0a0a;}
.pl-color-swatch {display: flex;align-items: center;gap: 7px;padding: 7px 14px 7px 8px;border: 1px solid #333;background: transparent;cursor: pointer;transition: border-color .2s ease, background .2s ease;}
.pl-color-swatch:hover {border-color: #555;}
.pl-color-swatch-dot {width: 18px;height: 18px;border-radius: 50%;background: var(--sw-color, #888);border: 1px solid rgba(255,255,255,.2);display: inline-block;flex-shrink: 0;}
.pl-color-swatch-label {font-size: 13px;color: #9a9a9a;font-weight: 600;transition: color .2s ease;}
.pl-color-swatch.is-active {border-color: var(--color-green);background: rgba(166,255,0,.08);}
.pl-color-swatch.is-active .pl-color-swatch-label {color: #fff;}

/* 초기화 버튼 */
.pl-reset-btn {align-self: flex-start;padding: 9px 18px;border: 1px solid #333;background: transparent;color: #9a9a9a;font-size: 13px;font-weight: 700;cursor: pointer;transition: border-color .2s ease, color .2s ease;margin-left: auto;}
.pl-reset-btn:hover {border-color: var(--color-green);color: var(--color-green);}

/* ---- 결과 카운트 ---- */
.pl-result-bar {font-size: 14px;color: #9a9a9a;margin-bottom: 24px;}
.pl-result-bar strong {color: #fff;font-weight: 800;}

/* ---- 그리드 (as-products-grid/card 스타일 재사용) ---- */
.pl-grid {margin-bottom: 0;}
.pl-card-color-dot {display: inline-block;width: 9px;height: 9px;border-radius: 50%;border: 1px solid rgba(255,255,255,.25);vertical-align: middle;margin-left: 6px;}

/* ---- 빈 결과 ---- */
.pl-empty {text-align: center;padding: 100px 20px;color: #666;font-size: 15px;line-height: 1.8;}

/* ===== 반응형 ===== */
@media (max-width: 1024px) {
  .pl-section {padding: var(--area-sapce);}
  .pl-filters {padding: 22px 20px 26px;}
  .pl-filter-bottom {gap: 28px;}
  .pl-reset-btn {margin-left: 0;}
}

@media (max-width: 640px) {
  .pl-title {font-size: var(--title-size);}
  .pl-filter-row {gap: 8px;}
  .pl-tab-btn {padding: 8px 14px;font-size: 13px;}
  .pl-filter-bottom {flex-direction: column;}
  .pl-price, 
  .pl-colors {width: 100%;flex:initial}
  .pl-colors {margin-top: 26px;}

  .pl-reset-btn{width: 100%;}
}