/* ==========================================================================
   共通の色・変数（テーマカラー）
   accent = 緑系（メインカラー・完了・OK）
   danger = オレンジ系（当日・警告寄り）
   warn   = 黄系（注意・アラート）
   ink/muted/hint = 文字色（濃い→薄い の3段階）
   ========================================================================== */
:root {
    --accent: #1d9e75;
    --accent-bg: #e1f5ee;
    --accent-dark: #0f6e56;
    --danger: #d85a30;
    --danger-bg: #faece7;
    --danger-dark: #993c1d;
    --warn-bg: #faeeda;
    --warn-dark: #854f0b;
    --ink: #20211f;
    --muted: #6b6f6c;
    --hint: #9a9e9a;
    --line: #e7e9e6;
    --card: #fff;
    --bg: #f3f5f2;
    /* 育児記録の回数パネル用に追加した色（ピンク） */
    --pink-bg: #fbeaf0;
    --pink-dark: #72243e;
}

/* 全要素共通：paddingやborderをwidthの内側に含める（サイズ計算をシンプルにする） */
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* ページ全体：中央にスマホ風の画面を1つ置くためのレイアウト */
body {
    margin: 0;
    font-family: -apple-system, "Hiragino Sans", "Yu Gothic UI", sans-serif;
    background: #e9ece8;
    color: var(--ink);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 12px
}


/* ==========================================================================
   ログイン / 新規登録 画面（#auth）
   ========================================================================== */
#auth {
    width: 360px;
    max-width: 100%;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 22px
}

#auth h1 {
    font-size: 18px;
    margin: 0 0 4px;
    color: var(--accent-dark)
}

/* 見出し下の説明文 */
#auth p.lead {
    font-size: 13px;
    color: var(--muted);
    margin: 0 0 16px;
    line-height: 1.6
}

/* 各入力欄の上に出るラベル（「メールアドレス」など） */
#auth label {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin: 10px 0 4px
}

/* テキスト入力・選択欄の見た目 */
#auth input,
#auth select {
    width: 100%;
    height: 40px;
    border: 1px solid #d5d9d4;
    border-radius: 9px;
    padding: 0 11px;
    font-size: 15px
}

/* 「ログイン」「新規登録」の緑ボタン */
#auth .btn {
    width: 100%;
    height: 44px;
    margin-top: 16px;
    border: none;
    border-radius: 22px;
    background: var(--accent);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer
}

/* 「新規登録はこちら」等の切り替えリンク */
#auth .switch {
    text-align: center;
    font-size: 13px;
    color: var(--accent-dark);
    margin-top: 12px;
    cursor: pointer
}

/* ログイン失敗時などのエラーメッセージ */
#auth .err {
    color: var(--danger-dark);
    font-size: 13px;
    margin-top: 10px
}


/* ==========================================================================
   アプリ本体：スマホの外枠 と タブ内の各画面
   ========================================================================== */

/* スマホ本体っぽく見せるための外枠 */
.phone {
    width: 390px;
    max-width: 100%;
    height: 760px;
    background: var(--bg);
    border: 1px solid #d5d9d4;
    border-radius: 34px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .14)
}

/* タブの中身が入る、スクロールできるエリア */
.screen {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 各タブの画面。.active が付いているものだけ表示する（それ以外は非表示） */
.view {
    display: none;
    padding: 0 0 12px
}

.view.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* 出産予定日までのカウントダウン */
.due-countdown {
    margin: 4px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-dark)
}

/* 記録タブのヘッダー右側：赤ちゃんの名前と月齢 */
.baby-age {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-dark);
    background: var(--accent-bg, rgba(15, 110, 86, 0.12));
    padding: 3px 10px;
    border-radius: 10px;
    white-space: nowrap;
}

/* 画面上部のヘッダー（タイトル・サブ情報）。スクロールしても上に固定表示 */
.hd {
    padding: 14px 18px;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0
}

.hd h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600
}

