/* ============================================================
   ベビーログ style.css
   「可愛くて、思わずボタンを押したくなる」
   アイボリー背景 + パステル + マシュマロ質感のぷっくりボタン。
   アイコンはすべてSVG(currentColor)。絵文字は使用しない。
   ============================================================ */

/* ---- テーマ変数（ライト） ---- */
:root {
  --bg: #FBF6ED;            /* 温かみのあるアイボリー */
  --card: #FFFFFF;
  --card-2: #FAF1E6;
  --ink: #6A5D57;           /* 文字（主・ウォームグレー） */
  --ink-soft: #A99A91;      /* 文字（淡） */
  --line: #EFE3D7;

  /* カテゴリ: base(面) / edge(下端の縁) / ink(文字・線) */
  --feed: #F9CBD6;   --feed-edge: #ECA9BB;   --feed-ink: #A85D72;   /* ベビーピンク */
  --poop: #C8E9DA;   --poop-edge: #A0D3BD;   --poop-ink: #3F8468;   /* ミントグリーン */
  --sleep: #DCD3F2;  --sleep-edge: #BFB0E3;  --sleep-ink: #71619F;  /* ラベンダー */
  --temp: #F9E6B5;   --temp-edge: #E5CB8B;   --temp-ink: #997933;   /* ペールイエロー */
  --growth: #C4E3F4; --growth-edge: #9BCBE4; --growth-ink: #41779B; /* スカイブルー */
  --note: #EFE3CB;   --note-edge: #D8C5A2;   --note-ink: #8D744A;   /* クリームベージュ */
  --photo: #F8DBC9;  --photo-edge: #E4B995;  --photo-ink: #99613A;  /* ソフトピーチ */
  --mama-badge: #F09CB5;  /* ママバッジ(ピンク) */
  --papa-badge: #85C3E8;  /* パパバッジ(水色) */
  --other-badge: #ADA0DC; /* その他の家族バッジ(ラベンダー) */
  --memo-bg: #FFF8DE;     /* 手書きメモカード */
  --memo-line: #EFDFA8;
  --memo-ink: #7A5F2E;
  --memo-pen: #C9A94F;

  --accent: #F5AFC2;        /* 主ボタン */
  --accent-edge: #E289A3;
  --accent-ink: #FFFFFF;
  --danger: #E89090;
  --danger-edge: #D06F6F;

  --soft-shadow: 0 10px 24px rgba(164, 120, 96, 0.14);
  --soft-shadow-sm: 0 4px 14px rgba(164, 120, 96, 0.10);
  --overlay: rgba(74, 60, 55, 0.36);
  --tab-bg: rgba(255, 253, 248, 0.94);
}

:root[data-theme="dark"] {
  --bg: #1C1B2E;
  --card: #282741;
  --card-2: #302F4B;
  --ink: #EAE4EC;
  --ink-soft: #918BA2;
  --line: #3A3856;

  --feed: #B57D8C;   --feed-edge: #8A5262;   --feed-ink: #FFE2EA;
  --poop: #6FA890;   --poop-edge: #4C7A63;   --poop-ink: #E2F7EC;
  --sleep: #9184BD;  --sleep-edge: #675A92;  --sleep-ink: #EFE9FF;
  --temp: #C3A566;   --temp-edge: #93783F;   --temp-ink: #FFF2D6;
  --growth: #6FA3C2; --growth-edge: #497795; --growth-ink: #E2F3FF;
  --note: #AE9A72;   --note-edge: #7F6E4B;   --note-ink: #FFF4DE;
  --photo: #C09068;  --photo-edge: #8F6543;  --photo-ink: #FFE9D6;
  --mama-badge: #D77F9B;
  --papa-badge: #5E9DC4;
  --other-badge: #8D7FC0;
  --memo-bg: #403A26;
  --memo-line: #5E5535;
  --memo-ink: #F2E5BC;
  --memo-pen: #C9AE62;

  --accent: #C77E93;
  --accent-edge: #97576C;
  --accent-ink: #FFFFFF;
  --danger: #D98A8A;
  --danger-edge: #A96060;

  --soft-shadow: 0 10px 26px rgba(0, 0, 0, 0.42);
  --soft-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.32);
  --overlay: rgba(0, 0, 0, 0.55);
  --tab-bg: rgba(40, 39, 65, 0.95);
}

/* ---- ベース ---- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; padding: 0; height: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro",
    "Zen Maru Gothic", "Rounded Mplus 1c", "Quicksand", system-ui,
    -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.01em;
  overscroll-behavior-y: none;
}

button { font-family: inherit; cursor: pointer; }
input, textarea, select, button { font-family: inherit; font-size: 16px; color: var(--ink); }

/* SVGアイコン共通 */
.ic { display: inline-block; vertical-align: -0.2em; flex-shrink: 0; }

/* ---- アプリ枠（PCでも中央カラム） ---- */
#app {
  max-width: 460px;
  margin: 0 auto;
  min-height: 100%;
  position: relative;
  background: var(--bg);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
}

#screen {
  flex: 1;
  padding:
    calc(env(safe-area-inset-top) + 8px)
    calc(env(safe-area-inset-right) + 16px)
    16px
    calc(env(safe-area-inset-left) + 16px);
}
body.has-tabbar #screen {
  padding-bottom: calc(env(safe-area-inset-bottom) + 88px);
}

/* ---- オフラインバナー ---- */
#offline-banner {
  position: sticky;
  top: 0;
  z-index: 40;
  margin: 0 -16px 8px;
  padding: 8px 16px;
  background: var(--temp);
  color: var(--temp-ink);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

