/* Mobile/Tablet overrides only. Desktop styles remain untouched. */

/* Pull-to-refresh 방지 설정 */
@media (max-width: 1024px) {

	html,
	body {
		overscroll-behavior-y: none !important;
		overscroll-behavior: none !important;
		-webkit-overflow-scrolling: touch !important;
	}

	/* Pull-to-refresh 방지만 적용, 클릭 이벤트는 유지 */
	/* body의 position: fixed와 overflow: hidden 제거하여 클릭 이벤트 보존 */

	/* 기존 overscroll-behavior 설정 강화 */
	html {
		overscroll-behavior: none !important;
		overscroll-behavior-y: none !important;
		overscroll-behavior-x: none !important;
	}

	body {
		overscroll-behavior: none !important;
		overscroll-behavior-y: none !important;
		overscroll-behavior-x: none !important;
		touch-action: pan-x pan-y !important;
	}
}

/* Root mobile tokens */
@media (max-width: 1024px) {
	:root {
		--m-gap-xs: 4px;
		--m-gap-sm: 8px;
		--m-gap-md: 12px;
		--m-gap-lg: 16px;
		--m-font-title: 18px;
		--m-font-body: 14px;
	}
}

/* Header/Banner */
@media (max-width: 1024px) {

	.player-characteristics {
		max-width: 100%;
	}

	/* 환영 섹션 모바일 스타일 */
	.welcome-section {
		padding: 2rem 1rem;
		margin: 1rem 0;
	}

	.welcome-header h1 {
		font-size: 1.8rem;
		margin-bottom: 0.8rem;
	}

	.welcome-subtitle {
		font-size: 1rem;
	}

	.features-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
		margin-bottom: 2rem;
	}

	.feature-card {
		padding: 1rem;
		flex-direction: column;
		text-align: center;
		gap: 0.8rem;
	}

	.feature-icon {
		font-size: 1.5rem;
	}

	.feature-content h3 {
		font-size: 1rem;
	}

	.feature-content p {
		font-size: 0.85rem;
	}

	.usage-guide {
		padding: 1.5rem;
	}

	.usage-guide h3 {
		font-size: 1.1rem;
		margin-bottom: 1rem;
	}

	.guide-step {
		padding: 0.8rem;
		flex-direction: column;
		text-align: center;
		gap: 0.5rem;
	}

	.step-number {
		width: 1.5rem;
		height: 1.5rem;
		font-size: 0.8rem;
	}

	.step-text {
		font-size: 0.9rem;
	}

	/* 광고 컨테이너 모바일 스타일 */
	.ad-container {
		margin: 1rem 0;
		padding: 0.8rem;
	}

	.main-header {
		position: sticky;
		top: 0;
		z-index: 100;
		background: var(--bg-header);
		padding: 6px 0;
		/* compact */
	}

	.header-content {
		display: flex;
		flex-direction: row;
		/* single line */
		justify-content: space-between;
		align-items: center;
		gap: var(--m-gap-sm);
		flex-wrap: nowrap;
	}

	.logo {
		flex: 0 0 auto;
		margin-left: -8px;
	}

	.logo-image {
		height: 28px;
		width: auto;
	}

	.header-actions {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: flex-end;
		gap: var(--m-gap-sm);
	}

	.header-actions .action-btn,
	.header-actions .email-btn {
		min-height: 36px;
		/* compact mobile button */
		padding: 0 10px;
		font-size: 13px;
	}

	.youtube-icon {
		width: 18px;
		height: 18px;
	}

	.email-btn .email-icon {
		font-size: 16px;
	}
}

/* YouTube button: icon-only, black with white icon on mobile */
@media (max-width: 1024px) {

	/* Increase specificity to override .action-btn.primary */
	.action-btn.youtube-btn {
		background: #000;
		border: 1px solid #000;
		color: #fff;
		/* makes SVG icon white via currentColor */
		width: 36px;
		height: 36px;
		padding: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 8px;
	}

	/* Keep hover black as well */
	.action-btn.youtube-btn:hover {
		background: #000;
		border-color: #000;
	}

	/* Force consistent white icon/text color on all states */
	.action-btn.youtube-btn,
	.action-btn.youtube-btn:hover,
	.action-btn.youtube-btn:active,
	.action-btn.youtube-btn:focus,
	.action-btn.youtube-btn:visited {
		color: #fff !important;
		background: #000 !important;
		border-color: #000 !important;
		outline: none;
	}

	/* Ensure SVG uses currentColor and stays white */
	.action-btn.youtube-btn svg {
		color: #fff;
	}

	.action-btn.youtube-btn .youtube-icon {
		width: 18px;
		height: 18px;
	}

	.action-btn.youtube-btn .youtube-icon path {
		fill: currentColor;
	}

	.youtube-btn .youtube-icon {
		width: 18px;
		height: 18px;
	}

	.youtube-btn span {
		display: none;
	}
}

/* Search section */
@media (max-width: 1024px) {
	.search-section {
		display: flex;
		flex-direction: column;
		gap: var(--m-gap-sm);
		padding: 12px;
		position: sticky;
		top: 56px;
		/* under sticky header */
		z-index: 90;
	}

	/* Hide search section after search on mobile */
	body.mobile-searched .search-section {
		display: none !important;
	}

	.match-type-select {
		width: 100%;
		min-height: 40px;
	}

	.search-input-container {
		width: 100%;
	}

	#nicknameInput {
		width: 100%;
		min-height: 44px;
		font-size: var(--m-font-body);
	}

	#searchBtn {
		width: 100%;
		min-height: 44px;
	}

	/* Dropdown fits viewport */
	.search-dropdown {
		max-height: 50vh;
		left: 0;
		right: 0;
		width: auto;
	}
}

/* Small phones adjustments */
@media (max-width: 480px) {
	.logo {
		margin-left: -12px;
	}

	.logo-image {
		height: 26px;
	}

	.search-section {
		padding: 10px;
	}

	#nicknameInput {
		font-size: 13px;
	}
}

/* Extra small phones (320px and below) - minimal layout */
@media (max-width: 320px) {
	.player-basic-info .player-card {
		grid-template-columns: 36px 1fr;
		padding: 8px 10px;
		gap: 6px;
		min-height: 48px;
	}

	.player-basic-info .player-card .player-name-container h2#playerName {
		font-size: 14px;
	}

	.player-basic-info .player-card .player-level {
		font-size: 11px;
	}

	/* Ultra minimal characteristics for very small screens */
	.player-basic-info .player-card .player-characteristics .characteristics-content {
		gap: 2px;
	}

	.player-basic-info .player-card .characteristic-item .characteristic-label {
		font-size: 9px;
	}

	.player-basic-info .player-card .characteristic-item .characteristic-value {
		font-size: 10px;
	}
}


/* Mobile bottom tab bar */
@media (max-width: 1024px) {

	/* hide top tab menu on mobile; bottom bar will replace */
	.tab-container .tab-menu {
		display: none !important;
	}

	.mobile-tabbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 56px;
		background: rgba(0, 0, 0, 0.9);
		border-top: 1px solid var(--border-color);
		display: none;
		/* hidden by default; shown when body.mobile-searched */
		align-items: center;
		justify-content: space-around;
		z-index: 120;
		backdrop-filter: blur(6px);
	}

	.mobile-tabitem {
		appearance: none;
		background: transparent;
		border: 0;
		color: var(--text-secondary);
		display: inline-flex !important;
		/* enforce flex even if inline style sets block */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		font-size: 11px;
		/* compact text size */
		width: 20%;
		height: 100%;
	}

	.mobile-tabitem .mobile-tabicon {
		font-size: 18px;
		line-height: 1;
	}

	.mobile-tabitem .mobile-tabtext {
		font-size: 11px;
	}

	.mobile-tabitem.active {
		color: var(--text-primary);
	}

	/* account for bottom bar spacing and reduce mobile padding */
	.tab-content {
		padding: 12px !important;
		/* Reduce from 24px to 12px for mobile */
	}

	.tab-content.active {
		padding-bottom: 72px;
	}

	/* ensure footer not covered */
	body>footer {
		margin-bottom: 72px;
	}

	/* show the bar after first search OR when a mobile popup is open */
	body.mobile-searched #mobileTabbar,
	body.mobile-popup-open #mobileTabbar {
		display: flex !important;
	}
}

/* Mobile search popup */
@media (max-width: 1024px) {
	.mobile-search-popup-overlay {
		position: fixed;
		inset: 0;
		display: none;
		align-items: center;
		justify-content: center;
		background: rgba(0, 0, 0, 0.6);
		z-index: 1000;
	}

	.mobile-search-popup {
		width: min(520px, 92vw);
		background: var(--bg-card);
		border: 1px solid var(--border-color);
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-lg);
		overflow: hidden;
	}

	.mobile-search-popup .popup-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px 16px;
		border-bottom: 1px solid var(--border-color);
	}

	.mobile-search-popup .popup-header h3 {
		margin: 0;
		font-size: 16px;
	}

	.mobile-search-popup .popup-header .popup-close {
		appearance: none;
		background: transparent;
		border: 0;
		color: var(--text-primary);
		font-size: 22px;
		line-height: 1;
		padding: 4px;
		cursor: pointer;
	}

	.mobile-search-popup .popup-content {
		padding: 14px 16px;
	}

	.mobile-search-form {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.mobile-search-form .match-type-select {
		min-height: 44px;
	}

	#mobileNicknameInput {
		min-height: 44px;
		font-size: 15px;
		padding: 10px 12px;
	}

	.mobile-search-actions {
		display: flex;
		gap: 10px;
	}

	.confirm-search-btn {
		flex: 1;
		min-height: 44px;
		background: var(--bg-accent);
		color: #000;
		border: 1px solid var(--bg-accent);
		border-radius: var(--radius-md);
		font-weight: 600;
	}

	/* Popup loader under content */
	.popup-loading {
		margin-top: 12px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8px;
		color: var(--text-secondary);
		width: 100%;
		text-align: center;
	}

	.popup-loading .spinner {
		width: 18px;
		height: 18px;
		border: 2px solid var(--border-color);
		border-top-color: var(--bg-accent);
		border-radius: 50%;
		animation: spin 0.9s linear infinite;
	}

	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}

	/* Better tap targets and safe areas */
	.mobile-search-popup {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.mobile-search-popup .popup-header {
		padding-top: calc(14px + env(safe-area-inset-top));
	}
}

