/* 동북권 ICT이노베이션스퀘어 메인 팝업 - popup.css (index.html 에서 main.css 다음에 로드) */
/* ============================================================
   메인 팝업 (레이어 팝업존, #mainPopup) — 캐러셀 + 오늘 하루 그만보기 (마크업 index.html, 스크립트 js/popup.js — 메인에서만 main.css 다음에 로드)
   - 사용자 제공 CSS 를 사이트 규칙에 맞춤 : 글자 clamp · 색은 사이트 변수(진한 글자 --ink · 마우스 올림 --primary) · 아이콘은 이미지(아이콘 글꼴 · CDN 안 씀)
   - 웹접근성 : 초점 표시(흰 테두리) · 닫기 버튼 퍼지는 원은 3번만(계속 움직이지 않게) · 움직임 줄이기 설정이면 효과 없음
   ============================================================ */
html.is-popup-open,html.is-popup-open body{overflow:hidden;}   /* 팝업이 열려 있는 동안 뒤 페이지 스크롤 막음 */
.main-popup{position:fixed;inset:0;z-index:900;}
.main-popup__bg{position:absolute;inset:0;background:rgba(20,20,24,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:main-popup-fade .2s ease;}
.main-popup__wrap{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(1200px, calc(100% - 40px), calc(240vh - 390px));   /* 스크롤 없이 화면 안에 : 화면이 낮으면 카드(4:5) 높이에 맞춰 폭을 줄임 — 스크롤 상자로 두면 닫기 버튼 퍼지는 원 때문에 스크롤바가 생김 */
  animation:main-popup-pop .35s cubic-bezier(.2,.8,.3,1);
}
.main-popup__wrap:focus{outline:none;}   /* 열릴 때 초점을 받는 상자 (제목을 읽음) — 테두리는 안 보임 */
.main-popup__top{display:flex;align-items:center;justify-content:space-between;padding:0 4px 18px;}
.main-popup__title{margin:0;font-size:clamp(20px, 18.78px + 0.327vw, 24px);font-weight:700;letter-spacing:-.01em;color:#fff;}
.main-popup__ctrl{display:flex;gap:8px;}
.main-popup__nav{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:0;border-radius:50%;background:#fff;cursor:pointer;transition:transform .15s ease,opacity .15s ease;}
.main-popup__nav img{display:block;width:22px;height:22px;}
.main-popup__nav:hover{transform:translateY(-1px);}
.main-popup__nav:disabled{opacity:.45;cursor:default;}
.main-popup__nav:disabled:hover{transform:none;}
.main-popup__nav:focus-visible,.main-popup__close:focus-visible{outline:3px solid #fff;outline-offset:3px;}

.main-popup__viewport{overflow:hidden;margin:-10px -16px -40px;padding:10px 16px 40px;}   /* 마우스 올림 그림자 · 초점 테두리가 잘려 각지지 않게 둘레 여백 (옆 여백 16px < 카드 간격 20px 라 옆 카드는 안 보임) */
.main-popup__track{display:flex;gap:20px;margin:0;padding:0;list-style:none;transition:transform .5s cubic-bezier(.4,0,.2,1);will-change:transform;}
.main-popup__slide{flex:0 0 calc((100% - 40px) / 3);min-width:0;}
.main-popup__card{display:block;aspect-ratio:4 / 5;border-radius:14px;overflow:hidden;background:#222;transition:transform .3s ease,box-shadow .3s ease;}
.main-popup__card:hover{transform:translateY(-4px);box-shadow:0 20px 30px -14px rgba(0,0,0,.55);}   /* 그림자는 주로 아래로 (옆 번짐 16px 이내 — 둘레 여백 안) */
.main-popup__card:focus-visible{outline:3px solid #fff;outline-offset:3px;}
.main-popup__card img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;}   /* 칸 비율 고정 + cover (포스터 위쪽 기준) */

.main-popup__bottom{display:flex;align-items:center;justify-content:space-between;margin-top:22px;padding:0 4px;}
.main-popup__hide{display:inline-flex;align-items:center;gap:10px;font-size:clamp(13px, 12.69px + 0.082vw, 14px);color:rgba(255,255,255,.92);cursor:pointer;user-select:none;}
.main-popup__hide input{width:18px;height:18px;margin:0;accent-color:var(--primary);cursor:pointer;}
.main-popup__close{position:relative;display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border:0;border-radius:50%;background:#fff;cursor:pointer;transition:transform .15s ease;}
.main-popup__close img{display:block;width:28px;height:28px;}
.main-popup__close:hover{transform:translateY(-1px);}
.main-popup__close::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:50%;background:rgba(255,255,255,.35);animation:main-popup-ping 1.6s cubic-bezier(0,0,.2,1) 3;}   /* 퍼지는 원 3번 (약 5초, 계속 움직이면 정지 기능이 필요해짐) */

@keyframes main-popup-fade{from{opacity:0;}to{opacity:1;}}
@keyframes main-popup-pop{from{transform:translate(-50%,-46%);opacity:0;}to{transform:translate(-50%,-50%);opacity:1;}}
@keyframes main-popup-ping{0%{transform:scale(1);opacity:.6;}75%,100%{transform:scale(1.4);opacity:0;}}

/* 반응형 : 한 화면 3장 → 2장 → 1장 */
@media (max-width:900px){
  .main-popup__wrap{width:min(calc(100% - 40px), calc(160vh - 265px));}   /* 2장 : 낮은 화면이면 폭을 줄임 */
  .main-popup__slide{flex:0 0 calc((100% - 20px) / 2);}
}
@media (max-width:640px){
  .main-popup__wrap{width:min(calc(100% - 24px), calc(83vh - 142px));}   /* 1장(5:6) : 낮은 화면이면 폭을 줄임 */
  .main-popup__slide{flex:0 0 100%;}
  .main-popup__card{aspect-ratio:5 / 6;}
  .main-popup__top{padding-bottom:12px;}
  .main-popup__bottom{margin-top:16px;}
  .main-popup__nav{width:38px;height:38px;}
  .main-popup__nav img{width:20px;height:20px;}
  .main-popup__close{width:48px;height:48px;}
  .main-popup__close img{width:24px;height:24px;}
}
/* 팝업 1개 · 2개 (2026-11-10 시안 갱신) : 넘김 없이 상자 폭 = 카드 수만큼 → 닫기 버튼이 그림 오른쪽 아래에 옴
   - 1개 : 모든 폭에서 이전 · 다음 버튼 없음 / 2개 : 641px 이상만 (640px 이하 2개는 한 장씩 넘김 그대로) / 3개 : PC(901px 이상)만 버튼 없음 (상자는 원래 3장 폭)
   - 카드 크기는 3개 이상일 때와 같음 (마크업 · popup.js 그대로, 카드 수는 :has 로 판단)
   - 시안은 .main-popup__ctrl 전체를 숨기지만 여기는 정지 · 재생 버튼(정의서 v1.1 13장 2번)이 같은 묶음 안에 있어 이전 · 다음 버튼만 숨김 */
.main-popup__wrap:has(.main-popup__slide:only-child) .main-popup__nav:not(.main-popup__play){display:none;}
.main-popup__wrap:has(.main-popup__slide:only-child) .main-popup__slide{flex-basis:100%;}
@media (min-width:641px){
  .main-popup__wrap:has(.main-popup__slide:nth-child(2):last-child) .main-popup__nav:not(.main-popup__play){display:none;}
}
@media (min-width:901px){
  .main-popup__wrap:has(.main-popup__slide:only-child){width:calc((min(1200px, calc(100% - 40px), calc(240vh - 390px)) - 40px) / 3);}
  .main-popup__wrap:has(.main-popup__slide:nth-child(2):last-child){width:calc((min(1200px, calc(100% - 40px), calc(240vh - 390px)) * 2 - 20px) / 3);}
  .main-popup__wrap:has(.main-popup__slide:nth-child(2):last-child) .main-popup__slide{flex-basis:calc((100% - 20px) / 2);}
  .main-popup__wrap:has(.main-popup__slide:nth-child(3):last-child) .main-popup__nav:not(.main-popup__play){display:none;}
}
@media (min-width:641px) and (max-width:900px){
  .main-popup__wrap:has(.main-popup__slide:only-child){width:calc((min(calc(100% - 40px), calc(160vh - 265px)) - 20px) / 2);}
}
/* 낮은 화면(폰 가로 등) : 제목 · 버튼 줄만으로도 화면 절반을 넘어 위아래가 잘림 → 팝업 영역 안에서 세로 스크롤 (모바일 전수 LAY-08-11) */
@media (max-height:500px){
  .main-popup{overflow-y:auto;overscroll-behavior:contain;}
  .main-popup__bg{position:fixed;}
  .main-popup__wrap{position:relative;top:auto;left:auto;transform:none;width:min(calc(100% - 40px), 420px);margin:16px auto;animation-name:main-popup-fade;}
}
@media (prefers-reduced-motion:reduce){
  .main-popup__bg,.main-popup__wrap,.main-popup__close::after{animation:none;}
  .main-popup__track,.main-popup__card,.main-popup__nav,.main-popup__close{transition:none;}
}