@charset "utf-8";
/**************************************************
    Ghana Premium Event CSS
**************************************************/

/**************************************************
    Reset & Base
**************************************************/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    min-width: 1080px;
}

body {
    font-family: 'Noto Sans KR', sans-serif;
    background: #FBEFD7;
    color: #3D0214;
    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
    display: block;
}

/**************************************************
    Layout
**************************************************/
#wrap {
    background: #FBEFD7;
}

#mainWrap {
    width: 1080px;
    margin: 0 auto;
    background: #FBEFD7;
}

/**************************************************
    Section 1 - Event Main (이미지)
**************************************************/
#event_main {
    width: 1080px;
    margin: 0 auto;
    background: #FBEFD7;
}

#event_main .section-image {
    width: 100%;
    display: block;
}

/**************************************************
    참여하기 버튼 섹션
**************************************************/
#event_participate {
    width: 1080px;
    margin: 0 auto;
    background: #3B0116;  /* 다크 와인 배경 */
    padding: 50px 0;
}

/* 버튼 영역 */
#event_participate .participate-button-wrap {
    text-align: center;
    padding: 0 40px;
}

/* 이벤트 참여하기 버튼 */
#event_participate .btn-participate {
    display: inline-block;
    width: 500px;
    max-width: 90%;
    height: 80px;
    line-height: 80px;
    background: #C11A42;  /* 레드 배경 */
    border: 3px solid #FBEFD7;  /* 베이지 테두리 */
    border-radius: 50px;
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    letter-spacing: -0.02em;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(193, 26, 66, 0.3);
}

#event_participate .btn-participate:hover {
    background: #A01535;
    border-color: #FBEFD7;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(193, 26, 66, 0.5);
}

/* 버튼 안내 문구 */
#event_participate .btn-info {
    text-align: center;
    font-size: 16px;
    color: #fff;
    margin-top: 20px;
    letter-spacing: -0.02em;
    line-height: 1.5em;
    font-weight: 400;
}

/**************************************************
    Section 2 - Event Notice (원래 디자인)
**************************************************/
#event_notice {
    width: 1080px;
    margin: 0 auto;
    background: #FBEFD7;  /* 베이지 배경 */
    padding: 80px 60px;
}

/* 유의사항 박스 */
#event_notice .notice-box {
    background: #FBEFD7;
    margin-bottom: 40px;
    text-align: center;  /* 배지 가운데 정렬 */
}

/* 유의사항 배지 헤더 */
#event_notice .notice-badge {
    display: inline-block;
    background: #3D0214;  /* 다크 브라운 배경 */
    padding: 12px 40px;
    border-radius: 30px;
    margin-bottom: 30px;
}

#event_notice .notice-badge h2 {
    font-size: 24px;
    color: #F3D5A1;  /* 골드 텍스트 */
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
}

/* 유의사항 리스트 */
#event_notice .notice-list {
    list-style: none;
    background: #FBEFD7;
    padding: 0;
    text-align: left;  /* 리스트 좌측 정렬 */
}

#event_notice .notice-list li {
    position: relative;
    padding: 10px 0 10px 25px;
    font-size: 17px;
    color: #3D0214;
    line-height: 1.6em;
    border-bottom: none;
}

#event_notice .notice-list li:before {
    content: '•';
    position: absolute;
    left: 0;
    top: 10px;
    color: #3D0214;
    font-size: 24px;
    font-weight: 700;
}

/* 개인정보 박스 */
#event_notice .privacy-box {
    background: #FBEFD7;
    margin-bottom: 40px;
    text-align: center;  /* 배지만 가운데 정렬 */
}

/* 개인정보 배지 헤더 */
#event_notice .privacy-badge {
    display: inline-block;
    background: #3D0214;  /* 다크 브라운 배경 */
    padding: 12px 40px;
    border-radius: 30px;
    margin-bottom: 30px;
}

#event_notice .privacy-badge h3 {
    font-size: 20px;
    color: #F3D5A1;  /* 골드 텍스트 */
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
}

/* 개인정보 내용은 좌측 정렬 */
#event_notice .privacy-content {
    padding: 0;
    text-align: left;
}

#event_notice .privacy-content > p {
    font-size: 16px;
    color: #3D0214;
    line-height: 1.8em;
    margin-bottom: 30px;
    letter-spacing: -0.01em;
}

/* 정보 섹션 */
#event_notice .info-section {
    margin: 30px 0;
    padding-left: 20px;
}

#event_notice .info-section h4 {
    font-size: 18px;
    color: #3D0214;
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: -0.02em;
}

#event_notice .info-section p {
    font-size: 16px;
    color: #3D0214;
    line-height: 1.8em;
    margin-bottom: 15px;
    letter-spacing: -0.01em;
}

/* 체크 리스트 */
#event_notice .check-list {
    list-style: none;
    margin: 15px 0;
    padding-left: 0;
}

#event_notice .check-list li {
    position: relative;
    padding: 8px 0 8px 30px;
    font-size: 16px;
    color: #3D0214;
    line-height: 1.8em;
}

#event_notice .check-list li:before {
    content: '■';
    position: absolute;
    left: 0;
    color: #3D0214;
    font-size: 14px;
}

/**************************************************
    Section 3 - Footer Contact (로고 포함)
**************************************************/
#footer_contact {
    width: 1080px;
    margin: 0 auto;
    background: #000;
    padding: 60px 0;
    text-align: center;
}

#footer_contact .contact-info {
    color: #fff;
}

#footer_contact .contact-title {
    font-size: 20px;
    color: #fff;
    margin-bottom: 15px;
    font-weight: 400;
}

#footer_contact .contact-title strong {
    font-size: 28px;
    font-weight: 700;
    margin-left: 10px;
}

