/*!****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[3]!./app/components/popup/ServicePopup.module.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************/
/* ========================================
   서비스 팝업 스타일
   ======================================== */

/* 오버레이 */
.ServicePopup_overlay__8mrDm {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  animation: ServicePopup_fadeIn__HrqQj 0.3s ease;
  z-index: inherit;
}

.ServicePopup_overlay__8mrDm.ServicePopup_fadeOut__gFWJc {
  animation: ServicePopup_fadeOut__gFWJc 0.3s ease forwards;
}

/* ========================================
   모달 스타일 (MODAL)
   ======================================== */
.ServicePopup_modalWrapper__n_w87 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90vw;
  max-height: 90vh;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: ServicePopup_scaleIn__4htcS 0.3s ease;
  z-index: inherit;
}

.ServicePopup_modalWrapper__n_w87.ServicePopup_scaleOut__HQ_Js {
  animation: ServicePopup_scaleOut__HQ_Js 0.3s ease forwards;
}

.ServicePopup_modalCloseBtn__Rt41g {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.ServicePopup_modalCloseBtn__Rt41g:hover {
  background: rgba(0, 0, 0, 0.8);
}

.ServicePopup_modalContent__y_frm {
  max-width: 500px;
  max-height: 70vh;
  overflow: hidden;
}

.ServicePopup_modalContent__y_frm img {
  width: 100%;
  height: auto;
  display: block;
}

.ServicePopup_modalFooter__QDip1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: #f5f5f5;
  border-top: 1px solid #e0e0e0;
}

.ServicePopup_modalFooterCloseBtn__jbU3S {
  padding: 8px 20px;
  border: none;
  border-radius: 8px;
  background: #333;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.ServicePopup_modalFooterCloseBtn__jbU3S:hover {
  background: #555;
}

/* ========================================
   하단 시트 스타일 (BOTTOM_SHEET)
   ======================================== */
.ServicePopup_bottomSheetWrapper__qpjg3 {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);
  max-height: 80vh;
  overflow: hidden;
  animation: ServicePopup_slideUp__VHKqN 0.3s ease;
  z-index: inherit;
}

.ServicePopup_bottomSheetWrapper__qpjg3.ServicePopup_slideDown__6XijN {
  animation: ServicePopup_slideDown__6XijN 0.3s ease forwards;
}

.ServicePopup_bottomSheetHeader__TeBz0 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
}

.ServicePopup_bottomSheetTitle__g9FO3 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.ServicePopup_bottomSheetContent__LJYht {
  max-height: 60vh;
  overflow-y: auto;
}

.ServicePopup_bottomSheetContent__LJYht img {
  width: 100%;
  height: auto;
  display: block;
}

.ServicePopup_bottomSheetFooter__TowAk {
  padding: 14px 20px;
  background: #f5f5f5;
  border-top: 1px solid #e0e0e0;
}

/* ========================================
   배너 스타일 (BANNER)
   ======================================== */
.ServicePopup_bannerWrapper__pwXVc {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 60px 8px 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  animation: ServicePopup_slideFromTop__Wqs6B 0.3s ease;
  z-index: inherit;
}

.ServicePopup_bannerWrapper__pwXVc.ServicePopup_bannerClosing__Fvjze {
  animation: ServicePopup_slideToTop__nIAng 0.3s ease forwards;
}

.ServicePopup_bannerContent__YDdWc {
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 60px;
  overflow: hidden;
}

.ServicePopup_bannerContent__YDdWc img {
  max-height: 60px;
  width: auto;
  display: block;
}

.ServicePopup_bannerCloseBtn__xOfbS {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.ServicePopup_bannerCloseBtn__xOfbS:hover {
  background: rgba(255, 255, 255, 0.3);
}

.ServicePopup_bannerDontShow__k4WKe {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.ServicePopup_bannerDontShow__k4WKe input {
  width: 14px;
  height: 14px;
  accent-color: #fff;
}

.ServicePopup_bannerDontShow__k4WKe span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

/* ========================================
   전체 화면 스타일 (FULLSCREEN)
   ======================================== */
.ServicePopup_fullscreenWrapper__u5T2H {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  display: flex;
  flex-direction: column;
  animation: ServicePopup_fadeIn__HrqQj 0.3s ease;
  z-index: inherit;
}

.ServicePopup_fullscreenWrapper__u5T2H.ServicePopup_fadeOut__gFWJc {
  animation: ServicePopup_fadeOut__gFWJc 0.3s ease forwards;
}

.ServicePopup_fullscreenContent__nAheO {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
}

.ServicePopup_fullscreenContent__nAheO img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.ServicePopup_fullscreenFooter__rfI39 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.8);
}

