/* ==========================================================================
   catalog.css · /c/<slug> 분류 페이지 전용 (임무 C 소유)
   토큰명은 stage.css(--cs-*)를 따르고 값도 stage.css 정본 토큰을 참조한다(🔴 2026-09-29 세로띠 투톤 전환).
   범위는 main.catalog-page 안으로 한정한다. 헤더·푸터(stage.css)와 계산기(calc.css)는 건드리지 않는다.
   규칙: 순수 검정·흰색 0 · 그라데이션·글로우·유리 카드 0 · 카드 반경 <=16px ·
         대비 >=4.5:1(잉크 #101f1b / 판 #eef0ec 14.84 · 잉크 소프트 #46574f 6.69 · 액센트 #9a3b1f 6.06) ·
         터치 44px · word-break:keep-all · reduced-motion 폴백
   목록은 표가 아니라 구분선 행(itemlist · othlist)이다. 상품 카드는 이관 전이라 이 파일에 없다.
   목차: 1 토큰  2 빵부스러기  3 히어로·건수  4 상태 블록  5 품목 목록  6 미상 목록
         7 다른 분류  8 브레이크포인트  9 reduced-motion
   ========================================================================== */

/* 1. 토큰 ------------------------------------------------------------------ */
/* 🔴 2026-09-29 세로띠 투톤 전환 — 값을 hex 에서 토큰 참조로 바꾼다.
   종전에는 이 자리에 hex 가 박혀 있었다. 그래서 팔레트가 바뀔 때마다 이 블록을 손으로 다시 계산했고,
   폐기된 팔레트의 대비 수치가 주석에 남았다. 이제 아래 --cs-* 는 전부 stage.css 정본 토큰을 가리킨다 —
   팔레트가 바뀌면 stage.css 한 곳만 고치면 이 파일이 따라온다.
   토큰 이름(--cs-*)은 그대로 둔다. 이 파일 안 300여 줄이 이 이름들을 참조한다.
   대비 실산(WCAG 상대휘도 · 밝은 바탕 세 종류 전부 · 본문 글자는 4.5 이상):
                        지면 #fafbf9 / 판 #eef0ec / 액센트면 #e8ece9   (#e2e6e1 은 이 파일에서 선으로만 쓴다)
     ink      #101f1b =  16.40 / 14.84 / 13.49   (제목 · 금액)
     ink-soft #46574f =   7.39 /  6.69 /  6.08   (본문 보조 글자)
     ink-mute #5a655e =   5.85 /  5.30 /  4.81   (꼬리표 — 금액보다 약하게 앉히는 줄)
     accent-deep #9a3b1f = 6.70 / 6.06 / 5.51 · 액센트면 #e8ece9 위 5.83
     x-warn   #c81212 =   5.70 · 경고면 #fdf0ea 위 5.30
   🔴 accent 와 accent-deep 은 임무가 다르다. 같은 hex 를 돌려쓰지 않는다.
      accent(--p-600 #17302a)는 선·초점테·활성 윤곽만 맡는다(1.4.11 = 3:1 · 실산 11.80 이상).
      accent-deep(--a-600 #9a3b1f)는 글자 액센트다. 구조색과 강조색을 같은 딥그린으로 두면
      본문 ink(#101f1b)와 구분이 서지 않아 「강조한 자리」가 도리어 사라진다 — 그래서 강조만 테라코타로 가른다.
   🔴 금액은 ink 로 둔다(가장 진하게). 꼬리표만 ink-mute 로 내린다.
   🔴 x-warn 은 stage.css --sys-red(#c81212)다. 사양서 #e61414 의 명도 조정본이라
      경고면 위에서도 5.30 이 나온다. 검사를 낮추는 대신 색을 고친다(불변 규칙 7). */
main.catalog-page,
main.electronics-page{
  --cs-paper:var(--g-white);   --cs-paper-deep:var(--g-050);
  --cs-ink:var(--fg-primary);  --cs-ink-soft:var(--fg-secondary);  --cs-ink-mute:var(--fg-tertiary);
  --cs-accent:var(--p-600);    --cs-accent-deep:var(--a-600);      --cs-accent-tint:var(--p-050);
  --cs-hair:var(--g-200);      --cs-hair-soft:var(--g-100);
  --cs-x-warn:var(--sys-red);  --cs-x-warn-tint:var(--a-050);
  /* 부품 테두리 전용선(WCAG 1.4.11 = 3:1). stage.css --border-strong(#6c766e)을 가리킨다.
     🔴 2026-09-29 세로띠 투톤 전환 · 실산: 지면 #fafbf9 4.54 · 판 #eef0ec 4.11 · 액센트면 #e8ece9 3.95 — 전부 3:1 위다.
     hair(--g-200 #cbd1c9)는 1.50:1 이라 칩·버튼의 윤곽선으로 쓰면 부품 경계가 보이지 않는다(render-contrast 실측).
     🔴 이 값은 선 전용이다. 글자로 쓰면 판 위 4.11 로 4.5 에 못 미친다 — 글자는 ink-soft 이하로 내려 쓴다. */
  --cs-ctl-line:var(--border-strong);

  /* 🔴 2026-09-09 임무 F: 여기서 Pretendard 를 뺀 스택을 다시 선언하고 있었다. 그 탓에 /electronics h1 의
     실사용 폰트가 Apple SD Gothic Neo + .SF NS 로 찍혔다(헤드리스 실측). 서체 정본은 stage.css --font-primary 하나다. */
  --cs-font:var(--font-primary);
  --cs-radius-card:16px;     --cs-radius-panel:14px;   --cs-radius-btn:12px;
  --cs-hit:44px;
  --cs-text-xs:12px;         --cs-text-sm:14px;        --cs-text-md:16px;
  --cs-text-lg:20px;         --cs-text-xl:25px;
  --cs-count:38px;
  --cs-ease-out:cubic-bezier(.23,1,.32,1);
  --cs-t-fast:.18s;

  background:var(--cs-paper);
  color:var(--cs-ink);
  font-family:var(--cs-font);
  word-break:keep-all; overflow-wrap:break-word;
}
/* RV5(임무 F1): 이 되돌림 규칙이 「상담 신청하기」를 1.34:1 로 죽였다. 버튼 제외 — 불변식 A */
.catalog-page a:where(:not(.btn):not(.rg-btn):not(.rg-fullbtn)){color:inherit}
.electronics-page a:where(:not(.btn):not(.rg-btn):not(.rg-fullbtn)){color:inherit}
.catalog-page .num,
.electronics-page .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
/* 참고 사이트 컨테이너 1064(§2-1). 종전 860 은 카드 4열이 들어가지 않는다 */
.catalog-inner{max-width:1064px}

/* 2. 빵부스러기 ------------------------------------------------------------ */
.cat-crumb{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:var(--cs-text-sm);color:var(--cs-ink-soft);
}
.cat-crumb a{
  display:inline-flex;align-items:center;min-height:var(--cs-hit);
  text-decoration:none;border-bottom:1px solid transparent;
}
@media (hover:hover){ .cat-crumb a:hover{color:var(--cs-accent-deep);border-bottom-color:var(--cs-accent)} }
.cat-crumb a:active{color:var(--cs-accent-deep)}
.cat-crumb a:focus-visible{outline:2px solid var(--cs-accent);outline-offset:3px;border-radius:4px}
/* 🔴 2026-09-29 세로띠 투톤 전환: 종전엔 hair 를 글자로 썼다(1.50:1 · 보이지 않는다). 꼬리표 색으로 올린다 — 지면 5.85 */
.cat-crumb__sep{color:var(--cs-ink-mute)}
.cat-crumb__here{display:inline-flex;align-items:center;min-height:var(--cs-hit);font-weight:700;color:var(--cs-ink)}

/* 3. 히어로·건수 ----------------------------------------------------------- */
.cat-hero{text-align:left;margin-left:0;margin-right:0}
.cat-eyebrow{
  font-size:var(--cs-text-xs);font-weight:700;letter-spacing:.12em;
  color:var(--cs-accent-deep);text-transform:none;margin:0 0 10px;
}
.catalog-page .hero-doc__title{margin-bottom:12px;text-wrap:balance}
.cat-count{
  display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;
  margin:0 0 16px;
}
.cat-count__num{
  font:700 var(--cs-count)/1.1 var(--cs-font);letter-spacing:-0.01em;color:var(--cs-ink);
  font-variant-numeric:tabular-nums;
}
.cat-count__unit{font-size:var(--cs-text-lg);font-weight:700;color:var(--cs-ink)}
.cat-count__floor{
  margin-left:4px;padding:3px 8px;border-radius:9999px;
  background:var(--cs-accent-tint);color:var(--cs-accent-deep);
  font-size:var(--cs-text-xs);font-weight:700;
}
.catalog-page .hero-doc__lead{margin-left:0;text-align:left;max-width:64ch}
.cat-nobr{white-space:nowrap}
.cat-note{
  margin:14px 0 0;padding:12px 14px;border-left:3px solid var(--cs-accent);
  background:var(--cs-paper-deep);border-radius:0 var(--cs-radius-btn) var(--cs-radius-btn) 0;
  font-size:var(--cs-text-sm);line-height:1.65;color:var(--cs-ink-soft);max-width:64ch;
}

/* 4. 상태 블록 ------------------------------------------------------------- */
.cat-state{
  border:1px solid var(--cs-hair);border-radius:var(--cs-radius-card);
  background:var(--cs-paper-deep);padding:20px;
}
.catalog-page .cat-state__title{
  font-size:var(--cs-text-lg);font-weight:700;margin:0 0 12px;color:var(--cs-ink);
}
.cat-state p{font-size:var(--cs-text-sm);line-height:1.7;color:var(--cs-ink-soft);max-width:60ch}
.cat-state__ctas{display:flex;flex-direction:column;gap:10px;margin:18px 0 0}
.cat-state__ctas .btn{width:100%;min-height:var(--cs-hit)}

/* 5. 품목 목록 (구분선 행) --------------------------------------------------- */
.catalog-page .cat-items__title{margin-bottom:8px}
.cat-items__lead{font-size:var(--cs-text-sm);line-height:1.7;color:var(--cs-ink-soft);max-width:60ch}
.itemlist{list-style:none;padding:0;margin:16px 0 0;border-top:1px solid var(--cs-hair)}
.catalog-page .itemlist li + li{margin-top:0}
.itemlist__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  min-height:var(--cs-hit);padding:11px 2px;
  border-bottom:1px solid var(--cs-hair-soft);
}
.itemlist__name{font-size:var(--cs-text-md);font-weight:700;color:var(--cs-ink)}
.itemlist__count{white-space:nowrap;font-size:var(--cs-text-md);color:var(--cs-ink-soft)}
.itemlist__count .num{font-weight:700;color:var(--cs-ink)}
.itemlist__unit{margin-left:2px;font-size:var(--cs-text-sm)}

/* 6. 건수 미상 목록 --------------------------------------------------------- */
.cat-err{
  margin-top:24px;padding:16px;border-radius:var(--cs-radius-panel);
  background:var(--cs-x-warn-tint);border:1px solid var(--cs-hair);
}
.catalog-page .cat-err__title{
  font-size:var(--cs-text-md);font-weight:700;margin:0 0 8px;color:var(--cs-x-warn);
}
.cat-err p{font-size:var(--cs-text-sm);line-height:1.7;color:var(--cs-ink-soft);max-width:60ch}
.cat-err__list{
  list-style:none;padding:0;margin:12px 0 0;
  display:flex;flex-wrap:wrap;gap:8px;
}
.catalog-page .cat-err__list li + li{margin-top:0}
.cat-err__list li{
  padding:6px 10px;border-radius:9999px;background:var(--cs-paper);
  border:1px solid var(--cs-hair);font-size:var(--cs-text-sm);color:var(--cs-ink);
}

