/* story.css — 상세페이지 움직임 두 가지. 28번회차 시험판.
   색·글꼴·그림자는 style.css 가 이미 쓰는 변수에서만 가져온다. 새 색 0.
   1) .story  — 8단계 구간 스크롤텔링(붙은 사진 여섯 장면)
   2) .srl    — 시설 설명 구간 자동 넘김 릴(한 번에 한 장) */

/* ── 1. 스크롤텔링 ─────────────────────────────────────────── */
.story {
  --story-scene: 62svh;          /* 한 장면을 지나는 데 내리는 길이 */
  --story-n: 6;
  margin-bottom: 56px;
}
.story__track {
  position: relative;
  height: calc(100svh + var(--story-n) * var(--story-scene));
}
.story__sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.story__stage {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 28px;
  align-items: center;
}
.story__frames {
  position: relative;
  aspect-ratio: 4 / 3;
  max-height: 74svh;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--c-navy-deep);
  box-shadow: var(--shadow-lg);
}
.story__frame {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity .6s var(--ease);
  will-change: opacity;
}
.story__frame.is-on { opacity: 1; }
.story__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--z, 1));
  transform-origin: 50% 50%;
  will-change: transform;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}
.story__cap { display: none; }        /* 움직임이 돌 때는 딱지를 옆칸에서 보인다 */

.story__side { color: #fff; }
.story__num {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-sky-light);
  margin-bottom: 10px;
}
.story__num span { opacity: .6; }
.story__tag {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.02em;
  min-height: 2.5em;
}
.story__bar {
  display: grid;
  grid-template-columns: repeat(var(--story-n), 1fr);
  gap: 6px;
  margin-top: 22px;
}
.story__seg {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  transition: background .35s var(--ease);
}
.story__seg.is-on { background: var(--c-sky-light); }
.story__seg.is-done { background: rgba(91, 163, 214, .5); }

/* 밝은 바탕 구간에 놓일 때 — 글자색만 바꾼다 */
.section:not(.section--navy) .story__side { color: var(--c-navy); }
.section:not(.section--navy) .story__num { color: var(--c-sky); }
.section:not(.section--navy) .story__seg { background: rgba(10, 31, 63, .16); }
.section:not(.section--navy) .story__seg.is-on { background: var(--c-navy); }
.section:not(.section--navy) .story__seg.is-done { background: rgba(10, 31, 63, .45); }

@media (max-width: 900px) {
  .story { --story-scene: 58svh; }
  .story__stage {
    grid-template-columns: 1fr;
    gap: 16px;
    align-content: center;
  }
  .story__frames { aspect-ratio: 4 / 3; max-height: 56svh; }
  .story__tag { font-size: 20px; min-height: 1.4em; }
  .story__num { font-size: 13px; margin-bottom: 6px; }
  .story__bar { margin-top: 14px; }
}

/* 동작 줄이기 — 붙이지 않고 여섯 장을 세워 보여 준다 */
@media (prefers-reduced-motion: reduce) {
  .story__track { height: auto; }
  .story__sticky { position: static; height: auto; display: block; }
  .story__stage { grid-template-columns: 1fr; gap: 14px; }
  .story__frames {
    position: static;
    aspect-ratio: auto;
    max-height: none;
    display: grid;
    gap: 14px;
    background: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
  }
  .story__frame {
    position: relative;
    inset: auto;
    opacity: 1;
    transition: none;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow);
  }
  .story__frame img { transform: none; }
  .story__cap {
    display: block;
    position: absolute;
    left: 14px;
    bottom: 14px;
    margin: 0;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.02em;
  }
  .story__side { display: none; }
}

/* ── 2. 자동 넘김 릴 (한 번에 한 장) ───────────────────────── */
.srl { position: relative; max-width: 960px; margin: 0 auto 40px; }
.srl__view {
  overflow: hidden;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  background: var(--c-navy);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.srl__track {
  display: flex;
  transition: transform .5s cubic-bezier(.2, .8, .25, 1);
  will-change: transform;
}
.srl__slide {
  position: relative;
  flex: 0 0 100%;
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--c-navy);
}
.srl__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}
.srl__tag {
  position: absolute;
  left: 12px;
  top: 12px;
  margin: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.srl__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
}
.srl__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(10, 31, 63, .24);
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.srl__dot.is-on { background: var(--c-navy); transform: scale(1.3); }

