:root {
  color-scheme: dark;
  font-family: Inter, Pretendard, "Noto Sans KR", system-ui, -apple-system, sans-serif;
  background: #050b14;
  color: #eaf5f8;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 85% 8%, rgba(117, 216, 232, 0.14), transparent 28rem),
    linear-gradient(145deg, #0b2234 0%, #071321 45%, #050b14 100%);
}

main { width: min(760px, calc(100% - 32px)); margin: 0 auto; padding: 48px 0 72px; }
.brand { color: #75d8e8; font-size: 13px; font-weight: 800; letter-spacing: 0.14em; }
h1 { margin: 10px 0 12px; font-size: clamp(30px, 7vw, 44px); line-height: 1.15; }
.lead { margin: 0 0 28px; color: #b8cad4; line-height: 1.7; }
.panel {
  margin: 14px 0;
  padding: 22px;
  border: 1px solid rgba(117, 216, 232, 0.25);
  border-radius: 18px;
  background: rgba(18, 43, 64, 0.82);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 18px 55px rgba(0, 0, 0, 0.18);
}
h2 { margin: 0 0 10px; font-size: 19px; }
p, li { color: #d7e4e9; line-height: 1.75; }
ul { margin: 8px 0 0; padding-left: 22px; }
a { color: #8fe5ef; }
nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; }
nav a { padding: 9px 12px; border: 1px solid rgba(117, 216, 232, 0.3); border-radius: 999px; text-decoration: none; }
footer { margin-top: 34px; color: #8fa7b5; font-size: 13px; }