/* theme_u09 — theme08 bling 레이어를 u09(팜조 원본) 라이트 디자인에 맞춘다.
 *
 * 적용 범위 제한:
 *   theme08 bling 레이어는 전부 `.popup_box.all_popup` 또는 `.popup_box.register` 를 갖는다
 *   (inc_bling_layers.php: depositLayer/noticeLayer/csCenterLayer/eventLayer/mypageLayer = all_popup,
 *    csCenterinquireLayer = register).
 *   u09 자체 팝업(loginLayer · joinform · logoutLayer)은 두 클래스를 갖지 않는다.
 *   → 어떤 보정도 `.popup_box` 단독 선택자로 걸지 말 것. u09 로그인·가입 팝업까지 덮인다(실제 사고).
 *
 * [2026-09-11 정정 — 검정 배경 제거]
 *   이전 판은 이 레이어들에 어두운 셸(background:#0d0d0d / color:#e8e8e8)을 씌웠다. 그 결과
 *   고객센터 문의·목록 팝업만 검게 떴다(마스터 지적).
 *   u09 는 라이트 테마다 — common.css: `body{background:#ffffff;color:var(--color-txt-body)}`,
 *   `.popup_box{background:linear-gradient(360deg,#d0d0d0 0%,#fff 100%);border:3px solid var(--color-primary)}`,
 *   base.css: `--color-primary:#0db9b7 · --color-txt-body:#496868`.
 *   theme08 전용 클래스(.layer_head/.pop_tt/.popup_table/.popup_button/.cont_write_area/.form_textarea)는
 *   u09 common.css 에 정의가 **아예 없다**. 스타일이 없었을 뿐이지 어둡게 만들 이유는 없었다.
 *   그래서 어두운 셸을 전부 걷어내고, 없는 클래스만 u09 색·모양으로 채운다.
 */

/* ── 가입 팝업: common.css 는 .join_form 래퍼 전제, 실제 마크업은 .form_area.join_detail ── */
.popup_box.joinform .join_form,
.popup_box.joinform .form_area.join_detail {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	row-gap: 0.5rem;
}
.popup_box.joinform .join_form .form,
.popup_box.joinform .form_area.join_detail .form {
	width: calc(100% / 2 - 10px);
}
.popup_box.joinform .form_area.join_detail .button_area {
	width: 100%;
	flex: 0 0 100%;
	margin-top: 8px;
	text-align: center;
}

@media screen and (max-width: 575px) {
	.popup_box.joinform .join_form,
	.popup_box.joinform .form_area.join_detail {
		gap: 6px;
	}
	.popup_box.joinform .join_form .form,
	.popup_box.joinform .form_area.join_detail .form {
		width: calc(100% / 2 - 4px);
		margin-bottom: 8px;
	}
}

/* ═══ theme08 bling 레이어 — u09 라이트 셸 ═══ */

/* 셸 자체는 common.css `.popup_box` 의 밝은 그라디언트를 그대로 쓴다.
   내부 컨테이너는 배경을 갖지 않아야 그 그라디언트가 비친다. */
.popup_box.all_popup,
.popup_box.register {
	color: var(--color-txt-body);
}
.popup_box.all_popup .layer_content,
.popup_box.all_popup .layer_body,
.popup_box.all_popup .form_area,
.popup_box.all_popup .cont_tab_area,
.popup_box.register .layer_content,
.popup_box.register .layer_body,
.popup_box.register .form_area {
	background: transparent;
	color: inherit;
}
.popup_box.all_popup .layer_body,
.popup_box.register .layer_content {
	padding: 16px 18px 40px;
}

/* 상단 타이틀바.
   theme08 마크업은 .layer_head 에 어두운 핑크스킨 이미지를 **인라인 style** 로 박아 넣는다
   (inc_bling_layers.php $__popTitleBg = center_bg2.png · 실측 1920x599 거의 검정).
   인라인은 CSS 우선순위로 못 이기므로 여기서만 !important 로 지운다.
   이 파일은 u09 셸에서만 link 되므로 theme08/10/11/12 원본에는 영향이 없다. */
