@charset "utf-8";

/* 최신글 스킨 전용 스타일 - 벚꽃 시즌 테마 */
.latest_event_v2 {
    width: 100vw; /* 화면 전체 가로 길이 */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: 40px;
    margin-bottom: 40px;
    padding: 80px 70px; /* 상하 패딩 소폭 증대 */
    box-sizing: border-box;
    color: #333;
    /* background: linear-gradient(135deg, #fff5f6 0%, #ffe4e9 50%, #ffd1dc 100%); */
    overflow: hidden;
}

/* 내부 컨텐츠가 중앙에 오도록 감싸는 래퍼 (기존 max-width 역할) */
.latest_event_v2 .event_header, 
.latest_event_v2 .event_container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

/* 벚꽃 꽃잎 배경 장식 (SVG 및 트랜디한 애니메이션) */
.latest_event_v2:before, .latest_event_v2:after, 
.latest_event_v2 .petal_extra_1:before, .latest_event_v2 .petal_extra_1:after,
.latest_event_v2 .petal_extra_2:before, .latest_event_v2 .petal_extra_2:after,
.latest_event_v2 .petal_extra_3:before, .latest_event_v2 .petal_extra_3:after,
.latest_event_v2 .petal_extra_4:before, .latest_event_v2 .petal_extra_4:after,
.latest_event_v2 .petal_extra_5:before, .latest_event_v2 .petal_extra_5:after,
.latest_event_v2 .petal_extra_6:before, .latest_event_v2 .petal_extra_6:after,
.latest_event_v2 .petal_extra_7:before, .latest_event_v2 .petal_extra_7:after,
.latest_event_v2 .petal_extra_8:before, .latest_event_v2 .petal_extra_8:after,
.latest_event_v2 .petal_extra_9:before, .latest_event_v2 .petal_extra_9:after,
.latest_event_v2 .petal_extra_10:before, .latest_event_v2 .petal_extra_10:after,
.latest_event_v2 .petal_extra_11:before, .latest_event_v2 .petal_extra_11:after,
.latest_event_v2 .petal_extra_12:before, .latest_event_v2 .petal_extra_12:after,
.tour_petal_wrap:before, .tour_petal_wrap:after, 
.tour_petal_wrap .petal_extra_1:before, .tour_petal_wrap .petal_extra_1:after,
.tour_petal_wrap .petal_extra_2:before, .tour_petal_wrap .petal_extra_2:after,
.tour_petal_wrap .petal_extra_3:before, .tour_petal_wrap .petal_extra_3:after,
.tour_petal_wrap .petal_extra_4:before, .tour_petal_wrap .petal_extra_4:after,
.tour_petal_wrap .petal_extra_5:before, .tour_petal_wrap .petal_extra_5:after,
.tour_petal_wrap .petal_extra_6:before, .tour_petal_wrap .petal_extra_6:after,
.tour_petal_wrap .petal_extra_7:before, .tour_petal_wrap .petal_extra_7:after,
.tour_petal_wrap .petal_extra_8:before, .tour_petal_wrap .petal_extra_8:after,
.tour_petal_wrap .petal_extra_9:before, .tour_petal_wrap .petal_extra_9:after,
.tour_petal_wrap .petal_extra_10:before, .tour_petal_wrap .petal_extra_10:after,
.tour_petal_wrap .petal_extra_11:before, .tour_petal_wrap .petal_extra_11:after,
.tour_petal_wrap .petal_extra_12:before, .tour_petal_wrap .petal_extra_12:after {
    content: "";
    position: absolute;
    width: 25px;
    height: 25px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23ff8fa3' d='M256 0c-40 0-80 20-110 50-70 70-70 180 0 250l110 110 110-110c70-70 70-180 0-250-30-30-70-50-110-50z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.4;
    z-index: 0;
    pointer-events: none;
}

.latest_event_v2:before, .tour_petal_wrap:before {
    top: 5%;
    left: 10%;
    animation: floating_petal 7s infinite ease-in-out;
}

.latest_event_v2:after, .tour_petal_wrap:after {
    bottom: 10%;
    right: 5%;
    transform: rotate(180deg);
    animation: floating_petal 12s infinite ease-in-out reverse;
}

/* 추가 꽃잎들 */
.latest_event_v2 .petal_extra_1:before, .tour_petal_wrap .petal_extra_1:before {
    top: 20%;
    right: 15%;
    width: 15px;
    height: 15px;
    animation: floating_petal 10s infinite ease-in-out 1s;
}

.latest_event_v2 .petal_extra_1:after, .tour_petal_wrap .petal_extra_1:after {
    bottom: 30%;
    left: 5%;
    width: 20px;
    height: 20px;
    animation: floating_petal 15s infinite ease-in-out 3s;
}

.latest_event_v2 .petal_extra_2:before, .tour_petal_wrap .petal_extra_2:before {
    top: 5%;
    left: 45%;
    width: 18px;
    height: 18px;
    animation: floating_petal 8s infinite ease-in-out 0.5s;
}

