@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════
   ENGINE 페이지 전용 — 2026-09-14 수정안 반영 (담당 B)
   site.css 의 토큰·공통 컴포넌트(.glass/.blobs/[data-scroll]/.marquee/.symdeco)만 사용한다.
   새 색 도입 없음 · 인라인 grid-template-columns 없음 · Pretendard 단독.
   ══════════════════════════════════════════════════════════════════ */

/* ── 폭 유틸 (인라인 style 대체) ─────────────────────────────── */
.mw-24{max-width:24ch}
.mw-50{max-width:50ch}
.mw-54{max-width:54ch}
.mw-56{max-width:56ch}
.mw-60{max-width:60ch}
.sec--clip{overflow:hidden}
.pillar__p{line-height:1.65}

/* JS 미실행(리빌 드라이버 없음) 시 스크롤 그래픽이 사라지지 않게 되돌린다 */
html:not(.js) .ehero__lines path,
html:not(.js) .mon__links path,
html:not(.js) .zig__svg path{stroke-dashoffset:0}

/* 점프 내비 활성 표시 (engine.js 스크롤스파이) */
.jumpnav a.is-on{color:var(--indigo-800);background:rgba(103,91,159,.11)}

/* ══ E-2 · E-3 HERO ═══════════════════════════════════════════ */
.ehero{padding-bottom:clamp(40px,6vw,72px)}
.ehero__copy{position:relative;z-index:1}
.ehero__h1{font-size:clamp(2rem,4.6vw,3.4rem)}
.ehero__kicker{font-weight:600;color:var(--indigo-800)}
.ehero__def{max-width:48ch}

/* TYPE1 — 격자 위 데이터 라인이 스크롤(--p)에 따라 그려진다 */
.ehero__lines{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 58%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 58%,transparent 100%)}
.ehero__lines path{fill:none;stroke:rgba(103,91,159,.32);stroke-width:1.1;
  stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:calc(1 - min(1, var(--p,1) * 1.7))}
.ehero__lines path:nth-child(2){stroke:rgba(127,162,213,.34)}
.ehero__lines path:nth-child(3){stroke:rgba(195,148,194,.26)}

/* 3차 수정(09-22) s3 — 클라 제공 헤더 이미지 단일 컷(원본 자체가 좌 그래픽/우 사진 2분할 구성).
   프레임(라운드·보더·섀도)만 사이트 톤으로 유지, 이미지는 원본 비율 그대로(크롭 없음). */
.eart{margin:0;position:relative;border-radius:var(--r-xl);overflow:hidden;background:#fff;
  border:1px solid var(--line);
  box-shadow:0 26px 74px rgba(49,40,105,.17)}
.eart--photo img{display:block;width:100%;height:auto}
.eart--photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}

/* ══ E-4 SYSTEM — 실시간 모니터링 → 잠재력 수렴 ═══════════════ */
.mon{display:grid;gap:clamp(28px,4vw,66px);
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:center}
.mon__fig{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--shadow-2)}
.mon__img{position:absolute;inset:0}
.mon__img img{width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(1.04) saturate(.9)}
.mon__img::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(196deg,rgba(28,22,62,.46) 0%,rgba(28,22,62,.10) 44%,rgba(28,22,62,.34) 100%),
    radial-gradient(52% 44% at 80% 16%,rgba(103,91,159,.42),transparent 72%)}

/* 수렴 라인 — viewBox(100x75) 비율 = .mon__fig(4:3) 비율이라 균일 스케일.
   non-scaling-stroke + pathLength 조합은 대시 계산이 어긋나 선이 점선으로 끊긴다 → 쓰지 않는다. */
