/*
 * 화면 테마 (W://root/foundation/ui_redesign). Bootstrap 5.3(WebJars) 위에 입히는 "모던 SaaS" 스타일.
 *
 * 원칙
 *  - 색·간격·모서리·그림자는 아래 :root 의 디자인 토큰(--gym-*)만 쓴다. 화면마다 새 값을 만들지 않는다.
 *  - 대표 색상(--gym-accent, -rgb, -hover, -active, -contrast, -text)은 fragments/layout.html 의 head 에서
 *    GymBranding 이 검증한 값으로 넣는다. 대표 색상 "위" 글자는 항상 --gym-accent-contrast(흰색/검정, 4.5:1 이상).
 *    대표 색상 글자·초점 표시는 --gym-accent-text(어두운 대표 색상이면 그 색, 밝으면 본문 색)를 쓴다.
 *    어두운 대표 색상의 4.5:1 은 흰 바탕(--gym-surface) 기준이다. 회색 바탕(--gym-bg 는 약 4.2:1)에서는 낮아질 수 있으므로
 *    대표 색상 글자(링크 등)는 카드 안(흰 바탕)에만 두고, 카드 밖 링크는 본문 색(--gym-text)으로 쓴다.
 *  - 본문 글자 대비 4.5:1 이상(--gym-text 16:1, --gym-text-secondary 7:1, --gym-text-tertiary 4.5:1, 배경 3종 모두),
 *    입력칸 테두리 3:1 이상(--gym-border-input).
 *  - 가로 스크롤 방지: 고정 폭 선언·뷰포트 폭 단위·음수 여백을 쓰지 않는다(UiShellQaTest 가 검사). 사이드바 폭은
 *    lg(992px) 이상에서만 쓰는 토큰(--gym-sidebar-w)이다. 반응형 구간은 Bootstrap 과 같은 경계를
 *    @media (min-width: 992px) / (max-width: 767.98px) 형식으로 쓴다(오래된 태블릿 브라우저도 이해한다).
 *
 * 글꼴: Pretendard Variable 1.3.9 (https://github.com/orioncactus/pretendard, SIL Open Font License 1.1,
 * 라이선스 전문 fonts/Pretendard-LICENSE.txt). CDN 없이 앱이 직접 제공한다(키오스크 오프라인 대비).
 */

@font-face {
	font-family: "Pretendard Variable";
	font-style: normal;
	font-weight: 45 920;
	font-display: swap;
	/* 상대 경로(이 CSS 기준 /css/fonts/...). 글꼴은 해시 버전을 붙이지 않는다(application.yml spring.web.resources 참고) */
	src: url("/css/fonts/PretendardVariable.woff2") format("woff2-variations"),
		url("/css/fonts/PretendardVariable.woff2") format("woff2");
}

/* ============================================================ 디자인 토큰 */
:root {
	/* 글꼴 */
	--gym-font-sans: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;

	/* 중립 색 */
	--gym-bg: #f6f7f9;
	--gym-surface: #ffffff;
	--gym-surface-muted: #f2f4f7;
	--gym-border: #e4e7ec;
	--gym-border-input: #868e9c;
	--gym-text: #101828;
	--gym-text-rgb: 16, 24, 40;
	--gym-text-secondary: #475467;
	--gym-text-tertiary: #667085;

	/* 상태 색(글자 대비: 성공 #067647/#ecfdf3 5.4:1, 경고 #7a2e0e/#fffaeb 9:1) */
	--gym-success-bg: #ecfdf3;
	--gym-success-border: #abefc6;
	--gym-success-text: #067647;
	--gym-warning-bg: #fffaeb;
	--gym-warning-border: #fedf89;
	--gym-warning-text: #7a2e0e;

	/* 둥근 모서리 */
	--gym-radius-sm: 6px;
	--gym-radius: 8px;
	--gym-radius-lg: 12px;
	--gym-radius-xl: 16px;
	--gym-radius-pill: 999px;

	/* 그림자(은은하게) */
	--gym-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
	--gym-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
	--gym-shadow-md: 0 6px 16px -4px rgba(16, 24, 40, 0.10), 0 2px 6px -2px rgba(16, 24, 40, 0.05);
	--gym-shadow-lg: 0 20px 40px -12px rgba(16, 24, 40, 0.18);

	/* 간격 */
	--gym-space-1: 0.25rem;
	--gym-space-2: 0.5rem;
	--gym-space-3: 0.75rem;
	--gym-space-4: 1rem;
	--gym-space-5: 1.5rem;
	--gym-space-6: 2rem;
	--gym-space-7: 3rem;
	--gym-space-8: 4rem;

	/* 배치 */
	--gym-sidebar-w: 15rem;
	--gym-content-max: 80rem;
	--gym-content-narrow-max: 48rem;

	/* 초점 표시 */
	--gym-focus-ring: 0 0 0 3px rgba(var(--gym-accent-rgb), 0.35);
	--gym-focus-outline: 2px solid var(--gym-accent-text);

	/* Bootstrap 변수를 토큰에 연결 */
	--bs-body-font-family: var(--gym-font-sans);
	--bs-body-bg: var(--gym-bg);
	--bs-body-color: var(--gym-text);
	--bs-body-color-rgb: var(--gym-text-rgb);
	--bs-emphasis-color: var(--gym-text);
	--bs-secondary-color: var(--gym-text-secondary);
	--bs-tertiary-color: var(--gym-text-tertiary);
	--bs-tertiary-bg: var(--gym-surface-muted);
	--bs-tertiary-bg-rgb: 242, 244, 247;
	--bs-border-color: var(--gym-border);
	--bs-border-radius: var(--gym-radius);
	--bs-border-radius-sm: var(--gym-radius-sm);
	--bs-border-radius-lg: var(--gym-radius-lg);
	--bs-border-radius-xl: var(--gym-radius-xl);
	--bs-box-shadow-sm: var(--gym-shadow-sm);
	--bs-box-shadow: var(--gym-shadow-md);
	--bs-focus-ring-color: rgba(var(--gym-accent-rgb), 0.35);

	/* 대표 색상을 Bootstrap primary 로 사용 */
	--bs-primary: var(--gym-accent);
	--bs-primary-rgb: var(--gym-accent-rgb);
	--bs-link-color: var(--gym-accent-text);
	--bs-link-color-rgb: var(--gym-accent-rgb);
	--bs-link-hover-color: var(--gym-accent-text);
	--bs-link-hover-color-rgb: var(--gym-accent-rgb);
}

/* ============================================================ 기본 */
body {
	font-family: var(--gym-font-sans);
	background-color: var(--gym-bg);
	color: var(--gym-text);
	letter-spacing: -0.01em;
	-webkit-font-smoothing: antialiased;
	/* 한국어는 어절(띄어쓰기) 단위로 줄바꿈. 긴 체육관명·주소처럼 띄어쓰기 없는 긴 글은 어디서든 끊어 가로 스크롤을 막는다 */
	word-break: keep-all;
	overflow-wrap: anywhere;
}

img {
	max-width: 100%;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	color: var(--gym-text);
	font-weight: 700;
	letter-spacing: -0.02em;
}

a {
	color: var(--gym-accent-text);
}

/* 회색 바탕(카드 밖) 위 링크는 본문 색으로(대표 색상 글자는 흰 바탕에서만 4.5:1 보장) */
.gym-footer a,
.gym-page-lead a,
.gym-list-meta a,
.gym-content > p > a {
	color: var(--gym-text);
}

/* 키보드 초점은 항상 보이게(마우스 클릭에는 표시하지 않음) */
a:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: var(--gym-focus-outline);
	outline-offset: 2px;
	border-radius: var(--gym-radius-sm);
}

/* 본문으로 건너뛰기 */
.gym-skip-link:focus {
	position: fixed;
	top: var(--gym-space-3);
	left: var(--gym-space-3);
	z-index: 1080;
	padding: var(--gym-space-2) var(--gym-space-4);
	background-color: var(--gym-surface);
	color: var(--gym-text);
	border-radius: var(--gym-radius);
	box-shadow: var(--gym-shadow-md);
}

/* ============================================================ 버튼 */
.btn {
	--bs-btn-font-weight: 600;
	--bs-btn-border-radius: var(--gym-radius);
	--bs-btn-padding-x: 1rem;
	letter-spacing: -0.01em;
}

.btn-lg {
	--bs-btn-border-radius: var(--gym-radius);
	--bs-btn-padding-y: 0.75rem;
}

.btn-sm {
	--bs-btn-border-radius: var(--gym-radius-sm);
}

.btn:focus-visible {
	outline: var(--gym-focus-outline);
	outline-offset: 2px;
}

.btn-primary {
	--bs-btn-color: var(--gym-accent-contrast);
	--bs-btn-bg: var(--gym-accent);
	--bs-btn-border-color: var(--gym-accent);
	--bs-btn-hover-color: var(--gym-accent-contrast);
	--bs-btn-hover-bg: var(--gym-accent-hover);
	--bs-btn-hover-border-color: var(--gym-accent-hover);
	--bs-btn-focus-shadow-rgb: var(--gym-accent-rgb);
	--bs-btn-active-color: var(--gym-accent-contrast);
	--bs-btn-active-bg: var(--gym-accent-active);
	--bs-btn-active-border-color: var(--gym-accent-active);
	--bs-btn-disabled-color: var(--gym-accent-contrast);
	--bs-btn-disabled-bg: var(--gym-accent);
	--bs-btn-disabled-border-color: var(--gym-accent);
	box-shadow: var(--gym-shadow-xs);
}

/* 흰 바탕의 보조 버튼 */
.btn-outline-secondary,
.gym-btn-ghost {
	--bs-btn-color: var(--gym-text-secondary);
	--bs-btn-bg: var(--gym-surface);
	--bs-btn-border-color: var(--gym-border);
	--bs-btn-hover-color: var(--gym-text);
	--bs-btn-hover-bg: var(--gym-surface-muted);
	--bs-btn-hover-border-color: var(--gym-border);
	--bs-btn-active-color: var(--gym-text);
	--bs-btn-active-bg: var(--gym-border);
	--bs-btn-active-border-color: var(--gym-border);
	--bs-btn-focus-shadow-rgb: var(--gym-text-rgb);
}

/* ============================================================ 입력 */
.form-label {
	font-weight: 600;
	color: var(--gym-text);
	margin-bottom: var(--gym-space-2);
}

.form-text {
	color: var(--gym-text-secondary);
}

.form-control,
.form-select {
	border-color: var(--gym-border-input);
	border-radius: var(--gym-radius);
	background-color: var(--gym-surface);
	color: var(--gym-text);
	box-shadow: var(--gym-shadow-xs);
}

.form-control-lg {
	border-radius: var(--gym-radius);
	font-size: 1rem;
	padding: 0.75rem 0.875rem;
}

.form-control::placeholder {
	color: var(--gym-text-tertiary);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
	border-color: var(--gym-accent);
	box-shadow: var(--gym-focus-ring);
}

/* Bootstrap 은 초점 시 배경을 --bs-body-bg(여기서는 회색 페이지 배경)로 바꾼다. 입력칸은 흰 바탕 유지 */
.form-control:focus,
.form-select:focus {
	background-color: var(--gym-surface);
}

.form-check-input {
	border-color: var(--gym-border-input);
}

