/* =====================================================================
   world.css — PURPLE SAJU 메인 세계관 영역 (.pw-*)
   ---------------------------------------------------------------------
   메인 랜딩에만 쓰이는 스타일입니다. 다른 화면은 이 파일을 불러오지 않습니다.
   구성
     인트로 영상(오버레이) → 세로 웹툰 001~013 → 세계관 영상 → 014
     → 무료사주 / SIGNATURE → 채널 CTA 3 → PURPLE 만화관

   세로 웹툰 원칙
     · 컷과 컷 사이에 여백 · 테두리 · 카드 UI 를 넣지 않습니다 (하나의 긴 이야기)
     · 원본 비율 그대로 — 자르거나 늘이지 않습니다 (얼굴 · 말풍선 잘림 0)
   ===================================================================== */

.pw{
  --pw-bg:#120920;
  --pw-gold:#E7C976;
  --pw-w:clamp(320px, 100%, 520px);   /* 세로 웹툰 읽기 적정 폭 (PC 에서 과하게 넓히지 않습니다) */
  position:relative;
  background:
    radial-gradient(90% 34% at 50% 0%, rgba(150,88,255,.18), transparent 70%),
    radial-gradient(70% 26% at 50% 100%, rgba(212,175,55,.08), transparent 74%),
    linear-gradient(180deg,#1A0E2E 0%, var(--pw-bg) 38%, #0E0719 100%);
  color:#F3EFFC;
  overflow:hidden;
}
.pw-wrap{ width:var(--pw-w); margin:0 auto; padding:0; }

/* ── 구역 제목 · 문구 ─────────────────────────────── */
.pw-head{ text-align:center; padding:clamp(44px,8vw,84px) clamp(20px,6vw,28px) clamp(20px,4vw,32px); }
.pw-eyebrow{
  margin:0 0 10px; font-size:clamp(.66rem,2.8vw,.74rem);
  letter-spacing:.42em; padding-left:.42em; color:rgba(235,215,154,.78);
}
.pw-title{
  margin:0; font-family:var(--ps-serif,'Noto Serif KR',serif);
  font-size:clamp(1.5rem,6.2vw,2.1rem); line-height:1.35; color:#FFFFFF;
  text-shadow:0 0 30px rgba(184,156,255,.36); word-break:keep-all;
}
.pw-lead{
  margin:12px auto 0; max-width:26em;
  font-size:clamp(.88rem,3.6vw,1rem); line-height:1.75;
  color:rgba(243,239,252,.72); word-break:keep-all;
}

/* ── 세로 웹툰 ───────────────────────────────────── */
.pw-strip{ width:var(--pw-w); margin:0 auto; display:block; font-size:0; }
.pw-strip img{
  display:block; width:100%; height:auto;   /* 원본 비율 유지 · 잘림 없음 */
  margin:0; padding:0; border:0; border-radius:0;
}

/* ── 영상 (웹툰 흐름 안) ─────────────────────────── */
.pw-film{ width:var(--pw-w); margin:0 auto; position:relative; background:#0B0618; }
.pw-film video{
  display:block; width:100%; height:auto; aspect-ratio:1080 / 1920; background:#0B0618;
}
.pw-film-bar{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:12px clamp(16px,5vw,24px) 0; flex-wrap:wrap;
}
/* 인트로 영상도 세계관 영상과 같은 자리에 보이게 합니다 (덮개가 아니라 흐름 안) */
.pw-film-intro{ margin-top:4px; }

/* ── 전면 이미지 (책 · 입장) ──────────────────────
   원본 3:4 를 그대로 둡니다. 자르지 않고 폭에 맞춰 전부 보이게 해야
   그림 안의 글씨가 가려지지 않습니다. */
.pw-poster{ width:var(--pw-w); margin:0 auto; background:#0B0618; }
.pw-poster-in{ display:block; position:relative; text-decoration:none; color:inherit; }
.pw-poster picture{ display:block; }   /* 인라인이라 아래에 생기는 틈을 없앱니다 */
.pw-poster img{
  display:block; width:100%; height:auto;
  aspect-ratio:1086 / 1448;          /* 원본 비율 — 레이아웃이 흔들리지 않게 */
  object-fit:contain;                /* 잘라내지 않습니다 */
  background:#0B0618;
}
/* 그림 전체가 입구일 때, 아래쪽에 눌러도 된다는 표시를 얹습니다
   (그림 안의 「PURPLE SAJU로 입장하세요」 글씨는 가리지 않는 위치입니다) */
.pw-poster-cta{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  min-height:46px; padding:0 22px; border-radius:999px;
  background:linear-gradient(180deg, rgba(212,175,55,.96), rgba(176,138,32,.96));
  color:#1A0E33; font-weight:700; font-size:.95rem; letter-spacing:.01em;
  box-shadow:0 10px 26px rgba(10,5,20,.45);
}
.pw-poster-in:focus-visible{ outline:3px solid rgba(212,175,55,.75); outline-offset:3px; }
@media (hover:hover){ .pw-poster-in:hover .pw-poster-cta{ filter:brightness(1.06); } }
@media (max-width:360px){ .pw-poster-cta{ font-size:.88rem; padding:0 16px; } }

/* 작은 보조 버튼 (다시보기 · 소리) */
.pw-mini{
  min-height:40px; padding:0 14px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(212,175,55,.34); background:rgba(23,12,41,.6);
  color:rgba(243,239,252,.82); font-size:.8rem; letter-spacing:.02em;
  -webkit-tap-highlight-color:transparent;
}
.pw-mini:hover{ border-color:rgba(212,175,55,.6); }
.pw-mini:focus-visible{ outline:2px solid #F0D57A; outline-offset:2px; }

/* ── 인트로 오버레이 ─────────────────────────────── */
.pw-intro{
  position:fixed; inset:0; z-index:95; background:#07040F;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity 300ms ease;
}
.pw-intro.is-on{ opacity:1; }
.pw-intro.is-out{ opacity:0; }
.pw-intro video{
  display:block; width:100%; height:100%; object-fit:contain; background:#07040F;
}
.pw-intro-x{
  position:absolute; right:14px; top:max(14px, calc(env(safe-area-inset-top) + 10px));
  display:flex; gap:8px; z-index:2;
}

/* ── 서비스 전환 (무료사주 / SIGNATURE) ───────────
   광고 배너처럼 보이지 않도록 — 얇은 금선 + 버튼 두 개만 둡니다. */
.pw-serve{
  width:var(--pw-w); margin:0 auto;
  padding:clamp(26px,6vw,40px) clamp(20px,6vw,28px) clamp(34px,7vw,52px);
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.pw-rule{
  width:min(220px,64%); height:1px; margin:0 0 6px;
  background:linear-gradient(90deg, transparent, rgba(212,175,55,.5), transparent);
}
.pw-btn{
  width:100%; max-width:340px; min-height:56px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:clamp(.96rem,4vw,1.05rem); font-weight:700; letter-spacing:.02em;
  border-radius:999px; text-decoration:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.pw-btn-gold{
  color:#20142F; border:0;
  background:linear-gradient(100deg,#FFF3CF,#F0D57A 46%,#D4AF37);
  box-shadow:0 12px 32px rgba(212,175,55,.26), 0 0 0 1px rgba(255,255,255,.2) inset;
}
.pw-btn-ghost{
  color:#F3EFFC; background:rgba(243,239,252,.05);
  border:1px solid rgba(212,175,55,.45);
}
.pw-btn:focus-visible{ outline:2px solid #FFF3CF; outline-offset:3px; }
.pw-btn .pw-ar{ font-weight:600; }

/* ── 브리지 문구 ─────────────────────────────────── */
.pw-bridge{
  text-align:center; padding:clamp(34px,7vw,56px) clamp(20px,6vw,28px);
}
.pw-bridge p{
  margin:0; font-family:var(--ps-serif,'Noto Serif KR',serif);
  font-size:clamp(1rem,4.2vw,1.18rem); line-height:1.7;
  color:rgba(243,239,252,.8); word-break:keep-all;
}
.pw-bridge span{ display:block; margin-bottom:12px; color:rgba(212,175,55,.6); font-size:.9rem; }

/* ── 채널 CTA 3개 ───────────────────────────────── */
.pw-ch{
  width:var(--pw-w); margin:0 auto;
  padding:0 clamp(16px,5vw,24px) clamp(30px,6vw,48px);
  display:flex; flex-direction:column; gap:clamp(12px,3vw,18px);
}
.pw-ch a, .pw-ch .pw-ch-item{
  display:block; border-radius:14px; overflow:hidden; text-decoration:none;
  box-shadow:0 10px 26px rgba(6,3,16,.45);
  transition:transform 180ms ease;
}
.pw-ch a:hover{ transform:translateY(-2px); }
.pw-ch a:focus-visible{ outline:2px solid #F0D57A; outline-offset:3px; }
.pw-ch img{ display:block; width:100%; height:auto; }

/* ── PURPLE 만화관 ───────────────────────────────── */
.pw-hub{ padding:0 clamp(20px,6vw,28px) clamp(50px,9vw,90px); }
.pw-hub-grid{
  width:min(var(--pw-w), 100%); margin:0 auto;   /* 2026-10-19 : 320px 화면에서 양옆 여백 안쪽(280px)보다 넓게(최소 320px) 넘치던 것 — 360px 이상 · PC 는 그대로 */
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(10px,3vw,16px);
}
.pw-ep{
  position:relative; display:block; text-decoration:none; color:inherit;
  border:1px solid rgba(212,175,55,.24); border-radius:14px; overflow:hidden;
  background:rgba(23,12,41,.55); cursor:pointer; text-align:left;
  padding:0; font:inherit; width:100%;
}
.pw-ep-thumb{ display:block; width:100%; aspect-ratio:3 / 4; object-fit:cover; }
.pw-ep-body{ padding:11px 12px 14px; }
.pw-ep-no{
  display:block; font-size:.62rem; letter-spacing:.24em; padding-left:.24em;
  color:rgba(212,175,55,.8); margin-bottom:5px;
}
.pw-ep-t{ display:block; font-size:.9rem; line-height:1.45; color:#F3EFFC; word-break:keep-all; }
.pw-ep:hover{ border-color:rgba(212,175,55,.5); }
.pw-ep:focus-visible{ outline:2px solid #F0D57A; outline-offset:3px; }
.pw-ep.is-soon{ cursor:default; }
.pw-ep.is-soon .pw-ep-thumb{
  aspect-ratio:3 / 4; background:
    repeating-linear-gradient(135deg, rgba(212,175,55,.05) 0 10px, transparent 10px 20px),
    rgba(23,12,41,.8);
}
.pw-ep.is-soon .pw-ep-t{ color:rgba(243,239,252,.5); }

/* ── PC ─────────────────────────────────────────── */
@media (min-width:900px){
  .pw{ --pw-w:520px; }
  .pw-ch{ width:min(1040px, 92vw); flex-direction:row; gap:20px; }
  .pw-ch > *{ flex:1 1 0; }
  .pw-hub-grid{ width:min(1040px, 92vw); grid-template-columns:repeat(4, minmax(0,1fr)); }
  .pw-serve{ flex-direction:row; justify-content:center; gap:16px; flex-wrap:wrap; }
  .pw-serve .pw-rule{ width:100%; }
  .pw-btn{ width:auto; min-width:250px; }
}

@media (prefers-reduced-motion:reduce){
  .pw-intro, .pw-ch a{ transition:none !important; }
}

/* =====================================================================
   PC 전용 — 좌우 여백의 '잔향'
   ---------------------------------------------------------------------
   PC 에서 가운데 웹툰 양옆이 단색으로 비어 보이지 않도록,
   지금 보고 있는 컷의 '색감만' 아주 흐리게 번지게 합니다.
     · 소스는 가로 48px 짜리 (얼굴 · 별 · 글자는 형체가 남지 않습니다)
     · 여기에 blur + 어두운 막 + 낮은 밝기를 더해 중앙과 경쟁하지 않게 합니다
     · 모바일에는 적용하지 않습니다 (display:none)
   웹툰의 폭과 원본 비율은 그대로입니다 — 확대하지 않습니다.
   ===================================================================== */
.pw-amb{ display:none; }

@media (min-width:900px){
  .pw{ background:linear-gradient(180deg,#140A24 0%, #0E0719 100%); }

  .pw-amb{
    display:block; position:fixed; inset:0; z-index:0; pointer-events:none;
    opacity:0; transition:opacity 500ms ease;
  }
  .pw-amb.is-on{ opacity:1; }

  .pw-amb-l{
    position:absolute; inset:-10%;
    background-size:cover; background-position:center center; background-repeat:no-repeat;
    filter:blur(26px) saturate(1.24) brightness(.72) contrast(1.06);
    opacity:0; transition:opacity 900ms ease;
  }
  .pw-amb-l.is-on{ opacity:1; }

  /* 가운데는 더 어둡게, 위아래는 페이지 배경으로 — 또 하나의 그림처럼 보이지 않게 */
  .pw-amb-veil{
    position:absolute; inset:0;
    background:
      radial-gradient(44% 72% at 50% 50%,
        rgba(11,6,24,.90) 0 44%, rgba(11,6,24,.18) 76%, rgba(11,6,24,.54) 100%),
      linear-gradient(180deg,#0E0719 0%, rgba(14,7,25,0) 13%,
                              rgba(14,7,25,0) 87%, #0E0719 100%);
  }

  /* 중앙 콘텐츠는 잔향 위에 둡니다 */
  .pw-head, .pw-strip, .pw-film, .pw-serve, .pw-bridge, .pw-ch, .pw-hub{
    position:relative; z-index:1;
  }
  /* 웹툰 기둥의 좌우 경계가 딱 잘려 보이지 않도록 어둠으로 번지게 합니다 */
  .pw-strip, .pw-film{ box-shadow:0 0 120px 40px rgba(14,7,25,.6); }
}

@media (prefers-reduced-motion:reduce){
  .pw-amb, .pw-amb-l{ transition:none !important; }
}

/* =====================================================================
   모바일 — 세계관 구간에서 하단 고정 네비 감추기
   ---------------------------------------------------------------------
   읽는 동안(아래로 스크롤) 내려가 있다가, 나가려고 위로 올리면 바로 돌아옵니다.
   세계관 구간을 벗어나면 항상 원래대로 돌아옵니다.
   ★ 하단 네비 자체(기능 · 링크 · 구조)는 그대로입니다 —
     이 파일은 메인에서만 불러오고, 위치만 잠시 내립니다.
   ===================================================================== */
@media (max-width:899px){
  body.has-bottom-nav .bottom-nav{
    transition:transform 260ms ease, opacity 260ms ease;
    will-change:transform;
  }
  body.pw-nav-away .bottom-nav{
    transform:translateY(130%);
    opacity:0;
    pointer-events:none;
  }
}
@media (prefers-reduced-motion:reduce){
  body.has-bottom-nav .bottom-nav{ transition:none !important; }
}

/* =====================================================================
   PC 다듬기 (≥900px) — 메인에서만 적용됩니다
   ---------------------------------------------------------------------
   ① 히어로를 첫 화면에 그대로 둡니다 (잔향이 히어로를 덮지 않도록)
   ② 콘텐츠가 적은 구역이 화면 한 장을 억지로 차지하지 않게 높이를 내용에 맞춥니다
   ③ 줄어든 자리는 기존 PURPLE SAJU 의 별빛 · 골드 · 퍼플 광원으로 아주 절제해서 채웁니다
   모바일(<900px)은 한 줄도 바뀌지 않습니다.
   ===================================================================== */
@media (min-width:900px){

  /* ── ② 세계관 구간 세로 여백 조이기 ───────────────── */
  .pw-head{ padding-top:clamp(40px,4.6vh,64px); padding-bottom:clamp(14px,2vh,24px); }
  .pw-head .pw-lead{ margin-top:10px; }
  #pwIntroReplay{ margin-top:12px !important; }

  .pw-serve{ padding-top:clamp(22px,2.6vh,32px); padding-bottom:clamp(26px,3.2vh,38px); gap:14px; }
  /* 버튼 두 개가 한 줄에 놓이도록 — 링크 · 문구는 그대로입니다 */
  .pw-serve{ width:min(760px, 92vw); }
  .pw-btn{ min-width:270px; }
  .pw-serve .pw-rule{ margin-bottom:2px; }

  .pw-bridge{ padding-top:clamp(24px,3vh,36px); padding-bottom:clamp(24px,3vh,36px); }
  .pw-bridge span{ margin-bottom:8px; }

  .pw-ch{ padding-bottom:clamp(26px,3.2vh,38px); }

  .pw-hub{ padding-bottom:clamp(44px,5.4vh,68px); }
  .pw-hub .pw-head{ padding-top:clamp(26px,3.2vh,40px); }
  .pw-ep-thumb{ aspect-ratio:1 / 1; }          /* 카드가 세로로 과하게 길어지지 않게 */
  /* 「준비 중」 카드 규칙이 더 구체적이라 함께 맞춰 줍니다 */
  .pw-ep.is-soon .pw-ep-thumb{ aspect-ratio:1 / 1; }

  /* PC 는 세계관을 올리지 않으므로, 기존 섹션 높이·여백은
     원래 style.css / purple-saju.css 값을 그대로 씁니다 (여기서 덮어쓰지 않습니다). */

  /* ── ③ 절제한 Visual DNA — 세계관 구간 배경 ───────────
     별빛은 아주 옅게, 골드는 바닥 쪽에만. 중앙 웹툰과 경쟁하지 않습니다. */
  .pw-sky{
    position:absolute; inset:0; z-index:0; pointer-events:none;
    opacity:.5; mix-blend-mode:screen;
  }
  .pw-sky svg{ width:100%; height:100%; display:block; }
  .pw::after{                                  /* 골드 여명 — 구간 맨 아래 */
    content:''; position:absolute; left:0; right:0; bottom:0; height:38vh; z-index:0;
    background:radial-gradient(70% 100% at 50% 100%, rgba(212,175,55,.085), transparent 72%);
    pointer-events:none;
  }
}

/* 모바일에서는 별빛 레이어를 쓰지 않습니다 (현재 화면 그대로) */
@media (max-width:899px){ .pw-sky{ display:none; } }

/* =====================================================================
   PC 압축 세계관 (.pw2) — 900px 이상에서만 씁니다
   ---------------------------------------------------------------------
   모바일의 세로 웹툰 구조를 PC 로 늘린 것이 아니라,
   같은 콘텐츠를 PC 문법(1200px 그리드)으로 다시 배치한 층입니다.
   모바일은 이 블록 밖이라 한 줄도 영향받지 않습니다.
   ===================================================================== */
@media (min-width:900px){

  .pw2{
    position:relative; overflow:hidden;
    --pw2-w:1200px; --pw2-gold:#E7C976;
    /* 위아래 색은 world.js 가 퀵링크 · 다음 섹션의 실제 배경색을 읽어 넣습니다 */
    background:linear-gradient(180deg,
      var(--pw2-top,#140A28) 0%, #150B2C 11%, #1A0E2E 34%,
      #20123C 52%, #281751 72%, #3A2560 89%, var(--pw2-bottom,#F7F5FA) 100%);
  }

  /* ── 깊이 레이어 (새 이미지 없이 기존 천체 헬퍼만) ── */
  .pw2-sky,.pw2-sky2{ position:absolute; left:0; right:0; z-index:0;
    mix-blend-mode:screen; pointer-events:none; }
  .pw2-sky{  top:0;   height:58%; opacity:.60; }
  .pw2-sky2{ top:46%; height:34%; opacity:.30; }
  .pw2-sky svg,.pw2-sky2 svg{ width:100%; height:100%; display:block; }

  .pw2-dawn{ position:absolute; left:0; right:0; bottom:0; height:52%; z-index:0; pointer-events:none;
    background:
      radial-gradient(80% 100% at 50% 100%, rgba(231,201,118,.15), transparent 66%),
      radial-gradient(120% 84% at 22% 100%, rgba(176,148,232,.17), transparent 60%),
      radial-gradient(120% 84% at 82% 100%, rgba(150,120,220,.13), transparent 60%); }

  .pw2-wrap{ position:relative; z-index:1; width:var(--pw2-w); margin:0 auto; }

  /* ── W-A : 세계관 + 캐릭터 영상 ── */
  .pw2-a{ position:relative; display:grid; grid-template-columns:340px 1fr; gap:64px;
          align-items:center; padding:58px 0 46px; }
  .pw2-glow{ position:absolute; left:-140px; top:40px; width:820px; height:820px; z-index:0;
    pointer-events:none; border-radius:50%; filter:blur(6px);
    background:radial-gradient(circle, rgba(124,77,255,.20) 0%, rgba(124,77,255,.07) 42%, transparent 70%); }
  .pw2-orbit{ position:absolute; right:-130px; top:-60px; width:620px; height:620px; z-index:0;
    opacity:.30; pointer-events:none; }
  .pw2-orbit svg{ width:100%; height:100%; display:block; }

  .pw2-film{ position:relative; z-index:1; border-radius:18px; overflow:hidden; background:#0B0618;
    box-shadow:0 26px 70px rgba(0,0,0,.52), 0 0 0 1px rgba(231,201,118,.26), 0 0 90px rgba(124,77,255,.20); }
  .pw2-film img,.pw2-film video{ display:block; width:340px; height:auto; aspect-ratio:1080 / 1920; }
  .pw2-film::after{ content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(180deg, transparent 58%, rgba(11,6,24,.42) 100%); }
  .pw2-film.is-playing::after{ display:none; }
  .pw2-cap{ position:absolute; left:0; right:0; bottom:104px; z-index:2; margin:0; text-align:center;
    font-size:12.5px; letter-spacing:.04em; color:rgba(243,239,252,.78); }
  .pw2-play{ position:absolute; left:50%; bottom:34px; transform:translateX(-50%); z-index:2;
    width:60px; height:60px; border-radius:50%; cursor:pointer;
    border:1px solid rgba(231,201,118,.60); background:rgba(18,9,32,.58); backdrop-filter:blur(3px);
    display:flex; align-items:center; justify-content:center; color:#E7C976; font-size:18px;
    box-shadow:0 8px 28px rgba(0,0,0,.45); }
  .pw2-film.is-playing .pw2-play,
  .pw2-film.is-playing .pw2-cap{ display:none; }

  .pw2-copy{ position:relative; z-index:1; color:#F3EFFC; }
  .pw2-eyebrow{ margin:0 0 14px; font-size:13px; letter-spacing:.22em; font-weight:600;
    color:var(--pw2-gold); text-transform:uppercase; }
  .pw2-title{ margin:0 0 18px; font-size:38px; line-height:1.3; font-weight:700; color:#F3EFFC;
    font-family:var(--font-title, inherit); letter-spacing:-.01em; }
  .pw2-lead{ margin:0 0 22px; font-size:17.5px; line-height:1.95; color:#E4DBFA; }
  .pw2-quote{ margin:0 0 26px; padding:18px 0 18px 20px;
    border-left:2px solid rgba(231,201,118,.62);
    font-size:16.5px; line-height:1.9; font-weight:500; color:#EFE8FF;
    font-family:var(--font-title, inherit); letter-spacing:-.005em; }
  .pw2-btns{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
  .pw2-btn{ display:inline-flex; align-items:center; gap:8px; min-height:52px; padding:0 26px;
    border-radius:999px; font-size:15px; font-weight:600; text-decoration:none; color:#F3EFFC;
    border:1px solid rgba(231,201,118,.42); background:rgba(255,255,255,.05); }
  .pw2-btn:hover{ background:rgba(255,255,255,.10); }
  .pw2-btn.is-key{ color:#1A0E2E; border-color:transparent;
    background:linear-gradient(135deg,#F0D57A,#D9B65A); }
  .pw2-mini{ background:none; border:0; padding:0; cursor:pointer;
    color:#A697CC; font-size:13px; text-decoration:underline; text-underline-offset:4px; }

  /* ── W-B : 만화관 ── */
  .pw2-hub{ position:relative; padding:14px 0 44px; }
  .pw2-const{ position:absolute; left:50%; top:-18px; transform:translateX(-50%);
    width:1000px; height:190px; z-index:0; opacity:.34; pointer-events:none; }
  .pw2-const svg{ width:100%; height:100%; display:block; }
  .pw2-head{ position:relative; z-index:1; text-align:center; margin-bottom:24px; }
  .pw2-title2{ margin:8px 0 0; font-size:27px; font-weight:700; color:#F3EFFC;
    font-family:var(--font-title, inherit); }
  .pw2-eps{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
  .pw2-ep{ display:block; border-radius:14px; overflow:hidden; text-align:left; text-decoration:none;
    border:1px solid rgba(231,201,118,.22); background:rgba(255,255,255,.04);
    box-shadow:0 10px 30px rgba(0,0,0,.28); }
  .pw2-ep:hover{ border-color:rgba(231,201,118,.45); background:rgba(255,255,255,.07); }
  .pw2-ep img{ display:block; width:100%; aspect-ratio:4 / 3; object-fit:cover; object-position:50% 22%; }
  .pw2-ep-b{ display:block; padding:14px 16px 16px; }
  .pw2-ep-n{ display:block; font-size:12px; letter-spacing:.16em; color:var(--pw2-gold); margin-bottom:6px; }
  .pw2-ep-t{ display:block; font-size:15px; font-weight:600; color:#F3EFFC; }

  /* ── W-C : 채널 3 — 기존 배너 자산을 3열로 나란히 ── */
  .pw2-ch{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:0 0 40px; }
  .pw2-c{ display:block; border-radius:14px; overflow:hidden; text-decoration:none;
    box-shadow:0 12px 34px rgba(0,0,0,.32); transition:transform .18s ease, box-shadow .18s ease; }
  .pw2-c:hover{ transform:translateY(-3px); box-shadow:0 18px 44px rgba(0,0,0,.42); }
  .pw2-c img{ display:block; width:100%; height:auto; }

  /* ── W-D : 브리지 ── */
  .pw2-bridge{ position:relative; z-index:1; margin:0; text-align:center; padding:0 0 52px;
    font-size:15px; letter-spacing:.02em; color:#5E4B8B; }
  .pw2-bridge span{ color:var(--pw2-gold); margin-right:8px; }
}