/* ================================================================
   原稿用紙エディター — 独立デザイン
   ================================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { height: 100%; }

body {
  height: 100%;
  overflow: hidden;
  background: var(--ms-desk) !important;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

/* theme.css のグラデーション背景を無効化 */
body::before { display: none !important; }

/* ================================================================
   CSS変数（緑がデフォルト）
   ================================================================ */
:root {
  --ms-grid:       #aac8a2;   /* グリッド線（薄い緑） */
  --ms-frame:      #609458;   /* 外枠・魚尾（濃い緑） */
  --ms-paper:      #ffffff;   /* 用紙色（純白） */
  --ms-desk:       #6e6050;   /* 机（温かみのある濃い茶） */
  --ms-ink:        #1a1008;   /* 文字色 */
  --ms-toolbar-bg: #3d3228;
  --ms-toolbar-fg: #e8ddd0;
  --ms-toolbar-sub:#a09080;
  --ms-toolbar-div:rgba(255,255,255,0.12);
}

[data-theme="dark"] {
  --ms-grid:       #3a5a35;
  --ms-frame:      #5a8050;
  --ms-paper:      #1a1a14;
  --ms-desk:       #0e0c0a;
  --ms-ink:        #e0d8c8;
  --ms-toolbar-bg: #141210;
  --ms-toolbar-fg: #d4c8b8;
  --ms-toolbar-sub:#706050;
  --ms-toolbar-div:rgba(255,255,255,0.08);
}

/* ================================================================
   ツールバー
   ================================================================ */
.ms-toolbar {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--ms-toolbar-bg);
  border-bottom: 1px solid rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0 0.75rem;
  height: 48px;
  flex-shrink: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.ms-toolbar::-webkit-scrollbar { display: none; }

.ms-toolbar-divider {
  width: 1px;
  height: 20px;
  background: var(--ms-toolbar-div);
  flex-shrink: 0;
  margin: 0 0.4rem;
}
.ms-toolbar-spacer { flex: 1; }

/* ================================================================
   設定パネル
   ================================================================ */
.ms-settings-panel {
  position: fixed;  /* ツールバーの overflow 制限を回避 */
  background: var(--ms-toolbar-bg);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  padding: 0.6rem 0.9rem;
  z-index: 400;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.ms-sp-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ms-sp-row + .ms-sp-row {
  margin-top: 0.4rem;
}

.ms-sp-label {
  font-size: 0.72rem;
  color: var(--ms-toolbar-sub);
  margin-right: 0.2rem;
  min-width: 5.5em;
}

.ms-back-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--ms-toolbar-fg);
  text-decoration: none;
  font-size: 0.82rem;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s;
}
.ms-back-btn:hover { background: rgba(255,255,255,0.08); }

.ms-setting-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  padding: 0 0.3rem;
}
.ms-setting-label {
  font-size: 0.72rem;
  color: var(--ms-toolbar-sub);
  white-space: nowrap;
}
.ms-radio-label,
.ms-check-label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8rem;
  color: var(--ms-toolbar-fg);
  cursor: pointer;
  white-space: nowrap;
}
.ms-radio-label input,
.ms-check-label input { accent-color: #609458; cursor: pointer; }

.ms-stats {
  font-size: 0.76rem;
  color: var(--ms-toolbar-sub);
  white-space: nowrap;
  padding: 0 0.3rem;
  flex-shrink: 0;
}

.ms-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.07);
  color: var(--ms-toolbar-fg);
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s;
  font-family: inherit;
}
.ms-btn:hover { background: rgba(255,255,255,0.14); }
.ms-btn:disabled { opacity: 0.3; cursor: default; pointer-events: none; }
.ms-btn-ghost { border-color: transparent; background: transparent; }
.ms-btn-ghost:hover { border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.07); }

/* ================================================================
   机（preview-area）
   ================================================================ */
#preview-area {
  height: calc(100vh - 48px);
  overflow-y: auto;
  overflow-x: auto;
  background: var(--ms-desk);
  cursor: text;
  position: relative;
  background-image: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.05) 0%, transparent 60%);
}

