/* ───────────────────────────────────────────────
   styles.css L2516-2517 — .page-hero__crumbs 전역 숨김(display:none) — block_hero의 display:flex를 이겨야 하는 전역 override
   ─────────────────────────────────────────────── */
/* Page-hero crumbs (FILM · CONTACT etc.) — globally hidden per design decision */
.page-hero__crumbs { display: none; }

/* ───────────────────────────────────────────────
   styles.css L3141-3146 — active page menu 강조 (site-nav 전역 override)
   ─────────────────────────────────────────────── */
/* Active page menu — accent color emphasis */
.site-nav a[aria-current="page"] {
  color: var(--orange-700, #E8642C) !important;
  font-weight: 700 !important;
}


/* ───────────────────────────────────────────────
   styles.css L3147-3150 — 전역 한글 줄바꿈 word-break override
   ─────────────────────────────────────────────── */
/* Global Korean text wrapping rules */
:root { word-break: keep-all; text-wrap: balance; }
html, body { word-break: keep-all; }


/* ───────────────────────────────────────────────
   styles.css L3168-3172 — 버튼 hover translate 비활성 전역 override
   ─────────────────────────────────────────────── */
/* Disable button hover translate + bolder ghost border */
.btn:hover, .btn:active, .btn:focus { transform: none !important; }
.btn--secondary { --btn-bd: var(--ink-400) !important; border-color: var(--ink-400) !important; }
.btn--secondary:hover { --btn-bd: var(--ink-900) !important; border-color: var(--ink-900) !important; }


/* ───────────────────────────────────────────────
   styles.css L3395-3396 — .film-hero,.section overflow visible 전역 override
   ─────────────────────────────────────────────── */
.film-hero, .section { overflow: visible !important; }


/* ── WP 마이그레이션 오버라이드 ─────────────────────────────────────────
   푸터 메뉴 폰트 통일: division 무관 Pretendard (기존 school 처리의 전역화).
   푸터 메뉴가 WP 메뉴(국문 라벨 포함)로 전환되며 EN 대문자/트래킹 해제. */
.site-footer__nav a,
body.school .site-footer__nav a {
  font-family: var(--font-body);
  letter-spacing: 0.06em;
  text-transform: none;
  font-weight: 650;
}

/* film 푸터 연락처 — 세로 배치 (메뉴는 항상 가로). school 사업자 정보는 가로 플로우 유지 */
body.film .site-footer__contact {
  flex-direction: column;
  gap: 4px;
}

/* 패밀리 카드 컴팩트화 — film/school 공통.
   flex-basis 300→240px, 패딩/타이포 비례 축소. */
.family-card {
  flex-basis: 240px;
  padding: 18px 20px;
}
.family-card__title { font-size: 13.5px; line-height: 1.5; }
.family-card__eyebrow { font-size: 10.5px; }
.family-card__brand-name { white-space: nowrap; font-size: 12px; }

/* 푸터 연락처 — 가로 플로우 공통 (라벨 strong + 값). school 사업자 정보 스타일의 일반화 */
.site-footer__contact {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px 24px;
  font-size: 12.5px;
  line-height: 1.7;
  max-width: 640px;
}
.site-footer__contact li { white-space: nowrap; }
.site-footer__contact strong { font-weight: 600; color: var(--ink-800); margin-right: 1px; }

/* ─── 비디오 모달 (sadari_button link_type=video) ─── */
html.sadari-vm-open { overflow: hidden; }
.sadari-video-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 9, 8, 0.82); /* 딤드 */
  padding: 24px;
}
.sadari-video-modal__dialog {
  position: relative;
  width: min(1080px, 96vw);
}
.sadari-video-modal__body video,
.sadari-video-modal__body iframe {
  display: block;
  width: 100%;
  background: #000;
}
.sadari-video-modal__body .plyr,
.sadari-video-modal__body > video {
  width: 100%;
  aspect-ratio: 16 / 9; /* Plyr ratio 옵션과 동일 — 폴백 포함 16:9 고정 */
  max-height: 82vh;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}