.mon__links{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.mon__links path{fill:none;stroke:rgba(255,255,255,.9);stroke-width:.2;
  stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:calc(1 - min(1, var(--p,1) * 2.2))}

/* 스캔 링 — HTML 요소라 어떤 종횡비에서도 정원 */
.mon__ring{position:absolute;z-index:2;width:clamp(34px,7.2%,62px);aspect-ratio:1;
  translate:-50% -50%;border-radius:50%;
  border:1.4px solid rgba(255,255,255,.85);background:rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.mon__ring::before{content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(255,255,255,.55);animation:monpulse 3.2s var(--ease) infinite}
.mon__ring::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;
  translate:-50% -50%;border-radius:50%;background:#fff;
  box-shadow:0 0 12px rgba(255,255,255,.9)}
/* 새 사진(engine-class) 피사체에 맞춘 위치 — a=교사 b=파란 옷 아이 c=좌측 아이 d=테이블 교구 */
.mon__ring--a{left:62%;top:38%}
.mon__ring--b{left:33%;top:44%;--d:.5s}
.mon__ring--c{left:13%;top:58%;--d:1s}
.mon__ring--d{left:53%;top:68%;--d:1.6s}
.mon__ring::before{animation-delay:var(--d,0s)}
@keyframes monpulse{
  0%{transform:scale(1);opacity:.85}
  70%{transform:scale(1.85);opacity:0}
  100%{transform:scale(1.85);opacity:0}
}

/* 잠재력 노드 — 심볼 PNG + 글로우 */
.mon__pot{position:absolute;left:80%;top:17%;translate:-50% -50%;z-index:3;
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px 9px 12px;
  border-radius:999px;background:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);
  box-shadow:0 0 0 8px rgba(255,255,255,.12),0 14px 34px rgba(28,22,62,.32);
  white-space:nowrap}
.mon__pot b{font-size:.84rem;font-weight:800;letter-spacing:-.018em;color:var(--indigo-900)}
.mon__pot-sym{width:19px;height:auto;flex:none}

.mon__chips{position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;flex-wrap:wrap;gap:7px;padding:16px clamp(14px,2.4vw,22px)}
.mon__chip{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;
  font-size:.78rem;font-weight:700;letter-spacing:-.012em;color:var(--indigo-900);
  background:rgba(255,255,255,.76);border:1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);
  box-shadow:0 6px 18px rgba(28,22,62,.18)}
.mon__chip::before{content:"";width:7px;height:7px;border-radius:2px;flex:none;
  background:var(--tone,var(--indigo-600))}

.mon__copy{position:relative}
.mon__deck{color:var(--indigo-900)}
.mon__note{max-width:46ch;padding-top:18px;border-top:1px solid var(--line-2)}

/* ══ E-6 순환 — 비정형 지그재그 6노드 (슬라이드 10·11) ═══════
   3차 수정(09-22) s5 — 유치원 교실 사진을 연하게 깐 배경 + 노드·연결선 대비 강화 */
.zigsec{position:relative;overflow:hidden}
/* 4차 수정(10-06) s5 — 기술 비전 문단의 교정 줄바꿈(3행)이 901~1365px 3단 머리에서는 칸(470px@1280)보다 길다(487px).
   그 구간만 머리를 1단(제목 위·문단 아래)으로 바꿔 문단 칸이 줄 길이를 담게 한다 — ≤900px 의 사이트 기본 1단과 같은 모양. */
@media (min-width:901px) and (max-width:1365px){
  #vision-rnd .sec-head--3{grid-template-columns:1fr;justify-items:start;gap:18px}
}

/* 4차 수정(10-06) s4 "배경 투명도 낮춰 주세요. 실루엣 살짝만 더 보이게" — 사진 불투명도 .11→.19,
   흰 베일 한 단계 옅게. 노드·문구 대비는 유지(가운데 구간 베일 .5→.38) */
.zigsec::before{content:"";position:absolute;inset:0;
  background:url(/static/img/photo/cycle-bg.webp) center 36%/cover no-repeat;
  opacity:.19;filter:saturate(.55) brightness(1.08)}
.zigsec::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.62) 16%,
    rgba(255,255,255,.38) 52%,rgba(255,255,255,.68) 86%,#fff 100%)}
.zigsec > .wrap-n{position:relative;z-index:1}
.zig__flow{font-size:.9rem;font-weight:700;letter-spacing:-.014em;color:var(--indigo-600);
  line-height:1.7}
.zig{position:relative;width:100%;max-width:1240px;margin-inline:auto;aspect-ratio:100/67.6}
.zig__svg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.zig__svg path{fill:none;stroke:rgba(103,91,159,.4);stroke-width:.16;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:calc(1 - min(1, var(--p,1) * 2.2))}

.zig__node{position:absolute;z-index:1;width:20%;display:grid;justify-items:center;
  text-align:center;gap:9px;border-radius:var(--r);padding:2px}
