@charset "utf-8";
/*
 * Samdle Glassmorphism Design System
 * UX 변경 없이 UI만 글래스모피즘 스타일로 변환
 * 이 파일은 모든 페이지에서 마지막에 로드되어 기존 스타일을 override
 */

/* ===== 0. 공통 변수 & Body 배경 ===== */
:root {
	--glass-bg: rgba(255, 255, 255, 0.55);
	--glass-bg-strong: rgba(255, 255, 255, 0.72);
	--glass-bg-subtle: rgba(255, 255, 255, 0.35);
	--glass-border: rgba(200, 210, 220, 0.5);
	--glass-border-strong: rgba(180, 195, 210, 0.6);
	--glass-blur: blur(20px) saturate(180%);
	--glass-blur-strong: blur(28px) saturate(200%);
	--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
	--glass-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7);
	--glass-radius: 20px;
	--glass-radius-sm: 14px;
	--glass-radius-xs: 10px;
	--mint: #6BC8CB;
	--mint-dark: #4BA8AB;
	--mint-light: rgba(107, 200, 203, 0.12);
	--mint-glow: 0 4px 20px rgba(107, 200, 203, 0.3);
}

body {
	background: #fff !important;
	min-height: 100vh;
}


/* ===== 1. 로그인 박스 ===== */
.modern-login-card {
	background: var(--glass-bg-strong) !important;
	backdrop-filter: var(--glass-blur) !important;
	-webkit-backdrop-filter: var(--glass-blur) !important;
	border: 1px solid var(--glass-border-strong) !important;
	border-radius: var(--glass-radius) !important;
	box-shadow: var(--glass-shadow) !important;
}

.modern-stats {
	background: var(--glass-bg) !important;
	backdrop-filter: var(--glass-blur) !important;
	-webkit-backdrop-filter: var(--glass-blur) !important;
	border: 1px solid var(--glass-border) !important;
	border-radius: var(--glass-radius) !important;
	box-shadow: var(--glass-shadow) !important;
}

.ml-input {
	background: rgba(255, 255, 255, 0.7) !important;
	border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
	border-radius: var(--glass-radius-xs) !important;
	transition: all 0.25s ease !important;
	color: #333 !important;
}
.ml-input::placeholder {
	color: #999 !important;
}
.ml-input:focus {
	background: rgba(255, 255, 255, 0.9) !important;
	border-color: var(--mint) !important;
	box-shadow: 0 0 0 3px rgba(107, 200, 203, 0.15) !important;
}

.ml-login-btn {
	background: linear-gradient(135deg, var(--mint), var(--mint-dark)) !important;
	border-radius: var(--glass-radius-xs) !important;
	box-shadow: var(--mint-glow) !important;
	transition: all 0.25s ease !important;
}
.ml-login-btn:hover {
	box-shadow: 0 6px 24px rgba(107, 200, 203, 0.45) !important;
	transform: translateY(-1px) !important;
}

/* 로그인된 상태 카드 */
.modern-member-card {
	background: var(--glass-bg-strong) !important;
	backdrop-filter: var(--glass-blur) !important;
	-webkit-backdrop-filter: var(--glass-blur) !important;
	border: 1px solid var(--glass-border-strong) !important;
	border-radius: var(--glass-radius) !important;
	box-shadow: var(--glass-shadow) !important;
}


/* ===== 2. 안내 카드 3개 (tip-cards) ===== */
.tip-card {
	background: var(--glass-bg) !important;
	backdrop-filter: var(--glass-blur) !important;
	-webkit-backdrop-filter: var(--glass-blur) !important;
	border: 1px solid var(--glass-border) !important;
	border-radius: var(--glass-radius) !important;
	box-shadow: var(--glass-shadow) !important;
	padding: 14px 14px !important;
}
.tip-card:hover {
	background: var(--glass-bg-strong) !important;
	border-color: var(--glass-border-strong) !important;
	box-shadow: var(--glass-shadow-hover) !important;
	transform: translateY(-4px) !important;
}

.tip-card-icon {
	background: rgba(255, 255, 255, 0.45) !important;
	border: 1px solid rgba(255, 255, 255, 0.5) !important;
	border-radius: var(--glass-radius-sm) !important;
	width: 40px !important;
	height: 40px !important;
	font-size: 22px !important;
	margin-bottom: 8px !important;
}

