/* === Isamanru 폰트 (공고딕 라이트 기반) === */
@font-face {
	font-family: "Isamanru";
	src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicLight.woff") format("woff");
	font-weight: 300;
	font-display: swap;
}

/* ==========================================================================
   Reloj Main Page Styles (Phase 3.1.1 - 다크 통합 버전)
   - reloj-main 메인 파일이 활성일 때만 로드되므로, 이 파일이 사이트 전반의
     다크 테마 오버라이드를 담당
   - basic-main으로 돌리면 자동 무력화
   ========================================================================== */

/* ── 디자인 토큰 (전역) ───────────────────────────────────────────────────── */
:root {
	--reloj-body: #14142B;
	--reloj-bg-dark: #0d0d12;
	--reloj-bg-section: #24263A;
	--reloj-cmnbg: #31334E;
	--reloj-base: #65FF4B;
	--reloj-base2: #FFFB1F;
	--reloj-white: #ffffff;
	--reloj-whitesub: #d8d8e0;
	--reloj-border: #404A60;
	--reloj-danger: #ED5050;
}

/* ============================================================================
   1) 사이트 전반 다크 통일 (헤더/푸터/사이드바)
   ============================================================================ */

/* body / wrapper 배경 */
body, body.responsive {
	background: var(--reloj-body) !important;
	color: var(--reloj-whitesub) !important;
}
#thema_wrapper, .wrapper {
	background: var(--reloj-body) !important;
}

/* LNB (최상단 검정 바) */
.at-lnb {
	background: var(--reloj-bg-dark) !important;
	border-bottom: 1px solid var(--reloj-bg-section) !important;
}
.at-lnb a, .at-lnb a:visited {
	color: var(--reloj-whitesub) !important;
}
.at-lnb a:hover, .at-lnb a:focus {
	color: var(--reloj-base) !important;
}
.at-lnb b { color: var(--reloj-white) !important; }

/* PC 헤더 (로고 + 검색) */
.pc-header {
	background: var(--reloj-body) !important;
	border-bottom: 1px solid var(--reloj-bg-section) !important;
}
.pc-header .header-logo a,
.pc-header .header-logo a:hover {
	color: var(--reloj-white) !important;
}
.pc-header .header-desc {
	color: var(--reloj-whitesub) !important;
}
.pc-header .input-group .form-control {
	background: var(--reloj-bg-section) !important;
	color: var(--reloj-white) !important;
	border-color: var(--reloj-border) !important;
}
.pc-header .input-group .form-control::placeholder {
	color: var(--reloj-whitesub) !important;
}
.pc-header .input-group .btn {
	background: var(--reloj-cmnbg) !important;
	border-color: var(--reloj-border) !important;
	color: var(--reloj-white) !important;
}
.pc-header .basic-keyword .stx a,
.pc-header .basic-keyword .stx a:visited {
	color: var(--reloj-whitesub) !important;
}
.pc-header .basic-keyword .stx a:hover {
	color: var(--reloj-base) !important;
}
.pc-header .basic-keyword .sp { color: var(--reloj-border) !important; }

/* 모바일 헤더 */
.m-header {
	background: var(--reloj-body) !important;
	border-bottom: 1px solid var(--reloj-bg-section) !important;
}
.m-header a { color: var(--reloj-white) !important; }
.m-header b { color: var(--reloj-white) !important; }

/* 메뉴바 */
.at-menu, .pc-menu, .m-menu {
	background: var(--reloj-body) !important;
}
.pc-menu .nav-back {
	background: var(--reloj-bg-section) !important;
	border: none !important;
}
.pc-menu .menu-a, .pc-menu .menu-a:visited {
	color: var(--reloj-whitesub) !important;
}
.pc-menu .menu-a:hover, .pc-menu .nav-home.on .menu-a {
	color: var(--reloj-base) !important;
}
.pc-menu .nav-right ul li a {
	color: var(--reloj-whitesub) !important;
}
.pc-menu .nav-right ul li a:hover {
	color: var(--reloj-base) !important;
}

/* 모바일 메뉴 */
.m-menu .m-wrap {
	background: var(--reloj-body) !important;
	border-bottom: 1px solid var(--reloj-bg-section) !important;
}
.m-menu a { color: var(--reloj-whitesub) !important; }
.m-menu a:hover { color: var(--reloj-base) !important; }

/* at-body */
.at-body {
	background: var(--reloj-body) !important;
	padding: 0 !important;
	min-height: 60vh;
}

/* 푸터 */
.at-footer {
	background: var(--reloj-bg-dark) !important;
	border-top: 1px solid var(--reloj-bg-section) !important;
}
.at-footer .at-links {
	background: var(--reloj-body) !important;
	border-bottom: 1px solid var(--reloj-bg-section) !important;
}
.at-footer a, .at-footer a:visited,
.at-footer ul li a {
	color: var(--reloj-whitesub) !important;
}
.at-footer a:hover { color: var(--reloj-base) !important; }
.at-footer .at-copyright,
.at-footer .at-copyright strong { color: var(--reloj-whitesub) !important; }
.at-footer .fa-leaf, .at-footer .fa-copyright { color: var(--reloj-base) !important; }

/* 사이드바 */
#sidebar-box, #sidebar-content { background: var(--reloj-body) !important; }
#sidebar-box .div-title-underline-thin b,
#sidebar-box h3 { color: var(--reloj-white) !important; }
#sidebar-box a, #sidebar-box li, #sidebar-box span,
#sidebar-box .text-muted { color: var(--reloj-whitesub) !important; }
#sidebar-box a:hover { color: var(--reloj-base) !important; }
.sidebar-icon-tbl .light-circle { background: var(--reloj-cmnbg) !important; }
.sidebar-head.bg-navy { background: var(--reloj-cmnbg) !important; }
.btn-navy { background: var(--reloj-cmnbg) !important; border-color: var(--reloj-border) !important; }

/* go top/bottom 버튼 */
.go-btn { background: var(--reloj-cmnbg) !important; }
.go-btn span { color: var(--reloj-white) !important; }


/* ============================================================================
   2) Reloj 메인 페이지 본문 영역 (.reloj-page)
   ============================================================================ */
.reloj-page {
	background: var(--reloj-body);
	color: var(--reloj-white);
	font-family: "Isamanru", sans-serif;
	margin: 0;
	padding: 0;
	width: 100%;
}

/* BS3 충돌 방지 */
.reloj-page h1, .reloj-page h2, .reloj-page h3,
.reloj-page h4, .reloj-page h5, .reloj-page h6 {
	color: var(--reloj-white);
	font-family: "Isamanru", sans-serif;
	margin-top: 0;
}
.reloj-page a, .reloj-page a:hover, .reloj-page a:focus { text-decoration: none; }
.reloj-page p { margin: 0 0 16px; color: var(--reloj-whitesub); }
.reloj-page ul { padding: 0; margin: 0; list-style: none; }
.reloj-page img { max-width: 100%; height: auto; }

/* 유틸리티 */
.reloj-page .d-flex { display: flex; }
.reloj-page .d-block { display: block; }
.reloj-page .d-inline-block { display: inline-block; }
.reloj-page .flex-wrap { flex-wrap: wrap; }
.reloj-page .align-items-center { align-items: center; }
.reloj-page .justify-content-between { justify-content: space-between; }
.reloj-page .justify-content-center { justify-content: center; }
.reloj-page .gap-2 { gap: 8px; }
.reloj-page .gap-3 { gap: 12px; }
.reloj-page .position-relative { position: relative; }
.reloj-page .position-absolute { position: absolute; }
.reloj-page .w-100 { width: 100%; }
.reloj-page .text-center { text-align: center; }

.reloj-page .mb-8 { margin-bottom: 8px; }
.reloj-page .mb-12 { margin-bottom: 12px; }
.reloj-page .mb-16 { margin-bottom: 16px; }
.reloj-page .mb-24 { margin-bottom: 24px; }
.reloj-page .mb-32 { margin-bottom: 32px; }
.reloj-page .mb-40 { margin-bottom: 40px; }
.reloj-page .pt-80 { padding-top: 80px; }
.reloj-page .pb-80 { padding-bottom: 80px; }
.reloj-page .pt-120 { padding-top: 120px; }
.reloj-page .pb-120 { padding-bottom: 120px; }
.reloj-page .p-8 { padding: 8px; }

.reloj-page .fs-14 { font-size: 14px; }
.reloj-page .fs-16 { font-size: 16px; }
.reloj-page .fs-18 { font-size: 18px; }
.reloj-page .fs-20 { font-size: 20px; }

.reloj-page .fw-400 { font-weight: 400; }
.reloj-page .fw-500 { font-weight: 500; }
.reloj-page .fw-600 { font-weight: 600; }
.reloj-page .fw-700 { font-weight: 700; }

.reloj-page .round8 { border-radius: 8px; }
.reloj-page .round12 { border-radius: 12px; }
.reloj-page .round16 { border-radius: 16px; }
.reloj-page .round100 { border-radius: 100px; }

.reloj-page .white { color: var(--reloj-white); }
.reloj-page .whitesub { color: var(--reloj-whitesub); }
.reloj-page .base { color: var(--reloj-base); }
.reloj-page .base2 { color: var(--reloj-base2); }

/* 헤딩 */
.reloj-page h1 {
	font-size: 64px; font-weight: 600; line-height: 1.2; color: var(--reloj-white);
}
@media (max-width: 991px) { .reloj-page h1 { font-size: 48px; } }
@media (max-width: 575px) { .reloj-page h1 { font-size: 32px; } }
.reloj-page h2 {
	font-size: 40px; line-height: 1.2; font-weight: 600; color: var(--reloj-white);
}
@media (max-width: 575px) { .reloj-page h2 { font-size: 28px; } }
.reloj-page h4 {
	font-size: 22px; font-weight: 600; line-height: 1.3;
}


/* ============================================================================
   3) Hero Banner Swiper
   ============================================================================ */
.reloj-page .banner__v1 {
	width: 100%;
	margin: 0;
	padding: 0;
	background: var(--reloj-body);
}
.reloj-page .bn__sliderwrap {
	width: 100%;
	overflow: hidden;
}
.reloj-page .banner__slide {
	min-height: 600px;
	display: flex !important;
	align-items: center;
	position: relative;
	color: var(--reloj-white);
}
.reloj-page .banner__slide::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(20,20,43,0.85) 0%, rgba(20,20,43,0.3) 100%);
	z-index: 0;
}
.reloj-page .banner__slide > .container {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 30px;
	width: 100%;
}
.reloj-page .banner__slide .bn__content__v1 { max-width: 720px; }

