.spg-match-list,
.spg-match-detail,
.spg-point-balance,
.spg-point-history,
.spg-mypage,
.spg-prediction-history,
.spg-ranking,
.spg-badges,
.spg-favorite-team,
.spg-notifications,
.spg-notification-badge,
.spg-register-form,
.spg-login-form,
.spg-notice-box,
.spg-home-dashboard {
	--spg-border: #dcdcde;
	--spg-muted: #646970;
	--spg-surface: #ffffff;
	--spg-soft: #f6f7f7;
	--spg-accent: #2271b1;
	--spg-success: #008a20;
	color: #1d2327;
}

.spg-match-list *,
.spg-match-detail *,
.spg-point-history *,
.spg-mypage *,
.spg-prediction-history *,
.spg-ranking *,
.spg-badges * {
	box-sizing: border-box;
}

.spg-favorite-team *,
.spg-notifications * {
	box-sizing: border-box;
}

.spg-match-list__items {
	display: grid;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.spg-match-list__item,
.spg-match-detail,
.spg-mypage,
.spg-prediction-history,
.spg-ranking,
.spg-badges,
.spg-favorite-team:not(.spg-favorite-team--embedded),
.spg-notifications {
	border: 1px solid var(--spg-border);
	border-radius: 8px;
	background: var(--spg-surface);
	padding: 16px;
}

.spg-match-list__item strong,
.spg-match-detail h2,
.spg-mypage h2,
.spg-ranking h2,
.spg-badges h2,
.spg-notifications h2,
.spg-notifications h3,
.spg-favorite-team h2,
.spg-favorite-team h3,
.spg-favorite-team h4 {
	text-wrap: balance;
}

.spg-match-list__item div,
.spg-match-detail p,
.spg-ranking p,
.spg-badges p,
.spg-notifications p,
.spg-favorite-team p,
.spg-prediction-table small {
	color: var(--spg-muted);
}

.spg-point-balance {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	border: 1px solid var(--spg-border);
	border-radius: 8px;
	background: var(--spg-soft);
	padding: 10px 12px;
}

.spg-point-balance__value,
.spg-stat-list dd,
.spg-ranking-table td,
.spg-prediction-table td {
	font-variant-numeric: tabular-nums;
}

.spg-point-balance__value {
	color: var(--spg-success);
	font-size: 1.25em;
}

.spg-prediction-form {
	display: grid;
	gap: 14px;
	margin-top: 16px;
}

.spg-prediction-form fieldset {
	border: 1px solid var(--spg-border);
	border-radius: 8px;
	margin: 0;
	padding: 12px;
}

.spg-prediction-form legend {
	font-weight: 700;
	padding: 0 4px;
}

.spg-prediction-form__selection {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 8px 0;
	min-height: 32px;
}

.spg-prediction-form input[type="number"],
.spg-favorite-team input[type="text"],
.spg-favorite-team select,
.spg-register-form input,
.spg-login-form input {
	width: min(100%, 320px);
	border: 1px solid var(--spg-border);
	border-radius: 6px;
	padding: 8px 10px;
}

.spg-prediction-form button,
.spg-favorite-team button,
.spg-notifications button,
.spg-register-form button,
.spg-login-form button {
	border: 0;
	border-radius: 6px;
	background: var(--spg-accent);
	color: #ffffff;
	cursor: pointer;
	font-weight: 700;
	line-height: 1.2;
	padding: 10px 14px;
}

.spg-prediction-form button:hover,
.spg-favorite-team button:hover,
.spg-notifications button:hover,
.spg-register-form button:hover,
.spg-login-form button:hover {
	filter: brightness(0.95);
}

.spg-prediction-form button:focus-visible,
.spg-favorite-team button:focus-visible,
.spg-notifications button:focus-visible,
.spg-favorite-team input:focus-visible,
.spg-favorite-team select:focus-visible,
.spg-register-form button:focus-visible,
.spg-login-form button:focus-visible,
.spg-match-list a:focus-visible,
.spg-mypage a:focus-visible {
	outline: 2px solid var(--spg-accent);
	outline-offset: 2px;
}

.spg-auth-form__bot-widget {
	margin: 12px 0;
	min-height: 64px;
}

.spg-auth-form__bot-warning {
	border: 1px solid #ffabaf;
	border-radius: 8px;
	background: #fcf0f1;
	margin: 12px 0;
	padding: 10px 12px;
}

.spg-prediction-message,
.spg-auth-message,
.spg-favorite-team__message {
	border-radius: 8px;
	margin: 0 0 12px;
	padding: 10px 12px;
}

.spg-prediction-message-success,
.spg-auth-message-success {
	border: 1px solid #68de7c;
	background: #edfaef;
}

.spg-prediction-message-error,
.spg-auth-message-error,
.spg-login-required {
	border: 1px solid #ffabaf;
	border-radius: 8px;
	background: #fcf0f1;
	padding: 10px 12px;
}

.spg-stat-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 10px;
	margin: 16px 0;
}

