/* ------------------------------------------------------------------
   next-t.co.kr 디자인 언어 정렬 테마
   본사(https://www.next-t.co.kr)에서 추출한 토큰을 seo.ai.kr 에 적용.
   텍스트/메타는 일절 건드리지 않고 표현(색·반경·타이포)만 조정한다.
   ------------------------------------------------------------------ */
:root{
  --nt-bg0:#0b1120;            /* 본사 최심층 배경 */
  --nt-bg1:#0d1526;            /* 섹션 배경 */
  --nt-card:rgba(17,26,46,.72);
  --nt-line:rgba(148,163,184,.14);
  --nt-tx:#e8edf6;             /* 본문 */
  --nt-mut:#94a3b8;            /* 보조 */
  --nt-green:#34d399;
  --nt-green-d:#10b981;
  --nt-grad:linear-gradient(135deg,#2563eb 0%,#7c3aed 55%,#0ea5e9 100%);
  --nt-r-btn:10px;             /* 본사 버튼 반경 */
  --nt-r-card:12px;            /* 본사 카드 반경(측정값 16px) 대비 각지게 조정 */
  --nt-r-pill:999px;
}

/* 1. 타이포 — 본사와 동일하게 영문/숫자는 Outfit, 한글은 Pretendard */
body{font-family:'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;}
h1,h2,h3,h4,.font-black,.font-extrabold{font-family:'Outfit','Pretendard','Pretendard Variable',sans-serif;}

/* 본사는 900 를 쓰지 않는다. 과한 굵기를 800 으로 낮춰 위계를 만든다 */
.font-black{font-weight:800;}
/* 자간이 과하게 좁아 뭉쳐 보이던 것을 본사 수준으로 되돌린다 */
.tracking-tightest{letter-spacing:-.02em !important;}

/* 2. 반경 — 64px(rounded-[4rem]) 는 본사 언어에 없다. 카드 16px 로 통일 */
.rounded-\[4rem\]{border-radius:var(--nt-r-card) !important;}
.rounded-3xl{border-radius:var(--nt-r-card) !important;}
.rounded-2xl{border-radius:12px !important;}
.rounded-xl{border-radius:10px !important;}

/* 버튼/링크형 CTA 는 본사 .btn 과 동일한 10px */
a.rounded-full[class*="px-"], button.rounded-full[class*="px-"]{border-radius:var(--nt-r-btn) !important;}
/* 배지·점 등 작은 필은 그대로 pill 유지 */
.rounded-full.w-1\.5,.rounded-full.h-1\.5,.inline-flex.rounded-full{border-radius:var(--nt-r-pill) !important;}

/* 3. 인터랙션 — 상시 확대는 싸구려로 보인다. 본사식 미세 상승으로 교체 */
.hover\:scale-105:hover{transform:translateY(-2px) !important;}
.transition-all{transition-duration:.15s !important;}

/* 4. 강조 — 본사 시그니처인 emerald 배지 */
.nt-eyebrow{
  color:var(--nt-green);
  background:rgba(16,185,129,.1);
  border:1px solid rgba(52,211,153,.35);
  border-radius:var(--nt-r-pill);
}

/* 5. 카드 표면 — 본사의 반투명 카드 + 얇은 테두리 */
.nt-surface{
  background:var(--nt-card);
  border:1px solid var(--nt-line);
  border-radius:var(--nt-r-card);
}

/* 6. 히어로 배경 — 외부 스톡 영상을 대체하는 CSS 그래픽
      (본사의 그라데이션 + 격자 결 + 흐르는 라인) */
.nt-hero-bg{
  position:absolute;inset:0;overflow:hidden;
  background:
    linear-gradient(to right, rgba(148,163,184,.07) 1px, transparent 1px) 0 0/64px 64px,
    linear-gradient(to bottom, rgba(148,163,184,.07) 1px, transparent 1px) 0 0/64px 64px,
    radial-gradient(1200px 600px at 15% -10%, rgba(37,99,235,.28) 0%, transparent 60%),
    radial-gradient(900px 500px at 85% 10%, rgba(124,58,237,.20) 0%, transparent 60%),
    radial-gradient(700px 500px at 50% 110%, rgba(16,185,129,.16) 0%, transparent 60%),
    var(--nt-bg0);
}
/* 흐르는 곡선 레이어 — 층마다 주기·속도·진행 방향을 달리해
   같은 각도로만 흐르던 단조로움을 없앤다 (4개 레이어 독립 이동) */
.nt-hero-bg::before{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1520 700' preserveAspectRatio='none'%3E%3Cpath d='M0,430 C95,310 285,310 380,430 S665,550 760,430 S1045,310 1140,430 S1425,550 1520,430' fill='none' stroke='rgba(56,189,248,.26)' stroke-width='2.0' stroke-linecap='round'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 700' preserveAspectRatio='none'%3E%3Cpath d='M0,300 C75,205 225,205 300,300 S525,395 600,300 S825,205 900,300 S1125,395 1200,300' fill='none' stroke='rgba(52,211,153,.22)' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1840 700' preserveAspectRatio='none'%3E%3Cpath d='M0,560 C115,450 345,450 460,560 S805,670 920,560 S1265,450 1380,560 S1725,670 1840,560' fill='none' stroke='rgba(124,58,237,.22)' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1040 700' preserveAspectRatio='none'%3E%3Cpath d='M0,160 C65,90 195,90 260,160 S455,230 520,160 S715,90 780,160 S975,230 1040,160' fill='none' stroke='rgba(148,163,184,.14)' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:repeat-x,repeat-x,repeat-x,repeat-x;
  background-size:1520px 100%, 1200px 100%, 1840px 100%, 1040px 100%;
  background-position:0 52%, 0 44%, 0 60%, 0 30%;
  animation:ntFlow 44s linear infinite;
  will-change:background-position;
}
/* 레이어별 이동 거리·부호가 달라 서로 다른 속도와 방향으로 흐른다 */
@keyframes ntFlow{
  from{background-position:    0 52%,     0 44%,     0 60%,     0 30%;}
  to  {background-position:-1520px 52%, 1200px 44%, -1840px 60%, 1040px 30%;}
}

/* 좌측 가독성 확보용 오버레이 */
.nt-hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to right, rgba(11,17,32,.85) 0%, rgba(11,17,32,.35) 45%, transparent 75%);
}
/* 모션 최소화를 선호하는 사용자에게는 정지 */
@media (prefers-reduced-motion: reduce){
  .nt-hero-bg::before{animation:none;}
}