.form-check-input:checked {
	background-color: var(--gym-accent);
	border-color: var(--gym-accent);
}

.form-control-color {
	padding: 0.375rem;
}

/* ============================================================ 날짜 선택기 (flatpickr 4.6.13, W://root/foundation/date_picker)
   /js/date-picker.js 가 input[type=date] 를 텍스트 칸 + flatpickr 달력으로 바꾼다(fragments/layout.html datePicker 조각).
   flatpickr.min.css 는 날짜 입력이 있는 화면의 body 에서 이 파일 "뒤에" 읽힌다 → 같은 우선순위면 flatpickr 가 이기므로
   body.gym-admin 을 앞에 붙여 우선순위를 높인다. 관리자 화면은 라이트 테마만 있다(다크 --kiosk-* 는 키오스크 전용이고
   키오스크에는 날짜 선택기를 넣지 않는다). 달력(약 308px)은 가장 좁은 휴대폰(320px)에도 들어가고, 칸이 오른쪽 끝이면
   flatpickr 가 오른쪽에 맞춰 연다. */

/* 텍스트 칸이 날짜 칸임을 알 수 있게 오른쪽 달력 아이콘(출석 메뉴 아이콘과 같은 그림, 색은 --gym-text-tertiary 값).
   오류 칸(.is-invalid)은 Bootstrap 오류 아이콘을 그대로 쓴다 */
body.gym-admin .flatpickr-input.form-control:not(.is-invalid) {
	padding-right: calc(1.5em + 0.75rem);
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3e%3cpath d='M3.5 10h17M8 3v4M16 3v4'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 1.125rem 1.125rem;
}

body.gym-admin .flatpickr-input.form-control:disabled {
	background-color: var(--gym-surface-muted);
}

body.gym-admin .flatpickr-calendar {
	font-family: var(--gym-font-sans);
	color: var(--gym-text);
	background: var(--gym-surface);
	border: 1px solid var(--gym-border);
	border-radius: var(--gym-radius-lg);
	box-shadow: var(--gym-shadow-lg);
}

body.gym-admin .flatpickr-calendar.arrowTop::before {
	border-bottom-color: var(--gym-border);
}

body.gym-admin .flatpickr-calendar.arrowTop::after {
	border-bottom-color: var(--gym-surface);
}

body.gym-admin .flatpickr-calendar.arrowBottom::before {
	border-top-color: var(--gym-border);
}

body.gym-admin .flatpickr-calendar.arrowBottom::after {
	border-top-color: var(--gym-surface);
}

/* 머리글: 이전·다음 달, 월 드롭다운, 연도 숫자 칸 */
body.gym-admin .flatpickr-months .flatpickr-month,
body.gym-admin .flatpickr-months .flatpickr-prev-month,
body.gym-admin .flatpickr-months .flatpickr-next-month {
	color: var(--gym-text);
	fill: var(--gym-text);
}

body.gym-admin .flatpickr-months .flatpickr-prev-month svg,
body.gym-admin .flatpickr-months .flatpickr-next-month svg {
	fill: var(--gym-text-secondary);
}

body.gym-admin .flatpickr-months .flatpickr-prev-month:hover svg,
body.gym-admin .flatpickr-months .flatpickr-next-month:hover svg {
	fill: var(--gym-accent-text);
}

body.gym-admin .flatpickr-current-month {
	font-size: 1rem;
	font-weight: 600;
}

body.gym-admin .flatpickr-current-month .flatpickr-monthDropdown-months,
body.gym-admin .flatpickr-current-month input.cur-year {
	font-weight: 600;
	color: var(--gym-text);
	border-radius: var(--gym-radius-sm);
}

body.gym-admin .flatpickr-current-month .flatpickr-monthDropdown-months:hover,
body.gym-admin .flatpickr-current-month .numInputWrapper:hover {
	background: var(--gym-surface-muted);
}

body.gym-admin .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
	background-color: var(--gym-surface);
	color: var(--gym-text);
}

body.gym-admin .flatpickr-current-month .numInputWrapper span.arrowUp::after {
	border-bottom-color: var(--gym-text);
}

body.gym-admin .flatpickr-current-month .numInputWrapper span.arrowDown::after {
	border-top-color: var(--gym-text);
}

body.gym-admin .flatpickr-calendar .flatpickr-monthDropdown-months:focus-visible,
body.gym-admin .flatpickr-calendar input.cur-year:focus-visible,
body.gym-admin .flatpickr-months .flatpickr-prev-month:focus-visible,
body.gym-admin .flatpickr-months .flatpickr-next-month:focus-visible {
	outline: var(--gym-focus-outline);
	outline-offset: 1px;
}

body.gym-admin span.flatpickr-weekday {
	color: var(--gym-text-secondary);
	font-weight: 600;
}

/* 날짜 칸 */
body.gym-admin .flatpickr-day {
	color: var(--gym-text);
	border-radius: var(--gym-radius);
	font-variant-numeric: tabular-nums;
}

body.gym-admin .flatpickr-day:hover,
body.gym-admin .flatpickr-day:focus,
body.gym-admin .flatpickr-day.prevMonthDay:hover,
body.gym-admin .flatpickr-day.nextMonthDay:hover,
body.gym-admin .flatpickr-day.prevMonthDay:focus,
body.gym-admin .flatpickr-day.nextMonthDay:focus,
body.gym-admin .flatpickr-day.today:hover,
body.gym-admin .flatpickr-day.today:focus {
	color: var(--gym-text);
	background: var(--gym-surface-muted);
	border-color: var(--gym-border);
}

/* 키보드 초점은 배경만이 아니라 테두리로도 보이게 */
body.gym-admin .flatpickr-day:focus-visible {
	outline: var(--gym-focus-outline);
	outline-offset: 1px;
}

/* 오늘: 테두리 + 굵게(색만으로 구분하지 않음) */
body.gym-admin .flatpickr-day.today {
	border-color: var(--gym-border-input);
	font-weight: 700;
}

body.gym-admin .flatpickr-day.selected,
body.gym-admin .flatpickr-day.selected:hover,
body.gym-admin .flatpickr-day.selected:focus,
body.gym-admin .flatpickr-day.selected.today,
body.gym-admin .flatpickr-day.selected.prevMonthDay,
body.gym-admin .flatpickr-day.selected.nextMonthDay {
	color: var(--gym-accent-contrast);
	background: var(--gym-accent);
	border-color: var(--gym-accent);
}

body.gym-admin .flatpickr-day.prevMonthDay,
body.gym-admin .flatpickr-day.nextMonthDay {
	color: var(--gym-text-tertiary);
}

/* 고를 수 없는 날(min·max 밖): 흐린 색 + 취소선 */
body.gym-admin .flatpickr-day.flatpickr-disabled,
body.gym-admin .flatpickr-day.flatpickr-disabled:hover {
	color: var(--gym-text-tertiary);
	background: transparent;
	border-color: transparent;
	text-decoration: line-through;
}

/* ============================================================ 카드 */
.card {
	--bs-card-bg: var(--gym-surface);
	--bs-card-border-color: var(--gym-border);
	--bs-card-border-radius: var(--gym-radius-lg);
	--bs-card-inner-border-radius: calc(var(--gym-radius-lg) - 1px);
	--bs-card-cap-bg: transparent;
	--bs-card-spacer-y: var(--gym-space-5);
	--bs-card-spacer-x: var(--gym-space-5);
	--bs-card-cap-padding-y: var(--gym-space-4);
	--bs-card-cap-padding-x: var(--gym-space-5);
	box-shadow: var(--gym-shadow-sm);
}

.card-header {
	font-weight: 700;
	color: var(--gym-text);
}

/* fieldset 을 카드로 쓸 때 legend 를 카드 머리글처럼 */
fieldset.card {
	min-width: 0;
}

/* Bootstrap 의 legend(float: left; width: 100%)를 그대로 써서 테두리 위가 아니라 카드 안 첫 줄에 놓는다 */
fieldset.card > legend.card-header {
	float: left;
	width: 100%;
	font-size: 1rem;
	letter-spacing: -0.01em;
	border-bottom: 1px solid var(--gym-border);
	margin-bottom: 0;
}

.gym-section-desc {
	color: var(--gym-text-secondary);
	font-size: 0.875rem;
	margin-bottom: var(--gym-space-4);
}

/* ============================================================ 알림 */
.alert {
	--bs-alert-border-radius: var(--gym-radius);
	box-shadow: var(--gym-shadow-xs);
}

.badge {
	font-weight: 600;
	border-radius: var(--gym-radius-pill);
}

/* ============================================================ 로고·브랜드 */

/* 로고: 높이만 맞추고 비율 유지 */
.gym-logo {
	height: 4rem;
	width: auto;
	object-fit: contain;
}

.gym-logo-sm {
	height: 2rem;
}

/* 로고가 없을 때의 표시(대표 색상 바탕 + 대비 글자색 아이콘) */
.gym-brand-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	height: 2.25rem;
	aspect-ratio: 1;
	border-radius: var(--gym-radius);
	background-color: var(--gym-accent);
	color: var(--gym-accent-contrast);
	box-shadow: var(--gym-shadow-xs);
}

.gym-brand-mark svg {
	height: 60%;
	width: auto;
}

.gym-brand-mark-lg {
	height: 3.5rem;
	border-radius: var(--gym-radius-lg);
}

.gym-brand-mark-xl {
	height: 5rem;
	border-radius: var(--gym-radius-xl);
}

/* 사이드바·상단바의 체육관 이름(두 줄까지, 넘치면 생략) */
.gym-brand {
	display: flex;
	align-items: center;
	gap: var(--gym-space-3);
	color: var(--gym-text);
	text-decoration: none;
	font-weight: 700;
	font-size: 1.0625rem;
	letter-spacing: -0.02em;
	min-width: 0;
}

.gym-brand:hover {
	color: var(--gym-text);
}

.gym-brand-name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	min-width: 0;
}

/* ============================================================ 아이콘(메뉴·버튼, CSS 마스크 — 색은 글자색을 따른다) */
.gym-icon::before,
.gym-nav-link::before,
.gym-btn-logout::before {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 1.25em;
	height: 1.25em;
	background-color: currentColor;
	-webkit-mask: var(--gym-icon) center / contain no-repeat;
	mask: var(--gym-icon) center / contain no-repeat;
}

.gym-icon-home {
	--gym-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M3.5 10.5 12 3.5l8.5 7V19a1.5 1.5 0 0 1-1.5 1.5h-4v-6h-6v6H5A1.5 1.5 0 0 1 3.5 19z'/%3e%3c/svg%3e");
}

.gym-icon-members {
	--gym-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='9' cy='8' r='3.5'/%3e%3cpath d='M2.5 20c.8-3.6 3.4-5.5 6.5-5.5s5.7 1.9 6.5 5.5M16 4.6a3.5 3.5 0 0 1 0 6.8M18 14.8c1.9.7 3.1 2.4 3.5 5.2'/%3e%3c/svg%3e");
}

.gym-icon-products {
	--gym-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='5.5' width='18' height='13' rx='2.5'/%3e%3cpath d='M3 10h18M7 14.5h4'/%3e%3c/svg%3e");
}

.gym-icon-attendance {
	--gym-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3e%3cpath d='M3.5 10h17M8 3v4M16 3v4M9 15l2 2 4-4'/%3e%3c/svg%3e");
}

