@charset "utf-8";
/* =====================================================================
   1365 색 · 나눔스퀘어 네오 · 사진 서브 상단 · 새 형식 페이지 부품

   글꼴: 사이트 전체 본문(첫 화면 · 게시판 · 회원 화면 · 검색 포함)에 나눔스퀘어 네오 (사용자 확정 2026-09-13).
         머리글 · 전체 메뉴 · 꼬리말 · 하위 메뉴 줄은 원래 글꼴(Pretendard) 그대로 (사용자 요청).
   색:   1365 로고 색은 새 형식 페이지 부품(비전 동그라미 · 조 제목 네모 등)에만 쓴다.
         첫 화면 강조 · 게시판 공지 표시의 자원봉사 색(#dc0058)은 따로 정한 것이라 그대로.
   body.tone-1365: 테마 페이지(page.php)에 붙어 페이지 틀(본문 위 여백 · 폼 상자 없앰 등)에만 쓴다.
   ===================================================================== */

/* 나눔스퀘어 네오 (네이버, SIL 오픈 폰트 라이선스)
   네이버 CSS 는 굵기마다 이름이 달라 한 이름으로 묶어 다시 선언한다.
   글꼴 파일은 이 글꼴을 실제로 쓰는 페이지에서만 내려받는다. */
@font-face {
    font-family: "NanumSquareNeo Web";
    font-weight: 400;
    font-display: swap;
    src: url("https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.woff") format("woff");
}
@font-face {
    font-family: "NanumSquareNeo Web";
    font-weight: 700;
    font-display: swap;
    src: url("https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.woff") format("woff");
}
@font-face {
    font-family: "NanumSquareNeo Web";
    font-weight: 800;
    font-display: swap;
    src: url("https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.woff") format("woff");
}

/* ---------- 색 묶음: 요소에 tone-green / tone-orange / tone-teal 을 붙이면 --tone* 이 바뀐다 ---------- */
.tone-green  { --tone: var(--c-green);  --tone-strong: var(--c-green-strong);  --tone-soft: var(--c-green-soft);  --tone-line: var(--c-green-line);  --tone-fill: var(--c-green-fill); }
.tone-orange { --tone: var(--c-orange); --tone-strong: var(--c-orange-strong); --tone-soft: var(--c-orange-soft); --tone-line: var(--c-orange-line); --tone-fill: var(--c-orange-fill); }
.tone-teal   { --tone: var(--c-teal);   --tone-strong: var(--c-teal-strong);   --tone-soft: var(--c-teal-soft);   --tone-line: var(--c-teal-line);   --tone-fill: var(--c-teal-fill); }

.icon { display: inline-block; flex: 0 0 auto; vertical-align: middle; }

/* ---------- 글꼴: 머리글과 꼬리말 사이 본문 전체 (첫 화면 · 사진 서브 상단 · 게시판 · 회원 화면) ----------
   입력 칸 · 버튼은 base.css 에서 글꼴을 물려받는다. 하위 메뉴 줄만 메뉴 글꼴로 되돌린다. */
.site-main {
    font-family: var(--font-content);
}
.site-main .local-nav {
    font-family: var(--font-sans);
}

/* ---------- 서브 상단: 옛 사이트 그림(1200×242) 가운데 + 양옆은 그림 끝 색, 글은 가운데 ----------
   그림 주소와 양옆 색은 head.php 가 style 로 넣는다 (sahav_sub_visual). 사진을 새로 넣으면 그 함수만 바꾼다.
   그림 속 사람들이 양옆에 있어 글은 가운데에 둔다 (옛 사이트와 같은 자리). */
.sub-hero--page {
    background-color: var(--c-bg-soft);
    background-position: center, 0 0;
    background-size: auto 100%, 100% 100%;
    background-repeat: no-repeat;
}

.sub-hero--page .sub-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: clamp(170px, 20.2vw, 242px);   /* 1200px 보다 좁으면 그림이 화면 폭에 맞게 준다 */
    padding-top: var(--sp-5);
    padding-bottom: var(--sp-5);
    text-align: center;
}

.sub-hero--page .sub-hero__title { font-size: clamp(2rem, 4vw, 2.75rem); letter-spacing: -0.02em; }
.sub-hero--page .breadcrumb ol { justify-content: center; }

/* 그림 위 글씨가 묻히지 않게 흰 번짐 */
.sub-hero--page .sub-hero__title,
.sub-hero--page .sub-hero__lead,
.sub-hero--page .breadcrumb {
    text-shadow: 0 0 2px rgba(255, 255, 255, .9), 0 0 12px rgba(255, 255, 255, .9);
}

.sub-hero__lead {
    margin-top: var(--sp-2);
    color: var(--c-text-sub);
    font-size: clamp(1rem, 1.6vw, 1.125rem);
}

/* ---------- 본문 틀: 제목은 서브 상단에 있으므로 바로 시작 ---------- */
.tone-1365 .site-content { padding-top: 0; }

