/* Space AI — 스타일. 소스: src/assets/styles.css */

@font-face {
  font-family: Pretendard Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 45 920;
  src: url(/assets/pretendard-subset-v2.woff2) format("woff2-variations");
  unicode-range: U+20, U+21, U+22, U+23, U+24, U+25, U+26, U+27, U+28, U+29, U+2A, U+2B, U+2C, U+2D, U+2E, U+2F, U+30, U+31, U+32, U+33, U+34, U+35, U+36, U+37, U+38, U+39, U+3A, U+3B, U+3C, U+3D, U+3E, U+3F, U+40, U+41, U+42, U+43, U+44, U+45, U+46, U+47, U+48, U+49, U+4A, U+4B, U+4C, U+4D, U+4E, U+4F, U+50, U+51, U+52, U+53, U+54, U+55, U+56, U+57, U+58, U+59, U+5A, U+5B, U+5C, U+5D, U+5E, U+5F, U+60, U+61, U+62, U+63, U+64, U+65, U+66, U+67, U+68, U+69, U+6A, U+6B, U+6C, U+6D, U+6E, U+6F, U+70, U+71, U+72, U+73, U+74, U+75, U+76, U+77, U+78, U+79, U+7A, U+7B, U+7C, U+7D, U+7E, U+A7, U+A9, U+B0, U+B1, U+B2, U+B7, U+D7, U+F7, U+3B6, U+2013, U+2014, U+2018, U+2019, U+201C, U+201D, U+2026, U+203B, U+20A9, U+2190, U+2191, U+2192, U+2193, U+2248, U+2264, U+2265, U+2460, U+2461, U+2462, U+2500, U+2550, U+25A0, U+25A1, U+25B2, U+25B3, U+25CB, U+25CF, U+2605, U+2606, U+26A0, U+524D, U+AC00, U+AC01, U+AC04, U+AC08, U+AC10, U+AC11, U+AC12, U+AC14, U+AC15, U+AC19, U+AC1C, U+AC1D, U+AC2D, U+AC70, U+AC74, U+AC77, U+AC78, U+AC80, U+AC83, U+AC8C, U+AC94, U+ACA0, U+ACA8, U+ACA9, U+ACAC, U+ACB0, U+ACB9, U+ACBC, U+ACBD, U+ACC4, U+ACE0, U+ACE1, U+ACE7, U+ACE8, U+ACF1, U+ACF3, U+ACF5, U+ACFC, U+AD00, U+AD04, U+AD11, U+AD50, U+AD6C, U+AD6D, U+AD70, U+AD73, U+AD74, U+AD8C, U+ADC0, U+ADDC, U+ADE0, U+ADF8, U+ADFC, U+AE00, U+AE08, U+AE09, U+AE0B, U+AE30, U+AE34, U+AE38, U+AE40, U+AE41, U+AE4C, U+AE4E, U+AE54, U+AE65, U+AE68, U+AEBC, U+AECD, U+AED8, U+AEF4, U+AF2C, U+AF34, U+AFB8, U+AFD4, U+AFE8, U+B00C, U+B010, U+B01D, U+B044, U+B04A, U+B04C, U+B05D, U+B07C, U+B098, U+B099, U+B09C, U+B0A0, U+B0A8, U+B0A9, U+B0AC, U+B0AE, U+B0B4, U+B0B8, U+B0C5, U+B0C8, U+B0E5, U+B108, U+B110, U+B113, U+B118, U+B123, U+B124, U+B137, U+B144, U+B150, U+B155, U+B178, U+B17C, U+B192, U+B193, U+B1CC, U+B204, U+B208, U+B20C, U+B215, U+B274, U+B290, U+B294, U+B298, U+B2A5, U+B2A6, U+B2C8, U+B2CC, U+B2D9, U+B2DD, U+B2E4, U+B2E5, U+B2E8, U+B2EB, U+B2EC, U+B2F4, U+B2F5, U+B2F9, U+B2FF, U+B300, U+B354, U+B358, U+B364, U+B369, U+B36E, U+B370, U+B378, U+B381, U+B3C4, U+B3C5, U+B3CC, U+B3D9, U+B3FC, U+B410, U+B418, U+B41C, U+B420, U+B428, U+B429, U+B450, U+B454, U+B458, U+B461, U+B480, U+B4A4, U+B4C8, U+B4DC, U+B4E0, U+B4E3, U+B4E4, U+B4EC, U+B4ED, U+B4EF, U+B4F1, U+B514, U+B525, U+B527, U+B529, U+B530, U+B538, U+B54C, U+B5A0, U+B5A4, U+B5A8, U+B5B4, U+B5BB, U+B5BC, U+B610, U+B611, U+B6B1, U+B6F0, U+B728, U+B73B, U+B744, U+B760, U+B77C, U+B77D, U+B780, U+B78C, U+B790, U+B798, U+B799, U+B79C, U+B7A8, U+B7A9, U+B7B5, U+B7C9, U+B7EC, U+B7F0, U+B7F4, U+B7FC, U+B7FD, U+B800, U+B807, U+B808, U+B80C, U+B824, U+B825, U+B82C, U+B834, U+B838, U+B839, U+B840, U+B85C, U+B85D, U+B860, U+B864, U+B86D, U+B86F, U+B8B0, U+B8CC, U+B8E8, U+B8EC, U+B8F0, U+B8F9, U+B904, U+B958, U+B960, U+B974, U+B978, U+B97C, U+B984, U+B985, U+B9AC, U+B9AD, U+B9B0, U+B9B4, U+B9BC, U+B9BD, U+B9BF, U+B9C1, U+B9C8, U+B9C9, U+B9CC, U+B9D0, U+B9DD, U+B9DE, U+B9E4, U+B9E8, U+B9F5, U+B9F7, U+BA38, U+BA3C, U+BA40, U+BA48, U+BA54, U+BA70, U+BA71, U+BA74, U+BA85, U+BA87, U+BAA8, U+BAA9, U+BAB8, U+BABB, U+BB34, U+BB36, U+BB38, U+BB3C, U+BBAC, U+BBC0, U+BBF8, U+BBFC, U+BBFF, U+BC00, U+BC0F, U+BC11, U+BC14, U+BC15, U+BC16, U+BC18, U+BC1B, U+BC1C, U+BC1D, U+BC29, U+BC30, U+BC31, U+BC34, U+BC84, U+BC88, U+BC8C, U+BC94, U+BC95, U+BC97, U+BCA1, U+BCA4, U+BCA8, U+BCBD, U+BCC0, U+BCC4, U+BCD1, U+BCF4, U+BCF5, U+BCF8, U+BCFC, U+BD07, U+BD80, U+BD81, U+BD84, U+BD88, U+BD95, U+BD99, U+BDF0, U+BE0C, U+BE14, U+BE44, U+BE48, U+BE4C, U+BE57, U+BE60, U+BE68, U+BE84, U+BE8F, U+BE90, U+BFD0, U+C090, U+C0AC, U+C0AD, U+C0B0, U+C0B4, U+C0BC, U+C0BD, U+C0C1, U+C0C8, U+C0C9, U+C0D8, U+C0DD, U+C11C, U+C11D, U+C11E, U+C120, U+C124, U+C12C, U+C12D, U+C131, U+C138, U+C139, U+C13C, U+C140, U+C148, U+C14B, U+C158, U+C15C, U+C168, U+C18C, U+C18D, U+C190, U+C194, U+C1A1, U+C1E0, U+C218, U+C219, U+C21C, U+C220, U+C228, U+C22B, U+C270, U+C2A4, U+C2AC, U+C2B5, U+C2B9, U+C2DC, U+C2DD, U+C2E0, U+C2E3, U+C2E4, U+C2EC, U+C2F1, U+C2F6, U+C2F8, U+C2FC, U+C30D, U+C313, U+C3E0, U+C4F0, U+C4F4, U+C4F8, U+C501, U+C529, U+C530, U+C544, U+C548, U+C54A, U+C54C, U+C555, U+C558, U+C559, U+C55E, U+C560, U+C561, U+C564, U+C571, U+C57C, U+C57D, U+C587, U+C591, U+C5B4, U+C5B5, U+C5B8, U+C5B9, U+C5BB, U+C5BC, U+C5C4, U+C5C5, U+C5C6, U+C5C7, U+C5C8, U+C5C9, U+C5D0, U+C5D1, U+C5D4, U+C5E3, U+C5EC, U+C5ED, U+C5F0, U+C5F4, U+C600, U+C601, U+C605, U+C606, U+C608, U+C61B, U+C624, U+C628, U+C62C, U+C62E, U+C635, U+C637, U+C640, U+C644, U+C654, U+C65C, U+C678, U+C67C, U+C694, U+C6A9, U+C6B0, U+C6B4, U+C6B8, U+C6C0, U+C6C3, U+C6CC, U+C6D0, U+C6D4, U+C6E8, U+C6F9, U+C704, U+C708, U+C720, U+C728, U+C735, U+C73C, U+C740, U+C744, U+C74C, U+C751, U+C758, U+C774, U+C775, U+C778, U+C77C, U+C77D, U+C784, U+C785, U+C787, U+C788, U+C789, U+C790, U+C791, U+C798, U+C7A0, U+C7A1, U+C7A5, U+C7AC, U+C7B0, U+C7C1, U+C800, U+C801, U+C804, U+C808, U+C810, U+C811, U+C815, U+C81C, U+C824, U+C838, U+C84C, U+C870, U+C871, U+C874, U+C878, U+C881, U+C885, U+C88B, U+C88C, U+C8E0, U+C8FC, U+C8FD, U+C900, U+C904, U+C911, U+C950, U+C954, U+C958, U+C988, U+C989, U+C998, U+C99D, U+C9C0, U+C9C1, U+C9C4, U+C9C8, U+C9D1, U+C9D3, U+C9D5, U+C9DC, U+C9DD, U+C9E7, U+C9F8, U+CABD, U+CBE4, U+CC0C, U+CC0D, U+CC28, U+CC29, U+CC30, U+CC38, U+CC3D, U+CC3E, U+CC44, U+CC45, U+CC98, U+CC9C, U+CCA8, U+CCAB, U+CCAD, U+CCB4, U+CCD0, U+CCE4, U+CD08, U+CD09, U+CD1D, U+CD5C, U+CD94, U+CD95, U+CD98, U+CD9C, U+CDA9, U+CDB0, U+CDC4, U+CDE8, U+CE21, U+CE35, U+CE58, U+CE59, U+CE5C, U+CE60, U+CE68, U+CE69, U+CE74, U+CE78, U+CE90, U+CE94, U+CE98, U+CEA1, U+CEE4, U+CEE8, U+CEEC, U+CEF4, U+CEF5, U+CF00, U+CF13, U+CF1C, U+CF54, U+CF58, U+CF5C, U+CFFC, U+D050, U+D06C, U+D070, U+D074, U+D07C, U+D0A4, U+D0AC, U+D0B5, U+D0B9, U+D0C0, U+D0C4, U+D0C8, U+D0DC, U+D0DD, U+D0ED, U+D0EF, U+D130, U+D131, U+D134, U+D138, U+D141, U+D14C, U+D14D, U+D15C, U+D1A0, U+D1A4, U+D1B1, U+D1B5, U+D22C, U+D280, U+D284, U+D29C, U+D2B8, U+D2B9, U+D2BC, U+D2C8, U+D2F1, U+D300, U+D305, U+D30C, U+D310, U+D314, U+D31D, U+D31F, U+D328, U+D37C, U+D380, U+D38C, U+D398, U+D399, U+D3B8, U+D3C9, U+D3D0, U+D3EC, U+D3ED, U+D3F0, U+D3F4, U+D3FC, U+D45C, U+D478, U+D47C, U+D480, U+D488, U+D4E8, U+D504, U+D508, U+D50C, U+D53C, U+D53D, U+D544, U+D558, U+D559, U+D55C, U+D560, U+D568, U+D569, U+D56D, U+D574, U+D575, U+D578, U+D588, U+D589, U+D5A5, U+D5C8, U+D5D8, U+D600, U+D601, U+D604, U+D611, U+D615, U+D638, U+D63C, U+D648, U+D64D, U+D654, U+D655, U+D658, U+D65C, U+D68C, U+D68D, U+D69F, U+D6A8, U+D6C4, U+D734, U+D749, U+D750, U+D754, U+D761, U+D765, U+D769, U+D76C, U+D770, U+D788, U+D78C, U+D798
}

:root {
  color-scheme: only light;
  --ink: #0b1f33;
  --deep: #123a5c;
  --brand: #1d5b8f;
  --sky: #7ca6c8;
  --tint: #e1eaf2;
  --paper: #f7f9fb;
  --line: #c6d4e1;
  --stage: #08131f;
  --stage-elev: #0d1f31;
  --stage-line: #22405c;
  --stage-text: #edf3f8;
  --signal: #ff5a1f;
  --stress-1: #1d5b8f;
  --stress-2: #7ca6c8;
  --stress-3: #e8b84b;
  --stress-4: #ff5a1f;
  --stress-5: #c2352b
}

:root {
  --card: #ffffff;
  --line-strong: #6e8299;
  --muted-num: #6e8299;
  --muted-fill: #8fa6bc;
  --stage-muted: #6e8299;
  --ink-soft: #46596b;
  --stage-soft: #a8bdd0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 140px;
  --container: min(1560px, 90vw);
  --gutter: 20px;
  --radius: 10px;
  --radius-sm: 8px;
  --fs-hero: clamp(54px, 6.8vw, 124px);
  --fs-h2: clamp(26px, 2.5vw, 38px);
  --fs-h3: clamp(21px, 1.6vw, 28px);
  --fs-sub: clamp(19px, 1.55vw, 26px);
  --fs-body: clamp(19px, 1.15vw, 23px);
  --fs-caption: clamp(16px, 1.02vw, 19px);
  /* 소분류(BOTTLENECK · MARKET)와 단계 번호가 너무 작아 눈에 걸리지 않았다.
     대문자에 자간까지 벌어져 있어 실제보다 더 작게 읽힌다 - 한 단 올린다. */
  --fs-kicker: clamp(14px, 1vw, 20px);
  --fs-body-tight: clamp(17px, 1.1vw, 19px);
  --fs-fine: clamp(15px, 1vw, 17px);
  --fs-mega: clamp(72px, 13vw, 220px);
  --fs-stat: clamp(44px, 5.2vw, 92px)
}

@media(max-width:767px) {
  :root {
    --gutter: 18px;
    --fs-body: 18px;
    --fs-caption: 16px;
    --fs-kicker: 14px
  }
}

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

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

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }
}

body {
  margin: 0;
  background: var(--stage);
  color: var(--ink);
  font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, Apple SD Gothic Neo, Malgun Gothic, system-ui, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
  word-break: keep-all;
  text-wrap: pretty
}

[hidden] {
  display: none !important
}

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

img {
  height: auto
}

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
ul,
ol {
  margin: 0
}

ul,
ol {
  padding: 0;
  list-style: none
}

table {
  border-collapse: collapse
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 2px
}

.surface-stage :focus-visible {
  outline-color: var(--sky)
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--card);
  color: var(--ink);
  border-radius: 0 0 var(--radius-sm) 0
}

.skip-link:focus {
  left: 0
}

.kicker {
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.4;
  margin: 0 0 var(--sp-5)
}

.surface-paper .kicker {
  color: var(--brand)
}

.surface-stage .kicker {
  color: var(--sky)
}

.h-hero {
  font-size: var(--fs-hero);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.025em;
  margin: 0
}

.h-section {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.02em;
  margin: 0;
  /* 한글은 'ch'(숫자 0의 폭)보다 훨씬 넓다. 19ch 는 한글 13자쯤밖에 못 담아
     한 문장이 자꾸 두 줄로 갈렸다. 한글 기준으로 다시 잡는다. */
  max-width: 24ch
}

/* 현실 → 가상 두 칸에서 회사 카드로 넘어가는 다리 */
.why__bridge {
  margin: var(--sp-7) 0 var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--stage-line)
}

.why__bridge .caption {
  margin-top: var(--sp-3)
}

.flow__why {
  margin-top: var(--sp-2);
  color: var(--stage-muted)
}

.h-sub {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -.01em;
  margin: 0
}

.lead {
  font-size: var(--fs-sub);
  line-height: 1.65;
  margin: var(--sp-5) 0 0;
  max-width: 62ch
}

.surface-paper .lead {
  color: var(--ink-soft)
}

.surface-stage .lead {
  color: var(--stage-soft)
}

.body {
  font-size: var(--fs-body);
  line-height: 1.7
}

.caption {
  font-size: var(--fs-caption);
  line-height: 1.6
}

.surface-paper .caption {
  color: var(--ink-soft)
}

.surface-stage .caption {
  color: var(--stage-soft)
}

.em {
  color: var(--brand);
  font-weight: 600
}

/* 형광펜 자국. 브랜드 파랑은 바로 위 제목이 이미 쓰고 있어서, 같은 색으로
   강조하면 제목과 겹쳐 읽히고 눈에 새로 걸리지 않는다. 글자색은 그대로 두고
   글줄 아랫부분에만 호박색 띠를 깔아 "여기 읽어라"만 표시한다.
   위쪽 0.55em 을 비워 두어야 받침과 위 글줄이 눌리지 않는다. */
.mark {
  padding: 0 .1em;
  color: var(--ink);
  background-image: linear-gradient(to top, rgba(232, 184, 75, .55) 0 .66em, transparent .66em);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone
}

.surface-stage .mark {
  background-image: linear-gradient(to top, rgba(232, 184, 75, .30) 0 .58em, transparent .58em)
}

.surface-stage .em {
  color: var(--sky)
}

.num-mega {
  font-size: var(--fs-mega);
  font-weight: 600;
  line-height: .92;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  color: var(--brand)
}

.num-stat--text {
  font-size: clamp(24px, 2.6vw, 34px)
}

.num-stat {
  font-size: var(--fs-stat);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums
}

.num-muted {
  color: var(--muted-num)
}

.counter {
  font-variant-numeric: tabular-nums;
  display: inline-block
}

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

.container--narrow {
  width: min(820px, 100% - 2 * var(--gutter));
  margin-inline: auto
}

.section {
  padding-block: var(--sp-9);
  scroll-margin-top: 64px
}

@media(min-width:768px) {
  .section {
    padding-block: var(--sp-10)
  }
}

.surface-stage {
  background: var(--stage);
  color: var(--stage-text)
}

.surface-paper {
  background: var(--paper);
  color: var(--ink)
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-6)
}

.surface-stage .card {
  background: var(--stage-elev);
  border-color: var(--stage-line)
}

.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0
}

.surface-stage .rule {
  border-top-color: var(--stage-line)
}

.section__head {
  margin-bottom: var(--sp-8)
}

.grid {
  display: grid;
  gap: var(--sp-5)
}

@media(min-width:768px) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr)
  }

  .grid--3 {
    grid-template-columns: repeat(3, 1fr)
  }

  .grid--4 {
    grid-template-columns: repeat(4, 1fr)
  }
}

/* 카드 안의 네 줄(kicker · 제목 · 본문 · 예시)을 카드끼리 같은 높이에 세운다.
   XPBD 처럼 kicker 가 두 줄이 되는 카드가 하나만 있어도 그 카드만 제목이
   내려앉아, 세 카드를 나란히 읽을 수 없다. */
@supports (grid-template-rows: subgrid) {
  @media(min-width:768px) {
    /* 줄 간격은 카드 안 요소의 margin 이 이미 갖고 있다.
       여기에 row-gap 까지 얹으면 kicker 아래가 두 배로 벌어진다.
       margin 을 비우고 간격은 row-gap 한 곳에서만 준다. */
    .grid--rows2>.card>*,
    .grid--rows3>.card>*,
    .grid--rows4>.card>* {
      margin-top: 0;
      margin-bottom: 0
    }

    .grid--rows2>.card,
    .grid--rows3>.card,
    .grid--rows4>.card {
      display: grid;
      grid-template-rows: subgrid;
      align-content: start
    }

    .grid--rows2>.card {
      grid-row: span 2
    }

    .grid--rows3>.card {
      grid-row: span 3
    }

    .grid--rows4>.card {
      grid-row: span 4
    }
  }
}

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: color-mix(in srgb, var(--stage) 72%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid color-mix(in srgb, var(--stage-line) 60%, transparent)
}

.btn--glass {
  background: color-mix(in srgb, var(--stage-text) 12%, transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--stage-text) 28%, transparent);
  color: var(--stage-text)
}

.btn--glass:hover {
  background: color-mix(in srgb, var(--stage-text) 18%, transparent);
  border-color: color-mix(in srgb, var(--stage-text) 42%, transparent)
}

.nav {
  border-bottom-color: transparent;
  transition: border-color .25s ease, background-color .25s ease
}

.nav.is-scrolled {
  border-bottom-color: color-mix(in srgb, var(--stage-line) 70%, transparent);
  background: color-mix(in srgb, var(--stage) 84%, transparent)
}

.nav__inner {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
  height: 64px;
  display: flex;
  align-items: center;
  gap: var(--sp-5)
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto
}

.nav__tabs {
  display: none;
  gap: var(--sp-5);
  margin-inline: auto;
  font-size: 15px;
  color: var(--stage-soft)
}

@media(min-width:1000px) {
  .nav__tabs {
    display: flex
  }
}

.nav__tabs a {
  position: relative;
  display: block;
  padding-block: 6px;
  transition: color .2s ease
}

.nav__tabs a:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--sky);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .24s ease
}

.nav__tabs a:hover {
  color: var(--stage-text)
}

.nav__tabs a:hover:after {
  transform: scaleX(1)
}

.nav__tabs a[aria-current=page] {
  color: #fff;
  font-weight: 600
}

.nav__tabs a[aria-current=page]:after {
  transform: scaleX(1);
  background: #fff
}

.nav__tools {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0
}

.nav__divide {
  display: none;
  width: 1px;
  height: 16px;
  margin-inline: 4px;
  background: color-mix(in srgb, var(--stage-line) 70%, transparent)
}

@media(min-width:1000px) {
  .nav__divide {
    display: block
  }
}

.sections {
  display: none;
  position: relative
}

@media(min-width:1000px) {
  .sections {
    display: block
  }
}

.sections__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--stage-soft);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease
}

.sections__btn:hover,
.sections__btn:focus-visible {
  color: var(--stage-text);
  background: color-mix(in srgb, var(--stage-text) 9%, transparent)
}

.sections__btn[aria-expanded=true] {
  color: #fff;
  background: color-mix(in srgb, var(--stage-text) 14%, transparent)
}

.sections__icon {
  width: 16px;
  height: 10px;
  flex-shrink: 0;
  position: relative
}

.sections__icon:before,
.sections__icon:after {
  content: "";
  position: absolute;
  left: 0;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: width .22s ease
}

.sections__icon:before {
  top: 0;
  width: 100%;
  box-shadow: 0 4.25px 0 currentColor
}