@media (max-width: 768px) {
  .srl__tag { left: 8px; top: 8px; padding: 4px 9px; font-size: 11px; }
  .srl__dots { margin-top: 11px; }
  .srl__dot { width: 8px; height: 8px; }
}

/* ★31번회차 — 동작 줄이기에서도 사진 릴은 제 모양대로 넘어간다.
   (28번회차에는 전환을 껐으나, 애니메이션을 꺼 둔 사무실 PC 가 곧 고객 화면이라 되살린다) */

/* ── 29번회차에 더한 것 ─────────────────────────────────────
   3) .hvid — 머리 구간 뒤 바탕 영상
   4) .cnt  — 숫자 올라가기
   5) .wash — 스크롤 세척(전후 한 쌍이 닦이며 드러남)
   6) .vrl  — 현장 영상 릴 (겹쳐 넘어감)
   색·글꼴은 style.css 의 기존 변수만 쓴다. 새 색 0. */

/* 3) 머리 구간 뒤 바탕 영상 --------------------------------- */
.sch-hero.has-hvid { position: relative; isolation: isolate; }
.hvid {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.hvid video, .hvid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hvid::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 21, 51, .74) 0%, rgba(6, 21, 51, .88) 100%);
}
.sch-hero.has-hvid .sch-hero__inner { position: relative; z-index: 1; }

/* 4) 숫자 올라가기 ------------------------------------------ */
.cnt { font-variant-numeric: tabular-nums; }

/* 5) 스크롤 세척 -------------------------------------------- */
.wash {
  --wash-len: 120svh;
  margin: 0 0 56px;
}
.wash__track { position: relative; height: calc(100svh + var(--wash-len)); }
.wash__sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wash__stage {
  position: relative;
  width: 100%;
  max-width: 1000px;
  aspect-ratio: 4 / 3;
  max-height: 74svh;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--c-navy-deep);
  box-shadow: var(--shadow-lg);
}
.wash__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 세척 전 사진이 왼쪽에서부터 걷히며 세척 후 사진이 드러난다 */
.wash__before { clip-path: inset(0 0 0 var(--p, 0%)); }
.wash__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--p, 0%);
  width: 3px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.95) 18%,
                              rgba(255,255,255,.95) 82%, rgba(255,255,255,0) 100%);
  box-shadow: 0 0 20px 5px rgba(91, 163, 214, .55);
  opacity: .95;
}
.wash__tag {
  position: absolute;
  top: 14px;
  margin: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.02em;
  z-index: 2;
}
.wash__tag--before { left: 14px; }
.wash__tag--after { right: 14px; }
.wash__done {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(.88);
  opacity: 0;
  padding: 11px 24px;
  border-radius: 999px;
  background: rgba(10, 31, 63, .84);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  white-space: nowrap;
  z-index: 3;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.wash__done.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

@media (max-width: 900px) {
  .wash { --wash-len: 110svh; }
  .wash__stage { max-height: 58svh; }
  .wash__done { font-size: 15px; padding: 9px 18px; }
  .wash__tag { font-size: 11px; padding: 4px 9px; top: 10px; }
  .wash__tag--before { left: 10px; }
  .wash__tag--after { right: 10px; }
}

/* 6) 현장 영상 릴 — 겹쳐 넘어감 ----------------------------- */
.vrl { position: relative; max-width: 1000px; margin: 0 auto 44px; }
.vrl__view {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  background: var(--c-navy);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.vrl__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity .6s var(--ease);
  will-change: opacity;
}
.vrl__slide.is-on { opacity: 1; }
.vrl__slide video, .vrl__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--c-navy-deep);
  -webkit-user-drag: none;
}
.vrl__tag {
  position: absolute;
  left: 12px;
  top: 12px;
  margin: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.02em;
  z-index: 2;
}
.vrl__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
}
.vrl__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(10, 31, 63, .24);
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.vrl__dot.is-on { background: var(--c-navy); transform: scale(1.3); }
.section--navy .vrl__dot, .section--cool .vrl__dot { background: rgba(10, 31, 63, .24); }
.vrl__note {
  text-align: center;
  margin-top: 14px;
  font-size: 14px;
  color: var(--c-text-soft);
}
.vrl__note a { color: var(--c-sky); text-decoration: underline; }

@media (max-width: 768px) {
  .vrl__tag { left: 8px; top: 8px; padding: 4px 9px; font-size: 11px; }
  .vrl__dots { margin-top: 11px; }
  .vrl__dot { width: 8px; height: 8px; }
  .vrl__note { font-size: 13px; }
}

