@charset "UTF-8";

/* =========================================================
   便箋・手紙作成ツール
   紙面（.lm-sheet）は必ず mm で組み、印刷が等倍になるようにする。
   画面のズームは .lm-stage の transform だけで行い、
   紙のレイアウトそのものには一切触れない。
   ========================================================= */

:root {
  /* 用紙・組版（JSから書き換える） */
  --lm-pw: 148mm;             /* 用紙幅 */
  --lm-ph: 210mm;             /* 用紙高 */
  --lm-pad: 15mm;             /* 余白 */
  --lm-fs: 12pt;              /* 文字サイズ */
  --lm-lh: 1.9;               /* 行間（倍率） */
  --lm-pitch: calc(var(--lm-fs) * var(--lm-lh));   /* 行送り＝罫線ピッチ */
  --lm-family: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', serif;
  --lm-zoom: 1;

  /* UI */
  --lm-bg: #f2efe9;
  --lm-panel: #ffffff;
  --lm-line: #e6e1d8;
  --lm-text: #3c372f;
  --lm-sub: #7d7568;
  --lm-accent: #c07a86;
  --lm-accent-soft: #fdf1f2;
  --lm-accent-line: #eebfc6;
  --lm-green: #6f8f6a;
  --lm-green-soft: #f1f6ef;
}

/* ---------------- ページ全体 ---------------- */
.lm-body { background: var(--lm-bg); }
.lm-body main { padding-bottom: 0; }

.lm-appbar {
  background: #fff;
  border-bottom: 1px solid var(--lm-line);
  position: sticky;
  top: 0;
  z-index: 30;
}
.lm-appbar-inner {
  max-width: 1560px;
  margin: 0 auto;
  padding: .55rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.lm-brand { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.lm-brand-icon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--lm-accent-soft);
  color: var(--lm-accent);
  flex: none;
}
.lm-brand h1 { font-size: 1.06rem; margin: 0; color: var(--lm-text); line-height: 1.25; letter-spacing: .01em; }
.lm-brand p { font-size: .74rem; margin: .1rem 0 0; color: var(--lm-sub); }