.gym-icon-settings {
	--gym-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M4 7h9M19 7h1M4 17h3M13 17h7'/%3e%3ccircle cx='16' cy='7' r='2.5'/%3e%3ccircle cx='10' cy='17' r='2.5'/%3e%3c/svg%3e");
}

.gym-icon-clock {
	--gym-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='8.5'/%3e%3cpath d='M12 7.5V12l3 2'/%3e%3c/svg%3e");
}

.gym-btn-logout {
	--gym-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M14.5 4H18a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-3.5M10 16.5 14.5 12 10 7.5M14.5 12H4'/%3e%3c/svg%3e");
}

/* ============================================================ 관리자 레이아웃 (사이드바 + 본문) */
.gym-app {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

/* 좁은 화면 상단바(사이드바를 여는 버튼 + 체육관 이름). lg 이상에서는 d-lg-none 으로 숨는다 */
.gym-topbar {
	position: sticky;
	top: 0;
	z-index: 1020;
	display: flex;
	align-items: center;
	gap: var(--gym-space-3);
	padding: var(--gym-space-3) var(--gym-space-4);
	background-color: rgba(255, 255, 255, 0.92);
	border-bottom: 1px solid var(--gym-border);
	-webkit-backdrop-filter: saturate(180%) blur(8px);
	backdrop-filter: saturate(180%) blur(8px);
}

.gym-topbar-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	height: 2.5rem;
	aspect-ratio: 1;
	padding: 0;
	color: var(--gym-text);
	background-color: var(--gym-surface);
	border: 1px solid var(--gym-border);
	border-radius: var(--gym-radius);
}

.gym-topbar-toggle:hover {
	background-color: var(--gym-surface-muted);
}

.gym-topbar-toggle svg {
	height: 1.25rem;
	width: auto;
}

/* 사이드바: 좁은 화면에서는 Bootstrap offcanvas(왼쪽에서 열림), lg 이상에서는 고정 열 */
.gym-sidebar {
	--bs-offcanvas-width: var(--gym-sidebar-w);
	--bs-offcanvas-bg: var(--gym-surface);
	--bs-offcanvas-color: var(--gym-text);
	--bs-offcanvas-border-color: var(--gym-border);
	--bs-offcanvas-box-shadow: var(--gym-shadow-lg);
}

/* offcanvas-lg 는 lg 이상에서 배경을 transparent !important 로 바꾼다. 사이드바는 흰 바탕이어야 하므로 특이도를 높여 되돌린다 */
.offcanvas-lg.gym-sidebar {
	background-color: var(--gym-surface) !important;
}

.gym-sidebar .offcanvas-header {
	justify-content: flex-end;
	padding: var(--gym-space-3) var(--gym-space-3) 0;
}

.gym-sidebar .offcanvas-body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: var(--gym-space-5);
	padding: var(--gym-space-5) var(--gym-space-4);
	overflow-y: auto;
}

.gym-sidebar .gym-brand {
	padding: 0 var(--gym-space-2);
}

@media (min-width: 992px) {
	.gym-app {
		flex-direction: row;
	}

	.gym-sidebar {
		position: sticky;
		top: 0;
		flex: 0 0 var(--gym-sidebar-w);
		max-width: var(--gym-sidebar-w);
		height: 100vh;
		height: 100dvh;
		display: flex;
		flex-direction: column;
		border-right: 1px solid var(--gym-border);
	}
}

/* 사이드바 메뉴(nav.gym-navbar): 위에 메뉴, 맨 아래 로그아웃 */
.gym-sidebar-nav {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: var(--gym-space-4);
}

.gym-nav-heading {
	margin: 0;
	padding: 0 var(--gym-space-3);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--gym-text-tertiary);
}

.gym-nav-list {
	display: flex;
	flex-direction: column;
	gap: var(--gym-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gym-nav-link {
	display: flex;
	align-items: center;
	gap: var(--gym-space-3);
	padding: 0.625rem var(--gym-space-3);
	border-radius: var(--gym-radius);
	color: var(--gym-text-secondary);
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.gym-nav-link:hover {
	background-color: var(--gym-surface-muted);
	color: var(--gym-text);
}

/* 활성 메뉴: 대표 색상 바탕 + 대비 글자색(흰색/검정, 4.5:1 이상) */
.gym-nav-link.active,
.gym-nav-link.active:hover {
	background-color: var(--gym-accent);
	color: var(--gym-accent-contrast);
	font-weight: 600;
	box-shadow: var(--gym-shadow-xs);
}

.gym-nav-link:focus-visible {
	outline: var(--gym-focus-outline);
	outline-offset: 2px;
}

.gym-sidebar-footer {
	margin-top: auto;
	padding-top: var(--gym-space-4);
	border-top: 1px solid var(--gym-border);
	display: flex;
	flex-direction: column;
	gap: var(--gym-space-3);
}

.gym-sidebar-user {
	margin: 0;
	padding: 0 var(--gym-space-3);
	font-size: 0.875rem;
	color: var(--gym-text-secondary);
}

.gym-sidebar-user strong {
	color: var(--gym-text);
	font-weight: 600;
}

.gym-btn-logout {
	display: flex;
	align-items: center;
	gap: var(--gym-space-3);
	width: 100%;
	justify-content: flex-start;
	--bs-btn-padding-x: var(--gym-space-3);
	--bs-btn-padding-y: 0.625rem;
	--bs-btn-font-weight: 500;
	--bs-btn-color: var(--gym-text-secondary);
	--bs-btn-border-color: transparent;
	--bs-btn-hover-color: var(--gym-text);
	--bs-btn-hover-bg: var(--gym-surface-muted);
	--bs-btn-hover-border-color: transparent;
	--bs-btn-active-color: var(--gym-text);
	--bs-btn-active-bg: var(--gym-border);
	--bs-btn-active-border-color: transparent;
}

/* 본문 영역 */
.gym-main {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

.gym-content {
	flex-grow: 1;
	width: 100%;
	max-width: var(--gym-content-max);
	margin: 0 auto;
	padding: var(--gym-space-5) var(--gym-space-4) var(--gym-space-6);
}

.gym-content-narrow {
	max-width: calc(var(--gym-content-narrow-max) + 2 * var(--gym-space-6));
}

@media (min-width: 768px) {
	.gym-content {
		padding: var(--gym-space-6) var(--gym-space-6) var(--gym-space-7);
	}
}

/* 화면 머리글: 제목 + (선택) 동작 버튼 */
.gym-page-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--gym-space-3) var(--gym-space-4);
	margin-bottom: var(--gym-space-5);
}

.gym-page-title {
	margin: 0;
	font-size: 1.625rem;
	font-weight: 700;
	letter-spacing: -0.025em;
}

.gym-page-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gym-space-2);
}

.gym-page-lead {
	margin: calc(-1 * var(--gym-space-3)) 0 var(--gym-space-5);
	color: var(--gym-text-secondary);
}

/* ============================================================ 대시보드 */
.gym-stat-card .card-body {
	display: flex;
	flex-direction: column;
	gap: var(--gym-space-2);
}

.gym-stat-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gym-space-2);
}

.gym-stat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 2.5rem;
	aspect-ratio: 1;
	border-radius: var(--gym-radius);
	background-color: rgba(var(--gym-accent-rgb), 0.12);
	color: var(--gym-accent-text);
	font-size: 1.125rem;
}

.gym-stat-label {
	margin: var(--gym-space-2) 0 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--gym-text-secondary);
	letter-spacing: -0.01em;
}

.gym-stat-value {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--gym-text-tertiary);
	letter-spacing: -0.02em;
}

.gym-stat-help {
	margin: 0;
	font-size: 0.875rem;
	color: var(--gym-text-tertiary);
}

.gym-stat-link {
	margin-top: auto;
	padding-top: var(--gym-space-2);
	font-size: 0.875rem;
	font-weight: 600;
}

/* ============================================================ 설정 화면 */
.gym-logo-preview {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 5.25rem;
	padding: var(--gym-space-2) var(--gym-space-3);
	background-color: var(--gym-surface-muted);
	border: 1px dashed var(--gym-border-input);
	border-radius: var(--gym-radius);
	color: var(--gym-text-secondary);
}

.gym-form-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--gym-space-3);
	padding: var(--gym-space-4) var(--gym-space-5);
	background-color: var(--gym-surface);
	border: 1px solid var(--gym-border);
	border-radius: var(--gym-radius-lg);
	box-shadow: var(--gym-shadow-sm);
}

/* ============================================================ 하단(체육관명·연락처·주소) */
.gym-footer {
	padding: var(--gym-space-5) var(--gym-space-4);
	color: var(--gym-text-secondary);
	border-top: 1px solid var(--gym-border);
}

.gym-footer .fw-semibold {
	color: var(--gym-text);
}

.gym-main .gym-footer {
	background-color: transparent;
}

/* ============================================================ 로그인·오류 화면(가운데 카드) */
.gym-auth {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	background:
		radial-gradient(ellipse at top, rgba(var(--gym-accent-rgb), 0.10), transparent 60%),
		var(--gym-bg);
}

.gym-auth .gym-footer {
	border-top: 0;
}

.gym-auth-main {
	flex-grow: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--gym-space-6) var(--gym-space-4);
}

.gym-auth-card {
	width: 100%;
	max-width: 26rem;
	border-radius: var(--gym-radius-xl);
	box-shadow: var(--gym-shadow-lg);
	--bs-card-spacer-y: var(--gym-space-6);
	--bs-card-spacer-x: var(--gym-space-6);
}

@media (max-width: 575.98px) {
	.gym-auth-card {
		--bs-card-spacer-y: var(--gym-space-5);
		--bs-card-spacer-x: var(--gym-space-5);
	}
}

.gym-auth-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gym-space-3);
	text-align: center;
	margin-bottom: var(--gym-space-5);
}

.gym-auth-name {
	margin: 0;
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--gym-text);
}

.gym-auth-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 500;
	color: var(--gym-text-secondary);
	letter-spacing: -0.01em;
}

/* ============================================================ 키오스크: 메뉴 없는 전체화면, 큰 글자 */
.gym-kiosk {
	min-height: 100vh;
	min-height: 100dvh;
	background:
		radial-gradient(ellipse at top, rgba(var(--gym-accent-rgb), 0.14), transparent 65%),
		var(--gym-bg);
	font-size: 1.125rem;
}

.gym-kiosk-main {
	flex-grow: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--gym-space-5) var(--gym-space-4);
}

@media (min-width: 768px) {
	.gym-kiosk-main {
		padding: var(--gym-space-7);
	}
}

.gym-kiosk-panel {
	width: 100%;
	max-width: 52rem;
	padding: var(--gym-space-6) var(--gym-space-5);
	text-align: center;
	background-color: var(--gym-surface);
	border: 1px solid var(--gym-border);
	border-radius: var(--gym-radius-xl);
	box-shadow: var(--gym-shadow-lg);
}

@media (min-width: 768px) {
	.gym-kiosk-panel {
		padding: var(--gym-space-8) var(--gym-space-7);
	}
}

.gym-kiosk-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gym-space-4);
	margin-bottom: var(--gym-space-5);
}

.gym-kiosk-brand .gym-logo {
	height: 5rem;
}

