@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════
   HOME — 2026-09-14 수정안 (담당 A)
   H-1 히어로 배지 = 심볼 / H-2 시뮬레이션 보드 글래스 재작업 + TYPE1·TYPE2 스크롤 그래픽
   H-3 SYSTEM 더 알아보기 / H-4·5 IP 벤토(PYP 대형 카드) / H-8 EDUSILI 링크
   ※ 전역 토큰·컴포넌트는 site.css. 여기서는 홈 스코프 오버라이드만 둔다.
   ══════════════════════════════════════════════════════════════════ */

/* ══ 1. HERO — 4차 수정(10-06) s1·2: 클라 메인 대문 이미지 키비주얼 ══════════════════════
   클라 시안(s-02)을 받은 원본(16:9, 'LEARNING' 포함)에 대조해 맞췄다(SIFT·템플릿 정합):
   · 세로 크롭 = 시안과 같은 구간 — 원본 위 3.5%·아래 14.7%(책상 다리)를 덜어 낸 2.17:1 띠.
     폭 가득 채우면 1512×982 에서 띠 696px, 첫 화면 아래로 다음 섹션이 들여다보인다(시안과 같은 흐름).
   · 시안은 이보다 좌우가 넓은 별도 와이드 원본(글자 L·G 까지 다 보이고 아이가 더 작음)으로 만들어져 있다.
     받은 파일엔 그 좌우가 없어 폭은 원본 그대로 — 와이드 원본을 받으면 이미지만 교체하면 된다.
   · 슬로건 = 시안 실측(1816px 캡처): 제목 2.3vw·600·남색→페리윙클 그라디언트, 영문 1.05vw·자간 .36em·보라,
     블록 아래끝이 띠 높이의 90%, 왼선은 'L' 기둥 아래(= 1512 에서 컨테이너 왼선).
   예전 히어로(배지·설명·칩·버튼·격자·블롭·데이터 라인)는 시안에 없어 걷었다. */
.khero{position:relative;margin-top:var(--nav-h);background:#EEF0FA;isolation:isolate}
.khero__media{position:relative;height:min(46.05vw,calc(100svh - var(--nav-h)));min-height:300px;overflow:hidden}
.khero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 19%;display:block}   /* 19% = 위 33px : 아래 138px(원본 941px 기준) — 시안 크롭 */
.khero__copy{position:absolute;z-index:1;left:max(var(--pad),3.75vw);bottom:clamp(24px,10%,128px);
  display:grid;gap:clamp(8px,.88vw,14px)}
