@charset "UTF-8";
/* ==========================================================================
   혜록정보기술 — style.css
   DESIGN.md (Apple-design-analysis) 기준.
   1. Tokens
   2. Reset & base
   3. Typography
   4. Layout — tiles & containers
   5. Components — nav, buttons, cards, lists, tables, form, mock, footer
   6. Page-specific
   7. Motion
   8. Media queries  (1440 / 1068 / 833 / 640 / 480)

   시스템 원칙 (DESIGN.md):
   - 인터랙션 색은 Action Blue 하나. 두 번째 강조색 없음.
   - 섹션 구분은 테두리가 아니라 타일 배경색 교차(light ↔ parchment ↔ near-black).
   - 그래디언트 없음. 그림자는 제품 이미지용 1개뿐 (카드·버튼·텍스트 금지).
   - 반경 문법: sm 8 / md 11 / lg 18 / pill. 중간값 섞지 않음.
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
  /* Brand & accent — 단일 인터랙션 색 */
  --primary: #0066cc;
  --primary-focus: #0071e3;
  --primary-on-dark: #2997ff;

  /* Surface */
  --canvas: #ffffff;
  --canvas-parchment: #f5f5f7;
  --surface-pearl: #fafafc;
  --surface-tile-1: #272729;
  --surface-tile-2: #2a2a2c;
  --surface-tile-3: #252527;
  --surface-black: #000000;

  /* Text */
  --ink: #1d1d1f;
  --ink-muted-80: #333333;
  --ink-muted-48: #7a7a7a;
  --on-dark: #ffffff;
  --body-muted: #cccccc;

  /* Hairlines */
  --divider-soft: #f0f0f0;
  --hairline: #e0e0e0;
  --hairline-alpha: rgba(0, 0, 0, .08);
  --hairline-on-dark: rgba(255, 255, 255, .18);

  /* DESIGN.md 미기재 항목(Known Gaps: 폼 검증 상태) — Apple 시스템 레드로 보완 */
  --system-red: #d70015;

  /* Radius */
  --r-xs: 5px;
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 18px;
  --r-pill: 9999px;

  /* Spacing */
  --sp-xxs: 4px;
  --sp-xs: 8px;
  --sp-sm: 12px;
  --sp-md: 17px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-xxl: 48px;
  --sp-section: 80px;

  /* Layout */
  --w-text: 980px;
  --w-grid: 1240px;
  --w-lock: 1440px;
  --gutter: 24px;
  --nav-global-h: 44px;
  --nav-sub-h: 52px;

  /* 제품 이미지 전용 그림자 — 시스템 전체에서 유일 */
  --shadow-product: rgba(0, 0, 0, .22) 3px 5px 30px 0;

  /* Type
     SF Pro 는 애플 시스템 폰트다. 애플 기기에서는 -apple-system 이 실제 SF Pro 로
     해석되고, 그 외 환경에서는 Pretendard 가 대역을 맡는다 (라틴 비율이 SF Pro 에
     가깝고 한글까지 한 벌로 커버한다. DESIGN.md 가 권한 Inter 는 한글이 없어
     한글 본문에서 폰트가 갈리므로 쓰지 않았다). */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui,
    "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui,
    "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;      /* 16px 아님 — 애플의 읽는 속도 */
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

/* 언어별 조판: 영문은 DESIGN.md 본문 규격, 국문은 한글 조판 기준 */
html[lang="en"] body { line-height: 1.47; letter-spacing: -.022em; }
html[lang="ko"] body { line-height: 1.7; letter-spacing: -.01em; }

img, svg { max-width: 100%; }
svg { display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
p { margin: 0; }

a { color: var(--primary); text-underline-offset: 3px; }
a:hover { text-decoration: underline; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--primary-focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.skip-link {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 300;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: var(--on-dark);
  font-size: 14px;
  text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--on-dark); }

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

/* ==========================================================================
   3. Typography
   ========================================================================== */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;               /* 700 아님 */
  word-break: keep-all;
  text-wrap: pretty;
}

