/* 원본 위에 얹는 보정 레이어.
   레이아웃·색·구조는 그대로 두고 조판(글자 크기·행간·여백·버튼)만 정돈한다. */

/* 1) 본문 가독성 — 원본은 14px/1.7 로 한글에 작다 */
#page-container .et_pb_section:not(.et_pb_section_0),
#page-container .et_pb_section:not(.et_pb_section_0) p,
#page-container .et_pb_section:not(.et_pb_section_0) li {
  font-size: 16px;
  line-height: 1.8;
  word-break: keep-all;
}
#page-container .et_pb_text_inner p:not(:last-child) {
  margin-bottom: 0.9em;
}

/* 2) 제목 — 자간을 좁히고 행간을 줄여 덩어리로 읽히게 */
#page-container h1,
#page-container h2,
#page-container h3,
#page-container h4 {
  letter-spacing: -0.025em;
  line-height: 1.32;
  word-break: keep-all;
}
#page-container .et_pb_section:not(.et_pb_section_0) h2 {
  font-weight: 700;
}

/* 3) 섹션 여백 리듬 통일 (원본은 섹션마다 제각각) */
#page-container .et_pb_section:not(.et_pb_section_0) {
  padding-top: 76px;
  padding-bottom: 76px;
}
#page-container .et_pb_section.et_pb_fullwidth_section,
#page-container .et_pb_section_0 {
  padding-top: 0;
  padding-bottom: 0;
}
#page-container .et_pb_row {
  padding-top: 0;
  padding-bottom: 0;
}

/* 4) 버튼 — 크기·정렬을 하나로 */
#page-container .et_pb_button {
  font-size: 15px;
  font-weight: 600;
  border-radius: 4px;
  letter-spacing: 0;
}

/* 5) 이미지 — 넘침 방지와 하단 여백 정리 */
#page-container img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
#page-container .et_pb_image {
  margin-bottom: 0;
}

/* 6) 링크 밑줄 위치 */
#page-container .et_pb_text_inner a {
  text-underline-offset: 3px;
}

/* 7) 모바일 여백 */
@media (max-width: 980px) {
  #page-container .et_pb_section:not(.et_pb_section_0) {
    padding-top: 52px;
    padding-bottom: 52px;
  }
  #page-container,
  #page-container p,
  #page-container li {
    font-size: 15.5px;
  }
}

/* 8) 본문 가독성 강화 — 원본 Noto Sans KR 은 유지하되 Pretendard 를 앞에 두고,
      크기·색·굵기를 올려 실제로 읽히게 한다. (원본은 14px #666 로 흐렸다) */
#page-container,
#page-container p,
#page-container li,
#page-container span,
#page-container .et_pb_text_inner,
#page-container .et_pb_text_inner * {
  font-family: Pretendard, 'Noto Sans KR', -apple-system, BlinkMacSystemFont,
    'Apple SD Gothic Neo', system-ui, sans-serif;
}
#page-container .et_pb_section:not(.et_pb_section_0) .et_pb_text_inner,
#page-container .et_pb_section:not(.et_pb_section_0) .et_pb_text_inner p,
#page-container .et_pb_section:not(.et_pb_section_0) .et_pb_text_inner li,
#page-container .et_pb_section:not(.et_pb_section_0) .et_pb_text_inner span {
  font-size: 17px;
  line-height: 1.85;
  color: #1f1f1f;
  font-weight: 400;
}
/* 어두운 배경 위 글자는 원래 색을 유지 */
#page-container .et_pb_bg_layout_dark .et_pb_text_inner,
#page-container .et_pb_bg_layout_dark .et_pb_text_inner p,
#page-container .et_pb_bg_layout_dark .et_pb_text_inner span,
#page-container .et_pb_section[class*='dark'] .et_pb_text_inner p {
  color: inherit;
}
#page-container .et_pb_section:not(.et_pb_section_0) h1 { font-weight: 800; }
#page-container h2,
#page-container .et_pb_section:not(.et_pb_section_0) h3 { font-weight: 700; }
@media (max-width: 980px) {
  #page-container .et_pb_text_inner,
  #page-container .et_pb_text_inner p,
  #page-container .et_pb_text_inner li {
    font-size: 16px;
    line-height: 1.8;
  }
}

