@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");

body.page_member_charge {
	font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

.page_member_charge .head_member_charge {
	margin-bottom: 1.25rem;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid #e2e8f0;
}

.page_member_charge .title_member_charge {
	font-size: 1.25rem;
	font-weight: 800;
	color: #0f172a;
}

.page_member_charge .desc_member_charge {
	margin-top: 0.35rem;
	font-size: 0.8125rem;
	color: #64748b;
}

.page_member_charge .banner_charge_login {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.85rem 1rem;
	border-radius: 0.5rem;
	background: #eef2ff;
	border: 1px solid #c7d2fe;
}

.page_member_charge .btn_charge_login {
	display: inline-flex;
	padding: 0.5rem 1rem;
	border-radius: 0.35rem;
	background: #6668af;
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 700;
	text-decoration: none;
}

.page_member_charge .section_member_charge {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 0.5rem;
	padding: 1.25rem;
}

.page_member_charge .panel_charge_balance {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	margin-bottom: 1.25rem;
	padding: 1rem 1.1rem;
	border-radius: 0.5rem;
	background: #f5f5fa;
	border: 1px solid #e2e8f0;
}

.page_member_charge .label_charge_balance {
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	color: #475569;
}

.page_member_charge .value_charge_balance {
	display: block;
	font-size: 1.075rem;
	font-weight: 800;
	color: #6668af;
}

.page_member_charge .table_charge_form {
	width: 100%;
	border-collapse: collapse;
}

.page_member_charge .table_charge_form th,
.page_member_charge .table_charge_form td {
	padding: 0.85rem 0.5rem;
	border-bottom: 1px solid #eef2f7;
	vertical-align: top;
	text-align: left;
}

.page_member_charge .table_charge_form th {
	width: 7.5rem;
	font-size: 0.875rem;
	font-weight: 700;
	color: #334155;
}

.page_member_charge .group_charge_amount_input {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin-bottom: 0.75rem;
}

.page_member_charge .input_charge_amount {
	width: 100%;
	max-width: 14rem;
	padding: 0.65rem 0.85rem;
	border: 1px solid #cbd5e1;
	border-radius: 0.35rem;
	font-size: 1rem;
	font-weight: 700;
}

.page_member_charge .unit_charge_amount {
	font-size: 0.875rem;
	color: #64748b;
}

.page_member_charge .group_charge_amount_buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.page_member_charge .btn_charge_add,
.page_member_charge .btn_charge_reset {
	padding: 0.45rem 0.85rem;
	border: 1px solid #cbd5e1;
	border-radius: 0.35rem;
	background: #fff;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #334155;
	cursor: pointer;
}

.page_member_charge .btn_charge_add:hover,
.page_member_charge .btn_charge_reset:hover {
	border-color: #6668af;
	color: #6668af;
}

.page_member_charge .badge_charge_method {
	display: inline-flex;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	background: #eef2ff;
	color: #4b4d8a;
	font-size: 0.8125rem;
	font-weight: 700;
}

.page_member_charge .group_charge_submit {
	margin-top: 1.5rem;
	text-align: center;
}

.page_member_charge .btn_charge_submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 12rem;
	padding: 0.9rem 1.5rem;
	border: none;
	border-radius: 0.45rem;
	background: #6668af;
	color: #fff;
	font-size: 1rem;
	font-weight: 800;
	text-decoration: none;
	cursor: pointer;
}

.page_member_charge .btn_charge_link_secondary {
	display: inline-block;
	margin-top: 0.75rem;
	font-size: 0.8125rem;
	font-weight: 700;
	color: #6668af;
	text-decoration: underline;
}

.page_member_charge .desc_charge_submit {
	margin-top: 0.65rem;
	font-size: 0.75rem;
	color: #64748b;
}

body.is_charge_amount_modal_open {
	overflow: hidden;
}

.modal_charge_amount_adjust {
	position: fixed;
	inset: 0;
	z-index: 1300;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.modal_charge_amount_adjust.hidden {
	display: none;
}

.modal_charge_amount_adjust .backdrop_modal_charge_amount_adjust {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
}

.modal_charge_amount_adjust .panel_modal_charge_amount_adjust {
	position: relative;
	z-index: 1;
	width: min(100%, 22rem);
	padding: 1.5rem 1.25rem 1.25rem;
	border-radius: 0.75rem;
	background: #fff;
	box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2);
	text-align: center;
}

.modal_charge_amount_adjust .title_modal_charge_amount_adjust {
	font-size: 1rem;
	font-weight: 800;
	color: #0f172a;
}

.modal_charge_amount_adjust .message_modal_charge_amount_adjust {
	margin: 1rem 0 0;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.6;
	color: #334155;
}

.modal_charge_amount_adjust .value_modal_charge_amount_adjust {
	display: block;
	margin-top: 0.5rem;
	padding: 0;
	font-size: 1.125rem;
	font-weight: 800;
	color: #6668af;
	background: transparent;
}

.modal_charge_amount_adjust .actions_modal_charge_amount_adjust {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1.25rem;
}

.modal_charge_amount_adjust .btn_modal_charge_amount_cancel,
.modal_charge_amount_adjust .btn_modal_charge_amount_confirm {
	min-width: 6.5rem;
	padding: 0.55rem 1rem;
	border-radius: 0.35rem;
	font-size: 0.8125rem;
	font-weight: 700;
	cursor: pointer;
}

