/* donation.css — 후원 전용 스타일 */

/* ── 공통 inner-wrap 제한 ── */
.sub-content-wrap .inner-wrap {
    max-width: 1224px;
}

/* ── 섹션 공통 ── */
.donation-section {
    padding: 0;
}

/* ── 섹션 헤더 ── */
.donation-header {
    margin-bottom: 91px;
}
.don-main-content {
    padding-left: 96px;
}

.donation-label {
    display: table;
    font-family: 'Paperlogy', sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #000000;
    margin-bottom: 14px;
}
.donation-label::after {
    content: '';
    display: block;
    width: 100%;
    height: 6px;
    background: #0D9989;
    margin-top: 10px;
}

.donation-subtitle {
    font-family: 'Paperlogy', sans-serif;
    font-size: 25px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #000000;
    margin: 5px 0 0;
}

/* ── 후원 소개 ── */
.donation-intro {
    margin-bottom: 51px;
}

.donation-intro-text {
    font-family: var(--font-main);
    font-size: 20px;
    font-weight: 500;
    color: var(--color-gray);
    line-height: 1.8;
    letter-spacing: -0.02em;
}

/* ── 후원 방법 카드 ── */
.donation-methods {
    display: flex;
    gap: 26px;
    margin-bottom: 60px;
}

.donation-method-card {
    flex: 1;
    border: 3px solid #0D9989;
    border-radius: 12px;
    padding: 34px 30px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
}

.donation-method-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.donation-method-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.donation-method-title {
    font-family: var(--font-main);
    font-size: 25px;
    font-weight: 700;
    color: var(--color-dark);
    letter-spacing: -0.02em;
}

.donation-method-desc {
    font-family: var(--font-main);
    font-size: 20px;
    font-weight: 500;
    color: var(--color-gray);
    line-height: 1.6;
    letter-spacing: -0.02em;
}

/* ── 후원 계좌 안내 ── */
.donation-account-wrap {
    margin-bottom: 51px;
    border: 3px solid #0D9989;
    border-radius: 12px;
    overflow: hidden;
}

.donation-account-header {
    background: #0D9989;
    padding: 18px 34px;
}

.donation-account-title {
    font-family: var(--font-main);
    font-size: 25px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -0.02em;
}

.donation-account-body {
    background: #fff;
    padding: 24px 34px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.donation-account-row {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border);
}
.donation-account-row:last-child {
    border-bottom: none;
}

.donation-account-bank {
    font-family: var(--font-main);
    font-size: 20px;
    font-weight: 700;
    color: #0D9989;
    width: 120px;
    flex-shrink: 0;
}

.donation-account-number {
    font-family: var(--font-main);
    font-size: 20px;
    font-weight: 600;
    color: var(--color-dark);
    flex: 1;
    letter-spacing: 0.02em;
}

.donation-account-name {
    font-family: var(--font-main);
    font-size: 18px;
    font-weight: 500;
    color: var(--color-gray);
}

.donation-account-note {
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-lgray);
    padding: 16px 34px;
    background: var(--color-main-light);
    line-height: 1.6;
}

/* ── 세제 혜택 안내 ── */
.donation-benefit-wrap {
    margin-bottom: 51px;
    border: 3px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
}

.donation-benefit-header {
    background: var(--color-bg-lt);
    padding: 18px 34px;
}

.donation-benefit-title {
    font-family: var(--font-main);
    font-size: 25px;
    font-weight: 600;
    color: var(--color-dark);
    letter-spacing: -0.02em;
}

.donation-benefit-body {
    background: #fff;
    padding: 24px 34px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.donation-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border);
}
.donation-benefit-item:last-child {
    border-bottom: none;
}

.donation-benefit-label {
    font-family: var(--font-main);
    font-size: 20px;
    font-weight: 700;
    color: var(--color-dark);
    width: 120px;
    flex-shrink: 0;
}

.donation-benefit-desc {
    font-family: var(--font-main);
    font-size: 20px;
    font-weight: 500;
    color: var(--color-gray);
    line-height: 1.6;
}

.donation-benefit-note {
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-lgray);
    padding: 16px 34px;
    background: var(--color-main-light);
    line-height: 1.6;
}

