:root {
  color-scheme: light;
  --intro-bg: #f2f1ec;
  --intro-paper: #f8f7f3;
  --intro-ink: #343b37;
  --intro-muted: #7d837d;
  --intro-line: #d8d9d2;
  --intro-accent: #61766b;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--intro-bg); color: var(--intro-ink); font-family: "Noto Sans KR", "Apple SD Gothic Neo", sans-serif; }
.intro-page { display: grid; min-height: calc(100vh - 66px); min-height: calc(100svh - 66px); place-items: center; padding: 48px 24px; }
.intro-card { width: min(100%, 620px); padding: clamp(34px, 7vw, 68px); border: 1px solid rgba(115, 123, 115, .18); background: var(--intro-paper); }
.intro-eyebrow { margin: 0 0 26px; color: #8b918a; font-size: 9px; font-weight: 600; letter-spacing: .2em; }
.intro-card h1 { margin: 0; color: #48564e; font-family: "Noto Serif KR", "Batang", serif; font-size: clamp(35px, 6vw, 48px); font-weight: 500; letter-spacing: -.05em; }
.intro-copy { margin-top: 32px; color: #666e68; font-size: 14px; line-height: 1.95; word-break: keep-all; }
.intro-copy p { margin: 0 0 7px; }
.intro-copy .intro-copy__question { margin-top: 22px; color: #48564e; font-family: "Noto Serif KR", "Batang", serif; font-size: 19px; line-height: 1.8; }
.name-form { margin-top: 38px; }
.name-form__prompt { margin: 0 0 14px; color: #6f766f; font-size: 12px; }
.name-form__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.name-form__fields label { display: flex; flex-direction: column; gap: 7px; color: #777e77; font-size: 11px; }
.name-form__fields input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--intro-line); border-radius: 0; outline: none; background: #fbfaf7; color: var(--intro-ink); font: inherit; font-size: 14px; transition: border-color .15s, background .15s; }
.name-form__fields input:focus { border-color: #87968b; background: #fff; }
.name-form__fields input::placeholder { color: #a7aba5; }
.name-form button { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 48px; margin-top: 14px; padding: 0 15px; border: 1px solid #61766b; background: #61766b; color: #f7f7f2; font: inherit; font-size: 12px; letter-spacing: .06em; cursor: pointer; transition: background .15s, border-color .15s; }
.name-form button:hover { border-color: #4f6358; background: #4f6358; }
.name-form button span { font-size: 17px; }
.intro-footnote { margin: 35px 0 0; color: #a1a59f; font-size: 8px; letter-spacing: .2em; text-align: center; }
.intro-site-footer { min-height: 66px; padding: 11px 20px 13px; color: #969b94; font-size: 9px; line-height: 1.6; text-align: center; }
.intro-site-footer p { margin: 1px 0; }

@media (max-width: 480px) {
  .intro-page { padding: 24px 16px; }
  .intro-card { padding: 30px 22px; }
  .intro-copy { margin-top: 26px; font-size: 13px; }
  .intro-copy .intro-copy__question { font-size: 18px; }
  .name-form { margin-top: 30px; }
}