/* テキスト空の時のプレースホルダー */
#preview-area[data-empty]::before {
  content: 'クリックして文章を入力してください';
  position: absolute;
  top: 3.5rem;
  right: calc(50% - 450px + 2rem);
  color: rgba(255,255,255,0.12);
  font-size: 0.88rem;
  pointer-events: none;
  writing-mode: vertical-rl;
  font-family: "Noto Serif JP", "游明朝", "YuMincho", serif;
  letter-spacing: 0.05em;
}

/* ================================================================
   用紙
   ================================================================ */
.ms-page {
  background: var(--ms-paper);
  border: none;
  box-shadow:
    0 1px 2px  rgba(0,0,0,0.18),
    3px 5px 16px rgba(0,0,0,0.32),
    6px 10px 50px rgba(0,0,0,0.22),
    0 0 0 1px rgba(0,0,0,0.06);
  padding: 1.6rem 1.8rem 1rem;
  margin: 2.5rem auto;
  max-width: 980px;
  overflow: visible;  /* 追い出し文字がms-innerの外に出るため */
}

/* ページ番号 */
.ms-page-num {
  font-size: 0.68rem;
  color: var(--ms-frame);
  text-align: center;
  padding: 0.4rem 0 0;
  font-family: "Noto Serif JP", "游明朝", "YuMincho", serif;
  opacity: 0.65;
  letter-spacing: 0.3em;
}

/* ================================================================
   グリッド外枠
   ================================================================ */
.ms-inner {
  border: 1.5px solid var(--ms-frame);
}

/* ================================================================
   縦書きグリッド
   ================================================================ */
.ms-cols {
  display: flex;
  flex-direction: row;
  gap: var(--ms-col-gap, 16px);
}

.ms-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 1.5rem;
  border: 1px solid var(--ms-grid); /* 列ごとに4辺ボーダー */
  position: relative;
}

/* 右端から5列ごとに強調線 */
.ms-col.col-5 {
  border: 1px solid var(--ms-grid);
  border-right: 1.5px solid var(--ms-frame);
}

/* セル */
.ms-cell {
  aspect-ratio: 1;
  border-bottom: 1px solid var(--ms-grid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ms-computed-fontsize, clamp(0.85rem, 2.8vw, 1.4rem));
  font-family: "Noto Serif JP", "游明朝", "YuMincho", serif;
  color: var(--ms-ink);
  position: relative;
  cursor: text;
  writing-mode: vertical-rl;
  text-orientation: upright;
  user-select: none;
  -webkit-user-select: none;
  line-height: 1;
  overflow: hidden;
  min-height: 0;  /* flex の min-height:auto によるフォント起因の膨張を防ぐ */
  min-width: 0;
}

/* 文字サイズ：JS側の updateCellFontSize() が --ms-computed-fontsize 変数を設定する */

/* ルビモード：絶対配置のルビ注釈がはみ出せるよう overflow を開放 */
[data-ruby="on"] .ms-cell {
  overflow: visible;
}

/* ルビ注釈（絶対配置でセルの右外へ）
   position:absolute のため flex レイアウトに影響しない */
.ms-rt {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;   /* セルの右端から右側へ */
  font-size: 0.42em;
  line-height: 1;
  color: var(--ms-ink);
  cursor: pointer;
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: nowrap;  /* 複数列への折り返しを防ぐ */
}

/* ルビ削除済み：透明だがクリック可能なスペースを確保 */
.ms-rt.ms-rt-deleted {
  min-width: 0.5em;
  opacity: 0;
}
.ms-cell:hover .ms-rt.ms-rt-deleted {
  opacity: 0.15;  /* ホバーで薄く表示してクリック可能と分かるように */
}

/* 手動 override されたルビ（青色で識別） */
.ms-rt.ms-rt-manual {
  color: #2563eb;
  opacity: 0.85;
}
[data-theme="dark"] .ms-rt.ms-rt-manual {
  color: #60a5fa;
}

