/* 메인 광고 슬롯 — 그누보드: theme/classpick/css/pages/ads.css (index.php가 배너가 있을 때만 붙임)
   마크업: lib/classpick.ads.php · 동작: js/ads.js
   치수(확정, DESIGN.md 7장): 띠 1200×56 · 모바일 750×112, 히어로 1200×480 · 모바일 750×938, 모달 480×600 */

/* 넘김 공통: 슬라이드를 한 칸에 겹쳐 두고 고른 것만 보입니다. 높이는 가장 큰 슬라이드를 따릅니다 */
.ad-slider{position:relative}
.ad-slides{display:grid}
.ad-slide{grid-area:1 / 1;display:block;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s .45s}
.ad-slide.is-active{opacity:1;visibility:visible;transition:opacity .45s var(--ease),visibility 0s}
.ad-slide img,.ad-slide video{width:100%;height:auto}
.ad-slide picture{display:block}
.ad-link{display:block}
/* 동영상 배너의 모바일 이미지: 768 이하에서만(동영상은 숨겨 받지 않음) */
.ad-m{display:none}
a.ad-link:focus-visible{outline-offset:-3px}

/* 점·이전/다음·멈춤: 배너 오른쪽 위(지금 히어로의 점과 같은 자리). 시안은 아래쪽에 버튼을 그리므로 피합니다 */
.ad-ctrl{position:absolute;top:16px;right:16px;z-index:2;display:flex;align-items:center;gap:2px;padding:3px;border-radius:var(--r-pill);background:rgba(14,16,15,.5);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ad-nav{width:28px;height:28px;display:grid;place-items:center;border-radius:50%}
.ad-nav:hover{background:rgba(255,255,255,.16)}
.ad-nav svg.lucide,.ad-nav i[data-lucide]{width:16px;height:16px}
.ad-dots{display:flex;align-items:center;gap:5px;padding:0 4px}
.ad-dots button{width:7px;height:7px;border-radius:4px;background:rgba(255,255,255,.5);transition:width .25s var(--ease)}
.ad-dots button.is-active{width:18px;background:#fff}

/* 상단 띠: 헤더 위 전체 폭. 이미지는 가운데, 양옆은 배너 바탕색 */
.ad-strip{position:relative;z-index:41;background:var(--bg-subtle)}
.ad-strip .ad-slide{background:var(--ad-bg,var(--bg-subtle))}
.ad-strip .ad-slide img,.ad-strip .ad-slide video{max-width:1200px;margin:0 auto}
.ad-strip-x{position:absolute;top:50%;right:12px;transform:translateY(-50%);z-index:2;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:rgba(14,16,15,.42);color:#fff}
.ad-strip-x:hover{background:rgba(14,16,15,.6)}
.ad-strip-x svg.lucide,.ad-strip-x i[data-lucide]{width:16px;height:16px}
/* 화면이 이미지(1200)보다 좁으면 닫기 버튼 자리만큼 오른쪽을 비워 시안 글자를 가리지 않게 합니다 */
@media (max-width:1295px){ .ad-strip .ad-slide{padding-right:44px} }

/* 메인 히어로: 틀을 배너 비율로 고정해 장이 바뀌어도 높이가 그대로입니다(PC 5:2, 768 이하 4:5) */
.ad-hero{padding:24px 0 32px}
.ad-hero-slider{border-radius:var(--r-xl);overflow:hidden}
.ad-hero-slider .ad-slides{aspect-ratio:5 / 2;grid-template-rows:minmax(0,1fr);overflow:hidden}
.ad-hero-slider .ad-slide{min-height:0;background:var(--ad-bg,var(--bg-subtle))}
.ad-hero-slider .ad-link,.ad-hero-slider picture{height:100%}
.ad-hero-slider .ad-slide img,.ad-hero-slider .ad-slide video{height:100%;object-fit:cover}
/* 숨은 장은 사라진 뒤 틀 밖으로 옮겨 둡니다. 브랜드 장의 루프 영상(hero-motion.js)이 화면 밖으로 보고 멈춥니다 */
.ad-hero-slider .ad-slide{transform:translateX(110%);transition:opacity .45s var(--ease),visibility 0s .45s,transform 0s .45s}
.ad-hero-slider .ad-slide.is-active{transform:none;transition:opacity .45s var(--ease),visibility 0s,transform 0s}

/* 브랜드 장: 지금의 브랜드 히어로(문구·지표·루프 영상)를 틀에 맞춥니다. 바탕은 배너 장과 같은 틀 색이고 문구는 틀 안쪽으로 들입니다.
   틀 높이에 따라 글자를 줄이고 소개 문장·지표를 덜어 냅니다 */
.ad-brand{container:ad-brand / size}
.ad-brand .hero-in{max-width:none;height:100%;margin:0;padding:0 0 0 56px;grid-template-columns:minmax(0,1fr) 46%;gap:40px}
.ad-brand .hero-copy .badge{margin-bottom:14px}
.ad-brand .hero-copy h1{font-size:clamp(26px,9.2cqh,44px)}
.ad-brand .hero-copy .lead{font-size:16px;margin-top:14px}
.ad-brand .hero-cta{margin-top:24px}
.ad-brand .hero-stats{margin-top:24px;padding-top:18px}
.ad-brand .hero-stats dd{font-size:22px}
.ad-brand .hero-visual{align-self:stretch}
.ad-brand .hero-slides{height:100%;aspect-ratio:auto}
/* 브랜드 장은 등록 배너가 있을 때만 생기고 그때는 배너 넘김 점이 보이므로, 영상의 장면 점과 학습자 수 칩은 뺍니다(사용자 결정 2026-10-16) */
.ad-brand .hero-dots{display:none}
.ad-brand .hero-float{display:none}
@container ad-brand (max-height:440px){
  .ad-brand .hero-in{gap:32px;padding-left:40px}
  .ad-brand .hero-copy .lead{font-size:15px;margin-top:12px}
  .ad-brand .hero-cta{margin-top:20px}
  .ad-brand .hero-cta .btn{height:48px}
  .ad-brand .hero-stats{display:none}
}
@container ad-brand (max-height:330px){
  .ad-brand .hero-copy .lead{display:none}
}

/* 메인 모달: 창 하나(480×600 배너 + 아래 버튼 두 개) */
.ad-modal-backdrop{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(14,16,15,.55)}
.ad-modal{width:100%;max-width:min(480px, calc((100vh - 40px - 52px) * .8));max-width:min(480px, calc((100dvh - 40px - 52px) * .8));border-radius:var(--r-xl);overflow:hidden;background:var(--bg);box-shadow:var(--sh-3);outline:none}
.ad-modal-slider .ad-slide img,.ad-modal-slider .ad-slide video{aspect-ratio:4 / 5;object-fit:cover}
.ad-modal-foot{display:flex;border-top:1px solid var(--border)}
.ad-modal-foot button{flex:1;height:52px;font-size:14px;font-weight:600;color:var(--text-2)}
.ad-modal-foot button + button{border-left:1px solid var(--border);color:var(--text);font-weight:700}
.ad-modal-foot button:hover{background:var(--bg-subtle)}
.ad-modal-foot button:focus-visible{outline-offset:-3px}
html.ad-lock,html.ad-lock body{overflow:hidden}

@media (max-width:768px){
  .ad-hero{padding:16px 0 8px}
  .ad-slide .ad-pc{display:none}
  .ad-slide .ad-m{display:block}
  .ad-hero-slider .ad-slides{aspect-ratio:4 / 5}
  /* 모바일 이미지가 없는 배너는 자르지 않고 바탕색 위에 통째로 */
  .ad-hero-slider .ad-no-m img,.ad-hero-slider .ad-no-m video{object-fit:contain}
  /* 브랜드 장: 영상 위(점·버튼이 영상 위에 얹힘), 문구 아래. 소개 문장과 지표는 뺍니다 */
  .ad-brand .hero-in{display:flex;flex-direction:column;align-items:stretch;gap:16px;padding:0}
  .ad-brand .hero-visual{order:-1;flex:1;min-height:0}
  .ad-brand .hero-copy{padding:0 20px 20px}
  .ad-brand .hero-copy .badge{margin-bottom:10px}
  .ad-brand .hero-copy h1{font-size:26px}
  .ad-brand .hero-copy .lead,.ad-brand .hero-stats{display:none}
  .ad-brand .hero-cta{margin-top:16px}
  .ad-brand .hero-cta .btn{height:44px;padding:0 16px;font-size:15px}
  .ad-ctrl{top:12px;right:12px}
  .ad-strip-x{right:6px;width:26px;height:26px}
  .ad-strip .ad-slide{padding-right:36px}
}
@media (prefers-reduced-motion:reduce){
  .ad-slide,.ad-slide.is-active,.ad-hero-slider .ad-slide,.ad-hero-slider .ad-slide.is-active,.ad-dots button{transition:none}
}