/* 초중등부 지점 디자인 (body.st-look-middle — layout.php $middle, 지점 메인은 pages/home_middle.php) — root.css 다음에 읽는다
 *  메인(/)과 같은 것: 글꼴(Wanted Sans 제목 · LINE Seed 본문), kicker + 큰 제목, 둥근 카드, 알약 단추, 그 자리 펼침, 레이어 팝업, 떠 있는 메뉴, 남색 꼬리
 *  메인과 다른 것: 남색 구역 대신 밝은 바탕(연두 → 하늘), 지점 정보를 한눈에 보는 벤토 그리드(크기가 다른 둥근 칸). 첫 화면은 영재원 · 고등부와 같은 사진이 이끄는 꼴(짙은 숲초록 → 파랑 막 · 흰 글자 · 연두 포인트),
 *   로고의 연두(--m-leaf) · 초록(--m-green)을 브랜드 파랑과 함께 포인트로, 교육성과도 밝은 바탕(.st-r-light)
 *  하위 화면(공지 · 개설강좌 · FAQ …)의 카드 · 단추 · 입력 칸 · 표는 branch.css(초중등부 · 영재원 공용 — 색 변수 --b-*), 여기는 초중등부 색 · 첫 화면 · 첫 줄 바탕
 *  영재원은 gift.css(다른 배치 · 구성), 고등부는 _modules/high
 *  효과: .st-rv(들어올 때, root.css · site.js) — 스크립트가 없거나 prefers-reduced-motion 이면 다 보인다 */
.st-look-middle{--m-leaf:#8cc63f;--m-leaf-t:#f0f8e6;--m-green:#007a36;--m-green-t:#e5f4ea;--m-blue-t:#e8f1fa;--m-line:#e6edf3;
  --b-accent:#0064b2;--b-accent-d:#00528f;--b-line:#e6edf3;--b-soft:#e8f1fa;--b-ok:#e5f4ea;--b-pill:#f0f8e6;--b-pill-fg:#3d6e12;--b-crumb:#007a36;--b-bg:#f6f9fb}

/* 머리 — 메인 하위 화면과 같은 흰 막대 + 지점 메뉴 알약(root.css), 아래에 연두 → 파랑 가는 띠 */
.st-header-branch::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:linear-gradient(90deg,var(--m-leaf),var(--r-blue));pointer-events:none}

/* 1 지점 첫 화면 — 영재원 · 고등부와 같은 '사진이 이끄는' 꼴 · 같은 무게: 지점 사진이 오른쪽 절반에 깔리고 왼쪽으로 사라진다, 이름 배지 + [초중등부] · 슬로건 · 부서 문구 · 연락처 · 단추.
 *  초중등부 색 = 짙은 숲초록 → 브랜드 파랑(#0b4ea2) 막 + 흰 글자 + 연두(로고 잎) 포인트, 주 단추(상담 전화)는 연두
 *  (영재원 = 짙은 남색 + 금색, 고등부 = 먹색 ~ 청록 + 산호 — 셋 다 짙은 바탕이지만 색으로 갈린다). 글자가 놓이는 왼쪽은 막을 진하게 */
