:root {
  --ink: #10263d;
  --blue: #163f69;
  --sky: #2e78a6;
  --line: #d9e2e8;
  --paper: #f7f9fa;
  --white: #ffffff;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
  line-height: 1.65;
}
.topbar {
  min-height: 82px;
  padding: 0 6vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 13px; color: inherit; text-decoration: none; }
.brand .mark {
  width: 42px; height: 42px; display: grid; place-items: center;
  color: white; background: var(--blue); border-radius: 50% 50% 50% 16%;
  font: 700 22px Georgia, serif;
}
.brand strong, .brand small { display: block; }
.brand strong { font-size: 17px; letter-spacing: -.03em; }
.brand small { margin-top: -3px; color: #66798b; font-size: 12px; letter-spacing: .04em; }
nav { display: flex; gap: 30px; }
nav a { color: #52677a; text-decoration: none; font-size: 14px; font-weight: 650; }
nav a:hover { color: var(--blue); }
main { max-width: 1180px; margin: auto; padding: 0 28px 88px; }
.hero {
  position: relative;
  min-height: 610px;
  padding: 112px 7vw 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: white;
  background:
    radial-gradient(circle at 82% 36%, rgba(70,171,208,.42), transparent 27%),
    linear-gradient(135deg, #0b2035 0%, #143f67 54%, #176183 100%);
  border-radius: 0 0 38px 38px;
}
.hero::after {
  content: ""; position: absolute; right: -110px; bottom: -220px;
  width: 520px; height: 520px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%;
  box-shadow: 0 0 0 74px rgba(255,255,255,.035), 0 0 0 148px rgba(255,255,255,.025);
}
.eyebrow { position: relative; z-index: 1; color: #8fcee7; font-size: 13px; font-weight: 800; letter-spacing: .2em; }
h1 { position: relative; z-index: 1; margin: 20px 0 18px; font-size: clamp(42px, 6vw, 74px); line-height: 1.14; letter-spacing: -.055em; }
h1 em { color: #9edbf1; font-style: normal; }
.hero p { position: relative; z-index: 1; margin: 0; color: #d7e4ec; font-size: 18px; }
.actions { position: relative; z-index: 1; display: flex; gap: 12px; margin-top: 40px; }
.actions a { padding: 14px 22px; border-radius: 8px; text-decoration: none; font-weight: 750; }
.primary { color: var(--blue); background: white; }
.secondary { color: white; border: 1px solid rgba(255,255,255,.45); }
.panel, .contact { margin-top: 28px; padding: 48px 52px; background: white; border: 1px solid var(--line); border-radius: 18px; }
.panel { display: grid; grid-template-columns: .75fr 1.25fr; gap: 56px; align-items: center; }
.section-no { color: var(--sky); font-size: 13px; font-weight: 850; letter-spacing: .12em; }
h2 { margin: 6px 0 0; font-size: 30px; letter-spacing: -.04em; }
.panel p, .contact p { margin: 0; color: #607386; font-size: 16px; }
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.contact p { margin-top: 13px; max-width: 460px; }
.mail-card { position: relative; padding: 28px 62px 28px 28px; color: white; background: var(--blue); border-radius: 12px; text-decoration: none; }
.mail-card span, .mail-card strong { display: block; }
.mail-card span { color: #9fc8df; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.mail-card strong { margin-top: 7px; font-size: clamp(16px, 2.1vw, 22px); overflow-wrap: anywhere; }
.mail-card b { position: absolute; right: 25px; top: 50%; transform: translateY(-50%); font-size: 25px; }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 28px 6vw; color: #738292; background: white; border-top: 1px solid var(--line); font-size: 13px; }
@media (max-width: 720px) {
  .topbar { min-height: 72px; padding: 0 20px; }
  nav { gap: 15px; }
  nav a:first-child { display: none; }
  main { padding: 0 14px 50px; }
  .hero { min-height: 510px; padding: 74px 26px; border-radius: 0 0 25px 25px; }
  .hero p { font-size: 16px; }
  .actions { flex-direction: column; align-items: stretch; }
  .actions a { text-align: center; }
  .panel, .contact { padding: 32px 25px; }
  .panel, .contact { grid-template-columns: 1fr; gap: 24px; }
  footer { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }