/* タスコア「てちょう」（2026-09-28 UIの作り直し。Claude Design のモック docs/ui-mock-20260928 を形にしたもの）
   白い紙・マスキングテープ・点線・方眼の地。姉妹アプリ TimeTrail と同じ見た目。
   値はモックのとおり。見た目の最終判断はリオ。舞台（.hm-stage の中）は hamster.js 側で、ここでは触らない。 */
@property --timer-pct {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 0%;
}

/* ── トークン（docs/ui-mock-20260928/.../tokens.css） ── */
:root{
  /* 面 */
  --bg:#fff9ec; --surface:#ffffff; --surface2:#fff9ec;
  --border:#e3d9bd; --line-dash:#cbbd97; --rule:#efe6cf; --dot:rgba(184,164,120,.3);
  /* ネイビー（TimeTrail とそろえる） */
  --navy:#1c2340; --navy2:#2b3070; --navy-light:#3d4490;
  /* イエロー */
  --yellow:#f5c842; --yellow2:#e0a91c; --yellow-soft:#f2d98a; --yellow-light:#fbeec0;
  /* 差し色 */
  --cyan:#8fd8ea; --cyan-pale:#dff3f9; --cyan-ink:#2e6f86;
  --sakura:#f3cfe2; --sakura-bar:#f0b8cf; --sakura-pale:#f9e2ec; --sakura-ink:#b0476f;
  /* 文字 */
  --text:#1c2340; --text2:#5c5546; --text3:#8a7f66; --text4:#b3a582; --cream-text:#fff3d6;
  /* 状態 */
  --danger:#c0392b; --break:#5fb8d4;
  /* レーン */
  --lane-light:var(--cyan); --lane-mid:var(--yellow-soft); --lane-heavy:var(--sakura);
  --tape-light:rgba(143,216,234,.75); --tape-mid:rgba(242,217,138,.9); --tape-heavy:rgba(243,207,226,.9); --tape-now:rgba(243,207,226,.95);
  /* 文字 */
  --font:"Zen Kaku Gothic New",sans-serif; --font-maru:"Zen Maru Gothic",sans-serif; --mono:"DM Mono",monospace;
  --fs-title:24px; --fs-h:17px; --fs-body:15px; --fs-sm:13px; --fs-xs:11px;
  /* 角丸 */
  --radius-paper:6px; --radius-btn:12px; --radius-sm:10px; --radius-sheet:26px; --radius:14px;
  /* 影 */
  --shadow-paper:0 8px 18px rgba(28,35,64,.1); --shadow-hero:0 10px 24px rgba(28,35,64,.12);
  --shadow-lift:0 20px 44px rgba(28,35,64,.28); --shadow-press:0 3px 0 rgba(28,35,64,.18);
  --shadow-dock:0 8px 20px rgba(28,35,64,.16); --scrim:rgba(28,35,64,.5);
  --shadow:var(--shadow-paper); --shadow-md:var(--shadow-hero);
  /* 下の帯の高さ（タブ・タイマー） */
  --tabbar-h:66px;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  background-image:radial-gradient(var(--dot) 1px,transparent 1.4px);
  background-size:16px 16px;
  color:var(--text);font-family:var(--font);font-size:15px;line-height:1.6;min-height:100vh;
  padding-bottom:calc(var(--tabbar-h) + 24px);
}
body.dock-on{padding-bottom:calc(var(--tabbar-h) + 88px)}
button{font-family:inherit;color:inherit}
input,select,textarea{font-family:inherit}
.maru{font-family:var(--font-maru)}
.mono{font-family:var(--mono)}
.ic{width:1em;height:1em;flex:0 0 auto;display:inline-block;vertical-align:middle}
.seed-ic{vertical-align:-.15em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ── ヘッダー（3列で、タイトルはいつも真ん中） ── */
.hd{position:sticky;top:0;z-index:100;background:var(--navy);padding:14px 14px 12px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.hd-title{grid-column:2;font-family:var(--font-maru);font-weight:900;font-size:19px;letter-spacing:3px;color:var(--yellow-soft);white-space:nowrap;line-height:1.3}
.hd-tabs{display:none;grid-column:1}
.hd-chip{grid-column:3;justify-self:end;display:flex;align-items:center;gap:8px;background:rgba(255,243,214,.1);border:1px solid rgba(242,217,138,.35);border-radius:999px;padding:4px 10px 4px 6px;cursor:pointer;min-height:30px}
.hd-chip:active{transform:translateY(1px)}
.hd-seeds{display:flex;align-items:center;gap:3px;font-family:var(--mono);font-size:13px;color:var(--cream-text);line-height:1}
.hd-seeds img{height:17px;width:auto;margin:0}
.hd-sep{width:1px;height:14px;background:rgba(242,217,138,.35)}
.hd-lv{display:flex;flex-direction:column;gap:2px}
.hd-lv b{font-family:var(--font-maru);font-weight:900;font-size:11px;color:var(--yellow-soft);line-height:1}
.hd-xp{width:38px;height:3px;border-radius:2px;background:rgba(255,255,255,.18);overflow:hidden}
.hd-xp i{display:block;height:100%;width:0;background:var(--yellow);border-radius:2px;transition:width .6s cubic-bezier(.4,0,.2,1)}

/* ── 画面下のタブ ── */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:100;height:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px));padding:0 6px calc(6px + env(safe-area-inset-bottom,0px));background:var(--navy);display:grid;grid-template-columns:repeat(5,1fr);align-items:center}
.tab{background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--cream-text);opacity:.7;cursor:pointer;padding:6px 0;min-height:48px;justify-content:center}
.tab .ic{width:22px;height:22px}
.tab span{font-size:10px;line-height:1.2}
.tab.on{opacity:1;color:var(--yellow-soft)}
.tab.on span{font-weight:700}
.tab-add{display:flex;justify-content:center;background:none;border:none;cursor:pointer;padding:0}
.tab-add i{width:50px;height:50px;margin-top:-22px;border-radius:50%;background:var(--yellow);border:3px solid var(--navy);display:flex;align-items:center;justify-content:center;color:var(--navy)}
.tab-add .ic{width:24px;height:24px}
.tab-add:active i{transform:translateY(2px)}

/* ── 地の上の中身 ── */
.container{max-width:540px;margin:0 auto;padding:14px 14px 0}
.view{display:flex;flex-direction:column;gap:12px}
.pg-h{display:flex;align-items:baseline;gap:10px;font-family:var(--font-maru);flex-wrap:wrap}
.pg-h h2{font-weight:900;font-size:var(--fs-h);line-height:1.4}
.pg-h small{font-weight:700;font-size:12px;color:var(--text3)}
.pg-h .grow{flex:1}
.pg-back{display:inline-flex;align-items:center;gap:2px;background:none;border:none;cursor:pointer;font-family:var(--font-maru);font-weight:700;font-size:12px;color:var(--text3);padding:6px 4px 6px 0;align-self:center}
.pg-back .ic{width:15px;height:15px}
.lbl{font-family:var(--font-maru);font-weight:900;font-size:10.5px;color:var(--text4);letter-spacing:1px}
.note{font-size:11.5px;color:var(--text3);font-family:var(--font-maru)}
.empty{text-align:center;padding:48px 20px;color:var(--text3);font-size:14px;font-family:var(--font-maru)}
.sub-main{display:flex;flex-direction:column;gap:14px;min-width:0}
#archive-list.view{gap:22px;padding-top:6px}
body.pet-setup .tabbar,body.pet-setup .dock{display:none!important}
body.pet-setup .hd-chip,body.pet-setup .hd-tabs{visibility:hidden}
body.pet-setup{padding-bottom:24px}

/* ── 紙・テープ・罫線 ── */
.paper{position:relative;background:var(--surface);border-radius:var(--radius-paper);box-shadow:var(--shadow-paper)}
.paper.hero{box-shadow:var(--shadow-hero)}
.paper.pad{padding:14px}
.tape{position:absolute;top:-9px;left:14px;padding:3px 14px;transform:rotate(-2deg);font-family:var(--font-maru);font-weight:900;font-size:12px;color:var(--text);white-space:nowrap;z-index:1;line-height:1.5}
.tape.light,.tape.sky{background:var(--tape-light)}
.tape.mid,.tape.yellow{background:var(--tape-mid)}
.tape.heavy,.tape.sakura{background:var(--tape-heavy)}
.tape.free{background:rgba(255,255,255,.9);border:1.5px dashed var(--line-dash);padding:2px 13px;color:var(--text2)}
.tape.blank{width:96px;height:22px;left:50%;transform:translateX(-50%) rotate(-2deg);padding:0}
.tape.corner-l{top:-7px;left:-6px;width:60px;height:17px;padding:0;background:rgba(243,207,226,.8);transform:rotate(-24deg)}
.tape.corner-r{top:-7px;left:auto;right:-6px;width:60px;height:17px;padding:0;background:rgba(143,216,234,.75);transform:rotate(22deg)}
.lined{padding:8px 14px 4px}
.lined-h{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:4px;gap:8px}
.lined-h .lbl{font-size:11.5px}
.lined-h a,.lined-h button{font-family:var(--font-maru);font-weight:700;font-size:11.5px;color:var(--text3);background:none;border:none;cursor:pointer;text-decoration:none}
.lrow{min-height:42px;display:flex;align-items:center;gap:10px;border-top:1px solid var(--rule);cursor:pointer}
.lrow .t{flex:1;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt{font-family:var(--mono);font-size:10.5px;color:var(--text4);white-space:nowrap;flex:0 0 auto}
.dotc{width:20px;height:20px;border-radius:50%;border:1.5px dashed var(--text4);background:none;flex:0 0 auto;cursor:pointer;padding:0;position:relative;display:flex;align-items:center;justify-content:center;color:var(--navy)}
.dotc .ic{width:13px;height:13px;opacity:0;transition:opacity .12s}
.dotc:hover .ic{opacity:.45}
.dotc.done{border:none;background:var(--navy);color:var(--cream-text);animation:checkPop .35s ease}
.dotc.done .ic{opacity:1}
.dotc.big{width:22px;height:22px}
@keyframes checkPop{0%{transform:scale(1)}40%{transform:scale(1.4)}70%{transform:scale(.92)}100%{transform:scale(1)}}
.completing{animation:fadeSlide .18s ease forwards;overflow:hidden}
@keyframes fadeSlide{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(12px)}}

