/* ==========================================================================
   letter-paper-input.html 専用スタイル
   すべてのセレクタを .letter-tool 配下（または本ツール専用の一意なID/クラス）に限定し、
   他ページへ影響する汎用セレクタは使用しない。
   ========================================================================== */

.letter-tool {
  --lp-rule-color: #cfd8cf;
  margin: 20px 0 32px;
}

/* ── メッセージ（aria-live） ── */
.letter-tool .lp-message {
  min-height: 1.4em;
  font-size: 13px;
  color: #2f7a3d;
  margin-bottom: 8px;
}

.letter-tool .lp-message.is-error {
  color: #b3261e;
}

/* ── 操作ボタン ── */
.letter-tool .lp-btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.letter-tool .lp-sample-picker {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #333;
}

.letter-tool .lp-sample-picker select {
  min-height: 44px;
  padding: 5px 8px;
  border: 1px solid #b9c2b9;
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
}

.letter-tool .lp-btn {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid #b9c2b9;
  border-radius: 6px;
  background: #fff;
  color: #333;
  font-size: 13px;
  cursor: pointer;
}

.letter-tool .lp-btn:hover {
  background: #f2f6f2;
}

.letter-tool .lp-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.letter-tool .lp-btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.letter-tool .lp-btn-primary {
  background: #2c4a6e;
  border-color: #2c4a6e;
  color: #fff;
  font-weight: 700;
}

.letter-tool .lp-btn-primary:hover {
  background: #1f3a58;
}

.letter-tool .lp-btn-danger {
  margin-left: auto;
  background: #fef2f2;
  border-color: #fca5a5;
  color: #b3261e;
}

.letter-tool .lp-btn-danger:hover {
  background: #fee2e2;
}

/* ── 2カラムレイアウト ── */
.letter-tool .lp-layout {
  display: flex;
  flex-direction: column-reverse;
  gap: 20px;
}

.letter-tool .lp-editor-col {
  min-width: 0;
}

@media (min-width: 992px) {
  .letter-tool .lp-layout {
    flex-direction: row;
    align-items: flex-start;
  }

  .letter-tool .lp-editor-col {
    flex: 1 1 auto;
    order: 1;
  }

  .letter-tool .lp-settings {
    flex: 0 0 300px;
    order: 2;
    position: sticky;
    top: 12px;
  }
}

/* ── 文字数カウント ── */
.letter-tool .lp-count-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 12px;
  color: #555;
  margin-bottom: 8px;
}

/* ── 表示倍率・ページ送り ── */
.letter-tool .lp-view-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.letter-tool .lp-zoom-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #333;
}

.letter-tool .lp-zoom-label select {
  padding: 5px 8px;
  border: 1px solid #b9c2b9;
  border-radius: 6px;
  font-size: 13px;
}

.letter-tool .lp-page-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.letter-tool .lp-page-nav button {
  min-height: 36px;
  padding: 4px 10px;
  border: 1px solid #b9c2b9;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
}

.letter-tool .lp-page-nav button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.letter-tool .lp-scroll-hint {
  font-size: 11px;
  color: #888;
  margin: 0 0 8px;
}

/* ── プレビュー領域 ── */
.letter-tool .lp-preview-wrap {
  overflow-x: auto;
  overflow-y: visible;
  padding: 16px 4px 24px 0;
  background: #e6e6e6;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  /* 背景（灰色）は編集列の右端（次のページボタンの位置）まで伸ばしたうえで、
     便箋本体はその灰色部分の左右中央に配置する。 */
  width: 100%;
}

/* 便箋が表示領域に収まらない場合、justify-content:center のままだと
   はみ出した分の一部（開始側）が横スクロールしても絶対に届かない領域になってしまう
   （ブラウザの仕様上の制約）。収まらない時だけ flex-start に切り替えて
   常に正しくスクロールできるようにし、初期スクロール位置はJS側で調整する
   （letter-paper-input.js の updatePreviewScrollAlignment 参照）。 */
