/* Public marketing expression. Tokens stay in the design system. */
.v6-marketing .dark{background:var(--canvas);color:var(--ink)}
.v6-marketing .light{background:var(--palette-canvas);color:var(--palette-ink)}
.v6-marketing .mk-band--ink{background:var(--canvas);color:var(--ink)}
.v6-marketing .mk-band--paper{--accent:var(--palette-ink);background:var(--palette-canvas);color:var(--palette-ink)}
.v6-marketing .accent-on-dark{color:var(--accent)}
.v6-marketing .mk-accent{color:var(--accent)}
.v6-marketing .mk-role-review{background:color-mix(in oklab,var(--palette-ink) 12%,var(--palette-white));color:var(--palette-ink)}
.v6-marketing .mk-role-deep{color:var(--ink)}
.v6-marketing .mk-role-numeric{font-variant-numeric:tabular-nums;color:var(--ink)}
.v6-marketing .mk-band--ink .mk-role-numeric{color:var(--accent)}

/* One tonal gradient on the ink hero word; the other is the completion pass. */
.v6-marketing :is(.mk-gradient-word,.v6b-gradient-word){color:var(--accent)}
/* background-clip:text 는 요소 상자 안에서만 칠한다. 좁은 자간(-.07em)으로 마지막 글자(y 등)의 잉크가 상자
   오른쪽을 넘고, 디센더·받침이 아래를 넘으면 그 부분이 투명해진다. 칠 영역만 글리프 밖까지 넓히고(padding)
   같은 값의 음수 margin 으로 레이아웃은 그대로 둔다. 줄이 바뀌면 줄마다 같은 여유를 준다(clone). */
.v6-marketing :is(.mk-gradient-word,.v6b-gradient-word){
  padding:.12em .16em .26em .06em;
  margin:-.12em -.16em -.26em -.06em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .v6-marketing :is(.mk-gradient-word,.v6b-gradient-word){
    background-image:linear-gradient(100deg,color-mix(in oklab,var(--accent) 78%,var(--palette-ink)) 0%,var(--accent) 100%);
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
}

.v6-marketing :is(.mk-completion,.result-ribbon){position:relative;overflow:hidden}
.v6-marketing .mk-completion{display:inline-block;isolation:isolate}
.v6-marketing .result-ribbon span{position:relative;display:inline-block;overflow:hidden;isolation:isolate}
.v6-marketing .mk-completion.mk-sheen{animation:mk-word-pass 1500ms ease-in-out 1 forwards}
.v6-marketing .result-ribbon.mk-sheen span{animation:v6b-confirm-word 1500ms ease-in-out 1 forwards}
.v6-marketing .mk-completion.mk-sheen::after,
.v6-marketing .result-ribbon.mk-sheen span::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0 auto 0 0;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 38%,transparent),transparent);
}
.v6-marketing .mk-completion.mk-sheen::after{
  width:42%;
  transform:translateX(-140%) skewX(-14deg);
  animation:mk-light-pass 1500ms ease-in-out 1 forwards;
}
.v6-marketing .result-ribbon.mk-sheen span::after{
  width:45%;
  transform:translateX(-130%) skewX(-16deg);
  animation:v6b-sheen-pass 1500ms ease-in-out 1 forwards;
}
@keyframes mk-light-pass{
  0%{transform:translateX(-140%) skewX(-14deg);opacity:0}
  18%,80%{opacity:1}
  100%{transform:translateX(360%) skewX(-14deg);opacity:0}
}
@keyframes mk-word-pass{
  0%,100%{color:var(--palette-ink)}
  50%{color:var(--palette-ink)}
}
@keyframes v6b-sheen-pass{
  0%{transform:translateX(-130%) skewX(-16deg);opacity:0}
  15%{opacity:1}
  85%{opacity:1}
  100%{transform:translateX(320%) skewX(-16deg);opacity:0}
}
@keyframes v6b-confirm-word{
  0%,100%{color:var(--palette-ink)}
  50%{color:var(--palette-ink)}
}

/* Shared scroll-stage behavior. Without JS, every panel stays in document order. */
.v6-marketing[data-mk-ready]:not([data-mk-story-static]) [data-mk-story]{height:480svh}
.v6-marketing[data-mk-ready]:not([data-mk-story-static]) [data-mk-story] .mk-story__pin{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.v6-marketing:not([data-mk-ready]) [data-mk-step],
.v6-marketing:not([data-mk-ready]) [data-mk-status]{display:none}
.v6-marketing:not([data-mk-ready]) [data-mk-panel]+[data-mk-panel]{border-top:1px solid var(--palette-ice);margin-top: var(--space-6);padding-top: var(--space-6)}
.v6-marketing[data-mk-story-static] [data-mk-story],
.v6-marketing:not([data-mk-ready]) [data-mk-story]{height:auto}
.v6-marketing[data-mk-story-static] [data-mk-story] .mk-story__pin,
.v6-marketing:not([data-mk-ready]) [data-mk-story] .mk-story__pin{position:relative;height:auto;overflow:visible}

@media(prefers-reduced-motion:no-preference){
  html.js .v6-marketing :is(.reveal,.mk-appear){opacity:0;transition:opacity 700ms cubic-bezier(.22,1,.36,1),transform 700ms cubic-bezier(.22,1,.36,1)}
  html.js .v6-marketing .reveal{transform:translateY(32px)}
  html.js .v6-marketing .mk-appear{transform:translateY(24px)}
  html.js .v6-marketing :is(.reveal.visible,.mk-appear.mk-visible){opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .v6-marketing *,.v6-marketing *::before,.v6-marketing *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .v6-marketing :is(.reveal,.mk-appear){opacity:1!important;transform:none!important}
  .v6-marketing .mk-completion.mk-sheen,.v6-marketing .mk-completion.mk-sheen::after,.v6-marketing .result-ribbon.mk-sheen span,.v6-marketing .result-ribbon.mk-sheen span::after{animation:none}
  .v6-marketing .mk-completion.mk-sheen::after,.v6-marketing .result-ribbon.mk-sheen span::after{display:none}
  .v6-marketing [data-mk-story]{height:auto}
  .v6-marketing [data-mk-story] .mk-story__pin{position:relative;height:auto;overflow:visible}
}

/* Pages whose first band is ink: the shared header floats over that band and stays put
   while scrolling. Its colours follow the band underneath (global-nav.js · global-nav.css),
   so this layer only sets position. */
body[data-v6-dark-hero] .xk-gnav{position:fixed;left:0;right:0;top:0}

/* The company footer already supplies spacing and links. This class supplies the ink band. */
.v6-marketing-footer{background:var(--surface-inverse);color:var(--ink-inverse)}

/* 정보 띠는 라이트 토큰을 쓴다. */
.mk-band--ink{background:var(--canvas);color:var(--ink)}
.mk-band--paper :is(h2,h3,p,a){color:inherit}