/* theme_u09 — AJAX 오버레이 (쪽지 · 쪽지상세 · 고객센터 폴백).
 *
 * 대상: theme08/inc_scripts.php 의 openTheme09Ajax() 가 #theme08AjaxBody 안에 심는
 *       레거시 마크업 (getMemo.php / getMemoView.php / getCustom.php / getCustomView.php).
 *       그 마크업의 클래스(.modal-dialog · .bs-table · .title-panel · .btn-panel · .terms-use …)는
 *       원래 다른 테마의 CSS 에 있던 것이라 u09 에는 정의가 **없다**.
 *       theme08-fixes.css 를 통째로 link 하면 u09 전역이 깨지므로 여기서 필요한 것만 다시 그린다.
 *
 * [2026-09-11 정정] 이전 판은 이 셸을 어둡게(#12151c) 칠했다. u09 는 라이트 테마다
 *   (base.css --color-primary #0db9b7 · --color-txt-body #496868,
 *    common.css .popup_box background linear-gradient(360deg,#d0d0d0,#fff)).
 *   그래서 셸·본문·표·버튼을 전부 u09 팝업과 같은 라이트 규격으로 맞춘다.
 */

.t9-ajax-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100050;
	background: rgba(0, 0, 0, 0.65);
	align-items: center;
	justify-content: center;
	padding: 16px;
	overflow-y: auto;
}
.t9-ajax-overlay.active {
	display: flex;
}

/* 셸 — u09 .popup_box 와 같은 밝은 그라디언트 + 프라이머리 테두리 */
.t9-ajax-box {
	position: relative;
	width: 100%;
	max-width: 720px;
	max-height: 92vh;
	overflow: auto;
	background: linear-gradient(360deg, #d0d0d0 0%, #fff 100%);
	border: 3px solid var(--color-primary);
	border-radius: 8px;
	box-shadow: 2px 4px 5px 1px rgba(0, 0, 0, 0.35);
}
.t9-ajax-box.wide {
	max-width: 920px;
}
.t9-ajax-close {
	position: sticky;
	top: 0;
	float: right;
	z-index: 5;
	margin: 10px 10px 0 0;
	width: 38px;
	height: 38px;
	border: none;
	border-radius: 8px;
	background: var(--color-primary);
	color: #fafafa;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.t9-ajax-close:hover {
	background: var(--color-primary-sub);
	color: #ffffff;
}
.t9-ajax-body {
	clear: both;
	padding: 8px 18px 24px;
	color: var(--color-txt-body);
	font-size: 1.4rem;
	line-height: 1.55;
}

/* 레거시 부트스트랩 래퍼 무력화 — 셸이 이미 팝업이다 */
.t9-ajax-body .modal-dialog,
.t9-ajax-body .modal-content,
.t9-ajax-body .modal-header,
.t9-ajax-body .modal-body,
.t9-ajax-body .modal-footer {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	height: auto !important;
}

/* 타이틀 패널 */
.t9-ajax-body .modal-header {
	min-height: 52px;
	margin-bottom: 14px !important;
	display: flex;
	align-items: center;
	justify-content: center;
}
.t9-ajax-body .modal-header .title-panel {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 200px;
	max-width: 380px;
	min-height: 48px;
	padding: 10px 28px;
	border-radius: 8px;
	background: linear-gradient(180deg, var(--color-primary02) 0%, var(--color-primary) 100%);
	box-shadow: 0 3px 10px rgba(13, 185, 183, 0.25);
}
.t9-ajax-body .modal-header .title-panel .title {
	font-size: 1.8rem;
	font-weight: 500;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff;
	text-shadow: 1px 1px 1px rgba(21, 21, 21, 0.25);
	text-align: center;
}
.t9-ajax-body .modal-header .title-panel .bullets {
	display: none;
}
.t9-ajax-body .modal-body {
	padding: 0 2px 12px !important;
	color: var(--color-txt-body);
}

/* 목록 표 */
.t9-ajax-body table.bs-table,
.t9-ajax-body .bs-table {
	width: 100% !important;
	border-collapse: collapse;
	border: 1px solid var(--color-border-primary);
	border-radius: 6px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.72);
}
.t9-ajax-body .bs-table thead th {
	height: 44px;
	padding: 10px 12px !important;
	background: var(--color-primary06) !important;
	color: var(--color-primary-dark) !important;
	font-size: 1.3rem !important;
	font-weight: 500;
	text-align: center;
	border: none !important;
	border-bottom: 1px solid var(--color-border-primary) !important;
}
.t9-ajax-body .bs-table tbody td {
	padding: 11px 12px !important;
	font-size: 1.35rem !important;
	vertical-align: middle;
	text-align: center;
	color: var(--color-txt-body);
	border: none !important;
	border-top: 1px solid var(--color-border-primary) !important;
}
.t9-ajax-body .bs-table tbody tr:first-child td {
	border-top: none !important;
}
.t9-ajax-body .bs-table tbody td[colspan] {
	color: var(--color-txt-bodylight);
}
.t9-ajax-body .title-td {
	cursor: pointer;
	text-align: left !important;
	color: var(--color-txt-bodydark);
}
.t9-ajax-body .title-td:hover {
	color: var(--color-primary-sub);
	text-decoration: underline;
}
.t9-ajax-body .count-td .count-tag {
	display: inline-block;
	min-width: 26px;
	padding: 2px 7px;
	border-radius: 10px;
	background: var(--color-point-graylight);
	color: var(--color-point-graydark);
	font-size: 1.2rem;
}
.t9-ajax-body .date-td {
	color: var(--color-txt-bodylight);
	font-size: 1.25rem !important;
	white-space: nowrap;
}
.t9-ajax-body .memo-row-unread .title-td {
	font-weight: 700;
	color: var(--color-primary-dark);
}
.t9-ajax-body .memo-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 6px;
	border-radius: 50%;
	background: var(--color-point-red);
	vertical-align: middle;
}

/* 상세 본문 (쪽지 · 고객센터 답변) */
.t9-ajax-body .message-content,
.t9-ajax-body .qna-content,
.t9-ajax-body #message-detail,
.t9-ajax-body #qna-detail {
	color: var(--color-txt-body);
	line-height: 1.7;
	word-break: break-word;
}
.t9-ajax-body #message-detail,
.t9-ajax-body #qna-detail {
	min-height: 140px;
	padding: 16px 18px;
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid var(--color-border-primary);
	border-radius: 8px;
	font-size: 1.5rem;
}

/* 고객센터 안내문·배너 */
.t9-ajax-body .terms-use {
	margin-bottom: 14px;
}
.t9-ajax-body .terms-use .scroll-panel {
	max-height: 140px;
	overflow: auto;
	padding: 12px 14px;
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid var(--color-border-primary);
	border-radius: 8px;
	font-size: 1.3rem;
	line-height: 1.6;
}
.t9-ajax-body .modal-banner {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 14px 0;
	padding: 10px 14px;
	background: var(--color-primary06);
	border-radius: 8px;
	font-size: 1.3rem;
	color: var(--color-primary-dark);
}
.t9-ajax-body .modal-banner .info-icon {
	margin-right: 4px;
	color: var(--color-primary-sub);
}
.t9-ajax-body .modal-banner .ask-link {
	margin-left: 8px;
	color: var(--color-primary-sub);
	font-weight: 500;
	text-decoration: underline;
}

/* 문의 입력 */
.t9-ajax-body .form-container textarea,
.t9-ajax-body textarea#content {
	width: 100%;
	min-height: 120px;
	padding: 12px 14px;
	background: #fafafa;
	border: 1px solid #dadada;
	border-radius: 8px;
	color: var(--color-txt-body);
	font-size: 1.4rem;
	line-height: 1.6;
	resize: vertical;
}

/* 하단 버튼 (.btn-panel > .btn-inner 구조 — u09 .button_area .btn 규격에 맞춘다) */
.t9-ajax-body .modal-footer .form-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: 8px;
}
.t9-ajax-body .modal-footer button {
	flex: 0 1 200px;
	border: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
}
.t9-ajax-body .btn-panel {
	border-radius: 8px;
	background-color: var(--color-primary);
	transition: all 0.3s ease;
}
.t9-ajax-body .btn-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 16px;
	line-height: 1;
	font-size: 1.6rem;
	color: #fafafa;
	text-shadow: 1px 1px 1px rgba(21, 21, 21, 0.45);
}
.t9-ajax-body .modal-footer button:hover .btn-panel {
	background-color: var(--color-primary-sub);
}
.t9-ajax-body .cancel-btn .btn-panel {
	background-color: var(--color-point-graylight);
}
.t9-ajax-body .cancel-btn .btn-inner {
	color: var(--color-point-graydark);
	text-shadow: none;
}
.t9-ajax-body .cancel-btn:hover .btn-panel {
	background-color: #dcdcdc;
}