/* ---------- 주제 칸: 왼쪽 제목(따라 내려옴) | 오른쪽 흰 카드 ----------
   내용 칸은 남은 폭을 모두 쓴다 (사용자 요청: 좁게 묶지 않음). */
.topic {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    column-gap: var(--sp-7);
    padding: clamp(40px, 5vw, 64px) 0;
}

/* 긴 본문을 읽는 동안 제목이 보이게 따라 내려온다.
   머리글뿐 아니라 하위 메뉴 줄(.local-nav)도 따라 내려오므로 그 높이만큼 더 내려야 가려지지 않는다. */
.topic__title {
    position: sticky;
    top: calc(var(--header-h) + var(--local-nav-h, 0px) + 24px);
    display: flex;
    align-items: center;
    align-self: start;
    gap: 10px;
    margin: 0;
    padding-left: 18px;
    color: var(--c-text);
    font-size: clamp(1.375rem, 2vw, 1.625rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.3;
}
.topic__title::before {
    content: "";
    position: absolute;
    top: .15em;
    bottom: .15em;
    left: 0;
    width: 4px;
    border-radius: 0;
    background: var(--tone);
}

.topic__icon { width: 32px; height: 32px; color: var(--tone); stroke-width: 1.75; }

/* 내용 칸 — 바깥 상자 없이 글만 둔다 (사용자 요청). 칸 색은 왼쪽 제목의 막대·아이콘에만 쓴다. */
.topic__body {
    min-width: 0;
}

.topic__text {
    color: var(--c-text-sub);
    font-size: var(--fs-base);
    line-height: 1.85;
    letter-spacing: -0.01em;
}

/* 칸 첫 줄 강조 문구 (비전 등) — 아래 본문과 같은 자리에서 조금 크고 굵게 */
.topic__lead {
    color: var(--c-text);
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.45;
}
.topic__lead em { color: var(--c-green); font-style: normal; }
.topic__lead + .topic__text { margin-top: var(--sp-3); }

/* 칸과 칸 사이 가는 선 */
.topic + .topic { border-top: 1px solid var(--c-line); }

/* 제목 위 · 내용 아래로 쌓는 칸 — 제목이 내용 위에 있으므로 따라 내려오지 않는다 (내용을 덮음) */
.topic--stack {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(28px, 4vw, 44px);
    border-top: 1px solid var(--c-line);
}
.topic--stack .topic__title { position: relative; top: auto; }

/* 왼쪽에 표어를 두는 칸 (인사말 — 옛 사이트 인사말과 같은 배치)
   왼쪽: 표어를 가운데 정렬하고 아래에 가는 세로선 / 오른쪽: 본문 카드 */
.topic--quote { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); }   /* 1400px 폭에서 옛 사이트와 비슷한 1/3 비율 */

.topic__quote {
    position: sticky;
    top: calc(var(--header-h) + var(--local-nav-h, 0px) + 24px);
    align-self: start;
    margin: 0;
    color: var(--c-text);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.45;
    text-align: center;
    word-break: keep-all;
}
.topic__quote em { color: var(--c-green-strong); font-style: normal; }
.topic__quote::after {
    content: "";
    display: block;
    width: 1px;
    height: 120px;
    margin: var(--sp-7) auto 0;
    background: var(--c-line-strong);
}

/* 1024px 이하: 표어는 본문 위에 왼쪽 정렬, 세로선은 뺀다 */
@media (max-width: 1024px) {
    .topic__quote {
        position: relative;
        top: auto;
        font-size: clamp(1.25rem, 5vw, 1.75rem);
        text-align: left;
    }
    .topic__quote::after { display: none; }
}

/* 1024px 이하: 1단 — 제목은 본문 위 가로 라벨 (따라 내려오지 않음) */
@media (max-width: 1024px) {
    .topic { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-4); }
    .topic__title { position: relative; top: auto; }
}

/* ---------- 인사말 편지: 첫인사 → 본문 → 서명 (표어는 왼쪽 .topic__quote) ---------- */

/* 첫인사 — 본문보다 한 단계 크고 굵게, 아래 여백 + 연한 구분선 */
.letter .letter__lead {
    margin-bottom: var(--sp-6);
    padding-bottom: var(--sp-6);
    border-bottom: 1px solid var(--c-line);
    color: var(--c-text);
    font-size: var(--fs-md);
    font-weight: 600;
    line-height: 1.7;
}

/* 본문 문단 (#474747 / 흰 바탕 대비 약 9:1) */
.letter p {
    color: var(--c-text-sub);
    font-size: var(--fs-base);
    line-height: 1.85;
    letter-spacing: -0.01em;
}
.letter p + p { margin-top: var(--sp-5); }

/* 문단 안 강조 — 1365 형광펜 */
.letter p em,
.letter p strong,
.topic__text em,
.topic__text strong {
    background: linear-gradient(transparent 60%, var(--c-1365-mark) 60%);
    font-style: normal;
}

.letter .letter__closing { color: var(--c-text); font-weight: 700; }

