/* scene-08.css — Scene 8 「AI 종목 분석 / Noise to Signal」 (기획 8절)
   391건이 4건으로 줄어드는 과정을 숫자가 아니라 실제 조각의 제거로 보여 준다.
   조각이 391개라 DOM 80개 제한(기획 11절)을 넘으므로 Canvas로 그린다. */

.s8__inner {
  display: grid;
  justify-items: center;
  gap: var(--ns-dimension-x8);
  width: 1680px;
  transition: opacity 620ms var(--ns-timing-function-easing),
              transform 620ms var(--ns-timing-function-enter);
}

.s8__phase {
  font-family: var(--ns-font-family-mono);
  font-size: var(--ns-font-size-t9);
  line-height: 1;
  letter-spacing: 0.28em;
  color: var(--ns-color-fg-neutral-subtle);
  height: 32px;
  opacity: 0;
  transition: opacity 420ms var(--ns-timing-function-easing);
}
.s8[data-phase] .s8__phase { opacity: 1; }

.s8__count {
  font-family: var(--ns-font-family-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--ns-font-size-display);
  line-height: 1;
  font-weight: var(--ns-font-weight-bold);
  color: var(--ns-color-fg-neutral);
}
.s8__label {
  font-family: var(--ns-font-family-mono);
  font-size: var(--ns-font-size-t8);
  line-height: 1;
  letter-spacing: 0.2em;
  color: var(--ns-color-fg-neutral-muted);
}
.s8__head { display: grid; justify-items: center; gap: var(--ns-dimension-x4); opacity: 0; transition: opacity 520ms var(--ns-timing-function-enter); }
.s8[data-step="1"] .s8__head, .s8[data-step="2"] .s8__head,
.s8[data-step="3"] .s8__head, .s8[data-step="4"] .s8__head { opacity: 1; }

.s8__field { position: relative; width: 1680px; height: 440px; }
.s8__canvas { width: 100%; height: 100%; opacity: 0; transition: opacity 520ms var(--ns-timing-function-easing); }
.s8[data-step="1"] .s8__canvas, .s8[data-step="2"] .s8__canvas,
.s8[data-step="3"] .s8__canvas, .s8[data-step="4"] .s8__canvas { opacity: 1; }

/* 네 개의 개인 신호 중 하나가 실제 종목 분석 리포트로 확장된다. */
.s8__analysis {
  position: absolute;
  left: var(--ns-stage-inset);
  right: var(--ns-stage-inset);
  top: var(--ns-dimension-x24);
  bottom: var(--ns-dimension-x30);
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: var(--ns-dimension-x10);
  opacity: 0;
  transform: translateY(var(--ns-dimension-x10));
  pointer-events: none;
  transition: opacity 620ms var(--ns-timing-function-enter),
              transform 720ms var(--ns-timing-function-enter);
}
.s8[data-step="5"] .s8__analysis,
.s8[data-step="6"] .s8__analysis { opacity: 1; transform: none; }

