@charset "utf-8";
:root {

}
[id^="sect_0"],section {
	padding:var(--sec_pd) 0;
}
.half {
	max-width:49%;
	width: 100%;
}

.brand_page img{
	display: block;
	margin: 0 auto 3rem;
	max-width: 20% !important;
}
/* 반응형 모바일 */
@media (max-width:900px) {
	.brand_page img{
		max-width: 35% !important;
	}
}
/* ==================== 연혁(History) ==================== */
.timeline {
	position:relative;
	max-width:1000px;
	margin:50px auto 0;
	padding-bottom: 50px;
}
/* 스크롤에 따라 차오르는 중앙 가이드 라인 */
.timeline::before {
	content:'';
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	width:2px;
	height:100%;
	background:var(--gray_f0);
	/* 배경 라인 */
}
/* 실제 스크롤 애니메이션이 적용될 포인트 컬러 라인 */
.timeline_line_fill {
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	width:2px;
	height:0;
	background:var(--point);
	z-index:1;
	transition:height 0.5s ease-out;
}
.timeline_item {
	display:flex;
	justify-content:space-between;
	width:100%;
	margin-bottom:100px;
	position:relative;
	z-index: 2;
}
/* 연도 스타일 - 선 바로 옆에 배치하여 밸런스 조정 */
.time_year {
	width:50%;
	position:relative;
	font-size:3rem;
	font-weight:900;
	color:var(--gray_e5);
	line-height:1;
	transition:color 0.5s;
	padding-right:60px;
	text-align:right;
	display:flex;
	flex-direction:column;
	justify-content:center;
}
/* 활성화된 연도 강조 */
.timeline_item.active .time_year {
	color: var(--point);
}
/* 중앙 포인트 원 */
.timeline_item::after {
	content:'';
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	width:14px;
	height:14px;
	background:var(--white);
	border:2px solid var(--gray_dd);
	border-radius:50%;
	transition:all 0.5s;
}
.timeline_item.active::after {
	border-color:var(--point);
	background:var(--point);
	box-shadow: 0 0 0 5px rgba(var(--point_rgb),0.1);
}
/* 콘텐츠 카드 스타일 */
.time_content {
	width:50%;
	padding-left:60px;
	opacity:0;
	transform:translateX(30px);
	transition:all 0.7s ease-out;
}
.timeline_item.active .time_content {
	opacity:1;
	transform:translateX(0);
}
.time_card {
	background:var(--white);
	padding:30px;
	border-radius:var(--br_r);
	box-shadow:var(--shadow_xl);
	border:1px solid var(--gray_f5);
}
.time_card p {
	font-size:1.1rem;
	color:var(--gray_6);
	margin-bottom:5px;
	line-height: 1.6;
}
.time_card .main_tit {
	font-size:1.4rem;
	font-weight:700;
	color:var(--gray_3);
	margin-bottom:15px;
	/* [핵심] 아이콘과 텍스트 상하 정렬 맞추기 */
	display:flex;
	align-items:center;
	gap:10px;
	line-height:1;
}
/* 아이콘이 유독 작아 보이거나 미세하게 위로 솟아 보일 때 */
.time_card .main_tit i {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:24px;
	position:relative;
	top: -1px;
}
/* 반응형 모바일 */
@media (max-width:900px) {
	.timeline::before,.timeline_line_fill {
		left:30px;
		transform:none;
	}
	.timeline_item {
		flex-direction:column;
		padding-left:60px;
		margin-bottom:60px;
	}
	.time_year {
		width:100%;
		text-align:left;
		padding:0 0 15px;
		font-size:2rem;
	}
	.time_content {
		width:90%;
		padding-left:0;
		transform:translateY(20px);
	}
	.timeline_item::after {
		left:30px;
		top: 20px;
	}
}
/* ==================== 인증서(Cert) - 갤러리 액자 스타일 ==================== */
.cert_grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 50px 25px;
}