.popup_box.all_popup .layer_head {
	/* 단축속성 하나로 !important 를 걸어야 인라인 background-image 를 실제로 덮는다.
	   `background-image:none !important` 를 따로 두면 뒤따르는 비-important 단축속성의
	   그라디언트까지 같이 죽어 타이틀바가 투명해진다(2026-09-11 실측). */
	background: linear-gradient(180deg, var(--color-primary02) 0%, var(--color-primary) 100%) !important;
	border-radius: 5px 5px 0 0;
	padding: 14px 16px;
	text-align: center;
}
.popup_box.all_popup .layer_head .title {
	display: block;
	font-size: 2rem;
	font-weight: 500;
	color: #ffffff;
	text-shadow: 1px 1px 1px rgba(21, 21, 21, 0.25);
}
.popup_box.register .pop_tt {
	display: block;
	margin: 0 0 14px;
	padding: 14px 16px;
	background: linear-gradient(180deg, var(--color-primary02) 0%, var(--color-primary) 100%);
	border-radius: 5px 5px 0 0;
	text-align: center;
	font-size: 2rem;
	font-weight: 500;
	color: #ffffff;
	text-shadow: 1px 1px 1px rgba(21, 21, 21, 0.25);
}
.popup_box.all_popup .form_title h3,
.popup_box.register .form_title h3 {
	color: var(--color-txt-bodydark);
}

/* 닫기 버튼: u09 는 하단 중앙 마름모(.popup_box .close, rotate 45deg)를 쓴다.
   u09 자체 팝업은 안에 <i> 를 넣어 -45deg 로 되돌리지만 theme08 은 <span class="h-10">×</span> 다.
   되돌려주지 않으면 × 가 기울어진 채로 보인다. */
.popup_box.all_popup .close span,
.popup_box.register .close span {
	display: block;
	line-height: 1;
	transform: rotate(-45deg);
	color: #fafafa;
}

/* 목록 테이블 (.popup_table .table — 고객센터·공지 목록. u09 에 정의 없음) */
.popup_box.all_popup .popup_table .table {
	width: 100%;
	border: 1px solid var(--color-border-primary);
	border-radius: 6px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.72);
}
.popup_box.all_popup .popup_table .table .thead {
	display: flex;
	background: var(--color-primary06);
	border-bottom: 1px solid var(--color-border-primary);
}
.popup_box.all_popup .popup_table .table .thead .th {
	flex: 1 1 0;
	padding: 11px 8px;
	text-align: center;
	font-size: 1.4rem;
	font-weight: 500;
	color: var(--color-primary-dark);
}
.popup_box.all_popup .popup_table .table .thead .th:nth-child(2) {
	flex: 3 1 0;
}
.popup_box.all_popup .popup_table .table .t_item {
	display: flex;
	align-items: center;
	border-top: 1px solid var(--color-border-primary);
}
.popup_box.all_popup .popup_table .table .t_item:first-child {
	border-top: 0;
}
.popup_box.all_popup .popup_table .table .td {
	flex: 1 1 0;
	min-width: 0;
	padding: 12px 8px;
	text-align: center;
	font-size: 1.4rem;
	color: var(--color-txt-body);
	word-break: break-word;
}
.popup_box.all_popup .popup_table .table .t_item .td:nth-child(2) {
	flex: 3 1 0;
	text-align: left;
}
.popup_box.all_popup .popup_table .table .td a {
	color: var(--color-txt-bodydark);
}
.popup_box.all_popup .popup_table .table .td a:hover {
	color: var(--color-primary-sub);
	text-decoration: underline;
}
.popup_box.all_popup .popup_table .table .td.empty {
	flex: 1 1 100%;
	text-align: center;
	color: var(--color-txt-bodylight);
}
.popup_box.all_popup .popup_table .table .td .state_ing {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 7px;
	border-radius: 10px;
	background: var(--color-point-graylight);
	color: var(--color-point-graydark);
	font-size: 1.15rem;
	vertical-align: middle;
}

/* 본문·입력 (.cont_write_area / .form_textarea — u09 에 정의 없음) */
.popup_box.all_popup .cont_write_area,
.popup_box.register .cont_write_area {
	background: transparent;
	color: var(--color-txt-body);
}
.popup_box.all_popup .form_textarea,
.popup_box.register .form_textarea {
	background: #fafafa;
	border: 1px solid #dadada;
	border-radius: 8px;
	padding: 12px 14px;
	font-size: 1.4rem;
	color: var(--color-txt-body);
}
.popup_box.all_popup .form_text .input input,
.popup_box.all_popup .form_text .input textarea,
.popup_box.register .form_text .input input,
.popup_box.register .form_text .input textarea {
	background: transparent;
	border: 0;
	color: var(--color-txt-body);
}
.popup_box.register .form_text .input {
	height: auto;
	min-height: 50px;
	padding: 8px 14px;
	display: flex;
	align-items: center;
}
.popup_box.register .form_text .input textarea {
	width: 100%;
	padding: 4px 0;
	line-height: 1.6;
}