.s8__analysis-head { grid-column: 1; grid-row: 1 / span 2; }
.s8__analysis-body {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  gap: var(--ns-dimension-x6);
  padding-top: var(--ns-dimension-x0_5);
}
.s8__summary-card {
  align-self: stretch;
  display: grid;
  grid-template-rows: auto auto auto minmax(150px, 1fr) auto;
  padding: var(--ns-dimension-x10);
  border: 1px solid var(--ns-color-stroke-neutral-weak);
  border-radius: var(--ns-radius-r5);
  background: var(--ns-color-bg-layer-default);
  box-shadow: var(--ns-shadow-s2);
}
.s8__company {
  margin-bottom: var(--ns-dimension-x6);
  font-size: var(--ns-font-size-t7);
  color: var(--ns-color-fg-neutral-subtle);
}
.s8__event {
  margin-bottom: var(--ns-dimension-x6);
  font-size: var(--ns-font-size-t13);
  line-height: var(--ns-line-height-t13);
  letter-spacing: -0.04em;
  font-weight: var(--ns-font-weight-bold);
}
.s8__current {
  font-size: var(--ns-font-size-t8);
  line-height: 1.65;
  color: var(--ns-color-fg-neutral-muted);
}
.s8__recent {
  margin-top: var(--ns-dimension-x9);
  font-size: var(--ns-font-size-t7);
  line-height: 1.5;
  color: var(--ns-color-fg-informative);
}
.s8__recent span {
  display: block;
  margin-bottom: var(--ns-dimension-x2);
  font-size: var(--ns-font-size-t5);
  color: var(--ns-color-fg-neutral-subtle);
}
.s8__mini-chart { margin: 0; }
.s8__mini-chart--bars { height: 66px; }
.s8__mini-chart--bars > div {
  display: flex;
  align-items: end;
  gap: var(--ns-dimension-x2);
  height: 100%;
  padding-top: var(--ns-dimension-x2);
}
.s8__mini-chart--bars i {
  flex: 1;
  height: var(--bar);
  min-width: 4px;
  border-radius: 2px 2px 0 0;
  background: var(--ns-color-fg-neutral-muted);
  opacity: 0.2;
  transform: scaleY(0.08);
  transform-origin: bottom;
  transition: transform 620ms var(--ns-timing-function-enter-expressive), opacity 420ms var(--ns-timing-function-enter);
  transition-delay: calc(520ms + var(--bar-index) * 55ms);
}
.s8__mini-chart--bars[data-tone="up"] i { background: var(--ns-color-fg-up); }
.s8__mini-chart--bars[data-tone="down"] i { background: var(--ns-color-fg-down); }
.s8__summary-card .s8__mini-chart { align-self: stretch; height: auto; margin-top: var(--ns-dimension-x8); }
.s8__factor-card .s8__mini-chart--bars { height: 54px; }
.s8__mini-chart--allocation { display: grid; align-items: center; height: 54px; }
.s8__mini-chart--allocation > div {
  position: relative;
  height: 12px;
  border-radius: var(--ns-radius-full);
  background: var(--ns-color-bg-neutral-weak);
}
.s8__mini-chart--allocation i {
  position: absolute;
  inset: 0 40% 0 0;
  border-radius: inherit;
  background: var(--ns-color-fg-up);
  transform: scaleX(0.05);
  transform-origin: left;
  transition: transform 780ms var(--ns-timing-function-enter-expressive) 620ms;
}
.s8__mini-chart--allocation b {
  position: absolute;
  left: 60%;
  bottom: calc(100% + var(--ns-dimension-x2));
  transform: translateX(-50%);
  font-family: var(--ns-font-family-mono);
  font-size: var(--ns-font-size-t4);
  color: var(--ns-color-fg-up);
  opacity: 0;
  transition: opacity 360ms var(--ns-timing-function-enter) 1060ms;
}
.s8__factor-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ns-dimension-x5);
}
.s8__factor-card {
  display: grid;
  align-content: space-between;
  min-height: 220px;
  padding: var(--ns-dimension-x7);
  border: 1px solid var(--ns-color-stroke-neutral-weak);
  border-radius: var(--ns-radius-r4);
  background: var(--ns-color-bg-layer-default);
  opacity: 0;
  transform: translateY(var(--ns-dimension-x6));
  transition: opacity 420ms var(--ns-timing-function-enter), transform 520ms var(--ns-timing-function-enter);
  transition-delay: calc(var(--item-index) * 100ms);
}
.s8__factor-card span { font-size: var(--ns-font-size-t5); line-height: var(--ns-line-height-t5); color: var(--ns-color-fg-neutral-subtle); }
.s8__factor-card strong { font-size: var(--ns-font-size-t8); line-height: 1.38; letter-spacing: -0.025em; }
.s8__factor-card:nth-child(3) strong { color: var(--ns-color-fg-up); }
.s8[data-step="6"] .s8__factor-card { opacity: 1; transform: none; }
.s8[data-step="6"] .s8__mini-chart--bars i { opacity: 0.72; transform: scaleY(1); }
.s8[data-step="6"] .s8__summary-card .s8__mini-chart--bars i { opacity: 0.82; transform: scaleY(1); }
.s8[data-step="6"] .s8__mini-chart--allocation i { transform: scaleX(1); }
.s8[data-step="6"] .s8__mini-chart--allocation b { opacity: 1; }
.s8__next-card {
  grid-column: 2;
  align-self: end;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--ns-dimension-x5);
  padding: var(--ns-dimension-x6) var(--ns-dimension-x8);
  border-radius: var(--ns-radius-r4);
  background: var(--ns-color-bg-neutral-weak);
  opacity: 0;
  transition: opacity 420ms var(--ns-timing-function-enter) 420ms;
}
.s8__next-card span { font-size: var(--ns-font-size-t6); color: var(--ns-color-fg-neutral-subtle); }
.s8__next-card strong { font-size: var(--ns-font-size-t9); }
.s8[data-step="6"] .s8__next-card { opacity: 1; }

.s8[data-step="5"] .s8__inner,
.s8[data-step="6"] .s8__inner { opacity: 0; transform: scale(0.96); }