/* ==========================================================================
   Mimolux Design System v2 - Components

   원칙
   - 모서리는 전부 직각. 원이 의미인 것(라디오 · 위치 점 · 아바타)만 예외.
   - 면을 나누는 건 그림자가 아니라 1px 잉크 선입니다. 그림자는 쓰지 않습니다.
   - 강조는 밑줄 · 형광펜이 아니라 하늘 사각 점, 하늘 · 슬레이트 면, 크기로 합니다. 녹색은 보조.
   - 하늘 · 녹색 원색 면 위 글자는 슬레이트만. 흰 글자는 슬레이트 면 위에서만.
   - hex 를 쓰지 않습니다. tokens.css 의 변수만 참조합니다.

   목차
   01 기본            08 태그 · 배지        15 표
   02 면 · 칸 격자     09 폼                16 아코디언
   03 글자            10 세그먼트 · 탭      17 알림
   04 로고            11 사진 · 비주얼       18 띠 · CTA
   05 헤더 · 메뉴      12 카드              19 페이지 머리 · 경로
   06 버튼            13 숫자 · 사양 · 목록  20 푸터
   07 링크 · 큰 링크   14 단계              21 등장 모션
   ========================================================================== */

/* ---- 01 기본 ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--mx-header-h-compact) + 16px); }   /* 앵커로 이동하면 헤더는 줄어든 상태 */

body {
  margin: 0;
  background: var(--mx-beige-50);
  color: var(--mx-ink-body);
  font-family: var(--mx-font);
  font-weight: var(--mx-w-regular);
  font-size: var(--mx-fs-body);
  line-height: var(--mx-lh-body);
  word-break: keep-all;
  overflow-wrap: break-word;   /* 긴 주소 · 이메일만 꺾음. anywhere 는 좁은 표 칸의 단어까지 쪼갬 */
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;   /* 히어로가 틀 밖으로 넓어질 때 가로 스크롤 방지 */
}

