/* 문서 초기화. 아티팩트가 껍데기에서 넣어 주던 것을 여기로 옮겨 왔습니다.
   [hidden] 을 !important 로 눌러야 .langmenu 처럼 display 를 따로 가진 요소도 접힙니다. */
:root{color-scheme:light}
body{margin:0;padding:0}
img{max-width:100%}
[hidden]:not([hidden="until-found"]){display:none!important}

/* DESIGN-renault.md · 모노톤 · DM Sans(라틴) + Gothic A1(한글, Pretendard 자리) */
:root{
  --accent:#000; --accent-deep:#222; --on-accent:#fff; --accent-on-dark:#fff;
  --ink:#000; --body:#222; --charcoal:#333; --mute:#666; --ash:#8a8a8a; --stone:#c4c4c4;
  --on-dark:#fff; --on-dark-mute:rgba(255,255,255,.72);
  --canvas:#fff; --surface-soft:#f7f7f7; --surface-dark:#000; --surface-deep:#111;
  --hairline:#f2f2f2; --hairline-strong:#000; --divider-dark:rgba(255,255,255,.16);
  --r-xs:2px;
  --s-xs:8px; --s-sm:12px; --s-md:16px; --s-lg:20px; --s-xl:24px; --s-xxl:32px; --s-xxxl:48px; --s-section:168px;
  --font-ko:"Pretendard","Pretendard Variable","Noto Sans KR","Apple SD Gothic Neo",system-ui,sans-serif;
  --font-en:"DM Sans",system-ui,-apple-system,sans-serif;
  --font:var(--font-ko);
}

body{background:var(--canvas);color:var(--body);font-family:var(--font);font-size:16px;line-height:1.4;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:.95;color:var(--ink)}

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

.heading-lg{font-size:24px;font-weight:700;line-height:.95}

.body-lg{font-size:18px;line-height:1.5}
.body-md{font-size:16px;line-height:1.4}

.overline{font-size:12px;font-weight:700;line-height:1.45;letter-spacing:0}
/* 템플릿 규격을 따릅니다. 컨테이너 1152, 좌우 여백 64, 섹션 여백 120 */

@media(max-width:900px){.band{padding:96px 24px}}
.btn{display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;letter-spacing:.144px;line-height:1;
  padding:14px 24px;border-radius:var(--r-xs);border:1px solid transparent;min-height:50px}
.btn-primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.band.dark .btn-primary{background:var(--accent-on-dark);color:var(--ink);border-color:var(--accent-on-dark)}
.btn-outline-dark{background:var(--canvas);color:var(--ink);border-color:var(--hairline-strong);padding:13px 23px}
.btn-outline-light{background:var(--surface-dark);color:var(--on-dark);border-color:var(--on-dark);padding:13px 23px}

.more{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--ink);
  border-bottom:1px solid var(--ink);padding-bottom:2px;align-self:flex-start}
.band.dark .more{color:var(--on-dark);border-bottom-color:var(--on-dark)}
/* 내비게이션 */
.nav{height:60px;background:var(--canvas);border-bottom:1px solid var(--hairline);display:flex;align-items:center;
  gap:var(--s-xl);padding:0 64px;position:sticky;top:0;z-index:20}
.nav .mark{display:flex;align-items:center;gap:10px;margin-right:var(--s-lg)}

.nav li{font-size:15px;font-weight:700;letter-spacing:.144px;color:var(--mute)}

.nav .right{margin-left:auto;display:flex;align-items:center;gap:var(--s-sm)}
.lang{display:flex;border:1px solid var(--hairline-strong);border-radius:var(--r-xs);overflow:hidden;flex:0 0 auto}
.lang a{font-size:12px;font-weight:700;letter-spacing:.06em;padding:6px 10px;line-height:1;
  color:var(--mute);transition:background-color .15s,color .15s}
.lang a.on{background:var(--ink);color:var(--canvas)}
.lang a:not(.on):hover{color:var(--ink);background:var(--surface-soft)}
.nav .btn{min-height:40px;padding:10px 18px}
@media(max-width:1023px){.nav{gap:var(--s-md);overflow-x:auto;-webkit-overflow-scrolling:touch}
.nav::-webkit-scrollbar{display:none}
.nav ul{gap:var(--s-md)}
.nav .mark{margin-right:var(--s-sm)}}
@media(max-width:600px){.nav li{font-size:13px}
.lang a{padding:5px 8px;font-size:11px}
.nav .wm{font-size:16px}}

.nav li{white-space:nowrap}
.nav .right{flex:0 0 auto}
/* 01 히어로: 글자만, 가운데 정렬 */
.hero{background:var(--surface-dark);color:var(--on-dark);padding:var(--s-section) 64px}
.hero .inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-xxxl)}
.hero .stack{display:flex;flex-direction:column;align-items:center;gap:var(--s-lg)}
.hero h1{color:var(--on-dark);max-width:18ch}
.hero .subtitle{color:var(--on-dark-mute);max-width:46ch}
@media(max-width:900px){.hero{padding:96px 24px}}
/* 02 영상 밴드 */
.filmband{background:var(--surface-dark);padding:0 64px var(--s-section)}
@media(max-width:900px){.filmband{padding:0 24px 96px}}
.film{max-width:1152px;margin:0 auto;height:542px;background:var(--surface-deep);
  display:flex;align-items:flex-end;justify-content:flex-start;padding:var(--s-lg)}
@media(max-width:900px){.film{height:340px}}
.film .lb{font-size:11px;color:rgba(255,255,255,.35)}
/* 03 로고 줄 — 캡션 위, 로고 가운데 */
.logos{display:flex;flex-direction:column;align-items:center;gap:var(--s-xxl);text-align:center}
.logos .cap{font-size:15px;line-height:1.5;color:var(--mute);max-width:52ch}
.lrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--s-xl) 64px;width:100%}
.lrow .c{font-size:26px;font-weight:700;line-height:1;color:var(--ash);letter-spacing:-.01em;
  transition:color .15s}