.letter-tool .lp-preview-wrap.lp-preview-overflowing {
  justify-content: flex-start;
}

.letter-tool .lp-pages {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* ── 便箋ページ ── */
.letter-tool .letter-page {
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
  flex-shrink: 0;
}

.letter-tool .letter-page.paper-a4 { width: 210mm; height: 297mm; }
.letter-tool .letter-page.paper-b5 { width: 182mm; height: 257mm; }

.letter-tool .lp-page-surface {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  background: #fffdf9;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.letter-tool .letter-page.margin-narrow .lp-page-surface { padding: 15mm; }
.letter-tool .letter-page.margin-normal .lp-page-surface { padding: 25mm; }
.letter-tool .letter-page.margin-wide   .lp-page-surface { padding: 35mm; }

/* デザインごとの上部装飾・配色 */
.letter-tool .letter-page.design-simple .lp-page-surface {
  --lp-rule-color: #cfd8cf;
  border-top: 2px solid #dfe4df;
}

.letter-tool .letter-page.design-business .lp-page-surface {
  --lp-rule-color: #c3cfdd;
  border-top: 4px solid #2c4a6e;
}

.letter-tool .letter-page.design-thanks .lp-page-surface {
  --lp-rule-color: #e6d2ce;
  border-top: 2px solid #d9b8b0;
}

.letter-tool .letter-page.design-thanks .lp-page-surface::before {
  content: "";
  position: absolute;
  top: 6mm;
  left: 50%;
  width: 8mm;
  height: 8mm;
  transform: translateX(-50%) rotate(45deg);
  background: #e6d2ce;
}

/* ── 本文とサイド欄を並べる領域 ── */
.letter-tool .lp-content-row {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

.letter-tool .letter-page.mode-vertical .lp-content-row {
  /* vertical-rl コンテナ内では row の主軸が縦方向になり、結果として
     DOM順（meta→body）がそのまま右から左の列として視覚化される。
     日付欄（先に読む）を右にするため row を使用する。 */
  flex-direction: row;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.letter-tool .letter-page.mode-horizontal .lp-content-row {
  flex-direction: column;
  writing-mode: horizontal-tb;
}

.letter-tool .lp-meta-block {
  flex: 0 0 auto;
  font-family: 'Yu Mincho', 'Hiragino Mincho ProN', 'Noto Serif JP', serif;
  color: #333;
}

.letter-tool .letter-page.mode-vertical .lp-meta-block { margin-left: 6mm; margin-bottom: 10mm; }
.letter-tool .letter-page.mode-horizontal .lp-meta-block { margin-bottom: 6mm; }

.letter-tool .lp-date {
  font-size: calc(var(--lp-font-size, 16px) * 0.95);
  line-height: 1.6;
}

.letter-tool .letter-page.mode-vertical .lp-date {
  /* 縦書きページ内でも日付欄は常に横書きで表示する（周囲の vertical-rl を継承すると
     数字が横向きに回転してしまうため） */
  writing-mode: horizontal-tb;
}

/* ── 本文エリア ── */
.letter-tool .lp-body-wrap {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

.letter-tool .lp-body-area {
  position: relative;
  /* z-index を明示し、この要素自身に重ね合わせコンテキストを持たせる。
     指定がないと子の .lp-rule-lines（z-index:-1）がこの要素の中に収まらず、
     ページ全体の背景より奥に沈み込んで見えなくなってしまう。 */
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-repeat: repeat;
  /* 罫線の間隔は本文と同じ font-size / line-height をこの要素自身にも設定したうえで、
     1lh（このボックスで実際に使われている行送りの値そのもの）を使って揃える。
     以前は font-size×line-height を calc で別途計算していたが、テキストのレイアウトと
     背景画像の描画は内部的に別経路で丸められることがあり、フォントサイズによっては
     数百分の1px単位のズレが蓄積して罫線と文字がかぶることがあった。1lh はブラウザが
     実際の行送りに使った値をそのまま参照するため、この種のズレが起きない。 */
  font-size: var(--lp-font-size, 16px);
  line-height: var(--lp-line-height, 1.8);
}

/* 縦書きの罫線は CSS の背景タイルではなく、JS が右端からの距離を計算して
   1本ずつ .lp-rule-line として配置する（letter-paper-input.js の
   renderVerticalRuleLines 参照）。CSSの繰り返し背景は左端基準で敷き詰められる仕様のため、
   便箋の幅と文字サイズの組み合わせによっては右端の文字との間に端数のズレが生じてしまう。 */
.letter-tool .lp-rule-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* position:absolute の要素は DOM順に関わらず static な文字より手前に描画されるため、
     従来の背景画像と同じく文字の背面になるよう z-index で明示的に下げる。 */
  z-index: -1;
}

.letter-tool .lp-rule-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--lp-rule-color);
}

.letter-tool .letter-page.ruled-on.mode-horizontal .lp-body-area {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(1lh - 1px),
    var(--lp-rule-color) calc(1lh - 1px),
    var(--lp-rule-color) 1lh
  );
}

.letter-tool .lp-body-input,
.letter-tool .lp-body-preview {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  font-family: 'Yu Mincho', 'Hiragino Mincho ProN', 'Noto Serif JP', serif;
  /* textarea は既定でフォントを継承しないブラウザがあるため、親 .lp-body-area と
     同じ値を明示的に指定する（1lh の基準は .lp-body-area 自身の line-height なので、
     ここが親と食い違わない限り罫線とはズレない）。 */
  font-size: var(--lp-font-size, 16px);
  line-height: var(--lp-line-height, 1.8);
  color: #1f2933;
  writing-mode: inherit;
  text-orientation: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow: hidden;
}

.letter-tool .lp-body-input {
  overflow: auto;
  cursor: text;
}

.letter-tool .lp-body-input:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
}