/* ── ボタン ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 16px;border-radius:var(--radius-btn);border:none;background:none;cursor:pointer;font-family:var(--font-maru);font-weight:900;font-size:13px;color:var(--text);line-height:1.2;text-align:center;-webkit-tap-highlight-color:transparent}
.btn .ic{width:17px;height:17px}
.btn:disabled{opacity:.45;cursor:default}
.btn-primary{background:var(--yellow);box-shadow:var(--shadow-press);font-size:16px;min-height:52px}
.btn-primary:not(:disabled):active{box-shadow:none;transform:translateY(2px)}
.btn-navy{background:var(--navy);color:var(--cream-text)}
.btn-navy .ic{color:var(--yellow-soft)}
.btn-navy:not(:disabled):active{background:var(--navy2);transform:translateY(2px)}
.btn-outline{background:var(--surface);border:1.5px solid var(--navy)}
.btn-outline:not(:disabled):active{transform:translateY(2px)}
.btn-dash{border:1.5px dashed var(--line-dash);font-weight:700;font-size:12.5px;background:transparent}
.btn-dash:not(:disabled):active{background:var(--surface2);transform:translateY(2px)}
.btn-text{min-height:auto;padding:4px 2px;font-weight:700;font-size:12px;color:var(--text2);text-decoration:underline;text-underline-offset:3px}
.btn-text.danger{color:var(--danger);font-weight:900}
.btn-icon{width:36px;height:36px;min-height:36px;padding:0;border-radius:50%;border:1.5px dashed var(--line-dash);background:transparent}
.btn-icon .ic{width:17px;height:17px}
.btn-round{width:40px;height:40px;min-height:40px;padding:0;border-radius:50%;background:var(--navy);color:var(--yellow-soft)}
.btn-round .ic{width:16px;height:16px}
.btn-round.yellow{background:var(--yellow);color:var(--navy)}
.btn-pill{min-height:36px;height:36px;padding:0 12px;border-radius:18px;font-size:12px}
.btn-block{width:100%}
.btn-row{display:grid;gap:8px}
.btn-row.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.btn-row.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.muted{color:var(--text2)}
.muted .ic{opacity:.7}

/* ── タグ・しぼりこみ ── */
.tags{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.tag{font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px;border:1px solid #d8c9a2;color:var(--text2);background:transparent;white-space:nowrap;line-height:1.5}
.tag.warn{border-color:#e9b9cd;color:var(--sakura-ink);background:#fdf2f6}
.tag.rep{border-color:#a9dcea;color:var(--cyan-ink);background:#eef9fc}
.tag.imp{border-color:var(--navy);color:var(--navy)}
.tag.sm{font-size:10.5px;padding:1px 7px}
.tags .pt{margin-left:auto;font-size:11px}
.filters{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:1px}
.filters::-webkit-scrollbar{display:none}
.filter{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:999px;border:1.5px dashed var(--line-dash);background:transparent;cursor:pointer;font-family:var(--font-maru);font-weight:700;font-size:12px;min-height:32px;white-space:nowrap}
.filter i{width:8px;height:8px;border-radius:50%}
.filter.on{background:var(--navy);border:1.5px solid var(--navy);color:var(--cream-text)}
.ldot-light{background:var(--lane-light)}.ldot-mid{background:var(--lane-mid)}.ldot-heavy{background:var(--lane-heavy)}

/* ── きょう（フォーカス） ── */
.fc-date{display:flex;align-items:baseline;gap:10px;font-family:var(--font-maru);flex-wrap:wrap}
.fc-date b{font-weight:900;font-size:var(--fs-h)}
.fc-date span{font-weight:700;font-size:12px;color:var(--text3)}
.fc-date .grow{flex:1}
.lanes{display:flex;gap:8px;padding:6px 10px 0;position:relative;z-index:1;margin-bottom:-14px}
.lanes.has-now{gap:6px;padding:6px 8px 0}
.lane{flex:1;display:flex;flex-direction:column;align-items:center;padding:5px 0 7px;border:none;cursor:pointer;font-family:var(--font-maru);font-weight:700;font-size:13px;color:#4a5170;line-height:1.35;transition:transform .15s}
.lane small{font-size:10px;font-weight:500}
.lane.light{background:rgba(143,216,234,.4);transform:rotate(1.5deg)}
.lane.mid{background:rgba(242,217,138,.45);transform:rotate(-1deg)}
.lane.heavy{background:rgba(243,207,226,.5);transform:rotate(1deg)}
.lane.now{flex:1.3;flex-direction:row;justify-content:center;gap:5px;background:rgba(243,207,226,.5);transform:rotate(1deg)}
.lane.now .ic{width:15px;height:15px}
.lane.on{padding:6px 0 9px;font-weight:900;font-size:14.5px;color:var(--text);transform:rotate(-2deg) translateY(-3px);box-shadow:0 2px 4px rgba(28,35,64,.1)}
.lane.on small{font-weight:700}
.lane.light.on{background:rgba(143,216,234,.9)}
.lane.mid.on{background:rgba(242,217,138,.95)}
.lane.heavy.on{background:rgba(243,207,226,.95)}
.lane.now.on{background:var(--tape-now);padding:9px 0 12px;font-size:14px}
.lanes.has-now .lane:not(.on){font-size:12.5px;color:#6b6a85}
.lanes.has-now .lane.light:not(.on){background:rgba(143,216,234,.3)}
.lanes.has-now .lane.mid:not(.on){background:rgba(242,217,138,.4)}
.lanes.has-now .lane.heavy:not(.on){background:rgba(243,207,226,.35)}
.fc-grid{display:flex;flex-direction:column;gap:12px}
.fc-left{display:flex;flex-direction:column;min-width:0}
.next:empty{display:none}
.hero-acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hero-acts .btn-primary{grid-column:1/-1}
.hero{padding:28px 18px 16px;display:flex;flex-direction:column;gap:10px}
.hero.now{outline:2px solid var(--sakura);outline-offset:-2px}
.hero-lbl{display:flex;align-items:center;gap:6px;font-family:var(--font-maru);font-weight:700;font-size:11.5px;color:var(--text3)}
.hero-lbl.now{font-weight:900;color:var(--sakura-ink)}
.hero-lbl .ic{width:13px;height:13px}
.hero-title{font-family:var(--font-maru);font-weight:900;font-size:var(--fs-title);line-height:1.35;overflow-wrap:anywhere;cursor:pointer}
.hero .btn-primary{margin-top:6px;min-height:54px;font-size:17px}
.hero .btn-primary .ic{width:19px;height:19px}
.hero .btn-row .btn-dash{height:44px}
.hero-2{display:flex;gap:8px;margin-top:6px}
.hero-2 .btn{flex:1;min-height:54px;font-size:16px}
.hero-2 .btn-navy{font-size:15px}
.hero-empty{padding:24px 18px 20px;text-align:center;font-family:var(--font-maru);font-size:13px;color:var(--text3);display:flex;flex-direction:column;gap:12px;align-items:center}
.rest-msg{font-family:var(--font-maru);font-size:11.5px;color:var(--text3);text-align:center;padding:2px 0 6px}
.dice-mark{display:inline-flex;align-items:center;gap:3px;font-family:var(--font-maru);font-weight:700;font-size:11px;color:var(--text3);margin-left:auto}
.dice-mark .ic{width:13px;height:13px}
.dice-mark button{background:none;border:none;color:var(--text2);text-decoration:underline;cursor:pointer;font:inherit;padding:2px}

/* ── 丸い文字盤（外周の輪が進み具合） ── */
.dial{--d:148px;--ring:7px;position:relative;width:var(--d);height:var(--d);flex:0 0 auto;border-radius:50%;background:conic-gradient(var(--dial-c,var(--navy)) 0 var(--timer-pct,0%),var(--rule) var(--timer-pct,0%) 100%);display:flex;align-items:center;justify-content:center}
.dial.brk{--dial-c:var(--break)}
.dial.idle{background:var(--rule)}
.dial-in{width:calc(var(--d) - var(--ring) * 2);height:calc(var(--d) - var(--ring) * 2);border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center}
.dial-ph{font-family:var(--font-maru);font-weight:700;font-size:10.5px;color:var(--sakura-ink);line-height:1.2}
.dial.brk .dial-ph{color:var(--cyan-ink)}
.dial.idle .dial-ph{color:var(--text3)}
.dial-t{font-family:var(--font-maru);font-weight:900;font-size:34px;line-height:1;letter-spacing:1px;font-variant-numeric:tabular-nums}
.dial-sets{display:flex;gap:3px;margin-top:2px}
.dial-sets i{width:7px;height:7px;border-radius:50%;border:1.5px solid var(--line-dash)}
.dial-sets i.done{background:var(--navy);border-color:var(--navy)}
.dial-sets i.cur{border-color:var(--navy)}
.dial-n{font-family:var(--mono);font-size:9.5px;color:var(--text3);line-height:1.2}
.dial.sm{--d:74px;--ring:5px}
.dial.sm .dial-t{font-size:16px;letter-spacing:0}
.dial.sm .dial-ph,.dial.sm .dial-sets,.dial.sm .dial-n{display:none}
.dial.md{--d:84px;--ring:5px}
.dial.md .dial-t{font-size:19px;letter-spacing:0}
.dial.md .dial-ph,.dial.md .dial-sets,.dial.md .dial-n{display:none}
.dial-gear{position:absolute;right:-4px;bottom:6px;width:32px;height:32px;min-height:32px;background:#fff}

/* ── 作業中の紙 ── */
.work{padding:22px 16px 14px;display:flex;flex-direction:column;gap:10px}
.work-top{display:flex;align-items:center;gap:14px}
.work-side{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.work-title{font-family:var(--font-maru);font-weight:900;font-size:21px;line-height:1.35;overflow-wrap:anywhere}
.work-sub{font-size:11.5px;color:var(--text3)}
.work .btn-primary{margin-top:2px}
.stage-paper{padding:6px}
.stage-paper .hm-stage{border-radius:3px}

/* ── 画面下のタイマー（待機・作業中） ── */
.dock{position:fixed;left:12px;right:12px;bottom:calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom,0px));z-index:150;max-width:516px;margin:0 auto;background:#fff;border-radius:var(--radius-sm);box-shadow:var(--shadow-dock);padding:8px 8px 8px 12px;display:none;align-items:center;gap:10px}
.dock.on{display:flex}
.dock > .ic{width:20px;height:20px}
.dock-t{font-family:var(--font-maru);font-weight:900;font-size:22px;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.dock-mid{flex:1;min-width:0;display:flex;flex-direction:column;cursor:pointer;background:none;border:none;text-align:left;padding:2px 0}
.dock-mid small{font-family:var(--font-maru);font-weight:700;font-size:10.5px;color:var(--sakura-ink);line-height:1.3}
.dock-mid span{font-size:11.5px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock.run .dock-mid span{font-family:var(--font-maru);font-weight:900;font-size:13px;color:var(--text)}
.dock.brk .dock-mid small{color:var(--cyan-ink)}
/* 作業中は、ふち一周が進み具合（3px） */
.dock.run{padding:3px;background:conic-gradient(var(--dock-c,var(--navy)) 0 var(--timer-pct,0%),var(--border) var(--timer-pct,0%) 100%)}
.dock.run.brk{--dock-c:var(--break)}
.dock-in{flex:1;min-width:0;display:flex;align-items:center;gap:10px;background:#fff;border-radius:8px;padding:5px 5px 5px 9px}
.dock-in > .ic{width:20px;height:20px}

/* ── 下から出る紙（モーダル） ── */
.sheet-ov{position:fixed;inset:0;z-index:200;background:var(--scrim);display:none;align-items:flex-end;justify-content:center}
.sheet-ov.show{display:flex;animation:ovIn .2s ease-out}
.sheet-ov.top{z-index:250}
@keyframes ovIn{from{opacity:0}to{opacity:1}}
.sheet{width:100%;max-width:560px;max-height:92vh;overflow-y:auto;background:var(--bg);border-radius:var(--radius-sheet) var(--radius-sheet) 0 0;padding:10px 16px calc(22px + env(safe-area-inset-bottom,0px));box-shadow:0 -12px 32px rgba(28,35,64,.3);animation:sheetUp .25s ease;overscroll-behavior:contain}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
.grab{width:44px;height:5px;border-radius:999px;background:#d8c9a2;margin:0 auto 14px}
.sheet-paper{position:relative;background:#fff;padding:28px 16px 18px;border-radius:var(--radius-paper);box-shadow:0 8px 20px rgba(28,35,64,.1);display:flex;flex-direction:column;gap:14px}
.sheet-h{display:flex;align-items:center;justify-content:center;gap:6px;font-family:var(--font-maru);font-weight:900;font-size:var(--fs-h);text-align:center}
.sheet-h .ic{width:19px;height:19px}
.sheet-h small{font-weight:700;font-size:11.5px;color:var(--text3)}
.sheet-x{position:absolute;right:14px;top:14px;display:none}
.inp{width:100%;border:1.5px dashed var(--line-dash);border-radius:var(--radius-sm);padding:12px 14px;font-size:15px;font-weight:700;background:#fff;color:var(--text);outline:none;-webkit-appearance:none;appearance:none}
.inp::placeholder{color:var(--text4);font-weight:400}
.inp:focus{border:1.5px solid var(--navy)}
textarea.inp{font-weight:400;font-size:14px;min-height:64px;resize:vertical;line-height:1.6}
select.inp{font-weight:700;font-size:14px;padding:10px 12px;background:#fff}
.fgrid{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:center}
.fgrid .lbl{font-size:11px;letter-spacing:0}
.opts{display:flex;gap:6px;min-width:0}
.opt{flex:1;min-width:0;height:38px;border-radius:var(--radius-sm);border:1.5px dashed var(--line-dash);background:transparent;display:flex;align-items:center;justify-content:center;font-family:var(--font-maru);font-weight:700;font-size:13px;cursor:pointer;padding:0 4px;white-space:nowrap}
.opts.sm .opt{font-size:12px}
.opt.on{background:var(--navy);border:1.5px solid var(--navy);color:var(--cream-text);font-weight:900}
.opt.l-light{border:none;background:rgba(143,216,234,.35)}
.opt.l-mid{border:none;background:rgba(242,217,138,.35)}
.opt.l-heavy{border:none;background:rgba(243,207,226,.5)}
.opt.l-light.on{background:var(--cyan);color:var(--text);box-shadow:inset 0 0 0 2px var(--navy)}
.opt.l-mid.on{background:var(--yellow-soft);color:var(--text);box-shadow:inset 0 0 0 2px var(--navy)}
.opt.l-heavy.on{background:var(--sakura);color:var(--text);box-shadow:inset 0 0 0 2px var(--navy)}
.opt.fit{flex:0 0 auto;padding:0 12px;font-family:var(--font);font-weight:400;font-size:12.5px}
.opt.fit.on{font-weight:700}
.datef{position:relative;flex:1;min-width:0;height:38px;padding:0 12px;border-radius:var(--radius-sm);border:1.5px dashed var(--line-dash);display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text);cursor:pointer;overflow:hidden}
.datef.ph{color:var(--text4);font-size:12.5px}
.datef em{font-style:normal;margin-left:auto;color:var(--sakura-ink);font-size:11px;font-weight:700;white-space:nowrap}
.datef input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;border:none}
.datef-x{flex:0 0 auto;width:30px;height:30px;min-height:30px;border:none;background:none;color:var(--text3);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.datef-x .ic{width:15px;height:15px}
.fold{display:flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;font-family:var(--font-maru);font-weight:700;font-size:12.5px;color:var(--text2);padding:4px 0;text-align:left}
.fold .ic{width:14px;height:14px;opacity:.7;transition:transform .15s}
.fold.open .ic{transform:rotate(90deg)}
.fold-body{display:none;flex-direction:column;gap:10px;padding:12px;background:var(--surface2);border-radius:var(--radius-sm)}
.fold-body.show{display:flex}
.fold-body .lbl{margin-top:4px}
.fold-body label.note{display:flex;flex-direction:column;gap:4px}
.routine-extra{display:none!important}
.routine-extra.show{display:flex!important}
.routine-extra.subgrid.show{display:grid!important}
label.routine-extra.show{flex-direction:column;gap:4px}
label.routine-extra.chk.show{flex-direction:row;gap:8px}
.add-mode .status-field{display:none}
.add-mode .sheet-foot .btn-text{display:none}
.add-mode #task-save-btn{flex:1;min-height:52px;font-size:16px}
#deadline-row .opt.fit{height:38px}
#deadline-row.has-date .dl-q{display:none}
.ts-foot{display:flex;flex-direction:column-reverse;gap:6px;align-items:stretch}
.sheet-foot{display:flex;align-items:center;gap:10px}
.sheet-foot .grow{flex:1}
.sheet-foot .btn-primary{min-height:48px;padding:0 28px;font-size:15px}
.subgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wdays{display:flex;gap:5px;flex-wrap:wrap}
.wday{width:36px;height:34px;border-radius:var(--radius-sm);border:1.5px dashed var(--line-dash);background:#fff;cursor:pointer;font-family:var(--font-maru);font-weight:700;font-size:12.5px}
.wday.on{background:var(--navy);border:1.5px solid var(--navy);color:var(--cream-text)}
.chk{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.chk input{width:18px;height:18px;accent-color:var(--navy)}
.timesel{display:flex;align-items:center;gap:6px}
.timesel select{flex:1}
/* −＋ */
.stp{display:flex;align-items:center;gap:4px}
.stp button{width:24px;height:24px;border-radius:50%;border:1.5px dashed var(--line-dash);background:transparent;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--text2);cursor:pointer;padding:0;line-height:1}
.stp button:disabled{opacity:.3;cursor:default}
.stp b{min-width:30px;text-align:center;font-family:var(--font-maru);font-weight:900;font-size:18px;font-variant-numeric:tabular-nums}
.stp.lg button{width:30px;height:30px;font-size:15px}
.stp.lg b{font-size:19px}
/* 切り替え */
.tgl{width:40px;height:24px;border-radius:12px;background:var(--border);position:relative;flex:0 0 auto;border:none;cursor:pointer;padding:0;transition:background .15s}
.tgl::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s}
.tgl.on{background:var(--navy)}
.tgl.on::after{left:19px}
/* 2つから選ぶ */
.seg{display:flex;border:1.5px solid var(--navy);border-radius:var(--radius-sm);overflow:hidden}
.seg button{flex:1;height:38px;display:flex;align-items:center;justify-content:center;gap:5px;background:#fff;border:none;cursor:pointer;font-family:var(--font-maru);font-weight:700;font-size:13px;color:var(--text)}
.seg button.on{background:var(--navy);color:var(--cream-text);font-weight:900}
.seg button .ic{width:15px;height:15px}
.seg button.on .ic{color:var(--yellow-soft)}

/* タイマーの紙 */
.tm-box{background:var(--surface2);border-radius:var(--radius-sm);padding:10px 8px 8px;display:flex;flex-direction:column;gap:8px}
.tm-3{display:flex;gap:2px}
.tm-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.tm-col > span{font-size:10px;font-weight:700;color:var(--text3);white-space:nowrap}
.tm-op{align-self:center;font-family:var(--font-maru);font-weight:900;font-size:13px;color:var(--text4);padding-top:6px}
.tm-long{display:flex;align-items:center;gap:8px;border-top:1px dashed var(--border);padding-top:8px;font-size:12px;color:var(--text)}
.tm-long > span{flex:1}
.tm-long b{font-weight:700;color:var(--sakura-ink)}
.tm-more{display:flex;flex-direction:column;gap:8px;border-top:1px dashed var(--border);padding-top:8px;font-size:12px}
.tm-more .row{display:flex;align-items:center;gap:8px}
.tm-more .row > span{flex:1;display:flex;flex-direction:column;font-weight:700}
.tm-more .row > span small{font-size:10px;color:var(--text3);font-weight:400}
.tm-unit{font-size:10px;color:var(--text3)}
.qchips{display:flex;gap:6px;flex-wrap:wrap}
.qchip{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:4px 10px;border-radius:999px;border:1.5px dashed var(--line-dash);background:#fff;cursor:pointer;font-size:12px;color:var(--text2);min-height:30px}
.qchip i{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.qchip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gearlink{display:flex;align-items:center;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;font-family:var(--font-maru);font-weight:700;font-size:12px;color:var(--text2);padding:6px}
.gearlink .ic{width:15px;height:15px}
/* タイマーの設定：ひとまわりの帯 */
.cycle{background:var(--surface2);border-radius:var(--radius-sm);padding:10px;display:flex;flex-direction:column;gap:8px}
.cycle-bar{display:flex;gap:3px;height:26px}
.cycle-bar i{display:flex;align-items:center;justify-content:center;border-radius:4px;font-style:normal;font-family:var(--mono);font-size:10px;color:#fff;min-width:4px;overflow:hidden}
.cycle-bar i.w{background:var(--navy)}
.cycle-bar i.b{background:var(--cyan)}
.cycle-bar i.l{background:var(--sakura);color:var(--sakura-ink)}
.cycle-foot{display:flex;align-items:center;gap:10px;font-size:10.5px;color:var(--text2);flex-wrap:wrap}
.cycle-foot i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:3px;vertical-align:-1px}
.cycle-foot .grow{flex:1}
.cycle-foot b{font-family:var(--font-maru);font-weight:900;color:var(--text)}
.srow{display:flex;align-items:center;gap:10px;min-height:54px;border-bottom:1px solid var(--rule)}
.srow:last-child{border-bottom:none}
.srow > i{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.srow > span{flex:1;display:flex;flex-direction:column;font-family:var(--font-maru);font-weight:900;font-size:14px}
.srow > span small{font-family:var(--font);font-weight:400;font-size:10.5px;color:var(--text3)}
.srow .tm-unit{width:28px}

/* ── トースト（タイマーのすぐ上） ── */
.toast{position:fixed;left:50%;bottom:calc(var(--tabbar-h) + 22px + env(safe-area-inset-bottom,0px));transform:translate(-50%,8px);opacity:0;z-index:300;width:calc(100% - 48px);max-width:440px;background:var(--navy);color:var(--cream-text);border-radius:var(--radius-sm);padding:10px 12px;box-shadow:0 10px 24px rgba(28,35,64,.3);display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;pointer-events:none;transition:opacity .25s,transform .25s}
body.dock-on .toast{bottom:calc(var(--tabbar-h) + 82px + env(safe-area-inset-bottom,0px))}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#toast-msg{flex:1;min-width:0;display:flex;align-items:center;gap:8px}
#toast-msg .seed-ic{height:20px!important;margin:0}
#toast-msg .ic{width:17px;height:17px;color:var(--yellow-soft)}
.toast-undo{flex:0 0 auto;background:var(--yellow-soft);border:none;color:var(--navy);padding:6px 12px;border-radius:8px;font-family:var(--font-maru);font-size:12px;font-weight:900;cursor:pointer}
#score-tooltip{display:none;position:fixed;z-index:500;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;box-shadow:var(--shadow-paper);min-width:150px;pointer-events:none}
.score-tip{cursor:help}

/* ── ぜんぶ ── */
.tlist{padding:2px 12px}
.trow{min-height:54px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--rule);padding:6px 0;cursor:pointer}
.trow:last-child{border-bottom:none}
.trow > .lane-line{width:4px;align-self:stretch;border-radius:2px;flex:0 0 auto}
.lane-line.light{background:var(--lane-light)}.lane-line.mid{background:var(--lane-mid)}.lane-line.heavy{background:var(--lane-heavy)}
.trow-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.trow-b b{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trow-b small{font-size:10.5px;font-weight:700;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trow-b small.warn{color:var(--sakura-ink)}
.trow .btn-icon{width:34px;height:34px;min-height:34px}
.trow .btn-icon .ic{width:14px;height:14px;margin-left:2px}
.trow .btn-icon.on{background:var(--navy);border:1.5px solid var(--navy);color:var(--yellow-soft)}
.trow.waiting{opacity:.55}
.trow-c{display:none}
.list-top{display:flex;flex-direction:column;gap:12px}
.more-row{display:block;width:100%;text-align:center;padding:10px;font-family:var(--font-maru);font-weight:700;font-size:12px;color:var(--text3);background:none;border:none;cursor:pointer}

/* ── その他 ── */
.me{padding:18px 16px 16px;display:flex;align-items:center;gap:14px}
.me img{width:64px;height:auto;flex:0 0 auto}
.me-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.me-b b{font-family:var(--font-maru);font-weight:900;font-size:16px}
.me-b small{font-size:11.5px;color:var(--text3)}
.me-xp{display:flex;align-items:center;gap:8px;margin-top:4px}
.me-xp div{flex:1;height:6px;border-radius:3px;background:var(--rule);overflow:hidden}
.me-xp div i{display:block;height:100%;background:var(--navy);border-radius:3px}
.me-xp span{font-family:var(--mono);font-size:11px;color:var(--text3)}
.me-next{font-size:11px;color:var(--text3);display:flex;align-items:center;gap:5px;margin-top:2px}
.me-next .ic{width:13px;height:13px}
.menu{padding:2px 14px}
.mrow{width:100%;min-height:54px;display:flex;align-items:center;gap:12px;border:none;border-bottom:1px solid var(--rule);background:none;cursor:pointer;text-align:left;font-family:var(--font-maru);font-weight:900;font-size:14px;color:var(--text);padding:0 2px}
.mrow:last-child{border-bottom:none}
.mrow > .ic{width:19px;height:19px}
.mrow span{flex:1}
.mrow small{font-family:var(--mono);font-weight:500;font-size:11px;color:var(--text4)}
.mrow .chev{width:15px;height:15px;color:var(--text4)}
.mrow.on{background:var(--yellow-light);border-radius:8px;border-bottom-color:transparent}
.logout{align-self:center;margin-top:6px}
.side-menu{display:none}

/* くり返し */
.rrow{min-height:56px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--rule);cursor:pointer;padding:6px 0}
.rrow:last-child{border-bottom:none}
.rrow .tag{width:60px;text-align:center;padding:2px 2px;font-size:10.5px;overflow:hidden;text-overflow:ellipsis;flex:0 0 auto}
.rrow-b{flex:1;min-width:0;display:flex;flex-direction:column}
.rrow-b b{font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rrow-b small{font-size:10.5px;color:var(--text3)}
.rrow .d{font-family:var(--mono);font-size:12px;color:var(--navy);flex:0 0 auto}
.rrow .d.past{color:var(--sakura-ink)}
.rrow.done{opacity:.5}

/* アーカイブ */
.aday{padding:22px 14px 8px}
.aday .tape{top:-9px}
.aday-sum{position:absolute;right:12px;top:10px;display:flex;align-items:center;gap:4px;font-family:var(--mono);font-size:12px;color:var(--text)}
.aday-sum .ic{width:14px;height:14px}
.arow{min-height:38px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--rule);font-size:14px;color:var(--text2)}
.arow .chk-d{width:20px;height:20px;border-radius:50%;background:var(--navy);color:var(--cream-text);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.arow .chk-d .ic{width:12px;height:12px}
.arow .chk-d.log{background:none;border:1.5px dashed var(--line-dash);color:var(--text3)}
.arow .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arow .m{font-family:var(--mono);font-size:11px;color:var(--text4);flex:0 0 auto}
.arow .x{border:none;background:none;color:var(--text4);cursor:pointer;width:28px;height:28px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;padding:0;opacity:.6}
.arow .x .ic{width:13px;height:13px}
.arow .x:hover{opacity:1;color:var(--danger)}
.alog-btn{display:flex;align-items:center;gap:4px;background:none;border:none;cursor:pointer;font-family:var(--font-maru);font-weight:700;font-size:11.5px;color:var(--text3);padding:8px 0 4px}
.alog-btn .ic{width:13px;height:13px;transition:transform .15s}
.alog-btn.open .ic{transform:rotate(180deg)}
.alog{display:none}
.alog.show{display:block}

/* 統計 */
.st3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.st3 > div{padding:14px 6px;text-align:center;display:flex;flex-direction:column;gap:2px}
.st3 > div + div{border-left:1.5px dashed var(--border)}
.st3 small{font-family:var(--font-maru);font-weight:700;font-size:11px;color:var(--text3)}
.st3 b{font-family:var(--font-maru);font-weight:900;font-size:22px;line-height:1.3}
.st3 b em{font-style:normal;font-size:12px}
.st3 span{font-family:var(--mono);font-size:11px;color:var(--text)}
.stbox{padding:26px 14px 14px}
.legend{display:flex;justify-content:flex-end;gap:10px;font-size:10.5px;color:var(--text2);flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}
.st-2{display:flex;flex-direction:column;gap:22px}
.bars{--bh:130px;display:flex;align-items:flex-end;gap:8px;height:calc(var(--bh) + 18px);margin-top:8px;border-bottom:1.5px solid var(--border);padding:0 2px}
.bar{flex:1;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;height:100%;cursor:pointer;background:none;border:none;padding:0;min-width:0}
.bar em{font-style:normal;font-family:var(--mono);font-size:9.5px;color:var(--text2);text-align:center;margin-bottom:2px;white-space:nowrap}
.bar-stack{display:flex;flex-direction:column-reverse;gap:2px;border-radius:3px 3px 0 0;overflow:hidden}
.bar-stack i{display:block}
.bar.today .bar-stack{outline:2px solid var(--navy);outline-offset:0;border-radius:3px}
.bar-days{display:flex;gap:8px;margin-top:6px}
.bar-days span{flex:1;text-align:center;font-family:var(--mono);font-size:10px;color:var(--text3)}
.bar-days span.today{color:var(--text);font-weight:500}
.stdetail{margin-top:10px;border-top:1px dashed var(--border);padding-top:8px;display:none}
.stdetail.show{display:block}
.stdetail h4{font-family:var(--font-maru);font-weight:900;font-size:12px;color:var(--text2);margin-bottom:4px}
.stdetail .drow{display:flex;align-items:center;gap:8px;min-height:32px;border-bottom:1px solid var(--rule);font-size:13px}
.stdetail .drow:last-child{border-bottom:none}
.stdetail .drow i{width:10px;height:10px;border-radius:2px;flex:0 0 auto}
.stdetail .drow span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stdetail .drow b{font-family:var(--mono);font-weight:500;font-size:11.5px;color:var(--text2)}
.cal-h{display:flex;align-items:center;justify-content:center;gap:14px;font-family:var(--font-maru);font-weight:900;font-size:14px;margin:4px 0 8px}
.cal-h button{background:none;border:none;color:var(--text3);cursor:pointer;width:28px;height:28px;display:flex;align-items:center;justify-content:center}
.cal-h button:disabled{opacity:.3;cursor:default}
.cal-h .ic{width:15px;height:15px}
.cal-legend{position:absolute;right:14px;top:12px;display:flex;align-items:center;gap:3px;font-size:9.5px;color:var(--text3)}
.cal-legend i{width:10px;height:10px;border-radius:2px}
.cal-dow,.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal-dow span{text-align:center;font-family:var(--font-maru);font-weight:700;font-size:11px;color:var(--text2);padding:2px 0}
.cal-c{aspect-ratio:1;border-radius:4px;position:relative;display:flex;align-items:center;justify-content:center;font-family:var(--font-maru);font-weight:900;font-size:16px;color:var(--text);border:none;padding:0;cursor:default;background:transparent}
.cal-c small{position:absolute;left:4px;top:3px;font-family:var(--mono);font-weight:500;font-size:9px;color:var(--text3);line-height:1}
.cal-c.has{cursor:pointer}
.cal-c.today{box-shadow:inset 0 0 0 2px var(--navy)}
.cal-c.future small{color:#d0c6ab}
.cl0{background:#f6f0de}.cl1{background:#fbeec0}.cl2{background:#f7e08f}.cl3{background:#f5c842}.cl4{background:#e0a91c}

/* 設定 */
.setp{padding:6px 16px}
.setrow{display:flex;align-items:center;gap:10px;min-height:58px;border-bottom:1px solid var(--rule)}
.setrow:last-child{border-bottom:none}
.setrow > span{flex:1;display:flex;flex-direction:column;font-family:var(--font-maru);font-weight:900;font-size:14px}
.setrow > span small{font-family:var(--font);font-weight:400;font-size:10.5px;color:var(--text3)}
.setrow.link{cursor:pointer;background:none;border-left:none;border-right:none;border-top:none;width:100%;text-align:left;color:var(--text);font:inherit}
.setrow.link em{font-style:normal;font-size:12.5px;color:var(--text2);font-family:var(--font)}
.setrow.link .ic{width:15px;height:15px;color:var(--text4)}
.selchip{position:relative;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:var(--radius-sm);border:1.5px dashed var(--line-dash);font-family:var(--font-maru);font-weight:900;font-size:13px}
.selchip select{position:absolute;inset:0;opacity:0;cursor:pointer}
.selchip .ic{width:13px;height:13px}
.wtbox{padding:26px 16px 10px}
.wtrow{display:grid;grid-template-columns:104px 1fr 34px;align-items:center;gap:10px;min-height:44px}
.wtrow span{font-family:var(--font-maru);font-weight:900;font-size:13px}
.wtrow b{font-family:var(--mono);font-weight:500;font-size:12px;text-align:right}
.rng{-webkit-appearance:none;appearance:none;width:100%;height:24px;background:transparent;cursor:pointer}
.rng::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:linear-gradient(var(--navy),var(--navy)) 0/var(--fill,50%) 100% no-repeat,var(--rule)}
.rng::-moz-range-track{height:5px;border-radius:3px;background:var(--rule)}
.rng::-moz-range-progress{height:5px;border-radius:3px;background:var(--navy)}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--yellow);border:2px solid var(--navy);margin-top:-9px}
.rng::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--yellow);border:2px solid var(--navy)}
.curve{display:none;flex-direction:column;gap:8px;padding:4px 0 10px}
.curve.show{display:flex}
.curve label{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--text2)}
.curve label span{flex:1}
.curve input{width:90px;text-align:right;padding:8px 10px;font-size:14px}
.set-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 0}
.set-foot .btn-primary{min-height:48px;padding:0 28px;font-size:15px}

/* AI・カレンダー連携の紙 */
.url-box{background:var(--surface2);border:1.5px dashed var(--line-dash);border-radius:var(--radius-sm);padding:10px 12px;font-size:12px;font-family:var(--mono);color:var(--text2);word-break:break-all;cursor:pointer;user-select:all}
.info{background:var(--surface2);border-radius:var(--radius-sm);padding:12px 14px;font-size:12px;color:var(--text2);line-height:1.8}
.info b{color:var(--text)}
.info h4{font-family:var(--font-maru);font-weight:900;font-size:13px;color:var(--text);margin-bottom:4px}
details.info summary{cursor:pointer;font-family:var(--font-maru);font-weight:700}

/* ── 結果の紙（ダイス・ガチャ）・排出率・レベルアップ ── */
#dice-overlay{position:fixed;inset:0;z-index:9000;background:rgba(28,35,64,.55);display:flex;align-items:center;justify-content:center;padding:24px;animation:ovIn .18s ease-out}
#dice-overlay.sheet-mode{align-items:flex-end;padding:0}
.dice-stage{position:relative;width:100%;max-width:340px;display:flex;flex-direction:column;gap:12px;align-items:stretch}
#dice-overlay.sheet-mode .dice-stage{max-width:560px}
.rpaper{position:relative;background:#fff;border-radius:var(--radius-paper);box-shadow:var(--shadow-lift);padding:30px 18px 20px;text-align:center;transform:rotate(-1deg);display:flex;flex-direction:column;align-items:center;gap:6px;animation:rpPop .45s cubic-bezier(.2,1.5,.4,1)}
@keyframes rpPop{0%{transform:scale(.4) rotate(-6deg);opacity:0}100%{transform:rotate(-1deg);opacity:1}}
.rpaper .tape{left:50%;transform:translateX(-50%) rotate(-2deg);top:-11px;padding:4px 18px;min-width:110px;text-align:center}
.rpaper .tape.blank{min-width:0;width:120px;height:26px;padding:0;background:rgba(243,207,226,.9)}
.stamp{position:absolute;right:-10px;top:-18px;width:62px;height:62px;border-radius:50%;border:2px solid var(--sakura-ink);background:rgba(255,255,255,.92);color:var(--sakura-ink);transform:rotate(12deg);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font-maru);font-weight:900;font-size:14px;line-height:1.1;animation:stampIn .35s .25s both cubic-bezier(.2,1.6,.4,1)}
.stamp small{font-size:9px;letter-spacing:1px}
.stamp.SR{border-color:#9a7000;color:#9a7000}.stamp.R{border-color:var(--cyan-ink);color:var(--cyan-ink)}.stamp.N{border-color:var(--text3);color:var(--text3)}
@keyframes stampIn{0%{transform:scale(2) rotate(12deg);opacity:0}100%{transform:rotate(12deg);opacity:1}}
.rp-lbl{font-family:var(--font-maru);font-weight:700;font-size:12px;color:var(--text3)}
.rp-title{font-family:var(--font-maru);font-weight:900;font-size:var(--fs-title);line-height:1.35;overflow-wrap:anywhere}
.rp-sub{font-size:12px;color:var(--text3)}
.rp-new{position:absolute;left:18px;top:26px;background:var(--navy);color:var(--yellow-soft);font-family:var(--font-maru);font-weight:900;font-size:11px;padding:3px 9px;border-radius:4px;transform:rotate(-4deg)}
.rp-art{height:150px;display:flex;align-items:center;justify-content:center;margin:8px 0 2px}
.rp-art .item-ic{max-height:150px!important;height:150px!important;width:auto;max-width:220px!important}
.rp-acts{display:flex;flex-direction:column;gap:10px}
.rp-acts .btn{width:100%}
.rp-acts .btn-primary{min-height:52px}
.rp-acts .btn-outline{background:#fff;border:none;min-height:46px}
.rp-acts .btn-ghost{background:transparent;border:1.5px solid rgba(255,243,214,.6);color:var(--cream-text);min-height:46px}
.rp-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rp-link{align-self:center;background:none;border:none;color:var(--cream-text);font-family:var(--font-maru);font-weight:700;font-size:12px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:4px}
/* 振っている間 */
.roll{display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--cream-text)}
.roll-lbl{font-family:var(--font-maru);font-weight:700;font-size:13px;opacity:.9}
.roll-die{width:84px;height:84px;border-radius:18px;background:#fff;color:var(--navy);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lift)}
.roll-die .ic{width:56px;height:56px}
.roll-die.spin{animation:diceSpin .45s linear infinite,diceHop .45s ease-in-out infinite}
@keyframes diceSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes diceHop{0%,100%{translate:0 0}50%{translate:0 -16px}}
.roll-slot{width:100%;min-height:58px;padding:14px 16px;border-radius:var(--radius-paper);background:#fff;color:var(--text);font-family:var(--font-maru);font-weight:900;font-size:17px;text-align:center;overflow-wrap:anywhere;box-shadow:var(--shadow-hero);transform:rotate(-1deg)}
.roll-slot.tick{animation:diceTick .09s ease-out}
@keyframes diceTick{from{transform:rotate(-1deg) translateY(-6px);opacity:.4}to{transform:rotate(-1deg);opacity:1}}
.egg{width:96px;height:96px;border-radius:50%;background:#fff;color:var(--navy);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lift)}
.egg .ic{width:60px;height:60px}
.egg.shake{animation:gachaShake .12s linear infinite}
@keyframes gachaShake{0%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}100%{transform:rotate(-10deg)}}
.dice-confetti{position:fixed;top:-12px;width:8px;height:8px;border-radius:1px;z-index:9001;pointer-events:none;animation:diceFall linear forwards}
@keyframes diceFall{to{transform:translateY(105vh) rotate(540deg)}}
/* 排出率 */
.rate-sub{font-size:11px;color:var(--text3);text-align:center;margin-top:-8px}
.rate-list{border-top:1px solid var(--rule)}
.rate-row{display:flex;align-items:center;gap:10px;min-height:38px;border-bottom:1px solid var(--rule);font-size:13.5px}
.rate-row .pc{font-family:var(--mono);font-weight:500;font-size:12px;width:42px;text-align:right;flex:0 0 auto}
.rate-row .bb{width:60px;height:6px;border-radius:3px;background:var(--rule);overflow:hidden;flex:0 0 auto}
.rate-row .bb i{display:block;height:100%;background:var(--navy);border-radius:3px}
.rate-row .tt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rate-row .ld{font-family:var(--font-maru);font-weight:900;font-size:10.5px;padding:1px 7px;border-radius:3px;flex:0 0 auto}
.rate-row .ld.light{background:var(--cyan-pale);color:var(--cyan-ink)}
.rate-row .ld.mid{background:var(--yellow-light);color:#7a5800}
/* レベルアップ */
#levelup-overlay{position:fixed;inset:0;z-index:9999;background:rgba(28,35,64,.55);display:flex;align-items:center;justify-content:center;padding:24px;cursor:pointer;opacity:0;transition:opacity .3s ease}
#levelup-overlay.show{opacity:1}
#levelup-overlay.hide{opacity:0;transition:opacity .5s ease}
.lvup{display:flex;flex-direction:column;align-items:center;gap:0;width:100%;max-width:320px;animation:levelup-pop .45s cubic-bezier(.17,.67,.35,1.4) both}
@keyframes levelup-pop{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.lvup-badge{background:var(--sakura-ink);color:#fff;font-family:var(--font-maru);font-weight:900;font-size:18px;padding:8px 20px;border-radius:6px;transform:rotate(-3deg);box-shadow:0 4px 0 rgba(28,35,64,.35);letter-spacing:1px}
.lvup-lv{font-family:var(--font-maru);font-weight:900;font-size:92px;line-height:1.1;color:#fff9ec;-webkit-text-stroke:8px var(--navy);paint-order:stroke fill;margin:6px 0 2px;letter-spacing:1px}
.lvup-paper{position:relative;width:100%;background:#fff;border-radius:var(--radius-paper);box-shadow:var(--shadow-lift);padding:20px 18px 12px;display:flex;flex-direction:column}
.lvup-paper .tape{left:50%;transform:translateX(-50%) rotate(-2deg);width:96px;height:22px;padding:0;background:rgba(143,216,234,.75)}
.lvup-paper div{display:flex;align-items:center;gap:8px;min-height:38px;font-size:13px;color:var(--text2)}
.lvup-paper div + div{border-top:1px dashed var(--border)}
.lvup-paper div b{font-family:var(--font-maru);font-weight:900;color:var(--text)}
.lvup-paper .ic{width:16px;height:16px;color:var(--text3)}
.lvup-close{margin-top:14px;font-size:12px;color:var(--cream-text);opacity:.85;font-family:var(--font-maru)}

/* ── おへや ── */
#room-view{display:flex;flex-direction:column;gap:14px}
.room-left{display:flex;flex-direction:column;gap:12px}
.room-right{display:flex;flex-direction:column}
/* 図鑑の時におへやを隠すのはやめた（2026-10-01、room.js の renderRoomPanel） */
.room-stage-paper{padding:10px}
.room-stage-paper .hm-stage{border-radius:4px}
.room-name{display:flex;align-items:center;gap:6px;padding:10px 4px 2px}
.room-name b{font-family:var(--font-maru);font-weight:900;font-size:15px}
.room-name .rn-edit{background:none;border:none;color:var(--text3);cursor:pointer;width:28px;height:28px;display:flex;align-items:center;justify-content:center;padding:0}
.room-name .rn-edit .ic{width:14px;height:14px}
.room-name .grow{flex:1}
.room-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.room-acts .btn{min-height:48px;font-size:14px}
.room-acts .btn-outline img{height:20px;width:auto}
.room-acts small{font-size:11px;font-weight:700}
.idx{display:flex;align-items:flex-end;gap:4px;padding:0 4px;margin-bottom:-1px;position:relative;z-index:1}
.idx-t{height:36px;padding:0 14px;border-radius:8px 8px 0 0;border:1.5px dashed var(--line-dash);border-bottom:none;background:transparent;cursor:pointer;font-family:var(--font-maru);font-weight:700;font-size:12.5px;color:var(--text2);display:flex;align-items:center;gap:4px}
.idx-t.on{background:#fff;border:none;height:40px;font-weight:900;color:var(--text);box-shadow:0 -3px 8px rgba(28,35,64,.05)}
.idx-t small{font-family:var(--mono);font-size:10.5px;font-weight:500}
.idx .grow{flex:1}
.idx-r{align-self:center;display:flex;align-items:center;gap:4px;background:none;border:none;cursor:pointer;font-family:var(--font-maru);font-weight:900;font-size:12px;color:var(--text);padding:6px 2px}
.idx-r .ic{width:15px;height:15px}
.idx-r:disabled{opacity:.4;cursor:default}
.idx-body{border-radius:0 var(--radius-paper) var(--radius-paper) var(--radius-paper)}
.idx-body.first{border-top-left-radius:0}
.place{padding:2px 12px}
.prow{display:flex;align-items:center;gap:8px;min-height:62px;border-bottom:1px solid var(--rule);padding:6px 0}
.prow:last-child{border-bottom:none}
.prow-n{width:88px;flex:0 0 auto;display:flex;flex-direction:column;line-height:1.35}
.prow-n b{font-family:var(--font-maru);font-weight:900;font-size:13px}
.prow-n small{font-size:10.5px;color:var(--text3)}
.prow-s{flex:1;display:flex;gap:6px;flex-wrap:wrap;align-items:center;min-width:0}
.pcell{width:44px;height:44px;border-radius:6px;background:var(--surface2);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:3px;position:relative}
.pcell .item-ic{max-width:100%!important;max-height:100%!important;height:auto!important;width:auto}
.pcell .cnt{position:absolute;right:-3px;bottom:-3px;font-family:var(--mono);font-size:9px;background:var(--navy);color:#fff;border-radius:6px;padding:0 4px;line-height:1.5}
.pplus{width:34px;height:34px;border-radius:6px;border:1.5px dashed var(--line-dash);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;margin-left:auto;color:var(--text3);flex:0 0 auto}
.pplus .ic{width:16px;height:16px}
.pplus.inl{margin-left:0;width:44px;height:44px}
.place-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 2px 8px;font-size:11px;color:var(--text3)}
.place-foot span{display:flex;align-items:center;gap:4px}
.place-foot .ic{width:13px;height:13px}
.intr{padding:12px}
.intr .filters{margin-bottom:12px}
.swatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.swatch{position:relative;display:flex;flex-direction:column;gap:5px;background:none;border:none;padding:0;cursor:pointer;text-align:left}
.swatch i{display:block;height:74px;border-radius:6px;background-color:var(--surface2);background-size:200% auto;background-position:50% 8%;background-repeat:no-repeat;box-shadow:inset 0 0 0 1px var(--border)}
.swatch.k-floor i,.swatch.k-rug i{background-position:50% 88%}
.swatch.k-window i,.swatch.k-light i,.swatch.k-trim i{background-size:contain;background-position:center}
.swatch span{font-family:var(--font-maru);font-weight:900;font-size:12px;line-height:1.35}
.swatch.on i{box-shadow:inset 0 0 0 2.5px var(--navy)}
.swatch.on::after{content:"";position:absolute;right:-5px;top:-5px;width:20px;height:20px;border-radius:50%;background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff3d6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4 4 9-9.5'/%3E%3C/svg%3E") center/13px no-repeat}
.swatch.locked{cursor:default}
.swatch.locked i{filter:grayscale(.6) opacity(.45)}
.swatch.locked span{color:var(--text3);display:flex;align-items:center;gap:4px}
.swatch.locked span .ic{width:12px;height:12px}
.swatch .none{display:flex;align-items:center;justify-content:center;font-family:var(--font-maru);font-size:11px;color:var(--text3);border:1.5px dashed var(--line-dash);box-shadow:none;background:transparent}
.dex{padding:12px}
.dex .filters{margin-bottom:12px}
.dex-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.dex-c{aspect-ratio:1;min-width:0;border-radius:6px;background:var(--surface2);border:none;position:relative;display:block;padding:0;cursor:pointer;box-shadow:inset 0 0 0 1px var(--border);overflow:hidden}
/* iPhone（Safari）は縦横比で高さを決めたマスの中の max-height:80% を効かせず、絵が元の大きさで出てマスごと広がった（2026-09-28 リオのスクショ）。絵は絶対位置で幅・高さを決める */
.dex-c .item-ic,.dex-c > span{position:absolute;left:10%;top:8%;width:80%!important;height:74%!important;max-width:none!important;max-height:none!important;margin:0;object-fit:contain;display:flex;align-items:center;justify-content:center}
.dex-c em{position:absolute;left:5px;bottom:3px;font-style:normal;font-family:var(--mono);font-size:9.5px;font-weight:500}
.dex-c.no{background:transparent;box-shadow:none;border:1.5px dashed var(--line-dash);cursor:default}
.dex-c.sel{box-shadow:inset 0 0 0 2px var(--navy)}
.r-SSR{color:var(--sakura-ink)}.r-SR{color:#9a7000}.r-R{color:var(--cyan-ink)}.r-N{color:var(--text3)}
.dex-d{margin-top:12px;background:var(--surface2);border-radius:var(--radius-sm);padding:10px 12px;display:flex;align-items:center;gap:12px}
.dex-d .item-ic{height:48px!important;width:auto;max-width:64px!important}
.dex-d div{flex:1;min-width:0;display:flex;flex-direction:column}
.dex-d b{font-family:var(--font-maru);font-weight:900;font-size:15px}
.dex-d small{font-size:11px;color:var(--text3)}
.dex-d .btn{min-height:40px;padding:0 16px}
.dex-foot{text-align:center;margin-top:10px}
/* 置き場の一覧 */
.sp-now{display:flex;align-items:center;gap:10px;background:var(--surface2);border-radius:var(--radius-sm);padding:10px 12px;font-size:13px}
.sp-now .item-ic{height:30px!important;width:auto;max-width:48px!important}
.sp-now span{flex:1;min-width:0}
.sp-now b{font-family:var(--font-maru);font-weight:900}
.sp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sp-c{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px 8px;border-radius:6px;cursor:pointer;background:var(--surface2);border:none;position:relative;min-height:104px}
.sp-c.new{background:#fff;border:1.5px dashed var(--line-dash)}
.sp-c.here{box-shadow:inset 0 0 0 2px var(--navy)}
.sp-c .art{height:48px;display:flex;align-items:center;justify-content:center}
.sp-c .art .item-ic,.sp-c .art img{height:auto!important;max-height:48px!important;width:auto;max-width:64px!important}
.sp-c b{font-family:var(--font-maru);font-weight:900;font-size:11.5px;line-height:1.3;text-align:center;margin-top:4px}
.sp-c small{font-size:10px;color:var(--text3);font-family:var(--mono);line-height:1.3}
.sp-c small.r{font-weight:500}
.sp-c .cnt{position:absolute;right:6px;top:4px;font-family:var(--mono);font-size:9.5px;color:var(--text3)}
.item-ic{display:block;object-fit:contain;margin:0 auto}
.item-ic.inl{display:inline-block;vertical-align:middle;margin:0 2px}
/* はじめの1匹 */
.pet{padding:34px 20px 20px;display:flex;flex-direction:column;gap:14px;align-items:stretch;max-width:340px;margin:24px auto 0;width:100%}
.pet .sheet-h{margin-bottom:2px}
.pet-breeds{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.pet-breed{position:relative;width:174px;border-radius:12px;border:1.5px dashed var(--line-dash);background:var(--surface2);padding:14px 8px 10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--font-maru);font-weight:900;font-size:13px}
.pet-breed img{height:120px;width:auto}
.pet-breed.on{border:2px solid var(--navy)}
.pet-breed.on::after{content:"";position:absolute;right:-8px;top:-8px;width:22px;height:22px;border-radius:50%;background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff3d6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4 4 9-9.5'/%3E%3C/svg%3E") center/14px no-repeat}
.pet .btn-primary{min-height:52px}
/* PCのタスク画面の横のおへや */
#side-room{display:none}

/* ── ログイン ── */
#auth-screen{min-height:100vh}
.auth-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 20px}
.auth-art{height:130px;width:auto}
.auth-title{font-family:var(--font-maru);font-weight:900;font-size:34px;letter-spacing:6px;margin-top:6px;line-height:1.3}
.auth-sub{font-family:var(--font-maru);font-size:12px;color:var(--text3);letter-spacing:1px;margin:4px 0 26px}
.auth-card{width:100%;max-width:340px;padding:30px 18px 18px;display:flex;flex-direction:column;gap:6px}
.auth-field{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.auth-field label{font-family:var(--font-maru);font-weight:900;font-size:11px;color:var(--text4);letter-spacing:1px}
.auth-card .btn{width:100%;min-height:50px;font-size:15px;margin-top:4px}
.auth-switch{text-align:center;margin-top:10px;font-size:13px;color:var(--text2)}
.auth-switch a{color:var(--text);cursor:pointer;text-decoration:underline;font-weight:700;text-underline-offset:3px}
.auth-error{background:#fdf2f6;border:1px solid #e9b9cd;color:var(--sakura-ink);padding:8px 12px;border-radius:var(--radius-sm);font-size:12.5px;margin-bottom:10px;display:none}
.auth-error.show{display:block}

/* ── PC（1000px 以上） ── */
@media(min-width:1000px){
  body{padding-bottom:32px}
  body.dock-on{padding-bottom:32px}
  .hd{padding:14px 24px}
  .hd-tabs{display:flex;gap:4px;justify-self:start}
  .hd-tab{display:flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:8px;border:none;background:none;cursor:pointer;color:var(--cream-text);opacity:.75;font-family:var(--font-maru);font-weight:700;font-size:13px}
  .hd-tab .ic{width:16px;height:16px}
  .hd-tab.on{opacity:1;background:rgba(255,243,214,.1);color:var(--yellow-soft);font-weight:900}
  .hd-title{font-size:21px}
  .tabbar{display:none}
  .container{max-width:1280px;padding:24px 32px 0}
  .dock{left:auto;right:24px;bottom:24px;width:380px;max-width:none}
  .toast{bottom:32px}
  body.dock-on .toast{bottom:100px}
  /* きょう・ぜんぶ：左に全部・右に400pxのおへや（各列は高さいっぱいに伸ばして下の端をそろえる） */
  body.wide[data-view="tasks"] .container,body.wide[data-view="list"] .container{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:28px;align-items:stretch}
  body.wide #side-room:not([hidden]){display:flex;flex-direction:column;gap:16px}
  #view-tasks,#view-list{min-width:0;display:flex;flex-direction:column}
  .fc-main{display:flex;flex-direction:column;gap:16px;min-width:0}
  #focus-view.view{gap:16px}
  .fc-date .btn-navy{min-height:40px;font-size:13px;padding:0 18px}
  .fc-grid{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:16px;align-items:stretch}
  .fc-left .hero{flex:1}
  .next.paper{display:flex;flex-direction:column;padding:14px 16px 10px}
  .next .lrow{min-height:50px}
  .next .more-row{margin-top:auto}
  .hero-acts{grid-template-columns:1.6fr 1fr .85fr .85fr}
  .hero-acts .btn-primary{grid-column:auto}
  .ts-foot{flex-direction:row;justify-content:space-between;align-items:center}
  .ts-foot .btn-primary{padding:0 28px}
  .room-bar .btn small{font-size:11px}
  .work-stage,#work-stage{display:none!important}
  .st-2 .bars{--bh:340px}
  .hero-title{font-size:32px}
  .hero-pc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;border-top:1.5px dashed var(--border);padding-top:16px;margin-top:4px}
  .hero-meta{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;font-size:13px;align-content:start}
  .hero-meta dt{font-family:var(--font-maru);font-weight:900;font-size:11.5px;color:var(--text3)}
  .hero-meta dd{color:var(--text)}
  .hero-meta dd em{font-style:normal;color:var(--sakura-ink);font-weight:700}
  .memo{position:relative;grid-column:1/-1;margin-top:8px;background:#fff6c7;padding:16px 14px 12px;font-size:13px;line-height:1.7;box-shadow:0 4px 10px rgba(28,35,64,.08);transform:rotate(-.6deg);max-width:230px;white-space:pre-wrap;overflow-wrap:anywhere}
  .memo::before{content:"";position:absolute;top:-6px;left:18px;width:44px;height:12px;background:rgba(243,207,226,.8);transform:rotate(-3deg)}
  .hero-dial{display:flex;flex-direction:column;align-items:center;gap:12px}
  .hero-dial .dial{--d:146px}
  .hero-dial .btn-navy{min-height:34px;height:34px;padding:0 14px;border-radius:17px;font-size:12px}
  .hero-dial .btn-navy .ic{width:12px;height:12px}
  .hero-acts{margin-top:10px}
  .hero-acts .btn-primary{min-height:56px;margin:0}
  .hero-acts .btn-dash{min-height:52px}
  .others{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .other{padding:22px 14px 12px;display:flex;align-items:center;gap:10px}
  .other div{flex:1;min-width:0;display:flex;flex-direction:column}
  .other b{font-family:var(--font-maru);font-weight:900;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .other small{font-size:10.5px;font-weight:700;color:var(--text3)}
  .other small.warn{color:var(--sakura-ink)}
  .other .btn{min-height:40px;font-size:12px;padding:0 14px}
  .side-room{display:flex;flex-direction:column;gap:16px}
  .side-stage{padding:10px 10px 12px;display:flex;flex-direction:column;gap:10px}
  .side-stage .room-name{padding:2px 2px 0}
  .side-stage .room-acts .btn{min-height:40px;font-size:13px}
  .done-list{padding:24px 14px 10px;flex:1;display:flex;flex-direction:column}
  .done-list .arow{min-height:44px}
  .done-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:12px;font-size:11.5px;color:var(--text3)}
  .done-foot span{display:flex;align-items:center;gap:6px}
  .done-foot b{font-size:13px}
  .done-foot b{font-family:var(--mono);font-weight:500;color:var(--text)}
  .side-timer{padding:14px 16px;display:flex;align-items:center;gap:14px}
  .side-timer > div:not(.dial):not(.acts){flex:1;min-width:0;display:flex;flex-direction:column}   /* 動いている時は文字盤（.dial）も直下の div になる。伸びて楕円になっていた（2026-09-30 リオ「全部のところのポモドーロタイマーがなんか歪んじゃってた」） */
  .side-timer b{font-family:var(--font-maru);font-weight:900;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .side-timer small{font-size:11px;color:var(--text3)}
  .side-timer .acts{display:flex;gap:6px;flex-direction:row;flex:0 0 auto}
  /* ぜんぶ（表） */
  .tl-head{display:grid;grid-template-columns:4px 24px minmax(0,1fr) 220px 60px 40px;gap:12px;padding:12px 16px 8px;font-family:var(--font-maru);font-weight:700;font-size:11px;color:var(--text4);border-bottom:1px solid var(--border)}
  .tl-head span:nth-child(5){text-align:right}
  .tlist{padding:4px 16px}
  .trow{display:grid;grid-template-columns:4px 24px minmax(0,1fr) 220px 60px 40px;gap:12px;min-height:47px;padding:0}
  .trow .dotc{width:24px;height:24px}
  .trow-b small{display:none}
  .trow-c{display:block;font-size:11.5px;font-weight:700;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .trow-c.warn{color:var(--sakura-ink)}
  .trow .pt{text-align:right;font-size:11px}
  .list-top{flex-direction:row;align-items:center;gap:14px;flex-wrap:wrap}
  .list-top .btn-navy{min-height:40px;padding:0 18px}
  .list-top .grow{flex:1}
  /* その他の中：左220pxにメニュー */
  body.wide-menu .sub-view:not([hidden]){display:grid!important;grid-template-columns:220px minmax(0,1fr);gap:28px;align-items:start}
  body.wide-menu .side-menu{display:flex;flex-direction:column;padding:8px;position:sticky;top:88px}
  body.wide-menu .sub-view .pg-back{display:none}
  .side-menu .mrow{min-height:44px;border-bottom:none;border-radius:8px;padding:0 12px;font-size:13.5px}
  .side-menu .mrow .chev,.side-menu .mrow small{display:none}
  .side-menu .mrow > .ic{width:16px;height:16px}
  .side-menu hr{border:none;border-top:1.5px dashed var(--border);margin:6px 4px}
  .side-menu .mrow.danger{color:var(--danger);font-size:13px}
  .st-2{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;align-items:stretch}
  #view-menu .view{max-width:560px}
  /* おへや：舞台を大きく、右380pxに置く・内装・図鑑 */
  body.wide #room-view{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:stretch}
  .room-left{display:flex;flex-direction:column}
  .room-left .room-stage-paper{flex:1;display:flex;flex-direction:column;padding:14px 14px 12px}
  .room-left .room-bar{display:flex;align-items:center;gap:10px;padding-top:12px}
  .room-left .room-bar .room-name{flex:1;padding:0 4px}
  .room-left .room-bar .btn{min-height:42px;font-size:13px;padding:0 14px}
  .room-right{display:flex;flex-direction:column;min-height:0}
  .room-right .idx-body{flex:1;display:flex;flex-direction:column}
  .room-right .place{flex:1}
  .room-right .dex-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* 紙（モーダル）は真ん中に */
  .sheet-ov{align-items:center;padding:24px}
  .sheet{max-width:560px;border-radius:var(--radius-paper);padding:0;background:transparent;box-shadow:none;animation:sheetIn .2s ease}
  @keyframes sheetIn{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
  .sheet .grab{display:none}
  .sheet-paper{box-shadow:var(--shadow-lift);padding:30px 28px 24px}
  .sheet-x{display:flex}
  #dice-overlay.sheet-mode{align-items:center;padding:24px}
}
@media(max-width:999px){
  .pc-only{display:none!important}
}
@media(min-width:1000px){
  .sp-only{display:none!important}
}
@media(max-width:374px){
  .hero-title{font-size:21px}
  .lane{font-size:12px}
  .lane.on{font-size:13.5px}
  .dial{--d:128px}
  .dial-t{font-size:29px}
}
@media (prefers-reduced-motion: reduce){
  .roll-die.spin,.egg.shake,.rpaper,.stamp,.lvup,.sheet,.dotc.done{animation:none}
  .dice-confetti{display:none}
}
/* PC：列の下の端をそろえる（画面の高さいっぱいに伸ばす） */
@media(min-width:1000px){
  body.wide[data-view="tasks"] .container,body.wide[data-view="list"] .container{min-height:calc(100vh - 64px - 32px)}
  #focus-view{flex:1}
  #focus-view .fc-grid{flex:1}
  #task-list{flex:1}
  #task-list > .paper{flex:1;display:flex;flex-direction:column}
  #task-list > .paper .more-row{margin-top:auto}
  #side-done .done-list{flex:1}
}
/* 細かい直し（2026-09-28 確認後） */
.hero-acts .btn-dash{padding:0 4px;gap:5px;white-space:nowrap}
.add-mode .sheet-foot .grow{display:none}
.srow > span.tm-unit{flex:0 0 28px}
.srow .stp{margin-left:auto}
body.timer-running .rest-msg{display:none}
@media(min-width:1000px){.fc-left .hero:not(.work) .hero-pc{flex:1}}
/* 舞台の中の重なり順（家具・名札は z-index 3000 まで）を紙の中に閉じ込める。閉じ込めないと下から出る紙やヘッダーの上に出る */
.room-stage-paper,.side-stage,.stage-paper,.pip-stage,#room-stage,#side-stage,#work-stage-in{isolation:isolate}
.rrow .tag{width:64px;font-size:9.5px;padding:2px 0;letter-spacing:-.2px;text-overflow:clip}
@media(min-width:1000px){.fc-grid > .pc-only > .next{flex:1}}
.dex-grid .dex-d{grid-column:1/-1;margin:2px 0 4px}
/* 「つぎ」の行：名前＋1行の補足＋pt＋▶（2026-09-28） */
.nrow{min-height:54px;padding:6px 0}
.nrow .trow-b b{font-weight:500}
.nrow .btn-icon{width:34px;height:34px;min-height:34px;flex:0 0 auto}
.nrow .btn-icon .ic{width:14px;height:14px;margin-left:2px}
.nrow .btn-icon.on{background:var(--navy);border:1.5px solid var(--navy);color:var(--yellow-soft)}
@media(min-width:1000px){.next .nrow{min-height:52px}}
@media(min-width:1000px){.nrow .trow-b small{display:block}}
/* 季節の家具（2026-10-01〜）の札と、今月の家具の案内 */
.stag{display:inline-block;font-style:normal;font-family:var(--font-maru);font-weight:900;font-size:10.5px;line-height:1.5;padding:1px 8px;background:var(--tape-heavy);color:var(--text);transform:rotate(-2deg);margin-right:6px;white-space:nowrap}
.dex-stag{position:absolute;left:3px;top:4px;font-size:9.5px;padding:0 5px;margin:0;z-index:1}
.season-note{display:flex;align-items:center;flex-wrap:wrap;gap:2px;font-family:var(--font-maru);font-weight:700;font-size:12px;color:var(--text2);padding:0 4px}
.rpaper .stag{margin:0 0 -2px}
.rate-row .tt small.note{font-size:10.5px}
/* 季節のピックアップ演出（2026-09-29、叩き台。見た目の最終判断はリオ）：斜めの帯が横から差し込む。色はその月のテーマ（--pa・--pb） */
.pu{position:relative;width:100%;height:50vh}
.pu-band{position:fixed;left:-12vw;right:-12vw;top:38%;transform:rotate(-6deg);background:linear-gradient(90deg,var(--pa),var(--pb));color:#fff;text-align:center;padding:16px 0 14px;display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:0 12px 30px rgba(28,35,64,.3);animation:puIn .5s cubic-bezier(.2,1.25,.4,1) both}
.pu-band::before,.pu-band::after{content:"";position:absolute;left:0;right:0;height:4px;background:repeating-linear-gradient(90deg,#fff 0 14px,transparent 14px 26px);opacity:.7}
.pu-band::before{top:6px}.pu-band::after{bottom:6px}
.pu-band small{font-family:var(--font-maru);font-weight:900;font-size:13px;letter-spacing:5px;opacity:.95}
.pu-band b{font-family:var(--font-maru);font-weight:900;font-size:36px;line-height:1.2;letter-spacing:3px;color:#fff;-webkit-text-stroke:6px var(--pa);paint-order:stroke fill}
.pu-band i{font-style:normal;font-family:var(--font-maru);font-weight:700;font-size:12px;letter-spacing:2px;opacity:.9}
@keyframes puIn{0%{transform:translateX(-110%) rotate(-6deg)}100%{transform:rotate(-6deg)}}
.rpaper.season{box-shadow:0 0 0 3px var(--pb),var(--shadow-lift)}
.rpaper.season .tape.blank{background:var(--pb);opacity:.9}
.rpaper.season .stag{background:var(--pb);color:#fff}
.stamp.season{border-color:var(--pa);color:var(--pa);font-size:16px}
@media (prefers-reduced-motion: reduce){.pu-band{animation:none}}
/* 作業中の紙（2026-09-29 リオ「文字が多いのと、ハムスターの部屋が切れる」）：右上の札でほかのタスクへ・スマホは詰めて舞台が画面に収まるように */
.work-peek{position:absolute;top:-11px;right:14px;z-index:1;display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 11px;background:#fff;border:1.5px dashed var(--line-dash);transform:rotate(1.5deg);font-family:var(--font-maru);font-weight:900;font-size:11.5px;color:var(--text2);cursor:pointer;white-space:nowrap}
.work-peek .ic{width:13px;height:13px}
.stage-paper{position:relative}
.stage-feed{position:absolute;right:14px;bottom:14px;z-index:5;display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 12px 0 8px;border-radius:17px;background:rgba(255,255,255,.94);border:1.5px solid var(--navy);font-family:var(--font-maru);font-weight:900;font-size:12px;color:var(--text);cursor:pointer;box-shadow:0 2px 6px rgba(28,35,64,.15)}
.stage-feed .seed-ic{margin:0}
.stage-feed:disabled{opacity:.5;cursor:default}
@media(max-width:999px){
  .hero.work{gap:8px;padding:20px 14px 10px}
  .work .dial{--d:128px}
  .work .dial-t{font-size:30px}
  .work .work-title{font-size:19px}
  .work .btn-primary{min-height:50px}
  .work .btn-row .btn-dash{min-height:42px}
  #work-stage{margin-top:12px!important}
}

/* ガチャの溜め・予告・開く（2026-09-29 リオ「なんかガチャ演出さみしい」→叩き台。見た目の最終判断はリオ） */
.gacha-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--cream-text)}
.gacha-stage > :not(.gacha-rays){position:relative;z-index:1}
.gacha-rays{--ray:rgba(255,243,214,.16);position:absolute;left:50%;top:50%;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;pointer-events:none;z-index:0;
  background:repeating-conic-gradient(var(--ray) 0 9deg,transparent 9deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 18%,transparent 66%);mask:radial-gradient(circle,#000 18%,transparent 66%);
  animation:raySpin 9s linear infinite}
.dice-stage > .gacha-rays{top:40%}
.dice-stage > .rpaper,.dice-stage > .rp-acts{position:relative;z-index:1}
@keyframes raySpin{to{transform:rotate(360deg)}}
.gacha-rays[data-r="N"],[data-r="N"] .gacha-rays{--ray:rgba(255,243,214,.22)}
.gacha-rays[data-r="R"],[data-r="R"] .gacha-rays{--ray:rgba(143,216,234,.5);animation-duration:6s}
.gacha-rays[data-r="SR"],[data-r="SR"] .gacha-rays{--ray:rgba(245,200,66,.55);animation-duration:4.5s}
.gacha-rays[data-r="SSR"],[data-r="SSR"] .gacha-rays{--ray:rgba(243,207,226,.75);animation-duration:3s}
.gacha-rays[data-r="season"],[data-r="season"] .gacha-rays{--ray:rgba(240,160,75,.55);animation-duration:3.5s}
.egg.charge{animation:gachaShake .055s linear infinite}
[data-r="R"] .egg.charge{box-shadow:0 0 0 5px rgba(143,216,234,.6),0 0 36px rgba(143,216,234,.7)}
[data-r="SR"] .egg.charge{box-shadow:0 0 0 6px rgba(245,200,66,.6),0 0 44px rgba(245,200,66,.8)}
[data-r="SSR"] .egg.charge{box-shadow:0 0 0 6px rgba(243,207,226,.8),0 0 56px rgba(240,184,207,.95)}
[data-r="season"] .egg.charge{box-shadow:0 0 0 6px rgba(240,160,75,.7),0 0 50px rgba(107,74,138,.8)}
.gacha-flash{position:fixed;inset:0;z-index:9002;background:#fff;pointer-events:none;animation:gachaFlash .55s ease-out forwards}
@keyframes gachaFlash{0%{opacity:.95}100%{opacity:0}}
@media (prefers-reduced-motion: reduce){.gacha-rays{animation:none}.gacha-flash{display:none}.egg.charge{animation:none}}

/* 舞台を紙で覆って、ハムスターが描けてから出す（room-frame.js の mountStageSmooth、2026-09-29） */
#room-stage,#side-stage,#work-stage-in,#pip-stage{position:relative}
.stage-cover{position:absolute;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;border-radius:4px;
  background:var(--surface,#fff) radial-gradient(var(--dot,rgba(184,164,120,.3)) 1px,transparent 1.4px) 0 0/14px 14px;transition:opacity .38s ease}
.stage-cover.out{opacity:0;pointer-events:none}
.stage-cover .sc-msg{display:flex;align-items:center;gap:6px;font-family:var(--font-maru);font-weight:700;font-size:13px;color:var(--text3,#8a7f66);
  opacity:0;animation:scMsgIn .3s ease .35s forwards}
.stage-cover.now .sc-msg{animation:none;opacity:1}
.stage-cover .sc-msg img{height:18px;width:auto;animation:scSeedBob 1.1s ease-in-out infinite}
@keyframes scMsgIn{to{opacity:1}}
@keyframes scSeedBob{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-4px) rotate(8deg)}}
@media (prefers-reduced-motion: reduce){.stage-cover .sc-msg img{animation:none}}

/* 天井：次に引くと必ず新しい家具（room.js の pityReady、2026-09-29 リオ「次引くと新しい家具！の演出だけほしいかも」） */
.rp-pity{margin-top:8px;align-self:stretch;display:flex;justify-content:center;animation:pityIn .5s .9s both cubic-bezier(.2,1.6,.4,1)}
.rp-pity b{position:relative;overflow:hidden;display:inline-block;padding:7px 18px;background:var(--sakura);color:var(--sakura-ink);font-family:var(--font-maru);font-weight:900;font-size:15px;
  border-radius:4px;transform:rotate(-2deg);box-shadow:0 3px 0 rgba(176,71,111,.18)}
.rp-pity b:after{content:'';position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);animation:pityShine 2.4s 1.4s ease-in-out infinite}
@keyframes pityIn{0%{transform:scale(2.2);opacity:0}100%{transform:none;opacity:1}}
@keyframes pityShine{0%{left:-40%}45%,100%{left:120%}}
.pity-on{position:relative;overflow:visible}
.pity-on:after{content:'次は新しい家具！';position:absolute;top:-11px;right:-6px;z-index:2;padding:2px 9px;border-radius:999px;background:var(--sakura);color:var(--sakura-ink);
  font-family:var(--font-maru);font-weight:900;font-size:10.5px;line-height:1.5;white-space:nowrap;box-shadow:0 2px 6px rgba(176,71,111,.25);transform:rotate(4deg);animation:pityBob 1.8s ease-in-out infinite;pointer-events:none}
@keyframes pityBob{0%,100%{transform:rotate(4deg) translateY(0)}50%{transform:rotate(4deg) translateY(-3px)}}
.pity-lbl{padding:6px 16px;border-radius:999px;background:var(--sakura);color:var(--sakura-ink);font-family:var(--font-maru);font-weight:900;font-size:15px;box-shadow:0 0 18px rgba(243,207,226,.8);animation:pityPulse 1s ease-in-out infinite}
@keyframes pityPulse{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@media (prefers-reduced-motion: reduce){.rp-pity,.rp-pity b:after,.pity-on:after,.pity-lbl{animation:none}}
.sfx3 .btn{padding:0 4px;font-size:12px;letter-spacing:0;white-space:nowrap}   /* 音と画面のテストの3つ（2026-09-30） */
/* 「選んで変える／タスクを付ける」の一覧（timer.js の openTaskPicker）。PCでは .trow が「ぜんぶ」の表の6列になり、名前が24pxの列に押し込まれて「卓…」になっていた（2026-09-30 リオ「選んで変えるの画面がおかしくなってた」） */
@media(min-width:1000px){
  .trow.pick{display:flex;gap:10px;min-height:54px;padding:6px 4px 6px 0}
  .trow.pick .trow-b small{display:block}
  .trow.pick .pt{flex:0 0 auto;font-size:11px}
}

/* PCのいますぐ（2026-09-30 リオ「PCのいますぐの画面バランスよくないな…」）：下の「ほかのレーンの1件」を3つ並べる・右の列のタイマーから作業中の紙にもどる */
@media(min-width:1000px){
  .others.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .others.c3 .other{flex-direction:column;align-items:stretch;gap:8px}
  .others.c3 .other .btn{align-self:flex-end}
  .side-timer .st-back{color:var(--navy);font-weight:700;margin-top:2px}
}

/* 選んで変える：いちばん上の「フリー作業にする」（2026-09-30） */
.pick-free{display:flex;gap:8px;align-items:stretch;margin:0 0 10px;padding-bottom:12px;border-bottom:1.5px dashed var(--border)}
.pick-free .inp{flex:1;min-width:0}
.pick-free .btn{flex:0 0 auto;padding:0 14px;font-size:12.5px}

/* PCの作業中の紙の下：このタスク／このあとの流れ（2026-09-30 リオ「なんか空白がさみしい」）・ほかのタスクを見ている時の文字盤の下のボタン */
@media(min-width:1000px){
  .work-more{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px;align-content:start;border-top:1.5px dashed var(--border);padding-top:16px;margin-top:6px}
  .wm-h{font-family:var(--font-maru);font-weight:900;font-size:12px;color:var(--text3);margin-bottom:10px}
  .flow{display:flex;flex-direction:column}
  .fl{display:grid;grid-template-columns:10px minmax(0,1fr) auto 52px;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--rule);font-size:13px;color:var(--text2)}
  .fl:last-of-type{border-bottom:none}
  .fl i{width:10px;height:10px;border-radius:50%;background:var(--navy);opacity:.25}
  .fl.b i{background:var(--break)}.fl.l i{background:var(--sakura-bar)}.fl.e i{background:var(--text4)}
  .fl span{font-family:var(--font-maru);font-weight:700;color:var(--text)}
  .fl em{font-style:normal;font-size:11.5px;color:var(--text3)}
  .fl b{font-family:var(--mono);font-weight:500;font-size:12px;color:var(--text3);text-align:right}
  .fl.cur{background:var(--surface2);border-radius:8px;padding:7px 8px;margin:0 -8px}
  .fl.cur i{opacity:1;box-shadow:0 0 0 3px rgba(28,35,64,.12)}
  .fl.cur span{font-weight:900}
  .fl.cur b{color:var(--navy);font-weight:700}
  .fl-note{font-size:11px;color:var(--text3);margin-top:8px}
  .work-more .memo{max-width:none}
  .hero-dial .hd-row{display:flex;align-items:center;gap:8px}
  .hero-dial .hd-row .btn-round{width:34px;height:34px;min-height:34px}
}
/* PCのおへや：右の列（置く・内装・図鑑）の高さを、左の舞台の紙に合わせる（2026-09-30 リオ「図鑑の時だけ下が間延びしてるのと大きさがちょっと小さくなる？ずれるのが気になる」）
   図鑑は中身が長く、右の列が伸びて左の紙も引き伸ばされ、ページに縦のスクロールバーが出て幅が減り、舞台が小さくなっていた。
   右の列は中身の長さで行の高さを決めない（contain:size）→ 行の高さは舞台の紙で決まり、長い中身は右の列の中でスクロール */
@media(min-width:1000px){
  body.wide #room-view > .room-right{contain:size;min-height:0}
  .room-right .idx-body{min-height:0;overflow-y:auto}
  .room-right .idx-body > *{flex-shrink:0}   /* 中で縮めない（横にスクロールする絞り込みの列が高さ0に潰れた） */
  .room-right .idx-body.dex .filters{position:sticky;top:-1px;z-index:2;background:var(--surface);padding-top:2px;box-shadow:0 -16px 0 var(--surface)}   /* 上の余白に流れてくる絵も隠す */
}

/* 作業中の紙（PC）の下の並べ方を変更（2026-09-30 リオ「この後の流れもこのタスクが侵食してきたせいで小さくなっちゃった」）：期限・通知は1行、流れは横いっぱい */
@media(min-width:1000px){
  .work-more{display:flex;flex-direction:column;gap:14px}
  .work-more .wm-meta .hero-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
  .work-more .wm-meta .hero-meta dd{margin:0 14px 0 0}
  .work-more .wm-meta .memo{margin-top:10px;transform:none}
  .fl{padding:5px 0}
  .fl.cur{padding:5px 8px}
  .hero-acts.cur{grid-template-columns:1.6fr .85fr .85fr}
}
/* PCの「きょう」の余白（2026-09-30 リオ「これに変えるが改行になってるの格好悪い」「余白が多すぎる気がする」）
   画面の下まで伸ばすのをやめ、いまの1件の紙は中身と「つぎ」の一覧の高さで決める（伸ばした分が紙の中の空白になっていた）。ボタンの文字は折り返さない */
@media(min-width:1000px){
  body.wide[data-view="tasks"] .container{min-height:0}
  body.wide[data-view="tasks"] #focus-view,body.wide[data-view="tasks"] #focus-view .fc-grid{flex:0 0 auto}
  .fc-left .hero:not(.work) .hero-pc{align-items:center}
  .hero-acts{grid-template-columns:1.9fr 1fr .85fr .85fr}
  .hero-acts .btn{white-space:nowrap}
  .hero-acts .btn-primary{font-size:15px;padding:0 10px}
}
/* PCの「ぜんぶ」の余白（2026-09-30 リオ「ぜんぶのページも変に余白ができてた」「今日できたことが間延びしてた」）
   表を画面の下まで伸ばすと12行の下が空き、「さらに」で表を長くすると右の列（きょうできたこと）が表の長さまで伸びていた。
   ぜんぶは左右とも中身の高さにする（下の端はそろえない） */
@media(min-width:1000px){
  body.wide[data-view="list"] .container{min-height:0;align-items:start}
  body.wide[data-view="list"] #task-list,body.wide[data-view="list"] #task-list > .paper{flex:0 0 auto}
  body.wide[data-view="list"] #side-done,body.wide[data-view="list"] #side-done .done-list{flex:0 0 auto!important}
}
@media(min-width:1000px){.fl-loop{font-family:var(--font-maru);font-weight:700;font-size:11px;color:var(--sakura-ink);padding:6px 0 4px 20px;border-bottom:1px dashed var(--sakura-bar)}}   /* このあとの流れ：ロング休憩のあとの区切り（2026-09-30） */

/* おへやの舞台はひとつ（room-frame.js の stageSync）。見えている置き場所が無い時の預け場所＝画面の外、大きさはある（幅0で動かさない） */
#stage-home{position:relative}
#stage-park{position:fixed;left:-10000px;top:0;width:520px;visibility:hidden;pointer-events:none}

/* 作業中の紙の一番上：いますぐのリマインドの帯（2026-09-30 リオ「作業中の紙に、いますぐのタスクがあったら表示してほしいかも」「目に入る場所に」） */
.work-now{display:flex;align-items:center;gap:8px;width:100%;margin:2px 0 4px;padding:9px 12px;border:none;border-radius:8px;background:var(--sakura-pale);box-shadow:inset 0 0 0 1.5px var(--sakura);color:var(--sakura-ink);cursor:pointer;text-align:left;font-family:var(--font-maru);font-size:13px;animation:wnIn .35s ease-out}
.work-now > .ic{flex:0 0 auto}
.work-now b{flex:0 0 auto;font-weight:900}
.work-now .wn-time{flex:0 0 auto;font-family:var(--mono);font-size:12px;font-weight:500}
.work-now .wn-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-weight:900}
.work-now .wn-more{flex:0 0 auto;font-size:11px;font-weight:700}
.work-now > .ic:last-child{opacity:.7}
.work-now > .ic:first-child{animation:wnBell 2.4s ease-in-out infinite;transform-origin:50% 10%}
@keyframes wnIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes wnBell{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(14deg)}90%{transform:rotate(-12deg)}95%{transform:rotate(6deg)}}
@media (prefers-reduced-motion: reduce){.work-now,.work-now > .ic:first-child{animation:none}}
@media(max-width:999px){   /* スマホ：帯が出た分、文字盤を少し小さく＝下のおへやがタブに隠れない（390×797 で測った） */
  .work-now{padding:6px 10px;margin:0 0 2px;font-size:12.5px}
  .hero.work.has-now .dial{--d:112px}
  .hero.work.has-now .dial-t{font-size:26px}
}

/* いますぐの帯の ▶（押すと始まる。2026-09-30 リオ「三角のアイコンつけて始めるのが分かるように」） */
.work-now .wn-go{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--navy);color:var(--yellow-soft)}
.work-now .wn-go .ic{margin-left:2px}
@media(min-width:1000px){#side-room .side-stage .room-acts{margin-top:8px}}   /* 「次は新しい家具！」の札が上の「小窓」に重ならないように（2026-10-01） */

/* 今月の家具の案内（絵つき、2026-10-01 リオ「イラストも含めて出したい」）。上のふちにその月の2色 */
.season-card{position:relative;background:#fff;border-radius:var(--radius-paper);box-shadow:var(--shadow-paper);padding:12px 14px 12px;overflow:hidden}
.season-card:before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--pa),var(--pb))}
.season-card .sc-head{display:flex;align-items:center;gap:6px;font-family:var(--font-maru);font-size:12px;color:var(--text2)}
.season-card .sc-head b{font-weight:900;font-size:13px;color:var(--text)}
.season-card .sc-head small{font-size:11px;color:var(--text3)}
.season-card .sc-head .grow{flex:1}
.season-card .sc-items{display:flex;gap:10px;margin-top:10px}
.season-card .sc-it{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px}
.season-card .sc-img{position:relative;width:100%;height:76px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:color-mix(in srgb,var(--pb) 14%,#fff)}
.season-card .sc-img .item-ic{max-height:58px!important}
.season-card .sc-n{font-family:var(--font-maru);font-weight:900;font-size:12px;color:var(--text);text-align:center;overflow-wrap:anywhere}
.season-card .sc-have{position:absolute;right:5px;top:5px;display:inline-flex;align-items:center;gap:2px;padding:1px 6px;border-radius:999px;background:var(--navy);color:var(--yellow-soft);font-family:var(--font-maru);font-weight:900;font-size:9.5px}

/* 置くタブ：部屋と庭の見出し（2026-10-01、1ページで両方編集） */
.place-h{display:flex;align-items:center;gap:6px;margin:6px 0 2px;padding:8px 2px 6px;border-bottom:1.5px dashed var(--border);font-family:var(--font-maru);font-size:13px;color:var(--text)}
.place-h:not(:first-child){margin-top:14px}
.place-h b{font-weight:900}
.place-h .place-ic{font-size:14px;line-height:1}
.place-h .place-now{margin-left:auto;padding:1px 8px;border-radius:999px;background:var(--yellow-light);color:var(--text2);font-size:10.5px;font-weight:700}

/* 寝ている時の Zzz（hamster-clips.js の zzzShow、2026-10-01 リオ「寝てるときの『ｚｚｚ』をもっとわかりやすく」）。大きさの違う Z を3つ、白いふち取りで順に浮かべる */
.hm-zzz2{position:absolute;z-index:2000;width:0;height:0;pointer-events:none;font-size:max(16px,calc(var(--H, 300px) * 0.075))}
.hm-zzz2 b{position:absolute;left:0;bottom:0;font-family:var(--font-maru,'Zen Maru Gothic'),sans-serif;font-weight:900;line-height:1;color:#5a66b5;opacity:0;
  text-shadow:0 0 2px #fff,1.5px 1.5px 0 #fff,-1.5px -1.5px 0 #fff,1.5px -1.5px 0 #fff,-1.5px 1.5px 0 #fff,0 2px 6px rgba(28,35,64,.25);animation:hmZzz 2.7s ease-out infinite}
.hm-zzz2 b:nth-child(1){font-size:.75em}
.hm-zzz2 b:nth-child(2){font-size:1em;animation-delay:.9s}
.hm-zzz2 b:nth-child(3){font-size:1.3em;animation-delay:1.8s}
@keyframes hmZzz{0%{opacity:0;transform:translate(0,0) rotate(-12deg) scale(.7)}12%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translate(1.4em,-2.2em) rotate(10deg) scale(1.05)}}
@media (prefers-reduced-motion: reduce){.hm-zzz2 b{animation:none;opacity:1}.hm-zzz2 b:nth-child(2){transform:translate(.7em,-1em)}.hm-zzz2 b:nth-child(3){transform:translate(1.5em,-2.1em)}}

/* 家具の色違いを選ぶ丸（図鑑の詳しい行・置く場所を選ぶ紙、2026-10-01） */
.pswatch{display:flex;align-items:center;flex-wrap:wrap;gap:6px;flex-basis:100%;margin-top:8px;padding-top:8px;border-top:1px dashed var(--border)}
.psw{width:44px;height:44px;border-radius:10px;border:1.5px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
.psw .item-ic{max-height:32px!important;max-width:38px!important}
.psw.on{border-color:var(--navy);box-shadow:0 0 0 2px var(--yellow-soft)}
.psw-note{display:flex;flex-direction:column;margin-left:4px;font-family:var(--font-maru);font-weight:700;font-size:12px;color:var(--text)}
.psw-note small{font-size:10.5px;color:var(--text3);font-weight:700}
.dex-d{flex-wrap:wrap}
.sp-now + .pswatch{margin:-2px 0 10px;border-top:none;padding-top:0}
/* ガチャの結果：色違いが開いた */
.rp-variant{align-self:stretch;display:flex;align-items:center;gap:10px;margin-top:6px;padding:8px 10px;border-radius:8px;background:var(--yellow-light);text-align:left;font-size:12.5px;color:var(--text)}
.rp-variant b{display:block;font-family:var(--font-maru);font-weight:900;font-size:13px;color:var(--sakura-ink)}
.rp-variant small{display:block;font-size:10.5px;color:var(--text3)}
.dex-d .pswatch{flex:0 0 100%;flex-direction:row;align-items:center}   /* .dex-d div の縦並びを打ち消す（2026-10-01） */
.dex-d .psw .item-ic,.sp-now + .pswatch .psw .item-ic{height:30px!important;max-height:30px!important;max-width:38px!important}
.dex-d .psw-note{flex:0 1 auto}
/* 2匹目のお迎え（Lv.100〜、2026-10-02）。見た目の最終判断はリオ */
.pet2-card{display:flex;align-items:center;gap:10px;background:#fff;border-radius:var(--radius-paper);box-shadow:var(--shadow-paper);padding:10px 12px;border-top:4px solid var(--sakura)}
.pet2-card img{height:54px;width:auto;flex:0 0 auto}
.pet2-card .p2-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pet2-card .p2-t b{font-family:var(--font-maru);font-weight:900;font-size:14px}
.pet2-card .p2-t small{font-size:11.5px;color:var(--text2)}
.pet2-card .btn{flex:0 0 auto;min-height:38px;padding:0 14px}
/* .pet2-sheet の品種の大きさは下の横並びの決まりに合わせた（2026-10-03） */
#stage-home{transition:opacity .35s ease}#stage-home.sw-out{opacity:0}
#pip-stage{transition:opacity .35s ease}#pip-stage.sw-out{opacity:0}
/* Lv.100 の特別なレベルアップ（2026-10-02 リオ「レベル100へのレベルアップ演出特別にして欲しいかも」）。叩き台、見た目の最終判断はリオ */
#levelup-overlay.lv100{background:rgba(20,25,52,.92);overflow:hidden}
.l1-burst{position:absolute;left:50%;top:34%;width:170vmax;height:170vmax;margin:-85vmax 0 0 -85vmax;border-radius:50%;pointer-events:none;background:repeating-conic-gradient(rgba(245,200,66,.24) 0 6deg,transparent 6deg 15deg);-webkit-mask:radial-gradient(circle,#000 0,#000 8%,transparent 30%);mask:radial-gradient(circle,#000 0,#000 8%,transparent 30%);animation:l1Spin 50s linear infinite,l1Fade .9s ease-out both}
@keyframes l1Spin{to{transform:rotate(360deg)}}
@keyframes l1Fade{from{opacity:0}to{opacity:1}}
@keyframes l1Pop{0%{transform:scale(.4) rotate(-3deg);opacity:0}100%{transform:scale(1) rotate(-3deg);opacity:1}}
@keyframes l1Stamp{0%{transform:scale(2.3);opacity:0}55%{transform:scale(.92);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes l1Up{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
@keyframes l1Bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.lvup.l1{position:relative;max-width:360px;animation:none}
.l1-badge{background:var(--yellow);color:var(--navy);font-size:20px;padding:8px 22px;animation:l1Pop .45s cubic-bezier(.17,.67,.35,1.4) .12s both}
.l1-lv{font-size:min(108px,25vw);color:var(--yellow);-webkit-text-stroke:9px var(--navy);margin:4px 0 6px;animation:l1Stamp .55s cubic-bezier(.2,.8,.3,1.15) .3s both}
.l1-pair{display:flex;align-items:flex-end;justify-content:center;gap:12px;margin:14px 0 6px;animation:l1Up .5s ease-out .95s both}
.l1-p{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;font-family:var(--font-maru);font-weight:900;font-size:13px;color:var(--cream-text)}
.l1-p img{height:80px;width:auto;filter:drop-shadow(0 3px 6px rgba(0,0,0,.35))}
.l1-p.who img{filter:brightness(0) invert(1) drop-shadow(0 0 10px rgba(245,200,66,.75));opacity:.85}
.l1-p.who{animation:l1Bob 1.8s ease-in-out 1.6s infinite}
.l1-p.who b{color:var(--yellow-soft)}
.l1-q{position:absolute;top:22px;left:50%;transform:translateX(-50%);font-family:var(--font-maru);font-weight:900;font-size:30px;line-height:1;color:var(--navy)}
.l1-star{width:22px;height:22px;fill:var(--yellow);margin-bottom:46px;flex:0 0 auto}
.l1-cap{font-family:var(--font-maru);font-weight:700;font-size:14px;color:var(--cream-text);margin-bottom:12px;animation:l1Up .5s ease-out 1.15s both}
.l1-cap b{color:var(--yellow);font-weight:900;font-size:16px}
.lv100 .lvup-paper{animation:l1Up .5s ease-out 1.35s both}
.l1-go{width:100%;margin-top:14px;animation:l1Up .5s ease-out 1.6s both}
.lv100 .lvup-close{animation:l1Up .5s ease-out 1.8s both}
@media (prefers-reduced-motion: reduce){.l1-burst,.l1-badge,.l1-lv,.l1-pair,.l1-p.who,.l1-cap,.l1-go,.lv100 .lvup-paper,.lv100 .lvup-close{animation:none}}
/* 色違いの印と、色を見る・かえる所（2026-10-03 リオ「どの家具に色違いがあるかが分かりづらい」）。叩き台、見た目の最終判断はリオ */
.vbadge{position:absolute;right:3px;top:3px;z-index:2;display:flex;align-items:center;gap:2px;font-family:var(--mono);font-size:9px;line-height:1;color:var(--text2);background:rgba(255,255,255,.94);border-radius:999px;padding:2px 5px 2px 2px;box-shadow:0 0 0 1px var(--border);pointer-events:none}
.vbadge i{width:10px;height:10px;border-radius:50%;flex:0 0 auto;background:conic-gradient(#f3cfe2,#f2d98a,#c8e6b8,#8fd8ea,#cbb8e8,#f3cfe2)}
.vbadge.dot{padding:2px}
.vbadge.dim{color:var(--text4)}.vbadge.dim i{background:none;box-shadow:inset 0 0 0 1.5px var(--line-dash)}
.vbadge.inl{position:static;box-shadow:none;background:none}
.pcell .vbadge{right:-3px;top:-3px}
.sp-c .vbadge{left:6px;right:auto;top:6px}
.dex-pv{flex:0 0 auto;width:76px;height:76px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:10px}
.dex-d .dex-pv .item-ic{height:64px!important;max-height:64px!important;max-width:70px!important}
.psw.lock{border-style:dashed;background:transparent;color:var(--text4);font-family:var(--font-maru);font-weight:900;font-size:15px;cursor:default}
.pv .psw-note small + small{color:var(--text4)}
.place-h .ph-note{font-size:10.5px;color:var(--text3);margin-left:2px}
.pvrow{padding:8px 0 10px;border-bottom:1px solid var(--rule)}
.pvrow:last-child{border-bottom:none}
.pvrow-h{display:flex;align-items:center;gap:8px}
.pvrow-h .item-ic{height:28px!important;width:auto;max-width:40px!important;margin:0!important}
.pvrow-h b{font-family:var(--font-maru);font-weight:900;font-size:13px}
.pvrow .pswatch{margin-top:6px;padding-top:0;border-top:none}
.dex-c > .vbadge{left:auto;right:3px;top:3px;width:auto!important;height:auto!important;display:flex}   /* .dex-c > span（絵の置き場所）を打ち消す */
/* 置く場所を選ぶ紙：色ごとのマス（2026-10-03 リオ「"この色の"家具を選ぶ」）。色の名前を桜色の小さい字で */
.sp-c .sp-k{font-style:normal;font-family:var(--font-maru);font-weight:700;font-size:10px;line-height:1.25;color:var(--sakura-ink);text-align:center}
/* 置く場所を選ぶ紙：色違いを持っている家具は横長の札1枚に色を並べる（2026-10-03 12:23 リオ「ほかの違う家具とも並列なのは分かりにくい」）。叩き台 */
.sp-fam{grid-column:1/-1;background:var(--surface2);border-radius:6px;padding:8px 10px 10px;display:flex;flex-direction:column;gap:6px}
.sp-fam.new{background:#fff;border:1.5px dashed var(--line-dash)}
.sp-fam-h{display:flex;align-items:baseline;gap:8px}
.sp-fam-h b{font-family:var(--font-maru);font-weight:900;font-size:12.5px}
.sp-fam-h small{font-size:10px;color:var(--text3);font-family:var(--mono)}
.sp-fam-row{display:flex;gap:6px;flex-wrap:wrap}
.sp-v{width:76px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 3px 6px;border-radius:8px;background:#fff;border:1.5px solid var(--border);cursor:pointer}
.sp-fam.new .sp-v{background:var(--surface2);border-color:transparent}
.sp-v .item-ic{height:auto!important;max-height:42px!important;width:auto;max-width:60px!important;margin:0!important}
.sp-v i{font-style:normal;font-family:var(--font-maru);font-weight:700;font-size:10px;line-height:1.2;color:var(--sakura-ink);text-align:center}
/* 置く場所を選ぶ紙：色違いの小さい絵と「どの色で置く？」（2026-10-03 12:29 リオの案）。叩き台 */
.sp-mini{position:absolute;left:5px;top:5px;display:flex;align-items:center;gap:1px;padding:2px 3px;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 0 0 1px var(--border);z-index:1}
.sp-mini .item-ic{height:18px!important;max-height:18px!important;width:auto;max-width:24px!important;margin:0!important}
.sp-mini em{font-style:normal;font-family:var(--mono);font-size:9px;color:var(--text3);margin-left:1px}
.cp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:4px}
.cp-c{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 4px 10px;border-radius:8px;background:var(--surface2);border:none;cursor:pointer}
.cp-c .item-ic{height:auto!important;max-height:64px!important;width:auto;max-width:84px!important;margin:0!important}
.cp-c i{font-style:normal;font-family:var(--font-maru);font-weight:700;font-size:11.5px;line-height:1.25;color:var(--sakura-ink);text-align:center}
.rate-row .tt.tt2{white-space:normal;display:flex;flex-direction:column;gap:1px;padding:7px 0;line-height:1.35}   /* 排出率の2段の行（2026-10-03） */
.rate-row .tt.tt2 .note{white-space:normal}
/* 品種を選ぶ所は横に並べる（2026-10-03 リオ「今後品種増やした時のために横に並べる方がいいかも？」）。増えたら折り返す：スマホは2つずつ */
.pet-breeds{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:10px}
.pet-breed{width:auto;padding:12px 6px 10px}
.pet-breed img{height:96px;width:auto;max-width:100%}
/* ヘッダーの左（PCはタブ）と「ためし」＝ためし操作盤（test-panel.js、ためし用アカウントだけ。2026-10-03） */
.hd-left{grid-column:1;justify-self:start;display:flex;align-items:center;gap:8px;min-width:0}
.hd-test{border:1.5px dashed var(--yellow-soft);background:none;color:var(--yellow-soft);border-radius:999px;padding:3px 10px;font-family:var(--font-maru);font-weight:900;font-size:11.5px;cursor:pointer;white-space:nowrap}
.hd-test[hidden]{display:none}
.pet-later{align-self:center;color:var(--text3)}
.tp-now{font-size:12px;line-height:1.6;color:var(--text2);background:var(--surface2);border-radius:6px;padding:8px 10px;margin:2px 0 6px}
#test-panel .lbl{display:block;margin:12px 0 6px}
.tp-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tp-row .inp{flex:1 1 140px;min-width:0;width:auto}
.tp-row .tp-num{flex:0 1 110px}
.tp-row .btn{flex:0 0 auto}
.tp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tp-chips button{border:1.5px solid var(--border);background:#fff;border-radius:999px;padding:6px 12px;font-family:var(--font-maru);font-weight:700;font-size:12.5px;color:var(--text);cursor:pointer;display:flex;align-items:baseline;gap:5px}
.tp-chips button small{font-size:10px;color:var(--text3)}
.tp-chips button.warn{border-color:#E3A0A0;color:#B04848}
.tp-chk{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text3);margin-top:8px;font-family:var(--font-maru)}
.sheet-paper.tp-busy{opacity:.6;pointer-events:none}
/* 期限の日付の欄：中の文字は1行に（2026-10-03、iPhoneで「2026/10/03（土）」が2行に折り返してはみ出した） */
#datef-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* 幅が足りない時（スマホの追加画面＝「今日・明日・今週」と並ぶ）は、日付の欄を下の行へ回して横いっぱいに。PCの紙では今までどおり1行 */
#deadline-row{flex-wrap:wrap}
#deadline-row .datef{flex:1 1 164px}   /* 164＝日付の欄128＋消す×30＋すき間6。×だけが下の行に落ちないように、欄と×をまとめて回す */
/* くり返しの2問と確認の一文（2026-10-04、tasks.js の rqApply・rqSay）。叩き台 */
.seg.rq-2 button{flex-direction:column;height:auto;min-height:46px;padding:6px 4px;gap:1px;line-height:1.3}
.seg.rq-2 button small{font-size:10px;font-weight:700;opacity:.7}
.rq-after{display:flex;align-items:center;gap:8px;font-family:var(--font-maru);font-weight:700;font-size:13px}
.rq-after .inp{width:auto;flex:0 1 96px;min-width:0}
.rq-after select.inp{flex:0 0 auto}
.rq-say{font-size:12.5px;line-height:1.6;color:var(--text);background:#fff;border-left:3px solid var(--sky,#9FD4E8);border-radius:4px;padding:8px 10px}
/* ── タスクの追加・編集「文章で組み立てる」（2026-10-04、task-sheet.js。Claude Design のモック design_handoff_task_add_sentence の値） ── */
@keyframes tsUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes tsTray{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
#task-modal{background:rgba(28,35,64,.5)}
.ts{position:relative;width:100%;max-height:94%;display:flex;flex-direction:column;background:#fff;border-radius:22px 22px 0 0;padding:8px 0 env(safe-area-inset-bottom,0px);box-shadow:0 -12px 32px rgba(28,35,64,.3);animation:tsUp .22s ease}
.ts-grab{width:44px;height:5px;border-radius:999px;background:#d8c9a2;margin:0 auto 4px;flex:0 0 auto}
.ts-paper{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;background:#fff}
.ts-tape{display:none}
.ts-head{flex:0 0 auto;display:grid;grid-template-columns:36px 1fr 36px;align-items:center;padding:2px 12px 8px;border-bottom:1px solid #efe6cf}
.ts-title{font-family:var(--font-maru);font-weight:900;font-size:17px;text-align:center;color:var(--navy)}
.ts-x{justify-self:end;width:36px;height:36px;border-radius:50%;border:1.5px dashed #cbbd97;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;color:var(--navy)}
.ts-body{flex:1;min-height:0;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px}
.ts-rows{display:flex;flex-direction:column;gap:14px}
.ts-name{width:100%;border:2px solid #1c2340;border-radius:10px;padding:13px 14px;font-size:17px;font-weight:700;color:#1c2340;background:#fff;outline:none;font-family:var(--font);margin-top:-6px;transition:background .15s,box-shadow .15s}
.ts-name.ts-name-empty{background:#fff6d6}
.ts-name:focus{box-shadow:0 0 0 4px rgba(245,200,66,.45)}
.ts-name::placeholder{color:#b3a582;font-weight:500}
.ts-nh{display:flex;align-items:center;gap:8px}
.ts-nh .ts-q{font-size:15px}
.ts-nh .ts-must[hidden]{display:none}
.ts-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-family:var(--font-maru);font-weight:700;font-size:17px;line-height:1.5;min-height:42px;color:var(--navy)}
.ts-rows2{display:flex;flex-direction:column;gap:2px}
.ts-rm{margin-left:auto;width:28px;height:28px;border-radius:50%;border:none;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.55;padding:0;color:var(--navy)}
.ts-rm:hover{opacity:1}
.ts-must{font-family:var(--font);font-size:11px;font-weight:700;color:#b0476f;background:#f9e2ec;border-radius:4px;padding:1px 6px}
.ts-pill{display:inline-flex;align-items:center;height:38px;padding:0 14px;border-radius:19px;border:none;font-family:var(--font-maru);font-weight:900;font-size:16px;cursor:pointer;color:#1c2340;max-width:100%;min-width:0;transition:box-shadow .12s}
.ts-pill .ts-pt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ts-pill.ts-p-req{background:#fff;border:1.5px dashed #b0476f;color:#b0476f}
.ts-pill.ts-p-empty{background:#fff;border:1.5px dashed #cbbd97;color:#8a7f66}
.ts-pill.ts-p-navy{background:#1c2340;color:#fff3d6}
.ts-pill.ts-p-soft{background:#fbeec0}
.ts-pill.ts-p-memo{font-weight:700;font-size:14px;max-width:220px}
.ts-pill.on{box-shadow:0 0 0 3px #fff,0 0 0 5px #1c2340}
/* 空の欄（？）は開いていても紺の輪を付けない。点線と輪の両方は目立ちすぎる（2026-10-04 リオ「？のとこの、ピンクの点線と紺の線両方あるの目立ちすぎる」）。開いている間は中をうすく塗る */
.ts-pill.ts-p-req.on,.ts-pill.ts-p-empty.on{box-shadow:none}
.ts-pill.ts-p-req.on{background:#fdf0f5}
.ts-pill.ts-p-empty.on{background:#fff9ec}
.ts-tray{background:#fff9ec;border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:10px;animation:tsTray .15s ease}
.ts-tray-when{gap:14px}
.ts-qh,.ts-sec0{display:flex;flex-direction:column;gap:2px}
.ts-sec0{gap:8px}
.ts-q{font-family:var(--font-maru);font-weight:900;font-size:14px;color:var(--navy)}
.ts-note{font-size:12px;color:#5c5546;line-height:1.6}
.ts-sec{display:flex;flex-direction:column;gap:8px;border-top:1px solid #efe6cf;padding-top:12px}
.ts-sh{font-family:var(--font-maru);font-weight:900;font-size:13px;color:var(--navy)}
.ts-sh em{font-style:normal;font-weight:700;font-size:12px;color:#5c5546;margin-left:8px}
.ts-line{display:flex;gap:6px;min-width:0}
.ts-line.ts-wrap{flex-wrap:wrap}
.ts-line.ts-g4{gap:4px}
.ts-chip{flex:1;min-width:0;height:42px;border-radius:10px;border:1.5px dashed #cbbd97;background:#fff;color:#1c2340;font-family:var(--font-maru);font-weight:700;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 6px;white-space:nowrap}
.ts-chip.on{border:1.5px solid #1c2340;background:#1c2340;color:#fff3d6;font-weight:900}
.ts-chip.ts-c-two{flex-direction:column;gap:1px;line-height:1.3}
.ts-chip.ts-c-two small{font-size:10px;font-weight:700;opacity:.8;white-space:normal;text-align:center}
.ts-chip.ts-c-two span{font-size:13.5px}
.ts-chip .ts-mono,.ts-chip.ts-c-mono{font-family:var(--mono);font-weight:400;font-style:normal}
.ts-chip.ts-c-two .ts-mono{font-size:10.5px;opacity:.8}
.ts-chip.ts-c-h54{height:54px}.ts-chip.ts-c-h52{height:52px}.ts-chip.ts-c-h48{height:48px}.ts-chip.ts-c-h44{height:44px}.ts-chip.ts-c-h40{height:40px}.ts-chip.ts-c-h38{height:38px}.ts-chip.ts-c-h36{height:36px}.ts-chip.ts-c-h34{height:34px}
.ts-chip.ts-c-h64{height:auto;min-height:64px;padding:8px 10px;gap:2px}
.ts-chip.ts-c-h64 small{font-size:10.5px;opacity:.85;line-height:1.4}
.ts-chip.ts-c-grow{flex:1 1 0}
.ts-chip.ts-c-full{flex:1 1 100%}
.ts-chip.ts-c-dim{color:#8a7f66}
.ts-chip.ts-c-auto{flex:0 0 auto;padding:0 12px}
.ts-chip.ts-c-kind{flex:0 0 auto;padding:0 12px;height:36px;font-size:12.5px}
.ts-chip.ts-c-dow{height:36px;font-size:12.5px;padding:0}
.ts-chip.ts-c-f12{font-size:12px}.ts-chip.ts-c-f125{font-size:12.5px}
.ts-chip.ts-c-mono{font-weight:500}
.ts-load{flex:1;min-width:0;height:62px;border-radius:10px;border:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-family:var(--font-maru);font-weight:700;cursor:pointer;color:#1c2340;line-height:1.3;padding:0 4px}
.ts-load span{font-size:15px}
.ts-load small{font-size:10.5px;font-weight:700;color:#5c5546;text-align:center}
.ts-load.on{font-weight:900;box-shadow:inset 0 0 0 2px #1c2340}
.ts-kg{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:center}
.ts-kg>span{font-family:var(--font-maru);font-weight:700;font-size:11px;color:#8a7f66}
.ts-box{background:#fff;border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:10px}
.ts-box.ts-stl{flex-direction:row}
.ts-bt{font-family:var(--font-maru);font-weight:700;font-size:14px}
.ts-stl{display:flex;align-items:center;gap:10px;font-family:var(--font-maru);font-weight:700;font-size:14px;color:var(--navy)}
.ts-stl.ts-wrap{flex-wrap:wrap;gap:8px 10px}
.ts-st{width:32px;height:32px;border-radius:50%;border:1.5px dashed #cbbd97;background:#fff;cursor:pointer;font-size:16px;font-weight:700;color:var(--navy);padding:0;flex:0 0 auto}
.ts-stv{min-width:30px;text-align:center;font-size:19px;font-weight:900}
.ts-seg{display:flex;border:1.5px solid #1c2340;border-radius:10px;overflow:hidden}
.ts-seg button{flex:1;height:38px;border:none;background:#fff;color:#1c2340;font-family:var(--font-maru);font-weight:700;font-size:13px;cursor:pointer}
.ts-seg button.on{background:#1c2340;color:#fff3d6;font-weight:900}
.ts-seg.ts-w110{width:110px;flex:0 0 auto}
.ts-seg.ts-w110 button{height:32px}
.ts-start{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ts-start b{font-size:14px}
.ts-start .ts-grow,.ts-early .ts-grow{flex:1}
.ts-changed{font-size:10.5px;font-weight:700;color:#2e6f86;background:#dff3f9;border-radius:4px;padding:1px 6px}
.ts-reset{height:32px;padding:0 10px;border:none;background:none;font-family:var(--font-maru);font-weight:700;font-size:12px;color:#5c5546;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ts-small{height:32px;padding:0 12px;border-radius:16px;border:1.5px dashed #cbbd97;background:#fff;font-family:var(--font-maru);font-weight:700;font-size:12px;cursor:pointer;color:var(--navy)}
.ts-early{display:flex;align-items:center;gap:10px;background:#fff;border:none;border-radius:10px;padding:10px 12px;cursor:pointer;text-align:left;color:var(--navy)}
.ts-early .ts-grow{display:flex;flex-direction:column;line-height:1.45}
.ts-early b{font-family:var(--font-maru);font-weight:900;font-size:13px}
.ts-early small{font-size:11px;color:#5c5546}
.ts-early .tgl{pointer-events:none}
.ts-say{font-size:12.5px;line-height:1.7;color:#2e6f86;background:#dff3f9;border-radius:8px;padding:9px 11px}
.ts-ok{align-self:flex-end;height:36px;padding:0 18px;border-radius:10px;border:none;background:#1c2340;color:#fff3d6;font-family:var(--font-maru);font-weight:900;font-size:13px;cursor:pointer}
.ts-cal{background:#fff;border-radius:10px;padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px}
.ts-cal-h{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-maru);font-weight:900;font-size:14px}
.ts-cal-nav{width:32px;height:32px;border-radius:50%;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--navy);opacity:.6;padding:0}
.ts-cal-nav .ic.flip{transform:rotate(180deg)}
.ts-cal-dow{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-family:var(--font-maru);font-weight:700;font-size:11px;color:#8a7f66}
.ts-cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.ts-day{height:32px;border-radius:8px;border:none;cursor:pointer;font-family:var(--mono);font-size:13px;background:transparent;color:#1c2340;padding:0}
.ts-day.today{box-shadow:inset 0 0 0 1.5px #cbbd97}
.ts-day.on{background:#1c2340;color:#fff3d6;box-shadow:none}
.ts-day:disabled{color:#d4c9ab;cursor:default}
.ts-pg{display:grid;grid-template-columns:56px minmax(0,1fr);gap:8px;align-items:center}
.ts-pl{font-family:var(--font-maru);font-weight:900;font-size:12.5px}
.ts-tm{display:flex;align-items:baseline;gap:8px}
.ts-tm b{font-family:var(--mono);font-weight:500;font-size:18px}
.ts-gl{font-family:var(--font-maru);font-weight:700;font-size:11.5px;color:#8a7f66}
.ts-hours{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.ts-hours .ts-chip{padding:0}
.ts-memo{min-height:76px;border:1.5px dashed #cbbd97;border-radius:10px;padding:10px 12px;font-size:14px;line-height:1.6;background:#fff;color:#1c2340;resize:vertical;outline:none;font-family:var(--font)}
.ts-more{display:flex;flex-direction:column;gap:8px;border-top:1.5px dashed #e3d9bd;padding-top:12px;margin-top:4px}
.ts-more>span{font-family:var(--font-maru);font-weight:700;font-size:12px;color:#8a7f66}
.ts-add{display:flex;align-items:center;gap:4px;height:34px;padding:0 12px;border-radius:17px;border:1.5px dashed #cbbd97;background:#fff;font-family:var(--font-maru);font-weight:700;font-size:12.5px;color:#5c5546;cursor:pointer}
.ts-add:hover{background:#fff9ec;border-color:#b3a582}
.ts-add .ic{opacity:.7}
.ts-foot{flex:0 0 auto;border-top:1.5px dashed #e3d9bd;padding:10px 16px 14px;display:flex;flex-direction:column;align-items:stretch;gap:8px}
.ts-hint{font-size:12px;color:#5c5546;text-align:center}
.ts-foot-row{display:flex;align-items:center;gap:6px;width:100%}
.ts-submit{flex:1;height:52px;border-radius:12px;border:none;background:#efe6cf;color:#8a7f66;font-family:var(--font-maru);font-weight:900;font-size:16px;cursor:pointer}
.ts-submit.ts-go{background:#f5c842;color:#1c2340;box-shadow:0 3px 0 rgba(28,35,64,.18)}
@media (min-width:760px){
  #task-modal{align-items:center;padding:24px}
  .ts{width:min(660px,calc(100% - 48px));max-height:90vh;border-radius:6px;padding:0;box-shadow:0 20px 44px rgba(28,35,64,.28)}
  .ts-grab{display:none}
  .ts-paper{border-radius:6px}
  .ts-tape{display:block;position:absolute;top:-9px;left:50%;width:96px;height:22px;background:rgba(243,207,226,.9);transform:translateX(-50%) rotate(-2deg);z-index:1}
  .ts-head{padding:22px 16px 8px}
  .ts-body{padding:18px 28px;gap:12px}
  .ts-rows{gap:12px}
  .ts-foot{padding:12px 28px 20px}
}
/* 前から一覧に出しておく：何日前から（2026-10-05） */
.ts-lead{flex-direction:row;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}