@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════
   PYP AGENTS English Reading — 3차 수정(09-22) 슬라이드 16~29
   site.css 토큰·컴포넌트(.glass .axis .vph .btn .eyebrow .bcard)를 전제로 한 페이지 전용 레이어.
   3차 공통 지시(대비 강화)에 따라 카드 경계는 --line-2, 톤 칩은 짙은 채움을 기본으로 한다.
   ══════════════════════════════════════════════════════════════════ */

/* 4차 검수 F-EN4-1 — 4단계 점층색을 한 곳에 둔다. 워크북 플로우 라벨(STORY→DRAMA)과 4주 타임라인 노드(1→4주)가 같은 색 사다리를 쓰므로
   한쪽만 바뀌어 어긋나지 않는다. 연한 2단계는 어두운 글자, 진한 2단계는 흰 글자 — 글자·배경 대비 모두 4.5:1 이상
   (1단계 7.0 · 2단계 5.0 · 3단계 5.9 · 4단계 12.8). 이전 BIG QUESTION 라벨(76% 보라 + 흰 글자)은 3.5:1 이라 AA 미달이었다. */
:root{
  --pe-s1:color-mix(in srgb,var(--indigo-600) 52%,#fff);--pe-s1-fg:var(--indigo-900);
  --pe-s2:color-mix(in srgb,var(--indigo-600) 70%,#fff);--pe-s2-fg:var(--indigo-900);
  --pe-s3:var(--indigo-600);--pe-s3-fg:#fff;
  --pe-s4:var(--indigo-800);--pe-s4-fg:#fff;
}

/* 4차 검수 F-EN-H1·F-EN6-1b·F-EN7-2 — 제목급 문구는 text-wrap:balance. 전역 pretty(site.css)는 p·li·dd·figcaption 만 덮어서
   h2·h3 와 카드 제목(b)에는 한 단어짜리 마지막 줄('English' · 'workbook)' · 'see' · '과정')이 남았다. 이 페이지의 제목에 일괄 적용 */
h2,h3,.pecomp__cap b{text-wrap:balance}
/* EN 은 KO 원고의 강제 개행(\n)을 쓰지 않는다 — 템플릿에서 공백으로 바꾸고, 줄바꿈은 balance 가 폭에 맞춰 정한다
   (KO 줄바꿈 기준으로 끊어 둔 'Early English inquiry / where the lesson becomes a / stage' 처럼 한 단어 줄이 남던 것 해소) */
:lang(en) .pehero__kick,:lang(en) .peroad__b{text-wrap:balance}

/* 면책 한 줄 (pyp.css 소유라 로컬 재정의) */
.disc{max-width:100ch;margin-inline:auto;text-align:center;margin-top:18px;text-wrap:balance}

/* ── 프로그램 스위처 (독서탐구와 동일 룩 — 로컬 정의) ─────────── */
.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;
  transition:background .25s var(--ease),color .25s var(--ease)}
a.pswitch__a:hover{background:var(--mist);color:var(--ink)}
.pswitch__a.is-on{background:rgba(103,91,159,.10);color:var(--indigo-800);font-weight:700}

/* ── HERO — 딥 인디고 하늘 + 원서 3권 부유 콜라주 ─────────────── */
.pehero{position:relative;overflow:hidden;isolation:isolate;color:#fff;
  background:linear-gradient(158deg,#1A1440 0%,var(--indigo-900) 38%,#2B2260 72%,#33296B 100%);
  padding-block:clamp(48px,6.4vw,84px)}
.pehero__glow{position:absolute;z-index:0;right:-6%;top:-18%;width:56%;aspect-ratio:1;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(127,162,213,.34),rgba(134,99,168,.16) 46%,transparent 70%)}
.pehero__ring{position:absolute;z-index:0;left:-9%;bottom:-34%;width:44%;aspect-ratio:1;
  border-radius:50%;pointer-events:none;border:1.5px solid rgba(195,148,194,.28)}
.pehero__in{position:relative;z-index:1;display:grid;align-items:center;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(28px,4vw,64px)}
.pehero__kick{color:rgba(255,255,255,.92)}
.pehero__title{color:#fff;margin-top:14px;font-size:clamp(2.15rem,4.8vw,3.7rem)}
.pehero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:clamp(22px,3vw,32px)}
.pehero__axis{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.10);color:#fff}
.pehero__btn{--bg:#fff;--fg:var(--indigo-900);border-color:transparent}
.pehero__btn:hover{--bg:var(--mist)}
.pehero__logos{--glass:rgba(255,255,255,.92);display:flex;align-items:center;
  gap:clamp(14px,2vw,26px);width:min(100%,420px);margin-top:clamp(26px,3.4vw,40px);
  padding:clamp(16px,2vw,24px) clamp(20px,2.4vw,30px);border-radius:var(--r-lg)}
.pehero__logo{flex:1 1 0;display:grid;place-items:center;min-width:0}
.pehero__logo+.pehero__logo{border-left:1px solid rgba(49,40,105,.14);padding-left:clamp(14px,2vw,26px)}
.pehero__logo img{max-height:clamp(46px,5.6vw,64px);max-width:100%;width:auto;object-fit:contain}
/* 원서 3권 — 가운데 크게, 좌우는 뒤로 기울여 부유 */
.pehero__books{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:clamp(300px,30vw,430px)}
.pehero__books img{width:clamp(150px,15.5vw,225px);height:auto;border-radius:8px;
  box-shadow:0 30px 70px rgba(0,0,0,.5),0 6px 18px rgba(0,0,0,.34);
  transition:transform .5s var(--ease)}
.pehero__books img:nth-child(1){position:relative;z-index:2;transform:rotate(-2deg) scale(1.16)}
.pehero__books img:nth-child(2){transform:rotate(-10deg) translate(26%,9%);margin-right:-4%}
.pehero__books img:nth-child(3){order:3;transform:rotate(9deg) translate(-26%,12%);margin-left:-4%}
.pehero__books:hover img:nth-child(2){transform:rotate(-13deg) translate(20%,6%)}
.pehero__books:hover img:nth-child(3){transform:rotate(12deg) translate(-20%,9%)}

/* ── WHY / 섹션 헤드 ─────────────────────────────────────────── */
.pewhy{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(24px,4vw,64px);align-items:start}
.pewhy .lead{max-width:56ch}
.pesec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,3.4vw,56px);align-items:end}
.pesec-head__aside{max-width:54ch;padding-bottom:4px}

/* ── COMPONENTS — 원서/워크북 2와이드 카드 ───────────────────────
   4차 수정(10-06) s06 — 책 줄이 카드 윗변에 바짝 붙어 답답("살짝씩 밑으로").
   책을 --pt 만큼 아래로 내리고 카드 높이를 그만큼 키운다. 캡션 영역(--cap)과 그라데이션 페이드(--fade)는
   px 로 고정해 두어, 책 아랫단이 글자·어두운 그라데이션과 겹치지 않는다. */
