/* ふりかえり — 白基調・アクセントは #2563eb（Ryu指示 2026-08-29）
 *
 * ★v0.10.2 まで「明るいラボ」の体裁だった：
 *     方眼紙の背景／シアン(#2563eb)の計器風／紫のボタン／四隅のカギ印
 *   Ryu指示「この方眼紙みたいなのやめて。白背景にアクセントはいつものきれいなブルー」
 *   ＝ **サイト標準の #2563eb**（zq-accent と発表一覧が使っている色）にそろえる。
 */
:root{
  --lb-bg:#fff; --lb-panel:#fff; --lb-panel2:#f7fafd;
  --lb-line:#e8eef6; --lb-line2:#dde6f0;
  --lb-blue:#2563eb; --lb-blueSoft:#f2f7ff;
  --lb-tx:#1b2637; --lb-tx2:#4d6076; --lb-tx3:#8496a8;
  --lb-sans:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
}
*{box-sizing:border-box}
html,body.zqlb-body{margin:0;min-height:100%}
body.zqlb-body{
  background:#fff;                     /* ★方眼紙をやめる。白一色 */
  color:var(--lb-tx);font-family:var(--lb-sans);font-size:15px;line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
#zqlb-root{max-width:920px;margin:0 auto;padding:22px 18px 60px}

.lb-lbl{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--lb-blue)}