/* 서명 — 오른쪽 정렬, 위에 짧은 선을 얹어 마무리 */
.letter .letter__sign {
    margin-top: var(--sp-7);
    color: var(--c-text);
    font-size: var(--fs-md);
    font-weight: 600;
    text-align: right;
}
.letter .letter__sign::before {
    content: "";
    display: block;
    width: 60px;
    height: 2px;
    margin: 0 0 var(--sp-3) auto;
    background: var(--tone);
}


/* ---------- 비전: 옛 사이트 형태 ----------
   설립목적·비전·목표 — 왼쪽 색 동그라미(아이콘+이름)가 오른쪽 옅은 회색 띠에 반쯤 걸친다.
   띠 모서리는 각지게 (사용자 요청). 동그라미 바탕은 흰 글씨가 잘 읽히는 진한 색(-strong). */
.vision-rows {
    display: grid;
    gap: var(--sp-5);
    padding: clamp(40px, 5vw, 64px) 0 0;
}

.vision-row {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    align-items: center;
    min-height: 170px;
    background: linear-gradient(90deg, transparent 85px, var(--c-bg-soft) 85px);
}

/* 동그라미 색 — 밝은 톤 (사용자 요청). 흰 글씨는 20px 굵게(큰 글자)라 대비 3:1 이상:
   초록 #51a344 3.2:1 · 청록 #1f93a8 3.6:1 · 주황 #e0701f 3.2:1 (더 밝은 #f59227 은 2.3:1 이라 쓰지 않음) */
.vision-row.tone-green  { --badge: var(--c-green); }
.vision-row.tone-teal   { --badge: var(--c-teal); }
.vision-row.tone-orange { --badge: var(--c-orange-fill); }

.vision-row__badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 170px;
    height: 170px;
    margin: 0;
    border-radius: 50%;
    background: var(--badge, var(--tone-strong));
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
}
.vision-row__badge .icon { width: 56px; height: 56px; stroke-width: 1.75; }

.vision-row__body {
    padding: var(--sp-5) var(--sp-7) var(--sp-5) clamp(28px, 3.5vw, 56px);
    color: var(--c-text);
    font-size: 1.25rem;
    line-height: 1.8;
}

