멀티 컬럼

<div class="page">
  <div class="cols" id="cols">
    <p>Design systems turn scattered decisions into shared defaults. A spacing scale, a type ramp, a small set of named colors — none of it is exciting on its own, but together it removes hundreds of tiny arguments before they happen. Consistency compounds quietly over months.</p>
  </div>
  <div class="tag" id="tag">column-count: 1</div>
</div>

.page{display:flex;flex-direction:column;align-items:center;gap:10px;width:min(92%,460px)}
.cols{width:100%;height:min(70%,190px);overflow:hidden;column-gap:18px;column-rule:1px solid var(--line);
  transition:column-count .6s}
.cols p{margin:0;font-size:clamp(10px,1.9vmin,12px);line-height:1.55;color:var(--fg)}
.tag{font:700 clamp(9px,1.7vmin,11px)/1 ui-monospace,monospace;color:var(--accent-2);
  background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:4px 8px}

const cols = document.getElementById('cols');
const tag = document.getElementById('tag');
const counts = [1, 2, 3, 2];
let i = 0;
setInterval(() => {
  const n = counts[i % counts.length];
  cols.style.columnCount = String(n);
  tag.textContent = 'column-count: ' + n;
  i++;
}, 1700);