/* =================================================================
   NS Custom — visual-designer-INSIDE-V2
   Brand tier: premium · 누수 보수 · 깔끔/심플/전문적/신뢰
   Self-critique (HCD 6원칙): see workflow-log.md
   ================================================================= */

/* ---------- Design Tokens ---------- */
:root {
	/* Primary palette — depth-of-water, calm-trust blue */
	--ns-primary-900: #052e44;
	--ns-primary-700: #0d6e9a;
	--ns-primary-500: #1a8cc1;

	/* Accent — focused warning amber (누수=빠른 대응 강조) */
	--ns-accent-600: #d97706;
	--ns-accent-500: #f59e0b;

	/* Background neutrals */
	--ns-bg-50:  #f8fafc;
	--ns-bg-100: #f1f5f9;
	--ns-bg-200: #e2e8f0;

	/* Text */
	--ns-ink-900: #0f1d2e;
	--ns-ink-700: #1f2937;
	--ns-ink-500: #475569;
	--ns-ink-300: #94a3b8;

	/* Borders */
	--ns-border-100: #e5e7eb;
	--ns-border-200: #cbd5e1;

	/* System — radius scale (역할별 6단계 + 비대칭 2종) */
	--ns-radius-0:   0;       /* neo-brutalist · case row · cta-block edge */
	--ns-radius-xs:  2px;     /* faq item · sharp utility surface */
	--ns-radius-sm:  4px;     /* feature outline · cut-corner stats */
	--ns-radius-md: 12px;     /* default cards (legacy) */
	--ns-radius-lg: 20px;     /* portfolio squircle · service card */
	--ns-radius-xl: 28px;     /* gallery squircle · cta-block large */
	--ns-radius-pill: 999px;  /* primary CTA / nav cta */
	/* asymmetric — service card 좌상단 강조 / cta-block diagonal */
	--ns-radius-asym-tl:  24px 4px 4px 4px;
	--ns-radius-asym-diag: 28px 4px 28px 4px;
	--ns-shadow-sm: 0 1px 2px rgba(15, 29, 46, .04), 0 1px 3px rgba(15, 29, 46, .06);
	--ns-shadow-md: 0 4px 12px rgba(15, 29, 46, .08), 0 2px 4px rgba(15, 29, 46, .04);
	--ns-shadow-lg: 0 16px 48px rgba(5, 46, 68, .12), 0 6px 16px rgba(5, 46, 68, .08);

	--ns-container: 1240px;
	--ns-container-narrow: 880px;

	--ns-easing: cubic-bezier(.22, .61, .36, 1);
	--ns-dur-1: .35s;
	--ns-dur-2: .6s;
	--ns-dur-3: .9s;

	--ns-font-sans: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'system-ui', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}

/* ---------- Reset / Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--ns-font-sans);
	font-size: 16px;
	line-height: 1.65;
	color: var(--ns-ink-700);
	background: #fff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: 'ss01', 'tnum';
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color .2s var(--ns-easing); }
a:hover { color: var(--ns-primary-700); }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { color: var(--ns-ink-900); font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 1.5vw, 1.4rem); }
p  { margin: 0 0 1em 0; }
ol, ul { margin: 0; padding: 0; }

/* skip link */
.ns-skip {
	position: absolute; top: -100px; left: 0;
	background: var(--ns-primary-700); color: #fff; padding: .6rem 1rem; z-index: 200;
	border-radius: 0 0 var(--ns-radius-sm) 0;
	transition: top .2s ease;
}
.ns-skip:focus { top: 0; outline: 2px solid var(--ns-accent-500); outline-offset: 2px; }

/* ---------- Container ---------- */
.ns-container {
	width: 100%; max-width: var(--ns-container);
	margin: 0 auto; padding: 0 24px;
}
.ns-container--narrow { max-width: var(--ns-container-narrow); }

/* ---------- Header ---------- */
.ns-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: saturate(140%) blur(10px);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--ns-border-100);
}
.ns-header__inner {
	max-width: var(--ns-container);
	margin: 0 auto; padding: 14px 24px;
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px;
}
.ns-logo { display: flex; align-items: center; gap: 10px; }
.ns-logo__mark {
	width: 32px; height: 32px; border-radius: 8px;
	background: linear-gradient(135deg, var(--ns-primary-500), var(--ns-primary-900));
	box-shadow: inset 0 -4px 8px rgba(0,0,0,.18), 0 4px 8px rgba(13, 110, 154, .25);
	position: relative;
}
.ns-logo__mark::after {
	content: ''; position: absolute; inset: 6px;
	background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.65), transparent 60%);
	border-radius: 50%;
}
.ns-logo__name { font-weight: 800; color: var(--ns-ink-900); letter-spacing: -.02em; }
.ns-logo__sub  { font-size: .8rem; color: var(--ns-ink-500); padding-left: 6px; border-left: 1px solid var(--ns-border-200); margin-left: 2px; }

.ns-nav { display: flex; align-items: center; gap: 28px; }
.ns-nav__link {
	font-size: .95rem; font-weight: 500; color: var(--ns-ink-700);
	position: relative;
}
.ns-nav__link::after {
	content: ''; position: absolute; left: 0; right: 0; bottom: -6px;
	height: 2px; background: var(--ns-primary-500);
	transform: scaleX(0); transform-origin: left;
	transition: transform .3s var(--ns-easing);
}
.ns-nav__link:hover::after, .ns-nav__link:focus::after { transform: scaleX(1); }
.ns-nav__cta {
	background: var(--ns-ink-900); color: #fff !important;
	padding: 10px 18px; border-radius: 999px;
	display: inline-flex; align-items: center; gap: 6px;
	transition: transform .25s var(--ns-easing), background .25s var(--ns-easing);
}
.ns-nav__cta::after { display: none; }
.ns-nav__cta:hover { background: var(--ns-primary-700); transform: translateY(-1px); }
.ns-arrow { display: inline-block; transition: transform .3s var(--ns-easing); }
a:hover .ns-arrow, button:hover .ns-arrow { transform: translateX(3px); }

@media (max-width: 720px) {
	.ns-nav { gap: 14px; }
	.ns-nav__link:not(.ns-nav__cta) { display: none; }
	.ns-logo__sub { display: none; }
}

