@charset "UTF-8";
/* ==========================================================================
   동물자유연대 리디자인 — 서브 페이지 공통 컴포넌트 (css/sub.css)
   style.css의 토큰(--c-orange, --c-orange-deep, --c-ink, --c-warm-dark, --c-cream,
   --c-peach, --r-card …)과 공통 컴포넌트(.btn, .eyebrow, .sec-head, .sec-title,
   .sec-lead, .text-link, .note, .tag, .news-row, .report, .chip, .check …)를 그대로 씁니다.
   구조: 1) 서브 히어로·브레드크럼  2) LNB  3) 섹션·레이아웃  4) 카드·목록
         5) 표·아코디언·타임라인·조직도·단계  6) 폼  7) CTA 띠·보조 요소  8) 반응형
   ========================================================================== */

:root { --lnb-h: 3.5rem; }
/* 앵커 이동 시 고정 헤더 + LNB에 가리지 않게 */
html.is-sub { scroll-padding-top: calc(var(--header-h) + var(--lnb-h) + 1rem); }

/* 1) 서브 히어로 ------------------------------------------------------------ */
.sub-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--c-warm-dark); color: var(--c-white);
}
.sub-hero__bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(40rem 26rem at 88% 40%, rgba(254, 111, 32, .28), transparent 62%),
    linear-gradient(135deg, #2A211C 0%, #3A2A20 100%);
}
/* 배경 패턴: 메인 히어로 일러스트 슬라이드의 모티프를 이어받음 */
.sub-hero__bg::after { content: ""; position: absolute; inset: 0; }
.sub-hero--dots .sub-hero__bg::after,
.sub-hero__bg::after { background-image: radial-gradient(rgba(255, 255, 255, .07) 1.5px, transparent 1.6px); background-size: 22px 22px; }
.sub-hero--bars .sub-hero__bg::after { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 6px, transparent 6px 54px); }
.sub-hero--lines .sub-hero__bg::after { background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0 4px, transparent 4px 40px); }
.sub-hero--grid .sub-hero__bg::after {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 28px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 28px);
}

.sub-hero__inner {
  position: relative; display: grid; gap: 1.5rem; align-items: center;
  padding-top: calc(var(--header-h) + 1.25rem);
  padding-bottom: 2.5rem;
}
.sub-hero__copy { min-width: 0; max-width: 46rem; }
.sub-hero .eyebrow { margin-top: 1.5rem; }
.sub-hero__title {
  margin-top: .625rem;
  font-size: clamp(2rem, 1.45rem + 2.2vw, 3.25rem); font-weight: 800; line-height: 1.25; letter-spacing: -.025em;
}
.sub-hero__lead {
  margin-top: .875rem; max-width: 38rem;
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem); color: rgba(255, 255, 255, .88);
}
/* 오른쪽 원형 배지: 피치 원 + 오렌지 해(메인 일러스트 공통 모티프) + 페이지 아이콘 */
.sub-hero__art { display: none; }
.sub-hero__art .ico, .sub-hero__art .logo__mark { position: relative; width: 42%; height: 42%; stroke-width: 1.5; }

