@charset "UTF-8";

 /* モーダル表示時スクロールロック */
body.is-scrollLock {
    overflow: hidden;
	overscroll-behavior-y: none
}

/* モーダル表示ボタン */
.open-member-modal {
	width: 100%;
	margin-top: 20px;
	padding: 24px 36px;
	background-color: var(--color_bg-txtbtn);
	border: none;
	border-radius: 8px;
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	cursor: pointer;
	transition: opacity .5s;
	&:hover {
		opacity: .8;
	}
}

/* dialog要素の基本スタイル */
#member-modal {
    padding: 0;
    width: 85vw;
	max-width: 800px;
    max-height: 90vh;
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
	font-size: 14px;

	/* モーダル背景（バックドロップ） */
	&::backdrop {
		background-color: rgba(0, 0, 0, 0.6);
	}

	/* コンテンツ容器 */
	.modal-container {
		position: relative;
		padding: 30px 24px 24px;
	}

	/* 右上の✕閉じボタン */
	.modal-close-x {
		position: absolute;
		top: 0;
		right: 10px;
		padding: 5px;
		background: none;
		border: none;
		font-size: 48px;
		line-height: 1;
		color: #666;
		cursor: pointer;
		outline: none;

		&:hover {
			color: #000;
		}
	}

	/* ローディングスピナー */
	.spinner {
		--width: 80px;
		--border-width: 12px;
		width: var(--width);
		height: var(--width);
		border: var(--border-width) solid rgba(0, 0, 0, 0.1);
		border-top: var(--border-width) solid #007bff; /* 青い部分が回転します */
		border-radius: 50%;
		animation: spin 1s linear infinite;
	}

	/* 加盟社読み込みエラー */
	.error-container {
		text-align: center;
		padding: 20px;
		color: #d9534f;
	}
	.retry-btn {
		margin-top: 10px;
		padding: 8px 16px;
		background-color: #f0f0f0;
		border: 1px solid #ccc;
		border-radius: 4px;
		cursor: pointer;
	}
	.retry-btn:hover {
		background-color: #e0e0e0;
	}

	.modal-title {
		margin-block: 20px 10px;
		line-height: 1.6;
	}
	.modal-note {
		color: #f30;
		font-weight: 700;
		/* font-size: 12px; */
		/* line-height: 1.3; */
	}
	/* .modal-link {
		--color: rgba(0,51,255,1);
		color: var(--color);
		&::after {
			content: "";
			display: inline-block;
			margin-left: 6px;
			border: 5px solid var(--color);
			border-top-color: transparent;
			border-right: none;
			border-bottom-color: transparent;
		}
	} */
}

/* 加盟社登録状況表示エリア */
#current-member-info {
	grid-template-columns: repeat(1, auto);
	justify-content: center;
	align-items: center;
    margin-bottom: 15px;
    padding: 10px;
    background: #f0f0f0;
    border-radius: 4px;
	@media screen and (width >= 480px) {
		grid-template-columns: repeat(2, auto);
		justify-content: space-between;
	}
	& .highlight {
		font-weight: 700;
		letter-spacing: .08em;
	}
	.delete-btn {
		padding: 8px 16px;
		border: none;
		border-radius: 8px;
		background-color: #f30;
		color: #fff;
		font-size: 16px;
		cursor: pointer;
	}
}

/* モーダル内通知メッセージエリア */
/* ステータスメッセージ（登録完了通知） */
#modal-status-msg {
    margin-bottom: 0; /* 非表示時は余白をゼロに */
    font-weight: bold;
    min-height: 1.5em;
    display: none; /* 初期状態は非表示 */

	/* メッセージがあるときだけ表示 */
	&.is-visible {
		display: block;
		margin-bottom: 15px; /* 表示されたときだけ下の余白を作る */
		padding: 10px;
	}

	&.is-success {
		color: #28a745;
		font-weight: bold;
		background-color: #e8f5e9; /* 成功時は背景色をつけると分かりやすいです */
		border-radius: 4px;
	}
}


/* モーダル内加盟社リストのグリッド表示 */
.member-list {
	display: grid;
	grid-template-columns: repeat(2, auto);
	justify-content: center;
	list-style: none;
	margin: 0;
	margin-top: 10px;
	padding: 0;
	gap: 8px;
	@media screen and (width >= 768px) {
		grid-template-columns: repeat(3, auto);
	}

	.member-item {
		border: 1px solid var(--color_bd-light);
		padding: 5px 10px;

		button {
			background: none;
			border: none;
			cursor: pointer;
			padding: 0;
		}
	}
}


/* 回転アニメーション */
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}