/* ==========================================================================
   노을상사 하위 페이지 디자인 시스템(np-) — v2 (2026-10-21)
   스페이스프로(spacepro.co.kr) 하위 페이지 치수를 그대로 따른다(1440 화면 기준 실측).
   - 본문 폭: 헤더와 같은 최대 1600px, 좌우 18px → 1440 화면에서 내용 1404px
   - 맨 위 띠 480px(제목 52px, 알약 탭 18px), 구역 간격 120px
   - 큰 문장 32px(회색 → 검정 채움), 2단 = 왼쪽 제목 칸 390 : 오른쪽 내용 칸 1010
   - (사용자 요청 '내용이 너무 커서 세로가 길다' → 스페이스프로 실측보다 한 단계씩 줄임)
   - 구역 간격은 하나(--np-sp)로 통일. 같은 흰 바탕 구역이 이어질 때만 위 여백을 뺀다
   - 이미지 자리는 지금은 모두 회색(.np-ph). 사진이 준비되면 .np-ph 안에 <img>만 넣는다
   ========================================================================== */
.np {
  --np-ink: #111;
  --np-body: #5f5f5f;
  --np-mute: #999;
  --np-line: #dcdcdc;
  --np-soft: #f5f5f5;
  --np-ph: #eceef0;
  --np-ph-dark: #4b4b4b;
  --np-red: var(--red, #ff0019);
  --np-hh: 80px;                               /* 고정 헤더 높이 */
  --np-gx: 1.125rem;                           /* 좌우 여백(헤더와 같음) */
  --np-max: 100rem;                            /* 1600px(헤더와 같음) */
  --np-sp: clamp(4rem, 8.3vw, 7.5rem);         /* 구역 간격 120px */
  --np-gap: clamp(2.5rem, 5vw, 4.5rem);        /* 구역 안 큰 덩어리 간격 72px */
  --np-ease: cubic-bezier(.2, .7, .2, 1);
  color: var(--np-body);
  font-family: "Pretendard", "Pretendard Variable", "Apple SD Gothic Neo", "Malgun Gothic", -apple-system, sans-serif;
  font-size: 18px;
  line-height: 1.7;
  letter-spacing: -.02em;
  word-break: keep-all;
  overflow-x: clip;
}
.np *, .np *::before, .np *::after { box-sizing: border-box; }
.np img { display: block; max-width: 100%; }
.np-wrap { width: 100%; max-width: var(--np-max); margin-inline: auto; padding-inline: var(--np-gx); }
.np-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 900px) { .np { --np-hh: 61px; --np-gx: 1.25rem; font-size: 16px; } }

/* ── 이미지 자리(회색) ── */
.np-ph { position: relative; overflow: hidden; margin: 0; background: var(--np-ph); aspect-ratio: var(--r, 16 / 9); }
.np-ph__in { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start;
  color: #a7abb1; font-size: 12px; font-weight: 500; text-align: left; padding: 14px 16px;
  transform: scale(1.1); transition: transform 1.6s var(--np-ease); }
.np-ph__in svg { display: none; }
.np-ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform 1.6s var(--np-ease); }
.np-ph.is-in .np-ph__in, .np-ph.is-in > img { transform: scale(1); }
.np-ph--dark { background: var(--np-ph-dark); }
.np-ph--dark .np-ph__in { color: rgba(255,255,255,.45); }
@media (hover: hover) { .np-hover:hover .np-ph__in, .np-hover:hover .np-ph > img { transform: scale(1.05); } }

/* 화면 끝까지 꽉 차는 이미지(스페이스프로 큰 문장 아래 사진) */
.np-bleed { width: 100%; margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.np-bleed .np-ph { aspect-ratio: 16 / 5; }
@media (max-width: 640px) { .np-bleed .np-ph { aspect-ratio: 16 / 9; } }

/* ── 등장 ── */
.np-r { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--np-ease), transform 1s var(--np-ease); transition-delay: var(--d, 0s); }
.np-r.is-in { opacity: 1; transform: none; }
.np-fill .np-w { color: rgba(182,182,182,.45); transition: color .25s linear; }
.np-fill .np-w.is-on { color: var(--np-ink); }

