/* =========================================================================
# 2025-09-18 20:05 JST  styles.css
# 基本レイアウト + パネル + HUD + フォーム
# スマホ: C開=ページスクロール優先 / それ以外=逆積みドック（C→B→A）
# 変更点:
# - JS側の幅計算に一本化するための下地として、dock時のwidthはCSSの --card-w に委譲
# - 既存UIは維持（panelのposition/z-index/transformはそのまま）
# 今後の展開:
# - env(safe-area-inset-*) の導入検討
# - フォントサイズ/余白の微調整（縦横切替時の行数ズレ対策）
========================================================================= */

:root{
  --bg: #0f1115;
  --panel: #151925;
  --text: #e6e9ef;
  --muted: #a3abbd;
  --line: #24324b;
  --good: #9fe870;
  --bad:  #ff6b6b;

  /* ステージ/カードの最大幅（JSは width を触らない） */
  --card-w: min(96vw, 980px);
}


html.is-android, html.is-android body {
  overflow: hidden;
  overscroll-behavior: none;
}


*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0; padding:0; color:var(--text); background:var(--bg);
  font: 14px/1.6 system-ui, -apple-system, Segoe UI, Roboto, "ヒラギノ角ゴ ProN", "メイリオ", sans-serif;
}

header.titlebar{
  width:100%; padding:12px 16px; margin:0 auto;
  max-width: 1200px;
  border-bottom: 1px solid #131a25;
}
.title{ font-weight: 700; }

/* カード（ステージ+パネル） */
.card{
  position: relative; width: var(--card-w);
  margin: 8px auto 48px; padding: 8px;
}

/* ステージ（canvas） */
#cv{
  display: block; width: 100%; height: 360px; /* JSで最終確定 */
  border: 1px solid #1b2230; border-radius: 12px;
  background: #0c1019;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.015);
}

/* HUD */
.hud{
  position:absolute; right:10px; top:10px; z-index: 3;
  color:#dbe6ff; font: 12px/1.4 ui-monospace,Menlo,Consolas,monospace;
  user-select:none; pointer-events:none;
}
.hud .row{ display:flex; align-items:center; gap:6px; }
.hud .badge{ display:inline-block; padding:1px 6px; border-radius:6px;
  background: rgba(60,100,160,.25); border:1px solid rgba(100,140,220,.35); }

/* パネル */
.panel{
  position: relative; margin: 10px 0; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line);
  background: #0e1320;
}
.panelHdr{
  display:flex; align-items:center; justify-content:space-between;
  background: #2d3648;  /* 現状より少し明るい */
  border-bottom: 1px solid #1b2433;
}
.panelHdr h3{ margin: 0; font-size: 14px; font-weight: 600; }
.panelClose{
  user-select:none; cursor:pointer;
  width: 28px; height: 28px; border-radius: 8px;
  border:1px solid var(--line); background:#0e1320; color:var(--text);
}

.panelClose {
  background: #1f2635;
  border: 1px solid #445272;
  box-shadow: 0 0 4px rgba(255,255,255,0.1);
}
.panelClose:hover {
  background: #2b3244;
  border-color: #5a6a8c;
}


/* 1) すべてのパネルのヘッダーを基準枠に */
.panel .panelHdr{
  position: relative;
  display: flex;
  align-items: center;
  min-height: 40px;            /* ← 高さを統一（好みで36〜44px） */
  padding: 8px 40px 8px 12px;  /* 右に×ぶんの余白を確保 */
}

/* 2) ×ボタンはヘッダー右上に固定 */
.panel .panelHdr .panelClose{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px; height: 22px;   /* 見た目が揃うサイズ */
  line-height: 22px;
}


/* 3) Cだけ中央見せの署名を置く場合 */
.panelC .panelHdr{
  justify-content: center;     /* タイトルの代わりに中央寄せ */
}
.panelC .panelHdr .copyright{
  font-weight: bold;
  color: #33ccff;
  text-align: center;
}