.tip-card-title {
	font-size: 13px !important;
	margin-bottom: 4px !important;
}

.tip-card-desc {
	font-size: 11px !important;
	line-height: 1.4 !important;
}


/* ===== 3. 선생님/학생 탭 ===== */
.bar-cate {
	transition: all 0.25s ease !important;
}
.bar-cate-active {
	border-bottom: 4px solid var(--mint) !important;
	background: linear-gradient(180deg, transparent 0%, rgba(107, 200, 203, 0.06) 100%) !important;
}


/* ===== 4. 선생님/학생 리스트 테이블 ===== */

/* 메인 컨테이너 */
#main_Container {
	background: transparent !important;
}

/* 리스트를 감싸는 영역 */
.main_left {
	background: transparent !important;
}

/* 테이블 전체 */
.b_list {
	border-top: none !important;
	border-collapse: collapse !important;
}

.b_list thead {
	display: none !important;
}

/* 모든 셀 기본: 컴팩트하게 */
.b_list tbody td {
	padding-top: 3px !important;
	padding-bottom: 3px !important;
	height: auto !important;
	border-bottom: none !important;
	background: transparent !important;
}

/* 각 선생님의 첫 행 (성명 행) - 상단 여백 */
.b_list tbody td.td_top {
	padding-top: 12px !important;
}
.b_list tbody td.td_top_sub {
	padding-top: 12px !important;
}
.b_list tbody td.td_top_con {
	padding-top: 12px !important;
}

/* 과목 행 패딩 줄이기 */
.b_list tbody td.td_con {
	padding-bottom: 3px !important;
}

/* 구분선 - 각 선생님 사이 경계 */
.b_list tbody .b_list_line {
	border-bottom: 1px solid rgba(107, 200, 203, 0.25) !important;
	height: 1px !important;
	padding: 0 !important;
	background: transparent !important;
}

/* 프로필 사진 영역 */
.b_list tbody .photo {
	height: auto !important;
}

.b_list tbody .photo img {
	border-radius: var(--glass-radius-xs) !important;
	border: 2px solid rgba(107, 200, 203, 0.2) !important;
}

/* 과목 태그 */
.b_list tbody td .course_abr {
	background: rgba(107, 200, 203, 0.15) !important;
	color: var(--mint-dark) !important;
	border: 1px solid rgba(107, 200, 203, 0.25) !important;
	border-radius: 20px !important;
	padding: 1px 10px !important;
	font-weight: 500 !important;
	font-size: 12px !important;
}

.b_list tbody td .course_eng {
	background: rgba(106, 164, 249, 0.12) !important;
	color: #4A80D6 !important;
	border: 1px solid rgba(106, 164, 249, 0.2) !important;
	border-radius: 20px !important;
	padding: 1px 10px !important;
	font-weight: 500 !important;
	font-size: 12px !important;
}

/* 라벨 텍스트 (성명, 거주지, 과목 등) 가독성 */
.b_list tbody td.td_sub,
.b_list tbody td.td_top_sub {
	color: #666 !important;
	font-weight: 500 !important;
}

/* 이름 클릭 영역 */
.b_list tbody .userName {
	color: #333 !important;
	font-weight: 700 !important;
}
.b_list tbody .userName:hover {
	color: var(--mint-dark) !important;
}

/* PRE/NEXT 페이징 */
.b_list + div {
	border-radius: var(--glass-radius-sm) !important;
}


/* ===== 5. 선생님찾기 필터 패널 (Creative Chip Redesign) ===== */

/* 사이드바 전체 */
.main_right {
	background: transparent !important;
}

/* 선생님찾기 타이틀 */
.box_searchTitle {
	background: linear-gradient(135deg, var(--mint), var(--mint-dark)) !important;
	color: #fff !important;
	border-radius: var(--glass-radius-sm) var(--glass-radius-sm) 0 0 !important;
	padding: 14px 18px !important;
	border: none !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	letter-spacing: -0.3px !important;
}

/* 필터 패널 컨테이너 */
.box_searchUser {
	background: var(--glass-bg-strong) !important;
	backdrop-filter: var(--glass-blur) !important;
	-webkit-backdrop-filter: var(--glass-blur) !important;
	border: 1px solid var(--glass-border) !important;
	border-radius: 0 0 var(--glass-radius-sm) var(--glass-radius-sm) !important;
	box-shadow: var(--glass-shadow) !important;
	padding: 4px 12px 12px !important;
}

