@charset "UTF-8";
/* ==========================================================================
   동물자유연대 리디자인 — 참여 페이지 전용 (css/page-participate.css)
   style.css 토큰·컴포넌트 + sub.css 서브 컴포넌트 위에, 이 페이지에만 필요한 보정만 추가
   1) 제보·서명 2단 배치  2) 폼 보정  3) 서명 카드  4) 봉사활동  5) 게시판(아코디언 목록)
   ========================================================================== */

/* 1) 2단 배치 (안내 | 폼) */
.part-urgent { margin-bottom: 2rem; }
.part-split { align-items: start; }
.part-split--center { align-items: center; }
.part-split__aside { min-width: 0; }
.split .part-steps { margin-top: 1.25rem; grid-template-columns: minmax(0, 1fr); }
.part-tip { margin-top: 1.5rem; padding: 1.25rem 1.375rem; border-radius: var(--r-card); background: var(--c-cream); }
.part-tip__title { margin-bottom: .75rem; font-size: 1rem; font-weight: 800; }
.part-split__aside .prose { margin-top: .75rem; }
.part-checks { margin-top: 1.25rem; }
.part-split__aside > .note { margin-top: 1rem; }

/* 2) 폼 보정 */
.form-card .req--opt { color: var(--c-sub); }
.form-card .terms-box { margin: -.75rem 0 0; }
.form-grid--2 > .terms-box { grid-column: 1 / -1; }
.form-card .form-actions .btn { min-width: 10rem; }

/* 3) 진행 중 서명 카드 */
.petition-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.petition-card__top .tag { margin-top: .25rem; }
.petition-card .info-card__foot .btn { margin-top: .25rem; }

/* 4) 봉사활동 */
.part-media { aspect-ratio: 560 / 460; }
.part-media__ill, .part-media__ill > svg { width: 100%; height: 100%; }
.part-info { margin-top: 1.5rem; }
.part-info dd .sample-badge { margin-left: .5rem; }
.part-ext {
  display: inline-flex; align-items: center; gap: .25rem;
  font-weight: 700; color: var(--c-orange-deep); text-decoration: underline; text-underline-offset: 3px;
}
.part-ext:hover { color: var(--c-orange-hover); }
.part-cta { display: flex; justify-content: center; margin-top: 2rem; }
.part-note { margin-top: .75rem; }
.part-form { margin-top: 2rem; }

/* 5) 게시판·목록형 아코디언: 분류 태그 · 제목 · 날짜 한 줄 (모바일은 2줄) */
#board .tabpanel { padding-top: 1rem; }
.post-acc .accordion__btn {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "tag date ico" "title title ico";
  align-items: center; gap: .375rem .75rem;
}
.post-acc .tag { grid-area: tag; }
.post-acc .accordion__label { grid-area: title; }
.post-acc__date { grid-area: date; justify-self: end; font-size: var(--fs-meta); font-weight: 500; color: var(--c-sub); font-variant-numeric: tabular-nums; }
.post-acc .accordion__ico { grid-area: ico; }
.post-acc .accordion__panel { padding-left: .25rem; }
.post-acc .accordion__panel > * + * { margin-top: .625rem; }
.post-acc__by { font-size: var(--fs-meta); color: var(--c-sub); }
.post-acc__answer { padding: .875rem 1rem; border-radius: var(--r-control); background: var(--c-cream); color: var(--c-ink); }
.post-acc__answer strong { margin-right: .25rem; font-weight: 800; color: var(--c-orange-deep); }
.post-acc .text-link { margin-top: .25rem; }
.accordion__item:target .accordion__btn { color: var(--c-orange-deep); }

.part-official { margin-top: 2rem; }
.part-official__body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; flex: 1; min-width: 0; }
.part-official__body p { flex: 1 1 18rem; }

@media (min-width: 768px) {
  .post-acc .accordion__btn { grid-template-columns: 5.75rem minmax(0, 1fr) auto auto; grid-template-areas: "tag title date ico"; gap: 1.25rem; }
  .post-acc .accordion__panel { padding-left: 7.25rem; padding-right: 3rem; }
}
@media (min-width: 1024px) {
  .part-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3.5rem; }
  .part-split--center { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .part-form { max-width: 60rem; margin-inline: auto; }
}