/* ═══════════════════════════════════════════════════════════
   shared/system.css — 범용 컴포넌트

   토큰은 여기 «없다». tokens.css 가 갖는다(wf style 이 브랜드 색에서 파생).
   이 파일은 그 토큰을 쓰는 마크업 계약이다.

   ⚠️ 이 파일의 «복사본»(sites/<slug>/site/assets/system.css)을 직접 고치지 않는다.
      여기를 고치고 wf 가 복사한다. wf qa 가 해시를 비교해 어긋나면 실패로 센다.

   ⚠️ 이 고객사만의 연출은 sites/<slug>/site/assets/local.css 에 쓴다.
      두 고객사에서 같은 것이 나오면 그때 여기로 올린다(승격 규칙).

   유일식품 system.css 898줄에서 공용분을 뽑았다. 색 이름은 팩토리 어휘로 갈았고
   (green→brand · forest→dark · mint→tint), 그 고객사 고유 부품
   (org-* 계통도 · bar-* 실증 그래프 · proc/step · evid · yt · plx/wipe)은 두고 왔다.
   ═══════════════════════════════════════════════════════════ */

/* ── 바탕 ────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* word-break:keep-all 은 한글에서 필수다. 기본값은 낱글자 단위로 끊어서
   「사료첨가」/「제」 같은 줄바꿈이 나온다. overflow-wrap 은 긴 URL 만 받는다. */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
  font-family: var(--ff-body);
  font-weight: var(--fw-body);
  font-size: var(--t4);
  line-height: var(--lh-body);
  letter-spacing: -.011em;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--ff-head);
  font-weight: var(--fw-head);
  letter-spacing: var(--ls-head);
  line-height: var(--lh-head);
}
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gut); }

/* ── 화면에서만 감추기 ────────────────────────────────────
   제목을 «지우지» 않고 감춘다. h2 를 지우면 그 아래 h3 가 걸릴 상위 제목이
   없어져 문서 개요가 앞 섹션에 붙는다. 눈에는 안 보이되 구조에는 남긴다. */
.h-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ── 반복 영역 건너뛰기 (KWCAG 6.4.1) ────────────────────
   ⚠️ .h-sr 을 재활용하면 안 된다 — 그건 초점을 받아도 계속 숨는다.
      여기서는 화면 밖으로 «밀어» 두고 초점을 받으면 제자리로 온다.
   ⚠️ 1px 로 줄이는 흔한 수법도 쓰지 않는다. 접근성 계측이 그 상태를
      「24×24 미만 조작 요소」로 잡아 6.1.3 이 새로 부적합이 된다.
   ⚠️ outline:none 을 주지 말 것 — 초점 표시는 UA 기본에 맡긴다(6.1.2). */
.skip {
  position: absolute; left: var(--s2); top: 0; z-index: 60;
  display: inline-block; padding: 10px 18px; min-width: 24px; min-height: 24px;
  /* --btn-bg 를 쓴다. --brand 를 쓰면 고객사가 --btn-bg 만 어둡게 덮었을 때
     (중간 명도 브랜드의 탈출구다) 이 버튼만 검사 밖으로 빠진다. */
  background: var(--btn-bg); color: var(--btn-ink);
  font-size: var(--t3); font-weight: 600; white-space: nowrap;
  border-radius: 0 0 var(--r1) var(--r1);
  transform: translateY(-140%);
  transition: transform var(--dur) var(--ease);
}
.skip:focus { transform: translateY(0); }
/* nav 가 sticky 라 앵커로 뛰면 본문 첫 줄이 헤더 밑에 깔린다 */
.skip-t { scroll-margin-top: 66px; }

/* ── 공통 유틸 ────────────────────────────────────────────
   .micro 는 한글 보조 라벨과 단위가 섞인다. 모노 대문자에 자간을 크게 주면
   한글이 「급 여 후」로 흩어지므로 .03em 까지만 준다. */
.micro {
  font-family: var(--mono); font-size: var(--t1);
  letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3);
}
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.lead { font-size: var(--t5); line-height: 1.5; color: var(--ink-2); max-width: 52ch; }
.note { font-size: var(--t2); color: var(--ink-3); line-height: 1.55; }
.lnk { color: var(--link); border-bottom: 1px solid var(--tint); }
.lnk:hover { border-bottom-color: var(--link); }
.hl { color: var(--brand-d); font-weight: 600; }
/* 각주 번호 */
.fn {
  font-family: var(--mono); font-size: .62em; vertical-align: super;
  color: var(--brand-d); margin-left: 1px;
}
/* 출처 — 수치에는 각주 출처를 반드시 붙인다 */
.src {
  margin-top: var(--s3); padding-top: var(--s2);
  border-top: 1px solid var(--rule); display: grid; gap: 5px;
}
.src li { font-size: var(--t2); color: var(--ink-3); line-height: 1.5; }
.src b { font-family: var(--mono); color: var(--brand-d); font-weight: 400; margin-right: 5px; }

