/* =========================================================
   초등관 소개 (about.html) 전용 — sub-c-base · sub-c · sub-c-d 다음에 읽는다
   배경은 모두 흰색, 강조는 둥근 상자로만
   ========================================================= */

/* 모바일에서만 쉼표 뒤 줄바꿈 (한 단어만 떨어지지 않게) */
.m-br{display:none}
@media (max-width:760px){.m-br{display:inline}}

/* ---------- HERO '건물': 화면 가득 파노라마 띠 + 흰 바탕 숫자 띠 (합쳐서 약 75vh) ---------- */
.ab-hero{padding:var(--gnb) 0 0}
.abh-pano{position:relative;isolation:isolate;overflow:hidden;height:max(340px,calc(75vh - var(--gnb) - 150px));height:max(340px,calc(75svh - var(--gnb) - 150px));background:#0b1736;color:#fff}
.abh-img{position:absolute;top:0;bottom:0;left:0;z-index:-2;width:114%;will-change:transform}
.abh-img img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.abh-pano::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(11,23,54,.66) 0%,rgba(11,23,54,.3) 42%,rgba(11,23,54,0) 66%),linear-gradient(0deg,rgba(11,23,54,.55) 0%,rgba(11,23,54,0) 55%)}
.abh-copy{height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(28px,3.4vw,52px)}
.abh-kick{font-size:15px;font-weight:700;color:rgba(255,255,255,.84);letter-spacing:-.01em}
.abh-title{margin-top:12px;font-size:clamp(34px,4vw,62px);font-weight:800;line-height:1.18;letter-spacing:-.04em;text-shadow:0 2px 24px rgba(0,0,0,.2)}
.abh-title .g{color:#8fbcff}
.abh-down{position:absolute;right:var(--pad);bottom:clamp(28px,3.4vw,52px);display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 8px 0 18px;border-radius:99px;border:1px solid rgba(255,255,255,.55);font-size:14.5px;font-weight:700;color:#fff;transition:background-color .3s,color .3s,border-color .3s}
.abh-down i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;color:var(--ink);font-style:normal;font-size:13px}
.abh-down:hover{background:#fff;color:var(--ink);border-color:#fff}
.abh-down:hover i{background:var(--blue);color:#fff}
.abh-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(20px,3vw,48px);padding-top:clamp(22px,2.4vw,34px)}
.abh-facts li{position:relative;padding-top:16px;border-top:1px solid var(--line)}
.abh-facts li::after{content:"";position:absolute;left:0;top:-1px;width:44px;height:2px;background:var(--blue);transform-origin:0 50%}
.abh-facts b{display:flex;align-items:baseline;gap:6px;font-size:clamp(32px,3.2vw,50px);font-weight:800;letter-spacing:-.045em;line-height:1;color:var(--ink)}
.abh-facts b em{font-style:normal;font-variant-numeric:tabular-nums}
.abh-facts b small{font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--sub)}
.abh-facts span{display:block;margin-top:10px;font-size:14.5px;color:var(--sub)}
/* 숫자 띠가 차례로 올라올 때 파란 선이 그어짐 */
.abh-anim li::after{transform:scaleX(0)}
.abh-anim li.in::after{transform:none;transition:transform 1.1s var(--ease) .25s}
@media (max-width:760px){
  .abh-pano{height:max(300px,calc(75svh - var(--gnb) - 214px))}
  .abh-img{width:122%}
  .abh-img img{object-position:40% 60%}
  .abh-pano::after{background:linear-gradient(0deg,rgba(11,23,54,.72) 0%,rgba(11,23,54,.15) 60%,rgba(11,23,54,0) 80%)}
  .abh-down{display:none}
  .abh-copy{padding-bottom:24px}
  .abh-kick{font-size:13.5px}
  .abh-facts{grid-template-columns:1fr 1fr;gap:18px 16px;padding-top:20px}
  .abh-facts li{padding-top:12px}
  .abh-facts b{font-size:30px}
  .abh-facts b small{font-size:13px}
  .abh-facts span{margin-top:6px;font-size:13px;line-height:1.45}
}

/* ---------- 들어가는 말 → 한 줄 인용 ---------- */
.ab-quote{padding:clamp(64px,7.5vw,112px) 0 clamp(8px,1.5vw,24px);text-align:center}
.ab-quote p{font-size:clamp(23px,2.6vw,40px);font-weight:700;letter-spacing:-.04em;line-height:1.45;color:var(--ink)}
.ab-quote mark{padding:0 .1em;background:linear-gradient(var(--blue-l),var(--blue-l)) 0 90%/var(--hl,100%) 46% no-repeat;color:var(--blue)}
.ab-quote cite{display:block;margin-top:14px;font-style:normal;font-size:15px;font-weight:500;color:var(--mute)}
@media (max-width:760px){.ab-quote p{font-size:23px}}

/* ---------- 02 동그라미 초등관: 재단 → 초등관 → 다섯 학원 (가운데 정렬 큰 제목) ---------- */
#story .sec-head{flex-direction:column;align-items:center;gap:14px;text-align:center}
#story .sec-title{font-size:clamp(32px,4vw,60px);line-height:1.22}
#story .sec-desc{max-width:640px}
.ab-tree{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
/* 재단 칸: 연회색 카드 + 공식 로고의 동그라미 심벌 */
.tr-root{position:relative;width:min(780px,100%);padding:26px clamp(22px,3vw,40px) 22px;border-radius:28px;background:var(--gray2);border:1px solid var(--line)}
.tr-root small{display:block;font-size:13px;font-weight:700;color:var(--blue)}
.tr-brand{display:inline-flex;align-items:center;gap:12px;margin-top:8px}
.tr-sym{display:block;width:auto;height:clamp(30px,2.6vw,38px)}
.tr-root b{font-size:clamp(24px,2.3vw,34px);font-weight:800;letter-spacing:-.035em;line-height:1.2;color:var(--ink)}
.tr-sib{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 22px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--sub)}
.tr-sib li{display:flex;align-items:center;gap:8px}
.tr-sib li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blue)}
.tr-line{display:block;width:2px;height:clamp(36px,4vw,56px);background:var(--blue);transform-origin:50% 0}
/* 초등관 칸: 흰 카드 + 파란 테두리, 동그라미 초등전문 아카데미 로고 */
.tr-mid{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:12px;padding:22px clamp(26px,3vw,44px) 18px;border-radius:24px;background:#fff;border:2px solid var(--blue);box-shadow:0 20px 44px -24px rgba(49,130,246,.55)}
.tr-acad{display:block;width:auto;height:clamp(32px,2.8vw,40px)}
.tr-mid span{font-size:14px;font-weight:600;color:var(--sub)}
.tr-bus{position:relative;width:100%;height:clamp(32px,3.4vw,48px)}
.tr-bus .v2{position:absolute;left:50%;top:0;height:100%;margin-left:-1px}
.tr-h{position:absolute;left:calc((100% - 56px) / 10);right:calc((100% - 56px) / 10);bottom:0;height:2px;background:var(--blue)}
.tr-kids{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;width:100%;margin-top:28px;text-align:left}
.tr-ac{position:relative;display:flex;flex-direction:column;padding:26px 22px 20px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(2,32,71,.04);transition:border-color .3s,box-shadow .5s var(--ease),translate .6s var(--ease)}
/* 학원 로고: 같은 높이의 자리에, 생김새마다 시각 크기를 맞춤 */
.tr-logo{display:flex;align-items:center;height:56px;margin-bottom:14px}
.tr-logo img{display:block;width:auto;max-width:100%;object-fit:contain}
.tr-logo .lg-dot{height:46px}
.tr-logo .lg-orbis{height:30px;max-width:132px}
.tr-logo .lg-vin{height:38px}
.tr-logo .lg-chagall{height:56px}
.tr-wm{display:inline-flex;align-items:center;gap:7px}
.tr-wm svg{flex:none;width:32px;height:32px}
.tr-ac .tr-wm>span{display:flex;align-items:baseline;gap:4px;font-size:15px;font-weight:700;letter-spacing:-.03em;color:#8a5a00;white-space:nowrap}
.tr-ac .tr-wm b{margin:0;font-size:22px;font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--ink)}
.tr-stem{position:absolute;left:50%;top:-29px;width:2px;height:29px;margin-left:-1px;background:var(--blue);transform-origin:50% 0}
.tr-ac em{font-style:normal;font-size:13px;font-weight:700;color:var(--blue)}
.tr-ac b{margin-top:6px;font-size:20px;font-weight:800;letter-spacing:-.03em;line-height:1.3}
.tr-ac p{flex:1;margin-top:8px;font-size:14px;line-height:1.6;color:var(--sub)}
.tr-ac p small{display:block;margin-top:6px;font-size:12.5px;color:var(--mute)}
.tr-age{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:12px;border-top:1px dashed var(--line);font-size:13px;font-weight:700;color:var(--ink-2)}
.tr-age::after{content:"↗";font-size:14px;color:var(--mute);transition:translate .5s var(--ease),color .3s}
@media (hover:hover){
  .tr-ac:hover{border-color:var(--blue);translate:0 -4px;box-shadow:0 22px 40px -24px rgba(49,130,246,.45)}
  .tr-ac:hover .tr-age::after{color:var(--blue);translate:2px -2px}
}
@media (max-width:1100px){
  .tr-kids{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0}
  .tr-h,.tr-stem{display:none}
}
@media (max-width:640px){
  .tr-kids{grid-template-columns:1fr;gap:10px}
  .tr-ac{padding:18px 18px 16px}
  .tr-ac b{font-size:18px}
  .tr-mid{padding:18px 20px 16px}
  .tr-acad{height:30px}
  .tr-logo{height:56px;margin-bottom:10px}
}

/* ---------- 02 공통 교육 철학: 카드가 차례로 쌓임 (데스크톱 sticky) ---------- */
.ab-stack{display:flex;flex-direction:column}
.vc-mk{display:block;height:28px}
.vcard{position:sticky;top:calc(var(--gnb) + 76px + var(--i) * 14px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"txt ph" "q q";gap:28px clamp(28px,4vw,64px);padding:clamp(26px,3vw,44px);border-radius:28px;background:#fff;border:1px solid var(--line);box-shadow:0 -16px 44px -30px rgba(2,32,71,.3);transform-origin:50% 0}
.vc-txt{grid-area:txt;display:flex;flex-direction:column}
.vc-n{font-size:14px;font-weight:800;color:var(--blue)}
.vc-txt h3{margin-top:auto;padding-top:24px;font-size:clamp(28px,2.8vw,42px);font-weight:800;letter-spacing:-.04em;line-height:1.2}
.vc-txt p{margin-top:14px;max-width:470px;font-size:16.5px;line-height:1.7;color:var(--sub)}
.vc-ph{grid-area:ph;height:clamp(220px,21vw,300px);border-radius:20px;overflow:hidden;background:var(--gray2)}
.vc-ph img{width:100%;height:100%;object-fit:cover}
.vc-q{grid-area:q;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 20px}
.vc-q li{padding-top:14px;border-top:1px solid var(--line);font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.vc-q em{display:block;margin-bottom:4px;font-style:normal;font-size:12.5px;font-weight:800;color:var(--blue)}
@media (max-width:1100px){.vc-q{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 20px}}
@media (max-width:900px),(max-height:699px){
  .vcard{position:relative;top:auto}
}
@media (max-width:900px){
  .vcard{grid-template-columns:1fr;grid-template-areas:"ph" "txt" "q";gap:20px}
  .vc-txt h3{padding-top:10px}
  .vc-ph{height:auto;aspect-ratio:16/10}
  .vc-q{grid-template-columns:1fr;gap:0}
  .vc-q li{padding:12px 0}
  .vc-mk{height:14px}
}

/* ---------- 05 한 건물이라 가능한 것: 2×3 타일 격자 ---------- */
.tg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tg-t{position:relative;display:flex;flex-direction:column;min-height:300px;padding:clamp(22px,2.2vw,30px);border-radius:24px;background:#fff;border:1px solid var(--line);overflow:hidden;transition:border-color .4s,box-shadow .5s var(--ease),translate .6s var(--ease)}
.tg-t::before{content:"";position:absolute;left:clamp(22px,2.2vw,30px);right:clamp(22px,2.2vw,30px);top:0;height:3px;border-radius:0 0 3px 3px;background:var(--blue);transform-origin:left;transform:scaleX(var(--ln,1))}
.tg-k{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.tg-k b{font-size:15px;font-weight:800;letter-spacing:-.02em;color:var(--blue)}
.tg-k span{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.tg-t h3{margin-top:auto;padding-top:34px;font-size:clamp(21px,1.8vw,26px);font-weight:800;letter-spacing:-.035em;line-height:1.3;color:var(--ink)}
.tg-t p:not(.tg-k){margin-top:10px;font-size:15px;line-height:1.65;color:var(--sub)}
.tg-go{align-self:flex-start;margin-top:14px;font-size:14.5px;font-weight:700;color:var(--blue-d);text-decoration:underline;text-decoration-color:rgba(27,100,218,.3);text-underline-offset:4px;transition:translate .5s var(--ease)}
.tg-go:hover{translate:4px 0}
@media (hover:hover){.tg-t:not(.tg-photo):hover{border-color:#c9dcfb;box-shadow:0 22px 44px -30px rgba(49,130,246,.55);translate:0 -3px}}
/* 사진 타일 */
.tg-photo{padding:0;border:0;background:#0b1736;color:#fff}
.tg-photo::before{display:none}
.tg-photo figure{position:absolute;inset:0;margin:0;overflow:hidden;border-radius:inherit}
.tg-photo img{width:100%;height:100%;object-fit:cover}
.tg-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,23,54,0) 35%,rgba(11,23,54,.78));pointer-events:none}
.tg-photo .tg-in{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;padding:clamp(22px,2.2vw,30px)}
.tg-photo .tg-k b{color:#fff;padding:5px 10px;border-radius:8px;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:13px}
.tg-photo h3{color:#fff}
.tg-photo p:not(.tg-k){color:rgba(255,255,255,.86)}
/* 캘린더로 이어지는 한 줄 */
.tg-more{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;padding:18px 20px 18px 24px;border-radius:18px;background:var(--gray2);transition:background-color .3s}
.tg-more span{font-size:15px;color:var(--sub)}
.tg-more b{font-weight:800;color:var(--ink)}
.tg-more i{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid var(--line);font-style:normal;font-size:14px;transition:background-color .3s,color .3s,translate .5s var(--ease)}
@media (hover:hover){.tg-more:hover{background:var(--blue-l)}.tg-more:hover i{background:var(--blue);border-color:var(--blue);color:#fff;translate:3px 0}}
@media (max-width:1023px){.tg{grid-template-columns:repeat(2,minmax(0,1fr))}.tg-t{min-height:270px}}
@media (max-width:640px){
  .tg{grid-template-columns:1fr;gap:10px}
  .tg-t{min-height:0}
  .tg-t h3{padding-top:22px;font-size:21px}
  .tg-photo{min-height:240px}
  .tg-more{padding:16px 16px 16px 18px}
  .tg-more span{font-size:14px}
}

/* ---------- 01 공간: 층마다 멈추며 위로 (한 줄 인용 바로 뒤라 위 여백을 줄임) ---------- */
#space{padding-top:clamp(20px,2.4vw,40px)}
.js-motion #space .fl-stage.is-pin{padding-top:calc(var(--gnb) + 40px)}
.js-motion .fl-stage.is-pin{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--gnb) + 56px) 0 28px}
.fl-stage.is-pin .sec-head{margin-bottom:clamp(24px,2.6vw,40px)}
.fl{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,72px);align-items:center}
.fl-bld{position:relative;display:flex;align-items:flex-end;gap:10px;padding:0 0 14px 26px}
.fb-main{flex:1.7;display:flex;flex-direction:column;gap:6px;min-width:0}
.fb-annex{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.fb-no{display:block;margin-bottom:4px;font-size:12.5px;font-weight:700;color:var(--mute)}
.fb-f{display:flex;align-items:center;gap:12px;height:clamp(48px,6.4vh,64px);padding:0 16px;border-radius:14px;background:var(--gray2);border:1px solid var(--line);transition:background-color .5s,border-color .5s}
.fb-f b{min-width:24px;font-size:15px;font-weight:800;color:var(--ink);transition:color .4s}
.fb-f span{font-size:14px;font-weight:600;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .4s}
.fb-f.past{background:var(--blue-l);border-color:var(--blue-l)}
.fb-f.past b{color:var(--blue)}
.fb-f.on{background:var(--blue);border-color:var(--blue)}
.fb-f.on b,.fb-f.on span{color:#fff}
.fb-ground{position:absolute;left:14px;right:-10px;bottom:0;height:3px;border-radius:3px;background:var(--ink)}
.fb-pin{position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 6px rgba(49,130,246,.18);transform:translate(var(--px,0px),var(--py,0px));transition:transform .8s var(--ease);opacity:0}
.fl.live .fb-pin{opacity:1}
.fl-view{position:relative}
.fl-stop{position:relative}
.fl-stop figure{position:relative;overflow:hidden;border-radius:24px;aspect-ratio:16/10;background:var(--gray2)}
/* 글래스 상자 아래쪽 글자가 잘 읽히게 사진 아래를 살짝 어둡게 */
.fl-stop figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,16,40,0) 42%,rgba(8,16,40,.46));pointer-events:none}
.fl-stop img{width:100%;height:100%;object-fit:cover}
/* 층 설명: 글래스 상자 (반투명 흰 바탕 + 뒤 배경 블러 + 얇은 흰 테두리) */
.fl-cap{z-index:2;padding:20px 22px;border-radius:20px;background:rgba(255,255,255,.2);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);border:1px solid rgba(255,255,255,.38);box-shadow:0 20px 44px -18px rgba(4,12,36,.55),inset 0 1px 0 rgba(255,255,255,.28);color:#fff;text-shadow:0 1px 10px rgba(4,12,36,.28)}
.fl-cap em{font-style:normal;font-size:13px;font-weight:800;color:#d6e8ff}
.fl-cap h3{margin-top:4px;font-size:clamp(20px,1.7vw,24px);font-weight:800;letter-spacing:-.03em;line-height:1.3;color:#fff}
.fl-cap p{margin-top:6px;font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.9)}
.fl-cap a{display:inline-flex;margin-top:10px;font-size:14px;font-weight:700;color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.5);text-underline-offset:4px;transition:translate .5s var(--ease)}
.fl-cap a:hover{translate:4px 0}
.fl-count{display:none}
/* 고정 장면 (데스크톱): 사진이 아래에서 열리며 다음 층으로 */
.fl.live .fl-view{height:min(560px,calc(100vh - 330px));min-height:380px}
.fl.live .fl-stop{position:absolute;inset:0;z-index:calc(var(--k,0) + 1);visibility:hidden;transition:visibility 0s 1.1s}
.fl.live .fl-stop.on,.fl.live .fl-stop.past{visibility:visible;transition:none}
.fl.live .fl-stop figure{position:absolute;inset:0;aspect-ratio:auto;clip-path:inset(100% 0 0 0 round 24px);transition:clip-path 1.1s var(--ease)}
.fl.live .fl-stop.on figure,.fl.live .fl-stop.past figure{clip-path:inset(0 0 0 0 round 24px)}
.fl.live .fl-stop img{scale:1.16;transition:scale 1.6s var(--ease)}
.fl.live .fl-stop.on img,.fl.live .fl-stop.past img{scale:1}
.fl.live .fl-cap{position:absolute;left:clamp(14px,1.8vw,24px);bottom:clamp(14px,1.8vw,24px);max-width:min(440px,calc(100% - 28px));opacity:0;translate:0 22px;transition:opacity .3s,translate .5s var(--ease)}
.fl.live .fl-stop.on .fl-cap{opacity:1;translate:none;transition:opacity .6s .35s,translate .9s var(--ease) .35s}
.fl.live .fl-count{display:block;position:absolute;right:16px;top:16px;z-index:20;padding:6px 12px;border-radius:99px;background:rgba(255,255,255,.94);font-size:13px;font-weight:600;color:var(--mute);font-variant-numeric:tabular-nums}
.fl.live .fl-count b{color:var(--ink)}
/* 고정 없이 (모바일 · 낮은 화면): 층별 카드 목록 */
.fl:not(.live){grid-template-columns:1fr}
.fl:not(.live) .fl-bld{display:none}
.fl:not(.live) .fl-view{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:28px 20px}
.fl:not(.live) .fl-stop figure{aspect-ratio:4/5}
.fl:not(.live) .fl-cap{position:absolute;left:10px;right:10px;bottom:10px;padding:16px 18px;border-radius:18px}
.fl:not(.live) .fl-cap p{font-size:14px}

/* ---------- 사진 띠 (9장): 화면 가득, 양옆 여백만 조금 ---------- */
.ab-strip{padding:clamp(24px,3vw,48px) 0 clamp(8px,2vw,24px)}
.ab-gal-head{display:flex;justify-content:space-between;align-items:flex-end;gap:10px 32px;flex-wrap:wrap;margin-bottom:clamp(20px,2.2vw,32px)}
.ab-gal-head h3{font-size:clamp(26px,2.6vw,40px);font-weight:800;letter-spacing:-.035em;line-height:1.25}
.ab-gal-head h3 .g{color:var(--blue)}
.ab-gal-head p{font-size:15px;color:var(--sub)}
.ab-gal-wrap{padding:0 clamp(12px,1.4vw,24px)}
.ab-gal{grid-template-rows:repeat(6,clamp(96px,9.2vw,160px));gap:clamp(8px,.9vw,14px)}
.ab-gal .g-item{border-radius:clamp(16px,1.4vw,24px)}
.ab-gal .ga{grid-column:1/4;grid-row:1/5}
.ab-gal .gb{grid-column:4/9;grid-row:1/3}
.ab-gal .gc{grid-column:9/13;grid-row:1/3}
.ab-gal .gd{grid-column:4/7;grid-row:3/5}
.ab-gal .ge{grid-column:7/10;grid-row:3/5}
.ab-gal .gf{grid-column:10/13;grid-row:3/5}
.ab-gal .gg{grid-column:1/6;grid-row:5/7}
.ab-gal .gh{grid-column:6/10;grid-row:5/7}
.ab-gal .gi{grid-column:10/13;grid-row:5/7}
@media (max-width:760px){
  .ab-gal{grid-template-rows:none}
  .ab-gal .g-item{grid-column:auto;grid-row:auto}
  .ab-gal .ga{grid-row:span 2}
}

/* ---------- 05 인증 · 성과: 큰 숫자 장면 ---------- */
.js-motion .pf-stage.is-pin{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--gnb) + 56px) 0 28px}
.pf-stage.is-pin .sec-head{margin-bottom:clamp(24px,2.6vw,40px)}
.pf{position:relative;display:grid;gap:clamp(40px,5vw,72px)}
.pf-step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:center}
.pf-step figure{position:relative;overflow:hidden;border-radius:24px;aspect-ratio:4/3;background:var(--gray2)}
.pf-step img{width:100%;height:100%;object-fit:cover}
.pf-tag{font-size:14px;font-weight:700;color:var(--blue)}
.pf-num{display:flex;align-items:baseline;gap:6px;margin:12px 0 20px;line-height:.86}
.pf-num b{font-size:clamp(96px,11.5vw,180px);font-weight:800;letter-spacing:-.06em;color:var(--ink);font-variant-numeric:tabular-nums}
.pf-num span{font-size:clamp(26px,2.6vw,40px);font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.pf-txt h3{font-size:clamp(21px,1.9vw,28px);font-weight:800;letter-spacing:-.035em;line-height:1.4}
.pf-d{margin-top:10px;font-size:15px;color:var(--sub)}
.pf-dots{display:none}
.pf.live{height:min(520px,calc(100vh - 330px));min-height:380px}
.pf.live .pf-step{position:absolute;inset:0;z-index:calc(var(--k,0) + 1);visibility:hidden;transition:visibility 0s 1.1s}
.pf.live .pf-step.on,.pf.live .pf-step.past{visibility:visible;transition:none}
.pf.live .pf-step figure{height:100%;aspect-ratio:auto;clip-path:inset(100% 0 0 0 round 24px);transition:clip-path 1.1s var(--ease)}
.pf.live .pf-step.on figure,.pf.live .pf-step.past figure{clip-path:inset(0 0 0 0 round 24px)}
.pf.live .pf-step img{scale:1.16;transition:scale 1.6s var(--ease)}
.pf.live .pf-step.on img,.pf.live .pf-step.past img{scale:1}
.pf.live .pf-txt{opacity:0;translate:0 26px;transition:opacity .25s,translate .4s var(--ease)}
.pf.live .pf-step.on .pf-txt{opacity:1;translate:none;transition:opacity .6s .3s,translate .9s var(--ease) .3s}
.pf.live .pf-dots{position:absolute;right:0;top:50%;z-index:20;translate:0 -50%;display:flex;flex-direction:column;gap:8px}
.pf-dots li{width:4px;height:26px;border-radius:4px;background:var(--line);transition:background-color .4s,height .5s var(--ease)}
.pf-dots li.on{height:44px;background:var(--blue)}
@media (max-width:760px){
  .pf-step{grid-template-columns:1fr;gap:18px}
  .pf-num{margin:8px 0 14px}
  .pf-num b{font-size:88px}
}

/* 공식 인증 · 학원 등록 */
.ab-certs{margin-top:clamp(64px,8vw,112px)}
.ce-head{display:flex;justify-content:space-between;align-items:flex-end;gap:10px 32px;flex-wrap:wrap;margin-bottom:24px;padding-top:24px;border-top:1px solid var(--line)}
.ce-head h3{font-size:clamp(22px,2vw,28px);font-weight:800;letter-spacing:-.03em}
.ce-head p{font-size:15px;color:var(--sub)}
.ce-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ce{display:flex;flex-direction:column;overflow:hidden;border-radius:22px;border:1px solid var(--line);background:#fff}
.ce figure{aspect-ratio:4/3;overflow:hidden;background:var(--gray2)}
.ce img{width:100%;height:100%;object-fit:cover;transition:scale 1.2s var(--ease)}
@media (hover:hover){.ce:hover img{scale:1.05}}
.ce .ce-type{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:linear-gradient(160deg,#3182f6,#1b64da);color:#fff}
.ce-type span{font-size:clamp(44px,4.4vw,64px);font-weight:800;letter-spacing:-.04em;line-height:1}
.ce-type small{font-size:14px;font-weight:700;opacity:.88}
.ce>div{padding:18px 20px 22px}
.ce em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--blue)}
.ce b{display:block;margin-top:4px;font-size:17px;font-weight:800;letter-spacing:-.025em;line-height:1.35}
.ce p{margin-top:6px;font-size:14px;color:var(--sub)}
.ce-reg{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;margin-top:14px;padding:20px 24px;border-radius:20px;background:var(--gray2)}
.ce-reg-t{font-size:14.5px;font-weight:800;color:var(--ink)}
.ce-reg-t small{display:block;font-size:12.5px;font-weight:500;color:var(--mute)}
.ce-reg ul{display:flex;flex-wrap:wrap;gap:8px 26px;font-size:14.5px;color:var(--sub)}
.ce-reg li b{margin-right:6px;font-weight:700;color:var(--ink)}
.ce-reg li small{font-size:12.5px;color:var(--mute)}
@media (max-width:1100px){.ce-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .ce>div{padding:14px 14px 16px}
  .ce b{font-size:15.5px}
  .ce-list{gap:10px}
  .ce-reg{padding:18px}
  .ce-reg ul{flex-direction:column;gap:6px}
}

/* ---------- 06 오시는 길: 디자인한 약도 ---------- */
.ab-visit{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:start}
/* 실제 지도 (구글 지도 임베드) — 회색 바탕 + 주소를 자리표시로 깔고, 덮개를 눌러야 지도 조작 */
.ab-gmap{position:relative;isolation:isolate;overflow:hidden;height:clamp(420px,34vw,480px);border-radius:28px;background:#eef2f7}
.gm-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:14.5px;color:var(--sub);text-align:center}
.gm-ph b{font-size:18px;font-weight:800;color:var(--ink)}
.ab-gmap iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
.gm-cover{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;background:rgba(11,23,54,0);cursor:pointer;transition:background-color .35s,opacity .35s}
.gm-cover span{padding:10px 18px;border-radius:99px;background:rgba(11,23,54,.8);font-size:14px;font-weight:700;color:#fff;opacity:0;translate:0 8px;transition:opacity .35s,translate .5s var(--ease)}
.gm-cover:hover{background:rgba(11,23,54,.08)}
.gm-cover:hover span,.gm-cover:focus-visible span{opacity:1;translate:none}
@media (hover:none){.gm-cover span{opacity:1;translate:none}}
.ab-gmap.gm-on .gm-cover{opacity:0;pointer-events:none}
.gm-chips{position:absolute;right:16px;top:16px;z-index:3;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none}
.gm-chips li{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:14px;background:#fff;box-shadow:0 12px 26px -12px rgba(2,32,71,.38)}
.gm-chips b{display:grid;place-items:center;min-width:34px;height:28px;padding:0 6px;border-radius:8px;background:var(--blue);font-size:13.5px;font-weight:800;color:#fff}
.gm-chips .c68 b{background:#0b1736}
.gm-chips span{font-size:14px;font-weight:700;line-height:1.3;color:var(--ink)}
.gm-chips small{display:block;font-size:12px;font-weight:500;color:var(--mute)}
/* 약도는 작게, 보조로 */
.ab-map-sub{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;align-items:center;margin-top:16px}
.ab-map-side .mp-note{margin-top:0}
.ab-map.is-mini{border-radius:18px}
.ab-map.is-mini .mp-pin{gap:4px}
.ab-map.is-mini .mp-pin i{width:11px;height:11px;border-width:2px}
.ab-map.is-mini .mp-pin span{gap:0;padding:3px;border-radius:8px;font-size:0}
.ab-map.is-mini .mp-pin span b{min-width:24px;height:18px;font-size:11px}
.ab-map.is-mini .mp-st{font-size:24px}
.ab-map{position:relative;overflow:hidden;aspect-ratio:600/440;border-radius:28px;background:#eef2f7}
.ab-map svg{position:absolute;inset:0;width:100%;height:100%}
.mp-blocks rect{fill:#fff;stroke:#e1e7ef;stroke-width:1.5}
.mp-road{fill:none;stroke:#dbe3ee;stroke-width:18;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:0}
.mp-road.main{stroke:#c7d7ee;stroke-width:28}
.mp-road.thin{stroke-width:10}
.mp-b64{fill:var(--blue)}
.mp-b68{fill:#0b1736}
.mp-st{font-size:14px;font-weight:700;letter-spacing:-.02em;fill:#4e5968}
.mp-pin{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px}
.mp-pin.p64{left:52%;top:43.2%;flex-direction:column-reverse;translate:-50% -100%}
.mp-pin.p68{left:65.5%;top:61.4%;translate:-50% 0}
.mp-pin i{display:block;width:16px;height:16px;border-radius:50%;background:var(--blue);border:3px solid #fff;box-shadow:0 2px 8px rgba(2,32,71,.25);animation:mpPulse 2.2s ease-out infinite}
.mp-pin.p68 i{background:#0b1736;animation-delay:1.1s}
.mp-pin span{display:flex;align-items:center;gap:8px;white-space:nowrap;padding:8px 12px;border-radius:12px;background:#fff;box-shadow:0 12px 26px -12px rgba(2,32,71,.38);font-size:14px;font-weight:700;color:var(--ink)}
.mp-pin span b{display:grid;place-items:center;min-width:28px;height:22px;padding:0 6px;border-radius:7px;background:var(--blue);color:#fff;font-size:12.5px;font-weight:800}
.mp-pin.p68 span b{background:#0b1736}
@keyframes mpPulse{0%{box-shadow:0 0 0 0 rgba(49,130,246,.45),0 2px 8px rgba(2,32,71,.25)}70%{box-shadow:0 0 0 16px rgba(49,130,246,0),0 2px 8px rgba(2,32,71,.25)}100%{box-shadow:0 0 0 0 rgba(49,130,246,0),0 2px 8px rgba(2,32,71,.25)}}
.mp-note{margin-top:12px;font-size:13px;color:var(--mute)}
.mp-links{margin-top:12px}
.mp-links .btn{font-size:14.5px}
.ab-bld{overflow:hidden;aspect-ratio:16/10;border-radius:22px;background:var(--gray2)}
.ab-bld img{width:100%;height:100%;object-fit:cover;object-position:50% 66%}
.ab-info dl{margin-top:20px;border-top:1px solid var(--ink)}
.ab-info dl div{display:grid;grid-template-columns:56px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.ab-info dt{padding-top:1px;font-size:14px;color:var(--mute)}
.ab-info dd{font-size:15.5px;font-weight:700;color:var(--ink);letter-spacing:-.015em}
.ab-info dd small{display:block;margin-top:2px;font-size:13.5px;font-weight:500;color:var(--sub);letter-spacing:-.01em}
.ab-info dd a{color:var(--blue)}
@media (max-width:900px){
  .ab-visit{grid-template-columns:1fr}
}
@media (max-width:760px){
  .ab-gmap{height:320px;border-radius:22px}
  .gm-chips{right:10px;top:auto;bottom:44px;gap:6px}
  .gm-chips li{padding:6px 12px 6px 6px}
  .gm-chips small{display:none}
  .gm-chips span{font-size:13px}
  .ab-map-sub{grid-template-columns:118px minmax(0,1fr);gap:14px}
}
@media (max-width:560px){
  .ab-map{aspect-ratio:5/4}
  .mp-pin span{padding:6px 10px;font-size:12.5px}
}

/* ---------- 마무리: 오시는 길에 이어지는 연한 파랑 방문 띠 (남색 상담 상자 대신) ---------- */
#visit{padding-bottom:clamp(28px,3.4vw,48px)}
.ab-close{padding:0 0 clamp(64px,8vw,112px)}
.abc-box{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px 56px;padding:clamp(28px,3.4vw,48px) clamp(24px,4vw,60px);border-radius:28px;background:var(--blue-l)}
.abc-txt h2{font-size:clamp(26px,2.7vw,40px);font-weight:800;letter-spacing:-.035em;line-height:1.25;color:var(--ink)}
.abc-txt h2 .g{color:var(--blue)}
.abc-txt p{margin-top:10px;max-width:560px;font-size:16px;line-height:1.7;color:var(--sub)}
.abc-act{display:flex;align-items:center;gap:18px 32px;flex-wrap:wrap}
.abc-tel{display:flex;flex-direction:column;gap:2px;font-size:clamp(26px,2.3vw,34px);font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--ink);font-variant-numeric:tabular-nums;transition:color .3s}
.abc-tel small{font-size:13px;font-weight:700;letter-spacing:-.01em;color:var(--blue)}
.abc-tel:hover{color:var(--blue-d)}
@media (max-width:900px){
  .abc-box{grid-template-columns:1fr}
}
@media (max-width:560px){
  .abc-act{flex-direction:column;align-items:stretch}
  .abc-act .btn{justify-content:space-between}
}
/* 방문 띠에 닿으면 붙어 다니는 목차를 접음 (공통 파일은 .cta 상자 기준이라 이 페이지에선 직접) */
.chap.ab-off{opacity:0;translate:-50% -14px;pointer-events:none}