: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 {
            /* 左右は10px。アカウント表示を右上に足して横幅がぎりぎりになったため14pxから詰めた */
            padding: 6px 10px 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;
            /* 削られる順番を「月齢 → アカウント表示」にするため、こちら(月齢を含む側)を先に大きく縮める */
            flex-shrink: 6;
        }

        /* 横幅が足りない時に削られる優先順位は「月齢 → アカウント表示 → 名前」。
           名前は最後まで残す（max-widthを超える長い名前だけ…で省略される） */
        .babyName {
            font-size: calc(13.5px*var(--fs-h));
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex-shrink: 0;
            max-width: 96px;
        }

        .babyAge {
            font-size: calc(10px*var(--fs-h));
            color: var(--sub);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex-shrink: 1;
            min-width: 0;
        }

        .headBtns {
            display: flex;
            gap: 4px;
            align-items: center;
            /* アカウント表示を入れたぶん、ここも縮めるようにする（中のボタン自体はflex-shrink:0なので、
               実際に縮むのは .acctChip だけ）。赤ちゃんの名前より先にアカウント表示が縮むように、
               .babyInfo より shrink 係数を大きくしてある */
            flex-shrink: 1;
            min-width: 0;
        }

        .headBtns .todayBtn,
        .headBtns .iconBtn {
            flex-shrink: 0;
        }

        /* 現在サインイン中のアカウント表示（@gmail.com は省いたローカル部分だけ、長ければ末尾を…で省略）。
           狭い画面では日付ナビを優先して先に縮む（flex:0 1 auto + min-width:0） */
        .acctChip {
            font-size: calc(9.5px*var(--fs-h));
            color: var(--sub);
            max-width: 68px;
            flex: 0 1 auto;
            min-width: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: none;
        }

        .acctChip.on {
            display: inline-block;
        }

        .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: max-content;
        }

        .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;
        }

        /* さんぽ等：開始〜終了の縦の帯（上下のつまみで動かす。睡眠帯と同じ考え方）。
           中には「さんぽ」「10:20-11:45」の2行だけを収め、所要時間(例:1h25)は
           バーの外の余白に出す（バーが狭いと数字まで詰め込むと読みにくいため） */
        .durationBar {
            position: absolute;
            z-index: 3;
            box-sizing: border-box;
            max-width: 150px;
            width: max-content;
            min-height: 20px;
            border-radius: 8px;
            padding: 3px 6px;
            font-size: calc(12px*var(--fs-t));
            line-height: 1.3;
            overflow: visible;
        }

        .durationBar.left {
            right: 6px;
            text-align: right;
        }

        .durationBar.right {
            left: 6px;
            text-align: left;
        }

        .durationBar .lbl {
            display: block;
            font-weight: 700;
            font-size: calc(11px*var(--fs-t));
        }

        .durationBar .range {
            display: block;
            font-weight: 600;
            white-space: nowrap;
        }

        /* メモは長いと際限なく伸びてしまうので、幅を決めて溢れた分は...で省略する */
        .durationBar .memo {
            display: block;
            max-width: 140px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: calc(10.5px*var(--fs-t));
            font-weight: 400;
            opacity: .8;
        }

        .durationBar .dur {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: calc(10.5px*var(--fs-t));
            font-weight: 700;
            color: var(--sub);
            white-space: nowrap;
        }

        .durationBar.left .dur {
            right: 100%;
            margin-right: 6px;
        }

        .durationBar.right .dur {
            left: 100%;
            margin-left: 6px;
        }

        .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);
        }

        .noteCard .noteBody {
            display: block;
        }

        /* 3行以上のときだけ出るトグル。既定は全文表示、たたむと2行まで */
        .noteCard.clamped .noteBody {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            overflow: hidden;
        }

        .noteCard .noteToggle {
            display: block;
            margin-top: 2px;
            font-size: 10px;
            font-weight: 700;
            line-height: 1;
            color: var(--note-line);
            opacity: .95;
            cursor: pointer;
            -webkit-user-select: none;
            user-select: none;
        }

        /* 付箋から、記録した時刻（中央の時刻帯）へ伸びる引出線。斜めも引けるようSVGで描く */
        .noteLeaderSvg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: visible;
            pointer-events: none;
            opacity: var(--note-opacity, .85);
        }

        .noteLeaderSvg line {
            stroke: var(--note-line);
            stroke-width: 1;
            stroke-dasharray: 3 2;
        }

        .noteLeaderSvg circle {
            fill: var(--note-line);
        }

        /* リスト表示モード：時系列に詰めて並べる */
        #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;
        }

        /* バーの外（左側）に出る時刻。ページ背景の上に載るので --text で描く。
           以前は color:var(--accent) を直後の color:var(--bg) が上書きしており、
           背景と同じ色＝完全に見えない状態だった（うんちの時刻が出ない不具合の原因）。 */
        .poopBar .t {
            position: absolute;
            right: 100%;
            margin-right: 6px;
            font-size: calc(11px*var(--fs-t));
            font-weight: 700;
            color: var(--text);
            white-space: nowrap;
            top: 50%;
            transform: translateY(-50%);
        }

        /* バーが大きいときは時刻をバーの中に収める（左詰め）。
           茶色のバーの上に載るので白抜きにする（.poop-detail と揃える） */
        .poopBar.time-inside .t {
            position: static;
            transform: none;
            margin-right: 4px;
            order: -1;
            flex-shrink: 0;
            color: #fff;
        }

        .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,
        .durationBar.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;
        }

        /* ログインゲート（サインインするまでアプリ本体を隠す）。
           既定は非表示で、main.jsが未サインインと判断したときだけ .show を付ける。 */
        #loginGate {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 3000;
            background: var(--bg);
            align-items: center;
            justify-content: center;
            padding: 24px;
        }

        #loginGate.show {
            display: flex;
        }

        #loginGate .loginBox {
            width: 100%;
            max-width: 340px;
            text-align: center;
        }

        #loginGate .loginTitle {
            font-size: 26px;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 14px;
        }

        #loginGate .loginLead {
            font-size: 13px;
            line-height: 1.7;
            color: var(--sub);
            margin-bottom: 22px;
        }

        #loginGate .btn.primary {
            width: 100%;
            padding: 13px;
            font-size: 15px;
        }

        #loginGate .loginMsg {
            margin-top: 14px;
            font-size: 12.5px;
            color: var(--danger);
            min-height: 1em;
        }

        /* ---------- まとめ画面（週次グラフ）・下部の画面切り替えタブ ---------- */
        .hidden {
            display: none !important;
        }

        #recordViews,
        #weeklyView {
            display: flex;
            flex-direction: column;
            flex: 1;
            min-height: 0;
        }

        /* 下部の「記録/まとめ」切り替え。ユーザー要望により高さは低めに抑える */
        #mainNav {
            display: flex;
            flex: 0 0 auto;
            background: var(--card);
            border-top: 1px solid var(--line);
            padding-bottom: env(safe-area-inset-bottom);
        }

        .navTab {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            background: none;
            border: none;
            padding: 5px 4px;
            font-size: 11px;
            color: var(--sub);
        }

        .navTab .ic {
            font-size: 13px;
        }

        .navTab.active {
            color: var(--accent);
            font-weight: 700;
        }

        .weekNav {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 14px;
            padding: 8px 10px;
            background: var(--card);
            border-bottom: 1px solid var(--line);
            flex: 0 0 auto;
            position: relative;
        }

        .weekNav button {
            background: none;
            border: none;
            color: var(--text);
            font-size: 15px;
            padding: 4px 8px;
        }

        .weekLabel {
            font-size: 13px;
            font-weight: 700;
            color: var(--text);
            min-width: 110px;
            text-align: center;
        }

        .weekSettingsBtn {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 15px !important;
            color: var(--sub) !important;
        }

        .weekTabs {
            display: flex;
            flex: 0 0 auto;
            background: var(--card);
            border-bottom: 1px solid var(--line);
        }

        .wkTabBtn {
            flex: 1;
            background: none;
            border: none;
            padding: 8px 4px;
            font-size: 12.5px;
            color: var(--sub);
            border-bottom: 2px solid transparent;
        }

        .wkTabBtn.active {
            color: var(--accent);
            font-weight: 700;
            border-bottom-color: var(--accent);
        }

        .weekChartWrap {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            padding: 10px 8px 12px;
            display: flex;
            flex-direction: column;
        }

        /* 食事タブ上部の「積み重ね」チェックボックス */
        .mealTopRow {
            flex: 0 0 auto;
            display: flex;
            justify-content: flex-end;
            padding: 0 2px 6px;
        }

        .stackChk {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 11.5px;
            color: var(--sub);
        }

        .stackChk input {
            width: 14px;
            height: 14px;
        }

        /* 睡眠・排泄：日ごとの列を横に並べる汎用グリッド。まとめ画面の余白いっぱいに広がる */
        .weekGrid {
            flex: 1;
            min-height: 0;
            display: flex;
            align-items: stretch;
            gap: 3px;
            padding: 0 2px;
        }

        .weekCol {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100%;
        }

        .weekColLabel {
            grid-row: 3;
            flex: 0 0 auto;
            font-size: 9.5px;
            color: var(--sub);
            margin-top: 4px;
            white-space: nowrap;
        }

        /* 目安(min-max)の帯。各グラフの背後に薄く重ねる。要素自体を半透明にして
           どのテーマでも常識的な見え方になるようにする（色ごとにopacityだけ変える） */
        .guideBandCol {
            position: relative;
        }

        .guideBand {
            position: absolute;
            left: 0;
            right: 0;
            border-radius: 2px;
            pointer-events: none;
        }

        .guideBand.milk {
            background: var(--milk);
            opacity: .16;
        }

        .guideBand.pee {
            background: var(--pee);
            opacity: .18;
        }

        .guideBand.poop {
            background: var(--poop);
            opacity: .18;
        }

        /* 排泄グラフ：目安の帯を全カラムの背後に敷くための土台 */
        .chartArea {
            position: relative;
            flex: 1;
            min-height: 0;
        }

        .chartArea > .weekGrid {
            position: absolute;
            inset: 0;
        }

        .weekColLabel.today {
            color: var(--accent);
            font-weight: 700;
        }

        /* ---------- 食事：ml量(左軸)＋母乳分数(右軸)のグリッド ---------- */
        .mealGrid {
            flex: 1;
            min-height: 0;
            display: grid;
            grid-template-columns: 22px repeat(7, 1fr) 22px;
            grid-template-rows: auto 1fr auto auto;
            column-gap: 2px;
            padding: 0 2px;
        }

        .mealAxis {
            grid-row: 2;
            position: relative;
        }

        .mealAxis.left {
            grid-column: 1;
        }

        .mealAxis.right {
            grid-column: 9;
        }

        .mealAxisTick {
            position: absolute;
            left: 0;
            right: 0;
            font-size: 8px;
            color: var(--sub);
            text-align: center;
            transform: translateY(50%);
            white-space: nowrap;
        }

        .mealDayTotal {
            grid-row: 1;
            font-size: 9.5px;
            font-weight: 700;
            color: var(--text);
            text-align: center;
            margin-bottom: 2px;
            white-space: nowrap;
        }

        .mealDayBar {
            grid-row: 2;
            position: relative;
            min-width: 0;
        }

        .mealDaySub {
            grid-row: 3;
            font-size: 8.5px;
            color: var(--sub);
            text-align: center;
            margin-top: 3px;
            white-space: nowrap;
        }

        .mealDayDate {
            grid-row: 4;
            font-size: 9.5px;
            color: var(--sub);
            text-align: center;
            margin-top: 4px;
            white-space: nowrap;
        }

        .mealDayDate.today {
            color: var(--accent);
            font-weight: 700;
        }

        .mealZone {
            position: absolute;
            left: 0;
            right: 0;
        }

        /* ml/分の各セグメントは累積オフセットで絶対配置する（JS側でbottom/heightを計算）。
           flexで積むと、はみ出た時にブラウザが子要素を勝手に縮めて日ごとの比率が
           狂う不具合があったため、この方式にした */
        .mealSeg,
        .mealMinBar {
            position: absolute;
            left: 0;
            right: 0;
            width: 100%;
            max-width: 30px;
            margin: 0 auto;
            font-size: 8px;
            color: #fff;
            text-align: center;
            line-height: 1.3;
            overflow: hidden;
            border-radius: 3px 3px 0 0;
        }

        .mealMinBar {
            background: var(--nursing);
        }

        /* ---------- 睡眠：0-24時を縦の帯で表すガントチャート＋総睡眠時間の折れ線・左軸 ---------- */
        /* col1=時刻軸、col2=軸と日カラムの隙間、col3〜9=7日ぶん（gapは0にして、
           7日が必ず均等(1/7ずつ)になるようにする。折れ線側のSVG座標((i+0.5)/7)と
           ズレなくするための前提条件なので、日カラムの間にgapを足さないこと） */
        .sleepGrid {
            flex: 1;
            min-height: 0;
            display: grid;
            grid-template-columns: 22px 3px repeat(7, 1fr);
            grid-template-rows: 1fr auto auto;
            column-gap: 0;
            padding: 0 2px;
        }

        .sleepDayBar {
            grid-row: 1;
            position: relative;
            min-width: 0;
            display: flex;
            justify-content: center;
        }

        .sleepColWrap {
            position: relative;
            height: 100%;
            width: 100%;
            max-width: 28px;
            background: var(--bg);
            border-radius: 4px;
            overflow: hidden;
            border: 1px solid var(--line);
        }

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

        .sleepTotal {
            grid-row: 2;
            font-size: 9px;
            color: var(--sub);
            text-align: center;
            margin-top: 4px;
            white-space: nowrap;
        }

        /* 総睡眠時間の折れ線・目安の帯・点ラベルをまとめて乗せる土台。
           日カラム7つとぴったり同じグリッド範囲(col3/10)に重ねて置く */
        .sleepOverlayArea {
            position: relative;
            pointer-events: none;
        }

        /* 目安の帯：折れ線と全く同じ%位置・全カラムぶんの横幅いっぱいに、半透明の薄い赤で敷く */
        .sleepGuideBand {
            position: absolute;
            left: 0;
            right: 0;
            background: rgba(224, 48, 48, .16);
        }

        /* preserveAspectRatio="none"でCSSのwidth/height:100%に追従して伸縮させる。
           リサイズのたびにJSで再計算しなくても、ブラウザが自動でついてくる */
        .sleepLineSvg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            overflow: visible;
        }

        .sleepLineSvg polyline {
            fill: none;
            stroke: var(--now-line);
            stroke-width: 2;
            stroke-linejoin: round;
            stroke-linecap: round;
        }

        /* 点の丸印とラベルはSVGではなくCSSのleft/top%で置く（SVGのviewBoxは縦横で
           縮尺が違うため、丸をそのまま描くと楕円に歪んでしまう） */
        .sleepPoint {
            position: absolute;
            width: 0;
            height: 0;
        }

        .sleepPoint .dot {
            position: absolute;
            left: 0;
            top: 0;
            transform: translate(-50%, -50%);
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--now-line);
        }

        .sleepPoint .lbl {
            position: absolute;
            left: 0;
            bottom: 6px;
            transform: translateX(-50%);
            font-size: 11px;
            font-weight: 700;
            color: var(--now-line);
            white-space: nowrap;
        }

        /* ---------- 排泄：おしっこ/うんちの回数棒 ---------- */
        .peeBars {
            flex: 1;
            min-height: 0;
            display: flex;
            gap: 3px;
            align-items: flex-end;
        }

        .peeBar {
            width: 11px;
            border-radius: 3px 3px 0 0;
        }

        .peeBar.pee {
            background: var(--pee);
        }

        .peeBar.poop {
            background: var(--poop);
        }

        .peeCountRow {
            flex: 0 0 auto;
            display: flex;
            gap: 5px;
            margin-bottom: 3px;
        }

        .peeCountLbl {
            font-size: 9.5px;
            font-weight: 700;
            min-width: 8px;
            text-align: center;
        }

        .peeCountLbl.pee {
            color: var(--pee);
        }

        .peeCountLbl.poop {
            color: var(--poop);
        }

        .weekLegend {
            flex: 0 0 auto;
            display: flex;
            justify-content: center;
            gap: 16px;
            margin-top: 10px;
            padding-top: 4px;
            font-size: 11px;
            color: var(--sub);
        }

        .weekLegend .dot {
            display: inline-block;
            width: 9px;
            height: 9px;
            border-radius: 2px;
            margin-right: 4px;
            vertical-align: -1px;
        }

        /* まとめの設定シート */
        #wsScaleFields .field,
        #wsGuideFields .field {
            margin-top: 10px;
        }

        #wsGuideFields textarea {
            font-size: 13px;
            line-height: 1.5;
        }