.zig__node--1{left:8%;top:22%}
.zig__node--2{left:30%;top:22%}
.zig__node--3{left:52%;top:14%}
.zig__node--4{left:74%;top:22%}
.zig__node--5{left:52%;top:72%}
.zig__node--6{left:30%;top:72%}
.zig__dot{width:50%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--tone,var(--indigo-600)) 13%,#fff);
  border:2px solid color-mix(in srgb,var(--tone,var(--indigo-600)) 62%,transparent);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--tone,var(--indigo-600)) 9%,transparent),
    0 12px 30px color-mix(in srgb,var(--tone,var(--indigo-600)) 22%,transparent)}
.zig__dot i{font-style:normal;font-weight:800;line-height:1;letter-spacing:-.03em;
  font-size:clamp(1.4rem,2.9vw,2.3rem);color:var(--tone,var(--indigo-600))}
.zig__t{font-size:.71rem;font-weight:800;letter-spacing:.14em;
  color:var(--tone,var(--indigo-600))}
/* 4차 검수 F-E1-1 — 배경 실루엣을 올린 만큼 라벨은 텍스트용 진한 토큰으로(코랄·스카이 원색은 2.3~2.9:1).
   동그라미·테두리 색(--tone)은 그대로 두고 글자만 바꾼다. 흰 헤일로로 사진 위에서도 또렷하게. */
.zig__node .zig__t{text-shadow:0 0 6px #fff,0 0 2px #fff}
.zig__node.tone-content .zig__t{color:var(--coral-txt)}
.zig__node.tone-edusili .zig__t,.zig__node.tone-sky .zig__t{color:var(--sky-txt)}
.zig__node.tone-ai .zig__t{color:var(--indigo-800)}
.zig__node.tone-content .zig__dot i{color:var(--coral-txt)}                 /* 4차 회귀 FE-11 — 숫자 2.88 → 진한 토큰 */
.zig__node.tone-edusili .zig__dot i,.zig__node.tone-sky .zig__dot i{color:var(--sky-txt)}
.zig__d{text-shadow:0 0 8px rgba(255,255,255,.9)}
.zig__d{font-size:.9rem;font-weight:600;line-height:1.5;color:var(--ink-70);max-width:70%}

.zig__msg{position:absolute;z-index:1;left:72%;top:57%;width:25%;
  padding:clamp(18px,1.8vw,24px);border-radius:var(--r-lg);
  background:rgba(255,255,255,.84);border:1px solid rgba(49,40,105,.14);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 18px 46px rgba(49,40,105,.14)}
.zig__msg::before{content:"";position:absolute;inset:-16% -12%;z-index:-1;border-radius:inherit;
  background:
    radial-gradient(58% 66% at 26% 18%,rgba(127,162,213,.40),transparent 70%),
    radial-gradient(60% 68% at 82% 84%,rgba(195,148,194,.32),transparent 72%);
  filter:blur(16px)}
.zig__msg-l{display:block;font-size:.7rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--indigo-600)}
.zig__msg-b{margin-top:10px;font-size:clamp(.96rem,1.2vw,1.1rem);font-weight:700;
  line-height:1.6;letter-spacing:-.022em;color:var(--indigo-900)}

/* ══ 교육 주체 카드 ══════════════════════════════════════════ */
.actor{padding:26px 22px}
.actor__bar{background:linear-gradient(90deg,var(--indigo-600),var(--sky-400))}
.actor__p{line-height:1.6}

/* TYPE2 워터마크 — 카피 영역을 피해 더 낮고 옅게 (가독 우선) */
#growth .symdeco{opacity:.05;left:-12%;bottom:-26%}
#company .symdeco{opacity:.06}

/* ══ 3차 수정(09-22) s6 — GROWTH 헤드 사진 밴드 (블로그 상단 밴드형) ══
   좌 카피(딥 인디고 그라디언트) / 우 세미나 사진(teacher-seminar.webp 1122×1402 세로).
   사진→카피 경계는 그라디언트 블렌드. 모바일은 상하 스택(카피 먼저). */
