@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════
   EDU — 목록(/edu) + 브랜드 상세(/edu/{slug}) 페이지 전용
   수정안 2026-09-14 · 담당 C (D-1)
   site.css 토큰·공통 컴포넌트만 사용한다. 새 색·새 서체 도입 없음.
   ══════════════════════════════════════════════════════════════════ */

/* ── 히어로 ───────────────────────────────────────────────────────
   브랜드 바가 바로 위에 오므로 nav-h 오프셋을 다시 쓰지 않는다. */
.eduhero{
  position:relative;overflow:hidden;
  padding-top:clamp(38px,5.4vw,68px);
  padding-bottom:clamp(28px,3.6vw,48px);
}
.eduhero__in{position:relative;z-index:1}
/* 390px에서 한 줄 헤드라인이 좌우 거터에 닿지 않도록 최소 크기만 낮춘다 */
.eduhero .h1{font-size:clamp(1.6rem,3.6vw,2.75rem)}

/* 지표 3열 — 헤어라인 구획(정보 밀도 ↑, 장식 최소) */
.edustat{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(26px,3.4vw,44px);border-top:1px solid var(--line);
}
.edustat__i{
  padding:clamp(15px,1.9vw,22px) clamp(14px,1.8vw,24px) 2px;
  border-right:1px solid var(--line);
}
.edustat__i:first-child{padding-left:0}
.edustat__i:last-child{border-right:0}
.edustat__n{
  display:block;font-size:clamp(1.42rem,2.5vw,2rem);font-weight:800;
  letter-spacing:-.03em;line-height:1.1;color:var(--indigo-900);
}
/* max-width는 px로 — ch는 라틴 '0' 폭 기준이라 한글에서 지나치게 좁게 잡힌다 */
.edustat__l{
  display:block;margin-top:8px;font-size:.82rem;line-height:1.55;color:var(--ink-55);
  max-width:min(100%,330px);
}

/* ── 브랜드 그룹 ─────────────────────────────────────────────── */
.egroup{padding-top:clamp(18px,2.6vw,34px)}
.egroup__hd{display:flex;align-items:baseline;gap:8px 14px;flex-wrap:wrap}
.ecards{
  display:grid;gap:clamp(12px,1.6vw,20px);
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:clamp(22px,3vw,36px);
}

/* 브랜드 카드 — 로고 플레이트 + 이름·한 줄 정의·요약 + 대상 칩 + 화살표 */
.ecard{
  position:relative;display:grid;
  grid-template-columns:clamp(112px,12.5vw,150px) minmax(0,1fr);
  gap:clamp(16px,2.1vw,28px);align-items:center;
  padding:clamp(18px,2vw,24px) clamp(20px,2.2vw,28px);
  border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;
  box-shadow:var(--shadow-1);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.ecard:hover,.ecard:focus-visible{
  transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--line-2);
}
.ecard__logo{
  display:grid;place-items:center;height:clamp(82px,8.6vw,102px);
  border-radius:var(--r);border:1px solid var(--line);
  background:linear-gradient(162deg,var(--mist),#fff);overflow:hidden;
}
/* 로고는 클라 원본 PNG 그대로 — 어떤 폭에서도 잘리지 않게 플레이트를 '레터박스'로 쓴다.
   %  max-height 는 쓰지 않는다: 그리드 아이템의 automatic minimum size(min-*:auto)가
   이미지 고유 크기로 먼저 잡혀 max-height 를 무시하고 플레이트 밖으로 흘러나간다
   (pyp-agents 201×180 → 390~560px 구간에서 하단 17.9px 잘림). 대신
   고정 여백(padding) + object-fit:contain 으로 박스를 확정하고 min-*:0 으로 그 규칙을 끈다.
   여백값은 기존 데스크톱 렌더(가로 78% / 세로 72%)와 같은 크기가 나오도록 맞췄다. */
.ecard__logo img{
  width:100%;height:100%;min-width:0;min-height:0;
  padding:clamp(10px,1.35vw,14px) clamp(12px,1.55vw,17px);
  object-fit:contain;object-position:center;
  transition:transform .42s var(--ease);
}
.ecard:hover .ecard__logo img{transform:scale(1.055)}
.ecard__body{display:grid;gap:6px;min-width:0}
.ecard__name{font-size:clamp(1rem,1.25vw,1.16rem);font-weight:800;letter-spacing:-.024em;line-height:1.35}
.ecard__tag{font-size:.885rem;font-weight:600;line-height:1.5;color:var(--indigo-800)}
.ecard__sum{
  font-size:.845rem;line-height:1.66;color:var(--ink-55);
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ecard__foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:6px;
}
.ecard__aud{
  display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;
  background:var(--mist-2);font-size:.75rem;font-weight:700;letter-spacing:-.01em;
  color:var(--indigo-800);
}
.ecard__go{
  display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;
  border:1px solid var(--line-2);color:var(--ink-40);
  transition:background .26s var(--ease),color .26s var(--ease),border-color .26s var(--ease);
}
.ecard:hover .ecard__go{background:var(--ink);border-color:var(--ink);color:#fff}

/* ── 준비 중 스트립 (사교육기관 브랜드) ─────────────────────── */
.soonsec{overflow:hidden}
/* 흰 캔버스 위에서도 패널로 읽히도록 보더는 하이라이트 대신 라인 토큰을 쓴다 */
.soonpanel{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  border-color:var(--line-2);
  padding:clamp(22px,2.8vw,34px) clamp(20px,2.8vw,38px);
}
.soonpanel__in{
  position:relative;z-index:1;display:grid;align-items:center;
  gap:clamp(16px,2.4vw,32px);
  grid-template-columns:minmax(0,1fr) minmax(0,auto);
}
.soonpanel__t{letter-spacing:-.024em}
.soonlist{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.soonlist .soon{background:rgba(255,255,255,.72);border-color:var(--line-2);color:var(--ink-70)}

/* ── 브랜드 상세 보강 ───────────────────────────────────────────
   구조는 그대로 두고, 브랜드 바 아래에서의 히어로 대비만 정리한다. */
.brandbar ~ .bhero .crumb{margin-top:2px}
.bhero__logo img{max-width:100%}

/* ── 반응형 ───────────────────────────────────────────────────── */
@media (max-width:900px){
  .ecards{grid-template-columns:1fr}
  .edustat__l{max-width:none}
}
@media (max-width:720px){
  .soonpanel__in{grid-template-columns:1fr}
  .soonlist{justify-content:flex-start}
}
@media (max-width:560px){
  .edustat{grid-template-columns:1fr}
  .edustat__i{
    border-right:0;border-bottom:1px solid var(--line);
    padding:14px 0 16px;
  }
  .edustat__i:last-child{border-bottom:0}
  .ecard{grid-template-columns:1fr;gap:15px}
  .ecard__logo{height:72px;width:min(150px,52%);justify-self:start}
}