/* Company pages (career, jobs, news, blog, contact, 404) on the public marketing layer.
   Load after site-pages.css and v6-marketing.css. No new tokens. */

/* Accent is a role again. Light surfaces read a deep derivative of the light accent (AA);
   ink bands read the dark accent. */
body.v6-marketing {
  --co-accent-deep: var(--palette-ink);
  --identity: var(--co-accent-deep);
  --identity-dim: var(--co-accent-deep);
  --identity-deep: var(--co-accent-deep);
}

/* Legacy aliases resolve at :root (light). Re-resolve them inside ink bands. */
.v6-marketing [data-theme="dark"] {
  --ink-2: var(--muted);
  --ink-3: var(--faint);
  --rule: var(--line);
  --solid: var(--surface-raised);
  --ground-hi: var(--surface);
  --glass: var(--glass-fill);
  --plane-edge: var(--line);
  --plane-rim: var(--line);
  --inset-bg: var(--control-fill);
  --text: var(--ink);
  --text-soft: var(--muted);
  --graphite: var(--ink);
  --border-mid: var(--line);
  --surface-sub: var(--line);
  --identity: var(--accent);
  --identity-dim: var(--accent);
  --identity-deep: var(--accent);
  color: var(--ink);
}

/* Reading cards are opaque. No glass refraction on these pages.
   바깥 경계는 DS 카드 경계(--panel-border, 바탕 대비 3:1 이상)·안쪽 흰 링·깊이다. */
body.public-site.v6-marketing :is(.hww-card,.bn-card,.pool-card,.job-card,.apply-notice,.pool-note,.req-block,.cond,.card,.prose,.empty,.n-lead) {
  background: var(--surface-raised);
  border:0;
  box-shadow: var(--panel-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-radius: var(--radius-md);
}
/* 카드 링크(채용 공고·대표 소식)의 hover 는 면 변화로 보인다 — 회사 소개 카드와 같은 한 단계(밑줄 없음). */
body.public-site.v6-marketing :is(a.job-card, a.n-lead) { transition: background var(--t-2) var(--ease-out), transform var(--t-2) var(--ease-out); }
body.public-site.v6-marketing :is(a.job-card, a.n-lead):hover { background: var(--canvas); }
body.public-site.v6-marketing .job-cta { border-radius: var(--radius-md); }

/* Status: words first; the active state is a neutral tint. */
.v6-marketing :is(.co-status,.job-hero-eyebrow .status,.badge-open) {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.4;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-input);
}
.v6-marketing :is(.co-status.is-open,.badge-open) {
  color: var(--co-accent-deep);
  background: color-mix(in oklab, var(--palette-ink) 8%, var(--palette-white));
  border: 0;
}
.v6-marketing .co-status { margin: 0 0 var(--space-4); }
.v6-marketing .mk-band--ink :is(.co-status.is-open,.status.is-open) {
  color: var(--palette-on-ink);
  background: color-mix(in oklab, var(--palette-on-ink) 14%, var(--palette-ink));
  border: 0;
}
.v6-marketing .job-hero-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.v6-marketing .job-hero-eyebrow .t { font-size: var(--fs-small); letter-spacing: .32em; text-transform: uppercase; color: var(--ink-inverse-2); }
.v6-marketing .job-hero-eyebrow .status.is-closed {
  color: var(--ink-inverse);
  background: transparent;
  border:0;
}