.vision-row__lead {
    font-size: clamp(1.375rem, 2.2vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.vision-row__lead em { color: var(--c-green-strong); font-style: normal; }

.vision-row__list li { position: relative; padding-left: 16px; }
.vision-row__list li::before { content: "·"; position: absolute; left: 0; }

/* 역할 — 네모 표시 + 번호 목록 */
.vision-roles { padding-top: clamp(40px, 5vw, 64px); }

.role-list {
    display: grid;
    gap: 14px;
    margin-top: var(--sp-5);
    padding-left: var(--sp-6);
    color: var(--c-text);
    font-size: 1.125rem;
    line-height: 1.6;
}
/* 번호 — 밝은 주황, 20px 굵게(큰 글자)라 흰 바탕 대비 3.2:1 */
.role-list__num { margin-right: 8px; color: var(--c-orange-fill); font-size: 1.25rem; font-weight: 800; }

@media (max-width: 768px) {
    .vision-rows { gap: var(--sp-4); }
    .vision-row {
        grid-template-columns: 108px minmax(0, 1fr);
        min-height: 108px;
        background: linear-gradient(90deg, transparent 54px, var(--c-bg-soft) 54px);
    }
    /* 휴대폰에서도 이름을 19px 굵게 유지 — 밝은 바탕 위 흰 글씨 대비 기준(큰 글자 3:1)을 지킨다 */
    .vision-row__badge { width: 108px; height: 108px; gap: 2px; font-size: 1.1875rem; }
    .vision-row__badge .icon { width: 32px; height: 32px; }
    .vision-row__body { padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5); font-size: 1.0625rem; }
    .role-list { padding-left: 0; font-size: 1rem; }
}

/* ---------- 연혁: 옛 사이트 형태 ----------
   가운데 세로선에 해마다 동그라미를 찍고, 해를 왼쪽(오른쪽 정렬)·오른쪽(왼쪽 정렬)으로 번갈아 놓는다.
   동그라미 테두리 색은 비전 페이지와 같은 초록 → 청록 → 주황 순서로 돌아간다. */
.timeline--zigzag {
    position: relative;
    padding: clamp(40px, 5vw, 64px) 0 var(--sp-6);
    border-top: 0;
}
.timeline--zigzag::before {
    content: "";
    position: absolute;
    top: clamp(40px, 5vw, 64px);
    bottom: 0;
    left: calc(50% - .5px);
    width: 1px;
    background: var(--c-line-strong);
}

.timeline--zigzag .timeline__year {
    position: relative;
    display: block;
    width: 50%;
    padding: 0 56px var(--sp-7) 0;
    border-bottom: 0;
    text-align: right;
    word-break: keep-all;
}
.timeline--zigzag .timeline__year:nth-child(even) {
    margin-left: 50%;
    padding: 0 0 var(--sp-7) 56px;
    text-align: left;
}

.timeline--zigzag .timeline__year:nth-child(3n+1) { --dot: var(--c-green); }
.timeline--zigzag .timeline__year:nth-child(3n+2) { --dot: var(--c-teal); }
.timeline--zigzag .timeline__year:nth-child(3n+3) { --dot: var(--c-orange-fill); }

/* 세로선 위 동그라미 */
.timeline--zigzag .timeline__year::before {
    content: "";
    position: absolute;
    top: 9px;
    right: -8px;
    width: 16px;
    height: 16px;
    border: 4px solid var(--dot, var(--c-teal));
    border-radius: 50%;
    background: #fff;
}
.timeline--zigzag .timeline__year:nth-child(even)::before { right: auto; left: -8px; }

.timeline--zigzag .timeline__label {
    margin-bottom: var(--sp-3);
    color: var(--c-text);
    font-size: clamp(1.5rem, 2.4vw, 1.875rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.timeline--zigzag .bullet-list { list-style: none; }
.timeline--zigzag .bullet-list > li {
    padding-left: 0;
    color: var(--c-text-sub);
    font-size: 1.0625rem;
    line-height: 1.75;
}
.timeline--zigzag .bullet-list > li::before { content: none; }
.timeline--zigzag .bullet-list > li + li { margin-top: 2px; }

/* 860px 이하: 세로선을 왼쪽으로 옮기고 모두 한쪽(오른쪽)에 쌓는다 */
@media (max-width: 860px) {
    .timeline--zigzag::before { left: 7.5px; }
    .timeline--zigzag .timeline__year,
    .timeline--zigzag .timeline__year:nth-child(even) {
        width: auto;
        margin-left: 0;
        padding: 0 0 var(--sp-6) 40px;
        text-align: left;
    }
    .timeline--zigzag .timeline__year::before,
    .timeline--zigzag .timeline__year:nth-child(even)::before { right: auto; left: 0; }
    .timeline--zigzag .bullet-list > li { font-size: 1rem; }
}

/* ---------- 네모 표시 제목 (비전 역할 · 조직도 · 주요사업 — 옛 사이트와 같은 모양) ---------- */
.mark-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 var(--sp-4);
    color: var(--c-text);
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.mark-title::before {
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border: 3px solid var(--c-teal);
}

/* ---------- 주요사업: 옛 사이트 형태 ----------
   사업마다 왼쪽 색 칸(아이콘·이름) | 오른쪽 옅은 회색 칸에 목록. 색은 초록 → 청록 → 주황 순서.
   왼쪽 칸 이름은 19px 굵게(큰 글자)라 밝은 색 위 흰 글씨 대비 3:1 이상. */
.biz { padding-top: clamp(40px, 5vw, 64px); }
.biz.tone-green  { --badge: var(--c-green); }
.biz.tone-teal   { --badge: var(--c-teal); }
.biz.tone-orange { --badge: var(--c-orange-fill); }

.biz__row {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    min-height: 180px;
}

.biz__label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: var(--sp-5);
    background: var(--badge);
    color: #fff;
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-align: center;
}
.biz__label .icon { width: 52px; height: 52px; stroke-width: 1.6; }

.biz__list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: var(--sp-6) var(--sp-7);
    background: var(--c-bg-soft);
    color: var(--c-text);
    font-size: 1.125rem;
    line-height: 1.6;
    list-style: none;
}
.biz__list > li { position: relative; padding-left: 20px; }
.biz__list > li::before {
    content: "";
    position: absolute;
    top: .6em;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--badge);
}

.biz__sub {
    margin-top: 4px;
    color: var(--c-text-sub);
    font-size: 1rem;
    list-style: none;
}
.biz__sub--cols {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 2px var(--sp-7);
}