/* 辞書読込ステータス */
.ms-ruby-status {
  font-size: 0.7rem;
  color: var(--text-sub, #64748b);
  min-width: 4em;
}

/* ルビ手動編集ポップアップ */
#ruby-edit-popup {
  position: fixed;
  z-index: 1000;
  background: var(--ms-toolbar-bg, #3d3228);
  color: var(--ms-toolbar-fg, #e8ddd0);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  font-size: 0.8rem;
}
#ruby-edit-popup[hidden] { display: none; }

.ruby-edit-label {
  font-size: 0.72rem;
  opacity: 0.7;
  white-space: nowrap;
}

#ruby-edit-input {
  width: 7em;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 4px;
  color: inherit;
  font-size: 0.85rem;
  padding: 2px 5px;
  outline: none;
}
#ruby-edit-input:focus {
  border-color: rgba(255,255,255,0.5);
}

#ruby-reset-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 3px;
  color: inherit;
  font-size: 0.8rem;
  line-height: 1;
  padding: 2px 5px;
  cursor: pointer;
  opacity: 0.7;
  flex-shrink: 0;
  font-family: inherit;
}
#ruby-reset-btn:hover { opacity: 1; background: rgba(255,255,255,0.1); }
#ruby-reset-btn[hidden] { display: none; }

.ruby-edit-hint {
  font-size: 0.65rem;
  opacity: 0.55;
  white-space: nowrap;
}

/* 5行ごとに強調線 */
.ms-cell.row-5 {
  border-bottom: 1.5px solid var(--ms-frame);
}

/* ================================================================
   中央区切り列（魚尾）
   ================================================================ */
.ms-separator {
  flex: 1.4;
  min-width: 1.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--ms-paper);
  border: 1px solid var(--ms-grid); /* 列と同様に4辺ボーダー */
  position: relative;
  overflow: hidden;
}

/* 魚尾SVG（上・下） */
.ms-gyobi {
  width: 100%;
  flex-shrink: 0;
  display: block;
  color: var(--ms-frame);
  /* 高さはアスペクト比で自動調整 */
}

/* 魚尾位置調整スペーサー（flex値はJS側で設定） */
.ms-sep-space { min-height: 0; }

/* 魚尾上〜魚尾下の間の余白 */
.ms-sep-mid {
  flex: 11;
}

/* 行末禁則：収める（主文字は通常サイズ、溢れ字を右下4分の1に配置） */
.ms-cell.ms-cell-packed {
  position: relative;
}
.ms-packed-over {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 50%;
  display: flex;
  /* writing-mode:vertical-rl では main軸=inline=縦方向、cross軸=block=横方向(right→left)
     justify-content:flex-end  → 縦軸の末端 = 物理的 bottom
     align-items:flex-start    → 横軸の始端 = 物理的 right (rl なので start=right) */
  justify-content: flex-end;
  align-items: flex-start;
  font-size: 0.55em;
  writing-mode: vertical-rl;
  text-orientation: upright;
  line-height: 1;
  color: var(--ms-ink);
  pointer-events: none;
}

/* 行末禁則：追い出し（グリッド枠の外に溢れ字を表示） */
.ms-overflow-out {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ms-computed-fontsize, clamp(0.85rem, 2.8vw, 1.4rem));
  font-family: "Noto Serif JP", "游明朝", "YuMincho", serif;
  writing-mode: vertical-rl;
  text-orientation: upright;
  color: var(--ms-ink);
  opacity: 0.65;
  cursor: text;
}
.ms-overflow-out.ms-cursor::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #2563eb;
  animation: ms-blink 1s step-end infinite;
}

/* ================================================================
   カーソル・選択
   ================================================================ */
.ms-cell.ms-cursor::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #2563eb;
  animation: ms-blink 1s step-end infinite;
}
@keyframes ms-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.ms-para-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1em;
  color: var(--ms-ink, #2d1e14);
  opacity: 0.28;
  pointer-events: none;
  user-select: none;
  writing-mode: vertical-rl;
  text-orientation: upright;
  line-height: 1;
}
.ms-cell.ms-selected {
  background: rgba(59, 130, 246, 0.22);
}