/* 각 카테고리 섹션 (dl) → flexbox wrap */
.box_searchUser_r {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 5px !important;
	align-items: center !important;
	overflow: visible !important;
	border: none !important;
	border-bottom: 1px solid rgba(107, 200, 203, 0.12) !important;
	padding: 0 0 8px !important;
	margin: 0 0 2px !important;
}
.box_searchUser_r:last-child {
	border-bottom: none !important;
	margin-bottom: 0 !important;
	padding-bottom: 4px !important;
}

/* 카테고리 헤더 (dt) → 100% 너비 */
.box_searchUser_r dt {
	flex: 0 0 100% !important;
	float: none !important;
	height: auto !important;
	border-top: none !important;
	border-bottom: none !important;
	padding: 8px 0 2px !important;
	margin: 0 !important;
	line-height: 1.4 !important;
}

/* dt 안의 카테고리 링크 → float 해제, flex 배치 */
.box_searchUser_r dt a {
	float: none !important;
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	background-image: none !important;
	background-color: transparent !important;
}

/* dt 카테고리명 텍스트 */
.box_searchUser_r dt a span {
	float: none !important;
	font-weight: 700 !important;
	color: #333 !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	height: auto !important;
	letter-spacing: -0.3px !important;
}

/* ALL 뱃지 (pseudo element) */
.box_searchUser_r dt a::after {
	content: 'ALL' !important;
	margin-left: auto !important;
	font-size: 9px !important;
	font-weight: 700 !important;
	color: #fff !important;
	background: linear-gradient(135deg, var(--mint), var(--mint-dark)) !important;
	padding: 2px 8px !important;
	border-radius: 10px !important;
	letter-spacing: 0.5px !important;
	line-height: 1.4 !important;
}
.box_searchUser_r dt a.select::after {
	background: linear-gradient(135deg, var(--mint-dark), #3a9598) !important;
	box-shadow: 0 2px 8px rgba(107, 200, 203, 0.3) !important;
}

/* 빈 spacer dd 숨김 */
.box_searchUser_r dd.ddspace,
.box_searchUser_r dd:empty {
	display: none !important;
}

/* 필터 옵션 (dd) → float 해제 */
.box_searchUser_r dd {
	float: none !important;
	height: auto !important;
	border: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* 필터 칩 링크 → 모던 pill 스타일 */
.box_searchUser_r dd a {
	display: inline-flex !important;
	align-items: center !important;
	width: auto !important;
	background-color: rgba(240, 243, 247, 0.85) !important;
	background-image: none !important;
	border: 1px solid rgba(0, 0, 0, 0.05) !important;
	border-radius: 18px !important;
	padding: 4px 13px !important;
	transition: all 0.2s ease !important;
	cursor: pointer !important;
	text-decoration: none !important;
}
.box_searchUser_r dd a:hover {
	background-color: rgba(107, 200, 203, 0.1) !important;
	border-color: rgba(107, 200, 203, 0.3) !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 2px 8px rgba(107, 200, 203, 0.1) !important;
}

/* 필터 칩 텍스트 */
.box_searchUser_r dd a span {
	height: auto !important;
	line-height: 1.5 !important;
	padding: 0 !important;
	color: #555 !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	white-space: nowrap !important;
}

/* 선택된 칩 → 민트 강조 */
.box_searchUser_r dd a.select {
	background-color: rgba(107, 200, 203, 0.18) !important;
	background-image: none !important;
	border-color: rgba(107, 200, 203, 0.4) !important;
	box-shadow: 0 2px 8px rgba(107, 200, 203, 0.12) !important;
}
.box_searchUser_r dd a.select span {
	color: var(--mint-dark) !important;
	font-weight: 700 !important;
}

/* 선택된 칩에 체크 아이콘 추가 */
.box_searchUser_r dd a.select::before {
	content: '✓' !important;
	margin-right: 4px !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	color: var(--mint-dark) !important;
}

/* 위치 상세 select 드롭다운 */
.box_searchUser_r dd.pos_group {
	flex: 0 0 100% !important;
	width: 100% !important;
}
.box_searchUser_r select {
	background: rgba(255, 255, 255, 0.7) !important;
	border: 1.5px solid rgba(107, 200, 203, 0.25) !important;
	border-radius: 10px !important;
	padding: 5px 10px !important;
	font-size: 12px !important;
	color: #333 !important;
	outline: none !important;
	transition: border-color 0.2s ease !important;
}
.box_searchUser_r select:focus {
	border-color: var(--mint) !important;
}

/* 성명 검색 섹션 */
.box_searchUser_r dd.search_name {
	flex: 0 0 100% !important;
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 6px 0 0 !important;
	border: none !important;
	height: auto !important;
	float: none !important;
}
.box_searchUser_r dd.search_name > span:first-child {
	font-weight: 700 !important;
	color: #333 !important;
	font-size: 13px !important;
	white-space: nowrap !important;
}
.box_searchUser_r dd.search_name .search_name_box {
	flex: 1 !important;
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
}
.box_searchUser_r dd input[type="text"],
.box_searchUser_r dd.search_name input[type="text"] {
	background: rgba(255, 255, 255, 0.7) !important;
	border: 1.5px solid rgba(107, 200, 203, 0.25) !important;
	border-radius: 18px !important;
	padding: 5px 14px !important;
	transition: all 0.2s ease !important;
	color: #333 !important;
	font-size: 12px !important;
	outline: none !important;
}
.box_searchUser_r dd input[type="text"]:focus {
	background: rgba(255, 255, 255, 0.95) !important;
	border-color: var(--mint) !important;
	box-shadow: 0 0 0 3px rgba(107, 200, 203, 0.12) !important;
}


/* ===== 6. CTA 배너 ===== */
.side-cta {
	backdrop-filter: blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	border-radius: var(--glass-radius) !important;
	box-shadow: var(--glass-shadow) !important;
}

.side-cta-fee {
	background: linear-gradient(135deg, rgba(107, 200, 203, 0.85), rgba(75, 168, 171, 0.85)) !important;
}
.side-cta-guide {
	background: linear-gradient(135deg, rgba(255, 159, 67, 0.85), rgba(238, 133, 32, 0.85)) !important;
}

.side-cta:hover {
	transform: translateY(-4px) !important;
	box-shadow: var(--glass-shadow-hover) !important;
	border-color: rgba(255, 255, 255, 0.4) !important;
}


/* ===== 7. 상단 배너 ===== */
.member-count-banner {
	background: rgba(37, 44, 64, 0.75) !important;
	backdrop-filter: blur(16px) saturate(150%) !important;
	-webkit-backdrop-filter: blur(16px) saturate(150%) !important;
}

/* 프로모 영역 (회원가입 CTA) */
.promo-login-row .modern-stats,
.promo-login-row .modern-login-card {
	transition: all 0.3s ease !important;
}


/* ===== 8. 푸터 ===== */
.footer-2025 {
	background: rgba(26, 26, 46, 0.88) !important;
	backdrop-filter: blur(20px) saturate(150%) !important;
	-webkit-backdrop-filter: blur(20px) saturate(150%) !important;
	border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.footer-2025 .footer-link-group a:hover {
	color: var(--mint) !important;
	text-shadow: 0 0 12px rgba(107, 200, 203, 0.4) !important;
}


/* ===== 9. Alert 팝업 (이미 responsive.css에 있지만 여기에도 포함) ===== */
/* responsive.css 의 #Alert_Overlay 스타일이 우선 적용됨 */


/* ===== 10. 공통 요소 ===== */

/* 프로모 배너 (민트색 큰 배너) - 원래 민트 그라데이션 유지 + glass blur 추가 */
.promo-banner {
	backdrop-filter: blur(12px) saturate(150%) !important;
	-webkit-backdrop-filter: blur(12px) saturate(150%) !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	border-radius: var(--glass-radius) !important;
	box-shadow: var(--glass-shadow) !important;
}
.promo-title {
	color: #fff !important;
}
.promo-desc {
	color: rgba(255, 255, 255, 0.9) !important;
}
.promo-btn {
	background: rgba(255, 255, 255, 0.95) !important;
	color: var(--mint-dark) !important;
}

/* 모바일 프로모 */
.mobile-promo {
	background: linear-gradient(135deg, rgba(107, 200, 203, 0.8), rgba(75, 168, 171, 0.8)) !important;
	backdrop-filter: blur(16px) !important;
	-webkit-backdrop-filter: blur(16px) !important;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* 스크롤바 */
::-webkit-scrollbar {
	width: 6px;
}
::-webkit-scrollbar-track {
	background: transparent;
}
::-webkit-scrollbar-thumb {
	background: rgba(107, 200, 203, 0.3);
	border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
	background: rgba(107, 200, 203, 0.5);
}


/* ===== 11. 선생님 상세정보 다이얼로그 ===== */

/* 배경 오버레이 (반투명 블러) */
.overlay_modal_backdrop {
	background: rgba(0, 0, 0, 0.35) !important;
	backdrop-filter: blur(4px) !important;
	-webkit-backdrop-filter: blur(4px) !important;
}

/* 다이얼로그 컨테이너 */
#Overlay_userDetail {
	padding: 0 !important;
	border-radius: var(--glass-radius) !important;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
	overflow: hidden !important;
}

#Overlay_userDetail.overlay {
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18) !important;
}

#Overlay_userDetail div {
	background-color: #fff !important;
}