img, svg, video { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button { font: inherit; }

:focus-visible { outline: 2px solid var(--mx-focus); outline-offset: 2px; }

::selection { background: var(--mx-sky); color: var(--mx-ink); }

.mx-reset-list { margin: 0; padding: 0; list-style: none; }
.mx-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.mx-fieldset > legend { padding: 0; margin-bottom: 8px; }

/* 앵커 도착 위치는 html scroll-padding 한 곳에서만 정합니다 (섹션마다 scroll-margin 을 더하지 않음).
   기본: 헤더 아래 16px. 앵커 메뉴(.mx-subnav, 높이 52px)가 있는 페이지: 메뉴 아래 16px. */
html:has(.mx-subnav) { scroll-padding-top: calc(var(--mx-header-h-compact) + 52px + var(--mx-line-w) + 16px); }   /* 52px 링크 + 바닥선 */
.mx-anchor { }   /* 이전 마크업 호환 — 여백을 따로 더하지 않음 */

.mx-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.mx-skip {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  padding: 10px 16px; background: var(--mx-ink); color: var(--mx-white);
}
.mx-skip:focus { top: 8px; }

.mx-icon { width: 16px; height: 16px; flex: none; }
.mx-icon--lg { width: 24px; height: 24px; }

/* ---- 02 면 · 칸 격자 ---------------------------------------------------- */
.mx-surface-white  { background: var(--mx-white); }
.mx-surface-beige  { background: var(--mx-beige-100); }
.mx-surface-mist   { background: var(--mx-mist); }
.mx-surface-sky    { background: var(--mx-sky); color: var(--mx-ink); }
.mx-surface-green  { background: var(--mx-green); color: var(--mx-ink); }
.mx-surface-slate  { background: var(--mx-ink); color: var(--mx-white); }

.mx-container {
  max-width: var(--mx-max);
  margin: 0 auto;
  padding: 0 var(--mx-gutter);
}

/* 틀 — 헤더부터 푸터까지 모든 섹션을 감쌉니다. 양옆 세로선이 페이지의 기준선.
   틀 밖으로 나가는 것은 히어로 사진 · 영상뿐입니다(.mx-hero__media). */
.mx-page {
  max-width: calc(var(--mx-frame) + 2 * var(--mx-line-w));
  margin: 0 auto;
  min-height: 100vh;
  border-left: var(--mx-line-w) solid var(--mx-line);
  border-right: var(--mx-line-w) solid var(--mx-line);
  background: var(--mx-beige-50);
}
.mx-page .mx-container { max-width: none; }
@media (max-width: 1362px) { .mx-page { border-left: 0; border-right: 0; } }   /* 틀이 화면을 꽉 채우면 양옆 선은 화면 끝과 겹쳐 지움 */

/* 큰 섹션 — 위아래 여백이 넉넉한 일반 흐름 */
.mx-section { padding: var(--mx-section) 0; border-bottom: var(--mx-line-w) solid var(--mx-line); }
.mx-section--beige { background: var(--mx-beige-100); }
.mx-section--white { background: var(--mx-white); }
.mx-section--tight { padding: var(--mx-s-8) 0; }
.mx-section--flush-bottom { padding-bottom: 0; border-bottom: 0; }   /* 끝에 칸 격자가 붙는 섹션 — 칸이 바닥선을 맡음 */

/* 섹션 머리 — 왼쪽 라벨 · 제목, 오른쪽 설명 */
.mx-section-head {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* 12칸 중 6 · 6 — 격자 가운데 선에 맞춤 */
  gap: var(--mx-s-6);
  align-items: end;
  margin-bottom: var(--mx-s-7);
}
.mx-section-head > :first-child { display: grid; gap: var(--mx-s-4); }
.mx-section-head p { margin: 0; max-width: var(--mx-measure); }
@media (max-width: 900px) { .mx-section-head { grid-template-columns: minmax(0, 1fr); gap: var(--mx-s-4); } }

/* 칸 격자 — 12칸 격자 하나. 분할은 두 계열 중 한 페이지에 한 계열만 씁니다.
     4분할 계열: --2 · --4 · --3-9 · --9-3   (선이 25 · 50 · 75% 에 섬)
     3분할 계열: --3 · --6 · --4-8 · --8-4   (선이 16.7% 의 배수 — 33 · 50 · 66% 등)
   --2(반반)는 두 계열 모두에 속합니다.
   선은 칸 사이 세로선만 — 각 칸이 왼쪽에 1px 그림자 선을 그립니다. 첫 칸의 선은 틀 선과 같은 자리에 겹쳐
   두 겹이 되지 않습니다. 행 사이 가로선은 없고, 섹션 사이 가로선(바닥선)만 둡니다. 칸마다 두르는 테두리 없음. */
.mx-cells {
  display: grid;
  gap: 0;
  border-bottom: var(--mx-line-w) solid var(--mx-line);
}
.mx-cells--boxed { border: var(--mx-line-w) solid var(--mx-line); }   /* 사방이 닫힌 칸 묶음 (문서 · 본문 중간) */
.mx-cells--open  { border-bottom: 0; }                                 /* 다른 칸 안에 넣을 때 · 다음 묶음과 붙일 때 */
.mx-cells--2   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mx-cells--3   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mx-cells--4   { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mx-cells--6   { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.mx-cells--3-9 { grid-template-columns: 3fr 9fr; }
.mx-cells--9-3 { grid-template-columns: 9fr 3fr; }
.mx-cells--4-8 { grid-template-columns: 4fr 8fr; }
.mx-cells--8-4 { grid-template-columns: 8fr 4fr; }
/* 쓰지 않음 — 어느 계열과도 세로선이 맞지 않음. 이전 마크업 호환으로만 남김 */
.mx-cells--5-7 { grid-template-columns: 5fr 7fr; }
.mx-cells--7-5 { grid-template-columns: 7fr 5fr; }
/* 행 사이에도 가로선이 필요한 표 같은 칸 묶음 — 그때만 */
.mx-cells--ruled > .mx-cell { box-shadow: calc(var(--mx-line-w) * -1) 0 0 0 var(--mx-line), 0 calc(var(--mx-line-w) * -1) 0 0 var(--mx-line); }

.mx-cell {
  background: var(--mx-beige-50);
  padding: var(--mx-cell-pad);
  min-width: 0;
  box-shadow: calc(var(--mx-line-w) * -1) 0 0 0 var(--mx-line);   /* 왼쪽 세로선 */
}
.mx-cell .mx-small, .mx-cell .mx-card__text { font-size: 15px; }   /* 넓은 칸에서 글이 작아 보이지 않게 */
.mx-cell--white  { background: var(--mx-white); }
.mx-cell--beige  { background: var(--mx-beige-100); }
.mx-cell--mist       { background: var(--mx-mist); }
.mx-cell--sky        { background: var(--mx-sky); color: var(--mx-ink); }
.mx-cell--sky-soft   { background: var(--mx-sky-soft); }
.mx-cell--green      { background: var(--mx-green); color: var(--mx-ink); }
.mx-cell--green-soft { background: var(--mx-green-soft); }
.mx-cell--slate      { background: var(--mx-ink); color: var(--mx-white); }   /* 강조 칸 — 화면에 하나 */
.mx-cell--flush  { padding: 0; }
.mx-cell--span-2 { grid-column: span 2; }
.mx-cell--stack  { display: flex; flex-direction: column; gap: var(--mx-s-5); }

/* 하늘 · 녹색 원색 칸 안 글자는 모두 슬레이트 — 본문 회색은 4.24 · 3.09 로 미달 */
:is(.mx-cell--sky, .mx-cell--green, .mx-surface-sky, .mx-surface-green, .mx-cta__main) :is(p, li, .mx-muted, .mx-caption, .mx-small, .mx-index, .mx-step__en, .mx-card__text, .mx-lead) { color: var(--mx-ink); }
/* 슬레이트 칸 — 흰 글자, 숫자 · 번호는 녹색 (5.14) */
:is(.mx-cell--slate, .mx-surface-slate) :is(h1, h2, h3, h4, p, li, .mx-h1, .mx-h2, .mx-h3, .mx-h4, .mx-label, .mx-eyebrow, .mx-card__title, .mx-card__text, .mx-small, .mx-caption, .mx-muted) { color: var(--mx-white); }
:is(.mx-cell--slate, .mx-surface-slate) :is(.mx-stat, .mx-index, .mx-step__en) { color: var(--mx-sky); }   /* 7.05 */
/* 단계 번호(::before) — 슬레이트 칸은 녹색, 하늘 · 녹색 칸은 슬레이트 */
.mx-step:is(.mx-cell--slate, .mx-surface-slate)::before { color: var(--mx-sky); }
.mx-step:is(.mx-cell--sky, .mx-cell--green, .mx-surface-sky, .mx-surface-green)::before { color: var(--mx-ink); }
/* 미스트 칸 — 캡션 회색 4.13 미달 → 본문색 */
.mx-cell--mist :is(.mx-muted, .mx-caption, .mx-index) { color: var(--mx-ink-body); }
/* 녹색 면 위 섹션 라벨 점 — 녹색 위 녹색은 안 보이므로 슬레이트 */
:is(.mx-cell--sky, .mx-cell--green, .mx-surface-sky, .mx-surface-green, .mx-cta__main) :is(.mx-eyebrow, .mx-link)::before { background: var(--mx-ink); box-shadow: none; }

a.mx-cell { display: block; transition: background var(--mx-dur) var(--mx-ease); }
a.mx-cell:hover { background: var(--mx-white); }
a.mx-cell--white:hover { background: var(--mx-beige-100); }

@media (max-width: 1100px) {
  .mx-cells--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .mx-cells--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mx-cells--3,
  .mx-cells--3-9, .mx-cells--9-3, .mx-cells--5-7, .mx-cells--7-5, .mx-cells--4-8, .mx-cells--8-4 { grid-template-columns: minmax(0, 1fr); }
  .mx-cell--span-2 { grid-column: auto; }
  /* 쌓이면 칸 사이에 옅은 가로선 */
  .mx-cells > .mx-cell + .mx-cell { box-shadow: calc(var(--mx-line-w) * -1) 0 0 0 var(--mx-line), 0 calc(var(--mx-line-w) * -1) 0 0 var(--mx-line-soft); }
}
@media (max-width: 560px) {
  .mx-cells--2, .mx-cells--4, .mx-cells--6 { grid-template-columns: minmax(0, 1fr); }
  .mx-cell--span-2 { grid-column: auto; }
}

.mx-rule      { border: 0; border-top: var(--mx-line-w) solid var(--mx-line-soft); margin: var(--mx-s-5) 0; }
.mx-rule--ink { border-top-color: var(--mx-line); }

/* ---- 03 글자 ------------------------------------------------------------ */
.mx-display, .mx-h1, .mx-h2, .mx-h3, .mx-h4 {
  margin: 0;
  color: var(--mx-ink);
  font-weight: var(--mx-w-medium);
}
.mx-display { font-size: var(--mx-fs-display); line-height: var(--mx-lh-tight); letter-spacing: var(--mx-ls-display); }
.mx-h1 { font-size: var(--mx-fs-h1); line-height: var(--mx-lh-tight); letter-spacing: var(--mx-ls-display); }
.mx-h2 { font-size: var(--mx-fs-h2); line-height: var(--mx-lh-head); letter-spacing: var(--mx-ls-head); }
.mx-h3 { font-size: var(--mx-fs-h3); line-height: var(--mx-lh-head); letter-spacing: var(--mx-ls-head); }
.mx-h4 { font-size: var(--mx-fs-h4); line-height: var(--mx-lh-head); letter-spacing: -0.01em; }

.mx-lead    { margin: 0; font-size: var(--mx-fs-body-lg); line-height: var(--mx-lh-body); max-width: var(--mx-measure); }
.mx-body-lg { font-size: var(--mx-fs-body-lg); line-height: var(--mx-lh-body); }
.mx-small   { font-size: var(--mx-fs-small); line-height: 1.6; }
.mx-caption { font-size: var(--mx-fs-caption); line-height: 1.5; color: var(--mx-ink-muted); }
.mx-muted   { color: var(--mx-ink-muted); }
.mx-ink     { color: var(--mx-ink); }
.mx-prose > * + * { margin-top: 1em; }
.mx-prose p { margin: 0; max-width: var(--mx-measure); }

/* 영문 대문자 라벨 — 번호 · 분류 · 메타 */
.mx-label {
  font-size: var(--mx-fs-label);
  font-weight: var(--mx-w-medium);
  letter-spacing: var(--mx-ls-label);
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--mx-ink);
}
/* 한글 라벨 — 한글은 자간을 벌리면 흩어져 보이므로 0 */
.mx-label--ko { font-size: var(--mx-fs-caption); letter-spacing: 0; text-transform: none; }

/* 섹션 라벨 — 주황 사각 점 + 영문 대문자 */
.mx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--mx-fs-label);
  font-weight: var(--mx-w-medium);
  letter-spacing: var(--mx-ls-label);
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--mx-ink);
}
.mx-eyebrow::before { content: ""; width: 7px; height: 7px; background: var(--mx-mark); box-shadow: inset 0 0 0 1px var(--mx-mark-edge); flex: none; }

