/* =========================================================================
# 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;
  padding: 8px 12px; background: #262c3b;
  border-bottom: 1px solid #131a25;
}
.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);
}

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

/* フォーム行 */
.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-120{ width:120px; }
.w-160{ width:160px; }

/* ❌ 無効な入力欄（バリデーション違反） */
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%;       /* ★ここで強制改行（次の段に全面で置く） */
  }
}


/* ヘッダー設定 */

.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;
}

.copyright {
  font-size: 0.75rem;
  opacity: 0.8;
}



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