/* v3 紙面（.sheet）CSS。data\spec\output_sample_wakaba3.html の <style> をそのまま流用し、
   #paper-output 配下に閉じ込めるためにセレクタをスコープしただけ（ルール自体は変えていない）。
   @page と @media print は文書全体に効くため、スコープできず元のまま。 */

@page { size: A4 portrait; margin: 13mm 16mm 10mm; }

#paper-output{
  --ink:#111; --hair:#b8b8b8; --soft:#5a5a5a;
  --tint:#f2f2f2; --tint2:#e4e4e4;
  --fs:11pt; --lh:1.78; --gap:4.0mm;
  --indent:12.5mm;          /* 本文カラムの左位置。見出しもここに揃える */
  --measure:164mm;          /* 本文の行長 */
  background:#e9e9e9; padding:12px 0;
  font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","MS PMincho",serif;
  color:var(--ink); font-size:var(--fs); line-height:var(--lh);
}
#paper-output .gothic{ font-family:"Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN","Meiryo",sans-serif; }

/* .sheet-wrap が表示用の縮小（transform:scale、app.js が算出）を受け持つ。
   .sheet 自体は常にA4実寸（210mm）で組んでおく（mm単位の内部レイアウトを崩さないため）。
   拡大率は app.js 側で左右余白ぶんを引いた幅を基準に算出し、center top起点で縮めることで
   その余白のぶんだけ左右均等に背面グレーが見える（紙が「置かれている」見え方・作業22）。 */
#paper-output .sheet-wrap{
  width:100%; max-width:210mm; margin:0 auto 24px; overflow:hidden;
}
#paper-output .sheet-wrap:last-child{ margin-bottom:0; }
#paper-output .sheet{
  width:210mm; box-sizing:border-box; padding:15mm 16mm 14mm;
  background:#fff; box-shadow:3px 4px 12px rgba(0,0,0,.18);
  border:1px solid #d8d8d8;
  font-size:var(--fs); line-height:var(--lh);
  transform-origin:top left;
}
/* 画面表示は中身なりの高さにする（正本の260mm固定は印刷プレビュー専用の指定だった）。
   印刷時は @media print 側で改めて min-height:0 にしている。 */
#paper-output .page-body{ min-height:0; }

/* 日本語の両端揃え。行末の凸凹と、1〜2字だけの行を減らす */
#paper-output .just{ text-align:justify; text-justify:inter-ideograph; line-break:strict; }

/* ══ 位置表示の枠（1行目。ここだけ左端に出す） ══ */
#paper-output .doc-head{ border-bottom:2.5px solid var(--ink); padding-bottom:2mm; margin-bottom:var(--gap); display:flex; align-items:flex-start; justify-content:space-between; gap:6mm; }
#paper-output .head-left{ flex:1 1 auto; min-width:0; }
#paper-output .locator{
  flex:0 0 auto; border:1.5px solid var(--ink); background:var(--tint);
  padding:1.2mm 2.6mm 1.4mm; margin:0; text-align:center;
}
#paper-output .locator .idline{ display:flex; align-items:center; gap:2mm; justify-content:center; }
#paper-output .locator .role{ font-size:calc(var(--fs)*.9); font-weight:700; letter-spacing:.18em; margin:0.5mm 0; }
#paper-output .locator .num{
  background:var(--ink); color:#fff; font-weight:700;
  font-size:calc(var(--fs)*.95); line-height:1.45; padding:0.2mm 2mm;
}
#paper-output .locator .name{ font-size:calc(var(--fs)*.95); font-weight:700; letter-spacing:.06em; }
#paper-output .locator .bar{ width:1px; height:calc(var(--fs)*1.1); background:var(--hair); }
#paper-output .locator .role{ font-size:calc(var(--fs)*.95); font-weight:700; letter-spacing:.18em; }
#paper-output .pagemap{ display:flex; gap:0; margin:0; font-size:calc(var(--fs)*.74); }
#paper-output .pagemap span{
  border:0.6px solid var(--hair); border-right:0; background:#fff;
  padding:0.3mm 2mm; color:var(--soft); letter-spacing:.08em; white-space:nowrap;
}
#paper-output .pagemap span:last-child{ border-right:0.6px solid var(--hair); }
#paper-output .pagemap span.on{ background:var(--ink); color:#fff; border-color:var(--ink); font-weight:700; }