/* 영문 부제 — 한글 제목 위 · 아래에 붙는 짧은 영문 문장 */
.mx-tagline { margin: 0; font-size: var(--mx-fs-body-lg); font-weight: var(--mx-w-medium); color: var(--mx-ink); letter-spacing: -0.01em; }

.mx-index {
  font-size: var(--mx-fs-label);
  font-weight: var(--mx-w-medium);
  letter-spacing: var(--mx-ls-label);
  color: var(--mx-ink-muted);
  font-variant-numeric: tabular-nums;
}

/* ---- 04 로고 ------------------------------------------------------------ */
.mx-logo     { height: 18px; width: auto; }
.mx-logo--sm { height: 14px; }
.mx-logo--lg { height: 32px; }
/* 세로로 쌓는 칸(푸터 등) 안의 로고 — 칸 폭으로 늘어나지 않고 원래 크기로 왼쪽 정렬 */
.mx-cell--stack > .mx-logo, .mx-footer .mx-logo { align-self: flex-start; }

/* ---- 05 헤더 · 메뉴 ----------------------------------------------------- */
/* 헤더 — 스크롤하면(html[data-mx-scrolled]) 높이 75% · 크림 약간 투명 + 뒤 흐림 (2026-10-29)
   배경 · 아래선은 ::before 가 화면 끝까지 그림 — 헤더 안 내용 정렬은 틀(1360) 그대로.
   높이는 --mx-header-h 하나를 바꿔서 앵커 메뉴 위치 · 서랍 위치가 함께 따라옴. */
html[data-mx-scrolled] { --mx-header-h: var(--mx-header-h-compact); }
.mx-header {
  position: sticky;
  top: 0;
  z-index: var(--mx-z-header);
  display: grid;
  grid-template-columns: auto 1fr auto;
  height: var(--mx-header-h);
  isolation: isolate;
  transition: height var(--mx-dur) var(--mx-ease);
}
.mx-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0; bottom: 0;
  left: calc(50% - 50vw); right: calc(50% - 50vw);
  background: var(--mx-beige-50);
  border-bottom: var(--mx-line-w) solid var(--mx-line);
  transition: background-color var(--mx-dur) var(--mx-ease);
}
html[data-mx-scrolled] .mx-header::before {
  background: color-mix(in srgb, var(--mx-beige-50) 88%, transparent);   /* 슬레이트 글자 대비 — 뒤가 검정이어도 8.5 */
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
/* 틀 양옆 세로선을 헤더 높이에서도 이어 그림 — 전체 폭 배경(::before)이 .mx-page 선을 덮으므로 */
.mx-header::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--mx-line-w) * -1); right: calc(var(--mx-line-w) * -1);
  border-left: var(--mx-line-w) solid var(--mx-line);
  border-right: var(--mx-line-w) solid var(--mx-line);
  pointer-events: none;
}
@media (max-width: 1362px) { .mx-header::after { content: none; } }   /* 틀 선이 없는 폭은 그대로 */
/* 줄어도 로고 18px · 메뉴 위치 그대로 — 높이만 바뀜 (54px 에서 18px 이 알맞음) */
.mx-header > * { display: flex; align-items: center; padding: 0 var(--mx-gutter); }
.mx-header > * + * { border-left: var(--mx-line-w) solid var(--mx-line); }
.mx-header__brand { padding-right: var(--mx-s-8); }

.mx-nav { display: flex; height: 100%; padding: 0; }
.mx-nav__link {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 var(--mx-s-5);
  font-size: var(--mx-fs-small);
  font-weight: var(--mx-w-medium);
  color: var(--mx-ink);
  transition: background var(--mx-dur) var(--mx-ease);
}
.mx-nav__link:hover { background: var(--mx-white); }
.mx-nav__link::before {
  content: "";
  width: 6px; height: 6px;
  border: var(--mx-line-w) solid var(--mx-ink-faint);
}
.mx-nav__link[aria-current="page"]::before { background: var(--mx-mark); border-color: var(--mx-mark-edge); }

.mx-header__action { padding: 0; }
.mx-header__action .mx-btn { height: 100%; border: 0; padding: 0 var(--mx-gutter); }

/* 메뉴 열기 단추 — 900px 이하에서만 보임 */
.mx-menu-btn {
  display: none;
  width: var(--mx-header-h);
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mx-ink);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.mx-menu-btn span { display: grid; gap: 6px; width: 22px; }
.mx-menu-btn span::before, .mx-menu-btn span::after { content: ""; height: 1.5px; background: currentColor; transition: transform var(--mx-dur) var(--mx-ease); }
.mx-menu-btn[aria-expanded="true"] span::before { transform: translateY(3.75px) rotate(45deg); }
.mx-menu-btn[aria-expanded="true"] span::after  { transform: translateY(-3.75px) rotate(-45deg); }

@media (max-width: 900px) {
  .mx-nav { display: none; }
  /* 메뉴 단추가 보이는 폭 — 헤더는 로고 | 메뉴 두 칸. 문의 단추는 서랍 안에만 (2026-10-29) */
  .mx-header { grid-template-columns: 1fr auto; }
  .mx-header__brand { padding-right: var(--mx-gutter); }
  .mx-header__action { display: none; }
  .mx-menu-btn { display: flex; }
  .mx-header > .mx-menu-btn { padding: 0; }
}

/* 모바일 메뉴 서랍 — 헤더 아래 전체 화면 */
.mx-drawer {
  position: fixed;
  inset: var(--mx-header-h) 0 0 0;
  z-index: var(--mx-z-drawer);
  display: flex;
  flex-direction: column;
  background: var(--mx-beige-50);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--mx-dur) var(--mx-ease), visibility 0s linear var(--mx-dur);
}
.mx-drawer[data-open="true"] { visibility: visible; opacity: 1; transition-delay: 0s; }
.mx-drawer__link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--mx-s-4);
  padding: 22px var(--mx-gutter);
  border-bottom: var(--mx-line-w) solid var(--mx-line);
  font-size: 26px;
  font-weight: var(--mx-w-medium);
  letter-spacing: -0.02em;
  color: var(--mx-ink);
}
.mx-drawer__link small { font-size: var(--mx-fs-label); letter-spacing: var(--mx-ls-label); text-transform: uppercase; color: var(--mx-ink-muted); }
.mx-drawer__link[aria-current="page"]::before { content: ""; width: 8px; height: 8px; background: var(--mx-mark); margin-right: auto; order: -1; display: none; }
.mx-drawer__link[aria-current="page"] { background: var(--mx-white); }
.mx-drawer__foot { margin-top: auto; padding: var(--mx-s-5) var(--mx-gutter) var(--mx-s-7); display: grid; gap: var(--mx-s-4); }
@media (min-width: 901px) { .mx-drawer { display: none; } }

