/* =========================================================
   USOMAP / modal — モーダル・トースト・羊皮紙の読み物
   ========================================================= */
.modal{position:fixed;inset:0;z-index:60;display:none;align-items:center;
  justify-content:center;background:rgba(10,7,4,.84);padding:18px}
.modal.show{display:flex}
.modal .box{background:var(--bg2);border:1px solid var(--line);border-radius:9px;
  padding:18px;max-width:min(94vw,460px);max-height:92vh;display:flex;flex-direction:column;
  gap:12px;box-shadow:0 28px 80px rgba(0,0,0,.65)}
.modal.wide .box{max-width:min(96vw,760px)}
.modal h3{font-family:var(--la);font-size:15px;letter-spacing:.14em;color:var(--brass);
  font-weight:600}
.modal p{font-size:13px;line-height:1.75;color:var(--txt-2)}

/* ---- ヘルプ本文 ---- */
/* flex の子は既定で内容より縮まないので、min-height:0 を入れて枠内に収める */
.modal .algo{overflow-y:auto;min-height:0;padding-right:8px}
.modal .algo::-webkit-scrollbar{width:8px}
.modal .algo::-webkit-scrollbar-thumb{background:#4a3c22;border-radius:6px}
.algo .lead{
  font-size:13.5px;line-height:2.0;color:var(--txt-2);
  padding:14px 16px;margin-bottom:6px;
  background:rgba(203,162,90,.06);border-left:2px solid var(--brass-d);border-radius:3px;
}
.algo h4{
  font-family:var(--mincho);font-size:14.5px;font-weight:600;color:#f2e6c8;
  margin:26px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line-2);
  display:flex;align-items:center;gap:9px;
}
.algo h4::before{content:'';width:5px;height:5px;border-radius:50%;
  background:var(--brass);flex:none}
.algo p{margin-bottom:12px}
.algo p:last-child{margin-bottom:0}
.algo .keys{
  font-family:var(--jp);font-size:12.5px;line-height:2.1;color:var(--txt-2);
  background:#1a140c;border:1px solid var(--line-2);border-radius:4px;padding:11px 13px;
}
.modal img{max-width:100%;max-height:66vh;border-radius:4px;display:block;margin:0 auto;
  -webkit-touch-callout:default}
.modal .foot{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.modal .foot .btn{width:auto;padding:9px 18px}
.sharerow{display:flex;gap:7px}
.sharerow input{flex:1;min-width:0;background:#17110a;border:1px solid var(--line-2);
  color:#f4e8ca;padding:9px 10px;border-radius:var(--r-s);font-family:var(--la);font-size:13px}

.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);
  background:#2b2318;border:1px solid var(--brass-d);color:#f2e6c8;padding:10px 18px;
  border-radius:22px;font-size:13px;box-shadow:0 12px 34px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transition:.24s;z-index:90;max-width:88vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}