#Overlay_userDetail .contentWrap {
	background: rgba(255, 255, 255, 0.97) !important;
	backdrop-filter: blur(20px) saturate(150%) !important;
	-webkit-backdrop-filter: blur(20px) saturate(150%) !important;
	border-radius: var(--glass-radius) !important;
	border: 1px solid rgba(200, 210, 220, 0.4) !important;
	overflow: visible !important;
	position: relative !important;
}

/* 닫기 버튼 (상단, 하단 모두) */
#Overlay_userDetail > .close {
	position: absolute !important;
	right: 16px !important;
	top: 16px !important;
	width: 32px !important;
	height: 32px !important;
	background: rgba(255, 255, 255, 0.85) !important;
	border-radius: 50% !important;
	cursor: pointer !important;
	z-index: 10 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
	transition: all 0.2s ease !important;
	font-size: 0 !important;
}
#Overlay_userDetail > .close::after {
	content: '\00D7' !important;
	font-size: 20px !important;
	font-weight: 300 !important;
	color: #666 !important;
	line-height: 1 !important;
}
#Overlay_userDetail > .close:hover {
	background: rgba(255, 255, 255, 1) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
	transform: scale(1.1) !important;
}
#Overlay_userDetail > .close:hover::after {
	color: #e74c3c !important;
}

