/* ============================================================
   マスタ初期設定ガイドツアー
   実画面オーバーレイ案内用スタイル
   ============================================================ */

/* 全体を覆う薄暗幕（対象が無い中央表示ステップ用） */
.mst-overlay {
	position: fixed;
	inset: 0;
	background: rgba(20, 35, 60, 0.55);
	z-index: 9000;
	opacity: 0;
	transition: opacity .2s ease;
}
.mst-overlay.is-visible {
	opacity: 1;
}

/* スポットライト（対象要素の位置にくり抜きを作る箱）
   box-shadow で周囲だけを暗くする。
   位置は getBoundingClientRect（ビューポート座標）で決めるため position:fixed にする
   （absolute だとスクロール量ぶん縦にずれる）。 */
.mst-spotlight {
	position: fixed;
	z-index: 9001;
	border-radius: 10px;
	box-shadow: 0 0 0 9999px rgba(20, 35, 60, 0.55);
	outline: 3px solid #1a8fe1;
	outline-offset: 2px;
	pointer-events: none;
	transition: all .25s cubic-bezier(.4, 0, .2, 1);
	animation: mst-pulse 1.8s ease-in-out infinite;
}
@keyframes mst-pulse {
	0%, 100% { outline-color: #1a8fe1; }
	50% { outline-color: #7cc4f5; }
}

/* エラー時のスポットライト（赤系で目立たせる） */
.mst-spotlight.mst-error {
	outline-color: #e53935;
	box-shadow: 0 0 0 9999px rgba(60, 20, 20, 0.55);
	animation: mst-pulse-error 1.2s ease-in-out infinite;
}
@keyframes mst-pulse-error {
	0%, 100% { outline-color: #e53935; }
	50% { outline-color: #ff8a80; }
}

/* 吹き出しカード */
.mst-popover {
	position: fixed;
	z-index: 9002;
	width: 640px;
	max-width: calc(100vw - 32px);
	background: #ffffff;
	border-radius: 14px;
	box-shadow: 0 20px 56px rgba(0, 0, 0, 0.30);
	font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
	color: #1e3a5f;
	overflow: hidden;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .2s ease, transform .2s ease;
}
.mst-popover.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.mst-popover-header {
	background: linear-gradient(90deg, #1e3a5f 0%, #2d6a9f 100%);
	color: #fff;
	padding: 14px 18px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.mst-popover-step {
	flex-shrink: 0;
	font-size: 11px;
	font-weight: 700;
	background: rgba(255, 255, 255, 0.22);
	padding: 3px 10px;
	border-radius: 20px;
	white-space: nowrap;
}
.mst-popover-title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
}

/* エラー時の吹き出し（赤ヘッダー＋赤枠でエラーと分かるようにする） */
.mst-popover.mst-error {
	border: 2px solid #e53935;
}
.mst-popover.mst-error .mst-popover-header {
	background: linear-gradient(90deg, #b71c1c 0%, #e53935 100%);
}
.mst-popover.mst-error .mst-popover-title::before {
	content: "⚠ ";
}
.mst-popover.mst-error .mst-popover-body {
	color: #b71c1c;
	white-space: pre-wrap;
}

.mst-popover-body {
	padding: 16px 18px;
	font-size: 13px;
	line-height: 1.7;
	color: #41506a;
}
.mst-popover-body .mst-path {
	display: inline-block;
	margin-top: 8px;
	padding: 6px 10px;
	background: #f0f6ff;
	border: 1px solid #cde0f5;
	border-radius: 8px;
	font-size: 12px;
	color: #2d6a9f;
	font-weight: 600;
}

.mst-popover-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 18px 16px;
	gap: 8px;
}
.mst-popover-footer .mst-right {
	display: flex;
	gap: 8px;
}

.mst-btn {
	border: none;
	border-radius: 8px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
	transition: opacity .15s, background .15s;
}
.mst-btn-primary {
	background: #1a8fe1;
	color: #fff;
}
.mst-btn-primary:hover { background: #1577c2; }
.mst-btn-ghost {
	background: #eef2f8;
	color: #5a6a80;
}
.mst-btn-ghost:hover { background: #e0e7f1; }
.mst-btn-skip {
	background: transparent;
	color: #8a9ab5;
	padding: 8px 4px;
}
.mst-btn-skip:hover { color: #5a6a80; text-decoration: underline; }

/* 吹き出しの三角（向きごと） */
.mst-arrow {
	position: absolute;
	width: 0;
	height: 0;
	border: 9px solid transparent;
}
.mst-arrow-top    { border-bottom-color: #1e3a5f; top: -18px; }
.mst-arrow-bottom { border-top-color: #fff;       bottom: -18px; }
.mst-arrow-left   { border-right-color: #fff;      left: -18px; }
.mst-arrow-right  { border-left-color: #fff;       right: -18px; }