@charset "UTF-8";
/* ============================================================
   서울미래치과 타이포그래피 기준 (2026 적용)
   - 미리보기(docs/typography-sections.html)에서 확정한 값
   - footer.html에서 마지막에 로드되어 기존 스타일 위에 적용됨
   - 적용 범위: 콘텐츠 영역(#sub, #main). 헤더/푸터 등 공통 chrome은 미변경
   - 색상은 컨테이너에만 지정 → 흰색 등 명시된 글자색은 그대로 유지
   ============================================================ */

/* 0. 본문 기본 색 — 컨테이너 상속 (명시된 색은 덮지 않음) */
#sub, #main{color:#262626;}

/* 1. 폰트 패밀리 — 제목 Pretendard / 본문 Noto Sans KR */
#sub h1, #sub h2, #sub h3, #sub h4, #sub h5, #sub h6,
#main h1, #main h2, #main h3, #main h4, #main h5, #main h6{
  font-family:'Pretendard','Noto Sans KR',sans-serif;
  letter-spacing:-0.03em;
}
#sub p, #sub dd, #sub li, #sub td, #sub .faq_a, #sub .text,
#main p, #main dd{
  font-family:'Noto Sans KR','Pretendard',sans-serif;
}

/* 2. 본문 가독성 — 굵기 400 / 행간 1.6 / 자간(크기 연동) */
#sub p, #sub dd,
#main p, #main dd{
  font-weight:400;
  line-height:1.6;
  letter-spacing:-0.05em;     /* 18px 기준 */
}
#sub .font_20, #main .font_20{letter-spacing:-0.09em;}   /* 20px */
#sub .font_18, #main .font_18{letter-spacing:-0.05em;}   /* 18px */
#sub .font_16, #main .font_16{letter-spacing:-0.03em;}   /* 16px */

/* 3. 제목/소제목 강조 (서브 콘텐츠) */
#sub .title h2{font-weight:800;}
#sub .title h5,
#sub section > .inwrap > h5{font-size:27px; font-weight:600;}

/* 4. 컴포넌트별 조정 */
#sub .num_list dt{font-weight:700;}
#sub .num_list dd{line-height:1.55;}
#sub .circle_list p.bg{line-height:1.25;height: 126px;}
#sub .check_list li{line-height:1.75;}
#sub table td{line-height:1.7;}

/* 5. 양끝정렬 → 왼쪽정렬 (한글 가독성) */
#sub .left_align{text-align:left !important;}

/* 6. 본문 단락 줄길이 제한 (한글 35~45자) */
#sub section > .inwrap > p{max-width: 950px;margin-left:auto;margin-right:auto;}

/* ============================================================
   7. 반응형 — 위 기준값(27px 등)이 모바일/태블릿에서 그대로 적용되지
      않도록 화면 폭에 맞춰 축소한다. (이 파일이 마지막 로드라 필수)
   ============================================================ */

/* 태블릿 / 좁은 창 (768~1200px) */
@media (max-width: 1200px){
  #sub .title h5,
  #sub section > .inwrap > h5{font-size:22px;}
}

/* 모바일 (≤767px) */
@media (max-width: 767px){
  #sub .title h5,
  #sub section > .inwrap > h5{font-size:17px; font-weight:600;}
  /* 데스크탑 고정 높이(126px) → 모바일에선 내용 높이에 맞춤 */
  #sub .circle_list p.bg{height: 83px;}
}