/* 고객센터 상세(답변) 본문 — 레이어 안에서 스크롤 */
.csCenterLayer .layer_body {
	padding-bottom: 40px;
}
.csCenterLayer .theme08-cs-list-actions {
	margin-top: 12px;
}
.theme08-cs-detail .theme08-cs-detail-body {
	min-height: 160px;
	max-height: 42vh;
	overflow: auto;
	padding: 14px 16px;
	line-height: 1.65;
	font-size: 1.45rem;
	word-break: break-word;
	white-space: pre-line;
}

/* 레이어 하단 버튼 (.popup_button — u09 에 정의 없음. .button_area .btn 규격에 맞춘다) */
.popup_box.all_popup .popup_button,
.popup_box.register .popup_button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: 16px;
}
.popup_box.all_popup .popup_button .btn,
.popup_box.register .popup_button .btn {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 16px;
	line-height: 1;
	font-size: 1.6rem;
	border: 0;
	border-radius: 8px;
	background-color: var(--color-primary);
	color: #fafafa;
	text-shadow: 1px 1px 1px rgba(21, 21, 21, 0.45);
	transition: all 0.3s ease;
}
.popup_box.all_popup .popup_button .btn span,
.popup_box.register .popup_button .btn span {
	color: inherit;
}
.popup_box.all_popup .popup_button .btn:hover,
.popup_box.register .popup_button .btn:hover {
	background-color: var(--color-primary-sub);
}
.popup_box.all_popup .popup_button .btn.cancel,
.popup_box.register .popup_button .btn.cancel {
	background-color: var(--color-point-graylight);
	color: var(--color-point-graydark);
	text-shadow: none;
}
.popup_box.all_popup .popup_button .btn.cancel:hover,
.popup_box.register .popup_button .btn.cancel:hover {
	background-color: #dcdcdc;
}

/* 탭 (입금/출금 등) */
.popup_box.all_popup .basic_tab li button {
	color: var(--color-txt-body);
}
.popup_box.all_popup .basic_tab li.active button {
	color: var(--color-primary-sub);
	font-weight: 500;
}

/* 문의작성 레이어는 고객센터 목록 위에 떠야 한다 */
.popup_box.register.view {
	z-index: 100001;
}

/* ── 문의작성 레이어 레이아웃 (2026-09-13) ──
   u09 common.css:3993 `.form_area` 는 `display:flex; flex-wrap:nowrap` 이다(입금·출금 폼처럼
   한 줄에 칸을 늘어놓는 용도). 문의작성 마크업(theme08/partials/inc_bling_layers.php:217)은
   그 안에 제목 · 내용 · 버튼을 세로로 쌓는 구조라, 셋이 한 행에 3등분으로 눌렸다.
   실측: 모달 624px 인데 입력칸이 각 156px, 내용 placeholder 가 여러 줄로 꺾임.
   가입 팝업은 같은 문제를 이 파일 위쪽 `.popup_box.joinform` 규칙으로 이미 보정해 두었는데
   `.register`(문의작성) 만 빠져 있었다. 색만 맞추고 레이아웃을 안 봤던 것.
   u09 common.css 에는 `.popup_box.register` 규칙이 하나도 없으므로 여기서만 정의한다. */
.popup_box.register {
	/* common.css `.popup_box` 의 `width:fit-content` 는 세로 폼에서 지나치게 좁아진다.
	   joinform(60vw/max 800px)과 같은 방식으로 폭을 고정한다. */
	width: min(92vw, 560px);
}
.popup_box.register #customForm {
	width: 100%;
}
.popup_box.register .form_area {
	flex-direction: column;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0; /* 칸 간격은 common.css `.form{margin-bottom:16px}` 가 담당 */
}
.popup_box.register .form_area > .form,
.popup_box.register .form_area > .popup_button {
	width: 100%;
}