/* 自動で写した物。直す時は元の HTML を直して tools/mkcss.js を流す。元: BandMaster_デザイン作業_案2.html */
/* Layout: PC = 説明の柱 + 3 台の電話（バンマス・マネージャー・メンバー）を横に / タブレット = 説明 + 1 台 / スマホ = 1 台を全面。
   色: 黒の地に白い字。赤（差し色）は「押すボタン・数の印・新着・急ぎ」と名前の印だけ。
   状態は形で: 仮 = 点線の枠 / 本 = 白の塗り / 外れ = 取り消し線と沈んだ灰。○△× は形と明るさ（○ 白・△ 灰・× 暗い灰）。
   白の塗り = 選んだ・決まった（本・選んだ日・押した ○△×・選んだチップ）。外す・外れ・× には赤を使わない。 */
:root{
  color-scheme:dark;
  /* 地と面（黒の段・ほんの少し赤みに寄せた灰） */
  --bg:#0d0c0c;          /* ページの地 */
  --app:#000000;         /* アプリの画面の地 */
  --surface:#191817;     /* 札 */
  --raise:#262422;       /* 札の上の押す物・選んだ列 */
  --sheet:#1e1c1b;       /* 下から出る窓 */
  --line:#33302e;        /* 細い区切り */
  --line-2:#6a6662;      /* はっきりした線（入力の枠・ふつうのボタンの枠） */
  /* 字 */
  --ink:#f7f5f3;         /* 本文（白） */
  --sub:#aca8a4;         /* 補いの字 */
  --dim:#7f7b77;         /* 沈んだ物（× の形・取り消し線）。小さな字には使わない */
  --on-ink:#0d0c0c;      /* 白の塗りの上の字 */
  /* 差し色の赤 = 今やること（押す・数・新着・急ぎ）と名前の印 */
  --accent:#d7261b;      /* 塗り（上に白い字） */
  --on-accent:#ffffff;
  --accent-ink:#ff5d50;  /* 黒の上の赤い字・線 */
  --accent-bg:rgba(255,80,64,.14);
  /* 状態 */
  --kari:#f7f5f3;        /* 仮の印（点線と字） */
  --kari-bg:transparent;
  --kari-line:#8f8a86;   /* 仮の札の点線 */
  --hon:#f7f5f3;         /* 本の塗り */
  --hon-ink:#0d0c0c;     /* 本の上の字 */
  --off:#aca8a4;         /* 外れの字（沈んだ灰） */
  --off-line:#aca8a4;    /* 外れの取り消し線 */
  /* ○△× */
  --go:#f7f5f3;          /* ○ 行ける */
  --maybe:#b4b0ac;       /* △ まだ分からない */
  --no:#86817d;          /* × 行けない */
  --none:#5a5653;        /* ― まだ返事なし */
  /* 電話の枠と待ち受け */
  --frame:#1c1b1a; --frame-edge:#3d3a38; --island:#000000;
  --lock1:#34302d; --lock2:#121110; --lock-fg:#ffffff; --glass:rgba(255,255,255,.13);
  --lock-act:#ffffff; --lock-off:#c4c0bc; --lock-hon:#ffffff;
  --tabbar:rgba(25,24,23,.9);
  --shade:rgba(0,0,0,.66);
  --shadow:rgba(0,0,0,.85);
  --toast-bg:#1e1c1b; --toast-ink:#f7f5f3;
  /* 白い札（大事な所）の色。白い札の中では、上の役目の変数をこれに置き換える */
  --w-surface:#ffffff;   /* 白い札の地 */
  --w-raise:#f0eeeb;     /* 白い札の上の押す物・選んだ列 */
  --w-line:#e2deda;      /* 白い札の中の細い区切り */
  --w-line-2:#8a8580;    /* 白い札の中のはっきりした線（入力の枠・枠だけのボタン） */
  --w-ink:#141312;       /* 白い札の字（黒）。本の塗り・押した ○△× の塗りもこの黒 */
  --w-sub:#5c5753;       /* 白い札の補いの字 */
  --w-dim:#8a8580;       /* 白い札の沈んだ物（形だけ） */
  --w-accent-ink:#c4231a;/* 白い札の上の赤い字・線 */
  --w-accent-bg:rgba(215,38,27,.08);
  --w-kari-line:#6c6763; /* 白い札の仮の点線 */
  --w-maybe:#6c6763;     /* 白い札の △ */
  --w-no:#8a8580;        /* 白い札の × */
  --w-none:#cbc6c2;      /* 白い札の ― まだ返事なし */
  --f-ja:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif;
  --f-num:"Barlow Condensed","Zen Kaku Gothic New","Hiragino Sans",sans-serif;
}
/* 黒の 1 本。色は上の :root だけで決め、暗い時の 2 か所も同じ黒のまま（明るい版は作らない） */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ color-scheme:dark } }
:root[data-theme="dark"]{ color-scheme:dark }
*{box-sizing:border-box}
html{height:100%;box-sizing:border-box}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:var(--f-ja);-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.55;letter-spacing:.01em}
::selection{background:var(--accent);color:var(--on-accent)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit;letter-spacing:inherit}
button:disabled{cursor:default;opacity:.4}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- page ---------- */
.page{display:grid;grid-template-columns:minmax(300px,460px) auto;justify-content:center;column-gap:clamp(40px,4vw,80px);row-gap:40px;align-items:start;padding-block:40px;padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}
.intro{position:sticky;top:40px;display:flex;flex-direction:column;gap:24px;min-width:0;max-width:560px}
.brand{display:flex;align-items:center;gap:12px}
.wm{font:700 44px/1 var(--f-num);letter-spacing:-.01em;white-space:nowrap}
.wm::after{content:"";display:inline-block;width:.19em;height:.19em;margin-left:.07em;border-radius:50%;background:var(--accent);vertical-align:.52em}
.tag{font-size:12px;font-weight:700;border:1px solid var(--line-2);color:var(--sub);border-radius:999px;padding:2px 10px;letter-spacing:.06em}
.intro h1{margin:0;font-size:clamp(26px,calc(1.25vw + 6px),30px);line-height:1.4;font-weight:900;text-wrap:balance;letter-spacing:.01em}
.flow{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.flow li{display:grid;grid-template-columns:88px 1fr;gap:12px;align-items:center}
.flow .mk{display:flex;gap:6px}
.flow b{display:block;font-size:16px}
.flow span.s{display:block;font-size:13px;color:var(--sub)}
.try{margin:0;font-size:14px;font-weight:700;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:13px 15px}
.intro-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.fine{margin:0;font-size:12.5px;color:var(--sub)}

.devs{display:grid;grid-template-columns:repeat(3,380px);gap:32px;justify-content:center}
.roles{display:none}
.dev{display:flex;flex-direction:column;gap:12px;align-items:center;min-width:0}
.dev-label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--sub);height:22px}
.dev-label b{color:var(--ink);font-size:14px}
.dev-label .pdot{width:8px;height:8px;border-radius:50%;background:var(--accent-ink);opacity:0}
.dev-label.ping .pdot{animation:ping 2.6s ease}
@keyframes ping{0%,70%{opacity:1;transform:scale(1)}15%{transform:scale(1.8)}100%{opacity:0}}

