/* layout.css: page measure, 12-column grid, sections, header, mobile nav, footer.
   Spacing between sections is owned by .section only; components never add outer margins. */

/* Measure */
.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--side));
  margin-inline: auto;
  padding-inline: var(--side);
}

/* 12-column grid. Children span the full row until 56em, then take their .span-N. */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-6);
}
.grid > * { grid-column: 1 / -1; min-width: 0; }
/* Boxed objects in a grid row keep their own height instead of stretching to the tallest neighbour. */
:is(.grid, .split, .labeled) > :is(.callout, .diagram, figure, .table-wrap, .template-block, .ko-summary, aside) { align-self: start; }
/* Grid and flex children may shrink below their longest word (long Korean runs, URLs). */
:is(.labeled, .split, .columns, .agent__cols, .ko-summary, .site-footer__grid) > * { min-width: 0; }
@media (min-width: 56em) {
  .grid > .span-3 { grid-column: span 3; }
  .grid > .span-4 { grid-column: span 4; }
  .grid > .span-5 { grid-column: span 5; }
  .grid > .span-6 { grid-column: span 6; }
  .grid > .span-7 { grid-column: span 7; }
  .grid > .span-8 { grid-column: span 8; }
  .grid > .span-9 { grid-column: span 9; }
  .grid > .span-12 { grid-column: 1 / -1; }
}

