@font-face {
  font-family: Pretendard;
  src: local("Pretendard");
  font-display: swap;
}

:root {
  color-scheme: light;
  --sky: #dff3ff;
  --sky-deep: #b9dff2;
  --paper: #fafdff;
  --cloud: #ffffff;
  --ink: #17384b;
  --muted: #526f80;
  --line: #9fc8dc;
  --blue: #176d9d;
  --blue-soft: #e9f6fc;
  --grass: #b8d6c2;
  --ground: #88b19b;
  --warning: #fff6db;
  --warning-line: #d8b653;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--sky);
  color: var(--ink);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-size: 16px;
  line-height: 1.72;
  letter-spacing: -0.012em;
  word-break: keep-all;
}
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { border-radius: 3px; outline: 3px solid #f2a93b; outline-offset: 3px; }
.skip-link { position: fixed; z-index: 20; top: 8px; left: 8px; padding: 8px 12px; background: var(--ink); color: white; transform: translateY(-150%); }
.skip-link:focus { transform: none; }

.sky-header {
  position: relative;
  overflow: hidden;
  min-height: 250px;
  padding: 20px 20px 84px;
  background:
    linear-gradient(90deg, transparent 48%, rgba(255,255,255,.52) 48% 56%, transparent 56%) 8% 48px / 92px 14px no-repeat,
    linear-gradient(90deg, transparent 22%, rgba(255,255,255,.72) 22% 78%, transparent 78%) 83% 86px / 112px 18px no-repeat,
    linear-gradient(180deg, var(--sky) 0%, #cfebf8 100%);
  border-bottom: 4px solid var(--ground);
}
.sky-header::before,
.sky-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  image-rendering: pixelated;
}
.sky-header::before {
  left: 0;
  right: 0;
  height: 54px;
  background:
    linear-gradient(90deg, transparent 0 7%, #6d91a4 7% 12%, transparent 12% 17%, #557b91 17% 24%, transparent 24% 31%, #7299ac 31% 38%, transparent 38% 46%, #51778c 46% 55%, transparent 55% 65%, #6f96a8 65% 72%, transparent 72% 81%, #50768b 81% 90%, transparent 90%) bottom / 100% 35px no-repeat,
    linear-gradient(var(--grass), var(--grass)) bottom / 100% 14px no-repeat;
  opacity: .74;
}
.sky-header::after {
  right: 8%;
  width: 10px;
  height: 72px;
  background: #557d69;
  box-shadow: -8px 16px 0 #78a184, 8px 25px 0 #78a184, -16px 31px 0 #78a184, 16px 38px 0 #78a184;
}
.header-inner { position: relative; z-index: 1; width: min(100%, 760px); margin: 0 auto; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 13px; font-weight: 800; text-decoration: none; }
.brand::before { content: ""; width: 12px; height: 12px; background: var(--blue); box-shadow: 4px 4px 0 #86b8d1; }
.kicker { margin: 46px 0 4px; color: var(--blue); font: 800 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
h1 { margin: 0; max-width: 650px; font-size: clamp(32px, 8vw, 54px); line-height: 1.13; letter-spacing: -.045em; }
.lead { max-width: 650px; margin: 14px 0 0; color: #31576c; font-size: clamp(16px, 3vw, 19px); line-height: 1.65; }

.doc-nav { background: rgba(250,253,255,.94); border-bottom: 1px solid var(--line); }
.doc-nav__inner { display: flex; width: min(100%, 800px); margin: 0 auto; padding: 10px 20px; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.doc-nav__inner::-webkit-scrollbar { display: none; }
.doc-nav a { flex: none; min-height: 40px; padding: 8px 11px; border-radius: 5px; color: var(--muted); font-size: 13px; font-weight: 750; text-decoration: none; }
.doc-nav a[aria-current="page"] { background: var(--ink); color: white; }

main { background: var(--paper); }
.document { width: min(100%, 800px); margin: 0 auto; padding: 38px 20px 80px; }
.summary, .notice { margin: 0 0 28px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--blue-soft); box-shadow: 4px 4px 0 rgba(67,120,145,.12); }
.notice { border-color: var(--warning-line); background: var(--warning); }
.summary strong, .notice strong { display: block; margin-bottom: 5px; }
section { scroll-margin-top: 20px; padding: 29px 0; border-top: 1px solid #c8dce6; }
section:first-of-type { border-top: 0; }
h2 { margin: 0 0 13px; font-size: 23px; line-height: 1.35; letter-spacing: -.025em; }
h3 { margin: 22px 0 8px; font-size: 17px; line-height: 1.45; }
p { margin: 0 0 12px; }
ul, ol { margin: 9px 0 13px; padding-left: 1.35em; }
li + li { margin-top: 7px; }
small, .meta { color: var(--muted); font-size: 13px; }
.data-grid, .contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.data-card, .contact-card { padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.data-card h3, .contact-card h3 { margin-top: 0; }
.contact-card { display: flex; flex-direction: column; }
.contact-card .mail-button { margin-top: auto; }
.mail-button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 9px 13px; border: 2px solid var(--ink); border-radius: 6px; background: white; color: var(--ink); font-weight: 800; text-align: center; text-decoration: none; box-shadow: 3px 3px 0 var(--sky-deep); }
.mail-button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--sky-deep); }
.table-wrap { margin: 15px 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: white; }
table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14px; line-height: 1.6; }
th, td { padding: 12px; border-bottom: 1px solid #d6e4eb; text-align: left; vertical-align: top; }
th { background: var(--blue-soft); color: #294e62; font-weight: 800; }
tr:last-child td { border-bottom: 0; }
.code-label { display: inline-block; padding: 2px 6px; border-radius: 3px; background: #e0eef5; font: 700 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }

.site-footer { padding: 28px 20px calc(30px + env(safe-area-inset-bottom)); border-top: 4px solid var(--ground); background: #d7eadb; color: #3d6251; font-size: 13px; }
.site-footer__inner { width: min(100%, 760px); margin: 0 auto; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 7px 16px; margin-bottom: 8px; }
.site-footer a { color: #285544; font-weight: 750; }

@media (max-width: 620px) {
  .sky-header { min-height: 230px; padding-inline: 18px; }
  .kicker { margin-top: 36px; }
  .document { padding-inline: 18px; }
  .data-grid, .contact-grid { grid-template-columns: 1fr; }
  section { padding-block: 24px; }
  h2 { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
  body, main { background: white; }
  .sky-header { min-height: auto; padding: 20px; border-bottom: 1px solid #777; background: white; }
  .sky-header::before, .sky-header::after, .doc-nav, .skip-link { display: none; }
  .kicker { margin-top: 22px; }
  .document { width: 100%; padding: 20px; }
  section { break-inside: avoid; }
  .summary, .notice, .data-card, .contact-card, .table-wrap { box-shadow: none; }
}