/* ============================================================
   月次 利用状況報告書ジェネレーター — スタイルシート
   ※ v0.57.0 のファイル分割で index.html の <style> から切り出したもの。
   　 中身は分割前とまったく同じ（1行も変更していない）。
   ============================================================ */
:root{--ink:#1f2a33;--soft:#52606d;--line:#dfe3e8;--bg:#f3f5f7;--paper:#fff;--accent:#2f6f7e;--accent2:#e7f0f2;--ok:#2a7a4f;--okbg:#e8f2ec;--err:#b83333;--warn:#9a5b1e;--warnbg:#fbf1e4}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;font-size:14px;line-height:1.7}
.wrap{max-width:980px;margin:0 auto;padding:24px 18px 80px}
h1{font-size:19px;margin:0 0 4px}
.apphead{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(180deg,#ffffff,#f1f6f7);border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin-bottom:8px}
.brand{font-size:16px;font-weight:600;color:var(--ink)}
.brand .logo{margin-right:7px;cursor:pointer}
.brand .logo:hover{opacity:.7}
.sub{font-size:12px;color:var(--soft);margin-bottom:18px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:18px 20px;margin-bottom:14px}
.card h2{font-size:14px;margin:0 0 12px;display:flex;align-items:center;gap:8px}
/* プレビュー操作欄：ページをスクロールしても印刷／保存が常に見える */
#step3 .step3-toolbar{
  position:sticky;
  top:0;
  z-index:40;
  background:var(--paper);
  margin:-18px -20px 12px;
  padding:14px 20px 12px;
  border-bottom:1px solid var(--line);
  box-shadow:0 4px 12px rgba(31,42,51,.06);
}
#step3 .step3-toolbar h2{margin-bottom:10px}
@media print{
  #step3 .step3-toolbar{position:static;margin:0;padding:0;border:none;box-shadow:none}
}
.badge{width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;font-size:11px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.btn{border:none;border-radius:8px;padding:9px 16px;font-size:13px;cursor:pointer;font-family:inherit;background:var(--accent);color:#fff}
.btn:disabled{opacity:.4;cursor:default}
.btn.ghost{background:#fff;color:var(--accent);border:1px solid var(--accent)}
.btn.sm{padding:5px 10px;font-size:12px}
.btn.today-weekday{background:var(--ok);border-color:var(--ok);color:#fff;font-weight:600}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cfgrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:#f8f9fa;border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:12px}
.cfgrow label{font-size:12px;color:var(--soft)}
.cfgrow select,.cfgrow input{border:1px solid var(--line);border-radius:6px;padding:6px 8px;font-family:inherit;font-size:12.5px}
#fileBtn{display:inline-block;background:var(--accent2);color:var(--accent);border:1.5px dashed var(--accent);border-radius:8px;padding:16px 28px;cursor:pointer;font-size:13px;text-align:center;user-select:none}
#fileInput{display:none}
.ucard{border:1px solid var(--line);border-radius:8px;margin-top:10px;overflow:visible}
.uhead{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#f8f9fa;border:1px solid var(--line);border-radius:8px 8px 0 0;border-bottom:1px solid var(--line);flex-wrap:wrap;gap:8px;position:sticky;top:0;z-index:28;box-shadow:0 2px 8px rgba(31,42,51,.06)}
.uhead-actions{display:flex;align-items:center;gap:6px;flex:none;flex-wrap:wrap}
.uname{font-weight:600;font-size:15px}
.stat{font-size:11px;border-radius:999px;padding:2px 9px;margin-left:6px}
.stat.ok{background:var(--okbg);color:var(--ok)}
.stat.warn{background:var(--warnbg);color:var(--warn)}
.stat.none{background:#eee;color:#888}
.ubody{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:14px}
@media(max-width:720px){.ubody{grid-template-columns:1fr}}
.field{margin-bottom:10px}
.field label{display:block;font-size:11.5px;color:var(--soft);margin-bottom:3px}
.field input,.field textarea{width:100%;border:1px solid var(--line);border-radius:7px;padding:7px 9px;font-family:inherit;font-size:13px;color:var(--ink);resize:vertical}
.field textarea{min-height:96px;line-height:1.65}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.counter{font-size:11px;text-align:right;margin-top:2px;color:var(--soft)}
.counter.over{color:var(--err);font-weight:600}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ref{background:#f8f9fa;border:1px solid #eee;border-radius:8px;padding:10px 12px;font-size:12px}
.ref h4{margin:0 0 5px;font-size:11.5px;color:var(--accent)}
.ref h4:not(:first-child){margin-top:8px}
.pill{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:999px;padding:1px 8px;margin:2px 2px 2px 0;font-size:11.5px}
.pill b{color:var(--accent)}
.rawbox{max-height:100px;overflow-y:auto;white-space:pre-wrap;color:var(--soft);font-size:11.5px;border-top:1px dashed var(--line);padding-top:6px;margin-top:4px;line-height:1.5}
.meta2{font-size:11.5px;color:var(--soft)}
.tabbar{display:flex;gap:6px;margin:12px 0 4px;border-bottom:1px solid var(--line)}
.tab{background:none;border:none;padding:8px 14px;font-size:13px;font-family:inherit;color:var(--soft);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}

/* 追加：ユーザータブUI用CSS */
.user-tabs-wrap { display: flex; overflow-x: auto; white-space: nowrap; border-bottom: 1px solid var(--line); margin-bottom: 12px; padding-bottom: 0; }
.user-tabs-wrap::-webkit-scrollbar { height: 6px; }
.user-tabs-wrap::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
.update-overlay{position:fixed;inset:0;background:rgba(31,42,51,.45);z-index:9999;display:flex;align-items:center;justify-content:center;padding:18px}
.update-modal{background:#fff;border-radius:12px;border:1px solid var(--line);max-width:420px;width:100%;padding:22px 22px 18px;box-shadow:0 12px 40px rgba(0,0,0,.18)}
.update-modal h3{margin:0 0 10px;font-size:16px;color:var(--ink)}
.update-modal p{margin:0 0 8px;font-size:13.5px;color:var(--soft);line-height:1.7}
.update-modal .ver-line{font-size:12px;color:var(--warn);margin:10px 0 16px}
.update-modal .row{justify-content:flex-end;gap:8px;margin-top:4px}
#appVer{cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px}
#appVer:hover{color:var(--accent)}
.changelog-modal{max-width:560px;max-height:min(78vh,640px);display:flex;flex-direction:column;padding-bottom:14px}
.changelog-modal .changelog-list{overflow-y:auto;margin:8px 0 12px;padding-right:4px;flex:1;min-height:0}
.changelog-item{border-top:1px solid var(--line);padding:10px 2px 8px}
.changelog-item:first-child{border-top:none;padding-top:2px}
.changelog-ver{font-size:13px;font-weight:700;color:var(--accent);margin:0 0 4px}
.changelog-item ul{margin:0;padding-left:1.15em;font-size:12.5px;color:var(--ink);line-height:1.65}
.changelog-item li{margin:2px 0}
.user-tab { display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px; font-size: 13px; cursor: pointer; border: 1px solid transparent; border-bottom: none; background: transparent; color: var(--soft); margin-right: 2px; border-radius: 6px 6px 0 0; }
.user-tab:hover { background: #f8f9fa; }
.user-tab.active { background: var(--paper); border-color: var(--line); border-bottom-color: var(--paper); margin-bottom: -1px; padding-bottom: 9px; font-weight: 600; color: var(--accent); }
.user-tab .st { font-size: 10px; border-radius: 999px; padding: 2px 6px; line-height: 1; }
.user-tab .st.ok { background: var(--okbg); color: var(--ok); }
.user-tab .st.warn { background: var(--warnbg); color: var(--warn); }
.user-tab .st.none { background: #eee; color: #888; }

.seltbl{width:100%;border-collapse:collapse;font-size:13px}
.seltbl th,.seltbl td{border:1px solid #e6e9ec;padding:6px 9px;text-align:left}
.seltbl th{background:#f8f9fa;font-size:11.5px;color:var(--soft)}
.seltbl tr:hover td{background:#fafbfc}
.seltbl .st-ok{color:var(--ok);font-weight:600}.seltbl .st-warn{color:var(--warn);font-weight:600}.seltbl .st-none{color:#aaa}
.doc{background:#fff;border:1px solid var(--line);border-radius:6px;padding:24px 28px;margin-bottom:14px;font-size:14px;font-family:"MS Mincho","MS明朝","Hiragino Mincho ProN","Noto Serif JP",serif}
.doc h3{font-size:15px;letter-spacing:.06em;margin:0;font-weight:600}
.doc .doc-frame{border:2px solid #333}
.doc .doc-frame > div:first-child{ margin-bottom: var(--block-gap-extra,0px); }
.doc .doc-frame > div:last-child{ margin-top: var(--block-gap-extra,0px); }
.doc table{width:100%;border-collapse:collapse;border-top:2px solid #333;border-bottom:2px solid #333}
/* 変更：.doc td padding拡大、.doc .bc line-height拡大 */
.doc td{border:1px solid #333;padding:12px 13px;vertical-align:middle}
.doc td:first-child{border-left:none}
.doc td:last-child{border-right:none}
.doc td.k{width:185px;background:#fff;font-size:12px;text-align:center}
.doc .bc{white-space:pre-wrap;line-height:1.75;min-height:4em;vertical-align:middle;padding:calc(12px + var(--row-pad-extra,0px)) 13px}
.doc .foot{margin-top:0;font-size:14px;color:var(--soft);line-height:1.55}

/* 追加：プレビューでの画面非表示＆印刷制御 */
.doc.hidden-on-screen { display: none; }
@media print{
  @page{ size:A4; margin:8mm 14mm; }
  body{background:#fff}
  .wrap{max-width:none;padding:0;margin:0}
  h1,.sub,#log,.apphead{display:none!important}
  .np{display:none!important}
  .card{display:none!important}
  #step3{display:block!important;border:none;padding:0;margin:0;background:none}
  .doc{page-break-after:always;break-after:page;page-break-inside:avoid;break-inside:avoid;border:none;border-radius:0;margin:0;padding:0;box-shadow:none;min-height:281mm;display:flex;flex-direction:column;justify-content:center}
  /* 🆕(v0.38.7) min-heightを265mm→281mmに変更（A4縦297mm − @page margin上下8mm×2 = 281mm）。
     v0.38.6で実機確認した結果、全員一律で「下の余白が上の余白より約16.5mm多い」という規則的なズレが
     発生した。原因はこの265mmという値が、すぐ下のcomputeFitFor()用の安全マージン値PRINT_TARGET_HEIGHT_MM
     (縮小するかどうかを判定するための、Letter用紙等も想定した控えめな値)をそのまま中央寄せの箱の高さに
     も使っていたため、実際に印刷できる281mm全体ではなく265mmの箱の中だけで中央寄せされ、281-265=16mm分
     がそのまま下に残っていたこと（実測の16.5mmとほぼ一致）。
     PRINT_TARGET_HEIGHT_MM（縮小・拡大の判定用）はそのまま265mmで変更しない。今回変えたのは、あくまで
     「中央寄せ用の箱の高さ」だけ。縮小(fit-shrink)時はheight:265mm!importantで個別に固定されており、
     このmin-height変更の影響を受けない（従来通り変更なし）。 */
  .doc:last-child{page-break-after:auto;break-after:auto}
  /* 印刷時はヘッダーロゴをA4に収まるサイズへ制限（はみ出し防止） */
  .doc .doc-frame > div:first-child img{ max-width:450px!important; }
  .doc td{ padding:9px 12px!important; }
  .doc .bc{ line-height:1.65!important; min-height:0!important; padding:calc(9px + var(--row-pad-extra,0px)) 12px!important; }
  
  /* 追加：印刷時は全員表示、タブ非表示、居宅ごとの改ページ制御 */
  .doc.hidden-on-screen { display: flex !important; }
  .preview-tabs-wrap, .preview-nav-wrap { display: none !important; }
  .doc.group-start { page-break-before: always; }

  /* 🆕(v0.38.6) 上下中央寄せの4回目の再挑戦。これまでの3回の失敗（①v0.36.2以前のflex／②v0.38.3のJS
     margin-top計算／③v0.38.4のposition:absolute）の原因は、(a)JSがサンドボックス(.print-sim)で計測した
     値を使う方式は実際の印刷結果と食い違うことがある（②の失敗原因）、(b)position:absolute中央寄せを
     「縮小しない通常ケース」にまで適用してしまい、わずかな計測ズレが内容の物理的な欠落に直結した（③の
     失敗原因）、(c)transform:scaleはflexの占有サイズを変えないため、縮小(fit-shrink)時だけ中央寄せの
     計算が狂う（①が縮小ケースで失敗した原因、v0.36.2で判明済み）の3点に整理できる。
     v0.38.6では、このいずれにも該当しない形で①のflex方式を限定的に復活させる：
     ・.doc は display:flex; flex-direction:column; justify-content:center に変更（直前の.docルールで設定済み）。
       JSでの高さ計測・margin-top計算を一切使わない純粋CSSの方式のため、(a)(b)の問題が原理的に発生しない。
     ・.docはheight:265mmではなくmin-height:265mmのまま（overflow:hiddenも設定しない）。これにより、
       内容が想定より長い場合でも欠けずにそのまま縦に伸びるだけになる（v0.38.5の安全性をそのまま継承）。
     ・縮小(fit-shrink)時は(c)の再発を防ぐため、下記の .doc.fit-shrink／.doc-frame.fit-shrink で
       display:block!importantを明示し、flexによる中央寄せの対象から完全に除外する。height:265mm!important
       +overflow:hidden+transform:scale(top center)という縮小時の挙動そのものはv0.38.5から一切変更していない。
     ※とはいえ「サンドボックス計測と実際の印刷結果がズレる」という過去の教訓がある以上、実機での印刷確認
       （特に複数名・複数ページの一括印刷、および縮小ケースとの混在）は必須。 */
  .doc .doc-frame{ position:static; }
  .doc.fit-shrink{ display:block!important; height:265mm!important; overflow:hidden; }
  .doc-frame.fit-shrink{ display:block!important; transform:scale(var(--fit-scale,1)); transform-origin:top center; }
}

/* 追加（v0.24.0）：上の自動調整の「事前計測」用（画面には表示されない隠しサンドボックスにだけ適用）。
   ★重要：ここの値は必ず上の @media print 内の .doc td／.doc .bc／ヘッダー画像max-width／
   ヘッダー直後とフッター手前の余白(--block-gap-extra用マージンルール)と同じ値に揃えること。
   ズレると「収まる/収まらない」の判定がずれて、自動調整の精度が落ちる。 */
.print-sim{ position:absolute; left:-99999px; top:0; visibility:hidden; pointer-events:none; font-family:"MS Mincho","MS明朝","Hiragino Mincho ProN","Noto Serif JP",serif; font-size:14px; }
.print-sim h3{ font-size:15px; letter-spacing:.06em; margin:0; font-weight:600; }
.print-sim .doc-frame{ border:2px solid #333; }
.print-sim .doc-frame > div:first-child{ margin-bottom: var(--block-gap-extra,0px); }
.print-sim .doc-frame > div:last-child{ margin-top: var(--block-gap-extra,0px); }
.print-sim table{ width:100%; border-collapse:collapse; border-top:2px solid #333; border-bottom:2px solid #333; }
.print-sim td{ border:1px solid #333; padding:9px 12px; vertical-align:middle; }
.print-sim td.k{ width:185px; background:#fff; font-size:12px; text-align:center; }
.print-sim .bc{ white-space:pre-wrap; line-height:1.65; min-height:0; vertical-align:middle; padding:calc(9px + var(--row-pad-extra,0px)) 12px; }
.print-sim .foot{ margin-top:0; font-size:14px; color:var(--soft); line-height:1.55; }
.print-sim .doc-frame > div:first-child img{ max-width:450px; }