/* ---- 見出し ---- */
.lb-top{display:flex;align-items:center;gap:11px;padding:13px 16px;margin-bottom:16px;
  background:#fff;border:1px solid var(--lb-line2);border-radius:8px}
.lb-crest{width:26px;height:26px;border-radius:5px;display:grid;place-items:center;
  color:#fff;font-size:11px;background:var(--lb-blue);flex:0 0 auto}
.lb-top b{font-size:15px}
.lb-top .lb-sub{color:var(--lb-tx3);font-size:12px}
.lb-sp{flex:1}

/* ---- 器 ---- */
.lb-pane{background:var(--lb-panel);border:1px solid var(--lb-line2);border-radius:8px;
  margin-bottom:14px;overflow:hidden}
.lb-ph{display:flex;align-items:center;gap:8px;padding:10px 15px;
  border-bottom:1px solid var(--lb-line);background:var(--lb-blueSoft)}
.lb-ph .lb-dot{width:6px;height:6px;border-radius:50%;background:var(--lb-blue)}
.lb-body{padding:16px 18px 18px}

/* ---- 入口・合言葉 ---- */
.lb-gate{max-width:460px;margin:6vh auto 0}
.lb-gate h2{font-size:17px;margin:0 0 8px}
.lb-gate p{color:var(--lb-tx2);font-size:13.5px;margin:0 0 18px}
.lb-in{display:flex;gap:8px}
.lb-in input{flex:1;background:#fff;border:1px solid var(--lb-line2);color:var(--lb-tx);
  font-family:var(--lb-sans);font-size:17px;padding:11px 14px;border-radius:6px;text-align:center;letter-spacing:.06em}
.lb-in input:focus{outline:none;border-color:var(--lb-blue);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.lb-btn{padding:11px 22px;border-radius:6px;border:0;cursor:pointer;font-family:inherit;
  font-size:15px;font-weight:700;background:var(--lb-blue);color:#fff}
.lb-btn:hover:not(:disabled){background:#1d55d0}
.lb-btn:disabled{opacity:.45;cursor:default}
.lb-btn.sub{background:#fff;border:1px solid var(--lb-line2);color:var(--lb-tx2);font-weight:600;font-size:13px;padding:7px 14px}
.lb-btn.sub:hover{background:var(--lb-blueSoft);border-color:#b9cde6}
.lb-msg{margin-top:12px;font-size:13px;color:#c0392b;min-height:20px}

/* ---- 一覧 ---- */
.lb-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:10px}
.lb-card{text-align:left;background:#fff;border:1px solid var(--lb-line2);border-radius:5px;padding:13px 15px;
  cursor:pointer;font-family:inherit;font-size:14px;color:var(--lb-tx);transition:border-color .15s,box-shadow .15s}
.lb-card:hover{border-color:var(--lb-blue);box-shadow:0 2px 8px rgba(47,111,208,.13)}
.lb-card .t{font-weight:800;font-size:15px;margin-bottom:3px}
.lb-card .b{color:var(--lb-blue);font-size:13.5px;margin-bottom:6px}
.lb-card .m{color:var(--lb-tx3);font-size:11.5px;font-family:var(--lb-mono)}

/* ---- 中身 ---- */
.lb-row{display:flex;gap:14px;margin-bottom:12px;align-items:flex-start}
.lb-row:last-child{margin-bottom:0}
.lb-row .k{flex:0 0 160px;font-family:var(--lb-mono);font-size:10.5px;color:var(--lb-blue);padding-top:4px;letter-spacing:.05em}
.lb-row .v{flex:1;min-width:0;white-space:pre-wrap;word-break:break-word}
.lb-row .v em{font-style:normal;color:var(--lb-tx3);font-size:13px}
.lb-hr{height:1px;background:var(--lb-line);margin:16px 0}
.lb-who{display:inline-block;padding:3px 10px;border-radius:11px;background:#eef4fc;color:var(--lb-blue);
  font-size:12px;font-weight:700;margin-bottom:8px}
.lb-chip{display:inline-block;padding:3px 9px;border-radius:11px;background:#eafafd;color:#0b7f90;
  font-size:12px;font-weight:700;margin:0 5px 5px 0}
.lb-card2{border:1px solid var(--lb-line2);border-left:3px solid var(--lb-blue);border-radius:4px;
  padding:9px 12px;margin:0 0 7px;background:#fbfdff}
.lb-card2 b{color:var(--lb-blue)}
.lb-card2 .d{color:var(--lb-tx2);font-size:13px;margin-top:2px}
.lb-link{border:1px solid var(--lb-line2);border-left:3px solid var(--lb-purple);border-radius:4px;
  padding:9px 12px;margin:0 0 7px;background:#fdfbff}
.lb-link .p{font-weight:700;color:var(--lb-purple);font-size:13.5px}
.lb-link .w{color:var(--lb-tx2);font-size:13px;margin-top:2px}

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

.lb-note{margin-top:14px;padding:11px 14px;border:1px dashed var(--lb-line2);border-radius:5px;
  font-size:12px;color:var(--lb-tx3);line-height:1.9;background:rgba(255,255,255,.65)}

@media print{
  body.zqlb-body{background:#fff;background-image:none}
  .lb-btn,.lb-note,.lb-top .lb-sp{display:none}
  .lb-pane{box-shadow:none;break-inside:avoid}
}
@media (max-width:640px){
  .lb-row{flex-direction:column;gap:2px}
  .lb-row .k{flex:none}
  #zqlb-root{padding:14px 12px 40px}
}

/* ★v0.2.0 — STAGE4 を出していないチームも一覧に出す。その状態を短く添える */
.lb-st{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:10px;
  font-size:10.5px;font-weight:700;vertical-align:middle}
.lb-st.draft{background:#fff4e0;color:#a06a12;border:1px solid #f0d9a0}
.lb-st.none{background:#eef2f7;color:#69798c;border:1px solid #d8e2ee}
.lb-em{font-style:normal;color:var(--lb-tx3);font-weight:400}

/* ★見つからないときのヒント（v0.5.0） */
.lb-hint{margin:14px 0 10px;padding:0 0 0 20px;color:#4a5f77;font-size:13.5px;line-height:1.95}
.lb-hint li{margin:0 0 4px}
.lb-contact{margin:12px 0 18px;padding:10px 12px;background:#f4f8fc;border-radius:5px;
  font-size:13.5px;color:#33455c}
/* ★運営むけの入口。目立たせない（参加者が押すものではない） */
.lb-staff{margin-top:24px;text-align:center}
.lb-staff a{display:inline-block;padding:9px 16px;border:1px solid #cfdae6;border-radius:6px;
  background:#f7fafd;color:#5b7186;font-size:13px;text-decoration:none}
.lb-staff a:hover{background:#eef4fa;color:#33455c;border-color:#b6c8da}


/* ★あおチャレ当日の資料（v0.6.0） */
.lb-doc .lb-body{text-align:center}
.lb-doclead{margin:0 0 14px;color:#4a5f77;font-size:14px}
.lb-doc .lb-a{display:inline-block;text-decoration:none;padding:12px 26px}
.lb-doc .lb-small{margin:14px 0 0;color:#8496a8;font-size:12px;line-height:1.85}
@media print{.lb-doc{display:none}}


/* ★v0.8.0 入口＝同意＋ニックネーム */
/* ★入口はプログラムの #acg のCSSに乗せる。私は「足した欄」だけを整える */
#acg .lb-f{text-align:left;margin:18px 0 14px}
#acg .lb-f label{display:block;margin:0 0 6px;font-size:13px;color:#5b7186;font-weight:600}
#acg .lb-f input{width:100%;padding:11px 13px;border:1px solid #cfdae6;border-radius:6px;
  font-size:15px;font-family:inherit;box-sizing:border-box}
#acg .lb-msg{color:#c0392b;font-size:13px;margin:0 0 10px;min-height:1px}
#acg .lb-staff{margin-top:20px}

/* ★3つのボタン */
.lb-menu{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.lb-tile{display:block;text-align:left;text-decoration:none;cursor:pointer;
  padding:18px 18px;border:1px solid #d7e3ef;border-radius:9px;background:#fff;
  font-family:inherit;transition:background .12s,border-color .12s}
.lb-tile:hover:not(:disabled){background:#f4f9ff;border-color:#9fc0dd}
.lb-tile b{display:block;font-size:15.5px;color:#1f3350;margin:0 0 5px}
.lb-tile span{display:block;font-size:12.5px;color:#8496a8}
.lb-tile:disabled{opacity:.5;cursor:not-allowed}


/* ★入口だけ広げる（v0.8.2）
   .lb-gate は 460px。名前だけの小さな欄のための幅だった。
   ★同意文が入ったことで狭すぎたので、**この画面だけ**広げる。
   合言葉の画面（運営むけ）は小さいままでよいので、.lb-gate は触らない。 */
.lb-gate.lb-wide{max-width:900px}
#acg{max-width:none}
@media (max-width:640px){ .lb-gate.lb-wide{max-width:100%} }

/* ★v0.16.0：ここに書いていた自前の「課題設定シート」は捨てた。
   元のSTAGE3 発表画面のCSSを #lbIdea の中に閉じて取り込むようにしたため。
   ★自前のものを残すと、どちらが効いているか分からなくなる。 */
#lbIdea{margin:0}
.lb-who{background:var(--lb-blueSoft);color:var(--lb-blue);display:inline-block;
  margin:0 0 10px;padding:3px 11px;border-radius:999px;font-size:12.5px;font-weight:700}
.lb-empty{margin:0;color:#8496a8;font-size:13.5px}
.lb-draft{margin:0 0 12px;color:#8496a8;font-size:13px}
#lbSheet{overflow-x:auto}

/* ★画面2：資料（v0.10.0） */
.lb-docTop{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.lb-docNote{color:#8496a8;font-size:13px}
.lb-docFrame{border:1px solid #dbe4ee;border-radius:10px;overflow:hidden;background:#fff;
  height:calc(100vh - 190px);min-height:420px}
.lb-docFrame iframe{width:100%;height:100%;border:0;display:block}
@media (max-width:640px){ .lb-docFrame{height:calc(100vh - 230px);min-height:340px} }

/* ★画面3：一覧（元の発表一覧の見た目に乗せる） */
.lb-gal{min-height:0;background:transparent;padding:0}
.lb-gal .zqg-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.lb-gt{display:block;text-align:left;width:100%;cursor:pointer;font-family:inherit;
  border:1px solid #e4eaf3;border-radius:10px;background:#fff;padding:16px 18px}
.lb-gt:hover{border-color:#9fc0dd;background:#f7fbff}
.lb-gt .zqg-tteam{font-size:12px;font-weight:700;color:#2563eb;letter-spacing:.04em;margin:0 0 6px}
.lb-gt .zqg-tbiz{font-size:16px;font-weight:700;color:#1b2637;margin:0 0 5px}
.lb-gt .zqg-tidea{font-size:13px;color:#6b7a90;line-height:1.7;margin:0 0 10px}
.lb-gt .zqg-tfoot{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:#8496a8}
.lb-gt .zqg-tk{background:#eef4fc;color:#2563eb;border-radius:999px;padding:2px 9px;font-weight:700}


/* ★画面1〜3の見た目をそろえる（Ryu指示 2026-08-29「画面１、２、３もデザインを合わせて」）
 *
 *   画面1 は**プログラムの consent-gate.html の <style> をそのまま**入れている。
 *   その中は 赤字(#b3261e) と 別の青(#0b6fa4) で、画面3・4（#2563eb）と合っていなかった。
 *   ★向こうのファイルは書き換えない。**こちらで上から塗り替える。**
 *     向こうの style は私のCSSより後に差し込まれるので、
 *     `#zqlb-root #acg` と**強い指定**にして勝たせる。
 */
#zqlb-root #acg{color:var(--lb-tx);max-width:none}
#zqlb-root #acg h3{font-size:19px;color:var(--lb-tx);margin:0 0 4px}
#zqlb-root #acg .sub{color:var(--lb-tx3)}
#zqlb-root #acg h4{color:var(--lb-blue);font-size:13px;letter-spacing:.03em}
#zqlb-root #acg .terms{background:#fff;border:1px solid var(--lb-line2);border-radius:8px}
#zqlb-root #acg .terms b{color:var(--lb-blue)}          /* ★赤字 → いつもの青 */
#zqlb-root #acg .contact{background:var(--lb-blueSoft);border:1px solid var(--lb-line2);border-radius:8px}
#zqlb-root #acg button{background:var(--lb-blue);border-radius:6px;font-weight:700;
  padding:11px 22px;font-size:15px}
#zqlb-root #acg button:hover:not(:disabled){background:#1d55d0}
#zqlb-root #acg button:disabled{background:var(--lb-blue);opacity:.45}

/* 画面1 を器の中に入れて、他の画面と同じ枠にそろえる */
#zqlb-root .lb-gate.lb-wide{background:#fff;border:1px solid var(--lb-line2);border-radius:8px;
  padding:22px 24px;margin:0 auto 14px}

/* 画面2：資料の枠も同じ角丸・同じ線に */
.lb-docFrame{border:1px solid var(--lb-line2);border-radius:8px}
.lb-docTop{gap:14px}

/* 画面3：カードの角丸と線を、他とそろえる */
.lb-gt{border:1px solid var(--lb-line2);border-radius:8px}
.lb-gt:hover{border-color:var(--lb-blue);background:var(--lb-blueSoft)}
.lb-gt .zqg-tteam{color:var(--lb-blue)}
.lb-gt .zqg-tk{background:var(--lb-blueSoft);color:var(--lb-blue)}

/* 画面4：課題設定シートの見出しも同じ青に */
.lb-colHd{color:var(--lb-blue);border-bottom:2px solid #dbe7f7}
.lb-who{background:var(--lb-blueSoft);color:var(--lb-blue)}

/* ★画面3・4は、元の発表画面と同じく画面いっぱいに出す（v0.16.3）
   元の `.zqg-one .zqg-sheetHolder` には幅の上限が無い。
   920px に押し込むと、戦略シートの7列が1列100px以下に潰れる。 */
#zqlb-root.lb-full{max-width:none;padding-left:24px;padding-right:24px}
@media (max-width:640px){ #zqlb-root.lb-full{padding-left:12px;padding-right:12px} }


/* ★お問い合わせをボタンの下に置く（v0.17.1） */
#zqlb-root .lb-contactBox{margin-top:18px}
#zqlb-root .lb-contactBox .contact{margin-top:0}


/* ★AoIちゃん／ミラボのコメント（v0.19.1・Ryu指示「もっと丁寧に」「静止画像も出して」）
   ★白基調＋#2563eb のまま。色は増やさない。
   ★立ち絵は元のプラグインのものを URL で指すだけ（同梱しない）。 */
#zqlb-root .lb-fb{margin:16px 0 4px;padding:18px 20px 16px;
  background:#fbfcfe;border:1px solid #e3ebf7;border-radius:10px}
#zqlb-root .lb-fbHd{display:flex;align-items:center;gap:12px;
  padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid #e8eef8}
#zqlb-root .lb-fbAv{flex:0 0 auto;width:46px;height:46px;border-radius:50%;
  overflow:hidden;background:#eef4fc;border:1px solid #dce7f7;
  display:block;position:relative}
/* ★立ち絵は全身なので、丸の中は**顔に寄せて**切り抜く。
   ★object-fit:cover は使えない。この2枚の SVG は width/height を持たず
     viewBox だけなので、ブラウザが元の大きさを決められず cover が効かない
     （実測：全身が縮んで丸に収まってしまった）。
   ★代わりに、絵を丸の 180% の高さで置いて上端をそろえる。
     180/220/250/290% を実際に並べて見て、**180% だけが2枚とも顔が切れなかった。**
     250%以上は AoI の顎と、ミラボの口が切れる。 */
#zqlb-root .lb-fbAv img{position:absolute;left:50%;top:0;
  transform:translateX(-50%);width:auto;height:180%;display:block}
#zqlb-root .lb-fbNm{display:flex;flex-direction:column;gap:2px;min-width:0}
#zqlb-root .lb-fbNm b{font-size:14px;font-weight:700;color:var(--lb-tx)}
#zqlb-root .lb-fbNm i{font-style:normal;font-size:11.5px;color:var(--lb-tx3);letter-spacing:.02em}
#zqlb-root .lb-fbRow + .lb-fbRow{margin-top:15px;padding-top:15px;border-top:1px dashed #e8eef8}
#zqlb-root .lb-fbTag{display:inline-block;margin:0 0 7px;border-radius:4px;
  padding:3px 10px;font-size:11.5px;font-weight:700;letter-spacing:.04em}
#zqlb-root .lb-fbG{background:#e7f0fe;color:#2563eb}
#zqlb-root .lb-fbN{background:#f0f2f6;color:#4d6076}
#zqlb-root .lb-fbTx{margin:0;font-size:14px;line-height:2;color:var(--lb-tx)}
@media (max-width:560px){
  #zqlb-root .lb-fb{padding:15px 15px 13px}
  #zqlb-root .lb-fbAv{width:40px;height:40px}
  #zqlb-root .lb-fbTx{font-size:13.5px;line-height:1.95}
}
@media print{ #zqlb-root .lb-fb{break-inside:avoid;background:#fff} }