.cert_item {
    background: #fff;
    padding: 15px; /* 액자 프레임 두께 */
    border: 1px solid #eee;
    border-radius:var(--br_xs);
    position: relative;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: pointer;
    /* 1. 실제 액자처럼 보이는 다중 그림자 */
    box-shadow:
        0 2px 4px rgba(0,0,0,0.02),
        0 10px 20px rgba(0,0,0,0.05);
}

/* 2. 이미지 박스: 상장 종이가 액자 안에 살짝 들어간 느낌 */
.cert_img_box {
    width: 100%;
    aspect-ratio: 1 / 1.414; /* A4 비율 */
    overflow: hidden;
    background: #fff;
    border: 1px solid #f0f0f0; /* 종이 경계선 */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.cert_img_box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.6s ease;
}

/* 3. 호버 효과: 액자가 앞으로 튀어나오는 입체감 */
.cert_item:hover {
    transform: translateY(-15px);
    border-color: var(--point); /* 포인트 컬러로 액자 테두리 강조 */
    box-shadow:
        0 20px 40px rgba(0,0,0,0.1),
        0 0 0 5px rgba(var(--point-rgb), 0.05); /* 액자 주변에 은은한 광채 */
}

/* 4. 장식: 액자 하단에 아주 작은 은색 띠 (선택 사항) */
.cert_item::before {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 2px;
    background: #ddd;
    border-radius: 2px;
    transition: all 0.3s;
}