@media (max-width: 768px) {
    .biz__row { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .biz__label { flex-direction: row; justify-content: flex-start; gap: 10px; padding: var(--sp-4) var(--sp-5); }
    .biz__label .icon { width: 30px; height: 30px; }
    .biz__list { padding: var(--sp-5); font-size: 1.0625rem; }
    .biz__sub--cols { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 조직도: 그림 위 여백 ---------- */
.page--organization > .figure { margin-top: clamp(40px, 5vw, 64px); }

/* ---------- 이름표 목록 (조직도 직원현황 · 캠프지기 모집) — 항목 이름 주황 굵게 | 내용 ---------- */
.label-list {
    display: grid;
    gap: 10px;
    padding-left: var(--sp-6);
}
.label-list__row { display: flex; align-items: baseline; gap: var(--sp-5); font-size: 1.125rem; }
.label-list dt { flex: 0 0 auto; min-width: 5em; color: var(--c-orange-fill); font-size: 1.1875rem; font-weight: 700; }   /* 19px 굵게 — 흰 바탕 대비 3.2:1 (큰 글자) */
.label-list dd { margin: 0; color: var(--c-text); }

@media (max-width: 768px) {
    .label-list { padding-left: 0; }
}
@media (max-width: 560px) {
    .label-list__row { flex-direction: column; gap: 2px; }
}

/* ---------- 새 형식 페이지 공통: 구역 간격 · 본문 글 · 점 목록 · 번호 목록 · 가운데 인용 ---------- */
.tone-section { padding-top: clamp(40px, 5vw, 64px); }

.mark-title { flex-wrap: wrap; row-gap: 2px; }
/* 제목 옆 작은 덧붙임 글(★…) — 형광펜 없이 작게 */
.tone-1365 .mark-title span.text-sm { background: none; color: var(--c-text-sub); font-size: 1rem; font-weight: 500; }

.plain-text { color: var(--c-text-sub); font-size: 1.125rem; line-height: 1.85; }

.dot-list { color: var(--c-text-sub); font-size: 1.125rem; line-height: 1.8; list-style: none; }
.dot-list > li { position: relative; padding-left: 16px; }
.dot-list > li::before { content: "·"; position: absolute; left: 0; color: var(--c-text); font-weight: 700; }

.num-list { color: var(--c-text-sub); font-size: 1.125rem; line-height: 1.8; list-style: none; counter-reset: numl; }
.num-list > li { position: relative; padding-left: 28px; counter-increment: numl; }
.num-list > li + li { margin-top: 4px; }
.num-list > li::before { content: counter(numl) "."; position: absolute; left: 0; color: var(--c-teal-strong); font-weight: 700; }
.num-list .dash-list { margin-top: var(--sp-2); font-size: 1rem; }

.quote-line {
    color: var(--c-text);
    font-size: clamp(1.25rem, 2.2vw, 1.625rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-align: center;
    word-break: keep-all;
}
.quote-line .fa { color: var(--c-teal); font-size: .9em; vertical-align: .1em; }
.quote-line .fa-quote-left { margin-right: 12px; }
.quote-line .fa-quote-right { margin-left: 12px; }
.quote-line__source { margin-top: var(--sp-2); color: var(--c-text-muted); font-size: 1rem; text-align: center; }

/* 항목 표 제목 칸은 옛 사이트처럼 가운데 */
.tone-1365 .info-list__label { display: flex; align-items: center; justify-content: center; text-align: center; }

/* ---------- 자원봉사캠프: 옛 사이트처럼 사진 위에 캠프 이름, 아래에 연락처·주소 ----------
   사진 위 흰 글씨가 묻히지 않게 사진을 어둡게 덮는다. 운영종료 캠프는 옛 사이트처럼 흑백. */
.camp-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-6) var(--sp-4);
    list-style: none;
}

.camp-tile__photo {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: var(--c-bg-soft);
    aspect-ratio: 4 / 3;
}
.camp-tile__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.camp-tile__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .4);
}
.camp-tile--closed .camp-tile__photo img { filter: grayscale(1); }

.camp-tile__name {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.4;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    word-break: keep-all;
}

.camp-tile__info { margin-top: var(--sp-3); color: var(--c-text-sub); font-size: 1rem; line-height: 1.6; }
.camp-tile__info + .camp-tile__info { margin-top: 2px; }

@media (max-width: 960px) {
    .camp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .camp-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 찾아오시는길: 옛 사이트처럼 지도를 넓고 낮게 ----------
   16:9 로 두면 1400px 폭에서 지도가 790px 높이가 되어 아래 안내가 한참 밀린다.
   카카오 지도는 이 칸 높이를 읽어 그리므로 CSS 높이만 정하면 된다. */
.page--location > .map-embed {
    height: clamp(320px, 32vw, 460px);
    margin-top: clamp(40px, 5vw, 64px);
    aspect-ratio: auto;
}
/* 두 표(오시는길 · 대중교통)의 왼쪽 제목 칸 폭을 같게, 제목은 한 줄로 */
.page--location .data-table th { width: 200px; white-space: nowrap; }

@media (max-width: 640px) {
    .page--location > .map-embed { height: 360px; }
    .page--location .data-table th { width: 5.5em; }
}

/* ---------- 봉사참여: 옛 사이트 형태 ----------
   인용 문구 → 절차 색 동그라미(초록 → 청록 → 주황) → 하나·둘·셋 회색 띠 → 실적연계 그림과 설명.
   동그라미 안 흰 글씨는 19px 굵게(큰 글자)라 밝은 색 위 대비 3:1 이상. */
.join-quote {
    padding-top: clamp(40px, 5vw, 64px);
    color: var(--c-text);
    font-size: clamp(1.25rem, 2.2vw, 1.625rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-align: center;
}
.join-quote .fa { color: var(--c-teal); font-size: .9em; vertical-align: .1em; }
.join-quote .fa-quote-left { margin-right: 12px; }
.join-quote .fa-quote-right { margin-left: 12px; }

.join-section { padding-top: clamp(40px, 5vw, 64px); }

.circle-steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-5) clamp(16px, 2vw, 36px);
    margin: var(--sp-6) 0 0;
    list-style: none;
}
.circle-steps__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(140px, 11.5vw, 160px);
    height: clamp(140px, 11.5vw, 160px);
    padding: 10px;
    border-radius: 50%;
    background: var(--c-green);
    color: #fff;
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.35;
    text-align: center;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.circle-steps__item:nth-child(3n+2) { background: var(--c-teal); }
