/*  Tailwind 가 «지어 주던» 것만 손으로 적은 한 장.
 *
 *  ★★★★★ 옛 판의 옷 열(globals.css ＋ styles/ 아홉)은 **한 글자도 안 고치고** 그대로 옮겼다 — 값의 정본이라서다.
 *    그런데 그 맨 위의 `@import 'tailwindcss'` 와 `@theme { … }` 은 «빌드가» 펴 주던 것이라 브라우저가 모른다.
 *    이 판에는 그 빌드 걸음이 없다(PORT.md ④ — 새 의존을 안 들인다) ⇒ 그 둘이 주던 것만 여기 적는다.
 *    ⚠ 값은 옛 판의 `@theme` 에서 «그대로» 옮긴 것이다. 저쪽이 갈리면 여기도 함께 간다.
 *
 *  ㉠ `@theme` 의 글꼴 두 줄 — `body { font: 14.5px/1.5 var(--font-sans) }` 이 이것을 문다.
 *     ⚠ 없으면 그 한 줄이 통째로 죽어 창의 «모든» 글자가 브라우저 밑값으로 선다(오류는 한 줄도 안 난다).
 *     나머지 `--color-*` 열여섯은 `@layer base :root` 가 제 이름(`--bg`·`--accent`…)으로 다시 적어 두어 안 옮겼다.
 *  ㉡ 판이 쓰는 «Tailwind 낱말» 스물 — 그 낱말이 선 자리는 옛 판의 tsx 그대로라(값을 안 갈았다) 여기서 뜻만 준다.
 *     이 목록에 없는 낱말을 새로 쓰지 않는다 — 쓰면 그 줄이 조용히 아무 일도 안 한다.
 */

:root {
  --font-sans: 'Pretendard', 'Noto Sans KR', 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, Consolas, 'D2Coding', monospace;
}

.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.contents { display: contents; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.grow { flex-grow: 1; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-md { max-width: 28rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.h-4 { height: 1rem; }
.w-4 { width: 1rem; }
.bg-black { background: #000; }
.whitespace-nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.accent-\[\#7c6cf0\] { accent-color: #7c6cf0; }

/* 읽어 주는 자에게만 서는 글 — 화면에서는 없는 것과 같다. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 48rem) {
  .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}