/* ---------- Buttons ---------- */
.ns-btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 14px 24px; border-radius: 999px; font-weight: 600;
	font-size: .98rem; letter-spacing: -.01em;
	transition: transform .25s var(--ns-easing), box-shadow .25s var(--ns-easing), background .25s var(--ns-easing), color .25s var(--ns-easing);
	will-change: transform;
	border: 1.5px solid transparent;
}
.ns-btn--lg { padding: 17px 30px; font-size: 1.05rem; }
.ns-btn--primary {
	background: var(--ns-ink-900); color: #fff;
	box-shadow: 0 6px 18px rgba(15, 29, 46, .18);
}
.ns-btn--primary:hover { background: var(--ns-primary-700); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(13, 110, 154, .3); color: #fff; }
.ns-btn--primary:focus-visible { outline: 3px solid var(--ns-accent-500); outline-offset: 2px; }
.ns-btn--ghost {
	background: transparent; color: var(--ns-ink-900);
	border-color: var(--ns-border-200);
}
.ns-btn--ghost:hover { border-color: var(--ns-ink-900); transform: translateY(-2px); color: var(--ns-ink-900); }

/* ---------- Section base ---------- */
section[class*="ns-"] { padding: clamp(64px, 10vw, 120px) 0; }
.ns-section__head { text-align: center; max-width: 720px; margin: 0 auto clamp(40px, 6vw, 64px); }
.ns-section__eyebrow {
	display: inline-block; font-size: .8rem; font-weight: 700;
	letter-spacing: .2em; text-transform: uppercase;
	color: var(--ns-primary-700);
	padding: 6px 14px; border-radius: 999px;
	background: rgba(13, 110, 154, .08);
	margin-bottom: 16px;
}
.ns-section__title { margin: 0 0 12px; }
.ns-section__sub { color: var(--ns-ink-500); font-size: 1.05rem; margin: 0; }

/* ---------- HERO ---------- */
.ns-hero {
	position: relative; overflow: hidden;
	min-height: clamp(620px, 92vh, 880px);
	display: flex; align-items: center;
	color: #fff;
	padding-top: 60px; padding-bottom: 100px;
	isolation: isolate;
}
.ns-hero__bg {
	position: absolute; inset: 0; z-index: -1;
	background: var(--ns-primary-900);
}
.ns-hero__bg .ns-img,
.ns-hero__bg picture {
	width: 100%; height: 100%; display: block;
}
.ns-hero__bg img {
	width: 100%; height: 100%; object-fit: cover;
	transform: scale(1.06);
	animation: ns-hero-zoom 14s var(--ns-easing) infinite alternate;
	will-change: transform;
}
@keyframes ns-hero-zoom { from { transform: scale(1.06); } to { transform: scale(1.14) translate(2%, 1%); } }
.ns-hero__overlay {
	position: absolute; inset: 0;
	background:
		linear-gradient(135deg, rgba(5, 46, 68, .88) 0%, rgba(5, 46, 68, .55) 60%, rgba(5, 46, 68, .25) 100%),
		linear-gradient(0deg, rgba(0,0,0,.4), transparent 60%);
}
.ns-hero__inner { position: relative; }
.ns-hero__eyebrow {
	display: inline-block;
	font-size: .85rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
	color: rgba(255,255,255,.85);
	padding: 8px 16px; border-radius: 999px;
	background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
	backdrop-filter: blur(8px);
	margin-bottom: 28px;
}
.ns-hero__title {
	color: #fff; font-size: clamp(3.4rem, 9vw, 6.4rem); font-weight: 900;
	line-height: 1; margin: 0 0 12px; letter-spacing: -0.04em;
}
.ns-hero__title-line { display: block; }
.ns-hero__title-line--accent {
	background: linear-gradient(90deg, #5fbce6 0%, #cfe9f4 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.ns-hero__tagline {
	margin: 0 0 24px; font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 700;
	line-height: 1.2; letter-spacing: -0.01em;
}
.ns-hero__tagline-accent {
	background: linear-gradient(90deg, #5fbce6 0%, #cfe9f4 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.ns-hero__sub {
	font-size: clamp(1.05rem, 1.5vw, 1.22rem); color: rgba(255,255,255,.88);
	max-width: 640px; margin: 0 0 36px; line-height: 1.7;
}
.ns-hero__cta {
	display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 48px;
}
.ns-hero__cta .ns-btn--ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.ns-hero__cta .ns-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); color: #fff; }

.ns-hero__badges {
	list-style: none; display: flex; flex-wrap: wrap; gap: 14px;
}
.ns-hero__badges li {
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.16);
	backdrop-filter: blur(8px);
	padding: 14px 18px; border-radius: 14px;
	display: flex; flex-direction: column; gap: 4px;
	min-width: 200px;
}
.ns-badge__hl { font-weight: 700; color: #fff; font-size: .98rem; }
.ns-badge__cap { color: rgba(255,255,255,.7); font-size: .85rem; }

.ns-hero__scroll {
	position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	color: rgba(255,255,255,.7); font-size: .75rem; letter-spacing: .25em;
}
.ns-hero__scroll span {
	width: 1px; height: 56px; background: rgba(255,255,255,.4);
	position: relative; overflow: hidden;
}
.ns-hero__scroll span::after {
	content: ''; position: absolute; left: 0; right: 0; top: -100%; height: 100%;
	background: linear-gradient(180deg, transparent, #fff);
	animation: ns-scroll-line 1.8s ease-in-out infinite;
}
@keyframes ns-scroll-line { from { top: -100%; } to { top: 100%; } }

/* Hero variant: rendered as second section (Stage 5.2 reorder).
   Releases the "above-the-fold" assumption — shorter min-height, no top scroll cue,
   softer top overlay so it transitions cleanly out of the portfolio grid above.    */
.ns-hero--inline {
	min-height: clamp(520px, 70vh, 720px);
	padding-top: clamp(56px, 8vw, 96px);
	padding-bottom: clamp(72px, 10vw, 120px);
}
.ns-hero--inline .ns-hero__overlay {
	background:
		linear-gradient(135deg, rgba(5, 46, 68, .9) 0%, rgba(5, 46, 68, .58) 60%, rgba(5, 46, 68, .3) 100%),
		linear-gradient(180deg, rgba(5, 46, 68, .25) 0%, transparent 18%);
}

/* ---------- N-SEO Portfolio Grid ---------- */
.ns-portfolio { background: var(--ns-bg-50); }
/* Lead variant: rendered as the first section right under the sticky header.
   Slightly larger top padding + warm intro band so it doesn't read as a sub-section.   */
.ns-portfolio--lead {
	padding-top: clamp(72px, 9vw, 120px);
	background:
		linear-gradient(180deg, #fff 0%, var(--ns-bg-50) 56%, var(--ns-bg-50) 100%);
}
.ns-portfolio--lead .ns-section__head { margin-bottom: 28px; }
.ns-portfolio__grid {
	list-style: none;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
@media (max-width: 1100px) { .ns-portfolio__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .ns-portfolio__grid { grid-template-columns: repeat(2, 1fr); } }
.ns-portfolio__item { }
.ns-portfolio__link {
	display: block; background: #fff; border-radius: var(--ns-radius-md);
	overflow: hidden; box-shadow: var(--ns-shadow-sm);
	transition: transform .35s var(--ns-easing), box-shadow .35s var(--ns-easing);
}
.ns-portfolio__link:hover { transform: translateY(-4px); box-shadow: var(--ns-shadow-md); }
.ns-portfolio__thumb {
	aspect-ratio: 4 / 3; overflow: hidden; background: var(--ns-bg-200);
}
.ns-portfolio__thumb img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .6s var(--ns-easing);
}
.ns-portfolio__link:hover .ns-portfolio__thumb img { transform: scale(1.06); }
.ns-portfolio__meta { padding: 14px 16px 18px; }
.ns-portfolio__num {
	font-size: .72rem; font-weight: 700; letter-spacing: .15em;
	color: var(--ns-primary-700);
}
.ns-portfolio__name {
	font-size: .98rem; font-weight: 600; color: var(--ns-ink-900);
	margin: 4px 0 0; line-height: 1.4;
}

/* ---------- Stats counters ---------- */
.ns-stats {
	background: linear-gradient(180deg, var(--ns-bg-50) 0%, #fff 100%);
}
.ns-stats__grid {
	list-style: none;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
@media (max-width: 768px) { .ns-stats__grid { grid-template-columns: repeat(2, 1fr); } }
.ns-stats__item {
	background: #fff; padding: 36px 24px;
	border-radius: var(--ns-radius-md);
	border: 1px solid var(--ns-border-100);
	text-align: center;
	transition: transform .35s var(--ns-easing), box-shadow .35s var(--ns-easing);
}
.ns-stats__item:hover { transform: translateY(-4px); box-shadow: var(--ns-shadow-md); border-color: var(--ns-primary-500); }
.ns-stats__num {
	display: block; font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 800;
	color: var(--ns-primary-700); letter-spacing: -.04em;
	font-feature-settings: 'tnum';
}
.ns-stats__label {
	display: block; font-size: .92rem; color: var(--ns-ink-500); margin-top: 6px;
}

/* ---------- Services grid (cards) ---------- */
.ns-services { background: #fff; }
.ns-services__grid {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
}
@media (max-width: 760px) { .ns-services__grid { grid-template-columns: 1fr; } }
.ns-service-card {
	display: block; background: #fff;
	border: 1px solid var(--ns-border-100);
	border-radius: var(--ns-radius-lg);
	overflow: hidden;
	transition: transform .4s var(--ns-easing), box-shadow .4s var(--ns-easing), border-color .25s var(--ns-easing);
}
.ns-service-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--ns-shadow-lg);
	border-color: var(--ns-primary-500);
}
.ns-service-card__thumb { aspect-ratio: 16 / 10; background: var(--ns-bg-200); overflow: hidden; }
.ns-service-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ns-easing); }
.ns-service-card:hover .ns-service-card__thumb img { transform: scale(1.06); }
.ns-service-card__body { padding: 28px 28px 32px; }
.ns-service-card__num {
	display: inline-block; font-size: .78rem; font-weight: 700;
	letter-spacing: .2em; color: var(--ns-primary-700);
	padding: 4px 10px; border-radius: 999px;
	background: rgba(13, 110, 154, .08);
	margin-bottom: 12px;
}
.ns-service-card__title { margin: 0 0 8px; font-size: 1.35rem; }
.ns-service-card__desc  { color: var(--ns-ink-500); margin: 0 0 14px; }
.ns-service-card__more  { color: var(--ns-primary-700); font-weight: 600; font-size: .95rem; }

/* ---------- Process ---------- */
.ns-process { background: var(--ns-bg-50); }
.ns-process__steps {
	list-style: none;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
	counter-reset: step;
}
@media (max-width: 900px) { .ns-process__steps { grid-template-columns: repeat(2, 1fr); } }
.ns-process__step {
	background: #fff; border: 1px solid var(--ns-border-100);
	border-radius: var(--ns-radius-md);
	padding: 32px 26px;
	position: relative;
	transition: transform .35s var(--ns-easing), box-shadow .35s var(--ns-easing);
}
.ns-process__step:hover { transform: translateY(-4px); box-shadow: var(--ns-shadow-md); }
.ns-process__num {
	font-size: 2rem; font-weight: 800; color: var(--ns-primary-500);
	letter-spacing: -.04em; line-height: 1;
}
.ns-process__step h3 { margin: 14px 0 8px; font-size: 1.15rem; }
.ns-process__step p { color: var(--ns-ink-500); margin: 0; font-size: .95rem; }

/* ---------- FAQ ---------- */
.ns-faq { background: #fff; }
.ns-faq__list { display: flex; flex-direction: column; gap: 12px; }
.ns-faq__item {
	background: var(--ns-bg-50);
	border: 1px solid var(--ns-border-100);
	border-radius: var(--ns-radius-md);
	transition: border-color .25s var(--ns-easing), box-shadow .25s var(--ns-easing);
}
.ns-faq__item[open] { border-color: var(--ns-primary-500); box-shadow: var(--ns-shadow-sm); background: #fff; }
.ns-faq__item summary {
	cursor: pointer; padding: 22px 56px 22px 26px;
	font-weight: 600; color: var(--ns-ink-900);
	position: relative; list-style: none;
	font-size: 1.02rem; line-height: 1.5;
}
.ns-faq__item summary::-webkit-details-marker { display: none; }
.ns-faq__item summary::after {
	content: '+'; position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
	width: 28px; height: 28px; border-radius: 50%;
	background: var(--ns-primary-700); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 1.2rem; line-height: 1;
	transition: transform .3s var(--ns-easing), background .25s var(--ns-easing);
}
.ns-faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); background: var(--ns-accent-600); }
.ns-faq__a {
	padding: 0 26px 24px;
	color: var(--ns-ink-500); line-height: 1.75;
}

/* ---------- CTA section ---------- */
.ns-cta {
	background: linear-gradient(135deg, var(--ns-primary-900) 0%, var(--ns-primary-700) 100%);
	color: #fff;
	text-align: center;
	position: relative; overflow: hidden;
}
.ns-cta::before {
	content: ''; position: absolute; inset: 0;
	background: radial-gradient(circle at 20% 80%, rgba(245, 158, 11, .25), transparent 50%),
				radial-gradient(circle at 80% 20%, rgba(95, 188, 230, .2), transparent 50%);
	pointer-events: none;
}
.ns-cta .ns-container { position: relative; }
.ns-cta__title { color: #fff; margin: 0 0 16px; font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.ns-cta__sub { color: rgba(255,255,255,.85); margin: 0 0 32px; font-size: 1.05rem; }
.ns-cta .ns-btn--primary { background: var(--ns-accent-500); color: var(--ns-ink-900); }
.ns-cta .ns-btn--primary:hover { background: #fff; color: var(--ns-primary-900); transform: translateY(-2px); }

/* ---------- Page hero (sub pages) ---------- */
.ns-page-hero { padding: 96px 0 64px; background: var(--ns-bg-50); }
.ns-page-hero--with-img {
	position: relative; min-height: 460px; padding: 100px 0 80px;
	color: #fff; overflow: hidden; isolation: isolate;
}
.ns-page-hero__media { position: absolute; inset: 0; z-index: -1; background: var(--ns-primary-900); }
.ns-page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.ns-page-hero__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(135deg, rgba(5,46,68,.85), rgba(5,46,68,.55));
}
.ns-page-hero--with-img .ns-page-hero__media { z-index: -1; }
.ns-page-hero__inner { position: relative; }
.ns-page-hero--with-img * { color: inherit; }
.ns-page-hero--with-img .ns-page-hero__title,
.ns-page-hero--with-img .ns-breadcrumb a,
.ns-page-hero--with-img .ns-breadcrumb span { color: #fff; }
.ns-page-hero--with-img .ns-page-hero__sub { color: rgba(255,255,255,.85); }
.ns-page-hero__eyebrow {
	display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
	padding: 6px 14px; border-radius: 999px;
	background: rgba(13, 110, 154, .1); color: var(--ns-primary-700);
	margin-bottom: 16px;
}
.ns-page-hero--with-img .ns-page-hero__eyebrow { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.2); }
.ns-page-hero__title { margin: 0 0 18px; font-size: clamp(2rem, 4.5vw, 3.4rem); }
.ns-page-hero__sub { font-size: 1.1rem; max-width: 720px; color: var(--ns-ink-500); margin: 0 0 24px; }

/* ---------- Breadcrumb ---------- */
.ns-breadcrumb { margin-bottom: 18px; }
.ns-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; font-size: .88rem; color: var(--ns-ink-500); }
.ns-breadcrumb li::after { content: '/'; margin-left: 6px; color: var(--ns-ink-300); }
.ns-breadcrumb li:last-child::after { display: none; }
.ns-breadcrumb a { color: var(--ns-ink-500); text-decoration: none; }
.ns-breadcrumb a:hover { color: var(--ns-primary-700); }
.ns-breadcrumb [aria-current="page"] { color: var(--ns-ink-900); font-weight: 600; }

/* ---------- Feature grid (service-child) ---------- */
.ns-feature__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .ns-feature__grid { grid-template-columns: 1fr; } }
.ns-feature__card {
	background: #fff; border: 1px solid var(--ns-border-100); border-radius: var(--ns-radius-md);
	padding: 36px 28px;
	transition: transform .35s var(--ns-easing), box-shadow .35s var(--ns-easing), border-color .25s var(--ns-easing);
}
.ns-feature__card:hover { transform: translateY(-4px); box-shadow: var(--ns-shadow-md); border-color: var(--ns-primary-500); }
.ns-feature__num { font-size: 1.8rem; font-weight: 800; color: var(--ns-primary-500); }
.ns-feature__title { margin: 14px 0 10px; font-size: 1.25rem; }
.ns-feature__desc { color: var(--ns-ink-500); margin: 0; }

/* ---------- Strip (image triplet) ---------- */
.ns-strip { background: var(--ns-bg-50); padding-top: 0; }
.ns-strip__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 800px) { .ns-strip__grid { grid-template-columns: 1fr; } }
.ns-strip__item {
	margin: 0; aspect-ratio: 4/3; overflow: hidden;
	border-radius: var(--ns-radius-md); background: var(--ns-bg-200);
	box-shadow: var(--ns-shadow-sm);
}
.ns-strip__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ns-easing); }
.ns-strip__item:hover img { transform: scale(1.04); }