.reloj-page .bn__thumb1 { background: url('../assets/reloj/img/bn/bnslide1.jpg?v=20260503') no-repeat center center / cover; }
.reloj-page .bn__thumb2 { background: url('../assets/reloj/img/bn/bnslide2.jpg?v=20260503') no-repeat center center / cover; }
.reloj-page .bn__thumb3 { background: url('../assets/reloj/img/bn/bnslide3.jpg?v=20260503') no-repeat center center / cover; }
.reloj-page .bn__thumb4 { background: url('../assets/reloj/img/bn/bnslide4.jpg?v=20260503') no-repeat center center / cover; }
.reloj-page .bn__thumb5 { background: url('../assets/reloj/img/bn/bnslide5.jpg?v=20260503') no-repeat center center / cover; }
.reloj-page .bn__thumb6 { background: url('../assets/reloj/img/bn/bnslide6.jpg?v=20260503') no-repeat center center / cover; }

@media (max-width: 991px) { .reloj-page .banner__slide { min-height: 500px; padding: 80px 0; } }
@media (max-width: 575px) { .reloj-page .banner__slide { min-height: 400px; padding: 60px 0; } }

/* Live 배지 */
.reloj-page .live__badge {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	background: var(--reloj-danger);
	color: var(--reloj-white) !important;
	padding: 8px 14px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none !important;
}
.reloj-page .live__badge .material-symbols-outlined { font-size: 18px; }

/* CMN 버튼 (라이브 보기) */
.reloj-page .cmn--btn {
	display: inline-block;
	background: linear-gradient(94deg, #65FF4B 0%, #FFFB1F 100%);
	color: #14142B !important;
	font-weight: 600;
	font-size: 16px;
	padding: 14px 32px;
	border-radius: 8px;
	transition: opacity .2s, transform .2s;
}
.reloj-page .cmn--btn:hover {
	opacity: 0.9;
	transform: translateY(-2px);
	color: #14142B !important;
}
.reloj-page .cmn--btn span { display: inline-block; }

/* Swiper 네비게이션 */
.reloj-page .bn__sliderwrap .swiper-button-prev,
.reloj-page .bn__sliderwrap .swiper-button-next {
	width: 48px;
	height: 48px;
	background: rgba(255,255,255,0.15);
	border-radius: 50%;
	color: var(--reloj-white);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.reloj-page .bn__sliderwrap .swiper-button-prev::after,
.reloj-page .bn__sliderwrap .swiper-button-next::after {
	font-size: 18px;
	font-weight: bold;
}
.reloj-page .bn__sliderwrap .swiper-button-prev:hover,
.reloj-page .bn__sliderwrap .swiper-button-next:hover {
	background: var(--reloj-base);
	color: #14142B;
}


/* ============================================================================
   4) Section Common (제목 + 화살표)
   ============================================================================ */
.reloj-page .reloj__section {
	padding: 60px 0;
	background: var(--reloj-body);
}
.reloj-page .reloj__section > .container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 30px;
	width: 100%;
}
.reloj-page .section__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 32px;
	flex-wrap: wrap;
	gap: 12px;
}
.reloj-page .section__title h2 { margin: 0; }
.reloj-page .section__nav { display: flex; gap: 8px; }
.reloj-page .section__nav a {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	background: var(--reloj-cmnbg);
	border-radius: 8px;
	color: var(--reloj-white) !important;
	transition: all .2s;
	text-decoration: none !important;
}
.reloj-page .section__nav a:hover {
	background: var(--reloj-base);
	color: #14142B !important;
}


/* ============================================================================
   5) Recent Live 카드 (APMS basic-post-gallery 위젯 wrapper)
   ============================================================================ */
.reloj-page .recent__livewrap > [id^="basic-"],
.reloj-page .recent__livewrap > [id]:not(.recent__livewrap) {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin: 0 !important;
}
.reloj-page .recent__livewrap .basic-post-gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin: 0 !important;
}
@media (max-width: 1199px) { .reloj-page .recent__livewrap .basic-post-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .reloj-page .recent__livewrap .basic-post-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .reloj-page .recent__livewrap .basic-post-gallery { grid-template-columns: repeat(1, 1fr); } }

/* APMS 위젯 카드 → Reloj 다크 카드로 오버라이드 */
.reloj-page .recent__livewrap .post-row {
	width: auto !important;
	margin: 0 !important;
}
.reloj-page .recent__livewrap .post-list {
	margin: 0 !important;
	background: var(--reloj-cmnbg);
	border-radius: 16px;
	padding: 8px;
	transition: transform .2s, box-shadow .2s;
}
.reloj-page .recent__livewrap .post-list:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(0,0,0,0.4);
}
.reloj-page .recent__livewrap .post-image .img-wrap {
	border-radius: 12px;
	overflow: hidden;
}
.reloj-page .recent__livewrap .post-content { padding: 16px 8px 8px; }
.reloj-page .recent__livewrap .post-subject a {
	color: var(--reloj-white) !important;
	font-size: 18px;
	font-weight: 600;
}
.reloj-page .recent__livewrap .post-subject a:hover { color: var(--reloj-base) !important; }
.reloj-page .recent__livewrap .post-text,
.reloj-page .recent__livewrap .post-ko {
	color: var(--reloj-whitesub) !important;
	font-size: 14px;
}
.reloj-page .recent__livewrap .rank-icon {
	background: var(--reloj-danger) !important;
	color: var(--reloj-white) !important;
	padding: 4px 10px !important;
	border-radius: 6px !important;
	font-size: 12px !important;
}

/* "등록된 글이 없습니다" */
.reloj-page .recent__livewrap .post-none {
	grid-column: 1 / -1;
	text-align: center;
	padding: 60px 20px;
	background: var(--reloj-cmnbg);
	border-radius: 16px;
	color: var(--reloj-whitesub);
}

/* APMS 위젯설정 버튼 (관리자만 보임) */
.reloj-page .btn-wset {
	grid-column: 1 / -1;
	text-align: center;
	padding: 12px 0 0;
}
.reloj-page .btn-wset a { color: var(--reloj-whitesub) !important; }


/* ============================================================================
   6) BS3 기본 헤더 숨기기 (Reloj 자체 헤더로 교체하므로)
   ============================================================================ */
.at-lnb,
.pc-header,
.m-header,
.at-menu,
.pc-menu-all {
	display: none !important;
}

/* 본문 영역에 사이드바 폭만큼 좌측 여백 (PC) */
@media (min-width: 1200px) {
	#thema_wrapper.wrapper {
		padding-left: 300px;
	}
	.reloj-topbar {
		left: 300px;
		display: none !important;
	}
}
@media (max-width: 1199px) {
	#thema_wrapper.wrapper {
		padding-left: 0;
	}
	.reloj-topbar { left: 0 !important; }
}

/* 탑바 높이만큼 본문 padding-top */
.at-body { padding-top: 0px !important; }

/* ============================================================================
   7) Reloj 사이드바 (좌측 고정) + 탑바
   - Reloj 원본 main.css 1811~2480에서 추출, --reloj-* 변수로 매핑
   ============================================================================ */
.reloj-header-attach {
	position: relative;
	z-index: 99;
}
.reloj-header-attach .container-fluid { padding: 0; }
.reloj-header-attach > .d-flex { display: flex; align-items: stretch; }

/* 좌측 사이드바 */
.sidebar-wrapper {
	width: 300px;
	min-height: 100vh;
	background: var(--reloj-cmnbg);
	padding: 24px;
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	z-index: 999;
	overflow-y: auto;
	transition: transform 0.3s ease;
}
.sidebar-wrapper::-webkit-scrollbar { width: 4px; }
.sidebar-wrapper::-webkit-scrollbar-track { background: transparent; }
.sidebar-wrapper::-webkit-scrollbar-thumb { background: var(--reloj-border); border-radius: 4px; }

.sidebar-wrapper .bborder {
	border-bottom: 1px solid var(--reloj-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 24px;
	margin-bottom: 24px;
}
.sidebar-wrapper .logo img { max-height: 36px; display: block; }
.sidebar-wrapper .closebtn { display: none; }
.sidebar-wrapper .closebtn .bgt {
	background: transparent;
	border: none;
	color: var(--reloj-white);
	cursor: pointer;
	padding: 0;
}

/* 로그인/채팅 퀵 버튼 — 로고와 메뉴 사이, 위/아래 ㅡ 라인으로 구분 */
.sidebar-wrapper .sidebar-quick {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	border-bottom: 1px solid var(--reloj-border);
	padding-bottom: 16px;
	margin-bottom: 16px;
	margin-top: -8px;
}
.sidebar-wrapper .sidebar-quick__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: transparent;
	border: 1px solid var(--reloj-border);
	color: var(--reloj-whitesub);
	padding: 9px 8px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none !important;
	transition: all 0.2s;
	line-height: 1;
}
.sidebar-wrapper .sidebar-quick__btn:hover {
	background: var(--reloj-bg-section);
	color: var(--reloj-base);
	border-color: var(--reloj-base);
}
.sidebar-wrapper .sidebar-quick__btn .material-symbols-outlined { font-size: 18px; }

.sidebar-wrapper .sidebar__menu { list-style: none; padding: 0; margin: 0; }
.sidebar-wrapper .sidebar__menu li { padding: 0; margin: 0; }
.sidebar-wrapper .sidebar__menu li:not(:last-child) { margin-bottom: 4px; }
.sidebar-wrapper .sidebar__menu li > a,
.sidebar-wrapper .sidebar__menu li > span > a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	color: var(--reloj-whitesub) !important;
	font-size: 16px;
	font-weight: 500;
	border-radius: 8px;
	transition: all 0.2s;
	text-decoration: none !important;
}
.sidebar-wrapper .sidebar__menu li > a:hover,
.sidebar-wrapper .sidebar__menu li > span > a:hover,
.sidebar-wrapper .sidebar__menu li.active > a,
.sidebar-wrapper .sidebar__menu li.active > span > a {
	background: var(--reloj-bg-section);
	color: var(--reloj-base) !important;
}
.sidebar-wrapper .sidebar__menu li .material-symbols-outlined { font-size: 22px; }
.sidebar-wrapper .sidebar__menu li .click__title { display: flex; align-items: center; gap: 8px; }
.sidebar-wrapper .sidebar__menu li .mclick {
	width: 100%;
	justify-content: space-between !important;
}
.sidebar-wrapper .sidebar__menu li .plus,
.sidebar-wrapper .sidebar__menu li .minus { font-size: 18px; transition: transform 0.2s; }
.sidebar-wrapper .sidebar__menu li.liclick .minus { display: none; }
.sidebar-wrapper .sidebar__menu li.liclick.open .plus { display: none; }
.sidebar-wrapper .sidebar__menu li.liclick.open .minus { display: inline-block; }

.sidebar-wrapper .sidebar__menu .menucontent {
	display: none;
	padding: 4px 0 4px 24px;
}
.sidebar-wrapper .sidebar__menu li.liclick.open .menucontent,
.sidebar-wrapper .sidebar__menu li.liclick.on .menucontent,
.sidebar-wrapper .sidebar__menu li.liclick.active .menucontent { display: block; }
.sidebar-wrapper .sidebar__menu .menucontent ul { list-style: none; padding: 0; margin: 0; }
.sidebar-wrapper .sidebar__menu .menucontent li a {
	font-size: 14px;
	padding: 8px 12px;
	gap: 8px;
}
.sidebar-wrapper .sidebar__menu .menucontent li a .material-symbols-outlined { font-size: 18px; }

