/* ═══════════════════════════════════════════════════════
   ChartFlow — settlements.html 전용 (2026-10-18 개편)
   표 줄은 js/settlements.js 가 만듭니다 (st-date · trader-name · settlement-amount · st-status · st-tx > a.st-txid).
   넓은 화면 = 보통 표, 좁은 화면(≤640px) = 줄마다 두 줄짜리 목록 모양 (가로 스크롤 없이 읽히게).
   ═══════════════════════════════════════════════════════ */

.st-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; margin-bottom: 48px; }
.st-block .ui-subhead { margin-bottom: 6px; }
.st-block .ui-subhead .lb-section-title { margin-bottom: 0; }
.st-block .ui-subhead .lb-updated { margin: 0; }
.st-lead { font-size: var(--fs-small); color: var(--c-ink-2); line-height: 1.65; margin-bottom: 16px; }

/* 넓은 화면 표 */
.st-table .trader-name { font-weight: 600; }
.st-table .settlement-amount { text-align: right; }
.st-txid { display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; font-family: var(--font-code); font-size: 0.875rem; color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.st-txid:hover { color: var(--c-accent-hover); }
.st-txid-ext { width: 12px; height: 12px; flex-shrink: 0; }
.st-txid-none { color: var(--c-ink-3); }

/* 좁은 화면 — 줄을 목록 모양으로. 공통 틀은 site.css 의 .ui-table--stack, 여기는 칸 배치만
   닉네임 ··················· 금액
   날짜 [승인] ········· TXID ↗          */
@media (max-width: 640px) {
  .st-summary { margin-bottom: 36px; }
  .st-cards .st-table tr { column-gap: 10px; row-gap: 4px; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "name name name amount" "date status . tx"; }
  .st-cards .st-table .trader-name { grid-area: name; white-space: normal; overflow-wrap: anywhere; font-size: 1rem; } /* 긴 닉네임은 잘라 내지 않고 줄바꿈 */
  .st-cards .st-table .settlement-amount { grid-area: amount; text-align: right; font-size: 1rem; }
  .st-cards .st-table .st-date { grid-area: date; font-size: 0.875rem; color: var(--c-ink-3); }
  .st-cards .st-table .st-status { grid-area: status; }
  .st-cards .st-table .st-tx { grid-area: tx; text-align: right; }
  .st-txid { font-size: 0.8125rem; }
}