/* モバイル */
html {
  font-size: 14px;
}

/* タブレット以上 */
@media (min-width: 768px) {
  html {
    font-size: 15px;
  }
}

/* PC以上 */
@media (min-width: 1200px) {
  html {
    font-size: 16px;
  }
}

/* iPhone Safari は入力欄の文字サイズが16px未満だとフォーカス時に自動ズームするため、
   モバイル・タブレット表示（1200px未満、html が16px未満の範囲）では
   入力系要素の文字サイズを16px以上にする。
   チェックボックス・ラジオはズーム対象外のため除外する */
@media (max-width: 1199px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  select.btn,
  .form-control,
  .form-select {
    font-size: 16px;
  }
}

/* ベースフォント
 * デザイントークン（:root）と最小リセットは base.css に定義する */
body {
  font-family: var(--font-family-base);
  line-height: 1.6;
  height: 100svh;
}

/* common */
::-webkit-scrollbar {
  display: none;
}

/* Safari はボタンの color が未設定だとシステムブルーになるため明示的にリセット */
button {
  color: inherit;
}

/* Chrome, Safari, Edge, Opera */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

/* Internet Explorer */
input[type="text"]::-ms-clear,
input[type="search"]::-ms-clear {
  display: none;
}

input[type="date"] {
  background-color: var(--color-bg-white);
  color: var(--color-text-dark);
  /* Safariのアウトラインを削除する場合 */
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--color-border-muted);
  border-radius: 4px;
  padding: 5px;
}

/* btn デフォルトのフォーカスリング・アクティブ枠を全体無効化 */
.btn:focus:not(:focus-visible),
.btn:active,
.btn:first-child:active {
  outline: none;
  box-shadow: none;
}

.btn:focus-visible {
  outline: 2px solid var(--color-accent-btn);
  outline-offset: 2px;
  box-shadow: none;
}

/* btn-primary → ゴールドアクセントに統一 */
.btn-primary,
.btn-primary:disabled,
.btn-primary[disabled] {
  --btn-bg: var(--color-accent-btn);
  --btn-border-color: var(--color-accent-btn);
  --btn-hover-bg: var(--color-accent-btn);
  --btn-hover-border-color: var(--color-accent-btn);
  --btn-active-bg: var(--color-accent-btn-hover);
  --btn-active-border-color: var(--color-accent-btn-hover);
  --btn-color: var(--color-bg-white);
  --btn-hover-color: var(--color-bg-white);
  --btn-active-color: var(--color-bg-white);
  background-color: var(--color-accent-btn);
  border-color: var(--color-accent-btn);
  color: var(--color-bg-white);
  white-space: nowrap;
  width: auto;
}

.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--color-accent-btn-hover);
  border-color: var(--color-accent-btn-hover);
  color: var(--color-bg-white);
}

@media (hover: hover) {
  .btn-primary:hover {
    opacity: var(--opacity-hover);
  }
}

.btn-primary:focus-visible {
  outline: 3px solid var(--color-accent-btn-focus);
  outline-offset: 2px;
  box-shadow: none;
}

/* btn-outline-primary → ゴールド枠に統一 */
.btn-outline-primary {
  --btn-color: var(--color-accent-btn);
  --btn-border-color: var(--color-accent-btn);
  --btn-hover-color: var(--color-bg-white);
  --btn-hover-bg: var(--color-accent-btn);
  --btn-hover-border-color: var(--color-accent-btn);
  --btn-active-color: var(--color-bg-white);
  --btn-active-bg: var(--color-accent-btn);
  --btn-active-border-color: var(--color-accent-btn);
  --btn-disabled-color: var(--color-accent-btn);
  --btn-disabled-border-color: var(--color-accent-btn);
}

.btn-outline-primary:focus-visible {
  outline: 3px solid var(--color-accent-btn-focus);
  outline-offset: 2px;
  box-shadow: none;
}

.btn-neutral {
  --btn-hover-bg: var(--btn-bg);
  --btn-hover-border-color: var(--btn-border-color);
  --btn-active-bg: var(--btn-bg);
  --btn-active-border-color: var(--btn-border-color);
}

@media (hover: hover) {
  .btn-neutral:hover {
    opacity: var(--opacity-hover);
  }
}

.btn-neutral:focus-visible,
.btn-subtle:focus-visible {
  outline: 2px solid var(--color-accent-btn);
  outline-offset: 2px;
  box-shadow: none;
}

/* 削除ボタン（枠線のみ・くすんだ赤） */
.btn-delete {
  background: transparent;
  border: 1px solid var(--color-danger-muted);
  color: var(--color-danger-muted);
  white-space: nowrap;
  width: auto;
  --btn-hover-bg: transparent;
  --btn-hover-border-color: var(--color-danger-muted);
  --btn-hover-color: var(--color-danger-muted);
}

@media (hover: hover) {
  .btn-delete:hover {
    opacity: var(--opacity-hover);
  }
}

.btn-delete:focus-visible {
  outline: 2px solid var(--color-danger-muted);
  outline-offset: 2px;
  box-shadow: none;
}

/* ボタン対の幅均一化・間隔（btn-row コンテナ内のみ） */
.btn-row .btn {
  min-width: 120px;
}

.btn-row .btn + .btn {
  margin-left: 12px;
}

/* ── フォーム要素アクセント色（ブランドゴールド） ── */

/* ネイティブ form コントロール（ラジオ・チェックボックス・range 等） */
body {
  accent-color: var(--color-accent);
}

/* Bootstrap form-check（チェックボックス・ラジオ）チェック済み状態 */
.form-check-input:checked {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

/* Bootstrap form-check フォーカスリング */
.form-check-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent-focus);
}