.sidebar-wrapper .logout__btn {
	margin-top: 24px;
	background: transparent;
	border: 1px solid var(--reloj-border);
	color: var(--reloj-whitesub);
	padding: 10px 16px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	width: 100%;
	transition: all 0.2s;
}
.sidebar-wrapper .logout__btn:hover {
	background: var(--reloj-danger);
	border-color: var(--reloj-danger);
	color: var(--reloj-white);
}

/* 모바일에서 사이드바 슬라이드 */
@media (max-width: 1199px) {
	.sidebar-wrapper {
		transform: translateX(-100%);
		box-shadow: 4px 0 24px rgba(0,0,0,0.5);
	}
	.sidebar-wrapper.active { transform: translateX(0); }
	.sidebar-wrapper .closebtn { display: block; }
}

/* 사이드바 마스크 (모바일에서 사이드바 열렸을 때) */
.reloj-sidebar-mask {
	display: none;
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.6);
	z-index: 998;
}
.reloj-sidebar-mask.active { display: block; }

/* 탑바 (사이드바 우측 영역) */
.reloj-topbar {
	position: fixed;
	top: 0;
	right: 0;
	left: 300px;
	height: 88px;
	background: var(--reloj-body);
	border-bottom: 1px solid var(--reloj-bg-section);
	padding: 0 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 100;
	gap: 16px;
}
.reloj-topbar .topbar-left { display: flex; align-items: center; gap: 16px; flex: 1; }
.reloj-topbar .topbar-right { display: flex; align-items: center; gap: 16px; }

/* 모바일 햄버거 */
.reloj-topbar .hamburger {
	display: none;
	background: var(--reloj-cmnbg);
	border: none;
	color: var(--reloj-white);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	cursor: pointer;
	align-items: center;
	justify-content: center;
}
.reloj-topbar .hamburger .material-symbols-outlined { font-size: 22px; }
@media (max-width: 1199px) {
	.reloj-topbar .hamburger { display: inline-flex; }
}

/* 탑바 검색 폼 */
.reloj-topbar .topbar-search {
	display: flex;
	align-items: center;
	background: var(--reloj-cmnbg);
	border-radius: 100px;
	padding: 6px 6px 6px 20px;
	max-width: 360px;
	flex: 1;
}
.reloj-topbar .topbar-search input {
	border: none;
	background: transparent;
	color: var(--reloj-white);
	flex: 1;
	outline: none;
	font-size: 14px;
	min-width: 0;
}
.reloj-topbar .topbar-search input::placeholder { color: var(--reloj-whitesub); }
.reloj-topbar .topbar-search button {
	background: var(--reloj-base);
	border: none;
	color: #14142B;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* 탑바 우측 아이콘 (알림, 프로필) */
.reloj-topbar .icon-btn {
	background: var(--reloj-cmnbg);
	border: none;
	color: var(--reloj-white);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	text-decoration: none !important;
}
.reloj-topbar .icon-btn:hover { background: var(--reloj-base); color: #14142B; }
.reloj-topbar .icon-btn .badge-dot {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 8px;
	height: 8px;
	background: var(--reloj-danger);
	border-radius: 50%;
}

.reloj-topbar .profile-btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--reloj-cmnbg);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--reloj-white);
	font-size: 18px;
}
.reloj-topbar .profile-btn img { width: 100%; height: 100%; object-fit: cover; }


/* ============================================================================
   8) Sidebar Collapse Toggle (PC에서 X 버튼으로 70px 미니 모드)
   ============================================================================ */
@media (min-width: 1200px) {
	/* PC에서 close(X) 버튼 표시 */
	.sidebar-wrapper .closebtn {
		display: block;
	}
	.sidebar-wrapper .closebtn .bgt {
		background: var(--reloj-bg-section);
		border: none;
		color: var(--reloj-white);
		width: 32px;
		height: 32px;
		border-radius: 50%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: all 0.2s;
	}
	.sidebar-wrapper .closebtn .bgt:hover {
		background: var(--reloj-base);
		color: #14142B;
	}
	.sidebar-wrapper .closebtn .bgt i { font-size: 18px; }

	/* === Collapsed 상태 === */
	body.reloj-sidebar-collapsed #thema_wrapper.wrapper {
		padding-left: 70px;
	}
	body.reloj-sidebar-collapsed .reloj-topbar {
		left: 70px;
	}
	body.reloj-sidebar-collapsed .sidebar-wrapper {
		width: 70px;
		padding: 16px 8px;
	}
	body.reloj-sidebar-collapsed .sidebar-wrapper .bborder {
		justify-content: center;
		padding-bottom: 12px;
		margin-bottom: 12px;
	}
	body.reloj-sidebar-collapsed .sidebar-wrapper .logo,
	body.reloj-sidebar-collapsed .sidebar-wrapper .logout__btn,
	body.reloj-sidebar-collapsed .sidebar-wrapper .menucontent {
		display: none !important;
	}
	body.reloj-sidebar-collapsed .sidebar-wrapper .sidebar__menu li > a,
	body.reloj-sidebar-collapsed .sidebar-wrapper .sidebar__menu li > span > a {
		justify-content: center;
		padding: 12px 0;
		gap: 0;
	}
	/* collapse 시 펼침메뉴(.mclick)의 아이콘 가운데 정렬 강제 (+/- 자리 때문에 밀리는 문제 해결) */
	body.reloj-sidebar-collapsed .sidebar-wrapper .sidebar__menu .mclick {
		justify-content: center !important;
		gap: 0 !important;
	}

	body.reloj-sidebar-collapsed .sidebar-wrapper .sidebar__menu .click__title {
		gap: 0 !important;
		justify-content: center !important;
		width: auto !important;
	}
	/* collapse 시 메뉴 텍스트 + (+/-) 표시 영역 모두 숨김 */
	body.reloj-sidebar-collapsed .sidebar-wrapper .menu-text,
	body.reloj-sidebar-collapsed .sidebar-wrapper .sidebar__menu li > span > a .click__title:nth-child(2) {
		display: none !important;
	}
	body.reloj-sidebar-collapsed .sidebar-wrapper .sidebar__menu li > span > a .click__title:first-child {
		gap: 0;
	}
	/* X 아이콘 → 햄버거 변경은 JS에서 textContent로 처리 (ligature 폰트 특성) */

	/* collapse 시 로그인/채팅 퀵 버튼 — 가로 2열 → 세로 1열 스택 */
	body.reloj-sidebar-collapsed .sidebar-wrapper .sidebar-quick {
		grid-template-columns: 1fr;
		gap: 6px;
	}
	body.reloj-sidebar-collapsed .sidebar-wrapper .sidebar-quick__btn {
		padding: 9px 0;
	}
}

/* ============================================================================
   9) 탑바 Browse 드롭다운
   ============================================================================ */
.reloj-topbar .browse-dropdown {
	position: relative;
}
.reloj-topbar .browse-dropdown > a.browse-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	background: var(--reloj-cmnbg);
	color: var(--reloj-white) !important;
	border-radius: 100px;
	text-decoration: none !important;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.2s;
	cursor: pointer;
}
.reloj-topbar .browse-dropdown > a.browse-toggle:hover {
	background: var(--reloj-base);
	color: #14142B !important;
}
.reloj-topbar .browse-dropdown > a.browse-toggle .hoverround {
	font-size: 20px;
}
.reloj-topbar .browse-dropdown > a.browse-toggle .browse-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.reloj-topbar .browse-dropdown .addedicon,
.reloj-topbar .browse-dropdown .minusicon { font-size: 16px; transition: transform 0.2s; }
.reloj-topbar .browse-dropdown .minusicon { display: none; }
.reloj-topbar .browse-dropdown.open .addedicon { display: none; }
.reloj-topbar .browse-dropdown.open .minusicon { display: inline-block; }

/* 드롭다운 패널 */
.reloj-topbar .browse-dropdown .sub-menu {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 240px;
	background: var(--reloj-cmnbg);
	border-radius: 12px;
	padding: 8px;
	box-shadow: 0 12px 32px rgba(0,0,0,0.5);
	list-style: none;
	margin: 0;
	z-index: 200;
}
.reloj-topbar .browse-dropdown.open .sub-menu { display: block; }
.reloj-topbar .browse-dropdown .sub-menu li { padding: 0; }
.reloj-topbar .browse-dropdown .sub-menu li a {
	display: flex !important;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	color: var(--reloj-whitesub) !important;
	font-size: 14px;
	font-weight: 500;
	border-radius: 8px;
	text-decoration: none !important;
	transition: all 0.2s;
}
.reloj-topbar .browse-dropdown .sub-menu li a:hover {
	background: var(--reloj-bg-section);
	color: var(--reloj-base) !important;
}
.reloj-topbar .browse-dropdown .sub-menu li a .material-symbols-outlined { font-size: 18px; }

/* 모바일에선 Browse 드롭다운 숨김 (사이드바에서 사용) */
@media (max-width: 767px) {
	.reloj-topbar .browse-dropdown { display: none; }
}


/* ============================================================================
   10) Reloj 푸터 (BS3 .at-footer 숨기고 자체 푸터 사용)
   ============================================================================ */
.at-footer {
	display: none !important;
}

.reloj-footer {
	background: var(--reloj-bg-dark);
	border-top: 1px solid var(--reloj-bg-section);
	padding: 32px 24px;
	margin-top: 60px;
}
.reloj-footer .footer__bottom {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 24px;
	max-width: 1400px;
	margin: 0 auto;
	justify-content: space-between;
}
.reloj-footer p {
	color: var(--reloj-whitesub);
	font-size: 14px;
	margin: 0;
}
.reloj-footer p a {
	color: var(--reloj-base);
	text-decoration: none !important;
}
.reloj-footer p a:hover { color: var(--reloj-base2); }
.reloj-footer p a.base2 { color: var(--reloj-base2); }
.reloj-footer p a.base2:hover { color: var(--reloj-base); }

.reloj-footer .social {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.reloj-footer .social li a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--reloj-cmnbg);
	color: var(--reloj-whitesub) !important;
	transition: all 0.2s;
	text-decoration: none !important;
}
.reloj-footer .social li a:hover {
	background: var(--reloj-base);
	color: #14142B !important;
}
.reloj-footer .social li a i { font-size: 14px; }

