/* 나우비 소개 — 전신 NGM 내가미래다 자료를 녹인 블록 (10-21)
   함께한 고객(#clients) · 뿌리(#roots) · 함께 만드는 사람들(#team) · 세 가지 가치(#values) · 대표 인사말(#ceo, 숨김 — ?ceo=1) · 국경 너머(#globe)
   사진·로고 출처는 assets/img/ngm/SOURCES.md. 색은 나우비 크림슨만(NGM 주황 안 씀) */

/* ── 함께한 고객: 원래 색 로고 카드 한 줄이 천천히 흐름 (가리키면 멈춤 · 카드가 살짝 떠오름) ── */
.ngm-clients { padding: 100px 0 90px; }
.ngm-clients .ngm-head { text-align: center; }
.ngm-clients .label { justify-content: center; }
.ngm-clients .body { max-width: 620px; margin-left: auto; margin-right: auto; }
.ngm-marq { margin-top: 44px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ngm-row { overflow: hidden; padding: 10px 0 14px; }
.ngm-lane { display: flex; gap: 16px; width: max-content; list-style: none; animation: ngmLane var(--sp, 46s) linear infinite; }
.ngm-row:hover .ngm-lane { animation-play-state: paused; }
.ngm-lane li { flex: none; display: flex; align-items: center; justify-content: center; width: 220px; height: 104px; padding: 0 22px; border-radius: 8px; background: #fff;
               box-shadow: 0 6px 22px rgba(17, 17, 17, .06); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.ngm-lane li:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(17, 17, 17, .12); }
.ngm-lane img { width: auto; height: var(--h, 36px); max-width: 100%; object-fit: contain; }
@keyframes ngmLane { to { transform: translateX(calc(-50% - 8px)); } }
.ngm-src { margin-top: 22px; font-size: 13px; color: var(--muted); }

/* ── 일하는 곳(#studio): 왼쪽 글 + 오른쪽 실제 사무실 사진(회의 사진이 겹침) ── */
.ngm-roots .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.ngm-facts { list-style: none; max-width: 520px; margin-top: 40px; }
.ngm-facts li { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: baseline; padding: 16px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--text); }
.ngm-facts li:last-child { border-bottom: 1px solid var(--line); }
.ngm-facts i { font: 800 12px/1 "Inter Tight", sans-serif; font-style: normal; letter-spacing: .16em; color: var(--acc); }
.ngm-roots .ngm-src { text-align: left; }
.ngm-photo { position: relative; margin: 0 0 60px; }
.ngm-photo .big { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; box-shadow: 0 30px 70px rgba(17, 17, 17, .12); }
.ngm-photo .sub { position: absolute; left: -9%; bottom: -60px; width: 40%; aspect-ratio: 1; object-fit: cover; border: 6px solid #fff; border-radius: 6px; box-shadow: 0 20px 50px rgba(17, 17, 17, .16); }

/* ── 함께 만드는 사람들: 실제 작업 사진이 천천히 흐르는 띠 (가리키면 멈춤) ── */
.ngm-team { padding-bottom: 110px; }
.ngm-team .wrap { margin-bottom: 48px; }
.ngm-strip { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ngm-track { display: flex; gap: 12px; width: max-content; list-style: none; animation: ngmFlow 90s linear infinite; }
.ngm-strip:hover .ngm-track { animation-play-state: paused; }
.ngm-track li { flex: none; width: 320px; }
.ngm-track img { width: 100%; aspect-ratio: 400 / 232; object-fit: cover; border-radius: 4px; filter: saturate(.85); transition: filter .4s; }
.ngm-track li:hover img { filter: none; }
@keyframes ngmFlow { to { transform: translateX(-50%); } }
.ngm-team .ngm-src { margin-top: 18px; text-align: left; }

/* ── 세 가지 가치: 사진 카드 + 큰 연회색 번호 ── */
.ngm-vals { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 56px; counter-reset: nv; }
.ngm-vals li { position: relative; overflow: hidden; border-radius: 6px; background: #fff; box-shadow: var(--card); counter-increment: nv; }
.ngm-vals img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.ngm-vals li:hover img { transform: scale(1.03); }
.ngm-vals div { position: relative; padding: 26px 28px 30px; }
.ngm-vals div::after { content: "0" counter(nv); position: absolute; right: 18px; top: 10px; font: 800 60px/1 "Inter Tight", sans-serif; letter-spacing: -.04em; color: #f0f0f1; pointer-events: none; }
.ngm-vals span { position: relative; z-index: 1; display: block; font-size: 11px; font-weight: 600; letter-spacing: .24em; color: var(--muted); }
.ngm-vals b { position: relative; z-index: 1; display: block; margin-top: 8px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.ngm-vals p { position: relative; z-index: 1; margin-top: 8px; font-size: 15px; line-height: 1.7; color: var(--body); }

/* ── 대표 인사말 (숨김: 주인님 확인 전. about.html?ceo=1 로만 보임) ── */
.ngm-ceo .split { align-items: start; }
.ngm-q { margin-top: 44px; font: 900 120px/.7 Georgia, serif; color: var(--acc); }
.ngm-ceo blockquote { margin-top: 18px; font-size: clamp(24px, 2.4vw, 34px); font-weight: 800; line-height: 1.45; letter-spacing: -.035em; }
.ngm-ceo .body p + p { margin-top: 14px; }
.ngm-sign { margin-top: 30px; font-size: 15px; font-weight: 700; color: var(--text); }
.ngm-sign i { font-style: normal; color: var(--acc); }

/* ── 국경 너머: 어두운 띠 + 코드로 그린 점 지구(canvas, ngm-globe.js) · 글은 왼쪽 ── */
.ngm-globe { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: 680px; padding: 120px 0; background: #0b0c0f; color: #fff; }
.ngm-globe .gl-canvas { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; display: block; }
.ngm-globe::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
                     background: linear-gradient(90deg, rgba(9, 10, 13, .92) 0%, rgba(9, 10, 13, .78) 30%, rgba(9, 10, 13, .3) 50%, rgba(9, 10, 13, 0) 64%), linear-gradient(180deg, rgba(9, 10, 13, .5), rgba(9, 10, 13, 0) 22%); }
.ngm-globe .wrap { width: 100%; }
.ngm-globe .label { color: #ff4a52; }
.ngm-globe .label::before { background: #ff4a52; }
.ngm-globe .ttl { max-width: 560px; color: #fff; }
.ngm-globe .body { max-width: 500px; color: rgba(255, 255, 255, .78); }
.ngm-globe .btns { margin-top: 36px; }
.ngm-btn2 { border: 1px solid rgba(255, 255, 255, .55); color: #fff; background: rgba(255, 255, 255, .04); }
.ngm-btn2:hover { background: #fff; color: #111; }
.ngm-globe .ngm-src { text-align: left; color: rgba(255, 255, 255, .45); }

@media (max-width: 900px) {
  .ngm-clients { padding: 72px 0 64px; }
  .ngm-marq { margin-top: 30px; }
  .ngm-row { padding: 6px 0 10px; }
  .ngm-lane { gap: 10px; }
  .ngm-lane li { width: 150px; height: 76px; padding: 0 14px; }
  .ngm-lane img { height: calc(var(--h, 36px) * .72); }
  @keyframes ngmLane { to { transform: translateX(calc(-50% - 5px)); } }
  .ngm-cta { flex-direction: column; }
  .ngm-cta .btn { flex: none; width: 100%; }
  .ngm-roots .split { grid-template-columns: 1fr; gap: 40px; }
  .ngm-facts li { grid-template-columns: 92px minmax(0, 1fr); font-size: 14px; }
  .ngm-photo { margin: 0 0 56px; }
  .ngm-photo .sub { left: auto; right: 12px; bottom: -44px; width: 38%; border-width: 4px; }
  .ngm-team { padding-bottom: 80px; }
  .ngm-team .wrap { margin-bottom: 32px; }
  .ngm-track li { width: 220px; }
  .ngm-vals { grid-template-columns: 1fr; gap: 14px; margin-top: 36px; }
  .ngm-ceo .split { gap: 20px; }
  .ngm-q { margin-top: 32px; font-size: 84px; }
  .ngm-globe { align-items: flex-start; min-height: 0; padding: 72px 0 300px; }
      .ngm-globe::before { background: linear-gradient(180deg, rgba(9, 10, 13, .9) 0%, rgba(9, 10, 13, .82) 45%, rgba(9, 10, 13, .3) 66%, rgba(9, 10, 13, 0) 78%); }
}
@media (prefers-reduced-motion: reduce) {
  .ngm-track, .ngm-lane { animation: none; }
  .ngm-marq { -webkit-mask-image: none; mask-image: none; }
  .ngm-lane { width: auto; flex-wrap: wrap; justify-content: center; padding: 0 16px; }
  .ngm-strip { overflow-x: auto; }
}

/* ══════════ 10-21 오후: 소개 7개 구성 (① 약속+가치 ② 걸어온 길 ③ 일하는 방식 ④ 공간과 사람 ⑤ 믿음 ⑥ 국경 너머 ⑦ 상담) ══════════
   바탕 번갈아: 흰 → 연회색 모자이크 → 흰 → 사무실 사진(어둡게) → 연회색 → 어두운 지구 */
.nv-anchor { display: block; height: 0; scroll-margin-top: 76px; }

/* ① 약속 밑 가치 카드 3장 */
.nv-mini { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 520px; margin-top: 36px; }
.nv-mini li { overflow: hidden; border-radius: 6px; background: #fff; box-shadow: var(--card); padding-bottom: 14px; }
.nv-mini img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.nv-mini b { display: block; margin: 12px 14px 0; font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.nv-mini span { display: block; margin: 4px 14px 0; font-size: 12.5px; line-height: 1.5; color: var(--body); }

/* ② 걸어온 길: 2017 ─ 01 ─ 02 ─ 03 ─ 2026 한 줄 */
.since-x.nv-tl { min-height: 0; padding: 120px 0 110px; }
.nv-tl::before { background: rgba(255, 255, 255, .86); }
.nv-tl .sx-head, .nv-tl .sx-list, .nv-tl .sx-note { max-width: none; }
.nv-tl .sx-years { display: none; }   /* 연도는 아래 한 줄 양 끝으로 (about-v.js의 숫자 올라가기는 그대로 돌지만 안 보임) */
.nv-tl .sx-list { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 72px; padding: 0 96px; }
.nv-tl .sx-list::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, rgba(196, 18, 28, .35), var(--acc)); }
.nv-tl .sx-list::after { content: "2017"; position: absolute; left: 0; top: 18px; font: 800 clamp(22px, 2vw, 30px)/1 "Inter Tight", sans-serif; letter-spacing: -.02em; color: var(--ink); }
.nv-tl ol.sx-list li.sx-end { position: absolute; padding: 0; border: 0; right: 0; top: 18px; font: 800 clamp(22px, 2vw, 30px)/1 "Inter Tight", sans-serif; letter-spacing: -.02em; color: var(--acc); }
.nv-tl .sx-list li, .nv-tl .sx-list li:last-child { position: relative; display: block; padding: 34px 0 0; border: 0; }
.nv-tl ol.sx-list li.sx-end::before { display: none; }
.nv-tl .sx-list li::before { content: ""; position: absolute; left: 0; top: -6px; width: 14px; height: 14px; border: 2px solid var(--acc); border-radius: 50%; background: #fff; }
.nv-tl .sx-list i { display: block; padding: 0; margin-bottom: 10px; }
.nv-tl .sx-list b { display: block; font-size: clamp(22px, 2vw, 30px); }
.nv-tl .sx-list span { display: block; }
.nv-tl .sx-note { margin-top: 48px; }

/* ③ 일하는 방식 */
.nv-how-head { max-width: 760px; }
.nv-how-vis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 56px; }
.nv-how-fig { margin: 0; }
.nv-frame { position: relative; height: clamp(360px, 36vw, 540px); overflow: hidden; border-radius: 8px; background: #f7f7f8; box-shadow: var(--card); }
.nv-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* 큐브 화면은 폭 860px 밑에서 휴대폰 배치로 바뀌어 한쪽으로 쏠림 → 크게 그려서 줄여 넣음(가운데 맞춤 유지) */
.nv-frame-cube iframe { width: 160%; height: 160%; transform: scale(.625); transform-origin: 0 0; }
.nv-how-fig figcaption { margin-top: 12px; font-size: 13px; color: var(--muted); }
.nv-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.nv-steps li { position: relative; padding-top: 22px; border-top: 2px solid #e8e8e9; color: #b4b4b4; transition: color .5s; }
.nv-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 .8s cubic-bezier(.2, .8, .2, 1); }
.nv-steps li.on { color: var(--ink); }
.nv-steps li.on::before { transform: none; }
.nv-steps i { font: 800 12px/1 "Inter Tight", sans-serif; font-style: normal; letter-spacing: .12em; color: var(--acc); opacity: .35; transition: opacity .5s; }
.nv-steps li.on i { opacity: 1; }
.nv-steps b { display: block; margin-top: 10px; font-size: clamp(24px, 2.2vw, 32px); font-weight: 800; letter-spacing: -.03em; }
.nv-steps span { display: block; margin-top: 6px; font-size: 15px; color: inherit; opacity: .8; }

/* ④ 공간과 사람: 사무실 사진 띠 + 아래 팀 사진 흐름 */
.nv-space { position: relative; isolation: isolate; overflow: hidden; padding: 130px 0 56px; color: #fff; background: #14171c; }
.nv-space-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.nv-space::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
                    background: linear-gradient(90deg, rgba(12, 14, 18, .88) 0%, rgba(12, 14, 18, .66) 42%, rgba(12, 14, 18, .25) 75%, rgba(12, 14, 18, .2) 100%), linear-gradient(180deg, rgba(12, 14, 18, 0) 50%, rgba(12, 14, 18, .75) 100%); }
.nv-space .label { color: #ff6b72; }
.nv-space .label::before { background: #ff4a52; }
.nv-space .ttl { color: #fff; }
.nv-space .ttl em { color: #ff5a62; }
.nv-space .body { max-width: 560px; color: rgba(255, 255, 255, .8); }
.nv-space .body b { color: #fff; }
.nv-space .ngm-facts li { border-color: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .9); }
.nv-space .ngm-facts i { color: #ff6b72; }
.nv-space .ngm-strip { margin-top: 96px; }

/* ⑤ 믿음: 숫자 + 고객 로고 + 대표 채널 */
.nv-trust { background: #f6f6f7; }
.nv-trust > .reel { display: none; }   /* about-v.js가 #proof 앞에 넣는 장면 띠 — 이 구성에선 로고 줄과 겹쳐서 숨김 */
.nv-clients-head { margin-top: 96px; text-align: center; }
.nv-clients-head .label { justify-content: center; }
.nv-sub { margin-top: 16px; font-size: clamp(22px, 2.2vw, 30px); font-weight: 800; letter-spacing: -.03em; }
.nv-sub em { font-style: normal; color: var(--acc); }
.nv-trust .ngm-marq { margin-top: 30px; }
.nv-trust .channels { margin-top: 72px; }

@media (max-width: 900px) {
  .nv-mini { grid-template-columns: 1fr; max-width: none; gap: 8px; margin-top: 28px; }
  .nv-mini li { display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 0; }
  .nv-mini img { grid-row: span 2; height: 100%; aspect-ratio: auto; min-height: 64px; }
  .nv-mini b { margin: 12px 12px 0 0; align-self: end; }
  .nv-mini span { margin: 2px 12px 12px 0; align-self: start; }
  .since-x.nv-tl { padding: 88px 0 80px; align-items: flex-start; }
  .nv-tl .sx-list { grid-template-columns: 1fr; gap: 0; margin-top: 44px; padding: 44px 0 44px 30px; }
  .nv-tl .sx-list::before { left: 6px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, rgba(196, 18, 28, .35), var(--acc)); }
  .nv-tl .sx-list::after { top: 8px; left: 30px; font-size: 20px; }
  .nv-tl ol.sx-list li.sx-end { top: auto; bottom: 8px; right: auto; left: 30px; font-size: 20px; }
  .nv-tl .sx-list li, .nv-tl .sx-list li:last-child { padding: 22px 0; }
  .nv-tl .sx-list li::before { left: -30px; top: 26px; }
  .nv-how-vis { grid-template-columns: 1fr; gap: 16px; margin-top: 36px; }
  .nv-frame { height: 88vw; max-height: 520px; }
  .nv-frame-cube iframe { width: 250%; height: 250%; transform: scale(.4); }
  .nv-steps { grid-template-columns: 1fr; gap: 0; margin-top: 36px; }
  .nv-steps li { padding: 16px 0 18px; }
  .nv-space { padding: 88px 0 40px; }
  .nv-space::before { background: linear-gradient(180deg, rgba(12, 14, 18, .82) 0%, rgba(12, 14, 18, .72) 60%, rgba(12, 14, 18, .85) 100%); }
  .nv-space .ngm-strip { margin-top: 56px; }
  .nv-clients-head { margin-top: 64px; }
  .nv-trust .channels { margin-top: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .nv-steps li, .nv-steps li::before, .nv-steps i { transition: none; }
}

/* ══════════ 10-21 저녁: ① 약속 카드에 그림 · ② 세로 타임라인 · ④ 동원 글 밑 작은 3단계 ══════════ */
/* ① 약속 카드: 그림 위, 글 아래, 큰 번호는 글 칸 오른쪽 위로 */
.promise .values.nv-pv { gap: 24px; margin-top: 110px; }
.nv-pv li { display: block; padding: 0 !important; }
.nv-pv li::after { display: none; }
.nv-pv-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.nv-pv li:hover .nv-pv-img { transform: scale(1.03); }
.nv-pv li > div { position: relative; padding: 28px 30px 32px; background: #fff; }
.nv-pv li > div::after { content: "0" counter(val); position: absolute; right: 20px; top: 14px; font: 800 60px/1 "Inter Tight", sans-serif; letter-spacing: -.04em; color: #f0f0f1; pointer-events: none; }
.nv-pv li > div > * { position: relative; z-index: 1; }
.promise { padding-bottom: 150px; }

/* ② 걸어온 길: 왼쪽 제목(따라옴) + 오른쪽 세로 줄, 스크롤에 따라 빨간 선이 그려짐 */
.since-x.nv-vt { display: block; min-height: 0; padding: 140px 0 130px; }
.nv-vt::before { background: rgba(255, 255, 255, .88); }
.nv-vt-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.nv-vt-head { position: sticky; top: 140px; }
.nv-vt-head .sx-note { max-width: 440px; }
.nv-vt-list { --p: 0; position: relative; list-style: none; padding-left: 60px; }
.nv-vt-list::before, .nv-vt-list::after { content: ""; position: absolute; left: 17px; top: 10px; width: 2px; border-radius: 2px; }
.nv-vt-list::before { bottom: 10px; background: rgba(17, 17, 17, .1); }
.nv-vt-list::after { height: calc((100% - 20px) * var(--p)); background: linear-gradient(180deg, rgba(196, 18, 28, .4), var(--acc)); }
.nv-vt-dot { position: absolute; left: 18px; top: calc(10px + (100% - 20px) * var(--p)); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--acc);
             box-shadow: 0 0 0 5px rgba(196, 18, 28, .15), 0 0 18px 4px rgba(196, 18, 28, .45); z-index: 2; }
.nv-vt-list > li { position: relative; padding: 0 0 52px; opacity: .2; transform: translateY(18px); transition: opacity .7s, transform .7s cubic-bezier(.2, .8, .2, 1); }
.nv-vt-list > li:last-child { padding-bottom: 0; }
.nv-vt-list > li.on { opacity: 1; transform: none; }
.nv-vt-list > li::before { content: ""; position: absolute; left: -49px; top: 7px; width: 12px; height: 12px; border: 2px solid #c9c9cc; border-radius: 50%; background: #fff; transition: border-color .5s, background .5s; }
.nv-vt-list > li.on::before { border-color: var(--acc); }
.nv-vt-y b { display: block; font: 800 clamp(34px, 3.4vw, 50px)/1 "Inter Tight", sans-serif; letter-spacing: -.03em; color: var(--ink); }
.nv-vt-now b { color: var(--acc); }
.nv-vt-y span { display: block; margin-top: 8px; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--muted); }
.nv-vt-y::before { top: 14px !important; }
.nv-vt-it i { font: 800 12px/1 "Inter Tight", sans-serif; font-style: normal; letter-spacing: .12em; color: var(--acc); }
.nv-vt-it b { display: block; margin-top: 10px; font-size: clamp(22px, 2vw, 28px); font-weight: 800; letter-spacing: -.03em; line-height: 1.3; }
.nv-vt-it p { margin-top: 10px; max-width: 560px; font-size: 15.5px; line-height: 1.8; color: var(--body); }
.nv-vt-it p em { font-style: normal; font-weight: 800; color: var(--acc); }
.nv-vt-it small { display: block; margin-top: 8px; font-size: 12.5px; color: var(--muted); }

/* ④ 동원: 글 밑 작은 3단계 */
.nv-steps.nv-steps-sm { max-width: 520px; margin-top: 40px; gap: 14px; }
.nv-steps-sm li { padding-top: 16px; }
.nv-steps-sm b { margin-top: 8px; font-size: 21px; }
.nv-steps-sm span { font-size: 13.5px; }
.feat.net .feat-media iframe { overflow: hidden; }

@media (max-width: 900px) {
  .promise .values.nv-pv { margin-top: 56px; gap: 16px; }
  .nv-pv li > div { padding: 22px 22px 26px; }
  .promise { padding-bottom: 96px; }
  .since-x.nv-vt { padding: 88px 0 80px; }
  .nv-vt-in { grid-template-columns: 1fr; gap: 44px; }
  .nv-vt-head { position: static; }
  .nv-vt-list { padding-left: 44px; }
  .nv-vt-list::before, .nv-vt-list::after { left: 11px; }
  .nv-vt-dot { left: 12px; }
  .nv-vt-list > li::before { left: -39px; }
  .nv-vt-list > li { padding-bottom: 40px; }
  .nv-steps.nv-steps-sm { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .nv-steps-sm li { padding: 12px 0 0; }
  .nv-steps-sm b { font-size: 18px; }
  .nv-steps-sm span { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .nv-vt-list > li { opacity: 1; transform: none; transition: none; }
}

/* ══════════ 10-21 밤: ② 걸어온 길 — 제목 가운데 위 + 가운데 세로 줄, 항목 왼쪽·오른쪽 번갈아 (.nv-vc) ══════════ */
.nv-vc .nv-vt-head { position: static; max-width: 780px; margin: 0 auto; text-align: center; }
.nv-vc .nv-vt-head .label { justify-content: center; }
.nv-vc .nv-vt-head .sx-note { max-width: none; margin-left: auto; margin-right: auto; }
.nv-vc .nv-vt-list { max-width: 1040px; margin: 80px auto 0; padding-left: 0; }
.nv-vc .nv-vt-list::before, .nv-vc .nv-vt-list::after { left: calc(50% - 1px); }
.nv-vc .nv-vt-dot { left: 50%; }
.nv-vc .nv-vt-it { width: 50%; }
.nv-vc .nv-vt-it.nv-l { padding-right: 64px; text-align: right; transform: translateX(-36px); }
.nv-vc .nv-vt-it.nv-r { margin-left: 50%; padding-left: 64px; transform: translateX(36px); }
.nv-vc .nv-vt-it.on { transform: none; }
.nv-vc .nv-vt-it.nv-l::before { left: auto; right: -7px; }
.nv-vc .nv-vt-it.nv-r::before { left: -7px; }
.nv-vc .nv-vt-it p { max-width: none; }
.nv-vc .nv-vt-it.nv-l p { margin-left: auto; }
.nv-vc .nv-vt-it i { letter-spacing: .08em; }
.nv-vc .nv-vt-y { display: flex; flex-direction: column; align-items: center; text-align: center; transform: translateY(14px); }
.nv-vc .nv-vt-y.on { transform: none; }
.nv-vc .nv-vt-y::before { display: none; }
.nv-vc .nv-vt-y b { position: relative; z-index: 1; padding: 6px 22px; border-radius: 999px; background: rgba(255, 255, 255, .96); box-shadow: 0 6px 22px rgba(17, 17, 17, .06); }
.nv-vc .nv-vt-y span { position: relative; z-index: 1; padding: 2px 10px; background: rgba(255, 255, 255, .9); border-radius: 4px; }
.nv-vc .nv-vt-list > li { padding-bottom: 56px; }
@media (max-width: 900px) {
  .nv-vc .nv-vt-head { text-align: left; }
  .nv-vc .nv-vt-head .label { justify-content: flex-start; }
  .nv-vc .nv-vt-list { margin-top: 48px; padding-left: 44px; }
  .nv-vc .nv-vt-list::before, .nv-vc .nv-vt-list::after { left: 11px; }
  .nv-vc .nv-vt-dot { left: 12px; }
  .nv-vc .nv-vt-it, .nv-vc .nv-vt-it.nv-l, .nv-vc .nv-vt-it.nv-r { width: auto; margin-left: 0; padding: 0 0 40px; text-align: left; transform: translateY(18px); }
  .nv-vc .nv-vt-it.on { transform: none; }
  .nv-vc .nv-vt-it.nv-l::before, .nv-vc .nv-vt-it.nv-r::before { left: -39px; right: auto; }
  .nv-vc .nv-vt-it.nv-l p { margin-left: 0; }
  .nv-vc .nv-vt-y { align-items: flex-start; text-align: left; padding-bottom: 40px; }
  .nv-vc .nv-vt-y b { padding: 0; background: none; box-shadow: none; }
  .nv-vc .nv-vt-y span { padding: 0; background: none; }
  .nv-vc .nv-vt-y::before { display: block; left: -39px; }
}
@media (prefers-reduced-motion: reduce) {
  .nv-vc .nv-vt-it, .nv-vc .nv-vt-y { transform: none !important; }
}

/* ⑥-2 함께한 고객: 믿음 섹션 아래 따로 흰 띠 (위아래 가는 선) — 10-21 밤 */
.nv-clients { padding: 76px 0 84px; background: #fff; border-top: 1px solid #ececee; border-bottom: 1px solid #ececee; }
.nv-clients .nv-clients-head { margin-top: 0; }
.nv-trust .channels { margin-top: 80px; }
@media (max-width: 900px) {
  .nv-clients { padding: 56px 0 60px; }
  .nv-trust .channels { margin-top: 48px; }
}

/* ⑥ 믿음 숫자: 전체 숫자를 카드에 꽉 차게 (10-21 밤) — 제목 아래 2×2 넓은 카드, 숫자 폭 고정(tabular-nums)이라 올라가는 동안 흔들림 없음 */
.nv-trust .split { grid-template-columns: 1fr; gap: 48px; }
.nv-trust .split > div:first-child { max-width: 760px; }
.nv-stats { gap: 16px; }
.nv-stats .stat { padding: 30px 32px 28px; }
.nv-stats .stat b { margin: 0; font-family: "Inter Tight", "Pretendard Variable", sans-serif; font-size: clamp(40px, 5.3vw, 86px); font-weight: 800; line-height: 1; letter-spacing: -.035em;
                    font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--acc); }
.nv-stats .stat > span { margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--text); }
.nv-stats .stat > span small { margin-left: 6px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.nv-more { display: flex; align-items: center; gap: 18px; margin-top: 18px; padding: 18px 24px; border-radius: 6px; background: #fff; box-shadow: var(--card); }
.nv-more b { flex: none; font: 800 30px/1 "Inter Tight", sans-serif; letter-spacing: -.03em; color: var(--acc); }
.nv-more span { font-size: 15px; color: var(--body); }
.nv-more em { font-style: normal; font-weight: 800; color: var(--text); }
@media (max-width: 900px) {
  .nv-trust .split { gap: 32px; }
  .nv-stats { grid-template-columns: 1fr; gap: 10px; }
  .nv-stats .stat { padding: 22px 22px 20px; }
  .nv-stats .stat b { font-size: clamp(36px, 12.6vw, 60px); }
  .nv-more { gap: 14px; padding: 16px 18px; }
  .nv-more b { font-size: 24px; }
  .nv-more span { font-size: 14px; }
}

/* (10-21) '숫자로 보는 나우비는!' — 아래 카드 숫자보다 작으면 눈에 안 띈다(주인님) → 두 줄 그대로 훨씬 크게 */
#trust .ttl { font-size: clamp(56px, 7.4vw, 124px); line-height: 1.08; letter-spacing: -.045em; }
@media (max-width: 760px) { #trust .ttl { font-size: clamp(44px, 14vw, 64px); } }

/* ⑥ 믿음 (10-21 밤 2): 숫자 뒤 단위는 작게(같은 빨강, 바닥선 맞춤) · 대표 채널 3곳 크게 */
.nv-stats .stat b .u { margin-left: .06em; font-size: .4em; font-weight: 800; letter-spacing: 0; }
.nv-feat-head { margin-top: 96px; }
.nv-feat-head .nv-feat-t { margin-top: 14px; font-size: clamp(26px, 2.6vw, 38px); font-weight: 800; letter-spacing: -.03em; }
.nv-trust .channels.nv-ch3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.nv-ch3 .ch .thumb { aspect-ratio: 16 / 9; border-radius: 8px; }
.nv-ch3 .ch .views { left: 14px; bottom: 14px; padding: 7px 12px; font-size: 13.5px; }
.nv-ch3 .ch h3 { margin-top: 18px; font-size: 21px; }
.nv-ch3 .ch h3 svg { width: 24px; height: 17px; }
.nv-ch3 .ch p { margin-top: 6px; font-size: 15.5px; }
@media (max-width: 900px) {
  .nv-feat-head { margin-top: 64px; }
  .nv-trust .channels.nv-ch3 { grid-template-columns: 1fr; gap: 28px; margin-top: 24px; }
  .nv-ch3 .ch h3 { font-size: 19px; }
}

/* ══════════ 10-21 밤 3: 걸어온 길 — 선·점은 2017 표지 아래 ~ 2026 표지 위 · 점이 닿으면 항목이 켜짐 · 글자 크게 ══════════ */
.nv-vt .nv-vt-head .ttl { font-size: clamp(40px, 4.6vw, 72px); line-height: 1.18; }
.nv-vt .nv-vt-head .sx-note { margin-top: 28px; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.8; }
.nv-vc .nv-vt-list { max-width: 1180px; margin-top: 96px; }
.nv-vt-list::before { top: var(--a, 10px) !important; bottom: auto !important; height: var(--len, 0px); }
.nv-vt-list::after { top: var(--a, 10px) !important; height: calc(var(--len, 0px) * var(--p)) !important; }
.nv-vt-dot { top: calc(var(--a, 10px) + var(--len, 0px) * var(--p)) !important; }
.nv-vc .nv-vt-y { padding-bottom: 88px; }
.nv-vc .nv-vt-y.nv-vt-now { padding-top: 32px; padding-bottom: 0; }
.nv-vc .nv-vt-y b { font-size: clamp(48px, 5vw, 80px); padding: 8px 30px; }
.nv-vc .nv-vt-y span { margin-top: 10px; font-size: 15px; }
.nv-vc .nv-vt-y { opacity: 1; transform: none; }
.nv-vc .nv-vt-it { padding-bottom: 72px; opacity: .28; }
.nv-vc .nv-vt-it.nv-l { padding-right: 72px; }
.nv-vc .nv-vt-it.nv-r { padding-left: 72px; }
.nv-vc .nv-vt-it i { font-size: 14px; letter-spacing: .06em; opacity: .6; transition: opacity .5s; }
.nv-vc .nv-vt-it b { position: relative; display: inline-block; margin-top: 12px; font-size: clamp(26px, 2.4vw, 38px); color: #9a9a9e; transition: color .5s; }
.nv-vc .nv-vt-it b::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; background: var(--acc); transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.nv-vc .nv-vt-it.nv-l b::after { transform-origin: right; }
.nv-vc .nv-vt-it p { margin-top: 18px; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.8; }
.nv-vc .nv-vt-it.on { opacity: 1; }
.nv-vc .nv-vt-it.on i { opacity: 1; }
.nv-vc .nv-vt-it.on b { color: var(--ink); }
.nv-vc .nv-vt-it.hit b::after { transform: scaleX(1); }
.nv-vc .nv-vt-it.on:not(.hit) b::after { transform: scaleX(0); transition-duration: 1s; }
.nv-vc .nv-vt-it::before { top: 12px; width: 16px; height: 16px; transition: border-color .4s, background .4s, box-shadow .4s; }
.nv-vc .nv-vt-it.nv-l::before { right: -9px; }
.nv-vc .nv-vt-it.nv-r::before { left: -9px; }
.nv-vc .nv-vt-it.on::before { border-color: var(--acc); background: var(--acc); }
.nv-vc .nv-vt-it.hit::before { animation: nvPulse 1.1s ease-out; }
@keyframes nvPulse { 0% { box-shadow: 0 0 0 0 rgba(196, 18, 28, .45); } 100% { box-shadow: 0 0 0 16px rgba(196, 18, 28, 0); } }
@media (max-width: 900px) {
  .nv-vt .nv-vt-head .ttl { font-size: clamp(32px, 9vw, 44px); }
  .nv-vt .nv-vt-head .sx-note { font-size: 16.5px; }
  .nv-vc .nv-vt-list { margin-top: 56px; }
  .nv-vc .nv-vt-y { padding-bottom: 56px; }
  .nv-vc .nv-vt-y.nv-vt-now { padding-top: 16px; }
  .nv-vc .nv-vt-y b { font-size: 44px; padding: 0; }
  .nv-vc .nv-vt-y::before { top: 18px !important; }
  .nv-vc .nv-vt-it, .nv-vc .nv-vt-it.nv-l, .nv-vc .nv-vt-it.nv-r { padding: 0 0 52px; }
  .nv-vc .nv-vt-it b { font-size: 24px; }
  .nv-vc .nv-vt-it p { font-size: 16px; }
  .nv-vc .nv-vt-it i { font-size: 13px; }
  .nv-vc .nv-vt-it.nv-l::before, .nv-vc .nv-vt-it.nv-r::before { left: -41px; right: auto; }
  .nv-vc .nv-vt-it.nv-l b::after { transform-origin: left; }
}
@media (prefers-reduced-motion: reduce) {
  .nv-vc .nv-vt-it, .nv-vc .nv-vt-it b, .nv-vc .nv-vt-it::before { transition: none; animation: none; }
}
/* 걸어온 길 손질: 동그라미는 줄 위에 고정(항목 전체가 아니라 글만 미끄러져 들어옴) · 태그와 제목은 따로 줄 */
.nv-vc .nv-vt-it, .nv-vc .nv-vt-it.nv-l, .nv-vc .nv-vt-it.nv-r, .nv-vc .nv-vt-it.on { transform: none; }
.nv-vc .nv-vt-it > * { transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.nv-vc .nv-vt-it.nv-l > * { transform: translateX(-36px); }
.nv-vc .nv-vt-it.nv-r > * { transform: translateX(36px); }
.nv-vc .nv-vt-it.on > * { transform: none; }
.nv-vc .nv-vt-it i { display: block; }
.nv-vc .nv-vt-it b { display: block; width: fit-content; }
.nv-vc .nv-vt-it.nv-l b { margin-left: auto; }
@media (max-width: 900px) {
  .nv-vc .nv-vt-it.nv-l > *, .nv-vc .nv-vt-it.nv-r > * { transform: translateY(14px); }
  .nv-vc .nv-vt-it.on > * { transform: none; }
  .nv-vc .nv-vt-it.nv-l b { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .nv-vc .nv-vt-it > * { transform: none !important; transition: none; } }

/* ══════════ 10-21 밤 4: 걸어온 길 — S자 길(SVG) + 빛을 받는 카드 (밑줄 · 곧은 줄 · 동그라미 없앰) ══════════ */
.nv-vc .nv-vt-list::before, .nv-vc .nv-vt-list::after, .nv-vc .nv-vt-dot, .nv-vc .nv-vt-list > li::before { display: none !important; }
.nv-vc .nv-vt-it b::after { display: none !important; }
.nv-vc .nv-vt-it, .nv-vc .nv-vt-it.on, .nv-vc .nv-vt-it > *, .nv-vc .nv-vt-it.on > * { opacity: 1 !important; transform: none !important; }
.nv-road { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; }
.nv-road-base { fill: none; stroke: rgba(17, 17, 17, .12); stroke-width: 2; }
.nv-road-red { fill: none; stroke: var(--acc); stroke-width: 2.6; stroke-linecap: round; }
.nv-beam { stroke: rgba(255, 110, 118, .6); stroke-width: 1.4; stroke-dasharray: 2 4; }
.nv-tail circle { fill: #e0303a; }
.nv-dot { fill: #fff; stroke: var(--acc); stroke-width: 3; }
.nv-road.still .nv-dot, .nv-road.still .nv-halo, .nv-road.still .nv-tail, .nv-road.still .nv-beam { display: none; }
.nv-vc .nv-vt-list > li { position: relative; z-index: 1; }
.nv-vc .nv-vt-it.nv-l { padding-right: 96px; text-align: left; }
.nv-vc .nv-vt-it.nv-r { padding-left: 96px; }
.nv-vc .nv-vt-it.nv-l b { margin-left: 0; }
.nv-card { --t: 0; --k: 0; --lx: 50%; --ly: 50%; position: relative; overflow: hidden; padding: 30px 34px 32px; border-radius: 16px;
           background: rgba(255, 255, 255, calc(.55 + .4 * var(--t)));
           box-shadow: 0 calc(10px + 18px * var(--k)) calc(30px + 30px * var(--k)) rgba(17, 17, 17, calc(.05 + .07 * var(--k)));
           transform: translateY(calc(-4px * var(--k))); }
.nv-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: calc(var(--k) + .35 * var(--t));
                   background: radial-gradient(circle at var(--lx) var(--ly), rgba(255, 252, 247, .95) 0, rgba(255, 228, 228, .55) 32%, rgba(255, 238, 238, 0) 68%); }
.nv-card > * { position: relative; opacity: calc(.35 + .65 * var(--t)); }
.nv-vc .nv-card b { color: var(--ink); margin-top: 10px; }
.nv-vc .nv-card i { opacity: 1; }
.nv-vc .nv-card p { margin-top: 14px; }
@media (max-width: 900px) {
  .nv-vc .nv-vt-list { padding-left: 52px; }
  .nv-vc .nv-vt-it, .nv-vc .nv-vt-it.nv-l, .nv-vc .nv-vt-it.nv-r { padding: 0 0 28px; }
  .nv-card { padding: 22px 22px 24px; border-radius: 14px; }
  .nv-vc .nv-vt-y { padding-bottom: 44px; }
}

/* ══════════ 10-21 밤 5: 걸어온 길 — 직각 회로 길 + 점이 지나는 카드는 크림슨 (곡선 · 빛 번짐 없앰) ══════════ */
.nv-card::before { display: none !important; }
.nv-card { background: #fff !important; transform: none !important; box-shadow: 0 10px 30px rgba(17, 17, 17, .06) !important; z-index: 1;
           transition: background-color .18s, transform .18s, box-shadow .18s !important; }
.nv-card > * { opacity: .55 !important; transition: opacity .25s, color .18s; }
.nv-vt-it.done .nv-card > *, .nv-vt-it.hot .nv-card > * { opacity: 1 !important; }
.nv-vt-it.hot .nv-card { background: var(--acc) !important; transform: scale(1.02) !important; box-shadow: 0 22px 50px rgba(196, 18, 28, .35) !important; }
.nv-vt-it.hot .nv-card b, .nv-vt-it.hot .nv-card p, .nv-vt-it.hot .nv-card i { color: #fff !important; }
.nv-card::after { content: ""; position: absolute; left: var(--fx, 0); top: var(--fy, 0); width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%; pointer-events: none; opacity: 0;
                  background: radial-gradient(circle, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 60%); }
.nv-vt-it.hot .nv-card::after { animation: nvFlash .45s ease-out; }
@keyframes nvFlash { from { opacity: 1; transform: scale(.4); } to { opacity: 0; transform: scale(1.3); } }
.nv-road-base { stroke: rgba(17, 17, 17, .14); stroke-width: 2; stroke-linejoin: miter; }
.nv-road-red { stroke-width: 3; stroke-linecap: square; stroke-linejoin: miter; }
.nv-nodes rect { fill: #fff; stroke: rgba(17, 17, 17, .25); stroke-width: 1.5; }
.nv-nodes rect.on { fill: var(--acc); stroke: var(--acc); }
.nv-stubs line { stroke: rgba(17, 17, 17, .14); stroke-width: 2; }
.nv-stubs rect { fill: rgba(17, 17, 17, .2); }
.nv-stubs g.on line { stroke: var(--acc); }
.nv-stubs g.on rect { fill: var(--acc); }
.nv-halo { fill: rgba(196, 18, 28, .22); }
.nv-dot { fill: #fff; stroke: var(--acc); stroke-width: 3.5; }
.nv-tail circle { fill: var(--acc); }
.nv-spark { fill: none; stroke: #ff4a52; stroke-width: 2; animation: nvSpark .5s ease-out forwards; }
@keyframes nvSpark { from { r: 3; opacity: 1; } to { r: 22; opacity: 0; } }
.nv-beam { display: none; }
.nv-vc .nv-vt-y b { transition: background-color .25s, color .25s; }
.nv-vc .nv-vt-now.reach b { background: var(--acc); color: #fff; }
.nv-road.still .nv-dot, .nv-road.still .nv-halo, .nv-road.still .nv-tail { display: none; }
@media (max-width: 900px) {
  .nv-vc .nv-vt-list { padding-left: 50px; }
}

/* ① 약속: 휴대폰(760px 이하)은 벤 그림(나 · NAUBI · 우리)을 글 위로 — 데스크톱은 그대로 (10-21 밤) */
@media (max-width: 760px) {
  .promise .split > .promise-art { order: -1; }
  .promise .split { gap: 28px; }
}

/* 걸어온 길 10-21 밤 6: 선은 가늘고 단정하게 */
.nv-road-base { stroke-width: 1.5; stroke: rgba(17, 17, 17, .12); }
.nv-road-red { stroke-width: 2; }
.nv-vt-it.hot .nv-card { transition-duration: .2s !important; }

/* (10-21) 숫자 카드 4줄 말고 2줄(2×2)로(주인님) — 좁은 화면에서도 두 칸, 숫자는 칸에 맞춰 줄임 · 제목도 두 줄 고정 */
#trust .ttl { white-space: nowrap; }
@media (max-width: 900px) {
  .nv-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .nv-stats .stat { padding: 20px 18px 18px; min-width: 0; }
  .nv-stats .stat b { font-size: clamp(22px, 5.2vw, 48px); }
  .nv-stats .stat > span { font-size: 13.5px; }
}
@media (max-width: 420px) { .nv-stats .stat b { font-size: clamp(19px, 5.6vw, 26px); } .nv-stats .stat { padding: 16px 14px; } }

/* ══════════ 10-21 밤 최종: 걸어온 길 — 곧은 가운데 줄 + 카드가 날아 들어옴 (회로 길 SVG는 더 안 만듦) ══════════ */
.nv-road { display: none !important; }
.nv-ln { position: absolute; left: calc(50% - 1px); top: var(--a0, 0); width: 2px; border-radius: 2px; z-index: 0; pointer-events: none; }
.nv-ln-base { height: var(--len, 0); background: rgba(17, 17, 17, .12); }
.nv-ln-red { height: calc(var(--len, 0px) * var(--p, 0)); background: linear-gradient(180deg, rgba(196, 18, 28, .45), var(--acc)); }
.nv-ln-dot { position: absolute; left: 50%; top: calc(var(--a0, 0px) + var(--len, 0px) * var(--p, 0)); z-index: 2; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
             background: #fff; border: 3px solid var(--acc); box-shadow: 0 0 0 6px rgba(196, 18, 28, .14), 0 0 18px 4px rgba(196, 18, 28, .4); pointer-events: none; }
.nv-card { will-change: transform, opacity; transform: translateX(var(--tx, 0)) scale(var(--sc, 1)) !important; opacity: var(--op, 1); transition: background-color .2s, box-shadow .2s !important; }
.nv-vt-it.hot .nv-card { transform: translateX(var(--tx, 0)) scale(calc(var(--sc, 1) * 1.02)) !important; }
.nv-vt-it.hot .nv-card { transform-origin: center; }
.nv-card > * { opacity: 1 !important; }
.nv-vt-it.hot .nv-card { box-shadow: 0 22px 50px rgba(196, 18, 28, .32) !important; }
.nv-tick { position: absolute; top: 46px; height: 2px; background: var(--acc); transform: scaleX(0); transition: transform .25s ease-out; z-index: 0; }
.nv-vt-it.nv-l .nv-tick { right: 0; width: 96px; transform-origin: right; }
.nv-vt-it.nv-r .nv-tick { left: 0; width: 96px; transform-origin: left; }
.nv-vt-it.hot .nv-tick { transform: scaleX(1); }
@media (max-width: 900px) {
  .nv-ln { left: 17px; }
  .nv-ln-dot { left: 18px; }
  .nv-vt-it.nv-l .nv-tick, .nv-vt-it.nv-r .nv-tick { left: -32px; right: auto; width: 32px; transform-origin: left; }
}
@media (prefers-reduced-motion: reduce) { .nv-card { transform: none !important; opacity: 1 !important; } }

/* ① 약속 카드 (10-21 밤): 01 · 02 · 03 큰 크림슨 번호를 그림 아래끝에 걸친 흰 꼬리표로 · 글자 크게 */
.nv-pv li > div { padding: 46px 34px 36px; }
.nv-pv li > div::after { content: "0" counter(val); position: absolute; left: 24px; right: auto; top: -46px; padding: 8px 14px 0; border-radius: 10px 10px 0 0; background: #fff;
                         font: 800 64px/1 "Inter Tight", sans-serif; letter-spacing: -.04em; color: rgba(196, 18, 28, .88); }
.nv-pv li > div { margin-top: 0; }
.promise .nv-pv span { font-size: 13.5px; }
.promise .nv-pv b { margin-top: 10px; font-size: clamp(26px, 2.1vw, 30px); }
.promise .nv-pv p { margin-top: 10px; font-size: 18px; line-height: 1.7; }
@media (max-width: 900px) {
  .nv-pv li > div { padding: 40px 24px 28px; }
  .nv-pv li > div::after { font-size: 54px; top: -40px; left: 16px; }
  .promise .nv-pv b { font-size: 24px; }
  .promise .nv-pv p { font-size: 16.5px; }
}
/* 날아 들어오기: 예전 '항목 안 요소는 움직임 없음' 규칙보다 우선하도록 선택자를 더 구체적으로 */
.nv-vc .nv-vt-list .nv-vt-it > .nv-card { transform: translateX(var(--tx, 0)) scale(var(--sc, 1)) !important; opacity: var(--op, 1) !important; }
.nv-vc .nv-vt-list .nv-vt-it.hot > .nv-card { transform: translateX(var(--tx, 0)) scale(calc(var(--sc, 1) * 1.02)) !important; }
.nv-vc .nv-vt-list .nv-vt-it > .nv-tick { opacity: 1 !important; transform: scaleX(0) !important; }
.nv-vc .nv-vt-list .nv-vt-it.hot > .nv-tick { transform: scaleX(1) !important; }
@media (prefers-reduced-motion: reduce) { .nv-vc .nv-vt-list .nv-vt-it > .nv-card { transform: none !important; opacity: 1 !important; } }

/* (10-21) 휴대폰: 머리 메뉴와 벤 그림 사이 여백 줄임(주인님) */
@media (max-width: 760px) {
  .promise { padding-top: 20px; }
  .promise .split { row-gap: 18px; }
}

/* ══════════ 10-21 밤: 소개 섹션 순서 확정 — ① 히어로(흰) ② 고객(연회색) ③ 세 가지 약속(흰) ④ 공간(어두운 사진) ⑤ 걸어온 길(모자이크) ⑥ 설계(흰) ⑦ 동원(연회색 그라데이션) ⑧ 숫자(연회색) ⑨ 지구(어둠) ══════════ */
.promise:not(.nv-pcards) { padding-bottom: 110px; }
.nv-clients { background: #f6f6f7; border: 0; }
.nv-clients .ngm-lane li { box-shadow: 0 6px 22px rgba(17, 17, 17, .05); }
.nv-pcards { padding: 96px 0 130px; }
.nv-pcards .values.nv-pv { margin-top: 64px; }
.nv-trust { padding-top: 140px; }
@media (max-width: 900px) {
  .promise:not(.nv-pcards) { padding-bottom: 72px; }
  .nv-pcards { padding: 64px 0 88px; }
  .nv-pcards .values.nv-pv { margin-top: 44px; }
  .nv-trust { padding-top: 96px; }
}

/* (10-21) 약속 히어로 위아래 여백 너무 많음(주인님) → 화면 높이 꽉 채우기 풀고 적당히 */
.promise:not(.nv-pcards) { min-height: 0 !important; padding: 96px 0 84px !important; }
@media (max-width: 760px) { .promise:not(.nv-pcards) { padding: 24px 0 48px !important; } }
/* 고객 로고: 문구 없이 흰 바탕에 로고만 흐름 */
.nv-clients { background: #fff !important; padding: 36px 0 !important; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.nv-clients .nv-clients-head { display: none !important; }
.nv-clients .ngm-marq { margin-top: 0 !important; }
/* (10-21) 세 가지 약속 카드를 히어로 바로 아래로 · 그림 높이 줄임 · 히어로와 붙여 한 덩어리로 */
.nv-pv-img { aspect-ratio: 16 / 7 !important; }
.promise:not(.nv-pcards) { padding-bottom: 24px !important; }
.nv-pcards { padding: 8px 0 88px !important; }
.nv-pcards .values.nv-pv { margin-top: 24px !important; }
.nv-pcards .label, .nv-pcards .nv-pcards-lab { display: none !important; }
@media (max-width: 760px) { .nv-pcards { padding: 0 0 56px !important; } .nv-pv-img { aspect-ratio: 16 / 8 !important; } }
.promise.nv-pcards { min-height: 0 !important; display: block !important; }
/* (10-21) 소개 첫 화면에 약속 카드 3장까지 다 보이게(주인님) → 머리 띠 바로 아래로 끌어올리고 벤 그림 조금 작게 · 히어로와 카드 사이 좁힘 */
@media (min-width: 901px) {
  .promise:not(.nv-pcards) { padding: clamp(24px, 4vh, 44px) 0 16px !important; }
  .promise:not(.nv-pcards) .split { align-items: center; }
  .promise:not(.nv-pcards) .promise-art .hv { max-width: min(100%, 560px, calc((100svh - 470px) * 1.5)); min-width: 380px; margin-left: auto; }
  .nv-pcards { padding-top: 0 !important; }
  .nv-pcards .values.nv-pv { margin-top: 16px !important; }
  .nv-pv-img { aspect-ratio: 16 / 6 !important; }
}
/* (10-21) 고객 로고 띠에 간단한 제목 다시(주인님) — 라벨 + 한 줄, 띠는 낮게 그대로 */
.nv-clients { padding: 48px 0 40px !important; }
.nv-clients .nv-clients-head { display: block !important; margin: 0 0 28px; }
.nv-clients .nv-sub { margin-top: 10px; font-size: clamp(22px, 2vw, 28px); }
@media (max-width: 760px) { .nv-clients { padding: 36px 0 28px !important; } .nv-clients .nv-clients-head { margin-bottom: 20px; } }
/* (10-21) 걸어온 길 카드가 한 줄에 하나씩이라 길고 딱딱함(주인님) → 왼쪽 · 오른쪽 카드가 살짝만 엇갈려 겹치는 지그재그 (PC만) */
@media (min-width: 901px) {
  .nv-vc .nv-vt-it + .nv-vt-it { margin-top: -90px; }      /* (10-21) 같은 쪽 카드끼리 붙어 보임(주인님) → 틈 약 60px */
}
/* (10-21 주인님) 숫자 섹션 제목은 한 줄로 — 휴대폰은 화면 폭에 맞춰 글자를 줄임 */
#trust .ttl.nv-1l { white-space: nowrap; }
@media (max-width: 760px) { #trust .ttl.nv-1l { font-size: min(9vw, 44px); } }
/* (10-21 주인님) 빨간 카드에도 검정 글자를 섞음 — 흰 카드에서 빨간 글자였던 자리(01 · 콘텐츠 제작…)를 검정으로 */
.nv-vt-it.hot .nv-card i { color: #111 !important; background: #fff; display: inline-block !important; width: fit-content; padding: 6px 12px 5px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }      /* 흰 알약 + 검정 글자 */
#trust .body.nv-1l { white-space: nowrap; max-width: none; }
@media (max-width: 760px) { #trust .body.nv-1l { white-space: normal; } }      /* 휴대폰은 폭이 모자라 자연스럽게 줄바꿈 */
/* (10-21 시안 ?flow=1) 동원 → 설계를 한 디자인 시스템으로 — 같은 흰 바탕 · 같은 높이 · 큐브 키우고 채도 낮춤 · 그물 퍼짐 줄임 · 사이에 '그물 → 격자' 띠 */
.flow #method::before, .flow #plan::before { display: none; }
.flow #method, .flow #plan { background: #f7f7f8; min-height: 760px; }
.flow #method .feat-txt, .flow #plan .feat-txt { padding-top: 90px; padding-bottom: 90px; }
.flow .feat.net .feat-media { margin-left: 0; transform: scale(.92); }
.flow .feat.cube .feat-media { margin: 0 0 0 calc(var(--gut) + 40px); }
.flow #plan { overflow-x: clip; }
.flow #plan .feat-media iframe { inset: -25%; width: 150%; height: 150%; }      /* 큐브가 비틀려 튀어나와도 잘리지 않게 iframe을 넓게(경계 없음), 줄여서 크기는 1.12배 */
.flow #plan .feat-media iframe { filter: saturate(1.45) contrast(1.04); }      /* (10-22) 큐브 영상이 흐려 보여서 채도를 올림 */
.fl-band { position: relative; height: 340px; margin: -250px 0 -320px; z-index: 2; pointer-events: none; }
.fl-band canvas { position: absolute; inset: 0; }
.fl-cube { position: absolute; inset: 18% 20%; pointer-events: none; }
.fl-cube svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fl-cube line { stroke: rgba(10, 10, 10, .16); stroke-width: .25; vector-effect: non-scaling-stroke; stroke-width: 1; }
.fl-cube i { position: absolute; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: rgba(10, 10, 10, .45); }
.fl-cube i.r { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: #c4121c; box-shadow: 0 0 0 5px rgba(196, 18, 28, .12); }
@media (max-width: 900px) { .fl-band { display: none; } .flow .feat.cube .feat-media { transform: none; } .flow #method, .flow #plan { min-height: 0; } }
/* (10-21) 섹션 제목 움직임: 단어가 가림막 아래에서 차례로 올라옴 · 빨간 키워드 밑줄이 그어짐 · 라벨 선이 자람 (about-ngm.js 6) */
.tw-on .tw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.tw-on .tw > span { display: inline-block; transform: translateY(105%); transition: transform .9s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i) * 70ms + .1s); }
.tw-on.tw-in .tw > span { transform: none; }
.tw-on em { position: relative; }
.tw-on em::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .08em; background: currentColor; border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.6, 0, .2, 1); transition-delay: calc(var(--n) * 70ms + .45s); opacity: .9; }
.tw-on.tw-in em::after { transform: scaleX(1); }
.label.lb-in::before { animation: lbGrow .9s cubic-bezier(.2, .8, .2, 1) both; transform-origin: left; }
@keyframes lbGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* (10-21) 약속 카드 등장 — 벤 그림과 같은 시간(--T) 안에 세 장이 0.18초씩 엇갈려 올라오고, 사진은 아래에서 열리며 살짝 줌아웃, 번호는 끝에 톡 (about-ngm.js 7) */
.pv-arm:not(.pv-go) > li { opacity: 0 !important; }
.pv-go > li { --dl: calc(var(--n, 0) * 180ms); animation: pvUp calc(var(--T) - var(--dl)) var(--dl) cubic-bezier(.2, .8, .2, 1) both !important; }
.pv-go > li:nth-child(1) { --n: 0; } .pv-go > li:nth-child(2) { --n: 1; } .pv-go > li:nth-child(3) { --n: 2; }
.pv-go > li .nv-pv-img { animation: pvImg calc(var(--T) - var(--dl)) var(--dl) cubic-bezier(.5, 0, .2, 1) both; }
.pv-go > li > div::after { animation: pvNum calc(var(--T) - var(--dl)) var(--dl) both; }
@keyframes pvUp { from { opacity: 0; transform: translateY(44px); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes pvImg { from { clip-path: inset(100% 0 0 0); transform: scale(1.14); } to { clip-path: inset(0 0 0 0); transform: scale(1); } }
@keyframes pvNum { 0%, 55% { opacity: 0; transform: translateY(14px) scale(.7); } 85% { opacity: 1; transform: translateY(-3px) scale(1.08); } 100% { opacity: 1; transform: none; } }
/* (10-21) 큐브 궤도 — 얇은 회색 타원 + 빛이 흐르는 크림슨 조각 + 빛 점 (about-ngm.js 5) */
.flow #plan .feat-media iframe { z-index: 1; }
/* (10-21) 큐브 궤도 대신 마법 별똥별(canvas) · 그물 멈춤 빈 칸은 같은 바탕 */
/* (10-21) 그물 펼침 멈춤은 sticky(about-ngm.js 5) · 큐브 둘레 삐죽 선 · 점이 각자 조금씩 흔들림 */
.fl-pin { position: relative; z-index: 2; margin-bottom: -130px; background: linear-gradient(#f7f7f8 calc(100% - 130px), transparent 0); pointer-events: none; }
.fl-pin-in > * { pointer-events: auto; }
.fl-pin-in { position: relative; }
.fl-cube { z-index: 2; }
.fl-cube svg { animation: flSway 7s ease-in-out infinite alternate; transform-origin: 50% 50%; }
.fl-cube line:nth-child(odd) { animation: flLine 3.6s ease-in-out infinite alternate; }
.fl-cube line:nth-child(even) { animation: flLine 4.4s ease-in-out -1.5s infinite alternate-reverse; }
@keyframes flLine { from { stroke-opacity: .5; } to { stroke-opacity: 1; } }
@keyframes flSway { from { transform: rotate(-1.2deg) scale(.99); } to { transform: rotate(1.2deg) scale(1.01); } }
.fl-cube i { animation: flDot 3.2s ease-in-out infinite alternate; }
.fl-cube i:nth-of-type(2n) { animation-duration: 4.1s; animation-delay: -1s; }
.fl-cube i:nth-of-type(3n) { animation-duration: 5s; animation-delay: -2.2s; }
@keyframes flDot { from { transform: translate(-6px, 4px); } to { transform: translate(6px, -5px); } }
@media (prefers-reduced-motion: reduce) { .fl-cube svg, .fl-cube line, .fl-cube i { animation: none; } }
/* (10-21 주인님) 그물과 큐브를 더 가깝게 · 큐브에 설계도 느낌(꺾쇠 · 점선 기준선 · 치수선) */
.flow #plan { padding-top: 0; }
.fl-bp { position: absolute; inset: 25.1% 25.0% 22.4% -12.6%; pointer-events: none; z-index: 2; }
.fl-bp svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fl-bp path { fill: none; vector-effect: non-scaling-stroke; }
.fl-bp .c { stroke: #c4121c; stroke-width: 1.6; }
.fl-bp .g { stroke: rgba(10, 10, 10, .14); stroke-width: 1; stroke-dasharray: 4 5; }
.fl-bp .d { stroke: rgba(10, 10, 10, .4); stroke-width: 1; }
.fl-bp em { position: absolute; font: 600 10.5px/1 "Inter Tight", sans-serif; font-style: normal; letter-spacing: .18em; color: rgba(10, 10, 10, .5); white-space: nowrap; }
.fl-bp .t1 { left: 50%; top: -11%; transform: translateX(-50%); background: #f7f7f8; padding: 0 8px; }
.fl-bp .t2 { left: 108%; top: 50%; transform: translate(0, -50%) rotate(90deg); transform-origin: left center; background: #f7f7f8; padding: 0 8px; }
.fl-bp .t3 { left: 0; bottom: -7%; color: #c4121c; }
.fl-bp { animation: bpIn 1.2s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes bpIn { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .fl-bp { display: none; } }
/* (10-22 주인님) 설계도 선은 큐브 바깥에서만 · 자주 움직이되 부드럽게가 아니라 툭툭 절도 있게(촥 · 촤촤촥) — 게다가 큐브가 변신할 때(.go) 한 번 더 크게 벌어지고, 철컥 잠길 때(.hit) 같이 '착' */
.fl-bp { inset: 21.5% 19% 18.5% -18.5% !important; }
.fl-bp path { transform-box: view-box; transform-origin: 50% 50%; }
.fl-bp .c { animation: bpSnapA 2.4s infinite; }
.fl-bp .d { animation: bpSnapA 2.4s -.6s infinite; }
.fl-bp .g { animation: bpSnapB 3.2s -1.1s infinite; }
@keyframes bpSnapA {
  0%, 18% { transform: scale(1); animation-timing-function: cubic-bezier(.1, 1.7, .3, 1); }
  22%, 36% { transform: scale(1.05); animation-timing-function: cubic-bezier(.1, 1.7, .3, 1); }
  40% { transform: scale(1.025); animation-timing-function: cubic-bezier(.1, 1.7, .3, 1); }
  44% { transform: scale(1.06); animation-timing-function: cubic-bezier(.1, 1.7, .3, 1); }
  48%, 66% { transform: scale(1.09); animation-timing-function: cubic-bezier(.1, 1.7, .3, 1); }
  71%, 100% { transform: scale(1); }
}
@keyframes bpSnapB {
  0%, 26% { transform: scale(1, 1); animation-timing-function: cubic-bezier(.1, 1.7, .3, 1); }
  31%, 52% { transform: scale(1.07, 1.03); animation-timing-function: cubic-bezier(.1, 1.7, .3, 1); }
  57%, 74% { transform: scale(1.03, 1.06); animation-timing-function: cubic-bezier(.1, 1.7, .3, 1); }
  79%, 100% { transform: scale(1, 1); }
}
.fl-bp svg { transform-origin: 50% 50%; transition: transform var(--go, 600ms) cubic-bezier(.1, 1.4, .3, 1); }
.fl-bp.go svg { transform: scale(1.05); }
.fl-bp.hit svg { transition: none; animation: bpHit .3s cubic-bezier(.1, 1.8, .3, 1); }
@keyframes bpHit { 0% { transform: scale(1.05); } 40% { transform: scale(.985); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .fl-bp path, .fl-bp svg { transition: none; animation: none !important; } }
/* (10-22 주인님) 2026 대신 문장 — 알약 없이 글자만. 처음엔 또렷한 검정, 줄 끝에 닿으면 한 줄씩 빨강으로(시안 ?now=1~5, about-ngm.js 8) */
.nv-vc .nv-now2 { position: relative; z-index: 3; padding-bottom: 70px !important; }
.nv-vc .nv-now2 b { position: relative; display: inline-block; background: none !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important;
  font: 800 clamp(26px, 2.6vw, 40px)/1.32 Pretendard, sans-serif !important; letter-spacing: -.03em !important; color: var(--ink) !important; text-align: center; white-space: normal !important; }
.nv-vc .nv-now2 b::before { display: none !important; }
.nv-now2 em { font-style: normal; }
.nv-vc .nv-vt-y.nv-now2 b span { margin: 0; padding: 0; background: none; border-radius: 0; font: inherit; letter-spacing: inherit; color: inherit; z-index: auto; }      /* 예전 2026 아래 글씨 칸 모양이 묻지 않게 */
.nv-vc .nv-vt-y.nv-now2 .nw-ln { position: relative; display: block; width: fit-content; margin: 0 auto; }
.nv-vc .nv-vt-y.nv-now2 .nw-a, .nv-vc .nv-vt-y.nv-now2 .nw-b { display: block; }
.nv-vc .nv-vt-y.nv-now2 .nw-b { position: absolute; inset: 0; color: #c4121c; }
.nv-now2 .nw-ln { --d: calc(var(--k) * 420ms); }
/* 1 칠하기: 빨강이 왼쪽에서 오른쪽으로 쓱, 앞에 밝은 빛 띠 */
.nw-v1 .nw-b, .nw-v4 .nw-b { clip-path: inset(-10% 100% -10% 0); transition: clip-path .7s cubic-bezier(.7, 0, .2, 1) var(--d); }
.nw-v1.reach .nw-b, .nw-v4.reach .nw-b { clip-path: inset(-10% 0 -10% 0); }
.nw-v1 .nw-ln::after, .nw-v4 .nw-ln::after { content: ""; position: absolute; top: 8%; bottom: 8%; left: 0; width: 3px; background: #ff4a55; box-shadow: 0 0 12px 3px rgba(255, 74, 85, .6); opacity: 0; }
.nw-v1.reach .nw-ln::after, .nw-v4.reach .nw-ln::after { animation: nwEdge .7s cubic-bezier(.7, 0, .2, 1) var(--d) both; }
@keyframes nwEdge { 0% { left: 0; opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
/* 2 밀어올리기: 검정 줄은 위로 빠지고 빨간 줄이 아래에서 착 */
.nv-vc .nv-vt-y.nw-v2 b .nw-ln, .nv-vc .nv-vt-y.nw-v5 b .nw-ln { overflow: hidden; padding: .04em 0; }
.nw-v2 .nw-a, .nw-v5 .nw-a { transition: transform .55s cubic-bezier(.7, 0, .2, 1) var(--d); }
.nv-vc .nv-vt-y.nw-v2 .nw-b, .nv-vc .nv-vt-y.nw-v5 .nw-b { top: .04em; transform: translateY(110%); transition: transform .55s cubic-bezier(.2, 1.3, .3, 1) calc(var(--d) + 80ms); }
.nw-v2.reach .nw-a, .nw-v5.reach .nw-a { transform: translateY(-110%); }
.nv-vc .nv-vt-y.nw-v2.reach .nw-b, .nv-vc .nv-vt-y.nw-v5.reach .nw-b { transform: none; }
/* 3 번쩍: 순간 '팍' 바뀌며 빛 번짐 */
.nw-v3 .nw-b { opacity: 0; transition: opacity .06s linear var(--d); }
.nw-v3.reach .nw-b { opacity: 1; }
.nw-v3.reach .nw-b, .nw-v4.reach .nw-b, .nw-v5.reach .nw-b { animation: nwFlash .8s ease-out calc(var(--d) + var(--fd, 0ms)) both; }
.nw-v4 { --fd: 650ms; } .nw-v5 { --fd: 450ms; }
@keyframes nwFlash { 0% { text-shadow: 0 0 0 rgba(196, 18, 28, 0); transform: scale(1); } 15% { text-shadow: 0 0 28px rgba(255, 60, 70, .75), 0 0 4px #fff; transform: scale(1.04); } 100% { text-shadow: 0 0 0 rgba(196, 18, 28, 0); transform: scale(1); } }
.nw-v5.reach .nw-b { animation-fill-mode: none; }
@media (max-width: 900px) { .nv-vc .nv-now2 b { font-size: 24px !important; } }
/* 6 (기본) 두 줄이 동시에 은은하게 불 들어옴 — 빨강이 천천히 차오르고 부드러운 빛이 번졌다 가라앉음 */
.nw-v6 .nw-b { opacity: 0; transition: opacity .35s ease-out; }      /* (10-22 주인님: 너무 느림) 닿자마자 바로 */
.nw-v6.reach .nw-b { opacity: 1; animation: nwGlow6 1.4s ease-out both; }
@keyframes nwGlow6 { 0% { text-shadow: 0 0 0 rgba(196, 18, 28, 0); } 45% { text-shadow: 0 0 26px rgba(224, 48, 58, .45); } 100% { text-shadow: 0 0 10px rgba(224, 48, 58, .12); } }
.nv-vc .nv-vt-y.nv-now2 { padding-top: 110px !important; }      /* (10-22 주인님) 선 끝과 문장 사이 여운 */
@media (max-width: 900px) { .nv-vc .nv-vt-y.nv-now2 { padding-top: 64px !important; } }
/* (10-22 주인님) 불 들어올 때 글씨가 살짝 커짐 — 탁 커졌다 조금 돌아와 1.06배로 머묾 */
.nw-v6 b { transform-origin: 50% 50%; }
.nw-v6.reach b { animation: nwGrow .7s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes nwGrow { 0% { transform: scale(1); } 45% { transform: scale(1.1); } 100% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .nw-v6.reach b { animation: none; } }
/* (10-22 주인님) 기본 크기 1.5배 */
.nv-vc .nv-vt-y.nv-now2 b { font-size: clamp(39px, 3.9vw, 60px) !important; line-height: 1.26 !important; }
@media (max-width: 900px) { .nv-vc .nv-vt-y.nv-now2 b { font-size: 34px !important; } }

/* ══════════ 10-22 휴대폰 전용 (≤900px): 카드는 스크롤에 맞춰 하나씩 · 동원 → 설계 → 큐브가 한 흐름 · 단추 두 칸 ══════════ */
.promise .nv-pv p span.ln { display: inline; margin: 0; font: inherit; letter-spacing: inherit; color: inherit; }      /* 카드 글 줄(span)이 라벨용 .values span 규칙(연회색 · 넓은 자간)을 받지 않게 */
@media (max-width: 900px) {
  /* ① 세 가지 약속: 글은 한 줄씩 크게(줄마다 따로 올라옴), 카드는 화면에 들어올 때 하나씩 */
  .promise .nv-pv p span.ln { display: block; white-space: nowrap; }
  .promise .nv-pv p { margin-top: 12px; font-size: clamp(15px, 4.9vw, 21px); font-weight: 500; line-height: 1.6; letter-spacing: -.03em; color: #3d3d3d; }
  .promise .nv-pv b { margin-top: 8px; font-size: clamp(27px, 8vw, 34px); letter-spacing: -.035em; }
  .promise .nv-pv > li > div > span { font-size: 12.5px; }
  .nv-pv li > div { padding: 42px 22px 26px; }
  .pm > li { opacity: 0; transform: translateY(56px) scale(.97); }
  .pm > li.pm-in { animation: pmUp .9s cubic-bezier(.2, .8, .2, 1) both; }
  .pm > li .nv-pv-img { clip-path: inset(100% 0 0 0); }
  .pm > li.pm-in .nv-pv-img { animation: pvImg 1.1s .08s cubic-bezier(.5, 0, .2, 1) both; }
  .pm > li > div::after { opacity: 0; }
  .pm > li.pm-in > div::after { animation: pvNum .9s .5s both; }
  .pm > li > div > span, .pm > li > div > b, .pm > li .ln { opacity: 0; transform: translateY(16px); }
  .pm > li.pm-in > div > span, .pm > li.pm-in > div > b, .pm > li.pm-in .ln { animation: pmTxt .7s cubic-bezier(.2, .8, .2, 1) both; }
  .pm > li.pm-in > div > span { animation-delay: .55s; }
  .pm > li.pm-in > div > b { animation-delay: .65s; }
  .pm > li.pm-in .ln:nth-child(1) { animation-delay: .8s; }
  .pm > li.pm-in .ln:nth-child(2) { animation-delay: 1s; }
  @keyframes pmUp { from { opacity: 0; transform: translateY(56px) scale(.97); } to { opacity: 1; transform: none; } }
  @keyframes pmTxt { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

  /* ② 동원 → 설계 → 큐브: 글이 위, 그물은 은은하게 아래로 깔리고, 그 아래쪽 위로 설계 글이 올라타며, 그 밑에 큐브 */
  .flow .fl-pin { margin-bottom: 0; z-index: auto; background: none; }
  .flow .fl-pin-in { top: 0 !important; }      /* 스크립트가 데스크톱 고정용으로 넣은 top이 휴대폰에서는 동원 섹션을 150px쯤 밀어 내려 빈 칸을 만들었음 */
  .flow #method .feat-txt { order: 1; padding: 44px 20px 0; }
  .flow #method .feat-txt { position: relative; z-index: 3; }      /* 그물 위쪽 빈 부분을 글 밑으로 끌어올려 겹침 */
  .flow #method .feat-media { order: 2; height: 86vw; max-height: 520px; margin: -26vw 0 0;      /* 그물: 스크롤에 따라 목표가 넘어가며 고른 채널 원만 컬러로 켜짐(about-ngm.js 9) — 확대하면 목표 원이 잘려서 전체를 보여주고 가장자리만 녹임 */
    -webkit-mask-composite: source-in; mask-composite: intersect;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%); }
  .flow #method .feat-media iframe { filter: contrast(1.35) saturate(1.15); }      /* 흐려서 안 보이던 그물 · 조준선(목표 원)을 또렷하게 */
  .flow #plan .feat-txt { order: 1; z-index: 3; margin-top: 0; padding: 0 20px 0; }
  .flow #plan .feat-media { order: 2; margin: -16vw 20px -14vw; }      /* 큐브를 글 쪽으로 끌어올림(iframe 위쪽 빈 칸이 커서 멀어 보였음) */
  .flow #plan .feat-media iframe { transform: translate(10vw, -6vw) scale(.8); }      /* 큐브를 20% 줄여 설계도 윤곽 안에 들어가게 */      /* 큐브가 왼쪽으로 쏠려 잘리던 것을 가운데로 */
  .fl-bp { display: block !important; inset: 9% 5% 21% 4% !important; }      /* 설계도 꺾쇠 · 치수선 · PLAN 01 — 모바일에서도 */
  .fl-bp em { font-size: 9px; }
  .fl-bp .c { stroke-width: 2.2; }
  .fl-bp .g { stroke: rgba(10, 10, 10, .32); }
  .fl-bp .d { stroke: rgba(10, 10, 10, .55); }
  .fl-bp em { color: rgba(10, 10, 10, .72); }
  .fl-bp .t3 { color: #c4121c; }
  /* 큐브가 화면에 들어오면 설계도 선이 차례로 그어짐: 점선 기준선 → 치수선 → 꺾쇠 → 글자 (about-ngm.js 9) */
  .fl-bp.bp-arm .c, .fl-bp.bp-arm .d { stroke-dasharray: 1400; stroke-dashoffset: 1400; }
  .fl-bp.bp-arm .g, .fl-bp.bp-arm em { opacity: 0; }
  .fl-bp.bp-arm.bp-in .g { opacity: 1; transition: opacity .9s .1s; }
  .fl-bp.bp-arm.bp-in .d { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s cubic-bezier(.6, 0, .2, 1) .35s; }
  .fl-bp.bp-arm.bp-in .c { stroke-dashoffset: 0; transition: stroke-dashoffset .9s cubic-bezier(.6, 0, .2, 1) 1s; }
  .fl-bp.bp-arm.bp-in em { opacity: 1; transition: opacity .6s 1.3s; }
  .flow #plan { padding-bottom: 48px; }
  .flow #plan .feat-txt::after { content: ""; display: block; width: 2px; height: 56px; margin: 24px 0 -12px 6px; border-radius: 2px;
    background: linear-gradient(180deg, rgba(196, 18, 28, 0), #c4121c 50%, rgba(196, 18, 28, 0)) 0 0 / 100% 200%; animation: flDrip 2.2s linear infinite; }
  @keyframes flDrip { from { background-position: 0 100%; } to { background-position: 0 -100%; } }

  /* ③ 국경 너머: 단추 두 칸 */
  .ngm-globe .ngm-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
  .ngm-globe .ngm-cta .btn { flex: none; width: 100%; height: 54px; padding: 0 8px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .flow #plan .feat-txt::after { animation: none; } }

/* (10-22 주인님) 휴대폰: '지금도, 디지털 마케팅 한 길'은 위 타임라인·카드와 같이 왼쪽 정렬 */
@media (max-width: 900px) {
  .nv-vc .nv-vt-y.nv-now2 { align-items: flex-start; text-align: left; }
  .nv-vc .nv-vt-y.nv-now2 b { text-align: left; }
  .nv-vc .nv-vt-y.nv-now2 .nw-ln { margin: 0; }
}

/* (10-22 주인님) 휴대폰: 걸어온 길 끝 ~ 동원 사이 빈 칸 줄임 — 마지막 문장 위아래 여백 · 섹션 아래 여백 · 흰 가림막(키 16%라 440px였음)을 100px로, 끝은 다음 바탕색으로 */
@media (max-width: 900px) {
  .since-x.nv-vt { padding-bottom: 16px; }
  .nv-vc .nv-vt-y.nv-now2 { padding-top: 40px !important; padding-bottom: 0 !important; }
  .since-x.nv-vt::after { background: linear-gradient(180deg, #fff 0, rgba(255, 255, 255, 0) 100px, rgba(247, 247, 248, 0) calc(100% - 110px), #f7f7f8 100%); }
}

/* (10-22 주인님) 휴대폰: 숫자 카드 2×2 말고 한 칸씩 4줄 — 칸이 넓어진 만큼 숫자를 크게 */
@media (max-width: 900px) {
  .nv-stats { grid-template-columns: 1fr; gap: 12px; }
  .nv-stats .stat { padding: 22px 24px 20px; }
  .nv-stats .stat b { font-size: clamp(38px, 12.4vw, 60px); }
  .nv-stats .stat > span { margin-top: 10px; font-size: 15px; }
}
@media (max-width: 420px) { .nv-stats .stat b { font-size: clamp(38px, 12.4vw, 52px); } .nv-stats .stat { padding: 20px 22px 18px; } }