/* ============================================================
   배구부 앱 — 확정 디자인 시스템(F1: 혼합 레이아웃 + 바운스 색감)
   홈·팀=L1(히어로 밴드·타일·코트) / 로그인=L3(컴팩트 리스트)
   출석=L4(세그먼트·OTP) / MY·기록=L2(풀블리드 헤로·링·타임라인)
   ============================================================ */
:root {
	--vb-primary: #fb7185;
	--vb-primary-dark: #e04f66;
	--vb-bg: #fef9f2;
	--vb-card: #ffffff;
	--vb-text: #3b3430;
	--vb-muted: #93887d;
	--vb-border: #f0e6d8;
	--vb-success: #34d399;
	--vb-success-dark: #0d9668;
	--vb-success-soft: #e9fbf3;
	--vb-sky: #38bdf8;
	--vb-sky-soft: #e8f6fe;
	--vb-blue: #60a5fa;
	--vb-blue-dark: #2563eb;
	--vb-sun: #fbbf24;
	--vb-sun-soft: #fef5dd;
	--vb-lilac: #a78bfa;
	--vb-lilac-soft: #f3efff;
	--vb-danger: #dc2626;
	--vb-danger-soft: #fef2f2;
	--vb-radius: 22px;
	--vb-nav-height: 66px;
}

* {
	box-sizing: border-box;
}

html,
body {
	/* 모바일 오버스크롤 바운스·글로우 제거 (페이지 끝 넘어 당김 방지) */
	overscroll-behavior: none;
}

html {
	height: 100%;
	/* 오버스크롤로 드러나는 캔버스 색을 앱 베이스와 일치 — body 점 무늬가 캔버스로 전파되지 않게 html이 배경을 가짐 */
	background: var(--vb-bg);
}

body {
	min-height: 100%;
	margin: 0;
	font-family:
		"Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR",
		Roboto, sans-serif;
	background: #fbf1e3;
	background-image: radial-gradient(
		rgba(59, 52, 48, 0.07) 1.6px,
		transparent 1.6px
	);
	background-size: 26px 26px;
	color: var(--vb-text);
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
}

#blazor-error-ui {
	color: var(--vb-danger);
	background: var(--vb-danger-soft);
	bottom: var(--vb-nav-height);
	display: none;
	left: 0;
	right: 0;
	padding: 12px 16px;
	position: fixed;
	border-top: 2px solid #fecaca;
	white-space: pre-wrap;
	font-size: 0.85rem;
	font-weight: 600;
}

#blazor-error-ui.visible {
	display: block;
}

.app-shell {
	max-width: 560px;
	margin: 0 auto;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	background: var(--vb-bg);
}

.app-content {
	flex: 1;
	padding: 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* 하단 메뉴가 있는 MainLayout만 nav 회피 여백 예약. */
.app-content.has-nav {
	padding-bottom: calc(var(--vb-nav-height) + 30px);
}

/* 인증 화면은 배경만 전체 폭으로 채우고 폼의 기존 콘텐츠 폭은 유지. */
.auth-shell {
	max-width: none;
}
.auth-shell > .app-content {
	width: 100%;
	max-width: 560px;
	margin-inline: auto;
}

.page-title {
	margin: 4px 4px 0;
	font-size: 1.15rem;
	font-weight: 900;
	letter-spacing: -0.02em;
}

/* ---- 세그먼트(관리자 내비) — 헤더 곡선 아래 소폭 간격 ---- */
.segment {
	display: flex;
	gap: 4px;
	background: #fffdf8;
	border: 2px solid #ecdcc4;
	border-radius: 999px;
	padding: 4px;
	position: relative;
	z-index: 5;
	box-shadow: 0 5px 0 rgba(59, 52, 48, 0.08);
}
.seg-btn {
	flex: 1;
	border: none;
	background: transparent;
	font-family: inherit;
	padding: 8px 0;
	border-radius: 999px;
	font-size: 0.76rem;
	font-weight: 800;
	color: var(--vb-muted);
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	display: block;
}
.seg-btn.active {
	background: var(--vb-sun);
	color: #3f2d0c;
	box-shadow: 0 3px 0 #d99e0f;
}

/* ============================================================
   공통 — 카드·배지·칩·버튼·폼
   ============================================================ */
.card {
	background: var(--vb-card);
	border: 2px solid var(--vb-border);
	border-radius: var(--vb-radius);
	padding: 16px;
	box-shadow: 0 5px 0 rgba(59, 52, 48, 0.06);
}

.card-title {
	margin: 0 0 10px;
	font-size: 0.84rem;
	font-weight: 800;
	color: var(--vb-muted);
}

/* 설정 — 구글 시트 카드 안 '구글 시트 연동' 소제목을 위 시트 행들과 띄운다 */
.settings-card > .btn-row + .card-title {
	margin-top: 24px;
}

.card-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.card-value {
	font-size: 1.12rem;
	font-weight: 900;
	letter-spacing: -0.02em;
}

.card-list {
	display: flex;
	flex-direction: column;
}

.member-name {
	font-weight: 800;
	font-size: 0.92rem;
}

.member-meta {
	font-size: 0.76rem;
	color: var(--vb-muted);
	font-weight: 600;
	margin-top: 2px;
}

.member-time {
	margin-left: auto;
	font-size: 0.72rem;
	color: var(--vb-success-dark);
	font-weight: 800;
	white-space: nowrap;
}

.member-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
}

.member-row + .member-row {
	border-top: 2px dashed var(--vb-border);
}

.empty {
	margin: 6px 0 0;
	font-size: 0.84rem;
	color: var(--vb-muted);
	font-weight: 600;
}

.text-danger {
	color: var(--vb-danger);
	font-size: 0.76rem;
	font-weight: 700;
}

/* ---- 공용 모션 — 조건부 렌더 입장(Blazor가 새 DOM을 삽입할 때 keyframes 1회 재생).
   from-only 키프레임: 요소의 원래 스타일이 곧 종료값이라 중복 정의가 없다 ---- */
@keyframes overlay-in {
	from {
		opacity: 0;
	}
}
@keyframes panel-in {
	from {
		opacity: 0;
		transform: scale(0.96) translateY(10px);
	}
}
@keyframes reveal-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
}