.phone{width:100%;max-width:380px;height:780px;background:var(--frame);border-radius:54px;padding:11px;box-shadow:inset 0 0 0 1px var(--frame-edge),0 40px 80px -40px var(--shadow)}
.screen{position:relative;height:100%;border-radius:44px;overflow:hidden;background:var(--app);display:flex;flex-direction:column;isolation:isolate}
.island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:110px;height:31px;border-radius:20px;background:var(--island);z-index:40}
.sbar{height:48px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:4px 30px 0 34px;font:600 16px var(--f-num)}
.sbar .bat{width:25px;height:12px;border:1.5px solid currentColor;border-radius:4px;position:relative;opacity:.85}
.sbar .bat::after{content:"";position:absolute;inset:1.5px 5px 1.5px 1.5px;background:currentColor;border-radius:1.5px}
.dev[data-role="mb"] .sbar{background:var(--lock1);color:var(--lock-fg)}
.scroll{flex:1;min-height:0;min-width:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:6px 16px 120px;scrollbar-width:none}
.scroll::-webkit-scrollbar{display:none}
.dev[data-role="mg"] .scroll,.dev[data-role="mb"] .scroll{padding-bottom:40px}
.scroll.in{animation:fadeup .22s ease}
@keyframes fadeup{from{opacity:.2;transform:translateY(6px)}}

/* ---------- shared pieces ---------- */
/* 状態の印: 仮 = 点線 / 本 = 白の塗り / 外れ = 灰と取り消し線 */
.st{display:inline-flex;align-items:center;justify-content:center;height:24px;min-width:34px;padding:0 8px;border-radius:7px;font-weight:900;font-size:13px;line-height:1;white-space:nowrap}
.st.kari{border:1.5px dashed var(--kari);color:var(--kari);background:var(--kari-bg)}
.st.hon{background:var(--hon);color:var(--hon-ink)}
.st.off{border:1.5px solid var(--line-2);color:var(--off);text-decoration:line-through;text-decoration-color:var(--off-line);text-decoration-thickness:1.5px}
.st.bell{border:1.5px solid var(--line);background:var(--surface);color:var(--ink);padding:0 6px}
.st.bell .ic{width:16px;height:16px}
.st.lg{height:32px;font-size:15px;padding:0 12px;border-radius:9px}