/* ---------- Gallery ---------- */
.ns-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .ns-gallery__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ns-gallery__grid { grid-template-columns: 1fr; } }
.ns-gallery__item {
	display: block; background: #fff;
	border: 1px solid var(--ns-border-100); border-radius: var(--ns-radius-md);
	overflow: hidden;
	transition: transform .35s var(--ns-easing), box-shadow .35s var(--ns-easing);
}
.ns-gallery__item:hover { transform: translateY(-5px); box-shadow: var(--ns-shadow-lg); }
.ns-gallery__thumb { aspect-ratio: 4/3; overflow: hidden; background: var(--ns-bg-200); }
.ns-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ns-easing); }
.ns-gallery__item:hover .ns-gallery__thumb img { transform: scale(1.06); }
.ns-gallery__meta { padding: 18px 22px 24px; }
.ns-gallery__num { font-size: .78rem; font-weight: 700; letter-spacing: .2em; color: var(--ns-primary-700); }
.ns-gallery__title { font-size: 1.1rem; margin: 6px 0 10px; color: var(--ns-ink-900); }
.ns-gallery__more { color: var(--ns-primary-700); font-weight: 600; font-size: .9rem; }

/* ---------- Case study ---------- */
.ns-case__dl { display: grid; gap: 18px; margin: 0 0 48px; }
.ns-case__row {
	display: grid; grid-template-columns: 140px 1fr; gap: 24px;
	padding: 22px; background: var(--ns-bg-50);
	border-radius: var(--ns-radius-md); border-left: 4px solid var(--ns-primary-500);
}
@media (max-width: 700px) { .ns-case__row { grid-template-columns: 1fr; gap: 6px; } }
.ns-case__row dt { font-weight: 700; color: var(--ns-primary-700); margin: 0; }
.ns-case__row dd { margin: 0; color: var(--ns-ink-700); line-height: 1.7; }
.ns-case__images { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 700px) { .ns-case__images { grid-template-columns: 1fr; } }
.ns-case__img { margin: 0; aspect-ratio: 4/3; border-radius: var(--ns-radius-md); overflow: hidden; box-shadow: var(--ns-shadow-sm); }
.ns-case__img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Consult (v2.1: tel/sms 카드 + 정보 그리드) ---------- */
/* 1. 컨택트 카드 그리드 — 2열 (모바일 1열) */
.ns-consult__grid--contact {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
	margin-bottom: 32px;
}
@media (max-width: 700px) { .ns-consult__grid--contact { grid-template-columns: 1fr; } }

