/* ============================================================
   写真を大きく見せる（共通）
   ------------------------------------------------------------
     はじめは Clip一覧（修正依頼 No.0253・2026-10-16）のためのものでした。
     2026-10-18 の打ち合わせで、マイページの画像BOXでも
     同じ見え方にする、となったので css/clips.css から切り出しました。

     スポット詳細の写真タブと同じ見え方（画面いっぱいの黒い背景に
     写真を1枚）にそろえています。動かしているのは js/photo_view.js です。
   ============================================================ */
.jclv {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 13000;              /* チェックイン中の帯（41）より上 */
	background: rgba(0, 0, 0, .92);
	align-items: center;
	justify-content: center;
	padding: 56px 12px 64px;
}
.jclv.is-on { display: flex; }

/* 開いているあいだ、裏の画面は動かさない */
body.jclv-open { overflow: hidden; }

.jclv-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 6px;
}

.jclv-x {
	position: absolute;
	top: 8px;
	right: 10px;
	width: 44px;                 /* 指で押す目安（No.0250と同じ考え方） */
	height: 44px;
	border: 0;
	border-radius: 9999px;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}
.jclv-x:hover { background: rgba(255, 255, 255, .22); }

.jclv-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 64px;
	border: 0;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
}
.jclv-nav.is-prev { left: 4px;  border-radius: 0 6px 6px 0; }
.jclv-nav.is-next { right: 4px; border-radius: 6px 0 0 6px; }
.jclv-nav:hover { background: rgba(255, 255, 255, .22); }
.jclv-nav[hidden] { display: none; }

.jclv-cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 16px;
	margin: 0;
	padding: 0 16px;
	color: rgba(255, 255, 255, .85);
	font-size: 13px;
	text-align: center;
	white-space: pre;
}


/* ============================================================
   マイページ 画像BOX（2026-10-18 打ち合わせ）
   ------------------------------------------------------------
     「iphoneの画像の一覧表示の様に、正方形でデフォルト新しい順に並べる」

     ・正方形（aspect-ratio: 1）に切って並べます
     ・すき間は2pxだけ。iPhone の写真一覧と同じく、びっしり並べます
     ・画面の幅で、1行の枚数が変わります（スマホ3枚／タブレット4枚／PC6枚）

     動かしているのは js/mypage_media.js です。
     押したときの「大きく見る」は css/photo_view.css と js/photo_view.js。
   ============================================================ */
.jmb-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
}
@media (min-width: 640px) {
	.jmb-grid { grid-template-columns: repeat(4, 1fr); gap: 3px; }
}
@media (min-width: 1024px) {
	.jmb-grid { grid-template-columns: repeat(6, 1fr); gap: 4px; }
}

.jmb-card {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	padding: 0;
	border: 0;
	border-radius: 2px;
	overflow: hidden;
	background: #f1f5f9;
	cursor: pointer;
}

/*
 * 縦長・横長が混ざっても、正方形に切ってそろえます
 *   （iPhone の写真一覧と同じ見え方にするため）
 */
.jmb-card > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .25s;
}
.jmb-card:hover > img { transform: scale(1.06); }
.jmb-card:active > img { transform: scale(1); }

/* キーボードで移動したとき、どれを選んでいるか分かるように */
.jmb-card:focus-visible {
	outline: 3px solid #FF8B42;
	outline-offset: -3px;
}

/* 動きを控える設定の方には、動かしません */
@media (prefers-reduced-motion: reduce) {
	.jmb-card > img,
	.jmb-card:hover > img { transition: none; transform: none; }
}

.jmb-more {
	min-height: 44px;            /* 指で押す目安 */
	padding: 10px 20px;
	border: 1px solid #e2e8f0;
	border-radius: 9999px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
	color: #475569;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}
.jmb-more:hover:not([disabled]) { border-color: #cbd5e1; background: #f8fafc; }
.jmb-more[disabled] { opacity: .6; cursor: default; }