/* ════════════════════════════════
   후원안내 — 소개 영역
════════════════════════════════ */
.don-intro-wrap {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 51px;
}
.don-intro-text {
    flex: 1;
}
.don-intro-headline {
    font-family: 'Paperlogy', sans-serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #222;
    margin: 0 0 24px;
}
.don-intro-headline strong {
    font-family: 'Paperlogy', sans-serif;
    font-size: 40px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
}
.don-intro-body {
    font-family: 'Paperlogy', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.20;
    letter-spacing: -0.02em;
    color: #1E1E1E;
    margin: 0;
}
.don-intro-illust {
    flex-shrink: 0;
    width: 297px;
    height: 297px;
}
.don-intro-illust img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    display: block;
}

/* ════════════════════════════════
   후원 종류 테이블
════════════════════════════════ */
.don-type-wrap {
    margin-bottom: 32px;
    width: 737px;
    height: 194px;
    border: 1px solid #DEF28C;
    border-radius: 8px;
    overflow: hidden;
    box-sizing: border-box;
}
.don-type-header {
    background: #DEF28C;
    font-family: 'Paperlogy', sans-serif;
    font-size: 25px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #333;
    text-align: center;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.don-type-table {
    display: flex;
    flex-direction: column;
    height: 146px;
}
.don-type-row {
    display: flex;
    height: 46px;
    border-top: 1px solid #DEF28C;
}
.don-type-label {
    width: 140px;
    flex-shrink: 0;
    background: #ffffff;
    font-family: 'Paperlogy', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #DEF28C;
}
.don-type-desc {
    flex: 1;
    font-family: 'Paperlogy', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #444;
    display: flex;
    align-items: center;
    padding: 0 20px;
}

/* ════════════════════════════════
   후원 납부 박스
════════════════════════════════ */
.don-payment-wrap {
    border: 3px solid #EAA000;
    border-radius: 30px;
    padding: 20px 28px;
    margin-bottom: 51px;
}
.don-payment-title {
    font-family: 'Paperlogy', sans-serif;
    font-size: 25px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #EAA000;
    margin: 0 0 12px;
}
.don-payment-body p,
.don-payment-contact-label,
.don-payment-contact-nums {
    font-family: 'Paperlogy', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #444;
}
.don-payment-body p {
    margin: 0 0 6px;
}
.don-payment-contact {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.don-payment-contact-label {
    flex-shrink: 0;
    white-space: nowrap;
}
.don-payment-contact-nums {
    line-height: 1.6;
}

/* ════════════════════════════════
   후원신청 폼 (df-*)
════════════════════════════════ */

.df-form {
    max-width: 999px;
    margin-left: 111px;
}

/* df-form 내 모든 텍스트 공통 서체 */
.df-form,
.df-form * {
    font-family: 'Paperlogy', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1;
    letter-spacing: -0.02em;
    vertical-align: bottom;
}

/* ── 섹션 ── */
.df-section {
    margin-bottom: 40px;
}

/* ── 섹션 헤더 (제목 + 우측 안내문구) ── */
.df-section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1px;
}

.df-section-title {
    color: #1E1E1E;
}

.df-section-note {
    color: #e03a3a;
}

.df-note-blue {
    color: #4E95FF;
}

/* ── 섹션 구분선 (3px, #4E95FF) ── */
.df-section-bar {
    width: 999px;
    height: 3px;
    background: #4E95FF;
    margin-bottom: 0;
}

/* ── 폼 행 ── */
.df-row {
    display: flex;
    align-items: flex-start;
    border-bottom: 1px solid #e5e5e5;
    padding: 13px 0;
    min-height: 50px;
    margin-left: 70px;
}

.df-row-label {
    width: 186px;
    flex-shrink: 0;
    color: #1E1E1E;
    padding-top: 3px;
}

.df-req {
    color: #e03a3a;
    margin-right: 2px;
}

/* ── 필드 영역 ── */
.df-row-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

/* 가로 나열 (라디오 그룹 등) */
.df-field-row {
    display: flex;
    flex-direction: row !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 20px;
}

.df-field-row--donor {
    gap: 0 81px;
}

.df-field-row--method {
    gap: 0 59px;
}

.df-field-row--amount {
    gap: 0 29px;
}

.df-field-row--withdraw {
    margin-top: 2px;
}

.df-field-row--wday {
    gap: 0 29px;
}

/* ── 라디오 버튼 ── */
.df-radio {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #1E1E1E;
    cursor: pointer;
    white-space: nowrap;
}

.df-radio-inline {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* ── 텍스트 입력 ── */
.df-input {
    border: 1px solid #C8C8C8;
    border-radius: 4px;
    padding: 8px 12px;
    color: #1E1E1E;
    outline: none;
    transition: border-color .15s;
}
.df-input:focus {
    border-color: #4E95FF;
}
.df-input::placeholder {
    color: #B0B0B0;
}
.df-input:disabled {
    background: #f5f5f5;
    color: #aaa;
}

.df-input-md   { width: 466px; }
.df-input-sm   { width: 118px; }
.df-input-zip  { width: 160px; }
.df-input-addr { width: 639px; }
.df-input-other{ width: 245px; display: inline-block; margin: 0 4px; }
.df-input-acct { width: 218px; }
.df-input-holder{ width: 215px; }
.df-input-day  { width: 65px; display: inline-block; margin: 0 4px; text-align: center; }

/* ── 주민번호 ── */
.df-id-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 466px;
}
.df-id-wrap .df-input {
    flex: 1;
    min-width: 0;
}

.df-dash {
    color: #555;
}

/* ── 힌트 텍스트 ── */
.df-hint {
    color: #4E95FF;
}
.df-form .df-hint,
.df-form .df-hint p {
    line-height: 1.2;
}
.df-hint p {
    margin: 0;
}

/* ── 주소 ── */
.df-addr-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.df-btn-zip {
    width: 143px;
    height: 40px;
    background: #4E95FF;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
    flex-shrink: 0;
}
.df-btn-zip:hover { background: #3a7fe0; }

/* ── 드롭다운 ── */
.df-select {
    border: 1px solid #C8C8C8;
    border-radius: 4px;
    padding: 8px 36px 8px 12px;
    color: #1E1E1E;
    width: 215px;
    outline: none;
    cursor: pointer;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color .15s;
}
.df-select:focus { border-color: #4E95FF; }

/* ── 결제정보 인라인 라벨 (출금은행명, 계좌번호, 예금주명) ── */
.df-payment-label {
    color: #1E1E1E;
    white-space: nowrap;
    flex-shrink: 0;
    width: 90px;
}

/* ── 출금희망일 라벨 ── */
.df-withdraw-label {
    color: #1E1E1E;
    white-space: nowrap;
}

/* ── 개인정보 동의 행 ── */
.df-row--consent {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid #e5e5e5;
}

.df-consent-left {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #1E1E1E;
}

/* 모두 동의합니다 (섹션 헤더 우측) */
.df-check-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1E1E1E;
    cursor: pointer;
    white-space: nowrap;
    width: 232px;
    flex-shrink: 0;
}

/* 개별 동의합니다 (우측) */
.df-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1E1E1E;
    cursor: pointer;
    white-space: nowrap;
    width: 232px;
    flex-shrink: 0;
}

/* 상세보기 + 버튼 */
.df-btn-detail {
    width: 107px;
    height: 31px;
    background: #4E95FF;
    border: none;
    color: #FFFFFF;
    border-radius: 4px;
    padding: 0;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
    flex-shrink: 0;
}
.df-btn-detail:hover { background: #3a7fe0; }

/* ── 상세보기 펼침 박스 ── */
.df-detail-box {
    width: 810px;
    background: #D9D9D9;
    border: 1px solid #C5D8FF;
    margin-left: 70px;
    margin-bottom: 2px;
    box-sizing: border-box;
    overflow: hidden;
    max-height: 0;
    padding: 0 24px;
    opacity: 0;
    transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;
}
.df-detail-box.open {
    max-height: 400px;
    padding: 18px 24px;
    opacity: 1;
}
.df-detail-box--third.open {
    max-height: 600px;
}

.df-detail-list {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    counter-reset: detail-counter;
}
.df-detail-list li {
    counter-increment: detail-counter;
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}
.df-detail-list li::before {
    content: counter(detail-counter) ".";
    flex-shrink: 0;
}

.df-detail-warning {
    color: #005AE0;
    margin: 0;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 4px;
}
.df-detail-bullet {
    flex-shrink: 0;
}

/* 개인정보 안내 문구 */
.df-privacy-note {
    color: #4E95FF;
    margin-top: 10px;
    margin-left: 70px;
}

/* ── 이메일 입력 ── */
.df-input-email {
    width: 340px;
    height: 40px;
    padding: 0 12px;
}

/* ── 일시후원 계좌정보 ── */
.df-account-info {
    font-family: 'Paperlogy', sans-serif;
    font-size: 20px;
    color: #1E1E1E;
    margin: 0;
}

/* ── 물품후원 안내 ── */
.df-row--goods {
    align-items: flex-start;
}
.df-goods-desc {
    font-family: 'Paperlogy', sans-serif;
    font-size: 20px;
    color: #1E1E1E;
    margin: 0 0 16px;
}
.df-goods-images {
    display: flex;
    gap: 20px;
    margin-bottom: 16px;
}
.df-goods-img-box {
    width: 160px;
    height: 160px;
    background: transparent;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.df-goods-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.df-goods-note {
    font-family: 'Paperlogy', sans-serif;
    font-size: 20px;
    color: #4E95FF;
    margin: 0;
}

/* ── 제출 버튼 ── */
.df-submit-wrap {
    text-align: center;
    margin-top: 48px;
    margin-bottom: 60px;
}

.df-btn-submit {
    background: #4E95FF;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 14px 70px;
    cursor: pointer;
    transition: background .15s;
}
.df-btn-submit:hover { background: #3a7fe0; }

/* ── 반응형 ── */
/* 1024 이하: 고정폭/좌측여백 유동화 */
@media (max-width: 1024px) {
    .don-main-content { padding-left: 0; }
    .don-type-wrap    { width: 100%; height: auto; }
    .df-form          { margin-left: 0; max-width: 100%; }
    .df-section-bar   { width: 100%; }
    .df-row           { margin-left: 0; }
    .df-detail-box    { width: 100%; margin-left: 0; }
    .df-privacy-note  { margin-left: 0; }
    /* 넓은 고정폭 입력 → 유동 (태블릿 구간 넘침 방지) */
    .df-input-md, .df-input-email, .df-input-addr, .df-id-wrap {
        width: 100%; max-width: 100%;
    }
    .df-addr-top { flex-wrap: wrap; }
}
@media (max-width: 900px) {
    .donation-methods {
        flex-direction: column;
    }
    .donation-method-card {
        padding: 24px 20px;
    }
    .donation-account-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .donation-account-bank {
        width: auto;
    }
    .donation-benefit-item {
        flex-direction: column;
        gap: 8px;
    }
    .donation-benefit-label {
        width: auto;
    }
}
@media (max-width: 640px) {
    /* 후원안내 — 헤더/소개 */
    .donation-label { font-size: 24px; }
    .donation-subtitle { font-size: 19px; }
    .donation-intro-text { font-size: 16px; line-height: 1.6; }
    .don-intro-wrap { flex-direction: column; gap: 24px; }
    .don-intro-illust { width: 220px; height: 220px; margin: 0 auto; }
    .don-intro-headline { font-size: 22px; }
    .don-intro-headline strong { font-size: 30px; }
    .don-intro-body { font-size: 16px; line-height: 1.5; }
    /* 후원 종류 테이블 */
    .don-type-header { font-size: 19px; }
    .don-type-table { height: auto; }
    .don-type-row { height: auto; min-height: 44px; }
    .don-type-label { width: 96px; font-size: 15px; }
    .don-type-desc { font-size: 15px; padding: 8px 12px; }
    /* 납부 박스 / 방법 카드 / 계좌 / 혜택 */
    .don-payment-title { font-size: 20px; }
    .don-payment-body p,
    .don-payment-contact-label,
    .don-payment-contact-nums { font-size: 16px; line-height: 1.5; }
    .donation-method-title { font-size: 20px; }
    .donation-method-desc { font-size: 16px; }
    .donation-account-title,
    .donation-benefit-title { font-size: 20px; }
    .donation-account-bank,
    .donation-account-number,
    .donation-benefit-label,
    .donation-benefit-desc { font-size: 16px; }

    /* 후원신청 폼 — 폰트/여백 축소 + 고정폭 입력 유동화 */
    .df-form, .df-form * { font-size: 15px; }
    .df-section-title { font-size: 18px; }
    .df-row { flex-direction: column; gap: 6px; padding: 12px 0; }
    .df-row-label { width: auto; padding-top: 0; }
    .df-row-field { width: 100%; }
    .df-input-md, .df-input-email, .df-id-wrap,
    .df-input-addr { width: 100%; max-width: 100%; }
    .df-addr-top { flex-wrap: wrap; }
    .df-input-sm, .df-input-zip, .df-input-acct,
    .df-input-holder, .df-input-other, .df-select { max-width: 100%; }
    .df-check-all, .df-check { width: auto; }
    .df-row--consent { flex-wrap: wrap; gap: 8px; }
    .df-goods-images { flex-wrap: wrap; gap: 12px; }
    .df-goods-img-box { width: 120px; height: 120px; }
    .df-btn-submit { padding: 12px 40px; }
    /* 세로 전환으로 높이 늘어난 상세 박스 여유 */
    .df-detail-box.open { max-height: 900px; }
    .df-detail-box--third.open { max-height: 1100px; }
}