#footer_contact .contact-hours {
    font-size: 16px;
    color: #ccc;
    line-height: 1.8em;
    margin-bottom: 8px;
}

/* 롯데웰푸드 SVG 로고 */
#footer_contact .company-logo {
    margin-top: 40px;
    padding-top: 35px;
    border-top: 1px solid #333;
}

#footer_contact .company-logo svg {
    display: inline-block;
    width: 200px;
    height: auto;
    opacity: 1;
    transition: opacity 0.3s ease;
}

#footer_contact .company-logo svg:hover {
    opacity: 0.85;
}

/* 로고 색상 커스터마이징 (필요시) */
#footer_contact .company-logo svg .st1 {
    fill: #da291c;  /* 롯데 레드 */
}

#footer_contact .company-logo svg .st0 {
    fill: #fff;  /* 흰색 */
}


/**************************************************
    반응형 디자인
**************************************************/
@media (max-width: 1080px) {
    html {
        min-width: 100%;
    }

    #mainWrap,
    #event_main,
    #event_participate,
    #event_notice,
    #footer_contact {
        width: 100%;
    }

    #event_notice {
        padding: 60px 30px;
    }
}

@media (max-width: 768px) {
    /* 참여 버튼 섹션 */
    #event_participate {
        padding: 40px 0;
    }

    #event_participate .participate-button-wrap {
        padding: 0 20px;
    }

    #event_participate .btn-participate {
        width: 90%;
        height: 70px;
        line-height: 70px;
        font-size: 24px;
        border-width: 2px;
    }

    #event_participate .btn-info {
        font-size: 14px;
        margin-top: 15px;
    }

    /* 유의사항 섹션 */
    #event_notice {
        padding: 50px 20px;
    }

    #event_notice .notice-badge,
    #event_notice .privacy-badge {
        padding: 10px 30px;
    }

    #event_notice .notice-badge h2 {
        font-size: 20px;
    }

    #event_notice .privacy-badge h3 {
        font-size: 18px;
    }

    #event_notice .notice-list li {
        font-size: 15px;
        padding-left: 20px;
    }

    #event_notice .privacy-content > p,
    #event_notice .info-section p,
    #event_notice .check-list li {
        font-size: 14px;
    }

    #event_notice .info-section h4 {
        font-size: 16px;
    }

    #event_notice .info-section {
        padding-left: 10px;
    }

    /* 푸터 */
    #footer_contact {
        padding: 40px 20px;
    }

    #footer_contact .contact-title {
        font-size: 18px;
    }

    #footer_contact .contact-title strong {
        font-size: 24px;
    }

    #footer_contact .contact-hours {
        font-size: 14px;
    }

    #footer_contact .contact-company {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    #event_participate {
        padding: 30px 0;
    }

    #event_participate .btn-participate {
        width: 95%;
        height: 60px;
        line-height: 60px;
        font-size: 20px;
    }

    #event_participate .btn-info {
        font-size: 13px;
    }

    #event_notice {
        padding: 40px 15px;
    }

    #event_notice .notice-badge,
    #event_notice .privacy-badge {
        padding: 8px 25px;
    }

    #event_notice .notice-badge h2 {
        font-size: 18px;
    }

    #event_notice .privacy-badge h3 {
        font-size: 16px;
    }

    #event_notice .notice-list li {
        font-size: 14px;
        padding-left: 18px;
    }

    #event_notice .privacy-content > p,
    #event_notice .info-section p,
    #event_notice .check-list li {
        font-size: 13px;
    }

    #event_notice .info-section h4 {
        font-size: 15px;
    }
}

/**************************************************
    스크롤 애니메이션
**************************************************/
.section-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.section-animate.active {
    opacity: 1;
    transform: translateY(0);
}

/* 버튼 페이드인 효과 */
#event_participate .btn-participate {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease-out;
}

#event_participate.active .btn-participate {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

#event_participate .btn-info {
    opacity: 0;
    transition: all 0.5s ease-out;
}

#event_participate.active .btn-info {
    opacity: 1;
    transition-delay: 0.4s;
}

/**************************************************
    반응형 - Footer
**************************************************/
@media (max-width: 768px) {
    #footer_contact {
        padding: 40px 20px;
    }

    #footer_contact .contact-title {
        font-size: 18px;
    }

    #footer_contact .contact-title strong {
        font-size: 24px;
    }

    #footer_contact .contact-hours {
        font-size: 14px;
    }

    /* 로고 크기 조정 */
    #footer_contact .company-logo {
        margin-top: 30px;
        padding-top: 25px;
    }

    #footer_contact .company-logo svg {
        width: 200px;
    }
}

@media (max-width: 480px) {
    #footer_contact .contact-title {
        font-size: 16px;
    }

    #footer_contact .contact-title strong {
        font-size: 22px;
        display: block;
        margin-left: 0;
        margin-top: 5px;
    }

    #footer_contact .contact-hours {
        font-size: 13px;
        line-height: 1.6em;
    }

    /* 로고 크기 조정 */
    #footer_contact .company-logo {
        margin-top: 25px;
        padding-top: 20px;
    }

    #footer_contact .company-logo svg {
        width: 160px;
    }
}

/**************************************************
    Print Styles
**************************************************/
@media print {
    #event_participate {
        background: white;
        color: black;
    }

    #event_participate .btn-participate {
        border: 2px solid black;
        color: black;
        background: white;
    }

    #footer_contact {
        background: white;
        color: black;
        border-top: 2px solid black;
    }

    #footer_contact .contact-info,
    #footer_contact .contact-title,
    #footer_contact .contact-hours,
    #footer_contact .contact-company {
        color: black;
    }
}