@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════
   PYP AGENTS 독서탐구 상세 — 수정안 슬라이드 17~27
   site.css 토큰·컴포넌트(.glass .blobs .marquee .symdeco .soon .vph .axis)를 전제로 한
   페이지 전용 레이어. 새 색·새 서체 도입 없음.
   ══════════════════════════════════════════════════════════════════ */

/* 섹션 장식(심볼 워터마크)이 가로 스크롤을 만들지 않게 잘라낸다 */
.sec--deco{overflow:hidden}
/* 면책·안내 한 줄 */
/* 2차 수정(09-21): 한 줄에 들어가는 폭이면 한 줄로, 넘치면 균형 줄바꿈(끝 어절만 떨어지는 고아 행 방지) */
.disc{max-width:100ch;margin-inline:auto;text-align:center;margin-top:18px;text-wrap:balance}

/* ── 프로그램 스위처 (PYP = 프로그램 2개) ─────────────────────── */
.pswitch{position:relative;z-index:1;background:#fff;border-bottom:1px solid var(--line)}
.pswitch__in{display:flex;align-items:center;gap:clamp(12px,2vw,28px);
  padding-block:9px;overflow-x:auto;scrollbar-width:none}
.pswitch__in::-webkit-scrollbar{display:none}
.pswitch__hd{flex:none;font-size:.72rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-40)}
.pswitch__tabs{display:flex;align-items:center;gap:6px;flex:1 1 auto;min-width:0}
.pswitch__a{flex:none;display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:999px;white-space:nowrap;
  font-size:.88rem;font-weight:600;color:var(--ink-55);letter-spacing:-.014em}
.pswitch__a.is-on{background:rgba(103,91,159,.10);color:var(--indigo-800);font-weight:700}
.pswitch__a--soon{color:var(--ink-40)}
.pswitch__a--soon .soon{padding:3px 9px;font-size:.68rem}
a.pswitch__a{transition:background .25s var(--ease),color .25s var(--ease)}
a.pswitch__a:hover,a.pswitch__a:focus-visible{background:rgba(103,91,159,.06);color:var(--indigo-800)}

/* ── HERO (슬라이드 17) ──────────────────────────────────────── */
.phero{position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(420px,52vw,640px);display:grid;align-items:center;
  padding-block:clamp(40px,6vw,72px)}
.phero__bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 46%}
/* 좌측 카피 영역을 덮되, 우측 콜라주의 색은 살려둔다.
   가로 정지점은 흰 타이틀이 닿는 지점(≈39% — display 타이틀 우측 끝)까지 .64 이상을
   유지하도록 잡았다. 실측(텍스트 투명 처리 후 배경 픽셀) 기준 타이틀 ≥3:1, 키커 ≥4.5:1. */
.phero__veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(20,16,42,.46),rgba(20,16,42,0) 34%),
    linear-gradient(92deg,rgba(20,16,42,.92) 0%,rgba(20,16,42,.84) 24%,
                    rgba(20,16,42,.60) 42%,rgba(20,16,42,.22) 60%,rgba(20,16,42,0) 74%)}
.phero__in{position:relative;z-index:2;display:grid;align-items:center;
  grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:clamp(28px,4vw,56px)}
.phero__copy{max-width:min(100%,620px)}
/* 키커는 16px/600 = 일반 텍스트 등급(4.5:1) — 반투명 흰색이면 기준을 못 넘긴다 */
.phero__kick{max-width:34ch;font-size:clamp(1rem,1.5vw,1.2rem);font-weight:600;line-height:1.6;
  color:#fff;letter-spacing:-.018em;text-shadow:0 1px 14px rgba(20,16,42,.38)}
.phero__title{color:#fff;margin-top:14px;
  font-size:clamp(2.1rem,4.6vw,3.5rem);text-shadow:0 2px 24px rgba(20,16,42,.32)}
.phero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:clamp(22px,3vw,32px)}
.axis--light{border-color:rgba(255,255,255,.5);background:rgba(20,16,42,.46);color:#fff;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.phero .btn{--bg:rgba(20,16,42,.92);--fg:#fff;border-color:rgba(255,255,255,.24)}
.phero .btn:hover{--bg:var(--ink)}
/* 사진 위 흰 글래스 — 로고 가독을 위해 불투명도를 올린다 */
.phero__logos{--glass:rgba(255,255,255,.84);position:relative;overflow:hidden;justify-self:end;
  display:flex;align-items:center;gap:clamp(14px,2vw,26px);
  width:min(100%,430px);padding:clamp(20px,2.6vw,30px) clamp(22px,2.8vw,34px);
  border-radius:var(--r-xl)}
.phero__logos .blobs i{opacity:.34;filter:blur(34px)}
.phero__logo{position:relative;z-index:1;flex:1 1 0;display:grid;place-items:center;min-width:0}
.phero__logo+.phero__logo{border-left:1px solid rgba(49,40,105,.14);padding-left:clamp(14px,2vw,26px)}
.phero__logo img{max-height:clamp(54px,7vw,84px);max-width:100%;width:auto;object-fit:contain}

/* ── WHY ─────────────────────────────────────────────────────── */
.pwhy{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(24px,4vw,64px);align-items:start}
.pwhy .lead{max-width:56ch}

/* ── 섹션 헤드 (좌 제목 / 우 리드) ───────────────────────────── */
.psec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,3.4vw,56px);align-items:end}
.psec-head__aside{max-width:54ch;padding-bottom:4px}

