/* DESIGN-renault.md · 모노톤 · DM Sans(라틴) + Pretendard(한글)
   본사 사이트와 같은 값을 씁니다. 토큰과 밴드, 상단 막대, 푸터를 그대로 가져오고
   채용에만 있는 부품(포지션 목록, 자격 요건, 지원서)을 그 위에 더했습니다. */
:root{
  color-scheme:light;
  --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:120px;
  --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;
  --chrome-h:60px;
}

body{background:var(--canvas);color:var(--body);font-family:var(--font-ko);font-size:16px;line-height:1.4;
  -webkit-font-smoothing:antialiased;margin:0}

[data-num]{font-family:var(--font-en)}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.2;color:var(--ink)}

a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* 한글은 어절 단위로 끊습니다 */
body,h1,h2,h3,h4,p,span,a,li,dd,dt,b,figcaption{word-break:keep-all;overflow-wrap:break-word}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ── 글자 규격 ─────────────────────────────────────────── */

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

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

.overline{display:block;font-size:12px;font-weight:700;line-height:1.45;letter-spacing:0;color:var(--ash)}
.band.dark .overline{color:rgba(255,255,255,.5)}

/* ── 밴드 ──────────────────────────────────────────────── */

@media(max-width:900px){.band{padding:80px 24px}}
.bhead{display:flex;flex-direction:column;gap:var(--s-sm)}
/* 폭을 묶지 않습니다. 바로 아래 선과 좌우 끝이 같아지고,
   폭이 좁아지거나 글이 길어지면 저절로 두 줄이 됩니다. */
.bhead .lede{font-size:17px;line-height:1.7;color:var(--mute);margin-top:4px}
.band.dark .bhead .lede{color:var(--on-dark-mute)}

/* ── 단추 ──────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;
  letter-spacing:.01em;line-height:1;padding:14px 24px;border-radius:var(--r-xs);
  border:1px solid transparent;min-height:50px;cursor:pointer;
  transition:background-color .15s,color .15s,border-color .15s}
.btn[data-t="en"]{font-size:14.4px}
.btn-primary{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
.btn-primary:hover{background:#222;border-color:#222}
.band.dark .btn-primary,.hero .btn-primary,.ahead .btn-primary{background:var(--canvas);color:var(--ink);border-color:var(--canvas)}
.band.dark .btn-primary:hover,.hero .btn-primary:hover{background:#e6e6e6;border-color:#e6e6e6}
.btn-outline-dark{background:transparent;color:var(--ink);border-color:var(--hairline-strong);padding:13px 23px}
.btn-outline-dark:hover{background:var(--ink);color:var(--canvas)}
.btn-outline-light{background:transparent;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;justify-self:start;
  transition:opacity .15s}

/* ── 상단 막대 ─────────────────────────────────────────── */
.nav{height:60px;display:flex;align-items:center;gap:var(--s-xl);padding:0 64px;
  position:fixed;top:0;left:0;right:0;z-index:30;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  border-bottom:1px solid rgba(0,0,0,.08);
  transform:translateZ(0);backface-visibility:hidden;
  transition:background-color .15s,border-color .15s}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav{background:rgba(255,255,255,.96)}
}
.nav .mark{display:flex;align-items:center;gap:9px;margin-right:var(--s-lg)}
.nav .sfx{font-size:18px;font-weight:700;color:var(--ink);transition:color .15s}

.nav li{font-size:15px;font-weight:700;letter-spacing:.01em;white-space:nowrap}

.nav .right{margin-left:auto;display:flex;align-items:center;gap:var(--s-sm)}
.nav .out{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:700;color:var(--mute);
  white-space:nowrap;transition:color .15s}
.nav .out:hover{color:var(--ink)}
.nav .out svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
/* 검은 밴드 위에 얹혔을 때 */
.nav.on-dark{background:rgba(0,0,0,.52);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)}
}
.nav.on-dark .sfx{color:var(--on-dark)}

.nav.on-dark li a:hover,.nav.on-dark li.on a{color:var(--on-dark)}
.nav.on-dark .out{color:rgba(255,255,255,.66)}
.nav.on-dark .out:hover{color:var(--on-dark)}

