/* 一夜漬けシミュレーター */
:root {
  --accent: #4b4fc4; --accent-soft: #e4e5fb; --accent-ink: #ffffff;
  --iz-wall: #e9e3d6; --iz-desk: #b98a5a; --iz-night: #1b2550; --iz-dawn: #f2b38a; --iz-day: #9fd0f2;
  --iz-moon: #ffe7a3; --iz-sun: #ffb84a; --iz-frame: #8a7a64; --iz-clock: #fffdf6; --iz-ink: #2a2620;
  --iz-lamp: #3a3f52; --iz-light: rgba(255, 230, 150, .35); --iz-note: #fffdf6; --iz-book1: #c8504a; --iz-book2: #3a7bd5;
  --iz-study: #e2a93a; --iz-sleep: #6f7fe0; --iz-phone: #d4669a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #9ea2ff; --accent-soft: #252a52; --accent-ink: #0f1220;
    --iz-wall: #2a2e44; --iz-desk: #6b5038; --iz-frame: #59617e; --iz-clock: #e9e6dc; --iz-note: #e9e6dc;
  }
}
:root[data-theme="dark"] {
  --accent: #9ea2ff; --accent-soft: #252a52; --accent-ink: #0f1220;
  --iz-wall: #2a2e44; --iz-desk: #6b5038; --iz-frame: #59617e; --iz-clock: #e9e6dc; --iz-note: #e9e6dc;
}

.mn-title { font-size: clamp(26px, 8vw, 40px); }
.iz-scene { display: block; width: 100%; max-width: 380px; margin: 4px auto 8px; }
.iz-wall { fill: var(--iz-wall); }
.iz-win { stroke: var(--iz-frame); stroke-width: 4; }
.iz-win.is-night { fill: var(--iz-night); } .iz-win.is-dawn { fill: var(--iz-dawn); } .iz-win.is-day { fill: var(--iz-day); }
.iz-frame { stroke: var(--iz-frame); stroke-width: 3; fill: none; }
.iz-moon { fill: var(--iz-moon); }
.iz-sun { fill: var(--iz-sun); }
.iz-star { fill: #fff; }
.iz-clock { fill: var(--iz-clock); stroke: var(--iz-frame); stroke-width: 3; }
.iz-tick { stroke: #2a2620; stroke-width: 2; }
.iz-hand { stroke: #2a2620; stroke-width: 2; stroke-linecap: round; }
.iz-hand-h { stroke-width: 3.5; }
.iz-hand-c { fill: #c8504a; }
.iz-desk { fill: var(--iz-desk); }
.iz-lamp { fill: var(--iz-lamp); stroke: var(--iz-lamp); stroke-width: 3; stroke-linejoin: round; }
.iz-light { fill: var(--iz-light); }
.iz-note { fill: var(--iz-note); stroke: var(--iz-frame); stroke-width: 1; }
.iz-note-line { stroke: #9fb2e0; stroke-width: 1.2; }
.iz-book1 { fill: var(--iz-book1); } .iz-book2 { fill: var(--iz-book2); }
.iz-phone { fill: #333; }
.iz-phone.is-on { fill: #7fd0ff; filter: drop-shadow(0 0 4px #7fd0ff); }
.iz-zzz { font-size: 22px; font-weight: 900; fill: var(--iz-sleep); animation: iz-z 1.6s ease-in-out infinite; }
@keyframes iz-z { 50% { translate: 6px -6px; opacity: .6; } }

.iz-done { color: var(--good); margin: 8px 0 0; }
.iz-time { font-size: 26px; font-variant-numeric: tabular-nums; color: var(--accent); }
.iz-gauges { display: grid; gap: 6px; }
.iz-g { display: grid; grid-template-columns: 4em 1fr 2.4em; gap: 8px; align-items: center; font-size: 14px; }
.iz-g-l { color: var(--text-sub); font-weight: 700; }
.iz-g-v { text-align: right; font-variant-numeric: tabular-nums; }
.iz-g-bar { height: 12px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.iz-g-bar i { display: block; height: 100%; border-radius: 99px; transition: width .4s; }
.iz-g-bar.is-mem i { background: var(--iz-study); }
.iz-g-bar.is-sleepy i { background: var(--iz-sleep); }
.iz-g-bar.is-mood i { background: var(--iz-phone); }
.iz-feedback { background: var(--surface-2); border-radius: 10px; padding: 8px 12px; font-size: 14px; margin: 0; }
.iz-event { display: flex; gap: 10px; align-items: flex-start; background: var(--warn-soft); border: 1px solid var(--warn); border-radius: 12px; padding: 10px 12px; font-size: 15px; }
.iz-event b { flex: none; color: var(--warn); font-size: 13px; }
.iz-choice { display: flex; gap: 12px; align-items: center; }
.iz-choice:disabled { opacity: .5; }
.iz-ico { width: 30px; height: 30px; flex: none; }
.iz-ico-a { fill: var(--accent); } .iz-ico-b { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1; } .iz-ico-line { stroke: var(--accent); stroke-width: 1.6; fill: none; }

.iz-unit { font-size: .4em; margin-left: 4px; color: var(--text); }
.iz-type { font-size: 24px; font-weight: 900; margin: 4px 0; }
.iz-night { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; margin: 10px 0 6px; }
.iz-night-c { border-radius: 8px; padding: 4px 0 2px; display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.iz-night-c .iz-ico { width: 20px; height: 20px; }
.iz-night-c small { font-size: 10px; color: var(--text-sub); }
.iz-night-c.is-study { background: color-mix(in srgb, var(--iz-study) 25%, transparent); }
.iz-night-c.is-sleep { background: color-mix(in srgb, var(--iz-sleep) 25%, transparent); }
.iz-night-c.is-phone { background: color-mix(in srgb, var(--iz-phone) 25%, transparent); }
.iz-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; height: 130px; margin: 8px 0; }
.iz-bar { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; text-align: center; }
.iz-bar em { font-style: normal; font-size: 11px; color: var(--text-sub); }
.iz-bar i { display: block; background: var(--surface-2); border-radius: 4px 4px 0 0; min-height: 2px; max-height: 80%; }
.iz-bar.is-me i { background: var(--accent); }
.iz-bar span { font-size: 11px; color: var(--text-sub); }
.iz-tip { background: var(--accent-soft); }
.iz-zukan { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.iz-z { border: 2px dashed var(--line); border-radius: 10px; padding: 6px 10px; line-height: 1.4; }
.iz-z b { display: block; font-size: 14px; }
.iz-z small { color: var(--text-sub); font-size: 12px; }
.iz-z.is-got { border-style: solid; background: var(--surface); }
@media (min-width: 560px) { .iz-zukan { grid-template-columns: repeat(4, 1fr); } }
@media (prefers-reduced-motion: reduce) { .iz-zzz { animation: none; } }