/* 브레드크럼 */
.breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .25rem; font-size: .875rem; }
.breadcrumb__list li { display: inline-flex; align-items: center; color: rgba(255, 255, 255, .78); }
.breadcrumb__list li + li::before {
  content: ""; width: .375rem; height: .375rem; margin: 0 .625rem 0 .375rem;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: .7;
}
.breadcrumb__list a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.breadcrumb__list a:hover { color: var(--c-white); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb__list [aria-current="page"] { font-weight: 700; color: var(--c-white); }
.breadcrumb__home { display: inline-flex; align-items: center; gap: .375rem; }
.breadcrumb__home .ico { width: 1rem; height: 1rem; }

/* 2) LNB (페이지 안 섹션 탭, 스크롤하면 헤더 아래 고정) --------------------- */
.lnb {
  position: sticky; top: var(--header-h); z-index: 30;
  background: var(--c-white); border-bottom: 1px solid var(--c-line);
  box-shadow: 0 2px 10px rgba(42, 33, 28, .05);
}
.lnb .container { padding-inline: 0; }
.lnb__list {
  display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
  padding-inline: calc(var(--gutter) - .5rem);
}
.lnb__list::-webkit-scrollbar { display: none; }
.lnb__list > li { flex: none; scroll-snap-align: start; }
.lnb__list > li:first-child { margin-left: auto; }
.lnb__list > li:last-child { margin-right: auto; }
.lnb__link {
  position: relative; display: inline-flex; align-items: center;
  min-height: var(--lnb-h); padding: 0 .875rem;
  font-size: .9375rem; font-weight: 600; color: var(--c-sub); white-space: nowrap;
  transition: color .2s;
}
.lnb__link:hover { color: var(--c-ink); }
.lnb__link:focus-visible { outline-offset: -3px; }
.lnb__link.is-current { font-weight: 800; color: var(--c-ink); }
.lnb__link::after {
  content: ""; position: absolute; left: .5rem; right: .5rem; bottom: 0; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--c-orange); transform: scaleX(0); transition: transform .2s var(--ease);
}
.lnb__link.is-current::after { transform: scaleX(1); }

/* 3) 섹션 · 레이아웃 -------------------------------------------------------- */
.sub-section { padding: 3.5rem 0; }
.sub-section--cream { background: var(--c-cream); }
.sub-section--tint { background: linear-gradient(180deg, var(--c-white) 0%, #FFFAF6 100%); }
.sub-section--dark { background: var(--c-warm-dark); color: var(--c-white); }
.sub-section--dark .sec-lead { color: rgba(255, 255, 255, .85); }
.sub-section--dark .eyebrow { color: var(--c-orange); }
.sub-section--dark :focus-visible { outline-color: var(--c-white); }
.sub-section .sec-head { max-width: 50rem; }
.sub-section .sec-head--center { margin-inline: auto; }
* + .sub-block { margin-top: 3rem; }
.sec-head + .sub-block { margin-top: 0; }
.sub-block__title { font-size: clamp(1.25rem, 1.12rem + .55vw, 1.5rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.4; }
.sub-block__lead { margin-top: .5rem; color: var(--c-text-2); }
.sub-block__head { margin-bottom: 1.25rem; }

.split { display: grid; gap: 2rem; }
.prose { color: var(--c-text-2); }
.prose p + p { margin-top: 1rem; }
.prose strong { color: var(--c-ink); }
.lead-text { font-size: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem); font-weight: 700; line-height: 1.6; color: var(--c-ink); }

/* 이미지·일러스트 패널 (img/ 크롭 또는 인라인 SVG 일러스트를 넣음) */
.media-panel {
  position: relative; overflow: hidden; aspect-ratio: 4 / 3;
  border-radius: var(--r-lg); background: var(--c-peach);
}
.media-panel > svg, .media-panel > img { width: 100%; height: 100%; object-fit: cover; }
.media-panel__tag {
  position: absolute; left: 1rem; bottom: 1rem;
  display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .875rem;
  border-radius: 999px; background: var(--c-white); box-shadow: var(--shadow-soft);
  font-size: .8125rem; font-weight: 700;
}
.media-panel__tag .ico { color: var(--c-orange-deep); }

/* 캠페인 소개 블록: 일러스트 + 글 */
.feature { display: grid; gap: 1.75rem; align-items: center; }
.feature__body { min-width: 0; }
.feature__chip {
  display: inline-flex; align-items: center; gap: .375rem; min-height: 1.75rem; padding: 0 .75rem;
  border-radius: 999px; background: var(--c-peach); font-size: .8125rem; font-weight: 700; color: var(--c-ink);
}
.feature__title { margin-top: .75rem; font-size: clamp(1.375rem, 1.2rem + .8vw, 1.875rem); font-weight: 800; line-height: 1.35; letter-spacing: -.02em; }
.feature__text { margin-top: .75rem; color: var(--c-text-2); }
.feature .btn-row { margin-top: 1.5rem; }

/* 4) 카드 · 목록 ------------------------------------------------------------ */
.card-grid { display: grid; gap: .875rem; }
.info-card {
  position: relative; display: flex; flex-direction: column; gap: .375rem; height: 100%;
  padding: 1.5rem 1.375rem; border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-white);
}
.info-card--cream { border-color: transparent; background: var(--c-cream); }
.sub-section--cream .info-card { border-color: transparent; }
.info-card__ico {
  display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; margin-bottom: .5rem;
  border-radius: 50%; background: var(--c-peach); color: var(--c-ink);
}
/* 크림 카드 안에서만 흰 아이콘 원 (크림 섹션의 흰 카드는 기본 피치 원 유지 → 카드와 구분됨) */
.info-card--cream .info-card__ico { background: var(--c-white); color: var(--c-orange-deep); }
.info-card__ico .ico { width: 1.5rem; height: 1.5rem; }
.info-card__label { font-size: .75rem; font-weight: 800; letter-spacing: .12em; color: var(--c-orange-deep); }
.info-card__title { font-size: var(--fs-h3); font-weight: 800; line-height: 1.4; }
.info-card__text { font-size: .9375rem; color: var(--c-text-2); }
.info-card__meta { display: flex; flex-wrap: wrap; gap: .25rem .75rem; font-size: var(--fs-meta); color: var(--c-sub); }
.info-card__foot { margin-top: auto; padding-top: .5rem; }
.info-card__foot .text-link { margin-top: 0; }
/* 카드 전체가 링크일 때: <a class="info-card info-card--link"> */
.info-card--link { transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; overflow: hidden; }
.info-card--link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--c-orange); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease);
}
.info-card--link:hover, .info-card--link:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-soft); border-color: #E9D6C8; }
.info-card--link:hover::after, .info-card--link:focus-visible::after { transform: scaleX(1); }
.info-card--link:hover .info-card__title { color: var(--c-orange-deep); }