/* 9) 제목 크기 복원 — 본문 크기 지정이 텍스트 모듈 안 제목까지 눌렀다 */
#page-container .et_pb_section:not(.et_pb_section_0) h1 {
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.25;
}
#page-container .et_pb_section:not(.et_pb_section_0) h2 {
  font-size: clamp(24px, 2.8vw, 32px);
  line-height: 1.3;
  margin-bottom: 14px;
}
#page-container .et_pb_section:not(.et_pb_section_0) h3 {
  font-size: 20px;
  line-height: 1.4;
  margin-bottom: 10px;
}
#page-container .et_pb_section:not(.et_pb_section_0) h4 {
  font-size: 17.5px;
  line-height: 1.45;
}

/* ── 세련도 보정 ────────────────────────────────────────────
   구조·문구·사진은 그대로. 눈에 거슬리는 마감만 다듬는다. */

/* 11) 이미지 — 모서리와 비율을 통일해 들쭉날쭉함 제거 */
#page-container .et_pb_image img,
#page-container .et_pb_gallery_image img {
  border-radius: 6px;
  display: block;
}
#page-container .et_pb_image {
  line-height: 0;
}

/* 12) 컬러 블록 — 안쪽 여백을 넉넉히, 글자 크기를 한 벌로 */
#page-container .et_pb_column[style*='background-color'],
#page-container .et_pb_row[style*='background-color'] {
  padding: 40px 34px !important;
}
#page-container .et_pb_column[style*='background-color'] .et_pb_text_inner,
#page-container .et_pb_column[style*='background-color'] p {
  font-size: 15.5px;
  line-height: 1.7;
}

/* 13) 링크·버튼 hover — 튀지 않는 반응 */
#page-container a {
  transition: color 0.15s ease, opacity 0.15s ease;
}
#page-container .et_pb_button {
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

/* 14) 과한 그림자·테두리 정리 */
#page-container .et_pb_module {
  box-shadow: none;
}

/* 15) 문단 최대폭 — 한 줄이 너무 길어지지 않게 */
#page-container .et_pb_column_4_4 .et_pb_text_inner p,
#page-container .et_pb_column_3_4 .et_pb_text_inner p {
  max-width: 74ch;
}

/* 16) 어두운 박스 안 연락처 — 값이 회색으로 흐려 읽기 어렵다. 흰색·중간 굵기로. */
#page-container .et_pb_section:not(.et_pb_section_0) .et_pb_bg_layout_dark .et_pb_text_inner,
#page-container .et_pb_section:not(.et_pb_section_0) .et_pb_bg_layout_dark .et_pb_text_inner p,
#page-container .et_pb_section:not(.et_pb_section_0) .et_pb_bg_layout_dark .et_pb_text_inner span,
#page-container .et_pb_section:not(.et_pb_section_0) .et_pb_bg_layout_dark .et_pb_text_inner a {
  color: #ffffff !important;
  font-weight: 500;
  opacity: 1;
}
#page-container .et_pb_section:not(.et_pb_section_0) .et_pb_bg_layout_dark h1,
#page-container .et_pb_section:not(.et_pb_section_0) .et_pb_bg_layout_dark h2,
#page-container .et_pb_section:not(.et_pb_section_0) .et_pb_bg_layout_dark h3,
#page-container .et_pb_section:not(.et_pb_section_0) .et_pb_bg_layout_dark h4 {
  color: #ffffff !important;
  font-weight: 700;
}

/* 17) 연락처 값 — 해당 모듈(et_pb_text_13~20)이 흐린 색을 직접 지정하고 있어 명시적으로 덮는다 */
#page-container .et_pb_text_13,
#page-container .et_pb_text_14,
#page-container .et_pb_text_15,
#page-container .et_pb_text_16,
#page-container .et_pb_text_17,
#page-container .et_pb_text_18,
#page-container .et_pb_text_19,
#page-container .et_pb_text_20,
#page-container .et_pb_text_13 *,
#page-container .et_pb_text_14 *,
#page-container .et_pb_text_15 *,
#page-container .et_pb_text_16 *,
#page-container .et_pb_text_17 *,
#page-container .et_pb_text_18 *,
#page-container .et_pb_text_19 *,
#page-container .et_pb_text_20 * {
  color: #ffffff !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}

/* ── 홈 커버 보정 ──────────────────────────────────────────
   커버는 절대배치라 조판(크기·여백)은 건드리지 않는다. 색과 글리프만 고친다. */