/* ── PROGRAM COMPONENTS 벤토 (슬라이드 18·19) ───────────────── */
.pcomp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.pcomp__card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(230px,24vw,300px);border-radius:var(--r-lg);overflow:hidden;isolation:isolate;
  background:linear-gradient(158deg,#fff,var(--mist-2));border:1px solid var(--line);
  transition:transform .34s var(--ease),box-shadow .34s var(--ease)}
.pcomp__card--wide{grid-column:span 2;min-height:clamp(260px,27vw,340px)}
a.pcomp__card:hover,a.pcomp__card:focus-visible{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.pcomp__media{position:absolute;inset:0;z-index:0;display:block;overflow:hidden}
.pcomp__media img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  transition:transform .6s var(--ease)}
a.pcomp__card:hover .pcomp__media img{transform:scale(1.045)}
/* 누끼·인쇄물 이미지는 여백을 두고 contain.
   행을 1fr로 고정해야 자식의 % 높이가 해석된다(콘텐츠 기반 트랙이면 max-height:100%가 무효). */
.pcomp__card--art .pcomp__media{display:grid;grid-template-rows:minmax(0,1fr);place-items:center;
  padding:clamp(20px,2.6vw,32px) clamp(20px,2.6vw,32px) clamp(88px,9vw,108px)}
.pcomp__card--art .pcomp__media img{width:100%;height:100%;object-fit:contain}
/* 교사 내비게이션 표지(1170×828)는 좌측 한글 타이틀·우측 세로 회전 타이포·우하단 호수 박스까지
   인쇄 타이포가 사방에 깔려 있어, 카드 비율(≈1.5~1.6)에 맞는 '타이포 없는' 가로 크롭 창이
   존재하지 않는다(확인: 타이포 제외 여유 구간은 최대 780×130 → 3.7배 업스케일).
   → 크롭 대신 리플렛·아카데미와 같은 제품컷(contain) 카드로 통일한다. 클라 수정안 슬라이드 19의
   교사 내비게이션 타일도 표지를 작게 담은 제품컷이다. 캡션이 2~3줄로 흘러도 절대배치가 아니라
   flex 로 남은 높이만 차지하므로 표지와 캡션이 구조적으로 겹치지 않는다. */
.pcomp__card--navigation{min-height:clamp(260px,27vw,340px)}
/* flex-basis 0 = 표지의 자연 크기가 카드 높이를 밀어올리지 않는다 → 벤토 2행이 1행과 같은 높이 */
.pcomp__card--navigation .pcomp__media{position:relative;inset:auto;flex:1 1 0;min-height:0;
  padding:clamp(16px,2vw,24px) clamp(16px,2vw,24px) clamp(4px,.8vw,10px)}
/* max-width/max-height 조합 + width/height:auto = 비율 유지 축소 → 요소 박스가 표지 크기와
   정확히 일치한다(라운드·그림자가 여백에 걸리지 않음) */
.pcomp__card--navigation .pcomp__media img{width:auto;height:auto;max-width:100%;max-height:100%;
  object-fit:contain;border-radius:9px;box-shadow:0 14px 34px rgba(20,16,42,.28)}
a.pcomp__card--navigation:hover .pcomp__media img{transform:scale(1.035)}
/* 워크북 3권 겹침 */
.pcomp__stack{position:absolute;inset:0;z-index:0;display:flex;align-items:center;
  justify-content:center;padding:clamp(16px,2vw,26px) 8% 34%}
/* 높이 우선 제약 — 카드 상단에서 잘리지 않게 (width 고정은 비율을 깨뜨린다) */
.pcomp__stack img{max-height:100%;width:auto;max-width:34%;height:auto;border-radius:5px;
  box-shadow:0 10px 26px rgba(20,16,42,.24);transition:transform .5s var(--ease)}
.pcomp__stack img:nth-child(1){transform:rotate(-8deg) translateX(20%)}
.pcomp__stack img:nth-child(2){position:relative;z-index:2;transform:scale(1.1)}
.pcomp__stack img:nth-child(3){transform:rotate(8deg) translateX(-20%)}
a.pcomp__card:hover .pcomp__stack img:nth-child(1){transform:rotate(-11deg) translateX(12%)}
a.pcomp__card:hover .pcomp__stack img:nth-child(3){transform:rotate(11deg) translateX(-12%)}
.pcomp__card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(20,16,42,.92) 0%,rgba(20,16,42,.78) 26%,
             rgba(20,16,42,.28) 56%,transparent 78%)}
.pcomp__cap{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:14px;
  padding:clamp(18px,2.1vw,26px)}
.pcomp__txt{min-width:0}
.pcomp__cap b{display:block;color:#fff;font-weight:800;line-height:1.34;letter-spacing:-.026em;
  font-size:clamp(1.02rem,1.35vw,1.2rem)}
.pcomp__cap b+span{display:block;margin-top:7px;color:rgba(255,255,255,.88);
  font-size:.85rem;line-height:1.55}
