/* =============================================================================
   사이트 최초 진입 Intro(Splash) — 2026-09-29 (js/intro.js)
   - 전체 화면 고정 레이어. z-index 45: 상단바(20)·하단탭(30)·홈 버튼들 위, 시스템 확인창(.modal-wrap 50)·알림(70) 아래.
   - 16:9 영상 전체가 보이게(contain, cover 로 자르지 않음) — 톱니·좌우 아이콘·문구가 잘리지 않는다. 남는 여백은 영상 가장자리 색으로 채우고
     영상 테두리는 살짝 흐리게 섞어 경계가 보이지 않게 한다(가로가 긴 화면: 좌우, 세로가 긴 화면: 위아래).
   ========================================================================== */
.intro-splash{position:fixed;inset:0;z-index:45;display:flex;align-items:center;justify-content:center;overflow:hidden;
  /* 좌우 여백(가로가 긴 화면) = 영상 좌·우 가장자리 색. 2026-10-05 교체 영상(AI Safety Solution)은 밝은 바탕 —
     왼쪽 띠 위→아래(파랑빛 흰색→민트빛 흰색), 오른쪽 띠 위→아래(흰색→보랏빛 흰색)를 프레임 전체 평균으로 맞췄다. 두 띠의 경계(50%)는 영상 뒤에 가려진다 */
  background-color:#f7f8fb;
  background-image:linear-gradient(180deg,#f2f5fb 0,#f5f8fb 50%,#f3faf9 100%),linear-gradient(180deg,#fbfbfb 0,#f8f3fb 50%,#f5eefb 100%);
  background-size:50% 100%,50% 100%;background-position:left top,right top;background-repeat:no-repeat;
  opacity:1;transition:opacity .4s ease;-webkit-user-select:none;user-select:none;}
.intro-video{display:block;flex:0 0 auto;width:min(100vw,177.7778vh);height:min(100vh,56.25vw);object-fit:contain;background:transparent;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 2.5%,#000 97.5%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 2.5%,#000 97.5%,transparent 100%);}
@supports (height:100dvh){ .intro-video{width:min(100vw,177.7778dvh);height:min(100dvh,56.25vw);} }
/* 세로가 긴 화면(휴대폰 세로 등): 위아래 여백 = 영상 위아래 가장자리 색 */
@media (max-aspect-ratio:16/9){
  /* 위 띠 = 영상 위쪽 가장자리(왼→오른), 아래 띠 = 영상 아래쪽 가장자리(왼→오른) */
  .intro-splash{background-color:#f8f9fb;
    background-image:linear-gradient(90deg,#f3f5fb 0,#fafafb 50%,#fbfbfc 100%),linear-gradient(90deg,#f4faf9 0,#f8fafa 50%,#f7f2fb 100%);
    background-size:100% 50%,100% 50%;background-position:left top,left bottom;}
  .intro-video{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);}
}
/* 사라지는 동안에도 클릭은 이 레이어가 받는다(제거되는 순간부터 홈을 누를 수 있음) — 뒤 버튼이 잘못 눌리지 않게 */
.intro-splash.is-leaving{opacity:0;}
.intro-splash:focus{outline:none;}
.intro-splash.is-fast{transition-duration:.15s;}

/* [건너뛰기] — 오른쪽 위, 작게. 영상 가운데(톱니)를 가리지 않고 손가락으로 누르기 충분한 높이(44px) */
.intro-skip{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:calc(14px + env(safe-area-inset-right,0px));
  display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px 0 18px;border-radius:999px;
  /* 2026-10-05: 밝은 바탕 영상 위에서도 흰 글자가 읽히게 바탕을 진하게 — 표시 상태(투명도 .92 포함) 대비 약 5.2:1. 위치·크기·동작은 그대로 */
  border:1px solid rgba(255,255,255,.38);background:rgba(29,29,31,.70);color:#fff;
  font:inherit;font-size:14px;font-weight:700;letter-spacing:.02em;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s ease,background-color .15s ease;}
.intro-skip span{font-size:17px;line-height:1;margin-top:-1px;}
.intro-skip.is-shown{opacity:.92;}
.intro-skip:hover{opacity:1;background:rgba(29,29,31,.82);}
.intro-skip:focus-visible{outline:2px solid #fff;outline-offset:2px;opacity:1;}
@media (max-width:480px){ .intro-skip{font-size:13.5px;padding:0 14px 0 16px;} }
@media (prefers-reduced-motion:reduce){ .intro-splash,.intro-skip{transition:none;} }