:root {
  --ink: #18202a;
  --muted: #68717c;
  --line: #dce1e4;
  --accent: #e45b3e;
  --paper: #f7f6f2;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Pretendard", "Noto Sans KR", system-ui, sans-serif;
}

.page {
  width: min(100% - 40px, 760px);
  margin: 0 auto;
  padding: 92px 0 52px;
}

.hero { padding-bottom: 68px; border-bottom: 1px solid var(--line); }
.eyebrow, dt, footer > p {
  margin: 0;
  color: var(--accent);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

h1 {
  margin: 18px 0 14px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.4rem, 10vw, 5.8rem);
  font-weight: 400;
  letter-spacing: -.07em;
  line-height: .95;
}

.intro { max-width: 440px; margin: 0; color: var(--muted); font-size: 1.08rem; line-height: 1.8; }
section { padding: 42px 0; border-bottom: 1px solid var(--line); }
h2 { margin: 0 0 24px; font-family: Georgia, "Times New Roman", serif; font-size: 1.55rem; font-weight: 400; }
dl { margin: 0; }
dl div { display: grid; grid-template-columns: 132px 1fr; gap: 16px; padding: 11px 0; }
dd { margin: 0; line-height: 1.6; }

ul { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; list-style: none; }
li { padding: 8px 13px; border: 1px solid var(--ink); border-radius: 999px; font-size: .93rem; }

footer { padding-top: 40px; }
.links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 12px; }
a { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { color: var(--accent); }

@media (max-width: 480px) {
  .page { width: min(100% - 32px, 760px); padding-top: 62px; }
  .hero { padding-bottom: 50px; }
  dl div { grid-template-columns: 1fr; gap: 5px; padding: 13px 0; }
}