/* ── 맨 위 이미지 띠 ── */
.np-sv { position: relative; margin-top: var(--np-hh); height: clamp(260px, 33.3vw, 480px); color: #fff; overflow: hidden; isolation: isolate; }
.np-sv__bg { position: absolute; inset: 0; z-index: -1; background: var(--np-ph-dark); transform: scale(1.08); animation: np-sv-zoom 2.2s var(--np-ease) forwards; }
.np-sv__bg::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.18); }
.np-sv__bg > img { width: 100%; height: 100%; object-fit: cover; }
.np-sv__bg:has(> img)::after { background: rgba(0,0,0,.45); }   /* 실제 사진을 깔면 제목이 잘 읽히게 더 어둡게 */
.np-sv__label { position: absolute; top: 20px; right: var(--np-gx); color: rgba(255,255,255,.4); font-size: 12px; }
@keyframes np-sv-zoom { to { transform: scale(1); } }
.np-sv__inner { height: 100%; display: flex; align-items: center; justify-content: center; padding-bottom: 20px; text-align: center; }
.np-sv__title { margin: 0; font-size: clamp(1.875rem, 3.6vw, 3.25rem); font-weight: 700; line-height: 1.2; letter-spacing: -.03em; opacity: 0; animation: np-up 1s .2s var(--np-ease) forwards; }
@keyframes np-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
/* 알약 탭: 띠 아래쪽, 배경 없이 글자만 → 지금 탭만 채움 */
.np-pills { position: absolute; left: 0; right: 0; bottom: clamp(16px, 2.1vw, 30px); display: flex; justify-content: center; gap: 8px; padding-inline: var(--np-gx); overflow-x: auto; scrollbar-width: none; }
.np-pills::-webkit-scrollbar { display: none; }
.np-pills a { flex: 0 0 auto; display: flex; align-items: center; height: 45px; padding: 0 30px; border-radius: 999px; color: #fff; font-size: 18px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background-color .3s; }
.np-pills a:hover { background: rgba(255,255,255,.15); }
.np-pills a.is-on { background: var(--np-red); }
@media (max-width: 767px) {
  .np-pills { justify-content: flex-start; gap: 2px; }
  .np-pills a { height: 36px; padding: 0 16px; font-size: 15px; }
  .np-pills a:first-child { margin-left: auto; }
  .np-pills a:last-child { margin-right: auto; }
}
.np-anchor { scroll-margin-top: calc(var(--np-hh) + 24px); }

/* ── 구역 ── */
.np-sec { padding-block: var(--np-sp); }
.np-sec--soft { background: #fff; }   /* v3: 회색 바탕 구역을 없애고 선과 간격으로만 나눈다 */
.np-sec--dark { background: #1a1a1a; color: rgba(255,255,255,.7); }
/* 흰 바탕 구역이 연달아 오면 간격이 두 배가 되지 않게 뒤 구역의 위 여백만 뺀다(색 바탕 구역 앞뒤는 그대로) */
.np-sec + .np-sec { padding-top: 0; }
/* 큰 구역끼리는 가는 회색 선 하나로 나눈다(선 위아래 간격 동일) */
.np-sec + .np-sec > .np-wrap:first-child::before { content: ""; display: block; grid-column: 1 / -1; height: 1px; margin-bottom: var(--np-sp); background: var(--np-line); }
/* 바로 2단(검은 윗선)으로 시작하는 구역은 회색 구분선을 겹쳐 긋지 않는다 */
.np-sec + .np-sec > .np-wrap:first-child:has(> .np-split:first-child)::before { display: none; }
.np-sec__block + .np-sec__block { margin-top: var(--np-sp); }

/* 글자 크기(스페이스프로 실측) */
.np-title { margin: 0 0 clamp(1rem, 1.7vw, 1.5rem); color: var(--np-ink); font-size: clamp(1.75rem, 2.5vw, 2.25rem); font-weight: 700; line-height: 1.4; letter-spacing: -.03em; }        /* 36px */
.np-statement { margin: 0; color: var(--np-ink); font-size: clamp(1.375rem, 2.22vw, 2rem); font-weight: 700; line-height: 1.55; letter-spacing: -.03em; }                               /* 32px */
.np-statement--c { text-align: center; }
/* 제목 아래 문장은 한 단계 작게(제목과 크기가 겹치지 않게) */
.np-title + .np-statement { font-size: clamp(1.125rem, 1.67vw, 1.5rem); font-weight: 600; line-height: 1.6; }
.np-statement + .np-tabs, .np-statement + .np-split, .np-statement + .np-items, .np-statement + .np-rows, .np-statement + .np-steps, .np-statement + .np-acc { margin-top: clamp(2.25rem, 4.2vw, 3.75rem); }
@media (max-width: 767px) { .np-statement br, .np-cta__title br { display: none; } }
.np-h2 { margin: 0; color: var(--np-ink); font-size: clamp(1.375rem, 2.08vw, 1.875rem); font-weight: 700; line-height: 1.5; letter-spacing: -.03em; }                                    /* 30px */
.np-h3 { margin: 0; color: var(--np-ink); font-size: clamp(1.125rem, 1.53vw, 1.375rem); font-weight: 600; line-height: 1.55; letter-spacing: -.02em; }                                  /* 22px */
.np-p { margin: 0; color: var(--np-body); font-size: clamp(1rem, 1.25vw, 1.125rem); line-height: 1.75; }                                                                                /* 18px */
.np-p + .np-p { margin-top: 1.1em; }
.np-small { margin: 0; color: var(--np-body); font-size: 16px; line-height: 1.7; }
.np-dark .np-title, .np-dark .np-statement, .np-dark .np-h2, .np-dark .np-h3 { color: #fff; }
.np-dark .np-p { color: rgba(255,255,255,.65); }
/* v1 영문 꾸밈 라벨은 쓰지 않음(남아 있어도 숨김) */
.np-label { display: none; }

/* 2단: 왼쪽 제목 칸 390 | 오른쪽 내용 칸 1010 */
.np-split { display: grid; grid-template-columns: minmax(0, 390fr) minmax(0, 1010fr); column-gap: 0; align-items: start; padding-top: 36px; border-top: 2px solid var(--np-ink); }
.np-split + .np-split { margin-top: var(--np-gap); }
/* 2단 안 첫 표·목록은 위 선을 2단 선과 겹치지 않게 뺀다 */
.np-split__body > .np-rows:first-child, .np-split__body.np-acc, .np-split__body > .np-acc:first-child { border-top: 0; }
.np-split__body > .np-rows:first-child > div:first-child, .np-split__body.np-acc > .np-acc__item:first-child .np-acc__q { padding-top: 0; }
.np-split__head { padding-right: 40px; }
.np-split__head .np-small { margin-top: 14px; }
.np-split__head--sticky { position: sticky; top: calc(var(--np-hh) + 40px); }
.np-split__body > .np-h3 { margin-bottom: 14px; }
.np-split__body > * + .np-h3 { margin-top: clamp(2rem, 3.3vw, 3rem); }
@media (max-width: 1024px) {
  .np-split { grid-template-columns: 1fr; row-gap: 28px; }
  .np-split__head { padding-right: 0; }
  .np-split__head--sticky { position: static; }
}

/* 사진+제목+글 목록(오른쪽 칸 안 2열, 또는 전체 폭 3·4열) */
.np-items { display: grid; grid-template-columns: repeat(var(--c, 3), minmax(0, 1fr)); gap: clamp(2rem, 3.3vw, 3rem) clamp(1rem, 1.7vw, 1.5rem); margin: 0; padding: 0; list-style: none; }
.np-item { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.np-item .np-ph { margin-bottom: 18px; }
.np-item .np-h3 { font-size: clamp(1.0625rem, 1.39vw, 1.25rem); transition: color .3s; }
.np-item .np-small { margin-top: 8px; }
a.np-item:hover .np-h3 { color: var(--np-red); }
@media (max-width: 1024px) { .np-items { --c: 2 !important; } }
@media (max-width: 560px) { .np-items { --c: 1 !important; } }

/* 단계(실제로 순서가 있는 내용만) */
.np-steps { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--np-ink); counter-reset: np-step; }
.np-step { padding: 26px 24px 28px 0; counter-increment: np-step; }
.np-step + .np-step { padding-left: 24px; border-left: 1px solid var(--np-line); }
.np-step::before { content: "STEP " counter(np-step, decimal-leading-zero); display: block; margin-bottom: 12px; color: var(--np-red); font-size: 14px; font-weight: 700; letter-spacing: 0; }
.np-step h3 { margin: 0 0 10px; color: var(--np-ink); font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.np-step p { margin: 0; color: var(--np-body); font-size: 16px; line-height: 1.7; }
@media (max-width: 900px) { .np-steps { grid-template-columns: 1fr; } .np-step, .np-step + .np-step { padding: 26px 0; border-left: 0; border-bottom: 1px solid var(--np-line); } }

/* 정보 표(라벨 | 내용) */
.np-rows { margin: 0; border-top: 2px solid var(--np-ink); }
.np-rows > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 8px 30px; padding: 20px 0; border-bottom: 1px solid var(--np-line); }
.np-rows dt { color: var(--np-ink); font-size: clamp(1rem, 1.25vw, 1.125rem); font-weight: 700; }
.np-rows dd { margin: 0; color: var(--np-body); font-size: clamp(1rem, 1.25vw, 1.125rem); }
.np-rows a { color: inherit; }
@media (max-width: 640px) { .np-rows > div { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; } }

/* 버튼(모서리 없음 — 메인과 같은 버튼 모양) */
.np-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 30px; border: 1px solid var(--np-ink); border-radius: 0;
  background: var(--np-ink); color: #fff; font-size: 16px; font-weight: 600; text-decoration: none; transition: background-color .3s, border-color .3s, color .3s; }
.np-btn:hover { background: var(--np-red); border-color: var(--np-red); }
.np-btn--line { background: #fff; color: var(--np-ink); }
.np-btn--line:hover { background: var(--np-ink); border-color: var(--np-ink); color: #fff; }
.np-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(1.5rem, 2.5vw, 2.25rem); }

/* 맨 아래 상담 띠(밝은 회색, 가운데) */
.np-cta { padding-block: clamp(3.5rem, 5.6vw, 5rem); background: var(--np-soft); text-align: center; }
.np-cta__title { margin: 0; color: var(--np-ink); font-size: clamp(1.375rem, 2.08vw, 1.875rem); font-weight: 700; line-height: 1.5; letter-spacing: -.03em; }
.np-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.np-cta .np-btn { background: var(--np-red); border-color: var(--np-red); }
.np-cta .np-btn:hover { background: var(--np-ink); border-color: var(--np-ink); }
.np-cta .np-btn--line { background: #fff; border-color: var(--np-ink); color: var(--np-ink); }
.np-cta .np-btn--line:hover { background: var(--np-ink); color: #fff; }
.np-cta--white { background: #fff; border-top: 1px solid var(--np-line); }

/* 글자 탭(구역 안, 왼쪽 정렬 — 스페이스프로 '개요 제품 장비') */
.np-tabs { display: flex; gap: clamp(1.5rem, 2.8vw, 2.5rem); margin: 0 0 clamp(1.75rem, 2.8vw, 2.5rem); overflow-x: auto; scrollbar-width: none; }
.np-tabs::-webkit-scrollbar { display: none; }
.np-tabs button { flex: 0 0 auto; padding: 0 0 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--np-mute); font: inherit; font-size: clamp(1.0625rem, 1.39vw, 1.25rem); font-weight: 600; cursor: pointer; transition: color .3s, border-color .3s; }
.np-tabs button:hover { color: var(--np-ink); }
.np-tabs button[aria-selected="true"] { color: var(--np-ink); border-bottom-color: var(--np-ink); }
.np-panel[hidden] { display: none; }
.np-panel.is-enter { animation: np-up .6s var(--np-ease); }

/* 접고 펴는 목록(FAQ 등) */
.np-acc { border-top: 2px solid var(--np-ink); }
.np-acc__item { border-bottom: 1px solid var(--np-line); }
.np-acc__q { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; padding: 22px 0; border: 0; background: none; color: var(--np-ink); font: inherit; font-size: clamp(1rem, 1.25vw, 1.125rem); font-weight: 600; text-align: left; cursor: pointer; }
.np-acc__q::after { content: ""; flex: 0 0 16px; height: 16px; background: linear-gradient(currentColor, currentColor) center / 16px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 16px no-repeat; transition: transform .35s var(--np-ease); }
.np-acc__item.is-open .np-acc__q::after { transform: rotate(45deg); }
.np-acc__q:hover { color: var(--np-red); }
.np-acc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--np-ease); }
.np-acc__item.is-open .np-acc__a { grid-template-rows: 1fr; }
.np-acc__a > div { overflow: hidden; }
.np-acc__a p { margin: 0 0 22px; color: var(--np-body); font-size: clamp(1rem, 1.25vw, 1.125rem); line-height: 1.8; }

/* ── BUSINESS 맨 위 품목 슬라이드(np_kv) — 현대자동차 메인 위쪽 차량 슬라이드 구성(1440 화면 실측 기준) ──
   웜그레이 무대 + 가운데 흰 빛 + 제품 아래 바닥 그림자 / 왼쪽 위 품목명 64·설명 24 / 가운데 큰 제품 사진(배경 지운 PNG)
   양옆 가는 화살표 + 이전·다음 품목명 / 아래 점 + 멈춤 버튼 / 무대 아래 흰 빠른 메뉴 줄 */
.np-kv { margin-top: var(--np-hh); }
.np-kv__stage { position: relative; height: min(clamp(460px, 50vw, 760px), calc(100vh - var(--np-hh) - 96px)); height: min(clamp(460px, 50vw, 760px), calc(100svh - var(--np-hh) - 96px)); min-height: 460px; overflow: hidden; isolation: isolate; touch-action: pan-y;
  background: radial-gradient(42% 46% at 50% 60%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 100%), linear-gradient(180deg, #f6f3f2 0%, #efebe9 100%); }
.np-kv__head { position: relative; z-index: 2; padding-top: clamp(1.75rem, 3.6vw, 3.25rem); }
.np-kv__page { margin: 0; color: var(--np-ink); font-size: clamp(.9375rem, 1.1vw, 1.0625rem); font-weight: 700; line-height: 1.4; letter-spacing: -.01em; }
.np-kv__slides { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.np-kv__slide { position: absolute; inset: 0; visibility: hidden; }
.np-kv__slide.is-on, .np-kv__slide.is-out { visibility: visible; }
.np-kv__text { position: relative; z-index: 2; padding-top: calc(clamp(1.75rem, 3.6vw, 3.25rem) + clamp(1.75rem, 2.4vw, 2.25rem)); }
.np-kv__name { margin: 0; color: var(--np-ink); font-size: clamp(2rem, 4.45vw, 4rem); font-weight: 600; line-height: 1.15; letter-spacing: -.035em; }
.np-kv__sub { margin: clamp(.5rem, 1vw, .875rem) 0 0; color: #333; font-size: clamp(1rem, 1.67vw, 1.5rem); font-weight: 500; line-height: 1.45; letter-spacing: -.02em; }
/* 품목별 버튼(쇼핑몰에서 보기 / 견적 문의) */
.np .np-kv__go { display: inline-flex; align-items: center; height: 46px; margin-top: clamp(1rem, 1.8vw, 1.625rem); padding: 0 24px; background: var(--np-ink); color: #fff; font-size: 15px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; transition: background-color .25s, opacity .7s var(--np-ease), transform .9s var(--np-ease); }
.np .np-kv__go:hover { background: var(--np-red); }
.np-kv__go:focus-visible { outline: 2px solid var(--np-ink); outline-offset: 3px; }
.np-kv__slide.is-on .np-kv__go { transition-delay: 0s, .16s, .16s; }
.np-kv__img { position: absolute; left: 50%; bottom: 14%; display: flex; align-items: flex-end; justify-content: center; width: min(68%, 1080px); height: 66%; transform: translateX(-50%); }
/* 제품 상자(.np-kv__obj)는 사진 크기만큼만 — 바닥 그림자가 제품 폭을 따라간다 */
.np-kv__obj { position: relative; display: flex; align-items: flex-end; justify-content: center; height: var(--kv-h, 100%); max-width: 100%; }
.np-kv__obj::before { content: ""; position: absolute; left: -4%; right: -4%; bottom: calc(-1 * clamp(6px, .8vw, 11px)); height: clamp(14px, 2vw, 28px); border-radius: 50%; background: radial-gradient(closest-side, rgba(40,32,28,.28), rgba(40,32,28,0)); }
.np .np-kv__obj img { position: relative; width: auto; height: 100%; max-width: 100%; object-fit: contain; object-position: 50% 100%; }
.np-kv__slide.is-cut .np-kv__obj::before { display: none; }
.np-kv__slide.is-cut .np-kv__obj img { -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); }
/* 넘김: 글은 아래에서 떠오르고, 제품은 넘기는 방향에서 미끄러져 들어온다 */
.np-kv__text > *, .np-kv__img { transition: opacity .7s var(--np-ease), transform .9s var(--np-ease); }
.np-kv__slide:not(.is-on) .np-kv__text > * { opacity: 0; transform: translateY(24px); }
.np-kv__slide.is-on .np-kv__sub { transition-delay: .08s; }
.np-kv__slide:not(.is-on) .np-kv__img { opacity: 0; transform: translateX(calc(-50% + var(--kv-dir, 1) * 9%)); }
.np-kv__slide.is-out .np-kv__img { transform: translateX(calc(-50% - var(--kv-dir, 1) * 9%)); transition-duration: .5s, .7s; }
.np-kv__slide.is-out .np-kv__text > * { transition-duration: .3s; transform: none; }
/* 화살표: 가는 긴 꺾쇠 + 이전·다음 품목명 */
.np-kv__arrow { position: absolute; z-index: 3; top: 56%; display: flex; align-items: center; gap: 14px; padding: 10px; border: 0; background: none; color: #222; font: inherit; cursor: pointer; transform: translateY(-50%); }
.np-kv__arrow svg { width: 16px; height: 50px; flex: none; transition: transform .3s var(--np-ease); }
.np-kv__arrow--prev { left: clamp(.5rem, 3vw, 3rem); }
.np-kv__arrow--next { right: clamp(.5rem, 3vw, 3rem); flex-direction: row-reverse; }
.np-kv__arrow--next svg { transform: scaleX(-1); }
.np-kv__near { max-width: 9em; color: #6b6b6b; font-size: 15px; font-weight: 500; line-height: 1.35; text-align: left; transition: color .25s; }
.np-kv__arrow--next .np-kv__near { text-align: right; }
.np-kv__arrow:hover .np-kv__near { color: var(--np-ink); }
.np-kv__arrow--prev:hover svg { transform: translateX(-4px); }
.np-kv__arrow--next:hover svg { transform: scaleX(-1) translateX(-4px); }
.np-kv__arrow:focus-visible, .np-kv__dot:focus-visible, .np-kv__pause:focus-visible { outline: 2px solid var(--np-ink); outline-offset: 2px; }
/* 점 + 멈춤 */
.np-kv__ctrl { position: absolute; z-index: 3; left: 50%; bottom: clamp(1.25rem, 3vw, 2.5rem); display: flex; align-items: center; gap: 18px; transform: translateX(-50%); }
.np-kv__dots { display: flex; align-items: center; gap: 4px; }
.np-kv__dot { position: relative; width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; }
.np-kv__dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: #c4c0bd; transform: translate(-50%, -50%); transition: background-color .3s, width .3s var(--np-ease); }
.np-kv__dot[aria-current="true"]::before { width: 22px; border-radius: 4px; background: var(--np-red); }
.np-kv__pause { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid #bdb8b5; border-radius: 50%; background: rgba(255,255,255,.6); color: #333; cursor: pointer; }
.np-kv__pause svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.np-kv__i-play { display: none; fill: currentColor; stroke: none; }
.np-kv__pause[aria-pressed="true"] .np-kv__i-pause { display: none; }
.np-kv__pause[aria-pressed="true"] .np-kv__i-play { display: block; }
/* 빠른 메뉴(무대 아래 흰 줄, 아이콘 + 글자) */
.np-kv__quick { border-bottom: 1px solid var(--np-line); background: #fff; }
.np-kv__quick ul { display: flex; justify-content: center; margin: 0 auto; list-style: none; }
.np-kv__quick li { flex: 0 1 220px; }
.np-kv__quick li + li { border-left: 1px solid #ececec; }
.np-kv__quick a { display: flex; align-items: center; justify-content: center; gap: 10px; height: 96px; color: var(--np-ink); font-size: 16px; font-weight: 600; text-decoration: none; transition: color .2s; }
.np-kv__quick a:hover { color: var(--np-red); }
.np-kv__quick svg { width: 26px; height: 26px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
@media (max-width: 1024px) {
  .np-kv__near { display: none; }
  .np-kv__img { width: 80%; }
}
@media (max-width: 640px) {
  .np-kv__stage { height: 520px; height: min(560px, calc(100svh - var(--np-hh) - 76px)); min-height: 440px; }
  .np-kv__img { width: 92%; height: 50%; bottom: 14%; }
  .np .np-kv__go { height: 40px; padding: 0 18px; font-size: 14px; }
  .np-kv__arrow { top: 58%; padding: 6px; }
  .np-kv__arrow svg { width: 11px; height: 34px; }
  .np-kv__arrow--prev { left: 2px; }
  .np-kv__arrow--next { right: 2px; }
  .np-kv__quick ul { padding: 0; }
  .np-kv__quick li { flex: 1 1 0; min-width: 0; }
  .np-kv__quick a { flex-direction: column; gap: 6px; height: 76px; font-size: 12px; text-align: center; letter-spacing: -.04em; }
  .np-kv__quick svg { width: 22px; height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .np-kv__text > *, .np-kv__img { transition: none !important; }
  .np-r, .np-ph__in, .np-ph > img, .np-sv__bg, .np-sv__title { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .np-fill .np-w { color: var(--np-ink) !important; }
}