@charset "utf-8";
/* =====================================================================
   부품 — 소개 페이지(pages/*.php)에서 조립해 쓰는 공통 모양
   페이지 안에 <style> 을 두지 않는다. 필요한 모양이 없으면 여기에 부품으로 더한다.

   목록
   .section / .section-title / .sub-title / .lead          구역 · 제목
   .prose / .bullet-list / .dash-list / .number-list        글 · 목록
   .card-grid / .card                                       카드
   .table-wrap / .data-table / .table-note                  표
   .callout                                                 강조 상자
   .info-list                                               항목 · 내용 줄
   .steps                                                   진행 단계
   .timeline                                                연혁
   .split / .figure / .map-embed                            나눔 · 그림 · 지도
   .form-card / .consent / .field / .check / .form-actions  신청 · 조회 폼
   .result-box                                              조회 결과
   .slider                                                  넘겨 보기 (교육자료)
   .quiz                                                    문제
   .tag                                                     작은 표시
   ===================================================================== */

/* ---------- 구역 · 제목 ---------- */
.section { margin-top: clamp(40px, 6vw, 72px); }
.section:first-child { margin-top: 0; }
/* 폼처럼 가운데 좁게 놓는 구역 — 제목도 폼과 같은 줄에 맞춘다 */
.section--narrow { max-width: 760px; margin-right: auto; margin-left: auto; }

.section-title {
    position: relative;
    margin-bottom: var(--sp-5);
    padding-left: 16px;
    font-size: var(--fs-lg);
    font-weight: 700;
}

.section-title::before {
    content: "";
    position: absolute;
    top: .18em;
    bottom: .18em;
    left: 0;
    width: 5px;
    border-radius: 0;
    background: var(--c-primary);
}

.sub-title {
    margin: var(--sp-5) 0 var(--sp-3);
    font-size: var(--fs-md);
    font-weight: 700;
}
.sub-title:first-child { margin-top: 0; }

.lead {
    color: var(--c-text-sub);
    font-size: var(--fs-md);
    line-height: 1.8;
}

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--c-text-muted); }
.text-primary { color: var(--c-primary-strong); }
/* 글 속 강조는 색 대신 옅은 회색 밑줄로 (아이콘에는 쓰지 않는다) */
span.text-primary { background: linear-gradient(transparent 60%, var(--c-mark) 0); }
.text-strong { color: var(--c-text); font-weight: 700; }
.text-sm { font-size: var(--fs-sm); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }

/* ---------- 글 · 목록 ---------- */
.prose {
    color: var(--c-text-sub);
    line-height: 1.85;
}
.prose > * + * { margin-top: 1em; }
.prose strong, .prose b { color: var(--c-text); }
.prose a { color: var(--c-secondary); text-decoration: underline; text-underline-offset: 3px; }

.bullet-list > li,
.prose ul > li {
    position: relative;
    padding-left: 16px;
}
.bullet-list > li + li,
.prose ul > li + li { margin-top: 6px; }
.bullet-list > li::before,
.prose ul > li::before {
    content: "";
    position: absolute;
    top: .78em;
    left: 2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--c-primary);
}

/* 약관처럼 번호·기호가 글 속에 있거나, 표시 없이 들여쓰기만 할 목록 */
.plain-list > li + li { margin-top: 4px; }
.prose--plain ul,
.prose--plain ol { padding-left: 1.2em; }
.prose--plain ul > li,
.prose--plain ol > li { padding-left: 0; }
.prose--plain ul > li::before,
.prose--plain ol > li::before { content: none; }
.prose--plain ul > li + li,
.prose--plain ol > li + li { margin-top: 4px; }

.dash-list > li {
    position: relative;
    padding-left: 14px;
}
.dash-list > li + li { margin-top: 4px; }
.dash-list > li::before {
    content: "-";
    position: absolute;
    left: 0;
    color: var(--c-text-muted);
}

.number-list,
.prose ol {
    counter-reset: num;
}
.number-list > li,
.prose ol > li {
    position: relative;
    padding-left: 32px;
    counter-increment: num;
}
.number-list > li + li,
.prose ol > li + li { margin-top: 8px; }
/* "01." 처럼 두 자리 번호 */
.number-list--zero > li { padding-left: 38px; }
.number-list--zero > li::before { content: counter(num, decimal-leading-zero); width: 28px; border-radius: 0; }
.number-list > li::before,
.prose ol > li::before {
    content: counter(num);
    position: absolute;
    top: .2em;
    left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--c-primary-soft);
    color: var(--c-primary-strong);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

