/* ─────────────────────────────────────────────────────────────
   평강프라자 — 메인 카테고리 바로가기 카드 (삼성 가이드 ⑥: 제품 이미지 + 이름, 히어로 바로 아래) — pk-qc
   마크업 extend/pk.catquick.php · 시안 docs/design/catquick-cards-draft.html (2026-09-21 A안 확정)

   콘크리트 판 카드를 가로로 나열하고 제목은 판 위쪽. 진열 카테고리 3개 + "전체 상품" = 4칸이라
   캐러셀 화살표는 두지 않았다(카테고리가 늘면 그때 붙인다). 카드 이미지는 img/pk-cat/{ca_id}.png
   전용 사본 — 상품 사진을 키우면 스마트스토어 배지가 드러나서다 (extend/pk.data.php pk_catcard_art).

   이전(2026-09-16 pk-ql): 56px 썸네일 가로 스트립. 제품이 너무 작다는 지적으로 교체.
   ───────────────────────────────────────────────────────────── */
.pk-qc{background:#fff;font-family:var(--pk-kr);line-height:1.33;border-bottom:1px solid var(--pk-line);padding:36px 0 40px}
.pk-qc *{box-sizing:border-box}
.pk-qc-in{max-width:1280px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pk-qc a{text-decoration:none !important;color:var(--pk-ink);display:block}
.pk-qc a:focus-visible{outline:2px solid var(--pk-blue);outline-offset:3px;border-radius:var(--pk-r)}

.pk-qc .card{background:var(--pk-concrete);border-radius:var(--pk-r);padding:26px 20px 24px;height:400px;
             display:flex;flex-direction:column;align-items:center;transition:background .2s, transform .2s}
.pk-qc a:hover .card{background:#e8e5e0;transform:translateY(-2px)}
.pk-qc .nm{font-size:18px;font-weight:700;letter-spacing:-.3px;text-align:center;word-break:keep-all}

/* 제품 이미지 — 누끼는 배경 투명이라 판 위에 그대로 얹힌다 */
.pk-qc .ph{flex:1;width:100%;min-height:0;margin-top:14px;display:flex;align-items:center;justify-content:center}
.pk-qc .ph img{max-width:100% !important;max-height:100% !important;width:auto !important;height:auto !important;
               object-fit:contain;display:block;margin:0}
/* .slim = 세로로 길쭉한 제품(스탠드 에어컨) — 칸 높이에 먼저 걸려 폭이 못 커지므로 위아래 여백을 덜어 더 크게 */
.pk-qc .ph.slim{margin-top:2px;margin-bottom:-18px}
.pk-qc.m .ph.slim{margin-top:2px;margin-bottom:-10px}
/* .photo = 누끼가 없어 연출컷을 쓴 카테고리(김치냉장고) — 사각 사진이라 모서리만 맞춘다 */
.pk-qc .ph.photo img{border-radius:var(--pk-r)}

/* 프로모션 타일(data/banner/pk-promo-*.png)은 판 전체를 채운다 — 카테고리는 배경 없는 누끼라 가운데
   작게 놓이지만, 프로모션은 배경까지 그려진 그래픽이라 흰 판 안에 작은 사각으로 떠 보인다 (2026-09-22) */
.sbn01.pk-cql .bnimg img.imgbx[src*="pk-promo"]{width:123px !important;height:123px !important;
                                                margin:0 auto !important;border-radius:12px;object-fit:cover;display:block}
.sbn01.pk-cql .bnimg:hover img.imgbx[src*="pk-promo"]{transform:none}

/* 마지막 칸 — 전체 상품 */
.pk-qc .card.all{justify-content:center;gap:16px;background:var(--pk-blue-tint)}
.pk-qc a:hover .card.all{background:#dfe4f6;transform:translateY(-2px)}
.pk-qc .card.all .ico{width:56px;height:56px;border-radius:50%;background:var(--pk-blue);display:grid;place-items:center;flex:none}
.pk-qc .card.all svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
                     transition:transform .2s}
.pk-qc a:hover .card.all svg{transform:translateX(3px)}
.pk-qc .card.all .nm{color:var(--pk-blue)}
.pk-qc .card.all .sub{font-size:14px;color:var(--pk-graphite);text-align:center}

@media (prefers-reduced-motion:reduce){.pk-qc .card,.pk-qc .card.all svg{transition:none}}

/* ── 태블릿: 2열 ── */
@media (max-width:1023px){
  .pk-qc-in{grid-template-columns:repeat(2,1fr)}
  .pk-qc .card{height:350px}
}

/* ── 모바일: 가로 스크롤 (한 화면에 2.3칸 — 옆으로 더 있다는 신호) ── */
.pk-qc.m{padding:20px 0 22px}
.pk-qc.m .pk-qc-in{display:flex;grid-template-columns:none;gap:10px;padding:0 16px;
                   overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pk-qc.m .pk-qc-in::-webkit-scrollbar{display:none}
.pk-qc.m a{flex:none;width:150px}
.pk-qc.m .card{height:236px;padding:18px 14px 14px}
.pk-qc.m .nm{font-size:14px}
.pk-qc.m a:hover .card{transform:none}
.pk-qc.m .card.all{gap:10px}
.pk-qc.m .card.all .ico{width:44px;height:44px}
.pk-qc.m .card.all svg{width:20px;height:20px}
.pk-qc.m .card.all .sub{font-size:12px}

/* ═══════════════════════════════════════════════════════════════
   배너 2번 기반 카테고리 타일 (2026-09-22) — .sbn01.pk-cql
   업체가 관리자 > 디자인관리 > 배너관리(2번, 156×156)에서 이미지·문구·링크를 직접 바꾼다.
   마크업은 솔루션 display_banner_slide()/mobile_banner_slide() 가 내는 .bnimg > img.imgbx + p.bntxt.
   케이디엘 css/sop-main.css 의 .sop-cql-grid 규칙(원형 타일 + multiply)을 여기서 덮는다 — 그쪽이
   !important 를 쓰므로 같은 속성은 이쪽도 !important 가 필요하다.
   시안: docs/design/catquick-tiles-draft.html A안 (타일 123px, 흰 바탕 + 얇은 선 + 라운드 12px, 가운데 정렬)
   위쪽 .pk-qc 블록은 배너가 하나도 없을 때의 폴백(카테고리 자동 생성)용으로 남겨둔다.
   ═══════════════════════════════════════════════════════════════ */
.sbn01.pk-cql{font-family:var(--pk-kr);line-height:1.33}
.pk-cql .sop-cql-head{max-width:1280px;margin:0 auto 18px;padding:0 24px;display:flex;align-items:baseline;gap:10px;justify-content:flex-start}
.pk-cql .sop-cql-head h3{font-size:22px !important;font-weight:700 !important;color:var(--pk-ink);letter-spacing:-.4px;margin:0}
.pk-cql .sop-cql-head .cnt{font-size:14px;color:var(--pk-mute)}
.pk-cql .sop-cql-grid{max-width:1280px;margin:0 auto;padding:0 24px;display:flex;flex-wrap:wrap;justify-content:center;gap:28px 15px}

.sbn01.pk-cql .bnimg{width:123px;text-align:center;position:relative;padding:0 !important;margin:0 !important;
                     background:none !important;box-shadow:none !important;border-radius:0 !important;
                     overflow:visible !important;cursor:pointer}
/* float 해제는 PC 의 flex 그리드에서만 — 모바일 slick 은 슬라이드를 float:left 로 늘어놓으므로
   여기서 float:none 을 주면 네 칸이 한 자리에 겹친다 (2026-09-22 실측) */
.pk-cql .sop-cql-grid .bnimg{float:none !important}
/* 링크를 타일 판 위로 올린다 — 아래 :before 가 흰 판을 absolute 로 그려서, 이게 없으면
   제품 사진과 글자 위만 눌리고 타일 안쪽 여백은 링크에 닿지 않는다 (2026-09-22 백미란님 제보) */
.sbn01.pk-cql .bnimg a{display:block;text-decoration:none !important;color:var(--pk-ink) !important;
                       position:relative;z-index:1;touch-action:manipulation}
.sbn01.pk-cql .bnimg{touch-action:manipulation}   /* 탭 지연·더블탭 확대 판정 제거 */
/* 흰 타일 판 — 케이디엘의 원형 그라데이션(:before)·링(:after) 을 대체 */
.sbn01.pk-cql .bnimg:before{content:'';position:absolute;top:0;left:0;transform:none;
                            width:123px;height:123px;border-radius:12px;background:#fff;
                            border:1px solid #e5e6e8;transition:border-color .2s;pointer-events:none}
.sbn01.pk-cql .bnimg:after{content:none !important}
.sbn01.pk-cql .bnimg:hover:before{background:#fff;border-color:var(--pk-ink)}
.sbn01.pk-cql .bnimg img.imgbx{position:relative;width:91px !important;height:91px !important;object-fit:contain;
                               border-radius:0 !important;background:none !important;padding:0 !important;
                               margin:16px 0 !important;mix-blend-mode:normal;transition:transform .2s;display:inline-block}
.sbn01.pk-cql .bnimg:hover img.imgbx{transform:scale(1.05)}
.sbn01.pk-cql .bntxt{font-size:14px !important;font-weight:700 !important;color:var(--pk-ink) !important;
                     margin:10px 0 0 !important;letter-spacing:-.3px;word-break:keep-all;line-height:1.33}
.sbn01.pk-cql .bnimg:hover .bntxt{color:var(--pk-ink) !important}
@media (prefers-reduced-motion:reduce){.sbn01.pk-cql .bnimg:before,.sbn01.pk-cql .bnimg img.imgbx{transition:none}}

/* ── 모바일: slick 3칸. 타일은 슬라이드 폭에 맞춰 늘어난다 ── */
.pk-cql-hd{padding:0 16px;margin:4px 0 12px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pk-cql-hd h3{font-size:18px;font-weight:700;margin:0;letter-spacing:-.3px;color:var(--pk-ink)}
.pk-cql-hd span{font-size:12px;color:var(--pk-mute)}
@media (max-width:767px){
  /* slick 대신 가로 스크롤 — 한 화면에 3.2칸이 보여 옆으로 더 있다는 게 드러난다 */
  .sbn01.pk-cql{display:flex;gap:10px;padding:0 16px;overflow-x:auto;
                scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .sbn01.pk-cql::-webkit-scrollbar{display:none}
  .sbn01.pk-cql .bnimg{flex:none;width:104px}
  .sbn01.pk-cql .bnimg:before{width:104px;height:104px;border-radius:10px}
  .sbn01.pk-cql .bnimg img.imgbx{width:76px !important;height:76px !important;margin:14px 0 !important}
  .sbn01.pk-cql .bnimg img.imgbx[src*="pk-promo"]{width:104px !important;height:104px !important;margin:0 !important;border-radius:10px}
  .sbn01.pk-cql .bntxt{font-size:12px !important;margin-top:8px !important}
}