@charset "utf-8";

/* 블로그형 페이지: Pretendard */
body.driver-blog {overflow-x: hidden !important;}
.topBnr{display:none;}
.blog-wrap,
.blog-wrap * {font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;}
.blog-wrap { width: 100%; max-width: 840px; margin: 80px auto; height: auto;}

/* 타이포 */
.blog-h1 { margin: 24px 0 8px ; font-size: clamp(24px, 4vw, 44px); font-weight: 600; line-height: 1.35; color: #000; letter-spacing: -0.02em; }
.blog-h2 { margin: 0 0 24px; font-size: clamp(22px, 3.5vw, 28px); font-weight: 600; line-height: 1.35; color: #000; letter-spacing: -0.02em; }
.blog-h3 { margin: 0 0 18px; font-size: 24px; font-weight: 600; line-height: 1.35; color: #000; }
.blog-h4 { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.35; color: #000; }
.blog-lead { margin: 0 0 60px; font-size: 18px; line-height: 1.65; color: #000; font-weight: 300;}
.blog-txt { margin: 0; font-size: 18px; line-height: 1.65; color: #000; }

/* 개별 요소 */
.bold { font-weight: 600; }
.pd-l { padding-left: 10px; }

/* 섹션 공통 (이미지·표·본문 패턴 동일) */
.blog-sec { margin-bottom: 80px; border-bottom: 1px solid #D8D8D8; }
/* .blog-sec:last-of-type { margin-bottom: 0; border-bottom: 0; } */
.blog-fig { margin: 0 0 60px; }
.blog-img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 14px; }

/* 목차 박스 */
.blog-toc { margin: 0 0 60px; padding: 24px; background: #F9F9F9; border: 1px solid #28A166; border-radius: 8px; }
.blog-toc-lst { margin: 0 0 26px; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.blog-toc-li:nth-child(1) { grid-column: 1; grid-row: 1; }
.blog-toc-li:nth-child(2) { grid-column: 2; grid-row: 1; }
.blog-toc-li:nth-child(3) { grid-column: 1; grid-row: 2; }
.blog-toc-lst a { color: #000; font-size: 16px; text-underline-offset: 1px; }
.blog-toc-lst a:hover {  text-decoration: underline;}

/* 아이콘+소제목 줄 (💡 핵심요약 등) */ 
.blog-panel-hd { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; }
.blog-panel-ico { font-size: 22px; line-height: 1; }

/* 표 래퍼·공통 표 */
.blog-tbl-wrap { overflow-x: auto;  margin: 0 0 24px; width: 598px; }
.blog-tbl-wrap > .blog-h3:first-child { margin-top: 0; margin-bottom: 12px; }
.blog-panel { margin: 0; }
.blog-tbl { border-radius: 8px; border: 1px solid #007F41; width: 100%; border-collapse: separate; border-spacing: 0; font-size: 16px; line-height: 1.5; overflow: hidden; table-layout: auto; }
.blog-tbl thead th { padding: 10px 20px; background: #28A166; color: #fff; font-weight: 500; text-align: center; border: 0; border-right: 1px solid #D8D8D8; border-bottom: 1px solid #D8D8D8; word-break: break-word; overflow-wrap: break-word; white-space: normal; }
.blog-tbl thead th:last-child { border-right: 0; }
.blog-tbl tbody th { padding: 10px 20px; text-align: center; font-weight: 500; color: #007F41; background: #F9F9F9; border-top: 1px solid #D8D8D8; border-right: 1px solid #D8D8D8; word-break: break-word; overflow-wrap: break-word; white-space: normal; }
.blog-tbl tbody th:last-child { border-right: 0; }
.blog-tbl tbody td { padding: 10px 20px; text-align: center; color: #000; background: #fff; border-top: 1px solid #D8D8D8; border-right: 1px solid #D8D8D8; vertical-align: middle; word-break: break-word; overflow-wrap: break-word; white-space: normal;}
.blog-tbl tbody td:last-child { border-right: 0; }
.blog-tbl tbody tr:first-child th, .blog-tbl tbody tr:first-child td { border-top: 0; }

/* 회색 안내 박스 */
.blog-note { margin: 0 0 60px; padding: 20px 24px; background: #F9F9F9; border-radius: 8px; border: 1px solid #D8D8D8; }
.blog-note .blog-tip-ico { margin-right: 6px; }
.blog-key .blog-tbl-wrap { margin-bottom: 0;}

.blog-block-02 ul.blog-note { margin-bottom:24px;}

/* 한 줄 팁 */
.blog-tip { margin: 0 0 28px; }
.blog-tip-ico { margin-right: 6px; }
.blog-tip--tight { margin: 16px 0 0; }

/* 소제목+리드 묶음 */
.blog-stack { margin: 60px 0 0; }
.blog-stack .blog-lead { margin-bottom: 24px; }

/* 체크 아이콘 리스트 */
.blog-list-chk { margin: 0 0 28px; padding: 20px 22px; list-style: none; background: #fff; border: 1px solid #eee; border-radius: 14px; }
.blog-list-chk li.blog-txt { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; line-height: 1.55; }
.blog-list-chk li.blog-txt:last-child { margin-bottom: 0; }
.blog-note-ico {width: 28px;}

/* 확인 포인트 박스 */
.blog-point { margin: 0; padding: 18px 20px; background: #fff; border: 1px solid #eee; border-radius: 14px; }
.blog-point-ttl { margin: 0 0 12px; font-size: 15px; font-weight: 800; color: #111; }
.blog-point-lst { margin: 0; padding: 0 0 0 18px; list-style: disc; }
.blog-point-lst li { margin-bottom: 8px; }
.blog-point-lst li:last-child { margin-bottom: 0; }


/* CTA */
.blog-cta-wrap { text-align: center; }
.blog-cta {margin: 0 0 80px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 18px 110px; 
	font-size: 20px; font-weight: 500; color: #007F41; text-decoration: none; background: #F4FFF8; border: 1px solid #007F41; 
	border-radius: 100px; transition: background 0.2s, color 0.2s; }
.blog-cta:hover { background: #007F41; color: #fff; }

/* 하단 플로팅 CTA */
body.driver-blog { padding-bottom: 110px; }
.blogFloatCta {position: fixed;left: 0;right: 0;bottom: 26px;z-index: 999;}
.blogFloatCta__inner {width: 100%;max-width: 493px;margin: 0 auto;padding: 0 16px;box-sizing: border-box;}
.blogFloatCta__btn {display: flex;align-items: center;justify-content: center;width: 100%;min-height: 64px;padding: 18px 24px;border-radius: 999px;
	background: #00532B;color: #fff;font-size: 20px;font-weight: 500;box-shadow: 0 8px 20px #00000050;transition: background-color 0.2s ease, transform 0.2s ease;
}

/* 헤더(등록일·링크복사) */
.header-title { text-align: left; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid #D2D2D2; }
.header-title .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; font-size: 14px; line-height: 1.4; }
.header-title .date { color: #888; }
.header-title .date time { color: #000; font-weight: 400; padding-left: 4px;}
.header-title .blog-copy { display: inline-flex; gap: 3px; color: #888; cursor: pointer;}
.header-title .blog-copy:hover { color: #555; text-decoration: underline; }

html { scroll-behavior: smooth; }
#sec02, #sec03, #sec04 { scroll-margin-top: 80px; }


/* 푸터 유의사항*/
.footer-blog { font-weight: 300; font-size: 16px; line-height: 1.5; color: #8A8A8A; text-align: left; }

/* gnb 메뉴 모바일 스타일 */
.sideMenu .sideMenuList li.on a {background-color:#999; color:#fff;}
.sideMenu .sideMenuList li.on a:after {border-top:2px solid #fff; border-right:2px solid #fff;}

@media (max-width: 767px) 
{
	.blog-wrap {margin: 48px auto; padding: 0 16px;}
	.blog-h3 { font-size: 18px; }
	.blog-h4 { font-size: 18px; }
	.blog-txt { font-size: 16px; }
	.blog-toc-lst { grid-template-columns: 1fr; gap: 10px; margin: 0 0 15px;}
	.blog-toc-li:nth-child(1),
	.blog-toc-li:nth-child(2),
	.blog-toc-li:nth-child(3) { grid-column: auto; grid-row: auto; }
	.blog-toc-lst a { font-size: 14px; }
	.blog-panel { overflow: visible; }
	.blog-tbl-wrap {width: 100%;max-width: 100%;overflow-x: auto;-webkit-overflow-scrolling: touch;}
	.footer-blog { font-size: 14px; }
	.blog-lead { font-size: 16px; }

	.blog-cta { font-size: 18px; width: 100%; padding: 18px;margin: 0 0 40px;}
	.blogFloatCta__btn { font-size: 18px; }
	.blog-toc, .blog-fig, .blog-lea, .blog-note, .blog-lead{margin: 0 0 40px;}
	.blog-sec{margin-bottom: 60px;}
	.blog-stack{margin: 40px 0 24px;}
}
