/* frame
===============================
画面端に固定表示するフレーム（罫線・コーナー・ティック・ラベル類）。

PC と SP では viewBox / マーク座標が異なるため、`--pc` / `--sp` 修飾子付きの
SVG をそれぞれインラインで併存させ、@media で表示を切り替える。
*/

.frame {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 100;
}

.frame svg {
	position: absolute;
	overflow: visible;
}

/* 共通スタイル（PC / SP どちらの SVG でも使う） */

/* 罫線（stroke 0.85） */
.frame_line {
	fill: none;
	stroke: var(--secondaryColor);
	stroke-width: 0.85;
	stroke-miterlimit: 10;
}

/* ティック（stroke 0.75） */
.frame_tick {
	stroke-width: 0.75;
}

/* グリフ（塗りつぶし） */
.frame_glyph {
	fill: var(--secondaryColor);
}

.frame_number {
	height: auto;
}

/* PC バリアント ──────────────────────────────────────── */

/*
 * Safari/iOS は position:absolute の SVG に left+right を両方指定しても
 * 幅を逆算してくれない（300×150 の intrinsic に戻ってしまう）。
 * Chrome は逆算してくれるが、SP の差し替え時に画面外へ飛んでいくため
 * 上下辺は left + width(calc) で明示する。
 */
.frame_top--pc,
.frame_bottom--pc {
	left: 30px;
	width: calc(100% - 60px);
	height: auto;
}

.frame_top--pc {
	top: 14px;
}

.frame_bottom--pc {
	bottom: 14px;
}

/* 左右辺は width:auto が viewBox 比から効くため top+bottom+height:100% で OK */
.frame_left,
.frame_right {
	top: 0;
	height: 100%;
	width: auto;
}

.frame_left {
	left: 30px;
}

.frame_right {
	right: 30px;
}

.frame_number--pc {
	width: clamp(14px, 2.4vw, 40px);
	right: 14px;
	top: 80%;
	transform: translateY(-50%);
}

/* SP バリアントは PC 時は非表示 */
.frame_top--sp,
.frame_bottom--sp,
.frame_number--sp {
	display: none;
}

/*
 * SP（≤768px）
 *   PC バリアントを非表示にし、SP 専用の SVG（viewBox 0 0 678 1356 ベース）を表示。
 *
 *   調整用変数:
 *     --frame-sp-inset-x        : 上下辺 SVG の左右余白
 *     --frame-sp-inset-y        : 上下辺 SVG の天地余白
 *     --frame-sp-number-width   : "01" の幅
 *     --frame-sp-number-right   : "01" の右オフセット
 *     --frame-sp-number-bottom  : "01" の下オフセット
 */
@media screen and (max-width: 768px) {
	.frame {
		--frame-sp-inset-x: 16px;
		--frame-sp-inset-y: 16px;
		--frame-sp-number-width: clamp(28px, 8vw, 44px);
		--frame-sp-number-right: 16px;
		--frame-sp-number-bottom: 64px;
	}

	/* PC バリアント・左右辺を非表示 */
	.frame_top--pc,
	.frame_bottom--pc,
	.frame_left,
	.frame_right,
	.frame_number--pc {
		display: none;
	}

	/* SP バリアントを表示（Safari 対策で width は明示） */
	.frame_top--sp,
	.frame_bottom--sp {
		display: block;
		left: var(--frame-sp-inset-x);
		width: calc(100% - var(--frame-sp-inset-x) * 2);
		height: auto;
	}

	.frame_top--sp {
		top: var(--frame-sp-inset-y);
	}

	.frame_bottom--sp {
		bottom: var(--frame-sp-inset-y);
	}

	.frame_number--sp {
		display: block;
		width: var(--frame-sp-number-width);
		right: var(--frame-sp-number-right);
		bottom: var(--frame-sp-number-bottom);
	}
}