/* Mconnectボード：現場のホワイトボードに付箋とマグネット */
:root{
  color-scheme:light;
  --ground:#E9ECEA;
  --board:#FBFCFB;
  --grid:rgba(40,70,90,.06);
  --frame-a:#C9CFD2;
  --frame-b:#9EA6AB;
  --ink:#1D2A33;
  --ink-2:#5B6870;
  --line:#D6DCDD;
  --accent:#1F5A87;
  --accent-ink:#FFFFFF;
  --warn:#B4531A;
  --late:#D62D20;
  --soon:#E8890C;
  --good:#2E7D4F;
  --help:#8E3B9E;
  --tape:rgba(214,196,150,.82);
  --tape-ink:#3E3624;
  --sheet:#FFFFFF;
  --chip-bg:rgba(255,255,255,.7);
  --scrim:rgba(20,30,36,.38);
  --note-ink:#2A2A22;
  --n-yellow:#FFE98A;
  --n-pink:#FFC9D4;
  --n-blue:#C6E2FA;
  --n-green:#CDEBC0;
  --n-orange:#FFD3A8;
  --shadow:0 1px 1px rgba(0,0,0,.08),0 4px 10px rgba(20,40,50,.10);
  --sans:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic UI","Meiryo",system-ui,sans-serif;
  --hand:"Klee One","Hiragino Maru Gothic ProN","Yu Gothic","Meiryo",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --ground:#111618;
    --board:#1B2225;
    --grid:rgba(255,255,255,.035);
    --frame-a:#3A4449;
    --frame-b:#2A3236;
    --ink:#E6ECEE;
    --ink-2:#9AA8AE;
    --line:#334046;
    --accent:#6FB0E6;
    --accent-ink:#0E1D29;
    --warn:#F0A06A;
    --late:#FF6B5E;
    --soon:#F5A742;
    --good:#7CC796;
    --help:#C88AD6;
    --tape:rgba(190,172,128,.55);
    --tape-ink:#F3EBD6;
    --sheet:#1F272A;
    --chip-bg:rgba(255,255,255,.06);
    --scrim:rgba(0,0,0,.55);
    --n-yellow:#EBD877;
    --n-pink:#EDB4C0;
    --n-blue:#AFCDE6;
    --n-green:#B6D6A9;
    --n-orange:#EBBE93;
    --shadow:0 1px 1px rgba(0,0,0,.3),0 6px 14px rgba(0,0,0,.35);
  }
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.6;
  padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
button{-webkit-tap-highlight-color:transparent}
.app{max-width:1400px;margin:0 auto;padding:20px 16px 40px;display:flex;flex-direction:column;gap:16px}

/* 入口 */
.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.gate-card{width:100%;max-width:400px;background:var(--sheet);border-radius:18px;padding:28px 22px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow)}
.gate-card h1{margin:0;font-size:21px}
.gate-card p{margin:0;color:var(--ink-2)}
.who-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.who-btn{font:inherit;font-weight:700;font-size:16px;color:var(--ink);background:var(--board);border:1px solid var(--line);border-radius:14px;padding:16px 10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px}
.who-btn .dot{width:18px;height:18px;border-radius:50%;box-shadow:inset -2px -3px 0 rgba(0,0,0,.22)}

/* 上 */
.top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.top h1{margin:0;font-size:22px;font-weight:700;letter-spacing:.02em;text-wrap:balance}
.when{margin:2px 0 0;color:var(--ink-2);font-size:13px;font-variant-numeric:tabular-nums}
.top-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.me{font:inherit;font-size:13px;color:var(--ink-2);background:none;border:1px solid var(--line);border-radius:999px;padding:7px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.me .dot{width:12px;height:12px;border-radius:50%}
.add{font:inherit;font-weight:700;font-size:15px;border:0;border-radius:999px;padding:10px 20px;background:var(--accent);color:var(--accent-ink);cursor:pointer}
:is(.add,.btn,.note,.tab,.peer-head,.me,.who-btn):focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.notice{margin:0;font-size:13px;color:var(--ink-2);background:var(--board);border:1px dashed var(--line);border-radius:10px;padding:8px 12px}

/* ボードの切り替え */
.tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:thin}
.tab{flex:none;display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:14px;font-weight:500;color:var(--ink);background:var(--chip-bg);border:1px solid var(--line);border-radius:999px;padding:6px 14px;cursor:pointer;white-space:nowrap}
.tab .dot{width:12px;height:12px;border-radius:50%}
.tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--ground);font-weight:700}