/* テキスト入力・テキストエリア・セレクト フォーカス */
.form-control:focus,
.form-select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent-focus);
  outline: none;
}

/* リンク・その他インタラクティブ要素のフォーカスリング */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  box-shadow: none;
}

/* スピナー */
.loading-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  z-index: 999;
}

body.loading #loading {
  display: flex;
}

/* 通信中だけ表示 */
.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-border-light);
  border-top-color: var(--color-text-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* header */
header {
  position: fixed;
  margin: 0;
  z-index: 200;
  width: 100%;
  height: 40px;
  top: 0;
  left: 0;
  background: var(--color-bg-white);
  border-bottom: 1px solid var(--color-border-muted);
}

/* PC */
@media (min-width: 768px) {
  header {
    height: 56px;
  }
}

.header-logo {
  display: inline-flex;
  align-items: center;
  position: relative;
  min-height: 32px;
  text-decoration-line: none;
  white-space: nowrap;
}

.header-logo-wordmark {
  font-family: var(--font-family-base);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--color-text-brand);
}

/* PC */
@media (min-width: 768px) {
  .header-logo {
    min-height: 40px;
  }

  .header-logo-wordmark {
    font-size: 1.2rem;
  }
}

@media (hover: hover) {
  .header-logo:hover {
    opacity: var(--opacity-hover);
  }
}

.header-nav-link {
  text-decoration: none;
  color: var(--color-text-dark);
  font-weight: 400;
  margin-left: 1.2rem;
}

.header-nav-link:first-child {
  margin-left: 0;
}

@media (hover: hover) {
  .header-nav-link:hover {
    text-decoration: none;
    opacity: var(--opacity-hover);
  }
}

.header-nav-link.is-active {
  color: var(--color-text-primary);
  font-weight: 500;
  border-bottom: 2px solid var(--color-text-primary);
  padding-bottom: 2px;
}

.header-nav-link.is-active i {
  color: inherit;
}

.mobile-footer-item.is-active {
  color: var(--color-text-primary);
  font-weight: 500;
}

.mobile-footer-item.is-active i {
  color: inherit;
}

/* bottom: 0 + height（--mobile-footer-height）のみで構成し、safe-area用paddingを持たない。
   .pwa-banner の bottom: var(--mobile-footer-height) はこの前提（高さそのものがフッターの
   全高であること）に依存しているため、将来 safe-area inset分のpaddingをこの要素に足す場合は
   .pwa-banner側の計算も合わせて見直すこと */
.mobile-footer-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--mobile-footer-height);
  background: var(--color-bg-white);
  border-top: 1px solid var(--color-border-light);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 200;
  font-size: 11px;
  /* フッター本体はクリック不可にし、子要素リンクのみクリック可能にする */
  pointer-events: none;
}

.mobile-footer-item {
  flex: 1;
  min-width: 48px;
  min-height: var(--mobile-footer-height);
  align-self: stretch;
  text-decoration: none;
  color: var(--color-text-subtle);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: auto;
}

.mobile-footer-label {
  line-height: 1.1;
}

.header-nav-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin-right: 4px;
}

.footer-nav-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 1rem;
}

.nav-chat-status-unread {
  position: absolute;
  top: -3px;
  right: -6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-bg-white);
}

/* .nav-chat-status-unread とは異なりアイコン枠の内側に置く。ここはヘルプ・
   ユーザーアイコンと並ぶ fs-3 の大きいアイコン単体リンク（.header-notification-icon
   が position: relative）で、外側へはみ出させるより枠内に収めた方が他アイコンとの
   間隔が揃うため。 */
.nav-notification-unread {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-bg-white);
}

.header-user {
  display: flex;
  margin: 0 5px;
  padding: 0;
  border-style: none;
}

@media (hover: hover) {
  .header-user:hover,
  .header-help-icon:hover,
  .header-notification-icon:hover,
  .dropdown-menu-icon:hover {
    opacity: var(--opacity-hover);
    background: transparent !important;
  }
}

.header-user-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

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

/* ヘッダー右側のアイコン単体リンク（ヘルプ・通知）に共通のスタイル */
.header-help-icon,
.header-notification-icon {
  position: relative;
  margin: 0 5px;
  padding: 0;
  border-style: none;
}

/* アイコン単体リンクのため .header-nav-link.is-active の下線は使わず色のみで現在地を示す */
.header-notification-icon.is-active {
  color: var(--color-text-primary);
}

.header-notification-icon.is-active i {
  color: inherit;
}

.dropdown-menu-icon {
  display: flex;
  padding: 0;
  border-style: none;
}

.dropdown-item {
  left: 0;
}

.dropdown-icon {
  width: 24px;
  text-align: center;
}

.dropdown-copyright {
  font-size: 0.8rem;
}

.window-close {
  margin: 10px;
  height: 30px;
}

.dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item:focus {
  background-color: transparent !important;
  color: inherit;
  outline: none;
}

@media (hover: hover) {
  .dropdown-menu .dropdown-item:hover {
    opacity: var(--opacity-hover);
    background-color: transparent !important;
  }
}

/* 上の :focus transparent !important より優先させるため !important を付与 */
.dropdown-menu .dropdown-item:focus-visible {
  opacity: var(--opacity-hover) !important;
  background-color: transparent !important;
  outline: 2px solid var(--color-accent-btn);
  outline-offset: -2px;
}

nav {
  height: 100%;
  width: 100%;
}

main {
  padding-top: 40px;
  padding-bottom: var(--mobile-footer-main-offset);
  background-color: var(--color-bg-white);
}