.lrow .c:hover{color:var(--charcoal)}
@media(max-width:900px){.lrow{gap:var(--s-lg) 40px}
.lrow .c{font-size:21px}}
@media(max-width:600px){.lrow{gap:var(--s-md) 28px}
.lrow .c{font-size:18px}
.logos{gap:var(--s-xl)}}
/* 04 피처: 좌우 교차 2행 */
.frow{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:var(--s-xxxl)}
@media(max-width:900px){.frow{grid-template-columns:1fr;gap:var(--s-xl)}}
.fcopy{display:flex;flex-direction:column;gap:var(--s-md)}
.fcopy .d{font-size:17px;line-height:1.6;color:var(--charcoal)}
.band.dark .fcopy .d{color:var(--on-dark-mute)}
.fcopy ul{list-style:none;margin:var(--s-xs) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s-xs)}
.fcopy li{font-size:16px;font-weight:700;color:var(--ink);border-top:1px solid var(--hairline);padding-top:var(--s-xs)}
.band.dark .fcopy li{color:var(--on-dark);border-top-color:var(--divider-dark)}
.fimg{height:440px;background:var(--surface-soft);
  display:flex;align-items:flex-end;justify-content:flex-start;padding:var(--s-md)}
.band.dark .fimg{background:var(--surface-deep)}
.fimg .lb{font-size:11px;color:var(--ash)}
.band.dark .fimg .lb{color:rgba(255,255,255,.35)}
@media(max-width:900px){.fimg{height:260px}
.frow.rev .fimg{order:-1}}
/* 05 숫자 3칸 */
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-xxxl);margin-top:var(--s-xxl)}
@media(max-width:767px){.nums{grid-template-columns:1fr;gap:var(--s-xl)}}
.nums .n{border-top:1px solid var(--hairline-strong);padding-top:var(--s-md);display:flex;flex-direction:column;gap:var(--s-xs)}
.nums .v{font-size:40px;font-weight:700;line-height:.95;color:var(--ink);font-variant-numeric:tabular-nums}
.nums .t{font-size:16px;font-weight:700;color:var(--ink);margin-top:4px}
.nums .d{font-size:14px;line-height:1.6;color:var(--mute)}
/* 06 마무리 제안 */

.cta p{color:var(--on-dark-mute);max-width:50ch}
/* 07 안내: 다음에 보실 곳 (갤러리 격자) */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-md);margin-top:var(--s-xxl)}
.gal a{display:flex;flex-direction:column;gap:var(--s-sm)}
.gal .ph{aspect-ratio:4/3;background:var(--surface-soft);display:flex;align-items:flex-end;
  padding:var(--s-sm);transition:background-color .15s}
.gal a:hover .ph{background:#ececec}
.gal .ph span{font-size:11px;color:var(--ash)}
.gal .t{font-size:19px;font-weight:700;line-height:1.1;color:var(--ink);
  display:inline-flex;align-items:center;gap:6px}
.gal a:hover .t{text-decoration:underline;text-underline-offset:4px}
.gal .d{font-size:14px;line-height:1.6;color:var(--mute)}
@media(max-width:1023px){.gal{grid-template-columns:repeat(2,1fr);gap:var(--s-xl) var(--s-md)}
.gal .t{font-size:22px}}
@media(max-width:600px){.gal{grid-template-columns:1fr}}
/* 푸터: 한 줄 */

.foot .in{max-width:1152px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-xl)}
.foot .brand{display:flex;align-items:center;gap:10px}
.foot nav{display:flex;flex-wrap:wrap;gap:var(--s-lg)}
.foot nav a{font-size:14px;color:var(--on-dark-mute)}

/* 상호작용 */
a{text-decoration:none;color:inherit}

.btn{transition:background-color .15s,color .15s,border-color .15s;cursor:pointer}
.btn-primary:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.band.dark .btn-primary:hover{background:#e6e6e6;border-color:#e6e6e6}

.more{transition:opacity .15s}

.foot nav a{transition:color .15s}
.foot nav a:hover{color:var(--on-dark)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
}
/* 뉴스 띠 */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-md);margin-top:var(--s-xl);
  border-top:1px solid var(--hairline-strong);padding-top:var(--s-lg)}
@media(max-width:900px){.news{grid-template-columns:1fr;gap:0}}
.news a{display:flex;flex-direction:column;gap:var(--s-xs);padding-right:var(--s-lg)}
@media(max-width:900px){.news a{padding:var(--s-md) 0;border-bottom:1px solid var(--hairline)}}
.news .dt{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--ash);font-variant-numeric:tabular-nums}
.news .h{font-size:17px;font-weight:700;line-height:1.35;color:var(--ink)}
.news a:hover .h{text-decoration:underline;text-underline-offset:4px}
.newshead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-lg);flex-wrap:wrap}
/* 한글은 어절 단위로 끊습니다 */
body,h1,h2,h3,h4,p,span,a,li,dd,dt,figcaption{word-break:keep-all;overflow-wrap:break-word}
/* 모바일 내비게이션 */
.burger{display:none;width:40px;height:40px;flex:0 0 auto;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--hairline-strong);border-radius:var(--r-xs);cursor:pointer;padding:0}
.burger span{display:block;width:18px;height:2px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink)}

.drawer{display:none;position:fixed;inset:60px 0 0;background:var(--canvas);z-index:18;
  padding:var(--s-lg) 24px var(--s-xxxl);overflow-y:auto}

