@charset "utf-8";
/* =====================================================================
   화면별 — 첫 화면, 그리고 부품으로 풀기 어려운 페이지 몇 곳만
   ===================================================================== */

/* ---------- 첫 화면: 큰 사진 ---------- */
/* 사이트 본문 폭(--container, 1400px)까지만 쓰고 가운데 둔다 — 머리글·본문과 양끝을 맞춘다.
   화면 전체로 늘리면 흐려지고 위아래가 잘리므로 늘리지 않는다.
   지금 사진 원본은 1200px 이라 1400px 에서는 약 17% 커져 보인다 (1400px 사진으로 바꾸면 해결). */
.hero {
    position: relative;
    max-width: var(--container);
    margin: 0 auto;
}

/* 높이는 사진 비율(1200:348)대로 — 잘리지도 늘어나지도 않는다.
   max-height 를 함께 쓰면 폭이 줄어 사진이 왼쪽으로 붙으므로 쓰지 않는다. */
.hero__viewport {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1200 / 348;
    background: #111;
}

.hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .7s var(--ease), visibility .7s;
}
.hero__slide.is-active { opacity: 1; visibility: visible; }
.hero__slide picture,
.hero__slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 넘기기 단추 (사용자 요청 2026-09-13: 가운데 검은 막대가 눈에 너무 띔)
   바탕 막대 없이 사진 오른쪽 아래에 작게 — 흰 화살표 · 흰 점에 옅은 그림자만 줘서 밝은 사진 위에서도 보이게 한다.
   점은 모두 동그라미(지금 사진은 꽉 찬 흰 점, 나머지는 반투명 — 늘어나는 둥근 막대는 쓰지 않음),
   점이 작아도 누르기 쉽게 누르는 칸은 24px 로 둔다. */
.hero__controls {
    position: absolute;
    right: 16px;
    bottom: 12px;
    display: flex;
    align-items: center;
    gap: 2px;
}

.hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 18px;
    /* 흰 현수막 · 밝은 벽 위에서도 가는 화살표가 묻히지 않게 둘레를 짙게 감싼다 */
    text-shadow: 0 0 2px rgba(0, 0, 0, .8), 0 1px 3px rgba(0, 0, 0, .6);
    transition: background-color .2s;
}
.hero__btn:hover { background: rgba(0, 0, 0, .25); }

.hero__dots { display: flex; align-items: center; }

.hero .slider-dot,
.hero .slider-dot[aria-current="true"] {
    position: relative;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
}
.hero .slider-dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .28), 0 1px 3px rgba(0, 0, 0, .45);   /* 흰 바탕 위에서도 점이 보이게 옅은 테두리 */
    transition: background-color .2s, transform .2s;
}
.hero .slider-dot:hover::before { background: rgba(255, 255, 255, .85); }
.hero .slider-dot[aria-current="true"]::before { background: #fff; transform: scale(1.25); }

.hero__btn:focus-visible,
.hero .slider-dot:focus-visible { outline: 2px solid #fff; outline-offset: -2px; box-shadow: 0 0 0 2px rgba(0, 0, 0, .55); }

@media (max-width: 767px) {
    .hero__viewport { aspect-ratio: 768 / 347; } /* 휴대폰 사진 768:347 */
    .hero__controls { right: 6px; bottom: 4px; }
}

/* ---------- 첫 화면: 소식 · 사진 · 바로가기 ---------- */
/* 위쪽(큰 사진과의 사이)은 좁게. 아래 관련 사이트 줄이 같은 회색 바탕에 이어지므로 아래쪽도 24px 만 */
.home-section { padding: clamp(16px, 2vw, 24px) 0 var(--sp-5); background: var(--c-bg-soft); }

/* 세 구역 사이는 바로가기 칸 사이(12px)와 같게 좁힌다 (사용자 요청: 24px 는 넓어 보임) */
.home-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, .8fr);
    gap: var(--sp-3);
}

@media (max-width: 1100px) {
    .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-quick { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
    .home-grid { grid-template-columns: 1fr; }
}

.home-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--sp-5);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    background: #fff;
}

.home-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

/* 강조색 (사용자 요청: 회색뿐이라 밋밋함) — 자원봉사 색(로고 하트)은 제목 · 고른 탭 · 넘기기 단추에,
   바로가기 네 칸 아이콘은 1365 로고색(초록 · 주황 · 청록)과 자원봉사 색으로 나눠 칠한다 */