/* PC
   iPadはモバイル判定に含まれ768px以上でもバナーが出るため、フッターナビ消滅後もmainの
   padding-bottomを0で打ち消すと末尾のコンテンツがバナーカードの下に隠れる。バナー自身の
   高さ（--pwa-banner-offset）とカード化に伴う浮遊分（--pwa-banner-card-gap。いずれも
   global/pwa_install.jsが実行時に設定）を確保し、バナー非表示時は両方とも0にフォールバック
   することでPCの見た目は従来どおりにする */
@media (min-width: 768px) {
  main {
    padding-top: 56px;
    padding-bottom: calc(var(--pwa-banner-offset, 0px) + var(--pwa-banner-card-gap, 0px));
  }
}

.common-close-btn {
  color: var(--color-text-muted);
  border: none;
  background: transparent;
  --btn-active-border-color: transparent;
  --btn-active-bg: transparent;
}

.common-close-btn i {
  font-size: 1.5rem;
}

@media (hover: hover) {
  .common-close-btn:hover {
    opacity: var(--opacity-hover);
    color: var(--color-text-muted);
  }
}

.common-close-btn:focus-visible {
  outline: 2px solid var(--color-accent-btn);
  outline-offset: 2px;
  box-shadow: none;
}

/* エラーメッセージ */

/* Form/Section Alert 共通コンポーネント */
.form-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-base);
}

.form-alert[hidden] {
  display: none;
}

.form-alert-icon {
  flex: none;
  font-size: 1.1rem;
  /* form-alert-message の1行の高さ（body: font-size 1rem, line-height 1.5）に揃え、
     複数行時にアイコンが本文の1行目と同じ位置から描画されるようにする */
  line-height: 1.5rem;
  /* Font Awesome アイコンは本来 vertical-align: -0.125em で文字と光学的に揃うが、
     flexコンテナ内ではvertical-alignが効かないため、同等のオフセットをpadding-topで再現する */
  padding-top: 0.125em;
}

.form-alert-body {
  flex: 1 1 auto;
  min-width: 0;
}

.form-alert-message {
  margin: 0;
  /* line-height は unitless のため祖先の font-size 縮小（例: chat.css の
     .chat-chat-container { font-size: 0.8rem }）を継承すると行高が変わってしまう。
     form-alert-icon の line-height（rem・root基準の絶対値）と一致させるため、
     font-size を root 基準の 1rem に固定して祖先の影響から独立させる */
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.form-alert-message + .form-alert-message {
  margin-top: var(--space-1);
}

.form-alert--error {
  background-color: var(--color-danger-pale);
  border-color: var(--color-danger-muted);
}

.form-alert--error .form-alert-icon {
  color: var(--color-danger-muted);
}

.form-alert--warning {
  background-color: var(--color-status-upcoming);
  border-color: var(--color-accent-muted);
}

.form-alert--warning .form-alert-icon {
  color: var(--color-accent-muted);
}

.form-alert--info {
  background-color: var(--color-status-inactive);
  border-color: var(--color-border-muted);
}

.form-alert--info .form-alert-icon {
  color: var(--color-border-muted);
}

.form-alert--success {
  background-color: var(--color-status-active);
  border-color: var(--color-success-muted);
}

.form-alert--success .form-alert-icon {
  color: var(--color-success-muted);
}

/* トースト通知（リダイレクト後の Django messages。extra_tags="modal" のみモーダルへ分岐する）
   既存の固定要素の z-index（header/.mobile-footer-nav: 200、.salon-fab: 300、
   .pwa-banner: 2000、.salon-compose-sheet: 2010、.message-modal/.history-modal: 2100）に対し、
   画面上部に固定表示することで下部固定要素（footer nav/FAB/PWAバナー）とは空間的に重ならず、
   z-index はモーダル類より低い 1500 とし、モーダル表示中は自然にモーダルの下に隠れるようにする */
.toast-container {
  position: fixed;
  top: calc(var(--space-3) + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  z-index: 1500;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: 0 0.75rem;
  /* コンテナ自体はクリック不可にし、個々のトースト（閉じるボタン等）のみ操作可能にする */
  pointer-events: none;
}

/* header は position: fixed のため、header が実在するページ（header_off でない）でのみ
   main と同じ高さ分（40px/56px）を上端オフセットに加算し、ヘッダーへの潜り込みを防ぐ */
header + .toast-container {
  top: calc(40px + var(--space-3) + env(safe-area-inset-top, 0px));
}

/* PC */
@media (min-width: 768px) {
  header + .toast-container {
    top: calc(56px + var(--space-3) + env(safe-area-inset-top, 0px));
  }
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  width: 100%;
  max-width: 420px;
  padding: var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-base);
  background-color: var(--color-bg-white);
  box-shadow: 0 8px 24px rgba(15, 15, 15, 0.16);
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

/* PC
   メディアクエリは詳細度を上げないため、基底の .toast ルールより後ろに置く。
   前に置くと max-width: 420px に負けて広がらない */
@media (min-width: 768px) {
  .toast {
    width: fit-content;
    min-width: 420px;
    max-width: 640px;
  }
}

.toast--closing {
  opacity: 0;
  transform: translateY(-8px);
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    transition: none;
  }
}

.toast-icon {
  flex: none;
  font-size: 1.1rem;
  line-height: 1.5rem;
  padding-top: 0.125em;
}

.toast-message {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.toast-close-btn {
  flex: none;
  background: none;
  border: none;
  padding: 0;
  margin-left: var(--space-1);
  color: var(--color-text-muted);
  font-size: 0.95rem;
  cursor: pointer;
  line-height: 1.5rem;
}

@media (hover: hover) {
  .toast-close-btn:hover {
    opacity: var(--opacity-hover);
  }
}

.toast--error {
  border-color: var(--color-danger-muted);
}

.toast--error .toast-icon {
  color: var(--color-danger-muted);
}

.toast--warning {
  border-color: var(--color-accent-muted);
}

.toast--warning .toast-icon {
  color: var(--color-accent-muted);
}

.toast--info {
  border-color: var(--color-border-muted);
}

.toast--info .toast-icon {
  color: var(--color-border-muted);
}

.toast--success {
  border-color: var(--color-success-muted);
}

.toast--success .toast-icon {
  color: var(--color-success-muted);
}

ul.errorlist {
  margin: 0;
  padding: 0;
}

ul.errorlist li {
  color: var(--color-danger-muted);
  display: block;
  text-align: left;
  font-size: 0.8rem;
}

ul.infolist {
  margin-top: 5px;
  margin-bottom: 20px;
  padding: 0;
}

ul.infolist li:before {
  content: "* ";
}

ul.infolist li {
  display: block;
  text-align: left;
  font-size: 0.8rem;
}

.label-required {
  color: var(--color-danger-muted);
  font-size: 0.8rem;
}

/* フォーム */

#id_room_name {
  max-width: 100%;
  width: 500px;
}

#id_room_description {
  max-width: 100%;
  width: 500px;
  height: 100%;
  resize: none;
}