.st-look-middle{--m-hero-a:#0a3b22;--m-hero-b:#0d5a36;--m-hero-c:#0b4ea2;--m-lime:#b2e35a}
.st-m-hero{position:relative;overflow:hidden;background:linear-gradient(115deg,var(--m-hero-a) 0%,var(--m-hero-b) 42%,#0b5571 70%,var(--m-hero-c) 100%);color:#fff}
.st-m-hero-photo{position:absolute;top:0;right:0;bottom:0;width:58%;background:center/cover no-repeat;opacity:.6;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 50%);mask-image:linear-gradient(90deg,transparent 0%,#000 50%)}
.st-m-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,46,26,.94) 0%,rgba(8,50,30,.82) 38%,rgba(10,70,110,.34) 70%,rgba(11,78,162,.18) 100%),linear-gradient(180deg,rgba(6,30,20,0) 62%,rgba(6,30,20,.45) 100%)}
.st-m-hero::before{content:"";position:absolute;z-index:1;left:-160px;top:-200px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(140,198,63,.22),rgba(140,198,63,0) 68%);pointer-events:none}
.st-m-hero-in{position:relative;z-index:2;padding-top:72px;padding-bottom:64px}
@media (min-width:1024px){.st-m-hero-in{padding-top:104px;padding-bottom:96px}}
/* 지점 이름 배지(연두 테 알약 + 연두 점 + [초중등부]) · 큰 문장(흰 글자, 강조 연두) — 구조는 branch.css .st-hero-h */
.st-m-badge{background:rgba(140,198,63,.16);color:var(--m-lime);box-shadow:inset 0 0 0 1px rgba(178,227,90,.55)}
.st-m-badge::before{background:var(--m-lime)}
.st-m-badge em{margin-left:2px;padding:2px 10px;border-radius:999px;background:var(--m-lime);color:#10260a;font-style:normal;font-size:.82em}
.st-m-lead{color:#fff}
.st-m-lead em{color:var(--m-lime)}
.st-m-lead>span+span{color:rgba(255,255,255,.82)}
.st-m-lead b{color:#fff}
.st-m-hero .st-hero-desc{color:rgba(255,255,255,.76)}
.st-m-contact{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin:30px 0 18px;font-size:15px;color:rgba(255,255,255,.8)}
.st-m-contact span{display:inline-flex;align-items:center;gap:6px;word-break:keep-all}
.st-m-contact .icon{color:var(--m-lime)}
.st-m-tel{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-wanted);font-weight:700;font-size:22px;color:#fff;font-variant-numeric:tabular-nums}
.st-m-actions{display:flex;flex-wrap:wrap;gap:10px}
.st-m-act{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:46px;padding:0 18px;border-radius:999px;background:transparent;color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.38);font-family:var(--f-wanted);font-weight:600;font-size:15px;transition:background-color .2s,box-shadow .2s}
.st-m-act:hover{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px #fff}
.st-m-act img{width:18px;height:18px;object-fit:contain}
.st-m-act.is-call{background:var(--m-lime);color:#10260a;box-shadow:0 8px 22px rgba(140,198,63,.28)}
.st-m-act.is-call:hover{background:#c4ee78}
.st-m-act.is-kakao{background:#fee500;color:#191600;box-shadow:none}
@media (max-width:767px){.st-m-hero-photo{width:100%;opacity:.3;-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 90%);mask-image:linear-gradient(180deg,#000 0%,transparent 90%)}
  .st-m-hero::after{background:linear-gradient(180deg,rgba(8,46,26,.55) 0%,rgba(8,46,26,.88) 48%,rgba(9,60,70,.92) 100%)}
  .st-m-actions{display:grid;grid-template-columns:1fr 1fr}.st-m-act{padding:0 10px}}

/* 2 지점 소식 — 벤토 그리드. 데스크톱(1024~) 12칸: 개설강좌(5칸 × 두 줄) | 설명회 · 공지(7칸씩), 아래 줄 = [특강 7] · 교육성과 요약 5 (특강이 없으면 교육성과 한 줄 띠)
 *  태블릿(768~1023) 2칸: 개설강좌 · 지점 메뉴는 한 줄 전체, 모바일 1칸(공지를 맨 앞 — 레거시와 같다) */
.st-m-news{padding:72px 0 84px;background:#fff}
.st-m-bento{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);margin-top:10px}
.st-m-tile{position:relative;min-width:0;display:flex;flex-direction:column;padding:22px 22px 18px;border-radius:24px;background:#fff;border:1px solid var(--m-line);
  box-shadow:0 1px 2px rgba(14,26,36,.04);color:var(--r-ink);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
a.st-m-tile:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(14,26,36,.1)}
a.st-m-tile:focus-visible,.st-m-rows a:focus-visible,.st-m-tile-h a:focus-visible{outline:3px solid var(--r-blue);outline-offset:2px}
@media (max-width:767px){.st-m-notice{order:-1}}
@media (min-width:768px){
  .st-m-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-m-lect{grid-column:1/-1}
  .st-m-bento:not(.has-special) .st-m-stat,.st-m-bento.has-special.no-stat .st-m-special{grid-column:1/-1}
}
@media (min-width:1024px){
  .st-m-bento{grid-template-columns:repeat(12,minmax(0,1fr))}
  .st-m-lect{grid-column:span 5;grid-row:span 2}
  .st-m-pres,.st-m-notice{grid-column:span 7}
  .st-m-bento .st-m-stat{grid-column:span 12;flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 36px}   /* 특강이 없으면 한 줄 띠 */
  .st-m-bento.has-special .st-m-special{grid-column:span 7}
  .st-m-bento.has-special .st-m-stat{grid-column:span 5;flex-direction:column;align-items:stretch}
  .st-m-bento.has-special.no-stat .st-m-special{grid-column:span 12}
}
/* 칸 머리: 아이콘 타일 · 제목 · [전체 ›] */
.st-m-tile-h{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.st-m-tile-h h3{margin:0;font-family:var(--f-wanted);font-weight:700;font-size:19px}
.st-m-tile-h em{padding:2px 9px;border-radius:999px;background:var(--m-leaf-t);color:#3d6e12;font-style:normal;font-size:12px;font-weight:700}
.st-m-tile-h a{margin-left:auto;display:inline-flex;align-items:center;gap:2px;min-height:40px;padding:0 4px 0 10px;border-radius:999px;font-family:var(--f-wanted);font-weight:600;font-size:14px;color:var(--r-sub)}
.st-m-tile-h a:hover{color:var(--r-blue)}
.st-m-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--m-blue-t);color:var(--r-blue)}
.st-m-ico.is-green{background:var(--m-green-t);color:var(--m-green)}
.st-m-ico.is-leaf{background:var(--m-leaf-t);color:#4d8a1a}
/* 줄 목록(설명회 · 공지 · 특강): 제목은 한 줄 말줄임, 오른쪽에 날짜 · 상태 */
.st-m-rows{list-style:none;margin:0;padding:0}
.st-m-rows li+li{border-top:1px solid #eef2f6}
.st-m-rows a{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 2px;color:var(--r-ink)}
.st-m-row-t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15.5px}
.st-m-rows a:hover .st-m-row-t{color:var(--r-blue);text-decoration:underline;text-underline-offset:3px}
.st-m-row-m{flex:none;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--r-sub);font-variant-numeric:tabular-nums;white-space:nowrap}
.st-m-badge-s{padding:2px 9px;border-radius:999px;background:#eef2f6;color:#55606b;font-style:normal;font-size:12px;font-weight:700}
.st-m-badge-s.is-open{background:#e3f4e6;color:#1d7a35}
.st-m-empty{margin:auto 0;padding:16px 2px;color:var(--r-sub);font-size:15px}
@media (max-width:420px){.st-m-pres .st-m-rows a{flex-wrap:wrap;row-gap:2px}.st-m-pres .st-m-row-t{flex-basis:100%}}
/* 개설강좌 — 큰 파란 칸(연두 빛 · 점선 고리 장식), 내용은 아래에 */
.st-m-lect{justify-content:flex-end;min-height:240px;padding:28px;border:0;overflow:hidden;color:#fff;background:linear-gradient(150deg,#0a78cf 0%,#0064b2 45%,#0b4c86 100%);box-shadow:0 14px 34px rgba(0,100,178,.22)}
.st-m-lect::before{content:"";position:absolute;right:-70px;top:-70px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(140,198,63,.6),rgba(140,198,63,0) 68%)}
.st-m-lect::after{content:"";position:absolute;right:30px;top:30px;width:110px;height:110px;border:2px dashed rgba(255,255,255,.28);border-radius:50%}
.st-m-lect-ico{position:absolute;left:28px;top:28px;display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:18px;background:rgba(255,255,255,.16);color:#fff}
.st-m-lect h3{position:relative;margin:70px 0 8px;font-family:var(--f-wanted);font-weight:700;font-size:clamp(26px,2.6vw,34px)}
.st-m-lect p{position:relative;margin:0 0 20px;font-size:16px;line-height:1.65;color:rgba(255,255,255,.9);word-break:keep-all}
.st-m-pill{position:relative;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:12px 18px;border-radius:999px;background:#fff;color:var(--r-blue);font-family:var(--f-wanted);font-weight:700;font-size:15px}
a.st-m-lect:hover{box-shadow:0 20px 44px rgba(0,100,178,.3)}
/* 교육성과 요약 — 연두 → 초록 빛 칸, 큰 숫자 두 개 → 아래 교육성과 구역으로 */
.st-m-stat{justify-content:space-between;gap:14px;border-color:transparent;background:linear-gradient(160deg,#f2f9e8 0%,#e3f3ea 100%)}
.st-m-stat-k{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-wanted);font-weight:700;font-size:15px;color:#3d6e12}
.st-m-stat-n{display:flex;flex-wrap:wrap;gap:8px 22px}
.st-m-stat-n>span{display:flex;align-items:baseline;gap:2px}
.st-m-stat-n b{font-family:var(--f-wanted);font-weight:700;font-size:clamp(34px,3.2vw,44px);line-height:1;color:var(--m-green);font-variant-numeric:tabular-nums}
.st-m-stat-n small{font-size:15px;font-weight:700;color:var(--m-green)}
.st-m-stat-n em{margin-left:6px;font-style:normal;font-size:14px;font-weight:700;color:#33404c}
.st-m-stat-go{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:600;color:#33404c}

/* 3 공용 구역(교육성과 · 교육이념 · 학습관리 · 수업 프로세스)은 root.css 그대로 — 지점 메인은 첫 구역 위 여백만 줄인다 */
.st-look-middle .st-r-sec{padding:80px 0}
@media (max-width:1023px){.st-look-middle .st-r-sec{padding:64px 0}.st-m-news{padding:56px 0 64px}}

/* 꼬리 — 메인 꼬리 꼴 + 지점 정보, 위에 연두 → 파랑 띠 */
.st-rfoot-branch{position:relative}
.st-rfoot-branch::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--m-leaf),var(--r-blue))}

/* 하위 화면 첫 줄 색 — 연두 → 하늘 (구조는 branch.css .st-b-subhero) */
.st-look-middle .st-b-subhero{--b-sub-bg:linear-gradient(165deg,#f2f9ea 0%,#edf5fb 62%,#f6f9fb 100%)}
.st-look-middle .st-b-subhero::before{content:"";position:absolute;right:-120px;top:-150px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(140,198,63,.2),rgba(140,198,63,0) 70%);pointer-events:none}

@media (prefers-reduced-motion:reduce){.st-m-tile,.st-m-act{transition:none}a.st-m-tile:hover{transform:none}
}