/* 2. 컨택트 카드 — phone(다크) + sms(액센트) 시각적 형제 */
.ns-consult__card {
	display: flex; flex-direction: column; gap: 6px;
	padding: 32px 28px;
	border-radius: var(--ns-radius-asym-diag);
	color: #fff;
	position: relative; overflow: hidden;
	transition: transform .28s var(--ns-easing), box-shadow .28s var(--ns-easing);
	box-shadow: var(--ns-shadow-md);
}
.ns-consult__card:hover {
	transform: translateY(-4px);
	box-shadow: var(--ns-shadow-lg);
	color: #fff;
}
.ns-consult__card--phone {
	background: linear-gradient(135deg, var(--ns-primary-900) 0%, var(--ns-primary-700) 100%);
}
.ns-consult__card--sms {
	background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%);
}
.ns-consult__card::before {
	content: ''; position: absolute; right: -40px; bottom: -40px; width: 180px; height: 180px;
	background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%);
	border-radius: 50%; pointer-events: none;
}
.ns-consult__card-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px;
	background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
	border-radius: var(--ns-radius-sm);
	margin-bottom: 8px; color: #fff;
}
.ns-consult__card-eyebrow {
	font-size: .82rem; font-weight: 600; letter-spacing: .04em;
	color: rgba(255,255,255,.78); text-transform: uppercase;
}
.ns-consult__card-title {
	font-size: 1.25rem; font-weight: 700; color: #fff; margin-top: 2px;
}
.ns-consult__card-num {
	font-size: clamp(1.6rem, 3.4vw, 2rem);
	font-weight: 800; letter-spacing: -.02em;
	color: #fff; margin: 4px 0 14px;
	font-feature-settings: 'tnum';
}
.ns-consult__card-cta {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 16px;
	background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.32);
	border-radius: var(--ns-radius-pill);
	font-size: .92rem; font-weight: 600;
	align-self: flex-start;
	transition: background .2s var(--ns-easing);
}
.ns-consult__card:hover .ns-consult__card-cta { background: rgba(255,255,255,.28); }
.ns-consult__card-note {
	font-size: .78rem; color: rgba(255,255,255,.7);
	margin-top: 10px;
}