#id_user_address {
  max-width: none;
  width: 100%;
}

#id_user_profile {
  width: 100%;
}

#id_nick_name {
  max-width: 100%;
  width: 500px;
}

/* 画面共通 */

.main-common-container {
  max-width: 500px;
  margin: 30px auto;
  padding: 0 20px;
}

.common-container {
  position: relative;
  border-width: 0;
  border-style: none;
  height: 100%;
  width: 100svw;
  max-width: 760px;
  display: flex;
  flex-direction: column;
}

/* PC */
@media (min-width: 768px) {
  .common-container {
    border-width: 1px;
    border-style: solid;
    border-top: none;
    border-bottom: none;
  }
}

.common-content-container {
  padding: 20px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.common-info-content-container {
  padding: 0 20px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.common-select-box {
  width: auto;
}

.common-content {
  margin-top: 10px;
  margin-bottom: 10px;
  width: 100%;
  position: relative;
}

.common-edit-content {
  margin-top: 20px;
  margin-bottom: 20px;
  width: 100%;
  position: relative;
}

.edit-delete-action {
  margin: 30px 0;
  padding-bottom: var(--mobile-footer-action-offset);
}

/* PC */
@media (min-width: 768px) {
  .edit-delete-action {
    padding-bottom: 0;
  }
}

.common-content2 {
  margin-top: 10px;
  width: 100%;
  position: relative;
}

/* 編集画面共通 */

.common-container-header {
  position: relative;
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--color-border-muted);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
}

.common-container-header-title {
  white-space: nowrap;
  font-size: 1.2rem;
  color: var(--color-text-dark);
}

.common-container-header-button {
  display: block;
  position: relative;
  text-decoration-line: none;
  font-size: 1rem;
  text-align: center;
  border-radius: 50px;
  margin-left: 20px;
  margin-right: 20px;
}

/* PC */
@media (min-width: 768px) {
  .common-container-header .common-container-header-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 767px) {
  body:has(.common-mobile-headerless) header,
  body:has(.common-edit-page) header {
    display: none;
  }

  body:has(.common-mobile-headerless) main,
  body:has(.common-edit-page) main {
    padding-top: 0;
  }

  /* header 自体は display: none だが header + .toast-container の隣接セレクタは
     DOM 構造にのみ依存し表示状態を見ないため、main と同様にオフセットを打ち消す */
  body:has(.common-mobile-headerless) header + .toast-container,
  body:has(.common-edit-page) header + .toast-container {
    top: calc(var(--space-3) + env(safe-area-inset-top, 0px));
  }

  /* .common-slim-header はモバイルで画面タイトルヘッダーを細くする共通クラス。
     編集画面専用の .common-edit-header と見た目のルールを共有する */
  .common-edit-header,
  .common-slim-header {
    display: grid !important;
    /* 左右カラムは 64px 固定だとボタンが内容幅未満に縮み、テキスト周りの余白が潰れるため内容に応じて広がれるようにする */
    grid-template-columns: minmax(64px, auto) minmax(0, 1fr) minmax(64px, auto);
    gap: 6px;
    align-items: center;
    padding: calc(4px + env(safe-area-inset-top)) 10px 4px;
    box-shadow: none;
  }

  .common-edit-header-side {
    min-width: 0;
  }

  .common-edit-header-title-wrap {
    min-width: 0;
  }

  /* グリッドの各カラムが内容幅未満に縮めるようにする（編集画面の
     .common-edit-header-side / -title-wrap と同じ役割） */
  .common-slim-header > div {
    min-width: 0;
  }

  .common-edit-header .common-container-header-title,
  .common-slim-header .common-container-header-title {
    display: block;
    width: 100%;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .common-edit-header .common-container-header-button,
  .common-slim-header .common-container-header-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    margin: 0;
    padding: 0 8px;
  }

  .common-edit-header .common-close-btn,
  .common-slim-header .common-close-btn {
    padding: 0;
  }

  .common-edit-header .common-close-btn i,
  .common-slim-header .common-close-btn i {
    font-size: 1.1rem;
  }

  .common-edit-header .btn-primary.common-container-header-button,
  .common-slim-header .btn-primary.common-container-header-button {
    /* 共通ルールの min-width: 40px ではコンテンツ幅を下回りうるため、
       自動最小サイズを明示して padding の余白が潰れないようにする */
    min-width: auto;
    min-height: 0;
    border-radius: 9999px;
    padding: 4px 14px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
  }

  .common-edit-header .btn-primary.common-container-header-button label,
  .common-slim-header .btn-primary.common-container-header-button label {
    line-height: 1.5;
  }
}

.edit-common-main {
  padding: 20px;
}

.edit-common-notice-label {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: bold;
}

.card-container {
  position: relative;
  padding-bottom: 20px;
}

.card-content {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-bg-white);
  box-shadow: var(--shadow-card);
  transition: var(--transition-hover);
}

