@charset "utf-8";
/* ==========================================================================
   Member module skin — modernized (ksswa.or.kr)
   기존 default_modify/css/member.css 전체 교체용
   범위: 회원정보, 정보수정, 비밀번호 재확인/변경, 로그인, 가입,
         작성 글/댓글, 스크랩, 저장함 목록 등 .xm 하위 전체
   ========================================================================== */

.xm{
	--xm-primary:#ef7d1a;          /* 기본(orange) — 컬러셋으로 덮어씀 */
	--xm-primary-dark:#d96a0b;
	--xm-primary-soft:#fff4ea;
	--xm-primary-glow:rgba(239,125,26,.15);
	--xm-border:#e5e7eb;
	--xm-border-strong:#d1d5db;
	--xm-text:#374151;
	--xm-text-light:#6b7280;
	--xm-bg-soft:#f9fafb;
	--xm-radius:10px;

	max-width:100%;
	margin:0 0 40px;
	color:var(--xm-text);
	font-size:15px;
	line-height:1.6;
	word-break:keep-all;
}
.xm *,
.xm *:before,
.xm *:after{box-sizing:border-box}

/* 이미지 공통 — 프로필 이미지 등 큰 이미지가 레이아웃을 깨지 않도록 */
.xm img{max-width:100%;height:auto}

/* --------------------------------------------------------------------------
   0. 컬러셋 (관리자 > 회원 설정 > 디자인 > 컬러셋) — common_header 의 .xm-cs-{colorset}
   -------------------------------------------------------------------------- */