/* 페이지 안 앵커 메뉴 — 긴 페이지(솔루션 · 제품)의 섹션 이동 */
.mx-subnav {
  position: sticky;
  top: var(--mx-header-h);
  transition: top var(--mx-dur) var(--mx-ease);
  z-index: calc(var(--mx-z-header) - 1);
  display: flex;
  overflow-x: auto;
  background: var(--mx-beige-50);
  border-bottom: var(--mx-line-w) solid var(--mx-line);
  scrollbar-width: none;
}
.mx-subnav::-webkit-scrollbar { display: none; }
.mx-subnav a {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 var(--mx-s-5);
  font-size: var(--mx-fs-small);
  font-weight: var(--mx-w-medium);
  color: var(--mx-ink-muted);
  white-space: nowrap;
}
.mx-subnav a:first-child { padding-left: var(--mx-gutter); }
.mx-subnav a:hover { color: var(--mx-ink); background: var(--mx-white); }
.mx-subnav a[aria-current="true"] { color: var(--mx-ink); background: var(--mx-white); }
.mx-subnav a[aria-current="true"] .mx-index { color: var(--mx-sky-deep); }

/* ---- 06 버튼 — 직각 ----------------------------------------------------- */
.mx-btn {
  /* 주 버튼 — 슬레이트 면 + 흰 글자(11.0). 올리면 하늘 면 + 슬레이트 글자(7.05) */
  --_bg: var(--mx-ink);
  --_fg: var(--mx-white);
  --_bd: var(--mx-ink);
  --_bg-h: var(--mx-sky);
  --_fg-h: var(--mx-ink);
  --_bd-h: var(--mx-sky);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: var(--mx-h-md);
  padding: 0 26px;
  border: var(--mx-line-w) solid var(--_bd);
  border-radius: var(--mx-radius);
  background: var(--_bg);
  color: var(--_fg);
  font: inherit;
  font-size: 15px;
  font-weight: var(--mx-w-medium);
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--mx-dur) var(--mx-ease), color var(--mx-dur) var(--mx-ease), border-color var(--mx-dur) var(--mx-ease);
}
.mx-btn:hover { background: var(--_bg-h); color: var(--_fg-h); border-color: var(--_bd-h); }

.mx-btn__arrow { width: 16px; height: 16px; flex: none; transition: transform var(--mx-dur) var(--mx-ease); }
.mx-btn:hover .mx-btn__arrow { transform: translateX(4px); }

/* --ink 는 기본과 같음 (이전 마크업 호환) */
.mx-btn--ink { }
/* 강조 버튼 — 하늘 면 + 슬레이트 글자(7.05). 화면에 하나 */
.mx-btn--accent {
  --_bg: var(--mx-sky); --_fg: var(--mx-ink);   --_bd: var(--mx-sky);
  --_bg-h: var(--mx-ink); --_fg-h: var(--mx-white); --_bd-h: var(--mx-ink);
}
.mx-btn--outline {
  --_bg: transparent;     --_fg: var(--mx-ink);   --_bd: var(--mx-ink);
  --_bg-h: var(--mx-ink); --_fg-h: var(--mx-white); --_bd-h: var(--mx-ink);
}
.mx-btn--white {
  --_bg: var(--mx-white); --_fg: var(--mx-ink);   --_bd: var(--mx-ink);
  --_bg-h: var(--mx-sky); --_fg-h: var(--mx-ink); --_bd-h: var(--mx-ink);
}
/* 사진 위 — 흰 선 · 흰 글자 */
.mx-btn--on-photo {
  --_bg: transparent; --_fg: var(--mx-white); --_bd: var(--mx-white);
  --_bg-h: var(--mx-white); --_fg-h: var(--mx-ink); --_bd-h: var(--mx-white);
}

.mx-btn--sm { height: var(--mx-h-sm); padding: 0 18px; font-size: 14px; gap: 10px; }
.mx-btn--lg { height: var(--mx-h-lg); padding: 0 34px; font-size: 16px; }
.mx-btn--block { display: flex; width: 100%; justify-content: space-between; }
.mx-btn--icon { width: var(--mx-h-md); padding: 0; }
.mx-btn--icon.mx-btn--sm { width: var(--mx-h-sm); }

.mx-btn:disabled, .mx-btn[aria-disabled="true"] {
  --_bg: var(--mx-beige-200); --_fg: var(--mx-ink-body); --_bd: var(--mx-beige-300);
  --_bg-h: var(--_bg); --_fg-h: var(--_fg); --_bd-h: var(--_bd);
  cursor: not-allowed;
}
.mx-btn:disabled .mx-btn__arrow { transform: none; }

/* 버튼 묶음 — 선을 공유하며 붙음 */
.mx-btn-group { display: inline-flex; }
.mx-btn-group .mx-btn + .mx-btn { margin-left: calc(var(--mx-line-w) * -1); }

/* ---- 07 링크 · 큰 링크 -------------------------------------------------- */
/* 글자 링크 — 밑줄 대신 사각 점 + 화살표 */
.mx-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--mx-fs-small);
  font-weight: var(--mx-w-medium);
  color: var(--mx-ink);
}
.mx-link::before { content: ""; width: 7px; height: 7px; background: var(--mx-mark); box-shadow: inset 0 0 0 1px var(--mx-mark-edge); }
.mx-link .mx-btn__arrow { width: 14px; height: 14px; transition: transform var(--mx-dur) var(--mx-ease); }
.mx-link:hover .mx-btn__arrow { transform: translateX(4px); }

/* 본문 속 링크 — 밑줄 대신 글자 굵기 + 뒤 화살표 */
.mx-inline-link { color: var(--mx-ink); font-weight: var(--mx-w-medium); }
.mx-inline-link::after { content: " →"; }

/* 큰 링크 행 — 섹션 끝에서 다음 페이지로. 위아래 선 사이 한 줄 */
.mx-biglink {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--mx-s-5);
  padding: var(--mx-s-6) var(--mx-gutter);
  border-bottom: var(--mx-line-w) solid var(--mx-line);
  font-size: var(--mx-fs-h2);
  font-weight: var(--mx-w-medium);
  letter-spacing: var(--mx-ls-head);
  color: var(--mx-ink);
  transition: background var(--mx-dur) var(--mx-ease);
}
.mx-biglink .mx-btn__arrow { width: 28px; height: 28px; }
.mx-biglink:hover { background: var(--mx-sky); }
.mx-biglink:hover .mx-btn__arrow { transform: translateX(8px); }

/* ---- 08 태그 · 배지 ----------------------------------------------------- */
.mx-tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border: var(--mx-line-w) solid var(--mx-ink);
  font-size: var(--mx-fs-label);
  font-weight: var(--mx-w-medium);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mx-ink);
  background: transparent;
  white-space: nowrap;
}
.mx-tag--sky    { background: var(--mx-sky); border-color: var(--mx-sky); }       /* 라벨 태그 — 메인 */
.mx-tag--green  { background: var(--mx-green); border-color: var(--mx-green); }   /* 분류 태그 — 보조 */
.mx-tag--slate  { background: var(--mx-ink); border-color: var(--mx-ink); color: var(--mx-white); }
.mx-tag--soft   { border-color: var(--mx-line-soft); color: var(--mx-ink-body); }
.mx-tag--white  { background: var(--mx-white); }
.mx-tag--ko     { letter-spacing: 0; text-transform: none; font-size: var(--mx-fs-caption); }
.mx-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---- 09 폼 -------------------------------------------------------------- */
.mx-form { display: grid; gap: var(--mx-s-5); }
.mx-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mx-s-4); }
@media (max-width: 640px) { .mx-form__row { grid-template-columns: minmax(0, 1fr); } }