.cert_item:hover::before {
    width: 60px;
    background: var(--point);
}
@media (max-width: 768px) {
    .cert_grid {
        grid-template-columns: repeat(2, 1fr); /* 2열 유지 */
        gap: 15px; /* 간격을 좁혀서 화면 활용도 높임 */
        padding: 0 10px;
    }

    .cert_item {
        padding: 10px;
        transform: none !important;
        transition: all 0.2s ease;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

    /* 1. 터치 피드백 (누르고 있을 때 살짝 눌리는 느낌) */
    .cert_item:active {
        transform: scale(0.97) !important;
        background-color: #f9f9f9;
        box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
    }

    /* 2. 모바일에서는 선보다는 '면'으로 강조 */
    .cert_item::after {
        display: none;
    }

    /* 3. 인증서 이미지 박스 비율 조정 */
    .cert_img_box {
        aspect-ratio: 1 / 1.3;
        border-radius: 2px;
    }

    /* 4. 인증서 이름 (있다면) 가독성 */
    .cert_name {
        font-size: 13px;
        margin-top: 8px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-underline-position: from-font;
        text-overflow: ellipsis;
    }
}

/* ==================== 설치 현황 ==================== */
/* 1. 그리드 레이아웃 */
.install_grid {
	display:grid;
	grid-template-columns:repeat(3,1fr);
	/* PC:3열 */
	gap:40px 25px;
	margin-top:50px;
}
/* 2. 카드 아이템 개별 설정 */
.install_item {
	background:var(--white);
	border:1px solid var(--gray_e5);
	border-radius:var(--br_r);
	overflow:hidden;
	transition:all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
	cursor:pointer;
	text-align:left;
}
.install_item:hover {
	/* transform:translateY(-10px);
	box-shadow:var(--shadow_lg);
	border-color: var(--sky); */
}
/* 3. 이미지 영역 (2분할+세로 이미지 방지) */
.install_img_wrap {
	display:flex;
	width:100%;
	height:200px;
	/* 모든 이미지 박스 높이 고정 */
	background:var(--gray_e0);
	gap:1px;
	border-bottom:1px solid var(--);
	overflow:hidden;
}
.install_img_wrap .img_box {
	flex:1;
	/* 50%씩 차지 */
	height:100%;
	overflow:hidden;
}
.install_img_wrap .img_box img {
	width:100%;
	height:100%;
	object-fit:cover;
	/* 세로 사진도 비율 맞춰서 꽉 채움 */
	object-position:center;
	transition:transform 0.5s ease;
}
.install_item:hover .img_box img {
	transform: scale(1.1);
	/* 호버 시 이미지 확대 */
}
/* 4. 텍스트 정보 영역 */
.install_info { padding: 25px;}
/* 지역 라벨 태그 */
.loc_tag {
	display:inline-block;
	padding:4px 10px;
	background:var(--dark_point);
	color:var(--white);
	border-radius: var(--br_xs);
	font-size:12px;
	font-weight:600;
	margin-bottom:12px;
	transition:0.3s;
}
.install_item:hover .loc_tag {
	background:var(--point);
	color: var(--white);
}
/* 상세 스펙 표(Table) */
.install_table {
	width:100%;
	border-collapse:collapse;
}
.install_table th,.install_table td {
	padding:8px 0;
	font-size:14px;
	border-bottom:1px solid var(--);
}
.install_table th {
	width:85px;
	color:var(--gray_5);
	font-weight:400;
	text-align:left;
}
.install_table td {
	color:var(--gray_3);
	font-weight:600;
}
.install_table tr:last-child th,.install_table tr:last-child td {
	border-bottom: none;
	/* 마지막 줄 선 제거 */
}
/* 5. 반응형 설정 */
@media (max-width:1024px) {
	.install_grid {
		grid-template-columns:repeat(2,1fr);
	}
	/* 태블릿:2열 */
}
@media (max-width:600px) {
	.install_grid {
		grid-template-columns: 1fr;
	}
	/* 모바일:1열 */
	.install_img_wrap {
		height: 200px;
	}
	.install_info { padding: 20px 15px;/* 모바일*/}
}


/* ==================== 생생 후기 전용 추가 스타일 그리드 ==================== */
/* 후기 그리드 (설치 현황과 동일) */
.review_grid {
	display:grid;
	grid-template-columns:repeat(3,1fr);
	/* PC:3열 */
	gap:50px 25px;
	/* 세로 간격을 살짝 더 넓힘 */
	margin-top:50px;
}
/* 후기 카드 개별 설정 */
.review_item {
	background:var(--white);
	border:1px solid var(--gray_e5);
	border-radius:var(--br_r);
	overflow:hidden;
	transition:all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
	cursor:pointer;
	text-align:left;
}
.review_item:hover {
	/* transform:translateY(-10px);
	box-shadow:var(--shadow_lg);
	border-color: var(--sky); */
}
/* 이미지 영역 (정사각형 1장) */
.review_img_wrap {
	width:100%;
	aspect-ratio:1 / 1;
	overflow:hidden;
	background:var(--black);
	border-bottom:1px solid var(--);
	position: relative;
}
/* 이미지와 비디오 모두 동일한 피팅 적용 */
.review_img_wrap img,.review_img_wrap video {
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
	transition:transform 0.5s ease;
	display: block;
}
/* 호버 시 확대 효과 공통 적용 */
.review_item:hover .review_img_wrap img,
review_item:hover .review_img_wrap video {
	transform: scale(1.1);
}
/* 동영상 아이템 전용 스타일 - 다크 글래스형 (가독성 최적화) */
.review_item.is_video .review_img_wrap::after {
	content:'';
	position:absolute;
	top:15px;
	right:15px;
	width:45px;
	height:32px;
	/* 핵심 보완:투명한 다크 계열 배경 적용 */
	/* 배경이 하얗더라도 이 다크 박스 덕분에 아이콘이 또렷해짐 */
	background:rgba(0,40,70,0.4);
	/* 요커트님 섀도우 톤을 활용한 깊은 네이비 블루 */
	backdrop-filter:blur(5px);
	/* 배경 흐림 효과는 유지 */
	-webkit-backdrop-filter:blur(5px);
	border-radius:var(--br_s);
	/* 은은한 네이비 블루 테두리 */
	border:1px solid rgba(0,59,105,0.2);
	/* 요커트님이 정한 공통 섀도우 톤 적용 */
	box-shadow:0 4px 10px rgba(0,59,105,0.1),0 2px 4px rgba(0,59,105,0.1);
	z-index:2;
	/* SVG 플레이 아이콘 (흰색으로 유지) */
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9.5 7.5v9l7-4.5z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:center center;
	background-size:20px;
	transition:all 0.35s cubic-bezier(0.4,0,0.2,1);
}
/* 호버 시 아이콘 반응 (동일) */
.review_item.is_video:hover .review_img_wrap::after {
	background-color:var(--point);
	backdrop-filter:blur(0px);
	-webkit-backdrop-filter:blur(0px);
	transform:translateY(-3px) scale(1.05);
	border-color:transparent;
	box-shadow:var(--shadow_lg);
}
/* 텍스트 정보 영역 */
.review_info {	padding: 25px;}
@media (max-width:600px) {
	.review_info { padding: 20px 15px;/* 모바일*/}
}

/* 업체명 및 정보 라벨 */
.review_meta {
	display:flex;
	align-items:center;
	gap:10px;
	margin-bottom:12px;
}
.review_meta .loc_tag {
	margin-bottom:0;
}
.shop_name {
	font-size:14px;
	font-weight:600;
	color: var(--gray_6);
}
/* 제목 (첨부 이미지의 핵심 문구) */
.review_tit {
	font-size:1.2rem;
	font-weight:700;
	color:var(--gray_3);
	line-height:1.4;
	margin-bottom:15px;
	word-break:keep-all;
}
.review_tit span.fc_point {
	font-weight: 800;
	/* 포인트 컬러 부분 강조 */
}
/* 하단 설명글 */
.review_desc {
	font-size:15px;
	color:var(--gray_6);
	line-height:1.6;
	word-break: keep-all;
}
/* 반응형 설정 */
@media (max-width:1024px) {
	.review_grid {
		grid-template-columns:repeat(2,1fr);
	}
	/* 태블릿:2열 */
}
@media (max-width:640px) {
	.review_grid {
		grid-template-columns:1fr;
	}
	/* 모바일: 1열 */
}


/* ==================== 생생 후기 전용 추가 스타일 그리드 ==================== */
/* 팁 페이지 전용 스타일 */
.tip_grid {
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:40px 25px;
	margin-top:50px;
}
.tip_item {
	background:var(--white);
	border:1px solid var(--gray_e5);
	border-radius:var(--br_r);
	overflow:hidden;
	transition:all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
	cursor:pointer;
	text-align:left;
	display:flex;
	flex-direction: column;
}
/* 호버 시 카드 반응 */
.tip_item:hover {
	/* transform:translateY(-10px);
	box-shadow:var(--shadow_lg);
	border-color: var(--sky); */
}
/* 이미지 영역 (가로형 16:10 비율) */
.tip_img_wrap {
	width:100%;
	aspect-ratio:16 / 10;
	overflow:hidden;
	background:var(--black);
	border-bottom:1px solid var(--);
	position:relative;
}
.tip_img_wrap img,.tip_img_wrap video {
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
	transition:transform 0.5s ease;
	display: block;
}
/* 호버 시 이미지 확대 */
.tip_item:hover .tip_img_wrap img,
.tip_item:hover .tip_img_wrap video {
	transform: scale(1.1);
}
/* 동영상 아이콘 (다크 글래스) */
.tip_item.is_video .tip_img_wrap::after {
	content:'';
	position:absolute;
	top:15px;
	right:15px;
	width:45px;
	height:32px;
	background:rgba(0,40,70,0.4);
	backdrop-filter:blur(5px);
	-webkit-backdrop-filter:blur(5px);
	border-radius:var(--br_s);
	border:1px solid rgba(0,59,105,0.2);
	box-shadow:0 4px 10px rgba(0,59,105,0.1),0 2px 4px rgba(0,59,105,0.1);
	z-index:2;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9.5 7.5v9l7-4.5z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:center center;
	background-size:20px;
	transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
}
/* 호버 시 아이콘 색상 변경 */
.tip_item.is_video:hover .tip_img_wrap::after {
	background-color:var(--point);
	backdrop-filter:blur(0px);
	-webkit-backdrop-filter:blur(0px);
	transform:translateY(-3px) scale(1.05);
	border-color:transparent;
	box-shadow: var(--shadow_lg);
}
/* 텍스트 정보 영역 */
.tip_info {	padding:25px;	flex-grow: 1;}
@media (max-width:600px) {
	.tip_info { padding: 20px 15px;/* 모바일*/}
}
/* 카테고리 (Q&A / GUIDE) */
.tip_category {
	font-size:13px;
	font-weight:700;
	color:var(--point);
	text-transform:uppercase;
	letter-spacing:1px;
	margin-bottom:10px;
	display: block;
}
/* 제목 */
.tip_tit {
	font-size:1.25rem;
	font-weight:700;
	color:var(--gray_3);
	line-height:1.4;
	margin-bottom:15px;
	word-break:keep-all;
	min-height:2.8em;
	transition:color 0.3s;
}
.tip_item:hover .tip_tit {
	color: var(--point);
}
/* 요약 내용 (2줄 제한) */
.tip_summary {
	font-size:15px;
	color:var(--gray_6);
	line-height:1.6;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow: hidden;
}
/* 더보기 버튼 스타일 */
.tip_more {
	margin-top:20px;
	display:inline-block;
	font-size:14px;
	font-weight:400;
	color:var(--gray_7);
	transition:0.3s;
	border-radius: var(--br_xs);
	border: 1px solid var(--gray_9);
	padding: 8px 15px;
}
.tip_item:hover .tip_more {
	color: var(--point);
	background-color: var(--lighter_point);
	border-color: var(--point);
}
/* 공통 반응형 하단 배치 */
@media (max-width:1024px) {
	.tip_grid {
		grid-template-columns:repeat(2,1fr);
	}
}
@media (max-width:640px) {
	.tip_grid {
		grid-template-columns: 1fr;
	}
}




/* [페이지 내용] 소형 업소용 전용 와이드 레이아웃 설정 */

/* 1. 리스트 컨테이너 (1=4px) */
#sub_page_content .product_list_wide_container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 2. 와이드 카드 메인 레이아웃 */
#sub_page_content .product_wide_card {
    width: 100%;
    max-width: 1100px;
    display: flex;
    background: var(--white);
    border: var(--border_g);
    border-radius: 12px;
    transition: all 0.3s ease;
}

