/* 2026-08-12 · Midnight Route 공용 다크 테마 */
:root {
  --night: #0a0b0e;
  --night-deep: #06070a;
  --night-panel: #14161b;
  --night-raised: #1c1f26;
  --night-hover: #262a33;
  --night-text: #dce0e7;
  --night-muted: #a9afb9;
  --night-subtle: #7e8695;
  --site-header-height: 88px;
  --rail-safe: 184px;
  --bottom-nav: 0px;
}

html {
  color-scheme: dark;
  scroll-padding-top: var(--site-header-height);
}

body {
  background: var(--night);
  color: var(--night-text);
}

body:not(.home-page) main {
  padding-top: var(--site-header-height);
}

h1,
h2,
h3 {
  color: var(--white);
}

site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  min-height: var(--site-header-height);
}

.nav {
  border-bottom: 1px solid rgb(255 255 255 / 8%);
  background: rgb(10 11 14 / 88%);
  backdrop-filter: blur(18px);
}

.home-page .nav:not(.scrolled) {
  border-color: transparent;
  background: linear-gradient(rgb(6 7 10 / 72%), transparent);
  backdrop-filter: none;
}

.nav.scrolled {
  border-color: rgb(255 255 255 / 10%);
  background: rgb(10 11 14 / 92%);
  box-shadow: 0 12px 36px rgb(0 0 0 / 20%);
}

.nav .inner {
  min-height: 88px;
}

.nav .brand,
.nav .brand:hover {
  color: var(--white);
}

/* 2026-08-19 제공 흰색 마크를 필터 없이 그대로 쓴다. */
.nav .mark .logo-mark-white,
footer.site .mark .logo-mark-white {
  display: block;
}

.nav .mark .logo-mark-blue,
footer.site .mark .logo-mark-blue {
  display: none;
}

.links > a {
  color: rgb(255 255 255 / 78%);
}

.links > a:hover,
.links > a[aria-current="page"] {
  background: rgb(255 255 255 / 8%);
  color: var(--white);
}

.links .cta {
  border: 1px solid rgb(255 255 255 / 10%);
  background: var(--brand);
  color: var(--white);
}

.menu-button {
  border-color: rgb(255 255 255 / 28%);
  color: var(--white);
}

.btn-signal {
  background: var(--brand);
  color: var(--white);
}

.btn-signal:hover {
  background: #255f9c;
  color: var(--white);
}


/* 하위·법률·지원 페이지의 공용 표면 */
body:not(.home-page) .page-hero {
  position: relative;
  min-height: calc(58svh - var(--site-header-height));
  display: grid;
  align-items: end;
  overflow: hidden;
  border-color: rgb(255 255 255 / 10%);
  background-color: #163a5f;
  background-image:
    linear-gradient(rgb(255 255 255 / 7%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 7%) 1px, transparent 1px),
    linear-gradient(120deg, transparent 0 56%, rgb(10 11 14 / 35%) 100%);
  background-size: 52px 52px, 52px 52px, auto;
}

body:not(.home-page) .page-hero h1,
body:not(.home-page) .page-hero h2 {
  color: var(--white);
}

body:not(.home-page) .page-hero .kicker {
  color: rgb(255 255 255 / 65%);
}

body:not(.home-page) .page-hero p,
body:not(.home-page) .page-hero-grid > p {
  color: rgb(255 255 255 / 72%);
}

body:not(.home-page) .content {
  background: #0f1116;
  color: var(--night-text);
}

body:not(.home-page) .content h1,
body:not(.home-page) .content h2,
body:not(.home-page) .content h3,
body:not(.home-page) .content strong {
  color: var(--white);
}

body:not(.home-page) .content p,
body:not(.home-page) .content li,
body:not(.home-page) .content small,
body:not(.home-page) .long-copy,
body:not(.home-page) .principle-list p,
body:not(.home-page) .policy-checklist p,
body:not(.home-page) .prohibited-list p,
body:not(.home-page) .release-channels p {
  color: var(--night-muted);
}

body:not(.home-page) main a:not(.btn),
body:not(.home-page) .document-link,
body:not(.home-page) .back-link {
  color: #8bb7ff;
}

body:not(.home-page) .content .kicker,
body:not(.home-page) .feature-number,
body:not(.home-page) .principle-list article > span,
body:not(.home-page) .policy-checklist article > span,
body:not(.home-page) .prohibited-list article > span,
body:not(.home-page) .support-topics span,
body:not(.home-page) .release-channel-heading,
body:not(.home-page) .status-label,
body:not(.home-page) .error-code {
  color: #8bb7ff;
}

body:not(.home-page) .btn-secondary {
  border-color: rgb(255 255 255 / 34%);
  color: var(--white);
}

body:not(.home-page) .btn-secondary:hover {
  border-color: #8bb7ff;
  background: var(--night-raised);
  color: var(--white);
}

body:not(.home-page) .panel,
body:not(.home-page) .status-panel,
body:not(.home-page) .contact-primary,
body:not(.home-page) .support-secondary,
body:not(.home-page) .status-banner,
body:not(.home-page) .location-layout.compact {
  border: 1px solid rgb(255 255 255 / 9%);
  background: var(--night-panel);
}

body:not(.home-page) .policy-boundary {
  border-color: rgb(255 255 255 / 12%);
  background: var(--night-raised);
  color: var(--night-text);
}

body:not(.home-page) .policy-boundary strong {
  color: var(--white);
}

body:not(.home-page) .policy-boundary p {
  color: var(--night-muted);
}

body:not(.home-page) .location-grid {
  border-color: rgb(255 255 255 / 12%);
  background: var(--night-raised);
}

body:not(.home-page) .location-grid .exact-point small,
body:not(.home-page) .location-grid > p {
  color: var(--night-muted);
}