.sections__icon:after {
  bottom: 0;
  width: 62%
}

.sections__btn[aria-expanded=true] .sections__icon:after {
  width: 100%
}

@media(prefers-reduced-motion:reduce) {

  .sections__icon:before,
  .sections__icon:after {
    transition: none
  }
}

.sections__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 184px;
  padding: var(--sp-3);
  background: var(--stage-elev);
  border: 1px solid var(--stage-line);
  border-radius: 12px;
  box-shadow: 0 16px 40px -20px #000000b3;
  z-index: 40
}

.sections__menu[hidden] {
  display: none
}

.sections__head {
  font-size: var(--fs-fine);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sky)
}

.sections__menu .sections__head {
  padding: 4px 8px var(--sp-2)
}

.sections__menu ul {
  display: grid
}

.sections__menu a {
  display: block;
  padding: 7px 8px;
  border-radius: 7px;
  font-size: var(--fs-body-tight);
  color: var(--stage-soft);
  transition: color .2s ease, background-color .2s ease
}

.sections__menu a:hover,
.sections__menu a:focus-visible {
  color: var(--stage-text);
  background: color-mix(in srgb, var(--sky) 14%, transparent)
}

.sections__menu a[aria-current=true] {
  color: #fff
}

.nav__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: none;
  border: 0;
  cursor: pointer
}

.nav__toggle-bar {
  display: block;
  height: 1.5px;
  background: var(--stage-text);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease
}

.nav__toggle[aria-expanded=true] .nav__toggle-bar:first-child {
  transform: translateY(3.25px) rotate(45deg)
}

.nav__toggle[aria-expanded=true] .nav__toggle-bar:last-child {
  transform: translateY(-3.25px) rotate(-45deg)
}

.nav__panel {
  border-top: 1px solid var(--stage-line);
  background: var(--stage-elev);
  padding: var(--sp-5) var(--gutter) var(--sp-7);
  height: calc(100svh - 64px);
  overflow-y: auto;
  display: flex;
  flex-direction: column
}

.nav__panel[hidden] {
  display: none
}

.nav__panel ul {
  display: flex;
  flex-direction: column
}

.nav__panel a:not(.btn) {
  display: block;
  padding: 14px 4px;
  font-size: 18px;
  color: var(--stage-text);
  border-bottom: 1px solid color-mix(in srgb, var(--stage-line) 60%, transparent);
  transition: color .2s ease, padding-left .2s ease
}

.nav__panel a:not(.btn):hover {
  color: var(--sky);
  padding-left: 10px
}

.nav__panel-pages a {
  font-size: 22px;
  font-weight: 600
}

.nav__panel-pages a[aria-current=page] {
  color: var(--sky)
}

.nav__panel .sections__head {
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-2)
}

.nav__panel-sections a {
  font-size: var(--fs-body-tight);
  color: var(--stage-soft);
  padding-block: 11px
}

.nav__panel-cta {
  width: 100%;
  margin-top: auto
}

@media(min-width:1000px) {

  .nav__toggle,
  .nav__panel {
    display: none !important
  }
}

.logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0
}

.logo__lockup {
  --logo-h: 26px;
  height: var(--logo-h);
  width: auto;
  max-width: none;
  flex-shrink: 0
}

@media(max-width:519px) {
  .logo__lockup {
    --logo-h: 21px
  }

  .nav__inner {
    gap: 12px
  }

  .lang {
    flex-shrink: 0
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 var(--sp-6);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease
}

.btn--primary {
  background: var(--brand);
  color: #fff
}

.btn--primary:hover {
  background: var(--deep)
}

.btn--outline {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink)
}

.btn--outline:hover {
  border-color: var(--brand);
  color: var(--brand)
}

.surface-stage .btn--outline {
  border-color: color-mix(in srgb, var(--stage-text) 32%, transparent);
  color: var(--stage-text)
}

.surface-stage .btn--outline:hover {
  border-color: var(--stage-text)
}

.btn--sm {
  min-height: 40px;
  padding: 0 var(--sp-5);
  font-size: 14px
}

.lang {
  display: flex;
  border: 1px solid color-mix(in srgb, var(--stage-text) 24%, transparent);
  border-radius: var(--radius-sm);
  overflow: hidden
}

.lang__btn {
  background: none;
  border: 0;
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--stage-soft);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease
}

.lang__btn[aria-pressed=true] {
  background: color-mix(in srgb, var(--stage-text) 14%, transparent);
  color: var(--stage-text)
}

.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease-out, transform .5s ease-out
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none
}

@media(prefers-reduced-motion:reduce) {

  .js [data-reveal],
  .js [data-reveal].is-in {
    opacity: 1;
    transform: none;
    transition: none
  }
}

.surface-paper .card,
.more__item {
  transition: border-color .22s ease, background-color .22s ease
}

.surface-paper .card:hover,
.more__item:hover {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--tint) 42%, var(--card))
}

.surface-stage .card {
  transition: border-color .22s ease, background-color .22s ease
}

.surface-stage .card:hover {
  border-color: var(--sky);
  background: color-mix(in srgb, var(--sky) 8%, var(--stage-elev))
}

.pipeline__steps li,
.flow__step {
  transition: border-color .22s ease
}

.pipeline__steps li:hover,
.flow__step:hover {
  border-color: var(--brand)
}

.link-underline {
  position: relative;
  color: var(--brand);
  font-weight: 500
}

.link-underline:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .24s ease
}

.link-underline:hover:after {
  transform: scaleX(1)
}

.footer__meta a {
  transition: color .2s ease
}

.kicker {
  display: flex;
  align-items: center;
  gap: 10px
}

.kicker:before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: .55;
  flex-shrink: 0
}

.vision .kicker {
  justify-content: center
}

.vision .kicker:before {
  display: none
}

@media(max-width:999px) {
  .hero__copy .kicker {
    justify-content: center
  }

  .hero__copy .kicker:before {
    display: none
  }

  /* 좁은 화면에서는 히어로가 가운데 정렬이다(.hero__inner).
     리드는 max-width 가 걸려 있어 글자만 가운데로 오고 상자는 왼쪽에 붙어 있었다.
     상자까지 가운데로 보낸다. */
  .hero__copy .lead {
    margin-inline: auto
  }
}

.js [data-reveal][data-delay="1"] {
  transition-delay: .07s
}

.js [data-reveal][data-delay="2"] {
  transition-delay: .14s
}

.js [data-reveal][data-delay="3"] {
  transition-delay: .21s
}

@media(prefers-reduced-motion:reduce) {
  .js [data-reveal][data-delay] {
    transition-delay: 0s
  }
}

@media(max-width:999px) {
  .nav .nav__cta {
    display: none
  }
}

.reading {
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  background: color-mix(in srgb, var(--stage-line) 70%, transparent)
}

.reading__fill {
  display: block;
  height: 100%;
  width: var(--read, 0%);
  background: var(--sky);
  transform-origin: left
}

.reading__ticks {
  position: absolute;
  inset: 0;
  display: block
}

.reading__ticks span {
  position: absolute;
  top: -1px;
  width: 1px;
  height: 4px;
  background: var(--stage-line)
}

.reading__ticks span.is-past {
  background: var(--sky)
}

.nav:not(.is-scrolled) .reading {
  opacity: 0
}

.reading {
  transition: opacity .25s ease
}

@media(prefers-reduced-motion:reduce) {
  .reading {
    transition: none
  }
}

.hero {
  position: relative;
  min-height: 100svh;
  padding-top: calc(64px + clamp(20px, 4svh, 64px));
  padding-bottom: clamp(28px, 4svh, 56px);
  display: flex;
  flex-direction: column
}

.hero__inner {
  flex: 1;
  align-content: center;
  margin-top: clamp(20px, 3svh, 48px);
  padding-bottom: clamp(28px, 4svh, 56px);
  display: grid;
  gap: clamp(32px, 3.6vw, 64px);
  justify-items: center;
  text-align: center
}

@media(min-width:1000px) {
  .hero__inner {
    grid-template-columns: 34% 1fr;
    align-items: center;
    justify-items: start;
    text-align: left
  }
}

.eye {
  position: relative;
  transform: translate3d(0, var(--eye-shift, 0), 0);
  opacity: var(--eye-fade, 1);
  will-change: transform;
  width: min(600px, 42vw);
  max-width: 100%;
  aspect-ratio: 1684 / 948;
  flex-shrink: 0
}

@media(max-width:999px) {
  .eye {
    width: min(62vw, 46svh)
  }
}

@media(min-width:1000px) {
  .eye {
    width: 100%;
    max-height: 46svh;
    aspect-ratio: 1684 / 948
  }
}

.eye__iris {
  position: absolute;
  inset: 0;
  clip-path: ellipse(30.85% 45.31% at 49.97% 49.1%)
}

#eyeFluid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: url(#goo)
}

.eye__ring,
.eye__blob {
  position: absolute;
  inset: 0;
  background: center / contain no-repeat
}

.eye__ring {
  background-image: url(data:image/webp;base64,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);
  filter: brightness(0) invert(1)
}

.eye__blob {
  background-image: url(data:image/webp;base64,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)
}

#eyeFluid {
  display: none
}

.eye.is-live #eyeFluid {
  display: block
}

.eye.is-live .eye__blob {
  display: none
}

@media(prefers-reduced-motion:reduce) {
  .eye.is-live #eyeFluid {
    display: none
  }

  .eye.is-live .eye__blob {
    display: block
  }

  .tilt-cta {
    display: none
  }
}

.tilt-cta {
  align-self: center;
  margin-top: calc(var(--sp-2) * -1);
  padding: 9px 18px;
  border: 1px solid var(--stage-line);
  border-radius: 999px;
  background: transparent;
  color: var(--sky);
  font: inherit;
  font-size: 14px;
  letter-spacing: .02em;
  cursor: pointer;
  transition: color .2s, border-color .2s
}

.tilt-cta:hover,
.tilt-cta:focus-visible {
  color: var(--stage-text);
  border-color: var(--sky)
}

.tilt-cta[hidden] {
  display: none
}

.hero__copy {
  max-width: none;
  width: 100%;
  container-type: inline-size
}

.hero__copy .kicker {
  font-size: 13px;
  letter-spacing: .2em
}

.hero .h-hero {
  line-height: 1.04;
  letter-spacing: -.02em
}

.hero .h-hero {
  font-size: min(clamp(40px, 10.6cqi, 132px), 16svh)
}

.hero__copy .lead {
  font-size: clamp(19px, 1.35vw, 24px);
  line-height: 1.6;
  max-width: 38ch
}

.hero__actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-7);
  justify-content: center
}

.hero__actions .btn {
  min-height: 52px;
  padding-inline: 28px;
  font-size: 15px
}

@media(min-width:1000px) {
  .hero__actions {
    justify-content: flex-start
  }
}

.hero__stats {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--stage-line)
}

.hero__stats {
  margin-top: auto
}

.hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px
}

.hero__stat .num-stat {
  font-size: clamp(36px, 3.1vw, 58px);
  font-weight: 500;
  line-height: 1;
  color: var(--stage-muted)
}

.hero__stat--win .num-stat {
  font-size: clamp(48px, 4.3vw, 80px);
  font-weight: 600;
  line-height: 1;
  color: #fff
}

.hero__arrow {
  color: var(--sky);
  font-size: 26px
}

.hero__stat-note {
  flex-basis: 100%;
  text-align: center;
  font-size: var(--fs-fine)
}

@media(min-width:768px) {
  .hero__stat-note {
    flex-basis: auto;
    margin-left: auto;
    text-align: right;
    max-width: 30ch
  }
}

.closer {
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sub);
  line-height: 1.65;
  max-width: 68ch
}

.surface-stage .closer {
  border-top-color: var(--stage-line)
}

.closer__more {
  margin-top: var(--sp-4)
}

.compare {
  margin-bottom: var(--sp-8);
  max-width: min(100%, 880px);
  margin-inline: auto
}

.compare__card {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4)
}

.compare__tag {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink-soft)
}

.compare__media {
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--tint)
}

.compare__media img,
.compare__media video {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 3 / 4;
  object-fit: cover
}

.compare__meta {
  margin-top: var(--sp-3)
}

/* 두 카드의 제목과 주석이 같은 높이에서 시작하도록 행을 맞춘다.
   제목이 한 줄이냐 두 줄이냐에 따라 아래가 밀려 어긋나 있었다.
   figcaption 은 display:contents 라 제목·주석이 직접 행을 차지한다. */
@supports (grid-template-rows: subgrid) {
  @media(min-width:768px) {
    .compare.grid--2 {
      grid-template-rows: auto auto auto auto;
      row-gap: 0
    }

    .compare__card {
      grid-row: 1 / -1;
      display: grid;
      grid-template-rows: subgrid;
      gap: 0
    }

    .compare__card>.compare__tag {
      margin-bottom: var(--sp-4)
    }

    .compare__card>.compare__media {
      margin-bottom: var(--sp-4)
    }

    .compare__card figcaption {
      display: contents
    }
  }
}

.statgrid {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line)
}

.surface-stage .statgrid {
  border-top-color: var(--stage-line)
}

.statgrid__cell {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2)
}

.statgrid .num-stat {
  font-size: clamp(34px, 3.4vw, 50px);
  line-height: 1.05
}

.statgrid__src {
  color: var(--muted-num);
  font-size: var(--fs-fine)
}

.flow {
  display: grid;
  gap: var(--sp-4);
  margin-bottom: var(--sp-7)
}

@media(min-width:768px) {
  .flow {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5)
  }
}

.flow__step {
  padding: var(--sp-5);
  border-left: 2px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2)
}

.flow__step--active {
  border-left-color: var(--brand)
}

/* 두 칸의 번호·제목·설명 줄이 같은 높이에서 시작하도록 행을 공유한다.
   한쪽 설명이 길어 두 줄이 되어도 다른 칸의 다음 줄이 밀리지 않는다. */
@supports (grid-template-rows: subgrid) {
  @media(min-width:768px) {
    .flow {
      grid-template-rows: auto auto auto auto;
      row-gap: var(--sp-2)
    }

    .flow__step {
      grid-row: 1 / -1;
      display: grid;
      grid-template-rows: subgrid;
      gap: 0
    }
  }
}

.flow__num {
  color: var(--muted-num);
  font-size: clamp(24px, 1.9vw, 30px);
  line-height: 1;
  font-weight: 700
}

.flow__step--active .flow__num {
  color: var(--brand)
}

.surface-stage .flow__step {
  border-left-color: var(--stage-line)
}

.surface-stage .flow__step--active {
  border-left-color: var(--sky)
}

.surface-stage .flow__num {
  color: var(--stage-muted)
}

.surface-stage .flow__step--active .flow__num {
  color: var(--sky)
}

.why__cardbody {
  margin: var(--sp-3) 0 var(--sp-4)
}

/* 두 회사 카드 — 설명 길이가 달라 마지막 근거 줄의 시작 높이가 어긋난다.
   subgrid 로 네 줄(라벨·이름·설명·근거)을 부모의 같은 행에 얹는다.
   줄 간격은 각 요소의 margin 이 이미 잡고 있으므로 row-gap 은 0. */
@supports (grid-template-rows: subgrid) {
  @media(min-width:768px) {
    .why__cards {
      grid-template-rows: auto auto 1fr auto;
      row-gap: 0
    }

    .why__cards > .card {
      grid-row: 1 / -1;
      display: grid;
      grid-template-rows: subgrid
    }
  }
}

.card--ours {
  border-color: var(--brand);
  box-shadow: inset 3px 0 0 var(--brand)
}

.card--ours .kicker {
  color: var(--brand)
}

.layers {
  margin-bottom: var(--sp-8)
}

.layers__view {
  position: relative
}

.layers__panel img {
  width: 100%;
  aspect-ratio: 1200/630;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  animation: layer-in .18s ease-out
}

@media (prefers-reduced-motion:reduce) {
  .layers__panel img {
    animation: none
  }
}

@keyframes layer-in {
  0% {
    opacity: .72
  }

  to {
    opacity: 1
  }
}

@media(prefers-reduced-motion:reduce) {
  .layers__panel img {
    animation: none
  }
}

.layers__panel {
  position: relative
}

.heatmap__legend {
  position: absolute;
  left: 12px;
  top: 12px;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(9, 14, 24, .72);
  -webkit-backdrop-filter:blur(6px)
;backdrop-filter: blur(6px)
}

.heatmap__legend .caption {
  color: #fff;
  opacity: .9
}

.heatmap__scale {
  display: flex;
  border-radius: 999px;
  overflow: hidden;
  width: min(220px, 40vw);
  height: 8px
}

.heatmap__scale i {
  flex: 1
}

.layers__hint {
  margin-top: var(--sp-4);
  text-align: center
}

.layers__tabs {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-6)
}

@media(max-width:767px) {
  .layers__view {
    position: sticky;
    top: 72px;
    z-index: 1;
    background: var(--paper);
    padding-bottom: var(--sp-3)
  }

  .layers__tabs .layer {
    min-height: 42svh;
    justify-content: center
  }

  @media(prefers-reduced-motion:reduce) {
    .layers__view {
      position: static
    }

    .layers__tabs .layer {
      min-height: 0
    }
  }
}

@media(min-width:768px)and (max-width:999px) {
  .layers__tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(min-width:1000px) {
  .layers {
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) minmax(292px, 1fr);
    gap: var(--sp-6);
    align-items: center
  }

  .layers__tabs {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    margin-top: 0
  }

  .layers__panel:not([hidden]) {
    display: flex;
    flex-direction: column;
    align-items: center
  }

  .layers__panel img {
    width: auto;
    max-width: 100%;
    max-height: 54svh
  }

  .layers__tabs .layer {
    gap: 4px;
    padding: var(--sp-3) var(--sp-4)
  }

  .layers__tabs .layer .caption {
    font-size: var(--fs-fine);
    line-height: 1.55
  }
}

.layers__tabs .layer {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  border-top-width: 3px;
  transition: border-color .22s ease, background-color .22s ease
}

.layers__tabs .layer[aria-selected=true] {
  border-color: var(--brand);
  border-top-color: var(--signal);
  background: var(--card)
}

.layers__tabs .layer[aria-selected=false] {
  background: color-mix(in srgb, var(--tint) 55%, var(--card))
}

.layers__tabs .layer[aria-selected=false]:hover {
  border-color: var(--brand)
}

/* 네 레이어에서 파이프라인으로 넘어가는 다리 — 질문 한 줄, 답 한 줄 */
.pipeline__q {
  margin-bottom: var(--sp-2);
  max-width: 52ch
}

.pipeline__title {
  margin-bottom: var(--sp-6)
}

.pipeline__steps {
  display: grid;
  gap: var(--sp-4);
  counter-reset: step
}

@media(min-width:900px) {
  .pipeline__steps {
    grid-template-columns: repeat(5, 1fr)
  }
}

.pipeline__steps li {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 2px solid var(--line)
}

.pipeline__steps li.is-output {
  border-top-color: var(--brand)
}

.pipeline__steps li.is-output .pipeline__n,
.pipeline__steps li.is-output .h-sub {
  color: var(--brand)
}

.pipeline__steps li.is-output .h-sub {
  font-weight: 650
}

.pipeline__n {
  font-size: var(--fs-body-tight);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--brand)
}

.pipeline__steps small {
  font-weight: 400;
  color: var(--ink-soft)
}

.mega {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  margin-bottom: var(--sp-8)
}

@media(min-width:768px) {
  .mega {
    flex-direction: row;
    align-items: flex-end;
    gap: var(--sp-8)
  }
}

.mega__side {
  max-width: 42ch;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3)
}

.simreal {
  position: relative;
  margin-bottom: var(--sp-8);
  max-width: min(100%, calc(58svh * 4 / 3));
  margin-inline: auto
}

.simreal img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line)
}

.simreal__cap {
  display: flex;
  justify-content: space-around;
  margin-top: var(--sp-3)
}.simdemo{margin-bottom:var(--sp-8);max-width:min(100%,calc(58svh * 16 / 9));margin-inline:auto}.simdemo video{width:100%;height:auto;display:block;border-radius:var(--radius);border:1px solid var(--line)}.simdemo figcaption{margin-top:var(--sp-4)}
/* §1.5 소개 영상 — 히어로에 이어지는 어두운 면. 첫 스크롤에 바로 걸리는 자리다.
   77초짜리에 소리가 있어서 자동재생하지 않는다. 포스터를 깔고 눌러서 재생한다.
   preload="none" 이라 누르기 전에는 한 바이트도 받지 않는다 — 11MB 를 아무에게나 밀지 않는다. */
.section--film{padding-top:var(--sp-7)}
.film{margin:0;max-width:min(100%,calc(72svh * 16 / 9));margin-inline:auto}
.film__frame{position:relative;aspect-ratio:16 / 9;border-radius:var(--radius);overflow:hidden;border:1px solid var(--stage-line);background:#000}
.film__video{width:100%;height:100%;display:block;object-fit:cover}
.film__play{position:absolute;inset:0;display:grid;place-items:center;padding:0;border:0;background:transparent;cursor:pointer}
.film__play-dot{width:clamp(56px,6.5vw,76px);aspect-ratio:1;border-radius:50%;background:var(--stage-text);color:var(--stage);display:grid;place-items:center;transition:transform .2s ease}
.film__play-dot svg{width:40%;height:40%;margin-left:7%}
.film__play:hover .film__play-dot{transform:scale(1.06)}
.film__play:focus-visible{outline:2px solid var(--stage-text);outline-offset:4px}
@media (prefers-reduced-motion:reduce){.film__play-dot{transition:none}}

/* svh 상한은 막대가 화면 높이를 넘지 않게 두었던 것이다. viewBox 가
   300 → 214 로 낮아지고 아래에 비교표가 붙었으므로 상한을 다시 잡는다. */
.chart {
  padding: var(--sp-5);
  max-width: min(100%, 880px, calc(46svh * 2.24 + var(--sp-5) * 2));
  margin-inline: auto
}

.chart__head {
  margin-bottom: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2)
}

.chart__svg {
  display: block;
  width: 100%;
  height: auto
}

/* 조건 비교표 — 열 비율은 차트 viewBox(왼쪽 여백 100 + 슬롯 95 × 4)와 같다.
   .chart__svg 가 width:100% 로 늘어나므로 두 비율이 같으면 열이 막대와 맞는다.
   ⚠ viewBox 를 고치면 아래 grid-template-columns 도 같이 고쳐야 한다. */
.mx {
  margin-top: var(--sp-3)
}

/* 표의 모서리 칸 = 세로축 제목. 위 캡션으로 빼면 막대와 이름표가 멀어진다.
   ⚠ 칸은 행 높이를 꽉 채워야 한다(stretch). align-self 로 줄이면 남는 자리에
     바탕색(= 가로선 색)이 비쳐 선이 굵어 보인다. 정렬은 칸 안에서 한다. */