.circle-steps__item:nth-child(3n+3) { background: var(--c-orange-fill); }

.join-tips {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: var(--sp-7);
    padding: var(--sp-6) 0;
    background: var(--c-bg-soft);
    list-style: none;
}
.join-tips__item { padding: 0 var(--sp-6); }
.join-tips__item + .join-tips__item { border-left: 1px solid var(--c-line-strong); }   /* 칸 나눔 세로선 (옛 사이트와 같음) */

.join-tips__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 var(--sp-3);
    color: var(--c-text);
    font-size: 1.25rem;
    font-weight: 700;
}
.join-tips__title .fa { color: var(--c-green); font-size: 1.375rem; }
.join-tips__item p,
.join-tips__item li { color: var(--c-text-sub); font-size: 1.0625rem; line-height: 1.7; }

.join-map {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(28px, 4vw, 64px);
    margin-top: var(--sp-5);
    padding: clamp(20px, 3vw, 40px);
    background: var(--c-bg-soft);
}
.join-map__figure { margin: 0; }
.join-map__figure img { display: block; width: 100%; height: auto; }
.join-map__title {
    margin: 0 0 var(--sp-4);
    padding-top: var(--sp-5);
    border-top: 2px solid var(--c-text);
    color: var(--c-text);
    font-size: clamp(1.375rem, 2.2vw, 1.75rem);
    font-weight: 700;
}
.join-map__body .bullet-list > li { font-size: 1.0625rem; }

/* 1024px 이하: 동그라미 대신 번호 동그라미 + 글 한 줄 목록, 하나·둘·셋과 그림은 위아래로 */
@media (max-width: 1024px) {
    .circle-steps {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        counter-reset: cstep;
    }
    .circle-steps__item,
    .circle-steps__item:nth-child(n) {
        justify-content: flex-start;
        gap: 12px;
        width: auto;
        height: auto;
        padding: 0;
        border-radius: 0;
        background: none;
        color: var(--c-text);
        font-size: 1.0625rem;
        text-align: left;
        counter-increment: cstep;
    }
    .circle-steps__item::before {
        content: counter(cstep, decimal-leading-zero);
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--c-green);
        color: #fff;
        font-size: 1.1875rem;
        font-weight: 800;
    }
    .circle-steps__item:nth-child(3n+2)::before { background: var(--c-teal); }
    .circle-steps__item:nth-child(3n+3)::before { background: var(--c-orange-fill); }

    .join-tips { grid-template-columns: minmax(0, 1fr); padding: 0; }
    .join-tips__item { padding: var(--sp-5); }
    .join-tips__item + .join-tips__item { border-top: 1px solid var(--c-line-strong); border-left: 0; }
    .join-map { grid-template-columns: minmax(0, 1fr); }
    .join-map__figure { max-width: 420px; }
}

/* ---------- 활동처: 옛 사이트 형태 ----------
   왼쪽 굵은 제목(색 막대 없이) | 오른쪽 01. 번호 목록, 칸 사이 가는 가로선(.topic + .topic).
   신청가이드의 순서 목록은 옅은 회색 띠 안에 옆으로 흘려 놓는다. */
.topic__title--plain {
    padding-left: 0;
    font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
    font-weight: 700;
}
.topic__title--plain::before { content: none; }

.num-list--zero > li { padding-left: 36px; }
.num-list--zero > li::before { content: counter(numl, decimal-leading-zero) "."; color: var(--c-text); }

.guide-title {
    margin: var(--sp-6) 0 var(--sp-2);
    color: var(--c-text);
    font-size: 1.1875rem;
    font-weight: 700;
}
.guide-title:first-child { margin-top: 0; }

.guide-text { color: var(--c-text-sub); font-size: 1.125rem; line-height: 1.8; }
.guide-lead { margin-bottom: var(--sp-3); color: var(--c-text); font-size: 1.125rem; font-weight: 700; line-height: 1.8; }

.inline-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
    margin: var(--sp-3) 0;
    padding: var(--sp-4) var(--sp-5);
    background: var(--c-bg-soft);
    color: var(--c-teal-strong);
    font-size: 1rem;
    line-height: 1.6;
    list-style: none;
}

/* ---------- 사이버자원봉사 (교육자료 · 신청 · 문제 · 결과): 첫 구역 위 여백 ----------
   제목이 서브 상단으로 올라가 본문이 바로 시작하므로 첫 .section 에 여백을 준다. */
.tone-1365 .page > .section:first-child { margin-top: clamp(40px, 5vw, 64px); }