.letter-tool .lp-body-preview {
  cursor: pointer;
}

.letter-tool .lp-body-preview:hover {
  background-color: rgba(37, 99, 235, 0.04);
}

.letter-tool .lp-body-input::placeholder {
  color: #9aa5a0;
  writing-mode: inherit;
}

/* ── 設定パネル ── */
.letter-tool .lp-settings {
  border: 1px solid #d8e0d8;
  border-radius: 10px;
  background: #f8faf8;
  padding: 6px 14px 12px;
}

.letter-tool .lp-accordion {
  border-top: 1px solid #e2e8e2;
}

.letter-tool .lp-accordion:first-child {
  border-top: none;
}

.letter-tool .lp-accordion summary {
  padding: 12px 4px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  color: #333;
  list-style: none;
  display: flex;
  align-items: center;
  user-select: none;
}

.letter-tool .lp-accordion summary::-webkit-details-marker {
  display: none;
}

.letter-tool .lp-accordion summary::after {
  content: '▼';
  margin-left: auto;
  font-size: 10px;
  color: #888;
}

.letter-tool .lp-accordion[open] summary::after {
  content: '▲';
}

.letter-tool .lp-accordion summary:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.letter-tool .lp-accordion-body {
  padding: 2px 4px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.letter-tool .lp-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: #333;
}

.letter-tool .lp-field legend {
  font-weight: 700;
  padding: 0 0 4px;
}

.letter-tool .lp-field select,
.letter-tool .lp-field input[type="text"],
.letter-tool .lp-field input[type="date"],
.letter-tool .lp-field input[type="tel"] {
  padding: 7px 9px;
  border: 1px solid #b9c2b9;
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
}

.letter-tool .lp-field select:focus-visible,
.letter-tool .lp-field input:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 1px;
}

.letter-tool .lp-radio,
.letter-tool .lp-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 14px;
  font-weight: 400;
  cursor: pointer;
}