.spg-stat-list dt,
.spg-stat-list dd {
	margin: 0;
}

.spg-stat-list dt {
	color: var(--spg-muted);
	font-size: 0.9em;
}

.spg-stat-list dd {
	font-size: 1.25em;
	font-weight: 700;
}

.spg-badge-summary {
	border-top: 1px solid var(--spg-border);
	margin: 18px 0;
	padding-top: 16px;
}

.spg-favorite-team--embedded {
	border-top: 1px solid var(--spg-border);
	margin: 18px 0;
	padding-top: 16px;
}

.spg-favorite-team__current {
	display: grid;
	gap: 6px 12px;
	grid-template-columns: minmax(120px, max-content) 1fr;
	margin: 10px 0 14px;
}

.spg-favorite-team__current dt,
.spg-favorite-team__current dd {
	margin: 0;
}

.spg-favorite-team__current dt {
	color: var(--spg-muted);
	font-size: 0.9em;
}

.spg-favorite-team__current dd {
	font-weight: 700;
}

.spg-favorite-team__empty {
	margin: 0 0 14px;
}

.spg-favorite-team__form {
	display: grid;
	gap: 12px;
	max-width: 520px;
}

.spg-favorite-team__form p {
	margin: 0;
}

.spg-favorite-team__custom {
	display: grid;
	gap: 12px;
}

.spg-favorite-team__form label {
	display: block;
	font-weight: 700;
	margin-bottom: 5px;
}

.spg-favorite-team__clear-label {
	align-items: center;
	display: flex;
	font-weight: 400;
	gap: 8px;
	margin-bottom: 0;
}

.spg-badges .spg-badge-summary {
	border-top: 0;
	margin-bottom: 0;
	padding-top: 0;
}

.spg-title-line {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin: 10px 0 14px;
}

.spg-title-line__label {
	color: var(--spg-muted);
	font-size: 0.9em;
}

.spg-title-line__value {
	color: #1d2327;
	font-size: 1.2em;
}

.spg-badge-progress {
	align-items: baseline;
	display: inline-flex;
	gap: 8px;
	margin: 0 0 10px;
}

.spg-badge-progress span {
	color: var(--spg-muted);
	font-size: 0.9em;
}

.spg-badge-progress strong {
	font-variant-numeric: tabular-nums;
}

.spg-badge-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
}

.spg-badge {
	border: 1px solid var(--spg-border);
	border-radius: 8px;
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	max-width: 220px;
	min-height: 52px;
	padding: 8px 10px;
}

.spg-badge__label {
	font-weight: 700;
	line-height: 1.2;
}

.spg-badge small {
	color: var(--spg-muted);
	line-height: 1.35;
}

.spg-badge--earned {
	border-color: #68de7c;
	background: #edfaef;
}

.spg-badge--locked {
	background: var(--spg-soft);
	color: var(--spg-muted);
}

.spg-badge-summary__next {
	margin-top: 14px;
}

.spg-badge-summary__empty {
	margin: 0;
}

.spg-mypage__notifications {
	border-top: 1px solid var(--spg-border);
	margin: 18px 0;
	padding-top: 16px;
}

.spg-notifications__header {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	justify-content: space-between;
	margin-bottom: 12px;
}

.spg-notifications__header h2,
.spg-notifications__header h3 {
	margin: 0;
}

.spg-notification-badge {
	background: var(--spg-soft);
	border: 1px solid var(--spg-border);
	border-radius: 999px;
	color: #1d2327;
	display: inline-flex;
	font-size: 0.9em;
	font-weight: 700;
	line-height: 1.2;
	padding: 5px 10px;
	white-space: nowrap;
}

.spg-notifications__status {
	border: 1px solid #68de7c;
	border-radius: 8px;
	background: #edfaef;
	margin: 0 0 12px;
	padding: 10px 12px;
}

