/* お仕事クリア — 触れるプロト。決めは docs/work-clear/design.md: 白地・余白、黒の太線（7 割）、紙は薄い黄 #FDF8E1（色はこれ 1 つ） */
:root { --paper:#FFFFFF; --note:#FDF8E1; --flag:#E6F4E8; --flag-glue:#C9E6CE; --ink:#1A1A1A; --pen:#1A1A1A; --sub:#8A8783; --faint:#B5B2AC; --line:rgba(26,26,26,.72); --soft:#E9E7E2; }
/* --note（紙）・--flag（付箋）・--pen / --line（ペン）は、色を選ぶと app.js の applyLook が :root の style に上書きする（color.md）。既定はここ */
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; background:var(--paper); color:var(--ink); font-family:"Hiragino Sans","Noto Sans JP",system-ui,sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; }
body { min-height:100dvh; }
#app { max-width:480px; margin:0 auto; padding:calc(16px + env(safe-area-inset-top)) 22px calc(96px + env(safe-area-inset-bottom)); min-height:100dvh; position:relative; }
a, button { color:inherit; font:inherit; background:none; border:0; padding:0; cursor:pointer; text-align:left; text-decoration:none; }
.brand-hero { font-size:40px; font-weight:800; letter-spacing:.02em; margin:26vh 0 26px; line-height:1.2; }
/* 左上のロゴ＝全画面でホームへの戻り。マーク（黄の紙だけ。白抜き・枠・影なし）＋太字。ホームも他の画面も同じ（minekazz 2026-09-21「全部合わせたいね」） */
.brand { font-size:22px; font-weight:300; letter-spacing:0; display:flex; align-items:center; gap:9px; margin:4px 0 14px; color:var(--ink); text-decoration:none; }
a.brand { margin-bottom:22px; }
.brand .mark { width:34px; height:32px; flex:0 0 34px; }
.brand + .back { margin-top:-12px; }
/* ホーム右上の色の印: 8px の点、今の付箋の色。当たり判定は 44px。ホームだけ・空の初回には無い（color.md） */
.brand-row { display:flex; align-items:center; justify-content:space-between; }
.brand-row .brand { margin-bottom:14px; }
.brand-row.empty { min-height:8px; margin:4px 0 0; }   /* 全部片付いたあとの空のホーム: 点だけ右上に。特大文字はそのまま */
.brand-row.empty .look-dot { margin:6px 6px 0 0; }
.look-dot { width:8px; height:8px; border-radius:50%; position:relative; margin:0 6px 14px 0; box-shadow:0 0 0 1px rgba(0,0,0,.08); }
.look-dot::before { content:""; position:absolute; inset:-18px; }
/* 色の画面 */
.sample { margin:0 0 6px; }
.sample .note.mini { padding:14px 16px 8px; margin:0 0 10px; box-shadow:0 1px 0 rgba(0,0,0,.04), 0 6px 14px rgba(0,0,0,.06); }
.sample .note.mini .title { font-size:15px; margin-bottom:4px; }
.sample .item { padding:6px 0; }
.sample .item.flag.mini { margin:0; }
.sample .t { font-size:15px; }
.sample .item.done .t { animation:none; }
.sws { display:flex; flex-wrap:wrap; gap:10px; }
.sw { width:32px; height:32px; border-radius:50%; border:1.5px solid rgba(0,0,0,.08); padding:0; }
.sw.on { box-shadow:0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); }
.sw.locked { background:none !important; border:1.5px dashed var(--faint); }
.greet { font-size:13px; color:var(--sub); margin:0 0 22px; line-height:1.7; }
.empty { font-size:16px; color:var(--sub); margin:0 0 28px; line-height:1.9; }
.add { font-size:16px; display:block; margin-top:22px; padding:12px 18px; background:var(--soft); border-radius:999px; text-align:center; color:var(--ink); }
.add.fixed { position:fixed; left:22px; right:22px; bottom:calc(16px + env(safe-area-inset-bottom)); max-width:436px; margin:0 auto; box-shadow:0 6px 18px rgba(0,0,0,.08); }
.h { font-size:12px; letter-spacing:.14em; color:var(--sub); margin:18px 0 4px; }
.h.first { margin-top:0; }
.item { display:flex; align-items:flex-start; gap:12px; padding:10px 0; transition:opacity .25s, transform .25s; }
.item.week .t, .item.week .box { opacity:.6; }
/* ホームのタスクは細い緑の付箋（2026-09-21、minekazz。桃と並べて「緑の方がやる気は出る」）。左端は糊の帯。お仕事リストは黄の紙、タスクは緑の細い札 */
.item.flag { background:var(--flag); border-left:10px solid var(--flag-glue); border-radius:2px; padding:10px 12px 10px 12px; margin:8px 0; box-shadow:0 1px 2px rgba(0,0,0,.06); }
.item.flag.week { background:color-mix(in srgb, var(--flag) 55%, var(--paper)); border-left-color:color-mix(in srgb, var(--flag-glue) 55%, var(--paper)); }
.item.flag .box { background:var(--paper); }
.item.flag .t { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }   /* ホームの付箋は 2 行まで、続きは「…」。全文は紙で（URL はサイト名に縮める。2026-09-23、minekazz） */
.item.flag .p { color:#76736E; }   /* 付箋の上の副文字は一段濃く（淡色の上で 3.6〜4.0。2026-09-22、色の検討 color.md） */
.item.flag.done .box { background:var(--pen); }
.h { margin-top:22px; }
.note .h { font-weight:700; color:var(--ink); opacity:.55; margin-top:22px; }
.note .h:first-of-type { margin-top:6px; }
.box { width:24px; height:24px; border:1.5px solid var(--ink); border-radius:5px; flex:0 0 24px; margin-top:2px; background:none; position:relative; }
.box::before { content:""; position:absolute; inset:-10px; }   /* 当たり判定は 44px、見た目は 24px のまま（UIUX 評価 2026-09-21。行全体はクリアにしない＝枠だけ、本人） */
.txt { flex:1; min-width:0; text-align:left; }
.t { font-size:17px; line-height:1.4; position:relative; display:inline; }   /* inline: 2 行に折り返しても線が行ごとに引かれる（inline-block だと箱全体の 38% に 1 本＝行間に落ちる。2026-09-26、minekazz「URL が入ってるとクリアしても線がひかれてない」） */
.p { font-size:12px; color:var(--sub); margin-top:2px; display:block; }
.t .lnk { color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--faint); word-break:break-all; }   /* タスクの文の中の URL。押せることは下線で */
.note .cleared .item .t .lnk { pointer-events:none; }   /* 済の行は押さない（薄い） */
.side { font-size:12px; color:var(--sub); text-decoration:underline; text-underline-offset:3px; white-space:nowrap; margin-top:5px; padding:2px 0 2px 8px; }
/* 済: 黒の太線、文字は透ける。線 → 0.5 秒留まる → 畳まれる */
.item.done .t { background-image:linear-gradient(var(--line), var(--line)); background-repeat:no-repeat; background-size:100% .42em; background-position:0 38%; animation:draw .2s ease-out both; }   /* 線は背景（折り返した行にも続く）。文字は線の上 */
.item.done .box { background:var(--pen); }
@keyframes draw { from { background-size:0 .42em; } to { background-size:100% .42em; } }
.item.fold { animation:fold .3s ease-in both; }
/* 紙の下の「クリアした」: 薄く、線は細く、線は引き直さない（畳まれてここに移った、の絵。2026-09-22） */
.note .cleared { margin-top:14px; }
.note .cleared .h { opacity:.35; }
.note .cleared .item { opacity:.34; padding:6px 0; }
.note .cleared .item .t { background-size:100% 2px; background-position:0 50%; animation:none; }
.note .cleared .item .box { width:20px; height:20px; flex-basis:20px; border-radius:4px; }
@keyframes fold { to { height:0; padding-top:0; padding-bottom:0; opacity:0; margin:0; overflow:hidden; } }
.snack { position:fixed; left:16px; right:16px; top:calc(64px + env(safe-area-inset-top)); max-width:448px; margin:0 auto; background:var(--ink); color:#fff; font-size:14px; padding:13px 16px; border-radius:10px; display:flex; justify-content:space-between; align-items:center; z-index:5; animation:up .2s ease-out; }
.snack button { color:#fff; text-decoration:underline; text-underline-offset:3px; }
@keyframes up { from { transform:translateY(12px); opacity:0; } }
.back { font-size:14px; color:var(--sub); display:block; margin:6px 0 20px; }
.q { font-size:21px; font-weight:700; margin:0 0 20px; }
.choice { display:block; width:100%; padding:16px 0; border-top:1px solid var(--soft); }
.choice:last-of-type { border-bottom:1px solid var(--soft); }
.choice .n { font-size:18px; }
.choice .d { font-size:12px; color:var(--sub); margin-top:2px; }
.field { width:100%; font-size:22px; padding:10px 0; border:0; border-bottom:1.5px solid var(--ink); border-radius:0; background:none; margin:6px 0 10px; color:var(--ink); outline:none; }
.field::placeholder { color:var(--faint); }
.hint { font-size:13px; color:var(--sub); margin:0 0 26px; }
#cands .hint { margin:14px 0 8px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { font-size:14px; color:var(--sub); padding:6px 12px; border:1px solid var(--soft); border-radius:7px; background:none; }
.chip.more { border-style:dashed; text-decoration:none; }   /* 全部はひな形一覧へ（札は 4 つまで） */
.choice .tag { font-size:11px; color:var(--sub); border:1px solid var(--soft); border-radius:4px; padding:1px 5px; margin-left:6px; vertical-align:middle; }
.go { font-size:17px; font-weight:700; display:block; margin-top:34px; padding:10px 0; }
.title { font-size:21px; font-weight:700; margin:0; }
.due { font-size:14px; color:var(--sub); margin:2px 0 16px; }
/* 1 回＝1 枚の紙 */
.note { background:var(--note); box-shadow:0 1px 0 rgba(0,0,0,.04), 0 10px 24px rgba(0,0,0,.07); padding:22px 20px 26px; margin:4px -8px 0; position:relative; transition:transform .6s ease-in, opacity .6s ease-in, box-shadow .3s; }
.note.peel { transform:rotate(-5deg) translate(30px,-90px); opacity:0; box-shadow:0 24px 40px rgba(0,0,0,.18); }
.note.peel::after { content:""; position:absolute; right:0; bottom:0; border-style:solid; border-width:0 0 70px 70px; border-color:transparent transparent var(--paper) transparent; filter:drop-shadow(-1px -1px 1px rgba(0,0,0,.08)); }
/* 紙の上の「タスクを足す」（2026-09-21、テストユーザ 1 人目）。空の枠は破線、欄は下線だけ */
.note .addline { display:flex; align-items:center; gap:12px; padding:10px 0 0; margin-top:6px; }
.note .addline .ghost { border-style:dashed; border-color:var(--faint); margin-top:0; }
.note .addline input { flex:1; min-width:0; font-size:17px; font-family:inherit; color:var(--ink); background:none; border:0; border-bottom:1px dashed var(--faint); padding:6px 0; outline:none; }
.note .addline input::placeholder { color:var(--faint); }
.note .addline input:focus { border-bottom:1px solid var(--ink); }
.note .item .txt { cursor:text; }
.note .inline { display:block; width:100%; resize:none; overflow:hidden; margin:0; box-sizing:border-box; font-size:17px; line-height:1.4; font-family:inherit; color:var(--ink); background:none; border:0; border-bottom:1px solid var(--ink); padding:0 0 2px; outline:none; border-radius:0; }   /* 行の文をその場で直す */
.note .dline { display:flex; align-items:center; gap:16px; margin-top:8px; font-size:13px; color:var(--sub); }   /* 編集中だけの日付の札 */
.note .dchip { position:relative; border:1px solid var(--faint); border-radius:999px; padding:4px 12px; color:var(--ink); }
.note .dchip input { position:absolute; inset:0; width:100%; height:100%; opacity:0; border:0; padding:0; margin:0; }   /* 札の上に透明の日付欄。押すと端末の選び方が開く */
.note .dnone { color:var(--sub); text-decoration:underline; text-underline-offset:3px; padding:4px 0; }
.links { margin-top:22px; font-size:14px; display:flex; gap:18px; flex-wrap:wrap; }
.links button { color:var(--sub); text-decoration:underline; text-underline-offset:3px; }
.edit { margin-top:16px; border-top:1px solid var(--soft); padding-top:14px; }
.edit .row { display:flex; gap:10px; align-items:center; padding:8px 0; font-size:15px; }
.edit .row button { color:var(--sub); font-size:13px; text-decoration:underline; text-underline-offset:3px; }
.edit .row input[data-text] { flex:1; min-width:0; font-size:15px; padding:4px 0; border:0; border-bottom:1px solid var(--soft); background:none; color:var(--ink); outline:none; }
.edit .row input[data-text]:focus { border-bottom-color:var(--ink); }
.edit input[type=text] { flex:1; font-size:16px; border:0; border-bottom:1px solid var(--soft); padding:8px 0; outline:none; background:none; color:var(--ink); }
.edit input[type=date] { font-size:16px; border:0; border-bottom:1px solid var(--soft); padding:6px 0; background:none; color:var(--ink); font-family:inherit; }
.edit label { font-size:12px; color:var(--sub); display:block; margin-top:12px; }
.sheet { position:fixed; left:0; right:0; bottom:0; max-width:480px; margin:0 auto; background:var(--paper); border-radius:16px 16px 0 0; box-shadow:0 -12px 40px rgba(0,0,0,.14); padding:22px 22px calc(26px + env(safe-area-inset-bottom)); font-size:16px; line-height:1.8; z-index:6; animation:up .2s ease-out; }
.sheet .b { display:flex; gap:24px; margin-top:12px; font-weight:700; font-size:16px; }
.sheet .b .quiet { color:var(--sub); font-weight:400; }
.scrim { position:fixed; inset:0; background:rgba(0,0,0,.18); z-index:5; }
.ask { position:fixed; left:16px; right:16px; bottom:calc(20px + env(safe-area-inset-bottom)); max-width:448px; margin:0 auto; background:var(--paper); border:1px solid var(--soft); box-shadow:0 12px 30px rgba(0,0,0,.10); padding:16px 18px; border-radius:12px; font-size:15px; line-height:1.7; z-index:5; }
.ask .b { display:flex; gap:22px; margin-top:8px; font-weight:700; }
.ask .b .quiet { color:var(--sub); font-weight:400; }
.end { font-size:28px; font-weight:800; margin:26vh 0 6px; }
.end-sub { font-size:14px; color:var(--sub); margin:0 0 40px; }
.end-l { font-size:17px; display:block; margin:0 0 6px; padding:8px 0; }
.blank { min-height:60vh; }
.toast { position:fixed; left:50%; transform:translateX(-50%); top:calc(64px + env(safe-area-inset-top)); max-width:min(448px, calc(100% - 32px)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:var(--ink); color:#fff; font-size:13px; padding:8px 14px; border-radius:20px; z-index:7; }
@media (prefers-reduced-motion: reduce) { .item.done .t, .item.fold, .note { animation:none; transition:none; } }

/* 他の端末とつなぐ */
.foots { margin:40px 0 90px; }
.foot { display:block; font-size:12px; color:var(--faint); margin:0 0 10px; text-decoration:underline; text-underline-offset:3px; }
.pass { font-family:ui-monospace, Menlo, monospace; font-size:20px; letter-spacing:.04em; padding:14px 0; border-top:1px solid var(--soft); border-bottom:1px solid var(--soft); margin:0 0 10px; word-break:break-all; user-select:all; -webkit-user-select:all; }
.row-b { display:flex; gap:22px; flex-wrap:wrap; }
.row-b .end-l { margin-top:6px; }
.end-l.quiet { color:var(--faint); }
.row-c { display:flex; gap:10px; align-items:center; padding:8px 0; font-size:15px; }
.row-c input { width:18px; height:18px; accent-color:var(--ink); }
.edit .row button.danger { color:var(--faint); }
.edit .row .dbtn { color:var(--sub); font-size:12px; text-decoration:none; white-space:nowrap; padding:4px 0; }
.edit .row input[type=date].tiny { font-size:13px; color:var(--sub); padding:2px 0; width:auto; max-width:9.5em; }
/* お仕事リスト一覧: 黄の紙の板 */
.board { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:4px 0 100px; }
.stick { position:relative; text-align:left; background:var(--note); aspect-ratio:1 / 1; padding:16px 14px; box-shadow:0 1px 0 rgba(0,0,0,.04), 0 8px 18px rgba(0,0,0,.07); display:flex; flex-direction:column; justify-content:space-between; }
.stick .n { font-size:17px; font-weight:700; line-height:1.35; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.stick .d { font-size:11px; color:var(--sub); line-height:1.6; }
.stick .dot { position:absolute; top:12px; right:12px; width:8px; height:8px; border-radius:50%; background:var(--ink); }
.stick:nth-child(4n+2) { transform:rotate(.6deg); }
.stick:nth-child(4n+3) { transform:rotate(-.5deg); }
/* 一覧の下の「クリアした」: 板ではなく薄い縦並び（見返す場所。仕事には見せない） */
.board:has(+ .past-h) { margin-bottom:28px; }   /* 下に段が続くときは、板の下の余白（固定ボタンの分）を段の末尾へ */
.past-h { font-size:13px; color:var(--sub); margin:0 0 8px; }
#pastlist { margin-bottom:100px; }
.choice.past .n { font-size:16px; color:var(--sub); }
.field.small { font-size:16px; padding:8px 0; margin:0 0 6px; border-bottom-color:var(--soft); }
/* Google でログイン（Google のブランドのガイドライン、Light テーマ。2026-09-24） */
.gbtn { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:18px; padding:10px 12px; background:#FFFFFF; border:1px solid #747775; border-radius:20px; color:#1F1F1F; font-family:"Google Sans", Roboto, "Hiragino Sans", sans-serif; font-weight:500; font-size:15px; line-height:20px; text-decoration:none; }
.gbtn .glogo { flex:0 0 18px; }
/* ログインしていない人への帯（タスク 5 本から、「あとで」で 7 日出さない。2026-09-24） */
.nudge { background:var(--soft); border-radius:10px; padding:14px 16px; margin:4px 0 18px; font-size:14px; line-height:1.7; color:var(--ink); }
.nudge p { margin:0 0 6px; }
.nudge .row-b { margin-top:4px; }
/* 紙の題をその場で直す（2026-09-24）。見た目は題のまま */
.note .head { cursor:text; }
.note .inline.title-edit { font-size:21px; font-weight:700; line-height:1.35; }
.note .head .dline { margin:6px 0 16px; }
.end-l.danger { color:#B3261E; }   /* アカウントを消す */

/* タスクだけ入れる（2026-09-27、決め: ホームの上に細い欄 1 つ）。紙の「タスクを足す」と同じ形で、色は薄く */
.quick { display:flex; align-items:center; gap:12px; padding:2px 0 10px; margin:0 0 6px; }
.quick .box.ghost { border-style:dashed; border-color:var(--faint); margin-top:0; }
.quick input { flex:1; min-width:0; font-size:16px; padding:6px 0; border:0; border-bottom:1px solid var(--soft); background:none; outline:none; }
.quick input:focus { border-bottom-color:var(--ink); }
.quick input::placeholder { color:var(--faint); }
.dchip.on { color:var(--ink); border-color:var(--ink); }
/* くり返しの行が次の予定日を待っているあいだ（窓の中で済み）: 箱は点線、押せない */
.note .item.wait .box.wait { border-style:dashed; border-color:var(--faint); }
.note .item.wait .t { color:var(--sub); }
/* くり返しの印 ↻（くり返す おしごと の題・一覧の紙・ホームの付箋の副文字。2026-09-27） */
.rep { color:var(--sub); font-weight:400; font-size:.9em; }
/* ホームの付箋の先の分（preview）: 箱は点線で押せない */
.item.flag.wait .box.wait { background:var(--paper); border-style:dashed; border-color:var(--faint); }
.item.flag.wait .t { color:var(--sub); }
/* 自動でできる紙（くり返す おしごと・こまごま おしごと）: 色はそのまま、縁を点線に。一覧では先頭にまとめて少し離す（2026-09-27） */
.note.system { outline:1.5px dashed var(--faint); outline-offset:-1.5px; }
.stick.system { outline:1.5px dashed var(--faint); outline-offset:-1.5px; }
.board.system { margin-bottom:14px; }
/* 一言と帯は常に上、左上のロゴと「あるふぁ版」の下（2026-09-28、minekazz「全部上にした方が良くない？」。下だとキーボードに隠れる。Cursor 14 回目・低: 14px だとロゴに重なった） */
/* あるふぁ版の札（正式版まで。2026-09-28） */
.alpha { display:inline-block; font-size:11px; font-weight:400; color:var(--sub); border:1px solid var(--soft); border-radius:6px; padding:1px 6px; margin-left:8px; vertical-align:middle; letter-spacing:.04em; }
.brand-hero .alpha { font-size:12px; margin-left:10px; }