:root {
  --black: #0A0A0A;
  --white: #FFFFFF;
  --yellow: #FFE135;
  --gray-muted: #8E8E93;
  --gray-light: #F2F2F2;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--white);
  color: var(--black);
  font: 400 16px/1.7 'DM Sans', sans-serif;
}

nav {
  background: var(--black);
  padding: 0 48px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  font: 400 28px 'Bebas Neue';
  color: var(--white);
  text-decoration: none;
  letter-spacing: 0.1em;
}
.nav-back {
  font: 600 13px 'DM Sans';
  color: var(--gray-muted);
  text-decoration: none;
  letter-spacing: 0.05em;
}
.nav-back:hover { color: var(--white); }

.hero {
  background: var(--black);
  padding: 80px 48px 64px;
  border-bottom: 4px solid var(--yellow);
}
.hero-label {
  font: 600 11px 'DM Sans';
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 16px;
}
.hero-title {
  font: 400 clamp(56px, 8vw, 96px) 'Bebas Neue';
  color: var(--white);
  line-height: 0.95;
}
.hero-note {
  font: 400 13px 'DM Sans';
  color: var(--gray-muted);
  margin-top: 24px;
}

.content {
  max-width: 760px;
  margin: 0 auto;
  padding: 80px 48px 120px;
}

section { margin-bottom: 56px; }

h2 {
  font: 400 36px 'Bebas Neue';
  color: var(--black);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--black);
}

h3 {
  font: 700 15px 'DM Sans';
  color: var(--black);
  margin-top: 24px;
  margin-bottom: 8px;
}

p { margin-bottom: 14px; color: #333; line-height: 1.7; }
p:last-child { margin-bottom: 0; }

.info-box {
  background: var(--gray-light);
  padding: 28px 32px;
  margin: 16px 0;
}
.info-box p { color: var(--black); }

.notice-box {
  background: var(--yellow);
  padding: 24px 28px;
  margin: 24px 0;
}
.notice-box p { color: var(--black); font-weight: 600; margin-bottom: 0; }

a { color: var(--black); }
a:hover { opacity: 0.7; }

footer {
  border-top: 1px solid #1a1a1a;
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--gray-muted);
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}
.footer-links { display: flex; gap: 24px; }
.footer-links a {
  font: 400 13px 'DM Sans';
  color: var(--gray-muted);
  text-decoration: none;
}
.footer-links a:hover { color: var(--black); }

@media (max-width: 640px) {
  nav { padding: 0 24px; }
  .hero { padding: 60px 24px 48px; }
  .content { padding: 48px 24px 80px; }
  footer { padding: 20px 24px; flex-direction: column; gap: 12px; text-align: center; }
  .footer-links { flex-direction: column; gap: 8px; align-items: center; }
}