/* ルームカードはカード全体を1つのリンクにする（内側にリンクを入れ子にしない） */
.room-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* タッチ端末でのホバー固着を避けるためホバー可能なデバイスに限定 */
@media (hover: hover) {
  .card-thumb a:hover {
    opacity: var(--opacity-hover);
  }

  /* NFTカードのオーナーリンク（アバター＋名前）のみを対象にする。ルームカードは全体が
     .room-card-link 1本のリンクのため、単純な a:hover だと
     カードのどこにマウスを乗せてもオーナー表示がフェードしてしまう。 */
  .nft-card-user-block a:hover {
    opacity: var(--opacity-hover);
  }
}

.card-content:focus-visible,
.card-content:has(:focus-visible) {
  background: var(--color-bg-hover);
}

@media (prefers-reduced-motion: reduce) {
  .card-content {
    transition: none;
  }
}

.card-thumb {
  position: relative;
  overflow: hidden;
  border-top-left-radius: var(--radius-card);
  border-top-right-radius: var(--radius-card);
}

/* .card-thumb（.ratio）の直接の子として.ratio > *の絶対配置を受け、
   内側のimg/video/動画マークを重ねるための単一ラッパー */
.room-card-media {
  overflow: hidden;
}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.room-card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
  /* カードのタップ／クリックはリンクの遷移に委ねる（動画自身は操作対象にしない） */
  pointer-events: none;
}

.room-card-video.is-playing {
  opacity: 1;
}

/* 静止している動画カードのみ左上に表示する小さな動画マーク。
   is-playing付与時は隣接セレクタで非表示にする（再生状態はis-playingを唯一の情報源とする）。 */
.room-card-video-mark {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  font-size: 0.75rem;
  color: var(--color-bg-white);
  background: rgba(0, 0, 0, 0.55);
  border-radius: var(--radius-pill);
  /* 押下対象にしない（クリック／タップはカード全体のリンクに委ねる） */
  pointer-events: none;
}

.room-card-video.is-playing ~ .room-card-video-mark {
  display: none;
}

.card-title {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0.25rem;
  /* OpenSeaリンク時は.card-title-linkがinline-flexになり、空白を含まない長い
     作品名だとbreak-wordではmin-content幅が縮まず折り返せずカード枠を突き抜ける
     ため、min-content自体を縮小するanywhereで確実に折り返す */
  overflow-wrap: anywhere;
}

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

.card-desc {
  font-size: 0.9rem;
  color: var(--color-text-subtle);
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  word-wrap: break-word;
}

.card-desc-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-desc-toggle {
  font-size: 0.8rem;
  white-space: nowrap;
  text-decoration: none;
  color: var(--color-text-dark) !important;
  --btn-hover-color: var(--color-text-muted);
  --btn-hover-bg: transparent;
}

@media (hover: hover) {
  .card-desc-toggle:hover {
    opacity: var(--opacity-hover);
  }
}

/* NFTカードのオーナー名もアイコンと同じリンクに含めるため、見た目は変えない */
.nft-card-user-block a {
  color: inherit;
  text-decoration: none;
}

.card-user-avatar {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  object-fit: cover;
}

.card-user-text {
  flex: 1 1 auto;
  min-width: 0;
}

.card-user-label {
  font-size: 0.75rem;
  color: var(--color-text-faint);
  line-height: 1.1;
}

.card-user-name {
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.card-user-badge-empty {
  background: var(--color-bg-subtle);
  color: var(--color-text-faint);
  border: 1px solid var(--color-border);
  font-weight: 500;
  border-radius: 9999px;
  padding: 2px 8px;
  font-size: 0.75rem;
}

.card-footer {
  border-top: none;
  background: transparent;
  padding: 0.25rem 0.75rem;
}

.card-like-btn {
  background-color: var(--color-bg-white);
  width: 100%;
  font-size: 0.8rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  --btn-border-color: transparent;
  --btn-hover-bg: var(--color-bg-white);
  --btn-hover-border-color: transparent;
  --btn-active-bg: var(--color-bg-white);
  --btn-active-border-color: transparent;
}

@media (hover: hover) {
  .card-like-btn:hover {
    opacity: var(--opacity-hover);
  }
}

.card-like-btn:focus-visible {
  opacity: var(--opacity-hover);
}

.card-heart-icon {
  color: var(--color-text-faint);
}

.card-heart-liked {
  color: var(--color-heart-liked);
}

.card-footer-link {
  margin-top: auto;
}

.card-footer-actions {
  display: inline-flex;
  align-items: center;
}

/* イメージモーダル */
.image-modal {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 999;
}

.image-modal-content {
  text-align: center;
  background-color: var(--color-bg-white);
}

.crop-image {
  max-width: 85svw;
  max-height: 85svh;
}

/* メッセージモーダル */
.message-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 2100;
  justify-content: center;
  align-items: center;
}

.message-modal:not([hidden]) {
  display: flex;
}

.message-modal-content {
  background-color: var(--color-bg-white);
  padding: 24px;
  max-width: 480px;
  width: 90%;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(15, 15, 15, 0.12);
}

