/* LINE 登録しないと使えない機能の覆い。
   「見えるけど押せない」（2026-09-14 wang さんの指定）なので、中身は
   隠さず薄くするだけにして、その上に押せない層を重ねる。 */

.gated{position:relative}

/* 中身。薄くするのは「押せない」と分かる程度まで。**読めなくしない** ――
   2026-09-22 きむら指摘「配点でしぼるが完全に見えない」。原因は .42 まで
   落としたうえに、覆いの地色（card 72%）と中央の案内カードを重ねていたこと。
   暗いテーマではこれで中身が消える。薄いのは .88 までにとどめる。

   上に余白を取るのは、右上の印（.gateBadge）が中身に重ならないようにするため。
   最初の直しで印を重ねたところ、条件の「持ち込み可」チップが隠れた ――
   見せるために直したのに別のものを隠しては元も子もない。 */
.gated > .gateInner{opacity:.88;pointer-events:none;user-select:none;padding-top:30px}

/* 覆い。中身の上に重ね、クリックを全部受ける。
   **地色は塗らない。** 塗ると中身が読めなくなり、「何が使えるようになるのか」が
   伝わらない（2026-09-22 きむら指摘）。ロック中であることは右上の印だけで示し、
   説明は押したときに #gateDlg で出す。 */
.gateVeil{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:flex-start;justify-content:flex-end;
  padding:var(--sp-2);
  border:1px dashed var(--brand-line);
  border-radius:var(--r-md);
  background:transparent;
  cursor:pointer;
}
/* 押せることが分かる程度に、触れたときだけごく薄く反応する。 */
.gateVeil:hover{background:var(--brand-hover)}

/* ロック中の印。中身の右上に小さく載せるだけ ―― 中央に置くと、また中身を
   覆い隠すことになる。色は --brand と --brand-ink の組（tokens の既定の対）。 */
.gateBadge{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:var(--r-pill);
  background:var(--brand);color:var(--brand-ink);
  font-size:var(--fs-xs);font-weight:700;line-height:1.4;
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 1px 4px var(--shadow-card);
}

/* 促しボタン。フッタの LINE ボタンと同じ見た目に寄せる。 */
.gateBtn{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 18px;border:0;border-radius:var(--r-pill);
  background:var(--brand);color:var(--brand-ink);
  font:inherit;font-size:var(--fs-sm);font-weight:700;cursor:pointer;
}
.gateBtn:hover{filter:brightness(1.06)}
.gateBtn:focus-visible{outline:2px solid var(--brand-text);outline-offset:2px}

/* 小さい画面では印だけさらに詰める（中身の面積を奪わない）。 */
@media (max-width:480px){
  .gateVeil{padding:6px}
  .gateBadge{padding:3px 8px}
  .gated > .gateInner{padding-top:26px}
}

/* ── 覆いを押したときの説明 ─────────────────
   入口（LINE）へ直行せず、まず「何ができるようになるのか」を site の中で出す。
   作りは version.css の .verDlg と同じ（スマホは下から、700px 以上は中央）。 */
.gateDlg{border:none;padding:0;background:none;max-width:none;max-height:none;
  width:100%;height:100%;margin:0}
.gateDlg::backdrop{background:var(--scrim)}
.gateDlg[open]{display:flex;align-items:flex-end;justify-content:center}
.gateDlgCard{background:var(--card);color:var(--ink);width:100%;max-width:460px;
  border-radius:var(--r-lg) var(--r-lg) 0 0;padding:18px var(--pad) 24px;
  max-height:86vh;overflow:auto;font-size:var(--fs-base)}
.gateDlgHead{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3)}
.gateDlgHead h2{margin:0;font-size:var(--fs-lg)}
.gateDlgClose{background:none;border:none;color:var(--muted);font:inherit;
  font-size:var(--fs-lg);line-height:1;padding:var(--sp-1);cursor:pointer;flex:none}
.gateDlgLead{margin:var(--sp-3) 0 0;font-size:var(--fs-sm);color:var(--soft);line-height:1.7}
.gateDlgSub{margin:var(--sp-2) 0 0;font-size:var(--fs-sm);color:var(--muted);line-height:1.7}
/* ダイアログの中のボタンは覆いのものより1段大きく出す（ここが行き先）。
   覆いの中では <button> なので下線は出ないが、ここは <a> なので消しておく。 */
.gateDlgCard .gateBtn{display:block;margin-top:var(--sp-4);text-align:center;text-decoration:none}

@media (min-width:700px){
  .gateDlg[open]{align-items:center}
  .gateDlgCard{border-radius:var(--r-lg);max-height:80vh}
}

/* 詳細の中で、口コミ本文の代わりに出す一行（detail.js）。覆う器が無い場所なので
   中身そのものを差し替える ―― 件数は見出しに残す（何が読めるのか伝えるため）。 */
.gateLocked{
  margin:var(--sp-2) 0 0;padding:10px 12px;
  border:1px dashed var(--brand-line);border-radius:var(--r-md);
  background:var(--brand-soft);color:var(--brand-text);
  font-size:var(--fs-sm);font-weight:700;line-height:1.6;
}

/* パソコンだけに出す「QR コードをスマホの LINE で読む」の一言（2026-10-19）。
   スマホ（指で触る端末）では LINE アプリに直接飛ぶので出さない。 */
@media (pointer: coarse){ .gatePcHint{ display:none } }

/* LINE をすすめる理由（2つだけ）とメールでログイン（2026-10-19） */
.gateWhy{margin:var(--sp-2) 0 0;padding-left:1.2em;font-size:var(--fs-sm);color:var(--soft);line-height:1.7}
.mailBox{margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--rule)}
.gateBtn.gateBtnSub{background:transparent;color:var(--brand-text);border:1px solid var(--brand-text)}
.gateDlgCard .mailBox .gateBtn{margin-top:var(--sp-2)}
.mailForm input{display:block;width:100%;box-sizing:border-box;margin-top:var(--sp-2);padding:10px 12px;
  font-size:16px;border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--paper);color:var(--ink)}
.mailMsg{margin:var(--sp-2) 0 0;font-size:var(--fs-sm);color:var(--soft);line-height:1.7}
.mailMsg:empty{display:none}
.mailBox [hidden]{display:none !important}   /* .gateDlgCard .gateBtn{display:block} に勝たせる */