/* 도와주신 분(게시판 스킨 helper) — /front/about/helper
 * 기부자 예우(게시판 스킨 benefits) — /front/about/benefits 와 상단 안내 상자(.donor-intro)·이름 검색(.donor-search)을 함께 쓴다.
 * 명판 배경(v2): ../images/board/helper-plate-v2.png (880x275 투명 PNG, 원본 1590x497의 축소)
 *   원본 기준 명판 면 1470x377이 사방 60px 여백 안쪽에 있고, 아래 그림자가 여백에 포함돼 있다(CSS radius·shadow 없음).
 *   이미지 대비 비율: 면 x 3.774~96.226%, y 12.07~87.93%(세로 가운데 50%)
 *   이름 영역 = 면 폭 52~94% → 이미지 x 51.85~90.68%(오른쪽 9.32%). 세로 구분선 = 면 폭 45.7%.
 *   기부자 예우 스킨의 카드(.donor-list--plate)도 같은 명판·이름 영역을 쓴다.
 */
.helper-donor {
    margin-bottom: 4rem;
}

/* 연도 탭 */
.helper-donor__years {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 3.6rem;
}

.helper-donor__year {
    min-width: 9rem;
    padding: 0.9rem 2.6rem;
    border: 1px solid #d6cfae;
    border-radius: 2.2rem;
    background-color: #fff;
    font-family: "NanumSquareAc", sans-serif;
    font-size: 1.6rem;
    line-height: 2.2rem;
    color: #7a6a2c;
    text-align: center;
    transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.helper-donor__year:hover,
.helper-donor__year:focus-visible {
    border-color: #1a2a6c;
    color: #1a2a6c;
}

.helper-donor__year.is-active {
    border-color: #1a2a6c;
    background-color: #1a2a6c;
    font-weight: 700;
    color: #fff;
}

/* 그룹 */
.helper-donor__group {
    margin-top: 4.6rem;
}

.helper-donor__group-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    margin-bottom: 2.2rem;
    font-family: "NanumSquareAc", sans-serif;
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 3.2rem;
    color: #1a2a6c;
}

.helper-donor__group-title::before,
.helper-donor__group-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #c9a94a);
}

