/* ============================================================
   2026 SMUCD 졸업전시 · Home
   Figma: Desktop 4985:3377 / Tablet 4955:4163 / Mobile 4926:3274
   Breakpoints:  기본=데스크탑(≥961) · ≤960=태블릿 · ≤390=모바일
   ============================================================ */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");

/* ---------- Design tokens (Figma Grayscale) ---------- */
:root {
  --g1: #fbfbfb;   /* Grayscale-1 */
  --g3: #dfdfdf;   /* Grayscale-3  (이미지 placeholder / 비활성 내비) */
  --g4: #c1c1c1;   /* Grayscale-4 */
  --g6: #8b8b8b;   /* Grayscale-6  (섹션 라벨) */
  --g10: #333333;  /* Grayscale-10 (본문) */
  --g11: #242424;  /* Grayscale-11 (브랜드/값) */
  --g12: #171717;  /* Grayscale-12 (활성/값) */
  --black: #000000;
  --white: #ffffff;
  --accent: #ef6d01; /* 3호선 배지 */
  --dark: #171717;   /* 푸터 배경 */
  --ph: #dfdfdf;     /* placeholder */

  --font: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", system-ui, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* ---------- 커스텀 커서 : #9DFC00 원 (DOM 요소, js/nav.js 에서 생성) ----------
   네이티브 커서는 숨기고(모든 요소) JS로 원을 마우스에 따라다니게 → 레티나에서도 선명 */
@media (hover: hover) and (pointer: fine) {
  *, *::before, *::after { cursor: none !important; }
}
.hp-cursor {
  position: fixed; top: 0; left: 0;
  width: 24px; height: 24px;
  margin: -12px 0 0 -12px;         /* 포인터 중심 정렬 */
  border-radius: 50%;
  background: #9DFC00;
  pointer-events: none;
  z-index: 2147483647;
  opacity: 0;
  transition: opacity 0.15s ease, width 0.12s ease, height 0.12s ease, margin 0.12s ease;
}
.hp-cursor.is-down { width: 18px; height: 18px; margin: -9px 0 0 -9px; }  /* 클릭 시 살짝 축소 */
body {
  margin: 0;
  font-family: var(--font);
  color: var(--g12);
  background: #fff;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;        /* 한글을 어절(띄어쓰기) 단위로만 줄바꿈 */
  overflow-wrap: break-word;   /* 단어가 너무 길어 넘칠 때만 예외적으로 자름 */
}
a { color: inherit; text-decoration: none; }
ul, dl { margin: 0; padding: 0; list-style: none; }
p, h1, h2, h3, figure, dd { margin: 0; }
button { font-family: inherit; cursor: pointer; background: none; border: 0; padding: 0; }

/* ---------- Breakpoint visibility utilities (단일 기준: 880px) ----------
   ≥880  = 데스크탑     → .hide-d 숨김
   <880  = 새 코드 구간 → .hide-m 숨김
   .hide-t 는 구 3단(태블릿) 잔재 — 단일 기준에선 어떤 화면에서도 숨기지 않음(무효).
   (마크업의 hide-* 조합: 데스크탑전용 .hide-t.hide-m / 소형전용 .hide-d.hide-t) */
@media (min-width: 880px) { .hide-d { display: none !important; } }
@media (max-width: 879.98px) { .hide-m { display: none !important; } }

/* placeholder 박스 */
.hp-ph { background: var(--ph); }

/* 모바일 메뉴 딤 오버레이 + 우측 패널 (JS로 생성, body 레벨) */
.hp-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0; visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
  z-index: 110;   /* 헤더(100) 위 → 메뉴 열리면 헤더도 딤 */
}
.hp-overlay.is-open { opacity: 1; visibility: visible; }
.hp-menu { display: none; }                     /* 기본 숨김(데스크탑) · <880 에서만 패널로 */
body.hp-menu-open { overflow: hidden; }         /* 메뉴 열림 중 배경 스크롤 잠금 */
@media (min-width: 880px) { .hp-overlay, .hp-menu { display: none; } }  /* 데스크탑 미사용 */

/* ============================================================
   ROOT
   ============================================================ */
