@charset "UTF-8";

/* =========================
   접근성 모션 배려
   ========================= */
.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;
}
}
/**** 모바일 ****/
@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;  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}
}
/**** 모바일 ****/
@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); }

}
/**** 모바일 ****/
@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>');
}

}
/**** 모바일 ****/
@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: 999999999 !important;
}
.slide-figure:hover .slide-overlay,
.slide-figure:focus-within .slide-overlay{
  opacity:1; transform: translateY(0) scale(1);
  pointer-events:auto; 
}
@media (min-width: 768px) and (max-width: 1279px){
  .slide-overlay{
    opacity:0; transform:none; pointer-events:none; 
  }
  

  .slide-figure:hover .slide-overlay{
    opacity:0; transform:none; pointer-events:none;
  }
  

  .tablet-title{
    position: absolute;
    left: 12px;
    bottom: 12px;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    max-width: calc(100% - 100px);
    line-height: 1.3;
    z-index: 10;
  }
  

  .tablet-buttons{
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 6px;
    z-index: 10;
  }
  
  .tablet-btn{
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: transform 0.2s;
  }
  
  .tablet-btn:hover{
    transform: scale(1.1);
  }
  
  .tablet-zoom{
    background: rgba(255, 107, 53, 0.9);
    color: #fff;
  }
  
  .tablet-zoom:before{
    content: "+";
    font-size: 18px;
    font-weight: bold;
  }
  
  .tablet-link{
    background: rgba(37, 99, 235, 0.9);
    color: #fff;
    text-decoration: none;
  }
  
  .tablet-link:before{
    content: "→";
    font-size: 16px;
    font-weight: bold;
  }
  

  .tablet-version .imgbox::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.6), rgba(0,0,0,0.3), transparent);
    pointer-events: none;
    z-index: 5;
  }
}
@media (max-width:767px){
  .slide-overlay{
    opacity:1; transform:none; pointer-events:auto;
  }
}


@media (max-width:767px){
  .mobile-grid .slide-overlay{
    opacity:1 !important; 
    transform:none !important; 
    pointer-events:auto !important;
    display: flex !important;
    visibility: visible !important;
  }
  .mobile-grid .slide-figure:hover .slide-overlay,
  .mobile-grid .slide-figure:focus-within .slide-overlay{
    opacity:1 !important; 
    transform:none !important; 
    pointer-events:auto !important;
  }
}
.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;
  z-index: 999999999 !important;
  position: relative;
}

@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{ font-size:14px; margin:0 0 8px; } }

.ov-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; z-index: 999999999 !important; position: relative; }
.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: 999999999 !important; box-shadow:0 6px 16px rgba(0,0,0,.25);
  position: relative;
}
.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; }


@media (max-width:767px){
  .ov-actions{ gap:8px; }
  .ov-btn.ov-zoom{ width:50px; height:50px; }
  .ov-btn.ov-zoom:before{ font-size:22px; line-height:22px; }
  .ov-btn.ov-link{ width:50px; height:50px; }
  .ov-btn.ov-link:before{ font-size:22px; line-height:22px; }
}

.zoom-viewer{ 
  position: fixed !important; 
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display:none; 
  z-index:999999999 !important; 
  background: rgba(0,0,0,.95) !important;
  margin: 0 !important;
  padding: 0 !important;
}


body.zoom-viewer-open * {
  z-index: 1 !important;
}
body.zoom-viewer-open .zoom-viewer {
  z-index: 999999999 !important;
}
body.zoom-viewer-open .zoom-viewer * {
  z-index: auto !important;
}
.zoom-viewer.open{ 
  display:block !important; 
}
.zv-backdrop{ 
  position:absolute; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.95); 
  z-index:1; 
}
.zv-stage{ 
  position:absolute; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display:flex; 
  align-items:center; 
  justify-content:center; 
  z-index:2; 
}
.zv-toolbar{ 
  position:absolute; 
  left:50%; 
  transform:translateX(-50%); 
  top:14px; 
  display:flex; 
  gap:8px; 
  z-index:99999999999999999999999999999999999 !important; 
}
.zv-btn{ 
  border:0; 
  background:#fff; 
  color:#111; 
  padding:8px 10px; 
  border-radius:8px; 
  cursor:pointer; 
  font-size:16px; 
  z-index:999999999 !important;
  position:relative;
}
.zv-btn.zv-close{ 
  background:#111; 
  color:#fff; 
  z-index:999999999 !important;
}
.zv-canvas{ 
  position:absolute; 
  top: 60px;
  left: 0;
  width: 100%;
  height: calc(100% - 120px);
  display:flex; 
  align-items:center; 
  justify-content:center; 
  overflow:hidden; 
  touch-action:none; 
  z-index:1; margin: 80px 0px
}
.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:999999999 !important; 
  box-shadow:0 8px 18px rgba(0,0,0,.25); 
}
.zv-nav.prev{ left: 16px; } 
.zv-nav.next{ right:16px; }


