/*
 * v2（Salon Workspace）のアプリシェル。正は DES-UX-020 §8.1。
 *
 * 3 領域: 上部バー + ナビゲーション + 作業キャンバス。
 * 幅による形: 768px 未満 = 下部固定ナビ / 768〜1199px = アイコンレール /
 * 1200px 以上 = 左ナビ 240px（DES-UX-030 §3.4）。
 *
 * 色の生値を書かない。トークン（cocpi-v2-tokens.css）だけを参照する。
 */

* { box-sizing: border-box; }

/* **スマートフォンのブラウザが押した所に重ねる青を消す**（DES-UX-020 §8.29。
   2026-09-13 のオーナー指摘「押した部分が青くなる」）。既定のままだと、
   `cursor: pointer` を持つ祖先まで遡った広い範囲が青く光る。**代わりに
   押している間の面を部品ごとに持つ**（`:active`。手応えを消さない） */
html { height: 100%; -webkit-tap-highlight-color: transparent; }

/* 地の設定は業務画面（.v2-app）と認証画面（.v2-auth）で共通 */
body.v2-app,
body.v2-auth {
  min-height: 100%;
  margin: 0;
  display: grid;
  color: var(--cocpi-v2-text);
  background: var(--cocpi-v2-bg-app);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  /* 土台と同じ字間。並んだときに揃える（DES-UX-010 §5 の逸脱記録と同じ値） */
  letter-spacing: 0.02em;
}

body.v2-app {
  grid-template-areas: "topbar topbar" "nav main";
  grid-template-columns: 240px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
}

/* ---- 認証画面（ログイン等。シェルを持たない） ----------------- */

body.v2-auth {
  min-height: 100dvh;
  place-items: center;
  padding: 24px 16px;
}

.v2-auth-card {
  width: min(26rem, 100%);
  padding: 32px 28px;
  border: 1px solid var(--cocpi-v2-border);
  border-radius: var(--cocpi-v2-radius-canvas);
  background: var(--cocpi-v2-bg-canvas);
  box-shadow: var(--cocpi-v2-shadow-canvas);
}

/* サービス名は cocpi に固定（REQ-UX-016）。テナントを特定しない画面で使う。
   **横組みロゴを 1 枚置く。** 印と文字を並べて組み立てない（DES-UX-040 §2） */
.v2-auth-card__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 24px;
}

/* 横組みの最小表示高は 24px（ブランド規定）。ここは 40px */
.v2-auth-card__logo {
  display: block;
  width: auto;
  height: 40px;
}

.v2-auth-card .v2-button { width: 100%; min-height: 48px; }

.v2-auth-card__footer { margin: 20px 0 0; text-align: center; }

@media (max-width: 480px) {
  .v2-auth-card {
    padding: 24px 20px;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
}

/* `hidden` 属性を `display: flex` に負けさせない（v1 で 2 回再発。検査対象） */
[hidden] { display: none !important; }

.v2-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 本文へ飛ぶ（WCAG 2.4.1 ブロックスキップ）。
   **左ナビは最大 11 項目あり、全画面に出る。** これが無いと、キーボードだけの
   利用者は毎回すべてのナビを通ってから本文に着く（2026-08-11 の検査で発覚）。
   **見えるのはフォーカスされたときだけ** */
.v2-skiplink {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 10px 16px;
  border-radius: var(--cocpi-v2-radius-control);
  color: var(--cocpi-v2-text-inverse);
  background: var(--cocpi-v2-brand);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}

.v2-skiplink:focus { transform: translateY(0); }

/* フォーカスは 2 重リング（DES-UX-010 §10.6）。
   外の濃い輪郭は明るい地で、内の明るいリングは濃い面で見える */
:focus-visible {
  outline: 3px solid var(--cocpi-v2-text);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--cocpi-v2-focus-ring);
}

a { color: inherit; }
button, input, select, textarea { font: inherit; letter-spacing: inherit; }
svg { display: block; }

/* アイコンの既定の寸法。ナビの項目は `<use>` を直に置くため svg も対象にする */
.v2-icon,
.v2-nav__item svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* ---- 上部バー ------------------------------------------------ */

.v2-topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 64px;
  padding: 0 20px;
  background: var(--cocpi-v2-bg-app);
}

