/* 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:        #faf9f6;
  --v-surface:   #ffffff;
  --v-surface-2: #f2f0ea;
  --v-text:      #1f1d1a;
  --v-muted:     #6f6a63;
  --v-border:    #e5e1d8;
  --v-accent:    #6d28d9;
  --v-accent-ink:#ffffff;
  --v-danger:    #dc2626;
  --v-ok:        #16a34a;
  --v-warn:      #f59e0b;
  --v-radius:    14px;
  --v-radius-sm: 10px;
  --v-gap:       12px;
  --v-maxw:      720px;
  --v-shadow:    0 1px 2px rgba(60,40,10,.05), 0 6px 20px rgba(60,40,10,.06);
  --v-font: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --v-bg:        #191715;
    --v-surface:   #232019;
    --v-surface-2: #2b2822;
    --v-text:      #efece6;
    --v-muted:     #a59f95;
    --v-border:    #3a362e;
    --v-accent:    #a78bfa;
    --v-accent-ink:#14111c;
    --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; }
/* iOS の「ダブルタップで拡大」と、それに伴う連打の取りこぼしを、押される要素だけで抑止。
   manipulation はスクロールとピンチ拡大を残すので、読むための拡大は効いたまま。
   div 等を自前のタップ領域にした時は class="tap-area"（ゲーム盤なら "game-canvas"）を付ける。 */
button, .btn, a, label, summary, select, canvas,
input[type=button], input[type=submit], input[type=reset],
input[type=checkbox], input[type=radio],
[role=button], [role=tab], [role=switch], [role=option], [onclick],
.tap-area, .game-canvas {
  touch-action: manipulation;
}

/* 生成物の <input type="password"> は配置前に type="text" data-v-secret に書き換える (gen_lib.php)。
   password 欄はブラウザが日本語入力 (IME) を止めるので日本語の合言葉が打てない。見た目の伏せ字は
   この 1 行で残す (対応しないブラウザでは素の文字が見えるだけで、入力は壊れない)。 */
[data-v-secret] { -webkit-text-security: disc; }

/* 長押しで遊ぶ画面(枠/キャンバス/絵文字)自体がオブジェクト選択される・iOSの
   コールアウトが出る・要素がドラッグされるのを既定で抑止。読む/書く要素は選択可のまま。 */
html { -webkit-touch-callout: none; }
/* 見出しは選択可から外す: iOS の「トン、押しっぱなし」で近くの見出しが選ばれるため (2026-09-05)。
   文章 (p / li / td など) と .selectable はコピーできるまま。 */
body { -webkit-user-select: none; -moz-user-select: none; user-select: none; }
p, li, td, th, pre, code, blockquote, label,
input, textarea, select, [contenteditable], .selectable {
  -webkit-user-select: text; -moz-user-select: text; user-select: text;
}
canvas, img {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-user-drag: none; user-drag: none;
}

/* ---- 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;
}
button:hover, .btn:hover { filter: brightness(1.06); }
/* 押下の 1px 沈み。transform ではなく個別プロパティ translate で書く: transform だとアプリ側の
   `transform: translate(-50%,-50%)` (絶対配置ボタンの中央寄せ) を押している間だけ上書きして、ボタンが
   半分ぶん飛び mouseup がボタンの外に落ちて click が発火しない (爆弾まわし 2026-09-03 実測) */
button:active, .btn:active { translate: 0 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); }
.badge.warn   { background: color-mix(in srgb, var(--v-warn) 18%, transparent);   color: var(--v-warn); }

/* ---- 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); }
/* 出る時に 1 回だけ跳ねる（Ventoo.ui.toast の bounce オプション）。
   .v-toast-in の transition と同じ transform を触るが、animation の方が強いので
   0.3 秒はこちらが勝ち、終わったあと transition 後の値（translateY(0)）に落ち着く。 */
.v-toast-bounce { animation: v-toast-bounce .3s cubic-bezier(.34,1.56,.64,1) 1; }
@keyframes v-toast-bounce {
  0%   { transform: translateY(8px) scale(.94); }
  55%  { transform: translateY(-4px) scale(1.04); }
  100% { transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .v-toast-bounce { animation: none; } }

/* ---- site header (v3 のサイトページ専用) ---------------------------------- */
/* index / make / apps / gallery の最上部に同じ形で置くナビゲーション。
   生成アプリはこの class を使わないので、live 配信でも生成物の見た目は動かない。
   固定 (sticky) にはしない: スマホで 48px を常時占有する割に、どのページも
   1〜2 画面で終わるので、戻る手段が常に見える利点より画面が狭くなる損の方が大きい。 */
.v-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;
  margin:-8px 0 14px;border-bottom:1px solid var(--v-border)}
