/* パタパタ ― 反転フラップ式スケジュール表示
   盤は黒地・等質な10行。操作は帯の3つだけ（＋手で足す / なおす / ⚙）。
   フォームは白地の別画面（盤の暗い見た目を持ち込まない）。 */
:root{
  --board:#0b0b0b; --ink:#f4f4f4; --mute:#9a9a9a; --amber:#f0b429; --cyan:#67d3e8;
  --line:#262626;
  --pink:#1b1d21; --pmute:#4a4f57; --pline:#c9ccd1;
  --mono:"SF Mono","Menlo","Roboto Mono",monospace;
  --jp:"Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif;
  --cw:22px; --ch:32px; --cf:18px;   /* ドラム1枚: 幅/高さ/文字。JSが向きに応じて差し替える */
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* hidden を確実に効かせる。display を持つクラス(.btn.wide の block、.axis の flex 等)が
   [hidden] の既定 display:none に打ち勝ってしまい、隠したはずの要素が出ていた
   （2026-08-21 実測: 新規追加なのに「この予定を消す」が出る／設定で同じラベルが2回並ぶ） */
[hidden]{display:none !important}
html,body{height:100%}
body{margin:0;background:var(--board);color:var(--ink);font-family:var(--jp);
  overscroll-behavior:none;-webkit-user-select:none;user-select:none}

/* ============ 盤 ============ */
.board{min-height:100%;display:flex;flex-direction:column;
  padding:max(10px,env(safe-area-inset-top)) 12px max(10px,env(safe-area-inset-bottom));}
.bh{display:flex;align-items:center;gap:12px;padding:2px 2px 10px;flex-wrap:wrap}
.bh-l{display:flex;align-items:baseline;gap:12px;min-width:0}
.date{color:var(--mute);font-family:var(--mono);font-size:15px;letter-spacing:.06em;white-space:nowrap}
.allday{color:var(--cyan);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.now{color:var(--ink);font-family:var(--mono);font-size:22px;font-weight:700;letter-spacing:.08em;
  margin-left:auto}
.btn{font-family:var(--jp);font-size:16px;font-weight:700;color:#0b0b0b;background:var(--amber);
  border:0;border-radius:9px;min-height:48px;padding:0 18px;cursor:pointer}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px #4a4a4a}
.btn.wide{width:100%;display:block;margin-top:12px}
.btn.add{min-height:44px;padding:0 14px;font-size:15px;flex:none}
.bh{flex-wrap:nowrap}
body.narrow .date{font-size:14px}
body.narrow .btn.add{padding:0 11px;font-size:14px}

/* 行 */
.grid{flex:1;display:flex;flex-direction:column;justify-content:center;gap:var(--rg,3px);
  border-top:1px solid var(--line);padding-top:9px;overflow:hidden}
.row{display:flex;align-items:center;gap:0}
.row .mk{width:18px;flex:none;color:var(--amber);font-size:15px;text-align:center;line-height:1}
.col{display:flex;flex:none}
.colgap{width:var(--cw);flex:none}   /* 列の間はドラム1枚分だけ */
.heads{display:flex;align-items:center;gap:0;color:var(--mute);
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;padding-bottom:6px}
.heads .mk{width:18px;flex:none}
.heads .h{flex:none;white-space:nowrap}

/* ドラム1枚（上下2分割＋回る羽根2枚） */
.flap{position:relative;flex:none;width:var(--cw);height:var(--ch);margin-right:2px;
  perspective:150px}
.half{position:absolute;left:0;right:0;height:50%;overflow:hidden;background:#1e1e1e;
  box-shadow:inset 0 0 0 1px #333}
.half>b{position:absolute;left:0;right:0;height:var(--ch);line-height:var(--ch);text-align:center;
  font-family:var(--mono);font-weight:400;font-size:var(--cf);color:var(--ink)}
.h-top{top:0;border-radius:2px 2px 0 0;border-bottom:1px solid #000;
  background:linear-gradient(180deg,#2e2e2e 0%,#1e1e1e 100%)}
.h-top>b{top:0}
.h-bot{bottom:0;border-radius:0 0 2px 2px;background:linear-gradient(180deg,#080808 0%,#191919 100%)}
.h-bot>b{top:calc(var(--ch) / -2)}
.fl{position:absolute;left:0;right:0;height:50%;overflow:hidden;backface-visibility:hidden;
  z-index:3;display:none;box-shadow:inset 0 0 0 1px #333}
.fl>b{position:absolute;left:0;right:0;height:var(--ch);line-height:var(--ch);text-align:center;
  font-family:var(--mono);font-weight:400;font-size:var(--cf);color:var(--ink)}
.fl-top{top:0;transform-origin:bottom center;border-radius:2px 2px 0 0;border-bottom:1px solid #000;
  background:linear-gradient(180deg,#2e2e2e 0%,#1e1e1e 100%)}
.fl-top>b{top:0}
.fl-bot{bottom:0;transform-origin:top center;border-radius:0 0 2px 2px;
  background:linear-gradient(180deg,#080808 0%,#191919 100%)}
.fl-bot>b{top:calc(var(--ch) / -2)}
.amber .half>b,.amber .fl>b{color:var(--amber)}
.cyan  .half>b,.cyan  .fl>b{color:var(--cyan)}

/* 帯（ここだけ通常テキスト。分単位で変わる値はドラムに載せない） */
.strip{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:4px 10px;
  border-top:1px solid var(--line);margin-top:9px;padding-top:10px}
.strip-main{display:flex;align-items:baseline;gap:9px;min-width:0;flex:1}
.strip .mk{color:var(--amber);font-size:15px;flex:none}
.s-time{color:var(--amber);font-family:var(--mono);font-size:16px;font-weight:700;flex:none}
.s-name{color:var(--ink);font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-place{color:var(--mute);font-size:14px;white-space:nowrap;flex:none}
body.narrow .s-place{display:none}
body.narrow .strip{grid-template-columns:1fr auto}
body.narrow .mini{grid-row:1;grid-column:2}
body.narrow .strip-r{grid-row:2;grid-column:1/-1;text-align:right}
.strip-r{color:var(--ink);font-size:18px;font-weight:700;white-space:nowrap;flex:none}
.mini{flex:none;min-width:48px;min-height:44px;border:0;border-radius:9px;background:transparent;
  box-shadow:inset 0 0 0 2px #3d3d3d;color:var(--ink);font-size:18px;cursor:pointer}

/* 見せ方パネル（盤の下半分に重なる。盤は隠れない＝選んだ結果がその場で見える） */
.ov{position:fixed;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));z-index:10;
  background:rgba(16,16,16,.97);border:1px solid #3a3a3a;border-radius:12px;
  padding:13px 14px;max-height:72vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.ovh{display:flex;align-items:center;margin-bottom:10px}
.ovh h3{font-size:16px;margin:0;color:var(--ink)}
.ovx{margin-left:auto;width:44px;height:44px;border:0;border-radius:9px;background:transparent;
  box-shadow:inset 0 0 0 2px #3d3d3d;color:var(--ink);font-size:15px;cursor:pointer}
.axis{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.axl{font-size:13px;color:var(--mute);width:118px;flex:none;text-align:right}
.seg{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.sg{font-family:var(--jp);font-size:14px;min-height:44px;padding:0 13px;border:0;border-radius:8px;
  background:transparent;box-shadow:inset 0 0 0 2px #3d3d3d;color:var(--ink);cursor:pointer;
  /* ボタンの中では改行させない。3つ並んだ選択肢のうち1つだけ2行になると
     そこだけ背が高くなり、押す対象としての粒が揃わなくなる。
     1行で入らないならラベルを短くする（折り返して逃げない）。
     入り切らない場合は .seg 側の flex-wrap でボタンごと次の行へ送られる */
  white-space:nowrap}
.sg.on{background:var(--amber);color:#0b0b0b;font-weight:700;box-shadow:none}
/* .sg は暗いパネル用。明るいフォーム(.sheet)の中では白背景に白文字になって読めなくなる
   （2026-08-21 実測: 文字 rgb(244,244,244) / 背景 rgb(242,243,245) ＝ コントラスト約1:1）。
   背景が変わる場所で使い回すときは、必ずその背景に合わせた文字色を用意する */
.sheet .sg{color:var(--pink);background:#fff;box-shadow:inset 0 0 0 2px #a9adb4}
.sheet .sg.on{background:var(--pink);color:#fff;box-shadow:none}
.try{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.try .sub{color:var(--mute);font-size:13px}
/* よく入れるもの・時刻の相対チップ・5分ステッパー（予定入力を短くするための部品） */
.chips .chip.rc{border-color:var(--pink);font-weight:700}
.chips .chip.rc.add{border-style:dashed;font-weight:400;color:var(--pmute)}
.stepper{display:flex;gap:8px;align-items:stretch}
.stepbtn{width:56px;flex:none;border:2px solid #a9adb4;background:#fff;border-radius:9px;
  font-size:22px;line-height:1;color:var(--pink);cursor:pointer;font-family:var(--jp)}
.input.time{flex:1;min-width:0;text-align:center;font-family:var(--mono);font-size:18px}
/* 折りたたみの見出し。暗いパネル用と明るいフォーム用で色が違う */
.more{display:block;width:100%;margin-top:12px;padding:12px 0;border:0;background:transparent;
  color:var(--pmute);font-family:var(--jp);font-size:14px;cursor:pointer;border-top:1px solid #dfe2e6}
.more.dark{color:var(--mute);border-top-color:#2b2b2b;margin-top:10px;padding:11px 0;font-size:13px}
.ginput{width:100%;min-height:44px;border:0;border-radius:8px;padding:10px 12px;font-size:14px;
  background:#1c1c1c;color:var(--ink);box-shadow:inset 0 0 0 2px #3d3d3d;font-family:var(--mono)}
.gtxt{font-size:14px;color:var(--mute);align-self:center}
.gtxt.on{color:var(--cyan)}
.gtxt.err{color:var(--amber)}
.ovnote{color:var(--mute);font-size:13px;line-height:1.7;margin:12px 0 0}
@media(max-width:520px){ .axl{width:100%;text-align:left;margin-bottom:-2px} }

/* 盤に重ねる案内（予定なし・取り込めない） */
.notice{position:fixed;inset:auto 12px max(12px,env(safe-area-inset-bottom));z-index:5;
  background:#141414;border:1px solid #333;border-radius:12px;padding:16px}
.notice-t{font-size:17px;font-weight:700;margin-bottom:6px}
.notice-s{font-size:15px;color:var(--mute);line-height:1.7;margin-bottom:14px}
.notice-b{display:flex;gap:10px;flex-wrap:wrap}

/* ============ フォーム（白地・別画面） ============ */
.sheet{position:fixed;inset:0;z-index:20;background:#f2f3f5;color:var(--pink);
  overflow-y:auto;-webkit-overflow-scrolling:touch;font-family:var(--jp)}
.sheet-in{max-width:520px;margin:0 auto;
  padding:max(14px,env(safe-area-inset-top)) 16px max(28px,env(safe-area-inset-bottom))}
.sheet-h{position:sticky;top:0;background:#f2f3f5;display:flex;align-items:center;
  justify-content:space-between;padding:8px 0 14px;z-index:2}
.sheet-h h2{font-size:19px;margin:0}
.close{width:48px;height:48px;border:2px solid var(--pline);background:#fff;border-radius:10px;
  font-size:19px;color:var(--pink);cursor:pointer}
.field{margin-bottom:16px}
.field label{display:block;font-size:15px;font-weight:700;margin-bottom:6px}
.hint{font-size:13px;color:var(--pmute);font-weight:400;margin-left:4px}
.input{width:100%;min-height:48px;border:1px solid #a9adb4;border-radius:9px;padding:11px 12px;
  font-size:16px;background:#fff;color:var(--pink);font-family:var(--jp)}
.counter{font-size:13px;color:var(--pmute);text-align:right;margin-top:4px}
.counter.over{color:#b3261e;font-weight:700}
.prev-l{font-size:13px;color:var(--pmute);margin-bottom:6px}
.preview{background:var(--board);border-radius:8px;padding:12px;margin-bottom:18px;
  display:flex;align-items:center;gap:10px;overflow-x:auto}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{min-height:48px;padding:11px 15px;border:2px solid #a9adb4;border-radius:9px;background:#fff;
  font-size:15px;color:var(--pink);font-family:var(--jp);cursor:pointer}
.chip.on{background:var(--pink);border-color:var(--pink);color:#fff;font-weight:700}
.sheet .btn{color:#0b0b0b}
.sheet .btn.ghost{color:var(--pink);box-shadow:inset 0 0 0 2px #a9adb4;background:#fff}
.setg{font-size:14px;font-weight:700;color:var(--pmute);border-bottom:1px solid #dfe2e6;
  padding-bottom:6px;margin:20px 0 12px}
.setr{margin-bottom:15px}
.setl{font-size:15px;font-weight:700;margin-bottom:7px}
.setr .chip{min-height:44px;padding:10px 13px;font-size:14px}
.setnote{font-size:13px;color:var(--pmute);line-height:1.7;margin:10px 0 0}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:15}