/* Campaign 2025 Styles */

/* Color Variables */
:root {
    --color-primary: #FDBA46;
}

/* Typography - Font Weights */
.font-light {
    font-weight: 300;
}

.font-normal {
    font-weight: 400;
}

.font-semibold {
    font-weight: 500;
}

.font-bold {
    font-weight: 700;
}

/* Default Font Setting */
.campaign-2025-container {
    font-family: 'NanumSquareNeo', sans-serif;
    font-size: 16px;
}

.campaign-2025-container * {
    font-family: 'NanumSquareNeo', sans-serif;
}

/* Table Row Equal Height */
.table-row-equal {
    flex: 1;
    min-height: 0;
}

/* Bar Graph Animations */
.bar-graph {
    border-radius: 4px;
    position: relative;
    clip-path: inset(0 100% 0 0);
    animation: none;
}

.bar-graph span {
    opacity: 0;
}

/* AOS가 트리거되면 애니메이션 시작 */
.bar-graph.aos-animate {
    animation: barGrow 0.8s ease-out forwards;
}

.bar-graph.aos-animate span {
    animation: fadeIn 0.4s ease-out forwards;
    animation-delay: 0.6s;
}

@keyframes barGrow {
    from {
        clip-path: inset(0 100% 0 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Staggered animation delays for each bar - AOS가 트리거된 후에만 적용 */
.bar-graph.aos-animate:nth-child(1) {
    animation-delay: 0s;
}

.bar-graph.aos-animate:nth-child(2) {
    animation-delay: 0.15s;
}

.bar-graph.aos-animate:nth-child(2) span {
    animation-delay: 0.75s;
}

.bar-graph.aos-animate:nth-child(3) {
    animation-delay: 0.3s;
}

.bar-graph.aos-animate:nth-child(3) span {
    animation-delay: 0.9s;
}

.bar-graph.aos-animate:nth-child(4) {
    animation-delay: 0.45s;
}

.bar-graph.aos-animate:nth-child(4) span {
    animation-delay: 1.05s;
}

/* Container with max-width 1216px */
.campaign-2025-container .section-content {
    max-width: 1216px;
}


@media (max-width: 800px) {
  #section-3 {
    background-position-x: 55%;
  }
  #section-4 {
    background-position-x: 60%;
    background-position: 20% top;
    background-size: 250% !important;
  }
  #section-5 {
    background-position-x: 55%;
  }
  #section-7 {
    background-position-x: 43%;
  }
}
@media (max-width: 500px) {
  #section-1 {
    background-position: 60% top;
  }
  #section-3 {
    background-position: 70% top;
    background-size: 250% !important;
  }
  #section-4 {
    background-position: 20% top;
    background-size: 250% !important;
  }
  #section-5 {
    background-position: 70% top;
    background-size: 250% !important;
  }
  #section-7 {
    background-position: 15% bottom;
    background-size: 290% !important;
  }
}
.gradient-effect {
  background: #ffffff;
  background: linear-gradient(335deg,rgba(255, 255, 255, 0) 0%, rgba(187, 210, 247, 1) 56%, rgba(255, 255, 255, 0.7) 100%);
}
#floatingSidebar {
  display: none;
}

/* ===== Campaign Fixed Bar Responsive ===== */
/* 800px 이하에서 PC 바 숨기기, 모바일 바만 표시 */
@media (max-width: 800px) {
    #campaignFixedBar {
        display: none !important;
    }
}
/* 800px 초과에서 모바일 바 숨기기 */
@media (min-width: 801px) {
    #campaignMobileBar {
        display: none !important;
    }
}

/* ===== Campaign Fixed Bar Styles (PC) ===== */
/* 라디오 버튼 스타일 */
#campaignFixedBar .custom-radio {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    gap: 8px;
}
#campaignFixedBar .custom-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
#campaignFixedBar .custom-radio-circle {
    width: 18px;
    height: 18px;
    border: 2px solid white;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    position: relative;
    flex-shrink: 0;
}
/* 체크된 상태 - 내부 원 표시 */
#campaignFixedBar .custom-radio input[type="radio"]:checked + .custom-radio-circle {
    border-color: #FDBA46;
}
#campaignFixedBar .custom-radio input[type="radio"]:checked + .custom-radio-circle::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #FDBA46;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* PC 드롭다운 셀렉트 박스 */
#campaignFixedBar .custom-select-container {
    position: relative;
    max-width: 180px;
}
#campaignFixedBar .custom-select-container.hidden {
    display: none;
}
#campaignFixedBar .custom-select-display {
    min-width: 100px;
    padding: 28px 16px;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    color: white;
    background-color: #6B5D4D;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
