.scn-notice,
.scn-notice * {
	box-sizing: border-box;
}

.scn-notice {
	--scn-surface: var(--surface, #fff);
	--scn-text: var(--text, #313131);
	--scn-link: #2860b9;
	--scn-action: #3863d9;
	--scn-available-height: calc(100dvh - 48px - var(--scn-bottom-obstacle, 0px));
	position: fixed;
	z-index: 99989;
	inset-inline: 24px;
	bottom: calc(max(24px, env(safe-area-inset-bottom, 0px)) + var(--scn-bottom-obstacle, 0px));
	display: grid;
	grid-template-columns: 60px minmax(0, 1fr) auto;
	align-items: center;
	align-content: center;
	gap: 24px;
	width: auto;
	max-width: 1180px;
	min-height: min(var(--scn-min-height, 104px), var(--scn-available-height));
	max-height: var(--scn-available-height);
	margin-inline: auto;
	padding: 22px 28px;
	overflow-y: auto;
	border: 0;
	border-radius: 28px;
	background: var(--scn-surface);
	color: var(--scn-text);
	box-shadow: 0 10px 40px rgb(31 34 37 / 13%);
	font-family: inherit;
	letter-spacing: 0;
	text-align: left;
	color-scheme: light;
	scrollbar-width: thin;
	scrollbar-color: #a2acbd transparent;
}

.scn-notice[hidden],
html.mobile-bar-lock .scn-notice,
html.popup-show .scn-notice,
html:has(dialog[open]) .scn-notice {
	display: none !important;
}

.scn-notice__image {
	display: block;
	width: 60px;
	height: 60px;
	max-width: 100%;
	object-fit: contain;
}

.scn-notice .scn-notice__text {
	max-width: 75ch;
	margin: 0;
	padding: 0;
	color: var(--scn-copy-color, var(--scn-text));
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0;
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.scn-notice .scn-notice__text a {
	color: var(--scn-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.scn-notice .scn-notice__text a:hover {
	text-decoration-thickness: 2px;
}

.scn-notice .scn-notice__accept {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 204px;
	min-height: 50px;
	max-width: 260px;
	margin: 0;
	padding: 14px 26px;
	border: 0;
	border-radius: 999px;
	background: var(--scn-button-color, var(--scn-action));
	color: var(--scn-button-text, #fff);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0;
	text-align: center;
	white-space: normal;
	overflow-wrap: anywhere;
	cursor: pointer;
	transition: background-color 160ms ease-out;
}

.scn-notice .scn-notice__accept:hover {
	background: color-mix(in srgb, var(--scn-button-color, var(--scn-action)), var(--scn-button-hover-mix, #000) 8%);
}

.scn-notice:not([data-scn-position="center"]) {
	grid-template-columns: 60px minmax(0, 1fr);
	gap: 16px;
	width: 440px;
	max-width: calc(100% - 48px);
	padding: 20px;
	border-radius: 24px;
}

.scn-notice[data-scn-position="left"] {
	left: 24px;
	right: auto;
	margin-inline: 0 auto;
}

.scn-notice[data-scn-position="right"] {
	left: auto;
	right: 24px;
	margin-inline: auto 0;
}

.scn-notice:not([data-scn-position="center"]) .scn-notice__accept {
	grid-column: 1 / -1;
	width: 100%;
	min-width: 0;
	max-width: none;
}

.scn-notice :is(a, button):focus-visible {
	outline: 3px solid var(--scn-link);
	outline-offset: 4px;
}

.scn-notice::selection,
.scn-notice ::selection {
	background: #dbe8ff;
	color: #20385e;
}

html[data-theme="dark"] .scn-notice {
	--scn-surface: var(--surface, #22252b);
	--scn-text: var(--text, #e0e5ec);
	--scn-link: #adcbff;
	--scn-action: #3467d8;
	color-scheme: dark;
	box-shadow: 0 10px 40px rgb(0 0 0 / 35%);
}

@media (max-width: 782px) {
	.scn-notice,
	.scn-notice:not([data-scn-position="center"]) {
		--scn-available-height: calc(100dvh - 36px - var(--scn-bottom-obstacle, 0px));
		inset-inline: 12px;
		bottom: calc(max(12px, env(safe-area-inset-bottom, 0px)) + var(--scn-bottom-obstacle, 0px));
		grid-template-columns: 40px minmax(0, 1fr);
		align-items: start;
		gap: 14px;
		width: auto;
		max-width: none;
		margin-inline: auto;
		padding: 20px;
		border-radius: 24px;
	}

	.scn-notice__image {
		width: 40px;
		height: 40px;
	}

	.scn-notice .scn-notice__accept {
		grid-column: 1 / -1;
		width: 100%;
		min-width: 0;
		max-width: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.scn-notice .scn-notice__accept {
		transition: none;
	}
}

@media print {
	.scn-notice {
		display: none !important;
	}
}