.sec{display:flex;align-items:center;gap:8px;margin:26px 2px 10px;font-size:13.5px;font-weight:700;color:var(--sub);letter-spacing:.05em}
.sec .sub{font-weight:500}
/* 今やること（数の印がある見出し・メンバーへのご相談）は白く大きく */
.sec:has(.cnt:not(.zero)),.sec:has(+ .stack .ask){color:var(--ink);font-size:15px;letter-spacing:.03em}
.cnt{font:700 15px/22px var(--f-num);min-width:24px;height:22px;padding:0 7px;border-radius:11px;background:var(--accent);color:var(--on-accent);text-align:center;letter-spacing:0}
.cnt.zero{background:var(--raise);color:var(--sub)}
.ttl{margin:12px 2px 6px;font-size:22px;font-weight:900;letter-spacing:.02em}
.stack{display:flex;flex-direction:column;gap:8px}

.row{width:100%;display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 14px}
.row.is-kari{border:1.5px dashed var(--kari-line)}
.date{display:flex;flex-direction:column;line-height:1}
.date .n{font:700 25px/1 var(--f-num);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.date .w{font-size:12.5px;font-weight:700;color:var(--sub);margin-top:4px}
.mid{min-width:0}
.r-k{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15.5px}
.r-p{font-size:13px;color:var(--sub);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row.is-off{background:transparent}
.row.is-off .n,.row.is-off .r-k{text-decoration:line-through;text-decoration-color:var(--off-line);text-decoration-thickness:2px;color:var(--off)}
.row .ic{color:var(--sub)}

.hold{background:var(--surface);border:1.5px dashed var(--kari-line);border-radius:18px;overflow:hidden}
.hold .row{border:0;border-radius:0;background:none}
.hold-foot{display:flex;align-items:center;gap:8px;padding:8px 10px 10px 14px;border-top:1px solid var(--line);flex-wrap:wrap}
.hold-foot .dots{margin-left:auto;gap:3px}
.hold-foot .dots i{width:9px;height:9px}
.hold-foot .btn.sm{padding:0 10px;gap:4px}
.due{display:flex;align-items:baseline;gap:6px;font-size:13px;color:var(--sub)}
.due b{font:700 17px var(--f-num);color:var(--ink)}
.left{font-weight:700;color:var(--ink);background:var(--raise);border-radius:6px;padding:1px 7px;font-size:12.5px}
.left.hot{color:var(--on-accent);background:var(--accent)}
/* 返事の点: ● 押さえた / 点線の輪 返事待ち / ⊘ 難しい */
.dots{display:flex;gap:4px;align-items:center}
.dots i{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--go);display:block}
.dots i.ok{background:var(--go)}
.dots i.wait{border-style:dashed;border-color:var(--sub)}
.dots i.ng{border-color:var(--no);background:linear-gradient(135deg,transparent 41%,var(--no) 41% 59%,transparent 59%)}
.dots i.none{display:none}

/* ボタン: 赤 = 進める / 枠だけ = 外す / 白の塗り = 外すのを確かめる */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:48px;border-radius:14px;font-weight:700;font-size:15.5px;padding:0 16px;white-space:nowrap}
.btn .ic{width:18px;height:18px}
.btn.primary{background:var(--accent);color:var(--on-accent)}
.btn.primary:disabled{background:var(--raise);color:var(--sub);opacity:1;box-shadow:inset 0 0 0 1px var(--line)}
.btn.danger{background:transparent;color:var(--ink);border:1.5px solid var(--line-2)}
.btn.danger-fill{background:var(--hon);color:var(--hon-ink)}
.btn.ghost{background:var(--raise);border:1px solid var(--line);color:var(--ink)}
.btn.sm{height:44px;font-size:13.5px;border-radius:12px;padding:0 12px}
.btn.wide{width:100%}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.acts.one{grid-template-columns:1fr}
.link{display:block;margin:2px auto 0;padding:12px 8px;font-size:13px;color:var(--sub);text-decoration:underline;text-underline-offset:3px}