/* **左はサービスの名前で固定**（DES-UX-040 §2。2026-08-14 のオーナー判断）。
   テナント・ロールによらず同じ絵にする。押すとホームへ戻る。
   **幅によらず横組みを置く**（2026-08-17 のオーナー判断。§2.2）

   **左右に同じ幅を取らせる**（`flex: 1 1 0`）。余白が左右へ等分に配られ、
   中央の場所が**バーの中央**に来る（2026-08-17 のオーナー判断）。
   基準を 0 にするのは、**両側の中身の幅を勘定に入れないため。**
   `flex: 0 0 auto` だと余白は中央の器だけに入り、中身の幅の差
   （ロゴ 83px と利用者メニュー 116px）がそのまま中央のずれになる */
.v2-topbar__brand {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  text-decoration: none;
}

/* **縮ませない。** 器（`__brand`）が詰まったときに絵の側が潰れないようにする */
.v2-topbar__wordmark { display: block; flex: 0 0 auto; height: 28px; width: auto; }

/* いま見ている場所（DES-UX-030 §3.5）。**バーの中央に置く。**
   左がサービス、中央が場所、右が人。役割を位置で分ける。

   **伸ばさない**（`flex: 0 1 auto`）。伸ばすと余白を中央が飲み、
   左右の器が中身の幅のまま残って**中央がずれる。** 中身が入りきらないときだけ
   縮み、左右は中身の幅で止まる（それ以上は詰められない） */
.v2-topbar__place {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
}

/* **サロンの名前は字間を開けて置く**（美容室の看板の見え方に寄せる。
   2026-08-14 のオーナー指摘「美容室に合った形で」）。太くしすぎない */