/* ヘッダー内の補足テキスト（予定日まで◯日、など） */
.hd .sub {
    margin: 5px 0 0;
    font-size: 12px;
    color: var(--muted)
}

/* ヘッダー右上の「ログアウト」ボタン */
.hd .signout {
    position: absolute;
    top: 14px;
    right: 16px;
    font-size: 12px;
    color: var(--hint);
    background: none;
    border: none;
    cursor: pointer
}

/* ヘッダーの下、画面本体のpadding */
.body {
    padding: 14px;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}


/* ==========================================================================
   チェックリスト（段取り・当日タブで使用）
   ========================================================================== */


/* チェック項目1行分（タップで完了/未完了を切り替える） */
.chk {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 13px;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    cursor: pointer
}

.chk:last-child {
    border-bottom: none
}

/* チェックボックスの四角部分（未完了時） */
.chk .box {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 2px solid #c7cbc6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px
}

/* 完了状態：四角を緑で塗りつぶす */
.chk.done .box {
    background: var(--accent);
    border-color: var(--accent)
}

/* 完了状態：文字に取り消し線＋グレーに */
.chk.done .txt {
    text-decoration: line-through;
    color: var(--hint)
}

/* 項目タイトルのテキスト部分（残りの横幅いっぱいに広げる） */
.chk .txt {
    flex: 1
}

/* 「完了した人（夫/妻）」を示す小さい文字 */
.chk .by {
    font-size: 10px;
    color: var(--hint)
}


/* ==========================================================================
   カード（手続きタブなど、詳細情報を持つ項目で使用）
   ========================================================================== */

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 14px
}

/* カード内で左右に要素を並べるための行（タイトルと状態ピルなど） */
.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* カード内のタイトル文字 */
.t14 {
    font-size: 14px;
    font-weight: 500
}

/* 共通ボタン（#auth の外でも使う基本スタイル） */
.btn {
    border: none;
    border-radius: 22px;
    height: 32px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background: #f0f1ee;
    color: var(--ink);
}

/* 完了した項目のタイトルに取り消し線を付ける */
.strike {
    text-decoration: line-through;
    color: var(--hint)
}

/* 「完了」「未」などの丸いラベル（ピル） */
.pill {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 20px
}

/* ピルの色違い：g=完了（緑）、n=未（グレー） */
.pill.g {
    background: var(--accent-bg);
    color: var(--accent-dark)
}

.pill.n {
    background: #f0f1ee;
    color: var(--muted)
}

/* カード内の補足説明（提出先・detail など） */
.meta {
    font-size: 12px;
    color: var(--muted);
    margin: 5px 0 0;
    line-height: 1.6
}

/* セクション見出し（「当日やること」「今日のログ」など） */
.sec {
    font-size: 14px;
    font-weight: 600;
    margin: 36px 0 8px
}

#set-saved-msg:empty {
    display: none;
}

/* 一覧が0件のときに出す文言 */
.empty {
    font-size: 12px;
    color: var(--hint);
    text-align: center;
    padding: 16px
}

.date-nav {
    width: 32px;
    height: 32px;
    border: 1px solid #d5d9d4;
    border-radius: 9px;
    background: #fff;
    color: var(--muted);
    font-size: 13px;
    cursor: pointer;
    flex: 0 0 auto;
}

.date-nav:active {
    background: #f0f1ee;
}

.amt-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px calc(50% - 28px);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.amt-scroll::-webkit-scrollbar {
    display: none;
}

.amt-chip {
    flex-shrink: 0;
    scroll-snap-align: center;
    padding: 8px 14px;
    border-radius: 9px;
    border: 1px solid #d5d9d4;
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
}

.amt-chip.on {
    border-color: var(--accent);
    background: var(--accent-bg, rgba(15, 110, 86, 0.12));
    color: var(--accent-dark);
    font-weight: 600;
}



/* ==========================================================================
   下部タブバー（段取り・当日・手続き・お金・記録の5ボタン）
   ========================================================================== */

.tabs {
    display: flex;
    background: var(--card);
    border-top: 1px solid var(--line);
    padding-bottom: 6px
}