.reveal {
	animation: reveal-in 180ms ease-out;
}

/* 배지 */
.badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 11px;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 800;
	white-space: nowrap;
	border: 2px solid transparent;
}

.badge-green {
	background: var(--vb-success-soft);
	color: var(--vb-success-dark);
	border-color: #a7f3d0;
}
.badge-orange {
	background: var(--vb-sun-soft);
	color: #b45309;
	border-color: #fde68a;
}
.badge-blue {
	background: var(--vb-sky-soft);
	color: #0284c7;
	border-color: #bae6fd;
}
.badge-gray {
	background: #f6f1e9;
	color: var(--vb-muted);
	border-color: var(--vb-border);
}
.badge-red {
	background: var(--vb-danger-soft);
	color: var(--vb-danger);
	border-color: #fecaca;
}

/* 팀원 칩 — 파스텔 로테이션 */
.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.team-member-chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--vb-sky-soft);
	border: 2px solid #bae6fd;
	color: #0369a1;
	font-size: 0.77rem;
	font-weight: 800;
}

.team-member-chip:nth-child(3n) {
	background: var(--vb-lilac-soft);
	border-color: #ddd6fe;
	color: #6d28d9;
}
.team-member-chip:nth-child(3n + 1) {
	background: var(--vb-sun-soft);
	border-color: #fde68a;
	color: #b45309;
}
/* 부원 색 오버라이드 — MemberColors 팔레트 값이 있으면 위치 로테이션 대신 본인 색 */
.team-member-chip.mc {
	background: color-mix(in srgb, var(--mc) 16%, white);
	border-color: color-mix(in srgb, var(--mc) 50%, white);
	color: color-mix(in srgb, var(--mc) 75%, black);
}
.team-member-chip.mine {
	background: var(--vb-primary);
	border-color: var(--vb-primary);
	color: #fff;
	transform: rotate(-2deg);
}

/* 색상 스와치 — MY 설정·부원 관리 */
.color-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.color-swatch {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--mc);
	border: 3px solid #fffdf8;
	box-shadow: 0 0 0 2px var(--vb-text);
	cursor: pointer;
}
.color-swatch.selected {
	box-shadow: 0 0 0 3px var(--vb-primary);
	transform: scale(1.15);
}
.member-dot {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid var(--vb-text);
	vertical-align: middle;
	margin-right: 4px;
}

/* 버튼 — 눌리는 캔디 */
.btn-primary {
	display: block;
	width: 100%;
	border: 2px solid var(--vb-primary-dark);
	border-radius: 999px;
	padding: 14px;
	background: var(--vb-primary);
	color: #fff;
	font-size: 0.98rem;
	font-weight: 900;
	font-family: inherit;
	box-shadow: 0 5px 0 var(--vb-primary-dark);
	cursor: pointer;
	transition:
		transform 0.13s ease-out,
		box-shadow 0.13s ease-out;
}

.btn-primary:active {
	transform: translateY(4px);
	box-shadow: 0 1px 0 var(--vb-primary-dark);
}
.btn-primary:disabled {
	opacity: 0.55;
}

.btn-wide {
	grid-column: 1 / -1;
}

.btn-secondary {
	display: block;
	width: 100%;
	border: 2px solid #bae6fd;
	border-radius: 999px;
	padding: 12px;
	background: var(--vb-sky-soft);
	color: #0369a1;
	font-size: 0.88rem;
	font-weight: 800;
	font-family: inherit;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	display: block;
}

.btn-ghost {
	display: block;
	width: 100%;
	border: 2px solid var(--vb-border);
	border-radius: 999px;
	padding: 12px;
	background: #fff;
	color: var(--vb-muted);
	font-size: 0.88rem;
	font-weight: 800;
	font-family: inherit;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	display: block;
}

.btn-danger {
	display: block;
	width: 100%;
	border: 2px solid #fecaca;
	border-radius: 999px;
	padding: 12px;
	background: var(--vb-danger-soft);
	color: var(--vb-danger);
	font-size: 0.88rem;
	font-weight: 800;
	font-family: inherit;
	cursor: pointer;
}

.btn-block {
	width: 100%;
}

.btn-block + .btn-block {
	margin-top: 12px;
}

.btn-sm {
	padding: 8px 14px;
	font-size: 0.8rem;
}

.btn-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

/* 폼 */
.field {
	margin-bottom: 12px;
}

.form-label {
	display: block;
	font-size: 0.68rem;
	font-weight: 800;
	color: var(--vb-muted);
	letter-spacing: 0.04em;
	margin-bottom: 6px;
}

.form-control {
	width: 100%;
	border: 2px solid var(--vb-border);
	border-radius: 16px;
	padding: 12px 15px;
	font-size: 1rem;
	font-family: inherit;
	background: #fff;
	color: var(--vb-text);
}

.form-control:focus {
	outline: none;
	border-color: var(--vb-sky);
	box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.15);
}

.section-divider {
	font-size: 0.72rem;
	font-weight: 900;
	color: var(--vb-muted);
	padding: 4px 2px 10px;
	border-bottom: 2px dashed var(--vb-border);
	margin-bottom: 4px;
}

/* ============================================================
   L3 로그인 — 컴팩트 리스트
   ============================================================ */
.login-top {
	flex: none;
	margin: -16px -16px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	/* 배경은 펀치홀까지 채우고, 제목만 안전영역 아래에 배치. */
	padding: calc(22px + env(safe-area-inset-top)) 18px 14px;
	background: #fffdf8;
	border-bottom: 2px dashed #ecdcc4;
}
.login-top .tb-title {
	font-size: 1.12rem;
	font-weight: 900;
}
.login-top .tb-sub {
	font-size: 0.72rem;
	color: var(--vb-muted);
	font-weight: 700;
	margin-top: 2px;
}

.login-mini {
	text-align: center;
	padding: 34px 0 20px;
}

