/* =============================================================
 * MORIOKA PORTAL+ — X風 UI v3 (Phase A-1)
 *
 * デザイン思想: 既存ネオンダーク世界観を維持。
 * v2 からの追加:
 *   - 画像/動画ライトボックス(X風 全画面表示)
 *   - サイドバー、カード、ナビの余白を全体的に縮小
 *   - スマホでの不自然な改行・余白を修正
 *   - 投稿カード padding 縮小
 *   - ユーティリティクラス追加(flex-row, gap-N, mt-N など)
 *
 * v: 2026-05-01-x-style-v3
 * ============================================================= */

/* ============================================================
 * 0. デザイントークン
 * ============================================================ */
:root {
  --accent-blue: #1DA1F2;

  /* === ベース === */
  --bg-primary:  #070916;
  --bg-secondary:#0d1330;
  --bg-tertiary: #0b1028;
  --bg-overlay:  rgba(13, 19, 48, 0.95);
  --bg-hover:    rgba(255, 255, 255, 0.04);
  --bg-card:     rgba(13, 19, 48, 0.55);
  --bg-card-hover: rgba(255, 255, 255, 0.025);

  /* === テキスト === */
  --text-primary:   #e7ecff;
  --text-secondary: #9aa6d6;
  --text-muted:     #6b7aa1;
  --text-accent:    #ffffff;

  /* === アクセント === */
  --accent-purple: #7c4dff;
  --accent-cyan:   #00e5ff;
  --accent-green:  #00ff9d;
  --accent-pink:   #ff4d6d;
  --accent-gold:   #ffd700;

  /* === X 風アクション色 === */
  --action-reply:    var(--accent-cyan);
  --action-repost:   var(--accent-green);
  --action-like:     var(--accent-pink);
  --action-share:    var(--accent-purple);
  --action-bookmark: var(--accent-gold);
  --action-default:  var(--text-muted);

  --action-reply-bg:    rgba(0, 229, 255, 0.10);
  --action-repost-bg:   rgba(0, 255, 157, 0.10);
  --action-like-bg:     rgba(255, 77, 109, 0.10);
  --action-share-bg:    rgba(124, 77, 255, 0.10);
  --action-bookmark-bg: rgba(255, 215, 0, 0.10);

  /* === グラデーション === */
  --gradient-primary:   linear-gradient(135deg, rgba(124, 77, 255, 0.95), rgba(0, 229, 255, 0.85));
  --gradient-secondary: linear-gradient(135deg, rgba(0, 229, 255, 0.20), rgba(124, 77, 255, 0.15));
  --gradient-tertiary:  linear-gradient(180deg, rgba(13, 19, 48, 0.85), rgba(11, 16, 40, 0.75));
  --gradient-danger:    linear-gradient(135deg, rgba(255, 77, 109, 0.90), rgba(255, 77, 109, 0.70));
  --gradient-success:   linear-gradient(135deg, rgba(0, 255, 157, 0.90), rgba(0, 255, 157, 0.70));

  /* === ボーダー === */
  --border-primary:   rgba(255, 255, 255, 0.10);
  --border-secondary: rgba(255, 255, 255, 0.06);
  --border-glow:      rgba(0, 229, 255, 0.35);

  /* === シャドウ === */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35);
  --shadow-glow:        0 0 30px rgba(0, 229, 255, 0.20);
  --shadow-glow-purple: 0 0 30px rgba(124, 77, 255, 0.20);

  /* === スペーシング === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  /* 旧名互換 */
  --spacing-xs: var(--space-1);
  --spacing-sm: var(--space-2);
  --spacing-md: var(--space-4);
  --spacing-lg: var(--space-6);
  --spacing-xl: var(--space-8);

  /* === ラジウス === */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* === トランジション === */
  --transition-fast:   0.15s ease-out;
  --transition-normal: 0.20s ease-out;
  --transition-slow:   0.40s ease-out;

  /* === レイアウト === */
  --sidebar-width: 260px;
  --sidebar-width-narrow: 72px;
  --aside-width: 340px;
  --tl-max-width: 620px;
  --header-mobile-height: 52px;
  --bottom-nav-height: 56px;
}

/* ============================================================
 * 1. リセット & ベース
 * ============================================================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Noto Sans JP", "Helvetica Neue", sans-serif;
  background:
    radial-gradient(ellipse 1400px 700px at 10% -10%, rgba(124, 77, 255, 0.4), transparent 65%),
    radial-gradient(ellipse 1000px 600px at 90% 0%,   rgba(0, 229, 255, 0.3), transparent 65%),
    radial-gradient(ellipse 1000px 700px at 70% 110%, rgba(0, 255, 157, 0.2), transparent 60%),
    var(--bg-primary);
  /* background-attachment: fixed; ← Safari チラつき対策で削除 */
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.5;
  /* overflow-x: hidden だと body がスクロールコンテナ化して
     descendants の position: sticky がビューポート基準で動かなくなる。
     clip はスクロールコンテナにならない overflow なので sticky が生きる */
  overflow-x: clip;
}

/* スクロールバー */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* ============================================================
 * 2. アニメーション
 * ============================================================ */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
@keyframes likePop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.4); }
  60%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes shimmer {
  0%   { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

/* ============================================================
 * 3. レイアウト・グリッド
 *    PC: 3カラム / タブレット: 2カラム / スマホ: 1カラム
 * ============================================================ */

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--space-4);
  animation: fadeIn 0.4s ease-out;
}

/* === 3カラムレイアウト === */
.layout-3col {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, var(--tl-max-width)) var(--aside-width);
  gap: 0;
  max-width: calc(var(--sidebar-width) + var(--tl-max-width) + var(--aside-width));
  margin: 0 auto;
  min-height: 100vh;
}

.col-nav {
  position: sticky;
  top: 0;
  /* iOS Safari でツールバー表示時、100vh は実視認領域より大きく、
     底部のアカウントカードがツールバーに隠れる。dvh で実視認領域に追従。 */
  height: 100dvh;
  border-right: 1px solid var(--border-primary);
  display: flex;
  flex-direction: column;
  /* overflow: visible にしないと .sidebar-account-popover が clip される。
     overflow-y: auto は overflow-x も auto 化するため、縮小モードで
     右側にはみ出すポップオーバーが完全に消える。 */
  overflow: visible;
  /* col-main がドキュメント上で後に来るため z-index が無いと
     ポップオーバーが col-main の下に潜る。明示的に持ち上げる。 */
  z-index: 50;
}

.col-main {
  border-right: 1px solid var(--border-primary);
  min-width: 0;
  position: relative;
  /* スクロールはページ全体で取る(col-mainではない) */
}

.col-aside {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow-y: auto;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
}

/* === main_content (旧 layout 互換) === */
.main-content {
  margin-left: var(--sidebar-width);
}

/* === レスポンシブ ブレイクポイント === */
/* 大画面 (>=1280px): 3カラム表示そのまま */

/* 中画面 (1024-1279px): 右カラム維持、左ナビをアイコンのみ */
@media (max-width: 1279px) {
  .layout-3col {
    grid-template-columns: var(--sidebar-width-narrow) minmax(0, var(--tl-max-width)) var(--aside-width);
    max-width: calc(var(--sidebar-width-narrow) + var(--tl-max-width) + var(--aside-width));
  }
  .nav-item .label,
  .logo-section .logo-text {
    display: none;
  }
  .nav-item {
    justify-content: center;
    padding: 12px;
  }
  .sidebar-actions .btn {
    padding: 10px;
    font-size: 0;
  }
  .sidebar-actions .btn::before {
    content: '+';
    font-size: 1.5rem;
    font-weight: 800;
  }
  .main-content {
    margin-left: var(--sidebar-width-narrow);
  }
}

/* タブレット (768-1023px): 右カラム消す、左ナビアイコンのみ */
@media (max-width: 1023px) {
  .layout-3col {
    grid-template-columns: var(--sidebar-width-narrow) minmax(0, 1fr);
    max-width: calc(var(--sidebar-width-narrow) + var(--tl-max-width));
  }
  .col-aside {
    display: none;
  }
}

/* スマホ (≤767px): 1カラム + ボトムナビ + モバイルヘッダー */
@media (max-width: 767px) {
  .layout-3col {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
  .col-nav {
    display: none;
  }
  .col-main {
    border-right: none;
    margin-top: var(--header-mobile-height);
    /* bottom-nav の height 計算式 (= --bottom-nav-height + safe-area-inset-bottom)
       と合わせる。これが揃わないと最後の投稿が bottom-nav の下に隠れる。 */
    margin-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
  }
  .main-content {
    margin-left: 0;
    margin-top: var(--header-mobile-height);
    margin-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
  }
}

/* === グリッド (legacy) === */
.grid {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .grid { grid-template-columns: 1fr; }
}

/* ============================================================
 * 4. 左サイドナビゲーション(PC・タブレット)
 *    col-nav の中に置かれた sidebar-nav は grid セルなので
 *    position: fixed ではなく sticky で扱う。
 * ============================================================ */
/* col-nav 自体に sidebar-nav クラスが付くケース: sticky を維持 */
.col-nav.sidebar-nav {
  position: sticky;
  top: 0;
  width: auto;
  /* iOS Safari ツールバー出入りに追従させるため dvh を使う */
  height: 100dvh;
  padding: var(--space-2) var(--space-2) var(--space-3);
  /* 背景は透過。右の col-aside と揃えて body のグラデーションを透過表示 */
  background: transparent;
  display: flex;
  flex-direction: column;
  /* overflow-y: auto は overflow-x も auto 化し popover が clip される */
  overflow: visible;
  border-right: none;  /* col-nav 自体が border-right を持つので二重防止 */
  z-index: 50;  /* col-main より前に重ねて popover が潜らないように */
}
/* col-nav の子として sidebar-nav がある(旧構造): 内側要素なので static */
.col-nav .sidebar-nav {
  position: static;
  width: auto;
  height: 100vh;
  padding: var(--space-2) var(--space-2) var(--space-3);
  background: transparent;
  display: flex;
  flex-direction: column;
  overflow: visible;
  border-right: none;
}

/* 旧構造(.sidebar-nav 単体で fixed 配置されていた)に対する互換 */
.sidebar-nav:not(.col-nav):not(.col-nav .sidebar-nav) {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  padding: var(--space-2) var(--space-2) var(--space-3);
  border-right: 1px solid var(--border-primary);
  background: rgba(7, 9, 22, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  z-index: 100;
  overflow-y: auto;
}

@media (max-width: 1279px) {
  .col-nav.sidebar-nav,
  .col-nav .sidebar-nav,
  .sidebar-nav {
    padding: var(--space-2) var(--space-1) var(--space-3);
    align-items: center;
  }
  .sidebar-nav:not(.col-nav):not(.col-nav .sidebar-nav) {
    width: var(--sidebar-width-narrow);
  }
}

@media (max-width: 767px) {
  .col-nav.sidebar-nav,
  .col-nav .sidebar-nav,
  .sidebar-nav { display: none; }
}

.logo-section {
  margin-bottom: var(--space-2);
  padding: var(--space-2) var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.logo-section a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
  transition: filter var(--transition-fast);
}
.logo-section a:hover {
  filter: brightness(1.2) drop-shadow(0 0 12px rgba(0, 229, 255, 0.40));
}
.logo-section img {
  height: 36px;
  width: auto;
  border-radius: var(--radius-sm);
  filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.30));
}
.logo-section .logo-text {
  font-weight: 900;
  font-size: 1.05rem;
  background: linear-gradient(135deg, var(--text-accent), var(--accent-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
@media (max-width: 1279px) {
  .logo-section { padding: var(--space-2); justify-content: center; }
  .logo-section img { height: 32px; }
}

.nav-menu {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}

.sidebar-actions {
  margin-top: auto;
  padding-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-top: 1px solid var(--border-primary);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 14px;
  border-radius: var(--radius-full);
  color: var(--text-primary);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  transition: background var(--transition-fast);
  position: relative;
  white-space: nowrap;
}
.nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.nav-item.active {
  font-weight: 800;
}
.nav-item .icon {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  position: relative;
  flex-shrink: 0;
}
.nav-item .label {
  flex: 1;
}

.notification-badge {
  position: absolute;
  top: -4px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--accent-pink);
  color: white;
  font-size: 0.7rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 0 10px rgba(255, 77, 109, 0.50);
}

/* === 投稿ボタン(大、X風) === */
.btn-post-new {
  width: 100%;
  background: var(--gradient-primary);
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: var(--radius-full);
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.20);
}
.btn-post-new:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
  box-shadow: 0 0 30px rgba(0, 229, 255, 0.35), 0 4px 16px rgba(124, 77, 255, 0.25);
}
@media (max-width: 1279px) {
  .btn-post-new {
    padding: 12px;
    font-size: 0;
  }
  .btn-post-new::before {
    content: '+';
    font-size: 1.5rem;
    font-weight: 800;
  }
}

/* ============================================================
 * 5. メインカラム(タイムライン)
 * ============================================================ */
.col-main-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 9, 22, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-primary);
  padding: var(--space-4);
  transition: transform var(--transition-normal);
}
/* sticky 要素を display:none すると flow 縮 → scroll 補正 → 逆方向検知の
   フィードバックループでホーム中盤のスクロールがガクガクする。flow を動かさず
   transform で隠す。iOS の sticky+transform バグ対策で opacity と
   pointer-events も併用。 */
.col-main-header.hidden {
  /* !important は body.theme-* 等の specificity 0-2-1 オーバーライドからの保険。 */
  transform: translateY(-200%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.col-main-header h1 {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0;
}

/* ============================================================
 * 6. モバイルヘッダー & ボトムナビ
 * ============================================================ */

.mobile-header {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-mobile-height);
  background: rgba(7, 9, 22, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-primary);
  z-index: 100;
  transition: transform var(--transition-normal);
}
.mobile-header.hidden { display: none !important; }

@media (max-width: 767px) {
  .mobile-header { display: block; }
}

.mobile-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 var(--space-4);
}
.account-icon { cursor: pointer; }
.account-icon img,
.account-icon-placeholder {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-primary);
  color: white;
  font-weight: 800;
  font-size: 16px;
  object-fit: cover;
}
.mobile-logo { flex: 1; text-align: center; }
.mobile-logo img,
.mobile-logo a img {
  height: 32px;
  width: auto;
  border-radius: var(--radius-sm);
  vertical-align: middle;
}
.post-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: white;
  font-size: 1.5rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.30);
  transition: transform var(--transition-fast);
}
.post-button:hover { transform: scale(1.05); }

/* === ボトムナビ ===
   iOS Safari で「スクロール中に画面中央に出てきてしまう」事象対策 (2026-06-03 再発):
   - スクロール方向 hide/show を完全撤廃 (= 常に表示)。x-style.js 側も合わせて停止。
   - transition: transform / will-change / translateZ を削除し、コンポジタ層の
     中間状態固定 (URL バー伸縮タイミングで mid-screen に張り付く) を根絶。
   - padding-bottom: env(safe-area-inset-bottom) で home indicator と被らない。
   - z-index 1000 (lightbox 等 9000 系より下、他コンテンツより必ず上)。
*/
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(7, 9, 22, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border-primary);
  z-index: 1000;
}
/* 旧 .hidden トグルが残っても中央に浮かない安全弁 (transform は使わず display で完全消去) */
.bottom-nav.hidden { display: none !important; }

@media (max-width: 767px) {
  .bottom-nav { display: block; }
}

.bottom-nav .nav-menu {
  flex-direction: row;
  justify-content: space-around;
  height: 100%;
  align-items: center;
  gap: 0;
  padding: 0;
}
.bottom-nav .nav-item {
  flex-direction: column;
  gap: 2px;
  padding: 4px 8px;
  font-size: 0.65rem;
  border-radius: var(--radius-sm);
  flex: 1;
  text-align: center;
  min-height: 48px;
  justify-content: center;
}
.bottom-nav .nav-item.active {
  color: var(--accent-cyan);
}
.bottom-nav .nav-item.active .icon {
  color: var(--accent-cyan);
}
.bottom-nav .nav-item .icon {
  font-size: 1.4rem;
  width: 28px;
  height: 28px;
}
.bottom-nav .nav-item .label {
  font-size: 0.65rem;
  display: block;
}

/* === サイドドロワー(モバイル) === */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.50);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}
.drawer-overlay.open {
  opacity: 1;
  visibility: visible;
}
.side-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 80%;
  max-width: 320px;
  height: 100vh;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-primary);
  z-index: 201;
  transform: translateX(-100%);
  transition: transform var(--transition-normal);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.side-drawer.open { transform: translateX(0); }
.drawer-header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-primary);
}
.drawer-user-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.drawer-user-info .avatar {
  margin-bottom: var(--space-2);
}
.drawer-user-info .name {
  font-weight: 800;
  font-size: 1rem;
}
.drawer-user-info .handle {
  color: var(--text-muted);
  font-size: 0.9rem;
}
.drawer-menu {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--space-2);
  flex: 1;
}
.drawer-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 14px;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  transition: background var(--transition-fast);
}
.drawer-menu-item:hover { background: rgba(255, 255, 255, 0.06); }
.drawer-menu-item .icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  position: relative;
}
.drawer-footer {
  padding: var(--space-3);
  border-top: 1px solid var(--border-primary);
}

/* ============================================================
 * 7. 右サイドバー(トレンド・おすすめ)
 * ============================================================ */
.aside-card {
  background: rgba(13, 19, 48, 0.55);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.aside-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: var(--space-2);
  color: var(--text-primary);
}
.aside-search {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: var(--space-2) 0 var(--space-3);
  background: var(--bg-primary);
}
.aside-search input {
  width: 100%;
  padding: 10px 16px 10px 40px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.9rem;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%236b7aa1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>');
  background-repeat: no-repeat;
  background-position: 14px center;
  transition: all var(--transition-fast);
}
.aside-search input:focus {
  outline: none;
  border-color: var(--accent-cyan);
  background-color: var(--bg-primary);
}
.trend-item, .suggestion-item {
  padding: var(--space-2) 0;
  cursor: pointer;
  transition: background var(--transition-fast);
  border-radius: var(--radius-sm);
  display: block;
  text-decoration: none;
  color: inherit;
}
.trend-item:hover, .suggestion-item:hover {
  background: rgba(255, 255, 255, 0.04);
}
.trend-category {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.trend-tag {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}
.trend-count {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.suggestion-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
}
.suggestion-info {
  flex: 1;
  min-width: 0;
}
.suggestion-name {
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suggestion-handle {
  color: var(--text-muted);
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn-follow-mini {
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--text-primary);
  color: var(--bg-primary);
  font-size: 0.825rem;
  font-weight: 800;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}
.btn-follow-mini:hover { opacity: 0.85; }

/* ============================================================
 * 8. ヘッダー(login/register/post等の単独ページ用)
 * ============================================================ */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--border-primary);
  background: var(--gradient-tertiary);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  position: sticky;
  top: var(--space-4);
  z-index: 100;
  transition: all var(--transition-normal);
}
.header:hover { border-color: var(--border-glow); }

.logo {
  font-weight: 900;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: linear-gradient(135deg, var(--text-accent), var(--accent-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.logo a {
  text-decoration: none;
  color: inherit;
  background: inherit;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: filter var(--transition-fast);
}
.logo a:hover {
  filter: brightness(1.2) drop-shadow(0 0 10px rgba(0, 229, 255, 0.5));
}

.nav {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ============================================================
 * 9. ボタン階層
 * ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 20px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-primary);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  font-size: 0.9375rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  min-height: 36px;
}
.btn:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--border-glow);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0); }
.btn:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 2px;
}

.btn.primary {
  border: none;
  background: var(--gradient-primary);
  color: white;
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.20);
}
.btn.primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 30px rgba(0, 229, 255, 0.35), 0 4px 16px rgba(124, 77, 255, 0.25);
}

.btn.danger {
  border-color: rgba(255, 77, 109, 0.4);
  color: #ffd7df;
  background: rgba(255, 77, 109, 0.08);
}
.btn.danger:hover {
  background: rgba(255, 77, 109, 0.18);
  border-color: var(--accent-pink);
  color: white;
  box-shadow: 0 0 20px rgba(255, 77, 109, 0.20);
}

.btn-sm    { padding: 6px 14px;  font-size: 0.9rem;  min-height: 30px; }
.btn-lg    { padding: 14px 28px; font-size: 1rem;     min-height: 48px; }
.btn-block { width: 100%; text-align: center; }

button { font-family: inherit; outline: none; }

.btn-primary {
  background: var(--gradient-primary);
  color: white;
  padding: 10px 20px;
  border-radius: var(--radius-full);
  border: none;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: all var(--transition-fast);
}
.btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }

.btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  padding: 10px 20px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-primary);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: all var(--transition-fast);
}
.btn-secondary:hover { background: rgba(255, 255, 255, 0.10); border-color: var(--border-glow); }

/* ============================================================
 * 10. カード
 * ============================================================ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
  transition: border-color var(--transition-normal);
  margin-bottom: var(--space-3);
}
.card:hover {
  border-color: var(--border-secondary);
}
.card h2 {
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: var(--space-2);
  color: var(--text-primary);
}

@media (max-width: 767px) {
  .card { padding: var(--space-3); border-radius: 0; border-left: none; border-right: none; margin-bottom: 0; }
}

.hr {
  height: 1px;
  background: var(--border-primary);
  margin: var(--space-3) 0;
  border: none;
}

.muted { color: var(--text-muted); }
.muted.small { font-size: 0.9rem; }
.small { font-size: 0.9rem; }

.footer {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: var(--space-4);
  padding: var(--space-3);
}

.spacer-sm { height: var(--space-2); }
.spacer-md { height: var(--space-3); }
.spacer-lg { height: var(--space-4); }

/* ============================================================
 * 11. 投稿(タイムライン)
 *    X 風の3列レイアウト + ホバー効果
 * ============================================================ */
.post {
  padding: var(--space-3) var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--border-primary);
  transition: background var(--transition-fast);
  position: relative;
  cursor: pointer;
}
.post:last-child { border-bottom: none; }
.post:hover {
  background: var(--bg-card-hover);
}

/* === 投稿ヘッダー === */
.posthead,
.post .posthead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.post-author {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex: 1;
  min-width: 0;
}
.author-link {
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
  display: inline-block;
}
.author-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.author-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}
.author-name:hover { text-decoration: underline; }
.author-handle {
  font-size: 0.9rem;
  color: var(--text-muted);
  white-space: nowrap;
  line-height: 1.3;
}
.post-meta-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.time-toggle {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  font: inherit;
  white-space: nowrap;
  font-size: 0.9rem;
}
.time-toggle:hover { color: var(--accent-cyan); }
.detailed-time {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: var(--space-2);
}
.reply-to-line {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

/* === ケバブメニュー === */
.kebab-wrapper { position: relative; display: inline-block; }
.kebab-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}
.kebab-btn:hover {
  background: var(--action-reply-bg);
  color: var(--accent-cyan);
}
.kebab-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 180px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--space-1) 0;
  z-index: 9999;
  box-shadow: var(--shadow-lg);
  animation: fadeIn 0.15s ease-out;
}
.kebab-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 16px;
  color: var(--text-primary);
  font-size: 0.9rem;
  text-decoration: none;
  font-family: inherit;
  transition: background var(--transition-fast);
}
.kebab-item:hover { background: rgba(255, 255, 255, 0.06); }
.kebab-danger { color: var(--accent-pink); }
.kebab-danger:hover { background: var(--action-like-bg); }
.kebab-divider {
  height: 1px;
  background: var(--border-primary);
  margin: var(--space-1) 0;
}
.inline-form { margin: 0; }

/* === 投稿本文 === */
.post-body {
  /* 旧: cursor: pointer (投稿全体クリックで詳細へ) — テキスト選択ができない印象を与え、
     かつ実際に triple-click / 長押し選択でも誤って遷移する事故があった。
     cursor: text にして「ここは選択できる」を明示。click 遷移は JS 側で
     getSelection()/drag 距離/長押し判定でスキップする (x-style.js setupPostClick)。 */
  cursor: text;
  -webkit-user-select: text;
  user-select: text;
  word-wrap: break-word;
  overflow-wrap: break-word;
  /* 改行は生の \n を pre-wrap で 1 段改行 (X と同じ挙動) */
  white-space: pre-wrap;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

/* X風: 長文の折りたたみ(JSで .truncated を切り替え) */
.post-body.truncated {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.show-more-btn {
  background: none;
  border: none;
  color: var(--accent-cyan);
  cursor: pointer;
  padding: 4px 0;
  font-size: 0.875rem;
  font-family: inherit;
}
.show-more-btn:hover { text-decoration: underline; }

/* リンク・メンション・ハッシュタグ */
.linkified, .mention, .hashtag, .post-body a {
  color: var(--accent-cyan);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.linkified:hover, .mention:hover, .hashtag:hover, .post-body a:hover {
  text-decoration: underline;
}

/* === メディア === */
.post-media {
  margin-top: var(--space-3);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-primary);
}
.post-media img {
  display: block;
  max-width: 100%;
  height: auto;
}
.post-video {
  margin-top: var(--space-3);
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  background: #000;
  border: 1px solid var(--border-primary);
}
.post-video video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.30);
  transition: opacity 0.2s;
}
/* X 風: 再生中 (自動再生・手動 play どちらも) は ▶ オーバーレイを隠す。
   video の play / pause イベントで .post-video に is-playing が付け外しされる。 */
.post-video.is-playing .video-overlay { display: none; }
/* X 風サウンドトグル (左下の小ボタン)。動画クリック (= ライトボックス) と分離。 */
.video-sound-btn {
  /* X 風サウンドトグル: どんな映像の上でも確実に視認できるよう、
     濃いめの黒丸 + うっすら白枠 + 強めの影でコントラストを確保。
     アイコンは白固定で映像のトーンに依らず読める。 */
  position: absolute; bottom: 12px; left: 12px; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(0,0,0,0.78);
  border: 1px solid rgba(255,255,255,0.55);
  color: #fff !important;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1.05rem; line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background 0.15s, transform 0.12s;
}
.video-sound-btn:hover { background: rgba(0,0,0,0.92); transform: scale(1.05); }
.video-sound-btn:active { transform: scale(0.96); }
.video-sound-btn i { color: #fff; }
.video-sound-btn.is-on { background: rgba(29,155,240,0.92); border-color: rgba(255,255,255,0.7); }
.video-play-button {
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.30);
}
.video-play-icon {
  width: 0; height: 0;
  border-left: 18px solid #000;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  margin-left: 5px;
}

/* === OGP カード (X 風リンクプレビュー) ===
   X (Twitter) の実寸を計測した結果に合わせる:
   - カード幅: コンテナ最大 (列幅ぴったり)
   - 画像: aspect-ratio 1.91/1 (FB/X OGP 標準)
   - title: 15px、desc: 14px、host: 13px 程度
   - ボーダーは 16px radius (X の rounded-2xl) */
.ogp-card {
  display: block;
  margin-top: var(--space-3);
  border: 1px solid var(--border-primary);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--bg-card);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.ogp-card:hover {
  border-color: var(--border-glow);
  background: var(--bg-card-hover);
}
/* 画像 — X と同じ 1.91:1 */
.ogp-image {
  width: 100%;
  aspect-ratio: 1.91 / 1;
  object-fit: cover;
  display: block;
  background: var(--bg-secondary);
}
.ogp-body  { padding: 10px 12px; }
.ogp-title {
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--text-primary);
  font-size: 0.9375rem;   /* X 実測 15px */
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ogp-desc  {
  font-size: 0.875rem;     /* 14px */
  color: var(--text-secondary);
  line-height: 1.35;
  margin-bottom: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ogp-host  {
  font-size: 0.8125rem;    /* 13px */
  color: var(--text-muted);
  line-height: 1.3;
}

/* DM 内 OGP は吹き出しサイズに合わせて max-width のみ抑える
   (X DM の link card と同じ ~ 320px) */
.dm-ogp.ogp-card { margin-top: var(--space-2); max-width: 320px; }

/* 引用カード内の OGP (.quote-card は <a> なので入れ子防止で <div> 出力):
   引用カードと一体感を出すため余白を詰め、角丸を控えめに、bg を一段くすませる。 */
.quote-card .ogp-card {
  margin-top: var(--space-2);
  border-radius: 12px;
  background: var(--bg-secondary);
}
.quote-card .ogp-card .ogp-body { padding: 8px 10px; }
.quote-card .ogp-card .ogp-title { font-size: 0.875rem; }
.quote-card .ogp-card .ogp-desc { font-size: 0.8125rem; -webkit-line-clamp: 1; }

/* === 引用カード === */
.quote-card, .quote-preview {
  display: block;
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  background: rgba(13, 19, 48, 0.40);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-fast);
  /* 長い URL やハッシュタグが内部に入っても枠を突き破らないよう
     カード自体にも min-width: 0 + overflow 制御を入れる */
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.quote-card:hover { border-color: var(--border-glow); }
/* 凍結アカウントの引用元: X 同様、中身を隠して案内のみ表示 */
.quote-card.quote-frozen {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  color: var(--accent-cyan);
  font-weight: 700;
  font-size: 0.9375rem;
}
.quote-card.quote-frozen:hover { border-color: var(--border-glow); }
.quote-card.quote-frozen i { font-size: 1rem; opacity: 1; color: var(--accent-cyan); }
.quote-head {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  align-items: center;
}
.quote-meta { flex: 1; min-width: 0; }
.quote-author {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex-wrap: nowrap;
}
/* 引用元の表示名は X 同様 … で省略。バッジは常に表示、@ハンドルも縮む */
.quote-author .author-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 0 1 auto;
}
.quote-author .quote-handle {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quote-author .specialMark { flex: 0 0 auto; }
.quote-time {
  white-space: nowrap;
  font-size: 0.825rem;
  color: var(--text-muted);
}
.quote-body {
  font-size: 0.875rem;
  color: var(--text-primary);
  line-height: 1.4;
  /* .post-body と同様、長い URL / ハッシュタグを折り返してはみ出しを防ぐ */
  word-wrap: break-word;
  overflow-wrap: anywhere;
  /* 改行は生の \n を pre-wrap で 1 段改行 (X と同じ挙動) */
  white-space: pre-wrap;
  min-width: 0;
}
.quote-image {
  max-width: 60%;
  max-height: 200px;
  object-fit: cover;
  margin-top: var(--space-2);
  border-radius: var(--radius-sm);
  display: block;
}

/* ============================================================
 * 12. アクションバー(X 風)
 *     返信・リポスト・いいね・ブックマーク・共有
 *     等幅、円形ホバー領域、色分け
 * ============================================================ */
.post-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-2);
  max-width: 100%;
  padding-right: var(--space-2);
}
.post-actions.read-only {
  gap: var(--space-6);
  color: var(--text-muted);
  font-size: 0.875rem;
  justify-content: flex-start;
}

.action-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.8125rem;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0;
  text-decoration: none;
  font-family: inherit;
  font-weight: 500;
  transition: color var(--transition-fast);
}

.action-btn i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  font-size: 16px;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.action-btn span,
.action-btn .count {
  font-variant-numeric: tabular-nums;
  min-width: 1ch;
}

/* === 返信 (デフォルト = シアン) === */
.action-btn:hover { color: var(--action-reply); }
.action-btn:hover i {
  background: var(--action-reply-bg);
  color: var(--action-reply);
}

/* === いいね === */
.action-btn[name="like_post"]:hover,
.action-btn[name="unlike_post"]:hover,
.action-btn.like:hover {
  color: var(--action-like);
}
.action-btn[name="like_post"]:hover i,
.action-btn[name="unlike_post"]:hover i,
.action-btn.like:hover i {
  background: var(--action-like-bg);
  color: var(--action-like);
}
.action-btn.liked,
.action-btn[name="unlike_post"] {
  color: var(--action-like);
}
.action-btn.liked i,
.action-btn[name="unlike_post"] i {
  color: var(--action-like);
}
.action-btn.liked:active i {
  animation: likePop 0.4s ease-out;
}

/* === リポスト === */
.action-btn[name="repost_post"]:hover,
.action-btn[name="unrepost_post"]:hover,
.action-btn.repost:hover,
.repost-wrapper > .action-btn:hover {
  color: var(--action-repost);
}
.action-btn[name="repost_post"]:hover i,
.action-btn[name="unrepost_post"]:hover i,
.action-btn.repost:hover i,
.repost-wrapper > .action-btn:hover i {
  background: var(--action-repost-bg);
  color: var(--action-repost);
}
.action-btn.reposted { color: var(--action-repost); }
.action-btn.reposted i { color: var(--action-repost); }

/* === 共有・引用・コピー === */
.action-btn.share:hover,
.action-btn[title*="URL"]:hover,
.action-btn[title*="コピー"]:hover {
  color: var(--action-share);
}
.action-btn.share:hover i,
.action-btn[title*="URL"]:hover i,
.action-btn[title*="コピー"]:hover i {
  background: var(--action-share-bg);
  color: var(--action-share);
}

/* === ブックマーク (X 新機能) === */
.action-btn.bookmark:hover,
.action-btn[title*="ブックマーク"]:hover,
.action-btn[title*="保存"]:hover {
  color: var(--action-bookmark);
}
.action-btn.bookmark:hover i,
.action-btn[title*="ブックマーク"]:hover i,
.action-btn[title*="保存"]:hover i {
  background: var(--action-bookmark-bg);
  color: var(--action-bookmark);
}
.action-btn.bookmarked {
  color: var(--action-bookmark);
}
.action-btn.bookmarked i {
  color: var(--action-bookmark);
}

/* === リポストメニュー === */
.repost-wrapper { position: relative; display: inline-block; }
.share-wrapper { position: relative; display: inline-block; }
/* 共有メニューは右端ボタンなので右寄せにして画面外へはみ出さないように */
.share-menu { left: auto; right: 0; }
.repost-menu {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  min-width: 200px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  padding: var(--space-1) 0;
  animation: fadeIn 0.15s ease-out;
}
.repost-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 0.9rem;
  text-decoration: none;
  font-family: inherit;
  transition: background var(--transition-fast);
}
.repost-menu-item:hover { background: rgba(255, 255, 255, 0.06); }
.repost-menu-divider {
  height: 1px;
  background: var(--border-primary);
  margin: var(--space-1) 0;
}

/* ============================================================
 * 13. アバター
 * ============================================================ */
.avatar {
  display: inline-block;
  object-fit: cover;
  border-radius: 50%;
}
.avatar-sm { width: 32px;  height: 32px; }
.avatar-md { width: 44px;  height: 44px; }
.avatar-lg { width: 80px;  height: 80px; border: 3px solid var(--bg-primary); }
.avatar-xl { width: 134px; height: 134px; border: 4px solid var(--bg-primary); }
.avatar-placeholder {
  background: var(--gradient-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 800;
  text-transform: uppercase;
}
.avatar-sm.avatar-placeholder { font-size: 14px; }
.avatar-md.avatar-placeholder { font-size: 18px; }
.avatar-lg.avatar-placeholder { font-size: 32px; }
.avatar-xl.avatar-placeholder { font-size: 50px; }

/* ============================================================
 * 14. フォーム
 * ============================================================ */
.form-label {
  display: block;
  margin-bottom: var(--space-2);
}
.form-label > .muted {
  display: block;
  margin-bottom: var(--space-1);
}

.input,
input.input,
input[type="text"]:not(.action-btn):not(.btn):not([class*="aside-search"]),
input[type="email"]:not(.action-btn):not(.btn),
input[type="password"]:not(.action-btn):not(.btn),
input[type="url"]:not(.action-btn):not(.btn),
input[type="search"]:not(.action-btn):not(.btn) {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-primary);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.9375rem;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  box-sizing: border-box;
}
.input:focus,
input.input:focus {
  outline: none;
  border-color: var(--accent-cyan);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.10);
}
.input::placeholder { color: var(--text-muted); }

.textarea,
textarea {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-primary);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.9375rem;
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  box-sizing: border-box;
}
.textarea:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent-cyan);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.10);
}
.textarea::placeholder,
textarea::placeholder { color: var(--text-muted); }

input[type="file"] {
  font-family: inherit;
  font-size: 0.9rem;
}

/* ============================================================
 * 15. フラッシュメッセージ
 * ============================================================ */
.flash {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  font-size: 0.9375rem;
  border: 1px solid;
  animation: fadeIn 0.3s ease-out;
}
.flash.ok {
  background: rgba(0, 255, 157, 0.10);
  border-color: rgba(0, 255, 157, 0.30);
  color: var(--accent-green);
}
.flash.ng,
.flash.err {
  background: rgba(255, 77, 109, 0.10);
  border-color: rgba(255, 77, 109, 0.30);
  color: var(--accent-pink);
}

/* ============================================================
 * 16. ページネーション
 * ============================================================ */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-6) 0;
  padding: var(--space-4);
  flex-wrap: wrap;
}
.page-link {
  padding: 8px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  text-decoration: none;
  transition: all var(--transition-fast);
  font-size: 0.9rem;
  font-weight: 600;
}
.page-link:hover {
  border-color: var(--border-glow);
  background: rgba(0, 229, 255, 0.05);
}
.page-current {
  background: var(--gradient-primary) !important;
  border-color: transparent !important;
  color: white !important;
  font-weight: 800;
}
.page-ellipsis {
  color: var(--text-muted);
  padding: 0 var(--space-2);
}

/* ============================================================
 * 17. リンク汎用
 * ============================================================ */
a {
  color: var(--accent-cyan);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--accent-purple); }
.link-accent { color: var(--accent-cyan); text-decoration: underline; }

.text-center { text-align: center; }

/* ============================================================
 * 18. バッジ
 * ============================================================ */
.specialMark {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 1px;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
  border-radius: 50%;
  position: relative;
  vertical-align: middle;
  flex-shrink: 0;
}
.specialMark::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 12px;
  font-weight: 900;
}

.secretMark {
  color: var(--accent-cyan);
  margin-left: 1px;
  font-size: 14px;
  opacity: 0.9;
  vertical-align: middle;
}

.adminMark { margin-left: 1px; vertical-align: middle; display: inline-block; }

.adminMark::before {
  content: "058";  /* fa-circle-check Unicode */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: inline-block;
  margin-left: 0;
  font-size: 0.95em;
  color: #1d9bf0;
  vertical-align: middle; /* specialMark と縦位置を統一 (元は -1px で僅かにズレ) */
  text-shadow: 0 0 8px rgba(29, 155, 240, 0.40);
  -webkit-text-stroke: 0;
  line-height: 1;
}

/* ============================================================
 * 19. 投稿アップロード(post.php)
 * ============================================================ */
.upload-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}
.upload-btn {
  padding: 8px 16px;
  border-radius: var(--radius-full);
  border: none;
  color: white;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.upload-btn-image {
  background: var(--action-reply-bg);
  color: var(--action-reply);
  border: 1px solid var(--action-reply);
}
.upload-btn-image:hover {
  background: var(--action-reply);
  color: white;
}
.upload-btn-video {
  background: var(--action-share-bg);
  color: var(--action-share);
  border: 1px solid var(--action-share);
}
.upload-btn-video:hover {
  background: var(--action-share);
  color: white;
}
.upload-btn-thumb {
  background: var(--action-bookmark-bg);
  color: var(--action-bookmark);
  border: 1px solid var(--action-bookmark);
  padding: 6px 14px;
  font-size: 0.825rem;
}
.upload-btn-thumb:hover {
  background: var(--action-bookmark);
  color: var(--bg-primary);
}

.thumbnail-section {
  margin-top: var(--space-2);
  padding-left: var(--space-3);
  border-left: 3px solid var(--accent-cyan);
  width: 100%;
}
.media-preview { margin-top: var(--space-3); }
.media-preview-image,
.media-preview-video {
  width: 100%;
  max-width: 400px;
  border-radius: var(--radius-md);
  display: block;
  margin-bottom: var(--space-2);
}
.media-preview-image {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.upload-progress { margin-top: var(--space-3); }
.progress-bar-track {
  background: var(--bg-secondary);
  border-radius: var(--radius-full);
  height: 24px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--border-primary);
}
.progress-bar-fill {
  background: var(--gradient-primary);
  height: 100%;
  width: 0%;
  transition: width 0.3s;
}
.progress-text {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 0.9rem;
  font-weight: 700;
}

/* ============================================================
 * 20. プロフィール画面(X 風カバー画像 + 大アバター)
 * ============================================================ */
.profile-cover {
  width: 100%;
  height: 200px;
  background: var(--gradient-primary);
  position: relative;
  overflow: hidden;
}
.profile-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-header-content {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-primary);
  position: relative;
}
.profile-avatar-container {
  position: absolute;
  top: -67px;
  left: var(--space-4);
}
.profile-avatar-container .avatar {
  background: var(--bg-primary);
}
.profile-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  min-height: 36px;
}
.profile-name-section {
  margin-top: var(--space-6);
}
.profile-display-name {
  font-size: 1.5rem;
  font-weight: 900;
  margin-bottom: var(--space-1);
}
.profile-handle {
  color: var(--text-muted);
  font-size: 0.9375rem;
  margin-bottom: var(--space-3);
}
.profile-bio {
  font-size: 0.9375rem;
  margin-bottom: var(--space-3);
  line-height: 1.4;
}
.profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-bottom: var(--space-3);
}
.profile-meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.profile-stats {
  display: flex;
  gap: var(--space-4);
  font-size: 0.875rem;
}
.profile-stat-link {
  color: inherit;
  text-decoration: none;
}
.profile-stat-link:hover { text-decoration: underline; }
.profile-stat-num {
  font-weight: 800;
  color: var(--text-primary);
}
.profile-stat-label {
  color: var(--text-muted);
}
.profile-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-primary);
}
.profile-tab {
  flex: 1;
  padding: var(--space-3);
  text-align: center;
  cursor: pointer;
  color: var(--text-muted);
  font-weight: 700;
  text-decoration: none;
  transition: all var(--transition-fast);
  position: relative;
}
.profile-tab:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.profile-tab.active {
  color: var(--text-primary);
}
.profile-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 4px;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
}

/* ============================================================
 * 21. DM(messages.php)
 * ============================================================ */
.dm-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  height: calc(100vh - 0px);
}
@media (max-width: 1023px) {
  .dm-layout {
    grid-template-columns: 280px 1fr;
  }
}
@media (max-width: 767px) {
  .dm-layout {
    grid-template-columns: 1fr;
    /* safe-area 分も引いて、ボトムナビと重ならない高さに */
    height: calc(
      100vh
      - var(--header-mobile-height) - env(safe-area-inset-top)
      - var(--bottom-nav-height)  - env(safe-area-inset-bottom)
    );
  }
}
.dm-message {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  max-width: 70%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  margin-bottom: var(--space-2);
}
.dm-message.sent {
  background: var(--gradient-primary);
  color: white;
  margin-left: auto;
  border-bottom-right-radius: var(--radius-sm);
}
.dm-message.received {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  margin-right: auto;
  border-bottom-left-radius: var(--radius-sm);
}

/* ============================================================
 * 22. 設定画面(settings.php)
 * ============================================================ */
.settings-layout {
  display: flex;
  gap: var(--space-4);
  max-width: 900px;
  margin: 0 auto;
}
.settings-sidebar {
  width: 280px;
  flex-shrink: 0;
  border-right: 1px solid var(--border-primary);
  padding: var(--space-4) 0;
}
.settings-content {
  flex: 1;
  min-width: 0;
  padding: var(--space-4);
}
.settings-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  color: var(--text-primary);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast);
  border-left: 3px solid transparent;
}
.settings-nav-item:hover { background: rgba(255, 255, 255, 0.04); }
.settings-nav-item.active {
  background: rgba(0, 229, 255, 0.05);
  color: var(--accent-cyan);
  font-weight: 700;
  border-left-color: var(--accent-cyan);
}
.settings-item {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-primary);
}
.settings-item:last-child { border-bottom: none; }
.settings-item label {
  display: block;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.settings-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-primary);
}
.settings-toggle-info h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px;
}
.settings-toggle-info p {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
}

.toggle-switch {
  position: relative;
  width: 50px;
  height: 26px;
  flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--text-muted);
  border-radius: var(--radius-full);
  transition: 0.3s;
}
.toggle-slider:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.3s;
}
input:checked + .toggle-slider { background: var(--accent-cyan); }
input:checked + .toggle-slider:before { transform: translateX(24px); }

.btn-save {
  padding: 10px 24px;
  background: var(--gradient-primary);
  color: white;
  border: none;
  border-radius: var(--radius-full);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.btn-save:hover { filter: brightness(1.1); transform: translateY(-1px); }

.btn-danger {
  padding: 10px 24px;
  background: rgba(255, 77, 109, 0.15);
  color: var(--accent-pink);
  border: 1px solid var(--accent-pink);
  border-radius: var(--radius-full);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.btn-danger:hover {
  background: var(--accent-pink);
  color: white;
}

.alert-success {
  background: rgba(0, 255, 157, 0.10);
  border: 1px solid rgba(0, 255, 157, 0.30);
  color: var(--accent-green);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}
.alert-error {
  background: rgba(255, 77, 109, 0.10);
  border: 1px solid rgba(255, 77, 109, 0.30);
  color: var(--accent-pink);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}
.danger-zone {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--accent-pink);
  border-radius: var(--radius-lg);
  background: rgba(255, 77, 109, 0.04);
}
.danger-zone h4 {
  color: var(--accent-pink);
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 var(--space-2);
}
.danger-zone p {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin: 0 0 var(--space-3);
}

@media (max-width: 600px) {
  .settings-layout { flex-direction: column; }
  .settings-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border-primary); }
}

/* ============================================================
 * 23. レガシー上書き(古いインライン style を打ち消す)
 * ============================================================ */

/* メニュー類のインライン色を打ち消し */
[id^="kebab-menu-"][style*="background:#000"],
[id^="kebab-menu-"][style*="background: #000"] {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-primary) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
}
[id^="repost-menu-"][style*="background:#000"],
[id^="repost-menu-"][style*="background: #000"] {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-primary) !important;
  border-radius: var(--radius-md) !important;
}

/* インラインの境界線色を統一 */
[style*="border-bottom:1px solid #2f3336"],
[style*="border-bottom: 1px solid #2f3336"] {
  border-bottom-color: var(--border-primary) !important;
}

/* X-blue inline → ネオンシアン */
.post a[style*="color:#1DA1F2"],
.post a[style*="color: #1DA1F2"],
.post a[style*="color:#1d9bf0"],
.post a[style*="color: #1d9bf0"] {
  color: var(--accent-cyan) !important;
}

/* 旧グラデーションは新グラデに統一 */
[style*="background:linear-gradient(135deg, #667eea 0%, #764ba2 100%)"],
[style*="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)"] {
  background: var(--gradient-primary) !important;
}

/* ロゴ画像サイズ統一 */
.logo-img-md {
  height: 60px;
  width: auto;
  border-radius: var(--radius-md);
  filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.30));
}

/* ============================================================
 * 24. レスポンシブ最終調整
 * ============================================================ */

/* スマホ最適化 (≤480px) */
@media (max-width: 480px) {
  .header { padding: var(--space-3) var(--space-4); }
  .nav { gap: var(--space-2); }
  .btn { padding: 8px 14px; font-size: 0.9rem; min-height: 32px; }
  .post { padding: var(--space-3); }
  .author-name { font-size: 0.9rem; }
  .post-body { font-size: 0.9rem; }
  .action-btn i { width: 32px; height: 32px; font-size: 14px; }
  .post-actions { max-width: 100%; }
  .profile-display-name { font-size: 1.25rem; }
  .profile-cover { height: 150px; }
  .profile-avatar-container { top: -50px; }
  .profile-avatar-container .avatar-xl {
    width: 100px;
    height: 100px;
    font-size: 40px;
  }
  .profile-name-section { margin-top: var(--space-5); }
  .container { padding: var(--space-3); }
  .card { padding: var(--space-3); }
  .logo-img-md { height: 50px; }
}

/* タッチデバイス最適化 */
@media (hover: none) and (pointer: coarse) {
  .post:hover { background: transparent; }
  .nav-item:hover { background: transparent; }
  .nav-item:active { background: rgba(255, 255, 255, 0.06); }

  /* ボトムナビは「押した感」を強めに (タップ→画面遷移までの体感ラグを軽減) */
  .bottom-nav .nav-item:active {
    background: rgba(255, 255, 255, 0.12);
    transform: scale(0.92);
    transition: transform 0.05s ease-out, background 0.05s ease-out;
  }
  .bottom-nav .nav-item:active .icon {
    color: var(--accent-cyan);
  }
}

/* ============================================================
 * 25. ユーティリティ
 * ============================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.fade-in { animation: fadeIn 0.3s ease-out; }

/* タイムラインのコンテナ調整(scrollableなcol-mainで使う) */
.timeline {
  max-width: var(--tl-max-width);
  margin: 0 auto;
}

/* ============================================================
 * 26. 画像/動画ライトボックス(X風 全画面表示)
 * ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-out, visibility 0.2s;
  cursor: zoom-out;
}
.lightbox.open {
  opacity: 1;
  visibility: visible;
}
.lightbox-content {
  position: relative;
  max-width: 95vw;
  max-height: 95vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-img {
  max-width: 100%;
  max-height: 95vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: lightboxIn 0.25s ease-out;
  cursor: zoom-in;
  transition: transform 0.2s ease-out;
}
.lightbox-img.zoomed {
  cursor: zoom-out;
  max-width: none;
  max-height: none;
}
.lightbox-video {
  max-width: 100%;
  max-height: 95vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: lightboxIn 0.25s ease-out;
}
@keyframes lightboxIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* === 閉じるボタン (Morioka brand: 暗ガラス + 紫 glow on hover) === */
.lightbox-close {
  position: absolute;
  /* iOS PWA でステータスバーと被らないよう safe-area-inset-top を加算 */
  top: calc(16px + env(safe-area-inset-top));
  right: calc(16px + env(safe-area-inset-right));
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(20, 16, 40, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  -webkit-backdrop-filter: blur(10px) saturate(140%);
          backdrop-filter: blur(10px) saturate(140%);
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.lightbox-close:hover {
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.85), rgba(0, 229, 255, 0.7));
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.06);
  box-shadow:
    0 6px 22px rgba(124, 77, 255, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.lightbox-close:active { transform: scale(0.96); }
.lightbox-close i { font-size: 18px; line-height: 1; }

/* === ナビゲーション(複数画像時) === */
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: none;
  color: white;
  font-size: 22px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: background 0.15s;
}
.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.15);
}
.lightbox-nav.prev { left: 24px; }
.lightbox-nav.next { right: 24px; }

/* === ダウンロードボタン ===
   写真背景にどんな色が来ても可読性を担保するため:
   - bg を 0.55 → 0.72 黒に強化
   - backdrop-filter で下の写真をぼかす + 暗くする
   - text-shadow と border でアウトラインを追加 */
.lightbox-download {
  position: absolute;
  /* safe-area で下げる (iOS PWA のステータスバーと被らないように) */
  top: calc(16px + env(safe-area-inset-top));
  left: calc(16px + env(safe-area-inset-left));
  padding: 9px 16px 9px 14px;
  border-radius: var(--radius-full);
  background: rgba(20, 16, 40, 0.62);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: white;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  z-index: 1;
  text-decoration: none;
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.lightbox-download i { font-size: 13px; color: #ffe066; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.lightbox-download:hover {
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.85), rgba(0, 229, 255, 0.7));
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
  box-shadow:
    0 6px 22px rgba(124, 77, 255, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.lightbox-download:hover i { color: #fff; }
.lightbox-download:active { transform: scale(0.97); }

/* === ライトボックス内「高画質で読み込む」ボタン (download の右隣) === */
.lightbox-hd-btn {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top));
  /* download (左 16+safe + 約120px幅) の右に並べる */
  left: calc(16px + env(safe-area-inset-left) + 132px);
  padding: 8px 14px;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: white;
  font-size: 14px;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  z-index: 1;
  transition: background 0.15s, transform 0.1s;
}
.lightbox-hd-btn:hover {
  background: rgba(0, 0, 0, 0.85);
}
.lightbox-hd-btn:active {
  transform: scale(0.96);
}
.lightbox-hd-btn[disabled] {
  opacity: 0.7;
  cursor: default;
}
.lightbox-hd-btn.is-loading i {
  animation: hd-spin-lb 0.7s linear infinite;
}
@keyframes hd-spin-lb { to { transform: rotate(360deg); } }
.lightbox-hd-btn i { font-size: 12px; }
@media (max-width: 480px) {
  .lightbox-hd-btn {
    /* スマホは download の下に並べる (横並びだと幅不足) */
    top: auto;
    left: calc(16px + env(safe-area-inset-left));
    bottom: calc(20px + env(safe-area-inset-bottom));
    padding: 7px 12px;
    font-size: 13px;
  }
  /* カウンタとの被り回避: カウンタを少し上に */
  .lightbox-counter {
    bottom: calc(56px + env(safe-area-inset-bottom));
  }
}

/* === ケバブメニュー内「画像を高画質で読み込む」 === */
.kebab-hd.is-loading { opacity: 0.7; pointer-events: none; }
.kebab-hd.is-done    { opacity: 0.65; pointer-events: none; }
.kebab-hd.is-done i  { color: #00ff9d; }

/* === カウンター(複数画像時) === */
.lightbox-counter {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: white;
  font-size: 13px;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* === 画像をクリッカブルに見せる(カーソル) === */
.post-media img,
.post-video,
.dm-image,
.profile-cover img,
.media-clickable {
  cursor: zoom-in;
}

/* スマホ対応 */
@media (max-width: 480px) {
  /* 閉じるボタンはタップしやすいよう拡大 */
  .lightbox-close {
    width: 52px;
    height: 52px;
    font-size: 26px;
  }
  .lightbox-nav {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  .lightbox-nav.prev { left: 8px; }
  .lightbox-nav.next { right: 8px; }
  .lightbox-download {
    font-size: 13px;
    padding: 8px 14px;
  }
}

/* ============================================================
 * 27. ボディスクロールロック(ライトボックス開放時)
 * ============================================================ */
body.lightbox-open {
  overflow: hidden;
}

/* ============================================================
 * 28. スマホでの不自然な改行や余白の修正
 * ============================================================ */
@media (max-width: 480px) {
  /* グリッド grid の余白を縮小 */
  .grid { gap: var(--space-2); }
  /* ヘッダーの余白を縮小 */
  .header {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
  }
  /* 投稿のメディアの margin-top を縮小 */
  .post-media,
  .post-video,
  .ogp-card,
  .quote-card {
    margin-top: var(--space-2);
  }
  /* 投稿本文の文字サイズ最適化 */
  .post-body { font-size: 1rem; line-height: 1.45; }
  /* author-name 横の avatar との隙間 */
  .post-author { gap: var(--space-2); }
  /* アクションバー アイコン間隔調整 */
  .post-actions { padding-right: 0; }
  /* 通知バッジの位置 */
  .notification-badge { top: -6px; right: -6px; }
}

/* ============================================================
 * 29. プロフィール編集画面の改善(より広い領域を確保)
 * ============================================================ */
.profile-edit-form {
  max-width: 600px;
  margin: 0 auto;
}
.profile-edit-form .form-label {
  margin-bottom: var(--space-3);
}
.profile-edit-form .input,
.profile-edit-form .textarea {
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid var(--border-primary);
}
.profile-edit-form .input:focus,
.profile-edit-form .textarea:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.10);
}

/* ============================================================
 * 30. ユーティリティ追加
 * ============================================================ */
.flex-row { display: flex; flex-direction: row; }
.flex-col { display: flex; flex-direction: column; }
.flex-1   { flex: 1; }
.gap-1    { gap: var(--space-1); }
.gap-2    { gap: var(--space-2); }
.gap-3    { gap: var(--space-3); }
.gap-4    { gap: var(--space-4); }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.w-full { width: 100%; }


/* ============================================================
 * 31. コンポーザ(タイムライン上部の投稿入力)
 * ============================================================ */
.composer {
  border-bottom: 1px solid var(--border-primary);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-card-hover);
}
.composer-grid {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-3);
}
.composer-avatar {
  display: flex;
  align-items: flex-start;
}
.composer-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.composer-input {
  display: block;
  padding: 10px 0;
  font-size: 1.05rem;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--border-secondary);
  cursor: text;
  transition: color var(--transition-fast);
}
.composer-input:hover { color: var(--text-secondary); }
.composer-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding-top: var(--space-1);
}
.composer-action {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-cyan);
  text-decoration: none;
  transition: background var(--transition-fast);
  font-size: 1.05rem;
}
.composer-action:hover {
  background: var(--action-reply-bg);
}
.composer-submit {
  margin-left: auto;
}

/* ============================================================
 * 32. タブ(ホーム、プロフィール)
 * ============================================================ */
.tabs {
  display: flex;
  border-bottom: 1px solid var(--border-primary);
  margin-top: var(--space-3);
  margin-bottom: 0;
  margin-left: calc(-1 * var(--space-4));
  margin-right: calc(-1 * var(--space-4));
}
.tab {
  flex: 1;
  min-width: 0;
  padding: var(--space-3) var(--space-2);
  text-align: center;
  cursor: pointer;
  color: var(--text-muted);
  font-weight: 700;
  text-decoration: none;
  transition: all var(--transition-fast);
  position: relative;
  font-size: 1rem;
  white-space: nowrap;   /* 「ハッシュタグ」の「グ」だけ改行されるのを防ぐ */
}
.tab:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}
.tab.active {
  color: var(--text-primary);
}
.tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  max-width: 80px;
  height: 4px;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
}

/* 狭いスマホ幅で 4 タブ (最新/ユーザー/メディア/ハッシュタグ) が
   1 行に綺麗に収まるよう、文字サイズと左右パディングを詰める */
@media (max-width: 480px) {
  .tab {
    font-size: 0.9375rem;
    padding: var(--space-3) var(--space-1);
    letter-spacing: -0.01em;
  }
}
@media (max-width: 360px) {
  .tab { font-size: 0.875rem; }
}

/* col-main-header は親 .col-main(grid セル)の中なので
   margin-left/right: -16px だと col-main-header の padding を相殺する */
.col-main-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 9, 22, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-primary);
  padding: var(--space-3) var(--space-4) 0;
}
.col-main-header h1 {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0 0 var(--space-2);
}
.col-main-header .header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.col-main-header .header-row .back-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1.5rem;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast);
}
.col-main-header .header-row .back-btn:hover { background: var(--bg-card-hover); }
.col-main-header .header-row h1 { margin: 0; font-size: 1.15rem; }

/* col-main-header 内の tabs はマージン調整不要 */
.col-main-header .tabs {
  margin-left: calc(-1 * var(--space-4));
  margin-right: calc(-1 * var(--space-4));
  margin-top: var(--space-3);
}

/* ============================================================
 * 33. 空状態
 * ============================================================ */
.empty-state {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--text-secondary);
}
.empty-state .empty-icon {
  font-size: 3rem;
  margin-bottom: var(--space-3);
  opacity: 0.7;
}
.empty-state h2 {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: var(--space-2);
  color: var(--text-primary);
}
.empty-state p {
  font-size: 1rem;
  margin-bottom: var(--space-4);
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
 * 34. 投稿カードの新グリッド構造(_post_card.php 用)
 * ============================================================ */
.post {
  padding: var(--space-3) var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--border-primary);
  transition: background var(--transition-fast);
  position: relative;
  cursor: pointer;
}
.post:last-child { border-bottom: none; }
.post:hover { background: var(--bg-card-hover); }

.post-pinned-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-left: 56px;  /* avatar 列分インデント */
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.post-pinned-label i { font-size: 0.75rem; }

.post-grid {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-3);
  align-items: start;
}
.post-avatar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.post-main-col {
  min-width: 0;
}

.posthead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}
.post-author-meta {
  display: flex;
  flex-wrap: nowrap;          /* X 同様 1 行に収め、長い名前は … で省略 */
  align-items: center;
  gap: 4px 6px;
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  line-height: 1.3;
}
.post-author-meta .author-link {
  text-decoration: none;
  color: inherit;
  min-width: 0;               /* 子の ellipsis を効かせる */
  flex: 0 1 auto;
  overflow: hidden;
}
.post-author-meta .author-name {
  font-weight: 800;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
}
/* 表示名テキストだけを … で省略 (認証バッジは隠さない) */
.post-author-meta .author-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* バッジ類は縮めず常に出す (省略するのは名前テキストのみ) */
.post-author-meta .author-name .specialMark,
.post-author-meta .author-name .adminMark,
.post-author-meta .author-name .secretMark { flex: 0 0 auto; }
.post-author-meta .author-name:hover { text-decoration: underline; }
.post-author-meta .author-handle {
  color: var(--text-muted);
  font-weight: 400;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 区切り「·」と時刻は省略させず常に表示 */
.post-author-meta .post-meta-sep,
.post-author-meta .time-toggle {
  flex: 0 0 auto;
  white-space: nowrap;
}
.post-meta-sep {
  color: var(--text-muted);
}

/* ============================================================
 * 35. プロフィールヘッダー強化
 * ============================================================ */
.profile-page-header {
  padding: var(--space-3) var(--space-4) 0;
}
.profile-cover {
  width: 100%;
  height: 200px;
  background: var(--gradient-primary);
  position: relative;
  overflow: hidden;
}
.profile-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-header-content {
  padding: 0 var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--border-primary);
  position: relative;
}
.profile-avatar-container {
  position: absolute;
  top: -67px;
  left: var(--space-4);
}
.profile-avatar-container .avatar {
  background: var(--bg-primary);
}
.profile-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding-top: var(--space-3);
  min-height: 36px;
}
.profile-actions .icon-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.profile-actions .btn-follow {
  background: var(--text-primary);
  color: var(--bg-primary);
  border: none;
  font-weight: 800;
}
.profile-actions .btn-follow:hover {
  filter: brightness(1.1);
  transform: none;
}
.profile-actions .btn-following {
  background: transparent;
  border: 1px solid var(--border-primary);
  color: var(--text-primary);
  font-weight: 800;
}
.profile-actions .btn-following:hover {
  background: rgba(255, 77, 109, 0.10);
  border-color: var(--accent-pink);
  color: var(--accent-pink);
}
.profile-name-section {
  margin-top: var(--space-6);
}
.profile-display-name {
  font-size: 1.5rem;
  font-weight: 900;
  margin-bottom: var(--space-1);
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}
/* バッジの間隔はグローバルの margin-left: 1px に統一。
   プロフィール名は大きいので、バッジも em ベースで比例拡大する。
   重要: premiumMark のベース CSS は font-size:9px なので em が 9px 基準になる。
   必ず font-size:inherit でリセットしてから em で width/height を指定すること。 */
.profile-display-name .specialMark { width: 0.95em !important; height: 0.95em !important; }
.profile-display-name .specialMark::after { font-size: 0.6em; }
.profile-display-name .adminMark::before { font-size: 1em !important; }
.profile-display-name .premiumMark { font-size: inherit !important; width: 0.9em !important; height: 0.9em !important; }
.profile-display-name .premiumMark i { font-size: 0.45em !important; }
.profile-display-name .secretMark { font-size: 0.9em !important; }
.profile-handle {
  color: var(--text-muted);
  font-size: 0.9375rem;
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.follows-you-badge {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.profile-bio {
  font-size: 0.9375rem;
  margin-bottom: var(--space-3);
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-bottom: var(--space-3);
}
.profile-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.profile-meta a {
  color: var(--accent-cyan);
}
.profile-stats {
  display: flex;
  gap: var(--space-4);
  font-size: 0.875rem;
}
.profile-stat-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  gap: 4px;
}
.profile-stat-link:hover { text-decoration: underline; }
.profile-stat-num {
  font-weight: 800;
  color: var(--text-primary);
}
.profile-stat-label {
  color: var(--text-muted);
}
.profile-state-note {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: rgba(255, 215, 0, 0.06);
  border: 1px solid rgba(255, 215, 0, 0.20);
  border-radius: var(--radius-md);
  color: var(--accent-gold);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.profile-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-primary);
  background: rgba(7, 9, 22, 0.85);
  position: sticky;
  top: 0;
  z-index: 49;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.profile-tab {
  flex: 1;
  padding: var(--space-3) var(--space-2);
  text-align: center;
  cursor: pointer;
  color: var(--text-muted);
  font-weight: 700;
  text-decoration: none;
  transition: all var(--transition-fast);
  position: relative;
  font-size: 1rem;
}
.profile-tab:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}
.profile-tab.active {
  color: var(--text-primary);
}
.profile-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  max-width: 80px;
  height: 4px;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
}

/* ============================================================
 * 36. アサイドフッター
 * ============================================================ */
.aside-footer {
  padding: var(--space-3) 0;
  font-size: 0.825rem;
  color: var(--text-muted);
}

/* ============================================================
 * 37. レスポンシブ最終調整
 * ============================================================ */
@media (max-width: 480px) {
  .profile-cover { height: 130px; }
  .profile-avatar-container { top: -45px; }
  .profile-avatar-container .avatar-xl {
    width: 90px;
    height: 90px;
    font-size: 36px;
  }
  .profile-name-section { margin-top: var(--space-4); }
  .profile-display-name { font-size: 1.25rem; }
  .composer { padding: var(--space-2) var(--space-3); }
  .composer-grid { grid-template-columns: 36px 1fr; gap: var(--space-2); }
  .post { padding: var(--space-2) var(--space-3) var(--space-1); }
  .post-grid { grid-template-columns: 40px 1fr; gap: var(--space-2); }
  .post-pinned-label { margin-left: 48px; }
  .col-main-header { padding: var(--space-2) var(--space-3) 0; }
  .col-main-header h1 { font-size: 1.05rem; }
}


/* ============================================================
 * 38. 投稿詳細 (view_post.php)
 * ============================================================ */
.post-detail {
  padding: var(--space-4);
  cursor: default;
  border-bottom: 1px solid var(--border-primary);
}
.post-detail:hover { background: transparent; }

.post-detail-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.post-detail-author {
  flex: 1;
  min-width: 0;
}
.post-detail-author .author-link { min-width: 0; max-width: 100%; display: inline-flex; overflow: hidden; }
.post-detail-author .author-name {
  font-size: 1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
}
/* 投稿詳細の表示名も X 同様 … で省略 (バッジは常に表示) */
.post-detail-author .author-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.post-detail-author .author-name .specialMark,
.post-detail-author .author-name .adminMark,
.post-detail-author .author-name .secretMark { flex: 0 0 auto; }
.post-detail-author .author-handle {
  display: block;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.post-detail-body {
  font-size: 1.25rem;
  line-height: 1.45;
  word-wrap: break-word;
  /* 改行は生の \n を pre-wrap で 1 段改行 (linkify_text は <br> を出さない / X と同じ挙動) */
  white-space: pre-wrap;
  margin: var(--space-3) 0;
}
.post-detail-time {
  color: var(--text-muted);
  font-size: 0.875rem;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-primary);
  margin-top: var(--space-3);
}
.post-detail-stats {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-primary);
  font-size: 0.9rem;
  flex-wrap: wrap;
}
.post-detail-stats b {
  font-weight: 800;
}
/* 「リポスト」「いいね」は誰がしたか見られるリンク (ブックマークは非リンク) */
.post-detail-stats a.stat-link {
  color: inherit;
  text-decoration: none;
}
.post-detail-stats a.stat-link:hover {
  text-decoration: underline;
}
.post-detail-actions {
  padding: var(--space-2) 0;
  justify-content: space-around;
  max-width: none;
}
.post-detail-actions .action-btn {
  flex: 0 0 auto;
}

/* スレッドライン(親 → 本投稿の縦線) */
.thread-line {
  width: 2px;
  height: 24px;
  background: var(--border-primary);
  margin: 0 var(--space-4) 0 calc(var(--space-4) + 22px);
}

/* 返信フォーム */
.reply-form-section {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-primary);
}
.reply-textarea {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 1.05rem;
  resize: vertical;
  min-height: 60px;
  padding: var(--space-2) 0;
  outline: none;
}
.reply-textarea::placeholder { color: var(--text-muted); }
.reply-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-secondary);
}
.reply-form-section { display: none; }
.reply-form-section.is-expanded { display: block; }

/* 返信の返信 (孫返信) を、親返信カードの直下にアバター↔アバターを縦線で繋いで表示
   親カードと 1 ユニットに見せたいので、親 .post / 自身の border-bottom は描かない。 */
.nested-reply-thread {
  /* 小アバターを親アバター (avatar-md, 44px) の中心線に揃える。
     親カードは padding-left: var(--space-4) + avatar-col 44px → 中心は space-4 + 22。
     ここは padding-left: space-4 + 22 - (avatar-sm 32 / 2) = space-4 + 6 で小アバター中心を揃える */
  padding: 0 var(--space-4) var(--space-2) calc(var(--space-4) + 6px);
}
/* 親 .post の下に nested があれば、親側の区切り線を消して連続感を出す */
.post:has(+ .nested-reply-thread) { border-bottom: 0; }

.nested-thread-line {
  width: 2px;
  height: 14px;
  background: var(--border-primary);
  margin-left: 15px; /* avatar-sm (32px) の中心 ≈ 16px、線 2px の中心を 16px に */
}
/* 最初の線だけ親カードの下端まで伸ばしてアバター同士を視覚的に繋ぐ */
.nested-reply-thread > .nested-thread-line:first-child {
  margin-top: -10px;
  height: 24px;
}
.nested-reply {
  display: flex;
  align-items: flex-start;
  gap: 12px; /* 親 post-grid の gap と揃える */
  text-decoration: none;
  color: inherit;
  padding: var(--space-1) var(--space-2) var(--space-1) 0;
  border-radius: var(--radius-md);
}
.nested-reply:hover { background: var(--bg-hover); }
.nested-reply-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  min-width: 0;
  line-height: 1.4;
  padding-top: 4px;
}
.nested-reply-name {
  font-weight: 600;
  color: var(--text-primary);
}
.nested-reply-body {
  width: 100%;
  color: var(--text-secondary);
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

/* ============================================================
 * 39. 検索結果 (search.php)
 * ============================================================ */
.search-form { width: 100%; }
.search-input {
  width: 100%;
  padding: 12px 16px 12px 44px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 1rem;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%236b7aa1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>');
  background-repeat: no-repeat;
  background-position: 16px center;
  outline: none;
  transition: all var(--transition-fast);
}
.search-input:focus {
  background-color: var(--bg-primary);
  border-color: var(--accent-cyan);
}

.user-result {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-primary);
  text-decoration: none;
  color: inherit;
  transition: background var(--transition-fast);
}
.user-result:hover { background: var(--bg-card-hover); }
.user-result-info {
  flex: 1;
  min-width: 0;
}
.user-result-name {
  font-weight: 800;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex-wrap: nowrap;
}
/* ユーザー一覧の表示名も X 同様 … で省略 (バッジは常に表示) */
.user-result-name .author-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.user-result-name .specialMark,
.user-result-name .adminMark { flex: 0 0 auto; }
.user-result-handle {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 2px;
}
.user-result-bio {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.4;
}

.hashtag-result {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-primary);
  text-decoration: none;
  color: inherit;
  transition: background var(--transition-fast);
}
.hashtag-result:hover { background: var(--bg-card-hover); }

/* ============================================================
 * 40. 通知 (notifications.php)
 * ============================================================ */
.notif-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-primary);
  text-decoration: none;
  color: inherit;
  transition: background var(--transition-fast);
  position: relative;
}
.notif-row:hover { background: var(--bg-card-hover); }
.notif-row.unread {
  background: rgba(0, 229, 255, 0.04);
}
.notif-row.unread:hover {
  background: rgba(0, 229, 255, 0.08);
}

.notif-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.notif-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.notif-actor {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.notif-text {
  font-size: 1rem;
  line-height: 1.4;
}
.notif-name {
  font-weight: 800;
  color: var(--text-primary);
  /* X 同様、極端に長い名前は … で省略 (後続の「がいいねしました」等は残す) */
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.notif-snippet {
  margin-top: 4px;
  padding: 8px 12px;
  background: var(--bg-card-hover);
  border-radius: var(--radius-md);
  border-left: 2px solid var(--border-primary);
}
.notif-message-extra {
  margin-top: 4px;
}
.notif-time {
  margin-top: 4px;
}
.notif-unread-dot {
  position: absolute;
  top: 50%;
  right: var(--space-4);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-cyan);
  transform: translateY(-50%);
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.6);
}

/* ============================================================
 * 41. DM レイアウト (X 風2カラム)
 * ============================================================ */
.dm-col-main {
  border-right: none;
  padding: 0;
  height: 100vh;
  overflow: hidden;
}
@media (max-width: 767px) {
  /* PWA の safe-area-inset-top / bottom 分も引かないと
     入力欄がボトムナビの下に隠れる */
  .dm-col-main {
    height: calc(
      100vh
      - var(--header-mobile-height) - env(safe-area-inset-top)
      - var(--bottom-nav-height)  - env(safe-area-inset-bottom)
    );
  }
}

.dm-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  height: 100%;
  min-height: 0;
}
@media (max-width: 1023px) {
  .dm-layout { grid-template-columns: 280px 1fr; }
}
@media (max-width: 767px) {
  .dm-layout { grid-template-columns: 1fr; }
  .dm-layout.has-selected .dm-sidebar { display: none; }
  .dm-layout:not(.has-selected) .dm-chat { display: none; }
  .dm-back { display: inline-flex !important; }
}

/* 戻るボタンは全ビューポートで表示 (旧: スマホのみ表示。ユーザー要望で常時表示に) */
.dm-back { display: inline-flex; }

/* === 左カラム: 会話一覧 === */
.dm-sidebar {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-primary);
  overflow: hidden;
  min-height: 0;
}
.dm-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-primary);
}
.dm-sidebar-header h2 {
  font-size: 1.15rem;
  font-weight: 800;
}
.dm-sidebar-header .icon-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: none;
  border: 1px solid var(--border-primary);
  color: var(--text-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dm-sidebar-header .icon-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent-cyan);
}
.dm-search {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-secondary);
}
.dm-search input {
  width: 100%;
  padding: 10px 16px 10px 40px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.9rem;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%236b7aa1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>');
  background-repeat: no-repeat;
  background-position: 14px center;
  outline: none;
}
.dm-search input:focus {
  background-color: var(--bg-primary);
  border-color: var(--accent-cyan);
}

.dm-conversation-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.dm-conv-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--border-secondary);
  transition: background var(--transition-fast);
  position: relative;
}
.dm-conv-item:hover { background: var(--bg-card-hover); }
.dm-conv-item.selected {
  background: rgba(0, 229, 255, 0.08);
  border-left: 3px solid var(--accent-cyan);
}
.dm-conv-item.unread {
  background: rgba(124, 77, 255, 0.05);
}
.dm-conv-meta {
  flex: 1;
  min-width: 0;
}
.dm-conv-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.dm-conv-name {
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;        /* flex 内で確実に省略させる */
  flex: 0 1 auto;
}
.dm-conv-time { white-space: nowrap; flex: 0 0 auto; }
.dm-conv-preview {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.dm-conv-unread {
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--accent-pink);
  color: white;
  font-size: 0.7rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* === 右カラム: チャット === */
.dm-chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.dm-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  text-align: center;
}

.dm-chat-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-primary);
  background: rgba(7, 9, 22, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  flex-shrink: 0;
}
.dm-chat-userinfo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
  flex: 1;
  min-width: 0;
}
.dm-chat-userinfo:hover { opacity: 0.85; }
.dm-chat-name {
  font-weight: 800;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 4px;
}
.dm-chat-handle {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.dm-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 0;
  /* チャットらしく: 少ないメッセージでも入力欄の真上に張り付くように
     下端寄せ。先頭子要素に margin-top:auto を入れることで
     overflow 時に上端が切れて見えなくなるバグも回避 */
  justify-content: flex-end;
}
.dm-messages > :first-child {
  margin-top: auto;
}

.dm-date-sep {
  text-align: center;
  font-size: 0.825rem;
  color: var(--text-muted);
  margin: var(--space-3) 0 var(--space-2);
  padding: 4px 12px;
  background: var(--bg-card);
  border-radius: var(--radius-full);
  align-self: center;
}

.dm-message-row {
  display: flex;
  gap: var(--space-2);
  max-width: 75%;
}
.dm-message-row.sent {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.dm-message-row.received {
  align-self: flex-start;
}
.dm-message-avatar { flex-shrink: 0; }

.dm-bubble-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.dm-message-row.sent .dm-bubble-group { align-items: flex-end; }
.dm-message-row.received .dm-bubble-group { align-items: flex-start; }

.dm-reply-to {
  padding: 6px 12px;
  background: var(--bg-card-hover);
  border-radius: var(--radius-md);
  border-left: 2px solid var(--accent-cyan);
  font-size: 0.825rem;
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* LINE 風の引用カード (bubble の上に表示) */
.dm-reply-quote {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 6px 10px 6px 12px;
  margin-bottom: -6px;
  background: var(--bg-card-hover, rgba(255,255,255,0.04));
  border-left: 3px solid var(--accent-cyan, #1d9bf0);
  border-radius: var(--radius-md, 10px) var(--radius-md, 10px) 6px 6px;
  font-size: 0.8rem;
  max-width: min(320px, 100%);
  cursor: pointer;
  text-align: left;
  color: var(--text-secondary, #a1a1aa);
  border-top: none;
  border-right: none;
  border-bottom: none;
  opacity: 0.85;
  transition: opacity var(--transition-fast, 0.12s ease), background var(--transition-fast, 0.12s ease);
}
.dm-reply-quote:hover { opacity: 1; background: var(--bg-card-active, rgba(255,255,255,0.08)); }
.dm-message-row.sent  .dm-reply-quote { align-self: flex-end; }
.dm-message-row.received .dm-reply-quote { align-self: flex-start; }
.dm-reply-quote-name {
  font-weight: 600;
  color: var(--accent-cyan, #1d9bf0);
  font-size: 0.78rem;
}
.dm-reply-quote-text {
  color: var(--text-secondary, #a1a1aa);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}

/* 引用タップで元メッセージをハイライト */
@keyframes dm-highlight-pulse {
  0%   { background-color: rgba(29, 155, 240, 0.25); }
  100% { background-color: transparent; }
}
.dm-message-row.dm-highlight .dm-bubble {
  animation: dm-highlight-pulse 1.6s ease-out;
  border-radius: var(--radius-lg);
}

.dm-bubble {
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  font-size: 1rem;
  line-height: 1.4;
}
.dm-message-row.sent .dm-bubble {
  background: var(--gradient-primary);
  color: white;
  border-bottom-right-radius: var(--radius-sm);
}
.dm-message-row.received .dm-bubble {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  border-bottom-left-radius: var(--radius-sm);
}
/* ライト: 受信側の rgba(255,255,255,0.06) は白地で透明同然になり境界が消える。
   見えるグレー地 + 濃色文字 + 細枠で吹き出しをはっきりさせる。 */
body.theme-light .dm-message-row.received .dm-bubble {
  background: #e9edf1 !important;
  color: #0f1419 !important;
  border: 1px solid rgba(0, 0, 0, 0.07) !important;
}
body.theme-light .dm-message-row.received .dm-bubble .dm-bubble-text,
body.theme-light .dm-message-row.received .dm-bubble a { color: #0f1419 !important; }
/* 送信側はグラデ維持。汎用文字色ルール (§109) に負けて濃色化しないよう、
   子要素 (テキスト/リンク/タイムスタンプ/引用/spam を含む全 descendant) も
   白で固定。`*` まで広げないと内側の <span>/<a>/<time> が dark に落ちる。 */
body.theme-light .dm-message-row.sent .dm-bubble,
body.theme-light .dm-message-row.sent .dm-bubble *,
body.theme-light .dm-message-row.sent .dm-bubble a { color: #ffffff !important; }
.dm-bubble-text { white-space: pre-wrap; }
.dm-image {
  /* バブル幅を超えない範囲で最大 280px。
     親(bubble)が 280px より狭い時は親に収まり、右はみ出しを防ぐ */
  max-width: min(280px, 100%);
  max-height: 400px;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
  margin-bottom: 4px;
}
.dm-ogp {
  margin-top: 6px;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.dm-ogp .ogp-body { background: rgba(0, 0, 0, 0.20); padding: 8px; }
.dm-ogp .ogp-title { font-size: 0.9rem; }
.dm-ogp .ogp-host { font-size: 0.7rem; }

.dm-reactions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.dm-reaction {
  background: var(--bg-card);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-full);
  padding: 2px 8px;
  font-size: 0.9rem;
}

.dm-msg-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}
.dm-message-row:hover .dm-msg-meta { opacity: 1; }

/* bubble の横に時刻 + アクションを配置して縦領域を節約。
   常に出すと UI がうるさいので、デフォルトは非表示。
   - タッチデバイス: bubble をタップで .tapped クラスがつき表示
   - PC (hover 可): hover で表示 */
.dm-bubble-side-wrap {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  max-width: 100%;
}
.dm-message-row.sent .dm-bubble-side-wrap {
  flex-direction: row-reverse;
}
.dm-bubble-side-wrap .dm-bubble { min-width: 0; }
.dm-bubble-side-wrap .dm-msg-meta {
  display: none;     /* デフォルトは隠す */
  flex-direction: row;        /* 横一列に: 時刻 リアクション 削除 */
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  padding-bottom: 4px;
}
.dm-message-row.tapped .dm-bubble-side-wrap .dm-msg-meta {
  display: inline-flex;
}
@media (hover: hover) {
  .dm-message-row:hover .dm-bubble-side-wrap .dm-msg-meta {
    display: inline-flex;
  }
}
.dm-msg-action {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
}
.dm-msg-action:hover {
  color: var(--accent-cyan);
  background: var(--action-reply-bg);
}

/* === 入力欄 === */
.dm-composer {
  border-top: 1px solid var(--border-primary);
  padding: var(--space-3);
  background: var(--bg-primary);
  flex-shrink: 0;
}
.dm-composer-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: 6px 8px 6px 12px;
}
.dm-composer-imgbtn {
  cursor: pointer;
  padding: 8px;
  color: var(--accent-cyan);
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  transition: background var(--transition-fast);
}
.dm-composer-imgbtn:hover { background: var(--action-reply-bg); }
.dm-composer-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-primary);
  resize: none;
  outline: none;
  padding: 8px 0;
  min-height: 24px;
  max-height: 160px;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
}
.dm-composer-input::placeholder { color: var(--text-muted); }
.dm-send-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 80ms ease, filter var(--transition-fast), box-shadow 120ms ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.dm-send-btn:hover { filter: brightness(1.15); }
.dm-send-btn:active,
.dm-send-btn.is-pressed {
  transform: scale(0.88);
  filter: brightness(0.85);
  box-shadow: 0 0 0 4px rgba(29, 155, 240, 0.25);
}
.dm-send-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* 楽観 UI で挿入された送信中 bubble */
.dm-message-row.dm-optimistic .dm-bubble {
  opacity: 0.75;
}
.dm-message-row.dm-optimistic.dm-failed .dm-bubble {
  opacity: 1;
  outline: 1px solid var(--accent-pink, #f43f5e);
}

.dm-composer-replyto {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  padding: 8px 10px 8px 12px;
  background: var(--bg-card-hover);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  font-size: 0.9rem;
  border-left: 3px solid var(--accent-cyan);
}
.dm-composer-replyto-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dm-composer-replyto-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-cyan);
  font-size: 0.78rem;
  font-weight: 600;
}
.dm-composer-replyto-text {
  color: var(--text-secondary, var(--text-muted));
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-composer-replyto-close {
  margin-left: auto;
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.15rem;
  padding: 0 4px;
  line-height: 1;
}

.dm-image-preview {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px;
  background: var(--bg-card-hover);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}
.dm-image-preview img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.dm-image-preview button {
  background: var(--accent-pink);
  color: white;
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
}

/* ============================================================
 * 42. モーダル(共通)
 * ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.modal-overlay[style*="flex"] { display: flex !important; }
.modal-content {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  max-width: 480px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  animation: fadeIn 0.2s ease-out;
}
.modal-content h3 {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: var(--space-4);
}

.reaction-emoji-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}
.reaction-emoji-btn {
  font-size: 2rem;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: 12px;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.reaction-emoji-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent-cyan);
  transform: scale(1.1);
}


/* ============================================================
 * 43. DM ページ専用: 3カラムレイアウトを維持
 *     他ページと幅を揃えて一貫性を保つ
 *     中央カラム内で「会話一覧 + チャット」の 2 分割
 * ============================================================ */

/* DM ページでも 3カラムレイアウトはそのまま維持 */
/* col-aside(右サイドバー: おすすめ等)も他ページと同じく表示 */

/* col-main の高さを画面いっぱいに(DM は内部スクロール) */
.layout-3col .dm-col-main {
  height: 100vh;
  overflow: hidden;
  border-right: 1px solid var(--border-primary);  /* 他ページと同じ border */
}
@media (max-width: 767px) {
  .layout-3col .dm-col-main {
    /* PWA の safe-area 分も引く (入力欄がボトムナビ下に隠れる対策) */
    height: calc(
      100vh
      - var(--header-mobile-height) - env(safe-area-inset-top)
      - var(--bottom-nav-height)  - env(safe-area-inset-bottom)
    );
  }
}

/* DM 内 2カラムグリッド: 中央カラム(620px 程度)に収まる比率 */
.dm-col-main .dm-layout {
  grid-template-columns: 240px minmax(0, 1fr);
}
@media (max-width: 1279px) {
  .dm-col-main .dm-layout { grid-template-columns: 220px minmax(0, 1fr); }
}
@media (max-width: 1023px) {
  .dm-col-main .dm-layout { grid-template-columns: 200px minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .dm-col-main .dm-layout { grid-template-columns: 1fr; }
}

/* メッセージバブルの最大幅も中央カラム幅に合わせる */
.dm-message-row {
  max-width: 80%;
}
/* 画像メッセージはバブルを画像サイズに合わせて広げる
   (image 280px + bubble padding 28 + avatar 40 + gap 8 ≒ 356px) */
.dm-message-row:has(.dm-image) {
  max-width: min(100%, 360px);
}

/* チャットエリアを使い切る */
.dm-chat {
  width: 100%;
  min-width: 0;
}

/* 会話一覧の各項目もコンパクトに(幅が狭くなったぶん) */
.dm-col-main .dm-conv-item {
  padding: var(--space-2) var(--space-3);
  gap: var(--space-2);
}
.dm-col-main .dm-conv-name {
  font-size: 0.9rem;
}
.dm-col-main .dm-sidebar-header {
  padding: var(--space-3);
}
.dm-col-main .dm-sidebar-header h2 {
  font-size: 1.05rem;
}


/* ============================================================
 * 44. 設定ハブ(settings.php)
 * ============================================================ */
.settings-hub {
  padding: var(--space-2) 0;
}
.settings-hub-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--border-primary);
  transition: background var(--transition-fast);
  cursor: pointer;
}
.settings-hub-item:hover { background: var(--bg-card-hover); }
.settings-hub-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.settings-hub-meta {
  flex: 1;
  min-width: 0;
}
.settings-hub-title {
  font-weight: 800;
  font-size: 1rem;
  color: var(--text-primary);
}
.settings-hub-desc {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 2px;
}
.settings-hub-arrow {
  color: var(--text-muted);
  font-size: 1.5rem;
  flex-shrink: 0;
}
.settings-hub-divider {
  height: 8px;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-primary);
}
.settings-hub-danger .settings-hub-title {
  color: var(--accent-pink);
}

/* ============================================================
 * 45. 設定サブページ共通
 * ============================================================ */
.settings-section {
  padding: var(--space-4);
}
.settings-block {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-primary);
}
.settings-block:last-child {
  border-bottom: none;
}
.settings-block h2 {
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: var(--space-2);
  color: var(--text-primary);
}

.text-right {
  text-align: right;
}

.empty-state-mini {
  padding: var(--space-4);
  text-align: center;
  background: var(--bg-card-hover);
  border-radius: var(--radius-md);
}

/* ============================================================
 * 46. ユーザーリスト(ミュート・ブロック一覧)
 * ============================================================ */
.user-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.user-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-primary);
}
.user-row:last-child { border-bottom: none; }
.user-row-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.user-row-info:hover { opacity: 0.85; }
.user-row-meta {
  flex: 1;
  min-width: 0;
}
.user-row-name {
  font-weight: 800;
  font-size: 1rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-row-handle {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ============================================================
 * 47. テーマピッカー(settings_display.php)
 * ============================================================ */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
}
.theme-card {
  display: block;
  padding: var(--space-3);
  border: 2px solid var(--border-primary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  background: var(--bg-card-hover);
}
.theme-card:hover { border-color: var(--border-glow); }
.theme-card.selected {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.15);
}
.theme-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
/* テーマの自動切替トグル */
.theme-auto-toggle {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.theme-auto-toggle input[type="checkbox"] {
  margin-top: 2px;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  accent-color: var(--accent-cyan);
  cursor: pointer;
}
.theme-auto-toggle input[type="checkbox"]:disabled { cursor: not-allowed; }
.theme-auto-toggle:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.theme-auto-toggle-text { display: flex; flex-direction: column; gap: 2px; }
.theme-auto-toggle-text strong i { color: var(--accent-cyan); margin-right: 4px; }

/* 自動切替: 夜のダーク × 昼のライト の組み合わせパネル */
.theme-auto-panel {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  background: var(--bg-card-hover);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.theme-auto-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.theme-auto-label {
  font-weight: 700;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.theme-auto-label i { color: var(--accent-cyan); }
.theme-auto-select {
  flex: 0 1 220px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-primary);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 0.9375rem;
  font-family: inherit;
  cursor: pointer;
}
.theme-grid.is-dimmed {
  opacity: 0.45;
  pointer-events: none;
  filter: saturate(0.7);
}
.theme-preview {
  width: 100%;
  height: 80px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  overflow: hidden;
  border: 1px solid var(--border-primary);
}
.theme-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-primary);
}
.theme-desc {
  margin-top: 2px;
}

/* ============================================================
 * 48. ログイン履歴(settings_security.php)
 * ============================================================ */
.login-history {
  display: flex;
  flex-direction: column;
}
.login-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-primary);
}
.login-row:last-child { border-bottom: none; }
.login-row-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 2px;
}
.login-row-meta {
  flex: 1;
  min-width: 0;
}
.login-row-title {
  font-weight: 700;
  font-size: 0.9rem;
}
.login-row-detail {
  margin-top: 2px;
  word-break: break-all;
}

/* ============================================================
 * 49. プロフィール編集(edit_profile.php)
 * ============================================================ */
.profile-edit-cover {
  position: relative;
  width: 100%;
  height: 200px;
  background: var(--gradient-primary);
  overflow: hidden;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}
.profile-edit-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-edit-cover-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  color: white;
  font-size: 2rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.profile-edit-cover:hover .profile-edit-cover-btn {
  opacity: 1;
}

.profile-edit-avatar-wrap {
  margin-top: -67px;
  margin-bottom: var(--space-3);
  padding-left: var(--space-3);
}
.profile-edit-avatar {
  position: relative;
  display: inline-block;
}
.profile-edit-avatar .avatar {
  background: var(--bg-primary);
}
.profile-edit-avatar-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  color: white;
  font-size: 1.6rem;
  cursor: pointer;
  border-radius: 50%;
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.profile-edit-avatar:hover .profile-edit-avatar-btn {
  opacity: 1;
}

.profile-edit-fields {
  padding: 0 var(--space-3);
}

@media (max-width: 480px) {
  .profile-edit-cover { height: 130px; }
  .profile-edit-avatar-wrap { margin-top: -50px; }
  .profile-edit-avatar .avatar-xl {
    width: 100px;
    height: 100px;
    font-size: 40px;
  }
}


/* ============================================================
 * 50. 複数画像グリッド (post-media-grid)
 * ============================================================ */
.post-media-grid {
  display: grid;
  gap: 4px;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: var(--space-2) 0 var(--space-3);
  max-height: 510px;
}

/* 1枚: 大きく */
.post-media-1 {
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr);
}
.post-media-1 .post-media-item {
  max-height: 510px;
}
.post-media-1 .post-media-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: 510px;
}

/* 2枚: 縦半分ずつ */
.post-media-2 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 280px;
}

/* 3枚: 1左大 + 2右縦 */
.post-media-3 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 138px 138px;
  height: 280px;
}
.post-media-3 .post-media-item:nth-child(1) {
  grid-row: 1 / span 2;
}

/* 4枚: 2x2 */
.post-media-4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 138px 138px;
  height: 280px;
}

.post-media-item {
  display: block;
  background: var(--bg-card-hover);
  overflow: hidden;
  position: relative;
  text-decoration: none;
}
.post-media-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-fast);
}
.post-media-item:hover img {
  transform: scale(1.02);
}

@media (max-width: 480px) {
  .post-media-1,
  .post-media-2,
  .post-media-3,
  .post-media-4 {
    max-height: 360px;
  }
  .post-media-2 { grid-template-rows: 180px; }
  .post-media-3,
  .post-media-4 {
    grid-template-rows: 90px 90px;
    height: 180px;
  }
}

/* ============================================================
 * 51. 文字サイズの追加底上げ(X 風に近づける)
 * ============================================================ */
:root {
  /* 基本 */
  --font-size-base: 16px;     /* X と同等 */
  --font-size-sm:   14.5px;
  --font-size-md:   16px;
  --font-size-lg:   18px;
  --font-size-xl:   20px;
  --font-size-xxl:  24px;
  --line-height-tight:  1.3;
  --line-height-normal: 1.45;
  --line-height-relaxed: 1.6;
}

/* 投稿本文を X 標準に */
.post-body, .post-detail-body {
  line-height: var(--line-height-normal);
}
.post-body {
  font-size: 1rem;  /* 16px */
}

/* 投稿詳細はさらに大きく(X の投稿詳細と同等) */
.post-detail-body {
  font-size: 1.35rem;  /* 21.6px */
  line-height: 1.45;
}

/* サイドナビアイテム */
.nav-item {
  font-size: 1.05rem;  /* 16.8px */
  font-weight: 600;
}
.nav-item .icon {
  font-size: 1.5rem;
}

/* ボタンも気持ち大きく */
.btn {
  font-size: 0.95rem;  /* 15.2px */
}
.btn-block {
  font-size: 1rem;
}

/* 投稿者名 */
.author-name {
  font-size: 0.95rem;
  font-weight: 800;
}

/* ============================================================
 * 52. ピン留め投稿ラベル(_post_card.php 上部)
 * ============================================================ */
.pinned-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--space-4);
  margin-top: var(--space-2);
  margin-bottom: -4px;
  font-size: 0.825rem;
  color: var(--text-muted);
  font-weight: 600;
}
.pinned-label i {
  color: var(--accent-gold);
  font-size: 0.9rem;
}

/* ============================================================
 * 53. 投稿フォームの複数画像プレビュー(post.php 用、追加スタイル)
 * ============================================================ */
.upload-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: var(--space-2);
}
.upload-preview-item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-card-hover);
  border: 1px solid var(--border-primary);
}
.upload-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.upload-preview-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ============================================================
 * 54. アバター歪み修正(flex/grid 内で正方形を維持)
 * ============================================================ */
.avatar {
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.avatar-sm,
.avatar-md,
.avatar-lg,
.avatar-xl {
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
}
/* グリッドセル内で .avatar が引き延ばされないように */
.composer-avatar .avatar,
.composer-grid .avatar {
  width: 44px;
  height: 44px;
  max-width: 44px;
  max-height: 44px;
}

/* ============================================================
 * 55. インラインコンポーザの textarea(リンクではなく入力欄)
 * ============================================================ */
.composer-textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-secondary);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 1.1rem;
  resize: none;
  outline: none;
  padding: 8px 0;
  min-height: 44px;
  max-height: 240px;
  line-height: 1.4;
  overflow-y: auto;
}
.composer-textarea::placeholder {
  color: var(--text-muted);
}
.composer-textarea:focus {
  border-bottom-color: var(--accent-cyan);
}

.composer-counter {
  margin-left: auto;
  margin-right: var(--space-2);
  font-size: 0.85rem;
  font-weight: 600;
}

/* composer-action 内の hidden input が要素サイズに影響しないように */
.composer-action input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.composer-action {
  position: relative;
}

/* composer のレイアウトを崩さないため、textarea 内でも grid セルを維持 */
.composer-grid > .composer-avatar {
  align-self: start;
  padding-top: 6px;
}

/* インライン投稿フォームの送信中状態 */
.composer-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* upload-preview-grid の追加微調整(post.php と index.php の両方で使う) */
.composer-grid .upload-preview-grid {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

/* progress bar(縦に詰め直し)*/
.upload-progress {
  margin-top: var(--space-2);
}
.progress-bar-track {
  position: relative;
  height: 6px;
  background: var(--bg-card-hover);
  border-radius: 3px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: var(--gradient-primary);
  width: 0%;
  transition: width 0.2s;
}
.progress-text {
  position: absolute;
  right: 8px;
  top: -22px;
  font-size: 0.75rem;
  color: var(--text-muted);
}


/* ============================================================
 * 56. インライン・コンポーザのアイコン重なり修正(s6)
 *
 *    composer-grid: [44px avatar] [1fr main]
 *    main の中: textarea + actions
 *    grid のセル間 gap が小さすぎると重なる
 * ============================================================ */
.composer {
  padding: 12px 16px;
}
.composer-grid {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.composer-avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  padding-top: 2px;  /* textarea の上端と揃える(font-size 1.1rem の場合) */
}
.composer-avatar .avatar {
  display: block;
  width: 44px;
  height: 44px;
  max-width: 44px;
  max-height: 44px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}
.composer-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.composer-textarea {
  display: block;
  width: 100%;
  min-width: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;  /* 通常時はボーダーなし(X 風) */
  color: var(--text-primary);
  font-family: inherit;
  font-size: 1.15rem;       /* X の本文と同じ */
  resize: none;
  outline: none;
  padding: 6px 0 8px;
  min-height: 32px;
  max-height: 240px;
  line-height: 1.4;
}
.composer-textarea::placeholder {
  color: var(--text-muted);
  font-size: 1.15rem;
}
.composer-textarea:focus {
  border-bottom-color: var(--border-primary);
}
.composer-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--border-secondary);
}
.composer-action {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-cyan);
  text-decoration: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--transition-fast);
  position: relative;
  font-size: 1.05rem;
}
.composer-action:hover {
  background: var(--action-reply-bg);
}
.composer-counter {
  margin-left: auto;
  margin-right: 8px;
  font-size: 0.85rem;
  font-weight: 600;
}
.composer-submit {
  padding: 6px 18px;
  font-weight: 800;
  border-radius: 9999px;
  font-size: 0.95rem;
  min-height: 32px;
}

/* スマホでのコンポーザ */
@media (max-width: 480px) {
  .composer { padding: 10px 12px; }
  .composer-grid { gap: 10px; grid-template-columns: 40px minmax(0, 1fr); }
  .composer-avatar { width: 40px; height: 40px; }
  .composer-avatar .avatar {
    width: 40px; height: 40px; max-width: 40px; max-height: 40px;
  }
  .composer-textarea { font-size: 1.05rem; }
  .composer-textarea::placeholder { font-size: 1.05rem; }
}

/* ============================================================
 * 57. モバイルヘッダーの最適化(X 風コンパクト化)
 * ============================================================ */
:root {
  --header-mobile-height: 50px;  /* X とほぼ同じ */
}

.mobile-header-content {
  padding: 0 12px;
  gap: 12px;
}

/* 左のアバター(ドロワー開閉) */
.account-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}
.account-icon img,
.account-icon .avatar,
.account-icon .avatar-placeholder {
  width: 32px !important;
  height: 32px !important;
  max-width: 32px;
  max-height: 32px;
  font-size: 14px !important;
}

/* 中央のロゴ(MORIOKA PORTAL+) */
.mobile-logo {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mobile-logo img {
  height: 28px !important;
  width: auto !important;
  max-width: 140px;
  object-fit: contain;
}
.mobile-logo .logo-img-md,
.mobile-logo .logo-img {
  height: 28px;
  width: auto;
}

/* 右の投稿ボタン(+) */
.mobile-header-content .post-button-mobile,
.mobile-header-content a.post-btn,
.mobile-header-content .compose-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-primary);
  color: white;
  font-size: 1rem;
  text-decoration: none;
  flex-shrink: 0;
}

/* ============================================================
 * 58. ドロワー(モバイルメニュー)の X 風コンパクト化
 * ============================================================ */
.side-drawer {
  width: 78%;
  max-width: 290px;
}

.drawer-header {
  padding: 16px 16px 12px;
}
.drawer-user-info {
  gap: 2px;
}
.drawer-user-info .avatar {
  margin-bottom: 8px;
  width: 44px;
  height: 44px;
  max-width: 44px;
  max-height: 44px;
}
.drawer-user-info .name {
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.2;
}
.drawer-user-info .handle {
  font-size: 0.85rem;
  line-height: 1.2;
}

.drawer-menu {
  padding: 8px 8px;
  gap: 0;
}
.drawer-menu-item {
  padding: 10px 12px;
  border-radius: 9999px;
  font-size: 1rem;
  font-weight: 700;
  gap: 14px;
}
.drawer-menu-item .icon {
  width: 22px;
  height: 22px;
  font-size: 1.15rem;
}

.drawer-footer {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--border-primary);
}
.drawer-footer .btn-block {
  font-size: 0.95rem;
  padding: 10px;
  border-radius: 9999px;
}

/* スマホで投稿カードもコンパクトに(X 風の密度) */
@media (max-width: 480px) {
  .post {
    padding: 10px 12px 4px;
  }
  .post-grid {
    gap: 10px;
  }
  .post-author-meta {
    font-size: 0.9rem;
  }
  .post-body {
    font-size: 0.95rem;
  }
}

/* ============================================================
 * 59. アバター padding の競合を回避
 *
 * セッション 5 で composer-avatar に padding-top を入れていたのが
 * グリッドセルのサイズを破壊していた可能性。リセット。
 * ============================================================ */
.composer-grid > .composer-avatar {
  align-self: start;
  padding-top: 2px !important;
}


/* ============================================================
 * 60. ★最終調整★ ヘッダー・サイドバー・アバター(s7)
 *
 *    s5/s6 までの修正が効きにくかったので、!important で
 *    確実に上書き。並びは詳細度の高い順。
 * ============================================================ */

/* ----------- アバター内の文字位置(プレースホルダ) ----------- */
.avatar-placeholder {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;       /* これが効いていなかった可能性 */
  padding: 0 !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  background: var(--gradient-primary);
  color: white;
}
.avatar-sm.avatar-placeholder { font-size: 14px !important; }
.avatar-md.avatar-placeholder { font-size: 18px !important; }
.avatar-lg.avatar-placeholder { font-size: 32px !important; }
.avatar-xl.avatar-placeholder { font-size: 50px !important; }

/* ----------- アバター(画像)正方形維持 ----------- */
.avatar {
  flex-shrink: 0 !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
}

/* ============================================================
 * 61. ★ PC サイドバーロゴ(MORIOKA テキスト削除版)
 * ============================================================ */
.logo-section {
  margin: 0 0 16px;
  padding: 12px 0;
  display: flex;
  align-items: center;
  justify-content: center;     /* 中央配置 */
}
.logo-section a,
.logo-section .sidebar-logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  transition: background var(--transition-fast);
}
.logo-section a:hover {
  background: var(--bg-card-hover);
  filter: brightness(1.15) drop-shadow(0 0 12px rgba(0, 229, 255, 0.40));
}
.logo-section img {
  height: 56px !important;     /* 大きく */
  width: 56px !important;
  max-width: 56px;
  border-radius: 10px;
  filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.32));
  object-fit: cover;
}
.logo-section .logo-text {
  display: none !important;    /* 念のため、CSS でも非表示に */
}

/* タブレット幅では本来通り(中央配置維持) */
@media (max-width: 1279px) {
  .logo-section { padding: 10px 0; margin-bottom: 8px; }
  .logo-section a,
  .logo-section .sidebar-logo-link {
    width: 56px; height: 56px;
  }
  .logo-section img {
    height: 52px !important;
    width: 52px !important;
    max-width: 52px;
  }
}

/* ============================================================
 * 62. ★モバイルヘッダー: 元のサイズに戻し、ロゴを大きく中央配置
 * ============================================================ */
:root {
  --header-mobile-height: 56px;
}

.mobile-header {
  height: var(--header-mobile-height) !important;
}
.mobile-header-content {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  height: 100%;
  padding: 0 12px;
  gap: 8px;
}

/* 左: アバター(ドロワー開閉) */
.mobile-header-content .account-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-header-content .account-icon img,
.mobile-header-content .account-icon .avatar,
.mobile-header-content .account-icon .avatar-placeholder,
.mobile-header-content .account-icon-placeholder {
  width: 36px !important;
  height: 36px !important;
  max-width: 36px;
  max-height: 36px;
  font-size: 15px !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-primary);
  color: white;
  font-weight: 800;
  line-height: 1 !important;
  object-fit: cover;
}

/* 中央: ロゴ(大きく) */
.mobile-header-content .mobile-logo {
  display: flex;
  justify-content: center;
  align-items: center;
}
.mobile-header-content .mobile-logo a {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.mobile-header-content .mobile-logo img {
  height: 48px !important;     /* 大きく */
  width: auto !important;
  max-width: 220px;
  max-height: 48px;
  object-fit: contain;
  border: none !important;        /* 透過 PNG なので四角い枠は出さない */
  background: transparent !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.40));
}

/* 右: 投稿ボタン */
.mobile-header-content .post-button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
  flex-shrink: 0;
  line-height: 1;
}
.mobile-header-content .post-button:hover {
  filter: brightness(1.15);
}

/* ============================================================
 * 63. ★ サイドバーナビ(X 風)アイコンとラベル整列
 * ============================================================ */
.col-nav .nav-menu {
  padding: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.col-nav .nav-item {
  display: flex !important;
  align-items: center;
  gap: 16px;
  padding: 12px 14px !important;
  margin: 2px 0;
  border-radius: 9999px;
  font-size: 1.15rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--text-primary);
  transition: background var(--transition-fast);
}
.col-nav .nav-item:hover {
  background: var(--bg-card-hover);
}
.col-nav .nav-item.active {
  font-weight: 800;
}
.col-nav .nav-item .icon {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  flex-shrink: 0;
  position: relative;
}
.col-nav .nav-item .label {
  white-space: nowrap;
}

/* タブレット幅では label 非表示 (既存挙動維持) */
@media (max-width: 1279px) {
  .col-nav .nav-item {
    justify-content: center;
    padding: 12px !important;
    gap: 0;
  }
  .col-nav .nav-item .label,
  .col-nav .logo-section .logo-text {
    display: none;
  }
}

/* 「投稿する」ボタン */
.sidebar-actions {
  padding: 12px 8px;
  margin-top: 8px;
}
.sidebar-actions .btn-post-new {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--gradient-primary);
  color: white;
  padding: 14px 16px;
  border-radius: 9999px;
  font-weight: 800;
  font-size: 1.05rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: filter var(--transition-fast);
}
.sidebar-actions .btn-post-new:hover {
  filter: brightness(1.15);
}

@media (max-width: 1279px) {
  .sidebar-actions .btn-post-new {
    /* タブレット幅では円ボタン */
    width: 50px;
    height: 50px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    position: relative;
  }
  .sidebar-actions .btn-post-new::before {
    content: '+';
    font-size: 1.5rem;
  }
}

/* ============================================================
 * 64. ★ モバイルドロワー(X 風コンパクト)
 * ============================================================ */
.side-drawer {
  width: 80% !important;
  max-width: 290px !important;
}

.drawer-header {
  padding: 16px 16px 12px !important;
  border-bottom: 1px solid var(--border-primary);
}
.drawer-user-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.drawer-user-info .avatar,
.drawer-user-info .avatar-placeholder {
  width: 44px !important;
  height: 44px !important;
  margin-bottom: 8px;
  font-size: 18px !important;
  line-height: 1 !important;
}
.drawer-user-info .name {
  font-size: 0.95rem !important;
  font-weight: 800;
  line-height: 1.25;
}
.drawer-user-info .handle {
  font-size: 0.85rem !important;
  color: var(--text-muted);
  line-height: 1.25;
}

.drawer-menu {
  padding: 8px !important;
  gap: 0;
}
.drawer-menu-item {
  display: flex !important;
  align-items: center;
  gap: 14px !important;
  padding: 10px 14px !important;
  border-radius: 9999px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--text-primary);
  text-decoration: none;
  transition: background var(--transition-fast);
}
.drawer-menu-item:hover {
  background: var(--bg-card-hover) !important;
}
.drawer-menu-item .icon {
  width: 22px;
  height: 22px;
  font-size: 1.2rem !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.drawer-footer {
  padding: 12px 16px 16px !important;
  border-top: 1px solid var(--border-primary);
}
.drawer-footer .btn-block {
  font-size: 0.95rem !important;
  padding: 10px !important;
  border-radius: 9999px !important;
}

/* ============================================================
 * 65. ★ コンポーザのアイコン重なり修正(完全版)
 * ============================================================ */
.composer {
  padding: 12px 16px !important;
}
.composer-grid {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
}
.composer-grid > .composer-avatar {
  width: 44px !important;
  height: 44px !important;
  flex-shrink: 0;
  padding-top: 2px !important;
  align-self: start !important;
}
.composer-grid > .composer-avatar .avatar,
.composer-grid > .composer-avatar .avatar-placeholder {
  width: 44px !important;
  height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  font-size: 18px !important;
  line-height: 1 !important;
}
.composer-grid > .composer-main {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* スマホでのコンポーザ */
@media (max-width: 480px) {
  .composer { padding: 10px 12px !important; }
  .composer-grid {
    gap: 10px !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
  }
  .composer-grid > .composer-avatar { width: 40px !important; height: 40px !important; }
  .composer-grid > .composer-avatar .avatar,
  .composer-grid > .composer-avatar .avatar-placeholder {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    font-size: 16px !important;
    line-height: 1 !important;
  }
}


/* ============================================================
 * 66. ★緊急修正★ PC サイドバーロゴが切れる問題
 *
 *    s7 で 44x44px の正方形枠に押し込んでしまい、横長ロゴが
 *    切れていた。横長で表示し、高さは固定、幅は auto で取らせる。
 * ============================================================ */
.logo-section {
  margin: 0 0 12px !important;
  padding: 12px 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;  /* 左寄せ(ロゴが大きいので) */
}
.logo-section a,
.logo-section .sidebar-logo-link {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-decoration: none;
  color: inherit;
  width: auto !important;        /* 正方形枠を解除 */
  height: auto !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  transition: background var(--transition-fast);
}
.logo-section a:hover,
.logo-section .sidebar-logo-link:hover {
  background: var(--bg-card-hover);
  filter: brightness(1.15) drop-shadow(0 0 12px rgba(0, 229, 255, 0.40));
}
.logo-section img {
  height: 64px !important;       /* 大きく */
  width: auto !important;
  max-width: 200px !important;
  max-height: 64px !important;
  border-radius: 12px;
  object-fit: contain !important;
  filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.32));
}

/* タブレット幅(1279px 以下)は少し控えめに + 中央寄せ */
@media (max-width: 1279px) {
  .logo-section {
    justify-content: center !important;
    padding: 10px 0 !important;
  }
  .logo-section a,
  .logo-section .sidebar-logo-link {
    justify-content: center !important;
    padding: 6px !important;
  }
  .logo-section img {
    height: 56px !important;
    max-height: 56px !important;
    max-width: 56px !important;
    object-fit: cover !important;
  }
}


/* ============================================================
 * 67. ★鍵垢機能★ フォローリクエスト UI
 * ============================================================ */

/* notifications.php の notif-row を div ベースに */
.notif-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-secondary);
  transition: background var(--transition-fast);
  text-decoration: none;
  color: var(--text-primary);
  cursor: pointer;
}
.notif-row:hover {
  background: var(--bg-card-hover);
}
.notif-row.unread {
  background: rgba(0, 229, 255, 0.04);
}
.notif-row-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* 承認/拒否ボタンエリア: クリックを通知行の遷移より優先 */
.follow-request-actions {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-self: center;
}
.follow-request-actions .btn {
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--border-primary);
  background: transparent;
  color: var(--text-primary);
  transition: all var(--transition-fast);
}
.follow-request-actions .btn:hover {
  background: var(--bg-card-hover);
}
.follow-request-actions .btn-follow {
  background: var(--gradient-primary);
  color: white;
  border-color: transparent;
}
.follow-request-actions .btn-follow:hover {
  filter: brightness(1.15);
  background: var(--gradient-primary);
}
.follow-request-actions .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================
 * 68. ★ フォローリクエスト一覧ページ専用 ★
 * ============================================================ */
.follow-request-list {
  padding: 0;
}
.follow-request-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-secondary);
}
.follow-request-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-secondary);
  transition: background var(--transition-fast);
}
.follow-request-row:hover {
  background: var(--bg-card-hover);
}
.follow-request-user {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: var(--text-primary);
}
.follow-request-meta {
  flex: 1;
  min-width: 0;
}
.follow-request-name {
  font-weight: 800;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.follow-request-handle {
  font-size: 0.85rem;
}
.follow-request-time {
  font-size: 0.8rem;
  margin-top: 2px;
}

/* スマホ */
@media (max-width: 480px) {
  .follow-request-actions .btn {
    padding: 5px 10px;
    font-size: 0.8rem;
  }
}

/* ============================================================
 * 69. ★認証ページ★ ネオンダーク世界観の login/register/forgot/reset
 * ============================================================ */

body.auth-page {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(135deg, #0a0e2a 0%, #1a0f3a 50%, #070916 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Hiragino Sans', 'Helvetica Neue', sans-serif;
  color: var(--text-primary, white);
  position: relative;
  overflow-x: hidden;
}

/* 背景の光球 */
.auth-bg-orbs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.auth-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
}
.auth-orb.orb-purple {
  width: 400px; height: 400px;
  background: radial-gradient(circle, #7c4dff 0%, transparent 70%);
  top: 10%; left: -100px;
}
.auth-orb.orb-cyan {
  width: 500px; height: 500px;
  background: radial-gradient(circle, #00e5ff 0%, transparent 70%);
  bottom: 10%; right: -150px;
}
.auth-orb.orb-pink {
  width: 350px; height: 350px;
  background: radial-gradient(circle, #ff4d6d 0%, transparent 70%);
  top: 60%; left: 30%;
  opacity: 0.3;
}

/* メインカード */
.auth-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  padding: 24px;
}
.auth-card {
  background: rgba(15, 18, 50, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 48px 40px;
  border: 1px solid rgba(124, 77, 255, 0.30);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.40),
    0 0 100px rgba(124, 77, 255, 0.10);
}

/* ロゴ */
.auth-logo {
  text-align: center;
  margin-bottom: 32px;
}
.auth-logo a {
  display: inline-block;
  text-decoration: none;
}
.auth-logo img {
  height: 64px;
  width: auto;
  border-radius: 12px;
  filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.50));
  transition: filter 0.2s;
}
.auth-logo a:hover img {
  filter: drop-shadow(0 0 20px rgba(0, 229, 255, 0.80));
}

.auth-title {
  font-size: 1.8rem;
  font-weight: 900;
  margin: 0 0 12px;
  text-align: center;
  background: linear-gradient(90deg, #7c4dff 0%, #00e5ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.auth-subtitle {
  font-size: 0.95rem;
  color: #9ca5c4;
  text-align: center;
  margin: 0 0 32px;
  line-height: 1.6;
}

/* フォーム */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.auth-label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.auth-label-text {
  font-size: 0.8rem;
  font-weight: 700;
  color: #9ca5c4;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.auth-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.30);
  border: 1.5px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  padding: 14px 18px;
  color: white;
  font-size: 1rem;
  font-family: inherit;
  outline: none;
  transition: all 0.2s;
  box-sizing: border-box;
}
.auth-input::placeholder {
  color: #475066;
}
.auth-input:focus {
  border-color: #00e5ff;
  background: rgba(0, 0, 0, 0.50);
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.15);
}

/* ボタン */
.auth-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: linear-gradient(90deg, #7c4dff 0%, #00e5ff 50%, #00ff9d 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  color: white;
  font-weight: 800;
  font-size: 1.05rem;
  padding: 16px;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.3s;
  margin-top: 8px;
  font-family: inherit;
}
.auth-btn-primary:hover {
  background-position: 100% 50%;
  filter: brightness(1.1);
  box-shadow: 0 8px 24px rgba(0, 229, 255, 0.30);
  transform: translateY(-1px);
}
.auth-btn-primary:active {
  transform: translateY(0);
}

/* 仕切り */
.auth-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  margin: 32px 0 24px;
}

/* フッター */
.auth-footer {
  text-align: center;
}
.auth-link {
  color: #00e5ff;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: filter 0.2s;
}
.auth-link:hover {
  filter: brightness(1.3);
}

/* フラッシュメッセージ */
.auth-page .flash {
  padding: 14px 18px;
  border-radius: 12px;
  margin: 0 0 20px;
  font-size: 0.9rem;
  line-height: 1.5;
}
.auth-page .flash.ng {
  background: rgba(255, 77, 109, 0.12);
  color: #ff8a9d;
  border: 1px solid rgba(255, 77, 109, 0.30);
}
.auth-page .flash.ok {
  background: rgba(0, 255, 157, 0.10);
  color: #5fffc1;
  border: 1px solid rgba(0, 255, 157, 0.30);
}

/* スマホ対応 */
@media (max-width: 480px) {
  .auth-wrap { padding: 16px; }
  .auth-card { padding: 32px 24px; border-radius: 20px; }
  .auth-title { font-size: 1.5rem; }
  .auth-logo img { height: 56px; }
}

/* ============================================================
 * 70. ★パスワード再設定★ アカウント候補リスト(Step 2)
 * ============================================================ */
.auth-account-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0 24px;
  max-height: 60vh;
  overflow-y: auto;
  /* スクロールバー */
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 77, 255, 0.40) transparent;
}
.auth-account-list::-webkit-scrollbar {
  width: 6px;
}
.auth-account-list::-webkit-scrollbar-thumb {
  background: rgba(124, 77, 255, 0.40);
  border-radius: 3px;
}

.auth-account-row {
  margin: 0;
}

.auth-account-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.30);
  border: 1.5px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  color: white;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}
.auth-account-btn:hover {
  border-color: rgba(0, 229, 255, 0.50);
  background: rgba(0, 229, 255, 0.06);
  transform: translateX(2px);
}
.auth-account-btn:focus {
  outline: none;
  border-color: #00e5ff;
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.15);
}

.auth-account-handle {
  font-size: 1rem;
  font-weight: 800;
  flex-shrink: 0;
}
.auth-account-mail {
  flex: 1;
  font-size: 0.85rem;
  color: #9ca5c4;
  text-align: right;
  font-family: 'SF Mono', monospace;
  letter-spacing: 0.5px;
}
.auth-account-arrow {
  color: #00e5ff;
  font-size: 0.9rem;
  flex-shrink: 0;
}

/* スマホ対応 */
@media (max-width: 480px) {
  .auth-account-btn {
    padding: 12px 14px;
    flex-wrap: wrap;
  }
  .auth-account-mail {
    text-align: left;
    font-size: 0.8rem;
    width: 100%;
  }
  .auth-account-arrow {
    display: none;
  }
}

/* ============================================================
 * 71. ★X風 認証ページ★ ログイン/登録 - 2カラム + 花火背景
 * ============================================================ */

/* 既存 .auth-page 上書き(X 風 2 カラムレイアウト用) */
body.auth-x-layout {
  margin: 0;
  min-height: 100vh;
  background: #050714;
  background-image:
    radial-gradient(ellipse at 20% 30%, rgba(124, 77, 255, 0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(0, 229, 255, 0.10) 0%, transparent 50%),
    linear-gradient(180deg, #0a0e2a 0%, #050714 100%);
  display: block;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  font-family: 'Hiragino Sans', 'Helvetica Neue', sans-serif;
  color: white;
  overflow-x: hidden;
}

/* 2 カラムグリッド */
.auth-x-container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  min-height: 100vh;
  max-width: 1400px;
  margin: 0 auto;
}

/* ====== 左: ブランドビジュアル ====== */
.auth-x-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 60px;
  position: relative;
}
.auth-x-hero-content {
  max-width: 520px;
  position: relative;
  z-index: 2;
}
.auth-x-logo {
  margin-bottom: 32px;
}
.auth-x-logo img {
  height: 80px;
  width: auto;
  border-radius: 16px;
  filter: drop-shadow(0 0 24px rgba(0, 229, 255, 0.60));
  animation: auth-logo-pulse 4s ease-in-out infinite;
}
@keyframes auth-logo-pulse {
  0%, 100% { filter: drop-shadow(0 0 24px rgba(0, 229, 255, 0.60)); }
  50%      { filter: drop-shadow(0 0 36px rgba(124, 77, 255, 0.70)); }
}

.auth-x-brand {
  font-size: 5.5rem;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -3px;
  margin: 0 0 24px;
  color: white;
  text-shadow: 0 0 40px rgba(124, 77, 255, 0.30);
}
.auth-x-brand-plus {
  background: linear-gradient(90deg, #7c4dff 0%, #00e5ff 50%, #00ff9d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 24px rgba(0, 229, 255, 0.40));
}

.auth-x-tagline {
  font-size: 1.6rem;
  font-weight: 700;
  color: #cdd5e8;
  line-height: 1.4;
  margin: 0 0 48px;
}
.auth-x-tagline strong {
  background: linear-gradient(90deg, #00e5ff, #00ff9d);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
}

.auth-x-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.auth-x-feature {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 1.05rem;
  font-weight: 600;
  color: #cdd5e8;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(124, 77, 255, 0.15);
  transition: all 0.3s;
}
.auth-x-feature:hover {
  background: rgba(124, 77, 255, 0.10);
  border-color: rgba(0, 229, 255, 0.40);
  transform: translateX(4px);
}
.auth-x-feature i {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c4dff, #00e5ff);
  color: white;
  flex-shrink: 0;
}

/* ====== 右: フォームパネル ====== */
.auth-x-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 60px;
  position: relative;
}
.auth-x-form-wrap {
  width: 100%;
  max-width: 420px;
  background: rgba(15, 18, 50, 0.55);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 24px;
  padding: 40px 36px;
  border: 1px solid rgba(124, 77, 255, 0.30);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.40),
    0 0 80px rgba(124, 77, 255, 0.08);
}

.auth-x-title {
  font-size: 2rem;
  font-weight: 900;
  margin: 0 0 6px;
  color: white;
}
.auth-x-subtitle {
  font-size: 0.95rem;
  color: #9ca5c4;
  margin: 0 0 28px;
}

/* ====== 入力フィールド ====== */
.auth-input-wrap {
  position: relative;
}
.auth-input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7aa1;
  font-size: 1rem;
  pointer-events: none;
  transition: color 0.2s;
}
.auth-input-wrap:focus-within .auth-input-icon {
  color: #00e5ff;
}
.auth-input.has-icon {
  padding-left: 44px;
}
.auth-input.has-toggle {
  padding-right: 44px;
}
.auth-input-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #6b7aa1;
  font-size: 1rem;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: color 0.2s, background 0.2s;
}
.auth-input-toggle:hover {
  color: white;
  background: rgba(255, 255, 255, 0.08);
}

/* ====== 行間配置(右寄せリンクなど) ====== */
.auth-row-between {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: -8px 0 4px;
}
.auth-link-sm {
  font-size: 0.85rem;
  font-weight: 600;
}

/* ====== Secondary ボタン(新規登録) ====== */
.auth-btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  color: #00e5ff;
  font-weight: 800;
  font-size: 1rem;
  padding: 14px;
  border: 1.5px solid rgba(0, 229, 255, 0.50);
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  font-family: inherit;
  margin-top: 12px;
}
.auth-btn-secondary:hover {
  background: rgba(0, 229, 255, 0.08);
  border-color: #00e5ff;
  box-shadow: 0 4px 16px rgba(0, 229, 255, 0.20);
  transform: translateY(-1px);
}

/* ====== Divider with text ====== */
.auth-divider {
  position: relative;
  text-align: center;
  margin: 28px 0 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
}
.auth-divider span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(15, 18, 50, 0.95);
  padding: 0 16px;
  color: #6b7aa1;
  font-size: 0.85rem;
  font-weight: 600;
}

.auth-x-foot {
  margin-top: 20px;
  text-align: center;
  font-size: 0.8rem;
  color: #6b7aa1;
  line-height: 1.6;
}
.auth-link-tiny {
  color: #9ca5c4;
  text-decoration: underline;
}

/* ====== レスポンシブ: タブレット幅 ====== */
@media (max-width: 1024px) {
  .auth-x-container {
    grid-template-columns: 1fr;
  }
  .auth-x-hero {
    padding: 60px 40px 0;
    min-height: auto;
  }
  .auth-x-hero-content {
    max-width: 600px;
    text-align: center;
    margin: 0 auto;
  }
  .auth-x-brand {
    font-size: 4rem;
    text-align: center;
  }
  .auth-x-tagline {
    font-size: 1.3rem;
    text-align: center;
  }
  .auth-x-features {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
  .auth-x-feature {
    padding: 10px 14px;
    font-size: 0.95rem;
  }
  .auth-x-panel {
    padding: 32px 24px 60px;
  }
}

/* ====== レスポンシブ: スマホ ====== */
@media (max-width: 600px) {
  .auth-x-hero {
    padding: 40px 20px 0;
  }
  .auth-x-logo img {
    height: 60px;
  }
  .auth-x-brand {
    font-size: 3rem;
    letter-spacing: -2px;
  }
  .auth-x-tagline {
    font-size: 1.1rem;
    margin-bottom: 32px;
  }
  .auth-x-features {
    flex-direction: column;
  }
  .auth-x-feature {
    width: 100%;
    box-sizing: border-box;
  }
  .auth-x-panel {
    padding: 24px 16px 40px;
  }
  .auth-x-form-wrap {
    padding: 32px 24px;
    border-radius: 20px;
  }
  .auth-x-title {
    font-size: 1.5rem;
  }
}

/* 花火 Canvas は最下層 */
#morioka-fireworks-canvas {
  z-index: 0 !important;
}

/* 既存の orb は花火の上に薄く重ねる */
body.auth-x-layout .auth-bg-orbs {
  z-index: 1;
}

/* ============================================================
 * 72. ★認証ページ修正★ Morioka Portal+ 表記 + 入力被り + 特長カード
 * ============================================================ */

/* === 1. 入力欄の @ アイコンと placeholder の被り修正 === */
.auth-input-wrap .auth-input.has-icon {
  padding-left: 52px !important;
}
.auth-input-icon {
  left: 18px !important;
  font-size: 1.05rem !important;
}

/* === 2. ブランド表記 (Morioka Portal+) を普通サイズに === */
.auth-x-brand {
  font-size: 4rem !important;
  letter-spacing: -1.5px !important;
  text-transform: none !important;
  line-height: 1 !important;
  font-weight: 900;
  margin: 0 0 28px !important;
}
.auth-x-brand-plus {
  text-transform: none !important;
}

/* === 3. キャッチコピー(スローガン) === */
.auth-x-tagline {
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  line-height: 1.7 !important;
  color: #cdd5e8 !important;
  margin: 0 0 40px !important;
  letter-spacing: 0.01em;
}
.auth-x-tagline strong {
  background: none !important;
  -webkit-text-fill-color: white !important;
  color: white !important;
  font-weight: 800;
}

/* === 4. 特長カード(2行構造)=== */
.auth-x-feature {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 18px !important;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 14px;
  border: 1px solid rgba(124, 77, 255, 0.18);
  transition: all 0.3s;
}
.auth-x-feature:hover {
  background: rgba(124, 77, 255, 0.08);
  border-color: rgba(0, 229, 255, 0.40);
  transform: translateX(4px);
}
.auth-x-feature i {
  width: 40px !important;
  height: 40px !important;
  font-size: 1.15rem !important;
  flex-shrink: 0;
  margin-top: 2px;
}
.auth-x-feature-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.auth-x-feature-text strong {
  font-size: 1rem;
  font-weight: 800;
  color: white;
  line-height: 1.2;
}
.auth-x-feature-text span {
  font-size: 0.85rem;
  color: #9ca5c4;
  line-height: 1.4;
  font-weight: 400;
}

/* スマホでスローガン少し小さく */
@media (max-width: 600px) {
  .auth-x-brand {
    font-size: 2.5rem !important;
  }
  .auth-x-tagline {
    font-size: 1rem !important;
  }
  .auth-x-feature i {
    width: 36px !important;
    height: 36px !important;
    font-size: 1rem !important;
  }
}

/* ============================================================
 * 73. ★利用規約・プライバシーポリシー★ ネオンダーク
 * ============================================================ */

body.legal-page {
  margin: 0;
  min-height: 100vh;
  background: #050714;
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(124, 77, 255, 0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(0, 229, 255, 0.10) 0%, transparent 50%),
    linear-gradient(180deg, #0a0e2a 0%, #050714 100%);
  font-family: 'Hiragino Sans', 'Helvetica Neue', sans-serif;
  color: white;
  overflow-x: hidden;
}

.legal-bg-orbs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.legal-bg-orbs .auth-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.35;
}

.legal-wrap {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}

/* ヘッダー */
.legal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
}
.legal-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: white;
  font-weight: 800;
  font-size: 1.05rem;
}
.legal-logo img {
  height: 40px;
  width: auto;
  border-radius: 10px;
  filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.40));
}
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 9999px;
  color: white;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.2s;
}
.legal-back:hover {
  background: rgba(0, 229, 255, 0.10);
  border-color: rgba(0, 229, 255, 0.40);
}

/* メインカード */
.legal-card {
  background: rgba(15, 18, 50, 0.65);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 24px;
  padding: 48px 48px 40px;
  border: 1px solid rgba(124, 77, 255, 0.30);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.40);
}

.legal-meta {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.legal-tag {
  display: inline-block;
  background: linear-gradient(90deg, #7c4dff, #00e5ff);
  color: white;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 1px;
}
.legal-date {
  color: #6b7aa1;
  font-size: 0.85rem;
}

.legal-title {
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0 0 16px;
  background: linear-gradient(135deg, #ffffff 0%, #cdd5e8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.legal-subtitle {
  font-size: 1.05rem;
  color: #cdd5e8;
  line-height: 1.7;
  margin: 0 0 40px;
}

/* プライバシー: 3 つの約束カード */
.legal-promise {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 40px;
}
.legal-promise-item {
  background: rgba(0, 229, 255, 0.06);
  border: 1px solid rgba(0, 229, 255, 0.30);
  border-radius: 14px;
  padding: 20px 16px;
  text-align: center;
}
.legal-promise-item i {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c4dff, #00e5ff);
  color: white;
  margin-bottom: 10px;
}
.legal-promise-item strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: 6px;
}
.legal-promise-item p {
  margin: 0;
  font-size: 0.8rem;
  color: #9ca5c4;
  line-height: 1.5;
}

/* 目次 */
.legal-toc {
  background: rgba(124, 77, 255, 0.06);
  border: 1px solid rgba(124, 77, 255, 0.20);
  border-radius: 16px;
  padding: 24px 28px;
  margin-bottom: 40px;
}
.legal-toc h2 {
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 12px;
  color: #00e5ff;
  letter-spacing: 1px;
}
.legal-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
  counter-reset: toc-counter;
}
.legal-toc ol li {
  counter-increment: toc-counter;
}
.legal-toc ol li a {
  color: #cdd5e8;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s;
}
.legal-toc ol li a:hover {
  color: #00e5ff;
}

/* 各セクション */
.legal-section {
  margin: 40px 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.legal-section:first-of-type {
  border-top: none;
}
.legal-section h2 {
  font-size: 1.4rem;
  font-weight: 900;
  margin: 0 0 16px;
  color: white;
  position: relative;
  padding-left: 16px;
}
.legal-section h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 4px;
  height: 22px;
  background: linear-gradient(180deg, #7c4dff, #00e5ff);
  border-radius: 2px;
}
.legal-section h3 {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 24px 0 8px;
  color: #cdd5e8;
}
.legal-section p {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #cdd5e8;
  margin: 0 0 16px;
}
.legal-section p strong {
  color: white;
  font-weight: 800;
}
.legal-section ul {
  padding-left: 0;
  margin: 0 0 16px;
  list-style: none;
}
.legal-section ul li {
  position: relative;
  padding: 6px 0 6px 22px;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #cdd5e8;
}
.legal-section ul li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 16px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00e5ff;
}
.legal-section code {
  background: rgba(0, 229, 255, 0.10);
  color: #00e5ff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.85rem;
  font-family: 'SF Mono', monospace;
}

/* 禁止事項グリッド */
.legal-prohibited-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0;
}
.legal-prohibited {
  background: rgba(255, 77, 109, 0.05);
  border: 1px solid rgba(255, 77, 109, 0.25);
  border-radius: 12px;
  padding: 16px 18px;
}
.legal-prohibited i {
  display: inline-block;
  color: #ff8a9d;
  font-size: 1.1rem;
  margin-right: 8px;
}
.legal-prohibited strong {
  display: inline;
  color: white;
  font-weight: 800;
  font-size: 0.95rem;
}
.legal-prohibited p {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: #9ca5c4;
  line-height: 1.5;
}

/* フッター */
.legal-footer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  text-align: center;
}
.legal-footer p {
  margin: 4px 0;
  font-size: 0.85rem;
  color: #6b7aa1;
}

.legal-cta {
  margin-top: 32px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.legal-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(124, 77, 255, 0.30);
  border-radius: 9999px;
  color: white;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 700;
  transition: all 0.2s;
}
.legal-link-btn:hover {
  background: rgba(124, 77, 255, 0.15);
  border-color: rgba(0, 229, 255, 0.50);
  transform: translateY(-2px);
}

/* レスポンシブ */
@media (max-width: 720px) {
  .legal-card { padding: 32px 24px; }
  .legal-title { font-size: 1.8rem; }
  .legal-subtitle { font-size: 0.95rem; }
  .legal-promise { grid-template-columns: 1fr; }
  .legal-toc ol { grid-template-columns: 1fr; }
  .legal-prohibited-grid { grid-template-columns: 1fr; }
  .legal-section h2 { font-size: 1.2rem; }
  .legal-header { flex-direction: column; gap: 12px; }
}

/* ============================================================
 * 74. ★スマホ版 login 改善★ コンパクト・自然・上品
 * ============================================================ */

/* タブレット(601〜1024px)では既存のまま */

/* スマホ(600px 以下)で大幅にコンパクト化 */
@media (max-width: 600px) {

  /* ===== Hero 全体を圧縮 ===== */
  .auth-x-hero {
    padding: 24px 20px 12px !important;  /* 60px → 24px */
    min-height: auto;
  }
  .auth-x-hero-content {
    text-align: center;
    max-width: 100%;
  }

  /* ===== ロゴを小さく ===== */
  .auth-x-logo {
    margin-bottom: 14px !important;       /* 32px → 14px */
  }
  .auth-x-logo img {
    height: 56px !important;              /* 80px → 56px */
    border-radius: 12px;
  }

  /* ===== ブランド名 (Morioka Portal+) を 1 行に詰める ===== */
  .auth-x-brand {
    font-size: 2rem !important;           /* 2.5rem → 2rem */
    letter-spacing: -1px !important;
    margin: 0 0 14px !important;          /* 28px → 14px */
    line-height: 1.05 !important;
  }
  .auth-x-brand br {
    display: none;                         /* 改行を消して 1 行に */
  }
  .auth-x-brand-plus {
    margin-left: 6px;
  }

  /* ===== スローガン圧縮 ===== */
  .auth-x-tagline {
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
    margin: 0 0 22px !important;          /* 40px → 22px */
    color: #b8c1d9 !important;
  }

  /* ===== 特長カードをコンパクトに ===== */
  .auth-x-features {
    gap: 8px !important;                   /* 16px → 8px */
  }
  .auth-x-feature {
    padding: 11px 14px !important;        /* 14px 18px → 11px 14px */
    text-align: left;
    gap: 12px !important;
    border-radius: 12px;
  }
  .auth-x-feature i {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.9rem !important;
    margin-top: 0 !important;
  }
  .auth-x-feature-text strong {
    font-size: 0.92rem !important;
    line-height: 1.2;
  }
  .auth-x-feature-text span {
    font-size: 0.78rem !important;
    line-height: 1.3;
  }

  /* ===== 右パネル(フォーム)も padding 圧縮 ===== */
  .auth-x-panel {
    padding: 20px 16px 32px !important;   /* 32px 24px 60px → 20px 16px 32px */
  }
  .auth-x-form-wrap {
    padding: 26px 22px !important;        /* 32px 24px → 26px 22px */
  }
  .auth-x-title {
    font-size: 1.4rem !important;
    margin: 0 0 4px !important;
  }
  .auth-x-subtitle {
    font-size: 0.85rem !important;
    margin: 0 0 22px !important;
  }
}

/* ===== さらに小さい画面(iPhone SE など, 380px 以下)===== */
@media (max-width: 380px) {
  .auth-x-brand {
    font-size: 1.7rem !important;
  }
  .auth-x-tagline {
    font-size: 0.88rem !important;
  }
  .auth-x-feature-text strong {
    font-size: 0.88rem !important;
  }
  .auth-x-feature-text span {
    font-size: 0.74rem !important;
  }
}

/* ============================================================
 * 75. ★X 風 サイドドロワー★ コンパクト・密度感・アカウント切替
 * ============================================================ */

/* ===== オーバーレイ ===== */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* ===== サイドドロワー本体 ===== */
.side-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 80vw;
  max-width: 320px;
  background: linear-gradient(180deg, #0a0e2a 0%, #050714 100%);
  border-right: 1px solid rgba(124, 77, 255, 0.20);
  box-shadow: 6px 0 32px rgba(0, 0, 0, 0.50);
  z-index: 999;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  /* スクロールバー */
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 77, 255, 0.30) transparent;
}
.side-drawer::-webkit-scrollbar {
  width: 4px;
}
.side-drawer::-webkit-scrollbar-thumb {
  background: rgba(124, 77, 255, 0.30);
  border-radius: 2px;
}
.side-drawer.open {
  transform: translateX(0);
}

/* ===== ドロワーヘッダー(アバター + 名前 + 切替アイコン)===== */
.drawer-header {
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: background 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.drawer-header:hover,
.drawer-header:active {
  background: rgba(124, 77, 255, 0.08);
}
.drawer-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.drawer-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid rgba(0, 229, 255, 0.30);
  background: rgba(124, 77, 255, 0.20);
  display: flex;
  align-items: center;
  justify-content: center;
}
.drawer-avatar-placeholder {
  background: linear-gradient(135deg, #7c4dff, #00e5ff);
  color: white;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
}
.drawer-user-text {
  flex: 1;
  min-width: 0;
}
.drawer-user-name {
  font-weight: 800;
  color: white;
  font-size: 0.95rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drawer-user-handle {
  font-size: 0.8rem;
  color: #7a8aaf;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drawer-account-toggle {
  color: #7a8aaf;
  font-size: 0.85rem;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.drawer-account-toggle.rotated {
  transform: rotate(180deg);
  color: #00e5ff;
}

/* ===== アカウント切り替えメニュー ===== */
.drawer-account-menu {
  background: rgba(124, 77, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 8px 0;
}

.drawer-account-current {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  margin-bottom: 4px;
}
.drawer-mini-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
}
.drawer-account-info {
  flex: 1;
  min-width: 0;
}
.drawer-account-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: white;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drawer-account-handle {
  font-size: 0.75rem;
  color: #7a8aaf;
  margin-top: 1px;
}
.drawer-current-mark {
  color: #00e5ff;
  font-size: 1rem;
  flex-shrink: 0;
}

.drawer-account-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  color: #cdd5e8;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.drawer-account-action:hover,
.drawer-account-action:active {
  background: rgba(124, 77, 255, 0.10);
}
.drawer-account-action i {
  width: 20px;
  text-align: center;
  font-size: 0.95rem;
  color: #00e5ff;
}
.drawer-account-action-danger {
  color: #ff8a9d;
}
.drawer-account-action-danger i {
  color: #ff4d6d;
}

/* ===== メニュー(X 風コンパクト)===== */
.drawer-menu {
  padding: 6px 0;
  flex: 1;
}
.drawer-menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;       /* X 風: 上下 11px のみ(以前は余白多すぎた)*/
  color: white;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 700;
  transition: background 0.15s;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.drawer-menu-item:hover,
.drawer-menu-item:active {
  background: rgba(124, 77, 255, 0.10);
}
.drawer-menu-item .icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.drawer-menu-item .icon i {
  font-size: 1.15rem;
  color: white;
}
.drawer-menu-item .notification-badge {
  position: absolute;
  top: -4px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  border-radius: 9999px;
  background: #ff4d6d;
  color: white;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ===== フッター(ログアウト)===== */
.drawer-footer {
  padding: 14px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: auto;
}
.drawer-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  background: rgba(255, 77, 109, 0.10);
  color: #ff8a9d;
  text-align: center;
  text-decoration: none;
  border: 1px solid rgba(255, 77, 109, 0.30);
  border-radius: 9999px;
  font-weight: 800;
  font-size: 0.92rem;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}
.drawer-logout-btn:hover,
.drawer-logout-btn:active {
  background: rgba(255, 77, 109, 0.18);
  border-color: rgba(255, 77, 109, 0.50);
}

/* ===== タブレット/PC では非表示(モバイル限定) ===== */
@media (min-width: 769px) {
  .side-drawer,
  .drawer-overlay {
    display: none !important;
  }
}

/* ============================================================
 * 76. ★ドロワー 1.5倍 拡大★ より見やすく押しやすく
 * ============================================================ */

/* ===== ドロワー全体を少し広げる ===== */
.side-drawer {
  width: 86vw !important;
  max-width: 380px !important;
}

/* ===== ヘッダー: アバター + 名前を大きく ===== */
.drawer-header {
  padding: 22px 20px 18px !important;
}
.drawer-user-info {
  gap: 14px !important;
}
.drawer-avatar {
  width: 56px !important;
  height: 56px !important;
  border-width: 2px !important;
}
.drawer-avatar-placeholder {
  font-size: 1.4rem !important;
}
.drawer-user-name {
  font-size: 1.25rem !important;     /* 0.95rem → 1.25rem */
  line-height: 1.25 !important;
}
.drawer-user-handle {
  font-size: 1rem !important;        /* 0.8rem → 1rem */
  margin-top: 4px !important;
}
.drawer-account-toggle {
  font-size: 1.1rem !important;
}

/* ===== アカウント切替メニュー ===== */
.drawer-account-current {
  padding: 14px 20px !important;
  gap: 14px !important;
}
.drawer-mini-avatar {
  width: 44px !important;
  height: 44px !important;
  font-size: 1.05rem !important;
}
.drawer-account-name {
  font-size: 1.05rem !important;
}
.drawer-account-handle {
  font-size: 0.95rem !important;
  margin-top: 3px !important;
}
.drawer-current-mark {
  font-size: 1.3rem !important;
}
.drawer-account-action {
  padding: 16px 20px !important;
  font-size: 1.05rem !important;
  gap: 16px !important;
}
.drawer-account-action i {
  width: 26px !important;
  font-size: 1.2rem !important;
}

/* ===== メニュー項目: 1.5倍に拡大 ===== */
.drawer-menu {
  padding: 10px 0 !important;
}
.drawer-menu-item {
  padding: 16px 22px !important;     /* 11px 16px → 16px 22px */
  gap: 22px !important;              /* 14px → 22px */
  font-size: 1.35rem !important;     /* 1rem → 1.35rem(★1.35倍)*/
  font-weight: 700 !important;
}
.drawer-menu-item .icon {
  width: 30px !important;            /* 22px → 30px */
  height: 30px !important;
}
.drawer-menu-item .icon i {
  font-size: 1.55rem !important;     /* 1.15rem → 1.55rem(★大きく)*/
}
.drawer-menu-item .notification-badge {
  min-width: 20px !important;
  height: 20px !important;
  font-size: 0.75rem !important;
  top: -6px !important;
  right: -10px !important;
}

/* ===== フッター(ログアウト) ===== */
.drawer-footer {
  padding: 18px 20px !important;
}
.drawer-logout-btn {
  padding: 14px !important;
  font-size: 1.05rem !important;
  gap: 12px !important;
}
.drawer-logout-btn i {
  font-size: 1.1rem !important;
}

/* ============================================================
 * 77. ★ドロワー幅 圧縮★ 文字は大きいまま、幅だけ詰める
 * ============================================================ */

/* ===== ドロワー幅を抑える ===== */
.side-drawer {
  width: 75vw !important;
  max-width: 300px !important;
}

/* ===== ヘッダー ===== */
.drawer-header {
  padding: 16px 16px 14px !important;
}
.drawer-user-info {
  gap: 12px !important;
}
.drawer-avatar {
  width: 48px !important;
  height: 48px !important;
}
.drawer-avatar-placeholder {
  font-size: 1.2rem !important;
}
.drawer-user-name {
  font-size: 1.05rem !important;     /* 1.25rem → 1.05rem(少し小さく)*/
}
.drawer-user-handle {
  font-size: 0.88rem !important;
  margin-top: 2px !important;
}

/* ===== アカウント切替メニュー ===== */
.drawer-account-current {
  padding: 12px 16px !important;
  gap: 12px !important;
}
.drawer-mini-avatar {
  width: 38px !important;
  height: 38px !important;
  font-size: 0.95rem !important;
}
.drawer-account-name {
  font-size: 0.95rem !important;
}
.drawer-account-handle {
  font-size: 0.8rem !important;
}
.drawer-account-action {
  padding: 13px 16px !important;
  font-size: 0.95rem !important;
  gap: 14px !important;
}
.drawer-account-action i {
  width: 22px !important;
  font-size: 1.05rem !important;
}

/* ===== メニュー項目: 幅圧縮、文字は大きいまま ===== */
.drawer-menu {
  padding: 6px 0 !important;
}
.drawer-menu-item {
  padding: 14px 18px !important;     /* 16px 22px → 14px 18px(幅圧縮)*/
  gap: 18px !important;              /* 22px → 18px */
  font-size: 1.2rem !important;      /* 1.35rem → 1.2rem(少し抑える)*/
}
.drawer-menu-item .icon {
  width: 26px !important;
  height: 26px !important;
}
.drawer-menu-item .icon i {
  font-size: 1.4rem !important;      /* 1.55rem → 1.4rem(少し抑える)*/
}
.drawer-menu-item .notification-badge {
  min-width: 18px !important;
  height: 18px !important;
  font-size: 0.7rem !important;
  top: -5px !important;
  right: -8px !important;
}

/* ===== フッター ===== */
.drawer-footer {
  padding: 14px 16px !important;
}
.drawer-logout-btn {
  padding: 11px !important;
  font-size: 0.95rem !important;
}
.drawer-logout-btn i {
  font-size: 1rem !important;
}

/* ============================================================
 * 78. ★マルチアカウント★ ドロワー他アカウント切替
 * ============================================================ */
.drawer-account-other {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  text-decoration: none;
  color: #cdd5e8;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.drawer-account-other:hover,
.drawer-account-other:active {
  background: rgba(0, 229, 255, 0.08);
}
.drawer-switch-icon {
  color: #7a8aaf;
  font-size: 0.95rem;
  flex-shrink: 0;
  transition: color 0.15s;
}
.drawer-account-other:hover .drawer-switch-icon,
.drawer-account-other:active .drawer-switch-icon {
  color: #00e5ff;
}

/* ============================================================
 * 79. ★コンポーザ修正★ placeholder 余白 + 1行自動拡張 + 下マージン削除
 * ============================================================ */

/* textarea: 内側余白を増やす(placeholder が枠ギリギリにならないように) */
.composer-textarea {
  padding: 12px 16px !important;       /* 内側余白 */
  min-height: 44px !important;          /* 1行ぶん */
  line-height: 1.5 !important;
  resize: none !important;              /* 手動リサイズ無効 */
  overflow-y: hidden !important;        /* 自動拡張するのでスクロールバー隠す */
  font-size: 1rem !important;
  border-radius: 12px !important;
  transition: height 0.1s ease;
}
.composer-textarea::placeholder {
  color: var(--text-muted, #6b7aa1);
  opacity: 0.85;
}

/* textarea 周辺の下マージン削除 */
.composer-input,
.composer-main {
  margin-bottom: 0 !important;
}

/* アクション行: textarea との隙間を詰める */
.composer-actions {
  margin-top: 8px !important;            /* 大きすぎる余白を圧縮 */
  padding-top: 8px !important;           /* 区切り線の上下を最小化 */
}

/* アクション行の上の区切り線が太いなら細く */
.composer-actions {
  border-top-width: 1px;
}

/* スマホでも同じ */
@media (max-width: 600px) {
  .composer-textarea {
    padding: 10px 14px !important;
    font-size: 0.95rem !important;
  }
  .composer-actions {
    margin-top: 6px !important;
    padding-top: 6px !important;
  }
}

/* ============================================================
 * 80. ★コンポーザ余白削除★ hidden 要素を確実に隠す
 * ============================================================ */

/* hidden 属性が効かない問題の修正(最重要) */
.upload-preview-grid[hidden],
.upload-progress[hidden],
[hidden] {
  display: none !important;
}

/* upload-preview-grid: hidden でないとき以外は margin を 0 に */
.upload-preview-grid:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.composer-grid .upload-preview-grid:empty,
.composer-grid .upload-preview-grid[hidden] {
  margin: 0 !important;
  padding: 0 !important;
}

/* composer-main の gap を圧縮(textarea とアクションの間)*/
.composer-main {
  gap: 4px !important;
}

/* composer-actions の padding-top を最小化 */
.composer-actions {
  padding-top: 4px !important;
  margin-top: 0 !important;
}

/* ============================================================
 * 81. ★PC アカウント切替★ サイドバー下部 + ポップオーバー
 * ============================================================ */

/* === PC ONLY: Account section layout === */
@media (min-width: 768px) {
  .col-nav.sidebar-nav,
  .col-nav .sidebar-nav {
    display: flex;
    flex-direction: column;
  }
  .col-nav .nav-menu {
    flex: 1;
  }
}

/* === アカウント表示エリア === */
.sidebar-account-section {
  position: relative;
  margin-top: auto;
  padding: 8px 8px 12px;
}

.sidebar-account-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9999px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all 0.15s;
  color: inherit;
}
.sidebar-account-card:hover,
.sidebar-account-card.open {
  background: rgba(124, 77, 255, 0.10);
  border-color: rgba(124, 77, 255, 0.20);
}

.sidebar-account-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(0, 229, 255, 0.30);
}
.sidebar-account-avatar-placeholder {
  background: linear-gradient(135deg, #7c4dff, #00e5ff);
  color: white;
  font-weight: 800;
  font-size: 1rem;
}

.sidebar-account-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.sidebar-account-name {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text-primary, white);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-account-handle {
  font-size: 0.85rem;
  color: var(--text-muted, #7a8aaf);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-account-more {
  color: var(--text-muted, #7a8aaf);
  flex-shrink: 0;
  font-size: 0.95rem;
}

/* === ポップオーバーメニュー === */
.sidebar-account-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 8px;
  right: 8px;
  background: rgba(15, 18, 50, 0.98);
  border: 1px solid rgba(124, 77, 255, 0.30);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.50);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 100;
  padding: 8px 0;
  max-height: 70vh;
  overflow-y: auto;
  animation: popoverFadeIn 0.18s ease;
}
@keyframes popoverFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.popover-current-account,
.popover-other-account {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  text-decoration: none;
  color: var(--text-primary, white);
  transition: background 0.15s;
}
.popover-other-account:hover {
  background: rgba(0, 229, 255, 0.06);
}
.popover-current-account {
  background: rgba(124, 77, 255, 0.06);
}

.popover-mini-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.popover-avatar-placeholder {
  background: linear-gradient(135deg, #7c4dff, #00e5ff);
  color: white;
  font-weight: 800;
  font-size: 0.95rem;
}
.popover-account-info {
  flex: 1;
  min-width: 0;
}
.popover-account-name {
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.2;
  color: var(--text-primary, white);
}
.popover-account-handle {
  font-size: 0.82rem;
  color: var(--text-muted, #7a8aaf);
  margin-top: 2px;
}
.popover-current-mark {
  color: #00e5ff;
  font-size: 1.1rem;
}
.popover-switch-icon {
  color: var(--text-muted, #7a8aaf);
  font-size: 0.9rem;
}

.popover-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 0;
}

.popover-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  text-decoration: none;
  color: var(--text-primary, white);
  font-size: 0.9rem;
  font-weight: 600;
  transition: background 0.15s;
}
.popover-action:hover {
  background: rgba(124, 77, 255, 0.10);
}
.popover-action i {
  width: 22px;
  text-align: center;
  color: #00e5ff;
}
.popover-action-danger {
  color: #ff8a9d;
}
.popover-action-danger i {
  color: #ff4d6d;
}

/* === スマホのみ非表示。タブレット (768-1023px) は縮小モードで表示してアカウント切替を確保 === */
@media (max-width: 767px) {
  .sidebar-account-section {
    display: none !important;
  }
}

/* === PC サイドバー縮小時(72px幅)の対応 === */
@media (min-width: 769px) and (max-width: 1300px) {
  .sidebar-account-card {
    padding: 8px;
    justify-content: center;
  }
  .sidebar-account-text,
  .sidebar-account-more {
    display: none;
  }
  .sidebar-account-popover {
    left: calc(100% + 8px);
    right: auto;
    bottom: 0;
    width: 280px;
  }
}

/* ============================================================
 * 82. ★スマホドロワー調整★ アカウントメニュー展開時の見切れ修正
 * (モバイル限定: 768px 未満)
 * ============================================================ */
@media (max-width: 767px) {
  /* ドロワーは縦スクロール OK、内部余白整理 */
  .side-drawer {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ヘッダーは sticky にする(スクロール時も常に上に表示)*/
  .drawer-header {
    position: sticky;
    top: 0;
    background: linear-gradient(180deg, #0a0e2a 0%, #050714 100%) !important;
    z-index: 5;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  /* アカウントメニュー展開時の上限を緩和(中身が長くても見切れない)*/
  .drawer-account-menu {
    max-height: none !important;
  }

  /* アカウントメニューと通常メニューの境目を明確に */
  .drawer-account-menu + .drawer-menu {
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    padding-top: 8px !important;
  }
}

/* ============================================================
 * 83. ★X 準拠ドロワーヘッダー★ 左寄せ + 大アバター + フォロー数
 * (モバイル限定: 768px 未満)
 * ============================================================ */
@media (max-width: 767px) {
  /* X 準拠ヘッダー全体 */
  .drawer-x-header {
    padding: 18px 18px 14px !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
  }
  .drawer-x-header:hover,
  .drawer-x-header:active {
    background: rgba(124, 77, 255, 0.06) !important;
  }

  /* 1段目: アバター(左)+ ▼(右) */
  .drawer-x-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }
  .drawer-x-avatar {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    object-fit: cover;
    border: 2px solid rgba(0, 229, 255, 0.30) !important;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.4rem;
  }
  .drawer-x-toggle {
    color: #7a8aaf;
    font-size: 1rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
  }
  .drawer-x-header:hover .drawer-x-toggle {
    background: rgba(0, 229, 255, 0.10);
    color: #00e5ff;
  }
  .drawer-x-toggle.rotated {
    transform: rotate(180deg);
    color: #00e5ff;
    background: rgba(0, 229, 255, 0.10);
  }

  /* 2段目: 名前 + ハンドル(左寄せ) */
  .drawer-x-name {
    font-size: 1.15rem !important;
    font-weight: 800;
    color: white;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .drawer-x-handle {
    font-size: 0.95rem !important;
    color: #7a8aaf;
    margin-top: 2px;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 3段目: フォロー / フォロワー数 */
  .drawer-x-stats {
    display: flex;
    gap: 18px;
    margin-top: 12px;
  }
  .drawer-x-stat {
    display: flex;
    align-items: baseline;
    gap: 4px;
    text-decoration: none;
    transition: opacity 0.15s;
  }
  .drawer-x-stat:hover {
    opacity: 0.7;
  }
  .drawer-x-stat-num {
    font-size: 0.95rem;
    font-weight: 800;
    color: white;
  }
  .drawer-x-stat-label {
    font-size: 0.85rem;
    color: #7a8aaf;
  }

  /* === 既存スタイルの干渉を打ち消す === */
  /* drawer-user-info の中央寄せやサイズ指定を上書き */
  .drawer-x-header .drawer-user-info {
    display: block !important;
  }
  /* 旧 drawer-avatar / drawer-user-name / drawer-user-handle のサイズ */
  .drawer-x-header .drawer-avatar,
  .drawer-x-header .drawer-user-name,
  .drawer-x-header .drawer-user-handle,
  .drawer-x-header .drawer-account-toggle {
    /* 念のため: もし誰かが drawer-x-header の中に旧クラスを使ったら */
    text-align: left;
  }
}

/* ============================================================
 * 84. ★ドロワー▼位置修正★ X 準拠 - 上端揃え、サークル背景削除
 * ============================================================ */
@media (max-width: 767px) {
  /* drawer-x-top: 上端揃えに変更(中央揃えだとシェブロンがアバター中央に来てしまう)*/
  .drawer-x-top {
    align-items: flex-start !important;
  }

  /* drawer-x-toggle: サークル背景を消して、シンプルなアイコンに */
  .drawer-x-toggle {
    width: auto !important;
    height: auto !important;
    padding: 6px 8px !important;
    background: transparent !important;
    border-radius: 9999px !important;
    font-size: 0.95rem !important;
    color: #7a8aaf !important;
    transition: color 0.2s ease, transform 0.25s ease !important;
    margin-top: 4px;  /* 微調整: アバターの上端より少し下に */
  }

  /* ホバー時の控えめな色変化(サークル背景はなし)*/
  .drawer-x-header:hover .drawer-x-toggle,
  .drawer-x-header:active .drawer-x-toggle {
    color: #00e5ff !important;
    background: transparent !important;
  }

  /* 展開時(回転 + 色強調) */
  .drawer-x-toggle.rotated {
    transform: rotate(180deg) !important;
    color: #00e5ff !important;
    background: transparent !important;
  }
}

/* ============================================================
 * 88. ★投稿最終ピンポイント修正★
 *
 * 既存 CSS の問題のみピンポイント上書き(他に影響しない)
 * - .post-avatar-col の align-items を左寄せに
 * - モバイルの本文サイズを 16px(X と同等)に
 * - 行間を 1.5(読みやすく)
 * ============================================================ */

/* === アバター列を左寄せ(中央寄せの上書き)=== */
.post-avatar-col {
  align-items: flex-start !important;   /* center → flex-start */
}

/* === モバイル: 本文サイズを X と同等に === */
@media (max-width: 767px) {
  .post-body,
  .post-detail-body {
    font-size: 1rem !important;          /* 16px、X と同等 */
    line-height: 1.5 !important;         /* 読みやすい行間 */
  }

  /* === post-grid: モバイル時のレイアウトを X 準拠に === */
  .post-grid {
    grid-template-columns: 40px 1fr !important;
    gap: 10px !important;
  }

  /* === アバター 40px に統一 === */
  .post-avatar-col .avatar,
  .post-avatar-col .avatar-md {
    width: 40px !important;
    height: 40px !important;
  }

  /* === 名前 / ハンドル / 時間: 1 行で並ぶように === */
  .post-author-meta {
    font-size: 0.9rem !important;
  }
  .post-author-meta .author-name {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
  }
  .post-author-meta .author-handle,
  .post-author-meta .post-meta-sep,
  .post-author-meta .time-toggle {
    font-size: 0.9rem !important;
  }
}

/* ============================================================
 * 85. ★アクションバー X 風サイズ★ スマホでアイコン拡大
 * ============================================================ */
@media (max-width: 767px) {
  /* アクションバー全体: 横幅を最大限活用、アイコン間隔を広く */
  .post-actions {
    margin-top: 10px !important;
    padding-right: 0 !important;
    gap: 0 !important;
  }

  /* アイコンボタン: タップ領域を広く */
  .action-btn {
    padding: 6px 0 !important;
    min-width: 44px;
    min-height: 36px;
    flex: 1;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
  }

  /* アイコン本体: X と同等の 19-20px */
  .action-btn i {
    width: 36px !important;
    height: 36px !important;
    font-size: 19px !important;       /* 14px → 19px(★1.36倍)*/
    border-radius: 50%;
    transition: background 0.15s;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* タップ時のホバー風サークル(X と同じ感じ)*/
  .action-btn:active i {
    background: rgba(0, 229, 255, 0.10);
  }
  .action-btn[name="like_post"]:active i,
  .action-btn[name="unlike_post"]:active i,
  .action-btn.like:active i {
    background: rgba(255, 77, 109, 0.12);
  }
  .action-btn[name="repost_post"]:active i {
    background: rgba(0, 255, 157, 0.12);
  }

  /* カウント表示 */
  .action-btn span,
  .action-btn .count {
    font-size: 0.85rem !important;
    font-weight: 500;
  }

  /* リアクションがあれば縦詰めで右に */
  .action-btn .count:empty {
    display: none;
  }
}

/* ============================================================
 * 89. ★X 風控えめカラー★ 純白を抑えて目に優しく
 *
 * X 本物の色:
 *   テキスト本体: #e7e9ea(純白より少し暗め)
 *   淡色:         #71767b(中間グレー)
 * ============================================================ */
@media (max-width: 767px) {

  /* === 本文(タイムライン)=== */
  .post-body,
  .post-detail-body {
    color: #e7e9ea !important;        /* X 本物と同じ */
  }

  /* === 表示名 === */
  .post-author-meta .author-name,
  .quote-card .author-name {
    color: #e7e9ea !important;
  }

  /* === ハンドル / 時間 / 淡色 === */
  .post-author-meta .author-handle,
  .post-author-meta .post-meta-sep,
  .post-author-meta .time-toggle,
  .quote-card .author-handle,
  .quote-card .quote-time,
  .ogp-host {
    color: #71767b !important;        /* X 本物の muted */
  }

  /* === (編集済) === */
  .post-author-meta .muted.small {
    color: #71767b !important;
  }

  /* === ピン留めラベル === */
  .post-pinned-label {
    color: #71767b !important;
  }

  /* === アクションアイコン(通常時)=== */
  .action-btn {
    color: #71767b !important;
  }
  .action-btn i {
    color: #71767b !important;
  }
  .action-btn .count {
    color: #71767b !important;
  }
  /* ホバー / アクティブ時は元の色を維持(青/赤/緑)*/

  /* === ケバブ(⋮)=== */
  .kebab-btn {
    color: #71767b !important;
  }

  /* === 引用ポストの背景 === */
  .quote-card {
    border-color: #2f3336 !important;  /* X 本物の border */
    background: rgba(255, 255, 255, 0.02);
  }
  .quote-card .quote-body {
    color: #e7e9ea !important;
  }

  /* === OGP カード === */
  .ogp-card {
    border-color: #2f3336 !important;
    background: rgba(255, 255, 255, 0.02);
  }
  .ogp-title {
    color: #e7e9ea !important;
  }
  .ogp-desc {
    color: #71767b !important;
  }

  /* === 投稿カードの境界線(枠下のセパレータ)=== */
  .post {
    border-bottom-color: #2f3336 !important;  /* X 本物の subtle border */
  }

  /* === 画像の枠を控えめに === */
  .post-media,
  .post-media-grid {
    border: 1px solid #2f3336;
  }
}

/* ============================================================
 * 90. ★アクション押下色復元★
 *
 * .liked / .reposted / .bookmarked / [name="unlike_post"] 等の
 * 「押した状態」では元の色(ピンク/緑/青)を維持
 * ============================================================ */
@media (max-width: 767px) {

  /* === いいね済み === */
  .action-btn.liked,
  .action-btn[name="unlike_post"] {
    color: var(--action-like, #f91880) !important;
  }
  .action-btn.liked i,
  .action-btn[name="unlike_post"] i {
    color: var(--action-like, #f91880) !important;
  }

  /* === リポスト済み === */
  .action-btn.reposted,
  .action-btn[name="unrepost_post"] {
    color: var(--action-repost, #00ba7c) !important;
  }
  .action-btn.reposted i,
  .action-btn[name="unrepost_post"] i {
    color: var(--action-repost, #00ba7c) !important;
  }

  /* === ブックマーク済み === */
  .action-btn.bookmarked {
    color: var(--action-bookmark, #1d9bf0) !important;
  }
  .action-btn.bookmarked i {
    color: var(--action-bookmark, #1d9bf0) !important;
  }

  /* === ホバー時の色も復活 === */
  .action-btn[name="like_post"]:hover,
  .action-btn[name="unlike_post"]:hover,
  .action-btn.like:hover {
    color: var(--action-like, #f91880) !important;
  }
  .action-btn[name="like_post"]:hover i,
  .action-btn[name="unlike_post"]:hover i,
  .action-btn.like:hover i {
    color: var(--action-like, #f91880) !important;
  }

  .action-btn[name="repost_post"]:hover,
  .action-btn[name="unrepost_post"]:hover,
  .action-btn.repost:hover,
  .repost-wrapper > .action-btn:hover {
    color: var(--action-repost, #00ba7c) !important;
  }
  .action-btn[name="repost_post"]:hover i,
  .action-btn[name="unrepost_post"]:hover i,
  .action-btn.repost:hover i,
  .repost-wrapper > .action-btn:hover i {
    color: var(--action-repost, #00ba7c) !important;
  }

  .action-btn.bookmark:hover {
    color: var(--action-bookmark, #1d9bf0) !important;
  }
  .action-btn.bookmark:hover i {
    color: var(--action-bookmark, #1d9bf0) !important;
  }
}

/* ============================================================
 * 91. ★アイコン数字寄せる★ X と同じく密着
 * ============================================================ */
@media (max-width: 767px) {

  /* === ボタン全体: gap を狭く === */
  .action-btn {
    gap: 0 !important;            /* 4-6px → 0 */
  }

  /* === 数字(カウント): アイコンに寄せる === */
  .action-btn .count,
  .action-btn span {
    margin-left: 0 !important;     /* 2-4px → 0 */
    padding-left: 2px;             /* わずかな隙間だけ残す */
    font-size: 13px !important;
  }

  /* === アイコンの円形タップ領域を少し小さく(密着感アップ)=== */
  .action-btn i {
    width: 30px !important;
    height: 30px !important;
    /* font-size はそのまま 18-19px 維持 */
  }

  /* === 各アクションの右マージンも少し詰める === */
  .action-btn:not(:last-child) {
    margin-right: 4px !important;  /* 8px → 4px */
  }
}

/* ============================================================
 * 92. ★リポストラッパー間隔修正★
 *
 * .repost-wrapper を他のアクションボタンと同じ flex 領域に
 * ============================================================ */

/* === デスクトップ + モバイル共通: wrapper をボタンと同じ扱い === */
.post-actions .repost-wrapper,
.post-actions .share-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* === モバイル: 他のアクションと同じ間隔 === */
@media (max-width: 767px) {
  .post-actions .repost-wrapper,
  .post-actions .share-wrapper {
    /* action-btn と同じスペース確保 */
    flex: 0 0 auto;
    margin-right: 4px;        /* action-btn と同じ */
  }

  .post-actions .repost-wrapper > .action-btn,
  .post-actions .share-wrapper > .action-btn {
    /* wrapper 内のボタンには margin-right を付けない(wrapper 側に付けるので)*/
    margin-right: 0 !important;
  }

  /* === repost-menu のスタイル(モバイル用)=== */
  .repost-menu {
    position: absolute !important;
    bottom: calc(100% + 6px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    min-width: 180px !important;
    z-index: 100 !important;
  }
  /* 共有メニューは右端なので右寄せ (中央寄せだと画面外へ出る) */
  .share-menu {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
  }
}

/* ============================================================
 * 93. ★アクション間隔修正★ X と同じ均等配置
 * ============================================================ */
@media (max-width: 767px) {
  /* アクションバー: 均等配置 + 最大幅制限 */
  .post-actions {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    max-width: 100% !important;
    margin-top: 8px !important;
    padding-right: 0 !important;
    gap: 0 !important;
  }

  /* 全ボタン(wrapper 含む)を均等に */
  .post-actions > .action-btn,
  .post-actions > .repost-wrapper,
  .post-actions > .share-wrapper {
    flex: 1 1 0 !important;
    margin-right: 0 !important;
    min-width: 0 !important;
  }

  /* 最後のボタン: margin なし */
  .post-actions > *:last-child {
    margin-right: 0 !important;
  }

  /* wrapper 内のボタンは中央揃え */
  .post-actions > .repost-wrapper > .action-btn,
  .post-actions > .share-wrapper > .action-btn {
    width: 100%;
    margin: 0 !important;
  }
}

/* ============================================================
 * 94. ★empty-icon Font Awesome 化★ ネオンダーク調和
 * ============================================================ */
.empty-icon {
  font-size: 4rem !important;
  color: #7a8aaf;
  opacity: 0.5;
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.empty-icon i {
  background: linear-gradient(135deg, #7c4dff, #00e5ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgba(124, 77, 255, 0.30));
  opacity: 0.85;
}

/* ============================================================
 * 95. ★PC レイアウト修正★
 *   - 背景チラつき解消(::before で固定)
 *   - カラム境界線(X 風)
 *   - 全ページメインカラム幅統一(620px)
 * ============================================================ */

/* === 修正 1: 背景を ::before で固定(チラつき完全解消)=== */
html {
  background: var(--bg-primary, #0a0e1a);
  min-height: 100vh;
}
html::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 1400px 700px at 10% -10%, rgba(124, 77, 255, 0.4), transparent 65%),
    radial-gradient(ellipse 1000px 600px at 90% 0%,   rgba(0, 229, 255, 0.3), transparent 65%),
    radial-gradient(ellipse 1000px 700px at 70% 110%, rgba(0, 255, 157, 0.2), transparent 60%),
    var(--bg-primary, #0a0e1a);
  /* GPU 合成で固定(transform でレイヤー化)*/
  transform: translateZ(0);
  will-change: transform;
}
body {
  background: transparent !important;
}

/* === 修正 2: カラム間に X 風の縦境界線 === */
@media (min-width: 768px) {
  .col-main {
    border-left: 1px solid #2f3336;
    border-right: 1px solid #2f3336;
    min-height: 100vh;
  }
}

/* === 修正 3: 全ページのメインカラム幅を完全統一 === */
@media (min-width: 768px) {
  .col-main {
    max-width: 620px !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* DM ページのメインカラムも同じ幅にする */
  .col-main.dm-col-main {
    max-width: 620px !important;
  }
}

/* === スクロールバー消失時のレイアウトずれ防止(X と同じ手法)=== */
html {
  scrollbar-gutter: stable;
}


/* ============================================================
 * 96. ★PC レイアウト比率 + グラデ境界★ X 風
 * ============================================================ */

/* === CSS 変数を X 同等に再定義(左 275px / メイン 620px / 右 350px)=== */
:root {
  --sidebar-width: 275px !important;
  --sidebar-width-narrow: 88px !important;
  --tl-max-width: 620px !important;
  --aside-width: 350px !important;
}

/* === レイアウト全体: 中央寄せ === */
@media (min-width: 1300px) {
  .layout-3col {
    max-width: 1265px;        /* 275 + 620 + 350 + gap */
    margin: 0 auto;
    grid-template-columns: 275px 620px 350px !important;
    gap: 0 !important;
  }
}

/* === 中間サイズ(縮小サイドバー)=== */
@media (min-width: 1000px) and (max-width: 1299px) {
  .layout-3col {
    max-width: 1078px;
    margin: 0 auto;
    grid-template-columns: 88px 620px 350px !important;
    gap: 0 !important;
  }
}

/* === 中サイズ(右サイドバー消す)=== */
@media (min-width: 768px) and (max-width: 999px) {
  .layout-3col {
    max-width: 708px;
    margin: 0 auto;
    grid-template-columns: 88px 620px !important;
    gap: 0 !important;
  }
}

/* === 修正 2: 境界をグラデーションで自然に === */
@media (min-width: 768px) {
  .col-main {
    /* 既存の border を上書きして消す */
    border-left: none !important;
    border-right: none !important;
    /* グラデ境界(左右に薄い縦線が浮かぶ感じ)*/
    background:
      linear-gradient(to right, rgba(124, 77, 255, 0.04) 0%, transparent 1px) left top / 100% 100% no-repeat,
      linear-gradient(to left, rgba(0, 229, 255, 0.04) 0%, transparent 1px) right top / 100% 100% no-repeat,
      transparent;
    position: relative;
  }
  /* 左右に縦のグラデライン(うっすら光る) */
  .col-main::before,
  .col-main::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    pointer-events: none;
  }
  .col-main::before {
    left: 0;
    background: linear-gradient(to bottom,
      transparent 0%,
      rgba(124, 77, 255, 0.15) 20%,
      rgba(0, 229, 255, 0.10) 50%,
      rgba(124, 77, 255, 0.15) 80%,
      transparent 100%);
  }
  .col-main::after {
    right: 0;
    background: linear-gradient(to bottom,
      transparent 0%,
      rgba(0, 229, 255, 0.15) 20%,
      rgba(124, 77, 255, 0.10) 50%,
      rgba(0, 229, 255, 0.15) 80%,
      transparent 100%);
  }
}

/* === メインカラム幅統一(620px 固定)=== */
@media (min-width: 768px) {
  .col-main,
  .col-main.dm-col-main {
    max-width: 620px !important;
    width: 620px !important;
    box-sizing: border-box;
    min-height: 100vh;
  }
}

/* === 左サイドバー: 余白を整えて X 風 === */
@media (min-width: 1300px) {
  .col-sidebar,
  .layout-3col > nav:first-child,
  .layout-3col > aside:first-child {
    width: 275px;
    padding: 0 12px;
  }
}
@media (min-width: 1000px) and (max-width: 1299px) {
  .col-sidebar,
  .layout-3col > nav:first-child,
  .layout-3col > aside:first-child {
    width: 88px;
    padding: 0 4px;
  }
}

/* === 右サイドバー: 350px に統一 === */
@media (min-width: 1000px) {
  .col-aside,
  .layout-3col > aside:last-child {
    width: 350px;
    padding: 0 16px;
  }
}


/* ============================================================
 * 97. ★全ページレイアウト完全統一★
 *
 * 全ページの .col-main を完全に同じ寸法・余白に
 * - 幅: 620px 固定
 * - padding: 一切なし(子要素で個別に指定)
 * - スクロールバー出現/消失でずれない
 * ============================================================ */

@media (min-width: 768px) {

  /* === 全ページの .col-main を完全統一 === */
  .col-main,
  .col-main.dm-col-main,
  .col-main.profile-page,
  .col-main.view-post-page {
    max-width: 620px !important;
    width: 620px !important;
    min-width: 620px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden;
  }

  /* === col-main-header を統一 === */
  .col-main-header,
  .col-main > header {
    padding: 12px 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* === DM ページの内部 dm-layout も同じ枠内に収める === */
  .dm-col-main .dm-layout {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    height: calc(100vh - 60px);
  }

  /* === プロフィールページのカバー画像も同じ枠内 === */
  .profile-cover {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* === 投稿カード自体は枠いっぱいに === */
  .col-main .post,
  .col-main article {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* === composer / 投稿フォームも同じ幅 === */
  .composer-wrapper,
  .compose-wrapper,
  .col-main .composer {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* === 設定ページの内部コンテンツ === */
  .col-main .settings-page,
  .col-main .settings-section {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* === 検索結果 / 通知一覧の内部 === */
  .col-main .search-results,
  .col-main .notifications-list {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* === スクロールバー: 全ページで常時確保(出現/消失でずれない)=== */
html {
  scrollbar-gutter: stable !important;
  overflow-y: scroll !important;
}


/* ============================================================
 * 100. ★通報モーダル★ X 風
 * ============================================================ */
.report-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; }
.report-modal[hidden] { display: none; }
.report-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); }
.report-modal-box {
  position: relative;
  background: linear-gradient(180deg, #1a1d28 0%, #14171f 100%);
  border: 1px solid #2f3336;
  border-radius: 16px;
  width: min(560px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: reportModalIn 0.18s ease-out;
}
@keyframes reportModalIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.report-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid #2f3336;
}
.report-modal-header h2 {
  margin: 0; font-size: 1.15rem; color: #e7e9ea;
  display: flex; align-items: center; gap: 10px;
}
.report-modal-header h2 i { color: #ff4d6d; }
.report-modal-close {
  background: transparent; border: none; color: #71767b; cursor: pointer;
  padding: 8px; border-radius: 50%; font-size: 1.1rem; line-height: 1;
  width: 36px; height: 36px;
}
.report-modal-close:hover { background: rgba(255,255,255,0.05); color: #e7e9ea; }
.report-modal-body { padding: 20px; }
.report-intro { color: #71767b; margin: 0 0 16px 0; font-size: 0.95rem; }
.report-reasons { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.report-reason {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border: 1px solid #2f3336; border-radius: 10px;
  cursor: pointer; transition: all 0.15s;
}
.report-reason:hover { border-color: #7c4dff; background: rgba(124,77,255,0.04); }
.report-reason input[type="radio"] {
  margin-top: 4px; accent-color: #7c4dff; flex-shrink: 0;
}
.report-reason input[type="radio"]:checked ~ span { color: #e7e9ea; }
.report-reason:has(input:checked) {
  border-color: #7c4dff; background: rgba(124,77,255,0.08);
}
.report-reason span strong { color: #e7e9ea; font-size: 0.95rem; }
.report-reason span small { color: #71767b; font-size: 0.82rem; }
.report-detail-wrap { margin: 16px 0; }
.report-detail-wrap label {
  display: block; color: #71767b; font-size: 0.85rem; margin-bottom: 6px;
}
.report-detail-wrap textarea {
  width: 100%; padding: 12px; background: rgba(255,255,255,0.03);
  border: 1px solid #2f3336; border-radius: 10px; color: #e7e9ea;
  font-size: 0.95rem; resize: vertical; box-sizing: border-box;
  font-family: inherit; line-height: 1.5;
}
.report-detail-wrap textarea:focus {
  outline: none; border-color: #7c4dff; box-shadow: 0 0 0 3px rgba(124,77,255,0.15);
}
.report-modal-actions {
  display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px;
}
.report-btn-cancel {
  background: transparent; color: #71767b;
  border: 1px solid #2f3336; padding: 10px 18px;
  border-radius: 999px; cursor: pointer; font-weight: 500;
}
.report-btn-cancel:hover { background: rgba(255,255,255,0.04); }
.report-btn-submit {
  background: linear-gradient(135deg, #ff4d6d, #ff6e8a);
  color: #fff; border: none; padding: 10px 22px;
  border-radius: 999px; cursor: pointer; font-weight: 700;
  display: inline-flex; align-items: center; gap: 8px;
}
.report-btn-submit:hover { transform: translateY(-1px); }
.report-error {
  margin-top: 12px; padding: 10px 14px;
  background: rgba(255,77,109,0.1); border: 1px solid #ff4d6d;
  color: #ff4d6d; border-radius: 8px; font-size: 0.9rem;
}
/* ============================================================
 * 101. ★スマホ背景の縞模様修正★
 * ============================================================ */
@media (max-width: 767px) {
  html::before {
    background:
      radial-gradient(ellipse 800px 800px at 50% -20%,
        rgba(124, 77, 255, 0.18),
        transparent 60%),
      var(--bg-primary, #0a0e1a) !important;
  }
}

/* ============================================================
 * 102. ★ログインページ スマホ背景暗化★
 * PC と同じ暗さにして花火を目立たせる
 * ============================================================ */
@media (max-width: 767px) {
  /* auth ページの body は完全な暗色 */
  body.auth-page,
  body.auth-x-layout {
    background: #050810 !important;
  }

  /* html::before(101 番のグラデ)を auth ページでは無効化 */
  body.auth-page ~ * + html::before,
  body.auth-x-layout html::before {
    display: none;
  }
  /* ↑ うまく届かない可能性があるので保険として html 全体も */
  html:has(body.auth-x-layout)::before {
    display: none !important;
  }

  /* 光球を抑える(明るすぎる原因)*/
  .auth-bg-orbs .auth-orb {
    opacity: 0.25 !important;
    filter: blur(80px) !important;
  }

  /* 各ブロックの背景を半透明 → ほぼ透明に(地の暗色を見せる)*/
  .auth-x-container,
  .auth-x-hero,
  .auth-x-panel {
    background: transparent !important;
  }
}


/* ============================================================
 * 103. 検索ホーム X 風 + サイドバー強化
 * ============================================================ */
.search-home { padding: 0; }
.search-home-section { border-bottom: 1px solid #2f3336; padding: 16px; }
.search-home-section:last-child { border-bottom: none; }
.search-home-h3 {
  font-size: 1.1rem; font-weight: 800; margin: 0 0 14px 0;
  color: #e7e9ea; display: flex; align-items: center; gap: 10px;
}
.search-home-h3 i { color: #00e5ff; font-size: 0.95em; }

.search-media-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  border-radius: 14px; overflow: hidden;
}
.search-media-thumb { display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.search-media-thumb img {
  width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s;
}
.search-media-thumb:hover img { transform: scale(1.05); }

.trend-row {
  display: flex; gap: 12px; padding: 10px 0; border-radius: 8px;
  text-decoration: none; color: inherit; transition: background 0.15s;
}
.trend-row:hover { background: rgba(255,255,255,0.03); }
.trend-rank {
  flex-shrink: 0; font-size: 1.4rem; font-weight: 800;
  background: linear-gradient(135deg, #7c4dff, #00e5ff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  width: 36px; text-align: center;
}
.trend-row-body { flex: 1; min-width: 0; }
.trend-row-meta { font-size: 0.8rem; color: #71767b; }
.trend-row-tag { font-size: 1rem; font-weight: 700; color: #e7e9ea; margin: 2px 0; }
.trend-row-count { font-size: 0.85rem; color: #71767b; }

.suggestion-row {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.suggestion-row:last-child { border-bottom: none; }
.suggestion-row-main {
  display: flex; gap: 10px; flex: 1; text-decoration: none;
  color: inherit; min-width: 0;
}
.suggestion-row-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  flex-shrink: 0; object-fit: cover;
}
.suggestion-row-avatar.avatar-placeholder {
  background: linear-gradient(135deg, #7c4dff, #00e5ff);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700;
}
.suggestion-row-info { flex: 1; min-width: 0; }
.suggestion-row-name {
  font-weight: 700; color: #e7e9ea; font-size: 0.95rem;
  display: flex; align-items: center; gap: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.suggestion-row-handle {
  color: #71767b; font-size: 0.85rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.suggestion-row-bio {
  color: #e7e9ea; font-size: 0.85rem; line-height: 1.4; margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.suggestion-row-followers { color: #71767b; font-size: 0.8rem; margin-top: 4px; }
.suggestion-follow-btn {
  background: #e7e9ea; color: #0f1419; border: none;
  padding: 7px 18px; border-radius: 999px; font-weight: 700;
  font-size: 0.85rem; cursor: pointer; flex-shrink: 0;
  transition: all 0.15s; white-space: nowrap;
}
.suggestion-follow-btn:hover { background: #c8cad0; }
.suggestion-follow-btn.following {
  background: transparent; color: #e7e9ea; border: 1px solid #2f3336;
}
.suggestion-follow-btn.following:hover { border-color: #ff4d6d; color: #ff4d6d; }

.aside-suggestion-row { padding: 10px 0; }
.aside-suggestion-row .suggestion-row-avatar { width: 40px; height: 40px; }
.aside-suggestion-row .suggestion-row-bio { display: none; }
.aside-follow-btn { padding: 6px 14px; font-size: 0.8rem; }

@media (max-width: 767px) {
  .search-home-section { padding: 14px; }
  .search-media-grid { gap: 2px; }
  .suggestion-row-bio { -webkit-line-clamp: 1; }
}




/* ============================================================
 * 106. ★ライトモード v4 (ネオンライト 個性派)★
 *
 * デザイン方針:
 *   - 明るい背景 + ダーク文字で可読性確保
 *   - アクセントはダーク版と同じネオン (cyan/purple/pink/green/gold) を維持
 *   - 背景は白一色ではなく、極淡いネオン放射グラデで世界観をつなぐ
 *   - 変数を一元化し、個別 selector の上書きは段階的に削除していく
 * ============================================================ */

body.theme-light {
  /* === ベース (白に近い、極微パープル) === */
  --bg-primary:    #fdfcff;
  --bg-secondary:  #f5f3ff;
  --bg-tertiary:   #eef2ff;
  --bg-overlay:    rgba(253, 252, 255, 0.92);
  --bg-hover:      rgba(124, 77, 255, 0.05);
  --bg-card:       #ffffff;
  --bg-card-hover: rgba(124, 77, 255, 0.04);

  /* === テキスト (深いインディゴブラック) === */
  --text-primary:   #1a1033;
  --text-secondary: #4d4570;
  --text-muted:     #7d77a0;
  --text-accent:    #1a1033;

  /* === アクセント (ネオン維持・白背景に映える濃さに調整) ===
     #00b8d4 (ターコイズ) は白背景で淡く読みにくかったため、X の brand
     blue (#1d9bf0) に変更してはっきり青色に。 */
  --accent-purple: #7c4dff;
  --accent-cyan:   #1d9bf0;
  --accent-green:  #00b070;
  --accent-pink:   #e91e63;
  --accent-gold:   #f59e0b;
  --accent-blue:   #1d9bf0;

  /* === X 風アクション色 === */
  --action-reply:    #1d9bf0;
  --action-repost:   #00b070;
  --action-like:     #e91e63;
  --action-share:    #7c4dff;
  --action-bookmark: #f59e0b;
  --action-default:  #7d77a0;
  --action-reply-bg:    rgba(29, 155, 240, 0.10);
  --action-repost-bg:   rgba(0, 176, 112, 0.10);
  --action-like-bg:     rgba(233, 30, 99, 0.10);
  --action-share-bg:    rgba(124, 77, 255, 0.10);
  --action-bookmark-bg: rgba(245, 158, 11, 0.12);

  /* === グラデーション (ネオン × pale) === */
  --gradient-primary:   linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
  --gradient-secondary: linear-gradient(135deg, rgba(124, 77, 255, 0.10), rgba(29, 155, 240, 0.08));
  --gradient-tertiary:  linear-gradient(180deg, rgba(245, 243, 255, 0.85), rgba(255, 255, 255, 0.7));
  --gradient-danger:    linear-gradient(135deg, #ec4899, #be185d);
  --gradient-success:   linear-gradient(135deg, #10b981, #047857);

  /* === ボーダー (淡いパープル基調) === */
  --border-primary:   rgba(124, 77, 255, 0.14);
  --border-secondary: rgba(124, 77, 255, 0.08);
  --border-glow:      rgba(29, 155, 240, 0.45);

  /* === シャドウ (黒ではなくパープルベース) === */
  --shadow-sm: 0 1px 4px rgba(124, 77, 255, 0.06);
  --shadow-md: 0 2px 10px rgba(124, 77, 255, 0.10);
  --shadow-lg: 0 6px 24px rgba(124, 77, 255, 0.14);
  --shadow-glow:        0 0 24px rgba(29, 155, 240, 0.22);
  --shadow-glow-purple: 0 0 24px rgba(124, 77, 255, 0.22);
}

/* 全体背景は §116 "Morioka ブランド強化ライト v2" 側で定義されている (本変数ブロックの後に来る)
   ため、ここでは color と ::before の暗グラデ消しだけ宣言する。 */
body.theme-light {
  color: var(--text-primary) !important;
}

html:has(body.theme-light)::before {
  display: none !important;
}

/* 全カラム共通: 白背景、黒文字 */
body.theme-light .col-main,
body.theme-light .col-aside,
body.theme-light .col-main-header,
body.theme-light .composer,
body.theme-light .post-composer,
body.theme-light .post-card,
body.theme-light .post,
body.theme-light .post-item,
body.theme-light aside,
body.theme-light main,
body.theme-light header {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

/* 投稿カード境界 */
body.theme-light .post-card,
body.theme-light .post,
body.theme-light .post-item {
  border-bottom: 1px solid var(--border-primary) !important;
}

body.theme-light .post-card:hover,
body.theme-light .post:hover {
  background: var(--bg-secondary) !important;
}

/* テキスト */
body.theme-light .post-body,
body.theme-light .post-content,
body.theme-light .post-text,
body.theme-light .post-author,
body.theme-light .display-name,
body.theme-light h1,
body.theme-light h2,
body.theme-light h3,
body.theme-light h4,
body.theme-light p,
body.theme-light span,
body.theme-light div {
  color: var(--text-primary);
}

body.theme-light .muted,
body.theme-light .text-muted,
body.theme-light .small,
body.theme-light .post-meta,
body.theme-light .post-time,
body.theme-light .post-handle,
body.theme-light .suggestion-row-handle,
body.theme-light .sidebar-handle {
  color: var(--text-secondary) !important;
}

body.theme-light .sidebar-link,
body.theme-light .sidebar-nav a {
  color: var(--text-primary) !important;
  background: transparent !important;
  font-weight: 500;
}

body.theme-light .sidebar-link:hover,
body.theme-light .sidebar-nav a:hover {
  background: var(--border-primary) !important;
  border-radius: 9999px;
}

body.theme-light .sidebar-link.active,
body.theme-light .sidebar-nav a.active {
  color: var(--text-primary) !important;
  background: transparent !important;
  font-weight: 700;
}

/* メインヘッダー */
body.theme-light .col-main-header {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-primary) !important;
}

/* 投稿するボタン(ネオングラデ維持)*/
body.theme-light .post-btn,
body.theme-light .compose-btn,
body.theme-light .btn-post {
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan)) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(124, 77, 255, 0.25) !important;
  border: none !important;
}

/* 右サイドバー */
body.theme-light .col-aside {
  background: var(--bg-card) !important;
}

body.theme-light .aside-card,
body.theme-light .aside-search {
  background: var(--bg-secondary) !important;
  border: none !important;
  border-radius: 16px !important;
  color: var(--text-primary) !important;
}

body.theme-light .aside-card h3 {
  color: var(--text-primary) !important;
}

body.theme-light .aside-search input {
  background: var(--border-primary) !important;
  border: 1px solid transparent !important;
  color: var(--text-primary) !important;
  border-radius: 9999px;
}
body.theme-light .aside-search input:focus {
  background: var(--bg-card) !important;
  border-color: var(--accent-cyan) !important;
}

/* フォローボタン: X 風(黒丸じゃなく X の白ボタン)*/
body.theme-light .suggestion-follow-btn,
body.theme-light .btn-follow,
body.theme-light .follow-btn,
body.theme-light .aside-follow-btn {
  background: var(--text-primary) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 6px 16px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}
body.theme-light .suggestion-follow-btn:hover,
body.theme-light .btn-follow:hover {
  background: #272c30 !important;
}

/* おすすめユーザー行のホバー */
body.theme-light .suggestion-row:hover,
body.theme-light .aside-suggestion-row:hover {
  background: rgba(0, 0, 0, 0.03) !important;
}

/* 画像: 完全表示、背景は薄く */
body.theme-light .post-image,
body.theme-light .post-media,
body.theme-light .image-grid,
body.theme-light .post-media-container,
body.theme-light .post-card img,
body.theme-light .post img {
  background: transparent !important;
  border-radius: 16px;
}

body.theme-light .post-card img,
body.theme-light .post img {
  border: 1px solid var(--border-primary);
}

/* タブ */
body.theme-light .tabs a,
body.theme-light .tab {
  color: var(--text-secondary) !important;
  background: transparent !important;
  font-weight: 600;
}

body.theme-light .tabs a.active,
body.theme-light .tab.active {
  color: var(--text-primary) !important;
  background: transparent !important;
  font-weight: 700;
  border-bottom: 4px solid var(--accent-cyan) !important;
}

body.theme-light .tabs a:hover {
  background: var(--border-primary) !important;
}

/* 入力フォーム */
body.theme-light input[type="text"],
body.theme-light input[type="email"],
body.theme-light input[type="password"],
body.theme-light input[type="search"],
body.theme-light input[type="url"],
body.theme-light textarea,
body.theme-light select {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-primary) !important;
}
body.theme-light input:focus,
body.theme-light textarea:focus {
  border-color: var(--accent-cyan) !important;
  box-shadow: none;
  outline: 1px solid var(--accent-cyan);
}
body.theme-light input::placeholder,
body.theme-light textarea::placeholder {
  color: var(--text-muted) !important;
}

/* コンポーザの textarea は枠なし */
body.theme-light .composer textarea,
body.theme-light .post-composer textarea {
  border: none !important;
  background: transparent !important;
}

/* スクロールバー */
body.theme-light ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.20) !important;
  border-radius: 4px;
}
body.theme-light ::-webkit-scrollbar-track {
  background: transparent !important;
}

/* リンク */
body.theme-light a { color: var(--accent-cyan); }
body.theme-light a:hover { color: #1a8cd8; text-decoration: underline; }
/* ボタン化されたリンクは hover 時の下線を出さない */
body.theme-light a[class*="btn"]:hover,
body.theme-light a.primary:hover,
body.theme-light a.nav-item:hover,
body.theme-light a.composer-action:hover,
body.theme-light a.page-link:hover,
body.theme-light a.back-btn:hover,
body.theme-light a.tab:hover,
body.theme-light a.chip:hover,
body.theme-light a.pill:hover {
  text-decoration: none !important;
}
body.theme-light .hashtag,
body.theme-light .mention,
body.theme-light .linkified { color: var(--accent-cyan) !important; }

/* ドロップダウン */
body.theme-light .dropdown,
body.theme-light .menu,
body.theme-light .popover,
body.theme-light .repost-menu,
body.theme-light .kebab-menu {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-primary) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15) !important;
}
body.theme-light .dropdown a,
body.theme-light .menu a,
body.theme-light .menu-item { color: var(--text-primary) !important; }
body.theme-light .dropdown a:hover,
body.theme-light .menu-item:hover {
  background: var(--border-primary) !important;
}

/* モーダル */
body.theme-light .modal-overlay { background: rgba(91, 112, 131, 0.4) !important; }
body.theme-light .modal,
body.theme-light .modal-content,
body.theme-light .modal-body {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.20);
}

/* アクションボタン(投稿の下のいいね、リポスト等)*/
body.theme-light .post-action,
body.theme-light .action-btn { color: var(--text-secondary) !important; }
body.theme-light .post-action:hover { color: var(--accent-cyan) !important; }

/* footer */
body.theme-light .aside-footer,
body.theme-light footer {
  color: var(--text-secondary) !important;
}
body.theme-light .aside-footer a,
body.theme-light footer a {
  color: var(--text-secondary) !important;
}

/* ロゴ周辺 */
body.theme-light .auth-x-logo img {
  background: transparent !important;
}

/* settings 画面 */
body.theme-light .settings-block,
body.theme-light .settings-section,
body.theme-light .settings-card {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-primary) !important;
}

/* avatar placeholder のグラデ維持 */
body.theme-light .avatar-placeholder,
body.theme-light .suggestion-row-avatar.avatar-placeholder {
  /* グラデーションそのまま */
}

/* ============================================================
 * 107. ライトモード v3 サイドバー修正
 *   .col-nav と .nav-item を白く
 * ============================================================ */

/* PC サイドバー本体: 白に */
body.theme-light .col-nav,
body.theme-light .col-nav.sidebar-nav,
body.theme-light .col-nav .sidebar-nav,
body.theme-light nav.col-nav {
  background: var(--bg-card) !important;
  border-right: 1px solid var(--border-primary) !important;
  color: var(--text-primary) !important;
}

/* ロゴセクション(暗い枠を消す)*/
body.theme-light .logo-section,
body.theme-light .sidebar-logo-link,
body.theme-light .col-nav .logo-section {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ナビアイテム(ホーム/検索/通知 等)*/
body.theme-light .col-nav .nav-item,
body.theme-light .col-nav .nav-menu a,
body.theme-light .nav-menu .nav-item {
  color: var(--text-primary) !important;
  background: transparent !important;
}

body.theme-light .col-nav .nav-item:hover,
body.theme-light .col-nav .nav-menu a:hover {
  background: var(--border-primary) !important;
  border-radius: 9999px;
}

body.theme-light .col-nav .nav-item.active,
body.theme-light .col-nav .nav-menu a.active {
  color: var(--text-primary) !important;
  font-weight: 800;
  background: transparent !important;
}

body.theme-light .col-nav .nav-item .icon,
body.theme-light .col-nav .nav-item i {
  color: var(--text-primary) !important;
}

/* 「投稿する」ボタン(下のグラデボタン)- ネオングラデ復活 */
body.theme-light .col-nav .post-btn,
body.theme-light .col-nav .compose-btn,
body.theme-light .col-nav .btn-post,
body.theme-light .col-nav button[type="submit"],
body.theme-light .col-nav .sidebar-actions a,
body.theme-light .col-nav .sidebar-actions button,
body.theme-light .sidebar-actions .btn,
body.theme-light .sidebar-actions a {
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan)) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(124, 77, 255, 0.30) !important;
  font-weight: 700 !important;
}

body.theme-light .col-nav .post-btn:hover,
body.theme-light .sidebar-actions a:hover {
  box-shadow: 0 6px 20px rgba(124, 77, 255, 0.40) !important;
  transform: translateY(-1px);
}

/* サイドバー下のアカウント表示エリア(win350 部分)*/
body.theme-light .col-nav .account-row,
body.theme-light .col-nav .user-card,
body.theme-light .col-nav .account-display,
body.theme-light .col-nav > div:last-child,
body.theme-light .sidebar-account,
body.theme-light .col-nav .sidebar-user {
  background: transparent !important;
  color: var(--text-primary) !important;
}

body.theme-light .col-nav .account-row:hover,
body.theme-light .sidebar-account:hover,
body.theme-light .col-nav .sidebar-user:hover {
  background: var(--border-primary) !important;
  border-radius: 9999px;
}

/* サイドバー内のテキスト色強制 */
body.theme-light .col-nav,
body.theme-light .col-nav span,
body.theme-light .col-nav div,
body.theme-light .col-nav a {
  color: var(--text-primary);
}

body.theme-light .col-nav .handle,
body.theme-light .col-nav .sidebar-handle,
body.theme-light .col-nav small,
body.theme-light .col-nav .text-muted {
  color: var(--text-secondary) !important;
}

/* ============================================================
 * 108. ライトモード v3 アバター丸形修正
 *   ライトモードで画像 border が乱れる問題対応
 * ============================================================ */

/* アバター系は必ず丸 */
body.theme-light .avatar,
body.theme-light .post-avatar,
body.theme-light .post-card .avatar,
body.theme-light .post .avatar,
body.theme-light .post img.avatar,
body.theme-light .drawer-x-avatar,
body.theme-light .drawer-mini-avatar,
body.theme-light .suggestion-row-avatar,
body.theme-light .sidebar-avatar,
body.theme-light .col-nav .avatar,
body.theme-light img.avatar,
body.theme-light img[class*="avatar"],
body.theme-light img.avatar-xs,
body.theme-light img.avatar-sm,
body.theme-light img.avatar-md,
body.theme-light img.avatar-lg,
body.theme-light img.avatar-xl {
  border-radius: 50% !important;
  border: none !important;
  background: transparent !important;
  object-fit: cover;
}

/* 投稿内の画像 (post-image / post-media) は角丸長方形のまま */
body.theme-light .post-image img,
body.theme-light .post-media img,
body.theme-light .image-grid img {
  border-radius: 14px !important;
  border: 1px solid var(--border-primary) !important;
}

/* 直接の post-card img や post img は border 付けない(アバター含むため)*/
body.theme-light .post-card img,
body.theme-light .post img {
  border: none !important;
}

/* ヘッダー画像は四角(角丸) */
body.theme-light .profile-header,
body.theme-light .header-image,
body.theme-light .user-header-image {
  border-radius: 0 !important;
}

/* ============================================================
 * 109. ライトモード v3 文字色強化(スマホ含む全画面)
 *   薄すぎるユーザー名・本文・タイムスタンプを濃く
 * ============================================================ */

/* === 全テキストを濃くする(opacity 排除) === */
body.theme-light,
body.theme-light * {
  opacity: 1 !important;
}

/* 投稿カードの全テキスト要素 */
body.theme-light .post-card,
body.theme-light .post-card *,
body.theme-light .post,
body.theme-light .post * {
  opacity: 1;
}

/* 投稿者名(表示名) - 濃い黒で太字 */
body.theme-light .post-card .display-name,
body.theme-light .post-card .post-author,
body.theme-light .post-card .post-username,
body.theme-light .post .display-name,
body.theme-light .post .post-author,
body.theme-light .post-author-name,
body.theme-light .author-name,
body.theme-light .post-name,
body.theme-light .username,
body.theme-light .name,
body.theme-light .post-card a[href*="profile"] strong,
body.theme-light .post-card a[href*="profile"] b,
body.theme-light .post-card .post-header strong,
body.theme-light .post-card .post-header b {
  color: var(--text-primary) !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

/* @ハンドル(@win350) - 濃いグレー */
body.theme-light .post-card .post-handle,
body.theme-light .post-card .handle,
body.theme-light .post-handle,
body.theme-light .handle,
body.theme-light .post-card .post-meta a,
body.theme-light .post-card .post-meta span {
  color: var(--text-secondary) !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}

/* タイムスタンプ(4時間 / 1日) */
body.theme-light .post-card .post-time,
body.theme-light .post-card .timestamp,
body.theme-light .post-time,
body.theme-light .timestamp,
body.theme-light time {
  color: var(--text-secondary) !important;
  opacity: 1 !important;
}

/* 投稿本文(名駅が幻想的 / 34-192 sdr09) - 純黒に近い */
body.theme-light .post-card .post-body,
body.theme-light .post-card .post-content,
body.theme-light .post-card .post-text,
body.theme-light .post-body,
body.theme-light .post-content,
body.theme-light .post-text,
body.theme-light .post p,
body.theme-light .post-card p {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}

/* 投稿者ヘッダー全体(名前 + ハンドル + 時刻が並ぶ行)*/
body.theme-light .post-header,
body.theme-light .post-card .post-header,
body.theme-light .post-meta,
body.theme-light .post-card .post-meta {
  color: var(--text-secondary) !important;
  opacity: 1 !important;
}

body.theme-light .post-header *,
body.theme-light .post-card .post-header * {
  opacity: 1 !important;
}

/* リンクで囲まれてる名前など全部 */
body.theme-light .post-card a,
body.theme-light .post a {
  opacity: 1 !important;
}

/* ホバー時もくっきり */
body.theme-light .post-card:hover .display-name,
body.theme-light .post-card:hover .post-handle,
body.theme-light .post:hover .display-name,
body.theme-light .post:hover .post-handle {
  opacity: 1 !important;
}

/* 入力欄プレースホルダーも見やすく */
body.theme-light input::placeholder,
body.theme-light textarea::placeholder {
  color: var(--text-muted) !important;
  opacity: 0.85 !important;
}

/* 「投稿する」ボタンをもっと鮮やかに */
body.theme-light .post-btn,
body.theme-light .compose-btn,
body.theme-light .btn-post,
body.theme-light .col-nav .post-btn,
body.theme-light .sidebar-actions a,
body.theme-light .sidebar-actions button,
body.theme-light .composer button[type="submit"],
body.theme-light .post-composer button[type="submit"] {
  background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-cyan) 100%) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  box-shadow: 0 4px 16px rgba(124, 77, 255, 0.30) !important;
  border: none !important;
  opacity: 1 !important;
}

/* スマホ版の下部ナビバー */
body.theme-light .mobile-nav,
body.theme-light .bottom-nav,
body.theme-light .tab-bar {
  background: var(--bg-card) !important;
  border-top: 1px solid var(--border-primary) !important;
}

body.theme-light .mobile-nav a,
body.theme-light .bottom-nav a,
body.theme-light .tab-bar a {
  color: var(--text-secondary) !important;
  opacity: 1 !important;
}

body.theme-light .mobile-nav a.active,
body.theme-light .bottom-nav a.active,
body.theme-light .tab-bar a.active {
  color: var(--accent-cyan) !important;
  opacity: 1 !important;
}

/* スマホヘッダー(ロゴと + ボタン)*/
body.theme-light .mobile-header,
body.theme-light .top-bar {
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border-primary) !important;
}

/* おすすめユーザーや右サイドの文字も濃く */
body.theme-light .suggestion-row,
body.theme-light .suggestion-row *,
body.theme-light .aside-card,
body.theme-light .aside-card * {
  opacity: 1 !important;
}

body.theme-light .suggestion-row-name,
body.theme-light .suggestion-name {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
}

body.theme-light .suggestion-row-handle,
body.theme-light .suggestion-handle {
  color: var(--text-secondary) !important;
}

/* サイドバーの win350 表示も濃く */
body.theme-light .col-nav .display-name,
body.theme-light .col-nav .name,
body.theme-light .col-nav .username {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
}

/* ============================================================
 * 110. ライトモード v3 引用投稿 + デフォルトアバター修正
 * ============================================================ */

/* === 引用投稿(quote post)カード全体 === */
body.theme-light .quote-post,
body.theme-light .quoted-post,
body.theme-light .quote-card,
body.theme-light .post-quote,
body.theme-light .embed-post,
body.theme-light .quoted-tweet,
body.theme-light .post-card .quote-post,
body.theme-light .post-card .quoted,
body.theme-light .post .quoted {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-primary) !important;
  border-radius: 16px !important;
  color: var(--text-primary) !important;
  opacity: 1 !important;
}

body.theme-light .quote-post:hover,
body.theme-light .quoted-post:hover,
body.theme-light .quote-card:hover {
  background: var(--bg-secondary) !important;
}

/* 引用投稿の中の全要素 */
body.theme-light .quote-post *,
body.theme-light .quoted-post *,
body.theme-light .quote-card *,
body.theme-light .post-quote *,
body.theme-light .quoted-tweet *,
body.theme-light .embed-post * {
  opacity: 1 !important;
}

/* 引用投稿の名前(tintin) */
body.theme-light .quote-post .display-name,
body.theme-light .quote-post .post-author,
body.theme-light .quote-post .name,
body.theme-light .quote-post strong,
body.theme-light .quote-post b,
body.theme-light .quoted-post .display-name,
body.theme-light .quoted-post strong,
body.theme-light .quote-card .display-name,
body.theme-light .quote-card strong,
body.theme-light .quoted-tweet .display-name,
body.theme-light .quoted-tweet strong {
  color: var(--text-primary) !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

/* 引用投稿の @ハンドル */
body.theme-light .quote-post .handle,
body.theme-light .quote-post .post-handle,
body.theme-light .quoted-post .handle,
body.theme-light .quote-card .handle,
body.theme-light .quoted-tweet .handle {
  color: var(--text-secondary) !important;
  opacity: 1 !important;
}

/* 引用投稿のタイムスタンプ */
body.theme-light .quote-post time,
body.theme-light .quote-post .timestamp,
body.theme-light .quote-post .post-time,
body.theme-light .quoted-post time,
body.theme-light .quote-card time,
body.theme-light .quoted-tweet time {
  color: var(--text-secondary) !important;
  opacity: 1 !important;
}

/* 引用投稿の本文(グラサン) */
body.theme-light .quote-post .post-body,
body.theme-light .quote-post .post-content,
body.theme-light .quote-post .post-text,
body.theme-light .quote-post p,
body.theme-light .quoted-post .post-body,
body.theme-light .quoted-post p,
body.theme-light .quote-card .post-body,
body.theme-light .quote-card p,
body.theme-light .quoted-tweet .post-body,
body.theme-light .quoted-tweet p,
body.theme-light .embed-post p {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}

/* OGP / リンクプレビューカード */
body.theme-light .ogp-card,
body.theme-light .link-preview,
body.theme-light .ogp-body {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-primary) !important;
  color: var(--text-primary) !important;
}

body.theme-light .ogp-title {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
}

body.theme-light .ogp-desc {
  color: var(--text-primary) !important;
}
body.theme-light .ogp-host {
  color: var(--text-secondary) !important;
}

/* ============================================================
 * デフォルトアバター(イニシャル T のやつ)を見やすく
 * ============================================================ */

/* デフォルトアバター = グラデーション背景 + 白文字 */
body.theme-light .avatar-placeholder,
body.theme-light .default-avatar,
body.theme-light .avatar.no-image,
body.theme-light .drawer-avatar-placeholder,
body.theme-light .suggestion-row-avatar.avatar-placeholder,
body.theme-light .post-avatar.placeholder,
body.theme-light .avatar:not([src]),
body.theme-light .post-card .avatar.no-image,
body.theme-light .placeholder,
body.theme-light .quote-post .avatar.no-image,
body.theme-light .quote-post .placeholder,
body.theme-light .quoted-post .avatar.no-image,
body.theme-light .quote-card .avatar.no-image {
  background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-cyan) 100%) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.20) !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 0 1px rgba(124, 77, 255, 0.20) !important;
  opacity: 1 !important;
}

/* イニシャルアバターのテキスト(T 等)*/
body.theme-light .avatar-placeholder *,
body.theme-light .default-avatar *,
body.theme-light .drawer-avatar-placeholder *,
body.theme-light .placeholder-text {
  color: #ffffff !important;
  font-weight: 800 !important;
  opacity: 1 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.20) !important;
}

/* 念の為、アバター系全般の min-size 確保(消えないように)*/
body.theme-light .avatar-placeholder,
body.theme-light .default-avatar,
body.theme-light .placeholder {
  min-width: 40px;
  min-height: 40px;
}

/* ============================================================
 * 113. ライトモード 全要素テキスト色強制 (最後の砦)
 *   ダーク用に色指定された個別 selector の取りこぼしを掬うため、
 *   ライト時は body 直下の全要素に var(--text-primary) を被せる。
 *
 *   theme-auto + OS light の case は _layout_header.php:158-168 の JS が
 *   body へ theme-light クラスを動的付与するため、ここでカバー済。
 * ============================================================ */

/* === 全要素のテキスト色強制 === */
body.theme-light,
body.theme-light *:not(.post-btn):not(.compose-btn):not(.btn-post):not(.suggestion-follow-btn):not(.btn-follow):not(.follow-btn):not(.avatar-placeholder):not(.default-avatar):not(.drawer-avatar-placeholder):not(.placeholder-avatar):not(.avatar-initial):not(svg):not(path):not(i.fa-solid):not(i.fa-regular):not(i.fa-brands) {
  color: var(--text-primary);
}

/* === ユーザー名・表示名(最強)=== */
body.theme-light .display-name,
body.theme-light .post-author,
body.theme-light .post-name,
body.theme-light .username,
body.theme-light .name,
body.theme-light .author-name,
body.theme-light .suggestion-row-name,
body.theme-light .suggestion-name,
body.theme-light .user-name,
body.theme-light .profile-name,
body.theme-light .col-nav .display-name,
body.theme-light .drawer-x-name,
body.theme-light .aside-card .name,
body.theme-light a strong,
body.theme-light a b,
body.theme-light strong.display-name,
body.theme-light .post-card strong,
body.theme-light .post strong,
body.theme-light .quoted strong {
  color: var(--text-primary) !important;
  font-weight: 800 !important;
  opacity: 1 !important;
  filter: none !important;
}


/* === @ハンドル類は中間色(濃いグレー)=== */
body.theme-light .post-handle,
body.theme-light .handle,
body.theme-light .post-time,
body.theme-light .timestamp,
body.theme-light .post-meta,
body.theme-light .suggestion-row-handle,
body.theme-light .suggestion-handle,
body.theme-light .drawer-x-handle,
body.theme-light .drawer-x-stat-label,
body.theme-light .muted,
body.theme-light .text-muted,
body.theme-light .small,
body.theme-light time {
  color: var(--text-secondary) !important;
  opacity: 1 !important;
  font-weight: 500 !important;
}


/* === 投稿本文 === */
body.theme-light .post-body,
body.theme-light .post-content,
body.theme-light .post-text,
body.theme-light .post p,
body.theme-light .post-card p,
body.theme-light .post-detail p,
body.theme-light .quoted p {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}


/* === スマホナビ等の見出し === */
body.theme-light h1,
body.theme-light h2,
body.theme-light h3,
body.theme-light h4,
body.theme-light .aside-card h3,
body.theme-light .col-main-header h1 {
  color: var(--text-primary) !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}


/* === ホバー時にアクセント色変えてた要素も維持 === */
body.theme-light .suggestion-row:hover .suggestion-row-name,
body.theme-light .post-card:hover .display-name,
body.theme-light .post:hover .display-name,
body.theme-light a:hover .display-name {
  color: var(--text-primary) !important;
  opacity: 1 !important;
}

/* === 表示名 (.author-name / .author-name-text) の白化防止 ===
   .author-link や .suggestion-row-main 等の <a> ラッパーを hover すると
   body.theme-light a:hover の色が乗って名前が読めなくなる事象への対策。
   名前は常に text-primary、@ハンドルは text-secondary に固定する。 */
body.theme-light .author-name,
body.theme-light .author-name-text,
body.theme-light .quote-author .author-name-text,
body.theme-light .user-result-name,
body.theme-light a:hover .author-name,
body.theme-light a:hover .author-name-text,
body.theme-light .author-link:hover,
body.theme-light .author-link:hover .author-name,
body.theme-light .author-link:hover .author-name-text,
body.theme-light .post-card:hover .author-name,
body.theme-light .post:hover .author-name,
body.theme-light .post-card:hover .author-name-text,
body.theme-light .post:hover .author-name-text {
  color: var(--text-primary) !important;
  opacity: 1 !important;
}
body.theme-light .author-handle,
body.theme-light a:hover .author-handle,
body.theme-light .author-link:hover ~ .author-handle,
body.theme-light .post-card:hover .author-handle,
body.theme-light .post:hover .author-handle {
  color: var(--text-secondary) !important;
}


/* === リンク色は青(でも display-name の中は黒)=== */
body.theme-light a {
  color: var(--accent-cyan);
}
body.theme-light a:hover {
  color: #1a8cd8;
  text-decoration: underline;
}

/* リンクの中の display-name は黒のまま */
body.theme-light a .display-name,
body.theme-light a .name,
body.theme-light a strong {
  color: var(--text-primary) !important;
}


/* === 統計数字(いいね数 等)=== */
body.theme-light .post-stat-num,
body.theme-light .stat-num,
body.theme-light .like-count,
body.theme-light .repost-count,
body.theme-light .reply-count,
body.theme-light .follow-count,
body.theme-light .follower-count,
body.theme-light .drawer-x-stat-num {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}


/* === 設定ページ等 === */
body.theme-light .settings-block label,
body.theme-light .settings-section label,
body.theme-light .settings-card label,
body.theme-light .settings-block .theme-name,
body.theme-light .settings-block .theme-desc,
body.theme-light .form-label {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}

body.theme-light .theme-desc.muted,
body.theme-light .form-help {
  color: var(--text-secondary) !important;
}


/* === ボタン全般のラベル === */
body.theme-light button,
body.theme-light .btn,
body.theme-light .button {
  opacity: 1 !important;
}

/* === Font Awesome アイコン === */
body.theme-light i.fa-solid,
body.theme-light i.fa-regular,
body.theme-light i.fa-brands,
body.theme-light .fas,
body.theme-light .far,
body.theme-light .fab {
  opacity: 1 !important;
}

body.theme-light .col-nav i,
body.theme-light .drawer-menu-item i {
  color: var(--text-primary) !important;
}


/* === プロフィールページ === */
body.theme-light .profile-name,
body.theme-light .profile-handle,
body.theme-light .profile-bio,
body.theme-light .profile-location,
body.theme-light .profile-website {
  color: var(--text-primary) !important;
  opacity: 1 !important;
}

body.theme-light .profile-handle,
body.theme-light .profile-meta {
  color: var(--text-secondary) !important;
}


/* === 通知ページ / DM ページ === */
body.theme-light .notification-item,
body.theme-light .notification-text,
body.theme-light .dm-item,
body.theme-light .dm-text,
body.theme-light .message-text {
  color: var(--text-primary) !important;
  opacity: 1 !important;
}


/* ============================================================
 * 114. post-detail / author-name / mobile-header 修正
 * (view_post.php とスマホ版で薄かった箇所を完全対応)
 * ============================================================ */

/* === ライト + auto 共通(JS で適用される theme クラス)=== */

/* === view_post.php の本投稿(大きい表示)=== */
body.theme-light .post-detail,
body.theme-light .post-detail-head,
body.theme-light .post-detail-author,
body.theme-light .post-detail-body,
body.theme-light .post-detail-time,
body.theme-light .post-detail-stats,
body.theme-light .post-detail-actions {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  opacity: 1 !important;
}

body.theme-light .post-detail *,
body.theme-light .post-detail-head *,
body.theme-light .post-detail-body *,
body.theme-light .post-detail-stats * {
  opacity: 1 !important;
}

/* 本投稿の本文(「今日はカレーライス食べた」)*/
body.theme-light .post-detail-body,
body.theme-light .post-detail-body p,
body.theme-light .post-detail-body span,
body.theme-light .post-detail-body div {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
  font-size: 1.4rem !important;
  line-height: 1.5 !important;
  opacity: 1 !important;
}

/* 表示名 (author-name) - 本投稿の名前 */
body.theme-light .author-name,
body.theme-light .post-detail .author-name,
body.theme-light .post-detail-author .author-name,
body.theme-light .post-author-meta .author-name {
  color: var(--text-primary) !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

/* @ハンドル (author-handle) */
body.theme-light .author-handle,
body.theme-light .post-detail .author-handle,
body.theme-light .post-author-meta .author-handle {
  color: var(--text-secondary) !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}

/* 詳細時刻 */
body.theme-light .post-detail-time,
body.theme-light .post-detail-time * {
  color: var(--text-secondary) !important;
  opacity: 1 !important;
}

/* 統計(返信数, リポスト数, いいね数, ブックマーク数)*/
body.theme-light .post-detail-stats,
body.theme-light .post-detail-stats span,
body.theme-light .post-detail-stats b {
  color: var(--text-primary) !important;
  opacity: 1 !important;
}
body.theme-light .post-detail-stats .muted {
  color: var(--text-secondary) !important;
}

/* author-link 全般(リンクの中の名前)*/
body.theme-light .author-link,
body.theme-light .author-link * {
  opacity: 1 !important;
}
body.theme-light .author-link {
  color: var(--text-primary) !important;
  text-decoration: none;
}

/* === スマホ上部の固定ヘッダー(.mobile-header)=== */
body.theme-light .mobile-header {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-primary) !important;
  color: var(--text-primary) !important;
}

body.theme-light .mobile-header *,
body.theme-light .mobile-header-content * {
  opacity: 1 !important;
}

body.theme-light .mobile-header-content {
  color: var(--text-primary) !important;
}

/* === スマホヘッダーの「投稿」ボタン(+ アイコン)=== */
body.theme-light .mobile-header-content .post-button,
body.theme-light .mobile-header-content .post-button-mobile,
body.theme-light .mobile-header-content a.post-btn,
body.theme-light .mobile-header-content .compose-btn {
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan)) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(124, 77, 255, 0.30) !important;
}

/* === スマホヘッダーのアバター(左の小さい新幹線アイコン)=== */
body.theme-light .mobile-header-content .drawer-mini-avatar,
body.theme-light .mobile-header-content img,
body.theme-light .mobile-header-content .avatar {
  border: 2px solid var(--border-primary) !important;
  background: transparent !important;
}
/* ただし中央ロゴは透過 PNG なので枠を付けない (上の img 一括指定を打ち消す) */
body.theme-light .mobile-header-content .mobile-logo img {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* === スマホサイドドロワー(side-drawer)を完全に白く === */
body.theme-light .side-drawer,
body.theme-light #sideDrawer {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

body.theme-light .side-drawer *,
body.theme-light #sideDrawer * {
  opacity: 1 !important;
}

/* ドロワーヘッダー(win350 のアバター + 名前部分) */
body.theme-light .drawer-header,
body.theme-light .drawer-x-header {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border-primary) !important;
}

body.theme-light .drawer-x-name {
  color: var(--text-primary) !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  opacity: 1 !important;
}

body.theme-light .drawer-x-handle {
  color: var(--text-secondary) !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}

body.theme-light .drawer-x-stats {
  color: var(--text-primary) !important;
}

body.theme-light .drawer-x-stat,
body.theme-light .drawer-x-stat * {
  color: var(--text-primary) !important;
  opacity: 1 !important;
}

body.theme-light .drawer-x-stat-num {
  color: var(--text-primary) !important;
  font-weight: 800 !important;
}

body.theme-light .drawer-x-stat-label {
  color: var(--text-secondary) !important;
  font-weight: 500 !important;
}

body.theme-light .drawer-x-toggle {
  color: var(--text-primary) !important;
}
/* ============================================================
 * opacity が薄かった既存箇所への対応(全テーマで)
 * 7868: opacity: 0.5 など、ライト時に文字が消える原因対応
 * ============================================================ */

body.theme-light .author-link[style*="opacity"],
body.theme-light a[style*="opacity"] {
  opacity: 1 !important;
}


/* ============================================================
 * 115. ライトモード補完 (§116 でカバーされない要素)
 *
 * §116 「ブランド強化ライト v2」が body 背景・カラム・投稿カード等
 * 主要セレクタの .theme-light 表示を担当する (本セクションの後で定義)。
 * ここでは §116 が触らない、モバイルヘッダー/ドロワー/ボトムナビ/
 * リンク色/ハッシュタグの .theme-light 規則と、auto モード (OS 連動) 用の
 * 旧 §115 の .theme-light 部分 (body bg, .col-main, .post-card 等) は
 * §116 で完全に上書きされていたため Phase 2 で削除。
 * ============================================================ */

/* === スマホヘッダー === */
body.theme-light .mobile-header {
  background: rgba(255, 255, 255, 0.80) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(124, 77, 255, 0.10) !important;
}

/* === スマホドロワー === */
body.theme-light .side-drawer,
body.theme-light #sideDrawer {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

body.theme-light .drawer-header,
body.theme-light .drawer-x-header {
  background: linear-gradient(180deg,
    rgba(124, 77, 255, 0.06),
    rgba(255, 255, 255, 0.80)) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* === スマホ下部ナビ === */
body.theme-light .mobile-nav,
body.theme-light .bottom-nav,
body.theme-light .tab-bar {
  background: rgba(255, 255, 255, 0.80) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(124, 77, 255, 0.10) !important;
}

/* === タブのアクティブ (§116 がカバーしない .tab.active のみ) === */
body.theme-light .tab.active {
  color: var(--accent-purple) !important;
  border-bottom: 4px solid var(--accent-purple) !important;
}

/* === リンク色 (ブランド紫) === */
body.theme-light a:not(.post-btn):not(.compose-btn):not(.btn-post):not(.suggestion-follow-btn):not(.btn-follow):not(.follow-btn):not(.author-link) {
  color: var(--accent-purple);
}

body.theme-light a:hover:not(.post-btn):not(.compose-btn):not(.btn-post) {
  color: #5e2eee;
}

/* === ハッシュタグ・メンション・URL (シアン) ===
   .linkified は引用カード内 (linkify_text_inert 経由) で <span> として出力される
   ケースがあり、§113 のテキスト色強制ワイルドカードが優先される。
   ここで !important を付けて青を確保する。 */
body.theme-light .hashtag,
body.theme-light .mention,
body.theme-light .linkified {
  color: var(--accent-cyan) !important;
}

/* §144 公共注釈プロンプト (評価中 / 評価依頼) のライト時表示:
   - 枠とアイコンはアクセント色 (cyan / green) を維持
   - 本文テキストは黒 (var(--text-primary)) にして可読性優先
   §113 のテキスト色強制ワイルドカードへの対策で !important 指定。 */

/* 評価中ピル: アイコン = cyan、文字 = 黒 */
body.theme-light .post-cn-evaluating-prompt {
  color: var(--accent-cyan) !important;   /* デフォは cyan (アイコンと chevron が継承) */
}
body.theme-light .post-cn-evaluating-prompt .pcep-text {
  color: var(--text-primary) !important;
}

/* 評価依頼ピル: アイコン = green、文字 = 黒 */
body.theme-light .post-cn-rate-prompt {
  color: var(--accent-green) !important;
}
body.theme-light .post-cn-rate-prompt .pcrp-text {
  color: var(--text-primary) !important;
}

/* SVG ガベルは親の color を確実に継承させる (§113 ワイルドカードで
   <rect>/<g> が dark に上書きされて fill: currentColor が黒になる事故防止) */
body.theme-light .post-cn-evaluating-prompt .cn-icon-gavel,
body.theme-light .post-cn-evaluating-prompt .cn-icon-gavel *,
body.theme-light .post-cn-rate-prompt .cn-icon-gavel,
body.theme-light .post-cn-rate-prompt .cn-icon-gavel * {
  fill: currentColor !important;
}
body.theme-light .post-cn-evaluating-prompt .cn-icon-gavel * {
  color: var(--accent-cyan) !important;
}
body.theme-light .post-cn-rate-prompt .cn-icon-gavel * {
  color: var(--accent-green) !important;
}

/* === ドロワー補完 (Phase 3 で @media auto ブロックを削除する際に
       .theme-light 側に対応規則がなかった分を移植) === */
body.theme-light .drawer-menu,
body.theme-light .drawer-footer {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

body.theme-light .drawer-menu-item:hover {
  background: var(--border-primary) !important;
}

/* ============================================================
 * 116. Morioka ブランド強化ライト v2
 *   光をもっと濃く、ネオン風の枠線、ガラス感強め
 * ============================================================ */

/* === 背景: ネオン光をもっと濃く・大きく === */
body.theme-light {
  background:
    radial-gradient(ellipse 1600px 1100px at 8% -10%,
      rgba(124, 77, 255, 0.32),
      transparent 55%),
    radial-gradient(ellipse 1400px 1000px at 92% 8%,
      rgba(0, 184, 212, 0.26),
      transparent 55%),
    radial-gradient(ellipse 1200px 1000px at 50% 105%,
      rgba(0, 200, 83, 0.22),
      transparent 60%),
    radial-gradient(ellipse 900px 700px at 95% 65%,
      rgba(255, 77, 109, 0.14),
      transparent 65%),
    radial-gradient(ellipse 700px 600px at 5% 70%,
      rgba(255, 215, 0, 0.10),
      transparent 70%),
    linear-gradient(135deg, #ede9ff 0%, #f0f5ff 50%, #e8f5fa 100%) !important;
  background-attachment: fixed !important;
  color: var(--text-primary) !important;
}

/* === メインカラム: ガラス強め + 紫縁取り === */
body.theme-light .col-main {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border-left: 1px solid rgba(124, 77, 255, 0.10) !important;
  border-right: 1px solid rgba(124, 77, 255, 0.10) !important;
  box-shadow: none !important;
}

/* === 左サイドバー: グラデの縁取り === */
body.theme-light .col-nav,
body.theme-light nav.col-nav {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border-right: 1px solid rgba(124, 77, 255, 0.10) !important;
}

/* === 右サイドバー === */
body.theme-light .col-aside {
  background: rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
}

/* === メインヘッダー(ホーム タイトル)=== */
body.theme-light .col-main-header {
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(124, 77, 255, 0.10) !important;
  box-shadow: none !important;
}

/* === 投稿カード: ガラス + 紫オーラ === */
body.theme-light .post-card,
body.theme-light .post,
body.theme-light .post-item,
body.theme-light .post-detail {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(124, 77, 255, 0.15) !important;
  transition: all 0.2s ease;
}

body.theme-light .post-card:hover,
body.theme-light .post:hover {
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: inset 3px 0 0 var(--accent-purple), 0 4px 24px rgba(124, 77, 255, 0.12) !important;
}

/* === コンポーザ === */
body.theme-light .composer,
body.theme-light .post-composer {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(124, 77, 255, 0.12) !important;
  border-radius: 16px;
  box-shadow: 0 1px 6px rgba(124, 77, 255, 0.05) !important;
}

/* === 右サイドバーカード: ネオン縁取り === */
body.theme-light .aside-card {
  background: rgba(255, 255, 255, 0.70) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  /* border-image はグラデでも border-radius を無視して角が四角くなる(=雑な角)
     ため、角丸を尊重する通常の単色ボーダーに変更 */
  border: 1px solid rgba(124, 77, 255, 0.12) !important;
  border-image: none !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 10px rgba(124, 77, 255, 0.06) !important;
}

body.theme-light .aside-card h3 {
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

/* === 検索バー === */
body.theme-light .aside-search input {
  /* ハードコード白 (rgba(255,255,255,.85)) だとカスタム panel/bg が効かず、
     ダーク系のカスタムカラー時に白い検索ボックスが浮いて見える。
     CSS 変数経由にして、ユーザの panel 設定 (= --bg-card) を反映させる。 */
  background: var(--bg-card) !important;
  border: 1.5px solid var(--border-primary) !important;
  color: var(--text-primary) !important;
  border-radius: 9999px;
}

body.theme-light .aside-search input:focus {
  background: var(--bg-card) !important;
  border-color: var(--accent-purple) !important;
  box-shadow:
    0 0 0 4px rgba(124, 77, 255, 0.12),
    0 4px 16px rgba(124, 77, 255, 0.20) !important;
}

/* === タブのアクティブ: グラデ + 発光 === */
body.theme-light .tabs a.active,
body.theme-light .tab.active {
  color: var(--accent-purple) !important;
  font-weight: 800;
  border-bottom: 4px solid transparent !important;
  border-image: linear-gradient(90deg, var(--accent-purple), var(--accent-cyan)) 1 !important;
  background: linear-gradient(180deg,
    transparent,
    rgba(124, 77, 255, 0.05)) !important;
}

body.theme-light .tabs a:hover {
  background: rgba(124, 77, 255, 0.06) !important;
}

/* === ナビ項目アクティブ: 紫グロウ === */
body.theme-light .col-nav .nav-item.active,
body.theme-light .col-nav .nav-menu a.active {
  color: var(--accent-purple) !important;
  font-weight: 800 !important;
  background: linear-gradient(90deg,
    rgba(124, 77, 255, 0.12),
    rgba(0, 184, 212, 0.06)) !important;
  border-radius: 9999px !important;
}

body.theme-light .col-nav .nav-item:hover {
  background: rgba(124, 77, 255, 0.08) !important;
  border-radius: 9999px;
}

/* === 「投稿する」ボタン: ホバー時のグロウ強化 === */
body.theme-light .post-btn,
body.theme-light .compose-btn,
body.theme-light .btn-post,
body.theme-light .col-nav .post-btn,
body.theme-light .sidebar-actions a {
  background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-cyan) 100%) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 800 !important;
  box-shadow:
    0 4px 16px rgba(124, 77, 255, 0.40),
    0 0 0 1px rgba(255, 255, 255, 0.30) inset !important;
  transition: all 0.2s ease !important;
}

body.theme-light .post-btn:hover,
body.theme-light .col-nav .post-btn:hover {
  box-shadow:
    0 6px 24px rgba(124, 77, 255, 0.50),
    0 0 32px rgba(0, 184, 212, 0.40),
    0 0 0 1px rgba(255, 255, 255, 0.40) inset !important;
  transform: translateY(-2px) scale(1.02);
}

/* === フォローボタン: 紫アウトライン → 押すとグラデ === */
body.theme-light .suggestion-follow-btn,
body.theme-light .btn-follow,
body.theme-light .follow-btn {
  background: linear-gradient(135deg, var(--text-primary), #2a1f5c) !important;
  color: #ffffff !important;
  border: 1px solid rgba(124, 77, 255, 0.40) !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  padding: 6px 18px !important;
  box-shadow: 0 2px 8px rgba(124, 77, 255, 0.20) !important;
}

body.theme-light .suggestion-follow-btn:hover,
body.theme-light .btn-follow:hover {
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan)) !important;
  box-shadow: 0 4px 16px rgba(124, 77, 255, 0.40) !important;
}

/* === アバター: 紫オーラの縁取り === */
body.theme-light .avatar,
body.theme-light .post-avatar,
body.theme-light img.avatar,
body.theme-light .drawer-x-avatar,
body.theme-light .suggestion-row-avatar {
  border: 2px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow:
    0 0 0 1px rgba(124, 77, 255, 0.20),
    0 2px 8px rgba(124, 77, 255, 0.15) !important;
}

/* === デフォルトアバター(イニシャル T 等)強化 === */
body.theme-light .avatar-placeholder,
body.theme-light .default-avatar,
body.theme-light .drawer-avatar-placeholder {
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan), var(--accent-green)) !important;
  background-size: 200% 200% !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  border: 2px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow:
    0 0 0 1px rgba(124, 77, 255, 0.30),
    0 4px 12px rgba(124, 77, 255, 0.25) !important;
  border-radius: 50% !important;
  animation: morioka-aurora 6s ease infinite;
}

@keyframes morioka-aurora {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* === スマホヘッダー === */
body.theme-light .mobile-header {
  background: rgba(255, 255, 255, 0.70) !important;
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border-bottom: 1px solid rgba(124, 77, 255, 0.18) !important;
  box-shadow: 0 2px 16px rgba(124, 77, 255, 0.08) !important;
}

/* === スマホドロワー === */
body.theme-light .side-drawer,
body.theme-light #sideDrawer {
  background:
    linear-gradient(180deg,
      rgba(124, 77, 255, 0.10),
      rgba(255, 255, 255, 0.95) 30%,
      rgba(255, 255, 255, 0.95)) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-right: 1px solid rgba(124, 77, 255, 0.20) !important;
}

body.theme-light .drawer-header,
body.theme-light .drawer-x-header {
  background: linear-gradient(135deg,
    rgba(124, 77, 255, 0.12) 0%,
    rgba(0, 184, 212, 0.08) 50%,
    rgba(0, 200, 83, 0.06) 100%) !important;
  border-bottom: 1px solid rgba(124, 77, 255, 0.18) !important;
}

/* === スマホ下部ナビ === */
body.theme-light .mobile-nav,
body.theme-light .bottom-nav,
body.theme-light .tab-bar {
  background: rgba(255, 255, 255, 0.70) !important;
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border-top: 1px solid rgba(124, 77, 255, 0.20) !important;
  box-shadow: 0 -2px 16px rgba(124, 77, 255, 0.08) !important;
}

body.theme-light .mobile-nav a.active,
body.theme-light .tab-bar a.active {
  color: var(--accent-purple) !important;
}

/* === アクションボタン色: Morioka ネオン === */
body.theme-light .post-action.reply,
body.theme-light .action-btn.reply {
  --action-color: var(--accent-cyan);
}
body.theme-light .post-action.repost,
body.theme-light .action-btn.repost {
  --action-color: var(--accent-green);
}
body.theme-light .post-action.like,
body.theme-light .action-btn.like {
  --action-color: var(--accent-pink);
}
body.theme-light .post-action.bookmark,
body.theme-light .action-btn.bookmark {
  --action-color: #ffd700;
}
body.theme-light .post-action.share,
body.theme-light .action-btn.share {
  --action-color: var(--accent-purple);
}

body.theme-light .post-action:hover,
body.theme-light .action-btn:hover {
  color: var(--action-color, var(--accent-purple)) !important;
}

body.theme-light .action-btn.liked,
body.theme-light .post-action.liked {
  color: var(--accent-pink) !important;
}
body.theme-light .action-btn.reposted,
body.theme-light .post-action.reposted {
  color: var(--accent-green) !important;
}
body.theme-light .action-btn.bookmarked,
body.theme-light .post-action.bookmarked {
  color: #ffd700 !important;
}

/* === ハッシュタグ・メンション: シアンのまま強調 === */
body.theme-light .hashtag,
body.theme-light .mention {
  color: var(--accent-cyan) !important;
  font-weight: 600;
}

body.theme-light .hashtag:hover,
body.theme-light .mention:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent-purple);
}

/* === 引用投稿(ガラス風)=== */
body.theme-light .quote-post,
body.theme-light .quoted-post,
body.theme-light .quote-card {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(124, 77, 255, 0.20) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 12px rgba(124, 77, 255, 0.08) !important;
}

/* === スクロールバー === */
body.theme-light ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent-purple), var(--accent-cyan)) !important;
  border-radius: 4px;
}
body.theme-light ::-webkit-scrollbar-track {
  background: rgba(124, 77, 255, 0.05) !important;
}

/* === リンク === */
body.theme-light a:not(.post-btn):not(.compose-btn):not(.btn-post):not(.suggestion-follow-btn):not(.btn-follow):not(.follow-btn):not(.author-link):not(.nav-item) {
  color: var(--accent-purple);
}
body.theme-light a:hover:not(.post-btn):not(.compose-btn) {
  color: #5e2eee;
}
/* ============================================================
 * 117. profile-tabs ライトモード対応
 *   黒背景を Morioka ガラス白に
 * ============================================================ */

/* === ライトモード === */
body.theme-light .profile-tabs {
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid rgba(124, 77, 255, 0.18) !important;
  box-shadow: 0 2px 12px rgba(124, 77, 255, 0.06) !important;
}

body.theme-light .profile-tab {
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
  position: relative;
  transition: all 0.2s ease;
}

body.theme-light .profile-tab:hover {
  background: rgba(124, 77, 255, 0.06) !important;
  color: var(--text-primary) !important;
}

body.theme-light .profile-tab.active {
  color: var(--accent-purple) !important;
  font-weight: 800 !important;
  background: linear-gradient(180deg,
    transparent,
    rgba(124, 77, 255, 0.04)) !important;
}

body.theme-light .profile-tab.active::after {
  background: linear-gradient(90deg, var(--accent-purple), var(--accent-cyan)) !important;
  height: 4px !important;
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(124, 77, 255, 0.40) !important;
}

/* ============================================================
 * 118. プロフィールヘッダー周辺もガラス調に
 * ============================================================ */

body.theme-light .profile-header,
body.theme-light .profile-info,
body.theme-light .profile-bio-section,
body.theme-light .profile-stats {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--text-primary) !important;
}

body.theme-light .profile-header *,
body.theme-light .profile-info *,
body.theme-light .profile-stats * {
  opacity: 1 !important;
}

body.theme-light .profile-bio,
body.theme-light .profile-display-name {
  color: var(--text-primary) !important;
  opacity: 1 !important;
}

body.theme-light .profile-handle,
body.theme-light .profile-meta,
body.theme-light .profile-stats .stat-label {
  color: var(--text-secondary) !important;
  opacity: 1 !important;
}

body.theme-light .profile-stats .stat-num,
body.theme-light .stat-num {
  color: var(--text-primary) !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}


/* ============================================================
 * 119. profile-stats(フォロー中/フォロワーバー)ガラス化
 * ============================================================ */

/* === 統計バー全体: 透明にして後ろのオーロラ背景に溶け込む === */
body.theme-light .profile-stats {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 12px 0 !important;
  display: flex;
  gap: 24px;
}

/* 個別リンク */
body.theme-light .profile-stat-link {
  background: transparent !important;
  color: inherit !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
  opacity: 1 !important;
}

body.theme-light .profile-stat-link:hover {
  border-bottom-color: var(--accent-purple) !important;
  text-decoration: none;
}

/* 数字(14, 10) */
body.theme-light .profile-stat-num {
  color: var(--text-primary) !important;
  font-weight: 800 !important;
  font-size: 1.05rem;
  opacity: 1 !important;
  background: transparent !important;
}

/* ラベル(フォロー中、フォロワー) */
body.theme-light .profile-stat-label {
  color: var(--text-secondary) !important;
  font-weight: 500 !important;
  opacity: 1 !important;
  background: transparent !important;
}

body.theme-light .profile-stat-link:hover .profile-stat-num {
  color: var(--accent-purple) !important;
}

body.theme-light .profile-stat-link:hover .profile-stat-label {
  color: var(--accent-purple) !important;
}

/* ============================================================
 * 120. プロフィール領域全体を完全透明化(オーロラ背景に溶け込む)
 *   118 ルールで profile-header/info/stats を白くしたのを取り消し
 * ============================================================ */

body.theme-light .profile-header,
body.theme-light .profile-info,
body.theme-light .profile-bio-section,
body.theme-light .profile-stats,
body.theme-light .profile-meta,
body.theme-light .profile-card {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* スマホ版でプロフィール領域が独立カードになってないか確認 */
@media (max-width: 767px) {
  body.theme-light .profile-header,
  body.theme-light .profile-info,
  body.theme-light .profile-stats,
  body.theme-light .profile-bio-section {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
  }
}


/* === ただし、テキストの色は維持 === */
body.theme-light .profile-display-name,
body.theme-light .profile-info h1,
body.theme-light .profile-info h2,
body.theme-light .profile-name {
  color: var(--text-primary) !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

body.theme-light .profile-handle,
body.theme-light .profile-meta,
body.theme-light .profile-bio,
body.theme-light .profile-info .muted {
  color: var(--text-secondary) !important;
  opacity: 1 !important;
}



/* ============================================================
 * 121. follows.php(フォロー / フォロワー一覧)X 風 + ライト/ダーク
 * ============================================================ */

/* === ヘッダー === */
.follows-header {
  padding: 0;
}
.follows-header-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
}
.follows-header-row .back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--text-primary);
  text-decoration: none;
  transition: background 0.2s ease;
}
.follows-header-row .back-btn:hover {
  background: var(--bg-hover);
}
.follows-header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.follows-h1 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}
.follows-h1-handle {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* タブ(profile-tabs を流用)*/
.follows-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-primary);
  background: rgba(7, 9, 22, 0.85);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* === ユーザリスト === */
.follows-list {
  display: flex;
  flex-direction: column;
}

.follows-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-primary);
  transition: background 0.15s ease;
  cursor: default;
}
.follows-row:hover {
  background: var(--bg-card-hover);
}

.follows-row-link {
  flex: 0 0 auto;
  text-decoration: none;
}
.follows-row-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  background: var(--gradient-primary);
}

.follows-row-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.follows-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.follows-row-names {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}
.follows-row-name-link {
  text-decoration: none;
  color: var(--text-primary);
}
.follows-row-name-link:hover .follows-row-name {
  text-decoration: underline;
}
.follows-row-name {
  font-weight: 800;
  color: var(--text-primary);
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.follows-row-handle {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.follows-row-lock {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.follows-row-btn {
  flex: 0 0 auto;
  padding: 6px 16px;
  border-radius: 9999px;
  font-weight: 800;
  font-size: 0.85rem;
  border: none;
  cursor: pointer;
  background: var(--text-primary);
  color: var(--bg-primary);
  transition: all 0.15s ease;
  white-space: nowrap;
}
.follows-row-btn:hover:not(:disabled) {
  opacity: 0.85;
}
.follows-row-btn.following-state {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
}
.follows-row-btn.following-state:hover {
  background: rgba(255, 77, 109, 0.10);
  color: var(--accent-pink);
  border-color: var(--accent-pink);
}
.follows-row-btn.pending-state {
  background: var(--bg-tertiary);
  color: var(--text-muted);
  cursor: default;
}

.follows-row-bio {
  font-size: 0.9rem;
  color: var(--text-primary);
  line-height: 1.4;
  margin: 4px 0 0;
  word-break: break-word;
}

/* === empty state === */
.follows-list .empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.follows-list .empty-state .empty-icon {
  font-size: 3rem;
  margin-bottom: 16px;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
}

/* スマホ対応 */
@media (max-width: 767px) {
  .follows-header-row {
    padding: 10px 12px;
  }
  .follows-h1 {
    font-size: 1.1rem;
  }
  .follows-row {
    padding: 12px;
  }
  .follows-row-avatar {
    width: 44px;
    height: 44px;
  }
  .follows-row-name {
    font-size: 0.9rem;
  }
}

/* ============================================================
 * ライトモード対応(theme-light + theme-auto OS連動)
 * ============================================================ */

/* タブバー(白に) */
body.theme-light .follows-tabs {
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid rgba(124, 77, 255, 0.18) !important;
}

/* 戻るボタン */
body.theme-light .follows-header-row .back-btn {
  color: var(--text-primary) !important;
}
body.theme-light .follows-header-row .back-btn:hover {
  background: rgba(124, 77, 255, 0.08) !important;
}

/* タイトル */
body.theme-light .follows-h1 {
  color: var(--text-primary) !important;
  opacity: 1 !important;
}
body.theme-light .follows-h1-handle {
  color: var(--text-secondary) !important;
}

/* ユーザ行 */
body.theme-light .follows-row {
  border-bottom: 1px solid rgba(124, 77, 255, 0.12) !important;
}
body.theme-light .follows-row:hover {
  background: rgba(124, 77, 255, 0.04) !important;
}

/* 名前 */
body.theme-light .follows-row-name,
body.theme-light .follows-row-name-link {
  color: var(--text-primary) !important;
  opacity: 1 !important;
}

/* ハンドル */
body.theme-light .follows-row-handle,
body.theme-light .follows-row-lock {
  color: var(--text-secondary) !important;
}

/* bio */
body.theme-light .follows-row-bio {
  color: var(--text-primary) !important;
  opacity: 1 !important;
}

/* フォローボタン */
body.theme-light .follows-row-btn {
  background: linear-gradient(135deg, var(--text-primary), #2a1f5c) !important;
  color: #ffffff !important;
  border: 1px solid rgba(124, 77, 255, 0.40) !important;
  box-shadow: 0 2px 8px rgba(124, 77, 255, 0.20) !important;
}
body.theme-light .follows-row-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan)) !important;
  box-shadow: 0 4px 16px rgba(124, 77, 255, 0.40) !important;
}
body.theme-light .follows-row-btn.following-state {
  background: transparent !important;
  color: var(--text-primary) !important;
  border: 1px solid rgba(124, 77, 255, 0.30) !important;
  box-shadow: none !important;
}
body.theme-light .follows-row-btn.following-state:hover {
  background: rgba(255, 77, 109, 0.10) !important;
  color: var(--accent-pink) !important;
  border-color: var(--accent-pink) !important;
}
body.theme-light .follows-row-btn.pending-state {
  background: rgba(124, 77, 255, 0.08) !important;
  color: var(--text-secondary) !important;
  border: 1px solid rgba(124, 77, 255, 0.20) !important;
  box-shadow: none !important;
}

/* デフォルトアバター */
body.theme-light .follows-row-avatar.avatar-placeholder {
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan), var(--accent-green)) !important;
  background-size: 200% 200% !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    0 0 0 1px rgba(124, 77, 255, 0.30),
    0 4px 12px rgba(124, 77, 255, 0.25);
  animation: morioka-aurora 6s ease infinite;
}

/* empty state */
body.theme-light .follows-list .empty-state {
  color: var(--text-secondary) !important;
}

/* ============================================================
 * 123. パフォーマンス最適化(チカチカ問題対応)
 *   - backdrop-filter を投稿カードから削除(膨大な数の要素)
 *   - background-attachment: fixed → scroll に変更
 *   - aurora アニメーションを停止(アバター)
 *   - GPU 合成ヒント追加
 * ============================================================ */

/* === 背景の固定アタッチを解除(スクロール時の再描画を減らす)=== */
body.theme-light,
body.theme-auto {
  background-attachment: scroll !important;
}

/* === 投稿カードから backdrop-filter を削除(ぼかしは重い)===
   背景は完全不透明 (var(--bg-card) = #ffffff) にする。半透明 (0.92) だと
   §116 body bg の green/cyan radial が透けて、特に view_post.php 等で
   ページ下部の post-detail が緑色っぽく見える不具合になっていた。
   .nested-reply-thread / .reply-form-section / .timeline も同様に不透明化し
   body 緑グラデが透けないようにする。 */
body.theme-light .post-card,
body.theme-light .post,
body.theme-light .post-item,
body.theme-light .post-detail,
body.theme-light .composer,
body.theme-light .post-composer,
body.theme-light .nested-reply-thread,
body.theme-light .reply-form-section,
body.theme-light .timeline,
body.theme-light .empty-state {
  background: var(--bg-card) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* === ホバー時のグロウとシャドウも軽量化(スクロールに干渉)=== */
body.theme-light .post-card:hover,
body.theme-light .post:hover {
  background: var(--bg-secondary) !important;
  box-shadow: none !important;
}


/* === aurora アニメーションを停止(数十個のアバターでループするのは重い)=== */
body.theme-light .avatar-placeholder,
body.theme-light .default-avatar,
body.theme-light .drawer-avatar-placeholder,
body.theme-light .follows-row-avatar.avatar-placeholder {
  animation: none !important;
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan)) !important;
}


/* === スクロール時に再描画される高負荷要素に GPU 合成ヒント ===
   .col-main-header はここから外す: hidden 時の transform: translateY(-200%) を
   この rule の transform: translateZ(0) (specificity 0-2-1) が上書きして、
   light テーマだけ「ホーム」が中央に残る症状が出ていた。 */
body.theme-light .mobile-header,
body.theme-light .col-aside {
  will-change: auto;
  transform: translateZ(0);
}


/* === ホバー transition を軽く === */
body.theme-light .post-card,
body.theme-light .post {
  transition: background 0.1s linear !important;
}


/* ============================================================
 * 124. ソフトダーク + ミッドナイトテーマ
 *   既存のダーク基盤の上にバリエーションとして上書き
 * ============================================================ */

/* === ソフトダーク: 紫光を抑えて目に優しい === */
body.theme-dark.theme-soft {
  --bg-primary:  #14182a;
  --bg-secondary:#1a1f35;
  --bg-tertiary: #1c2138;
  --bg-overlay:  rgba(20, 24, 42, 0.95);
  --bg-hover:    rgba(255, 255, 255, 0.03);
  --bg-card:     rgba(26, 31, 53, 0.55);
  --bg-card-hover: rgba(255, 255, 255, 0.02);
  --text-primary:   #d8dcef;
  --text-secondary: #8a92b3;
  --text-muted:     #5e6685;
}

body.theme-dark.theme-soft {
  background:
    radial-gradient(ellipse 1200px 700px at 15% 0%,
      rgba(124, 77, 255, 0.10),
      transparent 65%),
    radial-gradient(ellipse 1000px 600px at 85% 5%,
      rgba(0, 184, 212, 0.06),
      transparent 65%),
    #14182a !important;
}

body.theme-dark.theme-soft html::before,
html:has(body.theme-dark.theme-soft)::before {
  display: none !important;
}

/* === ミッドナイト: 真っ黒 OLED 向け === */
body.theme-dark.theme-midnight {
  --bg-primary:  #000000;
  --bg-secondary:#0a0a0a;
  --bg-tertiary: #111111;
  --bg-overlay:  rgba(0, 0, 0, 0.95);
  --bg-hover:    rgba(255, 255, 255, 0.05);
  --bg-card:     rgba(10, 10, 10, 0.85);
  --bg-card-hover: rgba(255, 255, 255, 0.03);
  --text-primary:   #e7ecff;
  --text-secondary: #888899;
  --text-muted:     #555566;
  --border-primary:   rgba(255, 255, 255, 0.08);
  --border-secondary: rgba(255, 255, 255, 0.04);
}

body.theme-dark.theme-midnight {
  background: #000000 !important;
}

html:has(body.theme-dark.theme-midnight)::before {
  display: none !important;
}

/* ミッドナイトはネオン光を完全カット */
body.theme-dark.theme-midnight .col-main,
body.theme-dark.theme-midnight .col-nav,
body.theme-dark.theme-midnight .col-aside {
  background: #000000 !important;
}

body.theme-dark.theme-midnight .post-card,
body.theme-dark.theme-midnight .post-card:hover {
  background: #000000 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

/* ミッドナイトでもブランドのグラデボタンは維持 */
body.theme-dark.theme-midnight .post-btn,
body.theme-dark.theme-midnight .col-nav .post-btn {
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan)) !important;
  color: #ffffff !important;
}

/* ============================================================
 * 125. 文字サイズ(font_size)
 * ============================================================ */
body.font-small {
  font-size: 14px;
}
body.font-small .post-body,
body.font-small .post-content,
body.font-small .post-text,
body.font-small .post p {
  font-size: 0.875rem !important;
  line-height: 1.4;
}

body.font-normal {
  font-size: 16px;
}

body.font-large {
  font-size: 18px;
}
body.font-large .post-body,
body.font-large .post-content,
body.font-large .post-text,
body.font-large .post p {
  font-size: 1.125rem !important;
  line-height: 1.5;
}

body.font-xlarge {
  font-size: 20px;
}
body.font-xlarge .post-body,
body.font-xlarge .post-content,
body.font-xlarge .post-text,
body.font-xlarge .post p {
  font-size: 1.25rem !important;
  line-height: 1.55;
}
body.font-xlarge .display-name,
body.font-xlarge .post-author,
body.font-xlarge .author-name {
  font-size: 1.05rem !important;
}

/* ============================================================
 * 126. 投稿の密度(density)
 * ============================================================ */
body.density-compact .post-card,
body.density-compact .post,
body.density-compact .post-item {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
body.density-compact .post-body,
body.density-compact .post-content {
  margin: 4px 0 !important;
}
body.density-compact .post-image,
body.density-compact .post-media {
  margin-top: 4px !important;
}

body.density-normal .post-card,
body.density-normal .post,
body.density-normal .post-item {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

body.density-comfortable .post-card,
body.density-comfortable .post,
body.density-comfortable .post-item {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}
body.density-comfortable .post-body,
body.density-comfortable .post-content {
  margin: 8px 0 !important;
  line-height: 1.55;
}

/* ============================================================
 * 127. 文字サイズ + 密度 UI カード
 * ============================================================ */
.font-size-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.font-size-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 8px;
  border: 1.5px solid var(--border-primary);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: var(--bg-card);
}
.font-size-card input { display: none; }
.font-size-card:hover {
  border-color: var(--accent-cyan);
}
.font-size-card.selected {
  border-color: var(--accent-cyan);
  background: rgba(0, 229, 255, 0.08);
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.20);
}
.font-size-card span {
  font-weight: 800;
  color: var(--text-primary);
}
.font-size-name {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.density-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.density-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  border: 1.5px solid var(--border-primary);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: var(--bg-card);
  text-align: center;
}
.density-card input { display: none; }
.density-card i {
  font-size: 1.5rem;
  color: var(--accent-purple);
}
.density-card:hover {
  border-color: var(--accent-purple);
}
.density-card.selected {
  border-color: var(--accent-purple);
  background: rgba(124, 77, 255, 0.08);
  box-shadow: 0 0 16px rgba(124, 77, 255, 0.20);
}
.density-name {
  font-weight: 700;
  color: var(--text-primary);
}

/* スマホ対応 */
@media (max-width: 600px) {
  .font-size-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .density-grid {
    grid-template-columns: 1fr;
  }
}

/* ライトモード対応 */
body.theme-light .font-size-card,
body.theme-light .density-card {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(124, 77, 255, 0.20) !important;
  color: var(--text-primary) !important;
}
body.theme-light .font-size-card.selected {
  border-color: var(--accent-cyan) !important;
  background: rgba(0, 184, 212, 0.08) !important;
}
body.theme-light .density-card.selected {
  border-color: var(--accent-purple) !important;
  background: rgba(124, 77, 255, 0.08) !important;
}
body.theme-light .font-size-name,
body.theme-light .density-name {
  color: var(--text-primary) !important;
}


/* ============================================================
 * 128. ライトモード タブ下線の二重表示を修正
 *   - feed-tabs の border-bottom を削除して ::after だけ残す
 * ============================================================ */

/* ライト/auto: タブ active の border-bottom を削除(::after だけにする)*/
body.theme-light .tabs a.active,
body.theme-light .tab.active {
  border-bottom: none !important;
  border-image: none !important;
  position: relative;
}


/* ::after を統一(紫→シアンのグラデ下線、太め)*/
body.theme-light .tabs a.active::after,
body.theme-light .tab.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-purple), var(--accent-cyan)) !important;
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(124, 77, 255, 0.30);
}


/* profile-tabs も同様に */
body.theme-light .profile-tab.active {
  border-bottom: none !important;
  border-image: none !important;
}


/* ============================================================
 * 129. ライトモード 投稿内のリンクを青色に
 * ============================================================ */

/* 投稿本文中のリンク(URL を貼った時) */
body.theme-light .post-body a,
body.theme-light .post-content a,
body.theme-light .post-text a,
body.theme-light .post-detail-body a,
body.theme-light .post p a {
  color: var(--accent-cyan) !important;
  text-decoration: none;
}
body.theme-light .post-body a:hover,
body.theme-light .post-content a:hover,
body.theme-light .post-text a:hover,
body.theme-light .post-detail-body a:hover {
  color: #1a8cd8 !important;
  text-decoration: underline;
}

/* OGP カード内のリンク(youtu.be 等のドメイン表示)*/
body.theme-light .ogp-card,
body.theme-light .ogp-card a,
body.theme-light .link-preview a,
body.theme-light .ogp-domain,
body.theme-light .ogp-url {
  color: var(--accent-cyan) !important;
}

/* OGP カード自体のホバー */
body.theme-light .ogp-card:hover,
body.theme-light .link-preview:hover {
  border-color: var(--accent-cyan) !important;
  background: rgba(29, 155, 240, 0.04) !important;
}

/* ============================================================
 * 130. ライトモード 引用投稿の本文を濃く(スマホ含む全画面)
 * ============================================================ */

/* ライト/auto モード: 引用投稿内の全テキストを濃黒に */
body.theme-light .quote-post,
body.theme-light .quoted-post,
body.theme-light .quote-card,
body.theme-light .post-quote,
body.theme-light .quoted-tweet,
body.theme-light .embed-post,
body.theme-light .quoted {
  color: var(--text-primary) !important;
}

body.theme-light .quote-post *,
body.theme-light .quoted-post *,
body.theme-light .quote-card *,
body.theme-light .post-quote *,
body.theme-light .quoted-tweet *,
body.theme-light .quoted * {
  opacity: 1 !important;
}

/* 引用投稿の本文(超強化)*/
body.theme-light .quote-post .post-body,
body.theme-light .quote-post .post-content,
body.theme-light .quote-post .post-text,
body.theme-light .quote-post p,
body.theme-light .quoted-post .post-body,
body.theme-light .quoted-post .post-text,
body.theme-light .quoted-post p,
body.theme-light .quote-card .post-body,
body.theme-light .quote-card .post-text,
body.theme-light .quote-card p,
body.theme-light .quoted-tweet .post-body,
body.theme-light .quoted-tweet p,
body.theme-light .quoted .post-body,
body.theme-light .quoted .post-text,
body.theme-light .quoted p,
body.theme-light .embed-post p,
body.theme-light .quote-body,
body.theme-light .quote-text {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}

/* 引用投稿の名前は太字濃黒 */
body.theme-light .quote-post .display-name,
body.theme-light .quote-post .author-name,
body.theme-light .quote-post strong,
body.theme-light .quoted-post .display-name,
body.theme-light .quoted-post strong,
body.theme-light .quote-card .display-name,
body.theme-light .quote-card strong,
body.theme-light .quoted .display-name,
body.theme-light .quoted strong {
  color: var(--text-primary) !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

/* 引用投稿の @ハンドル + 日付 */
body.theme-light .quote-post .handle,
body.theme-light .quote-post .author-handle,
body.theme-light .quote-post time,
body.theme-light .quoted-post .handle,
body.theme-light .quoted-post time,
body.theme-light .quote-card .handle,
body.theme-light .quote-card time,
body.theme-light .quoted .handle,
body.theme-light .quoted time {
  color: var(--text-secondary) !important;
  opacity: 1 !important;
}

/* スマホ版でもしっかり適用 */
@media (max-width: 767px) {
  body.theme-light .quote-post .post-body,
  body.theme-light .quoted-post .post-body,
  body.theme-light .quote-card .post-body,
  body.theme-light .quoted .post-body,
  body.theme-light .quote-post p,
  body.theme-light .quoted-post p,
  body.theme-light .quote-card p,
  body.theme-light .quoted p {
    color: var(--text-primary) !important;
    opacity: 1 !important;
    font-weight: 500 !important;
  }
}

/* ============================================================
 * 131. ライトモード 引用投稿(quote-card)の正しいクラス対応
 *   実際のクラス: .quote-card / .quote-head / .quote-author /
 *                 .quote-meta / .quote-body / .quote-time
 * ============================================================ */

/* ライト/auto: 引用カード全体 */
body.theme-light .quote-card,
body.theme-light .quote-card *,
body.theme-light .quote-head,
body.theme-light .quote-head *,
body.theme-light .quote-meta,
body.theme-light .quote-author,
body.theme-light .quote-body,
body.theme-light .quote-time {
  opacity: 1 !important;
}

/* 引用本文(これが「お家の花」)*/
body.theme-light .quote-card .quote-body,
body.theme-light .quote-body {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}

/* 引用の表示名(tintin 等)*/
body.theme-light .quote-card .quote-author,
body.theme-light .quote-author {
  color: var(--text-primary) !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

/* 引用の @ハンドル + 日付(muted small)*/
body.theme-light .quote-card .muted,
body.theme-light .quote-card .small,
body.theme-light .quote-time,
body.theme-light .quote-card .quote-author .muted {
  color: var(--text-secondary) !important;
  opacity: 1 !important;
}

/* === スマホ版で念のため強化 === */
@media (max-width: 767px) {
  body.theme-light .quote-card .quote-body,
  body.theme-light .quote-body {
    color: var(--text-primary) !important;
    opacity: 1 !important;
    font-weight: 500 !important;
  }
}

/* §132 「旧クラス名のアカウント切替ポップオーバー」 (.account-popover /
   .account-switcher / .account-menu / .nav-account-popover /
   .side-account-popover / .col-nav .popover) は PHP/HTML 側でもう使われて
   いない dead selectors のみで構成されていたため Phase 7 で全削除。
   現役のクラスは §133 (.sidebar-account-popover) と §134 (.drawer-account-menu)
   が担当する。 */

/* ============================================================
 * 133. ライトモード PC アカウント切替ポップオーバー(正しいクラス)
 *   対象: .sidebar-account-popover とその内部全要素
 * ============================================================ */

body.theme-light .sidebar-account-popover {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid rgba(124, 77, 255, 0.20) !important;
  box-shadow: 0 12px 32px rgba(124, 77, 255, 0.18), 0 4px 16px rgba(0, 184, 212, 0.10) !important;
  color: var(--text-primary) !important;
}

body.theme-light .sidebar-account-popover * {
  color: var(--text-primary) !important;
  opacity: 1 !important;
}

/* 表示名(太字) */
body.theme-light .sidebar-account-popover .popover-account-name {
  color: var(--text-primary) !important;
  font-weight: 800 !important;
}

/* @ハンドル */
body.theme-light .sidebar-account-popover .popover-account-handle {
  color: var(--text-secondary) !important;
}

/* 現在のアカウント行 */
body.theme-light .sidebar-account-popover .popover-current-account {
  background: rgba(124, 77, 255, 0.05) !important;
  border-left: 3px solid var(--accent-purple) !important;
}

/* 他のアカウント切替リンク + アクションボタン */
body.theme-light .sidebar-account-popover .popover-other-account,
body.theme-light .sidebar-account-popover .popover-action {
  color: var(--text-primary) !important;
  background: transparent !important;
}

/* ホバー(切替/追加/作成)*/
body.theme-light .sidebar-account-popover .popover-other-account:hover,
body.theme-light .sidebar-account-popover .popover-action:not(.popover-action-danger):hover {
  background: rgba(124, 77, 255, 0.08) !important;
  color: var(--accent-purple) !important;
}
body.theme-light .sidebar-account-popover .popover-other-account:hover .popover-account-name,
body.theme-light .sidebar-account-popover .popover-other-account:hover .popover-account-handle,
body.theme-light .sidebar-account-popover .popover-other-account:hover i,
body.theme-light .sidebar-account-popover .popover-action:not(.popover-action-danger):hover i,
body.theme-light .sidebar-account-popover .popover-action:not(.popover-action-danger):hover span {
  color: var(--accent-purple) !important;
}

/* 危険系(ログアウト)ホバー */
body.theme-light .sidebar-account-popover .popover-action-danger {
  color: #f4212e !important;
}
body.theme-light .sidebar-account-popover .popover-action-danger i,
body.theme-light .sidebar-account-popover .popover-action-danger span {
  color: #f4212e !important;
}
body.theme-light .sidebar-account-popover .popover-action-danger:hover {
  background: rgba(244, 33, 46, 0.08) !important;
}

/* アイコン(通常状態)*/
body.theme-light .sidebar-account-popover .popover-action i,
body.theme-light .sidebar-account-popover .popover-other-account i {
  color: var(--text-secondary) !important;
}

/* 現在のアカウント青チェックマーク */
body.theme-light .sidebar-account-popover .popover-current-mark {
  color: var(--accent-cyan) !important;
}

/* 切替矢印 */
body.theme-light .sidebar-account-popover .popover-switch-icon {
  color: var(--text-secondary) !important;
}

/* 区切り線 */
body.theme-light .sidebar-account-popover .popover-divider {
  background: rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* デフォルトアバタープレースホルダー */
body.theme-light .sidebar-account-popover .popover-avatar-placeholder {
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan)) !important;
  color: #ffffff !important;
}

/* ============================================================
 * 134. ライトモード スマホ用ドロワーのアカウントメニュー
 *   対象: #drawerAccountMenu とその内部全要素
 * ============================================================ */
body.theme-light .drawer-account-menu {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-primary) !important;
  color: var(--text-primary) !important;
}
body.theme-light .drawer-account-menu * {
  color: var(--text-primary) !important;
  opacity: 1 !important;
}
body.theme-light .drawer-account-menu .drawer-account-name {
  color: var(--text-primary) !important;
  font-weight: 800 !important;
}
body.theme-light .drawer-account-menu .drawer-account-handle {
  color: var(--text-secondary) !important;
}
body.theme-light .drawer-account-menu .drawer-account-other,
body.theme-light .drawer-account-menu .drawer-account-action {
  color: var(--text-primary) !important;
}
body.theme-light .drawer-account-menu .drawer-account-other:hover,
body.theme-light .drawer-account-menu .drawer-account-action:not(.drawer-account-action-danger):hover {
  background: rgba(124, 77, 255, 0.08) !important;
  color: var(--accent-purple) !important;
}
body.theme-light .drawer-account-menu .drawer-account-action-danger {
  color: #f4212e !important;
}
body.theme-light .drawer-account-menu .drawer-account-action-danger:hover {
  background: rgba(244, 33, 46, 0.08) !important;
}
/* drawer 内のアカウント操作 (追加 / 作成 / ログアウト) は sidebar-actions の
   「投稿する」グラデ化ルール (§) に巻き込まれて紫グラデ背景になっていた。
   フラットな白背景に戻し、ホバー時のみ色を付ける。 */
body.theme-light .drawer-account-menu .drawer-account-action,
body.theme-light .sidebar-actions .drawer-account-action,
body.theme-light .drawer-account-menu form > .drawer-account-action,
body.theme-light .sidebar-actions form > .drawer-account-action {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-weight: 600 !important;
}


/* ============================================================
 * 135. オーロラ・パルス フィードバック
 * ============================================================ */

/* === 全体に被せるレイヤー(クリックを邪魔しない)=== */
.feedback-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: visible;
}

/* === パーティクル(粒子)=== */
.feedback-particle {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0.95;
}
.feedback-particle.star {
  width: 8px;
  height: 8px;
  border-radius: 0;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.feedback-particle.trail {
  width: 14px;
  height: 3px;
  border-radius: 2px;
}

@keyframes feedbackParticle {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  20%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.3); opacity: 0; }
}

/* === オーロラ波紋(リング)=== */
.feedback-ripple {
  position: fixed;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  animation: feedbackRipple 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

@keyframes feedbackRipple {
  0%   { transform: translate(-50%, -50%) scale(0);   opacity: 1; }
  60%  { opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(4.5); opacity: 0; }
}

/* === ボタン本体のアニメ === */

/* いいね: ハートポップ */
.feedback-like-pop {
  animation: feedbackLikePop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes feedbackLikePop {
  0%   { transform: scale(1);    }
  25%  { transform: scale(0.8);  }
  50%  { transform: scale(1.4);  }
  75%  { transform: scale(0.95); }
  100% { transform: scale(1);    }
}

/* リポスト: 回転 */
.feedback-repost-spin {
  animation: feedbackRepostSpin 0.6s cubic-bezier(0.5, 0, 0.5, 1);
}
@keyframes feedbackRepostSpin {
  0%   { transform: rotate(0)         scale(1);   }
  40%  { transform: rotate(180deg)    scale(1.2); }
  100% { transform: rotate(360deg)    scale(1);   }
}

/* ブックマーク: ふくらむ */
.feedback-bookmark-pop {
  animation: feedbackBookmarkPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes feedbackBookmarkPop {
  0%   { transform: scale(1);   }
  40%  { transform: scale(1.3); }
  100% { transform: scale(1);   }
}

/* 共有: 上にはねる */
.feedback-share-pop {
  animation: feedbackSharePop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes feedbackSharePop {
  0%   { transform: translateY(0)    scale(1);    }
  35%  { transform: translateY(-5px) scale(1.25); }
  70%  { transform: translateY(0)    scale(0.96); }
  100% { transform: translateY(0)    scale(1);    }
}

/* フォロー: シアン→紫のグロウパルス */
.feedback-follow-pulse {
  animation: feedbackFollowPulse 0.6s ease-out;
}
@keyframes feedbackFollowPulse {
  0%   { box-shadow: 0 0 0 0   rgba(0, 184, 212, 0.7);  }
  60%  { box-shadow: 0 0 0 16px rgba(124, 77, 255, 0);  }
  100% { box-shadow: 0 0 0 0   rgba(124, 77, 255, 0);   }
}

/* 投稿成功: 画面上端から光線が走る */
body.feedback-post-success::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-purple), var(--accent-cyan), #00c896, transparent);
  z-index: 10000;
  pointer-events: none;
  animation: feedbackPostBeam 0.9s ease-out;
  box-shadow: 0 0 12px var(--accent-purple), 0 0 24px var(--accent-cyan);
}
@keyframes feedbackPostBeam {
  0%   { transform: scaleX(0);   transform-origin: left center;  opacity: 1; }
  60%  { transform: scaleX(1);   transform-origin: left center;  opacity: 1; }
  61%  { transform-origin: right center; }
  100% { transform: scaleX(0);   transform-origin: right center; opacity: 0; }
}

/* === ボタン汎用: 押し込み感 === */
button:active,
.btn:active,
.like-btn:active,
.repost-btn:active,
.bookmark-btn:active,
.follow-btn:active,
.post-btn:active {
  transform: scale(0.96);
  transition: transform 0.05s ease-out;
}

/* === reduce-motion 対応(アクセシビリティ)=== */
@media (prefers-reduced-motion: reduce) {
  .feedback-particle,
  .feedback-ripple,
  .feedback-like-pop,
  .feedback-repost-spin,
  .feedback-bookmark-pop,
  .feedback-share-pop,
  .feedback-follow-pulse,
  body.feedback-post-success::after {
    animation: none !important;
  }
}

/* ============================================================
 * 136. フィードバック CSS の優先度強化(緊急修正)
 * ============================================================ */
.feedback-layer {
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 999999 !important;
  overflow: visible !important;
  display: block !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  top: 0 !important;
  left: 0 !important;
}

.feedback-particle {
  position: fixed !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
  opacity: 0.95 !important;
  display: block !important;
  z-index: 999999 !important;
}

.feedback-ripple {
  position: fixed !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  transform: translate(-50%, -50%) scale(0) !important;
  pointer-events: none !important;
  z-index: 999999 !important;
  display: block !important;
}

/* ============================================================
 * 137. 新ロゴ(正方形)対応 + iPad幅の微調整
 *     - ロゴ画像を縦横比1:1で枠にフィット(全画面サイズ共通)
 *     - iPad幅(1000-1299px)では枠も正方形+少しコンパクトに
 * ============================================================ */

/* 共通: 新ロゴは正方形(1:1)なので素直に枠に収める */
.logo-section img {
  object-fit: contain;
  border-radius: 12px;
  display: block;
}

/* モバイル(767px以下)のヘッダーロゴ */
@media (max-width: 767px) {
  .mobile-logo img {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px;
    object-fit: contain;
  }
}

/* ============================================================
 * 137b. 凍結垢 / 鍵垢 のX風表示
 * ============================================================ */

/* 凍結垢: シンプルなセンタリング表示 */
.profile-suspended {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 32px 60px;
  text-align: center;
  border-bottom: 1px solid var(--border-color, #2f3336);
}
.profile-suspended-icon {
  font-size: 64px;
  color: #f4212e;
  margin-bottom: 24px;
  opacity: 0.9;
}
.profile-suspended-title {
  font-size: 1.8rem;
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--text-primary, #e7e9ea);
}
.profile-suspended-desc {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary, var(--text-muted));
  max-width: 480px;
  margin: 0 auto 16px;
}
.profile-suspended-handle {
  font-size: 0.95rem;
  color: var(--text-tertiary, var(--text-muted));
  margin: 8px 0 0;
}

/* ============================================================
 * 138. ライトモード: 危険アクション (ログアウト/削除等) の赤色を維持
 *
 * 9550 行の「全テキスト var(--text-primary) 強制」が赤色も黒に塗りつぶしていたため、
 * 警告色 (.btn-danger / .drawer-logout-btn / .popover-action-danger /
 * .drawer-account-action-danger / .kebab-danger / .btn.danger) を例外として
 * X 公式と同じ赤 #f4212e に保つ。
 * ============================================================ */
body.theme-light .btn-danger,
body.theme-light .btn.danger,
body.theme-light .drawer-logout-btn,
body.theme-light .drawer-account-action-danger,
body.theme-light .drawer-account-action-danger i,
body.theme-light .popover-action-danger,
body.theme-light .popover-action-danger i,
body.theme-light .kebab-danger,
body.theme-light .kebab-danger i,
body.theme-light .post-menu-item.danger,
body.theme-light .post-menu-item.danger i,
body.theme-light .danger-zone h4,
body.theme-light .settings-hub-danger,
body.theme-light .settings-hub-danger .settings-hub-title,
body.theme-light .settings-hub-danger i {
  color: #f4212e !important;
}

/* ログアウトボタンの背景・ボーダーも X ライトモードに合わせる */
body.theme-light .drawer-logout-btn {
  background: rgba(244, 33, 46, 0.08) !important;
  border-color: rgba(244, 33, 46, 0.35) !important;
}
body.theme-light .drawer-logout-btn:hover,
body.theme-light .drawer-logout-btn:active {
  background: rgba(244, 33, 46, 0.14) !important;
  border-color: rgba(244, 33, 46, 0.55) !important;
}

/* ライトモード対応 */
body.theme-light .profile-suspended-title {
  color: var(--text-primary);
}
body.theme-light .profile-suspended-desc {
  color: var(--text-secondary);
}

/* 鍵垢未フォロー時のフォロー数代替表示 */
.profile-stats-locked {
  padding: 12px 16px;
  display: flex;
  justify-content: flex-start;
}
.profile-stats-locked .muted {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ============================================================
 * 138b. ライトモード: 通報モーダル (§100 のダーク版を白基調に)
 * ============================================================ */

/* 背景 backdrop は薄めに (純黒の暗幕は light だと圧迫感) */
body.theme-light .report-modal-backdrop {
  background: rgba(124, 77, 255, 0.18) !important;
}

/* モーダル本体: 白カード + パープルボーダー */
body.theme-light .report-modal-box {
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary) 100%) !important;
  border: 1px solid rgba(124, 77, 255, 0.20) !important;
  box-shadow: 0 20px 60px rgba(124, 77, 255, 0.20) !important;
}

/* ヘッダー */
body.theme-light .report-modal-header {
  border-bottom: 1px solid var(--border-primary) !important;
}
body.theme-light .report-modal-header h2 {
  color: var(--text-primary) !important;
}
body.theme-light .report-modal-header h2 i {
  color: var(--accent-pink) !important;
}
body.theme-light .report-modal-close {
  color: var(--text-secondary) !important;
}
body.theme-light .report-modal-close:hover {
  background: rgba(124, 77, 255, 0.08) !important;
  color: var(--text-primary) !important;
}

/* 本文 */
body.theme-light .report-intro {
  color: var(--text-secondary) !important;
}

/* 通報理由ラジオ */
body.theme-light .report-reason {
  border: 1px solid var(--border-primary) !important;
  background: var(--bg-card) !important;
}
body.theme-light .report-reason:hover {
  border-color: var(--accent-purple) !important;
  background: rgba(124, 77, 255, 0.05) !important;
}
body.theme-light .report-reason:has(input:checked) {
  border-color: var(--accent-purple) !important;
  background: rgba(124, 77, 255, 0.10) !important;
}
body.theme-light .report-reason span strong {
  color: var(--text-primary) !important;
}
body.theme-light .report-reason span small {
  color: var(--text-secondary) !important;
}
body.theme-light .report-reason input[type="radio"]:checked ~ span,
body.theme-light .report-reason input[type="radio"]:checked ~ span strong {
  color: var(--text-primary) !important;
}

/* 詳細入力 */
body.theme-light .report-detail-wrap label {
  color: var(--text-secondary) !important;
}
body.theme-light .report-detail-wrap textarea {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-primary) !important;
  color: var(--text-primary) !important;
}
body.theme-light .report-detail-wrap textarea:focus {
  border-color: var(--accent-purple) !important;
  box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.15) !important;
}

/* ボタン */
body.theme-light .report-btn-cancel {
  background: transparent !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-primary) !important;
}
body.theme-light .report-btn-cancel:hover {
  background: rgba(124, 77, 255, 0.06) !important;
  color: var(--text-primary) !important;
}
/* 通報する: 危険アクションなので赤系を維持 (§138 ポリシーに準拠) */
body.theme-light .report-btn-submit {
  background: linear-gradient(135deg, #f4212e, #ff4d6d) !important;
  color: #ffffff !important;
}

/* エラー表示 */
body.theme-light .report-error {
  background: rgba(244, 33, 46, 0.08) !important;
  border: 1px solid #f4212e !important;
  color: #f4212e !important;
}

/* ============================================================
 * 138c. ライトモード: ライトボックスのボタンを白基調に
 *
 * ダーク版は黒ピル + 白文字。ライト時にも同じ見た目だったので、
 * 暗い写真背景と被って読みにくいケースがあった (黒ボタン + 黒写真
 * = ボタン消失)。ライト時は白ピル + 濃文字 + 強い border + blur で
 * どんな色の写真上でもくっきり浮かせる。
 * ============================================================ */
/* ライトモードでも暗ガラスのまま (ベース定義に従う)。
   写真上では白文字 on dark glass が最も読みやすい (Instagram/X と同じ思想)。
   カウンタだけは情報性が薄いので白寄りに残しておく。 */
body.theme-light .lightbox-counter {
  background: rgba(255, 255, 255, 0.88) !important;
  color: #1a1033 !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}
/* hd-btn は theme-light でもベース定義 (暗ガラス) を維持。
   アイコン色を !important で白固定して §109 text-primary 強制を上書き。 */
body.theme-light .lightbox-download,
body.theme-light .lightbox-download *,
body.theme-light .lightbox-hd-btn,
body.theme-light .lightbox-hd-btn * {
  color: #ffffff !important;
}
body.theme-light .lightbox-download i { color: #ffe066 !important; }
body.theme-light .lightbox-download:hover i { color: #ffffff !important; }

/* ============================================================
 * 139. PWA セーフエリア対応 (iOS standalone でステータスバー / ホームインジケータに被らないように)
 *
 * viewport-fit=cover + apple-mobile-web-app-status-bar-style=black-translucent
 * の組合せだと、ステータスバーが画面に被さるためヘッダー上端のタップが効かなくなる。
 * env(safe-area-inset-*) でその分の余白を確保し、ナビ自体の高さも増やす。
 *
 * standalone モード (= ホーム画面から起動) でのみ作用させる目的だが、
 * Safari 通常閲覧時も env(...) は 0 を返すので無害。
 * ============================================================ */
.mobile-header {
  /* §62 で height: 56px !important が宣言されているため !important で打ち消す。
     box-sizing: border-box の影響で padding-top 分が content 領域を圧迫し、
     アイコンがステータスバー裏へ押し込まれる症状を解消する */
  height: calc(var(--header-mobile-height) + env(safe-area-inset-top)) !important;
  padding-top: env(safe-area-inset-top);
}
.mobile-header-content {
  /* 既存は height: 100% だが、padding-top 分を引いた可視部分に内容を収める */
  height: var(--header-mobile-height);
}

/* ドロワーも上端がステータスバー裏に被るので safe-area 分を確保 */
.side-drawer,
#sideDrawer {
  padding-top: env(safe-area-inset-top);
}

.bottom-nav {
  height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav .nav-menu {
  /* ホームインジケータ部分は除いた、本来のナビ高さで items を並べる */
  height: var(--bottom-nav-height);
}

/* iOS PWA: ソフトキーボードが開くと position:fixed のボトムナビが
   visualViewport の最下部に張り付き、メッセージ入力欄の真下に居座って
   邪魔になる。DM 入力欄 (.dm-composer-input) にフォーカスがある時だけ
   ボトムナビを隠し、下端の高さ予約も解除して入力欄をキーボード直上に貼り付ける。
   検索 (search.php) 等の通常テキスト入力では隠さない。
   :has() は iOS Safari 16.4 以上で対応。古い iOS では従来どおり表示される。 */
@media (max-width: 767px) {
  body:has(.dm-composer-input:focus) .bottom-nav {
    display: none;
  }
  body:has(.dm-composer-input:focus) .col-main,
  body:has(.dm-composer-input:focus) .main-content {
    margin-bottom: 0;
  }
  body:has(.dm-composer-input:focus) .dm-col-main,
  body:has(.dm-composer-input:focus) .dm-layout,
  body:has(.dm-composer-input:focus) .layout-3col .dm-col-main {
    height: calc(100vh - var(--header-mobile-height) - env(safe-area-inset-top));
  }
}

/* メインコンテンツも増えた分だけマージンを広げる
   (上下とも、safe-area-inset 加算済みの高さ) */
@media (max-width: 767px) {
  .col-main,
  .main-content {
    margin-top: calc(var(--header-mobile-height) + env(safe-area-inset-top));
    margin-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
  }
}

/* 左右の safe-area (ランドスケープ時のノッチ側) — 固定バーの中身を縁にめり込ませないように */
.mobile-header-content,
.bottom-nav .nav-menu {
  padding-left: max(var(--space-4, 16px), env(safe-area-inset-left));
  padding-right: max(var(--space-4, 16px), env(safe-area-inset-right));
}

/* ============================================================
 * 140. PWA 初回起動プロンプト (通知有効化バナー)
 * ============================================================ */
#push-prompt-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(var(--bottom-nav-height) + 12px + env(safe-area-inset-bottom));
  z-index: 1000;
  pointer-events: none;
}
.push-prompt-card {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.95), rgba(0, 229, 255, 0.92));
  color: #fff;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: pushPromptIn 0.3s ease-out;
}
@keyframes pushPromptIn {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.push-prompt-icon {
  font-size: 24px;
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
}
.push-prompt-text { flex: 1; min-width: 0; }
.push-prompt-title { font-weight: 700; font-size: 14px; line-height: 1.3; }
.push-prompt-desc { font-size: 12px; opacity: 0.92; margin-top: 2px; line-height: 1.4; }
.push-prompt-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.push-prompt-actions button {
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.push-prompt-allow {
  background: #fff;
  color: #7c4dff;
}
.push-prompt-skip {
  background: rgba(0,0,0,0.25);
  color: #fff;
}
.push-prompt-allow:disabled { opacity: 0.5; cursor: wait; }

@media (min-width: 768px) {
  #push-prompt-banner {
    left: auto;
    right: 24px;
    bottom: 24px;
    max-width: 380px;
  }
}

/* ============================================================
 * 141. 投稿画像の「高画質で読み込む」操作はケバブメニュー / ライトボックス へ。
 *      投稿画像上の floating ボタンは廃止 (写真と被って邪魔だったため)
 *      → ケバブ: .kebab-hd / ライトボックス: .lightbox-hd-btn
 * ============================================================ */

/* ※ PWA 起動アニメ (.app-splash 一式) は _pwa_splash_overlay.php に
 *    インライン <style> で同梱したため、ここからは削除。
 *    style-new.css をロードしない nfu-bus 等でも動くようにするため。 */

/* ============================================================
 * 142.5 Pull-to-Refresh (X 風 / 体感重視)
 *      スマホでタイムライン最上部から下にスワイプ → リロード
 * ============================================================ */
.pull-refresh {
  position: fixed;
  top: env(safe-area-inset-top);
  left: 0;
  right: 0;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 95;
  color: var(--text-primary, #e7ecff);
  background: linear-gradient(to bottom, rgba(7, 9, 22, 0.96), rgba(7, 9, 22, 0.88));
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  transform: translateY(-100%);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.pull-refresh-inner {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.18s ease,
              border-color 0.18s ease,
              box-shadow 0.22s ease;
}
.pull-refresh-spinner {
  width: 22px;
  height: 22px;
  border: 2.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

/* ready 状態: シアンに発光 + 内部 pill にグラデ */
.pull-refresh-ready {
  color: var(--accent-cyan, #00e5ff);
}
.pull-refresh-ready .pull-refresh-inner {
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.20), rgba(0, 229, 255, 0.20));
  border-color: rgba(0, 229, 255, 0.55);
  box-shadow: 0 0 24px rgba(0, 229, 255, 0.30),
              0 4px 12px rgba(0, 0, 0, 0.30);
}

/* 閾値クロス瞬間のパルス (1 回だけ) */
.pull-refresh-pulse .pull-refresh-inner {
  animation: pull-refresh-pulse 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pull-refresh-pulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18); }
  70%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}

/* refreshing 状態: 大きめ + スピナー回転 */
.pull-refresh-refreshing .pull-refresh-inner {
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.30), rgba(0, 229, 255, 0.30));
  border-color: rgba(0, 229, 255, 0.65);
  box-shadow: 0 0 32px rgba(0, 229, 255, 0.45),
              0 6px 16px rgba(0, 0, 0, 0.35);
}
.pull-refresh-refreshing .pull-refresh-spinner {
  animation: pull-refresh-spin 0.7s linear infinite;
  opacity: 1;
}
@keyframes pull-refresh-spin { to { transform: rotate(360deg); } }

/* light テーマ追従 (濃紺背景+濃色文字で見えなくなるのを防ぐ) */
body.theme-light .pull-refresh {
  color: var(--text-primary, #0f1419);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.90));
  border-bottom: 1px solid var(--border-primary, rgba(0, 0, 0, 0.08));
}
body.theme-light .pull-refresh-inner {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.10);
}
/* ready: 白背景ではシアン文字が薄いので紫寄りにして視認性確保 */
body.theme-light .pull-refresh-ready {
  color: var(--accent-purple, #7c4dff);
}
body.theme-light .pull-refresh-ready .pull-refresh-inner {
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.14), rgba(0, 229, 255, 0.14));
  border-color: rgba(124, 77, 255, 0.45);
  box-shadow: 0 0 18px rgba(124, 77, 255, 0.20),
              0 4px 12px rgba(0, 0, 0, 0.10);
}
body.theme-light .pull-refresh-refreshing .pull-refresh-inner {
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.20), rgba(0, 229, 255, 0.20));
  border-color: rgba(124, 77, 255, 0.55);
  box-shadow: 0 0 24px rgba(124, 77, 255, 0.25),
              0 6px 16px rgba(0, 0, 0, 0.12);
}
/* 更新結果トースト「新しい投稿はありません」等: ライトの汎用文字色ルールに
   負けて濃色になり、グラデのピル上で見えなくなるのを防ぐ (白で固定) */
body.theme-light .pull-refresh-toast-inner {
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.95), rgba(124, 77, 255, 0.95)) !important;
  color: #ffffff !important;
}
body.theme-light .pull-refresh-toast-inner span,
body.theme-light .pull-refresh-toast-icon {
  color: #ffffff !important;
}

/* リロード後の「✓ 更新しました」トースト
   外側 = 全幅・text-align:center の透明レール (X 位置は transform 無し)
   内側 = アイコン + テキスト (inline-flex で中央配置)
   こうすると innerHTML 差し替えで内側幅が変わっても X 軸はズレない。 */
.pull-refresh-toast {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(env(safe-area-inset-top) + 64px);
  text-align: center;                 /* 内側 inline-flex を水平センタリング */
  opacity: 0;
  z-index: 1000;
  pointer-events: none;
  transform: translateY(-16px);       /* Y 方向のみ (幅と無関係) */
  transition: opacity 0.22s ease, transform 0.24s ease-out;
}
.pull-refresh-toast.show {
  opacity: 1;
  transform: translateY(0);
}
.pull-refresh-toast-inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  max-width: calc(100vw - 24px);
  white-space: nowrap !important;
  word-break: keep-all;
  overflow-wrap: normal;
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.95), rgba(124, 77, 255, 0.95));
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 229, 255, 0.35),
              0 4px 12px rgba(0, 0, 0, 0.25);
  text-align: left;                   /* 内側のテキストは通常の左から開始 */
}
.pull-refresh-toast-inner span {
  white-space: nowrap !important;
  word-break: keep-all;
  overflow-wrap: normal;
}
/* アイコン枠を 18x18 で固定 → スピナーとチェックで高さズレが起きない */
.pull-refresh-toast-icon,
.pull-refresh-toast-spinner {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: block;
  box-sizing: border-box;
}
.pull-refresh-toast-spinner {
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: pull-refresh-toast-spin 0.7s linear infinite;
}
@keyframes pull-refresh-toast-spin { to { transform: rotate(360deg); } }

/* ============================================================
 * 142. 投稿動画の画質セレクタ (YouTube ⚙ 風)
 * ============================================================ */
.post-video { position: relative; }
.video-quality-wrapper {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 5;
  pointer-events: auto;
}
.video-quality-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  background: rgba(0, 0, 0, 0.82) !important;
  color: #fff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.15s, transform 0.1s;
  line-height: 1;
  min-height: 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.video-quality-btn:hover { background: rgba(0, 0, 0, 0.95) !important; }
.video-quality-btn:active { transform: scale(0.96); }
.video-quality-btn i { font-size: 0.85rem; color: #fff !important; }
.video-quality-btn .video-quality-label { color: #fff !important; }

.video-quality-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  min-width: 156px;
  padding: 4px;
  background: rgba(15, 17, 30, 0.97) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  gap: 2px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.video-quality-menu[hidden] { display: none; }
.video-quality-menu button {
  background: transparent !important;
  border: none;
  color: #ffffff !important;
  padding: 9px 12px;
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  font-weight: 600;
  transition: background 0.1s;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.video-quality-menu button:hover { background: rgba(255, 255, 255, 0.12) !important; }
.video-quality-menu button.is-current {
  background: rgba(0, 229, 255, 0.18) !important;
  color: #00e5ff !important;
  font-weight: 800;
}
.video-quality-menu button.is-current::after {
  content: '\f00c';                     /* fa-check */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.75rem;
  margin-left: 8px;
}

/* スマホ: コンパクト化 */
@media (max-width: 480px) {
  .video-quality-wrapper { right: 8px; bottom: 8px; }
  .video-quality-btn { padding: 5px 10px; font-size: 0.72rem; min-height: 28px; }
  .video-quality-menu { min-width: 140px; }
  .video-quality-menu button { padding: 7px 10px; font-size: 0.8rem; }
}

/* ============================================================
 * 143. 運営からの重要通知 (admin_warning / admin_broadcast)
 * ------------------------------------------------------------
 *  notifications.php で表示される運営通知を一般通知から視覚的に
 *  区別する。警告は赤系、一般お知らせは金系で枠と背景を強調。
 * ============================================================ */

.notif-row.is-admin-notice {
  border-left: 3px solid #ffd700;
  background: linear-gradient(
    90deg,
    rgba(255, 215, 0, 0.06) 0%,
    rgba(255, 215, 0, 0.00) 60%
  );
}
.notif-row.is-admin-warning {
  border-left-color: #ff4d6d;
  background: linear-gradient(
    90deg,
    rgba(255, 77, 109, 0.08) 0%,
    rgba(255, 77, 109, 0.00) 60%
  );
}
.notif-row.is-admin-thanks {
  border-left-color: #00ff9d;
  background: linear-gradient(
    90deg,
    rgba(0, 255, 157, 0.08) 0%,
    rgba(0, 255, 157, 0.00) 60%
  );
}
.notif-row.is-admin-notice:hover {
  background:
    linear-gradient(90deg, rgba(255, 215, 0, 0.10) 0%, rgba(255, 215, 0, 0.02) 60%),
    var(--bg-card-hover);
}
.notif-row.is-admin-warning:hover {
  background:
    linear-gradient(90deg, rgba(255, 77, 109, 0.14) 0%, rgba(255, 77, 109, 0.02) 60%),
    var(--bg-card-hover);
}
.notif-row.is-admin-thanks:hover {
  background:
    linear-gradient(90deg, rgba(0, 255, 157, 0.12) 0%, rgba(0, 255, 157, 0.02) 60%),
    var(--bg-card-hover);
}

/* 「【重要】警告」「運営からのお知らせ」バッジ */
.admin-notice-header {
  /* バッジを単独行に置いてから本文を改行表示するための行ラッパ */
  margin-bottom: 8px;
}
.admin-notice-badge {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.4;
}
.admin-notice-badge-warning {
  background: rgba(255, 77, 109, 0.18);
  color: #ff4d6d;
  border: 1px solid rgba(255, 77, 109, 0.45);
}
.admin-notice-badge-broadcast {
  background: rgba(255, 215, 0, 0.16);
  color: #ffd700;
  border: 1px solid rgba(255, 215, 0, 0.42);
}
.admin-notice-badge-thanks {
  background: rgba(0, 255, 157, 0.16);
  color: #00ff9d;
  border: 1px solid rgba(0, 255, 157, 0.45);
}

/* 運営通知の本文 — 本体テキストと同じ大きさ・色で目立たせる
   white-space: pre-wrap で \n をそのまま 1 段改行として描画
   (nl2br + 残留 \n の二重改行問題を回避) */
.admin-notice-body {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-primary);
  font-weight: 600;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}
/* 通知行の overlay (z-index:1) より上に置いて、本文中のリンクを
   クリック可能にする。URL / @handle / #hashtag いずれにも対応。 */
.admin-notice-body a {
  position: relative;
  z-index: 2;
}
.admin-notice-body a.linkified { color: #00e5ff; text-decoration: underline; }
.admin-notice-body a.linkified:hover { color: #66efff; }

/* ============================================================
 * 144. 公共注釈 (Community Notes)
 * ------------------------------------------------------------
 *  投稿カード下に挿入される .post-community-note (公開済注釈の枠)
 *  + /community_notes.php メインページ・新規フォーム用一式
 * ============================================================ */

/* === 投稿下の公開注釈カード (.post-community-note) ===
   サイト共通の card パターン (var(--bg-card) + var(--border-primary) +
   var(--radius-md)) に揃え、アクセントカラーは --accent-cyan を使用。
   ダーク/ライト両モードで自動的に切り替わる。 */
.post-community-note {
  display: block;
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-left: 3px solid var(--accent-purple);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.post-community-note:hover {
  background: var(--bg-hover);
  border-left-color: var(--accent-purple);
  text-decoration: none;
  color: var(--text-primary);
}
.post-community-note .pcn-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
  color: var(--accent-cyan);
}
.post-community-note .pcn-head i,
.post-community-note .pcn-head .cn-icon-gavel {
  color: var(--accent-cyan);
  fill: var(--accent-cyan);
}
.post-community-note .pcn-head strong { color: var(--accent-cyan); font-size: 0.92rem; }
.post-community-note .pcn-body {
  font-size: 0.95rem; line-height: 1.55;
  color: var(--text-primary);
}
.post-community-note .pcn-source {
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 0.85rem;
}
.post-community-note .pcn-source i {
  margin-right: 4px;
  color: var(--accent-cyan);
}

/* 引用カード内に入った時 (.quote-card 内の .post-community-note は <div> 版):
   余白を引き締め、背景は少し淡く透過して引用カードとの階層感を出す */
.quote-card .post-community-note {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-secondary);
}
.quote-card .post-community-note .pcn-body {
  font-size: 0.88rem;
}

/* === /community_notes.php ページ全体ラッパ === */
.cn-page { padding: 0 var(--space-4); }
.cn-list { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3) 0; }

/* ノート 1 件 (.post-card と同等のカード) */
.cn-item {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  transition: background var(--transition-fast);
}
.cn-item:hover { background: var(--bg-card-hover); }
.cn-item.status-helpful     { border-left: 3px solid var(--accent-green); }
.cn-item.status-not-helpful { border-left: 3px solid var(--accent-pink); opacity: 0.75; }
.cn-item.status-pending     { border-left: 3px solid var(--accent-gold); }

/* 対象投稿スニペット (cn-item 内のサブカード — .quote-card と同じ階層感) */
.cn-target-post {
  display: block;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-secondary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  transition: background var(--transition-fast);
}
.cn-target-post:hover { background: var(--bg-hover); text-decoration: none; }
.cn-target-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cn-target-name { font-weight: 700; color: var(--text-primary); }
.cn-target-body { font-size: 0.92rem; color: var(--text-secondary); line-height: 1.5; }

/* 注釈本体 */
.cn-note-body { padding: 4px 0; }
.cn-note-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.cn-note-text {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.cn-note-foot { margin-top: 8px; }
.cn-source { margin-top: 8px; font-size: 0.85rem; color: var(--text-secondary); }
.cn-source i { margin-right: 4px; color: var(--accent-gold); }
.cn-source a {
  color: var(--accent-cyan);
  word-break: break-all;
}
.cn-source a:hover { text-decoration: underline; }

/* === バッジ群 (サイト統一の pill 形式 + アクセントカラー変数) === */
.cn-class-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: var(--action-share-bg);
  color: var(--accent-purple);
  border: 1px solid var(--border-primary);
  font-size: 0.75rem;
  font-weight: 700;
}

.cn-status-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid var(--border-primary);
}
.cn-status-pending     { background: var(--action-bookmark-bg); color: var(--accent-gold); }
.cn-status-helpful     { background: var(--action-repost-bg);   color: var(--accent-green); }
.cn-status-not-helpful { background: var(--action-like-bg);     color: var(--accent-pink); }
.cn-status-apprentice  { background: var(--bg-secondary);       color: var(--text-secondary); }
.cn-status-contributor { background: var(--action-reply-bg);    color: var(--accent-cyan); }
.cn-status-topwriter   {
  background: linear-gradient(135deg, var(--accent-gold), var(--accent-pink));
  color: #ffffff;
  border-color: transparent;
}
.cn-status-suspended   { background: var(--action-like-bg); color: var(--accent-pink); }

/* === 評価ボタン (.btn のように見せる) === */
.cn-rate-actions {
  margin-top: var(--space-3);
  display: flex; gap: var(--space-2); flex-wrap: wrap;
}
.cn-rate-btn {
  flex: 1; min-width: 110px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background var(--transition-fast), transform 0.1s, border-color var(--transition-fast);
}
.cn-rate-btn:hover { background: var(--bg-hover); transform: translateY(-1px); }
.cn-rate-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.cn-rate-helpful:hover,
.cn-rate-helpful.is-active          { background: var(--action-repost-bg);   border-color: var(--accent-green); color: var(--accent-green); }
.cn-rate-somewhat-helpful:hover,
.cn-rate-somewhat-helpful.is-active { background: var(--action-bookmark-bg); border-color: var(--accent-gold);  color: var(--accent-gold);  }
.cn-rate-not-helpful:hover,
.cn-rate-not-helpful.is-active      { background: var(--action-like-bg);     border-color: var(--accent-pink);  color: var(--accent-pink);  }
.cn-rate-btn.is-active {
  /* 選択中であることを更に強調: アイコン色を反映 + 太さ */
  font-weight: 800;
}
.cn-rate-hint {
  margin: 8px 0 0;
  font-size: 0.82rem;
}

/* === ステータスカード (status タブ) === */
.cn-status-card {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin: var(--space-3) 0;
}
.cn-status-card h2 { margin: 0 0 12px; font-size: 1.15rem; display: flex; gap: 10px; align-items: center; color: var(--text-primary); }
.cn-status-card h3 { margin: 20px 0 10px; font-size: 1rem; display: flex; gap: 10px; align-items: center; color: var(--text-primary); }
.cn-status-card .cn-status-badge { font-size: 0.95rem; padding: 6px 14px; margin-bottom: 14px; }
.cn-status-list {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px 16px; margin: 14px 0;
}
.cn-status-list dt { color: var(--text-muted); font-size: 0.85rem; }
.cn-status-list dd { margin: 0; color: var(--text-primary); font-weight: 700; }
.cn-rules { padding-left: 20px; margin: 8px 0; color: var(--text-primary); }
.cn-rules li { margin: 6px 0; line-height: 1.55; }
.cn-hr { border: none; border-top: 1px solid var(--border-primary); margin: var(--space-4) 0; }

/* === 新規フォーム === */
.cn-form { display: flex; flex-direction: column; gap: 8px; padding: var(--space-3) 0; }
.cn-form-label {
  font-weight: 600;
  margin-top: 8px;
  color: var(--text-primary);
}
.cn-form textarea,
.cn-form input[type="url"] {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: 0.95rem;
  font-family: inherit;
  resize: vertical;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.cn-form textarea:focus,
.cn-form input[type="url"]:focus {
  outline: none;
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 3px rgba(0, 184, 212, 0.15);
}
.cn-class-radios { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.cn-class-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.cn-class-radio input { margin: 0; }
.cn-class-radio:hover {
  background: var(--bg-hover);
  border-color: var(--accent-purple);
}
.cn-class-radio:has(input:checked) {
  background: var(--action-share-bg);
  border-color: var(--accent-purple);
  color: var(--accent-purple);
}
.cn-form-actions { display: flex; gap: var(--space-3); justify-content: flex-end; margin-top: var(--space-4); }

/* 公共注釈アイコン: ガベル + 打たれる方 (sound block) インライン SVG */
.cn-icon-gavel {
  display: inline-block;
  width: 1.15em;            /* 通常の FA アイコンより一回り大きく */
  height: 1.15em;
  vertical-align: -0.22em;
  fill: currentColor;
}
/* 空状態の大きいアイコン用 */
.empty-icon .cn-icon-gavel {
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

/* ケバブメニュー「公共注釈を書く」: 黄緑 (yellowgreen) で識別。
   --accent-green (#00ff9d) は青緑寄りなので、明確な黄緑リテラルで上書き。
   .cn-icon-gavel の子 <rect> は currentColor を継承しないので * で fill 直指定。 */
.kebab-item.kebab-cn-write,
.kebab-item.kebab-cn-write i,
.kebab-item.kebab-cn-write .cn-icon-gavel {
  color: #9acd32;
}
.kebab-item.kebab-cn-write .cn-icon-gavel,
.kebab-item.kebab-cn-write .cn-icon-gavel * {
  fill: #9acd32;
}
.kebab-item.kebab-cn-write:hover {
  background: var(--action-repost-bg);
  color: #9acd32;
}

/* ケバブメニュー「投げ銭」: 明確なピンクで識別。反応ボタン列から移動。
   --accent-pink (#ff4d6d) は赤寄りなので、こちらだけリテラルで上書き。
   icons.css の .ico-coins (mask-image) は --ico-color を使うため別途上書き。 */
.kebab-item.kebab-tip,
.kebab-item.kebab-tip i,
.kebab-item.kebab-tip .ico-coins {
  color: #ff4da6;
  --ico-color: #ff4da6;
}
.kebab-item.kebab-tip:hover {
  background: var(--action-like-bg);
  color: #ff4da6;
}

/* ライトモード: 9550 行の text-primary 強制を上書きしてアクセント色を維持 */
body.theme-light .kebab-item.kebab-cn-write,
body.theme-light .kebab-item.kebab-cn-write i,
body.theme-light .kebab-item.kebab-cn-write .cn-icon-gavel {
  color: #9acd32 !important;
}
body.theme-light .kebab-item.kebab-tip,
body.theme-light .kebab-item.kebab-tip i,
body.theme-light .kebab-item.kebab-tip .ico-coins {
  color: #ff4da6 !important;
  --ico-color: #ff4da6 !important;
}

/* ============================================================
 * 145. post.php composer (X 風リニューアル s6)
 *      通常 / 画像 1-4 / 動画 / 引用 / 返信 のいずれでも美しく
 * ============================================================ */

.composer-page-body { padding: 0 var(--space-4, 16px) var(--space-5, 24px); }

/* === 返信先 (parent post) === */
.composer-parent {
  display: flex;
  gap: 14px;
  padding: 14px 4px 0;
  position: relative;
}
.composer-parent .cp-avatar {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.composer-parent .cp-thread-line {
  width: 2px;
  flex: 1;
  background: linear-gradient(to bottom, rgba(124, 77, 255, 0.5), rgba(124, 77, 255, 0.1));
  margin-top: 4px;
  min-height: 16px;
}
.composer-parent .cp-body { flex: 1 1 auto; min-width: 0; }
.composer-parent .cp-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-bottom: 4px;
}
.composer-parent .cp-name {
  font-weight: 700; color: var(--text-primary);
}
.composer-parent .cp-text {
  font-size: 0.95rem; line-height: 1.55;
  color: var(--text-primary);
  white-space: pre-wrap; word-break: break-word;
}
.composer-parent .cp-media-thumb {
  margin-top: 8px;
  max-width: 200px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-primary);
}
.composer-parent .cp-media-thumb img {
  width: 100%; height: auto; display: block;
}
.composer-parent .cp-media-video {
  padding: 10px 14px;
  color: var(--text-muted);
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.9rem;
}
.composer-parent .cp-replying-to {
  margin-top: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-muted);
}

/* === composer 本体 === */
.composer-v2 {
  margin-top: 14px;
  padding: 12px 0 0;
  border-top: 1px solid var(--border-primary, #2f3336);
}
.composer-row {
  display: flex; gap: 12px;
  align-items: flex-start;
}
.composer-avatar { flex: 0 0 auto; padding-top: 4px; }
.composer-body { flex: 1 1 auto; min-width: 0; }

.composer-textarea {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 1.15rem;
  line-height: 1.5;
  font-family: inherit;
  resize: none;
  min-height: 120px;
  padding: 6px 0 10px;
}
.composer-textarea::placeholder {
  color: var(--text-muted, #71767b);
}

/* === 画像プレビュー: X 風 1/2/3/4 レイアウト === */
.composer-image-grid {
  display: grid; gap: 4px;
  margin: 10px 0 4px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-primary);
  aspect-ratio: 16 / 10;
  max-height: 420px;
}
.composer-image-grid.n1 { grid-template-columns: 1fr; grid-template-rows: 1fr; aspect-ratio: 16/10; }
.composer-image-grid.n2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; aspect-ratio: 16/9; }
.composer-image-grid.n3 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  aspect-ratio: 16/10;
}
.composer-image-grid.n3 .cig-item:first-child {
  grid-row: 1 / span 2;
}
.composer-image-grid.n4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  aspect-ratio: 1/1;
}
.cig-item {
  position: relative;
  overflow: hidden;
  background: rgba(0,0,0,0.4);
}
.cig-item img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.cig-remove {
  position: absolute; top: 6px; right: 6px;
  width: 30px; height: 30px;
  border: none; border-radius: 50%;
  background: rgba(0,0,0,0.72);
  color: #fff;
  font-size: 1.3rem; line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, transform 0.1s;
}
.cig-remove:hover { background: rgba(0,0,0,0.9); transform: scale(1.06); }

/* === 動画プレビュー === */
.composer-video-preview {
  position: relative;
  margin: 10px 0 4px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-primary);
  background: #000;
  max-height: 480px;
}
.cvp-video {
  width: 100%; display: block;
  max-height: 480px; object-fit: contain;
  background: #000;
}
.cvp-remove {
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px;
  border: none; border-radius: 50%;
  background: rgba(0,0,0,0.72);
  color: #fff;
  font-size: 1.3rem; line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.cvp-remove:hover { background: rgba(0,0,0,0.9); }

/* === 引用元カード === */
.composer-quote {
  margin: 10px 0 4px;
  padding: 10px 12px;
  border: 1px solid var(--border-primary);
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
}
.composer-quote .cq-head {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.composer-quote .cq-name { font-weight: 700; color: var(--text-primary); }
.composer-quote .cq-handle { color: var(--text-muted); }
.composer-quote .cq-body {
  font-size: 0.92rem; line-height: 1.55;
  color: var(--text-primary);
  white-space: pre-wrap; word-break: break-word;
}
.composer-quote .cq-media {
  margin-top: 8px;
  border-radius: 12px; overflow: hidden;
  max-height: 240px;
  position: relative;
}
.composer-quote .cq-media img {
  width: 100%; height: auto; display: block;
  max-height: 240px; object-fit: cover;
}
.composer-quote .cq-media-video .cq-media-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 2.2rem;
  background: rgba(0,0,0,0.30);
  pointer-events: none;
}

/* === アクション行 === */
.composer-actions-bar {
  margin-top: 10px;
  padding: 10px 0 4px;
  padding-left: calc(40px + 12px);  /* avatar幅 + gap でテキストに揃える */
  border-top: 1px solid var(--border-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.composer-media-actions {
  display: flex; gap: 4px;
}
.composer-media-btn {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: #00e5ff;
  cursor: pointer;
  font-size: 1.15rem;
  transition: background 0.15s, color 0.15s;
}
.composer-media-btn:hover { background: rgba(0, 229, 255, 0.10); }
.composer-media-btn.is-disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

.composer-right-actions {
  display: flex; align-items: center; gap: 10px;
}

/* === 文字数カウンタ (リング状) === */
.composer-counter-ring {
  position: relative;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
}
.composer-counter-ring svg {
  position: absolute; inset: 0;
  width: 22px; height: 22px;
}
.composer-counter-ring .composer-counter-text {
  position: relative; z-index: 1;
  font-size: 0.65rem; font-weight: 700;
  line-height: 1;
}

/* === 送信ボタン === */
.composer-submit-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 22px;
  background: linear-gradient(135deg, #00e5ff, #7c4dff);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.composer-submit-btn:hover:not(:disabled) { transform: translateY(-1px); }
.composer-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.composer-submit-spinner { font-size: 0.95rem; }

/* === アップロード進捗 === */
.composer-upload-progress {
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(0, 229, 255, 0.06);
  border: 1px solid rgba(0, 229, 255, 0.30);
  border-radius: 12px;
}
.composer-upload-progress .cp-track {
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
  position: relative;
}
.composer-upload-progress .cp-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, #00e5ff, #7c4dff);
  border-radius: 999px;
  transition: width 0.1s ease-out;
}
.composer-upload-progress .cp-text {
  text-align: right;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* === スマホ調整 === */
@media (max-width: 480px) {
  .composer-page-body { padding: 0 12px 16px; }
  .composer-textarea { font-size: 1.05rem; min-height: 96px; }
  .composer-actions-bar {
    padding-left: 0;
  }
  .composer-image-grid.n1 { aspect-ratio: 4/3; }
  .composer-quote .cq-media { max-height: 180px; }
}

/* メニュー項目のベータバッジ (例: 「公共注釈 (ベータ版)」) */
.nav-item .beta-tag,
.drawer-menu-item .beta-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1.4;
  color: var(--accent-gold);
  background: var(--action-bookmark-bg);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-full);
  vertical-align: middle;
  white-space: nowrap;
}

/* 投稿下に出る「公共注釈を評価する」プロンプト (公開済 yellow box の代替/補助)
   サイト共通カードに揃え、アクセントは --accent-green (評価依頼=協力募集) */
.post-cn-rate-prompt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: var(--space-3) 0;
  padding: 9px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-left: 3px solid var(--accent-green);
  border-radius: var(--radius-md);
  color: var(--accent-green);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
  transition: background var(--transition-fast), border-left-color var(--transition-fast);
}
.post-cn-rate-prompt:hover {
  background: var(--bg-hover);
  border-left-color: var(--accent-purple);
  text-decoration: none;
  color: var(--accent-green);
}
.post-cn-rate-prompt .pcrp-icon .cn-icon-gavel {
  width: 1.1em; height: 1.1em;
  vertical-align: middle;
}
.post-cn-rate-prompt .pcrp-text { flex: 1; }
.post-cn-rate-prompt .pcrp-count {
  display: inline-block;
  padding: 1px 8px;
  background: var(--action-repost-bg);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
}
.post-cn-rate-prompt .pcrp-chevron {
  font-size: 0.8rem;
  opacity: 0.7;
}

/* 投稿下「あなたの公共注釈」インジケータ (自分が書いた注釈の状態確認用) */
.post-cn-own-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  padding: 9px 14px;
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.07), rgba(124, 77, 255, 0.05));
  border: 1px solid rgba(0, 229, 255, 0.35);
  border-radius: var(--radius-md, 12px);
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  transition: background 0.15s;
}
.post-cn-own-note:hover {
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.14), rgba(124, 77, 255, 0.08));
  text-decoration: none;
}
.post-cn-own-note .pcon-icon .cn-icon-gavel {
  width: 1.1em; height: 1.1em;
  vertical-align: middle;
  color: #00e5ff;
}
.post-cn-own-note .pcon-text { flex: 1; }
.post-cn-own-note .pcon-status {
  display: inline-block;
  padding: 1px 9px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid currentColor;
}
.post-cn-own-note .pcon-status-pending     { color: #ffd700; background: rgba(255, 215, 0, 0.12); }
.post-cn-own-note .pcon-status-helpful     { color: #00ff9d; background: rgba(0, 255, 157, 0.12); }
.post-cn-own-note .pcon-status-not-helpful { color: #ff4d6d; background: rgba(255, 77, 109, 0.12); }
.post-cn-own-note .pcon-chevron {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ============================================================
 * 146. 公共注釈 評価アイコン (絵文字置換)
 *      helpful: 緑系 (親指上) / somewhat: 金系 (=) / not: 赤系 (親指下)
 * ============================================================ */

.cn-rate-icon {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.18em;
  fill: currentColor;
}

/* 評価ボタンの中央 + 上下センター揃え */
.cn-rate-actions .cn-rate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
/* SVG / span 内をクリックしてもボタン本体がクリックされるよう、
   子要素のポインタイベントを切る (event 委譲時の closest 不具合回避) */
.cn-rate-actions .cn-rate-btn > * {
  pointer-events: none;
}
/* hover で軽く拡大 + 各色ライン強調 */
.cn-rate-actions .cn-rate-btn .cn-rate-icon {
  transition: transform 0.12s ease;
}
.cn-rate-actions .cn-rate-btn:hover .cn-rate-icon {
  transform: scale(1.15);
}
.cn-rate-actions .cn-rate-btn.cn-rate-helpful          { color: #00ff9d; }
.cn-rate-actions .cn-rate-btn.cn-rate-helpful:hover    {
  background: rgba(0, 255, 157, 0.14); border-color: #00ff9d;
}
.cn-rate-actions .cn-rate-btn.cn-rate-somewhat-helpful { color: #ffd700; }
.cn-rate-actions .cn-rate-btn.cn-rate-somewhat-helpful:hover {
  background: rgba(255, 215, 0, 0.14); border-color: #ffd700;
}
.cn-rate-actions .cn-rate-btn.cn-rate-not-helpful      { color: #ff4d6d; }
.cn-rate-actions .cn-rate-btn.cn-rate-not-helpful:hover {
  background: rgba(255, 77, 109, 0.14); border-color: #ff4d6d;
}

/* hover した瞬間に少し動きを (helpful=ぴょこ、somewhat=ゆれ、not=しょぼ) */
.cn-rate-actions .cn-rate-helpful:hover    .cn-rate-icon { animation: cn-bounce 0.45s ease; }
.cn-rate-actions .cn-rate-somewhat-helpful:hover .cn-rate-icon { animation: cn-wobble 0.6s ease; }
.cn-rate-actions .cn-rate-not-helpful:hover .cn-rate-icon { animation: cn-drop 0.45s ease; }

@keyframes cn-bounce {
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(-3px) scale(1.18); }
  100% { transform: translateY(0) scale(1.15); }
}
@keyframes cn-wobble {
  0%, 100% { transform: rotate(0) scale(1.15); }
  25%      { transform: rotate(-10deg) scale(1.15); }
  75%      { transform: rotate(10deg) scale(1.15); }
}
@keyframes cn-drop {
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(3px) scale(1.18); }
  100% { transform: translateY(0) scale(1.15); }
}

/* フッターの集計表示 (👍 N / = N / 👎 N) */
.cn-rate-stat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 0 4px;
  font-weight: 600;
}
.cn-rate-stat .cn-rate-icon {
  width: 0.95em; height: 0.95em;
}
.cn-rate-stat-helpful  { color: var(--accent-green); }
.cn-rate-stat-somewhat { color: var(--accent-gold); }
.cn-rate-stat-not      { color: var(--accent-pink); }

/* 投稿下「評価中の公共注釈を見る」(自分は評価済 / 公開前) — シアンアクセント */
.post-cn-evaluating-prompt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: var(--space-3) 0;
  padding: 9px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-left: 3px solid var(--accent-cyan);
  border-radius: var(--radius-md);
  color: var(--accent-cyan);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
  transition: background var(--transition-fast), border-left-color var(--transition-fast);
}
.post-cn-evaluating-prompt:hover {
  background: var(--bg-hover);
  border-left-color: var(--accent-purple);
  text-decoration: none;
  color: var(--accent-cyan);
}
.post-cn-evaluating-prompt .pcep-icon .cn-icon-gavel {
  width: 1.1em; height: 1.1em;
  vertical-align: middle;
}
.post-cn-evaluating-prompt .pcep-text { flex: 1; }
.post-cn-evaluating-prompt .pcep-chevron {
  font-size: 0.8rem;
  opacity: 0.7;
}

/* ─────────────────────────────────────────────
   145. 入力中シンタックスハイライト (#/@/URL を X 風に青色表示)
        morioka-input-highlight.js が overlay/backdrop を生成
   ───────────────────────────────────────────── */
.mih-wrap { position: relative; }

.mih-backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 2;            /* 本体の上に重ねる (本体の不透明背景でも文字が見えるように) */
  pointer-events: none;
  color: var(--text-primary);
  background: transparent;
  border-color: transparent !important;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}
.mih-backdrop.mih-multiline {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
}
.mih-backdrop.mih-singleline {
  white-space: pre;
  overflow: hidden;
}

/* 着色トークン: サイト基調の鮮やかな青 (#1d9bf0)
   ライトモードの全要素テキスト色強制 (§113 の高詳細度ワイルドカード) に
   負けないよう !important で上書きする。 */
.mih-backdrop .mih-hashtag,
.mih-backdrop .mih-mention,
.mih-backdrop .mih-url,
body.theme-light .mih-backdrop .mih-hashtag,
body.theme-light .mih-backdrop .mih-mention,
body.theme-light .mih-backdrop .mih-url {
  color: var(--accent-cyan) !important;
  /* font-weight だと字幅が変わりキャレットがズレる → text-stroke で太らせる */
  -webkit-text-stroke: 0.55px var(--accent-cyan);
}

/* キャレットだけ残すため本体文字を透明化しているが、
   -webkit-text-fill-color はプレースホルダにも効くため復帰させる。 */
.mih-wrap > input::placeholder,
.mih-wrap > textarea::placeholder {
  -webkit-text-fill-color: var(--text-muted);
  color: var(--text-muted);
  opacity: 1;
}
.mih-wrap > input::-webkit-input-placeholder,
.mih-wrap > textarea::-webkit-input-placeholder {
  -webkit-text-fill-color: var(--text-muted);
}

/* ============================================================
 * 117. ライトテーマ・バリエーション
 *   theme-light の構造ルールをそのまま流用し、色変数とブランド
 *   背景・縁取りだけを上書きして別ベクトルの美しさを作る。
 *   - light-arctic : 寒色・クリスタル・ミニマルで都会的
 *   - light-sunset : 暖色・夕焼け・ロマンチックで感動的
 * ============================================================ */

/* ===== アークティック (Arctic): 氷のように澄んだクールミニマル ===== */
body.theme-light.theme-light-arctic {
  --bg-primary:    #f3f8ff;
  --bg-secondary:  #eaf3fc;
  --bg-tertiary:   #e6f6f6;
  --bg-overlay:    rgba(243, 248, 255, 0.92);
  --bg-hover:      rgba(14, 165, 233, 0.06);
  --bg-card:       #ffffff;
  --bg-card-hover: rgba(14, 165, 233, 0.04);

  --text-primary:   #0b2c4d;
  --text-secondary: #3a5a7d;
  --text-muted:     #6f87a3;
  --text-accent:    #0b2c4d;

  --accent-purple: #4f46e5;
  --accent-cyan:   #0ea5e9;
  --accent-green:  #14b8a6;
  --accent-pink:   #f43f5e;
  --accent-gold:   #eab308;
  --accent-blue:   #0ea5e9;

  --action-reply:    #0ea5e9;
  --action-repost:   #14b8a6;
  --action-like:     #f43f5e;
  --action-share:    #4f46e5;
  --action-bookmark: #eab308;
  --action-default:  #6f87a3;
  --action-reply-bg:    rgba(14, 165, 233, 0.10);
  --action-repost-bg:   rgba(20, 184, 166, 0.10);
  --action-like-bg:     rgba(244, 63, 94, 0.10);
  --action-share-bg:    rgba(79, 70, 229, 0.10);
  --action-bookmark-bg: rgba(234, 179, 8, 0.12);

  --gradient-primary:   linear-gradient(135deg, #4f46e5, #0ea5e9);
  --gradient-secondary: linear-gradient(135deg, rgba(79, 70, 229, 0.10), rgba(14, 165, 233, 0.08));
  --gradient-danger:    linear-gradient(135deg, #f43f5e, #be123c);
  --gradient-success:   linear-gradient(135deg, #14b8a6, #0d9488);

  --border-primary:   rgba(14, 165, 233, 0.16);
  --border-secondary: rgba(14, 165, 233, 0.09);
  --border-glow:      rgba(14, 165, 233, 0.45);

  --shadow-sm: 0 1px 4px rgba(14, 165, 233, 0.07);
  --shadow-md: 0 2px 10px rgba(14, 165, 233, 0.10);
  --shadow-lg: 0 6px 24px rgba(14, 165, 233, 0.14);
  --shadow-glow:        0 0 24px rgba(14, 165, 233, 0.22);
  --shadow-glow-purple: 0 0 24px rgba(79, 70, 229, 0.20);

  background:
    radial-gradient(ellipse 1600px 1100px at 8% -10%, rgba(79, 70, 229, 0.18), transparent 55%),
    radial-gradient(ellipse 1400px 1000px at 92% 6%, rgba(14, 165, 233, 0.22), transparent 55%),
    radial-gradient(ellipse 1200px 1000px at 50% 108%, rgba(20, 184, 166, 0.18), transparent 60%),
    linear-gradient(135deg, #f2f8ff 0%, #eef6fc 50%, #effcfb 100%) !important;
  background-attachment: fixed !important;
}
body.theme-light.theme-light-arctic .col-main {
  border-left: 1px solid rgba(79, 70, 229, 0.16) !important;
  border-right: 1px solid rgba(14, 165, 233, 0.18) !important;
  box-shadow: none !important;
}
body.theme-light.theme-light-arctic .col-main-header {
  border-bottom: 1px solid rgba(14, 165, 233, 0.18) !important;
  box-shadow: none !important;
}
body.theme-light.theme-light-arctic .post-card,
body.theme-light.theme-light-arctic .post,
body.theme-light.theme-light-arctic .post-item,
body.theme-light.theme-light-arctic .post-detail {
  border-bottom: 1px solid rgba(14, 165, 233, 0.14) !important;
}
body.theme-light.theme-light-arctic .post-card:hover,
body.theme-light.theme-light-arctic .post:hover {
  box-shadow: inset 3px 0 0 #0ea5e9, 0 4px 24px rgba(14, 165, 233, 0.14) !important;
}
body.theme-light.theme-light-arctic .composer,
body.theme-light.theme-light-arctic .post-composer {
  border: 1px solid rgba(14, 165, 233, 0.18) !important;
  box-shadow: 0 4px 24px rgba(14, 165, 233, 0.10) !important;
}
body.theme-light.theme-light-arctic .col-nav,
body.theme-light.theme-light-arctic nav.col-nav {
  border-image: none !important;
  border-right: 1px solid rgba(14, 165, 233, 0.12) !important;
}
body.theme-light.theme-light-arctic .aside-card {
  border-image: none !important;
  border: 1px solid rgba(14, 165, 233, 0.14) !important;
  box-shadow: 0 2px 10px rgba(14, 165, 233, 0.06) !important;
}

/* ===== サンセット (Sunset): 夕焼けのように暖かく感動的なグロウ ===== */
body.theme-light.theme-light-sunset {
  --bg-primary:    #fff7f1;
  --bg-secondary:  #fff0f3;
  --bg-tertiary:   #fef4ea;
  --bg-overlay:    rgba(255, 247, 241, 0.92);
  --bg-hover:      rgba(251, 113, 133, 0.06);
  --bg-card:       #ffffff;
  --bg-card-hover: rgba(251, 113, 133, 0.04);

  --text-primary:   #3a1f2e;
  --text-secondary: #6e4a52;
  --text-muted:     #9a7b82;
  --text-accent:    #3a1f2e;

  --accent-purple: #a855f7;
  --accent-cyan:   #fb7185;
  --accent-green:  #16a34a;
  --accent-pink:   #ec4899;
  --accent-gold:   #f59e0b;
  --accent-blue:   #fb7185;

  --action-reply:    #fb7185;
  --action-repost:   #16a34a;
  --action-like:     #ec4899;
  --action-share:    #a855f7;
  --action-bookmark: #f59e0b;
  --action-default:  #9a7b82;
  --action-reply-bg:    rgba(251, 113, 133, 0.12);
  --action-repost-bg:   rgba(22, 163, 74, 0.10);
  --action-like-bg:     rgba(236, 72, 153, 0.10);
  --action-share-bg:    rgba(168, 85, 247, 0.10);
  --action-bookmark-bg: rgba(245, 158, 11, 0.12);

  --gradient-primary:   linear-gradient(135deg, #fb7185, #f59e0b);
  --gradient-secondary: linear-gradient(135deg, rgba(251, 113, 133, 0.12), rgba(245, 158, 11, 0.08));
  --gradient-danger:    linear-gradient(135deg, #f43f5e, #be123c);
  --gradient-success:   linear-gradient(135deg, #16a34a, #15803d);

  --border-primary:   rgba(251, 113, 133, 0.18);
  --border-secondary: rgba(251, 113, 133, 0.10);
  --border-glow:      rgba(245, 158, 11, 0.45);

  --shadow-sm: 0 1px 4px rgba(251, 113, 133, 0.08);
  --shadow-md: 0 2px 10px rgba(251, 113, 133, 0.12);
  --shadow-lg: 0 6px 24px rgba(251, 113, 133, 0.16);
  --shadow-glow:        0 0 24px rgba(245, 158, 11, 0.22);
  --shadow-glow-purple: 0 0 24px rgba(168, 85, 247, 0.20);

  background:
    radial-gradient(ellipse 1500px 1050px at 6% -8%, rgba(251, 113, 133, 0.24), transparent 55%),
    radial-gradient(ellipse 1400px 1000px at 94% 4%, rgba(251, 191, 36, 0.22), transparent 55%),
    radial-gradient(ellipse 1200px 1000px at 50% 108%, rgba(236, 72, 153, 0.16), transparent 60%),
    radial-gradient(ellipse 900px 760px at 88% 70%, rgba(196, 181, 253, 0.18), transparent 65%),
    linear-gradient(135deg, #fff6f0 0%, #fff0f4 50%, #fef6ec 100%) !important;
  background-attachment: fixed !important;
}
body.theme-light.theme-light-sunset .col-main {
  border-left: 1px solid rgba(251, 113, 133, 0.18) !important;
  border-right: 1px solid rgba(245, 158, 11, 0.18) !important;
  box-shadow: none !important;
}
body.theme-light.theme-light-sunset .col-main-header {
  border-bottom: 1px solid rgba(251, 113, 133, 0.18) !important;
  box-shadow: none !important;
}
body.theme-light.theme-light-sunset .post-card,
body.theme-light.theme-light-sunset .post,
body.theme-light.theme-light-sunset .post-item,
body.theme-light.theme-light-sunset .post-detail {
  border-bottom: 1px solid rgba(251, 113, 133, 0.15) !important;
}
body.theme-light.theme-light-sunset .post-card:hover,
body.theme-light.theme-light-sunset .post:hover {
  box-shadow: inset 3px 0 0 #fb7185, 0 4px 24px rgba(251, 113, 133, 0.14) !important;
}
body.theme-light.theme-light-sunset .composer,
body.theme-light.theme-light-sunset .post-composer {
  border: 1px solid rgba(251, 113, 133, 0.20) !important;
  box-shadow: 0 4px 24px rgba(251, 113, 133, 0.10) !important;
}
body.theme-light.theme-light-sunset .col-nav,
body.theme-light.theme-light-sunset nav.col-nav {
  border-image: none !important;
  border-right: 1px solid rgba(251, 113, 133, 0.12) !important;
}
body.theme-light.theme-light-sunset .aside-card {
  border-image: none !important;
  border: 1px solid rgba(251, 113, 133, 0.14) !important;
  box-shadow: 0 2px 10px rgba(251, 113, 133, 0.06) !important;
}

/* ============================================================
 * 118. 名前/ユーザー名リンクの hover で色を変えない (全テーマ共通)
 *   .author-link は <a> なので a:hover の色 (accent-purple / 青) が
 *   名前に乗ってしまう。X 同様、名前は色を変えず下線のみにする。
 *   テーマクラスに依存しないよう body 接頭辞なしで定義 (最終手段)。
 * ============================================================ */
.author-link,
.author-link:hover,
.author-link:hover .author-name,
.author-link:hover .author-name-text,
.author-name,
.author-name-text,
.post:hover .author-name,
.post:hover .author-name-text,
.post-card:hover .author-name,
.post-card:hover .author-name-text,
.post-detail-author .author-name,
.post-detail-author .author-name-text,
.quote-author .author-name-text {
  color: var(--text-primary) !important;
}
.author-handle,
.post:hover .author-handle,
.post-card:hover .author-handle,
.author-link:hover ~ .author-handle {
  color: var(--text-muted) !important;
}
/* 名前ホバーは下線も出さない */
.author-link:hover,
.author-link:hover .author-name-text { text-decoration: none !important; }

/* ============================================================
 * 119. 投稿内の <header>(.posthead) 等が白い箱になる問題の修正
 *   body.theme-light の一括背景ルールが汎用 header / aside を白くする
 *   ため、投稿内の名前行 (<header class="posthead">) だけ白背景の箱に
 *   なってしまう。投稿内の構造要素は背景透明にしてカードと一体化させる。
 * ============================================================ */
/* col-main 内の入れ子 <header> は基本透明にする。ただしページのタイトルバー
   (.col-main-header)、DM のチャットヘッダー (.dm-chat-header) は白のまま残す。
   これで投稿の名前行 (.posthead)・返信/引用プレビュー (.cp-head/.cq-head)・
   投稿詳細の著者行 (.post-detail-head) 等、各ページの「白い箱」を一掃する。 */
body.theme-light .col-main header:not(.col-main-header):not(.dm-chat-header),
body.theme-light .posthead,
body.theme-light .post .posthead,
body.theme-light .post-card .posthead,
body.theme-light .post header,
body.theme-light .post-card header,
body.theme-light .post-author-meta,
body.theme-light .post-meta-right,
body.theme-light .post-detail-head,
body.theme-light .post-detail-author,
body.theme-light .post-detail-body,
body.theme-light .post-detail-time,
body.theme-light .post-detail-stats,
body.theme-light .post-detail-actions,
body.theme-light .cp-head,
body.theme-light .cq-head,
body.theme-light .quote-card header,
body.theme-light .quote-head {
  background: transparent !important;
}

/* ============================================================
 * 120. ライトモード: ホバー時の下線(バー)を全廃
 *   body.theme-light a:hover の text-decoration:underline が、リンクや
 *   その中身 (公共注釈カード・名前・URL 等) すべてに下線を出していた。
 *   ホバーで下線を一切出さない (X と同じ挙動)。
 * ============================================================ */
body.theme-light a:hover,
body.theme-light a:hover *,
body.theme-light a:focus,
body.theme-light button:hover,
body.theme-light *:hover {
  text-decoration: none !important;
}

/* ============================================================
 * 121. グローバル コンポーザモーダル (_composer_modal.php)
 *   - 全ページに常駐し、返信/引用/新規投稿を画面遷移なしで投稿
 *   - PC は中央モーダル、モバイル (<= 720px) はボトムシート風 (全画面寄り)
 *   - body.cm-locked で背面スクロールを止める
 * ============================================================ */
html.cm-locked, body.cm-locked { overflow: hidden !important; touch-action: none; }

.composer-modal { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: flex-start; justify-content: center; }
.composer-modal[hidden] { display: none !important; }
.cm-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.72); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.cm-sheet {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  width: min(640px, 100%); max-height: calc(100vh - 40px); margin-top: 40px;
  background: var(--bg-primary, #15181c);
  border: 1px solid var(--border-color, #2f3336);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
}
.cm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-bottom: 1px solid var(--border-color, #2f3336);
  flex: 0 0 auto; background: var(--bg-primary, #15181c);
}
.cm-close {
  background: transparent; border: 0; color: inherit; width: 36px; height: 36px;
  border-radius: 50%; font-size: 18px; cursor: pointer;
}
.cm-close:hover { background: rgba(255,255,255,0.08); }
.cm-title { font-size: 17px; font-weight: 700; margin: 0; flex: 1; padding-left: 6px; }
.cm-submit-top {
  background: var(--accent-cyan, #00e5ff); color: #000; border: 0;
  font-weight: 700; padding: 8px 18px; border-radius: 9999px; cursor: pointer;
  font-size: 14px;
}
.cm-submit-top:disabled { opacity: 0.5; cursor: not-allowed; }

.cm-scroll { overflow-y: auto; flex: 1 1 auto; padding: 12px 16px 16px; -webkit-overflow-scrolling: touch; }

.cm-preview { margin-bottom: 4px; }
.cm-preview-grid { display: grid; grid-template-columns: 48px 1fr; gap: 12px; }
.cm-preview-avatar { position: relative; }
.cm-preview-thread-line {
  position: absolute; left: 50%; top: 48px; bottom: -8px; width: 2px;
  background: var(--border-color, #2f3336); transform: translateX(-50%);
}
.cm-preview-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; }
.cm-preview-name { font-weight: 700; }
.cm-preview-text {
  margin-top: 2px; word-break: break-word; font-size: 14px; line-height: 1.45;
  /* 親本文は折りたたんで textarea を画面内に保つ (最大 3 行) */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}
.cm-preview-thumb {
  margin-top: 6px; position: relative;
  max-width: 160px; max-height: 96px; border-radius: 12px; overflow: hidden;
}
.cm-preview-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cm-preview-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.92); font-size: 26px; text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  pointer-events: none;
}
.cm-preview-reply-to { margin-top: 8px; color: var(--text-muted, #71767b); font-size: 13px; }

.cm-form { display: flex; flex-direction: column; gap: 10px; }
.cm-row { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding-top: 8px; }
.cm-textarea {
  width: 100%; min-height: 80px; resize: none; border: 0; background: transparent;
  color: inherit; font: inherit; font-size: 18px; line-height: 1.5; outline: none;
  padding: 4px 0;
}
.cm-textarea::placeholder { color: var(--text-muted, #71767b); }

.cm-image-grid { display: grid; gap: 4px; margin-top: 8px; border-radius: 14px; overflow: hidden; }
.cm-image-grid.n1 { grid-template-columns: 1fr; }
.cm-image-grid.n2 { grid-template-columns: 1fr 1fr; }
.cm-image-grid.n3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.cm-image-grid.n3 .cig-item:first-child { grid-row: span 2; }
.cm-image-grid.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.cig-item { position: relative; aspect-ratio: 1 / 1; background: #000; overflow: hidden; }
.cm-image-grid.n1 .cig-item { aspect-ratio: 16 / 9; }
.cig-item img { width: 100%; height: 100%; object-fit: cover; }
.cig-remove {
  position: absolute; top: 6px; right: 6px; width: 28px; height: 28px;
  border-radius: 50%; background: rgba(0,0,0,0.7); color: #fff; border: 0;
  font-size: 16px; cursor: pointer;
}
.cig-remove:hover { background: rgba(0,0,0,0.9); }

.cm-video-preview { position: relative; margin-top: 8px; border-radius: 14px; overflow: hidden; background: #000; }
.cvp-video { display: block; width: 100%; max-height: 60vh; }
.cvp-remove {
  position: absolute; top: 6px; right: 6px; width: 28px; height: 28px;
  border-radius: 50%; background: rgba(0,0,0,0.7); color: #fff; border: 0; font-size: 16px; cursor: pointer; z-index: 2;
}

.cm-upload-progress { padding: 4px 0; }
.cup-track { background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; height: 4px; }
.cup-fill  { background: var(--accent-cyan, #00e5ff); height: 100%; width: 0%; transition: width 0.15s ease-out; }
.cup-text  { font-size: 12px; color: var(--text-muted, #71767b); margin-top: 4px; }

.cm-actions-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0 4px; border-top: 1px solid var(--border-color, #2f3336);
}
.cm-media-actions { display: flex; gap: 6px; }
.cm-media-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  color: var(--accent-cyan, #00e5ff); font-size: 18px; transition: background 0.15s;
}
.cm-media-btn:hover { background: rgba(0, 229, 255, 0.12); }
.cm-media-btn.is-disabled { opacity: 0.35; pointer-events: none; }

.cm-right-actions { display: flex; align-items: center; gap: 10px; }
.cm-counter-ring { position: relative; width: 22px; height: 22px; }
.cm-counter-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.cm-submit-btn {
  background: var(--accent-cyan, #00e5ff); color: #000; border: 0; padding: 8px 18px;
  border-radius: 9999px; font-weight: 700; cursor: pointer; font-size: 14px;
  display: inline-flex; align-items: center; gap: 8px;
}
.cm-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cm-error { color: #ff4d6d; font-size: 13px; padding: 6px 0; }

/* モバイル: トップから滑り降りる popup
   - 上から auto-height で出てきて、上下 4 角を丸める (ステータスバー直下に浮く)
   - 最大 90dvh まで (それ以上は中の cm-scroll が内側スクロール)
   - iOS PWA standalone のステータスバーには safe-area で被らない */
@media (max-width: 720px) {
  .composer-modal { align-items: flex-start; padding: 8px; }
  .cm-sheet {
    width: 100%; max-width: 100%;
    margin: calc(8px + env(safe-area-inset-top, 0px)) 0 0;
    height: auto; max-height: calc(90dvh - env(safe-area-inset-top, 0px));
    border-radius: 18px;
    border: 0;
    box-shadow: 0 12px 32px rgba(0,0,0,0.45);
    animation: cm-slide-down 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .cm-header  { padding-top: 8px; } /* safe-area は cm-sheet 側で取るのでヘッダ自体は普通 */
  .cm-scroll  { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .cm-textarea { font-size: 17px; }
}
@keyframes cm-slide-down {
  from { transform: translateY(-110%); opacity: 0.4; }
  to   { transform: translateY(0);     opacity: 1;   }
}

/* ライトテーマ調整 */
body.theme-light .cm-sheet { background: #ffffff; }
body.theme-light .cm-header { background: #ffffff; }
body.theme-light .cm-backdrop { background: rgba(0,0,0,0.55); }
body.theme-light .cm-submit-top, body.theme-light .cm-submit-btn { background: #1d9bf0; color: #fff; }
body.theme-light .cm-media-btn { color: #1d9bf0; }
body.theme-light .cm-media-btn:hover { background: rgba(29, 155, 240, 0.12); }

/* ============================================================
 * 122. 返信ツリー (view_post.php)
 *   - depth=1 はフル _post_card (従来通り)
 *   - depth>=2 は .nested-reply chip (旧コンパクト表示を維持)
 *   - 同一親の chip が 4 件超なら <details class="reply-collapse"> で折りたたみ
 *   - .nested-reply-row の --ni でインデント (孫=0, ひ孫=1, …)
 * ============================================================ */
.reply-tree { display: block; }
.reply-node { position: relative; }

/* (A) 直接返信が OP と同一作者: 上カードとの境目を詰めて連投表記 */
.reply-node.is-continuation .post { border-top: 0; }

/* 孫以降の compact chip: 階層ごとにインデント */
.nested-reply-row {
  padding-left: calc(var(--ni, 0) * 22px);
}

/* (C) 折りたたみ "返信を N 件表示" */
.reply-collapse > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  margin: 4px 0 4px 4px;
  color: var(--accent-cyan, #1d9bf0);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 9999px;
}
.reply-collapse > summary::-webkit-details-marker { display: none; }
.reply-collapse > summary:hover { background: rgba(29,155,240,0.08); }
.reply-collapse[open] > summary { color: var(--text-muted, #71767b); font-weight: 500; }
.reply-collapse[open] > summary::before {
  content: "\f077"; /* chevron-up */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
}
.reply-collapse:not([open]) > summary::after {
  content: "\f078"; /* chevron-down */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
  margin-left: 4px;
}

/* モバイル: インデント縮小 */
@media (max-width: 720px) {
  .nested-reply-row { padding-left: calc(var(--ni, 0) * 14px); }
}


/* ============================================================
 * 143. フィードバック (サイド CTA + 送信フォーム)
 * ============================================================ */
/* サイドメニューとは別の、中央揃え CTA ボタン */
.sidebar-feedback {
  display: flex;
  justify-content: center;
  padding: 14px 12px 4px;
}
.sidebar-feedback-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  /* ダークでも控えめに: グラデ塗りつぶしをやめ、アウトライン基調 */
  color: var(--text-secondary, #aab2b8);
  background: transparent;
  border: 1px solid var(--border-primary, #2f3336);
  box-shadow: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.sidebar-feedback-btn:hover {
  border-color: var(--accent-cyan, #00e5ff);
  color: var(--text-primary, #e7e9ea);
  background: rgba(0, 229, 255, 0.06);
}
.sidebar-feedback-btn i { font-size: 0.95em; color: var(--accent-cyan, #00e5ff); }
/* ライト時: 透明地だと box-shadow が白地で四角いモヤに見えて不自然なので、
   影を消してすっきりした枠線(アウトライン)に。PC(col-nav)とスマホ(side-drawer)で
   完全に同じ見た目に揃える。 */
body.theme-light .col-nav .sidebar-feedback-btn,
body.theme-light .side-drawer .sidebar-feedback-btn {
  background: transparent !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-primary) !important;
  box-shadow: none !important;
}
/* ドロワーの .drawer-menu / .drawer-footer は bg-card を明示的に塗って白くしているが、
   間の .sidebar-feedback は無地で下地が透け、グレーの帯に見えていた。同じ白を塗って繋ぐ。 */
body.theme-light .side-drawer .sidebar-feedback {
  background: var(--bg-card) !important;
}

/* 送信フォームページ */
.feedback-page { padding: 18px; }
.feedback-lead {
  color: var(--text-secondary, #71767b);
  font-size: 0.9rem;
  line-height: 1.7;
  margin: 0 0 16px;
}
.feedback-flash {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 12px; margin-bottom: 14px;
  font-size: 0.9rem; font-weight: 600;
}
.feedback-flash-ok { background: rgba(0,255,157,0.10); border: 1px solid #00ff9d; color: #00c97e; }
.feedback-flash-ng { background: rgba(255,77,109,0.10); border: 1px solid #ff4d6d; color: #ff4d6d; }
.feedback-form { display: flex; flex-direction: column; gap: 12px; }
.feedback-textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 160px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border-primary, #2f3336);
  background: var(--bg-input, rgba(255,255,255,0.03));
  color: var(--text-primary, #e7e9ea);
  font-size: 1rem;
  line-height: 1.6;
  font-family: inherit;
}
.feedback-textarea:focus { outline: none; border-color: var(--accent-cyan, #00e5ff); }
.feedback-form-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.feedback-count { color: var(--text-secondary, #71767b); font-size: 0.82rem; }
.feedback-submit {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 26px; border: none; border-radius: 999px; cursor: pointer;
  font-weight: 700; font-size: 0.95rem; color: #fff;
  background: linear-gradient(135deg, var(--accent-purple, #7c4dff), var(--accent-cyan, #00e5ff));
  box-shadow: 0 4px 14px rgba(124, 77, 255, 0.30);
}
.feedback-submit:hover { filter: brightness(1.05); }
body.theme-light .feedback-submit { color: #fff !important; }

/* フィードバック: ジャンル選択 (143 の追補) */
.feedback-field-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-secondary, #71767b);
  margin: 4px 0 8px;
}
.feedback-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.feedback-cat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--border-primary, #2f3336);
  background: var(--bg-input, rgba(255,255,255,0.03));
  color: var(--text-primary, #e7e9ea);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.feedback-cat:hover { border-color: var(--accent-cyan, #00e5ff); }
.feedback-cat input { display: none; }
.feedback-cat.selected {
  border-color: var(--accent-purple, #7c4dff);
  background: linear-gradient(135deg, rgba(124,77,255,0.16), rgba(0,229,255,0.16));
}

/* フィードバック: 画像添付 (143 の追補) */
.feedback-file {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px dashed var(--border-primary, #2f3336);
  background: var(--bg-input, rgba(255,255,255,0.03));
  color: var(--text-secondary, #71767b);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.feedback-file:hover { border-color: var(--accent-cyan, #00e5ff); color: var(--text-primary, #e7e9ea); }
.feedback-file input { display: none; }
.feedback-file i { font-size: 1.1em; color: var(--accent-cyan, #00e5ff); }
.feedback-file-list { font-size: 0.8rem; color: var(--text-secondary, #71767b); margin-top: 6px; word-break: break-all; }

/* 返信のおすすめ(言葉の銀行の行動導線。ポイントは出さない) */
.reply-nudge-lead { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.6; margin: 0 0 10px; }
.reply-nudge-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 10px; text-decoration: none; transition: background 0.15s ease; }
.reply-nudge-row:hover { background: var(--bg-card-hover, rgba(255,255,255,0.04)); }
.reply-nudge-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#7c4dff,#00e5ff); color: #fff; font-weight: 700; }
.reply-nudge-info { flex: 1; min-width: 0; }
.reply-nudge-name { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-nudge-body { font-size: 0.8rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-nudge-btn { flex-shrink: 0; font-size: 0.78rem; font-weight: 700; color: var(--accent-cyan); border: 1px solid var(--accent-cyan); border-radius: 999px; padding: 5px 12px; }
.reply-nudge-row:hover .reply-nudge-btn { background: var(--accent-cyan); color: #06231f; }

/* iPad/タブレット幅(<=1279px)では .col-nav がアイコン専用に縮むので、
   フィードバックボタンも合わせて円形アイコン化(文字を隠す) */
@media (max-width: 1279px) {
  .col-nav .sidebar-feedback {
    padding: 12px 4px 4px;
    justify-content: center;
  }
  .col-nav .sidebar-feedback-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    gap: 0;
  }
  .col-nav .sidebar-feedback-btn span {
    display: none;
  }
  .col-nav .sidebar-feedback-btn i {
    font-size: 1.1em;
    margin: 0;
  }
}

/* ============================================================
 * 146. 投げ銭 (コメント + 金額バッジ) モーダル & post_card 描画
 *      YouTube Super Thanks 互換だが、Morioka brand palette
 *      (cyan / green / gold / pink / purple) に揃えて、
 *      グラデ + ゴールド硬貨 + 浮遊カード本文で華やかに。
 * ============================================================ */

/* タイアカラー — Morioka accent palette と同系統で揃える。
 *   t1 sky    : 軽さ・最少額
 *   t2 cyan   : Morioka cyan
 *   t3 green  : 上昇・mint (Morioka green)
 *   t4 gold   : 金色 = Morioka premium 色 (中堅・憧れタイア)
 *   t5 coral  : 暖色・派手
 *   t6 pink   : Morioka pink (like 色と同系)
 *   t7 purple : マスコット紫 = 最高額の特別感 */
[data-tier="t1"] { --st-color: #4fc3f7; --st-color2: #1DA1F2; --st-shadow: rgba(29,161,242,.35); }
[data-tier="t2"] { --st-color: #00e5ff; --st-color2: #00838f; --st-shadow: rgba(0,131,143,.34); }
[data-tier="t3"] { --st-color: #00ff9d; --st-color2: #00b070; --st-shadow: rgba(0,176,112,.34); }
[data-tier="t4"] { --st-color: #ffd700; --st-color2: #f59e0b; --st-shadow: rgba(245,158,11,.42); }
[data-tier="t5"] { --st-color: #ff9a3c; --st-color2: #ef4444; --st-shadow: rgba(239,68,68,.34); }
[data-tier="t6"] { --st-color: #ff4d6d; --st-color2: #e91e63; --st-shadow: rgba(233,30,99,.36); }
[data-tier="t7"] { --st-color: #b388ff; --st-color2: #7c4dff; --st-shadow: rgba(124,77,255,.42); }

/* === post_card 内 投げ銭表示 === */
.post-super-tip {
  margin: 10px 0 6px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--st-color) 0%, var(--st-color2) 100%);
  color: #fff;
  box-shadow:
    0 6px 18px var(--st-shadow, rgba(124,77,255,.30)),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -2px 0 rgba(0,0,0,.07);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* 斜めの光沢 — 上端付近に柔らかな白いハイライトを乗せる */
.post-super-tip::before {
  content: "";
  position: absolute;
  top: -40%; left: -10%; right: -10%; height: 80%;
  background: radial-gradient(ellipse at 30% 0%, rgba(255,255,255,.32), transparent 55%);
  transform: rotate(-8deg);
  pointer-events: none;
  z-index: 0;
}
/* 右下に小さなキラめき (お祝い感) */
.post-super-tip::after {
  content: "✦";
  position: absolute;
  right: 14px; bottom: 8px;
  color: rgba(255,255,255,.45);
  font-size: 0.95rem;
  pointer-events: none;
  z-index: 0;
}

.post-super-tip-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px 12px;
  position: relative;
  z-index: 1;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.2;
}
/* 硬貨は常にゴールド (タイア色に依存しない brand 統一感) */
.post-super-tip-head i.fa-coins {
  color: #ffe066;
  font-size: 1.35em;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.post-super-tip-amount {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0,0,0,.22);
}
.post-super-tip-label {
  font-size: 0.78rem;
  padding: 4px 14px;
  /* 暗ガラス: タイア色の上に半透明黒を載せて白文字をくっきり読ませる。
     前は白半透明 (rgba(255,255,255,.22)) で白文字が透けて見えなかった。 */
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 999px;
  letter-spacing: 0.08em;
  font-weight: 800;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* 本文 — タイア色の上に「暗ガラス」を重ねて白文字をくっきり */
.post-super-tip-body {
  margin: 0 12px 12px;
  padding: 12px 14px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  font-size: 0.95rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  color: #fff;
  position: relative;
  z-index: 1;
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.post-super-tip-body a { color: #fff; text-decoration: underline; }

/* t4 (gold) は背景が明るいので、暗ガラス + 白文字でなく
   暗ガラス + 白文字のままで OK (gold 地+黒透過セル+白文字でも十分読める)。
   特別扱いは不要になったので削除。硬貨アイコンだけ視認性上のため白に。 */
.post-super-tip[data-tier="t4"] .post-super-tip-head i.fa-coins {
  color: #fffdf2;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}

/* ライトモードでも全タイアで「白文字 on 暗ガラスセル on グラデ」を維持。
   §109 の `body.theme-light *:not(...)` が specificity 0,15,6 と高いため、
   個別ルールが負けないよう !important で強制 (投稿する ボタンと同じ思想)。 */
body.theme-light .post-super-tip { box-shadow: 0 6px 22px var(--st-shadow, rgba(124,77,255,.32)); }
body.theme-light .post-super-tip,
body.theme-light .post-super-tip * {
  color: #fff !important;
}
body.theme-light .post-super-tip .post-super-tip-head i.fa-coins,
body.theme-light .post-super-tip[data-tier="t4"] .post-super-tip-head i.fa-coins {
  color: #ffe066 !important;
}

/* === 投げ銭モーダル === */
.super-tip-modal[hidden] { display: none; }
.super-tip-modal {
  position: fixed; inset: 0;
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.super-tip-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(7, 9, 22, 0.62);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}
.super-tip-modal-panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--bg-primary, #070916);
  color: var(--text-primary, #e7ecff);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.55);
  padding: 18px 20px 20px;
  border: 1px solid var(--border-primary, rgba(255,255,255,.10));
}
.super-tip-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.super-tip-modal-head h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
}
.super-tip-modal-head h2 i { color: #ffe066; margin-right: 6px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.super-tip-modal-close {
  background: transparent;
  border: none;
  color: var(--text-secondary, #9aa6d6);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 8px;
}
.super-tip-modal-close:hover { color: var(--text-primary, #e7ecff); }

/* プレビューカード — post 側と同じ華やか仕様 (グラデ + 光沢 + 浮遊本文) */
.super-tip-preview {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, var(--st-color, #4fc3f7) 0%, var(--st-color2, #1DA1F2) 100%);
  color: #fff;
  margin-bottom: 16px;
  box-shadow:
    0 6px 18px var(--st-shadow, rgba(29,161,242,.34)),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -2px 0 rgba(0,0,0,.07);
}
.super-tip-preview::before {
  content: "";
  position: absolute;
  top: -40%; left: -10%; right: -10%; height: 80%;
  background: radial-gradient(ellipse at 30% 0%, rgba(255,255,255,.30), transparent 55%);
  transform: rotate(-8deg);
  z-index: 0;
}
.super-tip-preview::after {
  content: "✦";
  position: absolute;
  right: 14px; bottom: 8px;
  color: rgba(255,255,255,.45);
  font-size: 1rem;
  z-index: 0;
}
.super-tip-preview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  font-weight: 800;
  position: relative;
  z-index: 1;
}
.super-tip-preview-name { font-size: 0.95rem; }
.super-tip-preview-amount {
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0,0,0,.22);
}
.super-tip-preview-body {
  margin: 0 12px 12px;
  padding: 10px 14px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  min-height: 2.4em;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-size: 0.9375rem;
  line-height: 1.5;
  position: relative;
  z-index: 1;
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.super-tip-preview-body.is-placeholder { opacity: 0.80; font-style: italic; }

/* タイアチップ — Morioka palette と完全に揃える */
.super-tip-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.super-tip-tier-chip {
  appearance: none;
  border: 2px solid transparent;
  background: var(--bg-secondary, #0d1330);
  color: var(--text-primary, #e7ecff);
  border-radius: 999px;
  padding: 10px 8px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.9rem;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .08s ease, box-shadow .15s ease;
}
.super-tip-tier-chip:hover { transform: translateY(-1px); }
.super-tip-tier-chip.is-active {
  color: #fff !important;
  background: linear-gradient(135deg, var(--st-color) 0%, var(--st-color2) 100%) !important;
  border-color: var(--st-color2) !important;
  box-shadow: 0 0 0 3px var(--st-shadow), 0 6px 14px var(--st-shadow);
  font-weight: 900;
  transform: scale(1.04);
}
/* 各タイアを濃いめにし、選択中の視認性を確保 (元は淡くてライトモードで埋もれた) */
.super-tip-tier-chip[data-tier="t1"].is-active { --st-color: #1d9bf0; --st-color2: #0d63b3; --st-shadow: rgba(13,99,179,.45); }
.super-tip-tier-chip[data-tier="t2"].is-active { --st-color: #00b8d4; --st-color2: #006978; --st-shadow: rgba(0,105,120,.45); }
.super-tip-tier-chip[data-tier="t3"].is-active { --st-color: #00c896; --st-color2: #008a5c; --st-shadow: rgba(0,138,92,.45); color: #fff !important; }
.super-tip-tier-chip[data-tier="t4"].is-active { --st-color: #f59e0b; --st-color2: #c2700a; --st-shadow: rgba(194,112,10,.50); color: #1a1033 !important; }
.super-tip-tier-chip[data-tier="t5"].is-active { --st-color: #f97316; --st-color2: #dc2626; --st-shadow: rgba(220,38,38,.45); }
.super-tip-tier-chip[data-tier="t6"].is-active { --st-color: #ef4444; --st-color2: #b91c1c; --st-shadow: rgba(185,28,28,.50); }
.super-tip-tier-chip[data-tier="t7"].is-active { --st-color: #7c4dff; --st-color2: #5b21b6; --st-shadow: rgba(91,33,182,.50); }

/* メッセージ入力 */
.super-tip-msg-label {
  display: block;
  margin-bottom: 12px;
}
.super-tip-msg-head {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 6px;
}
#stmMessage {
  width: 100%;
  background: var(--bg-secondary, #0d1330);
  color: var(--text-primary, #e7ecff);
  border: 1px solid var(--border-primary, rgba(255,255,255,.10));
  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
  resize: vertical;
  min-height: 70px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#stmMessage:focus {
  outline: none;
  border-color: var(--accent-purple, #7c4dff);
  box-shadow: 0 0 0 3px rgba(124, 77, 255, .22);
}
.super-tip-meta {
  margin-bottom: 12px;
  font-size: 0.78rem;
  color: var(--text-secondary, #71767b);
}
.super-tip-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.super-tip-cancel,
.super-tip-submit {
  appearance: none;
  border: none;
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease;
}
.super-tip-cancel {
  background: transparent;
  color: var(--text-secondary, #9aa6d6);
  border: 1px solid var(--border-primary, rgba(255,255,255,.14));
}
.super-tip-cancel:hover { color: var(--text-primary, #e7ecff); }
/* 送信ボタン: 金 → 桃 へ Morioka 風グラデ + ゴールド光沢 */
.super-tip-submit {
  background: linear-gradient(135deg, #ffd700 0%, #ff8a3c 55%, #ff4d6d 100%);
  color: #1a1033;
  box-shadow: 0 4px 14px rgba(255, 138, 60, .35), inset 0 1px 0 rgba(255,255,255,.45);
}
.super-tip-submit i { margin-right: 4px; }
.super-tip-submit:hover { transform: translateY(-1px); filter: brightness(1.06); }
.super-tip-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.super-tip-err {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(229, 57, 53, 0.15);
  color: #ff6b6b;
  border: 1px solid rgba(229, 57, 53, 0.4);
  border-radius: 8px;
  font-size: 0.85rem;
}

/* モーダル open 中の body scroll lock */
body.super-tip-modal-open { overflow: hidden; }

/* ライトモードのモーダル本体 */
body.theme-light .super-tip-modal-panel {
  background: #fff;
  color: #0f172a;
  border-color: #e2e8f0;
}
body.theme-light .super-tip-modal-panel,
body.theme-light .super-tip-modal-panel * {
  color: #0f172a;
}
body.theme-light .super-tip-tier-chip {
  background: #f1f5f9;
  color: #0f172a;
}
body.theme-light #stmMessage {
  background: #fff;
  color: #0f172a;
  border-color: #cbd5e1;
}
/* プレビュー本体は全タイアで白文字 (暗ガラスセル on グラデ) */
body.theme-light .super-tip-preview,
body.theme-light .super-tip-preview * { color: #fff !important; }

/* タイアチップ: active は base ルール (グラデ) を維持、theme-light の text-primary 強制を打ち消す */
body.theme-light .super-tip-tier-chip.is-active,
body.theme-light .super-tip-tier-chip.is-active * { color: #fff !important; }
body.theme-light .super-tip-tier-chip[data-tier="t3"].is-active,
body.theme-light .super-tip-tier-chip[data-tier="t3"].is-active * { color: #08361f !important; }
body.theme-light .super-tip-tier-chip[data-tier="t4"].is-active,
body.theme-light .super-tip-tier-chip[data-tier="t4"].is-active * { color: #1a1033 !important; }

/* 送信ボタン (金 → 桃グラデ) はライトモードでも文字色を濃く維持 */
body.theme-light .super-tip-submit,
body.theme-light .super-tip-submit * { color: #1a1033 !important; }

/* ============================================================
 * 147. ライトモードのネオングラデ要素を白文字で固定
 *      §109 の `body.theme-light *:not(...)` (specificity 0,15,6) が
 *      汎用すぎるため、purple/cyan/pink グラデ系の文字が全部 dark に
 *      落ちる。投稿ボタンと同じ「ネオン背景=白文字」思想で個別に救済。
 *      対象: danwa 開設/参加/退会ボタン、その他グラデ系 submit。
 * ============================================================ */
body.theme-light .danwa-submit,
body.theme-light .danwa-submit * {
  color: #ffffff !important;
}
/* hover/focus でも維持 */
body.theme-light .danwa-submit:hover,
body.theme-light .danwa-submit:hover *,
body.theme-light .danwa-submit:focus,
body.theme-light .danwa-submit:focus * {
  color: #ffffff !important;
}

/* ============================================================
 * 148. composer の同好談話室メニュー (#cmDanwaMenu) の表示位置
 *
 *      旧設計: wrapper の position:relative 内で absolute 配置 →
 *              wrapper (= ボタン) が画面端寄りだとメニューが必ず端で切れる
 *      新設計: スマホでは position:fixed の bottom-sheet 風にして
 *              ビューポート両端から 12px の inset を !important で強制。
 *              wrapper の位置に一切依存しないので「端切れ」は構造的に起きない。
 *      具体性 0,2,1 の `.cm-danwa-wrap #cmDanwaMenu` + !important で
 *      古い HTML のキャッシュにも勝つ。
 * ============================================================ */
@media (max-width: 600px) {
  .cm-danwa-wrap #cmDanwaMenu {
    position: fixed !important;
    /* composer の action-bar (約 56px) + 安全マージン 18px = 74px 上から */
    bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    top: auto !important;
    /* ビューポート両端 12px ずつ余白を残して中央に配置 */
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    max-height: 60vh !important;
  }
  /* 中の項目で `(閉鎖中)` 等のラベルが横はみ出ししないよう
     flex で寄せ + 折り返し許可 */
  .cm-danwa-wrap #cmDanwaMenu .cm-danwa-item {
    display: flex !important;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    white-space: normal;
  }
}
@media (min-width: 601px) {
  /* PC では従来通り wrapper 右端アンカで OK */
  .cm-danwa-wrap #cmDanwaMenu {
    left: auto !important;
    right: 0 !important;
    max-width: min(280px, calc(100vw - 24px)) !important;
    width: max-content;
  }
}