/* =========================================================
   중등부 (_p-middle) · 홈 v4 B안 카드형 부품(.b4*) 위에 페이지 배치만
   구역 배경: 흰 → 회 → 흰 → 회 → 흰 → 회 → 상담(핑크)
   ========================================================= */
.pg-middle main > .mh4:first-child { padding-top: 56px; }

/* ---------- 첫 화면 ---------- */
.mh4-in { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.mh4-h1 { margin-top: 18px; font-size: 80px; }
.mh4 .b4-lead { margin-top: 18px; }
.mh4-sch { margin-top: 18px; font-size: 14.5px; font-weight: 700; color: #444; line-height: 1.6; }
.mh4-sch b { display: inline-block; margin-right: 10px; font-size: 12px; font-weight: 900; background: var(--ink); color: #fff; border-radius: 999px; padding: 3px 10px; }
.mh4-line { border: 2px solid var(--ink); color: var(--ink); }
.mh4-line:hover { background: var(--ink); color: #fff; }
.mh4-art { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mh4-t { position: relative; margin: 0; border-radius: 22px; overflow: hidden; background: #F4F3F1; aspect-ratio: 3 / 4; }
.mh4-t:nth-child(2) { margin-top: 48px; background: #FFE3EF; }
.mh4-t img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.mh4-t figcaption { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; background: #fff; border-radius: 14px; padding: 10px 12px; font-size: 15px; }
.mh4-t figcaption small { display: block; font-size: 12px; color: var(--g2); font-weight: 600; margin-top: 2px; }

/* ---------- 반 구성 표 ---------- */
.mg4 { margin-top: 24px; padding: 8px 24px; }
.mg4-t { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mg4-t th, .mg4-t td { text-align: left; vertical-align: top; padding: 16px 10px; border-bottom: 1px solid #eee; }
.mg4-t tbody tr:last-child th, .mg4-t tbody tr:last-child td { border-bottom: 0; }
.mg4-t thead th { font-size: 18px; font-weight: 900; padding-top: 18px; border-bottom: 2px solid var(--ink); }
.mg4-t thead th:first-child { width: 120px; }
.mg4-t small { display: block; font-size: 12.5px; font-weight: 600; color: var(--g2); margin-top: 2px; }
.mg4-t tbody th { font-family: "Black Han Sans", "Pretendard", sans-serif; font-weight: 400; font-size: 30px; line-height: 1; }
.mg4-t tbody th small { font-family: "Pretendard", system-ui, sans-serif; font-size: 13px; margin-top: 6px; }
.mg4-t td span { display: inline-block; margin: 0 6px 6px 0; padding: 5px 10px; border-radius: 999px; background: #F4F3F1; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mg4-t td span.new { background: transparent; box-shadow: 0 0 0 1.5px #bbb inset; color: var(--g2); }
.mg4-t td.mg4-top span { background: var(--ink); color: #fff; }
.mg4-t thead th.mg4-top { color: var(--pk-ink); }
.mg4-t td.mg4-x { font-size: 13.5px; font-weight: 700; color: #aaa; vertical-align: middle; background: repeating-linear-gradient(135deg, transparent 0 8px, #f6f6f6 8px 16px); }
.mg4-n { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 16px !important; font-size: 15px; color: #333; }
.mg4-n b { margin-right: 8px; font-weight: 900; color: var(--ink); }

/* ---------- 내신 기간 ---------- */
.me4 { margin-top: 24px; padding: 22px 24px 26px; --c1: 34%; --c2: 67%; }
.me4-ax { position: relative; height: 26px; margin-left: 140px; font-size: 13px; font-weight: 800; color: var(--g2); }
.me4-ax span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.me4-ax span:nth-child(1) { left: 0; transform: none; }
.me4-ax span:nth-child(2) { left: var(--c1); }
.me4-ax span:nth-child(3) { left: var(--c2); }
.me4-ax span:nth-child(4) { right: 0; left: auto; transform: none; color: var(--ink); }
.me4-ln { display: grid; grid-template-columns: 130px 1fr; column-gap: 10px; row-gap: 6px; align-items: center; padding: 12px 0; border-top: 1px solid #e6e4e1; }
.me4-n { font-size: 16px; font-weight: 900; }
.me4-bars { grid-column: 2; position: relative; height: 44px; }
.me4-b { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 12px; border-radius: 10px; font-size: 13.5px; font-weight: 800; line-height: 1.25; overflow: hidden; }
.me4-b0 { left: 0; width: calc(var(--c1) - 4px); background: #fff; }
.me4-b1 { left: var(--c1); width: calc(var(--c2) - var(--c1) - 4px); background: var(--ink); color: #fff; }
.me4-b2 { left: var(--c2); right: 0; background: var(--pk); color: var(--ink); }
.me4-full { width: 100%; }
.me4-o { background: transparent; color: var(--ink); box-shadow: 0 0 0 2px var(--ink) inset; }
.me4-b2.me4-o { box-shadow: 0 0 0 2px var(--pk) inset; color: var(--pk-ink); }
.me4-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin-top: 18px; font-size: 15px; line-height: 1.6; color: #333; }
.me4-two b { display: block; font-size: 16px; font-weight: 900; color: var(--ink); }
.me4-f { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; margin-top: 20px !important; }
.me4-f span { font-size: 14px; font-weight: 800; background: #F4F3F1; border-radius: 999px; padding: 8px 14px; }
.me4-f span.on { background: var(--pk); }
.me4-f i { font-style: normal; font-weight: 900; color: #aaa; }

/* ---------- 성장 기록 ---------- */
.mr4-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; }
.mr4 { display: flex; flex-direction: column; gap: 4px; }
.mr4-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.mr4-w { font-size: 19px; font-weight: 900; }
.mr4-pill { flex: none; background: #FFE3EF; color: var(--pk-ink); font-weight: 900; font-size: 13px; border-radius: 999px; padding: 6px 12px; }
.mr4-big { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 76px; font-weight: 900; letter-spacing: -0.06em; line-height: .9; }
.mr4-big span { color: #c2c2c2; }
.mr4-big i { font-style: normal; font-size: .5em; }
.mr4-big em { color: var(--pk); }
.mr4-cap { font-size: 14px; color: var(--g2); margin-top: 6px; }
.mr4-ch { display: block; width: 100%; max-width: 420px; height: auto; margin-top: 8px; overflow: visible; }
.mr4-ch .gl { stroke: #ececec; }
.mr4-ch .xa { font: 700 12px Pretendard, system-ui, sans-serif; fill: #6b6b6b; text-anchor: middle; }
.mr4-ch .v { font: 900 14px Pretendard, system-ui, sans-serif; fill: var(--pk-ink); text-anchor: middle; }
.mr4-q { margin-top: 8px; background: #F4F3F1; border-radius: 4px 16px 16px 16px; padding: 12px 14px; font-size: 14px; line-height: 1.6; color: #333; }
.mr4-q time { display: block; font-size: 13px; font-weight: 900; color: var(--pk-ink); }
.mr4-blog { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.mr4-blog a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 14px 18px; border-radius: 16px; background: var(--ink); color: #fff; min-height: 64px; }
.mr4-blog i { width: 100%; font-style: normal; font-size: 12.5px; font-weight: 700; color: #aaa; }
.mr4-blog b { font-size: 17px; font-weight: 900; }
.mr4-blog span { margin-left: auto; font-size: 13px; font-weight: 800; color: var(--pk); }

/* ---------- 설명회 (밝은 배경) ---------- */
.gsem .sem-panel { margin-top: 24px; }
.gsem .sem-big { color: var(--ink); }
.gsem .sem-img { border-radius: 18px; }
.gsem .sem-bt span { color: var(--g2); }
.gsem .sem-rows { background: var(--cd); border-radius: 18px; padding: 4px 20px; }
.gsem .sem-rows li { border-top: 1px solid #e6e4e1; }
.gsem .sem-rows li:first-child { border-top: 0; }
.gsem .sem-rows li:last-child { border-bottom: 0; }
.gsem .sem-rows a { color: var(--ink); }
.gsem .sem-rows .d { color: var(--g2); }
.gsem .sem-rows .d b { color: var(--ink); }
.gsem .sem-rows .t span { color: var(--g2); }
.gsem .sem-rows .go { border-color: var(--ink); }

/* ---------- 시간표 ---------- */
.mf4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- 휴대폰 ---------- */
@media (max-width: 860px) {
  .pg-middle main > .mh4:first-child { padding-top: 36px; }
  .mh4-in { grid-template-columns: 1fr; gap: 22px; }
  .mh4-h1 { font-size: clamp(44px, 12.4vw, 54px); margin-top: 14px; }
  .mh4-art { gap: 8px; }
  .mh4-t { aspect-ratio: 4 / 4.6; border-radius: 18px; }
  .mh4-t:nth-child(2) { margin-top: 28px; }
  .mh4-t figcaption { left: 6px; right: 6px; bottom: 6px; padding: 8px 10px; font-size: 14px; gap: 6px; border-radius: 12px; }
  .mh4-t figcaption small { font-size: 11px; }
  .mh4-t .pg-play { min-height: 36px; padding: 0 12px; font-size: 13px; }

  .mg4 { padding: 2px 10px; margin-top: 18px; }
  .mg4-t th, .mg4-t td { padding: 12px 4px; }
  .mg4-t thead th { font-size: 14.5px; }
  .mg4-t thead th:first-child { width: 52px; }
  .mg4-t small { font-size: 11px; }
  .mg4-t tbody th { font-size: 22px; }
  .mg4-t tbody th small { font-size: 11px; }
  .mg4-t td span { display: block; width: fit-content; margin: 0 0 4px; padding: 3px 7px; font-size: 12.5px; }
  .mg4-t td.mg4-x { font-size: 12px; text-align: center; }
  .mg4-n { flex-direction: column; font-size: 14px; }

  .me4 { padding: 14px 14px 16px; --c1: 33%; --c2: 66%; }
  .me4-ax { margin-left: 0; font-size: 12px; }
  .me4-ln { grid-template-columns: 1fr; }
  .me4-bars { grid-column: 1; height: 50px; }
  .me4-b { padding: 0 8px; font-size: 12px; border-radius: 8px; }
  .me4-two { grid-template-columns: 1fr; gap: 10px; font-size: 14px; }
  .me4-f span { font-size: 13px; padding: 7px 11px; }

  .mr4-row { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 6px; scroll-padding: 0 16px; scrollbar-width: none; gap: 10px; }
  .mr4-row::-webkit-scrollbar { display: none; }
  .mr4-row > * { scroll-snap-align: start; }
  .mr4-big { font-size: 60px; }
  .mr4-q { font-size: 13.5px; }
  .mr4-blog { grid-template-columns: 1fr; gap: 8px; }

  .gsem .sem-rows { padding: 2px 14px; }
  .mf4 { grid-template-columns: 1fr 1fr; }
  .mf4 .fd { padding: 14px 16px; }
}
/* 2026-10-19: 반 종류 3개 / 사진 가림 줄이기 / 내신 운영 막대 */
.mh4-cls { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.5; color: #333; }
.mh4-cls b { display: inline-block; min-width: 4.4em; margin-right: 8px; padding: 2px 10px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; text-align: center; }
.mh4-cls li:nth-child(3) b { background: var(--pk); color: var(--ink); }
.mh4-t figcaption { left: 8px; right: auto; bottom: 8px; max-width: calc(100% - 16px); padding: 7px 10px; gap: 5px; background: rgba(255,255,255,.92); border-radius: 12px; font-size: 13.5px; }
.mh4-t figcaption small { font-size: 11px; }
.mh4-t .pg-play { min-height: 30px; padding: 0 10px; font-size: 12px; }
.me4-b1.me4-w2 { right: 0; width: auto; }
.me4-b0.me4-to2 { width: calc(var(--c2) - 4px); }
@media (max-width: 860px) {
  .mh4-t figcaption { left: 6px; bottom: 6px; padding: 6px 8px; font-size: 12.5px; gap: 4px; }
  .mh4-t figcaption small { font-size: 10.5px; }
  .mh4-t .pg-play { min-height: 28px; padding: 0 9px; font-size: 11.5px; }
  .mh4-cls { font-size: 13.5px; }
}
.mt4 { margin-top: 28px; padding-top: 22px; border-top: 2px solid var(--ink); }
.mt4-h { margin: 0 0 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.mt4-h b { font-size: 20px; font-weight: 900; letter-spacing: -0.03em; }
.mt4-h span { font-size: 13.5px; color: var(--g2); font-weight: 700; }
.mt4-l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mt4-l li { background: #fff; border-radius: 18px; padding: 18px 18px 20px; display: grid; gap: 4px; }
.mt4-k { font-size: 13px; font-weight: 800; color: var(--g2); }
.mt4-n { font-size: 52px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.mt4-n small { font-size: 18px; margin-left: 2px; color: var(--g2); }
.mt4-l li:first-child .mt4-n { color: var(--pk); }
.mt4-w { font-size: 13.5px; font-weight: 700; color: #3e3a3c; }
@media (max-width: 860px) { .mt4-l { grid-template-columns: 1fr 1fr; gap: 8px; } .mt4-l li { padding: 14px; } .mt4-n { font-size: 42px; } .mt4-w { font-size: 12.5px; } }