@media (max-width: 767px) {
  .zv-toolbar{ top:10px; gap:6px; }
  .zv-btn{ padding:10px 12px; border-radius:10px; font-size:18px; min-width:44px; min-height:44px; }
}







.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; }



.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;
}


.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: 0px;
  align-items:stretch; justify-items:center;
}
.popfs-grid.lock4{
  grid-template-columns: repeat(4, 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(3, minmax(0,1fr));
  }
}
@media (max-width:640px){
  .popfs-grid,
  .popfs-grid.lock4,
  .popfs-grid[class*="cols-"]{
    grid-template-columns: repeat(1, minmax(0,1fr));
  }
}

/* 모바일에 맞는 팝업 전체 비율 위치 조정 */
@media (max-width:767px){
  .popfs-overlay{
    width: 100vw !important;
    height: 100vh !important;
    padding: 0 !important;
    margin: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }
  
  .popfs-stage{
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }
  
  .popfs-body{
    width: 100vw !important;
    height: calc(100vh - 60px) !important;
    padding: 0 !important;
    margin: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }
  
  .popfs-swiper{
    width: 100vw !important;
  }
  
  .popfs-swiper .swiper-wrapper{
    width: 100vw !important;
  }
  
  .popfs-swiper .swiper-slide{
    width: 100vw !important;
  }
  
  .popfs-grid{
    width: 100vw !important;
  }
  
  .mobile-grid{
    width: 100vw !important;
  }
  
  .mobile-grid .grid-item{
    width: 100vw !important;
  }
  
  .mobile-grid .grid-item .imgbox{
    width: 100vw !important;
  }
  
  .mobile-grid .grid-item img{
    width: 100vw !important;
    height: auto !important;
  }
}




/* '미리보기' 버튼(닫은 하단에 함께 출력되는 기본형) */
/* 구분 -----------------------------------*/
/**** 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 10px 5px 20px; border-radius: 50px; font-size: 14px;

}

}
/**** pc2 ****/
@media all and (max-width:1440px) and (min-width:768px) {

}
/**** 모바일 ****/
@media only all and (max-width:767px) {.popup-reopen-btn{
  position: absolute; right:60px; top:12px; z-index: 999999999 !important;
  border: 0; background: var(--primary, #2563eb); color: #fff; cursor: pointer;
  padding: 5px 8px 5px 15px; border-radius: 50px ; font-size: 14px;

}

}
/**** 모바일 ****/
@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: 999999999 !important;  width: 100%; float: left}
	.popup-reopen-btn_out .contentContainer{ position: relative;}
	
/* 모바일용 확대 버튼 스타일 */
.info-zoom-btn{
  display:inline-block; background:#ff6b35; color:#fff; border:0;
  padding:6px 12px; border-radius:6px; font-size:12px; cursor:pointer;
  margin-right:8px; transition: background .2s;
}
.info-zoom-btn:hover{ background:#e55a2b; }
.info-link-container{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}

/* 위치 아래방향 - PC에서 모바일로 줄였을 때 */
@media (max-width: 1279px) {
  .popfs-swiper,
  .popfs-swiper .swiper-wrapper,
  .popfs-swiper .swiper-slide {
    touch-action: pan-y !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
  }
  
  .popfs-swiper img {
    pointer-events: none !important;
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
    user-drag: none !important;
  }
}

/* ===== 모바일전용: 확대스와이퍼 제거, 순수 2개로 세로 리스트 ===== */
@media (max-width: 767px) {
  /* 모바일에 맞는 확대스와이퍼 전면제거 */
  .mobile-version .mobile-swiper {
    display: none !important;
  }
  
  /* CSS Grid 레이아웃 (JavaScript 충돌 방지) */
  .popfs-overlay .popfs-stage .popfs-body .popup-version.mobile-version .popfs-grid.mobile-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: auto !important;
    gap: 0px !important;
    padding: 0px !important;
    margin: 0px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 200px) !important;
    align-items: start !important;
  }
  
  /* 기존 스와이퍼도 제거 */
  .mobile-version .mobile-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: auto !important;
    gap: 0px !important;
    padding: 0px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 200px) !important;
    align-items: start !important;
  }
  
  /* 그리드 레이아웃으로 완전 전환 */
  .popfs-overlay .popfs-stage .popfs-body .popup-version.mobile-version .popfs-grid.mobile-grid .grid-item,
  .mobile-grid .grid-item {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    position: relative !important;
    min-height: auto !important;
  }
  
  .popfs-overlay .popfs-stage .popfs-body .popup-version.mobile-version .popfs-grid.mobile-grid .grid-item .slide-figure,
  .mobile-grid .grid-item .slide-figure {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .popfs-overlay .popfs-stage .popfs-body .popup-version.mobile-version .popfs-grid.mobile-grid .grid-item .imgbox,
  .mobile-grid .grid-item .imgbox {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 0px !important;
    overflow: hidden !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* 모든 이미지지가로폭을 일일하게, 세로는 기본 비율에 따라 전 유지하도록 조정 */
  .popfs-overlay .popfs-stage .popfs-body .popup-version.mobile-version .popfs-grid.mobile-grid .grid-item .imgbox img,
  .mobile-grid .grid-item .imgbox img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
    min-height: unset !important;
    max-height: none !important;
  }
  
  /* 모바일용 정보 표시 영역 - 이미지 아래 오버레이 */
  .mobile-grid .slide-info {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 10px !important;
    background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.3), rgba(0,0,0,0.6)) !important;
    z-index: 10 !important;
  }
  
  .mobile-grid .info-title {
    font-size: 13px !important;
    color: white !important;
    margin-bottom: 0 !important;
    line-height: 1.3 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    text-align: left !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8) !important;
  }
  
  .mobile-grid .info-link-container {
    display: flex !important;
    gap: 6px !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: auto !important;
  }
  
  .mobile-grid .info-zoom-btn,
  .mobile-grid .info-link-btn {
    padding: 8px 12px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border: 0 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
    flex: 1 !important;
    max-width: 80px !important;
  }
  
  .mobile-grid .info-zoom-btn {
    background: #ff6b35 !important;
    color: white !important;
  }
  
  .mobile-grid .info-link-btn {
    background: #007bff !important;
    color: white !important;
  }
  
  .mobile-grid .info-zoom-btn:active,
  .mobile-grid .info-link-btn:active {
    transform: scale(0.95) !important;
  }
}

