/* =========================================================
  스코프: 이 위젯 컨테이너 안에서만 적용
  컨테이너 클래스 .YJM_2010_2 은 HTML 루트에 반드시 감싸 주세요.
  예) <div class="YJM_2010_2"> ... 위젯 전체 ... </div>
========================================================= */

/* ---------------- Layout: 박스/그리드 ---------------- */
/**** pc ****/
@media only all and (min-width:768px) {
  .YJM_2010_2 .wg_boxin{
    width:100%; float:left;background:#fff!important; 
    padding:clamp(20px, calc(3.947vw + 4.211px), 80px);
    display:flex; flex-direction:row; border-radius:20px;
  }
  .YJM_2010_2 .wg_boxin .wg_stit_box{
    width:100%; float:left;
    flex:0 0 clamp(250px, calc(9.868vw + 210.526px), 400px);
    padding-top:20px;
  }

  .YJM_2010_2 .wg_boxin .wg_boxinin{
    width:100%; float:left; flex:1 1 auto;
    display:grid; grid-template-columns:repeat(3, 1fr);
    gap:clamp(10px, calc(1.316vw + 4.737px), 30px);
  }
  .YJM_2010_2 .wg_boxin .wg_boxinin .wg_boxininin{
    width:100%; float:left;
    padding:clamp(20px, calc(1.974vw + 12.105px), 50px);
    border-radius:20px;  background-color:#f6f6f6;
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    cursor:pointer;
  }
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
  .YJM_2010_2 .wg_boxin{
    width:100%; float:left; background:#fff; 
    padding:clamp(20px, calc(3.947vw + 4.211px), 80px);
    border-radius:15px;
  }
  .YJM_2010_2 .wg_boxin .wg_stit_box{ width:100%; float:left; margin-bottom:30px; }

  .YJM_2010_2 .wg_boxin .wg_boxinin{
    width:100%; float:left; flex:1 1 auto;
    display:grid; grid-template-columns:repeat(2, 1fr);
    gap:clamp(10px, calc(1.316vw + 4.737px), 30px);
  }
  .YJM_2010_2 .wg_boxin .wg_boxinin .wg_boxininin{
    width:100%; float:left; padding:15px;
    border-radius:20px;background:#f6f6f6;
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    cursor:pointer;
  }
}

/* 카드 내부 이미지/텍스트 */
.YJM_2010_2 .wg_boxin .wg_boxinin .wg_boxininin .wg_img1{
  width:clamp(60px, calc(2.632vw + 49.474px), 100px);
  aspect-ratio:1/1; float:left; display:flex; justify-content:center; align-items:center;
  box-sizing:border-box; margin-bottom:20px;
}
.YJM_2010_2 .wg_boxin .wg_boxinin .wg_boxininin .wg_img1 img{
  width:100%; height:100%; object-fit:cover; display:block;
}
@media only all and (min-width:768px){
  .YJM_2010_2 .wg_boxinin .wg_boxininin .wg_tx1{
    width:100%; float:left; text-align:center; color:#333;
    font-size:calc(var(--tx-sm-size)*1.2); font-weight:700;
  }
}
@media only all and (max-width:767px){
  .YJM_2010_2 .wg_boxinin .wg_boxininin .wg_tx1{
    width:100%; float:left; text-align:center; color:#333;
    font-size:calc(var(--tx-sm-size)*1)!important; font-weight:700;
  }
}

/* ---------------- Modal: 레이어/카드 ---------------- */
.YJM_2010_2 .wg_modal{
  position:fixed; inset:0; display:none; z-index:99999999999;
}
.YJM_2010_2 .wg_modal[aria-hidden="false"]{ display:block; }
.YJM_2010_2 .wg_modal__backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.55);
}
.YJM_2010_2 .wg_modal__card{
  position:relative; z-index:1;
  width:min(640px, 92vw);
  margin:10% auto;
  background:#fff; border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  height:auto; 
}

/* 모달 닫기(우상단 원형 X) */
.YJM_2010_2 .btn_close_header{
  position:absolute; right:-20px; top:-20px;
  width:50px; height:50px; border-radius:50%;
  border:none; cursor:pointer; background:#FF8A00; color:#fff; font-size:22px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; z-index:2;
}