.reloj-footer .help__support {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.reloj-footer .help__support li a {
	color: var(--reloj-whitesub) !important;
	font-size: 14px;
	text-decoration: none !important;
	transition: color 0.2s;
}
.reloj-footer .help__support li a:hover { color: var(--reloj-base) !important; }

@media (max-width: 991px) {
	.reloj-footer .footer__bottom {
		flex-direction: column;
		text-align: center;
		gap: 16px;
	}
}


/* ============================================================================
   11) Reloj 원본 변수 alias (.reloj-page 스코프 내에서 var(--base) 등을 매핑)
   ============================================================================ */
.reloj-page {
	/* Reloj 원본 main.css가 사용하는 변수명을 우리 네임스페이스로 alias */
	--base: var(--reloj-base);
	--base2: var(--reloj-base2);
	--white: var(--reloj-white);
	--whitesub: var(--reloj-whitesub);
	--body: var(--reloj-body);
	--cmnbg: var(--reloj-cmnbg);
	--bgsection: var(--reloj-bg-section);
	--hover: var(--reloj-cmnbg);
	--teamborder: var(--reloj-border);
	--pricieborder: var(--reloj-border);
	--base2border: var(--reloj-border);
	--danger: var(--reloj-danger);
	--ratting: #FFBE57;
	--success: #3FCA90;
	--success2: #2E7D32;
	--pra: #576071;
	--subtitle: #14142B;
	--title: #121519;
	--placeholder: #B2B6BF;
	--border: #DFE0E4;
}

/* ============================================================================
   12) Reloj 섹션/카드 CSS (원본 main.css에서 추출, .reloj-page 스코프)
   ============================================================================ */
.reloj-page .live__badge {
  padding: 5px 14px;
  background: var(--base2);
  color: var(--subtitle);
  font-size: 16px;
  border-radius: 100px;
  font-weight: 700;
  justify-content: center;
  align-items: center;
  display: flex;
  gap: 4px;
}
.reloj-page .live__badge i {
  font-size: 20px;
}
.reloj-page .live__badge:hover {
  color: var(--subtitle);
}
.reloj-page .live__badge:hover i {
  color: var(--subtitle);
}

.reloj-page .live__date {
  padding: 4px 12px 4px;
  background: var(--base);
  color: var(--subtitle);
  font-size: 16px;
  border-radius: 100px;
  font-weight: 600;
  justify-content: center;
  align-items: center;
  display: flex;
  gap: 4px;
}
.reloj-page .live__date i {
  font-size: 20px;
}
.reloj-page .live__date:hover {
  color: var(--subtitle);
}
.reloj-page .live__date:hover i {
  color: var(--subtitle);
}

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px var(--theme-bg);
  border-radius: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--base);
  border-radius: 10px;
}

.reloj-page .twitter {
  background: var(--secoundary-color) !important;
}

.reloj-page .twitch {
  background: rgb(110, 60, 210) !important;
}

.reloj-page .youtube {
  background: rgb(172, 46, 46) !important;
}

.reloj-page .insta {
  background: rgb(207, 93, 93) !important;
}

.reloj-page .lind {
  background: rgb(78, 131, 228) !important;
}

.reloj-page .face {
  background: rgb(27, 114, 244) !important;
}

.reloj-page .owl-nav .owl-prev:hover {
  background: transparent;
}
.reloj-page .owl-nav .owl-prev:hover i {
  background: var(--hover);
  color: var(--white);
}
.reloj-page .owl-nav .owl-prev i {
  background: var(--white);
  width: 40px;
  height: 40px;
  border: 1px solid var(--hover);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--base);
}
.reloj-page .owl-nav .owl-next:hover {
  background: transparent;
}
.reloj-page .owl-nav .owl-next:hover i {
  background: var(--hover);
  color: var(--white);
}
.reloj-page .owl-nav .owl-next i {
  background: var(--white);
  width: 40px;
  height: 40px;
  border: 1px solid var(--hover);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--base);
}

.reloj-page .bn__navigation {
  position: absolute;
  right: 40px;
  bottom: 40px;
  gap: 12px;
  z-index: 999;
}
.reloj-page .bn__navigation .cmn-button-next {
  min-width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--title);
  background: var(--white);
  position: initial;
  transition: all 0.4s;
}
.reloj-page .bn__navigation .cmn-button-next::after {
  display: none;
}
.reloj-page .bn__navigation .cmn-button-next i {
  font-size: 28px;
}
.reloj-page .bn__navigation .cmn-button-next:hover {
  background: linear-gradient(94deg, #65FF4B 0%, #FFFB1F 100%);
}
@media (max-width: 767px) {
.reloj-page .bn__navigation .cmn-button-next {
    min-width: 38px;
    height: 38px;
  }
}
.reloj-page .bn__navigation .cmn-button-prev {
  min-width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--title);
  background: var(--white);
  position: initial;
  transition: all 0.4s;
}
.reloj-page .bn__navigation .cmn-button-prev::after {
  display: none;
}
.reloj-page .bn__navigation .cmn-button-prev i {
  font-size: 28px;
}
.reloj-page .bn__navigation .cmn-button-prev:hover {
  background: linear-gradient(94deg, #65FF4B 0%, #FFFB1F 100%);
}
@media (max-width: 767px) {
.reloj-page .bn__navigation .cmn-button-prev {
    min-width: 38px;
    height: 38px;
  }
}
.reloj-page .bn__navigation .cmn-pagination {
  position: initial;
  display: flex;
  align-items: center;
  gap: 8px;
}
.reloj-page .bn__navigation .cmn-pagination .swiper-pagination-bullet {
  background: var(--white);
  height: 12px;
  width: 12px;
  margin: 0;
  opacity: 1;
}
.reloj-page .bn__navigation .cmn-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: linear-gradient(94deg, #65FF4B 0%, #FFFB1F 100%);
  width: 28px;
  height: 12px;
  border-radius: 100px;
}
@media (max-width: 767px) {
.reloj-page .bn__navigation {
    bottom: 15px;
    right: 15px;
  }
}

.reloj-page .cmn-pagination {
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.reloj-page .cmn-pagination .swiper-pagination-bullet {
  background: var(--white);
  height: 12px;
  width: 12px;
  margin: 0;
  opacity: 1;
}
.reloj-page .cmn-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: linear-gradient(94deg, #65FF4B 0%, #FFFB1F 100%);
  width: 28px;
  height: 12px;
  border-radius: 100px;
}

.reloj-page .cmn__paginationtwo {
  z-index: 99;
}
.reloj-page .cmn__paginationtwo .swiper-pagination-bullet {
  background: rgba(101, 255, 75, 0.3);
  height: 12px;
  width: 12px;
  margin: 0;
  opacity: 1;
}
.reloj-page .cmn__paginationtwo .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: linear-gradient(94deg, #65FF4B 0%, #FFFB1F 100%);
  width: 28px;
  height: 12px;
  border-radius: 100px;
}

.reloj-page .preloader__wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  background: rgba(6, 4, 4, 0.874);
  position: fixed;
  width: 100%;
  height: 100%;
}
.reloj-page .preloader__wrap .preloader__box {
  position: relative;
  z-index: 1;
}
.reloj-page .preloader__wrap .preloader__box .circle {
  animation: round2 4s linear infinite;
}
.reloj-page .preloader__wrap .preloader__box .recharge {
  position: absolute;
  top: 10px;
  width: 35px;
  left: 45%;
  transform: translateX(-50%);
  animation: city 3s linear infinite;
}
.reloj-page .preloader__wrap .preloader__box .recharge img {
  width: 100%;
}
.reloj-page .preloader__wrap .preloader__box .pretext {
  text-transform: uppercase;
  font-weight: 500;
  font-size: 16px;
  color: var(--base);
  margin-top: 50px;
  display: block;
}

.reloj-page .video__style {
  width: 40px;
  height: 40px;
  background: linear-gradient(94deg, #65FF4B 0%, #FFFB1F 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reloj-page .video__style i {
  font-size: 26px;
  color: var(--title);
}


.reloj-page .banner__v1 {
  padding-top: 80px;
}

.reloj-page .bn__content__v1 {
  position: relative;
}
.reloj-page .bn__content__v1 .live__badge {
  width: 79px;
}
@media (max-width: 575px) {
.reloj-page .bn__content__v1 .title {
    color: var(--white);
  }
}
@media (min-width: 1400px) and (max-width: 1600px) {
.reloj-page .bn__content__v1 h1 {
    font-size: 48px;
  }
}
@media (max-width: 767px) {
.reloj-page .bn__content__v1 h1 {
    font-size: 36px;
  }
}
@media (max-width: 470px) {
.reloj-page .bn__content__v1 h1 {
    font-size: 26px;
  }
}

@media (max-width: 500px) {
.reloj-page .bn__navigation {
    display: none !important;
  }
}

.reloj-page .sport__box li a {
  padding: 4px 16px;
  display: inline-block;
}

.reloj-page .recent__liveitem {
  background: var(--bgsection);
  overflow: hidden;
}
.reloj-page .recent__liveitem .thumb {
  overflow: hidden;
}
.reloj-page .recent__liveitem .thumb img {
  width: 100%;
  overflow: hidden;
  transition: all 0.4s;
}
.reloj-page .recent__liveitem .thumb .live__badge {
  position: absolute;
  top: 12px;
  left: 12px;
}
.reloj-page .recent__liveitem .thumb .overlay__video {
  position: absolute;
  left: 0%;
  top: 0%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(240, 243, 240, 0.0784313725);
  border-radius: 16px;
  opacity: 0;
}
.reloj-page .recent__liveitem .thumb .live__date {
  position: absolute;
  bottom: 12px;
  right: 12px;
}
.reloj-page .recent__liveitem .thumb .live__content {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  padding: 5px 22px 15px;
  z-index: 1;
}
.reloj-page .recent__liveitem .thumb .live__content:hover h4 a {
  color: var(--title);
}
.reloj-page .recent__liveitem .live__content {
  padding: 24px 22px 16px;
}
@media (max-width: 1600px) {
.reloj-page .recent__liveitem .live__content {
    padding: 22px 5px 15px;
  }
}
@media (max-width: 1399px) {
.reloj-page .recent__liveitem .live__content h4 {
    font-size: 18px;
  }
}
@media (max-width: 1199px) {
.reloj-page .recent__liveitem .live__content h4 {
    font-size: 19px;
  }
}
.reloj-page .recent__liveitem:hover .overlay__video {
  opacity: 1;
  left: 50%;
  top: 50%;
}
.reloj-page .recent__liveitem:hover h4 a {
  color: var(--base);
}

.reloj-page .test__bn {
  position: absolute;
  top: 120px !important;
  left: 0;
}

.reloj-page .upcoming__recent .overlay__thumb {
  position: relative;
}
.reloj-page .upcoming__recent .overlay__thumb::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 35%, rgba(0, 0, 0, 0.85) 75%, rgba(0, 0, 0, 0.95) 100%);
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  z-index: 1;
  content: "";
  border-radius: 0 0 16px 16px;
  transition: all 0.4s;
}
/* 시인성 개선 — 텍스트는 흰색, 호버 시 녹색 */
.reloj-page .upcoming__recent .live__content,
.reloj-page .upcoming__recent .live__content * { color: #fff !important; }
.reloj-page .upcoming__recent .live__content h4 a { font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,0.55); }
.reloj-page .upcoming__recent .live__badge { background: rgba(0,0,0,0.65); color:#fff; padding:4px 10px; border-radius:6px; font-weight:600; backdrop-filter: blur(4px); }
.reloj-page .upcoming__recent:hover .live__content h4 a { color: #65FF4B !important; }
@media (max-width: 1600px) {
.reloj-page .upcoming__recent h4 {
    font-size: 18px;
    margin-bottom: -5px;
  }
}
.reloj-page .upcoming__recent:hover .overlay__thumb::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 35%, rgba(0, 0, 0, 0.9) 80%, rgba(0, 0, 0, 1) 100%);
}
.reloj-page .upcoming__recent:hover h4 a {
  color: var(--title);
}

