/* ─────────── 협회 소개 (인사말 / 조직 및 운영 / 연혁 / 기부금후원안내 / 찾아오시는길) ─────────── */

/* 공통 : 섹션
 * - .assoc-section > .assoc-head(.assoc-tit + .assoc-desc) + 내용
 */
.assoc-section + .assoc-section {
    padding-top: var(--spacing-md);
}
.assoc-head {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2);
    font-family: var(--font-family-title);
    font-size: var(--font-size-display-sm);
    color: var(--color-font-neutral-strong);
    font-style: normal;
    font-weight: var(--font-weight-bold);
    line-height: 130%;
    letter-spacing: -0.0406rem;
    padding-bottom: var(--spacing-bottom-md);
}
.assoc-tit {
    font-family: var(--font-family-title);
    font-size: var(--font-size-heading-md);
    color: var(--color-font-neutral-strong);
    font-weight: var(--font-weight-bold);
    line-height: 140%;
    letter-spacing: -0.0375rem;
    word-break: keep-all;
}
.assoc-desc,
.assoc-txt {
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-lg);
    color: var(--color-font-neutral-strong);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: 140%;
    letter-spacing: -0.0297rem;
    word-break: keep-all;
}
.assoc-desc {
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-md);
    color: var(--color-font-neutral-default);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: 140%;
    letter-spacing: -0.0266rem;
}
.assoc-txt + .assoc-txt {
    margin-top: var(--gap-7);
}

/* 공통 : 넓은 이미지 (교육목표 / 조직도 / 배너) */
.assoc-img {
    display: block;
    width: 100%;
    height: auto;
}

/* ─────────── 인사말 ─────────── */
.greeting-section {
    display: flex;
    flex-direction: column;
    gap: var(--gap-9);
}
.greeting-banner {
    overflow: hidden;
}
.greeting-headline {
    font-family: var(--font-family-title);
    font-size: var(--font-size-heading-xlg);
    color: var(--color-font-theme-primary);
    font-style: normal;
    font-weight: var(--font-weight-bold);
    line-height: 140%;
    letter-spacing: -0.0625rem;
    word-break: keep-all;
}
.greeting-sign {
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: var(--gap-7);
}
.greeting-photo {
    width: 12.5rem;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}
.greeting-name {
    font-family: var(--font-family-title);
    font-size: var(--font-size-heading-md);
    color: var(--color-font-neutral-strong);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: 140%;
    letter-spacing: -0.0375rem;
}
.greeting-signature {
    width: 10.8125rem;
    aspect-ratio: 69/71;
}

/* ─────────── 조직 및 운영 ─────────── */
/* 넓은 이미지 : 작은 화면에서는 가로 스크롤 */
.assoc-scroll {
    overflow-x: auto;
}
.assoc-scroll .assoc-img {
    min-width: 45rem;
}

/* 임원진 : ul.member-grid > li.member-item > img.member-photo + p.member-name */
.member-grid {
    display: grid;
    row-gap: 1.5rem;
    column-gap: 1.5rem;
    align-self: stretch;
    grid-template-rows: repeat(2, fit-content(100%));
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-flow: row;
}

.member-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-3);
}
.member-photo {
    width: 100%;
    aspect-ratio: 217/289;
    object-fit: cover;
    border: var(--border-1) solid var(--color-border-neutral-subtler);
    background: var(--color-surface-neutral-gray);
}
.member-name {
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-md);
    color: var(--color-font-neutral-strong);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    text-align: center;
    line-height: 140%;
    letter-spacing: -0.0266rem;
}

/* 거점학교 · 협력기관 : ul.partner-grid > li.partner-item > .partner-logo(img) + p.partner-name
 * - .partner-grid.is-gray : 로고 흑백
 */
.partner-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap-7) var(--gap-5);
}
.partner-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-3);
}
.partner-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    height: 7.125rem;
    aspect-ratio: 3/1;
    padding: var(--padding-5) var(--padding-7);
    border: var(--border-1) solid var(--color-border-neutral-subtle);
    background: var(--color-surface-neutral-default-static);
}
.partner-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.partner-name {
    color: var(--color-font-neutral-strong);
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-md);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: 140%;
    letter-spacing: -0.0266rem;
    text-align: center;
    word-break: keep-all;
}

/* ─────────── 연혁 ─────────── */
/* 기간 탭 (앵커) : nav.history-tabs > a.history-tab(.is-active) */
.history-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: var(--spacing-bottom-lg);
    border-radius: var(--radius-4);
    background: var(--color-surface-neutral-default);
    border: var(--border-1) solid var(--color-border-neutral-subtle);
}