#sub_page_content .product_wide_card:hover {
    transform: translateX(10px);
    border-color: var(--point);
    box-shadow: var(--shadow_lg);
}

/* 왼쪽 이미지 사이드 */
#sub_page_content .product_wide_card .img_side {
    width: 35%;
    position: relative;
    background-color: #f8f9fa;
    padding: 40px; /* pa10 */
    display: flex;
    align-items: center;
    justify-content: center;
}

#sub_page_content .product_wide_card .img_side img {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: contain;
}

/* 오른쪽 정보 사이드 */
#sub_page_content .product_wide_card .info_side {
    width: 65%;
    display: flex;
    flex-direction: column;
}



/* 사양 및 가격 영역 */
#sub_page_content .spec_wrapper {
    display: flex;
}

/* 사양 테이블 */
#sub_page_content .spec_table {
    flex: 1;
    list-style: none;
    padding: 0;
    margin: 0;
}

#sub_page_content .spec_table li {
    display: flex;
    justify-content: space-between;
    padding: 8px 0; /* 2*4px */
    border-bottom: 1px solid var(--gray_f2);
}

#sub_page_content .spec_tit {
    width: 100px;
    color: var(--gray_6);
	/* font-weight: 200; */
    flex-shrink: 0;
}

#sub_page_content .spec_con {
    text-align: right;
    color: var(--gray_3);
}