.modal_charge_amount_adjust .btn_modal_charge_amount_cancel {
	border: 1px solid #cbd5e1;
	background: #fff;
	color: #475569;
}

.modal_charge_amount_adjust .btn_modal_charge_amount_confirm {
	border: none;
	background: #6668af;
	color: #fff;
}

.page_member_charge .section_charge_history {
	margin-top: 1.25rem;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 0.5rem;
	padding: 1.25rem;
}

.page_member_charge .head_charge_history {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #eef2f7;
}

.page_member_charge .title_charge_history {
	font-size: 1rem;
	font-weight: 800;
	color: #0f172a;
}

.page_member_charge .count_charge_history {
	font-size: 0.75rem;
	font-weight: 700;
	color: #64748b;
}

.page_member_charge .wrap_charge_history_table {
	overflow-x: auto;
}

.page_member_charge .table_charge_history {
	width: 100%;
	min-width: 28rem;
	border-collapse: collapse;
}

.page_member_charge .table_charge_history th,
.page_member_charge .table_charge_history td {
	padding: 0.7rem 0.5rem;
	border-bottom: 1px solid #eef2f7;
	text-align: center;
	font-size: 0.8125rem;
}

.page_member_charge .table_charge_history th {
	font-weight: 700;
	color: #475569;
	background: #f8fafc;
}

.page_member_charge .table_charge_history td {
	color: #334155;
}

.page_member_charge .col_charge_history_amount {
	font-weight: 700;
	color: #6668af;
}

.page_member_charge .badge_charge_history_status {
	display: inline-flex;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
}

.page_member_charge .badge_charge_history_status.is_paid {
	background: #ecfdf5;
	color: #047857;
}

.page_member_charge .badge_charge_history_status.is_pending {
	background: #fff7ed;
	color: #c2410c;
}

.page_member_charge .badge_charge_history_status.is_cancelled {
	background: #f1f5f9;
	color: #64748b;
}

.page_member_charge .msg_charge_history_empty {
	margin: 1.5rem 0 0.5rem;
	text-align: center;
	font-size: 0.8125rem;
	color: #64748b;
}

.page_member_charge .msg_charge_history_empty.hidden {
	display: none;
}

.page_member_charge .pagination_charge_history {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid #eef2f7;
}

.page_member_charge .pagination_charge_history[hidden] {
	display: none;
}

.page_member_charge .btn_page_charge_history {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.15rem;
	height: 2.15rem;
	padding: 0 0.5rem;
	border: 1px solid #e2e8f0;
	border-radius: 0.45rem;
	background: #fff;
	font-size: 0.8125rem;
	font-weight: 700;
	color: #64748b;
	cursor: pointer;
}

.page_member_charge .btn_page_charge_history:hover:not(:disabled):not(.is_active) {
	border-color: #6668af;
	color: #6668af;
}

.page_member_charge .btn_page_charge_history.is_active {
	background: #6668af;
	border-color: #6668af;
	color: #fff;
}

.page_member_charge .btn_page_charge_history:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.page_member_charge .is_charge_mobile_only {
	display: none;
}

.page_member_charge .label_charge_field {
	margin-bottom: 0.4rem;
	font-size: 0.875rem;
	font-weight: 700;
	color: #334155;
}

.page_member_charge .label_charge_field.is_charge_mobile_only {
	display: none;
}

.page_member_charge .select_charge_amount_preset,
.page_member_charge .select_charge_method {
	width: 100%;
	padding: 0.65rem 0.85rem;
	border: 1px solid #cbd5e1;
	border-radius: 0.35rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #334155;
	background: #fff;
}

.page_member_charge .select_charge_method:disabled {
	color: #334155;
	opacity: 1;
	-webkit-text-fill-color: #334155;
}

@media (max-width: 639px) {
	.page_member_charge .section_member_charge {
		padding: 1rem;
	}

	.page_member_charge .table_charge_form,
	.page_member_charge .table_charge_form tbody,
	.page_member_charge .table_charge_form tr,
	.page_member_charge .table_charge_form td {
		display: block;
		width: 100%;
	}

	.page_member_charge .table_charge_form th,
	.page_member_charge .table_charge_form td {
		padding: 0;
		border-bottom: none;
	}

	.page_member_charge .col_charge_form_label_pc {
		display: none;
	}

	.page_member_charge .is_charge_pc_only {
		display: none;
	}

	.page_member_charge .is_charge_mobile_only {
		display: block;
	}

	.page_member_charge .is_charge_mobile_only .label_charge_field,
	.page_member_charge .label_charge_field.is_charge_mobile_only {
		display: block;
	}

	.page_member_charge .field_charge_amount_preset,
	.page_member_charge .field_charge_amount_input,
	.page_member_charge .field_charge_method {
		margin-bottom: 1rem;
	}

	.page_member_charge .row_charge_method td {
		padding-top: 0.25rem;
		border-top: 1px solid #eef2f7;
	}

	.page_member_charge .group_charge_amount_input {
		margin-bottom: 0;
	}

	.page_member_charge .input_charge_amount {
		max-width: none;
	}

	.page_member_charge .btn_charge_submit {
		width: 100%;
		min-width: 0;
	}
}