.sadari-video-modal__close {
  position: absolute;
  right: 0;
  top: -44px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/* ─── project 모달 (work_grid 타일) — 세로/가로 두 분기 ─── */
.sadari-work-modal__dialog {
  position: relative;
  display: flex;
  gap: 48px;
  align-items: center;
  max-width: 96vw;
}
.sadari-work-modal--vertical .sadari-work-modal__media { width: min(400px, 34vw); }
.sadari-work-modal--vertical .sadari-work-modal__info { width: min(620px, 46vw); }
.sadari-work-modal--horizontal .sadari-work-modal__media { width: min(860px, 54vw); }
.sadari-work-modal--horizontal .sadari-work-modal__info { width: min(480px, 34vw); }
.sadari-work-modal__media .plyr {
  border-radius: 14px;
  overflow: hidden;
  background: #000;
}
/* 비율 — Plyr 생성 전(.plyr__video-embed)부터 생성 후(내부 래퍼)까지 동일하게 고정.
   Plyr의 intrinsic padding(기본 16:9)을 무력화해 초기 플리커/이중 합산 원천 차단 */
.sadari-work-modal--vertical .sadari-work-modal__media .plyr,
.sadari-work-modal--vertical .sadari-work-modal__media .plyr__video-embed,
.sadari-work-modal--vertical .sadari-work-modal__media .plyr__video-wrapper {
  aspect-ratio: 9 / 16;
  padding-bottom: 0 !important;
  height: auto;
}
.sadari-work-modal--horizontal .sadari-work-modal__media .plyr,
.sadari-work-modal--horizontal .sadari-work-modal__media .plyr__video-embed,
.sadari-work-modal--horizontal .sadari-work-modal__media .plyr__video-wrapper {
  aspect-ratio: 16 / 9;
  padding-bottom: 0 !important;
  height: auto;
}
/* 로드 전·SDK 재생성 중 어떤 시점의 iframe이든 즉시 컨테이너 풀필 —
   YouTube SDK가 iframe을 교체하는 순간의 16:9 플래시 차단. 로드 대기 동안은
   9:16(또는 16:9) 검은 플레이어가 그대로 유지된다 */
.sadari-work-modal__media .plyr iframe,
.sadari-work-modal__media .plyr__video-embed iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.sadari-work-modal__media .plyr,
.sadari-work-modal__media .plyr__video-embed,
.sadari-work-modal__media .plyr__video-wrapper {
  position: relative;
}
/* 세로 모달: Plyr 포스터(YouTube 16:9 썸네일)가 세로 프레임 안에 작게 떠 보임 —
   숨기고 검은 프레임에서 바로 재생 시작 */
.sadari-work-modal--vertical .plyr__poster {
  display: none !important;
}
.sadari-work-modal--vertical .sadari-work-modal__media .plyr { max-height: 86vh; }
.sadari-work-modal .sadari-video-modal__close { top: -8px; right: -8px; z-index: 2; }
.sadari-work-modal__client {
  font-size: 14px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 14px;
}
.sadari-work-modal__title {
  font-family: var(--font-kr, inherit);
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
  margin: 0 0 28px;
  letter-spacing: -0.02em;
}
.sadari-work-modal__meta {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px 28px;
  border-radius: 14px;
  background: rgba(52, 47, 42, 0.94); /* 딤 위 한 톤 밝은 다크 솔리드 */
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 32px;
}
.sadari-work-modal__meta-row {
  display: flex;
  align-items: center;
  gap: 20px;
}
.sadari-work-modal__meta-label {
  flex: 0 0 84px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}
.sadari-work-modal__meta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sadari-work-modal__chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
}
/* CTA는 라벨 크기만큼 — btn 기본(inline-flex) 그대로 */
@media (max-width: 900px) {
  .sadari-work-modal__dialog { flex-direction: column; gap: 20px; overflow-y: auto; max-height: 94vh; }
  .sadari-work-modal--vertical .sadari-work-modal__media,
  .sadari-work-modal--horizontal .sadari-work-modal__media { width: min(420px, 90vw); }
  .sadari-work-modal--vertical .sadari-work-modal__info,
  .sadari-work-modal--horizontal .sadari-work-modal__info { width: min(560px, 90vw); }
}

/* ─── Plyr 포인트 컬러 — 디자인 시스템 오렌지 (재생 버튼/진행바/포커스) ─── */
.plyr {
  --plyr-color-main: var(--orange-700, #E8642C);
}