/****************************************************
	공용 팝업 모듈 (js/ui_popup.js 와 한 쌍)
	- 다른 사이트에 이식할 때는 이 파일 + js/ui_popup.js 두 개만 그대로 복사하면 됨
	- 마크업 계약:
		<div class="ui-popup-overlay" id="my-popup">
			<div class="ui-popup-box pop-up">
				<button type="button" class="ui-popup-close">&times;</button>
				...내용...
			</div>
		</div>
	- 여닫힘은 반드시 UIPopup.open(id) / UIPopup.close(id) 로만 처리 (직접 fadeIn/toggle 금지)
	- 팝업 안에서만 쓰는 고유 CSS(인벤토리 아이템창, 레시피 등)는 전부 이 파일에서 관리한다.
	- 폰트는 KoPubWorld Batang Bold/Medium/Light 3종을 쓴다 (실제 @font-face 선언은 style.css에 있음).
****************************************************/

.ui-popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 20002;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  align-items: center;
  justify-content: center;
}

/* 모든 팝업 패널 공용 중앙 고정 기법 */
.pop-up {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
}

.ui-popup-box {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  padding: 32px 36px;
  width: 600px;
  max-width: 92vw;
  max-height: 88vh;
  font-family: "KoPubWorld Batang Medium";
}