/* 18) 버튼 화살표가 '5' 로 보인다 — 그 글리프를 가진 FontAwesome 이 이식본에 없다.
       원본이 같이 쓰는 ETmodules 는 살아 있고 같은 코드가 화살표라 그쪽으로 그린다. */
/* 같은 클래스를 두 번 적어 원본 인라인 규칙(!important)보다 구체성을 높인다 */
body #page-container .et_pb_section .et_pb_button.et_pb_button::after,
#page-container .et_pb_button.et_pb_button::after {
  font-family: ETmodules !important;
}

/* 19) 컬러 블록 — 사진 위 80% 투명이라 흰 글씨가 읽히지 않았다(노랑 위 흰 글씨 1.7:1).
       원본 색은 그대로 두고 불투명도만 올린 뒤, 밝은 블록은 먹색으로 적는다. */
#page-container .et_pb_section_0 .et_pb_row_1 > .et_pb_column_1 { background-color: rgba(245, 201, 102, 0.95) !important; }
#page-container .et_pb_section_0 .et_pb_row_1 > .et_pb_column_2 { background-color: rgba(247, 130, 126, 0.95) !important; }
#page-container .et_pb_section_0 .et_pb_row_1 > .et_pb_column_3 { background-color: rgba(242, 55, 170, 0.95) !important; }
#page-container .et_pb_section_0 .et_pb_row_1 > .et_pb_column_4 { background-color: rgba(31, 63, 168, 0.95) !important; }

#page-container .et_pb_section_0 .et_pb_row_1 > .et_pb_column_1,
#page-container .et_pb_section_0 .et_pb_row_1 > .et_pb_column_2,
#page-container .et_pb_section_0 .et_pb_row_1 > .et_pb_column_3,
#page-container .et_pb_section_0 .et_pb_row_1 > .et_pb_column_1 *,
#page-container .et_pb_section_0 .et_pb_row_1 > .et_pb_column_2 *,
#page-container .et_pb_section_0 .et_pb_row_1 > .et_pb_column_3 * {
  color: #171717 !important;
}
#page-container .et_pb_section_0 .et_pb_row_1 > .et_pb_column_1 .et_pb_button,
#page-container .et_pb_section_0 .et_pb_row_1 > .et_pb_column_2 .et_pb_button,
#page-container .et_pb_section_0 .et_pb_row_1 > .et_pb_column_3 .et_pb_button {
  border-color: rgba(23, 23, 23, 0.5) !important;
}

/* 20) 푸터 EMAIL 칸 — 남색 배경에 먹색 글씨라 1.4:1 로 사실상 안 보였다.
       노랑·코랄·틸 칸은 먹색이 맞으므로 이 칸만 흰색으로. */
#page-container .et_pb_column_2_tb_footer,
#page-container .et_pb_column_2_tb_footer * {
  color: #ffffff !important;
}

/* ── 색 정돈 ───────────────────────────────────────────────
   원본은 한 화면에 고채도 색면이 일곱이라 시선이 어디에도 머물지 않는다.
   색을 빼는 대신 색이 놓이는 자리를 줄인다 — 커버의 4블록 하나만 강하게 두고
   나머지 큰 색면은 비운다. 사진·문구는 그대로. */

/* 21) 커버 — 팔레트에 없는 형광 보라(#8300E9)가 사진을 덮고 있었다.
       중립 스크림으로 바꾸면 사진이 사진으로 보이고 흰 글자 대비도 올라간다. */
#page-container .et_pb_section_0 {
  background-image: linear-gradient(90deg, rgba(18, 18, 22, 0.82) 0%, rgba(18, 18, 22, 0.34) 62%, rgba(18, 18, 22, 0.12) 100%),
    url('/school-legacy/wp-content/uploads/2023/08/KakaoTalk_20230731_111439121.jpg') !important;
}

/* 22) 커버 4블록 — 이 페이지에서 색이 강한 자리는 여기 하나뿐이다.
       원본 채도를 그대로 두고 글자만 바탕에 맞게 고른다(노랑 위 흰 글씨는 1.7:1 이었다). */