.pcomp__go{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;
  color:#fff;border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.08);
  transition:background .3s var(--ease),transform .3s var(--ease)}
a.pcomp__card:hover .pcomp__go{background:rgba(255,255,255,.22);transform:translateX(3px)}

/* ── EXTEND education (슬라이드 20) ─────────────────────────── */
.pext{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(26px,4vw,64px);align-items:center}
.pext__figure{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-2);background:var(--mist-2)}
.pext__photo{width:100%;height:100%;object-fit:cover;aspect-ratio:642/900}
/* 로고 락업(슬라이드 20) — 사진 중앙에 겹친다. 위치·크기 모두 figure 기준 % 라
   모바일에서 사진이 16/11 로 크롭돼도 로고는 그대로 남는다.
   width 는 폭 기준, max-height 는 높이 기준 상한 → object-fit:contain 이 둘을 조정한다.
   2차 수정(09-21): 가는 네이비 워드마크가 건물에 묻혀 흰색 외곽선 본(logo-extend-outline.png)으로 교체.
   가독은 외곽선이 맡으므로 흰 글로우는 걷고, 사진에서 띄우는 그림자만 남긴다. */
.pext__logo{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);
  width:58%;max-width:none;height:auto;max-height:52%;object-fit:contain;
  filter:drop-shadow(0 8px 22px rgba(20,16,42,.40))}
.pext__body{max-width:62ch}
.pext__kick{font-size:1rem;font-weight:600;color:var(--ink-55);letter-spacing:-.016em}
.pext__name{margin-top:4px;letter-spacing:-.03em}
.pext__btn{margin-top:clamp(22px,3vw,30px)}
.pext__points{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  grid-template-rows:auto auto;gap:clamp(12px,1.6vw,20px)}
/* 섹션은 흰 .sec 이므로 카드까지 흰색이면 경계가 1px 선밖에 남지 않는다 → --mist 계열로 분리 */
.pt{position:relative;display:grid;align-content:center;gap:10px;
  padding:clamp(22px,2.4vw,30px);border-radius:var(--r-lg);
  background:linear-gradient(158deg,var(--mist),var(--mist-2));
  border:1px solid var(--line-2);box-shadow:var(--shadow-1)}
.pt--lead{grid-row:span 2;align-content:center;gap:clamp(12px,1.5vw,18px)}
.pt__no{font-size:.78rem;font-weight:800;letter-spacing:.13em;color:var(--indigo-600)}
.pt__t{font-size:1.02rem;font-weight:700;line-height:1.5;letter-spacing:-.022em;max-width:32ch}
/* 02·03 은 한 줄짜리 카드 — 세로 중앙 정렬 + 활자 등급을 올려 빈 공간을 줄인다 */
.pt:not(.pt--lead) .pt__t{font-size:clamp(1.06rem,1.5vw,1.3rem);max-width:26ch}
.pt--lead .pt__t{font-size:1.06rem}
.pt__art{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.84fr);
  align-items:center;gap:clamp(18px,2.6vw,36px)}
.pt__copy{display:grid;align-content:center;justify-items:start;gap:clamp(12px,1.4vw,18px)}
.pt__logo{height:clamp(34px,3.4vw,46px);width:auto}
.pt__shot{width:100%;max-width:262px;height:auto;justify-self:end;border-radius:10px;
  box-shadow:0 10px 26px rgba(20,16,42,.16)}
.pt__link{justify-self:start}

/* ── 스토리북 여정 (3차 수정 s8) ──────────────────────────────
   호기심 노드 → 스크롤 드로잉 선 → 중앙 책 '펼침' → 초학문적 주제 노드.
   섹션 --p(0→1, site.js data-scroll)를 구간별 진행값으로 쪼갠다. JS 없으면 완성 상태(--p:1). */