.letter-tool .lp-sublabel {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

.letter-tool input[type="range"] {
  width: 100%;
}

/* ── SEOコンテンツ ── */
.seo-content {
  max-width: 960px;
  margin: 32px 0;
  padding: 0 16px 40px 0;
  line-height: 1.8;
  color: #333;
}

.seo-content h2 {
  margin: 36px 0 12px;
  font-size: 1.3rem;
  font-weight: 700;
  border-bottom: 2px solid #e2e8e2;
  padding-bottom: 6px;
}

.seo-content h2:first-child {
  margin-top: 0;
}

.seo-content h3 {
  margin: 20px 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
}

.seo-content p {
  margin: 0 0 12px;
}

.seo-content ul {
  padding-left: 1.4em;
  margin: 0 0 12px;
}

.seo-content li {
  margin-bottom: 4px;
}

.seo-content .related-links {
  list-style: none;
  padding: 8px 14px;
  margin: 0 0 12px;
  border-left: 3px solid #b9c2b9;
}

.seo-content .related-links li {
  margin-bottom: 4px;
}

.seo-content .related-links a::before {
  content: '→ ';
  color: #6b7280;
}

/* ── SEOコンテンツ内の使い方ステップ ── */
.letter-tool ~ .seo-content .lp-steps {
  list-style: none;
  padding: 0;
  counter-reset: step;
  display: grid;
  gap: 12px;
}

.seo-content .lp-steps li {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 12px 14px;
  background: #fafafa;
}

/* ── プライバシー注記 ── */
.lp-privacy-note {
  max-width: 960px;
  margin: 0 auto 12px;
  padding: 0 16px;
  font-size: 12px;
  color: #888;
  text-align: center;
}

/* ── オフスクリーン計測クローン（JS生成） ── */
#lpMeasureRoot {
  position: fixed;
  top: 0;
  left: -99999px;
  visibility: hidden;
  pointer-events: none;
  z-index: -1;
}

/* ── レスポンシブ ── */
@media (max-width: 991px) {
  .letter-tool .lp-btn-row button {
    flex: 1 1 auto;
  }

  .letter-tool .lp-settings {
    margin-bottom: 4px;
  }
}

@media (max-width: 640px) {
  .letter-tool .lp-count-row {
    font-size: 11px;
  }

  .letter-tool .lp-view-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── 印刷 ── */
/* @page のサイズは印刷実行時にJSが <style> を動的挿入して設定する
   （ブラウザによっては @page size をCSSファイル内の固定値にすると
   用紙サイズ切り替えに追従できないため、印刷直前に動的注入する構成にしている） */
@media print {
  #header,
  #footer,
  nav[aria-label="breadcrumb"],
  main > header,
  .letter-tool .lp-message,
  .letter-tool .lp-btn-row,
  .letter-tool .lp-count-row,
  .letter-tool .lp-view-row,
  .letter-tool .lp-scroll-hint,
  .letter-tool .lp-settings,
  .lp-privacy-note,
  .seo-content {
    display: none !important;
  }

  body {
    background: #fff;
    margin: 0;
    padding: 0;
  }

  main {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .letter-tool {
    margin: 0;
  }

  .letter-tool .lp-layout {
    display: block;
  }

  .letter-tool .lp-preview-wrap {
    overflow: visible;
    padding: 0;
    background: #fff;
    border-radius: 0;
  }

  .letter-tool .lp-pages {
    display: block;
    zoom: normal !important;
    gap: 0;
  }

  .letter-tool .letter-page {
    box-shadow: none;
    margin: 0 auto;
    break-after: page;
    page-break-after: always;
  }

  .letter-tool .letter-page:last-child {
    break-after: avoid;
    page-break-after: avoid;
  }

  .letter-tool .lp-body-input::placeholder {
    color: transparent;
  }

  .letter-tool .lp-body-input {
    overflow: hidden;
  }
}