.nav.on-dark .burger span,.nav.on-dark .burger span::before,.nav.on-dark .burger span::after{background:var(--on-dark)}
.nav.on-dark .burger[aria-expanded="true"] span{background:transparent}

/* ── 서랍(좁은 화면) ───────────────────────────────────── */
.burger{display:none;width:40px;height:40px;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;transition:background-color .15s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink);
  transition:transform .18s,top .18s}

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

.drawer a.btn{margin-top:var(--s-xl);width:100%;min-height:52px;border-bottom:0;
  color:var(--canvas);background:var(--ink);justify-content:center}
@media(max-width:767px){
  .nav{gap:var(--s-sm)}
  
  .nav .out{display:none}
  
  
}
/* ── 포지션 막대 ───────────────────────────────────────────
   첫 화면의 「이 포지션 지원하기」가 위로 빠져나가면, 상단 막대 바로 아래에
   같은 단추를 단 띠가 내려옵니다. 공고가 길어 끝까지 읽는 동안에도
   지원할 자리가 손 닿는 곳에 남습니다. 검은 밴드 위에서는 함께 뒤집힙니다. */
.jbar{position:fixed;top:60px;left:0;right:0;z-index:24;height:56px;
  background:rgba(255,255,255,.58);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  border-bottom:1px solid rgba(0,0,0,.08);
  opacity:0;pointer-events:none;
  transform:translateZ(0) translateY(-100%);backface-visibility:hidden;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),opacity .3s cubic-bezier(.22,.61,.36,1),
    background-color .15s,border-color .15s}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .jbar{background:rgba(255,255,255,.94)}
}
.jbar.show{transform:translateZ(0) translateY(0);opacity:1;pointer-events:auto}
/* 상단 막대와 같은 격자에 세웁니다. 컨테이너를 한 번 더 가운데 정렬하면
   그 안쪽 여백만큼 글이 오른쪽으로 밀려 두 막대의 x가 어긋납니다. */
.jbar .in{max-width:none;margin:0;padding:0 64px;height:100%;
  display:flex;align-items:center;gap:var(--s-md)}
@media(max-width:900px){.jbar .in{padding:0 24px}}
.jbar .nm{font-size:16px;font-weight:700;line-height:1.2;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s}
.jbar .mt{font-size:13px;line-height:1.2;color:var(--mute);white-space:nowrap;
  border-left:1px solid var(--stone);padding-left:var(--s-md);transition:color .15s,border-color .15s}
@media(max-width:767px){.jbar .mt{display:none}}
.jbar .btn{margin-left:auto;flex:0 0 auto;min-height:36px;padding:9px 16px;font-size:14px}
.jbar.on-dark{background:rgba(0,0,0,.40);border-bottom-color:rgba(255,255,255,.16)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .jbar.on-dark{background:rgba(0,0,0,.90)}
}
.jbar.on-dark .nm{color:var(--on-dark)}
.jbar.on-dark .mt{color:rgba(255,255,255,.6);border-left-color:rgba(255,255,255,.28)}
.jbar.on-dark .btn-primary{background:var(--on-dark);color:var(--ink);border-color:var(--on-dark)}

/* ── 맨 위로 ───────────────────────────────────────────── */
.totop{position:fixed;right:24px;bottom:24px;z-index:26;width:44px;height:44px;border-radius:var(--r-xs);
  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:background-color .15s,color .15s}
.totop svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.totop:hover{background:var(--ink);color:var(--canvas)}
@media(max-width:900px){.totop{right:16px;bottom:16px;width:40px;height:40px}}