/* hero-display 56/600/1.07 — 반응형 래더는 미디어쿼리에서 40 → 34 → 28 */
.t-hero {
  font-size: 56px;
  line-height: 1.07;
  letter-spacing: -.015em;        /* -0.28px + 대체 폰트 보정 -0.01em */
}
/* display-lg 40/600/1.10 */
.t-display {
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -.012em;
}
/* display-md 34/600/1.47 */
.t-display-md {
  font-size: 34px;
  line-height: 1.3;
  letter-spacing: -.014em;
}
/* lead 28/400/1.14 */
.t-lead {
  max-width: 34ch;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: 0;
}
/* lead-airy 24/300/1.5 — 드문 weight 300 */
.t-lead-airy {
  max-width: 46ch;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0;
}
/* tagline 21/600/1.19 */
.t-tagline {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.19;
  letter-spacing: .011em;
}
.t-body { font-size: 17px; font-weight: 400; }
.t-body-strong { font-size: 17px; font-weight: 600; line-height: 1.24; }
.t-caption { font-size: 14px; line-height: 1.43; letter-spacing: -.016em; }
.t-caption-strong { font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: -.016em; }
.t-fine { font-size: 12px; line-height: 1.35; letter-spacing: -.01em; }

.muted { color: var(--ink-muted-80); }
.muted-48 { color: var(--ink-muted-48); }
.measure { max-width: 46ch; }
.mono { font-family: var(--font-mono); letter-spacing: 0; }
strong { font-weight: 600; }

/* 다크 타일 안의 텍스트 */
.tile--dark .muted,
.tile--dark .t-lead,
.tile--dark .t-lead-airy,
.tile--dark .card__text,
.tile--dark .list__item,
.tile--dark .deflist__val,
.tile--dark .verify__text,
.tile--dark .rows__desc,
.tile--dark .t-caption { color: var(--body-muted); }
.tile--dark, .tile--dark h1, .tile--dark h2, .tile--dark h3, .tile--dark h4 { color: var(--on-dark); }
.tile--dark a { color: var(--primary-on-dark); }

/* ==========================================================================
   4. Layout — tiles & containers
   섹션은 풀블리드 타일. 타일끼리 gap 0, 테두리 없음. 배경색 변화가 구분선이다.
   ========================================================================== */
.tile { padding: var(--sp-section) 0; }
.tile--white { background: var(--canvas); }
.tile--parchment { background: var(--canvas-parchment); }
.tile--dark { background: var(--surface-tile-1); }
.tile--dark-2 { background: var(--surface-tile-2); }
.tile--dark-3 { background: var(--surface-tile-3); }

.tile__inner {
  width: 100%;
  max-width: var(--w-text);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.tile__inner--wide { max-width: var(--w-grid); }
.tile__inner--lock { max-width: var(--w-lock); }

/* 히어로·CTA 타일은 중앙 정렬 스택, 참조 성격의 조밀한 섹션은 좌측 정렬 */
.tile--center .tile__inner { text-align: center; }
.tile--center .t-lead,
.tile--center .t-lead-airy,
.tile--center .measure { margin-left: auto; margin-right: auto; }
.tile--center .t-lead { max-width: 46ch; }
.tile--center .t-lead-airy { max-width: 56ch; }
.tile--center .actions { justify-content: center; }

.tile__head { max-width: 46ch; margin-bottom: var(--sp-xxl); }
.tile--center .tile__head { margin-left: auto; margin-right: auto; }
.tile__head .t-lead-airy { margin-top: var(--sp-md); }

.stack > * + * { margin-top: var(--sp-lg); }
.stack--tight > * + * { margin-top: var(--sp-sm); }
.stack--loose > * + * { margin-top: var(--sp-xxl); }
.mt-xs { margin-top: var(--sp-xs); }
.mt-sm { margin-top: var(--sp-sm); }
.mt-md { margin-top: var(--sp-md); }
.mt-lg { margin-top: var(--sp-lg); }
.mt-xl { margin-top: var(--sp-xl); }
.mt-xxl { margin-top: var(--sp-xxl); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-xxl);
  align-items: start;
}
.split--wide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm) var(--sp-lg);
  align-items: center;
}

/* ==========================================================================
   5. Components
   ========================================================================== */