/* ---------- 카드 ---------- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--sp-4);
}
.card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

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

.card {
    position: relative;
    padding: var(--sp-6) var(--sp-5);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    background: #fff;
}
.card--soft { border-color: transparent; background: var(--c-bg-soft); }
.card--center { text-align: center; }
.card--primary { border-color: transparent; background: var(--c-primary-soft); }

/* 카드 윗부분을 꽉 채우는 사진 */
.card__media {
    margin: calc(-1 * var(--sp-6)) calc(-1 * var(--sp-5)) var(--sp-4);
    overflow: hidden;
    border-radius: var(--radius) var(--radius) 0 0;
}
.card__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 8 / 7;
    object-fit: cover;
}

.card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--sp-4);
    border-radius: 0;
    background: var(--c-primary-soft);
    color: var(--c-primary-strong);
    font-size: 26px;
}
.card--primary .card__icon { background: #fff; }

.card__label {
    display: block;
    margin-bottom: var(--sp-2);
    color: var(--c-primary);
    font-size: var(--fs-sm);
    font-weight: 800;
    letter-spacing: .04em;
}

.card__title {
    margin-bottom: var(--sp-2);
    font-size: var(--fs-md);
    font-weight: 700;
}

.card__text { color: var(--c-text-sub); }
.card__text + .card__text { margin-top: var(--sp-2); }

/* ---------- 표 ---------- */
.table-wrap {
    position: relative; /* 표 안의 화면 밖 글자(sound_only)가 이 틀을 기준으로 놓이게 — 없으면 휴대폰에서 페이지 전체가 옆으로 밀린다 */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-top: 2px solid var(--c-text);
}

.data-table {
    width: 100%;
    min-width: 560px;
    background: #fff;
}

.data-table th,
.data-table td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--c-line);
    line-height: 1.55;
    text-align: center;
    vertical-align: middle;
}

.data-table thead th {
    background: var(--c-bg-soft);
    color: var(--c-text);
    font-weight: 700;
}

.data-table tbody th {
    background: #fafbfc;
    color: var(--c-text);
    font-weight: 600;
}

.data-table td { color: var(--c-text-sub); }
.data-table td + td,
.data-table th + td,
.data-table th + th { border-left: 1px solid var(--c-line); }

.data-table--left td { text-align: left; }
.data-table--compact { min-width: 0; }

.table-note {
    margin-top: var(--sp-2);
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
}

/* ---------- 강조 상자 ---------- */
/* 한쪽만 색 선을 긋지 않는다 — 네 변 1px 테두리 + 옅은 바탕 */
.callout {
    padding: var(--sp-5);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    background: var(--c-secondary-soft);
    color: var(--c-text);
}
.callout--primary { border-color: var(--c-line-strong); background: var(--c-primary-soft); }
.callout--gray { border-color: var(--c-line-strong); background: var(--c-bg-soft); }

.callout__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-weight: 700;
}
.callout__title .fa { color: var(--c-secondary); }
.callout--primary .callout__title .fa { color: var(--c-primary); }

/* ---------- 항목 · 내용 줄 ---------- */
.info-list { border-top: 2px solid var(--c-text); }

.info-list__row {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    border-bottom: 1px solid var(--c-line);
}

.info-list__label {
    padding: 16px 20px;
    background: var(--c-bg-soft);
    color: var(--c-text);
    font-weight: 700;
}

.info-list__value {
    padding: 16px 20px;
    color: var(--c-text-sub);
}

@media (max-width: 640px) {
    .info-list__row { grid-template-columns: 1fr; }
    .info-list__label { padding: 12px 16px; }
    .info-list__value { padding: 12px 16px 16px; }
}

/* ---------- 진행 단계 ---------- */
.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--sp-5);
    counter-reset: step;
}

.steps__item {
    position: relative;
    padding: var(--sp-6) var(--sp-5) var(--sp-5);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    background: #fff;
    text-align: center;
    counter-increment: step;
}

.steps__item::before {
    content: counter(step, decimal-leading-zero);
    display: block;
    margin-bottom: var(--sp-3);
    color: var(--c-primary);
    font-size: var(--fs-sm);
    font-weight: 800;
    letter-spacing: .08em;
}