.mx__cap {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 0 var(--sp-3) var(--sp-2) 0;
  font-size: var(--fs-fine);
  font-weight: 600;
  line-height: 1.35;
  text-align: right;
  color: var(--ink)
}

/* minmax(0,…) 이 없으면 fr 의 하한이 min-content 라 좁은 화면에서 열이
   글자 길이만큼 벌어지고 막대와 어긋난다. 대신 글자가 넘칠 때만 끊기게 둔다.
   ⚠ 가로선은 칸마다 border 를 그리지 않는다. 칸 너비가 소수점이라
     인접한 선의 끝이 반올림되며 끊어져 보였다. 1px 행 간격으로 바탕색을
     내비쳐 한 줄로 잇는다. */
.mx__grid {
  display: grid;
  grid-template-columns: minmax(0, 100fr) repeat(4, minmax(0, 95fr));
  align-items: stretch;
  row-gap: 1px;
  background: var(--line)
}

.mx__grid > * {
  background: var(--card)
}

.mx__name,
.mx__sub,
.mx__row {
  overflow-wrap: anywhere
}

/* 한 행이 5칸이므로 5n-1 과 5n 은 언제나 3·4열 = 보정이 들어간 두 조건 */
.mx__grid > :nth-child(5n+4),
.mx__grid > :nth-child(5n) {
  background: var(--paper)
}

.mx__col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  padding: 0 4px var(--sp-2);
  text-align: center
}

.mx__name {
  font-size: var(--fs-fine);
  line-height: 1.35;
  color: var(--ink-soft)
}

.mx__col--ours .mx__name {
  color: var(--ink);
  font-weight: 600
}

.mx__sub {
  font-size: 11px;
  line-height: 1.3;
  color: var(--muted-num)
}

.mx__row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  padding: var(--sp-2) var(--sp-3) var(--sp-2) 0;
  font-size: var(--fs-fine);
  line-height: 1.35;
  text-align: right;
  color: var(--ink-soft)
}

.mx__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-2) 0;
  font-size: 15px;
  line-height: 1.35
}

/* ✓ 가 이 표의 결론이다. 눈에 먼저 들어오도록 키우고, ✗ 는 줄인다. */
.mx__cell.is-yes {
  color: var(--brand);
  font-size: 21px;
  font-weight: 700
}

.mx__cell.is-no,
.mx__cell.is-na {
  color: var(--muted-num)
}

.mx__cell.is-no {
  font-size: 13px
}

/* 실측 기반 보정은 우리만 하는 일이다. 이 행만 색과 굵기로 따로 세운다. */
.mx__row--ours {
  color: var(--brand);
  font-weight: 600
}

.mx__rowsub {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted-num)
}

/* 좁은 화면에서도 열 비율은 그대로 둔다 — 어긋나면 표를 놓는 뜻이 없어진다.
   대신 글자만 줄이고 이름은 여러 줄로 접힌다. */
@media(max-width:560px) {

  .mx__name,
  .mx__row {
    font-size: 10px
  }

  .mx__sub {
    font-size: 10px
  }

  .mx__col {
    padding: 0 2px var(--sp-2)
  }

  .mx__cell {
    font-size: 13px
  }

  .mx__cell.is-yes {
    font-size: 18px
  }

  .mx__cell.is-no {
    font-size: 12px
  }
}

.chart__note {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-fine)
}

/* 측정 조건·공개 예정 같은 딸림 정보 — 크게 두면 결과보다 먼저 읽힌다. 작게 뒤에. */
.chart__src,
.closer__note {
  margin-top: var(--sp-2);
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted-num)
}

.gtc {
  margin-bottom: var(--sp-8);
  max-width: min(100%, calc(58svh * 4 / 3));
  margin-inline: auto
}

.gtc img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--stage-line)
}

.gtc figcaption {
  margin-top: var(--sp-4)
}

/* 카드 높이는 가장 긴 카드에 맞춘다. grid-auto-rows:1fr 이면 모든 행이
   가장 큰 행 크기로 같아지고, 카드는 그 안에서 늘어난다. */
.signals {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(232px, 100%), 1fr));
  grid-auto-rows: 1fr
}

.signal {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0
}

.signal__pill {
  max-width: 100%;
  white-space: normal
}

.signal__pill {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--sky);
  color: var(--sky);
  font-size: 12px;
  font-weight: 500
}

.val__note {
  margin-top: var(--sp-6);
  max-width: 62ch
}

.vision {
  text-align: center
}

.vision__line {
  font-size: clamp(24px, 3.4vw, 40px);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -.02em
}

.formcard {
  padding: var(--sp-6)
}

@media(min-width:768px) {
  .formcard {
    padding: var(--sp-7)
  }
}

.form__success {
  padding: var(--sp-7) 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3)
}

.consent,
.form__actions {
  margin-top: var(--sp-5)
}

.more {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-8)
}

@media(min-width:768px) {
  .more {
    grid-template-columns: repeat(3, 1fr)
  }
}

.more__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  transition: border-color .18s ease
}

.more__item:hover {
  border-color: var(--brand)
}

.footer {
  padding-block: var(--sp-8)
}

.footer__top {
  display: grid;
  gap: var(--sp-7);
  margin-bottom: var(--sp-6)
}

@media(min-width:900px) {
  .footer__top {
    grid-template-columns: 1fr 1.4fr
  }
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: flex-start
}

.footer__brand .logo__symbol {
  --logo-symbol-h: 34px
}

/* 브랜드 칸 안에 두면 폭이 모자라 두 줄로 갈린다. footer 전체 폭을 쓰게
   한 줄로 빼 뒀다. 좁은 화면에서는 어차피 접힌다. */
.footer__tagline {
  margin-bottom: var(--sp-6)
}

.footer__meta {
  display: grid;
  gap: var(--sp-5);
  margin: 0;
  font-size: var(--fs-fine)
}

@media(min-width:600px) {
  .footer__meta {
    grid-template-columns: repeat(2, 1fr)
  }
}

.footer__meta dt {
  color: var(--sky);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 4px
}

.footer__meta dd {
  margin: 0;
  line-height: 1.65
}

.footer__meta a {
  display: inline-block;
  padding-block: 6px
}

.footer__meta a:hover {
  color: var(--sky)
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  justify-content: space-between;
  margin-top: var(--sp-5)
}

.stub {
  padding-top: calc(64px + var(--sp-9));
  min-height: 70svh;
  display: flex;
  align-items: center
}

.js .chart__bar {
  transform: scaleY(0);
  transition: transform .72s cubic-bezier(.22, .9, .3, 1)
}

.js .chart.is-in .chart__bar {
  transform: scaleY(1)
}

.js .chart__val {
  opacity: 0;
  transition: opacity .4s ease-out;
  transition-delay: .25s
}

.js .chart.is-in .chart__val {
  opacity: 1
}

@media(prefers-reduced-motion:reduce) {

  .js .chart__bar,
  .js .chart.is-in .chart__bar {
    transform: none;
    transition: none
  }

  .js .chart__val,
  .js .chart.is-in .chart__val {
    opacity: 1;
    transition: none
  }
}

.pattern {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover
}

.pattern--divider {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNjAwIDkwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiPgogIDwhLS0gU3BhY2UgQUkg67iM656c65OcIO2MqO2EtCDjgIzthqTsmKjthqQg7YGs66Gt44CNIOKAlCBkaXZpZGVyCiAgICAgICDrqoXrj4Qg7LCo7J20IO2VmOuCmOuhnOunjCDqtazshLEgKCMwODEzMUYg4oaSICMwRDFGMzEsIEhTTCBMIDcuNiUg4oaSIDEyLjIlKS4KICAgICAgIOuNqeyWtOumrOuKlCDsupTrsoTsiqTrs7Tri6Qg7YGs6rOgIOykkeyLrOydtCDrsJTquaXsnbTrnbwg67CY65Oc7IucIOuRkCDrs4Ag7J207IOB7JeQ7IScIOyemOumsOuLpC4KICAgICAgIOKaoCDroZzqs6DqsIAg7JWE64uI64ukLiDroZzqs6DroZwg7YyQ64+F65CY66m0IOyKpOy8gOydvOydhCDtgqTsmrDqsbDrgpgg7YGs66Gt7J2EIOq5iuqyjCDtlaAg6rKDLiAtLT4KICA8cmVjdCB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MDAiIGZpbGw9IiMwODEzMUYiLz4KICA8ZyBjbGlwLXBhdGg9InVybCgjYykiPgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTY5Ni4wIDM5Ni4wKSByb3RhdGUoMTIpIHNjYWxlKDc0LjU0NSkgdHJhbnNsYXRlKC00OS45OCAtNTAuMDQpIj4KICAgICAgPHBhdGggZD0iTTQ5LjIyLDguMzNDNDkuODAsOC4zNSA1Mi41MCw4LjMxIDUyLjY3LDguNTZDNTIuODMsOC44MCA1MS4yNCw5LjAyIDUwLjIyLDkuNzhDNDkuMjAsMTAuNTQgNDcuNzQsMTEuNzAgNDYuNTYsMTMuMTFDNDUuMzcsMTQuNTIgNDQuMDAsMTYuNjEgNDMuMTEsMTguMjJDNDIuMjIsMTkuODMgNDEuNjcsMjEuNDggNDEuMjIsMjIuNzhDNDAuNzgsMjQuMDcgNDAuNjcsMjQuNzQgNDAuNDQsMjYuMDBDNDAuMjIsMjcuMjYgMzkuOTYsMjguODcgMzkuODksMzAuMzNDMzkuODEsMzEuODAgMzkuODcsMzMuODMgNDAuMDAsMzQuNzhDNDAuMTMsMzUuNzIgNDAuNDMsMzUuNzAgNDAuNjcsMzYuMDBDNDAuOTEsMzYuMzAgNDAuNjcsMzYuNDggNDEuNDQsMzYuNTZDNDIuMjIsMzYuNjMgNDMuOTgsMzYuNzIgNDUuMzMsMzYuNDRDNDYuNjksMzYuMTcgNDguMjQsMzUuNDYgNDkuNTYsMzQuODlDNTAuODcsMzQuMzEgNTEuMzUsMzQuMzEgNTMuMjIsMzMuMDBDNTUuMDksMzEuNjkgNTkuMjQsMjguMDkgNjAuNzgsMjcuMDBDNjIuMzEsMjUuOTEgNjEuODEsMjYuNDQgNjIuNDQsMjYuNDRDNjMuMDcsMjYuNDQgNjMuOTYsMjYuNjMgNjQuNTYsMjcuMDBDNjUuMTUsMjcuMzcgNjUuNTYsMjcuODAgNjYuMDAsMjguNjdDNjYuNDQsMjkuNTQgNjYuNzYsMjkuNDMgNjcuMjIsMzIuMjJDNjcuNjksMzUuMDIgNjguMDYsNDAuNjMgNjguNzgsNDUuNDRDNjkuNTAsNTAuMjYgNzEuMTMsNTcuMjIgNzEuNTYsNjEuMTFDNzEuOTgsNjUuMDAgNzEuNjksNjYuMjggNzEuMzMsNjguNzhDNzAuOTgsNzEuMjggNzAuMTEsNzQuMTEgNjkuNDQsNzYuMTFDNjguNzgsNzguMTEgNjguMTUsNzkuMjAgNjcuMzMsODAuNzhDNjYuNTIsODIuMzUgNjUuNTAsODQuMzUgNjQuNTYsODUuNTZDNjMuNjEsODYuNzYgNjIuNzIsODcuMjggNjEuNjcsODguMDBDNjAuNjEsODguNzIgNTkuMzEsODkuMzkgNTguMjIsODkuODlDNTcuMTMsOTAuMzkgNTYuMzUsOTAuNzAgNTUuMTEsOTEuMDBDNTMuODcsOTEuMzAgNTIuMDAsOTEuNTcgNTAuNzgsOTEuNjdDNDkuNTYsOTEuNzYgNDguODksOTEuNzAgNDcuNzgsOTEuNTZDNDYuNjcsOTEuNDEgNDUuNDEsOTEuMjAgNDQuMTEsOTAuNzhDNDIuODEsOTAuMzUgNDEuMjQsODkuNjcgNDAuMDAsODkuMDBDMzguNzYsODguMzMgMzcuNjMsODcuNTIgMzYuNjcsODYuNzhDMzUuNzAsODYuMDQgMzQuMzcsODUuNDMgMzQuMjIsODQuNTZDMzQuMDcsODMuNjkgMzUuMjAsODIuOTMgMzUuNzgsODEuNTZDMzYuMzUsODAuMTkgMzYuOTQsNzguMDAgMzcuNjcsNzYuMzNDMzguMzksNzQuNjcgMzkuMzcsNzIuODAgNDAuMTEsNzEuNTZDNDAuODUsNzAuMzEgNDEuNDQsNjkuNTkgNDIuMTEsNjguODlDNDIuNzgsNjguMTkgNDMuMzUsNjcuNjMgNDQuMTEsNjcuMzNDNDQuODcsNjcuMDQgNDUuOTQsNjcuMDcgNDYuNjcsNjcuMTFDNDcuMzksNjcuMTUgNDYuMjQsNjYuNTYgNDguNDQsNjcuNTZDNTAuNjUsNjguNTYgNTcuNTAsNzIuMTkgNTkuODksNzMuMTFDNjIuMjgsNzQuMDQgNjIuMTUsNzMuMzcgNjIuNzgsNzMuMTFDNjMuNDEsNzIuODUgNjMuNTQsNzIuNjMgNjMuNjcsNzEuNTZDNjMuODAsNzAuNDggNjMuNzYsNjguMjQgNjMuNTYsNjYuNjdDNjMuMzUsNjUuMDkgNjMuMDYsNjMuNjcgNjIuNDQsNjIuMTFDNjEuODMsNjAuNTYgNjAuODcsNTguNjMgNTkuODksNTcuMzNDNTguOTEsNTYuMDQgNTcuNjEsNTQuOTggNTYuNTYsNTQuMzNDNTUuNTAsNTMuNjkgNTUuOTgsNTMuMzMgNTMuNTYsNTMuNDRDNTEuMTMsNTMuNTYgNDQuODksNTQuODUgNDIuMDAsNTUuMDBDMzkuMTEsNTUuMTUgMzcuNDQsNTQuNTIgMzYuMjIsNTQuMzNDMzUuMDAsNTQuMTUgMzUuMzksNTQuMjIgMzQuNjcsNTMuODlDMzMuOTQsNTMuNTYgMzIuNzAsNTMuMDAgMzEuODksNTIuMzNDMzEuMDcsNTEuNjcgMzAuMzMsNTAuNzggMjkuNzgsNDkuODlDMjkuMjIsNDkuMDAgMjguODUsNDguNTkgMjguNTYsNDcuMDBDMjguMjYsNDUuNDEgMjcuOTgsNDIuNTcgMjguMDAsNDAuMzNDMjguMDIsMzguMDkgMjguMTcsMzYuMTcgMjguNjcsMzMuNTZDMjkuMTcsMzAuOTQgMjkuODUsMjcuODcgMzEuMDAsMjQuNjdDMzIuMTUsMjEuNDYgMzQuMzMsMTYuNDQgMzUuNTYsMTQuMzNDMzYuNzgsMTIuMjIgMzcuMzAsMTIuNzAgMzguMzMsMTIuMDBDMzkuMzcsMTEuMzAgNDAuNjEsMTAuNjMgNDEuNzgsMTAuMTFDNDIuOTQsOS41OSA0NC4wOSw5LjE3IDQ1LjMzLDguODlDNDYuNTcsOC42MSA0OC41Nyw4LjU0IDQ5LjIyLDguNDRDNDkuODcsOC4zNSA0OC42NSw4LjMxIDQ5LjIyLDguMzNaIiBmaWxsPSIjMEQxRjMxIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4KICAgIDwvZz4KICA8L2c+CiAgPGRlZnM+PGNsaXBQYXRoIGlkPSJjIj48cmVjdCB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MDAiLz48L2NsaXBQYXRoPjwvZGVmcz4KPC9zdmc+Cg==)
}