/* ── 첫 화면 ───────────────────────────────────────────── */
.hero{background:var(--surface-dark);color:var(--on-dark);padding:180px 64px var(--s-section)}
@media(max-width:900px){.hero{padding:140px 24px 80px}}
.hero .in{max-width:1152px;margin:0 auto;display:flex;flex-direction:column;gap:var(--s-xxxl)}
.hero .stack{display:flex;flex-direction:column;gap:var(--s-lg)}
.hero h1{color:var(--on-dark)}
/* 첫 문장이 「…시스템을 만듭니다.」에서 끊기도록 폭을 묶습니다. 묶지 않으면
   1152px 을 다 쓰면서 둘째 문장 앞부분이 첫 줄에 딸려 올라옵니다.
   px 이 아니라 em 으로 잡는 이유는, 글자 크기가 19px 에서 16px 까지 함께
   줄어들기 때문입니다. px 으로 박으면 작아진 글자가 더 들어가 끊기는 자리가
   밀립니다. em 은 글자 크기를 따라가므로 어느 폭에서나 같은 자리에서 끊깁니다.
   35em 은 19px 기준 665px 이고, 첫 문장의 한 줄 폭이 660px 입니다. */
.hero .lede{font-size:19px;line-height:1.7;color:var(--on-dark-mute);max-width:35em}
.hero .btns{margin-top:var(--s-xs)}
.hstat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-xl);
  border-top:1px solid var(--divider-dark);padding-top:var(--s-lg)}
@media(max-width:700px){.hstat{grid-template-columns:1fr;gap:var(--s-md)}}
.hstat .s{display:flex;flex-direction:column;gap:4px}
.hstat .v{font-size:40px;font-weight:700;line-height:1;color:var(--on-dark);font-variant-numeric:tabular-nums}
.hstat .k{font-size:13px;line-height:1.5;color:var(--on-dark-mute)}

/* ── 열린 포지션 ───────────────────────────────────────── */
.jobs{margin-top:var(--s-xxl);border-top:1px solid var(--hairline-strong)}
/* 줄은 컨테이너 폭 그대로 두고 여백을 안쪽에 넣습니다. 그러면 줄을 가르는 선이
   테두리 그대로 목록 맨 위의 선과 같은 길이로 그어지고, 손이 얹혔을 때 깔리는
   검은 바탕도 같은 폭에서 시작해 같은 자리에서 끝납니다. */
/* 본사 사이트 아티클 목록의 카드와 같은 규격입니다. 세로 여백 24px, 좌우는 0,
   가르는 선은 1px --hairline 입니다. 줄이 컨테이너 폭 그대로라 글이 선·제목과
   같은 x 에서 시작합니다. */
.job{display:grid;grid-template-columns:minmax(0,1fr) 40px;gap:var(--s-md);align-items:center;
  padding:var(--s-xl) 0;
  border-bottom:1px solid var(--hairline);
  transition:border-color .15s}
/* 마지막 줄의 선은 걷습니다. 바로 아래 페이지 이동 띠가 제 윗선을 가지고 있어
   그대로 두면 48px 사이에 같은 선이 두 겹으로 놓입니다. */
.job:last-child{border-bottom:0}
.job .col{display:flex;flex-direction:column;gap:var(--s-sm);min-width:0}
.job .top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-sm)}
.job .open{font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--ink);
  border:1px solid var(--ink);padding:4px 8px;line-height:1;transition:color .18s,border-color .18s}
.job h3{font-size:26px;line-height:1.15}
@media(max-width:600px){.job h3{font-size:21px}}
.job .meta{font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--mute);transition:color .18s}
/* 한 줄로 둡니다. 오른쪽 단추까지 남는 폭을 다 쓰고, 넘치면 말줄임표로 끊습니다. */
.job .d{font-size:16px;line-height:1.65;color:var(--charcoal);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .18s}
.job .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.job .tags span{font-size:12px;font-weight:600;line-height:1;color:var(--mute);
  border:1px solid var(--stone);padding:6px 9px;transition:color .18s,border-color .18s}
.job .ar{justify-self:end;width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--stone);border-radius:var(--r-xs);transition:border-color .18s,background-color .18s,color .18s}
.job .ar svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* 손이 얹히면 제목에 밑줄이 그어지고 화살표가 검게 찹니다.
   아티클 목록과 같은 방식입니다. 줄을 통째로 검게 덮지 않으므로
   글이 검은 바탕의 가장자리에 붙지 않습니다. */