.xm.xm-cs-green{
	--xm-primary:#669900;
	--xm-primary-dark:#557f00;
	--xm-primary-soft:#eef5e0;
	--xm-primary-glow:rgba(102,153,0,.18);
}
/* 레이아웃 포인트 컬러 연동: top2 헤더가 :root 에 계산해 두는 --t2-pt/-pt2/-tint 사용, 없으면 녹색 */
.xm.xm-cs-point{
	--xm-primary:var(--t2-pt, var(--point-color, #669900));
	--xm-primary-dark:var(--t2-pt2, #557f00);
	--xm-primary-soft:var(--t2-tint, #eef5e0);
	--xm-primary-glow:var(--t2-glow, rgba(102,153,0,.18));
}

/* Horizontal align helpers */
.xm .pull-right{float:right}
.xm .pull-left{float:left}

/* --------------------------------------------------------------------------
   1. 상단 탭 (회원정보 / 스크랩 / 저장함 / 작성 글 / 작성 댓글 / 포인트 내역)
   -------------------------------------------------------------------------- */
.xm .nav-tabs{
	display:flex;
	flex-wrap:wrap;
	gap:2px;
	margin:0 0 28px;
	padding:0;
	list-style:none;
	border-bottom:2px solid var(--xm-border);
}
.xm .nav-tabs li{margin:0 0 -2px}
.xm .nav-tabs li a{
	display:block;
	padding:10px 16px;
	color:var(--xm-text-light);
	font-size:14px;
	font-weight:500;
	text-decoration:none;
	border-bottom:2px solid transparent;
	transition:color .15s,border-color .15s,background .15s;
}
.xm .nav-tabs li a:hover{color:var(--xm-primary);background:var(--xm-primary-soft)}
.xm .nav-tabs li.active a{
	color:var(--xm-primary);
	font-weight:700;
	border-bottom-color:var(--xm-primary);
}

/* --------------------------------------------------------------------------
   2. 제목 / 안내 문구 / 검증 메시지
   -------------------------------------------------------------------------- */
.xm h1{
	position:relative;
	margin:0 0 20px;
	padding:0 0 0 14px;
	font-size:22px;
	font-weight:700;
	color:#1f2937;
	line-height:1.3;
	border:0 !important; /* 템플릿 인라인 border-bottom 무력화 보조 */
}
.xm h1:before{
	content:"";
	position:absolute;
	left:0;top:3px;bottom:3px;
	width:4px;
	border-radius:2px;
	background:var(--xm-primary);
}
.xm h2{margin:28px 0 12px;font-size:17px;font-weight:700;color:#1f2937}

.xm .message{
	margin:0 0 20px;
	padding:12px 16px;
	border-radius:var(--xm-radius);
	font-size:14px;
	border:1px solid var(--xm-border);
	background:var(--xm-bg-soft);
}
.xm .message p{margin:0}
.xm .message.error{background:#fef2f2;border-color:#fecaca;color:#b91c1c}
.xm .message.info{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}
.xm .message.update{background:#f0fdf4;border-color:#bbf7d0;color:#15803d}

/* --------------------------------------------------------------------------
   3. 회원 정보 (dl-horizontal) + 프로필 이미지 사이즈 제한
   -------------------------------------------------------------------------- */
.xm .dl-horizontal{
	margin:0 0 24px;
	border:1px solid var(--xm-border);
	border-radius:var(--xm-radius);
	overflow:hidden;
	background:#fff;
}
.xm .dl-horizontal:before,
.xm .dl-horizontal:after{display:table;line-height:0;content:""}
.xm .dl-horizontal:after{clear:both}
.xm .dl-horizontal dt{
	float:left;
	clear:left;
	width:180px;
	padding:13px 18px;
	font-size:14px;
	font-weight:600;
	color:var(--xm-text-light);
	text-align:left;
	background:var(--xm-bg-soft);
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.xm .dl-horizontal dt em{color:#ef4444;font-style:normal;margin-right:2px}
.xm .dl-horizontal dd{
	margin-left:180px;
	padding:13px 18px;
	border-bottom:1px solid var(--xm-border);
	min-height:50px;
}
.xm .dl-horizontal dd:last-of-type{border-bottom:0}

/* 프로필 이미지: 큰 원본을 올려도 일정 크기로 축소 표시 */
.xm .dl-horizontal dd img,
.xm .controls img,
.xm .profile_img{
	display:block;
	max-width:150px !important;
	max-height:150px !important;
	width:auto;
	height:auto;
	border:1px solid var(--xm-border);
	border-radius:var(--xm-radius);
	background:#fff;
	object-fit:contain;
}
/* 이미지네임/이미지마크 같은 작은 이미지는 원본 크기 유지 */
.xm .dl-horizontal dd img[height],
.xm .controls img[height]{border:0;border-radius:0}

/* --------------------------------------------------------------------------
   4. 폼 공통 (정보수정 / 가입 / 비밀번호 변경 등)
   -------------------------------------------------------------------------- */
.xm form{margin:0 0 24px}
.xm fieldset{padding:0;margin:0;border:0}
.xm label,
.xm input,
.xm button,
.xm select,
.xm textarea{font-weight:normal;font-size:15px;line-height:1.5}
.xm label{display:block;margin-bottom:6px}
.xm label.x_inline{display:inline-block;margin:0 14px 0 0}

.xm select,
.xm textarea,
.xm input[type="text"],
.xm input[type="password"],
.xm input[type="datetime"],
.xm input[type="datetime-local"],
.xm input[type="date"],
.xm input[type="month"],
.xm input[type="time"],
.xm input[type="week"],
.xm input[type="number"],
.xm input[type="email"],
.xm input[type="url"],
.xm input[type="search"],
.xm input[type="tel"],
.xm input[type="color"]{
	display:inline-block;
	height:42px;
	padding:8px 12px;
	margin-bottom:8px;
	color:var(--xm-text);
	vertical-align:middle;
	background:#fff;
	border:1px solid var(--xm-border-strong);
	border-radius:8px;
	box-shadow:none;
	transition:border-color .15s,box-shadow .15s;
	-webkit-appearance:none;
	appearance:none;
}
.xm select{
	padding-right:32px;
	background:#fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
}
.xm textarea,
.xm input[type="text"],
.xm input[type="password"],
.xm input[type="email"],
.xm input[type="tel"],
.xm input[type="url"],
.xm input[type="number"],
.xm input[type="search"]{width:280px;max-width:100%}
.xm textarea{height:auto;min-height:90px}
.xm textarea:focus,
.xm select:focus,
.xm input[type="text"]:focus,
.xm input[type="password"]:focus,
.xm input[type="date"]:focus,
.xm input[type="number"]:focus,
.xm input[type="email"]:focus,
.xm input[type="url"]:focus,
.xm input[type="search"]:focus,
.xm input[type="tel"]:focus{
	outline:0;
	border-color:var(--xm-primary);
	box-shadow:0 0 0 3px var(--xm-primary-glow);
}
.xm input[readonly],
.xm input[disabled]{background:var(--xm-bg-soft);color:var(--xm-text-light);cursor:default}
.xm input[readonly]:focus{border-color:var(--xm-border-strong);box-shadow:none}
.xm input[type="radio"],
.xm input[type="checkbox"]{
	width:16px;height:16px;
	margin:0 4px 2px 0;
	vertical-align:middle;
	accent-color:var(--xm-primary);
	-webkit-appearance:auto;appearance:auto;
}
.xm .help-inline,
.xm .help-block{display:block;margin:2px 0 0;font-size:13px;color:var(--xm-text-light)}

/* form-horizontal: 라벨 + 입력 2단 구성 */
.xm .form-horizontal{
	border:1px solid var(--xm-border);
	border-radius:var(--xm-radius);
	background:#fff;
	padding:8px 0;
}
.xm .form-horizontal .control-group{
	display:flex;
	align-items:flex-start;
	padding:12px 18px;
	border-bottom:1px solid var(--xm-border);
	margin:0;
}
.xm .form-horizontal .control-group:last-of-type{border-bottom:0}
.xm .form-horizontal .control-label{
	flex:0 0 180px;
	padding-top:9px;
	margin:0;
	font-size:14px;
	font-weight:600;
	color:var(--xm-text-light);
}
.xm .form-horizontal .control-label em{color:#ef4444;font-style:normal}
.xm .form-horizontal .controls{flex:1 1 auto;min-width:0}
.xm .form-horizontal .controls input:last-child,
.xm .form-horizontal .controls select:last-child{margin-bottom:0}

/* 단독 페이지의 control-group (form-horizontal 밖) */
.xm form:not(.form-horizontal) .control-group{margin:0 0 16px}
.xm form:not(.form-horizontal) .control-label{font-weight:600;font-size:14px;color:var(--xm-text-light)}

/* input-append: 입력 + 버튼 나란히 */
.xm .input-append{display:inline-flex;align-items:stretch;gap:8px;max-width:100%}
.xm .input-append input{margin-bottom:0}

/* --------------------------------------------------------------------------
   5. 버튼
   -------------------------------------------------------------------------- */
/* 레이아웃(구 부트스트랩 계열) CSS의 .btn 정의를 확실히 덮어쓰기 위해 !important 사용 */
section.xm .btn,
.xm a.btn,
.xm input.btn,
.xm button.btn{
	display:inline-block !important;
	height:auto !important;
	padding:10px 22px !important;
	margin:0 !important;
	font-size:14px !important;
	font-weight:600 !important;
	line-height:1.4 !important;
	color:var(--xm-text) !important;
	text-align:center;
	text-decoration:none !important;
	text-shadow:none !important;
	white-space:nowrap;
	cursor:pointer;
	background:#fff !important;
	border:1px solid var(--xm-border-strong) !important;
	border-radius:8px !important;
	box-shadow:none !important;
	filter:none !important;
	transition:background .15s,border-color .15s,color .15s;
	-webkit-appearance:none;appearance:none;
}
section.xm .btn:hover,
.xm a.btn:hover{background:var(--xm-bg-soft) !important;border-color:#9ca3af !important;color:#111827 !important}
section.xm .btn-inverse,
.xm a.btn-inverse,
.xm input[type="submit"].btn,
.xm button.submit,
.xm .submit{
	color:#fff !important;
	background:var(--xm-primary) !important;
	border-color:var(--xm-primary) !important;
}
section.xm .btn-inverse:hover,
.xm a.btn-inverse:hover,
.xm input[type="submit"].btn:hover,
.xm .submit:hover{background:var(--xm-primary-dark) !important;border-color:var(--xm-primary-dark) !important;color:#fff !important}

/* 회원정보 하단 버튼 그룹: 첫 버튼(회원정보 변경)은 오렌지 강조, 마지막(탈퇴)은 위험 톤 */
.xm .btnArea.btn-group .btn:first-child{
	color:#fff !important;
	background:var(--xm-primary) !important;
	border-color:var(--xm-primary) !important;
}
.xm .btnArea.btn-group .btn:first-child:hover{
	background:var(--xm-primary-dark) !important;
	border-color:var(--xm-primary-dark) !important;
}
.xm .btnArea.btn-group .btn:last-child{
	color:#b91c1c !important;
	border-color:#fca5a5 !important;
	background:#fff !important;
}
.xm .btnArea.btn-group .btn:last-child:hover{
	background:#fef2f2 !important;
	border-color:#ef4444 !important;
}

.xm .btnArea{
	margin:20px 0 0;
	padding:16px 0 0;
	border-top:1px solid var(--xm-border) !important;
}
.xm .btnArea:after{content:"";display:block;clear:both}
.xm .btn-group{display:flex;flex-wrap:wrap;gap:8px}
.xm .btnArea.btn-group{border-top:0 !important;padding-top:0}

/* --------------------------------------------------------------------------
   6. 비밀번호 재확인 페이지 (rechecked_password)
   -------------------------------------------------------------------------- */
.xm form[ruleset="recheckedPassword"]{
	max-width:420px;
	margin:8px 0 32px;
	padding:28px 26px;
	border:1px solid var(--xm-border);
	border-radius:var(--xm-radius);
	background:#fff;
	box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.xm form[ruleset="recheckedPassword"] > div{margin:0}
.xm form[ruleset="recheckedPassword"] input[type="email"],
.xm form[ruleset="recheckedPassword"] input[type="text"]{
	display:block;
	width:100%;
	margin-bottom:10px;
}
.xm form[ruleset="recheckedPassword"] .input-append{display:flex;width:100%}
.xm form[ruleset="recheckedPassword"] .input-append input[type="password"]{flex:1 1 auto;width:auto}
.xm form[ruleset="recheckedPassword"] .input-append input[type="submit"]{flex:0 0 auto}
/* h1 다음의 안내 문구 */
.xm h1 + p,
.xm .message + p{margin:0 0 16px;font-size:14px;color:var(--xm-text-light)}

/* --------------------------------------------------------------------------
   7. 목록 테이블 (작성 글 / 작성 댓글 / 스크랩 / 저장함)
   -------------------------------------------------------------------------- */
.xm .table{
	width:100%;
	margin:0 0 20px;
	border-collapse:separate;
	border-spacing:0;
	border:1px solid var(--xm-border);
	border-radius:var(--xm-radius);
	overflow:hidden;
	background:#fff;
	font-size:14px;
}
.xm .table caption{
	padding:0 2px 10px;
	font-size:13px;
	color:var(--xm-text-light);
	text-align:left;
	caption-side:top;
}
.xm .table th,
.xm .table td{
	padding:12px 14px;
	text-align:center;
	vertical-align:middle;
	border-bottom:1px solid var(--xm-border);
}
.xm .table thead th{
	background:var(--xm-bg-soft);
	font-weight:600;
	color:var(--xm-text-light);
	font-size:13px;
	white-space:nowrap;
}
.xm .table tbody tr:last-child td{border-bottom:0}
.xm .table th.title,
.xm .table td.title{text-align:left;width:auto}
/* 작성 댓글 등 td에 title 클래스가 없는 목록도 2열(제목/내용)은 좌측 정렬
   — 포인트 내역 표는 2열이 '구분'이라 중앙 정렬 유지 (제외) */
.xm .table:not(.pointhistory) tbody td:nth-child(2){text-align:left}
.xm .table tbody td:first-child,
.xm .table tbody td:last-child{white-space:nowrap}
.xm .table:not(.pointhistory) tbody td:nth-child(2) a{color:var(--xm-text);text-decoration:none}
.xm .table:not(.pointhistory) tbody td:nth-child(2) a:hover{color:var(--xm-primary);text-decoration:underline}
.xm .table td.title a{color:var(--xm-text);text-decoration:none}
.xm .table td.title a:hover{color:var(--xm-primary);text-decoration:underline}
.xm .table-striped tbody tr:nth-child(odd){background:#fff}
.xm .table-hover tbody tr:hover{background:var(--xm-primary-soft)}
.xm .table select{height:36px;padding:4px 28px 4px 10px;margin:0}
.xm .table .btn{padding:6px 12px !important;font-size:13px !important}

/* --------------------------------------------------------------------------
   8. 페이지네이션 + 검색폼
   -------------------------------------------------------------------------- */
.xm .pagination{margin:16px 0 0}
.xm .pagination:after{content:"";display:block;clear:both}
.xm .pagination form{display:flex;gap:6px;align-items:center;margin:0}
.xm .pagination form select,
.xm .pagination form input[type="text"]{height:38px;margin:0}
.xm .pagination form input[type="text"]{width:170px}
.xm .pagination form .btn{padding:8px 14px !important}
.xm .pagination ul{
	display:flex;
	gap:4px;
	margin:0;padding:0;
	list-style:none;
}
.xm .pagination ul li a{
	display:inline-block;
	min-width:36px;
	padding:7px 10px;
	font-size:13px;
	color:var(--xm-text);
	text-align:center;
	text-decoration:none;
	border:1px solid var(--xm-border);
	border-radius:8px;
	transition:background .15s,color .15s,border-color .15s;
}
.xm .pagination ul li a:hover{background:var(--xm-bg-soft);border-color:var(--xm-border-strong)}
.xm .pagination ul li.active a{
	color:#fff;
	background:var(--xm-primary);
	border-color:var(--xm-primary);
	font-weight:700;
}
.xm .pagination ul li a.direction{color:var(--xm-text-light)}
.xm .pagination-centered ul{justify-content:center;float:none}

/* --------------------------------------------------------------------------
   9. 로그인 페이지
   -------------------------------------------------------------------------- */
.xm .login-header{margin:0 0 16px}
.xm .login-body{
	max-width:420px;
	padding:28px 26px;
	border:1px solid var(--xm-border);
	border-radius:var(--xm-radius);
	background:#fff;
	box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.xm .login-body input[type="text"],
.xm .login-body input[type="email"],
.xm .login-body input[type="password"]{display:block;width:100%}
.xm .login-body .btn,
.xm .login-body input[type="submit"]{width:100%;padding:12px;font-size:15px}
.xm .login-footer{max-width:420px;margin:14px 0 0;font-size:13px}
.xm .login-footer a{color:var(--xm-text-light)}
.xm .login-footer a:hover{color:var(--xm-primary)}

/* --------------------------------------------------------------------------
   10. 기타 (약관, 저장함 내용, 스크랩 폴더 등)
   -------------------------------------------------------------------------- */
.xm .agreement{
	max-height:220px;
	overflow-y:auto;
	padding:14px 16px;
	margin:0 0 12px;
	font-size:13px;
	color:var(--xm-text-light);
	border:1px solid var(--xm-border);
	border-radius:8px;
	background:var(--xm-bg-soft);
}
.xm .savedContent{
	padding:14px 16px;
	border:1px solid var(--xm-border);
	border-radius:8px;
	background:var(--xm-bg-soft);
	font-size:14px;
}
.xm .folder_name{font-weight:600}

/* 스크랩 상단 폴더 툴바 (폴더 선택 + 폴더 추가/이름변경/삭제) */
.xm div:has(> .btnArea #scrap_folder_list){
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:10px;
	flex-wrap:wrap;
	margin:0 0 18px;
}
.xm div:has(> .btnArea #scrap_folder_list) .btnArea{
	margin:0 !important;
	padding:0 !important;
	border:0 !important;
	float:none !important;
	display:flex;
	align-items:center;
	gap:8px;
}
.xm div:has(> .btnArea #scrap_folder_list) .btn-group{display:inline-flex;gap:8px}
/* 템플릿의 잘못된 <div class="clear:both"> 빈 요소가 flex 3번째 항목이 되어
   폴더추가 버튼이 가운데로 밀리는 문제 → 숨김 처리 */
.xm div:has(> .btnArea #scrap_folder_list) > div[class="clear:both"]{display:none}
.xm #scrap_folder_list{height:42px;margin:0 !important}
.xm input.folder_name{height:42px;margin:0 !important;width:180px}
/* :has 미지원 브라우저 대비 최소 여백 */
.xm h1 + div + table{margin-top:18px}
.xm .no_profile{
	display:inline-flex;
	align-items:center;justify-content:center;
	width:40px;height:40px;
	border-radius:50%;
	background:var(--xm-bg-soft);
	border:1px solid var(--xm-border);
	color:var(--xm-text-light);
	font-style:normal;
}

/* --------------------------------------------------------------------------
   10.5 확장변수 입력 (가입폼: 전화번호 3분할, 우편번호/주소)
   -------------------------------------------------------------------------- */
/* 전화번호(tel) 3분할 — 레이아웃 쪽 .tel{width:40px}류 정의를 확실히 덮어쓰기 */
.xm .controls input.tel,
.xm .controls input[type="tel"].tel{
	width:110px !important;
	min-width:0;
	padding:8px 6px;
	text-align:center;
}

/* 우편번호/주소 (krzip) */
.xm .krZip{max-width:560px}
.xm .krZip label{
	display:block;
	min-width:0;
	margin:12px 0 4px;
	font-size:13px;
	font-weight:600;
	color:var(--xm-text-light);
}
.xm .krZip .krzip-postcode-wrap label{margin-top:0}
.xm .krZip .krzip-postcode{
	width:140px !important;
	min-width:0;
	height:42px;
	padding:8px 12px;
}
.xm .krZip .krzip-postcode-wrap .btn{
	vertical-align:middle;
	margin:0 0 8px 4px !important;
}
.xm .krZip .krzip-roadAddress,
.xm .krZip .krzip-jibunAddress,
.xm .krZip .krzip-extraAddress,
.xm .krZip .krzip-detailAddress{
	display:block;
	width:100% !important;
	min-width:0;
	height:42px;
	padding:8px 12px;
}
.xm .krZip .krzip-guide{
	height:auto;
	line-height:1.5;
	margin-top:4px;
	font-size:13px;
	color:var(--xm-text-light);
}

/* --------------------------------------------------------------------------
   11. 반응형
   -------------------------------------------------------------------------- */
@media (max-width:720px){
	.xm{font-size:14px}
	.xm h1{font-size:19px}
	.xm .nav-tabs li a{padding:9px 11px;font-size:13px}

	.xm .dl-horizontal dt{
		float:none;width:auto;
		padding:10px 14px 2px;
		background:transparent;
	}
	.xm .dl-horizontal dd{
		margin-left:0;
		padding:2px 14px 12px;
		min-height:0;
	}

	.xm .form-horizontal .control-group{flex-direction:column;gap:2px}
	.xm .form-horizontal .control-label{flex:none;padding-top:0}
	.xm .form-horizontal .controls{width:100%}
	.xm .form-horizontal .controls input[type="text"],
	.xm .form-horizontal .controls input[type="email"],
	.xm .form-horizontal .controls input[type="password"],
	.xm .form-horizontal .controls input[type="tel"],
	.xm .form-horizontal .controls select{width:100%}

	/* 전화번호 3분할은 모바일에서도 가로 유지 */
	.xm .form-horizontal .controls input.tel{width:30% !important;max-width:110px}

	.xm .pagination form{flex-wrap:wrap;float:none !important}
	.xm .pagination form input[type="text"]{flex:1 1 auto;width:auto}
	.xm .pagination ul{float:none !important;margin-top:10px;flex-wrap:wrap}

	.xm .table th,
	.xm .table td{padding:9px 8px;font-size:13px}
}

/* 2026-09-09 가입유형 고정 표시 */
.xm .jt-fixed{display:inline-flex;align-items:center;height:42px;padding:0 14px;border:1px solid var(--xm-border-strong);border-radius:8px;background:var(--xm-bg-soft);color:var(--xm-text);font-weight:600;margin-bottom:8px}

/* 2026-09-09 준회원 회비 안내 배너 (마이페이지 상단) */
.xm .jf-fee{display:flex;gap:18px;align-items:flex-start;margin:0 0 24px;padding:18px 20px;border:1px solid var(--xm-primary-soft);border-left:5px solid var(--xm-primary);border-radius:var(--xm-radius);background:var(--xm-primary-soft)}
.xm .jf-fee__ico{flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:var(--xm-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800}
.xm .jf-fee__body{flex:1 1 auto;min-width:0}
.xm .jf-fee__title{margin:0 0 4px;font-size:16px;font-weight:800;color:#1f2937}
.xm .jf-fee__title small{font-weight:600;color:var(--xm-text-light);margin-left:6px;font-size:12.5px}
.xm .jf-fee__desc{margin:0 0 10px;font-size:14px;color:var(--xm-text)}
.xm .jf-fee dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0;font-size:14px}
.xm .jf-fee dt{font-weight:700;color:var(--xm-text-light)}
.xm .jf-fee dd{margin:0;font-weight:600}
.xm .jf-fee dd.warn{color:#b91c1c;font-weight:700}
.xm .jf-fee__note{margin:10px 0 0;font-size:13px;color:#7a1d1d}
.xm .jf-fee__preview{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:6px;background:#fff3c4;color:#7a5b00;font-size:12px;font-weight:700}
@media (max-width:720px){.xm .jf-fee{flex-direction:column;gap:10px}.xm .jf-fee dl{grid-template-columns:1fr}}

/* ==========================================================================
   2026-09-09 단계별 회원가입 (signup_form.html  .js-*)
   ========================================================================== */
.xm .js{--js-line:#e2e6dd;--js-mute:#6b7280;--js-tint:var(--xm-primary-soft);--js-blue:#1a56db;--js-blue-dark:#1546b3;--js-blue-tint:#f3f7ff}
.xm .js .js-hide{display:none !important}
.xm .js .js-off{position:absolute !important;left:-99999px !important;top:0;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.xm .js{position:relative}
.xm .js-steps{display:flex;gap:10px;list-style:none;margin:0 0 24px;padding:0}
.xm .js-steps li{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--js-line);border-radius:10px;background:#fff;font-size:14.5px;color:var(--js-mute)}
.xm .js-steps b{flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:#eef1ea;color:var(--js-mute);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.xm .js-steps li.on{border-color:var(--xm-primary);color:var(--xm-primary-dark);font-weight:700}
.xm .js-steps li.on b{background:var(--xm-primary);color:#fff}
.xm .js-steps li.done b{background:var(--xm-primary);opacity:.55;color:#fff}
.xm .js-steps em{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xm .js-steps em small{display:block;font-size:12px;font-weight:400;color:var(--js-mute);margin-top:2px}
.xm .js-steps .js-tag{display:inline-block;margin-left:4px;padding:0 6px;border-radius:6px;background:var(--js-tint);color:var(--xm-primary-dark);font-size:11px;font-weight:700}
.xm .js-card{border:1px solid var(--js-line);border-radius:14px;padding:26px 28px;background:#fff}
.xm .js-card h4.js-h{font-size:19px;font-weight:800;margin:0 0 6px;padding:0;color:#1f2937}
.xm .js-lead{font-size:14.5px;color:var(--js-mute);margin:0 0 20px;line-height:1.6}
/* step1 유형 카드 */
.xm .js-types{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);align-items:stretch}
.xm .js-or{display:flex;align-items:center;justify-content:center;position:relative}
.xm .js-or:before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:#e6e9e2}
.xm .js-or span{position:relative;width:50px;height:50px;border-radius:50%;background:#f1f2ef;color:#555;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}
.xm .js-type{display:flex;flex-direction:column;border:1px solid var(--js-line);border-radius:12px;padding:22px 24px 24px;background:#fff;cursor:pointer;transition:box-shadow .15s,transform .15s}
.xm .js-type:hover{box-shadow:0 6px 20px rgba(0,0,0,.07);transform:translateY(-2px)}
.xm .js-type-head{display:flex;gap:16px;align-items:flex-start}
.xm .js-type-icon{flex:0 0 60px;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}
.xm .js-type-icon svg{width:32px;height:32px}
.xm .js-type-body{flex:1 1 auto;min-width:0}
.xm .js-type strong{display:block;font-size:19px;font-weight:800;margin:0 0 8px;line-height:1.3}
.xm .js-type-desc{margin:0;font-size:14.5px;line-height:1.7}
.xm .js-type-desc b{font-weight:800}
.xm .js-type-line{height:0;border:0;border-top:1px dotted #c9cfc2;margin:16px 0 14px}
.xm .js-type-point{display:flex;gap:10px;align-items:flex-start;margin:0 0 18px;font-size:14.5px;line-height:1.6}
.xm .js-type-point svg{flex:0 0 22px;width:22px;height:22px;margin-top:2px}
.xm .js-type-btn{margin-top:auto;width:100%;height:52px;border:0;border-radius:8px;color:#fff;font-family:inherit;font-size:17px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;transition:background .15s}
.xm .js-type-btn svg{width:24px;height:24px;transition:transform .15s}
.xm .js-type:hover .js-type-btn svg{transform:translateX(4px)}
.xm .js-type.is-branch{border-color:var(--xm-primary);background:var(--js-tint)}
.xm .js-type.is-branch .js-type-icon,.xm .js-type.is-branch .js-type-btn{background:var(--xm-primary)}
.xm .js-type.is-branch strong,.xm .js-type.is-branch .js-type-desc b,.xm .js-type.is-branch .js-type-point svg{color:var(--xm-primary-dark)}
.xm .js-type.is-branch:hover .js-type-btn{background:var(--xm-primary-dark)}
.xm .js-type.is-personal{border-color:var(--js-blue);background:var(--js-blue-tint)}
.xm .js-type.is-personal .js-type-icon,.xm .js-type.is-personal .js-type-btn{background:var(--js-blue)}
.xm .js-type.is-personal strong,.xm .js-type.is-personal .js-type-desc b,.xm .js-type.is-personal .js-type-point svg{color:var(--js-blue)}
.xm .js-type.is-personal:hover .js-type-btn{background:var(--js-blue-dark)}
.xm .js-help-box{display:flex;gap:18px;align-items:center;margin-top:22px;padding:20px 22px;border-radius:12px;background:#f4f5f2}
.xm .js-help-icon{flex:0 0 64px;width:64px;height:64px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--xm-primary);box-shadow:0 0 0 6px #eceee8}
.xm .js-help-icon svg{width:32px;height:32px}
.xm .js-help-box strong{display:block;font-size:16px;font-weight:800;color:var(--xm-primary-dark);margin:0 0 4px}
.xm .js-help-box p{margin:0;font-size:14px;line-height:1.7}
.xm .js-help-box p b{color:var(--xm-primary-dark);font-size:16px;font-weight:800}
/* step2 약관 */
.xm .js [data-step="2"] .agreement{margin:0 0 16px}
/* step3 폼 */
.xm .js-fields{border:1px solid var(--xm-border);border-radius:var(--xm-radius);background:#fff;padding:8px 0}
.xm .js-fields .control-group{display:flex;align-items:flex-start;padding:12px 18px;border-bottom:1px solid var(--xm-border);margin:0}
.xm .js-fields .control-group:last-child{border-bottom:0}
.xm .js-fields .control-label{flex:0 0 180px;padding-top:9px;margin:0;font-size:14px;font-weight:600;color:var(--xm-text-light)}
.xm .js-fields .controls{flex:1 1 auto;min-width:0}
/* 버튼 */
.xm .js-btns{display:flex;gap:10px;justify-content:center;margin-top:26px}
.xm .js-btn{min-width:150px;height:50px;padding:0 26px;border-radius:10px;font-size:15.5px;font-weight:700;font-family:inherit;cursor:pointer;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;transition:background .15s,border-color .15s;-webkit-appearance:none;appearance:none}
.xm .js-btn svg{width:20px;height:20px}
.xm .js-btn-go,.xm input.js-btn-go{background:var(--xm-primary);color:#fff}
.xm .js-btn-go:hover,.xm input.js-btn-go:hover{background:var(--xm-primary-dark);color:#fff}
.xm .js-btn-back{background:#fff;border-color:#ccc;color:#555}
.xm .js-btn-back:hover{border-color:#999;color:#222}
/* step4 완료 */
.xm .js-done{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1.3fr);gap:16px}
.xm .js-done.js-done-1col{grid-template-columns:minmax(0,520px);justify-content:center}
.xm .js-done-card{border:1px solid var(--js-line);border-radius:12px;padding:22px 20px;background:#fff}
.xm .js-done-card h5{margin:0 0 14px;font-size:17px;font-weight:800}
.xm .js-done-card h5 small{font-weight:600;color:var(--js-mute);font-size:13px;margin-left:6px}
.xm .js-done-ok{text-align:center;background:var(--js-tint);border-color:var(--js-line)}
.xm .js-done-ok .js-ok-ico{width:54px;height:54px;margin:4px auto 12px;border-radius:50%;background:var(--xm-primary);color:#fff;display:flex;align-items:center;justify-content:center}
.xm .js-done-ok .js-ok-ico svg{width:28px;height:28px}
.xm .js-done-ok strong{display:block;font-size:21px;font-weight:800;margin-bottom:8px}
.xm .js-done-ok p{margin:0 0 18px;font-size:14px;line-height:1.65;color:#555}
.xm .js-grade{display:flex;align-items:center;justify-content:center;gap:14px}
.xm .js-grade span{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;color:#555}
.xm .js-grade i{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e9efe0;color:var(--xm-primary)}
.xm .js-grade i svg{width:24px;height:24px}
.xm .js-grade span.is-now i{background:var(--xm-primary);color:#fff}
.xm .js-grade span.is-now b{color:var(--xm-primary-dark)}
.xm .js-grade .js-arrow{color:#9ab26a;font-size:20px}
.xm .js-grade small{display:block;font-size:11.5px;color:var(--js-mute)}
.xm .js-fee-tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.xm .js-fee-tbl th,.xm .js-fee-tbl td{padding:11px 13px;border:1px solid var(--js-line);text-align:left;vertical-align:top;line-height:1.55}
.xm .js-fee-tbl th{width:92px;background:var(--xm-bg-soft);font-weight:700}
.xm .js-fee-tbl td.js-acct{font-weight:700}
.xm .js-acct-note{display:block;margin-top:6px;font-size:13px;font-weight:700;color:#d0342c}
.xm .js-todo{color:#c0392b;font-weight:600}
.xm .js-proc{list-style:none;margin:0;padding:0}
.xm .js-proc li{display:flex;gap:12px;align-items:flex-start;padding:0 0 16px;position:relative}
.xm .js-proc li:last-child{padding-bottom:0}
.xm .js-proc li + li:before{content:'';position:absolute;left:24px;top:-12px;height:12px;width:2px;background:var(--js-line)}
.xm .js-proc i{flex:0 0 50px;width:50px;height:50px;border-radius:50%;border:1px solid var(--js-line);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--xm-primary)}
.xm .js-proc i svg{width:22px;height:22px}
.xm .js-proc strong{display:block;font-size:15px;margin:5px 0 2px}
.xm .js-proc span{font-size:13.5px;color:var(--js-mute);line-height:1.55}
.xm .js-notice{margin-top:16px;display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border:1px solid var(--js-line);border-radius:12px;background:var(--js-tint)}
.xm .js-notice i{flex:0 0 38px;width:38px;height:38px;border-radius:50%;border:2px solid var(--xm-primary);color:var(--xm-primary);font-style:normal;font-weight:800;font-size:19px;display:flex;align-items:center;justify-content:center}
.xm .js-notice strong{display:block;font-size:15.5px;margin:0 0 6px;color:var(--xm-primary-dark)}
.xm .js-notice ul{margin:0;padding-left:18px;font-size:14px;line-height:1.8}
.xm .js-notice b{color:var(--xm-primary-dark)}
.xm .js-done-empty{padding:34px 16px;text-align:center;border:1px dashed var(--js-line);border-radius:12px;color:var(--js-mute);font-size:14.5px;line-height:1.7}
@media (max-width:1100px){.xm .js-done{grid-template-columns:1fr 1fr}.xm .js-done .js-done-ok{grid-column:1 / -1}}
@media (max-width:900px){.xm .js-types{grid-template-columns:1fr;row-gap:12px}.xm .js-or{height:40px}.xm .js-or:before{left:0;right:0;top:50%;bottom:auto;width:auto;height:1px}}
@media (max-width:720px){
.xm .js-steps{flex-wrap:wrap;gap:6px}.xm .js-steps li{flex:1 1 100%}.xm .js-steps em{white-space:normal}
.xm .js-card{padding:18px 14px}.xm .js-type{padding:18px 16px 20px}
.xm .js-help-box{flex-direction:column;align-items:flex-start;gap:12px}
.xm .js-fields .control-group{flex-direction:column;gap:2px}.xm .js-fields .control-label{flex:none;padding-top:0}.xm .js-fields .controls{width:100%}
.xm .js-done{grid-template-columns:1fr}.xm .js-btns{flex-direction:column-reverse}.xm .js-btn{width:100%}
}
/* step2 약관: 스크롤은 본문(.text)만, 제목·동의 체크박스는 항상 보이게 */
.xm .js [data-step="2"] .agreement{max-height:none;overflow:visible;padding:0;margin:0 0 18px;border:0;background:none;font-size:inherit;color:inherit}
.xm .js [data-step="2"] .agreement .title{font-size:15.5px;font-weight:700;color:#1f2937;margin:0 0 8px}
.xm .js [data-step="2"] .agreement .text{max-height:240px;overflow-y:auto;padding:16px 18px;border:1px solid var(--xm-border);border-radius:10px;background:var(--xm-bg-soft);font-size:13.5px;line-height:1.7;color:var(--xm-text-light)}
.xm .js [data-step="2"] .agreement .text h1,.xm .js [data-step="2"] .agreement .text h2,.xm .js [data-step="2"] .agreement .text h3{font-size:15px;margin:12px 0 6px;padding:0;border:0}
.xm .js [data-step="2"] .agreement .text h1:before,.xm .js [data-step="2"] .agreement .text h2:before,.xm .js [data-step="2"] .agreement .text h3:before{display:none}
.xm .js [data-step="2"] .agreement .text p{margin:0 0 8px;font-size:13.5px}
.xm .js [data-step="2"] .agreement .confirm{margin-top:10px}
.xm .js [data-step="2"] .agreement .confirm label{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--xm-border-strong);border-radius:8px;background:#fff;font-size:15px;font-weight:700;color:#1f2937;cursor:pointer;margin:0}
.xm .js [data-step="2"] .agreement .confirm label:has(input:checked){border-color:var(--xm-primary);background:var(--xm-primary-soft);color:var(--xm-primary-dark)}
.xm .js [data-step="2"] .agreement .confirm input{width:18px;height:18px;margin:0;accent-color:var(--xm-primary)}
.xm .js-done-wrap{margin:0 0 30px}
.xm .js-done-wrap + .jf-fee{display:none}
.xm .jf-fee__act{margin-top:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.xm .jf-fee__act .js-btn{height:42px;min-width:0;padding:0 18px;font-size:14px}
.xm .jf-fee__req{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;background:#fff;border:1px solid var(--xm-primary);color:var(--xm-primary-dark);font-size:14px;font-weight:700}
.xm .jf-fee__req:before{content:"✓"}
.xm .control-group.is-feereq-focus{background:var(--xm-primary-soft);outline:2px solid var(--xm-primary);outline-offset:-2px;border-radius:8px}
.xm .jf-feereq-form{display:inline-block;margin:0}
.xm .jf-msg{margin:0 0 18px;padding:14px 18px;border-radius:10px;font-size:14.5px;line-height:1.6}
.xm .jf-msg--ok{background:var(--xm-primary-soft);border:1px solid var(--xm-primary);color:#1f2937}
.xm .jf-msg--ok b{color:var(--xm-primary-dark)}
.xm .jf-msg--err{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c}