/* ZQ Stage3 Trial — 体験版（モヤモヤ→課題設定→ビジネスアイデア）
 * 設計: shared/game/2026-08-04-stage3-trial-aoi-design.md
 *
 * v0.4.0（Ryu指示 2026-08-05）
 *   ・左は最初は真っ白。STEPが進むと欄が1つずつ現れる（アニメーション）
 *   ・欄の枠は水色。STEP帯はブロックで、進んだら水色
 *   ・AoIは小さく、顔が切れない
 *   ・スマホは「AoIとの会話＋STEP」だけ。提出後に回答一覧が出る
 * ★テーマのコンテナに潰されないよう、専用テンプレート(templates/full.php)前提。
 */

.zqt-wrap{
  --zqt-bg:#f2f6fb; --zqt-ink:#141d33; --zqt-sub:#7d8ba3; --zqt-blue:#2b6df0;
  --zqt-sky:#5fb6ee; --zqt-sky-l:#bfe2f8; --zqt-sky-bg:#f4fbff;
  --zqt-line:#e2e8f2; --zqt-gold:#e8951b; --zqt-goldbg:#fff7ea; --zqt-empty:#a9c3d6;
  --zqt-green:#0e8f5f; --zqt-violet:#6d46d6;
  --zqt-r:16px;
  position:fixed; inset:0; z-index:1;
  display:flex; flex-direction:column;
  background:
    radial-gradient(900px 420px at 12% -8%, #e6f3ff 0%, rgba(230,243,255,0) 60%),
    radial-gradient(700px 380px at 92% 108%, #fff2e2 0%, rgba(255,242,226,0) 60%),
    var(--zqt-bg);
  color:var(--zqt-ink);
  font-family:-apple-system,BlinkMacSystemFont,'Hiragino Sans','Noto Sans JP',sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
.zqt-wrap *{box-sizing:border-box}

/* ================= ヘッダ ================= */
.zqt-hd{display:flex;align-items:center;gap:12px;padding:9px 20px;flex:0 0 auto;flex-wrap:wrap;
  background:rgba(255,255,255,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--zqt-line)}
.zqt-hd .zqt-badge{background:linear-gradient(135deg,#48a8ee,#2b6df0);color:#fff;font-weight:900;
  font-size:11.5px;letter-spacing:.08em;padding:6px 13px;border-radius:999px;
  box-shadow:0 4px 12px rgba(43,109,240,.28)}
.zqt-hd .zqt-ttl{font-weight:800;font-size:14.5px;letter-spacing:.01em}
.zqt-hd .zqt-spacer{flex:1}
.zqt-nick{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--zqt-sub)}
.zqt-nick input{width:128px;border:1.5px solid var(--zqt-sky-l);border-radius:10px;
  padding:6px 10px;font-size:12px;font-family:inherit;background:#fff}
.zqt-nick input:focus{outline:none;border-color:var(--zqt-sky);box-shadow:0 0 0 3px rgba(95,182,238,.18)}
/* ★AoI が聞き取って入れた瞬間の合図 */
.zqt-nick input.zqt-filled{border-color:#3fbc85;background:#f2fffa;
  animation:zqtFilled 1.6s ease-out}
@keyframes zqtFilled{0%{box-shadow:0 0 0 0 rgba(63,188,133,.45)}100%{box-shadow:0 0 0 9px rgba(63,188,133,0)}}
/* ★空のまま提出しようとしたとき */
.zqt-nick input.zqt-need2{border-color:#f0a94a;background:#fffaf2;
  animation:zqtNeed 2.1s ease-in-out infinite}

/* ================= ★STEP帯（ブロック・進んだら水色） ================= */
.zqt-steps{flex:0 0 auto;display:flex;align-items:stretch;gap:5px;padding:9px 20px 10px;
  background:rgba(255,255,255,.62);border-bottom:1px solid var(--zqt-line);overflow-x:auto}
.zqt-stp{flex:1 1 0;min-width:74px;border-radius:10px;padding:6px 8px 7px;text-align:center;
  background:#e9eff7;border:1.5px solid transparent;
  transition:background .5s,border-color .5s,box-shadow .5s,transform .5s}
.zqt-stp i{display:block;font-style:normal;font-size:10px;font-weight:900;letter-spacing:.08em;
  color:#9fb0c6;transition:color .5s}
.zqt-stp span{display:block;font-size:11px;font-weight:800;color:#9fb0c6;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;transition:color .5s}
.zqt-stp.zqt-stpDone{background:linear-gradient(180deg,#d8eefc,#bfe2f8);border-color:#9ed3f2;
  box-shadow:0 2px 10px rgba(95,182,238,.28)}
.zqt-stp.zqt-stpDone i{color:#1b7fbf}
.zqt-stp.zqt-stpDone span{color:#0d5b8c}
.zqt-stpCore.zqt-stpDone{background:linear-gradient(180deg,#ffe7bd,#ffd694);border-color:#f0b256;
  box-shadow:0 2px 12px rgba(232,149,27,.32)}
.zqt-stpCore.zqt-stpDone i{color:#a05f00}
.zqt-stpCore.zqt-stpDone span{color:#7a4600}
.zqt-stp.zqt-now{background:#fff;border-color:var(--zqt-sky);transform:translateY(-1px);
  animation:zqtNow 2.2s ease-in-out infinite}
.zqt-stp.zqt-now i,.zqt-stp.zqt-now span{color:#0d5b8c}
@keyframes zqtNow{
  0%,100%{box-shadow:0 0 0 3px rgba(95,182,238,.16),0 4px 14px rgba(95,182,238,.22)}
  50%{box-shadow:0 0 0 6px rgba(95,182,238,.10),0 4px 18px rgba(95,182,238,.34)}}

/* ================= 全体 2/3 : 1/3 ================= */
.zqt-main{flex:1 1 0;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:14px;padding:14px 18px;min-height:0}
.zqt-col{min-width:0;min-height:0;display:flex;flex-direction:column;gap:10px}

/* ================= 左：シート（上下2段） ================= */
.zqt-sheet{position:relative;flex:1 1 0;min-height:0;display:flex;flex-direction:column;gap:10px;
  overflow:auto;padding-right:2px}
.zqt-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}

.zqt-sec{position:relative;z-index:2;background:#fff;border:1px solid var(--zqt-line);
  border-radius:var(--zqt-r);padding:14px 16px 16px;
  box-shadow:0 1px 2px rgba(20,29,51,.04), 0 10px 28px rgba(20,29,51,.05)}
.zqt-secHd{display:flex;align-items:center;gap:10px}
.zqt-secHd .zqt-no{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
  font-size:11px;font-weight:900;color:#fff;flex:0 0 auto}
.zqt-secHd b{font-size:13px;letter-spacing:.06em}
.zqt-secHd span{font-size:11px;color:var(--zqt-sub);font-weight:600}
.zqt-sec1 .zqt-no{background:linear-gradient(135deg,#48a8ee,#2b6df0)}
.zqt-sec2 .zqt-no{background:linear-gradient(135deg,#18b57c,#0e8f5f)}
.zqt-rows{display:flex;flex-direction:column;gap:9px}
.zqt-sec.zqt-hasCard .zqt-rows{margin-top:11px}

/* ================= カード（★最初は出さない） ================= */
.zqt-c{display:none;border:1.5px solid var(--zqt-sky-l);background:var(--zqt-sky-bg);border-radius:12px;
  padding:9px 13px;position:relative;cursor:text;
  transition:border-color .35s, background .35s, box-shadow .35s}
.zqt-c.zqt-show{display:block;animation:zqtIn .6s cubic-bezier(.16,1,.3,1) both}
@keyframes zqtIn{
  0%{opacity:0;transform:translateY(10px) scale(.985)}
  100%{opacity:1;transform:none}}
.zqt-c .zqt-lb{font-size:9.5px;font-weight:900;letter-spacing:.1em;color:#8fb6cf;transition:.3s}
.zqt-c .zqt-tx{font-size:12.5px;line-height:1.65;color:var(--zqt-empty);margin-top:3px;transition:.3s;
  min-height:1.65em;outline:none;white-space:pre-wrap;word-break:break-word;
  /* ★AIが長い文を返してもカードが伸びてシートを壊さない（実測で崩れたので入れた） */
  max-height:5.6em;overflow:hidden}
.zqt-c .zqt-tx:focus{max-height:none;overflow:visible}
.zqt-c.zqt-clip .zqt-lb::after{content:'　／　クリックで全文';font-weight:800;opacity:.65}
.zqt-c.zqt-clip:focus-within .zqt-lb::after{content:''}
.zqt-c .zqt-tx.zqt-q{letter-spacing:.3em;color:#bcd6e6}
.zqt-c.zqt-on{border-color:var(--zqt-sky);background:#fff;box-shadow:0 2px 14px rgba(95,182,238,.16)}
.zqt-c.zqt-on .zqt-lb{color:#1b7fbf}
.zqt-c.zqt-on .zqt-tx{color:var(--zqt-ink)}
.zqt-c:hover{border-color:var(--zqt-sky);background:#fff}
.zqt-c:hover .zqt-lb::after{content:'　✎ クリックで直せます';font-weight:800;opacity:.7;letter-spacing:0}
.zqt-c:focus-within{border-color:var(--zqt-blue);box-shadow:0 0 0 3px rgba(43,109,240,.13)}
.zqt-c:focus-within .zqt-lb::after{content:'　編集中'!important;color:var(--zqt-blue);opacity:1}
.zqt-c.zqt-land{animation:zqtLand .7s cubic-bezier(.16,1,.3,1)}
@keyframes zqtLand{0%{transform:translateY(8px) scale(.99);opacity:.3}100%{transform:none;opacity:1}}

/* 空欄で、いま埋めるべきところ */
.zqt-c.zqt-need{border-color:#f0a94a;border-style:dashed;background:#fffaf2;
  animation:zqtNeed 2.1s ease-in-out infinite}
.zqt-c.zqt-need .zqt-lb{color:#b06000}
@keyframes zqtNeed{0%,100%{box-shadow:0 0 0 0 rgba(232,149,27,.26)}50%{box-shadow:0 0 0 5px rgba(232,149,27,.14)}}

/* 2列・3列（中身が1つも出ていない間は行ごと消す） */
.zqt-r2,.zqt-r3{display:none;gap:9px}
.zqt-r2.zqt-show{display:grid;grid-template-columns:1fr 1fr}
.zqt-r3.zqt-show{display:grid;grid-template-columns:1fr 1fr 1fr}

/* モヤモヤ（出発点） */
.zqt-moya{border-color:#ded2fa;background:#fbf9ff}
.zqt-moya .zqt-lb{color:#a595d8}
.zqt-moya:hover{border-color:#c3aef3}
.zqt-moya.zqt-on{border-color:#c3aef3;background:#fbf8ff;box-shadow:0 2px 12px rgba(109,70,214,.09)}
.zqt-moya.zqt-on .zqt-lb{color:var(--zqt-violet)}
.zqt-moya .zqt-tx{font-size:13.5px}

/* なぜの階段 */
.zqt-why{margin-left:0;transition:margin .3s}
.zqt-why.zqt-w2{margin-left:26px}
.zqt-why.zqt-w3{margin-left:52px}
.zqt-why.zqt-on{border-color:#f0dcaa;background:#fffdf7}
.zqt-why.zqt-on .zqt-lb{color:#a56b00}

/* ★本質的課題＝いちばん目立たせる */
.zqt-core{border:2px solid #d6e9f6;background:linear-gradient(180deg,#fbfeff,#f4fbff);
  border-radius:14px;padding:13px 16px;margin-top:3px}
.zqt-core .zqt-lb{font-size:10.5px}
.zqt-core .zqt-tx{font-size:17px;font-weight:900;line-height:1.55;max-height:5em;margin-top:5px}
.zqt-core.zqt-on{border-color:var(--zqt-gold);
  background:linear-gradient(180deg,#fffaf0,#fff2dc);
  box-shadow:0 6px 26px rgba(232,149,27,.24), 0 0 0 4px rgba(232,149,27,.09)}
.zqt-core.zqt-on .zqt-lb{color:#a05f00}
.zqt-core.zqt-reveal{animation:zqtReveal 1.1s cubic-bezier(.16,1,.3,1)}
@keyframes zqtReveal{0%{opacity:0;transform:translateY(12px) scale(.985)}100%{opacity:1;transform:none}}
/* 課題設定理由は、本質的課題にぶら下げる小さい行 */
.zqt-reason{border:0;background:transparent;padding:4px 16px 0;margin-top:-2px}
.zqt-reason .zqt-lb{font-size:9px}
.zqt-reason .zqt-tx{font-size:11.5px;max-height:3.4em}
.zqt-reason:hover,.zqt-reason.zqt-on{background:transparent;box-shadow:none;border-color:transparent}

/* ★ビジネス名＝ビジネスアイデアの上に、大きく */
.zqt-biz{border:2px solid #bfe9d6;background:linear-gradient(180deg,#f7fffb,#effff8);
  border-radius:14px;padding:11px 16px}
.zqt-biz .zqt-lb{font-size:10.5px;color:#6fbf9c}
.zqt-biz .zqt-tx{font-size:19px;font-weight:900;line-height:1.45;max-height:3em;margin-top:4px}
.zqt-biz:hover{border-color:#3fbc85}
.zqt-biz.zqt-on{border-color:#3fbc85;box-shadow:0 5px 20px rgba(14,143,95,.18)}
.zqt-biz.zqt-on .zqt-lb{color:#0b7a51}
.zqt-biz.zqt-on .zqt-tx{color:#0a3d2b}

/* 解決 */
.zqt-sol.zqt-on{border-color:#a9e5c6;background:#f7fffb}
.zqt-sol.zqt-on .zqt-lb{color:var(--zqt-green)}
.zqt-sol .zqt-tx{font-size:13px}
.zqt-tri.zqt-on{border-color:#a9e5c6;background:#fff}
.zqt-tri.zqt-on .zqt-lb{color:var(--zqt-green)}

/* ================= 右：AoI ================= */
.zqt-aoi{flex:1 1 0;min-height:0;background:#fff;border:1px solid var(--zqt-line);
  border-radius:var(--zqt-r);display:flex;flex-direction:column;padding:12px 13px;gap:9px;overflow:hidden;
  box-shadow:0 1px 2px rgba(20,29,51,.04), 0 10px 28px rgba(20,29,51,.05)}
.zqt-aoiHd{display:flex;align-items:center;gap:9px;flex:0 0 auto;padding-bottom:9px;
  border-bottom:1px solid #eef2f8}
.zqt-face{width:34px;height:34px;border-radius:11px;flex:0 0 auto;
  background:linear-gradient(160deg,#dbeeff,#a9cef2);display:grid;place-items:center;
  font-size:10px;font-weight:900;color:#2b6df0}
.zqt-nm{font-size:13px;font-weight:900}
.zqt-st{font-size:10.5px;color:var(--zqt-sub);margin-top:1px}
.zqt-aoiHd .zqt-spacer2{flex:1}
.zqt-restart{border:1.5px solid var(--zqt-sky-l);background:#fff;border-radius:9px;
  padding:5px 10px;font-size:11px;font-weight:800;color:#1b7fbf;cursor:pointer;font-family:inherit;
  flex:0 0 auto;transition:.25s}
.zqt-restart:hover{background:var(--zqt-sky-bg);border-color:var(--zqt-sky)}

/* ★丸い切り替えボタン2つ（STAGE3 と同じ形）：書く⇄話す ／ 声を出す⇄止める */
.zqt-mode,.zqt-spk{flex:0 0 auto;width:36px;height:36px;border-radius:50%;
  border:1.5px solid var(--zqt-sky-l);background:#fff;color:#1b7fbf;cursor:pointer;
  display:grid;place-items:center;padding:0;transition:.25s}
.zqt-mode:hover,.zqt-spk:hover{background:var(--zqt-sky-bg);border-color:var(--zqt-sky)}
.zqt-mode.zqt-on2,.zqt-spk.zqt-on2{background:linear-gradient(135deg,#48a8ee,#2b6df0);
  border-color:transparent;color:#fff;box-shadow:0 3px 12px rgba(43,109,240,.32)}
/* 声：切のときは斜線を出し、波を消す */
.zqt-spk .zqt-wave{opacity:0}
.zqt-spk.zqt-on2 .zqt-wave{opacity:1}
.zqt-spk.zqt-on2 .zqt-slash{opacity:0}

/* ★声で伝えるときの大きなマイクボタン */
.zqt-mic{display:none;flex:0 0 auto;width:100%;align-items:center;justify-content:center;gap:9px;
  border:1.5px solid var(--zqt-sky-l);background:#fff;color:#1b7fbf;border-radius:13px;
  padding:13px 16px;font-size:13.5px;font-weight:900;font-family:inherit;cursor:pointer;transition:.25s}
.zqt-aoi.zqt-voiceIn .zqt-mic{display:flex}
.zqt-aoi.zqt-voiceIn .zqt-ask textarea{height:44px;font-size:12px}
.zqt-mic:hover{background:var(--zqt-sky-bg);border-color:var(--zqt-sky)}
.zqt-mic.zqt-rec{background:linear-gradient(135deg,#ff7a7a,#e63946);border-color:transparent;color:#fff;
  box-shadow:0 5px 18px rgba(230,57,70,.36);animation:zqtRec 1.6s ease-in-out infinite}
@keyframes zqtRec{0%,100%{box-shadow:0 5px 18px rgba(230,57,70,.36)}
  50%{box-shadow:0 5px 26px rgba(230,57,70,.62)}}

/* ★AoIの立ち絵：小さく、切れないように全身を収める */
.zqt-stage{flex:0 0 auto;height:172px;position:relative;border-radius:12px;overflow:hidden;
  background:linear-gradient(180deg,#eaf5ff 0%,#f7fbff 68%,#fff 100%)}
.zqt-stage canvas{position:absolute;inset:0}
.zqt-fallback{position:absolute;inset:0;display:grid;place-items:center}
.zqt-fallback svg{height:86%}

.zqt-log{flex:1 1 0;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:8px;padding:2px 1px}
.zqt-msg{max-width:94%;font-size:13px;line-height:1.75;padding:9px 12px;border-radius:13px;
  white-space:pre-wrap;word-break:break-word}
.zqt-msg.a{align-self:flex-start;background:#eef6ff;border:1px solid #d9e9fb;border-top-left-radius:5px}
.zqt-msg.u{align-self:flex-end;background:#2b6df0;color:#fff;border-top-right-radius:5px}
.zqt-msg.sys{align-self:center;background:#fff5e8;border:1px solid #f6dfbe;color:#8a5a00;font-size:11.5px}
.zqt-msg.zqt-typing2{cursor:pointer}
.zqt-typing{align-self:flex-start;display:flex;gap:4px;padding:9px 13px;background:#eef6ff;
  border-radius:13px;border-top-left-radius:5px}
.zqt-typing i{width:6px;height:6px;border-radius:50%;background:#9dc2ee;animation:zqtDot 1.1s infinite}
.zqt-typing i:nth-child(2){animation-delay:.15s}.zqt-typing i:nth-child(3){animation-delay:.3s}
@keyframes zqtDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.zqt-ask{flex:0 0 auto;display:flex;gap:8px;align-items:stretch}
.zqt-ask textarea{flex:1;min-width:0;border:1.5px solid var(--zqt-sky-l);border-radius:12px;
  padding:9px 11px;font-size:12.5px;font-family:inherit;resize:none;height:62px;line-height:1.6;background:#fff}
.zqt-ask textarea:focus{outline:none;border-color:var(--zqt-sky);box-shadow:0 0 0 3px rgba(95,182,238,.16)}
.zqt-ask button{flex:0 0 auto;border:0;border-radius:12px;padding:0 16px;
  background:linear-gradient(135deg,#48a8ee,#2b6df0);color:#fff;font-weight:900;font-size:12.5px;
  cursor:pointer;font-family:inherit;box-shadow:0 4px 14px rgba(43,109,240,.3)}
.zqt-ask button:disabled{background:#dde4ee;color:#a8b3c4;box-shadow:none;cursor:default}
.zqt-hint{flex:0 0 auto;margin:0;font-size:10.5px;color:var(--zqt-sub);line-height:1.5}

/* ================= 提出・発表 ================= */
.zqt-foot{flex:0 0 auto;display:flex;flex-direction:column;gap:8px}
.zqt-btn{width:100%;border:0;border-radius:13px;padding:13px 16px;font-weight:900;font-size:13px;
  cursor:pointer;background:#e7ecf4;color:#a3aebf;font-family:inherit;transition:.3s}
.zqt-btn.zqt-ready{background:linear-gradient(135deg,#ffcf62,#f59410);color:#4a2f00;
  box-shadow:0 8px 22px rgba(245,148,16,.34);animation:zqtPulse 2s ease-in-out infinite}
@keyframes zqtPulse{0%,100%{box-shadow:0 8px 22px rgba(245,148,16,.34)}50%{box-shadow:0 8px 30px rgba(245,148,16,.58)}}
.zqt-btn:disabled{cursor:default}
.zqt-share{display:none;align-items:center;gap:8px;font-size:12.5px;font-weight:800;color:var(--zqt-ink);
  background:#fff;border:1.5px solid var(--zqt-sky-l);border-radius:13px;padding:10px 14px;cursor:pointer}
.zqt-share.zqt-visible{display:flex}
.zqt-share input{width:16px;height:16px;accent-color:#2b6df0}
.zqt-done{display:none;background:var(--zqt-sky-bg);border:1.5px solid var(--zqt-sky-l);
  border-radius:13px;padding:11px 15px;font-size:12.5px;line-height:1.75;color:#0d5b8c}
.zqt-done.zqt-visible{display:block}
.zqt-done b{color:#0b5a8f}
/* ★自分のシートを見る（提出後・本人だけ） */
.zqt-mine{display:none;width:100%;text-align:center;text-decoration:none;border-radius:13px;
  padding:12px 16px;font-size:13px;font-weight:900;color:#0d5b8c;
  background:#fff;border:1.5px solid var(--zqt-sky)}
.zqt-mine.zqt-visible{display:block}
.zqt-mine:hover{background:var(--zqt-sky-bg)}

/* ★発表ボタン＝みんなの一覧へ */
.zqt-present{display:none;width:100%;text-align:center;text-decoration:none;border-radius:13px;
  padding:13px 16px;font-size:13.5px;font-weight:900;color:#fff;
  background:linear-gradient(135deg,#7b5cf0,#5a34d8);box-shadow:0 6px 22px rgba(109,70,214,.34)}
.zqt-present.zqt-visible{display:block}

/* ================= 提出後の回答一覧（主にスマホ） ================= */
.zqt-result{display:none;flex:1 1 0;min-height:0;flex-direction:column;gap:7px;overflow:auto;padding:2px 1px 4px}
.zqt-result.zqt-visible{display:flex}
.zqt-rh{margin:0 0 2px;font-size:13px;font-weight:900;color:#0d5b8c}
.zqt-ri{flex:0 0 auto;border:1.5px solid var(--zqt-sky-l);background:#fff;border-radius:11px;padding:8px 12px}
.zqt-ri b{display:block;font-size:9.5px;font-weight:900;letter-spacing:.1em;color:#1b7fbf}
.zqt-ri p{margin:3px 0 0;font-size:13px;line-height:1.65;white-space:pre-wrap;word-break:break-word}
.zqt-ri.zqt-riCore{border-color:var(--zqt-gold);background:linear-gradient(180deg,#fffaf0,#fff2dc)}
.zqt-ri.zqt-riCore b{color:#a05f00}
.zqt-ri.zqt-riCore p{font-size:16px;font-weight:900}
.zqt-ri.zqt-riBiz{border-color:#3fbc85;background:linear-gradient(180deg,#f7fffb,#effff8)}
.zqt-ri.zqt-riBiz b{color:#0b7a51}
.zqt-ri.zqt-riBiz p{font-size:16px;font-weight:900;color:#0a3d2b}

.zqt-hidden{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.zqt-closed{max-width:640px;margin:60px auto;background:#fff;border-radius:var(--zqt-r);
  padding:28px 30px;text-align:center;box-shadow:0 10px 40px rgba(20,29,51,.1)}

.zqt-footM:empty{display:none}

@media (max-width:1180px){
  .zqt-main{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)}
}
/* パソコンでは左にシートが出ているので、右の回答一覧は出さない */
@media (min-width:861px){
  .zqt-result{display:none!important}
}

/* ================= ★スマホ =================
   基本は「AoIとの会話＋STEP」だけ。提出すると回答一覧に切り替わる。 */
@media (max-width:860px){
  .zqt-hd{padding:8px 12px;gap:8px}
  .zqt-hd .zqt-ttl{font-size:12px;order:3;width:100%}
  .zqt-hd .zqt-spacer{display:none}
  .zqt-nick input{width:100px}
  .zqt-steps{padding:7px 10px 8px;gap:4px}
  .zqt-stp{min-width:0;flex:1 1 0;padding:5px 3px 6px;border-radius:9px}
  .zqt-stp i{font-size:9px}
  .zqt-stp span{font-size:8.5px}

  .zqt-main{grid-template-columns:1fr;padding:9px 10px 10px;gap:9px}
  .zqt-colL{display:none}                       /* シートは出さない */
  .zqt-aoi{padding:10px;gap:8px;border-radius:14px}
  .zqt-stage{height:130px}
  .zqt-msg{max-width:97%;font-size:14px}
  .zqt-ask textarea{font-size:16px;height:56px}  /* 16px＝iOSの自動ズーム防止 */
  .zqt-hint{display:none}
  /* 提出後は会話をたたんで、回答一覧を全面に出す */
  .zqt-aoi.zqt-folded .zqt-stage,
  .zqt-aoi.zqt-folded .zqt-log,
  .zqt-aoi.zqt-folded .zqt-ask{display:none}
}
@media (max-width:860px) and (orientation:landscape){
  .zqt-stage{height:92px}
}
@media (max-width:560px){
  .zqt-stp span{display:none}                    /* 極小画面は番号だけ */
  .zqt-stp{padding:7px 2px}
  .zqt-stp i{font-size:11px}
}

/* =========================================================================
 * ★提出まえの確認画面（Ryu指示 2026-08-07）
 *   送る前に全部を見せて、その場で直せる。スマホ1列／パソコン2列。
 * ======================================================================= */
.zqt-cf{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  padding:18px;background:rgba(12,22,40,.55);backdrop-filter:blur(4px);
  animation:zqtIn .22s ease-out both}
.zqt-cfBox{width:100%;max-width:940px;max-height:100%;display:flex;flex-direction:column;
  background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 26px 70px rgba(12,22,40,.4)}

.zqt-cfHd{flex:0 0 auto;position:relative;padding:15px 52px 13px 20px;
  border-bottom:1px solid var(--zqt-line);background:linear-gradient(180deg,#f4fbff,#fff)}
.zqt-cfHd b{display:block;font-size:16px;font-weight:900;color:#0d5b8c}
.zqt-cfHd span{display:block;font-size:11.5px;color:var(--zqt-sub);margin-top:3px}
.zqt-cfX{position:absolute;top:11px;right:12px;width:34px;height:34px;border-radius:50%;
  border:1.5px solid var(--zqt-sky-l);background:#fff;color:#1b7fbf;font-size:19px;line-height:1;
  cursor:pointer;font-family:inherit}
.zqt-cfX:hover{background:var(--zqt-sky-bg)}

.zqt-cfBody{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:14px 18px 18px;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}
.zqt-cfRow{border:1.5px solid var(--zqt-sky-l);background:var(--zqt-sky-bg);border-radius:12px;
  padding:8px 12px 10px}
.zqt-cfRow b{display:block;font-size:9.5px;font-weight:900;letter-spacing:.1em;color:#1b7fbf}
.zqt-cfRow textarea,.zqt-cfRow input{width:100%;border:0;background:transparent;resize:none;
  font-family:inherit;font-size:14px;line-height:1.65;color:var(--zqt-ink);
  margin-top:3px;padding:0;outline:none;overflow:hidden}
.zqt-cfRow:focus-within{border-color:var(--zqt-blue);background:#fff;
  box-shadow:0 0 0 3px rgba(43,109,240,.13)}
.zqt-cfRow.zqt-cfEmpty{border-color:#f0a94a;border-style:dashed;background:#fffaf2}
.zqt-cfRow.zqt-cfEmpty b{color:#b06000}

/* おなまえ・本質的課題・ビジネス名は1行ぶち抜きで大きく */
.zqt-cfNick{grid-column:1 / -1;border-color:var(--zqt-sky)}
.zqt-cfNick input{font-size:17px;font-weight:800}
.zqt-cfCore{grid-column:1 / -1;border:2px solid var(--zqt-gold);
  background:linear-gradient(180deg,#fffaf0,#fff2dc)}
.zqt-cfCore b{color:#a05f00}
.zqt-cfCore textarea{font-size:18px;font-weight:900;line-height:1.5}
.zqt-cfBiz{grid-column:1 / -1;border:2px solid #3fbc85;
  background:linear-gradient(180deg,#f7fffb,#effff8)}
.zqt-cfBiz b{color:#0b7a51}
.zqt-cfBiz textarea{font-size:18px;font-weight:900;color:#0a3d2b}

.zqt-cfFoot{flex:0 0 auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:12px 18px;border-top:1px solid var(--zqt-line);background:#fbfdff}
.zqt-cfWarn{width:100%;font-size:12px;font-weight:800;color:#b06000;
  background:#fffaf2;border:1.5px solid #f0a94a;border-radius:10px;padding:8px 12px}
.zqt-cfBack{flex:0 0 auto;border:1.5px solid var(--zqt-sky-l);background:#fff;color:#1b7fbf;
  border-radius:13px;padding:13px 20px;font-size:13.5px;font-weight:900;font-family:inherit;cursor:pointer}
.zqt-cfBack:hover{background:var(--zqt-sky-bg)}
.zqt-cfGo{flex:1 1 auto;border:0;border-radius:13px;padding:14px 20px;font-size:14.5px;font-weight:900;
  font-family:inherit;cursor:pointer;color:#4a2f00;
  background:linear-gradient(135deg,#ffcf62,#f59410);box-shadow:0 8px 22px rgba(245,148,16,.34)}

@media (max-width:860px){
  .zqt-cf{padding:0}
  .zqt-cfBox{max-width:none;height:100%;border-radius:0}
  .zqt-cfBody{grid-template-columns:1fr;padding:12px 12px 16px}
  .zqt-cfHd{padding:13px 50px 11px 14px}
  .zqt-cfFoot{padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
  .zqt-cfRow textarea,.zqt-cfRow input{font-size:16px}   /* 16px＝iOSの自動ズーム防止 */
  .zqt-cfCore textarea,.zqt-cfBiz textarea{font-size:17px}
}

/* ★チームの札（1.2.0）。ヘッダーに置く。
   1.1.0 では画面左下に浮かせていたが、提出ボタンに重なって読めなかった。 */
.zqt-partyTag{display:inline-flex;align-items:center;gap:8px;
  background:#f2f7ff;border:1px solid #cfe0fb;border-radius:999px;padding:5px 12px 5px 13px;
  font-family:-apple-system,BlinkMacSystemFont,'Hiragino Sans','Noto Sans JP',sans-serif}
.zqt-partyTag b{font-size:13px;font-weight:900;color:#12203a;letter-spacing:.01em}
.zqt-partyTag .zqt-ptCode{font-style:normal;font-size:12px;font-weight:900;color:#2563eb;
  letter-spacing:.16em;font-variant-numeric:tabular-nums;
  background:#fff;border:1px solid #cfe0fb;border-radius:7px;padding:1px 7px}
@media(max-width:860px){.zqt-partyTag{padding:4px 9px 4px 10px;gap:6px}
  .zqt-partyTag b{font-size:11.5px}.zqt-partyTag .zqt-ptCode{font-size:11px;padding:1px 5px}}

/* ================================================================
   ★管理バーの下に潜り込まないようにする（1.4.2）
   .zqt-wrap は position:fixed; inset:0 なので、WordPress の管理バー
   （ログイン中だけ出る固定の黒帯）に上を隠される。実機で AoI のヘッダーが
   完全に見えなくなっていた。バーの高さぶん下げて、必ず全部見えるようにする。
   ================================================================ */
body.admin-bar .zqt-wrap{top:32px}
@media screen and (max-width:782px){
  body.admin-bar .zqt-wrap{top:46px}
}

/* 口パクの計測窓（原因の切り分け用・一時的） */
.zqt-mwin{position:fixed;left:12px;bottom:12px;z-index:99999;width:250px;padding:12px 14px;
  background:rgba(12,22,40,.92);color:#fff;border-radius:12px;
  font-family:-apple-system,BlinkMacSystemFont,'Hiragino Sans','Noto Sans JP',sans-serif;
  box-shadow:0 10px 30px rgba(0,0,0,.35)}
.zqt-mwin b{display:block;font-size:11px;letter-spacing:.1em;color:#9fc3ff;margin-bottom:6px}
.zqt-mwin span{display:block;font-size:12px;line-height:1.7}
.zqt-mwin i{font-style:normal;font-size:20px;font-weight:900;color:#7ee0a1}
.zqt-mbar{height:8px;background:rgba(255,255,255,.18);border-radius:99px;margin:8px 0 10px;overflow:hidden}
.zqt-mbar em{display:block;height:100%;background:#7ee0a1;border-radius:99px}
.zqt-mwin button{display:block;width:100%;margin-top:6px;padding:8px;border:0;border-radius:8px;
  font-size:12px;font-weight:800;background:#2563eb;color:#fff;cursor:pointer}
.zqt-mwin .zqt-mclose{background:rgba(255,255,255,.16)}

/* AoI の立ち絵（SVG・v1.6.0）。Live2Dのcanvasの代わり */
.zqt-persona{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;
  pointer-events:none}
.zqt-persona svg{width:100%;height:100%;display:block}