/* 동작 줄이기 — 영상 대신 포스터, 세척은 전후 나란히 --------- */
/* 4) 숫자 깜빡임 막기 — 머리의 인라인 한 줄이 html 에 .js 를 붙인다.
   스크립트가 돌 것이 확실할 때만 숫자를 잠시 감춰 두고, story.js 가 0 을 세운 뒤 보인다.
   스크립트가 없으면 .js 가 없어 최종값이 그대로 보인다. */
html.js [data-count] .cnt { visibility: hidden; }
html.js [data-count].is-ready .cnt { visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  /* ★31번회차 방침 — 동작 줄이기에서도 영상과 릴은 제 모양대로 돈다.
     관공서·학교 사무실 PC 는 윈도우 애니메이션을 꺼 둔 경우가 흔하고, 그 화면이 곧 고객 화면이다.
     그래서 .vrl · .srl · .hvid 를 여기서 건드리지 않는다.
     끄는 것은 붙어서 끌려가는 것(.wash sticky)과 천천히 다가오는 확대뿐이다. */
  .wash__track { height: auto; }
  .wash__sticky { position: static; height: auto; display: block; }
  .wash__stage {
    aspect-ratio: auto;
    max-height: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    background: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
  }
  .wash__img {
    position: relative;
    inset: auto;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow);
  }
  .wash__before { clip-path: none; }
  .wash__line, .wash__done { display: none; }
  .wash__tag { top: 10px; }
  .wash__tag--after { right: auto; left: calc(50% + 14px); }
}

/* ── 34번회차에 더한 것 — 동작 줄이기에서 보이는 두 장치 ────────────────
   ㉮ 스크롤텔링 : 세로로 쌓지 않고 제자리에 선 한 틀에서 3.5초마다 롤링
   ㉯ 스크롤 세척 : 가운데 정렬 · 한 틀 겹침 · 저절로 닦이고 반복 · 딱지는 제 사진에 딸림
   끄는 것은 여전히 둘뿐이다 — 스크롤에 붙어 끌려가는 것 · 천천히 다가오는 확대 */

/* 딱지를 화면 절반에 못 박지 않고 제 사진에 딸려 다니게 한다.
   (보통 모드에서는 두 사진이 겹쳐 있으므로 지금 자리 그대로다) */
.wash__stage { position: relative; }

@media (prefers-reduced-motion: reduce) {
  /* ㉮ 스크롤텔링 — 쌓지 않는다. 보통 모드와 같은 한 틀에 한 장씩. */
  .story__track { height: auto; }
  .story__sticky {
    position: static;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .story__stage { grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; }
  .story__frames {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    max-height: 74svh;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--c-navy-deep);
    box-shadow: var(--shadow-lg);
  }
  .story__frame {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .6s var(--ease);
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
  }
  .story__frame.is-on { opacity: 1; }
  .story__frame img { transform: none; }      /* 다가오는 확대는 쓰지 않는다 */
  .story__cap { display: none; }
  .story__side { display: block; }
  .story__seg { cursor: pointer; }

  /* ㉯ 스크롤 세척 — 가운데 · 한 틀 겹침 · 저절로 닦임 */
  .story__track, .wash__track { height: auto; }
  .wash__sticky {
    position: static;
    height: auto;
    display: flex;                              /* 가운데 정렬을 되살린다 */
    align-items: center;
    justify-content: center;
  }
  .wash__stage {
    display: block;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    aspect-ratio: 4 / 3;
    max-height: 74svh;
    background: var(--c-navy-deep);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-xl);
    overflow: hidden;
  }
  .wash__img {
    position: absolute;
    inset: auto;
    top: 0; left: 0; right: 0; bottom: 0;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
  }
  .wash__before { clip-path: inset(0 0 0 var(--p, 0%)); }
  .wash__line, .wash__done { display: block; }
  .wash__tag { top: 14px; }
  .wash__tag--before { left: 14px; right: auto; }
  .wash__tag--after { left: auto; right: 14px; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  .story__stage { grid-template-columns: 1fr; gap: 16px; }
  .story__frames { max-height: 56svh; }
  .wash__stage { max-height: 58svh; }
  .wash__tag { top: 10px; font-size: 11px; padding: 4px 9px; }
  .wash__tag--before { left: 10px; }
  .wash__tag--after { right: 10px; }
}