/* =========================
   접근성/모션 배려
   ========================= */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0;
}
:focus-visible{ outline:2px solid #60a5fa; outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =========================
   풀스크린 팝업 기본 + FOUC 방지
   ========================= */
.popfs-overlay{
  position: fixed; inset: 0; z-index: 2147483600;
  display: flex; align-items: stretch; justify-content: center;
  opacity: 0; visibility: hidden; /* 초기 완전 숨김 */
}
.popfs-overlay.popfs-ready{
  opacity: 1 !important; visibility: visible !important;
  transition: opacity .32s ease;
}
.popfs-overlay.fade-out{ animation: popfsFadeOut .3s ease forwards; }
@keyframes popfsFadeOut { to { opacity: 0; } }

.popfs-backdrop{
  position:absolute; inset:0; background: rgba(0,0,0,.9); z-index: 0;
}
.popfs-stage{
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  width: min(1560px, 94vw);
  margin: auto;
  transition: filter .22s ease, transform .22s ease;
}

/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {.popfs-overlay.blurred .popfs-stage{
  filter: blur(6px) saturate(.9);
  transform: scale(.995);
  pointer-events: none;
}
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {.popfs-overlay.blurred .popfs-stage{

  pointer-events: none;
}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/


/* 헤더 */


/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
	.popfs-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 8px 10px 10px; color:#fff; margin-bottom: 30px
}
.popfs-head .title{ font-weight:900;  display: flex;  justify-content: center;  align-items: center;}
.popfs-head .title .intx{ font-weight:900;font-size: 30px; float: left }
.popfs-head .title .intx em{ color: var(--primary); }
.popfs-head .title .pager-total{ margin-left:10px; }
.popfs-head .right{ display:flex; align-items:center; gap:12px; }
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
	.popfs-head{
width: 100%; float: left;
  padding: 8px 10px 10px; color:#fff;
}
.popfs-head .title{ font-weight:700; margin-bottom: 10px ; width: 100%; float: left}
.popfs-head .title .intx{ font-weight:700;font-size: 20px; float: left }
.popfs-head .title .intx em{ color: var(--primary); }
.popfs-head .title .pager-total{ margin-left:10px; }
.popfs-head .right{ display:flex; align-items:center; gap:5px;  width: 100%; float: left}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/



/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
	
	/* 오늘 하루 열지 않기 */
.popfs-head .hide-today{
  position: relative; display: inline-flex; align-items: center;
  gap: 10px; padding: 6px 12px 6px 14px;
  border-radius: 999px; background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff; cursor: pointer; line-height: 1; user-select: none;
  font-size: 14px;
}
.popfs-head .hide-today input{
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden;
}
.popfs-head .hide-today::after{
  content: ""; width: 36px; height: 36px; margin-left: 8px; border-radius: 50%;
  background: #ff8a00; box-shadow: 0 6px 16px rgba(0,0,0,.25);
  display: inline-block; background-repeat: no-repeat; background-position: center; background-size: 18px 18px;
  background-image: url('data:image/svg+xml;utf8,\
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
      <path fill="white" d="M6.4 5l12.6 12.6-1.4 1.4L5 6.4 6.4 5zm12.6 1.4L6.4 19.4 5 18l12.6-12.6 1.4 1.4z"/>\
    </svg>');
}
.popfs-head .hide-today:has(input:checked){ background: rgba(0,0,0,.5); }

}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
	
	/* 오늘 하루 열지 않기 */
.popfs-head .hide-today{
  position: relative; display: inline-flex; align-items: center;
  gap: 10px; padding: 6px 12px 6px 14px;
  border-radius: 999px; background:#000;
  
  color: #fff; cursor: pointer; line-height: 1; user-select: none;
  font-size: 14px;
}
.popfs-head .hide-today input{
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden;
}
.popfs-head .hide-today::after{
  content: ""; width: 26px; height: 26px; margin-left: 8px; border-radius: 50%;
  background: #ff8a00; box-shadow: 0 6px 16px rgba(0,0,0,.25);
  display: inline-block; background-repeat: no-repeat; background-position: center; background-size: 18px 18px;
  background-image: url('data:image/svg+xml;utf8,\
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
      <path fill="white" d="M6.4 5l12.6 12.6-1.4 1.4L5 6.4 6.4 5zm12.6 1.4L6.4 19.4 5 18l12.6-12.6 1.4 1.4z"/>\
    </svg>');
}
.popfs-head .hide-today:has(input:checked){ background: rgba(0,0,0,.5); }

}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/



/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
	
/* 닫기 */
.popfs-head .btn-close{
  display: inline-flex; align-items: center; gap: 8px;
 border-radius: 999px;
  gap: 10px; padding: 6px 6px 6px 14px;
  border-radius: 999px; background:#000;
  color: #fff; cursor: pointer; font-size: 14px; border: 1px solid rgba(255,255,255,.25);
}
.popfs-head .btn-close > span[aria-hidden="true"]{
  display:inline-flex; width:36px; height:36px; border-radius:50%;
  align-items:center; justify-content:center; background:#ff8a00; background-size: 18px 18px; background-repeat: no-repeat; background-position: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);   background-image: url('data:image/svg+xml;utf8,\
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
      <path fill="white" d="M6.4 5l12.6 12.6-1.4 1.4L5 6.4 6.4 5zm12.6 1.4L6.4 19.4 5 18l12.6-12.6 1.4 1.4z"/>\
    </svg>');
}

}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
	
/* 닫기 */
.popfs-head .btn-close{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background:#000;

  color: #fff; cursor: pointer; font-size: 14px;
}
.popfs-head .btn-close > span[aria-hidden="true"]{
  display:inline-flex; width:26px; height:26px; border-radius:50%;
  align-items:center; justify-content:center; background:#ff8a00; background-size: 18px 18px; background-repeat: no-repeat; background-position: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);   background-image: url('data:image/svg+xml;utf8,\
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
      <path fill="white" d="M6.4 5l12.6 12.6-1.4 1.4L5 6.4 6.4 5zm12.6 1.4L6.4 19.4 5 18l12.6-12.6 1.4 1.4z"/>\
    </svg>');
}

}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/


