/* ルーム情報画面・ルーム編集画面共通で、モバイル・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（円形アイコンボタン）が
   タップ判定を 44×44px に拡張していることを踏まえた値。モバイル幅のボタン
   本体は 30px のため、44px 判定は左右に 7px ずつはみ出す。gap: 12px のままだと
   隣接ボタンの判定同士が 2px 重なってしまうため、var(--space-3)（16px）に
   広げて重なりを避けている（44px 判定同士の間に 2px の余裕ができる） */
.room-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
}

.room-header-actions a {
  white-space: nowrap;
  font-size: 0.9rem;
}

/* ルーム情報画面では所有者リンク（左）とボタン群（右）の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（WCAG 2.5.8）を確保しても行の高さは
   広がらない */
.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-faint);
  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;
}

.room-info-label3 {
  margin-top: 40px;
  width: 100%;
  white-space: nowrap;
  font-size: 0.9rem;
  font-weight: 500;
}

/* ルーム情報 テキスト */
.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;
}

.room-keys-header {
  width: 100%;
  margin-top: 40px;
  gap: 1rem;
}

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

.room-keys-stats {
  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-btn);
  outline-offset: 2px;
  border-radius: var(--radius-base);
}

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

/* ルーム有効期間 日時選択 */
/* モバイル・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; /* WCAG 2.5.8 の最小タップ領域 */
  padding: 0.375rem 0.75rem;
  color: var(--color-text-dark);
  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-btn);
  outline-offset: 2px;
}

/* :has() 未対応ブラウザ向けフォールバック（フォーカス可視化を保証） */
@supports not selector(:has(a)) {
  .room-datetime-field:focus-within {
    outline: 2px solid var(--color-accent-btn);
    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 {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  line-height: 1;
  text-decoration: none;
  /* 有効期間が未変更の初期状態では disabled 属性でグレー表示にし、日時を
     変更すると操作可能になったことが伝わるようブランドカラーに切り替える */
  color: var(--color-accent-btn);
  background: transparent;
  --btn-hover-bg: var(--color-bg-subtle);
  --btn-hover-border-color: transparent;
  --btn-active-bg: var(--color-bg-subtle);
  --btn-active-border-color: transparent;
}

/* リセットボタンの配置。有効期間の行が縦積み（タイトル上・コントロール下）
   になったため、.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（WCAG 2.5.8 の
   最小ターゲットサイズ）へ広げる（settings.css の同種パターンを踏襲）。
   .room-info-datetime-reset は全幅で絶対配置のため他要素と重ならず、
   .room-edit-media-tab は隣接タブと gap があるため重ならない。
   .room-edit-segmented-option も隣接ピルと gap（2px）があり、::after の左右は
   自身の幅に一致する（left/right: 0 は自要素基準）ため重ならない */
.room-info-datetime-reset::after,
.room-edit-media-tab::after,
.room-edit-form-label .room-visibility-info::after,
.room-edit-segmented-option::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

/* .room-entry-exit-history-btn はアイコンのみの正方形ボタンで幅が 44px に
   満たないため、::after 自体を 44×44px にして中央配置する。隣接する
   .room-keys-stat はクリック操作を持たない <span>（統計表示）のため、
   拡張したタップ判定と重なっても操作不能になるものはない */
.room-entry-exit-history-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -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; /* WCAG 2.5.8 の最小タップ領域 */
}

/* 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%;
}

/* タイトル左・コントロール右の1行レイアウト（設定画面の .settings-row と同じ
   「左詰め＋末尾要素の margin-left: auto」方式）。コンパクトなコントロールの行のみに使う */
.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;
}

.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 {
  margin-top: var(--space-1);
}

.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);
}

/* セグメントコントロール（ルーム公開・ライブ）。settings.css の
   .settings-segmented / .settings-segmented-btn と同じ見た目だが、行を
   タイトル左・コントロール右の1行に収める（.room-edit-form-row--inline）ため、
   より控えめな高さ・文字サイズにコンパクト化している。
   settings.css は共有しないため値をコピーしている。共通化は対象画面が出揃った時点で検討する */