/* ---- ヘッダー ---- */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 2px 10px;
}
.app-header .title {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.app-header .title .ic { color: var(--accent-edge); }

.header-btns { display: flex; gap: 8px; }

.icon-btn {
  border: none;
  background: var(--card);
  color: var(--ink-soft);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: var(--soft-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  display: grid;
  place-items: center;
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
}
:root[data-theme="dark"] .icon-btn { box-shadow: var(--soft-shadow-sm); }
.icon-btn:hover { transform: translateY(-1px); color: var(--ink); }
.icon-btn:active { transform: translateY(2px) scale(0.94); }

/* ---- カード ---- */
.card {
  background: var(--card);
  border-radius: 24px;
  box-shadow: var(--soft-shadow-sm);
  padding: 16px;
}
.card + .card { margin-top: 14px; }

/* ============================================================
   ボタン（マシュマロ質感）
   下端の縁(edge) + 柔らかい影 + 上面ハイライトで「ぷっくり」。
   押すと沈む。
   ============================================================ */
.btn {
  --b-base: var(--accent);
  --b-edge: var(--accent-edge);
  --b-ink: var(--accent-ink);
  border: none;
  border-radius: 999px;
  padding: 13px 20px;
  font-size: 16px;
  font-weight: 800;
  min-height: 52px;
  width: 100%;
  color: var(--b-ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 60%),
    var(--b-base);
  box-shadow:
    0 4px 0 var(--b-edge),
    var(--soft-shadow-sm),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.16s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.btn:hover { transform: translateY(-1px); }
.btn:active {
  transform: translateY(3px);
  box-shadow:
    0 1px 0 var(--b-edge),
    0 2px 6px rgba(120, 90, 70, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn:disabled { opacity: 0.6; }
.btn.secondary {
  --b-base: var(--card-2);
  --b-edge: var(--line);
  --b-ink: var(--ink);
}
.btn.ghost {
  background: transparent;
  color: var(--ink-soft);
  box-shadow: none;
  font-weight: 700;
  min-height: 44px;
}
.btn.ghost:hover { transform: none; }
.btn.ghost:active { transform: scale(0.97); box-shadow: none; }
.btn.danger { --b-base: var(--danger); --b-edge: var(--danger-edge); --b-ink: #fff; }
.btn.small { min-height: 40px; padding: 8px 16px; font-size: 14px; width: auto; }

/* ---- フォーム ---- */
.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 6px;
  padding-left: 4px;
}
.input {
  width: 100%;
  border: 2px solid var(--line);
  background: var(--bg);
  border-radius: 16px;
  padding: 13px 16px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
/* 1行入力は高さを統一（type=date がiOSで縮むのを防ぐ） */
input.input {
  height: 55px;
  padding-top: 0;
  padding-bottom: 0;
}
input.input[type="date"],
input.input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  color: var(--ink);
}
input.input[type="date"]::-webkit-date-and-time-value,
input.input[type="time"]::-webkit-date-and-time-value { text-align: left; }
.input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
textarea.input { resize: vertical; min-height: 84px; line-height: 1.5; }

/* ============================================================
   ホーム
   ============================================================ */
.child-head { text-align: center; padding: 2px 0 4px; }
.child-avatar-wrap { position: relative; display: inline-block; }
.child-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--card);
  border: 4px solid var(--card);
  box-shadow: var(--soft-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 0;
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.child-avatar svg, .child-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.child-avatar:active { transform: scale(0.93); }

/* 吹き出し（ママへの感謝） */
.bubble {
  position: absolute;
  left: 90%;
  top: -8px;
  background: var(--card);
  color: var(--ink);
  border-radius: 16px 16px 16px 4px;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: normal;
  line-height: 1.4;
  text-align: left;
  width: max-content;
  box-shadow: var(--soft-shadow-sm);
  max-width: min(190px, calc(50vw - 52px));
  z-index: 5;
  display: inline-flex;
  align-items: flex-start;
  gap: 5px;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.bubble .bubble-heart { margin-top: 2px; }
.bubble .bubble-heart { color: var(--feed-edge); }
.bubble::after {
  content: "";
  position: absolute;
  left: -6px;
  bottom: 6px;
  border: 6px solid transparent;
  border-right-color: var(--card);
  border-left: 0;
}
.bubble.swap { opacity: 0; transform: translateY(6px) scale(0.9); }

.child-name { font-size: 20px; font-weight: 800; margin: 10px 0 0; }
.child-age { font-size: 14px; color: var(--ink-soft); font-weight: 700; }
.child-age b { color: var(--feed-ink); font-size: 16px; }

/* タイマー表示エリア（前回の授乳から） */
.elapsed-hero {
  text-align: center;
  margin: 12px 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 55%),
    linear-gradient(160deg, var(--card), var(--card-2));
  border-radius: 26px;
  padding: 16px;
  box-shadow: var(--soft-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
:root[data-theme="dark"] .elapsed-hero {
  background: linear-gradient(160deg, var(--card), var(--card-2));
  box-shadow: var(--soft-shadow-sm);
}
.elapsed-hero .label { font-size: 13px; color: var(--ink-soft); font-weight: 700; }
.elapsed-hero .big {
  font-size: 40px;
  font-weight: 800;
  color: var(--feed-ink);
  line-height: 1.15;
  margin: 2px 0;
  font-variant-numeric: tabular-nums;
}
.elapsed-hero .big small { font-size: 19px; font-weight: 800; }
.elapsed-hero .prev { font-size: 13px; color: var(--ink-soft); }

.mini-summary {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 10px 0 4px;
  flex-wrap: wrap;
}
.mini-chip {
  background: var(--card);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-soft);
  box-shadow: var(--soft-shadow-sm);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ---- 記録ボタン（マシュマロ） ---- */
.rec-btn {
  --b-base: var(--card);
  --b-edge: var(--line);
  --b-ink: var(--ink);
  border: none;
  border-radius: 24px;
  min-height: 76px;
  padding: 10px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-weight: 800;
  color: var(--b-ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 58%),
    var(--b-base);
  box-shadow:
    0 5px 0 var(--b-edge),
    var(--soft-shadow-sm),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.16s ease;
}
:root[data-theme="dark"] .rec-btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 58%), var(--b-base);
}
.rec-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--b-edge), var(--soft-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
.rec-btn:active {
  transform: translateY(4px);
  box-shadow:
    0 1px 0 var(--b-edge),
    0 2px 6px rgba(120, 90, 70, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.rec-btn .rec-lbl { font-size: 12.5px; line-height: 1.2; }
.rec-btn .rec-ic { display: grid; place-items: center; }
.rec-btn.bounce { animation: bounce 0.42s ease; }

/* カテゴリ配色 */
.rec-btn[data-cat="feed"]   { --b-base: var(--feed);   --b-edge: var(--feed-edge);   --b-ink: var(--feed-ink); }
.rec-btn[data-cat="poop"]   { --b-base: var(--poop);   --b-edge: var(--poop-edge);   --b-ink: var(--poop-ink); }
.rec-btn[data-cat="sleep"]  { --b-base: var(--sleep);  --b-edge: var(--sleep-edge);  --b-ink: var(--sleep-ink); }
.rec-btn[data-cat="temp"]   { --b-base: var(--temp);   --b-edge: var(--temp-edge);   --b-ink: var(--temp-ink); }
.rec-btn[data-cat="growth"] { --b-base: var(--growth); --b-edge: var(--growth-edge); --b-ink: var(--growth-ink); }
.rec-btn[data-cat="note"]   { --b-base: var(--note);   --b-edge: var(--note-edge);   --b-ink: var(--note-ink); }
.rec-btn[data-cat="photo"]  { --b-base: var(--photo);  --b-edge: var(--photo-edge);  --b-ink: var(--photo-ink); }
.rec-btn.sleeping { outline: 3px dashed var(--sleep-ink); outline-offset: -7px; }

/* 大ボタン: 左母乳 / 右母乳 */
.feed-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.feed-row .rec-btn.big {
  min-height: 98px;
  border-radius: 28px;
  gap: 6px;
}
.feed-row .rec-btn.big .rec-lbl { font-size: 16px; }

/* サブボタン格子（4列） */
.rec-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 12px;
}

/* きょうの写真アップロードボタン(全幅・夕焼けグラデーションのマシュマロ) */
.photo-btn {
  width: 100%;
  margin: 24px 0 6px;
  border: none;
  border-radius: 999px;
  min-height: 56px;
  padding: 12px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 800;
  color: #96536B;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 55%),
    linear-gradient(120deg, #FFE0CE 0%, #F9CBD6 52%, #E3D4F4 100%);
  box-shadow:
    0 5px 0 #E2A7B9,
    var(--soft-shadow-sm),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.16s ease;
}
:root[data-theme="dark"] .photo-btn {
  color: #FFE9EF;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 55%),
    linear-gradient(120deg, #B98A70 0%, #B57D8C 52%, #9184BD 100%);
  box-shadow: 0 5px 0 #8A5262, var(--soft-shadow-sm);
}
.photo-btn:hover { transform: translateY(-2px); }
.photo-btn:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #E2A7B9, 0 2px 6px rgba(120, 90, 70, 0.12);
}
:root[data-theme="dark"] .photo-btn:active { box-shadow: 0 1px 0 #8A5262, 0 2px 6px rgba(0, 0, 0, 0.3); }
.photo-btn:disabled { opacity: 0.6; }

@keyframes bounce {
  0% { transform: scale(1); }
  35% { transform: scale(1.12); }
  60% { transform: scale(0.94); }
  100% { transform: scale(1); }
}

/* ============================================================
   日付ナビ
   ============================================================ */
.date-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.date-nav .date-label {
  font-size: 17px;
  font-weight: 800;
  text-align: center;
  flex: 1;
}
.date-nav .date-label small { display: block; font-size: 12px; color: var(--ink-soft); font-weight: 700; }

.empty {
  text-align: center;
  color: var(--ink-soft);
  padding: 36px 16px;
  font-weight: 700;
}
.empty .empty-ic { display: block; margin: 0 auto 8px; color: var(--line); width: 40px; }
.empty .empty-ic .ic { color: var(--ink-soft); opacity: 0.5; }

/* ============================================================
   きろく: 日記カード（便箋風）
   ============================================================ */
.diary-card {
  background: var(--card);
  border-radius: 24px;
  box-shadow: var(--soft-shadow-sm);
  overflow: hidden;
  border: 1.5px solid color-mix(in srgb, var(--feed) 55%, transparent);
  margin-bottom: 18px;
}
.diary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)),
    var(--feed);
  color: var(--feed-ink);
}
.diary-title {
  font-weight: 800;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.print-btn { flex-shrink: 0; }

.diary-paper {
  padding: 14px 18px 20px;
  border-left: 4px solid color-mix(in srgb, var(--feed) 45%, transparent);
  background-color: var(--card);
  /* 薄い罫線(1px・本文の行間に合わせる) */
  background-image: repeating-linear-gradient(
    transparent,
    transparent 29px,
    color-mix(in srgb, var(--ink) 13%, transparent) 29px,
    color-mix(in srgb, var(--ink) 13%, transparent) 30px);
  color: var(--ink);
}

/* ポラロイド風メインビジュアル */
.polaroid {
  position: relative;
  margin: 8px auto 16px;
  width: min(82%, 270px);
  background: #fff;
  padding: 10px 10px 12px;
  border: 1px solid #ece7e0;
  border-radius: 3px;
  box-shadow: 0 10px 22px rgba(90, 60, 45, 0.22);
  transform: rotate(-2deg);
}
.polaroid.pol-clickable { cursor: pointer; }
.pol-change {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #9c8a7c;
  display: grid;
  place-items: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

/* 写真トリミング */
.crop-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 16px;
  background: var(--card-2);
  touch-action: none;
  /* iOS Safari対策: transformされた子要素を確実に枠内へクリップする */
  isolation: isolate;
  z-index: 0;
  -webkit-clip-path: inset(0 round 16px);
  clip-path: inset(0 round 16px);
}
/* 念のためボタン側も写真より上のレイヤーに固定 */
.modal-actions { position: relative; z-index: 1; }
.crop-frame img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  transform-origin: 0 0;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}
.crop-hint {
  font-size: 12px;
  color: var(--ink-soft);
  text-align: center;
  margin: 8px 0 2px;
  font-weight: 700;
}
.crop-zoom {
  width: 100%;
  margin: 4px 0 12px;
  accent-color: var(--accent);
}
.polaroid img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #f4f1ec;
}
.polaroid figcaption {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #8b7c70;
  padding-top: 9px;
}

/* ママ/パパ バッジ */
.who-badge {
  display: inline-block;
  padding: 0 9px;
  border-radius: 999px;
  color: #fff;
  font-weight: 800;
  font-size: 0.82em;
  line-height: 1.7;
  margin: 0 1px;
  vertical-align: 0.06em;
}
.who-badge.mama { background: var(--mama-badge); }
.who-badge.papa { background: var(--papa-badge); }
.diary-paper p { margin: 0; line-height: 30px; }
.diary-open {
  font-weight: 800;
  font-size: 16px;
  color: var(--feed-ink);
}
/* 沿革風の縦タイムライン */
.tl { position: relative; padding: 2px 0 4px; }
.tl::before {
  content: "";
  position: absolute;
  left: 63px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--feed-edge) 45%, transparent);
}
.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 48px 32px 1fr;
  align-items: start;
}
.tl-when { text-align: right; line-height: 30px; }
.tl-when b {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--feed-ink);
}
.tl-when small {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-soft);
  line-height: 1;
  margin-top: -7px;
}
.tl-dot {
  --d: var(--note-edge);
  justify-self: center;
  margin-top: 10px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--d);
  border: 2px solid var(--card);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--d) 40%, transparent);
  position: relative;
  z-index: 1;
}
.tl-dot[data-cat="feed"]   { --d: var(--feed-edge); }
.tl-dot[data-cat="poop"]   { --d: var(--poop-edge); }
.tl-dot[data-cat="sleep"]  { --d: var(--sleep-edge); }
.tl-dot[data-cat="temp"]   { --d: var(--temp-edge); }
.tl-dot[data-cat="growth"] { --d: var(--growth-edge); }
.tl-dot[data-cat="note"]   { --d: var(--note-edge); }
.tl-dot[data-cat="photo"]  { --d: var(--photo-edge); }
.tl-text {
  line-height: 30px;
  font-size: 14.5px;
  padding-left: 2px;
  min-width: 0;
}