/* 하단 닫기 버튼 숨김 (이미 상단에 있으므로) */
#Overlay_userDetail > .close:last-child {
	top: auto !important;
	bottom: -40px !important;
	right: 50% !important;
	transform: translateX(50%) !important;
	display: none !important;
}

/* 타이틀 바 */
#Overlay_userDetail .layer_box .layer_title {
	background: linear-gradient(135deg, var(--mint), var(--mint-dark)) !important;
	height: auto !important;
	padding: 26px 20px !important;
	border: none !important;
}
#Overlay_userDetail .layer_box .layer_title dt {
	color: #fff !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	padding: 0 !important;
	background: none !important;
	letter-spacing: -0.3px !important;
	line-height: 1.4 !important;
}

/* 하단 정보 바 (로그인 시간) - 공통 스타일 */
#Overlay_userDetail .layer_box .layer_ex {
	width: auto !important;
	height: auto !important;
	background-color: #f8fafb !important;
	border-top: none !important;
	border-bottom: 1px solid #e8ecef !important;
	padding: 10px 20px !important;
	font-size: 13px !important;
	color: #555 !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	line-height: 1.6 !important;
}
#Overlay_userDetail .layer_box .layer_ex span {
	color: var(--mint-dark) !important;
	font-weight: 700 !important;
}

/* 첫 번째 layer_ex → 반짝이는 TIP 배너 + FAB 버튼 */
@keyframes tipShimmer {
	0% { background-position: -200% center; }
	100% { background-position: 200% center; }
}
@keyframes tipGlow {
	0%, 100% { box-shadow: 0 0 4px rgba(107, 200, 203, 0.3); }
	50% { box-shadow: 0 0 12px rgba(107, 200, 203, 0.6), 0 0 20px rgba(107, 200, 203, 0.2); }
}
#Overlay_userDetail .layer_title + .layer_ex {
	display: flex !important;
	height: auto !important;
	padding: 8px 16px !important;
	margin: 0 !important;
	border: none !important;
	border-bottom: 1px solid rgba(107, 200, 203, 0.2) !important;
	overflow: visible !important;
	position: static !important;
	background: linear-gradient(90deg, #eafcfc, #f0fffe 40%, #d4f5f6 50%, #f0fffe 60%, #eafcfc) !important;
	background-size: 200% 100% !important;
	animation: tipShimmer 3s ease-in-out infinite, tipGlow 2s ease-in-out infinite !important;
	font-size: 12px !important;
	line-height: 1.5 !important;
	color: var(--mint-dark) !important;
	font-weight: 600 !important;
	align-items: center !important;
	gap: 6px !important;
}
#Overlay_userDetail .layer_title + .layer_ex::before {
	content: '\1F4AC  TIP  쪽지보내기 사용으로 무료 연락가능!' !important;
	font-size: 12px !important;
	white-space: nowrap !important;
	letter-spacing: -0.3px !important;
}

/* TIP 배너 안의 원본 이미지 숨김 */
#Overlay_userDetail .layer_title + .layer_ex img.tip {
	display: none !important;
}

/* 쪽지 보내기 FAB (Floating Action Button) - contentWrap 우측 하단 고정 */
#Overlay_userDetail .layer_title + .layer_ex a {
	display: flex !important;
	position: absolute !important;
	bottom: 16px !important;
	right: 16px !important;
	z-index: 20 !important;
	align-items: center !important;
	background: linear-gradient(135deg, var(--mint), var(--mint-dark)) !important;
	color: #fff !important;
	padding: 10px 22px !important;
	border-radius: 24px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	transition: all 0.25s ease !important;
	box-shadow: 0 4px 20px rgba(107, 200, 203, 0.4), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
	cursor: pointer !important;
	letter-spacing: -0.2px !important;
}
#Overlay_userDetail .layer_title + .layer_ex a:hover {
	box-shadow: 0 6px 28px rgba(107, 200, 203, 0.55), 0 3px 8px rgba(0, 0, 0, 0.1) !important;
	transform: translateY(-2px) !important;
}
#Overlay_userDetail .layer_title + .layer_ex a img {
	display: none !important;
}
#Overlay_userDetail .layer_title + .layer_ex a::before {
	content: '\2709  쪽지 보내기' !important;
	font-size: 14px !important;
}

/* 콘텐츠 영역 */
#Overlay_userDetail .layer_box .layer_cn {
	width: 100% !important;
	padding: 0 !important;
	overflow-y: auto !important;
	max-height: 65vh !important;
	scrollbar-width: thin !important;
	box-sizing: border-box !important;
}

/* 테이블 래퍼 패딩 제거 (원본 .layer_box .layer_cnt 의 padding:10px 20px 20px 20px 오버라이드) */
#Overlay_userDetail .layer_box .layer_cnt {
	padding: 0 !important;
}

/* 테이블 전체 */
#Overlay_userDetail table.layer_cnt {
	border-top: none !important;
	width: 100% !important;
	table-layout: auto !important;
	border-collapse: collapse !important;
}
/* colgroup 고정 너비 → 유연하게 */
#Overlay_userDetail table.layer_cnt col {
	width: auto !important;
}
#Overlay_userDetail table.layer_cnt col:first-child {
	width: 15% !important;
}
#Overlay_userDetail table.layer_cnt col:last-child {
	width: 22% !important;
}

/* 테이블 헤더 (라벨) */
#Overlay_userDetail table.layer_cnt th {
	background-color: #f4fafa !important;
	border-bottom: 1px solid #e8f0f0 !important;
	color: var(--mint-dark) !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	padding: 10px 16px !important;
	line-height: 1.5 !important;
	text-align: left !important;
	vertical-align: top !important;
	white-space: nowrap !important;
}

/* 테이블 셀 */
#Overlay_userDetail table.layer_cnt td {
	border-bottom: 1px solid #f0f2f4 !important;
	border-left: none !important;
	color: #444 !important;
	font-size: 13px !important;
	line-height: 1.6 !important;
	padding: 10px 16px !important;
	vertical-align: top !important;
}

/* 이름 강조 */
#Overlay_userDetail table.layer_cnt td b {
	color: #333 !important;
	font-weight: 700 !important;
}

