/* ===== アニメスタンプメーカー 固有スタイル（style.css の後に読み込む） ===== */

/* stage：位置合わせキャンバス */
.stage.is-empty .hold,.stage.is-empty .pos{display:none!important}
.hold{outline:none;border-radius:6px}
.hold:focus-visible{box-shadow:0 0 0 3px rgba(111,92,255,.45)}
#preview{width:min(100%,560px);aspect-ratio:320/270}
#preview.white{background-image:none;background-color:#fff}
.pos{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-3)}

/* 4分割セグメント（style.css の .seg は3分割固定） */
.seg.four{grid-template-columns:repeat(4,1fr);margin:6px 0 14px;background:rgba(20,30,60,.04)}
.seg.four button{min-height:42px;padding:6px 2px}
.seg.four button b{font-size:13px}

/* 表示時間の数値入力 */
.inline{display:inline-flex;align-items:center;gap:6px}
input[type=number]{border:1px solid var(--line-2);border-radius:var(--r-sm);padding:8px 8px;font-family:var(--mono);
  font-size:16px;background:#fff;color:var(--ink);width:86px;min-width:0;text-align:center;-moz-appearance:textfield}
input[type=number]::-webkit-inner-spin-button{opacity:1}
input[type=number]:disabled{opacity:.4}
.v.ok{color:#159c5b}
.v.warn{color:var(--accent)}

/* コマ一覧：横スクロール、canvasサムネ */
.films h2 span{opacity:.7;margin-left:6px}
.thumb canvas{width:100%;height:100%;object-fit:contain;display:block;
  background-image:
    linear-gradient(45deg,#e9ebf3 25%,transparent 25%,transparent 75%,#e9ebf3 75%),
    linear-gradient(45deg,#e9ebf3 25%,transparent 25%,transparent 75%,#e9ebf3 75%);
  background-size:10px 10px;background-position:0 0,5px 5px}
.thumb:first-child .n{background:var(--violet)}
.films .note{margin-top:8px}

/* 書き出し結果 */
.result .rhead{display:flex;gap:14px;align-items:center}
.result img{width:112px;height:95px;flex:0 0 auto;object-fit:contain;border-radius:6px;background-color:#fff;
  background-image:
    linear-gradient(45deg,#d6d9e3 25%,transparent 25%,transparent 75%,#d6d9e3 75%),
    linear-gradient(45deg,#d6d9e3 25%,transparent 25%,transparent 75%,#d6d9e3 75%);
  background-size:12px 12px;background-position:0 0,6px 6px;box-shadow:0 0 0 1px rgba(20,30,60,.12)}
.kb{font-family:var(--mono);font-size:26px;font-weight:500;letter-spacing:-.02em;line-height:1.1}
.kb.ok{color:#159c5b}
.kb.bad{color:var(--accent)}
.kbnote{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.result .meta{font-size:12px;color:var(--ink-2);margin-top:6px}
.checks{list-style:none;margin:12px 0 0;padding:12px 0 0;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-2)}
.checks li{display:flex;gap:8px;padding:3px 0;line-height:1.6}
.checks li::before{content:"✓";font-family:var(--mono);font-weight:700;flex:0 0 1em;color:#159c5b}
.checks li.bad::before{content:"✕";color:var(--accent)}
.checks li.warn::before{content:"!";color:#e8a200}

/* 操作ボタン：再生をfitSafe相当の主役位置に */
.acts #play{grid-column:1/-1;border-color:rgba(111,92,255,.4);
  background:linear-gradient(120deg,rgba(111,92,255,.12),rgba(31,182,232,.10)),#fff}