@font-face {
  font-family: "Gmarket Sans";
  src: url("/family-assets/GmarketSansMedium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gmarket Sans";
  src: url("/family-assets/GmarketSansBold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: light;
  font-family: "Gmarket Sans", "Malgun Gothic", sans-serif;
  font-synthesis: none;
  font-weight: 500;
  color: #263342;
  background: #fafaf8;
}
* { box-sizing: border-box; }
body { margin: 0; border-top: 5px solid #2644cb; word-break: keep-all; overflow-wrap: break-word; }
.page { width: min(1120px, calc(100% - 112px)); min-height: calc(100svh - 5px); margin: 0 auto; display: flex; flex-direction: column; }
.header { padding-top: 48px; }
.logo { display: block; width: 226.5px; height: auto; }
.main { flex: 1; display: flex; align-items: center; padding: 86px 0 110px; }
.welcome { width: 100%; }
.accent { width: 48px; height: 3px; background: #2644cb; margin-bottom: 30px; }
h1, p { margin: 0; }
h1 { font-size: clamp(28px, 3.2vw, 43px); line-height: 1.6; letter-spacing: -.045em; font-weight: 500; }
h1 strong { display: block; color: #2644cb; font-size: clamp(42px, 4.8vw, 66px); font-weight: 700; line-height: 1.5; letter-spacing: -.055em; margin-top: 3px; }
.mobile-break { display: none; }
.guidance { margin-top: 33px; color: #596470; font-size: 16px; line-height: 2; letter-spacing: -.025em; }
.footer { border-top: 1px solid #dfe2e5; padding: 25px 0 30px; font-size: 16px; font-weight: 700; color: #263342; line-height: 1.9; letter-spacing: -.025em; }
.footer .family-only { margin-top: 5px; color: #2644cb; }
.skip-link { position: fixed; top: -100px; left: 20px; padding: 12px 18px; background: #fff; color: #2644cb; z-index: 10; }
.skip-link:focus { top: 12px; outline: 2px solid #2644cb; outline-offset: 3px; }
@media (max-width: 620px) {
  .page { width: calc(100% - 48px); }
  .header { padding-top: 30px; }
  .logo { width: 196.3px; }
  .main { padding: 72px 0 86px; }
  .accent { width: 36px; margin-bottom: 25px; }
  h1 { font-size: clamp(25px, 6.7vw, 36px); line-height: 1.65; }
  h1 strong { font-size: clamp(38px, 10.2vw, 56px); margin-top: 6px; }
  .mobile-break { display: initial; }
  .guidance { margin-top: 28px; font-size: 13px; line-height: 2; letter-spacing: -.035em; }
  .footer { padding: 22px 0 26px; font-size: 14px; }
}
@media (max-height: 600px) and (min-width: 621px) {
  .header { padding-top: 26px; }
  .main { padding: 42px 0 48px; }
}