/* 7. 다른 분류 -------------------------------------------------------------- */
.cat-others__lead{font-size:var(--cs-text-sm);line-height:1.7;color:var(--cs-ink-soft);max-width:60ch}
.othlist{list-style:none;padding:0;margin:16px 0 0;border-top:1px solid var(--cs-hair)}
.catalog-page .othlist li + li{margin-top:0}
.othlist__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  border-bottom:1px solid var(--cs-hair-soft);
}
.othlist__name{
  display:flex;align-items:center;min-height:var(--cs-hit);padding:4px 2px;
  font-size:var(--cs-text-md);font-weight:700;color:var(--cs-ink);
  text-decoration:none;border-bottom:2px solid transparent;
  transition:color var(--cs-t-fast) var(--cs-ease-out);
}
@media (hover:hover){ a.othlist__name:hover{color:var(--cs-accent-deep);border-bottom-color:var(--cs-accent)} }
a.othlist__name:active{color:var(--cs-accent-deep)}
a.othlist__name:focus-visible{outline:2px solid var(--cs-accent);outline-offset:3px;border-radius:4px}
.othlist__row.is-current{background:var(--cs-paper-deep)}
.othlist__row.is-current .othlist__name{color:var(--cs-accent-deep)}
.othlist__count{white-space:nowrap;font-size:var(--cs-text-sm);color:var(--cs-ink-soft);padding-right:2px}
.othlist__count .num{font-weight:700;color:var(--cs-ink)}
.cat-others__note{
  margin-top:16px;font-size:var(--cs-text-sm);line-height:1.7;color:var(--cs-ink-soft);max-width:60ch;
}

/* 8. 브레이크포인트 (390 기본 → 768 / 876 / 1200) ------------------------------ */
@media (min-width:768px){
  main.catalog-page{--cs-count:44px}
  .cat-state{padding:24px}
  .cat-state__ctas{flex-direction:row;flex-wrap:wrap}
  .cat-state__ctas .btn{width:auto}
  .itemlist__row,.othlist__row{padding-left:4px;padding-right:4px}
}
@media (min-width:876px){
  .catalog-inner{max-width:1064px}
  .itemlist{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:40px;border-top:1px solid var(--cs-hair);
  }
  .othlist{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:40px;
  }
}
@media (min-width:1200px){
  main.catalog-page{--cs-count:52px}
  .catalog-inner{max-width:1064px}
}

/* 9. reduced-motion --------------------------------------------------------- */
/* 이 파일의 모션은 othlist 링크 색 전환 하나뿐이라 그 한 줄만 끈다(전역 별표 규칙 0). */
@media (prefers-reduced-motion:reduce){
  .catalog-page a.othlist__name{transition:none}
}

/* ==========================================================================
   10~12 · 상품 화면층 (임무 G4 · 2026-09-08)
   범위는 main.catalog-page 안(10·11)과 홈 타일(12)로 한정한다.
   색은 위 1절 토큰만 쓴다. 순수 검정·흰색 0 · 그라데이션·글로우 0 · 카드 반경 <=16px.
   🔴 2026-09-29 세로띠 투톤 전환 · 대비 근거(WCAG 상대휘도 실산 · 종전 아이보리·브라운 수치는 폐기했다):
     ink #101f1b / 판 #eef0ec = 14.84 · ink-soft #46574f / 판 = 6.69 · accent-deep #9a3b1f / 판 = 6.06 ·
     ink / 지면 #fafbf9 = 16.40 · ink-soft / 지면 = 7.39 · ink-mute #5a655e / 지면 = 5.85 ·
     컨트롤 테두리 ink-soft / 지면 = 7.39 (1.4.11 의 3.0 이상)
   🔴 링크색 규칙은 손대지 않는다. 이 절에는 `a{color:…}` 선택자가 없다(불변 규칙 5).
   ========================================================================== */

/* 10. 상품 목록 ------------------------------------------------------------ */
.plist{margin-top:8px}
.catalog-page .plist__title{margin-bottom:8px}
.plist__lead{font-size:var(--cs-text-sm);line-height:1.7;color:var(--cs-ink-soft);max-width:64ch}

/* 10-1 상태 블록 (불러오는 중 · 실패 · 스크립트 꺼짐) */
.plist__state{
  margin:16px 0 0;padding:18px;border:1px solid var(--cs-hair);
  border-radius:var(--cs-radius-card);background:var(--cs-paper-deep);
}
.plist__state p{margin:0;font-size:var(--cs-text-sm);line-height:1.7;color:var(--cs-ink-soft);max-width:60ch}
.plist__state p + p{margin-top:10px}
.plist__state-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.plist__state-ctas .btn{min-height:var(--cs-hit)}

/* 10-2 정렬·브랜드 필터 */
.plist__controls{
  display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 0;
  padding:12px;border:1px solid var(--cs-hair);border-radius:var(--cs-radius-panel);
  background:var(--cs-paper-deep);
}
.plist__ctl{display:flex;flex-direction:column;gap:6px;flex:1 1 190px;min-width:0}
.plist__ctl-label{font-size:var(--cs-text-xs);font-weight:700;letter-spacing:.04em;color:var(--cs-ink)}
.plist__select{
  min-height:var(--cs-hit);width:100%;max-width:100%;
  padding:10px 12px;border-radius:var(--cs-radius-btn);
  border:1.5px solid var(--cs-ink-soft);      /* 🔴 09-29 투톤: 7.39:1 · WCAG 1.4.11 */
  background:var(--cs-paper);color:var(--cs-ink);
  font:700 var(--cs-text-sm)/1.4 var(--cs-font);
}
.plist__select:focus-visible{outline:2px solid var(--cs-accent);outline-offset:2px}

/* 10-3 건수 알림 (aria-live) */
.plist__count{
  margin:14px 0 0;font-size:var(--cs-text-sm);line-height:1.6;color:var(--cs-ink-soft);
  font-variant-numeric:tabular-nums;
}