.pattern--closing {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNjAwIDkwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiPgogIDwhLS0gU3BhY2UgQUkg67iM656c65OcIO2MqO2EtCDjgIzthqTsmKjthqQg7YGs66Gt44CNIOKAlCBjbG9zaW5nCiAgICAgICDrqoXrj4Qg7LCo7J20IO2VmOuCmOuhnOunjCDqtazshLEgKCMwODEzMUYg4oaSICMwRDFGMzEsIEhTTCBMIDcuNiUg4oaSIDEyLjIlKS4KICAgICAgIOuNqeyWtOumrOuKlCDsupTrsoTsiqTrs7Tri6Qg7YGs6rOgIOykkeyLrOydtCDrsJTquaXsnbTrnbwg67CY65Oc7IucIOuRkCDrs4Ag7J207IOB7JeQ7IScIOyemOumsOuLpC4KICAgICAgIOKaoCDroZzqs6DqsIAg7JWE64uI64ukLiDroZzqs6DroZwg7YyQ64+F65CY66m0IOyKpOy8gOydvOydhCDtgqTsmrDqsbDrgpgg7YGs66Gt7J2EIOq5iuqyjCDtlaAg6rKDLiAtLT4KICA8cmVjdCB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MDAiIGZpbGw9IiMwODEzMUYiLz4KICA8ZyBjbGlwLXBhdGg9InVybCgjYykiPgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODMyLjAgMTAyNi4wKSByb3RhdGUoLTYpIHNjYWxlKDYxLjgxOCkgdHJhbnNsYXRlKC00OS45OCAtNTAuMDQpIj4KICAgICAgPHBhdGggZD0iTTQ5LjIyLDguMzNDNDkuODAsOC4zNSA1Mi41MCw4LjMxIDUyLjY3LDguNTZDNTIuODMsOC44MCA1MS4yNCw5LjAyIDUwLjIyLDkuNzhDNDkuMjAsMTAuNTQgNDcuNzQsMTEuNzAgNDYuNTYsMTMuMTFDNDUuMzcsMTQuNTIgNDQuMDAsMTYuNjEgNDMuMTEsMTguMjJDNDIuMjIsMTkuODMgNDEuNjcsMjEuNDggNDEuMjIsMjIuNzhDNDAuNzgsMjQuMDcgNDAuNjcsMjQuNzQgNDAuNDQsMjYuMDBDNDAuMjIsMjcuMjYgMzkuOTYsMjguODcgMzkuODksMzAuMzNDMzkuODEsMzEuODAgMzkuODcsMzMuODMgNDAuMDAsMzQuNzhDNDAuMTMsMzUuNzIgNDAuNDMsMzUuNzAgNDAuNjcsMzYuMDBDNDAuOTEsMzYuMzAgNDAuNjcsMzYuNDggNDEuNDQsMzYuNTZDNDIuMjIsMzYuNjMgNDMuOTgsMzYuNzIgNDUuMzMsMzYuNDRDNDYuNjksMzYuMTcgNDguMjQsMzUuNDYgNDkuNTYsMzQuODlDNTAuODcsMzQuMzEgNTEuMzUsMzQuMzEgNTMuMjIsMzMuMDBDNTUuMDksMzEuNjkgNTkuMjQsMjguMDkgNjAuNzgsMjcuMDBDNjIuMzEsMjUuOTEgNjEuODEsMjYuNDQgNjIuNDQsMjYuNDRDNjMuMDcsMjYuNDQgNjMuOTYsMjYuNjMgNjQuNTYsMjcuMDBDNjUuMTUsMjcuMzcgNjUuNTYsMjcuODAgNjYuMDAsMjguNjdDNjYuNDQsMjkuNTQgNjYuNzYsMjkuNDMgNjcuMjIsMzIuMjJDNjcuNjksMzUuMDIgNjguMDYsNDAuNjMgNjguNzgsNDUuNDRDNjkuNTAsNTAuMjYgNzEuMTMsNTcuMjIgNzEuNTYsNjEuMTFDNzEuOTgsNjUuMDAgNzEuNjksNjYuMjggNzEuMzMsNjguNzhDNzAuOTgsNzEuMjggNzAuMTEsNzQuMTEgNjkuNDQsNzYuMTFDNjguNzgsNzguMTEgNjguMTUsNzkuMjAgNjcuMzMsODAuNzhDNjYuNTIsODIuMzUgNjUuNTAsODQuMzUgNjQuNTYsODUuNTZDNjMuNjEsODYuNzYgNjIuNzIsODcuMjggNjEuNjcsODguMDBDNjAuNjEsODguNzIgNTkuMzEsODkuMzkgNTguMjIsODkuODlDNTcuMTMsOTAuMzkgNTYuMzUsOTAuNzAgNTUuMTEsOTEuMDBDNTMuODcsOTEuMzAgNTIuMDAsOTEuNTcgNTAuNzgsOTEuNjdDNDkuNTYsOTEuNzYgNDguODksOTEuNzAgNDcuNzgsOTEuNTZDNDYuNjcsOTEuNDEgNDUuNDEsOTEuMjAgNDQuMTEsOTAuNzhDNDIuODEsOTAuMzUgNDEuMjQsODkuNjcgNDAuMDAsODkuMDBDMzguNzYsODguMzMgMzcuNjMsODcuNTIgMzYuNjcsODYuNzhDMzUuNzAsODYuMDQgMzQuMzcsODUuNDMgMzQuMjIsODQuNTZDMzQuMDcsODMuNjkgMzUuMjAsODIuOTMgMzUuNzgsODEuNTZDMzYuMzUsODAuMTkgMzYuOTQsNzguMDAgMzcuNjcsNzYuMzNDMzguMzksNzQuNjcgMzkuMzcsNzIuODAgNDAuMTEsNzEuNTZDNDAuODUsNzAuMzEgNDEuNDQsNjkuNTkgNDIuMTEsNjguODlDNDIuNzgsNjguMTkgNDMuMzUsNjcuNjMgNDQuMTEsNjcuMzNDNDQuODcsNjcuMDQgNDUuOTQsNjcuMDcgNDYuNjcsNjcuMTFDNDcuMzksNjcuMTUgNDYuMjQsNjYuNTYgNDguNDQsNjcuNTZDNTAuNjUsNjguNTYgNTcuNTAsNzIuMTkgNTkuODksNzMuMTFDNjIuMjgsNzQuMDQgNjIuMTUsNzMuMzcgNjIuNzgsNzMuMTFDNjMuNDEsNzIuODUgNjMuNTQsNzIuNjMgNjMuNjcsNzEuNTZDNjMuODAsNzAuNDggNjMuNzYsNjguMjQgNjMuNTYsNjYuNjdDNjMuMzUsNjUuMDkgNjMuMDYsNjMuNjcgNjIuNDQsNjIuMTFDNjEuODMsNjAuNTYgNjAuODcsNTguNjMgNTkuODksNTcuMzNDNTguOTEsNTYuMDQgNTcuNjEsNTQuOTggNTYuNTYsNTQuMzNDNTUuNTAsNTMuNjkgNTUuOTgsNTMuMzMgNTMuNTYsNTMuNDRDNTEuMTMsNTMuNTYgNDQuODksNTQuODUgNDIuMDAsNTUuMDBDMzkuMTEsNTUuMTUgMzcuNDQsNTQuNTIgMzYuMjIsNTQuMzNDMzUuMDAsNTQuMTUgMzUuMzksNTQuMjIgMzQuNjcsNTMuODlDMzMuOTQsNTMuNTYgMzIuNzAsNTMuMDAgMzEuODksNTIuMzNDMzEuMDcsNTEuNjcgMzAuMzMsNTAuNzggMjkuNzgsNDkuODlDMjkuMjIsNDkuMDAgMjguODUsNDguNTkgMjguNTYsNDcuMDBDMjguMjYsNDUuNDEgMjcuOTgsNDIuNTcgMjguMDAsNDAuMzNDMjguMDIsMzguMDkgMjguMTcsMzYuMTcgMjguNjcsMzMuNTZDMjkuMTcsMzAuOTQgMjkuODUsMjcuODcgMzEuMDAsMjQuNjdDMzIuMTUsMjEuNDYgMzQuMzMsMTYuNDQgMzUuNTYsMTQuMzNDMzYuNzgsMTIuMjIgMzcuMzAsMTIuNzAgMzguMzMsMTIuMDBDMzkuMzcsMTEuMzAgNDAuNjEsMTAuNjMgNDEuNzgsMTAuMTFDNDIuOTQsOS41OSA0NC4wOSw5LjE3IDQ1LjMzLDguODlDNDYuNTcsOC42MSA0OC41Nyw4LjU0IDQ5LjIyLDguNDRDNDkuODcsOC4zNSA0OC42NSw4LjMxIDQ5LjIyLDguMzNaIiBmaWxsPSIjMEQxRjMxIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4KICAgIDwvZz4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDgwLjAgODEwLjApIHJvdGF0ZSgtMTkpIHNjYWxlKDUwLjkwOSkgdHJhbnNsYXRlKC00OS45OCAtNTAuMDQpIj4KICAgICAgPHBhdGggZD0iTTQ5LjIyLDguMzNDNDkuODAsOC4zNSA1Mi41MCw4LjMxIDUyLjY3LDguNTZDNTIuODMsOC44MCA1MS4yNCw5LjAyIDUwLjIyLDkuNzhDNDkuMjAsMTAuNTQgNDcuNzQsMTEuNzAgNDYuNTYsMTMuMTFDNDUuMzcsMTQuNTIgNDQuMDAsMTYuNjEgNDMuMTEsMTguMjJDNDIuMjIsMTkuODMgNDEuNjcsMjEuNDggNDEuMjIsMjIuNzhDNDAuNzgsMjQuMDcgNDAuNjcsMjQuNzQgNDAuNDQsMjYuMDBDNDAuMjIsMjcuMjYgMzkuOTYsMjguODcgMzkuODksMzAuMzNDMzkuODEsMzEuODAgMzkuODcsMzMuODMgNDAuMDAsMzQuNzhDNDAuMTMsMzUuNzIgNDAuNDMsMzUuNzAgNDAuNjcsMzYuMDBDNDAuOTEsMzYuMzAgNDAuNjcsMzYuNDggNDEuNDQsMzYuNTZDNDIuMjIsMzYuNjMgNDMuOTgsMzYuNzIgNDUuMzMsMzYuNDRDNDYuNjksMzYuMTcgNDguMjQsMzUuNDYgNDkuNTYsMzQuODlDNTAuODcsMzQuMzEgNTEuMzUsMzQuMzEgNTMuMjIsMzMuMDBDNTUuMDksMzEuNjkgNTkuMjQsMjguMDkgNjAuNzgsMjcuMDBDNjIuMzEsMjUuOTEgNjEuODEsMjYuNDQgNjIuNDQsMjYuNDRDNjMuMDcsMjYuNDQgNjMuOTYsMjYuNjMgNjQuNTYsMjcuMDBDNjUuMTUsMjcuMzcgNjUuNTYsMjcuODAgNjYuMDAsMjguNjdDNjYuNDQsMjkuNTQgNjYuNzYsMjkuNDMgNjcuMjIsMzIuMjJDNjcuNjksMzUuMDIgNjguMDYsNDAuNjMgNjguNzgsNDUuNDRDNjkuNTAsNTAuMjYgNzEuMTMsNTcuMjIgNzEuNTYsNjEuMTFDNzEuOTgsNjUuMDAgNzEuNjksNjYuMjggNzEuMzMsNjguNzhDNzAuOTgsNzEuMjggNzAuMTEsNzQuMTEgNjkuNDQsNzYuMTFDNjguNzgsNzguMTEgNjguMTUsNzkuMjAgNjcuMzMsODAuNzhDNjYuNTIsODIuMzUgNjUuNTAsODQuMzUgNjQuNTYsODUuNTZDNjMuNjEsODYuNzYgNjIuNzIsODcuMjggNjEuNjcsODguMDBDNjAuNjEsODguNzIgNTkuMzEsODkuMzkgNTguMjIsODkuODlDNTcuMTMsOTAuMzkgNTYuMzUsOTAuNzAgNTUuMTEsOTEuMDBDNTMuODcsOTEuMzAgNTIuMDAsOTEuNTcgNTAuNzgsOTEuNjdDNDkuNTYsOTEuNzYgNDguODksOTEuNzAgNDcuNzgsOTEuNTZDNDYuNjcsOTEuNDEgNDUuNDEsOTEuMjAgNDQuMTEsOTAuNzhDNDIuODEsOTAuMzUgNDEuMjQsODkuNjcgNDAuMDAsODkuMDBDMzguNzYsODguMzMgMzcuNjMsODcuNTIgMzYuNjcsODYuNzhDMzUuNzAsODYuMDQgMzQuMzcsODUuNDMgMzQuMjIsODQuNTZDMzQuMDcsODMuNjkgMzUuMjAsODIuOTMgMzUuNzgsODEuNTZDMzYuMzUsODAuMTkgMzYuOTQsNzguMDAgMzcuNjcsNzYuMzNDMzguMzksNzQuNjcgMzkuMzcsNzIuODAgNDAuMTEsNzEuNTZDNDAuODUsNzAuMzEgNDEuNDQsNjkuNTkgNDIuMTEsNjguODlDNDIuNzgsNjguMTkgNDMuMzUsNjcuNjMgNDQuMTEsNjcuMzNDNDQuODcsNjcuMDQgNDUuOTQsNjcuMDcgNDYuNjcsNjcuMTFDNDcuMzksNjcuMTUgNDYuMjQsNjYuNTYgNDguNDQsNjcuNTZDNTAuNjUsNjguNTYgNTcuNTAsNzIuMTkgNTkuODksNzMuMTFDNjIuMjgsNzQuMDQgNjIuMTUsNzMuMzcgNjIuNzgsNzMuMTFDNjMuNDEsNzIuODUgNjMuNTQsNzIuNjMgNjMuNjcsNzEuNTZDNjMuODAsNzAuNDggNjMuNzYsNjguMjQgNjMuNTYsNjYuNjdDNjMuMzUsNjUuMDkgNjMuMDYsNjMuNjcgNjIuNDQsNjIuMTFDNjEuODMsNjAuNTYgNjAuODcsNTguNjMgNTkuODksNTcuMzNDNTguOTEsNTYuMDQgNTcuNjEsNTQuOTggNTYuNTYsNTQuMzNDNTUuNTAsNTMuNjkgNTUuOTgsNTMuMzMgNTMuNTYsNTMuNDRDNTEuMTMsNTMuNTYgNDQuODksNTQuODUgNDIuMDAsNTUuMDBDMzkuMTEsNTUuMTUgMzcuNDQsNTQuNTIgMzYuMjIsNTQuMzNDMzUuMDAsNTQuMTUgMzUuMzksNTQuMjIgMzQuNjcsNTMuODlDMzMuOTQsNTMuNTYgMzIuNzAsNTMuMDAgMzEuODksNTIuMzNDMzEuMDcsNTEuNjcgMzAuMzMsNTAuNzggMjkuNzgsNDkuODlDMjkuMjIsNDkuMDAgMjguODUsNDguNTkgMjguNTYsNDcuMDBDMjguMjYsNDUuNDEgMjcuOTgsNDIuNTcgMjguMDAsNDAuMzNDMjguMDIsMzguMDkgMjguMTcsMzYuMTcgMjguNjcsMzMuNTZDMjkuMTcsMzAuOTQgMjkuODUsMjcuODcgMzEuMDAsMjQuNjdDMzIuMTUsMjEuNDYgMzQuMzMsMTYuNDQgMzUuNTYsMTQuMzNDMzYuNzgsMTIuMjIgMzcuMzAsMTIuNzAgMzguMzMsMTIuMDBDMzkuMzcsMTEuMzAgNDAuNjEsMTAuNjMgNDEuNzgsMTAuMTFDNDIuOTQsOS41OSA0NC4wOSw5LjE3IDQ1LjMzLDguODlDNDYuNTcsOC42MSA0OC41Nyw4LjU0IDQ5LjIyLDguNDRDNDkuODcsOC4zNSA0OC42NSw4LjMxIDQ5LjIyLDguMzNaIiBmaWxsPSIjMEIxQTI4IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4KICAgIDwvZz4KICA8L2c+CiAgPGRlZnM+PGNsaXBQYXRoIGlkPSJjIj48cmVjdCB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MDAiLz48L2NsaXBQYXRoPjwvZGVmcz4KPC9zdmc+Cg==)
}

.pattern--cover {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNjAwIDkwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiPgogIDwhLS0gU3BhY2UgQUkg67iM656c65OcIO2MqO2EtCDjgIzthqTsmKjthqQg7YGs66Gt44CNIOKAlCBjb3ZlcgogICAgICAg66qF64+EIOywqOydtCDtlZjrgpjroZzrp4wg6rWs7ISxICgjMDgxMzFGIOKGkiAjMEQxRjMxLCBIU0wgTCA3LjYlIOKGkiAxMi4yJSkuCiAgICAgICDrjanslrTrpqzripQg7LqU67KE7Iqk67O064ukIO2BrOqzoCDspJHsi6zsnbQg67CU6rml7J206528IOuwmOuTnOyLnCDrkZAg67OAIOydtOyDgeyXkOyEnCDsnpjrprDri6QuCiAgICAgICDimqAg66Gc6rOg6rCAIOyVhOuLiOuLpC4g66Gc6rOg66GcIO2MkOuPheuQmOuptCDsiqTsvIDsnbzsnYQg7YKk7Jqw6rGw64KYIO2BrOuhreydhCDquYrqsowg7ZWgIOqygy4gLS0+CiAgPHJlY3Qgd2lkdGg9IjE2MDAiIGhlaWdodD0iOTAwIiBmaWxsPSIjMDgxMzFGIi8+CiAgPGcgY2xpcC1wYXRoPSJ1cmwoI2MpIj4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI4OC4wIDkxOC4wKSByb3RhdGUoLTE0KSBzY2FsZSg2Ny4yNzMpIHRyYW5zbGF0ZSgtNDkuOTggLTUwLjA0KSI+CiAgICAgIDxwYXRoIGQ9Ik00OS4yMiw4LjMzQzQ5LjgwLDguMzUgNTIuNTAsOC4zMSA1Mi42Nyw4LjU2QzUyLjgzLDguODAgNTEuMjQsOS4wMiA1MC4yMiw5Ljc4QzQ5LjIwLDEwLjU0IDQ3Ljc0LDExLjcwIDQ2LjU2LDEzLjExQzQ1LjM3LDE0LjUyIDQ0LjAwLDE2LjYxIDQzLjExLDE4LjIyQzQyLjIyLDE5LjgzIDQxLjY3LDIxLjQ4IDQxLjIyLDIyLjc4QzQwLjc4LDI0LjA3IDQwLjY3LDI0Ljc0IDQwLjQ0LDI2LjAwQzQwLjIyLDI3LjI2IDM5Ljk2LDI4Ljg3IDM5Ljg5LDMwLjMzQzM5LjgxLDMxLjgwIDM5Ljg3LDMzLjgzIDQwLjAwLDM0Ljc4QzQwLjEzLDM1LjcyIDQwLjQzLDM1LjcwIDQwLjY3LDM2LjAwQzQwLjkxLDM2LjMwIDQwLjY3LDM2LjQ4IDQxLjQ0LDM2LjU2QzQyLjIyLDM2LjYzIDQzLjk4LDM2LjcyIDQ1LjMzLDM2LjQ0QzQ2LjY5LDM2LjE3IDQ4LjI0LDM1LjQ2IDQ5LjU2LDM0Ljg5QzUwLjg3LDM0LjMxIDUxLjM1LDM0LjMxIDUzLjIyLDMzLjAwQzU1LjA5LDMxLjY5IDU5LjI0LDI4LjA5IDYwLjc4LDI3LjAwQzYyLjMxLDI1LjkxIDYxLjgxLDI2LjQ0IDYyLjQ0LDI2LjQ0QzYzLjA3LDI2LjQ0IDYzLjk2LDI2LjYzIDY0LjU2LDI3LjAwQzY1LjE1LDI3LjM3IDY1LjU2LDI3LjgwIDY2LjAwLDI4LjY3QzY2LjQ0LDI5LjU0IDY2Ljc2LDI5LjQzIDY3LjIyLDMyLjIyQzY3LjY5LDM1LjAyIDY4LjA2LDQwLjYzIDY4Ljc4LDQ1LjQ0QzY5LjUwLDUwLjI2IDcxLjEzLDU3LjIyIDcxLjU2LDYxLjExQzcxLjk4LDY1LjAwIDcxLjY5LDY2LjI4IDcxLjMzLDY4Ljc4QzcwLjk4LDcxLjI4IDcwLjExLDc0LjExIDY5LjQ0LDc2LjExQzY4Ljc4LDc4LjExIDY4LjE1LDc5LjIwIDY3LjMzLDgwLjc4QzY2LjUyLDgyLjM1IDY1LjUwLDg0LjM1IDY0LjU2LDg1LjU2QzYzLjYxLDg2Ljc2IDYyLjcyLDg3LjI4IDYxLjY3LDg4LjAwQzYwLjYxLDg4LjcyIDU5LjMxLDg5LjM5IDU4LjIyLDg5Ljg5QzU3LjEzLDkwLjM5IDU2LjM1LDkwLjcwIDU1LjExLDkxLjAwQzUzLjg3LDkxLjMwIDUyLjAwLDkxLjU3IDUwLjc4LDkxLjY3QzQ5LjU2LDkxLjc2IDQ4Ljg5LDkxLjcwIDQ3Ljc4LDkxLjU2QzQ2LjY3LDkxLjQxIDQ1LjQxLDkxLjIwIDQ0LjExLDkwLjc4QzQyLjgxLDkwLjM1IDQxLjI0LDg5LjY3IDQwLjAwLDg5LjAwQzM4Ljc2LDg4LjMzIDM3LjYzLDg3LjUyIDM2LjY3LDg2Ljc4QzM1LjcwLDg2LjA0IDM0LjM3LDg1LjQzIDM0LjIyLDg0LjU2QzM0LjA3LDgzLjY5IDM1LjIwLDgyLjkzIDM1Ljc4LDgxLjU2QzM2LjM1LDgwLjE5IDM2Ljk0LDc4LjAwIDM3LjY3LDc2LjMzQzM4LjM5LDc0LjY3IDM5LjM3LDcyLjgwIDQwLjExLDcxLjU2QzQwLjg1LDcwLjMxIDQxLjQ0LDY5LjU5IDQyLjExLDY4Ljg5QzQyLjc4LDY4LjE5IDQzLjM1LDY3LjYzIDQ0LjExLDY3LjMzQzQ0Ljg3LDY3LjA0IDQ1Ljk0LDY3LjA3IDQ2LjY3LDY3LjExQzQ3LjM5LDY3LjE1IDQ2LjI0LDY2LjU2IDQ4LjQ0LDY3LjU2QzUwLjY1LDY4LjU2IDU3LjUwLDcyLjE5IDU5Ljg5LDczLjExQzYyLjI4LDc0LjA0IDYyLjE1LDczLjM3IDYyLjc4LDczLjExQzYzLjQxLDcyLjg1IDYzLjU0LDcyLjYzIDYzLjY3LDcxLjU2QzYzLjgwLDcwLjQ4IDYzLjc2LDY4LjI0IDYzLjU2LDY2LjY3QzYzLjM1LDY1LjA5IDYzLjA2LDYzLjY3IDYyLjQ0LDYyLjExQzYxLjgzLDYwLjU2IDYwLjg3LDU4LjYzIDU5Ljg5LDU3LjMzQzU4LjkxLDU2LjA0IDU3LjYxLDU0Ljk4IDU2LjU2LDU0LjMzQzU1LjUwLDUzLjY5IDU1Ljk4LDUzLjMzIDUzLjU2LDUzLjQ0QzUxLjEzLDUzLjU2IDQ0Ljg5LDU0Ljg1IDQyLjAwLDU1LjAwQzM5LjExLDU1LjE1IDM3LjQ0LDU0LjUyIDM2LjIyLDU0LjMzQzM1LjAwLDU0LjE1IDM1LjM5LDU0LjIyIDM0LjY3LDUzLjg5QzMzLjk0LDUzLjU2IDMyLjcwLDUzLjAwIDMxLjg5LDUyLjMzQzMxLjA3LDUxLjY3IDMwLjMzLDUwLjc4IDI5Ljc4LDQ5Ljg5QzI5LjIyLDQ5LjAwIDI4Ljg1LDQ4LjU5IDI4LjU2LDQ3LjAwQzI4LjI2LDQ1LjQxIDI3Ljk4LDQyLjU3IDI4LjAwLDQwLjMzQzI4LjAyLDM4LjA5IDI4LjE3LDM2LjE3IDI4LjY3LDMzLjU2QzI5LjE3LDMwLjk0IDI5Ljg1LDI3Ljg3IDMxLjAwLDI0LjY3QzMyLjE1LDIxLjQ2IDM0LjMzLDE2LjQ0IDM1LjU2LDE0LjMzQzM2Ljc4LDEyLjIyIDM3LjMwLDEyLjcwIDM4LjMzLDEyLjAwQzM5LjM3LDExLjMwIDQwLjYxLDEwLjYzIDQxLjc4LDEwLjExQzQyLjk0LDkuNTkgNDQuMDksOS4xNyA0NS4zMyw4Ljg5QzQ2LjU3LDguNjEgNDguNTcsOC41NCA0OS4yMiw4LjQ0QzQ5Ljg3LDguMzUgNDguNjUsOC4zMSA0OS4yMiw4LjMzWiIgZmlsbD0iIzBEMUYzMSIgZmlsbC1ydWxlPSJldmVub2RkIi8+CiAgICA8L2c+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNDcyLjAgLTEwOC4wKSByb3RhdGUoOSkgc2NhbGUoNTIuNzI3KSB0cmFuc2xhdGUoLTQ5Ljk4IC01MC4wNCkiPgogICAgICA8cGF0aCBkPSJNNDkuMjIsOC4zM0M0OS44MCw4LjM1IDUyLjUwLDguMzEgNTIuNjcsOC41NkM1Mi44Myw4LjgwIDUxLjI0LDkuMDIgNTAuMjIsOS43OEM0OS4yMCwxMC41NCA0Ny43NCwxMS43MCA0Ni41NiwxMy4xMUM0NS4zNywxNC41MiA0NC4wMCwxNi42MSA0My4xMSwxOC4yMkM0Mi4yMiwxOS44MyA0MS42NywyMS40OCA0MS4yMiwyMi43OEM0MC43OCwyNC4wNyA0MC42NywyNC43NCA0MC40NCwyNi4wMEM0MC4yMiwyNy4yNiAzOS45NiwyOC44NyAzOS44OSwzMC4zM0MzOS44MSwzMS44MCAzOS44NywzMy44MyA0MC4wMCwzNC43OEM0MC4xMywzNS43MiA0MC40MywzNS43MCA0MC42NywzNi4wMEM0MC45MSwzNi4zMCA0MC42NywzNi40OCA0MS40NCwzNi41NkM0Mi4yMiwzNi42MyA0My45OCwzNi43MiA0NS4zMywzNi40NEM0Ni42OSwzNi4xNyA0OC4yNCwzNS40NiA0OS41NiwzNC44OUM1MC44NywzNC4zMSA1MS4zNSwzNC4zMSA1My4yMiwzMy4wMEM1NS4wOSwzMS42OSA1OS4yNCwyOC4wOSA2MC43OCwyNy4wMEM2Mi4zMSwyNS45MSA2MS44MSwyNi40NCA2Mi40NCwyNi40NEM2My4wNywyNi40NCA2My45NiwyNi42MyA2NC41NiwyNy4wMEM2NS4xNSwyNy4zNyA2NS41NiwyNy44MCA2Ni4wMCwyOC42N0M2Ni40NCwyOS41NCA2Ni43NiwyOS40MyA2Ny4yMiwzMi4yMkM2Ny42OSwzNS4wMiA2OC4wNiw0MC42MyA2OC43OCw0NS40NEM2OS41MCw1MC4yNiA3MS4xMyw1Ny4yMiA3MS41Niw2MS4xMUM3MS45OCw2NS4wMCA3MS42OSw2Ni4yOCA3MS4zMyw2OC43OEM3MC45OCw3MS4yOCA3MC4xMSw3NC4xMSA2OS40NCw3Ni4xMUM2OC43OCw3OC4xMSA2OC4xNSw3OS4yMCA2Ny4zMyw4MC43OEM2Ni41Miw4Mi4zNSA2NS41MCw4NC4zNSA2NC41Niw4NS41NkM2My42MSw4Ni43NiA2Mi43Miw4Ny4yOCA2MS42Nyw4OC4wMEM2MC42MSw4OC43MiA1OS4zMSw4OS4zOSA1OC4yMiw4OS44OUM1Ny4xMyw5MC4zOSA1Ni4zNSw5MC43MCA1NS4xMSw5MS4wMEM1My44Nyw5MS4zMCA1Mi4wMCw5MS41NyA1MC43OCw5MS42N0M0OS41Niw5MS43NiA0OC44OSw5MS43MCA0Ny43OCw5MS41NkM0Ni42Nyw5MS40MSA0NS40MSw5MS4yMCA0NC4xMSw5MC43OEM0Mi44MSw5MC4zNSA0MS4yNCw4OS42NyA0MC4wMCw4OS4wMEMzOC43Niw4OC4zMyAzNy42Myw4Ny41MiAzNi42Nyw4Ni43OEMzNS43MCw4Ni4wNCAzNC4zNyw4NS40MyAzNC4yMiw4NC41NkMzNC4wNyw4My42OSAzNS4yMCw4Mi45MyAzNS43OCw4MS41NkMzNi4zNSw4MC4xOSAzNi45NCw3OC4wMCAzNy42Nyw3Ni4zM0MzOC4zOSw3NC42NyAzOS4zNyw3Mi44MCA0MC4xMSw3MS41NkM0MC44NSw3MC4zMSA0MS40NCw2OS41OSA0Mi4xMSw2OC44OUM0Mi43OCw2OC4xOSA0My4zNSw2Ny42MyA0NC4xMSw2Ny4zM0M0NC44Nyw2Ny4wNCA0NS45NCw2Ny4wNyA0Ni42Nyw2Ny4xMUM0Ny4zOSw2Ny4xNSA0Ni4yNCw2Ni41NiA0OC40NCw2Ny41NkM1MC42NSw2OC41NiA1Ny41MCw3Mi4xOSA1OS44OSw3My4xMUM2Mi4yOCw3NC4wNCA2Mi4xNSw3My4zNyA2Mi43OCw3My4xMUM2My40MSw3Mi44NSA2My41NCw3Mi42MyA2My42Nyw3MS41NkM2My44MCw3MC40OCA2My43Niw2OC4yNCA2My41Niw2Ni42N0M2My4zNSw2NS4wOSA2My4wNiw2My42NyA2Mi40NCw2Mi4xMUM2MS44Myw2MC41NiA2MC44Nyw1OC42MyA1OS44OSw1Ny4zM0M1OC45MSw1Ni4wNCA1Ny42MSw1NC45OCA1Ni41Niw1NC4zM0M1NS41MCw1My42OSA1NS45OCw1My4zMyA1My41Niw1My40NEM1MS4xMyw1My41NiA0NC44OSw1NC44NSA0Mi4wMCw1NS4wMEMzOS4xMSw1NS4xNSAzNy40NCw1NC41MiAzNi4yMiw1NC4zM0MzNS4wMCw1NC4xNSAzNS4zOSw1NC4yMiAzNC42Nyw1My44OUMzMy45NCw1My41NiAzMi43MCw1My4wMCAzMS44OSw1Mi4zM0MzMS4wNyw1MS42NyAzMC4zMyw1MC43OCAyOS43OCw0OS44OUMyOS4yMiw0OS4wMCAyOC44NSw0OC41OSAyOC41Niw0Ny4wMEMyOC4yNiw0NS40MSAyNy45OCw0Mi41NyAyOC4wMCw0MC4zM0MyOC4wMiwzOC4wOSAyOC4xNywzNi4xNyAyOC42NywzMy41NkMyOS4xNywzMC45NCAyOS44NSwyNy44NyAzMS4wMCwyNC42N0MzMi4xNSwyMS40NiAzNC4zMywxNi40NCAzNS41NiwxNC4zM0MzNi43OCwxMi4yMiAzNy4zMCwxMi43MCAzOC4zMywxMi4wMEMzOS4zNywxMS4zMCA0MC42MSwxMC42MyA0MS43OCwxMC4xMUM0Mi45NCw5LjU5IDQ0LjA5LDkuMTcgNDUuMzMsOC44OUM0Ni41Nyw4LjYxIDQ4LjU3LDguNTQgNDkuMjIsOC40NEM0OS44Nyw4LjM1IDQ4LjY1LDguMzEgNDkuMjIsOC4zM1oiIGZpbGw9IiMwQjFBMjgiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPgogICAgPC9nPgogIDwvZz4KICA8ZGVmcz48Y2xpcFBhdGggaWQ9ImMiPjxyZWN0IHdpZHRoPSIxNjAwIiBoZWlnaHQ9IjkwMCIvPjwvY2xpcFBhdGg+PC9kZWZzPgo8L3N2Zz4K)
}