.tab {
    flex: 1;
    border: none;
    background: none;
    padding: 8px 0 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: var(--hint);
    font-size: 10px;
    cursor: pointer
}

/* タブのアイコン部分 */
.tab .ic {
    font-size: 19px
}

/* 今選ばれているタブだけアクセントカラーにする */
.tab.on {
    color: var(--accent);
    font-weight: 600
}

.tab.on .ic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 24px;
    background: var(--accent-bg);
    border-radius: 12px
}


/* ==========================================================================
   陣痛タイマー（当日タブ）
   ========================================================================== */

/* タイマー全体を囲む白いカード */
.timer {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px;
    text-align: center
}

/* 「前回からの経過」の大きい数字（00:00 など） */
.timer .big {
    font-size: 40px;
    font-weight: 600;
    margin: 4px 0;
    font-variant-numeric: tabular-nums
        /* 数字の幅を揃えてガタつきを防ぐ */
}

/* 「陣痛が来た（記録）」の大きい赤系ボタン */
.timer .btn-big {
    width: 100%;
    border: none;
    border-radius: 22px;
    padding: 13px;
    font-size: 16px;
    font-weight: 600;
    background: var(--danger-bg);
    color: var(--danger-dark);
    cursor: pointer
}

/* 「平均間隔」「記録回数」を横並びで見せるカード群 */
.stats {
    display: flex;
    gap: 8px;
    margin: 12px 0
}

.stat {
    flex: 1;
    background: #f0f1ee;
    border-radius: 9px;
    padding: 9px 4px;
    text-align: center
}

/* 統計カードのラベル（「平均間隔」など） */
.stat .k {
    font-size: 11px;
    color: var(--muted);
    margin: 0
}

/* 統計カードの数値 */
.stat .v {
    font-size: 17px;
    font-weight: 600;
    margin: 2px 0 0
}

/* 排泄パネルは表示量が少ないため、他の2つより幅を狭める */
/* .stat.narrow {
    flex: 0.7;
} */

/* 授乳・哺乳瓶・排泄パネルの内訳（右/左/計、母乳/ミルクなど）の行 */
.stat-line {
    display: flex;
    gap: 4px;
    align-items: baseline;
    font-size: 12px;
    color: var(--muted);
    margin: 3px 2px 0;
    text-align: left;
}

.stat-line b {
    color: var(--ink);
    font-weight: 600;
    font-size: 12px;
}

/* お知らせバナー（通常メッセージ／病院連絡アラート） */
.banner {
    border-radius: 11px;
    padding: 11px;
    font-size: 12px;
    margin: 10px 0;
    text-align: center
}

/* 通常時：グレーの落ち着いた見た目 */
.banner.mute {
    background: #f0f1ee;
    color: var(--muted)
}

/* 目安に到達したときの警告：黄色系で目立たせる */
.banner.warn {
    background: var(--warn-bg);
    color: var(--warn-dark)
}

/* 「リセット（新しく計測）」の控えめなテキストボタン */
.tm-reset {
    margin-top: 8px;
    background: none;
    border: none;
    color: var(--hint);
    font-size: 12px;
    cursor: pointer
}


/* ==========================================================================
   タイムライン（お金タブ：育休・給付金ステップの時間軸表示）
   ========================================================================== */

/* タイムライン1項目分の行（左に丸アイコン、右に内容） */
.tl {
    display: flex;
    gap: 10px;
    margin-bottom: 2px
}

/* 左側：丸アイコンと、次の項目へつながる縦線をまとめた列 */
.tl .dot {
    flex: 0 0 auto;
    width: 24px;
    display: flex;
    flex-direction: column;
    align-items: center
}

/* 丸アイコン本体（数字 / ● / ✓ が状態に応じて入る） */
.tl .dot .c {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px
}

/* 丸アイコンの下から次の項目まで伸びる縦線（最後の項目には付けない） */
.tl .dot .ln {
    flex: 1;
    width: 2px;
    background: var(--line);
    margin-top: 2px;
    min-height: 14px
}

