/* 推し活ノートのサイトだけの CSS。共通の部分は kz-*.css（kazuapps/design/kz.css の写し）。
   中身を変えたら名前の番号を上げる（/assets/ は 1 年キャッシュする）。 */

/* 夜の面：今週の予定、近い記念日、今月の支出（見本の記録） */
.note-panel { display: grid; gap: 1.5rem; }
.note-week {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem 0.4rem;
  color: var(--night-muted); font-size: 0.8125rem; text-align: center;
}
.note-week b {
  justify-self: center; width: 0.75rem; height: 0.75rem; border-radius: 50%;
  border: 1.5px solid var(--night-line);
}
.note-week b.has-event { background: var(--accent); border-color: var(--accent); }
/* 記念日はハートの形（四角を回して、上に丸を 2 つ） */
.note-week b.has-anniv { position: relative; width: 0.7rem; height: 0.7rem; border: 0; border-radius: 0; background: var(--night-ink); transform: rotate(45deg); }
.note-week b.has-anniv::before, .note-week b.has-anniv::after {
  content: ""; position: absolute; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--night-ink);
}
.note-week b.has-anniv::before { left: -0.35rem; top: 0; }
.note-week b.has-anniv::after { left: 0; top: -0.35rem; }
.note-rows { display: grid; gap: 0; margin: 0; }
.note-rows > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 0; border-top: 1px solid var(--night-line);
}
.note-rows dt { color: var(--night-muted); font-size: 0.875rem; }
.note-rows dd { margin: 0; font-size: 1.125rem; font-weight: 700; text-align: right; }
/* class の無い span だけ（数の改行の印 span.nw などを巻き込まない。2026-10-12） */
.note-rows dd span:not([class]) { display: block; color: var(--night-muted); font-size: 0.8125rem; font-weight: 400; }
.note-meter { height: 0.6rem; border-radius: 999px; background: var(--night-raised); overflow: hidden; }
.note-meter i { display: block; width: 85%; height: 100%; border-radius: inherit; background: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .note-meter i { animation: note-fill 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s both; }
}
@keyframes note-fill { from { width: 0; } }
@media (min-width: 60rem) {
  .note-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; column-gap: 3rem; }
  .note-week { font-size: 0.9375rem; gap: 1rem 0.75rem; }
  .note-week b { width: 1.1rem; height: 1.1rem; }
  .note-meter, .note-panel .night-note { grid-column: 1 / -1; }
}

/* 使い方は 4 つの手順 */
.steps-4 { --steps: 4; }

/* 無料版と Pro の箇条書き */
.plain-list { margin-top: 0.4rem; padding-left: 1.2em; color: var(--muted); }
.plain-list li + li { margin-top: 0.3rem; }
.plans-note { margin-top: 1.5rem; max-width: var(--measure); color: var(--muted); font-size: 0.9375rem; }

/* お問い合わせ */
.contact-address { margin-top: 0.75rem; color: var(--muted); font-size: 0.9375rem; }