/* ---------- 인센티브 (인증배지 · 상해보험 · 주차감면 · 봉사자증): 옛 사이트 형태 ---------- */

/* 조회 폼 위 가운데 큰 제목 — 앞 낱말만 초록 (옛 사이트는 빨강이었으나 정당 색을 피해 초록) */
.form-title {
    margin: 0 0 var(--sp-5);
    color: var(--c-text);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-align: center;
}
.form-title em { color: var(--c-green-strong); font-style: normal; }

/* 조회 · 신청 폼 — 바깥 상자 없이 가운데 760px */
.tone-1365 .form-card { padding: 0; border: 0; background: none; box-shadow: none; }

/* 옅은 띠 제목 (기준일자 · 지급시기) */
.band-title {
    margin: var(--sp-5) 0 var(--sp-2);
    padding: 10px var(--sp-5);
    background: var(--c-teal-soft);
    color: var(--c-teal-strong);
    font-size: 1.125rem;
    font-weight: 700;
}
.band-body { padding: 0 var(--sp-5); color: var(--c-text-sub); font-size: 1.0625rem; }
.band-note { margin-top: var(--sp-2); padding: 0 var(--sp-5); color: var(--c-text); font-size: 1.0625rem; }

/* » 표시 소제목 (대상 · 감면기간 · 주의사항 · 보상절차) */
.arrow-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: var(--sp-6) 0 var(--sp-2);
    color: var(--c-text);
    font-size: 1.25rem;
    font-weight: 700;
}
.arrow-title .fa { color: var(--c-green); font-size: 1.375rem; }
.arrow-body { padding-left: 32px; color: var(--c-text-sub); font-size: 1.0625rem; line-height: 1.8; }

/* 머리 칸이 있는 3칸 (상해보험 보상절차) */
.head-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-6);
    margin-top: var(--sp-4);
    list-style: none;
}
.head-cards__item { border-bottom: 1px solid var(--c-line); text-align: center; }
.head-cards__head {
    padding: 12px;
    border-top: 1px solid var(--c-line-strong);
    border-bottom: 1px solid var(--c-line);
    background: var(--c-bg-soft);
    color: var(--c-text);
    font-size: 1.125rem;
    font-weight: 700;
}
.head-cards__text { padding: 14px 12px; color: var(--c-text-sub); font-size: 1.0625rem; line-height: 1.6; }

/* 색 동그라미 + 아래 설명 (주차감면 절차) — 동그라미 이름은 19px 굵게(큰 글자)라 흰 글씨 대비 3:1 이상 */
.circle-flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-5) clamp(24px, 4vw, 64px);
    margin: var(--sp-6) 0;
    list-style: none;
}
.circle-flow__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 220px;
    text-align: center;
}
.circle-flow__circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 160px;
    padding: 12px;
    border-radius: 50%;
    background: var(--c-green);
    color: #fff;
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.35;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.circle-flow__item:nth-child(3n+2) .circle-flow__circle { background: var(--c-teal); }
.circle-flow__item:nth-child(3n+3) .circle-flow__circle { background: var(--c-orange-fill); }
.circle-flow__text {
    margin-top: var(--sp-3);
    color: var(--c-text-sub);
    font-size: 1.0625rem;
    line-height: 1.6;
    word-break: keep-all;
}

/* 768px 이하: 3칸은 한 줄씩, 동그라미는 번호 동그라미 + 이름 + 설명 목록 */
@media (max-width: 768px) {
    .head-cards { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }

    .circle-flow {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sp-4);
        counter-reset: cflow;
    }
    .circle-flow__item {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        column-gap: 12px;
        width: auto;
        text-align: left;
        counter-increment: cflow;
    }
    .circle-flow__item::before {
        content: counter(cflow, decimal-leading-zero);
        grid-row: 1 / 3;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--c-green);
        color: #fff;
        font-size: 1.1875rem;
        font-weight: 800;
    }
    .circle-flow__item:nth-child(3n+2)::before { background: var(--c-teal); }
    .circle-flow__item:nth-child(3n+3)::before { background: var(--c-orange-fill); }
    .circle-flow__circle,
    .circle-flow__item:nth-child(n) .circle-flow__circle {
        display: block;
        width: auto;
        height: auto;
        padding: 0;
        border-radius: 0;
        background: none;
        color: var(--c-text);
        font-size: 1.125rem;
    }
    .circle-flow__text { margin-top: 2px; }
    .arrow-body { padding-left: 0; }
}

/* ---------- 이용안내 (개인정보처리방침 · 서비스이용약관 · 이메일무단수집거부): 옛 사이트 형태 ----------
   머리 안내 글 → 조마다 제목과 본문 → 끝에 센터 이름(오른쪽). 한 단으로 위에서 아래로 읽는다.
   옛 사이트의 파랑 · 왼쪽 색 선 · 둥근 상자는 쓰지 않고, 안내 글과 연락처는 옅은 회색 띠로 둔다. */
.policy { padding-top: clamp(40px, 5vw, 64px); }