/* 親の手書きメモ(淡い黄色のカード+右上にペン) */
.tl-memo {
  position: relative;
  background: var(--memo-bg);
  border: 1.5px solid var(--memo-line);
  border-radius: 14px;
  padding: 8px 34px 9px 12px;
  margin: 5px 0 7px;
  line-height: 1.7;
  box-shadow: 0 2px 6px rgba(150, 120, 60, 0.08);
}
.tl-memo .memo-pen {
  position: absolute;
  top: 3px;
  right: 3px;
  border: none;
  background: transparent;
  padding: 7px;
  border-radius: 10px;
  color: var(--memo-pen);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.15s ease;
}
.tl-memo .memo-pen:active { transform: scale(0.85); background: color-mix(in srgb, var(--memo-pen) 18%, transparent); }
.tl-memo .memo-head {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 2px;
}
.tl-memo .memo-body {
  /* 手書き風フォント(Klee=iOS/Mac、教科書体=Windows)。無い端末は丸ゴシック+色と太さで区別 */
  font-family: "Klee", "Klee One", "クレー", "YuKyokasho", "YuKyokasho Yoko",
    "UD デジタル 教科書体 N-R", "Hiragino Maru Gothic ProN", "Zen Maru Gothic", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--memo-ink);
  white-space: pre-wrap;
  word-break: break-word;
}
.diary-close {
  margin-top: 8px !important;
  font-weight: 800;
  color: var(--sleep-ink);
  text-align: right;
  /* 「おつかれさ/までした」のような単語の途中での改行を防ぐ */
  word-break: keep-all;
  line-break: strict;
}
.diary-empty {
  text-align: center;
  color: var(--ink-soft);
  font-weight: 700;
  padding: 20px 0;
}