/* 右側：タイトルや説明文が入るエリア */
.tl .ct {
    flex: 1;
    padding-bottom: 14px
}

/* 時期の目安（「出産前」「今ここ」など） */
.tl .ph {
    font-size: 11px;
    margin: 0;
    color: var(--hint)
}

/* ステップのタイトル */
.tl .ti {
    font-size: 14px;
    font-weight: 600;
    margin: 1px 0 0
}

/* ステップの説明文 */
.tl .tx {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.6;
    margin: 4px 0 0
}

/* 「未・進行中・完了」の状態切り替えボタンを横に並べるエリア */
.tl .btns {
    display: flex;
    gap: 6px;
    margin-top: 7px
}

/* 小さめの丸ピルボタン（タイムラインの状態切り替え／Push Gift候補の操作ボタンで共用） */
.tl .btns button,
.gift-choose {
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--muted);
    cursor: pointer
}

/* 選択中のボタンだけ、状態に応じた色で塗りつぶす */
.tl .btns button.on {
    color: #fff;
    border-color: transparent
}

.tl .btns button[data-status="todo"].on {
    background: var(--muted)
}

.tl .btns button[data-status="doing"].on {
    background: var(--danger-dark)
}

.tl .btns button[data-status="done"].on {
    background: var(--accent-dark)
}

/* 削除ボタン：丸型に統一（段取り・当日・手続き・Push Gift共通） */
.del {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--hint);
    font-size: 14px;
    line-height: 1;
    padding: 0;
    cursor: pointer
}

.del:hover {
    color: var(--danger-dark);
    border-color: var(--danger-dark)
}

/* 段取り・当日の行の中だけ、右端に寄せる */
.chk .del {
    margin-left: auto
}

/* 「詳しく見る（公式サイト）」の外部リンク */
.meta-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--accent-dark);
    text-decoration: none;
}

.meta-link:hover {
    text-decoration: underline;
}

/* Push Gift候補の入力フォーム（商品名・価格・URL・追加ボタンを縦に並べる） */
.gift-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

/* 入力欄の共通見た目（Push Gift候補フォーム／段取り・当日・手続きの追加欄で共用） */
.gift-form input,
.row input {
    height: 36px;
    border: 1px solid #d5d9d4;
    border-radius: 9px;
    padding: 0 10px;
    font-size: 16px;
}

/* .row 内の入力欄だけ、残り幅いっぱいに広げる */
.row input {
    flex: 1;
    min-width: 0;
}

/* Push Gift候補のカード */
.gift-card {
    margin-bottom: 8px;
}

/* 「本命」に選ばれた候補は、緑の枠で強調する */
.gift-card.chosen {
    border: 2px solid var(--accent);
}

/* Push Gift候補の価格表示（大きく・アクセントカラーで目立たせる） */
.gift-price {
    font-size: 18px;
    font-weight: 600;
    color: var(--accent-dark);
    margin: 6px 0;
}

/* 「新しく家族を作る／相手として参加」の切り替えボタン */
.modes {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
}

.modes button {
    flex: 1;
    height: 36px;
    border: 1px solid #d5d9d4;
    border-radius: 9px;
    background: #fff;
    font-size: 13px;
    color: var(--muted);
    cursor: pointer;
}

.modes button.on {
    border-color: var(--accent);
    color: var(--accent-dark);
    background: var(--accent-bg);
}

/* Push Gift：非公開であることを示す注記（見出しの横に小さく表示） */
.privacy-note {
    display: inline-block;
    margin-left: 12px;
    padding: 3px 8px;
    font-size: 11px;
    color: var(--accent-dark);
    background: var(--accent-bg);
    border-radius: 999px;
}

/* Push Gift見出しと「非公開」バッジを横並びにする */
.gift-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 48px;
}



/* ==========================================================================
   育児記録（記録タブ）
   ========================================================================== */

/* ログ一覧を1枚のカードにまとめる背景 */
.list {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}