.policy__intro {
    margin: 0;
    padding: var(--sp-5) var(--sp-6);
    background: var(--c-bg-soft);
    color: var(--c-text);
    font-size: 1.125rem;
    line-height: 1.8;
    word-break: keep-all;
}
/* 이메일무단수집거부 경고 글 — 옛 사이트처럼 주황 굵게.
   19px 굵게(큰 글자)라 회색 띠 위 대비 3:1 이상 (#b5560f / #f5f5f5 약 4.5:1) */
.policy__intro--warn { color: var(--c-orange-strong); font-size: 1.1875rem; font-weight: 700; }

.policy__article { margin-top: clamp(40px, 4.5vw, 56px); }

/* 조 제목 — 새 형식 페이지의 네모 표시 제목(.mark-title)과 같은 표시. 제목이 두 줄이 되어도 네모는 첫 줄에 둔다 */
.policy__title {
    position: relative;
    margin: 0 0 var(--sp-3);
    padding-left: 24px;
    color: var(--c-text);
    font-size: clamp(1.1875rem, 1.8vw, 1.375rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.45;
    word-break: keep-all;
}
.policy__title::before {
    content: "";
    position: absolute;
    top: calc(.725em - 7px);
    left: 0;
    width: 14px;
    height: 14px;
    border: 3px solid var(--c-teal);
}

/* 본문 — 제목 글자 시작(네모 14px + 사이 10px)에 맞춰 들여 쓴다 */
.policy__body {
    padding-left: 24px;
    color: var(--c-text-sub);
    font-size: 1.0625rem;
    line-height: 1.8;
    letter-spacing: -0.01em;
    word-break: keep-all;
}
.policy__body > * + * { margin-top: var(--sp-2); }
.policy__body strong { color: var(--c-text); }
.policy__body a { color: var(--c-teal-strong); text-decoration: underline; text-underline-offset: 3px; }

/* 번호 · 기호가 글 속에 없는 목록 — 1.(청록) · 점 · 줄표(목록 속 목록) */
.policy__body ol,
.policy__body ul { margin: 0; padding: 0; list-style: none; }
.policy__body ol { counter-reset: policy-num; }
.policy__body ol > li { position: relative; padding-left: 26px; counter-increment: policy-num; }
.policy__body ol > li::before { content: counter(policy-num) "."; position: absolute; left: 0; color: var(--c-teal-strong); font-weight: 700; }
.policy__body ul > li { position: relative; padding-left: 16px; }
.policy__body ul > li::before { content: "·"; position: absolute; left: 2px; color: var(--c-text); font-weight: 700; }
.policy__body li ul > li::before { content: "-"; left: 0; color: var(--c-text-muted); font-weight: 400; }
.policy__body li + li,
.policy__body li > * + * { margin-top: 6px; }
.policy__body li > p + p { margin-top: 2px; }

/* 글 속에 ① · 1. 번호가 있는 항 — 번호(span.policy__no)는 왼쪽 칸에 두고 글은 둘째 줄까지 같은 자리에서 시작한다
   (번호 폭이 ① · 1. · 10. 마다 달라 들여쓰기 한 값으로는 줄이 어긋난다) */
.policy__clause { position: relative; padding-left: 1.5em; }
.policy__no { position: absolute; top: 0; left: 0; }
.policy__items { padding-left: 1.5em; }
/* 10. 이 넘는 목록(이용약관 제11조)은 두 자리 번호가 글에 붙지 않게 번호 칸을 넓힌다 */
.policy__items--wide > .policy__clause { padding-left: 1.9em; }
.policy__body .policy__items > * + * { margin-top: 4px; }

/* 연락처 안내 — 옅은 회색 띠 (테두리 없음) */
.policy__body .policy__box { margin-top: var(--sp-3); padding: var(--sp-4) var(--sp-5); background: var(--c-bg-soft); color: var(--c-text); }
.policy__box p + p { margin-top: 2px; }
.policy__box .policy__gap { margin-top: var(--sp-3); }

.policy__sign { margin: var(--sp-7) 0 0; color: var(--c-text); font-size: 1.125rem; font-weight: 700; text-align: right; }

@media (max-width: 768px) {
    .policy__intro { padding: var(--sp-4) var(--sp-5); font-size: 1.0625rem; }
    .policy__intro--warn { font-size: 1.1875rem; }   /* 휴대폰에서도 19px 굵게 — 큰 글자 대비 기준 유지 */
    .policy__body { padding-left: 0; font-size: 1rem; }
    .policy__body .policy__box { padding: var(--sp-4); }
}

/* ---------- 다른 페이지로 넓힐 때 쓸 기본 강조 (지금 비전 페이지에는 없음) ---------- */
.tone-1365 .section-title::before { background: var(--c-1365-1); }
.tone-1365 span.text-primary { background: linear-gradient(transparent 60%, var(--c-1365-mark) 0); }
.tone-1365 .fa.text-primary { color: var(--c-1365-1); }