:root{
  --tanaka:#2563eb; --tanaka-bg:#e8f0fe;
  --father:#f97316; --father-bg:#fff1e6;
  --empty:#eef1f5; --empty-tx:#8a94a6;
  --ink:#1f2430; --sub:#6b7280; --line:#e6e9ef; --card:#ffffff; --bg:#f4f6f9;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif; background:var(--bg); color:var(--ink); line-height:1.5; padding:16px; display:flex; justify-content:center}
.app{width:100%; max-width:460px}
.card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; margin-bottom:14px; box-shadow:0 1px 2px rgba(20,30,60,.04)}
[hidden]{display:none !important}

.title{font-size:20px; font-weight:800; margin:2px 0 12px}
.who-switch{display:flex; gap:8px; background:#f0f2f6; padding:5px; border-radius:12px}
.who-switch button{flex:1; border:0; padding:11px 8px; border-radius:9px; font-size:15px; font-weight:700; background:transparent; color:var(--sub); cursor:pointer; transition:.15s}
.who-switch button .dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:middle}
.who-switch button[data-w="tanaka"] .dot{background:var(--tanaka)}
.who-switch button[data-w="father"] .dot{background:var(--father)}
.who-switch button.on{background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(20,30,60,.12)}
.who-hint{font-size:12px; color:var(--sub); margin-top:8px; text-align:center}

.now{display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:14px; font-weight:800}
.now .big{font-size:17px}
.now .time{font-size:12.5px; font-weight:700; opacity:.85; display:block; margin-top:2px}
.now.free{background:#e9f9ef; color:#127a3e}
.now.tanaka{background:var(--tanaka-bg); color:var(--tanaka)}
.now.father{background:var(--father-bg); color:#c2530a}
.now .emoji{font-size:26px}

.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--sub); margin-top:12px}
.legend span{display:flex; align-items:center; gap:6px}
.chip{width:14px; height:14px; border-radius:5px; display:inline-block}
.chip.t{background:var(--tanaka)} .chip.f{background:var(--father)} .chip.e{background:var(--empty); border:1px solid var(--line)}

.grid-head{display:grid; grid-template-columns:64px 1fr 1fr 1fr; gap:8px; padding:0 2px 8px; font-size:12px; color:var(--sub); font-weight:700; text-align:center}
.grid-head .d{text-align:left}
.row{display:grid; grid-template-columns:64px 1fr 1fr 1fr; gap:8px; margin-bottom:8px; align-items:stretch}
.daycell{display:flex; flex-direction:column; justify-content:center; font-size:13px; font-weight:700}
.daycell .wd{font-size:11px; color:var(--sub); font-weight:600}
.daycell.sun{color:#e5484d} .daycell.sat{color:#2f6feb}
.today-badge{display:inline-block; font-size:10px; font-weight:800; color:#fff; background:#111827; border-radius:6px; padding:1px 5px; margin-top:3px; width:max-content}
.row.today{background:#f7faff; border-radius:12px; padding:4px; margin:0 -4px 8px; box-shadow:inset 0 0 0 1.5px #d7e6ff}
.row.today .daycell{padding-left:6px}

.slot{border:0; border-radius:11px; padding:8px 3px; min-height:58px; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; font-size:13px; font-weight:700; transition:.12s; position:relative}
.slot .lbl{font-size:10px; font-weight:600; opacity:.7}
.slot .name{font-size:13.5px}
.slot .until{font-size:11px; font-weight:800; margin-top:1px; letter-spacing:-.2px}
.slot .memo{font-size:10px; font-weight:600; opacity:.85}
.slot.empty{background:var(--empty); color:var(--empty-tx)}
.slot.empty:active{transform:scale(.97)}
.slot.t{background:var(--tanaka); color:#fff}
.slot.f{background:var(--father); color:#fff}
.slot .lock{position:absolute; top:4px; right:6px; font-size:11px; opacity:.8}

.foot{display:flex; flex-direction:column; gap:10px}
.del{border:1px solid #f0c8c8; background:#fff5f5; color:#c0392b; font-weight:700; font-size:14px; padding:12px; border-radius:12px; cursor:pointer}
.note{font-size:11.5px; color:var(--sub); text-align:center; line-height:1.6}

/* 合言葉ゲート */
.gate-wrap{position:fixed; inset:0; background:var(--bg); display:flex; align-items:center; justify-content:center; padding:20px; z-index:40}
.gate{width:100%; max-width:360px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:0 4px 20px rgba(20,30,60,.08)}
.gate h1{font-size:19px; font-weight:800; margin:0 0 6px}
.gate p{font-size:12.5px; color:var(--sub); margin:0 0 16px; line-height:1.6}
.gate input{width:100%; border:1.5px solid var(--line); border-radius:12px; padding:13px 14px; font-size:16px; font-weight:700; color:var(--ink)}
.gate button{width:100%; margin-top:12px; border:0; background:var(--tanaka); color:#fff; font-weight:800; font-size:15px; padding:13px; border-radius:12px; cursor:pointer}
.gate .err{font-size:12.5px; color:#c0392b; font-weight:700; margin-top:10px; min-height:1em; text-align:center}

.sheet-wrap{position:fixed; inset:0; background:rgba(15,20,35,.4); display:flex; align-items:flex-end; justify-content:center; z-index:20; opacity:0; pointer-events:none; transition:.2s}
.sheet-wrap.show{opacity:1; pointer-events:auto}
.sheet{width:100%; max-width:460px; background:#fff; border-radius:20px 20px 0 0; padding:18px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow:0 -8px 30px rgba(15,20,35,.18); transform:translateY(30px); transition:.2s}
.sheet-wrap.show .sheet{transform:translateY(0)}
.sheet-title{font-size:17px; font-weight:800}
.sheet-sub{font-size:12.5px; color:var(--sub); margin:14px 0 8px; font-weight:700}
.time-row{display:flex; gap:10px}
.time-field{flex:1}
.time-field .cap{font-size:12px; color:var(--sub); font-weight:700; margin-bottom:5px}
.time-field select{width:100%; -webkit-appearance:none; appearance:none; border:1.5px solid var(--line); border-radius:12px; background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='2'/></svg>") no-repeat right 14px center; padding:12px 34px 12px 14px; font-size:16px; font-weight:700; color:var(--ink)}
.memo-field{margin-top:12px}
.memo-field .cap{font-size:12px; color:var(--sub); font-weight:700; margin-bottom:5px}
.memo-field input{width:100%; border:1.5px solid var(--line); border-radius:12px; padding:12px 14px; font-size:15px; color:var(--ink)}
.sheet-actions{display:flex; gap:10px; margin-top:18px}
.sheet-actions .primary{flex:1; border:0; background:var(--tanaka); color:#fff; font-weight:800; font-size:15px; padding:13px; border-radius:12px; cursor:pointer}
.sheet-actions .primary.father{background:var(--father)}
.sheet-actions .primary:disabled{opacity:.5}
.sheet-actions .ghost{border:0; background:#f0f2f6; color:var(--sub); font-weight:700; font-size:15px; padding:13px 18px; border-radius:12px; cursor:pointer}
.sheet-release{width:100%; margin-top:10px; border:1px solid #f0c8c8; background:#fff5f5; color:#c0392b; font-weight:700; font-size:14px; padding:12px; border-radius:12px; cursor:pointer}

#toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); opacity:0; background:#1f2430; color:#fff; font-size:13.5px; font-weight:600; padding:11px 18px; border-radius:999px; transition:.22s; pointer-events:none; max-width:88%; text-align:center; z-index:30}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0)}