/* =========================================================
   スマホ向けの仕上げ（390px 幅を基準）
   style.css の後に読み込む。色・余白・角丸は style.css の :root のトークンを使う
   ねらい：1画面に入る情報を増やす／主な操作を親指の届く下側へ／
           編集・削除など二次的な操作は控えめに
   ========================================================= */
@media (max-width: 640px) {
  /* ---------- ヘッダー：1行に詰める ---------- */
  .header-inner { padding: var(--s-3) var(--s-5); }
  .logo { width: 26px; height: 26px; }
  .brand-name { font-size: 1rem; }
  .tagline { display: none; }
  .icon-btn { min-width: 44px; min-height: 44px; justify-content: center; }

  .page-head { margin-bottom: var(--s-4); }
  .page-head .eyebrow { margin-bottom: 0; }
  main > .page-head:first-child {
    min-height: 104px;
    padding: var(--s-5) 132px var(--s-5) var(--s-5);
    background-position: right var(--s-3) bottom;
    background-size: auto 104%;
  }
  main > .page-head:first-child h1 { font-size: 1.6rem; }
  /* 下のタブ：選んでいるタブはその色の面に */
  .tabs a.active { background: var(--tab-soft); }
  .segmented { margin-bottom: var(--s-4); }
  .seg { min-height: 40px; }

  /* ---------- 主な操作（＋豆を登録・＋記録する）は右下に浮かせる ---------- */
  .page-head > .btn.primary {
    position: fixed;
    right: var(--s-5);
    bottom: calc(72px + var(--s-4) + env(safe-area-inset-bottom));
    z-index: 26;
    min-height: 52px;
    padding: 0 var(--s-6);
    border-radius: 999px;
    box-shadow: var(--shadow-float);
  }
  /* 最後のカードがボタンに隠れないように */
  body:has(.page-head > .btn.primary) main { padding-bottom: calc(var(--s-8) + 52px); }
  /* 入力中・空の状態（中央に同じボタンがある）では出さない */
  body:has(#bean-form, #log-form, .empty .btn.primary) .page-head > .btn.primary { display: none; }

  /* ---------- カード ---------- */
  .grid-cards { gap: var(--s-3); }
  .card { gap: var(--s-3); padding: var(--s-4) var(--s-5); }
  .card-top { gap: var(--s-3); }
  .card-top .score .bean { width: 15px; height: 15px; }

  /* 編集・削除は文字だけにして、主な操作を目立たせる */
  .card .actions { align-items: center; gap: var(--s-2); }
  .card .actions .btn.sm { min-height: 44px; }
  .card .actions [data-action^="edit"] { margin-left: auto; }
  .card .actions [data-action^="edit"],
  .card .actions [data-action^="delete"] { padding: 0 var(--s-3); border-color: transparent; }
  .card .actions [data-action^="edit"] { color: var(--muted); }
  .card .actions .btn.armed { border-color: var(--danger); color: var(--on-primary); }

  /* 記録の条件（豆・湯・比率…）は1つの帯にまとめる */
  .card .cond {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1) var(--s-5);
    padding: var(--s-3) var(--s-4);
    background: var(--surface);
    border-radius: var(--r-sm);
  }
  .card .cond div { display: flex; align-items: baseline; gap: var(--s-2); padding: 0; background: none; }
  .card .cond dd { font-size: .88rem; }
  .card .taste { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* 記録の集計は1行に */
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); margin-bottom: var(--s-4); }
  .stats .stat:last-child { grid-column: auto; }
  .stat { min-width: 0; padding: var(--s-3); }
  .stat-label { font-size: .68rem; }
  .stat-value { flex-wrap: wrap; gap: var(--s-1) var(--s-2); font-size: 1rem; }
  .stat-value.small {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: .8rem;
    line-height: 1.4;
  }

  /* ---------- 淹れ方の一覧：カードを低くして一覧しやすく ---------- */
  .method-grid { gap: var(--s-3); }
  .method-card { gap: var(--s-2); padding: var(--s-4) var(--s-7) var(--s-4) 68px; }
  .method-card::before { left: var(--s-4); top: var(--s-4); width: 40px; height: 40px; background-size: 28px; }
  .method-card > .small.muted {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: .8rem;
  }
  .method-meta { display: flex; flex-wrap: wrap; gap: 0 var(--s-4); }
  .method-meta div { display: flex; align-items: baseline; gap: var(--s-2); padding: 0; background: none; }
  .method-meta dd { font-size: .82rem; }
  .method-foot { display: none; }
  .method-card::after {
    content: "→";
    position: absolute;
    top: 50%;
    right: var(--s-4);
    transform: translateY(-50%);
    color: var(--accent);
    font-weight: 600;
  }
  .group-title { margin: var(--s-6) 0 var(--s-3); }

  /* ---------- コラム：カード全体を押せるように ---------- */
  .feature { padding: var(--s-5); margin-bottom: var(--s-5); }
  .column-card .title-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-md); }
  .column-card .actions .btn { display: none; }
  .column-card .actions:not(:has(.chip)) { display: none; }
  .column-card .excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}