.mt1 { margin-top: var(--s1); } .mt2 { margin-top: var(--s2); }
.mt3 { margin-top: var(--s3); } .mt4 { margin-top: var(--s4); }
.mt5 { margin-top: var(--s5); }

/* ── 섹션 골격 ────────────────────────────────────────────
   ⚠️ 배경 순서는 페이지마다 «다르게» 짠다. 전 페이지가 같은 순서면 단어만
      바뀐 같은 페이지로 읽힌다.
   ⚠️ .tint 와 .band 를 붙여 놓지 말 것 — 두 섹션이 한 덩어리로 보인다.
      (wf style 의 「섹션 바탕 구별」 검사가 토큰 쪽은 막지만, 배치는 사람이 짠다.) */
section { padding-block: var(--s6); }
/* 태그가 아니라 클래스에 건다. 섹션 말고 카드 안 띠·밴드에도 같은 바탕이
   필요한데 section 으로 묶어 두면 그때 바탕은 안 오고 «글자색만» 따라와
   흰 바탕에 흰 글자가 된다. */
.tint { background: var(--paper-2); }
.band { background: var(--band); }
.dark { background: var(--dark); color: var(--on-dark); }

/* 다크 섹션은 잉크를 통째로 갈아끼운다. --ink-3 는 밝은 바탕 4종에서만
   AA 를 맞춘 값이라 어두운 바탕에 그대로 얹으면 거의 안 보인다. */
.dark .lead, .dark .note, .dark .micro, .dark .src li { color: var(--on-dark-2); }
.dark h1, .dark h2, .dark h3, .dark h4, .dark b, .dark strong { color: var(--on-dark); }
.dark .eyebrow { color: var(--brand-l); }
.dark .lnk { color: var(--brand-l); border-bottom-color: var(--rule-dark); }
.dark .hl, .dark .fn, .dark .src b { color: var(--brand-l); }
.dark .src { border-color: var(--rule-dark); }

/* 다크 위 흰 알파는 브랜드와 무관해서 토큰으로 파생하지 않는다 */
.dark { --rule-dark: rgba(255,255,255,.16); }

/* 라벨 → 제목 → 리드가 한 줄기로 내려온다. 2단 그리드(라벨칸 + 본문칸)는
   라벨을 제목에서 떼어놓기만 하고 왼쪽 칸이 늘 비어, 제목이 화면 한가운데서
   시작하는 것처럼 보인다. */
.sec-head {
  padding-bottom: var(--s4); border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s5);
}
.dark .sec-head { border-color: var(--rule-dark); }
.sec-head h2 { font-size: var(--t8); }
.sec-head .lead { margin-top: var(--s2); }
.sec-head > .eyebrow { margin-bottom: var(--s2); }

/* 섹션 인덱스 라벨 — 번호는 모노 칩, 이름은 본문 서체.
   작은 모노 대문자 한 줄로 두면 36~60px 짜리 섹션 제목 옆에서 짝이 안 맞는다.
   제목 «바로 위»에 둔다 — 100px 넘게 떨어지면 한 쌍으로 안 읽힌다. */
.eyebrow {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 9px;
  font-size: var(--t-label); font-weight: 700; letter-spacing: -.015em;
  color: var(--brand-d); line-height: 1.3;
}
.eyebrow b {
  font-family: var(--mono); font-size: var(--t2); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.2;
  color: var(--brand-d); background: var(--tint);
  border-radius: var(--r1); padding: 5px 10px;
}
.dark .eyebrow b { color: var(--on-dark); background: rgba(255,255,255,.13); }

