/* =========================================================
   炭火焼鳥VESTA セルフオーダー — ファミレス風UI
   明るい白基調／コーポレートレッド／角丸・丸ゴシック／写真カードのグリッド
   ========================================================= */
:root{
  --ink:#2b2b2b;          /* 文字（やわらかい黒） */
  --bg:#f3f5f8;           /* 明るい地色 */
  --surface:#ffffff;
  --red:#e8362f;          /* コーポレートレッド */
  --red-dark:#c92920;
  --yellow:#ffc20e;       /* アクセント（下線・強調） */
  --green:#1faa55;
  --muted:#9aa0a6;
  --line:#e9ecf1;
  --shadow-card:0 2px 8px rgba(45,45,45,.08);
  --shadow-btn:0 3px 0 var(--red-dark);
  --shadow-up:0 -2px 14px rgba(45,45,45,.12);
  --r:16px;
  --bar-h:70px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
[hidden]{display:none !important;}
html,body{margin:0;padding:0;}
/* モーダル表示中は背景をスクロールさせない（位置を保持して固定） */
body.scroll-locked{position:fixed;left:0;right:0;width:100%;overflow:hidden;}
body{
  font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN",-apple-system,sans-serif;
  background:var(--bg);color:var(--ink);font-weight:500;
  -webkit-text-size-adjust:100%;overscroll-behavior-y:none;
  touch-action:manipulation; /* ダブルタップ拡大を無効化（スクロールは維持） */
}
button{font-family:inherit;cursor:pointer;}

.app{max-width:480px;margin:0 auto;min-height:100vh;position:relative;}

/* ---------- アプリバー（赤・ポップ） ---------- */
.appbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:8px;height:56px;padding:0 6px;
  padding-top:env(safe-area-inset-top);
  background:var(--red);color:#fff;box-shadow:0 2px 6px rgba(232,54,47,.25);
}
.appbar__back{
  min-height:42px;border:none;background:transparent;color:#fff;
  line-height:1;border-radius:12px;display:flex;align-items:center;gap:3px;
  padding:0 10px 0 4px;position:relative;z-index:1;
}
.appbar__back:active{background:rgba(255,255,255,.18);}
.appbar__back-ic{font-size:1.5rem;}
.appbar__back-tx{font-size:.9rem;font-weight:800;}
.appbar__back-tx:empty{display:none;}
/* 右上アクション（呼び出し・履歴）。常に右端へ寄せる */
.appbar__actions{display:flex;align-items:center;gap:6px;flex:0 0 auto;margin-left:auto;position:relative;z-index:1;}
.appbar__btn{
  display:flex;align-items:center;gap:5px;border:none;border-radius:12px;
  background:rgba(255,255,255,.16);color:#fff;font-weight:800;font-size:.82rem;
  padding:8px 11px;line-height:1;
}
.appbar__btn:active{transform:translateY(1px);background:rgba(255,255,255,.28);}
.appbar__btn-ic{font-size:1.05rem;}
.appbar__btn--call{background:var(--yellow);color:#5a3d00;}
.appbar__btn--call:active{background:#ecae00;}
/* タイトルは画面中央に絶対配置（左右ボタンの幅に影響されず常に中央） */
.appbar__title{
  position:absolute;left:50%;top:0;bottom:0;transform:translateX(-50%);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;line-height:1.15;pointer-events:none;max-width:56%;
}
.appbar__brand{font-weight:800;font-size:1.06rem;letter-spacing:.04em;}
.appbar__sub{font-size:.7rem;color:#ffe1b0;font-weight:700;margin-top:1px;}

/* ---------- ビュー ---------- */
.view{display:none;animation:fade .22s ease;}
.view.is-active{display:block;}
@keyframes fade{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}}
.view__head{padding:16px 16px 4px;}
.view__head h2{margin:0;font-size:1.2rem;font-weight:800;}
.view__note{margin:4px 0 0;font-size:.8rem;color:var(--muted);font-weight:500;}

/* ---------- カテゴリタブ（黄色下線） ---------- */
.catbar{
  position:sticky;top:56px;z-index:30;display:flex;gap:4px;overflow-x:auto;
  padding:0 8px;background:var(--surface);border-bottom:1px solid var(--line);
  scrollbar-width:none;
}
.catbar::-webkit-scrollbar{display:none;}
.catbar__chip{
  flex:0 0 auto;border:none;background:transparent;color:var(--muted);
  font-size:.86rem;font-weight:700;padding:13px 12px 11px;white-space:nowrap;
  border-bottom:3px solid transparent;transition:.12s;
}
.catbar__chip.is-active{color:var(--red);border-bottom-color:var(--yellow);}

/* ---------- メニュー（カードグリッド） ---------- */
.menu{padding:6px 12px calc(var(--bar-h) + 24px);}
.menu-cat{padding-top:12px;}
.menu-cat__title{
  display:flex;align-items:center;gap:8px;margin:6px 2px 10px;
  font-size:1.05rem;font-weight:800;
}
.menu-cat__title::before{content:"";width:6px;height:18px;background:var(--red);border-radius:3px;}
.dish-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

.card{
  background:var(--surface);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow-card);display:flex;flex-direction:column;position:relative;
  transition:transform .08s ease;
}
.card:active{transform:scale(.97);}
.card__photo{
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  font-size:2.6rem;background:#f4eee6;overflow:hidden;
}
.card__photo--img{padding:0;}
.card__photo--img img{width:100%;height:100%;object-fit:cover;}
.sheet__photo--img{font-size:0;overflow:hidden;}
.sheet__photo--img img{width:100%;height:100%;object-fit:cover;border-radius:14px;}
.card__body{padding:9px 10px 10px;display:flex;flex-direction:column;flex:1;}
.card__name{font-size:.86rem;font-weight:700;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.3em;}
.card__foot{display:flex;align-items:center;justify-content:space-between;margin-top:7px;}
.card__price{font-size:1rem;font-weight:800;color:var(--red);}
.card__price small{font-size:.66rem;color:var(--muted);font-weight:600;margin-left:1px;}
.card__qty{
  position:absolute;top:8px;right:8px;min-width:24px;height:24px;padding:0 7px;
  border-radius:12px;background:var(--yellow);color:#5a3d00;font-size:.78rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.18);
}

/* ---------- 下部アクションバー ---------- */
.actionbar{
  position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:45;
  width:100%;max-width:480px;height:calc(var(--bar-h) + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:12px;padding:0 14px env(safe-area-inset-bottom);
  background:var(--surface);box-shadow:var(--shadow-up);
}
.actionbar__info{display:flex;flex-direction:column;line-height:1.1;min-width:78px;}
.actionbar__count{font-size:.72rem;color:var(--muted);font-weight:700;}
.actionbar__count::after{content:" 点";}
.actionbar__total{font-size:1.3rem;font-weight:800;}
.actionbar__btn{
  flex:1;height:50px;border:none;border-radius:14px;background:var(--red);color:#fff;
  font-size:1.02rem;font-weight:800;box-shadow:var(--shadow-btn);
}
.actionbar__btn:active{transform:translateY(2px);box-shadow:none;}

/* ---------- カート/確認/履歴 ---------- */
.cart-list,.confirm-list,.history-list{padding:8px 14px calc(var(--bar-h) + 24px);}
.line-item{
  display:flex;align-items:center;gap:12px;background:var(--surface);
  border-radius:var(--r);padding:12px 14px;margin-bottom:10px;box-shadow:var(--shadow-card);
}
.line-item__thumb{
  flex:0 0 auto;width:46px;height:46px;border-radius:12px;background:#f4eee6;
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;
}
.line-item__body{flex:1;min-width:0;}
.line-item__name{font-size:.92rem;font-weight:700;}
.line-item__unit{font-size:.78rem;color:var(--muted);margin-top:2px;font-weight:600;}
.line-item__sub{font-weight:800;white-space:nowrap;}
.line-item__time{font-size:.74rem;color:var(--muted);font-weight:600;}

.stepper-row{display:flex;align-items:center;gap:10px;}
.stepper{
  width:34px;height:34px;border-radius:11px;border:none;background:#f0f2f5;color:var(--ink);
  font-size:1.2rem;line-height:1;display:flex;align-items:center;justify-content:center;
}
.stepper--minus{color:var(--red);}
.stepper--plus{background:var(--red);color:#fff;box-shadow:0 2px 0 var(--red-dark);}
.stepper--plus:active{transform:translateY(2px);box-shadow:none;}
.qty-num{min-width:22px;text-align:center;font-weight:800;}

.subtotal{
  display:flex;justify-content:space-between;align-items:center;
  margin:6px 0 14px;padding:16px;background:#fff7e9;border-radius:var(--r);
}
.subtotal__label{font-weight:700;}
.subtotal__val{font-size:1.4rem;font-weight:800;color:var(--red);}

/* ---------- 空・通知・完了 ---------- */
.cart-empty,.notice{padding:54px 24px;text-align:center;color:var(--muted);}
.notice__ic{font-size:3rem;margin-bottom:14px;}
.notice__msg{font-size:.98rem;line-height:1.7;color:var(--ink);font-weight:600;}

.done{padding:46px 26px 38px;text-align:center;}
.done__mark{
  width:84px;height:84px;margin:0 auto 18px;border-radius:50%;background:var(--green);color:#fff;
  font-size:2.6rem;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(31,170,85,.32);animation:pop .4s ease;
}
@keyframes pop{0%{transform:scale(.4);opacity:0;}70%{transform:scale(1.1);}100%{transform:scale(1);opacity:1;}}
.done__title{font-size:1.4rem;font-weight:800;margin:0 0 8px;}
.done__msg{font-size:.92rem;color:var(--muted);line-height:1.7;margin:0 0 20px;font-weight:600;}
.done__summary{text-align:left;background:var(--surface);border-radius:var(--r);padding:14px 16px;margin-bottom:22px;box-shadow:var(--shadow-card);}
.done__summary .ds-row{display:flex;justify-content:space-between;font-size:.88rem;padding:4px 0;font-weight:600;}
.done__summary .ds-total{border-top:2px dotted var(--line);margin-top:6px;padding-top:9px;font-weight:800;}

/* ---------- ボタン ---------- */
.btn{display:block;width:100%;border:none;border-radius:14px;font-size:1.02rem;font-weight:800;padding:16px;margin-top:12px;}
.btn--primary{background:var(--red);color:#fff;box-shadow:var(--shadow-btn);}
.btn--primary:active{transform:translateY(2px);box-shadow:none;}
.btn--ghost{background:var(--surface);color:var(--ink);border:2px solid var(--line);}
.btn:disabled{opacity:.5;box-shadow:none;}

/* ---------- 商品詳細シート ---------- */
.sheet-overlay{position:fixed;inset:0;z-index:60;background:rgba(45,45,45,.45);display:flex;align-items:flex-end;justify-content:center;animation:fade .2s;}
.sheet{
  width:100%;max-width:480px;background:var(--surface);border-radius:22px 22px 0 0;
  padding:22px 22px calc(22px + env(safe-area-inset-bottom));position:relative;
  animation:slideup .26s cubic-bezier(.2,.8,.2,1);
}
@keyframes slideup{from{transform:translateY(100%);}to{transform:none;}}
.sheet__photo{aspect-ratio:16/9;border-radius:14px;background:#f4eee6;display:flex;align-items:center;justify-content:center;font-size:3rem;margin-bottom:14px;}
.sheet__close{position:absolute;top:10px;right:10px;width:36px;height:36px;border:none;background:rgba(255,255,255,.85);border-radius:50%;font-size:1.4rem;color:var(--ink);box-shadow:0 1px 5px rgba(0,0,0,.15);}
.sheet__name{font-size:1.2rem;font-weight:800;margin:2px 0 4px;}
.sheet__price{font-size:1.1rem;font-weight:800;color:var(--red);margin:0 0 18px;}
.sheet__qty{display:flex;align-items:center;justify-content:center;gap:26px;margin-bottom:18px;}
.sheet__qty .stepper{width:48px;height:48px;border-radius:14px;font-size:1.5rem;}
.sheet__qty-num{font-size:1.8rem;font-weight:800;min-width:40px;text-align:center;}
.sheet__unit{font-size:1rem;font-weight:700;color:var(--muted);margin-left:-16px;}
.sheet__add{margin-top:0;}

/* ---------- 確認モーダル（スタッフ呼び出し等） ---------- */
.modal-overlay{
  position:fixed;inset:0;z-index:70;background:rgba(45,45,45,.5);
  display:flex;align-items:center;justify-content:center;padding:24px;animation:fade .18s;
}
.modal{
  width:100%;max-width:380px;background:var(--surface);border-radius:22px;
  padding:28px 24px 22px;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.28);
  animation:popin .24s cubic-bezier(.2,.8,.2,1);
}
@keyframes popin{from{opacity:0;transform:scale(.9);}to{opacity:1;transform:none;}}
.modal__ic{font-size:2.8rem;margin-bottom:10px;}
.modal__title{font-size:1.22rem;font-weight:800;margin:0 0 6px;}
.modal__msg{font-size:.9rem;color:var(--muted);font-weight:600;margin:0 0 22px;line-height:1.6;}
.modal__actions{display:flex;gap:12px;}
.modal__actions .btn{margin-top:0;flex:1;padding:15px;}

/* ---------- ローディング/トースト ---------- */
.loading{display:flex;flex-direction:column;align-items:center;gap:14px;padding:64px 0;color:var(--muted);font-weight:600;}
.spinner{width:30px;height:30px;border:3px solid var(--line);border-top-color:var(--red);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.toast{position:fixed;left:50%;bottom:calc(var(--bar-h) + 18px);transform:translateX(-50%);z-index:80;background:var(--ink);color:#fff;padding:11px 20px;border-radius:24px;font-size:.86rem;font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,.25);animation:toastin .2s;}
@keyframes toastin{from{opacity:0;transform:translate(-50%,8px);}to{opacity:1;transform:translateX(-50%);}}

.badge-status{font-size:.68rem;font-weight:800;padding:2px 8px;border-radius:10px;margin-left:6px;}
.badge-status--sent{background:#e7f5ec;color:var(--green);}
.badge-status--pending{background:#fff2e0;color:#c87f00;}

/* ---------- 席セットアップ（スタッフ・初回） ---------- */
.setup{padding:24px 18px 40px;}
.setup__title{margin:8px 0 4px;font-size:1.25rem;font-weight:800;text-align:center;}
.setup__note{margin:0 0 20px;font-size:.82rem;color:var(--muted);font-weight:600;text-align:center;line-height:1.6;}
.setup__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.setup__table{
  aspect-ratio:1/1;border:2px solid var(--line);background:var(--surface);border-radius:14px;
  font-size:1.15rem;font-weight:800;color:var(--ink);box-shadow:var(--shadow-card);
}
.setup__table:active{transform:translateY(2px);border-color:var(--red);color:var(--red);}

/* ---------- ご来店（人数入力） ---------- */
.welcome{padding:44px 26px 40px;text-align:center;}
.welcome__brand{font-size:1.05rem;font-weight:800;letter-spacing:.06em;color:var(--red);}
.welcome__title{font-size:1.5rem;font-weight:800;margin:14px 0 6px;}
.welcome__sub{font-size:.95rem;color:var(--muted);font-weight:600;margin:0 0 26px;}
.welcome__chips{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px;}
.people-chip{
  height:56px;border:2px solid var(--line);background:var(--surface);border-radius:14px;
  font-size:1.05rem;font-weight:800;color:var(--ink);box-shadow:var(--shadow-card);
}
.people-chip.is-active{background:var(--red);color:#fff;border-color:var(--red);box-shadow:0 3px 0 var(--red-dark);}
.welcome__stepper{display:flex;align-items:center;justify-content:center;gap:26px;margin-bottom:30px;}
.welcome__stepper .stepper{width:52px;height:52px;border-radius:15px;font-size:1.6rem;}
.welcome__num{font-size:2rem;font-weight:800;min-width:64px;}
.welcome__num small{font-size:1rem;color:var(--muted);margin-left:3px;}
.welcome__start{margin-top:0;}
.welcome__reassign{
  display:block;margin:22px auto 0;background:none;border:none;
  color:var(--muted);font-size:.78rem;font-weight:700;text-decoration:underline;
}

/* =========================================================
   横向き（iPad 7 ランドスケープ＝CSS 1080×810px）最適化
   設置端末はiPad 7・注文時は横向き運用。広い画面幅を活かす。
   ※幅720px以上（iPad縦810/横1080とも）でマルチカラム化。
   ========================================================= */
@media (min-width:720px){
  :root{ --bar-h:78px; }

  /* 画面いっぱいに使う（中央480pxの単カラムをやめる） */
  .app{max-width:none;}

  /* ヘッダーは少しゆったり */
  .appbar{height:62px;padding:0 14px;}
  .appbar__brand{font-size:1.2rem;}
  .appbar__sub{font-size:.78rem;}
  .catbar{top:62px;padding:0 16px;}
  .catbar__chip{font-size:.95rem;padding:15px 16px 13px;}

  /* メニューは自動カラム数のグリッド（横1080→約4列／縦810→約3列） */
  .menu{padding:10px 20px calc(var(--bar-h) + 28px);}
  .menu-cat__title{font-size:1.2rem;margin:14px 2px 14px;}
  .dish-grid{
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:16px;
  }
  .card__name{font-size:.95rem;}
  .card__price{font-size:1.08rem;}

  /* 下部バーも全幅で中央寄せ */
  .actionbar{
    left:0;right:0;width:100%;max-width:none;transform:none;
    justify-content:center;gap:28px;padding:0 24px env(safe-area-inset-bottom);
  }
  .actionbar__info{min-width:120px;align-items:flex-end;}
  .actionbar__total{font-size:1.5rem;}
  .actionbar__btn{flex:0 0 auto;min-width:320px;height:54px;font-size:1.1rem;}

  /* カート/確認/履歴は読みやすい幅に中央寄せ */
  .cart-list,.confirm-list,.history-list{
    max-width:760px;margin:0 auto;padding:16px 20px calc(var(--bar-h) + 28px);
  }
  .view__head{max-width:760px;margin:0 auto;padding:20px 20px 4px;}
  .done,.notice,.cart-empty{max-width:620px;margin:0 auto;}

  /* 席セットアップ・人数入力は中央のカード幅に */
  .setup,.welcome{max-width:680px;margin:0 auto;}
  .setup__grid{grid-template-columns:repeat(6,1fr);gap:12px;}
  .welcome__chips{grid-template-columns:repeat(4,1fr);}

  /* 商品詳細：ボトムシート → 中央モーダル */
  .sheet-overlay{align-items:center;}
  .sheet{
    max-width:560px;border-radius:22px;
    padding:24px 24px;max-height:88vh;overflow:auto;
    animation:popin .24s cubic-bezier(.2,.8,.2,1);
  }
  @keyframes popin{from{opacity:0;transform:scale(.92);}to{opacity:1;transform:none;}}
  .sheet__photo{aspect-ratio:16/9;}

  .toast{bottom:calc(var(--bar-h) + 22px);font-size:.95rem;}
}

/* さらに広い横向き（iPad 7 横=1080px以上）でカラムを増やし大きめカードに */
@media (min-width:1000px){
  .menu{padding-left:28px;padding-right:28px;}
  .dish-grid{grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:18px;}
  .setup__grid{grid-template-columns:repeat(8,1fr);}
}

/* =========================================================
   カート（下から出るモーダル＝ボトムシート）
   ※横向き(iPad)でも下から出す（上の .sheet 中央化を打ち消すため最後に定義）
   ========================================================= */
.sheet-overlay--cart{align-items:flex-end;}
.sheet--cart{
  max-width:600px;border-radius:22px 22px 0 0;padding:0;overflow:hidden;
  display:flex;flex-direction:column;max-height:86vh;
  animation:slideup .26s cubic-bezier(.2,.8,.2,1);
}
.sheet--cart .sheet__head{
  flex:0 0 auto;position:relative;text-align:center;
  padding:18px 48px 13px;border-bottom:1px solid var(--line);
}
.sheet__title{margin:0;font-size:1.18rem;font-weight:800;}
.sheet--cart .sheet__close{top:9px;right:12px;}
.sheet--cart .cart-list{
  flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:14px 16px;margin:0;
}
.sheet--cart .cart-empty{padding:42px 20px;}
.cart-empty__ic{font-size:2.6rem;margin-bottom:10px;}
.sheet__foot{
  flex:0 0 auto;background:var(--surface);border-top:1px solid var(--line);
  padding:12px 16px calc(14px + env(safe-area-inset-bottom));
}
.sheet__foot .subtotal{margin:0 0 10px;}
.sheet__foot .btn{margin-top:0;}