/* Task-it — ふせんのタスクボード
   Weekend's のクラフト紙のボードをそのまま使い、写真の代わりにふせんを貼っていくイメージ。
   レイアウト：PC＝左メニュー＋ボード、スマホ＝ボード＋浮かんだ下メニュー。
   ボードの世界観を保つため、ライト配色に固定しています。 */
:root {
  --kraft: #cfa878;
  --kraft-dot: rgba(90, 60, 30, 0.10);
  --paper: #fbfaf6;
  --panel: #f6efe2;
  --ink: #3b2a1a;
  --muted: #7a6450;
  --faint: #9a8470;
  --accent: #4f6b45;
  --accent-ink: #fbfaf6;
  --sticky: #d6e4c0;
  --heart: #b5543a;
  --danger: #a8321f;
  --over: #a8321f;
  --tape: rgba(255, 255, 255, 0.55);
  --shadow-photo: 0 6px 14px rgba(60, 35, 10, 0.28);
  --shadow-note: 0 3px 8px rgba(60, 35, 10, 0.2);
  --hard: 0 4px 0 var(--ink);
  /* ふせんの色 */
  --f-yellow: #f8e58c;
  --f-pink: #f6bccb;
  --f-blue: #bcdcef;
  --f-green: #cfe6ad;
  --f-orange: #f7c896;
  --f-logo: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-hand: "Yomogi", "Klee One", "Hiragino Maru Gothic ProN", cursive;
  --f-note: "Klee One", "Hiragino Maru Gothic ProN", cursive;
  --f-body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background-color: var(--kraft);
  background-image: radial-gradient(var(--kraft-dot) 1px, transparent 1.4px);
  background-size: 7px 7px;
  color: var(--ink); font-family: var(--f-body); font-size: 15px; line-height: 1.6; -webkit-text-size-adjust: 100%;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
svg { width: 22px; height: 22px; flex: none; }
#root { height: 100%; }

.app { height: 100%; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); }
.main { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.rail { display: none; }

/* 下メニュー（スマホ）：紙の帯が浮かんでいるような形 */
.tabbar { flex: none; display: flex; justify-content: space-around; align-items: center; margin: 4px 14px calc(10px + env(safe-area-inset-bottom, 0px)); padding: 6px 8px; background: var(--panel); border: 2px solid var(--ink); border-radius: 22px; box-shadow: var(--hard); }
.tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 60px; min-height: 44px; justify-content: center; font-size: 11px; font-weight: 700; color: var(--muted); border-radius: 12px; }
.tab.on { color: var(--accent); }
.tab-post { width: 56px; height: 56px; min-width: 0; margin-top: -26px; border-radius: 50%; border: 2px solid var(--ink); background: var(--accent); color: var(--accent-ink); box-shadow: var(--hard); display: grid; place-items: center; }
.badge { position: absolute; top: -2px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; border: 1.5px solid var(--ink); background: var(--heart); color: #fff; font-size: 11px; line-height: 15px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

@media (min-width: 860px) {
  .app { flex-direction: row; }
  .tabbar { display: none; }
  .rail { display: flex; flex-direction: column; gap: 4px; width: 236px; flex: none; padding: 28px 16px; border-right: 2px solid var(--ink); background: var(--panel); }
  .brand { font-family: var(--f-logo); font-weight: 800; font-size: 28px; letter-spacing: 0.04em; line-height: 1.1; padding: 0 12px 6px; color: var(--ink); }
  .brand small { display: block; font-family: var(--f-body); font-weight: 500; font-size: 12px; color: var(--muted); letter-spacing: 0.12em; margin-top: 8px; padding-top: 6px; border-top: 2px solid var(--ink); }
  .rail .brand { margin-bottom: 18px; }
  .nav { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-height: 44px; border-radius: 12px; font-weight: 700; color: var(--muted); text-align: left; }
  .nav:hover { background: rgba(59, 42, 26, 0.07); color: var(--ink); }
  .nav.on { color: var(--ink); background: var(--sticky); box-shadow: var(--shadow-note); }
  .nav .badge { position: static; margin-left: auto; }
  .rail .post-btn { margin-top: 18px; }
}

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; border: 2px solid var(--ink); background: var(--paper); box-shadow: 0 3px 0 var(--ink); }
.btn:hover { background: #fff; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { background: var(--danger); color: #fff; }
.btn:disabled { opacity: 0.5; cursor: default; transform: none; }
.btn svg { width: 18px; height: 18px; }
.btn.block { width: 100%; font-size: 15px; }
.btns { display: flex; gap: 10px; flex-wrap: wrap; }
.icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink); }
.icon:hover { background: rgba(59, 42, 26, 0.08); }
.link { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }

.scroll { flex: 1; min-height: 0; overflow-y: auto; padding-inline: 16px; -webkit-overflow-scrolling: touch; }
.col { max-width: 560px; margin: 0 auto; padding-block: 18px 48px; display: flex; flex-direction: column; gap: 20px; }
.col.wide { max-width: 1080px; }
@media (min-width: 860px) { .col { padding-block: 36px 64px; } }

/* 見出し：スマホでは雑誌風ロゴ、PCでは手書きの見出し */
.vhead { display: flex; flex-direction: column; gap: 4px; }
.vhead h1 { margin: 0; font-family: var(--f-hand); font-weight: 400; font-size: 28px; line-height: 1.2; text-wrap: balance; }
.vhead .sub { color: #5b4430; font-size: 12px; letter-spacing: 0.06em; }
.vhead .over-t { color: var(--over); }
.brand-m { font-family: var(--f-logo) !important; font-weight: 800 !important; font-size: 34px !important; letter-spacing: 0.04em; line-height: 1 !important; }
.brand-m + h1 { display: none; }
@media (min-width: 860px) { .brand-m { display: none; } .brand-m + h1 { display: block; } }

.note { background: var(--paper); border-radius: 4px; padding: 14px 16px; font-size: 14px; box-shadow: var(--shadow-note); }
.note.howto p { margin: 6px 0 0; color: #5b4430; }
.empty { text-align: center; padding: 48px 16px; color: #5b4430; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.empty svg { width: 40px; height: 40px; color: var(--ink); }
.empty b { color: var(--ink); font-family: var(--f-hand); font-weight: 400; font-size: 22px; }

.av { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--ink); flex: none; background: var(--accent); display: inline-grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; overflow: hidden; }
.av.lg { width: 88px; height: 88px; border-width: 3px; font-size: 34px; }

/* ふせんのボード */
.board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; padding: 12px 2px 0; align-items: start; }
.board > :nth-child(2n) { margin-top: 18px; }
@media (min-width: 640px) {
  .board { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 26px; }
  .board > :nth-child(2n) { margin-top: 0; }
  .board > :nth-child(3n+2) { margin-top: 22px; }
}
@media (min-width: 1100px) {
  .board { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .board > :nth-child(3n+2) { margin-top: 0; }
  .board > :nth-child(2n) { margin-top: 20px; }
}
/* 人ごとのボードの切り替え（スマホは4人×2段、広い画面は8人を1段） */
.seg.cats { width: 100%; max-width: 880px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; border-radius: 22px; }
.seg.cats button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 15px; padding: 0 4px; white-space: nowrap; }
@media (min-width: 760px) { .seg.cats { grid-template-columns: repeat(8, minmax(0, 1fr)); border-radius: 999px; } }
.seg.cats .cnt { min-width: 22px; padding: 0 6px; border-radius: 999px; background: rgba(59, 42, 26, 0.1); font-size: 12px; line-height: 20px; font-variant-numeric: tabular-nums; }
.seg.cats button.on .cnt { background: rgba(251, 250, 246, 0.25); }
.seg.cats .odot { width: 9px; height: 9px; border-radius: 50%; background: var(--heart); border: 1.5px solid var(--ink); }

.c-yellow { --fc: var(--f-yellow); }
.c-pink { --fc: var(--f-pink); }
.c-blue { --fc: var(--f-blue); }
.c-green { --fc: var(--f-green); }
.c-orange { --fc: var(--f-orange); }
.fusen { position: relative; display: flex; width: 100%; aspect-ratio: 1; background: var(--fc, var(--f-yellow)); box-shadow: var(--shadow-note), 0 14px 14px -12px rgba(60, 35, 10, 0.45); transform: rotate(var(--tilt, 0deg)); transition: transform 0.2s; }
/* のりの部分：上のほうが少しだけ濃い */
.fusen::before { content: ""; position: absolute; inset: 0 0 auto; height: 20%; background: linear-gradient(rgba(60, 35, 10, 0.07), transparent); pointer-events: none; }
.fusen.skel { background: var(--panel); }
.tape { position: absolute; top: -10px; left: 50%; width: 60px; height: 20px; margin-left: -30px; background: var(--tape); transform: rotate(calc(var(--tilt, 0deg) * -1.6)); pointer-events: none; z-index: 1; }
.fbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 18px 14px 12px; text-align: left; }
.ftext { flex: 1; min-height: 0; font-family: var(--f-hand); font-size: 16px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow-wrap: anywhere; white-space: pre-wrap; }
@media (min-width: 640px) { .ftext { font-size: 18px; } }
.fmeta { display: flex; flex-wrap: wrap; gap: 2px 8px; padding-right: 36px; font-size: 11px; font-weight: 700; color: rgba(59, 42, 26, 0.78); font-variant-numeric: tabular-nums; }
.fmeta span { display: inline-flex; align-items: center; gap: 3px; }
.fmeta svg { width: 13px; height: 13px; }
.fmeta .due.soon { color: #8a4b12; }
.fmeta .due.over { color: var(--over); }
.fusen.is-over { outline: 2px dashed var(--over); outline-offset: -7px; }
/* 右下の「完了」ボタン（押せる範囲は見た目より広くとる） */
.fcheck { position: absolute; right: 8px; bottom: 8px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--ink); background: rgba(255, 255, 255, 0.55); color: transparent; display: grid; place-items: center; }
.fcheck::after { content: ""; position: absolute; inset: -8px; }
.fcheck svg { width: 18px; height: 18px; }
.fusen.is-done { filter: saturate(0.6); }
.fusen.is-done .ftext { text-decoration: line-through; text-decoration-color: rgba(59, 42, 26, 0.45); opacity: 0.75; }
.fusen.is-done .fcheck { background: var(--accent); color: var(--accent-ink); }
.fcheck:active { color: var(--accent); background: #fff; }
/* マウスを乗せたときの見た目は、マウスのある端末だけ。
   スマホでは指を離したあとも「乗っている」状態が残り、完了で繰り上がってきたふせんに✓が出てしまうため */
@media (hover: hover) and (pointer: fine) {
  .fusen:hover { transform: rotate(0deg) scale(1.03); z-index: 1; }
  .fcheck:hover { color: var(--accent); background: #fff; }
  .fusen.is-done .fcheck:hover { background: var(--paper); color: var(--ink); }
  .fusen.add:hover { background: rgba(251, 250, 246, 0.35); }
}
/* 「ふせんを貼る」の空き枠 */
.fusen.add { background: rgba(251, 250, 246, 0.18); border: 2px dashed rgba(59, 42, 26, 0.5); box-shadow: none; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--ink); font-family: var(--f-hand); font-size: 18px; }
.fusen.add::before { display: none; }
.fusen.add svg { width: 30px; height: 30px; }

.skel { background: linear-gradient(90deg, var(--panel), #e8dcc6, var(--panel)); background-size: 200% 100%; animation: sh 1.4s linear infinite; }
@keyframes sh { to { background-position: -200% 0 } }

/* マイページ */
.prof { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.prof h1 { margin: 0; font-family: var(--f-hand); font-weight: 400; font-size: 30px; line-height: 1.2; overflow-wrap: anywhere; }
.prof .stats { color: #5b4430; font-size: 14px; font-variant-numeric: tabular-nums; }
.prof .grow { flex: 1; min-width: 10em; }

/* シート */
.overlay { position: fixed; inset: 0; background: rgba(40, 25, 10, 0.55); display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px)); z-index: 20; }
.sheet { background: var(--paper); border: 2px solid var(--ink); border-radius: 8px; width: min(520px, 100%); max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 18px; box-shadow: 0 6px 0 var(--ink), 0 20px 50px rgba(0, 0, 0, 0.3); }
.sheet > header { display: flex; align-items: center; }
.sheet h2 { margin: 0; font-family: var(--f-hand); font-weight: 400; font-size: 24px; flex: 1; }
.sheet footer { display: flex; align-items: center; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.sheet footer .hint { flex: 1; color: var(--muted); font-size: 13px; min-width: 6em; }
.tf { width: 100%; border: 2px solid var(--ink); background: #fff; border-radius: 10px; padding: 10px 12px; font-size: 16px; min-height: 44px; }
.tf:focus { outline: none; border-color: var(--accent); }
.confirm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; background: var(--panel); border: 2px dashed var(--danger); font-size: 14px; }
.confirm span { flex: 1; min-width: 10em; }

/* ふせんの編集 */
.fpad { position: relative; background: var(--fc); padding: 22px 16px 14px; margin: 8px 4px 0; box-shadow: var(--shadow-photo); transform: rotate(-0.6deg); }
.fpad::before { content: ""; position: absolute; inset: 0 0 auto; height: 36px; background: linear-gradient(rgba(60, 35, 10, 0.07), transparent); pointer-events: none; }
.fpad textarea { position: relative; display: block; width: 100%; min-height: 140px; border: 0; background: transparent; resize: vertical; padding: 0; font-family: var(--f-hand); font-size: 20px; line-height: 1.5; outline: none; }
.fpad textarea::placeholder { color: rgba(59, 42, 26, 0.45); }
.fpad:focus-within { box-shadow: var(--shadow-photo), 0 0 0 3px var(--accent); }
.swatches { display: flex; gap: 12px; padding: 2px 4px; }
.sw { width: 36px; height: 36px; border-radius: 50%; background: var(--fc); border: 2px solid var(--ink); position: relative; }
.sw::after { content: ""; position: absolute; inset: -5px; }
.sw.on { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
.fsec { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1.5px dashed var(--faint); }
.flabel { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; }
.flabel svg { width: 18px; height: 18px; }
.fsec .hint { margin: -4px 0 0; color: var(--muted); font-size: 12px; }
.duebox { display: flex; gap: 8px; align-items: center; }
.duebox .tf { flex: 1; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 38px; padding: 6px 14px; border-radius: 999px; border: 2px solid var(--ink); background: var(--paper); font-weight: 700; font-size: 13px; }
.chip:hover { background: #fff; }
.chip.on { background: var(--accent); color: var(--accent-ink); }
.custom { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.custom input { width: 6em; }
.custom select { width: auto; }
.warn { margin: 0; padding: 8px 12px; border-radius: 6px; background: #f6dcd3; color: var(--danger); font-size: 13px; }
.warn svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 4px; }
.info { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; font-variant-numeric: tabular-nums; }

/* 通知の設定 */
.nsec { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding-top: 14px; border-top: 1.5px dashed var(--faint); }
.nsec h3 { margin: 0; font-size: 16px; }
.nsec .hint { margin: 0; color: var(--muted); font-size: 13px; }
.nsec .note { width: 100%; background: var(--panel); box-shadow: none; }

/* ログイン画面 */
.auth { flex: 1; overflow-y: auto; display: grid; place-items: center; padding: 40px 16px; }
.auth-card { width: min(400px, 100%); display: flex; flex-direction: column; gap: 20px; }
.auth-brand { font-family: var(--f-logo); font-weight: 800; font-size: 46px; letter-spacing: 0.04em; color: var(--ink); line-height: 1; margin: 0; }
.auth-tag { margin: 8px 0 0; padding-top: 8px; border-top: 2px solid var(--ink); color: #5b4430; font-size: 13px; letter-spacing: 0.06em; }
.auth-hint { margin: 0; color: var(--muted); font-size: 13px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--panel); border: 2px solid var(--ink); border-radius: 999px; padding: 4px; }
.seg button { min-height: 40px; border-radius: 999px; font-weight: 700; color: var(--muted); }
.seg button.on { background: var(--accent); color: var(--accent-ink); }
/* ログインの紙は黄色いふせん */
.auth form { position: relative; display: flex; flex-direction: column; gap: 14px; background: var(--f-yellow); padding: 26px 20px 22px; box-shadow: var(--shadow-photo); transform: rotate(-0.6deg); }
.auth form::before { content: ""; position: absolute; top: -10px; left: 50%; width: 80px; height: 22px; margin-left: -40px; background: var(--tape); transform: rotate(3deg); }
.auth label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; color: #5b4430; }
.auth .msg { font-size: 14px; padding: 10px 12px; border-radius: 4px; background: var(--paper); }
.auth .msg.err { background: #f6dcd3; color: var(--danger); }
.auth .alt { text-align: center; font-size: 14px; }

#toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 700; z-index: 30; max-width: calc(100% - 32px); box-shadow: var(--shadow-note); }
@media (min-width: 860px) { #toast { bottom: 32px; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }