/**
 * PT 회원관리 앱 공통 스타일
 *
 * 파일 위치: pt-member-child/assets/css/ptm-style.css
 *
 * 모든 page-pt-*.php / page-*.php 템플릿이 공통으로 사용하는 레이아웃,
 * 사이드바, 카드, 테이블, 폼 스타일을 모아둔 파일입니다.
 * inc/ptm-sidebar.php (functions.php에서 enqueue) 에서 공통 로드합니다.
 *
 * 새 페이지를 만들 때 이미 있는 클래스(.ptm-card, .ptm-table, .ptm-badge 등)를
 * 재사용하면 페이지마다 <style> 태그를 또 만들 필요가 없습니다.
 */

/* -----------------------------------------------------------
   레이아웃 (사이드바 + 메인) - 모든 페이지 공통
----------------------------------------------------------- */
.ptm-layout {
	display: flex;
	min-height: 90vh;
	min-width: 0; /* 2026-07-15 - 워드프레스 테마의 상위 래퍼가 flex나 grid일 경우 같은 min-width:auto
		문제가 한 단계 더 위에서도 발생할 수 있어 안전장치로 추가 (.ptm-main 수정만으로 안 해결된 경우 대비) */
	background: #F7F8FA;
}

.ptm-main {
	flex: 1;
	min-width: 0; /* 2026-07-15 - flex item 기본값(min-width:auto)이 내용물(넓은 테이블)보다
		좁아지길 거부해서, 넓은 화면에서 본문 전체가 테이블 크기만큼 밀려나던 버그 수정.
		이게 없으면 안쪽 .ptm-table-scroll의 가로스크롤바가 먼저 사라지고, 실제로는
		창을 더 넓혀야(최대화해야) 밀려난 본문이 다 보이는 이상한 상태가 됨. */
	padding: 32px;
}

.ptm-title {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 20px;
	color: #1A1A1A;
}

/* -----------------------------------------------------------
   사이드바 색상 - CSS 변수로 모아둠
   나중에 색감을 바꾸고 싶을 때 이 변수 값들만 고치면 사이드바 전체가
   한꺼번에 바뀝니다 (2026-06-28, 모닝빵님 요청 - "또 바꾸게 될 수도 있으니").
   지금 적용된 색은 "딥 블루 슬레이트" - 본문의 블루 포인트 컬러(#5B8DEF)를
   짙게 우려낸 톤으로, 검정처럼 강하지 않으면서 무게감은 유지합니다.
----------------------------------------------------------- */
:root {
	--ptm-sidebar-bg: #1E3A5F;
	--ptm-sidebar-text: #C2D2E5;
	--ptm-sidebar-text-muted: #9FB3CC;
	--ptm-sidebar-brand-text: #F0F4FA;
	--ptm-sidebar-hover-bg: #28456E;
	--ptm-sidebar-active-bg: #5B9BF0;
	--ptm-sidebar-active-text: #15263B;
	--ptm-sidebar-divider: #355276;
	--ptm-sidebar-group-label: #7E97B5;
	--ptm-sidebar-logout: #E8978F;
}

/* -----------------------------------------------------------
   사이드바 - inc/ptm-sidebar.php 의 ptm_render_sidebar() 마크업
----------------------------------------------------------- */
.ptm-sidebar {
	width: 220px;
	background: var(--ptm-sidebar-bg);
	color: #fff;
	padding: 24px 16px;
	flex-shrink: 0;
}

.ptm-sidebar-brand {
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 4px;
	color: var(--ptm-sidebar-brand-text);
}

.ptm-sidebar-user {
	font-size: 12px;
	color: var(--ptm-sidebar-text-muted);
	margin-bottom: 24px;
}

.ptm-nav-item {
	display: block;
	padding: 10px 12px;
	border-radius: 8px;
	color: var(--ptm-sidebar-text);
	text-decoration: none;
	font-size: 14px;
	margin-bottom: 2px;
}

.ptm-nav-item:hover {
	background: var(--ptm-sidebar-hover-bg);
	color: #fff;
}

.ptm-nav-item.is-active {
	background: var(--ptm-sidebar-active-bg);
	color: var(--ptm-sidebar-active-text);
	font-weight: 600;
}

.ptm-nav-divider {
	border-top: 1px solid var(--ptm-sidebar-divider);
	margin: 12px 0;
}

.ptm-nav-group-label {
	font-size: 11px;
	color: var(--ptm-sidebar-group-label);
	padding: 16px 12px 6px;
	margin-top: 8px;
	border-top: 1px solid rgba(255,255,255,0.1);
}

.ptm-nav-logout {
	margin-top: 24px;
	color: var(--ptm-sidebar-logout);
}

/* 공지사항 메뉴처럼 라벨 옆에 안 읽은 개수 배지를 붙여야 하는 nav 항목 전용
   (2026-07-07 추가 - 기본 .ptm-nav-item은 display:block이라 배지를 오른쪽 끝에
   붙이려면 flex로 바꿔야 함) */
.ptm-nav-item-flex { display: flex; align-items: center; justify-content: space-between; }
.ptm-nav-badge {
	background: #E5484D;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	padding: 3px 7px;
	border-radius: 10px;
	min-width: 10px;
	text-align: center;
}

/* -----------------------------------------------------------
   버튼 - 페이지 전반에서 재사용
----------------------------------------------------------- */
.ptm-btn {
	background: #5B8DEF;
	color: #fff;
	border: none;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	border-radius: 8px;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 600;
}

/* a 태그에 ptm-btn 적용 시 Astra 테마 링크 스타일 덮어씌움 방지 (2026-07-21) */
a.ptm-btn,
a.ptm-btn:visited,
a.ptm-btn:hover,
a.ptm-btn:focus,
a.ptm-btn:active {
	color: #fff !important;
	text-decoration: none !important;
}

.ptm-btn-primary {
	background: #5B8DEF;
	color: #fff;
}

.ptm-btn-sm {
	padding: 8px 16px;
	font-size: 13px;
	border-radius: 6px;
	text-decoration: none;
	display: inline-block;
}

/* -----------------------------------------------------------
   텍스트 링크형 보조 버튼 - 목록의 "수정/완료/노쇼/취소/비번초기화" 등
   가벼운 동작에 공통으로 사용. <button>과 <a> 둘 다에 쓰이므로,
   워드프레스 부모 테마가 <button>에 적용하는 기본 스타일(배경색이 칠해진
   사각형 버튼 모양)을 확실히 덮어쓰도록 선택자를 강화했습니다.
   (2026-06-28: 이 클래스가 공통 파일이 아니라 개별 page-*.php 안에만
   인라인으로 정의되어 있어서, 다른 페이지에서는 정의 자체가 없어 테마 기본
   버튼 모양 그대로 보이던 버그가 있었음 - 이 자리로 통합해서 해결)
----------------------------------------------------------- */
button.ptm-btn-link,
a.ptm-btn-link {
	background: none !important;
	border: none !important;
	color: #5B8DEF;
	font-size: 13px;
	cursor: pointer;
	text-decoration: underline;
	padding: 0 !important;
	margin-right: 10px;
	font-family: inherit;
	line-height: 1.4;
	vertical-align: baseline;
	display: inline-block;
}
button.ptm-btn-link:hover,
a.ptm-btn-link:hover {
	color: #4A7BDB;
}
button.ptm-btn-link.ptm-btn-link-muted,
a.ptm-btn-link.ptm-btn-link-muted {
	color: #999;
}
button.ptm-btn-link.ptm-btn-link-muted:hover,
a.ptm-btn-link.ptm-btn-link-muted:hover {
	color: #666;
}

/* 목록의 "수정/비번초기화/비활성화" 같은 여러 액션을 한 줄에 늘어놓는 영역.
   화면이 좁아져서 줄바꿈이 일어날 때도 버튼들이 다닥다닥 붙어 보이지 않도록
   가로/세로 간격을 모두 줍니다 (2026-06-28 - 트레이너 관리 화면에서
   .ptm-btn-link가 page-pt-sessions.php에만 정의되어 있어 다른 페이지에서는
   테마 기본 버튼 모양으로 보이고, 줄바꿈 시 간격도 없어 버튼이 붙어보이던
   문제를 함께 해결). 일정/세션 화면은 기존 .ptm-session-row-actions를 그대로
   쓰고 있으므로 이 클래스는 그 외 페이지에서 새로 쓸 때 사용합니다.*/
