@charset "utf-8";
/* site.css — 2026-10-29 다시 지은 nshield.co.kr 의 몫.
   옛 테마 CSS(main · responsive)는 그대로 두고 그 위에 얹는다. 여기 있는 것은 셋이다:
   ① 한 화면씩 넘기던 fullPage 를 걷어 낸 자리(섹션 높이 · 현재 섹션 표시 · 머리띠)
   ② SVG 아이콘 · 휴대폰 메뉴
   ③ 새 섹션 — 시공 사례(3D 갤러리) · 시공점 찾기 · 정품 · 보증 조회
   새 클래스는 ns- 로 시작한다. 옛 테마가 .on · .active · .item 같은 흔한 이름을 이미 쓰고 있다. */

:root {
	--ns-yellow: #FFC000;
	--ns-bg: #0d0d0d;
	--ns-card: #161616;
	--ns-line: rgba(255, 255, 255, .12);
	--ns-dim: rgba(255, 255, 255, .62);
	--ns-ease: cubic-bezier(.22, 1, .36, 1);
}
html { scroll-behavior: smooth; background: var(--ns-bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--ns-bg); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ① 섹션 — fullPage 가 붙이던 높이를 직접. PC 는 한 화면 가득, 1024px 이하는 내용만큼(옛 responsive.css 의 padding 그대로) */
.section { position: relative; scroll-margin-top: 0; }
.section-hero { height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; }
/* 휴대폰(세로 화면)은 첫 화면을 한 화면 가득 채우지 않는다 — 16:9 영상을 세로 화면 높이에 맞추면 가로가
   4분의 1만 남아 영상 속 「N-SHIELD PROTECTION」 글자까지 잘렸다. 가로 폭의 1.1배 높이면 절반 남짓이 보인다. */
@media (max-width: 767px) and (orientation: portrait) {
	.section-hero { height: 110vw; min-height: 0; }
	.section-hero video { object-position: center center !important; }
	.btn-scroll { bottom: 18px; height: 96px; }
}
@media (min-width: 1025px) {
	.section-about, .section-tech, .section-stats { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
	.section-about > .container, .section-tech > .container, .section-stats > .container { width: 100%; height: auto; }
	.section-tech { overflow: hidden; }
	.section-contact .inquiry { height: auto; min-height: calc(100vh - 137px); display: flex; align-items: center; }
	.section-contact .inquiry > .container { width: 100%; }
}
.section-contact { overflow: hidden; }

/* 머리띠 — 아래로 내리면 숨고 위로 올리면 나온다. 옛 화면은 숨은 뒤 마우스를 맨 위에 대야만 나왔다. */
#header { transition: top .5s var(--ns-ease), background .4s; }
/* 로고 img 에 width · height 속성을 달아 자리를 미리 잡는다(불러오는 동안 화면이 출렁이지 않게). 옛 CSS 는 가로만
   정해서, 속성의 높이 113px 가 그대로 남아 세로로 늘어났다 — 높이는 비율대로. */
#header .logo img, #footer .logo img { height: auto; }
#header.hide { top: -152px; }
#header nav ul { gap: 44px; }
#header nav ul li a { font-size: 17px; }
#header nav ul li a.ns-current { opacity: 1; color: var(--ns-yellow); }
/* GLOBAL 은 이 사이트 밖(nippon-nshield.com)으로 나가는 문이라 글씨 크기는 같게, 앞에 가는 세로줄로만 가른다
   (처음엔 글씨를 작게 해서 갈랐더니 실수처럼 보였다) */
#header nav ul li:has(> a.ns-ext) { position: relative; padding-left: 44px; }
#header nav ul li:has(> a.ns-ext)::before { content: ''; position: absolute; left: 0; top: 50%; width: 1px; height: 18px; margin-top: -9px; background: rgba(255, 255, 255, .35); }
@media (max-width: 1600px) { #header nav ul li:has(> a.ns-ext) { padding-left: 30px; } }
@media (max-width: 1200px) { #header nav ul li:has(> a.ns-ext) { padding-left: 20px; } }
body.ns-past-hero #header { background: rgba(13, 13, 13, .55); }
@media (max-width: 1600px) { #header nav ul { gap: 30px; } #header nav ul li a { font-size: 15px; } }
@media (max-width: 1200px) { #header nav ul { gap: 20px; } #header nav ul li a { font-size: 13px; } }

/* 오른쪽 아래 SNS — 첫 화면을 지나면 나타난다(옛 화면은 fullPage 의 fp-viewing-* 로 걸었다) */
.ns-quick { opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .5s, transform .5s var(--ns-ease); }
body.ns-past-hero .ns-quick { opacity: 1; pointer-events: auto; transform: none; }
/* 휴대폰은 카카오 하나만 — 넷이 세로로 서면 화면 오른쪽을 가리고 갤러리 버튼 위에 겹친다. 나머지 셋은 문의 섹션에 있다. */
@media (max-width: 767px) {
	.ns-quick { right: 12px; bottom: 16px; }
	.ns-quick ul li:not(:first-child) { display: none; }
}

/* ② 아이콘 — 평소에는 흰 선, 올리면 그 브랜드 색. --ns-ink 는 아이콘 속 글자 · 삼각형 색 */
.ns-ico { display: inline-flex; align-items: center; justify-content: center; color: #fff; --ns-ink: #1a1a1a; transition: transform .35s var(--ns-ease), background .3s, color .3s; }
.ns-ico svg { width: 60%; height: 60%; }
.ns-quick ul li a.ns-ico { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--ns-line); }
.ns-quick ul li a.ns-ico:hover { transform: translateY(-3px) scale(1.06); }
.ns-ico-kakao:hover, .ns-ico-kakao.ns-ico-lg { background: #FEE500 !important; color: #191600; --ns-ink: #FEE500; }
.ns-ico-kakao:hover svg text, .ns-ico-kakao.ns-ico-lg svg text { fill: #FEE500; }
.ns-ico-youtube:hover { background: #FF0033 !important; color: #fff; --ns-ink: #FF0033; }
.ns-ico-insta:hover { background: linear-gradient(45deg, #FEDA75, #FA7E1E 30%, #D62976 60%, #4F5BD5) !important; color: #fff; }
.ns-ico-blog:hover { background: #03C75A !important; color: #fff; }
.section-contact .sns-thumb .btn .ns-ico { width: 80px; height: 80px; border-radius: 22px; }
.section-contact .sns-thumb .btn .ns-ico svg { width: 66%; height: 66%; }
.section-contact .sns-thumb .btn .ns-ico:hover { transform: translateY(-4px) rotate(-4deg); }
.section-contact .sns-item .btn .ns-ico { width: 52px; height: 52px; border-radius: 15px; background: rgba(255, 255, 255, .1); border: 1px solid var(--ns-line); }
.section-contact .sns-item:hover .btn .ns-ico { transform: translateY(-3px); }
.section-contact .sns-item:hover .ns-ico-youtube { background: #FF0033; --ns-ink: #FF0033; }
.section-contact .sns-item:hover .ns-ico-insta { background: linear-gradient(45deg, #FEDA75, #FA7E1E 30%, #D62976 60%, #4F5BD5); }
.section-contact .sns-item:hover .ns-ico-blog { background: #03C75A; }
@media (max-width: 1024px) { .section-contact .sns-item .btn .ns-ico { width: 44px; height: 44px; border-radius: 13px; } }
@media (max-width: 768px) { .section-contact .sns-thumb .btn .ns-ico { width: 64px; height: 64px; border-radius: 18px; } .section-contact .sns-item .btn .ns-ico { width: 40px; height: 40px; } }

/* 휴대폰 메뉴 — 옛 화면은 1024px 이하에서 메뉴가 아예 없었다 */
.ns-menu-btn { display: none; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; background: none; color: #fff; cursor: pointer; }
.ns-menu-btn svg { width: 28px; height: 28px; }
@media (max-width: 1024px) { .ns-menu-btn { display: block; } }
.ns-mnav { position: fixed; inset: 0; z-index: 20000; background: rgba(8, 8, 8, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .35s; }
.ns-mnav.ns-shown { opacity: 1; }
.ns-mnav[hidden] { display: none; }
.ns-mnav ul { display: flex; flex-direction: column; gap: 22px; text-align: center; }
.ns-mnav a { font-family: "Speed"; font-size: 26px; color: #fff; letter-spacing: 1px; opacity: 0; transform: translateY(16px); display: inline-block; transition: opacity .5s, transform .6s var(--ns-ease), color .2s; }
.ns-mnav.ns-shown a { opacity: 1; transform: none; }
.ns-mnav a:hover, .ns-mnav a:focus { color: var(--ns-yellow); }
.ns-mnav-close { position: absolute; top: 18px; right: 15px; width: 48px; height: 48px; border: 0; background: none; color: #fff; cursor: pointer; }
.ns-mnav-close svg { width: 28px; height: 28px; }

/* ③ 새 섹션 공통 머리말 — 옛 섹션의 「흰 줄 + 노란 줄」 제목을 그대로 따른다 */
.ns-head { text-align: center; margin-bottom: 56px; }
.ns-head h2 { font-family: "Speed"; font-size: 60px; font-weight: 400; line-height: 1em; letter-spacing: 2.4px; }
.ns-head h2 span { display: block; }
.ns-head h2 .color-white { color: #fff; }
.ns-head h2 .color-yellow { color: var(--ns-yellow); }
.ns-head p { margin-top: 18px; font-size: 22px; font-weight: 600; color: #fff; }
.ns-head .ns-sub { display: block; margin-top: 12px; font-size: 16px; line-height: 1.7; color: var(--ns-dim); }
@media (max-width: 1024px) { .ns-head h2 { font-size: 46px; } .ns-head p { font-size: 18px; } }
@media (max-width: 768px) { .ns-head { margin-bottom: 36px; } .ns-head h2 { font-size: 32px; } .ns-head p { font-size: 16px; } .ns-head .ns-sub { font-size: 14px; } .ns-sub .pc-only { display: none; } }

/* 나타나기 — 화면에 들어오면 아래에서 떠오른다 */
.ns-reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ns-ease), transform 1.2s var(--ns-ease); }
.ns-reveal.ns-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ns-reveal { opacity: 1; transform: none; transition: none; } }

.ns-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 56px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--ns-yellow); color: #111; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; transition: transform .3s var(--ns-ease), box-shadow .3s, opacity .2s; }
.ns-btn svg { width: 20px; height: 20px; }
.ns-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255, 192, 0, .28); }
.ns-btn[disabled] { opacity: .6; cursor: progress; transform: none; box-shadow: none; }

/* ── 시공 사례: 3D 갤러리 ─────────────────────────────────────────────────────── */
.ns-gallery { padding: 120px 0 90px; background: radial-gradient(ellipse at 50% 55%, #1d1a12 0%, var(--ns-bg) 62%); overflow: hidden; }
.ns-gallery[hidden] { display: none; }
.ns-flow { --ns-size: min(520px, 38vw, 54vh); position: relative; height: calc(var(--ns-size) + 80px); perspective: 1800px; outline: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.ns-flow.ns-dragging { cursor: grabbing; }
.ns-flow-glow { position: absolute; left: 50%; top: 50%; width: calc(var(--ns-size) * 1.6); height: calc(var(--ns-size) * .9); transform: translate(-50%, -40%); background: radial-gradient(closest-side, rgba(255, 192, 0, .16), transparent); filter: blur(30px); pointer-events: none; }
.ns-flow-track { position: absolute; inset: 0; transform-style: preserve-3d; }
.ns-card { position: absolute; left: 50%; top: 40px; width: var(--ns-size); height: var(--ns-size); margin-left: calc(var(--ns-size) / -2); border-radius: 22px; overflow: hidden; background: var(--ns-card); box-shadow: 0 40px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06); transform-origin: 50% 50%; will-change: transform, opacity; transition: transform .7s var(--ns-ease), opacity .6s, filter .6s; }
.ns-flow.ns-dragging .ns-card { transition: none; }
.ns-card img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; transform: scale(1.04); transition: transform 1.2s var(--ns-ease); }
.ns-card.ns-center img { transform: scale(1); }
.ns-card.ns-center:hover img { transform: scale(1.05); }
/* 옆 장은 살짝 어둡게 — 가운데로 눈이 간다 */
.ns-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, 0) 45%); opacity: .0; transition: opacity .6s; }
.ns-card:not(.ns-center)::before { content: ''; position: absolute; inset: 0; z-index: 2; background: rgba(0, 0, 0, .35); transition: opacity .6s; }
.ns-card.ns-center::after { opacity: 1; }
.ns-cap { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 3; color: #fff; opacity: 0; transform: translateY(14px); transition: opacity .5s .15s, transform .7s .15s var(--ns-ease); pointer-events: none; }
.ns-card.ns-center .ns-cap { opacity: 1; transform: none; }
.ns-cap b { display: block; font-size: 22px; font-weight: 700; line-height: 1.3; }
.ns-cap span { display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 192, 0, .92); color: #111; font-size: 12.5px; font-weight: 700; letter-spacing: .3px; }
.ns-cap em { display: block; margin-top: 6px; font-style: normal; font-size: 14px; color: rgba(255, 255, 255, .8); }
.ns-cap i { position: absolute; right: 0; bottom: 0; font-style: normal; font-size: 12.5px; padding: 4px 9px; border-radius: 999px; background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 255, 255, .25); }
.ns-flow-bar { display: flex; align-items: center; justify-content: center; gap: 26px; margin-top: 18px; }
.ns-flow-bar button { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--ns-line); background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .3s, color .3s, transform .3s var(--ns-ease); }
.ns-flow-bar button svg { width: 22px; height: 22px; }
.ns-flow-prev svg { transform: rotate(180deg); }
.ns-flow-bar button:hover { background: var(--ns-yellow); color: #111; transform: scale(1.06); }
.ns-flow-count { display: flex; align-items: center; gap: 14px; font-family: "Poppins", sans-serif; font-size: 15px; color: var(--ns-dim); min-width: 170px; justify-content: center; }
.ns-flow-count b { color: #fff; font-weight: 600; }
.ns-flow-count span { position: relative; width: 90px; height: 2px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.ns-flow-count span::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--ns-progress, 0%); background: var(--ns-yellow); transition: width .6s var(--ns-ease); }
.ns-flow-count i { font-style: normal; }
.ns-demo-note { text-align: center; margin-top: 22px; font-size: 13px; color: var(--ns-dim); }
@media (max-width: 1024px) { .ns-gallery { padding: 110px 0 90px; } .ns-flow { --ns-size: min(440px, 56vw); } }
@media (max-width: 767px) { .ns-gallery { padding: 90px 0 70px; } .ns-flow { --ns-size: 72vw; perspective: 1100px; } .ns-cap b { font-size: 17px; } .ns-cap { left: 16px; right: 16px; bottom: 14px; } .ns-card { border-radius: 16px; } }

/* 사진 크게 보기 */
.ns-lightbox { position: fixed; inset: 0; z-index: 30000; background: rgba(5, 5, 5, .94); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .35s; }
.ns-lightbox.ns-shown { opacity: 1; }
.ns-lightbox[hidden] { display: none; }
.ns-lightbox figure { margin: 0; max-width: min(92vw, 1100px); text-align: center; transform: scale(.96); transition: transform .5s var(--ns-ease); }
.ns-lightbox.ns-shown figure { transform: none; }
.ns-lightbox img { max-width: 100%; max-height: 80vh; border-radius: 14px; display: block; margin: 0 auto; }
.ns-lightbox figcaption { margin-top: 16px; color: #fff; font-size: 16px; }
.ns-lightbox figcaption small { display: block; margin-top: 4px; color: var(--ns-dim); font-size: 13px; }
.ns-lightbox button { position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--ns-line); background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ns-lightbox button svg { width: 24px; height: 24px; }
.ns-lb-close { top: 20px; right: 20px; }
.ns-lb-prev { left: 20px; top: 50%; margin-top: -26px; } .ns-lb-prev svg { transform: rotate(180deg); }
.ns-lb-next { right: 20px; top: 50%; margin-top: -26px; }
.ns-lightbox button:hover { background: var(--ns-yellow); color: #111; }
@media (max-width: 767px) { .ns-lb-prev, .ns-lb-next { top: auto; bottom: 24px; margin: 0; } .ns-lb-prev { left: calc(50% - 64px); } .ns-lb-next { right: calc(50% - 64px); } }

/* ── 시공점 찾기 ────────────────────────────────────────────────────────────── */
.ns-shop-tools { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.ns-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ns-chip { height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--ns-line); background: transparent; color: var(--ns-dim); font: inherit; font-size: 14.5px; cursor: pointer; transition: all .25s; }
.ns-chip:hover { color: #fff; border-color: rgba(255, 255, 255, .35); }
.ns-chip.ns-chip-on { background: var(--ns-yellow); border-color: var(--ns-yellow); color: #111; font-weight: 700; }
.ns-chip small { margin-left: 4px; opacity: .7; }
.ns-search input { width: 280px; max-width: 100%; height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--ns-line); background: rgba(255, 255, 255, .05); color: #fff; font: inherit; font-size: 15px; }
.ns-search input:focus { outline: none; border-color: var(--ns-yellow); }
.ns-shop-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.ns-shop { padding: 26px 24px; border-radius: 18px; background: var(--ns-card); border: 1px solid var(--ns-line); transition: transform .4s var(--ns-ease), border-color .3s; opacity: 0; transform: translateY(20px); animation: ns-up .7s var(--ns-ease) forwards; }
.ns-shop:hover { transform: translateY(-4px); border-color: rgba(255, 192, 0, .5); }
@keyframes ns-up { to { opacity: 1; transform: none; } }
.ns-shop .ns-region { display: inline-block; font-size: 12px; font-weight: 700; color: var(--ns-yellow); letter-spacing: .5px; margin-bottom: 10px; }
.ns-shop h3 { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 12px; }
.ns-shop p { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; line-height: 1.6; color: var(--ns-dim); margin-top: 4px; }
.ns-shop p svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: rgba(255, 255, 255, .45); }
.ns-shop .ns-acts { display: flex; gap: 8px; margin-top: 18px; }
.ns-shop .ns-acts a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 10px; border: 1px solid var(--ns-line); color: #fff; font-size: 14px; transition: background .25s, color .25s; }
.ns-shop .ns-acts a svg { width: 16px; height: 16px; }
.ns-shop .ns-acts a:hover { background: var(--ns-yellow); color: #111; border-color: var(--ns-yellow); }
.ns-shop-empty { grid-column: 1 / -1; text-align: center; padding: 60px 20px; border-radius: 18px; border: 1px solid var(--ns-line); background: rgba(255, 255, 255, .02); color: var(--ns-dim); font-size: 16px; line-height: 1.7; }   /* 점선은 「여기에 끌어 놓으세요」로 읽힌다 — 안내 칸은 실선 */
.ns-shop-empty a { display: inline-flex; margin-top: 18px; }
@media (max-width: 768px) { .ns-search, .ns-search input { width: 100%; } .ns-shop-list { grid-template-columns: 1fr; } }

/* ── 정품 · 보증 조회 ───────────────────────────────────────────────────────── */
.ns-w-row { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 14px; align-items: end; }
.ns-w-form label { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: var(--ns-dim); }
.ns-w-form input { height: 56px; padding: 0 18px; border-radius: 14px; border: 1px solid var(--ns-line); background: rgba(0, 0, 0, .4); color: #fff; font: inherit; font-size: 18px; font-family: "Poppins", "Pretendard", sans-serif; letter-spacing: 1px; }
.ns-w-form input:focus { outline: none; border-color: var(--ns-yellow); }
.ns-w-result { grid-column: 1 / -1; margin-top: 6px; padding: 24px; border-radius: 16px; background: #141414; border: 1px solid var(--ns-line); color: #fff; animation: ns-up .6s var(--ns-ease) forwards; }
.ns-w-result[hidden] { display: none; }
.ns-w-result .ns-w-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; }
.ns-w-result .ns-w-badge svg { width: 26px; height: 26px; }
.ns-w-ok .ns-w-badge { color: var(--ns-yellow); }
.ns-w-warn .ns-w-badge { color: #ff8a65; }
.ns-w-result dl { display: grid; grid-template-columns: 110px 1fr; gap: 10px 16px; margin-top: 18px; font-size: 15px; }
.ns-w-result dt { color: var(--ns-dim); }
.ns-w-result dd { color: #fff; word-break: keep-all; }
.ns-w-result dd:first-of-type { white-space: nowrap; font-family: "Poppins", "Pretendard", sans-serif; }
.ns-w-result p { margin-top: 10px; color: var(--ns-dim); font-size: 14.5px; line-height: 1.7; }
.ns-w-bar { margin-top: 18px; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.ns-w-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffdf70, var(--ns-yellow)); border-radius: 99px; transition: width 1.4s var(--ns-ease); }
@media (max-width: 768px) { .ns-w-row { grid-template-columns: 1fr; } .ns-w-form .ns-btn, .ns-reg-go { width: 100%; } .ns-w-result dl { grid-template-columns: 96px 1fr; } }

/* ── 팝업 창 (시공점 찾기 · 보증) ─────────────────────────────────────────────── */
.ns-modal { position: fixed; inset: 0; z-index: 25000; display: flex; align-items: flex-start; justify-content: center; padding: 56px 20px; overflow-y: auto; overscroll-behavior: contain; background: rgba(5, 5, 5, .9); opacity: 0; transition: opacity .35s; }
/* 흐림(backdrop-filter)은 걸지 않는다 — 스크롤되는 고정 창에 걸면 크롬에서 뒤 페이지가 창 위로 비쳐 보였다 */
.ns-modal.ns-shown { opacity: 1; }
body.ns-locked #wrapper video { visibility: hidden; }
.ns-modal[hidden] { display: none; }
.ns-modal-box { position: relative; width: 100%; max-width: 1080px; margin: auto 0; padding: 56px 48px 48px; border-radius: 28px; background: linear-gradient(180deg, #171717, #0e0e0e); border: 1px solid var(--ns-line); box-shadow: 0 40px 120px rgba(0, 0, 0, .6); transform: translateY(24px) scale(.98); transition: transform .5s var(--ns-ease); }
.ns-modal.ns-shown .ns-modal-box { transform: none; }
.ns-modal-box::before { content: ''; position: absolute; left: 50%; top: 0; width: 70%; height: 220px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(255, 192, 0, .10), transparent); pointer-events: none; }
.ns-modal-wide { max-width: 900px; }
.ns-modal .ns-head { margin-bottom: 36px; }
.ns-modal .ns-head h2 { font-size: 46px; }
.ns-modal-x { position: absolute; top: 18px; right: 18px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--ns-line); background: rgba(255, 255, 255, .05); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .25s, color .25s, transform .3s var(--ns-ease); }
.ns-modal-x svg { width: 22px; height: 22px; }
.ns-modal-x:hover { background: var(--ns-yellow); color: #111; transform: rotate(90deg); }
@media (max-width: 767px) { .ns-modal { padding: 0; } .ns-modal-box { min-height: 100%; border-radius: 0; padding: 64px 18px 36px; } .ns-modal .ns-head h2 { font-size: 30px; } .ns-modal-x { top: 12px; right: 12px; } }

.ns-tabs { display: flex; gap: 6px; padding: 5px; margin: 0 auto 28px; width: max-content; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--ns-line); }
.ns-tab { height: 44px; padding: 0 26px; border: 0; border-radius: 999px; background: none; color: var(--ns-dim); font: inherit; font-size: 15.5px; font-weight: 700; cursor: pointer; transition: background .3s, color .3s; }
.ns-tab.ns-tab-on { background: var(--ns-yellow); color: #111; }
.ns-lead { text-align: center; color: var(--ns-dim); font-size: 15px; line-height: 1.7; margin-bottom: 24px; }
.ns-lead b { color: #fff; }

/* 보증 등록 양식 — 종이 카드의 칸 묶음 그대로 */
.ns-reg fieldset { border: 1px solid var(--ns-line); border-radius: 18px; padding: 22px 22px 24px; margin: 0 0 16px; background: rgba(255, 255, 255, .02); }
/* 옛 reset.css 가 「fieldset legend」 를 크기 0 으로 숨긴다(그누보드가 legend 를 화면 낭독기용으로만 썼다) — 여기선 보인다 */
.ns-reg fieldset legend { width: auto; height: auto; overflow: visible; text-indent: 0; line-height: 1.4; padding: 0 8px; font-size: 15px; font-weight: 700; color: var(--ns-yellow); }
.ns-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.ns-grid .ns-wide { grid-column: 1 / -1; }
/* 칸 이름 · 별표 · 입력칸 — flex 세로로 두면 「이름」 과 「*」 가 따로 한 줄씩 차지했다. 글줄로 두고 입력칸만 아래로 */
.ns-reg label { display: block; font-size: 13.5px; color: var(--ns-dim); }
.ns-reg label > input:not([type=radio]):not([type=checkbox]), .ns-reg label > .ns-unit { display: block; width: 100%; box-sizing: border-box; margin-top: 7px; }
.ns-reg label > small { display: block; margin-top: 5px; }
.ns-reg label i, .ns-sub-label i, .ns-drop b i { color: var(--ns-yellow); font-style: normal; }
.ns-reg label small { font-size: 12px; color: rgba(255, 255, 255, .42); }
.ns-reg input:not([type=radio]):not([type=checkbox]) { height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--ns-line); background: rgba(0, 0, 0, .35); color: #fff; font: inherit; font-size: 15.5px; color-scheme: dark; }
.ns-reg input:focus { outline: none; border-color: var(--ns-yellow); }
.ns-reg input.ns-bad { border-color: #ff8a65; }
.ns-unit { position: relative; display: block; }
.ns-unit input { width: 100%; padding-right: 44px !important; box-sizing: border-box; }
.ns-unit em { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--ns-dim); font-size: 14px; }
.ns-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ns-who { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.ns-who label, .ns-picks label { position: relative; cursor: pointer; }
.ns-who input, .ns-picks input { position: absolute; opacity: 0; pointer-events: none; }
.ns-who span { display: inline-flex; align-items: center; height: 42px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--ns-line); color: var(--ns-dim); font-size: 14.5px; transition: all .25s; }
.ns-who input:checked + span { border-color: var(--ns-yellow); color: #fff; background: rgba(255, 192, 0, .12); }
.ns-who input:focus-visible + span, .ns-picks input:focus-visible + span { outline: 2px solid var(--ns-yellow); outline-offset: 2px; }
.ns-sub-label { margin: 18px 0 8px; font-size: 13.5px; color: var(--ns-dim); }
.ns-picks { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.ns-picks-2 { grid-template-columns: repeat(2, 1fr); max-width: 320px; }
.ns-picks span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; border-radius: 14px; border: 1px solid var(--ns-line); background: rgba(0, 0, 0, .3); transition: all .25s var(--ns-ease); }
.ns-picks span b { font-family: "Speed"; font-weight: 400; font-size: 19px; color: #fff; letter-spacing: .5px; }
.ns-picks-2 span b { font-family: inherit; font-size: 15px; font-weight: 700; }
.ns-picks span small { font-size: 11.5px; color: var(--ns-dim); }
.ns-picks label:hover span { border-color: rgba(255, 255, 255, .35); }
.ns-picks input:checked + span { border-color: var(--ns-yellow); background: rgba(255, 192, 0, .14); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255, 192, 0, .12); }
.ns-picks input:checked + span b { color: var(--ns-yellow); }
.ns-parts-detail { margin-top: 12px; }
.ns-parts-detail[hidden] { display: none !important; }
.ns-reg fieldset > .ns-grid:last-child { margin-top: 16px; }
.ns-drops { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; }
.ns-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 150px; padding: 18px; border-radius: 16px; border: 1.5px dashed rgba(255, 255, 255, .22); background: rgba(0, 0, 0, .25); text-align: center; cursor: pointer; transition: border-color .25s, background .25s; }
.ns-drop:hover, .ns-drop:focus, .ns-drop.ns-over { outline: none; border-color: var(--ns-yellow); background: rgba(255, 192, 0, .06); }
.ns-drop b { color: #fff; font-size: 15px; } .ns-drop b small { color: var(--ns-dim); font-weight: 400; }
.ns-drop span { font-size: 13px; color: var(--ns-dim); line-height: 1.5; }
.ns-drop-file { font-style: normal; font-size: 13px; color: var(--ns-yellow); word-break: break-all; }
.ns-drop.ns-has { border-style: solid; border-color: rgba(255, 192, 0, .6); }
.ns-drop img.ns-thumb { max-height: 84px; max-width: 100%; border-radius: 8px; }
.ns-note { margin-top: 10px; font-size: 12.5px; color: rgba(255, 255, 255, .45); }
.ns-consent { margin: 8px 0 22px; padding: 18px 20px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid var(--ns-line); }
.ns-consent > label { display: flex; flex-direction: row !important; align-items: center; gap: 10px; color: #fff !important; font-size: 15px !important; cursor: pointer; }
.ns-consent input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--ns-yellow); }
.ns-consent summary { margin-top: 10px; font-size: 13px; color: var(--ns-dim); cursor: pointer; }
.ns-consent dl { display: grid; grid-template-columns: 84px 1fr; gap: 8px 12px; margin-top: 12px; font-size: 13px; line-height: 1.6; }
.ns-consent dt { color: var(--ns-dim); } .ns-consent dd { color: rgba(255, 255, 255, .85); }
.ns-consent p { margin-top: 10px; font-size: 12.5px; color: var(--ns-dim); }
.ns-reg-go { display: flex; margin: 0 auto; min-width: 240px; }
.ns-reg-progress { height: 4px; margin: 14px auto 0; max-width: 320px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.ns-reg-progress[hidden] { display: none; }
.ns-reg-progress i { display: block; height: 100%; width: 0; background: var(--ns-yellow); transition: width .2s; }
.ns-reg .ns-w-result { margin-top: 18px; }
.ns-w-result .ns-big { display: block; margin-top: 12px; font-family: "Poppins", sans-serif; font-size: 26px; font-weight: 600; letter-spacing: 1px; color: #fff; }
@media (max-width: 767px) {
	.ns-grid { grid-template-columns: 1fr; }
	.ns-picks { grid-template-columns: repeat(3, 1fr); }
	.ns-drops { grid-template-columns: 1fr; }
	.ns-reg fieldset { padding: 18px 14px 20px; }
	.ns-tab { padding: 0 18px; }
}

/* ── 제품 상세 창 ─────────────────────────────────────────────────────────────── */
/* 카드의 「자세히 보기」 — 옛 카드 배치(정보 · 워터마크 위아래)를 건드리지 않게 따로 띄운다 */
.section-tech .item { cursor: pointer; }
.section-tech .item:focus-visible { outline: 2px solid var(--ns-yellow); outline-offset: -2px; }
.ns-more { position: absolute; left: 30px; bottom: 26px; z-index: 30; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .25); color: #fff; font-size: 13px; font-weight: 700; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s var(--ns-ease), background .3s, color .3s; }
.ns-more b { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; border-radius: 50%; background: var(--ns-yellow); color: #111; font-size: 14px; line-height: 1; }
.section-tech .item:hover .ns-more, .section-tech .item:focus-visible .ns-more { opacity: 1; transform: none; }
.section-tech .item:nth-child(even) .ns-more { bottom: auto; top: 26px; }
.ns-more:hover { background: var(--ns-yellow); color: #111; }
@media (max-width: 1024px) { .ns-more { opacity: 1; transform: none; position: relative; left: auto; bottom: auto; top: auto !important; align-self: flex-start; margin-top: 4px; } }

.ns-modal-product { max-width: 1180px; padding: 30px 34px 34px; }
.ns-modal-product::before { display: none; }
.ns-p-switch { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 60px 22px 0; }
.ns-p-switch button { height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--ns-line); background: none; color: var(--ns-dim); font-family: "Speed"; font-size: 14px; letter-spacing: .5px; cursor: pointer; transition: all .25s; }
.ns-p-switch button:hover { color: #fff; border-color: rgba(255, 255, 255, .35); }
.ns-p-switch button.ns-on { background: var(--ns-yellow); border-color: var(--ns-yellow); color: #111; }
.ns-p-main { display: grid; grid-template-columns: 1.15fr 1fr; gap: 34px; align-items: center; }
.ns-p-photo { margin: 0; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 11; background: #0a0a0a; box-shadow: 0 30px 70px rgba(0, 0, 0, .5); }
.ns-p-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .45s, transform 1.2s var(--ns-ease); }
.ns-p-photo.ns-swap img { opacity: 0; transform: scale(1.04); }
.ns-p-series { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 1.5px; color: var(--ns-dim); }
.ns-p-name { margin: 6px 0 4px; font-family: "Speed"; font-weight: 400; font-size: 52px; line-height: 1.05; letter-spacing: 1.5px; color: #fff; }
.ns-p-name em { font-style: normal; color: var(--ns-yellow); }
.ns-p-tag { font-size: 16px; color: rgba(255, 255, 255, .7); line-height: 1.5; }
.ns-p-points { margin: 22px 0 22px; display: grid; gap: 10px; }
.ns-p-points li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.6; color: #fff; opacity: 0; transform: translateY(10px); animation: ns-up .6s var(--ns-ease) forwards; }
.ns-p-points li::before { content: ''; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--ns-yellow); box-shadow: 0 0 12px rgba(255, 192, 0, .6); }
.ns-p-specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ns-p-specs div { padding: 14px 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--ns-line); }
.ns-p-specs small { display: block; font-size: 12px; color: var(--ns-dim); }
.ns-p-specs b { display: block; margin-top: 4px; font-size: 17px; color: #fff; }
.ns-p-specs b i { font-style: normal; font-size: 12px; color: var(--ns-dim); font-weight: 400; margin-left: 2px; }
.ns-p-more { margin-top: 22px; border-top: 1px solid var(--ns-line); padding-top: 14px; }
.ns-p-more summary { cursor: pointer; color: var(--ns-dim); font-size: 14px; }
.ns-p-more summary:hover { color: #fff; }
.ns-p-tech { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.ns-p-tech div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 10px; background: rgba(255, 255, 255, .03); font-size: 13.5px; color: var(--ns-dim); }
.ns-p-tech div b { color: #fff; font-weight: 600; text-align: right; }
.ns-p-fine { margin-top: 10px; font-size: 12px; color: rgba(255, 255, 255, .4); line-height: 1.6; }

/* 벤토 — 크기가 다른 타일로 전 제품을 한 판에. 큰 타일이 지금 보는 제품 */
.ns-bento-head { display: flex; align-items: baseline; gap: 10px; margin: 30px 0 12px; }
.ns-bento-head b { font-size: 16px; color: #fff; } .ns-bento-head span { font-size: 13px; color: var(--ns-dim); }
.ns-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 118px; gap: 10px; }
.ns-tile { position: relative; overflow: hidden; border-radius: 18px; border: 1px solid var(--ns-line); background: #121212; cursor: pointer; text-align: left; padding: 16px 18px; color: #fff; font: inherit; transition: transform .45s var(--ns-ease), border-color .3s; }
.ns-tile:hover { transform: translateY(-3px); border-color: rgba(255, 192, 0, .5); }
.ns-tile.ns-big { grid-column: span 2; grid-row: span 2; border-color: rgba(255, 192, 0, .7); }
.ns-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; transition: opacity .5s, transform 1s var(--ns-ease); }
.ns-tile.ns-big img { opacity: .55; }
.ns-tile:hover img { transform: scale(1.06); opacity: .5; }
.ns-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .85), rgba(0, 0, 0, .1)); }
.ns-tile > * { position: relative; z-index: 2; }
.ns-tile .ns-t-name { display: block; font-family: "Speed"; font-size: 19px; letter-spacing: .5px; }
.ns-tile.ns-big .ns-t-name { font-size: 30px; }
.ns-tile .ns-t-name em { font-style: normal; color: var(--ns-yellow); }
.ns-tile .ns-t-meta { position: absolute; left: 18px; bottom: 14px; z-index: 2; display: flex; gap: 6px; flex-wrap: wrap; }
.ns-tile .ns-t-meta span { padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 12px; }
.ns-tile .ns-t-meta span.ns-y { background: var(--ns-yellow); color: #111; font-weight: 700; }
.ns-tile .ns-t-gauge { position: absolute; right: 18px; top: 16px; z-index: 2; text-align: right; }
.ns-tile .ns-t-gauge b { display: block; font-family: "Poppins", sans-serif; font-size: 34px; line-height: 1; color: var(--ns-yellow); }
.ns-tile .ns-t-gauge small { font-size: 11.5px; color: var(--ns-dim); }
.ns-tile:not(.ns-big) .ns-t-gauge b { font-size: 22px; }
@media (max-width: 900px) {
	.ns-p-main { grid-template-columns: 1fr; gap: 20px; }
	.ns-p-name { font-size: 38px; }
	.ns-p-specs { grid-template-columns: repeat(2, 1fr); }
	.ns-p-tech { grid-template-columns: 1fr; }
	.ns-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 128px; }
	/* 작은 칸은 휴대폰에서 이름 · 연수 · 마감만 — 다 넣으면 글자가 겹쳤다 */
	.ns-tile:not(.ns-big) { padding: 12px 14px; }
	.ns-tile:not(.ns-big) .ns-t-name { font-size: 15px; margin-top: 22px; line-height: 1.15; }
	.ns-tile:not(.ns-big) .ns-t-name em { display: block; }
	.ns-tile:not(.ns-big) .ns-t-gauge { top: 10px; right: 12px; }
	.ns-tile:not(.ns-big) .ns-t-gauge b { font-size: 18px; display: inline; }
	.ns-tile:not(.ns-big) .ns-t-gauge small { font-size: 11px; }
	.ns-tile:not(.ns-big) .ns-t-meta { left: 14px; bottom: 10px; }
	.ns-tile:not(.ns-big) .ns-t-meta span:not(.ns-y) { display: none; }
	.ns-modal-product { padding: 60px 16px 28px; }
	.ns-p-switch { margin-right: 0; }
}

/* ── 제목 한 글자씩 떠오르기 ──────────────────────────────────────────────────── */
/* site.js 가 제목의 줄(span)마다 글자를 .ns-ch 로 쪼갠다. 줄은 아래가 잘린 창(overflow hidden)이 되고,
   글자는 그 아래에서 차례로 올라온다. 옛 CSS 가 줄 전체에 걸던 opacity 애니메이션은 끈다 — 둘이 겹치면 두 번 나타난다. */
/* nowrap: 글자를 따로 쪼개면 글자 사이에서도 줄이 바뀐다(「INQUIR / Y」). 왼쪽 여백: 기울어진 Speed 글꼴의 첫 글자
   (P · A)는 상자 왼쪽 밖으로 삐져나오는데, 줄이 overflow hidden 이라 그 끝이 잘렸다 — 안쪽 여백만큼 바깥으로 되돌린다 */
h2.ns-split > span { overflow: hidden; white-space: nowrap; opacity: 1 !important; animation: none !important; padding: 0 .16em .08em .12em; margin: 0 -.16em 0 -.12em; }
/* 옛 CSS 의 「.section-about .title h2 span { display:block; opacity:0 }」 같은 규칙이 쪼갠 글자 span 에도 걸려
   글자가 한 줄에 하나씩 쌓이고(제목 높이 1,300px) 투명해졌다 — 글자에는 옛 규칙이 닿지 않게 못 박는다 */
h2.ns-split > span > span.ns-ch { display: inline-block !important; opacity: 1 !important; animation: none !important; text-align: inherit; }
h2.ns-split .ns-ch { transform: translateY(110%) rotate(6deg); transform-origin: 0 100%; transition: transform .9s var(--ns-ease); transition-delay: calc(var(--i) * 32ms + var(--d, 0ms)); will-change: transform; }
.on h2.ns-split > span > .ns-ch, .ns-in h2.ns-split > span > .ns-ch, .ns-shown h2.ns-split > span > .ns-ch { transform: none; }
@media (prefers-reduced-motion: reduce) { h2.ns-split .ns-ch { transform: none; transition: none; } }

/* 자석 단추 — 마우스가 가까이 오면 그쪽으로 살짝 끌려온다(site.js). 놓으면 탄성 있게 제자리로 */
.ns-magnet { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.ns-magnet.ns-pull { transition: transform .15s linear; }

#footer .ns-privacy { color: rgba(255, 255, 255, .85); }
#footer .ns-privacy:hover { color: var(--ns-yellow); }

/* 문의 섹션 아이콘은 처음부터 브랜드 색 — 옛 사이트가 그랬고, 흰 선 아이콘으로 두니 눌러도 되는 단추로 안 보였다(2026-10-29).
   오른쪽 아래 떠 있는 단추는 화면을 덜 가리게 지금처럼 차분한 색으로 둔다. */
/* 테두리는 없앤다 — 투명 테두리 밑에 그라데이션이 한 번 더 깔려 가장자리 색이 어긋났다(인스타그램) */
.section-contact .sns-item .btn .ns-ico-youtube, .section-contact .sns-item .btn .ns-ico-insta, .section-contact .sns-item .btn .ns-ico-blog { border: 0; background-origin: border-box; }
.section-contact .sns-item .btn .ns-ico-youtube { background: #FF0033; --ns-ink: #FF0033; }
.section-contact .sns-item .btn .ns-ico-insta { background: linear-gradient(45deg, #FEDA75, #FA7E1E 30%, #D62976 60%, #4F5BD5); }
.section-contact .sns-item .btn .ns-ico-blog { background: #03C75A; }
.section-contact .sns-item .btn .ns-ico svg { width: 66%; height: 66%; }

/* 제품 창은 PC 한 화면에 통째로 들어오게 (2026-10-29) — 사진 · 설명 · 물성 · 비교가 위아래로 길어 아래가 잘렸고,
   창 안을 스크롤해야 비교가 보였다. 사진 높이를 화면 높이에 묶고, 벤토는 다섯 칸 한 줄(고른 것은 테두리)로 줄인다.
   창은 위아래 가운데. 화면이 아주 낮으면(700px 미만) 그때만 창 안에서 스크롤한다. */
@media (min-width: 901px) {
	#DETAIL { padding: 20px; align-items: center; }
	#DETAIL .ns-modal-box { margin: 0; padding: 24px 30px 26px; max-height: calc(100vh - 40px); box-sizing: border-box; overflow-y: auto; }
	#DETAIL .ns-p-switch { margin-bottom: 16px; }
	#DETAIL .ns-p-main { gap: 28px; }
	#DETAIL .ns-p-photo { aspect-ratio: auto; height: min(46vh, 400px); }
	#DETAIL .ns-p-name { font-size: 44px; }
	#DETAIL .ns-p-tag { font-size: 15px; }
	#DETAIL .ns-p-points { margin: 14px 0; gap: 6px; }
	#DETAIL .ns-p-points li { font-size: 14.5px; }
	#DETAIL .ns-p-specs div { padding: 10px 12px; }
	#DETAIL .ns-p-more { margin-top: 14px; padding-top: 10px; }
	#DETAIL .ns-bento-head { margin: 14px 0 8px; }
	#DETAIL .ns-bento { grid-template-columns: repeat(5, 1fr); grid-auto-rows: 104px; gap: 8px; }
	#DETAIL .ns-tile, #DETAIL .ns-tile.ns-big { grid-column: auto; grid-row: auto; order: 0 !important; padding: 12px 14px; }
	#DETAIL .ns-tile .ns-t-name, #DETAIL .ns-tile.ns-big .ns-t-name { font-size: 16px; margin-top: 18px; line-height: 1.15; }
	#DETAIL .ns-tile .ns-t-name em { display: block; }
	#DETAIL .ns-tile .ns-t-gauge { top: 10px; right: 12px; }
	#DETAIL .ns-tile .ns-t-gauge b, #DETAIL .ns-tile:not(.ns-big) .ns-t-gauge b { font-size: 20px; display: inline; }
	#DETAIL .ns-tile .ns-t-meta { left: 14px; bottom: 10px; }
	#DETAIL .ns-tile .ns-t-meta span:not(.ns-y) { display: none; }
	#DETAIL .ns-tile.ns-big { box-shadow: 0 0 0 2px var(--ns-yellow) inset; }
	#DETAIL .ns-tile.ns-big img { opacity: .6; }
}

/* ── 베일 장면 (문의 앞) ──────────────────────────────────────────────────────── */
/* 섹션은 화면 2.6배 높이, 안의 무대는 화면에 붙어(sticky) 있고, 그 사이 스크롤만큼 영상이 진행된다.
   #wrapper 가 overflow hidden 이면 sticky 가 듣지 않는다(그 상자가 스크롤 상자가 되어 버린다) — clip 으로 바꾼다.
   clip 은 넘친 것을 자르기만 하고 스크롤 상자를 만들지 않는다. */
#wrapper { overflow: clip; }
@supports not (overflow: clip) { #wrapper { overflow: visible; } body { overflow-x: hidden; } }
.ns-veil { position: relative; height: 260vh; background: #070d0d; }
.ns-veil-stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center;
	background: radial-gradient(ellipse 70% 55% at 50% 50%, #172322 0%, #0b1414 55%, #070d0d 100%); }
/* 영상의 가장자리는 짙은 청록에서 검정으로 번진다 — 네 변을 흐리게 지워 배경과 이음매가 안 보이게 */
.ns-veil-frame { position: relative; width: min(1500px, 100%); aspect-ratio: 1120 / 274; transform: scale(calc(1.12 - var(--p, 0) * .12)); transition: transform .1s linear; }
.ns-veil-frame video { display: block; width: 100%; height: 100%; object-fit: cover;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
	-webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%); mask-composite: intersect; }
/* 끝(로고가 선 뒤)에만 문구가 떠오른다 */
.ns-veil-line { position: absolute; left: 0; right: 0; bottom: 18vh; text-align: center; font-family: "Speed"; font-size: 30px; letter-spacing: 4px; color: #fff;
	opacity: calc((var(--p, 0) - .82) * 6); transform: translateY(calc((1 - var(--p, 0)) * 60px)); }
.ns-veil-hint { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); font-family: "Poppins", sans-serif; font-size: 12px; letter-spacing: 3px; color: rgba(255, 255, 255, .45);
	opacity: calc(1 - var(--p, 0) * 4); }
.ns-veil-hint::after { content: ''; display: block; width: 1px; height: 34px; margin: 10px auto 0; background: linear-gradient(rgba(255, 255, 255, .5), transparent); animation: scroll 1.6s linear infinite; }
@media (max-width: 767px) {
	.ns-veil { height: 220vh; }
	/* 휴대폰은 띠가 너무 가늘어진다(375px 폭이면 92px) — 높이를 늘리고 양옆을 잘라 가운데(천 · 로고)를 크게 */
	.ns-veil-frame { width: 100%; aspect-ratio: auto; height: 62vw; }
	.ns-veil-line { font-size: 17px; letter-spacing: 2px; bottom: 22vh; }
}
@media (prefers-reduced-motion: reduce) {
	.ns-veil { height: auto; }
	.ns-veil-stick { position: relative; height: 70vh; }
	.ns-veil-frame { transform: none; }
	.ns-veil-line { opacity: 1; transform: none; }
	.ns-veil-hint { display: none; }
}

/* ── 성능 시험 ──────────────────────────────────────────────────────────────── */
.ns-tests { padding: 130px 0 120px; background: linear-gradient(180deg, #0d0d0d, #111 60%, #0b1414); }
.ns-tests .container { max-width: 1440px; }
.ns-test-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ns-test { position: relative; display: block; padding: 0; border: 1px solid var(--ns-line); border-radius: 22px; overflow: hidden; background: #000; cursor: pointer; text-align: left; color: #fff; font: inherit; aspect-ratio: 4 / 5; transition: transform .6s var(--ns-ease), border-color .3s, box-shadow .4s; }
.ns-test:nth-child(2) { transition-delay: .08s; } .ns-test:nth-child(3) { transition-delay: .16s; }
.ns-test video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s var(--ns-ease), filter .6s; filter: saturate(.9) brightness(.85); }
.ns-test::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, 0) 70%); pointer-events: none; }
.ns-test:hover { border-color: rgba(255, 192, 0, .6); box-shadow: 0 30px 70px rgba(0, 0, 0, .5); }
.ns-test:hover video { transform: scale(1.08); filter: saturate(1) brightness(1); }
.ns-test:focus-visible { outline: 2px solid var(--ns-yellow); outline-offset: 3px; }
.ns-test-txt { position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 2; }
.ns-test-txt small { display: block; font-family: "Poppins", sans-serif; font-size: 12px; letter-spacing: 2.5px; color: var(--ns-yellow); }
.ns-test-txt b { display: block; margin-top: 6px; font-size: 26px; font-weight: 700; }
.ns-test-txt em { display: block; word-break: keep-all; margin-top: 8px; font-style: normal; font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, .78); }
.ns-test-txt em i { font-style: normal; color: var(--ns-yellow); font-weight: 700; }
.ns-test-play { position: absolute; right: 20px; top: 20px; z-index: 2; width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .3s, color .3s, transform .5s var(--ns-ease); }
/* 삼각형은 무게중심이 왼쪽에 있어 조금 오른쪽으로 민다 — 3px 은 오른쪽으로 치우쳐 보였다(2026-10-29) */
.ns-test-play svg { width: 22px; height: 22px; margin-left: 1px; }
.ns-test:hover .ns-test-play { background: var(--ns-yellow); color: #111; transform: scale(1.1); }
@media (max-width: 1024px) { .ns-test-grid { grid-template-columns: 1fr 1fr; } .ns-test:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; } }
@media (max-width: 767px) { .ns-tests { padding: 90px 0 80px; } .ns-test-grid { grid-template-columns: 1fr; gap: 14px; } .ns-test, .ns-test:last-child { aspect-ratio: 16 / 11; } .ns-test-txt b { font-size: 21px; } }

/* 시험 영상 창 — 가로판은 넓게, 휴대폰 세로판은 세로로 */
.ns-film-box { max-width: 1200px; padding: 22px 24px 24px; }
.ns-film-box::before { display: none; }
.ns-film-title { margin: 4px 60px 14px 4px; font-size: 18px; font-weight: 700; color: #fff; }
.ns-film-box video { display: block; width: 100%; max-height: calc(100vh - 210px); border-radius: 14px; background: #000; }
.ns-film-note { margin: 12px 4px 0; font-size: 14px; line-height: 1.7; color: var(--ns-dim); }
#FILM { align-items: center; }
#FILM.ns-film-v .ns-film-box { max-width: 460px; }
#FILM.ns-film-v .ns-film-box video { max-height: calc(100vh - 230px); }
@media (max-width: 767px) { #FILM .ns-film-box { padding: 60px 12px 24px; } }

/* 첫 화면 소리 켜기 — 오른쪽 아래, 유리 같은 알약. 켜면 노랗게 */
.ns-sound { position: absolute; right: 40px; bottom: 40px; z-index: 60; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px 0 14px; border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .35); background: rgba(0, 0, 0, .35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
	transition: background .3s, color .3s, border-color .3s; }
.ns-sound svg { width: 20px; height: 20px; }
.ns-sound .ns-s-on { display: none; }
.ns-sound.ns-on { background: var(--ns-yellow); border-color: var(--ns-yellow); color: #111; }
.ns-sound.ns-on .ns-s-on { display: block; } .ns-sound.ns-on .ns-s-off { display: none; }
.ns-sound:not(.ns-on)::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid rgba(255, 255, 255, .5); animation: ns-ping 2.4s ease-out infinite; pointer-events: none; }
@keyframes ns-ping { 0% { transform: scale(1); opacity: .8; } 80%, 100% { transform: scale(1.35); opacity: 0; } }
@media (max-width: 767px) { .ns-sound { right: 12px; bottom: 14px; height: 38px; padding: 0 14px 0 11px; font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .ns-sound::before { display: none; } }

/* 좁은 휴대폰에서 제목 줄이 자리보다 넓으면 끝 글자가 잘린다(줄바꿈을 막아 두었으므로) — 화면 폭에 맞춰 줄인다 */
@media (max-width: 480px) {
	.section-about .title h2 .color-white { font-size: min(30px, 7.1vw); }
	.section-about .title h2 .color-yellow { font-size: min(34px, 8.6vw); }
	.section-stats .title h2 .color-yellow, .section-contact .title h2 span, .ns-head h2 span { font-size: min(1em, 8.4vw); }
}

/* 마우스를 올리거나 고른 카드의 노란 테두리는 걷는다(2026-10-29 「촌스럽다」) — 흰 선을 은은하게, 깊이는 그림자로.
   노랑은 글자 · 단추에만 남긴다. */
.ns-test:hover, .ns-shop:hover, .ns-tile:hover { border-color: rgba(255, 255, 255, .28); }
.ns-test:hover { box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06) inset; }
.ns-tile.ns-big { border-color: rgba(255, 255, 255, .5); }
#DETAIL .ns-tile.ns-big { box-shadow: 0 0 0 1px rgba(255, 255, 255, .55) inset, 0 14px 30px rgba(0, 0, 0, .45); }

/* 작은 비교 칸 — 「유광 · 무광」 알약이 이름(10G)을 가렸다. 작은 칸은 알약 대신 오른쪽 위 「n년 보증 · 유광」으로,
   이름은 칸 아래에. 큰 칸(휴대폰에서 고른 제품)은 지금처럼 알약까지 */
.ns-tile .ns-t-gauge small i { font-style: normal; display: none; }
@media (max-width: 900px) {
	.ns-tile:not(.ns-big) .ns-t-meta { display: none; }
	.ns-tile:not(.ns-big) .ns-t-gauge small i { display: inline; }
	.ns-tile:not(.ns-big) .ns-t-name { position: absolute; left: 14px; bottom: 12px; margin: 0; }
}
@media (min-width: 901px) {
	#DETAIL .ns-tile .ns-t-meta { display: none; }
	#DETAIL .ns-tile .ns-t-gauge small i { display: inline; }
	#DETAIL .ns-tile .ns-t-name, #DETAIL .ns-tile.ns-big .ns-t-name { position: absolute; left: 14px; bottom: 12px; margin: 0; }
}

/* ── 스크롤에 묶은 움직임 (site.js fxTick 이 --hp · --sv 를 넘긴다) ─────────────────────── */
/* 첫 화면: 내려가는 만큼 영상이 카드처럼 줄어든다 — 위에서 매달린 듯 위쪽 가운데를 축으로, 모서리는 둥글게, 살짝 어둡게 */
.section-hero { background: var(--ns-bg); }
.section-hero .video-wrap { position: absolute; inset: 0; overflow: hidden; transform-origin: 50% 0;
	transform: scale(calc(1 - var(--hp, 0) * .14)); border-radius: calc(var(--hp, 0) * 36px);
	filter: brightness(calc(1 - var(--hp, 0) * .4)); will-change: transform; }
.section-hero .btn-scroll, .section-hero .ns-sound { opacity: calc(1 - var(--hp, 0) * 2.2); }
/* 배경 사진(ABOUT · NIPPON PAINT): 섹션이 들어올 때 1.22배로 시작해 지나가는 동안 제 크기로.
   사진은 섹션의 background 라 그대로는 키울 수 없다 — 같은 배경을 물려받는 층(::before)을 깔고 그 층을 움직인다 */
.section-about, .section-stats { overflow: hidden; }
.section-about::before, .section-stats::before { content: ''; position: absolute; inset: 0; z-index: 0; background: inherit;
	transform: scale(calc(1.22 - var(--sv, 0) * .22)); will-change: transform; }
.section-about > .container, .section-stats > .container { position: relative; z-index: 1; }
/* 문의 섹션 영상도 같은 식으로 물러난다 */
.section-contact .video-wrap video { transform: translate(-50%, -50%) scale(calc(1.25 - var(--sv, 0) * .25)); will-change: transform; }
@media (prefers-reduced-motion: reduce) {
	.section-hero .video-wrap, .section-about::before, .section-stats::before { transform: none; border-radius: 0; filter: none; }
	.section-contact .video-wrap video { transform: translate(-50%, -50%); }
}

/* 시공점 창 — 제목을 한 줄로(「FIND A SHOP」), 등록된 시공점이 없을 때는 창도 작게 */
#SHOP .ns-head h2 > span { display: inline-block; }
#SHOP .ns-head h2 > span + span { margin-left: .32em; }
#SHOP.ns-shop-none .ns-modal-box { max-width: 620px; padding: 44px 36px 36px; }
#SHOP.ns-shop-none .ns-head { margin-bottom: 24px; }
#SHOP.ns-shop-none .ns-head h2 { font-size: 38px; }
#SHOP.ns-shop-none .ns-head p { font-size: 17px; margin-top: 12px; }
#SHOP.ns-shop-none .ns-shop-list { display: block; }
#SHOP.ns-shop-none .ns-shop-empty { padding: 26px 20px 28px; font-size: 15px; border-style: solid; background: rgba(255, 255, 255, .02); }
#SHOP.ns-shop-none .ns-shop-empty a { margin-top: 14px; height: 48px; }
#SHOP.ns-shop-none { align-items: center; }
@media (max-width: 767px) {
	#SHOP.ns-shop-none .ns-modal-box { min-height: 0; border-radius: 22px; margin: auto 14px; padding: 52px 20px 26px; }
	#SHOP.ns-shop-none .ns-head h2 { font-size: 28px; }
	#SHOP.ns-shop-none { padding: 0; }
}