/* ログ1件分の行 */
.rec {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
}

.rec:last-child {
    border-bottom: none;
}

/* 記録した時刻 */
.rec .tm {
    font-size: 12px;
    color: var(--hint);
    width: 64px;
}

/* 各種類で最新1件の時刻の下にだけ、経過時間を小さく表示する */
.rec .tm .rel-time {
    display: block;
    font-size: 9px;
    font-weight: 600;
    color: var(--danger);
    margin-top: 2px;
    white-space: nowrap;
}

/* 種類のアイコン（🍼🤱👶🌙） */
.rec .ic {
    font-size: 17px;
}

/* 「誰が記録したか」を示す丸いイニシャル */
.rec .who {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.who.h {
    background: var(--accent-bg);
    color: var(--accent-dark);
}

.who.w {
    background: var(--warn-bg);
    color: var(--warn-dark);
}

.who.o {
    background: #f0f1ee;
    color: var(--muted);
}

/* 削除ボタンを右端に寄せる */
.rec .del {
    width: 28px;
    height: 28px;
    font-size: 16px;
    margin-left: auto;
}

/* タイルを1行にまとめて横スクロールさせる（グループ分け廃止に伴う変更） */
.qc {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 2px;
}

.qc .c {
    flex: 0 0 62px;
    scroll-snap-align: start;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 7px 2px;
    text-align: center;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: pan-x;
}

.qc .c.sortable-chosen {
    opacity: .6;
    transform: scale(1.05);
    z-index: 2;
}

/* カスタム項目の並び替え中の見た目 */
.modal-row {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: pan-y;
}

.modal-row.sortable-chosen {
    opacity: .6;
    background: #f7f8f6;
}

.qc .c.empty {
    border-style: dashed;
    color: var(--hint);
}

.qc .ic {
    font-size: 16px;
    color: var(--accent);
}

.qc .c.empty .ic {
    color: var(--hint);
    font-size: 14px;
}

.qc .k {
    font-size: 9px;
    color: var(--muted);
    margin: 2px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qc-panel {
    flex: 0 0 auto;
    background: var(--card);
    border-top: 1px solid var(--line);
    padding: 8px 14px;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, .05);
}

/* 常時表示になったので、開閉ボタンではなくただのラベルにした */
.qc-panel-label {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 8px;
}

/* 記録タブの.bodyだけflex化して、余白エリアが残りスペースを埋められるようにする */
#v-log .body {
    display: flex;
    flex-direction: column;
}

/* stats・見出し・ログ一覧は縮めず、余白エリアだけが伸び縮みするようにする */
#v-log .body>.stats,
#v-log .body>#log-heading,
#v-log .body>.list {
    flex-shrink: 0;
}


/* ログ一覧の下に、タイル選択ポップアップを開くための余白エリアを作る */
.log-empty-space {
    flex: 1;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    border: 1.5px dashed var(--line);
    border-radius: 10px;
}

.log-empty-hint {
    font-size: 12px;
    color: var(--hint);
}

/* 育児記録タブの回数パネルだけ、カテゴリごとに色分けする */
#v-log .stat.milk {
    background: var(--pink-bg);
}

#v-log .stat.milk .k,
#v-log .stat.milk .v,
#v-log .stat.milk .stat-line,
#v-log .stat.milk .stat-line b {
    color: var(--pink-dark);
}

#v-log .stat.meal {
    background: var(--warn-bg);
}

#v-log .stat.meal .k,
#v-log .stat.meal .v,
#v-log .stat.meal .stat-line,
#v-log .stat.meal .stat-line b {
    color: var(--warn-dark);
}

#v-log .stat.toilet {
    background: var(--accent-bg);
}

#v-log .stat.toilet .k,
#v-log .stat.toilet .v,
#v-log .stat.toilet .stat-line,
#v-log .stat.toilet .stat-line b {
    color: var(--accent-dark);
}

/* 記録タブの回数パネル(v3)：内訳を中央寄せにする */
#v-log .stat-line {
    justify-content: center;
    text-align: center;
}