.gym-kiosk-name {
	margin: 0;
	font-size: clamp(2rem, 6vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.15;
	color: var(--gym-text);
}

/* 키오스크 안내 문구: 설정 화면에서 넣은 줄바꿈을 그대로 보인다(연속 공백은 합침) */
.gym-kiosk-message {
	white-space: pre-line;
	margin: 0 auto var(--gym-space-6);
	max-width: 40rem;
	padding: var(--gym-space-4) var(--gym-space-5);
	font-size: clamp(1.25rem, 3vw, 1.625rem);
	line-height: 1.6;
	color: var(--gym-text);
	background-color: var(--gym-surface-muted);
	border-radius: var(--gym-radius-lg);
}

.gym-kiosk-title {
	margin: 0 0 var(--gym-space-3);
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	font-weight: 700;
}

.gym-kiosk-sub {
	margin: 0;
	font-size: clamp(1.125rem, 2.5vw, 1.5rem);
	color: var(--gym-text-secondary);
}

/* 터치 대상은 Bootstrap btn-lg 이상 */
.gym-kiosk .btn {
	min-height: 3rem;
}

.gym-kiosk .gym-footer {
	border-top: 0;
}

/* ============================================================ 회원 화면 (admin/members/*) */

/* 위로 돌아가기 링크(회원 목록·회원 정보) */
.gym-back-link-wrap {
	margin: 0 0 var(--gym-space-2);
}

.gym-back-link {
	display: inline-flex;
	align-items: center;
	gap: var(--gym-space-1);
	color: var(--gym-text-secondary);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
}

/* 화살표는 장식(대체 글 "" — 지원하지 않는 브라우저는 앞 선언을 쓴다) */
.gym-back-link::before {
	content: "\2190";
	content: "\2190" / "";
}

.gym-back-link:hover {
	color: var(--gym-text);
	text-decoration: underline;
}

.gym-page-title-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gym-space-3);
	min-width: 0;
}

/* 숫자(전화번호·날짜) 자리 맞춤 */
.gym-tabular {
	font-variant-numeric: tabular-nums;
}

.gym-required {
	color: var(--gym-text-secondary);
	font-size: 0.875rem;
	font-weight: 400;
}

/* 상태 표시 */
.gym-badge-success {
	background-color: var(--gym-success-bg);
	color: var(--gym-success-text);
	border: 1px solid var(--gym-success-border);
}

.gym-badge-muted {
	background-color: var(--gym-surface-muted);
	color: var(--gym-text-secondary);
	border: 1px solid var(--gym-border);
}

/* 검색 */
.gym-search-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gym-space-2);
	align-items: flex-start;
}

.gym-search-field {
	flex: 1 1 10rem;
	min-width: 0;
}

/* 상태 필터: 붙어 있는 버튼 묶음(세그먼트). 현재 상태는 대표 색상 바탕 + 대비색 */
.gym-segmented {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--gym-space-1);
	padding: var(--gym-space-1);
	background-color: var(--gym-surface-muted);
	border: 1px solid var(--gym-border);
	border-radius: var(--gym-radius);
}

.gym-segment {
	padding: 0.375rem 0.875rem;
	border: 0;
	border-radius: var(--gym-radius-sm);
	background-color: transparent;
	color: var(--gym-text-secondary);
	font-weight: 500;
	font-size: 0.9375rem;
	line-height: 1.5;
	cursor: pointer;
}

.gym-segment:hover {
	color: var(--gym-text);
	background-color: var(--gym-surface);
}

.gym-segment.active,
.gym-segment.active:hover {
	background-color: var(--gym-accent);
	color: var(--gym-accent-contrast);
	font-weight: 600;
	box-shadow: var(--gym-shadow-xs);
}

.gym-segment:focus-visible {
	outline: var(--gym-focus-outline);
	outline-offset: 2px;
}

.gym-list-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--gym-space-2);
	margin-bottom: var(--gym-space-3);
	color: var(--gym-text-secondary);
	font-size: 0.875rem;
	font-weight: 500;
}

/* 표: 넓은 화면에서는 카드 안의 표 */
.table {
	--bs-table-bg: var(--gym-surface);
	--bs-table-color: var(--gym-text);
	--bs-table-border-color: var(--gym-border);
	--bs-table-hover-bg: var(--gym-surface-muted);
	--bs-table-hover-color: var(--gym-text);
}

.gym-table-wrap {
	background-color: var(--gym-surface);
	border: 1px solid var(--gym-border);
	border-radius: var(--gym-radius-lg);
	box-shadow: var(--gym-shadow-sm);
	overflow: hidden;
}

.gym-table-wrap .table > :not(caption) > * > * {
	padding: 0.875rem var(--gym-space-5);
}

.gym-table-wrap thead th {
	background-color: var(--gym-surface-muted);
	color: var(--gym-text-secondary);
	font-size: 0.8125rem;
	font-weight: 600;
}

.gym-table-wrap tbody tr:last-child > * {
	border-bottom: 0;
}

/* 행 전체가 상세 링크(이름 링크의 stretched-link) */
.gym-member-row {
	position: relative;
}

.gym-member-name a {
	color: var(--gym-text);
	font-weight: 600;
	text-decoration: none;
}

.gym-member-row:hover .gym-member-name a {
	color: var(--gym-accent-text);
	text-decoration: underline;
}

/* 키보드 초점: 행 전체(stretched-link 의 ::after)에 테두리 */
.gym-member-name a:focus-visible {
	outline: none;
}

.gym-member-name a:focus-visible::after {
	outline: var(--gym-focus-outline);
	outline-offset: -2px;
	border-radius: var(--gym-radius);
}

/* 좁은 화면: 표의 각 행을 카드로 쌓는다(칸 이름은 td 의 data-label) */
@media (max-width: 767.98px) {
	.gym-table-wrap {
		background-color: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		overflow: visible;
	}

	.gym-table-stack thead {
		position: absolute;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	.gym-table-stack,
	.gym-table-stack tbody,
	.gym-table-stack tr,
	.gym-table-stack td {
		display: block;
	}

	.gym-table-stack tr {
		margin-bottom: var(--gym-space-3);
		padding: var(--gym-space-3) var(--gym-space-4);
		background-color: var(--gym-surface);
		border: 1px solid var(--gym-border);
		border-radius: var(--gym-radius-lg);
		box-shadow: var(--gym-shadow-sm);
	}

	.gym-table-wrap .gym-table-stack > :not(caption) > * > * {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: var(--gym-space-3);
		padding: var(--gym-space-1) 0;
		border-bottom: 0;
		background-color: transparent;
		box-shadow: none;
		text-align: right;
	}

	.gym-table-stack td::before {
		content: attr(data-label);
		flex: 0 0 auto;
		color: var(--gym-text-secondary);
		font-size: 0.8125rem;
		font-weight: 500;
		text-align: left;
	}

	.gym-table-stack td.gym-member-name {
		font-size: 1.0625rem;
	}
}

/* 페이지 이동 */
.gym-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--gym-space-3);
	margin-top: var(--gym-space-5);
}

.gym-page-indicator {
	color: var(--gym-text-secondary);
	font-variant-numeric: tabular-nums;
	font-weight: 500;
}

/* 빈 결과 */
.gym-empty-state .card-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gym-space-2);
	padding: var(--gym-space-7) var(--gym-space-5);
	text-align: center;
}

.gym-empty-title {
	margin: var(--gym-space-2) 0 0;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--gym-text);
}

.gym-empty-text {
	margin: 0;
	color: var(--gym-text-secondary);
}

/* 중복 경고 */
.gym-warning-card {
	--bs-card-bg: var(--gym-warning-bg);
	--bs-card-border-color: var(--gym-warning-border);
	color: var(--gym-warning-text);
}

.gym-warning-title {
	margin: 0 0 var(--gym-space-2);
	font-size: 1rem;
	font-weight: 700;
	color: var(--gym-warning-text);
}

.gym-duplicate-list {
	display: flex;
	flex-direction: column;
	gap: var(--gym-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gym-duplicate-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gym-space-2);
	padding: var(--gym-space-2) var(--gym-space-3);
	background-color: var(--gym-surface);
	border: 1px solid var(--gym-warning-border);
	border-radius: var(--gym-radius);
}

.gym-duplicate-list a {
	color: var(--gym-text);
	font-weight: 600;
}

.gym-duplicate-list a .gym-tabular {
	margin-left: var(--gym-space-1);
	color: var(--gym-text-secondary);
	font-weight: 400;
}

.gym-form-actions-main {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gym-space-2);
	margin-left: auto;
}

/* 상세: 이름-값 목록 */
h2.card-header {
	font-size: 1rem;
	letter-spacing: -0.01em;
}

.gym-dl {
	margin: 0;
}

.gym-dl-row {
	display: grid;
	grid-template-columns: minmax(6rem, 1fr) 3fr;
	gap: var(--gym-space-1) var(--gym-space-4);
	padding: var(--gym-space-3) 0;
	border-bottom: 1px solid var(--gym-border);
}

.gym-dl-row:first-child {
	padding-top: 0;
}

.gym-dl-row:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.gym-dl dt {
	color: var(--gym-text-secondary);
	font-weight: 500;
}

.gym-dl dd {
	margin: 0;
	min-width: 0;
}

@media (max-width: 575.98px) {
	.gym-dl-row {
		grid-template-columns: 1fr;
	}
}

/* 메모 등 여러 줄 글: 넣은 줄바꿈을 그대로 보인다 */
.gym-pre-line {
	white-space: pre-line;
}

.gym-state-body {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--gym-space-3);
}

.gym-state-body form {
	margin: 0;
}

/* ============================================================ 회원권 상품 (목록·가격표·상품권 구분) */
/* 비활성 행: 회색 글자로 구분 (배지와 함께 — 색만으로 구분하지 않는다) */
.gym-row-inactive > * {
	color: var(--gym-text-tertiary);
}

/* 목록의 상품 메모 첫 줄 (상세는 .gym-page-lead + .gym-pre-line) */
.gym-product-memo {
	margin: var(--gym-space-1) 0 0;
	color: var(--gym-text-secondary);
	font-size: 0.8125rem;
	font-weight: 400;
}

.gym-row-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--gym-space-2);
}

.gym-row-actions form {
	margin: 0;
}

/* 가격표: 스크롤 없이 폭에 맞춘다(가로·세로 모두). 넓으면 고정 배치 표 — 열이 많거나 이름이 길면 칸 안에서 줄바꿈.
   좁으면(md 미만) 행마다 카드로 쌓는다(행 이름이 제목, 칸 이름은 td 의 data-label). */
.gym-price-grid {
	table-layout: fixed;
	font-size: 0.875rem;
}

.gym-price-grid > :not(caption) > * > * {
	padding: var(--gym-space-2);
	word-break: keep-all;
	overflow-wrap: anywhere;
	vertical-align: middle;
}

.gym-price-grid thead th {
	color: var(--gym-text-secondary);
	font-size: 0.8125rem;
	font-weight: 600;
}

/* 첫 열(기간): 표 폭의 일부만 쓰고 나머지를 구분 열이 나눈다 */
.gym-price-grid thead th:first-child {
	width: 22%;
}

.gym-price-grid thead th .badge {
	display: table;
	margin-top: var(--gym-space-1);
	white-space: normal;
	text-align: left;
}

.gym-price-grid th[scope="row"] {
	font-weight: 600;
}