.mx-field { display: grid; gap: 8px; align-content: start; }
.mx-field__label { font-size: var(--mx-fs-caption); font-weight: var(--mx-w-medium); color: var(--mx-ink); }
.mx-field__label .mx-req { color: var(--mx-ink-muted); font-weight: var(--mx-w-regular); margin-left: 4px; }
.mx-field__hint  { font-size: var(--mx-fs-caption); color: var(--mx-ink-muted); }

.mx-input, .mx-select, .mx-textarea {
  width: 100%;
  height: var(--mx-h-md);
  padding: 0 16px;
  border: var(--mx-line-w) solid var(--mx-ink);
  border-radius: var(--mx-radius);
  background: var(--mx-white);
  color: var(--mx-ink);
  font: inherit;
  font-size: 15px;
  transition: box-shadow var(--mx-dur) var(--mx-ease), border-color var(--mx-dur) var(--mx-ease);
  -webkit-appearance: none;
  appearance: none;
}
.mx-textarea { height: auto; min-height: 140px; padding: 14px 16px; resize: vertical; line-height: 1.6; }
.mx-input::placeholder, .mx-textarea::placeholder { color: var(--mx-ink-faint); }
.mx-input:focus, .mx-select:focus, .mx-textarea:focus {
  outline: none;
  border-color: var(--mx-focus);
  box-shadow: inset 0 0 0 1px var(--mx-focus);   /* 선을 2px 로 — 모서리는 그대로 직각 */
}
.mx-input:disabled, .mx-select:disabled, .mx-textarea:disabled { background: var(--mx-beige-100); border-color: var(--mx-beige-300); color: var(--mx-ink-muted); }
.mx-select {
  padding-right: 44px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--mx-ink) 50%),
    linear-gradient(135deg, var(--mx-ink) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 17px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

/* 오류 — 빨강 테두리 2px + 글자 앞 기호. 색만으로 알리지 않음 */
.mx-field--error .mx-input,
.mx-field--error .mx-select,
.mx-field--error .mx-textarea { border-color: var(--mx-danger); box-shadow: inset 0 0 0 1px var(--mx-danger); }
.mx-field--error .mx-field__hint { color: var(--mx-danger); }
.mx-field--error .mx-field__hint::before { content: "! "; font-weight: var(--mx-w-medium); }

/* 체크박스 — 사각 */
.mx-check, .mx-radio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  font-size: 15px;
  color: var(--mx-ink);
  cursor: pointer;
}
.mx-check input, .mx-radio input {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  margin: 0;
  border: var(--mx-line-w) solid var(--mx-ink);
  background: var(--mx-white);
  display: grid;
  place-content: center;
  flex: none;
  cursor: pointer;
}
.mx-check input { border-radius: var(--mx-radius); }
.mx-check input::after {
  content: "";
  width: 10px; height: 10px;
  background: var(--mx-sky-deep);
  transform: scale(0);
  transition: transform .12s var(--mx-ease);
}
.mx-check input:checked::after { transform: scale(1); }

/* 라디오 — 예외: 원 (체크박스와 구별해야 하므로) */
.mx-radio input { border-radius: var(--mx-radius-round); }
.mx-radio input::after {
  content: "";
  width: 8px; height: 8px;
  border-radius: var(--mx-radius-round);
  background: var(--mx-sky-deep);
  transform: scale(0);
  transition: transform .12s var(--mx-ease);
}
.mx-radio input:checked::after { transform: scale(1); }
.mx-check input:disabled, .mx-radio input:disabled { background: var(--mx-beige-100); border-color: var(--mx-beige-300); cursor: not-allowed; }

