/**
 * 토티움 chrome — GNB / 우측 사이드바
 * /prediction 다크 톤 + Toss UX. 메인 액센트에서 녹색 제거 → Toss Blue.
 */
:root {
	--ap-bg: #18181b;
	--ap-bg-elevated: #1f1f23;
	--ap-border: #3f3f46;
	--ap-border-soft: #27272a;
	--ap-text: #e2e8f0;
	--ap-text-strong: #f8fafc;
	--ap-text-muted: #94a3b8;
	--ap-blue: #3182f6;      /* Toss Blue */
	--ap-blue-soft: #1b3a6b;
	--ap-blue-text: #90c2ff;
	--ap-radius-card: 16px;
	--ap-radius-ctl: 12px;
	--ap-ease: cubic-bezier(0.22, 1, 0.36, 1);

	/* 테마 녹색(#4cd140/#5de150) 무력화 */
	--color-primary: #3182f6 !important;
	--color-primary-dark: #60a5fa !important;
	--color-input-focus: #3182f6 !important;
	--color-input-caret: #3182f6 !important;
	--color-custom-1: #3182f6 !important;
	--color-button: #3182f6 !important;
	--button-text-color: #ffffff !important;
}

/* 구 녹색 하드코딩 → 중립 톤 (블루 과다 방지) */
.text-color-1,
.bg-color-1.text-color-1,
.green {
	color: var(--ap-text-strong) !important;
}

.bg-color-1 {
	background-color: var(--ap-border) !important;
}

/* Tailwind text-green-* / 전역 a:hover — 링크는 중립, 액센트만 블루 */
.text-green-400,
.text-green-500,
.text-green-600,
.hover\:text-green-400:hover,
.hover\:text-green-500:hover,
a:active,
a:hover {
	color: var(--ap-text-strong) !important;
}

.ap-more-link {
	color: var(--ap-blue) !important;
	text-decoration: none;
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* 승률Rank % 등 — 중립 하이라이트 */
.per {
	color: var(--ap-text) !important;
	font-weight: 700;
}

.ap-more-link:hover {
	color: #60a5fa !important;
	text-decoration: underline;
}

/* GNB 드롭다운이 본문/메인배너에 가리지 않도록
   - static이면 z-index가 무시되어 히어로(isolation)가 드롭다운 위로 올라옴 */
#vivid-header,
#vivid-fixed-header {
	position: relative !important;
	z-index: 1000 !important;
	overflow: visible !important;
}

#vivid-fixed-header {
	/* 스크롤 고정 헤더는 fixed 유지 */
	position: fixed !important;
}

#app {
	position: relative;
	z-index: 0;
}

#vivid-header > .w-full.mx-auto,
#vivid-fixed-header > .w-full.mx-auto,
#vivid-header nav,
#vivid-fixed-header nav,
#vivid-header .hs-dropdown,
#vivid-fixed-header .hs-dropdown {
	overflow: visible !important;
}

#vivid-header .hs-dropdown,
#vivid-fixed-header .hs-dropdown {
	position: relative;
	z-index: 1001;
}

#vivid-header .hs-dropdown-menu,
#vivid-fixed-header .hs-dropdown-menu {
	z-index: 1002 !important;
	position: absolute !important;
	left: 0;
	top: calc(100% + 4px);
	min-width: 12.5rem;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	/* Preline translate가 남아 있어도 배너 아래로 깔리지 않게 */
	transform: none !important;
}

/* Preline open / 클릭 open 모두 보이게 */
#vivid-header .hs-dropdown.hs-dropdown-open > .hs-dropdown-menu,
#vivid-fixed-header .hs-dropdown.hs-dropdown-open > .hs-dropdown-menu,
#vivid-header .hs-dropdown-menu.open,
#vivid-fixed-header .hs-dropdown-menu.open,
#vivid-header .hs-dropdown:hover > .hs-dropdown-menu,
#vivid-fixed-header .hs-dropdown:hover > .hs-dropdown-menu {
	opacity: 1 !important;
	visibility: visible !important;
	display: block !important;
	pointer-events: auto !important;
}

/* 우측 sticky가 GNB 드롭다운 위로 올라오지 않게 */
#app .sticky {
	z-index: 1 !important;
}

/* 메인 퀵 카드 hover는 배경만, 글자는 녹색으로 튀지 않게 */
section[data-section-id="00"] a:hover,
section[data-section-id="00"] a:active,
section[data-section-id="00"] a:hover strong,
section[data-section-id="00"] a:active strong {
	color: #f8fafc !important;
}

/* ---------- GNB (모든 뷰포트: 녹색 제거 우선) ---------- */
#vivid-header,
#vivid-fixed-header {
	--color-primary: #3182f6;
	--color-primary-dark: #60a5fa;
	--color-custom-1: #3182f6;
	--color-button: #3182f6;
}

#vivid-header .v-menu,
#vivid-fixed-header .v-menu {
	color: var(--ap-text-muted) !important;
}

/* men_custom 아이콘: 옛 녹색(text-color-1) 제거 → 중립/블루 */
#vivid-header .v-menu .text-color-1,
#vivid-fixed-header .v-menu .text-color-1,
#vivid-header .v-menu i.bi,
#vivid-fixed-header .v-menu i.bi,
#vivid-header .hs-dropdown-menu .text-color-1,
#vivid-fixed-header .hs-dropdown-menu .text-color-1 {
	color: var(--ap-text-muted) !important;
}

#vivid-header .v-menu:hover,
#vivid-fixed-header .v-menu:hover {
	color: var(--ap-text-strong) !important;
	background: var(--ap-border-soft) !important;
}

#vivid-header .v-menu:hover .text-color-1,
#vivid-fixed-header .v-menu:hover .text-color-1,
#vivid-header .v-menu:hover i.bi,
#vivid-fixed-header .v-menu:hover i.bi {
	color: var(--ap-text-strong) !important;
}

#vivid-header .v-menu-active,
#vivid-fixed-header .v-menu-active,
#vivid-header .v-menu.v-menu-active,
#vivid-fixed-header .v-menu.v-menu-active {
	color: var(--ap-text-strong) !important;
	background: var(--ap-border-soft) !important;
	border-color: var(--ap-border) !important;
	box-shadow: inset 0 -2px 0 var(--ap-blue);
}

#vivid-header .v-menu-active .text-color-1,
#vivid-fixed-header .v-menu-active .text-color-1,
#vivid-header .v-menu-active i.bi,
#vivid-fixed-header .v-menu-active i.bi,
#vivid-header .v-menu.v-menu-active .text-color-1,
#vivid-fixed-header .v-menu.v-menu-active .text-color-1,
#vivid-header .v-menu.v-menu-active i.bi,
#vivid-fixed-header .v-menu.v-menu-active i.bi {
	color: var(--ap-text-strong) !important;
}

#vivid-header .v-btn-login,
#vivid-fixed-header .v-btn-login,
#vivid-header [class*="v-btn"],
#vivid-fixed-header [class*="v-btn"] {
	--color-button: #3182f6;
}

#vivid-header .text-\[var\(--color-primary\)\],
#vivid-header .dark\:text-\[var\(--color-primary-dark\)\],
#vivid-fixed-header .text-\[var\(--color-primary\)\],
#vivid-fixed-header .dark\:text-\[var\(--color-primary-dark\)\] {
	color: var(--ap-blue) !important;
}

#vivid-header .green,
#vivid-fixed-header .green,
#vivid-header .text-color-1,
#vivid-fixed-header .text-color-1 {
	color: var(--ap-text-muted) !important;
}

@media (min-width: 768px) {
	body.color_scheme_dark #app {
		color: var(--ap-text);
	}

	/* ---------- GNB PC ---------- */
	#vivid-header,
	#vivid-fixed-header {
		background: rgba(24, 24, 27, 0.92) !important;
		background-color: rgba(24, 24, 27, 0.92) !important;
		border-bottom: 1px solid var(--ap-border) !important;
		backdrop-filter: blur(12px) !important;
		-webkit-backdrop-filter: blur(12px) !important;
		opacity: 1 !important;
	}

	#vivid-fixed-header {
		box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
	}

	#vivid-header .logo,
	#vivid-fixed-header .logo {
		color: var(--ap-text-strong) !important;
		letter-spacing: -0.03em;
		font-weight: 800 !important;
	}


	#vivid-header nav.md\:inline-flex,
	#vivid-fixed-header nav {
		gap: 0.25rem !important;
	}

	#vivid-header .v-menu,
	#vivid-fixed-header .v-menu {
		font-weight: 600 !important;
		font-size: 14px !important;
		padding: 8px 12px !important;
		border-radius: var(--ap-radius-ctl) !important;
		border: 1px solid transparent !important;
		background: transparent !important;
		line-height: 1.25 !important;
		text-decoration: none !important;
		letter-spacing: -0.02em;
		transition: background .18s var(--ap-ease), border-color .18s var(--ap-ease), color .18s var(--ap-ease) !important;
	}

	#vivid-header .v-menu:hover,
	#vivid-fixed-header .v-menu:hover {
		color: var(--ap-text-strong) !important;
		background: var(--ap-border-soft) !important;
		border-color: transparent !important;
	}

	#vivid-header .v-menu-active,
	#vivid-fixed-header .v-menu-active,
	#vivid-header .v-menu.v-menu-active,
	#vivid-fixed-header .v-menu.v-menu-active {
		color: var(--ap-text-strong) !important;
		background: var(--ap-border-soft) !important;
		border-color: var(--ap-border) !important;
		font-weight: 700 !important;
		box-shadow: inset 0 -2px 0 var(--ap-blue);
	}

	/* Logo = home (keeps brand weight above .v-menu rules) */
	#vivid-header a.logo.v-menu,
	#vivid-fixed-header a.logo.v-menu,
	#vivid-header a.logo.v-menu.v-menu-active,
	#vivid-fixed-header a.logo.v-menu.v-menu-active {
		font-size: 15px !important;
		font-weight: 800 !important;
		line-height: 1.2 !important;
		padding: 8px 12px !important;
		margin-right: 0.25rem;
		white-space: nowrap;
		display: inline-flex !important;
		align-items: center;
		text-decoration: none !important;
		color: var(--ap-text-strong) !important;
		background: var(--ap-border-soft) !important;
		border: 1px solid var(--ap-border) !important;
		border-radius: var(--ap-radius-ctl) !important;
		box-shadow: inset 0 -2px 0 var(--ap-blue);
	}

	#vivid-header a.logo.v-menu:hover,
	#vivid-fixed-header a.logo.v-menu:hover {
		color: var(--ap-text-strong) !important;
		background: #3f3f46 !important;
	}

	#vivid-header .hs-dropdown-menu,
	#vivid-fixed-header .hs-dropdown-menu {
		background: var(--ap-bg) !important;
		border: 1px solid var(--ap-border) !important;
		border-radius: var(--ap-radius-card) !important;
		box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4) !important;
		backdrop-filter: blur(8px) !important;
		padding: 8px !important;
	}

	#vivid-header .hs-dropdown-menu .v-menu,
	#vivid-fixed-header .hs-dropdown-menu .v-menu {
		display: block !important;
		width: 100%;
		background: transparent !important;
		border-color: transparent !important;
		border-radius: 10px !important;
		color: var(--ap-text) !important;
		font-weight: 500 !important;
	}

	#vivid-header .hs-dropdown-menu .v-menu:hover,
	#vivid-fixed-header .hs-dropdown-menu .v-menu:hover {
		background: var(--ap-border-soft) !important;
		color: var(--ap-text-strong) !important;
	}

	#vivid-header .hs-dropdown-menu .v-menu span,
	#vivid-fixed-header .hs-dropdown-menu .v-menu span {
		color: inherit !important;
	}

	#vivid-header .text-slate-400,
	#vivid-fixed-header .text-slate-400 {
		color: var(--ap-text-muted) !important;
	}

	#vivid-header .v-btn-login,
	#vivid-fixed-header .v-btn-login {
		background: var(--ap-blue) !important;
		color: #fff !important;
		border: none !important;
		border-radius: 999px !important;
		font-weight: 700 !important;
		letter-spacing: -0.02em;
		padding: 8px 16px !important;
		transition: filter .18s var(--ap-ease) !important;
	}

	#vivid-header .v-btn-login:hover,
	#vivid-fixed-header .v-btn-login:hover {
		filter: brightness(1.08);
	}
}