.gym-price-cell a {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.gym-price-cell-inactive a {
	color: var(--gym-text-tertiary);
	font-weight: 500;
}

/* 금액 아래에 배지를 쌓는다(칸이 좁아도 옆으로 넘치지 않게) */
.gym-price-cell .badge {
	display: table;
	margin-top: var(--gym-space-1);
}

@media (min-width: 1200px) {
	.gym-price-grid > :not(caption) > * > * {
		padding: var(--gym-space-2) var(--gym-space-3);
	}
}

@media (max-width: 767.98px) {
	.gym-price-grid thead {
		position: absolute;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	.gym-price-grid,
	.gym-price-grid tbody,
	.gym-price-grid tr {
		display: block;
	}

	.gym-price-grid {
		font-size: inherit;
	}

	.gym-price-grid tr {
		margin-bottom: var(--gym-space-3);
		padding: var(--gym-space-2) var(--gym-space-3);
		border: 1px solid var(--gym-border);
		border-radius: var(--gym-radius-lg);
	}

	.gym-price-grid tr:last-child {
		margin-bottom: 0;
	}

	.gym-price-grid > :not(caption) > * > * {
		border-bottom: 0;
		background-color: transparent;
		box-shadow: none;
	}

	.gym-price-grid tbody th[scope="row"] {
		display: block;
		padding: var(--gym-space-1) 0 var(--gym-space-2);
		margin-bottom: var(--gym-space-1);
		border-bottom: 1px solid var(--gym-border);
		font-size: 1rem;
	}

	.gym-price-grid tbody td {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		gap: var(--gym-space-1) var(--gym-space-3);
		padding: var(--gym-space-1) 0;
		text-align: right;
	}

	.gym-price-grid tbody td::before {
		content: attr(data-label);
		flex: 1 1 0;
		min-width: 0;
		color: var(--gym-text-secondary);
		font-size: 0.875rem;
		font-weight: 500;
		text-align: left;
	}

	/* 카드에서는 금액·배지를 한 줄에(넘치면 줄바꿈) */
	.gym-price-cell .badge {
		display: inline-block;
		margin-top: 0;
		margin-left: var(--gym-space-1);
	}
}

/* 옵션 기간: 단위 라디오 + 단위별 값 입력 */
.gym-duration-options {
	display: flex;
	flex-direction: column;
	gap: var(--gym-space-2);
}

.gym-duration-option {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gym-space-2);
}

.gym-duration-option .form-check-input {
	margin-top: 0;
}

.gym-duration-option .form-check-label {
	min-width: 2.5rem;
}

.gym-duration-input {
	max-width: 12rem;
}

/* ============================================================ 회원권 (회원 상세 목록·등록·수정·홀딩·취소·이력) */
/* 회원 단위 상태 배지(목록·상세의 .gym-membership-badge — 클래스는 MembershipStatusView.badgeClass()).
   홀딩(text-bg-warning)은 테두리로 다른 색 배지와 한 번 더 구분하고, 만료(bg-danger-subtle)는 굵은 글자 + 테두리로 강조한다.
   색만으로 구분하지 않는다 — 배지 문구가 상태를 말한다. 회원권 한 건의 배지(.gym-card-badge)도 같은 규칙. */
.gym-membership-badge.text-bg-warning,
.gym-card-badge.text-bg-warning {
	border: 1px solid var(--gym-warning-border);
}

.gym-membership-badge.bg-danger-subtle,
.gym-card-badge.bg-danger-subtle {
	border: 1px solid var(--bs-danger-border-subtle);
	font-weight: 700;
}

/* 카드 머리글에 제목 + 버튼 */
.gym-card-header-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--gym-space-2);
}

.gym-card-header-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.gym-membership-list,
.gym-history-list {
	display: flex;
	flex-direction: column;
	gap: var(--gym-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gym-membership {
	padding: var(--gym-space-4);
	border: 1px solid var(--gym-border);
	border-radius: var(--gym-radius);
	background-color: var(--gym-surface);
	min-width: 0;
}

/* 취소된 회원권: 회색 바탕 + 배지 "취소" (색만으로 구분하지 않는다) */
.gym-membership-canceled {
	background-color: var(--gym-surface-muted);
}

.gym-membership-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--gym-space-2);
	margin-bottom: var(--gym-space-3);
}

.gym-membership-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--gym-space-1) var(--gym-space-2);
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	min-width: 0;
	overflow-wrap: anywhere;
}

.gym-membership-option {
	color: var(--gym-text-secondary);
	font-weight: 500;
	font-size: 0.9375rem;
}

/* 이름-값 칸: 넓으면 2열, 좁으면 1열 */
.gym-membership-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: var(--gym-space-2) var(--gym-space-4);
	margin: 0;
}

.gym-membership-facts dt {
	color: var(--gym-text-secondary);
	font-size: 0.8125rem;
	font-weight: 500;
}

.gym-membership-facts dd {
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

.gym-membership-note {
	display: inline-block;
	margin-left: var(--gym-space-1);
	color: var(--gym-warning-text);
	font-size: 0.8125rem;
	font-weight: 600;
}

.gym-membership-base {
	color: var(--gym-text-secondary);
}

.gym-hold-block {
	margin-top: var(--gym-space-3);
	padding-top: var(--gym-space-3);
	border-top: 1px solid var(--gym-border);
}

.gym-hold-heading {
	margin: 0 0 var(--gym-space-2);
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--gym-text-secondary);
}

.gym-hold-list {
	display: flex;
	flex-direction: column;
	gap: var(--gym-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gym-hold {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gym-space-2);
}

.gym-hold-actions {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--gym-space-2);
	margin-left: auto;
}

.gym-membership-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gym-space-2);
	margin-top: var(--gym-space-3);
	padding-top: var(--gym-space-3);
	border-top: 1px solid var(--gym-border);
}

/* 등록 화면의 "지금 회원권" 요약: 한 줄(좁으면 줄바꿈) */
.gym-current-list {
	display: flex;
	flex-direction: column;
	gap: var(--gym-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gym-current-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gym-space-1) var(--gym-space-3);
	padding: var(--gym-space-2) var(--gym-space-3);
	background-color: var(--gym-surface-muted);
	border-radius: var(--gym-radius-sm);
	min-width: 0;
}

.gym-current-name {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.gym-current-sessions {
	color: var(--gym-text-secondary);
	font-size: 0.875rem;
}

.gym-current-canceled {
	margin-top: var(--gym-space-3);
}

.gym-current-canceled > summary {
	color: var(--gym-text-secondary);
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	margin-bottom: var(--gym-space-2);
}

/* 위쪽 오류(409)·확인 경고 */
.gym-alert-title {
	margin: 0 0 var(--gym-space-1);
	font-size: 1rem;
	font-weight: 700;
}

.gym-conflict-list,
.gym-warning-list {
	margin: var(--gym-space-2) 0 0;
	padding-left: var(--gym-space-5);
}

.gym-warning-list {
	margin-bottom: var(--gym-space-3);
}

.gym-conflict-list a {
	color: inherit;
	font-weight: 600;
	overflow-wrap: anywhere;
}

/* 등록 방식: 라디오(.btn-check) + 세그먼트 모양 라벨 */
.btn-check:checked + .gym-segment,
.btn-check:checked + .gym-segment:hover {
	background-color: var(--gym-accent);
	color: var(--gym-accent-contrast);
	font-weight: 600;
	box-shadow: var(--gym-shadow-xs);
}

.btn-check:focus-visible + .gym-segment {
	outline: var(--gym-focus-outline);
	outline-offset: 2px;
}

.gym-segmented-radio {
	display: flex;
}

.gym-segmented-radio .gym-segment {
	flex: 1 1 auto;
	text-align: center;
}

/* 폼 칸 2개 나란히(좁으면 1열) */
.gym-form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	gap: var(--gym-space-4);
}

/* 이력 */
.gym-history-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--gym-space-1) var(--gym-space-3);
	margin-bottom: var(--gym-space-3);
}

.gym-history-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
}

.gym-history-meta {
	margin: 0;
	color: var(--gym-text-secondary);
	font-size: 0.875rem;
}

.gym-history-rows {
	display: flex;
	flex-direction: column;
	gap: var(--gym-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gym-history-rows li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--gym-space-1) var(--gym-space-3);
	padding: var(--gym-space-2) var(--gym-space-3);
	background-color: var(--gym-surface-muted);
	border-radius: var(--gym-radius-sm);
	min-width: 0;
}

.gym-history-field {
	color: var(--gym-text-secondary);
	font-weight: 600;
	font-size: 0.875rem;
}

.gym-history-change {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--gym-space-1);
	min-width: 0;
	overflow-wrap: anywhere;
}

.gym-history-old {
	color: var(--gym-text-secondary);
}

.gym-history-new {
	font-weight: 600;
}

.gym-history-cause {
	color: var(--gym-text-secondary);
	font-size: 0.875rem;
}

/* ============================================================ 움직임 줄이기 */
@media (prefers-reduced-motion: reduce) {
	.gym-nav-link {
		transition: none;
	}
}

/* ============================================================ 출석 조회 (W://root/attendance/attendance_ui) */
/* 일별·회원별 전환 링크(세그먼트 모양) */
a.gym-segment {
	display: inline-block;
	text-decoration: none;
}

/* 요약: 그날 출석 수 + 최근 7일 막대(높이는 data-level 0~10 단계 — 인라인 style 없음, 숫자는 글자로도 보임) */
.gym-att-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--gym-space-5);
}

.gym-att-week {
	display: grid;
	flex: 1 1 18rem;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: var(--gym-space-1);
	max-width: 36rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gym-att-week a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gym-space-1);
	padding: var(--gym-space-1);
	color: var(--gym-text);
	text-decoration: none;
	border-radius: var(--gym-radius);
}

.gym-att-week a:hover,
.gym-att-week .is-selected a {
	background-color: var(--gym-surface-muted);
}

.gym-att-week .is-selected a {
	font-weight: 700;
}

.gym-att-week a:focus-visible {
	outline: var(--gym-focus-outline);
	outline-offset: 2px;
}

.gym-att-bar {
	display: flex;
	align-items: flex-end;
	width: 100%;
	max-width: 2rem;
	height: 4rem;
	overflow: hidden;
	background-color: var(--gym-surface-muted);
	border-radius: var(--gym-radius-sm);
}

.gym-att-bar::after {
	content: "";
	display: block;
	width: 100%;
	height: 0;
	background-color: var(--gym-accent);
}

.gym-att-bar[data-level="1"]::after {
	height: 10%;
}

.gym-att-bar[data-level="2"]::after {
	height: 20%;
}

.gym-att-bar[data-level="3"]::after {
	height: 30%;
}

.gym-att-bar[data-level="4"]::after {
	height: 40%;
}

.gym-att-bar[data-level="5"]::after {
	height: 50%;
}

.gym-att-bar[data-level="6"]::after {
	height: 60%;
}

.gym-att-bar[data-level="7"]::after {
	height: 70%;
}

.gym-att-bar[data-level="8"]::after {
	height: 80%;
}

.gym-att-bar[data-level="9"]::after {
	height: 90%;
}

.gym-att-bar[data-level="10"]::after {
	height: 100%;
}

.gym-att-bar-count {
	font-weight: 700;
}