#page-container .et_pb_section_0 .et_pb_row_1 > .et_pb_column_1 { background-color: rgba(245, 201, 102, 0.96) !important; }
#page-container .et_pb_section_0 .et_pb_row_1 > .et_pb_column_2 { background-color: rgba(247, 130, 126, 0.96) !important; }
#page-container .et_pb_section_0 .et_pb_row_1 > .et_pb_column_3 { background-color: rgba(242, 55, 170, 0.96) !important; }
#page-container .et_pb_section_0 .et_pb_row_1 > .et_pb_column_4 { background-color: rgba(31, 63, 168, 0.96) !important; }
#page-container .et_pb_section_0 .et_pb_row_1 > .et_pb_column_1,
#page-container .et_pb_section_0 .et_pb_row_1 > .et_pb_column_2,
#page-container .et_pb_section_0 .et_pb_row_1 > .et_pb_column_3,
#page-container .et_pb_section_0 .et_pb_row_1 > .et_pb_column_1 *,
#page-container .et_pb_section_0 .et_pb_row_1 > .et_pb_column_2 *,
#page-container .et_pb_section_0 .et_pb_row_1 > .et_pb_column_3 * { color: #171717 !important; }
#page-container .et_pb_section_0 .et_pb_row_1 > .et_pb_column_1 .et_pb_button,
#page-container .et_pb_section_0 .et_pb_row_1 > .et_pb_column_2 .et_pb_button,
#page-container .et_pb_section_0 .et_pb_row_1 > .et_pb_column_3 .et_pb_button { border-color: rgba(23, 23, 23, 0.45) !important; }

/* 23) 본문의 큰 색면은 비운다 — 교육프로그램(코랄 전면)·입학안내(노랑 전면).
       색을 없애는 게 아니라 커버로 몰아주는 것이다. */
#page-container .et_pb_row_5 { background-color: var(--sc-cream, #f5f0eb) !important; }
#page-container .et_pb_section_4 { background-color: var(--sc-cream, #f5f0eb) !important; }

/* 공지 패널도 남색 전면 대신 흰 바탕으로. 안의 표는 원래 밝은 바탕이라
   글자색을 건드리지 않아야 한다(흰 글씨를 강제했더니 표가 통째로 사라졌다). */
#page-container .et_pb_row_5 > .et_pb_column:nth-child(2) {
  background-color: #ffffff !important;
  box-shadow: inset 0 0 0 1px #e6e3df;
}
#page-container .et_pb_row_5 .et_pb_text_inner,
#page-container .et_pb_row_5 .et_pb_text_inner p,
#page-container .et_pb_row_5 a,
#page-container .et_pb_row_5 li,
#page-container .et_pb_row_5 td,
#page-container .et_pb_row_5 th { color: #171717 !important; }

/* 24) 사진 위 파란 밴드도 커버와 같은 중립 스크림으로 — 파랑이 사진을 덮어 색이 뭉갰다. */
#page-container .et_pb_section_5 {
  background-color: transparent !important;
  background-image: linear-gradient(rgba(18, 18, 22, 0.55), rgba(18, 18, 22, 0.55)),
    url('/school-legacy/wp-content/uploads/2023/01/bgimage-2.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
}
#page-container .et_pb_section_5 .et_pb_text_inner,
#page-container .et_pb_section_5 .et_pb_text_inner * { color: #ffffff !important; }

/* 25) 푸터 EMAIL 칸 — 남색 배경에 먹색 글씨라 1.4:1 로 사실상 안 보였다. */
#page-container .et_pb_column_2_tb_footer,
#page-container .et_pb_column_2_tb_footer * { color: #ffffff !important; }

/* 26) 교육프로그램 목록은 Divi 버튼(흰 글씨)이라 바탕을 크림으로 낮추자 사라졌다.
       버튼 자체 색 규칙이 세서 클래스를 두 번 적어 덮는다. */
#page-container .et_pb_row_5 .et_pb_button.et_pb_button,
#page-container .et_pb_row_5 .et_pb_button.et_pb_button::after {
  color: #171717 !important;
}
#page-container .et_pb_row_5 .et_pb_button.et_pb_button {
  border-color: rgba(23, 23, 23, 0.35) !important;
}

/* 27) 이 행은 코랄 바탕에 남색 그림자(300px 어긋난 블록)를 겹쳐 층을 만들던 장치였다.
       바탕을 비운 뒤에는 색 대비가 없어 어긋난 사각형으로만 보이므로 걷어낸다. */
#page-container .et_pb_row_5 { box-shadow: none !important; }

/* ── 푸터 ──────────────────────────────────────────────────
   원본 푸터는 색 칸마다 세로 반복 패턴이 깔려 줄무늬가 생기고,
   소셜 아이콘은 폰트가 안 붙어 '팔로우' 글자가 그대로 노출됐다. */

