/* ノート用紙の見た目(画面表示・印刷共通の基本形) */

/* マス目の罫線の太さ。画面プレビューはCSSのzoomで縮小表示しており(assets/note-grid.js)、
   縮小率と画面のdevicePixelRatioの組み合わせによっては、1pxの罫線が丸め誤差で
   部分的に消えて見えることがあった(代表指摘: 「9と10の間の実線が消えている」、2026-08-18)。
   画面表示は少し太め(1.4px)にして消えにくくし、印刷時のみ元の1px(実物のノートに近い細さ)に
   戻す(下の@media print内で上書き)。 */
:root {
  --grid-line-width: 1.4px;
}

.note-page {
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

/* ヘッダーとグリッドをまとめる箱。幅はグリッドの実寸ぴったりに縮み、その塊ごと
   用紙内で左右中央に揃う。ヘッダー単体を用紙幅いっぱいのままにすると、名前欄の
   線だけが用紙の端に取り残されてグリッドとズレて見えるため(代表の実機検証で発見、2026-08-17)。 */
.note-content {
  width: fit-content;
  margin: 0 auto;
}

/* ノート用紙のヘッダー(名前を書く横線 + 日付欄)。実物のジャポニカ学習帳を参考に、
   紙面の一番上に配置する(代表確認・実物写真提供、2026-08-16)。
   幅は.note-content(グリッドの実寸)に合わせて100%まで広げる。 */
.note-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  gap: 12mm;
  margin-bottom: 1.5mm;
  font-size: 3.5mm;
  color: #2f6fad;
}

.note-header .name-line {
  flex: 1 1 auto;
  max-width: 40mm;
  border-bottom: 1px solid #2f6fad;
  height: 1mm;
}

.note-header .date-line {
  white-space: nowrap;
}

/* 切り取り線(印刷時のみ表示。画面プレビューでは出さない) */
.note-page.cutline-exact::after,
.note-page.cutline-inset::after {
  content: "";
  position: absolute;
  border: 1px dashed #999;
  pointer-events: none;
  display: none;
}

/* マス目の色は市販ノートの雰囲気に寄せた水色系(#2f6fad系)。紙面デザインそのものの
   複製ではなく色合いのみの参考(代表確認、2026-08-16)。カラー印刷でも見やすいよう、
   グレーではなく彩度を持たせている。 */
.note-grid {
  display: grid;
  /* 箱の横幅をマスの合計幅ぴったりに縮める。指定がないと用紙の余白いっぱいに
     箱が広がり、マスがない余白部分にまで外枠の線(border-top)が伸びてしまう
     (代表の実機検証で発見、2026-08-17)。
     中央揃えは親の.note-contentが受け持つ(代表指摘、2026-08-17)。 */
  width: fit-content;
  border-top: var(--grid-line-width) solid #2f6fad;
  border-left: var(--grid-line-width) solid #2f6fad;
}

.note-grid .cell {
  border-right: var(--grid-line-width) solid #2f6fad;
  border-bottom: var(--grid-line-width) solid #2f6fad;
  position: relative;
}

/* 方眼タイプ(renderGridPaper)は、太い罫線・リーダー線とも、CSS Gridのマス目の罫線
   (border)ではなく、1枚のSVG(assets/note-grid.js、buildGridPaperSvg)で描画する。
   以前はマス目の数だけ独立したDOM要素(.cell)の罫線を並べて線を作っていたが、マスの実寸
   (mm)が画面・印刷の物理ピクセルにきっちり収まらないことがあり、罫線の数が多い方眼では
   マスの境目ごとに描画位置の端数処理がわずかにばらつき、複数マスにまたがる1本の直線として
   見たときに太さ・位置が不揃いに見える不具合があった(代表の実機印刷での指摘、2026-08-20)。
   点線→実線への変更、線を太らせる調整、リーダー線だけをSVG背景に変える対応、と段階的に
   試したが、太い罫線側(.cellの罫線のまま残していた部分)には効果がなく解消しなかったため、
   最終的に太い罫線・リーダー線の両方をまとめて1つのSVG(mm単位の座標を持つ<path>要素)に
   置き換えた。SVGは罫線と違い、要素数によらず1つの連続した図形として描画されるため、
   マスの数が多くても太さ・位置が不揃いにならない。 */
.note-grid.grid-paper {
  display: block;
  border-top: none;
  border-left: none;
  position: relative;
}

.grid-paper-svg {
  display: block;
}