/* ── 헤더 ────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow var(--dur) var(--ease);
}
.nav.stuck { box-shadow: var(--sh1); }
.nav-in { display: flex; align-items: center; gap: var(--s4); height: 66px; }
.mark { display: flex; align-items: center; gap: 10px; }
.mark-tx b {
  display: block; font-family: var(--ff-head); font-size: var(--t5);
  font-weight: 700; letter-spacing: -.045em; line-height: 1.1;
}
.mark-tx span {
  display: block; font-family: var(--mono); font-size: var(--t1);
  letter-spacing: .18em; color: var(--brand-d); line-height: 1.15;
}
/* 상단 메뉴는 --ink 다. --ink-2 로 두면 크림 계열 종이 위에서 대비가 낮다. */
.nav-links {
  display: flex; gap: var(--s3); font-size: var(--t3);
  font-weight: 500; color: var(--ink); flex: 1;
}
.nav-links a {
  white-space: nowrap; padding: 5px 0; border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* 현재 페이지 표시는 aria-current 가 정본이다 — 클래스를 따로 안 붙여도 되고
   화면낭독기가 같은 사실을 읽는다. .cur 는 옛 관습이라 같이 받아 준다.
   ⚠️ 한쪽만 두면 마크업과 스타일이 갈린다 — ISO 컨설팅이 실제로 그 상태였다.
      aria-current 를 6장에 달아 뒀는데 CSS 는 .cur 만 봐서 표시가 안 나왔다. */
.nav-links a:hover,
.nav-links a.cur,
.nav-links a[aria-current="page"] { color: var(--brand-d); border-bottom-color: var(--brand); }
.nav-cta { display: flex; gap: var(--s1); align-items: center; }

.burger {
  display: none; width: 40px; height: 40px;
  border: 1px solid var(--rule-2); background: var(--card);
  border-radius: var(--r1); align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.burger i {
  display: block; width: 16px; height: 1.5px; background: var(--ink);
  position: relative; transition: var(--dur);
}
.burger i::before, .burger i::after {
  content: ''; position: absolute; left: 0; width: 16px; height: 1.5px;
  background: var(--ink); transition: var(--dur);
}
.burger i::before { top: -5px; }
.burger i::after { top: 5px; }
.nav.open .burger i { background: transparent; }
.nav.open .burger i::before { top: 0; transform: rotate(45deg); }
.nav.open .burger i::after { top: 0; transform: rotate(-45deg); }

/* ── 버튼 ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 7px; font: inherit;
  font-size: var(--t3); font-weight: 500; padding: 11px 20px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* --btn-bg / --btn-ink 는 wf style 이 실측해서 짝지은 값이다. 여기서 색을
   바꾸면 그 실측이 무효가 된다 — 고칠 일이 있으면 tokens.css 쪽을 고친다. */
.btn-primary { background: var(--btn-bg); color: var(--btn-ink); box-shadow: var(--sh1); }
.btn-primary:hover { background: var(--brand-d); color: var(--paper); box-shadow: var(--sh2); }
.btn-ghost { border-color: var(--rule-2); color: var(--ink); background: var(--card); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-d); }
.btn-lg { font-size: var(--t4); padding: 14px 26px; }
.dark .btn-ghost { color: var(--on-dark); border-color: var(--rule-dark); background: transparent; }
.dark .btn-ghost:hover { border-color: var(--on-dark); }
/* 다크 위 1차 버튼은 밝은 브랜드에 어두운 글자다 — 어두운 바탕에 어두운
   버튼을 얹으면 버튼이 사라진다. */
.dark .btn-primary { background: var(--brand-l); color: var(--dark); }

/* ── 카드 ────────────────────────────────────────────────── */
.cards { display: grid; gap: var(--s3); }
.cards.c2 { grid-template-columns: 1fr 1fr; }
.cards.c3 { grid-template-columns: repeat(3, 1fr); }
.cards.c4 { grid-template-columns: repeat(4, 1fr); }

/* flex column 인 이유 — 그리드가 맞춰주는 건 «상자» 높이뿐이다. 본문 길이가
   카드마다 달라서 칩 줄과 링크가 카드별로 다른 높이에 앉으면 바닥선이 어긋나
   정렬이 안 맞아 보인다. 아래 margin-top:auto 가 남는 공간을 먹는다. */
.card {
  background: var(--card); border: var(--bw) solid var(--rule);
  border-radius: var(--r2); padding: var(--s3); box-shadow: var(--sh1);
  display: flex; flex-direction: column;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
a.card:hover, .card.lift:hover {
  box-shadow: var(--sh2); transform: translateY(-3px); border-color: var(--rule-2);
}
.dark .card { background: var(--dark-2); border-color: var(--rule-dark); box-shadow: none; }
.dark .card p { color: var(--on-dark-2); }

/* 다크 섹션 위 밝은 카드 — 표·수치가 빽빽할 때 쓴다. 어두운 글자 + 밝은
   배경이 숫자 가독성이 가장 좋다. .dark 의 흰 글자 규칙을 이 안에서만 되돌린다.
   ⚠️ 나란한 두 카드는 둘 다 .light 이거나 둘 다 아니어야 한다 —
      한쪽만 밝으면 실수로 보인다. */
.dark .card.light {
  background: var(--card); border-color: transparent; box-shadow: var(--sh3); color: var(--ink);
}
.dark .card.light h2, .dark .card.light h3, .dark .card.light h4,
.dark .card.light b, .dark .card.light strong { color: var(--ink); }
.dark .card.light p, .dark .card.light .lead { color: var(--ink-2); }
.dark .card.light .note, .dark .card.light .micro, .dark .card.light .src li { color: var(--ink-3); }
.dark .card.light .hl, .dark .card.light .fn, .dark .card.light .src b { color: var(--brand-d); }
.dark .card.light .src, .dark .card.light .card-meta { border-color: var(--rule); }
.dark .card.light .chip { color: var(--brand-d); background: var(--tint); }

/* 카드 분류 라벨. 작은 모노로 두면 제목에 묻힌다 — 카드에서 가장 먼저
   읽혀야 할 것이라 본문 서체로 되돌린다. */
.card-no {
  font-family: var(--ff-body); font-size: var(--t2); font-weight: 600;
  letter-spacing: .01em; color: var(--brand-d); margin-bottom: var(--s1);
  text-transform: none;
}
.dark .card-no { color: var(--brand-l); }

/* ⚠️ 태그는 크기가 아니라 «문서 계층»이 정한다 — 섹션 제목이 h2 이므로
      카드 제목은 h3 다. 크기로 골라 h2 밑에 h4 를 두면 계층이 끊긴다.
   ⚠️ .card 안에 h4 를 새로 쓰지 말 것. */
.card h2, .card h3 { font-size: var(--t5); }
.card h3.lg { font-size: var(--t6); }
.card h4 { font-size: var(--t5); }
.card p { margin-top: var(--s2); font-size: var(--t3); color: var(--ink-2); line-height: 1.6; }

.card-meta {
  margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 6px;
}
.dark .card-meta { border-color: var(--rule-dark); }
.card-link { margin-top: var(--s3); }
/* 하단 고정은 «맨 끝»에 오는 경우로만 좁힌다. 전부에 걸면 칩 줄 뒤에 접기
   블록이 더 오는 카드에서 칩 줄이 공간을 다 먹고 뒤 내용을 카드 밖으로 민다. */
.card > .card-meta:last-child,
.card > .card-link:last-child { margin-top: auto; }
.card > .card-meta:has(+ .card-link:last-child) { margin-top: auto; }
.card > .card-meta + .card-link:last-child { margin-top: var(--s3); }
/* 인라인 버튼이라 flex 아이템이 되면 폭이 늘어난다 — 원래 폭을 지킨다 */
.card > .card-link { align-self: flex-start; }

/* 칩 — 대부분 한글 문장이라 본문 서체다 */
.chip {
  font-family: var(--ff-body); font-size: var(--t2); font-weight: 500;
  letter-spacing: -.005em; color: var(--brand-d); background: var(--tint);
  border-radius: var(--r-pill); padding: 5px 12px;
}
.dark .chip { color: var(--on-dark); background: rgba(255,255,255,.08); }

@media (max-width: 820px) { .cards.c2, .cards.c3, .cards.c4 { grid-template-columns: 1fr; } }
/* 표가 든 2단 카드는 더 일찍 접는다 — 820px 바로 위(노트북·창모드)에서
   카드 폭이 460px 까지 줄고 그 안의 표는 300px 도 안 남는다. */
@media (max-width: 1100px) { .cards.c2.stack-l { grid-template-columns: 1fr; } }

/* ── 수치 타일 ────────────────────────────────────────────── */
.figs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.fig {
  padding: var(--s3); background: var(--card); border: var(--bw) solid var(--rule);
  border-radius: var(--r2); box-shadow: var(--sh1);
}
/* 수치는 모노 + tabular-nums 다. 자리가 흔들리면 세로로 비교가 안 된다. */
.fig-n {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: var(--t7); font-weight: 600; letter-spacing: -.04em; line-height: 1;
  display: flex; align-items: baseline; gap: 3px; color: var(--brand-d);
}
.fig-n u { text-decoration: none; font-size: var(--t3); color: var(--ink-3); }
.fig-l { margin-top: var(--s2); font-size: var(--t3); color: var(--ink-2); line-height: 1.45; }
/* 다크 위 수치 타일 — 상단 액센트 3px 으로 배경과 분리한다 */
.dark .fig {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14);
  box-shadow: none; position: relative; overflow: hidden;
}
.dark .fig::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--brand-l);
}
.dark .fig-n { color: var(--brand-l); }
.dark .fig-n u, .dark .fig-l { color: var(--on-dark-2); }
@media (max-width: 820px) { .figs { grid-template-columns: 1fr 1fr; } }
/* 2열이면 한 칸이 123px 다. 「5인 이상 50인 미만 사업장으로 확대 적용」 같은
   긴 이름표가 8자씩 3줄로 쪼개진다(2026-08-21 실측). 숫자는 커서 읽히지만
   그 «뜻» 을 적은 줄이 안 읽히면 숫자만 남는다. */
