/* story-build.css — #services "자체조립형" 비주얼(A안 kinetic) — story-build.js 짝
 * 기본값(모바일 · 동작줄이기 · JS 미작동)은 위→아래로 쌓인 정적 레이아웃이다.
 * 데스크톱에서 JS가 [data-sb-mode="sticky"]를 달아야만 스크롤 스크러빙 스테이지로 바뀐다.
 */

#services.sb { position: relative; background: #0b0b09; border-bottom: 1px solid var(--line); color: #f0ede5; }
#services.sb, #services.sb * { box-sizing: border-box; }
#services.sb img { max-width: 100%; }

/* ── 헤더 ─────────────────────────────────────────────── */
.sb-head { padding: 56px 0 36px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 40px; }
.sb-head-main h2 { font-size: clamp(33px, 3.5vw, 53px); letter-spacing: -2.8px; line-height: 1.17; font-weight: 400; margin-top: 17px; }
.sb-head-aside { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 320px; }
.sb-head-aside p { font-size: 12px; color: #aaa18f; line-height: 1.8; margin: 0; }
#skip-services { display: inline-block; font-size: 10px; color: #d0ba8e; padding: 4px 0; min-height: 24px; }
#skip-services:hover { color: var(--light-gold); }
.sb-counter { font-family: Georgia, serif; font-size: 30px; line-height: 1; color: var(--gold); white-space: nowrap; }
.sb-counter i { font-style: normal; color: #5a4b30; font-size: 17px; margin: 0 7px; }
.sb-counter #story-total { font-size: 15px; color: #978462; }

/* ── 캔버스 / 스플릿 오버레이 (데스크톱 스틱 모드 전용, 기본은 숨김) ── */
.sb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.sb-canvas-glow { filter: blur(10px) saturate(1.2); mix-blend-mode: screen; opacity: .95; }
.sb-split { position: absolute; inset: 0; z-index: 7; pointer-events: none; display: none; }
.sb-split-panel { position: absolute; inset: -20%; background: var(--gold); display: none; }
.sb-split-copy { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; color: #14100a; white-space: nowrap; }
.sb-split-copy b { display: block; font-size: clamp(40px, 7vw, 120px); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.sb-split-copy span { display: block; margin-top: 10px; font: 700 11px/1 ui-monospace, monospace; letter-spacing: .32em; }

/* ── 서비스 패널: 기본(쌓임) 레이아웃 ─────────────────────── */
.sb-panels { display: block; }
.sb-panel { display: grid; grid-template-columns: 1fr; gap: 28px; padding: 44px 0; border-top: 1px solid var(--line); }
.sb-panel:first-child { border-top: 0; padding-top: 8px; }
.sb-kicker { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.sb-no { font: italic 900 44px/.9 Georgia, serif; color: #9a7b44; }
.sb-kicker p { font: 8px/1.6 ui-monospace, monospace; color: #bba473; letter-spacing: 1.7px; margin: 0; }
.sb-panel h3 { font-size: 34px; line-height: 1.2; letter-spacing: -1.6px; font-weight: 500; word-break: keep-all; }
.sb-statement { font-size: 20px; line-height: 1.5; letter-spacing: -.5px; color: #d0b578; margin: 16px 0 0; word-break: keep-all; }
.sb-desc { font-size: 13px; line-height: 1.95; color: #b3ac9d; word-break: keep-all; max-width: 420px; margin: 20px 0 0; }
.sb-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 0; margin: 20px 0 0; font-size: 9px; line-height: 1.6; color: #a3916c; }
.sb-tags li { border-bottom: 1px solid #b18b4b44; padding-bottom: 3px; border-radius: 2px; transition: background-color .5s ease-out, transform .3s var(--ease-out, cubic-bezier(.16,1,.3,1)); }

/* clip 리빌 래퍼: 기본은 이미 펼쳐진 상태(JS 실패해도 읽힘) */
.sb-rv { display: block; overflow: hidden; }
.sb-rv > span { display: block; transform: none; }

.sb-visual { position: relative; margin: 0; aspect-ratio: 4 / 3; width: 100%; background: #0a0907; border: 1px solid #9e7a3626; overflow: hidden; }
.sb-visual canvas[data-sb-panel-canvas] { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sb-visual img[data-sb-fallback-img] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sb-visual.is-canvas-ready img[data-sb-fallback-img] { display: none; }
.sb-visual figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; font: 7px ui-monospace, monospace; letter-spacing: 1.2px; color: #d7bd8a; background: linear-gradient(transparent, #000b); margin: 0; }

/* 태그 칩 "골드 플래시" 1회성 — 끝나면 JS가 클래스를 뗀다 */
.sb-tags li.is-pop { animation: sb-chip-in .5s var(--ease-out, cubic-bezier(.16,1,.3,1)) both; }
@keyframes sb-chip-in { 0% { background: rgba(217,180,106,.55); transform: scale(.85); } 100% { background: rgba(217,180,106,0); transform: scale(1); } }

/* ── 하단 레일(진행 네비게이션) ───────────────────────────── */
.sb-rail { padding: 8px 0 48px; }
.sb-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 18px; }
.sb-nav button { border: 0; background: none; padding: 10px 0; min-height: 44px; font-size: 12px; text-align: left; color: #8d8471; transition: color .2s; }
.sb-nav button[aria-pressed="true"] { color: var(--light-gold); }
.sb-nav button small { font: 9px ui-monospace, monospace; color: #796341; margin-right: 12px; }
.sb-nav button:hover { color: #ffe6b3; }
.sb-progress-row { display: none; }
.sb-segments { display: flex; gap: 12px; align-items: center; }
.sb-segments i { width: 60px; height: 3px; background: #a39e9140; position: relative; overflow: hidden; display: block; }
.sb-segments i b { position: absolute; inset: 0; background: var(--gold); transform-origin: left; transform: scaleX(0); display: block; }
.sb-rail-count { font: 11px/1 ui-monospace, monospace; color: var(--muted); letter-spacing: .1em; }
#story-progress { height: 2px; background: #6c522732; margin-top: 14px; }
#story-progress > span { display: block; height: 100%; width: 100%; transform-origin: left; background: var(--gold); transform: scaleX(var(--sb-progress, 0)); }
.sb-rail-note { display: flex; justify-content: space-between; gap: 16px; padding-top: 12px; color: #796e57; font-size: 9px; }
.sb-rail-note .sb-scroll-hint { display: none; }

/* ── 데스크톱 스크롤 스크러빙 스테이지 (JS가 켜는 모드) ──────
   [data-sb-mode="sticky"]는 reducedMotion()이 아니고 폭이 넓을 때만 JS가 붙인다.
   경계값은 rm-core.js의 isMobile() 기준(≤720px)과 반드시 같아야 한다 — 어긋나면 JS는 sticky를
   켰는데 CSS는 못 켜는(또는 그 반대) 721~899px 구간이 생긴다(실측으로 잡은 버그, 720/721로 고정). */
@media (min-width: 721px) {
  #services.sb[data-sb-mode="sticky"] .sb-stagewrap { height: var(--sb-height, 520vh); }
  #services.sb[data-sb-mode="sticky"] .sb-sticky { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; overflow: clip; }
  #services.sb[data-sb-mode="sticky"] .sb-head { flex: none; padding: 28px 0 0; }
  #services.sb[data-sb-mode="sticky"] .sb-stage { position: relative; flex: 1; min-height: 0; }
  #services.sb[data-sb-mode="sticky"] .sb-canvas { display: block; }
  #services.sb[data-sb-mode="sticky"] .sb-split { display: block; }
  #services.sb[data-sb-mode="sticky"] .sb-split-panel { display: block; }

  #services.sb[data-sb-mode="sticky"] .sb-panels { position: absolute; inset: 0; }
  #services.sb[data-sb-mode="sticky"] .sb-panel { position: absolute; inset: 0; display: grid; grid-template-columns: .84fr 1.16fr; align-items: center; gap: 48px; border: 0; padding: 0 clamp(24px, 4vw, 64px); visibility: hidden; }
  #services.sb[data-sb-mode="sticky"] .sb-panel[data-active="true"] { visibility: visible; }
  #services.sb[data-sb-mode="sticky"] .sb-panel-copy { max-width: 620px; }
  #services.sb[data-sb-mode="sticky"] .sb-desc { max-width: 460px; }
  #services.sb[data-sb-mode="sticky"] .sb-rv > span { transform: translateY(105%); }

  /* 캔버스가 그리는 자리이므로 개별 캔버스/폴백이미지는 끄고, 자리표시+캡션만 남긴다 */
  #services.sb[data-sb-mode="sticky"] .sb-visual { background: none; border: 0; aspect-ratio: auto; height: 100%; }
  #services.sb[data-sb-mode="sticky"] .sb-visual canvas[data-sb-panel-canvas],
  #services.sb[data-sb-mode="sticky"] .sb-visual img[data-sb-fallback-img] { display: none; }
  /* 캡션 슬로건 문구는 실제 카피이므로 데스크톱에서도 남긴다 — 우측 컬럼 하단에 얇게 */
  #services.sb[data-sb-mode="sticky"] .sb-visual figcaption { background: none; padding: 0 4px 6px; color: #cbb384; }

  #services.sb[data-sb-mode="sticky"] .sb-rail { flex: none; position: relative; z-index: 5; padding: 0 clamp(24px, 4vw, 64px) 26px; }
  #services.sb[data-sb-mode="sticky"] .sb-rail-note .sb-scroll-hint { display: inline; }
  #services.sb[data-sb-mode="sticky"] .sb-progress-row { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
}

@media (max-width: 899px) {
  .sb-head { padding-top: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  #services.sb .sb-tags li.is-pop { animation: none; }
}