/* STAGE5 アプリ試作 — 明るいラボ v0.1.0
 *
 * 色の根拠（2026-08-23 実機を見て決めた）
 *   #2f6fd0  STAGE3 /trial/ の実測値。ここと揃える＝3と5がつながって見える
 *   #17b3c9  ★STAGE5だけの色。これが「ラボ」を作る
 * ★ラボらしさは色ではなく方眼で出す。細目14px＋粗目56pxの二重。
 */
:root{
  --s5-bg:#f1f6fc; --s5-bg2:#f8fbff;
  --s5-panel:#ffffff; --s5-panel2:#f3f8fe;
  --s5-line:#e2ecf8; --s5-line2:#cbdcf0;
  --s5-blue:#2f6fd0; --s5-blue-dim:#9dc0e8;
  --s5-lab:#17b3c9;
  --s5-purple:#7b5cf5; --s5-green:#12a06b; --s5-red:#e05656;
  --s5-tx:#17222f; --s5-tx2:#4d6076; --s5-tx3:#8496a8;
  --s5-mono:ui-monospace,SFMono-Regular,Menlo,"Roboto Mono",monospace;
  --s5-sans:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
}
*{box-sizing:border-box}
html,body.zqs5-body{height:100%;margin:0}
body.zqs5-body{
  background:var(--s5-bg);color:var(--s5-tx);
  font-family:var(--s5-sans);font-size:14px;line-height:1.7;
  background-image:
    linear-gradient(rgba(23,179,201,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(23,179,201,.10) 1px,transparent 1px),
    linear-gradient(rgba(23,179,201,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(23,179,201,.045) 1px,transparent 1px);
  background-size:56px 56px,56px 56px,14px 14px,14px 14px;
  -webkit-font-smoothing:antialiased;
}
#zqs5-root{max-width:1420px;margin:0 auto;padding:14px 16px 40px}

.s5-mono{font-family:var(--s5-mono)}
.s5-lbl{font-family:var(--s5-mono);font-size:10px;letter-spacing:.16em;color:var(--s5-tx3);text-transform:uppercase}

/* ---- ヘッダー ---- */
.s5-top{display:flex;align-items:center;gap:14px;padding:10px 14px;margin-bottom:10px;
  background:linear-gradient(180deg,#fff,#f4f9ff);border:1px solid var(--s5-line2);border-radius:4px;
  position:relative;box-shadow:0 1px 3px rgba(30,70,130,.07)}
.s5-top::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--s5-lab),transparent);opacity:.55}
.s5-brand{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.s5-crest{width:26px;height:26px;border:1px solid var(--s5-blue);border-radius:3px;display:grid;place-items:center;
  color:var(--s5-blue);font-family:var(--s5-mono);font-size:11px;background:rgba(47,111,208,.08)}
.s5-brand b{font-size:12px;letter-spacing:.1em;font-family:var(--s5-mono);color:var(--s5-blue);display:block}
.s5-brand .s5-en{font-family:var(--s5-mono);font-size:9px;letter-spacing:.22em;color:var(--s5-tx3)}
.s5-badge{font-family:var(--s5-mono);font-size:10px;letter-spacing:.12em;padding:3px 7px;border-radius:2px;
  border:1px solid var(--s5-blue);color:var(--s5-blue);background:rgba(47,111,208,.08)}
.s5-sp{flex:1}
.s5-team{display:flex;align-items:center;gap:8px;font-size:13px}
.s5-team b{font-weight:800}
.s5-team .s5-mem{color:var(--s5-tx3);font-size:11.5px}

/* ---- 器 ---- */
.s5-pane{background:var(--s5-panel);border:1px solid var(--s5-line2);border-radius:5px;position:relative;
  box-shadow:0 1px 3px rgba(30,70,130,.07);margin-bottom:10px;overflow:hidden}
.s5-pane::before,.s5-pane::after{content:'';position:absolute;width:9px;height:9px;
  border:1px solid var(--s5-lab);opacity:.5;pointer-events:none}
.s5-pane::before{left:5px;top:5px;border-right:0;border-bottom:0}
.s5-pane::after{right:5px;bottom:5px;border-left:0;border-top:0}
.s5-ph{display:flex;align-items:center;gap:8px;padding:9px 13px;border-bottom:1px solid var(--s5-line);
  background:linear-gradient(180deg,rgba(23,179,201,.07),transparent)}
.s5-ph .s5-dot{width:5px;height:5px;border-radius:50%;background:var(--s5-lab);
  box-shadow:0 0 6px rgba(23,179,201,.8)}
.s5-body{padding:16px 18px 18px}

/* ---- A・B（引き継ぎ） ---- */
.s5-row{display:flex;gap:14px;margin-bottom:12px;align-items:flex-start}
.s5-row:last-child{margin-bottom:0}
.s5-row .s5-k{flex:0 0 168px;font-family:var(--s5-mono);font-size:10.5px;color:var(--s5-blue);
  padding-top:3px;letter-spacing:.06em}
.s5-row .s5-v{flex:1;font-size:14px;line-height:1.8;min-width:0}
.s5-row .s5-v em{font-style:normal;color:var(--s5-tx3);font-size:12.5px}
.s5-chip{display:inline-block;padding:3px 9px;border-radius:11px;background:#eef4fc;color:var(--s5-blue);
  font-size:11.5px;font-weight:700;margin:0 5px 5px 0}
.s5-chip.lab{background:#eafafd;color:#0b7f90}

/* 引き継げていないとき（★止めない。責めない） */
.s5-none{color:var(--s5-tx3);font-size:13px;background:#f7fafd;border:1px dashed var(--s5-line2);
  border-radius:4px;padding:10px 13px;line-height:1.85}
.s5-none b{color:var(--s5-tx2)}

/* ---- 入れなかったとき ---- */
.s5-gate{max-width:560px;margin:56px auto;text-align:center}
.s5-gate .s5-pane{padding:0}
.s5-gate h2{font-size:17px;margin:0 0 10px}
.s5-gate p{color:var(--s5-tx2);font-size:13.5px;line-height:2;margin:0 0 18px}
.s5-btn{display:inline-block;padding:11px 22px;border-radius:6px;border:0;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:800;text-decoration:none;
  background:linear-gradient(180deg,#8a6bff,#6d47e8);color:#fff}
.s5-btn.sub{background:#fff;border:1px solid var(--s5-line2);color:var(--s5-tx2);font-weight:600}

/* ---- 読み込み中 ---- */
.s5-load{display:flex;align-items:center;justify-content:center;gap:12px;
  padding:70px 20px;color:var(--s5-tx3);font-family:var(--s5-mono);font-size:11px;letter-spacing:.18em}
.s5-load i{width:22px;height:22px;border:2px solid var(--s5-line2);border-top-color:var(--s5-lab);
  border-radius:50%;display:inline-block;animation:s5spin .8s linear infinite}
@keyframes s5spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .s5-load i{animation:none} }

/* ---- 次へ（この版では作らないことを正直に出す） ---- */
.s5-next{margin-top:14px;padding:12px 15px;border:1px dashed var(--s5-line2);border-radius:5px;
  font-size:12.5px;color:var(--s5-tx3);line-height:1.95;background:rgba(255,255,255,.6)}
.s5-next b{color:var(--s5-tx2)}

@media (max-width:720px){
  .s5-row{flex-direction:column;gap:4px}
  .s5-row .s5-k{flex:none}
  #zqs5-root{padding:10px 11px 30px}
  .s5-top{flex-wrap:wrap;gap:9px}
}