@font-face {
  font-family: "Resource Han Rounded KR";
  src: url("/fonts/ResourceHanRoundedKR-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Resource Han Rounded KR";
  src: url("/fonts/ResourceHanRoundedKR-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #f8f9fb;
  --text: #090909;
  --muted: #999b9f;
  --pill: rgba(235, 235, 235, 0.82);
  --switch: rgba(226, 226, 226, 0.86);
  --switch-active: rgba(255, 255, 255, 0.96);
  --brand-blue: #1a9cff;
  --blue-1: rgba(26, 156, 255, 0.2);
  --blue-2: rgba(26, 156, 255, 0.43);
  --icon-filter: none;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0b0c;
  --text: #f5f7fb;
  --muted: #777b84;
  --pill: rgba(255, 255, 255, 0.09);
  --switch: rgba(255, 255, 255, 0.1);
  --switch-active: rgba(255, 255, 255, 0.16);
  --brand-blue: #1a9cff;
  --blue-1: rgba(26, 156, 255, 0.28);
  --blue-2: rgba(26, 156, 255, 0.52);
  --icon-filter: invert(1);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Resource Han Rounded KR", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  overflow: hidden;
  transition: background-color .35s ease, color .35s ease;
}

button, a { color: inherit; font: inherit; }
button { border: 0; }

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(20px, 2vw, 32px) clamp(28px, 4vw, 68px) clamp(28px, 5.8vh, 54px);
}

.site-header { position: relative; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(16px, 2vw, 24px) clamp(20px, 3vw, 48px); }
.site-header > .site-notices { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
.site-header > .brand { grid-column: 1; grid-row: 2; justify-self: start; }
.site-header > .controls { grid-column: 2; grid-row: 2; justify-self: end; }
.brand { display: inline-flex; align-items: center; gap: clamp(14px, 1.45vw, 24px); text-decoration: none; }
.brand-mark { display: block; width: clamp(54px, 4vw, 66px); aspect-ratio: 1; }
.brand-word { font-size: clamp(34px, 3.15vw, 53px); font-weight: 700; letter-spacing: -0.065em; line-height: 1; }

.controls { display: flex; align-items: center; gap: clamp(24px, 3vw, 50px); }
.language { display: flex; align-items: center; gap: 24px; }
.language > span { width: 1px; height: 23px; background: color-mix(in srgb, var(--text) 22%, transparent); }
.lang-button { cursor: pointer; background: none; padding: 8px 0; font-size: 20px; color: var(--muted); transition: color .2s ease; }
.lang-button.active { color: var(--text); font-weight: 650; }

.theme-switch { display: grid; grid-template-columns: 1fr 1fr; width: 152px; height: 64px; border-radius: 999px; padding: 4px; background: var(--switch); }
.theme-button { display: grid; place-items: center; cursor: pointer; border-radius: 999px; background: transparent; color: var(--muted); transition: background .2s ease, color .2s ease, transform .2s ease; }
.theme-button.active { background: var(--switch-active); color: var(--text); box-shadow: 0 1px 8px rgba(0,0,0,.04); }
.theme-button:active { transform: scale(.94); }
.theme-button svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-button[data-theme-value="dark"] svg { fill: none; stroke: currentColor; width: 26px; }

.hero-copy { position: relative; z-index: 4; margin-top: clamp(42px, 5vh, 64px); }
h1 { margin: 0; font-size: clamp(88px, 9vw, 150px); line-height: 1.08; letter-spacing: -.055em; font-weight: 700; }
.quick-links { display: flex; flex-wrap: wrap; width: min(720px, 75vw); gap: 12px; margin-top: clamp(110px, 17vh, 178px); }
.quick-links a {
  min-height: 69px;
  display: flex;
  width: max-content;
  justify-self: start;
  align-items: center;
  gap: 12px;
  padding: 12px 30px;
  border-radius: 999px;
  background: var(--pill);
  text-decoration: none;
  font-size: 25px;
  font-weight: 650;
  white-space: nowrap;
  backdrop-filter: blur(12px);
  transition: transform .18s ease, background .18s ease;
}
.quick-links a:hover { transform: translateY(-3px); background: color-mix(in srgb, var(--pill) 80%, var(--text) 8%); }
.quick-links a:focus-visible, button:focus-visible { outline: 3px solid #4788ff; outline-offset: 3px; }
.quick-links img { width: 34px; height: 34px; flex: 0 0 34px; object-fit: contain; filter: var(--icon-filter); transition: filter .35s ease; }

.hero-star { position: absolute; z-index: 1; left: 43vw; top: 14vh; width: 130vh; height: 130vh; outline: none; cursor: default; touch-action: pan-y pinch-zoom; }
.hero-star.interactive-ready { cursor: pointer; }
.star-reactive, .star-spinner { width: 100%; height: 100%; transform-origin: center; }
.star-reactive { --mx: 0; --my: 0; --sx: 1; --sy: 1; transform: translate(calc(var(--mx) * 14px), calc(var(--my) * 14px)) scale(var(--sx), var(--sy)); transition: transform .38s cubic-bezier(.18,1.35,.3,1); }
.star-spinner { animation: star-boost 1.15s cubic-bezier(.12,.72,.18,1) forwards, star-spin 14s linear infinite; }
.hero-star svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hero-star path { fill: var(--brand-blue); }

@media (max-width: 980px) {
  .hero { padding: 28px; }
  .brand-word { font-size: 34px; }
  .brand-mark { width: 52px; }
  .theme-switch { width: 116px; height: 52px; }
  .controls { gap: 18px; }
  .language { gap: 13px; }
  .lang-button { font-size: 16px; }
  .hero-copy { margin-top: clamp(40px, 5vh, 56px); }
  h1 { font-size: clamp(78px, 11vw, 116px); }
  .quick-links { width: min(620px, 82vw); gap: 14px; margin-top: 25vh; }
  .quick-links a { min-height: 58px; padding: 10px 22px; font-size: 20px; gap: 11px; }
  .quick-links img { width: 28px; height: 28px; flex-basis: 28px; }
  .hero-star { left: auto; right: -42vw; top: 20vh; width: 122vw; height: 122vw; }
}

@media (max-width: 680px) {
  .hero { padding: 20px; }
  .site-header { grid-template-columns: minmax(0, 1fr) auto; align-items: flex-start; gap: 24px 12px; }
  .site-header > .site-notices { grid-column: 1 / -1; grid-row: 1; justify-self: center; width: max-content; max-width: calc(100% - 32px); }
  .site-header > .brand { grid-column: 1; grid-row: 2; justify-self: start; }
  .site-header > .controls { grid-column: 2; grid-row: 2; justify-self: end; }
  .brand { gap: 10px; }
  .brand-mark { width: 42px; }
  .brand-word { font-size: 26px; }
  .controls { flex-direction: column; align-items: center; gap: 8px; }
  .language { gap: 10px; }
  .language > span { height: 17px; }
  .lang-button { font-size: 14px; padding: 2px 0; }
  .theme-switch { width: 92px; height: 42px; }
  .theme-button svg { width: 21px; height: 21px; }
  .theme-button[data-theme-value="dark"] svg { width: 19px; }
  .hero-copy { margin-top: clamp(42px, 7vh, 64px); }
  h1 { font-size: clamp(52px, 15vw, 76px); line-height: 1.14; }
  .quick-links { position: fixed; left: 20px; right: 20px; bottom: 22px; display: grid; width: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
  .quick-links a { width: 100%; min-width: 0; min-height: 52px; padding: 8px 15px; font-size: 17px; gap: 9px; justify-content: flex-start; }
  .quick-links a:nth-child(4), .quick-links a:nth-child(5) { grid-column: auto; }
  .quick-links a:last-child { grid-column: 1 / -1; width: 48%; }
  .quick-links img { width: 25px; height: 25px; flex-basis: 25px; }
  .hero-star { left: auto; right: -68vw; top: 29vh; width: 145vw; height: 145vw; opacity: .88; }
}

@media (max-height: 720px) and (min-width: 681px) {
  .hero-copy { margin-top: 32px; }
  h1 { font-size: clamp(64px, 8vw, 88px); }
  .quick-links { margin-top: 12vh; }
  .quick-links a { min-height: 56px; }
}

@keyframes star-spin { to { transform: rotate(360deg); } }
@keyframes star-boost { 0% { transform: rotate(-9deg) scale(.78); } 58% { transform: rotate(4deg) scale(1.035); } 100% { transform: rotate(0) scale(1); } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }