/* ハンバーガーボタン (legacy class — Phase 2 で site-header__hamburger に移行、 互換のため残置) */
.hamburger {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.4rem 0.5rem;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  gap: 4px;
  border-radius: var(--t-r-sm);
  transition: background var(--t-trans-fast);
  flex-shrink: 0;
  /* 🔴 実測 34×27 → タップ目標に満たない。drawer を開く**唯一の入口**なので広げる
     (2026-08-30 mobile view 精査)。中身は flex 中央寄せなので線の位置は動かない。 */
  min-width: var(--t-tap-min, 44px);
  min-height: var(--t-tap-min, 44px);
}
.hamburger:hover { background: var(--t-bg-elev); }
.hamburger span {
  display: block;
  width: 18px; height: 2px;
  background: var(--t-fg);
  border-radius: 1px;
  transition: transform var(--t-trans), opacity var(--t-trans);
}
.hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* バックドロップ */
.drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  z-index: 2500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.drawer-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Drawer 本体 */
.drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 300px;
  background: var(--surface);
  border-right: 1px solid var(--border-strong);
  box-shadow: 4px 0 24px rgba(0,0,0,0.35);
  z-index: 2600;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.drawer.visible {
  transform: translateX(0);
}

/* 🔴 **閉じている間は影を出さない** (owner 指摘 2026-09-05「drawer が展開されてないときに
   左端に影っぽいものが出る」) — `.drawer` は閉時も `translateX(-100%)` で**画面外に居るだけ**
   なので、`box-shadow: 4px 0 24px` の**影だけが左端に約 28px はみ出して残る**。
   ⚠ main 由来の既存事象で、root / 1024 未満 / overlay の閉状態すべてで出ていた。
   ⚠ `visibility` / `inert` は触らない — 到達性の扱いは既存の `aria-hidden` 運用に任せる
     (影を消すだけで足りる)。⚠ pinned は元から `box-shadow: none`。 */
.drawer:not(.visible) { box-shadow: none; }

/* ── 1024px 以上: drawer を常時展開 (pinned) の左カラムにする ────────────────
   owner 裁定 2026-09-05 — 「768px 以上を**常設の左 rail**」ではなく
   「**サイドドロワーを常時展開**」。⇒ 新しい nav を作らず、この drawer をそのまま出す。
   🔴 **1024 起点** (owner 裁定 2026-09-05 = 択 b′) — drawer は 300px 幅なので 768 で pin すると
     本文が 468px しか残らず、iPad 縦 (768〜834) が丸ごとその帯に入る。768〜1023 は
     header + bottom bar が常設ナビを担う (`bottom-nav.css` の閾値も 1024 に揃えてある)。
   ⚠ `.is-pinned` は `AppShell` が **`variant === 'header'` かつ 1024px 以上**の時だけ付ける
     (root / `/start/` / `/admin/` / domain 面は現状のまま = hub 裁定)。
     class 側で分けているので、狭い幅へ戻した瞬間から従来の overlay に戻る。
   ⚠ media query は二重の guard — class が付いたまま幅が縮む 1 フレームで
     常時展開のまま残らないようにする。
   ⚠ `transition` を切る — pinned は「開く」動作を経ないので、初回描画で
     `translateX(-100%)` から滑り込むアニメーションが見えてしまう。
   ⚠ 影を外す (`box-shadow` は overlay が本文の上に浮いていることの表現。
     常設の列では ART_DIRECTION の「カードと影の多用はしない」に寄せる)。
   ⚠ 縦 scroll は `.drawer-nav { flex: 1; overflow-y: auto }` が元から持つので追加しない
     (高さの足りない端末でも 設定 / legal に到達できる)。 */
@media (min-width: 1024px) {
  .drawer.is-pinned {
    transform: none;
    transition: none;
    box-shadow: none;
    /* 🔴 **z を overlay 帯 (2600) から本文帯へ落とす** — pinned は「一時的に本文の上へ
       出る膜」ではなく **本文と並ぶ列**。2600 のままだと、面内の modal より上に居座って
       ① 背後を暗くする backdrop が x=300 で途切れ ② modal が開いている間も drawer が
       押せる ③ viewport 中央に置かれる dialog の左端が drawer の下へ潜る、が同時に起きる
       (実測: `/me/` の `.type-info-modal-backdrop` = z 1500 [identity-hub.css:969] /
       `/discover/` の `.dc-surprise-modal` = z 1000 [discover.css:280])。
       ⚠ 300 の根拠 = 本文側の最大が `.bnav` の 200、overlay 側の最小が 1000。その間。
       ⚠ sticky header (1000) とは **領域が重ならない** (header は x=300 から始まる) ので
         前後関係は問題にならない。 */
    z-index: 300;
  }
  /* 🔴 **drawer は header の下から始める** (owner 指摘 2026-09-05) — 上端を header の
     実測高へ下げる。⚠ 高さは言語と折返しで 56〜72px に振れるので magic 定数では追えない
     ⇒ `AppShell` が `.site-header-bar` を ResizeObserver で測って `--site-header-h` を
     body へ置く (前例 = `ui/feed/FeedPage.tsx` の `--feed-tabs-top` /
     `ui/domain/DomainMapPage.tsx` の `--dm-top-offset`)。
     ⚠ **fallback 必須** — 未定義 custom property を fallback 無しで参照すると宣言ごと
     無効になる (`CSS_COLOR_RULES §4b` / 検査 = `audit_css_undefined_token.py`)。 */
  .drawer.is-pinned { top: var(--site-header-h, 0px); }

  /* 本文を drawer のぶんだけ右へ寄せる (`data-bnav` と同じ body 属性の idiom)。
     ⚠ 幅は `.drawer` の 300px と同値 — 動かす時は 2 つとも動かす。
     🗄️ **旧注記**: 「UA の body margin を 0 にする — `core/base.css` を読む 9 面だけ 0・
     他は UA の 8px」。⚠ **2026-09-13 に前提が消えた** — UA 既定の 8px は `tokens.css` の
     `html, body { margin: 0 }` (単一経路) で全 41 面から落としてある。
     ⇒ 下の `margin-left/right: 0` は**同値の打ち消し**として残っているだけで、
     「9 面だけ 0」と読んで body margin を追うと誤診する。 */
  body[data-drawer-pinned="1"] {
    margin-left: 0;
    margin-right: 0;
    padding-left: 300px;
  }

  /* 🔴 **header は画面全幅**を取る (owner 指摘 2026-09-05) — drawer が header の下から
     始まるので、header だけは body の左 padding を打ち消す。
     ⚠ `100vw` は使わない (scrollbar 分だけ横溢れする)。負の margin-left を置くと
     **auto 幅がその分を吸って**ちょうど viewport 幅になる = 溢れない。 */
  body[data-drawer-pinned="1"] .site-header-bar { margin-left: -300px; }
}

/* Drawer ヘッダ */
.drawer-head {
  flex-shrink: 0;
  padding: 1rem 1.1rem;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.drawer-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--text);
  text-transform: uppercase;
}
.drawer-close {
  background: transparent;
  border: none;
  color: var(--mid);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
}
.drawer-close:hover { color: var(--text); background: var(--surface2); }

/* Drawer ナビ */
.drawer-nav {
  flex: 1;
  overflow-y: auto;
  padding: 0.7rem 0.7rem;
  display: flex; flex-direction: column;
  gap: 0.35rem;
  /* 縦スクロールの手がかり (scroll shadow・WEB-NAV-B 2026-09-25)。借用元 =
     `components/chip-scroll.css` の型を**縦向き**に当てたもの — 上下端の地色グラデ 2 枚を
     `local` (= 内容と一緒に動き、端に着くと影を隠す)、影 2 枚を `scroll` (= 枠に固定)。
     ⚠ 地色は `.drawer` の背景 (`--surface` = `--t-surface`) と**同じ token**にする — 違うと
       端に別色の帯が出る (pinned / overlay / 540px 以下とも `.drawer` の背景は同じ)。
     ⚠ 色は token 経由のみ。 */
  background-color: var(--t-surface);
  background-image:
    linear-gradient(to bottom, var(--t-surface), transparent),
    linear-gradient(to top, var(--t-surface), transparent),
    linear-gradient(to bottom, color-mix(in srgb, var(--t-fg) 22%, transparent), transparent),
    linear-gradient(to top, color-mix(in srgb, var(--t-fg) 22%, transparent), transparent);
  background-position: center top, center bottom, center top, center bottom;
  background-repeat: no-repeat;
  background-size: 100% 26px, 100% 26px, 100% 12px, 100% 12px;
  background-attachment: local, local, scroll, scroll;
  /* 🔴 スクロールバー**だけ**を隠す。⚠ 隠してよいのは、上の scroll shadow が「まだ続きが
     ある」手がかりを担っているから — **shadow と scrollbar 非表示は必ず一緒に扱う**
     (片方だけ消すと手がかりごと失われる)。 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.drawer-nav::-webkit-scrollbar { display: none; }

/* Drawer セクション */
.drawer-section {
  display: flex; flex-direction: column;
  gap: 0.3rem;
  padding: 0.5rem 0.4rem;
  border-top: 1px solid var(--border);
}
.drawer-section:first-child { border-top: none; }
.drawer-section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem; font-weight: 700;
  color: var(--text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
  opacity: 0.85;
}
.drawer-section-footer { margin-top: auto; }

/* Drawer 項目 (button / a 両対応) */
.drawer-item {
  display: flex; align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  border-radius: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.82rem; font-weight: 500;
  text-align: left;
  transition: background 0.1s;
  width: 100%;
}
.drawer-item:hover { background: var(--surface2); }
.drawer-item-primary {
  background: var(--active-bg);
  border: 1px solid var(--active-border);
  color: var(--accent);
  font-weight: 700;
}
.drawer-item-primary:hover { background: var(--active-bg); border-color: var(--accent); }
/* v=66: light theme で accent text on light-tinted accent bg = 2.82 contrast → fail。
   light では dark text を使い、 highlight は bg/border に任せる。 */
:where(html, body)[data-theme="light"] .drawer-item-primary { color: var(--t-fg); }
.drawer-icon {
  width: 1.3em;
  font-size: 1rem;
  text-align: center;
  flex-shrink: 0;
}

/* Drawer ドメイン (radio風) */
.drawer-domain-item {
  display: flex; align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.7rem;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  color: var(--text);
  font-size: 0.78rem; font-weight: 500;
  text-align: left;
  transition: all 0.1s;
  width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
}
.drawer-domain-item:hover:not(:disabled) { background: var(--surface2); }
.drawer-domain-item.on {
  background: var(--active-bg);
  border-color: var(--active-border);
  color: var(--accent);
  font-weight: 700;
}
/* v=66: light theme で accent text on light bg contrast 不足 */
:where(html, body)[data-theme="light"] .drawer-domain-item.on { color: var(--t-fg); }
.drawer-domain-item:disabled { color: var(--mid); cursor: not-allowed; opacity: 0.75; }
.drawer-domain-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--mid);
  flex-shrink: 0;
}
.drawer-domain-item.on .drawer-domain-dot {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 2px var(--surface);
}

/* Drawer 設定行 — 見出しを上・ボタン群を下に積む。
   ⚠ 横並びだと 6 言語 / テーマ 3 択に押されて見出しが「言 / 語」と縦に折れた (390・2026-09-28)。 */
.drawer-setting-row {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 0.35rem 0.7rem;
  gap: 0.35rem;
}
.drawer-setting-label {
  font-size: 0.78rem; color: var(--text);
  font-weight: 500;
  white-space: nowrap;
}
.drawer-toggle-group {
  display: flex;
  max-width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 2px;
  gap: 2px;
}
.drawer-toggle {
  background: transparent;
  border: none;
  /* ⚠ 横 0.5rem — 積んだ行でも 6 言語が 1440 の drawer (約 241px) に 1 行で収まる幅 (0.6rem だと 5px 溢れた)。 */
  padding: 0.22rem 0.5rem;
  border-radius: 99px;
  color: var(--text);
  font-size: 0.65rem;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
/* 地域の 4 地域 (REGION-POOL) — 等幅の 2×2。1 段目の「端末に合わせる」は通常の pill 群。
   ⚠ 4 列にすると fr の「Asie de l'Est」が収まらない。2 段の箱なので角丸は pill ではなく md。 */
.drawer-region-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  box-sizing: border-box;
  border-radius: var(--t-r-md);
}
.drawer-region-grid .drawer-toggle { min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.drawer-toggle.on { background: var(--accent); }
/* hardcode-ok-begin: theme toggle の正色ペア (dark=暗字/light=白字 on accent、意図的反転) */
:where(html, body)[data-theme="dark"] .drawer-toggle.on { color: #0a0a12; }
:where(html, body)[data-theme="light"] .drawer-toggle.on { color: #ffffff; }
/* hardcode-ok-end */

/* Phase Nav-3: 現 domain を drawer 5 domains で highlight */
.drawer-item-active {
  background: var(--active-bg, rgba(165,180,252,0.1));
  border-color: var(--active-border, rgba(165,180,252,0.4));
  color: var(--accent, #a5b4fc);
  font-weight: 700;
  position: relative;
}
/* v=66: light theme で accent text on light tinted bg contrast 不足 */
:where(html, body)[data-theme="light"] .drawer-item-active { color: var(--t-fg); }
.drawer-item-active::after {
  content: '\00B7\0020now'; /* '· now' — 生マルチバイトは CSS が Latin-1 解釈される環境で文字化け (·)。ASCII escape で encoding 非依存に */
  font-size: 0.7em;
  color: var(--dim, #9090b0);
  font-weight: 400;
  margin-left: auto;
  padding-right: 0.5em;
}

/* ── Axis presets — 2026-08-17 に apps/web/src/ui/domain/domain-map.css へ移設・一本化
   (使用箇所が domain 面の 1 箇所のみになったため。旧 taxonomy v2 コメント込みで撤去) ── */

/* ── Domain controls embed (Phase 2 Overhaul) ──
   Drawer 内で axis selector / domain switcher / view toggles を表示 */
.drawer-section-controls .axis-selectors {
  flex-direction: column;
  gap: 0.4rem;
  align-items: stretch;
}
.drawer-section-controls .axis-select {
  width: 100%;
  justify-content: space-between;
  padding: 0.35rem 0.5rem;
  background: var(--t-bg-elev);
}
.drawer-section-controls .axis-dropdown {
  font-size: 0.78rem;
  flex: 1;
  text-align: right;
}
.drawer-section-controls .toggle-row {
  flex-wrap: wrap;
  gap: 0.3rem;
}
.drawer-section-controls .toggle-btn { font-size: 0.7rem; padding: 0.3rem 0.6rem; }
.drawer-section-controls .domain-switcher,
.drawer-section-controls .domain-badge {
  width: 100%;
  justify-content: flex-start;
}
.drawer-section-controls .domain-badge {
  font-size: 0.85rem;
  padding: 0.5rem 0.8rem;
}
.drawer-section-controls .domain-menu {
  width: 100%;
}

/* ─── v=75: site-drawer additions ─────────────────────────────────────
 * Universal drawer (旧 drawer + Explore menu の統合) で使う:
 *   - Explore section の 2-col grid (.sd-grid / .sd-grid-item / .sd-grid-icon 等)
 *   - mobile (<540px) で full-screen sheet 化
 * 既存 .drawer / .drawer-section / .drawer-item は流用。
 */

.sd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.sd-grid-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 0.6rem 0.65rem;
  border-radius: 8px;
  background: var(--surface2, rgba(255,255,255,0.04));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  text-decoration: none;
  color: var(--text);
  font-family: 'Noto Sans JP', sans-serif;
  transition: background 0.12s, border-color 0.12s, transform 0.06s;
}
.sd-grid-item:hover {
  background: color-mix(in srgb, var(--t-fg) 8%, transparent);
  border-color: var(--border-strong);
}
.sd-grid-item:active { transform: scale(0.97); }
.sd-grid-item.is-current {
  background: var(--active-bg, color-mix(in srgb, var(--t-accent) 10%, transparent));
  border-color: var(--active-border, color-mix(in srgb, var(--t-accent) 40%, transparent));
}
.sd-grid-icon { font-size: 1.4rem; line-height: 1; }
.sd-grid-label { font-size: 0.82rem; font-weight: 700; }
/* 名前は「・」の直後で句に分け、句の間でだけ折る (`ui/shared/PhraseLabel.tsx`)。
   旧 = 1440 の常設ドロワーで「アニメ・アニメー｜ション」と語の途中で割れていた。 */
.sd-grid-label > span { display: inline-block; }
.sd-grid-sub { font-size: 0.65rem; opacity: 0.7; font-family: 'JetBrains Mono', monospace; }

/* mobile (<540px): 7-8 割幅ドロワー (Twitter/Reddit 風。旧 full-screen sheet は
   圧迫感 + 現在ページの文脈喪失 → user feedback 2026-07-02 で 78vw に変更。
   backdrop は既定の dim (rgba+blur) がそのまま効き、残り 2 割 tap で閉じられる) */
@media (max-width: 540px) {
  .drawer {
    width: min(78vw, 320px);
  }
  /* ドメインタイル: 2 カラムの大タイル → 横長 1 列積み (icon + ラベル + EN 右寄せ) */
  .sd-grid {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
  .sd-grid-item {
    flex-direction: row;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.7rem;
  }
  .sd-grid-sub { margin-left: auto; }
  .drawer-head {
    padding: 1rem 1.2rem;
    padding-top: max(1rem, env(safe-area-inset-top, 0));
  }
}