/* =========================
   모바일 Masonry 강제 2열고정 (이미지시작부터 아래 붙이기)
   ========================= */
:root { --masonry-gutter: 8px; }

@media (max-width: 767px) {
  /* 컨테이너의 절대배치 레이아웃을 위한 메인 컨테이너 */
  .popup-version.mobile-version .mobile-grid {
    display: block !important;     /* grid 강제 지우기 */
    position: relative !important; /* 절대배치 기준 */
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  /* 레이아웃의 절대배치 + 2열고정 */
  .popup-version.mobile-version .mobile-grid .grid-item {
    position: absolute !important;
    width: calc(50% - var(--masonry-gutter)) !important; /* 항상 2열고정 */
    left: 0 !important;
    top: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* 100vw 강제값을 무효화(1열로 만드는 주범) */
  .popup-version.mobile-version .mobile-grid .imgbox,
  .popup-version.mobile-version .mobile-grid .grid-item .imgbox,
  .popup-version.mobile-version .mobile-grid .grid-item img {
    width: 100% !important;      /* 100vw를 100%로 */
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* grid로 다시 걸어버리는 규칙 무력화 */
  .popfs-overlay .popfs-stage .popfs-body .popup-version.mobile-version .popfs-grid.mobile-grid {
    display: block !important;   /* grid를 block으로 */
    grid-template-columns: none !important;
    grid-auto-rows: initial !important;
    gap: 0 !important;
  }
}

/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
	
	.popfs-grid-1{}
	.pc_grid_1{display: block!important}
	
	
	.slide-figure.pc_grid_1{width: 450px!important}
		.slide-figure.pc_grid_1 .imgboximg{width: 450px!important}
	
.tb_grid_1{display: none!important}

}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
	
		.popfs-grid-1{display: flex;  justify-content: center;  align-items: center;}
.pc_grid_1{display: none!important}
.tb_grid_1{display:block!important}
	  /* 테블릿 우측상단 버튼들 - 모바일 메이슨리 스타일 적용 */
	
		.slide-figure.tb_grid_1{width: 450px!important; height: auto!important}
		.slide-figure.tb_grid_1 .imgboximg{width: 450px!important}
	
.tb_grid_1 .top-right-buttons {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    display: flex;
    gap: 8px;
  }
  
.tb_grid_1 .top-right-buttons .ov-btn.ov-zoom {
    width: 40px !important;
    height: 40px !important;
    border: none !important;
    border-radius: 50% !important;
    background: #ff6b35 !important;
    color: white !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    z-index: 10 !important;
    opacity: 0.9 !important;
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.4) !important;
    font-size: 16px !important;
  }
  
.tb_grid_1 .top-right-buttons .ov-btn.ov-zoom:hover {
    background: #ff8a00 !important;
    opacity: 1 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.6) !important;
  }
  
.tb_grid_1 .top-right-buttons .ov-btn.ov-link {
    width: 40px !important;
    height: 40px !important;
    border: none !important;
    border-radius: 50% !important;
    background: #007bff !important;
    color: white !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    z-index: 10 !important;
    opacity: 0.9 !important;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.4) !important;
    font-size: 16px !important;
    text-decoration: none !important;
  }
  
.tb_grid_1 .top-right-buttons .ov-btn.ov-link:hover {
    background: #0056b3 !important;
    opacity: 1 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.6) !important;
  }
  
  /* 테블릿 버튼에서 기존 기호 제거 */
.tb_grid_1 .top-right-buttons .ov-btn.ov-zoom::before {
    content: none !important;
  }
  
.tb_grid_1 .top-right-buttons .ov-btn.ov-link::before {
    content: none !important;
  }
}
/**** 모바일 ****/
@media only all and (max-width:767px) {.pc_grid_1{display: none!important}
.tb_grid_1{display: none!important}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/