@charset "utf-8";
/* =========================================================
   블로그 목록 스킨 (카드형) — 2026-10-20
   - blog/blog.php 에서 blog.css 다음에 불러온다.
   - 모든 규칙은 .blogSkinC 아래로 한정한다(목록 페이지 전용).
   - 포인트 컬러: ippc #14335A
   ========================================================= */
.blogSkinC{
	--bsk-point:#14335A;
	--bsk-point-soft:#EAF0F7;
	--bsk-bg:#F3F6FA;
	--bsk-line:#E9EDF2;
}

/* 배경 */
.nxt_blog_list_wrap.blogSkinC{background:linear-gradient(180deg,#FFF 0%,var(--bsk-bg) 5%,var(--bsk-bg) 96%,#FFF 100%);}
.blogSkinC .nxt_blog_list_Sidebox{padding-top:6rem;}
.blogSkinC .nxt_blog_list_Inner{gap:3.4rem;}
.blogSkinC .nx_blog_contentArea{flex:1 1 0; min-width:0;}

/* 제목줄: 홈 버튼 + 제목 + SNS */
.blogSkinC .nbtitlebox{display:flex; align-items:center; gap:1.6rem;}
.blogSkinC .nbtitlebox h1{flex:1 1 auto; min-width:0;}
.blogSkinC .nbsnsbox{flex:0 0 auto;}
.blogSkinC .bsk_home{flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:5rem; height:5rem; border-radius:99px; background:#E4E9F0; color:#111;}
.blogSkinC .bsk_home svg{width:2rem; height:2rem;}
.blogSkinC .bsk_home:hover{background:var(--bsk-point); color:#fff;}

/* 글 카드 */
.blogSkinC .nx_bloglist ul{display:grid; grid-template-columns:repeat(2,1fr); gap:3.4rem;}
.blogSkinC .nx_bloglist ul li,
.blogSkinC .nx_bloglist ul li:nth-child(2n){float:none; width:auto; margin:0; border-radius:1.6rem; background:#fff; overflow:hidden; transition:box-shadow .2s, transform .2s;}
.blogSkinC .nx_bloglist ul li:hover{box-shadow:0 1rem 2.4rem rgba(20,51,90,.10); transform:translateY(-2px);}
.blogSkinC .nx_blogcontent{overflow:hidden;}
.blogSkinC .nx_blogcontent figure{border-radius:1.6rem; padding-bottom:0; aspect-ratio:404 / 268; background:#F6F8FB;}
.blogSkinC .nx_blogcontent figure:after{border-radius:1.6rem;}
.blogSkinC .blogimg img{position:relative; top:auto; left:auto; transform:none; -webkit-transform:none; width:100%; height:100%; object-fit:cover; object-position:center;}
.blogSkinC .nx_blogt{margin-top:2.2rem; padding:0 2.6rem 2.6rem 2.6rem;}
.blogSkinC .nx_blogt h3{font-size:1.6rem; line-height:2.2rem; letter-spacing:-0.05em; color:var(--bsk-point);}
.blogSkinC .nx_blogt h2{margin:0.6rem 0 1.4rem 0; font-size:2.4rem; line-height:3.2rem; letter-spacing:-0.01em;}
.blogSkinC .nx_blogcontent:hover .nx_blogt h2{text-decoration:underline;}
.blogSkinC .nx_blogt span{font-size:1.4rem; line-height:1.8rem; color:#888;}

/* 페이지 번호 */
.blogSkinC .blog_paging_line{text-align:left; margin-top:3.4rem;}
.blogSkinC .b_prev_page,
.blogSkinC .b_next_page{background-color:transparent;}
.blogSkinC .on_blog_paging{background:#fff;}

/* 오른쪽 메뉴 공통 */
.blogSkinC .nx_blog_menuArea{flex:0 0 40.4rem; width:40.4rem;}
.blogSkinC .nbmBox{margin-top:4.6rem;}
.blogSkinC .nbmBox:nth-child(1){margin-top:0;}
.blogSkinC .nbmt h4{font-size:2.2rem; line-height:2.8rem; color:#000; margin:0 0 1.6rem 0;}
.blogSkinC .nbmtBtn a{background:var(--bsk-point);}

/* 카테고리: 전체 포함 모두 칩으로 폭에 맞춰 줄바꿈 */
.blogSkinC .nbmcatebox ul{display:flex; flex-wrap:wrap; gap:0.8rem; border-top:none; border-radius:1.6rem; background:#fff; padding:2.4rem;}
.blogSkinC .nbmcatebox ul li{width:auto; padding:0; border-bottom:none;}
.blogSkinC .nbmcatebox ul li a{display:block;}
.blogSkinC .nbmcatebox ul li .nbmcate{display:flex; align-items:center; gap:0.4rem;}
.blogSkinC .nbmcatebox ul li .nbmcate{padding:1.1rem 1.9rem; border:1px solid var(--bsk-bg); border-radius:99px; background:var(--bsk-bg); transition:border-color .2s, background .2s;}
.blogSkinC .nbmcatebox ul li .nbmcate p{display:inline-block; font-family:'Pretendard-Medium'; font-size:1.5rem; line-height:2.4rem; color:#222;}
.blogSkinC .nbmcatebox ul li .nbmcate span{font-family:'Pretendard-Bold'; font-size:1.5rem; line-height:2.4rem; color:var(--bsk-point);}
.blogSkinC .nbmcatebox ul li .nbmcate span:after{display:none !important;}
.blogSkinC .nbmcatebox ul li .nbmcate:hover{border-color:var(--bsk-point); background:#fff;}
.blogSkinC .nbmcatebox ul li .nbmcate:hover span{font-family:'Pretendard-Bold';}
.blogSkinC .nbmcatebox ul li.selected .nbmcate{border-color:var(--bsk-point); background:var(--bsk-point);}
.blogSkinC .nbmcatebox ul li.selected a p,
.blogSkinC .nbmcatebox ul li.selected a span{color:#fff; font-family:'Pretendard-Bold';}

/* 인기 태그 */
.blogSkinC .nbm_tagBox{display:flex; flex-wrap:wrap; gap:0.8rem; margin-bottom:0;}
.blogSkinC .nbm_tagBox a{margin:0;}
.blogSkinC .nbm_tagBox a h4{border:1px solid #fff; padding:1.1rem 1.9rem; background:#fff; border-radius:99px; color:#222;}
.blogSkinC .nbm_tagBox a h4:hover{border-color:var(--bsk-point); background:#fff; color:var(--bsk-point); font-family:'Pretendard-Bold';}

/* 인기 게시물 */
.blogSkinC .nbm_famous{border-radius:1.6rem; background:#fff; padding:0 2rem;}
.blogSkinC .nbm_famous ul li,
.blogSkinC .nbm_famous ul li:nth-child(1){padding:2rem 0 2rem 3.8rem; border-bottom:1px solid var(--bsk-line);}
.blogSkinC .nbm_famous ul li:last-child{border-bottom:none;}
.blogSkinC .nbm_famous ul li > span,
.blogSkinC .nbm_famous ul li:nth-child(1) > span{position:absolute; left:0; top:50%; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; width:2.4rem; height:2.4rem; border-radius:0.6rem; background:var(--bsk-point-soft); color:var(--bsk-point); font-family:'Pretendard-ExtraBold','Pretendard-Bold'; font-size:1.4rem; line-height:1;}
.blogSkinC .nbm_famous ul li:nth-child(-n+3) > span{background:var(--bsk-point); color:#fff;}
.blogSkinC .nbm_faitems{display:flex; align-items:center; gap:1.4rem;}
.blogSkinC .famtextBox{flex:1 1 auto; min-width:0;}
.blogSkinC .famtextBox strong{display:block; font-family:'Pretendard-Bold'; font-size:1.4rem; line-height:2rem; color:var(--bsk-point);}
.blogSkinC .famtextBox p{margin:0.2rem 0 0.6rem 0; font-family:'Pretendard-SemiBold'; font-size:1.6rem; line-height:2.4rem; color:#222; display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.blogSkinC .nbm_famous ul li a:hover .famtextBox p{text-decoration:underline;}
.blogSkinC .famtextBox dl{display:flex; gap:0.6rem; font-size:1.3rem; line-height:1.8rem; color:#888;}
.blogSkinC .famtextBox dt{font-family:'Pretendard-Bold'; color:#222;}
.blogSkinC .famimg{flex:0 0 7.2rem; width:7.2rem; height:5rem; margin:0; border-radius:0.8rem; overflow:hidden; background:#F6F8FB;}
.blogSkinC .famimg img{width:100%; height:100%; object-fit:cover;}

/* 특허용어사전 */
.blogSkinC .bl_wikitagList{border-radius:1.6rem; background:#fff; padding:1.6rem 2.4rem;}

@media (max-width:1400px){
	.blogSkinC .nx_blog_menuArea{flex:0 0 36.4rem; width:36.4rem;}
	.blogSkinC .nx_bloglist ul{gap:2.4rem;}
}
@media (max-width:1200px){
	.blogSkinC .nx_blogt{margin-top:1.6rem; padding:0 2rem 2rem 2rem;}
	.blogSkinC .nx_blogt h2{margin:0.4rem 0 1rem 0; font-size:2.2rem; line-height:3rem;}
	.blogSkinC .nx_blog_menuArea{flex:0 0 32.4rem; width:32.4rem;}
	.blogSkinC .nbmBox{margin-top:3.6rem;}
	.blogSkinC .nbmcatebox ul{gap:0.6rem;}
	.blogSkinC .nbmcatebox ul li .nbmcate{padding:1rem 1.6rem;}
	.blogSkinC .nbmcatebox ul li .nbmcate p,
	.blogSkinC .nbmcatebox ul li .nbmcate span{font-size:1.5rem; line-height:2.2rem;}
	.blogSkinC .nbm_tagBox{gap:0.6rem;}
	.blogSkinC .nbm_tagBox a h4{padding:1rem 1.6rem; font-size:1.5rem; line-height:2.2rem;}
	.blogSkinC .nbm_famous ul li,
	.blogSkinC .nbm_famous ul li:nth-child(1){padding:1.6rem 0 1.6rem 3.4rem;}
}
@media (max-width:1100px){
	.blogSkinC .nx_blog_menuArea{flex:0 0 30rem; width:30rem;}
}
@media (max-width:991px){
	.blogSkinC .nxt_blog_list_Inner{gap:6rem;}
	.blogSkinC .nx_blog_contentArea{flex:none; width:100%;}
	.blogSkinC .nx_blog_menuArea{flex:none; width:100%;}
}
@media (max-width:767px){
	.blogSkinC .nxt_blog_list_Sidebox{padding:2rem 2rem 4rem 2rem;}
	.blogSkinC .bsk_home{width:3.6rem; height:3.6rem;}
	.blogSkinC .bsk_home svg{width:1.6rem; height:1.6rem;}
	.blogSkinC .nbtitlebox{gap:1rem; flex-wrap:wrap;}
	.blogSkinC .nbtitlebox .nbsnsbox{order:-1; flex:1 0 100%;}
	.blogSkinC .nx_bloglist ul{gap:2rem;}
	.blogSkinC .nx_bloglist ul li,
	.blogSkinC .nx_bloglist ul li:nth-child(2n){border-radius:1rem;}
	.blogSkinC .nx_blogcontent figure{aspect-ratio:335 / 222; border-radius:1rem;}
	.blogSkinC .nx_blogcontent figure:after{border-radius:0.8rem;}
	.blogSkinC .nx_blogt{margin-top:1.4rem; padding:0 1.6rem 1.6rem 1.6rem;}
	.blogSkinC .nx_blogt h3{font-size:1.3rem; line-height:1.6rem;}
	.blogSkinC .nx_blogt h2{margin:1rem 0 0.8rem 0; font-size:1.8rem; line-height:2.4rem; letter-spacing:0;}
	.blogSkinC .nx_blogt span{font-size:1.2rem; line-height:1.4rem;}
	.blogSkinC .blog_paging_line{margin-top:3rem; text-align:center;}
	.blogSkinC .nx_blog_menuArea{background:transparent;}
	.blogSkinC .nbmBox{margin-top:4rem;}
	.blogSkinC .nbmt h4{font-size:2rem; line-height:2.4rem; margin-bottom:1.4rem;}
	.blogSkinC .nbmcatebox ul{border-radius:1rem; padding:1.6rem;}
	.blogSkinC .nbmcatebox ul li .nbmcate{padding:0.7rem 1.4rem;}
	.blogSkinC .nbmcatebox ul li .nbmcate p,
	.blogSkinC .nbmcatebox ul li .nbmcate span{font-size:1.3rem; line-height:2.4rem;}
	.blogSkinC .nbm_tagBox a h4{padding:0.7rem 1.4rem; font-size:1.3rem; line-height:2.4rem;}
	.blogSkinC .nbm_famous{border-radius:1rem; padding:0 1.6rem;}
	.blogSkinC .nbm_famous ul li,
	.blogSkinC .nbm_famous ul li:nth-child(1){padding:1.2rem 0 1.2rem 3rem;}
	.blogSkinC .nbm_famous ul li > span,
	.blogSkinC .nbm_famous ul li:nth-child(1) > span{width:2rem; height:2rem; font-size:1.3rem;}
	.blogSkinC .famtextBox p{font-size:1.5rem; line-height:2.2rem;}
	.blogSkinC .bl_wikitagList{border-radius:1rem; padding:1.2rem 1.6rem;}
	/* 모바일 메뉴(펼침 화면) */
	.bldim.blogSkinC .blopencontentInner{background:var(--bsk-bg);}
}
@media (max-width:600px){
	.blogSkinC .nx_bloglist ul{grid-template-columns:1fr;}
}