/* 기부 리스트 페이지 */
.donation-list-page{width:100%;display:flex;flex-direction:column;padding:0; max-width: 1050px; margin: 0 auto;gap: 25px;}
.donation-list-page .section-title{width: 100%;  border-bottom: 2px solid #333;padding: 16px 0;}
.donation-list-page .section-title .wraper{max-width:1050px;width:100%;margin:0 auto;}
.donation-list-page .section-title h1{text-align:left;font-size:32px;font-weight:600;letter-spacing:-0.75px;color:#333}

/* 상단 배너 */
.donation-banner{width:100%;background:#23B16C;padding:40px 0;margin-bottom:25px}
.donation-banner .wraper{max-width:1050px;width:100%;margin:0 auto;padding:0 20px}
.donation-banner .banner-content{display:flex;flex-direction:column;gap:10px;text-align:center}
.banner-title{font-size:32px;font-weight:700;color:#fff;letter-spacing:-0.75px;margin:0}
.banner-subtitle{font-size:20px;font-weight:500;color:#fff;letter-spacing:-0.5px;margin:0}

/* 검색 영역 */
.donation-search-section{width:100%;display: flex; justify-content: flex-end;}
.donation-search-box{width:100%;}
.search-form{display:flex;flex-direction:row;gap:15px;align-items:center;justify-content: flex-end;}
.search-select-wrapper{position:relative}
.custom-select{position:relative;width:200px}
.select-trigger{width:100%;height:40px;padding:0 15px;background:#ffffff;border:1px solid #ddd;border-radius:5px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:14px;color:#666}
.select-trigger:hover{border: 1px solid #555;}
.select-trigger .select-text{flex:1}
.select-trigger i{font-size:12px;color:#999;transition:transform .3s}
.custom-select.active .select-trigger i{transform:rotate(180deg)}
.select-options{position:absolute;top:45px;left:0;right:0;background:#fff;border:1px solid #ddd;border-radius:5px;display:none;z-index:10;box-shadow:0 4px 6px rgba(0,0,0,.1)}
.custom-select.active .select-options{display:block}
.select-option{padding:12px 15px;font-size:14px;color:#666;cursor:pointer;transition:color .2s}
.select-option:hover{background:#f9f9f9}
.select-option.selected{color:#23B16C;font-weight:600}
.search-input-wrapper{width: 300px;position:relative;display:flex;align-items:center}
.search-input{width:100%;height:40px;padding:0 50px 0 15px;border:1px solid #ddd;border-radius:5px;font-size:14px}
.search-btn{position:absolute;right:10px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:#23B16C}.search-btn i{font-size:18px}

/* 메인 컨텐츠 영역 */
.donation-list-page .main-content {width: 100%; padding-bottom: 100px;}
.donation-list-page .main-content .wraper { max-width: 1050px; width: 100%; margin: 0 auto; }

/* 기부 그리드 */
.donation-grid-section{width:100%;display:flex;flex-direction:column;gap:40px;}
.donation-grid-section .wraper{max-width:1050px;width:100%;margin:0 auto;padding:0 20px}
.donation-grid{width:100%;display:grid;width: 100%;display: grid; grid-template-columns: repeat(auto-fill, 336px); gap: 40px 20px;}
.donation-card{width:100%;display:flex;flex-direction:column;background:#fff;border-radius:10px;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}
.donation-card-link{width:100%;display:flex;flex-direction:column;text-decoration:none;color:inherit;gap: 20px;}
.donation-card-image{width:100%;height:250px;overflow:hidden;background:#f5f5f5;position:relative;border-radius: 10px;}
.donation-card-image img{width:100%;height:100%;object-fit:cover;display:block}
.donation-card-content{width:100%;display:flex;flex-direction:column;gap:20px}
.donation-text-wrap{width:100%;display:flex;flex-direction:column;gap:8px}
.donation-organization-name{font-size:14px;font-weight:700;color:#23B16C;letter-spacing:-0.5px;margin:0}
.donation-card-title{font-size:16px;font-weight:600;color:#333;letter-spacing:-0.75px;line-height:1.4;margin:0;display:-webkit-box;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:44px}
.donation-amount-box{display:flex;flex-direction:row;align-items:center;gap:6px;padding:10px 16px;background:#f8f8f8;border-radius:5px;margin-top:auto}
.donation-heart-icon{width: 15px; height: 12px; display: block; background: url(../../images/heart_icon.png) 50% 50% no-repeat; background-size: contain;}
.donation-label{font-size:14px;color:#333;font-weight:500;line-height:1}
.donation-amount-value{margin-left:auto;font-size:16px;font-weight:700;color:#222;line-height:1}
.donation-meta-info{display: flex; flex-direction: row; justify-content: flex-start; align-items: center;  gap: 8px;}
.donation-meta-info span + span::before{content: ''; width: 1px; height: 12px; background-color: #B5B5B6; display: block;}
.donation-date{font-size:14px;color:#666;display: flex; flex-direction: row; justify-content: flex-start; align-items: center; font-size: 12px;  letter-spacing: -0.5px;  gap: 8px;}
.donation-views{font-size:14px;color:#666;display: flex; flex-direction: row; justify-content: flex-start; align-items: center; font-size: 12px;  letter-spacing: -0.5px;  gap: 8px;}
.no-donations{grid-column:1/-1;text-align:center;padding:60px 20px;color:#999;font-size:16px}

/* 페이지네이션 */
.donation-grid-section .pagination-wrapper {width: 100%;display: flex;justify-content: center;padding-top: 40px;}

/* 기부 상세 페이지 */
.donation-detail-page{width:100%;display:flex;flex-direction:column;padding:40px 0}
.donation-detail-page .wraper{max-width:1050px;width:100%;margin:0 auto;display: flex;  flex-direction: column; gap: 50px;}
.donation-detail-page .wraper .button{display: flex; flex-direction: row; align-items: center; justify-content: center;padding-top: 20px;}

.donation-detail-page .wraper .donation-main-wrap + .donation-content::before{content: ''; width: 100%; height: 8px; background-color: #F8F8F8; display: block;}

/* 기부상세메인 */
.donation-main-wrap{width: 100%;display: flex;flex-direction: column; gap: 35px;}


/* 기부정보 메인 */
.donation-main{width: 100%;display: flex;flex-direction: column; gap: 35px;}
.donation-main-image{width: 100%; max-height: 580px; overflow: hidden; border-radius: 10px;}
.donation-main-image img{width: 100%; height: 100%; object-fit: cover;}

/* 기부 헤더 */
.donation-header{width:100%;display:flex;flex-direction:column;gap:30px;}
.donation-header-title{font-size:28px;font-weight:700;letter-spacing:-0.75px;color:#333;line-height:1.4;width: 100%;text-align: center;}
.donation-header-date{font-size:16px;color:#666;letter-spacing:-0.5px;width: 100%;text-align: center;}



/* 기부 정보 섹션 */
.donation-info-section{width:100%;display:flex;flex-direction:column;gap:20px;}
.donation-info-section .titl{width:100%;display:flex;flex-direction:column;gap:15px;}
.donation-organization{font-size:18px;font-weight:600;color:#333;letter-spacing:-0.5px}
.donation-quote{font-size:16px;font-weight:400;color:#555;letter-spacing:-0.75px;line-height:1.4;}

.donation-info-section .titl + .donation-stats::before{content: ''; width: 100%; height: 1px; background-color: #eee; display: block;}
.donation-stats{display:flex;flex-direction:column;gap:20px;flex-wrap:wrap}
.donation-stat-box{display: flex;flex-direction: column; gap: 10px; padding: 15px 20px; background-color: #f8f8f8;border-radius: 5px;}
.donation-stat-title{width: 100%; display: flex; flex-direction: row;
justify-content: space-between; align-items: center;}
.donation-stat-title .label{display: flex;flex-direction: row; justify-content: flex-start; align-items: center; gap: 8px;}
.donation-stat-title .label .donation-heart-icon{width: 24px; height: 20px;}
.donation-stat-title .label .stat-label{font-size: 18px;font-weight: 600; color: #333; letter-spacing: -0.75px;}
.donation-stat-title .value{display: flex;flex-direction: row; justify-content: flex-start; align-items: center; gap: 8px;}
.donation-stat-title .value .stat-value{display: flex;flex-direction: row;align-items: flex-end;gap: 3px;}
.donation-stat-title .value .stat-value b{font-size: 32px; font-weight: 700; color: #23B16C; line-height: 1;}
.donation-stat-title .value .stat-value p{font-size: 20px; font-weight: 600;color: #333;line-height: 1;}
.donation-stat-item{display:flex;flex-direction:row;align-items:center;justify-content: space-between;gap:8px}
.donation-stat-item .stat-label{font-size:14px;color:#666;letter-spacing:-0.5px}
.donation-stat-item .stat-value{font-size:15px;font-weight:500;color:#666;letter-spacing:-0.5px}


/* 기부상세내용 */
.donation-content{display: flex; flex-direction: column; gap: 70px;}
.donation-section-wrap{display: flex; flex-direction: column; gap: 70px;}
.donation-section{display: flex; flex-direction: column; gap: 50px;}
.donation-section .section-wrap{display: flex; flex-direction: column; gap: 20px;}
.section-title p{font-size: 18px;color: #23B16C; font-weight: 600; letter-spacing: -0.75px;line-height: 1.4; word-break: keep-all;}
.section-content{width: 100%;}
.section-content p{font-size: 18px; font-weight: 400; letter-spacing: -0.75px; line-height: 1.6; color: #2F2F2F; word-break: keep-all;}

/* 기부 이미지들 */
.donation-images{width:100%;display:flex;flex-direction:column;gap:20px}
.donation-image-item{width:100%;border-radius:10px;overflow:hidden}
.donation-image-item img{width:100%;height:auto;display:block;object-fit:cover}


/* 기부 내역 테이블 */
.donation-breakdown-section{width:100%;display:flex;flex-direction:column;gap:20px}
.breakdown-title{font-size:20px;font-weight:600;color:#333;letter-spacing:-0.75px}
.breakdown-table-wrapper{width:100%;overflow-x:auto}
.breakdown-table{width:100%;border-collapse:collapse;}
.breakdown-table thead{background:#F8F8F8}
.breakdown-table thead tr{border-top: 1px solid #eee; height: 39px;}
.breakdown-table th{padding:10px;font-size:15px;font-weight:600;color:#333;text-align:center;letter-spacing:-0.5px}
.breakdown-table td{padding:10px;font-size:15px;font-weight: 400; color:#333;text-align:center;letter-spacing:-0.5px}
.breakdown-table td.text-left{text-align: left;}
.breakdown-table td.sum{border-right: 1px solid #eee;}
.breakdown-table tr{border-bottom: 1px solid #eee;height: 39px;}
.breakdown-table .total-row{background:#ffffff;}
.breakdown-table .total-row td{color:#333333;font-size:15px;font-weight: 600}

/* 이전/다음 기부 */
.donation-announcements{width:100%;border-top:1px solid #eee;border-bottom:1px solid #eee;}
.announcement-item{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:15px 0;text-decoration:none;color:inherit;transition:color .3s}
.announcement-item:hover{color:#23B16C}
.announcement-item.prev{border-bottom:1px solid #f0f0f0}
.announcement-title{ display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 15px; flex: 1; min-width: 0;}
.announcement-title b{font-size: 16px; color: #666;letter-spacing: -0.75px; font-weight: 600; flex-shrink: 0;}
.announcement-title p{font-size: 16px; color: #333;letter-spacing: -0.75px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0;}
.announcement-date{font-size:14px;color:#999;letter-spacing:-0.5px;flex-shrink: 0;}

/* 목록으로 버튼 */
.back-to-list-btn{display: flex; padding: 10px; background: #23B16C; color: #fff; border-radius: 5px; font-size: 16px;font-weight: 600;letter-spacing: -0.5px; text-decoration: none; transition: all .3s; width: 345px; flex-direction: row; align-items: center; justify-content: center; height: 55px;}
.back-to-list-btn:hover{background:#1d9159}

/* 반응형 */
@media (max-width: 1050px){
    .donation-list-page{padding: 30px 20px;}
    .donation-detail-page{padding: 30px 20px;}
}

@media (max-width: 1024px) {
    .donation-grid { grid-template-columns: repeat(2, 1fr); gap: 20px;}
    .breakdown-table{font-size: 13px;}
}

@media (max-width: 720px) {
    .donation-banner{padding:30px 0}
    .banner-title{font-size:24px}
    .banner-subtitle{font-size:16px}
    .donation-list-page .section-title{padding:20px 0 15px}
    .donation-list-page .section-title h1{font-size:24px}
    .donation-search-section{padding:15px 0 20px}
    .search-form{flex-direction:column;gap:10px}
    .search-select-wrapper,.search-input-wrapper{width:100%}
    .custom-select{width:100%}
    .donation-grid-section{padding:20px 0}
    .donation-grid{grid-template-columns:1fr;gap:20px}
    .donation-card-image{height:180px}
    .donation-card-title{font-size:14px;min-height:40px}
    .donation-amount-value{font-size:14px}
    .donation-meta-info{font-size:11px}

    .donation-header-title { font-size: 22px;}
    .donation-header-date { font-size: 14px;}
    .donation-info-section{padding: 20px;}
    .donation-organization{font-size: 16px;}
    .donation-quote{font-size: 16px;}
    .donation-stats{flex-direction: column; gap: 15px;}
    .donation-stat-item .stat-value{font-size: 16px;}
    .section-content p{font-size: 14px;}
    .breakdown-title{font-size: 16px;}
    .breakdown-table{font-size: 12px;}
    .breakdown-table th{font-size: 11px;}
    .breakdown-table td{font-size: 10px;}
    .breakdown-table .total-row td{font-size: 10px;}
    .announcement-title b{font-size: 14px;}
    .announcement-title p{font-size: 14px;}
}

/* 기부 본문 영역 내 이미지 가로 초과 방지 및 반응형 비율 자동 조정 */
.donation-section img {
    max-width: 100% !important;
    height: auto !important;
}