/* ══ 2行目以降はインデントして、1行目の枠を立たせる ══ */
#paper-output .doc-title{
  font-size:calc(var(--fs)*1.6); font-weight:700; line-height:1.25;
  margin:0 0 1mm;
}
#paper-output .doc-meta{
  font-size:calc(var(--fs)*.84); color:var(--soft); line-height:1.5;
  margin:0;
}

#paper-output .sec{ position:relative; padding-left:12.5mm; margin:0 0 var(--gap); }
#paper-output .sec-no{ position:absolute; left:0; top:1mm; background:var(--ink); color:#fff;
         font-size:calc(var(--fs)*.82); font-weight:700; line-height:1.5; padding:0.2mm 1.6mm; }
#paper-output .sec-main{ max-width:var(--measure); }
#paper-output .sec-title{ font-size:calc(var(--fs)*1.12); font-weight:700; margin:0 0 1mm; line-height:1.35; }

#paper-output .line{ margin:0 0 0.4mm; }
#paper-output .line.gap{ margin-bottom:1.8mm; }
#paper-output .lede{ font-size:calc(var(--fs)*1.06); font-weight:700; }
#paper-output strong{ font-weight:700; }

#paper-output table{ width:100%; border-collapse:collapse; font-size:calc(var(--fs)*.92); line-height:1.45; }
#paper-output th,#paper-output td{ border:0.6px solid var(--hair); padding:1.1mm 2mm; vertical-align:middle; text-align:left; }
/* 列幅は colgroup（app.js が出力）で固定する。項目名30mm／値22mm×3セット＝156mm、
   .sec-main の164mm以内に収まる（作業20・2026-08-14）。 */
#paper-output .facts{ table-layout:fixed; width:156mm; }
#paper-output .facts th{ background:#f5f5f5; font-weight:400; white-space:nowrap; color:var(--soft);
           font-size:calc(var(--fs)*.88); overflow:hidden; text-overflow:ellipsis; }
#paper-output .facts td{ font-weight:700; }

#paper-output .scale{ display:inline-flex; align-items:center; gap:1.2mm; margin-left:2.5mm; vertical-align:middle; }
#paper-output .scale i{
  font-style:normal; font-family:"Yu Gothic","Meiryo",sans-serif;
  width:4.2mm; height:4.2mm; line-height:4.2mm; text-align:center;
  border:0.6px solid var(--hair); font-size:calc(var(--fs)*.66);
  color:var(--soft); font-weight:400;
}
#paper-output .scale i.on{ background:var(--ink); color:#fff; border-color:var(--ink); font-weight:700; }
#paper-output .scale em{
  font-style:normal; font-size:calc(var(--fs)*.66); color:var(--soft);
  font-family:"Yu Gothic","Meiryo",sans-serif; margin-left:1mm; white-space:nowrap;
}

#paper-output .plans{ border-top:1.2px solid var(--ink); border-bottom:1.2px solid var(--ink); }
#paper-output .plans thead th{ background:var(--tint2); border-top:0; border-bottom:0.8px solid var(--ink);
                 font-size:calc(var(--fs)*.85); font-weight:700; color:var(--soft); white-space:nowrap; }
#paper-output .plans td:first-child,#paper-output .plans th:first-child{ width:6mm; text-align:center; }
#paper-output .plans td:first-child{ font-weight:700; background:var(--tint); }
#paper-output .plans .c-cost{ width:34mm; } #paper-output .plans .c-base{ width:34mm; }

#paper-output a.src{ color:#0b4f9e; text-decoration:underline; text-underline-offset:2px; }
#paper-output a.src::after{ content:" ↗"; font-size:.8em; }

#paper-output ul.points{ margin:1.2mm 0 0; padding-left:4.5mm; }
#paper-output ul.points li{ margin:0 0 0.6mm; }

#paper-output .note{ font-size:calc(var(--fs)*.85); line-height:1.6; color:var(--soft); margin:1.2mm 0 0; }
#paper-output .note p{ margin:0; }
#paper-output .moved-tag{ font-size:calc(var(--fs)*.82); color:var(--soft); letter-spacing:.1em; margin:0 0 1mm; }

#paper-output .request{ border:1.2px solid var(--ink); padding:2.4mm 3mm; margin-top:1.8mm; }
#paper-output .request-label{ font-size:calc(var(--fs)*.82); letter-spacing:.2em; color:var(--soft); margin:0 0 1mm; }
#paper-output .request p{ margin:0; }