/* 「リーダー線を表示する」チェックボックスをOFFにしたとき(assets/note-grid.jsの
   setupGuideToggle)。太い罫線(.grid-paper-bold-lines)は残し、リーダー線
   (.grid-paper-fine-lines)だけを消す。 */
.grid-paper.leader-off .grid-paper-fine-lines {
  display: none;
}

/* ふりがな欄(マスとマスの間の細い縦のライン。漢字ドリルで読み仮名を書く場所)。
   幅が狭く、中央の点線ガイドがあるとかえって書きにくいため、ガイドは入れず罫線のみにする
   (代表指摘、2026-08-18)。 */
.note-grid.with-furigana .furigana-cell {
  border-right: var(--grid-line-width) solid #2f6fad;
  border-bottom: var(--grid-line-width) solid #2f6fad;
  position: relative;
}

/* 十字リーダー入り(低学年向け): マスの中心に薄い十字ガイドを入れる */
.note-grid.guide .cell::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: var(--grid-line-width) dashed #8fb8e0;
}

.note-grid.guide .cell::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: var(--grid-line-width) dashed #8fb8e0;
}

/* 数字の書き順見本行(自由記入欄ではない)。十字リーダーは他のマスと同じく表示する
   (代表指摘、2026-08-18。以前は非表示にしていたが、数字を十字リーダーの中央に
   重ねて配置する方針に変更したため)。 */
.number-guide-cell {
  background: #eef6fc;
}

/* 数字は標準フォントで、マスの中央(十字リーダーの中心)に大きく配置する。
   文字サイズはJS側でマスの実寸(mm)に比例させて指定する(inline style)。
   フォントは丸みのある書体を優先する(6歳の子供が使う可能性があるため分かりやすさ重視、
   特定メーカーを連想させないよう外部フォントは読み込まずOS標準のものだけを使う。
   代表指摘、2026-08-18)。 */
.guide-number {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #2f6fad;
  font-family: "UD Digi Kyokasho NK-R", "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Yu Gothic", sans-serif;
  line-height: 1;
}

/* 矢印は、大きくした数字と並んでもはっきり見えるよう十分な大きさにする
   (以前は小さすぎて「矢印がない」ように見えていた。代表指摘、2026-08-18)。 */
.stroke-arrow {
  position: absolute;
  width: 70%;
  height: 60%;
  stroke: #2f6fad;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* 曲線矢印(数字の書き出しの弧に沿わせる用)。セル全体を基準にした座標なので、
   通常の.stroke-arrowと違いセルいっぱいに配置する(代表指摘、2026-08-18)。 */
.stroke-arrow-curved {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  left: auto;
  top: auto;
  transform: none;
  stroke-width: 2.2;
}

/* 「1」専用: 文字フォントだと左上に斜めの飾り(セリフ)が付く書体があるため、
   まっすぐな縦棒1本のSVGで表す(代表指摘、2026-08-18)。 */
.guide-number-svg {
  position: absolute;
  inset: 4%;
  width: 92%;
  height: 92%;
}

.guide-number-stroke {
  stroke: #2f6fad;
  stroke-width: 6;
  stroke-linecap: round;
}

.stroke-number-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 45%;
  font-weight: bold;
  color: #2f6fad;
}

/* 国語の行タイプ(縦書き用の縦罫線のみ、マスの区切りはない)。
   高さはCSSのheight:100%ではなく、assets/note-grid.jsのrenderLinedPaperが
   用紙の余白・ヘッダー分を差し引いたmm値を計算してインラインで指定する。
   親の.note-content(display:flexの子で、中身に合わせて縮む高さ)を基準にした
   height:100%は分母が定まらず解決できず、行の高さが潰れてしまっていた
   (代表指摘: 「12行のノートが上の方だけしか印刷できない」、2026-08-18)。 */
.lined-paper {
  display: grid;
  /* .note-gridと同じ理由で、箱の横幅を行の合計幅ぴったりに縮める。中央揃えは
     親の.note-contentが受け持つ(2026-08-17) */
  width: fit-content;
  border-top: var(--grid-line-width) solid #2f6fad;
  border-left: var(--grid-line-width) solid #2f6fad;
  /* 縦線だけだと下端が閉じずに開いたままになるため、一番下を横線で閉じる
     (代表指摘: 「一番下の横線が無い」、2026-08-18)。 */
  border-bottom: var(--grid-line-width) solid #2f6fad;
}

.lined-paper .line-column {
  border-right: var(--grid-line-width) solid #2f6fad;
  position: relative;
}

