:root{ --muted:#667; --ink:#222; --brand:#e24;
  --fail:#fee; --fail-t:#900;
  --succ:#eef; --succ-t:#114;
  --gsuc:#efe; --gsuc-t:#063;
}
body{font-family:system-ui, -apple-system, "Segoe UI", sans-serif; color:var(--ink);
     max-width:1000px; margin:24px auto; padding:0 16px; line-height:1.65}
h1{color:var(--brand)} .muted{color:var(--muted)}
.box{border:1px solid #ddd; border-radius:12px; padding:16px; background:#fff}
.hidden{display:none}
.row{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.grid{display:grid; gap:12px} .grid.cols-2{grid-template-columns:repeat(2,1fr)}
.sep{height:1px; background:#eee; margin:16px 0}
label{display:inline-block} input[type="number"]{width:5.5em}
button{padding:.55em 1em; border-radius:10px; border:1px solid #ccc; background:#fafafa; cursor:pointer}
button[disabled]{opacity:.5; cursor:not-allowed}
.pill{display:inline-block; padding:.15em .6em; border-radius:999px; font-weight:700; border:1px solid #ccc; background:#fff}
.fail{background:var(--fail); color:var(--fail-t)}
.succ{background:var(--succ); color:var(--succ-t)}
.gsucc{background:var(--gsuc); color:var(--gsuc-t)}

.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; min-width:720px}
th,td{border:1px solid #ddd; padding:6px; text-align:center}
.badge{padding:.15em .6em; border-radius:999px; border:1px solid #ccc}

/* 超狭幅：カード化 */
@media (max-width:600px){
  table.responsive{min-width:0; border-collapse:separate; border-spacing:0}
  table.responsive thead{display:none}
  table.responsive, table.responsive tbody, table.responsive tr, table.responsive td{display:block; width:100%}
  table.responsive tr{border:1px solid #eee; border-radius:10px; margin:10px 0; background:#fff; overflow:hidden}
  table.responsive td{display:flex; justify-content:space-between; gap:8px; padding:10px 12px; border:0; border-bottom:1px solid #f2f2f2}
  table.responsive td:last-child{border-bottom:0}
  table.responsive td::before{content:attr(data-label); font-weight:600; color:var(--muted)}
  table.responsive select, table.responsive button{width:100%}
}

/* === scroll-friendly log & sticky heading === */
html{ scroll-behavior:smooth; }

section>h2{
  position: sticky; top: 0;
  background: linear-gradient(#fff, rgba(255,255,255,.9));
  margin-top: -.5rem; padding-top: .5rem;
  border-bottom: 1px solid #f3f3f3; z-index: 5;
}


/* スマホ時はログの上下パディングを少し増やして指で掴みやすく */
@media (max-width:768px){
  .log{ padding: 10px }
}

/* === Mobile hardening pack ===================================== */
/* 全体の横スクロールを封じる＆安全領域に配慮 */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
body { padding-left: env(safe-area-inset-left, 0); padding-right: env(safe-area-inset-right, 0); }

/* sticky見出しの被り軽減（上部に安全余白） */
section { scroll-margin-top: 56px; }
section>h2 { top: env(safe-area-inset-top, 0); }

/* テーブルの子要素が横に広がっても折り返せるように */
.table-wrap, table, th, td { min-width: 0; }
table select, table button, table input { max-width: 100%; min-width: 0; }

/* 入力時のiOS強制ズーム対策（16px未満だとズームされる） */
input, select, button { font-size: 16px; }

/* === ログ領域 === */
.log {
  border:1px solid #eee;
  border-radius:10px;
  padding:8px;
  background:#fff;
}
.log > div { margin-bottom:4px; }

/* sticky見出し */
section>h2{
  position: sticky; top: 0;
  background: linear-gradient(#fff, rgba(255,255,255,.9));
  margin-top: -.5rem; padding-top: .5rem;
  border-bottom: 1px solid #f3f3f3; z-index: 5;
}

/* 狭幅時はフォームを縦積み＆入力幅フル */
@media (max-width: 768px){
  .row { gap: 12px; }
  .row label { display:block; width:100% }
  .row input, .row select { width: 100% }
}

/* さらに狭い端末：レスポンシブカード表の“はみ出し”を抑止 */
@media (max-width: 600px){
  table.responsive td { flex-wrap: wrap; }
  table.responsive td > * { min-width: 0; flex: 1 1 auto; }
}

/* === Mobile overflow fix (no cutoff) ===================== */
/* ビューポート左右の安全域を確保（iOSノッチ対策） */
body{
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

/* フレックス行の子が“横に伸びすぎる”のを防ぐ */
.row > *{ min-width: 0; }
@media (max-width: 768px){
  .row label{ display:flex; align-items:center; gap:10px; width:100%; }
  .row input, .row select{ flex:1 1 auto; min-width:0; width:100%; }
}

/* テーブルのカード化モードでのはみ出し防止 */
table.responsive, table.responsive *{ min-width:0; }
table.responsive td{ align-items:center; }
table.responsive td.btns{ display:flex; flex-wrap:wrap; gap:8px; }
table.responsive td.btns > *{ flex:1 1 40%; } /* ボタンが自動で折り返し */
.badge{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media (min-width: 769px){
  body {max-width: 90%;}
}