.v2-topbar__salon {
  overflow: hidden;
  color: var(--cocpi-v2-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 店舗名は従。**細い縦線で区切る**（中黒だと文字の並びに紛れる） */
.v2-topbar__store {
  overflow: hidden;
  padding-left: 10px;
  border-left: 1px solid var(--cocpi-v2-border-strong);
  color: var(--cocpi-v2-text-secondary);
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 利用者メニュー。**左のロゴと同じ幅を取り、中身を右端へ寄せる**
   （`.v2-topbar__brand` と対。中央をバーの中央に置くため） */
.v2-usermenu {
  position: relative;
  display: flex;
  justify-content: flex-end;
  flex: 1 1 0;
}

/* この画面の使い方（DES-SUP-010 §2.3、DES-UX-020 §8.11.2）。
   **利用者メニューと同じ器の中に置く。** 器の幅は `flex: 1 1 0` で左のロゴと
   等分に決まるため、ここへ足しても**中央の場所はずれない**（右の中身が増える
   だけ）。狭い幅では出さない（§4.13。右の器が利用者名で埋まる） */
.v2-topbar__help {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 4px 10px;
  border-radius: var(--cocpi-v2-radius-control);
  color: var(--cocpi-v2-text-secondary);
  font-size: 13px;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}

.v2-topbar__help:hover { background: var(--cocpi-v2-bg-subtle); }

.v2-topbar__help .v2-icon { width: 18px; height: 18px; }

.v2-usermenu__opener {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 10px;
  border: 0;
  border-radius: var(--cocpi-v2-radius-pill);
  color: var(--cocpi-v2-text);
  background: transparent;
  cursor: pointer;
  transition: background var(--cocpi-v2-duration-fast) ease-out;
}

.v2-usermenu__opener:hover { background: var(--cocpi-v2-bg-subtle); }
.v2-usermenu__opener svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--cocpi-v2-text-secondary); }

/* **利用者名に上限と下限を持たせる**（DES-UX-020 §4.12）。
   規則は初版からあったが、**実装されていなかった**（2026-08-14 に実測で発覚。
   長い氏名が 146px を占め、場所（サロン名・店舗名）に 102px しか残らず、
   両方が 20〜60px まで潰れた）。**片方だけが縮む状態を作らない** */
.v2-usermenu__opener > span {
  overflow: hidden;
  min-width: 4.5rem;
  max-width: 14rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v2-usermenu__popup {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--cocpi-v2-border);
  border-radius: var(--cocpi-v2-radius-control);
  background: var(--cocpi-v2-bg-canvas);
  box-shadow: var(--cocpi-v2-shadow-float);
}

/* **項目の見た目を揃える。** ログアウトだけは POST であり `<button>` になる
   （`GET` だと外部サイトからの誘導で意図せずログアウトさせられる。
   DES-AUTH-010 §1）。**素のボタンのまま置くと、そこだけ枠の付いた箱になり、
   メニューの中で 1 つだけ浮く**（2026-08-12 の指摘）。
   守るのは経路であって、見た目ではない */
.v2-usermenu__popup a,
.v2-usermenu__popup button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.v2-usermenu__popup a:hover,
.v2-usermenu__popup button:hover { background: var(--cocpi-v2-bg-hover); }

/* ---- なりすまし中の表示（DES-UX-020 §8.31、DES-AUTH-060 §5.1。2026-09-15） ----
   **既存の画面の配置を 1px も動かさず、中身を覆わない**（オーナー指示
   「成り代わり中とわかるのは、既存のデザインを邪魔しなければ良い」）。
   **機能キーで出し分けない**（DES-ARC-070 §6.1）。枠（`_shell.html`・`app.html`）が
   セッションの印を見て描く */

/* 縁取り。**流れの外（画面に固定した重ね）に描き、押す操作を受けない。**
   内側に `border` を持つ箱を画面いっぱいに重ねるため、線は画面の端の 3px に載る。
   **色は機能色の警告**（ADR-0029 規定2）。ブランド色だと本人の画面の一部に見える */
.v2-impersonation-frame {
  position: fixed;
  z-index: 90;
  inset: 0;
  border: 3px solid var(--cocpi-v2-warning);
  pointer-events: none;
}

/* 利用者名を警告色で表す（2026-09-15、オーナー選択）。**幅を変えない** ——
   初版は「なりすまし中」の札を利用者名の左に足したが、1280px 以外でサロン名が
   中央から 20〜78px 左へずれ、320px ではサロン名が 0px になった（実測）。
   地は警告の淡い面、文字は警告色、縁に 1px の警告色の輪（ホバーの面と区別する）。
   「なりすまし中」の文字は読み上げ（`v2-visually-hidden`）とメニューの先頭に出す */
.v2-usermenu__opener--impersonating,
.v2-usermenu__opener--impersonating:hover {
  color: var(--cocpi-v2-warning);
  background: var(--cocpi-v2-warning-soft);
  box-shadow: inset 0 0 0 1px var(--cocpi-v2-warning);
}

/* 開閉の印も同じ色にする（既定は `text-secondary`） */
.v2-usermenu__opener--impersonating svg { color: inherit; }

/* 利用者メニューの先頭の区画。**本人の項目と区切り線で分ける**。
   終了時刻と終える操作は常に見えている必要がなく、開けば必ずある場所に置く */
.v2-usermenu__status {
  margin: 0 0 6px;
  padding: 6px 0 8px;
  border-bottom: 1px solid var(--cocpi-v2-border);
}

.v2-usermenu__status-title,
.v2-usermenu__status-text {
  margin: 0;
  padding: 0 12px;
  font-size: 13px;
  line-height: 1.5;
}

.v2-usermenu__status-title { color: var(--cocpi-v2-warning); font-weight: 700; }
.v2-usermenu__status-text { color: var(--cocpi-v2-text-secondary); }

/* 印刷した紙に運営の操作の痕を残さない（参照元と同じ） */
@media print {
  .v2-impersonation-frame { display: none; }
}

/* ---- 左ナビ（1200px 以上） / アイコンレール（768〜1199px） ---- */

/* **画面に張り付ける**（2026-09-03 のオーナー判断。DES-UX-030 §3.4）。
   いままで `static` で、下へスクロールするとメニューごと画面から出ていた
   （`/org/users` で 410px 送ると先頭の項目が消える。実測）。
   `align-self: start` で高さを中身に合わせ、余った縦を sticky の走る余地にする */
.v2-sidenav {
  grid-area: nav;
  padding: 8px 12px 24px;
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100dvh;
  overflow-y: auto;
}

.v2-nav__section + .v2-nav__section { margin-top: 18px; }

/* 親の見出し（「勤怠」「管理」…）。**押せない**（器であり遷移先を持たない）。
   子（16px）より小さいのは、押せるものを一番大きく保つため。
   **11px → 12px、色を 1 段濃く、字間を 0.08em → 0.04em**（2026-09-03 のオーナー
   判断）。11px は本文の 16px に対して小さすぎ、0.08em の字間で漢字 2 文字が
   薄く散っていた */
.v2-nav__label {
  margin: 0 12px 6px;
  color: var(--cocpi-v2-text-secondary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.v2-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: var(--cocpi-v2-radius-pill);
  color: var(--cocpi-v2-text-secondary);
  text-decoration: none;
  transition: background var(--cocpi-v2-duration-fast) ease-out,
              color var(--cocpi-v2-duration-fast) ease-out;
}

.v2-nav__item:hover { color: var(--cocpi-v2-text); background: var(--cocpi-v2-bg-subtle); }

/* 現在地: 淡いローズのピル + 左の縦線 + aria-current（色だけに頼らない） */
.v2-nav__item[aria-current="page"] {
  color: var(--cocpi-v2-brand-text);
  background: var(--cocpi-v2-brand-soft);
  font-weight: 700;
}

.v2-nav__item[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--cocpi-v2-brand);
}

/* 未処理件数。現在地と独立した小さなバッジ（0 件は付けない） */
.v2-nav__count {
  margin-left: auto;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: var(--cocpi-v2-radius-pill);
  color: var(--cocpi-v2-brand-text);
  background: var(--cocpi-v2-brand-soft-strong);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.v2-nav__item[aria-current="page"] .v2-nav__count {
  background: var(--cocpi-v2-bg-canvas);
}

.v2-nav__divider {
  margin: 6px 14px;
  border: 0;
  border-top: 1px solid var(--cocpi-v2-border);
}

/* ---- 作業キャンバス ------------------------------------------ */

.v2-canvas {
  grid-area: main;
  min-width: 0;
  margin: 0 20px 24px 4px;
  padding: 28px 32px 40px;
  border: 1px solid var(--cocpi-v2-border);
  border-radius: var(--cocpi-v2-radius-canvas);
  background: var(--cocpi-v2-bg-canvas);
  box-shadow: var(--cocpi-v2-shadow-canvas);
}

.v2-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 24px;
}

.v2-page-header h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0; /* 画面見出しだけ字間 0（DES-UX-010 §5.0.0） */
}