.panelBody{ padding: 10px 12px 14px; }
.panel[aria-expanded="false"] .panelBody{ display: none; }
.panel[aria-expanded="true"]  .panelBody{ display: block; }

/*パネル内のレイアウト
/* 行のレイアウトを2カラムに */
.panel .row{
  display:flex;
  align-items:center;
  gap:12px;
}

/* ←ココが “入射点 [mm]” の幅を決める本体 */
.panel .row > div:first-child{
  flex: 0 0 9em;        /* 例：9em固定。pxでもchでもOK */
  /* 例：flex:0 0 120px;  とか   flex:0 0 12ch; でも可 */
}

/* 右カラム（フォーム＋range）は残りを全部使う */
.panel .row > div:last-child{
  flex: 1 1 auto;
  min-width: 0;         /* はみ出し防止の保険 */
}


/* PanelA：中身は左80%に収める（本体幅は維持：背景画像は右に残す） */
#probePad .panelBody{ position: relative; }
#probePad .panelBody .row{ width:80%; }     /* ← 行ごとに左80%で止める */


/* PanelA：3カラム（ラベル9em／フォーム60px／range残り） */
/* 3カラム：ラベル9em／フォーム60px／range(残り) */
#probePad .panelBody .row.triple{
  display:grid;
  grid-template-columns: 9em 60px 1fr;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
  justify-items:start;                 /* ← 1,2列はstartのままでOK */
}

/* ★ 第3カラムだけ“stretch”に戻す（ここが肝） */
#probePad .panelBody .row.triple > div:nth-child(3){
  justify-self: stretch;
  min-width: 0;                        /* はみ出し保険 */
}

/* rangeは“親が列いっぱい”になったうえで100%にする */
#probePad .panelBody .row.triple > div:nth-child(3) input[type=range]{
  width: 100%;                         /* ← 列幅いっぱいまで伸びる */
  height: 6px;
  accent-color: #ffcc00;
}

/*/*/*/*

/* PanelB：中身は左80%に収める（本体幅は維持：背景画像は右に残す） */
#bevelPad .panelBody{ position: relative; }
#bevelPad .panelBody .row{ width:80%; }     /* ← 行ごとに左80%で止める */

/* PanelB：3カラム（ラベル9em／フォーム60px／range残り） */
#bevelPad .panelBody .row.triple{
  display:grid;
  grid-template-columns: 9em 60px 1fr;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
  justify-items:start;
}
/* 3列目をstretch */
#bevelPad .panelBody .row.triple > div:nth-child(3){
  justify-self: stretch;
  min-width: 0;
}
/* rangeは列幅いっぱい */
#bevelPad .panelBody .row.triple > div:nth-child(3) input[type=range]{
  width: 100%;
  height: 6px;
  accent-color: #ffcc00;
}

@media (max-width: 640px) {
  .field-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .field-group label { grid-column: 1; }
  .field-group input[type="number"] { grid-column: 2; }

  /* スライダーだけ下に潜らせる＋インデント */
  .field-group input[type="range"] {
    grid-column: 1 / span 2;
    margin-left: 1rem;       /* └ の“ズレ”感 */
    margin-top: -0.25rem;
  }
}


/* フォーム行 */
.row{ display:grid; grid-template-columns: 180px 1fr; align-items:center; gap:6px 10px; margin: 6px 0; }
.row > div:first-child{ color: var(--muted); }
.muted{ color: var(--muted); }
.tiny{ font-size: 11px; color: var(--muted); }
.flex{ display:flex; align-items:center; }
.gap-8{ gap:8px; }