@media(hover:hover){
  .job:hover h3{text-decoration:underline;text-underline-offset:4px}
  .job:hover .ar{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
}
@media(max-width:600px){
  .job{grid-template-columns:minmax(0,1fr);padding:var(--s-lg) 0}
  .job .ar{justify-self:start}
}

/* ── 페이지 이동 ───────────────────────────────────────────
   본사 사이트 아티클 목록 아래의 부품을 값 그대로 옮겼습니다.
   한 쪽뿐일 때도 띠는 서고, 그때는 숫자와 화살표가 모두 눌리지 않습니다. */
.pager{display:flex;align-items:center;justify-content:center;
  gap:var(--s-xs);margin-top:var(--s-xxxl);padding-top:var(--s-xl);border-top:1px solid var(--hairline)}
.pg-nums{display:flex;gap:4px}
.pager button{min-width:40px;height:40px;padding:0 var(--s-xs);
  background:none;border:1px solid transparent;border-radius:2px;font-size:14px;font-weight:700;
  color:var(--mute);cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.pager button:hover:not(:disabled){color:var(--ink);border-color:var(--hairline-strong)}
.pager button:disabled{color:var(--hairline-strong);cursor:default}
.pager button.on,.pager button.on:disabled{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
.pg-arrow{font-family:var(--font-en);font-size:16px}

/* ── 일하는 방식 ───────────────────────────────────────── */
.prin{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-xxl) var(--s-xl);margin-top:var(--s-xxxl)}
@media(max-width:900px){.prin{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.prin{grid-template-columns:1fr}}
.prin .p{border-left:1px solid var(--ink);padding-left:var(--s-lg);display:flex;flex-direction:column;gap:var(--s-lg)}
.prin .t{font-size:19px;font-weight:700;line-height:1.35;color:var(--ink)}
/* 제목이 19px 인데 설명이 16px 이라 1.19배밖에 차이가 나지 않아, 둘이 같은
   무게로 읽혔습니다. 사이트의 다른 카드 블록은 1.4~1.6배입니다(솔루션의
   제안 카드 22/14, 도입 절차 20/14, 회사 소개의 원칙 24/15).
   15px 으로 낮춰 1.27배로 벌립니다. 15px 은 기술 상세의 세 칸 카드가
   같은 19px 제목 아래에서 쓰는 값입니다. */
.prin .d{font-size:15px;line-height:1.75;color:var(--charcoal)}

/* ── 우리가 증명한 것 ──────────────────────────────────── */
.proof{margin-top:var(--s-xxl);border-top:1px solid var(--divider-dark)}
.proof .r{display:grid;grid-template-columns:170px minmax(0,1fr);gap:var(--s-lg);
  padding:var(--s-lg) 0;border-bottom:1px solid var(--divider-dark);align-items:baseline}
@media(max-width:700px){.proof .r{grid-template-columns:1fr;gap:6px}}
.proof .who{font-size:15px;font-weight:700;color:var(--on-dark)}
.proof .what{font-size:16px;line-height:1.7;color:var(--on-dark-mute)}
.proof .what b{color:var(--on-dark);font-weight:700}

/* ── 합류 여정 ─────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-xl);margin-top:var(--s-xxl)}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-xl)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.steps .st{display:flex;flex-direction:column;gap:0;padding-top:var(--s-md);
  position:relative;border-top:0}
/* 네 줄이 제 차례가 되면 왼쪽에서 오른쪽으로 그어집니다. 테두리는 길이를 줄 수 없어
   같은 자리에 얇은 층을 하나 깔고 가로로 늘립니다. 본사 사이트의 도입 절차와 같은 방식입니다. */
.steps .st::before{content:"";position:absolute;top:0;left:0;width:100%;height:1px;
  background:var(--hairline-strong);transform:scaleX(0);transform-origin:left center;
  transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.steps .st.drawn::before{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){
  .steps .st::before{transition:none;transform:scaleX(1)}
}
.steps .no{font-family:var(--font-en);font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--ash);
  font-variant-numeric:tabular-nums}
.steps .t{font-size:18px;font-weight:700;line-height:1.3;color:var(--ink);margin-top:6px}
.steps .d{font-size:14px;line-height:1.7;color:var(--mute);margin-top:var(--s-lg)}

/* ── 일하는 곳 ───────────────────────────────────────────
   본사 사이트 회사 소개의 「우리 자리」와 같은 부품입니다. 값과 규격을 그대로 씁니다.
   선은 위가 아니라 왼쪽에 세웁니다. 선 다음에 여백을 두고 글이 시작하므로
   네 곳이 각각 한 덩어리로 읽힙니다. */
/* 자리가 셋입니다. 두 열로 두면 마지막 하나가 줄에 혼자 남으므로
   세 열로 세우고, 좁아질 때 곧바로 한 열로 갑니다. */
.off{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-xxl);margin-top:var(--s-xxxl)}
@media(max-width:900px){.off{grid-template-columns:1fr}}
.off .o{border-left:1px solid var(--hairline-strong);padding-left:var(--s-md)}
.off .k{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--mute)}
.off .t{font-size:22px;font-weight:700;line-height:1;color:var(--ink);margin-top:var(--s-xs)}
.off .d{font-size:14px;line-height:1.6;color:var(--mute);margin-top:var(--s-xs)}

/* ── 마무리 제안 ───────────────────────────────────────── */

.cta p{color:var(--on-dark-mute);max-width:52ch}

/* ── 포지션 상세 ───────────────────────────────────────── */
.ahead{background:var(--surface-dark);color:var(--on-dark);padding:180px 64px var(--s-xxxl)}
@media(max-width:900px){.ahead{padding:140px 24px 32px}}
.ahead .in{max-width:1152px;margin:0 auto}
.crumb{display:flex;flex-wrap:wrap;gap:var(--s-xs);align-items:center;font-size:12px;font-weight:700;
  letter-spacing:.06em;color:rgba(255,255,255,.5);margin-bottom:var(--s-xl)}
.crumb a{color:rgba(255,255,255,.5);transition:color .15s}
.crumb a:hover{color:var(--on-dark)}
.crumb .cur{color:var(--on-dark)}
.crumb .sep{color:rgba(255,255,255,.25)}
.amt{display:flex;flex-wrap:wrap;gap:var(--s-xs);align-items:center;margin-bottom:var(--s-lg)}
.amt span{font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--on-dark);
  border:1px solid rgba(255,255,255,.4);padding:4px 8px;line-height:1}
