/* AX pages: 6판-B public marketing surface. Shared layer: /css/v6-marketing.css.
   Loaded last on /ax/* and /docs/ax-roadmap. Values come from design tokens only. */

/* ── Ink-first pages: the AX sub-navigation sits under the fixed shared header ──
   The sub-bar box reaches up under the header (padding, not margin) and paints the canvas of the
   current tone, so the translucent header and the sub-bar sit on the same ink as the hero instead of
   the light page ground (#2d2d2d). Colours follow the band underneath together with the header
   (global-nav.js sets data-theme on both). */
body[data-v6-dark-hero] .xk-subbar{margin-top:0;padding-top:var(--xk-gnav-h);top:0;background:var(--canvas)}

/* ── Bands ── */
body.public-site .v6-marketing .mk-band--ink{background:var(--palette-ink);color:var(--palette-on-ink)}
body.public-site .v6-marketing .mk-band--paper{background:var(--palette-canvas);color:var(--palette-ink)}

/* Hero: ink band, one tonal key phrase (the layer paints .mk-gradient-word). */
body.public-site .v6-marketing .hero.mk-band--ink{padding-block: var(--gap-section, var(--space-7)) var(--gap-section, var(--space-7))}
body.public-site .v6-marketing .hero.mk-band--ink h1{max-width:1040px;font-size: var(--fs-num-xl);font-weight:450;line-height:1.1;letter-spacing:-.05em;color:var(--palette-white)}
body.public-site .v6-marketing .hero.mk-band--ink p{color:var(--muted)}
body.public-site .v6-marketing .hero.mk-band--ink .badge{color:var(--muted)}
/* 칠 영역 여유는 공용 레이어(v6-marketing.css)가 준다. 여기서는 기존 줄 높이(+.06em)만 유지한다. */
body.public-site .v6-marketing .mk-gradient-word{display:inline-block;padding-bottom:.32em;margin-bottom:-.26em}

/* Section heads on the marketing bands */
body.public-site .v6-marketing .sec-title{font-weight:450;letter-spacing:-.045em}
body.public-site .v6-marketing .mk-band--ink :is(.sec-title,h2,h3){color:var(--palette-white)}
body.public-site .v6-marketing .mk-band--ink :is(.sec-desc,p){color:var(--muted)}

/* Closing CTA: full-bleed ink band. Primary action stays monochrome. */
body.public-site .v6-marketing .cta-section.mk-band--ink{background:var(--palette-ink);color:var(--palette-on-ink);padding-block: var(--gap-section, var(--space-7))}
body.public-site .v6-marketing .cta-section.mk-band--ink :is(h2,p){color:var(--palette-on-ink)}
body.public-site .v6-marketing .cta-section.mk-band--ink h2{font-size: var(--fs-h1);letter-spacing:-.045em}
body.public-site .v6-marketing .cta-section.mk-band--ink p{color:var(--muted)}

