/* 修正指示ツール 共通スタイル（エディタ／書き出しページ兼用） */

:root {
  --rv-bg: #f6f7f9;
  --rv-panel: #fff;
  --rv-line: #e2e5ea;
  --rv-text: #1d2129;
  --rv-sub: #6b7280;
  --rv-accent: #e0245e;
  --rv-accent-soft: rgba(224, 36, 94, 0.08);
  --rv-done: #10b981;
  --rv-check2: #2563eb;
  --rv-radius: 8px;
}

* { box-sizing: border-box; }

body.rv-body {
  margin: 0;
  background: var(--rv-bg);
  color: var(--rv-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Noto Sans JP', 'Yu Gothic', sans-serif;
  font-size: 14px;
  line-height: 1.7;
}

.rv-head {
  padding: 12px 20px;
  background: var(--rv-panel);
  border-bottom: 1px solid var(--rv-line);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.rv-head h1 { margin: 0; font-size: 17px; }
/* ロゴと案件名が地続きに見えないよう、縦線で区切る */
.rv-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding-right: 16px;
  border-right: 1px solid var(--rv-line);
}
.rv-logo { display: block; height: 41px; width: auto; flex: none; }
.rv-beta {
  flex: none;
  padding: 1px 7px;
  border: 1px solid var(--rv-line);
  border-radius: 999px;
  background: #fff;
  color: var(--rv-sub);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.6;
}
.rv-head-sub { margin: 0; color: var(--rv-sub); font-size: 12px; }
.rv-head a { color: inherit; }

.rv-foot {
  flex: none;
  padding: 8px 20px;
  border-top: 1px solid var(--rv-line);
  background: var(--rv-panel);
  color: var(--rv-sub);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.rv-foot span { opacity: 0.7; }

/* ── レイアウト ──
   縦長のフルページスクショでも、タブとコメント一覧を画面に残したまま
   画像側だけをスクロールさせる。ヘッダの高さを CSS で決め打ちしないため、
   body を縦フレックスにして .rv に残りを渡す。 */
body.rv-body:has(.rv) { height: 100dvh; overflow: hidden; }
body.rv-body:has(.rv) > .rv { flex: 1 1 auto; }
body.rv-body { display: flex; flex-direction: column; }

/* 既定は指示が左（先に読ませたいものを左に置く）。ボタンで左右を入れ替えられる */
.rv {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
}
/* grid-row を必ず指定する。列だけ指定すると自動配置が次の行へ送り、
   指示パネルが画像の下に回り込む */
.rv > .rv-side {
  grid-area: 1 / 1;
  border-right: 1px solid var(--rv-line);
  border-left: none;
}
.rv > .rv-main { grid-area: 1 / 2; }
.rv.is-side-right { grid-template-columns: minmax(0, 1fr) 340px; }
.rv.is-side-right > .rv-side {
  grid-area: 1 / 2;
  border-left: 1px solid var(--rv-line);
  border-right: none;
}
.rv.is-side-right > .rv-main { grid-area: 1 / 1; }
.rv-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.rv.is-dragover .rv-main { outline: 2px dashed var(--rv-accent); outline-offset: -6px; }

.rv-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 12px;
  background: var(--rv-panel);
  border-bottom: 1px solid var(--rv-line);
  flex-wrap: wrap;
}
.rv-bar-info, .rv-tools, .rv-zoom { display: flex; align-items: center; gap: 8px; }
.rv-bar-count { font-size: 13px; font-weight: 600; }
.rv-bar-sub { color: var(--rv-sub); font-size: 12px; }

/* ── 画面のブロック（縦に並べる。タブは使わない）── */
.rv-shot + .rv-shot { margin-top: 28px; }
.rv-shot-head {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  padding: 6px 8px;
  border: 1px solid var(--rv-line);
  border-radius: var(--rv-radius);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(3px);
}
.rv-shot-label { font-size: 13px; font-weight: 700; }
.rv-shot-label.is-editable { cursor: text; border-bottom: 1px dashed var(--rv-line); }
.rv-shot-label.is-editable:hover { color: var(--rv-accent); border-bottom-color: var(--rv-accent); }
.rv-shot-size { color: var(--rv-sub); font-size: 11px; }
.rv-shot-count {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--rv-line);
  color: var(--rv-text);
  font-size: 11px;
}
.rv-shot-count.has-open { background: var(--rv-accent); color: #fff; }
.rv-shot-head .rv-btn { margin-left: auto; }

.rv-swap {
  padding: 4px 10px;
  border: 1px solid var(--rv-line);
  border-radius: 999px;
  background: #fff;
  color: var(--rv-sub);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.rv-swap:hover { border-color: var(--rv-accent); color: var(--rv-accent); }

.rv-zoom-btn {
  padding: 4px 8px;
  border: 1px solid var(--rv-line);
  border-radius: 6px;
  background: #fff;
  color: var(--rv-sub);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.rv-zoom-btn.is-active { background: var(--rv-accent-soft); border-color: var(--rv-accent); color: var(--rv-accent); }

.rv-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px; }

/* ── ステージ ── */
.rv-stage {
  position: relative;
  margin: 0 auto;
  /* max-width は付けない。付けると 100% 表示が容器幅で頭打ちになり、
     拡大して細部を確認できなくなる（幅に合わせるときは JS 側で min() を使う） */
  line-height: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  background: #fff;
  cursor: crosshair;
  user-select: none;
}
/* width/height 属性で縦横比が決まるので、読み込み前でも高さが確保される */
.rv-img { display: block; width: 100%; height: auto; }

.rv-marker {
  position: absolute;
  border: 2px solid var(--rv-accent);
  background: var(--rv-accent-soft);
  cursor: pointer;
  /* どんな背景の上でも枠が見えるように、外側に白を1本入れる */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}
.rv-marker.is-pin {
  width: 0;
  height: 0;
  border: none;
  background: none;
  box-shadow: none;
}
/* ピンは点なので、位置が分かるように輪を出す */
.rv-marker.is-pin::before {
  content: '';
  position: absolute;
  left: -14px;
  top: -14px;
  width: 28px;
  height: 28px;
  border: 2px solid var(--rv-accent);
  border-radius: 50%;
  background: var(--rv-accent-soft);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9);
}
.rv-marker.is-pin.is-resolved::before { border-color: var(--rv-done); background: rgba(16, 185, 129, 0.1); }
.rv-marker-num {
  position: absolute;
  top: -11px;
  left: -11px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--rv-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}
/* 枠のときは番号を枠の上に出す（左上のつまみと重なって読めなくなるため） */
.rv-marker:not(.is-pin) .rv-marker-num { top: -30px; left: -2px; z-index: 2; }
.rv-marker.is-pin .rv-marker-num { top: -11px; left: -11px; z-index: 2; }
.rv-marker.is-selected { border-color: #111; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15); }
.rv-marker.is-selected .rv-marker-num { background: #111; }
/* 対応済み=緑 / 確認済み=青 / 両方=完了（灰・控えめ） */
.rv-marker.is-resolved { border-color: var(--rv-done); background: rgba(16, 185, 129, 0.08); }
.rv-marker.is-resolved .rv-marker-num { background: var(--rv-done); }
.rv-marker.is-approved { border-color: var(--rv-check2); background: rgba(37, 99, 235, 0.08); }
.rv-marker.is-approved .rv-marker-num { background: var(--rv-check2); }
.rv-marker.is-done { border-color: #9aa3ad; background: rgba(154, 163, 173, 0.12); opacity: 0.75; }
.rv-marker.is-done .rv-marker-num { background: #9aa3ad; }

/* 枠のつまみ（選択中だけ出す）。エディタ側のみ生成される */
.rv-marker:not(.is-pin) { cursor: move; }
.rv-handle {
  position: absolute;
  display: none;
  width: 11px;
  height: 11px;
  border: 2px solid var(--rv-accent);
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9);
}
.rv-marker.is-selected .rv-handle { display: block; }
.rv-marker.is-selected .rv-handle { border-color: #111; }
.rv-handle-nw { left: -7px; top: -7px; cursor: nwse-resize; }
.rv-handle-n  { left: 50%; top: -7px; margin-left: -5px; cursor: ns-resize; }
.rv-handle-ne { right: -7px; top: -7px; cursor: nesw-resize; }
.rv-handle-e  { right: -7px; top: 50%; margin-top: -5px; cursor: ew-resize; }
.rv-handle-se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.rv-handle-s  { left: 50%; bottom: -7px; margin-left: -5px; cursor: ns-resize; }
.rv-handle-sw { left: -7px; bottom: -7px; cursor: nesw-resize; }
.rv-handle-w  { left: -7px; top: 50%; margin-top: -5px; cursor: ew-resize; }

.rv-ghost {
  position: absolute;
  border: 2px dashed var(--rv-accent);
  background: var(--rv-accent-soft);
  pointer-events: none;
}

.rv-empty {
  height: 100%;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px dashed var(--rv-line);
  border-radius: var(--rv-radius);
  background: var(--rv-panel);
  line-height: 1.7;
}
.rv-empty-title { margin: 0; font-weight: 600; }
.rv-empty-sub { margin: 0; color: var(--rv-sub); font-size: 12px; }

/* ── サイドバー ── */
.rv-side {
  overflow: auto;
  /* 上の余白は見出し自身に持たせる。負のマージンで打ち消すと sticky 時に位置がずれる */
  padding: 0 12px 12px;
  background: var(--rv-panel);
  border-left: 1px solid var(--rv-line);
}
.rv-side-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 -12px;
  padding: 12px;
  background: var(--rv-panel);
  border-bottom: 1px solid var(--rv-line);
}
.rv-side-head h2 { margin: 0; font-size: 13px; }
.rv-side-count { color: var(--rv-sub); font-size: 11px; }
.rv-side-empty { color: var(--rv-sub); font-size: 12px; }

/* 画面ごとの見出し（タブではなく、通し一覧の中の区切り） */
.rv-side-group + .rv-side-group { margin-top: 14px; }
.rv-side-group-head {
  position: sticky;
  /* 「指示」見出しの実際の高さを JS から入れる。決め打ちにすると重なる */
  top: var(--rv-side-head-h, 44px);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--rv-panel);
  margin-bottom: 6px;
  /* 三角のボタン（22px）の上下が、上下の罫線から同じ距離になるようにする */
  padding: 7px 0 6px;  /* 下は罫線 1px を足して上と同じ 7px になる */
  border-bottom: 1px solid var(--rv-line);
  cursor: pointer;
}
.rv-side-group-head:hover .rv-side-group-label { color: var(--rv-accent); }
.rv-side-group-label {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rv-side-group-device {
  margin-left: 6px;
  padding: 0 5px;
  border: 1px solid var(--rv-line);
  border-radius: 999px;
  color: var(--rv-sub);
  font-size: 10px;
  font-weight: 400;
}
.rv-side-group-count { flex: none; color: var(--rv-sub); font-size: 11px; }
.rv-side-group-count.has-open { color: var(--rv-accent); font-weight: 700; }
/* 折り畳みの三角。小さいと押せる場所が分からないので、四角い当たり判定を持たせる */
.rv-caret {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--rv-line);
  border-radius: 5px;
  background: #fff;
  color: var(--rv-text);
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.rv-caret:hover { border-color: var(--rv-accent); background: var(--rv-accent-soft); color: var(--rv-accent); }
.rv-side-group.is-closed .rv-side-group-head { border-bottom-color: transparent; }
.rv-side-toggle {
  padding: 2px 8px;
  border: 1px solid var(--rv-line);
  border-radius: 999px;
  background: #fff;
  color: var(--rv-sub);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.rv-side-toggle:hover { border-color: var(--rv-accent); color: var(--rv-accent); }

.rv-shot-device {
  flex: none;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--rv-text);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.rv-card {
  margin-bottom: 8px;
  padding: 10px;
  border: 1px solid var(--rv-line);
  border-left: 3px solid var(--rv-accent);
  border-radius: var(--rv-radius);
  background: #fff;
}
.rv-card.is-selected { border-left-color: #111; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08); }
/* チェックの段階で見た目を変える: 対応済み=緑 / 確認済み=青 / 両方=完了（灰） */
.rv-card.is-resolved { border-left-color: var(--rv-done); background: #fafcfb; }
.rv-card.is-approved { border-left-color: var(--rv-check2); background: #fafbfe; }
.rv-card.is-done { border-left-color: #9aa3ad; background: #f7f8f9; }
.rv-card.is-done .rv-card-body, .rv-card.is-done .rv-card-input { color: var(--rv-sub); text-decoration: line-through; }

.rv-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rv-card-num {
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--rv-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.rv-card.is-resolved .rv-card-num { background: var(--rv-done); }
.rv-card-author { font-size: 12px; font-weight: 600; }
.rv-card-time { margin-left: auto; color: var(--rv-sub); font-size: 11px; }
.rv-card-body { margin: 0; white-space: pre-wrap; word-break: break-word; }

.rv-card-input {
  width: 100%;
  min-height: 48px;
  padding: 6px 8px;
  border: 1px solid var(--rv-line);
  border-radius: 6px;
  background: #fdfdfd;
  color: inherit;
  font: inherit;
  resize: vertical;
}
.rv-card-input:focus { outline: 2px solid var(--rv-accent); outline-offset: -1px; }

/* ── 添付写真（差し替え用の写真など）── */
.rv-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: flex-start; }
.rv-file { position: relative; width: 72px; }
.rv-file-link { display: block; }
.rv-file-thumb {
  width: 72px; height: 72px; object-fit: cover;
  border: 1px solid var(--rv-line); border-radius: 6px; background: #fafafa;
}
.rv-file-name {
  display: block; margin-top: 2px; color: var(--rv-sub); font-size: 10px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rv-file-del {
  position: absolute; top: -6px; right: -6px;
  width: 20px; height: 20px; padding: 0; line-height: 18px;
  border: 1px solid var(--rv-line); border-radius: 50%;
  background: #fff; color: var(--rv-sub); font: inherit; font-size: 13px; cursor: pointer;
}
.rv-file-del:hover { border-color: var(--rv-accent); color: var(--rv-accent); }
.rv-file-add {
  display: flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; padding: 4px;
  border: 1px dashed var(--rv-line); border-radius: 6px;
  color: var(--rv-sub); font-size: 10px; text-align: center; cursor: pointer;
}
.rv-file-add:hover { border-color: var(--rv-accent); color: var(--rv-accent); }
.rv-file-add input { display: none; }
.rv-card.is-drop { border-color: var(--rv-accent); box-shadow: 0 0 0 2px var(--rv-accent-soft); }

.rv-replies { margin-top: 8px; padding-left: 10px; border-left: 2px solid var(--rv-line); }
.rv-reply + .rv-reply { margin-top: 6px; }
.rv-reply-head { display: flex; align-items: baseline; gap: 8px; }
.rv-reply-author { font-size: 11px; font-weight: 600; color: var(--rv-sub); }
.rv-reply-time { margin-left: auto; color: var(--rv-sub); font-size: 10px; }
.rv-reply-body { margin: 0; white-space: pre-wrap; word-break: break-word; }

/* 公開ページの返信欄。既定は「＋返信」のリンクだけで、押すと開く */
.rv-replybox { margin-top: 6px; }
.rv-replytoggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
  border: none;
  background: none;
  color: var(--rv-sub);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.rv-replytoggle:hover { color: var(--rv-accent); }
.rv-replytoggle.is-open { color: var(--rv-accent); font-weight: 600; }
.rv-replytoggle-icon {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 11px;
  line-height: 13px;
  text-align: center;
}
.rv-replytoggle.is-open .rv-replytoggle-icon { transform: rotate(45deg); }

.rv-replyform { margin-top: 6px; }
.rv-replyform-name, .rv-replyform-body {
  padding: 5px 8px;
  border: 1px solid var(--rv-line);
  border-radius: 6px;
  background: #fdfdfd;
  font: inherit;
  font-size: 13px;
}
.rv-replyform-body { width: 100%; resize: vertical; }
.rv-replyform-name { width: 120px; }
.rv-replyform-name:focus, .rv-replyform-body:focus { outline: 2px solid var(--rv-accent); outline-offset: -1px; }
.rv-replyform-foot { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.rv-replyform-note { flex: 1; color: var(--rv-accent); font-size: 11px; }
.rv-btn-sm { padding: 4px 10px; font-size: 12px; }

.rv-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }

/* 2 段階チェック */
.rv-checks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.rv-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 7px;
  border: 1px solid var(--rv-line);
  border-radius: 999px;
  background: #fff;
  color: var(--rv-sub);
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}
.rv-check input { margin: 0; cursor: pointer; }
.rv-check-1 input { accent-color: var(--rv-done); }
.rv-check-2 input { accent-color: var(--rv-check2); }
.rv-check-1.is-on { border-color: var(--rv-done); background: rgba(16, 185, 129, 0.1); color: #0b7a5b; font-weight: 600; }
.rv-check-2.is-on { border-color: var(--rv-check2); background: rgba(37, 99, 235, 0.09); color: #1d4ed8; font-weight: 600; }
.rv-check input:disabled { cursor: default; }
.rv-check-by { color: var(--rv-sub); font-size: 10px; font-weight: 400; }

.rv-btn {
  padding: 5px 10px;
  border: 1px solid var(--rv-line);
  border-radius: 6px;
  background: var(--rv-text);
  color: #fff;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.rv-btn:hover { opacity: 0.85; }
.rv-btn-ghost { background: #fff; color: var(--rv-sub); }
.rv-btn-danger:hover { border-color: var(--rv-accent); color: var(--rv-accent); }
.rv-btn:disabled { opacity: 0.45; cursor: default; }

/* 返信は Phase 2 で相手が書き込めるようにする。それまでは自分用のメモ扱い。 */

/* 狭い画面（客先がスマホで開く場合）は 1 カラムにしてページ全体をスクロールさせる */
/* ── スマホ用のパネル（狭い画面でだけ出る）── */
.rv-sheet, .rv-fab { display: none; }

@media (max-width: 860px) {
  .rv-sheet {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    max-height: 52dvh;
    overflow: auto;
    background: var(--rv-panel);
    border-top: 1px solid var(--rv-line);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.14);
    transform: translateY(102%);
    transition: transform 0.18s ease-out;
    overscroll-behavior: contain;
  }
  .rv-sheet.is-open { transform: none; }
  .rv-sheet-head {
    position: sticky; top: 0; z-index: 1;
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    background: var(--rv-panel);
    border-bottom: 1px solid var(--rv-line);
  }
  .rv-sheet-nav {
    flex: none; width: 40px; height: 34px;
    border: 1px solid var(--rv-line); border-radius: 8px;
    background: #fff; color: var(--rv-text); font: inherit; font-size: 15px; cursor: pointer;
  }
  .rv-sheet-nav:disabled { opacity: 0.35; }
  .rv-sheet-pos { flex: none; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .rv-sheet-where {
    flex: 1; min-width: 0; color: var(--rv-sub); font-size: 11px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .rv-sheet-close {
    flex: none; width: 34px; height: 34px;
    border: none; background: none; color: var(--rv-sub); font-size: 22px; line-height: 1; cursor: pointer;
  }
  .rv-sheet-body { padding: 10px 10px 18px; }
  .rv-sheet .rv-card { border: none; padding: 0; }
  .rv-sheet .rv-card-input { font-size: 15px; }

  .rv-fab {
    display: block;
    position: fixed; right: 12px; bottom: 14px; z-index: 39;
    padding: 11px 18px;
    border: none; border-radius: 999px;
    background: var(--rv-accent); color: #fff;
    font: inherit; font-size: 14px; font-weight: 700;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    cursor: pointer;
  }
  .rv-fab.is-hidden { display: none; }

  /* スマホは 1 カラム。指示を先に読ませ、画像は下に置く。
     画像は 2 万px あるので、指示が下にあると永久に辿りつけない。 */
  body.rv-body:has(.rv) { height: auto; overflow: visible; }
  /* 1fr だと中身の最小幅で膨らむので minmax(0,1fr) にする（横スクロール防止） */
  .rv, .rv.is-side-right { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  /* 画像を主役にする。指示はマーカーを押すと下のパネルに出る。
     一覧は下に置き、通しで読みたいときだけ使う。 */
  .rv > .rv-main, .rv.is-side-right > .rv-main { grid-area: auto; order: 1; }
  .rv > .rv-side, .rv.is-side-right > .rv-side {
    grid-area: auto;
    order: 2;
    border: none;
    border-top: 1px solid var(--rv-line);
    padding: 0 12px 90px;
  }
  .rv-scroll, .rv-side { overflow: visible; }

  /* 画面が狭いので固定表示はやめる（重なって読めなくなる） */
  .rv-side-head, .rv-side-group-head, .rv-shot-head { position: static; }
  .rv-side-head { margin: 0 -12px 0; }

  /* 指の操作に合わせて、押せるものを大きくする */
  .rv-card { padding: 12px; }
  .rv-card-body { font-size: 15px; }
  .rv-check { padding: 7px 12px; font-size: 13px; }
  .rv-checks { gap: 8px; }
  .rv-replytoggle { padding: 8px 2px; font-size: 14px; }
  .rv-caret { width: 30px; height: 30px; font-size: 16px; }
  .rv-side-toggle { padding: 6px 12px; font-size: 12px; }
  .rv-file-thumb, .rv-file, .rv-file-add { width: 84px; }
  .rv-file-thumb, .rv-file-add { height: 84px; }

  /* 左右入替と表示倍率は不要（1カラム＋ピンチ操作で足りる） */
  .rv-swap, .rv-zoom { display: none; }
  .rv-bar { padding: 8px 12px; }
  .rv-scroll { padding: 8px; }
  .rv-shot + .rv-shot { margin-top: 16px; }
  /* 長いページ名で横に伸びないよう、見出しは折り返し＋省略 */
  .rv-shot-head { flex-wrap: wrap; gap: 6px; }
  .rv-shot-label {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .rv-shot-size { display: none; }
  .rv-side-group-head { flex-wrap: nowrap; }
  .rv-head { padding: 10px 12px; gap: 10px; }
  .rv-head h1 { font-size: 15px; }
  .rv-logo { height: 32px; padding-right: 10px; }
  .rv-replyform-name { width: 100%; }
  .rv-replyform-foot { flex-wrap: wrap; }
}