/* 새 창으로 열리는 링크 옆의 화살표입니다. 글자보다 작고 흐리게 두어
   이름을 가리지 않고, 기준선이 글자 윗선에 걸리도록 살짝 올립니다. */
.ext{margin-left:.3em;font-size:.8em;line-height:1;opacity:.6;vertical-align:.08em;
  font-family:var(--font-en)}

.drawer .sub{font-size:16px;font-weight:400;color:var(--mute);min-height:48px;padding-left:var(--s-md)}
.drawer a.btn{margin-top:var(--s-xl);width:100%;min-height:52px;border-bottom:0;
  color:var(--on-accent);background:var(--accent);justify-content:center}
@media(max-width:767px){.nav{gap:var(--s-sm);overflow:visible}

.nav .btn{display:none}

.nav .right{gap:var(--s-xs)}}
[data-jump]{cursor:pointer}
/* 문서마다 화면이 하나뿐이라 늘 보입니다. .on 은 스크립트가 초기화를 마쳤다는 표시로만 씁니다. */

.subnav{background:var(--canvas);border-bottom:1px solid var(--hairline);position:sticky;top:60px;z-index:19}
.subnav .in{max-width:1152px;margin:0 auto;padding:0 64px;height:48px;display:flex;align-items:center;
  gap:var(--s-lg)}
/* 좁은 화면에서는 항목만 옆으로 밀립니다. 묶음 이름은 미는 자리 바깥에
   두어, 어디까지 밀든 늘 제자리에 남습니다.
   항목들은 .rw 한 장에 얹혀 있습니다. 그 한 장을 통째로 움직여서 굴러가는
   느낌을 냅니다. transform 은 자리를 다시 잡지 않으므로 막대의 길이도,
   손으로 미는 것도 그대로입니다. */
.subnav .tr{flex:1 1 auto;min-width:0;height:48px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.subnav .tr::-webkit-scrollbar{display:none}
.subnav .rw{display:flex;align-items:center;gap:var(--s-lg);height:48px;width:max-content}
@media(max-width:900px){.subnav .in{padding:0 24px;gap:var(--s-md)}
.subnav .rw{gap:var(--s-md)}}
.subnav .lb{font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--ash);white-space:nowrap;
  padding-right:var(--s-md);border-right:1px solid var(--hairline);margin-right:var(--s-xs)}
.subnav a{position:relative;font-size:14px;font-weight:700;color:var(--mute);white-space:nowrap;line-height:48px;transition:color .15s}
.subnav a:hover{color:var(--ink)}
/* 고른 항목의 밑줄은 왼쪽에서 그어지듯 들어옵니다. 막대가 옆으로 구를
   때는 그 거리에 맞춘 길이(--subms)를 받아 같은 시계로 움직입니다.
   구를 일이 없으면 기본값으로 혼자 그어집니다. 화면이 바뀌면 눈이
   먼저 찾는 것이 지금 어디인가이므로, 그 자리를 한 번 짚어 줍니다.
   회사 소개의 선 긋기와 같은 곡선을 써서 사이트 안에서 한 몸짓으로
   읽히게 했습니다. 색은 currentColor 라, 검정 밴드 위에서 글자색이
   뒤집히면 밑줄도 함께 뒤집힙니다. */
.subnav a.on{color:var(--ink)}
.subnav a.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:currentColor;transform:scaleX(0);transform-origin:left center;
  animation:subline var(--subms,.72s) cubic-bezier(.65,0,.35,1) .12s forwards}
@keyframes subline{to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.subnav a.on::after{animation:none;transform:scaleX(1)}}
.subnav[hidden]{display:none}
a{color:inherit;text-decoration:none}
/* 상단 문의 단추는 폭을 고정합니다. 「도입 문의」와 Contact의 글자 폭이
   달라 언어를 바꿀 때마다 내비게이션이 3px씩 흔들렸습니다. */
#cta{min-width:104px}
/* 마무리 제안 문단은 폭을 제한하지 않고 한 줄로 둡니다. */
.cta p{max-width:none!important}
/* 제목은 display-md 라 32px 에서 22px 까지 줄어드는데 문단이 18px 로
   고정이라, 375px 에서 둘의 차이가 1.22배까지 좁아집니다. 제목과 문단이
   같은 무게로 읽혀 어느 쪽이 제안인지 흐려집니다. 문단도 함께 줄입니다.
   768px 에서 18px, 375px 아래에서 15px 입니다. 15px 은 기둥 설명과
   세 칸 카드에서 이미 쓰는 값입니다. */
.cta p{font-size:clamp(15px, 12.1px + 0.77vw, 18px)!important}
/* ── 제목 아래 도입문도 함께 줄입니다 ────────────────────────
   히어로 부제와 마무리 제안에서 고친 것과 같은 문제가 나머지 도입문에도
   그대로 남아 있었습니다. 제목만 clamp 로 줄고 문단은 고정이라, 좁은
   화면에서 둘의 차이가 사라집니다. 역할이 같은 것끼리 두 갈래로 묶어
   제목과 같은 구간에서 함께 줄입니다. 768px 위로는 예전 값 그대로입니다.

   화면별 CSS 스무 벌이 #p-<이름> 접두사로 같은 값을 다시 적어 두어
   id 특이도로 이깁니다. 그래서 !important 로 덮습니다.

   본문을 읽는 자리인 .prose p 와, 크게 두는 것이 뜻인 .pledge .tx 는
   건드리지 않습니다. 제목과 겨루는 자리가 아닙니다. */
/* 화면 머리글 아래 도입문 — 19px → 16px. .subtitle 과 같은 역할입니다. */
.ahead .lede,.ihead .sub,.nhead .sub,.hero .lede{
  font-size:clamp(16px, 13.1px + 0.77vw, 19px)!important}