/* 4차 검수 F-EN1-1 — 윗여백을 '숫자'가 아니라 '시각 간격'으로 정의한다.
   가운데 책은 scale(1.12) 라 위·아래로 책 높이의 6% 씩 삐져나오고, 책은 폭 한계(.33 × 80%)와 높이 한계(--bk) 중 작은 쪽으로 정해진다.
   그래서 같은 --pt 라도 폭에 따라 카드 윗변↔책 간격이 19~54px 로 흔들렸다(481~720px 에서 19~22px).
   --bh = 실제 책 높이(폭·높이 한계 중 작은 값), --pt = G + 삐져나옴 − 세로 가운데 정렬로 생기는 여분 → 어느 폭에서도 간격이 G(40px) 이상.
   좁은 폰(≤~410px)은 책이 폭 한계로 작아 이미 간격이 넉넉하므로 30px 바닥을 둬 기존 모양 유지. */
.pecomp{--g:clamp(14px,1.6vw,22px);
  --cw:calc((min(1400px,100vw - var(--pad) * 2) - var(--g)) / 2);   /* 카드 폭 — 2열 */
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--g)}
.pecomp__card{--bk:clamp(138px,10.4vw,158px);
  --G:40px;--ar:1.2;                                              /* --ar = 책 세로/가로(원서 1.121 · 워크북 1.308, 아래 모디파이어) */
  --bh:min(var(--bk),calc(var(--cw) * .264 * var(--ar)));        /* .264 = 책 폭 한계 .33 × 안쪽 80% */
  --pt:max(30px,calc(var(--G) + var(--bh) * .06 - (var(--bk) - var(--bh)) / 2));
  --cap:clamp(104px,8.4vw,126px);--fade:clamp(44px,5.4vw,82px);--cz:calc(var(--cap) + var(--fade));
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:calc(var(--pt) + var(--bk) + var(--cz));
  border-radius:var(--r-lg);overflow:hidden;isolation:isolate;
  background:linear-gradient(158deg,#fff,var(--mist-2));border:1px solid var(--line-2);
  transition:transform .34s var(--ease),box-shadow .34s var(--ease)}
.pecomp__card--storybook{--ar:1.121}                              /* book-sb-*.webp 900×1009 */
.pecomp__card--workbook{--ar:1.308}                               /* book-wb-*.webp 900×1177 */
.pecomp__card:hover,.pecomp__card:focus-visible{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.pecomp__stack{position:absolute;inset:0;z-index:0;display:flex;align-items:center;
  justify-content:center;padding:var(--pt) 10% var(--cz)}
.pecomp__stack img{max-height:100%;width:auto;max-width:33%;height:auto;border-radius:5px;
  box-shadow:0 10px 26px rgba(20,16,42,.24);transition:transform .5s var(--ease)}
.pecomp__stack img:nth-child(1){transform:rotate(-8deg) translateX(18%)}
.pecomp__stack img:nth-child(2){position:relative;z-index:2;transform:scale(1.12)}
.pecomp__stack img:nth-child(3){transform:rotate(8deg) translateX(-18%)}
.pecomp__card:hover .pecomp__stack img:nth-child(1){transform:rotate(-11deg) translateX(10%)}
.pecomp__card:hover .pecomp__stack img:nth-child(3){transform:rotate(11deg) translateX(-10%)}
/* 그라데이션은 --cz(캡션 영역 + 페이드)보다 14px 안쪽에서 끝난다 — 책 아랫단(가운데 책 scale 1.12 포함)은 틴트를 받지 않고, 글자 영역(--cap)은 .86 이상으로 대비 유지 */
.pecomp__card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(20,16,42,.94) 0,rgba(20,16,42,.86) calc(var(--cap) * .9),
             rgba(20,16,42,.4) calc(var(--cap) + var(--fade) * .38),transparent calc(var(--cz) - 14px))}
.pecomp__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)}
.pecomp__txt{min-width:0}
.pecomp__cap b{display:block;color:#fff;font-weight:800;line-height:1.34;letter-spacing:-.026em;
  font-size:clamp(1.05rem,1.45vw,1.28rem)}
.pecomp__cap b+span{display:block;margin-top:7px;color:rgba(255,255,255,.9);
  font-size:.87rem;line-height:1.55}
.pecomp__go{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;
  color:#fff;border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.08);
  transition:background .3s var(--ease),transform .3s var(--ease)}
.pecomp__card:hover .pecomp__go{background:rgba(255,255,255,.24);transform:translateX(3px)}

/* ── Deep Thinking, Simple English ───────────────────────────── */
.pebridge__title{text-align:center}
.pebridge__title span{color:var(--indigo-600)}
.pebridge{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.2vw,30px)}
.pebridge__col{display:grid;align-content:start;justify-items:center;gap:clamp(18px,2.2vw,26px);
  padding:clamp(24px,3vw,40px);border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--line-2);box-shadow:var(--shadow-1)}