.ptm-row-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
}
.ptm-row-actions .ptm-btn-link {
	margin-right: 0; /* 부모의 gap이 간격을 담당하므로 중복 방지 */
}

/* -----------------------------------------------------------
   카드 (대시보드 요약 지표)
----------------------------------------------------------- */
.ptm-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 32px;
}

.ptm-card {
	background: #fff;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* 공지사항 카드처럼 <a>로 클릭 가능한 카드를 만들 때 밑줄이 안 보이게 (2026-07-07 추가) */
a.ptm-card {
	display: block;
	text-decoration: none;
}

.ptm-card-label {
	font-size: 13px;
	color: #888;
	margin-bottom: 8px;
}

.ptm-card-value {
	font-size: 24px;
	font-weight: 700;
	color: #1A1A1A;
}

/* -----------------------------------------------------------
   섹션 박스 (대시보드 리스트, 회원 목록 테이블 등)
----------------------------------------------------------- */
.ptm-section {
	background: #fff;
	border-radius: 12px;
	padding: 20px 24px;
	margin-bottom: 20px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.ptm-section-flush {
	padding: 0;
	overflow: hidden;
}

.ptm-section-title {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 12px;
}

/* 섹션 제목 옆에 붙는 작은 보조 설명. 비슷하게 생긴 섹션이 여러 개일 때
   (예: "예정된 수업 일정" vs "지난 수업 기록") 트레이너가 혼동하지 않도록
   제목만으로는 부족한 맥락을 짧게 보충합니다. (2026-06-28 추가) */
.ptm-section-subtitle {
	font-size: 12px;
	font-weight: 400;
	color: #999;
	margin-left: 8px;
}

.ptm-empty {
	color: #999;
	font-size: 14px;
}

/* -----------------------------------------------------------
   리스트 (대시보드 오늘 일정, 잔여횟수 부족 등)
----------------------------------------------------------- */
.ptm-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ptm-list-item {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid #F0F0F0;
	font-size: 14px;
}

.ptm-list-item:last-child {
	border-bottom: none;
}

.ptm-list-time {
	color: #5B8DEF;
	font-weight: 600;
	width: 60px;
}

.ptm-list-name {
	font-weight: 600;
	color: #1A1A1A;
}

.ptm-list-count {
	color: #999;
	font-size: 13px;
	margin-top: 12px;
}

.ptm-list-badge {
	font-size: 12px;
	padding: 2px 10px;
	border-radius: 12px;
}

/* -----------------------------------------------------------
   카드/섹션 색상 틴트 유틸리티 (2026-07-07 추가)
   흰 배경 카드만 나열되면 정보 위계가 안 보인다는 피드백에 따라 도입.
   .ptm-card 또는 .ptm-section 어디에든 붙여 쓸 수 있는 범용 유틸리티로,
   대시보드에서는 요약 카드와 그 아래 상세 목록 섹션에 같은 색을 짝지어 줘서
   "이 카드 → 이 목록"이라는 관계가 시각적으로 보이게 합니다.
   (page-pt-dashboard.php 37/38번 섹션 참고, 39번 섹션에서 도입)
----------------------------------------------------------- */
.ptm-tint-blue   { background: #E6F1FB; }
.ptm-tint-amber  { background: #FAEEDA; }
.ptm-tint-coral  { background: #FAECE7; }
.ptm-tint-teal   { background: #E1F5EE; }
.ptm-tint-purple { background: #EEEDFE; }
.ptm-tint-pink   { background: #FBEAF0; }
.ptm-tint-gray   { background: #F1EFE8; }

.ptm-tint-blue .ptm-card-label     { color: #185FA5; }
.ptm-tint-blue .ptm-card-value     { color: #042C53; }
.ptm-tint-amber .ptm-card-label    { color: #854F0B; }
.ptm-tint-amber .ptm-card-value    { color: #412402; }
.ptm-tint-coral .ptm-card-label    { color: #993C1D; }
.ptm-tint-coral .ptm-card-value    { color: #4A1B0C; }
.ptm-tint-teal .ptm-card-label     { color: #0F6E56; }
.ptm-tint-teal .ptm-card-value     { color: #04342C; }
.ptm-tint-purple .ptm-card-label   { color: #534AB7; }
.ptm-tint-purple .ptm-card-value   { color: #26215C; }
.ptm-tint-pink .ptm-card-label     { color: #993556; }
.ptm-tint-pink .ptm-card-value     { color: #4B1528; }
.ptm-tint-gray .ptm-card-label     { color: #5F5E5A; }
.ptm-tint-gray .ptm-card-value     { color: #2C2C2A; }
.ptm-tint-gray .ptm-card-sublabel  { color: #888780; }

/* 카드 아래 상세 목록 섹션과 짝지을 때, 목록 왼쪽 보더도 같은 색 계열로 맞춰서
   연결감을 더 뚜렷하게 줍니다 (기본 .ptm-section .ptm-list 회색 보더 위에 덮어씀) */
.ptm-tint-blue.ptm-section .ptm-list   { border-left-color: #85B7EB; }
.ptm-tint-amber.ptm-section .ptm-list  { border-left-color: #EF9F27; }
.ptm-tint-coral.ptm-section .ptm-list  { border-left-color: #F0997B; }
.ptm-tint-teal.ptm-section .ptm-list   { border-left-color: #5DCAA5; }
.ptm-tint-purple.ptm-section .ptm-list { border-left-color: #AFA9EC; }
.ptm-tint-pink.ptm-section .ptm-list   { border-left-color: #ED93B1; }

/* -----------------------------------------------------------
   페이지 헤더 (제목 + 우측 액션 버튼)
----------------------------------------------------------- */
.ptm-page-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

/* -----------------------------------------------------------
   검색/필터 바 (회원 목록 등)
----------------------------------------------------------- */
.ptm-filter-bar {
	display: flex;
	flex-wrap: wrap; /* 2026-07-13 - 정렬/방향 드롭다운 추가로 컨트롤이 늘어나 좁은 화면에서 줄바꿈 필요 */
	gap: 8px;
	margin-bottom: 16px;
	align-items: center;
}

.ptm-filter-input {
	flex: 1;
	min-width: 160px; /* flex-wrap 상태에서 너무 좁아지지 않도록 */
	max-width: 280px;
	padding: 9px 12px;
	border: 1px solid #DDD;
	border-radius: 8px;
	font-size: 14px;
}

.ptm-filter-select {
	padding: 9px 12px;
	border: 1px solid #DDD;
	border-radius: 8px;
	font-size: 14px;
	flex-shrink: 0; /* 찌그러져서 안의 글자가 세로로 쪼개지는 것 방지 */
}

.ptm-filter-clear {
	font-size: 13px;
	color: #888;
	text-decoration: underline;
	white-space: nowrap; /* "초기화" 글자가 세로로 쪼개지던 문제 수정 */
	flex-shrink: 0;
}

/* 2026-07-13 - 회원상태 필터를 단일선택(select)에서 다중선택(체크박스)으로 변경
   ("만료만 빼고 활성+휴면 같이 보기" 요청 대응)
   2026-07-16 - <fieldset>으로 만들었더니 flex 레이아웃 안에서 폭 계산이 깨져
   (fieldset의 잘 알려진 크로스브라우저 버그) 체크박스가 세로로 쌓이던 문제 발견 -
   <div role="group">로 교체하고, 아래 스타일도 그에 맞춰 정리 */
.ptm-filter-checkboxes {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border: 1px solid #DDD;
	border-radius: 8px;
	font-size: 14px;
	flex-shrink: 0;
	flex-wrap: nowrap;
	white-space: nowrap;
}

.ptm-filter-checkboxes-legend {
	font-size: 12px;
	color: #888;
	white-space: nowrap;
}

.ptm-filter-checkboxes label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
	cursor: pointer;
	flex-shrink: 0;
}

.ptm-filter-checkboxes input[type="checkbox"] {
	flex-shrink: 0;
}

/* -----------------------------------------------------------
   테이블 (회원 목록 등)
----------------------------------------------------------- */
.ptm-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.ptm-table thead th {
	text-align: left;
	padding: 12px 20px;
	background: #FAFBFC;
	color: #888;
	font-weight: 600;
	font-size: 12px;
	border-bottom: 1px solid #EEE;
	position: sticky; /* 2026-07-15 - 상하 스크롤 시 헤더 고정용. 스크롤 컨테이너에
		높이 제한(max-height)이 없는 표는 이 속성이 있어도 실제로 스크롤이 안 생기니
		다른 화면에 영향 없음 - 세로 스크롤이 필요한 표(.ptm-table-scroll-vertical)에서만 작동 */
	top: 0;
	z-index: 3;
}

.ptm-table tbody td {
	padding: 14px 20px;
	border-bottom: 1px solid #F4F4F5;
}

.ptm-table-row {
	cursor: pointer;
}

.ptm-table-row:hover {
	background: #FAFBFF;
}

.ptm-table-name {
	font-weight: 600;
	color: #1A1A1A;
}

/* -----------------------------------------------------------
   테이블 가로 스크롤 + 첫 번째 컬럼 고정 (틀고정)
   컬럼이 많아 모바일 화면보다 테이블이 넓어질 때, 그냥 잘려서 안 보이던
   문제를 막기 위한 가로 스크롤 래퍼입니다. 이름 컬럼은 스크롤해도 항상
   왼쪽에 고정되어 보입니다 (9-2번 섹션의 세로 틀고정과 같은 원리,
   방향만 가로로 적용 - 2026-06-28).
----------------------------------------------------------- */
.ptm-table-scroll {
	overflow-x: auto;
	width: 100%;
}

/* 2026-07-15 - 회원목록 요청으로 추가: 데이터가 많아지면 창 전체가 스크롤되어 헤더가
   같이 밀려 올라가 항목이 헷갈리는 문제 - 이 클래스를 쓰면 표 영역 안에서만 세로 스크롤이
   생기고 헤더(위)와 이름 컬럼(왼쪽)은 고정됨. 다른 화면의 기존 .ptm-table-scroll에는
   영향 없도록 별도 modifier 클래스로 분리 (회원목록에만 적용) */
.ptm-table-scroll-vertical {
	max-height: 65vh;
	overflow-y: auto;
}

.ptm-table-sticky-col {
	min-width: 640px; /* 컬럼이 너무 좁게 쪼그라들지 않도록 최소 너비 보장 */
}

.ptm-table-sticky-cell {
	position: sticky;
	left: 0;
	z-index: 2;
	background: #fff; /* sticky는 배경색이 있어야 스크롤되는 다른 셀이 밑으로 안 비칩니다 */
	box-shadow: 2px 0 4px rgba(0,0,0,0.04); /* 고정된 컬럼이라는 걸 시각적으로 살짝 구분 */
}

.ptm-table thead .ptm-table-sticky-cell {
	background: #FAFBFC; /* 헤더 행은 헤더 배경색에 맞춤 */
	z-index: 4; /* 2026-07-15 - 가로+세로 고정이 겹치는 모서리 셀이라 다른 sticky 요소들보다 위에 있어야 함 */
}

.ptm-table-row:hover .ptm-table-sticky-cell {
	background: #FAFBFF; /* 행에 마우스를 올렸을 때도 고정 컬럼이 같은 강조색을 따라가도록 */
}

/* -----------------------------------------------------------
   상태 배지 (활성/휴면/만료, 경고 등)
----------------------------------------------------------- */
.ptm-badge {
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
}

.ptm-badge-active {
	background: #E8F5E9;
	color: #2E7D32;
}

.ptm-badge-dormant {
	background: #FFF3E0;
	color: #E65100;
}

.ptm-badge-expired {
	background: #FDECEA;
	color: #C62828;
}

.ptm-badge-warning {
	background: #FFF3E0;
	color: #E65100;
}

/* -----------------------------------------------------------
   Astra 테마의 모바일 메뉴 토글 버튼 숨김
   (워드프레스에 빈 메뉴를 만들어 자동 페이지나열을 막아둔 상태라,
   이 버튼을 눌러도 펼쳐질 항목이 없어 기능을 하지 못합니다.
   PT 사이드바 전용 토글 버튼(.ptm-mobile-menu-toggle)이 따로 있으므로
   이 버튼은 화면에서 숨겨서 혼란을 없앱니다. - 2026-06-28) */
[data-section="section-header-mobile-trigger"] {
	display: none !important;
}

/* -----------------------------------------------------------
   모바일 메뉴 토글 버튼 / 오버레이
   (기본은 데스크탑 기준으로 숨겨두고, 아래 반응형 미디어쿼리에서
   900px 이하일 때만 보이도록 전환합니다)
----------------------------------------------------------- */
/* -----------------------------------------------------------
   모바일 상단바 컨테이너 (2026-07-08 - 사용자표시바+토글버튼을 하나로 묶음)
   기본은 데스크탑 기준으로 숨겨두고, 아래 반응형 미디어쿼리에서
   900px 이하일 때만 flex로 전환합니다.
----------------------------------------------------------- */
.ptm-mobile-topbar {
	display: none;
}

.ptm-mobile-menu-toggle {
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	border: none;
	border-radius: 8px;
	background: #1A1F2B;
	color: #fff;
	font-size: 20px;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.ptm-sidebar-overlay {
	display: none;
}

/* 모바일 전용 - 현재 로그인한 사용자 표시. 위 .ptm-mobile-topbar의 flex 자식으로
   들어가서, 좁은 화면에서도 토글 버튼과 겹치거나 밀려나지 않고 텍스트만
   말줄임표로 줄어듭니다. 데스크탑에서는 안 보임(사이드바가 항상 펼쳐져 있어
   이미 .ptm-sidebar-user로 보이고 있으므로). */
.ptm-mobile-user-bar {
	flex: 1;
	min-width: 0; /* flex item이 내용 너비만큼 안 늘어나고 정상적으로 줄어들며 ellipsis가 먹히게 함 */
	background: rgba(255,255,255,0.45);
	-webkit-backdrop-filter: blur(1px);
	backdrop-filter: blur(1px);
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	color: #333;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-sizing: border-box;
}

/* -----------------------------------------------------------
   반응형 (태블릿/모바일)
----------------------------------------------------------- */
@media (max-width: 900px) {
	.ptm-cards {
		grid-template-columns: repeat(2, 1fr);
	}
	.ptm-layout {
		flex-direction: column;
	}

	/* 모바일에서는 사이드바를 화면 밖으로 빼두고, 토글 버튼을 누르면
	   옆에서 슬라이드로 들어오는 방식으로 전환합니다. (이전에는 그냥
	   본문 위에 항상 펼쳐진 상태로 쌓여서, 본문을 보려면 사이드바 전체를
	   먼저 스크롤해서 지나가야 했던 문제를 해결 - 2026-06-28) */
	.ptm-sidebar {
		position: fixed;
		top: 0;
		left: 0;
		width: 240px;
		height: 100%;
		z-index: 99998;
		transform: translateX(-100%);
		transition: transform 0.25s ease;
		overflow-y: auto;
		box-shadow: 2px 0 12px rgba(0,0,0,0.2);
	}
	.ptm-sidebar.is-open {
		transform: translateX(0);
	}

	.ptm-mobile-topbar {
		display: flex;
		align-items: center;
		gap: 8px;
		position: fixed;
		top: 70px;
		left: 14px;
		right: 14px;
		z-index: 99999;
	}

	.ptm-sidebar-overlay {
		display: block;
		position: fixed;
		top: 0; left: 0; right: 0; bottom: 0;
		background: rgba(0,0,0,0.4);
		z-index: 99997;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.25s ease;
	}
	.ptm-sidebar-overlay.is-visible {
		opacity: 1;
		pointer-events: auto;
	}

	/* 본문이 사이드바가 있던 빈 공간을 차지하지 않도록 (사이드바가 fixed로
	   빠졌으므로 .ptm-main이 전체 너비를 그대로 씀) */
	.ptm-main {
		padding: 60px 20px 32px;
	}
}

/* 2026-07-16 - 필터바(검색/상태체크박스/정렬/방향/검색버튼)를 좁은 화면에서 계속
   한 줄에 욱여넣으려다 요소들이 찌그러지는 문제가 반복됨(체크박스 세로쌓임 등).
   차라리 각 요소를 전체너비로 명확하게 세로 스택시키는 게 훨씬 안정적이라 판단해서 변경 */
@media (max-width: 480px) {
	.ptm-filter-bar {
		flex-direction: column;
		align-items: stretch;
	}
	.ptm-filter-input,
	.ptm-filter-select,
	.ptm-filter-checkboxes,
	.ptm-filter-bar > button,
	.ptm-filter-bar > a.ptm-filter-clear {
		width: 100%;
		max-width: none;
		box-sizing: border-box;
	}
	.ptm-filter-checkboxes {
		justify-content: space-between;
	}
}

/* 워드프레스 관리자 바(로그인 시 화면 상단에 뜨는 검은 줄)가 있으면 그
   높이만큼 상단바와 사이드바를 더 내려서, 관리자 바에 가려지지 않게 함
   (9-2번 섹션의 sticky 버그와 동일한 원인이라 같은 방식으로 처리)
   - 783px 이상: 관리자 바 32px (워드프레스 기본 규격)
   - 782px 이하: 관리자 바 46px */
@media (max-width: 900px) and (min-width: 783px) {
	body.admin-bar .ptm-mobile-topbar { top: 102px; }
	body.admin-bar .ptm-sidebar { top: 32px; height: calc(100% - 32px); }
}
@media (max-width: 782px) {
	body.admin-bar .ptm-mobile-topbar { top: 116px; }
	body.admin-bar .ptm-sidebar { top: 46px; height: calc(100% - 46px); }
}

/* 전화/문자 바로연결 아이콘 - 회원 상세, 회원 목록 공통 */
.ptm-contact-icon { font-size: 15px; margin-left: 6px; text-decoration: none; opacity: 0.75; display: inline-block; }
.ptm-contact-icon:hover { opacity: 1; }

/* 회원 목록 테이블 - 이름 컬럼 고정, 헤더 가운데정렬, 줄바꿈 방지 */
.ptm-members-table thead th { text-align: center; white-space: nowrap; padding: 12px 10px; }
.ptm-members-table thead th:nth-child(2) { min-width: 110px; }
.ptm-members-table tbody td { white-space: nowrap; text-align: center; padding: 14px 10px; }
.ptm-members-table tbody td:first-child { text-align: left; }
.ptm-members-table tbody td:nth-child(2) { text-align: left; min-width: 110px; padding-right: 8px; }

/* 2026-07-15 - 컬럼 수를 줄이기 위해 "진행"/"종료일"/"연장일수"를 각각 별도 컬럼으로 안 두고
   "보유이용권"/"만료일" 칸 안에 작은 보조텍스트로 병합 표시 (테마의 본문 최대너비 제약으로
   가로스크롤이 계속 남는 문제 완화 목적, 12컬럼→8~9컬럼으로 축소) */
.ptm-table-subtext {
	display: inline-block;
	font-size: 11px;
	color: #999;
	white-space: nowrap;
}

/* 2026-07-15 - 컬럼이 12개로 늘어나며 발견된 버그: .ptm-table의 width:100%가 그대로 적용되어
   창을 넓히면(스크롤이 필요 없어지는 시점) 테이블이 화면 폭에 맞춰 억지로 늘어나면서
   컬럼 사이 간격이 벌어져 데이터를 한눈에 보기 어려웠음.
   width를 content 크기만큼만(max-content)으로 바꿔서, 좁은 화면에서는 기존처럼
   가로 스크롤이 생기고 넓은 화면에서는 불필요하게 늘어나지 않고 딱 맞는 너비로 표시됨. */
.ptm-members-table { width: max-content; }

/* 📞💬 등 전화/문자 아이콘이 초기엔 색깔 있게 보이다가 페이지의 커스텀 웹폰트(한글 폰트 등)가
   늦게 로드되면서 흑백으로 덮어써지는 문제 - 이모지 전용 폰트로 강제 고정 (2026-07-06) */
.ptm-contact-icon {
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif !important;
}