/* =========================================================
   Utilities — 레이아웃 · 간격 · 글자 보조 클래스
   화면 코드(JS)는 style="" 대신 이 클래스를 씁니다. 간격은 --space-* 토큰만 사용합니다.
   ========================================================= */

/* ---------- 그리드 · 분할 레이아웃 ---------- */
.grid { display: grid; gap: var(--card-gap); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.gap-0 { gap: 0; }
.split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--card-gap); align-items: start; }
.split-r { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--card-gap); align-items: start; }
.split-detail { display: grid; grid-template-columns: minmax(0, 1fr) var(--detail-panel-width); gap: var(--card-gap); align-items: start; }
.stack { display: flex; flex-direction: column; gap: var(--card-gap); }
.stack.tight { gap: var(--space-2); }
.row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.col-span-full { grid-column: 1 / -1; }

/* ---------- 정렬 · 흐름 ---------- */
.flex-1 { flex: 1; min-width: 0; }
.flex-none { flex: none; }
.nowrap { white-space: nowrap; }
.flex-nowrap { flex-wrap: nowrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.justify-stretch > * { flex: 1; }
.self-start { align-self: flex-start; }
.ml-auto { margin-left: auto; }
.mt-auto { margin-top: auto; }
.mr-auto { margin-right: auto; }
.relative { position: relative; }
.d-block { display: block; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }

/* ---------- 간격 (토큰 단계와 같은 이름) ---------- */
.gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .gap-6 { gap: var(--space-6); }
.m-0 { margin: 0; } .p-0 { padding: 0; }
.mt { margin-top: var(--space-4); } .mt-lg { margin-top: var(--space-6); } .mb { margin-bottom: var(--space-4); }
.mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); }
.mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); }
.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: 10px; padding-bottom: 10px; }
.pb-1 { padding-bottom: 6px; }
.spacer-icon { width: 14px; display: inline-block; flex: none; }

/* ---------- 크기 (정해진 단계만) ---------- */
.w-full { width: 100%; }
.w-xs { width: 90px; }
.w-sm { width: 120px; }
.w-md { width: 140px; }
.w-lg { width: 160px; }
.minw-md { min-width: 180px; }
.minw-lg { min-width: 260px; }
.maxw-none { max-width: none; }

/* ---------- 글자 ---------- */
.muted { color: var(--color-text-secondary); }
.small { font-size: var(--font-size-sm); }
.text-md { font-size: var(--font-size-md); }
.text-xl { font-size: var(--font-size-xl); }
.strong { font-weight: var(--font-weight-bold); color: var(--color-text-strong); }
.fw-normal { font-weight: var(--font-weight-regular); }
.fw-medium { font-weight: var(--font-weight-medium); }
.fw-semibold { font-weight: var(--font-weight-semibold); }
.num { font-variant-numeric: tabular-nums; }
.text-strong { color: var(--color-text-strong); }
.text-body { color: var(--color-text); }
.text-accent { color: var(--color-primary-strong); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-danger { color: var(--color-danger); }

/* ---------- 반응형 그리드 ---------- */
@media (max-width: 1280px) {
  .g-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split-detail { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (max-width: 1080px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .split-r, .split-detail { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .g-2, .g-3, .g-4, .g-5, .g-6 { grid-template-columns: minmax(0, 1fr); }
  .g-4.keep-2, .g-6.keep-2, .g-2.keep-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.spacer-3 { height: var(--space-3); }
.w-2xs { width: 60px; }
.w-xl { width: 170px; }
.text-lg { font-size: var(--font-size-lg); }
.pt-2 { padding-top: var(--space-2); }