#campaignFixedBar .custom-select-display::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}
#campaignFixedBar .custom-select-options {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background-color: white;
    border: 1px solid #E2DFDD;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    z-index: 10;
    list-style: none;
    margin: 0;
    padding: 0;
}
#campaignFixedBar .custom-select-options.hidden {
    display: none !important;
}
#campaignFixedBar .custom-select-options li {
    padding: 12px 16px;
    font-size: 16px;
    color: #333;
    cursor: pointer;
    transition: background-color 0.2s;
}
#campaignFixedBar .custom-select-options li:hover {
    background-color: #f5f5f5;
}

/* PC 직접입력 컨테이너 */
#campaignFixedBar .custom-input-container {
    display: flex;
    align-items: center;
    padding: 0 16px;
    background-color: #6B5D4D;
    height: 80px;
    gap: 8px;
}
#campaignFixedBar .custom-input-container.hidden {
    display: none;
}
#campaignFixedBar .custom-input {
    width: 140px;
    padding: 8px 12px;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    background-color: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    text-align: right;
}
#campaignFixedBar .custom-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 400;
    text-align: center;
}
#campaignFixedBar .custom-input:focus {
    outline: none;
    border-color: #FDBA46;
}
/* number input 스피너 숨기기 */
#campaignFixedBar .custom-input::-webkit-outer-spin-button,
#campaignFixedBar .custom-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
#campaignFixedBar .custom-input[type=number] {
    -moz-appearance: textfield;
}
/* 직접입력 닫기 버튼 */
#campaignFixedBar .custom-input-close {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    transition: background-color 0.2s;
}
#campaignFixedBar .custom-input-close:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* ===== Campaign Mobile Fixed Bar Styles ===== */
/* 기존 후원 페이지 #donationContainer와 동일한 스타일 */

/* 모바일 바 표시/숨김 상태 (스크롤 기반) */
#campaignMobileBar.campaign-bar-hidden {
    transform: translateY(100%);
    bottom: 0;
}
#campaignMobileBar.campaign-bar-visible {
    transform: translateY(0);
    bottom: 0;
}
/* 팝업 열림 상태 (data-open="false"일 때는 탭만 보임) */
#campaignMobileBar.campaign-bar-visible[data-open="false"] {
    transform: translateY(calc(100% - 3rem));
    bottom: 0;
}
#campaignMobileBar.campaign-bar-visible[data-open="true"] {
    transform: translateY(0);
    bottom: 0;
}
#campaignMobileBar[data-open="true"] #campaignMobilePopupBtn {
    border-top: 1px solid #E2DFDD;
}

/* 탭 버튼 기본 스타일 */
#campaignMobileBar #campaignMobilePopupBtn > div {
    color: white;
    background-color: #8E7C5E;
}
/* 선택된 탭 스타일 */
#campaignMobileBar #campaignMobilePopupBtn > div.active {
    color: #8E7C5E;
    background-color: white;
}

/* 팝업 콘텐츠 스타일 */
#campaignMobileBar #campaignMobilePopup .donationPopupContent {
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 24px;
    color: #616161;
}

/* 모바일 금액 선택 옵션 */
#campaignMobileBar .custom-select-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
#campaignMobileBar .custom-select-options li.option-item {
    flex: 0 0 auto;
    padding: 8px 16px;
    font-size: 14px;
    color: #616161;
    background-color: #f5f5f5;
    border: 1px solid #E2DFDD;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
#campaignMobileBar .custom-select-options li.option-item:hover {
    background-color: #eee;
}
#campaignMobileBar .custom-select-options li.option-item.active {
    border-color: #FDBA46;
    color: #FDBA46;
    background-color: #FFF8E7;
}

/* 모바일 Selected Amount Container */
#campaignMobileBar #campaignMobileSelectedAmountContainer {
    width: 100%;
    padding: 0;
    background-color: transparent;
    border: none;
}
#campaignMobileBar #campaignMobileSelectedAmountContainer:empty {
    display: none;
}
#campaignMobileBar #campaignMobileSelectedAmountContainer .custom-input {
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    background-color: #f5f5f5;
    color: #333;
    border: 1px solid #FDBA46;
    border-radius: 8px;
    text-align: left;
}
/* number input 스피너 숨기기 */
#campaignMobileBar #campaignMobileSelectedAmountContainer .custom-input::-webkit-outer-spin-button,
#campaignMobileBar #campaignMobileSelectedAmountContainer .custom-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
#campaignMobileBar #campaignMobileSelectedAmountContainer .custom-input[type=number] {
    -moz-appearance: textfield;
}
#campaignMobileBar #campaignMobileSelectedAmountContainer #campaignMobileSelectedAmount,
#campaignMobileBar #campaignMobileSelectedAmountContainer #campaignSelectedAmount {
    padding: 8px 16px;
    font-size: 14px;
    color: #FDBA46;
    background-color: #FFF8E7;
    border: 1px solid #FDBA46;
    border-radius: 8px;
}

/* 모바일 팝업 숨김/표시 */
#campaignMobileBar[data-open="false"] #campaignMobilePopup {
    display: none;
}
#campaignMobileBar[data-open="true"] #campaignMobilePopup {
    display: block;
}