.gband{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(115deg,
    color-mix(in srgb,var(--indigo-900) 92%,#000) 0%,
    var(--indigo-900) 46%,
    color-mix(in srgb,var(--violet-500) 34%,var(--indigo-900)) 100%);
  box-shadow:0 24px 64px rgba(49,40,105,.22)}
.gband__copy{position:relative;z-index:1;padding:clamp(28px,4.4vw,58px)}
.gband__t{color:#fff;max-width:20ch}
.gband__b{color:rgba(255,255,255,.8);max-width:46ch}
.gband__fig{position:relative;margin:0;min-height:300px}
.gband__fig img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 26%}
/* 카피 쪽으로 톤을 이어붙이는 블렌드 + 하단 살짝 어둡게(밴드 일체감) */
.gband__fig::before{content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,color-mix(in srgb,var(--indigo-900) 96%,#000) 0%,
      rgba(28,22,62,.24) 36%,transparent 64%),
    linear-gradient(0deg,rgba(28,22,62,.26),transparent 38%)}

/* ══ 연수 카드 톤 ════════════════════════════════════════════ */
.trn--teacher{--tone:var(--coral)}
.trn--vice{--tone:var(--indigo-600)}
.trn--principal{--tone:var(--violet-500)}

/* ══ E-7 연수 현장 롤링 (흑백 → 호버 컬러) ═══════════════════ */
.gal__head{max-width:56ch}
.gal__roll{--gap:16px}
.gal__item{width:260px}
.gal__item img{width:260px;height:195px;object-fit:cover;display:block}

/* ══ E-8 후기 ════════════════════════════════════════════════
   2차 수정(09-21): 클라 제공 후기 14건. 가로 스냅 스크롤 + 좌우 이동 버튼·진행 바(engine.js).
   익명 후기는 번호(.rev__no)만 달고, 긴 후기는 .rev--wide 로 폭을 넓혀 행 높이를 고르게 한다 — 말줄임 없음. */
.revs__head{max-width:960px}
.revs__sub{max-width:none}
/* 스크롤 컨테이너는 overflow 로 그림자를 자른다 → 카드 그림자(--shadow-1, 아래로 32px) 몫만큼 패딩을 준다.
   아래 패딩을 음수 마진으로 되돌리지 않는다 — 되돌리면 조작부 행이 이 박스 안으로 들어와 포커스 링이 버튼을 가로지른다.
   좌우(--bleed)는 페이지 여백 안쪽까지만 번진다. margin 단축 속성 금지(유틸 mt-* 를 죽인다) */
.revs{--bleed:min(24px,var(--pad));display:flex;gap:16px;overflow-x:auto;
  padding:16px var(--bleed) 36px;margin-inline:calc(var(--bleed) * -1);
  scroll-padding-inline:var(--bleed);
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin;
  scrollbar-color:var(--line-2) transparent}
.revs::-webkit-scrollbar{height:6px}
.revs::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:999px}
/* JS 가 있으면 진행 바·버튼이 위치를 알려주므로 기본 스크롤바는 감춘다(윈도우에서 이중 표시 방지) */
.js .revs{scrollbar-width:none}
.js .revs::-webkit-scrollbar{display:none}
/* 링은 안쪽으로 — 바깥 offset 이면 아래 조작부 행과 좌우 여백 밖까지 감싼다 */
.revs:focus-visible{outline:2px solid var(--indigo-600);outline-offset:-2px;border-radius:var(--r-lg)}
.rev{flex:0 0 clamp(264px,24vw,320px);scroll-snap-align:start;
  display:flex;flex-direction:column;gap:14px;padding:24px 24px 26px;
  border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow-1)}
.rev--wide{flex-basis:clamp(320px,34vw,470px)}
.rev__no{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;font-weight:800;
  letter-spacing:.13em;color:var(--indigo-600)}