/* 縦リーダー入り: 行の中央に縦の点線ガイドを入れる(文字の中心合わせ用) */
.lined-paper.guide-vertical .line-column::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: var(--grid-line-width) dashed #8fb8e0;
}

/* 画面表示時は縮小して見せる(実寸はmm指定のまま、印刷時のみ等倍)。
   実際の縮小率は画面幅に応じてassets/note-grid.jsが動的に計算する。 */
.preview-wrap {
  height: 220px;
  overflow-y: hidden;
}

/* 印刷時: UIを消してノート用紙だけを出す。
   用紙はA4を基本とする(家庭のプリンターはA4トレイが大半で、B5指定だと
   縮小・用紙エラーの原因になるため)。マス目の実寸(mm)はB5規格のまま変えず、
   A4用紙の中央に配置する。
   余白は0にする(2026-08-17に一度6mmへ変更したが、印刷サイズが縮小される問題の
   解決には効果がなく、むしろ#printAreaのサイズ指定を100%指定にした副作用で
   ヘッダーの名前欄の線しか印刷されない不具合を招いたため、0に戻した)。 */
/* 横型ノート用のページ設定(1年生さんすうの6マス・7マスなど、実物が横型ノートの
   規格に対応するため。代表指摘、2026-08-18)。body.landscape-printが付いたページで使う。 */
@page landscape-note {
  size: A4 landscape;
  margin: 0;
}

body.landscape-print {
  page: landscape-note;
}

@media print {
  /* 印刷時は画面プレビュー用の太め罫線(1.4px)をやめ、実物のノートに近い細さ(1px)に戻す。
     印刷はzoomによる縮小をかけない実寸表示なので、罫線が消える心配がない(2026-08-18)。
     方眼タイプ(算数・計算ドリル・理科・社会)の罫線・リーダー線はSVGで描画しており
     (assets/note-grid.js、buildGridPaperSvg)、この変数は使っていない。マス目タイプ
     (漢字ドリル・国語)・行タイプの罫線にのみ影響する。 */
  :root {
    --grid-line-width: 1px;
  }

  /* print-color-adjust: exactは、以前はリーダー線(background-image)や数字の書き順見本行
     (.number-guide-cellの背景色)を確実に印刷させるために#printArea全体に指定していた。
     しかしこの指定がプリンタードライバーによっては「グラフィック印刷」とみなされ、
     ユーザーが印刷品質を「標準」に戻しても、当サイトで印刷するたびに「高画質」モードへ
     勝手に切り替わってしまう不具合があった(代表の実機検証、2026-08-20。方眼タイプ以外の
     ページでも発生することを確認し、SVGではなくこの指定が原因と判明)。
     リーダー線はSVGに置き換え済みで、この指定なしでも確実に印刷される。数字の書き順見本行の
     背景色(.number-guide-cell)は、この指定を外すと画面上は表示されるが印刷結果には出なく
     なる(印刷での見た目がわずかに変わる)が、余計な高画質化を避ける方を優先し、
     この指定自体を削除した。 */

  #printArea:has(.note-page.landscape) {
    width: 297mm;
    height: 210mm;
  }

  @page {
    size: A4 portrait;
    margin: 0;
  }

  /* UIを非表示にするのに visibility:hidden を使うと、見えないだけで場所(高さ)は
     確保されたままになり、それが積み重なって1ページに収まらなくなり、中身のない
     白紙ページが生まれてしまっていた(代表の実機検証、2026-08-17)。
     display:none で完全に取り除く方式に変更し、白紙ページを防ぐ。 */
  body > header.site-header {
    display: none;
  }

  main.container > *:not(.preview-wrap) {
    display: none;
  }

  .preview-wrap {
    height: auto;
    overflow: visible;
    border: none;
    padding: 0;
    margin: 0;
    background: none;
  }

  #printArea {
    position: absolute;
    top: 0;
    left: 0;
    width: 210mm;
    height: 297mm;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .note-page {
    box-shadow: none;
  }

  /* B5ぴったりの切り取り線(単体で使う・バインダー保存向け) */
  .note-page.cutline-exact::after {
    display: block;
    inset: 0;
  }

  /* B5より一回り小さい切り取り線(既存のノートに貼り付ける向け。
     ぴったりだとのり付け時にはみ出すため、3mm内側に余白を持たせる) */
  .note-page.cutline-inset::after {
    display: block;
    inset: 3mm;
  }
}