/* blog list page */
#sec1 .blog_wrap {
	background: #fff;
	padding: 40px 0;
	border-radius: 8px;
}
.blog_wrap {
	gap: clamp(30px, 3.13vw, 60px);
	align-items: flex-start;
}
.blog_main {
	flex: 1;
	min-width: 0;
	background: #fff;
}
.blog_cate ul {
	gap: 10px 20px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.blog_cate ul li a {
	padding: 8px 16px;
	font-size: clamp(14px, 0.94vw, 16px);
	color: #444;
	background: #f5f5f5;
	border-radius: 4px;
	transition: background 0.2s, color 0.2s;
}
.blog_cate ul li a:hover,
.blog_cate ul li.on a {
	background: var(--color-point, #366ab5);
	color: #fff;
}
.blog_list_tit {
	font-size: clamp(18px, 1.25vw, 22px);
	font-weight: 700;
	color: #111;
}
.blog_list {
	list-style: none;
	padding: 0;
	margin: 0;
	border-top: 1px solid #ddd;
	background: #fff;
}
.blog_list li {
	border-bottom: 1px solid #eee;
	background: #fff;
}
.blog_list li a.blog_list_item {
	padding: clamp(16px, 1.67vw, 24px) 0;
	display: flex;
	align-items: center;
	gap: clamp(16px, 1.67vw, 24px);
	transition: background 0.2s;
	text-decoration: none;
}
.blog_list li a.blog_list_item:hover {
	background: #fafafa;
}
/* 썸네일 이미지 */
.blog_list_img {
	margin: 0;
	flex-shrink: 0;
	width: clamp(120px, 12vw, 180px);
	height: clamp(90px, 8vw, 120px);
	overflow: hidden;
	border-radius: 6px;
	background: #f0f0f0;
}
.blog_list_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.blog_list_txt {
	flex: 1;
	min-width: 0;
}
.blog_list .blog_list_txt .tag {
	font-size: clamp(12px, 0.83vw, 14px);
	color: var(--color-point, #366ab5);
	display: block;
}
.blog_list .blog_list_txt .tit {
	font-size: clamp(15px, 1.04vw, 18px);
	font-weight: 600;
	line-height: 1.4;
	color: #222;
	margin: 4px 0 0;
}
.blog_list .blog_list_txt .date {
	font-size: clamp(12px, 0.83vw, 14px);
	color: #888;
	margin-top: 8px;
	display: block;
}
/* 기존 .blog_list .tag 등 호환 */
.blog_list .tag {
	font-size: clamp(12px, 0.83vw, 14px);
	color: var(--color-point, #366ab5);
}
.blog_list .tit {
	font-size: clamp(16px, 1.04vw, 18px);
	font-weight: 600;
	line-height: 1.4;
	color: #222;
}
.blog_list .date {
	font-size: clamp(12px, 0.83vw, 14px);
	color: #888;
	margin-top: 8px;
	display: block;
}
/* 리스트·카테고리·사이드바 가시성 (ani_load_up 초기 opacity:0 대비) */
#sec1 .blog_wrap .ani_load_up {
	opacity: 1;
	transform: translate(0, 0);
}
.blog_list,
.blog_list li,
.blog_list a,
.blog_list .tag,
.blog_list .tit,
.blog_list .date {
	opacity: 1;
	color: inherit;
}
.blog_list .tag { color: var(--color-point, #366ab5); }
.blog_list .tit { color: #222; }
.blog_list .date { color: #888; }
.blog_list a { color: inherit; }
.blog_list a:hover { color: inherit; }
.blog_btn_more {
	padding: 12px 32px;
	background: var(--color-point, #366ab5);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	border-radius: 4px;
	transition: opacity 0.2s;
}
.blog_btn_more:hover {
	opacity: 0.9;
	color: #fff;
}
.blog_sidebar {
	width: clamp(240px, 20vw, 280px);
	flex-shrink: 0;
}
.sidebar_block {
	background: #f9f9f9;
	padding: 20px;
	border-radius: 8px;
	margin-bottom: 24px;
}
.sidebar_tit {
	font-size: clamp(15px, 1vw, 17px);
	font-weight: 700;
	color: #222;
}
.blog_tags {
	gap: 8px 10px;
}
.blog_tags a {
	font-size: 13px;
	color: #555;
	padding: 4px 10px;
	background: #fff;
	border-radius: 4px;
	transition: background 0.2s, color 0.2s;
}
.blog_tags a:hover {
	background: var(--color-point, #366ab5);
	color: #fff;
}
.blog_popular_list {
	counter-reset: popular;
	list-style: none;
	padding: 0;
	margin: 0;
}
.blog_popular_list li {
	position: relative;
	padding-left: 24px;
	margin-bottom: 12px;
}
.blog_popular_list li:last-child {
	margin-bottom: 0;
}
.blog_popular_list li::before {
	counter-increment: popular;
	content: counter(popular) ".";
	position: absolute;
	left: 0;
	font-weight: 700;
	color: var(--color-point, #366ab5);
	font-size: 14px;
}
.blog_popular_list a {
	font-size: 14px;
	line-height: 1.4;
	color: #333;
	display: block;
}
.blog_popular_list a:hover {
	color: var(--color-point, #366ab5);
}
@media (max-width: 900px) {
	.blog_wrap {
		flex-direction: column;
	}
	.blog_sidebar {
		width: 100%;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
	}
}
@media (max-width: 600px) {
	.blog_sidebar {
		grid-template-columns: 1fr;
	}
	.blog_list_img {
		width: 100px;
		height: 75px;
	}
}