/* 선택 칸 — 라디오 · 체크를 칸 모양으로 (설치 환경 · 화면 형태 고르기) */
.mx-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--mx-line-w); background: var(--mx-ink); border: var(--mx-line-w) solid var(--mx-ink); }
.mx-choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mx-choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mx-choices--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 560px) { .mx-choices--3, .mx-choices--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 항목 수가 열 수로 나눠떨어지지 않으면 마지막 칸에 .mx-choice--wide 로 남는 자리를 채움 */
.mx-choice--wide { grid-column: 1 / -1; }
.mx-choice { position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 16px; background: var(--mx-white); font-size: var(--mx-fs-small); font-weight: var(--mx-w-medium); color: var(--mx-ink); cursor: pointer; }
.mx-choice input { position: absolute; opacity: 0; pointer-events: none; }
.mx-choice::before { content: ""; width: 10px; height: 10px; border: var(--mx-line-w) solid var(--mx-ink); flex: none; }
.mx-choice:hover { background: var(--mx-beige-50); }
.mx-choice:has(input:checked) { background: var(--mx-ink); color: var(--mx-white); }
.mx-choice:has(input:checked)::before { background: var(--mx-sky); border-color: var(--mx-sky); }
.mx-choice:has(input:focus-visible) { outline: 2px solid var(--mx-focus); outline-offset: -2px; }

/* ---- 10 세그먼트 · 탭 --------------------------------------------------- */
.mx-segment { display: inline-flex; flex-wrap: wrap; border: var(--mx-line-w) solid var(--mx-ink); background: var(--mx-white); }
.mx-segment button, .mx-segment a {
  height: var(--mx-h-sm);
  padding: 0 18px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: var(--mx-w-medium);
  color: var(--mx-ink-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mx-segment > * + * { border-left: var(--mx-line-w) solid var(--mx-ink) !important; }
.mx-segment button:hover, .mx-segment a:hover { color: var(--mx-ink); background: var(--mx-beige-50); }
.mx-segment [aria-pressed="true"], .mx-segment [aria-selected="true"], .mx-segment [aria-current="true"] { background: var(--mx-ink); color: var(--mx-white); }

/* 탭 — 칸 머리. 고른 칸은 흰 면 + 주황 점, 아래 선이 열림 (밑줄 아님) */
.mx-tabs { display: flex; border-bottom: var(--mx-line-w) solid var(--mx-ink); overflow-x: auto; }
.mx-tabs [role="tab"] {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 var(--mx-s-5);
  margin-bottom: calc(var(--mx-line-w) * -1);
  border: var(--mx-line-w) solid transparent;
  background: transparent;
  font-size: var(--mx-fs-small);
  font-weight: var(--mx-w-medium);
  color: var(--mx-ink-muted);
  cursor: pointer;
}
.mx-tabs [role="tab"]::before { content: ""; width: 6px; height: 6px; border: var(--mx-line-w) solid var(--mx-ink-faint); }
.mx-tabs [role="tab"]:hover { color: var(--mx-ink); }
.mx-tabs [role="tab"][aria-selected="true"] {
  color: var(--mx-ink);
  background: var(--mx-white);
  border-color: var(--mx-ink) var(--mx-ink) var(--mx-white);
}
.mx-tabs [role="tab"][aria-selected="true"]::before { background: var(--mx-mark); border-color: var(--mx-mark-edge); }
.mx-tabpanel { background: var(--mx-white); border: var(--mx-line-w) solid var(--mx-ink); border-top: 0; padding: var(--mx-cell-pad); }
.mx-tabpanel[hidden] { display: none; }

/* 위치 점 — 슬라이드 몇 번째인지 (예외: 원) */
.mx-dots { display: flex; gap: 8px; }
.mx-dots button { width: 8px; height: 8px; padding: 0; border: var(--mx-line-w) solid var(--mx-ink); border-radius: var(--mx-radius-round); background: transparent; cursor: pointer; }
.mx-dots button[aria-current="true"] { background: var(--mx-sky-deep); border-color: var(--mx-sky-deep); }

/* ---- 11 사진 · 비주얼 --------------------------------------------------- */
/* 사진 틀 — 비율 고정, 꽉 채움 */
.mx-media { position: relative; overflow: hidden; background: var(--mx-beige-200); aspect-ratio: 4 / 3; }
.mx-media > img, .mx-media > video { width: 100%; height: 100%; object-fit: cover; transition: transform var(--mx-dur-slow) var(--mx-ease); }
.mx-media--wide   { aspect-ratio: 16 / 9; }
.mx-media--square { aspect-ratio: 1 / 1; }
.mx-media--tall   { aspect-ratio: 3 / 4; }
.mx-media--fill   { aspect-ratio: auto; height: 100%; min-height: 320px; }
.mx-media--fill > img, .mx-media--fill > video { position: absolute; inset: 0; }   /* 사진 높이가 칸을 밀지 않게 */
a:hover .mx-media > img { transform: scale(1.03); }

/* 사진 위 이름표 — 왼쪽 아래 귀퉁이 칸 */
.mx-media__tag, .mx-visual__caption {
  position: absolute;
  left: 0; bottom: 0;
  padding: 8px 12px;
  background: var(--mx-beige-50);
  border-top: var(--mx-line-w) solid var(--mx-ink);
  border-right: var(--mx-line-w) solid var(--mx-ink);
  font-size: var(--mx-fs-label);
  font-weight: var(--mx-w-medium);
  letter-spacing: var(--mx-ls-label);
  text-transform: uppercase;
  color: var(--mx-ink);
}
.mx-figcaption { padding: 12px 0 0; font-size: var(--mx-fs-caption); color: var(--mx-ink-muted); }

/* 플레이스홀더 — 사진이 오기 전까지. 선으로 된 LED 픽셀 피치 */
.mx-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  background-color: var(--mx-beige-200);
  background-image:
    linear-gradient(var(--mx-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--mx-line-soft) 1px, transparent 1px);
  background-size: 16px 16px;
  overflow: hidden;
}
.mx-visual--sky    { background-color: var(--mx-sky); }
.mx-visual--mist   { background-color: var(--mx-mist); }
.mx-visual--green  { background-color: var(--mx-green); }
.mx-visual--white  { background-color: var(--mx-white); }
.mx-visual--wide   { aspect-ratio: 16 / 9; }
.mx-visual--tall   { aspect-ratio: 3 / 4; }
.mx-visual--fill   { aspect-ratio: auto; height: 100%; min-height: 280px; }

/* 히어로 — 사진 · 영상이 화면 끝까지, 글은 상자 없이 영상 바닥 슬레이트 그라디언트 위에 흰 글자로 (2026-10-29)
   그라디언트: 글 묶음 위 120px 동안 투명 → 슬레이트 72%, 글 묶음 안 72% → 88%.
   → 글 뒤 영상이 완전히 흰 곳이어도 흰 글자 대비 AA (작은 글자 4.5 · 큰 제목 3).
   "흰 글자는 슬레이트 면 위에서만" 규칙 안 — 슬레이트 그라디언트가 면 역할.
   영상 위쪽 · 화면을 덜 가리도록 글 묶음을 낮게(제목 한 줄 크기) 두고 그라디언트도 그 높이만. */
.mx-hero { position: relative; min-height: min(88vh, 860px); display: grid; align-items: end; overflow: visible; border-bottom: var(--mx-line-w) solid var(--mx-line); }
.mx-hero__media { position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); overflow: hidden; background: var(--mx-ink); }   /* 틀 밖 화면 끝까지 */
.mx-hero__media > img, .mx-hero__media > video { width: 100%; height: 100%; object-fit: cover; }
.mx-hero__panel {
  position: relative;
  isolation: isolate;
  width: 100%;
  display: grid;
  gap: var(--mx-s-4);
  justify-items: start;
  padding: 0 var(--mx-gutter) var(--mx-s-7);
  color: var(--mx-white);
}
.mx-hero__panel > * { max-width: 820px; }
.mx-hero__panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: calc(50% - 50vw); right: calc(50% - 50vw);
  top: -120px; bottom: 0;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--mx-ink) 0%, transparent) 0,
    color-mix(in srgb, var(--mx-ink) 72%, transparent) 120px,
    color-mix(in srgb, var(--mx-ink) 88%, transparent) 100%);
  pointer-events: none;
}
.mx-hero__panel :is(.mx-display, .mx-h1, .mx-lead, .mx-eyebrow, p) { color: var(--mx-white); }
.mx-hero__panel .mx-display { font-size: clamp(40px, 4.8vw, 72px); }   /* 한 줄 — 글 묶음을 낮게 */
/* 반전 단추 — 주: 흰 면 + 슬레이트 글자(11.0), hover 하늘. 보조: 흰 선 · 흰 글자 */
.mx-hero__panel .mx-btn { --_bg: var(--mx-white); --_fg: var(--mx-ink); --_bd: var(--mx-white); --_bg-h: var(--mx-sky); --_fg-h: var(--mx-ink); --_bd-h: var(--mx-sky); }
.mx-hero__panel .mx-btn--outline { --_bg: transparent; --_fg: var(--mx-white); --_bd: var(--mx-white); --_bg-h: var(--mx-white); --_fg-h: var(--mx-ink); --_bd-h: var(--mx-white); }
.mx-hero__meta { display: none; }   /* 회사 정보 상자 — 쓰지 않음 (2026-10-29 삭제) */

/* 히어로 아래 띠 — 기본은 크림 띠 + 히어로 바닥선(어두운 그라디언트와 경계를 선으로 정리).
   .mx-marquee--slate 는 슬레이트 띠로 어두운 바닥을 이어 받는 안 */
.mx-marquee.mx-marquee--slate { background: var(--mx-ink); color: var(--mx-white); box-shadow: 0 0 0 100vw var(--mx-ink); clip-path: inset(0 -100vw); }   /* 화면 끝까지 — 어두운 히어로 바닥을 이어 받음 */
.mx-marquee.mx-marquee--slate .mx-marquee__track > span, .mx-marquee.mx-marquee--slate .mx-marquee__track > span b { color: var(--mx-white); }

@media (max-width: 640px) {
  /* 휴대폰: 글을 영상 아래로. 기본 = 크림 면 + 슬레이트 글자, .mx-hero--slate = 슬레이트 면 + 흰 글자 */
  .mx-hero { min-height: 0; grid-template-rows: 56vh auto; align-items: stretch; }
  .mx-hero__media { position: relative; inset: auto; left: auto; right: auto; }
  .mx-hero__panel { padding-top: var(--mx-s-6); padding-bottom: var(--mx-s-7); }
  .mx-hero__panel::before { display: none; }
  .mx-hero:not(.mx-hero--slate) .mx-hero__panel { color: var(--mx-ink); }
  .mx-hero:not(.mx-hero--slate) .mx-hero__panel :is(.mx-display, .mx-h1, .mx-eyebrow) { color: var(--mx-ink); }
  .mx-hero:not(.mx-hero--slate) .mx-hero__panel :is(.mx-lead, p) { color: var(--mx-ink-body); }
  .mx-hero:not(.mx-hero--slate) .mx-hero__panel .mx-btn { --_bg: var(--mx-ink); --_fg: var(--mx-white); --_bd: var(--mx-ink); --_bg-h: var(--mx-sky); --_fg-h: var(--mx-ink); --_bd-h: var(--mx-sky); }
  .mx-hero:not(.mx-hero--slate) .mx-hero__panel .mx-btn--outline { --_bg: transparent; --_fg: var(--mx-ink); --_bd: var(--mx-ink); --_bg-h: var(--mx-ink); --_fg-h: var(--mx-white); --_bd-h: var(--mx-ink); }
  .mx-hero--slate .mx-hero__panel { background: var(--mx-ink); }
}

