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

.log-page table th{
  color: var(--fg);
}

html[data-theme="light"] .log-page table th{
  color: var(--fg);
}

html[data-theme="dark"] .log-page table th{
  color: #fff;
}

.log-page table td{
  background: var(--bg-soft);
  color: var(--fg);
}

html[data-theme="light"] .log-page table td{
  background: var(--bg-soft);
  color: var(--fg);
}

html[data-theme="dark"] .log-page table td{
  background: #0b0b0c;
  color: #fff;
}

.log-details summary{
  cursor: pointer;
  color: var(--brand);
  font-weight: 600;
}

.log-details summary::marker{
  color: var(--brand);
}

.log-details-body{
  border-left: 2px solid color-mix(in oklab, var(--brand) 30%, transparent);
  padding-left: 0.75rem;
}

.log-subdetails{
  margin-top: .5rem;
}

.log-subdetails summary{
  cursor: pointer;
  font-weight: 600;
}

.log-account-list{
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.log-account-list li{
  padding: .15rem 0;
}

.log-account-name{
  font-weight: 600;
}
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-brand.brand-gradient-redblack{
  /* 定数定義 */
  --tag3-anim-duration: 6s;
  --tag3-color-dark: #2b0505;
  --tag3-color-main: #F50000;
  --tag3-color-highlight: #ffffff;

  /* グラデーション：深紅→赤→白(鋭い光)→赤→深紅 */
  /* これを200%幅で作成し、半分ずつスライドさせることでループさせる */
  background: linear-gradient(
    110deg,
    var(--tag3-color-dark) 0%,
    var(--tag3-color-main) 25%,
    var(--tag3-color-highlight) 45%,
    var(--tag3-color-highlight) 50%, /* 白のピーク */
    var(--tag3-color-highlight) 55%,
    var(--tag3-color-main) 75%,
    var(--tag3-color-dark) 100%
  );
  background-size: 200% auto;
  background-position: 0% center;

  /* 文字で切り抜く */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;

  /* フォントスタイル */
  font-family: "Impact", "Arial Black", "Helvetica Neue", sans-serif;
  font-weight: 900;
  font-size: clamp(1.45rem, 2.2vw, 1.95rem) !important;
  line-height: 1;
  letter-spacing: 1px; /* 文字間を広げて高級感を出す */
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .15rem 0;

  /* アニメーション構成: フロー(光の流れ) + パルス(発光) */
  animation:
    tag3-flow var(--tag3-anim-duration) linear infinite,
    tag3-pulse var(--tag3-anim-duration) ease-in-out infinite alternate;
}

/* 光の流れ: 0% -> -200% で完全に1周する */
@keyframes tag3-flow{
  0% { background-position: 0% center; }
  100% { background-position: -200% center; }
}

/* 鼓動: 輝きに合わせてドロップシャドウを変化 */
@keyframes tag3-pulse{
  0% { filter: drop-shadow(0 0 2px rgba(245,0,0,0.3)); }
  100% { filter: drop-shadow(0 0 10px rgba(245,0,0,0.8)); }
}

/* ナビ・現在位置・ホバー */
.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;
  text-decoration: none;
}
.navbar-auth .nav-link:hover{
  color: var(--fg)!important;
  transform: translateY(-2px);
  text-decoration: none;
}
.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: var(--brand, #F50000)!important;
  color:#fff!important;
  border-color: var(--brand, #F50000)!important;
}
.btn-link{ color: var(--brand)!important; }
.badge{ background: var(--brand)!important; }

/* Alerts */
.alert-info{
  background: #FDECEA;
  border-color: #F5C2C7;
  color: #7A2833;
}
:root[data-bs-theme="dark"] .alert-info,
html[data-theme="dark"] .alert-info{
  background: #2A1214;
  border-color: #5A1A1D;
  color: #FFD7D9;
}

/* テーマ切替ボタン（大きめアイコン） */
.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) !important;
  color: var(--fg);
  border-left: 1px solid var(--border);
  --bs-offcanvas-width: min(92vw, 380px);
  height: 100vh !important;
  max-height: 100vh !important;
  box-shadow: -18px 0 40px rgba(0,0,0,.35);
}
.offcanvas-auth .offcanvas-header{
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.offcanvas-auth .offcanvas-title{
  font-weight: 700;
  color: var(--fg) !important;
}
.offcanvas-auth .offcanvas-body{
  background: var(--bg) !important;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.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; }

.legal-consent{
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.2rem 1rem;
  background: color-mix(in oklab, var(--bg-soft) 92%, var(--fg) 8%);
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.legal-consent .form-check{
  display: flex;
  gap: .5rem;
}
.legal-link{
  font-weight: 600;
  white-space: nowrap;
}
.legal-links{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem 1rem;
  font-size: .85rem;
  color: var(--muted);
}
.legal-link-buttons{
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
}
.legal-modal .modal-dialog{
  max-width: min(900px, 96vw);
}
.legal-modal .modal-body{
  max-height: calc(100vh - 180px);
  overflow-y: auto;
}
.legal-document-body{
  font-size: .95rem;
  line-height: 1.7;
}
.legal-document-body section + section{
  margin-top: 1.25rem;
}
.legal-document-body h2{
  font-size: 1.05rem;
  margin-bottom: .4rem;
  font-weight: 700;
}
.legal-document-body ul,
.legal-document-body ol{
  padding-left: 1.2rem;
}
.legal-definition-list{
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.legal-definition-list dt{
  font-weight: 700;
  margin-bottom: .25rem;
}
.legal-definition-list dd{
  margin-bottom: 0;
}
@media (max-width: 575.98px){
  .legal-modal .modal-body{
    max-height: none;
  }
  .legal-consent{
    padding: .9rem .85rem;
  }
  .legal-links{
    flex-direction: column;
    align-items: flex-start;
  }
  .legal-link-buttons{
    width: 100%;
    gap: .25rem .75rem;
  }
}

/* =========================================
   旧テンプレ由来の固定色クラスをテーマ連動に矯正
   ========================================= */
.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;}