.khero__title{margin:0;font-size:clamp(1.7rem,2.3vw,2.9rem);font-weight:600;line-height:1.26;
  letter-spacing:-.012em;white-space:normal;color:#282B81;
  background:linear-gradient(90deg,#282B81 0%,#3A3F98 55%,#4F57AE 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.khero__title--2l{white-space:pre-line}   /* EN 슬로건은 길어서 원문 \n 그대로 2줄(의자와 겹치지 않게) */
/* 영문 줄 — 시안 보라(#8179F8)는 안개 바탕에서 3:1 이라, 같은 색상각으로 명도만 낮춰 4.6:1 이상 */
.khero__en{margin:0;font-size:clamp(.88rem,1.05vw,1.32rem);font-weight:500;line-height:1.3;
  letter-spacing:.36em;color:#5048C8;
  background:linear-gradient(90deg,#5048C8,#635BDA);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}


/* 탭 그룹 × 고정 FAB 충돌 — site.css 정책으로 해결(FAB은 첫 화면에서 숨고 스크롤 후 아이콘형). 홈 전용 keepout 없음 */

/* ══ 2. STARBURST 시뮬레이션 스테이지 ═══════════════════════════════
   '별똥별' 콘셉트. 딥 인디고 하늘(캔버스: 별밭·유성) 위에 글래스 요소.
   스크롤 진행 변수(home.js가 .cosmos 에 기록):
     --q  전체 0→1   --qa 별똥별 낙하·입력 유입   --qb 버스트   --qc 6단계(0→6)   --qd 결과
   점등 상태는 클래스(.is-lit)로, 연속 변화는 변수로. ═══════════════════ */
/* 3차(09-22) s2 — 스크롤 전반=유아, 후반=사교육 연속 재생: 260vh → 460vh(시퀀스 2회 + 전환 구간).
   --Q = 전체 진행(스크롤 힌트용) · --mix = 모드 배경 크로스페이드(0=유아 인디고, 1=사교육 플럼) */
.cosmos{position:relative;height:460vh;
  --q:0;--qa:0;--qb:0;--qc:0;--qd:0;--Q:0;--mix:0;
  background:#14102A}
.cosmos__stage{position:sticky;top:0;height:100vh;min-height:720px;overflow:hidden;
  color:#fff;isolation:isolate;
  background:radial-gradient(120% 90% at 50% 18%,#3A2F7A 0%,#2A2160 34%,#1B1540 64%,#14102A 100%)}
/* ── 라이트 웨이브(09-27 재작업) — 디자인적 대비 = 밤(유아) ↔ 새벽 라이트(사교육) 완전 반전.
   전환은 페이드가 아니라 코어에서 퍼지는 원형 광파: --mix(스크롤/트윈 구동)로 clip-path 원이
   확장되며 밝은 하늘이 밤하늘을 '씻어내듯' 덮는다. dawnglow(반경 +10%)가 앞서 나가는
   오로라 림(웨이브 프런트)이 된다. 스크럽 완전 가역. ── */
.cosmos__dawn{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(56% 42% at 80% 6%,rgba(195,148,194,.28),transparent 70%),
    radial-gradient(48% 40% at 10% 88%,rgba(127,162,213,.30),transparent 72%),
    radial-gradient(120% 90% at 50% 18%,#FFFFFF 0%,#F8F7FC 38%,#EDECF8 66%,#E3E6F5 100%);
  clip-path:circle(calc(var(--mix) * 110%) at 50% 55%)}
.cosmos__dawnglow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 50% 55%,
    rgba(255,255,255,.95),rgba(195,148,194,.80) 34%,rgba(127,162,213,.62) 62%,rgba(134,99,168,.55) 100%);
  clip-path:circle(calc(var(--mix) * 120%) at 50% 55%);
  filter:blur(7px);
  opacity:min(1,calc(var(--mix) * 16))}
.cosmos__sky{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
/* 라이트 모드에선 다크 비네트가 탁해지므로 웨이브 진행에 맞춰 걷어낸다 */
.cosmos__vignette{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(90% 70% at 50% 50%,transparent 55%,rgba(20,16,42,.55) 100%);
  opacity:calc(1 - var(--mix) * .85)}
.cosmos__in{position:relative;z-index:2;height:100%;
  display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;
  grid-template-columns:minmax(0,1fr);   /* 4차 검수 — 하단 축 칩 줄의 최소 폭이 트랙을 1095px 로 밀어 1081~1150px 에서 탭이 잘리던 기존 결함 */
  padding-top:calc(var(--nav-h) + clamp(18px,3vh,36px));padding-bottom:clamp(14px,2.4vh,26px);gap:clamp(8px,1.6vh,18px)}
.cosmos__head{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.eyebrow--light{color:var(--blossom-400)}
.cosmos__title{color:#fff;letter-spacing:-.03em}
.tabs--dark{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
.tabs--dark .tab{color:rgba(255,255,255,.72)}
.tabs--dark .tab:hover{color:#fff}
.tabs--dark .tab.is-on{background:#fff;color:var(--indigo-900);box-shadow:0 8px 24px rgba(0,0,0,.35)}
/* 두 패널은 같은 셀에 겹친다. 전환은 패널 페이드가 아니라 구슬 개별 안무(--ex/--en, 아래)가
   담당하고, visibility 는 안무가 끝난 뒤(.9s 지연)에만 꺼져 나가는 장면의 비행을 자르지 않는다 */
/* 10-24 — 열을 minmax(0,1fr)로 묶음. 암묵 auto 열이 구슬 상자의 '높이×비율' 최소 폭(1800px 화면에서 1840px)만큼
   커져 컨테이너 밖으로 넘치고 코어가 오른쪽으로 밀리던 결함(큰 화면일수록 심함). 코어 레이어도 같은 구조 */
.cosmos .sim{display:grid;grid-row:2 / span 2;grid-column:1;min-height:0;
  grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr);gap:clamp(6px,1.4vh,16px);
  visibility:hidden;pointer-events:none;
  transition:visibility 0s linear .9s}
.cosmos .sim.is-on{visibility:visible;pointer-events:auto;animation:none;transition:visibility 0s}
/* 공유 코어 레이어 — 패널과 같은 셀·같은 내부 행 구조(유령 리드로 orbits 박스 정렬) */
.cosmos__corelayer{display:grid;grid-row:2 / span 2;grid-column:1;min-height:0;
  grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr);gap:clamp(6px,1.4vh,16px);pointer-events:none}
.cosmos__lead--ghost{visibility:hidden}
.orbits--core{pointer-events:none}
.cosmos__lead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:.92rem;color:rgba(255,255,255,.72)}
.sim__chip--dark{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.18)}
/* 사교육 패널 = 라이트 스킨(밝은 하늘 위 잉크 텍스트) — 패널 스코프라 웨이브가 지나가면 그대로 노출 */
.sim[data-sim="academy"] .cosmos__lead{color:rgba(20,16,42,.68)}
.sim[data-sim="academy"] .sim__chip--dark{background:rgba(103,91,159,.10);color:var(--indigo-900);
  border-color:rgba(103,91,159,.30)}
.cosmos__hd{font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:10px}

/* ── 구슬 필드 ─────────────────────────────────────────────────
   카드·연결선·궤도 없음. 12개의 유리 구슬이 흩어져 부유(bob)한다.
   외부 래퍼(.orb) = 위치 + 버스트 확산(--qd 로 바깥 방향 --ox/--oy 만큼 밀림),
   내부(.orb__b) = 구슬 본체 + 부유 애니메이션. 점등(.is-lit)은 home.js. */
.orbits{position:relative;z-index:1;width:100%;aspect-ratio:1400/620;max-height:100%;min-height:0;margin-inline:auto;align-self:center}
.ocore{position:absolute;left:50%;top:52%;width:clamp(200px,24vw,300px);aspect-ratio:1;
  transform:translate(-50%,-50%);display:grid;place-items:center;pointer-events:none}
.ocore__glow{position:absolute;left:50%;top:50%;width:70%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(195,148,194,.55) 26%,rgba(127,162,213,.28) 48%,transparent 70%);
  transform:translate(-50%,-50%) scale(calc(.12 + var(--qb) * 1.25));
  opacity:calc(.15 + var(--qb) * .85);filter:blur(calc(6px + var(--qb) * 10px))}
.ocore__rays{position:absolute;inset:-18%;width:136%;height:136%;
  transform:rotate(calc(var(--qb) * 24deg));opacity:calc(var(--qb) * (1.7 - var(--qb)))}
.ocore__rays line{stroke:rgba(255,255,255,1);stroke-width:1.5;stroke-linecap:round;
  vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--qb))}
.ocore__rays line:nth-child(even){stroke:rgba(195,148,194,.9)}
.ocore__center{position:relative;z-index:2;display:grid;justify-items:center;gap:8px;
  transform:scale(calc(.82 + min(1,var(--qb)) * .18))}
.ocore__sym{width:clamp(56px,7.2vw,84px);height:auto;filter:drop-shadow(0 0 22px rgba(255,255,255,.55)) drop-shadow(0 8px 24px rgba(0,0,0,.35))}
.ocore__lbl{font-size:.64rem;font-weight:800;letter-spacing:.16em;text-align:center;line-height:1.35;color:rgba(255,255,255,.9)}

/* --k = 구슬별로 지연 추종하는 확산량(0→1, home.js 가 매 프레임 개별 이징) · --px/--py = 구슬별 패럴랙스(px)
   → 스크롤 시 12개가 한 덩어리로 움직이지 않고 저마다 조금씩 늦게, 다른 깊이로 따라온다 */
/* 3차(09-22) s2 — 대비 강화: 비점등 구슬도 윤곽이 분명하게(불투명도·외곽선·하이라이트 톤 업) */
.orb{position:absolute;--ox:0px;--oy:0px;--k:0;--px:0px;--py:0px;--d:110px;width:var(--d);aspect-ratio:1;
  transform:translate(-50%,-50%) translate(calc(var(--ox) * var(--k) + var(--px)),calc(var(--oy) * var(--k) + var(--py)));
  opacity:.46;transition:opacity .6s var(--ease);will-change:transform}
.orb--sm{--d:92px}
.orb.is-lit{opacity:1}
.orb__b{position:relative;display:grid;place-items:center;text-align:center;width:100%;height:100%;border-radius:50%;
  padding:10px;box-sizing:border-box;
  background:
    radial-gradient(circle at 32% 28%,rgba(255,255,255,.60) 0%,rgba(255,255,255,.16) 22%,rgba(255,255,255,.05) 48%,rgba(255,255,255,0) 70%),
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.08),rgba(255,255,255,.03) 60%,rgba(20,16,42,.25) 100%);
  border:1px solid rgba(255,255,255,.38);
  box-shadow:inset 0 -14px 26px rgba(20,16,42,.35),inset 0 2px 0 rgba(255,255,255,.5),0 18px 44px rgba(0,0,0,.35);
  animation:orbBob var(--bob,6s) ease-in-out infinite alternate;
  transition:box-shadow .6s var(--ease),border-color .6s var(--ease),transform .6s var(--ease)}
/* 구슬마다 부유 주기·위상 다르게 */
.orb:nth-child(2n) .orb__b{--bob:7.2s;animation-delay:-2.1s}
.orb:nth-child(3n) .orb__b{--bob:5.4s;animation-delay:-1.3s}
.orb:nth-child(5n) .orb__b{--bob:8.1s;animation-delay:-3.4s}
@keyframes orbBob{from{translate:0 -6px}to{translate:0 7px}}
.orb__b b{display:block;font-size:.66rem;font-weight:800;letter-spacing:.12em;color:#fff;line-height:1.3}
.orb--sm .orb__b b{font-size:.72rem;letter-spacing:-.012em;font-weight:700;word-break:keep-all}
.orb__b span{display:block;margin-top:4px;font-size:.74rem;line-height:1.35;color:rgba(255,255,255,.86);letter-spacing:-.012em;word-break:keep-all}
/* 점등: 톤 색 림 글로우 + 내부 하이라이트 강화 — 3차(09-22) 네온 톤 업 */
.orb.is-lit .orb__b{border-color:color-mix(in srgb,var(--tone,var(--sky-400)) 85%,#fff);
  box-shadow:inset 0 -14px 26px color-mix(in srgb,var(--tone,var(--sky-400)) 26%,rgba(20,16,42,.35)),
             inset 0 2px 0 rgba(255,255,255,.55),
             0 0 0 5px color-mix(in srgb,var(--tone,var(--sky-400)) 26%,transparent),
             0 0 42px color-mix(in srgb,var(--tone,var(--sky-400)) 75%,transparent),
             0 18px 44px rgba(0,0,0,.35)}
/* 좌표(%, 1400×620 기준) + 버스트 확산 벡터(중심(50,52)에서 바깥으로) */
[data-orb="s1"]{left:44%;top:11%;--ox:-8px;--oy:-26px}
[data-orb="s2"]{left:69%;top:19%;--ox:22px;--oy:-22px}
[data-orb="s3"]{left:78%;top:64%;--ox:28px;--oy:8px}
[data-orb="s4"]{left:57%;top:90%;--ox:6px;--oy:26px}
[data-orb="s5"]{left:27%;top:84%;--ox:-24px;--oy:20px}
[data-orb="s6"]{left:21%;top:37%;--ox:-28px;--oy:-10px}
[data-orb="in1"]{left:8.5%;top:14%;--ox:-30px;--oy:-22px}
[data-orb="in2"]{left:11%;top:64%;--ox:-30px;--oy:8px}
[data-orb="in3"]{left:33%;top:53%;--ox:-18px;--oy:2px}
[data-orb="in4"]{left:45%;top:82%;--ox:-4px;--oy:24px}
[data-orb="out1"]{left:86%;top:30%;--ox:30px;--oy:-16px}
[data-orb="out2"]{left:90%;top:88%;--ox:30px;--oy:22px}

/* ── 전환 안무(09-27) — 크로스페이드 금지. --mix 로 구슬이 개별 비행한다.
   유아 구슬: --ex(0→1, 구슬별 --st 시차)로 버스트 벡터를 따라 밖으로 날아가며 커지고 사라진다.
   사교육 구슬: --en 으로 같은 벡터의 바깥에서 제자리로 날아들어온다. 스크럽 완전 가역. ── */
.cosmos .orb:nth-child(2n){--st:.05}
.cosmos .orb:nth-child(3n){--st:.09}
.cosmos .orb:nth-child(4n){--st:.13}
.cosmos .orb:nth-child(5n){--st:.16}
.sim[data-sim="kinder"] .orb{
  --ex:clamp(0,calc((var(--mix) - var(--st,0)) / .3),1);
  opacity:calc(.46 * (1 - var(--ex)));
  transform:translate(-50%,-50%)
    translate(calc(var(--ox) * (var(--k) + var(--ex) * 9) + var(--px)),
              calc(var(--oy) * (var(--k) + var(--ex) * 9) + var(--py)))
    scale(calc(1 + var(--ex) * .45))}
.sim[data-sim="kinder"] .orb.is-lit{opacity:calc(1 - var(--ex))}
.sim[data-sim="academy"] .orb{
  --en:clamp(0,calc((var(--mix) - .52 - var(--st,0)) / .3),1);
  opacity:calc(.62 * var(--en));
  transform:translate(-50%,-50%)
    translate(calc(var(--ox) * (var(--k) + (1 - var(--en)) * 9) + var(--px)),
              calc(var(--oy) * (var(--k) + (1 - var(--en)) * 9) + var(--py)))
    scale(calc(.74 + var(--en) * .26))}
.sim[data-sim="academy"] .orb.is-lit{opacity:var(--en)}

/* ── 사교육 = 라이트 스킨 구슬(밝은 하늘 위 화이트 글래스 + 잉크 텍스트) ── */
.sim[data-sim="academy"] .orb__b{
  background:
    radial-gradient(circle at 32% 28%,#fff 0%,rgba(255,255,255,.90) 30%,rgba(255,255,255,.62) 62%,rgba(255,255,255,.34) 100%);
  border:1px solid rgba(49,40,105,.28);
  box-shadow:inset 0 2px 0 #fff,inset 0 -12px 22px rgba(103,91,159,.12),0 14px 34px rgba(49,40,105,.16)}
.sim[data-sim="academy"] .orb__b b{color:var(--indigo-900)}
.sim[data-sim="academy"] .orb__b span{color:rgba(20,16,42,.66)}
.sim[data-sim="academy"] .orb.is-lit .orb__b{
  border-color:color-mix(in srgb,var(--tone,var(--sky-400)) 72%,#fff);
  box-shadow:inset 0 2px 0 #fff,
    0 0 0 5px color-mix(in srgb,var(--tone,var(--sky-400)) 20%,transparent),
    0 12px 38px color-mix(in srgb,var(--tone,var(--sky-400)) 42%,transparent),
    0 14px 34px rgba(49,40,105,.12)}

/* ── 공유 요소 라이트 반전(js 가 .cosmos[data-mode] 기록, 웨이브가 지나는 .5s 동안 색이 넘어간다) ── */
.cosmos__title,.eyebrow--light,.ocore__lbl,.axis--dark,
.tabs--dark,.tabs--dark .tab{transition:color .5s var(--ease),background-color .5s var(--ease),border-color .5s var(--ease)}
.ocore__rays line{transition:stroke .5s var(--ease)}
.cosmos[data-mode="academy"] .cosmos__title{color:var(--indigo-900)}
.cosmos[data-mode="academy"] .eyebrow--light{color:var(--violet-500)}
.cosmos[data-mode="academy"] .ocore__lbl{color:var(--indigo-900)}
.cosmos[data-mode="academy"] .ocore__rays line{stroke:rgba(103,91,159,.85)}
.cosmos[data-mode="academy"] .ocore__rays line:nth-child(even){stroke:rgba(195,148,194,.95)}
.cosmos[data-mode="academy"] .ocore__glow{
  background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(195,148,194,.55) 30%,rgba(134,99,168,.32) 52%,transparent 72%)}
.cosmos[data-mode="academy"] .ocore__sym{
  filter:drop-shadow(0 0 22px rgba(134,99,168,.45)) drop-shadow(0 8px 24px rgba(49,40,105,.16))}
.cosmos[data-mode="academy"] .tabs--dark{background:rgba(20,16,42,.05);border-color:rgba(20,16,42,.12)}
.cosmos[data-mode="academy"] .tabs--dark .tab{color:rgba(20,16,42,.62)}
.cosmos[data-mode="academy"] .tabs--dark .tab:hover{color:var(--indigo-900)}
.cosmos[data-mode="academy"] .tabs--dark .tab.is-on{background:var(--indigo-900);color:#fff;
  box-shadow:0 8px 24px rgba(49,40,105,.28)}
.cosmos[data-mode="academy"] .axis--dark{border-color:rgba(20,16,42,.14);background:rgba(20,16,42,.04);
  color:rgba(20,16,42,.66)}

/* 하단: 축 칩 + 스크롤 힌트 */
.cosmos__foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.cosmos__foot .cosmos__scroll{grid-column:2;justify-self:center}
.cosmos__axes{margin-top:0}
.axis--dark{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:rgba(255,255,255,.8)}
/* 스크롤 힌트 — q 는 모드별로 리셋되므로 전체 진행(--Q) 기준으로만 사라진다 */
.cosmos__scroll{display:inline-flex;align-items:center;gap:10px;font-size:.68rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.55);opacity:calc(1 - var(--Q) * 2.4)}
.cosmos__scroll i{width:38px;height:1px;background:rgba(255,255,255,.45);position:relative;overflow:hidden}
.cosmos__scroll i::after{content:"";position:absolute;left:0;top:0;width:14px;height:100%;background:#fff;animation:scrollhint 1.6s var(--ease) infinite}
@keyframes scrollhint{from{transform:translateX(-14px)}to{transform:translateX(38px)}}

/* ══ 3. H-3 SYSTEM — STAR/BURST 아래 '더 알아보기' ══ */
.creed{position:relative;overflow:hidden}
.creed__sentence{color:var(--indigo-900)}
/* 라벨(STAR/BURST)과 같은 왼쪽 기준선에 놓인다 — creed__name 그리드의 새 행 */
.creed__more{justify-self:start;margin-top:16px}

/* ══ 4. VISION 밴드 — 인라인 스타일 제거분 ══ */
/* 2차 수정(09-21): 다크 → 미스트. 위 .creed 와 같은 배경이라 .creed 의 하단 헤어라인이 두 블록의 경계가 된다 */
.vision-band__in{position:relative;z-index:1}
.vision-band__ttl{color:var(--indigo-900)}
.vision-band__ttl span{color:rgba(20,16,42,.50)}   /* 미스트 위 3.4:1 — --ink-deco(.38)는 2.4:1 로 미달 */
.vision-band__aside{color:var(--ink-70)}
.vstate__kw{padding-top:12px;margin-top:auto}

/* ══ 5. H-4·5 IP 벤토 ══ */
.ip-sec{overflow:hidden}
.ip-sec__in{position:relative;z-index:1}
.ip-sec .symdeco{width:clamp(190px,23vw,340px);right:0;top:3%;opacity:.07}

/* 대형 카드 = PYP AGENTS. 2400×759 콜라주를 정사각 셀에 cover 로 담는다(비율 왜곡 0) */
.bento__hero--photo .bento__img{background:#EDEDF3;align-items:stretch;min-height:200px}
.bento__hero--photo .bento__img img{width:100%;height:100%;object-fit:cover;object-position:center 46%;
  transition:transform .6s var(--ease)}
.bento__hero--photo:hover .bento__img img{transform:scale(1.03)}
.bento__body .bento__aud{display:flex;margin-top:2px}
.bento__body em{margin-top:8px}

/* audience 칩 — site.css 에 .tagchip 베이스가 없어 홈 스코프에서만 정의 */
.bcard__aud .tagchip,
.bento__aud .tagchip{
  display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;
  font-style:normal;font-size:.735rem;font-weight:700;letter-spacing:-.01em;line-height:1.4;
  background:rgba(103,91,159,.10);color:var(--indigo-800);white-space:nowrap;
}
.bcard__aud .tagchip--academy,
.bento__aud .tagchip--academy{background:rgba(225,106,68,.11);color:var(--coral-txt)}

/* ══ 6. H-8 FIELD SUPPORT — EDUSILI ══ */
.field-sec{overflow:hidden}
.field-sec__in{position:relative;z-index:1}
.field-sec .symdeco{width:clamp(200px,25vw,400px);left:-5%;bottom:-12%;opacity:.07}
.edusili__closing{color:var(--indigo-800)}
.edusili__link{display:inline-flex}

/* ══ 7. BLOG 미리보기 ══ */
/* ch 는 래퍼 폰트(16px) 기준이라 EN 제목이 4줄로 쪼개졌다 → 픽셀 기준으로 고정 */
.blogpv__head{max-width:640px}
.blogpv__head .h1{text-wrap:balance}
/* 2차 수정(09-21) 슬라이드 2 — 제목 우측 설명문. 2행 원문 줄바꿈(pre-line)은 넓은 화면에서만 지키고 좁아지면 자연 줄바꿈 */
.blogpv__aside{max-width:46ch;text-wrap:pretty}
@media (max-width:1180px){ .blogpv__aside{white-space:normal} }

/* ══ 8. 반응형 ══════════════════════════════════════════════════ */
@media (max-width:1080px){
  /* 스테이지 1열: sticky 해제(모바일은 시간 기반 1회 재생), 입력 → 코어 → 결과 세로 */
  .cosmos{height:auto}
  .cosmos__stage{position:relative;height:auto;min-height:0;padding-bottom:8px}
  .cosmos__in{height:auto;grid-template-rows:none;display:grid}
  .cosmos .sim.is-on{display:grid}
  /* 구슬 필드를 세로형으로(1:1.35), 구슬 축소, 좌표를 세로형에 맞게 재배치 */
  .orbits{aspect-ratio:1/1.45;max-height:none;margin:10px 0 28px}
  .ocore{width:min(40vw,180px);top:50%}
  .orb{--d:clamp(72px,20vw,90px)}
  .orb--sm{--d:clamp(58px,16vw,74px)}
  /* 코어(중앙 ±22%)를 비워 두고 바깥 고리에 흩뿌린다 */
  [data-orb="s1"]{left:40%;top:8%}
  [data-orb="s2"]{left:82%;top:14%}
  [data-orb="s3"]{left:86%;top:52%}
  [data-orb="s4"]{left:62%;top:92%}
  [data-orb="s5"]{left:20%;top:90%}
  [data-orb="s6"]{left:13%;top:36%}
  [data-orb="in1"]{left:12%;top:12%}
  [data-orb="in2"]{left:12%;top:62%}
  [data-orb="in3"]{left:36%;top:78%}
  [data-orb="in4"]{left:66%;top:26%}
  [data-orb="out1"]{left:88%;top:32%}
  [data-orb="out2"]{left:86%;top:76%}
  .orb__b b{font-size:.58rem;letter-spacing:.08em}
  .orb--sm .orb__b b{font-size:.62rem}
  .orb__b span{font-size:.64rem;margin-top:2px}
  .cosmos__foot{display:block}
  .cosmos__scroll{display:none}
}
@media (max-width:720px){
  .ocore__sym{width:52px}
  .ocore__lbl{font-size:.56rem}
  /* 벤토 2열 — 대형 카드 이미지가 세로로 눌리지 않게 최소 높이 확보 */
  .bento__hero--photo .bento__img{min-height:180px}
  .ip-sec .symdeco,.field-sec .symdeco{opacity:.05}
  .creed__more{margin-top:14px}
}
@media (max-width:480px){
  .orb__b span{display:none}
  .bento__hero--photo .bento__img{min-height:148px}
}

/* 히어로 — 태블릿·모바일(≤1080px): 이미지 위에 슬로건을 얹으면 의자·책상 앞 여백(이미지 폭의 약 1/3)이
   글자 크기를 못 담아 겹친다(4차 검수 F-H1-2, EN 768px 'Up'·태그라인이 의자 위). 슬로건은 이미지 아래로 내리고,
   이미지 하단 안개 톤에서 이어지는 바탕 위에 둔다. 이미지는 데스크톱과 같은 시안 크롭(2.17:1). */
@media (max-width:1080px){
  .khero__media{height:auto;min-height:0;aspect-ratio:1672/770}
  .khero__media::after{content:"";position:absolute;inset:auto 0 0;height:26%;
    background:linear-gradient(180deg,rgba(238,240,250,0),#EEF0FA)}
  .khero__copy{position:relative;left:auto;bottom:auto;
    padding:clamp(4px,1vw,10px) var(--pad) clamp(34px,5vw,52px)}
  .khero__title{font-size:clamp(1.62rem,4.2vw,2.4rem);white-space:pre-line}
  .khero__en{font-size:clamp(.88rem,1.6vw,1.1rem);letter-spacing:.3em}
}
/* 모바일: 아이 중심 아트디렉션 크롭(5:4) — 16:9 그대로면 아이가 너무 작다 */
@media (max-width:720px){
  .khero__media{aspect-ratio:5/4}
  .khero__media img{object-position:62% 40%}
  .khero__media::after{height:30%}
  .khero__copy{padding:4px var(--pad) clamp(30px,8vw,40px)}
  .khero__title{font-size:clamp(1.62rem,7.4vw,2rem)}
  .khero__en{font-size:.88rem;letter-spacing:.28em}
}
/* 2라운드 검수 — 320~334px EN 첫 줄 'Education That Lights Up' 이 칸(280px)을 넘어 'Up' 만 둘째 줄에 남던 것 */
@media (max-width:340px){
  .khero__title{font-size:1.5rem}
}

/* 모션 최소화 — 스크롤 그래픽은 완성 상태로 고정 */
@media (prefers-reduced-motion:reduce){
  .bento__hero--photo:hover .bento__img img{transform:none}
  .cosmos .sim{transition:none}
  .orb__b{animation:none}
}