/* ============================================================
   [SCP] 4단 그리드 갤러리 (전체 카드 클릭 구조)
============================================================ */

/* 1. 상단 라벨(헤더) 스타일 (참고용 - 필요 시 사용) */
.scp-section-head {
    margin-bottom: 20px;
    padding-bottom: 8px;
    border-bottom: 1px dotted #ccc;
}

.scp-section-label {
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #666;
/*    text-transform: uppercase;*/
    letter-spacing: 1px;
}  
.scp-section-label a {
	color: #D8532B;
}


/* 2. 컨테이너 및 4단 그리드 레이아웃 */
.scp-thumb-main {
	width: 100%;
    margin: 20px 0 0px;
    padding: 15px !important;       /* 안쪽 여백 (상하좌우 시원하게) */
    border: 1px solid #dcdcdc !important; /* 메인 박스 전체 테두리 */
    box-sizing: border-box;
}

.scp-editorial-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 기본 4단 배열 */
    gap: 24px;; /* 카드 사이 가로/세로 간격 */
    width: 100%;
}

/* 3. 카드 및 링크 영역 (전체 클릭 가능) */
.scp-card {
    width: 100%;
    margin: 0;
    padding: 0 !important; /* 안쪽 여백 제거 -> 모든 카드 넓이 동일 */
    border: none !important; /* 기존 테두리 제거 */
    position: relative; /* 💡 가짜 구분선을 띄우기 위한 기준점 */
    box-sizing: border-box;
}



.scp-card > a {
    display: flex;
    flex-direction: column;
    text-decoration: none; /* 기본 밑줄 제거 */
    color: inherit;
}

/* 4단 배치 시, 맨 우측(4번째, 8번째 등) 카드들은 선이 없어야 깔끔하므로 제거 */
.scp-card:nth-child(4n) {
    border-right: none;
    padding-right: 0;
}

/* 4. 썸네일 이미지 (4:3 비율 고정 및 빈틈없이 꽉 채우기) */
.scp-card-thumb {
    width: 100%;
    aspect-ratio: 4 / 3 !important;
    position: relative !important; /* 💡 핵심: 자식 이미지가 기준을 잡을 수 있도록 relative 설정 */
    overflow: hidden;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
    display: block !important;
}

.scp-card-thumb img {
	position: absolute !important; 
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important; 
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
 
/* 5. 타이틀 (제목) 스타일링 */
.scp-card-title {
	margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.4;
    word-break: keep-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}

/* 6. ✨ 마우스 호버(Hover) 액션 - <a> 태그에 올렸을 때 동시 작동 */
.scp-card > a:hover .scp-card-thumb img {
    transform: scale(1.05);
}
.scp-card > a:hover .scp-card-title {
    color: #D8532B;
}


/* ============================================================
   📱 반응형 (모바일 & 태블릿)
============================================================ */
@media (max-width: 1024px) {
	/* 태블릿: 2단 배치 */
/*    .scp-editorial-grid {*/
/*        grid-template-columns: repeat(2, 1fr);*/
/*        gap: 20px;*/
/*    }*/
    
    /* 2단 배치를 위해 4단 기준의 선을 덮어쓰고, 매 2번째 카드마다 선 제거 */
/*    .scp-card,*/
/*    .scp-card:nth-child(4n) {*/
/*        border-right: 1px solid #e0e0e0;*/
/*        padding-right: 20px;*/
/*    }*/
/*    .scp-card:nth-child(2n) {*/
/*        border-right: none;*/
/*        padding-right: 0;*/
/*    }*/
}

@media (max-width: 540px) {
	/* 모바일: 1단 배치 */
    .scp-thumb-main {
        padding: 20px !important; /* 모바일은 화면이 좁으니 안쪽 여백 살짝 축소 */
    }

	.scp-section-label {
		font-size: 14px;
	}  

    .scp-editorial-grid {			  
        grid-template-columns: repeat(3, 1fr);
/*        grid-template-columns: 2fr;*/
        gap: 15; /* 모바일은 세로 대신 가로로 선을 그으므로 gap 제거 */
    }

	

    /* 💡 모바일에서는 '세로선'을 없애고 '가로 밑줄'로 변경하여 위아래 기사를 나눔 */
    .scp-card,
    .scp-card:nth-child(2n),
    .scp-card:nth-child(4n) {
        border-right: none !important;
        padding-right: 0 !important;
        border-bottom: 1px solid #e0e0e0;
        padding-bottom: 24px;
        margin-bottom: 24px;
    }
    
    /* 맨 마지막 카드는 밑줄이 필요 없으므로 제거 */
    .scp-card:last-child {
        border-bottom: none !important;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    

    .scp-card-title {
        font-size: 12px;
    }
}