/* 프로필 사진 */
#Overlay_userDetail table.layer_cnt td img[src*="teacher_pic"],
#Overlay_userDetail table.layer_cnt td img[src*="data/"] {
	border-radius: var(--glass-radius-sm) !important;
	border: 2px solid rgba(107, 200, 203, 0.2) !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
	object-fit: cover !important;
}

/* 성별 아이콘 → 이모지 대체 */
#Overlay_userDetail .ic_gender {
	background: none !important;
	width: auto !important;
	height: auto !important;
	font-size: 0 !important;
	vertical-align: middle !important;
	margin-left: 6px !important;
}
#Overlay_userDetail .gender-men::after {
	content: '\2642' !important;
	font-size: 16px !important;
	color: #4A90D6 !important;
}
#Overlay_userDetail .gender-women::after {
	content: '\2640' !important;
	font-size: 16px !important;
	color: #E75480 !important;
}

/* 별점 → CSS 기반 민트 별 */
#Overlay_userDetail .icon_stars_wrap {
	display: flex !important;
	align-items: center !important;
	gap: 2px !important;
}
#Overlay_userDetail .ico_star_status {
	background: none !important;
	width: auto !important;
	height: auto !important;
	font-size: 0 !important;
}
#Overlay_userDetail .ico_star_status::after {
	font-size: 18px !important;
	line-height: 1 !important;
}
#Overlay_userDetail .ico_star_status_on::after {
	content: '\2605' !important;
	color: var(--mint) !important;
}
#Overlay_userDetail .ico_star_status_half::after {
	content: '\2605' !important;
	color: var(--mint) !important;
	opacity: 0.5 !important;
}
#Overlay_userDetail .ico_star_status_off::after {
	content: '\2606' !important;
	color: #ccc !important;
}

/* 과목 아이콘 이미지 → pill 뱃지 */
#Overlay_userDetail table.layer_cnt td img[src*="icon_"] {
	border-radius: 4px !important;
	opacity: 0.85 !important;
}

/* 보기 버튼 */
#Overlay_userDetail .btn_gra {
	display: inline-flex !important;
	align-items: center !important;
	background: linear-gradient(135deg, var(--mint), var(--mint-dark)) !important;
	color: #fff !important;
	padding: 3px 12px !important;
	border-radius: 14px !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
	border: none !important;
}
#Overlay_userDetail .btn_gra span {
	color: #fff !important;
}
#Overlay_userDetail .btn_gra:hover {
	box-shadow: 0 2px 8px rgba(107, 200, 203, 0.3) !important;
	transform: translateY(-1px) !important;
}

/* 자기소개 셀 */
#Overlay_userDetail table.layer_cnt td:last-child {
	word-break: break-word !important;
}

/* 수정 링크 (관리자용) */
#Overlay_userDetail table.layer_cnt th a[href*="modify"] {
	display: inline-block !important;
	margin-top: 4px !important;
	font-size: 10px !important;
	color: var(--mint-dark) !important;
	opacity: 0.6 !important;
}


/* ===== 12. 결제 페이지 (payment) ===== */

/* 결제 페이지 배경을 흰색으로 → 카드가 삐져나온 느낌 제거 */
.page-wrapper {
	background: #fff !important;
}

/* Wrap 배경 흰색 */
#Wrap {
	background: #fff !important;
}

/* Container, Header 회색 테두리 제거 */
#Container {
	border: none !important;
}
#Header,
#Wrap-Header,
.in-hd {
	border: none !important;
	box-shadow: none !important;
}
#Wrap-Header,
#Wrap-Container {
	background: #fff !important;
}

/* promo-login-row: 상단 마진 + 자식 동일 높이 */
.promo-login-row {
	margin-top: 16px !important;
	align-items: stretch !important;
}
.promo-login-row > .modern-stats {
	display: flex !important;
	align-items: center !important;
}
.promo-login-row > .promo-banner {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
}
.promo-login-row > .header_login {
	display: flex !important;
	align-items: stretch !important;
}
.promo-login-row > .header_login .modern-member-card,
.promo-login-row > .header_login .modern-login-card {
	height: 100% !important;
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
}

/* 할인 배너 → 글래스모피즘 스타일 */
.discount-banner {
	background: linear-gradient(135deg, rgba(255, 159, 67, 0.12) 0%, rgba(255, 107, 107, 0.08) 100%) !important;
	border: 1px solid rgba(255, 159, 67, 0.2) !important;
	border-radius: var(--glass-radius) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
}
.discount-banner h3 {
	color: #e85d3a !important;
}
.discount-banner p {
	color: #666 !important;
}

