/* あつらえシフト LP 第2版: 画面片の部品（figures.js と対）
   寸法・色は製品（css/app.css の .sgrid / .scell / .rowhead / .colhead / .agg-* / .prio-* /
   .pill-* / .viol-badge、js/ui-wish.js の入力行、js/report.js の様式）から写した実測値。
   15px未満は製品再現の中だけ（記号13 / 日付13 / 曜日10 / 氏名12.5 / 集計11.5 / 判定の印12）。
   それ以外のLP側の文字は16px・本文色 #4c4c4c。 */

.rfig {
  font-family: "BIZ UDPGothic", sans-serif;
  color: #4c4c4c;
  font-size: 16px;
  line-height: 1.8;
  width: 100%;
  max-width: 100%;
}

/* ---- 横スクロール枠（高さ上限なし＝内側に縦スクロールを作らない） ---- */
.rfig .fig-scroll { overflow-x: auto; background: #fff; }
.rfig .fig-gap { height: 20px; }

/* ---- 枠は「製品でその部品がカードに入っているか」で決める ----
   入っている: 判定パネル・希望入力・優先度 → .fig-card で1px枠
   入っていない: 勤務表の切り出し（Excel比較・違反マス・直す前後・様式の右下）
                → 枠を付けず表自身の罫線で終わらせる（切り抜きは切り抜きに見せる）
   製品に無いLP側の一覧（決まりごとの表）も枠に入れない＝比較表（.cmp-table）と同じ様式 */
.rfig .fig-card { border: 1px solid #e2e8ee; border-radius: 6px; background: #fff; }

/* ---- 上下で見比べる2枚の列幅をそろえる（colgroup と対・D-63） ---- */
.rfig .fig-fixed { table-layout: fixed; }

/* ---- 違反の内訳の1行 ----
   これはLPの注釈ではなく製品の部品（違反一覧の1行＝css/app.css の .viol-item）。
   キャプション（本文16px・#4c4c4c）と取り違えないよう、製品の値そのままで描く。 */
.rfig .fig-viol { margin: 12px 0 0; }
.rfig .fig-viol .viol-item-txt {
  display: inline-block;
  background: #f4f6f8; border-radius: 8px; padding: 5px 10px;
  font-size: 12.5px; line-height: 1.55; color: #6b6b6b;
}
.rfig .fig-viol b { color: #4c4c4c; font-weight: 800; margin-right: 1px; }

/* 上下2枚を1つの枠に入れた図では、キャプションと違反の内訳も枠の中にある。
   横へスクロールしても読めるよう左端に貼り付ける。 */
.rfig .fig-scroll > .cap,
.rfig .fig-scroll > .fig-viol { position: sticky; left: 0; }
.rfig .fig-scroll > .cap { margin: 12px 0 28px; font-size: 16px; color: #4c4c4c; }
.rfig .fig-scroll > .cap:last-child { margin-bottom: 0; }

/* =========================================================
   1. 製品のシフト表（.sgrid / .scell / .rowhead / .colhead / .agg-*）
   ========================================================= */
.rfig .fig-sgrid { border-collapse: separate; border-spacing: 0; font-size: 12px; }
.rfig .fig-sgrid th,
.rfig .fig-sgrid td {
  border-right: 1px solid #edf1f5;
  border-bottom: 1px solid #edf1f5;
  padding: 0;
  background-color: #fff;
}
.rfig .fig-sgrid thead th { background: #e8f4ea; box-shadow: inset 0 -1.5px 0 #e2e8ee; }

/* 日付ヘッダ（曜日10px＋日付13px の2段） */
.rfig .fig-sgrid .colhead { min-width: 40px; width: 40px; text-align: center; padding: 3px 0 2px; line-height: 1.2; }
.rfig .fig-sgrid .colhead .dw { display: block; font-size: 10px; font-weight: 700; color: #9a9a9a; }
.rfig .fig-sgrid .colhead .dd { display: block; font-size: 13px; font-weight: 800; color: #6b6b6b; }
.rfig .fig-sgrid .colhead.sat .dd, .rfig .fig-sgrid .colhead.sat .dw { color: #2563eb; }
.rfig .fig-sgrid .colhead.sun .dd, .rfig .fig-sgrid .colhead.sun .dw { color: #d83a3a; }

/* 土日の列色 */
.rfig .fig-sgrid .colhead.sat, .rfig .fig-sgrid td.scell.sat, .rfig .fig-sgrid td.agg-cell.sat { background-color: #e9f1fb; }
.rfig .fig-sgrid .colhead.sun, .rfig .fig-sgrid td.scell.sun, .rfig .fig-sgrid td.agg-cell.sun { background-color: #fcebee; }
.rfig .fig-sgrid tbody tr > td.scell.sat { background-color: #e9f1fb; }
.rfig .fig-sgrid tbody tr > td.scell.sun { background-color: #fcebee; }

/* 職員名列 */
.rfig .fig-sgrid .rowhead {
  min-width: 140px; max-width: 180px; padding: 2px 10px;
  font-size: 12.5px; font-weight: 600; text-align: left; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 列幅固定のときは colgroup の値を使う（上のExcel風の表と同じ160px） */
.rfig .fig-sgrid.fig-fixed .rowhead { min-width: 0; max-width: none; }

/* マス */
.rfig .fig-sgrid .scell { min-width: 40px; height: 28px; text-align: center; vertical-align: middle; position: relative; }
.rfig .fig-sgrid .scell .mark { display: inline-block; padding: 0 2px; font-size: 13px; font-weight: 800; line-height: 1.2; }
.rfig .fig-sgrid .sym-work { color: #1f2933; }
.rfig .fig-sgrid .sym-rest { color: #c0392b; }

/* 1行おきの縞 */
.rfig .fig-sgrid tbody tr.zebra > td, .rfig .fig-sgrid tbody tr.zebra > .rowhead { background: #eef3f0; }

/* 違反のマス（製品 .scell.violation＝地色＋内側2pxの赤枠） */
.rfig .fig-sgrid tbody tr > td.scell.violation { background-color: #fdecec; }
.rfig .fig-sgrid .scell.violation::after {
  content: ""; position: absolute; inset: 2px;
  border: 1.8px solid #d83a3a; border-radius: 8px; pointer-events: none;
}

/* 日別集計行 */
.rfig .fig-sgrid .agg-label {
  background: #fbfcfd; color: #4f9a5b; padding: 2px 10px;
  font-size: 11.5px; font-weight: 800; text-align: left; white-space: nowrap;
}
.rfig .fig-sgrid .agg-cell {
  text-align: center; font-size: 11.5px; padding: 2px 0; min-width: 40px;
  background: #fbfcfd; font-weight: 700; color: #6b6b6b;
}
.rfig .fig-sgrid .agg-cell.agg-short { color: #d83a3a; }
.rfig .fig-sgrid .agg-cell.agg-short::before { content: "▲"; font-size: 8px; margin-right: 1px; }
.rfig .fig-sgrid .agg-cell.agg-over { color: #b45309; }
.rfig .fig-sgrid .agg-cell.agg-over::before { content: "●"; font-size: 7px; margin-right: 1px; }

/* =========================================================
   2. 細い黒罫線の表（手で組んだ勤務表 .fig-hand ／ 勤務形態一覧表の右下 .fig-xl）
   ========================================================= */
/* 罫線の持ち方は製品の表（.fig-sgrid）とそろえる＝各セルの右下＋表の左上を内側に1本。
   border-collapse:collapse だと隣り合う罫線を分け合って列の左端が半pxずれ、
   上下に並べた製品の表と段差になる（D-63）ので separate ＋ border-spacing:0 で描く。 */
.rfig .fig-hand,
.rfig .fig-xl {
  border-collapse: separate; border-spacing: 0;
  box-shadow: inset 1px 1px 0 #333;
  background: #fff; color: #1f2933;
}
.rfig .fig-hand th, .rfig .fig-hand td,
.rfig .fig-xl th, .rfig .fig-xl td {
  border-right: 1px solid #333; border-bottom: 1px solid #333; padding: 0 2px;
  min-width: 40px; text-align: center; vertical-align: middle;
  font-weight: 400; line-height: 1.3; white-space: nowrap;
}
.rfig .fig-hand .xl-name,
.rfig .fig-xl .xl-name { min-width: 140px; width: 140px; text-align: left; padding: 0 8px; }
/* 列幅固定のときは colgroup の値を使う＝製品の職員名列と同じ左右余白（10px）にそろえる */
.rfig .fig-hand.fig-fixed .xl-name { min-width: 0; width: auto; padding: 0 10px; }

/* 手で組んだ勤務表＝製品の再現ではない。文字は本文と同じ大きさ・見出しは白地。
   曜日も本文と同じ色（土日だけ青・赤）にする。 */
.rfig .fig-hand { font-size: 15px; }
.rfig .fig-hand th, .rfig .fig-hand td { height: 32px; }
.rfig .fig-hand thead th { background: #fff; font-weight: 700; }
.rfig .fig-hand .xl-dw { font-size: 15px; color: #1f2933; }
.rfig .fig-hand .xl-dw.sat { color: #2563eb; }
.rfig .fig-hand .xl-dw.sun { color: #d83a3a; }

/* 勤務形態一覧表（参考様式1）の右下＝製品が出すExcelそのものの再現。
   実物は7〜8ptの表（js/report.js の put() が日付・シフト記号・勤務時間を f:{size:8} で書く）だが、
   画面では表の中の文字を1つの大きさ（13px）にそろえる＝薄い灰色の小さい字を作らない（D-08）。
   日付の色は製品が書き出す色そのまま＝平日 FF000000／土 FF0050B0／日・祝 FFC00000
   （js/report.js: put(ws,14,...) の f.color.argb）。 */
.rfig .fig-xl { font-size: 13px; }
.rfig .fig-xl th, .rfig .fig-xl td { height: 28px; }
.rfig .fig-xl thead th { background: #f2f2f2; font-weight: 700; }
.rfig .fig-xl .xl-dw { font-size: 13px; color: #1f2933; }
.rfig .fig-xl .xl-dw.sat { color: #0050b0; }
.rfig .fig-xl .xl-dw.sun { color: #c00000; }
.rfig .fig-form .xl-w { min-width: 52px; width: 52px; }
.rfig .fig-form .xl-w2 { min-width: 84px; width: 84px; white-space: normal; padding: 2px 4px; }
.rfig .fig-form .xl-week { background: #f2f2f2; font-size: 13px; font-weight: 400; }
.rfig .fig-form .xl-rl { background: #f2f2f2; min-width: 92px; width: 92px; font-size: 13px; font-weight: 400; }
.rfig .fig-form .xl-mid { vertical-align: middle; }
.rfig .fig-form .num { font-variant-numeric: tabular-nums; }

/* =========================================================
   3. 決まりごとの表
   ========================================================= */
/* 罫線・余白・列幅は「手で組むのと、何が違うか」の比較表（lp.css の .cmp-table）と同じ＝
   同じ役割の表で様式を割らない（D-21）。 */
.rfig .fig-rules { width: 100%; border-collapse: collapse; background: #fff; }
.rfig .fig-rules th, .rfig .fig-rules td {
  border-bottom: 1px solid #e7e4dc; padding: 14px 20px;
  font-size: 16px; line-height: 1.7; text-align: left; vertical-align: top; color: #4c4c4c;
}
.rfig .fig-rules th:first-child,
.rfig .fig-rules td:first-child { padding-left: 0; width: 22%; }
.rfig .fig-rules th:last-child,
.rfig .fig-rules td:last-child { padding-right: 0; }
.rfig .fig-rules thead th { font-weight: 700; color: #3a4a40; }
.rfig .fig-rules tbody th { font-weight: 700; color: #3a4a40; }

/* =========================================================
   4. 希望入力の画面片（js/ui-wish.js の入力行の実測値）
   ========================================================= */
.rfig .fig-wish { background: #fff; padding: 8px 14px; }
.rfig .fig-wish .wp-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 4px; border-bottom: 1px solid #eef1f4;
}
.rfig .fig-wish .wp-row:last-child { border-bottom: none; }
.rfig .fig-wish .wp-date { width: 86px; flex: 0 0 86px; font-size: 13.5px; font-weight: 700; }
.rfig .fig-wish .wp-date.wp-sun { color: #d13030; }
.rfig .fig-wish .wp-date.wp-sat { color: #2b6cd4; }
/* 画面片は静止画＝開いても何も起きない選択欄は触らせない（見た目は製品のまま・D-20） */
.rfig .fig-wish .wp-sel {
  flex: 1; min-width: 0; max-width: 280px;
  padding: 7px 8px; border: 1.5px solid #d6dde3; border-radius: 8px;
  font-family: inherit; font-size: 13.5px; color: #4c4c4c; background: #fff;
  pointer-events: none;
}

/* =========================================================
   5. 自動作成条件の優先度（製品 .prio-head / .prio-item）
   ========================================================= */
.rfig .fig-prio { background: #fff; padding: 14px; }
.rfig .fig-prio .prio-head,
.rfig .fig-prio .prio-item {
  display: grid;
  grid-template-columns: 24px 56px 44px minmax(0, 3fr) minmax(96px, 1fr);
  align-items: center; gap: 8px;
}
.rfig .fig-prio .prio-head { padding: 0 10px 6px; font-size: 12.5px; font-weight: 700; color: #4c4c4c; }
.rfig .fig-prio .prio-item {
  background: #fff; border: 1px solid #e2e8ee; border-radius: 10px;
  padding: 6px 10px; margin-bottom: 8px; font-size: 13px; font-weight: 700;
}
.rfig .fig-prio .drag-h { color: #9a9a9a; font-size: 15px; }
.rfig .fig-prio .prio-band { font-size: 12.5px; font-weight: 700; color: #6b6b6b; white-space: nowrap; }
.rfig .fig-prio .prio-no {
  justify-self: start; background: #e8f4ea; color: #4f9a5b;
  border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-weight: 800;
}
.rfig .fig-prio .prio-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rfig .fig-prio .prio-none { color: #9a9a9a; }
.rfig .fig-prio .viol-badge {
  display: inline-block; min-width: 44px; text-align: center;
  font-size: 12px; font-weight: 800; border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.rfig .fig-prio .viol-badge.hard { background: #fdecec; color: #d83a3a; }
.rfig .fig-prio .fig-prio-foot { margin-top: 14px; }
/* 押せるボタンではなく「製品のボタンの絵」＝ホバーもカーソルの変化も付けない（D-20） */
.rfig .fig-prio .fig-btn-primary {
  display: inline-block;
  background: #67b371; color: #fff; border: 1px solid transparent; border-radius: 10px;
  padding: 9px 18px; font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.4;
}

/* =========================================================
   6. 加算・人員基準の判定パネル（製品 .tbl / .kijun-grp / .kijun-calc / .pill-*）
   ========================================================= */
/* 製品の一覧は .tbl＝見出し行が淡緑地12.5px・本文14px。列幅は js/ui-check.js の th の style。 */
.rfig .fig-judge { width: 100%; min-width: 860px; border-collapse: collapse; background: #fff; }
.rfig .fig-judge th, .rfig .fig-judge td {
  text-align: left; vertical-align: middle; color: #4c4c4c;
}
.rfig .fig-judge thead th {
  background: #e8f4ea; color: #4c4c4c; font-size: 12.5px; font-weight: 700;
  padding: 11px 16px; border-bottom: 1.5px solid #e2e8ee; white-space: nowrap;
}
.rfig .fig-judge tbody td { padding: 13px 16px; font-size: 14px; line-height: 1.6; border-bottom: 1px solid #edf1f5; }
.rfig .fig-judge thead th:nth-child(1) { width: 230px; }
.rfig .fig-judge thead th:nth-child(2) { width: 190px; }
.rfig .fig-judge thead th:nth-child(3) { width: 150px; }
.rfig .fig-judge thead th:nth-child(5) { width: 120px; }
/* 機能カテゴリの小見出し行（製品 .kijun-grp） */
.rfig .fig-judge .kijun-grp td {
  background: #edf1f5; color: #6b6b6b; font-weight: 800; font-size: 11.5px;
  letter-spacing: .04em; padding-top: 7px; padding-bottom: 7px;
}
/* 判定できない理由（製品 .hint） */
.rfig .fig-judge .judge-reason { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.7; color: #9a9a9a; }
/* 「いまの計算結果」＝製品と同じく右寄せ・太字。基準を満たさない値は赤字（製品 .kijun-calc / .ng-val） */
.rfig .fig-judge thead th.judge-calc { text-align: right; }
.rfig .fig-judge td.judge-calc { text-align: right; font-weight: 800; }
.rfig .fig-judge td.judge-calc.ng-val { color: #d83a3a; }
.rfig .fig-judge .judge-pill { white-space: nowrap; }
.rfig .fig-judge .pill {
  display: inline-block; border-radius: 999px; padding: 3px 11px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.rfig .fig-judge .pill-ok { background: #e7f6ec; color: #1a8b46; }
.rfig .fig-judge .pill-ng { background: #fdecec; color: #d83a3a; }
.rfig .fig-judge .pill-gray { background: #edf1f5; color: #6b6b6b; }
.rfig .fig-judge tbody tr:last-child th, .rfig .fig-judge tbody tr:last-child td { border-bottom: none; }

/* 優先度パネルのスマホ幅（製品 css/app.css の @media(max-width:520px) と同じ2段組み）。
   5列固定のままだと375px幅で「条件」列が数十pxに潰れて条件名が読めない（D-09・D-12）。 */
@media (max-width: 520px) {
  .rfig .fig-prio .prio-head { display: none; }
  .rfig .fig-prio .prio-item {
    grid-template-columns: auto auto auto minmax(0, 1fr);
    grid-template-areas: "hd band no name" "cnt cnt cnt cnt";
    row-gap: 2px;
  }
  .rfig .fig-prio .prio-item .drag-h { grid-area: hd; }
  .rfig .fig-prio .prio-item .prio-band { grid-area: band; }
  .rfig .fig-prio .prio-item .prio-no { grid-area: no; }
  .rfig .fig-prio .prio-item .prio-name { grid-area: name; }
  .rfig .fig-prio .prio-item .prio-cnt { grid-area: cnt; text-align: left; font-size: 12px; }
  .rfig .fig-prio .prio-item .prio-cnt .prio-none { display: none; }
}

@media (max-width: 600px) {
  .rfig .fig-rules th, .rfig .fig-rules td { padding: 12px 12px; }
  .rfig .fig-rules th:first-child, .rfig .fig-rules td:first-child { padding-left: 0; }
  .rfig .fig-rules th:last-child, .rfig .fig-rules td:last-child { padding-right: 0; }
  .rfig .fig-judge tbody td { padding: 12px; }
  .rfig .fig-judge thead th { padding: 11px 12px; }
  .rfig .fig-prio { padding: 12px; }
}