.amt span.now{background:var(--on-dark);color:var(--ink);border-color:var(--on-dark)}
.ahead h1{color:var(--on-dark)}
.ahead .lede{font-size:19px;line-height:1.7;color:var(--on-dark-mute);margin-top:var(--s-xl)}
.ahead .btns{margin-top:var(--s-xxl)}

.abody{background:var(--canvas);padding:var(--s-xxxl) 64px var(--s-section)}
@media(max-width:900px){.abody{padding:40px 24px 80px}}
.abody .in{max-width:1152px;margin:0 auto;display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--s-xxxl)}
@media(max-width:1023px){.abody .in{grid-template-columns:1fr;gap:var(--s-xl)}}
.toc{position:sticky;top:140px;align-self:start;display:flex;flex-direction:column;gap:var(--s-sm);
  border-top:1px solid var(--hairline-strong);padding-top:var(--s-sm)}
@media(max-width:1023px){.toc{position:static;flex-direction:row;flex-wrap:wrap;gap:var(--s-md)}}
.toc .lb{font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--ash)}
.toc a{font-size:14px;line-height:1.45;color:var(--mute);cursor:pointer;transition:color .15s}
.toc a:hover,.toc a.on{color:var(--ink)}

.prose{max-width:70ch}
.prose h2{font-size:28px;line-height:1.2;margin:var(--s-xxxl) 0 var(--s-md)}
.prose h2:first-child{margin-top:0}
@media(max-width:767px){.prose h2{font-size:23px}}
.prose p{font-size:17px;line-height:1.8;color:var(--charcoal);margin-bottom:var(--s-md)}
.prose p b{color:var(--ink);font-weight:700}
.prose p:last-child{margin-bottom:0}

