/* ventoo.css — ゼロクラスで整う素 HTML + 最小 UI 部品  (ventoo-0.1)
 *
 * 目的: 安モデル(Opus4.6/GPT5.2)に CSS を一切書かせない。
 *   - 素の <body><h1><button><input><dialog><table> だけで「それっぽく整う」
 *   - 足したいときだけ .card / .stack / .row / .grid / .muted / .badge を付ける
 *   - ダークモードは prefers-color-scheme で自動。安モデルは配色を考えなくてよい
 *   - SDK 側 (ventoo.js) の #v-toast-host / .v-toast と噛み合う
 *
 * 使い方(生成コアが <head> 先頭で1行注入):
 *   <link rel="stylesheet" href="/ventoo_v3/kit/ventoo.css">
 */

/* ---- design tokens -------------------------------------------------------- */
:root {
  --v-bg:        #f7f7f9;
  --v-surface:   #ffffff;
  --v-surface-2: #f0f0f4;
  --v-text:      #1b1b1f;
  --v-muted:     #6b6b76;
  --v-border:    #e2e2e8;
  --v-accent:    #4f46e5;
  --v-accent-ink:#ffffff;
  --v-danger:    #dc2626;
  --v-ok:        #16a34a;
  --v-radius:    12px;
  --v-radius-sm: 8px;
  --v-gap:       12px;
  --v-maxw:      720px;
  --v-shadow:    0 1px 2px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.05);
  --v-font: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --v-bg:        #16161a;
    --v-surface:   #1f1f26;
    --v-surface-2: #26262f;
    --v-text:      #ececf1;
    --v-muted:     #a0a0ad;
    --v-border:    #33333d;
    --v-accent:    #8b83ff;
    --v-accent-ink:#12121a;
    --v-shadow:    0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
}

/* ---- base (ゼロクラスで整う本体) ----------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--v-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--v-text);
  background: var(--v-bg);
  /* 素の body に本文を書くだけで中央寄せ・読みやすい幅になる */
  max-width: var(--v-maxw);
  margin-inline: auto;
  padding: 24px 16px 96px;
}
/* body に直接ゲームキャンバス等を全画面で置きたい場合の逃げ道 */
body.v-full { max-width: none; margin: 0; padding: 0; }

h1, h2, h3 { line-height: 1.25; margin: 1.4em 0 .5em; font-weight: 700; }
h1 { font-size: 1.6rem; margin-top: .2em; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }
p  { margin: .6em 0; }
a  { color: var(--v-accent); text-underline-offset: 2px; }
small, .muted { color: var(--v-muted); font-size: .875em; }
hr { border: none; border-top: 1px solid var(--v-border); margin: 20px 0; }
code, pre {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  background: var(--v-surface-2);
  border-radius: 6px;
}
code { padding: .1em .35em; font-size: .9em; }
pre  { padding: 12px; overflow: auto; }
img { max-width: 100%; height: auto; }
/* ゲーム等でタップ操作する canvas も連打拡大を抑止(ピンチは残す) */
canvas { touch-action: manipulation; }

/* ---- form controls (素タグで整う) --------------------------------------- */
button, input, textarea, select {
  font: inherit;
  color: inherit;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
textarea, select {
  width: 100%;
  padding: 10px 12px;
  background: var(--v-surface);
  border: 1px solid var(--v-border);
  border-radius: var(--v-radius-sm);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
textarea { min-height: 88px; resize: vertical; }
input:focus, textarea:focus, select:focus {
  border-color: var(--v-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--v-accent) 25%, transparent);
}
label { display: block; font-size: .9rem; color: var(--v-muted); margin: 10px 0 4px; }

button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 16px;
  background: var(--v-accent);
  color: var(--v-accent-ink);
  border: 1px solid transparent;
  border-radius: var(--v-radius-sm);
  font-weight: 600;
  cursor: pointer;
  transition: filter .12s, transform .04s;
  -webkit-user-select: none; user-select: none;
  /* iOS: 連打でダブルタップ拡大&300ms遅延が起きるのを抑止(ピンチズームは残す) */
  touch-action: manipulation;
}
button:hover, .btn:hover { filter: brightness(1.06); }
button:active, .btn:active { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: not-allowed; }
/* 副次ボタン: <button class="ghost"> / 危険: <button class="danger"> */
button.ghost, .btn.ghost {
  background: var(--v-surface); color: var(--v-text); border-color: var(--v-border);
}
button.danger, .btn.danger { background: var(--v-danger); color: #fff; }

/* ---- layout helpers ------------------------------------------------------ */
.stack { display: flex; flex-direction: column; gap: var(--v-gap); }
.row   { display: flex; flex-direction: row; gap: var(--v-gap); align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grid  { display: grid; gap: var(--v-gap); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.spacer { flex: 1 1 auto; }
.center { text-align: center; }

/* ---- card / surface ------------------------------------------------------ */
.card {
  background: var(--v-surface);
  border: 1px solid var(--v-border);
  border-radius: var(--v-radius);
  padding: 16px;
  box-shadow: var(--v-shadow);
}
.card + .card { margin-top: var(--v-gap); }

/* ---- badge / chip -------------------------------------------------------- */
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: var(--v-surface-2); color: var(--v-muted);
  font-size: .78rem; font-weight: 600;
}
.badge.accent { background: color-mix(in srgb, var(--v-accent) 18%, transparent); color: var(--v-accent); }
.badge.ok     { background: color-mix(in srgb, var(--v-ok) 18%, transparent);     color: var(--v-ok); }
.badge.danger { background: color-mix(in srgb, var(--v-danger) 18%, transparent); color: var(--v-danger); }

/* ---- list (掲示板/メモ行) ------------------------------------------------ */
ul.v-list, ol.v-list { list-style: none; padding: 0; margin: 0; }
ul.v-list > li, ol.v-list > li {
  padding: 12px 14px;
  background: var(--v-surface);
  border: 1px solid var(--v-border);
  border-radius: var(--v-radius-sm);
  margin-bottom: 8px;
}

/* ---- table --------------------------------------------------------------- */
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--v-border); text-align: left; }
th { color: var(--v-muted); font-weight: 600; font-size: .9em; }

/* ---- dialog (素の <dialog> が整う) --------------------------------------- */
dialog {
  border: 1px solid var(--v-border);
  border-radius: var(--v-radius);
  background: var(--v-surface);
  color: var(--v-text);
  padding: 20px;
  max-width: min(92vw, 440px);
  box-shadow: var(--v-shadow);
}
dialog::backdrop { background: rgba(0,0,0,.45); backdrop-filter: blur(2px); }

/* ---- toast (ventoo.js の ui.toast と噛み合う) ---------------------------- */
#v-toast-host {
  position: fixed; left: 0; right: 0; bottom: 20px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none; z-index: 9999;
}
.v-toast {
  pointer-events: auto;
  max-width: 90vw;
  padding: 10px 16px;
  background: var(--v-text); color: var(--v-bg);
  border-radius: 999px;
  font-size: .9rem; font-weight: 600;
  box-shadow: var(--v-shadow);
  opacity: 0; transform: translateY(8px);
  transition: opacity .25s, transform .25s;
}
.v-toast-in { opacity: 1; transform: translateY(0); }

/* ---- utility ------------------------------------------------------------- */
.hidden { display: none !important; }
