@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap');

:root {
  color-scheme: dark;
  --page-bg: #0d0f14;
  --page-text: #eee9df;
  --page-muted: #b8b5ae;
  --page-line: #3b3e46;
  --page-accent: #debe62;
  --page-selection: #484026;
  font-family: "Twemoji Country Flags", Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-synthesis: none;
  font-size: 16px;
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --page-bg: #f3ede1;
    --page-text: #25251f;
    --page-muted: #625e54;
    --page-line: #c2bbae;
    --page-accent: #715913;
    --page-selection: #dfd3af;
  }
}
* { box-sizing: border-box; }
html { background: var(--page-bg); scrollbar-color: var(--page-muted) var(--page-bg); }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--page-bg); color: var(--page-text); }
::selection { color: var(--page-text); background: var(--page-selection); }
a { color: var(--page-accent); text-underline-offset: 4px; text-decoration-thickness: 1px; overflow-wrap: anywhere; touch-action: manipulation; }
a:hover { color: var(--page-text); text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid var(--page-accent); outline-offset: 4px; border-radius: 2px; }
.skip-link { position: absolute; top: 12px; left: 16px; transform: translateY(-160%); padding: 12px 16px; background: var(--page-bg); z-index: 10; }
.skip-link:focus { transform: none; }
.page-shell { width: min(100%, 480px); margin-inline: auto; padding: max(20px, env(safe-area-inset-top)) 16px max(32px, env(safe-area-inset-bottom)); }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--page-line); }
.site-name { color: var(--page-text); font-family: 'Gowun Batang', serif; font-weight: 700; text-decoration: none; }
.site-header a { display: inline-flex; align-items: center; min-height: 44px; }
main { padding-block: 36px 24px; }
h1 { margin: 0 0 14px; font-family: 'Gowun Batang', serif; font-size: 2rem; line-height: 1.4; font-weight: 700; letter-spacing: -.025em; text-wrap: balance; }
h2 { margin: 36px 0 12px; font-size: 1.15rem; line-height: 1.55; letter-spacing: -.015em; scroll-margin-top: 24px; }
p, li { font-size: .975rem; line-height: 1.85; overflow-wrap: anywhere; word-break: keep-all; }
p { margin: 0 0 16px; }
ul, ol { margin: 12px 0 20px; padding-left: 22px; }
li + li { margin-top: 8px; }
.lead { color: var(--page-muted); font-size: 1.025rem; }
.effective-date { color: var(--page-muted); font-size: .82rem; font-variant-numeric: tabular-nums; }
.page-toc { margin-top: 24px; padding: 16px 0; border-block: 1px solid var(--page-line); }
.page-toc ul { list-style: none; margin: 0; padding: 0; }
.page-toc li + li { margin-top: 0; }
.page-toc a { display: inline-flex; align-items: center; min-height: 44px; }
.contact { padding-top: 18px; margin-top: 32px; border-top: 1px solid var(--page-line); }
.contact [data-config] { overflow-wrap: anywhere; }
.page-footer { padding-top: 24px; border-top: 1px solid var(--page-line); color: var(--page-muted); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 18px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: .85rem; }
.page-footer p { margin-top: 12px; font-size: .8rem; }
.home-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; margin-top: 12px; border: 1px solid var(--page-accent); border-radius: 8px; color: var(--page-text); text-decoration: none; transition: transform 140ms cubic-bezier(.23,1,.32,1); }
.home-button:hover { background: var(--page-selection); }
.home-button:active { transform: scale(.98); }
.not-found { padding-block: 70px 56px; }
.not-found-code { margin: 0 0 22px; font-family: 'Gowun Batang', serif; font-size: 4.5rem; line-height: 1; color: var(--page-muted); font-variant-numeric: tabular-nums; }
.guide-main h3 { font-size: 1rem; line-height: 1.65; margin: 26px 0 8px; text-wrap: balance; scroll-margin-top: 24px; }
.guide-main h4 { font-size: .975rem; line-height: 1.65; margin: 0 0 6px; }
.guide-catalog { list-style: none; padding: 0; margin-block: 18px 28px; }
.guide-catalog li { margin: 0; padding-block: 14px; border-bottom: 1px solid var(--page-line); }
.guide-catalog h3 { margin-top: 0; }
.guide-catalog p { margin-bottom: 0; color: var(--page-muted); }
.guide-catalog small { display: block; font-size: .8rem; color: var(--page-muted); font-weight: 400; }
.guide-grades { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .8rem; line-height: 1.75; margin-block: 20px; font-variant-numeric: tabular-nums; }
.guide-grades caption { text-align: left; color: var(--page-muted); margin-bottom: 10px; }
.guide-grades th, .guide-grades td { padding: 10px 6px; border-bottom: 1px solid var(--page-line); text-align: left; overflow-wrap: anywhere; }
.guide-grades th:first-child { width: 14%; }
.guide-grades thead th { color: var(--page-muted); font-weight: 400; }
@media (max-width: 360px) { h1 { font-size: 1.8rem; } .site-header { gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .home-button { transition: none; } .home-button:active { transform: none; } }