.hp {
  max-width: 1440px;
  margin: 0 auto;
  background: #fff;
}

/* ============================================================
   HEADER  (Desktop)
   ============================================================ */
.hp-header {
  position: sticky;
  top: 0;
  z-index: 100;                      /* 콘텐츠·오버레이 위 (스크롤 시 비침 방지) */
  background: #fff;                  /* 불투명 흰색 */
  display: flex;
  flex-wrap: nowrap;                 /* 헤더는 절대 줄바꿈하지 않음 */
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 1.6vw, 24px);
  height: auto;
  padding: 20px clamp(24px, 5.5vw, 80px);   /* 상·하 20 */
}
/* 헤더 바로 아래 콘텐츠 : 헤더↔콘텐츠 추가 여백 15px (880 이상·이하 공통) */
.hp-header + div { padding-top: 15px; }
/* 데스크탑 홈: 네비게이션바 ↔ 포스터+제목 사이 여백 제거 */
@media (min-width: 880px) { .hp-header + .hp-body { padding-top: 0; } }
.hp-brand { display: flex; align-items: center; gap: clamp(12px, 2vw, 24px); flex: 0 0 auto; }
.hp-brand__text { white-space: nowrap; }   /* 각 줄이 음절 단위로 쪼개지지 않게 */
.hp-brand__logo {
  width: 64px;                     /* 글씨 16/18 비율만큼 로고도 축소(72→64) */
  height: 64px;
  background: url("../assets/images/SMUCD26.webp") center / contain no-repeat;
  flex: 0 0 auto;
}
.hp-brand__text {
  font-weight: 700;
  font-size: 16px;
  line-height: 20.8px;
  color: var(--g11);
}
.hp-nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;                 /* 항상 한 줄 유지 */
  /* 1440→76, 960→20 로 선형 축소해 4개 항목이 한 줄에 남게 */
  gap: clamp(20px, calc(20px + (100vw - 960px) * 0.1167), 76px);
  flex: 0 1 auto;
  min-width: 0;
  justify-content: flex-end;
}
.hp-nav a { flex: 0 0 auto; white-space: nowrap; }
.hp-nav a {
  font-weight: 800;
  font-size: clamp(22px, 1.95vw, 28px);   /* 좁아지면 네비 폰트도 축소 */
  line-height: 1.35;
  color: var(--g3);
  padding: 10px 0;
  transition: color 0.15s ease;
}
.hp-nav a:hover { color: #9dfc00; }
.hp-nav a.is-active { color: #7F49FF; }

.hp-hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 24px;
  padding: 7px 5px;
}
.hp-hamburger span {
  display: block;
  width: 14px;
  height: 2px;
  background: var(--g12);
}

/* ============================================================
   BODY  (Desktop: 좌 포스터 + 우 콘텐츠)
   ============================================================ */
.hp-body {
  display: flex;
  align-items: flex-start;
  gap: clamp(40px, 8.5%, 109px);   /* 109/1280 ≈ 8.5% — 좁아지면 자연 축소 */
  padding: 81px clamp(24px, 5.5vw, 80px);              /* 내비↔본문·본문↔푸터 간격 81 (Figma) */
}
/* 포스터·콘텐츠는 433:740 비율로 유동 (고정 px 제거) */
.hp-poster {
  flex: 433 1 0;
  min-width: 0;
  aspect-ratio: 433 / 646;
  overflow: hidden;
  position: sticky;            /* 스크롤 시 포스터가 따라오게 */
  top: 104px;                  /* 고정 헤더 높이에 딱 맞춤 → 네비↔포스터 여백 0 */
  align-self: flex-start;      /* 세로로 늘어나지 않게(스티키 동작 조건) */
}
.hp-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hp-content {
  flex: 739 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 120px;                     /* 섹션 간격 (Figma) */
}

/* 콘텐츠 순서 (figure 재배치용) */
.hp-block--about   { order: 10; }
.hp-schedule       { order: 20; }
.hp-place          { order: 30; }
.hp-figure--place  { order: 40; }
.hp-advisors-row   { order: 50; }
.hp-figure--committee { order: 65; }   /* 데스크탑: 졸준위 사진을 위원회 블록 위로 */
.hp-committee-row  { order: 70; }
.hp-sponsors-row   { order: 80; }
.hp-insta-row      { order: 90; }

/* ---------- ABOUT / HERO ---------- */
.hp-about { display: flex; flex-direction: column; gap: 30px; }
.hp-hero { display: flex; flex-direction: column; gap: 30px; }
.hp-hero__title {
  font-weight: 800;               /* D-D3 ExtraBold */
  font-size: 38px;
  line-height: 57px;
  color: var(--black);
}
.hp-hero__title span { display: block; }
.hp-hero__sub {
  font-weight: 500;
  font-size: 24px;
  line-height: 34px;
  color: var(--g11);
}
.hp-desc {
  font-weight: 700;               /* D-S2 Bold 20/32 */
  font-size: 20px;
  line-height: 32px;
  color: var(--g10);
}

/* ---------- 공통 정보 행 (Desktop: 라벨 305 | 값) ---------- */
.hp-row {
  display: grid;
  /* 라벨 오프셋 325px 를 유동으로: 넓으면 325, 좁으면 축소(최소 90) */
  grid-template-columns: clamp(90px, 44%, 325px) minmax(0, 1fr);
  align-items: start;
}
.hp-label {
  font-weight: 700;
  font-size: 24px;
  line-height: 34px;
  color: var(--g6);
}
.hp-label--advisor { font-weight: 800; font-size: 22px; line-height: 32px; }
/* 날짜 사이 가로선 글자(⏤) : stroke 로 두껍게 */
.hp-dash { -webkit-text-stroke: 0.8px currentColor; }
.hp-value {
  font-weight: 700;
  font-size: 24px;
  line-height: 34px;
  color: var(--g12);
}

/* 전시 장소 */
.hp-place .hp-row__body { display: flex; flex-direction: column; }
.hp-venue {
  font-weight: 700; font-size: 24px; line-height: 34px; color: var(--g12);
}
.hp-venue .en { color: var(--g6); }
.hp-addr {
  font-weight: 700; font-size: 24px; line-height: 34px; color: var(--g12);
  margin-top: 0;
}
/* 주소 그룹: 그룹 내부는 안 쪼개지고(nowrap) 그룹 사이(공백)에서만 줄바꿈 */
.hp-nb { white-space: nowrap; }
.hp-subway {
  display: flex; align-items:flex-start; gap: 8px;
  font-weight: 700; font-size: 24px; line-height: 34px; color: var(--g12);
  margin-top: 16px;
}
.hp-subway__badge {
  flex: 0 0 auto;
  margin-top: 3px;   /* 첫 줄(line-height 34) 세로 중앙에 배지(28) 고정: (34-28)/2 */
  width: 28px; height: 28px; border-radius: 0;   /* 정사각 (각짐) */
  background: var(--accent); color: #fff;
  font-weight: 700; font-size: 22px;
  line-height: 1;
  display: grid; place-items: center;
  padding-bottom: 1px;   /* '3' 글자 광학 중앙 보정(위로 살짝) */
}

/* 오프닝 시간 (모바일 전용 구조) */
.hp-opening { display: flex; gap: 40px; margin-top: 34px; }
.hp-opening__k { font-weight: 700; }
.hp-opening__v { font-weight: 500; }

/* ---------- 전시 이미지 (figure) ---------- */
.hp-figure { width: 100%; aspect-ratio: 739 / 448; overflow: hidden; }
.hp-figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 전시장소↔약도, 졸준위 이미지↔명단 은 40px (섹션 gap 120 - 80) */
.hp-figure--place { margin-top: -80px; }
.hp-committee-row { margin-top: -80px; }   /* 데스크탑: 사진↔위원회 블록 40px */
/* 태블릿·모바일: 명단 안쪽 사진(부제목↔명단 사이) */
.hp-figure--committee-inline { order: 0; width: 100%; }   /* 공유 order:65 상속 방지 → DOM 순서(부제목·사진·명단) 유지 */

/* ---------- 지도 교수 ---------- */
.hp-advisors { display: flex; flex-direction: column; gap: 40px; }
/* 스튜디오명 | 교수명 : 스튜디오 좌 · 교수명 우측 정렬(값 폭 오른끝), 좁으면 래핑 */
.hp-advisor {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
  align-items: baseline;
}
.hp-advisor__studio {
  font-weight: 700; font-size: 24px; line-height: 34px; color: var(--g12);
}
.hp-advisor__names { display: flex; flex-direction: column; gap: 16px; }
.hp-advisor__names li {
  font-weight: 500; font-size: 24px; line-height: 34px; color: var(--g10);
}

/* ---------- 졸업위원회 ---------- */
.hp-committee {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 50px;
  row-gap: 20px;             /* 팀(직책)과 팀 사이 여백 — 팀 안 이름 간격(8)보다 크게 → 팀별 구분 */
}
.hp-com { display: contents; }
.hp-com dt {
  font-weight: 700; font-size: 24px; line-height: 34px; color: var(--g12);
  white-space: nowrap;
}
/* 이름은 이름 단위로만 줄바꿈 (좁아지면 이름 통째로 다음 줄로) · 같은 팀 이름 사이 8px */
.hp-com dd {
  display: flex;
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 8px;
}
.hp-com dd span {
  font-weight: 500; font-size: 24px; line-height: 34px; color: var(--g10);
  white-space: nowrap;   /* 이름 안에서 글자가 세로로 쪼개지지 않게 */
}

/* ---------- 후원·협력 (로고 세로 1열, 좌측정렬) ---------- */
.hp-sponsors {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;                 /* Figma: 로고 간 약 40 */
  width: 100%;
  max-width: 413px;
}
/* 각 로고는 Figma 원본 폭 · 높이는 비율 유지 · 좁아지면 축소 */
.hp-logo { display: block; height: auto; max-width: 100%; width: var(--w); }
.hp-logo--maru    { --w: 178px; }
.hp-logo--sandoll { --w: 183px; }
.hp-logo--yoon    { --w: 176px; }
.hp-logo--vine    { --w: 108px; }
.hp-logo--typo    { --w: 333px; }
.hp-logo--akira   { --w: 185px; }
.hp-logo--stay    { --w: 151px; }

/* ---------- 인스타그램 ---------- */
.hp-insta { font-weight: 700; font-size: 24px; line-height: 34px; color: var(--g11); }

/* ============================================================
   FOOTER  (Desktop)
   ============================================================ */
/* 배경은 풀와이드(뷰포트 전체) */
.hp-footer { background: var(--dark); color: var(--g1); width: 100%; }
/* 내용은 다른 섹션과 동일한 컨테이너 폭·좌우 여백으로 정렬 */
.hp-footer__inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  min-height: 260px;
  padding: 32px clamp(24px, 5.5vw, 80px);
}
.hp-footer__brand {
  font-weight: 700; font-size: 20px; line-height: 32px; color: var(--g1);
  flex: 0 1 346px; min-width: 0;
}
.hp-footer__info { display: flex; flex-direction: column; gap: 17px; flex: 0 1 414px; min-width: 0; }
.hp-footer__row { display: flex; justify-content: space-between; gap: 24px; }
.hp-footer__row dt {
  font-weight: 700; font-size: 16px; line-height: 22px; color: var(--g1);
  flex: 0 0 auto;
}
.hp-footer__row dd {
  font-weight: 500; font-size: 16px; line-height: 22px; color: var(--g1);
  text-align: right;
}
.hp-footer__prev {
  font-weight: 700; font-size: 14px; line-height: 20px; color: var(--g4);
}