/* ---- 12 카드 (칸 안의 구성) --------------------------------------------- */
.mx-card { display: flex; flex-direction: column; gap: var(--mx-s-5); height: 100%; }
.mx-card__top { display: flex; justify-content: space-between; align-items: center; gap: var(--mx-s-4); min-height: 26px; }
.mx-card__title { margin: 0; font-size: var(--mx-fs-h4); font-weight: var(--mx-w-medium); line-height: var(--mx-lh-head); color: var(--mx-ink); letter-spacing: -0.01em; }
.mx-card__sub { margin: -16px 0 0; font-size: var(--mx-fs-caption); font-weight: var(--mx-w-medium); letter-spacing: .04em; color: var(--mx-ink-muted); }
.mx-card__text { margin: 0; font-size: var(--mx-fs-small); line-height: 1.6; color: var(--mx-ink-body); }
.mx-card__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: var(--mx-s-4); }
.mx-card__arrow { width: 18px; height: 18px; color: var(--mx-ink); transition: transform var(--mx-dur) var(--mx-ease); }
a:hover .mx-card__arrow { transform: translateX(4px); }

/* 사진이 칸 가장자리까지 닿는 카드 — 사진 아래 선 */
.mx-card--photo { gap: 0; }
.mx-card--photo .mx-media { }   /* 사진과 글 사이 선 없음 (선 줄이기) */
.mx-card--photo .mx-card__body { display: flex; flex-direction: column; gap: var(--mx-s-4); padding: var(--mx-cell-pad); flex: 1; }

/* ---- 13 숫자 · 사양 · 목록 ---------------------------------------------- */
.mx-stat {
  font-size: clamp(40px, 4.4vw, 64px);
  font-weight: var(--mx-w-medium);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--mx-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mx-stat small {
  font-size: .36em;
  letter-spacing: 0;
  margin-left: 6px;
  vertical-align: top;
  position: relative;
  top: .2em;
}
.mx-stat-cell { display: grid; gap: var(--mx-s-4); align-content: space-between; min-height: 200px; }

/* 사양 목록 — 보조선 행 */
.mx-spec { margin: 0; padding: 0; list-style: none; border-top: var(--mx-line-w) solid var(--mx-ink); }
.mx-spec li, .mx-spec > div {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--mx-s-4);
  padding: 14px 0;
  border-bottom: var(--mx-line-w) solid var(--mx-line-soft);
  font-size: var(--mx-fs-small);
}
.mx-spec li > :first-child, .mx-spec dt { color: var(--mx-ink-muted); margin: 0; }
.mx-spec li > :last-child, .mx-spec dd  { color: var(--mx-ink); font-weight: var(--mx-w-medium); margin: 0; }

/* 체크 목록 — 주황 사각 점 */
.mx-checklist { margin: 0; padding: 0; list-style: none; }
.mx-checklist li {
  position: relative;
  padding: 12px 0 12px 19px;
  border-bottom: var(--mx-line-w) solid var(--mx-line-soft);
  font-size: var(--mx-fs-small);
  font-weight: var(--mx-w-medium);
  color: var(--mx-ink);
}
.mx-checklist li::before { content: ""; position: absolute; left: 0; top: calc(12px + .62em); width: 7px; height: 7px; background: var(--mx-mark); box-shadow: inset 0 0 0 1px var(--mx-mark-edge); }

/* 점 구분 목록 — "곡면 · 코너 · 실린더" 같은 나열 */
.mx-dotlist { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; }
.mx-dotlist li + li::before { content: "·"; margin: 0 .5em; color: var(--mx-ink-faint); }

/* ---- 14 단계 ------------------------------------------------------------ */
.mx-steps { counter-reset: mx-step; }
.mx-step { counter-increment: mx-step; display: flex; flex-direction: column; gap: var(--mx-s-3); }
.mx-step::before {
  content: counter(mx-step, decimal-leading-zero);
  margin-bottom: var(--mx-s-5);
  font-size: var(--mx-fs-label);
  font-weight: var(--mx-w-medium);
  letter-spacing: var(--mx-ls-label);
  color: var(--mx-ink-muted);
}
.mx-step__en { font-size: var(--mx-fs-label); font-weight: var(--mx-w-medium); letter-spacing: var(--mx-ls-label); text-transform: uppercase; color: var(--mx-ink-muted); }

/* 세로 흐름 — 진행 절차 상세. 왼쪽 큰 번호 칸 + 오른쪽 내용 */
.mx-flow { border-top: var(--mx-line-w) solid var(--mx-line); }
.mx-flow__item { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));   /* 4 · 4 · 4 — 3분할 계열 */ border-bottom: var(--mx-line-w) solid var(--mx-line); }
.mx-flow__item > * { padding: var(--mx-cell-pad); }
.mx-flow__item > * + * { border-left: var(--mx-line-w) solid var(--mx-line); }
.mx-flow__no { font-size: clamp(40px, 5vw, 72px); font-weight: var(--mx-w-medium); letter-spacing: -0.04em; line-height: 1; color: var(--mx-ink); font-variant-numeric: tabular-nums; }
.mx-flow__item:hover .mx-flow__no { color: var(--mx-sky-deep); }
@media (max-width: 900px) {
  .mx-flow__item { grid-template-columns: minmax(0, 1fr); }
  .mx-flow__item > * + * { border-left: 0; border-top: var(--mx-line-w) solid var(--mx-line-soft); }
}

/* ---- 15 표 -------------------------------------------------------------- */
.mx-table-wrap { overflow-x: auto; border: var(--mx-line-w) solid var(--mx-ink); background: var(--mx-white); }
.mx-table--wide { min-width: 820px; }   /* 열이 많은 표 — 좁은 화면에서 글자 단위로 꺾이지 않고 가로로 밀림 */
.mx-table { width: 100%; border-collapse: collapse; font-size: var(--mx-fs-small); font-variant-numeric: tabular-nums; }
.mx-table th, .mx-table td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: var(--mx-line-w) solid var(--mx-line-soft); }
.mx-table th + th, .mx-table td + td { border-left: var(--mx-line-w) solid var(--mx-line-soft); }
.mx-table thead th { background: var(--mx-beige-100); border-bottom: var(--mx-line-w) solid var(--mx-ink); font-size: var(--mx-fs-caption); font-weight: var(--mx-w-medium); color: var(--mx-ink); white-space: nowrap; }
.mx-table tbody th { font-weight: var(--mx-w-medium); color: var(--mx-ink); white-space: nowrap; }
.mx-table tbody tr:last-child > * { border-bottom: 0; }
.mx-table tbody tr:hover > * { background: var(--mx-beige-50); }