.helper-donor__group-title::after {
    background: linear-gradient(90deg, #c9a94a, transparent);
}

.helper-donor__group-count {
    font-weight: 400;
    font-size: 1.4rem;
    color: #9a8a4a;
}

/* 명패
 * 이미지 여백(면 밖 사방 60/1590 = 폭의 3.77%, 양쪽 합 약 7.5%)이 간격 대부분을 차지한다.
 * PC 명패 폭 약 357px 기준 면 사이 보이는 간격 가로 약 30px·세로 약 27px(v1 처음 간격 15·12px의 2배)이 되게 CSS 간격을 둔다. */
.helper-donor__plates {
    --helper-plate-gap-x: 0.3rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 var(--helper-plate-gap-x);
}

/* 첫 그룹(300만원 이상)도 다른 그룹과 같은 한 칸 크기로, 가운데에 둔다. */
.helper-donor__group--lg .helper-donor__plates {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.helper-donor__group--lg .helper-donor__plate {
    flex: 0 0 calc((100% - var(--helper-plate-gap-x) * 2) / 3);
}

.helper-donor__plate {
    position: relative;
    aspect-ratio: 1590 / 497;
    background: url(../images/board/helper-plate-v2.png) no-repeat center / 100% 100%;
    container-type: inline-size;
}

.helper-donor__plate[hidden] {
    display: none;
}

.helper-donor__name {
    position: absolute;
    top: 50%;
    left: 51.85%;
    right: 9.32%;
    transform: translateY(-50%);
    overflow: hidden;
    font-family: "NanumSquareAc", sans-serif;
    font-weight: 800;
    font-size: 3.2rem;
    font-size: 9.4cqw;
    line-height: 1.2;
    color: #181208;
    text-align: center;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(255, 240, 180, 0.6);
}

/* 4자 이하: 글자 사이를 띄운다(마지막 글자 뒤 간격은 상쇄).
 * 앞뒤 간격(0.5em)은 보이지 않으므로 상자를 그만큼 넓혀 글자는 이름 영역 안에 둔다. */
.helper-donor__name.is-spaced {
    left: calc(51.85% - 0.5em);
    right: calc(9.32% - 0.5em);
    letter-spacing: 0.5em;
    text-indent: 0.5em;
}

.helper-donor__name.is-long {
    font-size: 2rem;
    font-size: 5.9cqw;
}

.helper-donor__name.is-longer {
    font-size: 1.7rem;
    font-size: 4.8cqw;
}

/* 더보기 */
.helper-donor__more {
    display: flex;
    justify-content: center;
    margin-top: 2.6rem;
}

.helper-donor__more[hidden] {
    display: none;
}

.helper-donor__more-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1.2rem 2.6rem;
    border: 1px solid #d8d8e0;
    border-radius: 2.6rem;
    background-color: #fff;
    font-family: "NanumSquareAc", sans-serif;
    font-size: 1.6rem;
    line-height: 2.2rem;
    color: #1d2340;
    transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.helper-donor__more-icon {
    width: 1.2rem;
    height: 1.2rem;
    background: url(../images/plus.png) no-repeat center / cover;
}

.helper-donor__more-count {
    font-style: normal;
    font-size: 1.3rem;
    color: #8b8fa3;
}

.helper-donor__more-btn:hover,
.helper-donor__more-btn:focus-visible {
    border-color: #112f75;
    background-color: #112f75;
    color: #fff;
}

.helper-donor__more-btn:hover .helper-donor__more-icon,
.helper-donor__more-btn:focus-visible .helper-donor__more-icon {
    background-image: url(../images/plus-white.png);
}

.helper-donor__more-btn:hover .helper-donor__more-count,
.helper-donor__more-btn:focus-visible .helper-donor__more-count {
    color: #d9dde7;
}

@media (max-width: 1200px) {
    .helper-donor__group-title {
        font-size: 2.2rem;
    }
}

@media (max-width: 768px) {
    .helper-donor__years {
        margin-top: 3rem;
    }

    .helper-donor__group {
        margin-top: 3.6rem;
    }

    .helper-donor__group-title {
        gap: 1rem;
        margin-bottom: 1.6rem;
        font-size: 2rem;
        line-height: 2.8rem;
    }

    .helper-donor__plates {
        --helper-plate-gap-x: 0.2rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .helper-donor__group--lg .helper-donor__plate {
        flex-basis: calc((100% - var(--helper-plate-gap-x)) / 2);
    }
}

@media (max-width: 480px) {
    .helper-donor__years {
        gap: 0.8rem;
        margin-top: 2.4rem;
    }

    .helper-donor__year {
        min-width: 7.6rem;
        padding: 0.7rem 2rem;
        font-size: 1.5rem;
    }

    .helper-donor__group {
        margin-top: 3rem;
    }

    .helper-donor__group-title {
        font-size: 1.8rem;
        line-height: 2.6rem;
    }

    .helper-donor__more-btn {
        padding: 1rem 2.2rem;
        font-size: 1.5rem;
    }

    /* 2열 명판은 이름 영역이 좁아(약 65px) 5자 이상 이름은 띄어쓰기에서 두 줄로 나눠 글자 크기를 지킨다. */
    .helper-donor__name.is-long,
    .helper-donor__name.is-longer {
        font-size: 1.3rem;
        font-size: 7.6cqw;
        line-height: 1.15;
        white-space: normal;
        word-break: keep-all;
    }
}

@media (max-width: 300px) {
    .helper-donor__plates {
        grid-template-columns: minmax(0, 1fr);
    }

    .helper-donor__group--lg .helper-donor__plate {
        flex-basis: 100%;
    }
}

/* ===== 상단 안내 상자(도와주신 분·기부자 예우 공용) =====
 * 디자인(PSD) 좌표를 그대로 옮긴다. --u = 디자인 1px.
 *   PC   : 상자 860px 기준(web 1920 시안). 화면이 좁으면 상자 폭에 비례해 줄인다.
 *   모바일: 상자 1320px 기준(mobile 1440 시안)을 상자 폭에 맞춰 줄인다.
 * 기본 = 도와주신 분(소제목·제목·설명). .donor-intro--benefits = 기부자 예우(2줄 제목·흰 카드 2개·안내·크라우드 펀딩 버튼, 2026-10-20 시안).
 * 이미지: ../images/board/donor-intro-*.png (PSD 레이어 추출 2배: 구름·택배상자·하트·느낌표·H 하트, 인형 원본 257x329)
 */
.donor-intro {
    container-type: inline-size;
    width: min(86rem, 100% - 7.2rem);
    margin: 0 auto 4.4rem;
}

.helper-donor .donor-intro {
    margin-bottom: 0;
}

.donor-intro__box,
.donor-intro__fund-wrap {
    --u: 1px;
}

@supports (width: 1cqw) {
    .donor-intro__box,
    .donor-intro__fund-wrap {
        --u: calc(100cqw / 860);
    }
}

.donor-intro__box {
    position: relative;
    padding: calc(46 * var(--u)) 0 calc(42 * var(--u));
    border-radius: calc(30 * var(--u));
    background-color: #dceef4;
    font-family: "S-CoreDream", sans-serif;
    color: #112f75;
    text-align: center;
    letter-spacing: -0.06em;
    white-space: nowrap;
}

.donor-intro__cloud,
.donor-intro__sun,
.donor-intro__mascot {
    position: absolute;
    pointer-events: none;
}

.donor-intro__cloud {
    background: no-repeat center / 100% 100%;
}

.donor-intro__cloud--lg {
    top: calc(32 * var(--u));
    left: calc(35 * var(--u));
    width: calc(115 * var(--u));
    height: calc(68 * var(--u));
    background-image: url(../images/board/donor-intro-cloud-lg.png);
}

.donor-intro__cloud--sm {
    bottom: calc(22 * var(--u));
    left: calc(-3 * var(--u));
    width: calc(58.5 * var(--u));
    height: calc(48 * var(--u));
    background-image: url(../images/board/donor-intro-cloud-sm.png);
}

.donor-intro__sun {
    top: calc(37 * var(--u));
    left: calc(688 * var(--u));
    width: calc(70 * var(--u));
    height: calc(70 * var(--u));
    border-radius: 50%;
    background-color: #fff;
}

.donor-intro__mascot {
    top: calc(-9 * var(--u));
    left: calc(713 * var(--u));
    width: calc(183 * var(--u));
    height: calc(234.4 * var(--u));
    background: url(../images/board/donor-intro-mascot.png) no-repeat center / 100% 100%;
}

.donor-intro__text {
    position: relative;
}

.donor-intro__eyebrow {
    display: table;
    margin: 0 auto;
    border-top: calc(2 * var(--u)) solid #00467f;
    border-bottom: calc(2 * var(--u)) solid #00467f;
    font-weight: 500;
    font-size: calc(17 * var(--u));
    line-height: calc(36 * var(--u));
}

.donor-intro__title {
    margin-top: calc(15 * var(--u));
    font-weight: 300;
    font-size: calc(40 * var(--u));
    line-height: calc(48 * var(--u));
    letter-spacing: -0.08em; /* 시안 글자 폭에 맞춤 */
}

.donor-intro__title strong {
    font-weight: 700; /* S-CoreDream-7ExtraBold */
    letter-spacing: -0.06em;
}

.donor-intro__desc {
    margin-top: calc(12 * var(--u));
    font-weight: 400;
    font-size: calc(17 * var(--u));
    line-height: calc(30 * var(--u));
}

.donor-intro__br--mo {
    display: none;
}

/* --- 기부자 예우(2026-10-20 시안): 상자 860x640, 흰 카드 700x140 두 개, 아래 안내 줄 --- */
.donor-intro--benefits .donor-intro__box {
    height: calc(640 * var(--u));
    padding: calc(53 * var(--u)) 0 0;
}

.donor-intro--benefits .donor-intro__cloud--sm {
    top: calc(178 * var(--u));
    bottom: auto;
}

.donor-intro--benefits .donor-intro__sun {
    top: calc(36 * var(--u));
    left: calc(687 * var(--u));
    width: calc(72 * var(--u));
    height: calc(72 * var(--u));
}

.donor-intro--benefits .donor-intro__mascot {
    z-index: 2; /* 시안처럼 인형이 첫 카드 위로 겹친다 */
    top: calc(61 * var(--u));
    left: calc(664 * var(--u));
}

.donor-intro--benefits .donor-intro__eyebrow {
    font-size: calc(18 * var(--u));
    line-height: calc(37 * var(--u));
}

.donor-intro--benefits .donor-intro__title {
    margin-top: calc(17 * var(--u));
    padding-right: calc(13 * var(--u)); /* 시안 제목은 상자 가운데보다 6.5px 왼쪽 */
    line-height: calc(52 * var(--u));
    letter-spacing: -0.06em;
}

.donor-intro--benefits .donor-intro__title strong {
    font-weight: 800; /* S-CoreDream-8Heavy */
    color: #2ca5ea;
}

.donor-intro__cards {
    position: absolute;
    top: calc(250 * var(--u));
    left: calc(80 * var(--u));
    width: calc(700 * var(--u));
    font-family: "NanumSquare", "NanumSquareAc", sans-serif;
    text-align: left;
}

/* 글자 크기가 다른 요소마다 em으로 다시 지정해야 자간이 글자 크기에 비례한다(상속은 px로 굳는다). */
.donor-intro__cards p,
.donor-intro__cards strong,
.donor-intro__cards em {
    letter-spacing: -0.085em; /* 시안 글자 폭에 맞춤 */
}

.donor-intro__card {
    position: relative;
    height: calc(140 * var(--u));
    border-radius: calc(20 * var(--u));
    background-color: #fff;
}

.donor-intro__card + .donor-intro__card {
    margin-top: calc(10 * var(--u));
}

.donor-intro__card-icon {
    position: absolute;
    top: calc(35 * var(--u));
    left: calc(30 * var(--u));
    width: calc(70 * var(--u));
    height: calc(70 * var(--u));
    border-radius: 50%;
    background-color: #ffe29d;
}

.donor-intro__card-icon::after {
    content: "";
    position: absolute;
    top: calc(7 * var(--u));
    left: calc(13 * var(--u));
    width: calc(53 * var(--u));
    height: calc(55 * var(--u));
    background: url(../images/board/donor-intro-parcel.png) no-repeat center / 100% 100%;
}

.donor-intro__card--heart .donor-intro__card-icon {
    background-color: #cbebae;
}

.donor-intro__card--heart .donor-intro__card-icon::after {
    top: calc(17 * var(--u));
    left: calc(13 * var(--u));
    width: calc(45 * var(--u));
    height: calc(44 * var(--u));
    background-image: url(../images/board/donor-intro-heart.png);
}

.donor-intro__card-body {
    position: absolute;
    left: calc(122 * var(--u));
    color: #112f75;
}

.donor-intro__card--gift .donor-intro__card-body {
    top: calc(22.5 * var(--u));
}

.donor-intro__card--heart .donor-intro__card-body {
    top: calc(38 * var(--u));
}

.donor-intro__card-title {
    display: flex;
    align-items: baseline;
    margin-left: calc(-7 * var(--u));
    font-weight: 700;
    font-size: calc(22 * var(--u));
    line-height: 1;
    color: #112f75;
    white-space: pre;
}

.donor-intro__card-title strong {
    position: relative;
    top: calc(2 * var(--u));
    margin-right: calc(5 * var(--u));
    margin-left: calc(-6 * var(--u));
    font-weight: 800;
    letter-spacing: -0.06em;
    font-size: calc(60 * var(--u));
    color: #f2b600;
}

.donor-intro__card-title em,
.donor-intro__card-desc em {
    font-style: normal;
    color: #f2b600;
}

.donor-intro__card-desc {
    font-weight: 700;
    font-size: calc(17 * var(--u));
    line-height: calc(24 * var(--u));
}

.donor-intro__card--heart .donor-intro__card-desc {
    line-height: calc(33 * var(--u));
}

.donor-intro__card--heart .donor-intro__card-desc strong {
    font-weight: 800;
    font-size: calc(24 * var(--u));
    color: #68af16;
}

.donor-intro__note {
    position: absolute;
    top: calc(563 * var(--u));
    left: 0;
    right: 0;
    font-family: "NanumSquare", "NanumSquareAc", sans-serif;
    font-weight: 400;
    font-size: calc(17 * var(--u));
    line-height: calc(35 * var(--u));
    padding-right: calc(7 * var(--u)); /* 시안 안내 줄은 가운데보다 3.5px 왼쪽 */
    color: #112f75;
    text-align: center;
    letter-spacing: -0.08em; /* 시안 글자 폭에 맞춤 */
}

.donor-intro__note::before {
    content: "";
    display: inline-block;
    width: calc(35 * var(--u));
    height: calc(35 * var(--u));
    margin-right: calc(11 * var(--u));
    vertical-align: top;
    background: url(../images/board/donor-intro-notice.png) no-repeat center / 100% 100%;
}

.donor-intro__note em {
    font-style: normal;
    color: #d26807;
}

/* 크라우드 펀딩 버튼(상자 아래 40px, 280x70 남색 알약) */
.donor-intro__fund-wrap {
    padding-top: calc(40 * var(--u));
    text-align: center;
}

.donor-intro__fund {
    display: inline-flex;
    align-items: center;
    height: calc(70 * var(--u));
    padding: 0 calc(22 * var(--u)) 0 calc(25 * var(--u));
    border-radius: calc(35 * var(--u));
    background-color: #02307a;
    font-family: "NanumSquare", "NanumSquareAc", sans-serif;
    font-weight: 700;
    font-size: calc(18 * var(--u));
    letter-spacing: -0.06em;
    color: #fff;
    white-space: nowrap;
    transition: background-color 0.3s ease;
}

.donor-intro__fund:hover,
.donor-intro__fund:focus-visible {
    background-color: #112f75;
    color: #fff;
}

.donor-intro__fund:focus-visible {
    outline: 3px solid #2ca5ea;
    outline-offset: 3px;
}

.donor-intro__fund-icon {
    flex: 0 0 auto;
    width: calc(31 * var(--u));
    height: calc(28.5 * var(--u));
    margin-right: calc(8 * var(--u));
    background: url(../images/board/donor-intro-fund.png) no-repeat center / 100% 100%;
}

.donor-intro__fund-new {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (max-width: 768px) {
    .donor-intro {
        width: min(54rem, 100% - 0.4rem); /* 상자 밖으로 나온 인형(상자 폭의 3.9%)이 화면 밖으로 잘리지 않게 */
        margin-bottom: 2.4rem;
    }

    .donor-intro__box,
    .donor-intro__fund-wrap {
        --u: calc((100vw - 2.8rem) / 1320);
    }

    @supports (width: 1cqw) {
        .donor-intro__box,
        .donor-intro__fund-wrap {
            --u: calc(100cqw / 1320);
        }
    }

    .donor-intro__box {
        padding: calc(88 * var(--u)) 0 calc(81.5 * var(--u));
        border-radius: calc(50 * var(--u));
        color: #02307a;
    }

    .donor-intro__cloud--lg {
        top: calc(109 * var(--u));
        left: calc(72 * var(--u));
        width: calc(195 * var(--u));
        height: calc(115 * var(--u));
    }

    .donor-intro__cloud--sm {
        top: calc(389 * var(--u));
        bottom: auto;
        width: calc(100 * var(--u));
        height: calc(81 * var(--u));
    }

    .donor-intro__sun {
        top: calc(106 * var(--u));
        left: calc(1068 * var(--u));
        width: calc(160 * var(--u));
        height: calc(160 * var(--u));
    }

    .donor-intro__mascot {
        top: calc(156 * var(--u));
        left: calc(1050 * var(--u));
        width: calc(322 * var(--u));
        height: calc(411 * var(--u));
    }

    .donor-intro__eyebrow {
        border-top-width: calc(6 * var(--u));
        border-bottom-width: calc(6 * var(--u));
        border-color: #02307a;
        font-size: calc(38 * var(--u));
        line-height: calc(79 * var(--u));
    }

    .donor-intro__title {
        margin-top: calc(29 * var(--u));
        font-size: calc(88 * var(--u));
        line-height: calc(110 * var(--u));
    }

    .donor-intro__desc {
        margin-top: calc(21.5 * var(--u));
        font-size: calc(38 * var(--u));
        line-height: calc(67 * var(--u));
    }

    .donor-intro__br--mo {
        display: inline;
    }

    .donor-intro__br--pc {
        display: none;
    }

    /* 기부자 예우 모바일: 상자 1320x1400, 흰 카드 1200x360 두 개 */
    .donor-intro--benefits .donor-intro__box {
        height: calc(1400 * var(--u));
        padding: calc(106 * var(--u)) 0 0;
    }

    .donor-intro--benefits .donor-intro__cloud--lg {
        top: calc(83 * var(--u));
        left: calc(50 * var(--u));
        width: calc(205 * var(--u));
        height: calc(121 * var(--u));
    }

    .donor-intro--benefits .donor-intro__cloud--sm {
        top: calc(345 * var(--u));
        left: calc(-18 * var(--u));
        width: calc(105 * var(--u));
        height: calc(86 * var(--u));
    }

    .donor-intro--benefits .donor-intro__sun {
        top: calc(127 * var(--u));
        left: calc(1073 * var(--u));
        width: calc(164 * var(--u));
        height: calc(164 * var(--u));
    }

    .donor-intro--benefits .donor-intro__mascot {
        top: calc(209 * var(--u));
        left: calc(1063 * var(--u));
        width: calc(275 * var(--u));
        height: calc(352 * var(--u));
    }

    .donor-intro--benefits .donor-intro__eyebrow {
        font-size: calc(38 * var(--u));
        line-height: calc(77 * var(--u));
        letter-spacing: -0.043em; /* 시안 글자 폭에 맞춤 */
    }

    .donor-intro--benefits .donor-intro__title {
        margin-top: calc(32.5 * var(--u));
        font-size: calc(80 * var(--u));
        line-height: calc(110 * var(--u));
    }

    .donor-intro__cards {
        top: calc(482 * var(--u));
        left: calc(60 * var(--u));
        width: calc(1200 * var(--u));
    }

    .donor-intro__card {
        height: calc(360 * var(--u));
        border-radius: calc(34 * var(--u));
    }

    .donor-intro__card + .donor-intro__card {
        margin-top: calc(20 * var(--u));
    }

    .donor-intro__card-icon {
        top: calc(100 * var(--u));
        left: calc(50 * var(--u));
        width: calc(162 * var(--u));
        height: calc(162 * var(--u));
    }

    .donor-intro__card-icon::after {
        top: calc(22 * var(--u));
        left: calc(29 * var(--u));
        width: calc(110 * var(--u));
        height: calc(114 * var(--u));
    }

    .donor-intro__card--heart .donor-intro__card-icon::after {
        top: calc(37 * var(--u));
        left: calc(26 * var(--u));
        width: calc(104 * var(--u));
        height: calc(102 * var(--u));
    }

    .donor-intro__card-body {
        left: calc(258 * var(--u));
    }

    .donor-intro__card--gift .donor-intro__card-body {
        top: calc(60 * var(--u));
    }

    .donor-intro__card--heart .donor-intro__card-body {
        top: calc(101.5 * var(--u));
    }

    .donor-intro__card-title {
        margin-left: calc(-14 * var(--u));
        font-size: calc(46 * var(--u));
    }

    .donor-intro__card-title strong {
        top: calc(4 * var(--u));
        margin-right: calc(10 * var(--u));
        margin-left: calc(-16 * var(--u));
        font-size: calc(124 * var(--u));
    }

    .donor-intro__card-desc {
        font-size: calc(36 * var(--u));
        line-height: calc(50 * var(--u));
    }

    .donor-intro__card--heart .donor-intro__card-desc {
        line-height: calc(77 * var(--u)); /* 시안 두 줄 기준선 간격 82 */
    }

    .donor-intro__card--heart .donor-intro__card-desc strong {
        font-size: calc(54 * var(--u));
    }

    .donor-intro__note {
        top: calc(1276 * var(--u));
        font-size: calc(36 * var(--u));
        line-height: calc(70 * var(--u));
    }

    .donor-intro__note::before {
        width: calc(70 * var(--u));
        height: calc(70 * var(--u));
        margin-right: calc(20 * var(--u));
    }

    /* 버튼: 시안(600x142, 글자 38) 비율을 따르되 누르기 쉽게 높이 4.4rem·글자 1.4rem 이상 */
    .donor-intro__fund-wrap {
        padding-top: calc(90 * var(--u));
    }

    .donor-intro__fund {
        height: max(4.4rem, calc(142 * var(--u)));
        padding: 0 calc(57 * var(--u)) 0 calc(55 * var(--u));
        border-radius: 7.1rem;
        font-size: max(1.4rem, calc(38 * var(--u)));
    }

    .donor-intro__fund-icon {
        width: max(2.2rem, calc(65 * var(--u)));
        height: max(2rem, calc(60 * var(--u)));
        margin-right: calc(21 * var(--u));
    }
}

/* ===== 이름 검색(../js/donor-search.js가 연도 탭 또는 안내 상자 아래에 만든다) ===== */
.donor-search {
    position: relative;
    z-index: 5;
    width: min(48rem, 100%);
    margin: 3rem auto 0;
    font-family: "NanumSquareAc", sans-serif;
}

.donor-intro + .donor-search {
    margin-top: 0;
    margin-bottom: 4.4rem;
}

.donor-search__label,
.donor-search__status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.donor-search__field {
    position: relative;
}

.donor-search__icon {
    position: absolute;
    top: 50%;
    left: 1.9rem;
    display: flex;
    width: 2rem;
    height: 2rem;
    color: #112f75;
    transform: translateY(-50%);
    pointer-events: none;
}

.donor-search__icon svg {
    width: 100%;
    height: 100%;
}

.donor-search__input {
    display: block;
    width: 100%;
    height: 5.2rem;
    padding: 0 5.2rem;
    border: 2px solid #112f75;
    border-radius: 2.6rem;
    background-color: #fff;
    font-family: inherit;
    font-size: 1.6rem;
    color: #1d2340;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.donor-search__input::placeholder {
    color: #8b8fa3;
}

.donor-search__input::-webkit-search-cancel-button {
    display: none;
}

.donor-search__input:focus-visible {
    box-shadow: 0 0 0 0.4rem rgba(17, 47, 117, 0.15);
}

.donor-search__clear {
    position: absolute;
    top: 50%;
    right: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    color: #5b6178;
    transform: translateY(-50%);
}

.donor-search__clear[hidden] {
    display: none;
}

.donor-search__clear:hover,
.donor-search__clear:focus-visible {
    background-color: #eef2f8;
    color: #112f75;
}

.donor-search__clear svg {
    width: 1.4rem;
    height: 1.4rem;
}

.donor-search__panel {
    position: absolute;
    top: calc(100% + 0.8rem);
    right: 0;
    left: 0;
    padding: 0.8rem;
    border-radius: 1.6rem;
    background-color: #fff;
    box-shadow: 0 1.2rem 3.2rem rgba(17, 47, 117, 0.16), 0 0.2rem 0.6rem rgba(17, 47, 117, 0.08);
    text-align: left;
}

.donor-search__panel[hidden],
.donor-search__list[hidden],
.donor-search__empty[hidden] {
    display: none;
}

.donor-search__option {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1rem 1.2rem;
    border-radius: 1rem;
    font-size: 1.6rem;
    line-height: 2.2rem;
    color: #1d2340;
    cursor: pointer;
}

.donor-search__option.is-active {
    background-color: #eef2f8;
}

.donor-search__person {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: #e3e9f3;
    color: #112f75;
}

.donor-search__person svg {
    width: 1.6rem;
    height: 1.6rem;
}

.donor-search__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.donor-search__name mark {
    background: none;
    font-weight: 800;
    color: #112f75;
}

.donor-search__group {
    flex: 0 0 auto;
    font-size: 1.3rem;
    color: #8b8fa3;
}

.donor-search__empty {
    padding: 1.4rem 1.2rem;
    font-size: 1.5rem;
    color: #8b8fa3;
    text-align: center;
}

/* 검색으로 찾은 명판 잠깐 강조: 사이트 남색(#112f75, 검색창 테두리와 같은 색) 테두리·빛을 명판 면 모양에 맞춰 그린다.
 * 면 = 이미지 안 x 3.774~96.226%, y 12.07~87.93%, 모서리 반경 = 원본 24.5/1590 = 명판 폭의 1.54%(명판이 container라 cqw) */
@keyframes donor-search-hit {
    0%, 100% { transform: none; }
    15%, 60% { transform: scale(1.03); }
}

@keyframes donor-search-ring {
    0%, 100% { opacity: 0; }
    15%, 70% { opacity: 1; }
}

.is-search-hit {
    position: relative;
    z-index: 2;
    animation: donor-search-hit 2.4s ease-in-out;
}

.is-search-hit::after {
    content: "";
    position: absolute;
    top: 12.07%;
    right: 3.774%;
    bottom: 12.07%;
    left: 3.774%;
    border-radius: 0.6rem;
    border-radius: 1.54cqw;
    box-shadow: 0 0 0 3px #112f75, 0 0 1.6rem 0.3rem rgba(17, 47, 117, 0.45);
    opacity: 0;
    pointer-events: none;
    animation: donor-search-ring 2.4s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .is-search-hit {
        animation: none;
    }

    .is-search-hit::after {
        opacity: 1;
        animation: none;
    }
}

@media (max-width: 768px) {
    .donor-search {
        margin-top: 2.4rem;
    }

    .donor-intro + .donor-search {
        margin-bottom: 2.4rem;
    }

    .donor-search__input {
        height: 4.6rem;
        padding: 0 4.6rem;
    }

    .donor-search__icon {
        left: 1.6rem;
        width: 1.8rem;
        height: 1.8rem;
    }

    .donor-search__clear {
        right: 0.8rem;
    }

    .donor-search__option {
        padding: 0.9rem 1rem;
        font-size: 1.5rem;
    }
}

/* ===== 기부자 예우 명판 목록(게시판 스킨 benefits의 <section class="donor-list donor-list--plate">) =====
 * 카드(.donor-list-card: 이름·학번 숫자·소속/학번) 구성을 명판(v2) 위 이름 영역에 배치한다.
 *   1줄: 이름(왼쪽)·학번 숫자(오른쪽), 2줄: 학과/학번(오른쪽 정렬)
 * 처음 9개만 보이고 더보기로 9개씩 펼친다(../js/donor-list-more.js).
 * 이름 영역에 글자가 셋 들어가므로 명판 폭 약 340px 이상이 되게 열 수를 정한다: 1024px 이상 3열, 701~1023px 2열, 700px 이하 1열.
 */
.donor-list--plate .donor-list__grid,
.donor-list--plate .donor-list__hidden-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 0.3rem;
    margin: 0;
}

.donor-list--plate .donor-list__item {
    position: relative;
    aspect-ratio: 1590 / 497;
    background: url(../images/board/helper-plate-v2.png) no-repeat center / 100% 100%;
    container-type: inline-size;
}

.donor-list--plate .donor-list__item[hidden] {
    display: none;
}

.donor-list--plate .donor-list__more {
    margin-top: 2.6rem;
}

.donor-list__more[hidden] {
    display: none;
}

/* 패딩 %는 명판 폭 기준: 면 위·아래 여백 60/1590 = 3.774%, 이름 영역 왼쪽 51.85%, 오른쪽 9.32% */
.donor-list--plate .donor-list-card,
.donor-list--plate .donor-list-card:hover {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-content: center;
    align-items: baseline;
    gap: 0.9cqw 1.6cqw;
    width: auto;
    min-height: 0;
    padding: 3.774% 9.32% 3.774% 51.85%;
    border-radius: 0;
    background: none;
    font-family: "NanumSquareAc", sans-serif;
    line-height: 1.15;
    color: #181208;
    text-align: left;
    text-shadow: 0 1px 0 rgba(255, 240, 180, 0.6);
}

.donor-list--plate .donor-list-card:focus-visible {
    outline: 3px solid #112f75;
    outline-offset: -0.4rem;
}

.donor-list--plate .donor-list__item:hover {
    filter: brightness(1.05);
}

.donor-list--plate .donor-list-card__meta {
    display: contents;
}

.donor-list--plate .donor-list-card__name {
    grid-area: 1 / 1;
    overflow: hidden;
    font-weight: 800;
    font-size: 2rem;
    font-size: 5.8cqw;
    white-space: nowrap;
}

.donor-list--plate .donor-list-card__number {
    grid-area: 1 / 2;
    font-weight: 800;
    font-size: 2rem;
    font-size: 5.8cqw;
}

.donor-list--plate .donor-list-card__dept {
    grid-area: 2 / 1 / 3 / 3;
    justify-self: end;
    max-width: 100%;
    overflow: hidden;
    font-weight: 700;
    font-size: 1.1rem;
    font-size: 3.1cqw;
    white-space: nowrap;
}

@media (max-width: 1023px) {
    .donor-list--plate .donor-list__grid,
    .donor-list--plate .donor-list__hidden-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .donor-list--plate .donor-list__grid,
    .donor-list--plate .donor-list__hidden-list {
        grid-template-columns: minmax(0, 44rem);
        justify-content: center;
    }
}