/* Option B "Label / Spec". One component carries the page: a row with a label column and a value column.
   Sections, the legal <dl>, and later a spec table (소재 / 사이즈 / 세탁) all use it. */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--sans); font-size: var(--text); line-height: 1.65; word-break: keep-all; overflow-wrap: anywhere; font-feature-settings: "tnum"; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--thread); outline-offset: 3px; }
h1, h2, p, dl, dd, ul { margin: 0; }
time, a[href^="mailto:"] { font-family: var(--mono); font-size: .9375em; letter-spacing: 0; }

.skip { position: absolute; left: -999px; top: 0; z-index: 1; padding: .75rem 1rem; background: var(--ink); color: var(--canvas); font-size: var(--field); letter-spacing: var(--track); }
.skip:focus { left: var(--gutter); top: var(--gutter); }

.wrap { width: min(100% - 2 * var(--gutter), var(--sheet)); margin-inline: auto; }

/* Top strip: inner pages only. On the home the large label below is the h1, so the strip steps aside. */
.top-in { display: flex; align-items: center; min-height: 3.5rem; padding-block: .5rem; border-bottom: 1px solid var(--ink); }
.top:has(.tag[aria-current="page"]) { display: none; }

/* The woven label: a ruled box, a dashed stitch inside it, the wordmark and its Korean reading. */
.tag { position: relative; display: inline-flex; flex-direction: column; align-items: center; color: var(--ink); text-decoration: none; text-transform: uppercase; border: 1px solid var(--ink); }
.tag::before { content: ""; position: absolute; inset: 5px; border: 1px dashed var(--thread); pointer-events: none; }
.tag-en { line-height: 1; font-weight: 640; letter-spacing: .26em; margin-right: -.26em; }
.tag-ko { line-height: 1; font-weight: 500; letter-spacing: .42em; margin-right: -.42em; }
.tag-l { margin: clamp(2.5rem, 7vw, 4.5rem) 0 clamp(2rem, 5vw, 3rem); padding: 1.85rem 2.4rem 1.65rem; gap: 1rem; font-size: clamp(1.75rem, 1.15rem + 2.6vw, 2.75rem); }
.tag-l .tag-ko { font-size: .8125rem; }
.tag-s { flex-direction: row; align-items: baseline; gap: .9rem; padding: .6rem .9rem .55rem; font-size: .875rem; }
.tag-s .tag-ko { font-size: .75rem; letter-spacing: .3em; margin-right: -.3em; }

/* Rows */
.rows { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.rows + .rows { border-top: 0; }
.row, .rec > div { display: grid; grid-template-columns: var(--label-col) minmax(0, 1fr); column-gap: 1.5rem; padding-block: var(--row-y); border-top: 1px solid var(--rule); }
.rows > :first-child, .rec > div:first-child { border-top: 0; }
.field { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .7rem; padding-top: .2rem; }
.field h2, dt { font-size: var(--field); font-weight: 500; letter-spacing: var(--track); line-height: 1.6; }
dt { color: var(--ink-2); padding-top: .2rem; }
.code { font-family: var(--mono); font-size: var(--code); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.val > * + * { margin-top: .9rem; }

.row-lede .field { padding-top: .55rem; }
.lede { font-size: var(--text-xl); line-height: 1.4; font-weight: 450; max-width: 28em; text-wrap: pretty; }
.statement { font-size: var(--text-lg); line-height: 1.6; max-width: 30em; text-wrap: pretty; }

/* Footer: the second label, the one with the registered facts. */
.foot { margin-top: clamp(3rem, 8vw, 5rem); padding-bottom: 3rem; }
.foot-in { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.row-biz { border-top: 0; }
.biz { display: grid; }
.biz > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); column-gap: 1rem; padding-block: .5rem; border-top: 1px solid var(--rule); }
.biz > div:first-child { border-top: 0; padding-top: 0; }
.biz > div:last-child { padding-bottom: 0; }
.biz dt { padding-top: .15rem; }
.copy { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .25rem 1.5rem; border-top: 1px solid var(--rule); padding-block: .1rem; font-size: var(--field); letter-spacing: var(--track); color: var(--ink-2); }
.copy span { font-family: var(--mono); letter-spacing: .02em; }
.legal-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 500; text-decoration-thickness: 1px; }

/* Documents: privacy, 404 */
.doc-head { padding-block: clamp(2.25rem, 6vw, 3.75rem) clamp(1.5rem, 4vw, 2.25rem); }
.doc-head h1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem); line-height: 1.3; font-weight: 600; letter-spacing: -.005em; margin-bottom: .75rem; text-wrap: balance; }
.doc-head .lede { font-size: var(--text-lg); font-weight: 400; line-height: 1.6; max-width: 34em; }
.doc ul { padding-left: 1.1rem; }
.doc li + li { margin-top: .35rem; }
.doc table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: .55rem 1rem .55rem 0; line-height: 1.5; }
.doc th { font-size: var(--field); font-weight: 500; letter-spacing: var(--track); color: var(--ink-2); padding-top: 0; }
.doc td { border-top: 1px solid var(--rule); }
.doc table:not(:last-child) tbody tr:last-child td { border-bottom: 1px solid var(--rule); }

@media (max-width: 44rem) {
  :root { --row-y: 1.1rem; }
  .row { grid-template-columns: minmax(0, 1fr); row-gap: .45rem; }
  .row-lede .field { padding-top: 0; }
  .rec > div, .biz > div { grid-template-columns: 9rem minmax(0, 1fr); column-gap: 1rem; }
  .rec > div { padding-block: .75rem; }
  .copy { padding-bottom: .35rem; }
  .doc thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .doc table, .doc tbody, .doc tr, .doc td { display: block; table-layout: auto; }
  .doc tr { border-top: 1px solid var(--rule); padding-block: .6rem; }
  .doc table:not(:last-child) tbody tr:last-child { border-bottom: 1px solid var(--rule); }
  .doc td { border: 0; padding: .15rem 0; }
  .doc td::before { content: attr(data-label); display: block; font-size: var(--field); font-weight: 500; letter-spacing: var(--track); color: var(--ink-2); }
  .doc td + td { margin-top: .5rem; }
}