/* ---- 16 아코디언 -------------------------------------------------------- */
.mx-accordion { border-top: var(--mx-line-w) solid var(--mx-ink); }
.mx-accordion details { border-bottom: var(--mx-line-w) solid var(--mx-ink); }
.mx-accordion summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--mx-s-4);
  padding: 22px 0;
  list-style: none;
  font-size: var(--mx-fs-h4);
  font-weight: var(--mx-w-medium);
  color: var(--mx-ink);
  cursor: pointer;
}
.mx-accordion summary::-webkit-details-marker { display: none; }
.mx-accordion summary::after {
  content: "";
  flex: none;
  width: 14px; height: 14px;
  background:
    linear-gradient(var(--mx-ink), var(--mx-ink)) center / 14px 1.5px no-repeat,
    linear-gradient(var(--mx-ink), var(--mx-ink)) center / 1.5px 14px no-repeat;
  transition: transform var(--mx-dur) var(--mx-ease);
}
.mx-accordion details[open] summary::after { transform: rotate(45deg); }
.mx-accordion details[open] summary { color: var(--mx-ink); }
.mx-accordion__body { padding: 0 0 24px; max-width: var(--mx-measure); }

/* ---- 17 알림 ------------------------------------------------------------ */
.mx-alert {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  padding: 16px 18px;
  border: var(--mx-line-w) solid var(--mx-ink);
  background: var(--mx-white);
  font-size: var(--mx-fs-small);
  color: var(--mx-ink-body);
}
.mx-alert::before { content: ""; grid-row: span 2; width: 10px; height: 10px; margin-top: 6px; background: var(--mx-ink); }
.mx-alert__title { font-weight: var(--mx-w-medium); color: var(--mx-ink); }
.mx-alert--success { border-color: var(--mx-success); background: var(--mx-success-tint); }
.mx-alert--success::before { background: var(--mx-success); }
.mx-alert--danger  { border-color: var(--mx-danger); background: var(--mx-danger-tint); }
.mx-alert--danger::before  { background: var(--mx-danger); }
.mx-alert--info    { border-color: var(--mx-ink); background: var(--mx-sky-soft); }
.mx-alert--info::before { background: var(--mx-sky-mid); }

/* 토스트 — 화면 아래 가운데, 잠깐 */
.mx-toast {
  position: fixed;
  left: 50%; bottom: 24px;
  z-index: var(--mx-z-toast);
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px;
  background: var(--mx-ink);
  color: var(--mx-white);
  font-size: var(--mx-fs-small);
  font-weight: var(--mx-w-medium);
}
.mx-toast::before { content: ""; width: 8px; height: 8px; background: var(--mx-sky); }

/* ---- 18 띠 · CTA -------------------------------------------------------- */
.mx-marquee { display: flex; overflow: hidden; border-bottom: var(--mx-line-w) solid var(--mx-line); background: var(--mx-beige-50); color: var(--mx-ink); }
.mx-marquee--sky { background: var(--mx-sky); }
.mx-marquee--green { background: var(--mx-green); }
.mx-marquee__track {
  display: flex;
  flex: none;
  gap: var(--mx-s-7);
  padding: 16px var(--mx-s-5);
  animation: mx-marquee 42s linear infinite;
  font-size: var(--mx-fs-small);
  font-weight: var(--mx-w-medium);
  white-space: nowrap;
}
.mx-marquee__track > span { display: inline-flex; align-items: center; gap: 10px; color: var(--mx-ink-body); }
.mx-marquee__track > span b { font-weight: var(--mx-w-medium); color: var(--mx-ink); }
.mx-marquee__track > span::after { content: ""; width: 6px; height: 6px; margin-left: calc(var(--mx-s-7) - 10px); background: var(--mx-mark); box-shadow: inset 0 0 0 1px var(--mx-mark-edge); }
:is(.mx-marquee--sky, .mx-marquee--green) .mx-marquee__track > span::after { background: var(--mx-ink); }
@keyframes mx-marquee { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .mx-marquee__track { animation: none; } }

/* CTA 띠 — 페이지 끝 문의 유도. 주황 칸 + 베이지 칸 */
.mx-cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-bottom: var(--mx-line-w) solid var(--mx-line); }
.mx-cta > * { padding: var(--mx-section) var(--mx-gutter); }
.mx-cta > * + * { box-shadow: calc(var(--mx-line-w) * -1) 0 0 0 var(--mx-line); }
.mx-cta__main { background: var(--mx-sky); color: var(--mx-ink); display: grid; gap: var(--mx-s-5); align-content: start; }
.mx-cta__main .mx-eyebrow::before { background: var(--mx-ink); }
.mx-cta--green .mx-cta__main { background: var(--mx-green); }   /* 넓은 면은 하늘 · 녹색 번갈아 써도 됨 */
.mx-cta__side { background: var(--mx-beige-50); display: grid; gap: var(--mx-s-4); align-content: end; }
@media (max-width: 900px) { .mx-cta { grid-template-columns: minmax(0, 1fr); } .mx-cta > * { padding: var(--mx-s-8) var(--mx-gutter); } }

/* ---- 19 페이지 머리 · 경로 ---------------------------------------------- */
.mx-pagehead { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-bottom: var(--mx-line-w) solid var(--mx-line); }
.mx-pagehead > * { background: var(--mx-beige-50); padding: var(--mx-s-8) var(--mx-gutter) var(--mx-s-7); display: grid; gap: var(--mx-s-5); align-content: start; }
.mx-pagehead > :last-child { align-content: end; }
@media (max-width: 900px) { .mx-pagehead { grid-template-columns: minmax(0, 1fr); } .mx-pagehead > * { padding: var(--mx-s-7) var(--mx-gutter); } }

.mx-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: var(--mx-fs-caption); color: var(--mx-ink-muted); }
.mx-breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--mx-ink-faint); }
.mx-breadcrumb a:hover { color: var(--mx-ink); }
.mx-breadcrumb [aria-current="page"] { color: var(--mx-ink); font-weight: var(--mx-w-medium); }

/* 이전 · 다음 페이지 */
.mx-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-bottom: var(--mx-line-w) solid var(--mx-line); }
.mx-pager a { display: grid; gap: 6px; padding: var(--mx-s-6) var(--mx-gutter); background: var(--mx-beige-50); font-size: var(--mx-fs-h4); font-weight: var(--mx-w-medium); color: var(--mx-ink); }
.mx-pager a:last-child { text-align: right; box-shadow: calc(var(--mx-line-w) * -1) 0 0 0 var(--mx-line); }
.mx-pager a:hover { background: var(--mx-white); }
.mx-pager small { font-size: var(--mx-fs-label); letter-spacing: var(--mx-ls-label); text-transform: uppercase; color: var(--mx-ink-muted); }

/* ---- 20 푸터 ------------------------------------------------------------ */
.mx-footer { background: var(--mx-beige-100); }
.mx-footer .mx-cell { background: var(--mx-beige-100); box-shadow: none; }   /* 푸터 안 세로선 없음 — 어느 계열 페이지에서도 선이 어긋나지 않게 */
.mx-footer__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: var(--mx-fs-small); }
.mx-footer__list a:hover { color: var(--mx-ink); }
.mx-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--mx-s-4); padding: 20px var(--mx-gutter); font-size: var(--mx-fs-caption); color: var(--mx-ink-muted); }
.mx-footer__word { padding: var(--mx-s-7) var(--mx-gutter) var(--mx-s-6); border-bottom: var(--mx-line-w) solid var(--mx-line); }
.mx-footer__word img { width: 100%; height: auto; max-width: none; }

/* ---- 21 등장 모션 ------------------------------------------------------- */
/* JS 가 .mx-reveal 에 data-shown 을 붙입니다. JS 가 없으면 그냥 보입니다. */
.mx-js .mx-reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--mx-dur-slow) var(--mx-ease), transform var(--mx-dur-slow) var(--mx-ease); }
.mx-js .mx-reveal[data-shown] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .mx-js .mx-reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: 0s !important; }
}