/* ============================================================
   kt초이스 — 핸드폰 상품 리스트 (products_list.html 목업 그대로)
   common.css 토큰 사용. home.css 뒤에 로드(공유 .best/.float-consult 등은 home.css).
   ============================================================ */

/* 브레드크럼 */
.crumb { display:flex; align-items:center; justify-content:flex-end; gap:6px; font-size:var(--fs-label2); color:var(--gray-400); margin-bottom:14px; }
.crumb a { color:var(--gray-400); transition:color .15s; }
.crumb a:hover { color:var(--blue-600); }
.crumb .sep { color:var(--gray-300); }
.crumb .cur { color:var(--gray-800); font-weight:var(--fw-semibold); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:280px; }

/* BEST 스크롤러 (목업값으로 고정 — home.css 와 무관하게 이 화면은 목업대로) */
@keyframes bestSwap { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.plist .best-scroller { position:relative; }
.plist .best-grid { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 48px) / 5); gap:12px; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity; padding-bottom:2px; }
.plist .best-grid::-webkit-scrollbar { display:none; }
.plist .best { scroll-snap-align:start; display:flex; flex-direction:column; text-decoration:none; color:inherit; cursor:pointer; }
.plist .best-arrow { position:absolute; top:32%; right:-14px; transform:translateY(-50%); z-index:3; width:44px; height:44px; border-radius:50%; background:var(--white); color:var(--gray-700); font-size:24px; font-weight:var(--fw-regular); display:flex; align-items:center; justify-content:center; box-shadow:0 3px 14px rgba(0,0,0,.18); transition:background .15s; }
.plist .best-arrow:hover { background:var(--gray-50); }
.plist .best-arrow-prev { right:auto; left:-14px; display:none; }
.plist .best-scroller.scrolled .best-arrow-prev { display:flex; }
.plist .best-scroller.at-end .best-arrow:not(.best-arrow-prev) { display:none; }
.plist .best .img { aspect-ratio:1/1; border-radius:var(--r-12); background:var(--gray-100); position:relative; display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:900; color:var(--gray-300); margin-bottom:10px; overflow:hidden; }
.plist .best .rank { position:absolute; top:8px; left:8px; height:22px; padding:0 9px; background:rgba(17,24,39,.92); color:var(--white); font-weight:800; font-size:11px; letter-spacing:.2px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--r-6); }
.plist .best h4 { font-size:16px; font-weight:var(--fw-semibold); color:var(--gray-900); line-height:1.4; margin-bottom:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.plist .best .price { display:flex; flex-direction:column; gap:2px; line-height:1.2; }
.plist .best .p-line { display:flex; align-items:baseline; gap:6px; white-space:nowrap; }
.plist .best .p-orig { font-size:13px; color:var(--gray-400); text-decoration:line-through; }
.plist .best .p-pct { font-size:17px; font-weight:var(--fw-bold); color:var(--blue-600); }
.plist .best .p-deal { font-size:17px; font-weight:var(--fw-bold); color:var(--gray-900); }

/* 리스트 본문 */
.plist { padding:22px 0 64px; }
.plist-title { text-align:center; font-size:var(--fs-title2); font-weight:800; letter-spacing:-.5px; color:var(--gray-900); margin:4px 0 24px; }
.plist-cats { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:40px; }
.plist-cat { font-size:14px; font-weight:var(--fw-medium); color:var(--gray-500); background:var(--gray-50); border:none; padding:9px 18px; border-radius:var(--r-full); cursor:pointer; transition:background .15s, color .15s; }
.plist-cat:hover { background:var(--gray-100); }
.plist-cat.on { background:var(--gray-900); color:var(--white); }
.plist-bar { display:flex; align-items:center; justify-content:space-between; margin:44px 0 20px; padding-top:24px; border-top:1px solid var(--gray-100); }
.plist-count { font-size:14px; color:var(--gray-500); }
.plist-count b { color:var(--gray-900); font-weight:var(--fw-bold); }
.plist-sort-wrap { position:relative; }
.plist-sort { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:var(--fw-semibold); color:var(--gray-700); cursor:pointer; background:none; border:none; }
.plist-sort svg { width:14px; height:14px; transition:transform .15s; }
.plist-sort[aria-expanded="true"] svg { transform:rotate(180deg); }
.plist-sort-menu { position:absolute; top:calc(100% + 10px); right:0; min-width:150px; background:var(--white); border:1px solid var(--gray-100); border-radius:14px; box-shadow:0 14px 36px rgba(15,23,42,.16); padding:6px; z-index:60; transform-origin:top right; animation:acctDown .22s cubic-bezier(.4,0,.2,1); }
.plist-sort-menu[hidden] { display:none; }
.plist-sort-menu button { display:block; width:100%; text-align:left; padding:10px 12px; font-size:14px; font-weight:var(--fw-medium); color:var(--gray-600); background:none; border:none; border-radius:9px; cursor:pointer; }
.plist-sort-menu button:hover { background:var(--gray-50); }
.plist-sort-menu button.on { color:var(--blue-600); font-weight:var(--fw-semibold); background:var(--gray-50); }
.plist-empty { display:none; padding:70px 0; text-align:center; font-size:15px; color:var(--gray-400); }
.plist-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:30px 16px; }

/* 상품 카드 */
.pcard { display:flex; flex-direction:column; }
.pcard-img { position:relative; aspect-ratio:1/1; border-radius:var(--r-12); background:var(--gray-100); margin-bottom:14px; overflow:hidden; }
.pcard-like { position:absolute; right:10px; bottom:10px; width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,.92); color:var(--gray-400); transition:color .15s; }
.pcard-like svg { width:14px; height:14px; }
.pcard:hover .pcard-like { color:var(--blue-600); }
.pcard-like.on { color:#DC2626; }
.pcard-like.on svg { fill:#DC2626; }
.pcard-name { font-size:16px; font-weight:var(--fw-semibold); color:var(--gray-900); line-height:1.4; margin-bottom:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pcard-meta { margin:0 0 12px; }
.pcard-cap { font-size:12px; font-weight:var(--fw-medium); color:var(--gray-500); }
.pcard-cap .bar { color:var(--gray-300); margin:0 5px; }
.pcard-price { display:flex; flex-direction:column; gap:2px; line-height:1.2; }
.pcard-price .p-orig { font-size:13px; color:var(--gray-400); text-decoration:line-through; }
.pcard-price .p-line { display:flex; align-items:baseline; gap:6px; }
.pcard-price .p-pct { font-size:17px; font-weight:var(--fw-bold); color:var(--blue-600); }
.pcard-price .p-deal { font-size:17px; font-weight:var(--fw-bold); color:var(--gray-900); }

@media (max-width:768px){
  .plist .best-grid { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:calc((100% - 25.2px) / 2.1); gap:12px; margin:0 -16px; padding:0 16px 2px; scroll-padding-left:16px; }
  .plist .best .p-orig { font-size:13px; }
  .plist .best .p-pct, .plist .best .p-deal { font-size:16px; }
  .plist .best-arrow { display:none; }
  .plist-grid { grid-template-columns:repeat(2,1fr); gap:26px 12px; }
  .pcard-name { font-size:15px; }
  .pcard-price .p-pct, .pcard-price .p-deal { font-size:16px; }
  .pcard-cap { font-size:11px; }
  .crumb { display:none; }
  .plist-cats { justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; margin:0 -16px 32px; padding:0 16px; }
  .plist-cats::-webkit-scrollbar { display:none; }
  .plist-cat { flex:0 0 auto; }
}