/* 右/左・母乳/ミルクのラベル幅を揃えて、数値の開始位置を統一する */
#v-log .stat-line .stat-label {
    display: inline-block;
    width: 24px;
    text-align: left;
}

#v-log .stat-line .stat-label.wide {
    width: 48px;
}

/* 数値の桁が変わっても位置がずれないよう、値の表示幅を固定する */
#v-log .stat.milk .stat-line b {
    display: inline-block;
    width: 56px;
    text-align: center;
    white-space: nowrap;
}

#v-log .stat.meal .stat-line b {
    display: inline-block;
    width: 44px;
    text-align: center;
    white-space: nowrap;
}

/* 排泄パネルは合計値がない分、内訳(💧💩)を見出しと同じ太さ・大きさにして目立たせる */
#v-log .stat-line.big {
    font-size: 16px;
    font-weight: 700;
    margin-top: 6px;
}

#v-log .stat-line.big b {
    font-weight: 700;
    font-size: 16px;
}

/* 記録タブの見出し（授乳/哺乳瓶/排泄）だけ太く大きくする */
#v-log .stat .k {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 4px;
}

/* モーダル用CSS */
.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    padding: 20px;
}

.modal-overlay[hidden] {
    display: none;
}

.modal-panel {
    background: var(--card);
    border-radius: 16px;
    padding: 16px;
    width: 100%;
    max-width: 300px;
}

.modal-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 12px;
}

.modal-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
}

.modal-row:last-child {
    border-bottom: none;
}

.modal-row .lbl {
    flex: 1;
}

.modal-row .lbl.empty {
    color: var(--hint);
}

.modal-action {
    font-size: 12px;
    border-radius: 6px;
    padding: 3px 10px;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    flex: 0 0 auto;
}

.modal-action.add {
    color: var(--accent-dark);
    border-color: var(--accent);
}

.modal-action.remove {
    color: var(--danger-dark);
    border-color: var(--danger);
}

.modal-close {
    text-align: center;
    font-size: 13px;
    color: var(--muted);
    border-top: 1px solid var(--line);
    padding-top: 10px;
    margin-top: 10px;
    cursor: pointer;
}

/* ログ空欄タップ時のポップアップ：記録項目を3列グリッドで並べる */
.tile-picker-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 4px;
}

.tile-picker-grid .c {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 4px;
    text-align: center;
    cursor: pointer;
}

.tile-picker-grid .ic {
    font-size: 18px;
    color: var(--accent);
}

.tile-picker-grid .k {
    font-size: 11px;
    color: var(--muted);
    margin: 4px 0 0;
}

.modal-row .lbl.editable {
    cursor: pointer;
}

#log-heading {
    margin-top: 10px;
}

/* mlパネルの範囲を端まで動かしきったら、‹/›ボタンを押せない見た目にする */
#log-detail-amount-prev:disabled,
#log-detail-amount-next:disabled {
    opacity: .35;
    cursor: default;
}

.preset-btn {
    height: 32px;
    border: 1px solid #d5d9d4;
    border-radius: 8px;
    background: #fff;
    font-size: 12px;
    color: var(--ink);
    cursor: pointer;
}

.preset-btn.on {
    border-color: var(--accent);
    color: var(--accent-dark);
    font-weight: 600;
}

.preset-btn:active {
    background: #f0f1ee;
}




/* メディアクエリ */
@media (max-width: 480px) {

    html,
    body {
        position: fixed;
        inset: 0;
        height: 100%;
        overflow: hidden;
        overscroll-behavior: none;
    }

    body {
        padding: 4px;
    }

    #app {
        width: 100%;
        height: calc(100dvh - 4px - 16px);
    }

    .phone {
        width: 100%;
        height: 100%;
        border: none;
        border-radius: 32px;
        box-shadow: none;
    }

    .hd {
        padding-top: calc(14px + env(safe-area-inset-top));
    }

    .body {
        padding: 8px 10px;
    }

    .card {
        margin-bottom: 12px;
    }
}