/* ---------- Right sidebar (desktop sticky + mobile top strip) ---------- */
#app .sticky .ap-side-card,
#app .sticky .tab-group,
#app .sticky .grid.gap-5 > .tab-group,
#app .ap-mobile-sidebar .ap-side-card,
#app .ap-mobile-sidebar .tab-group,
#app .ap-stats-drawer-body .ap-side-card,
#app .ap-stats-drawer-body .tab-group {
	background: var(--ap-bg) !important;
	border: 1px solid var(--ap-border) !important;
	border-radius: 14px !important;
	color: var(--ap-text) !important;
	box-shadow: none !important;
	padding: 12px !important;
	gap: 8px !important;
	height: auto !important;
}

#app .sticky .swiper.mySwiper1,
#app .ap-mobile-sidebar .swiper.mySwiper2 {
	overflow: hidden !important;
	width: 100%;
}

#app .sticky .swiper.mySwiper1 .swiper-wrapper {
	height: 262px !important;
}

/* 슬라이드 높이 고정(전환 시 유지) — 카드는 내용 높이 유지, 내부 공백 없음 */
#app .sticky .swiper.mySwiper1 .swiper-wrapper,
#app .ap-mobile-sidebar .swiper.mySwiper2 .swiper-wrapper,
#ap-stats-drawer .swiper.mySwiper2 .swiper-wrapper {
	align-items: flex-start;
}

#app .sticky .swiper.mySwiper1 .swiper-slide,
#app .ap-mobile-sidebar .swiper.mySwiper2 .swiper-slide {
	height: 100% !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	box-sizing: border-box;
	width: 100% !important;
	display: block !important;
	scrollbar-width: none;
}

#app .sticky .swiper.mySwiper1 .swiper-slide::-webkit-scrollbar,
#app .ap-mobile-sidebar .swiper.mySwiper2 .swiper-slide::-webkit-scrollbar {
	display: none;
}

#app .sticky .swiper.mySwiper1 .swiper-slide > .ap-side-card,
#app .sticky .swiper.mySwiper1 .swiper-slide > .tab-group.ap-side-card,
#app .ap-mobile-sidebar .swiper.mySwiper2 .swiper-slide > .ap-side-card,
#app .ap-mobile-sidebar .swiper.mySwiper2 .swiper-slide > .tab-group.ap-side-card {
	height: auto !important;
	min-height: 0;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

#app .sticky .swiper.mySwiper1 .ap-side-card .ap-ai-rate-list,
#app .sticky .swiper.mySwiper1 .ap-side-card > .tab-content.active {
	flex: 0 0 auto;
}

#app .sticky .swiper.mySwiper1 {
	min-height: 0;
}

#app .sticky .swiper.mySwiper1 .swiper-pagination,
#app .ap-mobile-sidebar .swiper.mySwiper2 .swiper-pagination {
	position: relative !important;
	bottom: 0 !important;
	margin-top: 6px;
	min-height: 0;
}

#app .sticky .ap-side-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 2px;
}

#app .ap-mobile-sidebar .ap-side-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 2px;
}

#app .sticky .ap-side-title,
#app .sticky .tab-group > .ap-side-title,
#app .sticky .tab-group > .text-base,
#app .ap-mobile-sidebar .ap-side-title,
#app .ap-mobile-sidebar .tab-group > .ap-side-title {
	font-size: 13px !important;
	line-height: 1.35 !important;
	font-weight: 700 !important;
	color: var(--ap-text-strong) !important;
	letter-spacing: -0.02em;
	margin: 0 !important;
	padding: 0 !important;
}

#app .sticky .ap-side-more,
#app .sticky .ap-side-foot a {
	font-size: 11px !important;
	line-height: 1.2 !important;
	color: var(--ap-text-muted) !important;
	text-decoration: none;
	white-space: nowrap;
}

#app .sticky .ap-side-foot {
	display: flex;
	justify-content: flex-end;
	margin-top: 4px;
}

#app .sticky .ap-side-more:hover,
#app .sticky .ap-side-foot a:hover {
	color: var(--ap-text-strong) !important;
	text-decoration: underline;
}

#app .sticky .ap-ai-rate-list,
#app .sticky .ap-rank-list,
#app .ap-mobile-sidebar .ap-ai-rate-list,
#app .ap-mobile-sidebar .ap-rank-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

#app .sticky .ap-ai-rate-row,
#app .ap-mobile-sidebar .ap-ai-rate-row {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 8px;
	min-height: 34px;
	padding: 6px 0;
	border-bottom: 1px solid var(--ap-border-soft);
	text-decoration: none;
	color: inherit !important;
}

#app .sticky .ap-ai-rate-divider,
#app .ap-mobile-sidebar .ap-ai-rate-divider {
	padding: 8px 0 4px;
	border-bottom: 0;
}

#app .sticky .ap-ai-rate-divider span,
#app .ap-mobile-sidebar .ap-ai-rate-divider span {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ap-text-muted);
}

#app .sticky .ap-ai-rate-row--consensus .ap-ai-name,
#app .ap-mobile-sidebar .ap-ai-rate-row--consensus .ap-ai-name {
	color: #93c5fd !important;
}

#app .sticky .ap-ai-rate--consensus,
#app .ap-mobile-sidebar .ap-ai-rate--consensus {
	color: #6ee7b7 !important;
}

#app .sticky .ap-rank-row,
#ap-stats-drawer .ap-rank-row {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 8px;
	min-height: 32px;
	padding: 5px 0;
	border-bottom: 1px solid var(--ap-border-soft);
}

#app .sticky .ap-rank-row:has(.ap-rank-num):has(.ap-rank-meta),
#ap-stats-drawer .ap-rank-row:has(.ap-rank-num):has(.ap-rank-meta) {
	grid-template-columns: 22px minmax(0, 1fr) auto auto;
}

#app .sticky .ap-rank-row:not(:has(.ap-rank-num)),
#app .ap-mobile-sidebar .ap-rank-row:not(:has(.ap-rank-num)),
#ap-stats-drawer .ap-rank-row:not(:has(.ap-rank-num)) {
	grid-template-columns: minmax(0, 1fr) auto;
}

#app .sticky .ap-ai-rate-list li:last-child .ap-ai-rate-row,
#app .ap-mobile-sidebar .ap-ai-rate-list li:last-child .ap-ai-rate-row,
#app .sticky .ap-rank-list li:last-child .ap-rank-row,
#app .ap-mobile-sidebar .ap-rank-list li:last-child .ap-rank-row,
#ap-stats-drawer .ap-rank-list li:last-child .ap-rank-row {
	border-bottom: 0;
}

#app .sticky .ap-ai-name,
#app .sticky .ap-rank-name,
#app .ap-mobile-sidebar .ap-ai-name,
#app .ap-mobile-sidebar .ap-rank-name {
	font-size: 12px !important;
	line-height: 1.3 !important;
	font-weight: 600 !important;
	color: var(--ap-text) !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

#app .sticky .ap-rank-name-full {
	white-space: nowrap;
}

#app .sticky .ap-rank-name a {
	color: inherit !important;
	text-decoration: none;
}

#app .sticky .ap-ai-meta,
#app .sticky .ap-rank-meta,
#app .ap-mobile-sidebar .ap-ai-meta,
#app .ap-mobile-sidebar .ap-rank-meta {
	font-size: 11px !important;
	line-height: 1.2 !important;
	color: var(--ap-text-muted) !important;
	white-space: nowrap;
}

#app .sticky .ap-ai-rate,
#app .sticky .ap-rank-val,
#app .ap-mobile-sidebar .ap-ai-rate,
#app .ap-mobile-sidebar .ap-rank-val {
	font-size: 13px !important;
	line-height: 1.2 !important;
	font-weight: 700 !important;
	color: var(--ap-text-strong) !important;
	text-align: right;
	white-space: nowrap;
	justify-self: end;
}

#app .sticky .ap-rank-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	border-radius: 4px;
	font-size: 11px !important;
	font-weight: 700 !important;
	color: var(--ap-text-muted) !important;
}

#app .sticky .ap-rank-num.is-top {
	color: #fbbf24 !important;
	background: rgba(251, 191, 36, 0.12);
}

#app .sticky .tab-menu,
#app .ap-mobile-sidebar .tab-menu,
#ap-stats-drawer .tab-menu {
	display: flex !important;
	align-items: stretch;
	gap: 4px;
	justify-content: stretch;
	width: 100%;
	margin: 0 0 8px !important;
	flex-wrap: nowrap;
}

#app .sticky .tab-menu--sport,
#app .ap-mobile-sidebar .tab-menu--sport,
#ap-stats-drawer .tab-menu--sport {
	margin-top: -4px !important;
}

#app .sticky .tab-btn,
#app .ap-mobile-sidebar .tab-btn,
#ap-stats-drawer .tab-btn {
	flex: 1 1 0 !important;
	min-width: 0;
	background: var(--ap-border-soft) !important;
	opacity: 1 !important;
	color: var(--ap-text-muted) !important;
	border: 1px solid var(--ap-border) !important;
	border-radius: 6px !important;
	padding: 6px 4px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-align: center;
	cursor: pointer !important;
	pointer-events: auto !important;
	position: relative;
	z-index: 3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#app .sticky .tab-btn.active,
#app .ap-mobile-sidebar .tab-btn.active,
#ap-stats-drawer .tab-btn.active {
	background: #3f3f46 !important;
	border-color: var(--ap-border) !important;
	color: var(--ap-text-strong) !important;
	box-shadow: inset 0 -2px 0 var(--ap-blue);
}

#app .sticky .tab-content,
#app .ap-mobile-sidebar .tab-content,
#ap-stats-drawer .tab-content {
	display: none !important;
}

#app .sticky .tab-content.active,
#app .ap-mobile-sidebar .tab-content.active,
#ap-stats-drawer .tab-content.active {
	display: block !important;
}

#app .sticky .tab-content,
#app .sticky .tab-content a,
#app .sticky .tab-content li,
#app .sticky .tab-content span {
	color: #cbd5e1;
}

#app .sticky .tab-content .mb-3,
#app .sticky .tab-content .mb-4 {
	margin-bottom: 0 !important;
}

#app .sticky .tab-group .font-bold,
#app .sticky .tab-group .text-base,
#app .sticky .tab-group h3,
#app .sticky .green {
	color: var(--ap-text-strong) !important;
}

.ap-challenge-career {
	margin: 0;
	padding: 12px;
	border: 1px solid var(--ap-border, #3f3f46);
	border-radius: 12px;
	background: var(--ap-bg, #18181b);
	color: var(--ap-text, #e4e4e7);
}

.ap-challenge-career__title {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 700;
}

.ap-challenge-career__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.ap-challenge-career__list li {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 8px;
	font-size: 13px;
	line-height: 1.4;
}

.ap-challenge-career__list strong {
	color: var(--ap-text-muted, #a1a1aa);
	font-weight: 600;
}

#app .ap-rank-prov {
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px dashed var(--ap-border, #3f3f46);
}

#app .ap-rank-prov__title {
	font-size: 11px;
	font-weight: 700;
	color: var(--ap-text-muted, #a1a1aa);
	margin: 0 0 6px;
}

#app .ap-rank-row--prov .ap-rank-meta {
	font-size: 11px !important;
	color: #fbbf24 !important;
}

/* 챌린지 순위 전용 페이지 (사이드바 없는 풀폭 · 챌린지/내역과 동일) */
#app .ap-challenge-rank-page {
	max-width: none;
	width: 100%;
}

#app .ap-challenge-rank-page .ap-home-panel {
	width: 100%;
}

#app .ap-challenge-rank-board .ap-rank-skin {
	margin: 0;
}

#app .ap-challenge-mybox__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 16px;
	margin-top: 4px;
}

@media (min-width: 768px) {
	#app .ap-challenge-mybox__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

#app .ap-challenge-mybox__label {
	display: block;
	font-size: 12px;
	color: var(--ap-text-muted);
	margin-bottom: 4px;
}

#app .ap-challenge-mybox__value {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--ap-text-strong);
	line-height: 1.35;
}

#app .ap-trust-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	background: rgba(161, 161, 170, 0.16);
	color: var(--ap-text-muted);
	vertical-align: middle;
}

#app .ap-rank-delta {
	display: inline-block;
	margin-left: 6px;
	font-size: 11px;
	font-weight: 700;
}

#app .ap-rank-delta.is-up { color: #4ade80; }
#app .ap-rank-delta.is-down { color: #f87171; }
#app .ap-rank-delta.is-same { color: var(--ap-text-muted); }

#app .ap-challenge-rank-page .ap-rank-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
}