input[type="number"], select{
  width: 40%; max-width: 40%; padding: 6px 8px;
  background:#0e1320; color:var(--text);
  border:1px solid var(--line); border-radius:8px;
}
.chk{ display:inline-flex; align-items:center; gap:6px; }
.btn{ border:1px solid var(--line); background:#0e1320; color:var(--text); border-radius:8px; padding:6px 10px; }
.btn.sm{ padding:4px 8px; font-size:12px; }
.btn.warn{ border-color: #7a4; background:#322; }
.w-60{ width:60px; }
.w-80{ width:80px; }
.w-100{ width:100px; }
.w-120{ width:120px; }
.w-160{ width:160px; }

/* ===== 数値フォームを“桁幅”でちょうどにするユーティリティ ===== */
/* 既存の 40% 指定を上書きするため、セレクタを強めている */
.panel .row input[type="number"].w-60  { width:60px;  max-width:60px;  }
.panel .row input[type="number"].w-80  { width:80px;  max-width:80px;  }
.panel .row input[type="number"].w-90  { width:90px;  max-width:90px;  }
.panel .row input[type="number"].w-100 { width:100px; max-width:100px; }

/* 桁数ベースで揃えたい派（999.9 まで入る → 6chが目安） */
.panel .row input[type="number"].w-6ch { width:6ch; max-width:6ch; }

/* rangeを横に並べる時の最低限 */
.panel .row .range-inline{
  display:flex; align-items:center; gap:8px; width: 60%;
}
.panel .row .range-inline input[type="range"]{
  flex:1; height:6px; accent-color:#ffcc00;
}
.panel .row .range-inline .slider-val{
  min-width:70px; text-align:right; font-family:monospace; color:#ffcc00; font-weight:600;
}

/* 見た目を完全カスタムに統一 */
input[type=range]{
  -webkit-appearance: none;
  appearance: none;
  height: 22px;            /* 親の当たり判定を少し厚く */
  background: transparent; /* 既定の青帯を消す */
  --pos: 0%;               /* ← ここにJSで%を流し込む */
}

/* トラック（WebKit: iPad/Android/Chrome/Safari） */
input[type=range]::-webkit-slider-runnable-track{
  height: 6px;
  border-radius: 3px;
  /* 左を黄色、--pos まで。そこから右はグレー */
  background: linear-gradient(to right,
              #ffcc00 0%, #ffcc00 var(--pos),
              #444 var(--pos), #444 100%);
}

/* つまみ（WebKit） */
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: #ffcc00; border: 2px solid #222;
  margin-top: -6px; /* (18-6)/2 をマイナスで中央合わせ */
  cursor: pointer;
}

/* Firefox: トラック＆進捗 */
input[type=range]::-moz-range-track{
  height: 6px; border-radius: 3px; background: #444;
}
input[type=range]::-moz-range-progress{
  height: 6px; border-radius: 3px; background: #ffcc00;
}

/* つまみ（Firefox） */
input[type=range]::-moz-range-thumb{
  width: 18px; height: 18px; border-radius: 50%;
  background: #ffcc00; border: 2px solid #222; cursor: pointer;
}



/* ❌ 無効な入力欄（バリデーション違反） */
input.invalid {
  border-color: var(--bad);
  background: #301010;
}

/* Panel C 補助（AIVO） */
.panelC .btns.-aivo{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:8px 0; }
.panelC code, .panelC pre{ font:12px/1.4 ui-monospace,Menlo,Consolas,monospace; color:#dbe6ff; }
.panelC details{ border: 1px solid var(--line); border-radius: 8px; padding: 8px; background:#0e1320; }
.panelC details summary{ cursor: pointer; color: var(--text); }
.panelC .blk{
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: #0e1320;
}
.panelC .grid2{
  display: grid; grid-template-columns: 180px 1fr; gap: 6px 10px; margin-top: 8px;
}
.panelC .subttl{ color: var(--muted); font-weight: 600; margin: 2px 0 4px; }

/* スマホ（縦）でのドッキング: 逆積み C→B→A（JSでbottom計算）
   ※ 幅はCSSの --card-w に委譲（JSでは width を触らない） */
.dock-mode .panel{ position: fixed; left: 50%; transform: translateX(-50%); width: var(--card-w); }
.dock-mode #maintenance{ z-index: 6; }
.dock-mode #bevelPad{   z-index: 7; }
.dock-mode #probePad{   z-index: 8; }

/* HUD 長押しヒット（JSが子要素を注入。保険として定義） */
#hud .hud-hit{ position:absolute; right:-6px; top:-6px; width:48px; height:48px; pointer-events:auto; }

/* =============================================================
 * 2025-09-24 11:40 JST  追加: パネル背景イラスト（開時のみ）+ フォーム微調整
 * - 背景は .panelBody 内の ::after で描画（はみ出し防止）
 * - 開状態の判定: section[aria-expanded="true"] に合わせる
 * - 画像URLはCSS変数 --probe-bg-url / --bevel-bg-url で一元管理
 * ============================================================= */

:root{
  /* 画像URL（必要なら差し替え） */
  --probe-bg-url: url("aivoutimg01.png");
  --bevel-bg-url: url("aivoutimg02.png");
}

/* 親に床（積層コンテキスト）を作る */
#probePad .panelBody,
#bevelPad .panelBody{
  position: relative;
  z-index: 0;
  overflow: hidden;
}

/* 中身を一段だけ前に（疑似要素は自動で除外されるので :not は不要） */
#probePad .panelBody > *,
#bevelPad .panelBody > *{
  position: relative;
  z-index: 1;
}

/* 背景絵は背面へ */
#probePad[aria-expanded="true"] .panelBody::after,
#bevelPad[aria-expanded="true"] .panelBody::after{
  content: "";
  position: absolute;
  right: var(--pad-illust-right,10px);
  bottom: var(--pad-illust-bottom,10px);
  inline-size: clamp(120px,22vw,240px);
  aspect-ratio: 1 / 1.35;
  background: var(--probe-bg-url) no-repeat right bottom / contain;
  opacity: var(--pad-illust-opacity,.85);
  pointer-events: none;
  z-index: -1;
}
/* bevel用の画像は個別で差し替え */
#bevelPad[aria-expanded="true"] .panelBody::after{
  background-image: var(--bevel-bg-url);
}