body:not(.home-page) .location-grid > p strong {
  color: var(--white);
}

body:not(.home-page) .location-grid .public-grid span {
  border-color: rgb(255 255 255 / 16%);
}

body:not(.home-page) .principle-list,
body:not(.home-page) .policy-checklist,
body:not(.home-page) .prohibited-list,
body:not(.home-page) .release-channels,
body:not(.home-page) .faq,
body:not(.home-page) .notice-list,
body:not(.home-page) .support-topics,
body:not(.home-page) .tbl-scroll {
  border-color: rgb(255 255 255 / 18%);
}

body:not(.home-page) .principle-list article,
body:not(.home-page) .policy-checklist article,
body:not(.home-page) .prohibited-list article,
body:not(.home-page) .release-channels article,
body:not(.home-page) .faq details,
body:not(.home-page) .notice-item,
body:not(.home-page) .support-topics a,
body:not(.home-page) .support-links a {
  border-color: rgb(255 255 255 / 10%);
}

body:not(.home-page) .support-topics a,
body:not(.home-page) .support-links a,
body:not(.home-page) .notice-item .title,
body:not(.home-page) .faq summary {
  color: var(--night-text);
}

body:not(.home-page) .support-topics a:hover {
  background: var(--night-panel);
}

body:not(.home-page) .notice-item .date,
body:not(.home-page) .status-banner [style*="--muted"] {
  color: var(--night-muted) !important;
}

body:not(.home-page) .callout {
  background: rgb(30 111 239 / 12%);
  color: var(--night-text);
}

body:not(.home-page) .callout.warning {
  background: rgb(183 122 31 / 14%);
}

body:not(.home-page) .callout.danger {
  background: rgb(168 59 52 / 15%);
}

body:not(.home-page) .callout strong {
  color: var(--white);
}

body:not(.home-page) .tbl,
body:not(.home-page) .comparison {
  border-color: rgb(255 255 255 / 10%);
  background: var(--night-panel);
}

body:not(.home-page) .tbl th,
body:not(.home-page) .tbl td,
body:not(.home-page) .comparison-row > div {
  border-color: rgb(255 255 255 / 10%);
}

body:not(.home-page) .tbl th,
body:not(.home-page) .comparison-row.head {
  background: var(--night-raised);
  color: var(--white);
}

body:not(.home-page) .tbl caption,
body:not(.home-page) .contact-primary h2 a {
  color: var(--white);
}

body:not(.home-page) .dual-role-rail .role-lane {
  border-color: rgb(255 255 255 / 10%);
  background: var(--night-panel);
}

body:not(.home-page) .dual-role-rail .role-lane h2,
body:not(.home-page) .dual-role-rail .role-lane h3,
body:not(.home-page) .dual-role-rail .role-lane li span {
  color: var(--white);
}

body:not(.home-page) .dual-role-rail .role-lane li {
  border-color: rgb(255 255 255 / 10%);
}

body:not(.home-page) .agreement-node {
  box-shadow: 0 0 0 12px #0f1116;
}

body:not(.home-page) .content .journey-timeline {
  border-color: rgb(255 255 255 / 20%);
}

body:not(.home-page) .content .journey-timeline .timeline-step {
  border-color: rgb(255 255 255 / 10%);
}

body:not(.home-page) .content .journey-timeline .timeline-step::before {
  box-shadow: 0 0 0 5px #0f1116, 0 0 0 6px var(--signal);
}

body:not(.home-page) .content .journey-timeline h3 {
  color: var(--white);
}

body:not(.home-page) .content .journey-timeline p {
  color: var(--night-muted);
}

.doc,
.legal-page .doc {
  border-color: rgb(255 255 255 / 10%);
  background: var(--night-panel);
  box-shadow: 0 30px 80px rgb(0 0 0 / 18%);
}

.doc-head,
.doc th,
.doc td {
  border-color: rgb(255 255 255 / 10%);
}

.doc h1,
.doc h2,
.doc h3,
.doc strong {
  color: var(--white);
}

.doc p,
.doc li,
.doc td,
.doc dd,
.doc .meta {
  color: var(--night-muted);
}

.doc th {
  background: var(--night-raised);
  color: var(--white);
}

.doc .notice {
  background: rgb(183 122 31 / 14%);
  color: #e0bd82;
}

.role-steps li::before {
  border-color: rgb(255 255 255 / 16%);
  background: var(--night-raised);
  color: var(--white);
}

.processing-purpose {
  background: rgb(30 111 239 / 12%);
}

.error-page {
  padding-top: calc(var(--site-header-height) + 70px);
  background: #0f1116;
}

.error-page > div:last-child > p:not(.error-code) {
  color: var(--night-muted);
}

footer.site {
  background: var(--night-deep);
  color: rgb(255 255 255 / 56%);
}

footer.site .top,
footer.site .legal {
  border-color: rgb(255 255 255 / 10%);
}

@media (max-width: 760px) {
  :root {
    --site-header-height: 72px;
    --bottom-nav: 70px;
  }

  .nav .inner {
    min-height: 72px;
  }

  .links {
    top: var(--site-header-height);
    max-height: calc(100dvh - var(--site-header-height));
    border-color: rgb(255 255 255 / 10%);
    background: rgb(10 11 14 / 98%);
    box-shadow: 0 24px 44px rgb(0 0 0 / 32%);
  }

  .links > a {
    color: var(--night-text);
  }

  body:not(.home-page) .page-hero {
    min-height: calc(66svh - var(--site-header-height));
  }

  body:not(.home-page) .page-hero,
  body:not(.home-page) .content {
    padding-block: 64px;
  }

  .doc,
  .legal-page .doc {
    margin-top: 30px;
    border-color: rgb(255 255 255 / 8%);
    background: #101217;
  }
}