/* 섹션 밴드 도입문과 단 본문 — 17px → 15px */
.bhead .lede,.plede,.fcopy .d,.art .lede,.iface .d,.rec .sb{
  font-size:clamp(15px, 13.1px + 0.51vw, 17px)!important}
/* 패럴럭스와 영상·사진이 들어갈 자리를 미리 확보합니다. */
.hero,.hd{min-height:72vh;display:flex;align-items:center}
.hero>.inner,.hd>.inner{width:100%}
@media(max-width:900px){.hero,.hd{min-height:auto;display:block}}
.film{height:640px!important}
@media(max-width:900px){.film{height:340px!important}}
.filmband{padding-bottom:var(--s-section)}
/* 하위 띠의 항목을 상단 메뉴와 같은 세로선에 세웁니다. 위아래 두 줄의
   글자가 같은 자리에서 시작해야 한 격자로 읽힙니다.

   Solution 의 x 는 로고 오른쪽 여백을 따라가는데, 그 여백이 1023 에서
   한 번 줄어듭니다. 그래서 라벨 폭도 같은 지점에서 함께 바꿉니다.
   한 값으로는 두 구간 중 한쪽이 반드시 어긋납니다.

     넓을 때  64 + 123 + 20 = 207
     좁을 때  64 + 107 + 20 = 191

   900 아래로는 라벨이 제 글자만큼만 차지하고 항목은 옆으로 밀립니다.
   거기서는 맞출 격자가 없습니다. */
.subnav .in{max-width:none!important;padding:0 64px!important}
.subnav .lb{flex:0 0 123px;width:123px;margin-right:0;padding-right:var(--s-md)}
@media(max-width:1023px){.subnav .lb{flex-basis:107px;width:107px}}
@media(max-width:900px){.subnav .in{padding:0 24px!important}
.subnav .lb{flex:0 0 auto;width:auto;padding-right:var(--s-md)}}
/* ── 유리 막대 ────────────────────────────────────────────
   상단 내비게이션과 하위 띠를 반투명으로 두고 뒤를 흐립니다.
   뒤에 오는 밴드가 검정이면 막대와 글자를 반전시킵니다. */
.nav{background:rgba(255,255,255,.72)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  border-bottom:1px solid rgba(0,0,0,.08);
  transition:background-color .25s,border-color .25s}
.subnav{background:rgba(255,255,255,.58)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  border-bottom:1px solid rgba(0,0,0,.08);
  transition:background-color .25s,border-color .25s}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.nav{background:rgba(255,255,255,.96)!important}
.subnav{background:rgba(255,255,255,.94)!important}}
.nav .wm,.nav li,.nav li a,.lang a,.subnav .lb,.subnav a,.burger span{transition:color .25s,background-color .25s,border-color .25s}
/* 검정 밴드 위에 있을 때 */
.nav.on-dark{background:rgba(0,0,0,.52)!important;border-bottom-color:rgba(255,255,255,.16)}
.subnav.on-dark{background:rgba(0,0,0,.40)!important;border-bottom-color:rgba(255,255,255,.16)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.nav.on-dark{background:rgba(0,0,0,.92)!important}
.subnav.on-dark{background:rgba(0,0,0,.88)!important}}
.nav.on-dark li{color:rgba(255,255,255,.66)}
/* 항목의 색은 a 에 걸려 있어서 li 만 뒤집으면 글자는 회색으로 남습니다 */

.nav.on-dark li a:hover{color:var(--on-dark)}
.nav.on-dark li.on a{color:var(--on-dark)}
.nav.on-dark .btn-primary{background:var(--on-dark);color:var(--ink);border-color:var(--on-dark)}
.subnav.on-dark .lb{color:rgba(255,255,255,.5);border-right-color:rgba(255,255,255,.2)}
.subnav.on-dark a{color:rgba(255,255,255,.66)}
.subnav.on-dark a:hover{color:var(--on-dark)}
.subnav.on-dark a.on{color:var(--on-dark)}

.nav.on-dark .burger span::before,.nav.on-dark .burger span::after{background:var(--on-dark)}
.nav.on-dark .burger:not([aria-expanded="true"]) span{background:var(--on-dark)}
/* 히어로는 검은 밴드입니다. 그 위의 주 단추는 흰 바탕에 검은 글씨로 둡니다. */
.hero .btn-primary,.hd .btn-primary{background:var(--canvas)!important;color:var(--ink)!important;
  border-color:var(--canvas)!important}
/* 최상단 막대를 띄우고 히어로가 화면 맨 위에서 시작하게 합니다.
   히어로 자리에 영상이나 사진이 들어가면 막대가 그 위에 겹쳐 보이고,
   updateChrome() 이 배경 밝기를 읽어 막대 색을 뒤집습니다. */
.nav{position:fixed;top:0;left:0;right:0;z-index:30}
.subnav{position:fixed;top:60px;left:0;right:0;z-index:24}
.drawer{z-index:25}
/* 막대가 흐름에서 빠진 만큼 첫 화면 윗 여백을 더해, 글의 위치는 그대로 둡니다 */
.page>header{padding-top:228px!important}
body.has-sub .page>header{padding-top:276px!important}
@media(max-width:900px){.page>header{padding-top:124px!important}
.page>header.hero{padding-top:156px!important}
.page>header.hd{padding-top:156px!important}
body.has-sub .page>header{padding-top:172px!important}
body.has-sub .page>header.hero{padding-top:204px!important}
body.has-sub .page>header.hd{padding-top:204px!important}}
/* 고정된 막대와 함께 스크롤이 어긋나지 않도록 하는 규칙들입니다.
   --chrome-h 는 updateChrome() 이 막대의 실제 높이(60px 또는 108px)로 갱신합니다. */
:root{--chrome-h:60px}

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

/* 페이지 끝에서 스크롤이 바깥으로 번지지 않게 합니다 */

