/* asatte（明後日から見た明日）。白地に3行、色は日ごとに1つ（2026-11-13） */
:root {
  --bg: #ffffff;
  --fg: #111111;
  --muted: #8a8a8a;
  --line: #e4e4e4;
  --today: #111111;     /* 今日：黒 */
  --asatte: #9e2a35;    /* 明後日：臙脂 */
  --ashita: #1f2d4d;    /* 明日：ブルーブラック */
  --field: #fafafa;
  --rise-a: #c4402a;  /* 朱 */
  --rise-b: #dc6c28;  /* 橙 */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121212; --fg: #ececec; --muted: #8d8d8d; --line: #2a2a2a; --field: #181818;
    --today: #ececec; --asatte: #d87a82; --ashita: #9fb2dc;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121212; --fg: #ececec; --muted: #8d8d8d; --line: #2a2a2a; --field: #181818;
  --today: #ececec; --asatte: #d87a82; --ashita: #9fb2dc;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body {
  font-family: "IBM Plex Sans JP", system-ui, sans-serif;
  font-size: 16px; line-height: 1.6;
  max-width: 640px; margin: 0 auto; padding: 0 16px;
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: inherit; }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: default; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 0 28px; }
.brand { white-space: nowrap; display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 500; letter-spacing: 0.04em; }
.brand img { display: block; }
/* 名前は asatte、副題の「明後日から見た明日」は下に小さく淡く置く（2026-11-13、依頼） */
.brand .name { display: flex; flex-direction: column; line-height: 1.2; }
.brand .title { font-size: 18px; letter-spacing: 0.06em; }
.brand .sub { font-size: 11px; font-weight: 400; color: var(--muted); letter-spacing: 0.08em; }
.me { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.me img { width: 24px; height: 24px; border-radius: 50%; }

main { flex: 1; }
.days { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.day { display: flex; align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.day.today { color: var(--today); }
.day.asatte { color: var(--asatte); }
.day.ashita { color: var(--ashita); }
.day .date { flex: none; width: 6.5em; font-variant-numeric: tabular-nums; }
.day .d { display: block; font-weight: 500; }
.day .when { display: block; font-size: 12px; opacity: 0.7; letter-spacing: 0.08em; }
.day input {
  flex: 1; min-width: 0; font: inherit; color: inherit;
  background: transparent; border: none; border-bottom: 1px solid transparent;
  padding: 4px 0; outline: none;
}
.day input::placeholder { color: var(--muted); opacity: 0.6; }
.day input:focus { border-bottom-color: currentColor; }
.day .mark { flex: none; font-size: 12px; color: var(--muted); min-width: 4em; text-align: right; }

.send { margin-top: 32px; }
.label { margin: 0 0 6px; font-size: 12px; color: var(--muted); letter-spacing: 0.08em; }
.preview {
  margin: 0 0 16px; padding: 12px 14px; min-height: 3em;
  background: var(--field); border: 1px solid var(--line); border-radius: 6px;
  font: inherit; font-size: 14px; white-space: pre-wrap; word-break: break-word;
}
.preview:empty::before { content: "予定を1つ書くと、ここに投稿の文が出る"; color: var(--muted); }
/* 投稿のボタン。黒地に白は怖いと言われた。生きている実感と、前へ進む向きを出すために、朱から橙へ左から右に流れる日の出の色にした（2026-11-13、指摘） */
.primary {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; padding: 14px; border: none; border-radius: 999px;
  background: linear-gradient(100deg, var(--rise-a), var(--rise-b));
  background-size: 140% 100%; background-position: 0 0;
  color: #fff; font-weight: 500; letter-spacing: 0.06em;
  box-shadow: 0 6px 18px -8px var(--rise-a);
  transition: background-position 0.4s, transform 0.15s, box-shadow 0.15s;
}
.primary .dots { flex: none; fill: none; stroke: #fff; stroke-width: 1.5; }
.primary .dots path { stroke-opacity: 0.7; stroke-linecap: round; }
.primary:not(:disabled):hover { background-position: 100% 0; box-shadow: 0 8px 22px -8px var(--rise-a); }
.primary:not(:disabled):active { transform: translateY(1px); }
.primary:disabled { opacity: 0.4; box-shadow: none; }
.ghost { white-space: nowrap; padding: 8px 14px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--fg); }
.note { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.status { margin: 6px 0 0; font-size: 14px; min-height: 1.4em; }
.status.bad { color: var(--asatte); }

.sheet { border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--fg); padding: 24px; width: min(420px, calc(100vw - 32px)); }
.sheet::backdrop { background: rgba(0, 0, 0, 0.3); }
.sheet-title { margin: 0; font-weight: 500; }
.sheet input { width: 100%; margin-top: 14px; padding: 10px 12px; font: inherit; color: inherit; background: var(--field); border: 1px solid var(--line); border-radius: 6px; }
.sheet .row { display: flex; gap: 8px; margin-top: 14px; }
.atomo { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--fg); }

.site { padding: 40px 0 24px; }
.fine { margin: 0; font-size: 12px; color: var(--muted); }

@media (max-width: 420px) {
  .day { gap: 10px; }
  .day .date { width: 5.8em; }
  .me span { display: none; }
}