/* ===== settings: 設定シートの中身 ===== */

.charpick{display:flex;gap:10px}
.charpick button{flex:1;display:flex;align-items:center;gap:10px;border:3px solid var(--line);border-radius:16px;padding:8px 12px;background:var(--surface);font-weight:800;font-size:16px;text-align:left}
.charpick button.on{border-color:var(--accent);background:var(--accent-soft)}
.charpick .face{width:48px;height:48px;border-radius:50%;overflow:hidden;background:#C9F2FF;flex:none}
.charpick .face svg,.charpick .face img{width:100%;height:100%;display:block}
.charpick small{display:block;font-size:12px;color:var(--ink2);font-weight:700}
.voicebox{display:flex;flex-direction:column;gap:0}
.vcard{display:flex;flex-direction:column}
.vcard .vh{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px}
.vcard .vh .ibtn{flex:none;width:42px;height:42px}
.stat{background:var(--surface2);border-radius:14px;padding:12px 14px;font-size:15px;color:var(--ink2);font-weight:700;display:flex;flex-direction:column;gap:4px}
.stat b{color:var(--ink)}
/* 設定シートは見出し付きのグループに分けたリスト。白いカードを灰色の隙間で区切る */
#sheet .panel{background:var(--bg);padding:0;gap:0}
#sheet .shead{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface);border-radius:24px 24px 0 0;border-bottom:1px solid var(--line);padding:14px 16px}
#sheet .sbody{display:flex;flex-direction:column;gap:16px;padding:16px 14px calc(20px + env(safe-area-inset-bottom))}
#sheet .sgroup{background:var(--surface);border-radius:16px;padding:0 14px;box-shadow:0 1px 3px rgba(0,25,88,.06)}
#sheet .sgroup>h4{margin:0;padding:13px 0 3px;font-size:13px;font-weight:800;color:var(--ink3);letter-spacing:.04em}
#sheet .srow{padding:11px 0;border-top:1px solid var(--line)}
#sheet .sgroup>h4+.srow{border-top:0}
#sheet .srow{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;min-height:52px;font-size:15px;color:var(--ink);font-weight:700}
#sheet .sname{flex:1;min-width:0;font-size:15px;font-weight:700;color:var(--ink)}
#sheet .sname small{display:block;font-size:12px;font-weight:600;color:var(--ink3);line-height:1.45;margin-top:2px}
#sheet .sval{flex:none;font-size:14px;font-weight:800;color:var(--ink2)}
#sheet input[type=text]{flex:none;width:min(210px,46%);text-align:right;font-size:16px;padding:8px 10px;border-radius:10px;border:2px solid var(--line)}
#sheet select{flex:none;max-width:56%}
/* チェックボックスは iOS 風のトグルスイッチに見せる */
#sheet .srow input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;width:52px;height:32px;margin:0;border:0;border-radius:999px;background:var(--line);position:relative;transition:background .15s}
#sheet .srow input[type=checkbox]::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,25,88,.28);transition:transform .15s}
#sheet .srow input[type=checkbox]:checked{background:var(--good)}
#sheet .srow input[type=checkbox]:checked::after{transform:translateX(20px)}
/* スライダーは、上の行に項目名と現在値、下の行に両端ラベル付きのバー */
#sheet .srange{flex-direction:column;align-items:stretch;gap:2px;padding-bottom:6px}
#sheet .srange .rtop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
#sheet .srange .rbar{display:flex;align-items:center;gap:10px}
#sheet .srange .rbar .end{flex:none;font-size:12px;font-weight:700;color:var(--ink3)}
#sheet .srange input[type=range]{flex:1;min-width:0;width:auto}
#sheet .charpick{padding:10px 0 11px}
#sheet .charpick button{border-width:2px;padding:8px 10px;font-size:15px}
#sheet .charpick .face{width:42px;height:42px}
#sheet .vcard .vh{gap:10px;justify-content:space-between}
#sheet .stat{background:none;border-radius:0;padding:12px 0;font-size:14px}
#sheet .snote{padding:0 0 12px;font-size:12.5px;color:var(--ink3);line-height:1.55;font-weight:600}
@media (max-width:560px){
  #sheet .sbody{gap:12px;padding:12px 10px calc(16px + env(safe-area-inset-bottom))}
  #sheet .sgroup{padding:0 12px}
  #sheet .srow{font-size:14px;gap:8px;min-height:48px}
  #sheet .sname{font-size:14px}
  #sheet .srow input[type=checkbox]{width:46px;height:28px}
  #sheet .srow input[type=checkbox]::after{width:22px;height:22px}
  #sheet .srow input[type=checkbox]:checked::after{transform:translateX(18px)}
  #sheet input[type=text]{width:min(160px,44%)}
  #sheet .charpick button{font-size:14px;gap:6px;padding:8px}
  #sheet .charpick .face{width:34px;height:34px}
  #sheet .charpick small{font-size:11px}
}
select{font:inherit;background:var(--surface2);color:var(--ink);border:0;border-radius:10px;padding:9px 10px;font-size:15px}
input[type=range]{width:100%;height:32px}

/* ===== プラン。設定シートの「プラン」のグループと、決済から戻ったときの案内 ===== */
#sheet .billbtns{flex-wrap:wrap;gap:8px;justify-content:flex-start}
#sheet .billbtns .btn{flex:1;min-width:120px;padding:11px 14px;font-size:15px}
#sheet .plancards{display:flex;flex-direction:column;gap:10px;padding:2px 0 12px}
#sheet .plancard{border:2px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;background:var(--surface)}
#sheet .plancard .pctop{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
#sheet .plancard .pcname{font-size:16px;font-weight:800;color:var(--ink)}
#sheet .plancard .pcprice{flex:none;font-size:15px;font-weight:800;color:var(--accent)}
#sheet .plancard .pcbody{margin:0;font-size:13px;font-weight:600;color:var(--ink2);line-height:1.5}
#sheet .plancard .btn{align-self:flex-end;padding:9px 22px;font-size:15px}
#sheet .snote.bad{color:var(--bad)}
.billnote{position:absolute;left:12px;right:12px;top:12px;z-index:20;display:flex;align-items:center;gap:10px;background:var(--good-soft);color:var(--ink);border-radius:16px;padding:12px 14px;font-size:15px;font-weight:700;box-shadow:var(--shadow)}
.billnote .bntext{flex:1;min-width:0;line-height:1.5}
.billnote .ibtn{flex:none;width:38px;height:38px;font-size:16px}
@media (max-width:560px){
  .billnote{font-size:13.5px;padding:10px 12px}
  #sheet .plancard{padding:10px 12px}
  #sheet .plancard .pcname{font-size:15px}
}