.pebridge__col--en{background:linear-gradient(165deg,#fff 30%,rgba(127,162,213,.14))}
.pebridge__books{display:flex;align-items:flex-end;justify-content:center}
.pebridge__books img{width:clamp(120px,12.5vw,180px);height:auto;border-radius:6px;
  box-shadow:0 14px 34px rgba(20,16,42,.22)}
.pebridge__books img:nth-child(1){transform:rotate(-6deg) translateY(4%)}
.pebridge__books img:nth-child(2){position:relative;z-index:2;transform:scale(1.08);margin-left:-6%}
.pebridge__band{width:100%;padding:14px 22px;border-radius:999px;text-align:center;
  font-size:clamp(.98rem,1.3vw,1.14rem);font-weight:700;letter-spacing:-.02em;
  background:rgba(103,91,159,.10);color:var(--indigo-800)}
.pebridge__col--en .pebridge__band{background:var(--indigo-800);color:#fff}
.pebridge__link{margin-top:-4px}

/* ── PAIR BOOK — 중앙 무대 + 겹친 외곽선 원 쌍 ──────────────────
   4차 수정(10-06) s07·s08 — 클라 기존 PPT(3차 원고 20쪽 · 4차 8쪽)처럼 중앙에 모델 아이를 세워 임팩트.
   · 좌우 노드 = 얇은 외곽선 원 2개씩 12% 겹침, 화살표는 중앙(Confidence)을 향한다.
   · 중앙 = 브랜드 그라데이션 원 + 아이 누끼. 아이는 원 바닥에 서고 머리·손이 원 위로 솟는다(pop-out).
     아이 이미지 하단은 허리에서 잘려 있으므로 Confidence 카드가 원 아래 가장자리에 걸쳐 가린다.
   · 배경 = 무대 중심의 옅은 동심원(원고 20쪽). 섹션(.pepsec)이 overflow:clip 이라 가로 스크롤이 생기지 않는다.
   · 크기는 전부 컨테이너 폭 기준(--u = 1cqw) — 노트북 폭이 달라도 구도가 그대로 줄어든다. */
.pepsec{overflow:clip;isolation:isolate}
.pepair__title,.pepair__kick{text-wrap:balance}
.pepair__kick{color:var(--indigo-600)}
.pepair{container-type:inline-size;position:relative}
.pepair__grid{--u:1vw;                                         /* cqw 미지원 브라우저용 대체값 */
  --s:clamp(172px,calc(var(--u) * 15),216px);                  /* 좌우 노드 지름 */
  --lens:calc(var(--s) * .12);                                 /* 쌍 겹침 폭 */
  --pw:calc(var(--s) * 2 - var(--lens));                       /* 쌍 전체 폭 */
  --D:clamp(300px,calc(var(--u) * 28.5),410px);                /* 중앙 무대 원 지름 */
  --pop:calc(var(--D) * .46);                                  /* 머리·손이 원 위로 솟는 높이(예약 칸) */
  /* 4차 검수 F-EN2-2 — 원 안 글자 크기·줄 수를 변수로 둬서 네 원의 제목을 같은 높이에 고정한다.
     본문이 2줄이든 3줄이든 제목 위치는 그대로: 가장 긴 본문(--nl 줄) 기준으로 [제목+본문] 블록을 원 가운데에 놓고 위에서부터 쌓는다. */
  --ft:clamp(.94rem,calc(var(--u) * 1.18),1.1rem);            /* 원 안 제목 글자 */
  --fb:clamp(.78rem,calc(var(--u) * .94),.86rem);             /* 원 안 본문 글자 */
  --nl:3;                                                      /* 본문 예약 줄 수 */
  --blk:calc(var(--ft) * 1.2 + 7px + var(--fb) * 1.5 * var(--nl));   /* 제목(1.2) + 간격 7px + 본문(1.5 × 줄 수) */
  position:relative;display:grid;align-items:center;
  grid-template-columns:var(--pw) minmax(0,1fr) var(--D) minmax(0,1fr) var(--pw);
  grid-template-rows:var(--pop) var(--D);
  padding-bottom:calc(var(--D) * .115)}                        /* Confidence 카드가 원 아래로 걸친 만큼 숨 쉴 자리 */
@supports (width:1cqw){.pepair__grid{--u:1cqw}}

/* 배경 동심원 — 무대 중심 기준, 선은 아주 옅게·안쪽으로 번지는 빛만 */
.pepair__rings{position:absolute;inset:0;z-index:0;pointer-events:none}
.pepair__rings i{position:absolute;left:50%;top:calc(var(--pop) + var(--D) / 2);aspect-ratio:1;
  border-radius:50%;transform:translate(-50%,-50%);
  border:1px solid color-mix(in srgb,var(--indigo-600) 15%,transparent);
  background:radial-gradient(closest-side,transparent 66%,color-mix(in srgb,var(--sky-400) 13%,transparent))}
.pepair__rings i:nth-child(1){width:calc(var(--D) * 1.32)}
.pepair__rings i:nth-child(2){width:calc(var(--D) * 1.62);border-color:color-mix(in srgb,var(--indigo-600) 10.5%,transparent)}
/* 가장 큰 고리는 반지름이 (솟는 높이 + 원 반지름 + 14px) 를 넘지 않게 — 제목·부제 글자를 가로지르지 않는다 */
.pepair__rings i:nth-child(3){width:calc(var(--D) * 1.92 + 28px);border-color:color-mix(in srgb,var(--indigo-600) 7%,transparent)}

/* 좌우 쌍 */
.pepair__pair{grid-row:2;position:relative;z-index:2;display:flex;align-items:center}
.pepair__pair--l{grid-column:1}
.pepair__pair--r{grid-column:5}
.pepair__node{flex:none;width:var(--s);aspect-ratio:1;border-radius:50%;
  display:grid;align-content:start;justify-items:center;gap:7px;text-align:center;
  padding:calc(var(--s) * .075);
  padding-top:max(calc(var(--s) * .075),calc((var(--s) - var(--blk)) / 2));   /* F-EN2-2 — 제목 시작선을 모든 원에서 같게(본문 줄 수와 무관) */
  border:1.25px solid color-mix(in srgb,var(--indigo-600) 40%,transparent);
  background:color-mix(in srgb,#fff 72%,transparent);
  box-shadow:0 22px 44px -26px rgba(49,40,105,.3)}
.pepair__node + .pepair__node{margin-left:calc(var(--lens) * -1)}
/* 겹친 쪽(렌즈)을 피해 글자를 바깥쪽 몸통에 놓는다 */
.pepair__node:first-child{padding-right:calc(var(--s) * .075 + var(--lens))}
.pepair__node:last-child{padding-left:calc(var(--s) * .075 + var(--lens))}
.pepair__node b{font-size:var(--ft);font-weight:800;line-height:1.2;
  letter-spacing:-.012em;color:var(--indigo-600)}
.pepair__body{font-size:var(--fb);line-height:1.5;color:var(--ink-55);
  text-wrap:balance}
/* seed 의 \n(2줄 개행)은 원 안에서는 쓰지 않는다 — 원 폭이 줄 길이(KO 14자·EN 28자)보다 좁아 강제 개행이 고아 줄을 만든다.
   자연 줄바꿈 + text-wrap:balance 가 2~3줄로 균형을 맞춘다(Confidence 카드만 폭이 넉넉해 2줄 개행 유지) */

/* 중심을 향하는 화살표 */
.pepair__arrow{grid-row:2;position:relative;z-index:2;justify-self:center;color:var(--indigo-600);opacity:.72}
.pepair__arrow--l{grid-column:2}
.pepair__arrow--r{grid-column:4;transform:scaleX(-1)}
.pepair__arrow svg{display:block;width:clamp(44px,calc(var(--u) * 4.8),72px);height:auto}

/* 중앙 무대 */
.pepair__stage{grid-column:3;grid-row:2;position:relative;z-index:1;width:var(--D);height:var(--D)}
.pepair__disc{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 28% 12%,rgba(255,255,255,.26),transparent 46%),
             linear-gradient(158deg,color-mix(in srgb,var(--sky-400) 58%,var(--indigo-600)) 0%,var(--indigo-600) 52%,var(--indigo-800) 100%);
  box-shadow:0 44px 80px -36px rgba(49,40,105,.6),inset 0 0 0 1px rgba(255,255,255,.18)}
/* 아이 — 이미지 박스가 원보다 크다(1.1배). 몸통 중심이 이미지 가로 60% 지점이라 왼쪽으로 .16D 당겨 몸통을 원 중심(= Confidence 카드 축)에 맞춘다 */
.pepair__child{position:absolute;z-index:1;left:calc(var(--D) * -.16);bottom:0;
  width:calc(var(--D) * 1.1);max-width:none;height:auto;
  filter:drop-shadow(0 16px 22px rgba(20,16,42,.26));
  transition:opacity .9s var(--ease) .2s,transform 1s var(--ease) .2s}
.js .pepair.rv:not(.in) .pepair__child{opacity:0;transform:translateY(28px)}
/* Confidence 카드 — 원 아래 가장자리에 걸쳐 아이의 잘린 하단을 가린다 */
.pepair__conf{position:absolute;z-index:3;left:50%;bottom:0;transform:translate(-50%,46%);
  width:max-content;min-width:calc(var(--D) * .74);max-width:calc(var(--D) * 1.18);   /* left:50% 로는 shrink-to-fit 이 원 반폭에 막히므로 직접 지정 */
  padding:14px 26px 16px;border-radius:20px;
  display:grid;gap:4px;justify-items:center;text-align:center;background:#fff;
  box-shadow:0 22px 46px -14px rgba(49,40,105,.36),0 2px 8px rgba(20,16,42,.06)}
.pepair__conf b{font-size:clamp(1.04rem,calc(var(--u) * 1.3),1.22rem);font-weight:800;line-height:1.25;
  letter-spacing:-.01em;color:var(--indigo-800)}
.pepair__conf .pepair__body{white-space:pre-line;color:var(--ink-70);
  font-size:clamp(.8rem,calc(var(--u) * .98),.9rem)}

/* ── 기반 언어 / 소통 언어 — 박스 없는 지그재그 ─────────────────
   4차 수정(10-06) s09·s10 — 클라 "기존 PPT 디자인과 같은 레이아웃 구조"(3차 원고 21쪽).
   1행 [회색 큰 원] → [회색 필 + Q 4개] [국문 표지 줄 → 화면 오른쪽 끝에서 잘림]
   2행 [영문 표지 줄 ← 화면 왼쪽 끝에서 들어옴] [색 원] → [색 필 + ≠ / =]
   표지 줄은 컨테이너 밖(뷰포트 끝)까지 흘러가고 섹션이 overflow:clip 으로 자른다(가로 스크롤 없음).
   2행은 flex-end 정렬이라 넘치는 폭이 왼쪽으로 빠진다. 원고처럼 2행의 표지↔원 간격(--cgap2)이 1행보다 넓다. */
.pelangs{overflow:clip}
.pelang{--bd:clamp(124px,13vw,200px);--aw:clamp(36px,3.8vw,58px);
  --bw:clamp(320px,calc(37vw - max(0px,(1440px - 100vw) * .05)),560px);   /* 1440px 미만에서만 살짝 줄여 잘리는 끝 표지가 늘 ~30px 보이게 */
  --cv:clamp(112px,11.5vw,300px);--cg:clamp(10px,1.1vw,16px);
  --cgap:clamp(22px,2.7vw,42px);--cgap2:clamp(44px,4.76vw,96px);
  display:flex;align-items:center}
.pelang--comm{justify-content:flex-end}
.pelangs .h1 + .pelang{margin-top:clamp(38px,4.4vw,64px)}
.pelang + .pelang{margin-top:clamp(56px,6vw,96px)}

/* 큰 원 — 기반 = 연한 회색·가는 글자 / 소통 = 브랜드 그라데이션·흰 글자 */
.pelang__badge{flex:none;width:var(--bd);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  text-align:center;line-height:1.2;letter-spacing:-.04em;font-size:clamp(1.5rem,2.4vw,2.2rem)}
.pelang__badge--base{background:color-mix(in srgb,var(--indigo-600) 9%,#fff);color:var(--ink);font-weight:300}
.pelang__badge--comm{color:#fff;font-weight:400;
  background:linear-gradient(152deg,color-mix(in srgb,var(--sky-400) 62%,var(--indigo-600)) 0%,var(--indigo-600) 100%);
  box-shadow:0 22px 44px -20px rgba(103,91,159,.55)}
.pelang__arrow{flex:none;width:var(--aw);display:grid;place-items:center;
  color:color-mix(in srgb,var(--indigo-600) 56%,transparent)}
.pelang__arrow svg{display:block;width:72%;height:auto}

/* 문구 필 + Q / ≠ = */
.pelang__body{flex:0 0 var(--bw);min-width:0}
.pelang__lead{padding:clamp(11px,1.1vw,15px) clamp(20px,2.2vw,32px);border-radius:999px;text-align:center;
  background:color-mix(in srgb,var(--indigo-600) 9%,#fff);color:var(--ink);
  font-size:clamp(1rem,1.3vw,1.26rem);font-weight:500;line-height:1.45;letter-spacing:-.024em;text-wrap:balance}
.pelang__lead--fill{background:var(--indigo-600);color:#fff;font-weight:600}
.pelang__qs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;
  margin-top:clamp(16px,1.8vw,26px);padding-inline:clamp(10px,2.2vw,34px)}
.pelang__qs li{display:flex;align-items:center;gap:12px;min-width:0;
  font-size:clamp(.92rem,1.1vw,1.04rem);font-weight:500;line-height:1.4;color:var(--ink-70)}
.pelang__qs li:nth-child(n+3){grid-column:1 / -1}
.pelang__qs i{flex:none;width:clamp(30px,2.4vw,36px);aspect-ratio:1;border-radius:50%;display:grid;
  place-items:center;font-style:normal;font-size:.88rem;font-weight:600;color:#fff;background:var(--indigo-600)}
.pelang__neq{margin-top:clamp(18px,2vw,28px);text-align:right;text-wrap:balance;
  font-size:clamp(1rem,1.3vw,1.2rem);font-weight:400;letter-spacing:-.02em;color:var(--ink-55)}
.pelang__eq{margin-top:8px;text-align:right;text-wrap:balance;
  font-size:clamp(1.04rem,1.4vw,1.3rem);font-weight:700;letter-spacing:-.024em;color:var(--indigo-800)}

/* 표지 줄 — 두 줄 모두 같은 비율·같은 높이(--cv). 폭은 비율에서 나온다.
   4차 검수 F-EN3-1a — 국문(440x494)·영문(560x628)은 둘 다 0.89 비율이라 정사각 강제 없이 같은 칸 크기가 된다.
   비율을 440:491 로 명시하고 위쪽 기준 cover 로 두면 국문 s3-01(안녕, 네오!)의 아래 흰 2~3행(원본 파일의 잔여 띠)이 잘려
   표지 아랫단에 가는 흰 줄이 비치지 않는다(영문은 0.5% 미만만 잘림 — 눈에 안 띔). */
.pelang__covers{flex:none;display:flex;align-items:center;gap:var(--cg);margin-left:var(--cgap)}
.pelang--comm .pelang__covers{order:-1;margin-left:0;margin-right:var(--cgap2)}
.pelang__covers img{flex:none;max-width:none;height:var(--cv);width:auto;aspect-ratio:440 / 491;
  object-fit:cover;object-position:50% 0;border-radius:6px;
  box-shadow:0 18px 32px -12px rgba(20,16,42,.36),0 3px 8px rgba(20,16,42,.1)}
/* F-EN3-1b — 키보드 포커스 표시(스와이프 레일). 안쪽으로 그려 가로 끝(화면 가장자리)에서 잘리지 않게 한다 */
.pelang__covers:focus-visible{outline:2px solid var(--indigo-600);outline-offset:-4px;border-radius:14px}

/* ── STEP 30권 정적 그리드 (MKB형) ───────────────────────────── */
.pegrid{display:grid;gap:clamp(18px,2.2vw,28px)}
.pegrid__step{display:grid;gap:14px}
.pegrid__step.tone-coral{--tone:var(--coral);--tone-txt:var(--coral-txt)}
.pegrid__step.tone-grow{--tone:var(--grow);--tone-txt:var(--grow-txt)}
.pegrid__step.tone-sky{--tone:var(--sky-400);--tone-txt:var(--sky-txt)}
.pegrid__lbl{justify-self:start;display:inline-flex;align-items:baseline;gap:9px;
  padding:9px 16px;border-radius:12px;
  font-size:.8rem;font-weight:800;letter-spacing:.1em;color:var(--tone-txt);
  background:color-mix(in srgb,var(--tone) 14%,#fff);
  border:1px solid color-mix(in srgb,var(--tone) 38%,transparent)}
.pegrid__lbl em{font-style:normal;font-size:.74rem;font-weight:600;letter-spacing:0;
  color:var(--ink-55)}
.pegrid__row{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:clamp(6px,.8vw,12px)}
.pegrid__cov{border-radius:9px;overflow:hidden;background:#fff;
  border:1px solid var(--line-2);box-shadow:var(--shadow-1);
  border-top:2px solid color-mix(in srgb,var(--tone) 55%,#fff);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.pegrid__cov:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.pegrid__cov img{width:100%;height:auto;aspect-ratio:560/628;object-fit:cover;display:block}

/* ── 워크북 + 4단계 플로우 ───────────────────────────────────── */
.pewb__top{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(26px,4vw,64px);align-items:center}
.pewb__fan{display:flex;align-items:center;justify-content:center;padding-block:8px}
.pewb__fan img{width:34%;height:auto;border-radius:6px;
  box-shadow:0 14px 34px rgba(20,16,42,.20);transition:transform .45s var(--ease)}
.pewb__fan img:nth-child(1){transform:rotate(-8deg);margin-right:-7%}
.pewb__fan img:nth-child(2){position:relative;z-index:2;transform:scale(1.1)}
.pewb__fan img:nth-child(3){transform:rotate(8deg);margin-left:-7%}
.pewb__sub{margin-top:14px;color:var(--indigo-600)}
.peflow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.5vw,20px)}
.peflow__c{position:relative;display:grid;align-content:start;gap:12px;
  padding:clamp(16px,1.8vw,22px);border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--line-2);box-shadow:var(--shadow-1)}
/* 단계 라벨 바 — s23의 보라 농도 점층 */
.peflow__lbl{display:block;text-align:center;padding:9px 10px;border-radius:10px;
  font-size:.8rem;font-weight:800;letter-spacing:.08em;color:#fff}
.peflow__c--1 .peflow__lbl{background:var(--pe-s1);color:var(--pe-s1-fg)}
.peflow__c--2 .peflow__lbl{background:var(--pe-s2);color:var(--pe-s2-fg)}
.peflow__c--3 .peflow__lbl{background:var(--pe-s3);color:var(--pe-s3-fg)}
.peflow__c--4 .peflow__lbl{background:var(--pe-s4);color:var(--pe-s4-fg)}
.peflow__media{display:block;border-radius:10px;overflow:hidden;border:1px solid var(--line);
  background:var(--mist)}
.peflow__media img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block}
/* 4차 수정(10-06) s11 — TALK TOGETHER 원본이 1200x465(2.58:1)라 16:10 칸에 cover 로 넣으면 좌우가 잘렸다("짤렸어요").
   칸 크기(16:10)는 다른 세 카드와 같게 두고 이 카드만 contain 으로 전체를 보여 준다.
   이미지 배경이 순백이라 흰 패널과 이음매가 없다. padding 도 aspect-ratio(border-box) 안에 들어가 높이는 그대로. */
.peflow__c--talk .peflow__media{background:#fff}
.peflow__c--talk .peflow__media img{object-fit:contain;padding:clamp(8px,1vw,14px)}
.peflow__b{text-align:center;font-weight:600;color:var(--ink-70)}
.peflow__arw{position:absolute;right:-14px;top:50%;transform:translateY(-50%);z-index:2;
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line-2);box-shadow:var(--shadow-1);
  color:var(--indigo-600)}

/* ── 4주 워크 플로우 ─────────────────────────────────────────────
   4차 수정(10-06) s12·s13·s14 */
/* s12 — 제목/부제 강약: 제목은 크고 두껍게·촘촘하게, 부제는 작고 가볍게·브랜드색. 간격은 가깝되 분명히 구분 */
.peweeks__head{text-align:center}
.peweeks__title{font-size:clamp(2.1rem,3.6vw,3rem);font-weight:800;line-height:1.14;letter-spacing:-.045em;
  color:var(--indigo-900);text-wrap:balance}
:lang(en) .peweeks__title{letter-spacing:-.034em}
.peweeks__sub{margin-top:clamp(10px,1.1vw,16px);font-size:clamp(1.05rem,1.6vw,1.35rem);font-weight:600;
  line-height:1.4;letter-spacing:-.022em;color:var(--indigo-600);text-wrap:balance}
.peweeks__intro{max-width:560px;margin:clamp(26px,3.2vw,40px) auto 0;display:grid;gap:12px;
  justify-items:center}
.peweeks__intro img{width:min(100%,330px);height:auto;border-radius:12px;
  border:1px solid var(--line-2);box-shadow:var(--shadow-2)}
.peweeks__intro p{text-align:center;font-weight:600}

/* s13 — 주차 표시 "잘 인식이 안 됨": 작은 '1주' 필 대신 카드 왼쪽 타임라인 레일.
   큰 번호 노드가 1→2→3→4 로 진해지며(워크북 플로우 라벨과 같은 톤 점층) 선으로 이어지고,
   4번째 노드 = DRAMA 피날레라서 4주 흐름이 끝까지 한눈에 읽힌다. */
.peweeks{--node:clamp(58px,4.6vw,68px);--rgap:clamp(16px,2vw,28px);--sgap:clamp(26px,3vw,40px);
  --cpad:clamp(20px,2.4vw,30px);
  display:grid;gap:var(--sgap)}
.pestep{position:relative;display:grid;grid-template-columns:var(--node) minmax(0,1fr);
  column-gap:var(--rgap);align-items:start}
/* 노드 색 점층(연한 라벤더 → 인디고 → 딥 인디고). 1·2주 = 어두운 글자, 3·4주 = 흰 글자 — 모두 대비 4.5:1 이상 */
.pestep--1{--wk:var(--pe-s1);--wk-fg:var(--pe-s1-fg);--wk-next:var(--pe-s2)}
.pestep--2{--wk:var(--pe-s2);--wk-fg:var(--pe-s2-fg);--wk-next:var(--pe-s3)}
.pestep--3{--wk:var(--pe-s3);--wk-fg:var(--pe-s3-fg);--wk-next:var(--pe-s4)}
.pestep--4{--wk:var(--pe-s4);--wk-fg:var(--pe-s4-fg)}
.pestep__node{position:relative;z-index:1;margin-top:var(--cpad);width:var(--node);aspect-ratio:1;
  border-radius:50%;display:grid;align-content:center;justify-items:center;gap:2px;text-align:center;
  line-height:1;background:var(--wk);color:var(--wk-fg);
  box-shadow:0 0 0 clamp(5px,.5vw,7px) var(--mist),0 16px 30px -12px color-mix(in srgb,var(--wk) 80%,transparent)}
.pestep__node b{font-size:calc(var(--node) * .5);font-weight:800;letter-spacing:-.03em}
.pestep__node i{font-style:normal;font-size:calc(var(--node) * .17);font-weight:800;letter-spacing:.1em;
  text-transform:uppercase}   /* 4차 검수 F-EN4-1 — opacity:.92 를 걷음: 2주 노드(70% 보라 + 어두운 글자)에서 4.47:1 → 5.0:1 */
/* 레일 선 — 이 노드 중심에서 다음 노드 중심까지(노드 뒤로 지나가고, 노드의 mist 링이 선을 끊어 준다) */
.pestep:not(.pestep--4)::before{content:"";position:absolute;z-index:0;
  left:calc(var(--node) / 2 - 1px);top:calc(var(--cpad) + var(--node) / 2);
  width:2px;height:calc(100% + var(--sgap));border-radius:2px;
  background:linear-gradient(to bottom,var(--wk),var(--wk-next))}

.peweek{display:grid;gap:clamp(14px,1.8vw,20px);padding:var(--cpad);
  border-radius:var(--r-lg);background:#fff;border:1px solid var(--line-2);box-shadow:var(--shadow-1)}
/* 머리 높이 = 노드 지름 → 노드와 제목 줄이 정확히 같은 가로선에 놓인다 */
.peweek__head{display:grid;align-content:center;gap:2px;min-height:var(--node)}
.peweek__eye{font-size:.74rem;font-weight:800;line-height:1.2;letter-spacing:.16em;text-transform:uppercase;
  color:var(--indigo-600)}
.peweek__cells{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.peweek__cell{margin:0;display:grid;align-content:start;gap:10px}
.peweek__shot{position:relative;display:block;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);background:var(--mist)}
.peweek__shot img{width:100%;height:auto;display:block;aspect-ratio:1100/725;object-fit:cover}   /* 나란한 두 장 높이 통일(FE-07) */
/* 4차 검수 F-EN6-1a — 영상 배지가 이미지에 구워진 'Week n' 탭(오른쪽 위)을 덮었다. 구워진 내용이 없는 오른쪽 아래 모서리로 옮기고 32px 로 줄인다.
   세 영상 이미지(p04·p05·p07) 모두 오른쪽 아래 모서리에는 얇은 테두리선·여백·쪽 번호뿐(왼쪽 아래는 굵은 'I' 화살표 칸이 모서리 가까이 있어 좁은 폭에서 가려짐).
   흰 링을 둘러 하늘색·민트·흰 패널 어느 바탕에서도 또렷하게. 모바일(≤560px)은 이미지 자체가 작으니 28px */
.peweek__play{position:absolute;right:10px;bottom:10px;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;color:#fff;background:rgba(20,16,42,.78);
  border:1px solid rgba(255,255,255,.45);box-shadow:0 0 0 2px rgba(255,255,255,.7),0 4px 12px -2px rgba(20,16,42,.35)}
.peweek__play svg{display:block;width:19px;height:19px}
.peweek__cell figcaption{font-weight:600;color:var(--ink-70)}

/* DRAMA 피날레 */
.pedrama{border-radius:var(--r-xl);overflow:hidden;background:#fff;
  border:1px solid var(--line-2);box-shadow:var(--shadow-2)}
.pedrama__stage{position:relative;isolation:isolate;min-height:clamp(320px,36vw,480px);
  display:grid;align-items:end}
.pedrama__stage>img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 34%}
.pedrama__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(20,16,42,.88) 0%,rgba(20,16,42,.5) 44%,
             rgba(20,16,42,.18) 72%,rgba(20,16,42,.3) 100%)}
.pedrama__on{position:relative;z-index:2;padding:clamp(24px,3.2vw,44px);color:#fff;
  display:grid;justify-items:center;text-align:center;gap:10px}
.pedrama__no{padding:6px 15px;border-radius:999px;font-size:.82rem;font-weight:800;
  letter-spacing:.03em;background:rgba(20,16,42,.62);border:1px solid rgba(255,255,255,.44);   /* 2라운드 검수 F-EN7-1 — 밝은 사진 위 대비 2.6 → 짙은 바탕 */
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pedrama__no em{font-style:normal;font-weight:600;opacity:.9;margin-left:2px}
/* 4차 검수 F-EN6-1b — 헤드라인(.pedrama__band)·부제는 제목급 문구라 text-wrap:pretty(전역)로는 부족 → balance. 좁은 폭에서 '되다'·'stage' 한 단어만 남던 고아 줄 해소 */
.pedrama__band{color:#fff;text-shadow:0 2px 18px rgba(20,16,42,.4);text-wrap:balance}
.pedrama__bandsub{font-size:clamp(.95rem,1.3vw,1.12rem);font-weight:600;color:rgba(255,255,255,.92);text-wrap:balance}
.pedrama__steps{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px}
.pedrama__step{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:999px;
  font-size:.88rem;font-weight:700;color:#fff;
  background:rgba(20,16,42,.5);border:1px solid rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pedrama__step i{font-style:normal;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;font-size:.7rem;font-weight:800;
  color:var(--indigo-900);background:#fff}
.pedrama__below{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(20px,3vw,44px);align-items:center;padding:clamp(22px,2.8vw,36px)}
.pedrama__below img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);
  box-shadow:var(--shadow-1)}
/* s14 — 본문 아래 정의 2행. 키 = 채움 칩(최소 폭 고정이라 대본/대사·Script/Lines 모두 칩 폭이 같다) */
.pedrama__defs{display:grid;gap:10px;margin:clamp(18px,2.2vw,28px) 0 0;padding:0}
.pedrama__defs>div{display:flex;align-items:center;gap:6px clamp(12px,1.4vw,18px);flex-wrap:wrap}
/* 2라운드 — 아주 좁은 폭(≤360px, 주차 레일 때문에 칸이 좁다)에서 dd 가 100px 남짓으로 짓눌려 'Expressions / used / every day …' 5줄이 되던 것:
   남은 폭이 11em 보다 좁으면 dd 가 칩 아래 줄로 내려가 전체 폭을 쓴다 */
.pedrama__defs dd{flex:1 1 11em;min-width:0}
.pedrama__defs dt{flex:none;min-width:clamp(80px,7vw,98px);padding:7px 16px;border-radius:9px;text-align:center;
  font-size:.95rem;font-weight:800;line-height:1.35;letter-spacing:.02em;color:#fff;
  background:linear-gradient(135deg,var(--indigo-800),var(--indigo-600))}
.pedrama__defs dd{margin:0;font-size:1rem;font-weight:600;line-height:1.5;color:var(--ink-70);text-wrap:balance}
/* 2라운드 검수 R2-EN-N2·N3 — 2~3줄짜리 짧은 문장은 전역 pretty 로는 한 단어 끝줄('완성합니다.' · 'patterns')을 못 막는다 → balance */
.pedrama__txt .deck,.pecomp__cap b+span{text-wrap:balance}

/* ── ROADMAP 3카드 ───────────────────────────────────────────── */
.peroad{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;
  gap:clamp(8px,1.2vw,18px)}
.peroad__c{display:grid;align-content:start;justify-items:center;text-align:center;gap:8px;
  padding:clamp(22px,2.6vw,34px);border-radius:var(--r-lg);border:1px solid var(--line-2);
  box-shadow:var(--shadow-1)}
.peroad__c.tone-indigo{--tone:var(--indigo-600);--tone-txt:var(--indigo-800);
  background:linear-gradient(170deg,rgba(103,91,159,.13),#fff 62%)}
.peroad__c.tone-grow{--tone:var(--grow);--tone-txt:var(--grow-txt);
  background:linear-gradient(170deg,rgba(47,163,124,.13),#fff 62%)}
.peroad__c.tone-sky{--tone:var(--sky-400);--tone-txt:var(--sky-txt);
  background:linear-gradient(170deg,rgba(127,162,213,.16),#fff 62%)}
.peroad__cover{width:clamp(110px,10.5vw,150px);height:auto;border-radius:6px;
  box-shadow:0 14px 32px rgba(20,16,42,.22);margin-bottom:10px}
.peroad__age{font-size:.8rem;font-weight:800;letter-spacing:.13em;color:var(--ink-55)}
.peroad__key{font-size:clamp(1.06rem,1.5vw,1.3rem);font-weight:800;letter-spacing:.015em;
  color:var(--tone-txt)}
.peroad__b{max-width:30ch}
.peroad__words{margin-top:6px;padding:7px 16px;border-radius:999px;font-size:.84rem;font-weight:800;
  color:var(--tone-txt);background:color-mix(in srgb,var(--tone) 13%,#fff);
  border:1px solid color-mix(in srgb,var(--tone) 36%,transparent)}
.peroad__arw{align-self:center;color:var(--ink-40)}

/* ── TEACHING SYSTEM ─────────────────────────────────────────── */
/* 4차 수정(10-06) s15 — ≥721px 는 .pre-t 로 쉼표 뒤 2행. 모바일(자연 줄바꿈)은 balance 로 '편리하게,' 뒤에서 끊어 '아이의 / 성장은' 으로 갈라지지 않게 */
.peteach__title,.peteach__sub{text-wrap:balance}
.peteach{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.peteach__c{display:grid;align-content:start;gap:12px;padding:clamp(24px,2.8vw,36px);
  border-radius:var(--r-lg);background:#fff;border:1px solid var(--line-2);box-shadow:var(--shadow-1)}
.peteach__c.tone-ai{--tone:var(--sky-400);--tone-txt:var(--sky-txt)}
.peteach__c.tone-grow{--tone:var(--grow);--tone-txt:var(--grow-txt)}
.peteach__g{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  color:var(--tone-txt);background:color-mix(in srgb,var(--tone) 14%,#fff)}
.peteach__items{display:grid;gap:9px;margin-top:4px}
.peteach__items li{position:relative;padding:12px 16px 12px 38px;border-radius:12px;
  background:var(--mist);font-size:.95rem;font-weight:600;color:var(--ink-70)}
.peteach__items li::before{content:"";position:absolute;left:16px;top:50%;
  transform:translateY(-50%);width:8px;height:8px;border-radius:50%;
  background:var(--tone);box-shadow:0 0 0 4px color-mix(in srgb,var(--tone) 18%,transparent)}
.peteach__closing{margin-top:clamp(28px,3.4vw,44px);padding:clamp(18px,2.2vw,26px) clamp(20px,3vw,40px);
  border-radius:var(--r-lg);background:var(--indigo-800);color:#fff;text-align:center;
  text-wrap:balance}   /* 4차 검수 F-EN7-2 — 390px 에서 '…성장의 / 수업' 으로 갈라지던 마무리 문장을 두 줄 균형으로 */

/* ── 영상 ────────────────────────────────────────────────────── */
.pevid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.pevid__c{display:grid;align-content:start;gap:12px}
.pevid__k{color:var(--ink-55);margin-top:4px}
.pevid__t{letter-spacing:-.024em}

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

/* ══ 반응형 ═══════════════════════════════════════════════════ */
/* PAIR BOOK — 961~1199px: 한 줄 5노드가 글자 크기를 못 지키므로 "무대 위 · 쌍 아래" 2단(피라미드). 화살표는 두 쌍 사이에서 중앙을 향한다.
   4차 검수 F-EN2-1a — 쌍 원을 190~232px 로 키워(이전 150~168px) 영문 본문 3줄이 원 안쪽 여백 10% 이상을 지킨다. 글자 크기는 .84rem 고정 */
@media (max-width:1199px){
  .pepair__grid{--s:clamp(190px,calc(var(--u) * 21),232px);--D:clamp(270px,calc(var(--u) * 36),340px);
    --fb:.84rem;
    grid-template-columns:var(--pw) minmax(0,1fr) var(--pw);grid-template-rows:var(--pop) var(--D) auto;
    padding-bottom:0}
  .pepair__stage{grid-column:1 / -1;grid-row:2;justify-self:center}
  .pepair__pair,.pepair__arrow{grid-row:3;margin-top:calc(var(--D) * .22)}
  .pepair__pair--l{grid-column:1}
  .pepair__pair--r{grid-column:3}
  .pepair__arrow--l{grid-column:2;justify-self:start}
  .pepair__arrow--r{grid-column:2;justify-self:end}
  .pelang__qs{grid-template-columns:1fr}                /* 본문 칸이 440px 아래로 좁아지면 Q 는 1열 */
}
/* PAIR BOOK — 960px 이하(태블릿·모바일 공통): [무대(아이)] → [Understand·Connect] → [Transfer·Express] 로 쌓는다.
   4차 검수 F-EN2-1a·b — 721~960px 에서 쌍 2개를 한 줄에 두면 원이 150~168px 로 쪼그라들어 영문이 원 밖으로 넘치고
   (768px EN Express 7줄), 중앙을 향하는 두 화살표가 'x' 로 겹쳤다. 모바일과 같은 쌓기로 통일해 원을 크게(최대 212px) 쓰고,
   쌍이 위아래로 놓여 화살표가 가리킬 곳이 없으니 숨긴다. 글자 크기는 원 지름에 비례(작은 폰에서도 원 안 10% 여백 유지) */
@media (max-width:960px){
  .pepair__grid{--s:clamp(158px,calc(var(--u) * 53),212px);--D:clamp(236px,calc(var(--u) * 76),300px);
    --fb:clamp(.72rem,calc(var(--s) * .0715),.86rem);--ft:clamp(.88rem,calc(var(--s) * .088),1.1rem);
    grid-template-columns:minmax(0,1fr);grid-template-rows:var(--pop) var(--D) auto auto}
  .pepair__stage{grid-column:1;grid-row:2}
  .pepair__pair{grid-column:1;justify-self:center}
  .pepair__pair--l{grid-row:3}
  .pepair__pair--r{grid-row:4;margin-top:clamp(14px,4vw,20px)}
  .pepair__arrow{display:none}
}
@media (max-width:1080px){
  .pehero__in{grid-template-columns:1fr;gap:clamp(26px,4vw,40px)}
  .pehero__books{min-height:clamp(250px,40vw,340px)}
  .pewhy{grid-template-columns:1fr;gap:20px}
  .pesec-head{grid-template-columns:1fr;gap:18px;align-items:start}
  .pesec-head__aside{padding-bottom:0}
  .pewb__top{grid-template-columns:1fr;gap:26px}
  .pewb__fan{max-width:400px;margin-inline:auto}
  .peflow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .peflow__arw{display:none}
  .pedrama__below{grid-template-columns:1fr;gap:18px}
  .peroad{grid-template-columns:1fr;gap:14px}
  .peroad__arw{transform:rotate(90deg);justify-self:center}
  .peteach{grid-template-columns:1fr}
  .pevid{grid-template-columns:1fr;gap:26px}
}
/* 기반/소통 언어 — 960px 이하: 지그재그 대신 [원 → 필] / Q·≠= / 표지 가로 스와이프(양쪽 화면 끝까지) 로 쌓는다 */
@media (max-width:960px){
  .pelang{--bd:clamp(104px,15vw,136px);--aw:clamp(26px,5vw,44px);
    display:grid;grid-template-columns:var(--bd) var(--aw) minmax(0,1fr);align-items:center;
    row-gap:clamp(18px,3vw,26px)}
  .pelang--comm{justify-content:normal}
  .pelang__badge{grid-column:1;grid-row:1;font-size:clamp(1.3rem,4.4vw,1.7rem)}
  .pelang__arrow{grid-column:2;grid-row:1}
  .pelang__body{display:contents}
  .pelang__lead{grid-column:3;grid-row:1;font-size:clamp(.95rem,2.4vw,1.1rem);padding:12px 20px}
  .pelang__qs,.pelang__neq,.pelang__eq{grid-column:1 / -1;margin-top:0;padding-inline:0}
  .pelang__neq{text-align:left}
  .pelang__eq{text-align:left;margin-top:-12px}
  /* 스와이프 레일 — 화면 양끝까지. overflow 가 그림자를 자르므로 아래 padding 을 넉넉히 주고 같은 만큼 margin 으로 되감는다 */
  .pelang__covers,.pelang--comm .pelang__covers{grid-column:1 / -1;order:0;
    margin:0 calc(var(--pad) * -1) -26px;padding:6px var(--pad) 42px;scroll-padding-inline:var(--pad);
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .pelang__covers::-webkit-scrollbar{display:none}
  .pelang__covers img{--cv:clamp(150px,36vw,210px);scroll-snap-align:start}
  .pelang + .pelang{margin-top:clamp(40px,7vw,64px)}
}
@media (min-width:601px) and (max-width:960px){
  /* 이 폭에서는 칸이 넓어 '2 + 전폭 2' 배열이 헐렁해 보인다 → 반듯한 2x2 */
  .pelang__qs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pelang__qs li:nth-child(n+3){grid-column:auto}
}
@media (max-width:720px){
  .pehero{padding-block:clamp(36px,8vw,52px)}
  .pehero__title{font-size:clamp(1.95rem,8.4vw,2.5rem)}
  .pehero__logos{width:100%}
  .pehero__books img{width:clamp(104px,26vw,150px)}
  .pswitch__hd{display:none}
  .pswitch__pre{display:none}
  .pswitch__a{font-size:.8rem;padding-inline:10px}
  .pecomp{grid-template-columns:1fr;--cw:calc(100vw - var(--pad) * 2)}   /* F-EN1-1 — 1열이라 카드 폭 = 콘텐츠 폭 */
  .pecomp__card{--bk:148px;--cap:130px;--fade:42px}
  .pebridge{grid-template-columns:1fr}
  /* PAIR BOOK — 960px 이하 규칙(무대 먼저, 그 아래 쌍 2줄)으로 이관됨 */
  /* STEP 30권 = 모바일 가로 스냅 1행 */
  .pegrid__row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;gap:10px;
    margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);padding-bottom:6px}
  .pegrid__row::-webkit-scrollbar{display:none}
  .pegrid__cov{flex:0 0 128px;scroll-snap-align:start}
  .peflow{grid-template-columns:1fr}
  /* 4주 타임라인 레일 — 모바일은 가는 레일(노드 42px) */
  .peweeks{--node:42px;--rgap:12px;--sgap:22px;--cpad:16px}
  .pestep__node i{font-size:.56rem}
  .peweek__head h3{font-size:1.28rem}
  .peweek__cells{grid-template-columns:1fr}
  .peweek__play{right:8px;bottom:8px;width:28px;height:28px}
  .peweek__play svg{width:17px;height:17px}
  .peweeks__intro img{width:min(100%,280px)}
  /* 4차 검수 F-EN7-1 — 모바일 무대: 글 블록(배지·제목·부제·알약 3개)이 폭 294px 무대 전체를 덮어 아이들 얼굴이 모두 가려지고,
     밝은 사진 위 흰 글자 대비가 2.8~3.3:1 로 떨어졌다. 글을 사진 위에 얹는 대신 [사진] → [같은 색(#14102A)으로 이어지는 짙은 패널] 로 쌓는다.
     · 사진은 정사각(최대 360px)으로 보여 아이 4~7명 얼굴이 전부 드러난다(object-position 40% → 어느 폭에서도 얼굴이 가장자리에서 잘리지 않음)
     · 사진 아랫단은 스크림으로 패널 색까지 서서히 어두워져 이음매가 없다(객석 머리 부분이라 잃는 정보 없음)
     · 글은 단색 패널 위라 대비 11:1 이상, 줄 수·폭과 무관하게 얼굴을 가릴 수 없다 */
  .pedrama__band{font-size:clamp(1.45rem,6.6vw,1.75rem)}              /* ≤375px 에서 한 줄에 들어가도록 줄임 */
  .pedrama__steps{gap:8px;margin-top:6px}
  .pedrama__step{padding:7px 13px;font-size:.84rem}
}
/* 2라운드 검수 F-EN7-1 — 사진 위에 글을 얹는 무대는 폭이 좁으면(EN 721~740px 알약 2줄) 글 블록이 아이 얼굴까지 올라온다.
   [사진] → [짙은 패널] 쌓기를 태블릿 세로(≤900px)까지 넓힌다. 사진은 최대 360px 높이로 위쪽 기준(얼굴이 위 30~45% 에 있다) */
@media (max-width:900px){
  .pedrama__stage{display:block;min-height:0;background:#14102A}
  .pedrama__stage>img{position:relative;inset:auto;display:block;width:100%;height:auto;aspect-ratio:1 / 1;max-height:360px;
    object-position:40% 0}
  .pedrama__scrim{inset:0 auto auto 0;width:100%;height:auto;aspect-ratio:1 / 1;max-height:360px;   /* width 를 명시: max-height 가 걸릴 때 비율 유지를 위해 폭이 줄어드는 것 방지 */
    background:linear-gradient(to top,#14102A 0,rgba(20,16,42,.82) 11%,rgba(20,16,42,.3) 30%,rgba(20,16,42,0) 52%)}
  .pedrama__on{margin-top:-16px;padding:0 clamp(16px,5vw,32px) clamp(24px,6.4vw,34px);gap:9px}
}
/* 4차 검수 F-EN6-1b — 375px 이하 DRAMA 패널: 헤드라인을 한 단계 줄이고, 배지·알약이 한 줄에 들어가게 안쪽 여백·글자를 조금 줄인다
   (320px 에서 영문 배지 'Week 4 · DRAMA (retrieval)' 와 알약 'Complete the open class' 가 두 줄로 꺾이던 것 해소) */
@media (max-width:375px){
  .pedrama__on{padding-inline:14px}
  .pedrama__band{font-size:clamp(1.4rem,6.4vw,1.55rem)}
  .pedrama__no{padding:5px 11px;font-size:.78rem;white-space:nowrap}
  .pedrama__step{padding:6px 11px;font-size:.8rem;gap:7px}
}
@media (prefers-reduced-motion:reduce){
  .pehero__books img,.pecomp__stack img,.pegrid__cov,.pewb__fan img,.pepair__child{transition:none}
}