#app .ap-challenge-rank-page .ap-rank-tabs a {
	display: inline-flex;
	align-items: center;
	padding: 7px 12px;
	border-radius: 8px;
	border: 1px solid var(--ap-border);
	background: var(--ap-border-soft);
	color: var(--ap-text-muted) !important;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none !important;
}

#app .ap-challenge-rank-page .ap-rank-tabs a.is-active,
#app .ap-challenge-rank-page .ap-rank-tabs a:hover {
	color: var(--ap-text-strong) !important;
	background: #3f3f46;
	border-color: var(--ap-border);
}

#app .ap-challenge-rank-page .aipick-nav a.is-active {
	color: var(--ap-text-strong) !important;
	font-weight: 700;
	text-decoration: underline;
}

#app .ap-rank-period-head {
	margin-bottom: 12px;
}

#app .ap-rank-period-lead {
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--ap-text-muted);
	line-height: 1.45;
}

#app .ap-rank-period-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 12px;
}

#app .ap-rank-period-tabs__btn {
	display: inline-flex;
	align-items: center;
	padding: 7px 12px;
	border-radius: 8px;
	border: 1px solid var(--ap-border);
	background: var(--ap-border-soft);
	color: var(--ap-text-muted);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

#app .ap-rank-period-tabs__btn.is-active,
#app .ap-rank-period-tabs__btn:hover {
	color: var(--ap-text-strong);
	background: #3f3f46;
}

#app .ap-rank-period-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

#app .ap-rank-panel {
	min-width: 0;
}

#app .ap-rank-panel__title {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 800;
	color: var(--ap-text-strong);
	letter-spacing: -0.02em;
}

/* 모바일: 기간 탭으로 1개씩 */
#app .ap-rank-period-grid .ap-rank-panel {
	display: none;
}

#app .ap-rank-period-grid .ap-rank-panel.is-active {
	display: block;
}

@media (min-width: 1100px) {
	#app .ap-rank-period-tabs {
		display: none;
	}

	#app .ap-rank-period-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 14px;
	}

	#app .ap-rank-period-grid .ap-rank-panel,
	#app .ap-rank-period-grid .ap-rank-panel.is-active {
		display: block;
	}

	#app .ap-rank-panel__title {
		font-size: 14px;
		padding-bottom: 8px;
		border-bottom: 1px solid var(--ap-border-soft, rgba(63, 63, 70, 0.7));
	}

	#app .ap-challenge-rank-board .ap-rank-row {
		grid-template-columns: 24px minmax(0, 1fr) auto;
		column-gap: 8px;
		min-height: 36px;
		padding: 6px 2px;
	}

	#app .ap-rank-period-grid .ap-rank-meta {
		display: none;
	}

	#app .ap-challenge-rank-board .ap-rank-name {
		font-size: 13px;
	}

	#app .ap-challenge-rank-board .ap-rank-val {
		font-size: 13px;
	}
}

#app .ap-challenge-rank-board {
	margin-top: 4px;
}

#app .ap-rank-more {
	display: block;
	width: 100%;
	margin-top: 10px;
	padding: 10px 12px;
	border-radius: 8px;
	border: 1px solid var(--ap-border);
	background: var(--ap-border-soft);
	color: var(--ap-text-strong);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

#app .ap-rank-more:hover {
	background: #3f3f46;
}

#app .ap-rank-more:disabled {
	opacity: 0.65;
	cursor: wait;
}

#app .ap-rank-sport-section {
	margin-top: 0;
}

#app .ap-challenge-rank-board .ap-rank-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
}

#app .ap-challenge-rank-board .ap-rank-row {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr) auto auto;
	align-items: center;
	column-gap: 10px;
	min-height: 40px;
	padding: 8px 4px;
	border-bottom: 1px solid var(--ap-border-soft, rgba(63, 63, 70, 0.7));
}

#app .ap-challenge-rank-board .ap-rank-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
	color: var(--ap-text-muted);
}

#app .ap-challenge-rank-board .ap-rank-num.is-top {
	color: #fbbf24;
	background: rgba(251, 191, 36, 0.12);
}

#app .ap-challenge-rank-board .ap-rank-name {
	min-width: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--ap-text-strong);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#app .ap-challenge-rank-board .ap-rank-meta {
	font-size: 12px;
	color: var(--ap-text-muted);
	white-space: nowrap;
}

#app .ap-challenge-rank-board .ap-rank-val {
	font-size: 14px;
	font-weight: 700;
	color: var(--ap-text-strong);
	text-align: right;
	white-space: nowrap;
}

#app .ap-challenge-rank-board .ap-rank-empty {
	margin: 12px 0 4px;
	padding: 20px 12px;
	text-align: center;
	color: var(--ap-text-muted);
	font-size: 14px;
	border: 1px dashed var(--ap-border);
	border-radius: 12px;
}

#app .sticky section.px-3 {
	background: var(--ap-bg) !important;
	border: 1px solid var(--ap-border) !important;
	border-radius: 14px !important;
	color: var(--ap-text) !important;
	padding: 12px !important;
}

#app .sticky .swiper-pagination-bullet {
	background: #52525b !important;
	opacity: 1;
}

#app .sticky .swiper-pagination-bullet-active {
	background: #a1a1aa !important;
}
#app .ap-stats-drawer-body {
	padding-bottom: 8px;
}

#app .ap-stats-drawer-body .swiper.mySwiper2 {
	overflow: hidden !important;
	width: 100%;
}

#app .ap-stats-open-btn {
	color: #93c5fd !important;
}

@media (min-width: 768px) {
	#app .ap-stats-open-btn,
	.ap-stats-open-btn {
		display: none !important;
	}

	/* Tailwind 빌드에 md:flex 없음 → 로그인/내정보 영역 강제 표시 */
	#vivid-header .ap-header-account,
	#vivid-fixed-header .ap-header-account {
		display: inline-flex !important;
		align-items: center;
	}

	#vivid-header .v-btn-login,
	#vivid-fixed-header .v-btn-login {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		background: var(--ap-blue) !important;
		color: #fff !important;
		border: none !important;
		border-radius: 999px !important;
		font-weight: 700 !important;
		padding: 8px 16px !important;
		white-space: nowrap;
	}
}

/* ---------- Mobile sidebar (hamburger) ---------- */
#vivid-sidebar a.logo.v-menu,
#vivid-sidebar a.ap-sidebar-logo {
	font-size: 15px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	padding: 8px 12px !important;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--ap-text-strong) !important;
	background: var(--ap-border-soft) !important;
	border: 1px solid var(--ap-border) !important;
	border-radius: var(--ap-radius-ctl) !important;
	box-shadow: inset 0 -2px 0 var(--ap-blue);
	display: inline-flex !important;
	align-items: center;
	text-decoration: none !important;
}

#vivid-sidebar a.logo.v-menu:hover,
#vivid-sidebar a.ap-sidebar-logo:hover {
	color: var(--ap-text-strong) !important;
	background: #3f3f46 !important;
}

#vivid-sidebar a.logo img {
	height: 28px;
	width: auto;
	max-width: 100%;
	display: block;
	object-fit: contain;
}

#vivid-sidebar .ap-side-account-mobile {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

#vivid-sidebar .ap-sidebar-scroll {
	-webkit-overflow-scrolling: touch;
}

#vivid-sidebar .ap-sidebar-account-wrap {
	position: relative;
	z-index: 2;
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
}

#vivid-sidebar .v-menu-side {
	border-radius: 8px;
	padding: 8px 6px !important;
	font-size: 13px;
}

#vivid-sidebar .v-menu-side .font-semibold,
#vivid-sidebar .v-menu-side .font-normal {
	font-size: 13px !important;
	line-height: 1.3 !important;
}

#vivid-sidebar .v-menu-side svg {
	width: 16px;
	height: 16px;
}

#vivid-sidebar .hs-dropdown-menu .v-menu {
	padding: 6px 8px !important;
	font-size: 12px !important;
}

#vivid-sidebar .ap-account-box {
	background: var(--ap-border-soft);
	border: 1px solid var(--ap-border);
	border-radius: 6px;
	padding: 8px;
}

#vivid-sidebar .ap-account-box--guest {
	padding: 10px;
}

#vivid-sidebar .ap-account-profile {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

#vivid-sidebar .ap-account-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid var(--ap-border);
	border-radius: 4px;
	background: var(--ap-bg);
	overflow: hidden;
	flex-shrink: 0;
}

#vivid-sidebar .ap-account-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

#vivid-sidebar .ap-account-avatar i {
	font-size: 1rem;
	color: var(--ap-text-muted);
}

#vivid-sidebar .ap-account-name {
	font-size: 12px;
	font-weight: 700;
	color: var(--ap-text-strong);
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#vivid-sidebar .ap-account-id {
	font-size: 10px;
	color: var(--ap-text-muted);
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#vivid-sidebar .ap-account-logout {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid rgba(248, 113, 113, 0.35);
	border-radius: 4px;
	color: #f87171 !important;
	text-decoration: none !important;
	flex-shrink: 0;
}

#vivid-sidebar .ap-account-logout i {
	font-size: 0.95rem;
}

#vivid-sidebar .ap-account-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 4px;
}

#vivid-sidebar .ap-account-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: 44px;
	padding: 5px 2px;
	background: var(--ap-bg);
	border: 1px solid var(--ap-border);
	border-radius: 4px;
	color: var(--ap-text) !important;
	text-decoration: none !important;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.15;
	text-align: center;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}

#vivid-sidebar .ap-account-tile i {
	font-size: 0.95rem;
	color: var(--ap-text-strong);
}

#vivid-sidebar .ap-account-tile:hover,
#vivid-sidebar .ap-account-tile:focus-visible {
	background: #27272a;
	border-color: #52525b;
	color: var(--ap-text-strong) !important;
	outline: none;
}

#vivid-sidebar .ap-account-tile-icon-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

#vivid-sidebar .ap-account-badge {
	position: absolute;
	top: -5px;
	right: -8px;
	min-width: 14px;
	height: 14px;
	padding: 0 3px;
	border-radius: 2px;
	background: #f43f5e;
	color: #fff;
	font-size: 8px;
	font-weight: 700;
	line-height: 14px;
	text-align: center;
}

#vivid-sidebar .ap-account-box .v-btn-login {
	display: inline-flex;
	width: 100%;
	justify-content: center;
	padding: 8px 12px !important;
	font-size: 12px !important;
}

/* ---------- League standings (sidebar) ---------- */
#app .sticky .ap-standing {
	background: var(--ap-bg) !important;
	border: 1px solid var(--ap-border) !important;
	border-radius: 14px !important;
	padding: 12px !important;
	color: var(--ap-text) !important;
	box-shadow: none !important;
}

#app .sticky .ap-standing .ap-side-title {
	font-size: 13px !important;
	line-height: 1.35 !important;
	font-weight: 700 !important;
	color: var(--ap-text-strong) !important;
	margin: 0 !important;
}

#app .sticky .ap-standing-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}

#app .sticky .ap-sport-seg {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 2px;
	border-radius: 999px;
	background: var(--ap-border-soft);
	border: 1px solid var(--ap-border);
}

#app .sticky .ap-sport-seg button {
	border: 0;
	background: transparent;
	color: var(--ap-text-muted);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	padding: 4px 8px;
	border-radius: 999px;
	cursor: pointer;
}

#app .sticky .ap-sport-seg button.is-on {
	background: #3f3f46;
	color: var(--ap-text-strong);
	box-shadow: inset 0 -2px 0 var(--ap-blue);
}

#app .sticky .ap-sport-seg button:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

#app .sticky .ap-league-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 8px;
}

#app .sticky .ap-league-tabs button {
	border: 1px solid var(--ap-border);
	background: var(--ap-border-soft);
	color: var(--ap-text-muted);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	padding: 4px 8px;
	border-radius: 999px;
	cursor: pointer;
}

#app .sticky .ap-league-tabs button.is-on {
	background: #3f3f46;
	color: var(--ap-text-strong);
	border-color: var(--ap-border);
	box-shadow: inset 0 -2px 0 var(--ap-blue);
}

#app .sticky .ap-standing-meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 6px;
	font-size: 11px;
	line-height: 1.3;
	color: var(--ap-text-muted);
}

#app .sticky .ap-standing-meta strong {
	font-size: 12px;
	font-weight: 700;
	color: var(--ap-text-strong);
}

#app .sticky .ap-standing-table-wrap {
	overflow: auto;
	max-height: 320px;
	border-top: 1px solid var(--ap-border-soft);
}

#app .sticky .ap-standing-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