/* --- Global nav (black, 44px) ------------------------------------------- */
.globalnav {
  position: relative;
  z-index: 120;
  height: var(--nav-global-h);
  background: var(--surface-black);
  color: var(--on-dark);
}
.globalnav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  height: 100%;
  max-width: var(--w-lock);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.globalnav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  height: 100%;
  color: var(--on-dark);
  font-size: 12px;
  letter-spacing: -.01em;
  text-decoration: none;
}
.globalnav__brand:hover { text-decoration: none; opacity: .8; }
.globalnav__utils { display: flex; align-items: center; gap: var(--sp-sm); }
.globalnav__link {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--sp-xs);
  color: var(--on-dark);
  font-size: 12px;
  line-height: 1;
  letter-spacing: -.01em;
  text-decoration: none;
  opacity: .88;
}
.globalnav__link:hover { opacity: 1; text-decoration: none; }

/* --- Sub nav (frosted parchment, 52px, sticky) -------------------------- */
.subnav {
  position: sticky;
  top: 0;
  z-index: 110;
  min-height: var(--nav-sub-h);
  background: rgba(245, 245, 247, .8);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline-alpha);
}
.subnav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  min-height: var(--nav-sub-h);
  max-width: var(--w-lock);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.subnav__name {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .011em;
  text-decoration: none;
  white-space: nowrap;
}
.subnav__name:hover { text-decoration: none; }
.subnav__right { display: flex; align-items: center; gap: var(--sp-lg); }
.subnav__links { display: flex; align-items: center; gap: var(--sp-lg); }
.subnav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.29;
  letter-spacing: -.016em;
  text-decoration: none;
  white-space: nowrap;
}
.subnav__link:hover { color: var(--primary); text-decoration: none; }
.subnav__link[aria-current="page"] { color: var(--ink-muted-48); }
.subnav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  cursor: pointer;
}
.subnav__toggle:active { transform: scale(.95); }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
  border: 1px solid transparent;
  font-family: var(--font-text);
  text-decoration: none;
  cursor: pointer;
  transition: opacity 200ms var(--ease), background-color 200ms var(--ease),
    color 200ms var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.95); }   /* 시스템 전역 프레스 인터랙션 */

/* button-primary — 시그니처 블루 필 */
.btn--primary {
  min-height: 44px;
  padding: 11px 22px;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: var(--on-dark);
  font-size: 17px;
  line-height: 1.24;
}
.btn--primary:hover { background: #0071e3; color: var(--on-dark); }

/* button-secondary-pill — 고스트 필 */
.btn--ghost {
  min-height: 44px;
  padding: 11px 22px;
  border-radius: var(--r-pill);
  border-color: var(--primary);
  background: transparent;
  color: var(--primary);
  font-size: 17px;
  line-height: 1.24;
}
.btn--ghost:hover { background: rgba(0, 102, 204, .06); color: var(--primary); }
.tile--dark .btn--ghost { border-color: var(--primary-on-dark); color: var(--primary-on-dark); }
.tile--dark .btn--ghost:hover { background: rgba(41, 151, 255, .12); }

/* button-store-hero — 큰 1차 CTA (18px / weight 300) */
.btn--hero {
  min-height: 48px;
  padding: 14px 28px;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: var(--on-dark);
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
}
.btn--hero:hover { background: #0071e3; color: var(--on-dark); }

/* button-dark-utility — 글로벌 내비의 유틸리티 */
.btn--utility {
  min-height: 32px;
  padding: 8px 15px;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--on-dark);
  font-size: 14px;
  line-height: 1.29;
  letter-spacing: -.016em;
}
.btn--utility:hover { background: #2f2f31; color: var(--on-dark); }

/* button-pearl-capsule */
.btn--pearl {
  min-height: 44px;
  padding: 8px 14px;
  border: 3px solid var(--divider-soft);
  border-radius: var(--r-md);
  background: var(--surface-pearl);
  color: var(--ink-muted-80);
  font-size: 14px;
}
.btn--pearl:hover { background: var(--canvas); color: var(--ink); }

.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn[disabled]:active { transform: none; }
.btn__icon { flex: none; }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--primary);
  font-size: 17px;
  text-decoration: none;
  align-self: flex-start;
}
.textlink:hover { text-decoration: underline; }
.textlink--onDark { color: var(--primary-on-dark); }

