/* ============================================================
   Daily Scheduler — styles
   紙のプランナーの質感を保ちながら、画面としての精度を上げる。
   ・色は「暖かいグレー1系統 ＋ 差し色1色」に統一
   ・線は3段階（外枠 / 罫線 / 補助線）だけ
   ・触る場所は必ず 28px 以上（タッチ端末では 34px 以上）
   ============================================================ */

:root{
  /* 寸法 */
  --rh: 10.2mm;               /* スケジュール側の1時間あたりの高さ */
  --rh-item: 8.4mm;           /* TO DO・ルーティンの1行の高さ */

  /* 紙と地の色 */
  --paper: #ffffff;
  --bg:    #e8e6e0;
  --bg-2:  #dedbd3;

  /* 文字 */
  --ink:   #21211e;           /* 本文 */
  --ink-2: #55544e;           /* 副文 */
  --ink-3: #8a877f;           /* 補助・ラベル */
  --ink-4: #b4b1a8;           /* 目印・プレースホルダ */

  /* 線 */
  --frame:     #26261f;       /* 外枠 */
  --frame-2:   #c6c3b9;       /* 表の中の太めの区切り */
  --rule:      #dcd9d1;       /* 罫線 */
  --rule-soft: #efede7;       /* 30分の補助線 */

  /* 面 */
  --head-bg: #f5f4ef;
  --tint:    #faf9f5;         /* ホバーなどの淡い面 */
  --tint-2:  #f2f0ea;

  /* 差し色 */
  --accent:      #2c6a58;
  --accent-deep: #23543f;
  --accent-soft: #e8f0ec;
  --danger:      #a3453c;

  /* 動き */
  --ease: cubic-bezier(.22,.9,.28,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: .16s;
  --t-base: .24s;

  /* 効果 */
  --ring: 0 0 0 2px #fff, 0 0 0 3.5px rgba(44,106,88,.55);
  --shadow-1: 0 1px 2px rgba(35,33,28,.06);
  --shadow-2: 0 4px 14px -4px rgba(35,33,28,.16), 0 1px 3px rgba(35,33,28,.07);
  --shadow-3: 0 18px 44px -14px rgba(35,33,28,.30), 0 3px 10px rgba(35,33,28,.08);
  --shadow: var(--shadow-2);

  --font: "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo",
          "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cap-font: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*{ box-sizing: border-box; }

/* class 側で display を指定していると hidden 属性が効かなくなるので、明示しておく */
[hidden]{ display: none !important; }

html, body{ margin:0; padding:0; }

body{
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: var(--bg);
  background-image: linear-gradient(180deg, var(--bg) 0, var(--bg-2) 100%);
  background-attachment: fixed;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: env(safe-area-inset-bottom);
}

input, textarea, select, button{ font-family: inherit; color: inherit; }
input[type="text"], textarea{ appearance:none; -webkit-appearance:none; border-radius:0; }

/* キーボード操作のときだけ、はっきりした輪郭を出す（文字入力欄は各自の下線を使う） */
:focus{ outline: none; }
button:focus-visible,
select:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="color"]:focus-visible,
input[type="date"]:focus-visible,
.tab:focus-visible,
.cat-chip:focus-visible,
.pal-dot:focus-visible{ outline: none; box-shadow: var(--ring); }
.date-field:focus-within{ box-shadow: var(--ring); }
.focus-input:focus, .item .txt:focus, .lined:focus{ outline: none; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ---------- キャプション（DATE / TO DO などの英字ラベル）---------- */
.cap{
  font-family: var(--cap-font);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--ink-3);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ============================ ツールバー ============================ */
.toolbar{
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  padding-top: calc(9px + env(safe-area-inset-top));
  background: rgba(236,234,228,.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(35,33,28,.10);
  /* overflow を付けると ⋯ のメニューが切り取られてしまうので、
     はみ出す場合は折り返しで逃がす */
  flex-wrap: wrap;
}
.tb-group{ display:flex; align-items:center; gap:6px; min-width:0; }
.tb-spacer{ flex:1; }

.btn{
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px;
  border: 1px solid #d6d3ca;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  padding: 0 13px;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-1);
  transition: background .14s, border-color .14s, box-shadow .14s, color .14s;
}
.btn:hover{ border-color:#b9b6ac; box-shadow: var(--shadow-2); }
.btn:active{ background: var(--tint-2); box-shadow:none; }
.btn.icon{ padding:0 10px; font-size:16px; min-width:36px; }
.btn.primary{
  background: var(--accent); border-color: var(--accent); color:#fff;
}
.btn.primary:hover{ background: var(--accent-deep); border-color: var(--accent-deep); }
.btn.danger{ color: var(--danger); border-color:#e2cdc9; background:#fdf8f7; }
.btn.danger:hover{ border-color:#cfa9a2; }

.menu-wrap{ position: relative; }
.menu{
  position:absolute; right:0; top: calc(100% + 8px);
  min-width: 224px;
  background:#fff; border:1px solid #e0dcd3; border-radius:13px;
  box-shadow: var(--shadow-3); padding:6px; z-index:60;
  animation: menu-in .18s var(--ease-out);
}
@keyframes menu-in{ from{ opacity:0; transform: translateY(-6px) scale(.985);} to{ opacity:1; transform:none; } }
.menu-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; text-align:left; background:none; border:0;
  padding:10px 11px; font-size:13px; border-radius:8px; cursor:pointer;
  color: var(--ink);
}
.menu-item:hover{ background: var(--tint-2); }
.menu-sep{ height:1px; background:#eceae3; margin:5px 4px; }
.menu-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:6px 11px; font-size:13px; color: var(--ink);
}
.zoom-ctl{ display:inline-flex; align-items:center; gap:2px; }
.zbtn{
  width:28px; height:28px; border:1px solid #dedbd2; background:#fdfdfb;
  border-radius:7px; cursor:pointer; font-size:14px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; color: var(--ink-2);
}
.zbtn:hover{ background:#fff; border-color:#c3c0b6; color: var(--ink); }
.zval{
  min-width:44px; text-align:center; font-size:11.5px; color: var(--ink-2);
  font-variant-numeric: tabular-nums; font-family: var(--cap-font);
}
.switch input{ width:16px; height:16px; }
.ver{ font-size:10.5px; color: var(--ink-4); font-family: var(--cap-font); letter-spacing:.04em; }

/* 保存状態の表示 */
.saved{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; color: var(--ink-3); letter-spacing:.04em;
  margin-right:2px; white-space:nowrap;
  transition: color .2s;
}
.saved::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background: var(--ink-4); transition: background .2s;
}
.saved.busy{ color: var(--accent); }
.saved.busy::before{ background: var(--accent); }

/* ---------- ビュー切り替えタブ（セグメント）---------- */
.tabs{
  gap:2px; padding:3px;
  border:1px solid rgba(35,33,28,.10);
  border-radius:11px;
  background:#e0ded6;
  box-shadow: inset 0 1px 2px rgba(35,33,28,.06);
}
.tab{
  border:0; background:transparent; cursor:pointer;
  min-height:28px; padding:0 13px;
  font-size:12.5px; line-height:1; color: var(--ink-2);
  border-radius:8px;
  transition: background .14s, color .14s, box-shadow .14s;
}
.tab:hover{ background: rgba(255,255,255,.6); color: var(--ink); }
.tab.sel{
  background:#fff; color: var(--ink); font-weight:600;
  box-shadow: var(--shadow-1);
}

/* ============================ 用紙 ============================ */
/* ---------- 用紙は A4 縦（210×297mm）で固定 ---------- */
.sheet{
  background: var(--paper);
  width: 210mm;
  height: 297mm;
  margin: 20px auto 48px;
  padding: 13mm 11mm 12mm;
  border-radius: 3px;
  box-shadow:
    0 0 0 1px rgba(35,33,28,.05),
    0 2px 4px rgba(35,33,28,.05),
    var(--shadow-3);
  display: flex;
  flex-direction: column;
  zoom: var(--zoom, 1);
}

/* ---------- ヘッダー（DATE / TASK STATUS）---------- */
.sheet-head{
  display: grid;
  grid-template-columns: minmax(0, 53%) 1fr;
  gap: 8mm;
  align-items: flex-end;
  margin-bottom: 6mm;
}
.head-date{ display:flex; align-items:flex-end; gap:13px; }
.head-date .cap{ padding-bottom:8px; }
.date-line{
  position: relative;
  flex:1;
  display:flex; align-items:flex-end; gap:10px;
  border-bottom: 1.5px solid var(--frame);
  padding: 0 2px 5px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* DATE 欄の中の「‹ 今日 ›」と期間えらび */
.date-nav{
  margin-left:auto;
  display:flex; align-items:center; gap:5px;
  padding-bottom:1px;
}
.date-nav .btn.nav{
  min-height:22px; padding:0 8px;
  font-size:10.5px; font-weight:600; line-height:1;
  border-radius:6px; box-shadow:none;
  background:#fdfdfb; border-color:#dedbd2; color: var(--ink-2);
}
.date-nav .btn.nav:hover{ background:#fff; border-color:#c3c0b6; color: var(--ink); }
.date-field{
  position:relative;
  display:inline-flex; align-items:center;
  min-height:22px;
  border:1px solid #dedbd2; background:#fdfdfb;
  border-radius:6px; padding:0 8px;
  font-size:10.5px; font-weight:600; letter-spacing:0;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  cursor:pointer;
  transition: background .14s, border-color .14s, color .14s;
}
.date-field:hover{ background:#fff; border-color:#c3c0b6; color: var(--ink); }
.date-caret{ font-size:8px; color: var(--ink-4); margin-left:7px; }
.hdr-pick{
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:0; cursor:pointer;
  border:0; padding:0; margin:0; background:none;
}
/* 日付入力は、枠のどこを押してもカレンダーが開くように、
   クリックは枠側（.date-field）で受け取る。
   （ブラウザによっては入力欄の小さなカレンダー印を押さないと開かないため） */
input.hdr-pick{ pointer-events:none; }
.hdr-pick[hidden]{ display:none; }

.head-status{ min-width:0; }
.head-status .cap{ display:block; margin-bottom: 8px; }
.status-line{
  display:flex; align-items:center; gap:14px;
  border-bottom: 1px solid var(--frame-2);
  padding: 0 2px 5px;
}
.stat{ display:flex; align-items:baseline; gap:5px; white-space:nowrap; }
.stat b{
  font-size:20px; font-weight:600; line-height:1;
  font-variant-numeric: tabular-nums; letter-spacing:-.01em;
}
.stat .stat-l{ font-size:9.5px; color: var(--ink-3); letter-spacing:.08em; }
.stat.done b{ color: var(--accent); }
.stat-bar{
  flex:1; min-width:30px; height:6px; border-radius:99px;
  background:#e9e7e0; overflow:hidden;
  box-shadow: inset 0 1px 1.5px rgba(35,33,28,.07);
}
.stat-bar i{
  display:block; height:100%; width:0; border-radius:99px;
  background: linear-gradient(90deg, var(--accent) 0, #3d8570 100%);
  transition: width .45s var(--ease-out);
}
.stat-rate{
  font-size:10.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; white-space:nowrap;
}

/* ---- 指でめくるページ送り ---- */
.pager{
  position: fixed; inset: 0; z-index: 35;
  overflow: hidden; pointer-events: none;
}
.pager-track{
  position: absolute;
  display: flex; align-items: flex-start;
  will-change: transform;
}
.pager .pg{ margin: 0 !important; flex: 0 0 auto; }
.pager-track.snap{ transition: transform .3s cubic-bezier(.22,.9,.28,1); }
body.paging #sheet{ visibility: hidden; }
body.paging{ overscroll-behavior-x: none; }

/* ---- ページ送り・ビュー切り替えの動き ----
   紙そのものは動かさず、中身だけを滑らせる（影がちらつかない） */
@keyframes slide-next{ from{ opacity:0; transform: translate3d(26px,0,0); } to{ opacity:1; transform:none; } }
@keyframes slide-prev{ from{ opacity:0; transform: translate3d(-26px,0,0); } to{ opacity:1; transform:none; } }
@keyframes view-rise{ from{ opacity:0; transform: translate3d(0,10px,0) scale(.995); } to{ opacity:1; transform:none; } }

.sheet.sw-next .view, .sheet.sw-next .sheet-head{ animation: slide-next var(--t-base) var(--ease-out) both; }
.sheet.sw-prev .view, .sheet.sw-prev .sheet-head{ animation: slide-prev var(--t-base) var(--ease-out) both; }
.sheet.sw-next .sheet-head, .sheet.sw-prev .sheet-head{ animation-duration: .2s; }
.sheet.view-in .view{ animation: view-rise .28s var(--ease-out) both; }

/* 押した瞬間の手応え（指でもマウスでも） */
.btn:active, .tab:active, .cat-chip:active, .dw:active, .zbtn:active, .mi-btn:active{
  transform: scale(.96);
}
.btn, .tab, .cat-chip, .dw, .zbtn, .mi-btn{ transition:
  background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
  box-shadow var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
  transform .1s var(--ease); }

/* チェックを入れた瞬間 */
@keyframes chk-pop{ 0%{ transform: scale(.82);} 60%{ transform: scale(1.12);} 100%{ transform: scale(1);} }
.chk:checked{ animation: chk-pop .24s var(--ease-out); }

/* 予定ブロックが増えたとき */
@keyframes block-in{ from{ opacity:0; transform: scale(.97); } to{ opacity:1; transform:none; } }
.block.fresh{ animation: block-in .22s var(--ease-out); }

/* メモの行が増えたとき */
@keyframes row-in{ from{ opacity:0; transform: translate3d(0,-6px,0); } to{ opacity:1; transform:none; } }
.memo-item.fresh{ animation: row-in .2s var(--ease-out); }

/* ============================ ビュー ============================ */
.view{ display:none; flex:1; min-height:0; flex-direction:column; }
body.v-day   #viewDay,
body.v-week  #viewWeek,
body.v-month #viewMonth,
body.v-year  #viewYear,
body.v-memo  #viewMemo{ display:flex; }
body:not(.v-day) .head-status{ visibility:hidden; }
/* メモは日付と関係ないので、日付の操作は隠す */
body.v-memo .date-nav{ visibility:hidden; }

/* ---- クイックメモ ---- */
.memo-bar{
  display:flex; align-items:center; gap:10px;
  margin-bottom: 3.5mm;
}
.memo-bar .tb-spacer{ flex:1; }
.memo-bar .btn{ min-height:30px; font-size:12px; padding:0 12px; }
.memo-count{
  font-size:10.5px; color: var(--ink-3); white-space:nowrap;
  font-variant-numeric: tabular-nums; letter-spacing:.03em;
}
.memo-chk{
  display:flex; align-items:center; gap:6px;
  font-size:11px; color: var(--ink-2); white-space:nowrap; cursor:pointer;
  padding:4px 2px;
}
.memo-chk input{ width:14px; height:14px; accent-color: var(--accent); }

.memo-list{
  flex:1; min-height:0;
  border:1.5px solid var(--frame);
  overflow-y:auto; overflow-x:hidden;
  scrollbar-width: thin;
  scrollbar-color: #d3d0c7 transparent;
}
.memo-list{
  /* 空いている部分にも罫線を通して、ノートらしく見せる */
  background-image: linear-gradient(to bottom,
      transparent 0, transparent calc(var(--rh-item) - 1px),
      var(--rule) calc(var(--rh-item) - 1px), var(--rule) var(--rh-item));
  background-size: 100% var(--rh-item);
  background-attachment: local;
}
.memo-list::-webkit-scrollbar{ width:9px; }
.memo-list::-webkit-scrollbar-thumb{ background:#d8d5cc; border-radius:99px; border:3px solid #fff; }
.memo-item{ height: var(--rh-item); }
.memo-item .txt{ flex:1; }
.mi-time{
  flex:0 0 auto;
  font-size:9.5px; color: var(--ink-4);
  font-variant-numeric: tabular-nums;
  white-space:nowrap; letter-spacing:.03em;
  margin-left:6px;
}
.memo-item.done .mi-time{ color:#cbc8bf; }

.mi-btn{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px;
  border:0; background:none; cursor:pointer;
  font-size:13px; line-height:1; color: var(--ink-4);
  border-radius:6px;
  opacity:0; transition: opacity .14s, color .14s, background .14s;
}
.memo-item:hover .mi-btn, .memo-item:focus-within .mi-btn{ opacity:1; }
.mi-btn:hover{ background: var(--tint-2); color: var(--ink-2); }
.mi-btn.del:hover{ color: var(--danger); background:#faf1f0; }
.mi-btn.send:hover{ color: var(--accent); background: var(--accent-soft); }
@media (hover: none){
  .mi-btn{ opacity:.6; width:30px; height:30px; }
}

.memo-empty{
  padding: 16px 14px;
  font-size:11px; color: var(--ink-3); line-height:1.6;
}
body.v-memo .memo-list .memo-item.done .txt{ color: var(--ink-3); text-decoration: line-through; }

/* ---- 期間の一覧（週・月・年で共通）---- */
.log-grid{
  flex:1; min-height:0;
  display:grid;
  border:1.5px solid var(--frame);
}
.log-grid.c1{ grid-template-columns: 1fr; }
.log-grid.c2{ grid-template-columns: 1fr 1fr; }
.log-grid.r3{ grid-template-rows: repeat(3, 1fr); }
.log-grid.r6{ grid-template-rows: repeat(6, 1fr); }

.log-box{
  position: relative;
  display:flex; flex-direction:column; min-height:0;
  padding:5px 9px 6px;
  border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.log-grid.c1 .log-box{ border-right:0; }
.log-grid.c2 .log-box:nth-child(2n){ border-right:0; }
.log-box:last-child{ border-bottom:0; }
.log-grid.c2 .log-box:nth-last-child(-n+2){ border-bottom:0; }

.log-head{
  display:flex; align-items:baseline; gap:7px;
  margin-bottom:3px; min-height:14px;
}
.log-title{
  font-size:11.5px; font-weight:600; color: var(--ink-2);
  letter-spacing:.02em; font-variant-numeric: tabular-nums;
}
.log-sub{ font-size:9.5px; color: var(--ink-3); font-weight:600; }
/* 今の期間は、面ではなく細い印で示す（紙面が濁らない） */
.log-box.now{ background: #fcfbf7; }
.log-box.now::before{
  content:""; position:absolute; left:0; top:0; bottom:0;
  width:2.5px; background: var(--accent);
}
.log-box.now .log-title{ color: var(--ink); }

/* ============================ グリッド ============================ */
.grid{
  display: grid;
  grid-template-columns: 62px minmax(0, 0.9fr) minmax(0, 1.7fr) minmax(0, 1.7fr) minmax(0, 1.7fr);
  grid-template-rows: auto auto;
  border: 1.5px solid var(--frame);
}

/* --- 見出し行 --- */
.gh{
  background: var(--head-bg);
  border-bottom: 1.5px solid var(--frame);
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .10em;
  color: var(--ink);
  text-align: center;
}
.gh-sch, .gh-todo, .gh-rt{ text-align:left; }
.gh-todo{ display:flex; align-items:center; justify-content:space-between; gap:6px; }
.gh .btn.tiny{ flex:0 0 auto; }
/* 引き継げるものが残っている日は、ボタンで知らせる */
.btn.tiny.has-carry{
  color: var(--accent); border-color:#b6ccc3; background: var(--accent-soft);
}
.btn.tiny.has-carry:hover{ background:#dcebe4; border-color: var(--accent); }
/* 列を明示的に固定しておく（列を隠しても他がずれないように） */
.gh-time, .col-time{ grid-column: 1; }
.gh-sch            { grid-column: 2 / 4; }   /* スケジュールの見出しは左右2枠ぶん */
.col-sch           { grid-column: 2; }
.col-tsch          { grid-column: 3; }
.gh-todo           { grid-column: 4; }
.gh-rt             { grid-column: 5; }
.right-stack       { grid-column: 4 / 6; grid-row: 2; display:flex; flex-direction:column; min-width:0; }
.gh{ grid-row: 1; }
.col-time, .col-sch, .col-tsch{ grid-row: 2; }

/* TO DO・ルーティンの2列 */
.rs-cols{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); min-width:0; }
.rs-cols .col-todo{ border-right:1px solid var(--rule); }
.rs-cols .col-rt{ border-right:0; }

.gh-time, .gh-sch, .gh-todo{ border-right: 1px solid var(--rule); }
.gh-todo{ border-right: 1.5px solid var(--frame-2); }
.gh-sch{
  border-right: 1.5px solid var(--frame-2);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.gh-sub{ font-size:9px; color: var(--ink-4); letter-spacing:.06em; font-weight:600; }

/* --- 列の共通 --- */
.col{ position: relative; }
.col-time, .col-sch, .col-tsch{ border-right: 1px solid var(--rule); }
.col-tsch{ border-right-width: 1.5px; border-right-color: var(--frame-2); }

/* --- 時刻列 --- */
.col-time{ background:#fcfcfa; }
.t-cell{
  height: var(--rh);
  border-bottom: 1px solid var(--rule);
  display:flex; align-items:center; justify-content:flex-end;
  padding-right: 7px;
  font-size: 10.5px;
  font-weight: 600;
  color: #8b8981;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.t-cell:last-child{ border-bottom:0; }
/* 0 / 6 / 12 / 18 時は濃くして、目で追いやすくする */
.t-cell[data-hour="0"], .t-cell[data-hour="6"],
.t-cell[data-hour="12"], .t-cell[data-hour="18"]{ color: var(--ink-2); }
.t-cell.is-now{ color: var(--danger); font-weight:700; }

/* --- スケジュール列 / 時間指定TODO列 --- */
.col-sch, .col-tsch{ padding: 0; }
.sch-canvas{
  position: relative;
  height: calc(var(--rh) * 24);
  cursor: crosshair;
  touch-action: pan-y;      /* iPadでのページスクロールを殺さない */
  overflow: hidden;
}
/* 罫線（時刻列と同じ組み方にして、線の太さをそろえる） */
.h-lines{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.h-row{ height: var(--rh); border-bottom: 1px solid var(--rule); }
.h-row:last-child{ border-bottom:0; }
.h-row i{ display:block; height:50%; border-bottom: 1px solid var(--rule-soft); }
.sch-hint{
  position:absolute; left:6px; right:6px; bottom:6px;
  font-size:8px; color:#cfccc4; pointer-events:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  letter-spacing:.03em;
  transition: opacity .3s;
}

.block{
  position:absolute;
  z-index: 1;
  min-height: 10px;
  left: 3px; right: 3px;
  border:1px solid var(--b-line, #b9b6ad);
  background: var(--b-fill, #f2f1ec);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.34;
  color: var(--ink);
  overflow: hidden;
  cursor: grab;
  touch-action: none;        /* ブロック自体のドラッグは横取りする */
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 1px 1.5px rgba(35,33,28,.05);
  transition: box-shadow .14s, filter .14s;
}
.block:hover{ box-shadow: 0 2px 8px -2px rgba(35,33,28,.20); filter: brightness(1.02); }
.block:active{ cursor: grabbing; }
.block .b-time{
  display:block;
  line-height: 1.05;
  font-size: 9px;
  font-weight: 600;
  color: #82807a;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  margin-bottom: 1.5px;
}
.block.short{ padding: 1px 7px; font-size:12px; }
/* 予定に貼ったリンク */
/* 予定に貼ったリンクは「押せるもの」と分かる小さなボタンにする */
.b-link{
  display:inline-flex; align-items:center; gap:3px;
  margin-top:2px; max-width:100%;
  padding:1px 5px 1.5px;
  border:1px solid rgba(44,106,88,.35); border-radius:99px;
  background: rgba(255,255,255,.75);
  font-size:9px; line-height:1.35; font-weight:600; color: var(--accent);
  text-decoration: none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  cursor: pointer;
  touch-action: auto;
  transition: background .14s, border-color .14s, color .14s;
}
.b-link:hover{ background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep); }
.b-link-t{ overflow:hidden; text-overflow:ellipsis; }
@media (hover: none){ .b-link{ padding:2px 7px 2.5px; font-size:9.5px; } }
.block.short .b-link{ display:none; }
.block .b-text{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  overflow:hidden;
}
.block.narrow .b-time{ display:none; }
.block.narrow .b-text{ -webkit-line-clamp:4; }
.block.short .b-time{ display:none; }
.block .handle{
  position:absolute; left:0; right:0; height:12px;
  cursor: ns-resize; touch-action:none;
}
.block .handle.top{ top:-2px; }
.block .handle.bottom{ bottom:-2px; }
.block .handle::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  width:26px; height:3px; border-radius:2px; background: var(--b-line, #b9b6ad);
  opacity:0; transition: opacity .14s;
}
.block:hover .handle::after{ opacity:.55; }
.block .handle.top::after{ top:3px; }
.block .handle.bottom::after{ bottom:3px; }
.block.ghost{ opacity:.55; pointer-events:none; border-style:dashed; box-shadow:none; }
.block.dragging{ opacity:.92; box-shadow: 0 8px 22px -6px rgba(35,33,28,.35); z-index:5; }

.now-line{
  position:absolute; left:0; right:0; height:0;
  border-top: 1.5px solid var(--danger);
  z-index: 4; pointer-events:none;
}
.now-line::before{
  content:""; position:absolute; left:-1px; top:-3.5px;
  width:7px; height:7px; border-radius:50%; background: var(--danger);
  box-shadow: 0 0 0 2px rgba(163,69,60,.16);
}
/* 右半分の現在時刻ラインは、線だけ引いて丸は出さない（丸が2つ並ぶため） */
#nowLine2::before{ display:none; }

/* --- TODO列 / ルーティン列（1列・24行）--- */
.item{
  height: var(--rh-item);
  border-bottom: 1px solid var(--rule);
  display:flex; align-items:center; gap:7px;
  padding: 0 7px;
  min-width:0;
  transition: background .14s;
}
.item:last-child{ border-bottom:0; }
.item:hover{ background: var(--tint); }
.item:focus-within{ background:#f8f7f2; }

.chk{
  appearance:none; -webkit-appearance:none;
  flex: 0 0 auto;
  width:13px; height:13px;
  border:1.25px solid #b4b1a8; border-radius:3px;
  background:#fff; cursor:pointer; position:relative;
  transition: background .14s, border-color .14s, box-shadow .14s;
}
.chk:hover{ border-color: var(--accent); }
.item:not(.has-text) .chk{ opacity:.4; transition: opacity .14s; }
.item:hover .chk, .item:focus-within .chk, .item.has-text .chk{ opacity:1; }
.chk:checked{ background: var(--accent); border-color: var(--accent); }
.chk:checked::after{
  content:""; position:absolute; left:4px; top:1px;
  width:3.2px; height:6.5px; border:solid #fff; border-width:0 2px 2px 0;
  transform: rotate(45deg);
}
.item input.txt{
  flex:1; min-width:0;
  border:0; outline:0; background:transparent;
  font-size:11.5px; font-weight:600; padding:3px 5px; color: var(--ink);
  letter-spacing:.01em;
  border-radius:5px;
  transition: background .14s, box-shadow .14s;
}
/* ふだんは何も見せず、カーソルを乗せたときだけ「ここに入力できる」と分かるようにする */
.item input.txt::placeholder{ color: transparent; transition: color .14s; }
.item:hover input.txt:not([readonly])::placeholder{ color: var(--ink-4); }
.item input.txt:focus{ background:#fff; box-shadow: inset 0 -1.5px 0 var(--accent); }
.item input.txt:focus::placeholder{ color:#dedbd3; }
.item input.txt[readonly]{ cursor:default; }

.item.done input.txt{ color: var(--ink-3); text-decoration: line-through; }

/* 行の設定ボタン（時間・繰り返し）。文字が入っている行では常に見えるようにする */
.rep-btn{
  flex:0 0 auto;
  min-width:22px; height:22px; padding:0 2px;
  display:flex; align-items:center; justify-content:center; gap:2px;
  border:0; background:transparent;
  color: var(--ink-4); font-size:13px; line-height:1;
  border-radius:6px; cursor:pointer;
  opacity:0; transition: opacity .14s, color .14s, background .14s;
}
.item.has-text .rep-btn{ opacity:1; }
/* 空の行でも、カーソルを乗せれば設定を開けるようにする（ルーティンの初期入力用）*/
.item:not(.has-text):hover .rep-btn{ opacity:.55; }
/* タッチ端末はホバーがない。空の行にまで ⋯ が並ぶと紙面が重くなるので、
   文字がある行と、いま触っている行にだけ出す。 */
@media (hover: none){
  .item .rep-btn{ min-width:30px; height:30px; }
  .item:not(.has-text) .rep-btn{ opacity:0; }
  .item:not(.has-text):focus-within .rep-btn{ opacity:.6; }
  .item.has-text .rep-btn{ opacity:1; }
}
.rep-btn .m{ display:none; }
.rep-btn .m-dots{ display:inline; letter-spacing:1px; }
.item.timed  .rep-btn .m-time{ display:inline; color: var(--accent); }
.item.repeating .rep-btn .m-rep{ display:inline; color: var(--accent); }
.item.timed  .rep-btn .m-dots,
.item.repeating .rep-btn .m-dots{ display:none; }
.rep-btn:hover{ background: var(--tint-2); color: var(--ink-2); }
.rep-btn:active{ background:#e7e5de; }

/* 曜日が合わずお休みの日のルーティン */
.item.off input.txt{ color: var(--ink-4); }
.item.off .chk{ background: var(--tint-2); border-color:#e2e0d9; }

.col-rt .item input.txt[readonly]{ cursor:default; }
.col-rt.editing .item input.txt{ background:#fbfaf5; border-bottom:1px dashed #ccc9c0; }

/* ============================ 表の中の残りタスク ============================ */
.gfoot{
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0,1fr);
  border-top: 1.5px solid var(--frame-2);
}
.gf-box{
  display:flex; flex-direction:column; min-width:0; min-height:0;
  padding: 4px 7px 5px;
}
.gf-box + .gf-box{ border-left: 1px solid var(--rule); }
.gf-head{
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  margin-bottom: 3px; min-height: 18px; min-width: 0;
}
.gf-head .cap{ min-width:0; overflow:hidden; text-overflow:ellipsis; letter-spacing:.09em; font-size:9.5px; }
.gf-head .btn{ flex:0 0 auto; }
.btn.tiny{
  min-height:20px; padding: 0 9px; font-size: 10px; border-radius: 6px;
  box-shadow:none; background:#fdfdfb; border-color:#dedbd2; color: var(--ink-2);
  font-weight:600;
}
.btn.tiny:hover{ background:#fff; border-color:#c3c0b6; color: var(--ink); }
@media (hover: none){ .btn.tiny{ min-height:26px; padding:0 11px; } }

/* ---- 残りタスクの一覧（押すと横線で消す） ---- */
.gf-btns{ display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; }
.rest-rows{
  overflow-y:auto; overflow-x:hidden;
  scrollbar-width: thin;
}
.rest-row{
  height: 5mm; line-height: 5mm;
  padding: 0 3px;
  font-size:11.5px; font-weight:600; color: var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  cursor:pointer; position:relative;
  border-radius:3px;
  transition: color .16s var(--ease), background .16s var(--ease);
}
.rest-row:hover{ background: var(--tint); }
.rest-row::after{
  content:''; position:absolute; left:3px; right:3px; top:50%;
  height:1.5px; background: currentColor; border-radius:2px;
  transform: scaleX(0); transform-origin: left center; opacity:.75;
  transition: transform .22s var(--ease-out);
}
.rest-row.struck{ color: var(--ink-3); }
.rest-row.struck::after{ transform: scaleX(1); }
@media (hover: none){ .rest-row{ height: 6mm; line-height: 6mm; } }
.rest-empty{ padding:2px 3px; font-size:11px; color: var(--ink-4); line-height:5mm; }

.lined{
  width:100%; flex:1 1 auto; height:100%; min-height:0;
  border:0; outline:0; resize:none;
  font-size:11.5px;
  font-weight:600;
  line-height: 5mm;
  padding: 0 3px;
  color: var(--ink);
  letter-spacing:.01em;
  background-color: transparent;
  background-image: linear-gradient(to bottom,
      transparent 0, transparent calc(5mm - 1px), var(--rule) calc(5mm - 1px), var(--rule) 5mm);
  background-size: 100% 5mm;
  background-attachment: local;
}
.lined::placeholder{ color: var(--ink-4); }
.lined:focus{ background-color:#fdfcf9; }

/* ============================ ポップオーバー ============================ */
.pop-backdrop{ position:fixed; inset:0; z-index:70; }
.pop{
  position: fixed; z-index: 80;
  width: 288px;
  background:#fff; border:1px solid #e0dcd3; border-radius:14px;
  box-shadow: 0 24px 60px -12px rgba(35,33,28,.34), 0 4px 12px rgba(35,33,28,.10);
  padding: 14px;
  animation: menu-in .18s var(--ease-out);
}
.pop-text{
  width:100%; border:1px solid #ddd9d0; border-radius:9px;
  padding:10px 11px; font-size:14px; outline:0;
  transition: border-color .14s, box-shadow .14s;
}
.pop-text:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.url-list{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.url-row{ display:flex; align-items:center; gap:5px; }
.pop-url{ flex:1; min-width:0; font-size:12.5px; }
.pop-url:focus{ border-color: var(--accent); }
.url-open{
  flex:0 0 auto;
  min-height:30px; padding:0 11px;
  border:1px solid #d6d3ca; background:#fff; color: var(--accent);
  border-radius:8px; font-size:12px; font-weight:600; cursor:pointer;
  transition: background .14s, border-color .14s, color .14s;
}
.url-open:hover:not(:disabled){ background: var(--accent-soft); border-color:#b6ccc3; }
.url-open:disabled{ color: var(--ink-4); cursor:default; opacity:.55; }

.url-row .del{
  border:0; background:none; color: var(--ink-4); font-size:15px; cursor:pointer;
  width:28px; height:28px; border-radius:7px; flex:0 0 auto; line-height:1;
}
.url-row .del:hover{ background: var(--tint-2); color: var(--danger); }
.url-add{ margin-top:6px; }
.pop-title{ font-size:13px; font-weight:600; margin-bottom:10px; }
.pop-row{ display:flex; align-items:center; gap:7px; margin-top:10px; }
.pop-row select{
  flex:1; min-width:0; padding:9px 9px; font-size:13px;
  border:1px solid #ddd9d0; border-radius:9px; background:#fbfaf7;
}
.pop-row .tilde{ color: var(--ink-3); font-size:12px; }
.pop-sep{ height:1px; background:#efece5; margin:13px -14px 11px; }
.pop-label{
  display:block; font-size:10px; color: var(--ink-3); margin-bottom:6px;
  letter-spacing:.10em; font-weight:600;
}
.pop-sel{
  width:100%; padding:9px 10px; font-size:13px;
  border:1px solid #ddd9d0; border-radius:9px; background:#fbfaf7;
}
.rep-extra{ margin-top:10px; }
.dow{ display:flex; gap:4px; }
.dw{
  flex:1; min-height:30px; padding:0; font-size:12px;
  border:1px solid #ddd9d0; background:#fbfaf7; color: var(--ink-2);
  border-radius:7px; cursor:pointer;
  transition: background .14s, border-color .14s, color .14s;
}
.dw:hover{ background:#fff; border-color:#c3c0b6; }
.dw.on{ background: var(--accent); border-color: var(--accent); color:#fff; }
.inline{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color: var(--ink-2); }
.num{ width:60px; padding:7px 9px; border:1px solid #ddd9d0; border-radius:8px; background:#fbfaf7; font-size:13px; }
.dt{ padding:7px 9px; border:1px solid #ddd9d0; border-radius:8px; background:#fbfaf7; font-size:12.5px; }
.lnk{
  border:0; background:none; color: var(--accent); font-size:12px; cursor:pointer;
  padding:5px 3px; text-decoration:underline; text-underline-offset:2px;
}
.lnk:hover{ color: var(--accent-deep); }

/* ---- カテゴリー ---- */
.cat-row{ display:flex; flex-wrap:wrap; gap:6px; }
.cat-chip{
  display:inline-flex; align-items:center; gap:6px;
  min-height:28px; padding:0 10px; font-size:12px; line-height:1;
  border:1px solid #ddd9d0; border-radius:99px;
  background:#fbfaf7; color: var(--ink-2); cursor:pointer;
  max-width:100%;
  transition: background .14s, border-color .14s, box-shadow .14s;
}
.cat-chip span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cat-chip i{
  width:10px; height:10px; border-radius:50%; flex:0 0 auto;
  border:1px solid rgba(0,0,0,.12);
}
.cat-chip:hover{ background:#fff; border-color:#bcb9b0; }
.cat-chip.sel{ border-color: var(--ink-2); background:#fff; box-shadow: inset 0 0 0 1px var(--ink-2); }
.cat-chip.gear{ color: var(--ink-3); }

/* 行の左に出す色の点 */
.cat-dot{
  flex:0 0 auto; width:7px; height:7px; border-radius:50%;
  border:1px solid rgba(0,0,0,.12);
  display:none;
}
.item.tagged .cat-dot{ display:block; }

/* カテゴリー編集 */
.modal.wide{ width: min(400px, calc(100vw - 32px)); }
.cat-list{ display:flex; flex-direction:column; gap:8px; max-height:46vh; overflow:auto; margin-bottom:14px; }
.cat-item{ display:flex; align-items:center; gap:9px; }
.cat-item .sw{
  width:24px; height:24px; border-radius:50%; cursor:pointer; flex:0 0 auto;
  border:1px solid rgba(0,0,0,.14);
  transition: transform .14s, box-shadow .14s;
}
.cat-item .sw:hover{ transform: scale(1.06); box-shadow: var(--shadow-1); }
.cat-item input{
  flex:1; min-width:0; padding:8px 10px; font-size:13px;
  border:1px solid #ddd9d0; border-radius:9px; outline:0; background:#fff;
}
.cat-item input:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cat-item .del{
  border:0; background:none; color: var(--ink-4); font-size:15px; cursor:pointer;
  width:30px; height:30px; border-radius:8px; flex:0 0 auto;
}
.cat-item .del:hover{ background: var(--tint-2); color: var(--danger); }
/* 色を選ぶパレット */
.cat-pal{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:10px 9px; margin:-2px 0 2px 33px;
  background: var(--tint); border:1px solid #eae7e0; border-radius:10px;
}
.pal-dot{
  width:24px; height:24px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(0,0,0,.14); padding:0;
  transition: transform .14s;
}
.pal-dot:hover{ transform: scale(1.08); }
.pal-dot.sel{ box-shadow: 0 0 0 2px var(--tint), 0 0 0 3.5px var(--ink-2); }
.pal-free{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; color: var(--ink-3); cursor:pointer;
}
.pal-free input[type="color"]{
  width:26px; height:26px; padding:0; border:1px solid #ddd9d0;
  border-radius:7px; background:none; cursor:pointer;
}

.modal-actions.row{ flex-direction:row; }
.modal-actions.row .btn{ flex:1; }
.pop-actions{ display:flex; justify-content:space-between; gap:8px; margin-top:14px; }
.pop-actions .btn{ min-height:34px; }

/* 繰り返しの予定の見た目 */
.block.repeating{ border-left-width:3px; }

/* --- 時間指定 TO DO のブロック --- */
#todoCanvas{ cursor: default; }
.tblock{ padding:1px 6px; cursor: pointer; touch-action: auto; }
.tblock .handle{ display:none; }
.tblock .b-head{ display:flex; align-items:center; gap:5px; line-height:1.15; }
.tblock .chk{ width:11px; height:11px; border-radius:2.5px; }
.tblock .chk:checked::after{ left:3.2px; top:0.6px; width:3px; height:6px; }
.tblock .b-text{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tblock.done .b-text{ color: var(--ink-3); text-decoration: line-through; }
.tblock.rt{ border-style: dashed; }

/* ============================ ダイアログ ============================ */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(30,30,28,.32); z-index:90;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  animation: fade-in .2s var(--ease-out);
}
@keyframes fade-in{ from{ opacity:0; } to{ opacity:1; } }
.modal{
  position:fixed; z-index:95;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width: min(330px, calc(100vw - 32px));
  background:#fff; border-radius:16px; padding:20px;
  box-shadow: 0 30px 70px -14px rgba(35,33,28,.42), 0 4px 14px rgba(35,33,28,.10);
  animation: modal-in .26s var(--ease-out);
}
@keyframes modal-in{ from{ opacity:0; transform: translate(-50%,-46%) scale(.96);} to{ opacity:1; transform: translate(-50%,-50%) scale(1); } }
.modal-title{ font-size:15px; font-weight:600; letter-spacing:.01em; }
.modal-body{ font-size:13px; color: var(--ink-2); margin:7px 0 15px; line-height:1.6; }
.modal-actions{ display:flex; flex-direction:column; gap:8px; }
.btn-full{ width:100%; min-height:42px; padding:0 12px; font-size:13.5px; }
.btn.ghosty{ border-color:transparent; background:transparent; color: var(--ink-3); box-shadow:none; }
.btn.ghosty:hover{ background: var(--tint-2); border-color:transparent; box-shadow:none; }

/* ============================ クラウド同期 ============================ */
.saved.sync::before{ background: var(--accent); }
.saved.sync{ color: var(--accent); }
.saved.sync.busy{ color: var(--ink-3); }
.saved.sync.busy::before{ background: var(--ink-4); }

.sync-step{ margin-bottom:14px; }
.sync-step .pop-label.sp{ margin-top:11px; }
.sync-note{ margin-top:9px; font-size:11.5px; color: var(--ink-3); line-height:1.6; }
.sync-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:8px 0; border-bottom:1px solid #efece5; font-size:12.5px; color: var(--ink-3);
}
.sync-row b{ color: var(--ink); font-weight:600; text-align:right; word-break:break-all; }
.sync-auto{ margin-top:12px; font-size:12.5px; }

/* ============================ トースト ============================ */
.toast{
  position: fixed; left:50%; bottom: 30px; transform: translateX(-50%);
  background: rgba(30,30,28,.94); color:#fff;
  font-size:13px; padding:11px 18px; border-radius:99px; z-index:100;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.45);
  animation: pop-in .26s var(--ease-out);
}
@keyframes pop-in{ from{ opacity:0; transform: translate(-50%, 14px) scale(.96);} to{ opacity:1; transform: translate(-50%,0) scale(1); } }

/* ============================ レスポンシブ ============================ */

/* ---------- タブレット（iPad）---------- */
@media (min-width: 621px) and (max-width: 1180px){
  .toolbar{ padding:10px 14px; padding-top: calc(10px + env(safe-area-inset-top)); }
  .tab{ min-height:32px; padding:0 15px; font-size:13px; }
  .btn{ min-height:36px; }
}

/* 横幅に余裕がないときは、DATE の下にタスク状況を回り込ませる。
   （iPad の Safari で右端が切れて見えなくなるのを防ぐ）
   見出しが1段ぶん高くなるので、そのぶん1時間の高さを詰めて
   24時間ぶんが用紙の中に収まるようにする。 */
@media (max-width: 980px){
  .sheet-head{ grid-template-columns: minmax(0,1fr); gap: 3mm; margin-bottom: 4mm; }
  .head-date{ gap:10px; }
  .head-date .cap{ padding-bottom:6px; }
  .head-status .cap{ margin-bottom: 4px; }
  .status-line{ gap: 12px; }
  .stat b{ font-size:18px; }
}

/* ---------- スマートフォン ---------- */
/* A4 固定をやめ、画面の幅にあわせる。文字は思い切って大きくする。 */
@media (max-width: 620px){
  :root{ --rh: 48px; --rh-item: 46px; }

  .sheet{
    width:auto; height:auto; margin:8px; padding:16px 12px 24px;
    zoom:1; display:block; border-radius:8px;
  }
  .cap{ font-size:10.5px; letter-spacing:.14em; }

  /* 見出し */
  .sheet-head{ grid-template-columns:1fr; gap:14px; margin-bottom:14px; }
  /* 見出しは縦積み。日付の下に「‹ 今日 ›」を置く */
  .head-date{ flex-direction:column; align-items:stretch; gap:5px; }
  .head-date .cap{ padding-bottom:0; }
  .date-line{
    font-size:18px; padding-bottom:6px;
    flex-wrap:wrap; row-gap:8px; white-space:normal;
    align-items:center;
  }
  .date-line > #dateDisplay{ white-space:nowrap; }
  .date-nav{ flex-wrap:wrap; }
  .date-nav{ gap:6px; }
  .date-nav .btn.nav, .date-field{ min-height:32px; font-size:12.5px; padding:0 10px; }
  .stat b{ font-size:23px; }
  .stat .stat-l{ font-size:11px; }
  .stat-rate{ font-size:12px; }
  .stat-bar{ height:7px; }

  /* 表 */
  .grid{ grid-template-columns: 46px minmax(0,1.25fr) 0 minmax(0,1.75fr) 0; }

  .gh-rt, .col-rt, .col-tsch{ display:none; }
  .gh{ padding:11px 8px; font-size:12px; letter-spacing:.06em; }
  .gh.gh-time{ padding-left:2px; padding-right:2px; letter-spacing:0; white-space:nowrap; }
  .gh-sub{ display:none; }
  .gh-todo, .col-todo{ border-right:0; }
  .t-cell{ font-size:11.5px; padding-right:7px; }
  .block{ font-size:13px; padding:3px 7px; border-radius:5px; }
  .block .b-time{ font-size:10px; }
  .b-link{ font-size:10px; }
  .sch-hint{ font-size:10.5px; left:8px; right:8px; }

  /* 行 */
  .rs-cols{ grid-template-columns: minmax(0,1fr); }
  .rs-cols .col-todo{ border-right:0; }
  .item{ padding:0 7px; gap:7px; }
  .item input.txt{ font-size:14px; padding:4px 3px; }
  .chk{ width:19px; height:19px; border-radius:4px; border-width:1.5px; }
  .chk:checked::after{ left:6px; top:2px; width:4.5px; height:9.5px; border-width:0 2.4px 2.4px 0; }
  .rep-btn{ min-width:30px; height:30px; font-size:15px; }

  /* 残りタスク */
  .gfoot{ grid-template-columns:1fr; height:auto; }
  .gf-box{ height:190px; padding:8px 8px 10px; }
  .gf-box + .gf-box{ border-left:0; border-top:1px solid var(--rule); }
  .gf-head{ min-height:24px; }
  .gf-head .cap{ font-size:10.5px; }
  .lined{ font-size:13px; line-height:26px; background-size:100% 26px;
          background-image: linear-gradient(to bottom, transparent 0, transparent 25px, var(--rule) 25px, var(--rule) 26px); }

  /* 週・月・年 */
  .log-grid{ min-height: 70vh; }
  .log-box{ padding:8px 11px 10px; }
  .log-title{ font-size:13px; }
  .log-sub{ font-size:11px; }

  /* メモ */
  .memo-bar{ gap:8px; margin-bottom:12px; flex-wrap:wrap; }
  .memo-bar .btn{ min-height:34px; font-size:13px; }
  .memo-count{ font-size:11.5px; }
  .memo-chk{ font-size:12px; }
  .memo-list{ min-height:70vh; }
  .memo-item{ height:50px; }
  .memo-item .txt{ font-size:14px; }
  .mi-time{ font-size:10.5px; }

  /* ツールバー */
  .toolbar{ padding:8px 10px; padding-top: calc(8px + env(safe-area-inset-top)); gap:8px; }
  .btn{ min-height:36px; padding:0 12px; font-size:12.5px; }
  .tab{ min-height:32px; padding:0 12px; font-size:13px; }
  .menu{ min-width: 240px; }
  .menu-item{ padding:12px 12px; font-size:14px; }

  /* ルーティンに切り替えたとき */
  body.show-routine .grid{ grid-template-columns: 46px minmax(0,1.25fr) 0 0 minmax(0,1.75fr); }
  body.show-routine .gh-todo, body.show-routine .col-todo{ display:none; }
  body.show-routine .rs-cols .col-rt{ border-right:0; }
  body.show-routine .gh-rt{ display:block; border-right:0; }
  body.show-routine .col-rt{ display:block; border-right:0; }
}

/* ---------- 小さいスマホ ---------- */
@media (max-width: 430px){
  /* 保存表示は「点」だけにして、右側のボタンを右端へ寄せる */
  .saved{ font-size:0; margin-right:0; gap:0; }
  .saved::before{ width:6px; height:6px; }
  .toolbar .tb-group:last-child{ margin-left:auto; }
}
@media (max-width: 400px){
  .grid{ grid-template-columns: 42px minmax(0,1.2fr) 0 minmax(0,1.8fr) 0; }
  .item input.txt{ font-size:13.5px; }
  .date-line{ font-size:16.5px; }
  body.show-routine .grid{ grid-template-columns: 42px minmax(0,1.2fr) 0 0 minmax(0,1.8fr); }
}

/* ルーティン切替は「日」ビューだけのボタン。メモ・週・月・年では出さない */
body:not(.v-day) #colToggle{ display:none !important; }

/* 画面幅に応じてツールバー／メニューの出し分け */
.narrow-only{ display:none !important; }
@media (max-width: 620px){
  .wide-only{ display:none !important; }
  .narrow-only{ display:flex !important; }
  .menu-sep.narrow-only{ display:block !important; }
}

/* ============================ 印刷 ============================ */
@media print{
  @page{ size: A4 portrait; margin: 10mm; }
  :root{ --rh: 9.3mm; }
  .sheet{ --rh: 9.3mm !important; --rh-item: 8.4mm !important; }
  body{ background:#fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .memo-list{ overflow: visible; }
  .no-print, .toolbar, .tabs, .pop, .pop-backdrop, .toast,
  .modal, .modal-backdrop, .rep-btn{ display:none !important; }
  .sheet{ margin:0; padding:0; box-shadow:none; width:auto; height:auto; zoom:1; border-radius:0; }
  .grid{ page-break-inside: avoid; }
  .lined{ background-attachment: scroll; }
  .block{ min-height:8px; box-shadow:none; }
  .block .b-time{ font-size:5.5pt; }
  .block{ font-size:7pt; padding:1px 3px; }
  .sheet-head{ grid-template-columns: minmax(180px, 32%) 1fr; gap:20px; }
  .sheet-head{ margin-bottom:5mm; }
  .item, .item:hover, .item:focus-within{ background:transparent; }
  .rest-row{ color:#000 !important; }
  .rest-row.struck{ color:#666 !important; }
  .rest-row:hover{ background:transparent; }
  .item .chk, .item:not(.has-text) .chk{ opacity:1 !important; }
  .item input.txt, .focus-input, .lined{ color:#000; }
  .log-box.now{ background:transparent; }
  .log-box.now::before{ background:#8a8880; }
}