/*
 * 웹툰PD 과정 페이지 스타일
 * 모든 규칙은 #pdPage 안에서만 적용됩니다 (사이트 공통 CSS와 충돌 방지).
 * 외부 폰트: Freesentation·Pretendard·NEXON Lv1 Gothic·Manrope (css 안 @font-face, jsDelivr CDN)
 */
/* 폰트: 사이트 공통 CSS 의 같은 이름 @font-face 와 섞이지 않도록 고유 이름(WP ...) 사용 */
@font-face{font-family:"WP Free";src:url("https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-4Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"WP Free";src:url("https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-5Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"WP Free";src:url("https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-6SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"WP Free";src:url("https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-7Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"WP Pre";src:url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"WP Pre";src:url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"WP Pre";src:url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"WP Nexon";src:url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF Light.woff") format("woff");font-weight:300;font-display:swap}
@font-face{font-family:"WP Nexon";src:url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"WP Nexon";src:url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF Bold.woff") format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"WP Manrope";src:url("https://cdn.jsdelivr.net/npm/@fontsource/manrope@5.0.8/files/manrope-latin-800-normal.woff2") format("woff2");font-weight:800;font-display:swap}
#pdPage{scroll-behavior:smooth;--bg:#1d1f22;--card:#272a2f;--accent:#08cee8;--free:"WP Free","WP Pre",sans-serif;--pre:"WP Pre",sans-serif;--nexon:"WP Nexon","WP Pre",sans-serif;
  background:var(--bg);color:#fff;font-family:var(--pre);font-weight:400;line-height:1.4;letter-spacing:normal;overflow:hidden;overflow-wrap:normal;word-break:keep-all;-webkit-font-smoothing:antialiased}
#pdPage, #pdPage *, #pdPage, #pdPage *::before, #pdPage, #pdPage *::after{box-sizing:border-box}
#pdPage h1, #pdPage h2, #pdPage h3, #pdPage h4, #pdPage p, #pdPage ul, #pdPage ol, #pdPage dl, #pdPage dd, #pdPage figure{margin:0;padding:0}
#pdPage ul, #pdPage ol{list-style:none}
#pdPage em{font-style:normal;font-weight:inherit}
#pdPage img{display:block;max-width:100%}
#pdPage button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-appearance:none;appearance:none}
#pdPage .wp-in{width:100%;max-width:1330px;margin:0 auto;padding:0 24px}
/* 스크롤 등장 */
#pdPage .wp-rv{opacity:0;transform:translateY(36px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
#pdPage .wp-rv.is-in{opacity:1;transform:none}
/* ── 히어로 ── */
#pdPage .wp-hero{position:relative;padding-top:373px}
#pdPage .wp-hero-bg{position:absolute;left:0;right:0;top:0;height:700px;overflow:hidden}
#pdPage .wp-hero-bg picture{display:block;width:100%;height:100%}
#pdPage .wp-hero-bg img{position:absolute;left:-8.96%;top:-21.38%;width:117.92%;max-width:none;height:117.92%;object-fit:cover}
#pdPage .wp-hero-bg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:318px;background:linear-gradient(0deg,var(--bg) 15%,rgba(29,31,34,0))}
#pdPage .wp-hero .wp-in{position:relative;z-index:2;max-width:1248px}
#pdPage .aeo-course-h1{display:inline-flex;align-items:center;gap:10px;font-family:var(--nexon);font-weight:700;font-size:24px;line-height:1.4;letter-spacing:-.02em;color:#fff;margin:0 0 14px}
#pdPage .aeo-course-h1::before{content:"";width:28px;height:2px;background:linear-gradient(90deg,#08cee8,rgba(8,206,232,0));flex:0 0 auto}
#pdPage .wp-logo{display:flex;align-items:center;height:90px}
#pdPage .wp-logo img{width:682px;height:auto}
#pdPage .wp-hero-copy{margin-top:22px;max-width:730px}
#pdPage .wp-hero-copy strong{display:block;font-family:var(--pre);font-weight:700;font-size:32px;line-height:46px;letter-spacing:-.7px}
#pdPage .wp-hero-copy p{margin-top:17px;font-size:17px;line-height:25px;color:#b1b1b1}
#pdPage .wp-hero-copy p+p{margin-top:0}
/* 소개글 줄바꿈: PC 는 피그마 줄 그대로(br), 좁은 화면은 br 을 끄고 자연스럽게 */
#pdPage .wp-info{display:grid;grid-template-columns:repeat(4,260px);justify-content:space-between;max-width:1200px;margin:143px auto 0}
#pdPage .wp-info li{border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:40px}
#pdPage .wp-info dl{display:flex;flex-direction:column;height:100%}
#pdPage .wp-info dt{font-family:var(--nexon);font-weight:700;font-size:16px;line-height:25.6px;letter-spacing:-.4px;color:var(--accent);padding-bottom:20px}
#pdPage .wp-info dt span{color:#fff}
#pdPage .wp-info dd{display:flex;align-items:flex-end;gap:5px;height:51px;margin-top:auto}
#pdPage .wp-info b{font-family:"WP Manrope",var(--pre);font-weight:800;font-size:64px;line-height:51.2px;color:#fff}
#pdPage .wp-info dd span{font-family:var(--nexon);font-size:16px;line-height:25.6px}
/* ── 공통 섹션 타이틀 ── */
#pdPage .wp-sec{padding-top:160px}
#pdPage .wp-sec.is-first{padding-top:143px}
#pdPage .wp-tit{display:flex;flex-direction:column;align-items:center;gap:17px;text-align:center}
#pdPage .wp-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 25px;border-radius:50px;background:rgba(52,58,67,.8);font-family:var(--free);font-weight:700;font-size:17px;line-height:27px;letter-spacing:1.36px;color:var(--accent)}
#pdPage .wp-chip img{width:12px;height:9px}
#pdPage .wp-tit h2, #pdPage .wp-tit p, #pdPage .wp-proof-tit, #pdPage .wp-proof-sub, #pdPage .wp-note{text-wrap:balance}
#pdPage .wp-tit h2{font-family:var(--nexon);font-weight:700;font-size:32px;line-height:42px;letter-spacing:-.16px}
#pdPage .wp-tit h2 em{color:var(--accent)}
#pdPage .wp-tit p{margin-top:-10px;font-family:var(--free);font-size:20px;line-height:27px;color:#eee}
#pdPage .wp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:18px 40px;border-radius:80px;background:var(--accent);font-family:var(--pre);font-weight:700;font-size:20px;line-height:1.27;letter-spacing:-.6px;color:#222;transition:transform .2s,box-shadow .2s}
#pdPage .wp-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(8,206,232,.35)}
#pdPage .wp-btn-wrap{display:flex;justify-content:center;margin-top:50px}
/* ── 01 ROLE CHECK 카드 ── */
#pdPage .wp-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1282px;margin:50px auto 0}
#pdPage .wp-role{display:flex;flex-direction:column;min-height:335px;padding:28px 30px 22px;border-radius:10px;background:var(--card);filter:drop-shadow(0 4px 14.45px rgba(13,15,17,.2));transition:transform .25s}
#pdPage .wp-role:hover{transform:translateY(-4px)}
#pdPage .wp-role-head{display:flex;align-items:center;justify-content:space-between}
#pdPage .wp-role-head span{padding:3px 15px;border-radius:50px;background:var(--accent);font-family:var(--free);font-weight:700;font-size:16px;line-height:20px;color:#222}
#pdPage .wp-role-head img{width:28px;height:28px}
#pdPage .wp-role strong{display:block;margin-top:10px;font-family:var(--free);font-weight:700;font-size:24px;line-height:28px}
#pdPage .wp-role>p{margin-top:5px;font-family:var(--free);font-weight:400;font-size:18px;line-height:24px;color:#b3b3b3}
#pdPage .wp-role-dir{margin-top:auto;padding:18px 15px;border-radius:20px 0 20px 0;background:#3c4046;font-family:var(--free);font-size:19px;line-height:24px}
#pdPage .wp-role-dir b{display:block;font-weight:700;color:var(--accent)}
#pdPage .wp-role-dir p{margin-top:5px;font-weight:600}
/* DIRECTION: 마우스를 올리거나(키보드 포커스 포함) 하면 나타남. 터치 기기(hover 없음)는 항상 보임 */
@media (hover:hover){
  #pdPage .wp-role-dir{opacity:0;transform:translateY(12px);transition:opacity .3s ease,transform .3s ease}
  #pdPage .wp-role:hover .wp-role-dir, #pdPage .wp-role:focus-within .wp-role-dir, #pdPage .wp-role:focus .wp-role-dir{opacity:1;transform:none}
}
#pdPage .wp-role:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#pdPage .wp-note{margin-top:25px;text-align:center;font-family:var(--free);font-weight:500;font-size:22px;line-height:34px}
#pdPage .wp-note b{font-weight:700}
#pdPage .wp-dots{display:none}
/* ── 02 PD DIFFERENCE (배경 띠) ── */
#pdPage .wp-diff{position:relative;margin-top:160px;padding:117px 0 118px}
#pdPage .wp-band-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
#pdPage .wp-band-bg img{width:100%;height:100%;object-fit:cover}
#pdPage .wp-diff .wp-band-bg img{opacity:.26;mix-blend-mode:color-burn}
#pdPage .wp-diff .wp-in{position:relative}
#pdPage .wp-diffs{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:1064px;margin:50px auto 0}
#pdPage .wp-dc{position:relative;display:flex;align-items:center;min-height:402px;padding:30px 37px;border-radius:15px;overflow:hidden;background:#fff;border:1px solid #e0e0e0;color:#222}
#pdPage .wp-dc.is-story{border:0;background:linear-gradient(134.9deg,#007180 0%,#08cee8 68.7%);color:#fff}
#pdPage .wp-dc-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#pdPage .wp-dc-bg img{position:absolute;max-width:none;object-fit:cover}
#pdPage .wp-dc-in{position:relative;width:100%}
#pdPage .wp-dc-in>b{display:block;font-family:var(--free);font-weight:700;font-size:19px;line-height:24px;color:var(--accent)}
#pdPage .wp-dc.is-story .wp-dc-in>b{color:#fff}
#pdPage .wp-dc-in strong{display:block;margin-top:25px;font-family:var(--free);font-weight:700;font-size:30px;line-height:28px}
#pdPage .wp-dc-in>p{margin-top:15px;font-family:var(--free);font-weight:500;font-size:19px;line-height:24px;color:#444}
#pdPage .wp-dc.is-story .wp-dc-in>p{color:#fff}
#pdPage .wp-dc ul{margin-top:19px}
#pdPage .wp-dc li{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid #e0e0e0;font-family:var(--free);font-weight:600;font-size:20px;line-height:24px}
#pdPage .wp-dc.is-story li{border-color:rgba(201,249,255,.54)}
#pdPage .wp-dc li::before{content:"";flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px rgba(8,206,232,.6)}
#pdPage .wp-dc.is-story li::before{background:#fff;box-shadow:0 0 6px rgba(255,255,255,.6)}
#pdPage .wp-common{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 15px;margin-top:32px;text-align:center}
#pdPage .wp-common span{padding:2px 20px;border:1px solid var(--accent);border-radius:50px;background:rgba(29,31,34,.6);font-family:var(--free);font-weight:700;font-size:18px;line-height:30px;color:var(--accent)}
#pdPage .wp-common p{font-family:var(--free);font-weight:600;font-size:23px;line-height:34px}
/* ── 03 영상 ── */
#pdPage .wp-vids{display:grid;grid-template-columns:repeat(2,305px);justify-content:center;gap:20px;margin-top:50px}
#pdPage .wp-vid{text-align:center}
#pdPage .wp-vid-box{position:relative;height:536px;border-radius:10px;overflow:hidden;background:#000}
#pdPage .wp-vid-box a{display:block;height:100%}
#pdPage .wp-vid-box img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
#pdPage .wp-vid-box a:hover img{transform:scale(1.03)}
#pdPage .wp-vid-box iframe{display:block;width:100%;height:100%;border:0}
#pdPage .wp-vid strong{display:block;margin-top:21px;font-family:var(--free);font-weight:700;font-size:22px;line-height:27px}
#pdPage .wp-vid p{margin-top:5px;font-family:var(--free);font-weight:500;font-size:18px;line-height:22px;color:#eee}
/* ── 04 PORTFOLIO BLUEPRINT (배경 띠) ── */
#pdPage .wp-pf{position:relative;margin-top:160px;padding:82px 0 127px}
#pdPage .wp-pf .wp-band-bg img{opacity:.1}
#pdPage .wp-pf .wp-in{position:relative}
#pdPage .wp-pfs{display:grid;grid-template-columns:repeat(5,1fr);gap:15px;max-width:1280px;margin:50px auto 0;padding-top:24px}
#pdPage .wp-pfc{position:relative;display:flex;flex-direction:column;align-items:center;min-height:325px;padding:39px 11px 20px;border-radius:10px;background:#fff;color:#000;text-align:center;transition:transform .25s}
#pdPage .wp-pfc:hover{transform:translateY(-6px)}
#pdPage .wp-pfc>i{position:absolute;left:50%;top:-24px;width:48px;height:48px;margin-left:-24px;border-radius:50%;background:linear-gradient(-120deg,rgba(80,235,255,.24),rgba(8,206,232,.24));-webkit-backdrop-filter:blur(7.6px);backdrop-filter:blur(7.6px);display:flex;align-items:center;justify-content:center;font-family:var(--free);font-weight:700;font-style:normal;font-size:20px;color:#fff}
#pdPage .wp-pfc-img{width:100%;aspect-ratio:222/165;background:#d9d9d9;overflow:hidden}
#pdPage .wp-pfc-img img{width:100%;height:100%;object-fit:cover}
#pdPage .wp-pfc strong{display:block;margin-top:15px;font-family:var(--free);font-weight:700;font-size:21px;line-height:27px}
#pdPage .wp-pfc p{margin-top:5px;font-family:var(--free);font-size:18px;line-height:22px;letter-spacing:-.36px;color:#444}
#pdPage .wp-pf .wp-btn-wrap{position:absolute;left:0;right:0;bottom:-30px;margin:0}
/* ── 05 4단계 ── */
#pdPage .wp-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 17px;max-width:847px;margin:50px auto 0}
#pdPage .wp-step{position:relative;display:flex;align-items:center;min-height:186px;padding:20px 19px 6px;border-radius:15px;overflow:hidden;background:#fff;color:#222}
#pdPage .wp-step-bg{position:absolute;inset:0;pointer-events:none}
#pdPage .wp-step-bg img{position:absolute;max-width:none;object-fit:cover;transition:transform .6s}
#pdPage .wp-step:hover .wp-step-bg img{transform:scale(1.04)}
#pdPage .wp-step-txt{position:relative}
#pdPage .wp-step-txt span{display:inline-block;padding:3px 15px;border-radius:50px;background:var(--bg);font-family:var(--free);font-weight:700;font-size:16px;line-height:20px;color:#fff}
#pdPage .wp-step-txt strong{display:block;margin-top:10px;padding:0 5px;font-family:var(--free);font-weight:700;font-size:21px;line-height:27px}
#pdPage .wp-step-txt p{margin-top:3px;padding:0 5px;font-family:var(--free);font-weight:500;font-size:18px;line-height:22px;color:#333}
/* ── 06 커리큘럼 미리보기 ── */
#pdPage .wp-weeks{display:grid;grid-template-columns:repeat(3,1fr);gap:15px 20px;max-width:1282px;margin:50px auto 0}
#pdPage .wp-week{min-height:165px;padding:28px 29px;border-radius:10px;background:var(--card)}
#pdPage .wp-week span{display:inline-block;padding:3px 15px;border-radius:50px;background:var(--accent);font-family:var(--free);font-weight:700;font-size:16px;line-height:20px;color:#222}
#pdPage .wp-week:nth-child(3n+2) span{padding:3px 15px;border:1.5px solid var(--accent);background:rgba(29,31,34,.5);color:#fff}
#pdPage .wp-week:nth-child(3n) span{background:var(--bg);color:#fff}
#pdPage .wp-week strong{display:block;margin-top:12px;font-family:var(--free);font-weight:700;font-size:24px;line-height:28px}
#pdPage .wp-week p{margin-top:5px;font-family:var(--free);font-weight:500;font-size:19px;line-height:24px;color:#eee}
/* ── 07 PARTNERSHIP ── */
#pdPage .wp-pts{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 18px;max-width:846px;margin:50px auto 0}
#pdPage .wp-pt{position:relative;display:flex;align-items:flex-end;min-height:247px;padding:0 42px 26px;border-radius:30px 5px 30px 5px;overflow:hidden;background:#1c1c1c}
#pdPage .wp-pt.is-wide{grid-column:1/-1;align-items:center;padding-bottom:0}
#pdPage .wp-pt-bg{position:absolute;inset:0;pointer-events:none}
#pdPage .wp-pt-bg img{position:absolute;max-width:none;object-fit:cover;opacity:.34}
#pdPage .wp-pt-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(33,33,33,.2) 50.2%,rgba(145,145,145,.2))}
#pdPage .wp-pt.is-wide .wp-pt-bg::after{background:rgba(26,26,26,.2)}
#pdPage .wp-pt-txt{position:relative}
#pdPage .wp-pt-txt img{width:32px;height:32px}
#pdPage .wp-pt-txt strong{display:block;margin-top:8px;font-family:var(--free);font-weight:700;font-size:26px;line-height:28px}
#pdPage .wp-pt-txt p{margin-top:5px;font-family:var(--free);font-weight:500;font-size:19px;line-height:24px;color:#eee}
#pdPage .wp-logos{margin-top:50px}
#pdPage .wp-logos .wp-marquee+.wp-marquee{margin-top:23px}
#pdPage .wp-lg{flex:0 0 194px;height:70px;margin-right:20px;border-radius:18px;background:#fff;display:flex;align-items:center;justify-content:center;padding:6px 18px}
#pdPage .wp-lg img{max-width:100%;max-height:52px;width:auto;height:auto;object-fit:contain}
/* ── 08 CTA ── */
#pdPage .wp-cta .wp-btn-wrap{margin-top:55px}
/* ── 09 수강생 인터뷰 · 강사진 ── */
/* 아래 여백은 실서버에서 바로 이어지는 AEO 영역(.edu-cont padding-top 120)이 채움 */
#pdPage .wp-proof{padding-top:122px;padding-bottom:40px}
#pdPage .wp-divider{width:2px;height:100px;margin:0 auto 116px;background:#fff}
#pdPage .wp-proof-tit{text-align:center;font-family:var(--nexon);font-weight:700;font-size:32.8px;line-height:45.86px}
#pdPage .wp-proof-tit em{display:block;color:var(--accent)}
#pdPage .wp-proof-sub{margin-top:15px;text-align:center;font-family:var(--nexon);font-weight:300;font-size:17px;line-height:27px;opacity:.7}
#pdPage .wp-marquee{overflow:hidden}
#pdPage .wp-track{display:flex;align-items:flex-start;width:max-content;animation:wp-wpMarquee 60s linear infinite}
#pdPage .wp-marquee:hover .wp-track{animation-play-state:paused}
#pdPage .wp-track.rev{animation-direction:reverse}
@keyframes wp-wpMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
#pdPage .wp-ivs{margin-top:60px;padding:4px 0}
#pdPage .wp-ivs .wp-track{align-items:stretch;animation-duration:90s}
#pdPage .wp-iv{position:relative;flex:0 0 277.5px;min-height:415px;margin-right:30px;padding:61px 31px 36px;border:1px solid #ddd;border-radius:12px;background:#fff;color:#363636;box-shadow:2px 0 2.5px rgba(0,0,0,.13)}
#pdPage .wp-iv-co{position:absolute;left:30px;top:30px;width:auto;height:19px}
#pdPage .wp-iv-co.is-tall{height:38px;top:22px}
#pdPage .wp-iv-ph{width:120px;height:120px;margin:0 auto;border-radius:50%;object-fit:cover;background:#eee}
#pdPage .wp-iv strong{display:block;padding:20px 0;text-align:center;font-family:var(--nexon);font-weight:400;font-size:21px;line-height:33.6px}
#pdPage .wp-iv p{font-family:var(--nexon);font-size:15px;line-height:24px;opacity:.7}
#pdPage .wp-teachers{margin-top:130px}
#pdPage .wp-tcs{margin-top:40px}
#pdPage .wp-tcs .wp-track{animation-duration:70s}
#pdPage .wp-tc{flex:0 0 257px;margin-right:20px}
#pdPage .wp-tc-img{aspect-ratio:257/345;border-radius:14px;overflow:hidden;background:#2a2c30}
#pdPage .wp-tc-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
#pdPage .wp-tc:hover .wp-tc-img img{transform:scale(1.04)}
#pdPage .wp-tc p{margin-top:12px;font-family:var(--free);font-size:16px;line-height:22px;color:#aaa}
#pdPage .wp-tc p b{margin-right:4px;font-weight:700;color:#fff}
/* ── 반응형 ── */
/* 사이트 오른쪽 고정 퀵메뉴(#game-fix-bar, 스크롤바 있는 1440 기준 x 1304~)에 가리지 않도록 1600 이하에선 1180 폭 */
@media (max-width:1600px){
/* 퀵메뉴(오른쪽 24px, 폭 96px)는 1281px 이상에서만 보임 → 본문 오른쪽 끝이 (화면폭-120) 안쪽에 오도록 폭을 (화면폭-260) 이하로 */
  #pdPage .wp-roles, #pdPage .wp-pfs, #pdPage .wp-weeks, #pdPage .wp-info{max-width:min(1180px,calc(100vw - 260px))}
  #pdPage .wp-diffs{max-width:min(1064px,calc(100vw - 260px))}
  #pdPage .wp-role{padding:26px 24px 20px}
  #pdPage .wp-role-dir{font-size:17px;line-height:22px}
  #pdPage .wp-role>p{font-size:17px;line-height:23px}
  #pdPage .wp-pfc p{font-size:16px;line-height:21px}
}
@media (max-width:1280px){
  #pdPage .wp-roles, #pdPage .wp-pfs, #pdPage .wp-weeks, #pdPage .wp-info{max-width:1180px}
  #pdPage .wp-diffs{max-width:1064px}
  #pdPage .wp-info{grid-template-columns:repeat(4,1fr);gap:32px;padding:0 24px}
  #pdPage .wp-pfs{gap:12px}
  #pdPage .wp-pfc p{font-size:16px;line-height:21px}
  #pdPage .wp-pfc strong{font-size:19px}
}
@media (max-width:1000px){
  #pdPage .wp-br{display:none}
  #pdPage .wp-hero-copy p{text-wrap:pretty}
  #pdPage .wp-hero{padding-top:260px}
  #pdPage .wp-hero-bg{height:560px}
  #pdPage .wp-logo img{width:520px}
  #pdPage .wp-info{grid-template-columns:repeat(2,1fr);row-gap:28px;margin-top:80px}
  #pdPage .wp-info b{font-size:52px}
  #pdPage .wp-sec{padding-top:120px}
  #pdPage .wp-sec.is-first{padding-top:100px}
  #pdPage .wp-roles{grid-template-columns:repeat(2,1fr);max-width:760px}
  #pdPage .wp-diff, #pdPage .wp-pf{margin-top:120px}
  #pdPage .wp-diffs{grid-template-columns:1fr;max-width:560px}
  #pdPage .wp-pfs{display:flex;flex-wrap:wrap;justify-content:center;row-gap:44px;max-width:760px}
  #pdPage .wp-pfc{flex:0 0 calc((100% - 24px)/3)}
  #pdPage .wp-steps{grid-template-columns:1fr;max-width:560px}
  #pdPage .wp-step-txt p{white-space:normal}
  #pdPage .wp-weeks{grid-template-columns:repeat(2,1fr);max-width:760px}
  #pdPage .wp-week:nth-child(n) span{background:var(--accent);border:0;color:#222}
  #pdPage .wp-week:nth-child(4n+2) span, #pdPage .wp-week:nth-child(4n+3) span{border:1.5px solid var(--accent);background:rgba(29,31,34,.5);color:#fff}
}
@media (max-width:700px){
  #pdPage .wp-in{padding:0 16px}
/* 모바일 히어로: Figma 웹툰pd_Mo(430) — 전용 이미지 430:419, 글자는 이미지 242px 지점부터 겹쳐 올라감 */
  #pdPage .wp-hero{padding-top:calc(100vw*211/430)}
  #pdPage .wp-hero-bg{height:auto;aspect-ratio:430/419}
  #pdPage .wp-hero-bg img{position:static;width:100%;height:100%;object-position:center top}
  #pdPage .wp-hero-bg::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(102,102,102,0) 24.57%,rgba(0,0,0,.83))}
  #pdPage .wp-hero-bg::after{z-index:1;height:75.9%}
  #pdPage .aeo-course-h1{font-size:18px;gap:8px;margin-bottom:6px}
  #pdPage .aeo-course-h1::before{width:20px}
  #pdPage .wp-logo{height:auto}
  #pdPage .wp-logo img{width:300px}
  #pdPage .wp-hero-copy{margin-top:14px}
  #pdPage .wp-hero-copy strong{font-size:20px;line-height:29px;letter-spacing:-.44px}
  #pdPage .wp-hero-copy p{margin-top:11px;font-size:15px;line-height:20.5px}
  #pdPage .wp-info{margin-top:41px;gap:29px 15px;padding:0 16px}
  #pdPage .wp-info li{padding-bottom:26px}
  #pdPage .wp-info dt{font-size:15px;line-height:21px;padding-bottom:17px}
  #pdPage .wp-info dt span{font-size:13px}
  #pdPage .wp-info dd{height:auto}
  #pdPage .wp-info b{font-size:40px;line-height:42px}
  #pdPage .wp-info dd span{font-size:13px;line-height:21px}
  #pdPage .wp-sec{padding-top:88px}
  #pdPage .wp-sec.is-first{padding-top:72px}
  #pdPage .wp-tit{gap:12px}
  #pdPage .wp-chip{font-size:13px;line-height:22px;padding:2px 16px;letter-spacing:1px}
  #pdPage .wp-tit h2{font-size:23px;line-height:32px}
  #pdPage .wp-tit p{margin-top:-6px;font-size:15px;line-height:22px}
  #pdPage .wp-btn{font-size:16px;padding:15px 28px}
  #pdPage .wp-btn-wrap{margin-top:32px}
/* 역할 카드: 한 장씩 옆으로 넘김 */
  #pdPage .wp-roles{display:flex;gap:10px;max-width:none;margin:32px -16px 0;padding:0 16px 8px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;scrollbar-width:none}
  #pdPage .wp-roles::-webkit-scrollbar{display:none}
  #pdPage .wp-role{flex:0 0 86%;min-height:0;padding:20px 18px 16px;scroll-snap-align:start;filter:none}
  #pdPage .wp-role-head span{font-size:13px;line-height:18px;padding:2px 12px}
  #pdPage .wp-role-head img{width:22px;height:22px}
  #pdPage .wp-role strong{font-size:18px;line-height:24px}
  #pdPage .wp-role>p{font-size:14px;line-height:20px}
  #pdPage .wp-role-dir{margin-top:16px;padding:14px 13px;border-radius:14px 0 14px 0;font-size:14px;line-height:20px}
  #pdPage .wp-dots{display:flex;justify-content:center;gap:8px;margin-top:14px}
  #pdPage .wp-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.3);transition:background .2s,width .2s}
  #pdPage .wp-dots i.is-on{width:18px;border-radius:3px;background:var(--accent)}
  #pdPage .wp-note{margin-top:18px;font-size:15px;line-height:23px}
  #pdPage .wp-diff{margin-top:88px;padding:64px 0}
  #pdPage .wp-diffs{gap:10px;margin-top:32px}
  #pdPage .wp-dc{min-height:0;padding:22px 20px}
  #pdPage .wp-dc-in>b{font-size:14px;line-height:20px}
  #pdPage .wp-dc-in strong{margin-top:12px;font-size:22px;line-height:26px}
  #pdPage .wp-dc-in>p{margin-top:8px;font-size:14px;line-height:20px}
  #pdPage .wp-dc ul{margin-top:10px}
  #pdPage .wp-dc li{gap:10px;padding:10px 0;font-size:14px;line-height:20px}
  #pdPage .wp-dc li::before{width:7px;height:7px}
  #pdPage .wp-common{margin-top:22px}
  #pdPage .wp-common span{font-size:13px;line-height:24px;padding:1px 14px}
  #pdPage .wp-common p{font-size:15px;line-height:22px}
  #pdPage .wp-vids{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:32px}
  #pdPage .wp-vid-box{height:auto;aspect-ratio:305/536}
  #pdPage .wp-vid strong{margin-top:12px;font-size:15px;line-height:20px}
  #pdPage .wp-vid p{font-size:12px;line-height:17px}
  #pdPage .wp-pf{margin-top:88px;padding:64px 0 90px}
/* 포트폴리오 카드: 가로 넘김 슬라이드 (태블릿의 줄바꿈 배치를 풀어 한 줄로) */
  #pdPage .wp-pfs{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:10px;max-width:none;margin:32px -16px 0;padding:24px 16px 4px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;scrollbar-width:none}
  #pdPage .wp-pfs::-webkit-scrollbar{display:none}
  #pdPage .wp-pfc{flex:0 0 44%;min-height:0;padding:30px 8px 14px;scroll-snap-align:start}
  #pdPage .wp-pfc>i{width:40px;height:40px;margin-left:-20px;top:-20px;font-size:16px}
  #pdPage .wp-pfc strong{margin-top:10px;font-size:15px;line-height:20px}
  #pdPage .wp-pfc p{font-size:12px;line-height:17px;letter-spacing:-.2px}
  #pdPage .wp-pf .wp-btn-wrap{bottom:-26px}
  #pdPage .wp-steps{gap:10px;margin-top:32px}
  #pdPage .wp-step{min-height:0;padding:20px 14px}
  #pdPage .wp-step-txt span{font-size:13px;line-height:18px;padding:2px 12px}
  #pdPage .wp-step-txt strong{margin-top:8px;font-size:16px;line-height:22px}
  #pdPage .wp-step-txt p{font-size:13px;line-height:19px}
  #pdPage .wp-weeks{gap:8px;margin-top:32px}
  #pdPage .wp-week{min-height:0;padding:16px 14px}
  #pdPage .wp-week span{font-size:12px;line-height:16px;padding:2px 10px}
  #pdPage .wp-week strong{margin-top:8px;font-size:15px;line-height:20px}
  #pdPage .wp-week p{font-size:12px;line-height:17px}
  #pdPage .wp-pts{grid-template-columns:1fr;gap:10px;margin-top:32px}
  #pdPage .wp-pt{min-height:180px;padding:0 20px 20px}
  #pdPage .wp-pt.is-wide{align-items:flex-end;padding-bottom:20px}
  #pdPage .wp-pt-txt img{width:26px;height:26px}
  #pdPage .wp-pt-txt strong{font-size:19px;line-height:24px}
  #pdPage .wp-pt-txt p{font-size:14px;line-height:20px}
  #pdPage .wp-logos{margin-top:32px}
  #pdPage .wp-logos .wp-marquee+.wp-marquee{margin-top:10px}
  #pdPage .wp-lg{flex-basis:120px;height:44px;margin-right:10px;border-radius:12px;padding:4px 12px}
  #pdPage .wp-lg img{max-height:32px}
  #pdPage .wp-cta .wp-btn-wrap{margin-top:32px}
  #pdPage .wp-proof{padding-top:80px;padding-bottom:24px}
  #pdPage .wp-divider{height:64px;margin-bottom:64px}
  #pdPage .wp-proof-tit{font-size:22px;line-height:32px}
  #pdPage .wp-proof-sub{margin-top:10px;font-size:14px;line-height:21px;padding:0 16px}
  #pdPage .wp-ivs{margin-top:32px}
  #pdPage .wp-iv{flex-basis:230px;min-height:0;margin-right:12px;padding:52px 20px 24px}
  #pdPage .wp-iv-co{left:20px;top:22px;height:15px}
  #pdPage .wp-iv-ph{width:90px;height:90px}
  #pdPage .wp-iv strong{padding:12px 0;font-size:17px;line-height:24px}
  #pdPage .wp-iv p{font-size:13px;line-height:20px}
  #pdPage .wp-teachers{margin-top:88px}
  #pdPage .wp-tcs{margin-top:28px}
  #pdPage .wp-tc{flex-basis:160px;margin-right:10px}
  #pdPage .wp-tc-img{border-radius:10px}
  #pdPage .wp-tc p{margin-top:8px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  #pdPage .wp-track{animation:none}
  #pdPage .wp-rv{opacity:1;transform:none;transition:none}
}