/* 28) 칸마다 깔린 세로 줄무늬 제거 — 색면만 남긴다 */
#page-container [class*='et_pb_column_'][class*='_tb_footer'] {
  background-image: none !important;
}

/* 29) 색 칸을 화면 끝까지 — 검정 바탕에 어중간하게 떠 있던 폭을 없앤다 */
#page-container .et_pb_row_0_tb_footer.et_pb_row {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#page-container [class*='et_pb_column_'][class*='_tb_footer'] {
  padding: 34px 30px !important;
  margin-bottom: 0 !important;
}

/* 30) 소셜 — 아이콘 폰트가 없으니 서비스 이름을 글자로 보여준다 */
#page-container .et_pb_social_media_follow li { list-style: none; }
#page-container .et_pb_social_media_follow a.icon { text-decoration: none; }
#page-container .et_pb_social_media_follow_network_name { font-size: 0; }
#page-container .et_pb_social_media_follow_network_name::after {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
#page-container .et-social-youtube .et_pb_social_media_follow_network_name::after { content: 'YouTube'; }
#page-container .et-social-instagram .et_pb_social_media_follow_network_name::after { content: 'Instagram'; }
#page-container .et-social-facebook .et_pb_social_media_follow_network_name::after { content: 'Facebook'; }
#page-container .et-social-naver .et_pb_social_media_follow_network_name::after { content: 'Naver'; }

/* 31) 칸 제목(MYPAUL SCHOOL·ADDRESS…)이 흐려서 값과 구분이 안 됐다 */
#page-container [class*='_tb_footer'] h4 {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  opacity: 0.72;
  margin-bottom: 10px !important;
}

/* 32) 소셜 링크 — 흰 박스와 깨진 글리프를 걷어내고 글자만 남긴다 */
#page-container .et_pb_social_media_follow a.icon {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 14px 6px 0 !important;
  display: inline-block !important;
}
#page-container .et_pb_social_media_follow a.icon::before { content: none !important; }
#page-container .et_pb_social_media_follow li { display: inline-block; margin: 0 !important; }

/* 33) 칸 색에 맞는 글자색 — 노랑·코랄·틸은 먹색, 남색만 흰색 */
#page-container .et_pb_column_0_tb_footer,
#page-container .et_pb_column_0_tb_footer *,
#page-container .et_pb_column_1_tb_footer,
#page-container .et_pb_column_1_tb_footer *,
#page-container .et_pb_column_3_tb_footer,
#page-container .et_pb_column_3_tb_footer * {
  color: #171717 !important;
}
#page-container .et_pb_column_2_tb_footer,
#page-container .et_pb_column_2_tb_footer * {
  color: #ffffff !important;
}

/* 34) 푸터 조판 — 본문용 17px/1.85 가 그대로 적용돼 메뉴가 성기고 칸이 비어 보였다 */
#page-container [class*='_tb_footer'] .et_pb_text_inner,
#page-container [class*='_tb_footer'] .et_pb_text_inner p,
#page-container [class*='_tb_footer'] li,
#page-container [class*='_tb_footer'] a {
  font-size: 15px !important;
  line-height: 1.6 !important;
}
#page-container [class*='_tb_footer'] .et_pb_text_inner p:not(:last-child) {
  margin-bottom: 8px !important;
}
#page-container .et_pb_section_0_tb_footer.et_pb_section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
#page-container .et_pb_row_1_tb_footer.et_pb_row {
  padding-top: 52px !important;
  padding-bottom: 52px !important;
}

/* 35) 뉴스레터 — 흰 입력창·코랄 버튼·빨간 버튼이 제각각이라 한 벌로 맞춘다 */
#page-container [class*='_tb_footer'] input[type='text'],
#page-container [class*='_tb_footer'] input[type='email'] {
  width: 100% !important;
  max-width: 260px;
  padding: 11px 12px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  color: #fff !important;
  font-size: 14px !important;
}
#page-container [class*='_tb_footer'] input::placeholder { color: rgba(255, 255, 255, 0.5) !important; }
#page-container [class*='_tb_footer'] .et_pb_newsletter_button,
#page-container [class*='_tb_footer'] button {
  background: #ffffff !important;
  color: #111 !important;
  border: 0 !important;
  padding: 11px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}