.v2-page-header__sub {
  margin: 6px 0 0;
  color: var(--cocpi-v2-text-secondary);
  font-size: 14px;
}

/* 画面見出しの右に並ぶ操作。狭い幅では見出しの下へ回り込む */
/* 折り返す横並びの操作の列。**同じ役割は同じ規則に**（画面見出しの操作、
   本文のツールバー、添付の操作、定型質問。DES-UX-020 §8.17〜§8.23） */
.v2-header-actions,
.v2-editor__toolbar,
.v2-attach__actions,
.v2-presets { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 767px) {
  .v2-header-actions { margin-top: 12px; }
}

/* 画面固有の検索・絞り込み・主要操作を置く 1 本のバー（DES-UX-020 §8.1） */
.v2-commandbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  min-height: 56px;
  margin: 0 0 20px;
  padding: 8px 12px;
  border: 1px solid var(--cocpi-v2-border);
  border-radius: var(--cocpi-v2-radius-card);
  background: var(--cocpi-v2-bg-subtle);
}

/* ---- 下部固定ナビ（768px 未満） ------------------------------ */

.v2-bottomnav {
  display: none;
}

/* ---- その他シート・ダイアログの器 ---------------------------- */

.v2-sheet {
  width: min(480px, 100vw);
  max-height: 85vh;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: var(--cocpi-v2-radius-canvas) var(--cocpi-v2-radius-canvas) 0 0;
  color: var(--cocpi-v2-text);
  background: var(--cocpi-v2-bg-canvas);
  box-shadow: var(--cocpi-v2-shadow-float);
}

.v2-sheet::backdrop { background: var(--cocpi-v2-scrim); }

.v2-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 8px;
}

/* 見出しの体裁は components 側（`.v2-empty__title` と同じ規則）が持つ */

.v2-sheet__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  color: var(--cocpi-v2-text-secondary);
  background: transparent;
  cursor: pointer;
}

.v2-sheet__close:hover { background: var(--cocpi-v2-bg-subtle); }
.v2-sheet__close svg { width: 20px; height: 20px; }

.v2-sheet__body { padding: 4px 12px calc(20px + env(safe-area-inset-bottom)); }