.message-modal-message {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.message-modal-icon {
  display: flex;
  color: var(--color-text-faint);
  font-size: 1.5rem;
  align-self: center;
  align-items: center;
  justify-content: center;
}

.message-modal-message-body {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0.5rem;
  overflow-wrap: anywhere;
}

.message-modal-guide-link {
  color: var(--color-text-muted);
  text-decoration: underline;
  text-decoration-color: rgba(108, 117, 125, 0.35);
}

.message-modal-guide-link:hover {
  color: var(--color-text-muted);
  text-decoration: underline;
  text-decoration-color: var(--color-text-muted);
}

.message-modal-footer {
  display: flex;
  justify-content: center;
  margin-top: 0.8rem;
}

.message-modal-footer button {
  min-width: 6rem;
}

.message-modal-cancel-btn {
  margin-right: 12px;
}

.feed-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-light);
  color: var(--color-text-primary);
  font-size: 0.8rem;
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

/* PC */
@media (min-width: 768px) {
  .feed-tab {
    font-size: 0.9rem;
  }
}

@media (hover: hover) {
  .feed-tab:hover {
    opacity: var(--opacity-hover);
    text-decoration: none;
  }
}

.feed-tab.is-active {
  background: var(--color-accent-btn);
  color: var(--color-bg-white);
}

.search-form {
  width: 100%;
}

.header-search {
  position: relative;
  /* ステータス絞り込みボタンと同じ行に収まるよう伸縮させる（固定100%幅だとボタンが
     必ず折り返され、折り返し後の左寄せボタンを起点にドロップダウンメニューを
     右寄せすると画面外へはみ出すため）。flex-basisは0%にし、内部input(width:100%)の
     コンテンツサイズをフレックスの基準サイズ計算に持ち込ませない */
  flex: 1 1 0%;
  min-width: 0;
  margin: 0;
}

/* PC。タブ列と検索フォームが同じ行に並ぶのは1200px以上（.col-xl-auto/.col-xl）のみのため、
   検索ボックスの右寄せ・固定幅化もこの境界に合わせる。1200px未満はタブ列と検索フォームが
   別行になり、検索フォームがコンテナ全幅を使うため、モバイルと同じ全幅の伸縮のままでよい */
@media (min-width: 1200px) {
  .header-search {
    flex: 0 1 420px;
    /* 検索ボックス（＋その右のステータス絞り込みボタン）を行内で右寄せする */
    margin-left: auto;
  }

  /* html が16px基準のため 0.88rem で従来サイズを維持する */
  .header-search input[type="text"],
  .header-search input[type="search"],
  .header-search input {
    font-size: 0.88rem;
  }
}

.header-search input[type="text"],
.header-search input[type="search"],
.header-search input {
  width: 100%;
  height: 36px;
  padding: 0 14px 0 34px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg-subtle);
  color: var(--color-text-dark);
  outline: none;
  box-shadow: none;
}

.header-search input[type="text"]:focus,
.header-search input[type="search"]:focus,
.header-search input:focus {
  border-color: var(--color-accent) !important;
  box-shadow: none !important;
  outline: none;
}

/* ギャラリーのルームステータス絞り込みトリガー。背景・枠は持たず、アイコン＋ラベルを
   常に表示する（PC/モバイルで出し分けない）。条件変更の有無によらず文字色は固定し
   （通常の文字色のまま）、選択中の表現はメニュー内のチップ側（gallery-status-chip）
   に一本化する。文字サイズはhtmlの基準フォントサイズ（14/15/16px）に関わらず検索ボックスと
   同じ操作群として一貫して見えることを優先し、remではなくpx直値でモバイル・タブレット・PC
   共通の値にする */
.gallery-status-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 6px 4px;
  border: none;
  background: transparent;
  color: var(--color-text-primary);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

/* アイコンのline-heightをフォントサイズに固定し、align-items: centerでのラベル
   文言との上下中央揃えが崩れないようにする。サイズも文字色同様PC/モバイルで出し分けない */
.gallery-status-toggle i {
  font-size: 17px;
  line-height: 1;
}

@media (hover: hover) {
  .gallery-status-toggle:hover {
    opacity: var(--opacity-hover);
  }
}

/* ステータス絞り込みメニュー。カテゴリ単位で拡張できる構造
   （将来、期間・鍵などのカテゴリが増える前提。現時点はステータスの1カテゴリのみ）。
   幅は最もラベルが長い言語（英語）の4チップが1行に収まる値で固定し、言語間で幅を
   揃える（width: max-contentだと言語ごとに幅が変わってしまうため）。
   モバイルはチップの余白が広く必要幅も広いので別値とし、狭い端末でははみ出さないよう
   92vwで頭打ちにする。
   .gallery-status-chipsのflex-wrap: wrap（既定）は維持しており、将来ラベルが伸びて
   この固定幅に収まらなくなった場合ははみ出さず折り返して劣化する */
.gallery-status-menu {
  width: 332px;
}

@media (max-width: 767px) {
  .gallery-status-menu {
    width: min(350px, 92vw);
  }
}

.gallery-status-category {
  padding: 0 1rem;
}

.gallery-status-category + .gallery-status-category {
  margin-top: 1rem;
}

.gallery-status-category-title {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.gallery-status-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* チップ間のgapのみ最小限詰める（padding・文字サイズ・タップ領域は変更しない）。
   375px幅で英語4選択肢が1行に収まるようにするための調整 */
@media (max-width: 767px) {
  .gallery-status-chips {
    gap: 0.35rem;
  }
}

/* ステータス選択肢のチップ。inputはDOM上に残しつつキーボードフォーカスを保つため
   display: noneにはせず視覚的にのみ隠す（フォーム送信・バリデーション・JSは変更しない） */
.gallery-status-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg-white);
  cursor: pointer;
}

.gallery-status-chip input {
  position: absolute;
  margin: 0;
  opacity: 0;
}