/* 체크 목록 */
.check-list { display: grid; gap: .625rem; }
.check-list li { position: relative; padding-left: 2.125rem; line-height: 1.6; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .125rem; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--c-peach) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5 10 16.5 18 8' fill='none' stroke='%23BF4A0D' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 1rem no-repeat;
}
.check-list strong { font-weight: 700; }

/* 정의 목록 (항목명 : 내용) */
.info-list { border-top: 2px solid var(--c-ink); }
.info-list__row { display: grid; gap: .25rem; padding: 1rem .25rem; border-bottom: 1px solid var(--c-line); }
.info-list dt { font-weight: 800; }
.info-list dd { margin: 0; color: var(--c-text-2); }

/* 게시판형 목록: style.css의 .news-list / .news-row / .tag를 그대로 사용
   + 목록 위 개수·필터 줄 */
.board-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.board-count { font-size: .9375rem; color: var(--c-sub); }
.board-count strong { font-weight: 800; color: var(--c-ink); }
.news-list { border-top: 2px solid var(--c-ink); }
.tag--deep { background: var(--c-orange-deep); color: var(--c-white); }
.tag--line { border: 1px solid var(--c-line); background: var(--c-white); }

/* 보고서 카드 그리드: style.css의 .report 사용 */
.report-grid { display: grid; gap: .75rem; }

