:root {
      --bg: #0b0c0f;
      --panel: #151821;
      --text: #e7e9ee;
      --muted: #9aa3b2;
      --accent: #5aa9ff;
      --danger: #ff6b6b;
      --ok: #29cc97;
      --border: #232737;
      --control: #1e2330;
    }
    [data-theme="light"] {
      --bg: #fbfbfd; --panel:#ffffff; --text:#0b0c0f; --muted:#5f6775; --accent:#1565c0; --border:#e8eaf0; --control:#f3f4f8;
    }
    [data-theme="sepia"] {
      --bg:#f6f1e6; --panel:#fffaf0; --text:#3b2f2a; --muted:#6e5d54; --accent:#a05a2c; --border:#eadfce; --control:#f5ecde;
    }
    html,body { height:100%; margin:0; background:var(--bg); color:var(--text); font-family:system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", sans-serif; }
    .app { display:grid; grid-template-rows:auto 1fr auto; height:100%; }
    .topbar { background:var(--panel); border-bottom:1px solid var(--border); padding:8px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
    .topbar .group { display:flex; gap:8px; align-items:center; padding:4px 8px; background:var(--control); border:1px solid var(--border); border-radius:10px; }
    .topbar label { font-size:12px; color:var(--muted); }
    .btn { appearance:none; border:1px solid var(--border); background:var(--panel); color:var(--text); padding:8px 10px; border-radius:10px; cursor:pointer; font-weight:600; }
    .btn:hover { border-color:var(--accent); }
    .btn:disabled { opacity:.5; cursor:not-allowed; }
    .btn.primary { background:var(--accent); color:white; border-color:transparent; }
    .icon { font-family: ui-sans-serif, system-ui; }
    select, input[type="number"], input[type="text"] { background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:6px 8px; }
    input[type="range"] { width: 260px; }

    .main { display:block; height:100%; position:relative; }
    .optionsPanel { width:260px; border-right:1px solid var(--border); background:var(--panel); box-sizing:border-box; display:none; position:absolute; top:0; bottom:0; left:0; height:100%; overflow:auto; }
    .panelHeader { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-bottom:1px solid var(--border); }
    .panelBody { padding:10px 12px; display:flex; flex-direction:column; gap:16px; }
    .panelGroup { display:flex; flex-direction:column; gap:10px; font-size:13px; }
    .panelGroup label { display:flex; flex-direction:column; gap:4px; color:var(--muted); }
    /* 数値入力を1行に収めるための横並びレイアウト */
    .panelGroup label.inline { flex-direction: row; align-items: center; gap: 6px; }
    .panelGroup label.inline input[type="number"] { width: 84px; }
    .panelGroup input, .panelGroup select { width:100%; }
    .sidebar { width:280px; border-right:1px solid var(--border); background:var(--panel); box-sizing:border-box; position:absolute; top:0; bottom:0; height:100%; overflow:auto; }
    #metadataPanel { display:none; }
    .sidebar h3 { margin:12px; font-size:14px; color:var(--muted); }
    .toc { list-style:none; margin:0; padding:0 0 12px 0; }
    .toc li { padding:6px 12px; border-left:3px solid transparent; cursor:pointer; }
    .toc li:hover { background:rgba(90,169,255,0.1); border-left-color:var(--accent); }
    .metadataList { margin:12px; padding:0 12px 20px 12px; }
    .metadataList dt { margin:10px 0 2px; font-size:13px; color:var(--muted); }
    .metadataList dd { margin:0 0 8px; font-size:14px; }
    .metadataList dd.metadata-empty { color:var(--muted); font-size:13px; }
    .viewerWrap { margin-left:0; height:100%; position:relative; background:var(--bg); }
#viewer { width:100%; height:100%; margin:0 auto; position: relative; overflow:hidden; display:block; }
#viewerFrame { width:100%; height:100%; border:none; background: transparent; display:none; }
#viewer .fallback { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:14px; pointer-events:none; }
.dropOverlay { position:absolute; inset:0; display:none; align-items:center; justify-content:center; background:rgba(90,169,255,0.15); border:3px dashed var(--accent); color:var(--accent); font-size:18px; }
    .main::after { display:none; }

    /* Reading Mode specific */
    .reading-content {
      max-width: 700px;
      margin: 0 auto;
      padding: 2rem 1rem;
      line-height: 1.7;
      font-size: 1.15rem;
      color: var(--text);
      word-wrap: break-word;
      overflow-wrap: break-word;
      background: transparent;
      font-family: serif; /* リーディングモードで好まれる一般的な設定 */
    }
    .reading-content * {
      all: revert; /* 一旦リセットしてブラウザ標準に近づける */
      box-sizing: border-box;
    }
    .reading-content img {
      max-width: 100%;
      height: auto;
      display: block;
      margin: 1.5rem auto;
    }
    .reading-content h1, .reading-content h2, .reading-content h3 {
      margin-top: 2rem;
      margin-bottom: 1rem;
      line-height: 1.3;
    }
    .reading-content p {
      margin-bottom: 1.5rem;
    }

    .bottombar { background:var(--panel); border-top:1px solid var(--border); padding:8px; display:flex; gap:12px; align-items:center; justify-content:space-between; }
    .progress { display:flex; gap:10px; align-items:center; }
    .kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Roboto Mono", monospace; background:var(--control); border:1px solid var(--border); padding:2px 6px; border-radius:6px; color:var(--muted); font-size:12px; }

    .hidden { display:none !important; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}