/* ==========================================================================
   bf.quick — 퀵 카테고리

   전역 main.css '4. 퀵 카테고리' 에서 옮겨 왔다. 위젯 폴더 하나로 굴러가야
   갈아 끼울 수 있다.

   ※ .sec-quick 은 여기 없다 — 이 위젯을 담는 자리(rb.layout/basic)의 것이다.
   ========================================================================== */

.quick-list {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.quick-list a {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 12px 6px;
  border-radius: var(--r-md);
  transition: background .2s, transform .2s;
}
.quick-list a:hover { background: var(--sky-50); transform: translateY(-3px); }
/* 실물 제품컷(흰 배경)을 담는 타일 */
.q-ico {
  display: block;
  width: 78px; height: 78px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--plate);
  border: 1px solid var(--line);
  box-shadow: var(--sh-xs);
  transition: border-color .2s, box-shadow .2s;
}
.q-ico img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* 다크 — 흰 배경 제품컷을 밝은 판(--plate) 위에 곱셈 합성해 경계를 지운다.
   isolation 은 합성을 타일 안으로 가둔다(목업 theme.css 2절) */
:root[data-theme="dark"] .q-ico { isolation: isolate; }
:root[data-theme="dark"] .q-ico img { mix-blend-mode: var(--plate-blend); }
.quick-list a:hover .q-ico { border-color: var(--sky-b2); box-shadow: var(--sh-sm); }
.quick-list b { font-size: 14.5px; font-weight: 600; color: var(--ink-800); }
.quick-list em { font-size: 12px; color: var(--ink-400); }


/* ---------------------------------------------------------- 반응형 */

@media (max-width: 900px) {
  .quick-list {
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 6px; padding: 14px;
 border-radius: var(--r-md);
 }
  .q-ico { width: 56px; height: 56px; border-radius: 16px; }
  .quick-list b { font-size: 13px; }
  .quick-list em { font-size: 11px; }
}

@media (max-width: 600px) {
  .quick-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .quick-list b { font-size: 12px; }
}