.home-card__title { font-size: var(--fs-lg); font-weight: 500; }
.home-card__title strong { color: var(--c-brand); font-weight: 800; }

.home-card__tools { display: flex; align-items: center; gap: var(--sp-3); }

.more-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    white-space: nowrap;
}
.more-link:hover { color: var(--c-brand); }
.tabs__panel .more-link { margin-top: var(--sp-3); }

/* 탭 */
.tabs__list { display: flex; gap: 6px; margin-bottom: var(--sp-2); }

.tabs__tab {
    padding: 7px 14px;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--c-text-sub);
    font-size: var(--fs-sm);
    font-weight: 600;
}
.tabs__tab:hover { border-color: var(--c-brand); color: var(--c-brand); }
.tabs__tab[aria-selected="true"] {
    border-color: var(--c-brand);
    background: var(--c-brand);
    color: #fff;
}

/* 최근글 목록 */
.latest-list__item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 11px 0;
    border-bottom: 1px dashed var(--c-line);
}

.latest-list__link {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--c-text);
}

.latest-list__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.latest-list__date {
    flex: 0 0 auto;
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}

.latest-list__empty {
    padding: 32px 0;
    color: var(--c-text-muted);
    text-align: center;
}

/* 최근 사진 */
.latest-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4) var(--sp-3);
}

.latest-gallery__link { display: block; color: var(--c-text); }

/* 사진 칸은 16:9 (사용자 요청 2026-09-13) — 4:3 이면 포토갤러리 칸이 가장 높아져
   같은 줄의 소식 칸 아래가 비고 오른쪽 바로가기 칸이 너무 커진다 */
.latest-gallery__thumb {
    display: block;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--c-bg-soft);
    aspect-ratio: 16 / 9;
}

.latest-gallery__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s var(--ease);
}
.latest-gallery__link:hover img { transform: scale(1.04); }

.latest-gallery__noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #b8bec8;
    font-size: 28px;
}

.latest-gallery__title {
    display: block;
    margin-top: 8px;
    overflow: hidden;
    font-size: var(--fs-sm);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.latest-gallery__empty {
    grid-column: 1 / -1;
    padding: 32px 0;
    color: var(--c-text-muted);
    text-align: center;
}

.latest-list__link:hover .latest-list__title,
.latest-gallery__link:hover .latest-gallery__title { color: var(--c-brand); }

/* 포토갤러리 넘기기 (js initCarousels): 한 쪽 = 사진 네 장(2×2).
   쪽 사이를 --carousel-gap 만큼 띄워 넘어가는 동안 앞뒤 쪽 사진이 붙어 보이지 않게 한다 */
.gallery-carousel__viewport { overflow: hidden; }
.gallery-carousel__track {
    --carousel-gap: var(--sp-5);
    display: flex;
    gap: var(--carousel-gap);
    transition: transform .6s var(--ease);
}
.gallery-carousel__page { flex: 0 0 100%; min-width: 0; }

.carousel-controls { display: flex; gap: 4px; }
.carousel-controls[hidden] { display: none; }
.carousel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--c-text-muted);
    font-size: 15px;
}
.carousel-btn:hover,
.carousel-btn:focus-visible { border-color: var(--c-brand); color: var(--c-brand); }

/* 바로가기 배너 여섯 칸 (2026-09-13 사용자 시안)
   평소: 흰 카드 · 옅은 그림자 · 검은 이름은 왼쪽 위 · 칸 색 선 아이콘은 오른쪽 아래.
   마우스 · 키보드로 가리키면 칸마다 정한 색으로 채우고 이름 · 아이콘을 흰색으로 바꾼다.
   이름이 19px 굵은 글씨(큰 글자)라 흰 글자 대비 3:1 이상인 색만 쓴다. 모서리는 네모(사용자 규칙).
   색은 초록·주황 / 청록·자원봉사 색 / 주황·초록 — 같은 색이 대각선으로 마주 보게 놓는다. */
/* 배너 사이는 8px — 세 구역 사이(12px)보다 좁게 (사용자 요청 2026-09-13) */
.quick-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 8px;
    height: 100%;
}
.quick-links li { display: flex; }