/* 하는 일 — 세 갈래. 순서가 아니라 갈래이므로 번호를 붙이지 않습니다. */
.work{display:flex;flex-direction:column;margin:var(--s-lg) 0 0;border-top:1px solid var(--hairline-strong)}
.work .w{padding:var(--s-lg) 0;border-bottom:1px solid var(--hairline);display:flex;flex-direction:column;gap:var(--s-sm)}
.work .h{font-size:18px;font-weight:700;line-height:1.45;color:var(--ink)}
.work .h em{font-style:normal;display:block;font-size:13px;font-weight:700;letter-spacing:.04em;
  color:var(--ash);margin-bottom:6px}
.work p{font-size:16px;line-height:1.8;color:var(--charcoal);margin:0}
.work ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-sm)}
.work li{font-size:16px;line-height:1.75;color:var(--charcoal);
  display:grid;grid-template-columns:14px minmax(0,1fr);gap:var(--s-sm)}
.work li::before{content:"";width:6px;height:6px;background:var(--ink);margin-top:11px}

/* 자격 — 문장은 목록으로, 연구 주제는 칩으로 세웁니다. */
.reqs{list-style:none;margin:var(--s-lg) 0 0;padding:0;border-top:1px solid var(--hairline-strong)}
.reqs li{font-size:16px;line-height:1.7;color:var(--charcoal);padding:var(--s-md) 0;
  border-bottom:1px solid var(--hairline)}
.reqs li b{color:var(--ink);font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:var(--s-xs);margin:var(--s-lg) 0 0}
.chips span{font-size:14px;font-weight:600;line-height:1.3;color:var(--ink);
  border:1px solid var(--stone);padding:9px 12px;transition:border-color .15s}
.chips span:hover{border-color:var(--ink)}
.note{font-size:14px;line-height:1.7;color:var(--mute);margin-top:var(--s-md)}

.rel{border-top:1px solid var(--hairline-strong);margin-top:var(--s-xxxl);padding-top:var(--s-md)}
.rel .lb{display:block;font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--ash)}
.rel a{display:grid;grid-template-columns:minmax(0,1fr) 24px;gap:var(--s-md);align-items:baseline;
  padding:var(--s-md) 0;border-bottom:1px solid var(--hairline)}
.rel a:last-child{border-bottom:0}
.rel .h{font-size:17px;font-weight:700;line-height:1.4;color:var(--ink)}
.rel .m{display:block;font-size:13px;font-weight:400;color:var(--mute);margin-top:3px}
.rel a:hover .h{text-decoration:underline;text-underline-offset:4px}
.rel .ar{color:var(--mute);justify-self:end}

/* ── 지원서 ────────────────────────────────────────────── */
.formband{background:var(--canvas);padding:var(--s-xxxl) 64px var(--s-section)}
@media(max-width:900px){.formband{padding:40px 24px 80px}}
.formband .in{max-width:1152px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 320px;
  gap:var(--s-xxxl);align-items:start}
@media(max-width:900px){.formband .in{grid-template-columns:1fr;gap:var(--s-xxl)}}
.aform{display:flex;flex-direction:column;gap:var(--s-lg);max-width:640px}
.aform .f{display:flex;flex-direction:column;gap:var(--s-xs)}
.aform label{font-size:14px;font-weight:700;color:var(--ink)}
.aform label .req{color:var(--ink);margin-left:2px}
.aform .hint{font-size:13px;line-height:1.6;color:var(--mute)}
.aform input[type="text"],.aform input[type="email"],.aform input[type="tel"],.aform select,.aform textarea{
  font-family:inherit;font-size:16px;line-height:1.5;color:var(--ink);background:var(--canvas);
  border:1px solid var(--stone);border-radius:var(--r-xs);padding:13px 14px;width:100%;
  transition:border-color .15s}
.aform textarea{min-height:180px;resize:vertical;line-height:1.7}
.aform input:focus,.aform select:focus,.aform textarea:focus{border-color:var(--ink);
  outline:2px solid var(--ink);outline-offset:2px}
.aform select[data-empty]{color:var(--mute)}
.aform select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:40px}
.aform .err{font-size:13px;font-weight:700;color:var(--ink);border-left:2px solid var(--ink);padding-left:10px}
.aform .f.bad input,.aform .f.bad select,.aform .f.bad textarea{border-color:var(--ink)}
.filerow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-sm)}
.filebtn{display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;
  padding:11px 16px;border:1px solid var(--hairline-strong);border-radius:var(--r-xs);cursor:pointer;
  background:var(--canvas);color:var(--ink);transition:background-color .15s,color .15s}
