* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
    background-color: #f5f5f5;
    overflow-x: hidden;
}

/* ==================== Sticky 탭 메뉴 ==================== */
.sticky-tab-menu {
    position: fixed;
    top: -100px;
    left: 0;
    width: 100%;
    height: 80px;
    background-image: url('./assets/tab_sub_bg.png');
    background-size: auto 100%;
    background-repeat: repeat-x;
    background-position: center;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: top 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.sticky-tab-menu.visible {
    top: 0;
}

.sticky-tab-container {
    display: flex;
    justify-content: center;
    align-items: center;
    /* gap: 30px; */
    max-width: 900px;
    width: 100%;
    padding: 0 15px;
}

.sticky-tab {
    display: block;
    width: 380px;
    height: 80px;
    text-decoration: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.2s ease;
    cursor: pointer;
    text-indent: -9999px;
}

.sticky-tab1 {
    background-image: url('./assets/tab_sub01.png');
}

.sticky-tab1:hover,
.sticky-tab1.active {
    background-image: url('./assets/tab_sub01_on.png');
}

.sticky-tab2 {
    background-image: url('./assets/tab_sub02.png');
}

.sticky-tab2:hover,
.sticky-tab2.active {
    background-image: url('./assets/tab_sub02_on.png');
}

.sticky-tab3 {
    background-image: url('./assets/tab_sub03.png');
}

.sticky-tab3:hover,
.sticky-tab3.active {
    background-image: url('./assets/tab_sub03_on.png');
}

/* 섹션 앵커 포인트 - 위치 조정 가능 */
.section-anchor {
    position: absolute;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

#section02 {
    top: 11.2%;  /* 섹션 02 위치 */
    left: 0;
}

#section03 {
    top: 32.5%;  /* 섹션 03 위치 */
    left: 0;
}

#section04 {
    top: 60.1%;  /* 섹션 04 위치 */
    left: 0;
}

/* 1205px 이하에서 sticky 탭 숨김 */
@media (max-width: 1205px) {
    .sticky-tab-menu {
        display: none !important;
    }
}

/* ==================== Sticky 탭 메뉴 끝 ==================== */

/* 전체 컨테이너 */
.main-container {
    width: 100%;
    min-width: 1250px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

/* 모바일 기본 숨김 */
.mobile-container {
    display: none;
}

/* ==================== 이벤트 유의사항 Footer (PC) ==================== */
.event-footer {
    position: absolute;
    top: 92%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1200px;
    padding: 60px 80px;
    box-sizing: border-box;
}

.event-footer .footer-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.event-footer .footer-title {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 30px;
}

.event-footer .footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.event-footer .footer-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 1px;
    font-size: 20px;
    line-height: 1.7;
    color: #fff;
}

.event-footer .footer-list li::before {
    content: '·';
    position: absolute;
    left: 0;
    top: 0;
    font-size: 20px;
    font-weight: bold;
}

/* 모바일 footer는 PC에서 숨김 */
.mobile-event-footer {
    display: none;
}

/* ==================== 이벤트 유의사항 Footer 끝 ==================== */

/* ==================== 퀴즈 팝업 스타일 ==================== */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.popup-overlay.active {
    display: flex;
    opacity: 1;
}

.popup-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 90vw;
    max-height: 90vh;
}

