@charset "utf-8";

/* ============================================================
   blog_renewal.css — 상세페이지 본문 리뉴얼 : 1단계 미니멀 베이스라인

   적용 대상 : nxt_blog.regdate >= RENEWAL_START_DATE (2026-07-01) 등록글
   분기 위치 : blog/blog-contents.php
   상세 규칙 : /상세페이지 리뉴얼 작업.md  (작업 전 반드시 읽을 것)

   ── 이 파일이 지키는 규칙 ──────────────────────────────
   규칙 1  본문 HTML 은 수정하지 않는다. 스타일은 여기서만 정의한다.
   규칙 3  Tailwind CDN / ai_blog.css 에 의존하지 않는다. 단독으로 성립한다.
   규칙 4  "텍스트 우선"이지 무스타일이 아니다.
           이미지 오버플로 · 표 붕괴 방지는 반드시 남긴다.
   규칙 5  와일드카드(*)로 font-size / line-height 를 강제하지 않는다.
           본문이 쓰는 text-lg / text-sm / text-base 위계를 죽이지 않기 위함.
   규칙 6  !important 최소화.

   ── 1단계 범위 ────────────────────────────────────────
   본문 구조가 날것으로 어떻게 읽히는지 확인하는 것이 목적이다.
   장식은 넣지 않는다. 레이아웃 컴포넌트는 2단계에서 점진 적용한다.
   본문의 Tailwind 유틸리티(flex / grid / border-l-4 등)는 의도적으로
   동작하지 않으며, 블록으로 쌓여 내려간다.
   ============================================================ */


/* ------------------------------------------------------------
   0. 박스 모델 — 패딩 계산 붕괴 방지
   ------------------------------------------------------------ */
.blog_ai_body,
.blog_ai_body *::before,
.blog_ai_body *::after,
.blog_ai_body * {
	box-sizing: border-box;
}


/* ------------------------------------------------------------
   1. 본문 기본 타이포그래피
   컨테이너에만 지정하고 자식은 상속시킨다. (규칙 5)
   ------------------------------------------------------------ */
/* ⚠ 이 사이트의 Pretendard 는 굵기별로 font-family 가 따로 선언돼 있다(tempcommon.css).
   'Pretendard' 패밀리에는 400 한 벌뿐이라, font-weight:700 만 주면 진짜 Bold 파일이 아니라
   Regular 에 가짜 볼드(synthetic bold)가 그려진다. 그래서 굵기마다 패밀리를 지정한다.
   font-weight 는 대체 폰트로 떨어졌을 때를 위해 같이 남긴다.

     300 Pretendard-Light  /  400 Pretendard  /  500 Pretendard-Medium
     600 Pretendard-SemiBold  /  700 Pretendard-Bold  /  800 Pretendard-ExtraBold */
.blog_ai_body {
	--fb: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', '맑은 고딕', sans-serif;
	--f-light:     'Pretendard-Light', var(--fb);
	--f-regular:   'Pretendard', var(--fb);
	--f-medium:    'Pretendard-Medium', var(--fb);
	--f-semibold:  'Pretendard-SemiBold', var(--fb);
	--f-bold:      'Pretendard-Bold', var(--fb);
	--f-extrabold: 'Pretendard-ExtraBold', var(--fb);

	/* 썸네일(.nxtb_sum)과 본문 사이 간격. 시안 : 썸네일 하단 1021 → 첫 블록 1061.
	   예전에는 이 40px 을 #nxt_usp-summary 의 margin-top 이 만들었는데,
	   3줄 요약이 없는 글(2026-06-24 등록 31건 전부)에서는 간격이 통째로 사라졌다.
	   첫 요소가 무엇이든 성립하도록 컨테이너로 옮긴다. */
	padding-top: 40px;

	font-family: var(--f-light);
	font-weight: 300;
	font-size: 18px;
	line-height: 34px;
	color: #111;
	word-break: keep-all;
	overflow-wrap: break-word;
}

/* 본문이 감싸고 있는 내부 래퍼 — 레거시 장식을 걷어낸 상태로 시작 */
.blog_ai_body #nxt_blog-content {
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
}


/* ------------------------------------------------------------
   2. 제목 위계
   ------------------------------------------------------------ */
/* 피그마 : Frame 4434892 (PC 2557-3303 / MO 2557-4103)
   시안에는 h2 하단 구분선이 없다. 레거시(ai_blog.css)에 있던 장식이라 걷어냈다. */
.blog_ai_body h2 {
	margin: 80px 0 26px;
	padding: 0;
	border: 0;
	font-family: var(--f-bold);
	font-size: 24px;
	font-weight: 700;
	line-height: 36px;
	color: #111;
}

.blog_ai_body h3 {
	margin: 26px 0 10px;
	font-family: var(--f-bold);
	font-size: 20px;
	font-weight: 700;
	line-height: 32px;
	color: #111;
}

/* 시안에 h4 는 없다. 리뉴얼 10건도 h4 를 쓰지 않는다(0/10).
   레거시 37건이 쓰므로 위계만 유지되도록 h3 와 본문 사이 값으로 둔다. */
.blog_ai_body h4 {
	margin: 22px 0 8px;
	font-family: var(--f-semibold);
	font-size: 18px;
	font-weight: 600;
	line-height: 30px;
	color: #111;
}

/* 글 맨 앞에 오는 제목만 위 여백을 없앤다.
   예전엔 `h2:first-child` 라 래퍼의 첫 자식인 h2 까지 잡혔다.
   그래서 FAQ 섹션(`<section><h2>자주 묻는 질문…`)의 위 여백 80px 이 통째로 사라져
   앞 배너에 딱 붙어 있었다. 반드시 본문 루트의 직계 첫 자식으로 좁힌다. */
.blog_ai_body #nxt_blog-content > h2:first-child,
.blog_ai_body #nxt_blog-content > h3:first-child {
	margin-top: 0;
}


/* ------------------------------------------------------------
   3. 문단 · 목록
   ------------------------------------------------------------ */
.blog_ai_body p {
	margin: 0 0 26px;
}

/* 안내·고지 문구 (`p.text-sm`)
   기준 : 하단 고지 문구 — MO node 2557-4274 (Frame 4434896 최하단), 12px Light·18 `#111`.
   PC 시안에는 이 문구가 없어 같은 계열의 소문자 텍스트(출처 문구 14·22)에 맞췄다.
   마크업의 `border-t` 는 Tailwind 라 죽어 있고, 시안에도 윗줄이 없어 그대로 둔다. */
.blog_ai_body p.text-sm {
	margin: 20px 0 26px;
	font-size: 14px;
	line-height: 22px;
	color: #111;
}

.blog_ai_body ul,
.blog_ai_body ol {
	margin: 0 0 18px;
	padding-left: 22px;
}

.blog_ai_body ul { list-style: disc; }
.blog_ai_body ol { list-style: decimal; }

.blog_ai_body li {
	margin-bottom: 8px;
}

/* 본문이 list-inside 를 쓰는 구간이 있어 마커 위치만 맞춰 준다 */
.blog_ai_body .list-inside {
	list-style-position: inside;
	padding-left: 0;
}

/* 강조는 기본이 검정 볼드다. */
.blog_ai_body strong,
.blog_ai_body b {
	font-family: var(--f-bold);
	font-weight: 700;
	color: #111;
}

/* 브랜드 오렌지는 "본문 문단 안의 강조"에만 쓴다.
   시안에서 표 셀·3줄 요약 소제목의 strong 은 오렌지가 아니라 검정이라,
   전역으로 오렌지를 주면 표 안에 오렌지 텍스트가 흩어진다. */
.blog_ai_body p strong,
.blog_ai_body p b {
	color: #ff5029;
}

.blog_ai_body hr {
	border: 0;
	border-top: 1px solid #e5e7eb;
	margin: 40px 0;
}


/* ------------------------------------------------------------
   3-1. 컴포넌트 경계 — 본문 일반 규칙이 컴포넌트 안으로 새지 않게 막는다

   본문이 AI 생성 마크업이라 같은 자리에 <ul><li> 가 올지 <p> 가 올지 보장이 없다.
   리뉴얼 10건 전수 조사(2026-09-02) 결과 info-box 내용이 실제로 두 형태로 갈렸고,
   그때 위의 `p { margin:0 0 26px }` 와 `p strong { color:#ff5029 }` 가
   컴포넌트 안으로 새어 들어가 여백이 뜨고 강조가 오렌지로 나왔다.

   컴포넌트마다 뒤늦게 대응하는 대신 진입점에서 한 번 끊는다.
   각 컴포넌트의 실제 글자 규격은 아래 해당 섹션에서 다시 지정한다.
   ------------------------------------------------------------ */
.blog_ai_body #nxt_usp-summary p,
.blog_ai_body #nxt_page-toc p,
.blog_ai_body .info-box p,
.blog_ai_body .nxt_faq-section p,
.blog_ai_body table p {
	margin: 0;
}

/* 표 셀 안의 목록도 마찬가지다. 본문 목록 여백(아래 18px)이 셀 안에 들어오면 안 된다. */
.blog_ai_body table ul,
.blog_ai_body table ol {
	margin: 0;
	padding-left: 18px;
}

/* 제목 태그가 컴포넌트 안으로 들어오는 글이 있다
   (info-box 제목이 <div> 가 아니라 <h3> 인 글 30건 — 2026-04-23 등록 268~297).
   본문 제목 여백(h2 위 80px / h3 위 26px)이 그대로 걸리면 박스 안이 위로 떠 보인다.
   각 컴포넌트의 실제 제목 규격은 해당 섹션에서 다시 지정한다. */