/* ---- アイコンレール（768〜1199px） --------------------------- */

@media (min-width: 768px) and (max-width: 1199px) {
  body.v2-app { grid-template-columns: 72px minmax(0, 1fr); }

  .v2-sidenav { padding: 8px 4px 24px; }
  .v2-nav__label { display: none; }
  .v2-nav__section + .v2-nav__section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--cocpi-v2-border);
  }

  /* アイコン + 小さなラベルを縦に積む。ツールチップだけに依存しない
     （DES-UX-030 §3.4。現在地のラベルは画面見出しも示す）。
     **件数はアイコンの右へ並べる。** 重ねると 12px（アイコン幅の 6 割）が
     隠れ、何のアイコンか読み取れなくなる（2026-08-11 の指摘） */
  .v2-nav__item {
    flex-flow: row wrap;
    justify-content: center;
    gap: 3px 4px;
    padding: 8px 2px;
    min-height: 56px;
    border-radius: var(--cocpi-v2-radius-control);
    font-size: 10px;
    line-height: 1.2;
  }

  .v2-nav__item[aria-current="page"]::before { display: none; }

  /* レールでは短い表示名を出す。読み上げには元の文字列が渡る
     （font-size: 0 の実文字列 + ::after の attr()。aria-hidden にしない）。
     **必ず行を改める。** アイコンと件数の行の下に置く。
     `order` で件数を先に置く。**DOM の順序（名前 → 件数）は変えない**ため、
     読み上げは「承認 未処理3件」のまま */
  .v2-nav__text {
    order: 2;
    flex: 0 0 100%;
    font-size: 0;
    line-height: 0;
    text-align: center;
  }

  .v2-nav__text::after {
    content: attr(data-short);
    font-size: 10px;
    line-height: 1.2;
  }

  /* 通常の並びに戻す（重ねない）。`99+` でもアイコンに掛からない幅で収まる */
  .v2-nav__count { order: 1; margin: 0; min-width: 0; padding: 1px 5px; }

  .v2-canvas { margin: 0 16px 20px 4px; padding: 24px 24px 32px; }
}

/* ---- スマートフォン（768px 未満） ---------------------------- */

