/* ===== レイアウト ===== */
.analyzer-container{ --panel-h:72vh; max-width:1080px; margin:0 auto; padding:16px 20px 48px; }
.analyzer-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }

/* 共通カード */
.card{ border:1px solid #e5e7eb; border-radius:12px; background:#fff; display:flex; flex-direction:column; overflow:hidden; }
.card-head{ position:relative; padding:16px 16px 12px; border-bottom:1px solid #f0f0f0; flex:0 0 auto; }
.card-body{ padding:16px; flex:1 1 auto; overflow:auto; }

/* 右：結果のパネルは固定高さ */
.card:not(.card--form){ height:var(--panel-h); }

/* 左：フォーム */
.card--form{ height:auto; }
.card-body--form{ overflow:visible; }

/* フォーム */
.form label{ display:block; font-weight:600; margin:10px 0 6px; }
.form input[type="url"], .form input[type="text"]{ width:100%; padding:10px 12px; border:1px solid #d1d5db; border-radius:8px; }
.actions{ display:flex; gap:8px; margin-top:14px; align-items:center; flex-wrap:wrap; }
.btn{ padding:10px 14px; border:1px solid #d1d5db; border-radius:10px; background:#f9fafb; cursor:pointer; }
.btn-primary{ background:#2563eb; border-color:#2563eb; color:#fff; }
.btn-ghost{ background:transparent; }
.iconbtn{ appearance:none; border:1px solid #d1d5db; background:#fff; border-radius:10px; padding:6px 10px; line-height:1; cursor:pointer; }
.expand-btn{ position:absolute; right:12px; top:12px; font-size:14px; }

/* 新規タブボタンはDOMに残すが非表示 */
.open-new-hidden{ display:none !important; }

/* ステータス */
.statusbar{ display:flex; gap:8px; align-items:center; margin-top:12px; color:#6b7280; }
.dot{ width:8px; height:8px; border-radius:50%; background:#9ca3af; }
.dot.blink{ animation: blink 1s infinite; }
@keyframes blink{ 50%{ opacity:.3 } }
.timer{ font-variant-numeric: tabular-nums; }

/* 「やることだけ」表示 */
.pretty{ display:block; }
.empty{ color:#6b7280; }
.todo{ border:1px solid #e5e7eb; border-radius:10px; padding:12px; margin-bottom:12px; background:#fafafa; }
.todo h3{ margin:0 0 8px; font-size:16px; }
.badge{ display:inline-block; font-size:12px; padding:2px 8px; border-radius:999px; background:#e5e7eb; margin-right:6px; }
.prio-high{ background:#fde68a; }
.prio-mid{ background:#bfdbfe; }
.prio-low{ background:#e5e7eb; }
.howto{ background:#fff; border:1px dashed #e5e7eb; padding:10px; border-radius:8px; margin:8px 0; }
.howto-title{ font-weight:700; margin-bottom:4px; }
.code-title{ font-weight:700; margin-top:8px; margin-bottom:4px; }
.code{ background:#0b1020; color:#f5f5f5; border-radius:8px; padding:10px; overflow:auto; }

/* ログ */
.is-hidden-by-default{ display:none; }
.is-hidden{ display:none !important; }
.log-box{ background:#0b1020; color:#e5e7eb; padding:10px; border-radius:8px; max-height:200px; overflow:auto; }

/* 小さめ説明文 */
.muted-tiny,.hint-tiny{ font-size:.75rem; color:#6b7280; }

/* ===== オーバーレイ（iframeで共通レイアウトを表示） ===== */
/* ヘッダーと被らないよう上80px空け、中央寄せはせず上寄せに */
.overlay{
  position:fixed; inset:0; background:rgba(9,11,20,.55);
  z-index:2147483647;
  display:none;           /* class付与で可視化 */
  padding:80px 24px 24px; /* ← 上を80px確保 */
  overflow:auto;          /* 画面が小さい場合もスクロール可能に */
}
.overlay[hidden]{ display:none !important; }
.overlay.overlay--visible{ display:block !important; }
.overlay-inner{
  width:min(1280px,96vw);
  max-height:calc(100vh - 120px); /* 80+下余白分を引いて収まるように */
  background:#fff; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.35);
  margin:0 auto;                 /* 画面中央の横位置に */
  display:flex; flex-direction:column; overflow:hidden;
}
.overlay-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid #e5e7eb; }
.overlay-head h3{ margin:0; font-size:16px; }
.overlay-actions{ display:flex; gap:8px; }
.overlay-frame{ width:100%; height:100%; border:0; }

/* 背景スクロール抑止 */
body.no-scroll{ overflow:hidden; }

/* SP */
@media (max-width:900px){
  .analyzer-grid{ grid-template-columns:1fr; }
  .analyzer-container{ --panel-h:64vh; }
  .overlay-inner{ width:98vw; max-height:calc(100vh - 120px); }
}