#app .sticky .ap-standing-table th,
#app .sticky .ap-standing-table td {
	padding: 6px 4px;
	font-size: 11px;
	line-height: 1.25;
	border-bottom: 1px solid var(--ap-border-soft);
	vertical-align: middle;
}

#app .sticky .ap-standing-table th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--ap-bg);
	color: var(--ap-text-muted);
	font-weight: 700;
	text-align: center;
}

#app .sticky .ap-standing-table th:nth-child(2),
#app .sticky .ap-standing-table td:nth-child(2) {
	text-align: left;
}

#app .sticky .ap-standing-table td {
	color: var(--ap-text);
	text-align: center;
}

#app .sticky .ap-standing-table col.col-pos { width: 28px; }
#app .sticky .ap-standing-table col.col-team { width: auto; }
#app .sticky .ap-standing-table col.col-rec { width: 64px; }
#app .sticky .ap-standing-table col.col-pts { width: 36px; }

#app .sticky .ap-standing-team {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

#app .sticky .ap-standing-team img {
	width: 16px;
	height: 16px;
	object-fit: contain;
	flex: 0 0 auto;
}

#app .sticky .ap-standing-team span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
	font-weight: 600;
	color: var(--ap-text-strong);
}

#app .sticky .ap-standing-rec {
	font-variant-numeric: tabular-nums;
	color: var(--ap-text-muted);
	white-space: nowrap;
}

#app .sticky .ap-standing-pts {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--ap-text-strong);
}

#app .sticky .ap-standing-empty {
	padding: 16px 4px;
	font-size: 12px;
	color: var(--ap-text-muted);
	text-align: center;
}

/* ---------- Home main ---------- */
#app .ap-home-panel,
#app .ap-page-panel {
	background: var(--ap-bg);
	border: 1px solid var(--ap-border);
	border-radius: 14px;
	padding: 22px 20px;
	color: var(--ap-text);
}

/* Full-bleed home hero (CSS background, admin-managed) */
#app .ap-home-hero {
	margin: 0;
}

#app .ap-home-hero-plane {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: clamp(240px, 42vh, 320px);
	height: auto;
	display: flex;
	align-items: flex-end;
	border-radius: 0;
	background: var(--ap-hero-bg, radial-gradient(120% 80% at 70% 18%, #243447 0%, #12161f 42%, #09090b 100%));
	animation: ap-hero-in 700ms var(--ap-ease) both;
}

@media (min-width: 768px) {
	#app .ap-home-hero-plane {
		min-height: 320px;
		height: 320px;
	}
}

#app .ap-home-hero-shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(9, 9, 11, 0.55) 0%, rgba(9, 9, 11, 0.2) 55%, rgba(9, 9, 11, 0.4) 100%);
	z-index: 0;
	pointer-events: none;
}

#app .ap-home-hero-copy {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: clamp(22px, 4vw, 40px) clamp(16px, 3vw, 28px) clamp(24px, 4vw, 36px);
	animation: ap-hero-copy 750ms var(--ap-ease) 120ms both;
}

#app .ap-home-hero .ap-home-brand {
	margin: 0 0 8px;
	font-size: clamp(1.35rem, 3.2vw, 2rem);
	font-weight: 900;
	letter-spacing: -0.04em;
	color: var(--ap-text-strong);
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

#app .ap-home-hero .ap-home-h1 {
	margin: 0 0 10px;
	font-size: clamp(1.45rem, 3.4vw, 2.15rem);
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--ap-text-strong);
	max-width: 18ch;
}

#app .ap-home-hero .ap-home-lead {
	margin: 0;
	max-width: 34rem;
	font-size: clamp(0.95rem, 1.5vw, 1.05rem);
	line-height: 1.55;
	color: rgba(226, 232, 240, 0.92);
}

#app .ap-home-hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

#app .ap-home-hero-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 18px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	background: rgba(24, 24, 27, 0.55);
	color: var(--ap-text-strong) !important;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.02em;
	text-decoration: none !important;
	backdrop-filter: blur(8px);
	transition: background .18s var(--ap-ease), border-color .18s var(--ap-ease), transform .18s var(--ap-ease);
}

#app .ap-home-hero-btn:hover {
	background: rgba(39, 39, 42, 0.85);
	border-color: rgba(255, 255, 255, 0.35);
	transform: translateY(-1px);
}

#app .ap-home-hero-btn--primary {
	background: var(--ap-blue);
	border-color: transparent;
	color: #fff !important;
}

#app .ap-home-hero-btn--primary:hover {
	background: #2563eb;
	border-color: transparent;
}

#app .ap-home-livehint {
	font-weight: 600;
	color: var(--ap-text-muted);
}

#app .ap-home-livedetail {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--ap-text-muted);
}

@keyframes ap-hero-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes ap-hero-copy {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	#app .ap-home-hero-plane,
	#app .ap-home-hero-copy {
		animation: none !important;
	}
}

/* Mobile: edge-to-edge hero within viewport */
@media (max-width: 767.98px) {
	#app .ap-home-hero {
		width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}

	#app .ap-home-hero-plane {
		min-height: min(42vh, 280px);
		height: auto;
	}
}

#app .ap-home-brand,
#app .ap-page-brand {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ap-text-muted);
}

#app .ap-home-h1,
#app .ap-page-h1 {
	margin: 0 0 10px;
	font-size: clamp(1.55rem, 2.4vw, 2rem);
	line-height: 1.25;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--ap-text-strong);
}

#app .ap-home-h2,
#app .ap-page-h2 {
	margin: 0 0 10px;
	font-size: 1.15rem;
	line-height: 1.35;
	font-weight: 750;
	letter-spacing: -0.02em;
	color: var(--ap-text-strong);
}

#app .ap-home-lead,
#app .ap-home-text,
#app .ap-page-lead,
#app .ap-page-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: var(--ap-text);
	max-width: 46rem;
}

#app .ap-home-cta,
#app .ap-page-cta {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 18px;
}

@media (min-width: 768px) {
	#app .ap-home-cta,
	#app .ap-page-cta {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

#app .ap-home-cta a,
#app .ap-page-cta a {
	display: block;
	padding: 12px 12px;
	border-radius: 12px;
	border: 1px solid var(--ap-border);
	background: var(--ap-border-soft);
	text-decoration: none;
	color: inherit;
	transition: background .18s var(--ap-ease), border-color .18s var(--ap-ease);
}

#app .ap-home-cta a:hover,
#app .ap-page-cta a:hover {
	background: #3f3f46;
	border-color: var(--ap-border);
}

#app .ap-home-cta strong,
#app .ap-page-cta strong {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--ap-text-strong);
	letter-spacing: -0.02em;
}

#app .ap-home-cta span,
#app .ap-page-cta span {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	line-height: 1.35;
	color: var(--ap-text-muted);
}

#app .ap-home-list {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

#app .ap-home-list li {
	padding: 6px 0;
	border-top: 1px solid var(--ap-border-soft);
	font-size: 13px;
	line-height: 1.4;
}

#app .ap-home-list li:last-child {
	border-bottom: 1px solid var(--ap-border-soft);
}

#app .ap-home-list a {
	color: var(--ap-text-strong);
	text-decoration: none;
}

#app .ap-home-list a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

#app .ap-home-faq {
	display: grid;
	gap: 14px;
	margin-top: 4px;
}

#app .ap-home-faq h3 {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--ap-text-strong);
}

#app .ap-home-faq p {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--ap-text);
}

#app .ap-home-faq a {
	color: var(--ap-text-strong);
	text-decoration: underline;
	text-underline-offset: 2px;
}

#app .ap-home-cms :is(h2, h3) {
	color: var(--ap-text-strong);
}

/* Challenge intro (guest freetoto / document) */
#app .ap-challenge-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

#app .ap-challenge-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 10px 16px;
	border-radius: 11px;
	border: 1px solid var(--ap-blue);
	background: var(--ap-blue);
	color: #0b0a0f !important;
	font-size: 13.5px;
	font-weight: 750;
	letter-spacing: -0.02em;
	text-decoration: none !important;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

#app .ap-challenge-btn:hover {
	filter: brightness(1.06);
}

#app .ap-challenge-btn--ghost {
	background: var(--ap-border-soft);
	border-color: var(--ap-border);
	color: var(--ap-text-strong) !important;
}

#app .ap-challenge-steps {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
	counter-reset: ap-chal;
}

#app .ap-challenge-steps li {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	column-gap: 10px;
	row-gap: 4px;
	align-items: start;
	padding: 12px;
	border: 1px solid var(--ap-border);
	border-radius: 12px;
	background: var(--ap-border-soft);
	counter-increment: ap-chal;
}

#app .ap-challenge-steps li::before {
	content: counter(ap-chal);
	grid-column: 1;
	grid-row: 1 / span 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 9px;
	background: rgba(49, 130, 246, 0.16);
	color: var(--ap-blue);
	font-size: 13px;
	font-weight: 800;
}

#app .ap-challenge-steps strong {
	grid-column: 2;
	display: block;
	margin: 0;
	font-size: 13.5px;
	color: var(--ap-text-strong);
}

#app .ap-challenge-steps span {
	grid-column: 2;
	display: block;
	min-width: 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--ap-text);
	word-break: keep-all;
	overflow-wrap: break-word;
}

/* Soften legacy CMS dump inside panels */
#app .ap-home-cms h1,
#app .ap-home-cms .text-2xl span[style*="font-size"],
#app .ap-home-cms span[style*="font-size:50px"],
#app .ap-home-cms span[style*="font-size: 50px"] {
	display: block;
	font-size: clamp(1.2rem, 4.2vw, 1.55rem) !important;
	line-height: 1.3 !important;
	font-weight: 800 !important;
	letter-spacing: -0.03em;
	color: var(--ap-text-strong) !important;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

#app .ap-home-cms a.inline-block.bg-green-900,
#app .ap-home-cms a[class*="bg-green"] {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 10px 16px !important;
	border-radius: 11px !important;
	border: 1px solid var(--ap-blue) !important;
	background: var(--ap-blue) !important;
	color: #0b0a0f !important;
	font-weight: 750 !important;
	text-decoration: none !important;
}

#app .ap-home-cms a.inline-block.bg-slate-800,
#app .ap-home-cms a[class*="bg-slate"] {
	display: inline-flex !important;
	margin: 6px 6px 0 0;
	padding: 8px 12px !important;
	border-radius: 10px !important;
	border: 1px solid var(--ap-border) !important;
	background: var(--ap-border-soft) !important;
	color: var(--ap-text-strong) !important;
	font-size: 12.5px !important;
	font-weight: 650 !important;
	text-decoration: none !important;
}

#app .ap-home-cms .space-y-5,
#app .ap-home-cms .space-y-4 {
	display: grid;
	gap: 14px;
}

#app .ap-home-cms .text-blue-600,
#app .ap-home-cms .dark\:text-blue-400 {
	color: var(--ap-text-strong) !important;
}

#app .ap-home-cms .text-gray-700,
#app .ap-home-cms .dark\:text-gray-300 {
	color: var(--ap-text) !important;
}

/* ---------- Shared page chrome (prediction / docs) ---------- */
#app .ap-page {
	display: grid;
	gap: 16px;
	margin-bottom: 2rem;
}

#app .ap-seg-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 14px;
}

#app .ap-seg-tabs a {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid var(--ap-border);
	background: var(--ap-border-soft);
	color: var(--ap-text-muted) !important;
	text-decoration: none;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
}

#app .ap-seg-tabs a:hover {
	color: var(--ap-text-strong) !important;
	background: #3f3f46;
}

#app .ap-seg-tabs a.active,
#app .ap-seg-tabs a[aria-selected="true"] {
	color: var(--ap-text-strong) !important;
	background: #3f3f46;
	box-shadow: inset 0 -2px 0 var(--ap-blue);
}

#app .aipick-wrap {
	max-width: none;
	margin: 0;
	padding: 0 0 32px;
	color: var(--ap-text);
}

#app .aipick-sub {
	margin: 0;
	color: var(--ap-text-muted);
	font-size: 13px;
	line-height: 1.55;
}

#app .aipick-picksters {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

#app .aipick-picksters a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 11px;
	border-radius: 10px;
	background: var(--ap-border-soft);
	border: 1px solid var(--ap-border);
	color: var(--ap-text) !important;
	text-decoration: none;
	font-size: 12px;
	font-weight: 700;
}

#app .aipick-picksters a.active {
	border-color: var(--ap-border);
	color: var(--ap-text-strong) !important;
	background: #3f3f46;
	box-shadow: inset 0 -2px 0 var(--ap-blue);
}