/* 언어 토글 — button-dark-utility 문법 */
.lang { display: inline-flex; align-items: center; gap: 2px; }
.lang__btn {
  min-width: 44px;
  min-height: 32px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--on-dark);
  font-size: 14px;
  line-height: 1.29;
  letter-spacing: -.016em;
  opacity: .7;
  cursor: pointer;
  transition: background-color 200ms var(--ease), opacity 200ms var(--ease);
}
.lang__btn:hover { opacity: 1; }
.lang__btn:active { transform: scale(.95); }
.lang__btn[aria-pressed="true"] { background: var(--ink); opacity: 1; }

/* --- Cards (store-utility-card) ----------------------------------------- */
.card {
  padding: var(--sp-lg);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--canvas);
}
.tile--parchment .card { border-color: var(--hairline); }
.tile--dark .card {
  border-color: var(--hairline-on-dark);
  background: transparent;
}
.card__title { margin-bottom: var(--sp-xs); font-size: 17px; font-weight: 600; line-height: 1.24; }
.card__text { color: var(--ink-muted-80); font-size: 17px; }
.card--pad-lg { padding: var(--sp-xl); }
.card--flat { border: 0; background: transparent; padding: 0; }

.cards {
  display: grid;
  gap: var(--sp-lg);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.cards--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

/* --- Steps -------------------------------------------------------------- */
.steps { counter-reset: step; }
.steps__item {
  counter-increment: step;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--sp-lg);
  padding: var(--sp-lg) 0;
  border-top: 1px solid var(--hairline);
}
.tile--dark .steps__item { border-color: var(--hairline-on-dark); }
.steps__item:last-child { border-bottom: 1px solid var(--hairline); }
.tile--dark .steps__item:last-child { border-color: var(--hairline-on-dark); }
.steps__num {
  color: var(--ink-muted-48);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.016em;
}
.steps__num::before { content: counter(step, decimal-leading-zero); }
.steps__title { margin-bottom: var(--sp-xs); font-size: 21px; font-weight: 600; line-height: 1.19; }
.steps__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xxs) var(--sp-lg);
  color: var(--ink-muted-80);
  font-size: 14px;
  line-height: 1.43;
}
.tile--dark .steps__meta { color: var(--body-muted); }
.steps__label { color: var(--ink); font-weight: 600; margin-right: 6px; }
.tile--dark .steps__label { color: var(--on-dark); }

/* --- Definition rows ---------------------------------------------------- */
.deflist { margin: 0; }
.deflist__row {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--sp-xs) var(--sp-xl);
  padding: var(--sp-lg) 0;
  border-top: 1px solid var(--hairline);
}
.deflist__row:last-child { border-bottom: 1px solid var(--hairline); }
.tile--dark .deflist__row { border-color: var(--hairline-on-dark); }
.deflist__key { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.24; }
.deflist__val { margin: 0; color: var(--ink-muted-80); }

/* --- Key/value table ---------------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kv {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.kv th, .kv td {
  padding: var(--sp-md) var(--sp-lg) var(--sp-md) 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
  font-size: 17px;
  font-weight: 400;
}
.kv tr:first-child th, .kv tr:first-child td { border-top: 1px solid var(--hairline); }
.kv th {
  width: 34%;
  min-width: 132px;
  color: var(--ink-muted-48);
  font-weight: 400;
}
.kv td { color: var(--ink); }
/* 표·링크 목록의 단독 링크는 터치 타깃 44px 확보 */
.kv td a, .dense-links a { display: inline-flex; align-items: center; min-height: 44px; }

/* --- Lists -------------------------------------------------------------- */
.list { display: grid; gap: var(--sp-sm); }
.list__item {
  position: relative;
  padding-left: var(--sp-lg);
  color: var(--ink-muted-80);
}
.list__item::before {
  content: "";
  position: absolute;
  left: 2px; top: .62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--primary);
}
.tile--dark .list__item::before { background: var(--primary-on-dark); }
.list--num { counter-reset: n; }
.list--num .list__item { padding-left: var(--sp-xl); }
.list--num .list__item::before {
  counter-increment: n;
  content: counter(n);
  top: 0; left: 0;
  width: auto; height: auto;
  border-radius: 0;
  background: none;
  color: var(--ink-muted-48);
  font-variant-numeric: tabular-nums;
}
.tile--dark .list--num .list__item::before { background: none; color: var(--body-muted); }
.dense-links { display: grid; }
.dense-links a { font-size: 17px; line-height: 2.41; text-decoration: none; }
.dense-links a:hover { text-decoration: underline; }

