:root {
	--color-primary: #73a2ffff;
	--color-secondary: #06b6d4;
	--color-danger: #ef4444;
	--color-bg: #f9fafb;
	--color-text: #111827;
}


html {
	box-sizing: border-box;
	font-size: 16px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	font-family: 'Helvetica', "Helvetica Neue", Arial, 'ヒラギノ角ゴ Pro W3', "Hiragino Kaku Gothic ProN", "Hiragino Sans", 'メイリオ', Meiryo, sans-serif;
	margin: 0;
	padding: 0;
	background-color: #ffffff;
	color: #1a1a1a;
}

body.is-fixed {
	overflow: hidden;
	touch-action: none;
}

main {
	padding: 10px;
}

.spinner {
	display: none;
}

.spinner.is-active {
	display: flex !important;
}

.spinner__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.spinner__icon {
	width: 50px;
	height: 50px;
	border: 7px solid #f0f0f0;
	border-top-color: var(--color-primary);
	border-radius: 50%;
	animation: spinner-rotate 0.6s linear infinite;
}

@keyframes spinner-rotate {
	to {
		transform: rotate(360deg);
	}
}

.btn {
	padding: 10px 10px;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	color: #111;
}

/* ===== 全画面用 ===== */
.spinner--fullscreen {
	position: fixed;
	inset: 0;
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(4px);
	/* 背景を少し明るく */
	z-index: 9999;
	align-items: center;
	justify-content: center;
}

/* ===== 一部分用（親要素に position: relative が必要） ===== */
.spinner--inline {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.7);
	z-index: 10;
	align-items: center;
	justify-content: center;
}

/* ベースボタン（お好みで） */
.button {
	padding: 0.6rem 1.2rem;
	border-radius: 999px;
	border: 1px solid #ddd;
	background-color: #fff;
	color: #111;
	font-size: 0.9rem;
	cursor: pointer;
	transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.button:hover {
	background-color: #f5f5f5;
}

.button:active {
	transform: translateY(1px);
}

.button--primary {
	background-color: #2563eb;
	border-color: #2563eb;
	color: #fff;
}

.button--primary:hover {
	background-color: #1d4ed8;
}

.button--secondary {
	background-color: #f3f4f6;
}

/* ===== モーダル（アニメーションなし）===== */

.modal {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	z-index: 1000;
}

.modal:not(.is-active) {
	display: none;
}

.modal__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(15, 23, 42, 0.45);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.modal__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 480px;
	background-color: #ffffff;
	border-radius: 1rem;
	box-shadow:
		0 18px 45px rgba(15, 23, 42, 0.25),
		0 0 0 1px rgba(148, 163, 184, 0.25);
	padding: 1.25rem 1.5rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.modal__title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
	color: #0f172a;
}

.modal__close {
	border: none;
	background: transparent;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	color: #64748b;
	padding: 0.1rem 0.25rem;
	border-radius: 999px;
}

.modal__close:hover {
	background-color: #e5e7eb;
	color: #0f172a;
}

.modal__body {
	font-size: 0.9rem;
	color: #4b5563;
}

.modal__footer {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	margin-top: 0.25rem;
}

/* 小さい画面向け微調整 */
@media (max-width: 480px) {
	.modal__dialog {
		padding: 1rem 1rem 1rem;
		border-radius: 0.75rem;
	}

	.modal__title {
		font-size: 1rem;
	}
}