.filebtn:hover{background:var(--ink);color:var(--canvas)}
.filename{font-size:14px;color:var(--mute);display:inline-flex;align-items:center;gap:8px}
.filename button{background:none;border:0;padding:0;font-size:15px;line-height:1;color:var(--mute);cursor:pointer}
.filename button:hover{color:var(--ink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.aform .send{align-self:flex-start;margin-top:var(--s-xs)}
.asum{border-top:1px solid var(--hairline-strong);padding-top:var(--s-md);display:flex;flex-direction:column;gap:var(--s-md);
  position:sticky;top:84px}
@media(max-width:900px){.asum{position:static}}
.asum .t{font-size:14px;font-weight:700;color:var(--ink)}
.asum ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-sm)}
.asum li{font-size:14px;line-height:1.65;color:var(--mute);display:grid;grid-template-columns:26px minmax(0,1fr);gap:var(--s-xs)}
.asum li i{font-style:normal;font-family:var(--font-en);font-size:12px;font-weight:700;color:var(--ash);
  font-variant-numeric:tabular-nums;line-height:1.9}
.asum .ct{font-size:14px;line-height:1.7;color:var(--mute);border-top:1px solid var(--hairline);padding-top:var(--s-md)}
.asum .ct a{font-weight:700;color:var(--ink);border-bottom:1px solid var(--stone)}
.asum .ct a:hover{border-bottom-color:var(--ink)}
.done{max-width:640px;border-top:2px solid var(--ink);padding-top:var(--s-lg);display:flex;flex-direction:column;gap:var(--s-md);align-items:flex-start}
.done h2{font-size:24px;line-height:1.2}
.done p{font-size:17px;line-height:1.75;color:var(--charcoal)}

/* ── 푸터 ──────────────────────────────────────────────── */

.foot .in{max-width:1152px;margin:0 auto;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;display:flex;flex-direction:column;gap:var(--s-md);align-items:flex-start}
.foot .fmap{grid-column:3 / span 2;display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:var(--s-md) var(--s-lg);align-content:flex-start}
@media(max-width:900px){
  
  
  .foot .fmap{grid-column:1 / span 2;margin-top:var(--s-xxl);justify-content:flex-start;gap:var(--s-md) var(--s-xl)}
}
.foot .brand{display:flex;align-items:center;gap:10px}

.foot .fmap a{font-size:15px;font-weight:700;line-height:1.4;color:var(--on-dark-mute);transition:color .15s}

.foot .faddr .cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-lg) var(--s-xl)}
/* ── 누를 자리 ─────────────────────────────────────────────
   WCAG 2.5.8 최소 24px, 애플·구글 지침 44~48px. 글자 크기와 밑줄 위치는
   그대로 두고 비어 있는 층을 덧대어 누를 면적만 넓힙니다.
   세로로 붙은 목록은 면적이 겹치지 않도록 줄 간격도 함께 벌립니다.
   마우스를 쓰는 기기에는 걸지 않습니다. */
@media(pointer:coarse){
  .foot .fmap a,.foot .finfo a,.toc a,.crumb a{position:relative}
  .foot .fmap a::after,.foot .finfo a::after,.toc a::after,.crumb a::after{
    content:"";position:absolute;left:0;right:0;top:50%;
    transform:translateY(-50%);height:44px}
  .foot .fmap{row-gap:var(--s-xl)}
  .foot .finfo{gap:var(--s-md)}
  .toc{gap:var(--s-xl)}
}

/* ── 화면 전환 ─────────────────────────────────────────── */
/* 문서마다 화면이 하나뿐이라 늘 보입니다. */

[hidden]{display:none!important}

/* ── 화면에 들어오며 나타나기 ────────────────────────────────
   밴드 안의 부품이 아래에서 14px 올라오며 옅게 나타납니다.
   자바스크립트가 화면 밖에 있는 덩어리에만 이 표시를 붙이므로,
   표시가 붙지 않은 것은 처음부터 그대로 보입니다. */