/* Form-row layout: heading in a 4-column label column, content in the other 8 (항목 | 내용). */
.labeled { display: grid; row-gap: var(--space-4); }
.labeled > :first-child { margin-bottom: 0; }
@media (min-width: 56em) {
  .labeled { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .labeled > :first-child { grid-column: 1 / span 4; padding-right: var(--space-5); }
  .labeled > :not(:first-child) { grid-column: 5 / -1; }
  .labeled--sticky > :first-child {
    position: sticky;
    top: calc(var(--header-h) + var(--space-5));
    align-self: start;
  }
}

/* Two equal columns, and three ruled text columns (not cards). */
.split { display: grid; gap: var(--space-6) var(--gutter); }
@media (min-width: 56em) { .split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.columns { display: grid; gap: var(--space-5) var(--gutter); padding: 0; margin: 0; list-style: none; }
.columns > * { border-top: var(--rule-w) solid var(--rule-strong); padding-top: var(--space-4); margin: 0; }
@media (min-width: 48em) { .columns { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 48em) { .columns--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.columns .status { margin-bottom: var(--space-2); }
.columns h3 { font-size: var(--step-1); margin-bottom: var(--space-2); }
.columns p:last-child { margin-bottom: 0; }

/* Sections. A ledger hairline (measure-wide, not full-bleed) separates consecutive sections. */
.section { padding-block: var(--section-pad); }
.section + .section {
  background-image: linear-gradient(var(--rule), var(--rule));
  background-size: min(calc(100% - 2 * var(--side)), var(--max)) 1px;
  background-position: top center;
  background-repeat: no-repeat;
}
.section--tight { padding-block: calc(var(--section-pad) * 0.6); }
.section--flush-top { padding-top: 0; }
.section-head { max-width: 46rem; margin-bottom: var(--space-6); }
.section-head > :last-child { margin-bottom: 0; }

/* Page title block on inner pages; closed by a double rule like a document's title block. */
.page-head { padding-top: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.page-head > .wrap { padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.page-head > .wrap::after,
.hero > .wrap::after {
  content: "";
  display: block;
  border-top: 3px double var(--rule-strong);
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.page-head h1 { max-width: 22ch; }
.page-head .lead { max-width: 60ch; margin-bottom: 0; }
.page-head > .wrap > * + :not(.lead) { margin-top: var(--space-5); }
.page-head + .section { padding-top: calc(var(--section-pad) * 0.75); }
.page-head + .section, .hero + .section { background-image: none; }

/* Header: solid paper strip with a hairline. Sticky only where it cannot eat the viewport
   (wide and tall enough; WCAG 1.4.10 and 2.4.11). The menu collapses below 60em when JS runs. */
.site-header {
  position: relative;
  z-index: 50;
  background: var(--paper);
  border-bottom: var(--rule-w) solid var(--rule);
}
@media (min-width: 48em) and (min-height: 30em) {
  .site-header { position: sticky; top: 0; }
}
.site-header__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  min-height: var(--header-h);
  padding-block: var(--space-3);
}
.brand {
  display: inline-grid;
  grid-template-columns: auto auto;
  column-gap: var(--space-3);
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.2;
}
.brand__mark { width: 2rem; height: 2rem; grid-row: span 2; }
.brand__mark .mark-bg { fill: var(--green); }
.brand__mark .mark-fg { stroke: var(--on-green); }
.brand__mark .mark-dot { fill: var(--on-green); }
.brand__name { font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.005em; }
.brand__by { font-size: 0.8125rem; color: var(--muted); }

/* The nav holds the main list and the language switch side by side (stacked in the mobile menu). */
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); }
.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__list li { margin: 0; }

/* Language switch: "English | 한국어"; the current language is plain ink, the other a link. */
.lang-switch { display: flex; margin: 0; padding: 0; list-style: none; font-size: 0.875rem; }
.lang-switch li { margin: 0; }
.lang-switch li + li { border-left: var(--rule-w) solid var(--rule-strong); }
.lang-switch a { display: inline-block; padding: var(--space-2) var(--space-3); color: var(--green); text-decoration: none; }
.lang-switch li:first-child a { padding-left: 0; }
.lang-switch a:hover { text-decoration: underline; }
.lang-switch a[aria-current] { color: var(--ink); font-weight: 600; }
.site-nav__list a:not(.btn) {
  display: inline-block;
  padding-block: var(--space-2);
  color: var(--ink-2);
  font-size: 0.9375rem;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.site-nav__list a:not(.btn):hover { color: var(--ink); border-bottom-color: var(--rule-strong); }
.site-nav__list a[aria-current]:not(.btn) { color: var(--ink); font-weight: 600; border-bottom-color: var(--green); }
.site-nav .btn[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: 0 var(--space-4);
  font: inherit;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: var(--rule-w) solid var(--rule-strong);
  border-radius: var(--radius-btn);
  cursor: pointer;
}
.nav-toggle__bars { width: 1rem; height: 0.75rem; border-block: 2px solid currentColor; position: relative; }
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1px); border-top: 2px solid currentColor; }
.nav-toggle[aria-expanded="true"] { background: var(--green-wash); border-color: var(--green); }

@media (max-width: 59.99em) {
  .js-nav .nav-toggle:not([hidden]) { display: inline-flex; }
  .js-nav .site-nav { display: none; flex-basis: 100%; }
  .js-nav.is-open .site-nav { display: block; }
  .js-nav .lang-switch { padding-bottom: var(--space-3); font-size: var(--step-0); }
  .js-nav .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-block: var(--space-2) var(--space-4);
  }
  .js-nav .site-nav__list a:not(.btn) {
    display: block;
    padding-block: var(--space-3);
    border-bottom: var(--rule-w) solid var(--rule);
    font-size: var(--step-0);
  }
  .js-nav .site-nav__list a[aria-current]:not(.btn) { border-bottom-color: var(--rule); box-shadow: inset 3px 0 0 var(--green); padding-left: var(--space-3); }
  .js-nav .site-nav__cta { margin-top: var(--space-4); }
  .js-nav .site-nav__cta .btn { width: 100%; }
}

/* Footer: company facts, link columns, bilingual disclaimer, trademark line. */
.site-footer {
  padding-block: var(--space-4) var(--space-6);
  color: var(--ink-2);
  font-size: var(--step--1);
}
.site-footer > .wrap::before {
  content: "";
  display: block;
  border-top: 3px double var(--rule-strong);
  margin-bottom: var(--space-7);
}
.site-footer a { color: var(--ink); }
.site-footer__grid { display: grid; gap: var(--space-6) var(--gutter); }
@media (min-width: 56em) { .site-footer__grid { grid-template-columns: 5fr 7fr; } }
.site-footer__title { font-size: var(--step-0); font-weight: 600; margin: 0 0 var(--space-3); color: var(--ink); }
.site-footer__nav { display: grid; gap: var(--space-5) var(--gutter); grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); }
.site-footer__nav ul { list-style: none; margin: 0; padding: 0; }
.site-footer__statement { margin: var(--space-4) 0 0; max-width: 46ch; }
.site-footer__nav li + li { margin-top: var(--space-2); }
.site-footer__nav a { text-decoration: none; }
.site-footer__nav a:hover { text-decoration: underline; }
.site-footer__legal {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--rule-w) solid var(--rule);
  color: var(--muted);
  max-width: 52rem;
}
.site-footer__legal p { margin-bottom: var(--space-3); }
.site-footer__legal strong { color: var(--ink-2); }