.history-period {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-9);
    padding-top: var(--gap-7);
}
.history-period + .history-period {
    padding-top: var(--spacing-md);
}
.history-period-tit {
    font-family: var(--font-family-title, Pretendard);
    font-size: var(--font-size-heading-xlg, 40px);
    color: var(--color-font-theme-primary, #f55e2e);
    font-style: normal;
    font-weight: var(--font-weight-bold, 800);
    line-height: 140%;
    letter-spacing: -0.0625rem;
}

/* .history-cols > .history-col > .history-item > .history-year + ul.history-list */
.history-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-10);
    width: 100%;
}
.history-col {
    --history-item-gap: var(--number-10);
    display: flex;
    flex-direction: column;
    gap: var(--history-item-gap);
}
.history-item {
    /* 타임라인 축(원 중심)의 x 위치 / 원 중심의 y 위치 */
    --history-axis: calc(5.5rem + var(--gap-6));
    --history-dot-y: 1.125rem;
    position: relative;
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
}
/* 연도 포인트 (원) */
.history-item::before {
    content: '';
    position: absolute;
    top: calc(var(--history-dot-y) - 0.375rem);
    left: calc(var(--history-axis) - 0.375rem);
    width: 0.75rem;
    height: 0.75rem;
    border: var(--border-2) solid var(--color-border-theme-primary);
    border-radius: var(--radius-max);
    background: var(--color-surface-neutral-default);
    z-index: 1;
}
/* 연도 세로선 : 원 중심 → 다음 연도 원 중심까지 (원이 배경색으로 덮음), 마지막 항목은 선 없음 */
.history-item::after {
    content: '';
    position: absolute;
    top: var(--history-dot-y);
    bottom: calc((var(--history-item-gap) + var(--history-dot-y)) * -1);
    left: calc(var(--history-axis) - 0.03125rem);
    border-left: 1px dashed var(--color-border-neutral-default);
}
.history-item:last-child::after {
    display: none;
}
.history-year {
    font-family: var(--font-family-title);
    color: var(--color-font-neutral-strong);
    font-size: var(--font-size-heading-lg);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: 140%;
    letter-spacing: -0.05rem;
}
.history-list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3);
    padding: var(--padding-3) 0 var(--padding-3) calc(var(--gap-6) + var(--gap-6) + 0.75rem);
}
.history-list > li {
    position: relative;
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-lg);
    color: var(--color-font-neutral-strong);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: 140%;
    letter-spacing: -0.0297rem;
    word-break: keep-all;
    padding-left: var(--padding-8);
}
.history-list > li::before {
    content: '';
    position: absolute;
    top: 0.625rem;
    left: var(--number-5);
    width: 0.25rem;
    height: 0.25rem;
    border-radius: var(--radius-max);
    background: var(--color-font-neutral-strong);
}
/* 하위 설명 (- 내용) */
.history-list .history-sub {
    display: block;
    color: var(--color-font-neutral-strong);
}

/* ─────────── 기부금후원안내 ─────────── */
.donation-account {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-3);
    text-align: center;
    padding: var(--card-padding-lg) var(--padding-9);
    margin-top: var(--gap-7);
    background: var(--color-surface-theme-primary);
}
.donation-account-num {
    font-family: var(--font-family-title);
    font-size: var(--font-size-heading-xlg);
    color: var(--color-font-theme-primary);
    font-style: normal;
    font-weight: var(--font-weight-bold);
    line-height: 140%;
    letter-spacing: -0.0625rem;
    word-break: keep-all;
}
.donation-account-owner {
    font-family: var(--font-family-title);
    font-size: var(--font-size-heading-lg);
    color: var(--color-font-neutral-default);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: 140%;
    letter-spacing: -0.05rem;
}

/* 기금 용도 · 참여 대상 : .fund-cards > .fund-card > .fund-card-ico + .fund-card-cont */
.fund-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--grid-gutter-md);
    margin-top: var(--gap-7);
}
.fund-card {
    flex: 1 0 0;
    display: flex;
    align-items: center;
    gap: var(--gap-7);
    padding: var(--form-padding-xlg);
    background: var(--color-surface-neutral-gray);
}
.fund-card-ico {
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: var(--radius-max);
    background: var(--color-surface-neutral-default);
    font-size: 3rem;
    color: var(--color-icon-theme-primary);
}
.fund-card-cont {
    display: flex;
    flex-direction: column;
    gap: var(--number-8);
    min-width: 0;
}
.fund-card-tit {
    font-family: var(--font-family-title);
    font-size: var(--font-size-heading-md);
    color: #000;
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: 140%;
    letter-spacing: -0.0375rem;
}

