/* =========================================
   Theme Variables (default: dark)
   ========================================= */
:root{
  --brand:#F50000;

  /* Dark palette（さらに視認性を上げた黒系） */
  --bg:#0a0a0b;
  --bg-soft:#111215;
  --fg:#f2f3f5;
  --fg-dim:#d7d9e0;
  --muted:#a3a8b3;
  --border:#262a2e;
  --btn-bg:#0b0c10;

  --muted:    #a8acb3;  /* 補助文字 */
  --shadow:   0 6px 24px rgba(0,0,0,.35);

  --glass: rgba(10,10,15,.65);
}

/* Light override */
html[data-theme="light"]{
  --bg:#ffffff;
  --bg-soft:#f7f7fb;
  --fg:#0f1115;
  --fg-dim:#2b2f36;
  --muted:#6b7280;
  --border:#e5e7eb;
  --btn-bg:#ffffff;

  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --glass: rgba(255,255,255,.78);
}

/* Base */
html, body { background: var(--bg); color: var(--fg); }
a{ color: var(--fg); text-decoration: none; }
a:hover{ text-decoration: underline; }
*{ transition: background-color .25s linear, color .25s linear, border-color .25s linear, box-shadow .25s linear; }

/* =========================================
   Header / Navbar
   ========================================= */
.navbar-auth{
  background: var(--glass)!important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
}
html[data-theme="dark"] .navbar-auth{
  background: rgba(2,2,3,.92)!important;
  border-bottom: 1px solid rgba(255,255,255,.05);
  box-shadow: 0 12px 34px rgba(0,0,0,.55);
}
html[data-theme="light"] .navbar-auth{
  background: rgba(255,255,255,.86)!important;
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
}

/* ロゴ（赤→赤黒グラデ） */
.brand-gradient{
  background: linear-gradient(90deg, #F50000 0%, #5a0000 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  font-weight: 800;
  letter-spacing: .3px;
}

/* ナビ・現在位置・ホバー */
.navbar-auth .nav-link{
  color: var(--fg-dim)!important;
  font-weight: 600;
  border-radius: 8px;
  transition: color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.navbar-auth .nav-link:hover{
  color: var(--fg)!important;
  transform: translateY(-2px);
}
.navbar-auth .nav-link.active{
  box-shadow: 0 0 0 1px var(--brand) inset;
  color: var(--fg)!important;
}

/* 右側ユーザー名（常に十分なコントラスト） */
.header-username{ color: var(--fg)!important; font-weight: 600; }

/* =========================================
   Buttons / Links（視認性担保）
   ========================================= */
.btn{ border-radius: 10px; }
.btn-primary{
  background: var(--brand)!important;
  border-color: var(--brand)!important;
  color: #fff!important;
}
.btn-outline-light{
  color: var(--fg)!important;
  border-color: var(--border)!important;
  background: transparent!important;
}
.btn-outline-light:hover{
  background: color-mix(in oklab, var(--brand), white 15%)!important;
  color:#fff!important;
  border-color: var(--brand)!important;
}
.btn-link{ color: var(--brand)!important; }
.badge{ background: var(--brand)!important; }

/* テーマ切替ボタン（大きめアイコン） */
.btn-theme{
  display:inline-flex; align-items:center; justify-content:center;
  width: 42px; height: 42px; border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent; color: var(--fg);
  transition: background-color .2s ease, transform .15s ease, border-color .2s ease;
}
.btn-theme:hover{ transform: translateY(-2px); }
.icon-sun, .icon-moon{ width:24px; height:24px; }
html[data-theme="light"] .icon-moon{ display:none; }
html[data-theme="light"] .icon-sun{ display:inline-block; }
html[data-theme="dark"] .icon-moon{ display:inline-block; }
html[data-theme="dark"] .icon-sun{ display:none; }

/* =========================================
   Offcanvas（ハンバーガー）
   ========================================= */
.offcanvas-auth{
  background: var(--bg);
  color: var(--fg);
  border-left: 1px solid var(--border);
  --bs-offcanvas-width: min(92vw, 380px);
  box-shadow: -18px 0 40px rgba(0,0,0,.35);
}
.offcanvas-auth .offcanvas-header{
  border-bottom: 1px solid var(--border);
}
.offcanvas-auth .offcanvas-title{
  font-weight: 700;
}
.offcanvas-auth .list-group{
  display: grid;
  gap: 8px;
}
.offcanvas-auth .list-group-item{
  background: var(--bg-soft)!important;
  color: var(--fg)!important;
  border: 1px solid var(--border)!important;
  border-radius: 10px;
  transition: transform .15s ease, box-shadow .15s ease, color .15s ease, background-color .15s ease;
}
.offcanvas-auth .list-group-item:hover{ transform: translateY(-2px); }
.offcanvas-auth .list-group-item.active{
  box-shadow: 0 0 0 1px var(--brand) inset;
}

/* =========================================
   Tables / Forms / Cards（全体テーマ連動）
   ========================================= */
.card, .card-surface, .modal-content, .dropdown-menu, .offcanvas, .list-group-item {
  background: var(--bg-soft)!important; color: var(--fg)!important; border-color: var(--border)!important;
}
.table{ color: var(--fg)!important; border-color: var(--border)!important; }
.table th, .table td{ border-color: var(--border)!important; }
/* 白固定ではなく、両テーマに馴染むように fg を薄く混ぜる */
.table thead th{
  background: color-mix(in oklab, var(--bg-soft) 96%, var(--fg) 4%)!important;
}

.form-control, .form-select{
  background: var(--btn-bg)!important; color: var(--fg)!important; border-color: var(--border)!important;
}
.form-control::placeholder{ color: var(--muted)!important; }
.form-control:focus, .form-select:focus{
  border-color: var(--brand)!important; box-shadow: 0 0 0 .25rem rgba(245,0,0,.15)!important;
}
.btn-close{ filter: invert(1) grayscale(100%); }
html[data-theme="light"] .btn-close{ filter:none; }

/* =========================================
   旧テンプレ由来の固定色クラスをテーマ連動に矯正
   ========================================= */
.bg-white, .bg-light, .bg-body, .bg-transparent{ background-color: var(--bg-soft)!important; }
.text-dark, .text-body{ color: var(--fg)!important; }
.text-muted{ color: var(--muted)!important; }

/* =========================================
   Hero + Earth background
   ========================================= */
/* 旧: rgba(255,255,255,.06) 固定 → テーマ変数で淡くハイライト */
#earthWrap{
  position: fixed; inset: 0; z-index: -1;
  background: radial-gradient(
    110vmax 110vmax at 50% 110%,
    color-mix(in oklab, var(--fg), transparent 94%),
    transparent 60%
  );
}
#earthCanvas{ width:100%; height:100%; display:block; }
.hero{ padding: 6rem 1rem; text-align:center; }
.lead{ color: var(--fg-dim); }

/* =========================================
   Media grid（editor/post）
   ========================================= */
.media-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:12px;
}
.media-grid .thumb{
  position:relative;
  border:1px solid var(--border);
  border-radius:.5rem;
  overflow:hidden;
  background: var(--bg-soft); /* 旧 #111 / #f0f0f4 をテーマ連動へ統一 */
}
.media-grid .thumb img,
.media-grid .thumb video {
  width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:1/1;
}
.media-grid .ctrls{
  position:absolute;inset:auto 6px 6px 6px;display:flex;gap:6px;justify-content:space-between
}
.drag-handle{cursor:grab;font-size:.9rem;opacity:.75;}