*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html {
    background:
      radial-gradient(ellipse 70% 50% at 30% 15%, rgba(191, 219, 254, 0.18) 0%, transparent 65%),
      radial-gradient(ellipse 70% 50% at 80% 85%, rgba(254, 215, 170, 0.12) 0%, transparent 65%),
      #f7f7f5;
    background-attachment: fixed;
  }

  /* Accessibility utilities */
  .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--accent);
    color: #fff;
    padding: 8px 16px;
    z-index: 10000;
    text-decoration: none;
    border-radius: 0 0 8px 0;
  }
  .skip-link:focus {
    left: 0;
  }

  :root {
    --bg: #f7f7f5;
    --card: #ffffff;
    --border: #ececea;
    --border-strong: #d4d4d2;
    --text: #18181b;
    --text-2: #71717a;
    --text-3: #82828a;
    --accent: #1e40af;
    --accent-soft: #e0e7ff;
    --bar-default: #cbd5e1;
    --bar-current: #1e40af;
    --success: #16a34a;
    --danger: #dc2626;
    --booklog: #d97706;
    --booklog-soft: #fffbf5;
    --booklog-border: #fed7aa;
    --bookmeter: #059669;
    --bookmeter-soft: #f7fffb;
    --bookmeter-border: #a7f3d0;
    --milestone: #d97706;
  }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Hiragino Sans", "ヒラギノ角ゴ ProN", system-ui, sans-serif;
    background:
      radial-gradient(ellipse 70% 50% at 30% 15%, rgba(191, 219, 254, 0.18) 0%, transparent 65%),
      radial-gradient(ellipse 70% 50% at 80% 85%, rgba(254, 215, 170, 0.12) 0%, transparent 65%),
      var(--bg);
    background-attachment: fixed;
    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    padding: 16px 14px 80px;
    max-width: 580px;
    margin: 0 auto;
    font-size: 14px;
  }

  /* Icon base */
  .icon {
    width: 18px; height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    flex-shrink: 0;
    display: block;
  }
  .icon-sm { width: 14px; height: 14px; }
  .icon-lg { width: 22px; height: 22px; }

  /* Header */
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 8px 4px 20px;
  }
  .header h1 {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
  }
  .app-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    background: transparent;
    border: none;
    padding: 4px 6px;
    margin: -4px -6px;
    border-radius: 8px;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease;
  }
  .app-brand:hover {
    background: var(--bg);
  }
  .app-brand:active {
    transform: scale(0.97);
  }
  .header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .app-icon {
    flex-shrink: 0;
    display: block;
    color: var(--text);
    shape-rendering: crispEdges;
    transform-origin: bottom center;
  }
  .app-icon.is-bouncing {
    animation: appIconBounce 0.6s ease-out;
  }
  @keyframes appIconBounce {
    0%, 100% { transform: translateY(0); }
    35% { transform: translateY(-4px); }
    70% { transform: translateY(-1px); }
  }
  .icon-btn {
    width: 36px; height: 36px;
    min-width: 36px; min-height: 36px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.4) 100%);
    border: 1px solid rgba(255, 255, 255, 0.75);
    cursor: pointer;
    color: var(--text-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 -1px 0 rgba(0, 0, 0, 0.04),
      0 1px 2px rgba(0, 0, 0, 0.04);
    transition: background 0.15s, transform 0.12s, color 0.15s;
  }
  .icon-btn:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.58) 100%);
    color: var(--text);
  }
  .icon-btn:active { transform: scale(0.96); }

  /* Clerk UserButton コンテナ: icon-btn と同じガラス調（Issue #162） */
  #auth-user-button {
    width: 36px; height: 36px; min-width: 36px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.4) 100%);
    border: 1px solid rgba(255,255,255,0.75);
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.95),
      inset 0 -1px 0 rgba(0,0,0,0.04),
      0 1px 3px rgba(0,0,0,0.06);
    overflow: hidden;
    cursor: pointer;
  }
  #auth-user-button:active { transform: scale(0.96); }
  #auth-user-button button:focus,
  #auth-user-button button:focus-visible { outline: none; box-shadow: none; }

  /* Card */
  .card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.5) 100%);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 -1px 0 rgba(0, 0, 0, 0.04),
      0 2px 8px rgba(0, 0, 0, 0.05),
      0 1px 2px rgba(0, 0, 0, 0.03);
  }
  /* 読書人生タブのグレー文字をやや濃く（ガラス背景に対する可読性 UP） */
  #tab-life {
    --text-2: #52525b;
    --text-3: #6b7280;
  }
  /* 読書人生タブの全カードを stream の上に持ち上げる
     → 文字 / グラフは常にカードの中（最前面）、stream は半透明カード越しに後ろで流れる */
  #tab-life .card,
  #tab-life .life-stat-card {
    position: relative;
    z-index: 2;
  }
  /* 各カードの背景は吹き出しに近いガラステイスト（書影モザイクは不透明維持で除外） */
  #tab-life .card:not(.life-mosaic-card),
  #tab-life .life-stat-card {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 -1px 0 rgba(255, 255, 255, 0.4),
      0 6px 20px rgba(0, 0, 0, 0.08);
  }

  .section-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 14px;
  }

  /* Stats hero - 今月をメイン */
  .hero-month-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
  }
  .hero-single {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
  }
  .hero-main {
    display: flex;
    align-items: baseline;
    gap: 4px;
  }
  .hero-single .hero-num {
    font-size: 56px;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.0;
    color: var(--text);
    font-variant-numeric: tabular-nums;
  }
  .hero-single .hero-unit {
    font-size: 14px;
    color: var(--text-2);
    margin-left: 4px;
    font-weight: 500;
  }
  .hero-aside {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    box-shadow:
      0 1px 2px rgba(30, 64, 175, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.6);
    font-size: 12px;
    font-weight: 600;
    color: #1e3a8a;
    white-space: nowrap;
    margin-bottom: 6px;
  }
  .hero-aside-num {
    font-size: 14px;
    font-weight: 800;
    color: #1e3a8a;
    font-variant-numeric: tabular-nums;
    min-width: 2ch;
    display: inline-block;
  }
  .hero-item .hero-sub {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 6px;
  }

  /* 0 冊状態のときだけ表示する、最初の一歩のヒント */
  .hero-zero-hint {
    font-size: 12px;
    color: var(--text-2);
    line-height: 1.6;
    margin: 6px 0 14px;
  }
  .hero-zero-hint[hidden] { display: none; }

  .mini-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }
  .mini-stat {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.32) 100%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 -1px 0 rgba(0, 0, 0, 0.04),
      0 1px 2px rgba(0, 0, 0, 0.04);
  }
  .mini-stat-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .mini-stat-row {
    display: flex;
    align-items: baseline;
    gap: 2px;
  }
  .mini-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .mini-stat-unit {
    font-size: 11px;
    color: var(--text-2);
    font-weight: 500;
  }

  .indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    padding: 12px 14px;
    background: var(--bg);
    border-radius: 12px;
    font-size: 12px;
    color: var(--text-2);
    line-height: 1.5;
  }
  .indicator-icon {
    flex-shrink: 0;
    color: var(--milestone);
  }
  .indicator-icon.flame { color: #ea580c; }
  .indicator strong { color: var(--text); font-weight: 600; }

  /* Chart */
  .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
  }
  .chart-toggle {
    display: inline-flex;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.32) 100%);
    padding: 3px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 -1px 0 rgba(0, 0, 0, 0.04),
      0 1px 2px rgba(0, 0, 0, 0.04);
  }
  .toggle-btn {
    background: transparent;
    border: none;
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 7px;
    cursor: pointer;
    color: var(--text-2);
    font-weight: 500;
    font-family: inherit;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
  }
  .toggle-btn.active {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.72) 100%);
    color: var(--text);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 1),
      inset 0 -1px 0 rgba(0, 0, 0, 0.05),
      0 1px 3px rgba(0, 0, 0, 0.08);
  }
  .chart-svg {
    width: 100%;
    height: auto;
    display: block;
  }
  .chart-empty {
    padding: 32px 16px;
    color: var(--text-3);
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
  }
  .chart-legend {
    display: flex;
    gap: 14px;
    justify-content: center;
    margin-top: 12px;
    font-size: 11px;
    color: var(--text-2);
  }
  .legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
  }
  .legend-dot.default { background: var(--bar-default); }
  .legend-dot.current { background: var(--bar-current); }

  /* Form */
  .input-group { display: flex; gap: 8px; }
  .input-group input,
  .input-group textarea {
    flex: 1;
    padding: 12px 14px;
    font-size: 15px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--card);
    color: var(--text);
    font-family: inherit;
  }
  .input-group textarea {
    resize: none;
    min-height: 46px;
    height: 46px;
    line-height: 1.4;
    overflow-y: auto;
    /* 1 行表示でも内部スクロールで複数行コピーを保持できる */
  }
  .input-group input:focus,
  .input-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
  }
  .input-group input::placeholder,
  .input-group textarea::placeholder { color: #a1a1aa; }
  .input-group-textarea {
    align-items: center;
  }
  /* Issue #102: 入力をワンタップでクリアする「×」ボタン用ラッパ */
  .input-clearable-wrap {
    flex: 1;
    position: relative;
    display: flex;
    min-width: 0;
  }
  .input-clearable-wrap textarea,
  .input-clearable-wrap input {
    flex: 1;
    /* クリアボタン分の余白を確保（textarea 内のテキストが × アイコンに重ならないように） */
    padding-right: 36px;
  }
  .input-clear-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    background: rgba(0, 0, 0, 0.06);
    border: none;
    border-radius: 50%;
    color: var(--text-3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    /* タップ判定を広げるための余白 */
    padding: 0;
  }
  .input-clear-btn:hover { background: rgba(0, 0, 0, 0.12); color: var(--text); }
  .input-clear-btn:active { transform: translateY(-50%) scale(0.92); }
  .input-clear-btn[hidden] { display: none; }
  .search-btn {
    width: 46px;
    height: 46px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(245, 245, 250, 0.78) 100%);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: background 0.15s, transform 0.12s;
  }
  @media (hover: hover) {
    .search-btn:hover {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(240, 240, 245, 0.86) 100%);
    }
  }
  .search-btn:active { transform: scale(0.96); }
  .search-btn:disabled { opacity: 0.4; cursor: not-allowed; }
  .input-hint {
    font-size: 10.5px;
    color: var(--text-3);
    margin-top: 8px;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .input-hint-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
  }
  .input-hint-label {
    flex-shrink: 0;
    padding: 1px 6px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    font-size: 9.5px;
    font-weight: 600;
    color: var(--text-2);
    letter-spacing: 0.02em;
  }
  .scan-btn {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    background: linear-gradient(180deg, rgba(40, 40, 45, 0.86) 0%, rgba(20, 20, 23, 0.92) 100%);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      inset 0 -1px 0 rgba(0, 0, 0, 0.3),
      0 2px 6px rgba(0, 0, 0, 0.18),
      0 1px 2px rgba(0, 0, 0, 0.08);
    transition: background 0.15s, transform 0.12s;
  }
  .scan-btn:hover {
    background: linear-gradient(180deg, rgba(50, 50, 55, 0.9) 0%, rgba(30, 30, 33, 0.94) 100%);
  }
  .scan-btn:active {
    transform: scale(0.96);
  }

  /* Book preview */
  .book-preview {
    display: none;
    gap: 12px;
    margin-top: 14px;
    padding: 14px;
    background: var(--bg);
    border-radius: 12px;
  }
  .book-preview.show { display: flex; }
  .book-cover {
    width: 60px;
    height: 90px;
    object-fit: cover;
    border-radius: 4px;
    background: var(--border);
    flex-shrink: 0;
  }
  .book-info-text { flex: 1; min-width: 0; }
  .book-title { font-weight: 600; font-size: 14px; line-height: 1.4; margin-bottom: 4px; color: var(--text); }
  .book-author { font-size: 12px; color: var(--text-2); margin-bottom: 2px; }
  .book-publisher { font-size: 11px; color: var(--text-3); }
  .book-existing-hint {
    margin-top: 8px;
    color: var(--text-2);
    font-size: 11px;
    line-height: 1.4;
  }
  .badge-kindle {
    display: inline-block;
    padding: 1px 6px;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 4px;
    font-size: 10px;
    margin-left: 6px;
    vertical-align: middle;
    font-weight: 600;
  }

  .info-line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 12px;
    background: var(--bg);
    border-radius: 10px;
    font-size: 12px;
    color: var(--text-2);
    line-height: 1.5;
  }
  .info-line .icon { color: var(--text-3); margin-top: 2px; }
  .info-line-top { margin-top: 0; margin-bottom: 12px; }

  .actions {
    display: grid;
    gap: 8px;
    margin-top: 16px;
  }
  .btn {
    width: 100%;
    padding: 13px 16px;
    font-size: 14px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
  }
  .btn:active { transform: scale(0.98); }
  .btn-primary {
    background: linear-gradient(180deg, rgba(40, 40, 45, 0.86) 0%, rgba(20, 20, 23, 0.92) 100%);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      inset 0 -1px 0 rgba(0, 0, 0, 0.3),
      0 2px 6px rgba(0, 0, 0, 0.18),
      0 1px 2px rgba(0, 0, 0, 0.08);
  }
  @media (hover: hover) {
    .btn-primary:hover {
      background: linear-gradient(180deg, rgba(50, 50, 55, 0.9) 0%, rgba(30, 30, 33, 0.94) 100%);
    }
  }
  .btn-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .btn-row-3 {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .btn-row-3 .btn {
    white-space: nowrap;
    padding-left: 8px;
    padding-right: 8px;
  }
  .btn-secondary.a {
    background: linear-gradient(180deg, rgba(35, 47, 62, 0.12) 0%, rgba(35, 47, 62, 0.22) 100%);
    color: #232F3E;
    font-weight: 600;
    border: 1px solid rgba(35, 47, 62, 0.28);
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.7),
      inset 0 -1px 0 rgba(0, 0, 0, 0.06),
      0 1px 3px rgba(0, 0, 0, 0.06);
  }
  @media (hover: hover) {
    .btn-secondary.a:hover {
      background: linear-gradient(180deg, rgba(35, 47, 62, 0.18) 0%, rgba(35, 47, 62, 0.3) 100%);
    }
  }
  .btn-secondary {
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border-strong);
  }
  @media (hover: hover) { .btn-secondary:hover { background: var(--bg); } }
  .btn-secondary.b {
    background: linear-gradient(180deg, rgba(217, 119, 6, 0.12) 0%, rgba(217, 119, 6, 0.20) 100%);
    color: var(--booklog);
    border: 1px solid rgba(254, 215, 170, 0.7);
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.04);
  }
  @media (hover: hover) {
    .btn-secondary.b:hover {
      background: linear-gradient(180deg, rgba(217, 119, 6, 0.18) 0%, rgba(217, 119, 6, 0.28) 100%);
    }
  }
  .btn-secondary.m {
    background: linear-gradient(180deg, rgba(5, 150, 105, 0.10) 0%, rgba(5, 150, 105, 0.18) 100%);
    color: var(--bookmeter);
    border: 1px solid rgba(167, 243, 208, 0.7);
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.04);
  }
  @media (hover: hover) {
    .btn-secondary.m:hover {
      background: linear-gradient(180deg, rgba(5, 150, 105, 0.16) 0%, rgba(5, 150, 105, 0.24) 100%);
    }
  }

  /* History */
  .history-list-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.5) 100%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 16px;
    padding: 0 16px;
    overflow: hidden;
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 -1px 0 rgba(0, 0, 0, 0.04),
      0 2px 8px rgba(0, 0, 0, 0.05);
  }
  .history-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
  .history-item:last-child { border-bottom: none; }
  .history-item.uncounted .history-title,
  .history-item.uncounted .history-cover { opacity: 0.6; }
  .badge-uncounted {
    background: #f1f5f9;
    color: #64748b;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    border: 1px solid rgba(0, 0, 0, 0.06);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }
  .badge-uncounted:hover {
    background: #e0e7ff;
    color: var(--accent);
    border-color: rgba(30, 64, 175, 0.25);
  }
  .badge-uncounted:active { transform: scale(0.97); }
  .badge-uncounted:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  /* 履歴行: 読了 / 読みたい の種別バッジ */
  .history-kind {
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    flex-shrink: 0;
  }
  .history-kind.is-read {
    background: rgba(30, 64, 175, 0.08);
    color: var(--accent);
    border-color: rgba(30, 64, 175, 0.18);
  }
  .history-kind.is-wishlist {
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.96) 0%, rgba(219, 234, 254, 0.92) 100%);
    color: #1d4ed8;
    border-color: rgba(59, 130, 246, 0.4);
  }
  .history-favorite-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: #b45309;
  }
  .history-favorite-mark svg {
    width: 12px;
    height: 12px;
    fill: #facc15;
    stroke: #b45309;
    stroke-width: 1.4;
    stroke-linejoin: round;
  }
  .history-item.is-wishlist .history-cover {
    box-shadow: 0 0 0 1.5px rgba(59, 130, 246, 0.18);
  }
  .history-cover {
    width: 32px;
    height: 48px;
    object-fit: cover;
    border-radius: 3px;
    background: var(--border);
    flex-shrink: 0;
  }
  .history-text { flex: 1; min-width: 0; }
  .history-title {
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
  }
  .history-meta {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 3px;
    display: flex;
    gap: 6px;
    row-gap: 4px;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
  }
  .history-tail-note {
    color: var(--text-3);
    font-size: 11px;
    text-align: center;
    padding: 12px 16px;
    line-height: 1.5;
  }
  .service-tags {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
  }
  .service-tag {
    width: 22px;
    height: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.35) 100%);
    color: var(--text-3);
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(12px) saturate(170%);
    -webkit-backdrop-filter: blur(12px) saturate(170%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -1px 0 rgba(0, 0, 0, 0.04);
  }
  .service-tag.b.active {
    background: linear-gradient(180deg, rgba(217, 119, 6, 0.55) 0%, rgba(217, 119, 6, 0.78) 100%);
    color: white;
    border-color: rgba(254, 215, 170, 0.85);
    text-shadow: 0 1px 1px rgba(120, 53, 15, 0.35);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.4),
      inset 0 -1px 0 rgba(120, 53, 15, 0.18),
      0 1px 2px rgba(217, 119, 6, 0.18);
  }
  .service-tag.m.active {
    background: linear-gradient(180deg, rgba(5, 150, 105, 0.55) 0%, rgba(5, 150, 105, 0.78) 100%);
    color: white;
    border-color: rgba(167, 243, 208, 0.85);
    text-shadow: 0 1px 1px rgba(6, 78, 59, 0.35);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.4),
      inset 0 -1px 0 rgba(6, 78, 59, 0.18),
      0 1px 2px rgba(5, 150, 105, 0.18);
  }
  .delete-btn {
    width: 28px; height: 28px;
    min-width: 44px; min-height: 44px;
    background: transparent;
    border: none;
    color: var(--text-3);
    cursor: pointer;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    transition: all 0.15s;
    flex-shrink: 0;
    margin-left: 4px;
  }
  .delete-btn:hover {
    opacity: 1;
    background: #fef2f2;
    color: var(--danger);
  }
  .empty {
    text-align: center;
    color: var(--text-3);
    font-size: 13px;
    padding: 24px 0;
  }

  /* Settings panel (CSV import) */
  .csv-import-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    font-weight: 500;
    transition: background 0.15s, border-color 0.15s;
  }
  .csv-import-btn:hover { background: var(--border); }
  .import-status {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 10px;
    line-height: 1.5;
  }
  .import-status.success { color: var(--success); }
  .import-status.error { color: var(--danger); }
  /* demo 環境では書き出し/取り込みボタンを無効化 */
  body.is-demo-context .csv-import-btn {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
  }
  .settings-demo-notice {
    font-size: 12px;
    color: var(--text-3);
    padding: 8px 10px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    margin: 8px 0 12px;
    line-height: 1.5;
  }
  .sync-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .sync-buttons .csv-import-btn {
    justify-content: center;
    padding: 11px 10px;
    font-size: 12px;
  }
  .btn-danger {
    background: var(--danger);
    color: #fff;
    border: none;
    padding: 12px 16px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    margin-top: 16px;
    width: 100%;
    transition: transform 0.1s ease, opacity 0.15s ease;
  }
  .btn-danger:hover { opacity: 0.92; }
  .btn-danger:active { transform: scale(0.98); }

  /* FAB (Floating Action Button) — glassmorphism */
  .fab {
    position: fixed;
    right: 16px;
    bottom: calc(env(safe-area-inset-bottom, 0) + 64px);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(41, 80, 192, 0.3) 0%, rgba(30, 64, 175, 0.3) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 95;
    box-shadow:
      0 4px 12px rgba(0, 0, 0, 0.1),
      0 1px 3px rgba(0, 0, 0, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.55),
      inset 0 -1px 0 rgba(255, 255, 255, 0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .fab:active {
    transform: scale(0.94);
    box-shadow:
      0 2px 6px rgba(0, 0, 0, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.55),
      inset 0 -1px 0 rgba(255, 255, 255, 0.18);
  }
  @media (hover: hover) {
    .fab:hover {
      transform: translateY(-1px);
      box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.12),
        0 1px 3px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(255, 255, 255, 0.18);
    }
  }
  .fab-icon { width: 26px; height: 26px; display: block; }
  .register-sheet.open ~ .fab,
  .scanner-modal.open ~ .fab {
    /* keep visible but lower priority — sheet/scanner cover anyway */
  }

  /* Register Sheet — 中央モーダル方式（モバイル / PC 共通）。
     #200 → #210 → #214 → #216 でボトムシート + padding + visualViewport を順に試したが、
     Android の OS 由来 chrome（URL バー / システムナビ / キーボード）と viewport の関係に
     ハマり続けたため、根本対処として「viewport 端に触れない中央モーダル」に刷新する（#218）。
     viewport 端から離れるので、URL バーや bottom-nav の被りという問題が構造的に発生しない。 */
  .register-sheet {
    position: fixed;
    inset: 0;
    z-index: 400;
    pointer-events: none;
    display: flex;
    /* #230: 「本を登録」画面は画面全体を覆う全画面シートにする。
       端まで覆うことで Android の URL バー / システムナビ / キーボードとの
       被り問題が構造的に消える（safe-area は .register-sheet-content の内側で確保）。 */
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
  }
  .register-sheet.open { pointer-events: auto; }
  .register-sheet-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.25s ease;
  }
  .register-sheet.open .register-sheet-overlay {
    background: rgba(0, 0, 0, 0.45);
  }
  .register-sheet-content {
    position: relative;
    /* #230: 端から端まで覆う全画面シート（角丸・枠なし） */
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.97);
    border: none;
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border-radius: 0;
    overflow: hidden;
    /* #220: open/close は控えめなフェードのみに統一（全画面でも踏襲）。 */
    opacity: 0;
    transition: opacity 0.16s ease-out;
  }
  .register-sheet.open .register-sheet-content {
    opacity: 1;
  }
  .register-sheet-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 全画面化に伴い、ノッチ / ステータスバーを避けるため safe-area 分を上に確保 */
    padding: max(env(safe-area-inset-top, 0px), 12px) 16px 12px;
    background: transparent;
  }
  /* スクロール可能な本体エリア。flex:1 で残りスペースを埋める。
     min-height:0 は flex item の overflow 抑止に必須（無いと自然サイズで決まり overflow しない）。 */
  .register-sheet-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 16px 16px;
    -webkit-overflow-scrolling: touch;
  }
  .register-sheet-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
  }
  .register-sheet-close:hover { background: var(--bg); color: var(--text); }
  .register-sheet-close:active { background: var(--border); }

  /* Detail Sheet (book detail popup) */
  .detail-sheet {
    position: fixed;
    inset: 0;
    z-index: 400;
    pointer-events: none;
  }
  .detail-sheet.open { pointer-events: auto; }
  .detail-sheet.above-overlay { z-index: 1200; }
  .detail-sheet-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.25s ease;
  }
  .detail-sheet.open .detail-sheet-overlay {
    background: rgba(0, 0, 0, 0.4);
  }
  .detail-sheet-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.78) 100%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-bottom: none;
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border-radius: 20px 20px 0 0;
    max-height: 92vh;
    overflow-y: auto;
    padding: 12px 20px calc(env(safe-area-inset-bottom, 0) + 24px);
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow:
      0 -4px 24px rgba(0, 0, 0, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.95);
  }
  .detail-sheet.open .detail-sheet-content { transform: translateY(0); }
  .detail-sheet-handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-strong);
    margin: 0 auto 14px;
  }
  .detail-sheet-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
  }
  .detail-sheet-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
  }
  .detail-sheet-close:hover { background: var(--bg); color: var(--text); }
  .detail-book {
    display: flex;
    gap: 14px;
    margin-bottom: 18px;
  }
  .detail-cover, .detail-cover-fallback {
    width: 124px;
    flex-shrink: 0;
    border-radius: 1px 3px 3px 1px;
    box-shadow: 2px 5px 9px rgba(60,30,0,0.26);
  }
  .detail-cover {
    /* #226 再修正: 画像はカバー本来の縦横比（=その本の判型）をマスターとし、変形させない。
       height:auto で画像固有の比率に従うので、帯（contain の余白）もトリミング（cover の切れ）も出ない。
       align-self:flex-start は重要：親 .detail-book は display:flex で、付けないと隣の
       テキスト列の高さに合わせて画像が縦に引き伸ばされ、比率が崩れる（#226 ご指摘の「変になる」）。 */
    height: auto;
    align-self: flex-start;
    display: block;
    background: #d8c8a8;
  }
  /* 保険: カバーが取得できない / Amazon の 1x1 ダミー画像など、判型として不自然な比率のときだけ
     一般的な書籍比率(2:3)の枠に収める（detail.js が画像サイズを見て付与）。 */
  .detail-cover.is-framed {
    aspect-ratio: 2 / 3;
    height: auto;
    object-fit: cover;
  }
  .detail-cover-fallback {
    /* 画像が無いフォールバックは寸法の手がかりが無いため、一般的な書籍の縦横比で確保する */
    aspect-ratio: 2 / 3;
    background: linear-gradient(135deg, #e8dcc4, #c9b896);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b4423;
    font-size: 11px;
    text-align: center;
    padding: 8px;
    word-break: break-all;
  }
  .detail-book-meta { flex: 1; min-width: 0; }
  .detail-book-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text);
    margin-bottom: 4px;
  }
  .detail-book-author {
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.4;
    margin-bottom: 2px;
  }
  .detail-book-publisher {
    font-size: 11px;
    color: var(--text-3);
    margin-bottom: 8px;
  }
  .detail-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11px;
    color: var(--text-3);
  }
  .detail-service-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11px;
    color: var(--text-3);
    margin-top: 6px;
  }
  .detail-service-row:empty { display: none; }
  .detail-meta-row .badge,
  .detail-service-row .badge {
    padding: 4px 11px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.58) 100%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
    color: var(--text);
    font-weight: 500;
  }
  .detail-meta-row .badge.b,
  .detail-service-row .badge.b {
    background: linear-gradient(180deg, rgba(217, 119, 6, 0.16) 0%, rgba(217, 119, 6, 0.28) 100%);
    color: var(--booklog);
    border-color: rgba(254, 215, 170, 0.7);
  }
  .detail-meta-row .badge.m,
  .detail-service-row .badge.m {
    background: linear-gradient(180deg, rgba(5, 150, 105, 0.14) 0%, rgba(5, 150, 105, 0.24) 100%);
    color: var(--bookmeter);
    border-color: rgba(167, 243, 208, 0.7);
  }
  .detail-meta-row .badge-tap {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, transform 0.12s;
    font-family: inherit;
  }
  @media (hover: hover) {
    .detail-meta-row .badge-tap:hover {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.72) 100%);
    }
  }
  .detail-meta-row .badge-tap:active { transform: scale(0.96); }
  .badge-tap-icon {
    margin-left: 4px;
    opacity: 0.45;
    vertical-align: middle;
  }
  /* 「読みたい本」バッジ（詳細シート） */
  .detail-meta-row .badge.badge-wantread {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.14) 0%, rgba(59, 130, 246, 0.26) 100%);
    color: #1d4ed8;
    border-color: rgba(59, 130, 246, 0.4);
    font-weight: 700;
  }
  /* 「積読」バッジ（詳細シート） */
  .detail-meta-row .badge.badge-owned {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.14) 0%, rgba(59, 130, 246, 0.26) 100%);
    color: #1d4ed8;
    border-color: rgba(59, 130, 246, 0.4);
    font-weight: 700;
  }
  /* 「読んでいる」バッジ（詳細シート） */
  .detail-meta-row .badge.badge-reading {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.14) 0%, rgba(59, 130, 246, 0.26) 100%);
    color: #1d4ed8;
    border-color: rgba(59, 130, 246, 0.4);
    font-weight: 700;
  }
  /* お気に入りトグル（詳細シート） */
  .detail-favorite-row {
    margin-top: 10px;
  }
  .detail-favorite-row:empty { display: none; }
  .detail-favorite-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.58) 100%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    color: var(--text-2);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 -1px 0 rgba(0, 0, 0, 0.04),
      0 1px 3px rgba(0, 0, 0, 0.06);
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s;
    -webkit-tap-highlight-color: transparent;
  }
  .detail-favorite-toggle:active { transform: scale(0.96); }
  .detail-favorite-toggle svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linejoin: round;
    transition: fill 0.15s, stroke 0.15s;
  }
  .detail-favorite-toggle.is-on {
    background: linear-gradient(180deg, rgba(254, 243, 199, 0.95) 0%, rgba(253, 230, 138, 0.78) 100%);
    color: #92400e;
    border-color: rgba(252, 211, 77, 0.85);
  }
  .detail-favorite-toggle.is-on svg {
    fill: #facc15;
    stroke: #b45309;
  }
  /* もう一度会いたいトグル（詳細シート） */
  .detail-reread-wish-row {
    margin-top: 6px;
  }
  .detail-reread-wish-row:empty { display: none; }
  .detail-reread-wish-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.58) 100%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    color: var(--text-2);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 -1px 0 rgba(0, 0, 0, 0.04),
      0 1px 3px rgba(0, 0, 0, 0.06);
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s;
    -webkit-tap-highlight-color: transparent;
  }
  .detail-reread-wish-toggle:active { transform: scale(0.96); }
  .detail-reread-wish-toggle svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    transition: fill 0.15s, stroke 0.15s;
  }
  .detail-reread-wish-toggle.is-on {
    background: linear-gradient(180deg, rgba(219, 234, 254, 0.95) 0%, rgba(191, 219, 254, 0.78) 100%);
    color: #1e40af;
    border-color: rgba(147, 197, 253, 0.85);
  }
  .detail-reread-wish-toggle.is-on svg {
    fill: #93c5fd;
    stroke: #1d4ed8;
  }
  /* wishlist 用アクション（読み終わった / 読みたいから外す）*/
  .detail-wishlist-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
  }
  .detail-finished-btn {
    background: linear-gradient(180deg, rgba(5, 150, 105, 0.92) 0%, rgba(4, 120, 87, 0.96) 100%);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-weight: 700;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      0 2px 6px rgba(5, 150, 105, 0.22);
  }
  @media (hover: hover) {
    .detail-finished-btn:hover {
      background: linear-gradient(180deg, rgba(6, 165, 115, 0.94) 0%, rgba(4, 130, 95, 0.98) 100%);
    }
  }
  .detail-remove-wantread-btn {
    font-size: 12px;
    padding: 10px;
    color: var(--text-3);
  }
  .wishlist-status-selector {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 4px;
  }
  .wishlist-status-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 13px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border-strong);
    background: var(--card);
    color: var(--text-2);
    font-family: inherit;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: background 0.15s ease, opacity 0.15s;
    box-sizing: border-box;
  }
  .wishlist-status-item:active { opacity: 0.65; }
  .wishlist-status-item.is-current {
    cursor: default;
    pointer-events: none;
    font-weight: 600;
  }
  .wishlist-status-item.is-current.is-reading {
    background: rgba(59, 130, 246, 0.18);
    border-color: rgba(59, 130, 246, 0.45);
    color: rgb(96, 165, 250);
  }
  .wishlist-status-item.is-current.is-owned {
    background: rgba(59, 130, 246, 0.18);
    border-color: rgba(59, 130, 246, 0.45);
    color: rgb(96, 165, 250);
  }
  .wishlist-status-item.is-current.is-want {
    background: rgba(59, 130, 246, 0.18);
    border-color: rgba(59, 130, 246, 0.45);
    color: rgb(96, 165, 250);
  }
  .wishlist-status-item.is-current.is-finished {
    background: rgba(5, 150, 105, 0.18);
    border-color: rgba(5, 150, 105, 0.45);
    color: rgb(52, 211, 153);
  }
  /* 読んだ本の「再読し終わった」ボタン（#242）: 読了系の緑を踏襲しつつ、押せる action として見せる */
  .wishlist-status-item.is-reread {
    background: rgba(5, 150, 105, 0.1);
    border-color: rgba(5, 150, 105, 0.4);
    color: #047857;
    font-weight: 700;
  }
  .wishlist-status-item.is-reread:active { opacity: 0.7; }
  .detail-id-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
  }
  .detail-id-row:empty { display: none; }
  .id-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.58) 100%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
    font: inherit;
    font-size: 11px;
    color: var(--text);
    font-weight: 500;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
    user-select: text;
    -webkit-tap-highlight-color: transparent;
  }
  .id-chip:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
  }
  .id-chip:active {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.4) 100%);
  }
  .id-chip-label {
    font-size: 10px;
    color: var(--text-2);
    letter-spacing: 0.04em;
    font-weight: 600;
    user-select: none;
  }
  .id-chip-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.01em;
  }
  .id-chip-icon {
    width: 11px;
    height: 11px;
    opacity: 0.55;
    flex-shrink: 0;
  }
  .id-chip.is-copied {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: rgba(191, 219, 254, 0.85);
  }
  .id-chip.is-copied .id-chip-label,
  .id-chip.is-copied .id-chip-icon {
    color: var(--accent);
    opacity: 1;
  }
  .detail-section-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    letter-spacing: 0.06em;
    margin-bottom: 8px;
  }
  .detail-summary {
    font-size: 13px;
    line-height: 1.7;
    color: var(--text);
    margin-bottom: 20px;
    white-space: pre-wrap;
    word-break: break-word;
  }
  .detail-summary.muted {
    color: var(--text-3);
    font-size: 12px;
  }
  .detail-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
  }

  /* === Wave 5: detail-sheet section (notes / same-author / edit) === */
  .detail-section-title {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
    letter-spacing: 0.06em;
  }

  /* Notes */
  .detail-notes-section {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
  .detail-note-text {
    width: 100%;
    background: var(--card);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 13px;
    color: var(--text);
    line-height: 1.6;
    resize: vertical;
    min-height: 64px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
  }
  .detail-note-text:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.15);
  }
  .detail-note-text::placeholder {
    color: var(--text-3);
  }
  .detail-note-counter {
    text-align: right;
    margin-top: 4px;
    font-size: 10px;
    color: var(--text-3);
    letter-spacing: 0.02em;
  }
  .detail-note-recommender-label {
    display: block;
    margin: 12px 0 4px;
    font-size: 11px;
    color: var(--text-2);
    letter-spacing: 0.02em;
  }
  .detail-note-recommender {
    width: 100%;
    background: var(--card);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 13px;
    color: var(--text);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
  }
  .detail-note-recommender:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.15);
  }
  .detail-note-status {
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-3);
    min-height: 14px;
  }
  .detail-note-status.is-saved {
    color: var(--accent);
  }

  /* Same author */
  .detail-same-author-section {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
  .detail-same-author-section[hidden] { display: none; }
  .detail-same-author-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .detail-same-author-row::-webkit-scrollbar { height: 4px; }
  .detail-same-author-row::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
  .detail-same-author-tile {
    flex: 0 0 auto;
    width: 56px;
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 0;
  }
  .detail-same-author-tile:active { transform: scale(0.96); }
  .detail-same-author-cover {
    width: 56px;
    height: 80px;
    background-size: cover;
    background-position: center;
    background-color: var(--accent-soft);
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
  }
  .detail-same-author-tile-title {
    margin-top: 4px;
    font-size: 10px;
    color: var(--text-3);
    line-height: 1.3;
    text-align: left;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .detail-same-author-note {
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-3);
  }

  /* === 控えめガラスチップ（セカンダリ・テキストリンク級ボタン共通） =============
     詳細シート「情報を編集」「読了日を変える」「この登録を取り消す」と
     登録シート「ISBN なしの本を追加」を一つの語彙に揃える utility class。
     サイズや配置は呼び出し側で width / flex / padding を上書きする。
     ===================================================================== */
  .subtle-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.22) 100%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    font-family: inherit;
    font-size: 12px;
    color: var(--text-3);
    cursor: pointer;
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.7),
      inset 0 -1px 0 rgba(0, 0, 0, 0.03),
      0 1px 2px rgba(0, 0, 0, 0.03);
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s;
    -webkit-tap-highlight-color: transparent;
  }
  .subtle-chip:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.4) 100%);
    color: var(--text-2);
  }
  .subtle-chip:active { transform: scale(0.98); }
  .subtle-chip:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  .subtle-chip-danger:hover {
    background: linear-gradient(180deg, rgba(254, 226, 226, 0.55) 0%, rgba(254, 202, 202, 0.32) 100%);
    color: var(--danger);
    border-color: rgba(252, 165, 165, 0.7);
  }

  /* Edit */
  .detail-sub-actions {
    margin-top: 36px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .detail-sub-action-btn {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    color: var(--text-3);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
  }
  .detail-sub-action-btn:active { opacity: 0.6; }
  .detail-edit-section {
    margin-top: 24px;
    padding-top: 0;
  }
  #detailSubActionsSlot .detail-sub-actions {
    margin-top: 8px;
    padding-top: 0;
    border-top: none;
  }
  .detail-edit-section.needs-separator {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  /* .detail-edit-btn — visual は .subtle-chip から、ここでは配置だけ */
  .detail-edit-btn {
    width: 100%;
    padding: 10px 14px;
  }
  .detail-edit-form { margin-top: 12px; }
  .detail-edit-form[hidden] { display: none; }
  .detail-edit-btn[hidden] { display: none; }
  .detail-edit-label {
    display: block;
    margin: 10px 0 4px;
    font-size: 11px;
    color: var(--text-2);
    letter-spacing: 0.02em;
  }
  .detail-edit-input {
    width: 100%;
    background: var(--card);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 13px;
    color: var(--text);
    outline: none;
    box-sizing: border-box;
  }
  .detail-edit-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.15);
  }
  .detail-edit-buttons {
    display: flex;
    gap: 8px;
    margin-top: 14px;
  }
  .detail-edit-buttons button {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--text-3);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: color 0.15s, transform 0.12s;
    -webkit-tap-highlight-color: transparent;
  }
  @media (hover: hover) {
    .detail-edit-buttons button:not(.primary):hover { color: var(--text-2); }
  }
  .detail-edit-buttons button.primary {
    background: linear-gradient(180deg, rgba(40, 40, 45, 0.86) 0%, rgba(20, 20, 23, 0.92) 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      inset 0 -1px 0 rgba(0, 0, 0, 0.3),
      0 2px 6px rgba(0, 0, 0, 0.18);
  }
  .detail-edit-buttons button:active { transform: scale(0.98); }

  /* 詳細シート: 情報を編集フォーム内の危険操作セクション（この登録を取り消す） */
  .detail-edit-danger-section {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .detail-edit-danger-section[hidden] { display: none; }
  .detail-edit-danger-section .subtle-chip {
    width: 100%;
    padding: 9px 14px;
  }

  /* Book card note icon */
  .book-card-cover-wrap {
    position: relative;
  }
  .book-card-note-icon {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  }
  /* 「読みたい本」バッジ（カード左上）*/
  .book-card-wantread-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    padding: 3px 8px;
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.96) 0%, rgba(219, 234, 254, 0.92) 100%);
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-radius: 6px;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(29, 78, 216, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  /* 「読みたい本」カード本体に薄いタグ感を出す */
  .book-card.is-wantread .book-card-cover-wrap {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18);
    border-radius: 6px;
  }
  /* 「積読」カードバッジ */
  .book-card-wantread-badge.is-owned {
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.96) 0%, rgba(219, 234, 254, 0.92) 100%);
    border-color: rgba(59, 130, 246, 0.45);
    color: #1d4ed8;
    box-shadow: 0 1px 3px rgba(29, 78, 216, 0.15);
  }
  /* 「読んでいる」カードバッジ */
  .book-card-wantread-badge.is-reading {
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.96) 0%, rgba(219, 234, 254, 0.92) 100%);
    border-color: rgba(59, 130, 246, 0.45);
    color: #1d4ed8;
    box-shadow: 0 1px 3px rgba(29, 78, 216, 0.15);
  }
  /* 「積読」カード cover wrap */
  .book-card.is-owned .book-card-cover-wrap {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.22);
    border-radius: 6px;
  }
  /* 「読んでいる」カード cover wrap */
  .book-card.is-reading .book-card-cover-wrap {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.22);
    border-radius: 6px;
  }
  /* 再読バッジ（右上ギリギリ、メモ帳マーク（右下）と上下で住み分け）*/
  .book-card-reread-icon {
    position: absolute;
    top: 3px;
    right: 3px;
    height: 24px;
    min-width: 24px;
    padding: 0 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.42) 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.95);
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--text);
    pointer-events: none;
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.98),
      inset 0 -1px 0 rgba(0, 0, 0, 0.04),
      0 2px 8px rgba(0, 0, 0, 0.1),
      0 1px 2px rgba(0, 0, 0, 0.06);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
    animation: rereadBadgePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
  .book-card-reread-icon svg {
    display: block;
    width: 13px;
    height: 13px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
  }
  .book-card-reread-num { letter-spacing: 0.02em; }
  @keyframes rereadBadgePop {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
  }
  /* 5回目以降も白ベース・黒文字で統一（is-many は意味的にだけ残す）*/
  @media (prefers-reduced-motion: reduce) {
    .book-card-reread-icon { animation: none; }
  }

  /* お気に入りバッジ（左上、再読バッジと住み分け）*/
  .book-card-favorite-icon {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    background: linear-gradient(180deg, rgba(254, 243, 199, 0.78) 0%, rgba(253, 230, 138, 0.62) 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.95);
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #b45309;
    pointer-events: none;
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.98),
      inset 0 -1px 0 rgba(0, 0, 0, 0.04),
      0 2px 8px rgba(217, 119, 6, 0.15),
      0 1px 2px rgba(0, 0, 0, 0.06);
    line-height: 1;
  }
  .book-card-favorite-icon svg {
    display: block;
    width: 13px;
    height: 13px;
    fill: #facc15;
    stroke: #b45309;
    stroke-width: 1.4;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 1px rgba(180, 83, 9, 0.25));
  }

  /* また読みたいバッジ（左下、しおり型・青系。詳細トグルの ON 状態と色を合わせる）#241 */
  .book-card-rereadwish-icon {
    position: absolute;
    bottom: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    background: linear-gradient(180deg, rgba(219, 234, 254, 0.92) 0%, rgba(191, 219, 254, 0.74) 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.95);
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1e40af;
    pointer-events: none;
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.98),
      inset 0 -1px 0 rgba(0, 0, 0, 0.04),
      0 2px 8px rgba(29, 78, 216, 0.15),
      0 1px 2px rgba(0, 0, 0, 0.06);
    line-height: 1;
  }
  .book-card-rereadwish-icon svg {
    display: block;
    width: 13px;
    height: 13px;
    fill: #93c5fd;
    stroke: #1d4ed8;
    stroke-width: 1.8;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 1px rgba(29, 78, 216, 0.25));
  }

  /* Bookshelf notes filter toggle */
  .bookshelf-notes-toggle {
    width: 32px;
    height: 32px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.42) 100%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    color: var(--text-2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, transform 0.12s, border-color 0.15s;
    position: relative;
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 -1px 0 rgba(0, 0, 0, 0.04),
      0 1px 2px rgba(0, 0, 0, 0.04);
  }
  /* hidden 属性で確実に隠す（display: inline-flex を上書き） */
  .bookshelf-notes-toggle[hidden] { display: none; }
  .bookshelf-notes-toggle::before {
    content: '';
    position: absolute;
    inset: -6px;
  }
  .bookshelf-notes-toggle:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.58) 100%);
    color: var(--text);
  }
  .bookshelf-notes-toggle:active { transform: scale(0.94); }
  .bookshelf-notes-toggle.is-on {
    background: linear-gradient(180deg, rgba(224, 231, 255, 0.85) 0%, rgba(191, 219, 254, 0.62) 100%);
    color: var(--accent);
    border-color: rgba(191, 219, 254, 0.95);
  }

  /* 登録追加ボタン（#225）: 4 択を 1 ボタン＋ピッカーに統合 */
  .register-add-btn {
    display: block;
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: linear-gradient(180deg, rgba(40, 40, 45, 0.86) 0%, rgba(20, 20, 23, 0.92) 100%);
    color: white;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      inset 0 -1px 0 rgba(0, 0, 0, 0.3),
      0 2px 6px rgba(0, 0, 0, 0.18);
    transition: opacity 0.15s;
    box-sizing: border-box;
  }
  .register-add-btn:active { opacity: 0.75; }
  /* ピッカーのモーダルボディはマージン不要（中央モーダル、app-modal ベース） */
  .register-type-picker-body { margin-bottom: 0; }

  /* 登録シートの追加ボタンエリア（#225: sticky は維持して画面下端に固定）*/
  .register-status-actions {
    margin-top: 16px;
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.96) 24%, rgba(255, 255, 255, 0.96) 100%);
    margin-left: -16px;
    margin-right: -16px;
    /* #230: 全画面化に伴い、下端のホームバー / システムナビを safe-area 分避ける */
    padding: 16px 16px max(env(safe-area-inset-bottom, 0px), 8px);
    z-index: 1;
  }
  /* 手動追加フォームの「戻る」リンク行（Issue #198）：
     ステータスセレクターの直下に控えめに配置する */
  .register-manual-cancel-row {
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }
  .register-manual-cancel-row .register-manual-cancel {
    padding: 10px 16px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--text-3);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  @media (hover: hover) {
    .register-manual-cancel-row .register-manual-cancel:hover { color: var(--text-2); }
  }

  /* Register sheet manual link + form */
  .register-main-form[hidden] { display: none; }
  .register-manual-link-row {
    text-align: center;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }
  /* 入力欄ヒントの直下に置くバリエーション（border-top なし、控えめ） */
  .register-manual-link-row-top {
    text-align: center;
    margin-top: 10px;
    padding-top: 0;
    border-top: none;
  }
  /* 検索結果ステータス・候補リストが空のときは余白を作らない */
  .register-search-status:empty {
    display: none;
    margin: 0;
    padding: 0;
  }
  .search-result-list:empty {
    display: none;
    margin: 0;
    padding: 0;
  }
  /* .register-manual-link — visual は .subtle-chip から、ここでは配置だけ */
  .register-manual-link {
    padding: 8px 14px;
  }

  /* 入力欄直下の目立つ「タイトル/読書メーターから探す」リンク */
  .register-search-cta-row {
    margin-top: 10px;
  }
  .register-search-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    background: linear-gradient(180deg, rgba(224, 231, 255, 0.85) 0%, rgba(191, 219, 254, 0.6) 100%);
    border: 1px solid rgba(191, 219, 254, 0.95);
    border-radius: 999px;
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 -1px 0 rgba(30, 64, 175, 0.06),
      0 1px 3px rgba(30, 64, 175, 0.06);
    transition: transform 0.12s, background 0.15s, box-shadow 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .register-search-cta:hover {
    background: linear-gradient(180deg, rgba(224, 231, 255, 1) 0%, rgba(191, 219, 254, 0.85) 100%);
  }
  .register-search-cta:active { transform: scale(0.97); }
  .register-search-cta svg { width: 14px; height: 14px; flex-shrink: 0; }
  .register-manual-form { padding: 8px 0; }
  .register-manual-form[hidden] { display: none; }
  .register-manual-title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
  }
  .register-manual-hint {
    margin: 0 0 14px;
    font-size: 12px;
    color: var(--text-3);
    line-height: 1.5;
  }
  .register-manual-label {
    display: block;
    margin: 10px 0 4px;
    font-size: 11px;
    color: var(--text-2);
    letter-spacing: 0.02em;
  }
  .register-manual-required {
    margin-left: 6px;
    color: var(--danger);
    font-size: 10px;
  }
  .register-manual-input {
    width: 100%;
    background: var(--card);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 13px;
    color: var(--text);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .register-manual-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.15);
  }
  /* 手動登録フォームの 3 ボタン縦並びレイアウト */
  .register-manual-buttons-stacked {
    flex-direction: column;
    gap: 6px;
  }
  .register-manual-buttons-stacked button {
    flex: none;
  }
  .register-manual-buttons {
    display: flex;
    gap: 8px;
    margin-top: 16px;
  }
  .register-manual-buttons button {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--text-3);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: color 0.15s, transform 0.12s;
    -webkit-tap-highlight-color: transparent;
  }
  @media (hover: hover) {
    .register-manual-buttons button:not(.primary):hover { color: var(--text-2); }
  }
  .register-manual-buttons button.primary {
    background: linear-gradient(180deg, rgba(40, 40, 45, 0.86) 0%, rgba(20, 20, 23, 0.92) 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      inset 0 -1px 0 rgba(0, 0, 0, 0.3),
      0 2px 6px rgba(0, 0, 0, 0.18);
  }
  .register-manual-buttons button:active { transform: scale(0.98); }

  /* Search form (タイトル / 読書メーターから探す) */
  .register-search-form { padding: 8px 0; }
  .register-search-form[hidden] { display: none; }
  .register-search-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 6px 0;
  }
  .register-search-hint {
    font-size: 11px;
    color: var(--text-3);
    margin: 0 0 12px 0;
    line-height: 1.5;
  }
  .register-search-input {
    width: 100%;
    min-height: 80px;
    padding: 11px 13px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.48) 100%);
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 -1px 0 rgba(0, 0, 0, 0.04),
      0 1px 2px rgba(0, 0, 0, 0.04);
    font-family: inherit;
    font-size: 13px;
    color: var(--text);
    resize: vertical;
    box-sizing: border-box;
    line-height: 1.5;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  }
  .register-search-input:focus {
    outline: none;
    border-color: rgba(191, 219, 254, 0.95);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      0 0 0 3px var(--accent-soft);
  }
  .register-search-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
  }
  .register-search-actions button {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--text-3);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s, transform 0.12s;
    -webkit-tap-highlight-color: transparent;
  }
  @media (hover: hover) {
    .register-search-actions button:not(.primary):hover { color: var(--text-2); }
  }
  .register-search-actions button.primary {
    background: linear-gradient(180deg, rgba(40, 40, 45, 0.86) 0%, rgba(20, 20, 23, 0.92) 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      inset 0 -1px 0 rgba(0, 0, 0, 0.3),
      0 2px 6px rgba(0, 0, 0, 0.18);
  }
  @media (hover: hover) {
    .register-search-actions button.primary:hover {
      background: linear-gradient(180deg, rgba(50, 50, 55, 0.9) 0%, rgba(30, 30, 33, 0.94) 100%);
    }
  }
  .register-search-actions button:active { transform: scale(0.98); }
  .register-search-actions button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
  }
  .register-search-status {
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-2);
    min-height: 18px;
  }
  .register-search-status.is-empty { color: var(--text-3); }
  .register-search-status .register-manual-link {
    margin-left: 6px;
    padding: 4px 10px;
    font-size: 11px;
    border-radius: 8px;
  }
  .search-result-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
  }
  .search-result-card {
    display: flex;
    gap: 10px;
    padding: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.68) 0%, rgba(255, 255, 255, 0.48) 100%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 10px;
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 -1px 0 rgba(0, 0, 0, 0.04),
      0 1px 2px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: inherit;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s;
    width: 100%;
    box-sizing: border-box;
  }
  .search-result-card:hover {
    background: linear-gradient(180deg, rgba(224, 231, 255, 0.7) 0%, rgba(191, 219, 254, 0.5) 100%);
    border-color: rgba(191, 219, 254, 0.95);
  }
  .search-result-card:active { transform: scale(0.99); }
  .search-back-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    padding: 6px 0 2px;
    color: var(--text-sub, #6b7280);
    font-size: 0.82rem;
    cursor: pointer;
    line-height: 1.4;
  }
  .search-back-btn[hidden] { display: none; }
  .search-back-btn:active { opacity: 0.6; }
  .search-result-cover {
    width: 64px;
    height: 90px;
    object-fit: cover;
    border-radius: 4px;
    background: var(--bg);
    flex-shrink: 0;
  }
  .search-result-cover-placeholder {
    width: 64px;
    height: 90px;
    border-radius: 4px;
    background: var(--bg);
    border: 1px dashed var(--border);
    flex-shrink: 0;
  }
  .search-result-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .search-result-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .search-result-author {
    font-size: 12px;
    color: var(--text-2);
  }
  .search-result-publisher {
    font-size: 11px;
    color: var(--text-3);
  }
  .search-result-isbn {
    font-size: 10px;
    color: var(--text-3);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    margin-top: 2px;
  }

  /* Hide FAB and lock background scroll when sheet is open */
  body.sheet-open .fab { opacity: 0; pointer-events: none; transform: scale(0.9); }
  body.sheet-open { overflow: hidden; }
  .fab { transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease; }

  /* 本棚タブ専用: 上下スクロールボタン（FAB の上に縦並びでフロート）*/
  .bookshelf-scroll-btn {
    position: fixed;
    right: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.42) 100%);
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    color: var(--text);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 94;
    box-shadow:
      0 3px 8px rgba(0, 0, 0, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 -1px 0 rgba(0, 0, 0, 0.04);
    transition: transform 0.15s ease, opacity 0.2s ease, box-shadow 0.15s ease;
  }
  .bookshelf-scroll-btn:active { transform: scale(0.9); }
  @media (hover: hover) {
    .bookshelf-scroll-btn:hover {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.58) 100%);
    }
  }
  .bookshelf-scroll-btn.down { bottom: calc(env(safe-area-inset-bottom, 0) + 128px); }
  .bookshelf-scroll-btn.up   { bottom: calc(env(safe-area-inset-bottom, 0) + 224px); }
  /* 読みたい本タブは月へ移動ボタンが非表示なので、間に空く隙間を埋めるよう up を詰める */
  body.is-bookshelf-active.is-bookshelf-wishlist .bookshelf-scroll-btn.up {
    bottom: calc(env(safe-area-inset-bottom, 0) + 176px);
  }
  body.is-bookshelf-active .bookshelf-scroll-btn { display: flex; }
  body.sheet-open .bookshelf-scroll-btn { opacity: 0; pointer-events: none; transform: scale(0.9); }

  /* Tabs */
  body { padding-bottom: 90px; }
  .tab-content { display: none; }
  .tab-content.active {
    display: block;
    animation: tabFadeIn 0.22s ease-out;
  }
  /* 読書人生タブはうさぎ入場アニメが演出を担うので、タブ自体のフェードインは無効化
     （座標計算のズレやリフレッシュ感を防止）*/
  #tab-life.tab-content.active {
    animation: none;
  }
  @keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }
  /* Chart bar grow-up animation (sequential) + ガラス質感 */
  .chart-bar {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: barGrow 0.32s cubic-bezier(0.34, 1.4, 0.64, 1) backwards;
    opacity: 0.78;
    stroke: rgba(255, 255, 255, 0.6);
    stroke-width: 0.8;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.06));
  }
  @keyframes barGrow {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
  }

  .undo-toast {
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0) + 80px);
    transform: translateX(-50%);
    background: rgba(24, 24, 27, 0.92);
    color: #fff;
    padding: 10px 16px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 800;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    font-size: 13px;
    transition: opacity 0.2s ease, transform 0.2s ease;
    opacity: 0;
    pointer-events: none;
    max-width: calc(100vw - 32px);
  }
  .undo-toast.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
  .undo-toast[hidden] { display: none; }
  .undo-toast-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .undo-toast-btn {
    background: transparent;
    border: none;
    color: #93c5fd;
    cursor: pointer;
    font-weight: 700;
    padding: 4px 8px;
    font-size: 13px;
    flex-shrink: 0;
  }
  .undo-toast-btn:hover { color: #bfdbfe; }

  .bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.04);
    display: flex;
    z-index: 300;
    padding: 3px 8px calc(env(safe-area-inset-bottom, 0) + 3px);
  }
  /* シート（登録 / 詳細）が開いている間は bottom-nav を非表示にする（Issue #210）。
     z-index 上はシートが上だが、Android Chrome では半透明ブラー越しに bottom-nav が
     透けて見えて「読みたい本」ボタンと被って見える現象があった。
     表示を構造的に止めることで完全に解消する。シートを閉じれば即時復帰する。 */
  body.sheet-open .bottom-nav { display: none; }
  /* ホームインジケーター領域を白で塗りつぶす */
  .bottom-nav::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: env(safe-area-inset-bottom, 0px);
    background: #ffffff;
    pointer-events: none;
  }
  .tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 5px 4px;
    font-size: 11px;
    font-family: inherit;
    border-radius: 8px;
    transition: color 0.15s;
  }
  .tab-btn.active { color: var(--accent); }
  .tab-btn:hover { color: var(--text-2); }
  .tab-btn.active:hover { color: var(--accent); }

  /* Settings screen (full-screen, slides in from right) */
  .settings-screen,
  .history-screen {
    position: fixed;
    inset: 0;
    background:
      radial-gradient(ellipse 70% 50% at 30% 15%, rgba(191, 219, 254, 0.2) 0%, transparent 65%),
      radial-gradient(ellipse 70% 50% at 80% 85%, rgba(254, 215, 170, 0.14) 0%, transparent 65%),
      var(--bg);
    z-index: 200;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
  }
  .settings-screen.open,
  .history-screen.open { transform: translateX(0); }
  .settings-header,
  .history-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: calc(env(safe-area-inset-top, 0) + 16px) 16px 0;
    margin: 0 0 20px;
  }
  .settings-back-btn,
  .history-back-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: -6px;
    transition: background 0.15s;
  }
  .settings-back-btn:hover,
  .history-back-btn:hover { background: rgba(30,64,175,0.06); }
  .settings-back-btn:active,
  .history-back-btn:active { background: rgba(30,64,175,0.12); }
  .screen-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--text);
    margin: 0;
  }
  .settings-body,
  .history-body {
    padding: 0 16px 40px;
    flex: 1;
  }
  .settings-section {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.52) 100%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 12px;
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 -1px 0 rgba(0, 0, 0, 0.04),
      0 2px 8px rgba(0, 0, 0, 0.04);
  }
  .settings-section:last-child { margin-bottom: 0; }
  .settings-section .section-label { margin-bottom: 12px; }

  .profile-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .profile-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .profile-label {
    font-size: 12px;
    color: var(--text-3);
    letter-spacing: 0.02em;
  }
  .profile-input {
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s, background 0.15s;
  }
  .profile-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--card);
  }
  .profile-status {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 2px;
    transition: color 0.2s;
  }
  .profile-status.is-saved {
    color: var(--accent);
  }

  .about-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    font-size: 13px;
  }
  .about-row + .about-row {
    border-top: 1px solid var(--border);
  }
  .about-key {
    color: var(--text-3);
  }
  .about-value {
    color: var(--text);
  }
  .settings-footer {
    padding: 24px 16px calc(env(safe-area-inset-bottom, 0) + 88px);
    text-align: center;
    font-size: 11px;
    color: var(--text-3);
    line-height: 1.8;
  }
  .settings-footer .app-version {
    letter-spacing: 0.02em;
    opacity: 0.85;
  }
  .settings-footer .copyright { opacity: 0.7; }
  .tab-footer {
    padding: 28px 16px 8px;
    text-align: center;
    font-size: 11px;
    color: var(--text-3);
    line-height: 1.8;
  }
  .tab-footer .app-version {
    letter-spacing: 0.02em;
    opacity: 0.85;
  }
  .tab-footer .copyright { opacity: 0.7; }

  /* Hide FAB while settings/history screen is open (bottom-nav stays visible) */
  body.settings-open .fab,
  body.history-open .fab {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  /* Bookshelf */
  .bookshelf-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 8px;
    background: transparent;
    margin: 0 0 16px;
    padding: 4px 0 12px;
  }
  .bookshelf-header h2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
  }
  .bookshelf-count {
    color: var(--text-3);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    margin-left: 0;
  }
  /* 本棚モード切替（読んだ本 / 読みたい本）: iOS セグメントコントロール風 */
  .bookshelf-mode-tabs {
    display: flex;
    gap: 4px;
    margin: 0 0 16px;
    padding: 4px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.32) 100%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.85),
      0 1px 3px rgba(0, 0, 0, 0.04);
  }
  .bookshelf-mode-tab {
    flex: 1;
    padding: 10px 6px;
    background: transparent;
    border: none;
    border-radius: 9px;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-2);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.18s, color 0.18s, transform 0.12s, box-shadow 0.18s;
  }
  .bookshelf-mode-tab:hover { color: var(--text); }
  .bookshelf-mode-tab:active { transform: scale(0.98); }
  .bookshelf-mode-tab.is-active {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(252, 252, 254, 0.85) 100%);
    color: var(--accent);
    font-weight: 600;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      0 1px 4px rgba(0, 0, 0, 0.06),
      0 0 0 0.5px rgba(0, 0, 0, 0.04);
  }
  .bookshelf-mode-tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  .bookshelf-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    position: fixed;
    /* 初期位置：「本棚 XXX冊」のタイトル真右 */
    top: calc(env(safe-area-inset-top, 0px) + 87px);
    right: 16px;
    z-index: 30;
    padding: 6px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.5) 100%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 12px;
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    box-shadow:
      0 4px 14px rgba(0, 0, 0, 0.06),
      0 1px 3px rgba(0, 0, 0, 0.04),
      inset 0 1px 0 rgba(255, 255, 255, 0.95);
    transition: top 0.28s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.18s ease, visibility 0.18s ease;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
  /* スクロール後：履歴・ユーザーボタン相当の高さまで上昇（流れたヘッダー跡地に滑り込む）*/
  .bookshelf-controls.is-scrolled {
    top: calc(env(safe-area-inset-top, 0px) + 12px);
  }
  /* 本棚タブの時だけ表示（visibility 切替 → 位置はすでに正しいのでチラつかない）*/
  body.is-bookshelf-active .bookshelf-controls {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
  body.sheet-open .bookshelf-controls {
    opacity: 0;
    pointer-events: none;
  }

  /* フィルタメニュー（メモあり / 再読のみ）*/
  .bookshelf-filter-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    padding: 6px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(252, 252, 254, 0.94) 100%);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.98),
      0 8px 20px rgba(0, 0, 0, 0.12),
      0 2px 6px rgba(0, 0, 0, 0.06);
    z-index: 50;
    display: none;
  }
  .bookshelf-filter-menu.is-open { display: block; }
  .bookshelf-filter-section-label {
    font-size: 11px;
    color: var(--text-3);
    font-weight: 600;
    padding: 6px 12px 4px;
    letter-spacing: 0.04em;
  }
  .bookshelf-filter-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 8px;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    font: inherit;
    font-size: 13px;
    color: var(--text);
    transition: background 0.12s;
  }
  .bookshelf-filter-item:hover { background: rgba(30, 64, 175, 0.06); }
  .bookshelf-filter-item.is-active { color: var(--accent); font-weight: 600; }
  .bookshelf-filter-check {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-strong);
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    transition: background 0.12s, border-color 0.12s;
  }
  .bookshelf-filter-check svg { display: none; width: 12px; height: 12px; }
  .bookshelf-filter-item.is-active .bookshelf-filter-check {
    background: var(--accent);
    border-color: var(--accent);
  }
  .bookshelf-filter-item.is-active .bookshelf-filter-check svg { display: block; }
  .bookshelf-filter-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.06);
    margin: 4px 8px;
  }
  .bookshelf-filter-clear {
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    color: var(--text-3);
    border-radius: 8px;
    transition: background 0.12s, color 0.12s;
  }
  .bookshelf-filter-clear:hover { background: rgba(0, 0, 0, 0.04); color: var(--text); }
  .bookshelf-filter-clear:disabled { opacity: 0.4; cursor: not-allowed; }
  /* フィルタが有効な時のボタン上の数字バッジ */
  .bookshelf-notes-toggle.has-count::after {
    content: attr(data-count);
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    background: var(--accent);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 14px;
    border-radius: 7px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(30, 64, 175, 0.3);
  }
  .bookshelf-top-btn,
  .bookshelf-bottom-btn {
    width: 32px;
    height: 32px;
    background: var(--card);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    color: var(--text-2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, transform 0.12s;
    position: relative;
  }
  .bookshelf-top-btn::before,
  .bookshelf-bottom-btn::before {
    content: '';
    position: absolute;
    inset: -6px;
  }
  .bookshelf-top-btn:hover,
  .bookshelf-bottom-btn:hover {
    background: var(--bg);
    color: var(--text);
  }
  .bookshelf-top-btn:active,
  .bookshelf-bottom-btn:active {
    transform: scale(0.94);
    background: var(--border);
  }
  /* 月へ移動ボタン: FAB 上のスクロールボタン (up / down) の間に浮動 */
  .bookshelf-filter {
    position: fixed;
    right: 24px;
    bottom: calc(env(safe-area-inset-bottom, 0) + 176px);
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    box-shadow:
      0 3px 8px rgba(0, 0, 0, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 -1px 0 rgba(0, 0, 0, 0.04);
    display: none;
    z-index: 94;
    transition: background-color 0.15s, transform 0.12s, opacity 0.2s ease;
  }
  body.is-bookshelf-active:not(.is-bookshelf-wishlist) .bookshelf-filter { display: block; }
  body.sheet-open .bookshelf-filter { opacity: 0; pointer-events: none; transform: scale(0.9); }
  .bookshelf-filter:hover {
    background-color: rgba(255, 255, 255, 0.78);
  }
  .bookshelf-filter:active {
    transform: scale(0.9);
  }
  /* 月メニュー（カレンダーボタンの上にポップアップ） */
  .bookshelf-month-menu {
    position: fixed;
    right: 24px;
    bottom: calc(env(safe-area-inset-bottom, 0) + 222px);
    min-width: 144px;
    max-width: 220px;
    max-height: min(50vh, 360px);
    overflow-y: auto;
    padding: 6px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(252, 252, 254, 0.94) 100%);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.98),
      0 8px 20px rgba(0, 0, 0, 0.12),
      0 2px 6px rgba(0, 0, 0, 0.06);
    z-index: 95;
    display: none;
    -webkit-overflow-scrolling: touch;
  }
  .bookshelf-month-menu.is-open { display: block; }
  body.sheet-open .bookshelf-month-menu { display: none; }
  .bookshelf-month-item {
    display: block;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
  }
  .bookshelf-month-item:hover { background: rgba(30, 64, 175, 0.06); }
  .bookshelf-month-item:active { background: rgba(30, 64, 175, 0.12); }
  .bookshelf-month-empty {
    padding: 14px;
    font-size: 12px;
    color: var(--text-3);
    text-align: center;
  }
  .month-group {
    margin: 0 0 24px;
    padding: 22px 20px 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.5) 100%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 16px;
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 -1px 0 rgba(0, 0, 0, 0.04),
      0 2px 8px rgba(0, 0, 0, 0.05),
      0 1px 2px rgba(0, 0, 0, 0.03);
    scroll-margin-top: 60px;
  }
  .month-group-label {
    font-size: 13px;
    font-weight: 600;
    color: #3a3a3f;
    letter-spacing: 0.12em;
    margin: 0 0 20px;
    padding: 0 0 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
  .month-group-count {
    color: #a8a8ad;
    font-weight: 400;
    margin-left: 10px;
    letter-spacing: 0.05em;
  }
  .book-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px 18px;
    padding: 4px 4px 8px;
    position: relative;
  }
  .book-grid::after {
    display: none;
  }
  @media (min-width: 480px) {
    .book-grid { grid-template-columns: repeat(4, 1fr); }
  }
  .book-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: transparent;
    border-radius: 0;
    overflow: visible;
    border: none;
    cursor: pointer;
    transition: transform 0.18s ease;
  }
  .book-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: 4px;
  }
  .book-card:active {
    transform: translateY(1px) scale(0.97);
  }
  @media (hover: hover) {
    .book-card:hover { transform: translateY(-3px); }
    .book-card:hover .book-card-cover,
    .book-card:hover .book-card-cover-fallback {
      box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.08),
        0 12px 28px rgba(0, 0, 0, 0.14);
    }
  }
  .book-card-cover {
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: cover;
    background: #f0ede8;
    display: block;
    border-radius: 2px;
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.06),
      0 6px 16px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
  }
  .book-card-cover-fallback {
    width: 100%;
    aspect-ratio: 2/3;
    background: linear-gradient(135deg, #f4f1ec, #e6e1d8);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-size: 11px;
    text-align: center;
    padding: 8px;
    word-break: break-all;
    border-radius: 2px;
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.06),
      0 6px 16px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
  }
  .book-card-meta {
    padding: 10px 2px 0;
  }
  .book-card-title {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
    color: #3a3a3f;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-align: center;
  }
  .book-card-publisher,
  .book-card-date {
    display: none;
  }
  .book-card-author {
    font-size: 10px;
    color: #9b9ba0;
    text-align: center;
    line-height: 1.3;
    margin-top: 3px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
  .bookshelf-empty {
    text-align: center;
    color: var(--text-3);
    padding: 60px 20px;
    font-size: 13px;
  }

  .month-shelf-empty {
    text-align: center;
    color: var(--text-3);
    padding: 18px 12px 6px;
    font-size: 13px;
  }

  .month-shelf-sub {
    margin: 4px 0 12px;
    font-size: 11px;
    color: var(--text-3);
    letter-spacing: 0.02em;
  }
  .month-shelf-sub:empty { display: none; }

  /* 読んでいる本「もっと見る」ボタン */
  .reading-shelf-more-btn {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 11px 16px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--card);
    color: var(--text-2);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, color 0.15s;
  }
  @media (hover: hover) {
    .reading-shelf-more-btn:hover { background: var(--bg); color: var(--text); }
  }
  .reading-shelf-more-btn:active { opacity: 0.7; }
  .reading-shelf-more-btn[hidden] { display: none; }

  /* Monthly recap card (前月のふりかえり) */
  .recap-card {
    position: relative;
    margin: 0 0 16px;
    padding: 14px 16px 14px 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.5) 100%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 16px;
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 -1px 0 rgba(0, 0, 0, 0.04),
      0 2px 8px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
  }
  .recap-card[hidden] { display: none; }
  .recap-card:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.62) 100%);
  }
  .recap-card:active { transform: scale(0.99); }
  .recap-label {
    color: var(--text-2);
    font-size: 12px;
    font-weight: 600;
    margin: 0 0 10px;
    letter-spacing: 0.04em;
  }
  .recap-row {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .recap-cover {
    width: 40px;
    height: 58px;
    background-size: cover;
    background-position: center;
    background-color: var(--accent-soft);
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
    flex: 0 0 auto;
  }
  .recap-cover-last {
  }
  .recap-text {
    flex: 1;
    min-width: 0;
  }
  .recap-count {
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
  }
  .recap-sub {
    color: var(--text-3);
    font-size: 11px;
    margin-top: 4px;
    line-height: 1.5;
  }
  .recap-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    color: var(--text-3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
  }
  .recap-close::before {
    content: '';
    position: absolute;
    inset: -8px;
  }
  .recap-close:hover { background: var(--bg); color: var(--text); }

  /* Multi-axis stats card (life tab) */
  .life-axis-card {
    margin-bottom: 12px;
    padding: 16px;
  }
  .life-axis-row {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: 12px;
  }
  .life-axis-item {
    flex: 1;
    text-align: center;
    min-width: 0;
  }
  .life-axis-num {
    font-size: 28px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  .life-axis-unit {
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-2);
    letter-spacing: 0.02em;
  }
  .life-axis-sub {
    margin-top: 2px;
    font-size: 10px;
    color: var(--text-3);
    letter-spacing: 0.02em;
  }
  .life-axis-divider {
    width: 1px;
    background: var(--border);
    flex: 0 0 auto;
  }

  /* Settings section subtitle (controlled tone) */
  .settings-section .section-label + .settings-section-sub { margin-top: -8px; }
  .settings-section-sub {
    margin: 0 0 12px;
    font-size: 11px;
    color: var(--text-3);
    letter-spacing: 0.02em;
    line-height: 1.5;
  }

  .settings-action-btn {
    width: 100%;
    background: var(--card);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 12px 16px;
    font-family: inherit;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, border-color 0.15s, transform 0.12s;
  }
  .settings-action-btn:hover { background: var(--bg); border-color: var(--accent); color: var(--accent); }
  .settings-action-btn:active { transform: scale(0.98); }

  /* Settings toggle (iOS-style switch) */
  .settings-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    cursor: pointer;
    user-select: none;
  }
  .settings-toggle-text {
    flex: 1;
    min-width: 0;
  }
  .settings-toggle-label {
    font-size: 14px;
    color: var(--text);
    font-weight: 500;
    line-height: 1.3;
  }
  .settings-toggle-sub {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 2px;
    line-height: 1.4;
  }
  .settings-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .settings-toggle-track {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 26px;
    background: var(--border-strong);
    border-radius: 999px;
    transition: background 0.2s;
  }
  .settings-toggle-thumb {
    position: absolute;
    left: 2px;
    top: 2px;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .settings-toggle input[type="checkbox"]:checked ~ .settings-toggle-track {
    background: var(--accent);
  }
  .settings-toggle input[type="checkbox"]:checked ~ .settings-toggle-track .settings-toggle-thumb {
    transform: translateX(18px);
  }
  .settings-toggle input[type="checkbox"]:focus-visible ~ .settings-toggle-track {
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.25);
  }

  /* History / shared screen subtitle */
  .screen-subtitle {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-3);
    letter-spacing: 0.02em;
  }
  .screen-subtitle:empty { display: none; }

  .recall-empty {
    text-align: center;
    color: var(--text-3);
    padding: 8px 12px 4px;
    font-size: 13px;
    line-height: 1.7;
    letter-spacing: 0.02em;
  }

  /* Life tab (読書人生) */
  .life-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin: 0 0 18px;
  }
  .life-subtitle {
    font-size: 12px;
    color: var(--text-3);
    font-weight: 500;
  }
  /* うさぎアイコン + 吹き出しだけが画面上部に sticky で残るシンプル構成（カード装飾なし） */
  /* z-index 60: 本の雨（50）より上、bottom-nav（100）より下。ウサギは常に最前面で見守る */
  .life-greeting-card {
    background: transparent;
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 60;
    margin-bottom: 12px;
    padding: 12px 16px;
  }
  .life-greeting-sentinel {
    height: 1px;
    margin-bottom: -1px;
    pointer-events: none;
  }
  .life-stats-hero {
    text-align: center;
    overflow: hidden;
    position: relative;
    margin-bottom: 12px;
  }
  .life-stats-hero .life-hero-row {
    justify-content: center;
  }
  .life-stats-hero-deco {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 32px;
    height: 32px;
    color: var(--accent);
    opacity: 0.32;
    pointer-events: none;
    z-index: 1;
  }
  .life-hero-tagline {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 12px;
    color: var(--text-3);
    line-height: 1.6;
    letter-spacing: 0.02em;
  }
  .life-hero-greeting {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 2;
  }

  /* Memory stream: book covers flowing across the entire viewport (body 直下、画面全体に固定) */
  /* 読書人生タブのときのみ表示（body.is-life-active がトリガー） */
  /* v1.2: 一旦非表示。元に戻す時は下の `display: none !important;` 行を削除し、
     `body.is-life-active .life-memory-stream { display: block; }` を有効化する。 */
  .life-memory-stream {
    display: none !important;
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
  }
  body.is-life-active .life-memory-stream {
    /* display: block;  ← v1.2 で一旦無効化 */
  }
  .life-memory-cover {
    position: absolute;
    width: 48px;
    aspect-ratio: 0.7;
    border-radius: 3px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    opacity: 0;
    will-change: transform, opacity;
  }
  .life-memory-cover.sweeping {
    animation: lifeMemorySweep 10.4s cubic-bezier(0.32, 0.72, 0, 1) forwards;
  }
  .life-memory-cover.drifting {
    animation: lifeMemoryDrift var(--drift-duration, 36s) linear infinite;
    animation-delay: var(--drift-delay, 0s);
    opacity: 0.14;
  }
  @keyframes lifeMemorySweep {
    0% { opacity: 0; transform: translateX(-80px) rotate(3deg); }
    15% { opacity: 0.32; }
    85% { opacity: 0.32; }
    100% { opacity: 0; transform: translateX(calc(var(--stream-width, 100vw) + 80px)) rotate(-2deg); }
  }
  @keyframes lifeMemoryDrift {
    0% { transform: translateX(-80px); }
    100% { transform: translateX(calc(var(--stream-width, 100vw) + 80px)); }
  }
  .life-hero-rabbit {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--text);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 1),
      inset 0 -1px 0 rgba(255, 255, 255, 0.5),
      0 6px 20px rgba(0, 0, 0, 0.12);
    transform-origin: bottom center;
    animation: lifeRabbitBounce 2.4s ease-in-out infinite;
  }
  .life-hero-rabbit svg {
    width: 42px;
    height: 42px;
    shape-rendering: crispEdges;
    transition: opacity 120ms ease;
  }
  .life-hero-rabbit.is-empty {
    animation: none;
  }
  .life-hero-rabbit.is-empty svg {
    opacity: 0;
  }
  @keyframes lifeRabbitBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }
  @keyframes lifeRabbitReTapJump {
    0%   { transform: translateY(0); }
    35%  { transform: translateY(-12px); }
    65%  { transform: translateY(-3px); }
    85%  { transform: translateY(-5px); }
    100% { transform: translateY(0); }
  }
  .life-hero-rabbit.is-retap-jumping {
    animation: lifeRabbitReTapJump 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .app-icon {
    transition: opacity 120ms ease;
  }
  .app-icon.is-hidden {
    visibility: hidden;
  }

  .flying-rabbit {
    position: fixed;
    pointer-events: none;
    z-index: 900;
    color: var(--text);
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .flying-rabbit.is-visible {
    opacity: 1;
  }
  .flying-rabbit svg {
    width: 100%;
    height: 100%;
    shape-rendering: crispEdges;
  }

  .life-hero-bubble {
    transition: opacity 300ms ease, transform 300ms ease;
  }
  .life-hero-bubble.is-pre-entrance {
    opacity: 0;
    transform: translateY(4px);
  }

  /* === Memory recall thinking bubble (entrance) ===
   * 通常の三角吹き出し (.life-hero-bubble) と同じ場所（うさぎの右隣）に重ねて表示。
   * .life-hero-greeting は flex (rabbit + bubble) で position: relative。
   * 吹き出し自体の幅は flex item と同じ流れに乗せず absolute で覆い、
   * 高さは speech bubble のおおよその実高に揃える。
   */
  .life-memory-bubble {
    position: absolute;
    left: 80px;            /* rabbit width (64) + gap (12) + 余裕 (4) */
    right: 0;
    top: 50%;
    height: 86px;          /* 2 行ぶんの幅 */
    pointer-events: none;
    z-index: 6;
    opacity: 0;
    transform: translateY(-50%) scale(0.94);
    transition: opacity 240ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .life-memory-bubble.is-visible {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  .life-memory-bubble[hidden] { display: none; }
  .life-memory-bubble-main {
    position: relative;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 1);
  }
  .life-memory-bubble-stream {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .life-memory-bubble-cover {
    position: absolute;
    right: 0;            /* 右端に張り付かせて、translateX で右→左へ流す */
    width: 24px;
    height: 34px;
    background-size: cover;
    background-position: center;
    background-color: var(--accent-soft);
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    opacity: 0;
    will-change: transform, opacity;
    animation: lifeMemoryCoverFlow linear infinite;
  }
  /* var(--stream-w) は populateMemoryBubbleStream() で実測値を JS から渡す */
  @keyframes lifeMemoryCoverFlow {
    0%   { transform: translateX(28px); opacity: 0; }
    8%   { transform: translateX(4px); opacity: 0.85; }
    92%  { transform: translateX(calc(-1 * var(--stream-w, 220px) + 24px)); opacity: 0.85; }
    100% { transform: translateX(calc(-1 * var(--stream-w, 220px) - 4px)); opacity: 0; }
  }
  /* Thinking trail dots: 吹き出しの左側からうさぎへ向かう小さな円 */
  .life-memory-bubble-tail {
    position: absolute;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1);
  }
  .life-memory-bubble-tail-1 {
    width: 8px; height: 8px;
    top: 50%;
    left: -12px;
    transform: translateY(-50%);
  }
  .life-memory-bubble-tail-2 {
    width: 5px; height: 5px;
    top: 50%;
    left: -22px;
    transform: translateY(-20%);
  }
  @media (prefers-reduced-motion: reduce) {
    .life-memory-bubble { display: none !important; }
  }

  /* === Full-screen book rain (re-tap) === */
  .life-book-rain {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 50;
    overflow: hidden;
  }
  .life-book-rain[hidden] { display: none; }
  .life-book-rain-cover {
    position: absolute;
    width: 48px;
    aspect-ratio: 0.7;
    background-size: cover;
    background-position: center;
    background-color: var(--accent-soft);
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
    opacity: 0;
    will-change: transform, opacity;
  }
  .life-book-rain-cover.is-falling {
    animation: lifeBookRainFall var(--rain-duration, 4.5s) cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards;
  }
  .life-book-rain-cover.is-rising {
    animation: lifeBookRainRise var(--rain-duration, 4.5s) cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards;
  }
  @keyframes lifeBookRainFall {
    0%   { transform: translateY(-140px) rotate(var(--rain-rot-start, 0deg)); opacity: 0; }
    14%  { opacity: 0.32; }
    55%  { opacity: 0.32; }
    100% { transform: translateY(calc(100vh + 140px)) rotate(var(--rain-rot-end, 0deg)); opacity: 0; }
  }
  @keyframes lifeBookRainRise {
    0%   { transform: translateY(calc(100vh + 140px)) rotate(var(--rain-rot-start, 0deg)); opacity: 0; }
    14%  { opacity: 0.32; }
    55%  { opacity: 0.32; }
    100% { transform: translateY(-140px) rotate(var(--rain-rot-end, 0deg)); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .life-book-rain { display: none !important; }
  }

  /* === Sekki (二十四節気) section === */
  .sekki-section {
    margin: 16px 0;
  }
  .sekki-section[hidden] { display: none; }
  .sekki-label {
    color: var(--text-2);
    font-size: 12px;
    margin: 0 0 8px;
    letter-spacing: 0.04em;
  }
  .sekki-name {
    color: var(--text);
    font-weight: 600;
  }
  .sekki-period {
    color: var(--text-3);
    font-size: 11px;
    margin-left: 6px;
    letter-spacing: 0;
  }
  .sekki-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.68) 0%, rgba(255, 255, 255, 0.48) 100%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 12px;
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -1px 0 rgba(0, 0, 0, 0.04),
      0 1px 3px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
  }
  .sekki-card:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 100%);
  }
  .sekki-card:active { transform: scale(0.98); }
  .sekki-card-cover {
    width: 36px;
    height: 52px;
    background-size: cover;
    background-position: center;
    background-color: var(--accent-soft);
    border-radius: 3px;
    flex: 0 0 auto;
  }
  .sekki-card-text {
    flex: 1;
    min-width: 0;
  }
  .sekki-card-title {
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sekki-card-meta {
    color: var(--text-3);
    font-size: 11px;
    margin-top: 2px;
  }
  .sekki-note {
    color: var(--text-3);
    font-size: 11px;
    margin-top: 8px;
    text-align: center;
  }

  /* === Bookshelf search === */
  .bookshelf-search-btn {
    width: 32px;
    height: 32px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.42) 100%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    color: var(--text-2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, transform 0.12s, border-color 0.15s;
    position: relative;
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 -1px 0 rgba(0, 0, 0, 0.04),
      0 1px 2px rgba(0, 0, 0, 0.04);
  }
  .bookshelf-search-btn::before {
    content: '';
    position: absolute;
    inset: -6px;
  }
  .bookshelf-search-btn:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.58) 100%);
    color: var(--text);
  }
  .bookshelf-search-btn:active { transform: scale(0.94); }
  .bookshelf-search-btn.is-on {
    background: linear-gradient(180deg, rgba(224, 231, 255, 0.85) 0%, rgba(191, 219, 254, 0.62) 100%);
    color: var(--accent);
    border-color: rgba(191, 219, 254, 0.95);
  }
  .bookshelf-search {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 12px;
    padding: 0;
  }
  .bookshelf-search[hidden] { display: none; }
  .bookshelf-search-input {
    flex: 1;
    height: 36px;
    padding: 0 14px;
    background: var(--card);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    outline: none;
  }
  .bookshelf-search-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.15);
  }
  .bookshelf-search-clear {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    color: var(--text-3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
  }
  .bookshelf-search-clear:hover { background: var(--bg); color: var(--text); }

  /* === Hero since (Reading Log を開いて N日目) === */
  .hero-since {
    color: var(--text-3);
    font-size: 11px;
    margin-top: 4px;
    text-align: center;
    letter-spacing: 0.02em;
  }
  .hero-since[hidden] { display: none; }

  /* === Seasonal rabbit decoration (left-ear accessory, gently animated) === */
  .life-rabbit-deco {
    position: absolute;
    top: 9px;
    left: 7px;
    width: 20px;
    height: 20px;
    pointer-events: none;
    color: var(--text-3);
    opacity: 0.9;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
    transform-origin: 50% 70%;
  }
  .life-rabbit-deco svg { width: 100%; height: 100%; display: block; }
  .life-rabbit-deco[hidden] { display: none; }
  .life-rabbit-deco.is-spring { color: #ec4899; animation: lifeDecoSpringSway 4s ease-in-out infinite; }
  .life-rabbit-deco.is-summer { color: #60a5fa; animation: lifeDecoSummerFloat 3.2s ease-in-out infinite; }
  .life-rabbit-deco.is-autumn { color: #f97316; animation: lifeDecoAutumnFlutter 4.5s ease-in-out infinite; }
  .life-rabbit-deco.is-winter { color: #22d3ee; animation: lifeDecoWinterTwinkle 4s ease-in-out infinite; }

  @keyframes lifeDecoSpringSway {
    0%, 100% { transform: rotate(-6deg); }
    50% { transform: rotate(6deg); }
  }
  @keyframes lifeDecoSummerFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
  }
  @keyframes lifeDecoAutumnFlutter {
    0%, 100% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
  }
  @keyframes lifeDecoWinterTwinkle {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.08); opacity: 1; }
  }
  .life-hero-row {
    transition: opacity 240ms ease;
  }
  .life-hero-row.is-pre-entrance {
    opacity: 0;
  }
  .life-hero-bubble {
    position: relative;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 14px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.45;
    flex: 1;
    min-width: 0;
    white-space: pre-line;
    word-break: keep-all;
    overflow-wrap: anywhere;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 1),
      inset 0 -1px 0 rgba(255, 255, 255, 0.5),
      0 6px 20px rgba(0, 0, 0, 0.10);
  }
  .life-hero-bubble::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 7px solid rgba(255, 255, 255, 0.95);
  }
  .life-hero-bubble::after {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid rgba(255, 255, 255, 0.95);
  }
  .life-hero-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
    position: relative;
  }
  .life-hero-row {
    display: flex;
    align-items: baseline;
    gap: 2px;
    position: relative;
  }
  .life-hero-num {
    font-size: 76px;
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.0;
    color: var(--text);
    font-variant-numeric: tabular-nums;
  }
  .life-hero-unit {
    font-size: 16px;
    color: var(--text-2);
    font-weight: 500;
    margin-left: 6px;
  }
  .life-hero-since {
    font-size: 12px;
    color: var(--text-3);
    margin-top: 10px;
    position: relative;
  }
  .life-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
  }
  .life-stat-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 86px;
  }
  .life-stat-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .life-stat-row {
    display: flex;
    align-items: baseline;
    gap: 3px;
    margin-top: 2px;
  }
  .life-stat-value {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
  }
  .life-stat-unit {
    font-size: 12px;
    color: var(--text-2);
    font-weight: 500;
  }
  .life-stat-sub {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 2px;
  }
  .life-timeline-row {
    display: grid;
    grid-template-columns: 56px 1fr 64px;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
  .life-timeline-row:last-child { border-bottom: none; }
  .life-timeline-row.current .life-timeline-year {
    color: var(--accent);
    font-weight: 700;
  }
  .life-timeline-year {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
  }
  .life-timeline-bar-wrap {
    height: 8px;
    background: rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
    border-radius: 999px;
    overflow: hidden;
  }
  .life-timeline-bar {
    height: 100%;
    background: var(--bar-default);
    border-radius: 999px;
    width: 0;
    transition: width 0.7s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .life-timeline-row.current .life-timeline-bar {
    background: var(--bar-current);
  }
  .life-timeline-count {
    font-size: 12px;
    color: var(--text-2);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .life-empty {
    text-align: center;
    padding: 64px 16px;
    color: var(--text-3);
  }
  .life-empty-text {
    font-size: 14px;
    line-height: 1.7;
  }

  /* Rabbit blink animation (life tab hero only) */
  .life-hero-rabbit:not(.is-empty) .life-rabbit-eye {
    transform-box: fill-box;
    transform-origin: center;
    animation: lifeRabbitBlink 5s infinite;
  }
  /* 両目を非同期に瞬きさせて、機械感を和らげる */
  .life-hero-rabbit:not(.is-empty) .life-rabbit-eye:first-of-type {
    animation-delay: 0s;
  }
  .life-hero-rabbit:not(.is-empty) .life-rabbit-eye:last-of-type {
    animation-delay: 0.05s;
  }
  @keyframes lifeRabbitBlink {
    0%, 92%, 96%, 100% { transform: scaleY(1); }
    94% { transform: scaleY(0); }
  }

  /* Year peak hint (small note inside year timeline card) */
  .life-timeline-peak {
    margin-top: 12px;
    padding: 8px 0 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 12px;
    color: var(--text-3);
    text-align: center;
    line-height: 1.6;
  }
  .life-timeline-peak strong {
    color: var(--accent);
    font-weight: 600;
  }

  /* Month compare (highlight style: hero number + small history strip) */
  .life-monthcompare-card {
    margin-bottom: 12px;
    text-align: center;
  }
  .life-monthcompare-card .section-label {
    text-align: left;
  }
  .life-monthcompare-hero {
    padding: 8px 0 4px;
  }
  .life-monthcompare-num {
    font-size: 56px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .life-monthcompare-unit {
    font-size: 16px;
    color: var(--text-2);
    font-weight: 500;
    margin-left: 4px;
  }
  .life-monthcompare-comment {
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.6;
    margin-top: 10px;
    padding: 0 8px;
  }
  .life-monthcompare-comment strong {
    color: var(--accent);
    font-weight: 600;
  }
  .life-monthcompare-history {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 6px;
  }
  .life-monthcompare-history-cell {
    text-align: center;
    padding: 6px 4px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: background 0.2s;
  }
  .life-monthcompare-history-cell.is-current {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, var(--accent-soft) 100%);
    border-color: rgba(191, 219, 254, 0.85);
    box-shadow: 0 2px 8px rgba(30, 64, 175, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
  .life-monthcompare-history-year {
    font-size: 10px;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
    margin-bottom: 2px;
  }
  .life-monthcompare-history-unit {
    font-size: 0.85em;
    margin-left: 1px;
    opacity: 0.75;
  }
  .life-monthcompare-history-cell.is-current .life-monthcompare-history-year {
    color: var(--accent);
    font-weight: 600;
  }
  .life-monthcompare-history-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
  }
  .life-monthcompare-history-cell.is-current .life-monthcompare-history-count {
    color: var(--accent);
  }
  .life-monthcompare-empty {
    font-size: 13px;
    color: var(--text-3);
    padding: 16px 8px 4px;
  }

  /* Season distribution */
  .life-season-card {
    margin-bottom: 12px;
  }
  .life-season-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 12px;
  }
  .life-season-cell {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    padding: 14px 8px 12px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }
  .life-season-cell.is-top {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, var(--accent-soft) 100%);
    border-color: rgba(191, 219, 254, 0.85);
    box-shadow: 0 2px 8px rgba(30, 64, 175, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
  .life-season-icon {
    width: 22px;
    height: 22px;
    display: block;
    margin: 0 auto 6px;
    color: var(--text-2);
  }
  .life-season-cell.is-top .life-season-icon {
    color: var(--accent);
  }
  .life-season-label {
    font-size: 10px;
    color: var(--text-3);
    margin-bottom: 4px;
    letter-spacing: 0.04em;
  }
  .life-season-count {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
  }
  .life-season-cell.is-top .life-season-count {
    color: var(--accent);
  }
  .life-season-unit {
    font-size: 11px;
    color: var(--text-3);
    margin-left: 1px;
    font-weight: 500;
  }
  .life-season-comment {
    font-size: 12px;
    color: var(--text-3);
    text-align: center;
    line-height: 1.6;
  }
  .life-season-comment strong {
    color: var(--accent);
    font-weight: 600;
  }

  /* Journey (origin + milestone books) */
  .life-journey-card-wrap {
    margin-bottom: 12px;
  }
  .life-journey {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .life-journey-empty {
    font-size: 13px;
    color: var(--text-3);
    text-align: center;
    padding: 24px 8px 8px;
  }
  .life-journey-item {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 12px;
    align-items: center;
    padding: 10px;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 3px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    opacity: 0;
  }
  .life-journey-item.is-revealed {
    opacity: 1;
  }
  .life-journey-item.is-origin {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, var(--accent-soft) 100%);
    border-color: rgba(191, 219, 254, 0.85);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 8px rgba(30, 64, 175, 0.08);
  }
  @media (hover: hover) {
    .life-journey-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }
  }
  .life-journey-item:active {
    transform: scale(0.98);
  }
  .life-journey-cover {
    width: 56px;
    aspect-ratio: 0.7;
    border-radius: 6px;
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--border);
  }
  .life-journey-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .life-journey-cover-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: var(--text-3);
    background: linear-gradient(135deg, #f4f1ec, #e6e1d8);
    text-align: center;
    padding: 4px;
    word-break: break-all;
    line-height: 1.2;
  }
  .life-journey-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .life-journey-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .life-journey-item.is-origin .life-journey-label {
    color: var(--accent);
  }
  .life-journey-label-icon {
    font-size: 12px;
    line-height: 1;
    /* 絵文字のカラフルさを抑えて周りのトーンに馴染ませる */
    filter: grayscale(0.85) opacity(0.7);
  }
  .life-journey-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .life-journey-date {
    font-size: 11px;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
  }
  .life-journey-next {
    margin-top: 4px;
    padding: 12px 12px;
    text-align: center;
    font-size: 12px;
    color: var(--text-3);
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    border: 1px dashed rgba(148, 163, 184, 0.5);
    border-radius: 12px;
  }
  .life-journey-next strong {
    color: var(--text-2);
    font-weight: 700;
  }
  @keyframes lifeJourneySlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Weekday chart */
  .life-weekday-card {
    margin-bottom: 12px;
  }
  .life-weekday {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .life-weekday-row {
    display: grid;
    grid-template-columns: 32px 1fr 56px;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
  .life-weekday-row:last-child { border-bottom: none; }
  .life-weekday-day {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    letter-spacing: 0.04em;
  }
  .life-weekday-row.is-weekend .life-weekday-day {
    color: var(--accent);
  }
  .life-weekday-row.is-top .life-weekday-day {
    color: var(--accent);
    font-weight: 700;
  }
  .life-weekday-bar-wrap {
    height: 8px;
    background: rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
  }
  .life-weekday-bar {
    height: 100%;
    background: var(--bar-default);
    border-radius: 999px;
    width: 0;
    transition: width 0.7s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .life-weekday-row.is-top .life-weekday-bar {
    background: var(--bar-current);
  }
  .life-weekday-count {
    font-size: 12px;
    color: var(--text-2);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .life-weekday-comment {
    font-size: 12px;
    color: var(--text-3);
    margin-top: 12px;
    text-align: center;
    line-height: 1.6;
  }
  .life-weekday-comment strong {
    color: var(--accent);
    font-weight: 600;
  }

  /* Monthly constellation */
  .life-constellation-card {}
  .life-constellation-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  }
  .life-constellation-month {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .life-constellation-sky {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 12px;
    background: linear-gradient(160deg, rgba(8,14,36,0.92) 0%, rgba(14,22,54,0.88) 100%);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }

  /* Constellation detail overlay */
  .constellation-detail-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.62);
    z-index: 1100;
    align-items: center;
    justify-content: center;
    padding: 24px 20px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .constellation-detail-modal.open { display: flex; }
  .constellation-detail-content {
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, rgba(8,14,40,0.97) 0%, rgba(14,22,58,0.95) 100%);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    max-width: 340px;
    width: 100%;
    max-height: calc(100dvh - 48px);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    box-shadow:
      0 24px 60px rgba(0,0,0,0.5),
      inset 0 1px 0 rgba(255,255,255,0.10);
    overflow: hidden;
  }
  .constellation-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 12px;
    flex-shrink: 0;
  }
  .constellation-detail-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px 20px;
  }
  .constellation-detail-close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
    color: rgba(255,255,255,0.5);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .constellation-detail-close:hover { background: rgba(255,255,255,0.14); color: rgba(255,255,255,0.9); }
  .constellation-detail-title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    margin: 0;
    letter-spacing: 0.04em;
  }
  .constellation-detail-sky {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(6,10,28,0.98) 0%, rgba(10,18,46,0.96) 100%);
    border: 1px solid rgba(255,255,255,0.07);
    overflow: hidden;
    margin-bottom: 16px;
  }
  .constellation-detail-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  .constellation-detail-dot {
    position: absolute;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    cursor: pointer;
    opacity: 0;
    z-index: 1;
  }
  .constellation-detail-dot.is-visible {
    transform: translate(-50%, -50%) scale(1);
    opacity: var(--star-op, 0.9);
  }
  .constellation-detail-dot.is-sparkling {
    animation: starSparkle 2.8s ease-in-out infinite;
    animation-play-state: paused;
  }
  .constellation-detail-dot.is-sparkling.is-visible {
    animation-play-state: running;
  }
  .constellation-detail-dot:hover {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.4);
    z-index: 2;
  }
  .constellation-detail-legend {
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .constellation-detail-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(255,255,255,0.6);
  }
  .constellation-detail-legend-dot {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
  }
  .constellation-detail-legend-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    color: rgba(255,255,255,0.35);
  }
  .constellation-detail-legend-book {
    cursor: pointer;
    border-radius: 8px;
    padding: 4px 6px;
    margin: 0 -6px;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  @media (hover: hover) {
    .constellation-detail-legend-book:hover {
      background: rgba(255,255,255,0.07);
    }
  }
  .constellation-detail-legend-book:active {
    background: rgba(255,255,255,0.12);
  }
  @keyframes starSparkle {
    0%, 100% { opacity: var(--star-op, 0.85); transform: translate(-50%, -50%) scale(1); }
    50%       { opacity: 1;                    transform: translate(-50%, -50%) scale(1.2); }
  }
  /* 小パネルはキャンバス描画に変換 */
  .life-constellation-canvas {
    display: block;
    border-radius: 12px;
    background: linear-gradient(160deg, rgba(8,14,36,0.92) 0%, rgba(14,22,54,0.88) 100%);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.18s ease, box-shadow 0.18s ease;
  }
  .life-constellation-canvas.is-visible { opacity: 1; }
  @media (hover: hover) {
    .life-constellation-month:hover .life-constellation-canvas {
      transform: scale(1.06);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 14px rgba(0,0,0,0.22);
    }
  }
  .life-constellation-month:active .life-constellation-canvas { transform: scale(0.96); }

  /* ★1 表紙パレット */
  .life-palette-strip {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }
  .life-palette-cell {
    flex-shrink: 0;
    width: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .life-palette-cover {
    width: 44px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(128,128,128,0.15);
  }
  .life-palette-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .life-palette-label { font-size: 9px; color: var(--text-3); letter-spacing: 0.02em; }
  .life-constellation-label {
    font-size: 10px;
    color: var(--text-3);
    letter-spacing: 0.02em;
  }
  .life-constellation-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-top: 10px;
  }
  .life-constellation-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-3);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .life-constellation-legend-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    opacity: 0.85;
  }

  /* ★3 今日のひと冊 */
  .today-book-item {
    display: flex;
    gap: 12px;
    align-items: center;
    cursor: pointer;
    border-radius: 10px;
    padding: 6px;
    transition: background 0.18s;
    -webkit-tap-highlight-color: transparent;
  }
  .today-book-item:active { background: rgba(0,0,0,0.05); }
  .today-book-cover {
    width: 52px;
    height: 72px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    background: var(--bg-card, rgba(128,128,128,0.1));
    display: block;
  }
  .today-book-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .today-book-title { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .today-book-author { font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .today-book-when { font-size: 12px; color: var(--text-3); margin-top: 2px; }

  /* ★5 メモのふと再会 */
  .today-memo-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    cursor: pointer;
    border-radius: 10px;
    padding: 6px;
    transition: background 0.18s;
    -webkit-tap-highlight-color: transparent;
  }
  .today-memo-item:active { background: rgba(0,0,0,0.05); }
  .today-memo-cover {
    width: 44px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    background: var(--bg-card, rgba(128,128,128,0.1));
    display: block;
  }
  .today-memo-body { min-width: 0; }
  .today-memo-text {
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.55;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .today-memo-from { font-size: 11px; color: var(--text-3); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ★4 今日の窓 */
  .today-window-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    border-radius: 10px;
    overflow: hidden;
  }
  .today-window-cell {
    aspect-ratio: 1;
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-card, rgba(128,128,128,0.1));
    -webkit-tap-highlight-color: transparent;
  }
  .today-window-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* Book mosaic */
  .life-mosaic-card {
    margin-bottom: 12px;
    /* モザイク自体は不透明背景で stream を完全に覆う（z-index は #tab-life .card で設定済み） */
    background: var(--card);
  }
  .life-mosaic {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    gap: 6px;
    margin: 4px 0 14px;
  }
  .life-mosaic-tile {
    aspect-ratio: 0.7;
    border-radius: 4px;
    overflow: hidden;
    background: var(--bg);
    border: 1px solid var(--border);
    cursor: pointer;
    position: relative;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    opacity: 0;
  }
  .life-mosaic-tile.is-revealed {
    opacity: 1;
  }
  @media (hover: hover) {
    .life-mosaic-tile:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
      z-index: 2;
    }
  }
  .life-mosaic-tile:active {
    transform: scale(0.95);
  }
  .life-mosaic-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .life-mosaic-tile-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: var(--text-3);
    background: linear-gradient(135deg, #f4f1ec, #e6e1d8);
    text-align: center;
    padding: 4px;
    word-break: break-all;
    line-height: 1.2;
  }
  @keyframes lifeMosaicReveal {
    from { opacity: 0; transform: translateY(6px) scale(0.92); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* Heatmap */
  .life-heatmap {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 4px;
    margin: 12px 0 14px;
  }
  .life-heatmap-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .life-heatmap-cell {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.6);
  }
  @keyframes lifeFadeUpIn {
    from { opacity: 0; transform: scale(0.6); }
    to { opacity: 1; transform: scale(1); }
  }
  @keyframes lifeFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .life-heatmap-cell.lvl-0 { background: rgba(255, 255, 255, 0.4); border: 1px solid rgba(255, 255, 255, 0.6); }
  .life-heatmap-cell.lvl-1 { background: #dbeafe; border-color: transparent; }
  .life-heatmap-cell.lvl-2 { background: #93c5fd; border-color: transparent; }
  .life-heatmap-cell.lvl-3 { background: #3b82f6; border-color: transparent; }
  .life-heatmap-cell.lvl-4 { background: #1e3a8a; border-color: transparent; }
  .life-heatmap-cell.life-heatmap-cell-current {
    box-shadow: 0 0 0 2px var(--accent);
  }
  .life-heatmap-month-label {
    font-size: 9px;
    color: var(--text-3);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  .life-heatmap-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    font-size: 10px;
    color: var(--text-3);
  }
  .life-heatmap-legend-cells {
    display: flex;
    gap: 3px;
  }
  .life-heatmap-legend-cells .life-heatmap-cell {
    width: 12px;
    height: 12px;
    aspect-ratio: auto;
  }

  /* Milestones */
  .life-next-goal {
    background: linear-gradient(135deg, rgba(219, 234, 254, 0.6) 0%, rgba(240, 244, 255, 0.6) 100%);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    border: 1px solid rgba(191, 219, 254, 0.7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
  }
  .life-next-goal-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: white;
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(30, 64, 175, 0.15);
  }
  .life-next-goal-icon svg {
    width: 18px;
    height: 18px;
  }
  .life-next-goal-text {
    flex: 1;
    font-size: 12px;
    color: var(--text-2);
    line-height: 1.45;
  }
  .life-next-goal-text strong {
    color: var(--accent);
    font-weight: 700;
  }
  .life-next-goal-num {
    font-size: 26px;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
  }
  .life-next-goal.life-next-goal-done {
    background: linear-gradient(135deg, rgba(240, 253, 244, 0.65) 0%, rgba(236, 253, 245, 0.65) 100%);
    border-color: rgba(187, 247, 208, 0.7);
  }
  .life-next-goal.life-next-goal-done .life-next-goal-icon { color: var(--success); }
  .life-next-goal.life-next-goal-done .life-next-goal-text strong,
  .life-next-goal.life-next-goal-done .life-next-goal-num { color: var(--success); }
  .life-milestones {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 14px;
  }
  .life-milestone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 4px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: transform 0.18s ease;
  }
  .life-milestone.achieved {
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.95) 0%, rgba(219, 234, 254, 0.95) 100%);
    border-color: rgba(191, 219, 254, 0.85);
    box-shadow:
      0 1px 2px rgba(30, 64, 175, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
  .life-milestone-icon {
    width: 14px;
    height: 14px;
    color: var(--text-3);
    margin-bottom: 2px;
  }
  .life-milestone.achieved .life-milestone-icon {
    color: #1e3a8a;
  }
  .life-milestone-num {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
  }
  .life-milestone.achieved .life-milestone-num { color: #1e3a8a; }
  .life-milestone-label {
    font-size: 9px;
    color: var(--text-3);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .life-milestone.achieved .life-milestone-label { color: #1e3a8a; opacity: 0.7; }

  /* Edit date modal */
  .edit-date-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 600;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .edit-date-modal.open { display: flex; }
  .edit-date-content {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.82) 100%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 16px;
    padding: 22px;
    max-width: 320px;
    width: 100%;
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    box-shadow:
      0 20px 50px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.95);
  }
  .edit-date-content h3 {
    font-size: 15px;
    margin-bottom: 14px;
    color: var(--text);
  }
  .edit-date-content input {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    font-family: inherit;
  }
  .edit-date-buttons {
    display: flex;
    gap: 8px;
    margin-top: 14px;
  }
  .edit-date-buttons button {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    font-size: 14px;
    transition: color 0.15s, transform 0.12s;
    -webkit-tap-highlight-color: transparent;
  }
  @media (hover: hover) {
    .edit-date-buttons button:not(.primary):hover { color: var(--text-2); }
  }
  .edit-date-buttons button.primary {
    background: linear-gradient(180deg, rgba(40, 40, 45, 0.86) 0%, rgba(20, 20, 23, 0.92) 100%);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      inset 0 -1px 0 rgba(0, 0, 0, 0.3),
      0 2px 6px rgba(0, 0, 0, 0.18);
  }
  .edit-date-buttons button:active { transform: scale(0.98); }

  .app-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .app-modal.open { display: flex; }
  .app-modal-content {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.82) 100%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 16px;
    padding: 22px;
    max-width: 340px;
    width: 100%;
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    box-shadow:
      0 20px 50px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.95);
  }
  .app-modal-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--text);
  }
  .app-modal-body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-2);
    white-space: pre-wrap;
    word-break: break-word;
    margin-bottom: 18px;
  }
  .app-modal-buttons {
    display: flex;
    gap: 8px;
  }
  .app-modal-buttons button {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    font-size: 14px;
    color: var(--text-3);
    transition: color 0.15s, transform 0.12s;
    -webkit-tap-highlight-color: transparent;
  }
  @media (hover: hover) {
    .app-modal-buttons button:not(.primary):not(.danger):hover { color: var(--text-2); }
  }
  .app-modal-buttons button:active { transform: scale(0.98); }
  /* 「読みたい本に追加」モーダル: 中央配置で max-height を制限。中央から少し下にずらす（ボタン縦幅の半分くらい）。キーボード出現時の追従は JS の visualViewport で行う */
  .reason-modal .app-modal-content {
    max-height: 80vh;
    overflow-y: auto;
    transform: translateY(20px);
  }
  /* 「読みたい本に追加」モーダルの理由入力欄 */
  .reason-modal-text {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.6);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
    resize: vertical;
    min-height: 70px;
    margin-bottom: 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .reason-modal-text:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.15);
  }
  .app-modal-buttons button.primary {
    background: linear-gradient(180deg, rgba(40, 40, 45, 0.86) 0%, rgba(20, 20, 23, 0.92) 100%);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      inset 0 -1px 0 rgba(0, 0, 0, 0.3),
      0 2px 6px rgba(0, 0, 0, 0.18);
  }
  .app-modal-buttons button.danger {
    background: linear-gradient(180deg, rgba(220, 38, 38, 0.85) 0%, rgba(185, 28, 28, 0.92) 100%);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      inset 0 -1px 0 rgba(0, 0, 0, 0.18),
      0 2px 6px rgba(220, 38, 38, 0.18);
  }

  /* Edit button on history */
  .edit-btn {
    width: 28px; height: 28px;
    min-width: 44px; min-height: 44px;
    background: transparent;
    border: none;
    color: var(--text-2);
    cursor: pointer;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: all 0.15s;
    flex-shrink: 0;
  }
  .edit-btn:hover {
    opacity: 1;
    background: var(--bg);
    color: var(--text);
  }

  /* Scanner */
  .scanner-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.95);
    z-index: 1000;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .scanner-modal.open { display: flex; }
  #reader {
    width: 100%; max-width: 400px;
    background: black;
    border-radius: 12px;
    overflow: hidden;
  }
  .scanner-hint {
    color: white;
    margin-top: 16px;
    font-size: 14px;
    opacity: 0.8;
  }
  .close-scanner {
    margin-top: 24px;
    background: white;
    color: var(--text);
    padding: 10px 32px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
    font-weight: 500;
  }

  /* Respect user motion preferences (WCAG 2.3.3) */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
    .life-memory-cover.drifting,
    .life-memory-cover.sweeping { display: none !important; }
    .life-hero-rabbit,
    .life-rabbit-eye,
    .life-rabbit-deco { animation: none !important; }
  }

  /* === Visitor modal (Issue #20: デモ環境のアクセス追跡) === */
  body.visitor-modal-open { overflow: hidden; }
  .visitor-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1200;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .visitor-modal.open { display: flex; }
  .visitor-modal-content {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.84) 100%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 18px;
    padding: 28px 22px 22px;
    max-width: 360px;
    width: 100%;
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    box-shadow:
      0 24px 60px rgba(0, 0, 0, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.95);
    text-align: center;
  }
  .visitor-modal-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--text);
  }
  .visitor-modal-subtitle {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-2);
    margin: 0 0 18px;
  }
  .visitor-modal-input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
    font-family: inherit;
    font-size: 15px;
    color: var(--text);
    margin-bottom: 14px;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.08s;
  }
  .visitor-modal-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.15);
  }
  .visitor-modal-input.shake { animation: visitor-modal-shake 0.42s ease-in-out; }
  @keyframes visitor-modal-shake {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-7px); }
    30% { transform: translateX(7px); }
    45% { transform: translateX(-5px); }
    60% { transform: translateX(5px); }
    75% { transform: translateX(-3px); }
    90% { transform: translateX(3px); }
  }
  .visitor-modal-button {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: linear-gradient(180deg, rgba(40, 40, 45, 0.86) 0%, rgba(20, 20, 23, 0.92) 100%);
    color: white;
    font-family: inherit;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      inset 0 -1px 0 rgba(0, 0, 0, 0.3),
      0 2px 6px rgba(0, 0, 0, 0.18);
    transition: transform 0.12s, opacity 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .visitor-modal-button:active { transform: scale(0.98); }
  .visitor-modal-button[disabled] { opacity: 0.7; cursor: default; }
  .visitor-modal-thanks {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text);
    text-align: center;
    padding: 6px 0 4px;
  }
  .visitor-modal-thanks-signature {
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-3);
  }
  .visitor-modal-close-button { margin-top: 18px; }