.blog_ai_body .info-box h2,
.blog_ai_body .info-box h3,
.blog_ai_body .info-box h4,
.blog_ai_body #nxt_usp-summary h3,
.blog_ai_body #nxt_usp-summary h4,
.blog_ai_body table h2,
.blog_ai_body table h3,
.blog_ai_body table h4 {
	margin: 0 0 10px;
}

/* 오렌지 강조는 본문 문단 전용이다. 컴포넌트 안에서는 검정으로 되돌린다. */
.blog_ai_body #nxt_usp-summary p strong,
.blog_ai_body #nxt_usp-summary p b,
.blog_ai_body .info-box p strong,
.blog_ai_body .info-box p b,
.blog_ai_body .nxt_faq-section p strong,
.blog_ai_body .nxt_faq-section p b,
.blog_ai_body table p strong,
.blog_ai_body table p b {
	color: #111;
}


/* ------------------------------------------------------------
   4. 링크
   ------------------------------------------------------------ */
.blog_ai_body a {
	color: #1d4ed8;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.blog_ai_body a:hover {
	color: #ff5000;
}

/* 목차 링크는 밑줄 없이 */
.blog_ai_body a.toc-link {
	text-decoration: none;
	color: #374151;
}

.blog_ai_body a.toc-link:hover {
	text-decoration: underline;
	color: #ff5000;
}


/* ------------------------------------------------------------
   5. 앵커 이동 시 고정 헤더에 가리지 않도록
   (목차 카드 자체의 디자인은 12번 섹션)
   ------------------------------------------------------------ */
/* 목차 링크가 가리키는 대상 전부에 오프셋을 준다.
   원래는 `.nxt_content-section` 만 잡았는데, 전수 조사(2026-09-03, 노출글 308건) 결과
   **목차 링크 대상이 그 클래스를 다 갖지는 못한 글이 33건** 있었다(전부 2025-10-01 이전 세대).
   그 글들은 목차를 클릭하면 제목이 고정 헤더 아래로 숨는다.
   대상이 h2 인지 section 인지도 글마다 달라서, 클래스·태그를 특정하지 않고 `[id]` 로 받는다.
   scroll-margin 은 **그 요소로 스크롤될 때만** 쓰이는 값이라 다른 곳에 부작용이 없다. */
.blog_ai_body [id] {
	scroll-margin-top: 90px;
}


/* ------------------------------------------------------------
   6. 이미지 — 규칙 4. 없으면 모바일에서 화면 밖으로 넘친다.
   ------------------------------------------------------------ */
.blog_ai_body img,
.blog_ai_body video,
.blog_ai_body iframe {
	max-width: 100%;
	height: auto;
}

.blog_ai_body img {
	display: block;
	margin: 16px 0 8px;
}

/* 인라인 SVG — 2026-09-03 추가(4단계-Z).
   본문 svg 는 **width/height 속성이 하나도 없고** 크기를 전부 Tailwind 유틸리티
   (`w-6 h-6` 등)에 맡기고 있다. 리뉴얼 경로엔 Tailwind 가 없어 크기가 풀리고,
   그러면 svg 는 컨테이너 폭을 꽉 채워 **화면만큼 거대해진다.**

   전수 조사(2026-09-03, 본문 svg 317개) 결과
     · 크기 속성을 가진 svg : 0개 — 전부 클래스 의존
     · 쓰이는 크기 클래스   : w-6/h-6 · w-8/h-8 · w-12/h-12 세 가지뿐
     · 실제로 커져 있던 것  : id 2(w-12 ×3) · id 10(w-8 ×3) — 나머지는 아코디언 화살표라 대응돼 있었다

   아래 안전망을 먼저 두고 Tailwind 값(1rem=16px 기준)을 그대로 되살린다.
   안전망은 특이도를 낮게(0,2,1) 둬서 아코디언 화살표 규칙이 계속 이기게 한다. */
.blog_ai_body svg:not([width]) {
	width: 24px;
	height: 24px;
}

.blog_ai_body svg.w-6.h-6   { width: 24px; height: 24px; }
.blog_ai_body svg.w-8.h-8   { width: 32px; height: 32px; }
.blog_ai_body svg.w-12.h-12 { width: 48px; height: 48px; }

.blog_ai_body figure {
	margin: 20px 0;
}

.blog_ai_body figcaption {
	font-size: 14px;
	color: #6b7280;
	text-align: center;
	margin-top: 6px;
}


/* ------------------------------------------------------------
   7. 표 — 규칙 4. 보더가 없으면 셀이 붙어 판독이 불가능하다.
   ------------------------------------------------------------ */
/* 피그마 : PC node 2557-3326 (Frame 2116930086) / MO node 2557-4128

   본문 마크업 :
     <div class="overflow-x-auto my-6 shadow-md rounded-lg">
       <table class="min-w-full custom-table">
         <thead><tr><th style="word-break:keep-all;">…</th></tr></thead>
         <tbody><tr><td style="white-space:nowrap;"><strong>…</strong></td>…</tr></tbody>
       </table>
     </div>

   래퍼 div 가 이미 있으므로 가로 스크롤은 `.overflow-x-auto`(10번 섹션)가 담당한다.
   표 자체를 스크롤 컨테이너로 만들 필요가 없다.

   모서리를 둥글게 하려면 border-collapse:collapse 를 쓸 수 없다(셀 보더가 겹쳐
   라운드가 뭉개진다). separate + border-spacing:0 으로 두고 셀에 오른쪽·아래
   보더만 준 뒤 마지막 열·행에서 지운다. */
.blog_ai_body table {
	width: 100%;
	margin: 0 0 26px;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 10px;
	overflow: hidden;
	font-family: var(--f-regular);
	font-weight: 400;
	font-size: 16px;
	line-height: 34px;
	color: #111;
}

.blog_ai_body th,
.blog_ai_body td {
	padding: 10px 20px;
	border: 0;
	border-right: 1px solid rgba(0, 0, 0, 0.06);
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	text-align: left;
	vertical-align: top;
}

.blog_ai_body th:last-child,
.blog_ai_body td:last-child {
	border-right: 0;
}

.blog_ai_body tr:last-child > td {
	border-bottom: 0;
}

.blog_ai_body th {
	background: #fdf7f2;
	font-family: var(--f-semibold);
	font-weight: 600;
	color: #111;
}


/* ------------------------------------------------------------
   8. 인용구
   ------------------------------------------------------------ */
.blog_ai_body blockquote {
	margin: 20px 0;
	padding: 14px 18px;
	border-left: 3px solid #d1d5db;
	background: #f9fafb;
	color: #374151;
}

.blog_ai_body blockquote p:last-child {
	margin-bottom: 0;
}


/* ------------------------------------------------------------
   9. PHP 가 본문 끝에 붙이는 요소
   blog-contents.php 에서 모든 글에 공통 삽입되므로 여기서도 처리한다.
   (본문 수정이 아니라 PHP 가 출력 시점에 덧붙이는 영역)
   ------------------------------------------------------------ */
.blog_ai_body .thingsknow {
	margin: 40px 0 0;
}

.blog_ai_body .thingsknow img {
	margin: 0;
}

.blog_ai_body .thingsknow dl {
	margin: 10px 0 0;
	font-size: 15px;
	line-height: 1.7;
	color: #4b5563;
}

.blog_ai_body .confirm-stamp {
	margin: 24px 0 40px;
	font-size: 15px;
	line-height: 1.6;
	color: #6b7280;
}


/* ------------------------------------------------------------
   10. Tailwind 가 빠지면서 "기능"이 죽는 유틸리티 — 규칙 4 안전장치

   장식용 유틸리티(flex / grid / border-l-4 / 색상)는 사라져도 블록으로 쌓일 뿐이라
   그대로 둔다. 하지만 아래 셋은 없으면 화면이 실제로 잘못 동작한다.
   지금 리뉴얼 10건은 셋 다 쓰지 않지만, 기준일을 앞당기면(5단계) 바로 필요해진다.

     .hidden        노출글 50건. blog-contents.php 의 FAQ 아코디언 JS 가
                    classList.add('hidden') 로 답변을 접는다. 이 규칙이 없으면
                    답변이 항상 펼쳐진 채로 고정된다.
     .sr-only       노출글 1건. 스크린리더 전용 텍스트가 화면에 그대로 노출된다.
     .overflow-x-auto  노출글 282건. 넓은 표를 감싸는 래퍼. 없으면 가로로 넘친다.
   ------------------------------------------------------------ */
.blog_ai_body .hidden {
	display: none;
}

.blog_ai_body .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.blog_ai_body .overflow-x-auto {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}


/* ------------------------------------------------------------
   11. 3줄 요약 — #nxt_usp-summary
   피그마 : PC node 2557-3219 / MO node 2557-4020 (Frame 2116930110)

   손댈 수 없는 본문 마크업 (규칙 1) :
     <aside id="nxt_usp-summary" class="bg-white p-6 rounded-xl shadow-lg mb-8">
       <h2 … style="margin-top:0;">📌 3줄 요약</h2>
       <ul class="list-disc list-inside space-y-3">
         <li><strong>소제목</strong> &mdash; 본문</li>   ← 3개
       </ul>
     </aside>

   번호 배지(1·2·3)는 마크업에 없어서 CSS counter 로 만든다.
   ------------------------------------------------------------ */
/* 위쪽 40px 은 썸네일(.nxtb_sum)과의 간격이다. 시안 실측 : 썸네일 하단 1021 → 요약 상단 1061.
   .blog_ai_body 는 상단 여백이 없어서 이 margin 이 그대로 두 블록 사이 간격이 된다. */
.blog_ai_body #nxt_usp-summary {
	/* 위 간격은 .blog_ai_body 의 padding-top 이 담당한다(1번 섹션). */
	margin: 0 0 60px;   /* 아래 60 = 요약 하단 1435 → 목차 상단 1495 */
	padding: 0;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}

