/* 콘텐츠 페이지 공통 '정돈형' 스타일 — 내용·구조는 그대로 두고 블록들의 테두리·간격·소제목 리듬만 하나로 통일.
   - .docs-content 안에서만 적용되므로 홈(index)·계산기/대학찾기(tools)에는 영향 없음.
   - style.css 뒤에 로드되어 해당 블록 스타일만 덧입힌다. 빼면 즉시 원상복구. */

/* 1) 번호 섹션을 동일한 흰색 패널로 */
.docs-content .subpage-section {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 1.6rem 1.9rem 1.9rem;
  margin-bottom: 1.75rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .04);
}

/* 2) 섹션 제목: 왼쪽 막대 대신 밑줄 헤더로 통일 */
.docs-content .subpage-section h2 {
  border-left: 0;
  padding: 0 0 .9rem 0;
  margin: 0 0 1.3rem;
  font-size: 1.3rem;
  border-bottom: 1px solid #eef0ee;
}

/* 3) 소제목(h4) 통일: 같은 초록 막대 + 같은 간격 */
.docs-content .subpage-section h4 {
  border-left: 3px solid var(--accent);
  padding-left: .55rem;
  margin: 1.9rem 0 1rem !important;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--heading);
}
.docs-content .subpage-section h4 .bi { color: var(--accent-dark); }

/* 4) 모든 박스류 테두리 둥글기 통일 */
.docs-content .info-card,
.docs-content .vs-box,
.docs-content .checklist-box,
.docs-content .media-intro.media-boxed,
.docs-content .accordion-item { border-radius: 12px !important; }

/* callout(콜아웃)은 라운드 없이 각진 사각 — 사이트 전체 공통 */
.docs-content .callout { border-radius: 0 !important; }

