:root {
            --bg: #f7f5f2;
            --card: #ffffff;
            --line: #e3ddd4;
            --text: #3a332b;
            --sub: #948a7c;
            --milk: #008d94;
            --milk-bg: #3b3123;
            --milk-border: #5c4a2c;
            --pump: #005694;
            --nursing: #d98fa8;
            --other: #5b9bd5;
            --other-bg: #e8f2fc;
            --other-border: #c9e0f5;
            --sleep: #c9d6e8;
            --sleep-line: #a9bcd8;
            --sleep-ico: #5c6f8f;
            --center-btn: #5c6f8f;
            --accent: #e08a8a;
            --danger: #d16060;
            --danger-bg: #fbe6e6;
            --poop: #8b5e3c;
            --poop-bg: #f0e4da;
            --pee: #5fb8d6;
            --pee-bg: #e3f5fa;
            --now-line: #e03030;
            --peek-shade: rgba(0, 0, 0, .025);
            --divider: #c9bfae;
            --divider-text: #a8977f;
            --note-bg: #fff8b8;
            --note-line: #e0cf72;
            --note-text: #5a4f2a;
            --shadow: rgba(0, 0, 0, .25);
            --night-band: rgba(56, 78, 132, .30);
            --day-band: rgba(255, 196, 60, .55);
            --dawn-band: rgba(255, 150, 70, .42);
            --sun-mark: rgba(196, 116, 20, .85);
            --fs-h: 1;
            --fs-t: 1;
            --fs-b: 1;
            --fs-e: 1;
            /* ヘッダー/タイムライン/ボタン/経過時間行の文字サイズ倍率（設定から変更） */
        }

        /* ダークモード：設定が「自動」のときはOSに追従し、明示指定があればそれを優先する */
        @media (prefers-color-scheme: dark) {
            :root:not([data-theme="light"]) {
                --bg: #181614;
                --card: #242120;
                --line: #3a3532;
                --text: #ece7e0;
                --sub: #9d9389;
                --milk: #008d94;
                --milk-bg: #3b3123;
                --milk-border: #5c4a2c;
                --pump: #005694;
                --nursing: #ad6f85;
                --other: #5b9bd5;
                --other-bg: #22303c;
                --other-border: #38536b;
                --sleep: #2b3a4e;
                --sleep-line: #4c6482;
                --sleep-ico: #9db4d4;
                --center-btn: #3f5372;
                --accent: #c2726f;
                --danger: #e08585;
                --danger-bg: #3d2424;
                --poop: #a3794f;
                --poop-bg: #372c22;
                --pee: #4b9bb8;
                --pee-bg: #1d323b;
                --now-line: #ff5c5c;
                --peek-shade: rgba(255, 255, 255, .035);
                --divider: #4d453d;
                --divider-text: #8b7f70;
                --note-bg: #6b5f22;
                --note-line: #8f7f2c;
                --note-text: #f4eec4;
                --shadow: rgba(0, 0, 0, .55);
                --night-band: rgba(6, 14, 42, .72);
                --day-band: rgba(255, 190, 70, .30);
                --dawn-band: rgba(255, 130, 60, .28);
                --sun-mark: rgba(255, 200, 90, .75);
            }
        }

        :root[data-theme="dark"] {
            --bg: #181614;
            --card: #242120;
            --line: #3a3532;
            --text: #ece7e0;
            --sub: #9d9389;
            --milk: #008d94;
            --milk-bg: #3b3123;
            --milk-border: #5c4a2c;
            --pump: #005694;
            --nursing: #ad6f85;
            --other: #5b9bd5;
            --other-bg: #22303c;
            --other-border: #38536b;
            --sleep: #2b3a4e;
            --sleep-line: #4c6482;
            --sleep-ico: #9db4d4;
            --center-btn: #3f5372;
            --accent: #c2726f;
            --danger: #e08585;
            --danger-bg: #3d2424;
            --poop: #a3794f;
            --poop-bg: #372c22;
            --pee: #4b9bb8;
            --pee-bg: #1d323b;
            --now-line: #ff5c5c;
            --peek-shade: rgba(255, 255, 255, .035);
            --divider: #4d453d;
            --divider-text: #8b7f70;
            --note-bg: #6b5f22;
            --note-line: #8f7f2c;
            --note-text: #f4eec4;
            --shadow: rgba(0, 0, 0, .55);
            --night-band: rgba(6, 14, 42, .72);
            --day-band: rgba(255, 190, 70, .30);
            --dawn-band: rgba(255, 130, 60, .28);
            --sun-mark: rgba(255, 200, 90, .75);
        }

        * {
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
            -webkit-user-select: none;
        }

        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
            background: var(--bg);
            color: var(--text);
            font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
            overscroll-behavior-y: none;
            overflow: hidden;
        }

        #app {
            max-width: 520px;
            margin: 0 auto;
            height: 100vh;
            height: 100dvh;
            display: flex;
            flex-direction: column;
            background: var(--bg);
        }

        /* Header */
        header {
            padding: 6px 14px 5px;
            background: var(--card);
            flex: 0 0 auto;
        }

        .headRow {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .babyInfo {
            display: flex;
            align-items: baseline;
            gap: 4px;
            min-width: 0;
            overflow: hidden;
        }

        .babyName {
            font-size: calc(13.5px*var(--fs-h));
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .babyAge {
            font-size: calc(10px*var(--fs-h));
            color: var(--sub);
            white-space: nowrap;
        }

        .headBtns {
            display: flex;
            gap: 4px;
            align-items: center;
            flex-shrink: 0;
        }

        .iconBtn {
            background: none;
            border: none;
            font-size: 17px;
            color: var(--sub);
            padding: 2px 3px;
            cursor: pointer;
        }

        .plusBtn {
            background: var(--accent);
            color: #fff;
            border: none;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            font-size: 15px;
            line-height: 1;
            cursor: pointer;
            flex-shrink: 0;
        }

        .dateNav {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 3px;
            flex: 1;
            min-width: 0;
        }

        .dateNav button {
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: 7px;
            font-size: calc(12px*var(--fs-h));
            width: 22px;
            height: 22px;
            color: var(--text);
            padding: 0;
            flex-shrink: 0;
        }

        .dateLabel {
            font-size: calc(12.5px*var(--fs-h));
            font-weight: 600;
            text-align: center;
            white-space: nowrap;
        }

        .todayBtn {
            font-size: calc(10.5px*var(--fs-h));
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: 20px;
            padding: 2px 7px;
            color: var(--sub);
            white-space: nowrap;
        }

        /* Summary row */
        /* 「最後の睡眠/母乳から何時間経ったか」を赤字で出す一行 */
        #elapsedBar {
            display: flex;
            gap: 14px;
            justify-content: center;
            flex-wrap: wrap;
            color: var(--text);
            background: var(--card);
            border-bottom: 1px solid var(--line);
            font-size: calc(11.5px*var(--fs-e));
            padding: 3px 6px 4px;
            flex: 0 0 auto;
        }

        #elapsedBar:empty {
            display: none;
        }

        /* 時間表示：数字は大きく太字、単位は目立つ色 */
        #elapsedBar .duration {
            color: var(--now-line);
        }

        #elapsedBar .num {
            font-size: 1.15em;
            font-weight: 800;
        }

        #summary {
            background: var(--card);
            border-bottom: 1px solid var(--line);
            padding: 6px 4px;
            flex: 0 0 auto;
        }

        #sumRow {
            display: flex;
            gap: 0;
            padding: 0 6px;
            overflow: hidden;
        }

        .sumTile {
            flex: 1 1 auto;
            min-width: 0;
            text-align: center;
            padding: 1px 3px;
            border-right: 1px solid var(--line);
        }

        .sumTile:last-child {
            border-right: none;
        }

        .sumTile .k {
            font-size: calc(8.5px*var(--fs-h));
            color: var(--sub);
            display: block;
            white-space: nowrap;
        }

        .sumTile .v {
            font-size: calc(11px*var(--fs-h));
            font-weight: 700;
            display: block;
            white-space: nowrap;
            margin-top: 1px;
        }

        /* 単位や「左/右」は小さく出して、7項目が横スクロールなしで収まるようにする */
        .sumTile .u {
            font-size: calc(8px*var(--fs-h));
            font-weight: 600;
            opacity: .7;
        }

        .sumTile.combo .v {
            color: var(--milk);
        }

        .exportBtn {
            background: none;
            border: none;
            color: var(--sub);
            font-size: 11.5px;
            text-decoration: underline;
            margin: 6px 10px 0;
        }

        /* Timeline */
        /* pan-y にしておくと縦スクロールは今まで通りで、ブラウザ側のピンチズームには取られない
     （ピンチ中はJSが一時的に touch-action:none に切り替える） */
        #timelineWrap {
            flex: 1;
            overflow-y: auto;
            padding: 10px 10px 12px;
            position: relative;
            touch-action: pan-y;
        }

        /* 変更中モード：項目の位置がスクロールでズレたり誤操作しないよう、スクロール自体を止める */
        #timelineWrap.frozen {
            overflow-y: hidden;
            touch-action: none;
        }

        .colHeads {
            display: grid;
            grid-template-columns: var(--col-l, 1fr) 46px var(--col-r, 1fr);
            font-size: calc(11px*var(--fs-h));
            color: var(--sub);
            margin-bottom: 4px;
            padding: 0 4px;
        }

        .colHeads .l {
            text-align: right;
            color: var(--milk);
            font-weight: 600;
        }

        .colHeads .r {
            text-align: left;
            color: var(--other);
            font-weight: 600;
        }

        .colHeads .c {
            text-align: center;
        }

        #timeline {
            position: relative;
            display: grid;
            grid-template-columns: var(--col-l, 1fr) 46px var(--col-r, 1fr);
            min-height: 1200px;
        }

        .hourCol {
            position: relative;
            grid-row: 1;
            overflow-x: visible;
        }

        .hourCol:first-of-type {
            padding-left: 50px;
        }

        #sleepLayer {
            grid-column: 1/-1;
            grid-row: 1;
            position: relative;
            z-index: 0;
            pointer-events: none;
        }

        .hourLine {
            position: absolute;
            left: 0;
            right: 0;
            border-top: 1px solid var(--line);
        }

        /* 時刻列には日中/夜間の色帯を敷くので、ラベルの背景は透明にして帯を途切れさせない */
        .hourLabel {
            position: absolute;
            font-size: calc(10px*var(--fs-t));
            color: var(--sub);
            left: 0;
            right: 0;
            text-align: center;
            transform: translateY(-50%);
            z-index: 2;
        }

        .dayDivider {
            position: absolute;
            left: 0;
            right: 0;
            border-top: 2px dashed var(--divider);
            z-index: 2;
        }

        .dayDividerLabel {
            position: absolute;
            font-size: calc(10.5px*var(--fs-t));
            color: var(--divider-text);
            font-weight: 700;
            left: 4px;
            padding: 1px 2px;
            z-index: 3;
            white-space: nowrap;
        }

        .peekShade {
            position: absolute;
            left: 0;
            right: 0;
            background: var(--peek-shade);
            z-index: 0;
            pointer-events: none;
        }

        /* 日の出〜日の入りの色帯（時刻列の背景）。昼夜がはっきり分かるよう濃いめにする */
        .sunNight {
            position: absolute;
            left: 0;
            right: 0;
            background: var(--night-band);
            z-index: 0;
            pointer-events: none;
        }

        .sunDay {
            position: absolute;
            left: 0;
            right: 0;
            z-index: 0;
            pointer-events: none;
            background: linear-gradient(to bottom, var(--dawn-band) 0, var(--day-band) 10px, var(--day-band) calc(100% - 10px), var(--dawn-band) 100%);
        }

        .sunMark {
            position: absolute;
            left: 0;
            right: 0;
            border-top: 2px solid var(--sun-mark);
            z-index: 1;
            pointer-events: none;
        }

        .sunIco {
            position: absolute;
            font-size: calc(10px*var(--fs-t));
            line-height: 1;
            left: 0;
            right: 0;
            text-align: center;
            z-index: 2;
            pointer-events: none;
        }

        /* 拡大縮小ボタン（タイムライン右上に浮かせる。高さ0のstickyなので場所を取らない） */
        #zoomCtl {
            position: sticky;
            top: 2px;
            z-index: 12;
            display: flex;
            gap: 3px;
            justify-content: flex-end;
            height: 0;
            pointer-events: none;
        }

        #zoomCtl button {
            pointer-events: auto;
            width: 26px;
            height: 22px;
            border-radius: 6px;
            border: 1px solid var(--line);
            background: var(--card);
            color: var(--sub);
            font-size: 14px;
            line-height: 1;
            opacity: .9;
            padding: 0;
        }

        .nowLine {
            position: absolute;
            left: 0;
            right: 0;
            border-top: 3px solid var(--now-line);
            z-index: 8;
            box-shadow: 0 0 4px rgba(224, 48, 48, .5);
        }

        .nowDot {
            position: absolute;
            left: 50%;
            width: 10px;
            height: 10px;
            background: var(--now-line);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            z-index: 8;
        }

        .sleepBand {
            position: absolute;
            left: 0;
            right: 0;
            background: var(--sleep);
            opacity: .6;
        }

        .sleepBand.top {
            border-top: 2px solid var(--sleep-line);
        }

        .sleepBand.bottom {
            border-bottom: 2px solid var(--sleep-line);
        }

        .sleepIcon {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            font-size: calc(11px*var(--fs-t));
            z-index: 2;
            color: var(--sleep-ico);
        }

        /* 睡眠帯の中に「何時間寝たか」を出す */
        /* 睡眠時間は枠も背景も付けず、帯の下端に置く */
        .sleepDur {
            position: absolute;
            left: 4px;
            font-size: calc(10px*var(--fs-t));
            font-weight: 700;
            color: var(--sleep-ico);
            white-space: nowrap;
            z-index: 2;
        }

        /* .entryは当たり判定だけを担う透明な箱（密集時は隣との隙間ぶんだけ上下に広げる）。
       見た目（背景色・パディング・角丸など）は中の.entryCardが担当するので、
       当たり判定を広げても色の付いたカード自体の見た目は変わらない */
        .entry {
            position: absolute;
            cursor: pointer;
            z-index: 3;
            max-width: 150px;
            width: max-content;
            /* スクロール優先。長押しでドラッグを掴んだ瞬間だけJSがtouch-actionをnoneに切り替える */
            touch-action: pan-y;
        }

        .entry.left {
            right: 6px;
        }

        .entry.right {
            left: 6px;
        }

        .entryCard {
            font-size: calc(12px*var(--fs-t));
            line-height: 1.3;
            padding: 2px 6px;
            border-radius: 8px;
            max-width: 150px;
            width: max-content;
        }

        .entry.left .entryCard {
            text-align: right;
            background: var(--milk-bg);
            border: 1px solid var(--milk-border);
        }

        .entry.right .entryCard {
            text-align: left;
            background: var(--other-bg);
            border: 1px solid var(--other-border);
        }

        .entry .t {
            font-weight: 700;
            font-size: calc(11px*var(--fs-t));
            color: var(--sub);
        }

        .entry .d {
            font-weight: 600;
        }

        .entry .m {
            font-size: calc(10.5px*var(--fs-t));
            color: var(--sub);
        }

        .entry .ic {
            margin-right: 1px;
        }

        .entry.left .t {
            color: #a8792e;
        }

        .entry.right .t {
            color: #3f74a3;
        }

        .entry.dragging .entryCard {
            z-index: 9;
            box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
            opacity: .95;
        }

        .milkBar {
            position: absolute;
            right: 6px;
            height: 22px;
            border-radius: 11px;
            background: var(--milk);
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding: 0 8px;
            touch-action: pan-y;
            z-index: 3;
            box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
        }

        .milkBar .t {
            position: absolute;
            right: 100%;
            margin-right: 6px;
            font-size: calc(12px*var(--fs-t));
            font-weight: 700;
            color: var(--sub);
            white-space: nowrap;
            top: 50%;
            transform: translateY(-50%);
        }

        .milkBar .v {
            font-size: calc(11px*var(--fs-t));
            font-weight: 700;
            color: #fff;
            white-space: nowrap;
        }

        .milkBar.dragging {
            z-index: 9;
            box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
        }

        /* バーが広くて左に時刻を置く余白が無いときは、時刻をバーの中に入れる */
        .milkBar.timeInside {
            justify-content: space-between;
            padding-left: 24px;
        }

        .milkBar.timeInside .t {
            position: static;
            margin-right: 0;
            transform: none;
            color: rgba(255, 255, 255, .95);
        }

        /* ミルクを右カラムに置くときは左右を鏡写しにする（左端固定で右へ伸びる） */
        .milkBar.anchorLeft {
            right: auto;
            left: 6px;
            justify-content: flex-start;
        }

        .milkBar.anchorLeft .t {
            right: auto;
            left: 100%;
            margin-right: 0;
            margin-left: 6px;
        }

        .milkBar.anchorLeft .milkGrip {
            left: auto;
            right: 0;
            border-radius: 0 11px 11px 0;
        }

        .milkBar.anchorLeft.timeInside {
            flex-direction: row-reverse;
            /* .milkBar.anchorLeftのjustify-content指定と詳細度が同点になり、こちらが負けて
         量と時刻がどちらも右端に固まってしまっていたため、ここで明示的に上書きする */
            justify-content: space-between;
            padding-left: 8px;
            padding-right: 24px;
        }

        .milkBar.anchorLeft.timeInside .t {
            margin-left: 0;
        }

        /* ミルクカードの左端つまみ：横に動かすと量が変わる */
        .milkGrip {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 44px;
            /* 指で狙いやすい大きさに（横=量・縦=時刻の両方を受け付ける） */
            border-radius: 11px 0 0 11px;
            cursor: move;
            touch-action: pan-y;
            /* 長押しで掴むまではスクロール優先 */
        }

        /* 母乳バー：中心(時刻の位置)から左右に独立して伸びる。左端を引くと左、右端を引くと右の分数が変わる */
        .nursingBar {
            position: absolute;
            left: 0;
            right: 0;
            height: 22px;
            z-index: 3;
            touch-action: pan-y;
        }

        .nurseSeg {
            position: absolute;
            top: 0;
            height: 22px;
            background: var(--nursing);
            display: flex;
            align-items: center;
            touch-action: pan-y;
        }

        .nurseSeg.nsLeft {
            right: 50%;
            justify-content: flex-start;
            padding-left: 6px;
            border-radius: 11px 0 0 11px;
        }

        .nurseSeg.nsRight {
            left: 50%;
            justify-content: flex-end;
            padding-right: 6px;
            border-radius: 0 11px 11px 0;
        }

        .nurseLabel {
            font-size: calc(11px*var(--fs-t));
            font-weight: 700;
            color: #fff;
            white-space: nowrap;
        }

        .nurseGrip {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 36px;
            /* 指で狙いやすい大きさに（横=分数・縦=時刻の両方を受け付ける） */
            cursor: move;
            touch-action: pan-y;
            /* 長押しで掴むまではスクロール優先 */
        }

        .nurseSeg.nsLeft .nurseGrip {
            left: 0;
            border-radius: 11px 0 0 11px;
        }

        .nurseSeg.nsRight .nurseGrip {
            right: 0;
            border-radius: 0 11px 11px 0;
        }

        .nurseTime {
            position: absolute;
            top: -13px;
            left: 50%;
            transform: translateX(-50%);
            font-size: calc(12px*var(--fs-t));
            font-weight: 700;
            color: var(--sub);
            white-space: nowrap;
            z-index: 4;
        }

        .nursingBar.dragging .nurseSeg {
            box-shadow: 0 3px 10px var(--shadow);
            z-index: 9;
        }

        /* 付箋メモ：タイムラインの空白をダブルタップして貼る */
        #noteLayer {
            grid-column: 1/-1;
            grid-row: 1;
            position: relative;
            z-index: 5;
            pointer-events: none;
        }

        .noteCard {
            position: absolute;
            background: var(--note-bg);
            border: 1px solid var(--note-line);
            border-radius: 3px;
            padding: 3px 6px;
            font-size: 11px;
            line-height: 1.35;
            color: var(--note-text);
            box-shadow: 1.5px 2px 4px var(--shadow);
            max-width: 150px;
            white-space: pre-wrap;
            word-break: break-word;
            touch-action: pan-y;
            cursor: move;
            pointer-events: auto;
            opacity: var(--note-opacity, .85);
        }

        .noteCard .t {
            display: block;
            font-size: calc(9px*var(--fs-t));
            font-weight: 700;
            opacity: .7;
        }

        .noteCard.dragging {
            z-index: 9;
            box-shadow: 0 3px 10px var(--shadow);
        }

        /* リスト表示モード：時系列に詰めて並べる */
        #timeline.listMode {
            display: block;
            min-height: 0;
            padding: 0 0 20px;
        }

        .listRow {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            padding: 4px 6px;
            border-bottom: 1px solid var(--line);
        }

        .listRow .lt {
            flex: 0 0 42px;
            font-size: calc(11px*var(--fs-t));
            font-weight: 700;
            color: var(--sub);
            padding-top: 2px;
        }

        .listRow .lc {
            flex: 1;
            min-width: 0;
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: calc(12.5px*var(--fs-t));
        }

        .listRow .lic {
            font-size: calc(14px*var(--fs-t));
            flex: 0 0 auto;
        }

        .listRow .ld {
            min-width: 0;
            word-break: break-word;
        }

        .listRow .lm {
            font-size: calc(10.5px*var(--fs-t));
            color: var(--sub);
        }

        /* リスト表示でもミルクの量が一目で分かるよう横バーで出す */
        .listBar {
            flex: 1;
            min-width: 0;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .listBar .barTrack {
            flex: 1;
            min-width: 0;
        }

        .listBar .bar {
            display: block;
            height: 15px;
            border-radius: 8px;
            background: var(--milk);
            min-width: 5px;
        }

        .listBar .bar.pump {
            background: var(--pump);
        }

        .listBar .amt {
            font-size: calc(12px*var(--fs-t));
            font-weight: 700;
            white-space: nowrap;
            flex: 0 0 auto;
        }

        .listRow.sleepRow {
            background: var(--sleep);
        }

        .listRow.noteRow {
            background: var(--note-bg);
            color: var(--note-text);
        }

        .listRow.noteRow .lt {
            color: var(--note-text);
            opacity: .75;
        }

        .listEmpty {
            padding: 26px 12px;
            text-align: center;
            color: var(--sub);
            font-size: 12.5px;
        }

        .pointMark {
            /* 見た目のドットは小さいままにして、当たり判定だけ指で狙える大きさにする
         （実要素を大きくし、見えているドットは::afterの小さい丸にする） */
            position: absolute;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 36px;
            height: 36px;
            z-index: 7;
            cursor: pointer;
            touch-action: pan-y;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .pointMark::after {
            content: "";
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--sleep-line);
        }

        .pointMark.dragging::after {
            box-shadow: 0 0 0 5px rgba(0, 0, 0, .08);
        }

        /* 睡眠帯の上下つまみ（帯そのものは最背面のまま、つまみだけ手前に置く） */
        #bandHandleLayer {
            grid-column: 1/-1;
            grid-row: 1;
            position: relative;
            /* ミルク等のカードと縦位置が重なったとき、そちらを触れなくなる問題があったため、
         睡眠の上下つまみは他のアイコン類より手前に出さない（最背面のsleepLayerよりは前でよい） */
            z-index: 1;
            pointer-events: none;
        }

        .bandHandle {
            position: absolute;
            left: 0;
            right: 0;
            height: 26px;
            /* 当たり判定を広めに（掴みやすさ優先。見た目の主張はCSS変数側で抑えてある） */
            pointer-events: auto;
            touch-action: pan-y;
            /* 長押しで掴むまではスクロール優先 */
            cursor: ns-resize;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 項目を動かしている最中に出る確定/キャンセルバー。#bottomBarのすぐ上に重ねて出す */
        #pendingBar {
            display: none;
            position: sticky;
            bottom: 0;
            background: var(--accent);
            color: #fff;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 8px 12px;
            z-index: 16;
            font-size: 13px;
            font-weight: 600;
        }

        #pendingBar.show {
            display: flex;
        }

        #pendingBar .sheetActions {
            margin-top: 0;
            gap: 8px;
        }

        #pendingBar .btn {
            padding: 8px 14px;
            font-size: 13px;
            flex: none;
        }

        #pendingBar .btn.primary {
            background: #fff;
            color: var(--accent);
        }

        #pendingBar .btn.ghost {
            background: transparent;
            color: #fff;
            border-color: rgba(255, 255, 255, .6);
        }

        /* 確定前の項目は囲みを点線にして「まだ確定していない」ことを示す */
        .entry.pendingEdit,

        /* うんちバー：量に応じた幅のバー（右カラム左端から右へ伸びる） */
        .poopBar {
            position: absolute;
            right: 6px;
            /* 右端を固定して、量が増えるほど左へ伸びる */
            height: 22px;
            border-radius: 11px;
            background: var(--poop);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 6px;
            touch-action: pan-y;
            z-index: 3;
            box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
            overflow: visible;
        }

        .poopBar .t {
            position: absolute;
            right: 100%;
            margin-right: 6px;
            font-size: calc(11px*var(--fs-t));
            font-weight: 700;
            color: var(--accent);
            white-space: nowrap;
            color: var(--bg);
            top: 50%;
            transform: translateY(-50%);
        }

        /* バーが大きいときは時刻をバーの中に収める（左詰め） */
        .poopBar.time-inside .t {
            position: static;
            transform: none;
            margin-right: 4px;
            order: -1;
            flex-shrink: 0;
        }

        .poopBar .poop-icon {
            font-size: calc(12px*var(--fs-t));
            flex-shrink: 0;
        }

        .poopBar .poop-detail {
            font-size: calc(10px*var(--fs-t));
            font-weight: 700;
            color: #fff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: right;
            flex: 1;
            margin-left: 4px;
        }

        .poopBar.dragging {
            z-index: 9;
            box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
        }

        .poopBar.pendingEdit {
            outline: 2px dashed var(--accent);
        }

        .milkBar.pendingEdit,
        .nursingBar.pendingEdit .nurseSeg,
        .noteCard.pendingEdit,
        .pointMark.pendingEdit,
        .sleepBand.pendingEdit {
            outline: 2px dashed var(--accent);
            outline-offset: 1px;
        }

        /* Bottom bar */
        #bottomBar {
            position: sticky;
            bottom: 0;
            background: var(--card);
            border-top: 1px solid var(--line);
            display: flex;
            align-items: center;
            padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
            gap: 4px;
            z-index: 15;
        }

        .barGroup {
            flex: 1;
            display: flex;
            gap: 4px;
            min-width: 0;
        }

        .barGroup.right {
            justify-content: flex-end;
        }

        .barBtn {
            /* 左右で個数が違っても同じ大きさに揃える（JSが--bar-btn-wを算出する）。
         中央の寝る/起きるボタンが中心からズレるのは許容し、ボタン自体の大きさを優先する */
            flex: 0 0 var(--bar-btn-w, 64px);
            width: var(--bar-btn-w, 64px);
            min-width: 0;
            max-width: 74px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1px;
            background: var(--bg);
            border: 1px solid var(--line);
            border-radius: 10px;
            padding: 6px 1px;
            font-size: calc(9.5px*var(--fs-b));
            color: var(--text);
            overflow: hidden;
            /* スマホでボタンからドラッグを始められるように、ブラウザのジェスチャー
         （スクロール・長押しメニュー・テキスト選択）を全て無効化してJSが受け持つ。
         これが無いと指を動かした瞬間にpointercancelが飛んでドラッグが始まらない */
            touch-action: none;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
        }

        .barBtn .lbl {
            max-width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            line-height: 1.15;
        }

        /* 片側に5個以上並ぶときは絵文字だけにして潰れを防ぐ */
        .barGroup.iconOnly .barBtn .lbl {
            display: none;
        }

        .barGroup.iconOnly .barBtn {
            padding: 8px 1px;
        }

        /* ボタンが多いときは余白と中央ボタンを詰めて横幅に収める */
        #bottomBar.compact {
            gap: 2px;
            padding-left: 3px;
            padding-right: 3px;
        }

        #bottomBar.compact .barGroup {
            gap: 2px;
        }

        #bottomBar.compact .centerBtn {
            width: 52px;
            height: 52px;
            font-size: calc(9.5px*var(--fs-b));
        }

        #bottomBar.compact .centerBtn .ic {
            font-size: calc(17px*var(--fs-b));
        }

        .barBtn .ic {
            font-size: calc(18px*var(--fs-b));
        }

        .centerBtn {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background: var(--center-btn);
            color: #fff;
            border: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: calc(11px*var(--fs-b));
            font-weight: 700;
            gap: 2px;
            flex-shrink: 0;
            touch-action: none;
        }

        .centerBtn .ic {
            font-size: calc(20px*var(--fs-b));
        }

        .centerBtn.awake {
            background: var(--accent);
        }

        /* ドラッグ中のゴースト：タイムライン上のカードと同じ見た目を使う（位置はJSがinlineで指定） */
        .ghostTime {
            position: fixed;
            z-index: 61;
            pointer-events: none;
            background: var(--now-line);
            color: #fff;
            font-size: 11px;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 10px;
            transform: translate(-50%, -50%);
            box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
            white-space: nowrap;
        }

        .overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .35);
            z-index: 40;
            display: none;
            align-items: flex-end;
            justify-content: center;
        }

        .overlay.show {
            display: flex;
        }

        .sheet {
            background: var(--card);
            width: 100%;
            max-width: 520px;
            border-radius: 18px 18px 0 0;
            padding: 16px 18px 22px;
            max-height: 88vh;
            overflow-y: auto;
        }

        .sheetTitle {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .closeX {
            background: none;
            border: none;
            font-size: 20px;
            color: var(--sub);
        }

        .typeGrid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }

        .typeBtn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            background: var(--bg);
            border: 1px solid var(--line);
            border-radius: 12px;
            padding: 10px 4px;
            font-size: 11px;
            color: var(--text);
        }

        .typeBtn .ic {
            font-size: 22px;
        }

        .typeBtn.milkGroup {
            border-color: var(--milk-border);
        }

        .typeBtn.otherGroup {
            border-color: var(--other-border);
        }

        .typeBtn.active {
            outline: 2px solid var(--accent);
        }

        label.field {
            display: block;
            font-size: 12px;
            color: var(--sub);
            margin: 12px 0 4px;
        }

        input[type=text],
        input[type=number],
        input[type=time],
        input[type=date],
        select,
        textarea {
            width: 100%;
            font-size: 15px;
            padding: 9px 10px;
            border: 1px solid var(--line);
            border-radius: 10px;
            background: var(--bg);
            color: var(--text);
        }

        .row2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        /* 時/分をそれぞれプルダウンで選ぶ時刻入力（OS標準のtype="time"がアナログ時計になるのを避けるため） */
        .timeSpinner {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .timeSpinner .timeSel {
            width: auto;
            flex: 1;
            min-width: 0;
            text-align: center;
        }

        .timeSpinner .timeColon {
            font-weight: 700;
            color: var(--sub);
        }

        .row3 {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 10px;
        }

        .chipRow {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 6px;
        }

        .chip {
            padding: 6px 12px;
            border-radius: 16px;
            border: 1px solid var(--line);
            background: var(--bg);
            font-size: 12.5px;
            color: var(--sub);
        }

        .chip.active {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }

        .sheetActions {
            display: flex;
            gap: 10px;
            margin-top: 18px;
        }

        .btn {
            flex: 1;
            padding: 12px;
            border-radius: 12px;
            border: none;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
        }

        .btn.primary {
            background: var(--accent);
            color: #fff;
        }

        .btn.ghost {
            background: var(--bg);
            color: var(--text);
            border: 1px solid var(--line);
        }

        .btn.danger {
            background: var(--danger-bg);
            color: var(--danger);
        }

        .slotPicker {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 8px;
        }

        .slotChip {
            padding: 6px 10px;
            border-radius: 10px;
            border: 1px solid var(--line);
            background: var(--bg);
            font-size: 12px;
        }

        .slotChip.active {
            background: var(--milk-bg);
            border-color: var(--milk);
            color: var(--text);
        }

        .segRow {
            display: flex;
            gap: 8px;
            margin-top: 6px;
        }

        .segBtn {
            flex: 1;
            padding: 8px;
            border-radius: 10px;
            border: 1px solid var(--line);
            background: var(--bg);
            font-size: 12.5px;
            color: var(--sub);
        }

        .segBtn.active {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }

        .segBtn.recommended {
            font-weight: 800;
        }

        /* 推奨サイズは太字 */
        .settingsSection {
            margin-top: 18px;
            padding-top: 14px;
            border-top: 1px solid var(--line);
        }

        .settingsSection h4 {
            font-size: 13px;
            color: var(--sub);
            margin: 0 0 8px;
        }

        .shareRow {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .shareStatus {
            font-size: 12px;
            color: var(--sub);
            margin-top: 6px;
        }

        .mins-ago {
            display: inline;
            font-size: 0.9em;
            color: var(--now-line);
            font-weight: 600;
            margin-left: 4px;
        }

        .sanpoBar {
            position: absolute;
            background: var(--accent);
            border-radius: 4px;
            display: flex;
            align-items: center;
            opacity: 0.6;
            cursor: pointer;
            box-sizing: border-box;
            border: 1px solid var(--accent);
        }

        .sanpoBar .t {
            position: absolute;
            left: -50px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--accent);
            font-weight: 600;
            font-size: 0.8em;
            white-space: nowrap;
            z-index: 1;
        }

        .sanpoBar:hover {
            opacity: 1;
        }