/* ============================================================
   viewer.css — viewer.html 専用スタイル
   （common.css を読み込んだ上で使用）
   ============================================================ */
html,body{ height:100%; }
body{
  display:flex; flex-direction:column;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}

/* ── ツールバー ── */
.toolbar{
  flex:0 0 auto; display:flex; align-items:center; gap:14px;
  padding:10px 16px; background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border-bottom:1px solid var(--hair); flex-wrap:wrap; z-index:40;
}
.doc-title{ color:var(--ink); font-size:13px; letter-spacing:.02em; max-width:28vw;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.9; }
.spacer{ flex:1 1 auto; }

.cluster{ display:flex; align-items:center; gap:6px; background:rgba(0,0,0,.22);
  border:1px solid var(--hair); border-radius:var(--radius); padding:4px; }
button{ font-family:inherit; }
.btn{ appearance:none; border:0; background:transparent; color:var(--ink-2);
  width:34px; height:30px; border-radius:7px; display:grid; place-items:center; cursor:pointer;
  transition:background .15s ease, color .15s ease; }
.btn:hover{ background:rgba(255,255,255,.06); color:var(--ink); }
.btn:active{ background:rgba(255,255,255,.03); }
.btn svg{ width:16px; height:16px; }
.btn:disabled{ opacity:.35; cursor:default; }
.btn-text{ width:auto; padding:0 12px; font-size:12px; letter-spacing:.04em; }
.back-link{ text-decoration:none; }

.readout{ min-width:52px; text-align:center; font-family:var(--font-mono); font-size:12.5px;
  color:var(--ink); padding:0 4px; font-variant-numeric:tabular-nums; }
.readout .sep{ color:var(--ink-3); margin:0 2px; }

/* ── ワークスペース（ステージのみ） ── */
.workspace{ position:relative; flex:1 1 auto; display:flex; min-height:0; }

/* ── ステージ（スクロール表示領域） ── */
.stage{
  flex:1 1 auto; overflow:auto; padding:24px; cursor:grab; overscroll-behavior:contain;
  background:radial-gradient(1200px 500px at 50% -8%, rgba(121,198,192,.05), transparent 60%), var(--bg);
}
.stage.grabbing{ cursor:grabbing; }
/* margin auto にすることで、収まるときは中央、ページが画面より広いときは
   左端をスクロールで届く位置に置く（flex中央寄せだと左が切れて届かなくなる） */
.page{ position:relative; background:#fff; border-radius:3px; margin:0 auto 18px;
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -18px rgba(0,0,0,.7); }
.page canvas{ display:block; border-radius:3px; pointer-events:none; }
.page .pageno{ position:absolute; bottom:8px; right:10px; font-family:var(--font-mono);
  font-size:10px; color:#9aa2ac; background:rgba(255,255,255,.7); padding:1px 6px;
  border-radius:20px; pointer-events:none; }

.error{ margin:48px auto; max-width:460px; border:1px solid rgba(229,135,107,.35);
  background:rgba(229,135,107,.08); color:#f0c3b4; border-radius:12px; padding:18px 20px;
  font-size:13px; line-height:1.65; }
.error strong{ color:var(--danger); display:block; margin-bottom:4px; font-weight:600; }
.empty{ margin:0 auto; padding-top:18vh; text-align:center; color:var(--ink-3); font-size:13px; }

.toast{ position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px);
  background:#12151a; border:1px solid var(--hair); color:var(--ink);
  font-size:12.5px; letter-spacing:.03em; padding:9px 16px; border-radius:24px;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.8); opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease; z-index:50; }
.toast.show{ opacity:1; transform:translate(-50%,0); }
.hidden{ display:none !important; }

@media (max-width:760px){
  .doc-title{ display:none; }
  .stage{ padding:14px; }
}
@media (prefers-reduced-motion:reduce){ .stage{ scroll-behavior:auto; } }

/* ── 印刷対策：印刷時は中身を出さず通知だけ表示 ── */
#print-notice{ display:none; }
@media print{
  body{ background:#fff; }
  body > *{ display:none !important; }
  #print-notice{ display:block !important; color:#000; font-family:sans-serif;
    padding:40px; font-size:16px; text-align:center; }
}
/* ── ローダー（読み込み表示） ── */
.loader{ position:absolute; inset:0; z-index:30; display:grid; place-items:center;
  background:
    radial-gradient(1200px 500px at 50% -8%, rgba(121,198,192,.05), transparent 60%),
    var(--bg); }

.loader[hidden]{ display:none; }            /* hidden 属性を尊重（display:grid の上書き対策） */
.loader-box{ display:flex; flex-direction:column; align-items:center; gap:14px; padding:22px 26px; }
.loader-text{ font-size:13px; color:var(--ink-2); letter-spacing:.04em; font-variant-numeric:tabular-nums; }
.loader-bar{ width:200px; height:4px; border-radius:4px; background:rgba(255,255,255,.12); overflow:hidden; }
.loader-bar[hidden]{ display:none; }
.loader-bar span{ display:block; height:100%; width:0%; background:var(--accent);
  border-radius:4px; transition:width .15s ease; }

.spinner{ width:34px; height:34px; border-radius:50%;
  border:3px solid rgba(255,255,255,.15); border-top-color:var(--accent);
  animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ── 各ページのスピナー（描画完了で消える） ── */
.page .page-load{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.page.is-rendered .page-load{ display:none; }
.page .page-load .dot{ width:26px; height:26px; border-radius:50%;
  border:3px solid rgba(0,0,0,.1); border-top-color:rgba(0,0,0,.38);
  animation:spin .8s linear infinite; }

@media (prefers-reduced-motion:reduce){ .spinner, .page .page-load .dot{ animation-duration:1.6s; } }