.gym-att-bar-label {
	font-size: 0.875rem;
	color: var(--gym-text-secondary);
	text-align: center;
}

/* 기간 요약 막대(31개 이하): 칸이 좁으면 막대 줄만 가로로 넘겨 본다 */
.gym-att-range {
	display: grid;
	grid-auto-columns: minmax(2.25rem, 1fr);
	grid-auto-flow: column;
	gap: var(--gym-space-1);
	margin-bottom: 0;
	padding: 0 0 var(--gym-space-1);
	overflow-x: auto;
	list-style: none;
}

.gym-att-range a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gym-space-1);
	padding: var(--gym-space-1) 0;
	color: var(--gym-text);
	text-decoration: none;
	border-radius: var(--gym-radius);
}

.gym-att-range a:hover {
	background-color: var(--gym-surface-muted);
}

.gym-att-range a:focus-visible {
	outline: var(--gym-focus-outline);
	outline-offset: -2px;
}

.gym-att-range .gym-att-bar-label {
	font-size: 0.75rem;
}

.gym-att-sub {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--gym-text-secondary);
}

.gym-att-q {
	flex: 1 1 12rem;
}

/* 출석률: 숫자 + 가로 막대(data-level 0~10 = 10% 단위, 인라인 style 없음) */
.gym-rate {
	display: inline-flex;
	align-items: center;
	gap: var(--gym-space-2);
}

.gym-rate-value {
	min-width: 2.75rem;
	font-weight: 700;
}

.gym-rate-bar {
	display: inline-block;
	width: 5rem;
	height: 0.5rem;
	overflow: hidden;
	background-color: var(--gym-surface-muted);
	border-radius: var(--gym-radius-pill);
}

.gym-rate-bar::after {
	content: "";
	display: block;
	width: 0;
	height: 100%;
	background-color: var(--gym-accent);
}

.gym-rate-bar[data-level="1"]::after {
	width: 10%;
}

.gym-rate-bar[data-level="2"]::after {
	width: 20%;
}

.gym-rate-bar[data-level="3"]::after {
	width: 30%;
}

.gym-rate-bar[data-level="4"]::after {
	width: 40%;
}

.gym-rate-bar[data-level="5"]::after {
	width: 50%;
}

.gym-rate-bar[data-level="6"]::after {
	width: 60%;
}

.gym-rate-bar[data-level="7"]::after {
	width: 70%;
}

.gym-rate-bar[data-level="8"]::after {
	width: 80%;
}

.gym-rate-bar[data-level="9"]::after {
	width: 90%;
}

.gym-rate-bar[data-level="10"]::after {
	width: 100%;
}

.gym-cal-rate {
	margin: 0 0 var(--gym-space-2);
	text-align: center;
}

/* 회원 상세: 아래 탭(링크 — 서버가 고른 탭만 보임)과 접힌 지난·취소 회원권 */
.gym-detail-tabs {
	display: flex;
	width: fit-content;
	max-width: 100%;
}

.gym-past-memberships {
	margin-top: var(--gym-space-4);
}

.gym-past-memberships > summary {
	padding: var(--gym-space-2) 0;
	font-weight: 600;
	color: var(--gym-text-secondary);
	cursor: pointer;
}

.gym-past-memberships > summary:focus-visible {
	outline: var(--gym-focus-outline);
	outline-offset: 2px;
}

.gym-cal-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--gym-space-1) var(--gym-space-2);
}

/* 미출석 일수: 14일 이상·기록 없음은 굵게 + 경고 글자색(문구가 일수를 말한다 — 색만으로 구분하지 않음) */
.gym-absence.is-long {
	font-weight: 600;
	color: var(--gym-warning-text);
}

/* 미출석 배지(출석률 탭·회원 상세): 배지 색이 글자색을 정한다(안쪽 is-long 의 경고 글자색은 쓰지 않음) */
.gym-absence-badge .gym-absence.is-long {
	color: inherit;
}

.gym-absence-badge-none {
	color: var(--bs-danger-text-emphasis);
	background-color: var(--bs-danger-bg-subtle);
	border: 1px solid var(--bs-danger-border-subtle);
}

/* 조회 조건: 날짜(전날·다음 날) · 경로 · 경고만 · 조회 */
.gym-att-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--gym-space-4);
}

.gym-att-filter fieldset {
	margin: 0;
}

.gym-att-date {
	display: flex;
	align-items: center;
	gap: var(--gym-space-1);
}

.gym-att-date .form-control {
	width: auto;
}

.gym-att-warnings {
	padding-bottom: var(--gym-space-2);
}

/* 이용권 외 출석 행: 경고 바탕 + "이용권 외" 표시(색만으로 구분하지 않음) */
.gym-attendance-warning > * {
	--bs-table-bg: var(--gym-warning-bg);
}

.gym-attendance-flag {
	display: inline-block;
	margin-left: var(--gym-space-1);
	padding: 0 var(--gym-space-1);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--gym-warning-text);
	border: 1px solid var(--gym-warning-border);
	border-radius: var(--gym-radius-sm);
}

/* 회원 찾기 결과 */
.gym-att-pick {
	display: grid;
	gap: var(--gym-space-1);
	padding: 0;
	list-style: none;
}

.gym-att-pick a {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gym-space-2);
	padding: var(--gym-space-2) var(--gym-space-3);
	color: var(--gym-text);
	text-decoration: none;
	border: 1px solid var(--gym-border);
	border-radius: var(--gym-radius);
}

.gym-att-pick a:hover {
	background-color: var(--gym-surface-muted);
}

.gym-att-pick a.active {
	border-color: var(--gym-accent);
	box-shadow: inset 3px 0 0 var(--gym-accent);
}

.gym-att-pick a:focus-visible {
	outline: var(--gym-focus-outline);
	outline-offset: 2px;
}

/* 회원 상세의 월별 출석 달력(일~토): 출석한 날 = 대표 색상 바탕, 오늘 = 테두리 */
.gym-cal-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gym-space-2);
	margin-bottom: var(--gym-space-3);
}

.gym-cal-title {
	font-weight: 700;
	text-align: center;
}

.gym-cal-count {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--gym-text-secondary);
}

.gym-cal {
	width: 100%;
	max-width: 28rem;
	margin: 0 auto;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: var(--gym-space-1);
}

.gym-cal th {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--gym-text-secondary);
	text-align: center;
}

.gym-cal-cell {
	height: 2.25rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
	border-radius: var(--gym-radius);
}

.gym-cal-cell.is-attended,
.gym-cal-legend.is-attended {
	font-weight: 700;
	color: var(--gym-accent-contrast);
	background-color: var(--gym-accent);
}

.gym-cal-cell.is-today,
.gym-cal-legend.is-today {
	box-shadow: inset 0 0 0 2px var(--gym-text);
}

.gym-cal-legend {
	display: inline-block;
	width: 0.875rem;
	height: 0.875rem;
	vertical-align: -0.125rem;
	border-radius: var(--gym-radius-sm);
}

/* ============================================================ 키오스크 체크인 (W://root/checkin/kiosk_ui)
   회원이 보는 전체화면 앱. 테마는 <html data-theme="dark|light">(체육관 설정, 기본 다크) — 키오스크에만 쓰는 테마 변수(--kiosk-*).
   라이트는 기존 --gym-* 토큰 그대로, 다크는 이 블록에서만 정의한 짙은 남색 계열(키오스크 전용). 강조색 = 대표 색상(--gym-accent·대비색).
   상태 색(성공·안내·경고·오류)은 Bootstrap(data-bs-theme 로 다크 대응). 움직임은 prefers-reduced-motion 이면 끈다. */
html[data-theme="light"] {
	--kiosk-bg: var(--gym-bg);
	--kiosk-surface: var(--gym-surface);
	--kiosk-surface-2: var(--gym-surface-muted);
	--kiosk-border: var(--gym-border);
	--kiosk-text: var(--gym-text);
	--kiosk-text-dim: var(--gym-text-secondary);
	--kiosk-key-bg: var(--gym-surface);
	--kiosk-key-pressed: var(--gym-surface-muted);
	--kiosk-shadow: var(--gym-shadow-lg);
}

html[data-theme="dark"] {
	--kiosk-bg: #0b1020;
	--kiosk-surface: #121a2e;
	--kiosk-surface-2: #18223a;
	--kiosk-border: #26314f;
	--kiosk-text: #f5f7fb;
	--kiosk-text-dim: #a9b4cc;
	--kiosk-key-bg: #18223a;
	--kiosk-key-pressed: #22305a;
	--kiosk-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.6);
}

html[data-theme],
html[data-theme] body.gym-kiosk {
	height: 100%;
}