/* 가격 박스 (좌우 붙음 방지 및 점선 정렬) */
#sub_page_content .price_box {
    width: 200px;
    border: 1px solid #d1d9e6;
    background-color: #f8faff;
}

#sub_page_content .price_item {
    display: block; /* 수직 배치를 위해 block 강제 */
    width: 100%;
}

#sub_page_content .price_item strong {
    display: block; /* 텍스트와 숫자가 붙지 않게 block */
    margin-top: 4px; /* 1*4px */
}
#sub_page_content .border_b_solid{
	border-bottom: 2px solid var(--gray_5);
}
#sub_page_content .border_b_dashed {
    border-bottom: 1px dashed #d1d9e6 !important;
    margin-bottom: 16px !important; /* mb4 */
    padding-bottom: 16px !important; /* pb4 */
}

/* 3. 하단 PDF 다운로드 버튼 */
#sub_page_content .btn_pdf_download {
    display: inline-flex;
    align-items: center;
    padding: 16px 32px;
    background: linear-gradient(135deg, #0048c4 0%, #002FA7 100%);
    color: var(--white) !important;
    text-decoration: none !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: var(--shadow_bold);
	border-radius: var(--br_m);
}

/* 호버 시 효과 */
#sub_page_content .btn_pdf_download:hover {
    /* 위로 5px 이동 */
    transform: translateY(-5px);

    /* 떠오른 느낌을 주기 위해 그림자를 더 넓고 진하게 */
    box-shadow: var(--shadow_lg);

    /* 색상이 살짝 밝아지게 하고 싶다면 (선택 사항) */
    filter: brightness(1.15);
}