/* 헤더 배지 — 원문 텍스트("📌 3줄 요약")를 감추고 번개 아이콘 + 문구로 다시 그린다.
   리뉴얼 대상 10건이 전부 같은 문구임을 확인했다(2026-09-02).
   앞으로 등록할 글도 이 문구를 유지해야 한다. */
.blog_ai_body #nxt_usp-summary h2 {
	display: inline-flex;
	align-items: center;
	height: 46px;
	margin: 0 0 30px;
	padding: 0 18px;
	border: 0;
	border-radius: 99px;
	background: #ff5029;
	font-family: var(--f-bold);   /* :after 가 상속받는다 */
	font-size: 0;
	line-height: 0;
	color: transparent;
}

.blog_ai_body #nxt_usp-summary h2:before {
	content: '';
	flex: none;
	width: 12px;
	height: 22px;
	margin-right: 8px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 22'%3E%3Cpath d='M7.6 0 0 12.4h4.8L4.4 22 12 9.6H7.2z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center / contain;
}

.blog_ai_body #nxt_usp-summary h2:after {
	content: '3줄 요약';
	font-size: 20px;
	font-weight: 700;
	line-height: 26px;
	color: #fff;
}

.blog_ai_body #nxt_usp-summary ul {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: usp;
}

.blog_ai_body #nxt_usp-summary li {
	position: relative;
	counter-increment: usp;
	margin: 0 0 24px;
	padding-left: 42px;   /* 번호 배지 30 + 간격 12 */
	list-style: none;
	font-family: var(--f-regular);
	font-weight: 400;
	font-size: 17px;
	line-height: 26px;
	color: #111;
}

.blog_ai_body #nxt_usp-summary li:last-child {
	margin-bottom: 0;
}

/* 내용이 <p> 로 올 경우의 대비. 번호 배지는 <li> 전용이라 붙이지 않고 글자 규격만 맞춘다.
   (10건에는 없지만 info-box 가 실제로 두 형태로 갈렸으므로 같은 사고를 미리 막는다) */
.blog_ai_body #nxt_usp-summary p {
	margin: 0 0 8px;
	font-family: var(--f-regular);
	font-weight: 400;
	font-size: 17px;
	line-height: 26px;
	color: #111;
}

.blog_ai_body #nxt_usp-summary p:last-child {
	margin-bottom: 0;
}

/* 번호 배지 — 소제목 줄상자(32px) 안에서 세로 중앙 */
.blog_ai_body #nxt_usp-summary li:before {
	content: counter(usp);
	position: absolute;
	left: 0;
	top: 1px;
	width: 30px;
	height: 30px;
	border-radius: 5px;
	background: #ff5029;
	color: #fff;
	font-family: var(--f-extrabold);
	font-size: 16px;
	font-weight: 800;
	line-height: 30px;
	text-align: center;
}

/* 소제목을 한 줄로 세우면 뒤따르는 본문이 자동으로 다음 줄로 내려간다.
   반드시 `> strong:first-child` 로 좁힌다. 본문 중간의 강조 <strong> 까지 잡으면
   문단이 20px 블록으로 토막난다. (레거시 49건 중 37건이 본문 안에 강조 strong 을 갖고 있다) */
.blog_ai_body #nxt_usp-summary li > strong:first-child {
	display: block;
	margin-bottom: 8px;
	font-family: var(--f-bold);
	font-size: 20px;
	font-weight: 700;
	line-height: 32px;
	color: #111;   /* 본문 strong 의 오렌지를 여기서만 되돌린다 */
}


/* ------------------------------------------------------------
   12. 목차 카드 — #nxt_page-toc
   피그마 : PC node 2557-3260 (Frame 50 > Component 3) / MO node 2557-4066

   손댈 수 없는 본문 마크업 (규칙 1) :
     <aside id="nxt_page-toc" class="bg-white p-6 rounded-xl shadow-lg mb-8">
       <div class="flex justify-between items-center border-b pb-3 mb-4">
         <span>목차</span><button id="nxt_toggle-toc-button">닫기</button>
       </div>
       <nav id="nxt_page-toc-nav">
         <ol class="flex flex-wrap -mx-2">
           <li class="w-full sm:w-1/2 px-2"><a class="toc-link" href="#section-2">…</a></li>
         </ol>
       </nav>
     </aside>

   · 본문은 sm 이상에서 2단(`sm:w-1/2`)이지만 Tailwind 가 없으므로 1단으로 쌓인다.
     시안도 1단이라 그대로 둔다.
   · 번호(1·2·3…)는 CSS counter 로 만든다. 기본 마커로는 굵기·폭을 맞출 수 없다.
   · nav 의 display / max-height 는 blog-contents.php 의 토글 JS 가 인라인으로 넣는다.
     여기서 overflow 를 건드리면 열림 상태에서 목록이 잘리므로 손대지 않는다.
   ------------------------------------------------------------ */
.blog_ai_body #nxt_page-toc {
	margin: 0 0 50px;
	padding: 0;
	background: #f6f6f6;
	border-radius: 10px;
	box-shadow: none;
}

/* 헤더 — 회색 띠 */
.blog_ai_body #nxt_page-toc > div:first-child {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0;
	padding: 18px;
	border: 0;
}

/* '목차' 라벨 — 태그를 특정하지 않는다.
   전수 조사(2026-09-03, 노출글 308건) 결과 라벨 태그가 세 가지다.
     <span> 253건 · <h2> 54건 · <h3> 1건(id 9)
   셋 다 **헤더 div 의 첫 element 자식**이고 그 다음이 닫기 버튼이라 `:first-child` 로 잡힌다.
   h2/h3 로 오면 본문 제목 규칙의 큰 margin 이 딸려 와 헤더 띠가 벌어지므로 margin 을 0 으로 눌러 준다. */
.blog_ai_body #nxt_page-toc > div:first-child > :first-child {
	margin: 0;
	font-family: var(--f-bold);
	font-size: 18px;
	font-weight: 700;
	line-height: 26px;
	color: #111;
}

/* 열기/닫기 버튼 — 브라우저 기본 버튼 스타일을 걷어낸다 */
.blog_ai_body #nxt_toggle-toc-button {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-family: var(--f-semibold);
	font-size: 16px;
	font-weight: 600;
	line-height: 26px;
	color: #111;
	cursor: pointer;
}

.blog_ai_body #nxt_toggle-toc-button:after {
	content: '';
	flex: none;
	width: 10px;
	height: 10px;
	margin-left: 6px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M0.8 5h8.4' fill='none' stroke='%23111111' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* 접힌 상태에서는 − 대신 + 를 보여 준다.
   토글 JS 가 클래스를 붙이지 않고 인라인 display 만 바꾸므로 :has() 로 읽는다.
   :has() 미지원 브라우저는 이 규칙 하나만 무시하고 − 를 유지한다. */
.blog_ai_body #nxt_page-toc:has(#nxt_page-toc-nav[style*="display: none"]) #nxt_toggle-toc-button:after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M0.8 5h8.4M5 0.8v8.4' fill='none' stroke='%23111111' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 목록 — 흰 카드 */
/* Frame 41 — 흰 목록 카드. 그림자가 있다.
   ⚠ 추정값. MCP 가 effects 를 안 내려줘서 2배 내보내기 이미지의 여백
   (노드 840×341 기준 위 약 15px / 아래 약 31px)으로 역산했다.
   "Copy as CSS" 값을 받으면 교체할 것. */
.blog_ai_body #nxt_page-toc-nav {
	padding: 20px 18px;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.blog_ai_body #nxt_page-toc-nav ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: toc;
}

.blog_ai_body #nxt_page-toc-nav li {
	position: relative;
	margin: 0 0 29px;     /* 14 + 구분선 1 + 14 */
	padding-left: 40px;   /* 번호 26 + 간격 14 */
	counter-increment: toc;
	list-style: none;
}

.blog_ai_body #nxt_page-toc-nav li:last-child {
	margin-bottom: 0;
}

.blog_ai_body #nxt_page-toc-nav li:before {
	content: counter(toc);
	position: absolute;
	left: 0;
	top: 0;
	width: 26px;
	font-family: var(--f-bold);
	font-size: 16px;
	font-weight: 700;
	line-height: 26px;
	color: #111;
	text-align: center;
}

/* 구분선은 카드 왼쪽 끝이 아니라 제목 시작점에 맞춘다.
   top:100% 라 제목이 두 줄로 늘어나도 항상 항목 아래 14px 에 붙는다. */
.blog_ai_body #nxt_page-toc-nav li:not(:last-child):after {
	content: '';
	position: absolute;
	left: 40px;
	right: 0;
	top: 100%;
	margin-top: 14px;
	height: 1px;
	background: #eee;
}

.blog_ai_body #nxt_page-toc-nav a.toc-link {
	display: block;
	font-family: var(--f-medium);
	font-size: 16px;
	font-weight: 500;
	line-height: 26px;
	color: #111;
	text-decoration: none;
}

.blog_ai_body #nxt_page-toc-nav a.toc-link:hover {
	color: #ff5029;
	text-decoration: none;
}