.reloj-page .live__streams {
  padding-top: 150px;
}

.reloj-page .common__section {
  padding-top: 150px;
}

@media (max-width: 470px) {
.reloj-page .world__sportmain .cmn-pagination, 
.reloj-page .channel__slider .cmn-pagination, 
.reloj-page .world__leaguesslider .cmn-pagination {
    display: none;
  }
}

@media (max-width: 1199px) {
.reloj-page .league__text {
    font-size: 16px;
    margin-top: 5px;
  }
}

.reloj-page .cmn__sidebtn {
  gap: 8px;
}
.reloj-page .cmn__sidebtn .cmn-button-next2, 
.reloj-page .cmn__sidebtn .cmn-button-next3, 
.reloj-page .cmn__sidebtn .cmn-button-next4, 
.reloj-page .cmn__sidebtn .cmn-button-next5, 
.reloj-page .cmn__sidebtn .cmn-button-next6, 
.reloj-page .cmn__sidebtn .cmn-button-next7, 
.reloj-page .cmn__sidebtn .cmn-button-next8, 
.reloj-page .cmn__sidebtn .cmn-button-next9, 
.reloj-page .cmn__sidebtn .cmn-button-next {
  min-width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(101, 255, 75, 0.5);
  border: 1px solid rgba(101, 255, 75, 0.5);
  position: initial;
  transition: all 0.4s;
}
.reloj-page .cmn__sidebtn .cmn-button-next2::after, 
.reloj-page .cmn__sidebtn .cmn-button-next3::after, 
.reloj-page .cmn__sidebtn .cmn-button-next4::after, 
.reloj-page .cmn__sidebtn .cmn-button-next5::after, 
.reloj-page .cmn__sidebtn .cmn-button-next6::after, 
.reloj-page .cmn__sidebtn .cmn-button-next7::after, 
.reloj-page .cmn__sidebtn .cmn-button-next8::after, 
.reloj-page .cmn__sidebtn .cmn-button-next9::after, 
.reloj-page .cmn__sidebtn .cmn-button-next::after {
  display: none;
}
.reloj-page .cmn__sidebtn .cmn-button-next2 i, 
.reloj-page .cmn__sidebtn .cmn-button-next3 i, 
.reloj-page .cmn__sidebtn .cmn-button-next4 i, 
.reloj-page .cmn__sidebtn .cmn-button-next5 i, 
.reloj-page .cmn__sidebtn .cmn-button-next6 i, 
.reloj-page .cmn__sidebtn .cmn-button-next7 i, 
.reloj-page .cmn__sidebtn .cmn-button-next8 i, 
.reloj-page .cmn__sidebtn .cmn-button-next9 i, 
.reloj-page .cmn__sidebtn .cmn-button-next i {
  font-size: 28px;
}
.reloj-page .cmn__sidebtn .cmn-button-next2:hover, 
.reloj-page .cmn__sidebtn .cmn-button-next3:hover, 
.reloj-page .cmn__sidebtn .cmn-button-next4:hover, 
.reloj-page .cmn__sidebtn .cmn-button-next5:hover, 
.reloj-page .cmn__sidebtn .cmn-button-next6:hover, 
.reloj-page .cmn__sidebtn .cmn-button-next7:hover, 
.reloj-page .cmn__sidebtn .cmn-button-next8:hover, 
.reloj-page .cmn__sidebtn .cmn-button-next9:hover, 
.reloj-page .cmn__sidebtn .cmn-button-next:hover {
  background: linear-gradient(94deg, #65FF4B 0%, #FFFB1F 100%);
  color: var(--title);
}
@media (max-width: 767px) {
.reloj-page .cmn__sidebtn .cmn-button-next2, 
.reloj-page .cmn__sidebtn .cmn-button-next3, 
.reloj-page .cmn__sidebtn .cmn-button-next4, 
.reloj-page .cmn__sidebtn .cmn-button-next5, 
.reloj-page .cmn__sidebtn .cmn-button-next6, 
.reloj-page .cmn__sidebtn .cmn-button-next7, 
.reloj-page .cmn__sidebtn .cmn-button-next8, 
.reloj-page .cmn__sidebtn .cmn-button-next9, 
.reloj-page .cmn__sidebtn .cmn-button-next {
    min-width: 38px;
    height: 38px;
  }
}
.reloj-page .cmn__sidebtn .cmn-button-prev2, 
.reloj-page .cmn__sidebtn .cmn-button-prev3, 
.reloj-page .cmn__sidebtn .cmn-button-prev4, 
.reloj-page .cmn__sidebtn .cmn-button-prev5, 
.reloj-page .cmn__sidebtn .cmn-button-prev6, 
.reloj-page .cmn__sidebtn .cmn-button-prev7, 
.reloj-page .cmn__sidebtn .cmn-button-prev8, 
.reloj-page .cmn__sidebtn .cmn-button-prev9, 
.reloj-page .cmn__sidebtn .cmn-button-prev {
  min-width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(101, 255, 75, 0.5);
  border: 1px solid rgba(101, 255, 75, 0.5);
  position: initial;
  transition: all 0.4s;
}
.reloj-page .cmn__sidebtn .cmn-button-prev2::after, 
.reloj-page .cmn__sidebtn .cmn-button-prev3::after, 
.reloj-page .cmn__sidebtn .cmn-button-prev4::after, 
.reloj-page .cmn__sidebtn .cmn-button-prev5::after, 
.reloj-page .cmn__sidebtn .cmn-button-prev6::after, 
.reloj-page .cmn__sidebtn .cmn-button-prev7::after, 
.reloj-page .cmn__sidebtn .cmn-button-prev8::after, 
.reloj-page .cmn__sidebtn .cmn-button-prev9::after, 
.reloj-page .cmn__sidebtn .cmn-button-prev::after {
  display: none;
}
.reloj-page .cmn__sidebtn .cmn-button-prev2 i, 
.reloj-page .cmn__sidebtn .cmn-button-prev3 i, 
.reloj-page .cmn__sidebtn .cmn-button-prev4 i, 
.reloj-page .cmn__sidebtn .cmn-button-prev5 i, 
.reloj-page .cmn__sidebtn .cmn-button-prev6 i, 
.reloj-page .cmn__sidebtn .cmn-button-prev7 i, 
.reloj-page .cmn__sidebtn .cmn-button-prev8 i, 
.reloj-page .cmn__sidebtn .cmn-button-prev9 i, 
.reloj-page .cmn__sidebtn .cmn-button-prev i {
  font-size: 28px;
}
.reloj-page .cmn__sidebtn .cmn-button-prev2:hover, 
.reloj-page .cmn__sidebtn .cmn-button-prev3:hover, 
.reloj-page .cmn__sidebtn .cmn-button-prev4:hover, 
.reloj-page .cmn__sidebtn .cmn-button-prev5:hover, 
.reloj-page .cmn__sidebtn .cmn-button-prev6:hover, 
.reloj-page .cmn__sidebtn .cmn-button-prev7:hover, 
.reloj-page .cmn__sidebtn .cmn-button-prev8:hover, 
.reloj-page .cmn__sidebtn .cmn-button-prev9:hover, 
.reloj-page .cmn__sidebtn .cmn-button-prev:hover {
  background: linear-gradient(94deg, #65FF4B 0%, #FFFB1F 100%);
  color: var(--title);
}
@media (max-width: 767px) {
.reloj-page .cmn__sidebtn .cmn-button-prev2, 
.reloj-page .cmn__sidebtn .cmn-button-prev3, 
.reloj-page .cmn__sidebtn .cmn-button-prev4, 
.reloj-page .cmn__sidebtn .cmn-button-prev5, 
.reloj-page .cmn__sidebtn .cmn-button-prev6, 
.reloj-page .cmn__sidebtn .cmn-button-prev7, 
.reloj-page .cmn__sidebtn .cmn-button-prev8, 
.reloj-page .cmn__sidebtn .cmn-button-prev9, 
.reloj-page .cmn__sidebtn .cmn-button-prev {
    min-width: 38px;
    height: 38px;
  }
}

.reloj-page .pricing__section, 
.reloj-page .popular__section, 
.reloj-page .channel__section {
  background: #24263A;
}
@media (max-width: 1600px) {
.reloj-page .pricing__section, 
.reloj-page .popular__section, 
.reloj-page .channel__section {
    padding-right: 14px;
    padding-left: 14px;
  }
}

.reloj-page .channel__item {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  padding: 10px;
  background: var(--cmnbg);
  display: block;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 575px) {
.reloj-page .channel__item {
    width: 80px;
    height: 80px;
  }
.reloj-page .channel__item img {
    width: 100%;
    height: 100%;
  }
}

.reloj-page .plan {
  padding: 32px 32px;
  border-radius: 16px;
  transition: all 0.4s;
  position: relative;
  border: 1px solid var(--cmnbg);
  background: var(--cmnbg);
}
@media (max-width: 1399px) {
.reloj-page .plan {
    padding: 24px 20px;
  }
}
@media (max-width: 991px) {
.reloj-page .plan {
    flex-wrap: wrap;
  }
.reloj-page .plan .pricing__list {
    width: 100%;
    margin-left: 0;
    padding-left: 0;
    border-left: unset;
  }
}
.reloj-page .plan:hover {
  border-color: var(--base);
  background: linear-gradient(94deg, rgba(101, 255, 75, 0.1) 0%, rgba(255, 251, 31, 0.1) 100%);
}

.reloj-page .pricing__list {
  border-left: 1px dashed rgba(101, 255, 75, 0.3);
  padding-left: 32px;
  margin-left: 32px;
  width: 50%;
  position: relative;
}
@media (max-width: 1600px) {
.reloj-page .pricing__list {
    padding-left: 18px;
    margin-left: 18px;
  }
}
@media (max-width: 1600px) {
.reloj-page .pricing__list li {
    font-size: 16px;
  }
}

.reloj-page .plans--annually .switch .annually {
  opacity: 1;
}

.reloj-page .plans--annually .switch .annually .save {
  color: var(--base2);
}

.reloj-page .plans--annually .plans .plan .plan__head::after {
  opacity: 0.5;
}

.reloj-page .plans--annually .plans .plan .plan__price .price.price--monthly {
  opacity: 0;
  transform: translateY(100px);
}

.reloj-page .plans--annually .plans .plan .plan__price .price.price--annually {
  opacity: 1 !important;
  transform: translateY(0px) !important;
}

.reloj-page .section__title {
  margin: 0 0 4.2rem 0;
  position: relative;
}

.reloj-page .section__title::after {
  content: "";
  display: block;
  width: 30px;
  height: 2px;
  border-radius: 15px;
  background: #2c79ff;
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
  bottom: -14px;
}

.reloj-page .switch {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.reloj-page .switch span {
  transition: all 0.2s ease-in-out;
}

.reloj-page .switch span.annually {
  position: relative;
}

.reloj-page .switch .custom-switch {
  position: relative;
  display: inline-block;
}

.reloj-page .switch .custom-switch input {
  display: none;
}

.reloj-page .switch .custom-switch input:checked + label:active:after {
  left: 25px;
}

.reloj-page .switch .custom-switch input:checked + label:after {
  left: 41px;
  background: linear-gradient(94deg, #65FF4B 0%, #FFFB1F 100%);
}

.reloj-page .switch .custom-switch label {
  position: relative;
  display: block;
  width: 73px;
  height: 36px;
  border-radius: 100px;
  background: var(--cmnbg);
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.reloj-page .switch .custom-switch label::after {
  position: relative;
  display: block;
  content: "";
  width: 33.33px;
  height: 33.33px;
  top: 2px;
  left: 0px;
  border-radius: 19px;
  background: linear-gradient(94deg, #65FF4B 0%, #FFFB1F 100%);
  pointer-events: none;
  transition: all 0.4s ease-in-out;
  border: 4px solid var(--cmnbg);
}

.reloj-page .switch .custom-switch label:active:after {
  width: 36px;
}

@media only screen and (max-width: 767px) {
.reloj-page .plans {
    grid-template-columns: 1fr;
  }
}
@media only screen and (min-width: 767px) and (max-width: 991px) {
.reloj-page .plans {
    grid-template-columns: 1fr 1fr;
  }
.reloj-page .plans .plan--starter {
    grid-column: 1/-1;
    grid-row: 1;
  }
}
.reloj-page .plans .plan .plan__head {
  transition: all 0.1s ease-in-out;
  color: #FFFFFF;
  overflow: hidden;
  position: relative;
  width: 55%;
  z-index: 1;
}
@media (max-width: 1399px) {
.reloj-page .plans .plan .plan__head {
    width: 43%;
  }
}
@media (max-width: 991px) {
.reloj-page .plans .plan .plan__head {
    width: 100%;
    margin-bottom: 24px;
  }
}
@media (max-width: 1399px) {
.reloj-page .plans .plan .plan__head .plan__title {
    font-size: 18px;
  }
}
@media (max-width: 1399px) {
.reloj-page .plans .plan .plan__head .fs-20 {
    font-size: 16px;
  }
}
@media (max-width: 1399px) {
.reloj-page .plans .plan .plan__head .cmn--btn {
    font-size: 14px;
  }
}

.reloj-page .plans .plan .plan__head::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: -1;
  transition: all 0.1s ease-in-out;
}

.reloj-page .plans .plan .plan__head .plan__price .price {
  font-size: 56px;
  font-weight: 600;
  font-family: "Isamanru", sans-serif;
  display: inline-block;
  transition: transform 0.4s ease 0s, opacity 0.2s ease 0s;
  position: relative;
}
@media (max-width: 1399px) {
.reloj-page .plans .plan .plan__head .plan__price .price {
    font-size: 34px;
  }
}

.reloj-page .pricing-tables .plans .plan .plan__head .plan__price .price .plan__type {
  font-size: 11px;
  font-weight: 500;
  position: absolute;
  bottom: -3px;
  left: 0px;
  right: 0;
  margin: 0 auto;
}

.reloj-page .plans .plan .plan__head .plan__price .price.price--annually {
  transition: transform 0.4s ease 0s, opacity 1s ease 0s;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(100px);
}

.reloj-page .sort__wrap {
  gap: 16px;
}
.reloj-page .sort__wrap .nice-select {
  background: var(--cmnbg);
  border: unset;
  padding: 11px 24px;
}
.reloj-page .sort__wrap .nice-select .current {
  color: var(--white);
}
.reloj-page .sort__wrap .nice-select:after {
  right: 23px;
  border-bottom: 1px solid var(--white);
  border-right: 1px solid var(--white);
  width: 8px;
  height: 8px;
  margin-left: 10px;
}

.reloj-page .news__thumb {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}
.reloj-page .news__thumb::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.08) 31.92%, rgba(0, 0, 0, 0.75) 63.25%, #000 100%);
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  z-index: 1;
  content: "";
  border-radius: 0 0 16px 16px;
  transition: all 0.4s;
}
.reloj-page .news__thumb img {
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: all 0.4s;
  border-radius: 16px;
}
.reloj-page .news__thumb .news__content {
  position: absolute;
  bottom: 40px;
  left: 40px;
  z-index: 1;
  max-width: 464px;
}
.reloj-page .news__thumb .news__content .more i {
  transition: all 0.4s;
}
.reloj-page .news__thumb .news__content .live__badge {
  display: inline-block;
}
@media (max-width: 1800px) {
.reloj-page .news__thumb .news__content {
    bottom: 15px;
    left: 15px;
  }
}
@media (max-width: 1600px) {
.reloj-page .news__thumb .news__content h4 {
    font-size: 18px;
  }
}
@media (max-width: 1399px) {
.reloj-page .news__thumb .news__content {
    position: relative;
    z-index: 1;
    padding-top: 24px;
    max-width: 300px;
  }
}
@media (max-width: 500px) {
.reloj-page .news__thumb .news__content {
    max-width: 255px;
  }
}
.reloj-page .news__thumb:hover::before {
  background: linear-gradient(180deg, rgba(101, 255, 75, 0) 0%, rgba(101, 255, 75, 0.08) 24.23%, rgba(101, 255, 75, 0.5) 54.44%, #65FF4B 100%);
}
.reloj-page .news__thumb:hover .news__content .more {
  color: var(--title) !important;
}
.reloj-page .news__thumb:hover .news__content .more i {
  color: var(--title) !important;
  padding-left: 10px;
}
.reloj-page .news__thumb:hover .news__content p {
  color: var(--title);
  font-weight: 600;
}
.reloj-page .news__thumb:hover .news__content h4 a {
  color: var(--title);
}
.reloj-page .news__thumb:hover img {
  transform: scale(1.1);
}



/* ============================================================================
   13) News 섹션 row/col 정렬 + sort select 스타일
   ============================================================================ */
.reloj-page .news-row {
	display: flex;
	flex-wrap: wrap;
	margin-left: -12px;
	margin-right: -12px;
}
.reloj-page .news-row > [class*="col-"] {
	padding-left: 12px;
	padding-right: 12px;
	box-sizing: border-box;
}
@media (min-width: 768px) {
	.reloj-page .news-row > .col-md-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}
}
@media (max-width: 767px) {
	.reloj-page .news-row > [class*="col-"] {
		flex: 0 0 100%;
		max-width: 100%;
		margin-bottom: 24px;
	}
}

/* 좌측 큰 뉴스 카드는 우측 두 카드 합친 높이만큼 */
.reloj-page .news-row > .col-md-6:first-child .news__thumb { height: 100%; }
.reloj-page .news-row > .col-md-6:first-child .news__thumb img {
	height: 100%;
	min-height: 480px;
	object-fit: cover;
}

/* 정렬 select */
.reloj-page .news-sort-select {
	background: var(--reloj-cmnbg);
	color: var(--reloj-white);
	border: 1px solid var(--reloj-border);
	border-radius: 8px;
	padding: 8px 14px;
	font-size: 14px;
	cursor: pointer;
	min-width: 110px;
	height: 40px;
}
.reloj-page .news-sort-select option {
	background: var(--reloj-cmnbg);
	color: var(--reloj-white);
}

/* container-fluid 백업 (BS3에 있지만 reloj-page 격리) */
.reloj-page .container-fluid {
	width: 100%;
	padding-left: 15px;
	padding-right: 15px;
	margin-left: auto;
	margin-right: auto;
}
.reloj-page .container-fluid.p-0 {
	padding-left: 0;
	padding-right: 0;
}

/* gap utility (BS5 호환) */
.reloj-page .g-4 { row-gap: 24px; column-gap: 24px; }
.reloj-page .gap-2 { gap: 8px; }
.reloj-page .gap-3 { gap: 12px; }

/* 태그 배지 (sportborder) - 가독성 보강 */
.reloj-page .sport__box li a.sportborder {
	border: 1px solid var(--reloj-border);
	padding: 4px 12px;
	border-radius: 100px;
	display: inline-block;
	transition: all 0.2s;
	text-decoration: none !important;
}
.reloj-page .sport__box li a.sportborder:hover {
	background: var(--reloj-base);
	border-color: var(--reloj-base);
	color: #14142B !important;
}


/* ============================================================================
   14) Reloj utility 클래스 (padding/margin/font-size/font-weight)
   ============================================================================ */

/* === Padding (PC: 100px, 모바일에서 점진적 축소) === */
.reloj-page .pt-100 { padding-top: 100px; }
.reloj-page .pb-100 { padding-bottom: 100px; }
.reloj-page .pt-60  { padding-top: 60px; }
.reloj-page .pb-60  { padding-bottom: 60px; }
.reloj-page .pt-40  { padding-top: 40px; }
.reloj-page .pb-40  { padding-bottom: 40px; }
.reloj-page .pt-24  { padding-top: 24px; }
.reloj-page .pb-24  { padding-bottom: 24px; }
.reloj-page .pt-16  { padding-top: 16px; }
.reloj-page .pb-16  { padding-bottom: 16px; }

.reloj-page .pl-24  { padding-left: 24px; }
.reloj-page .pr-24  { padding-right: 24px; }
.reloj-page .pl-16  { padding-left: 16px; }
.reloj-page .pr-16  { padding-right: 16px; }

.reloj-page .p-0    { padding: 0 !important; }
.reloj-page .p-8    { padding: 8px; }
.reloj-page .p-16   { padding: 16px; }

@media (max-width: 991px) {
	.reloj-page .pt-100 { padding-top: 70px; }
	.reloj-page .pb-100 { padding-bottom: 70px; }
}
@media (max-width: 575px) {
	.reloj-page .pt-100 { padding-top: 50px; }
	.reloj-page .pb-100 { padding-bottom: 50px; }
	.reloj-page .pl-24  { padding-left: 16px; }
	.reloj-page .pr-24  { padding-right: 16px; }
}

/* === Margin === */
.reloj-page .ml-24 { margin-left: 24px; }
.reloj-page .mr-24 { margin-right: 24px; }
.reloj-page .mt-40 { margin-top: 40px; }
.reloj-page .mt-24 { margin-top: 24px; }
.reloj-page .mt-16 { margin-top: 16px; }
.reloj-page .mt-8  { margin-top: 8px; }

.reloj-page .mb-60 { margin-bottom: 60px; }
.reloj-page .mb-40 { margin-bottom: 40px; }
.reloj-page .mb-24 { margin-bottom: 24px; }
.reloj-page .mb-16 { margin-bottom: 16px; }
.reloj-page .mb-10 { margin-bottom: 10px; }
.reloj-page .mb-8  { margin-bottom: 8px; }

@media (max-width: 575px) {
	.reloj-page .mb-60 { margin-bottom: 40px; }
	.reloj-page .ml-24 { margin-left: 16px; }
	.reloj-page .mr-24 { margin-right: 16px; }
}

/* === Font size === */
.reloj-page .fs-14 { font-size: 14px; }
.reloj-page .fs-16 { font-size: 16px; }
.reloj-page .fs-18 { font-size: 18px; }
.reloj-page .fs-20 { font-size: 20px; }
.reloj-page .fs-24 { font-size: 24px; }
.reloj-page .fz-20 { font-size: 20px; }

/* === Font weight === */
.reloj-page .fw-300 { font-weight: 300; }
.reloj-page .fw-400 { font-weight: 400; }
.reloj-page .fw-500 { font-weight: 500; }
.reloj-page .fw-600 { font-weight: 600; }
.reloj-page .fw-700 { font-weight: 700; }

/* === Border radius === */
.reloj-page .round8     { border-radius: 8px; }
.reloj-page .round16    { border-radius: 16px; }
.reloj-page .round100   { border-radius: 100px; }
.reloj-page .overhid    { overflow: hidden; }

/* === Display utilities (BS5 호환 보강) === */
.reloj-page .d-flex             { display: flex !important; }
.reloj-page .d-block            { display: block !important; }
.reloj-page .d-inline-flex      { display: inline-flex !important; }
.reloj-page .d-lg-flex          { display: flex !important; }
.reloj-page .align-items-center { align-items: center !important; }
.reloj-page .justify-content-between  { justify-content: space-between !important; }
.reloj-page .justify-content-center   { justify-content: center !important; }
.reloj-page .justify-lg-center        { justify-content: center !important; }
.reloj-page .flex-wrap          { flex-wrap: wrap !important; }
.reloj-page .w-100              { width: 100% !important; }

/* === Position helper (Reloj 원본 .ralt = relative) === */
.reloj-page .ralt { position: relative; }

/* === 색상 utility === */
.reloj-page .white     { color: var(--reloj-white) !important; }
.reloj-page .whitesub  { color: var(--reloj-whitesub) !important; }
.reloj-page .base      { color: var(--reloj-base) !important; }
.reloj-page .base2     { color: var(--reloj-base2) !important; }
.reloj-page .text-white{ color: var(--reloj-white) !important; }

/* === 본문 폰트 (Material Symbols / FontAwesome 아이콘 제외 강제 적용) === */
.reloj-page,
.reloj-page h1, .reloj-page h2, .reloj-page h3, .reloj-page h4, .reloj-page h5, .reloj-page h6,
.reloj-page p, .reloj-page span, .reloj-page a, .reloj-page button,
.reloj-page input, .reloj-page select, .reloj-page textarea, .reloj-page label,
.reloj-page li, .reloj-page td, .reloj-page th, .reloj-page div {
	font-family: "Isamanru", "Noto Sans KR", sans-serif;
}
/* 아이콘 폰트는 절대 덮어쓰지 않음 */
.reloj-page i.material-symbols-outlined,
.reloj-page span.material-symbols-outlined,
.reloj-page .material-symbols-outlined {
	font-family: "Material Symbols Outlined" !important;
}
.reloj-page i.fa,
.reloj-page i[class*="fa-"] {
	font-family: FontAwesome !important;
}

/* === 푸터에도 동일 폰트 적용 === */
.reloj-footer,
.reloj-footer * { font-family: "Isamanru", "Noto Sans KR", sans-serif; }
.reloj-footer i.fa,
.reloj-footer i[class*="fa-"] { font-family: FontAwesome !important; }
.reloj-footer .material-symbols-outlined { font-family: "Material Symbols Outlined" !important; }

/* ============================================================================
   모바일 반응형 보강
   - amina BS3 chrome 완전 숨김 (Reloj chrome으로 대체됨)
   - 좁은 viewport에서 topbar / 사이드바 / 컨테이너 컴팩트화
   ============================================================================ */

/* amina chrome 완전 숨김 — Reloj chrome이 모든 역할 대체 */
.at-lnb,
.pc-header,
.m-header,
.at-menu,
.at-footer {
	display: none !important;
}

/* 토프바 모바일 로고 (PC에서는 숨김, 모바일에서만 노출) */
.reloj-topbar .topbar-mobile-logo { display: none; }
.reloj-topbar .topbar-mobile-logo img {
	height: 36px;
	width: auto;
	display: block;
}

/* 모바일 (≤767px): topbar 컴팩트, at-body padding 축소 */
@media (max-width: 767px) {
	.at-body { padding-top: 64px !important; }

	.reloj-topbar {
		height: 64px;
		padding: 0 12px;
		gap: 8px;
	}
	.reloj-topbar .hamburger { width: 38px; height: 38px; }
	.reloj-topbar .hamburger .material-symbols-outlined { font-size: 20px; }

	/* 검색 폼 숨김, 로고 노출 */
	.reloj-topbar .topbar-search { display: none !important; }
	.reloj-topbar .topbar-mobile-logo {
		display: inline-flex;
		align-items: center;
		flex: 1;
		justify-content: center;
	}
	.reloj-topbar .topbar-mobile-logo img { height: 32px; }

	.reloj-topbar .topbar-right { gap: 6px; }
	.reloj-topbar .topbar-right .icon-btn,
	.reloj-topbar .topbar-right .profile-btn { width: 38px; height: 38px; }

	/* Browse 드롭다운 모바일: 라벨 숨기고 아이콘만 */
	.reloj-topbar .browse-dropdown .browse-toggle .browse-label { display: none; }
	.reloj-topbar .browse-dropdown .sub-menu {
		position: fixed;
		top: 64px;
		left: 0;
		right: 0;
		max-height: calc(100vh - 64px);
		overflow-y: auto;
		border-radius: 0;
		border-left: 0;
		border-right: 0;
	}

	/* 사이드바: 화면의 85%, 최대 320px */
	.sidebar-wrapper {
		width: 85%;
		max-width: 320px;
	}

	/* reloj-page 섹션 좌우 패딩 축소 */
	.reloj-page section.pl-24,
	.reloj-page section.pr-24 { padding-left: 12px !important; padding-right: 12px !important; }
	.reloj-page section.ml-24,
	.reloj-page section.mr-24 { margin-left: 12px !important; margin-right: 12px !important; }
	.reloj-page .pt-100, .reloj-page .pt-120 { padding-top: 48px; }
	.reloj-page .pb-100, .reloj-page .pb-120 { padding-bottom: 48px; }

	/* Reloj 푸터 모바일: 세로 정렬 */
	.reloj-footer .footer__bottom {
		flex-direction: column;
		gap: 16px;
		text-align: center;
	}
	.reloj-footer ul { justify-content: center; flex-wrap: wrap; }
}

/* 작은 모바일 (≤480px): 타이포 추가 축소 */
@media (max-width: 480px) {
	.reloj-page h1 { font-size: 28px !important; }
	.reloj-page h2 { font-size: 22px !important; }
	.reloj-page .fs-20 { font-size: 16px; }
}

/* ============================================================================
   LIVE 배지 시인성 강화 (라이브 카드 + 배너)
   다가오는 경기 .upcoming__wrapper 는 영향 없음
   ============================================================================ */
.reloj-page .recent__livesection .live__badge,
.reloj-page .banner__v1 .live__badge {
	background: #ED1C24 !important;
	color: #fff !important;
	font-weight: 800 !important;
	font-size: 13px !important;
	padding: 5px 14px 5px 10px !important;
	border-radius: 6px !important;
	text-shadow: 0 1px 2px rgba(0,0,0,.4);
	box-shadow: 0 4px 14px rgba(237,28,36,.45), 0 0 0 1px rgba(255,255,255,.15) inset;
	letter-spacing: .4px;
	text-transform: uppercase;
	gap: 6px !important;
}
.reloj-page .recent__livesection .live__badge i,
.reloj-page .recent__livesection .live__badge .material-symbols-outlined,
.reloj-page .banner__v1 .live__badge i,
.reloj-page .banner__v1 .live__badge .material-symbols-outlined {
	color: #fff !important;
	font-size: 16px !important;
}
/* 빨간 점등 펄스 */
.reloj-page .recent__livesection .live__badge::before,
.reloj-page .banner__v1 .live__badge::before {
	content: ""; display: inline-block;
	width: 8px; height: 8px; border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 8px rgba(255,255,255,.9), 0 0 14px #fff;
	animation: rjLivePulseDot 1.4s ease-in-out infinite;
	margin-right: 2px;
}
@keyframes rjLivePulseDot {
	0%,100% { opacity: 1;   transform: scale(1);   }
	50%     { opacity: .35; transform: scale(.7);  }
}

/* ============================================================================
   실시간 스포츠 swiper 페이지 이동 컨트롤 강조 (시인성)
   ============================================================================ */
.reloj-page .recent__livesection .cmn__sidebtn { display:flex !important; gap:8px; }
.reloj-page .recent__livesection .cmn-button-prev2,
.reloj-page .recent__livesection .cmn-button-next2 {
	width: 38px; height: 38px; border-radius: 50%;
	background: var(--reloj-bg-section, #24263A) !important;
	border: 1px solid var(--reloj-border, #404A60);
	display: flex; align-items: center; justify-content: center;
	color: var(--reloj-white, #fff) !important;
	cursor: pointer; transition: all .15s;
}
.reloj-page .recent__livesection .cmn-button-prev2:hover,
.reloj-page .recent__livesection .cmn-button-next2:hover {
	background: var(--reloj-base, #65FF4B) !important;
	border-color: var(--reloj-base, #65FF4B);
	color: #0d0d12 !important;
	transform: scale(1.06);
}
.reloj-page .recent__livesection .cmn-button-prev2.swiper-button-disabled,
.reloj-page .recent__livesection .cmn-button-next2.swiper-button-disabled {
	opacity: .35; cursor: not-allowed;
}
.reloj-page .recent__livesection .cmn-button-prev2 i,
.reloj-page .recent__livesection .cmn-button-next2 i {
	font-size: 22px; color: inherit !important;
}

/* 페이지네이션 dots */
.reloj-page .recent__livesection .cmn-pagination {
	display: flex !important; justify-content: center; gap: 8px; margin-top: 32px;
}
.reloj-page .recent__livesection .cmn-pagination .swiper-pagination-bullet {
	width: 10px; height: 10px; border-radius: 50%;
	background: var(--reloj-border, #404A60);
	opacity: 1; cursor: pointer; transition: all .2s;
	display: inline-block;
}
.reloj-page .recent__livesection .cmn-pagination .swiper-pagination-bullet-active {
	background: var(--reloj-base, #65FF4B);
	width: 28px; border-radius: 5px;
	box-shadow: 0 0 12px rgba(101,255,75,.55);
}

/* ============================================================================
   실시간 스포츠 swiper — 다른 grid 룰이 swiper-wrapper/slide를 깨지 않도록 강제
   (line 401의 광범위 [id]:not(...) 셀렉터 등에 영향받지 않게)
   ============================================================================ */
.reloj-page .recent__livewrap.swiper { overflow: hidden !important; }
/* line 401의 [id]:not(...) 룰이 swiper-wrapper에 영향 못 주게 — 단일행 flex 강제 */
.reloj-page .recent__livewrap > .swiper-wrapper,
.reloj-page .recent__livewrap .swiper-wrapper {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	grid-template-columns: none !important;
	gap: 0 !important;
	will-change: transform;
}
.reloj-page .recent__livewrap .swiper-slide {
	flex-shrink: 0 !important;
	height: auto !important;
}

/* ============================================================================
   THUMBNAIL SIZE CAP — 2026-05-05
   메인 4개 섹션(실시간/하이라이트/다가오는 경기/스포츠뉴스) 썸네일 ~500x500 캡
   페이지 길이 단축 목적. 되돌리려면 이 블록 삭제.
   ============================================================================ */
/* 실시간 스포츠 + 하이라이트 — swiper 카드 썸네일 (1:1, 최대 500px) */
.reloj-page .recent__livesection .recent__liveitem .thumb,
.reloj-page .highlight__section:not(.upcoming__wrapper) .recent__liveitem .thumb {
	aspect-ratio: 1 / 1;
	max-height: 500px;
	width: 100%;
	overflow: hidden;
	position: relative;
}
.reloj-page .recent__livesection .recent__liveitem .thumb img,
.reloj-page .highlight__section:not(.upcoming__wrapper) .recent__liveitem .thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}

/* 다가오는 경기 — overlay 카드 (1:1, 최대 500px) */
.reloj-page .upcoming__wrapper .upcoming__recent .overlay__thumb {
	aspect-ratio: 1 / 1;
	max-height: 500px;
	width: 100%;
	overflow: hidden;
}
.reloj-page .upcoming__wrapper .upcoming__recent .overlay__thumb > img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}

/* 스포츠 뉴스 — 좌(big) 1 + 우(small) 2 stacked, 전체 행 높이 500px 캡
   좌우가 같은 500px에 맞춰 정렬되도록 flex 사용 (PC 768px 이상) */
.reloj-page .news__section .news__thumb {
	overflow: hidden;
	position: relative;
}
.reloj-page .news__section .news__thumb > img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}

@media (min-width: 768px) {
	/* row 자체 높이 500px 고정 → 좌우 col이 같이 500px */
	.reloj-page .news__section .news-row {
		align-items: stretch;
		height: 500px;
	}
	/* 좌측 col: 단일 thumb이 col 전체를 채움 */
	.reloj-page .news__section .news-row > .col-md-6:first-child {
		display: flex;
	}
	.reloj-page .news__section .news-row > .col-md-6:first-child > .news__thumb {
		flex: 1 1 auto;
		height: auto !important;       /* 인라인 height:100% 유지하되 부모 flex로 크기 결정 */
		max-height: none;
		width: 100%;
	}
	/* 우측 col: 2개 thumb을 세로로 균등 분배 (각 ~238px) */
	.reloj-page .news__section .news-row > .col-md-6:nth-child(2) {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}
	.reloj-page .news__section .news-row > .col-md-6:nth-child(2) > .news__thumb {
		flex: 1 1 0;
		min-height: 0;
		margin-bottom: 0 !important;   /* 기존 mb-24 무효화 — gap으로 처리 */
	}
}

/* 모바일 (768 미만): 단순 세로 스택, 각 카드 max-height 320px */
@media (max-width: 767px) {
	.reloj-page .news__section .news__thumb {
		max-height: 320px;
		margin-bottom: 16px;
	}
}

/* ============================================================================
   SEO Hero (banner__v1 대체) - 강남티비 인트로 + A/B채널
   ============================================================================ */
.reloj-page .seo__hero {
	position: relative;
	isolation: isolate;
	background-color: var(--reloj-body);
	background-image:
		linear-gradient(180deg, rgba(20,20,43,0.55) 0%, rgba(20,20,43,0.70) 100%),
		linear-gradient(90deg, rgba(20,20,43,0.55) 0%, rgba(20,20,43,0.20) 50%, rgba(20,20,43,0.55) 100%),
		url('../assets/reloj/img/bn/bnslide1.jpg?v=20260507');
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position: center, center, center;
	background-size: cover, cover, cover;
	background-attachment: scroll, scroll, scroll;
	border-bottom: 1px solid var(--reloj-border);
	padding: 90px 0 100px;
	color: var(--reloj-whitesub);
	overflow: hidden;
}
/* 좌측 그린 글로우 */
.reloj-page .seo__hero::before {
	content: "";
	position: absolute;
	top: -120px;
	left: -120px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(101,255,75,0.22), rgba(101,255,75,0) 70%);
	z-index: -1;
	pointer-events: none;
}
/* 우하단 옐로우 글로우 */
.reloj-page .seo__hero::after {
	content: "";
	position: absolute;
	right: -160px;
	bottom: -160px;
	width: 600px;
	height: 600px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255,251,31,0.16), rgba(255,251,31,0) 70%);
	z-index: -1;
	pointer-events: none;
}
.reloj-page .seo__hero > .container {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 30px;
	width: 100%;
}
.reloj-page .seo__hero-inner {
	max-width: 1080px;
	margin: 0 auto;
}

.reloj-page .seo__hero h1 {
	font-size: 34px;
	line-height: 1.35;
	font-weight: 800;
	color: var(--reloj-white);
	margin: 0 0 18px;
	letter-spacing: -0.01em;
}
.reloj-page .seo__hero h1::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	margin-top: 16px;
	border-radius: 4px;
	background: linear-gradient(94deg, var(--reloj-base) 0%, var(--reloj-base2) 100%);
}

.reloj-page .seo__hero h2 {
	font-size: 24px;
	line-height: 1.4;
	font-weight: 700;
	color: var(--reloj-white);
	margin: 36px 0 14px;
}

.reloj-page .seo__hero > .container p {
	font-size: 16px;
	line-height: 1.85;
	color: var(--reloj-whitesub);
	margin: 0 0 12px;
}
.reloj-page .seo__hero strong {
	color: var(--reloj-base);
	font-weight: 600;
}

/* 채널 카드 그리드 */
.reloj-page .seo__channels {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin-top: 40px;
}
.reloj-page .seo__channel {
	position: relative;
	background: var(--reloj-bg-section);
	border: 1px solid var(--reloj-border);
	border-radius: 14px;
	padding: 28px 26px 26px;
	transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.reloj-page .seo__channel::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(94deg, var(--reloj-base) 0%, var(--reloj-base2) 100%);
	opacity: 0.85;
}
.reloj-page .seo__channel:hover {
	transform: translateY(-4px);
	border-color: var(--reloj-base);
	box-shadow: 0 12px 36px rgba(0,0,0,0.35);
}
.reloj-page .seo__channel h3 {
	font-size: 18px;
	line-height: 1.45;
	font-weight: 700;
	color: var(--reloj-white);
	margin: 6px 0 12px;
}
.reloj-page .seo__channel p {
	font-size: 15px;
	line-height: 1.8;
	color: var(--reloj-whitesub);
	margin: 0 0 22px;
	min-height: 84px;
}

/* SEO 버튼 (cmn--btn 스타일과 톤 맞춤) */
.reloj-page .seo__btn {
	display: inline-block;
	text-decoration: none !important;
	margin-top: auto;
}
.reloj-page .seo__btn button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: linear-gradient(94deg, var(--reloj-base) 0%, var(--reloj-base2) 100%);
	color: #14142B;
	font-weight: 700;
	font-size: 15px;
	padding: 12px 22px;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
	box-shadow: 0 4px 16px rgba(101,255,75,0.18);
}
.reloj-page .seo__btn button::after {
	content: "→";
	font-size: 16px;
	line-height: 1;
	transition: transform .2s ease;
}
.reloj-page .seo__btn:hover button {
	opacity: 0.95;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(101,255,75,0.28);
}
.reloj-page .seo__btn:hover button::after {
	transform: translateX(3px);
}

/* 반응형 */
@media (max-width: 991px) {
	.reloj-page .seo__hero { padding: 64px 0 72px; }
	.reloj-page .seo__hero h1 { font-size: 28px; }
	.reloj-page .seo__hero h2 { font-size: 21px; }
}
@media (max-width: 767px) {
	.reloj-page .seo__hero { padding: 48px 0 56px; }
	.reloj-page .seo__hero > .container { padding: 0 20px; }
	.reloj-page .seo__hero h1 { font-size: 23px; line-height: 1.4; }
	.reloj-page .seo__hero h2 { font-size: 19px; margin-top: 28px; }
	.reloj-page .seo__hero > .container p { font-size: 15px; line-height: 1.8; }
	.reloj-page .seo__channels { grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
	.reloj-page .seo__channel { padding: 22px 20px; }
	.reloj-page .seo__channel h3 { font-size: 17px; }
	.reloj-page .seo__channel p { font-size: 14.5px; min-height: 0; margin-bottom: 18px; }
}

/* ============================================================================
   사이드바 하단 배너 (도메인 / 텔레그램)
   ============================================================================ */
body .sidebar-wrapper .sidebar__banners {
	display: flex;
	flex-direction: column;
	gap: 8px;
	/* sidebar-wrapper padding:24px → 양옆 14px 만 빼고 적당히 여백 유지 */
	margin: 16px -14px 4px -14px;
	padding: 0;
	width: calc(100% + 28px);
	max-width: none;
}
body .sidebar-wrapper .sidebar__banner {
	display: block;
	width: 100%;
	overflow: hidden;
	border-radius: 0;
	transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease, filter .2s ease;
	line-height: 0;
}
body .sidebar-wrapper .sidebar__banner:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(0,0,0,0.45);
	opacity: 0.97;
	filter: brightness(1.05);
}
body .sidebar-wrapper .sidebar__banner img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	border-radius: 0;
	object-fit: cover;
}
/* 사이드바 접힘 상태에서는 배너 숨김 */
body.reloj-sidebar-collapsed .sidebar-wrapper .sidebar__banners {
	display: none !important;
}