/* きろくデータ（コンパクト表） */
.rec-data { margin-bottom: 8px; }
.rec-data-head {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-soft);
  margin: 0 4px 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.rec-data-empty {
  font-size: 12px;
  color: var(--ink-soft);
  text-align: center;
  padding: 12px;
}
.rec-table-scroll { overflow-x: auto; border-radius: 16px; box-shadow: var(--soft-shadow-sm); }
.rec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  background: var(--card);
}
.rec-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 800;
  color: var(--ink-soft);
  padding: 7px 8px;
  background: var(--card-2);
  white-space: nowrap;
}
.rec-table td {
  padding: 7px 8px;
  border-top: 1px solid var(--line);
  vertical-align: top;
}
.rec-table td .ic { vertical-align: -0.22em; color: var(--ink-soft); }
.rec-table tbody tr { cursor: pointer; }
.rec-table tbody tr:active { background: var(--card-2); }
.c-time { white-space: nowrap; font-weight: 800; font-variant-numeric: tabular-nums; }
.c-type { white-space: nowrap; }
.c-content { color: var(--ink); }
.c-who { white-space: nowrap; color: var(--ink-soft); font-weight: 700; }

/* ============================================================
   サマリー
   ============================================================ */
.sum-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}
.sum-cell {
  background: var(--card-2);
  border-radius: 18px;
  padding: 12px;
  text-align: center;
}
.sum-cell .n { font-size: 24px; font-weight: 800; color: var(--feed-ink); font-variant-numeric: tabular-nums; }
.sum-cell .k { font-size: 12px; color: var(--ink-soft); font-weight: 700; }
.chart-card h3 { margin: 0 0 6px; font-size: 15px; font-weight: 800; }
.chart-card canvas { width: 100%; height: auto; display: block; }
.chart-legend { font-size: 12px; color: var(--ink-soft); font-weight: 700; text-align: right; }