/* みんなの今週 */
.peers{display:flex;flex-direction:column;gap:8px}
.peers h2,.review h2,.summary h2{margin:0;font-size:13px;font-weight:700;color:var(--ink-2);letter-spacing:.06em}
.peer-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;padding-bottom:4px}
.peer{background:var(--board);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.peer-head{display:flex;align-items:center;gap:7px;font:inherit;font-weight:700;font-size:13px;color:var(--ink);background:none;border:0;padding:0;cursor:pointer;text-align:left}
.peer-head .dot{width:12px;height:12px;border-radius:50%}
.peer-head .num{margin-left:auto;font-weight:500;color:var(--ink-2);font-variant-numeric:tabular-nums}
.peer ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.peer li{font-family:var(--hand);font-weight:600;font-size:14px;line-height:1.45;color:var(--note-ink);background:var(--n-yellow);padding:4px 8px;border-radius:2px 2px 6px 2px;overflow-wrap:anywhere}
.peer li[data-c="pink"]{background:var(--n-pink)}
.peer li[data-c="blue"]{background:var(--n-blue)}
.peer li[data-c="green"]{background:var(--n-green)}
.peer li[data-c="orange"]{background:var(--n-orange)}
.peer .none{font-size:12px;color:var(--ink-2)}

/* 今週の振り返り */
.review{display:flex;flex-direction:column;gap:10px;background:var(--board);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.review-row{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap}
.review-form{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;border-top:1px solid var(--line);padding-top:10px}
.review-form .actions{grid-column:1/-1}
@media (max-width:560px){.review-form{grid-template-columns:1fr}}
.last-review{margin:0;font-size:13px;color:var(--ink-2);border-top:1px dashed var(--line);padding-top:8px}
.last-review b{color:var(--ink);font-weight:700}
.review .stat{display:flex;align-items:baseline;gap:6px;font-variant-numeric:tabular-nums}
.review .stat b{font-size:22px;line-height:1}
.review .stat span{color:var(--ink-2);font-size:12px}
.weeks{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-end}
.wk{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.wk i{display:block;width:22px;height:26px;border-radius:4px;background:var(--line);position:relative;overflow:hidden}
.wk i::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--h,0%);background:var(--good)}
.review .grow{flex:1}
.review .hint{font-size:12px;color:var(--ink-2)}
.review.friday{border-color:var(--accent)}

/* 現場のホワイトボード */
.board{
  background-color:var(--board);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:28px 28px;
  border:7px solid var(--frame-a);
  border-bottom-color:var(--frame-b);border-right-color:var(--frame-b);
  border-radius:6px;
  padding:20px 16px 28px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:22px 18px;
  min-height:360px;
}
.zone{display:flex;flex-direction:column;gap:14px;min-width:0;border-radius:8px;padding:4px 4px 12px;transition:background .15s}
.zone.over{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.zone-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tape{display:inline-block;background:var(--tape);color:var(--tape-ink);font-weight:700;font-size:14px;letter-spacing:.06em;padding:3px 12px 2px;transform:rotate(-1.2deg);clip-path:polygon(2% 0,98% 4%,100% 96%,0 100%)}
.count{font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.count.over{color:var(--warn);font-weight:700}
.notes{display:flex;flex-direction:column;gap:14px}
.empty{font-size:12px;color:var(--ink-2);border:1px dashed var(--line);border-radius:6px;padding:14px 10px;text-align:center}

/* 付箋 */
.note{
  position:relative;background:var(--n-yellow);color:var(--note-ink);
  padding:18px 14px 10px;border-radius:2px 2px 10px 2px;box-shadow:var(--shadow);
  font-family:var(--hand);font-size:16px;line-height:1.55;
  cursor:pointer;text-align:left;border:0;width:100%;
  transform:rotate(var(--tilt,0deg));transition:transform .15s,box-shadow .15s;
  display:flex;flex-direction:column;gap:8px;
}
.note:hover{transform:rotate(0deg) translateY(-2px)}
.note[data-c="pink"]{background:var(--n-pink)}
.note[data-c="blue"]{background:var(--n-blue)}
.note[data-c="green"]{background:var(--n-green)}
.note[data-c="orange"]{background:var(--n-orange)}
.magnet{position:absolute;top:-7px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--mag,#C0392B);box-shadow:inset -2px -3px 0 rgba(0,0,0,.22),0 2px 3px rgba(0,0,0,.25)}
.note[data-due="late"] .magnet,.note[data-due="soon"] .magnet{width:20px;height:20px;margin-left:-10px;top:-9px}
.note[data-due="late"] .magnet{background:var(--late)}
.note[data-due="soon"] .magnet{background:var(--soon)}
.note-text{white-space:pre-wrap;overflow-wrap:anywhere;font-weight:600}
.note-foot{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-family:var(--sans);font-size:11px;color:rgba(42,42,34,.72)}
.who{display:inline-flex;align-items:center;gap:4px}
.who .dot{width:9px;height:9px;border-radius:50%}
.chip{border:1px solid rgba(42,42,34,.28);border-radius:4px;padding:0 5px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.chip.late{background:#D62D20;border-color:#D62D20;color:#fff;font-weight:700}
.chip.soon{background:#E8890C;border-color:#E8890C;color:#fff;font-weight:700}
.chip.carry{border-style:dashed}
.zone[data-z="done"] .note{opacity:.62;filter:saturate(.5)}
.zone[data-z="done"] .note-text{text-decoration:line-through;text-decoration-color:rgba(42,42,34,.45)}

/* 付箋の印（相談・担当・目標） */
.help-flag{align-self:flex-start;font-family:var(--sans);font-size:11px;font-weight:700;color:#fff;background:#8E3B9E;border-radius:4px;padding:1px 7px;letter-spacing:.04em}
.chip.owner{display:inline-flex;align-items:center;gap:4px;font-weight:700;background:rgba(255,255,255,.55)}
.chip.owner .dot{width:9px;height:9px;border-radius:50%}
.chip.goal{background:rgba(255,255,255,.45)}
.chip.carry.many{border-color:#B4531A;color:#B4531A;font-weight:700}
.goal-prog{display:flex;flex-direction:column;gap:4px;font-family:var(--sans);font-size:11px;color:rgba(42,42,34,.75)}
.goal-prog i{display:block;height:6px;border-radius:3px;background:rgba(42,42,34,.15);overflow:hidden;position:relative}
.goal-prog i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w,0%);background:#2E7D4F}
.note.compact{transform:none;max-width:320px}
.peer li small{font-family:var(--sans);font-size:10px;font-weight:700;opacity:.7}
.peer li em{font-family:var(--sans);font-style:normal;font-size:10px;font-weight:700;color:#8E3B9E}

/* 気にかけること */
.attention{background:var(--board);border:1px solid var(--line);border-left:4px solid var(--help);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.attention h2,.meet h2{margin:0;font-size:13px;font-weight:700;color:var(--ink-2);letter-spacing:.06em}
.att-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.att-item{width:100%;display:flex;align-items:center;gap:8px;font:inherit;color:var(--ink);background:none;border:0;border-radius:8px;padding:6px 6px;cursor:pointer;text-align:left}
.att-item:hover{background:var(--chip-bg)}
.att-item:focus-visible{outline:2px solid var(--accent)}
.att-text{flex:1;min-width:0;overflow-wrap:anywhere}
.att-who{font-size:12px;color:var(--ink-2);white-space:nowrap}
.tag{flex:none;font-size:11px;font-weight:700;color:#fff;border-radius:4px;padding:1px 7px;white-space:nowrap}
.tag.help{background:#8E3B9E}
.tag.late{background:#D62D20}
.tag.soon{background:#E8890C}
.muted{color:var(--ink-2);font-size:13px;margin:0}
.link{color:var(--accent);font-size:14px}
a.me{text-decoration:none}

/* 週の会議 */
.meet{display:flex;flex-direction:column;gap:14px}
.meet-intro{display:flex;flex-direction:column;gap:6px}
.meet-intro h2{font-size:17px;color:var(--ink);letter-spacing:.02em}
.meet-intro p{margin:0;color:var(--ink-2);max-width:70ch}
.meet-step{background:var(--board);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.meet-head{display:flex;align-items:center;gap:10px}
.meet-head h3{margin:0;font-size:16px}
.meet-num{flex:none;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--ground);display:grid;place-items:center;font-weight:700;font-size:14px}
.meet-time{margin-left:auto;font-size:12px;color:var(--ink-2);border:1px solid var(--line);border-radius:999px;padding:1px 10px;white-space:nowrap}
.meet-how{margin:0;font-size:13px;color:var(--ink-2)}
.meet-notes{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;padding-top:8px}
.meet-people{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.meet-person{border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.mp-block{display:flex;flex-direction:column;gap:2px}
.mp-label{font-size:11px;font-weight:700;color:var(--ink-2);letter-spacing:.06em}
.mp-block ul{margin:0;padding-left:1.1em}
.mp-block li{font-size:13px}
.tab.meet-tab{border-style:dashed}
.tab.meet-tab[aria-selected="true"]{border-style:solid}

/* 今日の日付 */
.today{margin:4px 0 0;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.today[data-dow="0"]{color:var(--late)}
.today[data-dow="6"]{color:var(--accent)}

/* シートの見出しと使い方 */
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.help-link{flex:none;font-size:13px;font-weight:700;color:var(--accent);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.help-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* リンク・場所（必要なときだけ開く） */
.more{align-self:flex-start;font:inherit;font-size:13px;font-weight:700;color:var(--accent);background:none;border:1px dashed var(--line);border-radius:999px;padding:6px 14px;cursor:pointer}
.more:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.more-box{display:flex;flex-direction:column;gap:12px;border:1px solid var(--line);border-radius:12px;padding:12px}
.more-box .field label>span{font-size:12px;font-weight:700;color:var(--ink-2);letter-spacing:.04em}
.place-row{display:flex;gap:8px;align-items:center}
.place-row input{flex:1;min-width:0}
.place-row .btn{flex:none;white-space:nowrap}
input[type="url"]{font:inherit;font-size:16px;color:var(--ink);background:var(--board);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%}
a.chip{color:inherit;text-decoration:none;background:rgba(255,255,255,.55);font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.chip:hover{text-decoration:underline}
a.chip:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
a.chip.link::before{content:"↗ "}
a.chip.place::before{content:"◎ "}

/* チェック */
.check{display:flex;align-items:flex-start;gap:10px;font-size:13px;cursor:pointer;padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.check input{width:20px;height:20px;margin:0;accent-color:var(--help);flex:none}
.check b{color:var(--help)}

/* 月のまとめ */
.summary{background:var(--board);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.summary-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.summary-text{margin:0;white-space:pre-wrap;line-height:1.8;max-width:70ch}
.summary .muted{color:var(--ink-2);font-size:13px;margin:0}
.summary details{border-top:1px solid var(--line);padding-top:8px}
.summary summary{cursor:pointer;color:var(--ink-2);font-size:13px}

/* シート */
.scrim{position:fixed;inset:0;background:var(--scrim);display:flex;align-items:flex-end;justify-content:center;z-index:10;padding:16px}
@media (min-width:640px){.scrim{align-items:center}}
.sheet{width:100%;max-width:500px;background:var(--sheet);color:var(--ink);border-radius:18px;padding:20px 18px calc(18px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:16px;box-shadow:0 20px 50px rgba(0,0,0,.25);max-height:calc(100% - 8px);overflow:auto}
.sheet h2{margin:0;font-size:17px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>span,.field legend{font-size:12px;font-weight:700;color:var(--ink-2);letter-spacing:.04em}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:420px){.two{grid-template-columns:1fr}}
fieldset{border:0;margin:0;padding:0;min-width:0}
textarea,input[type="text"],input[type="password"],input[type="date"],select{font:inherit;font-size:16px;color:var(--ink);background:var(--board);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%}
textarea{font-family:var(--hand);font-size:17px;min-height:96px;resize:vertical}
textarea:focus,input:focus,select:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;inset:0}
.seg span{display:block;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer}
.seg input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.seg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.colors{display:flex;gap:10px}
.colors label{position:relative}
.colors input{position:absolute;opacity:0;inset:0}
.colors span{display:block;width:32px;height:32px;border-radius:50%;border:2px solid transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);cursor:pointer}
.colors input:checked+span{border-color:var(--ink)}
.colors input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.actions .grow{flex:1}
.btn{font:inherit;font-weight:700;border-radius:999px;padding:9px 18px;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--ink)}
.btn:disabled{opacity:.5;cursor:default}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.wide{width:100%;padding:12px}
.btn.small{padding:6px 14px;font-size:13px}
.btn.danger{color:var(--warn);border-color:transparent;padding-inline:8px}
.btn.armed{background:var(--warn);border-color:var(--warn);color:#fff}
.err{margin:0;color:var(--warn);font-size:13px}

/* ============================================================
   第3弾：スマホは iPhone の標準アプリの感覚（2026-10-03）
   下のタブバー／右からスライド・‹で戻る／付箋のスワイプ／下からせり上がる入力
   ============================================================ */
.view{display:flex;flex-direction:column;gap:16px}
.titles{min-width:0}
.back{font:inherit;font-size:17px;color:var(--accent);background:none;border:0;padding:4px 0;cursor:pointer;display:inline-flex;align-items:center;gap:2px}
.back span{font-size:28px;line-height:1;margin-top:-3px}
.avatar{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.15)}
.me{padding:4px 12px 4px 4px}
.add-plus{font-weight:700}
.add-label{margin-left:2px}
.peer-head .chev{display:none;color:var(--ink-2);font-size:20px;line-height:1;margin-left:4px}
.peer-head .tag{font-size:10px}

/* 付箋のスワイプ */
.swipe{position:relative;border-radius:4px 4px 12px 4px}
.swipe-bg{position:absolute;inset:0;border-radius:inherit;display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-weight:700;font-size:15px;color:#fff;opacity:0;transition:opacity .12s}
.swipe.dragging .swipe-bg{opacity:1}
.swipe.right .swipe-bg{background:var(--good)}
.swipe.is-done.right .swipe-bg{background:var(--accent)}
.swipe.left .swipe-bg{background:#7A858B;justify-content:flex-end}
.swipe .sw-left{display:none}
.swipe.left .sw-right{display:none}
.swipe.left .sw-left{display:block}
.swipe .swipe-bg span{transform:scale(.85);transition:transform .15s}
.swipe.armed .swipe-bg span{transform:scale(1.08)}
.swipe.dragging .note{transition:none;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.note{touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* 入力シート（iPhone のシート） */
.sheet{padding:0;gap:0;overflow:hidden;max-height:calc(100% - 8px)}
.sheet-grip{padding:6px 16px 10px;touch-action:none;border-bottom:1px solid var(--line)}
.grabber{display:block;width:38px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 8px}
.sheet-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.sheet-head h2{margin:0;font-size:16px;text-align:center}
.text-btn{font:inherit;font-size:16px;color:var(--accent);background:none;border:0;padding:6px 0;cursor:pointer;text-decoration:none;justify-self:start}
.text-btn.strong{justify-self:end;font-weight:700}
.text-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.sheet-body{flex:1;min-height:0;overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:14px;overscroll-behavior:contain}
.sheet-body textarea{border-radius:12px;min-height:84px}
.sheet-foot{display:flex;gap:10px;align-items:center;padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--sheet)}
.sheet-foot .big{flex:1}
.btn.big{padding:13px 18px;font-size:16px;border-radius:14px}

/* 行の並び（設定アプリのような） */
.group{background:var(--board);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.row{display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 12px;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row>span,.row>label{flex:none;min-width:5em;font-size:15px;color:var(--ink)}
.row select,.row input[type="text"],.row input[type="url"],.row input[type="date"]{flex:1;min-width:0;border:0;background:transparent;padding:8px 0;text-align:right;font-size:16px;border-radius:0}
.row select{text-align-last:right;-webkit-appearance:none;appearance:none;color:var(--accent)}
.row input:focus,.row select:focus{outline:none}
.row:focus-within{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.mini{flex:none;font:inherit;font-size:12px;font-weight:700;color:var(--accent);background:none;border:1px solid var(--line);border-radius:999px;padding:5px 10px;cursor:pointer}
/* iPhone のスイッチ */
.switch{-webkit-appearance:none;appearance:none;margin:0 0 0 auto;width:51px;height:31px;border-radius:999px;background:var(--line);position:relative;cursor:pointer;transition:background .2s;flex:none}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.25);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.switch:checked{background:var(--help)}
.switch:checked::after{transform:translateX(20px)}
.switch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#helpField>span{color:var(--help);font-weight:700}

/* 「移す」の一覧（アクションシート） */
.scrim.act{align-items:flex-end;z-index:20}
.actsheet{width:100%;max-width:440px;display:flex;flex-direction:column;gap:8px;padding-bottom:env(safe-area-inset-bottom,0px)}
.act-group{background:var(--sheet);border-radius:14px;overflow:hidden}
.act-title{margin:0;padding:12px 16px;font-size:13px;color:var(--ink-2);text-align:center;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.act-btn,.act-cancel{display:block;width:100%;font:inherit;font-size:17px;color:var(--accent);background:var(--sheet);border:0;border-top:1px solid var(--line);padding:15px 12px;cursor:pointer}
.act-btn:first-child{border-top:0}
.act-btn.good{color:var(--good);font-weight:700}
.act-btn.help{color:var(--help)}
.act-cancel{border-radius:14px;border:0;font-weight:700}
.act-btn:active,.act-cancel:active{background:var(--chip-bg)}

/* 下のタブバー（スマホだけ） */
.tabbar{display:none}

@media (max-width:719px){
  .app{padding:8px 16px calc(96px + env(safe-area-inset-bottom,0px));gap:14px}
  .tabs{display:none}
  .top{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"back . right" "titles titles titles";align-items:center;gap:2px 8px}
  .back{grid-area:back}
  .titles{grid-area:titles}
  .top-right{grid-area:right;margin-left:0}
  .top h1{font-size:32px;line-height:1.2;letter-spacing:.01em}
  .today{font-size:15px;margin-top:2px}
  .me{padding:0;border:0;background:none}
  .me-name{display:none}
  .avatar{width:34px;height:34px;font-size:15px}
  .add{width:36px;height:36px;padding:0;border-radius:50%;display:grid;place-items:center;font-size:20px}
  .add-label{display:none}

  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:5;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));
    background:color-mix(in srgb,var(--ground) 82%,transparent);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:1px solid var(--line)}
  .tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font:inherit;font-size:10px;font-weight:500;color:var(--ink-2);background:none;border:0;padding:4px 0;cursor:pointer}
  .tabbar svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .tabbar button.on{color:var(--accent)}
  .tabbar button.on svg{stroke-width:2.2}
  .tabbar button:active svg{transform:scale(.9)}

  /* みんな＝縦の一覧。タップでその人のボードへ */
  .peer-row{grid-template-columns:1fr;overflow:visible}
  .peer.tappable{cursor:pointer}
  .peer.tappable:active{transform:scale(.99)}
  .peer-head{font-size:15px}
  .peer-head .chev{display:inline}

  /* ボード：空の欄は細く */
  .board{padding:14px 10px 18px;gap:16px;border-width:5px}
  .zone{gap:10px;padding:2px 2px 6px}
  .zone.is-empty .empty{padding:8px 10px;font-size:11px}

  .review{padding:10px 12px}
  .review .weeks{display:none}

  /* シートは下からせり上がる */
  .scrim{padding:0;align-items:flex-end}
  .sheet{max-width:none;border-radius:14px 14px 0 0;max-height:94%}
  .actsheet{padding:0 8px calc(8px + env(safe-area-inset-bottom,0px))}
}
@media (min-width:720px){
  .back{display:none!important}
  .sheet{max-height:min(860px,calc(100% - 32px))}
  .grabber{display:none}
}

@media (prefers-reduced-motion:reduce){.note,.zone,.switch,.switch::after,.swipe-bg{transition:none}.note:hover{transform:rotate(var(--tilt,0deg))}}

/* ============================================================
   設定（右上の丸から）：iPhone の設定アプリのような並び
   ============================================================ */
.settings .sheet-body{gap:6px;background:var(--ground)}
.sgroup-title{margin:14px 4px 4px;font-size:12px;font-weight:700;color:var(--ink-2);letter-spacing:.06em}
.sgroup-title:first-child{margin-top:2px}
.sgroup{background:var(--sheet);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.srow{width:100%;display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 14px;font:inherit;font-size:16px;color:var(--ink);background:none;border:0;border-top:1px solid var(--line);text-align:left;text-decoration:none;cursor:pointer}
.sgroup>.srow:first-child{border-top:0}
button.srow:active,a.srow:active{background:var(--chip-bg)}
.srow:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.srow:disabled{cursor:default;opacity:.6}
.srow-main{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srow-sub{flex:none;font-size:14px;color:var(--ink-2)}
.srow-label{flex:none;width:5em;font-size:16px}
.srow input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:16px;color:var(--ink);padding:6px 0;text-align:right}
.srow input:focus{outline:none}
label.srow{cursor:text}
label.srow:focus-within{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.srow .chev{color:var(--ink-2);font-size:20px;line-height:1}
.srow .avatar{width:30px;height:30px;font-size:14px;flex:none}
.avatar.off{background:var(--line)!important;color:var(--ink-2)}
.srow.addrow{color:var(--accent);font-weight:700}
.srow.addrow .plus{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 14%,transparent);font-size:18px}
.srow.danger{justify-content:center;color:var(--warn);font-weight:700}
.srow.danger.armed{background:var(--warn);color:#fff}
.sgroup-foot{margin:6px 6px 4px;font-size:12px;color:var(--ink-2);line-height:1.6}
.sgroup-foot.center{text-align:center;margin-top:18px}
.mcolors{display:flex;flex-wrap:wrap;gap:12px;padding:6px 4px}
.mcolor{width:40px;height:40px;border-radius:50%;border:3px solid transparent;box-shadow:inset -2px -3px 0 rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.08);cursor:pointer}
.mcolor[aria-pressed="true"]{border-color:var(--sheet);box-shadow:0 0 0 3px var(--ink),inset -2px -3px 0 rgba(0,0,0,.2)}
.mcolor:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.settings .err{margin:6px 4px}
/* シートの中身は縮めず、入りきらなければスクロール */
.sheet-body>*{flex-shrink:0}

/* ============================================================
   公開版：紹介ページ・チームを作る・招待から入る・招待リンクを送る
   ============================================================ */
.landing{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px 16px 24px;gap:28px;
  background-color:var(--board);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:28px 28px}
.lp{width:100%;max-width:440px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.lp-icon{width:84px;height:84px;border-radius:20px;box-shadow:var(--shadow)}
.lp h1{margin:4px 0 0;font-size:34px;letter-spacing:.02em}
.lp-lead{margin:0;font-size:17px;color:var(--ink-2)}
.lp-points{list-style:none;margin:8px 0 6px;padding:0;display:flex;flex-direction:column;gap:12px;text-align:left;width:100%}
.lp-points li{position:relative;font-family:var(--hand);font-weight:600;font-size:16px;line-height:1.55;color:var(--note-ink);background:var(--n-yellow);
  padding:16px 14px 12px;border-radius:2px 2px 10px 2px;box-shadow:var(--shadow)}
.lp-points li:nth-child(1){transform:rotate(-.6deg)}
.lp-points li:nth-child(2){background:var(--n-blue);transform:rotate(.5deg)}
.lp-points li:nth-child(3){background:var(--n-green);transform:rotate(-.3deg)}
.lp-points li::before{content:"";position:absolute;top:-7px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:#C0392B;box-shadow:inset -2px -3px 0 rgba(0,0,0,.22),0 2px 3px rgba(0,0,0,.25)}
.lp-points li:nth-child(2)::before{background:#1F5A87}
.lp-points li:nth-child(3)::before{background:#2E7D4F}
.lp-points b{font-weight:600;background:linear-gradient(transparent 62%,rgba(255,255,255,.7) 62%)}
.lp-note{margin:0;font-size:13px;color:var(--ink-2);line-height:1.7}
.lp-note a{color:var(--accent)}
.lp-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;font-size:13px;color:var(--ink-2)}
.lp-foot a{color:var(--ink-2)}
.gate-card .sgroup{width:100%}
.gate-card .sgroup-title{margin:4px 2px 0}
.gate-card .text-btn{align-self:flex-start;padding:0}
.join-eyebrow{margin:0;font-size:13px;font-weight:700;color:var(--accent);letter-spacing:.06em}
.join-form{display:flex;flex-direction:column;gap:12px}
.share .sheet-body{gap:14px}
.share-lead{margin:0;font-size:15px;line-height:1.7}
#shareUrl{font:inherit;font-size:14px;color:var(--ink);background:var(--board);border:1px solid var(--line);border-radius:10px;padding:12px;width:100%;font-variant-numeric:tabular-nums}
.share-btns{display:flex;flex-direction:column;gap:10px}
.share-btns .btn{width:100%;text-align:center;text-decoration:none}
.btn.line{background:#06C755;border-color:#06C755;color:#fff}
.srow.warn{color:var(--warn);font-weight:700}