/* --- Fit / not fit ------------------------------------------------------ */
.fit { display: grid; gap: var(--sp-lg); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.fit__col {
  padding: var(--sp-xl);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--canvas);
}
.fit__col--no { background: var(--canvas-parchment); }
.fit__title { margin-bottom: var(--sp-lg); font-size: 21px; font-weight: 600; line-height: 1.19; }
.fit__items { display: grid; gap: var(--sp-sm); }
.fit__item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--sp-sm);
  font-size: 17px;
}
.fit__icon { margin-top: .3em; color: var(--primary); }
.fit__col--no .fit__icon { color: var(--ink-muted-48); }

/* --- Decisions (FwdLink) ------------------------------------------------ */
.decisions { counter-reset: d; display: grid; gap: var(--sp-lg); }
.decision {
  counter-increment: d;
  padding: var(--sp-xl);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--canvas);
}
.decision__head { display: flex; gap: var(--sp-sm); align-items: baseline; margin-bottom: var(--sp-sm); }
.decision__num {
  flex: none;
  color: var(--ink-muted-48);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.decision__num::before { content: "0" counter(d); }
.decision__title { font-size: 21px; font-weight: 600; line-height: 1.19; }
.decision__text { color: var(--ink-muted-80); }
.decision__why {
  margin-top: var(--sp-md);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--divider-soft);
}
.decision__whyLabel {
  display: block;
  margin-bottom: var(--sp-xxs);
  color: var(--ink-muted-48);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.016em;
}
.decision__whyText { color: var(--ink); font-size: 17px; }

/* --- Verify (다크 타일 위, 크롬 없이 서페이스 전환만으로 강조) ---------- */
.verify { display: grid; gap: var(--sp-xxl); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.verify__item { display: flex; flex-direction: column; gap: var(--sp-sm); align-items: flex-start; }
.verify__badge {
  color: var(--body-muted);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.016em;
}
.verify__title { font-size: 28px; font-weight: 600; line-height: 1.24; letter-spacing: -.012em; }
.verify__text { color: var(--body-muted); }
.verify__stepsTitle { color: var(--on-dark); font-size: 14px; font-weight: 600; }
.verify__note {
  margin-top: var(--sp-xs);
  padding-top: var(--sp-sm);
  border-top: 1px solid var(--hairline-on-dark);
  color: var(--body-muted);
  font-size: 14px;
  width: 100%;
}
/* 라이트 타일에서 쓰일 때 */
.tile--white .verify__badge,
.tile--parchment .verify__badge { color: var(--ink-muted-48); }
.tile--white .verify__text,
.tile--parchment .verify__text { color: var(--ink-muted-80); }
.tile--white .verify__stepsTitle,
.tile--parchment .verify__stepsTitle { color: var(--ink); }
.tile--white .verify__note,
.tile--parchment .verify__note { border-color: var(--hairline); color: var(--ink-muted-48); }

/* --- Rows (유형별 기간) ------------------------------------------------- */
.rows__item {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) auto;
  gap: var(--sp-xs) var(--sp-xl);
  align-items: baseline;
  padding: var(--sp-lg) 0;
  border-top: 1px solid var(--hairline);
}
.rows__item:last-child { border-bottom: 1px solid var(--hairline); }
.tile--dark .rows__item { border-color: var(--hairline-on-dark); }
.rows__title { font-size: 17px; font-weight: 600; line-height: 1.24; }
.rows__desc { color: var(--ink-muted-80); font-size: 17px; }
.rows__dur {
  justify-self: end;
  padding: 8px 14px;
  border: 3px solid var(--divider-soft);
  border-radius: var(--r-md);
  background: var(--surface-pearl);
  color: var(--ink-muted-80);
  font-size: 14px;
  white-space: nowrap;
}

