/* 島と行。★設定画面の並び（iOSの設定と同じ作り）。
 *
 * ★区切りは**線ではなく面**で作る——地より明るい面の角丸を浮かせる。
 *   見出しを大きくして罫線を引くと、区切りが二重になって逆に読めなくなる。
 * ★ホームのカードと同じ語彙なので、画面をまたいで同じ物に見える。
 */

/* ---------------------------------------------------------------- 島と行 */
/* ★区切りは**線ではなく面**で作る（iOS の設定画面と同じ作り）。
 *   ① 地（--ink1）より明るい面（--ink2）の角丸を浮かせる。この輪郭が区切り
 *   ② 島と島のあいだの余白が、実際にはいちばん効く区切り
 *   ③ 見出しは小さく薄く**上**、説明は島の**下**。役割を分ける
 *   ④ 島の中の罫線は字下げする（文字の左端から。縁まで伸ばすと島が割れる）
 * ★見出しを大きくして下に罫線を引く形をやめた。罫線と余白で区切りが二重になり、
 *   どこからどこまでが1つのまとまりなのか逆に読めなくなっていた。
 * ★ホームのカードと同じ語彙（--ink2 / --edge / 角丸8px）。
 *   画面をまたいで同じ物に見えるようにする。 */
.group {
  background: var(--ink2);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: 0 14px;
}
/* ★行（.row）が入らない島。行が無いと上下の余白を .row が作ってくれないので、
 *   ここで足す。既定の padding に上下を付けると、行のある島まで空いてしまう。 */
.group.pad { padding: 14px; }
/* ★見出しは「島の名札」。中身より目立たせない。
 *   大きく太くすると、名札のほうが中身より強くなって読む順が狂う。 */
.sec-t {
  margin: 30px 4px 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .08em;
  color: var(--t3);
}
/* ★説明は島の下。iOS のフッターと同じ役割で、
 *   「これは何か」ではなく「気をつけること」を置く場所。 */
.sec-foot {
  margin: 8px 4px 0;
  font-size: 11px; color: var(--t3); line-height: 1.5;
}
.sec-note { margin-top: 10px; font-size: 11px; color: var(--t2); line-height: 1.45; }

.row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0;
  /* ★下ではなく**上**に引く。下だと島の最後の行の線が縁に触れて、
   *   島が閉じずに割れて見える。 */
  border-top: 1px solid var(--edge);
}
.row:first-child { border-top: none; }
/* 中身が無いときの1行。★空の島を出さない。 */
.row.muted .row-main { font-size: 13px; color: var(--t3); }
/* ★説明が長いので上揃え。中央揃えだと行の高さが説明の量で変わるたびに
 *   スイッチの位置が上下して、並びが揃わない。 */
.row.mid { align-items: center; }
.row-main { flex: 1; min-width: 0; }
.row-name { display: flex; align-items: center; }
.row-name .ic { width: 16px; height: 16px; color: var(--t2); margin-right: 7px; }
.row-name .t { font-size: 15px; color: var(--t1); }
.row-name .t.off { color: var(--t3); }
.row-desc { margin-top: 8px; font-size: 11px; color: var(--t2); line-height: 1.45; }
/* 行の中のフォームは行に収める（余計な余白を作らない） */
.row form { margin: 0; display: flex; gap: 8px; }

/* 行に添える小さな札と値 */
.badge {
  margin-left: 8px; font-size: 10px; color: #fff;
  background: var(--brand); border-radius: 4px; padding: 2px 6px;
}
.card-brand {
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  color: var(--t2);
}
.card-num {
  margin-left: 8px; font-size: 15px; color: var(--t1);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}