/* ============================================================
   아리아 에듀 — 허브(메인) 페이지 전용
   ============================================================ */
*{ box-sizing:border-box; margin:0; padding:0; }
body{
  min-height:100vh; min-height:100dvh;
  background:var(--bg); color:var(--ink);
  font-family:"Pretendard","Pretendard Variable","Apple SD Gothic Neo",
              "Noto Sans KR","Malgun Gothic",system-ui,-apple-system,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
:focus-visible{ outline:3px solid var(--accent); outline-offset:4px; }

.hub{
  flex:1;
  width:100%; max-width:1280px; margin:0 auto;
  padding:clamp(36px,6vh,80px) clamp(20px,5vw,60px) clamp(40px,8vh,90px);
  display:flex; flex-direction:column;
}

/* ── 상단 로고 + 이름 ── */
.hub__head{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(14px,2.5vw,34px);
  margin-bottom:clamp(34px,7vh,78px);
}
.hub__mark{ width:clamp(96px,11vw,150px); height:auto; flex:none; }
.hub__title{
  font-size:clamp(38px,6vw,86px); font-weight:800;
  letter-spacing:-.03em; line-height:1; color:var(--accent);
}
.hub__sub{
  display:block; margin-top:10px;
  font-size:clamp(12px,1.2vw,15px); font-weight:600;
  letter-spacing:.22em; color:var(--ink-3);
}

/* ── 3개 학원 카드 ── */
.hub__grid{
  flex:1;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2.4vw,36px);
  align-content:stretch;
}

.brand{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:clamp(300px,46vh,460px);
  border:2px solid var(--border);
  border-radius:clamp(18px,2vw,30px);
  padding:clamp(22px,2.6vw,38px);
  display:flex; flex-direction:column; align-items:center;
  background:var(--bg);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),
             box-shadow .3s cubic-bezier(.2,.7,.3,1),
             border-color .3s;
}
.brand:hover{
  transform:translateY(-6px);
  border-color:var(--brand);
  box-shadow:0 18px 40px rgba(0,0,0,.14);
}

/* ── 배경 워터마크 로고 ──────────────────────────────────
   시안처럼 로고를 카드보다 크게 키우고, 카드 모서리로 일부를 잘라냅니다.
   브랜드마다 심볼 모양이 달라 크기·위치를 따로 지정합니다.
   --mw  로고 너비 (카드 너비 기준 %)
   --ml  왼쪽 위치 (카드 너비 기준 %)
   --mt  위쪽 위치 (카드 높이 기준 %)                      */
.brand__mark{
  position:absolute; z-index:-1;
  left:var(--ml); top:var(--mt);
  width:var(--mw);
  max-width:none;                /* 카드 밖으로 넘치도록 */
  opacity:var(--mo,.16);
  transition:opacity .35s, transform .5s cubic-bezier(.2,.7,.3,1);
  pointer-events:none;
  transform-origin:30% 40%;
}
.brand:hover .brand__mark{ opacity:calc(var(--mo,.16) * 1.75); transform:scale(1.05); }

/* 아리아 스타 — 보라 원이 카드 오른쪽·아래로 잘려 나갑니다 */
.hub__grid .brand:nth-child(1){ --mw:104%; --ml:21%; --mt:31%; --mo:.17; }
/* 별 수학학원 — 분홍 별과 '아리아·별' 글자가 오른쪽으로 잘려 나갑니다 */
.hub__grid .brand:nth-child(2){ --mw:264%; --ml:16%; --mt:28%; --mo:.17; }
/* 아리아 마스터 — 금색 문장이 오른쪽으로 잘려 나갑니다 */
.hub__grid .brand:nth-child(3){ --mw:116%; --ml:24%; --mt:29%; --mo:.26; }

.brand__label{
  font-size:clamp(16px,1.75vw,24px); font-weight:700;
  letter-spacing:-.01em; color:var(--ink);
  margin-bottom:clamp(16px,2.2vh,30px);
}
.brand__name{
  font-size:clamp(28px,3.6vw,48px); font-weight:800;
  letter-spacing:-.03em; line-height:1.3; text-align:center;
  white-space:pre-line; color:var(--ink);
}
.brand__go{
  margin-top:auto; display:inline-flex; align-items:center; gap:7px;
  font-size:14px; font-weight:700; color:var(--brand);
  opacity:0; transform:translateY(6px);
  transition:opacity .3s, transform .3s;
}
.brand:hover .brand__go{ opacity:1; transform:none; }

/* ── 준비중 카드 (Coming Soon) — 누를 수 없고, 이름·로고는 보이게 ── */
.brand.is-soon{ cursor:default; }
.brand.is-soon:hover{ transform:none; border-color:var(--border); box-shadow:none; }
.brand.is-soon:hover .brand__mark{ opacity:var(--mo,.16); transform:none; }
.brand.is-soon .brand__label,
.brand.is-soon .brand__name{ opacity:.55; }
.brand__soon{
  margin-top:auto; padding:8px 20px; border-radius:999px;
  background:var(--brand); color:#fff;
  font-size:clamp(15px,1.5vw,20px); font-weight:800; letter-spacing:.06em; line-height:1.2;
  text-transform:uppercase;
}
.hub__grid .brand:nth-child(3) .brand__soon{ color:#1a1a1a; }   /* 금색 위에는 검은 글씨 */

/* ── 하단 ── */
.hub__foot{
  padding:0 clamp(20px,5vw,60px) clamp(22px,4vh,40px);
  text-align:center; font-size:13px; color:var(--ink-3);
}

/* ── 반응형 ── */
@media (max-width:860px){
  .hub__grid{ grid-template-columns:1fr; gap:14px; }
  .brand{ min-height:clamp(260px,78vw,330px); padding:24px; }
  .brand__name{ font-size:28px; }
  .brand__go{ margin-top:18px; opacity:1; transform:none; }
  .brand__soon{ margin-top:18px; }
  .hub__head{ flex-direction:column; gap:14px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}