/* 리셋, 토큰, 그리고 손으로 쓴 유틸리티. 모양이 복잡한 조각은 app.css 쪽에 있다. */

@font-face { font-family: "Black Han Sans"; src: url("../fonts/BlackHanSans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/Archivo-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Gaegu"; src: url("../fonts/Gaegu-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("../fonts/Pretendard-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("../fonts/Pretendard-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("../fonts/Pretendard-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; }

:root {
  --concrete: #2b2b2e;
  --concrete-2: #3a3a3e;
  --yellow: #ffd400;
  --pink: #ff3fa4;
  --sky: #3cc4ff;
  --paper: #f6f1e7;
  --paper-2: #ebe3d2;
  --ink: #111;
  --mute: #5d5850;
  --mute-dk: #b9b3a8;

  --f-body: "Pretendard", system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
  --f-disp: "Black Han Sans", "Pretendard", sans-serif;
  --f-num: "Archivo", "Pretendard", sans-serif;
  --f-mark: "Gaegu", "Pretendard", sans-serif;

  --wrap: 1240px;
  --gut: clamp(16px, 4vw, 40px);
  --bd: 3px solid var(--ink);
  --hard: 5px 5px 0 var(--ink);
  --hard-lg: 9px 9px 0 var(--ink);
}

/* 리셋 — 필요한 만큼만 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 84px; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
body {
  min-height: 100vh;
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
::selection { background: var(--yellow); color: var(--ink); }

/* 레이아웃 */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.rel { position: relative; } .abs { position: absolute; } .inset-0 { inset: 0; }
.z-1 { z-index: 1; } .z-2 { z-index: 2; } .z-3 { z-index: 3; }
.block { display: block; } .inline-block { display: inline-block; }
.flex { display: flex; } .inline-flex { display: inline-flex; } .grid { display: grid; }
.col { flex-direction: column; } .wrap-row { flex-wrap: wrap; }
.items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .items-base { align-items: baseline; }
.justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; }
.grow { flex: 1 1 0; min-width: 0; } .shrink-0 { flex-shrink: 0; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-5 { gap: 24px; } .gap-6 { gap: 32px; } .gap-8 { gap: 56px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(var(--min, 220px), 1fr)); }
.span-all { grid-column: 1 / -1; }
.w-full { width: 100%; } .max-prose { max-width: 38em; } .max-sm { max-width: 26em; }
.overflow-hidden { overflow: hidden; } .overflow-x { overflow-x: auto; }
.ml-auto { margin-left: auto; } .mx-auto { margin-inline: auto; }

/* 여백 — 4px 계단 */
.m-0 { margin: 0; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-5 { margin-top: 24px; } .mt-6 { margin-top: 32px; } .mt-8 { margin-top: 56px; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-5 { margin-bottom: 24px; } .mb-6 { margin-bottom: 32px; }
.p-2 { padding: 8px; } .p-3 { padding: 12px; } .p-4 { padding: 16px; } .p-5 { padding: 24px; } .p-6 { padding: 32px; }
.px-2 { padding-inline: 8px; } .px-3 { padding-inline: 12px; } .px-4 { padding-inline: 16px; }
.py-1 { padding-block: 4px; } .py-2 { padding-block: 8px; } .py-3 { padding-block: 12px; }
.py-sec { padding-block: clamp(64px, 9vw, 128px); }
.pt-sec { padding-top: clamp(64px, 9vw, 128px); } .pb-sec { padding-bottom: clamp(64px, 9vw, 128px); }

/* 글자 */
.f-disp { font-family: var(--f-disp); font-weight: 400; letter-spacing: -0.01em; line-height: 1.08; }
.f-num { font-family: var(--f-num); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.f-mark { font-family: var(--f-mark); font-weight: 700; line-height: 1.15; }
.fs-xs { font-size: 12px; } .fs-sm { font-size: 14px; } .fs-md { font-size: 17px; } .fs-lg { font-size: 20px; }
.fs-xl { font-size: clamp(22px, 2.4vw, 28px); }
.fs-2xl { font-size: clamp(28px, 3.6vw, 40px); }
.fs-3xl { font-size: clamp(36px, 5.6vw, 64px); }
.fs-4xl { font-size: clamp(44px, 8vw, 104px); }
.fw-4 { font-weight: 400; } .fw-7 { font-weight: 700; } .fw-9 { font-weight: 900; }
.up { text-transform: uppercase; } .track { letter-spacing: 0.12em; }
.lh-1 { line-height: 1; } .lh-tight { line-height: 1.25; } .lh-loose { line-height: 1.8; }
.ta-c { text-align: center; } .ta-r { text-align: right; }
.nowrap { white-space: nowrap; } .no-ul { text-decoration: none; }

/* 색 */
.tx-ink { color: var(--ink); } .tx-paper { color: var(--paper); } .tx-yellow { color: var(--yellow); }
.tx-pink { color: var(--pink); } .tx-sky { color: var(--sky); } .tx-mute { color: var(--mute); } .tx-mute-dk { color: var(--mute-dk); }
.bg-ink { background: var(--ink); color: var(--paper); }
.bg-concrete { background: var(--concrete); color: var(--paper); }
.bg-paper { background: var(--paper); color: var(--ink); }
.bg-paper-2 { background: var(--paper-2); color: var(--ink); }
.bg-yellow { background: var(--yellow); color: var(--ink); }
.bg-pink { background: var(--pink); color: var(--ink); }
.bg-sky { background: var(--sky); color: var(--ink); }

/* 테두리 · 그림자 · 기울기 (스티커 붙인 느낌은 거의 다 이 조합) */
.bd { border: var(--bd); } .bd-b { border-bottom: var(--bd); } .bd-t { border-top: var(--bd); }
.bd-dash { border: 2px dashed currentColor; }
.r-0 { border-radius: 0; } .r-1 { border-radius: 6px; } .r-2 { border-radius: 14px; } .r-3 { border-radius: 22px; } .r-pill { border-radius: 999px; } .r-full { border-radius: 50%; }
.sh { box-shadow: var(--hard); } .sh-lg { box-shadow: var(--hard-lg); } .sh-pink { box-shadow: 5px 5px 0 var(--pink); } .sh-yellow { box-shadow: 5px 5px 0 var(--yellow); }
.tilt-l { rotate: -2deg; } .tilt-r { rotate: 2deg; } .tilt-l2 { rotate: -5deg; } .tilt-r2 { rotate: 5deg; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 반응형 접두사 — md: 720px, lg: 980px */
@media (min-width: 720px) {
  .md\:flex { display: flex; } .md\:grid { display: grid; } .md\:block { display: block; }
  .md\:row { flex-direction: row; }
  .md\:grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:items-center { align-items: center; } .md\:items-end { align-items: flex-end; }
  .md\:ta-l { text-align: left; }
}
@media (min-width: 980px) {
  .lg\:flex { display: flex; } .lg\:grid { display: grid; } .lg\:block { display: block; } .lg\:hidden { display: none; }
  .lg\:grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:split-7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .lg\:split-5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .lg\:split-8-4 { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .lg\:sticky { position: sticky; top: 96px; }
  .lg\:row { flex-direction: row; }
  .lg\:row-rev { flex-direction: row-reverse; }
}
@media (max-width: 719.98px) {
  .sm\:hidden { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}