@charset "UTF-8";

/* ===== jQuery UI Dialog – clean layout (no titlebar, keep rounded corners, footer-close, auto scroll) ===== */

/* 반투명 하얀 오버레이 */
.ui-widget-overlay{
  background: rgba(255,255,255,0.5) !important;
  opacity: 1 !important;
  filter: none !important;
}

/* 다이얼로그 컨테이너: 둥근 모서리 유지, 그림자 제거 */
.ui-dialog{
  position: absolute;
  max-width: 100vw;
  box-shadow: none !important;  
  -webkit-box-shadow: none !important;
}

/* ===== 1) 제목 영역 숨기기(공간도 차지 X), 하지만 닫기 버튼은 재배치해서 사용 ===== */
.ui-dialog .ui-dialog-titlebar,
.ui-dialog .ui-dialog-title{ display: none !important; }

/* 상단에 투명한 드래그 영역 생성 */
.ui-dialog::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;           /* 드래그 가능한 높이 */
    background: transparent; /* 완전 투명 */
    cursor: move;           /* 마우스 커서를 드래그 모양으로 */
    z-index: 1000;          /* 다른 요소보다 위에 */
    pointer-events: auto;   /* 마우스 이벤트 활성화 */
}

/* ===== 2) 닫기 버튼을 하단 버튼 영역(오른쪽)에 배치 ===== */
/* 버튼 영역 오른쪽에 닫기 버튼이 들어갈 공간 확보 */
.ui-dialog .ui-dialog-buttonpane{
  position: relative !important;
  background: #fff !important;
  border-top: 1px solid #e5e7eb !important;
  padding: 12px 72px 12px 16px !important; /* 오른쪽 패딩을 키워 닫기버튼 자리 확보 */
  border-bottom-left-radius: 14px !important;
  border-bottom-right-radius: 14px !important;
}

/* 제목영역 안의 기본 닫기 앵커를 재활용해 하단 오른쪽에 고정 */
.ui-dialog .ui-dialog-titlebar-close{
  position: absolute !important;
  bottom: 12px !important;
  right: 16px !important;
  width: 36px !important;
  height: 36px !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 8px !important;
  z-index: 2;
}
.ui-dialog .ui-dialog-titlebar-close:hover{
  background: rgba(0,0,0,0.05) !important;
}

/* 스프라이트 아이콘 제거하고 X 문자로 */
.ui-dialog .ui-dialog-titlebar-close .ui-icon{
  background: none !important;
  width: auto !important;
  height: auto !important;
  text-indent: 0 !important;
  margin: 0 !important;
  position: static !important;
}
.ui-dialog .ui-dialog-titlebar-close::before{
  content: "✕";
  display: block;
  text-align: center;
  line-height: 36px;
  font-size: 16px;
  color: #6b7280; /* 회색 */
}
.ui-dialog .ui-dialog-titlebar-close:hover::before{ color: #111827; }

/* ===== 3) 본문: 둥근 모서리 유지 + 자동 스크롤 ===== */
.ui-dialog .ui-dialog-content{
  background: transparent !important;      /* 컨테이너 배경(#fff)이 나오도록 */
  color: #111827 !important;
  padding: 18px !important;
  border: 0 !important;
  /* 화면 높이에 따라 스크롤 자동: 버튼영역/여백 감안해서  calc(100vh - 160px) */
  max-height: fit-content !important;
  overflow: hidden !important;
  -webkit-overflow-scrolling: touch;
}

/* 이미지가 컨테이너를 넘치면 스케일/스크롤 처리, 작으면 스크롤 없음 */
.ui-dialog .ui-dialog-content img{
  display: block;
  max-width: 100%;
  height: auto;             /* 가로 기준 자동 비율 */
  width: 100%;
  /* 세로가 과하면 부모의 overflow:auto가 스크롤 처리 */
}

/* 버튼(오늘하루… 체크박스/동작 버튼) 기본 스타일 정돈 */
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset{
  float: none !important;      /* jQuery UI 기본 float 해제 */
}
.ui-dialog .ui-dialog-buttonpane{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
/* 필요하면 체크박스 쪽(왼쪽)과 버튼 묶음을 정렬 */
.ui-dialog .ui-dialog-buttonpane > *:first-child{ margin-right: auto !important; }

/* jQuery UI 버튼 톤 다운(선택) */
.ui-dialog .ui-dialog-buttonpane .ui-button{
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
  color: #111827 !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
}
.ui-dialog .ui-dialog-buttonpane .ui-button:hover{
  background: #f3f4f6 !important;
}

/* 그림자/하이라이트 등 효과 제거(보수) */
.ui-widget-shadow{ box-shadow: none !important; -webkit-box-shadow: none !important; filter: none !important; }

/* 내부 섹션 배경은 투명하게 해서 컨테이너의 반투명 배경이 보이도록 */
.ui-dialog .ui-dialog-content,
.ui-dialog .ui-dialog-buttonpane{
  background: transparent !important;
}


.ui-dialog {
	padding:0!important;
	background:transparent!important;
}


.ui-dialog .ui-dialog-content {	
	height: fit-content !important;
	background: rgba(30,38,120,1) !important;
	border-radius:2rem;
	padding:2.5rem!important;
	
}

/* 글자 선명(오늘하루 보지않기 포함) */
.ui-dialog,
.ui-dialog .ui-dialog-content,
.ui-dialog .ui-dialog-buttonpane,
.ui-dialog .ui-dialog-buttonpane label{
  text-shadow: none !important;  /* 번짐 방지 */
  border:0 !important; 
}

/* (선택) 버튼 텍스트도 하얗게 하고 싶으면 */
.ui-dialog .ui-dialog-buttonpane .ui-button{
  color: #fff !important;
}

.closeBtn {
	position:relative;	
	margin-top:1.5rem;	
}

.closeBtn .popClick {
	display:flex;
	justify-content:space-between;
	align-items:center;	
	width:100%;
}

.closeBtn a {
	font-size:1.6rem;
	color:#fff;
	font-weight:500;
	display:flex;
	align-items:center;
	gap:0.5rem;
}

.closeBtn a i {
	order: 0;
}


.popbox {
	font-size:1.6rem;
	color:#fff;
	font-weight:500;
	align-items: center;
    gap: 0.5rem;
    display:flex;
}

.popbox input[type=checkbox] {
	position: static !important;
    width: 1.6rem !important;
    height: 1.6rem !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.popbox select {
	background: rgba(255,255,255,0.1);
	font-size:1.6rem;
	color:#fff;
	font-weight:500;
	max-width:fit-content;
	width:auto;
	text-align-last:center;
	border-radius:1.5rem; padding:0.25rem 0.5rem;
}

.popbox select option {
	background-color: #f9f9f9; /* 옵션 드롭다운 배경 */
	color: #333; /* 옵션 글자 */
}


/*@media screen and (max-width: 640px){
	.ui-dialog {width:100%!important;}
}*/

@media screen and (max-width: 400px){
	.popbox {flex-direction:column;        align-items: flex-start;}
	.popbox input[type=checkbox] {    margin-left: 1.5rem !important;}
}