@font-face {
  font-family: SUIT;
  src: url('/SUIT-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: SUIT;
  src: url('/SUIT-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-display: swap;
}
:root {
  color-scheme: light;
  color: #252432;
  background: #f8f9fc;
  font-family: SUIT, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: #5653bd; text-underline-offset: 5px; }
a:focus-visible { outline: 3px solid #8d88ef; outline-offset: 5px; }
.page { max-width: 820px; margin: auto; padding: 32px 24px 48px; }
header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.brand { display: inline-flex; align-items: center; min-height: 48px; }
.brand img { display: block; width: 82px; height: auto; }
.preview { margin: 0; color: #777480; font-size: 12px; }
main { padding: 40px; background: #fff; border: 1px solid #e8eaf0; border-radius: 24px; }
h1 { margin: 0 0 20px; font-size: clamp(26px, 5vw, 32px); font-weight: 600; line-height: 1.4; letter-spacing: -.035em; word-break: keep-all; }
h2 { margin: 36px 0 12px; font-size: 19px; font-weight: 600; line-height: 1.5; letter-spacing: -.025em; }
p, li { margin: 14px 0; color: #53515f; font-size: 16px; line-height: 1.85; word-break: keep-all; overflow-wrap: anywhere; }
.mail-symbol { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 24px; color: #5653bd; background: #f1f0fb; border-radius: 18px; }
.intro main { padding: 40px; }
.intro h1 { margin-bottom: 12px; }
.intro main > p:first-of-type { max-width: 440px; margin: 0; font-size: 18px; line-height: 1.8; }
.intro h2 { margin: 32px 0 4px; padding-top: 24px; border-top: 1px solid #e8eaf0; color: #777480; font-size: 13px; font-weight: 400; letter-spacing: 0; }
.intro main > p:last-child { margin: 0; }
.intro main a { display: inline-flex; align-items: center; min-height: 44px; color: #252432; font-size: 16px; text-decoration-color: #d4d2e4; }
.intro main a:hover { color: #5653bd; text-decoration-color: currentColor; }
.table { overflow-x: auto; margin: 20px 0; border: 1px solid #e8e7ee; border-radius: 12px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.75; }
th, td { min-width: 120px; padding: 14px 16px; text-align: left; vertical-align: top; }
th { background: #f5f5f9; font-weight: 600; }
td { color: #53515f; }
tr + tr td { border-top: 1px solid #eeedf3; }
footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding: 16px 4px 0; }
nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
nav a { display: inline-flex; align-items: center; min-height: 44px; color: #686673; font-size: 13px; text-decoration: none; }
nav a:hover { text-decoration: underline; }
nav a[aria-current='page'] { color: #252432; font-weight: 600; }
footer p { margin: 0; color: #777480; font-size: 12px; }
.date { margin-top: 32px; color: #777480; font-size: 13px; }
@media (max-width: 600px) {
  .page { padding: 20px 20px 32px; }
  header { margin-bottom: 20px; }
  .brand img { width: 72px; }
  main, .intro main { padding: 28px 24px; border-radius: 20px; }
  p, li { font-size: 15px; }
  .intro main > p:first-of-type { font-size: 16px; }
  .mail-symbol { width: 52px; height: 52px; margin-bottom: 20px; border-radius: 16px; }
  .intro main a { font-size: 15px; }
  h2 { font-size: 18px; }
  th, td { min-width: 110px; padding: 12px; }
  footer { display: block; padding-top: 12px; }
  footer p { margin-top: 8px; }
}