/* Player card - compact mobile layout */
@media (max-width: 1024px) {
	.player-rank-name-level-info {
		width: 100%;
		display: flex;
		gap: 4px;
	}

	.player-basic-info .player-card {
		/* display: grid; */
		grid-template-columns: 48px 1fr;
		/* left: grade image, right: info */
		align-items: center;
		gap: 10px;
		padding: 12px 14px;
		min-height: 64px;
		/* ensure minimal touch height */
	}

	/* Thumbnail (grade image) sizing */
	.player-basic-info .player-card .current-grade-image img,
	.player-basic-info .player-card .grade-image {
		width: 48px;
		height: 48px;
		object-fit: contain;
	}

	/* Right info column */
	.player-basic-info .player-card .player-info {
		display: flex;
		align-items: center;
		gap: 8px;
		flex-direction: row;
	}

	/* Nickname single-line with ellipsis */
	.player-basic-info .player-card .player-name-container h2#playerName {
		font-size: 16px;
		line-height: 1.25;
		margin: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Level / secondary info */
	.player-basic-info .player-card .player-level {
		font-size: 12px;
		color: var(--text-secondary);
		margin: 0;
	}

	/* Characteristics below spanning full width - single row layout */
	.player-basic-info .player-card .player-characteristics {
		grid-column: 1 / -1;
		margin-top: 6px;
	}

	.player-basic-info .player-card .player-characteristics .characteristics-content {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		gap: 8px;
		flex-wrap: nowrap;
	}

	.player-basic-info .player-card .characteristic-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
		min-width: 0;
		padding: 2px 0;
	}

	.player-basic-info .player-card .characteristic-item .characteristic-label {
		font-size: 11px;
		color: var(--text-secondary);
		margin-bottom: 2px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 100%;
		text-align: center;
	}

	.player-basic-info .player-card .characteristic-item .characteristic-value {
		font-size: 12px;
		font-weight: 600;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 100%;
		text-align: center;
		line-height: 1.2;
	}

	/* Soften level3 visual density on mobile */
	.player-basic-info .player-card.division-tier-level3 {
		box-shadow: none;
		background: var(--bg-card);
		border: 1px solid var(--border-color);
	}

	/* Small phones (320px-480px) - ultra compact */
	@media (max-width: 480px) {
		.player-basic-info .player-card {
			grid-template-columns: 42px 1fr;
			padding: 10px 12px;
			gap: 8px;
			min-height: 56px;
		}

		.player-basic-info .player-card .player-name-container h2#playerName {
			font-size: 15px;
		}

		/* Ultra compact characteristics for small phones */
		.player-basic-info .player-card .player-characteristics .characteristics-content {
			gap: 4px;
		}

		.player-basic-info .player-card .characteristic-item .characteristic-label {
			font-size: 10px;
		}

		.player-basic-info .player-card .characteristic-item .characteristic-value {
			font-size: 11px;
		}
	}

	/* Medium phones (481px-640px) - balanced layout */
	@media (min-width: 481px) and (max-width: 640px) {
		.player-basic-info .player-card .player-characteristics .characteristics-content {
			gap: 6px;
		}

		.player-basic-info .player-card .characteristic-item .characteristic-label {
			font-size: 11px;
		}

		.player-basic-info .player-card .characteristic-item .characteristic-value {
			font-size: 12px;
		}
	}

	/* Large phones (641px-768px) - more spacious */
	@media (min-width: 641px) and (max-width: 768px) {
		.player-basic-info .player-card .player-characteristics .characteristics-content {
			gap: 8px;
		}

		.player-basic-info .player-card .characteristic-item .characteristic-label {
			font-size: 12px;
		}

		.player-basic-info .player-card .characteristic-item .characteristic-value {
			font-size: 13px;
		}
	}

	/* Tablets (769px-1024px) - tablet-optimized layout */
	@media (min-width: 769px) and (max-width: 1024px) {
		.player-basic-info .player-card {
			grid-template-columns: 56px 1fr;
			padding: 14px 16px;
			gap: 12px;
			min-height: 72px;
		}

		.player-basic-info .player-card .player-name-container h2#playerName {
			font-size: 17px;
		}

		.player-basic-info .player-card .player-level {
			font-size: 13px;
		}

		.player-basic-info .player-card .player-characteristics .characteristics-content {
			gap: 12px;
		}

		.player-basic-info .player-card .characteristic-item .characteristic-label {
			font-size: 12px;
		}

		.player-basic-info .player-card .characteristic-item .characteristic-value {
			font-size: 13px;
		}
	}
}

