/*
 * Noppo camera 1.10.0：レンタル衣装のリング（template-parts/front/costume.php・assets/js/costume.js）。
 * 色・フォントはテーマの :root の変数だけ（足していない）。
 * 形は3つ：
 *   1. JavaScript なし・動きを控えめにする設定：横に払って見る1列（.cs-ring が横スクロール）
 *   2. .is-live（JS が動く）：サイズのボタン・大きく見る・帯
 *   3. .is-ring（JS が動き、動きを控えめにする設定でない）：止まった枠（sticky）の中で回る
 * 外側の包み（.costume・.cs-track）には transform・overflow:hidden を付けない（sticky が効かなくなるため）。
 */

.costume .costume-lead p:last-child { margin-bottom: 0; }
.costume-rules {
	max-width: 760px; margin: 0 0 36px; padding: 20px 22px;
	background: var(--wash); border-left: 2px solid var(--accent);
	font-size: 14px; line-height: 1.95; color: var(--ink);
}
.costume-rules p { margin: 0; }
.costume-rules p + p { margin-top: 10px; }

/* 枠 */
.cs-track { position: relative; }
.cs-stage {
	position: relative;
	display: flex; flex-direction: column; gap: 6px;
	padding: 12px 0 10px;
	background: radial-gradient(ellipse at 50% 40%, var(--paper), var(--wash) 78%);
	border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}

/* サイズのボタン（JS が動くときだけ） */
.cs-sizes {
	display: none; gap: 8px; align-items: center;
	overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
	padding: 2px 16px 4px; margin: 0;
}
.cs-sizes::-webkit-scrollbar { display: none; }
.is-live .cs-sizes { display: flex; }
.cs-size {
	flex: 0 0 auto; min-height: 44px; padding: 0 14px;
	border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink);
	font: 13px/1.4 var(--sans); letter-spacing: .03em; white-space: nowrap; cursor: pointer;
}
.cs-size[aria-pressed="true"] { background: var(--y-btn); border-color: var(--y-line); color: var(--ink); } /* 1.14.0：黒から --y-btn に（CEO ボードQ79 A） */
.cs-size-sep { flex: 0 0 1px; align-self: stretch; margin: 8px 4px; background: var(--line); }

.cs-hint { margin: 0; padding: 0 16px; font-size: 12px; line-height: 1.7; color: var(--muted); text-align: center; }
.cs-hint-move { display: none; }
.is-ring .cs-hint-move { display: inline; }
.cs-hint-more { display: block; } /* 1.15.0：スクロールで回りきらないとき（衣装が多いサイズ）の一言。costume.js が出し入れする */
.cs-hint-more[hidden] { display: none; }
.is-ring .cs-hint-still { display: none; }