.docs-content .info-card { border: 1px solid #e5e7eb !important; box-shadow: none !important; }
.docs-content .media-intro.media-boxed { background: #fbfcfb; }

/* 5) 비교표 통일 */
.docs-content .compare-table { border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.docs-content .compare-table th,
.docs-content .compare-table td { border-color: #eef0ee; }
.docs-content .compare-table thead th { background: #f3f6f4; }

/* 6) 2단 카드 그리드 간격 통일 */
.docs-content .row.g-3 { --bs-gutter-x: 1.25rem; --bs-gutter-y: 1.25rem; }

/* 7) FAQ 아코디언 통일 */
.docs-content .accordion-item { border: 1px solid #e5e7eb !important; margin-bottom: .5rem; overflow: hidden; }

/* 8) 통계 칩 */
.docs-content .stat-highlight { border-radius: 10px; }

/* 9) 블록 사이 수직 간격 통일 */
.docs-content .subpage-section > .info-card,
.docs-content .subpage-section > .callout,
.docs-content .subpage-section > .timeline,
.docs-content .subpage-section > .compare-table,
.docs-content .subpage-section > .accordion,
.docs-content .subpage-section > .row,
.docs-content .subpage-section > p { margin-top: 1.2rem; margin-bottom: 1.2rem; }

/* 10) 아이콘 + 제목/글자 세로 가운데 정렬 (인라인 아이콘이 기준선에 걸리는 문제) */
.docs-content .info-card-title,
.docs-content h2:has(> .bi:first-child),
.docs-content h3:has(> .bi:first-child),
.docs-content h4:has(> .bi:first-child),
.docs-content h5:has(> .bi:first-child) { display: flex; align-items: center; }
.docs-content .info-card-title > .bi:first-child,
.docs-content h2 > .bi:first-child,
.docs-content h3 > .bi:first-child,
.docs-content h4 > .bi:first-child,
.docs-content h5 > .bi:first-child { flex: 0 0 auto; line-height: 1; }
/* 인라인 아이콘(문장 앞·중간)도 글자 세로 중앙에 맞춤 */
.docs-content p > .bi,
.docs-content li > .bi,
.docs-content .docs-lead > .bi,
.docs-content .callout > .bi,
.docs-content .gl-note > .bi { vertical-align: -0.13em; }

/* ===========================================================
   [시범] 블로그형 섹션 흐름 — .docs-content.section-flow 페이지에만 적용
   (korea.php 시범. 다른 페이지는 위의 패널형 그대로 유지)
   1) 번호 섹션을 감싸던 흰 패널(테두리·그림자·배경) 제거 → 글이 쭉 이어지는 형태
   2) 섹션 사이를 '양끝 페이드 가로선 + 중앙 마름모' 장식 구분선으로 분리
   =========================================================== */
.docs-content.section-flow .subpage-section {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-bottom: 0;
}

/* 섹션과 섹션 사이 간격 (구분선 없이 여백으로만 분리) */
.docs-content.section-flow .subpage-section + .subpage-section {
  margin-top: 3.6rem;
}

/* --- A타입: 본문 박스 장식 덜어내기 + 타이포·여백 정돈 --- */

/* 대표 이미지(미디어 히어로): 큰 그림자 제거, 테두리 최소화 */
.docs-content.section-flow .media-hero {
  box-shadow: none;
  border-color: #eef0ee;
}

/* 정보 카드: 그림자 제거 + 테두리 연하게 (글 위주로 담백) */
.docs-content.section-flow .info-card {
  box-shadow: none !important;
  border-color: #eef0ee !important;
}

/* 통계 카드: 테두리 대신 아주 연한 면으로 (담백한 칩) */
.docs-content.section-flow .info-stat-card {
  border-color: transparent;
  background: #f5f8f6;
}

/* 본문 글을 블로그처럼 — 글자 살짝 키우고 줄간격·문단 간격 넉넉히 */
.docs-content.section-flow .subpage-section p,
.docs-content.section-flow .subpage-section li {
  font-size: 1.04rem;
  line-height: 1.95;
}
.docs-content.section-flow .subpage-section > p {
  margin: 1.35rem 0;
}

/* 섹션 제목: 살짝 키우고 아래 여백 확보 */
.docs-content.section-flow .subpage-section h2 {
  font-size: 1.42rem;
  margin-bottom: 1.5rem;
}

/* ===========================================================
   강조 정보 칩(span.stat-highlight) → 테이블형 행으로 통일 (사이트 전역)
   - 노란 알약칩을 없애고 [아이콘 | 라벨 | 값(우측)] 한 줄 + 행 구분선
   - div.stat-highlight(통계 카드형, .stat-value 포함)는 대상 아님 → span만 겨냥
   =========================================================== */
/* 칩 묶음 컨테이너를 '강조 요약 패널'로 — 본문 표와 헷갈리지 않게 박스로 구분 */
.docs-content div:has(> span.stat-highlight) {
  background: #f4faf6;
  border: 1px solid #dcebe1;
  border-left: 4px solid var(--accent);
  padding: 14px 20px 8px;
  margin: 1.7rem 0;
}
/* 패널 상단 타이틀 — 글자는 번역 시스템이 채움(data-i18n=shl_summary, 스크립트가 자동 삽입) */
.docs-content div:has(> span.stat-highlight) > .sh-title {
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--accent-dark);
  margin-bottom: 8px;
}
.docs-content div:has(> span.stat-highlight) > .sh-title::before {
  content: "◆ ";   /* 장식 기호(언어 무관) */
}

.docs-content span.stat-highlight {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid #e4efe8;
  border-radius: 0;
  padding: 12px 2px;
  margin: 0;
  font-size: .95rem;
  font-weight: 400;
  color: var(--text);
}
.docs-content span.stat-highlight i {
  flex: 0 0 auto;
  width: 22px;
  text-align: center;
  font-size: 1.15rem;
  color: var(--accent-dark);
}
.docs-content span.stat-highlight strong {
  margin-left: auto;
  padding-left: 14px;
  font-weight: 800;
  color: var(--heading);
  text-align: right;
}
/* 한 묶음의 마지막 행은 구분선 제거 */
.docs-content span.stat-highlight:last-child {
  border-bottom: 0;
}