/* 縦書きプレビューの紙面(元は拡張機能 editor.css。色はサイトに合わせた) */
.pane-preview { position: sticky; top: 88px; }
.paper {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: min(72vh, 680px);
  overflow: auto;
  /* 紙面ごと縦書きにして、スクロールの始まりを右端(本文の先頭)にする */
  writing-mode: vertical-rl;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(37, 59, 51, 0.06);
}
.placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 20px;
  writing-mode: horizontal-tb;
  text-align: center;
  color: #9aa39b;
  font-size: 14px;
}
.placeholder[hidden] { display: none; }

.doc {
  --fs: 19px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 28px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs);
  line-height: 1.9;
  letter-spacing: 0;
  color: var(--ink);
  line-break: strict;
}
/* 1 行の字数を決めたとき: 文字が並ぶ方向(縦)の長さを字数ぶんにする(長さは preview.js で指定) */
.doc.fixed { box-sizing: content-box; }

.doc p { margin: 0; }
.doc p.blank { block-size: 1.9em; }

.doc .chapter + .chapter { margin-block-start: 3em; }
.doc .title {
  margin: 0;
  margin-block-end: 1.2em; /* 縦書きでは左側(次の行との間) */
  font-family: var(--serif);
  font-size: 1.2em;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.6;
}

.doc ruby { ruby-position: over; }
.doc rt { font-size: 0.5em; font-weight: 400; letter-spacing: 0; }

/* 傍点(縦書きでは右側にゴマ点) */
.doc .em {
  -webkit-text-emphasis: filled sesame;
  text-emphasis: filled sesame;
  -webkit-text-emphasis-position: over right;
  text-emphasis-position: over right;
}

/* 縦中横: 1〜3 桁の数字や !? を 1 文字分に収める */
.doc .tcy {
  -webkit-text-combine: horizontal;
  text-combine-upright: all;
  letter-spacing: 0;
}

/* ダッシュ: 字は透明にして(コピーはできる)、中央に途切れない縦線を引く */
.doc .dash {
  color: transparent;
  background: linear-gradient(to right,
    transparent calc(50% - 0.03em), var(--ink) calc(50% - 0.03em),
    var(--ink) calc(50% + 0.03em), transparent calc(50% + 0.03em));
}

@media (max-width: 900px) {
  .pane-preview { position: static; }
  .paper { height: 70vh; }
}