/* =============================================================================
   통합 홈 '안전을, 영상으로 보다.' (2026-10-24) — js/home-video.js 와 한 쌍
   - 현재 홈 디자인 토큰(--ap-*)·구역(.ha-tile .ha-wrap .ha-head)을 그대로 쓴다. 새 색은 없다(흰색/회색 바탕 · 검정 글자 · 파란 포인트 · 둥근 모서리).
   - 영상 카드는 항상 16:9(aspect-ratio) — iframe 에 고정 width/height 를 두지 않고 카드 안을 가득 채운다. 폭은 제목·공지 카드와 같은 본문 폭 전체(좌우 선이 같다).
   ========================================================================== */
.ha-tile.ha-vid{padding-top:0;}   /* 위 [공지 / 일정] 구역과 같은 바탕색 — 위 구역의 아래 여백(64px)이 간격이 된다 */
.ha-vid-card{position:relative;width:100%;margin:0;aspect-ratio:16 / 9;border-radius:var(--ap-r-xl);overflow:hidden;background:#000;box-shadow:0 1px 3px rgba(0,0,0,.06),0 12px 32px rgba(0,0,0,.12);}
.ha-vid-play{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;background:#000;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.ha-vid-th{display:block;width:100%;height:100%;object-fit:cover;}   /* 4:3 썸네일의 위아래 검은 띠는 cover 로 잘려 16:9 로 보인다 */
.ha-vid-th[hidden]{display:none;}
.ha-vid-ico{position:absolute;left:50%;top:50%;width:72px;height:51px;margin:-25px 0 0 -36px;transition:transform .16s ease;}
.ha-vid-ico svg{display:block;width:100%;height:100%;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));}
.ha-vid-ico .hv-pbg{fill:rgba(33,33,33,.82);transition:fill .16s ease;}
.ha-vid-play:active .ha-vid-ico{transform:scale(.94);}
@media (hover:hover){ .ha-vid-play:hover .hv-pbg{fill:var(--ap-blue);} .ha-vid-play:hover .ha-vid-ico{transform:scale(1.05);} }
.ha-vid-play:focus-visible{outline:3px solid var(--ap-blue-focus);outline-offset:-3px;}
.ha-vid-frame{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;}
.ha-vid-note{margin:10px 0 0;text-align:right;font-size:13px;line-height:1.4;color:var(--ap-ink-60);}
.ha-vid-note a{color:var(--ap-blue);text-decoration:none;}
.ha-vid-note a:hover,.ha-vid-note a:focus-visible{text-decoration:underline;}
/* 영상이 없을 때 관리자에게만 */
.ha-vid-empty{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;padding:20px 24px;border:1px dashed var(--ap-hair);border-radius:var(--ap-r-lg);background:#fff;font-size:15px;color:var(--ap-ink-60);}
@media (max-width:640px){
  .ha-vid-card{border-radius:var(--ap-r-lg);}   /* 모바일: 화면 너비 가득 1열 · 가로 스크롤 없음 */
  .ha-vid-ico{width:60px;height:42px;margin:-21px 0 0 -30px;}
  .ha-vid-empty{padding:16px 16px;}
}
@media (prefers-reduced-motion:reduce){ .ha-vid-ico,.ha-vid-ico .hv-pbg{transition:none;} }

/* ── 관리자 [안전 YouTube 영상] 창 ── */
.hv-modal .modal{max-width:720px;}
.hv-sec{margin:0 0 20px;}
.hv-h{display:block;margin:0 0 8px;font-size:14px;font-weight:700;color:var(--ink-2,#555);}
.hv-tag{margin-left:6px;font-size:12px;font-weight:400;color:#b45309;}
.hv-cur .hv-prev,.hv-sec .hv-prev{width:100%;border-radius:var(--ap-r-lg);box-shadow:none;}
.hv-meta{margin:8px 0 0;font-size:13px;color:var(--ap-ink-60);overflow-wrap:anywhere;}
.hv-none{margin:0;padding:14px 16px;border:1px dashed var(--ap-hair);border-radius:var(--ap-r-md);color:var(--ap-ink-60);font-size:14px;}
.hv-url{width:100%;box-sizing:border-box;min-height:44px;padding:10px 12px;border:1px solid var(--ap-hair);border-radius:var(--ap-r-md);font:inherit;font-size:15px;}
.hv-url:focus{outline:2px solid var(--ap-blue-focus);outline-offset:1px;}
.hv-help{margin:6px 0 12px;font-size:12.5px;line-height:1.5;color:var(--ap-ink-60);}
.hv-row{display:flex;gap:8px;flex-wrap:wrap;}
.hv-row .btn{min-height:44px;}
.hv-stop{margin-left:auto;}
@media (max-width:640px){ .hv-row .btn{flex:1 1 40%;} .hv-stop{margin-left:0;} }