/* ---------- bandmaster app ---------- */
.bm-head{display:flex;align-items:center;justify-content:space-between;margin:6px 2px 0}
.bm-head .wm{font-size:28px}
.bm-head .tour{display:block;font-size:13px;color:var(--sub);font-weight:700;margin-top:4px}
.banner{display:flex;gap:10px;align-items:flex-start;margin-top:14px;background:var(--surface);color:var(--ink);border-radius:16px;padding:12px 14px;font-size:14px;font-weight:700;animation:fadeup .35s ease}
.banner .ic{margin-top:1px;color:var(--accent-ink)}
.banner small{display:block;font-weight:500;color:var(--sub);font-size:12.5px}
.empty{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px;font-size:14px;color:var(--sub)}
.empty .ic{color:var(--ink)}
.notes{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.note{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:11px 14px;font-size:13.5px}
.note+.note{border-top:1px solid var(--line)}
.note time{font:600 14px var(--f-num);color:var(--sub);padding-top:1px}
.fab{position:absolute;right:16px;bottom:94px;z-index:8;display:flex;align-items:center;gap:6px;height:52px;padding:0 20px 0 15px;border-radius:26px;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:15px;box-shadow:0 14px 30px -12px var(--shadow)}
.tabs{position:absolute;left:0;right:0;bottom:0;z-index:9;display:grid;grid-template-columns:repeat(4,1fr);background:var(--tabbar);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--line);padding:6px 6px 26px}
.tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:48px;font-size:11.5px;font-weight:700;color:var(--sub);padding:2px 0}
.tabs button .ic{width:23px;height:23px}
.tabs button[aria-current="page"]{color:var(--ink)}