/* 7. 썸네일 — 외부 스톡 이미지를 대체하는 결정론적 CSS 그래픽 */
.nt-thumb{
  position:relative;width:100%;height:100%;overflow:hidden;
  background:linear-gradient(135deg,var(--nt-bg1) 0%,#111a2e 100%);
}
.nt-thumb::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(to right, rgba(148,163,184,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148,163,184,.08) 1px, transparent 1px);
  background-size:28px 28px;
}
.nt-thumb::after{
  content:"";position:absolute;inset:0;
  background:var(--nt-thumb-accent, radial-gradient(420px 220px at 25% 20%, rgba(37,99,235,.45) 0%, transparent 62%));
}
.nt-thumb-mark{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:14px 18px;
  font-family:'Outfit','Pretendard',sans-serif;
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(232,237,246,.55);
}
.nt-thumb-rule{height:2px;width:44px;background:var(--nt-green);border-radius:2px;margin-bottom:6px;}

/* 8. 모바일 가로 스크롤 교정
   text-[100px] 은 반응형 분기가 없어 390px 화면에서 22px 넘쳤고,
   그 결과 페이지 전체가 6px 옆으로 밀렸다. 글자는 그대로 두고 크기만 유동화한다. */
.text-\[100px\]{font-size:clamp(40px,11vw,100px) !important;line-height:1.02 !important;}

/* ==================================================================
   9. 본사(next-t.co.kr) 레이아웃 언어 이식
   추출 스펙: section padding 76px / container 1120px / gnb 다크 글래스
   ================================================================== */

/* 9-1. 기본 — 본사 body 규칙 */
body{
  background:var(--nt-bg0);
  color:var(--nt-tx);
  line-height:1.6;
  word-break:keep-all;      /* 한글 어절 단위 줄바꿈 (본사 동일) */
  overflow-x:hidden;
  max-width:100%;
}

/* 9-2. 컨테이너 — 1280px → 본사 1120px */
.max-w-7xl{max-width:1120px !important;}

/* 9-3. 세로 리듬 — 과도한 여백을 본사 76px 기준으로 압축 */
.py-40,.py-32,.py-24,.py-20{padding-top:76px !important;padding-bottom:76px !important;}
.pt-40,.pt-32{padding-top:96px !important;}
.pb-32,.pb-24{padding-bottom:76px !important;}
.mb-32,.mb-24{margin-bottom:40px !important;}
.mb-16,.mb-12{margin-bottom:24px !important;}
.mt-32{margin-top:48px !important;}
.gap-16,.gap-12{gap:28px !important;}
@media (max-width:768px){
  .py-40,.py-32,.py-24,.py-20{padding-top:52px !important;padding-bottom:52px !important;}
  .pt-40,.pt-32{padding-top:72px !important;}
}