#app .aipick-picksters .hint {
	font-weight: 500;
	font-size: 11px;
	opacity: .75;
	color: var(--ap-text-muted);
}

#app .aipick-summary {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

#app .aipick-summary a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border-radius: 12px;
	background: var(--ap-border-soft);
	border: 1px solid var(--ap-border);
	color: var(--ap-text-strong) !important;
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
	box-shadow: inset 0 -2px 0 var(--ap-blue);
}

#app .aipick-card {
	display: block;
	text-decoration: none !important;
	border: 1px solid var(--ap-border);
	border-radius: 14px;
	padding: 14px 16px;
	margin-bottom: 10px;
	background: var(--ap-bg);
	color: var(--ap-text) !important;
	transition: border-color .18s var(--ap-ease), background .18s var(--ap-ease), box-shadow .18s var(--ap-ease);
}

#app .aipick-card:hover {
	border-color: #52525b;
	background: #1f1f23;
}

/* 관망: 차분한 톤 유지 */
#app .aipick-card--pass {
	border-color: #3f3f46;
	opacity: 0.92;
}

#app .aipick-card--pass:hover {
	opacity: 1;
	border-color: #52525b;
}

/* 가치픽: 홈(파랑) / 무(호박) / 원정(코랄) 보더 강조 */
#app .aipick-card--pick-H {
	border-color: #3182f6;
	border-width: 1.5px;
	box-shadow: inset 3px 0 0 #3182f6, 0 0 0 1px rgba(49, 130, 246, 0.18);
	background: linear-gradient(90deg, rgba(49, 130, 246, 0.10), var(--ap-bg) 42%);
}

#app .aipick-card--pick-D {
	border-color: #f59e0b;
	border-width: 1.5px;
	box-shadow: inset 3px 0 0 #f59e0b, 0 0 0 1px rgba(245, 158, 11, 0.18);
	background: linear-gradient(90deg, rgba(245, 158, 11, 0.10), var(--ap-bg) 42%);
}

#app .aipick-card--pick-A {
	border-color: #fb7185;
	border-width: 1.5px;
	box-shadow: inset 3px 0 0 #fb7185, 0 0 0 1px rgba(251, 113, 133, 0.18);
	background: linear-gradient(90deg, rgba(251, 113, 133, 0.10), var(--ap-bg) 42%);
}

#app .aipick-card--pick-H:hover {
	border-color: #60a5fa;
	background: linear-gradient(90deg, rgba(49, 130, 246, 0.16), #1f1f23 42%);
}

#app .aipick-card--pick-D:hover {
	border-color: #fbbf24;
	background: linear-gradient(90deg, rgba(245, 158, 11, 0.16), #1f1f23 42%);
}

#app .aipick-card--pick-A:hover {
	border-color: #fda4af;
	background: linear-gradient(90deg, rgba(251, 113, 133, 0.16), #1f1f23 42%);
}

#app .aipick-meta {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 12px;
	color: var(--ap-text-muted) !important;
	margin-bottom: 8px;
}

#app .aipick-league {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

#app .ap-sport-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	flex: 0 0 14px;
	color: #94a3b8;
	opacity: 0.92;
}

#app .ap-sport-ico svg {
	width: 14px;
	height: 14px;
	display: block;
}

#app .ap-sport-ico--soccer { color: #86efac; }
#app .ap-sport-ico--basketball { color: #fdba74; }
#app .ap-sport-ico--baseball { color: #93c5fd; }
#app .ap-sport-ico--volleyball { color: #c4b5fd; }

#app .ap-card-meta .aipick-league,
#app .aipick-table .aipick-league {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

#app .aipick-match {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 10px;
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 10px;
	color: var(--ap-text-strong) !important;
	letter-spacing: -0.02em;
}

#app .aipick-match-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

#app .aipick-match-link:hover .ap-team-name {
	text-decoration: underline;
	text-underline-offset: 3px;
}

#app .ap-team {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

#app .ap-team-name {
	min-width: 0;
}

#app .ap-vs {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ap-text-muted, #94a3b8) !important;
	opacity: 0.9;
}

#app .ap-team-logo {
	width: 28px;
	height: 28px;
	object-fit: contain;
	flex: 0 0 auto;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.06);
	padding: 2px;
	box-sizing: border-box;
}

#app .ap-team-logo.is-broken,
#app .ap-team-logo--fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 800;
	color: var(--ap-text-strong) !important;
	background: var(--ap-border-soft, rgba(148, 163, 184, 0.18));
	border: 1px solid var(--ap-border, rgba(148, 163, 184, 0.28));
}

#app .aipick-match--sm {
	font-size: 14px;
	margin-bottom: 4px;
	gap: 6px 8px;
}

#app .aipick-match--sm .ap-team-logo {
	width: 22px;
	height: 22px;
	border-radius: 5px;
}

#app .aipick-match--detail {
	font-size: 20px;
	margin: 0 0 6px;
	gap: 10px 12px;
}

#app .aipick-match--detail .ap-team-logo {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	padding: 3px;
}

#app .ap-card .aipick-match--detail {
	color: #f8fafc !important;
}

#app .ap-card .aipick-match--detail .ap-vs {
	color: #94a3b8 !important;
}

#app .ap-card .ap-team-logo {
	background: rgba(255, 255, 255, 0.08);
}

#app .aipick-row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}

#app .aipick-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 9px;
	border-radius: 8px;
	background: var(--ap-border-soft);
	border: 1px solid var(--ap-border);
	font-size: 12px;
	color: var(--ap-text) !important;
}

#app .aipick-pill strong {
	font-size: 13px;
	color: var(--ap-text-strong) !important;
}

#app .aipick-pick,
#app .aipick-value {
	background: rgba(49, 130, 246, 0.12);
	border-color: rgba(49, 130, 246, 0.35);
	color: #93c5fd !important;
	font-weight: 700;
}

#app .aipick-value--H {
	background: rgba(49, 130, 246, 0.18);
	border-color: #3182f6;
	color: #bfdbfe !important;
}

#app .aipick-value--D {
	background: rgba(245, 158, 11, 0.16);
	border-color: #f59e0b;
	color: #fde68a !important;
}

#app .aipick-value--A {
	background: rgba(251, 113, 133, 0.16);
	border-color: #fb7185;
	color: #fecdd3 !important;
}

#app .aipick-card--consensus {
	outline: 1px solid rgba(52, 211, 153, 0.45);
	box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.18), inset 3px 0 0 #34d399;
}

#app .aipick-consensus {
	background: rgba(52, 211, 153, 0.14);
	border-color: rgba(52, 211, 153, 0.45);
	color: #6ee7b7 !important;
	font-weight: 700;
}

#app .ap-inj-board-card--has {
	outline: 1px solid rgba(147, 197, 253, 0.28);
	box-shadow: inset 3px 0 0 rgba(147, 197, 253, 0.55);
}

#app .ap-inj-board-card--key {
	outline: 1px solid rgba(251, 191, 36, 0.35);
	box-shadow: inset 3px 0 0 #fbbf24;
}

#app .ap-inj-board-impact {
	font-size: 12px;
	color: var(--ap-text-muted);
	margin: 4px 0 10px;
	line-height: 1.5;
}

#app .ap-inj-board-cols {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

#app .ap-inj-board-col {
	flex: 1;
	min-width: 200px;
}

#app .ap-inj-board-team {
	font-size: 12px;
	font-weight: 700;
	color: var(--ap-text-strong);
	margin-bottom: 6px;
}

#app .ap-inj-board-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

#app .ap-inj-board-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 5px 0;
	border-top: 1px solid var(--ap-border-soft);
	font-size: 13px;
}

#app .ap-inj-board-list li:first-child {
	border-top: none;
	padding-top: 0;
}

#app .ap-inj-board-player {
	color: var(--ap-text);
	font-weight: 600;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#app .ap-inj-board-list .ap-inj-st {
	flex-shrink: 0;
	padding: 2px 7px;
	border-radius: 6px;
	font-size: 10px;
	font-weight: 700;
}

#app .ap-inj-board-list .ap-inj-st--out {
	background: #7f1d1d;
	color: #fecaca;
}

#app .ap-inj-board-list .ap-inj-st--doubt {
	background: #78350f;
	color: #fde68a;
}

#app .ap-inj-board-list .ap-inj-st--suspend {
	background: #4c1d95;
	color: #ddd6fe;
}

#app .ap-inj-board-more,
#app .ap-inj-board-none,
#app .ap-inj-board-empty {
	font-size: 12px;
	color: var(--ap-text-muted);
}

#app .ap-inj-board-more {
	justify-content: flex-start !important;
}

#app .ap-lu-card--confirmed {
	outline: 1px solid rgba(52, 211, 153, 0.4);
	box-shadow: inset 3px 0 0 #34d399;
}

#app .ap-lu-card--expected {
	outline: 1px solid rgba(96, 165, 250, 0.35);
	box-shadow: inset 3px 0 0 #60a5fa;
}

#app .ap-lu-card--partial {
	outline: 1px solid rgba(251, 191, 36, 0.3);
	box-shadow: inset 3px 0 0 #fbbf24;
}

#app .ap-lu-st--ok {
	background: rgba(52, 211, 153, 0.14) !important;
	border-color: rgba(52, 211, 153, 0.45) !important;
	color: #6ee7b7 !important;
	font-weight: 700;
}

#app .ap-lu-st--exp {
	background: rgba(96, 165, 250, 0.14) !important;
	border-color: rgba(96, 165, 250, 0.4) !important;
	color: #93c5fd !important;
	font-weight: 700;
}

#app .ap-lu-st--part {
	background: rgba(251, 191, 36, 0.12) !important;
	border-color: rgba(251, 191, 36, 0.35) !important;
	color: #fde68a !important;
}

#app .ap-lu-st--empty {
	background: var(--ap-border-soft) !important;
	color: var(--ap-text-muted) !important;
}

#app .ap-lu-meta {
	font-size: 12px;
	color: var(--ap-text-muted);
	margin: 4px 0 10px;
}

#app .ap-lu-cols {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

#app .ap-lu-col {
	flex: 1;
	min-width: 200px;
}

#app .ap-lu-team {
	font-size: 12px;
	font-weight: 700;
	color: var(--ap-text-strong);
	margin-bottom: 6px;
	display: flex;
	justify-content: space-between;
	gap: 8px;
}

#app .ap-lu-form {
	color: #93c5fd;
	font-weight: 600;
}

#app .ap-lu-list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: lu;
}

#app .ap-lu-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
	border-top: 1px solid var(--ap-border-soft);
	font-size: 13px;
	color: var(--ap-text);
}

#app .ap-lu-list li:first-child {
	border-top: none;
	padding-top: 0;
}

#app .ap-lu-pos {
	width: 28px;
	flex-shrink: 0;
	font-size: 11px;
	font-weight: 700;
	color: var(--ap-text-muted);
}

#app .ap-lu-name {
	font-weight: 600;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#app .ap-lu-bench,
#app .ap-lu-empty {
	font-size: 12px;
	color: var(--ap-text-muted);
}

#app .aipick-ai-picks {
	gap: 8px;
}

#app .aipick-ai-pick {
	text-decoration: none;
	gap: 6px;
}

#app .aipick-ai-pick .ai-name {
	opacity: 0.9;
	font-weight: 600;
}

#app .aipick-ai-pick .ai-edge {
	opacity: 0.8;
	font-size: 11px;
}

#app .aipick-ai-pick.is-agree {
	box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.35);
}

#app .aipick-ai-pick.is-dissent {
	opacity: 0.75;
}

#app .aipick-lean--H { color: #93c5fd !important; }
#app .aipick-lean--D { color: #fcd34d !important; }
#app .aipick-lean--A { color: #fda4af !important; }

#app .aipick-side-H.is-pick,
#app .aipick-pill.aipick-side-H.is-pick {
	background: rgba(49, 130, 246, 0.16);
	border-color: #3182f6;
	color: #bfdbfe !important;
	font-weight: 700;
}

#app .aipick-side-D.is-pick,
#app .aipick-pill.aipick-side-D.is-pick {
	background: rgba(245, 158, 11, 0.14);
	border-color: #f59e0b;
	color: #fde68a !important;
	font-weight: 700;
}

#app .aipick-side-A.is-pick,
#app .aipick-pill.aipick-side-A.is-pick {
	background: rgba(251, 113, 133, 0.14);
	border-color: #fb7185;
	color: #fecdd3 !important;
	font-weight: 700;
}

