/* ルーム情報系セクションの区切り（見出し＋操作ボタン行の上部余白）用トークン。
   --space-* スケール（base.cssで4/8/16/24/48pxと定義）には40pxに相当する値が無く、
   スケールへ挿入するとリズムが崩れるため、room.css内に閉じたセマンティックトークンとして
   別立てにする。参照元の .room-info-row-header（チャット画面「参加メンバー」、
   chat.html）と .room-keys-header（ルーム情報画面「ルームの鍵」、room_info.html）は
   別ページの要素でDOM上の共通の祖先を持たないため、両ページに共通する祖先である
   :root（<html>）に定義し、両方から継承させる。デザイントークンの定義場所である
   base.cssの:root（common.css内コメント参照）には追加せず、room.cssを読み込む
   ページに閉じたセマンティック値として扱う */
:root {
  --room-section-gap: 40px;
}

/* ルーム情報画面・ルーム編集画面共通で、モバイル・PC共通でメディア領域を
   余白なしにする（メディアをヒーローとして扱う。YouTube 型の全幅表示） */
.room-info-media-section {
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

.room-info-img-area {
  position: relative;
  width: 100%;
  max-width: 960px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

/* ルーム情報のメディア＋ステータス帯の外枠。メディアは余白なしでコンテナ端に
   接するため角丸を付けない（ルーム編集画面の .room-edit-img-area も同様に
   角丸なしで揃えている） */
.room-info-media-frame {
  width: 100%;
  max-width: 960px;
}

.room-info-image-link {
  display: block;
  width: 100%;
  height: 100%;
}

/* 親 .room-info-img-area が overflow: hidden のため、共通ルール（common.css の
   a:focus-visible、外側 2px）のフォーカスリングがクリップされて見えなくなる。
   outline-offset を負値にして要素の内側へ描画することで、Tab移動時の位置を可視化する */
.room-info-image-link:focus-visible {
  outline-offset: -2px;
}

.room-info-img-area .room-img,
.room-info-img-area iframe,
.room-info-img-area video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.room-info-img-area .room-img,
.room-info-img-area video {
  object-fit: cover;
}

/* フルスクリーン時は要素が画面全体に広がるため cover を打ち消し、
   16:9 の横動画が縦画面で左右を切り取られないよう contain にする。
   :fullscreen と :-webkit-full-screen は未対応の疑似クラスを含むセレクタリスト全体を
   ブラウザが無効化するため、別々のルールセットに分ける */
.room-info-img-area video:fullscreen {
  object-fit: contain;
  /* レターボックス部分の背景 */
  background-color: var(--color-bg-black);
}

.room-info-img-area video:-webkit-full-screen {
  object-fit: contain;
  background-color: var(--color-bg-black);
}

/* gap は common.css の .common-info-sub-action（円形アイコンボタン、36px）が
   タップ判定を 44×44px に拡張していることを踏まえた値。44px 判定は左右に
   (44 - 36) / 2 = 4px ずつはみ出すため、隣接ボタンの判定同士が重ならないためには
   gap が 8px 以上必要。10px として 2px の余裕を持たせている。
   --space-2（root フォントサイズにより 7〜8px）では 8px を下回る場合があり不足、
   --space-3（14〜16px）では間隔が空きすぎるため、リテラル値を使う */
.room-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

/* font-size は指定しない。子孫セレクタで指定すると common.css の
   .common-info-sub-action / .common-info-main-action が持つ本来の font-size を
   上書きしてしまい、同じクラスの <a> と <button>（例: ルーム編集と保存）で
   文字サイズが食い違う */
.room-header-actions a {
  white-space: nowrap;
}

/* ルーム情報画面では所有者リンク（左）とボタン群（右）の2ブロックになるため
   両端揃えにする */
.room-header-meta {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.room-info-main {
  width: 100%;
  margin-top: 15px;
  margin-bottom: 30px;
}

/* PC では本文の左右余白をモバイルの 20px（common.css の .common-info-content-container）
   より少し広げる。共用元 .common-info-content-container（common.css）は他画面と
   共用の可能性があるため直接変更せず、ルーム情報画面のみで読み込まれる room.css 側で
   上書きする（.common-info-content-container を使用するテンプレートは room_info.html
   のみのため、修飾クラスは付けずセレクタをそのまま上書きしている）。
   room.css は common.css より後に読み込まれるため同一詳細度でもこちらが勝つ。
   30px は既存のスペーシングトークンに相当値がないためリテラルを使用している
   （既定ガターの 20px も同様の理由でリテラル。settings.css の .settings-section-title
   も同様）。
   ヘッダー行（.room-header-meta）もこのコンテナ内にあるため、行・本文とも一緒に
   30px になり左右対称が保たれる */
@media (min-width: 768px) {
  .common-info-content-container {
    padding-right: 30px;
    padding-left: 30px;
  }
}

/* 所有者ブロック→タイトル→説明の縦積み順。gap は .room-info-desc の margin-top を
   統合したもの（flex gap と併用すると二重に間隔が空くため margin-top 側は廃止した） */
.room-info-main-body {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* 同じ行に並ぶ .common-info-sub-action（丸ボタン、モバイル30px/PC36px）より
   一回り大きくし、identity ブロックとしての存在感を出す */
.room-info-user-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* PC */
@media (min-width: 768px) {
  .room-info-user-icon {
    width: 40px;
    height: 40px;
  }
}

/* 所有者のアイコンと名前をひとまとまりのリンクにする。アイコンは PC でも
   40px までのため、タップ判定 44px（Luxucomのタップ領域の基準）を確保しても行の高さは
   広がらない */
.room-info-owner-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}

/* 所有者は identity ブロックとして .room-info-desc（本文サイズ）より
   一段大きくする。名前が長い場合は折り返さず1行省略にする（.chat-list-name
   と同じ手法。chat.css 参照） */
.room-info-owner-link span {
  min-width: 0;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (hover: hover) {
  .room-info-owner-link:hover,
  .room-info-img-area a:hover {
    opacity: var(--opacity-hover);
  }
}

.room-info-display-name {
  min-width: 0;
  font-size: 1.1rem;
  line-height: 1.1;
  font-weight: 700;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* PC */
@media (min-width: 768px) {
  .room-info-display-name {
    font-size: 1.2rem;
    line-height: 1.2;
  }
}

/* ルーム情報 */

/* 情報行はタイトル上・内容下の縦積み 1 カラム（編集画面の .room-edit-form-row /
   .user-edit-form-row と同方針）。行余白は閲覧系のためコンパクトな
   .user-edit-form-row と同じ値に揃える */
.room-info-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
  min-width: 0;
  padding: var(--space-2) 0;
}

/* 閲覧画面のキャプション（見出し > 本文 > キャプションの最小階層）。
   編集画面の入力ラベル .room-edit-form-label とは役割が異なるため、
   同じトーンの settings.css .settings-section-title に揃える */
.room-info-row-label {
  min-width: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

/* 旧 .room-info-text は pre-wrap のためテンプレート整形由来の改行が露出し、
   インラインスタイルで打ち消していた。新クラスは normal を既定にする */
.room-info-row-value {
  min-width: 0;
  font-size: 0.95rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* 情報行の見出しと、その行に並べる操作ボタンを1行に置く行ラッパ（チャット右パネルの
   「参加メンバー」＋「入退室履歴」）。.room-info-row は縦積み（flex-direction: column）
   のため、横並びはこの内側のラッパで作る。文字拡大や長い訳語で1行に収まらない場合は
   flex-wrap で操作ボタンを2行目へ落とし、margin-left: auto で右端へ押し出す。
   gap は「行間 / 列間」の順。margin-top はルーム情報画面の「ルームの鍵」
   セクション区切り（.room-keys-header の margin-top）と揃える値のため、
   直値ではなく共有トークン --room-section-gap を参照する（定義はファイル冒頭） */
.room-info-row-header {
  margin-top: var(--room-section-gap);
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

.room-info-row-header > .btn {
  margin-left: auto;
}

/* 「ライブ配信」ラベルと操作ボタン群（ライブ履歴ピル・「配信を開始」）を1行に置く行ラッパ
   （チャットのルーム情報パネル、参加メンバー見出し＋入退室履歴と同じ構造）。値
   （.room-info-row-value）はこの行の下に別要素として続く。.room-info-row-header
   （セクション見出し用、margin-top: 40pxでセクションの区切りを表す）とは役割が異なり、
   キャプション行でボタンを右寄せするだけのため上部余白は持たない。文字拡大や長い訳語で
   1行に収まらない場合はflex-wrapでボタン群を2行目へ落とし、margin-left: autoで右端へ
   押し出す */
.room-info-row-with-action {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

/* 将来ボタンが複数並ぶ場合に備え、個々の.btnではなく1つの行ラッパへ
   margin-left: autoを与える。.btn個別に持たせるとautoマージンがボタン間にも
   配分され、隙間ができて1つの操作群に見えなくなる */
.room-info-row-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

/* チャットのルーム情報パネルにある2つの履歴ピル（「ライブ履歴」「入退室履歴」）だけを
   一段小さくする。行の見出し（.room-info-row-label／.room-info-row-title）より
   控えめに見える大きさが目安。共通定義（common.cssの.common-info-main-action）は、
   ルーム画面の「ルーム編集」「保存」「鍵を管理」やプロフィール画面でも使われるため
   変更せず、この2箇所に限定した親子関係（`.room-info-row-actions > .common-info-main-action` /
   `.room-info-row-header > .common-info-main-action`）で絞り込む。room.cssを読み込む
   他ページ（room_info.html等）にはこれらの要素が無いことをgrepで確認済みのため、影響は
   この2つのボタンに閉じる。数値を二重管理しないよう、chat.css側には同じ値の上書きを置かない
   （chat.htmlはchat.css→room.cssの順で読み込むため、後から読み込まれるこのファイルに
   1箇所だけ定義すれば足りる）。タップ判定44px（common.cssの.common-info-main-action::after
   で確保、幅・高さの実測値によらずtop: 50%基準で解決）は見た目のサイズを変えても影響を
   受けない */
.room-info-row-actions > .common-info-main-action,
.room-info-row-header > .common-info-main-action {
  font-size: 0.75rem;
  padding: 5px 10px;
}

/* セクション見出しレベル（見出し > 本文 > キャプションの最上位）。下にリスト等の
   コンテンツ塊を持ち、アクション（ボタン）を伴うセクションの見出しに使う
   （チャット右パネルの「参加メンバー」＋「入退室履歴」、ルーム情報画面の
   「ルームの鍵」＋「鍵を管理」）。.room-info-row-label（キャプション。
   ラベル＋値の対で使う軽い見出し）より一段強い視覚レベルで、ボタン等の隣接要素に
   埋もれない強さを持たせる。.room-info-label3 と同じ視覚レベルのため宣言を共有し、
   将来どちらかだけ変更してレベルがずれることを防ぐ。.room-info-label3 固有の
   レイアウト（margin-top等）はこのクラスには持たせない。
   見出し要素（h2）に付けるクラスのため、base.cssの見出し既定（margin-bottom・
   line-height）を打ち消す。margin-topは.room-info-label3の個別ルール（および
   .room-keys-headerでの上書き）でのみ指定する。.room-info-row-titleはbase.cssの
   margin-top: 0（直前divとの間隔と同じ）を維持するため、ここではmargin-bottom
   のみ0にする */
.room-info-row-title,
.room-info-label3 {
  margin-bottom: 0;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: inherit;
  color: var(--color-text-primary);
}

/* .room-info-row-header（フレックス行）内で使うため、長い訳語でボタン側を
   圧迫しないよう .room-info-row-label と同じ折り返し方針を適用する */
.room-info-row-title {
  min-width: 0;
  overflow-wrap: anywhere;
}

.room-info-label3 {
  margin-top: 40px;
  width: 100%;
  white-space: nowrap;
}

/* ルーム情報 テキスト */
.room-info-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  word-wrap: break-word;
}

.room-info-text {
  width: 100%;
  min-width: 0;
  font-size: 0.9rem;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  word-wrap: break-word;
}

/* 見出し＋統計＋操作ボタンが1行に収まらない幅（モバイル）では、統計・ボタン群
   （.room-keys-stats）ごと見出しの下の2行目へ折り返す。折り返しの発生する幅は
   文言の長さ（英日で異なる）と件数の桁数で決まり、特定のブレークポイントには
   紐付かないため、メディアクエリではなく flex-wrap の自然な折り返しで扱う。
   gap は「行間 / 列間」の順。列間の 1rem は従来値を維持する（--space-3 は root
   フォントサイズにより 14〜16px と揺れ、従来の見た目とずれる）。margin-top は
   チャット画面「参加メンバー」セクション区切り（.room-info-row-header の
   margin-top）と揃える値のため、共有トークン --room-section-gap を参照する
   （定義はファイル冒頭） */
.room-keys-header {
  width: 100%;
  margin-top: var(--room-section-gap);
  flex-wrap: wrap;
  gap: var(--space-2) 1rem;
}

.room-keys-header .room-info-label3 {
  margin-top: 0;
  width: auto;
}

/* white-space: nowrap は各統計「アイコン＋件数」を行中で分断させないための指定で、
   flex の行分割（flex-wrap）には影響しない。flex-wrap: wrap は、2行目へ落ちてもなお
   1行に収まらない狭い幅（320px 端末など）での横スクロールを防ぐ。margin-left: auto は、
   親.room-keys-headerのjustify-content: space-betweenが2行目に要素が1つだけ残ると
   左端へ寄せてしまうため、折り返し後も右揃えを保つために必要。
   margin-left: autoは.room-keys-stats自身を親の右端へ寄せるだけで、flex-wrapにより
   内部（鍵数・登録者数・鍵を管理）まで折り返した場合の行内配置は制御しないため、
   justify-content: flex-endで内部の折り返し後も右揃えにする。 */
.room-keys-stats {
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;
  white-space: nowrap;
}

.room-keys-stat {
  font-size: 0.9rem;
  font-weight: 500;
}

.room-keys-stat i {
  margin-right: 4px;
}

/* ツールチップ（data-tooltip）で補足説明を出すため tabindex="0" で
   キーボードからも到達できるようにしている。フォーカスリングを明示する */
.room-keys-stat:focus-visible {
  outline: 2px solid var(--color-accent-text);
  outline-offset: 2px;
  border-radius: var(--radius-base);
}

.room-info-box {
  padding: 10px 0;
}

/* 前方向の自動読み込み（room_info.jsのIntersectionObserver）用の監視目印。
   グリッドの列として振る舞わせないよう幅いっぱいにして単独の行にし、
   作品カードの列構成を崩さない。交差判定を成立させるため面積0にはせず、
   わずかな高さのみ持たせる。見えない目印のため色・枠・影は付けない */
.nft-list-top-sentinel {
  width: 100%;
  height: 1px;
}

/* ルーム有効期間 日時選択 */
/* モバイル・PC共通で開始・終了を1行に横並びで右端寄せにする（タイトル行とは別行）。
   Start/End の小ラベルは UI 上冗長と判断し常に非表示にし、代わりにセパレータ「〜」を
   終了ボックス（.room-datetime-group）の内側・先頭に内包する形で表示する（見た目を
   モバイル・PCで揃えるため）。幅が足りない狭いモバイル幅では `flex-wrap: wrap` により
   開始グループ・終了グループの2行に折り返る。この行の直下は「開始グループ」
   「終了グループ（セパレータ内包）」の2アイテムのみのため、折り返した際も両グループが
   単独で `justify-content: flex-end` により行末に揃い、右端が一致する（セパレータを
   グループ間の独立した3つ目のアイテムにすると、折り返し時に1行目＝開始グループ単独、
   2行目＝セパレータ＋終了グループとなり、各行が個別に右端寄せされるため2つの
   日時ボックスの右端がずれて見える不具合があった）。日本語表示ではスマホ幅
   （360px以上）で開始・終了が1行に収まる幅に調整済みだが、英語表示の未選択時など
   内容が長くなるケースでは折り返しうるため `flex-wrap: wrap` は維持する。
   なお終了グループ内の可視子要素はセパレータとフィールドの2つのみ（小ラベルは
   非表示）のため、`.room-datetime-group` の gap は row の gap と同じ
   `var(--space-2)` に揃え、セパレータの左右の余白を対称にしている */
.room-datetime-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
}

.room-datetime-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  min-width: 0;
}

/* Start/End の小ラベルは冗長なため常に非表示にする。日時ボックス側の input には
   既存の aria-label（"Start date and time" 等）が別途付与されているため、
   このラベルを視覚的に隠しても支援技術上の情報は失われない */
.room-datetime-field-label {
  display: none;
}

/* 終了の日時ボックス（.room-datetime-group）内側・先頭に内包するセパレータ。
   モバイル・PC共通で表示する */
.room-datetime-separator {
  display: inline;
  color: var(--color-text-muted);
}

.room-datetime-field {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  /* "YYYY/MM/DD HH:mm" の表示幅（約131px）をちょうど覆う下限値。未選択時の
     プレースホルダー「日時を選択」（約119px）でもこの幅を下回るため、日時を
     選択した瞬間にボックス幅が変動してガタつくことがない。これ以上広げると
     スマホ幅（360〜428px）で開始・終了が1行に収まらず折り返してしまう
     （従来の 184px はまさにこの状態だった）。min-width は下限指定のため、
     フォント環境によって実測幅がこれを超える場合はボックスが自然に広がる
     だけで、テキストが欠けることはない。行は flex-end で右端寄せのため、
     幅の拡大は左方向へ伸びる（右端は固定） */
  min-width: 136px;
  min-height: 44px; /* Luxucomのタップ領域の基準 */
  padding: 0.375rem 0.75rem;
  color: var(--color-text-primary);
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-base);
  cursor: pointer;
}

.room-datetime-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.room-datetime-field:has(.room-datetime-input:focus-visible) {
  outline: 2px solid var(--color-accent-text);
  outline-offset: 2px;
}

/* :has() 未対応ブラウザ向けフォールバック（フォーカス可視化を保証） */
@supports not selector(:has(a)) {
  .room-datetime-field:focus-within {
    outline: 2px solid var(--color-accent-text);
    outline-offset: 2px;
  }
}

.room-datetime-value {
  white-space: nowrap;
  pointer-events: none;
}

.room-datetime-value.is-placeholder {
  color: var(--color-text-muted);
}

.room-info-datetime-reset {
  /* 有効期間が未変更の初期状態では disabled 属性でグレー表示にし、日時を
     変更すると操作可能になったことが伝わるようブランドカラーに切り替える。
     白背景上の文字のためAA基準を満たす濃色トークンを使う */
  --btn-color: var(--color-accent-text);
  --btn-bg: transparent;
  --btn-border-color: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-pill);
  line-height: 1;
  text-decoration: none;
}

/* リセットボタンの配置。有効期間の行が縦積み（タイトル上・コントロール下）
   になったため、.room-edit-form-row の position: relative をアンカーに「有効期間」
   タイトル行の右端へ絶対配置する。
   top は行の上端パディング（.room-edit-form-row の padding: var(--space-3) 0、
   モバイル・PC共通）と揃えてタイトル行とのずれを防ぐ */
.room-datetime-row .room-info-datetime-reset {
  position: absolute;
  top: var(--space-3);
  right: 0;
  margin-top: 0;
}

.room-info-datetime-reset i {
  font-size: 0.78rem;
  line-height: 1;
}

@media (hover: hover) {
  .room-info-datetime-reset:not(:disabled):hover {
    opacity: var(--opacity-hover);
  }
}

.room-info-datetime-reset:disabled {
  color: var(--color-text-muted);
  opacity: 0.65;
}

/* ボタンの見た目の高さは既存のまま維持し、タップ判定だけを 44px
   （Luxucomのタップ領域の基準）へ広げる（settings.css の同種パターンを踏襲）。
   .room-info-datetime-reset は全幅で絶対配置のため他要素と重ならず、
   .room-edit-media-tab は隣接タブと gap があるため重ならない。
   .room-visibility-info はアイコン単体ボタンで幅が44pxに満たないため別ルール
   （下の.room-visibility-info::after）でパターンA（44×44正方形）を使う。
   .segmented-option::after は共通部品化に伴い components.css の
   .segmented 一式へ移した（room.css を読まないページでもタップ領域を確保するため） */
.room-info-datetime-reset::after,
.room-edit-media-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

/* ルーム編集フォーム */

/* .room-edit-page-form と同じ理由（入れ子のflexアイテムが自動最小サイズにより
   縮小できず画面をはみ出す問題の防止）で、フォーム内側のこのコンテナにも
   min-height: 0 を設定する。
   padding-top はセクション見出しを廃止したことに伴う調整。見出しが無いと最初の項目
   （ルーム名）が余白なしのメディア（ヒーロー表示）の直下に来て窮屈に見えるため、
   .common-content-container 既定の 20px から広げる */
.room-edit-form-container {
  min-height: 0;
  padding-top: var(--space-4);
}

/* PC ではフォーム本文の左右余白をモバイルの 20px（.common-content-container 既定）
   より広げ、閲覧画面（.common-info-content-container）と
   同じ 30px に揃える。room.css は common.css より後に読み込まれるため
   同一詳細度でもこちらが勝つ。
   30px は既存のスペーシングトークンに相当値がないためリテラルを使用している
   （既定ガターの 20px も同様の理由でリテラル。settings.css の .settings-section-title
   も同様） */
@media (min-width: 768px) {
  .room-edit-form-container {
    padding-right: 30px;
    padding-left: 30px;
  }
}

/* <form> 自体を .common-container（flexコンテナ・height:100%）いっぱいに広げ、
   内部の .room-edit-form-container が同じ理屈で残り高さを埋められるようにする。
   これにより、コンテンツが画面に収まる場合は .room-edit-delete-action の
   margin-top: auto で削除ボタンを画面下端（フッター位置）に寄せられる。
   min-height: 0 は、入れ子のflexアイテムがコンテンツ量に応じた自動最小サイズに
   よって縮小できなくなり、意図せず画面をはみ出してしまう問題を防ぐため */
.room-edit-page-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.room-edit-form-section {
  display: flex;
  flex-direction: column;
}

/* 区切り線を使わず余白で階層を作る（settings.css と同方針） */
.room-edit-form-section + .room-edit-form-section {
  margin-top: var(--space-5);
}

/* PC も含め縦積み 1 カラム（モダンな SNS のプロフィール編集と同様）。
   ラベル列の余白問題とバッジの行バランス問題を構造的に解消する。
   ライブの行が1行レイアウト化（セグメントコントロール化）でコントロール高が
   下がったため、行余白はセクション別に分けず全セクション統一とする。
   行の上下余白もモバイル・PCで見た目の一貫性を優先し、同じ値に統一する */
.room-edit-form-row {
  position: relative; /* 有効期間リセットボタンの絶対配置のアンカー */
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
  min-width: 0;
  padding: var(--space-3) 0;
}

/* 有効期間の行はタイトルと入力エリアの間隔が窮屈に見えるとの実機レビュー指摘を受け、
   他の行よりわずかに広げる（他の行の間隔は変更しないよう :has() で該当行のみに限定）。
   純粋な装飾のため :has() 未対応ブラウザ向けのフォールバックは付けない */
.room-edit-form-row:has(#id_label_active_period) {
  gap: var(--space-2);
}

.room-edit-form-label {
  display: flex;
  /* バッジ（ピル）とラベル文字の縦位置を揃えるため、中央ではなくベースラインで揃える */
  align-items: baseline;
  gap: var(--space-1);
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 500;
  /* 長い訳語でもラベル列が固定幅で溢れないよう折り返しを許可する */
  overflow-wrap: anywhere;
}

.room-edit-form-control {
  width: 100%;
  min-width: 0;
}

.room-edit-form-control .form-control {
  min-height: 44px; /* Luxucomのタップ領域の基準 */
}

/* common.css は #id_room_name / #id_room_description を width: 500px; max-width: 100%
   に固定しているため、id セレクタより詳細度を上げてこのフォーム内では全幅にする
   （common.css 自体は変更しない）。これによりタブレット幅（ラベル上配置時）・PC 共に
   入力ボックスがフォーム幅いっぱいに広がる */
.room-edit-form-control #id_room_name,
.room-edit-form-control #id_room_description {
  width: 100%;
}

/* 768px以上はタイトル左・コントロール右の1行レイアウト（設定画面の .settings-row と
   同じ「左詰め＋末尾要素の margin-left: auto」方式）。コンパクトなコントロールの行の
   みに使う。768px未満は下のmediaクエリでラベル上段・コントロール下段（右寄せ）の
   2段に強制する（docs/web/responsive-rules.md § 編集フォームの項目レイアウト） */
.room-edit-form-row--inline {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.room-edit-form-row--inline .room-edit-form-control {
  width: auto;
  margin-left: auto;
  min-width: 0;
  /* エラー文の幅にかかわらずセグメントコントロールを行の右端に固定する */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* docs/web/responsive-rules.md § 編集フォームの項目レイアウト。768px未満は
   ラベル・コントロールが同じ行に収まる幅でも常にラベルを上段・コントロールを下段
   （右寄せ）に積む2段レイアウトにする。flex-basis: 100%はflex-wrap: wrapの行内で
   「単独で1行を占める」ことを強制する定番の手法で、幅の余裕や言語による1段/2段の
   混在を無くす。下段の右寄せは既存の.room-edit-form-control（display: flex;
   flex-direction: column; align-items: flex-end;）がそのまま効く。
   row-gapは公開設定行・ライブ配信行とも18pxに揃える。公開設定行は
   .room-visibility-info::after（44×44px、上下に約15.5pxはみ出す）と
   .segmented-option::after（44px、上下に約5pxはみ出す）の中心間距離を44px以上に
   保つために18pxが必要（34.5pxの内訳のうちgap以外の寄与分は約27.5px、44px到達に
   必要なgapは約16.5pxのため余裕を見て18pxにした）。ライブ配信行にはアイコンが無く
   18pxは必須ではないが、2段の見た目を2行で揃えるため同じ値にする。768px以上は
   この行が2段になることは通常無い（フォーム幅700px超に対しラベル・セグメントとも
   十分短い）ため、row-gapはこのmedia内に限定しvar(--space-2)のまま変えない */
@media (max-width: 767px) {
  .room-edit-form-row--inline .room-edit-form-control {
    flex-basis: 100%;
  }

  .room-edit-form-row--inline {
    row-gap: 18px;
  }
}

.room-edit-form-error {
  min-width: 0;
}

/* 日時ボックスが右端寄せ（.room-datetime-row）のため、エラーも右端へ揃えてどの
   フィールドのエラーかを視覚的に紐付ける。開始・終了両方にエラーが付く場合に
   横並びにならないよう column 方向で積む */
.room-edit-form-error--end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.room-edit-form-row ul.errorlist li {
  overflow-wrap: anywhere;
}

/* 既存画面の .label-required（common.css）と見え方を揃えたプレーンな色文字。
   任意はグレー、必須・公開時は必須は .label-required と同じ危険色 */
.room-edit-form-badge {
  flex: 0 0 auto;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.room-edit-form-badge-required,
.room-edit-form-badge-conditional {
  color: var(--color-danger-muted);
}

/* コンテンツが画面に収まる場合は、.room-edit-page-form / .room-edit-form-container
   の残り高さをすべて吸収して画面下端（フッター位置）に寄せる。コンテンツが画面より
   長い場合は自動的にこの余白が縮小され、通常のスクロールを妨げない
   （設定画面の .settings-danger-section と同じ手法） */
.room-edit-delete-action {
  margin-top: auto;
  /* common.css の .edit-delete-action（margin: 30px 0）の下マージンが、モバイルでは
     フッター用オフセット（padding-bottom: var(--mobile-footer-action-offset)）に
     上乗せされて広すぎるため、room-edit 側で 0 に打ち消す */
  margin-bottom: 0;
  /* .edit-delete-action の padding-bottom（フッター用オフセット68px）は、common.css の
     main 自身の padding-bottom（フッター用オフセット52px）と二重にフッター分の
     余白を確保してしまい、削除ボタン下の余白が広くなりすぎる（設定画面の削除行は
     この二重確保が無く main の52pxのみで足りている）。room-edit 側で 0 に打ち消し、
     main の確保分のみに一本化する */
  padding-bottom: 0;
}

/* ルーム削除の行。設定画面のアカウント削除行（settings.css の
   .settings-row + .settings-row-danger）と同じ表現（配置は中央寄せ）。
   共通化は対象画面が出揃った時点で検討する。
   左右の余白は settings-row と同じ 20px 固定（既存のスペーシングトークンに
   20px 相当がないためリテラルを使用している） */
.room-edit-delete-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
  min-height: 56px;
  padding: var(--space-2) 20px;
  margin: 0;
  margin-inline: auto;
  text-decoration: none;
  color: var(--color-danger-muted);
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

@media (hover: hover) {
  .room-edit-delete-row:hover {
    opacity: var(--opacity-hover);
  }
}

.room-edit-delete-row:focus-visible {
  outline: 2px solid var(--color-accent-text);
  outline-offset: -2px;
}

.room-edit-media-errors {
  min-width: 0;
}

.room-edit-media-errors ul.errorlist li {
  overflow-wrap: anywhere;
}

.room-edit-media-wrap {
  width: 100%;
  max-width: 800px;
}

/* メインエリア枠内・左上のオーバーレイグループ（画像/動画タブ＋動画状態チップ）。
   指摘⑤対応でチップをタブの右隣に配置するため、両者を1つのラッパーにまとめる。
   右上の編集アイコン（.common-edit-banner-icon、幅48px）と重ならないよう、
   ラッパーの幅をアイコン分差し引いて制限する（48pxは編集アイコンの幅の直値）。
   チップと重なる場合はflex-wrapでタブの下（2行目）へ折り返す。
   ラッパー自体はクリック透過にし（pointer-events: none）、操作対象があるタブ側だけ
   pointer-events: auto で復活させる（チップは操作対象がないため none のまま） */
.room-edit-media-topleft {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 4;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  max-width: calc(100% - var(--space-3) * 2 - 48px);
  pointer-events: none;
}

/* 動画あり時のみ表示する画像 / 動画タブ。画像・動画の上に重なるため、
   視認性を確保する暗い半透明の下地を敷く。 */
.room-edit-media-tabs {
  display: flex;
  gap: var(--space-1);
  padding: 4px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.55);
  pointer-events: auto;
}

.room-edit-media-tab {
  position: relative;
  padding: var(--space-1) var(--space-2);
  color: var(--color-bg-white);
  opacity: 0.7;
  font-weight: 500;
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.room-edit-media-tab[aria-selected="true"] {
  opacity: 1;
  background: rgba(255, 255, 255, 0.25);
}

@media (hover: hover) {
  .room-edit-media-tab:not([aria-selected="true"]):hover {
    opacity: var(--opacity-hover);
  }
}

.room-edit-img-area {
  position: relative;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16 / 9;
  /* overflow: hidden にしない。編集アイコンのメニュー（.room-edit-media-menu）を
     アイコン直下に表示するため、このエリアの下端をはみ出せるようにする（特にモバイル幅では
     中央配置のアイコンから開くメニューの高さがエリアの残り高さを超えうるため、クリップして
     操作不能にしないことを優先する）。画像・動画自体の角丸クリップは内側の各要素
     （common-edit-banner-container / room-edit-video-tabpanel 以下）が
     border-radius: inherit で個別に担う。 */
}

.room-edit-img-area .common-edit-banner-container {
  border-radius: inherit;
  /* 編集メニューはアイコンのみで開くため、バナー全体のポインタは既定に戻す */
  cursor: default;
}

/* 画像自体は操作できないため、メインエリアのホバーによる暗転を無効化する。
   タッチ端末ではタップ後に :hover が残るブラウザがあるため、
   @media (hover: hover) では囲まない。 */
.room-edit-img-area .common-edit-banner-container:hover .common-edit-banner-img {
  filter: none;
}

/* アイコンは右上配置の親（.room-edit-media-menu）内の通常フロー要素として配置する。
   左上のメディアタブと釣り合う48pxの見た目・タップ領域を確保する。 */
.room-edit-img-area .common-edit-banner-icon {
  position: relative;
  top: auto;
  left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background-color: transparent;
  transform: none;
  cursor: pointer;
  font-size: 1.4rem;
}

.room-edit-img-area .common-edit-banner-icon::after {
  width: 48px;
  height: 48px;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: none;
}

@media (hover: hover) {
  .room-edit-img-area .common-edit-banner-icon:hover {
    opacity: var(--opacity-hover);
  }

  .room-edit-img-area .common-edit-banner-icon:hover::after {
    background: rgba(0, 0, 0, 0.7);
  }
}

.room-edit-img-area .common-edit-banner-icon:focus-visible {
  outline: 2px solid var(--color-accent-text);
  outline-offset: 2px;
}

/* 動画タブのパネル全体（動画プレビュー / 変換中・失敗ステータス表示の親）。
   room-edit-img-area（position: relative）を基準に絶対配置で全面を占める。
   border-radius: inherit は直接の親からしか値を継承しないため、ここで一度中継しないと
   孫要素（room-edit-video-preview 等）の border-radius: inherit が
   room-edit-img-area の角丸ではなく初期値（0）を継承してしまい、動画タブ表示時に
   角丸が失われる */
.room-edit-video-tabpanel {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.room-edit-video-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-bg-black);
  border-radius: inherit;
  object-fit: cover;
}

/* 動画変換中・変換失敗時に動画プレビューの代わりに表示するステータスパネル */
.room-edit-video-status-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  text-align: center;
  color: var(--color-bg-white);
  background-color: var(--color-bg-black);
  border-radius: inherit;
}

.room-edit-video-status-text {
  margin: 0;
  font-size: 0.9rem;
}

.room-edit-video-status-icon {
  font-size: 1.75rem;
}

/* 編集アイコン＋メニュー。アイコンの親 common-edit-banner-container は overflow: hidden
   のため、その外側（room-edit-img-area直下）に配置する。左上のメディアタブと対称の
   余白を取り、動画再生時のブラウザネイティブ再生ボタン（中央表示）とも重ならないようにする。
   メニューはアイコンの右端を基準に左方向へ開き、画面右端からのはみ出しを防ぐ */
.room-edit-media-menu {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 4;
}

.room-edit-media-menu .dropdown-menu {
  top: 100%;
  right: 0;
  left: auto;
  transform: none;
  margin-top: var(--space-2);
  min-width: 11rem;
}

.room-edit-media-menu-hint {
  display: block;
  margin-top: var(--space-1);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  /* .dropdown-item は white-space: nowrap のため、狭い画面でメニュー全体が
     広がりすぎないよう注記だけ折り返しを許可する */
  white-space: normal;
}

/* components.css の .dropdown-item は white-space: nowrap のため、
   日本語の長いラベルでメニュー全体が画面外へ広がってしまう。項目本体にも
   折り返しとタップ領域確保を適用する */
.room-edit-media-menu .dropdown-item {
  min-height: 44px; /* Luxucomのタップ領域の基準 */
  /* 注記付きで折り返すため、1行前提の共通の上下余白（components.css）ではなく従来の余白を保つ */
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  white-space: normal;
  max-width: min(18rem, calc(100vw - var(--space-3) * 2));
}

/* 動画の状態表示（層B）。.room-edit-media-topleft 内でタブの右隣に並べ、
   タブ表示の有無（未登録・削除予定でタブが消える）と独立させる。タブが非表示のときは
   ラッパーの先頭（左上）に来る。ラッパー側で編集アイコンとの重なり防止・折り返しを
   制御するため、このクラス自体に位置指定は持たない。幅の上限はラッパー
   （.room-edit-media-topleft の max-width）に任せ、このチップ自体は
   inline-flex + width: fit-content で内容幅にとどめる（テキストがピル背景内で
   左下に寄って見える不具合の修正） */
.room-edit-video-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.room-edit-video-state-text {
  min-width: 0;
  color: var(--color-bg-white);
  font-size: 0.75rem;
  font-weight: 500;
  /* ピルの上下パディングだけで高さを作り、文字が下寄りに見えないようにする */
  line-height: 1;
  overflow-wrap: anywhere;
}

.room-card-title-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  width: 100%;
}

.room-card-title {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}

.room-card-title-clamp {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 0 1 auto;
}

.room-visibility-lock {
  display: inline-block;
  margin-left: 3px;
  color: var(--color-text-muted);
}

.room-status-bar {
  width: 100%;
  padding: 3px 8px;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-text-secondary);
  text-align: center;
  line-height: 1.2;
}

.room-status-bar--inactive {
  background-color: var(--color-status-inactive);
}

.room-status-bar--upcoming {
  background-color: var(--color-status-upcoming);
}

.room-status-bar--active {
  background-color: var(--color-status-active);
}

.room-status-bar--closed {
  background-color: var(--color-status-closed);
}

.room-card-user-block {
  margin-bottom: 5px;
  max-width: 100%;
}

.room-card-desc-area {
  margin-bottom: 10px;
}

.room-card-nft-preview {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-bottom: 8px;
}

.room-card-nft-preview-list {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-wrap: nowrap;
  overflow: hidden;
}

.room-card-nft-image {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  flex: 0 0 auto;
}

.room-card-nft-more-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  flex: 0 0 auto;
}