@media (max-width: 1100px) {
    .quick-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .quick-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.quick-link {
    --quick: var(--c-text);
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--sp-3);
    min-height: 124px;
    padding: 18px 20px;
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 14px rgba(0, 0, 0, .06);
    color: var(--c-text);
    transition: background-color .2s, color .2s, box-shadow .2s;
}
/* 가리키면 칸을 색으로 채우고 이름 글자만 흰색 (사용자 요청) */
.quick-link:hover,
.quick-link:focus-visible {
    background: var(--quick);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    color: #fff;
}

.quick-link--edu      { --quick: var(--c-green); }         /* 1365 초록 */
.quick-link--camp     { --quick: var(--c-orange-fill); }   /* 1365 주황 */
.quick-link--parking  { --quick: var(--c-teal); }          /* 청록 */
.quick-link--honor    { --quick: var(--c-brand); }         /* 자원봉사 색 */
.quick-link--discount { --quick: var(--c-orange-fill); }
.quick-link--webzine  { --quick: var(--c-green); }

.quick-link__label {
    font-size: 1.1875rem;   /* 19px */
    font-weight: 700;
    line-height: 1.3;
    word-break: keep-all;
}

/* 아이콘은 평소 칸 색, 가리켜 칸이 그 색으로 채워지면 이름과 같이 흰색 (사용자 요청) */
.quick-link__icon {
    align-self: flex-end;
    width: 44px;
    height: 44px;
    color: var(--quick);
    stroke-width: 1.5;
    transition: color .2s;
}
.quick-link:hover .quick-link__icon,
.quick-link:focus-visible .quick-link__icon { color: #fff; }

/* ---------- 사이버자원봉사 결과 (담당자): 점수를 누르면 문제별 답 보기 ---------- */
.quiz-score-link {
    display: inline-block;
    min-width: 32px;
    padding: 2px 6px;
    color: var(--c-text);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.quiz-score-link:hover { color: var(--c-brand); }

.quiz-review__back { margin: 0 0 var(--sp-4); }
.quiz-review__back--end { margin: var(--sp-4) 0 0; }
.quiz-review__summary { margin: 0 0 var(--sp-3); color: var(--c-text-sub); }
.quiz-review__summary strong { color: var(--c-text); }
.quiz-review__note { margin: 0 0 var(--sp-3); }

.quiz-review { min-width: 760px; }
.quiz-review td { text-align: left; vertical-align: top; }
.quiz-review__no,
.quiz-review__mark { width: 64px; text-align: center !important; white-space: nowrap; }
.quiz-review__q { color: var(--c-text); }
.quiz-review__text { display: block; margin-top: 4px; color: var(--c-text-muted); font-size: var(--fs-sm); }
.quiz-review__answer { width: 26%; color: var(--c-text); font-weight: 600; }
.quiz-review__given { width: 26%; }
.quiz-review tr.is-wrong td { background: #fff7f7; }   /* 틀린 문제 줄만 아주 옅게 */

/* ---------- 사이버자원봉사 문제: 한 문제씩 (js initQuizSteps) ---------- */
.quiz [hidden] { display: none !important; }   /* 단추(.btn)는 display 가 있어 hidden 만으로는 안 숨는다 */

.quiz__progress { display: flex; align-items: center; gap: var(--sp-4); margin: 0 0 var(--sp-4); }
.quiz__progress-text { flex: 0 0 auto; margin: 0; color: var(--c-text-sub); font-variant-numeric: tabular-nums; }
.quiz__progress-text strong { color: var(--c-text); font-size: var(--fs-md); }
.quiz__progress-bar { flex: 1; height: 6px; background: var(--c-line); }
.quiz__progress-bar span { display: block; width: 10%; height: 100%; background: var(--c-green); transition: width .25s var(--ease); }

.quiz .is-stepped .quiz__item { min-height: 300px; margin-bottom: 0; }
.quiz__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); }
.quiz .is-stepped .quiz__nav .btn { min-width: 140px; }

@media (max-width: 560px) {
    .quiz .is-stepped .quiz__item { min-height: 0; }
    .quiz .is-stepped .quiz__nav .btn { flex: 1; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .quiz__progress-bar span { transition: none; }
}

/* ---------- 사이버자원봉사 결과: 봉사시간 인증 처리 표시 (사용자 요청 — 눈에 띄게) ----------
   진한 초록 칸 + 체크 + 흰 글자(대비 약 5.1:1), 옆에 처리한 날짜. 처리한 담당자 아이디는 보이지 않는다. */
.quiz-cert {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 10px;
    background: var(--c-green-strong);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}
.quiz-cert .fa { font-size: 12px; }
.quiz-cert-date { margin-left: 8px; color: var(--c-text); font-weight: 600; font-variant-numeric: tabular-nums; vertical-align: middle; }

/* 요약: 봉사시간 인증 완료 — 옅은 초록 바탕에 진한 초록 숫자 */
.stat-list__item--done { border-color: transparent; background: var(--c-green-soft); }
.stat-list__item--done .stat-list__label { color: var(--c-green-strong); font-weight: 700; }
.stat-list__item--done .stat-list__value { color: var(--c-green-strong); }

/* 관련 사이트 */
/* 첫 화면 팝업 (theme/sahav/popup.inc.php · js initPopups)
   머리글 바로 아래, 사이트 본문 왼쪽 끝부터 보이는 순서대로 붙인다. 폭은 그림 폭(최대 480px).
   화면이 좁아 다 놓지 못하면 마지막 자리에 순서대로 겹치고, 앞 팝업을 닫으면 다음 팝업이 같은 자리에 보인다.
   닫은 팝업은 자리를 비워 둔 채(visibility) 다른 팝업을 움직이지 않는다. 모서리는 네모. */
.site-popups {
    position: fixed;
    top: calc(var(--header-h) + 16px);
    right: 0;
    left: 0;
    z-index: 90;   /* 머리글(100) 아래 */
    pointer-events: none;
}
.site-popups__row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-3); }
.site-popups.is-arranged .site-popups__row { flex-wrap: nowrap; }
.site-popups__slot { display: grid; align-items: start; }
.site-popups__slot > .site-popup { grid-area: 1 / 1; }

