/* 나우비 소개 페이지 (10-21 확정: 5안 '실제 장면' · 기울어진 모자이크)
   방 영상 띠 뺌 · 아이콘 카드 대신 '지금 목표'(네트워크와 같은 박자) · 약속/숫자 카드의 선 아이콘 → 큰 번호
   걸어온 길 = 나우비가 만든 실제 채널 장면 모자이크가 기울어진 채 흐르는 배경(어디가 잘려도 같은 분위기) + 큰 글, 숫자 앞에 얇은 장면 띠
   다른 안(한 줄의 빛 · 하루의 빛 · 큰 글자 · 시네마 · 5안 변주 · 흐르는 벽)은 git 기록 43fac60 에 있음 */

/* ── 약속 · 숫자 카드의 선 아이콘 대신 큰 연회색 번호 ── */
.promise .values { counter-reset: val; }
.promise .values li { position: relative; overflow: hidden; counter-increment: val; padding-top: 30px; }
.promise .values .ico { display: none; }
.promise .values li::after { content: "0" counter(val); position: absolute; right: 18px; top: 6px; font: 800 64px/1 "Inter Tight", sans-serif; letter-spacing: -.04em; color: #f0f0f1; pointer-events: none; }
.promise .values li > div { position: relative; z-index: 1; }
.stat .ico { display: none; }
.stat b { margin-top: 0; font-size: clamp(32px, 3vw, 46px); }

/* ── 지금 목표 (오른쪽 네트워크가 고른 목표 · 채널을 그대로) ── */
.goal-live { max-width: 520px; margin-top: 44px; }
.gl-steps { list-style: none; display: flex; font-size: 13px; font-weight: 700; letter-spacing: -.01em; color: #b4b4b4; }
.gl-steps li { position: relative; flex: 1; padding-top: 14px; border-top: 2px solid #e8e8e9; transition: color .4s; }
.gl-steps li::before { content: ""; position: absolute; left: 0; top: -2px; width: 100%; height: 2px; background: var(--acc); transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.gl-steps li.on { color: var(--ink); }
.gl-steps li.on::before { transform: none; }
.gl-steps i { margin-right: 8px; font-style: normal; font-size: 11px; letter-spacing: .1em; color: var(--acc); }
.gl-now { display: flex; align-items: baseline; gap: 16px; margin-top: 28px; }
.gl-k { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .26em; color: var(--acc); }
.gl-goal { display: inline-block; font-size: clamp(28px, 2.6vw, 38px); font-weight: 800; letter-spacing: -.035em; }
.gl-goal.sw { animation: glSw .7s cubic-bezier(.2, .8, .2, 1); }
@keyframes glSw { from { opacity: 0; transform: translateY(.45em); filter: blur(6px); } }
.gl-ch { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; min-height: 40px; }
.gl-ch li { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid #e4e4e5; border-radius: 999px; background: #fff;
            font-size: 11.5px; font-weight: 700; letter-spacing: .1em; color: #a2a2a2; opacity: .45; transform: translateY(5px); transition: opacity .45s, transform .45s cubic-bezier(.2, .8, .2, 1), color .45s, border-color .45s, box-shadow .45s; }
.gl-ch li.lg { padding-left: 8px; }
.gl-ch li.on { opacity: 1; transform: none; color: var(--ink); border-color: rgba(196, 18, 28, .32); box-shadow: 0 6px 18px rgba(196, 18, 28, .09); }
.gl-ch img { width: 22px; height: 22px; object-fit: contain; filter: grayscale(1); opacity: .6; transition: filter .45s, opacity .45s; }
.gl-ch li.on img { filter: none; opacity: 1; }

/* ── 걸어온 길: 실제 장면 모자이크(세로 줄이 위아래로 엇갈려 흐름) + 큰 글 ── */
.since-x { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: max(700px, 100vh); padding: 130px 0; background: #f2f2f3; }
.sx-mosaic { position: absolute; inset: -10% -4%; z-index: -3; display: flex; gap: 10px; transform: rotate(-6deg) scale(1.08); pointer-events: none; }
.sx-col { display: flex; flex: 1 0 0; flex-direction: column; gap: 10px; animation: mUp var(--sp, 60s) linear infinite; }
.sx-col:nth-child(even) { animation-name: mDn; }
.sx-col img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; filter: grayscale(.85) contrast(.92); }
.sx-col img.hot { filter: none; outline: 2px solid var(--acc); outline-offset: -2px; }
@keyframes mUp { to { transform: translateY(-50%); } }
@keyframes mDn { from { transform: translateY(-50%); } to { transform: none; } }
/* 글 쪽(왼쪽)을 바탕색으로 덮어 글이 또렷하게 + 위아래는 흰색으로 녹여 앞뒤 섹션과 이어짐 */
.since-x::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
                   background: linear-gradient(90deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .9) 38%, rgba(255, 255, 255, .62) 66%, rgba(255, 255, 255, .45) 100%); }
.since-x::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
                  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 16%, rgba(255, 255, 255, 0) 84%, #fff 100%); }
.sx-in { width: 100%; }
.sx-head, .sx-list, .sx-note { max-width: 600px; }
.sx-years { display: flex; align-items: center; gap: 18px; margin-top: 30px; font: 800 clamp(22px, 2vw, 30px)/1 "Inter Tight", sans-serif; letter-spacing: -.02em; }
.sx-years i { width: clamp(70px, 9vw, 140px); height: 2px; background: linear-gradient(90deg, var(--acc), rgba(196, 18, 28, .25)); transform: scaleX(0); transform-origin: left; transition: transform 1.6s cubic-bezier(.6, 0, .2, 1) .3s; }
.sx-years.in i { transform: none; }
.sx-y1 { color: var(--acc); }
.sx-list { list-style: none; margin-top: 54px; }
.sx-list li { display: grid; grid-template-columns: 52px minmax(0, 1fr); padding: 22px 0 20px; border-top: 1px solid rgba(17, 17, 17, .13); }
.sx-list li:last-child { border-bottom: 1px solid rgba(17, 17, 17, .13); }
.sx-list i { grid-row: span 2; padding-top: .9em; font: 800 12px/1 "Inter Tight", sans-serif; letter-spacing: .1em; font-style: normal; color: var(--acc); }
.sx-list b { font-size: clamp(24px, 2.3vw, 34px); font-weight: 800; line-height: 1.25; letter-spacing: -.035em; }
.sx-list span { margin-top: 6px; font-size: 15px; color: var(--body); }
.sx-note { margin-top: 30px; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.75; color: var(--text); }

/* ── 숫자 앞 얇은 실제 장면 띠 (빠진 방 영상 띠 대신 가볍게) ── */
.reel { position: relative; overflow: hidden; padding: 6px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.reel > div { display: flex; gap: 10px; width: max-content; animation: reel 70s linear infinite; }
.reel img { width: 220px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; filter: grayscale(.6); transition: filter .4s; }
.reel img:hover { filter: none; }
@keyframes reel { to { transform: translateX(-50%); } }

@media (max-width: 900px) {
  .goal-live { margin-top: 34px; }
  .since-x { align-items: flex-end; min-height: max(760px, 100svh); padding: 96px 0 72px; }
  .since-x::before { background: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .8) 36%, rgba(255, 255, 255, .95) 64%, #fff 100%); }
  .sx-mosaic { inset: -6% -20%; }
  .sx-col:nth-child(n+5) { display: none; }
  .sx-list { margin-top: 38px; }
  .sx-list li { grid-template-columns: 40px minmax(0, 1fr); padding: 18px 0 16px; }
  .reel img { width: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-col, .reel > div { animation: none; }
}