#app .aipick-nick,
#app .aipick-pass {
	background: #3f3f46;
	border-color: #52525b;
	color: #e4e4e7 !important;
	font-weight: 700;
}

#app .aipick-pass {
	background: #27272a;
	border-color: #3f3f46;
	color: #a1a1aa !important;
	font-weight: 650;
}

#app .aipick-empty {
	padding: 24px;
	border: 1px dashed var(--ap-border);
	border-radius: 12px;
	text-align: center;
	color: var(--ap-text-muted);
	background: var(--ap-bg);
}

#app .ap-login-page {
	display: none;
}

/* /login URL: 본문 비우고 오버레이만 사용 */
body:has(#login-canvas[data-ap-login-page]) #app {
	min-height: 40vh;
}

#app .aipick-guest-cta__text {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--ap-text);
}

#app .aipick-guest-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

#app .aipick-guest-cta--detail {
	margin-top: 8px;
	padding: 28px 18px;
}

#app .aipick-hit { color: #60a5fa !important; font-weight: 700; }
#app .aipick-miss { color: #f87171 !important; font-weight: 700; }

#app .aipick-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}
@media (max-width: 720px) {
	#app .aipick-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

#app .aipick-stat,
#app .aipick-panel {
	background: var(--ap-bg);
	border: 1px solid var(--ap-border);
	border-radius: 14px;
	padding: 14px;
	color: var(--ap-text);
}

#app .aipick-stat .lbl {
	font-size: 12px;
	color: var(--ap-text-muted) !important;
}

#app .aipick-stat .val {
	font-size: 26px;
	font-weight: 800;
	margin-top: 6px;
	color: var(--ap-text-strong);
	letter-spacing: -0.03em;
}

#app .aipick-stat .val.rate { color: #60a5fa; }

#app .aipick-panel h2 {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 700;
	color: var(--ap-text-strong);
}

#app .aipick-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	color: var(--ap-text) !important;
}

#app .aipick-table th,
#app .aipick-table td {
	padding: 9px 6px;
	border-bottom: 1px solid var(--ap-border-soft);
	text-align: left;
	color: var(--ap-text) !important;
}

#app .aipick-table th {
	color: var(--ap-text-muted) !important;
	font-weight: 700;
	font-size: 12px;
}

#app .aipick-table a {
	color: var(--ap-text-strong) !important;
	text-decoration: none;
	font-weight: 600;
}

#app .aipick-table a:hover { text-decoration: underline; }
#app .aipick-table .meta { color: var(--ap-text-muted) !important; font-size: 12px; margin-top: 3px; }

#app .aipick-nav { margin-bottom: 4px; font-size: 13px; }
#app .aipick-nav a {
	color: var(--ap-text-muted) !important;
	text-decoration: none;
	margin-right: 12px;
	font-weight: 600;
}
#app .aipick-nav a:hover { color: var(--ap-text-strong) !important; text-decoration: underline; }
#app .aipick-nav a.is-active {
	color: var(--ap-text-strong) !important;
	font-weight: 700;
	text-decoration: none;
}

#app .ap-challenge-season-banner {
	margin: 10px 0 0;
	padding: 10px 12px;
	border-radius: 8px;
	background: rgba(49, 130, 246, 0.12);
	border: 1px solid rgba(49, 130, 246, 0.28);
	color: var(--ap-text);
	font-size: 13px;
	line-height: 1.5;
	max-width: 46rem;
}
#app .ap-challenge-season-banner strong {
	color: var(--ap-text-strong);
	font-weight: 700;
}

#app .aipick-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 8px; }
#app .aipick-actions a {
	display: inline-block;
	padding: 8px 12px;
	border-radius: 10px;
	background: var(--ap-blue);
	color: #fff !important;
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
}
#app .aipick-actions a.secondary {
	background: var(--ap-border-soft);
	border: 1px solid var(--ap-border);
	color: var(--ap-text-strong) !important;
}

#app .aipick-compare {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}
@media (max-width: 720px) {
	#app .aipick-compare { grid-template-columns: 1fr; }
}
#app .aipick-compare .box,
#app .aipick-card-shell .box {
	background: var(--ap-bg);
	border: 1px solid var(--ap-border);
	border-radius: 12px;
	padding: 12px;
	color: var(--ap-text);
}
#app .aipick-compare .box.active { box-shadow: inset 0 -2px 0 var(--ap-blue); }
#app .aipick-compare .box.aipick-box--pass { border-color: #3f3f46; opacity: 0.92; }
#app .aipick-compare .box.aipick-box--pick-H {
	border-color: #3182f6;
	box-shadow: inset 3px 0 0 #3182f6;
	background: linear-gradient(90deg, rgba(49,130,246,0.10), var(--ap-bg) 55%);
}
#app .aipick-compare .box.aipick-box--pick-D {
	border-color: #f59e0b;
	box-shadow: inset 3px 0 0 #f59e0b;
	background: linear-gradient(90deg, rgba(245,158,11,0.10), var(--ap-bg) 55%);
}
#app .aipick-compare .box.aipick-box--pick-A {
	border-color: #fb7185;
	box-shadow: inset 3px 0 0 #fb7185;
	background: linear-gradient(90deg, rgba(251,113,133,0.10), var(--ap-bg) 55%);
}
#app .aipick-compare .nick { font-weight: 800; font-size: 14px; color: var(--ap-text-strong); }
#app .aipick-compare .pick { margin-top: 6px; color: #93c5fd; font-weight: 700; }
#app .aipick-compare .pct { margin-top: 6px; font-size: 12px; color: var(--ap-text-muted); }

/* Legacy zinc intro cards on documents / misc */
#app section.bg-white.dark\:bg-zinc-950\/80,
#app section.py-5.bg-white,
#app section.px-6.py-5.bg-white {
	background: var(--ap-bg) !important;
	border: 1px solid var(--ap-border) !important;
	border-radius: 14px !important;
	color: var(--ap-text) !important;
	padding: 22px 20px !important;
}

/* Board list under shared chrome */
#app .board.ap-page .table,
#app .board .table {
	color: var(--ap-text);
}
/* pagination — override legacy light .pagination li styles */
#app .board nav > .pagination,
#app .board .pagination {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin: 16px 0 8px !important;
	padding: 0;
	list-style: none;
	text-align: center;
}

#app .board .pagination > li,
#app .board .pagination li {
	float: none !important;
	display: inline-flex !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
	font-size: 13px !important;
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
}

#app .board .pagination > li > a,
#app .board .pagination > li > span,
#app .board .pagination li > a,
#app .board .pagination li > span {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 12px !important;
	margin: 0 !important;
	border-radius: 10px !important;
	background: var(--ap-border-soft) !important;
	border: 1px solid var(--ap-border) !important;
	box-shadow: none !important;
	color: var(--ap-text) !important;
	font-size: 13px !important;
	font-weight: 600;
	line-height: 1 !important;
	text-decoration: none !important;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

#app .board .pagination > li > a:hover,
#app .board .pagination li > a:hover {
	background: rgba(49, 130, 246, 0.16) !important;
	border-color: rgba(49, 130, 246, 0.55) !important;
	color: var(--ap-text-strong) !important;
}

#app .board .pagination > li.active,
#app .board .pagination li.active {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

#app .board .pagination > li.active > a,
#app .board .pagination > li.active > span,
#app .board .pagination li.active > a,
#app .board .pagination li.active > span {
	background: var(--ap-blue) !important;
	border-color: var(--ap-blue) !important;
	color: #fff !important;
	font-weight: 800;
}

/* ---------- Board / 하이라이트 갤러리·글보기 ---------- */
#app .board {
	color: var(--ap-text);
}

#app .board > h3,
#app .board > h2.board_h1,
#app .board > h1.board_h1 {
	margin: 0 0 16px;
	padding: 0;
	font-size: 1.45rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.3;
	color: var(--ap-text-strong) !important;
	background: transparent !important;
	border: 0 !important;
}

#app .board .mb20 {
	margin-bottom: 14px !important;
}

/* Board list toolbar + search (no float collapse) */
#app .board .ap-board-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 12px;
	margin-bottom: 14px;
	min-height: 42px;
}

#app .board .ap-board-toolbar__left,
#app .board .ap-board-toolbar__right {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

#app .board .ap-board-toolbar__right {
	margin-left: auto;
	justify-content: flex-end;
	flex: 1 1 auto;
}

#app .board .searchbuttonbox {
	display: inline-flex;
	margin: 0;
}

#app .board .searchbuttonbox.is-hidden {
	display: none !important;
}

#app .board .searchbox {
	display: none !important;
	float: none !important;
	width: auto !important;
	max-width: 100%;
	margin: 0 !important;
}

#app .board .searchbox.is-open {
	display: block !important;
}

#app .board .ap-board-search {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	max-width: 100%;
}

#app .board .ap-board-search .form-control,
#app .board .ap-board-search select,
#app .board .ap-board-search input {
	float: none !important;
	width: auto !important;
	min-width: 0;
	height: 36px !important;
	margin: 0 !important;
}

#app .board .ap-board-search-input {
	width: 160px !important;
	min-width: 120px;
	flex: 1 1 140px;
}

#app .board .ap-board-search .btn,
#app .board .ap-board-search-toggle {
	height: 36px;
	min-width: 36px;
	padding: 0 12px !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

#app .board .ap-board-search .btn .bi,
#app .board .ap-board-search-toggle .bi {
	font-size: 14px;
	line-height: 1;
}

#app .board .point-info {
	float: none !important;
	margin: 0 !important;
}

@media (max-width: 575.98px) {
	#app .board .ap-board-toolbar__right {
		width: 100%;
		margin-left: 0;
	}

	#app .board .ap-board-search {
		width: 100%;
	}

	#app .board .ap-board-search-input {
		flex: 1 1 100%;
		width: 100% !important;
	}
}

#app .board .form-control,
#app .board select.form-control,
#app .board input.form-control,
#app .board textarea.form-control {
	background: var(--ap-bg) !important;
	border: 1px solid var(--ap-border) !important;
	color: var(--ap-text-strong) !important;
	border-radius: 10px !important;
	box-shadow: none !important;
}

#app .board .btn-primary,
#app .board .btn-black,
#app .board .btn-default,
#app .board .btn-success,
#app .board .btn-sm {
	border-radius: 8px !important;
}

#app .board .btn-primary,
#app .board .btn-success {
	background: var(--ap-blue) !important;
	border-color: var(--ap-blue) !important;
	color: #fff !important;
}

#app .board .btn-black,
#app .board .btn-default {
	background: var(--ap-border-soft) !important;
	border: 1px solid var(--ap-border) !important;
	color: var(--ap-text-strong) !important;
}

/* 갤러리 그리드 */
#app .board .table-image {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin: 8px 0 18px;
}

#app .board .table-image::after {
	content: none !important;
	display: none !important;
}

#app .board .table-image > .row {
	display: contents;
}

#app .board .gallery-box {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	padding: 10px;
	background: var(--ap-bg);
	border: 1px solid var(--ap-border);
	border-radius: 14px;
	box-sizing: border-box;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

#app .board .gallery-box:hover {
	border-color: rgba(49, 130, 246, 0.55);
	transform: translateY(-1px);
}

#app .board .gallery-box > .label,
#app .board .gallery-box > .fa-wifi {
	display: none !important;
}

#app .board .gallery-box > div:first-of-type,
#app .board .gallery-box > div {
	margin: 0;
}

#app .board .gallery-box a {
	color: var(--ap-text-strong) !important;
	text-decoration: none !important;
}

#app .board .gallery-box .thumbnail,
#app .board .gallery-box img.thumbnail,
#app .board .gallery-box img.img-responsive {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 10px !important;
	background: #111 !important;
	box-shadow: none !important;
}

#app .board .gallery-box .caption,
#app .board .gallery-box > a[title],
#app .board .gallery-box a:not(:has(img)) {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.01em;
	color: var(--ap-text-strong) !important;
}

#app .board .gallery-box > p {
	margin: 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--ap-text-muted) !important;
}

#app .board .gallery-box > p:first-of-type {
	font-size: 13px;
	font-weight: 700;
	color: var(--ap-text-strong) !important;
}

#app .board .gallery-box > p:first-of-type a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: inherit !important;
}

#app .board .gallery-box .gallery-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 2px;
	min-width: 0;
}

#app .board .gallery-box .gallery-meta__author {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--ap-text-muted) !important;
}

#app .board .gallery-box .gallery-meta__author a {
	color: inherit !important;
}