.gallery-status-chip-label {
  font-size: 0.85rem;
  color: var(--color-text-primary);
  white-space: nowrap;
}

/* PC・タブレット。モバイルはタップ領域を優先して現状のサイズを維持し、PC・タブレット
   のみ左右paddingとgapを詰める。文字サイズは変えない */
@media (min-width: 768px) {
  .gallery-status-chips {
    gap: 0.3rem;
  }

  .gallery-status-chip {
    padding: 6px 8px;
  }
}

/* 選択状態は:has()で表現する（room-edit-segmented-optionと同方針）。複数選択時に
   塗りつぶしが並ぶと絞り込み部分の主張が強くなるため、選択中はゴールドの枠線＋
   文字＋ごく薄い背景で表現し、全体の見た目を静かにする。選択・未選択の色表現は
   PC/モバイルで統一する（サイズ・余白のみ上記メディアクエリで出し分ける）。
   文字色はpale-soft背景とのコントラストを確保するため--color-accentより濃い
   --color-accent-mutedを使う（枠線は3:1基準でよいため--color-accentのまま） */
.gallery-status-chip:has(input:checked) {
  background: var(--color-accent-pale-soft);
  border-color: var(--color-accent);
}

.gallery-status-chip:has(input:checked) .gallery-status-chip-label {
  color: var(--color-accent-muted);
}

/* :has() 未対応ブラウザ向けフォールバック。選択状態が文字色の変化だけでも判別できるようにする */
@supports not selector(:has(a)) {
  .gallery-status-chip input:checked ~ .gallery-status-chip-label {
    color: var(--color-accent-muted);
    font-weight: 600;
  }
}

/* PCはgapを詰めているため、outline-offsetが大きいと隣接チップとリングが接触する。
   offset:1pxに詰めて隣接チップとの間隔を確保する */
.gallery-status-chip:has(input:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

@supports not selector(:has(a)) {
  .gallery-status-chip:focus-within {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
  }
}

@media (hover: hover) {
  .gallery-status-chip:not(:has(input:checked)):hover {
    opacity: var(--opacity-hover);
  }
}

.gallery-status-menu-footer {
  padding: 0.25rem 1rem 0;
}

.header-search-icon {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1;
  pointer-events: none;
}

.common-info-main-action {
  border: 1px solid var(--color-text-dark);
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-text-dark);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1;
  padding: 9px 14px;
  --btn-hover-bg: rgba(255, 255, 255, 0.95);
  --btn-hover-border-color: var(--color-text-dark);
  --btn-hover-color: var(--color-text-dark);
  --btn-active-bg: rgba(255, 255, 255, 0.95);
  --btn-active-border-color: var(--color-text-dark);
  --btn-active-color: var(--color-text-dark);
}

.common-info-sub-action {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--color-border-medium);
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-text-dark);
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 0;
  --btn-hover-bg: rgba(255, 255, 255, 0.95);
  --btn-hover-border-color: var(--color-border-medium);
  --btn-hover-color: var(--color-text-dark);
  --btn-active-bg: rgba(255, 255, 255, 0.95);
  --btn-active-border-color: var(--color-border-medium);
  --btn-active-color: var(--color-text-dark);
}

/* PC */
@media (min-width: 768px) {
  .common-info-sub-action {
    width: 36px;
    height: 36px;
  }
}

@media (hover: hover) {
  .common-info-main-action:hover,
  .common-info-sub-action:hover {
    opacity: var(--opacity-hover);
  }
}

/* ボタンの見た目の高さ（30〜34px）は維持し、タップ判定のみを 44px
   （WCAG 2.5.8 の最小ターゲットサイズ）へ広げる。
   .common-info-main-action はピル型で padding・アイコン・テキストにより実測幅が
   常に 44px を上回るため、::after は left/right: 0（自身の幅いっぱい）で足りる。
   .common-info-sub-action は円形アイコンボタン（モバイル30px/PC36px）で幅が
   44px に満たないため、::after 自体を 44×44px にして中央配置する。
   隣接ボタン同士は .room-header-actions の gap（var(--space-3) = 16px）により、
   拡張後の 44px 判定同士が重ならないだけの間隔を確保している */
.common-info-main-action,
.common-info-sub-action {
  position: relative;
}

.common-info-main-action::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

.common-info-sub-action::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.common-delete-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: var(--color-bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

@media (hover: hover) {
  .common-delete-icon:hover {
    opacity: var(--opacity-hover);
  }
}

.common-delete-icon i {
  font-size: 14px;
}

/* PWA インストールバナー */
.pwa-banner {
  display: none;
  position: fixed;
  /* モバイル幅では.mobile-footer-nav（高さ--mobile-footer-height）の直上に重ならず接するよう
     配置する。48pxのリテラル値だとフッターの高さ（52px）に対し4px不足し重なっていたため、
     同じCSS変数を参照する */
  bottom: var(--mobile-footer-height);
  left: 0;
  right: 0;
  z-index: 2000;
  background: var(--color-bg-white);
  color: var(--color-text-primary);
  border-top: 1px solid var(--color-border);
  padding: var(--pwa-banner-padding-block) var(--pwa-banner-padding-inline);
  align-items: center;
  justify-content: space-between;
  gap: var(--pwa-banner-content-gap);
  font-family: var(--font-family-base);
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.08);
}

