/* Shared navigation drawer styles (loaded by navigation.js) */

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0ms;
  }
}

:root {
  /* ===== サイドバーの幅（2026-09-23・founder 承認の「たたむと 72px の柱」）=====
     --dc-drawer-width は「いまサイドバーが画面の左で占めている幅」。ページ側の余白・ずらし
     （.dc-drawer-offset-target の margin-left、.dc-drawer-center-target の translateX、
     シート類の left、routes/*.css・guestbook*.html・tag-page-nav.js 等）は全部この 1 本を読む。
       開いている（body.drawer-desktop-open）   = --dc-drawer-expanded-width（280px）
       たたんだ柱（body.drawer-desktop-collapsed） = --dc-drawer-rail-width（72px）… 下の body 規則で差し替え
     WHY 変数を差し替えるか（規則を開/柱で 2 本ずつ書かないか）: 余白の規則はファイルを跨いで 15 箇所以上あり、
       2 本ずつにすると必ず片方だけ直る。ページ側の規則は「body.drawer-desktop（開 or 柱）で var(--dc-drawer-width)」
       の 1 形だけにし、幅の切り替えはここ 1 箇所に閉じる。
     ⚠️ --dc-drawer-shift も body で書き直す: :root で calc した値は :root の幅（280）で確定して子へ継承される。 */
  --dc-drawer-expanded-width: 280px;
  --dc-drawer-rail-width: 72px;
  --dc-drawer-width: var(--dc-drawer-expanded-width);
  --dc-drawer-shift: calc(var(--dc-drawer-width) / 2);

  /* ナビの色と動き（サイドバー / 下ナビ共通）。赤は「つくる」と通知の数字だけに使う（founder 承認 2026-09-23） */
  --dc-nav-red: #FF3B30;
  --dc-nav-ink: #171717;
  --dc-nav-muted: #525252;
  --dc-nav-faint: #A3A3A3;
  --dc-nav-pill: #EFEFF1;       /* 現在地の下地（薄いグレー） */
  --dc-nav-card: #FAFAFA;       /* プロフィール欄の面 */
  --dc-nav-hair: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
  --dc-nav-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* ばね（少し行き過ぎて戻る）: 下地の滑り・押した時の戻り */
  --dc-nav-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

body.drawer-desktop-collapsed {
  --dc-drawer-width: var(--dc-drawer-rail-width);
  --dc-drawer-shift: calc(var(--dc-drawer-rail-width) / 2);
}

.hamburger-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  color: var(--gray-900, #171717);
  cursor: pointer;
  border-radius: var(--r-8, 8px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.15s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    transform 0.15s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.hamburger-btn:hover {
  background: var(--gray-100, #f5f5f5);
}

.hamburger-btn:active {
  transform: scale(0.92);
}

.hamburger-btn.is-floating {
  position: fixed;
  top: calc(12px + var(--page-safe-top, var(--safe-top, 0px)));
  left: 12px;
  z-index: 2100;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 2999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.drawer-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--dc-drawer-width);
  max-width: 80vw;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  z-index: 3000;
  transform: translateX(-100%);
  transition: transform 0.35s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.08);
  padding-top: var(--page-safe-top, var(--safe-top, 0px));
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.drawer-menu.open {
  transform: translateX(0);
}

.drawer-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  /* 2026-09-23: 下の境界線をやめた（プロフィール欄がグレーの面になり、面の縁が区切りを兼ねる） */
  padding: 14px 14px 12px 18px;
  box-sizing: border-box;
}

.drawer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.drawer-brand-mark {
  width: 28px;
  height: 28px;
  background: url('/icons/icon-192.png') center/contain no-repeat;
  border-radius: 8px;
}

.drawer-brand-text {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gray-900, #171717);
}

.drawer-close-btn {
  flex: none;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--gray-600, #525252);
  cursor: pointer;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.15s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    color 0.15s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.drawer-close-btn:hover {
  background: var(--gray-100, #f5f5f5);
  color: var(--gray-900, #171717);
}

/* PC の「たたむ / ひらく」（navigation.js updateCloseButton が is-rail-toggle を付ける）。
   山形は 1 つの絵で、柱のときだけ 180° 回して「ひらく」に見せる（2 枚の絵を差し替えるより状態がずれない） */
.drawer-close-btn.is-rail-toggle svg {
  transition: transform 0.3s var(--dc-nav-ease);
}

.drawer-close-btn:focus-visible {
  outline: 2px solid var(--dc-nav-ink);
  outline-offset: 2px;
}

/* --- Drawer user section --- */

.drawer-user-section {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 12px 20px;
  border-bottom: 1px solid var(--gray-100, #f5f5f5);
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  box-sizing: border-box;
}

/* 2026-09-23: ホバーで #FAFAFA を敷くのをやめた（白地の上でほぼ見えず、「反応していない」と読まれていた）。
   反応は文字の濃さだけ（サイドバー全体で同じ作法）。押した瞬間だけ少し沈める */
@media (hover: hover) and (pointer: fine) {
  .drawer-user-section:hover .drawer-user-name {
    color: #000;
  }
}

.drawer-user-section:active {
  opacity: 0.75;
}

.drawer-user-section:focus-visible {
  outline: 2px solid var(--dc-nav-ink);
  outline-offset: -2px;
  border-radius: 16px;
}

.drawer-user-section.hidden {
  display: none;
}

/* --- Drawer login section（未ログイン時、プロフィール欄の代わりに表示） ---
   ヘッダーの .anon-login-cta と同じ黒ピル（Twitter/X の Log in ピル）で統一。
   探しづらさ解消が目的なので、ドロワー内では全幅で目立たせる（founder 依頼 2026-08-29）。 */

.drawer-login-section {
  flex: 0 0 auto;
  /* 2026-09-23: 境界線を外し、プロフィールのカードと同じ位置・余白に（ログイン前後で下の「つくる」が動かない） */
  padding: 0 12px 12px;
  box-sizing: border-box;
}

/* 柱（72px）用のアイコン。開いている時は出さない（ボタンは文字だけの枠線ピル） */
.drawer-login-icon {
  display: none;
}

.drawer-login-section.hidden {
  display: none;
}

.drawer-login-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 16px;
  font-size: 0.875rem;
  font-weight: 700;
  /* 2026-09-23 founder「ログインのボタンは枠線だけにして」: 黒ベタ → 枠線だけ。
     WHY: 直下に赤い「＋つくる」ボタンが来たので、黒ベタと赤ベタの濃いピルが2本続いて重かった。
     主役は「つくる」、ログインは二番手 ＝ 面を塗らず線だけにする。
     線は border ではなく inset の box-shadow（1.5px）: 太さを変えても箱の寸法（高さ）が動かず、
     ログイン前後でプロフィールのカードと下の「つくる」の位置が揃ったままになる */
  color: var(--gray-900, #171717);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--gray-200, #E5E5E5);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  box-sizing: border-box;
}

.drawer-login-button:active {
  background: var(--gray-100, #F5F5F5);
  transform: scale(0.98);
}

@media (hover: hover) and (pointer: fine) {
  .drawer-login-button:hover {
    background: var(--gray-50, #FAFAFA);
    box-shadow: inset 0 0 0 1.5px var(--gray-400, #A3A3A3);
  }
}

.drawer-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gray-100, #f5f5f5) center/cover no-repeat;
  flex-shrink: 0;
}
/* 画像が無い人の頭文字の丸（navigation.js renderDrawerUser が data-initial と --dc-avatar-hue を入れる）。
   色味は最近のプロジェクトの頭文字タイル（.drawer-project-thumb）と揃える = サイドバーの中で同じ言葉づかい */
.drawer-user-avatar[data-initial] {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(135deg, hsl(var(--dc-avatar-hue, 0), 65%, 78%), hsl(calc(var(--dc-avatar-hue, 0) + 50), 70%, 66%));
  color: rgba(255, 255, 255, 0.95);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.drawer-user-info {
  flex: 1;
  min-width: 0;
}

.drawer-user-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-900, #171717);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s var(--dc-nav-ease);
}

/* 「マイページ」の札。2026-09-23 夕に founder「@IDだね」で @ハンドルに戻したので、ふだんは出さない。
   @ハンドルがまだ無い（取得前・未設定）時だけ、空欄の代わりに出す（下の :empty + の規則） */
.drawer-user-sub {
  display: none;
  margin-top: 1px;
  font-size: 10px;
  font-weight: 600;
  color: var(--dc-nav-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drawer-user-username {
  /* span のままだと overflow/ellipsis が効かず、20文字の太いハンドルが Lv バッジの下に潜る（第3回レビュー m2） */
  /* 名前の下は @ハンドル（2026-09-23 夕 founder「@IDだね」。昼に一度「マイページ」の札へ替えたのを戻した）。
     自分の @ID は「この名前でみんなに見えている」ことの確認になる＝名前と同じくらい大事な情報 */
  display: block;
  margin-top: 1px;
  font-size: 12px;
  color: var(--gray-500, #737373);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* @ハンドルが空の間だけ「マイページ」の札を出す（枠の中が名前1行だけになって間延びしないように） */
.drawer-user-username:empty {
  display: none;
}

.drawer-user-username:empty + .drawer-user-sub {
  display: block;
}

/* ============================================
   プレイXP の入口（founder 裁定 2026-09-06・A案。仕様 docs/PLAYER-XP-SPEC.md §0-1 / §6-1）

   PC = ドロワーのプロフィール枠：右端に **リングバッジ**（進捗リングの中に Lv.n）→ /xp
   スマホ = 下ナビのマイページタブ：アイコンにリング（タブは 5 本のまま増やさない）

   DreamCore の言語（founder 9/5「太い枠は DreamCore の言語ではない」）に合わせて、
   線は 2px 以下・色は既存トークン（--red / --gray-200）だけ・新しい面や影は足さない。

   === 2026-09-06 二度目の founder 指摘「ここを文字だけじゃなくてリングつけたほうがいい」 ===
   初版はこの行に **リングが 2 つ**あった（アバターの外周 + 右端の「Lv.n」文字チップ）。
   founder が押したいと言ったのは右端の方で、そこが文字だけの平たいピルだったため
   「進行の器」に見えていなかった。直し方は 2 つあり得たが、
     (a) 文字チップにリングを足す → 行にリングが 2 つ並び、どちらが進捗なのか読めない
     (b) チップ自体をリングバッジにし、アバターのリングを外す ← **こちらを採った**
   ＝ **行の中でリングは 1 つだけ**。可士和監修の「強いシンボルを1つ」（§0 9/5 行）と同じ整理で、
   /xp のヒーロー（.xp-hero-ring: 弧 + 中央に「Lv.」小 + 数字大）を 44px に縮めた姿にした。
   遷移先と入口が同じ形をしているので、押した先で何が起きるかが形で分かる。
   ============================================ */

/* 行の器。プロフィール枠（<a>）と /xp チップ（<a>）を兄弟に並べるためだけの 1 段。
   WHY フレックスで並べるか（絶対配置でチップを重ねないか）: 重ねると「チップの幅ぶん
   枠に逃げを入れる」ことになり、その逃げは Lv.3 / Lv.12 / Lv.120 とロケール（es・pt は Nv.）で
   変わる。実測で Lv.12 のとき枠の右端がチップに 2px 食い込んだ（＝長い表示名の省略記号が
   チップに触る）。フレックスなら数字が何桁でもロケールが何であっても勝手に収まる。
   WHY 境界線を行へ移すか: 枠にだけ付けるとチップの下で線が途切れる。 */
/* 2026-09-23（founder 承認のサイドバー案）: 行 → 薄いグレーのカード（アバター・名前・「マイページ」の札）。
   境界線（旧 border-bottom）はカードの縁が代わりを務めるので外した。XP の Lv バッジはカードの右端に残る
   （白い円なのでグレーの面の上でも読める）。 */
.drawer-user-row {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  width: auto;
  margin: 0 12px 12px;
  padding-right: 8px;
  border-radius: 16px;
  background: var(--dc-nav-card);
  box-shadow: var(--dc-nav-hair);
  box-sizing: border-box;
}

/* 未ログイン時は行ごと消す（枠だけ隠すと、中身の無い境界線が 1 本残る） */
.drawer-user-row.hidden {
  display: none;
}

/* 行の中では、枠が残り全部を取り、バッジは自分の幅（44px）だけを取る。
   padding-right を 12px に詰めるのは、hover の淡い背景がバッジの直前で止まるようにするため
   （枠とバッジは別の行き先なので、押せる範囲が地続きに見えてはいけない）。 */
.drawer-user-row .drawer-user-section {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  padding: 10px 12px 10px 10px;
  border-bottom: none;
  border-radius: 16px;
}

/* ⚠️ アバターにはリングを付けない（founder 2026-09-06 の 2 度目の指摘）。
   初版はここに .drawer-user-avatar-ring（conic-gradient のリング）があったが、
   行にリングが 2 つ並ぶと「どちらが進捗か」が読めない。リングは右端のバッジ 1 つに集約し、
   包み自体を JS からも消した（＝アバター周りの DOM は 2026-09-06 以前と完全に同一）。
   **ここに再びリングを足さないこと。** 進捗を見せたいなら .drawer-user-xp を直す。 */

/* Lv リングバッジ。/xp への常設入口で、この行で唯一のリング。
   --nav-xp-pct = レベル内進捗（0-100 の無単位数）、--nav-xp-ring = 1（state があるとき）を JS が入れる。

   WHY 枠の外（兄弟）か: <a> の入れ子は HTML として不正で、読み上げも壊れる。
   WHY 右端か: @handle の隣に置くと、表示名・@handle・バッジの 3 つが左揃えで縦に並び、
     どれが押せるのか分からなくなる。行の右端に 1 つだけ置けば「押せるもの」が形で分かる。
   WHY 44px か: 触れる最小寸法（Apple HIG の 44pt）にちょうど乗る一番小さい円。
     行の高さは枠の padding 12px×2 + アバター 36px = 60px なので、44px は縦にも収まる。
   WHY 中身を「Lv.」小 + 数字大の 2 段にするか: /xp のヒーロー（.xp-hero-ring）と同じ組み方。
     入口と遷移先が同じ形をしていれば、押した先で何が出るかが説明なしで分かる。
   WHY 中央を白で塗るか: ドロワーは hover で背景が --gray-50 に変わる。中を透かすと
     リングの内側だけ色が動いて円が濁るので、面として白を敷いて弧との対比を固定する。 */
.drawer-user-xp {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white, #fff);
  line-height: 1;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

/* ⚠️ 変数名は --nav-xp-*（--xp-pct ではない）。/xp が @property --xp-pct { inherits:false } を文書全体に
   登録しており、::after 擬似要素は親から継承できず initial-value 0 になる＝/xp 上だけ弧が消える
   （第3回レビュー B1・2026-09-06 実測）。ページ側の登録名と衝突しない名前にして根治。 */
/* リング本体。下ナビの .nav-xp-ring::after とまったく同じ 2 層 conic + radial マスクの手。
   WHY マスクで中を抜くか（ドロワー時代の padding+負マージンをやめた理由）: 中央に文字を置く
     以上、内側は「白い面」でなければならない。padding 方式だと中身の要素の背景で塗ることに
     なり、円の内径が文字の箱に引きずられる。マスクなら太さ 2px を寸法から独立して決められる。
   WHY 弧が --nav-xp-pct で、トラックが --nav-xp-ring か: 変数が両方無い＝完全に透明（XP 無効・匿名・
     取得失敗の DOM は 2026-09-06 以前と同一）。--nav-xp-ring を pct から導く階段関数に戻すと
     0/20 XP の新規で円ごと消える（founder 2026-09-06「Lv.1 だけじゃなくてサークルも描いて」）。
   WHY color-mix を使わないか: iOS Safari 16.2 未満で宣言ごと無効になりリングが消える。 */
.drawer-user-xp::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    /* 1層目: 進捗の弧 */
    conic-gradient(var(--red, #ef4444) calc(var(--nav-xp-pct, 0) * 1%), transparent 0),
    /* 2層目: 残りのトラック。色は hover で差し替えるため --nav-xp-track 越しに引く */
    conic-gradient(var(--nav-xp-track, var(--gray-200, #e5e5e5)) 0 calc(var(--nav-xp-ring, 0) * 100%), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  pointer-events: none;
}

/* 「Lv.」の単位。数字と分けて小さく上に置く（数字を主役にする・/xp の .xp-hero-lv-unit と同じ）。
   分割は JS 側で i18n 文字列の {n} の位置を見て行う＝ es・pt の「Nv.」でも語順が壊れない。 */
.drawer-user-xp-unit {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  /* --gray-500 はトークンとして定義が無い（.drawer-user-username と同じくフォールバック頼み）。
     定義済みの --gray-600 を使い、9px でも読める濃さを確保する。 */
  color: var(--gray-600, #525252);
  margin-bottom: 1px;
}

.drawer-user-xp-num {
  font-size: 14px;
  font-weight: 700;
  /* Lv.9 → Lv.10 で桁が増えても中心がぶれない（/xp のヒーロー数字と同じ理由） */
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--gray-900, #171717);
}

/* ⚠️ 必須: 上の flex/width は作者スタイルなので、ブラウザ既定の
   [hidden]{display:none}（UA スタイル）に勝ってしまう。これが無いと XP OFF・未ログインで
   空の丸が右端に居座る（style.css の .mypage-level[hidden] と同じ罠・同じ対処）。 */
.drawer-user-xp[hidden] {
  display: none;
}

/* hover / focus: 面を足さずトラックだけ濃くする（--gray-200 → --gray-400）。
   WHY 背景色を変えないか: 中央の白はリングの読みやすさのための面であって、押下の合図では
     ない。ここを灰色にすると弧のコントラストが落ちて「進捗が減った」ように見える。 */
.drawer-user-xp:hover,
.drawer-user-xp:focus-visible {
  --nav-xp-track: var(--gray-400, #a3a3a3);
}

@media (hover: hover) {
  .drawer-user-xp:hover {
    transform: scale(1.04);
  }
}

/* キーボード操作には輪郭を出す（トラックの濃さの差だけでは焦点が分からない）。
   outline-offset 2px ＝ リングの外に離して置き、進捗の弧と混ざらないようにする。 */
.drawer-user-xp:focus-visible {
  outline: 2px solid var(--gray-900, #171717);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .drawer-user-xp {
    transition: none;
  }
  .drawer-user-xp:hover {
    transform: none;
  }
}

/* 下ナビ：マイページタブのアイコンを包むリング。JS が svg を包んで --nav-xp-pct を入れる。
   WHY mask で中を抜くか: アイコンの背景は透明で、下ナビ自体が半透明（backdrop-filter）。
     ドロワーのように「不透明な中身で塗り潰す」手が使えないので、円環そのものを mask で作る。
   WHY inset:-3px（= 30px の円）か: アイコン 24px の外側に 3px。これ以上大きいと 9px の
     ラベル（マイページ）に触り、これ以下だとアイコンの線とリングが同化して読めない。 */
/* ⚠️ セレクタは `.nav-item .nav-xp-ring`（クラス2つ）でなければならない。
   style.css:10104 の `.nav-item span { overflow: hidden; text-overflow: ellipsis; max-width: 100% }`
   ——タブのラベルを省略記号で畳むための規則——が、包み（<span>）にも当たってしまう。
   素の `.nav-xp-ring`（クラス1つ）では特異性で負け、`overflow: hidden` が生き残って
   **リングがアイコンの 24px 四方で切られ、対角の破片4つだけが残る**（実機で確認・2026-09-06）。
   <span> をやめて <div> にする案は、下ナビの項目が <button>（内容モデルは phrasing content）で
   あるうちは不正な入れ子になるので採らない。 */
.nav-item .nav-xp-ring {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* ラベル用の規則を打ち消す（リングは 24px の外側 3px にはみ出して描く） */
  overflow: visible;
  max-width: none;
  opacity: 1;
}

.nav-item .nav-xp-ring::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background:
    conic-gradient(var(--red, #ef4444) calc(var(--nav-xp-pct, 0) * 1%), transparent 0),
    /* トラックは --nav-xp-ring で全周（0% の新規にも円が見える。上の drawer リングと同じ理由） */
    conic-gradient(var(--gray-200, #e5e5e5) 0 calc(var(--nav-xp-ring, 0) * 100%), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  pointer-events: none;
}

/* 昇格して戻ってきたときだけ 1 回。JS が 900ms 後にクラスを外す。
   減速指定の人には最初から付けない（JS 側 prefersReducedMotion）が、
   OS 設定が後から変わる場合もあるので CSS でも止める（二重の安全弁）。 */
@keyframes dc-xp-ring-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

/* WHY バッジ側は ::after（リングだけ）を動かすか: バッジの中には数字が入っている。
   バッジ本体を scale すると数字まで跳ねて「値が変わった」ように見えるが、実際に変わったのは
   レベルであってこの瞬間の進捗ではない。動かすのは弧だけにする。 */
.drawer-user-xp.xp-ring-pulse::after,
.nav-item .nav-xp-ring.xp-ring-pulse::after {
  animation: dc-xp-ring-pulse 0.6s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

@media (prefers-reduced-motion: reduce) {
  .drawer-user-xp.xp-ring-pulse::after,
  .nav-item .nav-xp-ring.xp-ring-pulse::after {
    animation: none;
  }
}

/* --- Drawer language footer --- */

.drawer-language-footer {
  flex: 0 0 auto;
  margin-top: auto;
  padding: 8px 12px 12px;
}

/* --- Drawer plan card --- */

.drawer-plan-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  margin-bottom: 6px;
  border-radius: 10px;
  background: var(--gray-50, #fafafa);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s ease;
}

.drawer-plan-card:active {
  opacity: 0.7;
}

.drawer-plan-card[hidden] {
  display: none;
}

.drawer-plan-tier {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-600, #525252);
}

.drawer-plan-detail {
  font-size: 12px;
  font-weight: 500;
  color: var(--gray-400, #a3a3a3);
}

.drawer-plan-card.plan-light {
  background: #eff6ff;
}
.drawer-plan-card.plan-light .drawer-plan-tier { color: #1e40af; }
.drawer-plan-card.plan-light .drawer-plan-detail { color: #3b82f6; }

.drawer-plan-card.plan-unlimited {
  background: #fdf2f8;
}
.drawer-plan-card.plan-unlimited .drawer-plan-tier { color: #9d174d; }
.drawer-plan-card.plan-unlimited .drawer-plan-detail { color: #ec4899; }

.drawer-plan-card.plan-team {
  background: #f0fdf4;
}
.drawer-plan-card.plan-team .drawer-plan-tier { color: #166534; }
.drawer-plan-card.plan-team .drawer-plan-detail { color: #22c55e; }

.drawer-scroll-area {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-gutter: auto;
  scrollbar-width: none;
  box-sizing: border-box;
}

.drawer-scroll-area::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.drawer-nav-items {
  /* 現在地の下地（.drawer-active-pill）の座標の基準。項目の offsetTop はこの箱から測る */
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  padding: 0 12px 8px;
  gap: 0;
  box-sizing: border-box;
}

/* ===== 「つくる」の赤いボタン（2026-09-23・founder 承認のサイドバー案）=====
   以前は他の 9 行と同じ強さの 1 行だった。いちばん大事な行動なので、プロフィール欄の直下に独立させ、
   赤はここと通知の数字だけに絞る（現在地は赤ではなく黒の太字 + 塗りアイコン + グレーの下地）。
   44px = 触れる最小寸法。影は「赤い光」を下に薄く（押せる面に見せる・面の縁を太くしない）。 */
.drawer-create-cta-wrap {
  flex: 0 0 auto;
  padding: 0 12px 12px;
}

.drawer-nav-item.drawer-create-cta {
  justify-content: center;
  gap: 8px;
  height: 44px;
  /* 左右非対称の余白 = 見た目の中心合わせ（2026-09-23 founder「右にズレているように見える」）。
     数値上は「＋ つくる」の塊がボタンの真ん中にある（実測で中心一致）が、細い ＋ と太い「つくる」では
     太い文字の側に重さが寄り、塊が右へ約 4px ずれて見える。右を 8px 厚く（20/12）して塊を 4px 左へ寄せる */
  padding: 0 20px 0 12px;
  border-radius: 999px;
  background: var(--dc-nav-red);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: 0 8px 18px -8px rgba(255, 59, 48, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.4s var(--dc-nav-spring), box-shadow 0.2s var(--dc-nav-ease);
}

.drawer-nav-item.drawer-create-cta svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.5;
}

.drawer-nav-item.drawer-create-cta:active {
  transform: scale(0.95);
}

@media (hover: hover) and (pointer: fine) {
  .drawer-nav-item.drawer-create-cta:hover {
    color: #fff;
    box-shadow: 0 10px 22px -8px rgba(255, 59, 48, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }
}

/* 今いるのが /create（新規作成）: 見た目は変えない（読み上げは aria-current で伝わる）。
   2026-09-23: 以前は内側に 2px の白い輪（35%）を引いていたが、下へ落ちる赤い影と重なって縁が二重・不揃いに見え、
   ボタンがずれて見える原因の1つになっていた（founder 指摘）。赤いボタンは「行き先」であって現在地の印ではないので外す */
.drawer-nav-item.drawer-create-cta.active {
  color: #fff;
}

/* ===== 群（つくる / みる / その他）=====
   見出しは小さな灰色の字。群の区切りは細い線（2 つ目以降の「見えている群」の上にだけ引く）。
   群の中身が全部隠れると JS（syncDrawerGroupVisibility）が群に hidden を付け、見出しも線も消える。 */
.drawer-nav-group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.drawer-nav-group[hidden] {
  display: none;
}

.drawer-nav-group:not([hidden]) ~ .drawer-nav-group:not([hidden]) {
  margin-top: 8px;
  padding-top: 8px;
}

.drawer-nav-group:not([hidden]) ~ .drawer-nav-group:not([hidden])::before {
  content: '';
  position: absolute;
  top: 0;
  left: 6px;
  right: 6px;
  height: 1px;
  background: var(--gray-100, #f5f5f5);
}

.drawer-group-label {
  padding: 6px 12px 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: var(--dc-nav-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.2s var(--dc-nav-ease);
}

/* ===== 現在地の下地（ピル）=====
   項目の後ろを transform だけで滑る（ばね 0.45s）。位置と高さは JS（syncActivePill）が入れる。
   .no-anim = 最初に置く 1 回（ページを開いた瞬間に上から滑ってこないように）。 */
.drawer-active-pill {
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  height: 40px;
  border-radius: 12px;
  background: var(--dc-nav-pill);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: transform 0.45s var(--dc-nav-spring), opacity 0.2s var(--dc-nav-ease);
  will-change: transform;
}

.drawer-active-pill.is-visible {
  opacity: 1;
}

.drawer-active-pill.no-anim {
  transition: none;
}

/* ===== 最近のプロジェクト =====
   2026-09-23 昼: 名前の行 → 44px のサムネだけの横並び（名前は title と読み上げ用の見えないラベル）。
   2026-09-23 夕: founder「ここ小さいな」→ **サムネ 40px + 名前の行** に戻す（上の項目と同じ 1 行 = 48px の文法）。
     WHY: サムネだけだと、生成途中の絵が似ていたり未公開で頭文字タイルだったりすると、どれがどれか見分けられない。
     名前を見せ、サムネは「どれか」を一瞬で拾う手がかりに回す（Notion / Claude のサイドバーの最近の項目と同じ作法）。
     行の中の並び: サムネ 40 → 名前（13px/600・1 行で省略）→ 別ブランドの札（あれば右端）。
   サムネが無い（未公開）ものは頭文字の色タイル（従来どおり）。 */
.drawer-projects-section {
  display: flex;
  flex-direction: column;
  padding: 4px 12px 12px;
  margin-top: 8px;
}

.drawer-projects-section.hidden {
  display: none;
}

/* 見出しは群の見出し（.drawer-group-label）と同じ文字の組み方にそろえる（ここだけ別の見出しに見えないように） */
.drawer-section-title {
  padding: 6px 12px 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--dc-nav-faint);
}

.drawer-project-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0;
}

.drawer-project-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 48px;
  padding: 4px 12px 4px 8px;
  border: none;
  background: none;
  color: var(--dc-nav-muted);
  cursor: pointer;
  border-radius: 12px;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  transition: transform 0.4s var(--dc-nav-spring), background 0.15s var(--dc-nav-ease), color 0.15s var(--dc-nav-ease);
}

@media (hover: hover) and (pointer: fine) {
  .drawer-project-link:hover {
    background: var(--gray-100, #F5F5F5);
    color: var(--dc-nav-ink);
  }
}

.drawer-project-thumb {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
  /* 頭文字タイルの色（--dc-project-hue は JS が id から決める） */
  background: linear-gradient(135deg, hsl(var(--dc-project-hue, 0), 65%, 78%), hsl(calc(var(--dc-project-hue, 0) + 50), 70%, 66%));
  box-shadow: var(--dc-nav-hair);
}

.drawer-project-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.drawer-project-initial {
  font-size: 15px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  line-height: 1;
}

/* 名前（昼の版では見えないラベルだった。夕に見せる形へ戻した）。1 行で省略・読み上げもこの文字 */
.drawer-project-link-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 別ブランドのプロジェクトの札（WEBLOX 等）。行の右端に小さく */
.drawer-project-brand-badge {
  flex: none;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--white, #fff);
  color: var(--gray-500, #737373);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.drawer-project-link:active {
  transform: scale(0.98);
  background: var(--gray-100, #F5F5F5);
}

.drawer-project-link:focus-visible {
  outline: 2px solid var(--dc-nav-ink);
  outline-offset: 2px;
}

/* 今開いている Studio のプロジェクト: 名前を黒い太字に（赤は使わない＝現在地の色は黒） */
.drawer-project-link.active {
  color: var(--dc-nav-ink);
  font-weight: 800;
}

/* 今開いている Studio のプロジェクト: 黒い細い輪（赤は使わない＝現在地の色は黒） */
.drawer-project-link.active .drawer-project-thumb {
  box-shadow: 0 0 0 2px var(--white, #fff), 0 0 0 4px var(--dc-nav-ink);
}

/* --- Drawer language trigger --- */

.drawer-language-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-radius: 12px;
  background: none;
  color: var(--gray-500, #737373);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.drawer-language-trigger:hover {
  background: var(--gray-50, #fafafa);
}

.drawer-language-trigger:active {
  background: var(--gray-100, #f5f5f5);
}

.drawer-language-globe {
  display: inline-flex;
  flex-shrink: 0;
}

.drawer-language-trigger-label {
  font-size: 14px;
  font-weight: 500;
}

.drawer-language-trigger-value {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700, #404040);
}

/* --- Language picker modal --- */

.dc-lang-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  transition: background 0.25s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.dc-lang-modal-overlay.visible {
  background: rgba(0, 0, 0, 0.4);
}

.dc-lang-modal-overlay.hidden {
  display: none;
}

.dc-lang-modal-sheet {
  width: 100%;
  max-width: 420px;
  max-height: 80vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.12);
  transform: translateY(100%);
  transition: transform 0.3s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.dc-lang-modal-overlay.visible .dc-lang-modal-sheet {
  transform: translateY(0);
}

.dc-lang-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px 8px;
}

.dc-lang-modal-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--gray-900, #171717);
}

.dc-lang-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 999px;
  background: var(--gray-100, #f5f5f5);
  color: var(--gray-600, #525252);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
}

.dc-lang-modal-close:hover {
  background: var(--gray-200, #e5e5e5);
}

.dc-lang-modal-options {
  display: flex;
  flex-direction: column;
  padding: 0 8px 8px;
}

.dc-lang-modal-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: none;
  border-radius: 14px;
  background: none;
  color: var(--gray-600, #525252);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.15s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    color 0.15s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.dc-lang-modal-option:hover {
  background: var(--gray-50, #fafafa);
}

.dc-lang-modal-option:active {
  background: var(--gray-100, #f5f5f5);
}

.dc-lang-modal-option.active {
  color: var(--red, #ff3b30);
  background: rgba(255, 59, 48, 0.05);
}

.dc-lang-modal-option-label {
  font-size: 16px;
  font-weight: 500;
}

.dc-lang-modal-option-code {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gray-400, #a3a3a3);
}

.dc-lang-modal-option.active .dc-lang-modal-option-code {
  color: rgba(255, 59, 48, 0.5);
}

.dc-lang-modal-option-check {
  display: none;
  align-items: center;
  margin-left: auto;
  color: var(--red, #ff3b30);
}

.dc-lang-modal-option.active .dc-lang-modal-option-check {
  display: inline-flex;
}

/* Desktop: centered dialog instead of bottom sheet */
@media (min-width: 640px) {
  .dc-lang-modal-overlay {
    align-items: center;
  }

  .dc-lang-modal-sheet {
    border-radius: 20px;
    padding-bottom: 8px;
    transform: translateY(24px);
    opacity: 0;
    transition:
      transform 0.25s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
      opacity 0.25s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  }

  .dc-lang-modal-overlay.visible .dc-lang-modal-sheet {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ===== サイドバーの行（2026-09-23・founder 承認のサイドバー案）=====
   現在地 = 黒の太字（800）+ 塗りのアイコン + 後ろを滑るグレーの下地（.drawer-active-pill）。赤は使わない
   （赤は「つくる」と通知の数字だけ。以前は現在地も淡い赤 + 赤文字で、画面の中で赤が散らばっていた）。
   ホバー = 文字が濃くなるだけ（以前の #FAFAFA の面は白地の上でほぼ見えなかった）。行そのものは面を持たない。 */
.drawer-nav-item {
  position: relative;
  z-index: 1;   /* 下地（z-index 0）の上 */
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 12px;
  border: none;
  background: none;
  color: var(--dc-nav-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 12px;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.25s var(--dc-nav-ease);
}

.drawer-nav-item svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  stroke-width: 1.9;
  transition: transform 0.45s var(--dc-nav-spring);
}

.drawer-nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.2s var(--dc-nav-ease);
}

@media (hover: hover) and (pointer: fine) {
  .drawer-nav-item:not(.drawer-create-cta):hover {
    color: var(--dc-nav-ink);
  }
}

/* 押した瞬間はアイコンが少し沈む（下ナビと同じ手触り） */
.drawer-nav-item:not(.drawer-create-cta):active svg {
  transform: scale(0.86);
  transition-duration: 0.12s;
}

.drawer-nav-item:focus-visible {
  outline: 2px solid var(--dc-nav-ink);
  outline-offset: -2px;
}

.drawer-nav-item.active:not(.drawer-create-cta) {
  color: var(--dc-nav-ink);
  font-weight: 800;
}

/* ===== 塗りのアイコン（現在地）=====
   サイドバー / 下ナビの共通の約束。線のアイコンをそのまま currentColor で塗る（2 枚目の絵を持たない
   ＝ 20 ページに静的に書かれた下ナビの SVG を差し替えずに済む）。塗ると中の線が消えるもの（歯車の穴・
   ？の字）は、穴の色（下地のグレー）で抜く。線だけのアイコン（タイムラインの波形）は塗らずに線を太くする。
   キーはタブ（data-tab）/ サイドバーの項目（data-drawer-key）。新しい項目を足したらここにも足す（足さなくても
   線のまま太字になるだけで壊れはしない）。 */
.drawer-nav-item.active[data-drawer-key="guestbook"] svg path,
.drawer-nav-item.active[data-drawer-key="notifications"] svg path,
.drawer-nav-item.active[data-drawer-key="bookmarks"] svg path,
.drawer-nav-item.active[data-drawer-key="avatar"] svg path,
.drawer-nav-item.active[data-drawer-key="avatar"] svg circle,
.drawer-nav-item.active[data-drawer-key="characters"] svg path,
.drawer-nav-item.active[data-drawer-key="characters"] svg circle,
.drawer-nav-item.active[data-drawer-key="projects"] svg rect,
.drawer-nav-item.active[data-drawer-key="settings"] svg path,
.drawer-nav-item.active[data-drawer-key="help"] svg circle,
.nav-item.active[data-tab="guestbook"] svg path,
.nav-item.active[data-tab="notifications"] svg path,
.nav-item.active[data-tab="profile"] svg path,
.nav-item.active[data-tab="profile"] svg circle,
.nav-item.active[data-tab="characters"] svg path,
.nav-item.active[data-tab="characters"] svg circle {
  fill: currentColor;
}

/* 歯車の中心の穴・？の字: 下地の色で抜く（塗りの上に線で描き直す） */
.drawer-nav-item.active[data-drawer-key="settings"] svg circle {
  fill: var(--dc-nav-pill);
}

.drawer-nav-item.active[data-drawer-key="help"] svg path,
.drawer-nav-item.active[data-drawer-key="help"] svg line {
  stroke: var(--dc-nav-pill);
}

/* 線だけのアイコン（塗ると形が崩れる）: 線を太くして現在地を示す */
.drawer-nav-item.active[data-drawer-key="timeline"] svg,
.nav-item.active[data-tab="timeline"] svg {
  stroke-width: 2.6;
}

/* ===== 通知の数字（2026-09-23: #ef4444 → DreamCore の赤 #FF3B30。増えた時にばねで弾む）===== */
.nav-item[data-tab="notifications"] {
  position: relative;
}

.nav-item .nav-notification-badge,
.drawer-nav-item .nav-notification-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--dc-nav-red);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
  /* 下ナビのラベル用の規則（overflow:hidden / max-width）を打ち消す */
  overflow: visible;
  max-width: none;
  letter-spacing: 0;
}

/* 下ナビ: アイコンの右上に重ねる。白い縁でアイコンの線と分ける */
.nav-item .nav-notification-badge {
  position: absolute;
  top: 3px;
  right: 7px;
  box-shadow: 0 0 0 2px #fff;
}

/* サイドバー: 行の右端 */
.drawer-nav-item .nav-notification-badge {
  margin-left: auto;
}

.nav-item .nav-notification-badge.hidden,
.drawer-nav-item .nav-notification-badge.hidden {
  display: none;
}

@keyframes dc-nav-badge-pop {
  0% { transform: scale(0.4); }
  70% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.nav-notification-badge.is-popping {
  animation: dc-nav-badge-pop 0.5s var(--dc-nav-spring);
}

/* ===== たたんだ柱の名札（navigation.js の .drawer-rail-tip・body 直下の 1 枚）===== */
.drawer-rail-tip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3100;  /* サイドバー（3000）の上・言語モーダル（4000）の下 */
  padding: 5px 9px;
  border-radius: 8px;
  background: var(--dc-nav-ink);
  color: #fff;
  font: 700 12px/1.3 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s var(--dc-nav-ease);
}

.drawer-rail-tip.is-visible {
  opacity: 1;
}

.dc-drawer-offset-target,
.dc-drawer-center-target {
  transition:
    margin-left 0.3s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    width 0.3s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    max-width 0.3s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    transform 0.3s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

body.drawer-desktop .drawer-backdrop {
  display: none !important;
}

body.drawer-desktop .drawer-menu {
  transform: translateX(0);
  box-shadow: none;
  border-right: 1px solid var(--gray-100, #f5f5f5);
}

/* ===== たたんだ = 72px のアイコンの柱（2026-09-23・founder 承認）=====
   以前はたたむとサイドバーが画面外へ丸ごと消え、ページ側の ≡ だけが残った。今は幅が 72px になって残る。
   幅は body.drawer-desktop-collapsed が --dc-drawer-width を 72px に差し替える（:root のコメント）ので、
   メニュー自身の width とページ側の余白が同じ 1 本の値で揃う。
   WHY 幅を動かさない（瞬時に切り替える）か: 動きは transform / opacity だけ、の約束（2026-09-23 指示）。
     ページ側の余白（.dc-drawer-offset-target の margin-left 0.3s）は従来からの動きで、柱が先に変わり本文が追う。
   柱の中: アイコンだけ（文字・群の見出し・最近のプロジェクト・プラン・XP バッジは隠す）。名前はホバー /
     キーボードの焦点で右に出る（.drawer-rail-tip）。群の見出しは高さを残して透明にする＝行の縦位置が
     開いている時と同じ（開閉で現在地の下地が縦に跳ねない）。 */
body.drawer-desktop .drawer-menu.desktop-collapsed {
  transform: translateX(0);
}

.drawer-menu.is-rail .drawer-header {
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  padding: 14px 0 12px;
}

.drawer-menu.is-rail .drawer-brand-text {
  display: none;
}

.drawer-menu.is-rail .drawer-close-btn.is-rail-toggle svg {
  transform: rotate(180deg);
}

.drawer-menu.is-rail .drawer-user-row {
  justify-content: center;
  margin: 0 12px 12px;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.drawer-menu.is-rail .drawer-user-row .drawer-user-section {
  flex: none;
  justify-content: center;
  padding: 4px;
}

.drawer-menu.is-rail .drawer-user-info,
.drawer-menu.is-rail .drawer-user-xp {
  display: none;
}

.drawer-menu.is-rail .drawer-login-section {
  display: flex;
  justify-content: center;
}

.drawer-menu.is-rail .drawer-login-section.hidden {
  display: none;
}

.drawer-menu.is-rail .drawer-login-button {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
}

.drawer-menu.is-rail .drawer-login-icon {
  display: inline-flex;
}

/* 文字は見えなくしても読み上げには残す（視覚的に隠す定石）。display:none にすると名前の無いボタンになる */
.drawer-menu.is-rail .drawer-login-label,
.drawer-menu.is-rail .drawer-nav-item.drawer-create-cta .drawer-nav-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.drawer-menu.is-rail .drawer-create-cta-wrap {
  display: flex;
  justify-content: center;
}

.drawer-menu.is-rail .drawer-nav-item.drawer-create-cta {
  width: 44px;
  padding: 0;
}

.drawer-menu.is-rail .drawer-nav-item:not(.drawer-create-cta) {
  gap: 0;
  padding: 0 13px;
}

.drawer-menu.is-rail .drawer-nav-label,
.drawer-menu.is-rail .drawer-group-label {
  opacity: 0;
}

.drawer-menu.is-rail .drawer-group-label {
  pointer-events: none;
}

/* 未読: 数字の代わりにアイコンの右上の赤い点（白い縁） */
.drawer-menu.is-rail .drawer-nav-item .nav-notification-badge:not(.hidden) {
  position: absolute;
  top: 7px;
  left: 29px;
  min-width: 0;
  width: 8px;
  height: 8px;
  padding: 0;
  margin: 0;
  font-size: 0;
  line-height: 0;
  color: transparent;
  box-shadow: 0 0 0 2px #fff;
}

.drawer-menu.is-rail .drawer-projects-section,
.drawer-menu.is-rail .drawer-plan-card {
  display: none;
}

.drawer-menu.is-rail .drawer-language-footer {
  display: flex;
  justify-content: center;
  padding: 8px 0 12px;
}

.drawer-menu.is-rail .drawer-language-trigger {
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
}

.drawer-menu.is-rail .drawer-language-trigger-label,
.drawer-menu.is-rail .drawer-language-trigger-value {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

body.drawer-desktop .bottom-nav {
  display: none !important;
}

body.drawer-desktop::after {
  display: none !important;
}

/* PC ではページ側の ≡ を常に隠す（2026-09-23〜）。開いている時は不要、たたんだ時も柱の中に「ひらく」がある。
   以前は開いている時だけ隠していた（たたむとサイドバーが消え、≡ が唯一の開く口だった）。 */
body.drawer-desktop .hamburger-btn {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .drawer-active-pill,
  .drawer-nav-item,
  .drawer-nav-item svg,
  .drawer-nav-label,
  .drawer-group-label,
  .drawer-nav-item.drawer-create-cta,
  .drawer-project-link,
  .drawer-close-btn.is-rail-toggle svg,
  .drawer-rail-tip {
    transition: none;
  }
  .nav-notification-badge.is-popping {
    animation: none;
  }
  .drawer-nav-item:not(.drawer-create-cta):active svg,
  .drawer-nav-item.drawer-create-cta:active,
  .drawer-project-link:active {
    transform: none;
  }
}

/* 全画面の一本道（focused flow）で下ナビ・ハンバーガーを隠す規則はここに置く
   （JS 側は navigation.js の FOCUSED_NO_CHROME_PAGES と揃える）。唯一の使い手だった
   質問ウィザード /make（body[data-page="make"]）は 2026-10-22 に廃止したので、規則も外した。 */

/* ===== ページ側の余白・ずらし（開いている 280px / たたんだ柱 72px の両方）=====
   2026-09-23: 以前は body.drawer-desktop-open（開いている時）だけだった＝たたむと本文が左端まで広がった。
   柱が残るようになったので body.drawer-desktop（開 or 柱）で当て、幅は --dc-drawer-width に任せる。
   ページ固有の CSS（routes/create.css・style.css .settings-view・guestbook*.html・photo-remix・
   game-character-remix.css・preview-annotation.css・guestbook-sheet.css・play-boost.css・template-preview.css・
   tag-page-nav.js）も同じ形に揃えた。新しく足すときも body.drawer-desktop + var(--dc-drawer-width) の 1 形で。 */
body.drawer-desktop .dc-drawer-offset-target,
body.drawer-desktop .settings-view {
  margin-left: var(--dc-drawer-width);
}

body.drawer-desktop .dc-drawer-fill-width {
  width: calc(100% - var(--dc-drawer-width));
  max-width: calc(100% - var(--dc-drawer-width));
}

body.drawer-desktop .dc-drawer-center-target {
  transform: translateX(var(--dc-drawer-shift));
}

body.drawer-desktop .panel-overlay,
body.drawer-desktop .qr-modal-game,
body.drawer-desktop .leaderboard-sheet-overlay,
body.drawer-desktop .play-sheet-overlay {
  left: var(--dc-drawer-width);
}

body.drawer-desktop .panel,
body.drawer-desktop .leaderboard-sheet,
body.drawer-desktop .play-bottom-sheet {
  left: var(--dc-drawer-width);
  width: auto;
}

body.drawer-desktop .project-list-view.with-nav,
body.drawer-desktop .discover-view,
body.drawer-desktop .mypage-view,
body.drawer-desktop .mypage-footer,
body.drawer-desktop .settings-view {
  padding-bottom: 24px !important;
}

body.drawer-desktop .coming-soon-container {
  padding-bottom: 32px !important;
}

body.drawer-desktop .tl-shell {
  padding-bottom: 32px !important;
}

body.drawer-desktop .tl-toast {
  bottom: 24px !important;
}

body.drawer-desktop .gb-feed-inner {
  padding-bottom: 96px !important;
}

body.drawer-desktop .morph-wrap {
  bottom: 24px !important;
}

body.drawer-desktop .game-section {
  padding-bottom: 16px !important;
}

body.drawer-desktop .featured-remix-entry-bar {
  bottom: 24px !important;
}

/* ============================================================================
   下ナビ（スマホ・2026-09-23 founder 承認「完璧です」・scratchpad uiux-demo/nav.html の「案」）
   ============================================================================
   ここが下ナビの見た目の唯一の置き場。以前は style.css・game.html・guestbook.html・guestbook-user.html の
   4 箇所に同じ規則の写しがあり、1 箇所だけ直る事故の元だった（2026-09-23 に集約）。
   このファイルは app-shell.html と、殻を通らない下ナビのページ（game.html / create-ar.html / editor.html）が
   <head> で静的に読む（初回描画から新しい形）。それ以外のページは navigation.js が差し込む。

   形: 高さ 60・角丸 22 のすりガラス。並びは タイムライン / ゲストブック / 中央の赤い ＋（つくる）/ おしらせ / マイページ
     （HTML の並びもこの順に揃えた。order は並べ替えていない古いページ向けの保険）。
   現在地: 塗りのアイコン + 黒い字（上の「塗りのアイコン」節）。ほかは灰色。
   押した時: アイコンが .82 まで沈んでばねで戻る（:active の間だけ縮め、離すとばねの遷移で戻る＝JS 不要）。
   ラベル: 10.5px / 700（以前の 9px / 500 は読みづらかった）。長い言語は nav.short.* の短いラベル
     （ja「ゲスト」・es/pt「Visitas」等）。枠 56px + 左右 4px までははみ出して見せる（ja「タイムライン」が入る幅）。
   スクロール: 下へで隠れ、上へで出る（navigation.js の BOTTOM_NAV_* 節）。隠す動きは translate + opacity だけ。
     translate（個別の変形プロパティ）を使うのは、ページ側が transform を持つ下ナビ（旧 game.html の translateX(-50%)）
     とも打ち消し合わないため。未対応ブラウザでは位置は動かず透明になるだけ（押せない・フォーカスも外れる）。
   iOS アプリ（html.native-app）: 下の安全領域は style.css の --bottom-nav-float-gap（= max(12px, --safe-bottom)。
     --safe-bottom は Web では 0・native-app でだけ env()）で持ち上がる。ここで env() を直に読まない（CLAUDE.md ルール 3）。 */
.bottom-nav {
  --nav-float-gap: var(--bottom-nav-float-gap, 12px);
  position: fixed;
  bottom: var(--nav-float-gap);
  left: 0;
  right: 0;
  width: fit-content;
  margin: 0 auto;
  height: var(--bottom-nav-height, 60px);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  padding: 0 8px;
  border-radius: 22px;
  /* すりガラスが無い環境の既定: ほぼ不透明の白（下の文字が透けて読みにくくならないように） */
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 12px 30px -8px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  box-sizing: border-box;
  z-index: 2000;
  -webkit-tap-highlight-color: transparent;
  translate: 0 0;
  opacity: 1;
  visibility: visible;
  transition:
    translate 0.45s var(--dc-nav-ease),
    opacity 0.3s var(--dc-nav-ease),
    visibility 0s linear 0s;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .bottom-nav {
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
  }
}

/* スクロールで隠れた状態（navigation.js setBottomNavScrollHidden）。
   visibility は動き終わってから切る（押せない・Tab で拾われない。戻る時は即座に visible）。 */
.bottom-nav.is-scroll-hidden {
  translate: 0 calc(100% + var(--nav-float-gap) + 16px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    translate 0.45s var(--dc-nav-ease),
    opacity 0.3s var(--dc-nav-ease),
    visibility 0s linear 0.45s;
}

.nav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 56px;
  height: 52px;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 16px;
  color: var(--dc-nav-faint);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.25s var(--dc-nav-ease);
}

.nav-item svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.45s var(--dc-nav-spring);
}

.nav-item span {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 枠（56px）から左右 4px まではみ出してよい（隣の枠との間は 2px + 相手の余白で、短いラベル同士なら触れない） */
  max-width: calc(100% + 8px);
}

.nav-item.active {
  color: var(--dc-nav-ink);
}

/* 押した時の沈み（離すと svg の transition = ばねで戻る） */
.nav-item:active svg {
  transform: scale(0.82);
  transition-duration: 0.12s;
}

.nav-item:focus-visible {
  outline: 2px solid var(--dc-nav-ink);
  outline-offset: -2px;
}

@media (hover: hover) and (pointer: fine) {
  .nav-item:not([data-tab="create"]):hover {
    color: var(--dc-nav-muted);
  }
  .nav-item.active:not([data-tab="create"]):hover {
    color: var(--dc-nav-ink);
  }
}

/* 中央の赤い ＋（つくる）: 52×44・角丸 15・赤い光。文字は見せないが読み上げには残す（ボタンの名前） */
.bottom-nav .nav-item[data-tab="create"] {
  width: 52px;
  height: 44px;
  margin: 0 4px;
  border-radius: 15px;
  background: var(--dc-nav-red);
  color: #fff;
  box-shadow: 0 8px 16px -6px rgba(255, 59, 48, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.4s var(--dc-nav-spring);
}

.bottom-nav .nav-item[data-tab="create"] svg {
  stroke-width: 2.4;
}

.bottom-nav .nav-item[data-tab="create"].active {
  color: #fff;
}

.bottom-nav .nav-item[data-tab="create"]:active {
  transform: scale(0.9);
}

.bottom-nav .nav-item[data-tab="create"]:active svg {
  transform: none;
}

.bottom-nav .nav-item[data-tab="create"] span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.bottom-nav .nav-item[data-tab="create"]:focus-visible {
  outline-offset: 2px;
}

/* 並びの保険（HTML を並べ替えていない古いページでも、赤い ＋ が真ん中に来る）。
   20 ページ + server/index.js の下ナビは HTML の順自体をこの順にしてある（Tab の移動順 = 見た目の順）。 */
.bottom-nav .nav-item[data-tab="timeline"] { order: 1; }
.bottom-nav .nav-item[data-tab="guestbook"] { order: 2; }
.bottom-nav .nav-item[data-tab="create"] { order: 3; }
.bottom-nav .nav-item[data-tab="notifications"] { order: 4; }
.bottom-nav .nav-item[data-tab="profile"] { order: 5; }
.bottom-nav .nav-item[data-tab="characters"] { order: 6; }

@media (prefers-reduced-motion: reduce) {
  .bottom-nav,
  .bottom-nav.is-scroll-hidden,
  .nav-item,
  .nav-item svg,
  .bottom-nav .nav-item[data-tab="create"] {
    transition: none;
  }
  .nav-item:active svg,
  .bottom-nav .nav-item[data-tab="create"]:active {
    transform: none;
  }
}

/* 未ログインで隠すタブ（applyAnonNavVisibility）・create を出さないブランド（server の class="nav-item hidden"）。
   汎用の .hidden が無いページ（game.html 等）でも確実に消す。下ナビ自体の .hidden（editor.html）も同じ */
.bottom-nav .nav-item.hidden,
.bottom-nav.hidden {
  display: none;
}
.bottom-nav:empty {
  /* 中身の無い下ナビ（avatar.html の空の <nav>）を空のガラスの粒として出さない */
  display: none;
}