.ui-popup-close {
  position: absolute;
  top: 23px;
  right: 23px;
  background: none;
  border: none;
  color: rgba(0, 0, 0, 0.4);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
.ui-popup-close:hover {
  color: #000;
}

.ui-popup-title {
  font-family: "KoPubWorld Batang Bold";
  font-size: 17px;
  font-weight: 800;
  margin: 0 0 18px;
  letter-spacing: 1px;
  color: #111;
}

.ui-popup-box th,
.ui-popup-box td,
.ui-popup-box label,
.ui-popup-box p {
  color: #111;
}

.ui-popup-box input[type="text"],
.ui-popup-box input[type="number"],
.ui-popup-box textarea,
.ui-popup-box select {
  font-family: "KoPubWorld Batang Medium";
}
.ui-popup-box input[type="text"]::placeholder,
.ui-popup-box textarea::placeholder {
  color: rgba(0, 0, 0, 0.35);
}

.ui-popup-box .ajax-list-box {
  background: #f5f5f5;
  border-radius: 6px;
}

/*
 * 커스텀 아트 프레임을 쓰는 팝업 공용 스킨.
 * 인벤토리 아이템창, 레시피 팝업 등 여러 곳에서 동일한 방식(박스 자체는 무색/무테두리, 배경 이미지 위에 글씨만)을 쓰도록 통일.
 * 사이즈/배경 이미지는 내용량에 따라 -lg / -sm 중 하나를 추가로 붙여서 정함 (각자 다른 아트, 이미지 원본 비율 그대로).
 */
.ui-popup-box.ui-popup-themed {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 내용이 많은 팝업 (레시피 목록 등) */
.ui-popup-box.ui-popup-themed.ui-popup-themed-lg {
  width: 1028px;
  height: 806px;
  background-image: url("https://i.imgur.com/DgbvuHD.png");
}

/* 내용이 적은 팝업 (인벤토리 아이템창 등) */
.ui-popup-box.ui-popup-themed.ui-popup-themed-sm {
  width: 466px;
  height: 342px;
  background-image: url("https://i.imgur.com/EiTSjKn.png");
}

/* 공용 버튼 스타일 */
.ui-style-btn {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: transparent;
}
.ui-style-btn.lg {
  background-image: url("https://i.imgur.com/VQeErIa.png");
  width: 215px;
  height: 60px;
}

.ui-style-btn.sm {
  background-image: url("https://i.imgur.com/VQeErIa.png");
  width: 120px;
  height: 35px;
}

/* 인벤토리 아이템창 (판매/사용/선물/상세 공용, ajax/inventory_popup.php) */
.inven-popup-viewer .ajax-list-box {
  height: auto;
  padding: 5px;
  font-size: 11px;
  word-break: keep-all;
  line-height: 1.5;
}

/* 기본 */
.inven-popup-viewer.default-form.ui-popup-themed-lg .inner-content {
  display: flex;
  flex-direction: column;
}

/* 라지사이즈용 */
.inven-popup-viewer.default-form.ui-popup-themed-lg .inner-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 100px;
}

.inven-popup-viewer.default-form .inner-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.inven-popup-viewer.default-form .inner-content .error {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  line-height: 100px;
}

.inven-popup-viewer.default-form .info {
  position: relative;
  text-align: center;
  padding: 15px 0;
}
.inven-popup-viewer.default-form .info .ui-thumb img {
  width: 64px;
  height: 64px;
}

.inven-popup-viewer.default-form .text {
  display: flex;
  position: relative;
  justify-content: center;
  flex-direction: column;
  width: 90%;
}
.inven-popup-viewer.default-form .text .title {
  font-family: "KoPubWorld Batang Bold";
  font-size: 22px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: white;
}
.inven-popup-viewer.default-form .text .title span {
  font-family: "KoPubWorld Batang Medium";
  display: inline-block;
  margin-left: 6px;
  font-size: 16px;
  font-weight: 400;
  color: wheat;
}

.inven-popup-viewer.default-form .text .item-content-box {
  height: 110px;
  overflow-y: auto;
  font-size: 16px;
  font-family: "KoPubWorld Batang Light";
  color: #c8c8c8;

  display: flex;
  justify-content: center;
}
.inven-popup-viewer.default-form .text .item-content-box div.default {
  line-height: 1.4em;
  text-align: center;
  width: 100%;
  overflow-y: auto;
  overflow-wrap: break-word;
  word-break: break-all;
}
.inven-popup-viewer.default-form .text div.effect {
  display: flex;
  padding: 8px 20px;
  background: #0000008f;
  border: 2px solid #333;
  border-radius: 23%;
  white-space: nowrap;
  text-align: center;
  position: absolute;
  bottom: 0;
  border-radius: 40px;
  color: #ffffffd9;
  width: auto;
}
.inven-popup-viewer.default-form .text div.memo {
  font-family: "KoPubWorld Batang Light";
  padding-top: 15px;
}

.inven-popup-viewer.default-form .control-box {
  display: flex;
  bottom: 0;
  justify-content: center;
  width: 100%;
  margin-top: 22px;
}
.inven-popup-viewer.default-form ul {
  display: flex;
  bottom: 0;
  width: 100%;
  gap: 15px;
  align-items: center;
  justify-content: center;
}
.inven-popup-viewer.default-form .control-box li {
  display: inline-block;
}
.inven-popup-viewer.default-form .control-box li a {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: white;
}

/* 아이템 추가 폼 (inc/add_item_form.php) */
.inven-popup-viewer.default-form .add-item-form {
  position: relative;
  height: 30%;
  margin-top: 10px;
}
.inven-popup-viewer.default-form .add-item-form .item-info {
  position: relative;
  margin-bottom: 5px;
}
.inven-popup-viewer.default-form .add-item-form .item-info label {
  display: none;
}
.inven-popup-viewer.default-form .add-item-form .item-info span {
  display: block;
  font-size: 11px;
  padding-top: 8px;
}
.inven-popup-viewer.default-form .add-item-form input,
.inven-popup-viewer.default-form .add-item-form textarea {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  resize: none;
  overflow-y: auto;
}
.inven-popup-viewer.default-form .add-item-form .item-input {
  position: relative;
  margin-bottom: 5px;
}

/* 아이템 선물(보내기) 폼 (inc/send_item_form.php) */
.inven-popup-viewer.default-form .send-item-form {
  position: relative;
  height: auto;
}
.inven-popup-viewer.default-form .send-item-form input,
.inven-popup-viewer.default-form .send-item-form select {
  width: 100%;
  box-sizing: border-box;
}
.inven-popup-viewer.default-form .send-item-form input {
  padding: 0 10px;
}
.inven-popup-viewer.default-form .send-item-form .item-input {
  position: relative;
  margin-bottom: 10px;
}
.inven-popup-viewer.default-form .send-item-form .item-input.money-input {
  display: flex;
  align-items: center;
  gap: 8px;
}
.inven-popup-viewer.default-form .send-item-form .item-input.money-input input {
  width: auto;
  flex: 1;
}

.inven-popup-viewer.default-form .add-item-form .item-input .it_content {
  height: 110px;
}