.back{display:inline-flex;align-items:center;gap:2px;min-height:44px;font-size:14px;font-weight:700;color:var(--sub);margin:2px 0 0 -6px;padding:0 10px 0 4px}
.dhead{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
.dbig{display:flex;align-items:baseline;gap:8px}
.dbig .n{font:700 54px/1 var(--f-num);letter-spacing:-.02em}
.dbig .w{font-size:18px;font-weight:900;color:var(--sub)}
.is-off-d .dbig .n{text-decoration:line-through;text-decoration-color:var(--off-line);text-decoration-thickness:3px;color:var(--off)}
.dkind{display:flex;align-items:baseline;gap:12px;font-size:20px;font-weight:900;margin-top:6px}
.dkind span{font:600 20px var(--f-num);color:var(--sub)}
.kv{margin:16px 0 0;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:4px 14px}
.kv>div{display:grid;grid-template-columns:84px 1fr;gap:10px;padding:11px 0;font-size:14px;align-items:baseline}
.kv>div+div{border-top:1px solid var(--line)}
.kv dt{color:var(--sub);font-size:13px;font-weight:700}
.kv dd{margin:0;min-width:0}
.kv dd b.num{font-size:17px}
.mem{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.m{display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:9px 12px;font-size:14px;font-weight:700}
.m .part{font:700 12.5px var(--f-num);letter-spacing:.06em;color:var(--sub)}
.m .a{font-size:12.5px;font-weight:700}
.m.ok .a{color:var(--ink)} .m.wait{border:1.5px dashed var(--kari-line)} .m.wait .a{color:var(--sub)} .m.ng{background:transparent} .m.ng .a{color:var(--off)}
.sum{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:14px}
.tl{list-style:none;margin:0;padding:2px 0 2px 4px}
.tl li{position:relative;display:grid;grid-template-columns:54px 1fr;gap:8px;padding:6px 0 6px 20px;font-size:13.5px}
.tl li::before{content:"";position:absolute;left:3px;top:13px;width:9px;height:9px;border-radius:50%;border:2px solid var(--sub);background:var(--app)}
.tl li.done::before{background:var(--ink);border-color:var(--ink)}
.tl li::after{content:"";position:absolute;left:7.5px;top:24px;bottom:-8px;width:0;border-left:1.5px dashed var(--line-2)}
.tl li:last-child::after{display:none}
.tl time{font:600 14px var(--f-num);color:var(--sub)}
.tl li.done{color:var(--ink)} .tl li:not(.done){color:var(--sub)}
.telbox{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:11px 13px;font-size:13.5px}
.telbox .ic{color:var(--sub)}
.telbox b{display:block;font-size:14px}
.telbox .num{font-size:18px;font-weight:600;user-select:all}
.telbox .grow{flex:1;min-width:0}
.told{color:var(--ink);font-weight:700;display:flex;align-items:center;gap:4px;font-size:13px}

.legend{display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap;font-size:13px;color:var(--sub);margin:6px 2px 0}
.legend .st{margin-left:6px} .legend .st:first-child{margin-left:0}

.f{margin-top:18px}
.f>label,.f .lab{display:block;font-size:13px;font-weight:700;color:var(--sub);margin:0 2px 8px}
.f input,.f select{width:100%;height:48px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);color:var(--ink);font:500 16px var(--f-ja);padding:0 12px;min-width:0}
.f.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.f.two>div{min-width:0}
.tt{display:flex;align-items:center;gap:4px;min-width:0}
.tt input{flex:1 1 0;width:auto;min-width:0;padding:0 4px;text-align:center}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{height:44px;padding:0 15px;border-radius:22px;border:1px solid var(--line-2);background:transparent;font-weight:700;font-size:14px}
.chip.on{background:var(--hon);color:var(--hon-ink);border-color:var(--hon)}
.chip.sug{margin-top:8px;border:1.5px dashed var(--kari);color:var(--kari);background:var(--kari-bg);font-size:13px}
.hint{font-size:13px;color:var(--sub);margin:8px 2px 0}
.hint.c{text-align:center}
.f>label .opt{font-weight:500;margin-left:8px}
.nw{white-space:nowrap}
.who{height:48px;display:flex;align-items:center;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-weight:700}
.f-send{margin-top:24px}

.mrow{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:11px 14px}
.pt{font:700 15px var(--f-num);letter-spacing:.04em;height:40px;border-radius:10px;background:var(--raise);border:1px solid var(--line);display:grid;place-items:center}
.mrow b{display:block;font-size:15px}
.mrow small{display:block;color:var(--sub);font-size:12.5px}
.via{font-size:12px;font-weight:700;color:var(--sub);border:1px solid var(--line-2);border-radius:999px;padding:2px 9px;white-space:nowrap}
.srow{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.srow b{font-size:15px}
.srow .meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:13px;color:var(--sub)}
.srow .meta .num{font-size:16px;color:var(--ink);user-select:all}

/* ---------- manager ---------- */
.mg-brand{display:flex;flex-direction:column;gap:3px;margin:-6px -16px 0;padding:14px 18px 15px;background:var(--surface);border-bottom:1px solid var(--line);color:var(--ink)}
.mg-brand .wm{font-size:24px}
.mg-brand span{font-size:12.5px;color:var(--sub)}
.mg-hi{margin:20px 2px 6px;font-size:14px;color:var(--sub);font-weight:700}
.mg-hi b{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:24px;font-weight:900;margin-top:2px;letter-spacing:.02em}
.mgc{background:var(--surface);border:1.5px dashed var(--kari-line);border-radius:18px;padding:14px;animation:fadeup .3s ease}
.mgc-top{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:center}
.mgc .meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;flex-wrap:wrap}
.mgc .heldtx{font-size:13px;color:var(--sub);display:flex;align-items:center;gap:6px}
.nudged{display:inline-flex;align-items:center;gap:4px;margin-top:10px;font-size:12.5px;font-weight:700;color:var(--accent-ink)}
.nudged .ic{width:15px;height:15px}
.confirm{margin-top:14px;background:var(--raise);border:1px solid var(--line-2);border-radius:14px;padding:12px}
.confirm p{margin:0 0 10px;font-size:14px;font-weight:700;color:var(--ink)}
.confirm .acts{margin-top:0}
.done-list{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:16px}

