/* ═══════════════════════════════════════════════════════════════════
   TASK:T1331 — 유튜브 카테고리(/video/) 전용 스타일.

   출처: 사용자 제공 UI 시안 docs/multiagent-youtube-ui.zip(youtube-showcase/dist/style.css).
   레이아웃·구성(인트로 → 대표영상 → 아카이브 그리드 → 구독 CTA → 모달)은 시안 그대로,
   색/폰트/여백 토큰만 이 테마 것(style.css :root)으로 갈아끼웠다:
     시안 --bg #06111f → var(--bg) #050b12   시안 --blue #55b9ff → var(--blue) #65c4ff
     시안 --ink #edf6fc → var(--ink)         시안 #e9edf0(밝은 면) → var(--paper)
     시안 --pad/--ease  → 테마의 같은 이름 토큰(값이 사실상 동일)
   새 토큰을 만들지 않았다 — :root 는 건드리지 않고 전부 .mah-video 안에서만 쓴다.

   시안과 다른 점(page-video.php 주석과 같은 이유):
     · 헤더가 이 테마에서는 position:fixed 라 인트로 상단 여백을 다른 히어로(.archive-hero
       140px, .home-hero 150px)와 같은 계열로 잡았다. 시안(absolute, 86px)을 그대로 쓰면
       제목이 헤더에 가린다.
     · 썸네일이 그라디언트 더미가 아니라 실제 이미지라 .mah-video-thumb 에 img 규칙이 있다.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 인트로 ─────────────────────────────────────────────────── */
