/* /static/css/popup.css */

/* 팝업 기본 스타일 - 전체 페이지에 영향 없도록 수정 */
.layerPopWrap {
  box-shadow: 0 0 20px rgba(0, 0, 0, .2);
  position: fixed;
  /* ← 이게 중요! */
  background: #fff;
  z-index: 1001;
  text-align: left;
  max-width: 580px;
  width: auto;
  height: auto;
  /* 전체 화면과 완전히 분리 */
  left: 50%;
  top: 100px;
  transform: translateX(-50%);
  /* 전체 레이아웃에 영향 없도록 */
  margin: 0;
  padding: 0;
}

/* 팝업이 숨겨져 있을 때는 완전히 제거 */
.layerPopWrap[style*="display: none"] {
  display: none !important;
}

/* 전체 페이지 레이아웃은 건드리지 않음 - 이 부분 제거! */
/* body, html, .warp, #contents {
    max-width: none !important;
    width: auto !important;
    position: static !important;
} */

/* 나머지 팝업 스타일들... */
.layerPopWrap .layerPopHead {
  background: #18202c;
  padding: 20px;
}

.layerPopWrap .layerPopHead h3 {
  font-size: 16px;
  color: #fff;
}

.layerPopWrap .layerPopBody {
  padding: 20px;
}

.layerPopWrap .layerPopBody .section {
  padding: 10px 0;
}

.layerPopWrap .layerPopFoot {
  padding: 10px 20px;
  border-top: 1px solid #ddd;
  background: #f4f4f4;
}

.layerPopWrap .layerPopFoot .f_left {
  float: left;
  text-align: left;
}

.layerPopWrap .layerPopFoot .f_right {
  float: right;
  text-align: left;
}

.layerPopWrap .layerPopFoot .btn-layClose {
  display: inline-block;
  border: 1px solid #ddd;
  padding: 5px 10px;
  border-radius: 3px;
}

.layerPopWrap .layerPopFoot .btn-layClose:hover {
  background: #f4f4f4;
}

.layerPopWrap .layerPopFoot:after {
  content: "";
  display: block;
  clear: both;
}

/* 특정 팝업 스타일 */
#layerPop03 {
  top: 100px;
  left: 50%;
  width: auto;
  height: auto;
}

#layerPop03 .layerPopBody {
  padding: 0;
}

#layerPop03 .layerPopFoot {
  padding: 10px 20px;
}

.popBelowContent {
  font-size: 12px;
  color: #000;
}

/* 반응형 팝업 */
@media all and (max-width: 768px) {
  #layerPop03 {
    left: 0;
    margin-left: 0px;
    width: 100%;
    top: 0;
    position: fixed;
  }

  #layerPop03 .layerPopBody {
    overflow-y: auto;
    height: auto;
  }

  #layerPop03 .layerPopBody img {
    width: 100%;
  }
}