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

.xm{
	--xm-primary:#ef7d1a;          /* 사이트 오렌지 톤 */
	--xm-primary-dark:#d96a0b;
	--xm-primary-soft:#fff4ea;
	--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}

/* 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 rgba(239,125,26,.15);
}
.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}
}