/* 기부 절차 : ol.donation-step > li.donation-step-item > .donation-step-circle + .donation-step-box */
.donation-step {
    --step-circle: 13rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap-7);
}
.donation-step-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    counter-increment: donation-step;
}
/* 원 사이 점선 */
.donation-step-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: calc(var(--step-circle) / 2);
    left: calc(50% + var(--step-circle) / 2);
    right: calc(-50% + var(--step-circle) / 2 - var(--gap-7));
    border-top: var(--border-1) dashed var(--color-border-theme-primary);
}
.donation-step-circle {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--gap-4);
    width: var(--step-circle);
    max-width: 100%;
    aspect-ratio: 1 / 1;
    border: var(--border-3) solid var(--secondary-10);
    border-radius: var(--radius-max);
    background: var(--color-surface-neutral-default);
}
.donation-step-num {
    position: absolute;
    top: 0.5rem;
    left: 0.75rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-max);
    background: var(--color-surface-theme-primary-inverse);
    font-family: var(--font-family-title);
    font-size: var(--font-size-label-sm);
    color: var(--color-font-neutral-static-inverse);
    font-weight: var(--font-weight-bold);
    line-height: 100%;
}
.donation-step-ico {
    font-size: 3rem;
    color: var(--secondary-30);
}
.donation-step-tit {
    font-family: var(--font-family-title);
    font-size: var(--font-size-heading-xsm);
    color: var(--color-font-neutral-strong);
    font-weight: var(--font-weight-medium);
    line-height: 140%;
    text-align: center;
    word-break: keep-all;
}
/* 원 → 박스 연결선 */
.donation-step-box {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-4);
    width: 100%;
    margin-top: var(--gap-10);
    padding: var(--card-padding-md) var(--card-padding-sm);
    border-radius: var(--radius-3);
    background: var(--color-surface-theme-secondary);
    text-align: center;
}
.donation-step-box::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    height: var(--gap-10);
    border-left: var(--border-1) dashed var(--color-border-theme-primary);
}
.donation-step-box::after {
    content: '';
    position: absolute;
    top: -0.25rem;
    left: calc(50% - 0.25rem);
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-max);
    background: var(--color-surface-theme-primary-inverse);
}
.donation-step-box-tit {
    font-family: var(--font-family-title);
    font-size: var(--font-size-heading-xsm);
    color: var(--color-font-neutral-strong);
    font-weight: var(--font-weight-bold);
    line-height: 140%;
    word-break: keep-all;
}
.donation-step-box-txt {
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-sm);
    color: var(--color-font-neutral-default);
    font-weight: var(--font-weight-regular);
    line-height: 160%;
    word-break: break-all;
}
.donation-step-box-txt b {
    font-weight: var(--font-weight-bold);
    color: var(--color-font-neutral-strong);
}

/* 운영위원회 : .committee-cards > .committee-card > .committee-tit + ol.committee-list */
.committee-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--grid-gutter-md);
}
.committee-card {
    display: flex;
    flex-direction: column;
    gap: var(--gap-7);
    padding: var(--form-padding-xlg);
    background: var(--color-surface-theme-secondary);
}
.committee-tit {
    font-family: var(--font-family-title);
    font-size: var(--font-size-heading-md);
    color: #000;
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: 140%;
    letter-spacing: -0.0375rem;
}
.committee-list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3);
    counter-reset: committee;
}
.committee-list > li {
    position: relative;
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-lg);
    color: var(--color-font-neutral-strong);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: 140%;
    letter-spacing: -0.0297rem;
    word-break: keep-all;
    counter-increment: committee;
    padding-left: var(--padding-9);
}
.committee-list > li::before {
    content: counter(committee, decimal-leading-zero);
    position: absolute;
    left: 0;
    font-family: var(--font-family-body);
    font-size: var(--font-size-label-lg);
    color: var(--color-font-theme-secondary);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: 140%;
    letter-spacing: -0.0297rem;
}

/* 기금별 후원 목록 : .fund-board > .fund-board-head(.assoc-head + .btn) + .fund-board-sub + ul.fund-board-list */
.fund-board-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--gap-5);
    padding-bottom: var(--spacing-bottom-md);
}
.fund-board-head .assoc-head {
    padding-bottom: 0;
}
.fund-board-head .btn-base {
    flex-shrink: 0;
}
.fund-board-head + .form-message {
    padding-bottom: var(--gap-7);
}
.fund-board-sub {
    font-family: var(--font-family-title);
    font-size: var(--font-size-heading-md);
    color: var(--color-font-neutral-strong);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: 140%;
    letter-spacing: -0.0375rem;
    padding-bottom: var(--spacing-bottom-md);
}

