/* 공동협력프로젝트 서브페이지의 정보 구조와 반응형 스타일 */

.page-support-project {
    color: var(--sub-black);
    background: var(--sub-white);
    word-break: keep-all;
}

.page-support-project h1,
.page-support-project h2,
.page-support-project h3,
.page-support-project p,
.page-support-project ol,
.page-support-project dl,
.page-support-project dd {
    margin: 0;
}

/* 위 리셋(.page-support-project p)이 클래스+엘리먼트 조합이라 sub-hero__subtitle
   (클래스 1개)의 margin-top보다 우선순위가 높아 무시되고 있었다. */
.page-support-project .sub-hero__subtitle {
    margin-top: 8px;
}

.page-support-project ol {
    padding: 0;
    list-style: none;
}

.page-support-project h1,
.page-support-project h2,
.page-support-project h3 {
    overflow-wrap: break-word;
}

.page-support-project p,
.page-support-project dd {
    word-break: keep-all;
    overflow-wrap: normal;
}

/* 다른 세 섹션과 같은 상하 90px 리듬을 따르게 해, 섹션 사이 간격이
   intro→purpose만 138px로 어긋나던 것을 180px로 맞춘다. */
/* intro(제목)와 purpose(본문)는 forum의 forum-intro__heading+body처럼
   한 묶음으로 읽혀야 한다. forum의 실제 간격(40px)에 맞춘다 — purpose는
   아래(flow와의 90px 리듬)만 공유 규칙을 쓰고, 위쪽은 따로 좁힌다. */
/* about/forum과 같은 패턴 — 히어로 자체 하단 여백은 0으로 두고,
   이어지는 콘텐츠 쪽 여백으로 간격을 관리한다. */
.page-support-project .sub-hero.sub-pad--hero {
    padding-bottom: 0;
}

/* intro(스테이트먼트)+purpose(설명 본문)를 한 섹션으로 합쳐서, 아래쪽
   여백은 이전에 purpose가 담당하던 90px을 그대로 가져온다.
   padding shorthand(0 0 90px)를 쓰면 좌우가 0으로 같이 리셋되어
   .page-container의 padding-inline(좌우 여백)까지 지워버린다 —
   padding-bottom만 따로 지정해서 좌우는 건드리지 않는다. */
.support-project-intro {
    position: relative;
    padding-bottom: 90px;
}

/* forum INTRO의 제목(h2)과 같은 톤 — 큰 스테이트먼트 문장 + 큰따옴표 강조.
   about의 형광펜(lime/mint) 방식 대신 이걸로 바꾼다. */