.popup-bg {
    position: relative;
    width: min(100vh, 90vw);
    height: 70vh;
    max-width: 90vw;
    max-height: 90vh;
    aspect-ratio: 10 / 7;
    background-image: url('./assets/pc_popup_bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 80px 120px 100px 120px;
}

.popup-content {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 10px;
}

/* 스크롤바 스타일링 */
.popup-content::-webkit-scrollbar {
    width: 8px;
}

.popup-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.popup-content::-webkit-scrollbar-thumb {
    background: rgba(125, 76, 59, 0.5);
    border-radius: 4px;
}

.popup-content::-webkit-scrollbar-thumb:hover {
    background: rgba(125, 76, 59, 0.8);
}

.quiz-image {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* 퀴즈 래퍼 - 상대 위치 기준 */
.quiz-wrapper {
    position: relative;
    width: 100%;
}

/* 퀴즈 체크박스 옵션 */
.quiz-option {
    position: absolute;
    width: 20%;
    height: 5%;
    min-width: 120px;
    min-height: 30px;
    background-image: url('./assets/popup_quiz_check.png');
    background-size: auto 50%;
    background-repeat: no-repeat;
    background-position: left center;
    cursor: pointer;
    z-index: 10;
    transition: transform 0.15s ease;
}

.quiz-option:hover {
    transform: scale(1.03);
}

.quiz-option.selected {
    background-image: url('./assets/popup_quiz_check_on.png');
    background-size: auto 50%;
}

/* 문항 1 체크박스 위치 */
.quiz-q1-opt1 {
    top: 27%;
    left: 28%;
    width: 40%;
}

.quiz-q1-opt2 {
    top: 27%;
    left: 54%;
    width: 40%;
}

/* 문항 2 체크박스 위치 */
.quiz-q2-opt1 {
    top: 51.2%;
    left: 2.7%;
    width: 40%;
}

.quiz-q2-opt2 {
    top: 51.2%;
    left: 54.5%;
    width: 40%;
}

/* 문항 3 체크박스 위치 */
.quiz-q3-opt1 {
    top: 75.3%;
    left: 15.5%;
    width: 40%;
}

.quiz-q3-opt2 {
    top: 75.3%;
    left: 46.5%;
    width: 40%;
}

/* 답안 제출 버튼 */
.quiz-submit-btn {
    position: absolute;
    bottom: 7%;
    left: 50%;
    transform: translateX(-50%);
    width: 65%;
    height: 8%;
    cursor: pointer;
    z-index: 10;
    text-indent: -9999px;
    background-image: url('./assets/pc_popup_quiz_btn.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    border: none;
}

.quiz-submit-btn:hover {
    opacity: 0.85;
}

.popup-close {
    margin-top: -9px;
    padding: 14px 30px;
    background-color: transparent;
    color: #ffffff;
    border: none;
    font-size: 30px;

    font-family: 'Pretendard', sans-serif;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.popup-close:hover {
    opacity: 0.7;
}

/* 결과 팝업 스타일 */
.result-popup-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 90vw;
    max-height: 90vh;
}

.result-image-wrapper {
    position: relative;
    max-width: 650px;
    width: 90vw;
}

.result-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* 응모 완료 배경 이미지 */
.end-background-image {
    position: relative;
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    display: block;
}

/* 응모 완료 슬라이드 컨테이너 */
.end-slide-container {
    position: absolute;
    top: 43%;
    left: 31%;
    width: 38%;
    height: 100%;
    z-index: 1;
}

.end-slide-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    z-index: 1;
}

.end-slide-image.active {
    opacity: 1;
    z-index: 2;
}

/* 우측 상단 X 닫기 버튼 */
.result-close-x {
    position: absolute;
    top: 2%;
    right: 2%;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10;
}

.result-close-x:hover {
    opacity: 0.7;
}

/* 다시 풀기 버튼 */
.result-retry-btn {
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 20%;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10;
}

.result-retry-btn:hover {
    opacity: 0.8;
}

/* 정답 팝업 - 응모 폼 스타일 */
.apply-form-wrapper {
    max-width: 650px;
}

.apply-input {
    position: absolute;
    background: transparent;
    border: none;
    font-size: 22px;
    font-family: 'Pretendard', sans-serif;
    color: #333;
    outline: none;
    padding: 10px;
}

.apply-name {
    top: 49.5%;
    left: 32%;
    width: 60%;
    height: 7%;
}

.apply-phone {
    top: 59.1%;
    left: 32%;
    width: 60%;
    height: 7%;
}

.apply-checkbox-wrapper {
    position: absolute;
    top: 73.8%;
    left: 18.3%;
    width: 63.4%;
    height: 26px;
    cursor: pointer;
}

.apply-checkbox {
    position: absolute;
    opacity: 0;
    width: 26px;
    height: 26px;
    cursor: pointer;
    z-index: 10;
    top: 0;
    left: 0;
}

.apply-checkbox-label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    cursor: pointer;
}

.apply-checkbox:checked + .apply-checkbox-label {
    background-image: url('./assets/pc_popup_apply_checked.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
}

/* 참여 완료하기 버튼 */
.apply-submit-btn {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 13%;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10;
}

.apply-submit-btn:hover {
    opacity: 0.8;
}

/* 응모 완료 팝업 - 반값 한우 사러가기 버튼 */
.apply-complete-link {
    position: absolute;
    bottom: 6%;
    left: 50%;
    transform: translateX(-50%);
    width: 75%;
    height: 12%;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10;
}

.apply-complete-link:hover {
    opacity: 0.8;
}

/* ==================== 퀴즈 팝업 끝 ==================== */

/* ==================== 모바일 Sticky 탭 메뉴 ==================== */

/* 모바일 sticky 탭은 PC에서 숨김 */
.mobile-sticky-tab-menu {
    display: none;
}

@media (max-width: 1205px) {
    .mobile-sticky-tab-menu {
        position: fixed;
        top: -88px;
        left: 0;
        width: 100%;
        height: auto;
        min-height: 50px;
        background-image: url('./assets/mobile/m_tab_sub_bg.png');
        background-size: auto 100%;
        background-repeat: repeat-x;
        background-position: center;
        z-index: 1000;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: top 0.3s ease;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        overflow: hidden;
        pointer-events: none;
        visibility: hidden;
        opacity: 0;
    }
    
    .mobile-sticky-tab-menu.visible {
        top: 0;
        pointer-events: auto;
        visibility: visible;
        opacity: 1;
    }
    
    .mobile-sticky-tab-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 750px;
        padding: 0;
    }
    
    .mobile-sticky-tab {
        display: block;
        flex: 1;
        height: 0;
        padding-bottom: 15%;  /* 비율 유지 (높이/너비) */
        text-decoration: none;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        transition: all 0.2s ease;
        cursor: pointer;
        text-indent: -9999px;
    }
    
    .mobile-sticky-tab1 {
        background-image: url('./assets/mobile/m_tab_sub01.png');
    }
    
    .mobile-sticky-tab1:hover,
    .mobile-sticky-tab1.active {
        background-image: url('./assets/mobile/m_tab_sub01_on.png');
    }
    
    .mobile-sticky-tab2 {
        background-image: url('./assets/mobile/m_tab_sub02.png');
    }
    
    .mobile-sticky-tab2:hover,
    .mobile-sticky-tab2.active {
        background-image: url('./assets/mobile/m_tab_sub02_on.png');
    }
    
    .mobile-sticky-tab3 {
        background-image: url('./assets/mobile/m_tab_sub03.png');
    }
    
    .mobile-sticky-tab3:hover,
    .mobile-sticky-tab3.active {
        background-image: url('./assets/mobile/m_tab_sub03_on.png');
    }
    
    /* 모바일 섹션 앵커 */
    .mobile-section-anchor {
        position: absolute;
        width: 1px;
        height: 1px;
        pointer-events: none;
    }
    
    #m-section02 {
        top: 11.2%;  /* 모바일 섹션 02 위치 */
        left: 0;
    }         

    #m-section03 {
        top: 27.7%;  /* 모바일 섹션 03 위치 */
        left: 0;
    }
    
    #m-section04 {
        top: 60%;  /* 모바일 섹션 04 위치 */
        left: 0;
    }
}