/* ================================================================
   隠し入力バッファ
   ================================================================ */
#ms-hidden {
  position: fixed;
  top: -9999px;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  resize: none;
}

/* ================================================================
   印刷
   ================================================================ */
@page {
  size: A4 landscape;
  margin: 3mm;
}

@media print {
  .ms-para-mark { display: none; }

  /* 手動ルビの青色を印刷時は通常色に戻す */
  .ms-rt.ms-rt-manual {
    color: var(--ms-ink) !important;
    opacity: 1 !important;
  }

  html { height: auto !important; }
  body {
    background: white !important;
    height: auto !important;
    overflow: visible !important;
  }
  body::before { display: none !important; }

  .ms-toolbar { display: none !important; }
  .ms-settings-panel { display: none !important; }

  #preview-area {
    height: auto !important;
    overflow: visible !important;
    background: none !important;
  }
  #preview-area[data-empty]::before { display: none; }

  /*
   * ランドスケープ印刷: A4横(297mm) - @page余白3mm×2 = 291mm をフル活用
   * 20列×正方形セルはランドスケープでほぼ全面を埋める
   *
   * サイズ計算（gap=16px の場合）:
   *   padding 左右 = 4mm×2 = 8mm
   *   ms-inner幅 = (291-8)mm×3.7795 - 3px ≈ 1067px
   *   cells flex = 1067 - 20×16 = 747px  →  セル = 747/21.4 ≈ 34.9px
   *   グリッド高さ = 20 × 34.9px ≈ 698px ≈ 185mm
   *   ms-page高さ ≈ 196mm < 204mm(利用可能 = 210-3×2) → 1ページに収まる
   *   gap が小さいとき: JS の beforeprint で zoom スケールダウンして収める
   */
  .ms-page {
    width: 291mm !important;
    max-width: 291mm !important;
    background: white !important;
    box-shadow: none !important;
    padding: 3mm 4mm 10mm !important;
    border: none;
    margin: 0 auto !important;
    overflow: visible !important;
    break-inside: avoid;
  }
  /* last-child 以外にのみ強制改ページ（1枚のとき空の2ページ目を防ぐ） */
  .ms-page:not(:last-child) {
    break-after: page;
    page-break-after: always;
  }

  /* --ms-frame / --ms-grid は JS がインラインスタイルで設定済みのため変数をそのまま使用 */
  .ms-inner { border: 1.5px solid var(--ms-frame) !important; }

  /* gap は screen CSS の --ms-col-gap をそのまま使用（画面設定を印刷に反映） */

  /* flex は screen CSS の flex:1 / flex:1.4 をそのまま使用 */
  /* min-width:0 で 1.5rem の下限を解除し、gap分を差し引いた幅に縮められるようにする */
  .ms-col {
    border: 1px solid var(--ms-grid) !important;
    min-height: 0;
    min-width: 0;
  }
  .ms-col.col-5 {
    border: 1px solid var(--ms-grid) !important;
    border-right: 1.5px solid var(--ms-frame) !important;
  }

  .ms-separator {
    border: 1px solid var(--ms-grid) !important;
    min-width: 0;
  }

  .ms-cell {
    /* aspect-ratio:1 は screen CSS から継承 → セル幅=セル高さ（正方形） */
    border-bottom: 1px solid var(--ms-grid) !important;
    /* フォントサイズ: beforeprint JS で実測セル幅から設定 */
    font-size: var(--ms-computed-fontsize, 18pt) !important;
    color: #000 !important;
    overflow: hidden;
    min-height: 0;
    min-width: 0;
  }
  .ms-cell.row-5 { border-bottom: 1.5px solid var(--ms-frame) !important; }

  /* 追い出し文字: 下 padding 10mm 内に収まるため表示する */
  .ms-overflow-out { color: #000 !important; opacity: 0.65; }

  .ms-gyobi { color: var(--ms-frame) !important; }

  .ms-cell.ms-cursor::before { display: none; }
  .ms-cell.ms-selected { background: none !important; }

  .ms-page-num { color: #666 !important; opacity: 1; }
}