/* 후기·인용 카드 */
.quote-card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  padding: 2.25rem 1.5rem 1.5rem; border-radius: var(--r-card); background: var(--c-white); box-shadow: var(--shadow-soft);
}
.quote-card::before {
  content: ""; position: absolute; top: 1.25rem; left: 1.5rem; width: 1.75rem; height: 1.25rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20'%3E%3Cpath d='M0 20V12C0 5 3.5 1 10 0l1.2 3C7.6 4.2 6 6.6 6 10h5v10zm16 0V12c0-7 3.5-11 10-12l1.2 3C23.6 4.2 22 6.6 22 10h5v10z' fill='%23FE6F20'/%3E%3C/svg%3E") center / contain no-repeat;
}
.quote-card__title { margin-top: .75rem; font-size: 1.0625rem; font-weight: 800; line-height: 1.45; }
.quote-card__text { margin-top: .5rem; color: var(--c-text-2); font-size: .9375rem; }
.quote-card__by { display: flex; align-items: center; gap: .625rem; margin-top: auto; padding-top: 1.25rem; font-size: var(--fs-meta); color: var(--c-sub); }
.quote-card__avatar { flex: none; width: 2.75rem; height: 2.75rem; overflow: hidden; border-radius: 50%; background: var(--c-peach); }
.quote-card__avatar svg { width: 100%; height: 100%; }

/* 5) 표 · 아코디언 · 타임라인 · 조직도 · 단계 -------------------------------- */
/* 표: 좁은 화면에서는 표 영역만 가로 스크롤 (<div class="table-wrap" role="region" aria-label="…" tabindex="0">) */
.table-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-white); }
.table-wrap:focus-visible { outline-offset: 2px; }
.data-table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .9375rem; }
.data-table caption { padding: 1rem 1.25rem .25rem; caption-side: top; text-align: left; font-weight: 800; }
.data-table th, .data-table td { padding: .875rem 1.25rem; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.data-table thead th { background: var(--c-cream); font-size: .875rem; font-weight: 800; white-space: nowrap; }
.data-table tbody th { font-weight: 700; }
.data-table tbody tr:last-child > * { border-bottom: 0; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table tfoot td, .data-table tfoot th { border-top: 2px solid var(--c-ink); border-bottom: 0; font-weight: 800; }

/* 막대 그래프(비율 예시용): <div class="bar"><span style="--v:40%"></span></div> */
.bar-list { display: grid; gap: .875rem; }
.bar-list__row { display: grid; gap: .375rem; }
.bar-list__label { display: flex; justify-content: space-between; gap: 1rem; font-size: .9375rem; font-weight: 700; }
.bar-list__label span:last-child { font-variant-numeric: tabular-nums; color: var(--c-text-2); }
.bar { height: .75rem; overflow: hidden; border-radius: 999px; background: var(--c-peach); }
.bar > span { display: block; width: var(--v, 0%); height: 100%; border-radius: inherit; background: var(--c-orange-deep); }

/* 아코디언 (FAQ): main.js가 .accordion__btn 클릭 시 aria-expanded·hidden 전환 */
.accordion { border-top: 2px solid var(--c-ink); }
.accordion__item { border-bottom: 1px solid var(--c-line); }
.accordion__head { margin: 0; font-size: inherit; }
.accordion__btn {
  display: flex; align-items: center; gap: .875rem; width: 100%; min-height: 3.75rem;
  padding: 1rem .25rem; text-align: left; font-size: 1.0625rem; font-weight: 700; line-height: 1.5;
}
.accordion__btn:hover { color: var(--c-orange-deep); }
.accordion__q { flex: none; font-weight: 800; color: var(--c-orange-deep); }
.accordion__label { flex: 1; min-width: 0; }
.accordion__ico { flex: none; margin-left: auto; color: var(--c-orange-deep); transition: transform .2s; }
.accordion__btn[aria-expanded="true"] .accordion__ico { transform: rotate(180deg); }
.accordion__panel { padding: 0 .25rem 1.25rem 1.75rem; color: var(--c-text-2); }
.accordion__panel p + p { margin-top: .5rem; }

/* 타임라인 (연혁 등): 실제 연도를 모르면 '예시' 배지를 붙임 */
.timeline { position: relative; display: grid; padding-left: 1.75rem; }
.timeline::before { content: ""; position: absolute; left: .4375rem; top: .5rem; bottom: .5rem; width: 2px; background: var(--c-peach); }
.timeline__item { position: relative; display: grid; gap: .25rem; padding-bottom: 2rem; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: ""; position: absolute; left: -1.75rem; top: .375rem; width: 1rem; height: 1rem;
  border: 3px solid var(--c-orange); border-radius: 50%; background: var(--c-white);
}
.timeline__year { font-size: 1.25rem; font-weight: 800; color: var(--c-orange-deep); font-variant-numeric: tabular-nums; line-height: 1.4; }
.timeline__title { font-size: 1.0625rem; font-weight: 700; }
.timeline__text { font-size: .9375rem; color: var(--c-text-2); }

/* 조직도: 상위 노드 → 연결선 → 부서 카드 */
.org { display: grid; justify-items: center; }
.org__node {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .125rem;
  min-width: 11rem; min-height: 3.5rem; padding: .75rem 1.5rem; border-radius: var(--r-control);
  border: 2px solid var(--c-line); background: var(--c-white); text-align: center; font-weight: 800;
}
.org__node small { font-size: .8125rem; font-weight: 500; color: inherit; opacity: .85; }
.org__node--top { border-color: transparent; background: var(--c-warm-dark); color: var(--c-white); }
.org__node--mid { border-color: transparent; background: var(--c-orange); color: var(--c-ink); }
.org__line { display: block; width: 2px; height: 1.5rem; background: var(--c-orange); }
.org__depts { display: grid; gap: .75rem; width: 100%; margin-top: .25rem; padding-top: 1.5rem; border-top: 2px solid var(--c-orange); }

/* 단계 (입양 절차·봉사 절차 등): <ol class="steps"><li class="step"> */
.steps { display: grid; gap: .75rem; counter-reset: step; }
.step {
  position: relative; padding: 1.25rem 1.25rem 1.25rem 4.25rem; counter-increment: step;
  border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-white);
}
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 1.25rem; top: 1.25rem;
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--c-peach); font-size: .875rem; font-weight: 800; color: var(--c-orange-deep);
  font-variant-numeric: tabular-nums;
}
.step__title { font-size: 1.0625rem; font-weight: 800; line-height: 1.45; }
.step__text { margin-top: .25rem; font-size: .9375rem; color: var(--c-text-2); }