/* ------------------------------------------------------------
   13. 자주 묻는 질문 — .nxt_faq-section
   피그마 : PC node 2557-3432 / MO node 2557-4266 (Frame 4434896)

   손댈 수 없는 본문 마크업 (규칙 1) :
     <section class="nxt_faq-section faqContentBox mt-12 mb-12">
       <h2 …>자주 묻는 질문 (FAQ)</h2>
       <div class="space-y-4">
         <div class="border-l-4 border-blue-500 pl-6 pt-1 pb-3">   ← 문항마다 반복
           <h3 …><span>Q.</span> <span>질문</span></h3>
           <div …><span>A.</span> 답변 텍스트</div>
         </div>
       </div>
     </section>

   · 리뉴얼 10건에는 아코디언(`nxt_accordion-button`)이 없다(0/10).
     시안도 전부 펼친 상태라 접기 동작을 만들지 않는다.
   · 'A.' 뒤는 순수 텍스트 노드라 선택자로 잡을 수 없다. 부모를 flex 로 만들면
     그 텍스트가 익명 flex 아이템이 되어 'A.' 옆에 블록으로 서고, 두 번째 줄부터
     자동으로 내어쓰기가 맞는다. (`&mdash;` 때와 달리 이건 CSS 로 해결된다)
   · 문항 사이 구분선도 마크업에 없어 답변 div 의 border-top 으로 만든다.

   FAQ 의 h2 는 본문 h2(2번 섹션)와 값이 같아 따로 정의하지 않는다.
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   FAQ 마크업은 두 계열이 있다 (2026-09-03 전수 조사, 4단계-S)

   ① section 계열  <section class="nxt_faq-section faqContentBox">   194건
        h2 제목이 **안**에 있고, 카드가 `div.space-y-4` 로 한 겹 더 싸여 있다.
        → 카드 = `.nxt_faq-section > div > div`

   ② div 계열      <div class="mt-8 space-y-4 faqContentBox">         63건
        `nxt_faq-section` 이 **없고**, h2 제목은 박스 **밖** 앞 형제다.
        카드가 박스의 직계 자식이라 중간 래퍼가 없다.
        → 카드 = `.faqContentBox:not(.nxt_faq-section) > div`

   두 계열의 카드 **내부**(h3 · Q./A. 라벨 · 답변 div)는 완전히 동일하다.
   그래서 내부 규칙은 `.faqContentBox` 하나로 묶고, **카드를 고르는 규칙만** 갈라 둔다.
   `nxt_faq-section` 을 가진 글은 전부 `faqContentBox` 도 갖고 있어서(194/194)
   `.faqContentBox` 로 묶어도 누락이 없다. 다만 반대 경우를 대비해
   기존 `.nxt_faq-section` 선택자는 지우지 않고 **함께 남겨 둔다.**
   ------------------------------------------------------------ */
.blog_ai_body .nxt_faq-section,
.blog_ai_body .faqContentBox {
	margin: 0;
}

/* 문항 카드 — ① section 계열 : 중간 래퍼(div.space-y-4)를 한 겹 건너뛴다 */
.blog_ai_body .nxt_faq-section > div > div,
/* ② div 계열 : 카드가 직계 자식이다.
   `:not()` 이 없으면 ① 의 중간 래퍼가 카드로 잡혀 배경·패딩이 이중으로 씌워진다. */
.blog_ai_body .faqContentBox:not(.nxt_faq-section) > div {
	margin: 0 0 10px;
	padding: 24px;
	border: 0;
	border-radius: 10px;
	background: #f8f8f8;
}

.blog_ai_body .nxt_faq-section > div > div:last-child,
.blog_ai_body .faqContentBox:not(.nxt_faq-section) > div:last-child {
	margin-bottom: 0;
}

/* 질문 · 답변 공통 : 라벨을 absolute 로 빼고 본문은 padding-left 로 밀어 넣는다.

   처음엔 flex 로 만들었는데, 2026-01~06 등록글 조사(4단계-L)에서 질문 h3 가
   `<span>Q.</span> <strong>상품명</strong><span>질문…</span>` 처럼 **자식이 3개**인
   경우가 나왔다(323·328). flex 는 자식마다 아이템을 만들어 상품명과 질문이
   좌우로 쪼개진다. absolute + padding 방식은 남은 내용이 인라인으로 흐르므로
   자식이 2개든 3개든, 맨 텍스트든 <p>·<ul> 이든 전부 같은 모양으로 접힌다. */
.blog_ai_body .nxt_faq-section h3,
.blog_ai_body .faqContentBox h3 {
	position: relative;
	display: block;
	margin: 0;
	padding-left: 30px;   /* 라벨 20 + 간격 10 */
	font-family: var(--f-semibold);
	font-size: 18px;
	font-weight: 600;
	line-height: 26px;
	color: #111;
}

/* Q. / A. 라벨 */
.blog_ai_body .nxt_faq-section h3 > span:first-child,
.blog_ai_body .nxt_faq-section h3 + div > span:first-child,
.blog_ai_body .faqContentBox h3 > span:first-child,
.blog_ai_body .faqContentBox h3 + div > span:first-child {
	position: absolute;
	left: 0;
	margin: 0;
	font-family: var(--f-bold);
	font-size: 20px;
	font-weight: 700;
	line-height: 26px;
}

.blog_ai_body .nxt_faq-section h3 > span:first-child,
.blog_ai_body .faqContentBox h3 > span:first-child {
	top: 0;
	color: #ff5029;
}

/* 답변 */
.blog_ai_body .nxt_faq-section h3 + div,
.blog_ai_body .faqContentBox h3 + div {
	position: relative;
	display: block;
	margin: 14px 0 0;
	padding: 14px 0 0 30px;   /* 구분선 아래 14, 라벨 자리 30 */
	border-top: 1px solid rgba(0, 0, 0, 0.05);
	font-family: var(--f-light);
	font-size: 16px;
	font-weight: 300;
	line-height: 26px;
	color: #111;
}

.blog_ai_body .nxt_faq-section h3 + div > span:first-child,
.blog_ai_body .faqContentBox h3 + div > span:first-child {
	top: 14px;   /* 위 padding-top 과 같게 — 답변 첫 줄에 맞춘다 */
	color: #111;
}

/* 답변이 순수 텍스트가 아니라 문단·목록으로 올 수도 있다 */
.blog_ai_body .nxt_faq-section h3 + div > p,
.blog_ai_body .nxt_faq-section h3 + div > ul,
.blog_ai_body .nxt_faq-section h3 + div > ol,
.blog_ai_body .faqContentBox h3 + div > p,
.blog_ai_body .faqContentBox h3 + div > ul,
.blog_ai_body .faqContentBox h3 + div > ol {
	margin: 0;
}

/* 일부 글은 FAQ 섹션 제목이 h2 가 아니라 h3 다(270·271).
   질문 h3 는 카드 안에 있으므로, 섹션의 직계 자식 h3 만 골라 제목으로 되돌린다. */
.blog_ai_body .nxt_faq-section > h3 {
	margin: 80px 0 26px;
	padding-left: 0;
	font-family: var(--f-bold);
	font-size: 24px;
	font-weight: 700;
	line-height: 36px;
}

/* 그 제목 h3 의 다음 형제는 **답변이 아니라 카드 묶음(`div.space-y-4`)** 이다.
   위의 `h3 + div` 규칙이 그대로 걸리면 목록 전체에 좌측 패딩 30px 과 윗줄이 생긴다.
   섹션 직계인 경우만 골라 되돌린다. */
