/* =========================================================
   QRコードメーカー 専用スタイル（fixedヘッダー＋専用スクロール容器）
   ========================================================= */

/* ------ 重要：このページだけ root をスクロールさせない ------ */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;            /* ルートはスクロール禁止 */
  overscroll-behavior-y: none; /* Android系のラバー無効 */
}

/* ヘッダーを viewport に固定（stickyは使わない） */
body > header {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: #fff;
}

/* ノッチ端末でも自然に吸収 */
@supports (padding-top: env(safe-area-inset-top)) {
  body > header { padding-top: calc(1rem + env(safe-area-inset-top)); }
}

/* ---- 専用スクロール容器：ここだけスクロール ---- */
.page-scroll {
  min-height: 100dvh;
  height: 100dvh;
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* iOS慣性スクロール */
  overscroll-behavior: contain;      /* ここでオーバースクロールを止める */
  padding-top: var(--header-h, 64px);/* JSが実高を入れる（初期64） */
  background: #fdfdfd;
}

/* ===== 以降、ページ固有のレイアウト ===== */

main {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 2rem 1rem 2rem; /* 上側は header padding をpage-scroll側で吸収済み */
  box-sizing: border-box;
  min-height: calc(100vh - 120px);
}

/* コンテナ */
.container {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  padding: 22px;
  width: min(880px, 94vw);
  display: grid;
  gap: 18px;
  color: inherit;
}

/* 見出し */
.tool-header { text-align: center; }
.tool-header h1 { margin: 0 0 .3rem; font-size: 1.6rem; font-weight: 800; }

/* 入力欄 */
.form-block { display: grid; gap: .5rem; }
#textInput {
  width: 100%;
  padding: .7rem .8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 1rem;
  background: #fafafa;
}

/* 作成ボタン行 */
.action-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .6rem;
  margin-top: .5rem;
}
.btn-primary {
  padding: .6rem 1.3rem;
  border-radius: 10px;
  border: 2px solid #000;
  background: #fff;
  color: #000;
  cursor: pointer;
  transition: all .2s;
}
.btn-primary:hover:not(:disabled){ background:#000; color:#fff; }
.btn-primary:disabled{ opacity:.5; cursor:not-allowed; }

/* スピナー */
.spinner{
  width:20px; height:20px;
  border:3px solid rgba(0,0,0,.15);
  border-top-color:#000;
  border-radius:50%;
  display:none;
  animation:spin .9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* プレビュー */
.preview-card{
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel);
  padding:1rem;
  display:grid;
  gap:12px;
}
.canvas-wrap{
  display:flex; justify-content:center; align-items:center;
  padding:.5rem; min-height:256px;
}
#qrcode canvas, #qrcode img{
  display:block; max-width:100%; height:auto;
  background:#000; border:1px solid #eee; border-radius:6px;
}

/* ダウンロード＆ステータス */
.preview-actions{
  display:flex; gap:.6rem; align-items:center; justify-content:center; flex-wrap:wrap;
}
#downloadBtn{
  padding:.55rem 1rem; border:2px solid #000; background:#fff; color:#000; border-radius:8px; cursor:pointer; transition:background .2s, color .2s, opacity .2s;
}
#downloadBtn:hover:not(:disabled){ background:#000; color:#fff; }
#downloadBtn:disabled{ opacity:.4; cursor:not-allowed; }
.status{ color:#777; font-size:.92rem; text-align:center; }

/* 備考 */
.note{ color:#666; font-size:.9rem; line-height:1.7; text-align:center; }

/* スマホ調整 */
@media (max-width: 640px){
  .container{ padding:18px; gap:14px; }
  .tool-header h1{ font-size:1.4rem; }
  #textInput{ font-size:.95rem; }
  .btn-primary{ width:100%; }
}