/* =========================================================================== 配色は変数にまとめ、ダーク／ライトの2組を持つ。 個々の規則には色を直接書かないこと（片方のテーマだけ壊れる原因になる）。 切替はヘッダーのボタン。 が付くとライトになる。 =========================================================================== */ :root{ /* 夜の工場・事務所向け。既製の明るい青ではなく、藍に寄せた紺で組む。 色は「紺1色＋状態を示す3色」だけに絞り、面は塗らない */ --bg:#12151b; --panel:#191d25; --panel2:#20252e; --line:#2e3541; --ink:#e3e7ed; --muted:#919aa8; --accent:#7ba0d0; --accent2:#7ba0d0; --ok:#5f9c76; --warn:#c08f3c; --crit:#c25c55; --chip:#272d37; --head-grad:#171b22; --terminal-grad:#191d25; /* タイルと列の下地。6色を順に使い回す。彩度を落としてあるので、 並べても賑やかにならず、隣とだけ区別が付く */ --tint-1:#1a1f28; --tint-2:#192320; --tint-3:#221f19; --tint-4:#1f1d26; --tint-5:#172227; --tint-6:#241d1e; --badge-mail-bg:#272d37; --badge-mail-fg:#a5b3c6; --badge-ai-bg:#26303f; --badge-ai-fg:#9db6d6; --alert-warn-bg:#20201b; --alert-crit-bg:#241d1d; --sev-warn-fg:#141000; --sev-crit-fg:#fff; --st-work-bg:#1c3226; --st-work-fg:#7dbd91; --st-pause-bg:#332d1c; --st-pause-fg:#cfa961; --msg-ok-bg:#1b2e23; --msg-err-bg:#241d1d; --msg-warn-bg:#20201b; --tree-part:#8bbfa1; --demo-bg:#3a2f14; --demo-fg:#dfc189; --demo-line:#77601f; --btn-fg:#10141a; --shadow:none; --radius:3px; } /* ライト表示。明るい会議室・紙に近い見え方が要るときに使う */ :root[data-theme="light"]{ /* 昼の事務所・図面向け。真っ白ではなく、ごく薄い青みの紙の色にする */ --bg:#eff1f5; --panel:#ffffff; --panel2:#f6f8fb; --line:#d5dae2; --ink:#171b21; --muted:#5d6673; --accent:#284b78; --accent2:#284b78; --ok:#2c6644; --warn:#8a5a10; --crit:#a2352d; --chip:#e7eaf0; --head-grad:#ffffff; --terminal-grad:#ffffff; /* タイルと列の下地。6色を順に使い回す。彩度を落としてあるので、 並べても賑やかにならず、隣とだけ区別が付く */ --tint-1:#eef2f8; --tint-2:#edf4ef; --tint-3:#f6f2e9; --tint-4:#f2eff6; --tint-5:#ebf3f5; --tint-6:#f7efee; --badge-mail-bg:#e7eaf0; --badge-mail-fg:#48505c; --badge-ai-bg:#e3ebf5; --badge-ai-fg:#2c4a75; --alert-warn-bg:#faf7f0; --alert-crit-bg:#fcf3f2; --sev-warn-fg:#fff; --sev-crit-fg:#fff; --st-work-bg:#e2eee7; --st-work-fg:#2c6644; --st-pause-bg:#f3e8cf; --st-pause-fg:#7a4f0c; --msg-ok-bg:#e9f1ec; --msg-err-bg:#fcf3f2; --msg-warn-bg:#faf7f0; --tree-part:#2c6644; --demo-bg:#f0e2bd; --demo-fg:#6b4a05; --demo-line:#b99a3a; --btn-fg:#ffffff; --shadow:none; --radius:3px; } *{box-sizing:border-box} body{ margin:0; background:var(--bg); color:var(--ink); font-family:"Yu Gothic UI","Hiragino Sans",Meiryo,system-ui,sans-serif; font-size:14px; line-height:1.6; } header{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:10px 18px; background:var(--head-grad); border-bottom:1px solid var(--line); } .brand{display:flex; gap:11px; align-items:center} /* 記号ではなくH鋼の断面を線で描く。どの業種の道具なのかが一目で分かるようにする */ .mark{position:relative; width:20px; height:20px; flex:0 0 20px} .mark::before{content:""; position:absolute; left:0; right:0; top:2px; bottom:2px; border-top:3px solid var(--accent); border-bottom:3px solid var(--accent)} .mark::after{content:""; position:absolute; left:50%; top:2px; bottom:2px; width:3px; margin-left:-1.5px; background:var(--accent)} .brand strong{display:block; font-size:15px; letter-spacing:.01em} .sub{font-size:11px; color:var(--muted); letter-spacing:.02em} .head-right{display:flex; gap:12px; align-items:center; font-variant-numeric:tabular-nums; font-size:12.5px} /* ヘッダーは1段。日々使う画面は全部ここにあり、1回押せば開く */ nav#tabs{ display:flex; align-items:stretch; flex-wrap:wrap; gap:0; padding:0 14px; background:var(--panel); border-bottom:1px solid var(--line); /* overflow を付けると「設定」のメニューが切り取られる。 画面が狭いときは横スクロールではなく折り返す（隠れたタブに気づけないのを避ける） */ overflow:visible; } nav#tabs > button{ background:none; border:none; color:var(--muted); padding:10px 13px; font-size:13.5px; cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; border-radius:0; } nav#tabs > button:hover{color:var(--ink); background:var(--panel2)} nav#tabs > button.on{color:var(--ink); border-bottom-color:var(--accent); font-weight:700} nav#tabs > button[hidden]{display:none} /* 業務の切れ目。線1本だけにして、囲いも色も付けない */ .nav-sep{flex:0 0 1px; width:1px; background:var(--line); margin:8px 7px} .nav-sep[hidden]{display:none} .nav-gap{flex:1 1 auto; min-width:8px} /* 右端の「設定」。お客様にお見せしないものはこの中に畳む */ .nav-more{position:relative; display:flex; align-items:stretch} .nav-more[hidden]{display:none} #nav-more-btn{ background:none; border:none; color:var(--muted); padding:10px 13px; font-size:13.5px; cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; border-radius:0; } #nav-more-btn::after{content:"\25BE"; margin-left:5px; font-size:10px} #nav-more-btn:hover{color:var(--ink); background:var(--panel2)} #nav-more-btn.on{color:var(--ink); border-bottom-color:var(--accent); font-weight:700} #nav-menu{ position:absolute; right:0; top:100%; z-index:60; min-width:210px; background:var(--panel); border:1px solid var(--line); border-top:none; padding:4px 0 8px; } #nav-menu[hidden]{display:none} #nav-menu .menu-h{ margin:8px 12px 4px; font-size:10.5px; color:var(--muted); letter-spacing:.08em; border-bottom:1px solid var(--line); padding-bottom:4px; } #nav-menu button{ display:block; width:100%; text-align:left; background:none; border:none; color:var(--ink); padding:7px 12px; font-size:13px; cursor:pointer; border-radius:0; } #nav-menu button:hover{background:var(--panel2)} #nav-menu button[hidden]{display:none} main{padding:18px 20px 60px} .tab{display:none} .tab.on{display:block} /* 見出しは色で飾らず、左の短い線で示す。線は文字と同じ濃さにして、色は付けない */ h2{ font-size:13px; margin:0 0 10px; color:var(--ink); font-weight:700; letter-spacing:.03em; padding-left:9px; border-left:3px solid var(--ink); } .hint{color:var(--muted); font-size:12.5px; margin:0 0 12px} .split{display:grid; grid-template-columns:1fr 1fr; gap:16px} @media(max-width:1100px){.split{grid-template-columns:1fr}} .panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:15px; overflow-x:auto} /* KPI */ .kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:16px} /* 左の棒はやめた。棒で色を出すと、数字より棒が目立って縞模様に見える。 代わりにカードそのものを淡く塗り分け、隣との区別だけを付ける */ .kpi{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px} .kpi:nth-child(6n+1){background:var(--tint-1)} .kpi:nth-child(6n+2){background:var(--tint-2)} .kpi:nth-child(6n+3){background:var(--tint-3)} .kpi:nth-child(6n+4){background:var(--tint-4)} .kpi:nth-child(6n+5){background:var(--tint-5)} .kpi:nth-child(6n+6){background:var(--tint-6)} .kpi .v{font-size:26px; font-weight:700; line-height:1.2; font-variant-numeric:tabular-nums} .kpi .l{font-size:12px; color:var(--muted)} /* 注意・重大は数字の色で示す。下地はカードの識別に使ってしまったので、 ここで下地を塗り替えると「何番目のタイルか」が分からなくなる */ .kpi.warn .v{color:var(--warn)} .kpi.crit .v{color:var(--crit)} .kpi.ok .v{color:var(--ok)} /* カンバン */ .board{display:flex; gap:10px; overflow-x:auto; padding-bottom:12px; align-items:flex-start} /* 列も淡く塗り分ける。全部同じ色だと、横に長い板の上でいま何列目を見ているのか 見失う。カードは白（パネル色）のままにして、列の上で浮かせる */ .col{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); min-width:210px; flex:0 0 210px} .col:nth-child(6n+1){background:var(--tint-1)} .col:nth-child(6n+2){background:var(--tint-2)} .col:nth-child(6n+3){background:var(--tint-3)} .col:nth-child(6n+4){background:var(--tint-4)} .col:nth-child(6n+5){background:var(--tint-5)} .col:nth-child(6n+6){background:var(--tint-6)} /* 落とせる列。掴んでいる間だけ、はっきり分かるようにする */ .col.over{border-color:var(--accent); box-shadow:inset 0 0 0 2px var(--accent)} .col h3{ margin:0; padding:9px 12px; font-size:12.5px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; color:var(--muted); } .col h3 b{color:var(--ink)} .col-body{padding:8px; display:flex; flex-direction:column; gap:8px; min-height:44px} .card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:9px 10px; cursor:grab; font-size:12.5px; } .card:active{cursor:grabbing} .card .t{font-weight:700; margin-bottom:3px} .card .m{color:var(--muted); font-size:11.5px} .card .amt{color:var(--accent2); font-variant-numeric:tabular-nums} .badge{ display:inline-block; padding:1px 6px; border-radius:2px; font-size:10.5px; background:none; color:var(--muted); border:1px solid var(--line); margin-right:4px; letter-spacing:.02em; } .badge.mail{background:var(--badge-mail-bg); color:var(--badge-mail-fg)} .badge.ai{background:var(--badge-ai-bg); color:var(--badge-ai-fg)} /* テーブル */ table{width:100%; border-collapse:collapse; font-size:12.5px} th,td{padding:6px 8px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap} th{color:var(--muted); font-weight:600; font-size:11.5px; position:sticky; top:0; background:var(--panel)} td.num{text-align:right; font-variant-numeric:tabular-nums} tbody tr:hover{background:var(--panel2)} .scroll{max-height:420px; overflow:auto} /* アラート */ .alert{ display:flex; gap:10px; align-items:flex-start; padding:8px 11px; border-radius:0; margin-bottom:1px; border-left:3px solid; border-bottom:1px solid var(--line); } /* 左の線は淡いまま。重さは「重大」「注意」のラベルが伝えるので、 線まで強く出すと13件並んだときに画面が縞模様になる */ .alert.warn{background:var(--alert-warn-bg); border-left-color:var(--warn); opacity:1} .alert.critical{background:var(--alert-crit-bg); border-left-color:var(--crit)} .alert.warn,.alert.critical{border-left-width:2px} .alert .ty{font-weight:700; font-size:12.5px} .alert .sev{display:inline-block; padding:0 6px; border-radius:2px; font-size:11px; font-weight:700; margin-right:6px} .alert.critical .sev{background:var(--crit); color:var(--sev-crit-fg)} .alert.warn .sev{background:var(--warn); color:var(--sev-warn-fg)} .alert .de{font-size:11.5px; color:var(--muted)} /* セッション */ .sess{background:var(--panel2); border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; margin-bottom:8px} .sess .top{display:flex; justify-content:space-between; align-items:center; gap:8px} .sess .nm{font-weight:700} .sess .mi{font-variant-numeric:tabular-nums; color:var(--accent2); font-weight:700} .sess .de{font-size:11.5px; color:var(--muted); margin-top:3px} .sess .acts{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap} .st{padding:1px 7px; border-radius:2px; font-size:11px; font-weight:700; letter-spacing:.02em} .st.作業中{background:var(--st-work-bg); color:var(--st-work-fg)} .st.中断中{background:var(--st-pause-bg); color:var(--st-pause-fg)} .st.完了{background:var(--chip); color:var(--muted)} /* フォーム */ label{display:block; margin-bottom:10px; font-size:12.5px; color:var(--muted)} select,input{ width:100%; margin-top:4px; padding:7px 9px; border-radius:7px; border:1px solid var(--line); background:var(--panel2); color:var(--ink); font-size:13px; font-family:inherit; /* select はブラウザ既定の行送りが効いて input より数px高くなる。 行送りと最低の高さを明示して揃えないと、同じ行に select と input が並んだとき上端がずれる */ line-height:1.35; min-height:34px; } /* Chromium の select は line-height を無視するので、そのままだと input より1px高くなる。 同じ行に select と input が並ぶと上端がずれるため、高さを明示して揃える */ select{height:34px} select.big,input.big{padding:11px; font-size:15px} select.big{height:auto} button{ background:var(--accent); color:var(--btn-fg); border:none; border-radius:var(--radius); padding:8px 16px; font-size:13px; cursor:pointer; font-family:inherit; font-weight:600; } button:hover{filter:brightness(1.12)} button:focus-visible,select:focus-visible,input:focus-visible,nav button:focus-visible{ outline:3px solid var(--accent2); outline-offset:2px; } button.ghost{background:var(--chip); color:var(--ink)} button.sm{padding:4px 10px; font-size:11.5px} button.huge{width:100%; padding:16px; font-size:17px; margin-top:6px} .btn-row{display:flex; gap:10px} .row{display:flex; gap:14px; align-items:flex-end; margin-bottom:14px; flex-wrap:wrap} .row label{min-width:280px; margin-bottom:0} .terminal-panel{background:var(--terminal-grad)} .step{display:flex; gap:12px; margin-bottom:14px} .step-no{ flex:0 0 28px; height:28px; border-radius:50%; background:var(--accent); /* 地が濃紺（ライト）にも淡い青（ダーク）にもなるので、文字色も一緒に切り替える。 固定するとどちらかで読めなくなる */ color:var(--btn-fg); display:grid; place-items:center; font-weight:700; font-size:13px; } .step > div{flex:1} .step-label{font-size:12.5px; color:var(--muted); margin-bottom:4px} .cut-row{display:grid; grid-template-columns:1fr 1fr 90px 34px; gap:6px; margin-bottom:6px; align-items:center} .cut-row input{margin-top:0} .cut-row button{background:var(--chip); color:var(--ink); padding:6px 8px} .calc{font-size:12.5px; color:var(--muted); margin:10px 0; padding:9px 11px; background:var(--panel2); border-radius:7px} .calc b{color:var(--accent2)} .calc.err b{color:var(--crit)} .msg{padding:10px 12px; border-radius:8px; margin-top:12px; font-size:12.5px} .msg.ok{background:var(--msg-ok-bg); border-left:3px solid var(--ok)} .msg.err{background:var(--msg-err-bg); border-left:3px solid var(--crit)} .msg.warn{background:var(--msg-warn-bg); border-left:3px solid var(--warn)} .tree{font-family:Consolas,"SF Mono",monospace; font-size:12px; line-height:1.9} .tree .lot{color:var(--accent2)} .tree .part{color:var(--tree-part)} .tree .rem{color:var(--warn)} .tree .meta{color:var(--muted)} .empty{color:var(--muted); font-size:12.5px; padding:14px 0; text-align:center} /* =========================================================================== 画面の実測（1366/1920/2560/1024/768 × 12タブ）で見つかった問題への対応。 レイアウトは決壊していないが「隠れていて気づけない」型の欠陥を潰す。 ※ このファイルは以前 3重複していた。追記するときは末尾に1箇所だけにすること =========================================================================== */ /* 現場端末・勤怠端末は手袋と保護メガネ前提。文字とボタンを大きくする */ .terminal-panel{font-size:16px} .terminal-panel .step-label{font-size:14px} .terminal-panel select,.terminal-panel input{font-size:17px; padding:13px} /* 作業者が実際に一番押すのは「進行中の作業」の中断／再開／完了。 ここが 43×23px だと手袋で誤タップする。指で押す前提の最小44pxに引き上げる */ #t-sessions .acts button, #attend .acts button, #c-list .acts button{min-height:46px; min-width:92px; padding:12px 18px; font-size:15px} #t-sessions .acts,#attend .acts,#c-list .acts{gap:10px} @media (pointer:coarse){ button.sm{min-height:44px; padding:10px 16px; font-size:14px} } /* 全社カンバンは14列ある。列幅を詰めて「次の列のかけら」を必ず見せ、 続きがあることに気づけるようにする（1366pxで6列ぴったりに収まると「6列で終わり」と誤読される） */ @media (max-width:1500px){ .col{min-width:196px; flex:0 0 196px} } .board{scrollbar-width:auto; scrollbar-color:var(--accent) var(--panel2)} .board::-webkit-scrollbar{height:12px} .board::-webkit-scrollbar-thumb{background:var(--accent); border-radius:6px} .board::-webkit-scrollbar-track{background:var(--panel2); border-radius:6px} /* 閲覧専用のカンバンは「掴める」合図を出さない */ .board.readonly .card{cursor:default} .board.readonly .card:active{cursor:default} /* 工数帳票は作業者が増えると横に伸びる。1列目を固定しないと、 右端まで送ったときに工事名・氏名が画面外へ出て、数字だけの表になる */ #sheet-project td:first-child,#sheet-employee td:first-child{ position:sticky; left:0; z-index:2; background:var(--panel); box-shadow:1px 0 0 var(--line); } #sheet-project thead th:first-child,#sheet-employee thead th:first-child{ position:sticky; left:0; top:0; z-index:3; background:var(--panel); } #sheet-project tbody tr:hover td:first-child, #sheet-employee tbody tr:hover td:first-child{background:var(--panel2)} /* ライブボードは壁掛け・プロジェクタで使う。1画面に収め、 アラートが24件あっても「下に続きがある」と分かる形にする */ @media (min-width:1600px){ #live .split{height:calc(100vh - 250px)} #live-sessions,#live-alerts{max-height:100%; overflow-y:auto} } /* 2カラムのままだと 1366px で表の右3列が切れる。 1024px（1カラム）より情報が少ないという逆転が起きるので、しきい値を上げる */ @media (max-width:1450px){.split{grid-template-columns:1fr}} /* 画面が狭いときはタブを詰める。折り返しは常に有効なので、隠れて気づけないタブは出ない */ @media (max-width:1400px){ nav#tabs > button,#nav-more-btn{padding:10px 10px; font-size:13px} .nav-sep{margin:8px 4px} } /* 1920px以上で本文だけ大きくなり、見出しが本文より小さくなっていた */ @media (min-width:1920px){ body{font-size:17px} .kpi .v{font-size:38px} .kpi .l{font-size:17px} .sess .nm{font-size:19px} .sess .de{font-size:15px} .sess .mi{font-size:20px} .alert .ty{font-size:17px} .alert .de{font-size:16px} h2{font-size:22px} .hint{font-size:15px} table{font-size:15px} th{font-size:14px} main{max-width:2400px; margin:0 auto} } @media (min-width:2400px){ body{font-size:20px} .kpi .v{font-size:48px} } /* main だけ中央寄せだと、2560px でヘッダーとタブの端が離れすぎる */ header,nav{max-width:2400px; margin-left:auto; margin-right:auto; width:100%} header{flex-wrap:wrap; gap:8px} @media(max-width:700px){.cut-row{grid-template-columns:1fr 1fr}} /* デモデータ投入中であることを常に見えるようにする（本番データとの取り違え防止）。 :not([hidden]) が無いと hidden 属性を上書きしてしまい、0件でもバッジが出続ける */ .demo-badge:not([hidden]){ display:inline-block; padding:2px 10px; border-radius:999px; background:var(--demo-bg); color:var(--demo-fg); border:1px solid var(--demo-line); font-size:12px; font-weight:600; letter-spacing:.02em; } /* 表示切替ボタン。押すと切り替わる先を表示する */ #theme-toggle{ background:var(--panel2); color:var(--ink); border:1px solid var(--line); border-radius:7px; padding:7px 12px; font-size:13px; cursor:pointer; white-space:nowrap; } #theme-toggle:hover{border-color:var(--accent)} /* ライト表示では、面の輪郭が飛びやすいので薄い影で持ち上げる */ :root[data-theme="light"] .panel, :root[data-theme="light"] .card, :root[data-theme="light"] .sess, :root[data-theme="light"] .kpi{box-shadow:var(--shadow)} :root[data-theme="light"] .logo{color:var(--accent)} /* カンバンのカードはクリックで案件へ飛べる。押せることが分かるようにする */ #board .card{cursor:pointer} #board .card:hover{border-color:var(--accent)} #board .card:focus-visible{outline:2px solid var(--accent2); outline-offset:2px} /* 閲覧専用の工程カンバンだけは、押せる合図を出さない */ .board.readonly .card:hover{border-color:var(--line)} /* 第2階層カンバン。作業中の部材は動かせないので、掴める合図を出さない */ #proc-board .card{cursor:grab} #proc-board .card:active{cursor:grabbing} #proc-board .card.busy{cursor:not-allowed; opacity:.72} #proc-board .card.busy:hover{border-color:var(--line)} #proc-board .col.over{outline:2px dashed var(--accent2); outline-offset:-4px} /* ライブボードから中へ入っていけることを、見た目でも示す */ .kpi.drill{cursor:pointer; transition:border-color .12s, transform .06s} .kpi.drill:hover{border-color:var(--accent)} .kpi.drill:active{transform:translateY(1px)} .kpi.drill.open{border-color:var(--accent2)} .kpi .caret{font-size:11px; color:var(--muted); margin-left:4px} .kpi.drill:focus-visible{outline:3px solid var(--accent2); outline-offset:2px} .sess.link,.alert.link{cursor:pointer} .sess.link:hover{border-color:var(--accent)} .alert.link:hover{background:var(--panel2)} .sess.link:focus-visible,.alert.link:focus-visible{outline:3px solid var(--accent2); outline-offset:2px} .drill-panel{margin:12px 0 4px} .drill-panel h2{display:flex; align-items:center; justify-content:space-between; gap:12px} #live-drill tbody tr.link{cursor:pointer} #live-drill tbody tr.link:hover td{background:var(--panel2)} #live-drill tbody tr.link:focus-visible{outline:2px solid var(--accent2); outline-offset:-2px} /* 飛んだ先でどのカードのことか分かるように、一瞬光らせる */ .card.flash{animation:flash 1.6s ease-out} @keyframes flash{ 0%{box-shadow:0 0 0 3px var(--accent2)} 100%{box-shadow:0 0 0 0 transparent} } /* ===== QRシールの印刷 ===== */ #label-modal{ position:fixed; inset:0; z-index:50; background:var(--bg); overflow:auto; padding:0 0 40px; } #label-modal[hidden]{display:none} .label-bar{ position:sticky; top:0; z-index:2; display:flex; gap:14px; align-items:center; flex-wrap:wrap; padding:12px 20px; background:var(--panel); border-bottom:1px solid var(--line); } .label-bar strong{font-size:16px; color:var(--accent2)} #label-sheet{ --lw:60mm; --lh:40mm; display:flex; flex-wrap:wrap; gap:4mm; padding:8mm; align-content:flex-start; } .label{ width:var(--lw); height:var(--lh); border:1px solid #000; background:#fff; color:#000; display:flex; gap:2mm; padding:2mm; box-sizing:border-box; overflow:hidden; break-inside:avoid; } .label .q{flex:0 0 auto; display:flex; align-items:center} /* QRの大きさは高さだけでなく幅も見て決める。高さだけで決めると、 横長でないシールほどテキスト欄が潰れ、母材IDやチャージ番号が切れる */ .label .q svg{ width:min(calc(var(--lh) - 6mm), calc(var(--lw) * 0.34)); height:min(calc(var(--lh) - 6mm), calc(var(--lw) * 0.34)); display:block; } .label .t{flex:1; min-width:0; font-size:2.5mm; line-height:1.3; overflow:hidden} .label .id{font-size:3.4mm; font-weight:700; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} /* 規格名が長い母材（BH材・特注材）で2行に流れると、下のチャージ番号が枠外へ押し出される */ .label .sp{font-size:2.7mm; font-weight:600; margin-bottom:.5mm; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .label .kv{white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .label .kv.small{font-size:2.2mm; color:#333} .qr-ng{font-size:2.6mm; color:#b91c1c} /* 印刷のときはシールだけ出す。画面の色は持ち込まない（白地に黒で刷る） */ @media print{ /* 画面の配色を紙に持ち込まない。ダークのまま「背景のグラフィック」を有効にして刷ると、 A4の大半が紺黒でベタ塗りされる（実測で暗画素50%） */ html,body{background:#fff !important; color:#000 !important} body.label-open > *:not(#label-modal){display:none !important} #label-modal{position:static; background:#fff !important; padding:0} .label-bar{display:none !important} /* 余白を詰めて1枚でも多く並べる（60×40 が2列→3列になり、用紙とラベル台紙が3割減る） */ #label-sheet{padding:0; gap:2mm} .label{border:1px solid #000; background:#fff !important; color:#000 !important} .label .kv.small{color:#333 !important} @page{margin:6mm} } /* 工程カンバンのカードは押せば中が見える。作業中でも見るだけはできる */ #proc-board .card{cursor:pointer} #proc-board .card:hover{border-color:var(--accent)} #proc-board .card:focus-visible{outline:3px solid var(--accent2); outline-offset:2px} #part-detail:empty{display:none} /* ===== 2階層のメニュー ===== */ /* 滞留日数。長く止まっているものほど強く出す */ .age{ display:inline-block; padding:1px 6px; border-radius:2px; font-size:11px; font-weight:700; white-space:nowrap; margin-left:2px; } .age.ok{background:var(--chip); color:var(--muted)} .age.warn{background:var(--alert-warn-bg); color:var(--warn); border:1px solid var(--warn)} .age.crit{background:var(--alert-crit-bg); color:var(--crit); border:1px solid var(--crit)} .age.none{background:transparent; color:var(--muted)} .col h3{gap:6px} .col h3 .age{margin-left:auto} /* =========================================================================== ログイン・パスワード変更（画面全体を覆う） =========================================================================== */ .overlay{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; background:var(--bg); padding:16px; overflow:auto; } /* hidden を必ず勝たせる。display を後から書くと「閉じない画面」になる（デモバッジで踏んだ罠） */ .overlay[hidden]{display:none} .login-box{ width:min(440px,100%); background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:24px; box-shadow:var(--shadow); } .login-brand{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:16px; color:var(--ink); margin-bottom:18px; } .login-brand .logo{color:var(--accent2)} .login-modes{display:flex; gap:6px; margin-bottom:16px} .login-modes button{ flex:1; padding:10px 8px; font-size:13px; background:var(--panel2); color:var(--muted); border:1px solid var(--line); border-radius:8px; cursor:pointer; } .login-modes button.on{background:var(--accent); color:var(--btn-fg); border-color:var(--accent)} .login-box label{display:block; margin-bottom:14px; color:var(--muted); font-size:13px} .login-box input{ display:block; width:100%; margin-top:6px; padding:10px 12px; background:var(--panel2); color:var(--ink); border:1px solid var(--line); border-radius:8px; font-size:15px; } /* 現場端末は手袋のまま押すので、入力欄もボタンも大きくする */ .login-box input.big{font-size:22px; padding:14px 12px; letter-spacing:.12em} .login-box button[type="submit"]{width:100%; margin-top:4px} #pw-logout{width:100%; margin-top:10px} #lg-msg,#pw-msg{margin-top:14px} .me-name{color:var(--muted); font-size:13px; white-space:nowrap} /* =========================================================================== カンバンの遷移制約（画面設計書 U-4） =========================================================================== */ /* 請求・入金は第2期。列は残して「いまは使えない」と分かるようにする */ .col-locked{opacity:.55} .col-locked h3 .lock{ font-style:normal; font-size:10px; padding:1px 6px; border-radius:999px; background:var(--chip); color:var(--muted); margin-left:6px; white-space:nowrap; } /* ドラッグ中だけ出る印。落とせる列を縁取り、落とせない列を沈める */ #board .col.drop-ok{outline:2px dashed var(--accent); outline-offset:-3px} #board .col.drop-ng{opacity:.28} /* =========================================================================== 画面から画面へ飛ぶリンク（表・カードの中の押せる文字） =========================================================================== */ .golink{ color:var(--accent); text-decoration:none; border-bottom:1px dotted var(--accent); cursor:pointer; } .golink:hover{color:var(--accent2); border-bottom-style:solid} .golink:focus-visible{outline:2px solid var(--accent); outline-offset:2px} /* 飛んできた行を一瞬だけ光らせる。どこへ着いたのかが分かるように */ tr.hit{outline:2px solid var(--accent); outline-offset:-2px; background:var(--panel2)} /* 打刻の代理入力（ふだんは畳んでおく） */ details.proxy{margin:10px 0; border:1px solid var(--line); border-radius:8px; padding:8px 10px; background:var(--panel2)} details.proxy summary{cursor:pointer; color:var(--muted); font-size:13px} details.proxy label{display:block; margin-top:8px; color:var(--muted); font-size:13px} details.proxy input{width:100%; margin-top:4px; padding:8px; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:6px} /* 入金予定日を過ぎた請求。放っておくと資金繰りに効くので目立たせる */ .sess.late{border-left:3px solid var(--crit)} /* 入力欄のすぐ横に置くボタン。 ボタンを入力欄の下に置くと、その項目だけ背が高くなって行の高さが揃わなくなる */ .input-with-btn{display:flex; gap:6px; align-items:center; margin-top:4px} .input-with-btn input{margin-top:0} .input-with-btn button{flex:0 0 auto; white-space:nowrap} /* 項目が多くて1行に収まらない行。1項目あたりの最小幅を詰めて折り返さないようにする */ .row.compact label{min-width:190px} /* チェックボックス付きのラベル。入力欄と同じ行に並べる */ label.chk{display:flex; align-items:center; gap:6px; align-self:flex-end; padding-bottom:8px} label.chk input{width:auto; margin:0} /* カンバンの列の編集。ふだんは畳んでおく（板を見に来た人の邪魔をしない） */ .cols-edit > summary{ cursor:pointer; font-size:13px; font-weight:700; color:var(--ink); padding-left:9px; border-left:3px solid var(--ink); list-style:none; } .cols-edit > summary::-webkit-details-marker{display:none} .cols-edit > summary::before{content:"\25B8 "; color:var(--muted)} .cols-edit[open] > summary::before{content:"\25BE "} .cols-edit table{margin-top:10px; max-width:760px} .cols-edit input[type="text"]{width:100%; max-width:220px; margin-top:0} .cols-edit td{white-space:nowrap} /* ---------- カレンダー（全体像） ---------- */ .cal-head{align-items:center; gap:10px; margin-bottom:12px} .cal-title{font-size:15px; min-width:8.5em; text-align:center; letter-spacing:.02em} .cal-legend{display:flex; gap:6px; margin-left:auto; flex-wrap:wrap} /* 凡例は色見本なので、日付の中の項目と違って幅いっぱいに伸ばさない */ .cal-legend .ev{display:inline-block; width:auto; cursor:default; font-size:10.5px} .cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--line); border:1px solid var(--line)} .cal-w{background:var(--panel2); padding:6px 8px; font-size:11.5px; font-weight:700; color:var(--muted); text-align:center} .cal-w.sun,.cal-n.sun{color:var(--crit)} .cal-w.sat,.cal-n.sat{color:var(--accent)} /* 1マスの高さ。予定が増えたら伸びるが、下限を決めて月の形が崩れないようにする */ .cal-d{background:var(--panel); min-height:88px; padding:4px 5px 6px; display:flex; flex-direction:column; gap:3px} .cal-d.out{background:var(--panel2)} .cal-d.out .cal-n{opacity:.45} .cal-d.today{box-shadow:inset 0 0 0 2px var(--accent)} .cal-n{font-size:11.5px; font-variant-numeric:tabular-nums; color:var(--muted)} /* 日付の中に置く項目。色は種類の区別だけに使い、塗りつぶさない */ .ev{ display:block; width:100%; text-align:left; font-style:normal; font-size:10.5px; line-height:1.35; padding:2px 5px; border-radius:2px; border:1px solid var(--line); border-left-width:3px; background:var(--panel2); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; } .ev:hover{background:var(--chip)} .ev-recv{border-left-color:var(--accent)} .ev-quote{border-left-color:var(--warn)} .ev-submit{border-left-color:var(--ok)} .ev-order{border-left-color:var(--ink)} .ev-due{border-left-color:var(--crit)} /* 受注から納期までの帯。濃い部分が済んだ割合 */ .cal-list td.gcell{min-width:220px; width:26%} .gantt{position:relative; height:16px; background:var(--panel2); border:1px solid var(--line); border-radius:2px} .gb{position:absolute; top:0; bottom:0; background:var(--chip); border:1px solid var(--bar); border-radius:2px; overflow:hidden} .gb.late{border-color:var(--crit)} .gb > i{display:block; height:100%; background:var(--bar)} .gb.late > i{background:var(--crit); opacity:.55} .cal-list .muted{color:var(--muted)} @media (max-width:1100px){ .cal-d{min-height:70px} .cal-legend{margin-left:0} } /* ログイン画面のマーク。ヘッダーと同じH鋼の断面 */ .login-brand{display:flex; align-items:center; gap:9px}