/* ============================================================
   ▍ < 880px  · Figma 5397:4115 (880 - Home)
   단일 컬럼 · 컴팩트 헤더 · 유동(clamp/flex-wrap)로 폰~880 대응
   ============================================================ */
@media (max-width: 879.98px) {
  /* ---------- HEADER : 컴팩트(로고36·브랜드10·햄버거) ----------
     sticky 고정 · 상하 여백 10 · z-100(스크롤 시 콘텐츠 위). 메뉴 열리면 오버레이(110)에 덮여 딤됨 */
  .hp-header { padding: 10px 20px; position: sticky; top: 0; z-index: 100; }
  .hp-brand { gap: 10px; }
  .hp-brand__logo { width: 36px; height: 36px; }
  .hp-brand__text { font-weight: 800; font-size: 10px; line-height: 1.35; }

  /* 인헤더 데스크탑 내비는 모바일에서 숨김 (메뉴는 아래 body 레벨 .hp-menu 가 담당) */
  .hp-nav { display: none; }

  /* 우측 슬라이드 메뉴 패널 (헤더 밖 body 레벨 → 헤더가 딤돼도 패널만 흰색 유지) */
  .hp-menu {
    display: flex; position: fixed; top: 0; right: 0; bottom: 0;
    width: min(80vw, 300px);
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    gap: 14px; padding: 96px 28px 40px;
    background: #fff;
    transform: translateX(100%); transition: transform 0.28s ease;
    z-index: 120; overflow-y: auto;   /* 오버레이(110) 위 → 밝게 */
  }
  .hp-menu.is-open { transform: translateX(0); }
  /* 메뉴 폰트 24px · black(900) · 활성=진함(g12) 나머지=#dfdfdf(g3) */
  .hp-menu a {
    font-weight: 900; font-size: 24px; line-height: 1.3; letter-spacing: -0.02em;
    padding: 10px 0; color: var(--g3); white-space: nowrap; text-decoration: none;
  }
  .hp-menu a.is-active { color: #7F49FF; }

  /* ---------- BODY : 단일 컬럼 ---------- */
  .hp-body { flex-direction: column; align-items: stretch; gap: 60px; padding: 60px 20px; }
  .hp-poster { flex: none; width: 100%; aspect-ratio: 840 / 1194; position: static; top: auto; }  /* 세로 flex: basis:0 높이 0 방지 · 모바일은 sticky 해제 */
  .hp-content { width: 100%; gap: 60px; }

  /* 데스크탑 음수마진·2단 잔재 리셋 */
  .hp-figure--place { margin-top: -40px; order: 40; }  /* 전시장소↔약도: content gap 60 - 40 = 20 */
  .hp-committee-row { margin-top: 0; }
  .hp-figure { aspect-ratio: 840 / 519; }

  /* 섹션 라벨(소개/오프라인 전시/지도교수/…) : #8b8b8b 20px */
  .hp-label, .hp-about__label { font-weight: 700; font-size: 20px; line-height: 1.4; color: var(--g6); }

  /* ---------- ABOUT ---------- */
  .hp-about { gap: 10px; }
  .hp-hero { gap: 30px; }
  .hp-hero__title { font-weight: 700; font-size: 24px; line-height: 1.33; color: var(--black); }
  .hp-desc { font-weight: 500; font-size: 16px; line-height: 1.5; color: var(--g10); }

  /* ---------- 정보 행 : 라벨 위 + 본문(단일 컬럼) ---------- */
  .hp-row { display: flex; flex-direction: column; gap: 35px; }
  .hp-value { font-weight: 700; font-size: 20px; line-height: 1.4; color: var(--g12); }

  /* 오프라인 : 날짜 + 오프닝/시간 */
  .hp-date--m .hp-value { font-weight: 700; font-size: 20px; line-height: 1.4; color: var(--g12); }
  .hp-opening { gap: clamp(24px, 12vw, 130px); margin-top: 34px; font-size: 18px; line-height: 1.44; }
  .hp-opening__k { font-weight: 700; color: var(--g10); }
  .hp-opening__v { font-weight: 500; color: var(--g10); }

  /* 전시장소 : 값 18px */
  .hp-place .hp-row__body { gap: 0; }
  .hp-venue { font-weight: 700; font-size: 20px; line-height: 1.4; color: var(--g12); }
  .hp-venue .en { color: #a5a5a5; }
  .hp-addr { font-weight: 500; font-size: 18px; line-height: 1.44; color: var(--g10); margin-top: 10px; }
  .hp-subway { font-weight: 500; font-size: 18px; line-height: 1.44; color: var(--g10); margin-top: 25px; }
  .hp-subway__badge { width: 28px; height: 28px; font-size: 22px; margin-top: -1px; }  /* 정사각 · 첫 줄(line-height 18×1.44≈25.9) 중앙에 배지(28) 고정 */

  /* ---------- 지도교수 : 스튜디오 2개(각 [스튜디오명 | 명단]) ---------- */
  .hp-advisors { display: flex; flex-direction: row; flex-wrap: wrap; gap: 35px clamp(40px, 9vw, 100px); }
  .hp-advisor {
    flex: 0 1 auto; display: flex; flex-direction: row; align-items: flex-start;
    flex-wrap: nowrap; gap: clamp(24px, 6vw, 78px);
  }
  .hp-advisor__studio { font-weight: 700; font-size: 18px; line-height: 1.44; color: var(--g12); }
  .hp-advisor__names { gap: 10px; min-width: 0; }
  .hp-advisor__names li { font-weight: 500; font-size: 18px; line-height: 1.44; color: var(--g10); }

  /* ---------- 졸업전시위원회 : 라벨 → 이미지 → (역할 | 명단) · 팀 간 13 / 팀 안 8 ---------- */
  .hp-committee { grid-template-columns: max-content minmax(0, 1fr); column-gap: clamp(30px, 14vw, 149px); row-gap: 13px; }
  .hp-com dt { font-weight: 700; font-size: 18px; line-height: 1.44; }
  .hp-com dd { display: flex; flex-wrap: wrap; gap: 8px; grid-template-columns: none; }
  .hp-com dd span { font-weight: 500; font-size: 18px; line-height: 1.44; color: var(--g10); }

  /* ---------- 협찬업체 : 로고 세로 스택(좌측정렬) ---------- */
  .hp-sponsors { gap: 20px; max-width: 100%; }
  .hp-logo { width: calc(var(--w) * 0.765); }   /* 모바일: 로고 축소(15% → 추가 10% = 0.85×0.9) */

  /* ---------- FOOTER : 2열 그리드 ---------- */
  .hp-footer { height: auto; }
  .hp-footer__inner {
    display: grid; grid-template-columns: 1fr 1fr; gap: 40px clamp(24px, 9vw, 86px);
    padding: 40px 20px; min-height: 0;
  }
  .hp-footer__brand { grid-column: 1; grid-row: 1; flex: none; font-size: 16px; line-height: 1.5; }
  .hp-footer__info { grid-column: 2; grid-row: 1; flex: none; gap: 15px; }
  .hp-footer__row { justify-content: flex-start; gap: 12px; min-width: 0; }
  .hp-footer__row dt { font-weight: 700; font-size: 14px; line-height: 1.43; color: var(--g3); flex: 0 0 auto; }
  .hp-footer__row dd { font-weight: 500; font-size: 14px; line-height: 1.43; color: var(--g1); text-align: left; min-width: 0; overflow-wrap: anywhere; }
  .hp-footer__row dd a { overflow-wrap: anywhere; word-break: break-word; }
  .hp-footer__prev { grid-column: 2; grid-row: 2; display: block; }
}

/* ================= INTRO 영상 (첫 진입 시 풀스크린) ================= */
.intro {
  position: fixed; inset: 0;
  z-index: 2147483646;               /* 커스텀 커서 바로 아래, 모든 콘텐츠 위 */
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 1;
  transition: opacity 0.8s ease;
}
.intro__video { width: 100%; height: 100%; object-fit: contain; display: block; }   /* 포스터 전체 표시, 남는 여백은 배경색 */
@media (min-width: 880px) {
  .intro__video { width: 904px; height: 676px; flex: 0 0 auto; }   /* 데스크탑: 고정 크기, 중앙 정렬 · 나머지 배경색 */
}
.intro.is-hide { opacity: 0; pointer-events: none; }
html.intro-lock, html.intro-lock body { overflow: hidden; }   /* 재생 중 스크롤 잠금 */
html.intro-lock { scrollbar-gutter: stable; }                 /* 잠금 중에도 스크롤바 자리 유지 → 해제 시 페이지가 옆으로 밀리지 않게 */
html.intro-seen .intro { display: none; }                     /* 같은 세션 재방문 시 생략 */

/* 졸준위 사진: 원본(JJW.webp 3955×2495) 비율 그대로 — 잘림 없음 (모든 화면 공통) */
.hp-figure.hp-figure--committee { aspect-ratio: 3955 / 2495; }