.latest_event_v2 .petal_extra_2:after, .tour_petal_wrap .petal_extra_2:after {
    bottom: 5%;
    right: 40%;
    width: 22px;
    height: 22px;
    transform: rotate(45deg);
    animation: floating_petal 14s infinite ease-in-out reverse 2s;
}

.latest_event_v2 .petal_extra_3:before, .tour_petal_wrap .petal_extra_3:before {
    top: 50%;
    left: 10%;
    width: 15px;
    height: 15px;
    animation: floating_petal 9s infinite ease-in-out 4s;
}

.latest_event_v2 .petal_extra_3:after, .tour_petal_wrap .petal_extra_3:after {
    bottom: 60%;
    right: 15%;
    width: 24px;
    height: 24px;
    transform: rotate(120deg);
    animation: floating_petal 11s infinite ease-in-out 1.5s;
}

.latest_event_v2 .petal_extra_4:before, .tour_petal_wrap .petal_extra_4:before {
    top: 80%;
    left: 30%;
    width: 19px;
    height: 19px;
    animation: floating_petal 13s infinite ease-in-out 0s;
}

.latest_event_v2 .petal_extra_4:after, .tour_petal_wrap .petal_extra_4:after {
    top: 25%;
    right: 25%;
    width: 16px;
    height: 16px;
    transform: rotate(-30deg);
    animation: floating_petal 10s infinite ease-in-out reverse 3.5s;
}

.latest_event_v2 .petal_extra_5:before, .tour_petal_wrap .petal_extra_5:before {
    top: 15%;
    left: 70%;
    width: 21px;
    height: 21px;
    animation: floating_petal 8.5s infinite ease-in-out 1.2s;
}

.latest_event_v2 .petal_extra_5:after, .tour_petal_wrap .petal_extra_5:after {
    bottom: 20%;
    right: 60%;
    width: 17px;
    height: 17px;
    transform: rotate(60deg);
    animation: floating_petal 12.5s infinite ease-in-out reverse 0.8s;
}

.latest_event_v2 .petal_extra_6:before, .tour_petal_wrap .petal_extra_6:before {
    top: 60%;
    right: 10%;
    width: 23px;
    height: 23px;
    animation: floating_petal 10.5s infinite ease-in-out 2.5s;
}

.latest_event_v2 .petal_extra_6:after, .tour_petal_wrap .petal_extra_6:after {
    bottom: 75%;
    left: 20%;
    width: 14px;
    height: 14px;
    transform: rotate(-45deg);
    animation: floating_petal 9s infinite ease-in-out 4.2s;
}

.latest_event_v2 .petal_extra_7:before, .tour_petal_wrap .petal_extra_7:before {
    top: 40%;
    left: 80%;
    width: 18px;
    height: 18px;
    animation: floating_petal 14s infinite ease-in-out 1.8s;
}

.latest_event_v2 .petal_extra_7:after, .tour_petal_wrap .petal_extra_7:after {
    bottom: 15%;
    left: 35%;
    width: 20px;
    height: 20px;
    transform: rotate(100deg);
    animation: floating_petal 11.5s infinite ease-in-out reverse 3.1s;
}

.latest_event_v2 .petal_extra_8:before, .tour_petal_wrap .petal_extra_8:before {
    top: 5%;
    left: 85%;
    width: 17px;
    height: 17px;
    animation: floating_petal 8s infinite ease-in-out 0.2s;
}

.latest_event_v2 .petal_extra_8:after, .tour_petal_wrap .petal_extra_8:after {
    bottom: 45%;
    right: 5%;
    width: 21px;
    height: 21px;
    transform: rotate(20deg);
    animation: floating_petal 13s infinite ease-in-out reverse 1.1s;
}

.latest_event_v2 .petal_extra_9:before, .tour_petal_wrap .petal_extra_9:before {
    top: 35%;
    left: 20%;
    width: 24px;
    height: 24px;
    animation: floating_petal 10s infinite ease-in-out 0.9s;
}

.latest_event_v2 .petal_extra_9:after, .tour_petal_wrap .petal_extra_9:after {
    bottom: 85%;
    right: 40%;
    width: 15px;
    height: 15px;
    transform: rotate(-10deg);
    animation: floating_petal 11s infinite ease-in-out 2.8s;
}

.latest_event_v2 .petal_extra_10:before, .tour_petal_wrap .petal_extra_10:before {
    top: 70%;
    left: 55%;
    width: 19px;
    height: 19px;
    animation: floating_petal 12s infinite ease-in-out 1.5s;
}

.latest_event_v2 .petal_extra_10:after, .tour_petal_wrap .petal_extra_10:after {
    bottom: 50%;
    right: 80%;
    width: 22px;
    height: 22px;
    transform: rotate(80deg);
    animation: floating_petal 9.5s infinite ease-in-out reverse 3.7s;
}