@media (max-width: 480px) { .figs { grid-template-columns: 1fr; } }

/* ── 표 ──────────────────────────────────────────────────── */
.tbl { width: 100%; border-collapse: collapse; font-size: var(--t3); }
.tbl th, .tbl td {
  text-align: left; padding: 14px 14px 14px 0;
  border-bottom: 1px solid var(--rule); vertical-align: top;
}
/* 표에 이름(caption)과 머리셀(th)을 넣으면서 «모양은 그대로» 두는 두 줄이다.
   ① caption 은 화면낭독기 전용으로 숨긴다 — 표 바로 위에 제목이 이미 보인다.
   ② tbody 의 th 는 UA 기본이 굵은 글씨다. kv 표의 첫 칸을 th 로 바꾸면
      이 한 줄이 없을 때 그 표들이 전부 굵어진다. */
.tbl caption {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.tbl tbody th { font-weight: inherit; }
/* 표 머리는 대부분 한글이다. 모노 대문자로 두면 열 이름이 먼저 안 읽힌다. */
.tbl thead th {
  font-family: var(--ff-body); font-size: var(--t2); letter-spacing: .01em;
  text-transform: none; color: var(--ink-3); font-weight: 500;
  border-bottom: 1px solid var(--rule-2);
}
.tbl tbody tr { transition: background var(--dur) var(--ease); }
.tbl tbody tr:hover { background: var(--band); }
.tbl td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tbl td.hi { color: var(--brand-d); font-weight: 600; }
.dark .tbl th, .dark .tbl td { border-color: var(--rule-dark); }
.dark .tbl tbody tr:hover { background: var(--dark-2); }

/* 항목/값 두 칸짜리 표 */
.tbl.kv th, .tbl.kv td:first-child { color: var(--ink-2); padding-right: var(--s2); }
.tbl.kv td:last-child {
  text-align: right; padding-right: 0;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.dark .tbl.kv th, .dark .tbl.kv td:first-child { color: var(--on-dark-2); }
.dark .tbl.kv td:last-child { color: var(--on-dark); }

.tbl .w0 { width: 72px; } .tbl .w1 { width: 96px; }
.tbl .w2 { width: 180px; } .tbl .w3 { width: 120px; }
/* 폭 캡 — 표는 컨테이너를 꽉 채울 이유가 없다. 넓히면 칸 하나가 남는 폭을
   다 먹고 행마다 수백 px 이 비어, 읽는 눈이 짝을 못 잇는다. */
.tbl.tight { max-width: min(100%, 720px); }
/* 좁힌 표 아래 각주도 같이 좁힌다 — 안 그러면 글만 혼자 폭 전체로 퍼져 축이 어긋난다 */
.tbl.tight + .note { max-width: min(100%, 720px); }
@media (max-width: 700px) { .tbl .hide-s { display: none; } }

/* ── 이미지 프레임 ────────────────────────────────────────── */
.frame {
  position: relative; overflow: hidden; background: var(--paper-2);
  aspect-ratio: 3/2; border-radius: var(--r2);
}
.frame.a11 { aspect-ratio: 1/1; }
.frame.a43 { aspect-ratio: 4/3; }
/* 3단 카드에서 4:3 은 사진이 너무 높아 제목이 첫 화면 밖으로 밀린다 */
.frame.a16 { aspect-ratio: 16/9; }
.frame.a21 { aspect-ratio: 2/1; }
/* 서브페이지 히어로 띠 — 2:1 은 넓은 폭에서 사진만 덩그러니 놓여
   「자리 채우기」로 읽힌다. 12/5 로 낮춰 띠로 만든다. */
.frame.a24 { aspect-ratio: 12/5; }
/* 영상 임베드. iframe 은 object-fit 이 안 먹으므로 폭·높이 100% 로 채운다.
   본문 폭을 꽉 채우면 화면을 너무 먹어서 920px 로 묶고 가운데 정렬한다 —
   좁은 화면에서는 max-width 가 자동으로 풀린다(별도 미디어쿼리 불필요). */
.frame.a169 { aspect-ratio: 16/9; background: var(--ink); max-width: 920px; margin-inline: auto; }
.frame.a169 iframe { width: 100%; height: 100%; border: 0; display: block; }
.frame.a169 + .note { max-width: 920px; margin-inline: auto; }
.frame.fill { aspect-ratio: auto; height: 100%; }
.frame img, .frame svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.frame-cap { margin-top: var(--s1); font-size: var(--t2); color: var(--ink-3); }
.dark .frame-cap { color: var(--on-dark-2); }

/* 사진 위 텍스트용 스크림.
   ⚠️ 농도를 낮추지 말 것. 옅게 하면 사진이 밝게 빛나는 자리에서 캡션이
      4.5:1 아래로 떨어진다. 글자색은 실측으로 묶인 값이라 건드릴 수 없으니
      어둠막으로 맞춘다. */
.frame.scrim::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,.82) 100%);
}
.frame-tx { position: absolute; inset: auto 0 0 0; z-index: 2; padding: var(--s3); color: #fff; }
/* 사진 위 락업은 <p class="frame-h"> 다. h3 로 두면 계층을 끊고, 의미로도
   문서 섹션이 아니라 사진 캡션이라 제목 목록에 낄 자리가 아니다. */
.frame-tx h3, .frame-tx .frame-h { color: #fff; }
.frame-tx .frame-h {
  font-family: var(--ff-head); font-weight: var(--fw-head);
  letter-spacing: var(--ls-head); line-height: var(--lh-head); font-size: 1.17em;
}
/* .note 는 자기 color 를 들고 오므로 상속으로는 안 밝아진다 */
.frame-tx .note { color: rgba(255,255,255,.82); margin-top: 6px; }
.frame-tx .mono { color: #fff; }
.frame.a21 .frame-tx { padding: var(--s4); }
.frame.a21 .frame-tx h3, .frame.a21 .frame-tx .frame-h { font-size: var(--t7); }
/* 본문 밴드용 캡션 오버레이 — 히어로와 «급»을 나눈다. 같은 무게의 오버레이를
   여러 군데 쓰면 도구가 벽지가 된다. 여기는 캡션 한 줄만 얹는다.
   ⚠️ 작은 사진에는 글자를 얹지 않는다. 좁은 프레임에서는 텍스트가 높이의
      1/4 을 먹어 사진이 캡션 받침대가 된다 — 본문 폭을 다 쓰는 밴드에만 쓴다. */
.frame-tx.tx-cap { padding: var(--s3); }
.frame-tx.tx-cap p { font-size: var(--t3); font-weight: 500; color: #fff; }
.frame-tx.tx-cap .mono { color: #fff; }
@media (max-width: 820px) {
  .frame.a21 .frame-tx { padding: var(--s3); }
  .frame.a21 .frame-tx h3, .frame.a21 .frame-tx .frame-h { font-size: var(--t6); }
}

/* ── 히어로 ──────────────────────────────────────────────── */
.hero { padding-block: var(--s5); position: relative; overflow: hidden; }
.hero > * { position: relative; z-index: 1; }
.hero h1 { font-size: var(--t8); max-width: 18ch; margin-top: var(--s2); }
.hero .lead { margin-top: var(--s3); }
.hero-cta { margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: var(--s1); }
.hero-badges {
  margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 8px;
}

/* ── CTA 밴드 ────────────────────────────────────────────── */
.cta-sec { padding-block: var(--s5); }
.cta-band {
  display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center;
  justify-content: space-between; background: var(--dark);
  border-radius: var(--r3); padding: var(--s4);
  position: relative; overflow: hidden;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { font-size: var(--t7); color: var(--on-dark); }
/* 글 덩어리가 남는 폭을 가져가게 한다. 없으면 .lead 의 52ch 상한이 밴드
   한가운데서 글을 끊어 오른쪽이 비는데도 줄이 갈라진다. 52ch 는 본문 단 폭을
   잡으려고 건 값이라 밴드 안에서는 푼다.
   min-width:0 은 flex 기본 최소폭 때문에 좁은 화면에서 밴드가 밀리지 않게 하는 것. */
.cta-band > :first-child { flex: 1 1 420px; min-width: 0; }
.cta-band .lead { margin-top: var(--s1); font-size: var(--t4); color: var(--on-dark-2); max-width: none; }
/* .hero-cta 의 위 여백이 밴드까지 따라 들어오면 align-items:center 가 여백까지
   포함해 가운데를 잡아 버튼이 글자보다 내려앉는다. */
.cta-band .hero-cta { margin-top: 0; }

/* ── 자세히 접기 ──────────────────────────────────────────── */
.more { border-top: 1px solid var(--rule); margin-top: var(--s3); }
.more > summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px;
  padding: 14px 0; font-size: var(--t3); font-weight: 500; color: var(--ink-2);
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after {
  content: '+'; font-family: var(--mono); font-size: var(--t5); line-height: 1;
  color: var(--brand-d); margin-left: auto;
}
.more[open] > summary::after { content: '–'; }  /* 엔대시 — 제목 글꼴(명조)에 U+2212 가 없다 */
.more > summary:hover { color: var(--brand-d); }
.more-bd { padding-bottom: var(--s3); }
.dark .more { border-color: var(--rule-dark); }
.dark .more > summary { color: var(--on-dark-2); }

/* ── 입력 ────────────────────────────────────────────────── */
.field-row { display: grid; gap: var(--s1); margin-bottom: var(--s3); }
.field-row label { font-size: var(--t3); font-weight: 500; color: var(--ink-2); }
.field-row input, .field-row textarea, .field-row select {
  font: inherit; font-size: var(--t3); padding: 11px 14px;
  border: 1px solid var(--rule-2); border-radius: var(--r1);
  background: var(--card); color: var(--ink); width: 100%;
}
/* outline 을 지우지 않는다(KWCAG 6.1.2) — 색만 브랜드로 바꾼다 */
.field-row input:focus-visible, .field-row textarea:focus-visible,
.field-row select:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* ── 푸터 ────────────────────────────────────────────────── */
/* ⚠️ 어두운 바탕은 «footer» 가 칠한다 — .foot 이 아니다.
   마크업이 footer > .wrap > .foot 인데, 거터(좌우 여백)를 주는 것은 .wrap 이다.
   바탕을 .foot 에 걸면 띠가 «거터 안쪽» 에서 시작하고, .foot 에는 좌우 패딩이
   없어 글이 제 바탕 가장자리에 그대로 붙는다(2026-08-21 라이브 실측 —
   375px 에서 .foot left=18 · padding-left=0, 양옆 18px 로 밝은 배경이 비쳤다).
   유일식품 원본이 footer 에 칠하고 있었는데(system.css:840) 공용으로 뽑을 때
   .foot 으로 내려앉으면서 깨졌다.
   판별법 — 화면 «폭 전체» 를 덮어야 하는 바탕은 .wrap «밖» 에 건다.
   ⚠️ 이건 wf qa 가 «못 잡는다». 「붙음」은 쌓인 상자 «사이» 간격을 재지, 글이
      제 바탕 가장자리에 붙는 것은 안 잰다(--full 26/27종 실행에 0건이었다). */
footer {
  background: var(--dark); color: var(--on-dark-2);
  padding-block: var(--s5); --rule-dark: rgba(255,255,255,.16);
}
.foot {
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s4);
}
.foot-desc { margin-top: var(--s2); font-size: var(--t3); max-width: 26ch; }
.foot-contact { margin-top: var(--s3); display: grid; gap: 4px; font-size: var(--t3); }
.foot-contact span { font-family: var(--mono); color: var(--on-dark); }
/* 전화·메일은 문장 속 인라인이 아니라 «독립 링크»다 — 글자 높이만으로는
   모바일에서 조준이 어렵다. 폭은 글자 그대로 두고 세로만 패딩으로 넓힌다.
   ⚠️ 문장 속 인라인 링크에는 주지 말 것 — 줄 간격이 튀고, 그건 예외 대상이다.

   높이 44px 로 잡는다. WCAG 2.5.8 의 최소는 24px 이고 실측 33px 는 그걸 넘지만,
   그건 «부적합을 면하는» 선이지 손가락이 맞히는 선이 아니다. 이 팩토리의 사이트는
   50~60대가 휴대폰으로 보는 경우가 실제로 있다(ISO 컨설팅은 명함 QR 이 주 유입이다). */
.foot-contact a { display: inline-block; padding-block: 9px; min-height: 44px; }
.tbl a.lnk[href^="tel:"], .tbl a.lnk[href^="mailto:"] { display: inline-block; padding-block: 3px; }
/* ⚠️ h2 다. h4 로 두면 h2→h4 로 끊기고, 본문이 h1 뿐인 404 에서는 h1→h4 가 된다.
   푸터 열 제목은 푸터 랜드마크 안의 최상위 묶음이라 h2 가 의미상으로도 맞다. */
.foot h2 {
  font-family: var(--ff-body); font-size: var(--t2); letter-spacing: .01em;
  text-transform: none; color: var(--brand-l); font-weight: 600; margin-bottom: var(--s2);
}
.foot li { font-size: var(--t3); }
/* 링크 자체를 블록으로 만들어 패딩을 준다 — li 에 주면 글자 높이만 눌리는
   영역이라 모바일에서 조준이 어렵다. */
.foot li a { display: block; padding: 10px 0; }
.foot li a:hover { color: var(--on-dark); }
.legal {
  margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--rule-dark);
  display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: var(--t2);
}
/* ⚠️ 「개인정보처리방침」이 88×22px 였다 — WCAG 2.5.8·KWCAG 6.1.3 의 바닥(24px)
   «아래» 다. 640px 아래에서는 44px 로 올리는 규칙이 있었는데 넓은 폭에 없었다.
   전화 링크에만 패딩을 준 것이 원인이다 — legal 안의 링크 전부로 넓힌다. */
.legal a { display: inline-flex; align-items: center; min-height: 24px; }
.legal a[href^="tel:"] { padding-block: 5px; }
@media (max-width: 820px) { .foot { grid-template-columns: 1fr 1fr; } }
/* ⚠️ 820px 아래가 «전부» 2열이라 360px 에서도 2열(150px씩)이 됐다. 그 폭에서
   `.foot-desc` 68자가 6줄로 흐르고 줄당 11.3자가 된다(2026-08-21 실측) —
   한글 본문 바닥(25~40자)의 3분의 1이다. 넘치지는 않으니 반응형 검사가
   못 잡았고, 44px 도 16px 도 지켜서 모바일 검사도 못 잡았다.
   「읽을 만한가」를 재는 축이 없던 자리다.
   ⚠️ 열이 하나면 gap 은 «줄 사이» 가 된다 — s4 는 너무 벌어져 s3 로 좁힌다. */
@media (max-width: 560px) {
  /* 전부 1열로 떨어뜨리면 링크 44px × 9개가 쌓여 푸터만 700px 가 된다.
     짜부라진 것은 «설명 문단» 이지 링크 묶음이 아니다 — 문단만 전폭으로
     빼고 링크는 2열로 남긴다. */
  .foot { grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s4); }
  .foot > :first-child { grid-column: 1 / -1; }
  .foot-desc { max-width: none; }
  /* legal 3토막이 flex-wrap 으로 raggedly 감긴다(62자 5줄). 세로로 쌓는다. */
  .legal { flex-direction: column; gap: 0; }
}

/* ── 반응형 ──────────────────────────────────────────────── */
@media (max-width: 860px) {
  /* 여백은 세트가 clamp 로 스스로 줄인다. 여기서 :root 를 덮으면 촘촘한 세트의
     밀도가 «도로 늘어난다» — 축이 세트에 있는데 값이 공용에 있으면 그렇게 된다. */
  /* 데스크톱에선 .nav-links 의 flex:1 이 CTA 를 오른쪽으로 밀지만, 모바일은
     .nav-links 가 fixed 라 흐름에서 빠진다 — margin-left:auto 로 붙인다.
     버튼과 햄버거 높이도 맞춘다. */
  .nav-cta { margin-left: auto; gap: 10px; }
  .nav-cta .btn-primary { height: 44px; padding: 0 18px; }
  .nav-cta .btn-ghost { display: none; }
  .burger { display: flex; width: 44px; height: 44px; }
  .nav-links {
    position: fixed; inset: 66px 0 auto 0; flex-direction: column; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    padding: var(--s2) var(--gut) var(--s3); display: none; box-shadow: var(--sh2);
  }
  .nav.open .nav-links { display: flex; }
  .nav-links a { font-size: var(--t4); padding: 13px 0; border-bottom: 1px solid var(--rule); }
  .cta-band { padding: var(--s3); border-radius: var(--r2); }
}

/* ── 워드마크 ────────────────────────────────────────────────
   blocks/nav.html 은 .wordmark > .mark + .wm-tx > .nm/.ti 를 쓰는데 이 파일에
   그 스타일이 «없었다». 그래서 두 줄로 쌓여야 할 이름표가 한 줄로 흘렀고
   높이가 29px 로 주저앉았다(2026-08-20 isocons 실측 — 첫 스캐폴드 사이트).
   .mark-tx b/span 은 이관 사이트(유일식품)가 쓰는 옛 이름이라 그대로 둔다. */
.wordmark { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.wm-tx { display: flex; flex-direction: column; justify-content: center; }
.nm {
  font-family: var(--ff-head); font-size: var(--t5);
  font-weight: 700; letter-spacing: -.045em; line-height: 1.1;
}
.ti {
  font-family: var(--mono); font-size: var(--t1);
  letter-spacing: .18em; color: var(--brand-d); line-height: 1.15;
}
/* ⚠️ 워드마크는 «어두운 푸터» 에도 같은 마크업으로 들어간다. --brand-d 는 짙은
   남색이라 그 위에서 대비가 무너진다 — 라이트하우스 접근성이 100 → 95 로
   떨어졌다(2026-08-20 실측, 내가 낸 회귀). 밝은 쪽으로 되돌린다. */
.dark .ti, .foot .ti { color: var(--on-dark-2); }

/* ── 모바일 우선 ─────────────────────────────────────────────
   손가락은 커서가 아니다. 조작요소 44px·본문 16px 은 «모바일에서 지켜야 할
   바닥» 이고, 데스크톱에서 줄이는 것이 아니라 여기서 올린다.
   이 파일의 나머지 미디어쿼리가 전부 max-width 라 아직 데스크톱 기준이다 —
   그 뒤집기는 따로 한다. 지금은 바닥부터 세운다. */
@media (max-width: 640px) {
  /* 본문 16px. --t3(15px)·--t2(13px) 로 깔린 자리를 올린다.
     ⚠️ 클래스가 붙은 것(.note·.src li·.fig-l)은 bare p/li 보다 특정도가 높다 —
        이름을 대지 않으면 «안 올라간다». 실제로 첫 시도에서 그렇게 남았다. */
  p, li, td, th, .card p, .tbl,
  .note, .src li, .fig-l, .frame-cap,
  .foot li, .foot-desc, .foot-contact { font-size: 16px; }

  /* 카드의 「살펴보기 →」는 문장 속 링크가 아니라 그 카드의 CTA 다.
     WCAG 2.5.8 이 면제하는 «문장 안» 이 아니므로 44px 를 지킨다. */
  .card-link .lnk,
  .lnk[href^="tel:"],
  .foot-contact a,
  .legal a { display: inline-flex; align-items: center; min-height: 44px; }

  /* ⚠️ 푸터 목록은 inline-flex 로 두면 «폭» 이 글자만큼 줄어든다 — 「문의」가
     27px 가 됐다(실측). 칸 전체를 유지하려면 block 계열이어야 한다. */
  .foot li a { display: flex; align-items: center; min-height: 44px; }

  /* 문장 «안» 에 있는 lnk 는 줄 높이에 묶여 있어 키우면 글이 깨진다.
     대신 세로 여백으로 손가락이 맞을 자리를 넓힌다(WCAG 2.5.8 인라인 면제). */
  p > .lnk { padding-block: 12px; }

  /* ⚠️ 카드 CTA 가 윗글에 딱 붙는다. 데스크톱에서는 .card>.card-link:last-child 의
     margin-top:auto 가 카드 바닥으로 밀어 주는데, 모바일은 카드가 안 늘어나서
     auto 가 «0 이 된다». 실제 간격을 준다 — auto 에 기대지 않는다.
     (유일식품에서 지도 버튼이 표에 붙어 먼저 드러났다. 여기는 텍스트 링크라
      덜 어색했을 뿐 같은 결함이다 — 전체 폭으로 늘리지는 않는다.) */
  .card > .card-link,
  .card > .card-link:last-child,
  .card > .card-meta + .card-link:last-child { margin-top: var(--s3); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}