/* iPadはモバイル判定（isMobile）に含まれるため、768px以上でもモバイル用バナーが出うる。
   フッターナビ消滅後の全幅ベタ張り（bottom: 0、max-widthなし）のままだとタブレットで
   モバイルUIをそのまま広げた見た目になり、ホームインジケーターの下に隠れてしまうため、
   カード状に制約する。
   max-width: 600pxは、.pwa-banner-messageが1行に収まる最小幅を実測して決めた値。
   英語版のiOS向け案内文（'Tap "Add to Home Screen" from the share button for quick access
   anytime.'）が日本語訳より長く、768px・1440pxいずれの幅でもインストールボタンを含む
   Android向け文言と合わせて2行になるまで本文領域を必要とするため、これを基準に選定した
   （日本語文言はより狭い幅でも1行に収まる）。768px幅（タブレット縦）でも左右に十分な余白が
   残り、カードの見た目のままモバイルUIの引き伸ばしにはならない */
@media (min-width: 768px) {
  .pwa-banner {
    left: var(--space-3);
    right: var(--space-3);
    bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    max-width: 600px;
    margin-inline: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    /* 基本ルールのbox-shadowは画面下端に張り付くバー用の上向き影のため、カード化した
       ここでは浮いた要素向けのトークン（.salon-fabと同じ--shadow-cta）へ差し替える。
       そのままだとカードの上側だけ影が付き下側は接地して見えてしまう */
    box-shadow: var(--shadow-cta);
  }
}

.pwa-banner.is-visible {
  display: flex;
}

.pwa-banner-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.pwa-banner-icon {
  border-radius: 9px;
  flex-shrink: 0;
}

.pwa-banner-text {
  min-width: 0;
}

.pwa-banner-app-name {
  font-weight: 600;
  font-size: 0.9rem;
}

.pwa-banner-message {
  color: var(--color-text-muted);
  font-size: 0.8rem;
  white-space: normal;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pwa-banner-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.pwa-install-btn {
  display: none;
  position: relative;
  background: var(--color-accent);
  color: var(--color-bg-white);
  border: none;
  border-radius: 6px;
  padding: 7px 16px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}

.pwa-install-btn.is-visible {
  display: inline-block;
}

/* アイコンフォント（Font Awesome）が読み込めない環境では中の<i>のグリフ幅が0になり、
   ボーダーボックスの寸法をアイコンの字形に頼っているとボタンごと0pxへ潰れる。
   .pwa-bannerは全ページに固定表示され、この閉じるボタン以外に消す手段が無いため、
   アイコンの読み込み可否に関わらずボタン自体に明示的な幅・高さを持たせる。
   34pxは.pwa-install-btn（padding: 7px 16px + line-height基準の可変高さ）の実測高さ
   （375px幅で約33px・768px幅で約34px・1440px幅で約36px）に合わせた値で、
   隣接するインストールボタンとの見た目の釣り合いを取っている。中央寄せはinline-flexで
   行うため、左右のpaddingは付与しない */
.pwa-dismiss-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
}

/* ボタンの見た目の高さは維持し、タップ判定のみを44px（WCAG 2.5.8の最小ターゲットサイズ）へ
   広げる。settings.cssの.settings-wallet-btn等と同じ考え方（common-info-main-action /
   common-info-sub-actionのコメントも参照）。.pwa-install-btnはテキストラベル付きの帯状
   ボタンで実測幅が44pxを上回るため、::afterは left/right: 0（自身の幅いっぱい）で足りる。
   .pwa-dismiss-btnはアイコン単体ボタンで幅が44pxに満たないため、::after自体を44×44pxに
   して中央配置する */
.pwa-install-btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

.pwa-dismiss-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

@media (hover: hover) {
  .pwa-install-btn:hover,
  .pwa-dismiss-btn:hover {
    opacity: var(--opacity-hover);
  }
}

/* 履歴表示モーダル（入退室履歴・ライブ履歴で共用） */
.history-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 2100;
  justify-content: center;
  align-items: center;
}

.history-modal:not([hidden]) {
  display: flex;
}

.history-modal-content {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-white);
  padding: 24px;
  max-width: 480px;
  width: 90%;
  max-height: 70vh;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(15, 15, 15, 0.12);
}

.history-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.history-modal-title {
  font-size: 1rem;
  font-weight: 600;
}

.history-modal-close-btn {
  padding: 0;
  font-size: 1.1rem;
  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) {
  .history-modal-close-btn:hover {
    opacity: var(--opacity-hover);
  }
}

.history-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* 画像拡大表示モーダル（チャット添付画像・サロン投稿画像で共用） */
.image-viewer-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 2050;
  justify-content: center;
  align-items: center;
}

.image-viewer-modal:not([hidden]) {
  display: flex;
}

.image-viewer-content {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.image-viewer-image {
  max-width: 92vw;
  max-height: 88svh;
  object-fit: contain;
}

.image-viewer-close-btn,
.image-viewer-nav-btn {
  position: absolute;
  padding: 0;
  color: var(--color-bg-white);
  font-size: 1.5rem;
  --btn-hover-bg: transparent;
  --btn-hover-border-color: transparent;
  --btn-hover-color: var(--color-bg-white);
  --btn-active-bg: transparent;
  --btn-active-border-color: transparent;
  --btn-active-color: var(--color-bg-white);
}

.image-viewer-close-btn {
  top: var(--space-3);
  right: var(--space-3);
}

.image-viewer-prev-btn {
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
}

.image-viewer-next-btn {
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
}

@media (hover: hover) {
  .image-viewer-close-btn:hover,
  .image-viewer-nav-btn:hover {
    opacity: var(--opacity-hover);
  }
}

.image-viewer-counter {
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-bg-white);
  font-size: var(--font-size-nav);
}

/* Twemoji変換後の絵文字画像（テキストと同じサイズ・行位置で表示する） */
img.emoji {
  width: 1em;
  height: 1em;
  margin: 0 0.05em 0 0.1em;
  vertical-align: -0.1em;
}