.v-top-logo{display:inline-flex;align-items:center;gap:7px;color:var(--v-text);text-decoration:none;
  font-weight:700;font-size:15px;min-height:44px}
.v-top-logo img{width:22px;height:22px;border-radius:6px;display:block}
.v-top-nav{display:flex;gap:2px}
.v-top-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;margin-bottom:-1px;
  color:var(--v-muted);text-decoration:none;font-size:14px;border-bottom:2px solid transparent}
.v-top-nav a:hover{color:var(--v-text)}
.v-top-nav a[aria-current=page]{color:var(--v-accent);font-weight:600;border-bottom-color:var(--v-accent)}
.v-top-nav a:last-child{padding-right:0}
/* リンクは 4 本（ventoo とは / 作る / 作ったアプリ / 作例集）。文言の途中で折り返すと
   「ventoo / とは」の 2 行になって読めないので nowrap。430px 以下では文字と余白を
   一段詰め、ロゴの文字 "ventoo" を消して絵だけにする（「ventoo とは」が隣にあるので意味は落ちない）。 */
.v-top-nav a{white-space:nowrap}
@media (max-width:430px){
  .v-top-nav a{padding:0 7px;font-size:13px}
  .v-top-logo span{display:none}
  .v-top-logo{flex-shrink:0}
}
@media (max-width:340px){.v-top-nav a{padding:0 5px;font-size:12px}}

/* ---- help header (ventoo.js が <template id="v-help"> から組む) ------------- */
/* 生成物は使い方の本文を <template id="v-help"> に書くだけ。ventoo.js が <h1> を
   .v-head で包んで右端に「使い方」「設定」を置き、押すと dialog で本文を出す。
   .v-hbtn はアプリ側の button{} 指定 (巨大な文字サイズ等) より強く効くよう .v-head 付きで書く。 */
.v-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.v-head>h1{flex:1 1 auto;min-width:0;margin:.2em 0}
/* ボタンは前面に出す (浮遊版と同じ z-index)。アプリが canvas を position:fixed で全画面に
   敷き h1 だけ z-index で持ち上げると、隣のボタンは canvas の下に描かれて押せなくなるため。
   h1 自体は持ち上げない (アプリ側のドロップダウン等を隠さないよう) */
.v-head-actions{display:inline-flex;gap:6px;flex:0 0 auto;position:relative;z-index:2147481000}
.v-head .v-hbtn,.v-head-float .v-hbtn{min-height:44px;padding:0 12px;font-size:.875rem;font-weight:600;
  line-height:1.2;white-space:nowrap;background:var(--v-surface);color:var(--v-text);
  border:1px solid var(--v-border);border-radius:var(--v-radius-sm);box-shadow:none}
/* <h1> もバッジも無いページ (手元で開いた全画面アプリ) では右上に浮かせる */
.v-head-float{position:fixed;top:10px;right:10px;z-index:2147482000}
/* 全画面アプリ (右下バッジ) では、開いたバッジの中に共有と同じピルで並ぶ */
#v-badge .v-hbtn{height:28px;padding:0 10px;border-radius:999px;border:1px solid var(--v-border,#8a8a9455);
  background:transparent;color:inherit;font:inherit;cursor:pointer}
#v-badge .v-hbtn:hover{color:var(--v-accent)}
/* ventoo.js が作る dialog (使い方 / 設定)。アプリの <dialog id="v-settings"> にも同じ class が付く */
.v-dlg{width:min(92vw,440px)}
.v-dlg>h1,.v-dlg>h2,.v-dlg>h3{margin:0 0 10px;font-size:1.15rem}
.v-dlg-body{max-height:60vh;overflow:auto}
.v-dlg-body>:first-child{margin-top:0}
.v-dlg-body>:last-child{margin-bottom:0}
.v-dlg-foot{display:flex;justify-content:flex-end;margin-top:14px}

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

/* hidden 属性はどのクラス指定より後に置く。
   button/.stack/.row/.grid などに display を当てているので、これが無いと
   <button hidden> や <div class="stack" hidden> が消えない（属性セレクタは
   要素セレクタより強く、クラスとは同点なので最後に書けば勝つ）。
   !important は付けない: el.style.display='block' で見せる書き方を残すため。 */
[hidden] { display: none; }
