:root {
  --bar-ink:#191714;
  --bar-paper:#f3efe6;
  --bar-paper-2:#e8e0d2;
  --bar-bronze:#8a5a2b;
  --bar-rule:#cfc3b0;
}

.bar-demo-root { overflow-x:hidden; }
body.bar-demo { overflow-x:hidden; background:#11100e; color:var(--bar-ink); }
.bar-demo .demo-band { background:#11100e; border-color:#39352f; color:#e9e1d5; }
.bar-demo .demo-band__b { color:#e9e1d5; border-color:#696158; }
.bar-demo .demo-band__b--cta { background:#e7ded0; border-color:#e7ded0; color:#171512; }
/* 注文画面の外枠は order.js が #app に描く。.order-app という要素は存在しないため、
   ここを .order-app で書いていた間は紙色が効かず、黒い地に白いカードが浮いていた */
.bar-demo #app { background:var(--bar-paper); min-height:100dvh; }
.bar-demo .o-header { background:#181613; color:#f5efe5; border-bottom:1px solid #38332c; padding-top:22px; padding-bottom:18px; }
.bar-demo .o-header__shop { color:#f5efe5; font-family:Georgia,'Times New Roman','Yu Mincho',serif; font-size:23px; font-weight:400; letter-spacing:.15em; }
.bar-demo .o-header__seat { color:#bdb2a1; font-size:12px; letter-spacing:.08em; }
.bar-demo .o-header__seat strong { color:#f5efe5; font-family:Georgia,'Times New Roman',serif; font-weight:400; }
.bar-demo .o-tabs { top:calc(86px + env(safe-area-inset-top, 0px)); max-width:100%; background:var(--bar-paper); border-color:var(--bar-rule); padding-top:8px; }
.bar-demo .o-tab { background:transparent; color:#756d62; font-family:Georgia,'Times New Roman',serif; font-size:12px; letter-spacing:.09em; }
.bar-demo .o-tab.active { color:var(--bar-ink); border-color:var(--bar-bronze); }
.bar-demo .o-menu { padding-top:8px; }
.bar-demo .o-cat__title { font-family:Georgia,'Times New Roman',serif; font-size:13px; font-weight:400; letter-spacing:.14em; color:#6f6252; border-bottom:1px solid var(--bar-rule); padding-bottom:10px; }
.bar-demo .o-item { background:transparent; border-color:var(--bar-rule); padding-block:18px; gap:16px; }
.bar-demo .o-item__thumb { width:112px; height:128px; flex-basis:112px; border-radius:2px; background:var(--bar-paper-2); }
.bar-demo .o-item__name { font-family:Georgia,'Times New Roman','Yu Mincho',serif; font-size:17px; font-weight:400; letter-spacing:.025em; }
.bar-demo .o-item__desc { color:#726a60; font-size:12.5px; line-height:1.7; }
.bar-demo .o-item__price { color:#332b23; font-family:Georgia,'Times New Roman',serif; font-weight:400; }
.bar-demo .add-btn { border-color:#5d4d3c; color:#30271e; border-radius:50%; background:transparent; }
.bar-demo .add-btn:hover,.bar-demo .add-btn:active { background:#30271e; color:#fff; }
/* バッジの実際のクラスは .o-badge（旧指定の .badge は該当なしで、標準の丸い色付きバッジのままだった）。
   アレルゲン(.alg)は安全に関わるので、押せる見た目の標準指定を残す */
.bar-demo .o-badge:not(.alg) { background:transparent; color:#745534; border:1px solid #bca98f; border-radius:2px; letter-spacing:.06em; }
.bar-demo .cart-bar { background:#181613; border-color:#38332c; color:#f5efe5; box-shadow:none; }
.bar-demo .cart-bar__count { background:#e7ded0; color:#171512; }
.bar-demo .sheet { background:var(--bar-paper); }
/* 主ボタンは .btn（色指定なし＝ブランド色）。旧指定の .btn--brand は該当なしで、朱色のままだった */
.bar-demo .btn:not(.btn--soft) { background:#3d3024; }
.bar-demo .btn:not(.btn--soft):hover { background:#231d18; }
.bar-demo :focus-visible { outline-color:#9b6531; }
/* 数量ボタンと「卓」の札が標準の白地・朱色のまま残り、ここだけ焼き鳥店の画面に見えていた */
.bar-demo .stepper button { background:transparent; border-color:#8f7c66; color:#30271e; border-radius:50%; }
.bar-demo .stepper button:active { background:var(--bar-paper-2); }
.bar-demo .stepper .qty { font-family:Georgia,'Times New Roman',serif; color:var(--bar-ink); }
.bar-demo .o-header__seat .chip { background:transparent; color:#e7ded0; border:1px solid #6b6257; border-radius:2px; letter-spacing:.08em; }

@media(max-width:420px) {
  .bar-demo .o-item__thumb { width:96px; height:116px; flex-basis:96px; }
  .bar-demo .o-header__shop { font-size:21px; }
}