.moat {
  margin-top: var(--sp-8);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -.01em;
  max-width: 30ch
}

.vision__sub {
  margin-top: var(--sp-6);
  margin-inline: auto;
  max-width: 52ch
}

.dist {
  margin-top: var(--sp-6);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-4)
}

.dist>summary {
  cursor: pointer;
  font-size: var(--fs-caption);
  color: var(--brand);
  font-weight: 500;
  padding: var(--sp-2) 0;
  list-style-position: inside
}

.dist>summary:hover {
  color: var(--deep)
}

.dist__scroll {
  overflow-x: auto;
  margin-top: var(--sp-4)
}

.dist__table {
  width: 100%;
  min-width: 520px;
  font-size: 14px;
  font-variant-numeric: tabular-nums
}

/* 머리글은 왼쪽, 숫자는 오른쪽이라 열마다 중심이 어긋나 있었다.
   첫 열(물체 이름)만 왼쪽으로 두고 나머지는 머리글과 숫자를 같은 중심에 둔다. */
.dist__table th,
.dist__table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  text-align: center
}

.dist__table th {
  font-weight: 500
}

.dist__table th:first-child {
  text-align: left
}

.dist__table thead th {
  color: var(--ink-soft);
  font-size: 13px;
  white-space: nowrap
}

.dist__table tfoot th,
.dist__table tfoot td {
  border-bottom: 0;
  border-top: 2px solid var(--line-strong);
  font-weight: 600
}

.dist__table b {
  color: var(--brand)
}

.dist__note {
  margin-top: var(--sp-3)
}

.cost {
  margin-top: var(--sp-7)
}

.cost__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3)
}

/* 두 카드는 색만으로는 갈리지 않았다. 표면부터 반대로 둔다 —
   우리 쪽은 흰 카드가 떠 있고, 상대 쪽은 회색 바탕에 가라앉는다.
   ⚠ 나쁜 쪽을 흐리게 만들면 "덜 중요하다"로 읽힌다. 반대로 해야 한다.
     치러야 할 값(20억 원 · 박사급 인건비 …)은 오히려 또렷하게 보여야
     부담으로 읽힌다. 흐리게 두는 것은 라벨뿐이다. */
.cost__card--us {
  border-color: var(--brand);
  box-shadow: inset 4px 0 0 var(--brand), 0 10px 28px rgba(11, 31, 51, .09)
}

.cost__card--us .kicker,
.cost__card--us .cost__num {
  color: var(--brand)
}

/* 네 줄 모두 "이미 있음" 인 것이 이 카드의 핵심이다. 한 덩어리로 보이게 한다. */
.cost__card--us .cost__list em {
  color: var(--brand);
  font-weight: 500
}

/* 상대 쪽은 통째로 회색. 진하게 두면 시선이 그쪽에 먼저 가서
   왼쪽 카드가 눌린다. 바탕은 가라앉히고 글자도 한 톤 낮춘다. */
.cost__card--them {
  background: #e4ecf3;
  border-color: #cfdce7;
  box-shadow: none
}

.cost__card--them,
.cost__card--them .kicker,
.cost__card--them .cost__num,
.cost__card--them .cost__list li,
.cost__card--them .cost__list em,
.cost__card--them .cost__list li::before,
.cost__card--them .caption {
  color: var(--muted-num)
}

.cost__card--them .cost__list em {
  font-weight: 400
}

.cost__card--them .cost__list li {
  border-bottom-color: #cfdce7
}

.cost__num {
  font-size: clamp(26px, 2.4vw, 38px);
  line-height: 1.15;
  letter-spacing: -.02em
}

.cost__list {
  list-style: none;
  margin: var(--sp-4) 0;
  padding: 0;
  display: grid;
  gap: 6px
}

.cost__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-fine);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line)
}

.cost__list li::before {
  content: '';
  flex: none;
  width: 1.1em;
  font-weight: 700
}

.cost__list li span {
  flex: 1
}

.cost__list em {
  font-style: normal;
  color: var(--muted-num);
  text-align: right
}

.cost__list--have li::before {
  content: '✓';
  color: var(--brand)
}

.cost__list--need li::before {
  content: '✗';
  color: var(--muted-num)
}

/* 두 카드의 수평 맞추기 — 항목 길이가 달라 "측정 장비"부터 맨 아래 주석까지
   시작 높이가 어긋나 있었다. 카드를 부모의 7행(라벨·숫자·항목 4개·주석)에
   얹는다. ul 은 display:contents 라 li 가 직접 행을 차지한다. */
@supports (grid-template-rows: subgrid) {
  @media(min-width:768px) {
    .cost {
      grid-template-rows: auto auto repeat(4, auto) auto;
      row-gap: 0
    }

    .cost>.cost__card {
      grid-row: 1 / -1;
      display: grid;
      grid-template-rows: subgrid;
      gap: 0
    }

    .cost .cost__list {
      display: contents
    }

    /* display:contents 로 ul 의 margin 이 사라지므로 li 가 대신 띄운다 */
    .cost .cost__list li {
      margin-bottom: 6px
    }

    .cost .cost__list li:first-child {
      margin-top: var(--sp-4)
    }

    .cost .cost__list li:last-child {
      margin-bottom: var(--sp-4)
    }
  }
}

.cost__survey {
  margin-top: var(--sp-5);
  max-width: 68ch
}

.cost__cta {
  margin-top: var(--sp-6)
}

.team {
  margin-top: var(--sp-8);
  padding-top: var(--sp-7);
  border-top: 1px solid var(--stage-line)
}

.team__title {
  margin-bottom: var(--sp-6);
  max-width: 34ch
}

.team__list {
  display: grid;
  gap: var(--sp-5);
  margin: 0
}

@media(min-width:768px) {
  .team__list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5) var(--sp-7)
  }
}

.team__list dt {
  color: var(--stage-text);
  font-weight: 600;
  margin-bottom: 4px
}

.team__list dd {
  margin: 0;
  font-size: var(--fs-caption);
  line-height: 1.6;
  color: var(--stage-soft)
}

.vision__crossover {
  margin: var(--sp-7) auto 0;
  max-width: 46ch;
  font-size: var(--fs-h3);
  line-height: 1.55;
  color: var(--stage-soft)
}

.vision__arc {
  margin-top: var(--sp-6);
  letter-spacing: .02em
}

.legal {
  padding-top: calc(64px + var(--sp-8))
}

.legal h2 {
  margin-top: var(--sp-7)
}

.legal .body {
  margin-top: var(--sp-3);
  max-width: 68ch
}

.legal__note {
  margin-top: var(--sp-7);
  color: var(--muted-num)
}

.vision__line {
  font-size: clamp(30px, 3.9vw, 52px)
}

.beats {
  list-style: none;
  margin-top: clamp(88px, 11svh, 148px);
  text-align: left
}

.beat {
  padding-block: clamp(44px, 5.5svh, 72px);
  border-top: 1px solid var(--stage-line)
}

.beat__no {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-body-tight);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sky)
}

.beat__no span {
  font-variant-numeric: tabular-nums;
  font-weight: 600
}

.beat__no i {
  font-style: normal;
  color: var(--stage-muted);
  letter-spacing: .14em
}

.beat__head {
  font-size: clamp(23px, 2.2vw, 30px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.015em;
  max-width: min(100%, 900px);
  text-wrap: balance;
  margin-bottom: var(--sp-5)
}

.beat .lead {
  font-size: var(--fs-sub);
  line-height: 1.7;
  color: var(--stage-muted);
  max-width: 62ch
}

.ladder {
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--stage-line);
  border: 1px solid var(--stage-line);
  border-radius: var(--radius);
  overflow: hidden
}

@media(min-width:860px) {
  .ladder {
    grid-template-columns: repeat(3, 1fr)
  }
}

.ladder__step {
  background: var(--stage-elev);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2)
}

.ladder__yr {
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--sky);
  font-variant-numeric: tabular-nums
}

/* 예전에는 고객 대사를 큰따옴표로 인용하던 자리였다. 채택 단계 이름으로
   바뀌었으므로 인용문 크기가 아니라 라벨 모양으로 둔다. */
.ladder__say {
  align-self: flex-start;
  padding: 3px 10px;
  border: 1px solid var(--sky);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.5;
  color: var(--sky)
}

.ladder__what {
  font-size: clamp(16px, 1.2vw, 18px);
  font-weight: 600;
  line-height: 1.45;
  color: var(--stage-text)
}

.ladder__step--last {
  background: color-mix(in srgb, var(--sky) 9%, var(--stage-elev))
}

.insure__punch {
  margin-top: 0;
  font-size: var(--fs-sub);
  line-height: 1.6;
  color: var(--stage-muted);
  max-width: 44ch
}

.insure__punch strong {
  color: var(--stage-text);
  font-weight: 600
}

.insure__facts {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-6)
}

@media(min-width:700px) {
  .insure__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

.insure__facts dd {
  margin: 0
}

.insure__facts .num-stat {
  font-size: clamp(32px, 3.2vw, 44px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--stage-text);
  font-variant-numeric: tabular-nums
}

.insure__facts .num-stat span:last-child {
  font-size: .4em;
  font-weight: 500;
  color: var(--sky);
  margin-left: .22em
}

.insure__reg {
  font-size: 17px;
  line-height: 1.5;
  color: var(--stage-text);
  margin-top: var(--sp-2)
}

.beat--dest {
  border-bottom: 1px solid var(--stage-line)
}

.tenT {
  display: grid;
  gap: var(--sp-4);
  align-items: end
}

@media(min-width:860px) {
  .tenT {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--sp-7)
  }
}

.tenT__num {
  font-size: clamp(66px, 7.6vw, 104px);
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--stage-text);
  font-variant-numeric: tabular-nums
}

.tenT__unit {
  font-size: .42em;
  margin-left: .06em;
  color: var(--sky)
}

.tenT__cap {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--stage-muted);
  max-width: 50ch;
  padding-bottom: .35em
}

.tenT__cap strong {
  color: var(--stage-text);
  font-weight: 600
}

.funnel {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line)
}

.funnel__list {
  list-style: none;
  margin-top: var(--sp-5);
  max-width: 640px
}

.funnel__row {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: baseline;
  padding: var(--sp-3) 0
}

/* 금액 칸을 줄마다 따로 재면 '7,500조 원' 과 '20조 원' 의 폭이 달라
   오른쪽 라벨(TAM · SAM · SOM …)이 층층이 어긋난다.
   목록 전체를 하나의 격자로 두고 각 줄이 그 칸을 물려받게 한다. */
@supports (grid-template-columns: subgrid) {
  .funnel__list {
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
    column-gap: var(--sp-5)
  }

  .funnel__row {
    grid-column: 1 / -1;
    grid-template-columns: subgrid
  }
}

.funnel__amt {
  font-size: clamp(20px, 2.1vw, 28px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--muted-num);
  font-variant-numeric: tabular-nums;
  text-align: right
}

.funnel__lbl {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink)
}

.funnel__gap {
  margin-left: 8.5ch;
  padding-left: var(--sp-5);
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--brand);
  font-variant-numeric: tabular-nums
}

@media(min-width:640px) {
  .funnel__gap {
    margin-left: 11ch
  }
}

.funnel__row--here .funnel__amt,
.funnel__row--here .funnel__lbl {
  color: var(--brand)
}

.funnel__row--here {
  border-top: 1px solid var(--line-strong);
  padding-top: var(--sp-4)
}

.funnel__note {
  margin-top: var(--sp-4);
  max-width: 62ch
}

.stage-note {
  margin-top: var(--sp-7);
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--card)
}

.stage-note__line,
.stage-note .caption {
  max-width: 72ch
}

.verdict {
  margin-block: var(--sp-8);
  padding-block: clamp(56px, 7svh, 100px)
}

.section.section--band-top {
  padding-top: 0
}

.verdict--top {
  margin-top: 0
}

.verdict__inner {
  display: grid;
  gap: var(--sp-6)
}

.verdict .mega {
  margin-bottom: 0
}

.verdict .num-mega {
  color: #fff
}

.verdict .h-sub {
  color: var(--stage-text)
}

.verdict .caption {
  color: var(--stage-muted)
}

.verdict .stage-note {
  background: var(--stage-elev);
  border-color: var(--stage-line)
}

.verdict .stage-note__line {
  color: var(--stage-text)
}

.verdict .stage-note__line strong {
  color: #fff
}

.stage-note__line {
  margin-top: var(--sp-2);
  font-size: var(--fs-sub);
  line-height: 1.65;
  color: var(--ink)
}

.stage-note__line strong {
  font-weight: 600
}

.stage-note .caption {
  margin-top: var(--sp-3)
}

#contact .container {
  max-width: 880px
}

.hero__copy .lead {
  text-wrap: balance
}

@media(min-width:768px) {

  .surface-paper+.surface-paper:not(.section--band-top),
  .surface-stage+.surface-stage:not(.section--band-top) {
    padding-top: clamp(72px, 9svh, 96px)
  }
}

.hiring {
  display: grid;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--tint) 45%, var(--card))
}

@media(min-width:640px) {
  .hiring {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--sp-6)
  }
}

.hiring__note .caption {
  color: var(--brand);
  letter-spacing: .08em;
  margin-bottom: var(--sp-2)
}

.hiring__note .body {
  font-size: var(--fs-body-tight);
  line-height: 1.65;
  color: var(--ink-soft)
}

.hiring__roles {
  display: grid;
  gap: var(--sp-3)
}

.hiring__roles>div {
  display: grid;
  grid-template-columns: 2.5ch minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: baseline
}

.hiring__roles dt {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right
}

.hiring__roles dd {
  margin: 0;
  line-height: 1.5
}

.careers {
  margin-top: clamp(72px, 9svh, 120px);
  padding-top: clamp(48px, 6svh, 72px);
  border-top: 1px solid var(--line-strong)
}

.careers__head {
  max-width: 62ch;
  margin-bottom: var(--sp-6)
}

.careers__head .h-section {
  margin: var(--sp-2) 0 var(--sp-4)
}

@media(max-width:767px) {
  .formcard {
    padding-inline: 0;
    padding-block: 0;
    border: 0;
    background: transparent;
    border-radius: 0
  }
}

.lead-card {
  display: grid;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card)
}

@media(min-width:640px) {
  .lead-card {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: start
  }
}

/* 원형은 얼굴을 좌우로 잘라 인상이 흐려진다. 둥근 사각으로 두면
   어깨선까지 남아 사람이 또렷하게 읽힌다. */
.lead-card__photo {
  width: 112px;
  height: 144px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid var(--line)
}

.lead-card__name {
  margin: var(--sp-2) 0 var(--sp-3);
  font-size: clamp(22px, 2.1vw, 28px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink)
}

.lead-card__body .body {
  font-size: var(--fs-body-tight);
  line-height: 1.7
}

.bio ul {
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: 0;
  display: grid;
  gap: 7px
}

.bio li {
  position: relative;
  padding-left: 1em
}

.bio li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--brand);
  font-weight: 700
}

.jn {
  --jn-year: 86px;
  --jn-title: 150px;
  --jn-gap: 16px;
  margin-top: var(--sp-7);
  display: grid;
  gap: 0
}

/* 한 해 = 연도 · 테마 · 항목 세 칸.
   ⚠ 연도와 테마를 한 덩어리로 묶어 넓은 칸에 넣으면 테마가 짧을 때
     오른쪽이 비어 보인다. 칸을 셋으로 나눠 각자 제 폭만 쓰게 한다. */
.jn__year {
  position: relative;
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5) 0 var(--sp-5) var(--sp-5);
  border-top: 1px solid var(--line)
}

.jn__year:last-child {
  border-bottom: 1px solid var(--line)
}

/* 세로선은 항목 칸 바로 왼쪽에 한 줄로 긋는다. 위아래 여백까지 감싸
   해와 해가 이어진다. 굵기는 셋 다 2px 로 같고, 색과 모양으로만 가른다.
     지나온 해  실선 · 중간 톤 · 바탕 그대로
     지금       실선 · 브랜드 색 · 흰 바탕으로 한 단계 뜬다
     앞으로     실선 · 옅은 톤 · 회색 띠로 한 단계 가라앉는다
   ⚠ 예전에는 앞으로를 점선으로만 갈랐다. 선 하나로는 눈에 잘 띄지 않아
     면(바탕색)으로 가른다. 그래서 "실선은 지나온 것" 같은 설명이 필요 없다. */
.jn__year:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--muted-fill)
}

/* 가로 배열은 되도록 일찍 켠다. 900px 은 너무 늦어 좁은 창에서 계속 쌓였다. */
@media(min-width:600px) {
  .jn__year {
    grid-template-columns: var(--jn-year) var(--jn-title) minmax(0, 1fr);
    gap: 0 var(--jn-gap);
    padding-left: 0;
    align-items: baseline
  }

  .jn__year:before {
    left: calc(var(--jn-year) + var(--jn-title) + var(--jn-gap) * 1.5 - 1px)
  }
}

.jn__head {
  display: grid;
  gap: 2px var(--sp-4);
  align-items: baseline
}

@media(min-width:600px) {
  .jn {
    --jn-year: 106px;
    --jn-title: 190px;
    --jn-gap: 20px
  }
}

@media(min-width:900px) {
  .jn {
    --jn-year: 132px;
    --jn-title: 240px;
    --jn-gap: 24px
  }
}

/* ⚠ 이 규칙은 위의 .jn__head 정의보다 뒤에 와야 한다. 같은 순위라
     앞에 두면 display:grid 에 덮여 세 칸 배치가 통째로 무너진다.
   연도와 테마가 부모의 첫 두 칸을 직접 차지하게 한다. */
@media(min-width:600px) {
  .jn__head {
    display: contents
  }
}

.jn__no {
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--muted-num);
  font-variant-numeric: tabular-nums
}

.jn__title {
  font-size: var(--fs-body-tight);
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink)
}

@media(min-width:900px) {
  .jn__title {
    font-size: 16px
  }
}

.jn__list {
  display: grid;
  gap: var(--sp-2);
  max-width: 72ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft)
}

.jn__list li {
  position: relative;
  padding-left: 18px
}

.jn__list li:before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line-strong)
}

.jn__year--now .jn__no,
.jn__year--now .jn__title {
  color: var(--brand)
}

.jn__year--now .jn__title {
  font-weight: 650
}

.jn__year--now:before {
  background: var(--brand)
}

.jn__year--now .jn__list li:before {
  background: var(--brand)
}

.jn__year--plan .jn__no {
  color: var(--muted-num);
  opacity: .72
}

.jn__year--plan .jn__title,
.jn__year--plan .jn__list {
  opacity: .72
}

.jn__year--plan:before {
  background: var(--line)
}

/* 기록과 계획을 면으로 가른다 */
.jn__year--now {
  background: var(--card)
}

.jn__year--plan {
  background: #e9eef4
}

.jn__year--plan + .jn__year--plan {
  border-top-color: #d8e2ec
}

.jn__year--plan .jn__list li:before {
  background: transparent;
  border: 1.5px solid var(--line-strong);
  width: 6px;
  height: 6px;
  top: .55em
}

.jn__foot {
  margin-top: var(--sp-5);
  max-width: 68ch
}

.surface-stage .lead-card {
  background: var(--stage-elev);
  border-color: var(--stage-line)
}

.surface-stage .lead-card__photo {
  border-color: var(--stage-line)
}

.surface-stage .lead-card__name {
  color: var(--stage-text)
}

.surface-stage .lead-card__body .body {
  color: var(--stage-soft)
}

.surface-stage .lead-card__body .body strong {
  color: var(--stage-text)
}

.team .lead-card {
  margin-bottom: var(--sp-5)
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.field__req {
  color: var(--brand);
  margin-left: 2px
}

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  transition: border-color .18s ease
}

.field__textarea {
  min-height: 128px;
  resize: vertical;
  line-height: 1.6
}

.field__input::placeholder,
.field__textarea::placeholder {
  color: var(--muted-num)
}

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  border-color: var(--brand)
}

.field__input[aria-invalid=true],
.field__select[aria-invalid=true],
.field__textarea[aria-invalid=true] {
  border-width: 2px;
  border-color: var(--ink)
}

.field__error {
  font-size: var(--fs-fine);
  font-weight: 500;
  color: var(--ink);
  min-height: 1.2em
}

.field__error:empty {
  min-height: 0
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.chip {
  position: relative
}

.chip input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer
}

.chip span {
  display: block;
  padding: 9px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: var(--fs-fine);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease
}

.chip input:checked+span {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff
}

.chip input:focus-visible+span {
  outline: 2px solid var(--brand);
  outline-offset: 3px
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-fine);
  line-height: 1.6
}

.consent input {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
  flex-shrink: 0
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden
}

.tabs {
  display: inline-flex;
  padding: 4px;
  background: var(--tint);
  border-radius: var(--radius-sm);
  gap: 4px
}

.tabs__btn {
  background: none;
  border: 0;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease
}

.tabs__btn[aria-selected=true] {
  background: var(--card);
  color: var(--ink)
}

.form__grid {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-6)
}

@media(min-width:640px) {
  .form__grid--2 {
    grid-template-columns: repeat(2, 1fr)
  }

  .form__full {
    grid-column: 1 / -1
  }
}

.form__notice {
  font-size: var(--fs-fine);
  line-height: 1.65;
  color: var(--ink-soft);
  padding: var(--sp-4);
  background: var(--tint);
  border-radius: var(--radius-sm)
}

.form__actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  align-items: center
}

@media(max-width:767px) {
  .tabs {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    padding: 0;
    background: none;
    border-radius: 0;
    gap: 0
  }

  .tabs__btn {
    width: 100%;
    text-align: left;
    padding: 12px 0;
    border-radius: 0;
    font-size: 16px;
    border-bottom: 1px solid var(--line)
  }

  .tabs__btn:last-child {
    border-bottom: 0
  }

  .tabs__btn[aria-selected=true] {
    background: none;
    color: var(--brand);
    font-weight: 600;
    box-shadow: -10px 0 0 -8px var(--brand)
  }
}

.field__input,
.field__select,
.field__textarea {
  font-size: 16px;
  line-height: 1.5
}

.field__label {
  font-size: var(--fs-fine)
}

.form__intro {
  margin: var(--sp-6) 0 0;
  font-size: var(--fs-body-tight)
}

.consent span {
  font-size: var(--fs-fine)
}

.field__select,
select.field__input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%236E8299' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 38px
}

.form>.field,
.form>.chips-field {
  margin-top: var(--sp-6)
}

.consent {
  min-height: 44px;
  align-items: center;
  padding-block: 4px
}

.consent input[type=checkbox] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--brand);
  cursor: pointer
}

.pipe {
  list-style: none;
  margin: var(--sp-7) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4)
}

@media(min-width:1100px) {
  .pipe {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }
}

.pipe__step {
  padding-top: var(--sp-4);
  border-top: 2px solid var(--stage-line)
}

.pipe__step .body {
  margin-top: var(--sp-2);
  color: var(--stage-soft)
}

.stack {
  list-style: none;
  margin: var(--sp-7) 0 0;
  padding: 0;
  border-top: 1px solid var(--line)
}

.stack__row {
  display: grid;
  grid-template-columns: 3.5ch 1fr;
  gap: 2px var(--sp-4);
  align-items: baseline;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line)
}

@media(min-width:768px) {
  .stack__row {
    grid-template-columns: 4ch minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, .9fr);
    align-items: center
  }
}

/* 번호는 표를 훑는 눈이 맨 먼저 잡는 자리다. 본문보다 작으면 안 된다. */
.stack__no {
  font-size: var(--fs-body-tight);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--muted-num);
  letter-spacing: .06em
}

.stack__what {
  font-size: var(--fs-body-tight);
  font-weight: 600;
  color: var(--ink)
}

.stack__who,
.stack__state {
  font-size: var(--fs-fine);
  color: var(--ink-soft)
}

@media(max-width:767px) {

  .stack__who,
  .stack__state {
    grid-column: 2
  }
}

@media(min-width:768px) {
  .stack__state {
    text-align: right
  }
}

.stack__row--gap {
  background: var(--tint)
}

.stack__row--gap .stack__state {
  color: var(--brand);
  font-weight: 600
}

.stack__row--us .stack__what,
.stack__row--us .stack__no {
  color: var(--brand)
}

.stack__row--us .stack__what {
  font-weight: 700
}

/* 04 는 이 회사의 좌표다. 다른 줄에는 이름이 서넛인데 여기만 하나이므로,
   그 하나가 눈에 먼저 들어와야 표 자체가 "이 층이 비어 있다"를 말한다. */
.stack__row--us {
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-5)
}

.stack__row--us .stack__no {
  font-weight: 700
}

.stack__row--us .stack__who {
  font-size: var(--fs-body-tight);
  font-weight: 700;
  color: var(--brand);
  letter-spacing: .01em
}

.stack__row--us .stack__state {
  font-weight: 700
}

/* 이미지 먼저 vs 물리 먼저 — 두 방식 카드.
   왼쪽(우리)은 세우고, 오른쪽(기존 방식)은 흐리게 눕힌다. */
.way__steps {
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: way;
  display: grid;
  gap: var(--sp-2);
  align-content: start
}

.way__steps li {
  counter-increment: way;
  display: flex;
  gap: var(--sp-3);
  align-items: baseline;
  font-size: var(--fs-body-tight);
  color: var(--ink-soft)
}

.way__steps li:before {
  content: "0" counter(way);
  font-size: var(--fs-body-tight);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--muted-num);
  flex-shrink: 0
}

.way__verdict {
  margin: var(--sp-5) 0 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-fine);
  line-height: 1.6;
  color: var(--muted-num)
}

.way__verdict--good {
  color: var(--brand);
  font-weight: 600
}

.way--us {
  border-color: var(--brand);
  box-shadow: inset 4px 0 0 var(--brand), 0 10px 28px rgba(11, 31, 51, .09)
}

.way--us .kicker {
  color: var(--brand)
}

.way--us .way__steps li {
  color: var(--ink)
}

.way--us .way__steps li:before {
  color: var(--brand);
  font-weight: 700
}

/* 기존 방식은 읽히되 먼저 눈에 들어오지는 않아야 한다. */
.way--them {
  background: #e4ecf3;
  border-color: #cfdce7;
  box-shadow: none
}

.way--them,
.way--them .kicker,
.way--them .h-sub,
.way--them .way__steps li,
.way--them .way__steps li:before,
.way--them .way__verdict {
  color: var(--muted-num)
}

.way--them .way__verdict {
  border-top-color: #cfdce7
}

.bbp__scroll {
  margin-top: var(--sp-7);
  overflow-x: auto
}

.bbp {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  text-align: left
}

.bbp th,
.bbp td {
  padding: var(--sp-4);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  font-size: var(--fs-fine);
  line-height: 1.6;
  color: var(--ink-soft);
  font-weight: 400
}

.bbp thead th {
  font-size: var(--fs-fine);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand);
  border-bottom-color: var(--line-strong)
}

.bbp tbody th {
  white-space: nowrap
}

.bbp__name {
  display: block;
  font-size: var(--fs-body-tight);
  font-weight: 600;
  color: var(--ink)
}

.bbp__row--us .bbp__name {
  color: var(--brand)
}

.bbp__row--us td {
  color: var(--ink)
}

.tier .num-stat {
  margin: var(--sp-2) 0 var(--sp-4);
  font-size: clamp(26px, 2.2vw, 34px);
  font-weight: 600;
  line-height: 1;
  color: var(--ink)
}

.tier__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-2);
  align-content: start
}

.tier__list li {
  display: flex;
  gap: var(--sp-3);
  font-size: var(--fs-fine);
  line-height: 1.6;
  color: var(--ink-soft)
}

.tier__list li:before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
  color: var(--muted-num);
  flex-shrink: 0
}

/* ⚠ subgrid 행에서는 margin 이 지워진다(.grid--rows4>.card>*).
   위 여백을 padding 으로 갖고 있어야 세 카드의 구분선이 같은 높이에 선다. */
.tier__kpi {
  margin: 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-fine);
  line-height: 1.6;
  color: var(--brand)
}

.proc {
  list-style: none;
  margin: var(--sp-7) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-6)
}

@media(min-width:900px) {
  .proc {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-5)
  }
}

.proc__step {
  padding-top: var(--sp-4);
  border-top: 2px solid var(--line-strong)
}

/* 네 단계의 시기 · 제목 · 본문 · 산출 줄이 같은 높이에서 시작해야
   가로로 훑으며 비교할 수 있다. 줄 간격은 각 요소의 margin 이 갖고
   있으므로 row-gap 은 0 으로 둔다(안 그러면 두 배로 벌어진다). */
@supports (grid-template-rows: subgrid) {
  @media(min-width:900px) {
    .proc {
      column-gap: var(--sp-5);
      row-gap: 0
    }

    .proc__step {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 4;
      align-content: start
    }
  }
}

.proc__step--last {
  border-top-color: var(--brand)
}

.proc__when {
  font-size: var(--fs-fine);
  letter-spacing: .08em;
  color: var(--brand);
  margin-bottom: var(--sp-2)
}

.proc__step .h-sub {
  margin-bottom: var(--sp-3)
}

.proc__step .body {
  font-size: var(--fs-body-tight)
}

.proc__step .caption {
  margin-top: var(--sp-3)
}

.spec {
  margin: var(--sp-4) 0 0;
  display: grid;
  gap: var(--sp-4)
}

.spec dt {
  font-size: var(--fs-fine);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--brand)
}

.spec dd {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-body-tight);
  line-height: 1.65;
  color: var(--ink-soft)
}

.surface-stage .spec dt {
  color: var(--sky)
}

.surface-stage .spec dd {
  color: var(--stage-soft)
}

.spec--wide {
  margin-top: var(--sp-7);
  border-top: 1px solid var(--line);
  gap: 0
}

.spec--wide>div {
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--line)
}

@media(min-width:768px) {
  .spec--wide>div {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr);
    gap: var(--sp-5);
    align-items: baseline
  }

  .spec--wide dd {
    margin-top: 0
  }
}

.prep {
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: prep;
  display: grid;
  gap: var(--sp-3)
}

.prep li {
  counter-increment: prep;
  display: flex;
  gap: var(--sp-3);
  font-size: var(--fs-body-tight);
  line-height: 1.6;
  color: var(--stage-soft)
}

.prep li:before {
  content: counter(prep);
  font-size: var(--fs-body-tight);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sky);
  flex-shrink: 0
}

.people {
  list-style: none;
  margin: var(--sp-7) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-5)
}

@media(min-width:640px) {
  .people {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

/* 카드마다 역할 이름이 한 줄일 수도 두 줄일 수도 있다.
   그대로 두면 이름과 약력이 카드마다 다른 높이에서 시작한다. */
@supports (grid-template-rows: subgrid) {
  @media(min-width:640px) {
    .people {
      row-gap: var(--sp-5)
    }

    .person {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 3;
      align-content: start
    }

    .person>* {
      margin-top: 0;
      margin-bottom: 0
    }

  }
}

@media(min-width:1100px) {
  .people {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }
}

.person .h-sub {
  margin: var(--sp-2) 0 var(--sp-3)
}

.person .body {
  font-size: var(--fs-body-tight)
}

.tech__note,
.co__note {
  margin-top: var(--sp-6);
  max-width: 78ch
}

.page .hero__actions {
  margin-top: var(--sp-7);
  justify-content: flex-start
}

.page .card>.num-stat {
  font-size: clamp(20px, 2.6vw, 34px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: var(--sp-2)
}

.page .surface-stage .card>.num-stat {
  color: var(--stage-text)
}

.page .grid--2,
.page .grid--3,
.page .grid--4,
.pipe {
  grid-template-columns: minmax(0, 1fr)
}

@media(min-width:640px) {
  .page .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(min-width:768px) {

  .page .grid--2,
  .page .grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(min-width:1100px) {
  .page .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .page .grid--4,
  .pipe {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }
}

.page .kicker {
  flex-wrap: wrap
}

.page .kicker>* {
  min-width: 0
}

.pager {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--stage-line);
  display: grid;
  gap: var(--sp-3)
}

@media(min-width:768px) {
  .pager {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .pager__item--next:only-child {
    grid-column: 2
  }
}

.pager__item {
  display: grid;
  gap: 3px;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--stage-line);
  border-radius: var(--radius);
  background: var(--stage-elev);
  transition: border-color .2s ease, background-color .2s ease
}

.pager__item:hover,
.pager__item:focus-visible {
  border-color: var(--sky);
  background: color-mix(in srgb, var(--sky) 10%, var(--stage-elev))
}

.pager__dir {
  font-size: var(--fs-fine);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sky)
}

.pager__title {
  font-size: var(--fs-body-tight);
  font-weight: 600;
  color: var(--stage-text)
}

.pager__desc {
  font-size: var(--fs-fine);
  line-height: 1.55;
  color: var(--stage-soft)
}

.pager__item--next {
  text-align: right
}

.pager__title:after {
  content: ""
}

.pager__item--next .pager__title:after {
  content: none;
  color: var(--sky)
}

.pager__item--prev .pager__dir:before {
  content: "← "
}

.pager__item--end {
  border-color: var(--sky)
}

.page .signals {
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr))
}


/* ── IR 반영(2026-09) — 기술 페이지 미디어 ─────────────── */
.techmedia{margin:var(--sp-7) auto 0;max-width:760px}
.techmedia video{display:block;width:100%;height:auto;border-radius:var(--radius);background:#000}
.techmedia figcaption{margin-top:var(--sp-3);color:var(--stage-soft)}
.tri-fig{margin:var(--sp-7) 0 0}
.tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4);max-width:960px;margin:0;padding:0;list-style:none}
.tri img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius)}
.tri p{margin:var(--sp-3) 0 0;color:var(--stage-soft)}
.tri-fig figcaption{margin-top:var(--sp-5);color:var(--stage-text);max-width:60ch}
@media(max-width:600px){.tri{gap:8px}.tri p{font-size:13px}}

/* 종이 · FPC — 원본이 480px 이라 원본 크기 이상으로 늘리지 않는다 */
.paperset{margin-top:var(--sp-7)}
.paperset__head{max-width:62ch;margin-bottom:var(--sp-5)}
.paperset__head .h-sub{margin:var(--sp-2) 0 var(--sp-3)}
.paperset__grid{display:grid;grid-template-columns:repeat(3,minmax(0,480px));gap:var(--sp-4)}
.paperset__item{margin:0}
.paperset__item video{display:block;width:100%;height:auto;border-radius:var(--radius);background:#d9d6d0}
.paperset__item figcaption{margin-top:var(--sp-3)}
@media(max-width:767px){.paperset__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.paperset__item:last-child{grid-column:1/-1}}

/* 포지션 목록과 열린 지원은 어두운 면과 밝은 면 어디에도 놓일 수 있다. 색을 면에서 받는다 */
.surface-stage{--r-line:var(--stage-line);--r-text:var(--stage-text);--r-soft:var(--stage-soft);--r-acc:var(--sky);--r-elev:var(--stage-elev)}
.surface-paper{--r-line:var(--line);--r-text:var(--ink);--r-soft:var(--ink-soft);--r-acc:var(--brand);--r-elev:var(--card)}
/* Careers 첫 화면 — 포지션 목록이 바로 이어지도록 아래 여백을 줄인다 */
.section--intro{padding-bottom:var(--sp-8)}
.section--intro .section__head{margin-bottom:0}
/* Careers 첫 화면 — 가운데 정렬. 큰 제목, 사명 한 문단, 포지션으로 가는 버튼 (World Labs 구성) */
.careers-hero .section__head{display:flex;flex-direction:column;align-items:center;text-align:center}
.careers-hero .kicker{justify-content:center}
.careers-hero .kicker:before{display:none}
.careers-hero .h-section{max-width:none;text-wrap:balance}
.careers-hero__p{max-width:48em;margin:var(--sp-6) auto 0;font-size:var(--fs-sub);line-height:1.8;color:var(--stage-soft);text-wrap:balance}
.careers-hero__p .em{color:var(--stage-text);font-weight:600}
.careers-hero__cta{margin:var(--sp-6) 0 0}
.br-lg{display:none}
@media(min-width:1200px){.br-lg{display:inline}}
.section--intro{padding-top:120px}
.section--roles{padding-top:var(--sp-7)}
.section--roles .section__head{margin-bottom:var(--sp-5)}
.section--roles .h-section{font-size:var(--fs-h3);font-weight:650;margin-bottom:0}
.section--roles .kicker{margin-bottom:var(--sp-2)}
.section--roles .roles{margin-top:0}
/* ── Careers — 포지션 목록 (이름만 보이고 누르면 펼친다) ─────────── */
.roles{border-top:1px solid var(--r-line);margin-top:var(--sp-6)}
.role{border-bottom:1px solid var(--r-line)}
.role__sum{display:grid;grid-template-columns:minmax(0,1fr) 28px;grid-template-areas:"meta icon" "name icon" "line icon";
  gap:var(--sp-1) var(--sp-4);align-items:center;padding:var(--sp-5) 0;cursor:pointer;list-style:none}
.role__sum::-webkit-details-marker{display:none}
.role__sum:focus-visible{outline:2px solid var(--r-acc);outline-offset:4px;border-radius:4px}
.role__name{grid-area:name;font-size:var(--fs-h3);font-weight:700;line-height:1.3;color:var(--r-text)}
.role__line{grid-area:line;color:var(--r-soft);font-size:var(--fs-body-tight);line-height:1.6}
.role__meta{grid-area:meta;display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-1)}
.chip{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border:1px solid var(--r-line);border-radius:999px;
  font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--r-acc)}
.role__sum:hover .role__name{color:var(--r-acc)}
.role__name{transition:color .18s ease}
.role__icon{grid-area:icon;position:relative;width:28px;height:28px;border:1px solid var(--r-line);border-radius:50%}
.role__icon::before,.role__icon::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;
  margin:-1px 0 0 -6px;background:var(--r-text);transition:transform .2s ease}
.role__icon::after{transform:rotate(90deg)}
.role[open] .role__icon::after{transform:rotate(0deg)}
.role__body{padding:var(--sp-2) 0 var(--sp-7)}
.role__detail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5)}
.role__h{margin:0 0 var(--sp-2);color:var(--r-acc);letter-spacing:.04em}
.role__list{margin:0;padding-left:1.1em;color:var(--r-text);list-style:disc}
.role__list li{margin:0 0 var(--sp-3);line-height:1.65}
.role__list li::marker{color:var(--r-acc)}
.role__cta{margin:var(--sp-5) 0 0}
@media(max-width:899px){.role__detail{grid-template-columns:1fr;gap:var(--sp-4)}}
@media(prefers-reduced-motion:reduce){.role__icon::before,.role__icon::after{transition:none}}

/* 첫 화면 두 숫자 사이 — 화살표 글자 대신 가는 선 */
.hero__arrow{display:inline-block;width:40px;height:2px;background:currentColor;opacity:.5;align-self:center}

/* ── News — 소식 카드 (한 소식 = 카드 한 장, 누르면 /news/ 상세 페이지)
   같은 소식을 여러 매체가 보도하므로 카드는 우리 페이지로 보내고, 기사 링크는 상세 페이지에 모은다 */
.press-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5)}
.press-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.press{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);overflow:hidden;
  transition:border-color .2s ease,box-shadow .2s ease}
.press:hover{border-color:var(--brand);box-shadow:0 10px 28px -18px rgba(11,31,51,.45)}
.press__link{display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none}
.press__link:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.press__thumb{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--tint);border-bottom:1px solid var(--line)}
.press__thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.press__link:hover .press__thumb img{transform:scale(1.03)}
.press__body{display:flex;flex-direction:column;gap:var(--sp-3);flex:1;padding:var(--sp-5)}
.press__meta{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin:0;font-size:var(--fs-fine);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.press__tag{color:var(--brand);font-weight:600}
.press__title{margin:0;font-size:var(--fs-sub);font-weight:650;line-height:1.45;letter-spacing:-.01em;color:var(--ink);text-wrap:pretty}
.press__sum{margin:0;font-size:var(--fs-body-tight);line-height:1.7;color:var(--ink-soft);text-wrap:pretty}
.press__foot{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);margin:auto 0 0;padding-top:var(--sp-3);font-size:var(--fs-fine)}
.press__read{font-weight:600;color:var(--brand)}
.press__count{color:var(--ink-soft)}
@media(max-width:899px){.press-grid,.press-grid--3{grid-template-columns:1fr}}
@media(min-width:600px) and (max-width:899px){.press-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.press__thumb img{transition:none}.press__link:hover .press__thumb img{transform:none}}

/* ── News 상세 — 읽기 폭으로 좁힌 단일 기사 */
.container--read{width:min(760px,100% - 2 * var(--gutter));max-width:none}
.article-head{padding-bottom:var(--sp-8)}
.article__back{display:inline-block;margin:0 0 var(--sp-6);font-size:var(--fs-fine);color:var(--sky)}
.article__meta{display:flex;gap:var(--sp-3);margin:0 0 var(--sp-4);font-size:var(--fs-fine);color:var(--stage-soft);font-variant-numeric:tabular-nums}
.article__tag{color:var(--sky);font-weight:600}
.article__title{margin:0;font-size:clamp(30px,3.1vw,50px);font-weight:600;line-height:1.3;letter-spacing:-.02em;text-wrap:balance}
.article-head .article__lead{max-width:none;margin-inline:0}
.article{padding-top:var(--sp-8)}
.article__fig{margin:0 0 var(--sp-7)}
.article__fig img{display:block;width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--line);background:var(--tint)}
.article__fig figcaption{margin-top:var(--sp-3)}
.article__fig--sub{margin-top:var(--sp-7)}
.article__body p{margin:0 0 var(--sp-5);font-size:var(--fs-body);line-height:1.85;color:var(--ink)}
.article__h{margin:var(--sp-8) 0 var(--sp-4);font-size:var(--fs-h3);font-weight:650;line-height:1.35;color:var(--ink)}
.article__h--more{margin-top:0;margin-bottom:var(--sp-6)}
.cov{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.cov a{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);min-height:56px;padding:var(--sp-3) 0;
  border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.cov a:hover .cov__go,.cov a:focus-visible .cov__go{text-decoration:underline}
.cov__outlet{font-weight:600}
.cov__go{flex:none;font-size:var(--fs-fine);font-weight:600;color:var(--brand)}
.section--more{border-top:1px solid var(--line)}

/* 의미 덩어리를 묶어 그 안에서는 줄을 바꾸지 않는다. 좁은 화면에서도 묶음 사이에서만 줄이 바뀐다 */
.nw{white-space:nowrap}

/* Careers — 열린 지원. 목록에 없는 분야의 지원과 제안을 받는다 */
.open-app{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-5) var(--sp-7);align-items:center;margin-top:var(--sp-8);
  padding:var(--sp-6);border:1px solid var(--r-line);border-radius:var(--radius);background:var(--r-elev)}