/* ── Shared AX overview, project and education scale ── */
/* Shared scale stays readable immediately, including without motion or JavaScript. */
body.public-site .v6-marketing .cred-band{padding-block: var(--space-7);padding-inline:0}
body.public-site .v6-marketing .cred-header{display:flex;align-items:center;justify-content:center;gap: var(--space-3);margin-bottom: var(--space-6)}
body.public-site .v6-marketing .cred-header-text{font-family:var(--font);font-size:var(--fs-caption);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
body.public-site .v6-marketing .cred-band .x-table td{vertical-align:baseline}
/* Keep words whole in narrow table columns (English row labels and the unit after a count). */
body.public-site .v6-marketing .x-table tbody th{overflow-wrap:normal;word-break:keep-all}
body.public-site .v6-marketing .cred-band .x-table td{white-space:nowrap}
body.public-site .v6-marketing .ax-count{font-size: var(--fs-h1);font-weight:450;line-height:1;letter-spacing:-.04em}
/* The unit is its own text node so English gets its own word (" organizations"), and the accessible name keeps the space. */
body.public-site .v6-marketing .ax-unit{margin-left: var(--space-1)}

/* ── /ax/ overview ── */

/* Build method: shared scroll stages (data-mk-story). */
body.public-site .v6-marketing .ax-build{padding-block:0}
body.public-site .v6-marketing .ax-build .mk-story__pin{padding-block: var(--gap-section, var(--space-7))}
/* Top-aligned pin: the head stays still while panel heights change between steps. */
body.public-site .v6-marketing[data-mk-ready]:not([data-mk-story-static]) .ax-build .mk-story__pin{align-items:flex-start;padding-block: var(--gap-section, var(--space-7)) var(--space-5)}
.v6-marketing .ax-build-inner{width:100%}
.v6-marketing .ax-build-head{text-align:left}
body.public-site .v6-marketing .ax-build-head :is(.sec-title,.sec-desc){text-align:left;margin-inline:0;max-width:760px}
.v6-marketing .ax-eyebrow{font-size: var(--fs-small);font-weight:550;letter-spacing:.04em;color:var(--muted);margin-bottom: var(--space-4)}
.v6-marketing .ax-shell{display:grid;grid-template-columns:minmax(220px,.34fr) minmax(0,.66fr);gap: var(--gap-section, var(--space-7));margin-top: var(--gap-section, var(--space-7));align-items:start}
.v6-marketing .ax-steps{display:grid;border-top:1px solid var(--line-strong)}
.v6-marketing .ax-step{display:block;width:100%;border:0;border-bottom:1px solid var(--line-strong);background:transparent;color:var(--muted);padding: var(--space-4) 0;text-align:left;font:inherit;font-size: var(--fs-body);line-height:1.4;cursor:pointer;transition: color var(--t-2) var(--ease-out)}
.v6-marketing .ax-step:hover{color:var(--ink)}
.v6-marketing .ax-step[aria-selected="true"]{color:var(--ink);font-weight:550;text-decoration:underline;text-underline-offset:6px}
.v6-marketing .ax-step:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.v6-marketing .ax-detail{display:grid;gap: var(--space-5);align-content:start}
.v6-marketing .ax-panel{display:grid;gap: var(--space-4);align-content:start}
.v6-marketing .ax-panel[hidden]{display:none}
.v6-marketing .ax-kicker{font-size: var(--fs-small);font-weight:550;letter-spacing:.06em;color:var(--muted)}
body.public-site .v6-marketing .ax-panel h3{font-size: var(--fs-h1);font-weight:450;line-height:1.18;letter-spacing:-.045em;color:var(--palette-white)}
body.public-site .v6-marketing .ax-panel p{max-width:620px;font-size: var(--fs-body);line-height:1.7;color:var(--muted)}
body.public-site .v6-marketing .ax-panel .text-link{color:var(--palette-white);text-decoration:underline;text-underline-offset:5px;justify-self:start}
.v6-marketing .ax-contact{justify-self:start}
/* Human check: pale cell + the words, not colour alone. */
body.public-site .v6-marketing .ax-review{display:grid;gap: var(--space-2);max-width:620px;padding: var(--space-4) var(--space-4);border-radius: var(--radius-md)}
body.public-site .v6-marketing .ax-review .ax-review-label{font-size: var(--fs-small);font-weight:550}
body.public-site .v6-marketing .mk-band--ink .ax-review p{color:var(--palette-ink)}
/* The completion pass sits on ink: keep the word light while the sheen runs once. */
@media(prefers-reduced-motion:no-preference){
  body.public-site .v6-marketing .mk-band--ink .mk-completion.mk-sheen{animation-name:ax-word-pass-ink}
}
@keyframes ax-word-pass-ink{0%,100%{color:var(--palette-white)}50%{color:var(--palette-on-ink)}}

/* Talent steps stay on paper; the card itself is a DS .panel (css/pages/ax-inquiry.css). */
body.public-site .v6-marketing .talent-step{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding: var(--space-4) 0}

/* ── Service subpages ── */
body.public-site .v6-marketing .feature-card{background:var(--palette-white);border:0;border-radius: var(--radius-md);box-shadow:var(--panel-shadow);-webkit-backdrop-filter:none;backdrop-filter:none}
body.public-site .v6-marketing .feature-card:hover{transform:none}
body.public-site .v6-marketing .process-grid{grid-template-columns:1fr;gap:0;max-width:920px;margin-inline:auto;border-top:1px solid var(--line-strong)}
body.public-site .v6-marketing .process-grid::before{content:none;display:none}
body.public-site .v6-marketing .process-step{display:grid;grid-template-columns:minmax(180px,.4fr) minmax(0,.6fr);gap: var(--space-6);align-items:baseline;padding: var(--space-5) 0;background:transparent;border:0;border-bottom:1px solid var(--line-strong);border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;text-align:left}
body.public-site .v6-marketing .process-step>div{display:contents}
body.public-site .v6-marketing .process-step h4{font-size: var(--fs-h3);font-weight:500;letter-spacing:-.02em;margin:0}
body.public-site .v6-marketing .process-step p{font-size: var(--fs-body);line-height:1.7}

body.public-site .v6-marketing .feature-section.mk-band--paper{padding-block: var(--gap-section, var(--space-7))}
/* Education hub */
body.public-site .v6-marketing .program-card .badge{align-self:flex-start}
body.public-site .v6-marketing .program-card{background:var(--palette-white);border:0;border-radius: var(--radius-md);box-shadow:var(--panel-shadow);-webkit-backdrop-filter:none;backdrop-filter:none}
body.public-site .v6-marketing .program-card ul{gap:0;margin-top:0;border-top:1px solid var(--line)}
body.public-site .v6-marketing .program-card li{padding: var(--space-3) 0;border-bottom:1px solid var(--line)}

@media(max-width:900px){
  .v6-marketing .ax-shell{grid-template-columns:1fr;gap: var(--space-5)}
  .v6-marketing .ax-steps{display:flex;gap: var(--space-2);overflow-x:auto;border:0;scrollbar-width:none;padding-bottom: var(--space-1)}
  .v6-marketing .ax-steps::-webkit-scrollbar{display:none}
  .v6-marketing .ax-step{flex:none;width:auto;border:1px solid var(--secondary-border);border-radius: var(--radius-input);padding: var(--space-2) var(--space-3);font-size: var(--fs-small);white-space:nowrap}
  .v6-marketing .ax-step[aria-selected="true"]{background:var(--selected-fill);text-decoration:none}
  .v6-marketing .ax-step:focus-visible{outline-offset:-4px} /* 가로 스크롤 줄이 바깥 링 위·아래를 잘라 「( )」 조각이 남지 않게 링을 칩 안쪽에 둔다 */
}
@media(max-width:768px){
  body.public-site .v6-marketing .process-step{grid-template-columns:1fr;gap: var(--space-2);padding: var(--space-5) 0}
  body.public-site .v6-marketing[data-mk-ready]:not([data-mk-story-static]) .ax-build .mk-story__pin{padding-block: var(--space-8) var(--space-4)}
  body.public-site .v6-marketing .ax-build .sec-desc{font-size: var(--fs-body);margin-top: var(--space-3)}
  body.public-site .v6-marketing .ax-panel h3{font-size: var(--fs-h3)}
  body.public-site .v6-marketing .ax-panel p{font-size: var(--fs-body);line-height:1.6}
  .v6-marketing .ax-detail{gap: var(--space-4)}
  .v6-marketing .ax-panel{gap: var(--space-3)}
}
@media(max-height:720px) and (max-width:768px){
  body.public-site .v6-marketing[data-mk-ready]:not([data-mk-story-static]) .ax-build .sec-desc{display:none}
}
/* Short phones (iPhone SE class): the tallest step still has to fit under the top-aligned head. */
@media(max-height:600px) and (max-width:768px){
  body.public-site .v6-marketing[data-mk-ready]:not([data-mk-story-static]) .ax-build .mk-story__pin{padding-block: var(--space-7) var(--space-3)}
  body.public-site .v6-marketing[data-mk-ready]:not([data-mk-story-static]) .ax-build .ax-shell{margin-top: var(--space-4)}
  body.public-site .v6-marketing[data-mk-ready]:not([data-mk-story-static]) .ax-build .ax-detail{gap: var(--space-3)}
}

/* ── Document surface: /docs/ax-roadmap. No bands, no gradient, no motion. ── */
/* Head: one ink band with one light key word. The rest of the page stays light. */
body[data-surface="document"] .ax-doc-head{--accent:var(--palette-on-ink);padding:0;background:var(--palette-ink);color:var(--palette-on-ink)}
body[data-surface="document"] .ax-doc-head__inner{width:min(var(--page-max),calc(100% - 2 * var(--page-gutter)));margin:0 auto;padding: var(--gap-section, var(--space-7)) 0 var(--gap-section, var(--space-7))}
body[data-surface="document"] .ax-doc-head .toolbar{padding-top:0;margin-bottom:0;border-bottom-color:var(--line)}
body[data-surface="document"] .ax-doc-head .toolbar h1{color:var(--palette-white)}
body[data-surface="document"] .ax-doc-head .ax-doc-accent{color:var(--accent)}
body[data-surface="document"] .ax-doc-head .meta{color:var(--muted)}
body[data-surface="document"] .ax-doc-head .intro{color:var(--muted);margin-bottom:0}
/* Legend: samples of the real required/optional node styles, no clickable-looking pills. */
body[data-surface="document"] .legend{display:flex;flex-wrap:wrap;align-items:center;gap: var(--space-3) var(--space-6);margin:0;padding: var(--space-1) 0 var(--space-4)}
body[data-surface="document"] .legend .item{display:flex;align-items:center;gap: var(--space-3);color:var(--ink-2)}
body[data-surface="document"] .legend dd{margin:0}
body[data-surface="document"] .legend .rm-node{padding: var(--space-1) var(--space-2);cursor:default}
body[data-surface="document"] .track-col{background:var(--surface-raised);border:0;border-radius: var(--radius-md);box-shadow:var(--panel-shadow)}
body[data-surface="document"] .roadmap-cta{background:var(--surface-raised);border:0;border-radius: var(--radius-md);box-shadow:var(--panel-shadow)}
/* Long English node labels wrap instead of running past the viewport (body clips overflow-x). */
@media(max-width:768px){body[data-surface="document"] .rm-node{white-space:normal;max-width:100%}}
/* The shared team data keeps one parenthetical on one line; on phones the English version is wider than the card. */
@media(max-width:768px){body.public-site .v6-marketing .team-focus span[style*="nowrap"]{white-space:normal!important}}

/* 좁은 화면: clamp() 글자 크기를 DS 토큰 두 단계로 나눈 작은 쪽(DS 준수 이관 2026-10-20) */
@media (max-width: 700px) {
  body.public-site .v6-marketing .hero.mk-band--ink h1 { font-size: var(--fs-h1); }
  body.public-site .v6-marketing .cta-section.mk-band--ink h2 { font-size: var(--fs-h2); }
  body.public-site .v6-marketing .ax-count { font-size: var(--fs-h2); }
  body.public-site .v6-marketing .ax-panel h3 { font-size: var(--fs-h2); }
  body.public-site .v6-marketing .process-step h4 { font-size: var(--fs-lead); }
}