/* ============================================================
   ads.css — 広告レール（左右の縦長バナー枠）
   Google AdSense などを差し込むための枠のスタイルです。
   色は theme.css の変数を参照します。
   ============================================================ */

.ad-rail{
  position:fixed;top:50%;width:160px;min-height:600px;
  transform:translateY(-50%);z-index:1;
  display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--brand-border);border-radius:14px;
  background:var(--panel-translucent);
  color:var(--brand);font-size:12px;font-weight:800;letter-spacing:.08em;
  box-shadow:0 8px 18px rgba(124,58,237,.08);
  overflow:hidden;
}
.ad-rail-left{left:12px}
.ad-rail-right{right:12px}

/* 実広告が入っていない（プレースホルダー）時の見た目 */
.ad-box{
  width:160px;height:600px;display:grid;place-items:center;
  text-align:center;line-height:1.5;
}
.ad-box small{
  display:block;margin-top:6px;color:var(--brand-soft);
  font-size:10px;font-weight:700;letter-spacing:0;
}

/* AdSense の <ins> が入った時は枠線・地色を消して広告だけを見せる */
.ad-rail.ad-filled{border-style:solid;border-color:transparent;background:transparent;box-shadow:none}
.ad-slot{width:160px;min-height:600px;display:block}

/* 画面が狭い時は広告レールを隠し、本体を全幅に */
@media(max-width:1360px){
  .ad-rail{display:none}
  .app{margin-left:0;margin-right:0}
}