@media (max-width: 767px) {
  body.v2-app {
    grid-template-areas: "topbar" "main";
    grid-template-columns: minmax(0, 1fr);
  }

  .v2-topbar { height: 56px; padding: 0 12px; gap: 10px; }

  /* 狭い幅ではロゴを縮める（絵であり、小さくても読み取れる）。
     **場所は中央のまま**（2026-08-17 のオーナー判断。左寄せに逃がさない） */
  .v2-topbar__wordmark { height: 24px; }
  .v2-topbar__place { gap: 8px; }
  .v2-topbar__salon { font-size: 14px; letter-spacing: 0.04em; }
  .v2-topbar__store { padding-left: 8px; font-size: 12px; }

  /* 狭い幅では利用者名を詰める（§4.12）。**場所の側を残す。**
     6rem から 4.5rem へ（2026-08-17）。ロゴが横組みに戻り 49px を使うため、
     **同じだけ右から返す。** 下限（`min-width`）も詰め、左右の器の差を
     縮める（差はそのまま中央のずれになる） */
  .v2-usermenu__opener > span { min-width: 3rem; max-width: 4.5rem; }

  /* 使い方の導線は出さない（§8.11.2）。**右の器は利用者名で埋まっており、
     足すと中央の場所が押し出される。** 狭い幅の入口は下部ナビの
     「その他」に入る「サポート」が担う */
  .v2-topbar__help { display: none; }

  .v2-sidenav { display: none; }

  /* 作業面は全幅。外周の大きな角丸は外す（DES-UX-020 §8.1） */
  .v2-canvas {
    margin: 0;
    padding: 20px 16px calc(24px + 64px + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* **狭い幅では操作が見出しの下へ回る。** 見出し・補足・操作が 2 つ以上
     並ぶ画面（スタッフ、店舗）では横に収まらないため */
  .v2-page-header { display: block; margin-bottom: 16px; }
  .v2-page-header h1 { font-size: 24px; }

  /* **見出しが短く、操作が 1 つの画面だけ 1 行に保つ**（2026-08-12 の指摘）。
     下へ回すと、その 1 つのために行が 1 本増える。月次勤怠は「月次勤怠」+
     「提出する」で 195px、390px の作業面（358px）に収まる。
     **収まらない画面へ付けない。** 見出しが折り返して余計に高くなる */
  .v2-page-header--inline { display: flex; align-items: center; gap: 12px; }
  .v2-page-header--inline .v2-header-actions { margin-top: 0; }

  .v2-bottomnav {
    position: fixed;
    z-index: 30;
    inset: auto 0 0;
    display: flex;
    padding: 4px 8px calc(4px + env(safe-area-inset-bottom));
    background: var(--cocpi-v2-bg-canvas);
    border-top: 1px solid var(--cocpi-v2-border);
  }

  .v2-bottomnav__item {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-height: 52px;
    padding: 6px 4px;
    border: 0;
    border-radius: var(--cocpi-v2-radius-control);
    color: var(--cocpi-v2-text-secondary);
    background: transparent;
    font-size: 10px;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
  }

  .v2-bottomnav__item svg { width: 22px; height: 22px; }

  .v2-bottomnav__item[aria-current="page"] {
    color: var(--cocpi-v2-brand-text);
    font-weight: 700;
  }

  .v2-bottomnav__item[aria-current="page"] svg { color: var(--cocpi-v2-brand); }

  .v2-bottomnav__count {
    position: absolute;
    top: 2px;
    right: calc(50% - 22px);
    min-width: 18px;
    padding: 0 5px;
    border-radius: var(--cocpi-v2-radius-pill);
    color: var(--cocpi-v2-brand-text);
    background: var(--cocpi-v2-brand-soft-strong);
    font-size: 10px;
    font-weight: 700;
    text-align: center;
  }
}

/* **もっとも狭い幅は 2 段にする**（DES-UX-030 §3.5。2026-08-14 のオーナー判断）。
   1 行のままだと、長いサロン名と店舗名が 132px を分け合い、**どちらも
   30〜60px まで潰れる**（実測）。2 段にして幅を分け合わないようにする。

   > **改訂（2026-08-17、オーナー判断）**: あわせて左を印（34px）へ替えていた。
   > **取り消す。** 幅によらず横組みを置く（DES-UX-040 §2.2）。狭い幅でだけ
   > 絵が変わると、同じサービスに見えない。返す 49px は利用者名の上限
   > （6rem → 4.5rem）から作る */
@media (max-width: 480px) {
  .v2-topbar__place {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
  }

  /* **縦積みでは子が内容の幅まで伸びる。** `max-width` を与えないと省略が
     効かず、**バーの外へ出る**（2026-08-14 に実測。360px で横溢れした）。
     `min-width: 0` は横並びの話であり、縦積みでは効かない */
  .v2-topbar__salon {
    max-width: 100%;
    font-size: 13px;
    letter-spacing: 0.04em;
  }

  /* 2 段では縦線が区切りにならない（上下の関係が区切りを担う） */
  .v2-topbar__store {
    max-width: 100%;
    padding-left: 0;
    border-left: 0;
    font-size: 11px;
  }
}

/* ---- ナビのグループ（その他シートの中身） -------------------- */

.v2-sheetnav { display: flex; flex-direction: column; }

.v2-sheetnav__group-label {
  display: block;
  margin: 12px 12px 4px;
  color: var(--cocpi-v2-text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.v2-sheetnav__divider {
  margin: 6px 12px;
  border: 0;
  border-top: 1px solid var(--cocpi-v2-border);
}

/* ---- 動きを減らす設定（DES-UX-010 §6.0.1） -------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ---- 管理コンソール（DES-CON-010 §2） ------------------------

   **テナント業務画面とレイアウトを共有しない。** 運営者が誤ってテナント側へ
   ログインしようとする事態を減らすため、見た目で経路が区別できる状態にする。
   左ナビを持たず、上部の帯 1 本だけを置く。 */

/* console の格子。**業務画面の格子（nav 列 240px）をそのまま引き継ぐと、
   帯が nav 列へ自動配置されて 1 文字ずつ縦に積まれる**（REV-009 M-1。
   実測: 帯の幅 240px、1280px でも 390px でも崩れていた）。
   左ナビが無いため、帯 1 本 + 本文の 1 列に上書きする。
   **`body.v2-app` の media 上書きより後に置く**（同じ詳細度。後勝ちで効く） */
body.v2-console {
  grid-template-areas: "topbar" "main";
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
}

.v2-console-bar {
  grid-area: topbar;
  display: flex;
  /* **狭い幅では帯の中で行を折る**（項目の中は折らない。下の nowrap）。
     折らないと flex が各項目を min-content（1 文字幅）まで縮める */
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  padding: 8px 20px;
  min-height: 56px;
  border-bottom: 1px solid var(--cocpi-v2-border);
  background: var(--cocpi-v2-console-bar);
  color: var(--cocpi-v2-console-bar-text);
}

/* **文字を 1 文字ずつ縦に折らせない**（横溢れの確認が潰れを隠す。
   `20_components.md` §4.30 と同じ族） */
.v2-console-bar__item { white-space: nowrap; }

.v2-console-bar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

/* **帯の「管理コンソール」の札は廃止した**（2026-08-14 のオーナー指摘。
   DES-CON-010 §2）。ロゴと帯の項目が既に経路を示しており、同じことを 3 つで
   言わない。**ログイン前の画面（`.v2-console-auth__label`）には残す。**
   そこには帯が無く、どちらの入口かを示すものが他に無い */

/* **中でも折る**（2026-08-22。REV-015 §4.1）。帯（`.v2-console-bar`）は
   `flex-wrap: wrap` を持つが、nav はその 1 項目にすぎない。**中の項目が
   `nowrap` で、nav 自身が折らないと、nav は内容の幅（実測 733px）から縮まない。**
   実測で 768px までは収まり、600px で 153px、390px で 363px 溢れていた。
   帯は「狭い幅の作り込みをしない」が、**溢れず読める状態は保つ**
   （DES-CON-010 §1.1）。折り返せば、項目の中は潰れないまま行が増える */
.v2-console-bar__nav { display: flex; flex-wrap: wrap; gap: 4px; }

.v2-console-bar__item {
  padding: 8px 12px;
  border-radius: var(--cocpi-v2-radius-control);
  color: inherit;
  text-decoration: none;
  font-weight: 700;
}

.v2-console-bar__item[aria-current="page"] {
  background: var(--cocpi-v2-console-badge);
}

.v2-console-bar__user {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/* ログイン画面。**言葉でも経路を示す。** 色の違いだけだと気づかない。

   **地は帯と同じ濃い面で塗る**（2026-09-15 のオーナー指摘「文字が薄い」）。
   以前は帯の上の選択中の項目と同じ `console-badge`（白 16%）を使っていたが、
   **これは濃い帯の上に置く前提の色で、白いカードの上では地も文字も白に溶ける。**
   帯の色（DES-UX-030 §4）をここで見せ、ログイン後の画面と色でもつなげる */
.v2-console-auth__label {
  margin: 0 0 20px;
  padding: 6px 18px;
  border-radius: var(--cocpi-v2-radius-pill);
  background: var(--cocpi-v2-console-bar);
  color: var(--cocpi-v2-console-bar-text);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  /* **中央に置くのは `justify-self`**（2026-09-15 のオーナー指摘）。カードは
     grid（`.v2-form`）であり、`align-self` は縦の軸にしか効かない。横は既定の
     stretch のままで、札がカード幅いっぱいに伸びて文字が左に寄っていた */
  justify-self: center;
}

/* ---- 押している間（DES-UX-020 §8.29。2026-09-13） ----
   タッチ端末には hover が無く、押した手応えはこの面だけが担う。
   **ホバー（`bg-subtle` / `bg-hover`）とも現在地（`brand-soft`）とも違う色**
   （`brand-soft-strong`）にし、現在地の項目を押しても変化が見える。
   **押した瞬間に塗る**（`transition: none`。ナビと利用者メニューは 120ms の
   変化を持ち、軽く押して離す間に色が付き切らなかった。実測） */
.v2-nav__item:active,
.v2-bottomnav__item:active,
.v2-topbar__help:active,
.v2-usermenu__opener:active,
.v2-usermenu__popup a:active,
.v2-usermenu__popup button:active,
.v2-sheet__close:active { background: var(--cocpi-v2-brand-soft-strong); transition: none; }

/* ロゴは器が横に広い（`flex: 1 1 0`）。面を塗ると空白まで光るため、絵を薄くする */
.v2-topbar__brand:active { opacity: 0.6; }