/* 9-4. 헤더 — 흰 바 → 본사 다크 글래스(.gnb) */
#main-header{
  background:rgba(11,17,32,.82) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--nt-line);
  box-shadow:none !important;
}
#main-header .text-gray-900{color:#fff !important;}
#main-header .text-gray-500{color:var(--nt-mut) !important;}
#main-header .text-gray-600{color:var(--nt-mut) !important;}
/* 로고 마크 — 보라 그라데이션 → 본사 emerald·blue 계열 */
#main-header .w-10.h-10{background:linear-gradient(135deg,#10b981 0%,#2563eb 100%) !important;}
/* 내비 — 본사 14.5px / 700 / mut */
#main-header .nav-link{
  font-size:14.5px;font-weight:700;color:var(--nt-mut) !important;
  transition:color .15s;
}
#main-header .nav-link:hover{color:#fff !important;}
#main-header .nav-link .bg-blue-50{background:transparent !important;}
#main-header .group-hover\:text-blue-600:hover,
#main-header a:hover .group-hover\:text-blue-600{color:#fff !important;}
/* 모바일 메뉴 — 다크로 통일 */
#mobile-menu > div{background:var(--nt-bg1) !important;border-top:1px solid var(--nt-line) !important;}
#mobile-menu .mobile-nav-link{color:var(--nt-tx) !important;}
#mobile-menu .mobile-nav-link .hover\:bg-blue-50:hover{background:rgba(148,163,184,.08) !important;}
#main-header #menu-icon,#main-header #close-icon{color:var(--nt-tx) !important;}
#main-header button:hover{background:rgba(148,163,184,.1) !important;}

/* 9-5. 버튼 — 본사 .gnb-cta / .btn-primary (다크 위 흰 알약) */
a[href*="next-t.co.kr"][class*="px-"]{
  background:#fff !important;color:#0b1120 !important;
  border-radius:var(--nt-r-btn) !important;
  font-weight:800 !important;
  box-shadow:0 4px 14px rgba(2,6,23,.4) !important;
  transition:transform .15s ease,box-shadow .15s ease !important;
}
a[href*="next-t.co.kr"][class*="px-"]:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 10px 28px rgba(2,6,23,.5) !important;
}