.steps__title { font-size: var(--fs-md); font-weight: 700; line-height: 1.5; }
.steps__text { margin-top: 6px; color: var(--c-text-sub); }

/* 휴대폰: 큰 상자 대신 번호와 글이 한 줄에 놓이는 목록 */
@media (max-width: 640px) {
    .steps { grid-template-columns: 1fr; gap: 8px; }
    .steps__item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
        text-align: left;
    }
    .steps__item::before { flex: 0 0 auto; margin: 0; min-width: 24px; }
    .steps__text { margin-top: 2px; }
}

/* 번호 없이 흐름만 보여 줄 때 */
.steps--plain .steps__item { padding-top: var(--sp-5); }
.steps--plain .steps__item::before { content: none; }

@media (min-width: 768px) {
    .steps__item:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 50%;
        right: -17px;
        width: 10px;
        height: 10px;
        border-top: 2px solid var(--c-line-strong);
        border-right: 2px solid var(--c-line-strong);
        transform: translateY(-50%) rotate(45deg);
    }
}

/* ---------- 연혁 ---------- */
.timeline { border-top: 2px solid var(--c-text); }

.timeline__year {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: var(--sp-5);
    padding: var(--sp-5) 0;
    border-bottom: 1px solid var(--c-line);
}

.timeline__label {
    color: var(--c-primary-strong);
    font-size: var(--fs-xl);
    font-weight: 800;
    line-height: 1.1;
}

.timeline__events li {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: var(--sp-3);
    padding: 3px 0;
    color: var(--c-text-sub);
}

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

@media (max-width: 640px) {
    .timeline__year { grid-template-columns: 1fr; gap: var(--sp-2); }
    .timeline__label { font-size: var(--fs-lg); }
}

/* ---------- 나눔 · 그림 · 지도 ---------- */
.split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(24px, 4vw, 48px);
    align-items: start;
}
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 860px) {
    .split,
    .split--even { grid-template-columns: 1fr; }
}

.figure { margin: 0; }
.figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}
.figure--bordered img { border: 1px solid var(--c-line); }
.figure--natural img { width: auto; max-width: 100%; margin: 0 auto; }
.figure figcaption {
    margin-top: var(--sp-2);
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    text-align: center;
}

.map-embed {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    background: var(--c-bg-soft);
    aspect-ratio: 16 / 9;
}
.map-embed iframe,
.map-embed > div {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}
@media (max-width: 640px) {
    .map-embed { aspect-ratio: 4 / 3; }
}

/* ---------- 신청 · 조회 폼 ---------- */
.form-card {
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(20px, 4vw, 40px);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.form-card__title {
    margin-bottom: var(--sp-2);
    font-size: var(--fs-lg);
    font-weight: 700;
    text-align: center;
}

.form-card__desc {
    margin-bottom: var(--sp-5);
    color: var(--c-text-muted);
    text-align: center;
}

.consent { margin-bottom: var(--sp-5); }
.consent__title { margin-bottom: var(--sp-2); font-weight: 700; }

.consent__box {
    max-height: 220px;
    overflow-y: auto;
    padding: var(--sp-4);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-sm);
    background: var(--c-bg-soft);
    color: var(--c-text-sub);
    font-size: var(--fs-sm);
    line-height: 1.8;
    white-space: pre-line;
}

.check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: var(--sp-3);
    font-weight: 600;
    cursor: pointer;
}
.check input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--c-primary);
}

.field {
    display: grid;
    gap: 6px;
    margin-bottom: var(--sp-4);
}
.field__label { font-weight: 600; }
.field__label .req { margin-left: 2px; color: var(--c-danger); }
.field__hint { color: var(--c-text-muted); font-size: var(--fs-sm); }
.field__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.form-control { width: 100%; }

.form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-2);
    margin-top: var(--sp-6);
}
.form-actions .btn { min-width: 140px; }

/* ---------- 조회 결과 ---------- */
.result-box {
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(28px, 5vw, 48px) clamp(20px, 4vw, 40px);
    border-radius: var(--radius-lg);
    background: var(--c-bg-soft);
    text-align: center;
}

.result-box__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto var(--sp-4);
    border-radius: 50%;
    font-size: 30px;
}
.result-box--success .result-box__icon { background: var(--c-success-soft); color: var(--c-success); }
.result-box--fail .result-box__icon { background: var(--c-danger-soft); color: var(--c-danger); }