.drawer{overscroll-behavior:contain}
/* 가로로 넘기는 카드 줄이 세로 스크롤을 가로채지 않게 합니다 */
[data-r="gt"]{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
/* 막대가 스크롤 중에 다시 그려질 때 흔들리지 않도록 별도 층으로 올립니다 */
.nav,.subnav{transform:translateZ(0);backface-visibility:hidden}
/* 언어 전환 — 지구본 하나에 목록을 답니다. 단추 옆에 단추가 서지 않고,
   언어가 늘어나도 막대의 폭이 달라지지 않습니다. */
#langsw{position:relative;display:flex;border:0;border-radius:0;overflow:visible}
#langsw .globe{width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  padding:0;background:none;border:0;cursor:pointer;
  color:var(--mute);transition:color .15s}
#langsw .globe svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
#langsw .globe:hover{color:var(--ink)}
#langsw .langmenu{position:absolute;top:calc(100% + 10px);right:0;min-width:132px;z-index:40;
  display:flex;flex-direction:column;gap:2px;padding:4px;
  background:var(--canvas);border:1px solid var(--hairline-strong);border-radius:var(--r-xs)}
#langsw .langmenu a{font-size:14px;font-weight:700;line-height:1;color:var(--mute);
  letter-spacing:.01em;padding:9px 10px;border-radius:2px;
  transition:color .15s,background-color .15s}
#langsw .langmenu a:hover{color:var(--ink);background:var(--surface-soft)}
#langsw .langmenu a.on{color:var(--ink);background:var(--surface-soft)}
.nav.on-dark #langsw .globe{color:rgba(255,255,255,.72)}
.nav.on-dark #langsw .globe:hover{color:var(--on-dark)}
/* 국문 제목만 글줄 사이를 120%로 벌립니다. 받침이 있는 한글은 라틴 문자보다
   세로로 꽉 차서, 같은 값이면 두 줄이 서로 붙어 보입니다.
   서체와 마찬가지로 글의 언어를 따라가므로, 국문 화면에 놓인 영문 제목은 그대로입니다. */
.display-xl[data-t="ko"],.display-lg[data-t="ko"],.display-md[data-t="ko"]{line-height:1.2!important}
/* 계약 방식을 정한 이유. 밴드를 따로 두지 않고 조건 바로 아래에 한 항목으로 붙입니다. */
/* 오른쪽 아래에 떠 있는 맨 위로 단추. 한 화면쯤 내려간 뒤에 나타납니다.
   문의는 상단 막대에 늘 떠 있으므로 여기에 따로 두지 않습니다. */
.fabs{position:fixed;right:24px;bottom:24px;z-index:26;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.fabs .totop{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;padding:0;cursor:pointer;
  background:var(--canvas);color:var(--ink);border:1px solid var(--hairline-strong);transition:color .15s,border-color .15s}
.fabs .totop svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.fabs .totop:hover{border-color:var(--ink)}
@media(max-width:900px){.fabs{right:16px;bottom:16px;gap:8px}
.fabs .totop{width:40px;height:40px}}
/* 격자 안에 놓인 링크는 칸 너비만큼 늘어나서 밑줄이 글보다 길어집니다.
   시작 쪽에 붙여 글 길이만큼만 밑줄이 그어지게 합니다. flex 안에서는 무시됩니다. */
.more{justify-self:start}
/* 푸터 — 왼쪽에 회사 정보, 오른쪽에 화면 목록. */
/* 위층도 아래 주소와 같은 네 칸 격자를 씁니다. 왼쪽이 1~2번 칸,
   화면 목록이 3~4번 칸이라 첫 링크가 아래 「연구소」와 같은 x에서 시작합니다. */
.foot .in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--s-lg) var(--s-xl);align-items:start}
.foot .fleft{grid-column:1 / span 2}
.foot .fmap{grid-column:3 / span 2}
@media(max-width:900px){

.foot .fmap{grid-column:1 / span 2;margin-top:var(--s-xxl)}}
/* 워드마크와 연락처를 한 덩어리로 붙입니다. 라벨 없이도 이메일인 줄 압니다. */
.foot .fleft{display:flex;flex-direction:column;gap:var(--s-md);align-items:flex-start}

/* 넷을 양 끝에 맞춰 폅니다. 첫 항목이 아래 「연구소」와 같은 x에서 시작하고
   마지막 항목이 컨테이너의 오른쪽 끝에서 끝납니다. */
.foot .fmap{display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:var(--s-md) var(--s-lg);align-content:flex-start}
.foot .fmap a{font-size:15px;font-weight:700;line-height:1.4;color:var(--on-dark-mute);
  transition:color .15s}

/* 사무실이 넷으로 늘어 두 줄로 놓습니다 */
/* 영문 자간 — 피그마 텍스트 스타일의 값을 그대로 옮겼습니다.
   서체·줄 간격과 마찬가지로 글의 언어를 따라가므로 국문에는 적용되지 않습니다.
   오버라인이나 태그처럼 일부러 벌려 둔 라벨은 각자의 값을 지킵니다. */
/* paragraph -0.5% */
p[data-t="en"],li[data-t="en"],td[data-t="en"],
.body-lg[data-t="en"],.d[data-t="en"],.sb[data-t="en"],
.w[data-t="en"]{letter-spacing:-.005em}
/* caption -2% */
.caption[data-t="en"],.cap[data-t="en"],.statfoot[data-t="en"]{letter-spacing:-.02em}
/* link -2.5% (단추는 제 값을 지킵니다) */
a[data-t="en"]:not(.btn){letter-spacing:-.025em}
/* heading 1 -3% · 2 -4% · 3 -3% */
h1[data-t="en"]{letter-spacing:-.03em}
h2[data-t="en"]{letter-spacing:-.04em}
h3[data-t="en"],.t[data-t="en"],.h[data-t="en"]{letter-spacing:-.03em}
/* display -4.25% */
.display-xl[data-t="en"],.display-lg[data-t="en"],.display-md[data-t="en"]{letter-spacing:-.0425em}
/* display statistics -4%. 숫자는 두 언어 모두 DM Sans 로 서므로 숫자와
   라틴 단위에만 걸고, 「원」이나 「장」 같은 한글 단위는 건드리지 않습니다. */
