.nbt-pred-wrap {
	max-width: 960px;
	margin: 0 auto;
	padding: 20px 16px 60px;
}
@media (max-width: 767px) {
	.nbt-pred-wrap {
		padding-left: 0;
		padding-right: 0;
	}
}
.nbt-pred-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--text-primary);
	margin: 0 0 6px;
}
.nbt-pred-sub {
	font-size: 16px;
	color: var(--text-primary);
	margin: 0 0 20px;
}
.nbt-pred-sub + .nbt-pred-more-link {
	margin-top: -20px;
}
.nbt-pred-more-link {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: #c0392b;
	text-decoration: none;
	margin: 0 0 20px;
}
.nbt-pred-more-link:hover {
	text-decoration: underline;
}
.nbt-pred-hub-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
@media (max-width: 640px) {
	.nbt-pred-hub-grid { grid-template-columns: 1fr; }
}
.nbt-pred-card {
	background: var(--bg-dropdown, #fff);
	border-radius: 12px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
@media (max-width: 767px) {
	.nbt-pred-card {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
}
.nbt-pred-card.disabled {
	opacity: 0.6;
}
.nbt-pred-card h3 {
	margin: 0;
	font-size: 19px;
	color: var(--text-primary);
}
.nbt-pred-card p {
	margin: 0;
	font-size: 16px;
	color: var(--text-primary);
	line-height: 1.5;
}
.nbt-pred-badge {
	display: inline-block;
	font-size: 14px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 999px;
	background: #c0392b;
	color: #fff;
	width: fit-content;
}
.nbt-pred-badge.soon {
	background: #8b8d98;
}
.nbt-pred-progress {
	font-size: 15px;
	color: var(--text-primary);
	font-weight: 600;
}
.nbt-pred-btn {
	margin-top: 4px;
	display: inline-block;
	text-align: center;
	background: #c0392b;
	color: #fff !important;
	font-weight: 700;
	font-size: 16px;
	padding: 10px 16px;
	border-radius: 8px;
	text-decoration: none;
	width: fit-content;
}
/* 실험: 진짜 버튼이라는 걸 호버 전에도 한눈에 알 수 있게 입체감(그림자)을 줌 -
   "참여하기" 하나로만 먼저 느낌 보고, 괜찮으면 다른 버튼들(초기화/제출 등)에도 확대 적용 */
.nbt-pred-btn:not(.disabled) {
	box-shadow: 0 3px 8px rgba(192, 57, 43, 0.4);
	transition: transform .15s, box-shadow .15s;
}
.nbt-pred-btn:not(.disabled):hover {
	transform: translateY(-1px);
	box-shadow: 0 5px 12px rgba(192, 57, 43, 0.5);
}
.nbt-pred-text-field {
	margin-bottom: 16px;
}
.nbt-pred-text-label {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 6px;
}
.nbt-pred-text-value {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border-radius: 8px;
	border: 2px solid var(--border-color, #ccc);
	background: var(--bg-page, #fff);
	color: var(--text-primary);
	font-size: 14px;
	font-family: inherit;
	resize: vertical;
}
.nbt-pred-text-value:focus {
	border-color: var(--text-secondary, #767c88);
	outline: none;
}
.nbt-pred-datetime-pair {
	display: flex;
	gap: 8px;
}
.nbt-pred-dt-date, .nbt-pred-dt-time {
	box-sizing: border-box;
	padding: 10px 12px;
	border-radius: 8px;
	border: 2px solid var(--border-color, #ccc);
	background: var(--bg-page, #fff);
	color: var(--text-primary);
	font-size: 14px;
	font-family: inherit;
}
.nbt-pred-dt-date {
	flex: 1 1 auto;
}
.nbt-pred-dt-time {
	flex: 0 0 80px;
	text-align: center;
}
.nbt-pred-dt-date:focus, .nbt-pred-dt-time:focus {
	border-color: #e03131;
	outline: none;
}
.nbt-pred-text-save-msg {
	margin-left: 12px;
	font-size: 14px;
	color: var(--text-secondary, #767c88);
}
.nbt-pred-activity-inputs {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	font-size: 14px;
	color: var(--text-primary);
}
.nbt-pred-activity-input {
	width: 64px !important;
	flex: 0 0 64px;
	text-align: center;
	box-sizing: border-box;
	padding: 10px 6px;
	border-radius: 8px;
	border: 2px solid var(--border-color, #ccc);
	background: var(--bg-page, #fff);
	color: var(--text-primary);
	font-size: 14px;
	font-family: inherit;
}
.nbt-pred-activity-logic-select {
	flex: 0 0 auto;
	width: auto;
	box-sizing: border-box;
	padding: 4px 20px 4px 8px;
	border-radius: 6px;
	border: 2px solid var(--border-color, #ccc);
	background: var(--bg-page, #fff);
	color: var(--text-primary);
	font-size: 13px;
	font-family: inherit;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23767c88' stroke-width='1.5' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 6px center;
}
.nbt-pred-activity-input:focus {
	border-color: #e03131;
	outline: none;
}
.nbt-pred-sub-activity {
	font-weight: 600;
}
.nbt-pred-btn:disabled, .nbt-pred-btn.disabled {
	background: #8b8d98;
	pointer-events: none;
}
.nbt-pred-section-header {
	background: #1e3a5f;
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	text-align: center;
	padding: 6px 14px;
	border-radius: 8px;
	margin: 11px 0 6px;
}
.nbt-pred-timetable {
	background: var(--bg-dropdown, #fff);
	border: 1px solid var(--border-color, rgba(128,128,128,.25));
	border-radius: 10px;
	padding: 16px;
}
.nbt-pred-timetable-list {
	margin: 0 0 14px;
	padding: 0 0 0 18px;
	font-size: 16px;
	color: var(--text-primary);
	line-height: 1.9;
}
.nbt-pred-tt-bold {
	font-weight: 700;
}
.nbt-pred-tt-started {
	color: #e03131;
}
.nbt-pred-timetable-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
}
@media (max-width: 640px) {
	.nbt-pred-timetable-grid { grid-template-columns: repeat(2, 1fr); }
}
.nbt-pred-timetable-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
	background: var(--bg-page, #f4f4f5);
	border-radius: 8px;
	padding: 12px 3px;
	min-width: 0;
}
.nbt-pred-timetable-card-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--text-primary);
	white-space: nowrap;
}
.nbt-pred-timetable-card-date {
	font-size: 13px;
	color: var(--text-secondary, #767c88);
	white-space: nowrap;
}
.nbt-pred-timetable-card-done {
	background: #fbdcdc;
}
.nbt-pred-timetable-card-done .nbt-pred-timetable-card-title,
.nbt-pred-timetable-card-done .nbt-pred-timetable-card-date {
	color: #c0392b;
}
.nbt-pred-hub-stat-row {
	display: flex;
	gap: 10px;
	margin: 0 0 11px;
}
/* "치킨 🍗 결과" 라벨만 이모지 때문에 다른 라벨("제출 완료" 등)보다 눈에 띄게 넓어서
   모바일 좁은 폭에서 혼자 두 줄로 줄바꿈됨 - 일부러 폰트 크기만 줄이는 식으로 한쪽만
   작아 보이게 하긴 싫어서, 좁은 화면에서는 이모지만 빼서 폭을 맞춤(PC는 그대로 유지) */
@media (max-width: 640px) {
	.nbt-pred-chicken-emoji {
		display: none;
	}
}
/* .nbt-pred-card는 자식들 사이에 flex gap:10px를 주는데, "My Picks & Results" 헤더
   바로 다음에 이 줄이 오면(헤더 자신의 margin-bottom 6px까지 더해져) 16px나 벌어짐 -
   "전체 참여 현황" 쪽(마진만 겹치는 일반 블록 흐름이라 6px)과 안 맞아서 맞춰줌.
   "전체 참여 현황" 안의 같은 줄은 .nbt-pred-fandom 안에 있어 card의 직계 자식이
   아니므로 이 규칙 영향을 안 받음 */
.nbt-pred-card > .nbt-pred-hub-stat-row {
	margin-top: -10px;
}
.nbt-pred-hub-stat-item {
	flex: 1 1 0;
	min-width: 0;
	background: var(--bg-page, #f4f4f5);
	border: 2px dashed var(--border-color, #ccc);
	border-radius: 10px;
	padding: 10px 6px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
}
.nbt-pred-mypicks-results-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	align-items: start;
}
@media (max-width: 640px) {
	.nbt-pred-mypicks-results-grid { grid-template-columns: 1fr; }
}
.nbt-pred-panel .nbt-pred-section-header {
	margin-top: 0;
}
.nbt-pred-chicken-header {
	text-align: left;
	margin-top: 24px;
	background: #c0392b;
}
.nbt-pred-submissions-group {
	margin-bottom: 24px;
}
/* 새 경기가 시작되는 그룹(경기 배너가 붙은 그룹) 앞에 넉넉한 여백을 둬서
   같은 경기 안의 승리팀/최다 득점자끼리는 붙어있고, 경기 사이는 확실히 구분되게 함 */
.nbt-pred-submissions-group:has(.nbt-pred-opener-game-header):not(:first-child) {
	margin-top: 60px;
}
.nbt-pred-submissions-count {
	font-weight: 400;
	opacity: .85;
	font-size: 13px;
}
.nbt-pred-submissions-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--bg-dropdown, #fff);
	border: 1px solid var(--border-color, rgba(128,128,128,.25));
	border-radius: 0 0 8px 8px;
	overflow: hidden;
	font-size: 14px;
}
.nbt-pred-submissions-table th, .nbt-pred-submissions-table td {
	padding: 8px 12px;
	text-align: left;
	border-bottom: 1px solid var(--border-color, rgba(128,128,128,.15));
	color: var(--text-primary);
}
.nbt-pred-submissions-table th {
	color: var(--text-secondary, #767c88);
	font-weight: 700;
	font-size: 12px;
}
.nbt-pred-submissions-table tr:last-child td {
	border-bottom: none;
}
.nbt-pred-leaderboard-table {
	margin-bottom: 28px;
}
.nbt-pred-send-results-btn {
	margin: 8px 0 14px;
}
.nbt-pred-send-results-msg {
	margin-left: 10px;
	font-size: 13px;
	color: var(--text-secondary, #767c88);
}
.nbt-pred-share-btn {
	margin-top: 10px;
	width: 100%;
	background: #1e3a5f;
}
.nbt-pred-share-btn:hover {
	background: #16293f;
}
.nbt-pred-share-msg {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	text-align: center;
	color: var(--text-secondary, #767c88);
}
.nbt-pred-lb-rank {
	font-weight: 700;
	font-size: 15px;
	color: var(--text-primary);
	width: 32px;
}
.nbt-pred-lb-nick {
	font-weight: 700;
	color: #c0392b !important;
	text-decoration: none;
}
.nbt-pred-lb-nick:hover {
	text-decoration: underline;
}
/* 당첨 최소 조건(최근 30일 글/댓글) 미달 - 관리자가 당첨자 거를 때 한눈에 보이게 */
.nbt-pred-lb-activity-warn {
	color: #e03131 !important;
	font-weight: 700;
}
.nbt-pred-pick-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	max-width: 480px;
}
.nbt-pred-pick-chip {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	background: var(--bg-page, #eef1f4);
	color: var(--text-secondary, #767c88);
	white-space: nowrap;
}
.nbt-pred-pick-chip.correct {
	background: #2f9e44;
	color: #fff;
}
.nbt-pred-pick-chip.wrong {
	background: #8b8d98;
	color: #fff;
}
.nbt-pred-detail-category {
	margin-bottom: 24px;
}
.nbt-pred-detail-correct {
	color: #2f9e44;
	font-weight: 700;
}
.nbt-pred-detail-wrong {
	color: #c0392b;
	font-weight: 700;
}
.nbt-pred-avatar-picker-contain .nbt-pred-avatar-picker-img {
	object-fit: contain;
	object-position: center;
	padding: 4px;
	box-sizing: border-box;
	background: #fff;
}
.nbt-pred-photo-contain {
	object-fit: contain !important;
	object-position: center !important;
	padding: 4px;
	box-sizing: border-box;
	background: #fff;
}
.nbt-pred-dashboard {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin: 18px 0 8px;
}
.nbt-pred-dashboard-2col {
	margin: 0;
}
.nbt-pred-dash-item {
	background: var(--bg-dropdown, #fff);
	border-radius: 10px;
	padding: 16px 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.nbt-pred-dashboard-2col .nbt-pred-dash-item {
	padding: 11px 6px;
	gap: 4px;
}
.nbt-pred-dash-value {
	font-size: 22px;
	font-weight: 800;
	color: var(--text-secondary, #767c88);
}
.nbt-pred-dashboard-2col .nbt-pred-dash-value {
	font-size: 18px;
}
.nbt-pred-dash-var {
	color: #e03131;
}
.nbt-pred-eligibility-value {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: help;
	position: relative;
}
.nbt-pred-eligibility-value.met,
.nbt-pred-eligibility-value.met .nbt-pred-dash-var {
	color: #2f9e44;
}
.color_scheme_dark .nbt-pred-eligibility-value.met,
.color_scheme_dark .nbt-pred-eligibility-value.met .nbt-pred-dash-var {
	color: #3fbf62;
}
.nbt-pred-eligibility-value.unmet,
.nbt-pred-eligibility-value.unmet .nbt-pred-dash-var {
	color: #e03131;
}
.nbt-pred-eligibility-value i {
	font-size: 0.85em;
}
/* 다른 말풍선 툴팁(.nbt-pred-fandom-tie 등)과 동일한 스타일 - 기준/내 실적 두 줄이라
   그쪽과 같은 줄바꿈+최대너비 버전을 그대로 씀. 단, 여긴 데이터에 빈 줄(\n\n)까지
   들어있어서 white-space는 normal이 아니라 pre-line(줄바꿈 문자를 그대로 살림)을 씀 */
.nbt-pred-eligibility-value[data-tooltip]:not([data-tooltip=""]):hover::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: 145%;
	left: 50%;
	transform: translateX(-50%);
	background: #1e1e1e;
	color: #fff;
	padding: 7px 10px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 600;
	white-space: pre-line;
	width: max-content;
	max-width: 220px;
	line-height: 1.5;
	text-align: left;
	z-index: 30;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
	pointer-events: none;
}
.nbt-pred-eligibility-value[data-tooltip]:not([data-tooltip=""]):hover::before {
	content: '';
	position: absolute;
	bottom: 118%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: #1e1e1e;
	z-index: 30;
	pointer-events: none;
}
.nbt-pred-dash-label {
	font-size: 14px;
	color: var(--text-secondary, #767c88);
}
.nbt-pred-hub-stat-item .nbt-pred-dash-label {
	font-size: 16px;
	font-weight: 700;
	color: var(--text-primary);
}
.nbt-pred-dashboard-2col .nbt-pred-dash-label {
	font-size: 15px;
	font-weight: 700;
	color: var(--text-primary);
}
.nbt-pred-stat {
	font-size: 14px;
	color: var(--text-secondary, #767c88);
	margin-top: 4px;
}
.nbt-pred-stat-hidden {
	font-size: 14px;
	color: var(--text-secondary, #767c88);
	margin-top: 4px;
	font-style: italic;
}
.nbt-pred-opener-game-header {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
	background: #1e3a5f;
	color: #fff;
	border-radius: 8px;
	padding: 10px 14px;
	margin: 24px 0 10px;
}
.nbt-pred-opener-game:first-child .nbt-pred-opener-game-header {
	margin-top: 4px;
}
.nbt-pred-opener-team {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 16px;
	font-weight: 700;
}
.nbt-pred-opener-team-logo {
	width: 24px;
	height: 24px;
	object-fit: contain;
}
.nbt-pred-opener-home-badge {
	background: #e03131;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 999px;
}
.nbt-pred-opener-vs {
	font-size: 13px;
	opacity: .7;
}
.nbt-pred-opener-tipoff {
	font-size: 13px;
	font-weight: 700;
	color: #ffd43b;
	margin-left: auto;
}
@media (max-width: 640px) {
	.nbt-pred-opener-game-header { justify-content: flex-start; }
	.nbt-pred-opener-tipoff { margin-left: 0; width: 100%; text-align: center; }
}
.nbt-pred-opener-game-body {
	display: flex;
	gap: 12px;
	align-items: stretch;
}
.nbt-pred-opener-deadline-box {
	flex: 0 0 150px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	padding: 12px;
	border: 1px solid var(--border-color, rgba(128,128,128,.25));
	border-radius: 10px;
	background: var(--bg-dropdown, #fff);
	box-sizing: border-box;
}
.nbt-pred-opener-deadline-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	text-align: center;
}
.nbt-pred-opener-deadline-label {
	font-size: 13px;
	font-weight: 700;
	color: var(--text-primary);
}
.nbt-pred-opener-deadline-value {
	font-size: 15px;
	font-weight: 700;
	color: var(--text-primary);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.nbt-pred-opener-countdown .cd-secs-ones {
	color: #e03131;
}
.nbt-pred-opener-countdown-ended {
	color: #c0392b !important;
}
.nbt-pred-opener-countdown .cd-part.flash {
	color: #e03131;
	transition: color .3s ease-out;
}
.nbt-pred-opener-rows {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.nbt-pred-opener-rows .nbt-pred-row:last-child {
	margin-bottom: 0;
}
/* 개막전 행은 왼쪽 마감 박스가 카운트다운을 대신 보여주므로, 버튼 위 개별 카운트다운은
   화면에서 숨기되(자동 잠금 타이머는 계속 동작해야 하니 DOM/JS는 그대로 둠) */
.nbt-pred-opener-countdown-hidden.active {
	display: none !important;
}
@media (max-width: 640px) {
	.nbt-pred-opener-game-body { flex-direction: column; }
	/* .nbt-pred-opener-deadline-box의 flex:0 0 150px는 데스크톱(가로 배치)에서
	   "너비 150px"를 뜻했는데, 여기서 부모(game-body)가 column으로 바뀌면 그 순간
	   같은 flex-basis가 "높이 150px"로 해석되어 버림 - padding을 아무리 줄여도
	   박스 높이가 150px에 고정되던 원인이 이거였음. auto로 풀어서 내용에 맞게 줄어들게 함 */
	.nbt-pred-opener-deadline-box { flex-direction: row; justify-content: space-around; flex: 0 0 auto; }
}
.nbt-pred-opener-team-choice {
	display: flex;
	gap: 10px;
	flex: 1 1 auto;
}
.nbt-pred-opener-team-btn {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 8px;
	border: 2px solid var(--border-color, #ccc);
	border-radius: 8px;
	background: var(--bg-page, #fff);
	color: var(--text-primary);
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
	transition: border-color .15s, background .15s, box-shadow .15s, transform .15s;
}
.nbt-pred-opener-team-btn img {
	width: 32px;
	height: 32px;
	object-fit: contain;
}
.nbt-pred-opener-team-btn:hover {
	border-color: #e03131;
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}
.nbt-pred-opener-team-btn.selected {
	border-color: #e03131;
	background: rgba(224, 49, 49, .1);
	color: #e03131;
	box-shadow: 0 3px 8px rgba(224, 49, 49, 0.3);
}
.nbt-pred-group-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--text-primary);
	margin: 28px 0 12px;
	padding-bottom: 6px;
	border-bottom: 2px solid #c0392b;
}
.nbt-pred-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	margin-bottom: 10px;
	min-height: 96px;
	background: var(--bg-dropdown, #fff);
	border: 1px solid var(--border-color, rgba(128,128,128,.25));
	border-radius: 10px;
	flex-wrap: wrap;
	box-sizing: border-box;
}
.nbt-pred-row[data-ever-submitted="1"] {
	border: 2px solid #1a1a1a;
}
body.color_scheme_dark .nbt-pred-row[data-ever-submitted="1"] {
	border-color: #d9d9d9;
}
/* 개막전 페이지 전용: 승리팀 행(팀 버튼 2줄)과 최다 득점자 행(검색창 1줄)의 높이가
   서로 달라 오/열이 안 맞던 문제 - 이 페이지 행에만 고정 높이를 줘서 항상 정렬되게 함 */
/* 승리팀 행(팀 버튼 2줄)과 최다 득점자 행(검색창 1줄)의 자연 높이가 달라 오/열이 안 맞던 문제 -
   이 페이지 행에만 고정 높이를 줘서 항상 정렬되게 함 (우승/수상자 페이지엔 영향 없음) */
.nbt-pred-opener-row {
	min-height: 84px;
	padding: 10px 16px;
}
.nbt-pred-opener-row .nbt-pred-row-label {
	flex: 0 0 100px;
	min-width: 0;
	justify-content: center;
	text-align: center;
	font-size: 15px;
	margin-left: -0.1cm;
}
/* 모바일 행 레이아웃은 flex 대신 grid로 전환 - 가운데 칸(제출일시)을 감싸는
   양옆 칸을 1fr/1fr로 대칭시키면, 코인영역/제출버튼 각자의 실제 크기와 무관하게
   제출일시가 항상 카드 정중앙(라벨과 같은 줄)에 오고, 제출버튼도 자기 칸(3번째
   컬럼)에 명시적으로 고정되어 있어서 폭이 좁아져도 절대 다음 줄로 밀려나지 않음.
   개막전뿐 아니라 우승/수상자 예측 등 .nbt-pred-row를 쓰는 모든 이벤트 페이지의
   모바일 기본값으로 적용 (코인-제출일시-제출 순서가 기본) */
@media (max-width: 767px) {
	.nbt-pred-row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		align-items: center;
		row-gap: 8px;
		column-gap: 8px;
	}
	/* auto-placement(특히 기본 sparse 모드)이 DOM 순서(제출→제출일시→코인)와
	   화면 순서(코인→제출일시→제출)가 반대라서 커서가 뒤로 못 돌아가 각자 다른
	   줄로 흩어지는 문제가 있었음 - row까지 셋 다 명시적으로 3으로 고정해서
	   auto-placement에 전혀 의존하지 않게 함 (label=1행, input=2행, 나머지=3행) */
	.nbt-pred-row-label {
		grid-column: 1 / -1;
		grid-row: 1;
	}
	.nbt-pred-row-input {
		grid-column: 1 / -1;
		grid-row: 2;
	}
	.nbt-pred-row-meta {
		grid-column: 1;
		grid-row: 3;
		justify-self: start;
		align-items: flex-start;
		min-width: 0;
	}
	.nbt-pred-row-time-box {
		grid-column: 2;
		grid-row: 3;
		justify-self: center;
	}
	/* 제출일시 박스가 데스크톱 기준 min-width:120px를 그대로 가져와서, 좁은 화면(320~375px)에서는
	   가운데(auto) 칸이 너무 넓어져 왼쪽(코인)/오른쪽(버튼) 칸이 밀리다 못해 겹치는 문제가 있었음 -
	   모바일에서만 더 좁게 줄여서 세 칸이 다 들어가게 함 */
	.nbt-pred-row-time-value {
		min-width: 88px;
	}
	.nbt-pred-row-submit {
		grid-column: 3;
		grid-row: 3;
		justify-self: end;
		min-width: 0;
	}
	/* 치킨 브랜드 행은 .nbt-pred-opener-row 클래스가 안 붙어있어서(승리팀/최다득점자와
	   달리) 모바일에서 아바타/드롭다운 위치가 살짝 왼쪽으로 치우쳐 보이고, 코인/제출일시/
	   버튼 쪽도 그 둘과 미묘하게 달라 보임 - 모바일에서만 승리팀/최다득점자 행과 똑같이
	   맞춤(데스크톱은 안 건드림) */
	.nbt-pred-row[data-pick-type="chicken"] .nbt-pred-row-input {
		margin-left: 0.3cm;
	}
	.nbt-pred-row[data-pick-type="chicken"] .nbt-pred-row-time-value {
		min-height: 25px;
		min-width: 100px;
		padding: 2px 10px;
		font-size: 14px;
		line-height: 18px;
	}
	.nbt-pred-row[data-pick-type="chicken"] .nbt-pred-row-submit {
		margin-left: 1.9px;
		transform: none;
	}
	.nbt-pred-row[data-pick-type="chicken"] .nbt-pred-row-time-box {
		margin-left: auto;
		margin-right: -10px;
	}
	.nbt-pred-row[data-pick-type="chicken"] .nbt-pred-coin {
		width: 14px;
		height: 14px;
	}
	.nbt-pred-row[data-pick-type="chicken"] .nbt-pred-coins-label {
		font-size: 12px;
	}
	/* 관리자 정답 관리 화면 전용: 코인이 없고 제출일시가 버튼과 합쳐진(.nbt-pred-admin-submit)
	   구조라, 회원용 3분할(코인-제출일시-제출) 그리드를 그대로 쓰면 가운데 칸이 비어서
	   [추가]/[수정] 두 요소가 좁은 칸에 몰려 버튼 글자가 줄바꿈됨 - 2분할로 재정의 */
	.nbt-pred-row:has(.nbt-pred-admin-submit) {
		grid-template-columns: auto 1fr;
	}
	.nbt-pred-row:has(.nbt-pred-admin-submit) .nbt-pred-row-meta {
		grid-column: 1;
		grid-row: 3;
		justify-self: start;
	}
	.nbt-pred-row:has(.nbt-pred-admin-submit) .nbt-pred-admin-submit {
		grid-column: 2;
		grid-row: 3;
		justify-self: end;
	}
	.nbt-pred-row:has(.nbt-pred-admin-submit):not(:has(.nbt-pred-row-meta)) .nbt-pred-admin-submit {
		grid-column: 1 / -1;
	}
}
/* 개막전 페이지 전용 라벨 스타일(한 줄+가운데+크게+bold)과 경기 간격 - 우승/수상자
   페이지에는 영향 없음 */
@media (max-width: 767px) {
	.nbt-pred-opener-row .nbt-pred-row-label {
		font-size: 18px;
		font-weight: 700;
	}
	.nbt-pred-opener-row .nbt-pred-row-label br {
		display: none;
	}
	.nbt-pred-opener-game {
		margin-bottom: 1cm;
	}
	.nbt-pred-opener-deadline-box {
		padding-top: 0.2cm;
		padding-bottom: 0.2cm;
	}
}
.nbt-pred-opener-row .nbt-pred-row-input {
	flex: 0 0 290px;
	margin-left: -0.2cm;
	transform: none;
}
.nbt-pred-opener-row .nbt-pred-avatar-picker {
	width: 44px;
	height: 44px;
}
.nbt-pred-opener-row .nbt-pred-input {
	padding: 0 12px;
	font-size: 15px;
}
.nbt-pred-opener-row .nbt-pred-opener-team-btn {
	padding: 10px 8px;
}
.nbt-pred-opener-row .nbt-pred-opener-team-btn img {
	width: 42px;
	height: 42px;
}
.nbt-pred-opener-row .nbt-pred-result-badge {
	/* 제출/초기화 버튼(.nbt-pred-mini-btn)은 우승/수상자 예측 페이지와 크기를 통일하기 위해
	   여기서 더 이상 키우지 않음 - 결과뱃지(성공/실패)만 기존 크기 유지 */
	padding: 10px 16px;
	font-size: 15px;
}
.nbt-pred-opener-row .nbt-pred-row-time-label {
	font-size: 13px;
	font-weight: 700;
}
.nbt-pred-opener-row .nbt-pred-row-time-value {
	min-height: 25px;
	min-width: 100px;
	padding: 2px 10px;
	font-size: 14px;
	line-height: 18px;
}
.nbt-pred-opener-row .nbt-pred-row-submit {
	margin-left: 1.9px;
	transform: none;
}
.nbt-pred-opener-row .nbt-pred-row-time-box {
	margin-left: auto;
	margin-right: -10px;
}
.nbt-pred-opener-row .nbt-pred-row-meta {
	flex: 0 0 90px;
}
.nbt-pred-opener-row .nbt-pred-coin {
	width: 14px;
	height: 14px;
}
.nbt-pred-opener-row .nbt-pred-coins-label {
	font-size: 12px;
}
.nbt-pred-row-label {
	flex: 0 0 180px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 600;
	color: var(--text-primary);
	word-break: keep-all;
}
.nbt-pred-weight {
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	background: #c0392b;
	border-radius: 999px;
	padding: 3px 10px;
	flex-shrink: 0;
}
.nbt-pred-judge-event-select {
	max-width: 280px;
	margin-bottom: 20px;
	background: #fff !important;
	color: #222 !important;
	border-color: #999 !important;
}
.nbt-pred-admin-submit {
	flex-direction: row !important;
	align-items: center !important;
	gap: 8px !important;
	transform: none !important;
	margin-left: 0 !important;
}
.nbt-pred-admin-submit-time {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 4px !important;
}
/* 관리자 정답 관리(PC): [추가]/[삭제]는 카드 오른쪽 끝에 딱 붙게 - 코인 영역용
   flex:0 0 90px만으로는 뒤에 남는 여백이 그대로 빈 공간으로 남아서 밀어붙임 */
.nbt-pred-row:has(.nbt-pred-admin-submit) .nbt-pred-row-meta {
	margin-left: auto;
}
.nbt-pred-slot-add-btn, .nbt-pred-slot-remove-btn {
	font-size: 12px;
	font-weight: 700;
	padding: 5px 10px;
	border-radius: 6px;
	border: 1.5px solid var(--border-color, #ccc);
	background: var(--bg-page, #fff);
	color: var(--text-secondary, #767c88);
	cursor: pointer;
	white-space: nowrap;
}
.nbt-pred-slot-add-btn:hover {
	border-color: #c0392b;
	color: #c0392b;
}
.nbt-pred-slot-remove-btn:hover {
	border-color: #c0392b;
	background: #c0392b;
	color: #fff;
}
.nbt-pred-row-input {
	flex: 1 1 260px;
	position: relative;
	min-width: 200px;
	transform: translateX(-0.5cm);
}
.nbt-pred-input, .nbt-pred-select {
	width: 100%;
	height: 44px;
	box-sizing: border-box;
	padding: 0 12px;
	border-radius: 8px;
	border: 2px solid var(--border-color, #ccc);
	background: var(--bg-page, #fff);
	color: var(--text-primary);
	font-size: 16px;
	transition: border-color .15s;
	overflow: hidden;
	text-overflow: ellipsis;
}
.nbt-pred-input:focus, .nbt-pred-select:focus {
	border-color: #e03131;
	outline: none;
}
.nbt-pred-editor {
	display: flex;
	align-items: center;
	gap: 10px;
}
.nbt-pred-input-wrap {
	flex: 1 1 auto;
	min-width: 0;
	position: relative;
}
.nbt-pred-avatar-picker {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 2px dashed var(--border-color, #ccc);
	flex-shrink: 0;
	overflow: hidden;
	background: var(--bg-page, #f4f4f5);
}
.nbt-pred-avatar-picker-img {
	display: none;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
}
.nbt-pred-avatar-picker.has-photo {
	border-style: solid;
	border-color: var(--border-color, #ccc);
}
.nbt-pred-autocomplete {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--bg-dropdown, #fff);
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0,0,0,.2);
	max-height: 240px;
	overflow-y: auto;
	z-index: 20;
	display: none;
}
.nbt-pred-autocomplete.show { display: block; }
.nbt-pred-autocomplete-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	font-size: 15px;
	color: var(--text-primary);
	cursor: pointer;
}
.nbt-pred-autocomplete-item:hover,
.nbt-pred-autocomplete-item.active {
	background: var(--bg-page, #f0f0f0);
}
.nbt-pred-photo-sm {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
	object-position: center 20%;
	background: var(--border-color, #d0d0d5);
	flex-shrink: 0;
}
.nbt-pred-photo-sm-empty {
	display: inline-block;
}
.nbt-pred-row-time-box {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
.nbt-pred-row-time-label {
	font-size: 13px;
	font-weight: 700;
	color: var(--text-secondary, #767c88);
}
.nbt-pred-row-time-value {
	min-width: 120px;
	min-height: 25px;
	box-sizing: border-box;
	padding: 2px 10px;
	border: 2px solid var(--border-color, #ccc);
	border-radius: 6px;
	background: var(--bg-page, #fff);
	color: var(--text-primary);
	font-size: 14px;
	line-height: 18px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.nbt-pred-row-meta {
	flex: 0 0 90px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 3px;
}
.nbt-pred-coins {
	display: flex;
	gap: 4px;
}
.nbt-pred-coin {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #f0b429;
	box-shadow: inset 0 0 0 2px rgba(0,0,0,.15);
	flex-shrink: 0;
}
.nbt-pred-coin.used {
	background: var(--border-color, #d0d0d5);
	box-shadow: none;
	position: relative;
}
.nbt-pred-coin.used[data-tooltip]:not([data-tooltip=""]) {
	cursor: help;
}
.nbt-pred-coin.used[data-tooltip]:not([data-tooltip=""]):hover::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: 145%;
	left: 50%;
	transform: translateX(-50%);
	background: #1e1e1e;
	color: #fff;
	padding: 5px 9px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
	z-index: 30;
	box-shadow: 0 2px 10px rgba(0,0,0,.35);
	pointer-events: none;
}
.nbt-pred-coin.used[data-tooltip]:not([data-tooltip=""]):hover::before {
	content: '';
	position: absolute;
	bottom: 118%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: #1e1e1e;
	z-index: 30;
	pointer-events: none;
}
.nbt-pred-coins-label {
	font-size: 13px;
	color: var(--text-secondary, #767c88);
}
/* 카운트다운은 원래 "제출 버튼 위에 한 줄 얹혀서 버튼을 밀어내리는" 구조였는데,
   그럼 버튼/입력창은 마감이 임박할수록 박스 안에서 아래로 처지고, 반대쪽 라벨은
   그대로 가운데라 서로 오/열이 안 맞아 보임 - 카운트다운을 레이아웃 흐름에서 빼서
   버튼 바로 위에 "떠 있는" 형태로 바꾸면, 버튼 자체는 항상 박스 정중앙을 지킴 */
.nbt-pred-countdown, .nbt-pred-input-spacer {
	display: none;
}
.nbt-pred-countdown.active {
	display: block;
	position: absolute;
	top: -20px;
	left: -50px;
	right: -50px;
	text-align: center;
	height: 16px;
	line-height: 16px;
	font-size: 13px;
	font-weight: 700;
	color: var(--text-primary);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.nbt-pred-countdown .cd-secs-ones {
	color: #e03131;
}
.nbt-pred-countdown .cd-part.flash {
	color: #e03131;
	transition: color .3s ease-out;
}
.nbt-pred-countdown.urgent {
	color: #e03131;
	font-weight: 700;
}
/* 모바일에서는 제출 버튼이 자기 줄로 줄바꿈되면서, 데스크톱용 절대위치(-50px 확장 +
   버튼 위로 살짝 뜨는 방식)가 바로 위 줄(검색창/아바타)과 겹쳐버림 - 좁은 화면에서는
   평범한 흐름 요소로 되돌려서 겹침 없이 버튼 바로 위에 자기 자리를 차지하게 함 */
@media (max-width: 640px) {
	.nbt-pred-countdown.active {
		position: static;
		display: block;
		left: auto;
		right: auto;
		margin-bottom: 4px;
	}
}
.nbt-pred-bonus-banner {
	background: linear-gradient(90deg, #f0b429, #e03131);
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	padding: 10px 14px;
	border-radius: 8px;
	margin-bottom: 16px;
}
.nbt-pred-bonus-tag {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	background: #f0b429;
	border-radius: 999px;
	padding: 1px 6px;
	margin-top: 2px;
}
.nbt-pred-row-submit {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	margin-left: 16px;
	transform: translateX(-0.5cm);
}
.nbt-pred-mini-btn {
	background: #c0392b;
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 9px 14px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
	/* '수정'->'초기화' 라벨 변경으로 글자 수가 늘어 상태별 버튼 폭이 들쭉날쭉해지는 걸 막기 위해
	   가장 긴 라벨(초기화) 기준으로 폭을 고정하고 가운데 정렬 */
	min-width: 68px;
	text-align: center;
}
.nbt-pred-mini-btn:disabled {
	background: #8b8d98;
	cursor: not-allowed;
}
.nbt-pred-mini-btn:not(:disabled) {
	box-shadow: 0 3px 8px rgba(192, 57, 43, 0.4);
	transition: transform .15s, box-shadow .15s;
}
.nbt-pred-mini-btn:not(:disabled):hover {
	transform: translateY(-1px);
	box-shadow: 0 5px 12px rgba(192, 57, 43, 0.5);
}
.nbt-pred-mini-btn[data-state="submit"]:not(:disabled) {
	background: transparent;
	color: #c0392b;
	border: 2px solid #c0392b;
	box-sizing: border-box;
	padding: 7px 12px;
}
.nbt-pred-locked {
	font-size: 14px;
	color: #8b8d98;
	font-weight: 700;
}
.nbt-pred-row[data-mode="view"] .nbt-pred-editor {
	display: none;
}
.nbt-pred-row[data-mode="editing"] .nbt-pred-result-view {
	display: none;
}
.nbt-pred-row[data-judged="correct"] .nbt-pred-editor,
.nbt-pred-row[data-judged="wrong"] .nbt-pred-editor,
.nbt-pred-row[data-judged="ended"] .nbt-pred-editor {
	display: none;
}
.nbt-pred-row[data-judged="correct"] .nbt-pred-result-view,
.nbt-pred-row[data-judged="wrong"] .nbt-pred-result-view,
.nbt-pred-row[data-judged="ended"] .nbt-pred-result-view {
	display: flex;
}
.nbt-pred-result-view {
	display: flex;
	align-items: center;
	gap: 10px;
}
.nbt-pred-result-text {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 12px;
	border-radius: 8px;
	background: var(--bg-page, #f4f4f5);
	border: 2px solid transparent;
	font-size: 16px;
	color: var(--text-primary);
}
.nbt-pred-photo {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	object-position: center 20%;
	background: var(--border-color, #d0d0d5);
	border: 2px solid var(--border-color, #ccc);
	flex-shrink: 0;
}
.nbt-pred-result-value {
	font-weight: 700;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.nbt-pred-current {
	font-size: 14px;
	color: var(--text-secondary, #767c88);
	margin-top: 2px;
}
.nbt-pred-current strong {
	color: var(--text-primary);
}
.nbt-pred-result-badge {
	display: inline-block;
	padding: 9px 14px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	white-space: nowrap;
	cursor: help;
	position: relative;
	/* 제출/초기화 버튼(.nbt-pred-mini-btn)과 가로 폭을 통일 */
	min-width: 68px;
	text-align: center;
}
.nbt-pred-result-badge-success {
	background: #2f9e44;
}
.nbt-pred-result-badge-fail {
	background: #1a1a1a;
}
.color_scheme_dark .nbt-pred-result-badge-success {
	background: #3fbf62;
}
.color_scheme_dark .nbt-pred-result-badge-fail {
	background: #000000;
}
.nbt-pred-result-badge-ended {
	background: #8b8d98;
	cursor: default;
}
.nbt-pred-result-badge[data-tooltip]:not([data-tooltip=""]):hover::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: 145%;
	left: 50%;
	transform: translateX(-50%);
	background: #1e1e1e;
	color: #fff;
	padding: 5px 9px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
	z-index: 30;
	box-shadow: 0 2px 10px rgba(0,0,0,.35);
	pointer-events: none;
}
.nbt-pred-result-badge[data-tooltip]:not([data-tooltip=""]):hover::before {
	content: '';
	position: absolute;
	bottom: 118%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: #1e1e1e;
	z-index: 30;
	pointer-events: none;
}

/* nbt-pred-admin-white-inputs: 예측 이벤트 관리자 화면(정답 입력/제출 현황/안내문 수정)의
   입력창들이 --bg-page(연회색)를 써서 배경과 잘 안 구분되던 문제 - 관리자 화면만 흰색으로 고정.
   .nbt-pred-admin 스코프라 실제 이용자용 페이지(개막전/우승수상자/NBA컵)에는 영향 없음. */
.nbt-pred-admin .nbt-pred-text-value,
.nbt-pred-admin .nbt-pred-dt-date,
.nbt-pred-admin .nbt-pred-dt-time,
.nbt-pred-admin .nbt-pred-input,
.nbt-pred-admin .nbt-pred-select {
	background: #fff !important;
	color: #222 !important;
}

/* nbt-pred-hub-admin-links: 허브 페이지 제목 옆 관리자 바로가기 (박스 없이 한 줄 텍스트+링크) */
.nbt-pred-hub-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	position: relative;
	min-height: 64px;
}
.nbt-pred-hub-header .nbt-pred-title {
	margin-bottom: 0;
}
.nbt-pred-hub-admin-links {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--text-primary);
	white-space: nowrap;
}
.nbt-pred-hub-admin-links a {
	color: var(--text-primary);
}
.nbt-pred-hub-admin-links a:hover {
	color: #e03131;
	text-decoration: underline;
}
/* nbt-pred-hub-my-team: 허브 페이지 상단, 관리자 링크와 같은 자리에 뜨는 일반 회원용
   "나의 응원팀" 표시 - 제목 바로 옆(baseline)이 아니라 한 단 내려서 오른쪽에 살짝
   여백을 두고 자리잡게 함 (사용자가 직접 스샷으로 위치/크기 피드백) */
/* position:absolute로 플로우에서 빼서, 이 박스가 2줄이라 더 커도 헤더 행(flex row) 자체의
   높이에 영향을 안 주게 함 - 안 그러면 제목 왼쪽 밑에 불필요한 빈 공간이 생김 */
.nbt-pred-hub-my-team {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0px;
	position: absolute;
	top: 14px;
	right: 6px;
}
.nbt-pred-hub-my-team-season {
	font-size: 12px;
	font-weight: 700;
	color: var(--text-secondary);
}
.nbt-pred-hub-my-team-value {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 18px;
	font-weight: 700;
	color: var(--text-primary);
}
.nbt-pred-hub-my-team-value img {
	width: 24px;
	height: 24px;
	object-fit: contain;
}
@media (max-width: 767px) {
	.nbt-pred-hub-my-team {
		align-items: flex-start;
		position: static;
		margin-top: 8px;
		margin-right: 0;
	}
}
@media (max-width: 767px) {
	.nbt-pred-hub-header {
		flex-direction: column;
		align-items: flex-start;
	}
	.nbt-pred-hub-admin-links {
		white-space: normal;
		font-size: 14px;
	}
}

/* nbt-pred-hub-btn-bottom-right: 허브 카드의 참여하기 버튼을 카드 오른쪽 하단에 고정
   (.nbt-pred-card가 flex-column이라 auto margin으로 밀어냄) - admin_texts.html의 저장 버튼 등
   다른 .nbt-pred-btn에는 영향 없도록 .nbt-pred-card 안에서만 적용 */
.nbt-pred-card .nbt-pred-btn {
	margin-left: auto;
	margin-top: auto;
}

/* nbt-pred-row-dropdown-active: 선수 검색 드롭다운이 열려있는 동안만 그 행 전체를
   다음 행보다 위로 띄움 (.nbt-pred-row-input의 transform이 만드는 스태킹 컨텍스트 때문에
   드롭다운 자체의 z-index만으로는 다음 행을 못 뚫고 가려지는 문제 해결) */
.nbt-pred-row.nbt-pred-row-dropdown-active {
	position: relative;
	z-index: 30;
}

/* nbt-pred-submissions-reset-note: 제출 현황에서 제출했다가 초기화해서 값이 빈 항목임을 명시 */
.nbt-pred-submissions-reset-note {
	color: var(--text-secondary, #888);
	font-style: italic;
	font-size: 13px;
}

.nbt-pred-past-seasons-link {
	display: block;
	font-size: 13px;
	color: var(--text-secondary, #888);
	margin-top: 2px;
}
.nbt-pred-past-seasons-link:hover {
	text-decoration: underline;
}

/* nbt-pred-team-confirm: 이벤트 페이지를 이번 시즌 들어 처음 열었을 때 뜨는 응원팀 확인/선택 팝업 */
.nbt-pred-team-confirm-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.nbt-pred-team-confirm-modal {
	background: var(--bg-dropdown, #fff);
	color: var(--text-primary, #222);
	border-radius: 14px;
	padding: 24px 18px;
	max-width: 460px;
	width: 100%;
	max-height: 85vh;
	overflow-y: auto;
	box-shadow: 0 10px 40px var(--shadow-color, rgba(0, 0, 0, 0.25));
	position: relative;
}
.nbt-pred-team-confirm-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var(--text-secondary, #888);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.nbt-pred-team-confirm-close:hover {
	background: var(--bg-hover, #f4f4f4);
	color: var(--text-primary, #222);
}
.nbt-pred-team-confirm-modal h3 {
	margin: 0 0 10px;
	font-size: 21px;
	font-weight: 700;
	color: var(--text-primary, #222);
}
.nbt-pred-team-confirm-desc {
	margin: 0 0 16px;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--text-primary, #333);
}
.nbt-pred-team-confirm-warn {
	color: #e03131;
	font-weight: 700;
}
.nbt-pred-team-confirm-grid {
	margin-bottom: 16px;
}
.nbt-pred-team-confirm-row {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin-bottom: 4px;
}
.nbt-pred-team-confirm-label {
	flex: 0 0 auto;
	width: 40px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--text-secondary, #999);
	white-space: nowrap;
	padding-top: 9px;
}
.nbt-pred-team-confirm-items {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	flex: 1;
	min-width: 0;
}
.nbt-pred-team-confirm-item {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	border: 1px solid transparent;
	cursor: pointer;
}
.nbt-pred-team-confirm-item:hover {
	background: var(--bg-hover, #f4f4f4);
	border-color: var(--border-color, #e9ecef);
}
.nbt-pred-team-confirm-item img {
	width: 32px;
	height: 32px;
	object-fit: contain;
}
@media (max-width: 420px) {
	.nbt-pred-team-confirm-items {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.nbt-pred-team-confirm-items::-webkit-scrollbar {
		display: none;
	}
}
.nbt-pred-team-confirm-none {
	display: block;
	text-align: center;
	margin-top: 10px;
	padding: 11px 8px;
	border-radius: 10px;
	border: 1.5px solid #1e3a5f;
	background: rgba(30, 58, 95, .07);
	font-size: 15.5px;
	font-weight: 700;
	color: #1e3a5f;
	text-decoration: none;
	cursor: pointer;
}
.nbt-pred-team-confirm-none:hover {
	background: #1e3a5f;
	color: #fff;
}
.color_scheme_dark .nbt-pred-team-confirm-none {
	border-color: #8fb0d8;
	background: rgba(143, 176, 216, .12);
	color: #d6e4f5;
}
.color_scheme_dark .nbt-pred-team-confirm-none:hover {
	background: #8fb0d8;
	color: #10213a;
}
.color_scheme_dark .nbt-pred-team-confirm-warn {
	color: #ff6b6b;
}
.nbt-pred-team-confirm-current {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	background: var(--bg-page, #f4f4f4);
	border-radius: 10px;
	margin-bottom: 14px;
}
.nbt-pred-team-confirm-current img {
	width: 40px;
	height: 40px;
	object-fit: contain;
}
.nbt-pred-team-confirm-current strong {
	font-size: 16px;
	color: var(--text-primary, #222);
}
.nbt-pred-team-confirm-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.nbt-pred-team-confirm-actions button {
	flex: 1 1 auto;
	padding: 11px 14px;
	border-radius: 8px;
	border: 1px solid var(--border-color, #e9ecef);
	background: var(--bg-dropdown, #fff);
	color: var(--text-primary, #222);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.nbt-pred-team-confirm-actions button:disabled {
	opacity: 0.5;
	cursor: default;
}
.nbt-pred-team-confirm-keep {
	background: var(--accent, #c0392b) !important;
	border-color: var(--accent, #c0392b) !important;
	color: #fff !important;
	box-shadow: 0 3px 8px rgba(192, 57, 43, 0.4);
	transition: transform .15s, box-shadow .15s;
}
.nbt-pred-team-confirm-keep:hover {
	transform: translateY(-1px);
	box-shadow: 0 5px 12px rgba(192, 57, 43, 0.5);
}
.nbt-pred-team-confirm-skip {
	background: transparent !important;
	color: var(--text-secondary, #888) !important;
	border-color: transparent !important;
	text-decoration: underline;
}


/* nbt-pred-fandom: 허브 카드 안, 참여자들의 응원팀 분포를 보여주는 누적 막대 그래프 */
.nbt-pred-fandom {
	margin: 14px 0;
}
/* My Picks & Results 통계줄과 전체 참여 현황 배너 사이 여백이 35px(flex-gap 10 +
   stat-row margin-bottom 11 + 여기 margin-top 14)로 너무 넓다는 요청 - 40% 줄여서
   21px로(여기 margin-top만 0으로 빼면 10+11=21, 정확히 맞음) */
.nbt-pred-card > .nbt-pred-fandom {
	margin-top: 0;
}
/* 통계 타일은 기존 "제출 완료" 줄(.nbt-pred-hub-stat-row/.nbt-pred-dash-*)을 그대로
   재사용함 - 폰트/빨간 숫자 스타일을 똑같이 맞추기 위해 새 클래스를 따로 안 만듦.
   다만 최다/최소 팬덤 칸은 로고+코드가 나란히 들어가니 그 부분만 inline-flex로 정렬 */
.nbt-pred-fandom .nbt-pred-dash-value {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.nbt-pred-fandom .nbt-pred-dash-value img {
	width: 16px;
	height: 16px;
	object-fit: contain;
	flex: 0 0 auto;
}
.nbt-pred-fandom-seg-fa {
	color: #fff;
	font-weight: 700;
	font-size: 12px;
}
.nbt-pred-fandom-seg[data-tooltip]:not([data-tooltip=""]):hover::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: 145%;
	left: 50%;
	transform: translateX(-50%);
	background: #1e1e1e;
	color: #fff;
	padding: 5px 9px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
	z-index: 30;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
	pointer-events: none;
}
.nbt-pred-fandom-seg[data-tooltip]:not([data-tooltip=""]):hover::before {
	content: '';
	position: absolute;
	bottom: 118%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: #1e1e1e;
	z-index: 30;
	pointer-events: none;
}
/* nbt-pred-fandom-tie: 최다/최소 팬덤이 여러 팀 동률일 때("N팀") 호버하면 뜨는 말풍선
   - 코인 사용 기록(.nbt-pred-coin.used)/정답 배지(.nbt-pred-result-badge)랑 같은 말풍선
   스타일이지만, 저 둘은 한 줄짜리 짧은 텍스트라 nowrap이고 여긴 팀 이름이 여러 개 들어가서
   줄바꿈 + 최대 너비를 둠 */
.nbt-pred-fandom-tie {
	position: relative;
	cursor: help;
}
.nbt-pred-fandom-tie[data-tooltip]:not([data-tooltip=""]):hover::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: 145%;
	left: 50%;
	transform: translateX(-50%);
	background: #1e1e1e;
	color: #fff;
	padding: 7px 10px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 600;
	white-space: normal;
	width: max-content;
	max-width: 220px;
	line-height: 1.5;
	text-align: left;
	z-index: 30;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
	pointer-events: none;
}
.nbt-pred-fandom-tie[data-tooltip]:not([data-tooltip=""]):hover::before {
	content: '';
	position: absolute;
	bottom: 118%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: #1e1e1e;
	z-index: 30;
	pointer-events: none;
}
.nbt-pred-fandom-bar {
	display: flex;
	height: 30px;
	margin-top: -5px;
}
/* overflow:hidden을 바에 직접 주면 구간 위로 뜨는 호버 말풍선까지 같이 잘려서,
   둥근 모서리는 양 끝 구간에만 각각 줘서 흉내냄 (바 자체는 overflow:visible 유지) */
.nbt-pred-fandom-bar .nbt-pred-fandom-seg:first-child {
	border-radius: 8px 0 0 8px;
}
.nbt-pred-fandom-bar .nbt-pred-fandom-seg:last-child {
	border-radius: 0 8px 8px 0;
}
.nbt-pred-fandom-seg {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	cursor: help;
	min-width: 2px;
	border-right: 1px solid rgba(255, 255, 255, 0.4);
}
.nbt-pred-fandom-seg:last-child {
	border-right: none;
}
.nbt-pred-fandom-seg img {
	width: 18px;
	height: 18px;
	object-fit: contain;
	filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
}


/* nbt-pred-results-preview: 관리자가 "성적표 쪽지 발송" 누르기 전에 실제 쪽지가 어떻게
   생겼는지 미리 보여주는 박스 - 받는 사람마다 달라지는 적중개수/등수 부분은 <em>으로 표시 */
.nbt-pred-results-preview {
	margin-top: 4px;
	margin-bottom: 16px;
	border: 1px solid var(--border-color, #e9ecef);
	border-radius: 10px;
	overflow: hidden;
}
.nbt-pred-results-preview-title {
	background: var(--bg-page, #f4f4f4);
	padding: 10px 14px;
	font-weight: 700;
	font-size: 14px;
	color: var(--text-primary, #222);
	border-bottom: 1px solid var(--border-color, #e9ecef);
}
.nbt-pred-results-preview-body {
	padding: 12px 14px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--text-primary, #222);
}
.nbt-pred-results-preview-body em {
	font-style: normal;
	color: var(--text-secondary, #888);
	background: var(--bg-page, #f4f4f4);
	padding: 1px 4px;
	border-radius: 4px;
}
.nbt-pred-results-preview-body a {
	color: #1a73e8;
	text-decoration: underline;
}

/* 2026-10-15: 경기 최다 득점자 드롭다운 - 누르면 두 팀 선수 전체(팀별 묶음, 사진+한글/영문 이름+포지션) */
.nbt-pred-input-wrap.is-dropdown .nbt-pred-input { cursor: pointer; padding-right: 34px; }
.nbt-pred-input-wrap.is-dropdown .nbt-pred-input:disabled { cursor: default; }
.nbt-pred-input-wrap.is-dropdown::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--text-secondary, #888); border-bottom: 2px solid var(--text-secondary, #888); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.nbt-pred-input-wrap.is-dropdown .nbt-pred-autocomplete { max-height: min(380px, 60vh); overscroll-behavior: contain; }
.nbt-pred-autocomplete-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 13px; font-weight: 800; color: var(--text-secondary, #666); background: var(--bg-page, #f4f4f5); border-bottom: 1px solid var(--border-color, #e5e5e5); }
.nbt-pred-autocomplete-head img { width: 22px; height: 22px; object-fit: contain; flex: none; }
.nbt-pred-input-wrap.is-dropdown .nbt-pred-autocomplete-item { gap: 10px; padding: 7px 12px; }
.nbt-pred-input-wrap.is-dropdown .nbt-pred-photo-sm { width: 36px; height: 36px; }
.nbt-pred-dd-name { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.nbt-pred-dd-name b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nbt-pred-dd-name small { font-size: 12px; color: var(--text-secondary, #888); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nbt-pred-dd-pos { flex: none; min-width: 30px; font-size: 12px; color: var(--text-secondary, #888); text-align: center; }
.nbt-pred-autocomplete-item.is-selected { background: rgba(245, 129, 31, .14); }
/* 좁은 화면: 목록을 왼쪽 사진 동그라미(44px+간격) 위까지 넓혀서 이름이 덜 잘리게 */
@media (max-width: 480px) {
	.nbt-pred-input-wrap.is-dropdown .nbt-pred-autocomplete { left: -54px; }
	.nbt-pred-input-wrap.is-dropdown .nbt-pred-autocomplete-item { gap: 8px; padding: 7px 10px; }
	.nbt-pred-input-wrap.is-dropdown .nbt-pred-photo-sm { width: 32px; height: 32px; }
	.nbt-pred-dd-pos { min-width: 24px; }
}

/* 2026-10-15: 드롭다운 평균 득점 열(득점 높은 순 정렬) - 숫자 줄 맞춤을 위해 고정 폭+가운데 */
.nbt-pred-dd-sort { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--text-secondary, #888); white-space: nowrap; }
.nbt-pred-dd-ppg { flex: none; width: 52px; display: flex; flex-direction: column; align-items: center; line-height: 1.2; font-size: 12px; color: var(--text-secondary, #888); font-variant-numeric: tabular-nums; }
.nbt-pred-dd-ppg b { font-size: 15px; font-weight: 800; color: var(--text-primary); }
.nbt-pred-dd-ppg small { font-size: 10.5px; white-space: nowrap; }
@media (max-width: 480px) {
	.nbt-pred-dd-ppg { width: 46px; }
	.nbt-pred-dd-sort { font-size: 10.5px; }
}
/* 목록 폭: PC에서도 왼쪽 사진 동그라미(44px+간격) 위까지 넓히고, 최소 320px(단 화면 폭-32px를 넘지 않게) - 이름/평균 득점/팀 제목이 안 잘리게 */
.nbt-pred-input-wrap.is-dropdown .nbt-pred-autocomplete { left: -54px; right: auto; width: max(calc(100% + 54px), min(320px, calc(100vw - 32px))); }
.nbt-pred-autocomplete-head > span:not(.nbt-pred-dd-sort) { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nbt-pred-dd-sort { flex: none; }

/* 2026-10-15: 선수·팀 이름 관리(관리자) */
.nbt-names-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.nbt-names-tab { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border-color, #ddd); color: var(--text-primary); text-decoration: none; font-weight: 700; font-size: 14px; }
.nbt-names-tab.is-on { background: #c0392b; border-color: #c0392b; color: #fff; }
.nbt-names-tab-review { border-color: rgba(245, 129, 31, .6); color: #d2691e; }
.nbt-names-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.nbt-names-filter .nbt-pred-input { flex: 1 1 220px; min-width: 0; height: 38px; padding: 0 12px; border: 1px solid var(--border-color, #ccc); border-radius: 8px; box-sizing: border-box; }
.nbt-names-filter .nbt-pred-select { height: 38px; width: auto; }
.nbt-names-count { font-size: 13px; color: var(--text-secondary, #767c88); margin: 4px 0 8px; }
.nbt-names-table-wrap { overflow-x: auto; }
.nbt-names-table td { vertical-align: middle; }
.nbt-names-player { display: flex; align-items: center; gap: 8px; min-width: 170px; }
.nbt-names-player img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: center 20%; background: var(--border-color, #ddd); flex: none; }
.nbt-names-player span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.nbt-names-player small { font-size: 12px; color: var(--text-secondary, #888); }
.nbt-names-team { white-space: nowrap; }
.nbt-names-team img { width: 22px; height: 22px; object-fit: contain; vertical-align: middle; }
.nbt-names-table .nbt-pred-input { width: 100%; height: 34px; padding: 0 10px; font-size: 14px; border: 1px solid var(--border-color, #ccc); border-radius: 6px; box-sizing: border-box; }
.nbt-names-ko, .nbt-names-team-ko { min-width: 130px; }
.nbt-names-team-short { min-width: 100px; }
.nbt-names-table .nbt-names-aliases { min-width: 180px; font-size: 13px; }
.nbt-names-en { font-size: 13px; color: var(--text-secondary, #888); white-space: nowrap; }
.nbt-names-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--bg-page, #eee); color: var(--text-secondary, #666); }
.nbt-names-badge.is-auto { background: rgba(245, 129, 31, .15); color: #d2691e; }
.nbt-names-badge.is-admin { background: rgba(39, 174, 96, .15); color: #1e8449; }
.nbt-names-badge.is-none { background: rgba(192, 57, 43, .12); color: #c0392b; }
.nbt-names-actions { white-space: nowrap; }
.nbt-names-table .nbt-names-save { padding: 6px 12px; font-size: 14px; min-width: 0; }
.nbt-names-msg { display: block; min-height: 15px; margin-top: 3px; font-size: 12px; color: var(--text-secondary, #888); }
.nbt-names-msg.is-ok { color: #1e8449; }
.nbt-names-msg.is-err { color: #c0392b; white-space: normal; }
.nbt-names-empty { text-align: center !important; color: var(--text-secondary, #888) !important; padding: 24px !important; }
.nbt-names-pages { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin: 14px 0; }
.nbt-names-pages a, .nbt-names-pages span { min-width: 32px; padding: 6px 8px; text-align: center; border-radius: 6px; border: 1px solid var(--border-color, #ddd); text-decoration: none; color: var(--text-primary); font-size: 13px; box-sizing: border-box; }
.nbt-names-pages .is-on { background: #c0392b; border-color: #c0392b; color: #fff; }

/* 2026-10-15: 팬덤 막대 로고 - 6% 기준 대신 실제 폭 기준(형 지적: 참여자가 적으면 1명짜리 팀은 PC에서 폭이 충분해도 로고가 없었음).
   로고/FA 글자는 항상 넣고, 구간 폭이 로고(18px)+여백보다 좁을 때만 숨김 */
.nbt-pred-fandom-seg { container-type: inline-size; }
@container (max-width: 23px) {
	.nbt-pred-fandom-seg img { width: 14px; height: 14px; } /* 좁은 구간(폰에서 1명짜리 팀 등)은 조금 작게 */
}
@container (max-width: 15.5px) {
	.nbt-pred-fandom-seg img { display: none; }
}
@container (max-width: 25px) {
	.nbt-pred-fandom-seg-fa { display: none; }
}

/* 2026-10-31(형 요청): 안내문 편집 화면 맨 위 "쓸 수 있는 토큰" 표 */
.nbt-pred-token-help { background: var(--bg-dropdown, #fff); border: 1px solid var(--border-color, rgba(128,128,128,.25)); border-radius: 10px; padding: 12px 14px; margin: -8px 0 18px; }
.nbt-pred-token-help-h { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.nbt-pred-token-help-h small { font-size: 12.5px; font-weight: 400; color: var(--text-secondary, #767c88); margin-left: 6px; }
.nbt-pred-token-help-scroll { overflow-x: auto; }
.nbt-pred-token-help table { width: 100%; border-collapse: collapse; font-size: 13.5px; color: var(--text-primary); }
.nbt-pred-token-help th { text-align: left; font-weight: 700; color: var(--text-secondary, #767c88); padding: 5px 8px; border-bottom: 1px solid var(--border-color, rgba(128,128,128,.25)); white-space: nowrap; }
.nbt-pred-token-help td { padding: 6px 8px; border-bottom: 1px solid var(--border-color, rgba(128,128,128,.15)); vertical-align: top; }
.nbt-pred-token-help tr:last-child td { border-bottom: none; }
.nbt-pred-token-help td:first-child, .nbt-pred-token-help td:nth-child(3) { white-space: nowrap; }
.nbt-pred-token-help code { font-family: Consolas, "D2Coding", monospace; font-size: 13px; font-weight: 700; color: #c0392b; background: rgba(192,57,43,.08); border-radius: 4px; padding: 1px 5px; }

/* 2026-10-31(형 요청): 잘린 글자 전체를 보여 주는 말풍선(prediction.js 맨 아래). 화면 맨 위에 떠서 박스에 가려지지 않음 */
.nbt-trunc-tip { position: fixed; left: 0; top: 0; z-index: 100000; box-sizing: border-box; width: max-content; max-width: min(280px, calc(100vw - 16px)); padding: 7px 11px; border-radius: 7px; background: #1e1e1e; color: #fff; font-size: 13px; font-weight: 600; line-height: 1.45; text-align: left; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); pointer-events: none; visibility: hidden; opacity: 0; transform: translateY(3px); transition: opacity .12s, transform .12s, visibility .12s; }
.nbt-trunc-tip.on { visibility: visible; opacity: 1; transform: none; }
/* 두 줄(위 작은 줄 + 본문)은 가운데 맞춤, 위 줄도 같은 크기·색(형 요청) */
.nbt-trunc-tip.two { text-align: center; }
.nbt-trunc-tip.rich { max-width: min(310px, calc(100vw - 16px)); padding: 10px 12px; font-weight: 500; }
.nbt-trunc-tip small { display: block; font-size: inherit; font-weight: inherit; color: inherit; }
.nbt-trunc-tip::after { content: ''; position: absolute; left: var(--ax, 50%); top: 100%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #1e1e1e; }
.nbt-trunc-tip.below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #1e1e1e; }
.color_scheme_dark .nbt-trunc-tip { background: #3a404b; box-shadow: 0 4px 16px rgba(0, 0, 0, .55); }
.color_scheme_dark .nbt-trunc-tip::after { border-top-color: #3a404b; }
.color_scheme_dark .nbt-trunc-tip.below::after { border-top-color: transparent; border-bottom-color: #3a404b; }