/* ── Ink page head (jobs, news, blog, contact) ─────────────────────── */
.v6-marketing .co-head { padding: var(--space-10) 0 var(--space-8); }
.v6-marketing .co-head .page-head { padding: 0; border: 0; }
.v6-marketing .co-head :is(.page-eyebrow,.page-eyebrow .txt) { color: var(--muted); }
.v6-marketing .co-head .page-eyebrow { display: block; margin: 0 0 var(--space-4); font-size: var(--fs-small); letter-spacing: .14em; text-transform: uppercase; }
.v6-marketing .co-head h1 {
  margin: 0;
  font-size: var(--fs-num-xl);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.045em;
  color: var(--ink);
}
.v6-marketing .co-head :is(.page-head p:not(.page-eyebrow),.desc) {
  margin: var(--space-5) 0 0;
  max-width: 620px;
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: var(--muted);
}
.v6-marketing .co-body { padding-top: var(--space-7); }
/* Beat the shared main>section block spacing so every ink head clears the header the same way. */
html body.x-site.v6-marketing:not(.cosentio-page) main > section.co-head:not(.hero):not(.proof) { padding: var(--space-10) 0 var(--space-8); }
html body.x-site.v6-marketing:not(.cosentio-page) main > section.co-body:not(.hero):not(.proof) { padding-top: var(--space-7); }
.v6-marketing .co-head .wrap { padding-bottom: 0; }
@media (max-width: 700px) {
  .v6-marketing .co-head { padding: var(--space-9) 0 var(--space-7); }
  html body.x-site.v6-marketing:not(.cosentio-page) main > section.co-head:not(.hero):not(.proof) { padding: var(--space-9) 0 var(--space-7); }
  html body.x-site.v6-marketing:not(.cosentio-page) main > section.co-body:not(.hero):not(.proof) { padding-top: var(--space-6); }
  .v6-marketing .co-head h1 { font-size: var(--fs-display); }
  .v6-marketing .co-head :is(.page-head p:not(.page-eyebrow),.desc) { font-size: var(--fs-body); }
  .v6-marketing .co-body { padding-top: var(--space-6); }
}

/* ── Career home ───────────────────────────────────────────────────── */
body.x-site.v6-marketing[data-page-group="career"] .hero.mk-band--ink {
  align-items: flex-start;
  text-align: left;
  gap: 0;
  padding: var(--space-10) max(var(--page-gutter), calc((100% - var(--page-max)) / 2)) var(--space-9);
}
body.x-site.v6-marketing[data-page-group="career"] .hero .hero-eyebrow { display: block; margin: 0 0 var(--space-6); }
body.x-site.v6-marketing[data-page-group="career"] .hero .eyebrow-text { color: var(--muted); letter-spacing: .14em; }
body.x-site.v6-marketing[data-page-group="career"] .hero .hero-h1 {
  max-width: 1040px;
  margin: 0;
  font-size: var(--fs-num-xl);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.06em;
  color: var(--ink);
}
body.x-site.v6-marketing[data-page-group="career"] .hero :is(.hero-lead,.hero-sub-lead) {
  margin: 0;
  max-width: 640px;
  text-align: left;
  color: var(--muted);
}
body.x-site.v6-marketing[data-page-group="career"] .hero .hero-lead { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--line-strong); max-width: none; width: 100%; font-size: var(--fs-h3); color: var(--ink); }
body.x-site.v6-marketing[data-page-group="career"] .hero .hero-sub-lead { margin-top: var(--space-3); font-size: var(--fs-lead); }
body.x-site.v6-marketing[data-page-group="career"] .hero .hero-cta { justify-content: flex-start; margin-top: var(--space-6); }
@media (max-width: 700px) {
  body.x-site.v6-marketing[data-page-group="career"] .hero.mk-band--ink { padding: var(--space-10) var(--page-gutter) var(--space-8); }
  body.x-site.v6-marketing[data-page-group="career"] .hero .hero-h1 { font-size: var(--fs-display); line-height: 1.08; }
  body.x-site.v6-marketing[data-page-group="career"] .hero :is(.hero-lead,.hero-sub-lead) br { display: none; }
  body.x-site.v6-marketing[data-page-group="career"] .hero .hero-lead { font-size: var(--fs-lead); margin-top: var(--space-6); }
  body.x-site.v6-marketing[data-page-group="career"] .hero .hero-sub-lead { font-size: var(--fs-body); }
}

/* Section name is the meta label; numbers are gone. */
.v6-marketing[data-page-group="career"] .sec-label { margin-bottom: var(--space-6); }
/* Career home only: job detail pages use .sec-head .sec-name as the h2 section heading. */
.v6-marketing[data-page-group="career"] .sec-label .sec-name { color: var(--muted); letter-spacing: .12em; }
html body.public-site.x-site.v6-marketing #why-join .sec-name { color: var(--muted); }