html[data-theme] body.gym-kiosk {
	min-height: 100vh;
	min-height: 100dvh;
	height: 100dvh;
	margin: 0;
	overflow: hidden;
	color: var(--kiosk-text);
	background:
		radial-gradient(ellipse at top, rgba(var(--gym-accent-rgb), 0.22), transparent 60%),
		var(--kiosk-bg);
	/* 회원 화면: 글자 선택·길게 눌러 메뉴·두 번 탭 확대 막기(직원 영역 입력칸만 선택 허용) */
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.gym-kiosk input {
	-webkit-user-select: text;
	user-select: text;
}

.gym-kiosk-app {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* 위쪽: 첫 줄 = 로고 + 체육관 이름(한 줄, 길면 글자를 줄이다 말줄임 — 직원 길게 누르기 대상), 둘째 줄 = 시계·날짜(가운데).
   한 줄 유지는 white-space 대신: 이름은 한 줄 line-clamp(말줄임), 날짜는 JS 가 붙임 공백(NBSP)으로 잇고 text-wrap 으로 한 번 더. */
.gym-kiosk-topbar {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: stretch;
	gap: var(--gym-space-2);
	padding: clamp(var(--gym-space-2), 1.5dvh, var(--gym-space-3)) var(--gym-space-5) clamp(var(--gym-space-1), 1dvh, var(--gym-space-2));
}

.gym-kiosk-topbar .gym-kiosk-brand {
	flex-direction: row;
	justify-content: center;
	gap: var(--gym-space-3);
	width: 100%;
	min-width: 0;
	margin: 0;
}

.gym-kiosk-topbar .gym-kiosk-brand .gym-logo,
.gym-kiosk-topbar .gym-kiosk-brand .gym-brand-mark {
	flex: 0 0 auto;
	height: clamp(1.75rem, min(4.5vw, 4.5dvh), 3rem);
	border-radius: var(--gym-radius-lg);
}

.gym-kiosk-topbar .gym-kiosk-brand .gym-brand-mark {
	flex: 0 0 auto;
}

.gym-kiosk-topbar .gym-kiosk-name {
	display: -webkit-box;
	min-width: 0;
	overflow: hidden;
	font-size: clamp(1.125rem, min(3.2vw, 3.2dvh), 2rem);
	line-height: 1.2;
	color: var(--kiosk-text);
	text-overflow: ellipsis;
	overflow-wrap: anywhere;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	line-clamp: 1;
}

.gym-kiosk-clock {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.1;
	text-align: center;
}

.gym-kiosk-clock-time {
	font-size: clamp(1.75rem, min(7vw, 6.5dvh), 4rem);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.03em;
}

.gym-kiosk-clock-date {
	font-size: clamp(0.875rem, min(2.2vw, 2.2dvh), 1.375rem);
	color: var(--kiosk-text-dim);
	text-wrap: nowrap;
}

/* 화면 맞춤(휴대폰 세로 ~ 가로 태블릿): 위쪽 막대·하단을 뺀 높이 안에 패널이 들어가도록 flex 세로 사슬(min-height: 0)로 줄인다.
   번호 입력 화면은 키패드가 남는 높이에 맞춰 줄어든다(스크롤 없음). 다른 화면은 넘치면 그 화면 안에서만 스크롤. */
html[data-theme] .gym-kiosk-main {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	min-height: 0;
	overflow: auto;
	padding: clamp(var(--gym-space-2), 2dvh, var(--gym-space-5)) clamp(var(--gym-space-2), 2vw, var(--gym-space-5));
}

html[data-theme] .gym-kiosk-panel {
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	min-height: 0;
	max-width: 56rem;
	margin: auto;
	overflow: auto;
	padding: clamp(var(--gym-space-3), 3dvh, var(--gym-space-7)) clamp(var(--gym-space-3), 4vw, var(--gym-space-7));
	color: var(--kiosk-text);
	background-color: var(--kiosk-surface);
	border-color: var(--kiosk-border);
	box-shadow: var(--kiosk-shadow);
}

html[data-theme] .gym-kiosk-message {
	flex: 0 0 auto;
	margin: 0 auto clamp(var(--gym-space-3), 2.5dvh, var(--gym-space-6));
	padding: clamp(var(--gym-space-2), 1.5dvh, var(--gym-space-4)) clamp(var(--gym-space-3), 2vw, var(--gym-space-5));
	font-size: clamp(1rem, min(3vw, 2.4dvh), 1.625rem);
	line-height: 1.5;
	color: var(--kiosk-text);
	background-color: var(--kiosk-surface-2);
}

html[data-theme] .gym-kiosk .gym-footer {
	flex: 0 0 auto;
	padding: var(--gym-space-2) var(--gym-space-4);
	color: var(--kiosk-text-dim);
	background: transparent;
}

.gym-kiosk-screen[hidden] {
	display: none !important;
}

.gym-kiosk-screen {
	flex: 0 1 auto;
	min-height: 0;
	overflow-y: auto;
	animation: gym-kiosk-in 0.22s ease-out;
}

/* 번호 입력·본인 선택: 세로 flex — 키패드(목록)만 줄어들고(나머지는 flex 기본 min-height: auto 로 제 높이) 확인/지우기·취소 줄은 늘 보인다 */
.gym-kiosk-screen[data-kiosk-screen="input"],
.gym-kiosk-screen[data-kiosk-screen="candidates"] {
	display: flex;
	flex-direction: column;
	overflow: visible;
}


@keyframes gym-kiosk-in {
	from {
		opacity: 0;
		transform: translateY(0.5rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.gym-kiosk-prompt {
	margin: 0 0 clamp(var(--gym-space-2), 2dvh, var(--gym-space-4));
	font-size: clamp(1.25rem, min(4.5vw, 3.6dvh), 2.25rem);
	text-wrap: balance;
	font-weight: 700;
}

/* 점 4개: 채워질 때 톡 튀어나옴 */
.gym-kiosk-dots {
	display: flex;
	justify-content: center;
	gap: var(--gym-space-3);
	margin: 0 0 clamp(var(--gym-space-3), 2.5dvh, var(--gym-space-5));
}

/* 입력 칸: PIN 입력 칸처럼 모서리가 둥근 네모. 빈 칸 = 테두리만, 채운 칸 = 강조색으로 채움(숫자는 보이지 않는다) */
.gym-kiosk-dot {
	width: clamp(2.25rem, 6dvh, 3rem);
	height: clamp(2.625rem, 7dvh, 3.5rem);
	background-color: var(--kiosk-surface);
	border: 2px solid var(--kiosk-text-dim);
	border-radius: var(--gym-radius-lg);
	transition: background-color 0.12s, border-color 0.12s;
}

.gym-kiosk-dot.is-filled {
	background-color: var(--gym-accent);
	border-color: var(--gym-accent);
	animation: gym-kiosk-pop 0.18s ease-out;
}

@keyframes gym-kiosk-pop {
	0% {
		transform: scale(0.6);
	}

	60% {
		transform: scale(1.18);
	}

	100% {
		transform: scale(1);
	}
}

/* 키패드: 크고 누르는 느낌(눌리면 작아짐) */
/* 높이: 키 한 줄 clamp(3rem, 11dvh, 6.5rem) × 4 를 바라되, 남는 높이가 모자라면 그만큼 줄어든다(줄 최소 2.75rem) */
.gym-kiosk-keypad {
	display: grid;
	flex: 0 1 auto;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: repeat(4, minmax(2.75rem, 1fr));
	gap: clamp(var(--gym-space-2), 1.2dvh, var(--gym-space-3));
	width: 100%;
	max-width: 30rem;
	height: calc(4 * clamp(3rem, 11dvh, 6.5rem) + 3 * var(--gym-space-3));
	min-height: 0;
	margin: 0 auto;
}

.gym-kiosk .gym-kiosk-key {
	min-height: 0;
	padding-block: 0;
	font-size: clamp(1.5rem, min(4.5vw, 4.5dvh), 2.75rem);
	font-weight: 700;
	color: var(--kiosk-text);
	background-color: var(--kiosk-key-bg);
	border: 1px solid var(--kiosk-border);
	border-radius: var(--gym-radius-xl);
	box-shadow: 0 2px 0 var(--kiosk-border);
	transition: transform 0.08s ease-out, background-color 0.12s, box-shadow 0.08s;
}

.gym-kiosk .gym-kiosk-key:active {
	transform: scale(0.95);
	background-color: var(--kiosk-key-pressed);
	box-shadow: none;
}

.gym-kiosk .gym-kiosk-key-muted {
	font-size: clamp(1.25rem, 3vw, 1.625rem);
	color: var(--kiosk-text-dim);
}

.gym-kiosk .gym-kiosk-key-primary,
.gym-kiosk .gym-kiosk-action-primary {
	color: var(--gym-accent-contrast);
	background-color: var(--gym-accent);
	border-color: var(--gym-accent);
	box-shadow: 0 2px 0 var(--gym-accent-active);
}

.gym-kiosk .gym-kiosk-key-primary:active,
.gym-kiosk .gym-kiosk-action-primary:active {
	color: var(--gym-accent-contrast);
	background-color: var(--gym-accent-active);
	border-color: var(--gym-accent-active);
}

.gym-kiosk .gym-kiosk-key:focus-visible,
.gym-kiosk .gym-kiosk-candidate:focus-visible,
.gym-kiosk .gym-kiosk-actions .btn:focus-visible {
	outline: var(--gym-focus-outline);
	outline-offset: 2px;
}

.gym-kiosk-name-big {
	margin: 0 0 var(--gym-space-5);
	font-size: clamp(2.25rem, 7vw, 4rem);
	font-weight: 800;
}

.gym-kiosk-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gym-space-4);
}

.gym-kiosk .gym-kiosk-actions .btn {
	min-width: 10rem;
	min-height: 4.5rem;
	font-size: clamp(1.25rem, 3vw, 1.625rem);
	font-weight: 700;
	border-radius: var(--gym-radius-xl);
	transition: transform 0.08s ease-out;
}

.gym-kiosk .gym-kiosk-actions .btn:active {
	transform: scale(0.96);
}

.gym-kiosk .gym-kiosk-action-secondary {
	color: var(--kiosk-text);
	background-color: var(--kiosk-surface-2);
	border: 1px solid var(--kiosk-border);
}

/* 후보 카드 */
.gym-kiosk .gym-kiosk-screen[data-kiosk-screen="candidates"] > .gym-kiosk-candidates {
	flex: 0 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: var(--gym-space-1);
}

.gym-kiosk-candidates {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: var(--gym-space-3);
	max-width: 44rem;
	margin: 0 auto var(--gym-space-5);
	padding: 0;
	list-style: none;
}

.gym-kiosk .gym-kiosk-candidate {
	width: 100%;
	min-height: 5.5rem;
	padding: var(--gym-space-4);
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	font-weight: 700;
	color: var(--kiosk-text);
	background-color: var(--kiosk-surface-2);
	border: 1px solid var(--kiosk-border);
	border-radius: var(--gym-radius-xl);
	box-shadow: 0 2px 0 var(--kiosk-border);
	transition: transform 0.08s ease-out;
}

.gym-kiosk .gym-kiosk-candidate:active {
	transform: scale(0.97);
	border-color: var(--gym-accent);
}

/* 결과: 휴대폰까지 한 화면(스크롤 없이). 머리(체크·"출석 완료 HH:mm"·이름 한 줄, 경고 칩 한 줄로 이어짐) +
   회원권(최대 2개 + "외 N개", 한 개당 두 줄)·이번 달 달력(작은 칸 — 높이에 맞춤). 넓은 가로 화면은 회원권·달력을 나란히. */
.gym-kiosk-screen[data-kiosk-screen="result"] {
	display: flex;
	flex-direction: column;
}

/* 줄어드는 건 달력 칸뿐(아래 data-weeks). 그래도 넘치는 극단(아주 낮은 화면)에는 이 상자 안에서만 스크롤 — 남은 시간 줄은 늘 보인다 */
.gym-kiosk-result {
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	gap: clamp(var(--gym-space-2), 1.5dvh, var(--gym-space-4));
	min-height: 0;
	overflow-y: auto;
}

/* 결과 화면에서는 안내 문구(번호 입력용)를 숨겨 자리를 준다 */
.gym-kiosk-panel:has(> .gym-kiosk-screen[data-kiosk-screen="result"]:not([hidden])) > .gym-kiosk-message {
	display: none;
}

.gym-kiosk-result-head {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--gym-space-1) var(--gym-space-3);
	padding: clamp(var(--gym-space-2), 1.5dvh, var(--gym-space-4)) clamp(var(--gym-space-3), 2vw, var(--gym-space-5));
	text-align: center;
	border-radius: var(--gym-radius-xl);
}

.gym-kiosk-check {
	display: block;
	flex: 0 0 auto;
	width: clamp(2rem, 7dvh, 4.5rem);
	height: clamp(2rem, 7dvh, 4.5rem);
	margin: 0;
}

.gym-kiosk-check-circle {
	stroke: currentColor;
	stroke-width: 3;
	stroke-dasharray: 151;
	stroke-dashoffset: 151;
	animation: gym-kiosk-draw 0.5s ease-out forwards;
}

.gym-kiosk-check-mark {
	stroke: currentColor;
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 36;
	stroke-dashoffset: 36;
	animation: gym-kiosk-draw 0.3s 0.4s ease-out forwards;
}

@keyframes gym-kiosk-draw {
	to {
		stroke-dashoffset: 0;
	}
}

.gym-kiosk-result-title {
	margin: 0;
	font-size: clamp(1.5rem, min(6vw, 5dvh), 3.5rem);
	font-weight: 800;
	line-height: 1.2;
}

/* 머리 안: 이름은 제목 옆(좁으면 다음 줄), 내용 줄·경고 칩은 한 줄 전체 */
.gym-kiosk .gym-kiosk-result-head .gym-kiosk-sub {
	margin: 0;
	font-size: clamp(1.125rem, min(4vw, 3.2dvh), 1.75rem);
	font-weight: 700;
	color: inherit;
}

.gym-kiosk-result-lines,
.gym-kiosk-warnings,
.gym-kiosk-membership-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gym-kiosk-result-lines {
	display: flex;
	flex: 1 0 100%;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 var(--gym-space-3);
	font-size: clamp(1rem, min(3vw, 2.4dvh), 1.5rem);
	line-height: 1.4;
}

/* 경고 칩: 일시정지(정보 색)·만료/없음/시작 전(오류 색)·횟수·주 초과(경고 색) — 색은 Bootstrap text-bg-*. 한 줄로 이어 놓고 넘치면 다음 줄 */
.gym-kiosk-warnings {
	display: flex;
	flex: 1 0 100%;
	min-width: 0;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gym-space-1) var(--gym-space-2);
	margin-top: var(--gym-space-1);
	text-align: left;
}

/* 칩 한 개 = 한 줄(제목 + 설명, 넘치면 설명 말줄임) */
.gym-kiosk-chip {
	display: flex;
	align-items: baseline;
	min-width: 0;
	gap: 0 var(--gym-space-2);
	max-width: 100%;
	padding: var(--gym-space-1) var(--gym-space-3);
	font-size: clamp(0.9375rem, min(2.5vw, 2.2dvh), 1.25rem);
	line-height: 1.35;
	border-radius: var(--gym-radius-lg);
}

.gym-kiosk-chip strong {
	flex: 0 0 auto;
	font-weight: 800;
}

.gym-kiosk-chip > span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	text-wrap: nowrap;
}