.lm-appbar-actions { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.lm-appbar-link,
.lm-savestate {
  display: inline-flex; align-items: center; gap: .32rem;
  font-size: .78rem; color: var(--lm-sub);
  padding: .38rem .6rem; border-radius: 8px;
  text-decoration: none; white-space: nowrap;
}
.lm-appbar-link:hover { background: #f6f3ee; color: var(--lm-text); }
.lm-savestate { color: var(--lm-green); }
.lm-savestate[data-state="saving"] { color: var(--lm-sub); }

/* ---------------- 3カラム ---------------- */
.lm-workspace {
  max-width: 1560px;
  margin: 0 auto .4rem;
  padding: 0 1.1rem;
  display: grid;
  grid-template-columns: minmax(250px, 24%) minmax(0, 1fr) minmax(230px, 20%);
  gap: .9rem;
  align-items: start;
}

/* ---------------- 左：設定パネル ---------------- */
/* 既定は「普通に流れる」レイアウト。3カラムが1行に並ぶ広い画面でだけ
   下の @media で画面内に収める形（sticky + --lm-shell）に切り替える。
   狭い画面で sticky にすると、2段目に落ちた手紙アシストへせり出して重なる。 */
.lm-panel {
  background: var(--lm-panel);
  border: 1px solid var(--lm-line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.lm-panel-scroll { overflow-y: auto; padding: .9rem 1rem .4rem; flex: 1; }

.lm-group { margin-bottom: 1.05rem; }
.lm-group:last-child { margin-bottom: .4rem; }
.lm-group-title {
  font-size: .84rem; font-weight: 700; color: var(--lm-text);
  margin: 0 0 .55rem; letter-spacing: .02em;
}

/* ピル型ボタン */
.lm-pills { display: flex; flex-wrap: wrap; gap: .38rem; }
.lm-pills button {
  font-family: inherit; font-size: .8rem; color: var(--lm-text);
  padding: .38rem .78rem; border: 1px solid var(--lm-line);
  background: #fff; border-radius: 999px; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  line-height: 1.4;
}
.lm-pills button:hover { background: #faf7f2; border-color: #d8d1c4; }
.lm-pills button[aria-checked="true"] {
  background: var(--lm-accent-soft);
  border-color: var(--lm-accent-line);
  color: var(--lm-accent);
  font-weight: 600;
}
.lm-pills-font { display: grid; grid-template-columns: repeat(3, 1fr); }
.lm-pills-font button { min-width: 0; text-align: center; padding: .4rem .3rem; white-space: nowrap; }

/* デザイン選択 */
.lm-designs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.lm-designs button {
  font-family: inherit; padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: .28rem;
}
.lm-thumb {
  display: block; width: 100%; aspect-ratio: 1 / 1.414;
  border: 1.5px solid var(--lm-line); border-radius: 5px;
  position: relative; overflow: hidden;
  background: var(--lm-thumb-paper, #fffdf7);
  transition: border-color .15s, box-shadow .15s;
}
.lm-thumb svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lm-thumb-rules {
  position: absolute; left: 14%; right: 14%; top: 12%; bottom: 12%;
  background: repeating-linear-gradient(to bottom,
    transparent 0, transparent 3.4px,
    var(--lm-thumb-rule, #eedade) 3.4px, var(--lm-thumb-rule, #eedade) 4.4px);
}
.lm-designs button:hover .lm-thumb { border-color: #cfc6b6; }
.lm-designs button[aria-checked="true"] .lm-thumb {
  border-color: var(--lm-accent);
  box-shadow: 0 0 0 2px var(--lm-accent-soft);
}
.lm-design-name { font-size: .71rem; color: var(--lm-sub); line-height: 1.2; }
.lm-designs button[aria-checked="true"] .lm-design-name { color: var(--lm-accent); font-weight: 600; }

/* 行。パネルが狭いときはラベルを潰さず、操作部を次の行へ送る */
.lm-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; flex-wrap: wrap; row-gap: .35rem; }
.lm-row-label { font-size: .78rem; color: var(--lm-sub); flex: none; min-width: 5.6em; }

/* セグメント切替 */
.lm-seg { display: inline-flex; gap: .3rem; margin-left: auto; }
.lm-seg button {
  font-family: inherit; font-size: .78rem; color: var(--lm-text);
  white-space: nowrap;
  padding: .34rem .72rem; border: 1px solid var(--lm-line);
  background: #fff; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s, color .15s;
}
.lm-seg button:hover { background: #faf7f2; border-color: #d8d1c4; }
.lm-seg button[aria-checked="true"], .lm-seg button[aria-pressed="true"] {
  background: var(--lm-accent-soft); border-color: var(--lm-accent-line);
  color: var(--lm-accent); font-weight: 600;
}
.lm-seg-icon button { padding: .3rem .5rem; }
.lm-seg-icon button svg { display: block; }

/* ステッパー */
.lm-stepper {
  margin-left: auto; display: inline-flex; align-items: center;
  border: 1px solid var(--lm-line); border-radius: 999px; overflow: hidden; background: #fff;
}
.lm-stepper button {
  font-family: inherit; font-size: .95rem; line-height: 1; color: var(--lm-text);
  width: 30px; height: 28px; border: 0; background: none; cursor: pointer;
}
.lm-stepper button:hover:not(:disabled) { background: #f6f3ee; }
.lm-stepper button:disabled { color: #cfc9bd; cursor: default; }
.lm-stepper span { font-size: .78rem; color: var(--lm-text); min-width: 3.6em; text-align: center; }

.lm-group-reset { border-top: 1px solid var(--lm-line); padding-top: .7rem; }
.lm-textbtn {
  font-family: inherit; font-size: .76rem; color: var(--lm-sub);
  background: none; border: 0; cursor: pointer; padding: .2rem 0; text-decoration: underline;
  text-underline-offset: 3px;
}
.lm-textbtn:hover { color: var(--lm-accent); }

/* 主要アクション */
.lm-panel-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
  padding: .7rem .9rem .8rem;
  border-top: 1px solid var(--lm-line);
  background: #fff;
}
.lm-action {
  font-family: inherit; font-size: .84rem; font-weight: 600; color: #fff;
  border: 0; border-radius: 10px; padding: .68rem .4rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  transition: filter .15s, transform .08s;
}
.lm-action:hover { filter: brightness(1.06); }
.lm-action:active { transform: translateY(1px); }
.lm-action-pdf { background: #c46f7c; }
.lm-action-print { background: #5f7fa8; }

/* ---------------- 中央：便箋 ---------------- */
.lm-center { display: flex; flex-direction: column; min-width: 0; }

.lm-center-top {
  display: flex; align-items: center; gap: .8rem;
  padding: 0 .2rem .55rem; min-height: 34px;
}
.lm-seg-mode { margin-left: 0; }
.lm-seg-mode button { padding: .38rem 1.25rem; font-size: .82rem; }

.lm-pagenav {
  margin-left: auto; display: inline-flex; align-items: center; gap: .1rem;
  background: #fff; border: 1px solid var(--lm-line); border-radius: 999px; padding: .12rem .3rem;
}
/* 1ページのときはページ送りを出さない（display指定が[hidden]に勝つので明示する） */
.lm-pagenav[hidden] { display: none; }
.lm-pagenav button {
  width: 26px; height: 26px; border: 0; background: none; cursor: pointer;
  color: var(--lm-text); display: grid; place-items: center; border-radius: 999px;
}
.lm-pagenav button:hover:not(:disabled) { background: #f6f3ee; }
.lm-pagenav button:disabled { color: #d2ccc0; cursor: default; }
.lm-pagenav span { font-size: .78rem; color: var(--lm-sub); padding: 0 .3rem; white-space: nowrap; }

/* 宛名・差出人・日付 */
.lm-docbar {
  display: flex; gap: .5rem; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--lm-line); border-radius: 10px;
  padding: .5rem .65rem; margin-bottom: .6rem;
}
.lm-field { display: flex; align-items: center; gap: .4rem; flex: 1 1 180px; min-width: 0; }
.lm-field > span { font-size: .76rem; color: var(--lm-sub); flex: none; display: inline-flex; align-items: center; gap: .3rem; }
.lm-field input[type="text"] {
  flex: 1; min-width: 0; font-family: inherit; font-size: .84rem; color: var(--lm-text);
  border: 1px solid var(--lm-line); border-radius: 7px; padding: .32rem .5rem; background: #fdfcfa;
}
.lm-field input[type="text"]:focus { outline: none; border-color: var(--lm-accent-line); background: #fff; }
.lm-field input[type="text"]:disabled { background: #f4f2ee; color: #b4ada1; }
.lm-field-date { flex: 0 1 210px; }
.lm-field-date input[type="checkbox"] { accent-color: var(--lm-accent); }

/* 紙を置く場所 */
.lm-canvas {
  background: #e8e3da;
  border: 1px solid var(--lm-line);
  border-radius: 12px;
  padding: 1.4rem 1rem;
  overflow: auto;
  flex: 1;
  min-height: 58vh;
  display: flex;
  justify-content: center;
}
/* transform はレイアウトに場所を取らないので、包み箱に実寸×倍率を持たせてスクロールさせる */
.lm-stage-wrap { position: relative; flex: none; }
.lm-stage {
  position: absolute; top: 0; left: 0;
  transform: scale(var(--lm-zoom));
  transform-origin: top left;
  display: flex; flex-direction: column; align-items: center; gap: 1.4rem;
}

/* ---------------- 便箋そのもの ---------------- */
.lm-sheet {
  position: relative;
  width: var(--lm-pw);
  height: var(--lm-ph);
  flex: none;
  background: var(--lm-paper, #fffdf7);
  box-shadow: 0 2px 16px rgba(70, 58, 45, .16);
  overflow: hidden;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.lm-sheet-deco { position: absolute; inset: 0; pointer-events: none; }
.lm-sheet-deco svg { width: 100%; height: 100%; display: block; }

/* ---- 便箋デザイン5種（色はここだけで定義する） ----
 * body にも同じ値を載せるのは、紙の外にいる .lm-input が
 * カーソル色(--lm-ink)を解決できるようにするため。 */
.lm-body[data-design="simple"],   .lm-sheet[data-design="simple"],   .lm-thumb[data-design="simple"]   { --lm-paper: #fffdf7; --lm-ink: #33302b; --lm-rule: #ecd9dc; --lm-thumb-paper: #fffdf7; --lm-thumb-rule: #ecd9dc; }
.lm-body[data-design="natural"],  .lm-sheet[data-design="natural"],  .lm-thumb[data-design="natural"]  { --lm-paper: #fdfdf6; --lm-ink: #33372f; --lm-rule: #dde7d8; --lm-thumb-paper: #fdfdf6; --lm-thumb-rule: #dde7d8; }
.lm-body[data-design="cute"],     .lm-sheet[data-design="cute"],     .lm-thumb[data-design="cute"]     { --lm-paper: #fffbfb; --lm-ink: #3b3230; --lm-rule: #f4dade; --lm-thumb-paper: #fffbfb; --lm-thumb-rule: #f4dade; }
.lm-body[data-design="japanese"], .lm-sheet[data-design="japanese"], .lm-thumb[data-design="japanese"] { --lm-paper: #fdfaf2; --lm-ink: #2f2b25; --lm-rule: #e6dcc6; --lm-thumb-paper: #fdfaf2; --lm-thumb-rule: #e6dcc6; }
.lm-body[data-design="formal"],   .lm-sheet[data-design="formal"],   .lm-thumb[data-design="formal"]   { --lm-paper: #ffffff; --lm-ink: #262b33; --lm-rule: #dde2ea; --lm-thumb-paper: #ffffff; --lm-thumb-rule: #dde2ea; }

/* フォーマルは罫線を出さない（すっきり見せる） */
.lm-sheet[data-design="formal"] .lm-rules { display: none; }
.lm-thumb[data-design="formal"] .lm-thumb-rules { display: none; }

/* 罫線（行送りにぴったり合わせる） */
.lm-rules { position: absolute; inset: var(--lm-pad); pointer-events: none; }
.lm-sheet[data-orient="horizontal"] .lm-rules {
  background: repeating-linear-gradient(to bottom,
    transparent 0, transparent calc(var(--lm-pitch) - 1px),
    var(--lm-rule, #f0d9dd) calc(var(--lm-pitch) - 1px), var(--lm-rule, #f0d9dd) var(--lm-pitch));
}
.lm-sheet[data-orient="vertical"] .lm-rules {
  background: repeating-linear-gradient(to left,
    transparent 0, transparent calc(var(--lm-pitch) - 1px),
    var(--lm-rule, #f0d9dd) calc(var(--lm-pitch) - 1px), var(--lm-rule, #f0d9dd) var(--lm-pitch));
}
.lm-sheet[data-rules="off"] .lm-rules { display: none; }

/* 書き込み領域 */
.lm-area {
  position: absolute;
  inset: var(--lm-pad);
  font-family: var(--lm-family);
  font-size: var(--lm-fs);
  line-height: var(--lm-lh);
  color: var(--lm-ink, #33302b);
  overflow: hidden;
}
/* 縦書きでは英数字も寝かせず正立させる（縦書きメモ帳と同じ扱い）。
 * 便箋・透明textarea・測定用の3か所で必ず同じ値にすること。
 * 1つでも食い違うと、カーソル位置と改ページ位置がずれる。 */
.lm-sheet[data-orient="vertical"] .lm-area { writing-mode: vertical-rl; text-orientation: upright; }

/* 宛名は先頭、本文はその次、日付と差出人は「書字領域の末尾」に固定する。
 * flex + margin-block-start:auto にしているのは、
 *   ・実際の紙（高さ固定）… 余りを margin が吸収して末尾へ貼り付く
 *   ・測定用の箱（高さauto）… auto は 0 になり、本文＋差出人の実寸が測れる
 * の両方を1つの指定で満たすため。measure側が「本文と差出人が同じ面に収まるか」を
 * 見ているので、貼り付けても本文と重なることはない。 */
/* 書字領域のブロック方向を「行送りの整数倍」に切り詰める（--lm-flowblock はJSが実測して入れる）。
   こうすると罫線がちょうど割り切れ、末尾に貼り付けた日付・差出人も罫線の上に乗る。 */
.lm-flow { position: absolute; inset: 0; display: flex; flex-direction: column; }
.lm-sheet[data-orient="vertical"] .lm-flow { left: auto; width: var(--lm-flowblock, auto); }
.lm-sheet[data-orient="horizontal"] .lm-flow { bottom: auto; height: var(--lm-flowblock, auto); }
.lm-sheet[data-orient="vertical"] .lm-rules { left: auto; width: var(--lm-flowblock, auto); }
.lm-sheet[data-orient="horizontal"] .lm-rules { bottom: auto; height: var(--lm-flowblock, auto); }
.lm-addr, .lm-sign { flex: 0 0 auto; }
.lm-addr { white-space: pre-wrap; }

/* 本文が「宛名と差出人を除いた残り全部」を占める。
 *   余っているとき … 本文が伸びて、差出人は末尾に貼り付いたまま
 *   あふれたとき   … 本文が縮んで（はみ出しは本文側で切る）、差出人は末尾に貼り付いたまま
 * どちらでも差出人が押し出されないので、日本語入力の変換中でも位置が動かない。 */
.lm-text {
  flex: 1 1 auto; min-block-size: 0; overflow: hidden;
  white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; line-break: strict;
}

/* 本文との間は最低1行ぶん空ける（paddingなので改ページ測定にも効く） */
.lm-sign { padding-block-start: var(--lm-pitch); }
.lm-sign-date, .lm-sign-name { white-space: pre-wrap; }
.lm-sign-name { text-align: end; letter-spacing: .04em; }
/* 縦組みは日付を上寄せ・署名を下寄せ、横組みはどちらも右寄せ */
.lm-sheet[data-orient="vertical"] .lm-sign-date,
.lm-measure[data-orient="vertical"] .lm-sign-date { text-align: start; }
.lm-sheet[data-orient="horizontal"] .lm-sign-date,
.lm-measure[data-orient="horizontal"] .lm-sign-date { text-align: end; }

/* 未入力のときの薄いガイド文（印刷には出さない） */
.lm-ph { color: #bdb5a8; }

/* 表示中のページ以外は画面では隠し、印刷では全ページ出す */
.lm-sheet[data-off="1"] { display: none; }

/* 直接編集用のテキストエリア（文字は透明、下の本文が透けて見える）
 *
 * 注意: この要素は .lm-sheet の中ではなく .lm-stage の直下にいる
 * （再描画で紙を差し替えてもフォーカスとIME変換を失わないため）。
 * したがって組版は .lm-area から継承できない。カーソル位置を下の本文と
 * 1文字もずらさないために、.lm-area とまったく同じ値を明示的に与える。 */
.lm-input {
  position: absolute;
  margin: 0; padding: 0; border: 0; outline: 0; resize: none;
  background: transparent;
  font-family: var(--lm-family);
  font-size: var(--lm-fs);
  line-height: var(--lm-lh);
  letter-spacing: normal;
  font-feature-settings: normal;
  text-indent: 0;
  color: transparent;
  caret-color: var(--lm-ink, #33302b);
  overflow: hidden;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  line-break: strict;
  display: block;
}
.lm-input::selection { background: rgba(192, 122, 134, .26); }
.lm-input::placeholder { color: transparent; }
/* 縦書きの指定も .lm-stage 側に持たせる（.lm-sheet 配下ではないため） */
.lm-stage[data-orient="vertical"] .lm-input { writing-mode: vertical-rl; text-orientation: upright; }
.lm-stage[data-orient="horizontal"] .lm-input { writing-mode: horizontal-tb; }

/* 編集中の紙にうっすら合図を出す */
.lm-sheet[data-editing="1"] { box-shadow: 0 2px 16px rgba(70, 58, 45, .16), 0 0 0 2px var(--lm-accent-line); }

.lm-sheet-no {
  position: absolute; bottom: 3mm; left: 0; right: 0;
  text-align: center; font-size: 8pt; color: #b6ada0;
  font-family: 'Noto Sans JP', sans-serif;
}
.lm-stage[data-single="1"] .lm-sheet-no { display: none; }

/* ズーム */
.lm-zoombar {
  display: flex; align-items: center; justify-content: center; gap: .25rem;
  padding: .55rem 0 .2rem;
}
.lm-zoombar button {
  font-family: inherit; font-size: .82rem; color: var(--lm-text);
  min-width: 28px; height: 28px; padding: 0 .3rem;
  border: 1px solid var(--lm-line); background: #fff; border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.lm-zoombar button:hover:not(:disabled) { background: #faf7f2; }
.lm-zoombar button:disabled { color: #cfc9bd; cursor: default; }
.lm-zoombar span { font-size: .78rem; color: var(--lm-sub); min-width: 3.4em; text-align: center; }
.lm-zoom-fit { margin-left: .5rem; padding: 0 .7rem !important; font-size: .76rem !important; }

/* ---------------- 右：手紙アシスト ---------------- */
.lm-assist {
  overflow: hidden;
  display: flex; flex-direction: column;
}
.lm-assist-scroll { overflow-y: auto; display: flex; flex-direction: column; gap: .7rem; padding-bottom: .4rem; }

.lm-card {
  background: var(--lm-panel);
  border: 1px solid var(--lm-line);
  border-radius: 12px;
  padding: .8rem .85rem;
}
.lm-card-title, .lm-card-subtitle {
  display: flex; align-items: center; gap: .38rem;
  font-size: .86rem; font-weight: 700; color: var(--lm-text); margin: 0 0 .6rem;
}
.lm-card-title svg { color: var(--lm-accent); }
.lm-card-subtitle { font-size: .82rem; }
.lm-card-subtitle svg { color: var(--lm-green); }

.lm-tabs { display: flex; gap: .25rem; margin-bottom: .55rem; flex-wrap: wrap; }
.lm-tabs button {
  font-family: inherit; font-size: .74rem; color: var(--lm-sub);
  padding: .28rem .55rem; border: 1px solid var(--lm-line);
  background: #fff; border-radius: 999px; cursor: pointer;
}
.lm-tabs button:hover { background: #faf7f2; }
.lm-tabs button[aria-selected="true"] {
  background: var(--lm-accent-soft); border-color: var(--lm-accent-line);
  color: var(--lm-accent); font-weight: 600;
}

.lm-phrases { display: flex; flex-direction: column; gap: .38rem; }
.lm-phrase {
  font-family: inherit; text-align: left; width: 100%;
  font-size: .78rem; line-height: 1.5; color: var(--lm-text);
  background: #fff; border: 1px solid var(--lm-accent-line); border-radius: 9px;
  padding: .5rem .55rem; cursor: pointer;
  display: flex; align-items: center; gap: .4rem;
  transition: background .15s, border-color .15s;
}
.lm-phrase:hover { background: var(--lm-accent-soft); }
.lm-phrase span { flex: 1; min-width: 0; }
.lm-phrase svg { flex: none; color: var(--lm-accent); }

.lm-more {
  width: 100%; margin-top: .45rem;
  font-family: inherit; font-size: .76rem; color: var(--lm-sub);
  background: #f6f3ee; border: 0; border-radius: 8px; padding: .42rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
}
.lm-more:hover { background: #efeae2; }
.lm-more[aria-expanded="true"] svg { transform: rotate(180deg); }

.lm-card-season { background: var(--lm-green-soft); border-color: #dbe6d6; }
.lm-season-note { font-size: .74rem; color: var(--lm-sub); margin: 0 0 .4rem; line-height: 1.5; }
.lm-season-text {
  font-size: .78rem; line-height: 1.6; color: var(--lm-text); margin: 0 0 .55rem;
  background: #fff; border-radius: 8px; padding: .45rem .55rem;
}
.lm-season-actions { display: flex; gap: .4rem; }
.lm-season-swap {
  font-family: inherit; font-size: .74rem; color: var(--lm-green);
  background: #fff; border: 1px solid #cfe0c9; border-radius: 8px; padding: .38rem .6rem; cursor: pointer;
}
.lm-season-swap:hover { background: #f4f9f2; }
.lm-season-insert {
  flex: 1; font-family: inherit; font-size: .78rem; font-weight: 600; color: #fff;
  background: var(--lm-green); border: 0; border-radius: 8px; padding: .38rem .6rem; cursor: pointer;
}
.lm-season-insert:hover { filter: brightness(1.06); }

.lm-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.lm-check li { display: flex; align-items: center; gap: .45rem; font-size: .79rem; color: var(--lm-text); }
.lm-check-mark {
  width: 16px; height: 16px; border-radius: 999px; flex: none;
  border: 1.5px solid #d6d0c4; background: #fff;
  position: relative;
}
.lm-check li[data-ok="1"] .lm-check-mark { background: var(--lm-green); border-color: var(--lm-green); }
.lm-check li[data-ok="1"] .lm-check-mark::after {
  content: ""; position: absolute; left: 4.4px; top: 2.6px;
  width: 4px; height: 7.5px; border: solid #fff; border-width: 0 1.7px 1.7px 0;
  transform: rotate(42deg);
}
.lm-check-name { flex: 1; }
.lm-check-state { font-size: .72rem; color: #b0a89b; }
.lm-check li[data-ok="1"] .lm-check-state { color: var(--lm-green); font-weight: 600; }
.lm-check-msg {
  font-size: .74rem; line-height: 1.5; color: var(--lm-sub);
  margin: .6rem 0 0; padding: .45rem .55rem; border-radius: 8px; background: #f6f3ee;
}
.lm-check-msg[data-done="1"] { background: var(--lm-green-soft); color: var(--lm-green); font-weight: 600; }

/* ---------------- 測定用（画面外） ---------------- */
.lm-measure {
  position: absolute; left: -100000px; top: 0;
  width: 100000px; height: 0; overflow: visible; visibility: hidden;
  pointer-events: none;
}
.lm-measure .lm-geo { position: relative; }
/* 紙と同じ組み方（flex column）にしつつ、ブロック方向は内容なりに伸ばして実寸を測る。
   inline-flex なので shrink-to-fit が効き、margin-block-start:auto は 0 に潰れる。 */
.lm-measure .lm-mflow {
  position: static; display: inline-flex; flex-direction: column; vertical-align: top;
  font-family: var(--lm-family); font-size: var(--lm-fs); line-height: var(--lm-lh);
}
.lm-measure .lm-mflow > * { flex: 0 0 auto; }
.lm-measure[data-orient="vertical"] .lm-mflow { writing-mode: vertical-rl; text-orientation: upright; }

/* ---------------- 読み物セクション ---------------- */
.lm-below { padding-top: 1.6rem; padding-bottom: 2rem; }
.lm-section { margin: 2.2rem 0; }
.lm-section > h2 {
  font-size: 1.12rem; color: var(--lm-text); margin: 0 0 1rem;
  padding-left: .6rem; border-left: 3px solid var(--lm-accent-line);
}
.lm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; }
.lm-grid article {
  background: #fff; border: 1px solid var(--lm-line); border-radius: 12px; padding: .95rem 1rem;
}
.lm-grid article > span {
  display: inline-block; font-size: .68rem; font-weight: 700; color: var(--lm-accent);
  background: var(--lm-accent-soft); border-radius: 999px; padding: .16rem .55rem; margin-bottom: .45rem;
}
.lm-grid article h3 { font-size: .92rem; color: var(--lm-text); margin: 0 0 .35rem; }
.lm-grid article p { font-size: .82rem; line-height: 1.75; color: var(--lm-sub); margin: 0; }

.lm-steps { list-style: none; counter-reset: lm 0; margin: 0; padding: 0; display: grid; gap: .55rem; }
.lm-steps li {
  counter-increment: lm; position: relative; padding: .8rem 1rem .8rem 3rem;
  background: #fff; border: 1px solid var(--lm-line); border-radius: 12px;
}
.lm-steps li::before {
  content: counter(lm); position: absolute; left: 1rem; top: .82rem;
  width: 1.5rem; height: 1.5rem; border-radius: 999px;
  background: var(--lm-accent-soft); color: var(--lm-accent);
  font-size: .78rem; font-weight: 700; display: grid; place-items: center;
}
.lm-steps strong { display: block; font-size: .9rem; color: var(--lm-text); margin-bottom: .2rem; }
.lm-steps span { font-size: .82rem; line-height: 1.75; color: var(--lm-sub); }

.lm-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .6rem; }
.lm-related a {
  display: block; background: #fff; border: 1px solid var(--lm-line); border-radius: 12px;
  padding: .8rem .9rem; text-decoration: none; transition: border-color .15s, transform .12s;
}
.lm-related a:hover { border-color: var(--lm-accent-line); transform: translateY(-1px); }
.lm-related strong { display: block; font-size: .87rem; color: var(--lm-text); margin-bottom: .2rem; }
.lm-related span { font-size: .76rem; color: var(--lm-sub); }

/* トースト */
.lm-toast {
  position: fixed; left: 50%; bottom: 2rem; transform: translateX(-50%);
  background: rgba(50, 44, 38, .93); color: #fff;
  font-size: .82rem; padding: .6rem 1.1rem; border-radius: 999px;
  z-index: 200; pointer-events: none;
}

/* モバイル用の下部ナビ（PCでは非表示） */
.lm-mobilenav { display: none; }

/* =========================================================
   レスポンシブ
   ========================================================= */
/* 3カラムが1行に並ぶ幅でだけ、画面内に収まるアプリ的レイアウトにする。
   --lm-shell はJSがビューポートから実測して入れる（PDF保存・印刷を常に見せるため）。
   3つとも同じ高さで1行目に並ぶので、stickyでも他の行へせり出さない。 */
@media (min-width: 1181px) {
  .lm-panel, .lm-assist {
    position: sticky; top: 62px;
    height: var(--lm-shell, 700px);
  }
  .lm-center { height: var(--lm-shell, 700px); }
  .lm-canvas { min-height: 0; }
}

/* 手紙アシストが2段目に落ちる幅。ここで左パネルをstickyにすると重なるので、
   素直に流し、代わりに主要アクションだけを画面下へ貼り付ける。 */
@media (max-width: 1180px) {
  .lm-workspace { grid-template-columns: minmax(230px, 27%) minmax(0, 1fr); }
  .lm-assist { grid-column: 1 / -1; }
  .lm-assist-scroll { flex-direction: row; overflow-x: auto; }
  .lm-assist-scroll > .lm-card { flex: 1 1 260px; min-width: 240px; }

  .lm-panel { overflow: visible; }
  .lm-panel-scroll { overflow: visible; }
  .lm-panel-actions {
    position: sticky; bottom: 0; z-index: 5;
    border-radius: 0 0 11px 11px;
  }
}

@media (max-width: 860px) {
  .lm-appbar-inner { padding: .5rem .8rem; }
  .lm-appbar-link { display: none; }
  .lm-brand p { display: none; }

  .lm-workspace { display: block; padding: 0 .7rem; margin-bottom: 4.4rem; }
  .lm-panel, .lm-assist, .lm-center { display: none; }
  .lm-workspace[data-pane="paper"] .lm-center { display: flex; }
  .lm-workspace[data-pane="settings"] .lm-panel { display: flex; }
  .lm-workspace[data-pane="assist"] .lm-assist { display: flex; }

  /* スマホでは画面内に押し込めず、素直に縦スクロールさせる。
     下部ナビがあるので主要アクションは貼り付けない */
  .lm-panel, .lm-assist, .lm-center { position: static; height: auto; }
  .lm-panel-actions { position: static; }
  .lm-assist-scroll { flex-direction: column; overflow-x: visible; }
  .lm-assist-scroll > .lm-card { min-width: 0; }

  .lm-canvas { min-height: 60vh; padding: 1rem .5rem; }
  .lm-docbar { flex-direction: column; gap: .4rem; }
  .lm-field { flex: 1 1 auto; }

  .lm-mobilenav {
    display: grid; grid-template-columns: repeat(3, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: #fff; border-top: 1px solid var(--lm-line);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .lm-mobilenav button {
    font-family: inherit; font-size: .68rem; color: var(--lm-sub);
    background: none; border: 0; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: .12rem;
    padding: .5rem 0 .45rem;
  }
  .lm-mobilenav button[aria-pressed="true"] { color: var(--lm-accent); font-weight: 600; }
}

/* =========================================================
   印刷：便箋だけを等倍で出す
   ========================================================= */
@media print {
  .navbar,
  .site-footer,
  .lm-appbar,
  .lm-panel,
  .lm-assist,
  .lm-center-top,
  .lm-docbar,
  .lm-zoombar,
  .lm-mobilenav,
  .lm-below,
  .lm-toast,
  .lm-measure,
  .lm-sheet-no,
  .lm-input,
  .tool-breadcrumb {
    display: none !important;
  }

  @page { margin: 0; }

  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  .lm-body main { padding: 0 !important; }

  .lm-workspace {
    display: block !important;
    max-width: none; margin: 0; padding: 0;
  }
  .lm-center { display: block !important; }

  .lm-canvas {
    background: #fff; border: 0; border-radius: 0;
    padding: 0; margin: 0; overflow: visible;
    max-height: none; min-height: 0; display: block;
  }

  /* 画面のズームは印刷に持ち込まない */
  .lm-stage {
    transform: none !important;
    position: static !important;
    display: block; gap: 0;
  }

  .lm-sheet {
    box-shadow: none !important;
    margin: 0 !important;
    break-inside: avoid; page-break-inside: avoid;
    break-after: page; page-break-after: always;
  }
  .lm-sheet:last-child { break-after: auto; page-break-after: auto; }
  .lm-sheet[data-editing="1"] { box-shadow: none !important; }

  /* 画面では現在ページだけを出しているが、印刷は全ページ出す */
  .lm-sheet[data-off="1"] { display: block !important; }
  .lm-stage-wrap { width: auto !important; height: auto !important; position: static; }

  /* 未入力欄の薄いガイド文は紙に出さない */
  .lm-ph { display: none !important; }
}