.fund-board-list {
    border-top: var(--border-1) solid var(--color-border-neutral-default);
}
.fund-board-list > li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-5);
    padding: var(--padding-6) var(--padding-5);
    border-bottom: var(--border-1) solid var(--color-border-neutral-subtler);
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-md);
    color: var(--color-font-neutral-default);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: 140%;
    letter-spacing: -0.0266rem;
}
.fund-board-date {
    flex-shrink: 0;
}

/* ─────────── 찾아오시는길 ─────────── */
/* 지도 영역 : 실제 개발 시 API 로 .location-map 안에 렌더링 */
.location-map {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-3);
    background: var(--color-surface-neutral-gray-strong);
    color: var(--color-font-neutral-subtle);
}
.location-map-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-3);
    font-size: var(--font-size-body-sm);
}
.location-map-empty .ico {
    font-size: var(--icon-7);
}

.location-info {
    display: flex;
    flex-direction: column;
    gap: var(--gap-7);
    padding-top: var(--spacing-md);
}
.location-name {
    display: flex;
    align-items: center;
    gap: var(--gap-5);
    color: var(--color-font-neutral-strong);
    font-family: var(--font-family-title);
    font-size: var(--font-size-display-sm);
    font-style: normal;
    font-weight: var(--font-weight-bold);
    line-height: 130%;
    letter-spacing: -0.0406rem;
    padding-bottom: var(--spacing-bottom-md);
}
.location-list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-7);
}
.location-list dt {
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    font-family: var(--font-family-body);
    font-size: var(--font-size-label-xlg);
    color: var(--color-font-theme-primary);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: 100%;
    letter-spacing: -0.0313rem;
}
.location-list dt .ico {
    font-size: var(--icon-5);
}
.location-list dd {
    font-family: var(--font-family-title);
    color: var(--color-font-neutral-strong);
    font-size: var(--font-size-heading-md);
    font-style: normal;
    font-weight: var(--font-weight-bold);
    line-height: 140%;
    letter-spacing: -0.0375rem;
    word-break: keep-all;
    margin-top: var(--gap-3);
}
.location-list dd a {
    color: var(--color-font-neutral-strong);
}
.location-list .location-en {
    display: block;
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-md);
    color: var(--color-font-neutral-default);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: 140%;
    letter-spacing: -0.0266rem;
    margin-top: var(--gap-2);
}

/* ─────────── 태블릿 ─────────── */
@media (max-width: 1023px) {
    .member-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .partner-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .history-cols {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--gap-9);
    }
    .donation-step {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: var(--gap-10);
    }
    .donation-step-item:not(:last-child)::after {
        display: none;
    }
}

/* ─────────── 모바일 ─────────── */
@media (max-width: 767px) {
    .greeting-headline {
        font-size: var(--font-size-heading-md);
    }
    .greeting-photo {
        width: 9rem;
    }
    .member-grid,
    .partner-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .history-tabs {
        display: flex;
        gap: var(--gap-3);
        margin-right: calc(var(--main-gutter) * -1);
        padding-right: var(--main-gutter);
        overflow-x: auto;
        border: 0;
        border-radius: 0;
        scrollbar-width: none;
    }
    .history-tabs::-webkit-scrollbar {
        display: none;
    }
    .history-tabs .segmented-control-btn {
        flex-shrink: 0;
        height: var(--form-height-sm);
        padding: 0 var(--form-padding-lg);
        border: 0;
        border-radius: var(--form-radius-md);
        font-size: var(--font-size-label-md);
        white-space: nowrap;
    }
    .history-period-tit {
        font-size: var(--font-size-heading-lg);
    }
    .history-item {
        --history-axis: calc(3.5rem + var(--gap-5));
        --history-dot-y: calc(var(--font-size-heading-sm) * 0.7);
        grid-template-columns: 3.5rem minmax(0, 1fr);
    }
    .history-year {
        font-size: var(--font-size-heading-sm);
        font-weight: var(--font-weight-bold);
    }
    .history-list {
        padding: 0 0 0 calc(var(--gap-5) * 2 + 0.75rem);
    }
    .history-list > li {
        font-size: var(--font-size-body-md);
        padding-left: var(--padding-6);
    }
    .history-list > li::before {
        top: 0.5rem;
    }
    .fund-cards,
    .committee-cards,
    .donation-step {
        grid-template-columns: minmax(0, 1fr);
    }
    .donation-step {
        --step-circle: 11rem;
    }
    .donation-step-box {
        margin-top: var(--gap-8);
    }
    .donation-step-box::before {
        height: var(--gap-8);
    }
    .fund-card {
        padding: var(--card-padding-sm);
    }
    .fund-card-ico {
        width: 3.5rem;
        height: 3.5rem;
        font-size: var(--icon-5);
    }
    .fund-board-head {
        flex-direction: column;
    }
    .fund-board-list > li {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gap-2);
    }
}