.gym-kiosk-result-extra {
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	gap: clamp(var(--gym-space-2), 1.5dvh, var(--gym-space-4));
	min-height: 0;
}

.gym-kiosk-result-extra > .gym-kiosk-card {
	flex: 0 0 auto;
}

/* 달력 카드: 세로 flex — 달력 칸만 줄어든다 */
.gym-kiosk-result-extra > .gym-kiosk-card:has(> .gym-kiosk-cal) {
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	min-height: 0;
}

@media (min-width: 640px) and (orientation: landscape), (min-width: 900px) {
	.gym-kiosk-result-extra {
		flex-direction: row;
		align-items: stretch;
	}

	.gym-kiosk-result-extra > .gym-kiosk-card,
	.gym-kiosk-result-extra > .gym-kiosk-card:has(> .gym-kiosk-cal) {
		flex: 1 1 0;
		min-width: 0;
	}
}

.gym-kiosk-card {
	padding: clamp(var(--gym-space-2), 1.5dvh, var(--gym-space-4)) clamp(var(--gym-space-3), 2vw, var(--gym-space-4));
	text-align: left;
	background-color: var(--kiosk-surface-2);
	border: 1px solid var(--kiosk-border);
	border-radius: var(--gym-radius-xl);
}

.gym-kiosk-card[hidden],
.gym-kiosk-actions[hidden] {
	display: none;
}

.gym-kiosk-card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--gym-space-3);
}

.gym-kiosk-card-title {
	margin: 0 0 clamp(var(--gym-space-1), 1dvh, var(--gym-space-3));
	font-size: clamp(0.9375rem, min(2.5vw, 2.2dvh), 1.375rem);
	font-weight: 700;
	color: var(--kiosk-text-dim);
}

.gym-kiosk-month-count {
	font-size: clamp(0.9375rem, min(2.5vw, 2.2dvh), 1.375rem);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.gym-kiosk-membership-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(var(--gym-space-1), 1dvh, var(--gym-space-3));
}

.gym-kiosk-membership {
	padding: clamp(var(--gym-space-1), 1dvh, var(--gym-space-3)) var(--gym-space-3);
	background-color: var(--kiosk-surface);
	border: 1px solid var(--kiosk-border);
	border-radius: var(--gym-radius-lg);
}

/* 첫 줄: 이름 · 구분(한 줄, 길면 말줄임 — white-space 대신 text-wrap) + 상태 배지 */
.gym-kiosk-membership-name {
	display: flex;
	align-items: center;
	gap: var(--gym-space-2);
	font-size: clamp(1rem, min(2.5vw, 2.4dvh), 1.375rem);
	font-weight: 700;
	line-height: 1.3;
}

.gym-kiosk-membership-name > span:first-child {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	text-wrap: nowrap;
}

.gym-kiosk-membership-name > .badge {
	flex: 0 0 auto;
}

/* 둘째 줄: 기간 · 남은 횟수 · 이번 주 n/N */
.gym-kiosk-membership-meta,
.gym-kiosk-membership-more {
	font-size: clamp(0.875rem, min(2.2vw, 2dvh), 1.125rem);
	line-height: 1.35;
	color: var(--kiosk-text-dim);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.gym-kiosk-membership-more {
	padding-inline: var(--gym-space-3);
}

.gym-kiosk-membership-more.is-short {
	display: none;
}

/* 이번 달 달력(일~토): 칸 높이는 화면 높이에 맞춰 작게 */
.gym-kiosk-cal {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: var(--gym-space-1);
	text-align: center;
}

.gym-kiosk-cal-head {
	margin-bottom: var(--gym-space-1);
	font-size: clamp(0.75rem, 1.8dvh, 0.9rem);
	line-height: 1.2;
	color: var(--kiosk-text-dim);
}

/* 달력 본문: 주 수(data-weeks, JS)만큼 줄. 높이는 줄당 clamp(1.5rem, 4.5dvh, 2.75rem) 를 바라되 모자라면 줄어든다(줄 최소 1rem) */
.gym-kiosk-cal[data-weeks] {
	flex: 0 1 auto;
	grid-template-rows: repeat(5, minmax(1rem, 1fr));
	height: calc(5 * clamp(1.5rem, 4.5dvh, 2.75rem) + 4 * var(--gym-space-1));
	min-height: 0;
}

.gym-kiosk-cal[data-weeks="4"] {
	grid-template-rows: repeat(4, minmax(1rem, 1fr));
	height: calc(4 * clamp(1.5rem, 4.5dvh, 2.75rem) + 3 * var(--gym-space-1));
}

.gym-kiosk-cal[data-weeks="6"] {
	grid-template-rows: repeat(6, minmax(1rem, 1fr));
	height: calc(6 * clamp(1.5rem, 4.5dvh, 2.75rem) + 5 * var(--gym-space-1));
}

.gym-kiosk-cal-head,
.gym-kiosk-card-head {
	flex: 0 0 auto;
}

.gym-kiosk-cal-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	font-size: clamp(0.75rem, min(2.4vw, 2dvh), 1rem);
	font-variant-numeric: tabular-nums;
	border-radius: var(--gym-radius);
}

.gym-kiosk-cal-cell.is-attended {
	font-weight: 800;
	color: var(--gym-accent-contrast);
	background-color: var(--gym-accent);
}

.gym-kiosk-cal-cell.is-today {
	outline: 2px solid var(--kiosk-text);
	outline-offset: -2px;
}

/* 휴대폰(좁고 960px 이하)·낮은 화면: 경고 칩은 제목만(한 줄로 나란히). 더 짧으면 회원권 카드 제목·"화면을 누르면…" 안내 숨김 */
@media (max-height: 960px) and (max-width: 767px), (max-height: 700px) {
	.gym-kiosk-chip > span {
		display: none;
	}
}

@media (max-height: 760px) {
	.gym-kiosk-result-extra > .gym-kiosk-card > .gym-kiosk-card-title,
	.gym-kiosk-countdown-hint {
		display: none;
	}
}

/* 아주 낮은 화면(작은 휴대폰 + 브라우저 막대): 회원권은 첫 개 + "외 N개", 둘째 줄 한 줄, 칩·달력 머리 더 작게 */
@media (max-height: 600px) {
	.gym-kiosk-membership-meta {
		overflow: hidden;
		text-overflow: ellipsis;
		text-wrap: nowrap;
	}

	.gym-kiosk-membership-list > .gym-kiosk-membership:nth-child(n+2),
	.gym-kiosk-membership-more:not(.is-short) {
		display: none;
	}

	.gym-kiosk-membership-more.is-short {
		display: block;
	}

	.gym-kiosk-chip {
		padding: 0 var(--gym-space-2);
		font-size: 0.875rem;
	}

	.gym-kiosk-cal-head {
		display: none;
	}
}

html[data-theme] .gym-kiosk .gym-footer .fw-semibold {
	color: var(--kiosk-text);
}

.gym-kiosk-countdown {
	flex: 0 0 auto;
	margin: clamp(var(--gym-space-2), 1.5dvh, var(--gym-space-4)) 0 0;
	font-size: clamp(0.875rem, min(2.5vw, 2dvh), 1.125rem);
	color: var(--kiosk-text-dim);
	text-wrap: balance;
}

/* 키오스크 제목(h1·h2)은 공통 제목 색(--gym-text, 밝은 테마 값) 대신 테마 글자색 — 다크에서 안 보이던 문제 */
.gym-kiosk .gym-kiosk-prompt {
	color: var(--kiosk-text);
}

.gym-kiosk .gym-kiosk-staff .gym-kiosk-sub {
	color: var(--kiosk-text-dim);
}

.gym-kiosk-staff {
	margin-top: var(--gym-space-6);
	padding-top: var(--gym-space-4);
	border-top: 1px solid var(--kiosk-border);
	text-align: left;
}

/* 세로가 짧은 화면(휴대폰 세로 + 브라우저 막대, 가로 태블릿, 가로 휴대폰): 위쪽 막대를 한 줄(이름 왼쪽·시계 오른쪽)로,
   하단(체육관 정보 — 위쪽 이름과 겹침)은 숨긴다. 760px 이하는 안내 문구도 두 줄까지 작게 */
@media (max-height: 900px) {
	.gym-kiosk-topbar {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--gym-space-3);
		padding: var(--gym-space-2) var(--gym-space-4);
	}

	.gym-kiosk-topbar .gym-kiosk-brand {
		flex: 1 1 auto;
		justify-content: flex-start;
		width: auto;
	}

	.gym-kiosk-clock {
		flex: 0 0 auto;
		align-items: flex-end;
		text-align: end;
	}

	html[data-theme] .gym-kiosk .gym-footer {
		display: none;
	}
}

@media (max-height: 760px) {
	html[data-theme] .gym-kiosk-message {
		overflow: hidden;
		margin: 0 auto var(--gym-space-3);
		/* 두 줄 + 위 여백까지만 보이고 셋째 줄은 잘린다. 패널 안 flex 항목이라 line-clamp 가 듣지 않아 높이로 자르고,
		   아래 여백은 투명 테두리로(넘친 글자는 padding 상자에서 잘리므로 테두리 자리에는 그려지지 않는다) */
		padding: var(--gym-space-2) var(--gym-space-3) 0;
		border-bottom: var(--gym-space-2) solid transparent;
		font-size: 1rem;
		line-height: 1.4;
		max-height: calc(2 * 1.4em + 2 * var(--gym-space-2));
	}
}

@media (prefers-reduced-motion: reduce) {
	.gym-kiosk *,
	.gym-kiosk *::before,
	.gym-kiosk *::after {
		animation: none !important;
		transition: none !important;
	}

	.gym-kiosk-check-circle,
	.gym-kiosk-check-mark {
		stroke-dashoffset: 0;
	}
}