#app .board .gallery-box .gallery-meta__stats {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	flex: 0 0 auto;
	white-space: nowrap;
	color: var(--ap-text-muted) !important;
}

#app .board .gallery-box .gallery-meta__stats .hit-count,
#app .board .gallery-box .gallery-meta__stats .comment-count {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 12px;
	color: var(--ap-text-muted) !important;
}

#app .board .gallery-box .fa-user,
#app .board .gallery-box .fa-comments,
#app .board .gallery-box .fa-eye,
#app .board .gallery-box .fa-clock-o {
	color: var(--ap-text-muted) !important;
}

#app .board .gallery-box .label-warning,
#app .board .gallery-box .label-default,
#app .board .gallery-box .label-danger {
	border-radius: 6px;
	font-weight: 700;
}

/* 글보기 */
#app .board > h3:first-child,
#app .board h3 {
	color: var(--ap-text-strong) !important;
	background: transparent !important;
}

#app .board .info {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	align-items: center;
	margin: 0 0 16px;
	padding: 10px 12px;
	list-style: none;
	background: var(--ap-border-soft);
	border: 1px solid var(--ap-border);
	border-radius: 12px;
	overflow: visible;
}

#app .board .info li {
	float: none !important;
	padding: 0 !important;
	font-size: 12px;
	color: var(--ap-text-muted) !important;
}

#app .board .info li strong,
#app .board .info li a {
	color: var(--ap-text-strong) !important;
}

#app .board .contents-view {
	padding: 0 0 18px !important;
	clear: both;
}

#app #post-content {
	color: var(--ap-text);
	line-height: 1.7;
	font-size: 15px;
}

#app #post-content p {
	margin: 0 0 12px;
}

#app #post-content a {
	color: var(--ap-blue-text);
}

#app #post-content img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

#app #post-content iframe.note-video-clip,
#app #post-content iframe,
#app .board .contents-view iframe {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 9;
	min-height: 220px;
	border: 0;
	border-radius: 12px;
	background: #000;
}

#app .board .list-group {
	margin: 0 0 16px;
	border: 1px solid var(--ap-border);
	border-radius: 12px;
	overflow: hidden;
	background: var(--ap-bg);
}

#app .board .list-group-item {
	background: var(--ap-bg) !important;
	border-color: var(--ap-border) !important;
	color: var(--ap-text) !important;
}

#app .board .list-group-item-info {
	background: var(--ap-border-soft) !important;
	color: var(--ap-text-strong) !important;
	font-weight: 700;
}

#app .board .list-group-item a {
	color: var(--ap-blue-text) !important;
}

#app .board .badge {
	background: var(--ap-blue) !important;
	color: #fff !important;
}

#app .board .recommand {
	margin: 8px 0 20px;
	text-align: center;
}

#app .board .recommand .good,
#app .board .recommand .bad {
	width: 56px;
	height: 56px;
	padding: 8px 0 !important;
	margin: 0 8px !important;
	border-radius: 50%;
	background: var(--ap-border-soft) !important;
	border: 1px solid var(--ap-border);
	color: var(--ap-text-strong) !important;
	vertical-align: middle;
}

#app .board .recommand .good:hover,
#app .board .recommand .bad:hover {
	background: rgba(49, 130, 246, 0.18) !important;
	border-color: var(--ap-blue);
	color: #fff !important;
}

#app .board .recommand .fa {
	color: inherit !important;
}

#app .board .pull-right.mb20 {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
	float: none !important;
	margin: 0 0 18px !important;
}

#app .board .sns_button {
	overflow: hidden;
	margin-bottom: 16px;
}

#app .board .sns_button div {
	float: left;
	padding-right: 6px;
}

#app .board .comment_write_box_inner,
#app .board .chk_comment_all_wrapper {
	background: var(--ap-bg);
	border: 1px solid var(--ap-border);
	border-radius: 12px;
	padding: 16px !important;
	color: var(--ap-text);
}

#app .board .comment_write_box_inner input,
#app .board .comment_write_box_inner textarea {
	background: var(--ap-border-soft) !important;
	border: 1px solid var(--ap-border) !important;
	color: var(--ap-text-strong) !important;
	border-radius: 8px !important;
}

#app .board .border_button {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 12px 0;
}

#app .board .border_button + nav {
	width: 100%;
	clear: both;
	margin-top: 4px;
}

/* ---------- SEO footer (board meta) ---------- */
#app .ap-seo-block,
#app section.ap-seo-block,
#app .board + .ap-seo-block,
#app .board + section.px-6,
#app section.px-6.py-5 {
	margin-top: 22px;
	background: var(--ap-bg-elevated) !important;
	border: 1px solid var(--ap-border) !important;
	border-radius: 14px !important;
	color: var(--ap-text) !important;
	padding: 22px 20px !important;
}

#app .ap-seo-block .ap-seo-inner {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 920px;
}

#app .ap-seo-block .ap-seo-title {
	margin: 0;
	padding: 0;
	font-size: 1.2rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.35;
	color: var(--ap-text-strong) !important;
	text-align: left !important;
}

#app .ap-seo-block .ap-seo-title span {
	display: inline;
	font-size: 0.92em;
	font-weight: 600;
	color: var(--ap-text-muted) !important;
}

#app .ap-seo-block .ap-seo-lead,
#app .ap-seo-block .ap-seo-note,
#app .ap-seo-block p {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--ap-text) !important;
}

#app .ap-seo-block strong {
	color: var(--ap-text-strong);
	font-weight: 700;
}

#app .ap-seo-block a:not(.ap-seo-chip) {
	color: var(--ap-blue-text) !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}

#app .ap-seo-block .ap-seo-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

#app .ap-seo-block .ap-seo-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 12px;
	border-radius: 10px;
	background: var(--ap-border-soft) !important;
	border: 1px solid var(--ap-border) !important;
	color: var(--ap-text-strong) !important;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none !important;
	transition: border-color 0.15s ease, background 0.15s ease;
}

#app .ap-seo-block .ap-seo-chip:hover {
	border-color: rgba(49, 130, 246, 0.55) !important;
	background: rgba(49, 130, 246, 0.14) !important;
}

#app .ap-seo-block .ap-seo-chip--primary {
	background: var(--ap-blue) !important;
	border-color: var(--ap-blue) !important;
	color: #fff !important;
}

#app .ap-seo-block .ap-seo-chip--primary:hover {
	filter: brightness(1.06);
}

#app .ap-seo-block .ap-seo-section {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 4px;
	border-top: 1px solid var(--ap-border);
}

#app .ap-seo-block .ap-seo-h {
	margin: 10px 0 0;
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--ap-blue-text) !important;
	text-align: left !important;
}

#app .ap-seo-block .ap-seo-list {
	margin: 0;
	padding: 0 0 0 1.15rem;
	list-style: disc;
	color: var(--ap-text);
}

#app .ap-seo-block .ap-seo-list li {
	margin: 0 0 6px;
	font-size: 14px;
	line-height: 1.65;
	color: var(--ap-text) !important;
}

#app .ap-seo-block .ap-seo-cta {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 8px;
	border-top: 1px solid var(--ap-border);
}

#app .ap-seo-block .ap-seo-cta-text {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--ap-text-strong) !important;
}

/* legacy tailwind SEO leftovers still in other boards */
#app section.px-6.py-5 h1,
#app section.px-6.py-5 h1 span {
	font-size: 1.2rem !important;
	line-height: 1.35 !important;
	color: var(--ap-text-strong) !important;
	text-align: left !important;
}

#app section.px-6.py-5 a.inline-block,
#app section.px-6.py-5 a.bg-emerald-600 {
	display: inline-flex !important;
	align-items: center;
	padding: 8px 12px !important;
	border-radius: 10px !important;
	background: var(--ap-border-soft) !important;
	border: 1px solid var(--ap-border) !important;
	color: var(--ap-text-strong) !important;
	font-weight: 700;
	text-decoration: none !important;
}

@media (max-width: 991.98px) {
	#app .board .table-image {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
}

@media (max-width: 575.98px) {
	#app .board .table-image {
		grid-template-columns: 1fr;
	}

	#app .board > h3,
	#app .board > h2.board_h1 {
		font-size: 1.25rem;
	}
}

/* ---------- Mobile UX (shared chrome) ---------- */
@media (max-width: 767.98px) {
	#app {
		margin-top: 0.75rem !important;
		margin-bottom: 5.5rem !important;
	}

	#app > .max-w-screen-xl {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	#app .ap-home,
	#app .ap-page {
		gap: 12px !important;
		margin-bottom: 1.25rem !important;
	}

	#app .ap-home-panel,
	#app .ap-page-panel,
	#app .sticky .ap-side-card,
	#app .sticky .tab-group,
	#app .aipick-stat,
	#app .aipick-panel,
	#app .aipick-card,
	#app section.bg-white.dark\:bg-zinc-950\/80,
	#app section.py-5.bg-white,
	#app section.px-6.py-5.bg-white {
		padding: 14px 12px !important;
		border-radius: 12px !important;
	}

	#app .ap-home-brand,
	#app .ap-page-brand {
		font-size: 12px !important;
		margin-bottom: 4px !important;
	}

	#app .ap-home-hero .ap-home-brand {
		font-size: clamp(1.25rem, 6vw, 1.75rem) !important;
		margin-bottom: 8px !important;
	}

	#app .ap-home-h1,
	#app .ap-page-h1 {
		font-size: 1.35rem !important;
		line-height: 1.28 !important;
		margin-bottom: 8px !important;
	}

	#app .ap-home-hero .ap-home-h1 {
		font-size: clamp(1.35rem, 6.2vw, 1.85rem) !important;
	}

	#app .ap-home-h2,
	#app .ap-page-h2 {
		font-size: 1.05rem !important;
	}

	#app .ap-home-lead,
	#app .ap-home-text,
	#app .ap-page-lead,
	#app .ap-page-text {
		font-size: 13px !important;
		line-height: 1.55 !important;
	}

	#app .ap-home-cta,
	#app .ap-page-cta {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 8px !important;
		margin-top: 14px !important;
	}

	#app .ap-home-cta a,
	#app .ap-page-cta a {
		padding: 12px 10px !important;
		min-height: 64px;
		border-radius: 11px !important;
		-webkit-tap-highlight-color: transparent;
	}

	#app .ap-home-cta strong,
	#app .ap-page-cta strong {
		font-size: 12.5px !important;
	}

	#app .ap-home-cta span,
	#app .ap-page-cta span {
		font-size: 11px !important;
		margin-top: 3px !important;
	}

	#app .ap-seg-tabs,
	#app .aipick-picksters,
	#app .sticky .ap-league-tabs,
	#app .sticky .ap-sport-seg {
		flex-wrap: nowrap !important;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 6px !important;
		padding-bottom: 2px;
	}

	#app .ap-seg-tabs::-webkit-scrollbar,
	#app .aipick-picksters::-webkit-scrollbar,
	#app .sticky .ap-league-tabs::-webkit-scrollbar,
	#app .sticky .ap-sport-seg::-webkit-scrollbar {
		display: none;
	}

	#app .ap-seg-tabs a,
	#app .aipick-picksters a,
	#app .sticky .ap-league-tabs button,
	#app .sticky .ap-sport-seg button {
		flex: 0 0 auto;
		min-height: 36px;
		padding: 8px 12px !important;
		font-size: 12px !important;
	}

	#app .aipick-summary a {
		width: 100%;
		justify-content: space-between;
	}

	#app .aipick-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 8px !important;
	}

	#app .aipick-stat .val {
		font-size: 22px !important;
	}

	#app .aipick-match {
		font-size: 15px !important;
	}

	#app .ap-team-logo {
		width: 24px;
		height: 24px;
	}

	#app .aipick-match--detail .ap-team-logo {
		width: 30px;
		height: 30px;
	}

	#app .aipick-card {
		padding: 12px !important;
		margin-bottom: 8px !important;
	}

	#app .aipick-compare {
		grid-template-columns: 1fr !important;
	}

	#app .ap-home-faq {
		gap: 12px !important;
	}

	#app .ap-home-faq h3 {
		font-size: 13.5px !important;
	}

	#app .ap-home-faq p {
		font-size: 12.5px !important;
	}

	#app .ap-challenge-actions {
		flex-direction: column;
		margin-top: 14px !important;
	}

	#app .ap-challenge-btn {
		width: 100%;
		min-height: 44px;
		font-size: 13px !important;
	}

	#app .ap-challenge-steps li {
		padding: 10px !important;
		gap: 8px !important;
	}

	#app .ap-challenge-steps strong {
		font-size: 13px !important;
	}

	#app .ap-challenge-steps span {
		font-size: 12px !important;
	}

	#app .mySwiper1 .ap-side-card,
	#app .mySwiper2 .ap-side-card,
	#app .mySwiper1 .tab-group,
	#app .mySwiper2 .tab-group {
		padding: 12px !important;
	}

	#app .sticky .ap-ai-rate-row {
		grid-template-columns: 38px minmax(0, 1fr) auto !important;
		column-gap: 6px !important;
		min-height: 36px !important;
	}

	#app .sticky .ap-standing-head {
		flex-direction: column;
		align-items: flex-start !important;
		gap: 8px !important;
	}

	#app .sticky .ap-standing-table th,
	#app .sticky .ap-standing-table td {
		padding: 7px 3px !important;
		font-size: 11px !important;
	}

	#vivid-header,
	#vivid-fixed-header {
		background: rgba(24, 24, 27, 0.94) !important;
		border-bottom: 1px solid var(--ap-border) !important;
		backdrop-filter: blur(10px) !important;
		-webkit-backdrop-filter: blur(10px) !important;
	}

	#vivid-header a.logo.v-menu,
	#vivid-fixed-header a.logo.v-menu {
		font-size: 14px !important;
		font-weight: 800 !important;
		padding: 6px 10px !important;
		max-width: 48vw;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: var(--ap-text-strong) !important;
		background: var(--ap-border-soft) !important;
		border: 1px solid var(--ap-border) !important;
		border-radius: var(--ap-radius-ctl) !important;
		box-shadow: inset 0 -2px 0 var(--ap-blue);
		display: inline-flex !important;
		align-items: center;
		text-decoration: none !important;
	}

	#vivid-header .v-btn-login,
	#vivid-fixed-header .v-btn-login {
		padding: 7px 12px !important;
		font-size: 13px !important;
	}

	#vivid-sidebar .v-menu-side {
		border-radius: 8px;
		padding: 8px 6px !important;
	}

	#vivid-sidebar .v-menu-side.v-menu-active,
	#vivid-sidebar a.logo.v-menu {
		background: var(--ap-border-soft) !important;
		box-shadow: inset 0 -2px 0 var(--ap-blue);
	}
}