.mah-video-intro{position:relative;padding:clamp(150px,15vw,240px) var(--pad) 70px;overflow:hidden;background:radial-gradient(circle at 76% 30%,rgba(33,126,209,.18),transparent 33%),linear-gradient(145deg,var(--bg2),var(--bg))}
.mah-video-grid-bg{position:absolute;inset:0;opacity:.1;background-image:linear-gradient(rgba(255,255,255,.9) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.9) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:linear-gradient(to bottom,#000,transparent);mask-image:linear-gradient(to bottom,#000,transparent)}
.mah-video-intro-inner{position:relative;z-index:2;width:min(100%,var(--max));margin:0 auto}
.mah-video-intro h1{max-width:1230px;margin:23px 0 66px;font-size:clamp(48px,7vw,116px);line-height:.98;letter-spacing:-.065em}
.mah-video-intro h1 span{color:#7f93a6;font-weight:520}
.mah-video-intro-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;border-top:1px solid var(--line);padding-top:24px}
.mah-video-intro-foot p{margin:0;color:#a0b2c2;font-size:clamp(15px,1.2vw,19px)}
.mah-video-count{flex-shrink:0;text-align:right;color:#6d8294;font-size:11px;font-weight:900;letter-spacing:.15em;line-height:1.5}
.mah-video-count b{display:block;color:#fff;font-size:42px;line-height:1;font-weight:300;letter-spacing:-.04em}

/* ── 대표 영상(밝은 면) ─────────────────────────────────────── */
.mah-video-featured{padding:clamp(80px,9vw,120px) var(--pad);background:var(--paper);color:#06111f}
.mah-video-featured-inner{width:min(100%,var(--max));margin:0 auto}
.mah-video-section-label{display:flex;justify-content:space-between;margin-bottom:22px;font-size:12px;font-weight:900;letter-spacing:.14em}
.mah-video-section-label span{color:#586f7c} /* TASK:T1331 — 시안 #8a979f 는 밝은 면(#edf0ef)에서 대비 2.61(Lighthouse 실측). 테마가 밝은 면에 이미 쓰는 #586f7c(4.6)로 올렸다. */
.mah-video-section-label p{margin:0}
/* 대표 영상은 "미디어 | 카피" 2열이다. 시안처럼 카피를 썸네일 위에 얹지 않는 이유는
   page-video.php 의 같은 TASK 주석 참고(실제 썸네일에 큰 자막이 박혀 있어 겹친다). */
.mah-video-hero{position:relative;display:grid;grid-template-columns:1.4fr 1fr;width:100%;padding:0;border:0;border-radius:26px;overflow:hidden;text-align:left;color:inherit;background:linear-gradient(150deg,#0a1a2b,#06111f);box-shadow:0 30px 80px rgba(8,35,54,.2);cursor:pointer}
.mah-video-hero-media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#06111f}
.mah-video-hero img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.mah-video-hero:hover img{transform:scale(1.03)}
.mah-video-hero-copy{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:clamp(26px,3vw,52px);border-left:1px solid rgba(175,208,234,.16);color:#fff}
.mah-video-hero-meta{display:block;color:var(--blue);font-size:12px;font-weight:900;letter-spacing:.16em}
.mah-video-hero-title{display:block;font-size:clamp(24px,2.5vw,42px);line-height:1.24;letter-spacing:-.045em;font-weight:800}
.mah-video-hero-views{display:block;color:#9db0bf;font-size:14px;font-weight:700}

/* 재생 버튼(대표/카드 공용) */
.mah-video-play{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:88px;height:88px;border:1px solid rgba(255,255,255,.45);border-radius:50%;background:rgba(4,12,20,.42);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .3s var(--ease),background .3s}
.mah-video-trigger:hover .mah-video-play,.mah-video-trigger:focus-visible .mah-video-play{transform:translate(-50%,-50%) scale(1.1);background:var(--blue)}
.mah-video-play i{width:0;height:0;margin-left:6px;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:15px solid #fff}
.mah-video-play--mini{left:auto;right:18px;top:18px;transform:none;width:52px;height:52px}
.mah-video-trigger:hover .mah-video-play--mini,.mah-video-trigger:focus-visible .mah-video-play--mini{transform:scale(1.1)}
.mah-video-play--mini i{border-top-width:6px;border-bottom-width:6px;border-left-width:10px}

/* 재생시간 배지 */
.mah-video-duration{position:absolute;z-index:2;right:16px;bottom:14px;padding:5px 8px;border-radius:6px;color:#fff;background:rgba(0,0,0,.72);font-size:12px;font-weight:800;letter-spacing:.02em}

/* ── 아카이브 그리드 ────────────────────────────────────────── */
.mah-video-archive{padding:clamp(90px,11vw,140px) var(--pad);background:#071421}
.mah-video-archive-inner{width:min(100%,var(--max));margin:0 auto}
.mah-video-archive-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:58px}
.mah-video-archive h2{margin:10px 0 0;font-size:clamp(40px,6vw,92px);line-height:1;letter-spacing:-.06em}
.mah-video-filters{display:flex;gap:7px;flex-wrap:wrap}
.mah-video-filters button{min-height:40px;padding:9px 16px;border:1px solid var(--line);border-radius:30px;background:transparent;color:#91a6b7;font-size:14px;font-weight:700;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.mah-video-filters button:hover{color:#fff;border-color:rgba(175,208,234,.4)}
.mah-video-filters button.is-selected{background:#eaf3fb;border-color:#eaf3fb;color:#07111d}
.mah-video-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 18px}
.mah-video-card.is-folded,.mah-video-card.is-hidden{display:none}
/* 카드 미디어: 버튼(썸네일) + 그 위에 얹히는 장식 배지들. 배지를 버튼 밖에 두는 이유는
   page-video.php 의 같은 TASK 주석 참고(접근가능 이름 규칙). */
.mah-video-media{position:relative}
.mah-video-media>.mah-video-no,.mah-video-media>.mah-video-duration{pointer-events:none}
.mah-video-thumb{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;border-radius:18px;overflow:hidden;background:#0b2235;cursor:pointer}
.mah-video-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.mah-video-thumb:hover img{transform:scale(1.05)}
.mah-video-no{position:absolute;z-index:2;left:16px;top:14px;padding:3px 7px;border-radius:5px;background:rgba(4,12,20,.55);color:rgba(255,255,255,.72);font-size:11px;font-weight:800;letter-spacing:.12em}
.mah-video-card-meta{margin:18px 0 8px;color:#7d97ab;font-size:13px;font-weight:800;letter-spacing:.06em}
.mah-video-card h3{margin:0;font-size:clamp(18px,1.5vw,24px);line-height:1.4;letter-spacing:-.03em;font-weight:700}
.mah-video-empty{margin:40px 0 0;color:#8ca0b3}
.mah-video-more{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:80px;padding:22px 0;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:none;color:inherit;text-align:left;font-size:16px;font-weight:800;cursor:pointer;transition:color .25s}
.mah-video-more:hover{color:var(--blue)}

/* ── 구독 CTA(밝은 면) ──────────────────────────────────────── */
.mah-video-subscribe{position:relative;display:grid;place-content:center;overflow:hidden;padding:clamp(90px,11vw,140px) var(--pad);text-align:center;background:var(--paper);color:#07111d}
.mah-video-subscribe-inner{position:relative;z-index:2;width:min(100%,var(--max));margin:0 auto}
.mah-video-subscribe .eyebrow{color:var(--blue-on-paper)}
.mah-video-subscribe h2{margin:18px 0 35px;font-size:clamp(42px,7vw,110px);line-height:.98;letter-spacing:-.065em}
.mah-video-subscribe h2 span{color:#9b761f}
.mah-video-subscribe-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;min-width:280px;min-height:56px;padding:17px 24px;border-radius:35px;color:#fff;background:#07111d;font-size:15px;font-weight:800;transition:transform .25s var(--ease),background .25s}
.mah-video-subscribe-cta:hover{transform:translateY(-2px);background:#0d1f31}
.mah-video-subscribe-note{margin:20px 0 0;color:#5c6f7b;font-size:14px}
/* TASK:T1331 — 시안은 워터마크를 <div> 텍스트로 뒀지만, 거의 투명한 장식이라 대비 검사에
   1.07 로 걸린다(aria-hidden 이어도 axe 의 color-contrast 는 "보이는 텍스트"를 검사한다).
   같은 그림을 가상요소 content 로 그려 DOM 텍스트 자체를 없앴다 — 화면은 동일하다. */
.mah-video-subscribe:after{content:"WATCH";position:absolute;left:50%;bottom:-7vw;transform:translateX(-50%);color:rgba(7,17,29,.035);font-size:23vw;line-height:.8;font-weight:950;letter-spacing:-.08em;pointer-events:none}

/* ── API 실패 폴백 ──────────────────────────────────────────── */
.mah-video-fallback{padding:clamp(80px,10vw,130px) var(--pad);background:#071421}
.mah-video-fallback-inner{width:min(100%,900px);margin:0 auto;text-align:center}
.mah-video-fallback h2{margin:14px 0 12px;font-size:clamp(28px,4vw,48px);letter-spacing:-.045em}
.mah-video-fallback p{color:#8ca0b3}
.mah-video-fallback .button{margin-top:24px}

/* ── 모달 ───────────────────────────────────────────────────── */
.mah-video-modal{position:fixed;width:min(1100px,92vw);padding:0;border:1px solid var(--line);border-radius:22px;background:#02070c;box-shadow:0 30px 120px #000;overflow:visible}
.mah-video-modal::backdrop{background:rgba(0,4,8,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.mah-video-modal-frame{aspect-ratio:16/9;border-radius:22px;overflow:hidden}
.mah-video-modal-frame iframe{width:100%;height:100%;border:0}
.mah-video-modal-close{position:absolute;z-index:3;right:10px;top:10px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(0,0,0,.72);color:#fff;font-size:25px;line-height:1;cursor:pointer}
.mah-video-modal-close:hover{background:rgba(0,0,0,.9)}

/* ── 반응형 ─────────────────────────────────────────────────── */
@media(max-width:1050px){
  .mah-video-cards{grid-template-columns:repeat(2,1fr)}
  .mah-video-hero{grid-template-columns:1fr}
  .mah-video-hero-copy{gap:10px;justify-content:flex-start;border-left:0;border-top:1px solid rgba(175,208,234,.16)}
  .mah-video-play{width:78px;height:78px}
}
@media(max-width:700px){
  .mah-video-intro{padding-top:120px}
  .mah-video-intro h1{margin-bottom:42px;font-size:clamp(38px,12vw,60px)}
  .mah-video-intro-foot{display:block}
  .mah-video-count{display:none}
  .mah-video-play{width:64px;height:64px}
  .mah-video-play--mini{width:46px;height:46px;right:12px;top:12px}
  .mah-video-archive-head{display:block}
  .mah-video-filters{margin-top:26px}
  .mah-video-cards{grid-template-columns:1fr;gap:44px}
  .mah-video-more{margin-top:56px}
  .mah-video-subscribe-cta{width:100%;min-width:0}
}
@media(prefers-reduced-motion:reduce){
  .mah-video *{animation:none!important;transition:none!important}
}