/* BandMaster アプリの土台（デザインの担当の案 2026-11-13・黒・白・赤）。
   部品の見た目と色は proto.css（デザイン作業の <style> を写した物）。色はここでは決めず、proto.css の :root の変数だけを使う。
   ここは「本物のアプリとしての配置」だけ: 全画面・安全な余白・PC では左にメニューと段組み・入口の画面。 */
:root{color-scheme:dark}
html,body{height:100%}
body{margin:0;background:var(--app);display:block;overscroll-behavior:none}
[hidden]{display:none!important}
a.btn{text-decoration:none}

.app{height:100vh;height:100dvh;display:flex;flex-direction:column}
.app .screen{flex:1;min-height:0;border-radius:0}
.app .scroll{padding-top:max(10px,env(safe-area-inset-top,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.app .tabs{grid-template-columns:repeat(var(--tabs,4),1fr);padding-bottom:max(10px,env(safe-area-inset-bottom,0px))}
.app .fab{bottom:calc(76px + env(safe-area-inset-bottom,0px));right:max(16px,env(safe-area-inset-right,0px))}
.app .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px));white-space:normal;text-align:center}
.app.is-gate .tabs{display:none}
.app.is-gate .scroll{padding-bottom:40px}

/* アプリは 20 秒ごとに中身を描き直すので、札ごとの「出てくる動き」は止める（毎回やり直されて、ちらつきに見える） */
.app .mgc,.app .ask,.app .banner{animation:none}

.blk{min-width:0}
button.mrow{width:100%;text-align:left}
button.g-n{cursor:pointer}
.sheet .ask{border:0;padding:0;animation:none}
.sheet .link{margin-top:6px}
.sheet .f:first-of-type{margin-top:14px}

/* ---------- 入口（ログイン前）: 名前・一言・赤い主のボタン。招待コードと確認の番号は数字の書体で大きく ---------- */
.gate{min-height:100%;display:grid;place-items:center}
.gate-in{width:min(400px,100%);display:flex;flex-direction:column;gap:12px;padding:32px 0}
.gate .wm{font-size:54px;text-align:center;margin-bottom:2px}
.gate-lead{margin:4px 0 24px;font-size:22px;font-weight:900;text-align:center;line-height:1.5;letter-spacing:.02em;text-wrap:balance}
.gate-lead.sm{font-size:15.5px;font-weight:700;color:var(--sub);margin:0 0 8px}
.gate .f{margin-top:4px}
.gate .f>label{text-align:center}
.gate .link{margin-top:4px}
#g-code,#g-num{height:60px;font:700 26px var(--f-num);letter-spacing:.16em;text-align:center}
#g-code::placeholder,#g-num::placeholder{font:500 16px var(--f-ja);letter-spacing:.02em}

/* ---------- PC・横長のタブレット: メニューは左、中身は段組みで幅いっぱい ---------- */
@media (min-width:900px){
  .app .screen{flex-direction:row}
  .app .tabs{position:static;order:-1;flex:none;width:232px;display:flex;flex-direction:column;gap:4px;background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;border-top:0;border-right:1px solid var(--line);padding:28px 14px}
  .app .tabs button{flex-direction:row;gap:12px;min-height:48px;font-size:15px;padding:0 14px;border-radius:12px;justify-content:flex-start}
  .app .tabs button[aria-current="page"]{background:var(--raise);color:var(--ink)}
  .app .scroll{padding:32px clamp(28px,3.5vw,72px) 120px}
  .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:4px clamp(28px,3vw,56px);align-items:start}
  /* ホームは 2 段に上から詰めて流す: 今やること（日程のご相談・決めてください・調整中・仮押さえ）が左の段、予定と知らせが右の段。行の高さに引っぱられた空きが出ない */
  .bm-head ~ .cols{display:block;columns:2;column-gap:clamp(28px,3vw,56px)}
  .bm-head ~ .cols>.blk{break-inside:avoid;padding-top:26px}
  .bm-head ~ .cols>.blk>.sec:first-child{margin-top:0}
  .app .fab{right:clamp(28px,3.5vw,72px);bottom:32px;height:56px;font-size:16px;padding:0 26px 0 20px}
  .app .toast{bottom:36px}
  .sheet-wrap{justify-content:center;align-items:center}
  .sheet{width:min(540px,90%);border:1px solid var(--line);border-radius:24px;padding-bottom:22px}
  .bm-head .wm{font-size:36px}
  .ttl{font-size:30px}
  .dhead{justify-content:flex-start;gap:24px}
  .dbig .n{font-size:72px}
}
@media (min-width:2200px){ .bm-head ~ .cols{columns:3} }
@media (min-width:900px) and (hover:hover){
  .app .tabs button:hover{background:var(--surface);color:var(--ink)}
}
@media (min-width:900px) and (max-width:1199px){
  .app .tabs{width:88px;padding:20px 8px}
  .app .tabs button{flex-direction:column;gap:4px;min-height:64px;font-size:11.5px;padding:8px 0;justify-content:center}
}