@supports (padding: max(0px)) {
	@media (max-width: 767.98px) {
		#app {
			padding-bottom: max(0px, env(safe-area-inset-bottom));
		}
		#vivid-header .w-full.mx-auto,
		#vivid-fixed-header .w-full.mx-auto {
			padding-left: max(12px, env(safe-area-inset-left)) !important;
			padding-right: max(12px, env(safe-area-inset-right)) !important;
		}
	}
}

/* ---------- Mobile stats drawer (overlay + widget parity with desktop sidebar) ---------- */
#ap-stats-drawer {
	z-index: 110 !important;
	background: var(--ap-bg, #18181b) !important;
	color: var(--ap-text, #e4e4e7);
}

#ap-stats-drawer .swiper-slide {
	display: block !important;
	height: auto !important;
	position: relative;
	overflow: hidden !important;
	box-sizing: border-box;
	width: 100% !important;
}

#ap-stats-drawer .swiper-slide::before {
	display: none !important;
	content: none !important;
}

#ap-stats-drawer .swiper.mySwiper2 {
	overflow: hidden !important;
	width: 100%;
}

#ap-stats-drawer .swiper.mySwiper2 .swiper-pagination {
	position: relative !important;
	bottom: 0 !important;
	margin-top: 8px;
}

#ap-stats-drawer .swiper-pagination-bullet {
	background: #52525b !important;
	opacity: 1;
}

#ap-stats-drawer .swiper-pagination-bullet-active {
	background: #a1a1aa !important;
}

#ap-stats-drawer .ap-side-more,
#ap-stats-drawer .ap-side-foot a,
#app .ap-mobile-sidebar .ap-side-more,
#app .ap-mobile-sidebar .ap-side-foot a {
	font-size: 11px !important;
	line-height: 1.2 !important;
	color: var(--ap-text-muted) !important;
	text-decoration: none;
	white-space: nowrap;
}

#ap-stats-drawer .ap-side-foot,
#app .ap-mobile-sidebar .ap-side-foot {
	display: flex;
	justify-content: flex-end;
	margin-top: 4px;
}

#ap-stats-drawer .ap-side-more:hover,
#ap-stats-drawer .ap-side-foot a:hover,
#app .ap-mobile-sidebar .ap-side-more:hover,
#app .ap-mobile-sidebar .ap-side-foot a:hover {
	color: var(--ap-text-strong) !important;
	text-decoration: underline;
}

#ap-stats-drawer .ap-rank-row,
#app .ap-mobile-sidebar .ap-rank-row {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 8px;
	min-height: 32px;
	padding: 5px 0;
	border-bottom: 1px solid var(--ap-border-soft);
}

#ap-stats-drawer .ap-rank-row:has(.ap-rank-num):has(.ap-rank-meta),
#app .ap-mobile-sidebar .ap-rank-row:has(.ap-rank-num):has(.ap-rank-meta) {
	grid-template-columns: 22px minmax(0, 1fr) auto auto;
}

#ap-stats-drawer .ap-rank-name-full,
#app .ap-mobile-sidebar .ap-rank-name-full {
	white-space: nowrap;
}

#ap-stats-drawer .ap-rank-name a,
#app .ap-mobile-sidebar .ap-rank-name a {
	color: inherit !important;
	text-decoration: none;
}

#ap-stats-drawer .ap-rank-num,
#app .ap-mobile-sidebar .ap-rank-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	border-radius: 4px;
	font-size: 11px !important;
	font-weight: 700 !important;
	color: var(--ap-text-muted) !important;
}

#ap-stats-drawer .ap-rank-num.is-top,
#app .ap-mobile-sidebar .ap-rank-num.is-top {
	color: #fbbf24 !important;
	background: rgba(251, 191, 36, 0.12);
}

#ap-stats-drawer .tab-content,
#ap-stats-drawer .tab-content a,
#ap-stats-drawer .tab-content li,
#ap-stats-drawer .tab-content span,
#app .ap-mobile-sidebar .tab-content,
#app .ap-mobile-sidebar .tab-content a,
#app .ap-mobile-sidebar .tab-content li,
#app .ap-mobile-sidebar .tab-content span {
	color: #cbd5e1;
}

#ap-stats-drawer .tab-content .mb-3,
#ap-stats-drawer .tab-content .mb-4,
#app .ap-mobile-sidebar .tab-content .mb-3,
#app .ap-mobile-sidebar .tab-content .mb-4 {
	margin-bottom: 0 !important;
}

#ap-stats-drawer .tab-group .font-bold,
#ap-stats-drawer .tab-group .text-base,
#ap-stats-drawer .tab-group h3,
#ap-stats-drawer .green,
#app .ap-mobile-sidebar .tab-group .font-bold,
#app .ap-mobile-sidebar .tab-group .text-base,
#app .ap-mobile-sidebar .tab-group h3,
#app .ap-mobile-sidebar .green {
	color: var(--ap-text-strong) !important;
}

#ap-stats-drawer section.px-3,
#app .ap-mobile-sidebar section.px-3 {
	background: var(--ap-bg) !important;
	border: 1px solid var(--ap-border) !important;
	border-radius: 14px !important;
	color: var(--ap-text) !important;
	padding: 12px !important;
}

#ap-stats-drawer .tab-group > .text-base,
#app .ap-mobile-sidebar .tab-group > .text-base {
	font-size: 13px !important;
	line-height: 1.35 !important;
	font-weight: 700 !important;
	color: var(--ap-text-strong) !important;
	letter-spacing: -0.02em;
	margin: 0 !important;
	padding: 0 !important;
}

/* ---------- Search results (aipick) ---------- */
#app .ap-search {
	color: var(--ap-text);
}

#app .ap-search-keyword {
	color: var(--ap-text-strong);
	font-weight: 800;
}

#app .ap-search-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 18px;
	padding: 14px;
	background: var(--ap-panel, rgba(255, 255, 255, 0.03));
	border: 1px solid var(--ap-border);
	border-radius: 14px;
}

#app .ap-search-form__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

#app .ap-search-form__row--query {
	flex-wrap: nowrap;
}

#app .ap-search-form .form-control,
#app .ap-search-form select.form-control,
#app .ap-search-form input.form-control {
	flex: 1 1 140px;
	min-width: 0;
	height: 40px !important;
	margin: 0 !important;
	background: var(--ap-bg) !important;
	border: 1px solid var(--ap-border) !important;
	color: var(--ap-text-strong) !important;
	border-radius: 10px !important;
	box-shadow: none !important;
}

#app .ap-search-form__sop {
	flex: 0 0 88px !important;
	width: 88px !important;
}

#app .ap-search-form__input {
	flex: 1 1 auto !important;
	width: auto !important;
}

#app .ap-search-form__submit {
	flex: 0 0 auto;
	height: 40px;
	padding: 0 16px !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	border-radius: 10px !important;
	white-space: nowrap;
}

#app .ap-search-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
}

#app .ap-search-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border-radius: 999px;
	border: 1px solid var(--ap-border);
	background: transparent;
	color: var(--ap-text) !important;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none !important;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#app .ap-search-tab span {
	color: var(--ap-muted, #94a3b8);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

#app .ap-search-tab:hover {
	border-color: var(--color-primary, #3182f6);
	color: var(--ap-text-strong) !important;
}

#app .ap-search-tab.is-active {
	background: rgba(49, 130, 246, 0.16);
	border-color: rgba(49, 130, 246, 0.55);
	color: var(--ap-text-strong) !important;
}

#app .ap-search-tab.is-active span {
	color: var(--color-primary, #60a5fa);
}

#app .ap-search-results {
	display: flex;
	flex-direction: column;
	gap: 0;
	border-top: 1px solid var(--ap-border);
}

#app .ap-search-item {
	display: flex;
	gap: 14px;
	padding: 16px 0;
	border-bottom: 1px solid var(--ap-border);
}

#app .ap-search-item__thumb {
	flex: 0 0 120px;
	width: 120px;
	height: 90px;
	overflow: hidden;
	border-radius: 10px;
	background: var(--ap-bg);
	border: 1px solid var(--ap-border);
}

#app .ap-search-item__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

#app .ap-search-item__body {
	flex: 1 1 auto;
	min-width: 0;
}

#app .ap-search-item__title {
	margin: 0 0 6px;
	padding: 0;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.02em;
}

#app .ap-search-item__title a {
	color: var(--ap-text-strong) !important;
	text-decoration: none !important;
}

#app .ap-search-item__title a:hover {
	color: var(--color-primary, #60a5fa) !important;
}

#app .ap-search-item__comments {
	display: inline-flex;
	align-items: center;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 999px;
	background: rgba(49, 130, 246, 0.18);
	color: var(--color-primary, #60a5fa);
	font-size: 12px;
	font-weight: 700;
	vertical-align: middle;
}

#app .ap-search-item__excerpt {
	margin: 0 0 8px;
	color: var(--ap-text);
	font-size: 13px;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

#app .ap-search-item__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin: 0;
	font-size: 12px;
	color: var(--ap-muted, #94a3b8);
}

#app .ap-search-item__meta a {
	color: inherit !important;
}

#app .ap-search-item__board {
	color: var(--color-primary, #60a5fa);
	font-weight: 700;
}

#app .ap-search-item__meta .bi {
	margin-right: 3px;
	opacity: 0.8;
}

#app .ap-search-empty {
	padding: 40px 12px;
	text-align: center;
	color: var(--ap-muted, #94a3b8);
	border-bottom: 1px solid var(--ap-border);
}

#app .ap-search-empty p {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ap-text-strong);
}

#app .ap-search-paging {
	margin-top: 18px;
	display: flex;
	justify-content: center;
}

#app .ap-search .highlight {
	background: rgba(49, 130, 246, 0.35) !important;
	color: var(--ap-text-strong) !important;
	border-radius: 3px;
	padding: 0 2px;
}

@media (max-width: 575.98px) {
	#app .ap-search-form__row--query {
		flex-wrap: wrap;
	}

	#app .ap-search-form__input {
		flex: 1 1 100% !important;
		width: 100% !important;
	}

	#app .ap-search-form__submit {
		width: 100%;
	}

	#app .ap-search-item__thumb {
		flex-basis: 88px;
		width: 88px;
		height: 66px;
	}

	#app .ap-search-item__title {
		font-size: 0.98rem;
	}
}