#sub_page_content .btn_pdf_download .icon_box {
    font-size: 24px;
    margin-right: 16px;
    padding-right: 16px;
    border-right: 1px solid rgba(255,255,255,0.2);
}

#sub_page_content .btn_pdf_download .arrow_icon {
    font-size: 20px;
    animation: bounceDown 1.5s infinite;
}

@keyframes bounceDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}

/* 반응형 */
@media (max-width: 992px) {
    #sub_page_content .product_wide_card { flex-direction: column; }
    #sub_page_content .product_wide_card .img_side,
    #sub_page_content .product_wide_card .info_side { width: 100%; }
    #sub_page_content .spec_wrapper { flex-direction: column; gap: 20px; }
    #sub_page_content .price_box { width: 100%; }
}

#sub_page_content .p_item{
	background:var(--white);
	border:1px solid rgba(var(--point-rgb), 0.15);
	overflow:hidden;
	transition:all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
/* ==================== 체크포인트 전용 레이아웃 ==================== */
/* 후기 카드 개별 설정 */
.check_card {
    background:var(--white);
	border:1px solid rgba(var(--point-rgb), 0.15);
	overflow:hidden;
	transition:all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* 호버 시 테두리색 및 배경 미세 변화 */
.check_card:hover {
    box-shadow: var(--shadow_lg);
    border-color: var(--point);
    background: #fdfeff;
}

.check_icon {
    width: 100px;  /* 20 * 4 */
    height: 100px; /* 20 * 4 */
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.check_footer {
	background: rgba(var(--point-rgb), 0.05);
    border: 1px dashed rgba(var(--point-rgb), 0.15);
}

/* 모바일 대응 */
@media (max-width: 1100px) {
    .check_grid { flex-direction: column; gap:20px }
    /* 모바일에서는 mt20이 너무 클 수 있으므로 조정 가능 */
}
@media (max-width: 900px) {
    .check_card{
        width: 70%;
        margin: auto;
    }
}


/* ==================== 유튜브 페이지 전용 스타일 ==================== */
.yt_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px 30px;
    margin-top: 50px;
}

.yt_item {
    background: var(--white);
    border:1px solid var(--gray_e5);
	border-radius:var(--br_r);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: pointer;
}

.yt_thumb_wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
}