/* 10-4 카드 격자 */
.plist__grid{
  list-style:none;padding:0;margin:12px 0 0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
}
.catalog-page .plist__grid li + li{margin-top:0}
.pcard{min-width:0}
.pcard__link{
  display:flex;flex-direction:column;height:100%;
  border:1px solid var(--cs-hair);border-radius:var(--cs-radius-card);
  background:var(--cs-paper);text-decoration:none;overflow:hidden;
  transition:border-color var(--cs-t-fast) var(--cs-ease-out);
}
@media (hover:hover){ .pcard__link:hover{border-color:var(--cs-accent)} }
.pcard__link:focus-visible{outline:2px solid var(--cs-accent);outline-offset:2px}

/* 10-5 썸네일 — 상자를 CSS 가 미리 잡는다(CLS 0). 외부 핫링크라 실패 폴백이 반드시 있다 */
.pcard__thumb{
  position:relative;display:block;width:100%;aspect-ratio:1/1;
  background:var(--cs-paper-deep);border-bottom:1px solid var(--cs-hair-soft);
}
.pcard__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;padding:10px;box-sizing:border-box;
  background:var(--cs-paper-deep);
}
.pcard__fallback{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:10px;text-align:center;
}
/* 🔴 폴백이 기본값이다. 사진이 실제로 뜬 칸(data-thumb=ok)에서만 사진이 폴백을 덮는다.
   외부 핫링크는 「실패」로 끝나지 않고 응답 없이 매달릴 수도 있다(실측). 그때도 칸은 비어 보이지 않아야 한다.
   선택자를 [data-thumb] 로 잡아 분류 카드(.pcard__thumb)와 /products 대표 상품(.csample__thumb)에 함께 건다. */
.catalog-page [data-thumb] .pcard__img{opacity:0}
.catalog-page [data-thumb="ok"] .pcard__img{opacity:1}
.catalog-page [data-thumb="ok"] .pcard__fallback{display:none}
.pcard__fallback-mark{
  font-size:var(--cs-text-xs);font-weight:700;color:var(--cs-ink-soft);
  word-break:keep-all;overflow-wrap:anywhere;line-height:1.4;
}