.support-project-intro__lead {
    position: relative;
    z-index: 1;
    font-size: clamp(22px, 2.8vw, 36px);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.03em;
    color: var(--sub-black);
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* forum의 forum-intro__mark와 동일한 배경 장식 패턴 — 크게 키워 옅게 깔고
   아주 미세하게 떠다니듯 움직인다. */
/* intro와 purpose를 한 섹션으로 합쳐 forum-intro와 비슷한 실제 콘텐츠
   높이가 생겼으니, forum과 동일하게 중앙 정렬 + 큰 사이즈로 되돌린다. */
.support-project-intro__mark {
    display: block;
    position: absolute;
    top: 50%;
    right: clamp(-40px, 3vw, 20px);
    width: clamp(260px, 28vw, 460px);
    height: auto;
    transform: translateY(-50%);
    opacity: 0.07;
    z-index: 0;
    pointer-events: none;
    animation: support-intro-mark-drift 14s ease-in-out infinite;
}

.support-project-intro__mark-arc--red {
    stroke: var(--sub-red);
}

.support-project-intro__mark-arc--blue {
    stroke: var(--sub-blue);
}

.support-project-intro__mark-arc--gold {
    stroke: #c9a227;
}

@keyframes support-intro-mark-drift {
    0%, 100% {
        transform: translateY(-50%) rotate(0deg);
    }
    50% {
        transform: translateY(calc(-50% - 14px)) rotate(3deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .support-project-intro__mark {
        animation: none;
    }
}

/* forum의 `.forum-intro__quote`와 동일 — 배경 없는 큰따옴표 + 브랜드 블루. */
.support-project-intro__quote {
    color: var(--sub-blue);
}

.support-project-intro__quote::before,
.support-project-intro__quote::after {
    color: var(--sub-blue);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
}

.support-project-intro__quote::before {
    content: "\201C";
    margin-right: 0.03em;
}

.support-project-intro__quote::after {
    content: "\201D";
    margin-left: 0.03em;
}

.support-project-flow__step {
    color: var(--sub-red);
    font-size: 14px;
    font-weight: 800;
}

.support-project-flow,
.support-project-types {
    padding: 90px 0;
}

/* intro와 합쳐지면서 이 여백이 곧 병합 섹션의 아래쪽 여백이 된다. */
.support-project-purpose__inner {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 40px;
}

.support-project-heading {
    display: grid;
    gap: 18px;
}

.support-project-heading h2 {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

/* 이 페이지의 sub-hero__rule은 위/아래 고정 40px로 통일한다
   (히어로 자체 rule, title-group 안 rule 모두 포함). */
.page-support-project .sub-hero__rule {
    margin: 40px 0;
}

/* 인라인 style="text-align:right"을 대체. */
.support-project-heading__note {
    text-align: right;
}

/* 일단 숨김 처리. 마크업은 그대로 두어 다시 켤 때 이 규칙만 지우면 된다. */
.support-project-heading--types .support-project-heading__note,
.support-project-heading--flow .support-project-heading__note {
    display: none;
}

/* intro 리드 문단과 같은 본문 크기(17px)로 통일. */
.support-project-heading > p,
.support-project-purpose__body,
.support-project-flow__description,
.support-project-types__description {
    color: var(--sub-gray);
    font-size: 17px;
    line-height: 1.8;
}

/* forum의 `.forum-intro__lead`와 동일한 톤. */
.support-project-purpose__lead {
    font-family: var(--font-sans, "Pretendard", sans-serif);
    font-size: var(--sub-lead-size);
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: -0.015em;
    color: var(--sub-black);
    word-break: keep-all;
    text-wrap: pretty;
}

/* text-highlight는 원래 어두운 배경 기준으로 흰 글자 + 원색 형광펜을 쓴다.
   흰 배경인 이 페이지에서는 글자를 검정으로 바꾸고, 원색은 forum/about과
   같은 이유로 알파 0.7로 낮춰 형광펜 느낌으로만 쓴다. */
.page-support-project .text-highlight {
    color: var(--sub-black);
}

.page-support-project .text-highlight--lime {
    --text-highlight-color: rgba(223, 255, 0, 0.7);
}

.page-support-project .text-highlight--mint {
    --text-highlight-color: rgba(110, 231, 196, 0.7);
}

.page-support-project .text-highlight--yellow {
    --text-highlight-color: rgba(242, 212, 0, 0.7);
}

.page-support-project .text-highlight--blue {
    --text-highlight-color: rgba(47, 107, 255, 0.7);
}

.support-project-flow {
    background: var(--sub-white);
}

.support-project-heading--flow,
.support-project-heading--types {
    grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1.45fr);
    gap: 60px;
    align-items: end;
}

.support-project-flow__list {
    display: grid;
    gap: 22px;
}

.support-project-flow__item {
    --flow-offset: 0%;

    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 32px;
    width: calc(100% - var(--flow-offset));
    margin-left: var(--flow-offset);
    padding: 28px 0 30px;
    border-top: 1px solid var(--sub-line);
    border-bottom: 1px solid var(--sub-line);
}

.support-project-flow__item:nth-child(2) {
    --flow-offset: 8%;
}

.support-project-flow__item:nth-child(3) {
    --flow-offset: 16%;
}

.support-project-flow__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 54px;
    color: var(--sub-white);
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    background: var(--sub-blue);
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
}

.support-project-flow__item:nth-child(1) .support-project-flow__number {
    background: var(--sub-red);
}

.support-project-flow__item:nth-child(3) .support-project-flow__number {
    color: var(--sub-black);
    background: var(--sub-yellow);
}

.support-project-flow__item:nth-child(2) .support-project-flow__step {
    color: var(--sub-blue);
}

.support-project-flow__item:nth-child(3) .support-project-flow__step {
    color: #9b7600;
}

.support-project-flow__content {
    display: block;
}

.support-project-flow__content h3 {
    margin-top: 8px;
    font-size: 28px;
    line-height: 1.3;
    letter-spacing: -0.04em;
}

.support-project-flow__title-en {
    margin-top: 4px;
    color: var(--sub-blue);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
}

.support-project-flow__description {
    margin-top: 20px !important;
    font-size: 18px;
}

/* about의 about-program-grid(3열 카드)와 동일한 구조. */
.support-project-types__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.support-project-types__item {
    --item-accent: var(--sub-red);
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 24px;
    padding: 28px;
    background: var(--sub-white);
    border: 1px solid rgba(17, 17, 17, 0.11);
    border-top: 3px solid var(--item-accent);
    border-radius: 4px;
}

.support-project-types__list > .support-project-types__item:nth-child(2) {
    --item-accent: var(--sub-blue);
}

/* about-program-grid의 3번째 카드와 같은 값 — 밝은 --sub-yellow(#ffdd00) 대신
   muted gold(#c9a227)를 쓴다. */
.support-project-types__list > .support-project-types__item:nth-child(3) {
    --item-accent: #c9a227;
}

/* about의 about-program-item__no와 동일 — 제목과 한 줄로 읽히는 컬러 번호. */
.support-project-types__no {
    display: inline;
    margin-right: 0.3em;
    font-size: var(--sub-mini-title-size);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.02em;
    vertical-align: baseline;
    color: var(--item-accent);
}

/* 3번째 카드는 border-top(muted gold, about과 동일)은 그대로 두고
   숫자만 밝은 --sub-yellow로 분리한다. */
.support-project-types__list > .support-project-types__item:nth-child(3) .support-project-types__no {
    color: var(--sub-yellow);
}

.support-project-types__heading h3 {
    display: inline;
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.03em;
    word-break: keep-all;
    text-wrap: pretty;
    text-wrap: balance;
}

/* 메인 제목 — 색은 번호에만 남기고 제목 자체는 검정으로 둔다(about과 동일). */
.support-project-types__lead {
    display: inline;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.3;
    color: var(--sub-black);
}

.support-project-types__sub {
    display: block;
    margin-top: 12px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.55;
    color: var(--sub-gray, #4b5563);
    word-break: keep-all;
    text-wrap: pretty;
    text-wrap: balance;
}

/* 설명 문단 — about-program-item p와 동일(상단 구분선 + 카드 고유색). */
.support-project-types__description {
    margin: 0;
    padding-top: 22px;
    border-top: 1px solid var(--sub-line);
}

/* 태블릿 (~1320px) */
@media (max-width: 1320px) {
    /* 다른 타이틀류와 같은 단계(42 -> 36 -> 28) — 추진 단계/지원 유형 헤더 공용. */
    .support-project-heading h2 {
        font-size: 36px;
    }

    .support-project-intro {
        padding-bottom: 72px;
    }

    .support-project-flow,
    .support-project-types {
        padding: 72px 0;
    }

    .support-project-heading--flow,
    .support-project-heading--types {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .support-project-flow__item:nth-child(2) {
        --flow-offset: 4%;
    }

    .support-project-flow__item:nth-child(3) {
        --flow-offset: 8%;
    }

    .support-project-intro {
        padding-bottom: 56px;
    }

    .support-project-heading > p,
    .support-project-purpose__body,
    .support-project-flow__description,
    .support-project-types__description {
        font-size: 16px;
    }

    .support-project-flow,
    .support-project-types {
        padding: 56px 0;
    }

    .support-project-flow__item {
        --flow-offset: 0%;

        grid-template-columns: 1fr;
        gap: 16px;
        width: 100%;
        margin-left: 0;
        padding: 26px 0;
    }

    .support-project-flow__item:nth-child(2),
    .support-project-flow__item:nth-child(3) {
        --flow-offset: 0%;
    }

    .support-project-types__list {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* 모바일 (~500px) */
@media (max-width: 500px) {
    .support-project-heading h2 {
        font-size: 28px;
    }

    .support-project-intro__mark {
        width: clamp(160px, 46vw, 240px);
        opacity: 0.05;
    }
}