.latest_event_v2 .petal_extra_11:before, .tour_petal_wrap .petal_extra_11:before {
    top: 10%;
    left: 25%;
    width: 16px;
    height: 16px;
    animation: floating_petal 14s infinite ease-in-out 0.6s;
}

.latest_event_v2 .petal_extra_11:after, .tour_petal_wrap .petal_extra_11:after {
    bottom: 90%;
    right: 55%;
    width: 14px;
    height: 14px;
    transform: rotate(-60deg);
    animation: floating_petal 8.5s infinite ease-in-out 2.2s;
}

.latest_event_v2 .petal_extra_12:before, .tour_petal_wrap .petal_extra_12:before {
    top: 55%;
    left: 40%;
    width: 25px;
    height: 25px;
    animation: floating_petal 11s infinite ease-in-out 3.3s;
}

.latest_event_v2 .petal_extra_12:after, .tour_petal_wrap .petal_extra_12:after {
    bottom: 25%;
    right: 10%;
    width: 18px;
    height: 18px;
    transform: rotate(140deg);
    animation: floating_petal 10s infinite ease-in-out reverse 1.9s;
}

@keyframes floating_petal {
    0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.2; }
    50% { transform: translate(40px, 60px) rotate(90deg); opacity: 0.5; }
}

/* 내부 컨텐츠가 배경 장식 위에 오도록 설정 */
.event_header, .event_container {
    position: relative;
    z-index: 1;
}

/* 제목 헤더 영역 */
.event_header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 70px;
    position: relative;
    height: 40px;
}

.event_title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 26px;
    font-weight: 800;
    margin: 0;
    text-align: center;
    color: #ff4d6d; /* 벚꽃 느낌의 짙은 핑크 */
}

/* 제목 하단 라인 */
.event_title:after {
    content: "";
    display: block;
    width: 30px;
    height: 3px;
    background: #ff4d6d;
    margin: 10px auto 0;
}

.latest_event_v2 .btn_more {
    font-size: 0.85rem;
    color: #ff4d6d;
    text-decoration: none;
    font-weight: 600;
    opacity: 0.8;
}

.latest_event_v2 .btn_more:hover {
    opacity: 1;
}

/* 메인 컨텐츠 영역 (2단 구성) */
.event_container {
    display: flex;
    gap: 30px;
    align-items: stretch;
}

/* 좌측: 영상 영역 (4/3 비율) */
.event_video_wrap {
    flex: 1.3;
    width: 100%;
}

.video_inner {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%; /* 4:3 비율 (3/4 = 75%) */
    background: #000;
    border-radius: 40px;
    overflow: hidden;
    box-shadow: 0 15px 45px rgba(0,0,0,0.5);
}

.event_video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 우측: 리스트 영역 */
.event_list_wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.event_list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 영상 높이에 맞춰 분산 */
    gap: 15px;
    height: 100%;
}

/* 개별 아이템: 흰색 카드 스타일 */
.event_item {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 20px;
    padding: 10px 15px; /* 패딩 소폭 상하 조절 */
    gap: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
    flex: 1; /* 높이 균등 배분을 위해 flex 추가 */
    min-height: 0; /* flex 자식의 최소 높이 초기화 */
        background: linear-gradient(135deg, #fff5f6 0%, #ffe4e9 50%, #ffd1dc 100%);
}

.event_item:hover {
    transform: scale(1.02);
}

/* 썸네일: 1/1 비율 고정 */
.item_thumb {
    width: 90px; /* 110px에서 90px로 축소 */
    height: 90px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #f0f0f0;
}

.item_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 텍스트 정보 */
.item_info {
    flex: 1;
    overflow: hidden;
    text-align: left;
}

.item_subject {
    display: block;
    font-size: 1.1rem; /* 보편적인 크기로 조절 */
    font-weight: 700;
    color: #1a1b1e;
    margin-bottom: 2px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item_desc {
    font-size: 0.95rem; /* 보편적인 크기로 조절 */
    font-weight: 500;
    color: #666; /* 너무 굵지 않게 색상 변경 */
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 2줄까지 허용으로 변경하여 정보량 증대 */
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

/* 빈 목록 스타일 */
.empty_li {
    text-align: center;
    padding: 50px 0;
    color: #888;
    background: #fff;
    border-radius: 20px;
}

/* -------------------------------------------
   모바일 대응
------------------------------------------- */
@media (max-width: 1100px) {
    .event_container {
        flex-direction: column;
    }
    
    .video_inner {
        border-radius: 25px;
    }
    
    .event_item {
        border-radius: 20px;
    }
}

@media (max-width: 480px) {
    .latest_event_v2 {
        padding: 40px 15px;
    }

    .event_title {
        font-size: 1.4rem;
    }

    .item_thumb {
        width: 80px;
        height: 80px;
    }
    
    .item_subject {
        font-size: 1.1rem;
    }

    .item_desc {
        font-size: 1rem;
    }
}