.room-edit-segmented {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: fit-content;
  gap: 2px;
  padding: 2px;
  background-color: var(--color-bg-light);
  border-radius: var(--radius-pill);
}

.room-edit-segmented-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  min-width: 0;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  cursor: pointer;
}

/* ラジオ input は DOM 上に残しつつ、キーボードフォーカスを保つため display: none には
   せず視覚的にのみ隠す（フォーム送信・バリデーション・JSは変更しない） */
.room-edit-segmented-option input {
  position: absolute;
  margin: 0;
  opacity: 0;
}

.room-edit-segmented-label {
  min-width: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

/* 選択状態は :has() で表現する */
.room-edit-segmented-option:has(input:checked) {
  background-color: var(--color-accent-btn);
}

.room-edit-segmented-option:has(input:checked) .room-edit-segmented-label {
  color: var(--color-bg-white);
}

/* :has() 未対応ブラウザ向けフォールバック（room-datetime-field と同方針）。
   選択状態が文字色の変化だけでも判別できるようにする */
@supports not selector(:has(a)) {
  .room-edit-segmented-option input:checked + .room-edit-segmented-label {
    color: var(--color-accent-btn);
    font-weight: 600;
  }
}

.room-edit-segmented-option:has(input:focus-visible) {
  outline: 2px solid var(--color-accent-btn);
  outline-offset: 2px;
}

@supports not selector(:has(a)) {
  .room-edit-segmented-option:focus-within {
    outline: 2px solid var(--color-accent-btn);
    outline-offset: 2px;
  }
}

@media (hover: hover) {
  .room-edit-segmented-option:not(:has(input:checked)):hover {
    opacity: var(--opacity-hover);
  }
}

/* コンテンツが画面に収まる場合は、.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-btn);
  outline-offset: -2px;
}

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

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

/* エラーのある入力欄を枠線色で示す。border-color のみの変更でレイアウトは変えない。
   field_input タグがエラー時に aria-invalid="true" を必ず付与するため、それを基準にする */
.room-edit-form-control .form-control[aria-invalid="true"] {
  border-color: var(--color-danger-muted);
}

/* common.css の .form-control:focus よりこのルールの詳細度が高いため、
   フォーカス時のアクセント色が消えないよう明示的に戻す */
.room-edit-form-control .form-control[aria-invalid="true"]:focus {
  border-color: var(--color-accent);
}

.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-btn);
  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; /* WCAG 2.5.8 の最小タップ領域 */
  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-dark);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  flex: 0 0 auto;
}

.nft-add-key-card {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-bg-white);
  color: var(--color-text-muted);
  overflow: hidden;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    color 0.18s ease;
}

.nft-add-key-card-top {
  background: var(--color-bg-subtle);
  transition: background-color 0.18s ease;
}

.nft-add-key-card-center {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  text-align: center;
}

.nft-add-key-card-plus {
  font-size: 2rem;
  line-height: 1;
  font-weight: 300;
  color: var(--color-text-muted);
  transition: color 0.18s ease;
}

.nft-add-key-card-label {
  font-size: 0.95rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: color 0.18s ease;
}

.add-key-card-bottom-spacer {
  min-height: 64px;
}

@media (hover: hover) {
  .nft-add-key-card:hover {
    opacity: var(--opacity-hover);
  }
}

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

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

/* ルーム公開ステータス 情報アイコン（ツールチップ本体は global/tooltip.js が描画する） */
.room-visibility-info {
  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-btn);
  outline-offset: 2px;
}

/* 入退室履歴ボタン */
.room-entry-exit-history-btn {
  position: relative;
  padding: 0;
  font-size: 0.9rem;
  color: var(--color-text-primary);
  --btn-hover-bg: transparent;
  --btn-hover-border-color: transparent;
  --btn-active-bg: transparent;
  --btn-active-border-color: transparent;
}

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

/* 入退室履歴モーダルの項目 */
.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-dark);
}

@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);
}