/* ══════════════════════════════════════════════════════════════════════
   스타일가이드 전용 조판
   카탈로그를 읽기 위한 것이지 제품 컴포넌트가 아니다. 접두사 .sg- 로
   격리한다 — 여기 있는 것을 화면에서 가져다 쓰지 않는다.
   ══════════════════════════════════════════════════════════════════════ */

.sg-grp{ margin-bottom:var(--sp-4); }
.sg-grp:last-child{ margin-bottom:0; }

.sg-sw{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-2); }
.sg-sw__i{ display:flex; align-items:center; gap:var(--sp-2); font-size:11.5px; color:var(--muted); }
.sg-sw__c{
  width:26px; height:26px; border-radius:var(--r-2);
  border:1px solid var(--line-2); flex:none;
}
.sg-sw code{ font-family:var(--font); font-size:11px; }

.sg-rows{ border-top:1px solid var(--line); }
.sg-row{
  display:grid; grid-template-columns:minmax(140px,180px) 1fr;
  gap:var(--sp-4); align-items:baseline;
  padding:var(--sp-3) 0; border-bottom:1px solid var(--line);
}
.sg-row__k{ font-size:var(--fs-label); font-weight:700; color:var(--muted); }
.sg-row__v{ min-width:0; }

@media (max-width:600px){
  .sg-row{ grid-template-columns:1fr; gap:var(--sp-1); }
}