.nums .v [data-num],.stats .num [data-num],
.nums .v i[data-t="en"],.stats .num i[data-t="en"]{letter-spacing:-.04em}
/* 상단 막대와 언어 목록은 앞서 정한 값을 그대로 씁니다 */
.nav li a[data-t="en"]{letter-spacing:.01em}
#langsw .langmenu a[data-t="en"]{letter-spacing:.01em}
/* 주소 넷은 아래 한 줄에서 네 칸으로 나눕니다. 왼쪽 좁은 칸에서는 네 칸을
   만들 수 없고, 주소는 서로 견줘 보는 정보라 나란히 놓이는 편이 낫습니다. */

.foot .faddr .cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--s-lg) var(--s-xl)}
/* 소제목(.t) 행간을 120%로 통일합니다. 지금은 자리마다 100%, 110%, 125%, 130%로
   제각각이라 두 줄짜리 제목의 붙은 정도가 화면마다 달랐습니다.
   연혁의 설명글만 본문 성격이라 제 값을 지킵니다. */
.t{line-height:1.2!important}
.tl .t{line-height:1.5!important}
/* 오버라인과 제목 사이를 어느 화면에서나 같게 만듭니다.
   세로로 쌓는 flex 묶음은 이미 자체 간격을 가지므로 제목의 윗여백을 0으로 둡니다. */
.stack>h1,.stack>h2,.fcopy>h2,.inner.cta>h1,.inner.cta>h2{margin-top:0!important}

/* 계약 조건 — 이름과 설명 사이를 4px에서 8px로 벌립니다.
   4px이면 두 줄이 한 문단처럼 붙어 어디까지가 이름인지 흐려집니다. */
/* 계약 조건 — 세 조각이 한 줄로 흘러 「0원 고객 설비 투자 로봇·센서…」처럼
   붙어 읽혔습니다. 인라인 요소라 위 여백이 먹지 않았기 때문입니다.
   세로로 쌓고, 선 → 제목 → 8px → 설명 순으로 간격을 잡습니다. */
/* 아래 규칙은 페이지별 규칙보다 뒤에 와야 이깁니다 */
/* ── Figma 텍스트 스타일 가이드 ────────────────────────────
   국문 Pretendard · 영문 DM Sans. 두 언어가 다른 곳은
   디스플레이 행간과 button-md 크기뿐입니다. */
/* 서체는 문장 단위로 갈립니다. 기본은 국문이고, 한글이 하나도 없는
   문장만 영문 서체로 바꿉니다. 한글과 영문이 섞인 문장은 국문으로 통일합니다. */
body{font-family:var(--font-ko)}

/* 가이드에는 있으나 아직 쓰지 않던 단계 */
.heading-md{font-size:20px;font-weight:700;line-height:.95}
.heading-sm{font-size:18px;font-weight:700;line-height:1}
.button-lg{font-size:16px;font-weight:700;line-height:1}
.button-sm{font-size:13px;font-weight:600;line-height:1.2;letter-spacing:.13px}
/* 영문 전용 값 */
/* 제목 폭 ── 큰 화면에서 문장이 끊기지 않도록 넉넉히 잡습니다.
   줄바꿈은 컨테이너 1152와 본문의 <br>가 정합니다. */
.hero h1,.hd h1,.ahead h1,.ihead h1,.nhead h1{max-width:none!important}

.ahead .lede,.ihead .sub,.nhead .sub{max-width:64ch!important}
/* 히어로 부제는 폭을 제한하지 않고 문장 길이에 맡깁니다 */
.hero .subtitle,.hd .subtitle{max-width:none!important}
/* 제목은 56px 에서 32px 로 줄어드는데 부제가 19.2px 로 남아 있어,
   좁은 화면에서 둘의 차이가 2.9배에서 1.67배로 좁아집니다. 부제도 함께
   줄여 위계를 지킵니다. 768px 에서 19.2px, 375px 아래에서 16px 입니다.
   화면별 CSS 가 #p- 접두사로 같은 값을 다시 적어 두어 !important 로 덮습니다. */
.hero .subtitle,.hd .subtitle{font-size:clamp(16px, 12.9px + 0.82vw, 19.2px)!important}
/* 본문 안 소제목도 한 뼘 넓힙니다 */
.page h2[style*="max-width:16ch"]{max-width:24ch!important}
.page h2[style*="max-width:18ch"]{max-width:26ch!important}
.page h2[style*="max-width:20ch"]{max-width:28ch!important}
.page h2[style*="max-width:22ch"]{max-width:30ch!important}
/* 컴퍼니 · 팀 */
/* 규격 표는 값을 나란히 세워 읽는 곳이라, 문장 단위 판정 대신
   화면의 언어를 따라 한 서체로 묶습니다. */
body[data-lang="ko"] .spec,body[data-lang="ko"] .spec *{font-family:var(--font-ko)}
body[data-lang="en"] .spec,body[data-lang="en"] .spec *{font-family:var(--font-en)}
/* 단추와 메뉴 글자 크기도 화면 모드가 아니라 글자의 언어를 따릅니다.
   가이드의 button-md는 국문 15px, 영문 14.4px입니다. */
