/* scene-02.css — Scene 2 「바쁘다 바빠 현대사회」 (기획 8절)
   나의 하루와 시장의 하루를 하나의 세로 타임라인에 쌓는다.
   시장 이벤트가 끼어들수록 개인 일정의 너비와 간격이 줄고, 끝내 가느다란 선으로 압축된다. */

.s2__timeline {
  position: absolute;
  inset: var(--ns-stage-inset);
  z-index: var(--ns-z-basement);
}

/* 행은 절대 배치하고 transform 으로만 움직인다 (기획 11절) */
.s2__row {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1000px;
  margin-left: -500px;
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: center;
  gap: var(--ns-dimension-x8);
  transform-origin: left top;
  transition: transform 620ms var(--ns-timing-function-enter-expressive),
              opacity 480ms var(--ns-timing-function-easing);
}

.s2__time {
  font-family: var(--ns-font-family-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--ns-font-size-t9);
  line-height: 1;
  color: var(--ns-color-fg-neutral-subtle);
  text-align: right;
}

/* 나의 일정 — 잉크로 채운 막대. 압축되면 글자가 사라지고 선만 남는다 */
.s2__me {
  display: flex;
  align-items: center;
  height: 96px;
  padding: 0 var(--ns-dimension-x8);
  border-radius: var(--ns-radius-r3);
  background: var(--ns-color-bg-neutral-solid);
  color: var(--ns-color-fg-neutral-inverted);
  font-size: var(--ns-font-size-t12);
  font-weight: var(--ns-font-weight-bold);
}
.s2__me span { transition: opacity 420ms var(--ns-timing-function-easing); }

/* 시장 이벤트 — Scene 1에서 쏟아지던 그 카드가 하루 사이로 끼어든다 */
.s2__market { display: flex; }
.s2__market .ns-event {
  font-size: var(--ns-font-size-t9);
  line-height: var(--ns-line-height-t9);
  padding: var(--ns-dimension-x4) var(--ns-dimension-x6);
  box-shadow: var(--ns-shadow-s1);
}
.s2__market .ns-event__icon { --ns-icon-size: 26px; }

/* 카피는 타임라인 위에 겹치고, 뒤에만 종이색 어둠을 깐다 (Scene 1과 같은 방식) */
.s2__lines {
  position: relative;
  z-index: var(--ns-z-default);
  display: grid;
  place-items: center;
  width: 1680px;
  text-align: center;
}
.s2__lines::before {
  content: "";
  position: absolute;
  inset: -240px -320px;
  background: radial-gradient(ellipse at center,
    var(--ns-color-bg-layer-basement) 0%,
    var(--ns-color-bg-layer-basement) 32%,
    transparent 72%);
  opacity: 0;
  transition: opacity 1000ms var(--ns-timing-function-enter);
  pointer-events: none;
}
.s2__lines[data-veil="true"]::before { opacity: 0.9; }  /* 압축된 선이 카피 뒤로 비치도록 */
.s2__line {
  position: relative;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 380ms var(--ns-timing-function-exit), transform 380ms var(--ns-timing-function-exit);
}
.s2__line[data-show="true"] {
  opacity: 1;
  transform: none;
  transition: opacity 620ms 360ms var(--ns-timing-function-enter), transform 620ms 360ms var(--ns-timing-function-enter);
}