/* ISM 共通シェル — 配色トークンと、ヘッダー・左ナビ・フッターの共通部品。
   運営画面(admin.html)・スタジオ(/?studio=1)・顧客画面(/biz/)の3画面が読む唯一の出どころ。
   高齢者版に波及しないよう、トークンは .ism-scope（bodyに付けるクラス）配下にスコープする。
   ここを直せば3画面が同時に変わる。各画面に色やシェルのスタイルをコピーしないこと。 */

.ism-scope {
  --sh-main: #D97757;        /* 主色（テラコッタ）。ボタン・丸数字・アクセント */
  --sh-main-dark: #C15F3C;
  --sh-danger: #BF4D43;      /* 危険・エラー・録音中 */
  --sh-bg: #F0EEE6;          /* 紙（ページ地） */
  --sh-card: #FFFFFF;        /* カード */
  --sh-paper: #FAF9F5;       /* ヘッダー・フッターの明るい紙 */
  --sh-tint: #EAE5DA;        /* 淡い面（ホバー・囲み） */
  --sh-line: #E3DFD3;
  --sh-muted: #6E6A60;
  --sh-ink: #1F1E1D;
  --sh-serif: Georgia, "Yu Mincho", "Hiragino Mincho ProN", serif;
}

/* ---- ヘッダー（全画面同型: 明るい紙・下線・セリフのタイトル・右に操作） ---- */
.ism-scope .shellHead {
  background: var(--sh-paper); color: var(--sh-ink);
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px; border-bottom: 1px solid var(--sh-line); flex-shrink: 0;
}
.ism-scope .shellHead .brand {
  font-family: var(--sh-serif); font-size: 18px; font-weight: 700; letter-spacing: 0.04em;
}
.ism-scope .shellHead .spacer { flex: 1; }
.ism-scope .shellBtn {
  font-family: inherit; font-size: 13px; padding: 7px 14px; border-radius: 8px;
  border: 1px solid var(--sh-line); background: #fff; color: var(--sh-ink); cursor: pointer;
  text-decoration: none; display: inline-block; line-height: 1.4;
}
.ism-scope .shellBtn:hover { border-color: var(--sh-main); }
.ism-scope .shellBtn.active { border-color: var(--sh-main); color: var(--sh-main); font-weight: 700; }

/* ---- 左の「運営の流れ」ナビ（運営画面・スタジオ共通） ---- */
.ism-scope .snav {
  position: sticky; top: 20px; width: 225px; flex-shrink: 0;
  background: var(--sh-card); border: 1px solid var(--sh-line); border-radius: 14px;
  padding: 14px 12px; font-size: 13px; line-height: 1.5;
}
.ism-scope .snav .stitle {
  font-family: var(--sh-serif); font-size: 14px; font-weight: 700;
  color: var(--sh-ink); margin: 0 0 8px 6px;
}
.ism-scope .snav .sstep {
  display: flex; gap: 10px; align-items: flex-start; padding: 9px 8px;
  border-radius: 10px; text-decoration: none; color: var(--sh-ink);
}
.ism-scope .snav .sstep:hover { background: var(--sh-tint); }
.ism-scope .snav .sstep.active {
  background: var(--sh-tint);
  box-shadow: inset 3px 0 0 var(--sh-main);
  font-weight: 700;
}
.ism-scope .snav .sdesc { color: var(--sh-muted); font-size: 11px; }
.ism-scope .snav .sline { width: 2px; height: 12px; background: var(--sh-line); margin-left: 19px; }
.ism-scope .snav .fnum {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  background: var(--sh-main); color: #fff; display: grid; place-items: center;
  font-size: 13px; font-weight: 700;
}
@media (max-width: 800px) {
  .ism-scope .snav { position: static; width: 100%; }
  .ism-scope .snav .sline { display: none; }
}

/* ---- フッター（全画面同一様式） ---- */
.ism-scope .shellFoot {
  text-align: center; padding: 12px 16px; font-size: 12px; color: var(--sh-muted);
  background: var(--sh-paper); border-top: 1px solid var(--sh-line); flex-shrink: 0;
}