/* 横向き・PCでだけサイズ上書き（@mediaは複数あってOK） */
@media (min-width: 601px), (orientation: landscape){
  #probePad[aria-expanded="true"] .panelBody::after,
  #bevelPad[aria-expanded="true"] .panelBody::after{
    inline-size: clamp(160px,20vw,250px);
  }
}

/* 極小スマホだけ .row を縦積み（HTMLは変えない） */
@media (max-width: 420px){
  .row{ display:block; margin-bottom:6px; }
  .row > div{ margin-bottom:4px; }
}

/* ベース：行はフレックス（既存があれば不要） */
#rowBevelType{
  display: flex;
  flex-wrap: wrap;          /* ← 改行を許可 */
  align-items: center;
  column-gap: 8px;
  row-gap: 8px;
}
#rowBevelType .bevelPresets{ display: flex; gap: 8px; } /* ボタン横並び */
#rowBevelType button{ white-space: nowrap; min-width: 7.5em; } /* 1文字折返し防止 */

/* 極小スマホだけ：3つめ(div=ボタン群)を次の段に落とす */
@media (max-width: 480px){
  #rowBevelType > div:nth-child(1){ order: 0; }   /* ラベル */
  #rowBevelType > div:nth-child(2){ order: 1; }   /* セレクト */
  #rowBevelType > div:nth-child(3){
    order: 2;
    flex-basis: 100%;       /* ★ここで強制改行（次の段に全面で置く） */
  }
}


@media (max-width: 480px) {
  .row.triple {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-bottom: 10px;  /* ← バーの下に少し余白 */
  }

  .row.triple .label {
    font-size: 0.9em;
    margin-bottom: 2px;
  }

  .row.triple input[type="number"] {
    width: 100%;
    height: 32px;
    font-size: 1em;
  }

  .row.triple input[type="range"] {
    width: 100%;
    height: 30px;           /* タップしやすい厚み */
    margin-top: 4px;        /* 数値とバーの間に余白 */
  }
}

/* --- 通常：横3カラムは現状のまま（既存CSS優先） --- */