.spg-notifications__list {
	display: grid;
	gap: 10px;
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.spg-notifications__item {
	align-items: flex-start;
	border: 1px solid var(--spg-border);
	border-radius: 8px;
	display: grid;
	gap: 10px;
	grid-template-columns: 1fr auto;
	padding: 12px;
}

.spg-notifications__item--unread {
	border-color: #72aee6;
	background: #f0f6fc;
}

.spg-notifications__title {
	display: block;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.spg-notifications__message {
	margin: 6px 0;
	overflow-wrap: anywhere;
}

.spg-notifications__meta {
	display: flex;
	flex-wrap: wrap;
	font-size: 0.9em;
	gap: 4px 10px;
	margin: 0;
}

.spg-notifications__actions {
	margin: 0;
}

.spg-notifications__link {
	margin: 12px 0 0;
}

.spg-mypage {
	display: grid;
	gap: 18px;
}

.spg-mypage__header {
	border-bottom: 1px solid var(--spg-border);
	padding-bottom: 16px;
}

.spg-mypage__eyebrow {
	color: var(--spg-muted);
	font-size: 0.9em;
	font-weight: 700;
	margin: 0 0 4px;
}

.spg-mypage__header h2 {
	margin: 0 0 14px;
}

.spg-mypage__header-grid {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.spg-mypage__header-item,
.spg-mypage-summary__card,
.spg-mypage__action-panel {
	border: 1px solid var(--spg-border);
	border-radius: 8px;
	background: var(--spg-soft);
	padding: 12px;
}

.spg-mypage__header-item span,
.spg-mypage-summary__label {
	color: var(--spg-muted);
	display: block;
	font-size: 0.9em;
	margin-bottom: 4px;
}

.spg-mypage__header-item strong,
.spg-mypage-summary__value {
	color: #1d2327;
	font-size: 1.18em;
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.spg-mypage__warning {
	border: 1px solid #ffabaf;
	border-radius: 8px;
	background: #fcf0f1;
	margin: 14px 0 0;
	padding: 10px 12px;
}

.spg-mypage__section {
	border-top: 1px solid var(--spg-border);
	padding-top: 16px;
}

.spg-mypage__section:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.spg-mypage__section-head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	justify-content: space-between;
	margin-bottom: 10px;
}

.spg-mypage__section-title {
	margin: 0 0 10px;
}

.spg-mypage__section-head .spg-mypage__section-title {
	margin-bottom: 0;
}

.spg-mypage-summary {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	margin: 0;
}

.spg-mypage-summary__card {
	min-height: 82px;
}

.spg-mypage-summary__card dt,
.spg-mypage-summary__card dd {
	margin: 0;
}

.spg-mypage__actions {
	margin: 12px 0 0;
}

.spg-mypage__button,
.spg-mypage__text-link {
	align-items: center;
	border-radius: 6px;
	display: inline-flex;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.spg-mypage__button {
	background: var(--spg-accent);
	color: #ffffff;
	padding: 10px 14px;
}

.spg-mypage__button:hover {
	color: #ffffff;
	filter: brightness(0.95);
}

.spg-mypage__text-link {
	border: 1px solid var(--spg-border);
	color: var(--spg-accent);
	padding: 7px 10px;
}

.spg-mypage__empty {
	color: var(--spg-muted);
	margin: 0;
}

.spg-mypage__link-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.spg-mypage__link-list li {
	max-width: 100%;
}

.spg-mypage__link-list a {
	border: 1px solid var(--spg-border);
	border-radius: 6px;
	display: inline-flex;
	font-weight: 700;
	line-height: 1.2;
	max-width: 100%;
	overflow-wrap: anywhere;
	padding: 8px 10px;
	text-decoration: none;
}

.spg-mypage__table-wrap {
	overflow-x: auto;
	width: 100%;
}

.spg-mypage-notifications__list {
	margin-top: 0;
}

.spg-mypage-notifications__item--unread {
	border-color: #72aee6;
	background: #f0f6fc;
}

.spg-mypage__status {
	border: 1px solid var(--spg-border);
	border-radius: 999px;
	display: inline-flex;
	font-size: 0.9em;
	font-weight: 700;
	line-height: 1.2;
	padding: 4px 8px;
	white-space: nowrap;
}

.spg-mypage__status--hit {
	border-color: #68de7c;
	background: #edfaef;
	color: #006b1a;
}

.spg-mypage__status--miss {
	border-color: #c3c4c7;
	background: #f6f7f7;
	color: #50575e;
}

.spg-mypage__status--pending {
	border-color: #72aee6;
	background: #f0f6fc;
	color: #0a4b78;
}

.spg-mypage__status--refunded,
.spg-mypage__status--void {
	border-color: #f0c33c;
	background: #fcf9e8;
	color: #674e00;
}

.spg-mypage .spg-favorite-team--embedded,
.spg-mypage .spg-badge-summary {
	border-top: 0;
	margin: 0;
	padding-top: 0;
}

.spg-point-history,
.spg-prediction-history,
.spg-ranking {
	overflow-x: auto;
}

.spg-ranking__description {
	margin: 0 0 12px;
}

.spg-ranking__team-section {
	margin-top: 18px;
}

.spg-ranking__team-name {
	display: inline-block;
	font-weight: 700;
	line-height: 1.4;
	max-width: 100%;
	overflow-wrap: anywhere;
}

.spg-ranking--streak .spg-ranking-table,
.spg-ranking--high-odds .spg-ranking-table {
	min-width: 860px;
}

.spg-notice-box {
	border: 1px solid var(--spg-border);
	border-left: 4px solid var(--spg-accent);
	border-radius: 8px;
	background: var(--spg-surface);
	margin: 16px 0;
	padding: 16px;
}

.spg-notice-box h2 {
	margin-top: 0;
	text-wrap: balance;
}

.spg-notice-box ul {
	margin-bottom: 0;
	padding-left: 1.25em;
}

.spg-notice-box li + li {
	margin-top: 6px;
}

.spg-point-history table,
.spg-prediction-table,
.spg-ranking-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 760px;
}

.spg-point-history th,
.spg-point-history td,
.spg-prediction-table th,
.spg-prediction-table td,
.spg-ranking-table th,
.spg-ranking-table td {
	border-bottom: 1px solid var(--spg-border);
	padding: 10px 8px;
	text-align: left;
	vertical-align: top;
}

.spg-point-history th,
.spg-prediction-table th,
.spg-ranking-table th {
	background: var(--spg-soft);
	font-weight: 700;
	white-space: nowrap;
}

@media (max-width: 600px) {
	.spg-match-detail,
	.spg-mypage,
	.spg-prediction-history,
	.spg-ranking,
	.spg-badges,
	.spg-notifications,
	.spg-favorite-team:not(.spg-favorite-team--embedded) {
		padding: 12px;
	}

	.spg-notifications__item {
		grid-template-columns: 1fr;
	}

	.spg-favorite-team__current {
		grid-template-columns: 1fr;
	}

	.spg-mypage__header-grid,
	.spg-mypage-summary {
		grid-template-columns: 1fr;
	}

	.spg-mypage__section-head {
		align-items: flex-start;
		flex-direction: column;
	}

	.spg-prediction-form__selection {
		align-items: flex-start;
		flex-direction: column;
		gap: 4px;
	}
}

.spg-home-dashboard,
.spg-home-dashboard * {
	box-sizing: border-box;
}

.spg-home-dashboard {
	background: #fff;
	border: 1px solid var(--spg-border);
	border-radius: 8px;
	color: #1d2327;
	padding: 20px;
}

.spg-home-dashboard h2,
.spg-home-dashboard h3,
.spg-home-dashboard p {
	margin-top: 0;
}

.spg-home-dashboard__hero {
	align-items: stretch;
	border-bottom: 1px solid var(--spg-border);
	display: grid;
	gap: 16px;
	grid-template-columns: minmax(0, 1.5fr) minmax(240px, 0.8fr);
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.spg-home-dashboard__eyebrow {
	color: var(--spg-muted);
	font-size: 0.85rem;
	font-weight: 700;
	margin-bottom: 6px;
}

.spg-home-dashboard__hero h2 {
	font-size: 1.65rem;
	line-height: 1.35;
	margin-bottom: 8px;
	text-wrap: balance;
}

.spg-home-dashboard__hero p {
	line-height: 1.8;
	text-wrap: pretty;
}

.spg-home-dashboard__actions {
	align-content: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-start;
}

.spg-home-dashboard__button {
	align-items: center;
	background: #fff;
	border: 1px solid var(--spg-border);
	border-radius: 8px;
	color: #1d2327;
	display: inline-flex;
	font-weight: 700;
	justify-content: center;
	line-height: 1.4;
	min-height: 42px;
	padding: 9px 14px;
	text-decoration: none;
}

.spg-home-dashboard__button--primary {
	background: var(--spg-accent);
	border-color: var(--spg-accent);
	color: #fff;
}

.spg-home-dashboard__button--small {
	font-size: 0.92rem;
	min-height: 36px;
	padding: 7px 12px;
}

.spg-home-dashboard__summary {
	display: grid;
	gap: 10px;
}

.spg-home-dashboard__summary-item {
	background: var(--spg-soft);
	border: 1px solid var(--spg-border);
	border-radius: 8px;
	padding: 12px;
}

.spg-home-dashboard__summary-item span {
	color: var(--spg-muted);
	display: block;
	font-size: 0.82rem;
	margin-bottom: 3px;
}

.spg-home-dashboard__summary-item strong {
	display: block;
	font-size: 1.2rem;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.spg-home-dashboard__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.spg-home-dashboard__section {
	border: 1px solid var(--spg-border);
	border-radius: 8px;
	padding: 16px;
}

.spg-home-dashboard__section--wide {
	grid-column: 1 / -1;
}

.spg-home-dashboard__section-title {
	font-size: 1.08rem;
	line-height: 1.4;
	margin-bottom: 12px;
	text-wrap: balance;
}

.spg-home-dashboard__match-list,
.spg-home-dashboard__simple-list,
.spg-home-dashboard__ranking,
.spg-home-dashboard__badge-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.spg-home-dashboard__match-list {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.spg-home-dashboard__card {
	background: #fff;
	border: 1px solid var(--spg-border);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	justify-content: space-between;
	padding: 14px;
}

.spg-home-dashboard__match strong,
.spg-home-dashboard__simple-list strong {
	display: block;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.spg-home-dashboard__match p {
	margin-bottom: 8px;
}

.spg-home-dashboard__meta,
.spg-home-dashboard__odds,
.spg-home-dashboard__simple-list span {
	color: var(--spg-muted);
	font-size: 0.9rem;
	line-height: 1.65;
}

.spg-home-dashboard__simple-list {
	display: grid;
	gap: 10px;
}

.spg-home-dashboard__simple-list li {
	border-bottom: 1px solid var(--spg-border);
	padding-bottom: 10px;
}

.spg-home-dashboard__simple-list li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.spg-home-dashboard__simple-list a,
.spg-home-dashboard__link a {
	font-weight: 700;
}

.spg-home-dashboard__ranking {
	counter-reset: spg-home-rank;
	display: grid;
	gap: 10px;
}

.spg-home-dashboard__ranking li {
	align-items: center;
	border-bottom: 1px solid var(--spg-border);
	display: grid;
	gap: 6px;
	grid-template-columns: auto minmax(0, 1fr);
	padding-bottom: 10px;
}

.spg-home-dashboard__ranking li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.spg-home-dashboard__ranking strong,
.spg-home-dashboard__ranking span:not(.spg-home-dashboard__rank) {
	overflow-wrap: anywhere;
}

.spg-home-dashboard__rank {
	align-items: center;
	background: var(--spg-soft);
	border-radius: 999px;
	display: inline-flex;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	height: 30px;
	justify-content: center;
	width: 30px;
}

.spg-home-dashboard__empty {
	background: var(--spg-soft);
	border-radius: 8px;
	color: var(--spg-muted);
	line-height: 1.7;
	margin-bottom: 0;
	padding: 12px;
	text-wrap: pretty;
}

.spg-home-dashboard__notice {
	background: var(--spg-soft);
	border: 1px solid var(--spg-border);
	border-radius: 8px;
	margin-top: 16px;
	padding: 14px;
}

.spg-home-dashboard__notice p {
	margin-bottom: 0;
}

.spg-home-dashboard__favorite {
	background: var(--spg-soft);
	border-radius: 8px;
	margin-bottom: 0;
	padding: 12px;
}

.spg-home-dashboard__favorite span {
	color: var(--spg-muted);
	display: block;
	font-size: 0.85rem;
	margin-bottom: 4px;
}

.spg-home-dashboard__favorite strong {
	display: block;
	overflow-wrap: anywhere;
}

.spg-home-dashboard__badge-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.spg-home-dashboard__badge-list li {
	background: var(--spg-soft);
	border: 1px solid var(--spg-border);
	border-radius: 999px;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.4;
	padding: 6px 10px;
}

@media (max-width: 782px) {
	.spg-home-dashboard {
		padding: 14px;
	}

	.spg-home-dashboard__hero,
	.spg-home-dashboard__grid {
		grid-template-columns: 1fr;
	}

	.spg-home-dashboard__match-list {
		grid-template-columns: 1fr;
	}
}