.room-card-save-action[data-saved="true"] {
  --btn-border-color: var(--color-border-medium);
  --btn-color: var(--color-text-subtle);
}

@media (hover: hover) {
  .room-card-save-action[data-saved="true"]:hover {
    opacity: var(--opacity-hover);
  }
}

/* ルーム公開ステータス 情報アイコン（ツールチップ本体は global/tooltip.js が描画する）。
   position: relativeは下の::after（タップ領域拡張）の基準。z-index: 1は、44×44pxの
   タップ領域が上下に約15.5pxはみ出し行のpadding（14〜16px）を超えるため、
   position: relativeを持つ後続の.room-edit-form-row（次の行）側が通常の重ね順
   （positioned要素は非positioned要素より後に描画される）で上に描画され当たり判定を
   奪うのを防ぐため（見た目は変えない、当たり判定のみ前面へ出す）。
   以前は狭幅でラベルとセグメントコントロールが1行に収まる場合の::after横方向の重なり
   （右へ約13.5pxはみ出す）を避けるためmargin-right: 6pxを持たせていたが、768px未満は
   .room-edit-form-row--inline側で常に2段（ラベル上・コントロール下）を強制するように
   なり、この行が1行に収まる幅自体が発生しなくなったため不要になった。768px以上は
   1行のままだが、フォーム内側の幅（.room-edit-form-container、768px以上でpadding
   30px×2差引後 約700px）に対しラベル・セグメントとも十分短く、margin-left: autoに
   よる余白が数百px単位で残るため、英語表示でも重なる心配が無い */
.room-visibility-info {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: var(--color-text-muted);
  /* button 化に伴うブラウザ既定スタイルの打ち消し */
  padding: 0;
  background: none;
  border: none;
  font: inherit;
}

.room-visibility-info:focus-visible {
  outline: 2px solid var(--color-accent-text);
  outline-offset: 2px;
}

/* アイコン単体ボタンで幅・高さとも44pxに満たないため、パターンA（44×44正方形・
   中央基準）でタップ領域を広げる。見た目（実寸・位置）は変えない */
.room-visibility-info::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* 入退室履歴モーダルの項目（チャット画面の右パネルから開く） */
.entry-exit-history-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 8px 0;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--color-border-faint);
}

.entry-exit-history-message {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.entry-exit-history-user {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: var(--color-text-primary);
}

@media (hover: hover) {
  a.entry-exit-history-user:hover {
    opacity: var(--opacity-hover);
  }
}

.entry-exit-history-icon-img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.entry-exit-history-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entry-exit-history-label {
  flex-shrink: 0;
  white-space: nowrap;
  color: var(--color-text-secondary);
}

.entry-exit-history-time {
  align-self: flex-end;
  white-space: nowrap;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}