/* 본문 */
.popfs-body{
  position: relative; flex: 1 1 auto;
  background: transparent; padding-top: 8px;
}

/* 슬라이드/그리드 공통 */
.slide-figure{
  position: relative; display:flex; align-items:flex-start; justify-content:center;
  width:100%; height:100%; overflow: hidden;
}
.imgbox{ position: relative; overflow: hidden; border-radius: 10px; display:flex; align-items:flex-start; }
.slide-figure img{
  display:block; width:auto; height:auto; max-width:100%; max-height:100%;
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.35);
  align-self:flex-start;
}

/* 오버레이(확대/링크) — 클릭 히트박스/포인터 처리 고정 */
.slide-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,0);
  opacity:0; transform: translateY(8px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events:none;  /* 숨김때 클릭 차단 */
  z-index: 10;
}
.slide-figure:hover .slide-overlay,
.slide-figure:focus-within .slide-overlay{
  opacity:1; transform: translateY(0) scale(1);
  pointer-events:auto; /* 보일 때만 클릭 허용 */
}
@media (max-width:767px){
  .slide-overlay{
    opacity:1; transform:none; pointer-events:auto; /* 모바일은 항상 보이고 터치 가능 */
  }
}
.slide-overlay .ov-box{
  background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.25);
  border-radius: 12px; padding: 14px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.35);
  text-align: center; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column;
}

@media (max-width:767px){ .slide-overlay .ov-box{
  background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.25);
  border-radius: 12px; padding: 14px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.35);
  text-align: center; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);
  width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column;
}
}