/* --- 極小画面だけ：2段レイアウト（ラベル┃数値 の下にバー） --- */
@media (max-width: 480px){
  .panel .row.triple{
    display: grid;
    grid-template-columns: 9em minmax(72px, 1fr); /* 左=ラベル幅 / 右=数値 */
    grid-template-rows: auto auto;                /* 1段目: label+num / 2段目: range */
    grid-template-areas:
      "label num"
      "range range";
    column-gap: 8px;
    row-gap: 6px;
    align-items: center;
    margin-bottom: 10px;                           /* 指の逃げ場 */
  }
  .panel .row.triple > .label{ grid-area: label; }
  .panel .row.triple > div:nth-child(2){ grid-area: num; }
  .panel .row.triple > div:nth-child(3){ grid-area: range; justify-self: stretch; min-width: 0; }

  /* numberは小さめ固定、rangeは全幅＆太めでタップしやすく */
  .panel .row.triple input[type="number"]{ width: 88px; height: 32px; }
  .panel .row.triple input[type="range"]{ width: 100%; height: 30px; }
}


/* ヘッダー設定 */

.header {
  background: #111;
  color: #ccc;
  border-bottom: 1px solid #333;
  padding: 4px 8px;
  font-size: 0.9rem;
}

.header-inner {
  display: flex;
  justify-content: space-between; /* ←これが左右分ける */
  align-items: center;            /* ←縦位置を中央にそろえる */
}

.title {
  font-weight: 600;
}

.panelC {
  background: linear-gradient(180deg, #142033 0%, #0d141f 100%);
  border: 1px solid #33ccff;
  box-shadow: 0 0 10px rgba(51, 204, 255, 0.3);
}

.panelC .panelHdr {
  justify-content: center;
}

.panelC .copyright {
  text-align: center;
  font-weight: bold;
  color: #33ccff;        /* AIVOブルー */
  font-size: 0.95em;
  letter-spacing: 0.8px;
  padding: 0px 0;
  text-shadow: 0 0 8px rgba(51,204,255,0.5);
}


/* =========================================================
 * スマホ時：1行目「ラベル┃数値」→ 2行目「└ レンジバー」
 * HTMLは .row.triple の 3列目が range コンテナである前提（現状のままOK）
 * ========================================================= */
@media (max-width: 480px){
  .panel .row.triple{
    display: grid;
    grid-template-columns: 9em minmax(72px, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "label num"
      "range range";
    column-gap: 8px;
    row-gap: 6px;
    align-items: center;
    margin-bottom: 10px;
  }

  /* 1列目(ラベル)・2列目(数値)・3列目(レンジ) を割り当てる */
  .panel .row.triple > div:nth-child(1){ grid-area: label; }
  .panel .row.triple > div:nth-child(2){ grid-area: num; }
  .panel .row.triple > div:nth-child(3){
    grid-area: range;
    position: relative;

    /* └ の“枝”ぶんだけインデント（好みで調整） */
    padding-left: 1.25em;
    min-width: 0; /* はみ出し防止 */
  }

  /* └ の描画（左縦＋下横のコーナー線） */
.panel .row.triple > div:nth-child(3){
  grid-area: range;
  position: relative;

  /* └ のインデント＋右の余白ぶん */
  padding-left: 1.5em;   /* ← 元1.25em → 線＋隙間ぶん広げた */

  min-width: 0;
}

/* └ の描画 */
.panel .row.triple > div:nth-child(3)::before{
  content: "";
  position: absolute;
  left: 0.35em;
  top: 0.2em;
  width: 0.6em;
  height: 0.9em;
  border-left: 2px solid #58657a;
  border-bottom: 2px solid #58657a;
  border-radius: 0 0 0 4px;
  pointer-events: none;
}

  /* レンジは列幅いっぱい＆タップ厚め */
  .panel .row.triple > div:nth-child(3) input[type="range"]{
    width: 100%;
    height: 30px;       /* タップしやすさ確保 */
    margin: 0;          /* 余白暴れ防止 */
  }
}



/* 入力をrenderから外したので、ブラウザの既定ジェスチャーは許可 */
canvas { touch-action: none; } /* pointer一本化のため */