/* 750px 이상 해상도에서도 완전히 숨김 */
@media (min-width: 750px) and (max-width: 1205px) {
    .mobile-sticky-tab-menu:not(.visible) {
        top: -100px;
    }
}

/* ==================== 모바일 Sticky 탭 메뉴 끝 ==================== */

/* ==================== 모바일 퀴즈 팝업 시작 ==================== */

/* 모바일 팝업은 1205px 이하에서만 표시 */
.mobile-popup {
    display: none !important;
}

@media (max-width: 1205px) {
    .mobile-popup {
        display: flex !important;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    
    .mobile-popup.active {
        opacity: 1;
        visibility: visible;
    }
    
    /* 모바일 퀴즈 팝업 컨테이너 */
    .mobile-popup-container {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 98%;
        max-width: 400px;
        max-height: 90vh;
    }
    
    /* 모바일 두루마리 배경 */
    .mobile-popup-bg {
        width: 100%;
        background-image: url('./assets/mobile/m_popup_bg.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding: 15% 8% 10% 8%;
        box-sizing: border-box;
    }
    
    /* 모바일 퀴즈 콘텐츠 */
    .mobile-popup-content {
        width: 100%;
        max-height: 60vh;
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    /* 모바일 퀴즈 래퍼 */
    .mobile-quiz-wrapper {
        position: relative;
        width: 100%;
    }
    
    /* 모바일 퀴즈 이미지 */
    .mobile-quiz-image {
        width: 100%;
        height: auto;
    }
    
    /* 모바일 퀴즈 체크박스 옵션 */
    .mobile-quiz-option {
        position: absolute;
        width: 200px;
        height: 40px;
        background-image: url('./assets/popup_quiz_check.png');
        background-size: 25px 25px;
        background-repeat: no-repeat;
        background-position: left center;
        cursor: pointer;
        z-index: 10;
    }
    
    .mobile-quiz-option.selected {
        background-image: url('./assets/popup_quiz_check_on.png');
        background-size: 25px 25px;
    }
    
    /* 문항 1 체크박스 위치 */
    .mobile-q1-opt1 {
        top: 24.2%;
        left: 13.5%;
        width: 180px;
    }
    
    .mobile-q1-opt2 {
        top: 27.7%;
        left: 13.5%;
        width: 150px;
    }
    
    /* 문항 2 체크박스 위치 */
    .mobile-q2-opt1 {
        top: 50.3%;
        left: 13.5%;
        width: 90%;
    }
    
    .mobile-q2-opt2 {
        top: 54.1%;
        left: 13.5%;
        width: 90%;
    }
    
    /* 문항 3 체크박스 위치 */
    .mobile-q3-opt1 {
        top: 77.2%;
        left: 13.5%;
        width: 200px;
    }
    
    .mobile-q3-opt2 {
        top: 81.1%;
        left: 13.5%;
        width: 250px;
    }

    @media (max-width: 380px) {

        /* 문항 1 체크박스 위치 */
        .mobile-q1-opt1 {
            top: 23.8%;
            left: 13.5%;
            width: 180px;
        }
        
        .mobile-q1-opt2 {
            top: 27.4%;
            left: 13.5%;
            width: 150px;
        }
        
        /* 문항 2 체크박스 위치 */
        .mobile-q2-opt1 {
            top: 49.9%;
            left: 13.5%;
            width: 90%;
        }
        
        .mobile-q2-opt2 {
            top: 53.7%;
            left: 13.5%;
            width: 90%;
        }
        
        /* 문항 3 체크박스 위치 */
        .mobile-q3-opt1 {
            top: 76.8%;
            left: 13.5%;
            width: 200px;
        }
        
        .mobile-q3-opt2 {
            top: 80.7%;
            left: 13.5%;
            width: 250px;
        }
        
    }
    
    /* 모바일 답안 제출 버튼 */
    .mobile-quiz-submit-btn {
        position: absolute;
        bottom: 5%;
        left: 50%;
        transform: translateX(-50%);
        width: 88%;
        height: 6%;
        cursor: pointer;
        z-index: 10;
        text-indent: -9999px;
        background-color: transparent;
        border: none;
    }
    
    /* 모바일 닫기 버튼 */
    .mobile-popup-close {
        position: absolute;
        top: 2%;
        right: 2%;
        width: 35px;
        height: 35px;
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;
        border: none;
        border-radius: 50%;
        font-size: 18px;
        cursor: pointer;
        z-index: 20;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .mobile-popup-close:hover {
        background-color: rgba(0, 0, 0, 0.8);
    }
    
    /* 모바일 결과 팝업 */
    .mobile-result-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 90vw;
        max-height: 90vh;
    }
    
    .mobile-result-wrapper {
        position: relative;
        width: 90vw;
        max-width: 400px;
    }
    
    .mobile-result-image {
        width: 100%;
        height: auto;
        border-radius: 10px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    }
    
    /* 모바일 응모 완료 배경 이미지 */
    .mobile-end-background-image {
        position: relative;
        width: 100%;
        height: auto;
        object-fit: contain;
        border-radius: 10px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
        display: block;
    }
    
    /* 모바일 응모 완료 슬라이드 컨테이너 */
    .mobile-end-slide-container {
        position: absolute;
        top: 43%;
        left: 31%;
        width: 37%;
        height: 100%;
        z-index: 1;
    }
    
    .mobile-end-slide-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        object-fit: contain;
        border-radius: 10px;
        opacity: 0;
        transition: opacity 0.8s ease-in-out;
        z-index: 1;
    }
    
    .mobile-end-slide-image.active {
        opacity: 1;
        z-index: 2;
    }
    
    /* 모바일 X 닫기 버튼 */
    .mobile-result-close-x {
        position: absolute;
        top: 2%;
        right: 2%;
        width: 35px;
        height: 35px;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 10;
    }
    
    /* 모바일 다시 풀기 버튼 */
    .mobile-result-retry-btn {
        position: absolute;
        bottom: 8%;
        left: 50%;
        transform: translateX(-50%);
        width: 60%;
        height: 20%;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 10;
    }
    
    /* 모바일 응모 폼 */
    .mobile-apply-wrapper {
        max-width: 400px;
    }
    
    .mobile-apply-input {
        position: absolute;
        background: transparent;
        border: none;
        font-size: 18px;
        font-family: 'Pretendard', sans-serif;
        color: #333;
        outline: none;
        padding: 8px;
    }
    
    .mobile-apply-name {
        top: 44.5%;
        left: 32%;
        width: 55%;
        height: 10%;
    }
    
    .mobile-apply-phone {
        top: 55.1%;
        left: 32%;
        width: 55%;
        height: 10%;
    }
    
    .mobile-apply-checkbox-wrapper {
        position: absolute;
        top: 70.8%;
        left: 8.3%;
        width: 84.4%;
        height: 2.5vw;
        min-height: 23px;
        max-height: 23px;
        cursor: pointer;
    }
    
    .mobile-apply-checkbox {
        position: absolute;
        opacity: 0;
        width: 5vw;
        height: 5vw;
        min-width: 24px;
        min-height: 24px;
        max-width: 30px;
        max-height: 30px;
        cursor: pointer;
        z-index: 10;
        top: 0;
        left: 0;
    }
    
    /* 작은 화면 (400px 이하) 대응 */
    @media (max-width: 380px) {
        .mobile-apply-checkbox-wrapper {
            min-height: 18px;
        }
        
        .mobile-apply-checkbox {
            width: 24px;
            height: 24px;
        }
    }
    
    .mobile-apply-checkbox-label {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: transparent;
        cursor: pointer;
    }
    
    .mobile-apply-checkbox:checked + .mobile-apply-checkbox-label {
        background-image: url('./assets/pc_popup_apply_checked.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left center;
    }
    
    /* 모바일 참여 완료하기 버튼 */
    .mobile-apply-submit-btn {
        position: absolute;
        bottom: 9%;
        left: 50%;
        transform: translateX(-50%);
        width: 70%;
        height: 10%;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 10;
    }
    
    /* 모바일 응모 완료 링크 */
    .mobile-apply-complete-link {
        position: absolute;
        bottom: 8%;
        left: 50%;
        transform: translateX(-50%);
        width: 60%;
        height: 10%;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 10;
    }
}

/* ==================== 모바일 퀴즈 팝업 끝 ==================== */

/* 1205px 이하에서는 모바일 화면 표시 */
@media (max-width: 1205px) {
    :root {
        --page-width: 100%;
        --focus-ring: #ffffff;
        --focus-shadow: rgba(0, 0, 0, 0.35);
    }

    body {
        display: flex;
        justify-content: center;
        font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
        background-color: #f2efe9;
        overflow-x: hidden;
    }

    .main-container {
        display: none;
    }

    .mobile-container {
        display: block;
        width: 100%;
        max-width: 1205px;
    }

    .page {
        width: 100%;
        max-width: 1205px;
        overflow: hidden;
    }

    .page-image {
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    .page-image img {
        display: block;
        width: 100%;
        height: auto;
    }

    .hero-clean {
        position: absolute;
        inset: 0;
        background: url('./assets/mobile/hero-bg.png') center top / 100% auto no-repeat;
        pointer-events: none;
        z-index: 1;
        display: none;
    }

    @supports (clip-path: inset(1%)) {
        .hero-clean {
            display: block;
            clip-path: inset(4.7% 0 86% 0);
        }
    }

    .hero-person {
        position: absolute;
        pointer-events: none;
        will-change: transform;
        z-index: 2;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        aspect-ratio: 436 / 882;
    }

    .hero-person--left {
        left: -8%;
        top: 4.2%;
        width: 54%;
        background-image: url('./assets/mobile/in01.webp');
    }

    .hero-person--center {
        left: 24.4%;
        top: 4.2%;
        width: 54%;
        background-image: url('./assets/mobile/in02.webp');
    }

    .hero-person--right {
        left: 59.3%;
        top: 4.1%;
        width: 55%;
        background-image: url('./assets/mobile/in03.webp');
    }

    /* 말풍선 메시지 - 순차 등장 후 사라지고 루프 */
    .hero-message {
        position: absolute;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        aspect-ratio: 250 / 177;
        opacity: 0;
        pointer-events: none;
        z-index: 1;
    }

    .hero-message--1 {
        top: 3.6%;
        left: 23%;
        width: 33.33%;
        background-image: url('./assets/mobile/message01.png');
        animation: messageLoop 9s ease-out infinite;
        animation-delay: 0s;
    }

    .hero-message--2 {
        top: 3.6%;
        left: 17.7%;
        width: 33.33%;
        background-image: url('./assets/mobile/message02.png');
        animation: messageLoop 9s ease-out infinite;
        animation-delay: 3s;
    }

    .hero-message--3 {
        top: 3.6%;
        left: 46%;
        width: 33.33%;
        background-image: url('./assets/mobile/message03.png');
        animation: messageLoop 9s ease-out infinite;
        animation-delay: 6s;
    }

    @keyframes messageLoop {
        0% {
            opacity: 0;
            transform: translateY(10px) scale(0.9);
        }
        5% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        28% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        33% {
            opacity: 0;
            transform: translateY(-5px) scale(0.95);
        }
        100% {
            opacity: 0;
            transform: translateY(-5px) scale(0.95);
        }
    }

    .hero-tab-bar {
        position: absolute;
        left: 0;
        top: 9.1%;
        width: 100%;
        height: 2.3%;
        background: url('./assets/mobile/tab_bg.png') center / cover no-repeat;
        z-index: 3;
        pointer-events: none;
    }

    .hero-tab {
        position: absolute;
        display: block;
        z-index: 4;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        cursor: pointer;
    }

    .hero-tab--1 {
        left: 2.22%;
        top: 9.5%;
        width: 31.33%;
        aspect-ratio: 203 / 150;
        background-image: url('./assets/mobile/tab01.png');
    }

    .hero-tab--2 {
        left: 34.82%;
        top: 9.5%;
        width: 31.33%;
        aspect-ratio: 200 / 150;
        background-image: url('./assets/mobile/tab02.png');
    }

    .hero-tab--3 {
        left: 66.82%;
        top: 9.6%;
        width: 31.33%;
        aspect-ratio: 235 / 150;
        background-image: url('./assets/mobile/tab03.png');
    }

    .hero-tab--1:is(:hover, :focus-visible) {
        background-image: url('./assets/mobile/tab01_on.png');
    }

    .hero-tab--2:is(:hover, :focus-visible) {
        background-image: url('./assets/mobile/tab02_on.png');
    }

    .hero-tab--3:is(:hover, :focus-visible) {
        background-image: url('./assets/mobile/tab03_on.png');
    }

    .hotspot {
        position: absolute;
        display: block;
        z-index: 3;
    }

    .hotspot:focus-visible {
        outline: 2px solid var(--focus-ring);
        box-shadow: 0 0 0 4px var(--focus-shadow);
        border-radius: 999px;
    }

    .hotspot-exam {
        left: 8%;
        top: 16.65%;
        width: 84%;
        height: 1.12%;
    }

    .hotspot-all {
        left: 7.6%;
        top: 35%;
        width: 84.4%;
        height: 1.33%;
    }

    .hotspot-sejong {
        left: 7.6%;
        top: 42.1%;
        width: 84.4%;
        height: 1.37%;
    }

    .hotspot-yisunsin {
        left: 7.2%;
        top: 49.41%;
        width: 84.8%;
        height: 1.68%;
    }

    .hotspot-gungye {
        left: 6.4%;
        top: 57.24%;
        width: 85.6%;
        height: 1.25%;
    }

    .hotspot-market {
        left: 6.27%;
        top: 66.76%;
        width: 87.87%;
        height: 1.26%;
    }
    
    /* 모바일 로고 링크 */
    .page-image .mobile-logo-link {
        position: absolute;
        cursor: pointer !important;
        pointer-events: auto !important;
        z-index: 2000 !important;
        text-indent: -9999px;
        overflow: hidden;
        display: block;
        background: transparent;

    }
    
    .page-image .mobile-logo-left {
        top: 0.5%;
        left: 6%;
        width: 39%;
        height: 0.5%;
    }
    
    .page-image .mobile-logo-right {
        top: 0.5%;
        right: 6%;
        width: 21%;
        height: 0.5%;
    }
    
    /* 모바일 Section 04 메시지 이미지 */
    .mobile-section04-message {
        position: absolute;
        top: 68.4%;
        left: 71%;
        transform: translateX(-50%);
        width: auto;
        height: auto;
        z-index: 50;
        pointer-events: none;
        animation: mobileSection04MessageFloat 3s ease-in-out infinite;
    }
    
    .mobile-section04-message img {
        display: block;
        width: auto;
        height: auto;
        max-width: 100%;
    }
    
    /* 모바일 Section 04 메시지 위아래 움직임 애니메이션 */
    @keyframes mobileSection04MessageFloat {
        0%, 100% {
            transform: translateX(-50%) translateY(0);
        }
        50% {
            transform: translateX(-50%) translateY(-10px);
        }
    }
}

/* 페이지 배경 이미지 */
.page-background {
    width: 100%;
    position: relative;
}

.page-background img {
    width: 1920px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* 1920px 이상에서 배경 확대 */
@media (min-width: 1920px) {
    .page-background img {
        width: 100vw;
    }
}

/* 1200px ~ 1920px: 중앙 고정, 양쪽 잘림 */
@media (max-width: 1919px) {
    .main-container {
        overflow: hidden;
    }
    
    .page-background {
        width: 100%;
        overflow: hidden;
    }
    
    .page-background img {
        width: 1920px;
        margin-left: 50%;
        transform: translateX(-50%);
    }
}

/* 클릭 가능한 버튼들 컨테이너 */
.clickable-buttons {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1920px;
    height: 100%;
    z-index: 100;
    pointer-events: none; /* 컨테이너는 클릭 차단, 자식만 허용 */
}

@media (min-width: 1920px) {
    .clickable-buttons {
        width: 100vw;
    }
}

/* 1200px ~ 1920px: 버튼 위치도 중앙 고정 */
@media (max-width: 1919px) {
    .clickable-buttons {
        width: 1920px;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* PC 로고 링크 */
.clickable-buttons .logo-link {
    position: absolute;
    cursor: pointer !important;
    pointer-events: auto !important;
    z-index: 2000 !important;
    text-indent: -9999px;
    overflow: hidden;
    display: block;
    background: transparent;

}

.clickable-buttons .logo-left {
    top: 0.2%;
    left: 2%;
    width: 15%;
    height: 0.8%;
}

.clickable-buttons .logo-right {
    top: 0.2%;
    right: 1%;
    width: 8%;
    height: 0.8%;
}

/* 공통 버튼 스타일 */
.clickable-buttons a {
    position: absolute;
    cursor: pointer !important;
    transition: opacity 0.2s ease;
    text-decoration: none;
    /*background: transparent;*/
    border: none;
    z-index: 1000;
    pointer-events: auto;
}

/* 버튼 호버 시 손가락 커서 강제 적용 */
.clickable-buttons a:hover {
    cursor: pointer !important;
    opacity: 0.9;
}

.clickable-buttons a:active {
    opacity: 0.8;
}

/* KV 탭 버튼은 투명도 효과 제거 (이미지 전환만) */
.btn-kv-tab1:hover,
.btn-kv-tab2:hover,
.btn-kv-tab3:hover {
    opacity: 1;
}

.btn-kv-tab1:active,
.btn-kv-tab2:active,
.btn-kv-tab3:active {
    opacity: 1;
}

/* 말풍선 스타일 */
.message-bubble {
    position: absolute;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 세종대왕 말풍선 */
.message-bubble1 {
    top: -230%;
    left: 80%;
    width: 80%;
    height: 100%;
    background-image: url('./assets/message01.png');
}

/* 이순신 말풍선 */
.message-bubble2 {
    top: -230%;
    left: -55%;
    width: 80%;
    height: 100%;
    background-image: url('./assets/message02.png');
}

/* 궁예 말풍선 */
.message-bubble3 {
    top: -230%;
    left: -63%;
    width: 80%;
    height: 100%;
    background-image: url('./assets/message03.png');
}

/* 호버 시 말풍선 표시 */
.btn-kv-tab1:hover .message-bubble1,
.btn-kv-tab2:hover .message-bubble2,
.btn-kv-tab3:hover .message-bubble3 {
    opacity: 1;
}

/* KV 탭 버튼들 (1920px 기준) */
/* 세종대왕 - 과거 시험 보기 */
.btn-kv-tab1 {
    top: 8.25%;
    left: 20%;
    width: 16%;
    height: 2.3%;
    background-image: url('./assets/pc_tab01.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
}

.btn-kv-tab1:hover {
    background-image: url('./assets/pc_tab01_on.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
}

/* 이순신 - 최대 반값 한우 구매하기 */
.btn-kv-tab2 {
    top: 8.25%;
    left: 42.5%;
    width: 16%;
    height: 2.3%;
    background-image: url('./assets/pc_tab02.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
}

.btn-kv-tab2:hover {
    background-image: url('./assets/pc_tab02_on.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
}

/* 궁예 - 팔도 한우 사는 곳 찾기 */
.btn-kv-tab3 {
    top: 8.25%;
    left: 64.5%;
    width: 16%;
    height: 2.3%;
    background-image: url('./assets/pc_tab03.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
}

.btn-kv-tab3:hover {
    background-image: url('./assets/pc_tab03_on.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
}

/* Section 02 버튼 - 과거 시험 응시하기 */
.btn-section02 {
    top: 16.7%;
    left: 49.5%;
    transform: translateX(-50%);
    width: 37%;
    height: 1.5%;
    background-image: url('./assets/section02-button.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.btn-section02:hover {
    background-image: url('./assets/section02-button.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Section 03 카드 버튼들 */
/* 세종대왕 추천 부위 - 구매하기 */
.btn-card1 {
    top: 44.95%;
    left: 50.5%;
    width: 26.2%;
    height: 1.5%;
    background-image: url('./assets/section03-button01.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.btn-card1:hover {
    background-image: url('./assets/section03-button01.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 이순신 장군 추천 부위 - 구매하기 */
.btn-card2 {
    top: 50.1%;
    left: 24%;
    width: 27.9%;
    height: 2.8%;
    background-image: url('./assets/section03-button02.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.btn-card2:hover {
    background-image: url('./assets/section03-button02.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 궁예 추천 부위 - 구매하기 */
.btn-card3 {
    top: 56.8%;
    left: 50.5%;
    width: 26.2%;
    height: 1.5%;
    background-image: url('./assets/section03-button03.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.btn-card3:hover {
    background-image: url('./assets/section03-button03.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Section 03 카드 버튼 4 - 온라인 한우장터 바로가기 */
.btn-card-all {
    position: absolute;
    top: 39.6%;
    left: 32%;
    width: 36.5%;
    height: 1.4%;
    background-image: url('./assets/section03_button_all_pre.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    z-index: 10;
}

.btn-card-all:hover {
    opacity: 0.9;
}

/* Section 04 버튼 - 팔도 농축수산 대개방 */
.btn-section04 {
    top: 66.1%;
    left: 50%;
    transform: translateX(-50%);
    width: 36.5%;
    height: 1.4%;
    background-image: url('./assets/section04-button.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.btn-section04:hover {
    background-image: url('./assets/section04-button.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Section 04 메시지 이미지 */
.section04-message {
    position: absolute;
    top: 68%;
    left: 73%;
    transform: translateX(-50%);
    width: auto;
    height: auto;
    z-index: 50;
    pointer-events: none;
    animation: section04MessageFloat 3s ease-in-out infinite;
}

.section04-message img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
}

/* Section 04 메시지 위아래 움직임 애니메이션 */
@keyframes section04MessageFloat {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-10px);
    }
}

/* 스크롤 부드럽게 */
html {
    scroll-behavior: smooth;
}

/* Mobile layout (<=1205px) */
.page-mobile .page-image {
    position: relative;
    width: 100%;
}

.page-mobile .page-image img {
    display: block;
    width: 100%;
    height: auto;
}

.page-mobile .hero-clean {
    position: absolute;
    inset: 0;
    background: url("../event/참고/assets/hero-bg.png") center top / 100% auto no-repeat;
    pointer-events: none;
    z-index: 1;
    display: none;
}

@supports (clip-path: inset(1%)) {
    .page-mobile .hero-clean {
        display: block;
        clip-path: inset(4.7% 0 86% 0);
    }
}

.page-mobile .hero-person {
    position: absolute;
    pointer-events: none;
    will-change: transform;
    z-index: 2;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    aspect-ratio: 436 / 882;
}

.page-mobile .hero-person--left {
    left: -8%;
    top: 4.7%;
    width: 54%;
    background-image: url("../event/참고/assets/in01.png");
}

.page-mobile .hero-person--center {
    left: 24.4%;
    top: 4.7%;
    width: 54%;
    background-image: url("../event/참고/assets/in02.png");
}

.page-mobile .hero-person--right {
    left: 59.3%;
    top: 4.6%;
    width: 55%;
    background-image: url("../event/참고/assets/in03.png");
}

/* 말풍선 메시지 */
.page-mobile .hero-message {
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    aspect-ratio: 250 / 177;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

.page-mobile .hero-message--1 {
    top: 4%;
    left: 23%;
    width: 33.33%;
    background-image: url("../event/참고/assets/message01.png");
    animation: messageLoop 9s ease-out infinite;
    animation-delay: 0s;
}

.page-mobile .hero-message--2 {
    top: 4%;
    left: 16.5%;
    width: 33.33%;
    background-image: url("../event/참고/assets/message02.png");
    animation: messageLoop 9s ease-out infinite;
    animation-delay: 3s;
}

.page-mobile .hero-message--3 {
    top: 4%;
    left: 43%;
    width: 33.33%;
    background-image: url("../event/참고/assets/message03.png");
    animation: messageLoop 9s ease-out infinite;
    animation-delay: 6s;
}

@keyframes messageLoop {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.9);
    }
    5% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    28% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    33% {
        opacity: 0;
        transform: translateY(-5px) scale(0.95);
    }
    100% {
        opacity: 0;
        transform: translateY(-5px) scale(0.95);
    }
}

.page-mobile .hero-tab-bar {
    position: absolute;
    left: 0;
    top: 9.8%;
    width: 100%;
    height: 2.64%;
    background: url("../event/참고/assets/tab_bg.png") center / cover no-repeat;
    z-index: 3;
    pointer-events: none;
}

.page-mobile .hero-tab {
    position: absolute;
    display: block;
    z-index: 4;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
}

.page-mobile .hero-tab--1 {
    left: 4.22%;
    top: 10.5%;
    width: 27.07%;
    aspect-ratio: 203 / 150;
    background-image: url("../event/참고/assets/tab01.png");
}

.page-mobile .hero-tab--2 {
    left: 36.62%;
    top: 10.5%;
    width: 26.67%;
    aspect-ratio: 200 / 150;
    background-image: url("../event/참고/assets/tab02.png");
}

.page-mobile .hero-tab--3 {
    left: 66.82%;
    top: 10.5%;
    width: 31.33%;
    aspect-ratio: 235 / 150;
    background-image: url("../event/참고/assets/tab03.png");
}

.page-mobile .hero-tab--1:is(:hover, :focus-visible) {
    background-image: url("../event/참고/assets/tab01_on.png");
}

.page-mobile .hero-tab--2:is(:hover, :focus-visible) {
    background-image: url("../event/참고/assets/tab02_on.png");
}

.page-mobile .hero-tab--3:is(:hover, :focus-visible) {
    background-image: url("../event/참고/assets/tab03_on.png");
}

.page-mobile .hotspot {
    position: absolute;
    display: block;
    z-index: 3;
}

.page-mobile .hotspot:focus-visible {
    outline: 2px solid #ffffff;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.35);
    border-radius: 999px;
}

.page-mobile .hotspot-exam {
    left: 8%;
    top: 16.55%;
    width: 84%;
    height: 1.12%;
}

.page-mobile .hotspot-sejong {
    left: 7.6%;
    top: 41.56%;
    width: 84.4%;
    height: 1.37%;
}

.page-mobile .hotspot-yisunsin {
    left: 7.2%;
    top: 49.41%;
    width: 84.8%;
    height: 1.68%;
}

.page-mobile .hotspot-gungye {
    left: 6.4%;
    top: 58.04%;
    width: 85.6%;
    height: 1.25%;
}

.page-mobile .hotspot-market {
    left: 6.27%;
    top: 68.96%;
    width: 93.87%;
    height: 1.26%;
}

/* ==================== 모바일 이벤트 유의사항 Footer ==================== */
@media (max-width: 1205px) {
    .event-footer {
        display: none;
    }
    
    .mobile-event-footer {
        display: block;
        position: absolute;
        top: 90%;
        left: 0;
        width: 100%;
        padding: 20px 30px;
        box-sizing: border-box;
    }
    
    .mobile-event-footer .footer-inner {
        max-width: 100%;
    }
    
    .mobile-event-footer .footer-title {
        font-size: 18px;
        font-weight: 700;
        color: #fff;
        margin-bottom: 15px;
    }
    
    .mobile-event-footer .footer-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .mobile-event-footer .footer-list li {
        position: relative;
        padding-left: 12px;
        margin-bottom: 8px;
        font-size: 14px;
        line-height: 1.5;
        color: #fff;
    }
    
    .mobile-event-footer .footer-list li::before {
        content: '·';
        position: absolute;
        left: 0;
        top: 0;
        font-size: 14px;
        font-weight: bold;
    }
}

/* ==================== 카피라이트 Footer ==================== */
.copyright-footer {
    position: relative;
    width: 100%;
    clear: both;
    background-color: #1a1a1a;
    padding: 30px 20px;
    text-align: center;
    color: #999;
    font-size: 13px;
    line-height: 1.8;
    margin-top: 0;
    z-index: 1;
}

.copyright-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.copyright-info {
    margin: 0 0 15px 0;
    color: #ccc;
    font-size: 13px;
    line-height: 1.8;
}

.copyright-text {
    margin: 0;
    color: #999;
    font-size: 12px;
    font-weight: 300;
}

/* PC 카피라이트 - PC에서만 표시 */
.mobile-copyright {
    display: none;
}

/* 모바일 카피라이트 스타일 */
@media (max-width: 1205px) {
    /* PC 카피라이트 숨기기 */
    .pc-copyright {
        display: none !important;
    }
    
    /* 모바일 카피라이트 표시 */
    .mobile-copyright {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        clear: both !important;
        float: none !important;
        left: 0 !important;
        right: 0 !important;
        padding: 25px 15px;
        font-size: 11px;
        margin: 0;
        box-sizing: border-box;
    }
    
    .mobile-copyright .copyright-info {
        font-size: 16px;
        line-height: 1.6;
    }
    
    .mobile-copyright .copyright-text {
        font-size: 10px;
        margin-top: 10px;
    }
}

@media (max-width: 480px) {
    .mobile-copyright {
        padding: 20px 10px;
        font-size: 10px;
    }
    
    .mobile-copyright .copyright-info {
        font-size: 10px;
        line-height: 1.5;
    }
    
    .mobile-copyright .copyright-text {
        font-size: 9px;
    }
}