.blog_ai_body .nxt_faq-section > h3 + div {
	margin: 0;
	padding: 0;
	border-top: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

.blog_ai_body .nxt_faq-section h3 + div > ul,
.blog_ai_body .nxt_faq-section h3 + div > ol,
.blog_ai_body .faqContentBox h3 + div > ul,
.blog_ai_body .faqContentBox h3 + div > ol {
	padding-left: 18px;
}

.blog_ai_body .nxt_faq-section h3 + div li,
.blog_ai_body .faqContentBox h3 + div li {
	margin: 0 0 4px;
}

.blog_ai_body .nxt_faq-section h3 + div li:last-child,
.blog_ai_body .faqContentBox h3 + div li:last-child {
	margin-bottom: 0;
}


/* ------------------------------------------------------------
   13-B. FAQ 세 번째 계열 — 아코디언 (.nxt_card + .nxt_accordion-button)
   2026-09-03 신설(4단계-V). 최고참 세대 50건(2025-06-12 ~ 09-20)에서만 쓴다.

   ```
   <h2 class="nxt_content-section">자주 묻는 질문 (FAQ)</h2>
   <div class="space-y-4" id="faqAccordion">
     <div class="nxt_card">
       <button class="nxt_accordion-button …">질문 텍스트<svg class="accordion-arrow">…</svg></button>
       <div class="nxt_accordion-content hidden …"><span>답변 텍스트</span></div>
     </div>
   </div>
   ```

   50건 전수 조사 결과 구조가 균일하다 — 카드는 항상 `button + div`,
   버튼은 `맨 텍스트 + svg` 하나, 답변 div 는 `span` 하나에 `hidden` 이 붙어 있다.
   차이는 문항 개수(5·6·7)와 래퍼 클래스(`space-y-4` / 28 만 `space-y-2`)뿐이다.

   ⚠ 앞의 두 계열과 달리 **접기 동작을 살린다.**
     `blog-contents.php` 의 FAQ JS 가 `.hidden` 을 토글하는데 그 규칙은 10번 섹션에 이미 있다.
     그래서 여기서 `.nxt_accordion-content` 에 **`display` 를 절대 지정하지 않는다.**
     `display:block` 을 주면 `.hidden` 과 특이도가 같아져 나중 규칙인 이쪽이 이겨
     **답변이 항상 펼쳐진 채 고정되고 버튼이 죽는다.**

   ⚠ 질문은 `<button>` 이다. 브라우저 기본 버튼 스타일(회색 배경·테두리·가운데 정렬·
     자체 폰트)을 전부 걷어내야 나머지 FAQ 와 같은 모양이 된다.
   ------------------------------------------------------------ */
.blog_ai_body .nxt_card {
	overflow: hidden;   /* 버튼 배경이 카드 라운드 밖으로 새지 않게 */
	margin: 0 0 10px;
	border: 0;
	border-radius: 10px;
	background: #f8f8f8;
}

.blog_ai_body .nxt_card:last-child {
	margin-bottom: 0;
}

/* 질문 */
.blog_ai_body .nxt_accordion-button {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 24px;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-family: var(--f-semibold);
	font-size: 18px;
	font-weight: 600;
	line-height: 26px;
	color: #111;
	text-align: left;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

/* 화살표 — svg 에 width/height 속성이 없고 크기를 Tailwind `w-6 h-6` 에 맡기고 있다.
   Tailwind 를 안 쓰므로 크기를 직접 준다. 안 주면 SVG 기본값으로 거대해진다.
   `stroke="currentColor"` 라 color 로 선 색이 정해진다. */
/* `svg` 를 붙여 둔다 — 6번 섹션의 `.blog_ai_body svg.w-6.h-6`(0,3,1) 와 특이도를 맞추고,
   이 규칙이 파일에서 더 뒤에 있으므로 20px 가 유지된다. 빼면 24px 로 덮인다. */
.blog_ai_body .nxt_accordion-button svg.accordion-arrow {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 3px;
	color: #ff5029;
	transition: transform 0.2s ease;
}

/* JS 가 열린 버튼에 `active` 를 붙인다 */
.blog_ai_body .nxt_accordion-button.active svg.accordion-arrow {
	transform: rotate(180deg);
}

/* 답변 — 위에 적은 대로 display 를 건드리지 않는다 */
.blog_ai_body .nxt_accordion-content {
	margin: 0 24px;
	padding: 14px 0 24px;
	border-top: 1px solid rgba(0, 0, 0, 0.05);
	font-family: var(--f-light);
	font-size: 16px;
	font-weight: 300;
	line-height: 26px;
	color: #111;
}

.blog_ai_body .nxt_accordion-content > p,
.blog_ai_body .nxt_accordion-content > ul,
.blog_ai_body .nxt_accordion-content > ol {
	margin: 0;
}

.blog_ai_body .nxt_accordion-content > ul,
.blog_ai_body .nxt_accordion-content > ol {
	padding-left: 18px;
}

.blog_ai_body .nxt_accordion-content li {
	margin: 0 0 4px;
}

.blog_ai_body .nxt_accordion-content li:last-child {
	margin-bottom: 0;
}


/* ------------------------------------------------------------
   14. 안내 박스 — .info-box (default / green / red)
   피그마 : PC node 2557-3320(point) · 2557-3392(tips) · 2557-3399(Caution)
           MO node 2557-4122 · 2557-4163 · 2557-4170
   Frame 4434894 영역. 리뉴얼 10건이 세 종류를 모두 쓴다(10/10/10).

   ⚠ 이 컴포넌트만 `!important` 를 쓴다(규칙 6 의 예외).
     배경색·글자색이 **본문 인라인 style** 로 박혀 있어 선택자 특이도로는 못 이긴다.
       <div class="info-box info-box-default …" style="background-color:#EBF8FF; …">
         <div … style="color:#3B82F6;">💡 핵심 포인트</div>
     인라인 style 을 이기는 방법은 !important 뿐이고, 본문 수정은 규칙 1 로 금지돼 있다.

   ⚠ green 만 마크업 구조가 다르다.
       default/red : .info-box > div(제목) + div > ul
       green       : .info-box > div > (span(TIP) + div > ul)
     그래서 제목 규칙을 variant 별로 나눠 쓴다.
   ------------------------------------------------------------ */
.blog_ai_body .info-box {
	margin: 26px 0;
	padding: 24px 26px;
	border: 0;
	border-radius: 10px;
}

.blog_ai_body .info-box-default { background-color: #f0f9fb !important; }
.blog_ai_body .info-box-green   { background-color: #ecf8f4 !important; }
.blog_ai_body .info-box-red     { background-color: #fff5f5 !important; }

/* blue — 2025-10-28 등록분에서 나온 네 번째 variant (2026-09-03, 4단계-T).
   `📋 중요 안내` 고지 박스로만 쓰인다.

   ⚠ 이 variant 만 **인라인 style 이 없다.** 그래서 `!important` 를 쓰지 않는다(규칙 6).
     위 셋과 나란히 두되 `!important` 가 빠진 건 실수가 아니라 의도다.

   색은 새로 만들지 않고 default 와 같은 값을 쓴다. default(`💡 핵심 포인트`)와
   성격이 같은 정보 박스라 색을 따로 두면 근거 없는 네 번째 색이 생긴다. */
.blog_ai_body .info-box-blue    { background-color: #f0f9fb; }

/* yellow · purple — 2025-10-02 등록 2건(68·73)에만 있다. 둘 다 `<h3>이모지 …</h3>` + `<ul>`.
   yellow `⚠️ …`    → 경고이므로 red 와 같은 값
   purple `⭐ … 팁`  → TIP 이므로 green(tips) 과 같은 값
   blue 와 마찬가지로 인라인 style 이 없어 `!important` 를 쓰지 않는다. */
.blog_ai_body .info-box-yellow  { background-color: #fff5f5; }
.blog_ai_body .info-box-purple  { background-color: #ecf8f4; }

/* variant 는 이 여섯 가지가 전부다 — 본문에서 `info-box-XXX` 를 직접 뽑아
   전수 census 했다(2026-09-03, 노출글 251건 중 info-box 보유 251건 전수). 4단계-U 참고. */

/* 제목 — default / red 는 제목이 직계 첫 자식이다.
   태그는 글마다 다르다. `<div class="flex items-center …">` 인 글도 있고
   **`<h3 class="flex items-center …">`** 인 글도 있다(2026-04-23 등록 268~297, 30건).
   h3 로 오면 `.blog_ai_body h3 { margin:26px 0 10px }` 가 걸려 박스 안이 위로 떠 보인다.
   그래서 태그를 특정하지 않고 `> :first-child` 로 받는다. */
.blog_ai_body .info-box-default > :first-child,
.blog_ai_body .info-box-red > :first-child,
/* blue·yellow·purple 은 제목이 `<h3>📋 중요 안내</h3>` — 이모지가 span 이 아니라 **맨 텍스트**다.
   flex 로 두면 통째로 익명 아이템 하나가 되어 그냥 한 줄로 흐른다. 문제 없다. */
.blog_ai_body .info-box-blue > :first-child,
.blog_ai_body .info-box-yellow > :first-child,
.blog_ai_body .info-box-purple > :first-child {
	display: flex;
	align-items: center;
	margin: 0 0 10px;
	font-family: var(--f-semibold);
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
	color: #111 !important;   /* 인라인 style 의 파랑/빨강을 덮는다 */
}

/* ⚠ 제목이 **목록까지 같이 감싸고 있는** 글이 하나 있다 (id 9, 2025-07-07).
   `<h>` 는 존재하지 않는 태그인데 제목 텍스트와 `<ul>` 을 함께 품고 있다.

     <div class="info-box info-box-blue"><h …>펫보험의 핵심 기능 🔑
       <ul><li>…</li></ul>
     </h></div>

   위 제목 규칙의 `display:flex` 가 걸리면 텍스트와 목록이 **좌우로 쪼개진다.**
   전수 조사(2026-09-03, 노출글 308건) 결과 이 형태는 **이 한 건뿐**이라
   `h` 태그만 콕 집어 block 으로 되돌린다. `:first-child` 를 붙여야 제목 규칙보다
   특이도가 높아진다(0,3,1 > 0,3,0). 나머지 값(20px 제목 서체·아래 여백)은 그대로 쓴다. */
.blog_ai_body .info-box > h:first-child {
	display: block;
}

.blog_ai_body .info-box > h:first-child > ul {
	margin-top: 10px;
}

/* 제목 앞 이모지(💡 / ⚠️) — 마크업에 이미 있다.
   283~286 처럼 이모지 없이 문구만 있는 글도 있는데, 그땐 이 규칙이 안 걸릴 뿐이다. */
.blog_ai_body .info-box-default > :first-child > span:first-child,
.blog_ai_body .info-box-red > :first-child > span:first-child,
.blog_ai_body .info-box-blue > :first-child > span:first-child,
.blog_ai_body .info-box-yellow > :first-child > span:first-child,
.blog_ai_body .info-box-purple > :first-child > span:first-child {
	flex: none;
	margin-right: 8px;
	font-size: 20px;
	line-height: 28px;
}

/* green 의 'TIP' — 마크업은 초록 pill 인데 시안은 아이콘 + 검정 텍스트다.
   pill 배경을 걷어내고 ✅ 를 붙여 default/red 의 제목과 같은 모양으로 맞춘다. */
.blog_ai_body .info-box-green > div:first-child > span:first-child {
	display: block;
	margin: 0 0 10px;
	padding: 0;
	border-radius: 0;
	background: transparent !important;
	font-family: var(--f-semibold);
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
	color: #111;
}

.blog_ai_body .info-box-green > div:first-child > span:first-child:before {
	content: '✅';
	margin-right: 8px;
	font-size: 20px;
}

/* 목록 — 기본 마커를 끄고 점을 직접 그린다(시안 4px `#5e504c`) */
.blog_ai_body .info-box ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 번호 목록은 다르게 다룬다 (2026-09-03, 4단계-V).
   전수 조사 결과 **노출글 55건**이 info-box 안에 `<ol>` 을 쓴다(2025-06-12 ~ 2026-05-26).
   그중 33건은 이미 리뉴얼 범위 안이었고, `ol` 규칙이 없어
   **기본 숫자 마커와 아래 `li:before` 의 점이 같이 찍히고 있었다.**

   ul 처럼 마커를 끄지 않는다 — `1. 2. 3.` 은 순서라는 의미를 담고 있어서
   점으로 바꾸면 정보가 사라진다. 숫자를 살리고 **점만 끈다.**
   특이도가 아래 `li` 규칙들보다 높아 순서와 무관하게 이긴다. */
.blog_ai_body .info-box ol {
	margin: 0;
	padding-left: 22px;
}

.blog_ai_body .info-box ol > li {
	padding-left: 0;
}

.blog_ai_body .info-box ol > li:before {
	content: none;
}

/* 내용은 두 가지 형태로 온다. 리뉴얼 10건 기준
     <ul class="list-disc list-inside space-y-1"><li>…</li></ul>   ← 6건
     <p class="my-1">…</p>                                          ← 4건 (396·397·399·400)
   글자 규격은 같게 두고, 점(•)은 li 에만 붙인다. */
.blog_ai_body .info-box li,
.blog_ai_body .info-box p {
	position: relative;
	margin: 0 0 4px;
	list-style: none;
	font-family: var(--f-regular);
	font-size: 16px;
	font-weight: 400;
	line-height: 30px;
	color: #111;
}

.blog_ai_body .info-box li {
	padding-left: 12px;   /* 점 4 + 간격 8 */
}

.blog_ai_body .info-box li:last-child,
.blog_ai_body .info-box p:last-child {
	margin-bottom: 0;
}

/* 본문 문단의 강조는 오렌지지만(3번 섹션) 안내 박스 안에서는 검정이다.
   `<p class="my-1">` 형태가 3번 섹션의 `p strong` 규칙에 걸려 오렌지로 나왔다. */
.blog_ai_body .info-box p strong,
.blog_ai_body .info-box p b {
	color: #111;
}

.blog_ai_body .info-box li:before {
	content: '';
	position: absolute;
	left: 0;
	top: 13px;   /* (줄높이 30 - 점 4) / 2 */
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #5e504c;
}


/* ------------------------------------------------------------
   14-B. 진행 단계 — .nxt_process-step-number
   2026-09-03 신설. 노출글 10건(2025-06-12 ~ 07-14)에서만 쓴다.

   ```
   <ol class="space-y-4 mt-6">                 ← 9건. id 5 만 <div>
     <li class="flex items-start">             ← id 5 만 <div>
       <div class="nxt_process-step-number">1</div>
       <div>
         <h4 class="nxt_process-step-title">…</h4>   ← id 5·8 은 <h3>
         <p class="text-sm …">…</p>
       </div>
     </li>
   </ol>
   ```

   10건 전수 조사 결과 **자식 구조는 완전히 균일**하다 — 항상 `번호 div + 내용 div`.
   부모가 `li` 냐 `div` 냐, 제목이 `h4` 냐 `h3` 냐만 갈린다.
   그래서 **부모를 건드리지 않고 번호 div 와 그 다음 형제만으로** 레이아웃을 짠다.

   ⚠ `flex items-start` 는 Tailwind 라 죽어 있다. 그대로 두면 번호와 내용이
     **위아래로 쌓인다.** float 로 나란히 세운다(모든 브라우저에서 동작).

   ⚠ float 는 부모가 감싸주지 않아 글이 짧으면 다음 항목으로 삐져나온다.
     그래서 내용 div 에 `overflow:hidden`(BFC)으로 옆 칸을 만들고
     `min-height` 를 배지 크기와 같게 줘서 부모 높이를 보장한다.
   ------------------------------------------------------------ */
.blog_ai_body .nxt_process-step-number {
	float: left;
	width: 30px;
	height: 30px;
	margin: 0 16px 0 0;
	border-radius: 50%;   /* 3줄 요약 배지(r5)와 달리 여기는 원형이다 */
	background: #ff5029;
	font-family: var(--f-bold);
	font-size: 16px;
	font-weight: 800;
	line-height: 30px;
	color: #fff;
	text-align: center;
}

/* 내용 칸 — float 옆에 서고, 자기 높이를 스스로 갖는다 */
.blog_ai_body .nxt_process-step-number + div {
	overflow: hidden;
	min-height: 30px;   /* 배지 높이와 같게 — 글이 짧아도 배지가 안 삐져나온다 */
}

/* 제목 — 본문 h3/h4 의 큰 윗여백이 걸리면 배지와 높이가 어긋난다 */
.blog_ai_body .nxt_process-step-title {
	margin: 0 0 6px;
	font-family: var(--f-semibold);
	font-size: 18px;
	font-weight: 600;
	line-height: 30px;   /* 배지와 첫 줄을 맞춘다 */
	color: #111;
}

/* 설명 — `p.text-sm` 은 하단 고지 문구용 여백(20/26)을 갖고 있어 여기선 지운다 */
.blog_ai_body .nxt_process-step-title + p,
.blog_ai_body .nxt_process-step-number + div > p.text-sm {
	margin: 0;
	font-size: 16px;
	line-height: 26px;
	color: #111;
}

/* 부모가 <ol> 인 9건은 **마커 숫자와 배지 숫자가 이중으로 찍힌다.**
   `.blog_ai_body ol { list-style: decimal }` 이 걸리기 때문이다.

   `li.flex.items-start` 로 잡으면 안 된다 — 전수 조사 결과 그 조합은
   61개 중 33개만 process-step 이고 나머지는 다른 용도다(잘못 잡으면 남의 마커가 사라진다).
   번호 div 를 **직계 자식으로 가진** li 만 골라야 해서 `:has()` 를 쓴다.

   ⚠ `:has()` 미지원 브라우저에서는 이 두 규칙이 통째로 무시된다.
     그래도 **지금과 똑같은 상태(숫자 중복)로 남을 뿐** 더 나빠지지 않는다.
     그래서 다른 선택자와 묶지 않고 반드시 단독으로 둔다. */
.blog_ai_body ol:has(> li > .nxt_process-step-number) {
	padding-left: 0;
}

.blog_ai_body li:has(> .nxt_process-step-number) {
	list-style: none;
}


/* ------------------------------------------------------------
   14-C. 카드 3단 — .infographic-item
   2026-09-03 신설. **노출글 1건(id 2)에서만** 쓴다. 3개가 한 묶음이다.

   ```
   <div class="grid grid-cols-1 sm:grid-cols-3 gap-x-6 gap-y-4 my-6">   ← 자식 3개가 전부 카드
     <div class="infographic-item flex flex-col items-center text-center p-4
                 bg-purple-50 rounded-lg shadow hover:shadow-md">
       <svg class="w-12 h-12 text-purple-500 mb-3">…</svg>
       <h5 class="font-semibold text-purple-700">…</h5>
       <p class="text-sm text-slate-600">…</p>
     </div>
   </div>
   ```

   전수 조사 결과 **1종**이다. 자식은 항상 `svg + h5 + p` 순.
   원래 의도는 "아이콘 위, 가운데 정렬, 3단 그리드 카드" 인데
   `grid` · `flex` · `bg-purple-50` 이 전부 Tailwind 라 죽어서 **맨 블록으로 흘러내린다.**

   색은 새로 만들지 않는다 — 보라 계열 대신 FAQ 카드와 같은 `#f8f8f8`,
   아이콘은 강조색 `#ff5029` 로 맞춘다.
   ------------------------------------------------------------ */
.blog_ai_body .infographic-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 0 16px;   /* 아래 그리드가 안 걸릴 때의 세로 간격 (fallback) */
	padding: 24px 20px;
	border: 0;
	border-radius: 10px;
	background: #f8f8f8;
	text-align: center;
}

/* 아이콘 — 크기는 6번 섹션의 `svg.w-12.h-12`(48px) 가 담당한다. 여기선 색과 여백만. */
.blog_ai_body .infographic-item > svg {
	flex: none;
	margin: 0 0 12px;
	color: #ff5029;
}

/* 제목 — h5 는 본문 규칙이 없어 브라우저 기본값(작은 글씨 + 큰 여백)으로 나온다 */
.blog_ai_body .infographic-item > h5 {
	margin: 0 0 8px;
	font-family: var(--f-semibold);
	font-size: 18px;
	font-weight: 600;
	line-height: 26px;
	color: #111;
}

/* 설명 — `p.text-sm` 이 하단 고지용 여백(20/26)을 갖고 있어 여기선 지운다 */
.blog_ai_body .infographic-item > p,
.blog_ai_body .infographic-item > p.text-sm {
	margin: 0;
	font-family: var(--f-light);
	font-size: 15px;
	font-weight: 300;
	line-height: 24px;
	color: #111;
}

/* 3단 그리드 — 묶음 div 에 쓸 만한 전용 클래스가 없어 `:has()` 로 잡는다.

   ⚠ `:has()` 미지원 브라우저에서는 이 두 규칙이 무시되고
     카드가 **세로로 하나씩 쌓인다**(위 `margin-bottom:16px` 이 간격을 준다).
     모양이 달라질 뿐 깨지지 않는다. 그래서 단독으로 둔다. */
.blog_ai_body div:has(> .infographic-item) {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 26px 0;
}

/* 그리드가 걸렸으면 gap 이 간격을 주므로 카드의 fallback 여백은 걷어낸다 */
.blog_ai_body div:has(> .infographic-item) > .infographic-item {
	margin-bottom: 0;
}


/* ------------------------------------------------------------
   14-D. 보더 카드 — Tailwind 유틸리티로만 만든 박스
   2026-09-03 신설. **전용 클래스가 없다.** 최고참 세대가 `rounded-lg`/`rounded-xl` +
   `border` 조합으로 그때그때 만든 박스들이라 클래스 문구가 글마다 다르다.

     p-4 bg-gray-50 rounded-lg border border-gray-200          ← id 10 (4개, 2단 그리드)
     my-6 p-5 border border-orange-300 rounded-xl bg-orange-50 shadow
     p-6 border border-slate-200 rounded-lg
     p-4 border rounded-lg
     …

   전수 조사(2026-09-03) 결과 **`rounded-lg|xl` 과 `border` 를 함께 가진 div** 로 잡으면
   의도가 "테두리 박스"인 것만 정확히 걸린다. 대상은 **15건**
   (2·5·8·9·10·11·12·14·15·18·20·21·22·23·48).

   ⚠ **`:not(.info-box)` 가 없으면 안 된다.**
     `info-box-green` 의 클래스가 `info-box info-box-green my-8 p-5 rounded-lg border` 라
     **노출글 174건이 이 선택자에 걸린다.** 특이도도 (0,3,1) 로 info-box 규칙(0,2,1)보다 높아
     배경·보더가 통째로 덮인다. 조사에서 이걸 못 봤으면 174건이 망가졌다.
     `info-box-blue` 도 10건이 `rounded-xl … border border-purple-200` 을 갖고 있다.

   표와 같은 보더 언어(`1px solid rgba(0,0,0,.06)` + radius 10)를 써서 따로 놀지 않게 한다.
   ------------------------------------------------------------ */
.blog_ai_body div.rounded-lg.border:not(.info-box),
.blog_ai_body div.rounded-xl.border:not(.info-box) {
	margin: 0 0 16px;   /* 아래 그리드가 안 걸릴 때의 세로 간격 (fallback) */
	padding: 24px 20px;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 10px;
	background: #fff;
}

/* 첫 요소의 윗여백·마지막 요소의 아랫여백을 지워 패딩과 겹치지 않게 한다.
   내용은 `h3`/`h4` + `p`/`ul` 조합이고 본문 제목 규칙이 큰 윗여백을 갖고 있다. */
.blog_ai_body div.rounded-lg.border:not(.info-box) > :first-child,
.blog_ai_body div.rounded-xl.border:not(.info-box) > :first-child {
	margin-top: 0;
}

.blog_ai_body div.rounded-lg.border:not(.info-box) > :last-child,
.blog_ai_body div.rounded-xl.border:not(.info-box) > :last-child {
	margin-bottom: 0;
}

/* `p.text-sm` 은 하단 고지용 여백(20/26)을 갖고 있어 카드 안에서는 지운다 */
.blog_ai_body div.rounded-lg.border:not(.info-box) > p.text-sm,
.blog_ai_body div.rounded-xl.border:not(.info-box) > p.text-sm {
	margin: 0;
	font-size: 16px;
	line-height: 26px;
}

/* 여러 장이 묶여 있으면 다단으로 세운다.
   묶음 div 의 클래스가 글마다 다르다(`sm:grid-cols-2` · `md:grid-cols-3` · `md:grid-cols-2` …).
   장수도 2·3·4 로 갈려서 열 수를 고정하지 않고 `auto-fit` 으로 채운다.

   ⚠ `div.grid` 만으로 잡으면 안 된다 — 카드가 아닌 grid 가 39건 더 있다.
     카드를 **직계 자식으로 가진** grid 만 골라야 해서 `:has()` 를 쓴다.
     미지원 브라우저에서는 카드가 세로로 쌓인다(위 `margin-bottom` 이 간격을 준다). */
.blog_ai_body div.grid:has(> div.rounded-lg.border:not(.info-box)),
.blog_ai_body div.grid:has(> div.rounded-xl.border:not(.info-box)) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
	margin: 26px 0;
}

.blog_ai_body div.grid:has(> div.rounded-lg.border:not(.info-box)) > div,
.blog_ai_body div.grid:has(> div.rounded-xl.border:not(.info-box)) > div {
	margin-bottom: 0;
}


/* ------------------------------------------------------------
   15. 본문 중간 배너 — .contBanner
   피그마 : PC node 2557-3431 (Frame 2116930257) / MO node 2557-4156

   본문 마크업 :
     <div class="contBanner">
       <a href=""></a>                 ← blog-contents.php 의 JS 가 링크를 채우고
       <div class="bannerWomen">          아래 배너 div 를 이 <a> 안으로 옮긴다
         <div class="cBanInner">
           <div class="cBanImg"><img class="multi" …></div>
           <div class="cBanText">…</div>
         </div>
       </div>
     </div>

   ⚠ **가로 길이(max-width)는 건드리지 않는다.**
     시안 프레임은 520px 이지만 실제 배너는 `blog.css` 의 `max-width:440px` 를 쓴다.
     시안의 가로 폭은 참고하지 않기로 했다(2026-09-02 고객 지시).
     그래서 시안에서 한 줄로 보이는 문구가 실제로는 두 줄로 감긴다. 정상이다.

   ⚠ 높이를 `height` 로 고정하지 않고 `min-height` 로 둔다.
     폭이 시안보다 좁아 문구가 두세 줄로 늘어날 수 있는데,
     고정 높이면 그때 글자가 잘린다.

   기본 규칙은 `blog.css`(전 글 공용)에 있고 여기서 리뉴얼 글만 덮어쓴다.
   `blog.css` 가 나중에 로드되므로 반드시 `.blog_ai_body` 를 붙여 특이도를 높인다.
   ------------------------------------------------------------ */
.blog_ai_body .contBanner {
	height: auto;
	min-height: 80px;
	margin: 26px auto;
	background: #fff;
	border: 1px solid #ff5029;
	border-radius: 10px;
	/* ⚠ 추정값이다. 이 MCP 는 노드의 effects(그림자)를 내려주지 않고
	   공유 이펙트 스타일도 없어서(get_styles 비어 있음) 시안에서 직접 읽을 수 없었다.
	   3배 내보내기 이미지의 여백(위 약 10px / 아래 약 27px)으로 역산했다.
	   피그마에서 "Copy as CSS" 한 정확한 값을 받으면 그대로 교체할 것. */
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

/* blog.css 의 `.cBanInner.arrow { height:82px }` 를 무력화한다.
   높이는 위 min-height 가 정하고, 문구가 여러 줄이면 늘어나야 한다. */
.blog_ai_body .contBanner .cBanInner {
	height: auto;
	min-height: 80px;
	padding: 0 25px;
}

/* blog.css 가 `height:80px!important` 를 박아 둬서 같은 무기가 필요하다.
   단 `img.arrow` 는 제외한다 — 상품 이미지가 아니라 14px 짜리 화살표 아이콘이고,
   blog.css 의 `.cBanImg img.arrow { height:14px!important }` 가 담당한다.
   `:not(.arrow)` 없이 쓰면 특이도가 더 높아 화살표까지 62px 로 키워 버린다. */
.blog_ai_body .contBanner .cBanImg img:not(.arrow) {
	height: 62px !important;
}

/* 화살표는 좌우 패딩(25px)에 맞춰 세운다.
   blog.css 의 `right:20px` 은 예전 패딩(10px) 기준이라 지금은 너무 안쪽으로 들어간다. */
.blog_ai_body .contBanner .cBanImg img.arrow {
	right: 0;
}

.blog_ai_body .contBanner .cBanText {
	font-family: var(--f-bold);
	font-size: 17px;
	font-weight: 700;
	line-height: 34px;
	color: #ff5029;
}

/* 문구를 <strong> 으로 감싼 글이 있다.
     <div class="cBanText"><strong>한화 다이렉트 … 더 알아보기</strong></div>
   그대로 두면 3번 섹션의 `strong { color:#111 }` 이 배너 오렌지를 덮어 검게 나온다.
   배너 안의 인라인 요소는 배너 규격을 그대로 따르게 한다.
   `font: inherit` 는 굵기·크기·줄높이·패밀리를 한 번에 물려받는다. */
.blog_ai_body .contBanner .cBanText strong,
.blog_ai_body .contBanner .cBanText b,
.blog_ai_body .contBanner .cBanText em,
.blog_ai_body .contBanner .cBanText span {
	font: inherit;
	color: inherit;
}


/* ------------------------------------------------------------
   16. 모바일
   ------------------------------------------------------------ */
@media (max-width: 767px) {

	.blog_ai_body {
		padding-top: 30px;   /* 시안 : 썸네일 하단 656 → 첫 블록 686 */
		font-size: 16px;
		line-height: 28px;
	}

	.blog_ai_body h2 {
		margin: 60px 0 20px;
		font-size: 20px;
		line-height: 28px;
	}

	.blog_ai_body h3 {
		margin: 20px 0 6px;
		font-size: 18px;
		line-height: 26px;
	}

	.blog_ai_body h4 {
		margin: 18px 0 6px;
		font-size: 17px;
		line-height: 26px;
	}

	.blog_ai_body p {
		margin: 0 0 20px;
	}

	.blog_ai_body p.text-sm {
		margin: 20px 0;
		font-size: 12px;
		line-height: 18px;
	}

	.blog_ai_body ul,
	.blog_ai_body ol {
		padding-left: 18px;
	}

	/* 표는 래퍼 `div.overflow-x-auto` 가 가로 스크롤을 맡는다.
	   예전엔 표 자체를 display:block 스크롤 컨테이너로 만들었는데,
	   그러면 열 정렬이 무너진다. 래퍼가 살아 있으니 표는 표로 둔다. */
	.blog_ai_body table {
		margin-bottom: 20px;
		border-color: rgba(0, 0, 0, 0.1);
		border-radius: 6px;
		font-size: 14px;
		line-height: 22px;
	}

	.blog_ai_body th,
	.blog_ai_body td {
		padding: 10px 14px;
		border-right-color: rgba(0, 0, 0, 0.1);
		border-bottom-color: rgba(0, 0, 0, 0.1);
	}

	/* 래퍼 없이 본문 루트에 바로 놓인 표는 스스로 스크롤 컨테이너가 되어야 한다.
	   대부분은 `div.overflow-x-auto` 로 감싸여 있지만 감싸지 않은 글이 있다(165·167 — 6열).
	   그대로 두면 모바일에서 화면 밖으로 넘친다.
	   `#nxt_blog-content` 의 **직계** 자식인지로 래퍼 유무를 판별한다. */
	.blog_ai_body #nxt_blog-content > table {
		display: block;
		width: auto;
		min-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* 3줄 요약 — 모바일은 소제목만 번호 배지 옆에 두고
	   본문은 배지 아래에서 전체폭을 쓴다 (PC 는 본문도 들여쓰기) */
	.blog_ai_body #nxt_usp-summary {
		margin: 0 0 30px;   /* 위 간격은 .blog_ai_body 의 padding-top */
	}

	.blog_ai_body #nxt_usp-summary h2 {
		height: 36px;
		margin: 0 0 20px;
		padding: 0 14px;
	}

	.blog_ai_body #nxt_usp-summary h2:before {
		width: 11px;
		height: 20px;
	}

	.blog_ai_body #nxt_usp-summary h2:after {
		font-size: 16px;
		line-height: 24px;
	}

	.blog_ai_body #nxt_usp-summary li,
	.blog_ai_body #nxt_usp-summary p {
		margin-bottom: 16px;
		padding-left: 0;
		font-size: 14px;
		line-height: 22px;
	}

	.blog_ai_body #nxt_usp-summary li:before {
		top: 0;
		width: 24px;
		height: 24px;
		font-size: 12px;
		line-height: 24px;
	}

	.blog_ai_body #nxt_usp-summary li > strong:first-child {
		min-height: 24px;
		padding-left: 32px;   /* 번호 배지 24 + 간격 8 */
		font-size: 16px;
		line-height: 24px;
	}

	/* 목차 카드 */
	.blog_ai_body #nxt_page-toc {
		margin-bottom: 50px;   /* 시안 : 목차 하단 1393 → 다음 블록 1443 */
		border-radius: 8px;
	}

	.blog_ai_body #nxt_page-toc > div:first-child {
		padding: 12px 16px;
	}

	.blog_ai_body #nxt_page-toc > div:first-child > :first-child {
		font-size: 14px;
		line-height: 18px;
	}

	.blog_ai_body #nxt_toggle-toc-button {
		font-size: 12px;
		line-height: 18px;
	}

	.blog_ai_body #nxt_toggle-toc-button:after {
		width: 8px;
		height: 8px;
		margin-left: 4px;
	}

	.blog_ai_body #nxt_page-toc-nav {
		padding: 14px 16px;
		border-radius: 8px;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
	}

	.blog_ai_body #nxt_page-toc-nav li {
		margin-bottom: 21px;   /* 10 + 구분선 1 + 10 */
		padding-left: 22px;    /* 번호 12 + 간격 10 */
	}

	.blog_ai_body #nxt_page-toc-nav li:before {
		text-align: left;
        width: 16px;
        font-size: 13px;
        line-height: 20px;
	}

	.blog_ai_body #nxt_page-toc-nav li:not(:last-child):after {
		left: 22px;
		margin-top: 10px;
	}

	.blog_ai_body #nxt_page-toc-nav a.toc-link {
		font-size: 13px;
		line-height: 20px;
	}

	/* 자주 묻는 질문 — 두 계열 모두. 계열 구분은 PC 쪽 13번 주석 참고 */
	.blog_ai_body .nxt_faq-section > div > div,
	.blog_ai_body .faqContentBox:not(.nxt_faq-section) > div {
		padding: 16px 18px;
		border-radius: 6px;
	}

	.blog_ai_body .nxt_faq-section h3,
	.blog_ai_body .faqContentBox h3 {
		padding-left: 24px;   /* 라벨 16 + 간격 8 */
		font-size: 15px;
		line-height: 22px;
	}

	.blog_ai_body .nxt_faq-section h3 > span:first-child,
	.blog_ai_body .nxt_faq-section h3 + div > span:first-child,
	.blog_ai_body .faqContentBox h3 > span:first-child,
	.blog_ai_body .faqContentBox h3 + div > span:first-child {
		font-size: 16px;
		line-height: 22px;
	}

	.blog_ai_body .nxt_faq-section h3 + div,
	.blog_ai_body .faqContentBox h3 + div {
		padding-left: 24px;
		font-size: 14px;
		line-height: 22px;
	}

	/* 아코디언 계열(13-B) — 위 두 계열과 같은 비율로 줄인다 */
	.blog_ai_body .nxt_card {
		border-radius: 6px;
	}

	.blog_ai_body .nxt_accordion-button {
		gap: 8px;
		padding: 16px 18px;
		font-size: 15px;
		line-height: 22px;
	}

	.blog_ai_body .nxt_accordion-button svg.accordion-arrow {
		width: 16px;
		height: 16px;
		margin-top: 3px;
	}

	.blog_ai_body .nxt_accordion-content {
		margin: 0 18px;
		padding: 12px 0 16px;
		font-size: 14px;
		line-height: 22px;
	}

	.blog_ai_body .nxt_faq-section > h3 {
		margin: 60px 0 20px;
		padding-left: 0;
		font-size: 20px;
		line-height: 28px;
	}

	.blog_ai_body .nxt_faq-section > h3 + div {
		padding-left: 0;
	}

	/* 안내 박스 */
	.blog_ai_body .info-box {
		margin: 20px 0;
		padding: 16px;
		border-radius: 6px;
	}

	.blog_ai_body .info-box-default > :first-child,
	.blog_ai_body .info-box-red > :first-child,
	.blog_ai_body .info-box-blue > :first-child,
	.blog_ai_body .info-box-yellow > :first-child,
	.blog_ai_body .info-box-purple > :first-child,
	.blog_ai_body .info-box-green > div:first-child > span:first-child {
		font-size: 18px;
		line-height: 24px;
	}

	.blog_ai_body .info-box-default > :first-child > span:first-child,
	.blog_ai_body .info-box-red > :first-child > span:first-child,
	.blog_ai_body .info-box-blue > :first-child > span:first-child,
	.blog_ai_body .info-box-yellow > :first-child > span:first-child,
	.blog_ai_body .info-box-purple > :first-child > span:first-child,
	.blog_ai_body .info-box-green > div:first-child > span:first-child:before {
		margin-right: 6px;
		font-size: 18px;
	}

	.blog_ai_body .info-box li,
	.blog_ai_body .info-box p {
		margin-bottom: 6px;
		font-family: var(--f-light);
		font-weight: 300;
		font-size: 14px;
		line-height: 20px;
	}

	/* 진행 단계(14-B) */
	.blog_ai_body .nxt_process-step-number {
		width: 24px;
		height: 24px;
		margin-right: 12px;
		font-size: 12px;
		line-height: 24px;
	}

	.blog_ai_body .nxt_process-step-number + div {
		min-height: 24px;
	}

	.blog_ai_body .nxt_process-step-title {
		font-size: 16px;
		line-height: 24px;
	}

	.blog_ai_body .nxt_process-step-title + p,
	.blog_ai_body .nxt_process-step-number + div > p.text-sm {
		font-size: 14px;
		line-height: 22px;
	}

	/* 카드 3단(14-C) — 모바일은 1단. 원본 마크업도 `grid-cols-1 sm:grid-cols-3` 이라 같은 의도다 */
	.blog_ai_body div:has(> .infographic-item) {
		grid-template-columns: 1fr;
		gap: 12px;
		margin: 20px 0;
	}

	.blog_ai_body .infographic-item {
		margin-bottom: 12px;
		padding: 20px 16px;
		border-radius: 6px;
	}

	.blog_ai_body .infographic-item > svg {
		margin-bottom: 10px;
	}

	.blog_ai_body .infographic-item > h5 {
		font-size: 16px;
		line-height: 24px;
	}

	.blog_ai_body .infographic-item > p,
	.blog_ai_body .infographic-item > p.text-sm {
		font-size: 14px;
		line-height: 22px;
	}

	/* 보더 카드(14-D) — 모바일은 1단 */
	.blog_ai_body div.rounded-lg.border:not(.info-box),
	.blog_ai_body div.rounded-xl.border:not(.info-box) {
		margin-bottom: 12px;
		padding: 18px 16px;
		border-radius: 6px;
	}

	.blog_ai_body div.rounded-lg.border:not(.info-box) > p.text-sm,
	.blog_ai_body div.rounded-xl.border:not(.info-box) > p.text-sm {
		font-size: 14px;
		line-height: 22px;
	}

	.blog_ai_body div.grid:has(> div.rounded-lg.border:not(.info-box)),
	.blog_ai_body div.grid:has(> div.rounded-xl.border:not(.info-box)) {
		grid-template-columns: 1fr;
		gap: 12px;
		margin: 20px 0;
	}

	.blog_ai_body .info-box li:before {
		top: 8px;   /* (줄높이 20 - 점 4) / 2 */
	}

	/* 본문 중간 배너 — 가로 폭은 blog.css 값(100%) 그대로 둔다 */
	.blog_ai_body .contBanner {
		min-height: 74px;
		margin: 20px auto;
		border-radius: 6px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
	}

	.blog_ai_body .contBanner .cBanInner {
		height: auto;
		min-height: 74px;
		padding: 0 17px;
	}

	.blog_ai_body .contBanner .cBanImg img:not(.arrow) {
		height: 48px !important;
	}

	.blog_ai_body .contBanner .cBanText {
		font-size: 15px;
		line-height: 21px;
	}
}