.ServicePopup_fullscreenCloseBtn__fcfHc {
  padding: 12px 40px;
  border: 2px solid #fff;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.ServicePopup_fullscreenCloseBtn__fcfHc:hover {
  background: #fff;
  color: #000;
}

/* ========================================
   HTML 콘텐츠 스타일
   ======================================== */
.ServicePopup_htmlContent__M7lJC {
  background: #fff;
  padding: 20px;
  overflow: auto;
  max-height: 70vh;
}

/* 반응형 이미지 */
.ServicePopup_responsiveImage__kwWRP {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}

/* ========================================
   공통 스타일
   ======================================== */
.ServicePopup_closeBtn__VVyX7 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #f0f0f0;
  color: #666;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.ServicePopup_closeBtn__VVyX7:hover {
  background: #e0e0e0;
  color: #333;
}

.ServicePopup_dontShowLabel__dVpRM {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.ServicePopup_dontShowLabel__dVpRM input {
  width: 16px;
  height: 16px;
  accent-color: #6366f1;
}

.ServicePopup_dontShowLabel__dVpRM span {
  font-size: 13px;
  color: #666;
}

.ServicePopup_fullscreenFooter__rfI39 .ServicePopup_dontShowLabel__dVpRM span {
  color: rgba(255, 255, 255, 0.8);
}

/* ========================================
   애니메이션
   ======================================== */
@keyframes ServicePopup_fadeIn__HrqQj {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ServicePopup_fadeOut__gFWJc {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes ServicePopup_scaleIn__4htcS {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes ServicePopup_scaleOut__HQ_Js {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
}

@keyframes ServicePopup_slideUp__VHKqN {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes ServicePopup_slideDown__6XijN {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

@keyframes ServicePopup_slideFromTop__Wqs6B {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes ServicePopup_slideToTop__nIAng {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}

/* ========================================
   반응형 (모바일)
   ======================================== */
@media (max-width: 768px) {
  /* 모달 */
  .ServicePopup_modalWrapper__n_w87 {
    max-width: 92vw;
    border-radius: 12px;
  }

  .ServicePopup_modalContent__y_frm {
    max-width: 100%;
    max-height: 60vh;
  }

  .ServicePopup_modalCloseBtn__Rt41g {
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    font-size: 16px;
  }

  .ServicePopup_modalFooter__QDip1 {
    flex-direction: column;
    gap: 12px;
    padding: 12px 16px;
  }

  .ServicePopup_modalFooterCloseBtn__jbU3S {
    width: 100%;
    padding: 12px;
  }

  /* 하단 시트 */
  .ServicePopup_bottomSheetWrapper__qpjg3 {
    max-height: 85vh;
    border-radius: 16px 16px 0 0;
  }

  .ServicePopup_bottomSheetContent__LJYht {
    max-height: 55vh;
  }

  .ServicePopup_bottomSheetHeader__TeBz0 {
    padding: 14px 16px;
  }

  .ServicePopup_bottomSheetFooter__TowAk {
    padding: 12px 16px;
  }

  /* 배너 */
  .ServicePopup_bannerWrapper__pwXVc {
    padding: 6px 50px 6px 12px;
  }

  .ServicePopup_bannerContent__YDdWc {
    max-height: 50px;
  }

  .ServicePopup_bannerContent__YDdWc img {
    max-height: 50px;
  }

  .ServicePopup_bannerDontShow__k4WKe {
    display: none; /* 모바일에서는 공간 부족으로 숨김 */
  }

  .ServicePopup_bannerCloseBtn__xOfbS {
    right: 12px;
    width: 24px;
    height: 24px;
    font-size: 12px;
  }

  /* 전체 화면 */
  .ServicePopup_fullscreenFooter__rfI39 {
    flex-direction: column;
    gap: 16px;
    padding: 16px;
  }

  .ServicePopup_fullscreenCloseBtn__fcfHc {
    width: 100%;
    padding: 14px;
  }

  /* 공통 */
  .ServicePopup_dontShowLabel__dVpRM span {
    font-size: 12px;
  }
}

/* 아주 작은 화면 */
@media (max-width: 400px) {
  .ServicePopup_modalWrapper__n_w87 {
    max-width: 95vw;
  }

  .ServicePopup_modalContent__y_frm {
    max-height: 55vh;
  }
}