#storybook{--p:1;
  background:
    radial-gradient(120% 90% at 8% 0%,color-mix(in srgb,var(--indigo-600) 10%,#fff),transparent 52%),
    radial-gradient(110% 80% at 96% 100%,color-mix(in srgb,var(--sky-400) 12%,#fff),transparent 50%),
    linear-gradient(180deg,color-mix(in srgb,var(--indigo-600) 7%,#fff),var(--mist-2))}
/* 여정은 섹션 상단부에 있어 --p 는 0~.5 구간에서 지나간다 → 임계를 앞당긴다 */
.pjour{--p1:clamp(0,calc((var(--p, 1) - .04) / .22),1);  /* 좌측 선 */
  --p2:clamp(0,calc((var(--p, 1) - .16) / .24),1);         /* 책 펼침 */
  --p3:clamp(0,calc((var(--p, 1) - .26) / .24),1);         /* 우측 선 */
  --poleGap:clamp(18px,3.4vw,52px);position:relative;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;justify-items:center;gap:var(--poleGap)}
.pjour__line{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.pjour__seg{fill:none;stroke:var(--indigo-600);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:1;vector-effect:non-scaling-stroke;opacity:.62}
.pjour__seg--1{stroke-dashoffset:calc(1 - var(--p1))}
.pjour__seg--2{stroke-dashoffset:calc(1 - var(--p3))}
.pjour__pole{position:relative;z-index:1;width:clamp(178px,18.5vw,214px);aspect-ratio:1;border-radius:50%;
  display:grid;align-content:center;justify-items:center;text-align:center;gap:6px;
  padding:clamp(18px,2.2vw,26px);
  background:var(--glass);box-shadow:var(--glass-shadow);
  border:1.5px solid color-mix(in srgb,var(--indigo-600) 34%,#fff);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.3);
  backdrop-filter:blur(var(--glass-blur)) saturate(1.3)}
/* 종점 노드는 선이 닿을 때 점등 — 대비 강화(외곽 링 + 소프트 글로우) */
.pjour__pole--l{box-shadow:var(--glass-shadow),
  0 0 0 calc(var(--p1) * 5px) color-mix(in srgb,var(--indigo-600) 10%,transparent)}
.pjour__pole--r{box-shadow:var(--glass-shadow),
  0 0 0 calc(var(--p3) * 5px) color-mix(in srgb,var(--sky-400) 16%,transparent)}
.pjour__pole b{font-size:clamp(1.02rem,1.45vw,1.24rem);font-weight:800;letter-spacing:-.026em;
  line-height:1.28;color:var(--indigo-900)}
.pjour__pole em{font-style:normal;font-size:.72rem;font-weight:700;letter-spacing:.09em;
  text-transform:lowercase;color:var(--indigo-600)}
.pjour__pole span{font-size:.82rem;line-height:1.5;color:var(--ink-55)}
.pjour__books{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%}
.pjour__books img{width:clamp(108px,15vw,182px);height:auto;border-radius:4px;
  box-shadow:0 16px 40px rgba(20,16,42,.24);transition:transform .45s var(--ease)}
/* 양옆 책은 펼침 진행에 따라 살짝 물러난다 */
.pjour__books > img:nth-child(1){transform:rotate(calc(-5deg - var(--p2) * 4deg))
  translateX(calc(var(--p2) * -4%));margin-right:-5%}
.pjour__books > img:nth-child(3){transform:rotate(calc(5deg + var(--p2) * 4deg))
  translateX(calc(var(--p2) * 4%));margin-left:-5%}
/* 중앙 책 — 페이지 팬 2장이 --p2 로 벌어지며 '펼쳐진다' */
.pjour__open{position:relative;z-index:2;display:inline-grid;place-items:center;
  transform:scale(calc(1.06 + var(--p2) * .12))}
.pjour__open img{position:relative;z-index:2;width:clamp(112px,15.6vw,190px);
  box-shadow:0 20px 48px rgba(20,16,42,.30)}
.pjour__page{position:absolute;z-index:1;inset:4% 6%;border-radius:6px;background:#fff;
  border:1px solid var(--line);box-shadow:0 10px 26px rgba(20,16,42,.18);
  transform-origin:50% 92%}
.pjour__page--l{transform:rotate(calc(var(--p2) * -13deg)) translateX(calc(var(--p2) * -9%))}
.pjour__page--r{transform:rotate(calc(var(--p2) * 13deg)) translateX(calc(var(--p2) * 9%))}
@media (prefers-reduced-motion:reduce){
  .pjour{--p1:1;--p2:1;--p3:1}
}
.pbook__band{margin-top:clamp(34px,4.4vw,56px);padding:clamp(20px,2.6vw,30px) clamp(20px,3vw,40px);
  border-radius:var(--r-lg);background:var(--indigo-800);color:#fff;text-align:center}
.pbook__th{margin-top:clamp(40px,5vw,72px);text-align:center;max-width:24ch;margin-inline:auto}
.pth{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.5vw,20px)}
/* 3차 수정(09-22) s9 — 대비 강화: 외곽선을 톤 컬러로 올리고 상단 바 두께·글리프 링 추가 */
.pth__c{position:relative;display:grid;align-content:start;gap:10px;
  padding:clamp(22px,2.3vw,28px);padding-bottom:clamp(46px,4vw,54px);
  border-radius:var(--r-lg);background:#fff;
  border:1px solid color-mix(in srgb,var(--tone,var(--indigo-600)) 30%,var(--line));
  border-top:3px solid var(--tone,var(--indigo-600));
  box-shadow:0 4px 18px color-mix(in srgb,var(--tone,var(--indigo-600)) 7%,transparent);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.pth__c:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.pth__g{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;
  color:var(--tone,var(--indigo-600));
  background:color-mix(in srgb,var(--tone,var(--indigo-600)) 14%,#fff);
  border:1px solid color-mix(in srgb,var(--tone,var(--indigo-600)) 34%,transparent)}
.pth__t{letter-spacing:-.024em}
.pth__b{color:var(--ink-55)}
.pth__n{position:absolute;right:clamp(18px,2vw,24px);bottom:clamp(16px,1.8vw,22px);
  padding:5px 12px;border-radius:999px;font-size:.78rem;font-weight:800;letter-spacing:-.01em;
  color:var(--tone-txt,var(--indigo-800));
  background:color-mix(in srgb,var(--tone,var(--indigo-600)) 11%,#fff);
  border:1px solid color-mix(in srgb,var(--tone,var(--indigo-600)) 26%,transparent)}
/* 6 주제 = 브랜드 팔레트 내에서만 구분. 텍스트는 대비 확보된 --*-txt 토큰 사용 */
.pth__c--1{--tone:var(--coral);--tone-txt:var(--coral-txt)}
.pth__c--2{--tone:var(--sky-400);--tone-txt:var(--sky-txt)}
.pth__c--3{--tone:var(--blossom-400);--tone-txt:var(--violet-500)}
.pth__c--4{--tone:var(--violet-500);--tone-txt:var(--violet-500)}
.pth__c--5{--tone:var(--grow);--tone-txt:var(--grow-txt)}
.pth__c--6{--tone:var(--indigo-600);--tone-txt:var(--indigo-600)}

/* ── 누리주제 × IB (3차 수정 s10·11 신설) ─────────────────────
   원안(s11)의 원색 대신 브랜드 톤. 5열 → 900px 2열 → 640px 1열. */
.pnuri__head{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(24px,3.6vw,56px);align-items:center}
.pnuri__t{max-width:26ch}
.pnuri__hl{font-style:normal;color:var(--indigo-600)}
.pnuri__sub{max-width:44ch}
.pnuri__model{margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2);
  box-shadow:var(--shadow-2)}
.pnuri__model img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:16/10}
.pnuri{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.2vw,16px)}
.pnuri__c{display:grid;align-content:start;gap:12px;padding:clamp(18px,1.9vw,24px);
  border-radius:var(--r-lg);background:#fff;
  border:1px solid color-mix(in srgb,var(--tone,var(--indigo-600)) 30%,var(--line));
  border-top:3px solid var(--tone,var(--indigo-600));
  box-shadow:0 4px 18px color-mix(in srgb,var(--tone,var(--indigo-600)) 7%,transparent)}
.pnuri__c--coral{--tone:var(--coral);--tone-txt:var(--coral-txt)}
.pnuri__c--sky{--tone:var(--sky-400);--tone-txt:var(--sky-txt)}
.pnuri__c--blossom{--tone:var(--blossom-400);--tone-txt:var(--violet-500)}
.pnuri__c--indigo{--tone:var(--indigo-600);--tone-txt:var(--indigo-600)}
.pnuri__c--grow{--tone:var(--grow);--tone-txt:var(--grow-txt)}
.pnuri__area{font-size:.95rem;font-weight:800;letter-spacing:-.02em;color:var(--tone-txt)}
.pnuri__pill{display:grid;gap:2px;justify-items:start;padding:10px 14px;border-radius:12px;
  background:color-mix(in srgb,var(--tone) 12%,#fff);
  border:1px solid color-mix(in srgb,var(--tone) 30%,transparent)}
.pnuri__pill i{font-style:normal;font-size:.88rem;font-weight:700;line-height:1.4;
  letter-spacing:-.02em;color:var(--ink)}
.pnuri__pill em{font-style:normal;font-size:.7rem;font-weight:700;letter-spacing:.02em;
  color:var(--tone-txt)}
.pnuri__list{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.pnuri__list li{position:relative;padding-left:14px;font-size:.83rem;line-height:1.5;
  color:var(--ink-55)}
.pnuri__list li::before{content:"";position:absolute;left:0;top:.56em;width:6px;height:6px;
  border-radius:50%;background:var(--tone)}
.pnuri__extra{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin-top:clamp(18px,2.2vw,26px)}
.pnuri__xpill{display:inline-flex;align-items:center;gap:9px;padding:11px 20px;
  border-radius:999px;font-size:.88rem;font-weight:700;letter-spacing:-.016em;
  color:var(--indigo-800);background:#fff;border:1px solid color-mix(in srgb,var(--indigo-600) 30%,var(--line));
  box-shadow:var(--shadow-1)}
.pnuri__xpill svg{color:var(--indigo-600)}

/* ── 교사 내비게이션 인포그래픽 (3차 수정 s13·14) ────────────── */
/* 중앙 컬럼을 auto 로 두면 표지 원본(900px) 고유폭이 기여해 그리드가 터진다 → 고정 클램프.
   표지 팬의 회전·이동 변형이 문서 스크롤 폭에 기여하지 않게 가로만 클립. */
.pinfo{display:grid;grid-template-columns:minmax(0,1fr) clamp(230px,25vw,330px) minmax(0,1fr);
  gap:clamp(16px,2vw,28px);align-items:stretch;overflow-x:clip}
.pinfo__side{display:grid;align-content:start;gap:14px;padding:clamp(22px,2.4vw,30px);
  border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow-1);
  border:1px solid color-mix(in srgb,var(--tone,var(--indigo-600)) 28%,var(--line));
  border-top:3px solid var(--tone,var(--indigo-600))}
.pinfo__side--l{--tone:var(--indigo-600);--tone-txt:var(--indigo-600)}
.pinfo__side--r{--tone:var(--grow);--tone-txt:var(--grow-txt)}
.pinfo__tag{font-size:.8rem;font-weight:700;line-height:1.55;letter-spacing:-.012em;
  color:var(--tone-txt)}
.pinfo__st{letter-spacing:-.024em}
.pinfo__list{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:14px;counter-reset:pinfo}
.pinfo__list li{position:relative;padding-left:34px;display:grid;gap:4px;counter-increment:pinfo}
.pinfo__list li::before{content:counter(pinfo);position:absolute;left:0;top:1px;width:24px;height:24px;
  border-radius:50%;display:grid;place-items:center;font-size:.76rem;font-weight:800;color:#fff;
  background:var(--tone)}
.pinfo__list b{font-size:.95rem;font-weight:700;letter-spacing:-.02em;line-height:1.4}
.pinfo__list span{font-size:.83rem;line-height:1.55;color:var(--ink-55)}
.pinfo__mid{display:grid;align-content:center;justify-items:center;gap:clamp(18px,2.2vw,26px);
  padding:clamp(18px,2vw,26px) clamp(10px,1.4vw,18px);min-width:0}
.pinfo__fan{display:flex;align-items:center;justify-content:center;width:100%}
.pinfo__fan img{width:52%;height:auto;border-radius:7px;
  box-shadow:0 14px 34px rgba(20,16,42,.24);transition:transform .4s var(--ease)}
.pinfo__fan img:nth-child(1){transform:rotate(-9deg) translateX(16%)}
.pinfo__fan img:nth-child(2){position:relative;z-index:2;transform:scale(1.08)}
.pinfo__fan img:nth-child(3){transform:rotate(9deg) translateX(-16%)}
.pinfo__mid:hover .pinfo__fan img:nth-child(1){transform:rotate(-12deg) translateX(9%)}
.pinfo__mid:hover .pinfo__fan img:nth-child(3){transform:rotate(12deg) translateX(-9%)}
.pinfo__cycle{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;
  background:color-mix(in srgb,var(--indigo-600) 9%,#fff);
  border:1px solid color-mix(in srgb,var(--indigo-600) 28%,transparent);
  color:var(--indigo-800)}
.pinfo__cycle i{font-style:normal;font-size:.82rem;font-weight:800;letter-spacing:-.01em}
.pinfo__cycle svg{color:var(--indigo-600)}
.pinfo__loop{width:15px;height:15px;margin-left:2px}

/* ── STEP 1·2·3 표지 — MKB형 정적 그리드 (3차 수정 s12) ──────
   롤링 대신 30권 전량 노출. STEP 라벨 칩은 행 좌측, 표지 셀은 저해상 원본(≈200px)이라
   과대 확대 금지(캡션 포함 카드형). */
.pgrid{display:grid;gap:clamp(18px,2.4vw,30px)}
.pgrid__row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;
  gap:clamp(14px,2vw,28px)}
.pgrid__row.tone-coral{--tone:var(--coral);--tone-txt:var(--coral-txt)}
.pgrid__row.tone-grow{--tone-txt:var(--grow-txt)}
.pgrid__row.tone-sky{--tone-txt:var(--sky-txt)}
.pstep__lbl{flex:none;display:grid;gap:2px;justify-items:center;min-width:104px;
  padding:11px 18px;border-radius:14px;text-align:center;position:sticky;top:76px;
  background:color-mix(in srgb,var(--tone,var(--indigo-600)) 12%,#fff);
  border:1px solid color-mix(in srgb,var(--tone,var(--indigo-600)) 28%,transparent);
  font-size:.8rem;font-weight:800;letter-spacing:.1em;color:var(--tone-txt,var(--indigo-800))}
.pstep__lbl em{font-style:normal;font-size:.74rem;font-weight:600;letter-spacing:0;
  color:var(--ink-55)}
.pgrid__list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(10px,1.2vw,16px);list-style:none;margin:0;padding:0}
.pgrid__cell{display:grid;gap:8px;padding:10px 10px 12px;border-radius:12px;background:#fff;
  border:1px solid color-mix(in srgb,var(--tone,var(--indigo-600)) 22%,var(--line));
  box-shadow:var(--shadow-1);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.pgrid__cell:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.pgrid__cell img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block;
  border-radius:8px;max-width:180px;margin-inline:auto}
.pgrid__cap{font-size:.78rem;font-weight:600;line-height:1.4;letter-spacing:-.014em;
  color:var(--ink-55);text-align:center;text-wrap:balance}

/* ── 워크북 (슬라이드 23·24) ────────────────────────────────── */
.pwb__top{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(26px,4vw,64px);align-items:center}
.pwb__fan{display:flex;align-items:center;justify-content:center;padding-block:8px}
.pwb__fan img{width:34%;height:auto;border-radius:6px;
  box-shadow:0 14px 34px rgba(20,16,42,.20);transition:transform .45s var(--ease)}
.pwb__fan img:nth-child(1){transform:rotate(-8deg);margin-right:-7%}
.pwb__fan img:nth-child(2){position:relative;z-index:2;transform:scale(1.1)}
.pwb__fan img:nth-child(3){transform:rotate(8deg);margin-left:-7%}
.pwb__sub{margin-top:14px;color:var(--indigo-600)}
.pwbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.pwbs__c{display:grid;align-content:start;gap:10px;padding:clamp(20px,2.2vw,28px);
  border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-1)}
.pwbs__no{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-size:.86rem;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--indigo-800),var(--indigo-600));
  box-shadow:0 6px 16px rgba(103,91,159,.28)}
.pwbs__media{display:flex;align-items:flex-end;justify-content:center;
  min-height:clamp(170px,18vw,224px);margin-block:6px 12px}
.pwbs__media img{max-height:clamp(170px,18vw,224px);width:auto;max-width:100%;height:auto;
  border-radius:9px;box-shadow:0 10px 26px rgba(20,16,42,.16)}
/* 두 장 겹침 — 합이 컨테이너를 넘지 않게 %로 고정(가로 오버플로 방지) */
.pwbs__media--stack img{max-width:60%}
.pwbs__media--stack img:nth-child(2){margin-left:-22%;margin-bottom:-10px;
  position:relative;z-index:2;max-width:56%}
.pwbs__media--tags{flex-direction:column;align-items:center;justify-content:flex-end;gap:12px}
.pwbs__media--tags .pwbs__main{max-height:none;width:100%}
.pwbs__tags{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px}
.pwbs__tags img{max-height:22px;width:auto;border-radius:0;box-shadow:none}
.pwbs__t{letter-spacing:-.024em}
.pwb__wt{margin-top:clamp(44px,5.4vw,76px);text-align:center;max-width:22ch;margin-inline:auto}
.pwb__weeks{margin:clamp(22px,3vw,32px) 0 0;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-1)}
.pwb__weeks img{width:100%;height:auto;display:block}
.pwk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.2vw,16px)}
.pwk__c{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;
  padding:16px 20px;border-radius:var(--r);background:#fff;border:1px solid var(--line)}
.pwk__n{font-size:.76rem;font-weight:800;letter-spacing:.11em;color:var(--indigo-600)}
.pwk__b{min-width:0;display:grid;gap:2px}
.pwk__b b{font-size:.95rem;font-weight:700;letter-spacing:-.02em;line-height:1.45}
.pwk__b em{font-style:normal;font-size:.79rem;font-weight:600;letter-spacing:.02em;
  color:var(--ink-40)}

/* ── 교사 내비게이션 (슬라이드 25) ──────────────────────────── */
/* 표지는 헤드라인의 보조 — 폭을 제한해 제목이 주인공이 되게 */
.pnav__top{display:grid;grid-template-columns:minmax(0,.58fr) minmax(0,1.42fr);
  gap:clamp(28px,4.6vw,72px);align-items:center}
.pnav__cover{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow-2);background:#fff;max-width:460px}
.pnav__cover img{width:100%;height:auto;display:block}
.pnav__kick{font-size:1rem;font-weight:700;color:var(--indigo-600);letter-spacing:-.014em}
.pnav__t{margin-top:8px}
/* figure 기본 margin 초기화가 .mt-48 을 덮던 문제 → 상단 간격을 여기서 직접 지정 */
.pnav__shot{margin:clamp(44px,5.4vw,80px) 0 0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  background:#fff;box-shadow:var(--shadow-1)}
.pnav__shot img{width:100%;height:auto;display:block}
.pnav__body{max-width:64ch;margin-inline:auto;text-align:center;
  margin-top:clamp(28px,3.4vw,44px)}

/* ── 리더십 아카데미 (슬라이드 26) ──────────────────────────── */
.pacad__top{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(26px,4vw,60px);align-items:center}
.pacad__figure{position:relative;margin:0;display:grid;place-items:center;
  padding:clamp(18px,3vw,34px);isolation:isolate}
.pacad__figure::before{content:"";position:absolute;inset:6% 4%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle at 50% 46%,rgba(195,148,194,.30),rgba(127,162,213,.20) 58%,
             rgba(255,255,255,0) 72%)}
.pacad__figure img{width:100%;max-width:440px;height:auto}
.pacad__disc{margin-top:16px;max-width:52ch}
.ptrack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.ptrack__c{display:grid;align-content:start;gap:10px;padding:clamp(22px,2.4vw,30px);
  border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow-1);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.ptrack__c:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.ptrack__n{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  font-size:.82rem;font-weight:800;color:var(--indigo-600);
  background:rgba(103,91,159,.11)}
.ptrack__t{letter-spacing:-.024em}
.pacad__contact{margin-top:clamp(22px,2.6vw,30px);text-align:center}
.pacad__contact a{color:var(--indigo-600);font-weight:700;
  text-decoration:underline;text-underline-offset:3px}

/* ── 영상 3개 (슬라이드 27) ─────────────────────────────────── */
.pvid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.pvid__c{display:grid;align-content:start;gap:12px}
.pvid__k{color:var(--ink-55);margin-top:4px}
.pvid__t{letter-spacing:-.024em}

/* ── 다른 브랜드 ─────────────────────────────────────────────── */
.pother .bcard{padding:18px 16px 16px}
.pother .bcard__logo{height:56px;flex-basis:56px}
.pother .bcard__logo img{max-height:56px}
.pother .bcard__name{font-size:.88rem}

/* ══ 반응형 ═══════════════════════════════════════════════════ */
@media (max-width:1080px){
  .phero__in{grid-template-columns:1fr;gap:clamp(26px,4vw,40px)}
  .phero__copy{max-width:none}
  .phero__logos{justify-self:start;width:min(100%,380px)}
  .pwhy{grid-template-columns:1fr;gap:20px}
  .psec-head{grid-template-columns:1fr;gap:18px;align-items:start}
  .psec-head__aside{padding-bottom:0}
  .pcomp{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pcomp__card--wide{grid-column:span 2}
  .pext{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(22px,3vw,36px)}
  .pext__points{grid-template-columns:1fr;grid-template-rows:none}
  .pt--lead{grid-row:auto}
  .pwbs{grid-template-columns:1fr}
  .pwbs__media{min-height:0}
  .pwbs__media img{max-height:min(46vw,300px)}
  .pnav__top,.pacad__top,.pwb__top{grid-template-columns:1fr;gap:26px}
  .pacad__figure{max-width:420px;margin-inline:auto}
  .pwb__fan{max-width:400px;margin-inline:auto}
  .ptrack{grid-template-columns:1fr}
  .pvid{grid-template-columns:1fr;gap:26px}
  .pnuri{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 인포그래픽: 세로 스택 — 표지 팬을 맨 위로 */
  .pinfo{grid-template-columns:1fr}
  .pinfo__mid{order:-1;min-width:0;max-width:420px;margin-inline:auto}
}
@media (max-width:900px){
  .pjour{grid-template-columns:1fr;gap:clamp(18px,4vw,28px)}
  .pjour__line{display:none}
  .pjour__pole{width:100%;aspect-ratio:auto;border-radius:var(--r-lg);
    padding:clamp(18px,3vw,24px);gap:4px;box-shadow:var(--glass-shadow)}
  .pjour__books{order:-1}
  .pjour__books img{width:clamp(120px,26vw,170px)}
  .pjour__open img{width:clamp(124px,27vw,178px)}
  .pth{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pbook__th,.pwb__wt{max-width:28ch}
  .pnuri__head{grid-template-columns:1fr;gap:22px}
  .pnuri__model{max-width:560px}
  /* STEP 그리드: 행당 가로 스크롤 스냅(자동 롤링 없음) */
  .pgrid__row{grid-template-columns:1fr;gap:12px}
  .pstep__lbl{position:static;justify-self:start;justify-items:start;text-align:left;min-width:0;
    grid-auto-flow:column;align-items:baseline;gap:9px;padding:8px 14px}
  .pgrid__list{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:132px;
    overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:8px;
    margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);scrollbar-width:thin}
  .pgrid__cell{scroll-snap-align:start}
}
@media (max-width:720px){
  .phero{min-height:0;padding-block:clamp(34px,7vw,52px)}
  /* 모바일은 카피가 콜라주 한복판(노란 기린 아트)에 바로 얹힌다 → 세로 스크림을 통으로 올린다 */
  .phero__veil{background:
    linear-gradient(180deg,rgba(20,16,42,.66) 0%,rgba(20,16,42,.62) 30%,
                    rgba(20,16,42,.48) 54%,rgba(20,16,42,.34) 74%,rgba(20,16,42,.66) 100%)}
  .phero__title{font-size:clamp(1.9rem,8.2vw,2.5rem)}
  .phero__logos{width:100%}
  .pswitch__hd{display:none}
  .pswitch__pre{display:none}
  .pswitch__a{font-size:.8rem;padding-inline:10px}
  .pcomp{grid-template-columns:1fr}
  .pcomp__card,.pcomp__card--wide{grid-column:auto;min-height:clamp(210px,54vw,280px)}
  /* contain 카드는 1열에서 아트가 너무 작아진다 → 높이를 늘리고 여백을 줄인다 */
  .pcomp__card--art{min-height:clamp(290px,78vw,340px)}
  .pcomp__card--art .pcomp__media{padding:20px 18px 94px}
  /* 교사 내비게이션은 캡션이 1열 폭에서 3줄까지 흐른다 → 아래 여백을 고정하지 않고 flex 로 둔다 */
  .pcomp__card--navigation{min-height:clamp(320px,84vw,380px)}
  .pcomp__card--navigation .pcomp__media{padding:18px 16px 6px}
  .pext{grid-template-columns:1fr;gap:22px}
  .pext__photo{aspect-ratio:16/11}
  .pwk{grid-template-columns:1fr}
  .pgrid__list{grid-auto-columns:118px}
  .pth{grid-template-columns:1fr}
  .pnuri{grid-template-columns:1fr}
  .pjour__books img{width:clamp(104px,29vw,150px)}
  .pjour__open img{width:clamp(110px,30vw,158px)}
  /* 조밀한 원본 인포그래픽은 1열 폭에서 판독 불가 → 가로 스크롤로 원본 크기 유지 */
  .pwb__weeks,.pnav__shot{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scrollbar-width:thin;position:relative}
  .pwb__weeks img,.pnav__shot img{width:680px;max-width:none}
  .pscroll{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .pscroll__hint{display:block;position:sticky;left:0;padding:8px 12px 10px;color:var(--ink-55)}
}
@media (max-width:720px){
  /* 1열에서는 좌 카피 / 우 모니터 2단이 좁아 깨진다 → 세로 스택 */
  .pt__art{grid-template-columns:1fr;gap:16px}
  .pt__shot{max-width:100%;justify-self:center}
}
.pscroll__hint{display:none}
@media (max-width:720px){.pscroll__hint{display:block}}