/* ============================================================
   Bottom Sheet — 選択シート
   画面下からせり上がる選択面。グリップ＋署名の息継ぎ線で
   「JabaracDesign の面」と分かる。影は物理的に浮く面のみに許す。
   （.breath は section-header と共有する署名要素）
   ============================================================ */

.framed {
  width: 300px; max-width: 100%;
  border: 1px solid var(--line); border-radius: var(--radius-surface);
  background: var(--surface); color: var(--ink); overflow: hidden;
  box-shadow: var(--shadow-pop);
}
.framed .grip { width: 36px; height: 4px; border-radius: 2px; background: var(--line); margin: 12px auto 6px; }
.framed .fh { font-family: var(--font-serif); font-size: 15px; font-weight: 500; letter-spacing: .1em; text-align: center; padding: 4px 0; }
.framed .breath { width: 28px; height: 1.5px; background: var(--brand); margin: 9px auto 0; }
.framed .fbody { padding: 18px; }
.framed .fbody .opt { padding: 13px 4px; border-bottom: 1px solid var(--line); }
.framed .fbody .opt:last-child { border-bottom: none; }