/* ============================================================
   제이디스칼프 아카데미 홍보 영상 + 01 섹션 원장 카드
   - 메인 상단 오른쪽: 영상(무음 반복) → 클릭하면 확대 + 소리
   - 01 섹션: 왼쪽 제목·설명 / 오른쪽 원장 카드
   ▼ 크기·색은 아래 값만 바꾸면 됩니다
   ============================================================ */
:root{
  --promo-max-width:660px;          /* 메인 영상 최대 너비 */
  --promo-radius:18px;              /* 영상 모서리 둥글기 */
  --promo-panel-bg:transparent;     /* 영상 뒤 배경색 (투명 = 메인 첫 화면 배경과 이어짐, 진한 판을 원하면 #111d1b) */
  --promo-glow:transparent;         /* 영상 뒤 빛 번짐 (원하면 rgba(25,211,176,.16)) */
  --promo-accent:#19d3b0;           /* 재생 아이콘 · 버튼 호버 색 */
  --promo-label:#7fd9c7;            /* "JD SCALP ACADEMY" 글자색 */
  --promo-sub:#b2beb8;              /* 영상 아래 설명 글자색 */
  --promo-zoom-width:92vw;          /* 확대 영상 최대 너비 */
  --portrait-radius:20px;           /* 01 섹션 원장 카드 모서리 */
}

/* ── 메인 상단 오른쪽: 영상 ── */
.hero-media{position:relative;display:flex;align-items:center;justify-content:center;min-height:580px;padding:56px 7%;box-sizing:border-box;background:radial-gradient(circle at 70% 30%,var(--promo-glow),transparent 55%),var(--promo-panel-bg)}
.promo-wrap{width:100%;max-width:var(--promo-max-width)}
.promo-frame{display:block;position:relative;width:100%;aspect-ratio:16/9;padding:0;border:1px solid rgba(255,255,255,.16);border-radius:var(--promo-radius);overflow:hidden;cursor:pointer;background:#eef4f1;box-shadow:0 30px 70px rgba(0,0,0,.45);transition:transform .25s ease,box-shadow .25s ease}
.promo-frame:hover{transform:translateY(-3px);box-shadow:0 36px 80px rgba(0,0,0,.55)}
.promo-frame:focus-visible{outline:3px solid var(--promo-accent);outline-offset:4px}
.promo-frame video{display:block;width:100%;height:100%;object-fit:cover}
.promo-hint{position:absolute;right:16px;bottom:16px;display:flex;align-items:center;gap:9px;padding:8px 16px 8px 9px;border-radius:999px;background:rgba(25,39,37,.8);color:#fff;font-size:13px;font-weight:600;line-height:1;backdrop-filter:blur(6px);transition:transform .2s ease}
.promo-hint i{position:relative;width:24px;height:24px;border-radius:50%;background:var(--promo-accent);flex:none}
.promo-hint i:after{content:"";position:absolute;left:9px;top:6px;border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent}
.promo-frame:hover .promo-hint{transform:translateY(-2px)}
.promo-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px}
.promo-foot span{font-size:13px;line-height:1.5;color:var(--promo-sub)}
.promo-foot b{display:block;font-family:Arial,sans-serif;font-size:11px;font-weight:600;letter-spacing:2px;color:var(--promo-label)}
.promo-link{flex:none;padding:11px 22px;border:1px solid rgba(255,255,255,.45);border-radius:999px;color:#fff;font-size:14px;font-weight:600;text-decoration:none;transition:background .2s,border-color .2s,color .2s}
.promo-link:hover{background:var(--promo-accent);border-color:var(--promo-accent);color:#0b1f1a}

/* ── 01 섹션: 왼쪽 큰 글씨 + 설명, 오른쪽 원장 카드 ── */
.about-text{margin-top:28px}
.about-portrait{align-self:start}
.about-portrait img{display:block;width:100%;height:auto;border-radius:var(--portrait-radius);background:#080808;box-shadow:0 24px 60px rgba(25,39,37,.18)}

/* ── 클릭하면 확대 ── */
.promo-dialog{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(8,16,15,.88);overflow:hidden}
.promo-dialog[open]{display:flex;align-items:center;justify-content:center}
.promo-dialog::backdrop{background:transparent}
#promo-big{width:min(var(--promo-zoom-width),calc(86vh * 16 / 9));aspect-ratio:16/9;border-radius:var(--promo-radius);background:#000;transform-origin:0 0;box-shadow:0 40px 90px rgba(0,0,0,.45)}
.promo-close{position:absolute;top:18px;right:22px;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:30px;line-height:48px;cursor:pointer}
.promo-close:hover{background:rgba(255,255,255,.26)}

/* ── 반응형 ── */
@media(max-width:900px){.hero-media{padding:40px 6%}.promo-foot{flex-direction:column;align-items:flex-start}}
@media(max-width:640px){.hero-media{min-height:0;padding:8px 7% 48px;background:var(--promo-panel-bg)}.promo-frame{border-radius:12px}.promo-hint{right:10px;bottom:10px;font-size:11px;padding:6px 12px 6px 7px}.promo-hint i{width:20px;height:20px}.promo-hint i:after{left:8px;top:5px;border-left-width:7px;border-top-width:5px;border-bottom-width:5px}#promo-big{width:96vw;border-radius:12px}.about-portrait{max-width:420px}}