/* 画像の拡大表示。 */
.klb-zoomable { cursor: zoom-in; -webkit-user-select: none; user-select: none; }

html.klb-open { overflow: hidden; }

.klb {
	touch-action: none;
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(35, 28, 50, 0.9);
	/* 素早い2回クリックなどで「選択」状態（青くなる）にならないようにする */
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
}
.klb[hidden] { display: none; }
.klb *::selection { background: transparent; }

.klb-img {
	max-width: 96vw;
	max-height: 90vh;
	width: auto;
	height: auto;
	object-fit: contain;
	cursor: zoom-in;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 6px 30px rgba(0, 0, 0, 0.45);
	-webkit-user-drag: none;
	user-select: none;
	touch-action: none;
	will-change: transform;
}
.klb-zoomed .klb-img { cursor: grab; }
.klb-dragging .klb-img { cursor: grabbing; }
.klb-loading .klb-img { opacity: 0.35; }

/* ボタン: 中の図形を、丸のちょうど真ん中に置く */
.klb-btn {
	position: absolute;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	cursor: pointer;
}
.klb-btn svg { display: block; width: 24px; height: 24px; }
.klb-btn:hover { background: rgba(255, 255, 255, 0.32); }
.klb-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.klb-btn[hidden] { display: none; }
.klb-close { top: 14px; right: 14px; }

/* 下の中央: 縮小・倍率・拡大 */
.klb-tools { position: absolute; left: 50%; bottom: 16px; display: flex; align-items: center; gap: 8px; transform: translateX(-50%); }
.klb-tools .klb-btn { position: static; }
.klb-btn:disabled { opacity: 0.35; cursor: default; }
.klb-btn:disabled:hover { background: rgba(255, 255, 255, 0.18); }
.klb-pct {
	min-width: 64px; height: 36px; padding: 0 12px;
	border: 0; border-radius: 18px;
	background: rgba(255, 255, 255, 0.18); color: #fff;
	font: 13px/1 sans-serif; font-variant-numeric: tabular-nums; cursor: pointer;
}
.klb-pct:hover { background: rgba(255, 255, 255, 0.32); }
.klb-pct:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.klb-pct:empty { visibility: hidden; }

/* 前後ボタンと枚数。PC は左右の端の縦中央に、枚数は上の中央に置く */
.klb-bar { display: contents; }
.klb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.klb-next { right: 14px; top: 50%; transform: translateY(-50%); }
.klb-count {
	position: absolute;
	left: 0;
	right: 0;
	top: 22px;
	text-align: center;
	color: #fff;
	font: 13px/1.4 sans-serif;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
	pointer-events: none;
}

/* スマホ: 前後ボタンと枚数を、下の中央に横一列でまとめる。倍率の操作は、その上に置く（複数枚のとき） */
@media (max-width: 480px) {
	.klb-bar {
		position: absolute;
		left: 50%;
		bottom: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 14px;
		transform: translateX(-50%);
	}
	.klb-multi .klb-tools { bottom: 70px; }
	.klb-btn { width: 40px; height: 40px; }
	.klb-bar .klb-btn { position: static; transform: none; }
	.klb-count { position: static; min-width: 4.5em; text-shadow: none; }
}