/* ============================================================
   設定
   ============================================================ */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
}
.settings-row:last-child { border-bottom: none; }
.settings-row .lbl { font-weight: 700; }
.settings-row .lbl small { display: block; font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.seg {
  display: inline-flex;
  background: var(--card-2);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  box-shadow: inset 0 2px 4px rgba(120, 90, 70, 0.08);
}
.seg button {
  border: none;
  background: transparent;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  min-height: 40px;
  white-space: nowrap;
  transition: transform 0.15s ease;
}
.seg button.on {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 0 var(--accent-edge), 0 3px 8px rgba(120, 90, 70, 0.15);
}

/* 2択スライドトグル */
.slide-toggle {
  position: relative;
  display: inline-flex;
  width: 168px;
  flex-shrink: 0;
  border: none;
  background: var(--card-2);
  border-radius: 999px;
  padding: 3px;
  cursor: pointer;
  box-shadow: inset 0 2px 4px rgba(120, 90, 70, 0.1);
}
.slide-toggle .st-opt {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  text-align: center;
  white-space: nowrap;
  transition: color 0.2s ease;
  min-height: 34px;
}
.slide-toggle .st-opt.on { color: #fff; }
.slide-toggle .st-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  background: var(--accent);
  border-radius: 999px;
  box-shadow: 0 2px 0 var(--accent-edge), 0 3px 8px rgba(120, 90, 70, 0.18);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.slide-toggle[data-pos="1"] .st-thumb { transform: translateX(100%); }
.slide-toggle:active .st-thumb { filter: brightness(0.96); }

.avatar-edit { display: flex; align-items: center; gap: 14px; }
.avatar-edit .child-avatar { width: 72px; height: 72px; }
.invite-url {
  font-size: 12px;
  word-break: break-all;
  background: var(--card-2);
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--ink-soft);
  margin: 8px 0;
}
.section-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-soft);
  margin: 20px 4px 8px;
}

/* ============================================================
   下部タブ
   ============================================================ */
#tabbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 460px;
  display: flex;
  background: var(--tab-bg);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 30;
}
#tabbar[hidden] { display: none; }
#tabbar button {
  flex: 1;
  border: none;
  background: transparent;
  padding: 7px 4px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
  min-height: 60px;
}
#tabbar button .ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 28px;
  border-radius: 999px;
  transition: background 0.2s ease, transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#tabbar button.on { color: var(--feed-ink); }
#tabbar button.on .ico {
  background: var(--feed);
  transform: translateY(-1px);
}
#tabbar button:active .ico { transform: scale(0.9); }

/* ============================================================
   トースト / Undo
   ============================================================ */