/* ---------- member ---------- */
.lock{margin:-6px -16px 0;padding:16px 16px 22px;background:linear-gradient(175deg,var(--lock1),var(--lock2));color:var(--lock-fg)}
.l-date{text-align:center;font-size:15px;font-weight:700;opacity:.85}
.l-time{text-align:center;font:600 70px/1 var(--f-num);letter-spacing:-.02em;margin:2px 0 16px}
.ntf-list{display:flex;flex-direction:column;gap:8px}
.ntf{background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:18px;padding:10px 13px 11px}
.ntf.new{animation:drop .55s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 0 2px var(--accent-ink)}
@keyframes drop{from{transform:translateY(-16px);opacity:0}}
.ntf-h{display:flex;align-items:center;gap:7px;font-size:12px;opacity:.85}
.ntf-h time{margin-left:auto;font-family:var(--f-num);font-size:13px}
.appic{width:20px;height:20px;border-radius:6px;background:var(--accent);color:var(--on-accent);font:700 10px/20px var(--f-num);text-align:center}
.ntf-t{font-weight:700;font-size:14.5px;margin-top:5px}
.ntf.k-kari .ntf-t,.ntf.k-pick .ntf-t,.ntf.k-ask .ntf-t{color:var(--lock-act)} .ntf.k-off .ntf-t{color:var(--lock-off)} .ntf.k-hon .ntf-t{color:var(--lock-hon)}
.ntf-b{font-size:13.5px;opacity:.94;margin-top:1px}
.mine-row{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.mine-row.is-kari{border:1.5px dashed var(--kari-line)}
.mine-row .row{border:0;border-radius:0;background:none}
.ans{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 14px 14px}
.ans .btn{height:48px;font-size:14.5px}
.ans-done{padding:0 14px 13px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:4px}
.ans-done.ok{color:var(--ink)} .ans-done.ng{color:var(--off)}

/* ---------- sheet & toast ---------- */
.sheet-wrap{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;justify-content:flex-end}
.sheet-bg{position:absolute;inset:0;background:var(--shade);animation:fade .2s ease}
@keyframes fade{from{opacity:0}}
.sheet{position:relative;background:var(--sheet);border-top:1px solid var(--line);border-radius:24px 24px 0 0;padding:22px 18px 32px;animation:up .28s cubic-bezier(.2,.8,.2,1)}
@keyframes up{from{transform:translateY(40px);opacity:.4}}
.sheet h3{margin:0;font-size:19px;font-weight:900}
.sheet p{margin:8px 0 14px;font-size:14px;color:var(--sub)}
.toast{position:absolute;left:50%;bottom:96px;z-index:35;transform:translate(-50%,10px);background:var(--toast-bg);color:var(--toast-ink);font-size:13.5px;font-weight:700;padding:11px 16px;border-radius:12px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;white-space:nowrap;max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis;box-shadow:0 0 0 1px var(--line-2),0 12px 30px -12px var(--shadow)}
.dev[data-role="mg"] .toast,.dev[data-role="mb"] .toast{bottom:30px}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- 日程調整（○△×） ---------- */
/* ○ = 白く太い輪 / △ = 灰の三角 / × = 暗い灰のばつ。色が無くても形で分かり、明るさで ○ が先に目に入る */
.mkv{width:20px;height:20px;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}
.mkv.ok{stroke:var(--go);stroke-width:2.9} .mkv.maybe{stroke:var(--maybe)} .mkv.ng{stroke:var(--no)}
.nomk{display:block;width:12px;height:2px;border-radius:1px;background:var(--none)}
.st.q{gap:3px;border:1.5px solid var(--line);background:var(--surface);padding:0 6px}
.st.q .mkv{width:15px;height:15px}
.legend .mkv{width:16px;height:16px;margin-left:8px}
.legend .mkv:first-child{margin-left:0}

.pc{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.pc-top{display:block;width:100%;padding:12px 14px}
.pc-h{display:flex;align-items:center;gap:8px}
.pc-k{font-weight:700;font-size:15.5px}
.pc-s{font-size:13px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-h .ic{margin-left:auto;color:var(--sub)}
.pc-days{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:6px;margin-top:10px}
.pc-d{display:flex;flex-direction:column;align-items:center;gap:3px;border:1px solid var(--line);border-radius:12px;padding:9px 2px 8px;line-height:1}
.pc-d .n{font:700 20px var(--f-num)}
.pc-d .w{font-size:12px;font-weight:700;color:var(--sub)}
.pc-d .c{display:flex;align-items:center;gap:3px;font:700 16px var(--f-num);margin-top:4px;color:var(--sub)}
.pc-d .c .mkv{width:14px;height:14px}
.pc-d.best{border:1.5px solid var(--ink);background:var(--raise)}
.pc-d.best .c{color:var(--ink)}
.pc .hold-foot{border-top:1px solid var(--line)}
.reply{font-size:13px;color:var(--sub)}
.reply b{font:700 17px var(--f-num);color:var(--ink)}

.psub{margin:4px 2px 0;font-size:13px;color:var(--sub)}
.grid{display:grid;grid-template-columns:84px repeat(var(--n),minmax(0,1fr));background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:12px}
.grid>*{display:flex;align-items:center;justify-content:center;min-height:46px;border-top:1px solid var(--line);min-width:0}
.grid>.g-top{border-top:0}
.g-h{flex-direction:column;gap:3px;min-height:60px;line-height:1;width:100%}
.g-h .n{font:700 21px var(--f-num)}
.g-h .w{font-size:12px;font-weight:700;color:var(--sub)}
.g-h.sel{background:var(--hon);color:var(--hon-ink)}
.g-h.sel .w{color:var(--hon-ink);opacity:.7}
.g-c.sel,.g-f.sel{background:var(--raise)}
.g-n{justify-content:flex-start!important;padding:0 6px 0 12px;font-size:13.5px;font-weight:700;gap:6px;white-space:nowrap;overflow:hidden}
.g-n .part{font:700 12px var(--f-num);color:var(--sub);letter-spacing:.04em;min-width:28px}
.g-n.lab{font-size:12.5px;color:var(--sub)}
.g-f{font:700 18px var(--f-num);color:var(--sub)}
.g-f.sel{color:var(--ink)}
.waitbox{display:flex;align-items:center;gap:10px;margin-top:12px;background:var(--surface);border:1.5px dashed var(--kari-line);border-radius:14px;padding:10px 12px;font-size:14px;font-weight:700}
.waitbox>div{flex:1;min-width:0}
.waitbox b{display:block;font-size:12.5px;color:var(--sub)}
.waitbox small{display:block;font-size:12.5px;font-weight:500;color:var(--sub);margin-top:2px}
.pick{margin-top:16px}
.pick .hint{margin-top:8px}
.inl{display:inline-flex;align-items:center;gap:2px;font-weight:700;text-decoration:underline;text-underline-offset:3px;padding:12px 0;margin:-12px 0}
.inl .ic{width:16px;height:16px}

.dates{display:flex;flex-direction:column;gap:8px}
.dl-row{display:flex;gap:8px}
.dl-row input{flex:1}
.xbtn{width:48px;height:48px;flex:none;border:1px solid var(--line-2);border-radius:12px;background:transparent;display:grid;place-items:center;color:var(--sub)}
.chip.add{margin-top:8px;display:inline-flex;align-items:center;gap:4px;border-style:dashed}
.chip.add .ic{width:16px;height:16px}
.f .lab .opt{font-weight:500;margin-left:8px}

/* メンバーが ○△× を押す所: 押す前は 3 つとも灰・押した物は白の塗り */
.ask{background:var(--surface);border:1.5px solid var(--ink);border-radius:18px;padding:14px;animation:fadeup .3s ease}
.ask-h b{display:block;font-size:16px}
.ask-h span{font-size:13px;color:var(--sub)}
.ask-rows{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.ask-row{display:grid;grid-template-columns:58px minmax(0,1fr);gap:10px;align-items:center}
.ask-row .date .n{font-size:22px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.seg button{height:48px;border:1px solid var(--line-2);border-radius:12px;display:grid;place-items:center;background:transparent}
.seg button .mkv{width:22px;height:22px;stroke:var(--sub);stroke-width:2.4}
.seg button[aria-pressed="true"]{background:var(--hon);border-color:var(--hon)}
.seg button[aria-pressed="true"] .mkv{stroke:var(--hon-ink);stroke-width:2.9}
.ask .btn.wide{margin-top:14px}
.ask-mine{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700}
.ask-sent{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:13px;font-weight:700;color:var(--ink)}
.ask-sent .link{margin:0 0 0 auto}

/* ---------- 白い札（大事な所・森さん「黒すぎるから大事な部分は白背景に」） ----------
   案 1（この作業ファイル）: 見る物（月のカレンダー・知らせ）と、まだ決まっていない物・今あなたが答える物だけを白い札に。
     白 = 新着の帯・下から出る窓・カレンダー・知らせ・日程調整中・仮押さえ・決めてください・○△× の札・候補日・開いている表・まだの人・仮押さえの詳しい画面の札
     黒のまま = 本確定・外れ・決めた予定の記録・メンバー・設定・予定を作る・入口
   案 2（写し BandMaster_デザイン作業_案2.html）: この { } と同じ中身の決まりを、ほかの札にも足す（下の白い札の決まりの後ろ）。
   白い札の中では、色の役目の変数を白い地用（--w-…）に置き換えるだけ。部品の CSS はそのまま（点線・塗り・取り消し線・○△× の形の決まりも同じ）。 */
.banner,.sheet,.cal,.msgs,.notes,.pc,.hold,.mgc,.ask,.row.is-kari,.row.is-cand,.mine-row.is-kari,.grid:has(button.g-h),.waitbox,.scroll:has(.st.lg.kari) :is(.kv,.m:not(.ng)){
  /*white-scope:begin*/
  color-scheme:light;
  --surface:var(--w-surface); --raise:var(--w-raise); --sheet:var(--w-surface); --app:var(--w-surface);
  --line:var(--w-line); --line-2:var(--w-line-2);
  --ink:var(--w-ink); --sub:var(--w-sub); --dim:var(--w-dim); --on-ink:var(--w-surface);
  --accent-ink:var(--w-accent-ink); --accent-bg:var(--w-accent-bg);
  --kari:var(--w-ink); --kari-bg:transparent; --kari-line:var(--w-kari-line);
  --hon:var(--w-ink); --hon-ink:var(--w-surface); --off:var(--w-sub); --off-line:var(--w-sub);
  --go:var(--w-ink); --maybe:var(--w-maybe); --no:var(--w-no); --none:var(--w-none);
  color:var(--ink);
  /*white-scope:end*/
}
/* 案 2: 中身の札を全部白に（地・下のメニュー・外れた予定・○△× の押す前のボタン・チップは黒のまま）。案 1 の白い札と同じ中身 */
.row:not(.is-off),.mine-row:not(:has(.is-off)),.done-list,.kv,.m:not(.ng),.sum,.telbox,.empty,.mrow,.srow,.grid,.f input,.f select,.who{
  color-scheme:light;
  --surface:var(--w-surface); --raise:var(--w-raise); --sheet:var(--w-surface); --app:var(--w-surface);
  --line:var(--w-line); --line-2:var(--w-line-2);
  --ink:var(--w-ink); --sub:var(--w-sub); --dim:var(--w-dim); --on-ink:var(--w-surface);
  --accent-ink:var(--w-accent-ink); --accent-bg:var(--w-accent-bg);
  --kari:var(--w-ink); --kari-bg:transparent; --kari-line:var(--w-kari-line);
  --hon:var(--w-ink); --hon-ink:var(--w-surface); --off:var(--w-sub); --off-line:var(--w-sub);
  --go:var(--w-ink); --maybe:var(--w-maybe); --no:var(--w-no); --none:var(--w-none);
  color:var(--ink);
}

/* マウスの時だけ、押せる物に軽い手応え（指の端末では出さない） */
@media (hover:hover){
  button.row:hover,.pc-top:hover,button.mrow:hover,.g-h:not(.sel):hover{background:var(--raise)}
  .btn.ghost:hover,.btn.danger:hover,.chip:not(.on):hover,.xbtn:hover,.seg button:not([aria-pressed="true"]):hover{border-color:var(--sub)}
  .btn.primary:not(:disabled):hover,.fab:hover{filter:brightness(1.1)}
}
.f input::placeholder{color:var(--dim)}

/* ---------- responsive ---------- */
@media (min-width:2200px){ .page{zoom:1.25} }
@media (max-width:1679px){
  .page{grid-template-columns:minmax(0,1fr);gap:28px}
  .intro{position:static;max-width:none;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 40px;align-items:center}
  .intro .brand{grid-column:1}
  .intro h1{grid-column:1;font-size:26px}
  .intro .flow{grid-column:2;grid-row:1 / span 2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .flow li{grid-template-columns:1fr;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px}
  .intro .try{grid-column:1 / span 2}
  .intro .intro-foot{grid-column:1 / span 2}
  .devs{grid-template-columns:repeat(3,minmax(0,380px));gap:24px}
}
@media (max-width:1179px){
  .page{grid-template-columns:minmax(0,1fr) 380px;gap:32px}
  .intro{display:flex;position:sticky;top:32px;align-items:stretch}
  .intro .brand{align-self:flex-start}
  .intro .flow{display:flex}
  .flow li{grid-template-columns:88px 1fr;background:none;border:0;padding:0}
  .devs{display:flex;flex-direction:column;gap:14px;align-items:center}
  .dev:not(.is-active){display:none}
  .dev-label{display:none}
  .roles{display:flex;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:4px;gap:4px}
  .roles .wm{display:none}
  .roles button{flex:1;height:44px;border-radius:10px;font-size:14px;font-weight:700;color:var(--sub);position:relative;display:flex;align-items:center;justify-content:center;text-align:center}
  .roles button[aria-selected="true"]{background:var(--hon);color:var(--hon-ink)}
  .roles .rdot{position:absolute;top:7px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--accent-ink)}
}
@media (max-width:719px){
  body{height:100%;display:flex;flex-direction:column}
  .page{flex:1;min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0}
  .intro{display:none}
  .devs{flex:1;min-height:0;gap:0;align-items:stretch}
  .roles{border-radius:0;border-width:0 0 1px;padding-block:6px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));align-items:center}
  .roles button{height:44px;font-size:14px}
  .dev{flex:1;min-height:0;align-items:stretch}
  .phone{flex:1;min-height:0;height:auto;max-width:none;border-radius:0;padding:0;background:none;box-shadow:none}
  .screen{border-radius:0}
  .island,.sbar{display:none}
  .scroll{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .tabs{padding-bottom:max(10px,env(safe-area-inset-bottom,0px))}
  .fab{bottom:calc(80px + env(safe-area-inset-bottom,0px));right:max(16px,env(safe-area-inset-right,0px))}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .lock .l-time{font-size:66px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}