.ov-title{ font-size:18px; font-weight:700; color:#fff; margin:0 0 10px; line-height:1.35; }
@media (max-width:767px){ .ov-title{ display:none; } }

.ov-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.ov-btn{
  appearance:none; border:0; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  pointer-events:auto; z-index: 11; box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.ov-btn.ov-zoom{
  background-color:var(--primary, #2563eb); border-radius:100%; width:60px; height:60px;
  transition: transform .2s;
}
.ov-btn.ov-zoom:before{
  content:"\e99a"; font-family: unicons-line; color:#fff; font-size:26px; line-height:26px;
}
.ov-btn.ov-zoom:hover{ transform: scale(1.06); }
.ov-btn.ov-link{
  background-color: rgba(255,255,255,.92); color:#111; border-radius:100%;
  width:60px; height:60px; font-size:0; line-height:0; position:relative;
}
.ov-btn.ov-link:before{
  content:"\e9a2"; font-family: unicons-line; color:#111; font-size:26px; line-height:26px;
}
.ov-btn.ov-link > .sr-only{ position:absolute; }







.popfs-body{ width:100%; height:100%; padding: 0px 0px; position: relative}

.popfs-swiper{ width:100%; height:100%; direction:ltr; opacity:0; visibility:hidden;  }
.popfs-swiper.is-ready{ opacity:1; visibility:visible; transition: opacity .22s ease .06s; }
.swiper-wrapper{ align-items:flex-start; }
.popfs-body .swiper-slide{ display:flex; align-items:flex-start; justify-content:center; height:100%; }
.popfs-swiper  .swiper-button-prev, .popfs-swiper .swiper-button-next{ z-index:4; }


/* Swiper 화살표 위치 수정 */

.popfs-nav {
  position: absolute;
  top:35%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: none;
  background: rgba(0,0,0,.5);
  cursor: pointer;
  z-index: 15;
  border-radius: 999px;
}

/* 바깥으로 50px */
.popfs-prev { left: -50px; }
.popfs-next { right: -50px; }

/* 보기 좋게 아이콘(▶/◀) 대체 — 필요 시 커스텀 */
.popfs-prev::before,
.popfs-next::before {
  content: '';
  display: block;
  width: 12px; height: 12px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  position: absolute; left: 50%; top: 50%;
  transform-origin: center;
}
.popfs-prev::before { transform: translate(-45%,-50%) rotate(-45deg); }
.popfs-next::before { transform: translate(-55%,-50%) rotate(135deg); }

/* 페이지네이션도 컨테이너 밖에 위치 */
.popfs-pagination {
  position: relative; /* 필요시 absolute로 조정 */
  margin-top: 40px;   width: 100%; float: left; display: flex;  justify-content: center;  align-items: center;
}

/* 화살표가 들어갈 기준 박스는 overflow:visible 이어야 함 */
.popfs-body,
.popfs-stage {
  overflow: visible;
  position: relative; /* 기준 포지셔닝 */
}

/* 반응형: 모바일에선 안쪽으로 붙이고 싶다면 */
@media (max-width: 640px) {
  .popfs-prev { left: 10px; }
  .popfs-next { right: 10px; }
}



/* 하단 페이징 & 총 개수 */
.popfs-pager{
  position:absolute; left:0; right:0; bottom:12px;
  display:flex; align-items:center; justify-content:center; gap:12px;
  pointer-events:none; width:100%;
}
.popfs-pager.only-total{ position:static; margin-top:10px; justify-content:flex-end; padding:0 6px; }
.pager-frac{
  color:#fff; font-size:13px; background: rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:4px 8px;
  position:absolute; left:50px; top:-72px; display:none;
}
.pager-total{
  color:#fff; font-size:13px; background: rgba(0,0,0,.45); line-height: 100%; margin-top: -5px;
  border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:10px 12px; float:left; margin-left:10px
}
.swiper-pagination .swiper-pagination-bullet{
  opacity:1; background: rgba(255,255,255,.85); color:#111;
  border-radius: 999px; width:auto; padding:4px 8px; margin:0 4px;
}
.swiper-pagination .swiper-pagination-bullet-active{ background:#111; color:#fff; }

/* 확대 뷰어 */
.zoom-viewer{ position: fixed; inset:0; display:none; z-index:2147483640; }
.zoom-viewer.open{ display:block; }
.zv-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.9); }
.zv-stage{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.zv-toolbar{ position:absolute; left:50%; transform:translateX(-50%); top:14px; display:flex; gap:8px; z-index:2; }
.zv-btn{ border:0; background:#fff; color:#111; padding:8px 10px; border-radius:8px; cursor:pointer; font-size:16px; }
.zv-btn.zv-close{ background:#111; color:#fff; }
.zv-canvas{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; overflow:hidden; touch-action:none; z-index:1; }
.zv-canvas img{ display:block; transform-origin:center center; user-select:none; -webkit-user-drag:none; max-width:96vw; max-height:90vh; }
.zv-nav{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border:0; border-radius:10px;
  background:#fff; color:#111; font-size:22px; cursor:pointer; z-index:2; box-shadow:0 8px 18px rgba(0,0,0,.25); }
.zv-nav.prev{ left: 16px; } .zv-nav.next{ right:16px; }

/* 정적 그리드(1~3개) */
.popfs-grid{
  width:100%; height:100%;
  display:grid; gap: <?php echo (int)$SPACE_BETWEEN; ?>px;
  align-items:stretch; justify-items:center;
}
.popfs-grid.lock4{
  grid-template-columns: repeat(<?php echo (int)$SLIDES_PER_VIEW_PC; ?>, minmax(0,1fr));
}
.popfs-grid.cols-1{ grid-template-columns: repeat(1, minmax(0,1fr)); }
.popfs-grid.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.popfs-grid.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.popfs-grid.cols-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }

@media (max-width:1024px){
  .popfs-grid,
  .popfs-grid.lock4,
  .popfs-grid[class*="cols-"]{
    grid-template-columns: repeat(<?php echo (int)$SLIDES_PER_VIEW_TBL; ?>, minmax(0,1fr));
  }
}
@media (max-width:640px){
  .popfs-grid,
  .popfs-grid.lock4,
  .popfs-grid[class*="cols-"]{
    grid-template-columns: repeat(<?php echo (int)$SLIDES_PER_VIEW_MO; ?>, minmax(0,1fr));
  }
}


/* '다시보기' 버튼(스킨 하단에 함께 출력되는 기본형) */
/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {.popup-reopen-btn{
  position: absolute; right: 0px; top:10px; z-index: 2147483650;
  border: 0; background: var(--primary, #2563eb); color: #fff; cursor: pointer;
  padding: 5px 8px 5px 15px; border-radius: 50px; font-size: 14px;
  box-shadow: 0 10px 20px rgba(0,0,0,.2);
}

}
/**** pc2 ****/
@media all and (max-width:1440px) and (min-width:768px) {
	.popup-reopen-btn{
  position: absolute; right:30px; top:10px; z-index: 2147483650;
  border: 0; background: var(--primary, #2563eb); color: #fff; cursor: pointer;
  padding: 5px 8px 5px 15px; border-radius: 50px; font-size: 14px;
  box-shadow: 0 10px 20px rgba(0,0,0,.2);
}
}
/**** 모바일 ****/
@media only all and (max-width:767px) {.popup-reopen-btn{
  position: absolute; right:0px; top:60px; z-index: 2147483650;
  border: 0; background: var(--primary, #2563eb); color: #fff; cursor: pointer;
  padding: 5px 8px 5px 15px; border-radius: 50px 0px 0px 50px; font-size: 14px;
  box-shadow: 0 10px 20px rgba(0,0,0,.2);
}

}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/



.popup-reopen-btn em{
  width: 25px; height: 25px; background-color: #333; border-radius: 100%;
  display: inline-flex; justify-content: center; align-items: center; color: #fff; margin-left:6px; 
}
	
	.popup-reopen-btn_out{ position: fixed; left: 0px; top:0px; height:1px; z-index: 999999;  width: 100%; float: left}
	.popup-reopen-btn_out .contentContainer{ position: relative;}