/* 3. 운영정보 + 사업자 정보 — 2열 */
.ns-consult__info-grid {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
}
@media (max-width: 700px) { .ns-consult__info-grid { grid-template-columns: 1fr; } }
.ns-consult__info-card {
	background: var(--ns-bg-50, #f8fafc);
	border: 1px solid var(--ns-border-100);
	border-radius: var(--ns-radius-lg);
	padding: 28px 26px;
}
.ns-consult__info-h {
	margin: 0 0 14px; font-size: 1.05rem; font-weight: 700;
	color: var(--ns-ink-900);
	padding-bottom: 10px;
	border-bottom: 2px solid var(--ns-primary-500);
	display: inline-block;
}
.ns-consult__hours { list-style: none; padding: 0; margin: 0; }
.ns-consult__hours li {
	padding: 10px 0; border-bottom: 1px solid var(--ns-border-100);
	font-size: .92rem; color: var(--ns-ink-700); line-height: 1.55;
}
.ns-consult__hours li:last-child { border-bottom: 0; padding-bottom: 0; }
.ns-consult__hours strong {
	display: inline-block; min-width: 72px;
	color: var(--ns-ink-900); font-weight: 700; margin-right: 8px;
}
.ns-consult__addr p {
	margin: 0 0 10px;
	font-size: .92rem; color: var(--ns-ink-700); line-height: 1.55;
}
.ns-consult__addr p:last-child { margin-bottom: 0; }
.ns-consult__addr strong {
	display: inline-block; min-width: 86px;
	color: var(--ns-ink-900); font-weight: 700; margin-right: 6px;
}

/* ---------- Sitemap ---------- */
.ns-sitemap__list { list-style: none; }
.ns-sitemap__item { padding: 14px 0; border-bottom: 1px solid var(--ns-border-100); }
.ns-sitemap__item--child { padding-left: 24px; }
.ns-sitemap__item--child::before { content: '└ '; color: var(--ns-ink-300); }
.ns-sitemap__item a { color: var(--ns-ink-700); font-weight: 500; }
.ns-sitemap__item a:hover { color: var(--ns-primary-700); }

/* ---------- Footer ---------- */
.ns-footer { background: var(--ns-ink-900); color: rgba(255,255,255,.75); padding: 56px 0 28px; margin-top: 0; }
.ns-footer__inner { max-width: var(--ns-container); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr auto; gap: 32px; }
@media (max-width: 720px) { .ns-footer__inner { grid-template-columns: 1fr; } }
.ns-footer__name { color: #fff; font-size: 1.2rem; font-weight: 800; margin-bottom: 8px; }
.ns-footer__addr { font-size: .92rem; line-height: 1.55; margin-bottom: 6px; }
.ns-footer__biz { font-size: .85rem; color: rgba(255,255,255,.55); }
.ns-footer__nav { display: flex; gap: 24px; align-items: flex-start; }
.ns-footer__nav a { color: rgba(255,255,255,.75); font-size: .92rem; }
.ns-footer__nav a:hover { color: #fff; }
.ns-footer__copy { max-width: var(--ns-container); margin: 32px auto 0; padding: 24px 24px 0; border-top: 1px solid rgba(255,255,255,.08); font-size: .82rem; color: rgba(255,255,255,.5); }

/* ---------- Floating + Mobile CTA ---------- */
.ns-floating-cta {
	position: fixed; bottom: 24px; right: 24px; z-index: 90;
	background: var(--ns-ink-900); color: #fff;
	padding: 14px 22px; border-radius: 999px;
	display: inline-flex; align-items: center; gap: 8px;
	font-weight: 600;
	box-shadow: 0 8px 24px rgba(15,29,46,.3);
	transition: transform .3s var(--ns-easing), background .3s var(--ns-easing);
}
.ns-floating-cta:hover { transform: translateY(-3px) scale(1.03); background: var(--ns-primary-700); color: #fff; }
.ns-floating-cta__icon { font-size: 1.1rem; }
@media (max-width: 720px) { .ns-floating-cta { display: none; } }

.ns-mobile-cta {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
	display: none;
	background: rgba(255,255,255,.96);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--ns-border-100);
	padding: 10px 12px;
	gap: 8px;
}
.ns-mobile-cta__btn {
	flex: 1; text-align: center; padding: 14px 12px; border-radius: 12px;
	font-weight: 700; font-size: .98rem;
	transition: transform .2s var(--ns-easing), background .2s var(--ns-easing);
}
.ns-mobile-cta__btn--secondary { background: var(--ns-bg-100); color: var(--ns-ink-900); }
.ns-mobile-cta__btn--primary   { background: var(--ns-ink-900);  color: #fff; }
.ns-mobile-cta__btn:active { transform: scale(.97); }
@media (max-width: 720px) { .ns-mobile-cta { display: flex; } body { padding-bottom: 76px; } }

/* ================================================================== */
/*  Scroll animations (HCD: Feedback) — IntersectionObserver triggered  */
/* ================================================================== */
.ns-anim-fade,
.ns-anim-up,
.ns-anim-stagger {
	opacity: 0;
	will-change: opacity, transform;
	transition: opacity var(--ns-dur-2) var(--ns-easing), transform var(--ns-dur-2) var(--ns-easing);
}
.ns-anim-up { transform: translate3d(0, 32px, 0); }
.ns-anim-stagger { transform: translate3d(0, 24px, 0); }
.is-in-view.ns-anim-fade,
.is-in-view.ns-anim-up,
.is-in-view.ns-anim-stagger {
	opacity: 1; transform: translate3d(0, 0, 0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.ns-anim-fade, .ns-anim-up, .ns-anim-stagger {
		opacity: 1 !important; transform: none !important; transition: none !important;
	}
	.ns-hero__bg img { animation: none !important; }
	.ns-hero__scroll span::after { animation: none !important; }
	html { scroll-behavior: auto; }
}

/* Focus-visible global treatment */
:focus-visible { outline: 3px solid var(--ns-accent-500); outline-offset: 3px; border-radius: 4px; }

/* ================================================================== */
/*  STAGE 5.1 — DESIGN VARIATION PASS                                   */
/*  (R값·카드 패턴 베리에이션. Premium 톤 유지·DOM 증가 0)              */
/*                                                                      */
/*  R값 매핑 (역할 → 값)                                                */
/*    pill (999px)  → primary CTA, nav cta, eyebrow chip                */
/*    xl (28px)     → gallery bento, cta-block large surface            */
/*    lg (20px)     → portfolio squircle, service card, consult info    */
/*    asym-tl       → service card (top-left big = "여기서 시작")        */
/*    md (12px)     → process step, base                                */
/*    sm (4px)      → feature outline card (sharp/architectural)         */
/*    xs (2px)      → faq item (정보 누적 surface, 거의 sharp)            */
/*    0px           → case row (neo-brutalist edge)                     */
/* ================================================================== */

/* ---- Portfolio: 풀블리드 이미지 + slide-up overlay -------------- */
.ns-portfolio__link {
	border-radius: var(--ns-radius-lg);
	box-shadow: 0 1px 2px rgba(15, 29, 46, .04);
	background: var(--ns-ink-900);
	position: relative;
	isolation: isolate;
}
.ns-portfolio__link:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(5, 46, 68, .22);
}
.ns-portfolio__thumb {
	aspect-ratio: 4 / 3.4;
	border-radius: 0;
}
.ns-portfolio__thumb img {
	transition: transform .8s var(--ns-easing), filter .5s var(--ns-easing);
	filter: saturate(.96);
}
.ns-portfolio__link:hover .ns-portfolio__thumb img {
	transform: scale(1.08);
	filter: saturate(1.05);
}
.ns-portfolio__meta {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 18px 18px 18px;
	background: linear-gradient(180deg, rgba(5, 46, 68, 0) 0%, rgba(5, 46, 68, .92) 70%);
	color: #fff;
	transform: translate3d(0, 12px, 0);
	transition: transform .45s var(--ns-easing);
}
.ns-portfolio__link:hover .ns-portfolio__meta { transform: translate3d(0, 0, 0); }
.ns-portfolio__num {
	color: var(--ns-accent-500);
	font-size: .7rem; letter-spacing: .22em;
}
.ns-portfolio__name { color: #fff; font-size: .96rem; }

/* ---- Stats: glass-morphism + 개별 그라디언트 backdrop ------------ */
.ns-stats { background: linear-gradient(180deg, var(--ns-bg-100) 0%, #fff 100%); }
.ns-stats__grid { gap: 14px; }
.ns-stats__item {
	border-radius: var(--ns-radius-sm);
	border: 1px solid var(--ns-border-100);
	background: rgba(255, 255, 255, .55);
	backdrop-filter: saturate(140%) blur(8px);
	-webkit-backdrop-filter: saturate(140%) blur(8px);
	padding: 38px 20px 32px;
	position: relative; overflow: hidden;
	text-align: left;
}
.ns-stats__item::before {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(135deg, rgba(13, 110, 154, .08), rgba(245, 158, 11, .04) 70%, transparent);
	opacity: .8;
	transition: opacity .35s var(--ns-easing);
	pointer-events: none;
}
.ns-stats__item:nth-child(2)::before { background: linear-gradient(135deg, rgba(26, 140, 193, .12), transparent 70%); }
.ns-stats__item:nth-child(3)::before { background: linear-gradient(135deg, rgba(217, 119, 6, .10), transparent 70%); }
.ns-stats__item:nth-child(4)::before { background: linear-gradient(135deg, rgba(5, 46, 68, .10), transparent 70%); }
.ns-stats__item::after {
	content: ''; position: absolute; left: 20px; top: 22px;
	width: 28px; height: 2px; background: var(--ns-accent-500);
}
.ns-stats__item:hover {
	transform: translateY(-3px);
	border-color: var(--ns-primary-500);
	box-shadow: 0 14px 32px rgba(13, 110, 154, .14);
}
.ns-stats__item:hover::before { opacity: 1; }
.ns-stats__num {
	font-size: clamp(2.2rem, 3.6vw, 3rem);
	background: linear-gradient(180deg, var(--ns-primary-700) 0%, var(--ns-primary-900) 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	margin-top: 14px;
}
.ns-stats__label { font-size: .9rem; }

/* ---- Services: 좌측 액센트 바 + 비대칭 R (top-left = entry signifier) - */
.ns-service-card {
	border-radius: var(--ns-radius-asym-tl);
	border: 1px solid var(--ns-border-100);
	position: relative; overflow: hidden;
}
.ns-service-card::before {
	content: ''; position: absolute; left: 0; top: 0; bottom: 0;
	width: 4px; background: linear-gradient(180deg, var(--ns-primary-500), var(--ns-accent-500));
	transform: scaleY(0); transform-origin: top;
	transition: transform .55s var(--ns-easing);
	z-index: 2;
}
.ns-service-card:hover::before { transform: scaleY(1); }
.ns-service-card:hover {
	transform: translateY(-6px);
	border-color: var(--ns-primary-500);
	box-shadow: 0 22px 48px rgba(5, 46, 68, .14);
}
.ns-service-card__num {
	background: var(--ns-ink-900);
	color: #fff !important;
	border-radius: var(--ns-radius-xs);
	padding: 5px 10px;
	letter-spacing: .22em;
}
.ns-service-card__more {
	display: inline-flex; align-items: center; gap: 6px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--ns-primary-700);
	transition: gap .25s var(--ns-easing), border-color .25s var(--ns-easing);
}
.ns-service-card:hover .ns-service-card__more {
	gap: 12px;
	border-color: var(--ns-accent-600);
}

/* ---- Feature (service-child): outline-only + 큰 번호 + 액센트 슬라이드 - */
.ns-feature__card {
	background: #fff;
	border: 1.5px solid var(--ns-border-100);
	border-radius: var(--ns-radius-sm);
	padding: 36px 28px;
	position: relative; overflow: hidden;
	box-shadow: none;
}
.ns-feature__card::after {
	content: ''; position: absolute; left: 0; right: 100%; bottom: 0;
	height: 3px; background: var(--ns-accent-500);
	transition: right .55s var(--ns-easing);
}
.ns-feature__card:hover {
	transform: translateY(-2px);
	border-color: var(--ns-primary-700);
	box-shadow: 0 8px 24px rgba(13, 110, 154, .08);
}
.ns-feature__card:hover::after { right: 0; }
.ns-feature__num {
	display: inline-block;
	font-size: 2.6rem; font-weight: 800; line-height: 1;
	color: var(--ns-primary-900);
	letter-spacing: -.05em;
	padding-right: 12px;
	border-right: 2px solid var(--ns-accent-500);
	margin-right: 0;
}
.ns-feature__title { margin-top: 18px; }

/* ---- Process: asymmetric R + 좌측 굵은 step bar ----------------- */
.ns-process__step {
	border-radius: 4px 4px 16px 4px;
	background: #fff;
	padding: 36px 26px 30px;
	position: relative; overflow: hidden;
}
.ns-process__step::before {
	content: ''; position: absolute; left: 0; top: 0;
	width: 56px; height: 4px;
	background: var(--ns-primary-700);
	transition: width .5s var(--ns-easing), background .25s var(--ns-easing);
}
.ns-process__step:hover::before { width: 100%; background: linear-gradient(90deg, var(--ns-primary-700), var(--ns-accent-500)); }
.ns-process__num {
	font-size: 2.4rem;
	background: linear-gradient(180deg, var(--ns-primary-700), var(--ns-primary-900));
	-webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- FAQ: outline-only + 좌측 액센트 보더 + 호버 인덴트 ----------- */
.ns-faq__list { gap: 0; }
.ns-faq__item {
	background: transparent;
	border: 0;
	border-top: 1px solid var(--ns-border-100);
	border-radius: 0;
	border-left: 3px solid transparent;
	transition: border-left-color .3s var(--ns-easing), background .25s var(--ns-easing), padding-left .35s var(--ns-easing);
	padding-left: 0;
}
.ns-faq__list .ns-faq__item:last-child { border-bottom: 1px solid var(--ns-border-100); }
.ns-faq__item:hover {
	border-left-color: var(--ns-accent-500);
	background: var(--ns-bg-50);
	padding-left: 8px;
}
.ns-faq__item[open] {
	border-left-color: var(--ns-primary-700);
	background: var(--ns-bg-50);
	box-shadow: none;
	padding-left: 8px;
}
.ns-faq__item summary { padding: 22px 56px 22px 22px; }
.ns-faq__item summary::after {
	background: transparent;
	color: var(--ns-primary-700);
	border: 1.5px solid var(--ns-primary-700);
	font-weight: 400;
	border-radius: 0;
	font-size: 1.1rem;
}
.ns-faq__item[open] summary::after {
	background: var(--ns-accent-600); color: #fff;
	border-color: var(--ns-accent-600);
}
.ns-faq__a { padding: 0 22px 24px; }

/* ---- Gallery: bento staggered + offset shadow + squircle --------- */
.ns-gallery__grid { gap: 28px; }
.ns-gallery__item {
	border-radius: var(--ns-radius-xl);
	border: 1px solid var(--ns-border-100);
	box-shadow: 8px 8px 0 var(--ns-bg-100);
	transition: transform .4s var(--ns-easing), box-shadow .4s var(--ns-easing), border-color .25s var(--ns-easing);
}
@media (min-width: 901px) {
	.ns-gallery__item:nth-child(2)  { transform: translateY(20px); }
	.ns-gallery__item:nth-child(4)  { transform: translateY(20px); }
	.ns-gallery__item:nth-child(2):hover  { transform: translateY(14px); }
	.ns-gallery__item:nth-child(4):hover  { transform: translateY(14px); }
}
.ns-gallery__item:hover {
	transform: translateY(-6px);
	border-color: var(--ns-primary-700);
	box-shadow: 14px 14px 0 var(--ns-primary-500);
}
@media (min-width: 901px) {
	.ns-gallery__item:nth-child(2):hover { transform: translateY(8px); box-shadow: 14px 14px 0 var(--ns-primary-500); }
	.ns-gallery__item:nth-child(4):hover { transform: translateY(8px); box-shadow: 14px 14px 0 var(--ns-primary-500); }
}
.ns-gallery__thumb { border-radius: var(--ns-radius-xl) var(--ns-radius-xl) 0 0; aspect-ratio: 4/3.2; }
.ns-gallery__num {
	display: inline-block;
	background: var(--ns-ink-900); color: #fff;
	padding: 4px 10px; border-radius: var(--ns-radius-xs);
	font-size: .72rem;
}
.ns-gallery__more {
	display: inline-flex; align-items: center; gap: 6px;
	padding-bottom: 3px;
	border-bottom: 1.5px solid var(--ns-accent-500);
	transition: gap .25s var(--ns-easing);
}
.ns-gallery__item:hover .ns-gallery__more { gap: 12px; }

/* ---- Case row: neo-brutalist ─ 굵은 좌보더 + offset shadow ------ */
.ns-case__row {
	border-radius: 0;
	border: 1.5px solid var(--ns-ink-900);
	border-left: 6px solid var(--ns-accent-600);
	background: #fff;
	box-shadow: 6px 6px 0 var(--ns-primary-900);
	padding: 24px 28px;
	transition: transform .35s var(--ns-easing), box-shadow .35s var(--ns-easing);
}
.ns-case__row:hover {
	transform: translate(-2px, -2px);
	box-shadow: 10px 10px 0 var(--ns-primary-900);
}
.ns-case__row dt {
	font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
	color: var(--ns-accent-600);
}
.ns-case__img {
	border-radius: var(--ns-radius-lg);
	box-shadow: 6px 6px 0 var(--ns-bg-200);
	transition: transform .35s var(--ns-easing), box-shadow .35s var(--ns-easing);
}
.ns-case__img:hover {
	transform: translate(-2px, -2px);
	box-shadow: 10px 10px 0 var(--ns-primary-500);
}

/* ---- CTA section: large diagonal squircle + offset highlight ----- */
.ns-cta {
	overflow: visible;
}
.ns-cta .ns-container {
	background: linear-gradient(135deg, var(--ns-primary-900) 0%, var(--ns-primary-700) 100%);
	border-radius: var(--ns-radius-asym-diag);
	padding: clamp(56px, 8vw, 88px) clamp(24px, 5vw, 56px);
	max-width: calc(var(--ns-container) - 48px);
	box-shadow: 14px 14px 0 var(--ns-accent-600);
	position: relative;
	overflow: hidden;
}
.ns-cta .ns-container::before {
	content: ''; position: absolute; inset: 0;
	background: radial-gradient(circle at 18% 80%, rgba(245, 158, 11, .28), transparent 50%),
				radial-gradient(circle at 82% 22%, rgba(95, 188, 230, .22), transparent 50%);
	pointer-events: none;
}
.ns-cta::before { display: none; } /* legacy gradient turned off, container 가 대신 처리 */
.ns-cta .ns-btn--primary {
	border-radius: var(--ns-radius-pill);
	background: var(--ns-accent-500);
	box-shadow: 0 6px 0 var(--ns-accent-600);
	transition: transform .25s var(--ns-easing), box-shadow .25s var(--ns-easing), background .25s var(--ns-easing);
}
.ns-cta .ns-btn--primary:hover {
	transform: translateY(-3px);
	box-shadow: 0 9px 0 var(--ns-accent-600);
	background: #fff;
	color: var(--ns-primary-900);
}
.ns-cta .ns-btn--primary:active {
	transform: translateY(2px);
	box-shadow: 0 1px 0 var(--ns-accent-600);
}
@media (max-width: 720px) {
	.ns-cta .ns-container {
		border-radius: var(--ns-radius-lg);
		box-shadow: 6px 6px 0 var(--ns-accent-600);
		padding: 48px 24px;
	}
}

/* ---- Hero badges: glass card → 미세 비대칭 R + 좌상단 점 ---------- */
.ns-hero__badges li {
	border-radius: 4px 14px 14px 14px;
	position: relative;
}
.ns-hero__badges li::before {
	content: ''; position: absolute; left: 12px; top: 12px;
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--ns-accent-500);
	box-shadow: 0 0 0 3px rgba(245, 158, 11, .25);
}
.ns-hero__badges li { padding-left: 28px; }

/* ---- Page hero eyebrow: chip → tag-cut shape ---------------------- */
.ns-page-hero__eyebrow,
.ns-section__eyebrow,
.ns-hero__eyebrow {
	border-radius: var(--ns-radius-xs);
	padding: 7px 14px 7px 18px;
	clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
}

/* ---- Strip image: subtle stagger height + radius variation -------- */
.ns-strip__grid { align-items: start; }
.ns-strip__item { border-radius: var(--ns-radius-lg); box-shadow: 4px 4px 0 var(--ns-bg-200); }
@media (min-width: 801px) {
	.ns-strip__item:nth-child(1) { aspect-ratio: 4/3.4; border-radius: var(--ns-radius-lg) 4px var(--ns-radius-lg) 4px; }
	.ns-strip__item:nth-child(2) { aspect-ratio: 4/3; margin-top: 24px; border-radius: 4px var(--ns-radius-lg) 4px var(--ns-radius-lg); }
	.ns-strip__item:nth-child(3) { aspect-ratio: 4/3.4; border-radius: var(--ns-radius-lg) 4px var(--ns-radius-lg) 4px; }
}

/* ---- Consult contact cards (v2.1): R 변형 — phone diag / sms tl --- */
.ns-consult__card--phone { border-radius: var(--ns-radius-asym-diag); }
.ns-consult__card--sms   { border-radius: var(--ns-radius-asym-tl); }
.ns-consult__info-card   { border-radius: var(--ns-radius-lg); }

/* ---- Buttons: secondary ghost 변형 — sharp r ---------------------- */
.ns-btn--ghost { border-radius: var(--ns-radius-sm); }
/* primary CTA stays pill */

/* ---- Mobile CTA buttons: 비대칭 R 로 좌·우 차별화 ----------------- */
.ns-mobile-cta__btn--secondary { border-radius: 14px 4px 14px 4px; }
.ns-mobile-cta__btn--primary   { border-radius: 4px 14px 4px 14px; }

/* ---- Floating CTA: pill 유지하되 inner glow 보강 ------------------ */
.ns-floating-cta {
	box-shadow: 0 8px 24px rgba(15, 29, 46, .3),
				inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* ---- Sitemap items: 좌측 액센트 인덴트 --------------------------- */
.ns-sitemap__item {
	border-bottom: 1px solid var(--ns-border-100);
	border-left: 2px solid transparent;
	padding: 14px 0 14px 12px;
	transition: border-left-color .25s var(--ns-easing), padding-left .25s var(--ns-easing), background .25s var(--ns-easing);
}
.ns-sitemap__item:hover {
	border-left-color: var(--ns-accent-500);
	padding-left: 18px;
	background: var(--ns-bg-50);
}

/* ================================================================== */
/*  Reduced motion overrides for new variations                         */
/* ================================================================== */
@media (prefers-reduced-motion: reduce) {
	.ns-portfolio__meta { transform: none !important; }
	.ns-service-card::before { transform: scaleY(1) !important; transition: none !important; }
	.ns-feature__card::after { right: 0 !important; transition: none !important; }
	.ns-process__step::before { transition: none !important; }
	.ns-gallery__item:nth-child(n) { transform: none !important; transition: none !important; }
	.ns-faq__item { transition: none !important; }
	.ns-bento__link:hover .ns-bento__thumb img { transform: none !important; }
	.ns-bento__link:hover .ns-bento__meta { transform: none !important; }
	.ns-bento__cell--title .ns-bento__cue::after { transition: none !important; }
}

/* ================================================================== */
/*  STAGE 5.3 — HOME PORTFOLIO BENTO REDESIGN                           */
/*  (gallery board feel · 1 brand title-card + 11 full-bleed images)    */
/* ================================================================== */

/* --- Bento grid container ------------------------------------------- */
.ns-portfolio--bento .ns-bento {
	list-style: none;
	display: grid;
	gap: 3px;                                /* tight gallery gutter */
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: repeat(4, minmax(150px, 19vw));
	grid-template-areas:
		"tile-title tile-title tile-a     tile-a     tile-b     tile-b"
		"tile-title tile-title tile-c     tile-c     tile-d     tile-d"
		"tile-e     tile-e     tile-f     tile-g     tile-h     tile-h"
		"tile-i     tile-i     tile-i     tile-j     tile-k     tile-k";
	margin: 0;
	padding: 0;
}
.ns-portfolio--bento .ns-bento__cell {
	grid-area: var(--ns-bento-area);
	position: relative;
	overflow: hidden;
	margin: 0;
}

/* --- Image card override (kills white shell from Stage 5.1) --------- */
.ns-portfolio--bento .ns-bento__link {
	display: block;
	position: relative;
	width: 100%; height: 100%;
	background: var(--ns-ink-900);
	border-radius: 0;
	box-shadow: none;
	overflow: hidden;
	transition: none;                        /* no translateY lift */
	isolation: isolate;
}
.ns-portfolio--bento .ns-bento__link:hover {
	transform: none;                         /* override Stage 5.1 lift */
	box-shadow: none;
}
.ns-portfolio--bento .ns-bento__thumb {
	aspect-ratio: auto;                      /* fill cell, not 4:3 */
	width: 100%; height: 100%;
	border-radius: 0;
	background: var(--ns-ink-900);
}
.ns-portfolio--bento .ns-bento__thumb img,
.ns-portfolio--bento .ns-bento__thumb picture {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	filter: saturate(.94) contrast(1.02);
	transition: transform .8s var(--ns-easing), filter .5s var(--ns-easing);
}
.ns-portfolio--bento .ns-bento__link:hover .ns-bento__thumb img {
	transform: scale(1.05);
	filter: saturate(1.05) contrast(1.05);
}

/* --- Bottom dim + headline (replaces white meta box) ---------------- */
.ns-portfolio--bento .ns-bento__meta {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: clamp(14px, 2vw, 22px) clamp(16px, 2.2vw, 26px);
	background: linear-gradient(
		180deg,
		rgba(5, 18, 28, 0)   0%,
		rgba(5, 18, 28, .35) 38%,
		rgba(5, 18, 28, .82) 78%,
		rgba(5, 18, 28, .94) 100%
	);
	color: #fff;
	transform: none;                         /* override Stage 5.1 slide-up */
	transition: background .35s var(--ns-easing);
	z-index: 1;
}
.ns-portfolio--bento .ns-bento__link:hover .ns-bento__meta {
	background: linear-gradient(
		180deg,
		rgba(5, 18, 28, .15) 0%,
		rgba(5, 18, 28, .55) 40%,
		rgba(5, 18, 28, .92) 80%,
		rgba(13, 110, 154, .96) 100%
	);
}
.ns-portfolio--bento .ns-bento__name {
	color: #fff;
	font-size: clamp(1rem, 1.35vw, 1.32rem);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -.015em;
	margin: 0;
	text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}

/* --- Brand title-card (no image, gradient + headline + chips) ------- */
.ns-portfolio--bento .ns-bento__cell--title {
	background:
		radial-gradient(120% 80% at 0% 0%, rgba(245, 158, 11, .12) 0%, transparent 55%),
		linear-gradient(140deg, var(--ns-primary-900) 0%, #073957 45%, var(--ns-primary-700) 100%);
}
.ns-portfolio--bento .ns-bento__link--title {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: clamp(10px, 1.4vw, 18px);
	padding: clamp(24px, 3.2vw, 44px);
	height: 100%;
	background: transparent;
	color: #fff;
}
.ns-portfolio--bento .ns-bento__link--title:hover {
	background: transparent;
}
.ns-portfolio--bento .ns-bento__link--title::before {
	content: "";
	position: absolute;
	top: clamp(20px, 2.6vw, 36px);
	left: clamp(24px, 3.2vw, 44px);
	width: 36px; height: 2px;
	background: var(--ns-accent-500);
	transform-origin: left;
	transition: transform .5s var(--ns-easing);
}
.ns-portfolio--bento .ns-bento__link--title:hover::before {
	transform: scaleX(1.6);
}
.ns-portfolio--bento .ns-bento__eyebrow {
	font-size: .72rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--ns-accent-500);
	font-weight: 700;
	display: inline-block;
}
.ns-portfolio--bento .ns-bento__title {
	color: #fff;
	font-size: clamp(1.55rem, 2.6vw, 2.4rem);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -.025em;
	margin: 0;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .25);
}
.ns-portfolio--bento .ns-bento__lede {
	color: rgba(255, 255, 255, .82);
	font-size: clamp(.86rem, 1vw, .98rem);
	line-height: 1.55;
	margin: 0;
	max-width: 32ch;
}
.ns-portfolio--bento .ns-bento__chips {
	list-style: none;
	display: flex; flex-wrap: wrap; gap: 6px;
	padding: 0; margin: 4px 0 0;
}
.ns-portfolio--bento .ns-bento__chips li {
	font-size: .72rem;
	letter-spacing: .04em;
	font-weight: 600;
	color: rgba(255, 255, 255, .9);
	padding: 5px 10px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	backdrop-filter: blur(4px);
}
.ns-portfolio--bento .ns-bento__cue {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ns-accent-500);
	margin-top: 6px;
	position: relative;
}
.ns-portfolio--bento .ns-bento__cue::after {
	content: "→";
	transition: transform .3s var(--ns-easing);
}
.ns-portfolio--bento .ns-bento__link--title:hover .ns-bento__cue::after {
	transform: translateX(6px);
}

/* --- Tablet (≤1100px): 4-col bento, simpler pattern ----------------- */
@media (max-width: 1100px) {
	.ns-portfolio--bento .ns-bento {
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(5, minmax(140px, 22vw));
		grid-template-areas:
			"tile-title tile-title tile-a     tile-b"
			"tile-title tile-title tile-c     tile-d"
			"tile-e     tile-f     tile-g     tile-g"
			"tile-h     tile-h     tile-i     tile-j"
			"tile-k     tile-k     tile-k     tile-k";
	}
}

/* --- Mobile (≤768px): 2-col, title full-width on top ---------------- */
@media (max-width: 768px) {
	.ns-portfolio--bento .ns-bento {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto repeat(6, minmax(150px, 38vw));
		grid-template-areas:
			"tile-title tile-title"
			"tile-a     tile-b"
			"tile-c     tile-d"
			"tile-e     tile-f"
			"tile-g     tile-h"
			"tile-i     tile-i"
			"tile-j     tile-k";
		gap: 2px;
	}
	.ns-portfolio--bento .ns-bento__cell--title {
		min-height: 48vw;
	}
	.ns-portfolio--bento .ns-bento__name {
		font-size: 1rem;
	}
	.ns-portfolio--bento .ns-bento__chips li { font-size: .68rem; padding: 4px 8px; }
}

/* --- Reduced motion : hold transforms --------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.ns-portfolio--bento .ns-bento__thumb img,
	.ns-portfolio--bento .ns-bento__meta {
		transition: none !important;
	}
}

/* ================================================================== */
/*  STAGE 5.4 — CATEGORY BADGE + BUTTON UNIFICATION                     */
/*                                                                      */
/*  1) NSEO 12 카드: 헤드라인 위에 카테고리 캡션 (서비스/시공사례/기타)   */
/*     주황색 강조, dim 그라디언트 위 가독성 보장 (text-shadow)          */
/*                                                                      */
/*  2) 버튼 R 통일 (옵션 C — 모든 액션 버튼 = pill 999px)                 */
/*     - 기존 ghost(4px), mobile-cta(asym 12/14px) 등 이질성 제거         */
/*     - 카드 surface (R-tier 9단계) 는 의도된 architectural variation 유지 */
/* ================================================================== */

/* ---- 1. Bento category badge (NSEO 12 카드) -------------------------- */
.ns-portfolio--bento .ns-bento__cat {
	display: inline-block;
	font-size: clamp(.68rem, .82vw, .78rem);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ns-accent-500);                   /* 주황 #f59e0b */
	margin: 0 0 6px;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .55);     /* dim 위 가독성 */
	line-height: 1;
}
/* 카테고리 톤 변형 — 사용자 요청대로 모두 주황 계열 유지 */
.ns-portfolio--bento .ns-bento__cat--service { color: var(--ns-accent-500); }  /* #f59e0b — 가장 밝은 주황 */
.ns-portfolio--bento .ns-bento__cat--case    { color: var(--ns-accent-600); }  /* #d97706 — 한 단 진한 주황 */
.ns-portfolio--bento .ns-bento__cat--etc     { color: var(--ns-accent-500); opacity: .82; }
/* 카드 hover 시 배지 살짝 강조 (subtle feedback) */
.ns-portfolio--bento .ns-bento__link:hover .ns-bento__cat {
	letter-spacing: .18em;
	transition: letter-spacing .35s var(--ns-easing);
}
/* 모바일에서 더 작게 */
@media (max-width: 768px) {
	.ns-portfolio--bento .ns-bento__cat {
		font-size: .66rem;
		letter-spacing: .12em;
		margin-bottom: 4px;
	}
}

/* ---- 2. Button radius unification (모두 pill) ------------------------ */
/* primary CTA는 이미 pill — 명시적으로 한 번 더 선언해 우선순위 확보 */
.ns-btn,
.ns-btn--primary,
.ns-btn--ghost,
.ns-btn--lg,
.ns-nav__cta,
.ns-floating-cta,
.ns-mobile-cta__btn,
.ns-mobile-cta__btn--primary,
.ns-mobile-cta__btn--secondary {
	border-radius: var(--ns-radius-pill) !important;   /* 999px 통일 */
}
/* CTA section primary 의 기존 pill override 도 consistency 유지 */
.ns-cta .ns-btn--primary { border-radius: var(--ns-radius-pill) !important; }

/* mobile bottom bar 도 좌우 동일 — 비대칭 제거 */
@media (max-width: 720px) {
	.ns-mobile-cta__btn--primary,
	.ns-mobile-cta__btn--secondary {
		border-radius: var(--ns-radius-pill) !important;
	}
}

/* reduce-motion: 카테고리 배지 hover letter-spacing transition 무력화 */
@media (prefers-reduced-motion: reduce) {
	.ns-portfolio--bento .ns-bento__link:hover .ns-bento__cat {
		letter-spacing: .14em;
		transition: none !important;
	}
}

/* ================================================================== */
/*  STAGE 5.5 — HERO REORDER + 3-ROW BENTO + COPY REFRESH + LINEBREAKS  */
/*                                                                      */
/*  요구 (사용자 5건):                                                   */
/*  1) Hero 를 다시 첫 섹션으로 (H1=누수가 페이지 첫 텍스트)               */
/*  2) Hero H1=누수 시각적 dominate, tagline → <h2> 승격                  */
/*  3) NSEO 그리드 4row → 3row 축소 (마지막 row 제거)                    */
/*  4) 종로 외벽 자리 다른 항목 (structure.json 에서 처리)                */
/*  5) NSEO 헤더 카피: eyebrow=아웃크래프트 시공사례, h2=포트폴리오        */
/*  6) 사이트 전반 의미단위 줄바꿈 (word-break 강제 분할 금지)            */
/* ================================================================== */

/* ---- 0. Korean wrap policy: never break inside a word ---------------- */
/* word-break:keep-all → 어절(띄어쓰기) 단위 wrap. 단어 중간 절단 금지.    */
/* overflow-wrap:break-word → 매우 긴 URL 등은 fallback 으로만 분할.       */
html, body { word-break: keep-all; overflow-wrap: break-word; }
.ns-hero__title,
.ns-hero__tagline,
.ns-hero__sub,
.ns-section__title,
.ns-section__sub,
.ns-page-hero__title,
.ns-page-hero__sub,
.ns-cta__title,
.ns-cta__sub,
.ns-bento__title,
.ns-bento__lede,
.ns-bento__name,
.ns-service-card__title,
.ns-service-card__desc,
.ns-feature__title,
.ns-feature__desc,
.ns-faq__a,
.ns-process__step h3,
.ns-process__step p,
.ns-case__row dd {
	word-break: keep-all !important;
	overflow-wrap: break-word;
	hyphens: none;
}
/* text-wrap: pretty 지원 브라우저는 자동으로 한 줄짜리 고아 단어 방지     */
@supports (text-wrap: pretty) {
	.ns-hero__sub,
	.ns-section__sub,
	.ns-page-hero__sub,
	.ns-bento__lede,
	.ns-faq__a,
	.ns-process__step p { text-wrap: pretty; }
}
@supports (text-wrap: balance) {
	.ns-hero__title,
	.ns-hero__tagline,
	.ns-section__title,
	.ns-page-hero__title,
	.ns-cta__title { text-wrap: balance; }
}

/* ---- 1. Responsive <br> classes ------------------------------------- */
/* ns-br--md: ≥768px 에서만 줄바꿈 (모바일에선 무시 — 이미 좁아서 자동 wrap) */
/* ns-br--sm: ≤767px 에서만 줄바꿈 (데스크톱에선 한 줄 유지)               */
.ns-br--md { display: none; }
@media (min-width: 768px) {
	.ns-br--md { display: inline; }
}
.ns-br--sm { display: inline; }
@media (min-width: 768px) {
	.ns-br--sm { display: none; }
}

/* ---- 2. HERO — second section (Stage 5.2 layout), H1 dominates by font-scale  */
/*  Stage 5.5.1: Hero 를 다시 NSEO 아래(두 번째 섹션)로 되돌림.            */
/*  Stage 5.5.2: 사용자 정정 — Hero 내부 텍스트 배치 이전 버전 복원.        */
/*    DOM 순서:  eyebrow → H1 → tagline(<p>) → sub → CTA → badges          */
/*    H1 폰트:   base clamp(3.4rem, 9vw, 6.4rem) (override 제거)            */
/*    tagline:   <p class="ns-hero__tagline"> (H2 승격 revert)              */
/*  → .ns-hero--inline 모디파이어 유지 (70vh, 톤다운 overlay).             */

/*  H1 = 누수 — base 스타일 (L235~) 그대로 사용. underline accent 만 유지. */
.ns-hero__title-line {
	display: inline-block;
	position: relative;
}
/* H1 골드 underline accent (누수 강조어) */
.ns-hero__title-line::after {
	content: "";
	position: absolute;
	left: 8%; right: 8%;
	bottom: -.04em;
	height: 6px;
	background: var(--ns-accent-500);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1.1s cubic-bezier(.22, 1, .36, 1) .35s;
	border-radius: 999px;
}
.ns-hero.is-in-view .ns-hero__title-line::after,
.ns-anim-section.is-in-view .ns-hero__title-line::after,
.ns-hero__title.is-in-view .ns-hero__title-line::after {
	transform: scaleX(1);
}

/*  Hero sub — 의미단위 줄바꿈 적용 후 line-height 살짝 좁힘 (유지)        */
.ns-hero__sub {
	line-height: 1.6;
	max-width: 56ch;
}

/* Stage 5.5.1: scroll indicator는 DOM 에서 제거됨. CSS 잔재 dormant 유지(.ns-hero__scroll). */

/* Mobile hero — base 폰트 스케일이 9vw clamp 이라 자동 축소. padding 만 정돈. */
@media (max-width: 767px) {
	.ns-hero--inline { padding-top: 64px; padding-bottom: 72px; min-height: clamp(520px, 78vh, 680px); }
}

/* ---- 3. NSEO 3-row bento grid (was 4-row) --------------------------- */
.ns-portfolio--3row .ns-bento {
	grid-template-rows: repeat(3, minmax(160px, 22vw)) !important;
	grid-template-areas:
		"tile-title tile-title tile-a     tile-a     tile-b     tile-b"
		"tile-title tile-title tile-c     tile-c     tile-d     tile-d"
		"tile-e     tile-e     tile-f     tile-g     tile-h     tile-h" !important;
}
@media (max-width: 1100px) {
	.ns-portfolio--3row .ns-bento {
		grid-template-rows: repeat(4, minmax(150px, 24vw)) !important;
		grid-template-areas:
			"tile-title tile-title tile-a     tile-b"
			"tile-title tile-title tile-c     tile-d"
			"tile-e     tile-f     tile-g     tile-g"
			"tile-h     tile-h     tile-h     tile-h" !important;
	}
}
@media (max-width: 768px) {
	.ns-portfolio--3row .ns-bento {
		grid-template-rows: auto repeat(4, minmax(150px, 38vw)) !important;
		grid-template-areas:
			"tile-title tile-title"
			"tile-a     tile-b"
			"tile-c     tile-d"
			"tile-e     tile-f"
			"tile-g     tile-h" !important;
	}
}

/* NSEO eyebrow 한국어 brand label — uppercase 해제 */
.ns-portfolio--3row .ns-section__eyebrow {
	text-transform: none;
	letter-spacing: .04em;
	font-size: .82rem;
	font-weight: 700;
	background: rgba(217, 119, 6, .1);  /* 약한 골드 톤 — 시공사례 카테고리 색과 호응 */
	color: var(--ns-accent-600);
}

/* NSEO H2 = "포트폴리오" — short word, more presence */
.ns-portfolio--3row .ns-section__title {
	font-size: clamp(2.2rem, 4.8vw, 3.4rem);
	letter-spacing: -.03em;
	margin-bottom: 14px;
}

/* ---- 4. CTA __sub line break density tweak --------------------------- */
.ns-cta__sub,
.ns-section__sub {
	line-height: 1.55;
}
.ns-hero__sub {
	line-height: 1.6;
}

/* ---- 5. Service card desc / feature desc / process p line-height ---- */
.ns-service-card__desc,
.ns-feature__desc,
.ns-process__step p,
.ns-faq__a,
.ns-case__row dd { line-height: 1.6; }

/* ---- 6. Page-hero sub (서비스/케이스/갤러리/콘설트) ----------------- */
.ns-page-hero__sub { line-height: 1.6; }
@media (min-width: 768px) {
	.ns-page-hero__sub { max-width: 56ch; }
}

/* ---- 7. Bento title-card title — softer line break readability ------ */
.ns-portfolio--bento .ns-bento__title { line-height: 1.22; }
.ns-portfolio--bento .ns-bento__lede  { line-height: 1.6; }

/* ---- 8. Reduce motion safety ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.ns-hero__title-line::after { transition: none !important; transform: scaleX(1) !important; }
}