/* 가격 카드 → 글래스모피즘 */
.pricing-card {
	background: var(--glass-bg-strong) !important;
	backdrop-filter: var(--glass-blur) !important;
	-webkit-backdrop-filter: var(--glass-blur) !important;
	border: 1px solid var(--glass-border) !important;
	border-radius: var(--glass-radius) !important;
	box-shadow: var(--glass-shadow) !important;
}
.pricing-card:hover {
	box-shadow: var(--glass-shadow-hover) !important;
	border-color: var(--glass-border-strong) !important;
}

/* 추천 카드 (popular) 강조 */
.pricing-card.popular {
	border-color: var(--mint) !important;
	box-shadow: 0 8px 32px rgba(107, 200, 203, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

/* BEST 뱃지 → 보이게 수정 (기존 흰색 글씨 → 민트 배경 유지, 그림자 추가) */
.popular-badge {
	background: linear-gradient(135deg, var(--mint), var(--mint-dark)) !important;
	color: #fff !important;
	font-weight: 700 !important;
	box-shadow: 0 4px 12px rgba(107, 200, 203, 0.4) !important;
}

/* 가격 색상 → 민트 */
.pricing-price {
	color: var(--mint-dark) !important;
}

/* 구매 버튼 → 민트 기반 */
.btn-purchase.btn-primary {
	background: linear-gradient(135deg, var(--mint), var(--mint-dark)) !important;
	color: #fff !important;
	box-shadow: 0 4px 16px rgba(107, 200, 203, 0.3) !important;
	border: none !important;
}
.btn-purchase.btn-primary:hover {
	box-shadow: 0 6px 24px rgba(107, 200, 203, 0.45) !important;
}
.btn-purchase.btn-secondary {
	border: 2px solid var(--mint) !important;
	color: var(--mint-dark) !important;
	background: rgba(255, 255, 255, 0.8) !important;
}
.btn-purchase.btn-secondary:hover {
	background: rgba(107, 200, 203, 0.08) !important;
}

/* 가격 아이콘 배경 */
.pricing-icon {
	background: rgba(107, 200, 203, 0.1) !important;
	border-radius: var(--glass-radius-sm) !important;
}

/* 체크 아이콘 */
.feature-check {
	background: rgba(107, 200, 203, 0.15) !important;
	color: var(--mint-dark) !important;
}

/* 결제 정보 섹션 */
.payment-info-section {
	background: rgba(248, 250, 252, 0.8) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	border: 1px solid var(--glass-border) !important;
	border-radius: var(--glass-radius) !important;
}
.info-item {
	background: var(--glass-bg-strong) !important;
	border-radius: var(--glass-radius-sm) !important;
	border: 1px solid var(--glass-border) !important;
}
.info-icon {
	background: rgba(107, 200, 203, 0.12) !important;
	color: var(--mint-dark) !important;
}

/* 결제 모달 → 글래스모피즘 */
.pay-modal {
	background: var(--glass-bg-strong) !important;
	backdrop-filter: var(--glass-blur-strong) !important;
	-webkit-backdrop-filter: var(--glass-blur-strong) !important;
	border: 1px solid var(--glass-border-strong) !important;
	border-radius: var(--glass-radius) !important;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18) !important;
}
.pay-method-item:hover,
.pay-method-item.selected {
	border-color: var(--mint) !important;
	background: rgba(107, 200, 203, 0.06) !important;
}
.btn-modal-pay {
	background: linear-gradient(135deg, var(--mint), var(--mint-dark)) !important;
	color: #fff !important;
}


/* ===== 모바일 반응형 ===== */

@media all and (max-width: 760px) {
	.tip-card {
		border-radius: var(--glass-radius-sm) !important;
	}
	.box_searchUser {
		border-radius: var(--glass-radius-sm) !important;
	}
	.modern-login-card,
	.modern-stats {
		border-radius: var(--glass-radius-sm) !important;
	}
	/* 모바일에서 필터패널 숨김 시 pseudo-element 텍스트 누출 방지 */
	.box_searchUser_r dt a::after {
		content: none !important;
	}
	.box_searchUser_r dd a.select::before {
		content: none !important;
	}
}