/* 10-6 카드 본문 */
.pcard__body{display:flex;flex-direction:column;gap:4px;padding:12px}
.pcard__brand{font-size:var(--cs-text-xs);font-weight:700;letter-spacing:.02em;color:var(--cs-ink-soft)}
.pcard__name{
  font-size:var(--cs-text-sm);font-weight:700;line-height:1.45;color:var(--cs-ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.pcard__model{font-size:var(--cs-text-xs);color:var(--cs-ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard__fee{
  display:flex;align-items:baseline;gap:3px;flex-wrap:wrap;margin-top:4px;
  font-size:var(--cs-text-xs);color:var(--cs-ink-soft);
}
.pcard__fee-num{
  font-size:var(--cs-text-md);font-weight:700;color:var(--cs-ink);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
.pcard__ask{font-size:var(--cs-text-sm);font-weight:700;color:var(--cs-accent-deep)}
.pcard__go{
  margin-top:6px;font-size:var(--cs-text-xs);font-weight:700;color:var(--cs-ink-soft);
}
/* 계산기가 실제로 여는 상품만 액센트다. 아직 못 여는 상품까지 같은 색이면 카드마다 강조가 서서 아무것도 강조되지 않는다 */
.pcard__go--calc{color:var(--cs-accent-deep)}

/* 10-7 더 보기 */
.plist__more{display:flex;justify-content:center;margin:18px 0 0}
.plist__more .btn{min-height:var(--cs-hit);width:100%}
.plist__note{
  margin:16px 0 0;font-size:var(--cs-text-sm);line-height:1.7;color:var(--cs-ink-soft);max-width:64ch;
}

/* 11. /products 분류 카드 + 대표 상품 ---------------------------------------- */
.catgrid{
  list-style:none;padding:0;margin:16px 0 0;
  display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:12px;
}
.catalog-page .catgrid li + li{margin-top:0}
.catcard{
  border:1px solid var(--cs-hair);border-radius:var(--cs-radius-card);
  background:var(--cs-paper-deep);padding:16px;
}
.catcard__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.catcard__name{
  display:inline-flex;align-items:center;min-height:var(--cs-hit);
  font-size:var(--cs-text-lg);font-weight:700;color:var(--cs-ink);
  text-decoration:none;border-bottom:2px solid transparent;
}
@media (hover:hover){ a.catcard__name:hover{border-bottom-color:var(--cs-accent)} }
a.catcard__name:focus-visible{outline:2px solid var(--cs-accent);outline-offset:3px;border-radius:4px}
.catcard__count{white-space:nowrap;font-size:var(--cs-text-sm);color:var(--cs-ink-soft)}
.catcard__count .num{font-weight:700;font-size:var(--cs-text-md);color:var(--cs-ink)}
.catcard__items{margin:4px 0 0;font-size:var(--cs-text-sm);line-height:1.6;color:var(--cs-ink-soft)}
.csample{margin-top:12px}
.catchips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.catalog-page .catchips li + li{margin-top:0}
.catchip{
  display:inline-flex;align-items:baseline;gap:4px;
  padding:6px 10px;border-radius:9999px;background:var(--cs-paper);
  border:1px solid var(--cs-hair);font-size:var(--cs-text-sm);color:var(--cs-ink-soft);
}
.catchip__name{font-weight:700;color:var(--cs-ink)}
.catchip__count{font-weight:700;color:var(--cs-ink);font-variant-numeric:tabular-nums}
.catchip__unit{font-size:var(--cs-text-xs)}
.catchips__label{margin:0 0 8px;font-size:var(--cs-text-xs);font-weight:700;letter-spacing:.04em;color:var(--cs-ink-soft)}
.csample__list{
  list-style:none;padding:0;margin:10px 0 0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
}
.catalog-page .csample__list li + li{margin-top:0}
.csample__cell{display:flex;flex-direction:column;gap:6px;min-width:0}
.csample__thumb{
  position:relative;display:block;width:100%;aspect-ratio:1/1;
  background:var(--cs-paper);border:1px solid var(--cs-hair-soft);border-radius:var(--cs-radius-btn);
  overflow:hidden;
}
.csample__thumb .pcard__img{padding:6px}
.csample__name{
  font-size:var(--cs-text-xs);line-height:1.4;color:var(--cs-ink-soft);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* 8-b. 브레이크포인트 (10~11절) --------------------------------------------- */
@media (min-width:768px){
  .plist__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .plist__more .btn{width:auto;min-width:260px}
  .catgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .pcard__name{font-size:var(--cs-text-md)}
}
@media (min-width:876px){
  .plist__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1200px){
  .plist__grid{gap:20px}
}

/* 9-b. reduced-motion (10~11절) ---------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .catalog-page .pcard__link{transition:none}
}

/* ==========================================================================
   13~19 · 가전렌탈 축 (임무 I3 · 2026-09-09)
   참고 사이트 /electronics 구조 이식. 03_렌탈혜택 §1·§2·§6·§7 · 00_이식사양 §1-4·§2-3·§4-2.
   범위 = main.electronics-page(13~17) · main.catalog-page 안의 목록층(18~19).
   색은 위 1절 토큰만 쓴다. 지면 #fafbf9 · 회녹 판 #eef0ec · 액센트면 #e8ece9(🔴 2026-09-29 세로띠 투톤 전환).
   🔴 이 절에 `a{color:…}` 단독 선택자를 두지 않는다(불변 규칙 5). 링크색은 1절 규칙을 따른다.
   🔴 참고 사이트 이미지·로고 파일을 가져오지 않는다(불변 규칙 8). 타일 아이콘은 여기서 CSS 로 그린다.
   목차: 13 페이지 셸  14 배너  15 카테고리 타일  16 BEST4  17 구매가이드·FAQ
         18 목록 머리·필터  19 A형 카드 가격  20 상품 상세  21 브레이크포인트
   ========================================================================== */

/* 13. 페이지 셸 ------------------------------------------------------------- */
.electronics-inner{max-width:1064px;margin:0 auto}
.el-sec{padding:40px 0}                       /* 참고 사이트 세로 리듬 모바일 40 · PC 88 (§2-1) */
.el-sec + .el-sec{border-top:1px solid var(--cs-hair-soft)}
.el-sec--gray{background:var(--cs-paper-deep);border-top:0}
.electronics-page .el-h2{
  font-size:24px;line-height:1.4;font-weight:700;color:var(--cs-ink);margin:0 0 8px;text-wrap:balance;
}
.el-lead{margin:0 0 20px;font-size:var(--cs-text-sm);line-height:1.7;color:var(--cs-ink-soft);max-width:64ch}
.el-more{display:flex;justify-content:center;margin-top:20px}
.el-more .btn{min-height:var(--cs-hit)}

/* 14. 배너 (참고 사이트 E1 슬라이더 5장 → 2장 · 이미지는 우리가 그린다) ------------------ */
.el-banners{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.electronics-page .el-banners li + li{margin-top:0}
.el-banner{
  display:block;padding:24px 20px;border-radius:var(--cs-radius-card);
  background:var(--cs-accent-tint);text-decoration:none;min-height:140px;
  border:1px solid var(--cs-hair-soft);
}
.el-banner--gray{background:var(--cs-paper-deep)}
.el-banner__eyebrow{display:block;font-size:var(--cs-text-xs);font-weight:700;letter-spacing:.08em;color:var(--cs-accent-deep);margin-bottom:8px}
.el-banner__title{display:block;font-size:var(--cs-text-lg);font-weight:700;line-height:1.4;color:var(--cs-ink)}
.el-banner__body{display:block;margin-top:8px;font-size:var(--cs-text-sm);line-height:1.6;color:var(--cs-ink-soft);max-width:52ch}
@media (hover:hover){ .el-banner:hover{border-color:var(--cs-accent)} }
.el-banner:focus-visible{outline:2px solid var(--cs-accent);outline-offset:2px}

/* 15. 카테고리 타일 15칸 (참고 사이트 E2-1 · 원형 아이콘 + 라벨) ------------------------ */
/* 🔴 건수를 타일에 쓰지 않는다 — 참고 사이트가 쓰지 않고, 같은 정보가 반복 노출되어 값이 없다고 판단했다 */
.el-tiles{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 4px;
}
.electronics-page .el-tiles li + li{margin-top:0}
.el-tile{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:12px 4px;border-radius:var(--cs-radius-btn);text-decoration:none;
  min-height:var(--cs-hit);
}
@media (hover:hover){ .el-tile:hover{background:var(--cs-accent-tint)} }
.el-tile:focus-visible{outline:2px solid var(--cs-accent);outline-offset:2px}
.el-tile__icon{
  width:56px;height:56px;border-radius:50%;background:var(--cs-paper-deep);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--cs-text-sm);font-weight:700;color:var(--cs-accent-deep);
  border:1px solid var(--cs-hair-soft);
}
.el-tile__label{
  font-size:var(--cs-text-xs);line-height:1.35;font-weight:700;color:var(--cs-ink);
  text-align:center;word-break:keep-all;
}

/* 16. BEST4 (참고 사이트 E2-3 · 탭 5 + 카드 4) ------------------------------------- */
.el-tabs{
  list-style:none;padding:0;margin:0 0 16px;display:flex;flex-wrap:wrap;gap:8px;
}
.electronics-page .el-tabs li + li{margin-top:0}
.el-tab{
  min-height:var(--cs-hit);padding:10px 16px;border-radius:100px;
  border:1px solid var(--cs-ctl-line);background:var(--cs-paper);
  font:700 var(--cs-text-sm)/1.2 var(--cs-font);color:var(--cs-ink);cursor:pointer;
}
.el-tab[aria-selected="true"]{background:var(--cs-accent-tint);border-color:var(--cs-accent);color:var(--cs-accent-deep)}
.el-tab:focus-visible{outline:2px solid var(--cs-accent);outline-offset:2px}
.el-best{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
}
.electronics-page .el-best li + li{margin-top:0}
.el-best__state{margin:0 0 12px;font-size:var(--cs-text-sm);line-height:1.7;color:var(--cs-ink-soft)}

/* 17. 구매가이드 · FAQ (참고 사이트 E2-4 · E2-6) ------------------------------------ */
.el-guides{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:12px}
.electronics-page .el-guides li + li{margin-top:0}
.el-guide{
  padding:18px;border:1px solid var(--cs-hair);border-radius:20px;background:var(--cs-paper);height:100%;
}
.electronics-page .el-guide__title{margin:0 0 8px;font-size:var(--cs-text-md);font-weight:700;color:var(--cs-ink)}
.el-guide p{margin:0;font-size:var(--cs-text-sm);line-height:1.7;color:var(--cs-ink-soft)}
.el-faq{list-style:none;padding:0;margin:0;border-top:1px solid var(--cs-hair)}
.electronics-page .el-faq li + li{margin-top:0}
.el-faq__item{border-bottom:1px solid var(--cs-hair-soft)}
.el-faq__q{
  display:flex;align-items:center;gap:10px;min-height:var(--cs-hit);padding:14px 2px;
  font-size:var(--cs-text-md);font-weight:700;color:var(--cs-ink);cursor:pointer;list-style:none;
}
.el-faq__q::-webkit-details-marker{display:none}
.el-faq__q::before{content:"Q";flex:0 0 auto;font-weight:700;color:var(--cs-accent-deep)}
.el-faq__a{margin:0;padding:0 2px 16px 26px;font-size:var(--cs-text-sm);line-height:1.75;color:var(--cs-ink-soft);max-width:70ch}
.el-faq__item[open] .el-faq__q{color:var(--cs-accent-deep)}
.el-faq__q:focus-visible{outline:2px solid var(--cs-accent);outline-offset:2px}

/* 18. 목록 머리 · 정렬 · 필터 패널 (참고 사이트 §7-1 · §7-2) -------------------------- */
/* 🔴 참고 사이트의 소분류별 스펙 필터(정수기 9그룹 · 공기청정기 10그룹)는 우리에게 원천이 없다(§9-1 19·20).
      값이 없는 필터를 세우지 않는다 — 우리가 실제로 가진 축(렌탈사 · 약정기간 · 관리방식)만 그린다.
      그마저도 지금 목록에 값이 하나도 없는 축은 catalog.js 가 그 그룹을 통째로 그리지 않는다. */
.plist__layout{display:block}
.plist__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:16px 0 0;padding-bottom:12px;border-bottom:1px solid var(--cs-hair);
}
.plist__head > .plist__ctl{margin-left:auto}
.pfilter{
  margin:16px 0 0;border:1px solid var(--cs-hair);border-radius:var(--cs-radius-panel);
  background:var(--cs-paper);overflow:hidden;
}
.pfilter__top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;background:var(--cs-paper-deep);border-bottom:1px solid var(--cs-hair-soft);
}
.pfilter__title{margin:0;font-size:var(--cs-text-sm);font-weight:700;color:var(--cs-ink)}
.pfilter__reset{
  min-height:36px;padding:6px 12px;border-radius:var(--cs-radius-btn);
  border:1px solid var(--cs-ctl-line);background:var(--cs-paper);
  font:700 var(--cs-text-xs)/1.2 var(--cs-font);color:var(--cs-ink-soft);cursor:pointer;
}
.pfilter__reset:focus-visible{outline:2px solid var(--cs-accent);outline-offset:2px}
.pfilter__groups{padding:4px 14px 14px}
.pfilter__group{border-top:1px solid var(--cs-hair-soft)}
.pfilter__group:first-child{border-top:0}
.pfilter__legend{
  display:flex;align-items:center;min-height:var(--cs-hit);padding:8px 0;
  font-size:var(--cs-text-sm);font-weight:700;color:var(--cs-ink);cursor:pointer;list-style:none;
}
.pfilter__legend::-webkit-details-marker{display:none}
.pfilter__legend:focus-visible{outline:2px solid var(--cs-accent);outline-offset:2px}
.pfilter__opts{list-style:none;padding:0 0 12px;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.catalog-page .pfilter__opts li + li{margin-top:0}
.pfilter__opt{
  display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;
  border-radius:100px;border:1px solid var(--cs-ctl-line);background:var(--cs-paper);
  font-size:var(--cs-text-xs);color:var(--cs-ink);cursor:pointer;
}
.pfilter__opt input{width:16px;height:16px;accent-color:var(--cs-accent);margin:0}
.pfilter__opt:has(input:checked){background:var(--cs-accent-tint);border-color:var(--cs-accent);color:var(--cs-accent-deep);font-weight:700}
.pfilter__opt:focus-within{outline:2px solid var(--cs-accent);outline-offset:2px}
.pfilter__none{margin:0;padding:8px 0 12px;font-size:var(--cs-text-xs);line-height:1.6;color:var(--cs-ink-soft)}
/* 소분류 칩 줄 (참고 사이트 §1-3 chip 탭) */
.tilebar{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.catalog-page .tilebar li + li{margin-top:0}
.tilebar__chip{
  display:inline-flex;align-items:center;min-height:var(--cs-hit);padding:8px 14px;
  border-radius:100px;border:1px solid var(--cs-ctl-line);background:var(--cs-paper);
  font-size:var(--cs-text-sm);font-weight:700;color:var(--cs-ink);text-decoration:none;
}
.tilebar__chip[aria-current="true"]{background:var(--cs-accent-tint);border-color:var(--cs-accent);color:var(--cs-accent-deep)}
.tilebar__chip:focus-visible{outline:2px solid var(--cs-accent);outline-offset:2px}

/* 19. A형 카드 가격 (참고 사이트 esr-item · 03 §2-A · 00 §4-2-2) --------------------- */
/* 읽히는 순서: 사진 → 모델코드 → 상품명 → 「월 N원부터」 → 「카드 할인 최대 N원」(레코드 원문 · 2026-09-14 I-06 · 뺄셈 금액 0) */
.pcard__disc{
  display:block;margin-top:4px;
  font-size:var(--cs-text-xs);font-weight:700;color:var(--cs-ink-soft);
}
/* 🔴 2026-09-25 지시 ② (고객 요청 5) — 총 납입금액 한 줄(원장값 · 기준 약정 함께).
   대표가보다 약하게 둔다: 굵기를 주지 않고(카드 할인 줄과 달리 400) 흐린 글씨로 카드 맨 아래에 앉힌다.
   대표가 「월 N원부터」가 먼저 읽히는 순서를 바꾸지 않는다(03 §2-A 읽히는 순서). 좁은 카드에서 두 줄로 꺾여도 된다. */
.pcard__total{
  display:block;margin-top:3px;
  font-size:var(--cs-text-xs);font-weight:400;color:var(--cs-ink-mute);
  font-variant-numeric:tabular-nums;line-height:1.4;
}
.pcard__price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:2px}
.pcard__orig{
  font-size:var(--cs-text-xs);color:var(--cs-ink-mute);text-decoration:line-through;
  font-variant-numeric:tabular-nums;
}
/* 🔴 390 에서 카드 본문 폭은 119px 인데 「월 21,900원부터」를 전부 20px 로 두면 148px 라 「월」/「21,900원부터」 두 줄로 꺾였다
   (검증 라운드 1 실측 · 검색 결과 24/24 · /c/kitchen 22/40). 400 미만에서는 숫자를 md(16px), 접두·접미를 xs(12px)로 두고
   한 줄로 고정한다(가장 긴 「101,000」도 115px). ≥400 은 종전 그대로(lg · 접두·접미 상속). 토큰 5단 밖의 px 는 쓰지 않는다
   🔴 2026-09-22 검수 F-4(기존 결함) — 위 규칙은 「뷰포트」 400px 로 글자 크기를 골랐다. 그런데 카드 폭은 뷰포트가 아니라
      격자 열 수 · 옆 필터(876~ · 260px) · 본문 여백(1200~)이 정한다. 그래서 ≥400 인데도 칸이 좁은 폭에서 「…원부터」 끝이 카드 밖으로 잘렸다.
      실측(정수기 목록 · 카드 본문 내용 상자 기준 · 가장 긴 금액 「월 885,900원부터」 lg 한 벌 = 157.9px):
        320 +17.1 · 400 +20.8 · 876 +56.8 · 1024 +19.8 · 1200 +36.8 · 1280 +16.8 · 1440(6자리 금액만) +3.9 · BEST4 768 +12.8
      이제 카드 본문 자체의 폭으로 고른다(컨테이너 쿼리 · 글자 크기는 토큰 5단 그대로):
        · 기본(본문 < 140px · 컨테이너 쿼리를 모르는 브라우저) — 숫자 md · 접두·접미 xs(가장 긴 금액 111.6px).
          칸이 그보다 좁으면(320 · 876 · 1200 등 84~108px) 접미 「원부터」만 다음 줄로 내린다 — 「월」과 숫자는 떼지 않는다(떼면 종전 390 사고 모양이다)
        · 본문 ≥ 140px — 숫자 lg · 접두·접미 sm (가장 긴 금액 135.8px · 여유 4px)
        · 본문 ≥ 162px — 숫자 · 접두 · 접미 모두 lg (종전 ≥400 모양 · 157.9px · 여유 4px)
      판정 = tools/card-fit-probe.mjs (목록 11장 × 폭 18 · 실제 카드 · 데이터에서 가장 긴 금액을 첫 카드에 그려 본다) */
.pcard__body{container:pcard / inline-size}
.pcard__cardfee{
  display:flex;flex-wrap:wrap;align-items:baseline;
  font-size:var(--cs-text-md);font-weight:700;color:var(--cs-ink);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
.pcard__cardfee > *{white-space:nowrap}
/* 「월 」 뒤 빈칸은 종전(인라인) 그대로 글자 폭으로 남긴다 — 플렉스 항목 끝 빈칸은 접히므로 pre 로 붙든다(간격을 따로 만들지 않는다) */
.pcard__cardfee > .pcard__fee-pre{white-space:pre}
.pcard__cardfee .pcard__fee-pre,.pcard__cardfee .pcard__fee-post{font-size:var(--cs-text-xs)}
@container pcard (min-width:140px){
  .pcard__cardfee{font-size:var(--cs-text-lg)}
  .pcard__cardfee .pcard__fee-pre,.pcard__cardfee .pcard__fee-post{font-size:var(--cs-text-sm)}
}
@container pcard (min-width:162px){
  .pcard__cardfee .pcard__fee-pre,.pcard__cardfee .pcard__fee-post{font-size:inherit}
}
.pcard__cardfee .num{font-weight:700}

/* 20. 상품 상세 (/p · 참고 사이트 §6-1 중 우리 데이터로 채워지는 항목만) ------------------- */
.pdetail{margin-top:8px}
.pdetail__state{
  margin:16px 0 0;padding:18px;border:1px solid var(--cs-hair);
  border-radius:var(--cs-radius-card);background:var(--cs-paper-deep);
}
.pdetail__state p{margin:0;font-size:var(--cs-text-sm);line-height:1.7;color:var(--cs-ink-soft);max-width:60ch}
.pdetail__state p + p{margin-top:10px}
.pdetail__state-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.pdetail__grid{display:grid;grid-template-columns:1fr;gap:20px}
.pdetail__media{
  /* 🔴 span 이라 display 를 주지 않으면 인라인이 되어 width:100% 가 먹지 않는다(실측: 14px 상자로 찌부러졌다) */
  display:block;
  position:relative;width:100%;aspect-ratio:1/1;background:var(--cs-paper-deep);
  border:1px solid var(--cs-hair-soft);border-radius:var(--cs-radius-card);overflow:hidden;
}
.pdetail__brand{margin:0;font-size:var(--cs-text-sm);font-weight:700;color:var(--cs-ink-soft)}
.catalog-page .pdetail__name{margin:6px 0 12px;font-size:24px;line-height:1.35;font-weight:700;color:var(--cs-ink)}
.pdetail__opts{margin:0 0 16px}
.pdetail__opt{margin-top:14px}
.pdetail__opt-label{display:block;margin-bottom:8px;font-size:var(--cs-text-xs);font-weight:700;letter-spacing:.04em;color:var(--cs-ink-soft)}
.pdetail__pills{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.catalog-page .pdetail__pills li + li{margin-top:0}
.pdetail__pill{
  min-height:var(--cs-hit);padding:8px 16px;border-radius:100px;
  border:1px solid var(--cs-ctl-line);background:var(--cs-paper);
  font:700 var(--cs-text-sm)/1.2 var(--cs-font);color:var(--cs-ink);cursor:pointer;
}
.pdetail__pill[aria-pressed="true"]{background:var(--cs-accent-tint);border-color:var(--cs-accent);color:var(--cs-accent-deep)}
.pdetail__pill:focus-visible{outline:2px solid var(--cs-accent);outline-offset:2px}
.pdetail__price{
  margin-top:18px;padding:18px;border-radius:var(--cs-radius-card);
  background:var(--cs-accent-tint);border:1px solid var(--cs-hair-soft);
}
.pdetail__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pdetail__row + .pdetail__row{margin-top:10px;padding-top:10px;border-top:1px solid var(--cs-hair-soft)}
.pdetail__row-label{font-size:var(--cs-text-sm);color:var(--cs-ink-soft)}
.pdetail__row-value{font-size:var(--cs-text-md);font-weight:700;color:var(--cs-ink);font-variant-numeric:tabular-nums}
.pdetail__row--lead .pdetail__row-label{font-size:var(--cs-text-md);font-weight:700;color:var(--cs-ink)}
/* 🔴 2026-09-29 세로띠 투톤 전환: 대표 금액은 액센트가 아니라 가장 진한 글자색이다(금액 = ink · 이 줄이 앉는 .pdetail__price 면(#e8ece9) 위 14.27) */
.pdetail__row--lead .pdetail__row-value{font-size:25px;font-weight:700;color:var(--cs-ink)}
.pdetail__note{margin:12px 0 0;font-size:var(--cs-text-xs);line-height:1.7;color:var(--cs-ink-mute)}
.pdetail__ctas{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.pdetail__ctas .btn{min-height:var(--cs-hit);width:100%}
.pdetail__facts{list-style:none;padding:0;margin:20px 0 0;border-top:1px solid var(--cs-hair)}
.catalog-page .pdetail__facts li + li{margin-top:0}
.pdetail__fact{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  min-height:var(--cs-hit);padding:11px 2px;border-bottom:1px solid var(--cs-hair-soft);
}
.pdetail__fact-key{font-size:var(--cs-text-sm);color:var(--cs-ink-soft)}
.pdetail__fact-val{font-size:var(--cs-text-sm);font-weight:700;color:var(--cs-ink);text-align:right}

/* 21. 브레이크포인트 (13~20절) ------------------------------------------------ */
@media (min-width:768px){
  .el-sec{padding:64px 0}
  .electronics-page .el-h2{font-size:28px}
  .el-banners{grid-template-columns:repeat(2,minmax(0,1fr))}
  .el-tiles{grid-template-columns:repeat(8,minmax(0,1fr));gap:12px 8px}
  .el-best{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .el-guides{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pdetail__ctas{flex-direction:row}
  .pdetail__ctas .btn{width:auto;min-width:220px}
}
@media (min-width:876px){
  .plist__layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:24px;align-items:start}
  .plist__side{position:sticky;top:24px}
  .pfilter{margin-top:0}
  .pdetail__grid{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:32px}
}
@media (min-width:1200px){
  .el-sec{padding:88px 0}
  .el-guides{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* 22. reduced-motion (13~20절) ------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .electronics-page *,
  .catalog-page .pfilter *{transition:none}
}

/* 19-b. 카드 할인가가 남지 않는 행 (임무 I3) ------------------------------------
   등록된 할인액이 월 납입료보다 커서 뺀 결과가 금액이 되지 않는 행이다.
   월 납입료는 원장 값 그대로 두고, 못 쓰게 된 그 한 칸만 상담 안내로 적는다. */
.pcard__ask--card{
  display:block;width:100%;margin-top:2px;
  font-size:var(--cs-text-xs);font-weight:700;color:var(--cs-ink-soft);
}

/* ── 🔴 2026-09-13 임무 ④ 마감 라운드 — 거친 포인터(휴대폰) 터치 타깃 44 ──────────────
   qa-390-probe (c) 실측: 390 에서 .pfilter__reset 57×36 · label.pfilter__opt 36 높이 ·
   빵부스러기 「홈」 12×44(너비) · a.othlist__name 「가구」 32×44(너비) 가 44 아래였다.
   이 파일의 다른 규칙(.cat-crumb a · .othlist__name)이 이미 min-height 44 를 주고 있으므로 모자란 축만 채운다.
   hover:none 안에 두는 것은 이 코드베이스의 기존 방식이다(calc.css 164 · 605 · 720 · 770행) —
   데스크톱 디자인은 그대로 두고 손가락으로 누르는 화면에서만 타깃을 키운다. */
@media (hover:none){
  .cat-crumb a{min-width:var(--cs-hit)}
  a.othlist__name{min-width:var(--cs-hit)}
  .pfilter__reset{min-height:var(--cs-hit)}
  .pfilter__opt{min-height:var(--cs-hit)}
}