@charset "utf-8";
/* 고향온(TPB 허브) 디자인 리뉴얼(renewal 테마) PC 지정기부사업 상세 전용
 * 화면 기준: 서구(TPC) 기부사업 상세 page/donationBiz/detail.html 의 인라인 스타일(.dbView ...)을 renewal 접두어로 옮김
 * 로드: page/donation/renewal/detail.html (공통 리뉴얼 css 는 renewal-main-pc.css)
 */

/* ==============================
* 지정기부사업 상세
* ============================== */
.renewalFundView { display:block; width:100%; padding:24px 0 60px; }
.renewalFundCrumb { font-size:13px; color:#999; margin-bottom:18px; }
.renewalFundCrumb a { color:#999; }
.renewalFundCrumb a:hover { color:#555; }
.renewalFundCrumb b { color:#555; }

.renewalFundTop { display:flex; gap:32px; align-items:flex-start; }
.renewalFundLeft { flex:1 1 56%; min-width:0; }
.renewalFundRight { flex:1 1 44%; min-width:0; display:flex; flex-direction:column; position:sticky; top:90px; align-self:flex-start; }

.renewalFundHero { width:100%; height:460px; background:#f0f0f0; border-radius:14px; overflow:hidden; display:flex; align-items:center; justify-content:center; color:#aaa; font-size:14px; }
.renewalFundHero img { width:100%; height:100%; object-fit:cover; display:block; }
/* e음 사업 이미지 썸네일 (2장 이상일 때) */
.renewalFundThumbs { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.renewalFundThumbs button { display:block; width:80px; height:80px; padding:0; border:2px solid transparent; border-radius:10px; overflow:hidden; background:#f0f0f0; cursor:pointer; }
.renewalFundThumbs button.on { border-color:#121212; }
.renewalFundThumbs img { width:100%; height:100%; object-fit:cover; display:block; }

.renewalFundBadges { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.renewalFundBadge { padding:5px 14px; border-radius:999px; font-size:13px; font-weight:700; }
.renewalFundBadge.ing { background:#e5f4ec; color:#1f9d55; }
.renewalFundBadge.soon { background:#fdf3d3; color:#a97a00; }
.renewalFundBadge.end { background:#f2f2f2; color:#888; }
.renewalFundBadge.kind { background:#eef1f6; color:#45536b; }
.renewalFundTit { font-size:30px; font-weight:800; color:#1a1a1a; margin-bottom:10px; line-height:1.3; word-break:keep-all; }
.renewalFundSubTit { font-size:15px; color:#666; margin-bottom:22px; line-height:1.5; }

.renewalFundCard { border:1px solid #eee; border-radius:14px; padding:22px; margin-bottom:14px; }
.renewalFundCard .amt { font-size:26px; font-weight:800; color:#121212; }
.renewalFundCard .amt.won { font-size:16px; }
.renewalFundCard .rate { float:right; font-size:18px; font-weight:800; color:#0045e6; }
.renewalFundCard .goal { font-size:13px; color:#999; margin-top:4px; }
.renewalFundCard .bar { height:10px; border-radius:999px; background:#f0f0f0; overflow:hidden; margin:14px 0 16px; }
.renewalFundCard .bar > i { display:block; height:100%; background:#ffa300; border-radius:999px; }
.renewalFundCard .stats { display:flex; }
.renewalFundCard .stats .col { flex:1; }
.renewalFundCard .stats .lbl { font-size:13px; color:#999; }
.renewalFundCard .stats .val { font-size:18px; font-weight:800; color:#222; margin-top:4px; }
.renewalFundCard .period { margin-top:14px; padding-top:14px; border-top:1px solid #f2f2f2; font-size:13px; color:#999; }

.renewalFundCard.cta .btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:15px 0; border-radius:10px; font-size:16px; font-weight:700; margin-bottom:10px; box-sizing:border-box; cursor:pointer; }
.renewalFundCard.cta .btn .ico-chevron { width:16px; height:16px; }
.renewalFundCard.cta .btn.point { background:#121212; border:1px solid #121212; color:#fff; }
.renewalFundCard.cta .btn.point .ico-chevron { filter:brightness(0) invert(1); }
.renewalFundCard.cta .btn.line { background:#fff; color:#333; border:1px solid #ddd; }
.renewalFundCard.cta .note { font-size:12px; color:#999; line-height:1.5; text-align:center; margin-top:6px; }

.renewalFundCard .btn.disabled { display:block; width:100%; text-align:center; padding:15px 0; border-radius:10px; font-size:16px; font-weight:700; background:#f2f2f2; color:#aaa; cursor:default; box-sizing:border-box; }
.renewalFundCard .lbl2 { font-size:13px; color:#999; }
.renewalFundCard .preDate { font-size:20px; font-weight:800; color:#35619b; margin:4px 0 16px; }

/* 세액공제 아코디언 (기본 접힘) */
.renewalFundCard.tax { padding:0; background:#fffdf5; border-color:#f2e4bf; color:#6b5a1f; overflow:hidden; }
.renewalFundCard.tax .taxHead { display:flex; align-items:center; width:100%; padding:16px 18px; background:none; border:0; cursor:pointer; text-align:left; }
.renewalFundCard.tax .taxHead .lbl { flex:0 0 auto; font-size:14px; font-weight:700; color:#6b5a1f; }
.renewalFundCard.tax .taxHead .sum { flex:1 1 auto; margin-left:12px; font-size:13px; color:#6b5a1f; line-height:1.4; }
.renewalFundCard.tax .taxHead .sum b { color:#a97a00; font-weight:800; }
.renewalFundCard.tax .taxHead .tgl { flex:0 0 auto; margin-left:8px; font-size:13px; font-style:normal; color:#a97a00; white-space:nowrap; }
.renewalFundCard.tax .taxBody { padding:14px 18px; border-top:1px solid #f2e4bf; }
.renewalFundCard.tax .taxBody[hidden] { display:none; }
.renewalFundCard.tax .taxBody p { font-size:13px; color:#6b5a1f; line-height:1.6; }
.renewalFundCard.tax .taxBody p + p { margin-top:6px; }
.renewalFundCard.tax .taxBody b { color:#a97a00; font-weight:800; }
.renewalFundCard.tax .taxBody .muted { color:#999; }

/* 본문 (BO 상세 본문 또는 e음 사업내용 HTML) */
.renewalFundBody { margin-top:40px; font-size:16px; color:#333; line-height:1.75; word-break:break-all; }
.renewalFundBody img { max-width:100%; height:auto; border-radius:6px; }
.renewalFundBody table { border-collapse:collapse; width:100%; }

.renewalFundListBtn { clear:both; display:flex; justify-content:center; width:100%; margin-top:44px; }
/* 공통 리뉴얼 css(.renewalWrap a { color:inherit; })가 뒤에 로드되므로 선택자를 한 단계 높인다 */
.renewalWrap .renewalFundListBtn a { padding:14px 30px; border-radius:8px; background:#222; color:#fff; font-weight:700; }

/* 답례품 선택 팝업 */
body.renewalScrollLock { overflow:hidden; }
.renewalGiftPick { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; }
.renewalGiftPick[hidden] { display:none; }
.renewalGiftPickDim { position:absolute; inset:0; background:rgba(0,0,0,.5); }
.renewalGiftPickBox { position:relative; display:flex; flex-direction:column; width:1200px; max-width:calc(100% - 80px); max-height:calc(100vh - 120px); padding:40px; border-radius:24px; background:#fff; box-sizing:border-box; outline:0; }
.renewalGiftPickHead { position:relative; padding:0 40px 24px; text-align:center; }
.renewalGiftPickHead h2 { font-size:30px; font-weight:700; line-height:42px; color:#0c0c0c; }
.renewalGiftPickHead h2 em { font-style:normal; color:#ff7300; }
.renewalGiftPickHead p { margin-top:8px; font-size:16px; color:#767676; }
.renewalGiftPickClose { position:absolute; top:0; right:0; width:32px; height:32px; border:0; background:none; cursor:pointer; }
.renewalGiftPickClose::before,
.renewalGiftPickClose::after { content:''; position:absolute; top:50%; left:50%; width:24px; height:2px; background:#333; }
.renewalGiftPickClose::before { transform:translate(-50%, -50%) rotate(45deg); }
.renewalGiftPickClose::after { transform:translate(-50%, -50%) rotate(-45deg); }
.renewalGiftPickList { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:32px 20px; overflow-y:auto; padding-right:4px; }
.renewalGiftPickList a { display:block; }
.renewalGiftPickList .thumb { display:block; overflow:hidden; aspect-ratio:1 / 1; border-radius:16px; background:#f4f4f4; }
.renewalGiftPickList .thumb img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.renewalGiftPickList a:hover .thumb img { transform:scale(1.05); }
.renewalGiftPickList .patr { display:block; margin-top:12px; font-size:13px; color:#999; }
.renewalGiftPickList .name { display:-webkit-box; overflow:hidden; margin-top:4px; font-size:16px; font-weight:500; line-height:24px; color:#0c0c0c; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.renewalGiftPickList .price { display:block; margin-top:6px; font-size:14px; color:#333; }
.renewalGiftPickList .price b { font-size:18px; font-weight:700; }
.renewalGiftPickEmpty { padding:60px 0; text-align:center; font-size:16px; line-height:1.6; color:#999; }