/* 1列（JS なし・動きを控えめにする設定） */
.cs-scene { position: relative; }
.cs-ring {
	list-style: none; margin: 0;
	display: flex; gap: 12px;
	overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
	padding: 8px 16px 12px;
	-webkit-overflow-scrolling: touch;
}
.cs-card { flex: 0 0 auto; width: 128px; scroll-snap-align: center; }
.cs-card-btn {
	position: relative; display: block; width: 100%; margin: 0; padding: 6px;
	background: var(--white); border: 1px solid var(--line); border-radius: 6px;
	box-shadow: 0 10px 22px rgba(48, 47, 42, .12);
	color: var(--ink); font: inherit; text-align: center; cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.cs-card-btn:focus-visible { outline: 2px solid #5f5341; outline-offset: 3px; }
.cs-photo { display: block; aspect-ratio: 9 / 16; background: var(--paper); border-radius: 3px; overflow: hidden; }
.cs-photo img { display: block; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; user-select: none; }
.cs-lab { display: block; padding: 6px 0 1px; line-height: 1.45; }
.cs-no { display: block; font: 13px/1.45 var(--latin); letter-spacing: .06em; }
.cs-size-text { display: block; font-size: 11px; line-height: 1.45; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-rest {
	position: absolute; left: 10px; top: 10px;
	padding: 0 8px; background: rgba(250, 248, 244, .94); border: 1px solid var(--muted);
	font-size: 11px; line-height: 1.8; color: var(--ink); letter-spacing: .04em;
}
.cs-card.is-resting .cs-photo img { opacity: .45; }
.cs-card.is-picked .cs-card-btn { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 10px 22px rgba(48, 47, 42, .14); }
.cs-empty { margin: 24px 16px; text-align: center; font-size: 14px; color: var(--muted); }

/* まえ／つぎ・とばす（回すときだけ） */
.cs-hud { display: none; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; }
.cs-btn {
	min-height: 44px; min-width: 44px; padding: 0 16px;
	border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink);
	font: 13px/1 var(--sans); letter-spacing: .04em; cursor: pointer;
}
.cs-btn:disabled { opacity: .35; cursor: default; }
.cs-pos { font: 13px/1 var(--latin); letter-spacing: .08em; color: var(--muted); font-variant-numeric: tabular-nums; }
.cs-skip-wrap { display: none; margin: 0; text-align: center; }
.cs-skip {
	display: inline-flex; align-items: center; gap: 10px;
	min-height: 44px; padding: 0 6px; border: 0; border-bottom: 1px solid var(--ink); background: none;
	color: var(--ink); font: 13px/1.5 var(--sans); letter-spacing: .06em; cursor: pointer;
}

/* 回すとき */
.is-ring .cs-track { margin: 0; }
/* 1.15.0：枠の高さは --cs-vh（costume.js が 100svh を最初と幅が変わったときだけ測った px）。
   iPhone の Safari で下のバーが出入りしても、枠の高さ・長さが変わらない（がくつきの元だった）。JS が値を入れる前は 100svh */
.is-ring .cs-stage {
	position: sticky; top: calc(var(--sp-offset-top) + 8px);
	height: calc(100vh - var(--sp-offset-top) - var(--sp-offset-bottom) - 16px - var(--cs-tray-space, 0px));
	height: calc(var(--cs-vh, 100svh) - var(--sp-offset-top) - var(--sp-offset-bottom) - 16px - var(--cs-tray-space, 0px));
	min-height: 380px; max-height: 760px;
	overflow: hidden;
}
.is-ring.has-tray .cs-stage {
	--cs-tray-space: calc(var(--cs-tray-h, 0px) + 8px);
	/* 帯が出ている間は、上の 760px の上限からも帯の分を引く（PC で帯が枠の下の縁に重ならないように） */
	max-height: min(760px, calc(100vh - var(--sp-offset-top) - var(--sp-offset-bottom) - 16px - var(--cs-tray-space)));
	max-height: min(760px, calc(var(--cs-vh, 100svh) - var(--sp-offset-top) - var(--sp-offset-bottom) - 16px - var(--cs-tray-space)));
}
.is-ring .cs-scene { flex: 1 1 auto; min-height: 0; perspective: 900px; touch-action: pan-y; }
.is-ring .cs-ring { position: absolute; inset: 0; display: block; overflow: visible; padding: 0; scroll-snap-type: none; }
.is-ring .cs-card {
	position: absolute; left: 50%; top: 50%; width: var(--cs-w, 120px);
	transform-origin: 50% 50%; will-change: transform, opacity;
	pointer-events: none;
}
.is-ring .cs-card.is-near { pointer-events: auto; }
.is-ring .cs-card.is-far { display: none; }
.is-ring .cs-hud { display: flex; }
.is-ring .cs-skip-wrap { display: block; }

/* 大きく見る */
.cs-lb {
	position: fixed; inset: 0; z-index: 200;
	display: flex; align-items: center; justify-content: center;
	padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
	background: rgba(48, 47, 42, .72);
}
.cs-lb[hidden] { display: none; }
.cs-lb-panel {
	position: relative; width: 100%; max-width: 520px; max-height: 100%;
	overflow-y: auto; overscroll-behavior: contain;
	padding: 52px 20px 18px; background: var(--paper); text-align: center;
}
.cs-lb-close {
	position: absolute; right: 6px; top: 6px; width: 44px; height: 44px;
	border: 0; background: none; color: var(--ink); font: 26px/1 var(--latin); cursor: pointer;
}
.cs-lb-fig { margin: 0 0 12px; }
.cs-lb-img {
	display: block; margin: 0 auto; width: auto; height: auto;
	max-width: min(100%, var(--cs-lb-w, 480px));
	max-height: calc(100vh - 290px); max-height: calc(100svh - 290px);
	background: var(--wash);
}
.cs-lb-title { margin: 0; font: 18px/1.6 var(--latin); letter-spacing: .08em; }
.cs-lb-size { margin: 0 0 6px; font-size: 14px; color: var(--muted); }
.cs-lb-memo { margin: 0 0 8px; font-size: 13px; line-height: 1.8; color: var(--muted); }
.cs-lb-rest { display: inline-block; margin: 4px 0 8px; padding: 0 10px; border: 1px solid var(--muted); font-size: 13px; line-height: 1.9; }
.cs-lb-rest[hidden] { display: none; }
.cs-lb-pick { width: 100%; margin-top: 6px; font-family: inherit; }
.cs-lb-pick:disabled { background: var(--wash); color: var(--muted); border-color: var(--line); cursor: default; }
.cs-lb-status { min-height: 1.8em; margin: 8px 0 0; font-size: 13px; line-height: 1.8; }

/* 選んだ衣装の帯（衣装の欄が見えている間だけ。スマホは画面下の LINE の帯の上） */
.cs-tray {
	position: fixed; left: 0; right: 0; bottom: var(--sp-offset-bottom); z-index: 45;
	padding: 8px max(12px, env(safe-area-inset-left)) 8px max(12px, env(safe-area-inset-right));
	background: rgba(250, 248, 244, .97); border-top: 1px solid var(--line);
	box-shadow: 0 -6px 18px rgba(48, 47, 42, .08);
}
.cs-tray[hidden] { display: none; }
.cs-tray-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cs-tray-title { margin: 0; font-size: 13px; line-height: 1.5; }
.cs-tray-count { font-family: var(--latin); letter-spacing: .04em; }
.cs-tray-go { min-height: 44px; padding: 8px 16px; font-size: 14px; font-family: inherit; white-space: nowrap; }
.cs-tray-list { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 4px 0 0; padding: 0; }
.cs-tray-list li { display: inline-flex; align-items: center; gap: 2px; padding-left: 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font: 13px/1 var(--latin); letter-spacing: .04em; }
.cs-tray-remove {
	min-height: 44px; min-width: 44px; padding: 0 10px;
	border: 0; background: none; color: var(--muted); font: 12px/1 var(--sans); text-decoration: underline; cursor: pointer;
}

@media (max-width: 700px) {
	.costume-rules { margin-bottom: 28px; padding: 18px 18px; }
	/* 枠は画面の幅いっぱい（本文の左右の余白の外まで） */
	.cs-track { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
	.is-ring .cs-track { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
}
@media (min-width: 701px) {
	.cs-stage { border: 1px solid var(--line); border-radius: 12px; }
	/* PC・タブレットの帯は画面の下から 24px（1024px 以上は 32px）浮いているので、その分も空ける */
	.is-ring.has-tray .cs-stage { --cs-tray-space: calc(var(--cs-tray-h, 0px) + 40px); }
	.cs-ring, .cs-sizes { padding-left: 20px; padding-right: 20px; }
	.cs-card { width: 150px; }
	.cs-hud { padding: 0 20px; }
	.cs-tray {
		left: max(24px, env(safe-area-inset-left)); right: auto; bottom: max(24px, env(safe-area-inset-bottom));
		width: min(520px, calc(100vw - 400px)); min-width: 300px;
		border: 1px solid var(--line); border-radius: 10px;
	}
}
@media (min-width: 1024px) {
	.cs-sizes { justify-content: center; flex-wrap: wrap; overflow: visible; }
	.cs-tray { bottom: max(32px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
	.cs-card { will-change: auto; }
}
@media print {
	.cs-sizes, .cs-hud, .cs-skip-wrap, .cs-tray, .cs-lb { display: none !important; }
}