/* 9-6. 밝은 섹션 — 본사 .lite 와 동일하게 */
.bg-white,.bg-slate-50,.bg-gray-50,.bg-slate-100{background:#fff !important;color:#0f172a;}
.bg-white .text-slate-400,.bg-white .text-gray-400{color:#64748b !important;}

/* 9-7. 지표 구간 — 색이 제각각이던 숫자를 한 체계로 */
.bg-white .grid .group > div:first-child{color:#0f172a !important;}
.bg-white .grid .group > div:last-child{color:#64748b !important;letter-spacing:.08em;}
.bg-white .grid .group{
  position:relative;padding-top:18px;
  border-top:2px solid var(--nt-green-d);
}

/* 9-8. 푸터 — 본사 톤으로 */
footer.bg-gray-900{background:var(--nt-bg1) !important;border-top:1px solid var(--nt-line);}
footer .text-gray-400{color:var(--nt-mut) !important;}

/* 9-9. 다크 섹션 표면 통일 */
.bg-slate-950{background:var(--nt-bg0) !important;}
.bg-slate-900{background:var(--nt-bg1) !important;}

/* ==================================================================
   10. 타이포 스케일 · 배지 · 카드 — 본사와 동일 언어로
   본사 H1 은 44px 급이다. 100px 영문 디스플레이는 본사에 없는 어휘라
   글자는 그대로 두고 크기 체계만 본사 스케일로 내린다.
   ================================================================== */
.text-\[100px\]{font-size:clamp(34px,5.6vw,54px) !important;line-height:1.08 !important;}
.text-8xl,.md\:text-8xl{font-size:clamp(32px,5.2vw,52px) !important;line-height:1.1 !important;}
.text-7xl,.lg\:text-7xl{font-size:clamp(32px,5vw,50px) !important;line-height:1.1 !important;}
.text-6xl{font-size:clamp(28px,4.4vw,44px) !important;line-height:1.15 !important;}
.text-5xl,.md\:text-5xl,.lg\:text-5xl{font-size:clamp(26px,3.6vw,38px) !important;line-height:1.2 !important;}
.text-4xl,.md\:text-4xl{font-size:clamp(23px,3vw,32px) !important;line-height:1.25 !important;}
.text-3xl{font-size:clamp(20px,2.4vw,26px) !important;}
.text-2xl,.md\:text-2xl{font-size:clamp(17px,1.9vw,20px) !important;}
.text-xl{font-size:16px !important;}
.leading-\[0\.9\]{line-height:1.1 !important;}

/* 본문 — 본사는 15~15.5px 에 mut 색이다 */
.text-lg{font-size:15.5px !important;}
p.text-xl,p.text-lg{color:var(--nt-mut);}

/* 10-2. 배지 — 본사 .badge (emerald 틴트 + 테두리) */
.inline-flex.rounded-full.bg-white\/5,
.inline-flex.items-center.rounded-full{
  color:var(--nt-green) !important;
  background:rgba(16,185,129,.1) !important;
  border:1px solid rgba(52,211,153,.35) !important;
  font-weight:800 !important;
  letter-spacing:.08em;
}
.inline-flex.rounded-full.bg-white\/5 span:first-child{background:var(--nt-green) !important;}

/* 10-3. 카드 — 본사의 반투명 다크 표면 + 1px 테두리 (현재 전무한 어휘) */
.bg-slate-950 article,
.bg-slate-900 article,
.bg-slate-950 .grid > div:not(.grid),
.bg-slate-900 .grid > div:not(.grid){
  background:var(--nt-card);
  border:1px solid var(--nt-line);
  border-radius:var(--nt-r-card);
  padding:22px;
  transition:border-color .15s ease,transform .15s ease;
}
.bg-slate-950 article:hover,.bg-slate-900 article:hover{
  border-color:rgba(52,211,153,.35);
  transform:translateY(-2px);
}
/* 카드 안 썸네일은 카드 반경에 맞춘다 */
.bg-slate-950 article > div:first-child{border-radius:12px !important;margin-bottom:16px !important;}

/* 10-4. 지표 구간 — 본사는 규칙선이 짧다 */
.bg-white .grid .group{border-top:none !important;padding-top:0 !important;}
.bg-white .grid .group::before{
  content:"";display:block;width:44px;height:2px;
  background:var(--nt-green-d);border-radius:2px;margin:0 auto 14px;
}

/* 11. 브랜드 썸네일은 흐리게 깔 이유가 없다 (기존 스톡사진용 opacity 해제) */
article img,.nt-thumb img{opacity:1 !important;}

/* 12. 헤더 로고 — 본사 NXT 화이트 워드마크 (본사 .logo 는 21px/800/#fff 기준) */
.nxt-logo{height:26px;width:auto;display:block;}
@media (max-width:768px){.nxt-logo{height:22px;}}

/* 13. 푸터의 평범한 텍스트 링크는 버튼이 아니다 (본사 mut 톤 유지) */
footer a[href*="next-t.co.kr"]:not([class*="px-"]){
  background:transparent !important;color:var(--nt-mut) !important;
  box-shadow:none !important;border-radius:0 !important;font-weight:400 !important;padding:0 !important;
}
footer a[href*="next-t.co.kr"]:not([class*="px-"]):hover{color:#fff !important;transform:none !important;}

/* ==================================================================
   14. 블로그 본문 타이포
   .prose 는 Tailwind Typography 플러그인 전용 클래스인데 이 사이트엔
   플러그인이 붙은 적이 없어 본문이 무스타일로 나오고 있었다.
   플러그인을 얹는 대신 필요한 규칙만 직접 정의한다 (용량 이득).
   ================================================================== */
.prose{
  max-width:72ch !important;
  font-size:17px !important;
  line-height:1.85 !important;
  color:#334155 !important;
  word-break:keep-all;
}
.prose > br{display:none;}                    /* nl2br 로 생긴 빈 줄 정리 */
.prose h2,.prose h3,.prose h4{
  font-family:'Outfit','Pretendard',sans-serif;
  color:#0f172a !important;font-weight:800;
  margin:2.2em 0 .7em;line-height:1.3;
}
.prose h2{font-size:26px !important;padding-bottom:.4em;border-bottom:1px solid #e2e8f0;}
.prose h3{font-size:21px !important;}
.prose h4{font-size:18px !important;}
.prose p{margin:0 0 1.25em;}
.prose strong{color:#0f172a;font-weight:700;}
.prose a{color:#2563eb;text-decoration:underline;text-underline-offset:3px;}
.prose a:hover{color:#10b981;}
.prose ul,.prose ol{margin:0 0 1.25em;padding-left:1.4em;}
.prose li{margin:.4em 0;}
.prose ul>li{list-style:disc;}
.prose ol>li{list-style:decimal;}
.prose img{max-width:100%;height:auto;border-radius:12px;margin:1.6em 0;}
.prose blockquote{
  margin:1.6em 0;padding:.2em 0 .2em 1.1em;
  border-left:3px solid var(--nt-green-d);color:#475569;font-style:normal;
}
.prose table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:15px;}
.prose th,.prose td{border:1px solid #e2e8f0;padding:10px 12px;text-align:left;}
.prose th{background:#f8fafc;font-weight:700;color:#0f172a;}
.prose code{
  background:#f1f5f9;color:#0f172a;padding:.15em .4em;
  border-radius:6px;font-size:.9em;
}
.prose pre{background:#0d1526;color:#e8edf6;padding:16px;border-radius:12px;overflow-x:auto;}
.prose pre code{background:none;color:inherit;padding:0;}
@media (max-width:768px){ .prose{font-size:16px !important;} .prose h2{font-size:22px !important;} }

/* 14-2. 상세 페이지 '목록으로' 버튼 — 본사 고스트 버튼 톤 */
.bg-white a.bg-slate-950{
  background:#0f172a !important;color:#fff !important;
  border-radius:var(--nt-r-btn) !important;
  font-weight:700 !important;box-shadow:none !important;
}

/* 14-3. html 에 남은 밝은 그라데이션이 다크 섹션 사이로 비쳐 보이던 문제 */
html.bg-gradient-to-br,html{background:var(--nt-bg0) !important;}

/* ==================================================================
   15. 서브 페이지 정리 — 본사 라이트 섹션(.lite) 카드 언어에 맞춘다
   ================================================================== */

/* 15-1. 히어로가 과하게 높아 위쪽이 텅 비어 보이던 문제 */
.h-\[50vh\]{height:auto !important;}
.min-h-\[450px\]{min-height:340px !important;}
.h-\[50vh\].flex{padding-top:64px;padding-bottom:64px;}
@media (max-width:768px){ .min-h-\[450px\]{min-height:280px !important;} }

/* 15-2. eyebrow — 본사는 파랑이 아니라 emerald 다 */
.text-blue-600.font-black.tracking-widest.uppercase{
  color:var(--nt-green-d) !important;
  font-size:12px !important;letter-spacing:.14em !important;
}

/* 15-3. 라이트 섹션 카드 — 강한 그림자 대신 얇은 테두리 (본사 방식) */
.bg-white.rounded-3xl,.bg-white.rounded-2xl,.bg-white.rounded-xl,
.bg-white.p-8.rounded-3xl{
  border:1px solid #e6eaf2 !important;
  box-shadow:0 1px 2px rgba(15,23,42,.04) !important;
  border-radius:var(--nt-r-card) !important;
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease !important;
}
.bg-white.rounded-3xl:hover,.bg-white.p-8.rounded-3xl:hover{
  border-color:rgba(16,185,129,.45) !important;
  box-shadow:0 8px 24px rgba(15,23,42,.06) !important;
  transform:translateY(-2px);
}
/* 카드 hover 시 통째로 파랗게 반전되던 연출은 본사에 없는 어휘다 */
.hover\:bg-blue-600:hover,.hover\:bg-indigo-600:hover,
.hover\:bg-emerald-600:hover,.hover\:bg-slate-900:hover{
  background-color:#fff !important;color:#0f172a !important;
}

/* 15-4. 카드 뒤에 비스듬히 깔린 파란 덩어리 제거 (본사에 없는 장식) */
.bg-blue-100\/50.-rotate-3,.bg-blue-100\/50{display:none !important;}

/* 15-5. 라이트 섹션 안의 다크 버튼 — 알약 → 본사 10px */
.bg-white a.bg-slate-950,.bg-slate-50 a.bg-slate-950,
a.bg-slate-950.rounded-full{
  border-radius:var(--nt-r-btn) !important;box-shadow:none !important;
}

/* 15-6. 통계 강조 카드 — 반경·그림자만 본사 수치로 */
.bg-blue-600.rounded-\[4rem\],.bg-blue-600.rounded-3xl{
  border-radius:var(--nt-r-card) !important;
  box-shadow:0 10px 30px rgba(37,99,235,.18) !important;
}

/* 15-7. 아이콘 색 — 라인 아이콘이 배경에 묻히지 않게 */
.bg-white svg[stroke="currentColor"]{color:#0f172a;}
.bg-slate-950 svg[stroke="currentColor"],
.bg-slate-900 svg[stroke="currentColor"]{color:var(--nt-tx);}

/* 16. 과도한 임의 반경 일괄 정리 (3rem~4.5rem = 48~72px → 본사 16px) */
.rounded-\[3rem\],.rounded-\[3\.5rem\],.rounded-\[4rem\],.rounded-\[4\.5rem\]{
  border-radius:var(--nt-r-card) !important;
}
/* 라이트 섹션 카드 그림자 완화 (본사는 그림자를 거의 쓰지 않는다) */
.bg-white.shadow-lg,.bg-white.shadow-xl,
.bg-white[class*="rounded-"].shadow-lg,.bg-white[class*="rounded-"].shadow-xl{
  box-shadow:0 1px 2px rgba(15,23,42,.04) !important;
  border:1px solid #e6eaf2 !important;
}

/* ==================================================================
   17. 모바일 패딩 체계
   p-16(64px)·p-12(48px) 가 분기 없이 걸려 있어 390px 화면에서
   실제 본문 폭이 170px 수준까지 눌렸다. 주소가 두 어절마다 끊기던 원인.
   ================================================================== */
@media (max-width:768px){
  .p-16,.p-12,.p-10{padding:20px !important;}
  .p-8{padding:18px !important;}
  .px-12,.px-10{padding-left:20px !important;padding-right:20px !important;}
  .py-16,.py-12{padding-top:24px !important;padding-bottom:24px !important;}
  .gap-20,.gap-16,.gap-12,.gap-10{gap:20px !important;}
  .space-y-12 > * + *{margin-top:20px !important;}
  .space-y-8 > * + *{margin-top:16px !important;}
  .mb-16,.mb-12,.mb-10{margin-bottom:16px !important;}
  .mt-8{margin-top:16px !important;}
  /* 큰 수치 텍스트가 좁은 폭에서 넘치지 않게 */
  .text-3xl{font-size:19px !important;}
  /* 표는 좁은 화면에서 가로 스크롤로 (잘림 방지) */
  table{display:block;overflow-x:auto;white-space:nowrap;}
}

/* ==================================================================
   18. 서브 페이지 — 4단계 방법론 섹션 / 아이콘 배지 / 플로팅 CTA
   본사의 프로세스 섹션 구조(아이콘 배지 → 번호·태그 → 제목 → 설명)를 이식
   ================================================================== */

/* 18-1. 섹션 틀 */
.nxt-process{background:#fff;padding:84px 0;border-top:1px solid #e6eaf2;}
@media (max-width:768px){ .nxt-process{padding:56px 0;} }

.nxt-sec-head{max-width:760px;margin:0 auto 44px;text-align:center;}
.nxt-eyebrow-line{
  display:inline-block;font-family:'Outfit','Pretendard',sans-serif;
  font-size:12px;font-weight:800;letter-spacing:.16em;
  color:var(--nt-green-d);
  padding:5px 12px;border-radius:999px;
  background:rgba(16,185,129,.09);border:1px solid rgba(16,185,129,.28);
  margin-bottom:16px;
}
.nxt-sec-title{
  font-family:'Outfit','Pretendard',sans-serif;
  font-size:clamp(22px,3vw,31px);font-weight:800;line-height:1.35;
  color:#0f172a;letter-spacing:-.01em;word-break:keep-all;margin:0 0 12px;
}
.nxt-sec-sub{
  font-size:15.5px;line-height:1.7;color:#64748b;word-break:keep-all;margin:0;
}
.nxt-sec-foot{
  margin:36px 0 0;text-align:center;font-size:13.5px;color:#94a3b8;word-break:keep-all;
}

/* 18-2. 카드 그리드 — 4단계 */
.nxt-step-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch;
}
@media (max-width:1024px){ .nxt-step-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .nxt-step-grid{grid-template-columns:1fr;gap:12px;} }

.nxt-step{
  position:relative;
  background:#fff;border:1px solid #e6eaf2;border-radius:12px;
  padding:24px 22px 26px;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.nxt-step:hover{
  border-color:rgba(16,185,129,.45);
  box-shadow:0 8px 24px rgba(15,23,42,.06);
  transform:translateY(-2px);
}
/* 단계 사이 연결 화살표 (본사와 동일한 흐름 표현) */
.nxt-step + .nxt-step::before{
  content:"";position:absolute;left:-11px;top:50%;width:6px;height:6px;
  border-top:1.5px solid #cbd5e1;border-right:1.5px solid #cbd5e1;
  transform:translateY(-50%) rotate(45deg);
}
@media (max-width:1024px){ .nxt-step + .nxt-step::before{display:none;} }

/* 18-3. 아이콘 배지 — 라운드 사각 + emerald 체크 점 */
.nxt-badge{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:12px;
  background:#f6f8fc;border:1px solid #e6eaf2;color:#0f172a;
  margin-bottom:18px;
}
.nxt-badge svg{width:23px;height:23px;}
.nxt-badge-dot{
  position:absolute;top:-4px;right:-4px;width:13px;height:13px;border-radius:50%;
  background:var(--nt-green-d);border:2.5px solid #fff;
}

/* 18-4. 타이포 위계 */
.nxt-step-no{display:flex;align-items:baseline;gap:8px;margin-bottom:8px;}
.nxt-step-no b{
  font-family:'Outfit','Pretendard',sans-serif;
  font-size:12.5px;font-weight:800;letter-spacing:.12em;color:var(--nt-green-d);
}
.nxt-step-no span{
  font-size:12.5px;font-weight:800;letter-spacing:.04em;color:#94a3b8;
}
.nxt-step-title{
  font-size:16.5px;font-weight:800;line-height:1.45;color:#0f172a;
  word-break:keep-all;margin:0 0 10px;
}
.nxt-step-desc{
  font-size:14px;line-height:1.75;color:#64748b;word-break:keep-all;margin:0;
}

/* 18-5. 플로팅 문의 버튼 */
.nxt-float{
  position:fixed;right:16px;bottom:16px;z-index:60;
  display:flex;flex-direction:column;gap:10px;
}
.nxt-float-btn{
  display:inline-flex;align-items:center;gap:8px;
  height:46px;padding:0 18px;border-radius:999px;
  font-size:14px;font-weight:800;text-decoration:none;
  box-shadow:0 8px 24px rgba(2,6,23,.28);
  transition:transform .15s ease, box-shadow .15s ease;
}
.nxt-float-btn svg{width:18px;height:18px;flex:0 0 auto;}
.nxt-float-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(2,6,23,.34);}
.nxt-float-tel{background:#fff;color:#0b1120;border:1px solid #e6eaf2;}
.nxt-float-ask{background:var(--nt-green-d) !important;color:#04291d !important;border-radius:999px !important;}
@media (max-width:560px){
  .nxt-float{right:12px;bottom:12px;gap:8px;}
  .nxt-float-btn{height:42px;padding:0 14px;font-size:13px;}
  .nxt-float-btn span{display:none;}   /* 좁은 화면에서는 아이콘만 */
  .nxt-float-btn{width:46px;padding:0;justify-content:center;}
}

/* 18-6. 세부기능 카드 — 아이콘+제목 2단 → 설명·대상 포함 5단 구조 */
.nxt-fcard{
  text-align:left !important;align-items:flex-start !important;
  border:1px solid #e6eaf2 !important;border-radius:12px !important;
  box-shadow:0 1px 2px rgba(15,23,42,.04) !important;
  padding:22px !important;
}
.nxt-fcard:hover{
  border-color:rgba(16,185,129,.45) !important;
  box-shadow:0 8px 24px rgba(15,23,42,.06) !important;
  background:#fff !important;color:#0f172a !important;
}
.nxt-fcard > div:first-child{margin-bottom:14px !important;}
.nxt-fcard-title{
  font-size:16.5px;font-weight:800;color:#0f172a;line-height:1.45;
  word-break:keep-all;margin:0 0 8px;
}
.nxt-fcard-desc{
  font-size:13.5px;line-height:1.75;color:#64748b;word-break:keep-all;margin:0 0 12px;
}
.nxt-fcard-who{
  font-size:12.5px;line-height:1.6;color:#94a3b8;word-break:keep-all;margin:0;
  padding-top:12px;border-top:1px solid #eef1f6;width:100%;
}

/* 19. 섹션 번호 — slate-200 / white-5 는 사실상 보이지 않았다 */
.text-8xl.text-slate-200{color:#cbd5e1 !important;}
.text-8xl.text-white\/5{color:rgba(232,237,246,.28) !important;}
.text-8xl.font-black.text-slate-200,
.text-8xl.font-black.text-white\/5{
  font-size:clamp(34px,5vw,54px) !important;letter-spacing:-.02em;
}

/* 20. 수치 출처 표기 — 근거를 밝히는 게 신뢰를 만든다 (본사 방식) */
.nxt-src{
  margin:14px 0 0;font-size:12px;line-height:1.6;color:#94a3b8;
  word-break:keep-all;letter-spacing:.01em;
}

/* ==================================================================
   21. 서브 페이지 콘텐츠 블록 (핵심메시지 / 3단계 진화 / 실적 / 검증 / FAQ)
   ================================================================== */
.nxt-core,.nxt-evo-sec,.nxt-stat-sec,.nxt-crit-sec,.nxt-faq-sec{
  background:#f7f9fc;padding:84px 0;border-top:1px solid #e6eaf2;
}
.nxt-evo-sec,.nxt-crit-sec{background:#fff;}
@media (max-width:768px){
  .nxt-core,.nxt-evo-sec,.nxt-stat-sec,.nxt-crit-sec,.nxt-faq-sec{padding:52px 0;}
}

/* 21-1. 핵심 메시지 */
.nxt-core-box{
  background:#fff;border:1px solid #e6eaf2;border-left:4px solid var(--nt-green-d);
  border-radius:12px;padding:34px 30px;text-align:center;
}
.nxt-core-title{
  font-family:'Outfit','Pretendard',sans-serif;
  font-size:clamp(19px,2.6vw,27px);font-weight:800;color:#0f172a;
  line-height:1.4;word-break:keep-all;margin:6px 0 10px;
}
.nxt-core-sub{font-size:15px;color:#64748b;word-break:keep-all;margin:0;}

/* 21-2. 3단계 진화 */
.nxt-evo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media (max-width:820px){ .nxt-evo-grid{grid-template-columns:1fr;} }
.nxt-evo{background:#fff;border:1px solid #e6eaf2;border-radius:12px;padding:24px 22px;}
.nxt-evo.is-now{
  background:linear-gradient(160deg,#0d1526 0%,#0b1120 100%);border-color:rgba(52,211,153,.35);
}
.nxt-evo-step{
  display:block;font-family:'Outfit',sans-serif;font-size:11.5px;font-weight:800;
  letter-spacing:.14em;color:#94a3b8;margin-bottom:12px;
}
.nxt-evo.is-now .nxt-evo-step{color:var(--nt-green);}
.nxt-evo-name{
  font-family:'Outfit','Pretendard',sans-serif;font-size:26px;font-weight:800;
  color:#0f172a;line-height:1.1;margin:0 0 4px;
}
.nxt-evo.is-now .nxt-evo-name{color:var(--nt-green);}
.nxt-evo-role{font-size:14px;font-weight:700;color:#64748b;margin:0 0 18px;}
.nxt-evo.is-now .nxt-evo-role{color:var(--nt-tx);}
.nxt-evo-dl{margin:0;padding-top:16px;border-top:1px solid #eef1f6;}
.nxt-evo.is-now .nxt-evo-dl{border-top-color:rgba(148,163,184,.18);}
.nxt-evo-dl > div{display:flex;gap:10px;padding:6px 0;font-size:13.5px;}
.nxt-evo-dl dt{flex:0 0 44px;color:#94a3b8;font-weight:700;margin:0;}
.nxt-evo-dl dd{margin:0;color:#334155;word-break:keep-all;}
.nxt-evo.is-now .nxt-evo-dl dd{color:var(--nt-tx);}

/* 21-3. 실적 수치 */
.nxt-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media (max-width:900px){ .nxt-stat-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px){ .nxt-stat-grid{grid-template-columns:1fr;} }
.nxt-stat{
  background:#fff;border:1px solid #e6eaf2;border-radius:12px;padding:24px 22px;
  border-top:3px solid var(--nt-green-d);
}
.nxt-stat-num{
  font-family:'Outfit','Pretendard',sans-serif;font-size:34px;font-weight:800;
  color:var(--nt-green-d);line-height:1.05;letter-spacing:-.02em;margin-bottom:16px;
}
.nxt-stat-num span{font-size:17px;margin-left:2px;}
.nxt-stat-label{font-size:14.5px;font-weight:800;color:#0f172a;margin:0 0 6px;word-break:keep-all;}
.nxt-stat-note{font-size:12.5px;color:#94a3b8;margin:0;word-break:keep-all;line-height:1.6;}

/* 21-4. 검증 5대 기준 */
.nxt-crit-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.nxt-crit{
  display:flex;align-items:center;gap:16px;
  background:#fff;border:1px solid #e6eaf2;border-radius:12px;padding:16px 18px;
}
.nxt-crit.is-hl{border-color:rgba(16,185,129,.45);background:#f2fbf7;}
.nxt-crit-no{
  flex:0 0 38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#eafaf3;color:var(--nt-green-d);
  font-family:'Outfit',sans-serif;font-size:13px;font-weight:800;
}
.nxt-crit.is-hl .nxt-crit-no{background:var(--nt-green-d);color:#fff;}
.nxt-crit-body{flex:1 1 auto;min-width:0;}
.nxt-crit-body h3{font-size:15px;font-weight:800;color:#0f172a;margin:0 0 3px;word-break:keep-all;}
.nxt-crit-body p{font-size:13px;color:#64748b;margin:0;word-break:keep-all;line-height:1.6;}
.nxt-crit-badge{
  flex:0 0 auto;font-size:11.5px;font-weight:800;padding:5px 11px;border-radius:999px;
  background:#eafaf3;color:var(--nt-green-d);
}
.nxt-crit.is-hl .nxt-crit-badge{background:var(--nt-green-d);color:#fff;}
@media (max-width:560px){
  .nxt-crit{flex-wrap:wrap;gap:10px;}
  .nxt-crit-body{flex:1 1 100%;order:3;}
}

/* 21-5. FAQ — JS 없이 details/summary 로 */
.nxt-faq-list{display:flex;flex-direction:column;gap:10px;max-width:900px;margin:0 auto;}
.nxt-faq{background:#fff;border:1px solid #e6eaf2;border-radius:12px;overflow:hidden;}
.nxt-faq[open]{border-color:rgba(16,185,129,.45);}
.nxt-faq summary{
  list-style:none;cursor:pointer;padding:17px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  font-size:15px;font-weight:800;color:#0f172a;word-break:keep-all;
}
.nxt-faq summary::-webkit-details-marker{display:none;}
.nxt-faq summary i{
  flex:0 0 auto;position:relative;width:14px;height:14px;
}
.nxt-faq summary i::before,.nxt-faq summary i::after{
  content:"";position:absolute;background:var(--nt-green-d);border-radius:2px;
  transition:transform .18s ease;
}
.nxt-faq summary i::before{left:0;top:6px;width:14px;height:2px;}
.nxt-faq summary i::after{left:6px;top:0;width:2px;height:14px;}
.nxt-faq[open] summary i::after{transform:scaleY(0);}
.nxt-faq-a{
  padding:0 20px 18px;font-size:14px;line-height:1.8;color:#64748b;word-break:keep-all;
}