#toast-root {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom) + 86px);
  width: calc(100% - 32px);
  max-width: 420px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--ink);
  color: var(--bg);
  border-radius: 18px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: var(--soft-shadow);
  font-weight: 700;
  font-size: 14px;
  pointer-events: auto;
  animation: toast-in 0.25s ease;
}
:root[data-theme="dark"] .toast { background: #3C3A5C; color: var(--ink); }
.toast .undo {
  border: none;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  padding: 7px 16px;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
  min-height: 40px;
  box-shadow: 0 2px 0 var(--accent-edge);
}
.toast .undo:active { transform: translateY(2px); box-shadow: none; }
.toast.out { animation: toast-out 0.25s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(14px); } }

/* ============================================================
   モーダル（ボトムシート）
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 70;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.modal-overlay.show { opacity: 1; }
.modal-sheet {
  background: var(--card);
  width: 100%;
  max-width: 460px;
  border-radius: 28px 28px 0 0;
  padding: 20px 20px calc(env(safe-area-inset-bottom) + 20px);
  box-shadow: var(--soft-shadow);
  transform: translateY(100%);
  transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
  max-height: 92vh;
  overflow-y: auto;
}
.modal-overlay.show .modal-sheet { transform: none; }
.modal-sheet h2 {
  margin: 4px 0 16px;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
}
.modal-grip {
  width: 40px;
  height: 4px;
  border-radius: 4px;
  background: var(--line);
  margin: 0 auto 12px;
}

/* 量入力 */
.amount-display {
  text-align: center;
  font-size: 44px;
  font-weight: 800;
  color: var(--feed-ink);
  margin: 6px 0;
  font-variant-numeric: tabular-nums;
}
.amount-display small { font-size: 20px; color: var(--ink-soft); }
.amount-btns { display: flex; gap: 8px; justify-content: center; margin: 8px 0 16px; }
.amount-btns button {
  flex: 1;
  border: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 60%),
    var(--card-2);
  color: var(--ink);
  border-radius: 16px;
  padding: 12px 4px;
  font-weight: 800;
  font-size: 15px;
  min-height: 48px;
  box-shadow: 0 3px 0 var(--line), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.14s ease;
}
.amount-btns button:active { transform: translateY(3px); box-shadow: 0 0 0 var(--line); }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.chip {
  border: 2px solid var(--line);
  background: var(--bg);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
  font-size: 14px;
  min-height: 44px;
  transition: transform 0.14s ease;
}
.chip:active { transform: scale(0.95); }
.chip.on { border-color: var(--accent); background: var(--accent); color: #fff; box-shadow: 0 2px 0 var(--accent-edge); }

.modal-actions { margin-top: 8px; display: flex; flex-direction: column; gap: 10px; }

/* ---- 認証（login / setup / invite） ---- */
.auth-wrap { padding-top: 24px; }
.auth-logo { text-align: center; margin-bottom: 8px; }
.auth-logo img { width: 92px; height: 92px; border-radius: 26px; box-shadow: var(--soft-shadow); }
.auth-logo .app-name { font-size: 22px; font-weight: 800; margin-top: 10px; }
.auth-logo .tagline { font-size: 13px; color: var(--ink-soft); font-weight: 700; }
.auth-card { margin-top: 16px; }
.auth-switch { text-align: center; margin-top: 14px; }
.step-dots { display: flex; gap: 6px; justify-content: center; margin: 4px 0 16px; }
.step-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.step-dots span.on { background: var(--accent); width: 22px; border-radius: 999px; }
.form-error {
  background: color-mix(in srgb, var(--danger) 18%, transparent);
  color: var(--danger);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
  text-align: center;
}
.invite-hello {
  text-align: center;
  background: var(--feed);
  color: var(--feed-ink);
  border-radius: 20px;
  padding: 14px;
  font-weight: 700;
  margin-bottom: 14px;
}
.invite-hello b { font-size: 18px; }

/* アクセシビリティ: モーション控えめ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============================================================
   印刷（日記 + 記録データ表だけをA4に）
   ============================================================ */
@media print {
  :root, :root[data-theme="dark"] {
    --ink: #222; --ink-soft: #555; --card: #fff; --card-2: #f6f6f6; --line: #ddd;
    --bg: #fff;
    color-scheme: light;
  }
  html, body { background: #fff !important; color: #222 !important; }
  #tabbar, #offline-banner, #toast-root, .modal-overlay { display: none !important; }
  .app-header, .mini-summary, .bubble, .nav-arrow, .print-btn,
  .child-head, .feed-row, .rec-grid { display: none !important; }

  #app { max-width: 100%; box-shadow: none; background: #fff; }
  #screen { padding: 0 !important; }
  body.has-tabbar #screen { padding-bottom: 0 !important; }

  .date-nav { justify-content: center; margin-bottom: 10px; }
  .date-label { color: #222 !important; font-size: 18px; }

  .diary-card {
    box-shadow: none !important;
    border: 2px solid #f0a6b8 !important;
    break-inside: avoid;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .diary-head { background: #ffe3ea !important; color: #8f4d5c !important; }
  .diary-paper {
    background-color: #fff !important;
    color: #222 !important;
    border-left: 4px solid #f4b9c6 !important;
    background-image: repeating-linear-gradient(transparent, transparent 29px, #e4dcd4 29px, #e4dcd4 30px) !important;
  }
  .polaroid {
    box-shadow: none;
    border: 1px solid #ddd;
    break-inside: avoid;
  }
  .who-badge {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .who-badge.mama { background: #F09CB5 !important; color: #fff !important; }
  .who-badge.papa { background: #85C3E8 !important; color: #fff !important; }
  .diary-open { color: #8f4d5c !important; }
  .diary-empty, .tl-text { color: #222 !important; }
  .tl::before { background: #ddd !important; }
  .tl-when b { color: #8f4d5c !important; }
  .tl-when small { color: #777 !important; }
  .tl-dot {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    border-color: #fff !important;
  }
  .diary-close { color: #6a55a0 !important; }
  .tl-memo {
    background: #FFF8DE !important;
    border-color: #E4D69E !important;
    box-shadow: none;
    break-inside: avoid;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .tl-memo .memo-body { color: #6b5426 !important; }
  .tl-memo .memo-pen { color: #b09443 !important; }
  .pol-change { display: none !important; }

  .rec-data-head { color: #333 !important; }
  .rec-table-scroll { overflow: visible !important; box-shadow: none; }
  .rec-table { border: 1px solid #ccc; color: #111 !important; }
  .rec-table th { background: #f2f2f2 !important; color: #333 !important; }
  .rec-table td { border-top: 1px solid #ddd; color: #111 !important; }
  .rec-table tbody tr { break-inside: avoid; }

  @page { size: A4; margin: 14mm; }
}

/* ============================================================
   設定: アプリについて(規約リンク)
   ============================================================ */
.legal-links { padding: 4px 16px; }
.legal-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
}
.legal-link:last-child { border-bottom: none; }
.legal-link .ic { color: var(--ink-soft); }
.legal-link:active { opacity: 0.6; }

/* ============================================================
   購入画面(ペイウォール)
   ============================================================ */
.paywall { padding-top: 20px; }
.pw-card { margin-top: 14px; }
.pw-features { list-style: none; margin: 4px 0 14px; padding: 0; }
.pw-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 2px;
  font-size: 14px;
  font-weight: 700;
}
.pw-features .ic { color: var(--feed-ink); flex-shrink: 0; }
.pw-plans { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.pw-loading { font-size: 13px; color: var(--ink-soft); text-align: center; font-weight: 700; }
.pw-plan {
  border: 2.5px solid var(--line);
  background: var(--bg);
  border-radius: 18px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 800;
  color: var(--ink);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.pw-plan:active { transform: scale(0.98); }
.pw-plan.on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
  box-shadow: 0 3px 0 color-mix(in srgb, var(--accent-edge) 45%, transparent);
}
.pw-plan-name { font-size: 14px; text-align: left; }
.pw-plan-name em {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  color: var(--feed-ink);
  margin-top: 2px;
}
.pw-plan-price { font-size: 18px; color: var(--feed-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pw-plan-price small { font-size: 11px; color: var(--ink-soft); }
.pw-note { font-size: 11px; color: var(--ink-soft); line-height: 1.7; margin: 10px 2px 0; }
.pw-sub { text-align: center; margin-top: 14px; display: flex; flex-direction: column; gap: 2px; }
.pw-legal { margin-top: 8px; font-size: 12px; }
.pw-legal a { color: var(--ink-soft); margin: 0 8px; }

/* 3人目以降の家族バッジ(ラベンダー) */
.who-badge.other { background: var(--other-badge, #ADA0DC); }

/* 罫線つき行の直後のボタンが線に密着しないよう余白を入れる(退会・ログアウト等) */
.card .settings-row + .btn { margin-top: 12px; }