/* ===== 학교폭력센터 페이지 (contract.css 를 기반으로 한 추가 스타일) ===== */

/* 플로팅 버튼 노출 규칙 (영문계약서 페이지와 동일) */
.page-template-school-page .floating-btn.is-contract,
.page-template-school-page .floating-divider.is-contract { display: none; }
.page-template-school-page .floating-btn.is-not-contract { display: flex; }

/* Hero slider — 학교 배경 이미지 (2장, 각 6초 교차)
   기본 slideShow 키프레임은 3장(33% 노출) 기준이라 2장용(50% 노출)을 별도 정의 */
@keyframes spSlideShow {
    0% { opacity: 0; transform: scale(1.05); } 5% { opacity: 1; transform: scale(1); }
    50% { opacity: 1; transform: scale(1); } 55% { opacity: 0; transform: scale(1.05); } 100% { opacity: 0; }
}
.page-template-school-page .hero .slide { animation: spSlideShow 12s infinite; background-color: #1a2233; }
.page-template-school-page .hero .slide:nth-child(1) { background-image: url('../images/wander-fleur-1lmGTHdQdjM-unsplash.jpg'); animation-delay: 0s; }
.page-template-school-page .hero .slide:nth-child(2) { background-image: url('../images/taylor-flowe-4nKOEAQaTgA-unsplash.jpg'); animation-delay: 6s; }
.page-template-school-page .hero .slide:nth-child(3) { display: none; }

/* Hero 카피 */
.sp-juvenile, .sp-location { scroll-margin-top: 80px; }
.hero-lead { color: var(--text-light); font-size: 1.1rem; letter-spacing: 0.5px; margin-bottom: 1.2rem; opacity: 0.9; }
.hero-points { list-style: none; margin: 1.8rem auto 2.2rem; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; width: fit-content; text-align: left;
    opacity: 0; transform: translateY(30px); animation: fadeUp 1s forwards 1.1s; }
/* 등장 순서 유지: h1(0.5s) → p(0.8s) → points(1.1s) → 버튼(1.4s) */
.page-template-school-page .hero-btn { animation-delay: 1.4s; }
.hero-points li { color: var(--text-light); font-size: 0.95rem; opacity: 0.85; }
.hero-points li::before { content: '\2713'; color: var(--accent-color); margin-right: 0.55rem; font-weight: 700; }

/* 소개 스탯 — 금색(h3) 텍스트 축소: 내용이 2줄(명시적 <br>)을 넘지 않도록 */
.page-template-school-page .intro-stats .stat-item h3 { font-size: 1.15rem; white-space: nowrap; }
/* 스탯 4개 한 줄 배치: 부모(.ct-intro-body, max 800px)보다 넓어질 수 있게
   내용 폭 기준으로 잡고 페이지 중앙 정렬. 화면이 좁으면 max-width에 걸려 자동 줄바꿈 */
.page-template-school-page .intro-stats {
    gap: 5rem;
    width: max-content;
    max-width: calc(100vw - 3rem);
    margin-left: 50%;
    transform: translateX(-50%);
}

/* 프로세스 스텝 내 상세 목록 */
.page-template-school-page .process-list { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.page-template-school-page .process-step p { font-weight: 600; color: var(--primary-color); }
.step-detail { list-style: none; margin: 1rem 0 0; padding: 0.9rem 0 0; border-top: 1px solid var(--edge-color); text-align: left; }
.step-detail li { font-size: 0.85rem; color: var(--text-color-secondary); line-height: 1.65; padding-left: 0.9rem; position: relative; word-break: keep-all; margin-bottom: 0.35rem; }
.step-detail li:last-child { margin-bottom: 0; }
.step-detail li::before { content: '\2013'; position: absolute; left: 0; color: var(--accent-color); }

/* 소단원 제목 */
.sp-sub-title { font-family: var(--font-serif); font-size: 1.5rem; color: var(--primary-color); text-align: center; margin: 4.5rem 0 2rem; }
.sp-sub-title small { display: block; font-size: 0.85rem; color: var(--text-color-tertiary); font-family: var(--font-sans); margin-top: 0.3rem; }
.sp-juvenile .sp-sub-title:first-of-type { margin-top: 0; }

/* 연령 분류 카드 */
.sp-age-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; max-width: 1000px; margin: 0 auto; }
.sp-age-card { background: var(--back-color-white); border: 1px solid var(--edge-color); border-top: 3px solid var(--accent-color); padding: 1.8rem 1.5rem; text-align: center; box-shadow: 0 5px 15px var(--shadow-light); }
.sp-age-range { display: inline-block; font-size: 0.82rem; color: var(--accent-color-dark); font-weight: 700; letter-spacing: 0.5px; margin-bottom: 0.6rem; }
.sp-age-card h4 { font-family: var(--font-serif); font-size: 1.3rem; color: var(--primary-color); margin-bottom: 0.5rem; }
.sp-age-card p { color: var(--text-color-secondary); font-size: 0.92rem; }

/* 안내/강조 박스 */
.sp-note { max-width: 1000px; margin: 2rem auto 0; background: var(--accent-color-box-back); border: 1px solid var(--accent-color-edge); border-left: 4px solid var(--accent-color); padding: 1.4rem 1.8rem; }
.sp-note strong { display: block; color: var(--primary-color); margin-bottom: 0.7rem; }
.sp-note ul { list-style: none; margin: 0; padding: 0; }
.sp-note ul li { color: var(--text-color-primary); font-size: 0.95rem; line-height: 1.7; padding-left: 1rem; position: relative; word-break: keep-all; }
.sp-note ul li::before { content: '\2013'; position: absolute; left: 0; color: var(--accent-color); }

/* 단계 플로우 (세로 넘버 리스트) */
.sp-flow { list-style: none; counter-reset: spflow; max-width: 1000px; margin: 0 auto; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.sp-flow li { counter-increment: spflow; background: var(--back-color-white); border: 1px solid var(--edge-color); padding: 1.1rem 1.4rem 1.1rem 4rem; position: relative; box-shadow: 0 3px 10px var(--shadow-light); }
.sp-flow li::before { content: counter(spflow); position: absolute; left: 1.2rem; top: 50%; transform: translateY(-50%); width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--primary-color); color: var(--accent-color); font-weight: 700; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; }
.sp-flow li strong { display: block; color: var(--primary-color); font-size: 1rem; margin-bottom: 0.2rem; }
.sp-flow li span { color: var(--text-color-secondary); font-size: 0.9rem; line-height: 1.65; word-break: keep-all; }

/* 센터 구성원 — 사진 카드만 가로 배치 (상세 소개 없음) */
.sp-team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 280px)); gap: 2rem; justify-content: center; max-width: 1100px; margin: 0 auto; }

/* 표 (보호처분) */
.sp-table-wrap { max-width: 1000px; margin: 0 auto; overflow-x: auto; }
.sp-table { width: 100%; border-collapse: collapse; background: var(--back-color-white); box-shadow: 0 5px 15px var(--shadow-light); }
.sp-table th, .sp-table td { border: 1px solid var(--edge-color); padding: 0.85rem 1.1rem; text-align: center; font-size: 0.93rem; color: var(--text-color-primary); }
.sp-table thead th { background: var(--primary-color); color: var(--text-light); font-weight: 600; letter-spacing: 0.5px; }
.sp-table tbody tr:nth-child(even) { background: var(--back-color-light); }
.sp-table tbody td:first-child { color: var(--accent-color-dark); font-weight: 700; white-space: nowrap; }

/* 상담 신청 (다크 섹션) 헤더 텍스트 */
.sp-location .section-header h2,
.sp-location .section-header p { color: var(--text-light); }

@media (max-width: 700px) {
    .sp-flow li { padding-left: 3.4rem; }
    .sp-sub-title { margin-top: 3.2rem; }
}