/* Scene 11 — 전체 수익 막대를 세 원인으로 분해했다가 다시 합친다. */
.s11__inner {
  position: absolute;
  left: var(--ns-stage-inset);
  right: var(--ns-stage-inset);
  top: var(--ns-dimension-x14);
  bottom: var(--ns-dimension-x20);
  display: grid;
  grid-template-rows: auto 1fr;
}
.s11__feature {
  opacity: 0;
  transform: translateY(var(--ns-dimension-x9));
  transition: opacity 620ms var(--ns-timing-function-enter), transform 620ms var(--ns-timing-function-enter);
}
.s11[data-step="1"] .s11__feature,
.s11[data-step="2"] .s11__feature,
.s11[data-step="3"] .s11__feature,
.s11[data-step="4"] .s11__feature { opacity: 1; transform: none; }
.s11__feature .ns-feature-heading__index { margin-bottom: var(--ns-dimension-x4); }
.s11__analysis {
  position: relative;
  align-self: center;
  justify-self: center;
  width: 1000px;
  height: 640px;
  top: 30px;
  transform: scale(1.3);
  transform-origin: center center;
}
.s11__total {
  position: absolute;
  left: 0;
  top: 220px;
  width: 1000px;
  opacity: 0;
  transition: opacity 460ms var(--ns-timing-function-enter), transform 620ms var(--ns-timing-function-enter);
}
.s11__total-label {
  margin-bottom: var(--ns-dimension-x4);
  font-family: var(--ns-font-family-mono);
  font-size: var(--ns-font-size-t5);
  letter-spacing: 0.14em;
  color: var(--ns-color-fg-neutral-subtle);
}
.s11__total-value {
  display: block;
  margin-bottom: var(--ns-dimension-x6);
  font-family: var(--ns-font-family-mono);
  font-size: var(--ns-font-size-t14);
  line-height: 1;
  color: var(--ns-color-fg-up);
}
.s11__total-equation {
  display: flex;
  gap: var(--ns-dimension-x6);
  margin-bottom: var(--ns-dimension-x3);
  font-family: var(--ns-font-family-mono);
  font-size: var(--ns-font-size-t5);
}
.s11__gross-up { color: var(--ns-color-fg-up); }
.s11__gross-down { color: var(--ns-color-fg-down); }
.s11__total-range {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: var(--ns-dimension-x1);
  width: 100%;
  height: 104px;
}
.s11__total-loss,
.s11__total-gain {
  display: block;
  transform: scaleX(0);
  transition: transform 900ms var(--ns-timing-function-enter-expressive);
}
.s11__total-loss {
  width: 9.5%;
  border-radius: var(--ns-radius-r3) 0 0 var(--ns-radius-r3);
  background: var(--ns-color-bg-down-solid);
  transform-origin: right;
}
.s11__total-gain {
  width: 90.5%;
  border-radius: 0 var(--ns-radius-r3) var(--ns-radius-r3) 0;
  background: var(--ns-color-bg-up-solid);
  transform-origin: left;
}
.s11[data-step="1"] .s11__total { opacity: 1; }
.s11[data-step="1"] .s11__total-loss,
.s11[data-step="1"] .s11__total-gain { transform: scaleX(1); }
.s11[data-step="2"] .s11__total,
.s11[data-step="3"] .s11__total { opacity: 0; transform: scaleY(0.5); }
.s11[data-step="4"] .s11__total { opacity: 1; transform: translateY(-115px); }
.s11[data-step="4"] .s11__total-range,
.s11[data-step="4"] .s11__total-equation { opacity: 0; }
.s11__parts { position: absolute; inset: 0; }
.s11__part {
  position: absolute;
  left: 0;
  top: 260px;
  width: var(--part-width);
  opacity: 0;
  transition: left 820ms var(--ns-timing-function-enter-expressive), top 820ms var(--ns-timing-function-enter-expressive), width 820ms var(--ns-timing-function-enter-expressive), opacity 420ms var(--ns-timing-function-enter), transform 820ms var(--ns-timing-function-enter-expressive);
  transition-delay: calc(var(--item-index) * 100ms);
}
.s11[data-step="2"] .s11__part,
.s11[data-step="3"] .s11__part { top: var(--open-y); opacity: 1; }
.s11[data-step="4"] .s11__part { left: var(--merge-x); top: 260px; width: var(--merge-width); opacity: 1; }
.s11__part-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  min-width: var(--part-width);
  margin-bottom: var(--ns-dimension-x3);
  white-space: nowrap;
  font-size: var(--ns-font-size-t6);
}
.s11__part-head strong { margin-left: var(--ns-dimension-x4); font-family: var(--ns-font-family-mono); font-size: var(--ns-font-size-t8); color: var(--ns-color-fg-up); }
.s11__merge-value { display: none; }
.s11__part-bar {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 64px;
  border-radius: var(--ns-radius-r2);
  background: var(--ns-color-bg-up-solid);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 760ms var(--ns-timing-function-enter-expressive), opacity 320ms var(--ns-timing-function-easing);
  transition-delay: calc(160ms + var(--item-index) * 120ms);
}
.s11__part:nth-child(2) .s11__part-bar { background: color-mix(in srgb, var(--ns-color-bg-up-solid) 68%, var(--ns-color-bg-layer-default)); }
.s11__part:nth-child(3) .s11__part-bar { background: color-mix(in srgb, var(--ns-color-bg-up-solid) 46%, var(--ns-color-bg-layer-default)); }
.s11[data-step="2"] .s11__part-bar,
.s11[data-step="3"] .s11__part-bar,
.s11[data-step="4"] .s11__part-bar { transform: scaleX(1); }
.s11[data-step="4"] .s11__part-bar {
  border-left: var(--ns-dimension-x1) solid var(--ns-color-bg-layer-default);
  border-radius: 0;
}
.s11[data-step="4"] .s11__part:last-child .s11__part-bar { border-radius: 0 var(--ns-radius-r2) var(--ns-radius-r2) 0; }
.s11__reason {
  width: 430px;
  margin-top: var(--ns-dimension-x3);
  font-size: var(--ns-font-size-t6);
  line-height: 1.5;
  color: var(--ns-color-fg-neutral-muted);
  opacity: 0;
  transform: translateY(var(--ns-dimension-x2));
  transition: opacity 420ms var(--ns-timing-function-enter), transform 520ms var(--ns-timing-function-enter);
}
.s11[data-step="3"] .s11__reason { opacity: 1; transform: none; }
.s11__stock-breakdown {
  position: absolute;
  left: 460px;
  top: 285px;
  width: 540px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--ns-dimension-x4));
  transition: opacity 460ms var(--ns-timing-function-enter), transform 560ms var(--ns-timing-function-enter), visibility 0s linear 560ms;
}
.s11[data-step="3"] .s11__stock-breakdown {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 180ms, 180ms, 0s;
}
.s11__stocks-title {
  margin-bottom: var(--ns-dimension-x3);
  font-size: var(--ns-font-size-t6);
  line-height: var(--ns-line-height-t6);
  font-weight: var(--ns-font-weight-bold);
}
.s11__stocks {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--ns-dimension-x3);
  width: 100%;
}
.s11__stocks::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 80px;
  height: 1px;
  background: var(--ns-color-stroke-neutral-weak);
}
.s11__stocks li {
  position: relative;
  display: grid;
  grid-template-rows: 160px auto;
  justify-items: center;
  opacity: 0;
  transform: translateY(var(--ns-dimension-x2));
  transition: opacity 380ms var(--ns-timing-function-enter), transform 460ms var(--ns-timing-function-enter);
  transition-delay: calc(260ms + var(--stock-index) * 120ms);
}
.s11__stock-plot { position: relative; width: 100%; height: 160px; }
.s11__stock-bar {
  position: absolute;
  z-index: 1;
  left: 50%;
  width: var(--ns-dimension-x6);
  height: var(--stock-height);
  border-radius: var(--ns-radius-r1);
  transform: translateX(-50%) scaleY(0);
  transition: transform 620ms var(--ns-timing-function-enter-expressive);
  transition-delay: calc(300ms + var(--stock-index) * 90ms);
}
.s11__stocks li[data-direction="up"] .s11__stock-bar { bottom: 50%; transform-origin: bottom; background: var(--ns-color-bg-up-solid); }
.s11__stocks li[data-direction="down"] .s11__stock-bar { top: 50%; transform-origin: top; background: var(--ns-color-bg-down-solid); }
.s11__stock-value {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--ns-font-family-mono);
  font-size: var(--ns-font-size-t5);
  white-space: nowrap;
}
.s11__stocks li[data-direction="up"] .s11__stock-value { bottom: calc(50% + var(--stock-height) + var(--ns-dimension-x2)); color: var(--ns-color-fg-up); }
.s11__stocks li[data-direction="down"] .s11__stock-value { top: calc(50% + var(--stock-height) + var(--ns-dimension-x2)); color: var(--ns-color-fg-down); }
.s11__stock-name { font-size: var(--ns-font-size-t5); white-space: nowrap; color: var(--ns-color-fg-neutral-subtle); }
.s11[data-step="3"] .s11__stocks li { opacity: 1; transform: none; }
.s11[data-step="3"] .s11__stock-bar { transform: translateX(-50%) scaleY(1); }
.s11[data-step="3"] .s11__part--stocks .s11__part-bar { opacity: 0; transform: scaleX(0); }
.s11[data-step="4"] .s11__part-head { position: relative; z-index: 1; transform: translateY(var(--ns-dimension-x10)); }
.s11[data-step="4"] .s11__part-head { min-width: 100%; }
.s11[data-step="4"] .s11__part-head span { display: none; }
.s11[data-step="4"] .s11__part-head strong { width: 100%; margin: 0; text-align: center; color: var(--ns-color-fg-neutral-inverted); }
.s11[data-step="4"] .s11__part-value { display: none; }
.s11[data-step="4"] .s11__merge-value { display: block; }
.s11[data-step="4"] .s11__reason,
.s11[data-step="4"] .s11__stock-breakdown { display: none; }
.s11__merge-loss {
  position: absolute;
  left: 0;
  top: 294px;
  display: grid;
  place-items: center;
  width: 95px;
  height: 64px;
  border-radius: var(--ns-radius-r2) 0 0 var(--ns-radius-r2);
  background: var(--ns-color-bg-down-solid);
  color: var(--ns-color-fg-neutral-inverted);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: right;
  transition: opacity 320ms var(--ns-timing-function-enter), transform 760ms var(--ns-timing-function-enter-expressive);
}
.s11__merge-loss strong { font-family: var(--ns-font-family-mono); font-size: var(--ns-font-size-t7); }
.s11[data-step="4"] .s11__merge-loss { opacity: 1; transform: scaleX(1); }
.s11__takeaway {
  position: absolute;
  left: 0;
  top: 455px;
  max-width: 920px;
  font-size: var(--ns-font-size-t10);
  line-height: var(--ns-line-height-t10);
  letter-spacing: -0.025em;
  font-weight: var(--ns-font-weight-bold);
  opacity: 0;
  transform: translateY(var(--ns-dimension-x5));
  transition: opacity 520ms var(--ns-timing-function-enter) 620ms, transform 620ms var(--ns-timing-function-enter) 620ms;
}
.s11[data-step="4"] .s11__takeaway { opacity: 1; transform: none; }