*{margin:0;padding:0;box-sizing:border-box}

  html,body{height:100%; min-height:100dvh}

  body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans KR',sans-serif;background:#0d0f14;color:#fff;overflow-x:hidden}

  .section{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:2rem}

  /* ====== L1만 상하 여백 축소(타이틀처럼 붙여 보이게) ====== */
  #l1.section{
    padding: clamp(8px, 1.8vh, 20px) 0 clamp(10px, 2vh, 20px);
  }

  /* ====== L2~L4 섹션 상단 패딩 최소화 (타이틀과 바로 맞닿게) ====== */
  #l2.section, #l3.section, #l4.section{ padding-top: 0; }

  .wrap{width:92%;max-width:1400px}

  /* L1만 풀블리드: wrap 패딩/최대폭 제거 */
  #l1 .wrap{
    width:100% !important;
    max-width:none !important;
    padding:0 !important;
  }

  .embed-box{position:relative;width:100%;height:0;border-radius:20px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.35);background:#000}
  
  /* L1 제외: L2, L3, L4만 16:9 비율 적용 */
  #l2 .embed-box, #l3 .embed-box, #l4 .embed-box {
    height:0; padding-top:56.25%; aspect-ratio:16/9; min-height:420px;
  }
  
  /* ====== PC 전용: L1 비디오 프레임(16:9 박스) – 임팩트 강화 ====== */
  html:not(.inapp) #l1 .embed-box {
    position: relative;
    width: min(95vw, 1680px);      /* L1만 살짝 더 넓게 (1480→1600) */
    aspect-ratio: 16 / 9;          /* 프레임 그릇 고정 */
    height: auto;                  /* aspect-ratio와 함께 자동 높이 */
    max-height: min(calc(100vh - 96px), 900px);  /* 뷰포트 기반 상한 */
    margin: clamp(4px, 1vh, 12px) auto clamp(8px, 1.6vh, 16px);           /* 중앙 정렬 + 아래 살짝 여백 */
    border-radius: 16px;           /* 가장자리 미세 라운드 */
    overflow: hidden;              /* 비디오가 박스 밖으로 삐져나오지 않게 */
    box-shadow: 0 12px 40px rgba(0,0,0,.35);
    background: #000;
  }
  html:not(.inapp) #l1 .embed-box > video,
  html:not(.inapp) #l1 .embed-box > iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;             /* 임팩트 강화: 박스 안에서 꽉 차게 */
  }

  /* ====== 인앱: L1 풀스크린 유지 ====== */
  html.inapp #l1 .embed-box {
    min-height: 100dvh;
    padding-top: 0 !important;
    position: relative !important;
    width: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #000 !important;
    aspect-ratio: unset !important;
  }

  .embed-box iframe{position:absolute;inset:0;border:0;width:100%;height:100%;z-index:3}
  #l1 .hero-bg{            /* 비디오는 화면에 깔고 */
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover; z-index:0;
  }

  /* 3) 전체 클릭 기본 이동(=L2)용 투명 버튼(오버레이 아래, iframe 위) */
  .l1rb-overlay {
    position:absolute; inset:0;
    background:transparent; border:0;
    z-index:2;             /* .ovr가 z-index:4 이므로, %오버레이가 우선 */
    cursor:pointer;
  }

  /* 4) 하단 네비 핀(작게) — %오버레이와 겹치지 않게 영역 최소화 */
  .l1rb-pills{
    position:absolute; left:50%; bottom:5vh; transform:translateX(-50%);
    display:flex; gap:10px; z-index:5;
  }
  .l1rb-pills .pill{
    padding:10px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.45);
    background:rgba(0,0,0,.35); color:#fff; font-size:13px; backdrop-filter:blur(6px);
    cursor:pointer; transition:transform .15s ease, background .15s ease, border-color .15s ease;
  }
  .l1rb-pills .pill:hover{ transform:translateY(-1px); background:rgba(0,0,0,.5); border-color:rgba(255,255,255,.6); }

  @media (max-width:768px){
    .l1rb-pills .pill{ font-size:12px; padding:8px 12px; }
  }

  /* [PC-ONLY] 인앱용 클릭 오버레이/네비 핀 숨김 (클릭 가로채기 차단) */
  html[data-mode="pc"] .l1rb-overlay,
  html[data-mode="pc"] .l1rb-pills {
    display: none !important;
  }

  /* [GGOOV45-STEP1] L1 전용 히어로 비디오 */
  .hero-bg {
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    z-index:0;           /* 오버레이/iframe 뒤 맨뒤 배경 */
    filter:none;
    opacity:0;
    transition:opacity .35s ease;
  }
  .hero-bg.ready { opacity:1; }
  /* [REMOVED-PATCH7] 세로가 긴 기기 L1 contain 강제 규칙 제거 */
  /* ❌ 삭제 이유: L1은 "항상 임팩트 있게 cover"가 요구사항 (Line 377) */
  /* ❌ html.ratio-tall #l1 .hero-bg { object-fit: contain; } → 덮어쓰기 방지 */

  /* [REMOVED] L2~L4 인앱 비디오 스타일 - mountInappVideoLanding으로 통합됨 */
  /* [REMOVED] L1 Canva iframe CSS - iframe 자체가 HTML에서 제거됨 */

  .overlay-shield, .shield, .shield.block { pointer-events: none; }

  .title, #t1, #t2, #t3, #t4 { display: none; }

  .mask-top { display: none !important; }

  /* 오버레이 공통 - Transform Scale 스테이지 시스템 */
  /* .ovr = 스테이지 호스트 (1920x1080 기준, transform scale로 레터박스/커버 맞춤) */
  /* L1: cover (화면 가득), L2~L4: contain (16:9 박스) */
  .ovr { position:absolute; inset:0; z-index:4; pointer-events:none; }
  .ovr .el { position:absolute; pointer-events:auto; }
  .ovr .el.media img, .ovr .el.media video { width:100%; height:100%; object-fit:cover; display:block; }
  .ovr .el.text { background:rgba(255,255,255,.92); padding:8px 10px; border-radius:6px; color:#111; }
  /* [REMOVED] 투명프레임 파란색 표시 제거 - Frontend에서는 완전 투명 */
  /* Admin에서만 파란색, Frontend에서는 보이지 않음 */

  .ovr a:focus-visible{outline:2px solid #7aa2ff;outline-offset:2px;}

  #l1{background:linear-gradient(135deg,#202642,#111827)}

  #l2,#l4{background:#0b1220} #l3{background:#0a0f1a}

  /* [INAPP-VIDEO] 인앱 전용 스타일 */
  html.inapp body { background:#0b1220; }
  
  /* ====== 인앱: 섹션 간 여백 통일, 세로 확대 교정 ====== */
  #inapp-video-landing {
    position: relative;
    min-height: 120dvh;        /* 스크롤 여유 확보 */
    z-index: 1;
    overflow-x: hidden;
    overflow-y: auto;          /* 스크롤 허용 */
    -webkit-overflow-scrolling: touch;
    padding-bottom: 92px;      /* 하단 고정 바 공간 */
  }
  /* 포스터 이미지 (비디오 로딩 전까지 표시, 비디오보다 위) */
  #inapp-video-landing .video-poster {
    position: fixed; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;                /* 비디오보다 위 */
    opacity: 1;
    transition: opacity .6s ease;
    background: #000;
  }
  #inapp-video-landing .video-poster.faded { opacity: 0; pointer-events: none; }
  
  #inapp-video-landing .bgvideo {
    position: fixed; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;       /* 세로(포트레이트)에서 확대 과다 방지 */
    object-position: center;
    z-index: -1;
    opacity: 1;
    background: #000;
  }

  /* 가로가 좁거나 세로가 매우 긴 기기에서 과도 크롭 방지 */
  html.inapp.ratio-tall #inapp-video-landing .bgvideo,
  html.inapp.ratio-narrow #inapp-video-landing .bgvideo,
  html.inapp.ratio-tall #inapp-video-landing .video-poster,
  html.inapp.ratio-narrow #inapp-video-landing .video-poster {
    object-fit: contain;
    background: #000;
  }

  /* 인앱 세로/가로 확대 문제: 세로=contain, 가로=cover */
  @media (orientation: portrait) {
    html.inapp #inapp-video-landing .bgvideo,
    html.inapp #inapp-video-landing .video-poster {
      object-fit: contain;
      background: #000;
    }
  }
  @media (orientation: landscape) {
    html.inapp #inapp-video-landing .bgvideo,
    html.inapp #inapp-video-landing .video-poster {
      object-fit: cover;
    }
  }

  /* 인앱: L1~L4 타일 간 여백 통일화 */
  html.inapp .section{ margin-block: 12px; }  /* 섹션 간 12px 여백 */
  html.inapp .inapp-sep{
    /* [CONSOLIDATED-PATCH8] Line 587-595 중복 제거 후 통합 */
    margin-block: 10px;
    display: flex; align-items: center; justify-content: center;
    height: 28px; padding: 6px 16px;
    color: #94a3b8; font-size: 14px; font-weight: 500;
    text-shadow: 0 1px 2px rgba(0,0,0,.8), 0 -1px 1px rgba(255,255,255,.05);
    background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.05) 100%);
    border-top: 1px solid rgba(0,0,0,.3);
    border-bottom: 1px solid rgba(255,255,255,.05);
  }
  html.inapp .inapp-sep .hook {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 92vw;
    letter-spacing: 0.3px;
  }
  
  /* 인앱: 기존 UI는 "렌더 자체" 차단 (초페인트 겹침 방지) */
  html.inapp .section,
  html.inapp .ovr,
  html.inapp .canva-frame,
  html.inapp #admin-panel,
  html.inapp [data-admin],
  html.inapp .inapp-guide,
  html.inapp .fallback-card,
  html.inapp .l1rb-overlay,      /* L1 전면 버튼 */
  html.inapp .l1rb-pills,        /* L1 하단 도크 */
  html.inapp .swiper-pagination, /* 캐러셀 도트 (Canva/Swiper류) */
  html.inapp .slick-dots,
  html.inapp [class*="pagination"] { display: none !important; visibility: hidden !important; }
  
  /* 투명/링크 프레임은 프런트에서 절대 보이지 않게 */
  .ovr .el.transparent,
  .ovr .el.link {
    opacity: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  
  /* 대체 섹션(히어로 + 카드 영역) */
  .inapp-hero {
    padding: max(16px, env(safe-area-inset-top)) 16px 16px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.7);
  }
  .inapp-grid {
    display: grid; gap: 12px; padding: 16px;
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .inapp-card-section {
    padding: 0 16px;
  }
  .inapp-card {
    display: block; border-radius: 14px; backdrop-filter: blur(4px);
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
    padding: 14px; color: #fff; text-decoration: none;
  }
  .inapp-card-full {
    width: 100%;
  }
  .inapp-card h3 { margin: 6px 0 4px; font-size: 16px; }
  .inapp-card p { margin: 0; opacity: .85; font-size: 13px; }
  .inapp-card:active { transform: scale(.98); }

  /* [REMOVED-PATCH8] 인앱 구분선 중복 제거 */
  /* ❌ 삭제 이유: Line 531-545 html.inapp .inapp-sep 규칙과 중복 */
  /* ✅ 모든 스타일은 Line 531-545로 통합됨 (더 구체적인 셀렉터) */

  /* 하단 고정 버튼바(빠른 진입) */
  .inapp-dock {
    position: fixed; left: 0; right: 0; bottom: 0;
    padding: 10px max(12px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: repeat(4,1fr); gap: 10px;
    background: linear-gradient(180deg, rgba(5,8,16,0) 0%, rgba(5,8,16,.85) 40%, rgba(5,8,16,.95) 100%);
    z-index: 2;
  }
  .inapp-dock a {
    display: inline-block; text-align: center; padding: 10px 6px;
    border-radius: 12px; background: rgba(255,255,255,.1); color:#fff; text-decoration: none; font-size: 13px;
    border: 1px solid rgba(255,255,255,.2);
  }
  
  /* 관리자가 쓰는 오버레이/패널과 충돌 없도록, 인앱에선 해당 DOM 자체를 만들지 않음(위 JS에서 제거) */

  /* [MOBILE-UX] 모바일 반응형 (카드 그리드 등) */
  @media (max-width: 640px){
    .section{padding:1rem}
    .wrap{width:96%}
    .embed-box{border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
    .card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
    .card{border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.18)}
    /* [REMOVED] fallback-wrap 모바일 스타일 - 동영상으로 대체되므로 불필요 */
  }

  /* [수정] 모바일 세로 화면 대응 - iframe 숨기지 않고 회전 안내만 표시 */
  /* 기존 숨김 로직 비활성화 - Canva는 계속 보이고 오버레이만 표시 */
  /*
  @media (max-aspect-ratio: 1/1) {
    .embed-box iframe { display: none; }
    .embed-box .hero-bg { display: block; opacity: 1; }
    .mobile-alt { display: block; }
  }
  */

  /* [정리] 기존 rotate-hint 제거 - rotateOverlay로 통합 */

  /* [추가] 회전 안내 오버레이 (세로 화면에서 상단 힌트) */
  #rotateHint {
    position: fixed; inset: 0; display: none; z-index: 9999;
    background: rgba(0,0,0,.35); backdrop-filter: blur(1.5px);
  }
  #rotateHint .box{
    position:absolute; left:50%; top:14px; transform:translateX(-50%);
    background:#111; color:#fff; border-radius:12px; padding:10px 14px; 
    font-size:14px; box-shadow:0 6px 18px rgba(0,0,0,.2);
  }
  @media (orientation: portrait) and (max-width: 900px){
    #rotateHint{ display:block; }
  }

  /* [패치1] 인앱 브라우저 안내 배너 */
  .inapp-banner{
    display:none; position:fixed; left:12px; right:12px; bottom:12px; z-index:9999;
    background:#0f172a; color:#fff; border:1px solid #374151; border-radius:12px; padding:12px 14px;
  }
  .inapp-banner .row{ 
    display:flex; gap:8px; align-items:center; justify-content:space-between; 
  }
  .inapp-banner .btn{ 
    padding:8px 12px; border-radius:10px; background:#22c55e; border:0; color:#fff; 
    cursor:pointer; font-weight:700; 
  }
  .inapp-banner .btn:hover{ background:#16a34a; }

  /* === Canva iFrame 공통 === */
  /* iframe은 항상 .embed-box 내부를 100%로 채운다(절대위치 규칙과 일치) */
  .canva-frame{ width:100%; border:0; display:block; height:100% !important; }

  /* 회전 힌트 노출만 유지 — iframe 높이 강제 금지 */
  @media (orientation: portrait){
    #rotateOverlay{ display:flex; }
  }
  @media (orientation: landscape){
    #rotateOverlay{ display:none; }
  }

  /* 회전 힌트 - 컨텐츠 가리지 않게 하단 토스트 */
  #rotateOverlay{
    position:fixed; left:8px; bottom:8px; z-index:50;
    display:none; align-items:center; gap:8px;
    padding:8px 10px; border-radius:10px;
    background:rgba(0,0,0,.55); color:#fff; font-size:12px;
    backdrop-filter: blur(4px);
  }

  /* ====== PC 세퍼레이터(후킹 문구) – 간격 clamp() 스케일 ====== */
  .pc-sep{
    margin: clamp(12px, 2.8vh, 36px) auto;   /* 위·아래 동일 간격, 뷰포트 대응 */
    width: min(100%, 1200px);                /* 최대폭 제한 */
    padding: clamp(8px, 1.5vh, 14px) 0;      /* 내부 패딩도 스케일 */
    display:flex; align-items:center; justify-content:center;
    font-size: clamp(22px, 2.4vw, 30px);     /* 폰트 22~30px 스케일 */
    font-weight:800;
    letter-spacing:-0.02em;
    color:#dbe4ff;
    /* 약한 양각 효과 */
    text-shadow:
      0 1px 0 rgba(255,255,255,.22),
      0 -1px 0 rgba(0,0,0,.40);
    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(0,0,0,.35);
    opacity:.92;
  }
  .pc-sep > span{
    max-width: 92vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html.inapp .pc-sep{ display:none !important; }

  /* === Horizontal chip/menu scroller (가로 스크롤 메뉴) =================================== */
  .h-scroll {
    display: flex;
    flex-wrap: nowrap;          /* 한 줄 고정 */
    gap: 8px;
    overflow-x: auto;           /* 가로 스크롤 */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
    overscroll-behavior-x: contain;    /* 양끝 튕김 방지 */
    padding-inline: 8px;
    scroll-snap-type: x proximity;     /* 스냅(선택) - 칩이 한 개씩 착 붙어 멈춤 */
  }
  .h-scroll > * {
    flex: 0 0 auto;             /* 줄바꿈 금지 */
    scroll-snap-align: start;
    white-space: nowrap;        /* 버튼 텍스트 줄바꿈 방지 */
  }
  .h-scroll::-webkit-scrollbar { display: none; } /* 모바일에서 바 숨김 */
  .h-scroll.is-dragging { cursor: grabbing; }

  /* 버튼/태그가 너무 커져 한 줄 높이가 깨지는 것 방지(선택) */
  .chip-btn { white-space: nowrap; }