/* 段取り帖 — 紙のノート風（jsx版のパレットを踏襲） */
html, body { margin: 0; min-height: 100%; }

.dd-root {
  --paper: #DCDFD8; --card: #EBEDE6; --ink: #2E332C; --soft: #6C7268; --line: #C4C9BC;
  min-height: 100vh; background: var(--paper); color: var(--ink);
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", Meiryo, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; letter-spacing: .01em;
}
.dd-root, .dd-root * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

.dd-wrap { max-width: 520px; margin: 0 auto; padding: 22px 18px 108px; }
.dd-home {
  display: inline-block; margin-bottom: 10px; font-size: 11px; letter-spacing: .08em;
  color: var(--soft); text-decoration: none;
}
.dd-home:hover { color: var(--ink); }
.dd-h1 { font-size: 20px; font-weight: 700; letter-spacing: .14em; margin: 0; }
.dd-sub { font-size: 12px; color: var(--soft); margin: 4px 0 0; letter-spacing: .08em; }

.dd-phase { display: flex; gap: 8px; align-items: baseline; margin-top: 16px; padding: 11px 13px;
  background: var(--card); border: 1px solid var(--line); border-radius: 13px; }
.dd-pn { font-size: 11px; color: var(--soft); letter-spacing: .1em; }
.dd-pname { font-size: 13px; font-weight: 700; }
.dd-pflow { font-size: 11px; color: var(--soft); margin-top: 3px; line-height: 1.5; }

.dd-datebar { display: flex; align-items: center; justify-content: space-between; margin: 22px 2px 12px; }
.dd-date { font-size: 15px; font-weight: 700; }
.dd-dow { font-size: 12px; color: var(--soft); margin-left: 7px; font-weight: 500; }
.dd-chip { font-size: 11.5px; font-weight: 700; padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); letter-spacing: .06em; }
button.dd-chip { cursor: pointer; font-family: inherit; }
.dd-note { font-size: 11.5px; color: var(--soft); margin: 0 2px 14px; letter-spacing: .05em; }

/* 全体量からの逆算（今日タブ） */
.dd-quota { margin: 0 2px 14px; }
.dd-quotan { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; margin-right: 6px; }
.dd-quotal { font-size: 11.5px; color: var(--soft); letter-spacing: .05em; }
.dd-quotasub { display: block; font-size: 11px; color: var(--soft); margin-top: 3px; letter-spacing: .05em; }

.dd-task { display: flex; align-items: center; gap: 13px; padding: 15px 15px; margin-bottom: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; cursor: pointer;
  transition: opacity .35s ease, background .2s ease; position: relative; }
.dd-task.ro { cursor: default; }
.dd-task:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.dd-task.done { opacity: .55; }
.dd-box { width: 22px; height: 22px; border-radius: 7px; flex: 0 0 auto; border: 2px solid; position: relative; transition: background .2s; }
.dd-box.done::after { content: ""; position: absolute; inset: 0; margin: auto; width: 11px; height: 6px;
  border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.dd-ttext { flex: 1; font-size: 14px; line-height: 1.45; position: relative; padding-right: 4px; }
.dd-strike { position: absolute; left: -2px; top: 52%; height: 3px; border-radius: 3px; width: calc(100% + 4px);
  transform-origin: left center; transform: scaleX(0) rotate(-1.2deg); opacity: .85; transition: transform .4s cubic-bezier(.5,.1,.3,1); }
.dd-task.done .dd-strike { transform: scaleX(1) rotate(-1.2deg); }
.dd-subtag { font-size: 10px; color: var(--soft); letter-spacing: .08em; margin-top: 2px; display: block; }
.dd-count { font-size: 12px; color: var(--soft); margin: 16px 2px 4px; letter-spacing: .06em; }

.dd-big { font-size: 64px; font-weight: 800; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.dd-biglab { font-size: 12px; color: var(--soft); letter-spacing: .1em; }
.dd-bar { height: 9px; border-radius: 99px; background: #CFD4C6; overflow: hidden; margin-top: 12px; }
.dd-bar > i { display: block; height: 100%; border-radius: 99px; transition: width .5s ease; }
.dd-srow { display: flex; align-items: center; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.dd-sname { width: 46px; font-size: 12.5px; font-weight: 700; flex: 0 0 auto; }
.dd-sname-wide { width: 96px; font-size: 11.5px; line-height: 1.35; } /* 通読は書名が長い */
.dd-sbarwrap { flex: 1; }
.dd-snum { font-size: 11px; color: var(--soft); font-variant-numeric: tabular-nums; text-align: right; margin-bottom: 4px; }
.dd-sbar { height: 7px; border-radius: 99px; background: #CFD4C6; overflow: hidden; }
.dd-sbar > i { display: block; height: 100%; transition: width .4s ease; }
.dd-steps { display: flex; gap: 5px; flex: 0 0 auto; }
.dd-step { width: 34px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--card);
  font-size: 11px; font-weight: 700; color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums; font-family: inherit; }
.dd-step:active { transform: translateY(1px); }
.dd-momrow { display: flex; gap: 12px; margin-top: 20px; }
.dd-mom { flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 14px; text-align: center; }
.dd-momn { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dd-moml { font-size: 10.5px; color: var(--soft); letter-spacing: .08em; margin-top: 3px; }

.dd-wk { background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 4px 14px; }
.dd-wkrow { display: flex; align-items: center; gap: 12px; padding: 13px 2px; border-bottom: 1px solid var(--line); }
.dd-wkrow:last-child { border-bottom: none; }
.dd-wkd { width: 22px; font-size: 14px; font-weight: 700; flex: 0 0 auto; }
.dd-wkt { flex: 1; }
.dd-wktl { font-size: 12px; font-weight: 700; }
.dd-wkn { font-size: 11px; color: var(--soft); margin-top: 2px; line-height: 1.4; }
.dd-wkrow.now { background: #E3E8DA; margin: 0 -14px; padding-left: 16px; padding-right: 16px; border-radius: 9px; }

.dd-savemsg { font-size: 11px; color: var(--soft); letter-spacing: .06em; margin-left: 10px; }

/* 今日タブ: 枠の下に、その週に本人が引いた中身 */
.dd-tplan { display: block; font-size: 11.5px; margin-top: 3px; letter-spacing: .03em; }

/* 週タブ: 表を引く欄 */
.dd-planrow { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.dd-planframe {
  flex: 0 0 42%; font-size: 12px; line-height: 1.4; padding-left: 9px;
  border-left: 3px solid var(--line);
}
.dd-planinput {
  flex: 1; min-width: 0; font: inherit; font-size: 12.5px; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px;
}
.dd-planinput::placeholder { color: var(--soft); }
.dd-planinput:focus { outline: none; border-color: var(--ink); }
.dd-planvalue { flex: 1; min-width: 0; font-size: 12.5px; color: var(--soft); }

.dd-tabs { position: fixed; left: 0; right: 0; bottom: 0; display: flex; background: rgba(235, 237, 230, .94);
  backdrop-filter: blur(8px); border-top: 1px solid var(--line); }
.dd-tab { flex: 1; padding: 13px 0 22px; text-align: center; font-size: 12px; font-weight: 700; color: var(--soft);
  background: none; border: none; cursor: pointer; letter-spacing: .06em; font-family: inherit; }
.dd-tab.on { color: var(--ink); }
.dd-tab .dot { display: block; width: 5px; height: 5px; border-radius: 99px; background: var(--ink); margin: 5px auto 0; opacity: 0; }
.dd-tab.on .dot { opacity: 1; }

@media (prefers-reduced-motion: reduce) { .dd-root * { animation: none !important; transition: none !important; } }