.login-logo {
	width: 74px;
	height: 74px;
	margin: 0 auto 14px;
	border-radius: 26px;
	background: radial-gradient(circle at 32% 30%, #fff4e0, #fde68a);
	border: 3px solid var(--vb-text);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.1rem;
	box-shadow: 0 7px 0 rgba(59, 52, 48, 0.14);
	transform: rotate(4deg);
}

.login-title {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 900;
}

.login-sub {
	margin: 5px 0 0;
	font-size: 0.78rem;
	color: var(--vb-muted);
	font-weight: 600;
}

.login-form {
	text-align: left;
}

/* 리스트형 폼 카드 */
.form-list {
	background: var(--vb-card);
	border: 2px solid var(--vb-border);
	border-radius: 20px;
	box-shadow: 0 4px 0 rgba(59, 52, 48, 0.05);
	overflow: hidden;
	padding: 4px 0;
}

.form-list .field {
	margin: 0;
	padding: 12px 16px;
}

.form-list .field + .field {
	border-top: 2px dashed var(--vb-border);
}

.form-list .form-control {
	border: none;
	padding: 0;
	font-weight: 700;
	background: transparent;
}
.form-list .form-control:focus {
	box-shadow: none;
}

/* ============================================================
   히어로 밴드(전 페이지 공용) — 큰 글씨 + 둥근 칩, 크기 통일
   ============================================================ */
.hero-band {
	flex: none;
	margin: -16px -16px 0;
	background: linear-gradient(135deg, #fde68a, #fcd34d 70%);
	/* 상단 safe-area(노치·다이내믹 아일랜드)까지 밴드 배경이 채우고 내용은 인셋 아래로 */
	padding: calc(26px + env(safe-area-inset-top)) 22px 40px;
	border-radius: 0 0 46% 46% / 0 0 30px 30px;
	min-height: 150px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}
.hero-band .hb-title,
.hero-band .hf-title {
	font-size: 2.1rem;
	font-weight: 900;
	letter-spacing: -0.03em;
	color: #3f2d0c;
}
.hero-band .hf-chips {
	display: flex;
	gap: 6px;
	margin-top: 12px;
	flex-wrap: wrap;
}
.hero-band .hf-chip {
	background: rgba(255, 255, 255, 0.92);
	color: #92400e;
	font-size: 0.7rem;
	font-weight: 800;
	padding: 5px 12px;
	border-radius: 999px;
}
.hero-band .badge {
	background: rgba(255, 255, 255, 0.92);
	padding: 5px 12px;
}

.tile-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

/* 타일 입장 — 25ms 스태거×3 + 125ms 재생 = 마지막 타일 200ms에 완료 */
@keyframes tile-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
}
.tile-grid .tile {
	animation: tile-in 125ms ease-out backwards;
}
.tile-grid .tile:nth-child(2) {
	animation-delay: 25ms;
}
.tile-grid .tile:nth-child(3) {
	animation-delay: 50ms;
}
.tile-grid .tile:nth-child(4) {
	animation-delay: 75ms;
}

.tile {
	border-radius: 20px;
	border: 2px solid transparent;
	padding: 14px 14px 12px;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.tile .t-icon {
	font-size: 1.25rem;
	line-height: 1;
}
.tile .t-label {
	font-size: 0.72rem;
	font-weight: 800;
	opacity: 0.75;
}
.tile .t-value {
	font-size: 1rem;
	font-weight: 900;
	letter-spacing: -0.02em;
}
.tile .t-meta {
	font-size: 0.68rem;
	font-weight: 700;
	opacity: 0.7;
}

.tile.sky {
	background: var(--vb-sky-soft);
	border-color: #bae6fd;
	color: #0369a1;
}
.tile.sun {
	background: var(--vb-sun-soft);
	border-color: #fde68a;
	color: #b45309;
}
.tile.mint {
	background: var(--vb-success-soft);
	border-color: #a7f3d0;
	color: var(--vb-success-dark);
}
.tile.lilac {
	background: var(--vb-lilac-soft);
	border-color: #ddd6fe;
	color: #6d28d9;
}

.sec {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 2px 4px 0;
}
.sec .sec-title {
	font-size: 0.92rem;
	font-weight: 900;
}
.sec .sec-more {
	font-size: 0.74rem;
	font-weight: 700;
	color: var(--vb-muted);
}

/* 코트 카드 — 팀 목록(L1 시안 team.html). 홈=토글 다중 확장(open일 때 확장 애니메이션), 관리자=항상 open */
.court {
	position: relative;
	background: var(--vb-sun-soft);
	border: 2.5px dashed #f0c648;
	border-radius: 22px;
	padding: 16px;
	overflow: hidden;
}
.court.open::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	border-top: 2.5px dashed #f0c648;
}
.court.open::after {
	content: "";
	position: absolute;
	top: -30%;
	bottom: -30%;
	left: 50%;
	border-left: 2px solid rgba(180, 83, 9, 0.18);
}
.court.mine {
	background: linear-gradient(140deg, #ffe4e6, var(--vb-sun-soft) 70%);
	border-color: var(--vb-primary);
}
.court-head {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px; /* 닫힘 상태 간격. 열림은 헤더 10px + 칩 padding 14px = 24px */
}
/* 열림/닫힘 모두 애니메이션 — 0fr↔1fr 그리드 트랜지션 */
.court .chips-wrap {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.22s ease-out;
}
.court.open .chips-wrap {
	grid-template-rows: 1fr;
}
.court .chips-wrap > .chips {
	position: relative;
	z-index: 1;
	min-height: 0;
	overflow: hidden;
	padding-top: 14px; /* 헤더 margin 10px와 합쳐 열림 간격 24px */
	visibility: hidden;
	opacity: 0;
	transition:
		opacity 0.22s ease-out,
		visibility 0s linear 0.22s;
}
.court.open .chips-wrap > .chips {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.22s ease-out;
}
@media (prefers-reduced-motion: reduce) {
	.court .chips-wrap,
	.court .chips-wrap > .chips,
	.member-row input[type="checkbox"],
	.member-row input[type="checkbox"]::after,
	.btn-primary,
	.filter-btn,
	.tile-grid .tile,
	.teams-grid .court,
	.otp-guide,
	.day-detail,
	.reveal,
	.confirm-overlay,
	.confirm-box,
	.team-fs,
	.team-fs-panel,
	.ring,
	.nav-item,
	.nav-item.active .nav-icon,
	.otp-big span,
	.otp-fs-body span,
	.tl-sub,
	.tl > .tl-item {
		transition: none;
		animation: none;
	}
}
button.court-head {
	width: 100%;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}
.court-name {
	font-weight: 900;
	font-size: 1.02rem;
}

/* 팀 편성표 전체화면 — 홈 .sec 확장 버튼 → 오버레이(확인 다이얼로그과 같은 z-index/그림자 톤) */
.sec-right {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.sec-expand {
	border: 2px solid var(--vb-border);
	background: #fff;
	border-radius: 999px;
	width: 26px;
	height: 26px;
	font-size: 0.85rem;
	font-weight: 900;
	line-height: 1;
	color: var(--vb-text);
	cursor: pointer;
}
.team-fs {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: rgba(59, 52, 48, 0.45);
	display: flex;
	padding: 20px;
	animation: overlay-in 150ms ease-out;
}
.team-fs-panel {
	flex: 1;
	display: flex;
	flex-direction: column;
	background: #fffdf8;
	border: 3px solid var(--vb-text);
	border-radius: 24px;
	padding: 20px;
	overflow: auto;
	box-shadow: 8px 10px 0 rgba(59, 52, 48, 0.2);
	animation: panel-in 220ms ease-out;
}
.team-fs-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
}
.team-fs-close {
	flex: none;
	border: 2px solid var(--vb-border);
	background: #fff;
	border-radius: 999px;
	width: 34px;
	height: 34px;
	font-size: 1rem;
	font-weight: 900;
	color: var(--vb-text);
	cursor: pointer;
}
/* 모바일: 세로 스택(자연 높이, 패널 스크롤) */
.team-fs-grid {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
/* 태블릿(≥1024px): 팀 카드를 한 행에 가로 나열, 세로로 꽉 늘려 길고 좁은 카드로 */
@media (min-width: 1024px) {
	.team-fs-grid {
		flex: 1;
		min-height: 0;
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		grid-template-rows: minmax(0, 1fr);
	}
	/* 4팀 이상: 좌상/우상/좌하/우하 2×2 분할. 5팀+는 2열 유지, 아래 행 추가 */
	.team-fs-grid.quad {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(2, minmax(0, 1fr));
		grid-auto-rows: minmax(0, 1fr);
	}
	/* 칩 크기: 팀 수·팀원 수 무관 고정 — 섹션을 9등분한 1칸 크기(9명일 때 꽉 참) */
	.team-fs-grid .court {
		display: flex;
		flex-direction: column;
	}
	.team-fs-grid .court .chips-wrap {
		flex: 1;
		min-height: 0;
	}
	.team-fs-grid .chips-wrap > .chips {
		display: grid;
		grid-template-rows: repeat(9, minmax(0, 1fr));
		grid-auto-rows: minmax(0, 1fr); /* 10명+는 같은 비율로 축소 */
		gap: 8px;
	}
	/* 4팀 이상: 칩을 가로 2개씩 세로 정렬(9명=5행 → 섹션 5등분으로 꽉 참) */
	.team-fs-grid.quad .chips-wrap > .chips {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(5, minmax(0, 1fr));
	}
	.team-fs-grid .team-member-chip {
		min-height: 0;
		justify-content: center;
		font-size: 0.95rem;
	}
}

/* 이모지 대체 아이콘(img) 기본 규격 */
.icon {
	width: 1.1em;
	height: 1.1em;
	vertical-align: -0.18em;
}
.nav-icon .icon {
	width: 1em;
	height: 1em;
}
.hb-title .icon,
.page-title .icon {
	width: 1.2em;
	height: 1.2em;
	vertical-align: -0.2em;
	margin-right: 3px;
}
.court-name .icon {
	width: 1.15em;
	height: 1.15em;
	vertical-align: -0.2em;
	margin-right: 2px;
}
.login-logo .icon {
	width: 2.2em;
	height: 2.2em;
}
.tl-dot .icon {
	width: 1.55em;
	height: 1.55em;
}

/* ============================================================
   L4 출석(홈 통합) — OTP 입력
   ============================================================ */
.otp-guide {
	text-align: center;
	margin: 2px 0 10px;
	animation: panel-in 220ms ease-out;
}
.otp-guide .otp-title {
	font-size: 1rem;
	font-weight: 900;
}
.otp-guide .otp-desc {
	font-size: 0.77rem;
	color: var(--vb-muted);
	font-weight: 600;
	margin-top: 4px;
}

.otp-input {
	display: block;
	width: 100%;
	border: 2px solid var(--vb-border);
	border-radius: 18px;
	padding: 14px;
	background: #fff;
	font-size: 1.6rem;
	font-weight: 900;
	letter-spacing: 0.9em;
	text-align: center;
	font-family: inherit;
	color: var(--vb-text);
}

.otp-input:focus {
	outline: none;
	border-color: var(--vb-success);
	box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18);
}

/* 관리자 OTP 대형 표시 */
.otp-big {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin: 6px 0 12px;
}

.otp-big span {
	min-width: 58px;
	height: 66px;
	border-radius: 18px;
	background: var(--vb-sun-soft);
	border: 2px solid #fde68a;
	color: #b45309;
	font-size: 1.8rem;
	font-weight: 900;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 8px;
	animation: otp-digit-pop 0.3s cubic-bezier(0.34, 1.4, 0.64, 1) backwards;
}

.otp-big span:nth-child(2) {
	animation-delay: 50ms;
}
.otp-big span:nth-child(3) {
	animation-delay: 100ms;
}
.otp-big span:nth-child(4) {
	animation-delay: 150ms;
}

/* OTP 숫자 팝 — Dashboard가 자릿수별 @key(순번-숫자)를 주므로 값이 바뀐 자리만
   새로 삽입되고, 오버슈트 곡선으로 좌측부터 50ms 간격 순차 등장(총 450ms) */
@keyframes otp-digit-pop {
	from {
		opacity: 0;
		transform: scale(0.3);
	}
}

/* 대시보드 OTP ⤢ 확대 버튼 → 전체화면(팀 편성표 전체화면과 같은 톤) */
.otp-fs {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: rgba(59, 52, 48, 0.45);
	display: flex;
	padding: 20px;
	animation: overlay-in 150ms ease-out;
}
.otp-fs-panel {
	flex: 1;
	display: flex;
	flex-direction: column;
	background: #fffdf8;
	border: 3px solid var(--vb-text);
	border-radius: 24px;
	padding: 20px;
	box-shadow: 8px 10px 0 rgba(59, 52, 48, 0.2);
	animation: panel-in 220ms ease-out;
}
.otp-fs-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.otp-fs-body {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(8px, 2vw, 20px);
}
.otp-fs-body span {
	min-width: clamp(64px, 17vw, 170px);
	height: clamp(84px, 23vw, 220px);
	border-radius: clamp(14px, 2.5vw, 28px);
	background: var(--vb-sun-soft);
	border: 3px solid #fde68a;
	color: #b45309;
	font-size: clamp(3rem, 15vw, 9rem);
	font-weight: 900;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	animation: otp-digit-pop 0.3s cubic-bezier(0.34, 1.4, 0.64, 1) backwards;
}
.otp-fs-body span:nth-child(2) {
	animation-delay: 50ms;
}
.otp-fs-body span:nth-child(3) {
	animation-delay: 100ms;
}
.otp-fs-body span:nth-child(4) {
	animation-delay: 150ms;
}

/* ============================================================
   L2 MY — 도넛 링 + 캘린더 (헤더는 공용 hero-band 사용)
   ============================================================ */
/* 도넛 링 */
.ring-wrap {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* 링 채움 — @property 등록 브라우저에서만 600ms 보간, 미지원은 정적 폴백.
   실제 퍼센트는 MyPage가 --ring-p 인라인 변수로 공급한다 */
@property --ring-p {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 0%;
}
@keyframes ring-fill {
	from {
		--ring-p: 0%;
	}
}
.ring {
	width: 112px;
	height: 112px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	background: conic-gradient(
		var(--vb-success) 0 var(--ring-p),
		#f0e6d8 var(--ring-p) 100%
	);
	animation: ring-fill 600ms ease-out;
}

.ring .ring-in {
	width: 84px;
	height: 84px;
	border-radius: 999px;
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.ring .ring-num {
	font-size: 1.4rem;
	font-weight: 900;
	color: var(--vb-success-dark);
}
.ring .ring-label {
	font-size: 0.62rem;
	font-weight: 800;
	color: var(--vb-muted);
}

.ring-side {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.ring-stat {
	background: var(--vb-card);
	border: 2px solid var(--vb-border);
	border-radius: 16px;
	padding: 9px 14px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.ring-stat .rs-icon {
	width: 30px;
	height: 30px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.95rem;
	flex: none;
}

.ring-stat:nth-child(1) .rs-icon {
	background: var(--vb-sun-soft);
	border: 2px solid #fde68a;
}
.ring-stat:nth-child(2) .rs-icon {
	background: var(--vb-sky-soft);
	border: 2px solid #bae6fd;
}
.ring-stat .rs-label {
	font-size: 0.66rem;
	font-weight: 800;
	color: var(--vb-muted);
}
.ring-stat .rs-value {
	font-size: 0.85rem;
	font-weight: 900;
}

.profile-ava {
	width: 54px;
	height: 54px;
	border-radius: 999px;
	background: var(--vb-lilac-soft);
	border: 2px solid #ddd6fe;
	color: #6d28d9;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	font-size: 1.15rem;
	flex: none;
}

/* 캘린더 */
.cal-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}
.cal-nav .cal-title {
	font-weight: 900;
	font-size: 0.95rem;
}

.cal-nav button {
	border: 2px solid var(--vb-border);
	background: #fff;
	border-radius: 999px;
	width: 34px;
	height: 34px;
	font-size: 0.82rem;
	color: var(--vb-muted);
	cursor: pointer;
}

.calendar {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.calendar th {
	font-size: 0.68rem;
	font-weight: 800;
	color: var(--vb-muted);
	padding: 5px 0;
}

.calendar th.sun {
	color: var(--vb-primary-dark);
}

.day-cell {
	width: 35px;
	height: 38px;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 700;
	background: transparent;
	border: none;
	color: var(--vb-text);
	cursor: pointer;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	font-family: inherit;
	padding: 0;
}

.day-cell .mark {
	font-size: 0.55rem;
	color: var(--vb-success-dark);
}
.day-cell .mark .icon {
	width: 1.4em;
	height: 1.4em;
	vertical-align: -0.3em;
}
.day-cell.attended {
	background: var(--vb-success-soft);
	color: var(--vb-success-dark);
	border: 2px solid #a7f3d0;
}
.day-cell.selected {
	outline: 2.5px solid var(--vb-sun);
	outline-offset: 1px;
}
.day-cell .mark.miss {
	color: var(--vb-danger);
}
.day-cell.missed {
	background: var(--vb-danger-soft);
	color: var(--vb-danger);
	border: 2px solid #fecaca;
}
.day-cell .mark.sem {
	color: var(--vb-lilac);
	font-size: 0.5rem;
}
.day-cell .mark.sched {
	color: var(--vb-lilac);
	font-size: 0.5rem;
}
.day-cell.scheduled {
	background: var(--vb-lilac-soft);
	color: var(--vb-lilac);
	border: 2px solid #ddd6fe;
}
.day-cell .mark.noact {
	color: var(--vb-muted);
	font-size: 0.5rem;
}
.day-cell.noact {
	background: var(--vb-bg, #f3f4f6);
	color: var(--vb-muted);
	border: 2px solid #e5e7eb;
}
.dd-info.miss {
	color: var(--vb-danger);
}
.dd-info.sched {
	color: var(--vb-lilac);
}
.dd-info.noact {
	color: var(--vb-muted);
}

.day-detail {
	margin-top: 12px;
	padding: 12px 14px;
	background: var(--vb-lilac-soft);
	border: 2px solid #ddd6fe;
	border-radius: 16px;
	animation: reveal-in 180ms ease-out;
}

.day-detail .dd-date {
	font-weight: 900;
	font-size: 0.86rem;
}
.day-detail .dd-info {
	font-size: 0.77rem;
	color: var(--vb-muted);
	font-weight: 600;
	margin-top: 4px;
}

/* ============================================================
   기록 페이지(R1) — 월간 타임라인
   ============================================================ */
.tl {
	position: relative;
	padding-left: 30px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.tl::before {
	content: "";
	position: absolute;
	left: 11px;
	top: 8px;
	bottom: 8px;
	border-left: 3px dotted #ecdcc4;
}

.tl-item {
	position: relative;
}

.tl-item .tl-dot {
	position: absolute;
	left: -27px;
	top: 2px;
	width: 21px;
	height: 21px;
	border-radius: 999px;
	border: 2.5px solid var(--vb-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.58rem;
	font-weight: 900;
}

.tl-dot.t-a {
	background: var(--vb-sky);
	color: #fff;
}
.tl-dot.t-b {
	background: var(--vb-primary);
	color: #fff;
}
.tl-dot.t-c {
	background: var(--vb-lilac);
	color: #fff;
}
.tl-dot.neutral {
	background: var(--vb-sun);
	color: #3f2d0c;
}

.tl-item .tl-time {
	font-size: 0.68rem;
	font-weight: 800;
	color: var(--vb-muted);
}
.tl-item .tl-title {
	font-size: 0.94rem;
	font-weight: 900;
	margin-top: 1px;
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
}
.tl-item .tl-desc {
	font-size: 0.76rem;
	color: var(--vb-muted);
	font-weight: 600;
	margin-top: 3px;
}

/* 하위 기록(팀 배정) 아코디언 — court chips-wrap와 같은 0fr↔1fr 패턴.
   tl-sub-inner의 음수 margin+padding 쌍은 tl-dot(-27px 돌출)이
   overflow: hidden에 잘리지 않게 하는 장치 */
.tl-toggle {
	cursor: pointer;
}
.tl-sub {
	display: grid;
	grid-template-rows: 0fr;
	margin-bottom: -14px; /* 접힘 시 .tl gap(14px) 상쇄 */
	transition:
		grid-template-rows 0.22s ease-out,
		margin-bottom 0.22s ease-out;
}
.tl-sub.open {
	grid-template-rows: 1fr;
	margin-bottom: 0;
}
.tl-sub-inner {
	min-height: 0;
	overflow: hidden;
	margin-left: -30px;
	padding-left: 30px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* 타임라인 입장 — 각 행이 바로 위 위치에서 내려앉으며 위→아래 순차 전개.
   행의 @key(날짜) 덕에 진입·월 전환 모두 결정적으로 재생된다.
   5행 이후는 150ms 상한으로 묶어 긴 달도 370ms 내에 끝난다 */
@keyframes tl-unfold {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
}
.tl > .tl-item {
	animation: tl-unfold 0.22s ease-out backwards;
}
.tl > .tl-item:nth-child(2) {
	animation-delay: 30ms;
}
.tl > .tl-item:nth-child(3) {
	animation-delay: 60ms;
}
.tl > .tl-item:nth-child(4) {
	animation-delay: 90ms;
}
.tl > .tl-item:nth-child(5) {
	animation-delay: 120ms;
}
.tl > .tl-item:nth-child(n + 6) {
	animation-delay: 150ms;
}

.more-btn {
	display: block;
	width: 100%;
	border: 2px dashed #e3cba4;
	border-radius: 999px;
	padding: 11px;
	background: transparent;
	color: var(--vb-muted);
	font-size: 0.8rem;
	font-weight: 800;
	font-family: inherit;
	cursor: pointer;
	text-align: center;
}

/* ============================================================
   관리자 — 토글·필터·확인 상자
   ============================================================ */
/* 출석 관리 체크박스 — 토글 스위치 스타일 */
.member-row input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 46px;
	height: 26px;
	border-radius: 999px;
	background: #eadfd0;
	border: 2px solid #e0d2bd;
	position: relative;
	cursor: pointer;
	flex: none;
	margin: 0;
	transition:
		background-color 0.2s ease-out,
		border-color 0.2s ease-out;
}

.member-row input[type="checkbox"]::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(59, 52, 48, 0.25);
	transition: left 0.2s ease-out;
}

.member-row input[type="checkbox"]:checked {
	background: var(--vb-success);
	border-color: #10b981;
}
.member-row input[type="checkbox"]:checked::after {
	left: 22px;
}

.filter-group {
	display: flex;
	gap: 6px;
	margin-bottom: 10px;
}

.filter-btn {
	flex: 1;
	border: 2px solid var(--vb-border);
	border-radius: 14px;
	background: #fff;
	color: var(--vb-muted);
	font-family: inherit;
	font-size: 0.82rem;
	font-weight: 800;
	padding: 9px 0;
	cursor: pointer;
	transition:
		background-color 0.15s ease-out,
		border-color 0.15s ease-out,
		color 0.15s ease-out;
}

.filter-btn.active {
	background: var(--vb-sun-soft);
	border-color: #f0c648;
	color: #b45309;
}

/* 정렬 텍스트 스트립 — 정렬 항목 텍스트를 누르면 해당 정렬, 다시 누르면 오름/내림 전환.
   모바일에서도 한 줄로 펼쳐 우측 정렬(태블릿≥1024px는 기존 규칙 유지) */
.sort-strip {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: nowrap;
	width: max-content;
	margin-left: auto;
	gap: 2px;
	margin-bottom: 10px;
}

.sort-link {
	border: none;
	background: none;
	font-family: inherit;
	font-weight: 800;
	font-size: 0.72rem;
	white-space: nowrap;
	color: var(--vb-muted);
	padding: 5px 7px;
	border-radius: 12px;
	cursor: pointer;
	transition:
		background-color 0.15s ease-out,
		color 0.15s ease-out;
}

.sort-link:hover,
.sort-link.active {
	background: var(--vb-sun-soft);
	color: #b45309;
}

/* 부원 관리 — 필터 버튼 행의 세로 간격 */
.members-toolbar {
	margin-bottom: 12px;
}

.confirm-overlay {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: rgba(59, 52, 48, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	animation: overlay-in 150ms ease-out;
}

.confirm-box {
	background: #fffdf8;
	border: 3px solid var(--vb-text);
	border-radius: 24px;
	padding: 22px 20px 18px;
	width: 100%;
	max-width: 340px;
	box-shadow: 8px 10px 0 rgba(59, 52, 48, 0.2);
	animation: panel-in 220ms ease-out;
}

.confirm-box h3 {
	margin: 0 0 8px;
	font-size: 1.05rem;
	font-weight: 900;
}
.confirm-box p {
	margin: 0 0 16px;
	font-size: 0.84rem;
	color: var(--vb-muted);
	font-weight: 600;
	line-height: 1.5;
}

/* ============================================================
   하단 탭 — 홈 · 기록 · MY · 관리자
   ============================================================ */
.bottom-nav {
	position: fixed;
	bottom: 10px;
	/* 별도 JS 좌표 추적 없이 수평 중앙 정렬. */
	left: 0;
	right: 0;
	margin-inline: auto;
	width: calc(100% - 24px);
	max-width: 512px;
	height: var(--vb-nav-height);
	background: #fff;
	border: 2px solid var(--vb-border);
	border-radius: 999px;
	display: flex;
	justify-content: space-around;
	align-items: stretch;
	z-index: 30;
	box-shadow: 0 6px 0 rgba(59, 52, 48, 0.08);
}

.nav-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	text-decoration: none;
	color: var(--vb-muted);
	font-size: 0.65rem;
	font-weight: 800;
	margin: 5px;
	border-radius: 999px;
	transition:
		background-color 0.15s ease-out,
		color 0.15s ease-out;
}

.nav-icon {
	font-size: 1.3rem;
	line-height: 1;
}

/* 활성 탭 아이콘 도약 — .active 클래스 부착마다 1회 재생(탭 전환 시).
   최다 빈도 영역이라 4px/0.32s 최소 강도 */
@keyframes nav-icon-bounce {
	40% {
		transform: translateY(-4px);
	}
}
.nav-item.active .nav-icon {
	animation: nav-icon-bounce 0.32s ease-out;
}
.nav-label {
	font-size: 0.65rem;
}

.nav-item.active {
	background: var(--vb-sun-soft);
	color: var(--vb-text);
}

/* ============================================================
   [목업 방법A] 태블릿 가로(≥1024px) — 반응형 CSS 전환
   · 아래 세 규칙은 모바일(<1024px) 동작 보존용 신규 추가:
     side-nav 숨김(기본), 래퍼 div 간격 패리티(app-content gap과 동일)
   · 기존 규칙은 일절 수정하지 않고 미디어쿼리 오버라이드만 사용
   ============================================================ */
.side-nav {
	display: none;
}

.court-grid {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.admin-grid {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* 팀 뽑기 — 모바일 기본 1단(데스크톱 2단은 하단 미디어 쿼리) */
.teams-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

/* 편성 결과 입장 — 오버슈트 곡선으로 '뽑기' 순간의 통통 튘. teams-grid 셀렉터는
   TeamCard의 @key(team.TeamId)와 짝이라 새로 뽑힌 회차만 삽입·재생되고,
   이동/추가 등 기존 팀을 유지한 재렌더는 DOM이 보존되어 재생되지 않는다 */
@keyframes court-pop-in {
	from {
		opacity: 0;
		transform: scale(0.94);
	}
}
.teams-grid .court {
	animation: court-pop-in 260ms cubic-bezier(0.34, 1.4, 0.64, 1) backwards;
}
.teams-grid .court:nth-child(2) {
	animation-delay: 40ms;
}
.teams-grid .court:nth-child(3) {
	animation-delay: 80ms;
}
.teams-grid .court:nth-child(n + 4) {
	animation-delay: 120ms;
}

@media (min-width: 1024px) {
	/* 셸: 단일 컬럼 → 좌(사이드 내비) + 우(콘텐츠) 2단 그리드.
	   DOM 순서는 main이 먼저 오므로 명시적 배치로 좌우를 지정한다. */
	.app-shell:not(.auth-shell) {
		max-width: none;
		display: grid;
		grid-template-columns: 230px minmax(0, 1fr);
		gap: 32px;
		padding: 32px 48px;
		align-items: stretch;
	}

	.side-nav {
		display: flex;
		flex-direction: column;
		gap: 6px;
		grid-column: 1;
		grid-row: 1;
		align-self: start;
		position: sticky;
		top: 32px;
		background: #fff;
		border: 2px solid var(--vb-border);
		border-radius: 28px;
		padding: 10px;
		box-shadow: 0 6px 0 rgba(59, 52, 48, 0.08);
	}

	.side-nav .nav-item {
		flex-direction: row;
		justify-content: flex-start;
		gap: 12px;
		font-size: 0.92rem;
		padding: 14px 16px;
		margin: 0;
	}

	.side-nav .nav-icon {
		font-size: 1.25rem;
	}

	.side-nav .nav-icon .icon {
		width: 1.25em;
		height: 1.25em;
	}

	.side-nav .nav-label {
		font-size: 0.92rem;
	}

	/* 하단 내비 → 숨김(사이드 내비가 대체) */
	.bottom-nav {
		display: none;
	}

	/* 메뉴가 있는 콘텐츠만 사이드 내비 오른쪽 열에 배치. */
	.app-content.has-nav {
		grid-column: 2;
		grid-row: 1;
		padding: 0 0 48px;
		gap: 18px;
		max-width: 920px;
	}

	/* 히어로 밴드: 음수 마진 제거 → 둥근 카드형 헤더 */
	.hero-band {
		margin: 0;
		border-radius: 28px;
		min-height: 120px;
		padding: 28px 32px;
	}

	/* 홈: 타일 4단, 코트 카드 2단 */
	.tile-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 14px;
	}

	.tile {
		padding: 18px 18px 16px;
	}

	.court-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
		align-items: start;
	}

	/* 관리자 대시보드: 첫 카드(오늘 운동) 전체 폭, 나머지 2단 */
	.admin-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
		align-items: start;
	}

	.admin-grid > .card:first-child {
		grid-column: 1 / -1;
	}

	/* 공통 카드·세그먼트 여유 확대 */
	.card {
		padding: 20px 22px;
	}

	.segment {
		max-width: 560px;
	}

	/* ── 사용자: 기록(R1) — 타임라인 항목을 (시간|내용) 2단 그리드로 ── */
	.tl {
		gap: 18px;
	}

	.tl-item {
		display: grid;
		grid-template-columns: 112px minmax(0, 1fr);
		column-gap: 18px;
		align-items: start;
	}

	.tl-item .tl-time {
		grid-column: 1;
		padding-top: 2px;
	}

	.tl-item .tl-title,
	.tl-item .tl-desc {
		grid-column: 2;
	}

	.tl-item .tl-dot {
		top: 1px;
	}

	.more-btn {
		max-width: 560px;
		margin: 0 auto;
	}

	/* ── MY — 캘린더(넓은 칸) + 출석 통계(좁은 칸) 2단 ── */
	.my-grid {
		display: grid;
		grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
		gap: 14px;
		align-items: start;
	}

	.my-grid > .card:first-child {
		grid-column: 2;
		grid-row: 1;
	}

	.my-grid > .card:nth-child(2) {
		grid-column: 1;
		grid-row: 1;
	}

	.my-grid > .card:only-child {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.day-cell {
		width: 100%;
		height: 46px;
	}

	/* ── 로그인 — 중앙 고정폭 카드(내비 없는 화면) ── */
	.auth-shell {
		padding: 32px 48px;
	}
	.auth-shell > .app-content {
		padding-top: 0;
	}
	.login-top {
		max-width: 452px;
		margin: 40px auto 0;
		border-radius: 24px;
	}

	.login-mini,
	.login-form {
		max-width: 420px;
		margin-left: auto;
		margin-right: auto;
	}

	.app-content > p.empty {
		max-width: 420px;
		margin-left: auto;
		margin-right: auto;
	}

	/* ── 관리자 공통 — 검색필드 폭 제한, 목록 2단, 툴바 가로 ── */
	.segment {
		width: 100%;
		margin-inline: auto;
	}

	.card > .field {
		max-width: 420px;
	}

	.card-list.split-2 {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.card-list.split-2 .member-row {
		border: 2px solid var(--vb-border);
		border-radius: 16px;
		padding: 10px 12px;
		background: #fff;
	}

	.card-list.split-2 .member-row + .member-row {
		border-top: 2px solid var(--vb-border);
	}

	.toolbar-row {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-bottom: 10px;
	}

	.toolbar-row .filter-group {
		flex: 1;
		margin-bottom: 0;
	}

	.toolbar-row .field {
		width: 300px;
		flex: none;
		margin-bottom: 0;
	}

	/* ── 설정 — 폼 2단(긴 URL·버튼 행은 전체 폭) ── */
	.settings-card {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 2px 20px;
		align-items: start;
	}

	.settings-card > .card-title,
	.settings-card > .btn-row,
	.settings-card > .btn-primary {
		grid-column: 1 / -1;
	}

	/* ── 팀 뽑기 — 편성 결과 코트 2단, 준비 화면 2단, 팀 규모 입력 2단 ── */
	.teams-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}

	.teams-setup {
		display: grid;
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		gap: 14px;
		align-items: start;
	}

	.team-size-list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 4px 16px;
	}

	/* 오류 UI가 하단 내비 높이만큼 떠 있던 오프셋 제거 */
	#blazor-error-ui {
		bottom: 0;
	}
}

/* 데이터가 준비될 때까지 실제 값 대신 기존 행·타일의 공간을 유지한다. */
.loading-placeholder {
	display: inline-block;
	min-width: 3em;
	border-radius: 5px;
	background: var(--vb-border);
	color: transparent;
}

.home-attendance,
.teams-data {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.home-tiles[data-load-state="loading"] > .tile,
.loading-timeline > .tl-item {
	animation: none;
}

.records-results {
	position: relative;
	display: flow-root;
}

.records-skeleton,
.records-values {
	display: flow-root;
}

.records-skeleton[data-retained="true"] {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.records-values[aria-hidden="true"] {
	visibility: hidden;
}

.admin-load-region {
	position: relative;
	display: flow-root;
}

.admin-load-skeleton,
.admin-load-values {
	display: flow-root;
}

.admin-load-skeleton[data-retained="true"] {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.admin-load-values[aria-hidden="true"],
.settings-sheet-value[aria-hidden="true"] {
	visibility: hidden;
}

.admin-load-status {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.admin-load-skeleton .member-row,
.admin-load-skeleton .card-row {
	animation: none;
}

.settings-load-region {
	display: contents;
}

.settings-load-region > [role="alert"] {
	grid-column: 1 / -1;
}

.settings-sheet-row {
	position: relative;
}

.settings-sheet-skeleton {
	width: 100%;
}

.settings-sheet-skeleton[data-retained="true"] {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.home-title,
.home-attendance,
.home-tiles[data-load-state="loading"][data-retained="true"] > .tile,
.home-teams[data-load-state="loading"][data-retained="true"] > .court {
	position: relative;
}

.home-title-value[aria-hidden="true"],
.home-team-summary[aria-hidden="true"],
.home-attendance > div:first-child[aria-hidden="true"],
.home-tiles[data-load-state="loading"][data-retained="true"] > .tile > *,
.home-teams[data-load-state="loading"][data-retained="true"] > .court > *,
.home-teams[data-load-state="loading"][data-retained="true"] > .court .chips {
	visibility: hidden;
}

.home-title-skeleton {
	position: absolute;
	top: 0;
	left: 0;
}

.home-attendance-skeleton[data-retained="true"] {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.home-tiles[data-load-state="loading"][data-retained="true"] > .tile::after,
.home-teams[data-load-state="loading"][data-retained="true"] > .court::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 18px;
	width: 3em;
	height: 1em;
	border-radius: 5px;
	background: var(--vb-border);
}