.btn[data-t="en"],.nav li a[data-t="en"]{font-size:14.4px!important}
/* 숫자와 기호만 있는 값은 어디에 있든 영문 서체로 씁니다. */
[data-num]{font-family:var(--font-en)!important}
/* 두 갈래 비교 — 「길 A / 길 B」라는 이름은 읽는 이에게 아무 정보를 주지 않아
   내용을 담은 이름으로 바꾸고, 라벨을 오버라인 자리로 내렸습니다.
   그 아래 한 줄 요약을 같은 자리에 두어 두 칸이 행으로 맞습니다.
   눈이 좌우로 오가며 같은 축의 값을 견주게 되는 것이 비교표가 읽히는 방식입니다. */
/* ── 아티클 본문 부품을 여덟 화면에 한 벌로 채웁니다 ──────────────────
   페이지별 규칙을 복제하던 과정에서 영문 아티클 세 화면에 .fig 와 .evx,
   .cite, 그리고 .two 의 기본 규칙이 빠져 있었습니다. 그래서 영문에서는
   그림 자리가 높이 없는 빈 칸으로 사라지고, 표는 서식 없는 문단으로
   흘러내렸습니다. 국문에 쓰던 값을 그대로 여덟 화면에 겁니다. */
/* 출처 주석은 .prose p 보다 명시도가 낮아 12px 지정이 먹지 않고 본문과 같은
   18px으로 서 있었습니다. 국문에서도 처음부터 그랬습니다. 클래스를 하나 더
   얹어 명시도를 올립니다. */
/* ── 계약 조건 값의 서체와 자간 ─────────────────────────────
   홈의 숫자 네 칸과 기술의 실측 네 칸은 「숫자는 언제나 DM Sans, 한글 단위만
   국문 서체」라는 규칙을 씁니다. .terms 만 이 규칙에서 빠져 있어서 같은 블록
   안에서 「14.7%」는 DM Sans 로, 「1.5배」는 Pretendard 로 섰고 자간도 둘 다
   normal 이었습니다. Pretendard 의 숫자가 더 넓어 한쪽만 벌어져 보였습니다.
   숫자를 따로 감싸고, 피그마의 Display Statistics 값인 -4% 를 겁니다. */
/* 문장 하나가 통째로 <b> 인 경우에는 서체 판정이 그 <b> 에 붙습니다.
   안쪽까지 함께 걸어야 굵은 문장만 자간이 0으로 남지 않습니다. */
/* ── 카드 위 선의 굵기 ──────────────────────────────────────
   2px 검정은 이 디자인 시스템에서 가장 진한 선입니다. 계약 조건은 한 화면에
   두세 칸이 반복되고 그 바로 아래에 14px 이름이 붙으므로, 선이 이름보다 먼저
   눈에 들어왔습니다. 회사 소개의 원칙에서 같은 지적을 받았을 때 색은 그대로
   두고 굵기만 절반으로 낮춘 선례를 따릅니다. 모노톤이라 회색으로 눕히면
   두 갈래 비교에서 「고른 쪽(검정)」과 「고르지 않은 쪽(회색)」의 대비가
   흐려지기 때문에, 명도가 아니라 굵기를 건드립니다.
   두 갈래 비교도 같은 성격의 카드 선이라 함께 낮춥니다. 1px 검정과
   1px #c4c4c4 의 대비는 그대로 남습니다. */
/* ── 언어 목록이 상단 막대에서 잘리던 문제 ────────────────────
   화면 폭이 1023px 이하일 때 항목이 넘치면 옆으로 밀어 볼 수 있도록 막대에
   overflow-x:auto 를 걸어 두었습니다. 그런데 CSS 에서는 한쪽 축이 visible 이
   아니면 다른 축의 visible 도 auto 로 계산됩니다. 그래서 세로까지 잘리게 되고,
   막대 아래로 76px 내려오는 언어 목록이 60px 지점에서 잘려 흰 띠 5px 만
   남았습니다. 넓은 화면에서는 이 규칙이 꺼지므로 가끔씩만 나타났습니다.
   가로 스크롤을 막대 전체가 아니라 항목 목록에만 겁니다. 오른쪽의 지구본과
   문의 단추는 스크롤 상자 밖에 남아 목록이 잘리지 않습니다. */
@media(max-width:1023px){.nav{overflow:visible}
.nav ul{flex:1 1 auto;min-width:0;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
.nav ul::-webkit-scrollbar{display:none}}
/* ── 기록 목록의 커서 미리보기 ──────────────────────────────────
   항목에 손이 얹히면 그 성과를 보여 주는 화면이 커서를 따라 떠오릅니다.
   사진이 아직 없어 지금은 자리표시자가 뜹니다. 항목의 data-img 에 적힌 글이
   라벨이고, 실제 이미지가 준비되면 이 상자 안에 <img> 를 넣으면 됩니다.
   커서가 없는 기기에는 걸지 않습니다. 손가락으로 누르면 손이 얹힌 상태가
   남아 상자가 화면에 붙박이로 떠 있게 되기 때문입니다. */
@media(hover:hover){/* 사진 위에서는 회색 글씨가 묻힙니다. 왼쪽 아래에 검은 띠를 깔고
     흰 글씨로 적어 어떤 사진이든 이름이 읽히게 합니다. */
/* 사진이 들어가면 사진이 상자를 가득 채웁니다. 여백을 두면 사진 둘레에
     흰 테가 생겨 상자가 액자처럼 보입니다. */
/* 어느 줄에 손이 얹혔는지 보이도록 제목만 살짝 밀어 둡니다 */}
/* ── 홈·솔루션·기술·회사의 첫 화면 높이를 하나로 ──────────────────
   네 화면의 첫 화면이 폭에 상관없이 50px 안팎으로 어긋나 있었습니다.
   홈과 솔루션에는 단추가 하나 더 있고, 기술과 회사에는 없으며, 하위 띠가
   있는 화면은 위 여백이 48px 더 큽니다. 그 셋이 겹쳐 736 / 686 / 694 처럼
   갈렸습니다. 내용이 서로 다르니 여백만으로는 맞출 수 없어, 가장 큰 값에
   바닥을 깔아 넷을 같은 높이로 세웁니다. 1440·1280·1024·940px 에서
   가장 큰 값이 736px 이었습니다. 화면이 세로로 길면 72vh 가 대신 이깁니다.
   좁은 화면(900px 이하)에서는 아래 규칙이 min-height 를 풀어 주므로
   첫 화면이 내용만큼만 차지합니다. */
@media(min-width:901px){.hero,.hd{min-height:max(72vh,736px)}}
/* 사진 두 장이 한 설명을 함께 받는 자리입니다. 좁은 화면에서는 위아래로 쌓습니다. */
.fig.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-sm)}
.fig.pair figcaption{grid-column:1 / -1}
@media(max-width:600px){.fig.pair{grid-template-columns:1fr}}
/* ── 손가락으로 누를 자리 ───────────────────────────────────────────
   WCAG 2.5.8은 최소 24px, 애플과 구글 지침은 44~48px를 권합니다.
   글자 크기와 밑줄 위치를 건드리면 화면이 흐트러지므로, 보이는 모양은
   그대로 두고 비어 있는 층을 덧대어 누를 면적만 넓힙니다.
   마우스를 쓰는 기기에는 걸지 않습니다. */
