:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", "Malgun Gothic", sans-serif;
  color: #172133;
  background: #fff;
  font-synthesis: none;
  --muted: #586478;
  --line: #dce2eb;
  --accent: #224fcb;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; line-height: 1.7; overflow-wrap: anywhere; }
a { color: inherit; text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; border-radius: 2px; }
p, h1, h2 { margin: 0; }
.page-width { width: min(100% - 2.5rem, 64rem); margin-inline: auto; }
.skip-link { position: absolute; left: 1rem; top: -10rem; z-index: 2; padding: 0.75rem 1rem; background: #fff; }
.skip-link:focus { top: 0.75rem; }

.operator-notice { border-bottom: 1px solid #e9dbaa; background: #fff5d8; color: #4d3d15; }
.notice-inner { width: min(100% - 2.5rem, 64rem); margin-inline: auto; padding-block: 0.875rem; font-size: 0.875rem; }
.notice-inner p { font-weight: 600; }
.notice-inner .notice-context { margin-top: 0.375rem; font-weight: 400; }
.notice-inner a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.site-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; padding-block: 1.625rem; border-bottom: 1px solid var(--line); }
.wordmark { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.06em; text-decoration: none; }
.wordmark span { color: var(--accent); }

.home-main { padding-top: 2.75rem; padding-bottom: 3.5rem; }
.intro { margin-bottom: 2.5rem; }
h1 { font-size: clamp(2rem, 6vw, 3.5rem); line-height: 1.3; letter-spacing: -0.05em; word-break: keep-all; }
.site-list { margin: 0; padding: 0; list-style: none; border-top: 2px solid #172133; }
.site-item { padding-block: 1.75rem; border-bottom: 1px solid var(--line); }
.site-details { min-width: 0; }
h2 { font-size: clamp(1.375rem, 4vw, 1.75rem); line-height: 1.4; letter-spacing: -0.035em; }
.site-details p { max-width: 40rem; margin-top: 0.625rem; color: var(--muted); word-break: keep-all; }
.site-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.5rem; margin-top: 1rem; }
.visit-link, .secondary-link { display: inline-flex; gap: 0.75rem; align-items: center; min-height: 2.75rem; font-size: 0.9375rem; }
.visit-link { color: var(--accent); font-weight: 700; }
.secondary-link { color: var(--muted); }
.site-footer { display: flex; flex-direction: column; gap: 0.375rem; padding-block: 1.5rem 2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.875rem; }
.site-footer > span { color: #172133; font-weight: 700; }

.error-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.error-main { display: flex; align-items: center; flex: 1; padding-block: 3rem 4rem; }
.error-content { width: 100%; }
.error-code { color: var(--accent); font-size: clamp(5rem, 22vw, 10rem); line-height: 1; font-weight: 800; letter-spacing: -0.07em; margin-bottom: 1.75rem; }
.error-main h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.error-description { margin-top: 1rem; color: var(--muted); word-break: keep-all; }
.home-link { display: inline-flex; align-items: center; justify-content: center; gap: 1.5rem; max-width: 100%; min-height: 3rem; margin-top: 2rem; padding: 0.625rem 1.25rem; border: 1px solid var(--accent); border-radius: 0.375rem; background: var(--accent); color: #fff; font-weight: 600; text-decoration: none; }
.home-link:hover { background: #183c9f; border-color: #183c9f; }

@media (min-width: 44rem) {
  .site-header { padding-block: 2rem; }
  .home-main { padding-top: 4rem; padding-bottom: 5rem; }
  .intro { margin-bottom: 3.5rem; }
  .site-item { padding-block: 2rem; }
  .site-footer { flex-direction: row; justify-content: space-between; gap: 1.5rem; }
  .error-main { padding-block: 4rem 5rem; }
}