.open-app__h{margin:0 0 var(--sp-2);font-size:var(--fs-h3);font-weight:650;line-height:1.35;color:var(--r-text)}
.open-app__p{margin:0;font-size:var(--fs-body-tight);line-height:1.7;color:var(--r-soft)}
@media(max-width:767px){.open-app{grid-template-columns:1fr}}
.footer__bottom .link-underline{margin-left:var(--sp-3)}
.notfound{min-height:70svh;display:flex;align-items:center}
.notfound .container{width:100%}

/* ══ IR 테마 (theme-light) ═══════════════════════════════════════════
   2026-10 IR 덱의 시각 언어를 옮겼다. 밝은 청회색 바탕, Pretendard 굵은 제목,
   핵심 낱말만 선명한 파랑, 흰 라운드 카드. Home, Product, 문의 페이지가 쓴다. */
:root{--ir-bg:#eef3fb;--ir-bg2:#e3ecf8;--ir-ink:#182436;--ir-sub:#475467;--ir-blue:#2762ec;--ir-blue-d:#1f4fc4;
  --ir-line:#d6e0ee;--ir-card:#ffffff;--ir-night:#111a2e}
body.theme-light{background:var(--ir-bg);color:var(--ir-ink)}
.ir-em{color:var(--ir-blue)}

/* 상단 내비 — 밝은 유리, 로고는 IR 처럼 짙은 색 */
.theme-light .nav{background:color-mix(in srgb,#f5f8fd 78%,transparent);border-bottom-color:transparent}
.theme-light .nav.is-scrolled{background:color-mix(in srgb,#f5f8fd 94%,transparent);border-bottom-color:var(--ir-line)}
.theme-light .nav .logo__lockup{filter:brightness(0);opacity:.88}
.theme-light .nav__tabs a{color:#5b6b80}
.theme-light .nav__tabs a:hover{color:var(--ir-ink)}
.theme-light .nav__tabs a:after{background:var(--ir-blue)}
.theme-light .nav__tabs a[aria-current=page]{color:var(--ir-ink)}
.theme-light .nav__tabs a[aria-current=page]:after{background:var(--ir-blue)}
.theme-light .lang{border-color:var(--ir-line)}
.theme-light .lang__btn{color:#5b6b80}
.theme-light .lang__btn[aria-pressed=true]{background:rgba(24,36,54,.08);color:var(--ir-ink)}
.theme-light .nav .btn--outline{border-color:rgba(24,36,54,.22);color:var(--ir-ink)}
.theme-light .nav .btn--outline:hover{border-color:var(--ir-blue);color:var(--ir-blue)}
.theme-light .nav__toggle-bar{background:var(--ir-ink)}
.theme-light .nav__panel{background:#f5f8fd;border-top-color:var(--ir-line)}
.theme-light .nav__panel a{color:var(--ir-ink)}
.theme-light .reading{display:none}

/* 공통 부품 */
.ir-pill{display:inline-flex;align-items:center;min-height:30px;margin:0;padding:0 14px;border-radius:999px;background:#fff;
  border:1px solid var(--ir-line);font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--ir-ink)}
.ir-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:12px;
  font-size:16px;font-weight:600;text-decoration:none;border:1px solid transparent;transition:background-color .18s ease,border-color .18s ease,color .18s ease}
.ir-btn--primary{background:var(--ir-blue);color:#fff}
.ir-btn--primary:hover{background:var(--ir-blue-d)}
.ir-btn--ghost{background:#fff;color:var(--ir-ink);border-color:var(--ir-line)}
.ir-btn--ghost:hover{border-color:var(--ir-blue);color:var(--ir-blue)}
.ir-btn:focus-visible{outline:2px solid var(--ir-blue);outline-offset:3px}

/* 첫 화면 — 배경 영상 위에 메시지가 곧바로 보인다 (페이드인 없음) */
.hx{position:relative;display:flex;align-items:center;min-height:min(100svh,940px);padding:128px 0 96px;overflow:hidden;background:var(--ir-bg2)}
.hx__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hx::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(238,243,251,.97) 0%,rgba(238,243,251,.9) 36%,rgba(238,243,251,.35) 64%,rgba(238,243,251,0) 82%),
  linear-gradient(0deg,var(--ir-bg) 0%,rgba(238,243,251,0) 24%)}
.hx__in{position:relative;z-index:1}
.hx__h{margin:0;font-size:clamp(32px,3.9vw,60px);font-weight:600;line-height:1.2;letter-spacing:-.03em;color:var(--ir-ink);text-wrap:balance}
.hx__p{max-width:32em;margin:24px 0 0;font-size:clamp(17px,1.35vw,21px);line-height:1.7;color:var(--ir-sub);text-wrap:pretty}
.hx__cta{display:flex;flex-wrap:wrap;gap:12px;margin:36px 0 0}
@media(max-width:767px){
  .hx{align-items:flex-end;min-height:88svh;padding:96px 0 48px}
  .hx::after{background:linear-gradient(0deg,rgba(238,243,251,.98) 42%,rgba(238,243,251,.7) 68%,rgba(238,243,251,.2) 100%)}
}

/* 섹션 */
.irs{padding:clamp(80px,10vw,140px) 0}
.irs--alt{background:#fff}
.irs--top{padding-top:clamp(128px,14vw,180px);padding-bottom:clamp(40px,5vw,64px)}
.irs--cta{padding-top:0}
.irs--alt+.irs--cta{padding-top:clamp(80px,10vw,140px)}
.irs__head{max-width:48em;margin:0 0 clamp(40px,5vw,64px)}
.irs__head--top{margin-bottom:0}
.irs__head--sub{margin-top:clamp(72px,9vw,120px)}
.irs__h{margin:18px 0 0;font-size:clamp(26px,2.5vw,38px);font-weight:700;line-height:1.25;letter-spacing:-.03em;color:var(--ir-ink);text-wrap:balance}
.irs__h--xl{font-size:clamp(28px,3.06vw,48px);line-height:1.22}
.irs__h--md{font-size:clamp(24px,2.4vw,36px)}
.irs__p{max-width:40em;margin:18px 0 0;font-size:clamp(17px,1.2vw,19px);line-height:1.75;color:var(--ir-sub);text-wrap:pretty}

/* 카드 */
.ir-steps,.ir-flow{list-style:none;margin:0;padding:0}
.ir-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ir-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:clamp(40px,5vw,64px)}
.ir-card{display:flex;flex-direction:column;overflow:hidden;background:var(--ir-card);border:1px solid var(--ir-line);border-radius:20px;color:inherit;text-decoration:none}
.irs--alt .ir-card{background:var(--ir-bg)}
.ir-card--text{padding:28px}
.ir-card--link{transition:border-color .2s ease,transform .2s ease}
.ir-card--link:hover{border-color:var(--ir-blue)}
.ir-card--link:focus-visible{outline:2px solid var(--ir-blue);outline-offset:3px}
.ir-card__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0d1626}
.ir-card__media--wide{aspect-ratio:16/9}
.ir-card__media img{display:block;width:100%;height:100%;object-fit:cover}
.ir-card__media--pair img{object-fit:contain}
.ir-card__body{padding:24px 26px 28px}
.ir-card__n{margin:0;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--ir-blue);font-variant-numeric:tabular-nums}
.ir-card__t{margin:8px 0 0;font-size:clamp(20px,1.6vw,24px);font-weight:700;letter-spacing:-.02em;color:var(--ir-ink)}
.ir-card--text .ir-card__t{margin-top:10px}
.ir-card__d{margin:10px 0 0;font-size:16px;line-height:1.7;color:var(--ir-sub)}
.ir-card__more{margin:18px 0 0;font-size:15px;font-weight:600;color:var(--ir-blue)}
.ir-tag{position:absolute;bottom:12px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.92);font-size:12px;font-weight:600;color:var(--ir-ink)}
.ir-tag--l{left:12px}
.ir-tag--r{right:12px}
.ir-prod{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.ir-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media(max-width:1099px){.ir-flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:899px){.ir-steps,.ir-prod,.ir-grid3{grid-template-columns:1fr}}
@media(max-width:599px){.ir-flow{grid-template-columns:1fr}}

/* 결과 — 큰 숫자 두 개와 실물 영상 */
.ir-result{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(40px,6vw,96px);align-items:center}
.ir-nums{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;margin:40px 0 0}
.ir-num{margin:0;font-size:clamp(44px,5vw,76px);font-weight:700;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.ir-num--before{color:#a3b0c2}
.ir-num--after{color:var(--ir-blue)}
.ir-num__l{margin:12px 0 0;font-size:15px;font-weight:500;color:var(--ir-sub)}
.ir-nums__line{width:56px;height:2px;background:#bcc8d8}
.ir-result__media{justify-self:center;width:min(100%,340px);aspect-ratio:9/16;overflow:hidden;border-radius:20px;background:#0d1626}
.ir-result__media video{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:899px){.ir-result{grid-template-columns:1fr}.ir-result__media{width:min(100%,300px)}}

/* 마무리 띠 — IR 하단의 짙은 남색 띠 */
.ir-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px;padding:clamp(40px,6vw,72px);border-radius:28px;background:var(--ir-night);color:#fff}
.ir-cta__h{margin:0;font-size:clamp(26px,2.6vw,40px);font-weight:700;line-height:1.3;letter-spacing:-.025em}
.ir-cta__p{margin:14px 0 0;font-size:17px;line-height:1.7;color:#b6c2d4}

/* Product */
.ir-subnav{position:sticky;top:64px;z-index:20;background:color-mix(in srgb,var(--ir-bg) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--ir-line)}
.ir-subnav .container{display:flex;gap:8px;padding-block:12px}
.ir-subnav a{display:inline-flex;align-items:center;min-height:40px;padding:0 20px;border-radius:999px;font-size:15px;font-weight:600;color:var(--ir-sub);text-decoration:none}
.ir-subnav a:hover{color:var(--ir-ink);background:rgba(24,36,54,.05)}
.ir-subnav a[aria-current]{background:var(--ir-ink);color:#fff}
#data,#platform{scroll-margin-top:128px}
.ir-split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,5vw,72px);align-items:center}
@media(max-width:899px){.ir-split{grid-template-columns:1fr}}
.ir-fig{margin:0}
.ir-fig img{display:block;width:100%;height:auto;border-radius:16px;border:1px solid var(--ir-line);background:#0d1626}
.ir-fig figcaption{margin-top:12px;font-size:14px;line-height:1.6;color:var(--ir-sub)}
.ir-fig--tri figcaption{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));text-align:center;font-weight:600;color:var(--ir-ink)}
.ir-fig--lib img{max-width:880px;margin-inline:auto;background:#fff}
.ir-list{margin:0;display:grid;gap:0;border-top:1px solid var(--ir-line)}
.ir-list div{padding:18px 0;border-bottom:1px solid var(--ir-line)}
.ir-list dt{font-size:15px;font-weight:700;letter-spacing:.02em;color:var(--ir-blue)}
.ir-list dd{margin:6px 0 0;font-size:16px;line-height:1.7;color:var(--ir-ink)}
.ir-note{margin:24px 0 0;font-size:15px;color:var(--ir-sub)}

/* 문의 — 기존 양식 카드를 IR 바탕 위에 */
.irs--form .formcard{margin-top:clamp(40px,5vw,56px);border-radius:20px;border-color:var(--ir-line)}
/* 넓은 화면에서는 IR 표지처럼 글은 왼쪽, 영상은 오른쪽. 로봇이 제목 뒤에 가려지지 않게 */
@media(min-width:1000px){
  .hx__video{left:30%;width:70%}
  .hx::after{background:
    linear-gradient(90deg,var(--ir-bg) 0%,var(--ir-bg) 30%,rgba(238,243,251,.55) 44%,rgba(238,243,251,0) 60%),
    linear-gradient(0deg,var(--ir-bg) 0%,rgba(238,243,251,0) 22%)}
}

/* 언어 메뉴 — 지구본 아이콘. 어두운 페이지와 밝은 페이지 모두 글자색을 따른다 */
.langmenu{position:relative;flex-shrink:0}
.langmenu__btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;border:1px solid transparent;border-radius:10px;background:none;color:inherit;font:inherit;font-size:13px;font-weight:600;letter-spacing:.04em;cursor:pointer}
.langmenu__btn:hover,.langmenu__btn[aria-expanded=true]{border-color:currentColor}
.langmenu__btn:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.langmenu__cur::after{content:"KO"}
html[data-lang=en] .langmenu__cur::after{content:"EN"}
.langmenu__list{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:148px;padding:6px;border-radius:12px;background:#fff;border:1px solid var(--ir-line);box-shadow:0 12px 32px -12px rgba(11,31,51,.35);display:grid;gap:2px}
.langmenu__list[hidden]{display:none}
.langmenu .lang__btn{display:block;width:100%;padding:10px 12px;border-radius:8px;text-align:left;font-size:15px;font-weight:500;letter-spacing:0;color:var(--ir-ink);background:none}
.langmenu .lang__btn:hover{background:var(--ir-bg)}
.langmenu .lang__btn[aria-pressed=true]{background:var(--ir-bg);color:var(--ir-blue);font-weight:600}
.nav .langmenu{color:var(--stage-soft)}
.theme-light .nav .langmenu{color:#5b6b80}

/* Product Data — 영상 위에 더하는 두 라벨 */
.ir-labels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ir-label{padding:28px;border-radius:20px;background:#fff;border:2px solid var(--ir-blue)}
.ir-label--base{border:1px solid var(--ir-line);background:transparent}
.ir-label__k{margin:0;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--ir-blue)}
.ir-label--base .ir-label__k{color:var(--ir-sub)}
.ir-label__t{margin:10px 0 0;font-size:clamp(22px,1.9vw,28px);font-weight:700;letter-spacing:-.02em;color:var(--ir-ink)}
.ir-label__en{margin:4px 0 0;font-size:14px;font-weight:600;color:var(--ir-blue)}
html[data-lang=en] .ir-label__en{visibility:hidden} /* 자리는 남긴다: 언어를 바꿔도 아래 설명이 움직이지 않게 */
.ir-label__d{margin:14px 0 0;font-size:16px;line-height:1.7;color:var(--ir-sub)}
@media(max-width:899px){.ir-labels{grid-template-columns:1fr}}
.ir-fig--seq{margin-top:clamp(40px,5vw,56px)}
.ir-fig--seq img{background:#000}
.ir-fig--seq figcaption{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));text-align:center;font-weight:600;color:var(--ir-ink)}
.ir-fig__note{margin:10px 0 0;font-size:14px;line-height:1.6;color:var(--ir-sub)}
.ir-fig--ch{margin-top:clamp(32px,4vw,48px)}

/* Platform — 여러 물체, 여러 환경의 파지 장면을 같은 크기의 정사각 타일로 가득 채운다.
   타일 크기, 톤, 캡션 위치를 통일해 많아도 어수선하지 않게 한다 (Physical Intelligence 방식의 모서리 캡션) */
.ir-mosaic{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding:0 8px;margin:0 0 20px}
.ir-tile{position:relative;margin:0;aspect-ratio:1/1;overflow:hidden;border-radius:12px;background:#1a2433}
.ir-tile video{display:block;width:100%;height:100%;object-fit:cover}
.ir-tile figcaption{position:absolute;left:0;bottom:0;padding:7px 12px;border-top-right-radius:10px;background:rgba(255,255,255,.94);
  font-size:13px;font-weight:600;line-height:1.3;color:var(--ir-ink)}
.ir-mosaic__cap{margin:0 0 clamp(48px,6vw,72px);font-size:15px;color:var(--ir-sub)}
@media(max-width:1099px){.ir-mosaic{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:699px){.ir-mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}.ir-tile:nth-child(n+7){display:none}.ir-tile figcaption{font-size:12px;padding:6px 10px}}

/* 화면에서 숨기고 문서 구조에만 남기는 제목 */
.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}
/* 머리말 없이 카드부터 시작하는 첫 섹션. 고정 내비 높이만큼만 띄운다 */
.section--first{padding-top:calc(64px + clamp(32px,4vw,56px))}

/* 내비 — 왼쪽 로고, 가운데 페이지 탭, 오른쪽 도구를 같은 폭의 세 칸에 고정한다.
   flex 로 두면 "문의하기"와 "Get in touch"의 폭 차이만큼 탭이 옆으로 밀린다 (2026-10-07 제보) */
@media(min-width:1000px){
  .nav__inner{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:24px}
  .nav__brand{justify-self:start}
  .nav__tabs{justify-self:center;margin:0}
  .nav__tools{justify-self:end;margin:0}
  .nav__cta{min-width:132px}
}

/* 줄바꿈 — 사이트 전체 (2026-10-07 제보: 한 줄이면 될 문장이 이상한 곳에서 두 줄로 갈렸다)
   1) 한글은 어절 단위로만 끊는다 (keep-all)
   2) 문단은 마지막 줄에 한두 어절만 남지 않게 줄을 고른다 (pretty)
   3) 제목은 줄 길이를 고르게 맞춘다 (balance)
   4) 설명 문단 폭을 넓혀 한 줄에 들어갈 문장은 한 줄로 둔다 */
html{word-break:keep-all;overflow-wrap:break-word}
p,li,dd,dt,figcaption,blockquote,label{text-wrap:pretty}
h1,h2,h3,h4,.h-section,.h-sub,.irs__h,.hx__h,.ir-card__t,.ir-label__t,.ir-cta__h{text-wrap:balance}
.hx__p{max-width:36em}
.irs__p{max-width:46em}
.ir-card__d,.ir-label__d{max-width:none}
.open-app__p{max-width:none}

/* 2026-10-07 개정 — 알약 라벨을 걷어낸다. 레퍼런스 회사들은 제목 위 작은 글자만 쓴다 */
.ir-pill{display:block;min-height:0;padding:0;border:0;border-radius:0;background:none;
  font-size:15px;font-weight:600;letter-spacing:.01em;color:var(--ir-blue)}
.ir-pill+.irs__h,.ir-pill+.hx__h{margin-top:14px}
.ir-tag{bottom:0;padding:22px 14px 12px;border-radius:0;background:none;color:#fff;font-size:13px;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.ir-tag--l{left:0}
.ir-tag--r{right:0}
.ir-tile figcaption{left:0;right:0;padding:28px 14px 12px;border-radius:0;background:linear-gradient(0deg,rgba(9,14,24,.72),rgba(9,14,24,0));color:#fff;font-weight:600}
/* Product 하위 탭 — 알약 대신 밑줄 */
.ir-subnav .container{gap:28px;padding-block:0}
.ir-subnav a{position:relative;min-height:52px;padding:0;border-radius:0;background:none}
.ir-subnav a:hover{background:none}
.ir-subnav a:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ir-blue);transform:scaleX(0);transition:transform .2s ease}
.ir-subnav a[aria-current]{background:none;color:var(--ir-ink)}
.ir-subnav a[aria-current]:after{transform:scaleX(1)}

/* 줄바꿈 2차 — pretty 만으로는 짧은 마지막 줄이 남았다. 짧은 글(설명, 카드, 목록)은 줄 길이를 고르게 맞춘다.
   balance 는 6줄 이하에서만 동작하므로 긴 본문은 pretty 그대로 둔다 */
p,li,dd,figcaption{text-wrap:balance}
.body,.legal p,.article__body p{text-wrap:pretty}
.hx__p,.irs__p,.lead,.press__sum,.press__title,.careers-hero__p,.ir-card__d,.ir-label__d,.open-app__p,.role__line,.article__lead,.article__body p,.ir-cta__p,.ir-fig__note{text-wrap:balance}

/* News 카드 크기 — 2열은 카드 하나가 너무 컸다 (2026-10-07). 넓은 화면 4열, 중간 2열, 폰 1열 */
#press .press-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
#press .press__body{padding:18px 20px 20px;gap:8px}
#press .press__title{font-size:clamp(17px,1.2vw,19px);line-height:1.45}
#press .press__sum{font-size:15px;line-height:1.65;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#press .press__foot{font-size:14px}
@media(max-width:1199px){#press .press-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:599px){#press .press-grid{grid-template-columns:1fr}}
/* 의미 단위 덩어리 (스크립트가 만든다). 문단은 다시 pretty 로: 첫 줄을 최대한 채우고, 줄은 덩어리 사이에서만 바뀐다 */
.nwa{white-space:nowrap}
p,li,dd,figcaption,.hx__p,.irs__p,.lead,.press__sum,.careers-hero__p,.ir-card__d,.ir-label__d,.open-app__p,.role__line,.article__lead,.article__body p,.ir-cta__p,.ir-fig__note{text-wrap:pretty}

/* Product Data — 학습 데이터와 시뮬레이션 에셋 두 갈래 */
.ir-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media(max-width:899px){.ir-two{grid-template-columns:1fr}}
.ir-card__media--dark{background:#000}
.ir-card__media--dark img{object-fit:contain}
.ir-sub{scroll-margin-top:128px}
.irs__head--tight{margin-top:clamp(48px,6vw,72px)}
.irs__h--sm{font-size:clamp(20px,1.8vw,26px)}
.ir-feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0 0 clamp(40px,5vw,56px);border-top:1px solid var(--ir-line)}
.ir-feats div{padding:22px 24px 24px 0;border-bottom:1px solid var(--ir-line)}
.ir-feats dt{font-size:15px;font-weight:700;color:var(--ir-blue)}
.ir-feats dd{margin:8px 0 0;font-size:16px;line-height:1.7;color:var(--ir-ink)}
@media(max-width:899px){.ir-feats{grid-template-columns:1fr}.ir-feats div{padding-right:0}}
/* Platform — 관리 카드가 모자이크 위로 올라왔다 */
#platform .ir-flow{margin-bottom:clamp(40px,5vw,56px)}

/* Product 펼침 메뉴 */
.navdrop{position:relative}
.navdrop__btn{display:inline-flex;align-items:center;gap:6px;padding:6px 0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.navdrop__chev{transition:transform .2s ease}
.navdrop__btn[aria-expanded=true] .navdrop__chev{transform:rotate(180deg)}
.navdrop__btn:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:4px}
.navdrop:has([aria-current=page]) .navdrop__btn{color:#fff;font-weight:600}
.theme-light .navdrop:has([aria-current=page]) .navdrop__btn{color:var(--ir-ink)}
.navdrop__menu{position:absolute;left:50%;top:calc(100% + 14px);transform:translateX(-50%);z-index:60;width:300px;padding:8px;border-radius:16px;
  background:#fff;border:1px solid var(--ir-line);box-shadow:0 18px 40px -16px rgba(11,31,51,.35);display:grid;gap:2px}
.navdrop__menu[hidden]{display:none}
.navdrop__menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.navdrop__menu a{display:block;padding:12px 14px;border-radius:10px;color:var(--ir-ink);text-decoration:none}
.navdrop__menu a:hover,.navdrop__menu a:focus-visible{background:var(--ir-bg)}
.navdrop__menu a[aria-current=page]{background:var(--ir-bg)}
.navdrop__menu a:after{display:none}
.navdrop__menu strong{display:block;font-size:15px;font-weight:700}
.navdrop__menu span{display:block;margin-top:3px;font-size:13px;line-height:1.5;color:var(--ir-sub)}
/* 제품 페이지 첫 섹션 — 고정 내비 아래에서 바로 시작 */
.irs--page{padding-top:clamp(128px,14vw,176px)}
.nav .nav__tabs .navdrop__menu a,.theme-light .nav .nav__tabs .navdrop__menu a{color:var(--ir-ink);padding:12px 14px}
.nav .nav__tabs .navdrop__menu a:hover{color:var(--ir-ink)}

/* Platform 모자이크 — 더 빼곡하게 (2026-10-07). 넓은 화면 8열 x 3줄, 캡션 없음 */
.ir-mosaic{grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;padding:0 4px}
.ir-tile{border-radius:6px}
@media(max-width:1099px){.ir-mosaic{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:699px){.ir-mosaic{grid-template-columns:repeat(3,minmax(0,1fr))}.ir-tile:nth-child(n+7){display:block}.ir-tile:nth-child(n+13){display:none}}

/* ══ 상자 걷어내기 (2026-10-07) ═════════════════════════════════════
   레퍼런스 회사들은 글자만 든 테두리 상자를 쓰지 않는다. 글은 그림 곁에, 목록은 가는 선으로 나눈 한 줄로 */

/* Platform — 기능 목록과 큰 영상 (NdotLight 방식). 고른 항목만 설명이 열리고 오른쪽 영상이 바뀐다 */
.ir-switch{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:start;margin:0 0 clamp(56px,7vw,96px)}
.ir-switch__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ir-line)}
.ir-switch__tab{position:relative;display:block;width:100%;padding:22px 0 24px;border:0;border-bottom:1px solid var(--ir-line);background:none;text-align:left;font:inherit;color:inherit;cursor:pointer}
.ir-switch__t{display:block;font-size:clamp(22px,1.8vw,28px);font-weight:700;letter-spacing:-.02em;color:#a3b0c2;transition:color .2s ease}
.ir-switch__tab:hover .ir-switch__t,.ir-switch__tab[aria-selected=true] .ir-switch__t{color:var(--ir-ink)}
.ir-switch__d{display:none;margin-top:10px;font-size:17px;line-height:1.6;color:var(--ir-sub)}
.ir-switch__tab[aria-selected=true] .ir-switch__d{display:block}
.ir-switch__bar{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--ir-blue);transform:scaleX(0);transform-origin:left}
.ir-switch__tab[aria-selected=true] .ir-switch__bar{animation:switchbar 6s linear forwards;animation-play-state:var(--switch-run,running)}
.ir-switch.is-hold .ir-switch__tab[aria-selected=true] .ir-switch__bar{animation-play-state:paused}
@keyframes switchbar{to{transform:scaleX(1)}}
.ir-switch__tab:focus-visible{outline:2px solid var(--ir-blue);outline-offset:4px}
.ir-switch__media{position:sticky;top:96px}
.ir-switch__panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.ir-switch__panel[hidden]{display:none}
.ir-switch__panel video{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;background:#1a2433}
@media(max-width:899px){.ir-switch{grid-template-columns:1fr}.ir-switch__media{position:static;order:-1}}
@media(prefers-reduced-motion:reduce){.ir-switch__bar{display:none}}

/* 이미지 카드 — 테두리와 흰 바탕을 없애고 글은 사진 아래에 */
.ir-card{background:none;border:0;border-radius:0;overflow:visible}
.irs--alt .ir-card{background:none}
.ir-card__media{border-radius:14px}
.ir-card__body{padding:18px 0 0}
.ir-card--link:hover .ir-card__t{color:var(--ir-blue)}
.ir-card--link:hover{border:0}
/* 글자만 든 카드 — 위쪽 가는 선 하나로 */
.ir-card--text{padding:20px 0 0;border-top:1px solid var(--ir-ink);border-radius:0}
/* Data 의 라벨 3칸 — 상자 대신 위쪽 선. 라벨 두 칸은 파란 선으로 강조 */
.ir-label{padding:20px 0 0;border:0;border-top:2px solid var(--ir-blue);border-radius:0;background:none}
.ir-label--base{border-top:1px solid var(--ir-line)}
/* News 카드 */
#press .press,.press{border:0;border-radius:0;background:none;overflow:visible}
.press:hover{box-shadow:none}
.press__thumb{border-radius:14px;border:0}
.press__body{padding:16px 0 0}
.press__link:hover{background:none}
.press__link:hover .press__title{color:var(--brand)}
/* Careers — 일하는 환경 3칸과 열린 지원도 상자 없이 */
#work .card{background:none;border:0;border-top:1px solid var(--stage-line);border-radius:0;padding:22px 0 0}
#work .card:hover{background:none;border-color:var(--stage-line)}
.open-app{padding:28px 0 0;border:0;border-top:1px solid var(--r-line);border-radius:0;background:none}
.ir-switch__panel video{height:auto}
/* 전환 패널 — 한 장짜리(물체 라이브러리, 파지 설정 영상)와 6칸(환경) */
.ir-switch__panel--one{grid-template-columns:1fr}
.ir-switch__panel--one img,.ir-switch__panel--one video{display:block;width:100%;height:auto;aspect-ratio:auto;border-radius:12px;background:#000}
.ir-switch__panel--six{grid-template-columns:repeat(3,minmax(0,1fr))}
/* 모자이크 — 20칸, 넓은 화면 10열 x 2줄 */
.ir-mosaic{grid-template-columns:repeat(10,minmax(0,1fr))}
@media(max-width:1099px){.ir-mosaic{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:699px){.ir-mosaic{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Data 변형체 라이브러리 — 밝은 회색 스튜디오 렌더 4개 */
.ir-lib{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ir-lib__item{margin:0}
.ir-lib__item video{display:block;width:100%;height:auto;aspect-ratio:720/478;object-fit:cover;border-radius:12px;background:#a6acac}
.ir-lib__item figcaption{margin-top:10px;font-size:15px;font-weight:600;color:var(--ir-ink)}
@media(max-width:899px){.ir-lib{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ir-shapes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ir-shapes img{display:block;width:100%;height:auto;border-radius:12px;background:#9a9a9a}
@media(max-width:699px){.ir-shapes{grid-template-columns:1fr}}
/* Platform 모자이크 — 10칸, 5열 */
.ir-mosaic{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:0 6px}
@media(max-width:699px){.ir-mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}.ir-tile:nth-child(n+7){display:block}}
.ir-switch__panel--dark img{background:#000}
.ir-switch__cap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:10px 0 0;text-align:center;font-size:14px;font-weight:600;color:var(--ir-ink)}
.ir-fig--duo figcaption{display:block;text-align:left;font-weight:500;color:var(--ir-sub)}
.ir-shapes{grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:699px){.ir-shapes{grid-template-columns:1fr}}
.theme-light .navdrop__btn{color:#5b6b80}.theme-light .navdrop__btn:hover{color:var(--ir-ink)}.nav .navdrop__btn{opacity:1}
/* 장비 패널 — 같은 구성을 세 시점으로 */
.ir-switch__panel--eq{grid-template-columns:repeat(3,minmax(0,1fr))}
.ir-switch__panel--eq img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:10px;background:#fff;border:1px solid var(--ir-line)}
.ir-switch__note{grid-column:1/-1;margin:6px 0 0;font-size:14px;color:var(--ir-sub)}
#platform .ir-switch{margin-bottom:0}#platform{padding-bottom:clamp(64px,8vw,104px)}

/* ══ 2026-10-07 정리 ═════════════════════════════════════════════════
   1) 첫 화면 버튼: 레퍼런스(Figure, World Labs, Dyna)처럼 진한 알약 하나와 글자 링크 하나 */
.hx__cta{align-items:center;gap:28px}
.ir-btn{min-height:50px;padding:0 26px;border-radius:999px;font-size:16px;font-weight:600;letter-spacing:-.01em}
.ir-btn--primary{background:var(--ir-ink);color:#fff}
.ir-btn--primary:hover{background:var(--ir-blue)}
.ir-textlink{position:relative;display:inline-flex;align-items:center;min-height:44px;font-size:16px;font-weight:600;color:var(--ir-ink);text-decoration:none}
.ir-textlink::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:1.5px;background:currentColor;transform-origin:left;transition:transform .25s ease}
.ir-textlink:hover{color:var(--ir-blue)}
.ir-textlink:hover::after{transform:scaleX(.35)}
.ir-textlink:focus-visible{outline:2px solid var(--ir-blue);outline-offset:4px;border-radius:4px}
/* 마무리 띠: 남색 위에는 흰 알약 */
.ir-cta .ir-btn--primary{background:#fff;color:var(--ir-ink)}
.ir-cta .ir-btn--primary:hover{background:#dfe7f6}
/* 상단 문의하기: 밝은 페이지에서는 진한 알약 */
.theme-light .nav .nav__cta{background:var(--ir-ink);border-color:var(--ir-ink);color:#fff;border-radius:999px;min-height:40px;padding:0 20px}
.theme-light .nav .nav__cta:hover{background:var(--ir-blue);border-color:var(--ir-blue);color:#fff}

/* 2) Platform 전환 무대: 네 패널이 모두 같은 3:2 상자에 겹쳐 있어, 눌러도 높이가 변하지 않는다 */
.ir-switch__media{display:grid;aspect-ratio:3/2}
.ir-switch__panel,.ir-switch__panel[hidden]{grid-area:1/1;display:grid;width:100%;height:100%;min-height:0;gap:6px;transition:opacity .35s ease}
.ir-switch__panel[hidden]{visibility:hidden;opacity:0;pointer-events:none}
.ir-switch__panel--grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
.ir-switch__panel--grid img,.ir-switch__panel--grid video{display:block;width:100%;height:100%;min-height:0;aspect-ratio:auto;object-fit:cover;border-radius:10px;background:#e3e9f1}
.ir-switch__panel--fill{grid-template-columns:1fr}
.ir-switch__panel--fill img{display:block;width:100%;height:100%;object-fit:cover;border-radius:12px}
.ir-switch__panel--stage{grid-template-columns:1fr}
.ir-stage{display:flex;flex-direction:column;justify-content:center;gap:18px;height:100%;padding:0 4%;border-radius:12px;background:#05070b}
.ir-stage img{display:block;width:100%;height:auto;background:none;border:0;border-radius:0}
.ir-stage__cap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;text-align:center;font-size:14px;font-weight:600;color:#c3cbd8}
@media(max-width:599px){.ir-switch__panel--grid{gap:4px}.ir-stage__cap{font-size:12px}}

/* 3) Home 데이터 카드: 같은 장면의 영상과 응력 라벨을 반씩 겹친다. 경계선이 천천히 오간다 */
@property --split{syntax:"<percentage>";inherits:true;initial-value:50%}
.ir-split{position:relative;background:#000;--split:50%}
.ir-split img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ir-split__top{clip-path:inset(0 0 0 var(--split))}
.ir-split__seam{position:absolute;top:0;bottom:0;left:var(--split);width:1.5px;margin-left:-.75px;background:rgba(255,255,255,.85)}
.ir-split__tag{position:absolute;bottom:12px;font-size:13px;font-weight:600;color:#fff;opacity:.9}
.ir-split__tag--l{left:14px}
.ir-split__tag--r{right:14px}
@media(prefers-reduced-motion:no-preference){.ir-split{animation:splitsway 7s ease-in-out infinite alternate}}
@keyframes splitsway{from{--split:38%}to{--split:62%}}
.ir-stage{background:#000;padding:0 7%;gap:22px}
/* Data 변형체 라이브러리 — 세 가지 (유산지 제외, 2026-10-07) */
.ir-lib{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:899px){.ir-lib{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:599px){.ir-lib{grid-template-columns:1fr}}

/* 터치 화면 점검 (2026-10-07)
   1) iOS Safari 는 16px 보다 작은 입력칸을 누르면 화면을 확대한다
   2) 누르는 대상은 44px 이상 */
@media (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not(.hp),select,textarea{font-size:16px !important}
  .btn--sm{min-height:44px}
  .ir-textlink{min-height:44px}
  .theme-light .nav .nav__cta{min-height:44px}
  .usecase input[type=text],.field__other{min-height:44px}
}

/* 폰 첫 화면: 가로 영상을 세로 화면에 덮어 깔면 가운데만 잘려 흐릿한 색만 남는다.
   영상을 위에 16:9 그대로 두고 글은 그 아래에 둔다 */
@media (max-width:767px){
  .hx{display:block;min-height:0;padding:64px 0 56px}
  .hx::after{display:none}
  .hx__video{position:relative;inset:auto;left:auto;display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
  .hx__in{padding-top:32px}
}
/* 모바일 메뉴의 문의하기: 흰 글자 진한 버튼 */
.theme-light .nav__panel .nav__panel-cta{background:var(--ir-ink);border-color:var(--ir-ink);color:#fff}
/* 폰: 항목을 누르면 바뀌는 그림이 화면 밖에 있지 않도록, 그림을 상단 메뉴 아래에 붙여 둔다 */
@media (max-width:899px){
  .ir-switch__media{position:sticky;top:64px;z-index:2;background:var(--ir-bg);box-shadow:0 10px 0 var(--ir-bg)}
}
/* 태블릿 세로(768–999px)도 폰과 같이: 영상 위, 글 아래 */
@media (min-width:768px) and (max-width:999px){
  .hx{display:block;min-height:0;padding:64px 0 72px}
  .hx::after{display:none}
  .hx__video{position:relative;inset:auto;left:auto;display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
  .hx__in{padding-top:48px}
}

/* 언어 전환 (2026-10-08) — 글이 바뀌는 순간 본문과 푸터를 짧게 감춘다 (app-v1.js switchLang).
   내비는 그대로 둔다. 동작 줄이기 설정에서는 감추지 않는다 */
main,.footer{transition:opacity .22s ease-out}
html.is-lang-switching main,html.is-lang-switching .footer{opacity:0;transition:opacity .12s ease-in}
@media (prefers-reduced-motion:reduce){main,.footer{transition:none}html.is-lang-switching main,html.is-lang-switching .footer{opacity:1}}
/* 소식 카드(News 목록, 상세의 다른 소식): 제목 두 줄, 요약 세 줄 자리를 늘 비워 둔다. 언어마다 줄 수가 달라 카드 높이와 다음 줄이 움직였다 */
.press-grid .press__title{min-height:2.9em}
#press .press__sum{min-height:4.95em}
/* 제목 크기 (2026-10-08). 이 분야 회사들의 첫 문구는 1440px 에서 44~64px, 큰 곳도 굵기는 300~400 이다.
   한글은 글자가 네모 칸을 채워 같은 크기의 영문보다 크고 무겁게 보인다. 그래서
   첫 문구 56px/600, 페이지 제목 44px, 섹션 제목 36px, 성과 숫자 72px 로 낮췄다 (휴대폰 32, 28, 26, 44) */
h1.h-section{font-size:clamp(28px,3.06vw,48px)}
/* 휴대폰과 태블릿(한 줄에 카드 하나): 카드 사이를 넓히고 카드 안은 좁힌다 (2026-10-08).
   카드 사이가 20px 라 "01 측정" 글이 위 그림의 설명인지 아래 그림의 설명인지 헷갈렸다 */
@media (max-width:899px){
  .ir-steps,.ir-prod{row-gap:52px}
  .ir-card__body{padding-top:14px}
  .ir-card__n{line-height:1.3}
  .ir-card__t{margin-top:2px;line-height:1.35}
  .ir-card__d{margin-top:6px}
  .ir-card__more{margin-top:10px}
}
/* Careers 첫 문단: 문장마다 새 줄에서 시작한다. 좁은 화면에서 두 문장이 한 줄에 섞였다 (2026-10-08) */
.careers-hero__p .sent{display:block}
@media (max-width:899px){.careers-hero__p .sent+.sent{margin-top:.6em}}

/* 소식 상세의 "다른 소식" (2026-10-08): 사진 없는 글 카드라 경계가 보이지 않았다. 앞 카드의 "보도 2건" 과
   다음 카드의 "자세히 보기" 가 한 줄처럼 읽혔다. 카드마다 위에 선을 긋고 (위 "관련 보도" 목록과 같은 선) 카드 사이를 넓힌다 */
.section--more .press-grid{column-gap:48px;row-gap:28px}
.section--more .press{border-top:1px solid var(--line);transition:border-color .2s ease}
.section--more .press__body{padding:20px 0 4px}
/* 카드가 한 줄에 하나뿐인 폭에서는 제목 두 줄 자리를 비워 둘 이유가 없다 (나란한 카드끼리 맞추려던 것). 한 줄 제목 아래 빈 줄이 생겼다 */
@media (max-width:599px){.press-grid .press__title{min-height:0}}

/* 도입 지원 (2026-10-08) — 가운데 회사 이름과 계측기 눈금 고리(아주 느리게 돈다), 양옆으로 펼친 여섯 점.
   상자, 점 격자, 점선 없이 선과 점과 글자만. 눈 모양 로고 심볼은 쓰지 않는다 (사용자: 눈 모양이라 기분 나쁘다).
   글자 규칙은 직계 자식(>)에만 건다 (span.nwa 보호) */
.ir-orb{position:relative;margin-top:clamp(28px,4vw,48px);height:clamp(460px,38vw,520px)}
.ir-orb__lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ir-orb__lines path{fill:none;stroke:#c3d0e2;stroke-width:1.2;transition:stroke .25s ease,stroke-width .25s ease}
.ir-orb__lines path.is-on{stroke:var(--ir-blue);stroke-width:1.6}
.ir-orb__lines .dot{fill:var(--ir-blue);opacity:.75}
.ir-orb__core{position:absolute;left:50%;top:50%;width:0;height:0}
.ir-orb__dial,.ir-orb__ring,.ir-orb__disc{position:absolute;left:0;top:0;border-radius:50%;transform:translate(-50%,-50%)}
.ir-orb__dial{width:252px;height:252px;background:repeating-conic-gradient(#a7b8d1 0deg .8deg,transparent .8deg 6deg);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 9px),#000 calc(100% - 8px));mask:radial-gradient(closest-side,transparent calc(100% - 9px),#000 calc(100% - 8px));
  animation:orbSpin 120s linear infinite}
.ir-orb__ring{width:198px;height:198px;border:1px solid #d2dcea}
.ir-orb__disc{display:grid;place-items:center;width:136px;height:136px;background:#fff;box-shadow:0 22px 44px -22px rgba(24,36,54,.38),0 0 0 1px #e1e8f2}
.ir-orb__name{font-size:22px;font-weight:700;letter-spacing:-.015em;color:var(--ir-ink);white-space:nowrap}
.ir-orb__cap{position:absolute;left:0;top:150px;transform:translateX(-50%);white-space:nowrap;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--ir-blue)}
@keyframes orbSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ir-orb__dial{animation:none}}
.ir-orb__list{list-style:none;margin:0;padding:0}
.ir-orb__node{position:absolute;width:0;height:0;left:var(--x);top:var(--y)}
.ir-orb__node.n1{--x:26%;--y:21%}.ir-orb__node.n3{--x:21%;--y:50%}.ir-orb__node.n5{--x:26%;--y:79%}
.ir-orb__node.n2{--x:74%;--y:21%}.ir-orb__node.n4{--x:79%;--y:50%}.ir-orb__node.n6{--x:74%;--y:79%}
.ir-orb__dot{position:absolute;left:0;top:0;width:10px;height:10px;border-radius:50%;background:var(--ir-blue);transform:translate(-50%,-50%);
  box-shadow:0 0 0 5px rgba(39,98,236,.12);transition:box-shadow .25s ease}
.ir-orb__node.is-on .ir-orb__dot{box-shadow:0 0 0 9px rgba(39,98,236,.18)}
.ir-orb__txt{position:absolute;top:0;width:min(240px,15vw);transform:translateY(-50%)}
.ir-orb__node.is-l .ir-orb__txt{right:22px;text-align:right}
.ir-orb__node.is-r .ir-orb__txt{left:22px}
.ir-orb__txt>strong{display:block;font-size:17px;font-weight:650;letter-spacing:-.01em;line-height:1.35;color:var(--ir-ink);transition:color .25s ease}
.ir-orb__node.is-on .ir-orb__txt>strong{color:var(--ir-blue)}
.ir-orb__txt>span{display:block;margin-top:3px;font-size:14px;line-height:1.5;color:var(--ir-sub)}
@media (min-width:900px) and (max-width:1199px){
  .ir-orb__node.n1,.ir-orb__node.n3,.ir-orb__node.n5{--x:25%}.ir-orb__node.n2,.ir-orb__node.n4,.ir-orb__node.n6{--x:75%}
  .ir-orb__txt{width:min(200px,19vw)}
}
@media (max-width:899px){
  .ir-orb{height:auto;display:flex;flex-direction:column;align-items:center}
  .ir-orb__core{position:relative;left:auto;top:auto;flex:none;width:252px;height:252px}
  .ir-orb__dial,.ir-orb__ring,.ir-orb__disc{left:50%;top:50%}
  .ir-orb__cap{left:50%;top:auto;bottom:-30px}
  .ir-orb__list{display:grid;grid-template-columns:1fr 1fr;gap:22px 18px;width:100%;margin-top:58px}
  .ir-orb__node{position:relative;left:auto;top:auto;width:auto;height:auto;padding-left:20px}
  .ir-orb__dot{left:5px;top:11px}
  .ir-orb__txt,.ir-orb__node.is-l .ir-orb__txt,.ir-orb__node.is-r .ir-orb__txt{position:static;width:auto;transform:none;text-align:left}
  .ir-orb__txt>strong{font-size:15px}.ir-orb__txt>span{font-size:13px}
}