/* Summary compact mobile layout - 2 rows */
@media (max-width: 1024px) {
	.summary-compact {
		padding: 16px;
	}

	/* 더 구체적인 선택자로 우선순위 높이기 - 6열 그리드로 변경 */
	.dashboard-compact .summary-compact .summary-stats {
		display: grid !important;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr !important;
		grid-template-rows: 1fr 1fr !important;
		gap: 4px !important;
	}

	/* First row: 승률, 평균 득점, 평균 실점 - 각각 2칸씩 차지 */
	.dashboard-compact .summary-compact .summary-stats .summary-item:nth-child(1) {
		grid-row: 1 !important;
		grid-column-start: 1 !important;
		grid-column-end: 3 !important;
	}

	.dashboard-compact .summary-compact .summary-stats .summary-item:nth-child(2) {
		grid-row: 1 !important;
		grid-column-start: 3 !important;
		grid-column-end: 5 !important;
	}

	.dashboard-compact .summary-compact .summary-stats .summary-item:nth-child(3) {
		grid-row: 1 !important;
		grid-column-start: 5 !important;
		grid-column-end: 7 !important;
	}

	/* Second row: 경기력 트렌드, 컨트롤러 승률 - 정확히 3:3 비율로 균등 분할 */
	.dashboard-compact .summary-compact .summary-stats .summary-item:nth-child(4) {
		grid-row: 2 !important;
		grid-column-start: 1 !important;
		grid-column-end: 4 !important;
	}

	.dashboard-compact .summary-compact .summary-stats .summary-item:nth-child(5) {
		grid-row: 2 !important;
		grid-column-start: 4 !important;
		grid-column-end: 7 !important;
	}

	/* Summary item styling for mobile */
	.summary-item {
		padding: 12px 8px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 60px;
	}

	.summary-label {
		font-size: 11px;
		margin-bottom: 4px;
	}

	.summary-value {
		font-size: 16px;
	}

	/* Controller stats mobile styling */
	.controller-stats {
		gap: 12px;
		width: 100%;
	}

	.controller-stat {
		flex: 1;
	}

	.controller-label {
		font-size: 10px;
		margin-bottom: 4px;
	}

	.controller-value {
		font-size: 14px;
	}

	/* Trend display mobile styling */
	.trend-display {
		gap: 6px;
	}

	.trend-icon {
		font-size: 14px;
	}

	.trend-text {
		font-size: 14px;
	}

	/* 작은 모바일 경기 기록 카드 추가 최적화 */
	.match-header {
		padding: 10px !important;
	}

	.match-details {
		gap: 3px !important;
	}

	.match-date {
		font-size: 9px !important;
	}

	.match-opponent {
		font-size: 12px !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	.opponent-nickname-clickable {
		white-space: nowrap !important;
		display: inline !important;
	}

	.match-badges {
		gap: 3px !important;
	}

	.match-highlight,
	.match-mvp {
		font-size: 8px !important;
		padding: 1px 4px !important;
	}

	.score {
		font-size: 14px !important;
		padding: 4px 8px !important;
	}

	.match-result {
		display: none !important;
	}
}

/* 모바일 경기 기록 컨트롤 최적화 */
@media (max-width: 1024px) {
	.matches-header {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 8px !important;
	}

	.matches-controls {
		flex-direction: row !important;
		gap: 8px !important;
		align-items: center !important;
		justify-content: flex-end !important;
		width: 100% !important;
	}

	.match-count-select {
		padding: 6px 10px !important;
		font-size: 12px !important;
		min-width: 70px !important;
	}

	.load-more-btn {
		padding: 6px 12px !important;
		font-size: 12px !important;
	}
}

/* 모바일 경기 기록 카드 최적화 */
@media (max-width: 1024px) {
	.match-item {
		padding: 0 !important;
	}

	.match-header {
		padding: 12px !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 8px !important;
	}

	.match-info {
		flex-direction: row !important;
		justify-content: space-between !important;
		align-items: flex-start !important;
	}

	.match-details {
		flex: 1 !important;
		gap: 4px !important;
	}

	.match-date {
		font-size: 10px !important;
		color: var(--text-muted) !important;
	}

	.match-opponent {
		font-size: 13px !important;
		font-weight: 600 !important;
		margin-bottom: 4px !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	.opponent-nickname-clickable {
		white-space: nowrap !important;
		display: inline !important;
	}

	.match-badges {
		flex-direction: row !important;
		gap: 4px !important;
		flex-wrap: wrap !important;
	}

	.match-highlight {
		font-size: 9px !important;
		padding: 2px 6px !important;
	}

	.match-mvp {
		font-size: 9px !important;
		padding: 2px 6px !important;
	}

	.match-score {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: 2px !important;
		justify-content: flex-end !important;
	}

	.score {
		font-size: 16px !important;
		padding: 6px 12px !important;
		margin-right: 0 !important;
	}

	.match-result {
		display: none !important;
	}
}

/* Small phones (320px-480px) - ultra compact */
@media (max-width: 480px) {
	.summary-compact {
		padding: 12px;
	}

	.summary-stats {
		gap: 8px;
	}

	.summary-item {
		padding: 10px 6px;
		min-height: 50px;
	}

	.summary-label {
		font-size: 10px;
		margin-bottom: 3px;
	}

	.summary-value {
		font-size: 14px;
	}

	.controller-stats {
		gap: 8px;
	}

	.controller-label {
		font-size: 9px;
		margin-bottom: 3px;
	}

	.controller-value {
		font-size: 12px;
	}

	.trend-display {
		gap: 4px;
	}

	.trend-icon {
		font-size: 12px;
	}

	.trend-text {
		font-size: 12px;
	}
}

/* Medium phones (481px-640px) - balanced */
@media (min-width: 481px) and (max-width: 640px) {
	.summary-compact {
		padding: 14px;
	}

	.summary-stats {
		gap: 10px;
	}

	.summary-item {
		padding: 11px 7px;
		min-height: 55px;
	}

	.summary-label {
		font-size: 11px;
		margin-bottom: 4px;
	}

	.summary-value {
		font-size: 15px;
	}

	.controller-stats {
		gap: 10px;
	}

	.controller-label {
		font-size: 10px;
		margin-bottom: 4px;
	}

	.controller-value {
		font-size: 13px;
	}

	.trend-display {
		gap: 5px;
	}

	.trend-icon {
		font-size: 13px;
	}

	.trend-text {
		font-size: 13px;
	}
}

/* Large phones (641px-768px) - more spacious */
@media (min-width: 641px) and (max-width: 768px) {
	.summary-compact {
		padding: 16px;
	}

	.summary-stats {
		gap: 12px;
	}

	.summary-item {
		padding: 12px 8px;
		min-height: 60px;
	}

	.summary-label {
		font-size: 12px;
		margin-bottom: 5px;
	}

	.summary-value {
		font-size: 17px;
	}

	.controller-stats {
		gap: 12px;
	}

	.controller-label {
		font-size: 11px;
		margin-bottom: 5px;
	}

	.controller-value {
		font-size: 15px;
	}

	.trend-display {
		gap: 6px;
	}

	.trend-icon {
		font-size: 15px;
	}

	.trend-text {
		font-size: 15px;
	}
}

/* Tablets (769px-1024px) - tablet optimized */
@media (min-width: 769px) and (max-width: 1024px) {
	.summary-compact {
		padding: 18px;
	}

	.summary-stats {
		gap: 14px;
	}

	.summary-item {
		padding: 14px 10px;
		min-height: 70px;
	}

	.summary-label {
		font-size: 12px;
		margin-bottom: 6px;
	}

	.summary-value {
		font-size: 18px;
	}

	.controller-stats {
		gap: 14px;
	}

	.controller-label {
		font-size: 11px;
		margin-bottom: 6px;
	}

	.controller-value {
		font-size: 16px;
	}

	.trend-display {
		gap: 8px;
	}

	.trend-icon {
		font-size: 16px;
	}

	.trend-text {
		font-size: 16px;
	}
}

/* Extra small phones (320px and below) - minimal layout */
@media (max-width: 320px) {
	.summary-compact {
		padding: 10px;
	}

	.summary-stats {
		gap: 6px;
	}

	.summary-item {
		padding: 8px 4px;
		min-height: 45px;
	}

	.summary-label {
		font-size: 9px;
		margin-bottom: 2px;
	}

	.summary-value {
		font-size: 13px;
	}

	.controller-stats {
		gap: 6px;
	}

	.controller-label {
		font-size: 8px;
		margin-bottom: 2px;
	}

	.controller-value {
		font-size: 11px;
	}

	.trend-display {
		gap: 3px;
	}

	.trend-icon {
		font-size: 11px;
	}

	.trend-text {
		font-size: 11px;
	}

	/* Top players - 3 columns on very small screens */
	.top-players-card .top-players-list {
		display: grid !important;
		grid-template-columns: 1fr 1fr 1fr !important;
		gap: 4px !important;
	}

	.top-player-item {
		padding: 4px !important;
		min-height: 60px !important;
		gap: 2px !important;
	}

	.top-player-image {
		width: 24px !important;
		height: 24px !important;
	}

	.top-player-name {
		font-size: 8px !important;
		max-width: 50px !important;
	}

	.top-player-stats {
		font-size: 7px !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 1px !important;
		align-items: center !important;
	}

	.top-player-stat {
		display: flex !important;
		align-items: center !important;
		gap: 1px !important;
		white-space: nowrap !important;
	}
}

/* Card content mobile optimization */
@media (max-width: 1024px) {

	/* Analysis cards container - single column on mobile */
	.analysis-cards-container {
		display: flex !important;
		flex-direction: column !important;
		gap: 12px !important;
		margin-bottom: 12px !important;
	}

	/* Card content padding optimization */
	.card-content {
		padding: 8px 12px !important;
	}

	/* Card header mobile optimization */
	.card-header {
		padding: 10px 12px !important;
	}

	.card-header h3 {
		font-size: 14px !important;
	}

	/* Goal stats mobile layout - single row */
	.goal-analysis-card .goal-stats {
		display: flex !important;
		flex-direction: row !important;
		gap: 8px !important;
	}

	/* Goal card mobile optimization */
	.goal-card {
		padding: 10px !important;
		min-height: 100px !important;
		gap: 8px !important;
	}

	.goal-card-icon {
		font-size: 20px !important;
	}

	.goal-card-label {
		font-size: 12px !important;
	}

	.goal-card-value {
		font-size: 18px !important;
	}

	/* Top players list mobile layout - 3 columns */
	.top-players-card .top-players-list {
		display: grid !important;
		grid-template-columns: 1fr 1fr 1fr !important;
		gap: 8px !important;
	}

	/* Top player item mobile optimization */
	.top-player-item {
		padding: 10px !important;
		min-height: 100px !important;
		gap: 6px !important;
	}

	.top-player-image {
		width: 48px !important;
		height: 48px !important;
	}

	.top-player-name {
		font-size: 12px !important;
		max-width: 100px !important;
	}

	.top-player-stats {
		font-size: 10px !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 2px !important;
		align-items: center !important;
	}

	.top-player-stat {
		display: flex !important;
		align-items: center !important;
		gap: 4px !important;
		justify-content: center !important;
		white-space: nowrap !important;
	}

	/* Match count styling */
	.match-count {
		font-size: 12px !important;
		color: var(--text-accent) !important;
		font-weight: 500 !important;
	}
}

/* Small phones (320px-480px) - ultra compact card content */
@media (max-width: 480px) {
	.card-content {
		padding: 6px 10px !important;
	}

	.card-header {
		padding: 8px 10px !important;
	}

	.card-header h3 {
		font-size: 13px !important;
	}

	.goal-card {
		padding: 8px !important;
		min-height: 80px !important;
		gap: 6px !important;
		flex: 1 !important;
	}

	.goal-card-icon {
		font-size: 18px !important;
	}

	.goal-card-label {
		font-size: 11px !important;
	}

	.goal-card-value {
		font-size: 16px !important;
	}

	/* Top players - 3 columns on small phones */
	.top-players-card .top-players-list {
		display: grid !important;
		grid-template-columns: 1fr 1fr 1fr !important;
		gap: 6px !important;
	}

	.top-player-item {
		padding: 6px !important;
		min-height: 70px !important;
		gap: 3px !important;
	}

	.top-player-image {
		width: 32px !important;
		height: 32px !important;
	}

	.top-player-name {
		font-size: 9px !important;
		max-width: 60px !important;
	}

	.top-player-stats {
		font-size: 8px !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 1px !important;
		align-items: center !important;
	}

	.top-player-stat {
		display: flex !important;
		align-items: center !important;
		gap: 2px !important;
		justify-content: center !important;
		white-space: nowrap !important;
	}
}

/* Medium phones (481px-640px) - balanced card content */
@media (min-width: 481px) and (max-width: 640px) {
	.card-content {
		padding: 7px 11px !important;
	}

	.card-header {
		padding: 9px 11px !important;
	}

	.card-header h3 {
		font-size: 13px !important;
	}

	.goal-card {
		padding: 9px !important;
		min-height: 90px !important;
		gap: 7px !important;
		flex: 1 !important;
	}

	.goal-card-icon {
		font-size: 19px !important;
	}

	.goal-card-label {
		font-size: 11px !important;
	}

	.goal-card-value {
		font-size: 17px !important;
	}

	.top-player-item {
		padding: 9px !important;
		min-height: 90px !important;
		gap: 5px !important;
	}

	.top-player-image {
		width: 44px !important;
		height: 44px !important;
	}

	.top-player-name {
		font-size: 11px !important;
		max-width: 90px !important;
	}

	/* Top players - 3 columns on medium phones */
	.top-players-card .top-players-list {
		display: grid !important;
		grid-template-columns: 1fr 1fr 1fr !important;
		gap: 7px !important;
	}

	.top-player-stats {
		font-size: 9px !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 1px !important;
		align-items: center !important;
	}

	.top-player-stat {
		display: flex !important;
		align-items: center !important;
		gap: 3px !important;
		justify-content: center !important;
		white-space: nowrap !important;
	}
}

/* Large phones (641px-768px) - more spacious card content */
@media (min-width: 641px) and (max-width: 768px) {
	.card-content {
		padding: 8px 12px !important;
	}

	.card-header {
		padding: 10px 12px !important;
	}

	.card-header h3 {
		font-size: 14px !important;
	}

	.goal-card {
		padding: 10px !important;
		min-height: 100px !important;
		gap: 8px !important;
		flex: 1 !important;
	}

	.goal-card-icon {
		font-size: 20px !important;
	}

	.goal-card-label {
		font-size: 12px !important;
	}

	.goal-card-value {
		font-size: 18px !important;
	}

	.top-player-item {
		padding: 10px !important;
		min-height: 100px !important;
		gap: 6px !important;
	}

	.top-player-image {
		width: 48px !important;
		height: 48px !important;
	}

	.top-player-name {
		font-size: 12px !important;
		max-width: 100px !important;
	}

	/* Top players - 3 columns on large phones */
	.top-players-card .top-players-list {
		display: grid !important;
		grid-template-columns: 1fr 1fr 1fr !important;
		gap: 8px !important;
	}

	.top-player-stats {
		font-size: 10px !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 2px !important;
		align-items: center !important;
	}

	.top-player-stat {
		display: flex !important;
		align-items: center !important;
		gap: 4px !important;
		justify-content: center !important;
		white-space: nowrap !important;
	}
}

/* Tablets (769px-1024px) - tablet optimized card content */
@media (min-width: 769px) and (max-width: 1024px) {
	.card-content {
		padding: 10px 14px !important;
	}

	.card-header {
		padding: 12px 14px !important;
	}

	.card-header h3 {
		font-size: 15px !important;
	}

	/* Goal stats - single row on tablet */
	.goal-analysis-card .goal-stats {
		display: flex !important;
		flex-direction: row !important;
		gap: 10px !important;
	}

	.goal-card {
		padding: 12px !important;
		min-height: 110px !important;
		gap: 10px !important;
		flex: 1 !important;
	}

	.goal-card-icon {
		font-size: 22px !important;
	}

	.goal-card-label {
		font-size: 13px !important;
	}

	.goal-card-value {
		font-size: 20px !important;
	}

	/* Top players - 3 columns on tablet */
	.top-players-card .top-players-list {
		display: grid !important;
		grid-template-columns: 1fr 1fr 1fr !important;
		gap: 10px !important;
	}

	.top-player-item {
		padding: 12px !important;
		min-height: 110px !important;
		gap: 8px !important;
	}

	.top-player-image {
		width: 52px !important;
		height: 52px !important;
	}

	.top-player-name {
		font-size: 13px !important;
		max-width: 110px !important;
	}

	.top-player-stats {
		font-size: 11px !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 3px !important;
		align-items: center !important;
	}

	.top-player-stat {
		display: flex !important;
		align-items: center !important;
		gap: 5px !important;
		justify-content: center !important;
		white-space: nowrap !important;
	}
}

/* 모바일 경기 상세 팝업 스타일 */
@media (max-width: 1024px) {

	/* 모바일에서 카드 확장 비활성화 */
	.match-item .match-details-expanded {
		display: none !important;
	}

	/* 모바일에서 확장 아이콘 숨기기 */
	.match-item .expand-icon {
		display: none !important;
	}

	/* 팝업 오버레이 */
	.match-popup-overlay {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		background: rgba(0, 0, 0, 0.7) !important;
		z-index: 1000 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		animation: fadeIn 0.3s ease !important;
	}

	/* 팝업 콘텐츠 */
	.match-popup-content {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		background: var(--bg-card) !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch !important;
		overscroll-behavior: contain !important;
		animation: slideUp 0.3s ease !important;
	}

	/* 팝업 닫기 버튼 */
	.match-popup-close-btn {
		position: fixed !important;
		top: 16px !important;
		right: 16px !important;
		background: var(--bg-accent) !important;
		color: #000 !important;
		border: none !important;
		border-radius: 50% !important;
		width: 44px !important;
		height: 44px !important;
		font-size: 20px !important;
		font-weight: bold !important;
		cursor: pointer !important;
		z-index: 1001 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
		line-height: 1 !important;
		touch-action: manipulation !important;
		user-select: none !important;
		-webkit-user-select: none !important;
		-webkit-touch-callout: none !important;
		-webkit-tap-highlight-color: transparent !important;
	}

	/* 닫기 버튼 호버 및 활성 상태 */
	.match-popup-close-btn:hover,
	.match-popup-close-btn:active {
		background: var(--bg-accent-hover) !important;
		transform: scale(1.05) !important;
	}

	/* 팝업 헤더 */
	.match-popup-header {
		position: sticky !important;
		top: 0 !important;
		background: var(--bg-card) !important;
		border-bottom: 1px solid var(--border-color) !important;
		padding: 16px !important;
		z-index: 100 !important;
	}

	.match-popup-title {
		display: flex !important;
		flex-direction: column !important;
		gap: 8px !important;
		align-items: center !important;
		text-align: center !important;
	}

	.match-popup-date {
		font-size: 12px !important;
		color: var(--text-muted) !important;
		font-weight: 500 !important;
	}

	.match-popup-opponent {
		font-size: 16px !important;
		color: var(--text-primary) !important;
		font-weight: 600 !important;
	}

	.match-popup-score {
		font-size: 18px !important;
		font-weight: 700 !important;
		padding: 8px 16px !important;
		border-radius: var(--radius-md) !important;
	}

	.match-popup-score.win {
		color: var(--text-success) !important;
		background: rgba(0, 212, 170, 0.1) !important;
		border: 1px solid rgba(0, 212, 170, 0.3) !important;
	}

	.match-popup-score.lose {
		color: var(--text-error) !important;
		background: rgba(255, 71, 87, 0.1) !important;
		border: 1px solid rgba(255, 71, 87, 0.3) !important;
	}

	.match-popup-score.draw {
		color: var(--text-warning) !important;
		background: rgba(255, 165, 2, 0.1) !important;
		border: 1px solid rgba(255, 165, 2, 0.3) !important;
	}

	/* 팝업 바디 */
	.match-popup-body {
		padding: 16px !important;
	}

	/* 팝업 내부 콘텐츠 스타일 (데스크톱 스타일 오버라이드) */
	.match-popup-overlay .match-details-content {
		padding: 1px !important;
		background: transparent !important;
		border: none !important;
		border-radius: 0 !important;
		margin: 0 !important;
	}

	/* 팝업 내부 선수 정보 스타일 */
	.match-popup-overlay .teams-players {
		margin-top: 0 !important;
	}

	.match-popup-overlay .player-item {
		background: var(--bg-tertiary) !important;
		border: 1px solid var(--border-color) !important;
		border-radius: var(--radius-md) !important;
	}

	/* 팝업 내부 섹션 스타일 */
	.match-popup-overlay .section-header {
		margin-top: 24px !important;
		margin-bottom: 16px !important;
	}

	.match-popup-overlay .section-header:first-child {
		margin-top: 0 !important;
	}

	/* 팝업 내부 경기 정보 가로 배치 */
	.match-popup-overlay .match-opponents-single-line {
		flex-direction: row !important;
		gap: 12px !important;
		justify-content: center !important;
		align-items: center !important;
		margin: 12px 0 !important;
	}

	.match-popup-overlay .team-badge {
		flex: 1 !important;
		min-width: 0 !important;
	}

	.match-popup-overlay .team-name {
		font-size: 14px !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	.match-popup-overlay .score-display {
		flex: 0 0 auto !important;
	}

	.match-popup-overlay .score-box {
		min-width: 80px !important;
	}

	/* 팝업 내부 통계 비교 한 줄 유지 */
	.match-popup-overlay .stat-comparison {
		flex-wrap: nowrap !important;
		gap: 8px !important;
		justify-content: space-between !important;
	}

	.match-popup-overlay .user-value,
	.match-popup-overlay .opponent-value {
		flex: 0 0 auto !important;
		white-space: nowrap !important;
		font-size: 12px !important;
		min-width: 0 !important;
	}

	.match-popup-overlay .vs {
		flex: 0 0 auto !important;
		font-size: 10px !important;
		color: var(--text-secondary) !important;
		margin: 0 4px !important;
	}

	/* 통계 아이템 최적화 */
	.match-popup-overlay .stat-item {
		padding: 8px 0 !important;
	}

	.match-popup-overlay .stat-label {
		font-size: 11px !important;
		margin-bottom: 6px !important;
		text-align: center !important;
	}

	/* 팝업 내부 슛 유형 가로 배치 */
	.match-popup-overlay .goal-types {
		flex-direction: row !important;
		justify-content: center !important;
		gap: 6px !important;
		flex-wrap: wrap !important;
		margin-top: 6px !important;
	}

	.match-popup-overlay .goal-type {
		font-size: 10px !important;
		padding: 4px 6px !important;
		border-radius: var(--radius-sm) !important;
		background: var(--bg-tertiary) !important;
		border: 1px solid var(--border-color) !important;
		white-space: nowrap !important;
		flex: 0 0 auto !important;
	}

	/* 팝업과 내용에 터치 동작 방지 */
	.match-popup-overlay,
	.match-popup-overlay * {
		touch-action: manipulation !important;
		user-select: none !important;
		-webkit-user-select: none !important;
		-webkit-touch-callout: none !important;
		-webkit-tap-highlight-color: transparent !important;
	}

	/* 팝업이 열릴 때 body 스크롤 방지 (스크롤 위치 유지) */
	body.mobile-popup-open {
		overflow: hidden !important;
		position: fixed !important;
		width: 100% !important;
		height: 100% !important;
		touch-action: none !important;
		/* 스크롤 위치 유지를 위해 top 값을 동적으로 설정 */
	}

	/* 애니메이션 */
	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes slideUp {
		from {
			transform: translateY(100%);
		}

		to {
			transform: translateY(0);
		}
	}

	/* 모바일 로딩 메시지 줄바꿈 */
	.loading {
		flex-direction: column !important;
		gap: 8px !important;
		text-align: center !important;
	}

	.loading span {
		white-space: normal !important;
		line-height: 1.4 !important;
		font-size: 14px !important;
		max-width: 280px !important;
		word-break: keep-all !important;
	}
}

/* 구단 Tab 모바일 최적화 - top-players-subtitle */
.top-players-subtitle {
	font-size: 11px !important;
	line-height: 1.4 !important;
}

/* 구단 Tab 모바일 최적화 - guide-btn 위치 조정 */
.guide-btn {
	right: 30px !important;
}

/* 구단 Tab 전용 top-player-category 모바일 최적화 */
.top-players-section .top-player-category {
	padding: 12px !important;
	min-width: auto !important;
	background: var(--bg-secondary) !important;
	border-radius: 12px !important;
}

.top-players-section .top-player-category h5 {
	font-size: 12px !important;
	margin-bottom: 8px !important;
}

/* 대시보드 주요선수 카드 전용 top-player-category 모바일 최적화 */
.top-players-card .top-player-category {
	padding: 8px !important;
	min-width: auto !important;
	background: var(--bg-tertiary) !important;
	border-radius: 8px !important;
}

.top-players-card .top-player-category h5 {
	font-size: 11px !important;
	margin-bottom: 6px !important;
}

/* 구단 Tab 모바일 최적화 - 최고의 선수 영역 */
@media (max-width: 1024px) {

	/* 최고의 선수 섹션 모바일 최적화 - 패딩 최소화 */
	.top-players-section {
		padding: 16px 5px !important;
		margin-bottom: 24px !important;
	}

	/* 최고의 선수 헤더 모바일 최적화 */
	.top-players-header {
		margin-bottom: 12px !important;
	}

	.top-players-section h4 {
		font-size: 16px !important;
	}

	.top-players-subtitle {
		font-size: 12px !important;
		margin-bottom: 16px !important;
	}

	/* 가이드 버튼 모바일 최적화 */
	.guide-btn {
		width: 32px !important;
		height: 32px !important;
		font-size: 16px !important;
		right: 20px !important;
	}

	/* 슬라이더 컨테이너 모바일 최적화 */
	.top-players-slider-container {
		gap: 12px !important;
	}

	.top-players-slider-container .slider-prev-btn {
		left: -40px !important;
	}

	.top-players-slider-container .slider-next-btn {
		right: -40px !important;
	}

	.slider-nav-btn {
		width: 40px !important;
		height: 40px !important;
	}

	/* 슬라이드 그리드 모바일 최적화 - 1열로 변경하여 스와이프 가능하게 */
	.top-players-slide {
		display: flex !important;
		flex-direction: row !important;
		gap: 12px !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		-webkit-overflow-scrolling: touch !important;
		scroll-behavior: smooth !important;
		scrollbar-width: none !important;
		/* Firefox */
		-ms-overflow-style: none !important;
		/* IE and Edge */
	}

	/* Webkit 브라우저에서 스크롤바 숨기기 */
	.top-players-slide::-webkit-scrollbar {
		display: none !important;
	}

	/* 구단 Tab 전용 top-player-category 모바일 최적화 */
	.top-players-section .top-player-category {
		padding: 12px !important;
		min-width: 280px !important;
		background: var(--bg-secondary) !important;
		border-radius: 12px !important;
		flex: 0 0 auto !important;
	}


	.top-players-section .top-player-category h5 {
		font-size: 12px !important;
		margin-bottom: 8px !important;
	}

	/* 선수 리스트 모바일 최적화 */
	.top-players-list {
		gap: 6px !important;
		width: 100%;
	}

	.top-player-item {
		padding: 8px !important;
		min-height: 60px !important;
	}

	.player-image {
		width: 36px !important;
		height: 36px !important;
	}

	.player-name {
		font-size: 11px !important;
		max-width: 80px !important;
	}

	.player-stats {
		font-size: 9px !important;
	}
}

/* 태블릿 사이즈 (769px-1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
	.top-players-section {
		padding: 20px 40px !important;
	}

	.top-players-slide {
		display: flex !important;
		flex-direction: row !important;
		gap: 16px !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		-webkit-overflow-scrolling: touch !important;
		scroll-behavior: smooth !important;
		scrollbar-width: none !important;
		/* Firefox */
		-ms-overflow-style: none !important;
		/* IE and Edge */
	}

	.top-players-slide::-webkit-scrollbar {
		display: none !important;
	}

	.top-players-section .top-player-category {
		padding: 14px !important;
		min-width: 300px !important;
		flex: 0 0 auto !important;
	}

	.top-players-section .top-player-category h5 {
		font-size: 13px !important;
	}

	.player-image {
		width: 40px !important;
		height: 40px !important;
	}

	.player-name {
		font-size: 12px !important;
		max-width: 100px !important;
	}

	.player-stats {
		font-size: 10px !important;
	}
}

/* 작은 모바일 (480px 이하) */
@media (max-width: 480px) {
	.top-players-section {
		padding: 12px 16px !important;
	}

	.top-players-section h4 {
		font-size: 14px !important;
	}

	.top-players-subtitle {
		font-size: 11px !important;
	}

	.guide-btn {
		width: 28px !important;
		height: 28px !important;
		font-size: 14px !important;
		right: 16px !important;
	}

	.top-players-slider-container .slider-prev-btn {
		left: -30px !important;
	}

	.top-players-slider-container .slider-next-btn {
		right: -30px !important;
	}

	.slider-nav-btn {
		width: 36px !important;
		height: 36px !important;
	}

	.top-players-slide {
		display: flex !important;
		flex-direction: row !important;
		gap: 8px !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		-webkit-overflow-scrolling: touch !important;
		scroll-behavior: smooth !important;
		scrollbar-width: none !important;
		/* Firefox */
		-ms-overflow-style: none !important;
		/* IE and Edge */
	}

	.top-players-slide::-webkit-scrollbar {
		display: none !important;
	}

	.top-players-section .top-player-category {
		padding: 10px !important;
	}


	.top-players-section .top-player-category h5 {
		font-size: 11px !important;
	}

	.top-player-item {
		padding: 6px !important;
		min-height: 50px !important;
	}

	.player-image {
		width: 32px !important;
		height: 32px !important;
	}

	.player-name {
		font-size: 10px !important;
		max-width: 70px !important;
	}

	.player-stats {
		font-size: 8px !important;
	}
}

/* 매우 작은 모바일 (320px 이하) */
@media (max-width: 320px) {
	.top-players-section {
		padding: 10px 12px !important;
	}

	.top-players-section h4 {
		font-size: 13px !important;
	}

	.top-players-subtitle {
		font-size: 10px !important;
	}

	.guide-btn {
		width: 24px !important;
		height: 24px !important;
		font-size: 12px !important;
		right: 12px !important;
	}

	.top-players-slider-container .slider-prev-btn {
		left: -25px !important;
	}

	.top-players-slider-container .slider-next-btn {
		right: -25px !important;
	}

	.slider-nav-btn {
		width: 32px !important;
		height: 32px !important;
	}

	.top-players-slide {
		display: flex !important;
		flex-direction: row !important;
		gap: 8px !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		-webkit-overflow-scrolling: touch !important;
		scroll-behavior: smooth !important;
		scrollbar-width: none !important;
		/* Firefox */
		-ms-overflow-style: none !important;
		/* IE and Edge */
	}

	.top-players-slide::-webkit-scrollbar {
		display: none !important;
	}

	.top-players-section .top-player-category {
		padding: 8px !important;
	}

	/* 매우 작은 모바일에서 카드 너비 강제 적용 - 최고 우선순위 선택자 */
	.top-players-section .top-players-slide .top-player-category,
	.top-players-section .top-players-slider-container .top-players-slide .top-player-category {
		min-width: 80vw !important;
		width: 80vw !important;
		max-width: 80vw !important;
		flex: 0 0 80vw !important;
	}

	.top-players-section .top-player-category h5 {
		font-size: 10px !important;
	}

	.top-player-item {
		padding: 4px !important;
		min-height: 45px !important;
	}

	.player-image {
		width: 28px !important;
		height: 28px !important;
	}

	.player-name {
		font-size: 9px !important;
		max-width: 60px !important;
	}

	.player-stats {
		font-size: 7px !important;
	}
}

/* 모바일용 슬라이더 인디케이터와 페이드 효과 */
@media (max-width: 1024px) {

	/* 슬라이더 컨테이너 */
	.top-players-slider-container {
		position: relative !important;
	}

	/* 슬라이드 가운데 정렬 - 패딩 최소화 */
	.top-players-slide {
		display: flex !important;
		justify-content: center !important;
		align-items: flex-start !important;
		width: 100% !important;
		padding: 0 !important;
	}

	/* 카테고리 카드 가운데 정렬 - 화면에 맞게 확장 */
	.top-players-slide .top-player-category {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		margin: 0 auto !important;
	}

	/* 인디케이터 도트 컨테이너 - 슬라이더와 분리 */
	.top-players-indicators {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 8px !important;
		margin-top: 20px !important;
		padding: 0 20px !important;
		width: 100% !important;
	}

	/* 인디케이터 도트 */
	.indicator-dot {
		width: 8px !important;
		height: 8px !important;
		border-radius: 50% !important;
		background: var(--border-color) !important;
		transition: all 0.3s ease !important;
		cursor: pointer !important;
		opacity: 0.6 !important;
	}

	.indicator-dot.active {
		background: var(--bg-accent) !important;
		transform: scale(1.3) !important;
		opacity: 1 !important;
	}

	.indicator-dot:hover {
		opacity: 0.8 !important;
		transform: scale(1.1) !important;
	}

	/* 슬라이드 카운터 - 숨김 */
	.top-players-counter {
		display: none !important;
	}

	/* 스와이프 힌트 - 인디케이터 아래 */
	.swipe-hint {
		display: block !important;
		text-align: center !important;
		margin-top: 8px !important;
		font-size: 11px !important;
		color: var(--text-muted) !important;
		opacity: 0.8 !important;
		animation: fadeInOut 3s ease-in-out !important;
		width: 100% !important;
	}

	@keyframes fadeInOut {

		0%,
		100% {
			opacity: 0;
		}

		50% {
			opacity: 0.8;
		}
	}
}

/* 작은 모바일에서 인디케이터 조정 */
@media (max-width: 480px) {
	.top-players-indicators {
		gap: 6px !important;
		margin-top: 16px !important;
		padding: 0 16px !important;
	}

	.indicator-dot {
		width: 6px !important;
		height: 6px !important;
	}

	.swipe-hint {
		font-size: 10px !important;
		margin-top: 6px !important;
	}
}

/* 모바일 구단 카드 가독성 개선 */
@media (max-width: 1024px) {

	/* 구단 카드 전체 레이아웃 */
	.team-formation-card {
		padding: 16px !important;
		min-height: auto !important;
	}

	/* 구단명과 선수명 영역 */
	.team-formation-header {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 8px !important;
		margin-bottom: 16px !important;
	}

	.team-formation-club {
		font-size: 18px !important;
		font-weight: 700 !important;
		margin-bottom: 4px !important;
	}

	.team-formation-players {
		font-size: 14px !important;
		color: var(--text-secondary) !important;
		line-height: 1.4 !important;
	}

	/* 통계 영역 - 가로 배치로 변경 */
	.team-formation-stats {
		margin-bottom: 16px !important;
	}

	.team-stat-single-row {
		flex-direction: row !important;
		gap: 8px !important;
		padding: 0 !important;
		justify-content: space-between !important;
	}

	/* 개별 통계 항목 */
	.team-stat-item {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		padding: 8px 6px !important;
		background: var(--bg-tertiary) !important;
		border-radius: 8px !important;
		border: 1px solid var(--border-color) !important;
		flex: 1 !important;
		min-width: 0 !important;
	}

	.team-stat-label {
		font-size: 10px !important;
		color: var(--text-secondary) !important;
		font-weight: 600 !important;
		text-transform: none !important;
		letter-spacing: 0 !important;
		text-align: center !important;
		margin-bottom: 4px !important;
	}

	.team-stat-value {
		font-size: 14px !important;
		font-weight: 700 !important;
		color: var(--text-primary) !important;
		text-align: center !important;
	}

	.team-stat-value.win-rate {
		color: var(--text-accent) !important;
		font-size: 16px !important;
	}

	/* 날짜 정보 */
	.team-formation-info {
		font-size: 12px !important;
		color: var(--text-muted) !important;
		text-align: center !important;
		padding-top: 8px !important;
		border-top: 1px solid var(--border-color) !important;
		margin-top: 12px !important;
	}
}

/* 작은 모바일에서 추가 조정 */
@media (max-width: 480px) {
	.team-formation-card {
		padding: 12px !important;
	}

	.team-formation-club {
		font-size: 16px !important;
	}

	.team-formation-players {
		font-size: 13px !important;
	}

	.team-stat-item {
		padding: 6px 4px !important;
	}

	.team-stat-label {
		font-size: 9px !important;
	}

	.team-stat-value {
		font-size: 12px !important;
	}

	.team-stat-value.win-rate {
		font-size: 14px !important;
	}
}

/* 모바일 구단 카드 슬라이더 - 최고의 선수와 동일한 기능 */
@media (max-width: 1024px) {

	/* 구단 카드 슬라이더 컨테이너 */
	.team-cards-slider-container {
		position: relative !important;
		padding: 16px !important;
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		overflow: hidden !important;
	}

	/* 구단 카드 슬라이더 */
	.team-cards-slider {
		overflow: hidden !important;
		position: relative !important;
		order: 1 !important;
		width: 100% !important;
	}

	/* 구단 카드 트랙 - 가로 스크롤 */
	.team-cards-track {
		display: flex !important;
		flex-direction: row !important;
		gap: 0 !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		-webkit-overflow-scrolling: touch !important;
		scroll-behavior: smooth !important;
		scrollbar-width: none !important;
		-ms-overflow-style: none !important;
		width: 100% !important;
	}

	/* Webkit 브라우저에서 스크롤바 숨기기 */
	.team-cards-track::-webkit-scrollbar {
		display: none !important;
	}

	/* 구단 슬라이드 - 각 카드가 개별 슬라이드 */
	.team-slide {
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: center !important;
		width: 100% !important;
		padding: 0 16px !important;
		flex: 0 0 100% !important;
		min-width: 100% !important;
		box-sizing: border-box !important;
	}

	/* 구단 카드 - 화면에 맞게 조정 */
	.team-formation-card {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 100% !important;
		margin: 0 !important;
	}

	/* 좌우 버튼 숨기기 */
	.team-cards-slider-container .slider-prev-btn,
	.team-cards-slider-container .slider-next-btn {
		display: none !important;
	}

	/* 구단 카드 인디케이터 컨테이너 */
	.team-cards-indicators {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 8px !important;
		margin-top: 20px !important;
		padding: 0 20px !important;
		width: 100% !important;
		order: 2 !important;
	}

	/* 구단 카드 인디케이터 도트 */
	.team-indicator-dot {
		width: 8px !important;
		height: 8px !important;
		border-radius: 50% !important;
		background: var(--border-color) !important;
		transition: all 0.3s ease !important;
		cursor: pointer !important;
		opacity: 0.6 !important;
	}

	.team-indicator-dot.active {
		background: var(--bg-accent) !important;
		transform: scale(1.3) !important;
		opacity: 1 !important;
	}

	.team-indicator-dot:hover {
		opacity: 0.8 !important;
		transform: scale(1.1) !important;
	}

	/* 구단 카드 스와이프 힌트 */
	.team-swipe-hint {
		display: block !important;
		text-align: center !important;
		margin-top: 8px !important;
		font-size: 11px !important;
		color: var(--text-muted) !important;
		opacity: 0.8 !important;
		animation: fadeInOut 3s ease-in-out !important;
		width: 100% !important;
		order: 3 !important;
	}
}

/* 작은 모바일에서 구단 카드 조정 */
@media (max-width: 480px) {
	.team-slide {
		padding: 0 12px !important;
		width: 100% !important;
		flex: 0 0 100% !important;
		min-width: 100% !important;
	}

	.team-formation-card {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 100% !important;
	}

	.team-cards-indicators {
		gap: 6px !important;
		margin-top: 16px !important;
		padding: 0 16px !important;
	}

	.team-indicator-dot {
		width: 6px !important;
		height: 6px !important;
	}

	.team-swipe-hint {
		font-size: 10px !important;
		margin-top: 6px !important;
	}
}

/* 모바일 구단 상세 정보 최적화 */
@media (max-width: 1024px) {

	/* 구단 상세 헤더 */
	.team-detail-header {
		padding: 16px !important;
		background: var(--bg-secondary) !important;
		border-radius: 12px !important;
		margin-bottom: 16px !important;
	}

	.team-detail-title h3 {
		font-size: 18px !important;
		font-weight: 700 !important;
		color: var(--text-primary) !important;
		margin-bottom: 8px !important;
		line-height: 1.3 !important;
	}

	.team-detail-title p {
		font-size: 14px !important;
		color: var(--text-secondary) !important;
		margin: 0 !important;
		line-height: 1.4 !important;
	}

	/* 구단 통계 섹션 */
	.team-stats-section {
		margin-bottom: 20px !important;
	}

	.team-stats-title {
		font-size: 16px !important;
		font-weight: 600 !important;
		color: var(--text-primary) !important;
		margin-bottom: 12px !important;
		padding: 0 4px !important;
	}

	/* 구단 통계 카드 그리드 - 모바일 최적화 (2x3) */
	.team-stats-cards {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		grid-template-rows: repeat(3, 1fr) !important;
		gap: 10px !important;
		margin-bottom: 20px !important;
	}

	.stat-card {
		background: var(--bg-tertiary) !important;
		border: 1px solid var(--border-color) !important;
		border-radius: 8px !important;
		padding: 12px 8px !important;
		text-align: center !important;
		min-height: 70px !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: center !important;
	}

	.stat-label {
		font-size: 10px !important;
		color: var(--text-secondary) !important;
		font-weight: 600 !important;
		margin-bottom: 6px !important;
		text-transform: uppercase !important;
		letter-spacing: 0.3px !important;
	}

	.stat-value {
		font-size: 16px !important;
		font-weight: 700 !important;
		color: var(--text-primary) !important;
		line-height: 1.2 !important;
	}

	/* 특정 통계 값 강조 */
	.stat-value:contains("%") {
		color: var(--text-accent) !important;
	}

	/* 선수별 성과 섹션 */
	.player-stats-section {
		margin-top: 20px !important;
	}

	.player-stats-section h4 {
		font-size: 16px !important;
		font-weight: 600 !important;
		color: var(--text-primary) !important;
		margin-bottom: 12px !important;
		padding: 0 4px !important;
	}

	/* 선수 통계 테이블 컨테이너 */
	.player-stats-table-container {
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		border-radius: 8px !important;
		border: 1px solid var(--border-color) !important;
		background: var(--bg-secondary) !important;
	}

	/* 선수 통계 테이블 */
	.player-stats-table {
		width: 100% !important;
		min-width: 600px !important;
		border-collapse: collapse !important;
		font-size: 12px !important;
	}

	.player-stats-table th {
		background: var(--bg-tertiary) !important;
		color: var(--text-primary) !important;
		font-weight: 600 !important;
		padding: 12px 8px !important;
		text-align: center !important;
		border-bottom: 1px solid var(--border-color) !important;
		white-space: nowrap !important;
		font-size: 11px !important;
	}

	.player-stats-table td {
		padding: 10px 8px !important;
		text-align: center !important;
		border-bottom: 1px solid var(--border-color) !important;
		color: var(--text-primary) !important;
		font-size: 11px !important;
	}

	.player-stats-table tbody tr:hover {
		background: var(--bg-hover) !important;
	}

	/* 선수 정보 컬럼 */
	.player-info-header {
		text-align: left !important;
		min-width: 80px !important;
	}

	.player-stats-table .player-info {
		text-align: left !important;
		font-weight: 600 !important;
		color: var(--text-primary) !important;
	}

	/* 정렬 아이콘 */
	.sort-icon {
		font-size: 10px !important;
		margin-left: 4px !important;
		opacity: 0.6 !important;
	}

	.sortable:hover .sort-icon {
		opacity: 1 !important;
	}
}

/* 작은 모바일에서 추가 조정 */
@media (max-width: 480px) {
	.team-detail-header {
		padding: 12px !important;
		margin-bottom: 12px !important;
	}

	.team-detail-title h3 {
		font-size: 16px !important;
	}

	.team-detail-title p {
		font-size: 13px !important;
	}

	.team-stats-cards {
		grid-template-columns: 1fr 1fr !important;
		grid-template-rows: repeat(3, 1fr) !important;
		gap: 8px !important;
	}

	.stat-card {
		padding: 10px 6px !important;
		min-height: 65px !important;
	}

	.stat-label {
		font-size: 9px !important;
		margin-bottom: 4px !important;
	}

	.stat-value {
		font-size: 14px !important;
	}

	.player-stats-table {
		min-width: 500px !important;
		font-size: 11px !important;
	}

	.player-stats-table th,
	.player-stats-table td {
		padding: 8px 6px !important;
		font-size: 10px !important;
	}
}

/* 모바일 포메이션 Tab 제목 레이아웃 수정 */
@media (max-width: 1024px) {

	/* 포메이션 성과 섹션 헤더 */
	.formation-performance-section .section-header {
		text-align: center !important;
		margin-bottom: 8px !important;
	}

	.formation-performance-section .section-header h3 {
		font-size: 16px !important;
		font-weight: 700 !important;
		margin: 0 !important;
		line-height: 1.3 !important;
		text-align: center !important;
	}

	/* 포메이션 성과 섹션 설명 */
	.formation-performance-section .section-description {
		text-align: center !important;
		margin-bottom: 16px !important;
	}

	.formation-performance-section .section-subtitle {
		font-size: 12px !important;
		color: var(--text-secondary) !important;
		margin: 0 !important;
		line-height: 1.4 !important;
		display: block !important;
		text-align: center !important;
	}

	/* 포메이션 그룹 섹션 헤더 */
	.formation-groups-section .section-header {
		text-align: center !important;
		margin-bottom: 8px !important;
	}

	.formation-groups-section .section-header h3 {
		font-size: 16px !important;
		font-weight: 700 !important;
		margin: 0 !important;
		line-height: 1.3 !important;
		text-align: center !important;
	}

	/* 포메이션 그룹 섹션 설명 */
	.formation-groups-section .section-description {
		text-align: center !important;
		margin-bottom: 16px !important;
	}

	.formation-groups-section .section-subtitle {
		font-size: 12px !important;
		color: var(--text-secondary) !important;
		margin: 0 !important;
		line-height: 1.4 !important;
		display: block !important;
		text-align: center !important;
	}
}

/* 데스크탑 버전 최적화 - 제목과 부제목을 박스 안에서 가운데 정렬 */
@media (min-width: 1025px) {

	/* 포메이션 성과 섹션 - 박스 스타일 적용 */
	.formation-performance-section {
		background: var(--bg-card) !important;
		border: 1px solid var(--border-color) !important;
		border-radius: var(--radius-lg) !important;
		box-shadow: var(--shadow-sm) !important;
		padding: 20px 60px !important;
		margin-bottom: 32px !important;
	}

	.formation-performance-section .section-header {
		text-align: center;
		margin-bottom: 12px;
	}

	.formation-performance-section .section-description {
		text-align: center;
		margin-bottom: 0;
	}

	.formation-performance-section .section-subtitle {
		font-size: 14px;
		color: var(--text-secondary);
		margin: 0;
		line-height: 1.4;
	}

	/* 포메이션 그룹 섹션 - 박스 스타일 적용 */
	.formation-groups-section {
		background: var(--bg-card) !important;
		border: 1px solid var(--border-color) !important;
		border-radius: var(--radius-lg) !important;
		box-shadow: var(--shadow-sm) !important;
		padding: 20px 60px !important;
		margin-bottom: 32px !important;
	}

	.formation-groups-section .section-header {
		text-align: center;
		margin-bottom: 12px;
	}

	.formation-groups-section .section-description {
		text-align: center;
		margin-bottom: 0;
	}

	.formation-groups-section .section-subtitle {
		font-size: 14px;
		color: var(--text-secondary);
		margin: 0;
		line-height: 1.4;
	}
}


/* 모바일 포메이션 슬라이더 - 구단 Tab과 동일한 기능 */
@media (max-width: 1024px) {

	/* 포메이션 성과 슬라이더 컨테이너 */
	.formation-performance-slider-container {
		position: relative !important;
		padding: 16px !important;
		display: flex !important;
		flex-direction: column !important;
	}

	/* 포메이션 성과 슬라이더 */
	.formation-performance-slider {
		overflow: hidden !important;
		position: relative !important;
		order: 1 !important;
		width: 100% !important;
	}

	/* 좌우 버튼 숨기기 */
	.formation-slider-btn {
		display: none !important;
	}

	/* 포메이션 성과 트랙 - 가로 스크롤 */
	.formation-performance-track {
		display: flex !important;
		flex-direction: row !important;
		gap: 0 !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		-webkit-overflow-scrolling: touch !important;
		scroll-behavior: smooth !important;
		scrollbar-width: none !important;
		-ms-overflow-style: none !important;
		width: 100% !important;
	}

	/* Webkit 브라우저에서 스크롤바 숨기기 */
	.formation-performance-track::-webkit-scrollbar {
		display: none !important;
	}

	/* 포메이션 성과 슬라이드 - 한번에 하나씩만 표시 */
	.formation-performance-slide {
		display: flex !important;
		flex-direction: row !important;
		justify-content: center !important;
		align-items: center !important;
		width: 100% !important;
		padding: 0 8px !important;
		flex: 0 0 100% !important;
		min-width: 100% !important;
		box-sizing: border-box !important;
	}

	/* 포메이션 성과 카드 - 모바일 화면에 맞게 조정 */
	.formation-performance-card {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 100% !important;
		margin: 0 !important;
		padding: 20px !important;
		min-height: 200px !important;
		box-sizing: border-box !important;
	}

	/* 포메이션 성과 통계 - 모바일에 맞게 조정 */
	.formation-performance-stats {
		display: grid !important;
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 12px !important;
		margin-top: 16px !important;
	}

	.formation-stat-item {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
		padding: 12px 8px !important;
		background: var(--bg-card) !important;
		border-radius: var(--radius-md) !important;
		border: 1px solid var(--border-color) !important;
		transition: all var(--transition-fast) !important;
	}

	.formation-stat-label {
		font-size: 11px !important;
		color: var(--text-secondary) !important;
		font-weight: 600 !important;
		text-transform: uppercase !important;
		letter-spacing: 0.5px !important;
		margin-bottom: 4px !important;
	}

	.formation-stat-value {
		font-size: 18px !important;
		font-weight: 700 !important;
		color: var(--text-primary) !important;
	}

	.formation-stat-value.good {
		color: var(--text-success) !important;
	}

	.formation-stat-value.bad {
		color: var(--text-error) !important;
	}

	/* 포메이션 인디케이터 컨테이너 */
	.formation-performance-indicators {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 8px !important;
		margin-top: 20px !important;
		padding: 0 20px !important;
		width: 100% !important;
		order: 2 !important;
	}

	/* 포메이션 인디케이터 도트 */
	.formation-indicator-dot {
		width: 8px !important;
		height: 8px !important;
		border-radius: 50% !important;
		background: var(--border-color) !important;
		transition: all 0.3s ease !important;
		cursor: pointer !important;
		opacity: 0.6 !important;
	}

	.formation-indicator-dot.active {
		background: var(--bg-accent) !important;
		transform: scale(1.3) !important;
		opacity: 1 !important;
	}

	.formation-indicator-dot:hover {
		opacity: 0.8 !important;
		transform: scale(1.1) !important;
	}

	/* 포메이션 스와이프 힌트 */
	.formation-swipe-hint {
		display: block !important;
		text-align: center !important;
		margin-top: 8px !important;
		font-size: 11px !important;
		color: var(--text-muted) !important;
		opacity: 0.8 !important;
		animation: fadeInOut 3s ease-in-out !important;
		width: 100% !important;
		order: 3 !important;
	}
}

/* 작은 모바일에서 포메이션 카드 조정 */
@media (max-width: 480px) {
	.formation-performance-card {
		padding: 16px !important;
		min-height: 180px !important;
	}

	.formation-performance-stats {
		gap: 8px !important;
		margin-top: 12px !important;
	}

	.formation-stat-item {
		padding: 10px 6px !important;
	}

	.formation-stat-label {
		font-size: 10px !important;
		margin-bottom: 3px !important;
	}

	.formation-stat-value {
		font-size: 16px !important;
	}

	.formation-performance-indicators {
		gap: 6px !important;
		margin-top: 16px !important;
		padding: 0 16px !important;
	}

	.formation-indicator-dot {
		width: 6px !important;
		height: 6px !important;
	}

	.formation-swipe-hint {
		font-size: 10px !important;
		margin-top: 6px !important;
	}
}

/* 모바일 formation-matchup-header 개선 - 3열 구조 */
@media (max-width: 1024px) {
	.formation-matchup-header {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 8px !important;
		padding: 16px !important;
		text-align: center !important;
	}

	.my-formation-section {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		gap: 4px !important;
		text-align: center !important;
		flex: 1 !important;
	}

	.opponent-formation-section {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		gap: 4px !important;
		text-align: center !important;
		flex: 1 !important;
	}

	.vs-divider {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		flex: 0 0 auto !important;
		min-width: 60px !important;
	}

	.formation-label {
		font-size: 12px !important;
		font-weight: 600 !important;
		color: var(--text-secondary) !important;
		margin: 0 !important;
		text-transform: uppercase !important;
		letter-spacing: 0.5px !important;
	}

	.my-formation-section h3,
	.opponent-formation-section h3 {
		font-size: 18px !important;
		font-weight: 700 !important;
		margin: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 4px !important;
	}

	.my-formation-section h3 {
		color: #4FC3F7 !important;
	}

	.opponent-formation-section h3 {
		color: #FF6B6B !important;
	}

	.vs-text {
		font-size: 20px !important;
		font-weight: 700 !important;
		color: #FFA726 !important;
		text-shadow: 0 0 8px rgba(255, 167, 38, 0.5) !important;
		margin: 0 !important;
	}

	/* 경기수 스타일 */
	.formation-match-count {
		font-size: 11px !important;
		color: var(--text-secondary) !important;
		background: var(--bg-secondary) !important;
		padding: 4px 8px !important;
		border-radius: 6px !important;
		margin: 0 !important;
		display: inline-block !important;
		text-align: center !important;
		line-height: 1.2 !important;
	}
}

/* 모바일 상대방 포메이션 슬라이더 - 구단 Tab과 동일한 기능 */
@media (max-width: 1024px) {

	/* 상대방 포메이션 슬라이더 컨테이너 */
	.opponent-formation-slider-container {
		position: relative !important;
		padding: 16px !important;
		display: flex !important;
		flex-direction: column !important;
	}

	/* 상대방 포메이션 슬라이더 */
	.opponent-formation-slider {
		overflow: hidden !important;
		position: relative !important;
		order: 1 !important;
		width: 100% !important;
	}

	/* 좌우 버튼 숨기기 */
	.opponent-slider-btn {
		display: none !important;
	}

	/* 상대방 포메이션 트랙 - 가로 스크롤 */
	.opponent-formation-track {
		display: flex !important;
		flex-direction: row !important;
		gap: 0 !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		-webkit-overflow-scrolling: touch !important;
		scroll-behavior: smooth !important;
		scrollbar-width: none !important;
		-ms-overflow-style: none !important;
		width: 100% !important;
	}

	/* Webkit 브라우저에서 스크롤바 숨기기 */
	.opponent-formation-track::-webkit-scrollbar {
		display: none !important;
	}

	/* 상대방 포메이션 박스 - 한번에 하나씩만 표시 */
	.opponent-formation-box {
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: center !important;
		width: 100% !important;
		padding: 0 8px !important;
		flex: 0 0 100% !important;
		min-width: 100% !important;
		box-sizing: border-box !important;
		background: var(--bg-tertiary) !important;
		border: 1px solid var(--border-color) !important;
		border-radius: var(--radius-lg) !important;
		padding: 16px !important;
		margin: 0 !important;
		cursor: pointer !important;
		transition: all var(--transition-normal) !important;
		min-height: 80px !important;
	}

	.opponent-formation-box:hover {
		transform: translateY(-2px) !important;
		box-shadow: var(--shadow-md) !important;
		border-color: var(--border-accent) !important;
	}

	.opponent-formation-box.active {
		border: 2px solid var(--bg-accent) !important;
		background: linear-gradient(135deg, var(--bg-accent-light), var(--bg-card)) !important;
		box-shadow: 0 4px 15px rgba(0, 212, 170, 0.2) !important;
	}

	.opponent-formation-name {
		font-size: 18px !important;
		font-weight: 700 !important;
		color: var(--text-primary) !important;
		margin-bottom: 8px !important;
		text-align: center !important;
	}

	.opponent-formation-count {
		font-size: 12px !important;
		color: var(--text-secondary) !important;
		background: var(--bg-secondary) !important;
		padding: 4px 8px !important;
		border-radius: 4px !important;
		text-align: center !important;
	}

	/* 상대방 포메이션 인디케이터 컨테이너 */
	.opponent-formation-indicators {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 8px !important;
		margin-top: 20px !important;
		padding: 0 20px !important;
		width: 100% !important;
		order: 2 !important;
	}

	/* 상대방 포메이션 인디케이터 도트 */
	.opponent-indicator-dot {
		width: 8px !important;
		height: 8px !important;
		border-radius: 50% !important;
		background: var(--border-color) !important;
		transition: all 0.3s ease !important;
		cursor: pointer !important;
		opacity: 0.6 !important;
	}

	.opponent-indicator-dot.active {
		background: var(--bg-accent) !important;
		transform: scale(1.3) !important;
		opacity: 1 !important;
	}

	.opponent-indicator-dot:hover {
		opacity: 0.8 !important;
		transform: scale(1.1) !important;
	}

	/* 상대방 포메이션 스와이프 힌트 */
	.opponent-swipe-hint {
		display: block !important;
		text-align: center !important;
		margin-top: 8px !important;
		font-size: 11px !important;
		color: var(--text-muted) !important;
		opacity: 0.8 !important;
		animation: fadeInOut 3s ease-in-out !important;
		width: 100% !important;
		order: 3 !important;
	}
}

/* 작은 모바일에서 상대방 포메이션 박스 조정 */
@media (max-width: 480px) {
	.opponent-formation-box {
		padding: 12px !important;
		min-height: 70px !important;
	}

	.opponent-formation-name {
		font-size: 16px !important;
		margin-bottom: 6px !important;
	}

	.opponent-formation-count {
		font-size: 11px !important;
		padding: 3px 6px !important;
	}

	.opponent-formation-indicators {
		gap: 6px !important;
		margin-top: 16px !important;
		padding: 0 16px !important;
	}

	.opponent-indicator-dot {
		width: 6px !important;
		height: 6px !important;
	}

	.opponent-swipe-hint {
		font-size: 10px !important;
		margin-top: 6px !important;
	}
}

/* 모바일 경기 피드백 quick-summary 조정 */
@media (max-width: 1024px) {
	.formation-quick-summary {
		flex-direction: column !important;
		gap: 12px !important;
		padding: 16px !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
	}

	/* summary-grade와 summary-trend를 나란히 배치 */
	.quick-summary-item.summary-grade,
	.quick-summary-item.summary-trend {
		display: flex !important;
		align-items: center !important;
		gap: 6px !important;
		width: 100% !important;
	}

	/* grade와 trend를 한 줄에 배치 */
	.quick-summary-grade-trend {
		display: flex !important;
		flex-direction: row !important;
		justify-content: space-between !important;
		align-items: center !important;
		width: 100% !important;
		gap: 16px !important;
	}

	.quick-summary-divider {
		display: none !important;
	}

	.quick-summary-item.summary-stats,
	.quick-summary-item.summary-action {
		width: 100% !important;
	}
}

/* 요즘 나의 경기는? 모바일 스타일 */
@media (max-width: 1024px) {
	.fun-data-section {
		padding: 12px 16px;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	.fun-data-btn {
		padding: 12px 16px;
		min-height: 48px;
		width: 100% !important;
		max-width: 100% !important;
		/* 모바일에서 텍스트 가로 정렬 */
		flex-direction: row !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 8px !important;
		/* 모바일에서 그라데이션 오버레이 문제 해결 */
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
		position: relative !important;
		z-index: 1 !important;
		overflow: visible !important;
		box-sizing: border-box !important;
		font-weight: 600 !important;
	}

	/* 모바일에서 가상 요소 제거 */
	.fun-data-btn::before,
	.fun-data-btn::after {
		display: none !important;
	}

	.fun-data-btn .btn-icon,
	.fun-data-btn .btn-text {
		display: inline-block !important;
		white-space: nowrap !important;
		position: relative !important;
		z-index: 2 !important;
		color: white !important;
		flex-shrink: 0 !important;
	}

	.btn-icon {
		font-size: 16px !important;
	}

	.btn-text {
		font-size: 14px !important;
	}


	/* 요즘 나의 경기는? 팝업 모바일 최적화 */
	.fun-data-popup-overlay {
		background: rgba(0, 0, 0, 0.8);
	}

	.fun-data-popup {
		max-width: 95vw;
		max-height: 90vh;
		margin: 20px;
	}

	.fun-data-popup .popup-header {
		padding: 16px 20px;
	}

	.fun-data-popup .popup-header h3 {
		font-size: 16px;
	}

	.fun-data-popup .popup-close {
		width: 28px;
		height: 28px;
		font-size: 20px;
	}

	/* 슬라이더 모바일 최적화 */
	.slider-container {
		padding: 16px;
		min-height: 350px;
	}

	.card-slider {
		max-width: 100%;
	}

	.fun-data-card {
		padding: 0;
		border-radius: 12px;
	}

	.fun-data-card .card-header {
		padding: 16px 20px;
		border-radius: 10px 10px 0 0;
	}

	.fun-data-card .card-header-content {
		gap: 12px;
	}

	.fun-data-card .card-emoji {
		font-size: 28px;
	}

	.fun-data-card .card-title {
		font-size: 18px;
	}

	.fun-data-card .card-content {
		padding: 20px;
	}

	.fun-data-card .card-description {
		font-size: 15px;
		padding: 14px;
		margin-bottom: 16px;
	}

	.fun-data-card .stat-item {
		padding: 14px 16px;
	}

	.fun-data-card .stat-label {
		font-size: 13px;
	}



	/* 모바일 로딩 스타일 - 박스 없이 */
	.loading {
		margin: 15px 20px;
		padding: 0;
		font-size: 13px;
	}

	.nav-btn {
		width: 40px;
		height: 40px;
		font-size: 20px;
	}

	.prev-btn {
		left: 10px;
	}

	.next-btn {
		right: 10px;
	}

	.slider-indicators {
		padding: 12px 16px;
		gap: 6px;
	}

	.indicator {
		width: 6px;
		height: 6px;
	}

	.card-header {
		gap: 10px;
		margin-bottom: 10px;
	}

	.card-emoji {
		font-size: 20px;
	}

	.card-title {
		font-size: 15px;
	}

	.card-description {
		font-size: 13px;
		margin-bottom: 12px;
	}

	.stat-item {
		padding: 6px 10px;
	}

	.stat-label {
		font-size: 11px;
	}

	.stat-value {
		font-size: 13px;
	}

	.popup-footer {
		padding: 12px 20px;
	}

	.refresh-cards-btn {
		padding: 12px 24px;
		font-size: 15px;
		min-height: 44px;
	}

	.no-cards {
		padding: 30px 16px;
		font-size: 15px;
	}
}

/* 핵심 기능 섹션 모바일 개선 (데스크탑 레이아웃 변경 없음) */
@media (max-width: 1024px) {

	/* feature-list 컨테이너 */
	.feature-list {
		gap: var(--m-gap-md);
		margin-bottom: 1.5rem;
	}

	/* feature-item 카드 개선 */
	.feature-item {
		min-height: 56px;
		/* 최소 터치 타겟 크기 */
		border-radius: 12px;
	}

	/* feature-header 개선 */
	.feature-item .feature-header {
		padding: 14px 16px;
		/* 충분한 패딩 */
		min-height: 56px;
		/* 터치 타겟 크기 확보 */
		gap: 12px;
		align-items: center;
	}

	/* 아이콘 크기 조정 */
	.feature-item .feature-icon {
		font-size: 1.3rem;
		flex-shrink: 0;
		width: 32px;
		text-align: center;
	}

	/* 제목 스타일 개선 */
	.feature-item .feature-title {
		font-size: 15px;
		font-weight: 600;
		line-height: 1.4;
		flex: 1;
		min-width: 0;
		/* 텍스트 잘림 방지 */
		word-break: keep-all;
		/* 한글 단어 단위 줄바꿈 */
		overflow-wrap: break-word;
		/* 긴 단어 줄바꿈 */
	}

	/* 토글 아이콘 크기 조정 */
	.feature-item .feature-toggle-icon {
		font-size: 10px;
		flex-shrink: 0;
		width: 20px;
		text-align: center;
	}

	/* 콘텐츠 영역 초기 상태 (접혀있을 때) */
	.feature-item .feature-content {
		max-height: 0 !important;
		overflow: hidden !important;
		padding: 0 16px !important;
		transition: max-height var(--transition-normal), padding var(--transition-normal);
	}

	/* 확장된 콘텐츠 영역 개선 */
	.feature-item.expanded .feature-content {
		max-height: 1000px !important;
		padding: 16px !important;
	}

	/* 콘텐츠 텍스트 개선 */
	.feature-item .feature-content p {
		font-size: 14px;
		line-height: 1.7;
		text-align: left;
		word-break: keep-all;
		/* 한글 단어 단위 줄바꿈 */
		overflow-wrap: break-word;
		/* 긴 단어 줄바꿈 */
		margin: 0;
	}

	/* strong 태그 스타일 */
	.feature-item .feature-content strong {
		font-weight: 600;
		color: var(--text-primary);
	}

	/* hover 효과 제거 (모바일에서는 불필요) */
	.feature-item:hover {
		border-color: var(--border-color);
		box-shadow: none;
	}

	.feature-item:hover .feature-header {
		background: transparent;
	}

	/* 확장된 상태에서만 배경색 변경 */
	.feature-item.expanded .feature-header {
		background: var(--bg-tertiary);
	}
}

/* 작은 화면 (480px 이하) 추가 최적화 */
@media (max-width: 480px) {
	.feature-item .feature-header {
		padding: 12px;
		min-height: 52px;
		gap: 10px;
	}

	.feature-item .feature-icon {
		font-size: 1.2rem;
		width: 28px;
	}

	.feature-item .feature-title {
		font-size: 14px;
	}

	.feature-item .feature-content {
		padding: 0 14px !important;
	}

	.feature-item.expanded .feature-content {
		padding: 14px !important;
	}

	.feature-item .feature-content p {
		font-size: 13px;
		line-height: 1.6;
	}
}

/* 패치노트 섹션 모바일 개선 (데스크탑 레이아웃 변경 없음) */
@media (max-width: 1024px) {

	/* notice-list 컨테이너 */
	.notice-list {
		gap: var(--m-gap-md);
	}

	/* notice-item 카드 개선 */
	.notice-item {
		min-height: 56px;
		/* 최소 터치 타겟 크기 */
		border-radius: 12px;
	}

	/* notice-header 개선 */
	.notice-item .notice-header {
		padding: 14px 16px;
		/* 충분한 패딩 */
		min-height: 56px;
		/* 터치 타겟 크기 확보 */
		gap: 12px;
		align-items: center;
	}

	/* 콘텐츠 영역 초기 상태 (접혀있을 때) */
	.notice-item .notice-content {
		max-height: 0 !important;
		overflow: hidden !important;
		padding: 0 16px !important;
		transition: max-height var(--transition-normal), padding var(--transition-normal);
	}

	/* 확장된 콘텐츠 영역 개선 */
	.notice-item.expanded .notice-content {
		max-height: 500px !important;
		padding: 16px !important;
	}

	/* 콘텐츠 텍스트 개선 */
	.notice-item .notice-content p {
		font-size: 14px;
		line-height: 1.7;
		text-align: left;
		word-break: keep-all;
		/* 한글 단어 단위 줄바꿈 */
		overflow-wrap: break-word;
		/* 긴 단어 줄바꿈 */
		margin: 0;
	}

	/* hover 효과 제거 (모바일에서는 불필요) */
	.notice-item:hover {
		border-color: var(--border-color);
		box-shadow: none;
	}

	.notice-item:hover .notice-header {
		background: transparent;
	}

	/* 확장된 상태에서만 배경색 변경 */
	.notice-item.expanded .notice-header {
		background: var(--bg-tertiary);
	}
}

/* 작은 화면 (480px 이하) 패치노트 추가 최적화 */
@media (max-width: 480px) {
	.notice-item .notice-header {
		padding: 12px;
		min-height: 52px;
		gap: 10px;
	}

	.notice-item .notice-content {
		padding: 0 14px !important;
	}

	.notice-item.expanded .notice-content {
		padding: 14px !important;
	}

	.notice-item .notice-content p {
		font-size: 13px;
		line-height: 1.6;
	}
}

/* 쿠팡 파트너스 배너 모바일 최적화 */
@media (max-width: 1024px) {
	.coupang-banner-container {
		margin: 1rem auto;
		padding: 0 0.75rem;
	}

	.coupang-banner {
		width: 100%;
		max-width: 100%;
		padding: 0.5rem;
		min-height: auto;
		overflow: hidden;
		border-radius: var(--radius-sm);
	}

	/* 쿠팡 배너 내부 요소 반응형 처리 */
	.coupang-banner iframe,
	.coupang-banner div,
	.coupang-banner script+div {
		max-width: 100% !important;
		width: 100% !important;
		overflow-x: auto;
	}

	.coupang-disclosure {
		font-size: 0.65rem;
		padding: 0 0.5rem;
		margin-top: 0.5rem;
		line-height: 1.5;
	}
}

@media (max-width: 480px) {
	.coupang-banner-container {
		margin: 0.75rem auto;
		padding: 0 0.5rem;
	}

	.coupang-banner {
		padding: 0.25rem;
	}

	.coupang-disclosure {
		font-size: 0.6rem;
		padding: 0 0.25rem;
	}
}