@charset "utf-8";

.column_latest { width:100%; margin-top:clamp(30px, 5vw, 80px); }
.column_latest_list { display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(18px, 2vw, 28px); width:100%; margin:0; padding:0; list-style:none; }
.column_latest_list > li { width:calc((100% - clamp(18px, 2vw, 28px) * 3) / 4); max-width:300px; }

.column_latest_item { display:block; width:100%; aspect-ratio:1 / 1; border-radius:clamp(8px, 1vw, 14px); overflow:hidden; box-shadow:0 12px 25px rgba(0, 0, 0, 0.10); transition:all 0.25s ease; position:relative; background:#061f3f; }
.column_latest_item::after { content:''; width:100%; height:100%; background:url('./img/frame.png') no-repeat center center; background-size:100% 100%; position:absolute; left:0; top:0; z-index:2; pointer-events:none; }
.column_latest_item img { display:block; width:100%; height:100%; object-fit:cover; position:absolute; left:0; top:0; z-index:1; transition:all 0.35s ease; }

.column_latest_text { display:flex; flex-flow:column; align-items:center; justify-content:center; gap:20px; width:100%; height:100%; padding:0 8% 10%; text-align:center; position:absolute; left:0; top:0; z-index:3; }
.column_latest_text .column_board_name { padding:0.3em 1.5em; border:1px solid #fed492; border-radius:100px; font-size:13px; color:#fed492; }
.column_latest_text strong { display:block; line-height:1.25; font-size:clamp(14px, 1.6vw, 22px); font-weight:600; color:#fff; letter-spacing:-0.08em; text-shadow:0 2px 8px rgba(0, 0, 0, 0.45); word-break:keep-all; }

.column_latest_item:hover { transform:translateY(-6px); box-shadow:0 18px 35px rgba(0, 0, 0, 0.18); }
.column_latest_item:hover img { transform:scale(1.06); }

.column_latest_list .empty_li { width:100%; max-width:none; padding:60px 0; text-align:center; font-size:16px; color:#777; }

@media (max-width:980px) {
	.column_latest_list > li { max-width:none; }
	.column_latest_text { gap:10px; }
	.column_latest_text .column_board_name { font-size:clamp(8px, 1.2vw, 12px); }
	.column_latest_text strong { font-size:clamp(10px, 1.6vw, 18px); }
}

@media (max-width:650px) {
	.column_latest_list { gap:14px; }
	.column_latest_list > li { width:calc((100% - 14px) / 2); }
	.column_latest_item { border-radius:8px; }
	.column_latest_text { height:100%; }
	.column_latest_text .column_board_name { font-size:clamp(6px, 1vw, 10px); }
	.column_latest_text strong { font-size:clamp(12px, 3.2vw, 24px); }
}

@media (max-width:430px) {
	.column_latest_list { gap:10px; }
	.column_latest_list > li { width:calc((100% - 10px) / 2); }
}