/* ── 포지션 설명이 줄어드는 단계 ─────────────────────────────
   넓은 화면에서는 한 줄로 남는 폭을 다 씁니다. 좁아지면 두 줄까지 늘리고,
   두 줄로도 뜻이 남지 않는 폭에서는 아예 감춥니다. 줄만 자르는 것보다
   비우는 편이 낫고, 자세한 설명은 포지션 화면에 그대로 있습니다. */
@media(max-width:900px){
  .job .d{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;
    -webkit-line-clamp:2;line-clamp:2;overflow:hidden}
}
@media(max-width:600px){
  .job .d{display:none}
}

/* ── 사진 ──────────────────────────────────────────────────
   기존 채용 사이트에 있던 사진을 그대로 씁니다. 사진은 규칙이 아니라 요소에
   직접 답니다. 배경 규칙으로 넣으면 다른 배경 규칙에 덮여 사라집니다. */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
/* 밝은 구간에서도 흰 글씨가 읽히도록 어둠막을 한 겹 덮습니다.
   움직임을 줄이도록 설정한 분에게는 영상이 서 있으므로 조금 더 짙게 합니다. */
.hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.6);z-index:-1}
@media(prefers-reduced-motion:reduce){.hero::after{background:rgba(0,0,0,.66)}}

/* 네 장이 모두 7:5라 자르지 않고 원래 비율 그대로 세웁니다.
   사진이 왼쪽 선을 대신하므로 선은 걷습니다. */
.prin .p{border-left:0;padding-left:0;gap:var(--s-xs)}
.prin .ph{display:block;aspect-ratio:7/5;background:var(--surface-soft);overflow:hidden}
.prin .ph img{display:block;width:100%;height:100%;object-fit:cover}
/* 제목과 설명은 한 덩어리이고, 사진은 그 위에 따로 놓인 것입니다. 그러니
   제목에서 설명까지가 사진에서 제목까지보다 좁아야 합니다. 예전에는 반대로
   사진→제목 16px, 제목→설명 20px 이라 설명이 제목에서 떨어져 나왔습니다.
   칸 사이를 8px 로 두고 제목에만 8px 을 얹어, 사진→제목 16px,
   제목→설명 8px 으로 뒤집습니다. 제목이 두 줄로 접히는 칸이 많아
   12px 으로도 설명이 제목에 붙어 읽히지 않았습니다. */
.prin .t{margin-top:var(--s-xs)}

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

/* Careers 는 로고타입 뒤에 한 칸 띄어 붙입니다. */
.nav .mark .sfx{margin-left:2px}

/* 로고 색. 검은 밴드 위에 얹혔을 때에는 상단 막대와 함께 뒤집힙니다. */
.nav .mark{color:var(--ink)}

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

/* ── 제목 아래 도입문을 제목과 함께 줄입니다 ──────────────────
   채용은 base.css 를 읽지 않고 이 파일 한 벌만 씁니다. 그래서 본사 쪽에
   넣은 같은 규칙이 여기에는 닿지 않아 따로 적습니다. 본사와 값이 어긋나면
   두 사이트의 인상이 갈리므로 같은 구간과 같은 값을 씁니다.

   제목은 clamp 로 줄어드는데 도입문은 고정이라, 좁은 화면에서 둘의 차이가
   사라집니다. 768px 위로는 예전 값 그대로입니다.

   본문을 읽는 자리인 .prose p 는 건드리지 않습니다. */
.hero .subtitle,.hd .subtitle{font-size:clamp(16px, 12.9px + 0.82vw, 19.2px)}
.ahead .lede,.ihead .sub,.nhead .sub,.hero .lede{font-size:clamp(16px, 13.1px + 0.77vw, 19px)}
.bhead .lede,.plede,.fcopy .d,.art .lede,.iface .d,.rec .sb{font-size:clamp(15px, 13.1px + 0.51vw, 17px)}
.cta p{font-size:clamp(15px, 12.1px + 0.77vw, 18px)}

/* 아래 @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}
}