/* 게시판과 같은 결 (사용자 요청): 흰 바탕 · 옅은 선 · 회색 글자, 그림자는 떠 있는 것만 알 수 있게 옅게 */
.site-popup {
    flex: 0 0 auto;
    width: min(var(--popup-w, 480px), calc(100vw - 2 * var(--gutter)));
    border: 1px solid #e2e2e2;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
    pointer-events: auto;
}
.site-popup.is-waiting,
.site-popup.is-closed { visibility: hidden; pointer-events: none; }

.site-popup__body {
    max-height: calc(100vh - var(--header-h) - 80px);
    max-height: calc(100dvh - var(--header-h) - 80px);   /* 위 16px · 아래 단추 줄 45px · 테두리 · 아래 여백 16px */
    overflow-y: auto;
    overscroll-behavior: contain;
}
.site-popup__body a { display: block; }
.site-popup__body img { display: block; width: 100%; height: auto; }

.site-popup__bar { display: flex; justify-content: space-between; border-top: 1px solid #ececec; background: #fff; }
.site-popup__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    background: none;
    color: var(--c-text-sub);
    font-size: var(--fs-sm);
    cursor: pointer;
}
.site-popup__btn:hover { background: #f6f6f6; color: var(--c-text); }
.site-popup__btn:focus-visible { outline: 3px solid var(--c-text); outline-offset: -3px; }

/* 관련 사이트 (2026-09-13 사용자 요청으로 다시 만듦)
   바로가기와 같은 흰 카드 · 옅은 그림자를 소식 구역과 같은 회색 바탕에 한 줄로 이어 놓는다.
   옛 로고 그림(180×60)에는 가장자리에 둥근 회색 테두리가 그려져 있어 그림 둘레 3px 를 잘라 가린다 (clip-path).
   가리켜도 모양은 그대로 (사용자 요청 — 키보드 초점은 base.css 의 기본 초점 선). 모서리는 네모. */
.related-sites { padding: 0 0 clamp(40px, 5vw, 64px); background: var(--c-bg-soft); }

.related-sites__list {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--sp-3);
}
@media (max-width: 960px) {
    .related-sites__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .related-sites__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.related-sites__list a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 76px;
    padding: 8px 12px;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 14px rgba(0, 0, 0, .06);
}
.related-sites__list img {
    width: 100%;
    max-width: 180px;
    height: auto;
    clip-path: inset(5% 1.7%);   /* 위아래 3px(60의 5%) · 좌우 3px(180의 1.7%) — 그림 속 테두리 */
}

/* =====================================================================
   소개 페이지별 (부품으로 풀기 어려운 것만)
   ===================================================================== */