/* YOUR UN!CORN careers — draft v0.2 (브랜드 가이드 2601 기준) */
:root {
  --red: #e60012;          /* 메인 컬러 C0 M100 Y100 K0 / R230 G0 B18 */
  --black: #000000;
  --ink: #111111;
  --white: #ffffff;
  --paper: #f5f5f5;        /* 가이드 엽서·명함 크림톤 */
  --line: #e2e2e2;
  --mute: #6f6b64;
  --note-bg: #fff6c9;
  --note-ink: #4a3d00;
  --display: "Lexend Deca", "Pretendard Variable", sans-serif;
  --body: "Pretendard Variable", -apple-system, sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1320px;
  /* ── 전 페이지 공통 토큰 ── */
  --m: clamp(20px, 3.4vw, 64px);                 /* 좌우 여백 = 헤더 여백 */
  --t-display: clamp(34px, 5.4vw, 108px);        /* 섹션 큰 제목 (대문자) */
  --t-title: clamp(26px, 3.5vw, 64px);           /* 한 화면에 들어가야 하는 제목 */
  --t-card: clamp(20px, 2.3vw, 40px);            /* 카드 제목 */
  --t-ko: clamp(16px, 1.4vw, 22px);              /* 제목 아래 한글 한 줄 · 소개문 */
  --t-body: clamp(14px, 1.1vw, 17px);            /* 카드 · 목록 본문 */
  --w-display: 700; --ls-display: -.01em; --lh-display: 1.04;
  --w-ko: 500; --ls-ko: -.02em;
}
@media (max-width: 900px) { :root { --m: 16px; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(80px, 12vw, 160px) 0; position: relative; }
.section--black { background: var(--black); color: var(--white); }
.section--red { background: var(--red); color: var(--white); }
.section--paper { background: var(--paper); }

.display {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -.02em;
  font-size: clamp(40px, 7vw, 112px);
}
.display--md { font-size: clamp(34px, 5vw, 76px); }
.display--sm { font-size: clamp(26px, 3.2vw, 46px); }
/* 영문은 Lexend Deca (라틴 전용 서체라 한글은 자동으로 Pretendard) */
.en, .kicker, .btn-recruit, .gnb nav, .lang { font-family: var(--display); }
/* 한글이 들어간 요소는 전부 Pretendard Variable (영문 서체 스택에 섞이지 않게) */
.ko, .ko-title, .lead, .note, .tabs [role=tab], .btn { font-family: var(--body) !important; }
.kicker {
  font-size: 14px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--red); margin-bottom: 20px; display: block;
}
.section--red .kicker { color: var(--white); opacity: .8; }
.lead { font-size: clamp(17px, 1.6vw, 21px); color: var(--mute); max-width: 640px; margin-top: 24px; }
.section--black .lead, .section--red .lead { color: rgba(255,255,255,.75); }
.ko-title { font-size: clamp(22px, 2.4vw, 32px); font-weight: 600; margin-top: 20px; letter-spacing: -.02em; }
.placeholder {
  background: repeating-linear-gradient(135deg, #ddd 0 1px, transparent 1px 12px), #ececec;
  color: #8a8a8a; display: grid; place-items: center; text-align: center;
  font-size: 13px; letter-spacing: .04em; border-radius: 4px; min-height: 200px; padding: 16px;
}
.section--black .placeholder { background: repeating-linear-gradient(135deg, #2a2a2a 0 1px, transparent 1px 12px), #1a1a1a; color: #777; }

/* ---------- header ---------- */
.gnb {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: 32px;
  padding: 18px var(--gutter);
  mix-blend-mode: normal;
  transition: background .3s, color .3s;
}
.gnb.is-solid { background: rgba(255,255,255,.94); backdrop-filter: blur(10px); color: var(--ink); border-bottom: 1px solid var(--line); }
.gnb.on-dark:not(.is-solid) { color: var(--white); }
/* 로고: 원본 PNG를 마스크로 써서 배경에 따라 레드/화이트 반전 (가이드: 흰 배경=레드, 레드·어두운 배경=화이트) */
.logo {
  display: block; width: 104px; aspect-ratio: 577 / 215; flex: none;
  background: var(--red);
  -webkit-mask: url("/assets/careers-logo.png") center / contain no-repeat; mask: url("/assets/careers-logo.png") center / contain no-repeat;
  font-size: 0; color: transparent;
}
.gnb.on-dark:not(.is-solid) .logo, .footer .logo, .section--red .logo, .section--black .logo { background: var(--white); }
.gnb nav { display: flex; gap: 28px; margin-left: 24px; font-weight: 500; font-size: 17px; }
.gnb nav a { opacity: .6; transition: opacity .2s; }
.gnb nav a:hover, .gnb nav a[aria-current="page"] { opacity: 1; }
.gnb .ext::after { content: " ↗"; font-size: 12px; }
.gnb-right { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.lang { display: flex; gap: 10px; font-size: 13px; font-weight: 600; }
.lang button { opacity: .45; }
.lang button.is-on { opacity: 1; }
.btn-recruit {
  background: var(--red); color: var(--white); font-weight: 500; font-size: 16px;
  padding: 11px 22px; border-radius: 999px; transition: transform .2s;
}
.btn-recruit:hover { transform: translateY(-2px); }
.menu-toggle { display: none; font-size: 22px; }

/* ---------- marquee ---------- */
.marquee { overflow: hidden; white-space: nowrap; border-block: 1px solid currentColor; padding: 18px 0; }
.marquee__track { display: inline-flex; animation: marquee 28s linear infinite; }
.marquee__track span { font-family: var(--display); font-size: clamp(32px, 5vw, 72px); text-transform: uppercase; padding-right: .6em; }
.marquee__track span.dot { color: var(--red); padding-right: .6em; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- common bits ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1.5px solid currentColor; padding: 14px 26px; border-radius: 999px;
  font-weight: 500; font-size: 16px; transition: background .2s, color .2s;
}
.btn:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.section--red .btn:hover, .section--black .btn:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn--solid { background: var(--red); border-color: var(--red); color: var(--white); }

.reveal { opacity: 0; transform: translateY(40px); transition: opacity .9s ease, transform .9s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- planning notes ---------- */
.note {
  position: relative; margin: 28px 0 0; max-width: 560px;
  background: var(--note-bg); color: var(--note-ink);
  border-left: 3px solid #e2b600; border-radius: 2px;
  padding: 12px 14px 12px 16px; font-size: 13px; line-height: 1.6;
  font-family: var(--body); text-transform: none; letter-spacing: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.note b { display: block; font-size: 11px; letter-spacing: .08em; margin-bottom: 4px; color: #8a6d00; }
.note { max-width: 680px; }
.note b.check { margin-top: 10px; color: #b3261e; }
.note .check-list { padding-left: 16px; color: #6b2a1f; }
.note-strip { background: var(--black); padding: 96px 0 24px; }
.note--page { max-width: 880px; margin: 0; }
body.notes-off .note-strip { display: none; }
.note ul { padding-left: 16px; }
.note--float { position: absolute; right: var(--gutter); top: 96px; max-width: 380px; z-index: 5; margin: 0; }
body.notes-off .note { display: none; }
.note-toggle {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  background: var(--ink); color: var(--white); font-size: 13px; font-weight: 600;
  padding: 10px 16px; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

/* ---------- footer ---------- */
.footer { background: var(--black); color: rgba(255,255,255,.6); padding: 56px 0; font-size: 14px; }
.footer .wrap { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: end; }
.footer .logo { color: var(--white); }

@media (max-width: 860px) {
  .gnb { gap: 12px; }
  .gnb nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; margin: 0; background: var(--white); color: var(--ink); border-bottom: 1px solid var(--line); }
  .gnb nav.is-open { display: flex; }
  .gnb nav a { padding: 16px var(--gutter); opacity: 1; border-top: 1px solid var(--line); }
  .menu-toggle { display: block; }
  .lang { display: none; }
  .btn-recruit { padding: 9px 16px; font-size: 13px; }
  .note--float { position: relative; right: auto; top: auto; margin: 0 var(--gutter) 24px; }
}

/* 영문 폰트 선택 (코멘트 모드 전용) */
.font-pick {
  position: fixed; right: 16px; bottom: 64px; z-index: 90; display: flex; align-items: center; gap: 4px;
  padding: 5px 5px 5px 14px; border-radius: 999px; background: var(--ink); color: var(--white);
  font-family: var(--body); font-size: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.font-pick span { margin-right: 6px; opacity: .7; font-weight: 500; }
.font-pick button { padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; color: rgba(255,255,255,.75); }
.font-pick button.is-on { background: var(--white); color: var(--ink); }
.font-pick button em { font-style: normal; margin-left: 4px; padding: 2px 6px; border-radius: 999px; background: var(--red, #e60012); color: #fff; font-size: 10px; font-weight: 600; }
.dice-pick { bottom: 112px; }   /* 영문 폰트 선택 바로 위 */
/* Viga는 굵기가 하나뿐 → 가짜 볼드 합성 막고 원래 굵기로 (한글은 Pretendard 굵기 그대로) */
html[data-font="viga"] { font-synthesis: none; }

/* 굵기 전반 한 단계 낮춤: 기본 굵은 글씨(b, strong)도 700 → 600 */
b, strong { font-weight: 600; }
/* 폰트·주사위 선택은 검토용 도구 — 모바일에선 화면을 가리므로 숨김 */
@media (max-width: 900px) { .font-pick, .dice-pick { display: none !important; } }

/* Company — 레이아웃 v3
   구조 참고: patternbreak.ing (12컬럼 그리드 라인, 모노 라벨 + 큰 에디토리얼 문장, 상하 거대 타이포 히어로,
   계단식 숫자 밴드, 문장 주변 알약 칩, 둥근 CTA 블록, 하단 고정 알약 내비)
   컬러·서체는 브랜드 가이드(레드 #E60012 / 블랙 / 화이트 / 크림)와 확정 서체(Lexend Deca·Pretendard)로 적용 */
:root {
  --mono: var(--display); /* 라벨·메뉴도 선택된 영문 폰트 하나로 통일 (모노 폰트 사용 안 함) */
  --cream: #f5f5f5;
  --ink-soft: rgba(255,255,255,.62);
  /* 좌우 바깥 여백 — 레퍼런스 비율(1440에서 168px, 콘텐츠 폭 1104px ≈ 화면의 11.7%) */
  --grid-m: var(--m);   /* 헤더 · 컬쳐 · 리쿠르트와 같은 좌우 여백 */
  --gutter: var(--grid-m);
  --col: calc((100% - var(--grid-m) * 2) / 12);
}
body.pb { background: #000; }
/* 기존 .wrap(코멘트·원형 섹션 제목 등)도 같은 여백으로 */
body.pb .wrap { max-width: none; padding-left: var(--grid-m); padding-right: var(--grid-m); }

/* ── 12컬럼 그리드 ── */
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); padding: 0 var(--grid-m); column-gap: 0; }
/* 어두운 섹션 바탕의 세로 그리드 라인 */
.gridlines { position: relative; }
.gridlines::before { display: none;   /* 배경 세로 라인 사용 안 함 */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(to right, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: var(--col) 100%; background-position: var(--grid-m) 0; background-repeat: repeat-x;
  -webkit-mask: linear-gradient(to right, transparent var(--grid-m), #000 var(--grid-m), #000 calc(100% - var(--grid-m) + 1px), transparent calc(100% - var(--grid-m) + 1px));
          mask: linear-gradient(to right, transparent var(--grid-m), #000 var(--grid-m), #000 calc(100% - var(--grid-m) + 1px), transparent calc(100% - var(--grid-m) + 1px));
}
.gridlines.is-light::before { background-image: linear-gradient(to right, rgba(0,0,0,.07) 1px, transparent 1px); }
.gridlines > * { position: relative; z-index: 1; }

/* ── 모노 라벨 ── */
.mono { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1.5; }

/* ── 상단 고정 바: 로고(좌) + 언어(우) ── */
.ptop { position: fixed; inset: 0 0 auto 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; padding: 20px var(--head-m); pointer-events: none; }
:root { --head-m: var(--m); }   /* 헤더 좌우 여백 — 전 페이지 공통(컬쳐·리쿠르트 본문 여백과 같음) */
@media (max-width: 900px) { :root { --head-m: 16px; } }
.ptop > * { pointer-events: auto; }
.ptop .logo { width: 96px; background: var(--white); transition: background .3s; }
body.on-light .ptop .logo { background: var(--red); }
.ptop .lang { position: relative; color: var(--white); transition: color .3s; }
.lang__btn { display: flex; align-items: center; gap: 5px; padding: 6px 0; font: 500 15px/1 var(--display); letter-spacing: -.01em; color: inherit; cursor: pointer; }
.lang__globe { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.lang__cur { width: 22px; text-align: left; }
.lang__menu { position: absolute; top: 100%; right: 0; margin-top: 8px; width: 52px; padding: 8px 0; border-radius: 6px; background: var(--white); box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.lang__menu[hidden] { display: none; }
.lang__opt { display: block; padding: 2px 8px; text-align: center; font: 500 14px/1.4 var(--display); letter-spacing: -.01em; color: #999; transition: color .2s; }
.lang__opt:hover { color: #333; }
.lang__opt.is-on { font-weight: 600; color: #333; }
body.on-light .ptop .lang { color: var(--ink); }

/* ── 상단 가운데 알약 내비 ── */
.ptop .pnav {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 10px;
  background: #ebebeb;   /* 그림자 없이 배경과 살짝 다른 채움색으로 구분 */
}
.pnav a { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); padding: 10px 16px; border-radius: 6px; line-height: 1; transition: background .2s; }
.pnav a:hover, .pnav a[aria-current="page"] { background: rgba(0,0,0,.07); }
.pnav .pnav__recruit { background: var(--red); color: var(--white); margin-left: 6px; }
.pnav .pnav__recruit:hover { background: #c4000f; }
.pnav .pnav__recruit[aria-current="page"] { background: var(--red); box-shadow: inset 0 0 0 2px rgba(0,0,0,.15); }
.pnav .ext::after { content: " ↗"; }

/* ── 01 히어로: 위아래 거대 타이포 + 가운데 브랜드 영상 ── */
.pb-hero { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; color: var(--white); background: #000; }
.pb-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .72; }
.pb-hero__video { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: #000; }
.pb-hero__video iframe { opacity: 0; transition: opacity .8s ease; }
.pb-hero__video.is-on iframe { opacity: .72; }
.pb-hero__video iframe { position: absolute; left: 50%; top: 50%; width: max(100%, 177.78svh); height: max(100%, 56.25vw); transform: translate(-50%, -50%) scale(1.2); border: 0; } /* 16:9 영상을 꽉 채우고, 위(제목)·아래(재생바) 플레이어 UI는 화면 밖으로 (자막은 JS로 끔) */
.pb-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.05) 32%, rgba(0,0,0,.05) 68%, rgba(0,0,0,.6) 100%); pointer-events: none; }
.pb-hero__line {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 2; text-align: center; white-space: nowrap;
  font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: -.035em; line-height: .9;
  font-size: 6vw; display: block; width: max-content; margin: 0 auto;
}
.pb-hero__line--top { top: max(104px, 12vh); }
.pb-hero__line--bottom { bottom: max(48px, 7vh); }
.pb-hero__ko { position: absolute; left: var(--head-m); right: var(--head-m); bottom: max(40px, 6vh); word-break: keep-all; z-index: 2; text-align: center; font-size: var(--t-ko); font-weight: var(--w-ko); letter-spacing: var(--ls-ko); text-shadow: 0 2px 20px rgba(0,0,0,.35); }
/* 한 줄 문장: 왼쪽 문장 ── 선 ── 오른쪽 문장 (화면 가운데, 헤더 여백과 같은 좌우 여백) */
.pb-hero__row {
  position: absolute; left: var(--head-m); right: var(--head-m); top: 50%; transform: translateY(-50%); z-index: 2; margin: 0;
  display: flex; align-items: center; gap: clamp(14px, 1.4vw, 28px);
  font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: clamp(18px, 2.35vw, 50px); line-height: 1; letter-spacing: -.01em; white-space: nowrap;   /* 사이트 제목들과 같은 스타일(대문자·600) */
  text-shadow: 0 2px 24px rgba(0,0,0,.25);
}
.pb-hero__rule { flex: 1; min-width: 24px; height: max(2px, .06em); background: currentColor; }
/* 첫 진입 모션: 앞 문장 → 선이 왼쪽부터 길어짐 → "And make it real." 글자가 차례로 올라옴 */
.pb-hero__a { display: inline-block; opacity: 0; transform: translateY(.35em); transition: opacity .8s ease .15s, transform 1s cubic-bezier(.2,.7,.2,1) .15s; }
.pb-hero__rule { transform: scaleX(0); transform-origin: left center; transition: transform 1.3s cubic-bezier(.65,0,.25,1) .7s; }
.pb-hero__b { display: inline-flex; overflow: hidden; padding: .08em 0 .12em; margin: -.08em 0 -.12em; }
.pb-hero__b .ch { display: inline-block; white-space: pre; transform: translateY(110%); opacity: 0; transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .5s ease; transition-delay: calc(1.85s + var(--i) * 32ms); }
.pb-hero.is-go .pb-hero__a { opacity: 1; transform: none; }
.pb-hero.is-go .pb-hero__rule { transform: scaleX(1); }
.pb-hero.is-go .pb-hero__b .ch { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .pb-hero__a, .pb-hero__rule, .pb-hero__b .ch { transition: none; } }
@media (max-width: 900px) {
  .pb-hero__row { flex-direction: column; align-items: flex-start; gap: 14px; font-size: 9vw; white-space: normal; }
  .pb-hero__rule { flex: none; width: 40%; }
  .pb-hero__row span:last-child { align-self: flex-end; }
}
.pb-hero .note--float { z-index: 5; top: auto; bottom: calc(max(48px, 7vh) + 13vw); right: var(--grid-m); max-width: 360px; }

/* ── 에디토리얼: 모노 라벨(1~3열) + 큰 문장(4~11열) ── */
.pb-statement { padding: clamp(120px, 16vw, 240px) 0; color: var(--white); background: #000; }
.pb-statement.is-light { background: var(--cream); color: var(--ink); }
.pb-statement .mono { grid-column: 1 / 4; padding-top: .9em; }
.pb-statement__body { grid-column: 4 / 12; }
.pb-big { font-family: var(--display); font-weight: 500; font-size: clamp(30px, 3.9vw, 56px); line-height: 1.2; letter-spacing: -.015em; }
.pb-big--caps { text-transform: uppercase; font-weight: 600; letter-spacing: -.02em; line-height: 1.05; }
.pb-ko { margin-top: 28px; font-size: var(--t-ko); font-weight: var(--w-ko); line-height: 1.5; letter-spacing: var(--ls-ko); }
.pb-statement:not(.is-light) .pb-ko { color: var(--ink-soft); }
.pb-statement .note { margin-top: 40px; }
/* 흰 배경에서 스크롤 진행에 맞춰 점점 검정으로 (--dk: 0 → 1, main.js) */
.pb-statement--darken { --dk: 0; background: color-mix(in srgb, #000 calc(var(--dk) * 100%), #fff); color: color-mix(in srgb, #fff calc(var(--dk) * 100%), var(--ink)); }
/* 비전: 가운데 정렬 (라벨 위, 문장 아래) */
.pb-statement--darken { padding: clamp(200px, 24vw, 360px) 0 0; height: calc(clamp(200px, 24vw, 360px) + 170vh); }   /* 위 섹션과의 간격 넓게 + 문장이 보인 뒤 잠시 머무는 스크롤 구간 */
.pb-statement--darken .g12 { position: sticky; top: 0; height: 100vh; height: 100svh; align-content: center; }   /* 문장이 화면 가운데 고정된 채 스크롤이 묵직하게 지나감 */
.pb-statement--darken .g12 { text-align: center; }
.pb-statement--darken .mono { grid-column: 1 / -1; padding-top: 0; margin-bottom: 28px; }
.pb-statement--darken .note { margin-left: auto; margin-right: auto; text-align: left; }
/* 배경이 다 어두워지면 라벨 → 문장 한 줄씩 → 한글 순서로 천천히 올라옴 (is-show: main.js) */
.vis-title { margin: 0; font-family: var(--display); font-weight: var(--w-display); text-transform: uppercase; font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }   /* 아래 Born in Korea 제목과 같은 크기 */
.vis-l { display: block; overflow: hidden; padding: .04em 0 .06em; }
.vis-l > span { display: block; white-space: nowrap; transform: translateY(105%); transition: transform 1.6s cubic-bezier(.77, 0, .18, 1); }
.pb-statement--darken.is-show .vis-l > span { transform: none; }
.pb-statement--darken.is-show .vis-l:nth-child(1) > span { transition-delay: .15s; }
.pb-statement--darken.is-show .vis-l:nth-child(2) > span { transition-delay: .75s; }
.pb-statement--darken.is-show .vis-l:nth-child(3) > span { transition-delay: 1.2s; }
.pb-statement--darken .vis-line { opacity: 0; transform: translateY(32px); transition: opacity 1.4s cubic-bezier(.77, 0, .18, 1), transform 1.6s cubic-bezier(.77, 0, .18, 1); }
.pb-statement--darken.is-show .vis-line { opacity: 1; transform: none; }
.pb-statement--darken.is-show p.vis-line { transition-delay: 1.8s; }
.pb-statement--darken .pb-statement__body { grid-column: 1 / -1; }
@media (max-width: 900px) { .vis-l > span { white-space: normal; } }
@media (prefers-reduced-motion: reduce) { .vis-l > span { transition: none; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pb-statement--darken .vis-line { transition: none; opacity: 1; transform: none; } }
.pb-statement--darken .pb-ko { color: color-mix(in srgb, var(--ink-soft) calc(var(--dk) * 100%), #555); }
.pb-float-card { grid-column: 9 / 13; margin-top: 64px; aspect-ratio: 1; border-radius: 10px; min-height: 0; }

/* ── 03 Reimagine: 붉은 거대 문구 사이 모델컷 + 칩 ── */
.pb-reimagine { position: relative; min-height: 100vh; padding: clamp(80px, 10vw, 140px) 0 clamp(80px, 10vw, 140px); color: var(--white); background: #000; overflow: hidden; }
.pb-reimagine__line { text-align: center; white-space: nowrap; color: var(--red); font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: -.035em; line-height: .92; font-size: 6vw; position: relative; z-index: 3; width: max-content; margin: 0 auto; }
.pb-collage { position: relative; height: clamp(420px, 44vw, 640px); margin: clamp(-40px, -2vw, -16px) auto; max-width: 1100px; }
.pb-collage img { position: absolute; width: clamp(150px, 19vw, 280px); aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.pb-collage img:nth-of-type(1) { left: 12%; top: 16%; transform: rotate(-4deg); }
.pb-collage img:nth-of-type(2) { left: 50%; top: 4%; transform: translateX(-50%); z-index: 2; width: clamp(180px, 23vw, 340px); }
.pb-collage img:nth-of-type(3) { right: 12%; top: 18%; transform: rotate(4deg); }
.chip {
  position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 14px 20px; border-radius: 10px; font-family: var(--display); font-size: clamp(15px, 1.4vw, 22px); font-weight: 500; line-height: 1.2;
  background: var(--white); color: var(--ink); box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.chip--red { background: var(--red); color: var(--white); }
.chip--cream { background: var(--cream); }
.chip--dark { background: #1b1b1b; color: var(--white); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.chip s { text-decoration-color: var(--red); text-decoration-thickness: 2px; opacity: .7; }
.pb-collage .chip:nth-of-type(1) { left: 2%; top: 58%; }
.pb-collage .chip:nth-of-type(2) { left: 41%; bottom: 6%; }
.pb-collage .chip:nth-of-type(3) { right: 1%; top: 64%; }
.pb-collage .chip:nth-of-type(4) { left: 6%; top: 4%; }
.pb-collage .chip:nth-of-type(5) { right: 4%; top: 6%; }
.pb-reimagine__foot { text-align: center; margin-top: 36px; position: relative; z-index: 3; }
.pb-reimagine__foot .pb-ko { color: var(--white); margin-top: 0; }
.pb-reimagine__foot .mono { margin-top: 16px; color: var(--ink-soft); }
.pb-reimagine .note { margin: 40px auto 0; }

/* ── 04 성과: 계단식 숫자 밴드 ── */
.pb-bands { padding-bottom: clamp(80px, 10vw, 140px); background: #000; }
.pb-band {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;   /* 글·숫자 한 줄 배치, 숫자는 절대 안 잘림 */
  min-height: clamp(130px, 11vw, 176px); padding: 0 clamp(24px, 4vw, 72px) 0 clamp(24px, 6vw, 110px); color: var(--ink);   /* 얇게 */
}
.pb-band:nth-child(1) { background: var(--red); color: var(--white); width: 42%; }   /* 계단식(아래로 갈수록 넓게): 42 → 61 → 80 → 100 */
.pb-band:nth-child(2) { background: var(--white); width: 61%; }
.pb-band:nth-child(3) { background: var(--cream); width: 80%; }
.pb-band:nth-child(4) { background: #1b1b1b; color: var(--white); width: 100%; }
.pb-band__text { flex: 1 1 auto; min-width: 0; max-width: 34ch; padding-left: calc(var(--col) * 0.35); font-size: 16px; line-height: 1.5; }
.pb-band__text b { font-weight: 600; }
.pb-band__text .mono { display: block; margin-top: 10px; opacity: .7; }
/* 등장: 띠가 왼쪽에서 오른쪽으로 차례로 펼쳐짐(계단이 한 칸씩 생김) → 글자는 뒤따라 나타남 */
.pb-band { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.65, 0, .25, 1); transition-delay: calc(var(--n, 0) * .16s); }
.pb-bands.is-in .pb-band { clip-path: inset(0 0 0 0); }
.pb-band > * { opacity: 0; transform: translateX(-16px); transition: opacity .6s ease, transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--n, 0) * .16s + .55s); }
.pb-bands.is-in .pb-band > * { opacity: 1; transform: none; }
.pb-band:nth-child(1) { --n: 0; } .pb-band:nth-child(2) { --n: 1; } .pb-band:nth-child(3) { --n: 2; } .pb-band:nth-child(4) { --n: 3; }
@media (prefers-reduced-motion: reduce) { .pb-band, .pb-band > * { transition: none; } }
.pb-band__num { flex: none; white-space: nowrap; padding-right: calc(var(--col) * 0.5); font-family: var(--display); font-weight: 500; font-size: clamp(64px, 7.4vw, 120px); line-height: 1; letter-spacing: -.03em; }
/* 띠 사이 틈 없음: 1px 겹쳐 붙임 */
.pb-band + .pb-band { margin-top: -1px; }
.pb-bands .note { margin: 40px var(--grid-m) 0; }

/* ── 05 기사: 헤드라인 주변 알약 칩 ── */
.pb-press { position: relative; padding: clamp(120px, 14vw, 200px) 0; background: #000; color: var(--white); overflow: hidden; }
.pb-press__body { grid-column: 3 / 11; position: relative; }
.pb-press__head { font-family: var(--display); font-weight: 500; font-size: clamp(28px, 3.6vw, 52px); line-height: 1.22; letter-spacing: -.015em; color: rgba(255,255,255,.42); }
.pb-press__head a { color: var(--white); text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 3px; text-underline-offset: 8px; transition: color .2s; }
.pb-press__head a:hover { color: #ffd9dc; }
.pb-press__head .ko { font-family: var(--body); font-weight: 600; letter-spacing: -.03em; }
.pb-press .chip { position: absolute; }
/* 칩은 헤드라인을 가리지 않도록 문장 위·아래 바깥에 흩어 배치 */
.pb-press__body { padding: 96px 0; }
.pb-press .chip:nth-of-type(1) { left: -8%; top: 8px; }
.pb-press .chip:nth-of-type(2) { right: -6%; top: 36px; }
.pb-press .chip:nth-of-type(3) { left: 4%; bottom: 20px; }
.pb-press .chip:nth-of-type(4) { right: -2%; bottom: 0; }
.pb-press__photos { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(12, 1fr); margin-top: clamp(64px, 7vw, 110px); }
.pb-press__photos figure { margin: 0; }
.pb-press__photos figure:nth-child(1) { grid-column: 2 / 7; }
.pb-press__photos figure:nth-child(2) { grid-column: 8 / 12; margin-top: 80px; }
.pb-press__photos .placeholder { aspect-ratio: 4 / 3; border-radius: 10px; min-height: 0; }
.pb-press__photos figcaption { margin-top: 12px; color: var(--ink-soft); }
.pb-press .note { grid-column: 1 / 13; margin-top: 40px; }
.pb-rail { background: var(--white); padding: 28px 0; overflow: hidden; }
.pb-rail .marquee__track { animation-duration: 90s; align-items: center; }   /* 같은 로고 묶음 6개 → 절반(3묶음)만큼 흐른 뒤 이어져 끊김 없음 */
.pb-rail .marquee__track img { height: 24px; width: auto; max-width: 126px; object-fit: contain; margin-right: 80px; mix-blend-mode: multiply; }
.pb-rail .marquee__track img[src*="kurly"] { height: 36px; }
.pb-rail + .wrap .note, .pb-rail-note { margin: 24px var(--grid-m) 0; }

/* ── 08 CTA: 둥근 레드 블록 ── */
/* 마지막 섹션: 빨간 면 전체 — 가운데 정렬 제목 · 한글 한 줄 · 검정 알약 버튼 */
.pb-next { position: relative; overflow: hidden; isolation: isolate; background: var(--red); color: var(--white); text-align: center; padding: clamp(56px, 5.5vw, 85px) var(--grid-m) clamp(45px, 4.5vw, 70px); }   /* 섹션 높이 절반 */
.pb-next__canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; pointer-events: none; }   /* 배경 유니콘 오브제 (unicorn3d.js) */
.pb-next__title { margin: 0; font-family: var(--display); font-weight: var(--w-display); text-transform: uppercase; font-size: var(--t-title); line-height: 1.2; letter-spacing: var(--ls-display); }
.pb-next__ko { margin: clamp(45px, 5.5vw, 80px) 0 0; font-size: var(--t-ko); font-weight: var(--w-ko); letter-spacing: var(--ls-ko); }
.pb-next__btn { display: inline-flex; align-items: center; justify-content: center; margin-top: clamp(32px, 4vw, 60px); padding: 20px 34px; border-radius: 999px; background: #000; color: var(--white);
  font-family: var(--display); font-weight: 500; text-transform: uppercase; font-size: clamp(16px, 1.5vw, 22px); letter-spacing: .01em; transition: background .25s, color .25s; }
.pb-next__btn:hover { background: var(--white); color: #000; }
.pb-cta { background: var(--cream); padding: clamp(80px, 8vw, 120px) var(--grid-m) clamp(120px, 12vw, 160px); }
.pb-cta__box { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; background: var(--red); color: var(--white); border-radius: 10px; padding: clamp(32px, 4vw, 64px); }
.pb-cta__title { grid-column: 1 / 7; }
.pb-cta__title .pb-big { font-weight: 500; }
.pb-cta__title .pb-ko { margin-top: 20px; }
.pb-cta__list { grid-column: 8 / 13; display: grid; gap: 12px; align-content: start; }
.pb-cta__row { display: grid; gap: 28px; padding: 22px 24px; border: 1.5px solid rgba(255,255,255,.55); border-radius: 10px; transition: background .25s, border-color .25s; }
.pb-cta__row:hover { background: rgba(255,255,255,.1); border-color: var(--white); }
.pb-cta__row p { font-size: 17px; font-weight: 500; }
.pb-cta__row .mono { display: flex; align-items: center; gap: 8px; }

/* ── 푸터 ── */
.pb-footer { background: #000; color: rgba(255,255,255,.6); padding: 72px 0 120px; }
.pb-footer .g12 { align-items: end; }
.pb-footer .logo { grid-column: 1 / 5; width: min(360px, 60%); background: var(--white); }
.pb-footer .mono { grid-column: 9 / 13; justify-self: end; text-align: right; }

/* ── 유니콘 프로덕트·지구 섹션과 연결 ── */
.uprod .mono.uprod__label { display: block; margin-bottom: 18px; color: var(--mute); }
.world-after.gridlines { background: #000; }
.world-after .pb-big { color: var(--white); }

/* ── 반응형 ── */
@media (max-width: 900px) {
  :root { --grid-m: 16px; --gutter: 16px; }
  .pb-statement .mono, .pb-statement__body, .pb-float-card, .pb-press__body, .pb-cta__title, .pb-cta__list { grid-column: 1 / -1; }
  .pb-statement .mono { margin-bottom: 20px; padding-top: 0; }
  .pb-float-card { grid-column: 5 / 13; }
  .pb-band { min-height: 120px; padding-right: 16px; }
  .pb-band:nth-child(1) { width: 70%; } .pb-band:nth-child(2) { width: 80%; } .pb-band:nth-child(3) { width: 90%; }
  .pb-band__text { padding-left: 0; font-size: 14px; }
  .pb-band__num { padding-right: 0; font-size: clamp(40px, 11vw, 88px); }
  .pb-collage { height: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 24px auto; }
  .pb-collage img { position: static; transform: none !important; width: 30%; }
  .pb-collage img:nth-of-type(2) { width: 30%; }
  .pb-collage .chip, .pb-press .chip { position: static; }
  .pb-press__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 0; }
  .pb-press__head { order: -1; margin-bottom: 12px; }
  .pb-press__photos figure:nth-child(1), .pb-press__photos figure:nth-child(2) { grid-column: 1 / -1; margin-top: 16px; }
  .pb-footer .logo, .pb-footer .mono { grid-column: 1 / -1; justify-self: start; text-align: left; margin-top: 16px; }
  .ptop .lang { display: none; }
  .ptop .pnav { left: auto; right: var(--grid-m); transform: none; top: 12px; padding: 4px; }
  .pnav a { padding: 9px 8px; font-size: 11px; letter-spacing: .02em; }
  .pnav .ext { display: none; }
  .ptop .logo { width: 76px; }
  .pb-hero .note--float { position: relative; right: auto; bottom: auto; margin: 0 var(--grid-m); }
}

/* Culture · Recruits — 에디토리얼 아티클 레이아웃
   베이지 히어로(큰 제목 + 좌하단 사진 + 우하단 소개문)
   → 크림색 시트가 둥근 모서리로 히어로 위를 덮으며 올라옴
   → 좌측 고정 칼럼(돌아가기 + 제목 + 목차) / 우측 본문 칼럼
   → 본문 끝 CTA → 다음 페이지 카드 */
body.art {
  --sand: #ffffff;                   /* 히어로 배경 (화이트) */
  --sheet: #f4f4f4;                  /* 나중에 올라오는 본문 시트 — 아주 옅은 회색 */
  --chip: #e6e6e6;                   /* 시트 위 강조(하이라이트·진행 링·다음 카드) */
  --ed: var(--m);    /* 화면 가장자리 여백 */
  --side: 23%;                       /* 좌측 고정 칼럼 폭 */
  --col: 38%;                        /* 본문 칼럼 시작 위치 */
  --colw: 47.5%;                     /* 본문 칼럼 폭 */
  --t-h1: clamp(40px, 5.6vw, 96px);
  --t-h2: clamp(28px, 2.8vw, 48px);
  --t-h3: clamp(22px, 2.07vw, 34px);
  --t-p: clamp(16px, 1.4vw, 21px);
  background: var(--sand); color: var(--ink);
}
body.art .ptop { padding-left: var(--ed); padding-right: var(--ed); }   /* 헤더 좌우 여백 = 본문 여백 */
body.art .ptop .lang { color: var(--ink); }

/* ── 히어로 ──
   16칸 그리드: 제목 7번째 칸부터 / 사진 1~6칸(아래 정렬) / 소개문 12~15칸(아래 정렬)
   한 화면 안에 다 들어오고, 아래 50px은 시트가 덮는 자리 */
.art-hero { position: relative; margin-bottom: -50px; padding-bottom: 50px; }
.art-hero__inner {
  display: grid; grid-template-columns: repeat(16, 1fr); grid-template-rows: auto 1fr; gap: 20px;
  min-height: calc(100svh - 50px); padding: max(130px, 15vh) var(--ed) 20px;
  transform-origin: center top; will-change: transform, opacity;
}
.art-hero h1 {
  grid-column: 7 / span 8; grid-row: 1; margin: 0;
  font-size: var(--t-h1); font-weight: 600; line-height: 1.16; letter-spacing: -.045em; word-break: keep-all;
}
.art-hero__photo { grid-column: 1 / span 7; grid-row: 2; align-self: end; margin: 0; width: 100%; aspect-ratio: 3 / 2; max-height: 58svh; border-radius: 10px; overflow: hidden; background: #7a7674; }
.art-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
/* 세로 사진: 제목 옆까지 올라와 화면 높이를 꽉 채움 (사진 비율 그대로) */
.art-hero__photo--tall { grid-row: 1 / 3; justify-self: start; aspect-ratio: 3 / 4; height: auto; max-height: none; width: min(100%, 31vw, calc((100svh - 230px) * .75)); } /* 컬쳐·리쿠르트 같은 크기(3:4 프레임) */
.art-hero h1.art-hero__title-en { font-family: var(--display); font-weight: 500; line-height: 1.02; letter-spacing: -.05em; text-transform: uppercase; }
.art-hero__ko { display: block; margin-top: 1.4em; font-family: var(--body); font-size: var(--t-p); font-weight: 500; line-height: 1.5; letter-spacing: -.03em; text-transform: none; } /* 아래 소개문과 같은 크기·굵기 */
.art-hero__intro { grid-column: 12 / span 4; grid-row: 2; align-self: end; margin: 0; padding-bottom: 20px; font-size: var(--t-p); font-weight: 500; line-height: 1.5; letter-spacing: -.03em; word-break: keep-all; text-wrap: balance; }
.art-hero .note { grid-column: 8 / span 4; grid-row: 2; align-self: end; margin: 0; }

/* 첫 진입: 아래에서 80px 올라오며 자리 잡기 (0.1s 간격) */
.art-hit { transform: translateY(80px); transition: transform .8s cubic-bezier(.5, 0, 0, 1) var(--hit, 0s); }
html.is-hit .art-hit { transform: none; }

/* ── 흰 배경 본문(컬쳐: 일하는 방식·인재상) — 히어로 위로 올라오고, 끝에서 시트가 이 위를 덮음 ── */
.art-plain { position: relative; z-index: 2; background: var(--sheet); border-radius: 10px 10px 0 0; padding: 110px var(--ed) 150px; }   /* 히어로(화이트)와 구분되는 옅은 회색 */
.art-plain + .art-sheet { margin-top: -50px; background: var(--white, #fff); }   /* 회색 위로 올라오는 시트는 화이트로 */

/* ── 본문 시트 ── */
.art-sheet { position: relative; z-index: 3; background: var(--sheet); border-radius: 10px 10px calc(10px + var(--ed)) calc(10px + var(--ed)); padding: 64px var(--ed) var(--ed); }   /* 아래·좌우·카드 사이 여백 모두 같게(--ed), 아래 모서리 = 카드 모서리(30) + 여백 → 나란히 */
.art-grid { position: relative; display: grid; grid-template-columns: var(--side) calc(var(--col) - var(--side) - var(--ed)) var(--colw) 1fr; } /* 좌측 칼럼 · 간격 · 본문 · 여백 */
.art-side { grid-column: 1; align-self: stretch; }
.art-side__top { position: sticky; top: 119px; }
.art-side__now { position: relative; display: grid; overflow: hidden; padding-bottom: .08em; }
.art-side__now > span { grid-area: 1 / 1; display: block; transition: transform .32s cubic-bezier(.2, .7, .2, 1), opacity .22s ease; }   /* 짧고 빠르게: 겹쳐 보이지 않도록 */
.art-side__now > span.is-out { transition-duration: .18s, .12s; }
.art-side__now > span.is-in { transform: translateY(40%); opacity: 0; }
.art-side__now > span.is-out { transform: translateY(-40%); opacity: 0; }
.art-prog { position: sticky; top: calc(100svh - 64px); width: 26px; height: 26px; margin-top: 40px; }
.art-prog svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.art-prog circle { fill: none; stroke-width: 6; }   /* 작게, 선은 두껍게 */
.art-prog__track { stroke: var(--chip); }
.art-prog__bar { stroke: var(--red); stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--read, 0) * 100); stroke-linecap: round; }
.art-side__title { margin: 0; font-size: var(--t-h3); font-weight: 600; line-height: 1.18; letter-spacing: -.04em; word-break: keep-all; }
.art-toc { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 2px; }
.art-toc a { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; font-weight: 500; color: var(--mute); transition: color .25s; }
.art-toc a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .35; transition: opacity .25s, background .25s; }
.art-toc a.is-on { color: var(--ink); }
.art-toc a.is-on::before { opacity: 1; background: var(--red); }

.art-body { grid-column: 3; min-width: 0; }
/* 리쿠르트: 공고·아코디언이 오른쪽 여백(= 왼쪽 여백)까지 꽉 차게 */
body.art--wide .art-sheet .art-grid { grid-template-columns: var(--side) calc(var(--col) - var(--side) - var(--ed)) 1fr; }

/* 제목은 좌측 고정 칼럼에 나오므로 본문에서는 화면에서만 숨김 (읽기 도구엔 그대로) */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.art-body h3.art-mark { margin: 0; height: 0; }
.art-body h3.art-mark + .art-acc { margin-top: 0; }
#faq-after { margin-top: 56px; }

/* 본문 타이포 */
.art-sec + .art-sec { margin-top: 96px; }
.art-body h2 { margin: 0 0 22px; font-size: var(--t-h2); font-weight: 600; line-height: 1.2; letter-spacing: -.05em; word-break: keep-all; }
.art-body h2 .en { display: block; font-family: var(--display); font-weight: 500; letter-spacing: -.04em; }
.art-body h2 .ko { display: block; margin-top: 6px; font-size: .56em; font-weight: 600; letter-spacing: -.03em; color: var(--mute); }
.art-body h3 { margin: 40px 0 10px; font-size: var(--t-h3); font-weight: 600; line-height: 1.2; letter-spacing: -.045em; word-break: keep-all; }
.art-body h3 .en { font-family: var(--display); font-weight: 500; letter-spacing: -.04em; }
.art-body h4 { margin: 0 0 10px; font-size: var(--t-p); font-weight: 700; letter-spacing: -.03em; }
.art-body p, .art-body li { font-size: var(--t-p); font-weight: 500; line-height: 1.55; letter-spacing: -.03em; word-break: keep-all; }
.art-body p + p { margin-top: 1em; }
.art-body .lead { font-size: calc(var(--t-p) * 1.2); line-height: 1.45; }
.art-body strong, .art-hero__intro strong { font-weight: 600; }   /* 하이라이트 배경 없이 굵기만 */
.art-body ul { margin: 16px 0 0; padding-left: 1.1em; display: grid; gap: 10px; }
.art-body li::marker { color: var(--ink); }
.art-body li b { font-weight: 700; }
.art-body .note { margin-top: 28px; }
.art-body .tbd { color: var(--mute); font-family: var(--body); font-size: .7em; }

/* 본문 안 큰 인용 줄 (How we work 헤드라이너) */
.art-quote { margin: 72px 0 8px; font-family: var(--display); font-size: var(--t-h2); font-weight: 500; line-height: 1.1; letter-spacing: -.05em; text-transform: uppercase; }
.art-quote + p { color: var(--mute); }

/* 입사축하금 띠 — 시트 맨 위에 붙은 검정 띠, 펼치면 상세 안내 */
.art-bonus { margin: -64px calc(var(--ed) * -1) 80px; border-radius: 10px 10px 0 0; background: var(--black, #000); color: var(--white); text-align: center; }
.art-bonus__head { display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; min-height: 66px; padding: 14px var(--ed); font: 500 clamp(14px, 1.1vw, 17px)/1.5 var(--body); letter-spacing: -.02em; color: inherit; cursor: pointer; }
.art-bonus__head:focus { outline: none; }
.art-bonus__head { gap: 10px; }
.art-bonus__arrow { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s cubic-bezier(.17, .67, .3, 1.33); }
.art-bonus.is-open .art-bonus__arrow { transform: rotate(180deg); }   /* 펼치면 위쪽 화살표 */
.art-bonus__head:focus-visible { outline: 2px solid var(--red); outline-offset: -4px; border-radius: 10px 10px 0 0; }
.art-bonus__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s cubic-bezier(.5, 0, 0, 1); }
.art-bonus.is-open .art-bonus__body { grid-template-rows: 1fr; }
.art-bonus__body > div { overflow: hidden; }
.art-bonus__body p { padding: 38px var(--ed) 26px; font-size: clamp(12px, .9vw, 14px); line-height: 1.6; color: rgba(255,255,255,.82); opacity: 0; transition: opacity .4s ease; }
.art-bonus.is-open .art-bonus__body p { opacity: 1; transition-delay: .15s; }
.art-bonus-note .note { margin: -40px 0 40px; }   /* 코멘트가 보일 때만 자리 차지 */

/* 콜아웃 (입사축하금) */
.art-callout { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; padding: 28px 28px 28px 32px; border-radius: 10px; background: var(--white); }
.art-callout__heart { width: 44px; height: 40px; fill: var(--red); }
.art-callout__label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--red); }
.art-callout p { font-weight: 600; }
.art-callout .art-btn { background: var(--sheet); }

/* 공고 필터 + 리스트 */
.art-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.art-filters select { appearance: none; -webkit-appearance: none; padding: 11px 38px 11px 18px; border: 0; border-radius: 10px; background: var(--white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23111' stroke-width='1.5'/></svg>") no-repeat right 16px center / 10px; font: 500 15px/1 var(--body); letter-spacing: -.02em; color: var(--ink); cursor: pointer; }
.art-jobs .job { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 20px; padding: 16px 0; border-top: 1px solid var(--chip); }
.art-jobs .job:last-child { border-bottom: 1px solid var(--chip); }
.art-jobs .job__title { font-size: var(--t-h3); font-weight: 600; letter-spacing: -.045em; transition: color .25s; }
.art-jobs .job:hover .job__title { color: var(--red); }
.art-jobs .job__meta { font-size: 14px; font-weight: 500; color: var(--mute); }
.art-jobs .job__arrow { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--white); transition: background .3s, color .3s, transform .3s cubic-bezier(.5, 0, 0, 1); }
.art-jobs .job:hover .job__arrow { background: var(--ink); color: var(--white); transform: rotate(-45deg); }
.art-body .badge { display: inline-block; margin-left: 12px; padding: 5px 11px; border-radius: 5px; font-size: 13px; font-weight: 600; letter-spacing: 0; vertical-align: .3em; }
.art-body .badge--new { background: var(--red); color: var(--white); }
.art-body .badge--focus { background: var(--ink); color: var(--white); }
.art-body .badge--add { background: var(--white); color: var(--ink); }

/* 공고 리스트 — 제목 크게 왼쪽 / 직군 · 경력 · 고용형태는 오른쪽에 세로선으로 구분, 화살표 없이 깔끔하게 */
.art-jobs .job--clean { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; border-top: 0; border-bottom: 1px solid #e2e2e2; }
.art-jobs .job--clean:first-child { border-top: 0; }
.art-jobs .job--clean .job__title { font-size: calc(var(--t-h3) * 1.02); font-weight: 700; letter-spacing: -.035em; transition: color .25s; }
.art-jobs .job--clean:hover .job__title { color: var(--red); }
.art-jobs .job--clean .job__meta { flex: none; margin: 0; display: flex; align-items: center; font-size: 16px; font-weight: 400; color: #8a8a8a; }
.art-jobs .job--clean .job__meta span + span { margin-left: 18px; padding-left: 18px; border-left: 1px solid #d6d6d6; line-height: 1; }

/* 복지 항목 리스트 (공고 리스트와 같은 줄 구성, 링크 없음) */
.art-lead { margin-bottom: 28px; }
.art-jobs--plain .job { grid-template-columns: 1fr; padding: 20px 0; }
.art-jobs--plain .job__title { font-size: calc(var(--t-h3) * .8); }
.art-jobs--plain .job:hover .job__title { color: inherit; }
.art-jobs .job__desc { margin-top: 8px; max-width: 46em; font-size: calc(var(--t-p) * .92); font-weight: 400; line-height: 1.55; color: var(--mute); }

/* 공고 직군 필터 칩 — 선택: 검정 / 나머지: 옅은 회색, 좁은 화면에선 옆으로 밀어서 보기 */
.art-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.art-chips::-webkit-scrollbar { display: none; }
.art-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 12px 22px; border-radius: 10px; background: var(--card, #ebebeb); font: 500 16px/1 var(--body); letter-spacing: -.02em; color: #4a4a4a; cursor: pointer; transition: background .25s, color .25s; }
.art-chip span { font-size: 13px; color: #9a968d; transition: color .25s; }
.art-chip:hover { background: #e1e1e1; }
.art-chip.is-on { background: var(--ink); color: var(--white); }
.art-chip.is-on span { color: rgba(255,255,255,.6); }
.art-chip:focus { outline: none; }
.art-chip:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.art-jobs .job__cat { display: block; margin-bottom: 6px; font-family: var(--display); font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--mute); }
.art-jobs .job { transition: opacity .3s ease; }
.art-jobs .job[hidden] { display: none; }
.art-jobs .job.is-enter { animation: art-job-in .45s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--k, 0) * 40ms); }
@keyframes art-job-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.art-jobs__empty { padding: 40px 0; color: var(--mute); }

/* 아코디언 (합류 여정 · FAQ) — 카드형 토글: 흰 카드 + 빨간 원형 버튼(+ → −), 카드끼리 살짝 띄움 */
.art-acc { display: grid; gap: 12px; margin-top: 0; }   /* 카드 사이 간격 */
.art-acc .acc__item { border-radius: 10px; background: var(--card, #ebebeb); overflow: hidden; transition: background .3s; }   /* 배경(#f4f4f4)보다 살짝 어둡게 */
.art-acc .acc__item:hover { background: #e5e5e5; }
.art-acc .acc__head { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; padding: 16px 18px 16px 28px; text-align: left; font: inherit; font-size: calc(var(--t-h3) * .72); font-weight: 600; line-height: 1.25; letter-spacing: -.045em; color: var(--ink); cursor: pointer; }
.art-acc .acc__head em { margin-right: 14px; font-family: var(--display); font-style: normal; font-weight: 500; color: var(--ink); }
.art-acc .acc__head i { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--white); transition: background .3s, transform .4s cubic-bezier(.17, .67, .3, 1.33); }
.art-acc .acc__head i::before, .art-acc .acc__head i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.6px; border-radius: 1px; background: currentColor; transform: translate(-50%, -50%); transition: transform .4s cubic-bezier(.17, .67, .3, 1.33); }
.art-acc .acc__head i::after { transform: translate(-50%, -50%) rotate(90deg); }
.art-acc .acc__head:hover i { transform: scale(1.06); }
.art-acc .acc__head:focus { outline: none; }
.art-acc .acc__head:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; border-radius: 10px; }   /* 키보드로 이동할 때만 빨간 테두리 */
.art-acc .acc__item.is-open .acc__head i { background: var(--ink); transform: rotate(180deg); }
.art-acc .acc__item.is-open .acc__head i::after { transform: translate(-50%, -50%) rotate(0deg); }   /* + → − */
.art-acc .acc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.5, 0, 0, 1); }
.art-acc .acc__item.is-open .acc__body { grid-template-rows: 1fr; }
.art-acc .acc__body > div { overflow: hidden; padding: 0 72px 0 28px; }
.art-acc .acc__body > div > :first-child { margin-top: 4px; }
.art-acc .acc__body > div > :last-child { margin-bottom: 28px; }
.art-acc .acc__body p, .art-acc .acc__body li { font-size: calc(var(--t-p) * 1.02); font-weight: 400; line-height: 1.55; }   /* 펼친 내용은 한 단계 얇게(500→400) */
.art-acc .acc__body h4 { display: none; }   /* 제목은 카드 머리에 이미 있음 */
.art-acc .acc__body ul { margin: 12px 0; }
.art-common { margin-top: 20px !important; color: var(--mute); }
.art-common li { font-size: calc(var(--t-p) * .85); }
.art-body ul.art-common { gap: 2px; }   /* 공통 안내 줄 간격 좁게 */

/* CTA */
.art-cta { margin-top: 96px; }   /* 섹션 사이와 같은 간격 */
.art-cta__kicker { font-size: var(--t-p); font-weight: 700; letter-spacing: -.02em; }
.art-cta h2 { margin: 10px 0 20px; }
.art-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 0; }
.art-btn { display: inline-flex; align-items: center; gap: 14px; padding: 8px 8px 8px 20px; border-radius: 10px; background: var(--white); font-size: 16px; font-weight: 600; letter-spacing: -.02em; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.art-btn i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--white); font-style: normal; font-size: 15px; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.art-btn:hover i { transform: rotate(-45deg); }
.art-cta__close { margin-top: 56px; font-size: var(--t-h2); font-weight: 600; line-height: 1.2; letter-spacing: -.05em; word-break: keep-all; }

/* 물결 밑줄: 화면에 들어오면 물결이 옆으로 흐름 */
.art-wave strong { position: relative; display: inline-block; background: none; padding: 0; font-weight: inherit; }
.art-wave strong::after {
  content: ""; position: absolute; left: .06em; right: -.04em; bottom: -.34em; height: .36em; background: var(--red);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12'><path d='M0 4 Q10 10 20 6 T40 4' fill='none' stroke='black' stroke-width='3.4'/></svg>") repeat-x 0 50% / 1.1em 100%;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12'><path d='M0 4 Q10 10 20 6 T40 4' fill='none' stroke='black' stroke-width='3.4'/></svg>") repeat-x 0 50% / 1.1em 100%;
  animation: art-wave 3s linear infinite paused;
}
.art-wave.is-on strong::after { animation-play-state: running; }
@keyframes art-wave { to { -webkit-mask-position: -1.1em 50%; mask-position: -1.1em 50%; } }

/* 다음 페이지 카드 */
.art-next { display: grid; grid-template-columns: calc(var(--col) - var(--ed) * 2) 1fr; gap: var(--ed); margin-top: 96px; }   /* 회색 카드 왼쪽 = 본문 칼럼 시작선 */
.art-next__visual { grid-column: 1; position: relative; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; }   /* 시트 모서리(50) − 여백(20) = 30 → 모서리가 나란히 */
.art-next__visual img { position: absolute; left: 0; right: 0; top: -3em; bottom: -3em; width: 100%; height: calc(100% + 6em); object-fit: cover; will-change: transform; }
.art-next__content { grid-column: 2; position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 32px; padding: clamp(28px, 3.4vw, 56px); border-radius: 10px; background: var(--chip); text-align: left; }
.art-next strong { display: block; font-family: var(--body); font-size: calc(var(--t-h2) * 1.1); font-weight: 600; line-height: 1.25; letter-spacing: -.045em; word-break: keep-all; }
.art-next i { align-self: flex-end; display: grid; place-items: center; width: clamp(56px, 5vw, 76px); height: clamp(56px, 5vw, 76px); border-radius: 50%; background: var(--ink); color: var(--white); transition: transform .45s cubic-bezier(.17, .67, .3, 1.33); }
.art-next i svg { width: 38%; height: 38%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.art-next:hover i { transform: scale(1.08) rotate(45deg); }

/* 푸터: 시트 아래로 둥글게 */
body.art .pb-footer { position: relative; z-index: 1; margin-top: calc(-32px - var(--ed)); padding-top: calc(104px + var(--ed)); border-radius: 0; }   /* 시트 아래 둥근 모서리(30+여백) 뒤까지 검정이 올라오게 */   /* 검정을 꽉 채워 시트의 둥근 아래 모서리 뒤까지 검정으로 */


@media (max-width: 900px) {
  body.art { --ed: 16px; --side: 100%; --col: 16px; --colw: 100%; }
  .art-hero { margin-bottom: -28px; padding-bottom: 28px; }
  .art-hero__inner { display: flex; flex-direction: column; gap: 28px; min-height: 0; padding: 120px var(--ed) 40px; transform: none !important; opacity: 1 !important; }
  .art-hero__photo { max-height: none; }
  .art-hero__photo--tall { width: 100%; height: auto; }
  .art-hero__intro { padding-bottom: 0; }
  .art-prog { display: none; }
  .art-plain { padding: 56px var(--ed) 90px; border-radius: 10px 10px 0 0; }
  .art-sheet { border-radius: 10px 10px calc(10px + var(--ed)) calc(10px + var(--ed)); padding: 40px var(--ed) var(--ed); }
  .art-bonus { margin: -40px calc(var(--ed) * -1) 48px; border-radius: 10px 10px 0 0; }
  .art-bonus__head { min-height: 56px; padding: 12px 20px; }
  .art-grid { display: block; }
  .art-side { position: static; }
  .art-toc { display: none; }
  .art-body { width: auto; margin: 40px 0 0; }
  .art-callout { grid-template-columns: 1fr; }
  .art-acc .acc__item { border-radius: 10px; }
  .art-acc .acc__head { padding: 12px 12px 12px 18px; }
  .art-acc .acc__head i { width: 24px; height: 24px; }
  .art-acc .acc__body > div { padding: 0 18px 0 18px; }
  .art-jobs .job { grid-template-columns: 1fr auto; gap: 6px 16px; }
  .art-chips { flex-wrap: nowrap; }
  .art-jobs .job--clean { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 0; }
  .art-jobs .job--clean .job__meta { font-size: 13px; }
  .art-jobs .job--clean .job__meta span + span { margin-left: 12px; padding-left: 12px; }
  .art-jobs .job__meta { grid-row: 2; }
  .art-next { display: flex; flex-direction: column; margin-top: 80px; }
  .art-next__visual, .art-next__content { border-radius: 10px; }
  .art-next { gap: var(--ed); }
  .art-next__visual { aspect-ratio: 4 / 3; }
  body.art .pb-footer { margin-top: calc(-18px - var(--ed)); padding-top: calc(90px + var(--ed)); }
}

@media (prefers-reduced-motion: reduce) {
  .art-hit { transform: none; transition: none; }
  .art-wave strong::after { animation: none; }
}

/* ── Culture: 배경은 회색, 올라오는 첫 시트는 흰색 ── */
body.art--culture { --sand: #f4f4f4; }
body.art--culture .art-plain { background: #000; color: #fff; padding-bottom: 50px; }   /* 인재상이 끝나면 바로 Benefits 시트가 올라옴 */   /* 올라오는 첫 시트: 검정 바탕 + 흰 글자 */
body.art--culture .art-plain :is(h2, h3, p, li, .art-side__title, .en, .ko) { color: inherit; }
body.art--culture .art-plain + .art-sheet { background: #f4f4f4; }

/* 흰 시트 첫 화면: 스파크 + HOW WE WORK */
.cx-scroll { position: relative; height: 540vh; height: 540svh; margin-top: -110px; }   /* 시트 윗 여백만큼 당겨 화면 전체를 씀 */
.cx-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.cx-lay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cx-lay--a { justify-content: flex-start; align-items: flex-start; text-align: left; padding: 30vh var(--ed) 0 40%; }   /* 윗선은 JS가 두 번째 상태의 HOW WE WORK 윗선과 같게 맞춤 */   /* 글자는 오른쪽 아래(왼쪽 정렬), 스파크는 왼쪽 위 */
.cx-lay--a .spark { position: absolute; left: var(--ed); top: 90px; }
.cx-lay--b { justify-content: center; align-items: flex-start; text-align: left; padding: 0 var(--ed) 0 40%; }   /* 첫 상태와 같은 왼쪽 기준선에 좌측 정렬 */
.spark { width: clamp(150px, 14.5vw, 240px); }
.spark__svg { display: block; width: 100%; height: auto; }
.cx-lay [data-slot] { visibility: hidden; }   /* 자리만 차지 — 실제 글자는 cx-actor */
.cx-fade-b { opacity: 0; }
.cx-intro__title { margin: 0; font-family: var(--display); font-weight: 700; text-transform: uppercase; white-space: nowrap; font-size: var(--t-display); line-height: .78; letter-spacing: var(--ls-display); color: #fff; }   /* 대문자라 아래 여백을 줄임 */
.cx-intro__sub { line-height: 1; margin: 1.46vw 0 0; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(16px, 2vw, 34px); letter-spacing: .02em; color: #fff; }
/* 질문 · HOW WE WORK · WE IMAGINE 세 줄의 눈에 보이는 간격을 같게(약 1.2vw): 글자 윗·아랫 여백을 빼고 계산 */
.cx-intro__q { line-height: 1; margin: 0 0 1.38vw; font-family: var(--body); font-weight: var(--w-ko); font-size: var(--t-ko); letter-spacing: -.03em; color: #fff; }
.spark { margin: 0 0 auto !important; }   /* 스파크는 화면 맨 위쪽, 글자는 아래쪽 */
/* 두 번째 화면: 작은 라벨 + 큰 두 줄 + 한글 한 줄 */
.cx-screen__label { line-height: 1; margin: 0 0 .57vw; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(16px, 1.9vw, 30px); letter-spacing: .02em; color: #fff; }
.cx-screen__title { margin: 0; font-family: var(--display); font-weight: 700; text-transform: uppercase; white-space: nowrap; font-size: var(--t-display); line-height: 1.033; letter-spacing: var(--ls-display); color: #fff; }
/* 라벨 · 제목 두 줄 · 한글 — 눈에 보이는 간격을 모두 같게, 첫 상태와도 같은 약 1.9vw */
.cx-screen__ko { line-height: 1; margin: .94vw 0 0; font-family: var(--body); font-weight: var(--w-ko); font-size: var(--t-ko); letter-spacing: -.03em; color: #fff; }
/* 움직이는 글자: 큰 상태의 크기로 그려두고 작은 상태에선 축소 (흐려지지 않게) */
.cx-actor { position: absolute; left: 0; top: 0; transform-origin: 0 0; white-space: nowrap; will-change: transform; color: #fff;
  font-family: var(--display); font-weight: 700; text-transform: uppercase; line-height: normal; }   /* 자리(인라인 글자 상자)와 같은 높이 → 위치가 정확히 맞음 */
.cx-actor--how { font-size: var(--t-display); letter-spacing: var(--ls-display); }
.cx-actor--s { font-size: var(--t-display); letter-spacing: var(--ls-display); }

/* 스파크 모션: 중앙(빨간 점)에서 빛줄기·폭발이 퍼지고 → 별이 톡톡 → Spark 글씨, 이후 은은하게 숨쉬듯 반짝임 */
.spark .sp-burst, .spark .sp-line { transform-box: view-box; transform-origin: 613px 649px; }
.spark .sp-star { transform-box: fill-box; transform-origin: center; }
.spark .sp-burst, .spark .sp-line, .spark .sp-star, .spark .sp-dot, .spark .sp-script { opacity: 0; }
.spark.is-play .sp-dot { animation: sp-pop .5s cubic-bezier(.3,1.6,.5,1) forwards; transform-box: fill-box; transform-origin: center; }
.spark.is-play .sp-burst { animation: sp-burst 1.1s .15s cubic-bezier(.16,1,.3,1) forwards, sp-breathe 4.5s 1.3s ease-in-out infinite; }
.spark.is-play .sp-line { animation: sp-ray .9s calc(.25s + var(--i) * .035s) cubic-bezier(.16,1,.3,1) forwards; }
.spark.is-play .sp-star { animation: sp-pop .55s calc(.75s + var(--i) * .09s) cubic-bezier(.3,1.6,.5,1) forwards, sp-twinkle 2.4s calc(1.4s + var(--i) * .37s) ease-in-out infinite; }
.spark.is-play .sp-script { animation: sp-fade .7s 1.05s ease-out forwards; }
@keyframes sp-burst { from { opacity: 0; transform: scale(.12) rotate(-30deg); } to { opacity: 1; transform: none; } }
@keyframes sp-breathe { 0%, 100% { transform: none; } 50% { transform: scale(1.035) rotate(1.5deg); } }
@keyframes sp-ray { from { opacity: 0; transform: scale(.25); } to { opacity: 1; transform: none; } }
@keyframes sp-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
@keyframes sp-twinkle { 0%, 100% { opacity: 1; transform: none; } 50% { opacity: .35; transform: scale(.7); } }
@keyframes sp-fade { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .spark .sp-burst, .spark .sp-line, .spark .sp-star, .spark .sp-dot, .spark .sp-script { opacity: 1; animation: none !important; }
}
@media (max-width: 900px) { .cx-lay--a { padding-left: var(--ed); } .cx-intro__title, .cx-actor--how { font-size: 11vw; } .cx-lay--b { padding-left: var(--ed); } .cx-screen__title, .cx-actor--s { font-size: 11vw; } }

/* 왼쪽 카드: 스크롤과 함께 아래에서 올라와 HOW WE WORK 높이에 멈추고, 그다음 설명 카드가 아래로 펼쳐짐 (위치·펼침은 article.js) */
.cx-cards { position: absolute; left: 0; top: 0; width: calc(40% - 5vw);   /* 시트 안쪽 여백이 이미 페이지 여백 → 카드 왼쪽 = 페이지 여백 */ z-index: 2; display: grid; gap: 12px; }   /* 카드가 차례로 이어서 쌓임 */
.cx-card { will-change: transform; }
.cx-card { --cc: #1f1f1f; }
.cx-card--g1 { --cc: #1f1f1f; } .cx-card--g2 { --cc: #2c2c2c; } .cx-card--g3 { --cc: #3a3a3a; } .cx-card--red { --cc: var(--red, #e60012); }   /* 카드마다 다른 회색 + 빨강 하나 */
.cx-card__head, .cx-card__more > div { background: var(--cc); border-radius: 10px; padding: clamp(20px, 2vw, 32px); }
.cx-card__title { margin: 0 0 clamp(36px, 4.4vw, 76px); font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: var(--t-card); line-height: 1.08; letter-spacing: .01em; color: #fff; }
.cx-card__sub { margin: 0; font-family: var(--body); font-size: var(--t-body); font-weight: 600; letter-spacing: -.02em; color: #fff; }
.cx-card__more { height: 0; perspective: 1400px; }   /* 높이는 JS가 펼친 만큼, 안쪽 카드는 뒤에서 3D로 뒤집혀 나옴 (가리지 않음) */
.cx-card__more > div { margin-top: 12px; opacity: 0; transform-origin: 50% 0; backface-visibility: hidden; will-change: transform; }
.cx-card__more p { margin: 0;   /* 여백은 카드 안쪽 여백(상하좌우 같게)으로만 */ font-family: var(--body); font-size: var(--t-body); font-weight: 400; line-height: 1.65; letter-spacing: -.02em; color: rgba(255, 255, 255, .55); }
@media (max-width: 900px) { .cx-cards { width: 100%; } }

/* AND WE MAKE IT REAL 블록: 제목은 가운데 높이 · 40% 기준선에 고정, 카드만 차례로 올라옴 */
.cx-scroll--real { height: 480vh; height: 480svh; margin-top: 0; }
.cx-real__q { margin: 0 0 .9vw; font-family: var(--body); font-weight: var(--w-ko); font-size: var(--t-ko); line-height: 1; letter-spacing: -.03em; color: #fff; }
.cx-lay--real .cx-real__title { white-space: nowrap; }
.cx-card--red .cx-card__more p { color: rgba(255, 255, 255, .82); }

/* WHO WE LOOK FOR 블록: 제목(위) + 카드 4개 한 줄(아래) */
.cx-scroll--who { height: 380vh; height: 380svh; }
.cx-who__head { position: absolute; left: 0; right: 0; top: clamp(110px, 16vh, 170px); }
.cx-who__head .cx-real__title { white-space: nowrap; }
.cx-row { position: absolute; left: 0; right: 0; top: calc(clamp(110px, 16vh, 170px) + clamp(90px, 13vw, 190px)); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.cx-row .cx-card__title { margin-bottom: 0; font-size: var(--t-card); }
@media (max-width: 900px) { .cx-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 검정 시트 맨 위 안내 한 줄 — 히어로 소개문과 같은 왼쪽 기준선(16칸 중 12번째 칸) */
.cx-hint { position: absolute; left: var(--ed); right: var(--ed); top: 44px; z-index: 3; display: grid; grid-template-columns: repeat(16, 1fr); gap: 20px; pointer-events: none; }
.cx-hint p { grid-column: 12 / span 5; margin: 0; font-size: var(--t-p); font-weight: 500; line-height: 1.5; letter-spacing: -.03em; color: rgba(255, 255, 255, .6); }
@media (max-width: 900px) { .cx-hint p { grid-column: 1 / -1; } }

/* ── 모바일: Culture 스크롤 블록 — 제목은 위에, 카드는 제목 아래에서 올라옴 (시트가 이미 좌우 여백을 가짐) ── */
@media (max-width: 900px) {
  .cx-lay--a, .cx-lay--b { padding-left: 0 !important; padding-right: 0 !important; }
  .cx-lay--b { justify-content: flex-start; padding-top: 88px; }
  .cx-cards { width: 100%; }
  /* 인재상: 모바일은 고정하지 않고 카드 4개를 펼친 채 차례로 쌓음 */
  .cx-scroll--who { height: auto; }
  .cx-scroll--who .cx-stage { position: static; height: auto; overflow: visible; padding: 88px 0 48px; }
  .cx-who__head, .cx-row { position: static; }
  .cx-who__head .cx-real__title { white-space: normal; }
  .cx-row { margin-top: 24px; grid-template-columns: 1fr; }
}