#paper-output ol.steps{ margin:0; padding-left:5mm; }
#paper-output ol.steps li{ margin:0 0 0.6mm; }
#paper-output .callout{ border-left:3px solid var(--ink); padding-left:3mm; }

#paper-output .doc-foot{
  margin-top:2.5mm; border-top:0.6px solid var(--hair); padding-top:1mm;
  font-size:9pt; color:var(--soft); display:flex; justify-content:space-between;
}

#fitbadge{
  position:fixed; top:8px; right:8px; z-index:99;
  background:#111; color:#fff; font:11.5px/1.6 sans-serif;
  padding:9px 11px; border-radius:4px; max-width:330px; max-height:80vh; overflow:auto;
}
#fitbadge b{ color:#7ee787; }
#fitbadge .warn{ color:#ffa657; }
#fitbadge .bad{ color:#ff7b72; font-weight:700; }
#fitbadge .row{ border-top:1px solid #444; padding-top:5px; margin-top:5px; }

/* グレーの地色を印刷でも残す（印刷ダイアログの「背景のグラフィック」に依存させない） */
#paper-output .locator, #paper-output .plans thead th, #paper-output .plans td:first-child,
#paper-output .facts th, #paper-output .scale i.on, #paper-output .sec-no,
#paper-output .locator .num, #paper-output .pagemap span, #paper-output .pagemap span.on{
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}

@media print{
  html,body{ background:#fff; }
  #paper-output{ background:#fff; padding:0; }
  /* 画面用の紙面確保（260mm）はフッタを足すと版面(268mm)に届いてしまい、
     1mmでも超えると空白ページが1枚生まれる。印刷時だけ余裕をとる */
  #paper-output .page-body{ min-height:0; }
  /* 画面表示用の縮小（app.js がJSで設定するtransformとsheet-wrapの高さ）は印刷では使わない */
  #paper-output .sheet-wrap{ width:auto !important; max-width:none; margin:0; overflow:visible; height:auto !important; }
  #paper-output .sheet{ transform:none !important; }
  #paper-output .sheet{ break-inside:avoid; page-break-inside:avoid; }
  #paper-output .sheet{ width:auto; margin:0; padding:0; box-shadow:none; border:none; page-break-after:always; }
  #paper-output .sheet:last-child{ page-break-after:auto; }
  #paper-output .sec, #paper-output table, #paper-output .request{ break-inside:avoid; page-break-inside:avoid; }
  #paper-output a.src{ color:var(--ink); text-decoration:none; }
  #paper-output a.src::after{ content:""; }
  #fitbadge{ display:none !important; }
}
#paper-output .legend{ font-size:calc(var(--fs)*.8); font-weight:400; color:var(--soft); white-space:nowrap; }
#paper-output .legend i{ font-style:normal; display:inline-block; width:4.4mm; height:4.4mm; line-height:4.4mm;
           text-align:center; border:0.6px solid var(--hair); margin:0 0.3mm; }
#paper-output .plan-label{ font-weight:700; border-bottom:0.6px solid var(--hair); padding-bottom:0.8mm; margin-bottom:1.2mm; }
#paper-output .facts td.rk{ font-size:calc(var(--fs)*1.15); font-weight:700; text-align:center; white-space:nowrap; }
#paper-output .facts td{ white-space:normal; overflow:visible; text-overflow:clip; word-break:break-word; text-wrap:balance; }
#paper-output .facts th{ white-space:normal; overflow:visible; text-overflow:clip; text-wrap:balance; }
#paper-output .qa{ margin:0 0 2.4mm; }
#paper-output .qa h4{ font-size:calc(var(--fs)*1.02); font-weight:700; margin:0 0 0.6mm;
        border-bottom:0.6px solid var(--hair); padding-bottom:0.6mm; }
#paper-output .qa .ask{ border:0.8px solid var(--hair); background:var(--tint); padding:1.2mm 2mm; margin:0.8mm 0 0; }
#paper-output .plans .c-cost{ width:34mm; text-align:center; }
#paper-output .plans .c-base{ width:34mm; }
#paper-output .plans td:last-child{ white-space:nowrap; }
#paper-output .checks .c-kind{ width:17mm; } #paper-output .checks .c-app{ width:19mm; } #paper-output .checks .c-where{ width:34mm; }
#paper-output .checks2 .c-base2{ width:70mm; }
#paper-output .why .c-why{ width:46mm; }
#paper-output .why td{ font-size:calc(var(--fs)*.92); }