/* Key words take the accent role in every band. */
body.v6-marketing :is(.wwd-left,.gf-intro,.jobs-cta-left,.pool-left) h2 em,
body.v6-marketing #how-we-work .hww-header h2 em,
body.v6-marketing #benefits .bn-header h2 em { color: var(--identity); }
html body.public-site.x-site.v6-marketing #why-join .wj-top h2 em { color: var(--accent); }

/* How we work on ink */
body.v6-marketing #how-we-work .hww-card { background: var(--surface); }
body.v6-marketing #how-we-work .hww-card-num { color: var(--muted); letter-spacing: .06em; }

/* ── Jobs list ─────────────────────────────────────────────────────── */
.v6-marketing[data-page-group="career"] .co-head .page-head h1 { font-size: var(--fs-num-xl); }
.v6-marketing .job-group-count.mk-role-numeric { color: var(--co-accent-deep); font-weight: 600; font-size: var(--fs-body); }
.v6-marketing .job-card-go { color: var(--ink); }
/* Closed cards stay readable (AA). The word 「마감」 and its own group carry the state, not fading. */
body.public-site.v6-marketing .job-card.job-card-closed { opacity: 1; }
.v6-marketing .job-card-closed .job-card-go { color: var(--ink-2); }
.v6-marketing .pool-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.v6-marketing .apply-notice { padding: var(--space-4) var(--space-5); }
.v6-marketing .apply-notice b { color: var(--co-accent-deep); }
.v6-marketing .job-group > summary:focus-visible { outline: 3px solid var(--focus-ring); }

/* ── Job detail ────────────────────────────────────────────────────── */
.v6-marketing .job-hero.mk-band--ink { background: var(--palette-ink); color: var(--palette-on-ink); }
.v6-marketing .job-hero-title .mk-gradient-word { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.v6-marketing .req-list li::before { color: var(--ink); }
.v6-marketing .req-plus li::before { color: var(--ink-2); }
.v6-marketing .closed-banner a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.v6-marketing .step { background: var(--surface-raised); border: 0; box-shadow: var(--secondary-shadow); }
/* 공고 머리 정보 칸·마감 안내·카드 밖 지원 방법 상자는 카드 면과 그림자로 구분한다. */
.v6-marketing :is(.closed-banner, .sec > .apply-box) {  box-shadow: var(--panel-shadow); }
/* 공고 머리 정보 칸은 머리 사진(유리 추상 사진) 위에 놓여 바로 바깥이 캔버스보다 어둡다 — 한 단계 짙은 무채색 토큰으로 실제 픽셀 3:1 을 지킨다. */
.v6-marketing .job-meta-item {  box-shadow: var(--panel-shadow); }
.v6-marketing .step .t { margin-top: 0; }

/* ── News ──────────────────────────────────────────────────────────── */
.v6-marketing .n-lead-meta.mk-role-deep { color: var(--ink); font-weight: 600; }
.v6-marketing .n-group.mk-role-numeric { color: var(--co-accent-deep); font-weight: 600; }
.v6-marketing[data-page-group="company"] .band-paper.co-body { padding-top: var(--space-7); }

/* ── Blog ──────────────────────────────────────────────────────────── */
.v6-marketing .co-body .empty { margin-top: 0; }
.v6-marketing .co-body main { min-height: 32vh; }

/* ── Contact: no scroll motion. Roles on required, focus, error. ──── */
.v6-marketing[data-page-group="form"] .co-head .wrap { padding: 0; }
.v6-marketing[data-page-group="form"] .co-body { padding-top: var(--space-6); }
.v6-marketing[data-page-group="form"] .co-head h1 { font-size: var(--fs-num-xl); }
.v6-marketing[data-page-group="form"] .req { color: var(--co-accent-deep); }
.v6-marketing[data-page-group="form"] :is(input,select,textarea):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-color: var(--focus-ring);
}
.v6-marketing[data-page-group="form"] :is(input,select,textarea)[aria-invalid="true"],
.v6-marketing[data-page-group="form"] :is(input,select,textarea)[aria-invalid="true"]:focus {
  border-color: var(--bad);
  background: color-mix(in srgb, var(--bad) 6%, var(--palette-white));
}
.v6-marketing[data-page-group="form"] .alert { border-radius: var(--radius-sm); }
.v6-marketing[data-page-group="form"] .alert-meta { letter-spacing: .02em; font-size: var(--fs-small); white-space: nowrap; }
.v6-marketing[data-page-group="form"] .a-danger { background: color-mix(in srgb, var(--bad) 6%, var(--palette-white)); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.v6-marketing[data-page-group="form"] .a-success { background: var(--surface-raised); border-color: color-mix(in oklab, var(--palette-ink) 40%, transparent); }
.v6-marketing[data-page-group="form"] .a-success .alert-meta { color: var(--co-accent-deep); }
.v6-marketing[data-page-group="form"] .a-success .alert-body span { color: var(--ink); }

.v6-marketing #successMessage[style*="grid"] .mk-completion {
  animation: mk-word-pass 1500ms ease-in-out 1 forwards;
}
.v6-marketing #successMessage[style*="grid"] .mk-completion::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 0;
  width: 42%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 38%, transparent), transparent);
  transform: translateX(-140%) skewX(-14deg);
  opacity: 0;
  animation: mk-light-pass 1500ms ease-in-out 1 forwards;
}
@media (prefers-reduced-motion: reduce) {
  .v6-marketing #successMessage[style*="grid"] .mk-completion { animation: none; }
  .v6-marketing #successMessage[style*="grid"] .mk-completion::after { animation: none; display: none; }
}

