#hlblang-modal {
		--hlblang-modal-bg: #f9fafb;
		--hlblang-text-main: #1f2937;
		--hlblang-text-muted: #4b5563;
		--hlblang-accent-dark: #2d2d2d;
		--hlblang-border-color: #e5e7eb;
		--hlblang-white: #ffffff;
}

/* モーダルオーバーレイ（背景） */
#hlblang-modal .hlblang-modal-overlay {
		position: fixed;
		inset: 0;
		z-index: 99999;
		background-color: rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(4px);
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 1rem;
		
		/* 初期状態は非表示 */
		visibility: hidden;
		opacity: 0;
		transition: opacity 0.25s ease-out, visibility 0.25s;
		
		/* モーダル表示中も背景のスクロールを物理的に防ぐための設定 */
		overscroll-behavior: contain;
}

/* 表示状態 */
#hlblang-modal .hlblang-modal-overlay.hlblang-active {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
}

/* モーダルコンテナ */
#hlblang-modal .hlblang-modal-container {
		background-color: var(--hlblang-modal-bg);
		border-radius: 2rem;
		box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
		width: 100%;
		max-width: 400px;
		position: relative;
		padding: 3rem 2rem;
		text-align: center;
		transform: scale(0.95);
		opacity: 0;
		transition: transform 0.25s ease-out, opacity 0.25s ease-out;
		box-sizing: border-box;
}

#hlblang-modal .hlblang-modal-overlay.hlblang-active .hlblang-modal-container {
		transform: scale(1);
		opacity: 1;
}

/* 閉じるボタン */
#hlblang-modal .hlblang-btn-close {
		position: absolute;
		top: 1rem;
		right: 1rem;
		background: var(--hlblang-white);
		border: 1px solid var(--hlblang-border-color);
		border-radius: 50%;
		width: 2.5rem;
		height: 2.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		color: #9ca3af;
		transition: color 0.2s;
		padding: 0;
}

#hlblang-modal .hlblang-btn-close:hover {
		color: var(--hlblang-text-main);
}

/* ヘッダー・タイトル */
#hlblang-modal .hlblang-modal-header {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.75rem;
		margin-bottom: 2rem;
}

#hlblang-modal .hlblang-flag-icon-large {
		width: 4rem;
		height: auto;
}

#hlblang-modal .hlblang-modal-title {
		font-size: 1.4rem;
		font-weight: 600;
		color: var(--hlblang-text-main);
		margin: 0;
		padding: 0;
}

/* ボタン類 */
#hlblang-modal .hlblang-btn-primary {
		width: 100%;
		max-width: 260px;
		background-color: var(--hlblang-accent-dark);
		color: var(--hlblang-white);
		padding: 0.75rem 1.5rem;
		border-radius: 0.75rem;
		border: none;
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		margin-bottom: 2rem;
		text-decoration: none;
		font-size: 1.4rem;
}

#hlblang-modal .hlblang-divider {
		width: 100%;
		height: 1px;
		background-color: var(--hlblang-border-color);
		margin-bottom: 2rem;
}

#hlblang-modal .hlblang-btn-secondary {
		width: 100%;
		max-width: 260px;
		background-color: var(--hlblang-white);
		border: 2px solid var(--hlblang-accent-dark);
		color: var(--hlblang-accent-dark);
		padding: 0.75rem 1.5rem;
		border-radius: 0.75rem;
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 2rem;
		font-size: 1.4rem;
}
.hlblang-btn-primary:hover,
.hlblang-btn-secondary:hover,
#hlblang-modal .hlblang-btn-copy:hover{
	opacity:.6;
	transition:.2s;
}

/* コピーエリア */
#hlblang-modal .hlblang-copy-wrapper {
		display: flex;
		align-items: center;
		background-color: #e5e7eb;
		border: 1px solid var(--hlblang-border-color);
		border-radius: 0.75rem;
		padding: 0.375rem;
		width: 100%;
		max-width: 320px;
		margin: 0 auto;
}

#hlblang-modal .hlblang-copy-input {
		background: transparent;
		border: none;
		padding: 0 0.75rem;
		flex: 1;
		font-size: 0.875rem;
		color: var(--hlblang-text-muted);
		outline: none;
		font-size: 1.4rem;
}

#hlblang-modal .hlblang-btn-copy {
		background-color: var(--hlblang-white);
		border: none;
		border-radius: 0.5rem;
		padding: 0.5rem 1.5rem;
		font-size: 0.875rem;
		cursor: pointer;
		font-size: 1.4rem;
}

#hlblang-modal .hlblang-text-success {
		color: #059669 !important;
}