.rev__no::after{content:"";width:22px;height:1px;background:var(--line-2)}
.rev__body{font-size:.94rem;line-height:1.74;color:var(--ink-70);white-space:pre-line}
.rev__meta{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.rev__meta b{display:block;font-size:.9rem;font-weight:700;letter-spacing:-.018em}
.rev__role,.rev__ym{display:block;font-size:.78rem;color:var(--ink-40);margin-top:3px}
/* 좌우 이동 — JS 가 있을 때만 노출(.js 는 base.html <head> 에서 선주입). 넘칠 게 없으면 engine.js 가 숨긴다.
   버튼은 왼쪽(카드 시작선)이라 우하단 고정 문의 FAB 과 닿지 않는다. 진행 바는 오른쪽 끝이 FAB 열에 걸릴 수 있어
   본문 폭이 FAB 열까지 닿는 화면(≤1600px)에서는 오른쪽을 비운다.
   끝 상태는 disabled 가 아니라 aria-disabled — disabled 로 바꾸면 방금 누른 버튼의 키보드 포커스가 body 로 날아간다 */
.revs__ctl{display:none;align-items:center;gap:10px;margin-top:2px}
.js .revs__ctl{display:flex}
.js .revs__ctl[hidden]{display:none}
.revs__bar{position:relative;flex:1;height:2px;border-radius:2px;background:var(--line-2);overflow:hidden;
  order:2;margin-left:clamp(10px,2vw,26px)}
.revs__bar i{position:absolute;left:0;top:0;height:100%;width:20%;border-radius:2px;background:var(--indigo-600);
  transition:transform .25s var(--ease)}
.revs__btn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;flex:none;cursor:pointer;
  background:#fff;border:1px solid var(--line-2);color:var(--indigo-900);
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),opacity .25s var(--ease)}
.revs__btn:hover:not([aria-disabled="true"]){background:var(--indigo-900);border-color:var(--indigo-900);color:#fff}
.revs__btn:focus-visible{outline:2px solid var(--indigo-600);outline-offset:3px}
.revs__btn[aria-disabled="true"]{opacity:.36;cursor:default}
@media (max-width:1600px){ .revs__ctl{padding-right:64px} }
.revs__btn--prev svg{transform:scaleX(-1)}
.revs__none{max-width:46ch;display:inline-flex;align-items:center;gap:9px;
  padding:13px 18px;border-radius:999px;border:1px dashed var(--line-2);
  background:rgba(255,255,255,.7);color:var(--ink-55)}
.revs__none svg{color:var(--indigo-600);flex:none}

/* ══ 반응형 ══════════════════════════════════════════════════ */
@media (max-width:1180px){
  .zig__d{font-size:.85rem}
}
@media (max-width:1080px){
  .ehero__def{max-width:60ch}
}
@media (max-width:860px){
  .gband{grid-template-columns:1fr}
  .gband__fig{min-height:236px}
  .gband__fig::before{background:
    linear-gradient(180deg,color-mix(in srgb,var(--indigo-900) 96%,#000) 0%,
      rgba(28,22,62,.2) 34%,transparent 60%)}
}
@media (max-width:900px){
  .mon{grid-template-columns:1fr}
  .mon__note{max-width:none}
  .mon__links path{stroke-width:.3}
}
@media (max-width:860px){
  /* 지그재그 → 세로 리스트 */
  .zig{aspect-ratio:auto;display:grid;gap:12px;max-width:none}
  .zig__svg{display:none}
  .zig__node{position:static;width:auto;padding:16px 18px;gap:4px 16px;
    grid-template-columns:auto minmax(0,1fr);justify-items:start;text-align:left;
    align-content:center;border:1px solid var(--line-2);border-radius:var(--r-lg);background:#fff;
    box-shadow:var(--shadow-1)}
  .zig__dot{width:52px;grid-row:span 2;align-self:center}
  .zig__dot i{font-size:1.32rem}
  .zig__t{align-self:end}
  .zig__d{max-width:none;align-self:start}
  .zig__msg{position:static;width:auto;margin-top:6px}
  .zig__msg::before{inset:-6% -4%}
  .sec--mist .zig__node{background:#fff}
}
@media (max-width:720px){
  .mon__chips{gap:6px;padding:12px}
  .mon__chip{padding:6px 11px;font-size:.73rem}
  .mon__pot{padding:7px 13px 7px 10px;gap:6px}
  .mon__pot b{font-size:.78rem}
  .mon__pot-sym{width:16px}
  .gal__item{width:212px}
  .gal__item img{width:212px;height:159px}
  .rev{flex-basis:min(80vw,300px)}
  .rev--wide{flex-basis:min(86vw,340px)}
}
@media (max-width:560px){
  .ehero__lines{display:none}
}