/* 상단 리본/헤더 */
.YJM_2010_2 .wg_modal__ribbon{
  position:relative; height:84px; background:#BFF2BF;
}
.YJM_2010_2 .wg_modal__ribbon:after{
  content:""; position:absolute; left:0; right:0; bottom:-24px; height:48px; background:#BFF2BF;
  border-bottom-left-radius:50% 100%; border-bottom-right-radius:50% 100%;
}
.YJM_2010_2 .wg_modal__ribbon .dot{ position:absolute; left:24px; top:22px; width:8px; height:8px; border-radius:50%; background:#5EC45E; }
.YJM_2010_2 .wg_modal__ribbon .ribbon_label{ position:absolute; left:40px; top:16px; font-weight:700; color:#2a6b2a; font-size:14px; }

.YJM_2010_2 .wg_modal__header{
  width:100%; float:left; position:relative; z-index:1;
  display:flex; align-items:center; gap:18px;
  padding:40px clamp(20px, 3.5vw, 36px) 12px;
  background:#ccf0c3!important; height:120px; border-radius:20px 20px 0 0;
}
.YJM_2010_2 .wg_modal__header:before{
  width:100%; height:40px; content:""; position:absolute; left:0; bottom:-40px;
  background:#ccf0c3!important; border-radius:0 0 100% 100%;
}
.YJM_2010_2 .wg_modal__header .header_left{ flex:0 0 auto; display:flex; align-items:center; }
.YJM_2010_2 .wg_modal__header .header_main{ flex:1 1 auto; }
.YJM_2010_2 .wg_modal__header .header_main .wg_img1{ width:100px; position:absolute; right:30px; top:80px; }

.YJM_2010_2 .modal_title_top{ width:100%; float:left; display:flex; flex-direction:row; gap:15px; }
.YJM_2010_2 .modal_title_top .tx1{ width:auto; float:left; font-size:calc(var(--tx-sm-size)*1); flex:0 0 auto; color:var(--secondary); font-weight:700; white-space:nowrap; margin-bottom:10px; }
.YJM_2010_2 .modal_title_top .line{ width:100%; float:left; border-bottom:1px solid var(--secondary); height:12px; position:relative; flex:1 1 auto; }
.YJM_2010_2 .modal_title_top .line:before{ width:10px; height:10px; border-radius:100%; background:var(--secondary); position:absolute; left:-5px; top:5px; content:""; }

.YJM_2010_2 .modal_title{ margin:0; font-size:calc(var(--tit-md-size)*0.9); font-weight:800; color:#111; }

/* 컨텐츠/슬라이드 */
.YJM_2010_2 .wg_modal__content{ width:100%; float:left; height:auto; margin-top:100px; padding:0 40px; }
.YJM_2010_2 .modalSwiper{ width:100%; float:left; }
.YJM_2010_2 .wg_modal__content .swiper-wrapper{ width:100%; float:left; min-height:300px; }
.YJM_2010_2 .slide_inner{ width:100%; float:left; font-size:16px; line-height:1.75; color:#111; }

/* 푸터 + 네비 + 진행바 */
.YJM_2010_2 .wg_modal__footer{
  display:flex; justify-content:space-between; align-items:center; padding:10px 28px 20px;
}
.YJM_2010_2 .circle_btn{
  width:50px; height:50px; border-radius:50%;
  border:1px solid #ddd; background:#f3f3f9; font-size:40px; cursor:pointer;
}
.YJM_2010_2 .count{ font-size:calc(var(--tx-sm-size) * 0.9); color:#333; margin-left:12px; }
.YJM_2010_2 .no-data{ padding:20px; color:#666; text-align:center; }
.YJM_2010_2 .wg_modal__footer .line{ width:100%; height:1px; position:relative; background:#333; }

/* 진행바 */
.YJM_2010_2 .progressbar{
  flex:1 1 auto; padding:0 16px; display:flex; align-items:center;
}
.YJM_2010_2 .progressbar-track{
  position:relative; width:100%; height:4px; background:#e5e7eb; border-radius:999px; overflow:hidden;
}
.YJM_2010_2 .progressbar-fill{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background:#1d66c2; border-radius:999px; transition:width .25s ease;
}