@media(pointer:coarse){.nav .mark,.more,.foot nav a,.foot .finfo a,.toc a,.nums .lk{position:relative}
.nav .mark::after,.more::after,.foot nav a::after,.foot .finfo a::after,
  .toc a::after,.nums .lk::after{
    content:"";position:absolute;left:0;right:0;top:50%;
    transform:translateY(-50%);height:44px}
/* 세로로 붙어 있는 목록은 누를 면적이 서로 겹치지 않게 줄 간격을 벌립니다.
     겹쳐 두면 아래 항목을 누르려다 위 항목이 눌립니다. */
.foot nav{row-gap:var(--s-xl)}
.foot .finfo{row-gap:var(--s-md)}}
/* ── 성공률 비교 도표 ───────────────────────────────────────────────
   본문에 이미 표로 들어가 있는 세 숫자를 그림으로 옮긴 것입니다. 사진이
   아니라 자료이므로 stock 이미지를 쓰지 않고 직접 그렸습니다.
   화면 안에 SVG로 넣어 어느 크기에서도 또렷하고, 글자는 화면의 서체를
   그대로 물려받습니다. 세 번째 줄만 검게 두어 눈이 결론에 먼저 닿습니다. */
.chartbox{padding:0!important;display:block!important;background:var(--surface-soft)}
.chartbox .chart{display:block;width:100%;height:100%;
  font-family:var(--font-ko);font-variant-numeric:tabular-nums}
[data-lang="en"] .chartbox .chart{font-family:var(--font-en)}
.chartbox .ce{font-size:9px;font-weight:700;letter-spacing:.16em;fill:var(--ash)}
.chartbox .cl{font-size:11px;font-weight:700;fill:var(--charcoal)}
.chartbox .cv{font-size:11px;font-weight:700;fill:var(--ink);text-anchor:end}
/* 글자 크기가 viewBox 단위라 칸이 작아지면 그만큼 작아집니다. 목록의 작은 칸은
   240px라 그대로 두면 이름이 8px로 보입니다. 그 칸에서만 값을 키워
   화면에 찍히는 크기를 두 칸이 비슷하게 맞춥니다. */
.card .chartbox .ce{font-size:12px}
.card .chartbox .cl,.card .chartbox .cv{font-size:15px}
.chartbox .ct{fill:#e8e8e8}
.chartbox .cf{fill:var(--stone)}
.chartbox .cg{fill:#dcdcdc}
.chartbox .cf.hi{fill:var(--ink)}
/* 손을 얹었을 때 다른 칸은 배경이 바뀌지만 이 칸은 그림이 들어 있어
   배경색이 보이지 않습니다. 대신 결론 막대를 살짝 늘려 반응을 줍니다. */
.card:hover .chartbox .cf.hi,.slide:hover .chartbox .cf.hi{opacity:.72}
.chartbox .cf.hi{transition:opacity .15s}

/* ── 로고 ── 크기와 mask 는 common.css 에 있습니다. 여기에는 색만 둡니다. */

/* 로고는 본문 글자색이 아니라 먹색을 씁니다. 푸터처럼 어두운 바탕에서는 뒤집습니다. */
.nav .mark{color:var(--ink)}
/* 어두운 밴드 위에 얹히면 상단 막대와 함께 뒤집힙니다. */

.foot .brand{color:var(--on-dark)}

/* 아래 @media 는 common.css 가 아니라 이 파일에 있어야 합니다.
   짝이 되는 무조건 규칙(.nav, .burger, .nav .mark, .foot .in, .foot .fleft,
   .foot .faddr .cols)이 이 파일에 남아 있어서, @media 쪽만 common.css 로
   보내면 특이도가 같은 채 순서가 뒤집혀 좁은 화면에서 기본값이 이깁니다.
   실제로 상단 막대 여백과 햄버거, 푸터 격자가 그렇게 깨졌습니다. */
@media(max-width:900px){
  .nav{padding:0 24px}
  .foot .in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot .fleft{grid-column:1 / span 2}
  .foot .faddr .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
  .burger{display:flex}
  .nav .mark{margin-right:0}
}
@media(max-width:600px){
  .foot .in{grid-template-columns:1fr}
  .foot .fleft,.foot .fmap{grid-column:auto}
  .foot .faddr .cols{grid-template-columns:1fr}
}