.yt_thumb_wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.play_btn_overlay {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 65px; height: 65px;
    background: rgba(var(--point-rgb), 0.9);
    color: #fff;
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-size: 24px;
    z-index: 2;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

.play_btn_overlay i { margin-left: 5px; }

.yt_item:hover {
	/* transform:translateY(-10px);
	box-shadow:var(--shadow_lg);
	border-color: var(--sky); */
 }
.yt_item:hover .yt_thumb_wrap img { transform: scale(1.08); opacity: 0.7; }
.yt_item:hover .play_btn_overlay {
    background: var(--dark_point);
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 10px 25px rgba(var(--point-rgb), 0.4);
}

.yt_info { padding: 25px; }
.yt_meta { display: flex; justify-content: space-between; margin-bottom: 15px; font-size: 13px; color: var(--gray_6); }
.yt_tag { background: var(--point); padding: 4px 8px; border-radius: 4px; color: var(--white);
    font-weight: 600; }
.yt_tit { font-size: 1.25rem; font-weight: 700; line-height: 1.4; color: var(--gray_3); margin-bottom: 12px; word-break: keep-all; }
.yt_desc { font-size: 15px; color: var(--gray_7); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width:1024px) { .yt_grid { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; } }
@media (max-width:600px) {
    .yt_grid {  /*grid-template-columns: 1fr; 모바일*/ gap: 25px; }

    .yt_info { padding: 20px 15px;}
}


/* ==================== 블로그 페이지 전용 스타일 ==================== */
.blog_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px 30px; /* 유튜브와 동일하게 맞춰 통일감 부여 */
    margin-top: 50px;
}

.blog_item {
    background:var(--white);
	border:1px solid var(--gray_e5);
	border-radius:var(--br_r);
	overflow:hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: pointer;
}
.blog_item:hover {
	/* transform:translateY(-10px);
	box-shadow:var(--shadow_lg);
	border-color: var(--sky); */
}
.blog_item:hover .blog_thumb_wrap img {
    transform: scale(1.05);
}
/* 썸네일: 유튜브보다 라운드값을 살짝 조절하여 문서 느낌 강조 */
.blog_thumb_wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #f8f8f8;
    overflow: hidden;
    border-bottom: 1px solid #f0f0f0; /* 이미지 하단 구분선 */
}

.blog_thumb_wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
/* 블로그 정보: 유튜브와 패딩 규격 통일 */
.blog_info { padding: 25px; }

.blog_meta {
    display: flex; justify-content: space-between; margin-bottom: 15px; font-size: 13px; color: var(--gray_6);
}

.blog_tag {
    background: var(--point); /* 태그 배경 추가로 블로그 느낌 강조 */
    padding: 4px 8px;
    border-radius: 4px;
    color: var(--white);
    font-weight: 600;
}


.blog_tit {
    font-size: 1.25rem; /* 유튜브와 크기 통일 */
    font-weight: 700;
    line-height: 1.4;
    color: var(--gray_3);
    margin-bottom: 12px;
    word-break: keep-all;
    transition: color 0.3s;
}

.blog_item:hover .blog_tit {
    color: var(--point); /* 호버 시 제목 색상 변화 */
}

.blog_desc {
    font-size: 15px;
    color: var(--gray_7);
    line-height: 1.6; /* 글 읽기 편하게 자간/행간 살짝 조정 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 블로그 반응형 세부 조정 */
@media screen and (max-width: 1024px) {
    .blog_grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 20px;
    }
}

@media screen and (max-width: 600px) {
    .blog_grid {
        /* grid-template-columns: 1fr; */
        gap: 25px;
        margin-top: 30px;
    }

    .blog_info {padding: 20px 15px;/* 모바일*/ }

    .blog_tit {
        font-size: 1.15rem;
    }

    .blog_desc {
        -webkit-line-clamp: 3; /* 모바일에서 내용 더 보여주기 */
        font-size: 14px;
    }
}
	/* 카드 호버 시 공동 */
	/* .cert_item:hover, */
	.install_item:hover,
	.review_item:hover,
	.tip_item:hover,
	.yt_item:hover,
    .blog_item:hover {
		transform:translateY(-10px);
		box-shadow:var(--shadow_lg);
		border-color: var(--sky);
	 }
@media screen and (max-width: 600px){
	.cert_item:hover,
	.install_item:hover,
	.review_item:hover,
	.tip_item:hover,
	.yt_item:hover,
    .blog_item:hover {transform: none !important; }
}