/* 6) 폼 (밝은 바탕) ---------------------------------------------------------
   style.css의 .field / .field__label / .field__input / .field__error / .check는
   어두운 뉴스레터용이라, .form-card 안에서 밝은 바탕용으로 다시 칠함 */
.form-card {
  padding: 1.5rem 1.25rem; border: 1px solid #F1E4DA; border-radius: var(--r-card);
  background: var(--c-white); box-shadow: var(--shadow-soft);
}
.form-card__title { font-size: var(--fs-h3); font-weight: 800; }
.form-card__lead { margin-top: .375rem; font-size: .9375rem; color: var(--c-text-2); }
.form-card .form-grid { margin-top: 1.5rem; }
.form-card .form-grid:first-child { margin-top: 0; }
.form-grid { display: grid; gap: 1.25rem; }
.form-grid > fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.form-card .req { color: var(--c-orange-deep); }
.form-card .field__input,
.field__select,
.field__textarea {
  width: 100%; min-height: 3.25rem; padding: .75rem 1rem;
  border: 2px solid var(--c-line); border-radius: var(--r-control); background: var(--c-white); color: var(--c-ink);
  font-size: 1rem; line-height: 1.5;
}
.form-card .field__input { height: auto; }
.field__textarea { min-height: 8.5rem; resize: vertical; }
.field__select {
  appearance: none; -webkit-appearance: none; padding-right: 2.75rem;
  background: var(--c-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23222222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 1rem center / 1.125rem no-repeat;
}
.form-card .field__input:hover, .field__select:hover, .field__textarea:hover { border-color: #9A9A9A; }
.form-card .field__input:focus, .field__select:focus, .field__textarea:focus { border-color: var(--c-ink); }
.form-card [aria-invalid="true"].field__input,
.field__select[aria-invalid="true"],
.field__textarea[aria-invalid="true"] { border-color: var(--c-error); background-color: #FFF8F7; }
.form-card .field__error { color: var(--c-error); }
.field__help { margin-top: .375rem; font-size: .875rem; color: var(--c-sub); }
.form-legend--block { margin-bottom: .625rem; font-size: .9375rem; font-weight: 600; }
.form-card .check__box { border-color: #767676; }
.form-card .check__input:checked + .check__label .check__box { border-color: var(--c-orange-deep); background: var(--c-orange-deep); color: var(--c-white); }
.form-card .check__input:focus-visible + .check__label .check__box { outline-color: var(--c-ink); }
.form-card .check__input[aria-invalid="true"] + .check__label .check__box { border-color: var(--c-error); }
.form-card .check__more { color: var(--c-text-2); }
.check > .field__error { flex: 1 1 100%; margin-top: 0; }
.terms-box { margin: .25rem 0 .5rem; padding: .875rem 1rem; border-radius: var(--r-control); background: var(--c-cream); font-size: .8125rem; line-height: 1.6; color: var(--c-text-2); }

/* 선택 버튼형 라디오: <input class="sr-input" type="radio"><label class="pill-option"> */
.pill-group { position: relative; display: flex; flex-wrap: wrap; gap: .5rem; }
.pill-option {
  display: inline-flex; align-items: center; gap: .375rem; min-height: 2.75rem; padding: 0 1.125rem;
  border: 2px solid var(--c-line); border-radius: 999px; background: var(--c-white);
  font-size: .9375rem; font-weight: 600; cursor: pointer; transition: border-color .2s, background-color .2s;
}
.pill-option:hover { border-color: var(--c-orange-deep); }
.sr-input:checked + .pill-option { border-color: var(--c-orange-deep); background: var(--c-peach); font-weight: 800; }
.sr-input[aria-invalid="true"] + .pill-option { border-color: var(--c-error); }

.form-alert { margin: 0; font-size: .9375rem; font-weight: 600; color: var(--c-error); }
.form-alert:not(:empty) { margin-top: 1rem; padding: .75rem 1rem; border: 1px solid var(--c-error); border-radius: var(--r-control); background: #FFF8F7; }
.form-done:not(:empty) { margin-top: 1rem; padding: .875rem 1rem; border: 1px solid var(--c-orange-deep); border-radius: var(--r-control); background: var(--c-peach); font-weight: 600; }
.form-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.form-note { margin-top: .75rem; font-size: .8125rem; color: var(--c-sub); }

/* 7) CTA 띠 · 보조 요소 ------------------------------------------------------ */
/* 메인 후원 띠(전폭 오렌지 + 하트 워터마크)를 이어받은 페이지 하단 CTA */
.cta-band { position: relative; overflow: clip; padding: 3rem 0; background: var(--c-orange); color: var(--c-ink); }
.cta-band::before {
  content: ""; position: absolute; right: -5rem; bottom: -7rem; width: 22rem; height: 22rem; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.6 4.5 13.3a4.9 4.9 0 0 1 0-6.9 4.8 4.8 0 0 1 6.9 0l.6.6.6-.6a4.8 4.8 0 0 1 6.9 0 4.9 4.9 0 0 1 0 6.9z' fill='%23ffffff' fill-opacity='.16'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cta-band__inner { position: relative; display: grid; gap: 1.5rem; align-items: center; }
.cta-band__title { font-size: var(--fs-h2); font-weight: 800; line-height: 1.3; letter-spacing: -.02em; }
.cta-band__text { margin-top: .5rem; font-weight: 500; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 767.98px) { .cta-band__actions .btn { flex: 1 1 100%; } }
.cta-band .btn--outline { border-color: var(--c-ink); }
/* 오렌지 면 위 주 버튼: 잉크 바탕 + 흰 글자 (딥 오렌지는 오렌지 면과 구분이 약함) */
.btn--ink { background: var(--c-ink); color: var(--c-white); }
.btn--ink:hover { background: #000; }

/* 예시 데이터 표시 */
.sample-badge {
  display: inline-flex; align-items: center; min-height: 1.375rem; padding: 0 .5rem; margin-left: .375rem;
  border: 1px dashed currentColor; border-radius: 999px; vertical-align: middle;
  font-size: .6875rem; font-weight: 700; letter-spacing: .02em; line-height: 1; color: var(--c-sub);
}
.sub-section--dark .sample-badge { color: rgba(255, 255, 255, .75); }
/* 안내 박스 (메인 후원 모듈의 임팩트 박스와 같은 형태) */
.callout {
  display: flex; gap: .625rem; align-items: flex-start;
  padding: 1rem 1.125rem; border-left: 4px solid var(--c-orange); border-radius: 0 var(--r-control) var(--r-control) 0;
  background: var(--c-cream); font-size: .9375rem; line-height: 1.6;
}
.sub-section--cream .callout { background: var(--c-white); }
.callout .ico { flex: none; margin-top: .125rem; color: var(--c-orange-deep); }
.callout strong { font-weight: 800; }

/* 8) 반응형 ---------------------------------------------------------------- */
@media (min-width: 768px) {
  .sub-hero__inner {
    grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem;
    padding-top: calc(var(--header-h) + 1.75rem); padding-bottom: 3.5rem;
  }
  .sub-hero__art {
    position: relative; display: grid; place-items: center; align-self: end;
    width: 9.5rem; aspect-ratio: 1; margin-bottom: .25rem;
    border-radius: 50%; background: var(--c-peach); color: var(--c-warm-dark);
    box-shadow: 0 0 0 1rem rgba(255, 227, 209, .08), 0 0 0 2rem rgba(255, 227, 209, .04);
  }
  .sub-hero__art::before {
    content: ""; position: absolute; top: 6%; right: 2%; width: 34%; aspect-ratio: 1;
    border-radius: 50%; background: var(--c-orange);
  }
  .sub-section { padding: 5rem 0; }
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; }
  .feature .media-panel { aspect-ratio: 16 / 9; }
  .card-grid--2, .card-grid--3, .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .info-list__row { grid-template-columns: 11rem minmax(0, 1fr); gap: 1.5rem; padding: 1.125rem .5rem; }
  .report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .org__depts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-card { padding: 2.25rem; }
  .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid--2 > .field--full, .form-grid--2 > fieldset, .form-grid--2 > .check { grid-column: 1 / -1; }
  .cta-band { padding: 3.5rem 0; }
  .timeline { padding-left: 0; }
  .timeline::before { left: 8.5625rem; }
  .timeline__item { grid-template-columns: 7rem minmax(0, 1fr); column-gap: 3.25rem; }
  .timeline__item::before { left: 8.125rem; }
  .timeline__year { grid-row: 1 / 3; text-align: right; }
}

/* 태블릿: 2단(.split) 안의 좁은 정의 목록은 항목명 위·내용 아래로 쌓음 */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .split .info-list__row { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
}

@media (min-width: 1024px) {
  .sub-hero__inner { min-height: 22rem; padding-bottom: 4rem; }
  .sub-hero__art { width: 13rem; margin-right: 1rem; }
  .feature { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3.5rem; }
  .feature--reverse .feature__media { order: 2; }
  .feature .media-panel { aspect-ratio: 4 / 3; }
  .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .split--wide { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 4rem; }
  .steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps--4 .step { padding: 4.25rem 1.25rem 1.5rem; }
  .steps--4 .step::before { top: 1.25rem; }
  .org__depts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cta-band__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; }
  .lnb__link { padding: 0 1.125rem; font-size: 1rem; }
}

@media (min-width: 1200px) {
  .sub-section { padding: 6rem 0; }
  .report-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}