.result-box__title {
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 1.6;
}
.result-box__title em { color: var(--c-primary-strong); font-style: normal; background: linear-gradient(transparent 60%, var(--c-mark) 0); }
.result-box__desc { margin-top: var(--sp-3); color: var(--c-text-sub); }

/* ---------- 넘겨 보기 (교육자료) ---------- */
.slider { position: relative; }

.slider__viewport {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    background: #111;
    aspect-ratio: 16 / 9;
}

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

/* 쪽 양옆 넘기기 — 얇은 꺾쇠. 어떤 그림 위에서도 보이게 짙은 선에 흰 번짐 */
.slider__side {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 120px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #333;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, .95));
    transform: translateY(-50%);
    cursor: pointer;
}
.slider__side--prev { left: 0; }
.slider__side--next { right: 0; }
.slider__side svg { width: 28px; height: 56px; }
.slider__side:hover,
.slider__side:focus-visible { background: rgba(255, 255, 255, .45); }

@media (max-width: 640px) {
    .slider__side { width: 40px; height: 80px; }
    .slider__side svg { width: 18px; height: 36px; }
}

.slider__bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    margin-top: var(--sp-3);
}

.slider__btn {
    width: 44px;
    height: 44px;
    border: 1px solid var(--c-line-strong);
    border-radius: 50%;
    background: #fff;
    color: var(--c-text);
    font-size: 20px;
}
.slider__btn:hover { border-color: var(--c-text); }

.slider__count {
    min-width: 72px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-align: center;
}

.slider-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: rgba(255, 255, 255, .55);
    transition: width .2s var(--ease), background-color .2s;
}
.slider-dot[aria-current="true"] { width: 26px; background: #fff; }

/* ---------- 문제 ---------- */
.quiz__item {
    margin-bottom: var(--sp-4);
    padding: var(--sp-5);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    background: #fff;
}

.quiz__q {
    display: flex;
    gap: 12px;
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 1.6;
}

.quiz__num {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--c-primary);
    color: #fff;
    font-size: var(--fs-sm);
}

.quiz__options {
    display: grid;
    gap: 8px;
    margin-top: var(--sp-4);
}

.quiz__option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-sm);
    color: var(--c-text-sub);
    cursor: pointer;
}
.quiz__option:hover { border-color: var(--c-line-strong); }
.quiz__option:has(input:checked) {
    border-color: var(--c-primary);
    background: var(--c-primary-soft);
    color: var(--c-text);
}
.quiz__option input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 4px 0 0;
    accent-color: var(--c-primary);
}
.quiz__answer { margin-top: var(--sp-4); }

/* ---------- 걸러 보기 · 숫자 요약 (담당자 화면) ---------- */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    background: var(--c-bg-soft);
}
.filter-bar__field { display: grid; gap: 4px; min-width: 140px; }
.filter-bar__field label { color: var(--c-text-sub); font-size: var(--fs-sm); font-weight: 600; }
.filter-bar__field--grow { flex: 1 1 220px; }
.filter-bar__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.stat-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--sp-3);
}
.stat-list__item {
    padding: var(--sp-4);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    background: #fff;
}
.stat-list__label { display: block; color: var(--c-text-muted); font-size: var(--fs-sm); }
.stat-list__value {
    display: block;
    margin-top: 4px;
    font-size: var(--fs-xl);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.stat-list__item--primary { border-color: transparent; background: var(--c-primary-soft); }
.stat-list__item--primary .stat-list__value { color: var(--c-primary-strong); }

.data-table--list { min-width: 900px; }
.table-check { width: 44px; }
.table-check input { width: 18px; height: 18px; accent-color: var(--c-primary); }
.nowrap { white-space: nowrap; }
.form-actions--start { justify-content: flex-start; margin-top: var(--sp-4); }

/* ---------- 작은 표시 ---------- */
.tag {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: var(--radius-pill);
    background: var(--c-bg-soft);
    color: var(--c-text-sub);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
.tag--primary { background: var(--c-primary-soft); color: var(--c-primary-strong); }
.tag--new { background: var(--c-success-soft); color: var(--c-success); }
.tag--success { background: var(--c-success-soft); color: var(--c-success); }
.tag--danger { background: var(--c-danger-soft); color: var(--c-danger); }