/* ── 404: whole page ink, no motion ────────────────────────────────── */
body.co-nf-page { background: var(--palette-ink); }
body.x-site.co-nf-page main.nf.mk-band--ink {
  width: 100%;
  max-width: none;
  min-height: 100svh;
  margin: 0;
  padding: var(--space-10) max(var(--page-gutter), calc((100% - var(--page-max)) / 2)) var(--space-9);
  background: var(--palette-ink);
}
body.co-nf-page .nf__code.mk-role-numeric {
  font-size: var(--fs-num-xl);
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.06em;
  color: var(--palette-on-ink);
}
body.co-nf-page .nf__title { margin-top: var(--space-6); font-size: var(--fs-num-xl); line-height: 1.12; letter-spacing: -.045em; color: var(--ink); }
body.co-nf-page .nf__lead { color: var(--muted); font-size: var(--fs-lead); }
body.co-nf-page .nf__link { color: var(--ink); }
body.co-nf-page .nf__more { border-top-color: var(--line-strong); }
@media (max-width: 700px) {
  body.x-site.co-nf-page main.nf.mk-band--ink { padding: var(--space-9) var(--page-gutter) var(--space-8); }
}

/* ── Footers: ink band from the layer; readable links on it. ───────── */
.v6-marketing-footer.xk-mini-footer { border-top: 0; color: var(--ink-inverse-2); }
.v6-marketing-footer.xk-mini-footer a { color: var(--ink-inverse); }
.v6-marketing-footer.xk-mini-footer .xk-foot-copy { color: var(--ink-inverse-2); }
.v6-marketing-footer :is(a,button):focus-visible { outline: 3px solid var(--ink-inverse); outline-offset: 4px; }

/* 좁은 화면: clamp() 글자 크기를 DS 토큰 두 단계로 나눈 작은 쪽(DS 준수 이관 2026-10-20) */
@media (max-width: 700px) {
  .v6-marketing .co-head h1 { font-size: var(--fs-h1); }
  body.x-site.v6-marketing[data-page-group="career"] .hero .hero-h1 { font-size: var(--fs-display); }
  body.x-site.v6-marketing[data-page-group="career"] .hero .hero-lead { font-size: var(--fs-lead); }
  /* ── Jobs list ─────────────────────────────────────────────────────── */
.v6-marketing[data-page-group="career"] .co-head .page-head h1 { font-size: var(--fs-h1); }
  .v6-marketing[data-page-group="form"] .co-head h1 { font-size: var(--fs-h1); }
  body.co-nf-page .nf__title { font-size: var(--fs-h2); }
}