/* --- Facts strip -------------------------------------------------------- */
.facts { display: grid; gap: var(--sp-lg); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.facts__item { display: grid; gap: var(--sp-xxs); }
.facts__key { color: var(--ink-muted-48); font-size: 14px; letter-spacing: -.016em; }
.facts__val { font-size: 17px; font-weight: 600; line-height: 1.24; }
.tile--dark .facts__key { color: var(--body-muted); }

/* --- Form (DESIGN.md Known Gap 보완: search-input 문법 확장) ------------ */
.form { display: grid; gap: var(--sp-lg); }
.form__row { display: grid; gap: var(--sp-lg); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.field { display: grid; gap: 6px; }
.field__label { font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: -.016em; }
.field__req { color: var(--primary); font-size: 12px; margin-left: 4px; }
.field__opt { color: var(--ink-muted-48); font-size: 12px; margin-left: 4px; }
.field__input, .field__select, .field__textarea {
  width: 100%;
  min-height: 44px;
  padding: 12px 20px;
  border: 1px solid var(--hairline-alpha);
  border-radius: var(--r-md);
  background: var(--canvas);
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  transition: border-color 200ms var(--ease);
}
.field__textarea { min-height: 172px; resize: vertical; line-height: 1.47; }
.field__select {
  appearance: none;
  padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted-48) 50%),
    linear-gradient(135deg, var(--ink-muted-48) 50%, transparent 50%);
  background-position: calc(100% - 24px) calc(50% + 2px), calc(100% - 18px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.field__input:hover, .field__select:hover, .field__textarea:hover { border-color: var(--hairline); }
.field__input:focus, .field__select:focus, .field__textarea:focus {
  outline: 2px solid var(--primary-focus);
  outline-offset: 0;
  border-color: transparent;
}
.field__hint { color: var(--ink-muted-48); font-size: 12px; line-height: 1.35; }
.field__error { display: none; color: var(--system-red); font-size: 12px; line-height: 1.35; }
.field.is-invalid .field__error { display: block; }
.field.is-invalid .field__input,
.field.is-invalid .field__select,
.field.is-invalid .field__textarea { border-color: var(--system-red); }
.field--check {
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-sm);
  padding: var(--sp-md);
  border: 1px solid var(--hairline-alpha);
  border-radius: var(--r-md);
  background: var(--surface-pearl);
}
.field--check.is-invalid { border-color: var(--system-red); }
.field--check input { width: 24px; height: 24px; margin: 0; accent-color: var(--primary); }
.field--check .field__label { font-size: 14px; font-weight: 400; line-height: 1.43; color: var(--ink-muted-80); cursor: pointer; }
.field--check .field__error { grid-column: 2; }
.form__status { display: none; padding: var(--sp-md); border-radius: var(--r-md); font-size: 14px; }
.form__status.is-shown { display: grid; gap: var(--sp-sm); justify-items: start; }
.form__status--ok { background: var(--surface-pearl); border: 1px solid var(--hairline); color: var(--ink); }
.form__status--err { background: var(--surface-pearl); border: 1px solid var(--system-red); color: var(--system-red); }
.form__summary { display: none; }
.form__summary.is-shown {
  display: block;
  padding: var(--sp-sm) var(--sp-md);
  border: 1px solid var(--system-red);
  border-radius: var(--r-md);
  color: var(--system-red);
  font-size: 14px;
}

/* --- Product render: FwdLink UI 목업 -----------------------------------
   사진이 없으므로 제품 렌더 자리를 실제 제품 UI 목업이 대신한다.
   시스템 유일의 그림자는 여기에만 쓴다.
---------------------------------------------------------------------------- */
.render { margin-top: var(--sp-xxl); }
.mock {
  border-radius: var(--r-lg);
  background: var(--canvas);
  box-shadow: var(--shadow-product);
  overflow: hidden;
  text-align: left;
}
.mock__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  border-bottom: 1px solid var(--divider-soft);
}
.mock__dots { display: flex; gap: 6px; }
.mock__dot { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--hairline); }
.mock__title { color: var(--ink); font-size: 14px; font-weight: 600; letter-spacing: -.016em; }
.mock__chip {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--canvas-parchment);
  color: var(--ink-muted-48);
  font-size: 12px;
}
.mock__body { display: grid; gap: var(--sp-md); padding: var(--sp-md); grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.mock__panel { padding: var(--sp-md); border: 1px solid var(--divider-soft); border-radius: var(--r-md); }
.mock__panelTitle { margin-bottom: var(--sp-sm); color: var(--ink-muted-48); font-size: 12px; font-weight: 600; letter-spacing: -.01em; }
.mock__bars { display: grid; gap: 10px; }
.mock__row { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--sp-sm); align-items: center; }
.mock__label { color: var(--ink-muted-48); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock__row--us .mock__label { color: var(--ink); font-weight: 600; }
.mock__track { display: block; height: 10px; border-radius: var(--r-pill); background: var(--canvas-parchment); overflow: hidden; }
.mock__fill { display: block; height: 100%; border-radius: var(--r-pill); background: var(--hairline); }
.mock__row--us .mock__fill { background: var(--primary); }
.mock__tabs { display: flex; gap: 6px; margin-bottom: var(--sp-sm); flex-wrap: wrap; }
.mock__tab {
  padding: 6px 12px;
  border: 1px solid var(--hairline-alpha);
  border-radius: var(--r-pill);
  color: var(--ink-muted-48);
  font-size: 12px;
}
.mock__tab--on { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.mock__sources { display: grid; gap: 8px; }
.mock__source { display: grid; grid-template-columns: 12px minmax(0, 1fr) 28px; gap: var(--sp-xs); align-items: center; }
.mock__srcDot { display: block; width: 6px; height: 6px; border-radius: 2px; background: var(--primary); opacity: .5; }
.mock__srcLine { display: block; height: 6px; border-radius: var(--r-pill); background: var(--hairline); }
.mock__srcMask { display: block; height: 6px; border-radius: var(--r-pill); background: var(--canvas-parchment); }
.mock__trend { margin-top: var(--sp-md); }
.mock__caption { margin-top: var(--sp-md); color: var(--ink-muted-48); font-size: 12px; }
.tile--dark .mock__caption { color: var(--body-muted); }
.mock--compact .mock__body { grid-template-columns: minmax(0, 1fr); }
.mock--compact .mock__trend { margin-top: var(--sp-sm); }

/* 사진 자리 (실제 이미지 확보 시 교체) */
.ph {
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: var(--sp-lg);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--canvas-parchment);
  color: var(--ink-muted-48);
  font-size: 14px;
  text-align: center;
}

/* --- Footer (parchment, dense link columns) ----------------------------- */
.footer {
  padding: 64px 0;
  background: var(--canvas-parchment);
  color: var(--ink-muted-80);
}
.footer__inner { max-width: var(--w-lock); margin: 0 auto; padding: 0 var(--gutter); }
.footer a { color: var(--ink-muted-80); }
.footer__grid {
  display: grid;
  gap: var(--sp-xl);
  grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 3fr));
}
.footer__brand { margin-bottom: var(--sp-xs); font-size: 14px; font-weight: 600; color: var(--ink); }
.footer__tagline { max-width: 30ch; font-size: 12px; line-height: 1.5; }
.footer__title { margin-bottom: var(--sp-xs); color: var(--ink); font-size: 14px; font-weight: 600; letter-spacing: -.016em; }
.footer__list { display: grid; }
.footer__list a, .footer__item {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  line-height: 1.6;
  text-decoration: none;
}
.footer__item { align-items: flex-start; min-height: 0; padding: var(--sp-xs) 0; }
.footer__list a:hover { color: var(--primary); text-decoration: underline; }
.footer__product {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  margin-top: var(--sp-xl);
  padding-top: var(--sp-xl);
  border-top: 1px solid var(--hairline);
}
.footer__bottom {
  display: grid;
  gap: var(--sp-xs);
  margin-top: var(--sp-xl);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--hairline);
  color: var(--ink-muted-48);
  font-size: 12px;
  line-height: 1.35;
}

/* ==========================================================================
   6. Page-specific
   ========================================================================== */
.hero { padding: 96px 0 var(--sp-section); }
.hero__eyebrow { margin-bottom: var(--sp-md); color: var(--ink-muted-48); font-size: 14px; letter-spacing: -.016em; }
.hero__title { margin-bottom: var(--sp-lg); }
.hero__note {
  max-width: 52ch;
  margin: var(--sp-xl) auto 0;
  padding: var(--sp-md) 0 0;
  border-top: 1px solid var(--hairline);
  color: var(--ink-muted-80);
  font-size: 14px;
  line-height: 1.6;
}
.hero__actions { margin-top: var(--sp-xl); }
.hero__facts { margin-top: 64px; text-align: left; }

.anchor-offset { scroll-margin-top: calc(var(--nav-sub-h) + 12px); }

/* ==========================================================================
   7. Motion
   기본/프레스 상태만 정의한다. 스크롤 진입은 opacity + translateY 만.
   숨김은 .js-reveal(JS 부여) 안에서만 → 스크립트 실패 시 본문이 그대로 보인다.
   ========================================================================== */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }
.js-reveal .stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.js-reveal .reveal.is-visible.stagger > * { opacity: 1; transform: none; }
.js-reveal .stagger > *:nth-child(1) { transition-delay: 0ms; }
.js-reveal .stagger > *:nth-child(2) { transition-delay: 60ms; }
.js-reveal .stagger > *:nth-child(3) { transition-delay: 120ms; }
.js-reveal .stagger > *:nth-child(4) { transition-delay: 180ms; }
.js-reveal .stagger > *:nth-child(5) { transition-delay: 240ms; }
.js-reveal .stagger > *:nth-child(6) { transition-delay: 300ms; }
.js-reveal .stagger > *:nth-child(7) { transition-delay: 360ms; }
.js-reveal .stagger > *:nth-child(n+8) { transition-delay: 420ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
  .reveal, .js-reveal .reveal, .js-reveal .stagger > * { opacity: 1 !important; transform: none !important; }
  .btn:active, .lang__btn:active, .subnav__toggle:active { transform: none; }
}

/* ==========================================================================
   8. Media queries — 1440 / 1068 / 833 / 640 / 480
   ========================================================================== */
@media (max-width: 1440px) {
  :root { --w-lock: 100%; }
}

@media (max-width: 1068px) {
  .t-hero { font-size: 40px; }
  .t-display { font-size: 34px; }
  .t-display-md { font-size: 28px; }
  .t-lead { font-size: 24px; }
  .cards--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

@media (max-width: 833px) {
  /* DESIGN.md: 글로벌 내비 유틸리티는 데스크톱 정밀 조작용 32px 타깃이고
     모바일에서는 대체된다. 메일 링크는 푸터·문의 페이지에 있으므로 숨기고,
     언어 토글만 남겨 44px 타깃으로 키운다. */
  .globalnav__link { display: none; }
  .globalnav__utils { gap: var(--sp-xxs); }
  .lang__btn { min-height: 44px; }
  .subnav__toggle { display: inline-flex; }
  .subnav__links { display: none; }
  .subnav.is-open .subnav__links {
    position: absolute;
    left: 0; right: 0; top: 100%;
    display: grid;
    gap: 0;
    padding: var(--sp-xs) var(--gutter) var(--sp-md);
    background: var(--canvas-parchment);
    border-bottom: 1px solid var(--hairline);
  }
  .subnav.is-open .subnav__link { min-height: 48px; font-size: 17px; }
  .split, .split--wide { grid-template-columns: minmax(0, 1fr); gap: var(--sp-xl); }
  .mock__body { grid-template-columns: minmax(0, 1fr); }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .verify { gap: var(--sp-xl); }
  .rows__item { grid-template-columns: minmax(0, 1fr) auto; }
  .rows__desc { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  :root { --gutter: 20px; }
  .t-hero { font-size: 34px; }
  .t-display { font-size: 28px; }
  .t-display-md { font-size: 24px; }
  .t-lead { font-size: 21px; }
  .t-lead-airy { font-size: 19px; }
  .hero { padding: 64px 0 var(--sp-xxl); }
  .verify__title { font-size: 24px; }
  .deflist__row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-xxs); }
  .footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-lg); }
  .footer__product { flex-direction: column; align-items: flex-start; }
  .actions .btn { width: 100%; }
  .rows__item { grid-template-columns: minmax(0, 1fr); }
  .rows__dur { justify-self: start; }
  .kv th { width: 42%; min-width: 108px; }
  .subnav__name { font-size: 19px; }
}

@media (max-width: 480px) {
  .tile { padding: var(--sp-xxl) 0; }
  .t-hero { font-size: 28px; }
  .card, .fit__col, .decision { padding: var(--sp-lg); }
  .globalnav__link { padding: 0 4px; }
}