:root {
  --surface: #fafafa;
  --surface-raised: #ffffff;
  --primary: #0e7490;
  --primary-strong: #0b5f73;
  --on-surface: #15313a;
  --on-surface-variant: #61767d;
  --outline: #668087;
  --outline-variant: #d7e6e8;
  --notice-bg: #e7f8f6;
  --notice-text: #155e63;
  --danger-bg: #fff0f0;
  --danger-text: #8b1e1e;
  color-scheme: light;
  font-family: Pretendard, "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--surface);
  color: var(--on-surface);
}

* { box-sizing: border-box; }
html { background: var(--surface); }
body { margin: 0; min-width: 320px; background: var(--surface); color: var(--on-surface); line-height: 1.6; }
a { color: var(--primary-strong); }
a:hover { color: var(--primary); }
a:focus-visible, button:focus-visible { outline: 3px solid #5cc8bd; outline-offset: 3px; border-radius: 6px; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 10; padding: 10px 14px; border-radius: 8px; background: var(--on-surface); color: #fff; font-weight: 700; }
.skip-link:focus { top: 12px; }
.page-shell { width: min(100% - 32px, 860px); margin-inline: auto; }
.site-header { border-bottom: 1px solid var(--outline-variant); background: var(--surface-raised); }
.header-inner { min-height: 60px; display: flex; align-items: center; gap: 12px; }
.brand-link { display: inline-flex; align-items: center; gap: 9px; color: var(--on-surface); font-size: 1.05rem; font-weight: 800; text-decoration: none; letter-spacing: -.02em; }
.brand-mark { width: 32px; height: 32px; flex: 0 0 auto; }
.header-context { color: var(--on-surface-variant); font-size: .9rem; }
main { padding-block: 20px 48px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 20px; padding: 0; color: var(--on-surface-variant); font-size: .9rem; list-style: none; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 8px; }
.breadcrumbs li:not(:last-child)::after { content: "/"; color: var(--outline); }
.breadcrumbs a { color: var(--on-surface-variant); }
.eyebrow { display: inline-block; margin: 0 0 8px; padding: 4px 10px; border-radius: 999px; background: var(--notice-bg); color: var(--notice-text); font-size: .85rem; font-weight: 700; }
h1, h2, h3 { margin-top: 0; line-height: 1.3; }
h1 { margin-bottom: 12px; font-size: clamp(1.8rem, 6vw, 2.55rem); letter-spacing: -.03em; overflow-wrap: anywhere; }
h2 { margin-bottom: 12px; font-size: 1.25rem; }
p { margin: 0; }
.page-intro { margin-bottom: 20px; color: var(--on-surface-variant); }
.action-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.action-button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border: 1px solid var(--primary); border-radius: 10px; background: var(--primary); color: #fff; font-weight: 800; text-decoration: none; }
.action-button:hover { background: var(--primary-strong); color: #fff; }
.action-button.secondary { background: var(--surface-raised); color: var(--primary-strong); }
.action-button.secondary:hover { background: var(--notice-bg); }
.info-card, .data-card, .notice-card { margin-top: 16px; padding: 20px; border: 1px solid var(--outline-variant); border-radius: 14px; background: var(--surface-raised); box-shadow: 0 2px 10px rgb(36 25 70 / 4%); }
.info-list { display: grid; gap: 16px; margin: 0; }
.info-list > div { display: grid; gap: 4px; }
.info-list dt { color: var(--on-surface-variant); font-size: .9rem; font-weight: 700; }
.info-list dd { margin: 0; overflow-wrap: anywhere; }
.info-list dd a { font-weight: 700; }
.notice-card { border-color: #d7cdfd; background: var(--notice-bg); color: var(--notice-text); }
.notice-card strong { display: block; margin-bottom: 4px; }
.note-card { margin-top: 16px; }
.snapshot-text { margin-top: 12px; margin-bottom: 0; }
.data-grid { display: grid; gap: 10px; margin: 0; }
.data-grid > div { padding: 12px; border: 1px solid var(--outline-variant); border-radius: 10px; background: var(--surface); }
.data-grid dt { color: var(--on-surface-variant); font-size: .88rem; }
.data-grid dd { margin: 2px 0 0; font-size: 1.05rem; font-weight: 800; }
.hours-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours-table th, .hours-table td { padding: 10px 4px; border-bottom: 1px solid var(--outline-variant); text-align: left; vertical-align: top; }
.hours-table th { width: 28%; color: var(--on-surface-variant); font-weight: 700; }
.hours-table tr:last-child th, .hours-table tr:last-child td { border-bottom: 0; }
.note-text { white-space: pre-line; overflow-wrap: anywhere; }
.section-heading { margin: 32px 0 0; }
.related-links { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.related-links a { min-height: 44px; display: flex; align-items: center; padding: 10px 12px; border: 1px solid var(--outline-variant); border-radius: 10px; background: var(--surface-raised); text-decoration: none; }
.site-footer { border-top: 1px solid var(--outline-variant); padding: 24px 0 40px; color: var(--on-surface-variant); font-size: .86rem; }
.site-footer p + p { margin-top: 4px; }
.empty-state { color: var(--on-surface-variant); }
.directory-heading { margin-bottom: 8px; }
.directory-summary { color: var(--on-surface-variant); }
.directory-list { display: grid; gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; }
.directory-card { padding: 16px; border: 1px solid var(--outline-variant); border-radius: 14px; background: var(--surface-raised); }
.directory-card h2 { margin-bottom: 4px; font-size: 1.05rem; }
.directory-card h2 a { color: var(--on-surface); text-decoration: none; }
.directory-card h2 a:hover { color: var(--primary-strong); text-decoration: underline; }
.directory-card p { color: var(--on-surface-variant); font-size: .93rem; overflow-wrap: anywhere; }
.directory-card p + p { margin-top: 2px; }
.pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.pagination a, .pagination span { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 13px; border: 1px solid var(--outline-variant); border-radius: 9px; background: var(--surface-raised); text-decoration: none; }
.pagination .current { border-color: var(--primary); background: var(--notice-bg); color: var(--notice-text); font-weight: 800; }

@media (min-width: 768px) {
  .page-shell { width: min(100% - 48px, 860px); }
  main { padding-block: 28px 64px; }
  .info-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .data-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}